/* Portrait library and full-page navigation. Existing palettes remain the source of colours. */
:root{--side-width:240px;--editor-width:405px}body[data-sidebar=rail]{--side-width:64px}body[data-sidebar=hidden]{--side-width:0px}body.panel-closed,body[data-page=workflow],body[data-page=settings]{--editor-width:0px}
body .shell,body.panel-closed .shell{display:grid;grid-template-columns:var(--side-width) minmax(0,1fr) var(--editor-width);height:calc(100dvh - 76px);transition:grid-template-columns 220ms ease}
body .sidebar{position:relative;top:auto;bottom:auto;width:auto;transform:none;min-width:0;padding:22px 16px;background:var(--surface);transition:padding 220ms ease;overflow:auto}
body[data-sidebar=hidden] .sidebar{padding-left:0;padding-right:0;visibility:hidden}body[data-sidebar=rail] .sidebar{padding:22px 8px}
#library-nav{min-width:0}#sidebar-close{display:none}#settings-nav{display:flex;flex-direction:column;gap:6px;height:100%}#settings-nav[hidden],#library-nav[hidden],#library-main[hidden],#settings-page[hidden]{display:none!important}
#settings-nav button,.all-button{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;text-align:left;border-radius:7px;padding:10px 12px;background:none;white-space:nowrap}#settings-nav button[aria-current=page],.all-button[aria-current=page]{background:var(--wash);font-weight:600}#settings-nav #back-library{margin-top:auto}.all-button .nav-label{overflow:hidden;text-overflow:ellipsis}#workflow-nav{margin-bottom:5px}#workflow-nav>span:first-child,#all-prompts>span:first-child{width:18px;text-align:center;flex-shrink:0;font-size:18px}body[data-sidebar=rail] #library-nav>:not(.all-button),body[data-sidebar=rail] .nav-label{display:none}body[data-sidebar=rail] .all-button,body[data-sidebar=rail] #settings-nav button{justify-content:center;padding:10px}body[data-sidebar=rail] #settings-nav #back-library{font-size:0}body[data-sidebar=rail] #settings-nav #back-library>span:first-child{font-size:16px}
#sidebar-toggle,#sidebar-hide{z-index:2}#sidebar-hide{font-size:24px}#mobile-nav{display:none!important}#save-state{display:inline!important;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header #backup,header #restore{display:none}body[data-page=settings] header #new-prompt,body[data-page=settings] header #toggle-panel,body[data-page=workflow] header #toggle-panel{display:none}body[data-page=workflow] .editor,body[data-page=settings] .editor{visibility:hidden;pointer-events:none;padding:0;overflow:hidden}body main{min-width:0;overflow:auto;padding:26px 28px}
#view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:22px 0}#view-title{font-size:25px;font-weight:550;letter-spacing:-.6px;margin:0 0 5px;overflow-wrap:anywhere}#view-count{font-size:12px;color:var(--muted)}.view-switch{display:flex;flex-shrink:0;border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px;background:var(--wash)}.view-switch button{padding:7px 12px;border-radius:5px;background:none;font-size:12px}.view-switch button[aria-pressed=true]{background:var(--surface);color:var(--ink)}
#prompt-list.portrait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:24px 18px}.portrait-grid .prompt-row{display:flex;flex-direction:column;min-width:0;align-items:stretch;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}.portrait-grid .prompt-row:before,.portrait-grid .prompt-row:after{display:none}.portrait-grid .prompt-open{display:block;padding:0;text-align:left;min-width:0;background:none}.prompt-thumbnail{display:block;aspect-ratio:3/4;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--wash)}.prompt-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}.image-placeholder{display:flex;height:100%;min-height:100%;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:28px;color:var(--muted)}.image-placeholder small{font-size:12px;font-weight:400}.portrait-grid .prompt-title{padding:12px 0 8px;font-size:13px;line-height:1.5}.portrait-grid .prompt-title span{white-space:normal;overflow-wrap:anywhere}.portrait-grid .prompt-meta{display:none}.portrait-grid .row-actions{display:flex;justify-content:space-between;opacity:1;padding:0;margin-top:auto}.portrait-grid .row-actions button{width:auto;gap:6px;font-size:11px;padding:6px 7px;height:32px}.portrait-grid .spell>.glyph{position:static}.portrait-grid .spell>.check{left:7px}.portrait-grid .spell>span:not(.glyph):not(.check){display:inline}.portrait-grid .prompt-row.selected .prompt-thumbnail{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.image-editor{margin:18px 0;border-top:1px solid var(--line);padding-top:16px}.image-editor input[type=file]{width:100%;font-size:11px;padding:8px}.image-editor img{width:100%;max-height:220px;object-fit:contain;margin-top:12px}.image-editor p{font-size:11px;color:var(--muted)}.image-editor button{font-size:11px}
#workflow-back{display:none}body[data-page=workflow] main{padding:0;overflow:hidden}body[data-page=workflow] #library-main{height:100%;display:flex;flex-direction:column}body[data-page=workflow] .search-line,body[data-page=workflow] .tab-line,body[data-page=workflow] #view-toolbar,body[data-page=workflow] .list-heading{display:none}body[data-page=workflow] #workflow-back{display:block;position:absolute;right:20px;top:20px;z-index:3}body[data-page=workflow] #workflow-view{height:100%;display:flex;flex-direction:column;min-height:0}body[data-page=workflow] .workflow-toolbar{padding:22px 24px 10px}body[data-page=workflow] .workflow-guide{padding:0 24px}body[data-page=workflow] .workflow-viewport{flex:1;min-height:0;height:auto;border:0;border-top:1px solid var(--line);border-radius:0}body[data-page=workflow] .workflow-node{border-radius:10px}.workflow-node-head strong{overflow-wrap:anywhere}
#settings-page{max-width:820px;margin:0 auto}.settings-content{padding:22px 28px}.settings-content h1{font-size:28px;font-weight:550;letter-spacing:-.6px;margin:0 0 30px}.settings-content .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.setting-row{gap:16px;padding:22px 0}.setting-row>div{min-width:0}.setting-row p{margin:6px 0 0;overflow-wrap:anywhere}.setting-row button{flex-shrink:0}.setting-row select{width:150px;padding-right:42px}.settings-content .account-identity{margin-bottom:32px}.account-identity p{overflow-wrap:anywhere}.account-dialog{width:min(500px,calc(100vw - 32px))}.account-error{color:#b0384f!important;white-space:normal}.account-dialog .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.account-dialog h2{margin:0}.account-dialog p{font-size:13px;line-height:1.6}
.auth-card{width:min(440px,100%);max-height:100dvh;overflow:auto;text-align:left;padding:32px}.auth-card h1{font-size:30px}.auth-card .auth-logo{display:block;margin:auto}.auth-card input{width:100%;padding:11px 12px;border-radius:7px;border:1px solid var(--line);margin-top:6px}.auth-card form .primary,.auth-card>.primary{width:100%}.auth-card .primary{margin:18px 0}.auth-divider{text-align:center;font-size:12px;color:var(--muted);margin:16px 0}.auth-card .field-label{margin:16px 0}#auth-status{min-height:22px;font-size:12px}#auth-screen{overflow:auto}
.select-trigger{padding-right:44px!important;min-width:0}.select-trigger>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-trigger>.chevron{position:absolute!important;right:17px!important;top:50%!important;transform:translateY(-65%) rotate(45deg)!important;width:6px;height:6px}.select-trigger[aria-expanded=true]>.chevron{transform:translateY(-30%) rotate(225deg)!important}.motion-select{min-width:0}#settings-sidebar{appearance:none;padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 16px) 50%;background-size:4px 4px;background-repeat:no-repeat}
*:focus-visible{outline:2px solid var(--accent)!important;outline-offset:0!important}button:disabled{cursor:default;opacity:.5}.helix i::before,.helix i::after{animation:none!important}.save-pending{animation:none!important}
dialog[open]{animation:dialog-enter 180ms ease-out both}dialog[open]::backdrop{animation:backdrop-enter 180ms ease-out both}dialog.dialog-closing{animation:dialog-exit 160ms ease-in both}dialog.dialog-closing::backdrop{animation:backdrop-exit 160ms ease-in both}.page-enter,#settings-nav{animation:page-enter 180ms ease-out both}@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}@keyframes dialog-exit{to{opacity:0;transform:translateY(6px) scale(.985)}}@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}@keyframes backdrop-exit{to{opacity:0}}@keyframes page-enter{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@media(min-width:1550px){:root{--editor-width:450px}}@media(max-width:1150px){:root{--side-width:220px;--editor-width:0px}body .editor,body.panel-closed .editor{position:fixed;top:76px;bottom:0;right:0;width:410px;max-width:100%;z-index:6}body.panel-closed .editor{visibility:hidden}body:not(.panel-closed)[data-page=library] .editor{visibility:visible}}
@media(max-width:760px){header{height:76px;min-height:76px;padding:12px;align-items:center;gap:4px}.brand{display:none}.header-actions{position:static;flex:1;justify-content:flex-end;gap:5px;margin-left:auto}#save-state{display:none!important}.header-actions .primary{padding:9px!important}:root{--side-width:0px}body[data-sidebar=full]{--side-width:0px}body[data-sidebar=rail]{--side-width:58px}body .shell,body.panel-closed .shell{height:calc(100dvh - 76px)}body .sidebar{padding:16px 7px}body[data-sidebar=full] .sidebar{position:fixed;top:76px;left:0;bottom:0;width:260px;z-index:9;box-shadow:12px 0 40px #0002;padding:16px}body[data-sidebar=full] #sidebar-close{display:block;margin-bottom:15px}body main{padding:20px 14px}body .editor,body.panel-closed .editor{top:76px}.portrait-grid .row-actions button{font-size:11px;padding:6px 3px}.portrait-grid .prompt-title{font-size:12px}#prompt-list.portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}#view-toolbar{gap:8px;align-items:flex-start;flex-wrap:wrap}#view-title{font-size:22px}.settings-content{padding:10px 5px}.settings-content .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.setting-row{gap:10px}.setting-row button{font-size:11px;padding:8px 4px}.settings-content h1{font-size:25px}.account-identity{gap:10px}.account-identity .profile-avatar{flex-shrink:0}.account-identity strong{font-size:15px}body[data-page=workflow] #workflow-back{position:static;text-align:left;order:-1;padding:10px 16px}body[data-page=workflow] .workflow-toolbar{padding:12px}body[data-page=workflow] .workflow-guide{padding:0 12px;flex-wrap:wrap}.workflow-guide>span{max-width:none}.workflow-tools{flex-wrap:wrap}.search-line{gap:8px}.color-filter{width:120px;flex-shrink:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}[data-motion=false] *,[data-motion=false] *::before,[data-motion=false] *::after{animation:none!important;transition:none!important}
#view-title,.settings-content h1,.auth-card h1{font-family:inherit;font-style:normal}#workflow-nav span,#all-prompts span{margin-left:0;color:var(--ink);font-size:12px}#workflow-nav,#all-prompts{margin-bottom:5px;justify-content:flex-start}#all-prompts{margin-bottom:22px}body[data-page=workflow] #workflow-back{position:static!important;order:0;padding:8px 12px}body[data-page=workflow] header #new-prompt{display:none}
/* Keep fixed-position select menus in viewport coordinates throughout dialog motion. */
dialog{transform:none!important}dialog[open]>form{animation:page-enter 180ms ease-out}

/* Shared finite interaction states. */
#save-state,#project-description,#mobile-nav{display:none!important}
*:focus,*:focus-visible{outline:none!important}
button:focus-visible,[role=button]:focus-visible,[role=option]:focus-visible{background-color:var(--wash)!important}
input:focus-visible,textarea:focus-visible{background-color:var(--surface)!important;box-shadow:none!important}
.chevron,.select-trigger>.chevron{transform:translateY(-2px) rotate(45deg)!important;transition:transform 180ms ease!important}
[aria-expanded=true]>.chevron,.select-trigger[aria-expanded=true]>.chevron{transform:translateY(-2px) rotate(-45deg)!important}
.select-trigger>.chevron{top:50%!important;right:17px!important}
.sidebar-chevron{display:block;font-size:27px;line-height:1;transform:rotate(0);transition:transform 180ms ease}
body[data-sidebar=hidden] .sidebar-chevron{transform:rotate(180deg)}
#sidebar-toggle{flex-shrink:0}#back-library{white-space:nowrap}#back-library[hidden]{display:none!important}
.sidebar-menu{z-index:100;min-width:180px}.sidebar-menu button{width:100%;text-align:left;padding:12px}
body.panel-transition .shell{transition:none!important}.prompt-row{transform-origin:top left}
.image-drop{display:flex;position:relative;min-height:190px;width:100%;padding:20px;border:1px dashed var(--line);border-radius:16px;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--wash);color:var(--muted);overflow:hidden}
.image-drop img{width:100%;max-height:260px;object-fit:contain;border-radius:10px}.image-drop img[hidden]{display:none}
.image-drop span{font-size:12px}.image-over{background:var(--glow-b)!important;box-shadow:inset 0 0 0 2px var(--accent)!important}.image-editor #image-status:empty{display:none}
.node-copy{font-size:20px!important;flex-shrink:0}.node-copy.done{background:var(--glow-b)}.portrait-grid .row-actions{gap:2px}
.folder-pick,[data-drag-tab]{cursor:grab;touch-action:pan-y}.folder-pick:hover,[data-drag-tab]:hover{background:var(--wash);border-radius:5px}.folder-pick:active,[data-drag-tab]:active{cursor:grabbing}
.folder-line{position:relative}.folder-collapse,.folder-indent{width:19px;min-width:19px;display:flex;align-items:center;justify-content:center;padding:0}.folder-collapse{height:30px;background:none;border:0}.folder-collapse .chevron{width:5px;height:5px}.folder-children>div{min-height:0;overflow:hidden}.folder-children[inert]{pointer-events:none}
[data-drag-tab]{position:relative}.drop-before::before,.drop-after::after{content:''!important;position:absolute;background:var(--accent);z-index:20;pointer-events:none}
[data-drag-tab].drop-before::before{left:-4px;top:5px;bottom:5px;width:2px}[data-drag-tab].drop-after::after{right:-4px;top:5px;bottom:5px;width:2px}
.folder-line.drop-before::before{top:0;left:0;right:0;height:2px}.folder-line.drop-after::after{bottom:0;left:0;right:0;height:2px}.drop-inside{background:var(--glow-b)!important;box-shadow:inset 0 0 0 1px var(--accent);border-radius:7px}.dragging{opacity:.35}.drag-ghost{pointer-events:none;position:fixed;left:0;top:0;z-index:9999;padding:7px 10px;border-radius:6px;background:var(--surface);box-shadow:0 4px 14px #0002;font-size:13px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sort-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin:8px 0}.sort-item>[data-name]{flex:1;min-width:0}.sort-item input{width:100%;padding:5px}.sort-item .icon-button{width:32px;height:32px}
.workflow-links>path[data-edge]{pointer-events:stroke;cursor:pointer;stroke-width:9;stroke:transparent;filter:drop-shadow(0 0 0 var(--accent))}.workflow-links>path[data-edge]{stroke:var(--muted);stroke-width:2.5;pointer-events:stroke}.workflow-links>path[data-edge]:hover,.workflow-links>path.selected{stroke:var(--accent);stroke-width:5}.workflow-links{overflow:visible}.workflow-links path{color:var(--muted)}
.node-port{position:absolute;top:102px;width:16px!important;height:16px!important;padding:0;border:2px solid var(--accent);background:var(--surface);border-radius:50%;z-index:2;touch-action:none}.node-port.input{left:-9px}.node-port.output{right:-9px}.node-port:hover,.node-port.connecting{background:var(--accent);transform:scale(1.2)}
.workflow-node-actions{flex-wrap:wrap}.workflow-node-actions .quiet{padding:5px;font-size:10px}.workflow-node-head strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workflow-node-head:hover{background:var(--wash);border-radius:16px 16px 0 0}.workflow-viewport{touch-action:pan-x pan-y}.workflow-guide{flex-wrap:wrap;gap:8px}.step-source-tabs{display:flex;gap:10px;margin-bottom:18px}.step-preview{max-height:100px;overflow:auto;font-size:12px;color:var(--muted);white-space:pre-wrap}
@media(max-width:760px){#workflow-back,#back-library{font-size:11px;padding:5px!important}.portrait-grid .row-actions .node-copy{font-size:17px!important}.workflow-toolbar{gap:8px}.workflow-guide>div{flex-wrap:wrap}#return-workflow{font-size:11px}}
@media(prefers-reduced-motion:reduce){.chevron,.select-trigger>.chevron,.sidebar-chevron{transition:none!important}}
[data-motion=false] .chevron,[data-motion=false] .sidebar-chevron{transition:none!important}

.workflow-links>path[data-link-visual]{fill:none;stroke:var(--muted);stroke-width:2;pointer-events:none;marker-end:url(#wf-arrow)}.workflow-links>path[data-link-visual].selected{stroke:var(--accent);stroke-width:3}.workflow-links>path[data-edge],.workflow-links>path[data-edge]:hover,.workflow-links>path[data-edge].selected{stroke:transparent;stroke-width:16;filter:none;marker-end:none;pointer-events:stroke}

#back-library .nav-label{display:inline!important}#return-workflow{white-space:nowrap}#return-workflow[hidden]{display:none!important}

/* Consistent navigation rhythm and shared editor action geometry. */
#library-nav>.project-select{margin-bottom:16px}#workflow-nav{margin:0 0 8px!important}#all-prompts{margin:0 0 16px!important}.collection-section{margin-top:0!important}.collection-heading{margin-top:0!important}
.editor-bar>div{display:flex;align-items:center;gap:4px}.editor-bar .icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px!important;height:32px!important;padding:7px!important;border:0!important;box-shadow:none!important;background:transparent!important;border-radius:6px}.editor-bar .icon-button:hover{background:var(--wash)!important}.editor-bar .icon-button svg,.node-copy svg{width:18px!important;height:18px!important;stroke-width:1.6!important;display:block}.editor-bar .spell .glyph{position:static;display:flex;align-items:center;justify-content:center}.editor-bar .spell .check{inset:7px;display:flex;align-items:center;justify-content:center}
.chevron,.select-trigger>.chevron{transform:translateY(-2px) rotate(-45deg)!important}[aria-expanded=true]>.chevron,.select-trigger[aria-expanded=true]>.chevron{transform:translateY(-2px) rotate(45deg)!important}
#settings-nav #back-library{margin:0 0 12px!important;border-bottom:1px solid var(--line);border-radius:0;padding-bottom:18px}#settings-nav #back-library .nav-label{display:inline!important}body[data-sidebar=rail] #settings-nav #back-library .nav-label{display:none!important}body[data-sidebar=rail] #settings-nav #back-library{font-size:inherit}
.drag-insertion{position:fixed;z-index:9998;background:var(--accent);border-radius:2px;pointer-events:none}.is-dragging [data-drag-tab]::before,.is-dragging [data-drag-tab]::after{display:none!important}

/* Centre the mini navigation under the profile: 24px header inset + 20px profile radius. */
body[data-sidebar=rail]{--side-width:88px}
body[data-sidebar=rail] .sidebar{padding:22px 0 22px 1px}
body[data-sidebar=rail] #workflow-back,body[data-sidebar=rail] #workflow-nav,body[data-sidebar=rail] #all-prompts,body[data-sidebar=rail] #settings-nav button{width:44px;min-height:44px;height:44px;margin-left:auto!important;margin-right:auto!important;padding:0!important;justify-content:center;gap:0}
body[data-sidebar=rail] #workflow-nav>span:first-child,body[data-sidebar=rail] #all-prompts>span:first-child{display:flex;align-items:center;justify-content:center;width:18px;height:18px;line-height:1;font-size:18px}
body[data-page=workflow] #workflow-back{display:flex;position:static!important;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0!important;margin-bottom:8px}
#workflow-back svg{width:18px;height:18px;flex-shrink:0}
body:not([data-page=workflow]) #workflow-back{display:none!important}
@media(max-width:760px){body[data-sidebar=rail]{--side-width:64px}body[data-sidebar=rail] .sidebar{padding:16px 0 16px 1px}}

#new-workflow{display:none}body[data-page=workflow] #new-workflow{display:inline-flex;align-items:center;gap:8px}body[data-page=workflow] .workflow-toolbar,body[data-page=workflow] .workflow-guide{justify-content:flex-end}.workflow-picker{margin-right:auto;max-width:300px;min-width:0}.workflow-picker .motion-select{width:100%}.workflow-tools .icon-button svg{width:18px;height:18px}.workflow-tools .icon-button{width:34px;height:34px;padding:8px}

.workflow-viewport{cursor:grab;touch-action:none}.workflow-viewport.canvas-panning,.workflow-node.node-dragging,.workflow-node.node-dragging *{cursor:grabbing!important}.workflow-node{cursor:grab;touch-action:none;user-select:none}.workflow-node-actions button,.node-port{cursor:pointer}.workflow-node-actions{gap:4px;flex-wrap:nowrap}.workflow-node-actions .icon-button{display:inline-flex;align-items:center;justify-content:center;position:relative;width:32px;height:32px;padding:7px;background:transparent;border:0;box-shadow:none}.workflow-node-actions .icon-button:hover{background:var(--wash)}.workflow-node-actions svg{width:18px;height:18px;stroke-width:1.6}.workflow-node-actions .spell .glyph{display:flex;position:static}.workflow-node-actions .spell .check{position:absolute;inset:7px;display:flex;align-items:center;justify-content:center}

/* The viewport clips a translated world; native scroll boundaries no longer constrain panning. */
body[data-page=workflow] .workflow-viewport{position:relative;overflow:clip}.workflow-size{position:absolute;inset:0;width:100%!important;height:100%!important;pointer-events:none}.workflow-canvas{position:absolute;overflow:visible;pointer-events:none}.workflow-node{pointer-events:auto}.workflow-links{overflow:visible}.workflow-viewport .empty{pointer-events:auto;width:280px}