*{box-sizing:border-box}
:root{font-family:system-ui,sans-serif;color:#142c49;background:#f7f9fc}
body{margin:0;height:100dvh;display:flex;flex-direction:column}
header,.toolbar{display:flex;align-items:center;gap:.55rem;padding:.6rem 1rem;background:white;border-bottom:1px solid #d1e2f5;flex-wrap:wrap}
header strong{flex:1;overflow-wrap:anywhere}
a{color:#1655a5}.brand{font-weight:850;font-size:1.3rem;text-decoration:none}
button,input{font:inherit}
button,input:not([type=color]){border:1px solid #b8cde7;border-radius:.55rem;padding:.45rem .7rem;background:white;color:inherit}
button,summary{cursor:pointer}button:disabled{opacity:.45;cursor:default}
button[aria-pressed=true],button.primary{background:#1d58b5;color:white;border-color:#1d58b5}
.toolbar label{display:flex;align-items:center;gap:.3rem}
.toolbar details{position:relative}.toolbar details form{position:absolute;z-index:3;background:white;padding:.6rem;border:1px solid #b8cde7;display:grid;gap:.4rem}
#status{color:#456587;font-size:.85rem}
main{width:min(100% - 2rem,920px);margin:3rem auto}
.create{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap}
.create label{display:grid;gap:.3rem}
.boards{margin-top:1.5rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
article{border:1px solid #d1e2f5;border-radius:.75rem;background:white;padding:1rem;overflow-wrap:anywhere}
article div{margin-top:.5rem}
#canvas{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;user-select:none;background-image:radial-gradient(#d8e2ef 1px,transparent 1px);cursor:grab}
#canvas:active{cursor:grabbing}
#world,#edges,#nodes{position:absolute;inset:0;transform-origin:0 0;pointer-events:none}
#edges{width:100%;height:100%;overflow:visible}
#edges path.connection{fill:none;stroke:#456587;stroke-width:0.75}
#edges path.selectable{pointer-events:stroke;cursor:pointer}
#edges path.selected{stroke:#1d58b5;stroke-width:1.25}
#edges path.connection.dotted{stroke-width:1.7;vector-effect:non-scaling-stroke}
#edges path.connection.dotted.selected{stroke-width:2.1}
.node{position:absolute;pointer-events:auto;cursor:inherit;border:1px solid #183b6535;}
.node.box{--box-empty-height:58px;width:160px;min-height:var(--box-empty-height);white-space:pre-wrap;overflow-wrap:anywhere;font-weight:650;background:#e0efff;}
.node.point{padding:0;width:21px;height:21px;border-radius:50%}
.node.selected{outline:2px solid #2162c3;outline-offset:2px}

header{background:#fff;color:#142c49;border-color:#e2e8f0}
header a{color:#1655a5}
header button{color:#142c49}
button:enabled:hover{border-color:#2162c3}
button.primary:hover,button[aria-pressed=true]:hover{background:#174797}
:focus-visible{outline:2px solid #3180e8;outline-offset:3px}
.toolbar{position:relative;z-index:1;}
.toolbar details form{min-width:230px;border-radius:.7rem;}
.toolbar details form label{display:grid}
select{font:inherit}
select{padding:.4rem;border:1px solid #b8cde7;border-radius:.4rem;color:inherit;background:white}
.node.box{display:grid;align-content:center;text-align:center;border-radius:.7rem;padding:.6rem;color:#142c49;cursor:move}
.node .port{position:absolute;width:14px;height:14px;padding:0;border-radius:50%;border:1px solid #2162c3;background:#fff;cursor:crosshair}
.port-top{left:50%;top:0;transform:translate(-50%,-50%)}
.port-bottom{left:50%;bottom:0;transform:translate(-50%,50%)}
.port-left{left:0;top:50%;transform:translate(-50%,-50%)}
.port-right{right:0;top:50%;transform:translate(50%,-50%)}
.node .port:hover,.node .port:focus-visible{background:#2162c3;}

#edges path.connection-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}

.palette summary{white-space:nowrap}
#color-preview{display:inline-block;width:1.2rem;height:1rem;border:1px solid #b8cde7;border-radius:.25rem;vertical-align:middle}
.palette-panel{position:absolute;z-index:3;padding:.65rem;background:white;border:1px solid #b8cde7;border-radius:.7rem;}
.swatches{display:grid;grid-template-columns:repeat(5,1.65rem);gap:.35rem;margin-bottom:.6rem}
.swatches button,.swatches button[aria-pressed=true],.swatches button[aria-pressed=true]:hover{width:1.65rem;height:1.65rem;padding:0;background:var(--swatch)}
.swatches button[aria-pressed=true]{outline:2px solid #174797;outline-offset:1px}
.palette-panel label{white-space:nowrap;font-size:.8rem}

.toolbar{font-size:.875rem}
.toolbar button,.toolbar summary{min-height:2rem}
.toolbar summary{padding:.35rem .5rem;border-radius:.35rem;color:#456587}
.toolbar summary:hover,.toolbar details[open]>summary{background:#edf4fc;color:#1655a5}
.toolbar button:not(.primary):not([aria-pressed=true]):not([data-color]){border-color:#dce5f0}
.toolbar button:enabled:not(.primary):not([aria-pressed=true]):not([data-color]):hover{background:#edf4fc;border-color:#b8cde7}
article{border-color:#e2e8f0}

.toolbar,.node.box,article{box-shadow:0 1px 3px #142c4910}
.palette-panel,.toolbar details form{box-shadow:0 3px 10px #142c4914}

.shortcut-list{position:absolute;z-index:3;right:0;width:max-content;max-width:min(20rem,90vw);margin:.3rem 0 0;padding:.75rem;display:grid;grid-template-columns:auto 1fr;gap:.4rem .7rem;background:white;border:1px solid #dce5f0;border-radius:.6rem;box-shadow:0 3px 10px #142c4914}
.shortcut-list dd{margin:0}
.shortcut-list kbd{padding:.1rem .25rem;background:#edf4fc;border-radius:.2rem}

.node.box .port{opacity:0;pointer-events:none}
.node.box:hover .port,.node.box .port:focus-visible{opacity:1;pointer-events:auto}

.connection-menu{position:fixed;z-index:5;max-width:calc(100vw - 16px);padding:.55rem;background:#fff;border:1px solid #dce5f0;border-radius:.6rem;box-shadow:0 3px 10px #142c4914;font-size:.82rem}
.connection-menu fieldset{display:flex;flex-wrap:wrap;gap:.3rem;border:0;margin:0;padding:.25rem 0}
.connection-menu legend{padding:0;color:#456587;font-weight:650}
.connection-menu button{padding:.25rem .4rem}

#lanes{position:absolute;inset:0;pointer-events:none}
.lane{position:absolute;border:1px solid color-mix(in srgb,var(--lane-color) 60%,#8494aa);border-radius:.65rem;background:color-mix(in srgb,var(--lane-color) 19%,transparent)}
.lane.selected{outline:2px solid #2162c3;outline-offset:2px}
.lane-header{display:flex;align-items:center;gap:.5rem;min-height:34px;padding:.25rem .7rem;border-radius:.6rem .6rem 0 0;border-bottom:1px solid #45658735;background:color-mix(in srgb,var(--lane-color) 34%,#f8fafc);font-size:.9rem;font-weight:700}
.lane-header span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane-header input{min-width:0;width:100%;padding:.2rem .35rem;font-size:.85rem}
#canvas:has(.lane-rename):not(.panning) .lane-header,.lane-resize{pointer-events:auto;cursor:move}
.lane-rename{margin-left:auto;padding:.16rem .36rem;font-size:.75rem;opacity:0}
.lane-header:hover .lane-rename,.lane.selected .lane-rename,.lane-rename:focus-visible{opacity:1}
.lane-resize{position:absolute;right:3px;bottom:3px;width:15px;height:15px;border-right:2px solid #456587;border-bottom:2px solid #456587;border-radius:0 0 .3rem 0;opacity:0;cursor:nwse-resize}
.lane:hover .lane-resize,.lane.selected .lane-resize,.lane-resize:hover{opacity:1}
#canvas.panning .lane-resize{pointer-events:none}
#canvas.selecting{cursor:crosshair}
#selection-box{position:absolute;pointer-events:none;border:1px solid #2162c3;background:#3180e81f}
.arrange-panel{position:absolute;z-index:3;left:0;width:max-content;max-width:min(23rem,90vw);padding:.65rem;background:white;border:1px solid #dce5f0;border-radius:.6rem;box-shadow:0 3px 10px #142c4914}
.arrange-panel span{display:block;font-weight:650;margin:.2rem 0 .4rem}
.arrange-panel div{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.45rem}
.connection-menu input{width:min(12rem,100%);padding:.25rem .4rem}
#edges .connection-label{fill:#25486d;stroke:#f7f9fc;stroke-width:5px;stroke-linejoin:round;paint-order:stroke;text-anchor:middle;dominant-baseline:central;font-size:13px;font-weight:650;pointer-events:none}
#edges .bend-handle{fill:#fff;stroke:#2162c3;stroke-width:2;pointer-events:auto;cursor:move}

.toolbar{gap:.38rem}
.toolbar > button,.toolbar > details > summary,.header-tool:not([hidden]){
    display:inline-flex;align-items:center;justify-content:center;
    width:2.25rem;height:2.25rem;padding:0;border-radius:.5rem;
}
.toolbar > details > summary,.header-tool:not([hidden]){border:1px solid #dce5f0}
.toolbar > details > summary{list-style:none}
.toolbar > details > summary::-webkit-details-marker{display:none}
.tool-icon{
    display:inline-block;flex:none;width:1.15rem;height:1.15rem;
    background-color:currentColor;mask:var(--tool-icon) center / contain no-repeat;pointer-events:none;
}
.toolbar .palette > summary{position:relative}
.toolbar #color-preview{
    position:absolute;bottom:3px;right:3px;width:.52rem;height:.52rem;
    border-color:#456587;border-radius:50%;
}
.header-tool:not([hidden]):hover{background:#edf4fc;border-color:#b8cde7}
#status{margin-left:.3rem}
#edges .connection-preview{
    fill:none;stroke:#2162c3;stroke-width:1.6;stroke-dasharray:5 4;
    stroke-linecap:round;pointer-events:none;
}
#canvas.connecting-port,#canvas.connecting-port .node{cursor:crosshair}
.node.box.connection-target{box-shadow:0 0 0 2px #3180e8,0 1px 3px #142c4910}
.node.box.connection-target .port{opacity:1;pointer-events:auto}
.node.box.connection-target .port-target{background:#2162c3}

.node .box-editor{
    width:100%;min-width:0;min-height:2.5rem;padding:.25rem;
    color:inherit;cursor:text;user-select:text;touch-action:auto;
    border:1px solid #2162c3;border-radius:.3rem;background:#ffffff52;
    white-space:pre-wrap;overflow-wrap:anywhere;outline:none;
}
.box-run.is-bold{font-weight:700}
.box-run.is-normal-weight{font-weight:400}
.box-run.is-italic{font-style:italic}
.box-run.is-underline,.box-run.is-link{text-decoration-line:underline}
.box-run.is-strike{text-decoration-line:line-through}
.box-run.is-strike:is(.is-underline,.is-link){text-decoration-line:underline line-through}
.box-run.is-link{color:#164d97}
.text-format-menu{
    position:fixed;z-index:6;max-width:calc(100vw - 16px);padding:.35rem;
    border:1px solid #dce5f0;border-radius:.65rem;background:#fff;
    box-shadow:0 3px 12px #142c4922;font-size:.85rem;
}
.text-format-actions,.text-format-link:not([hidden]){display:flex;flex-wrap:wrap;gap:.25rem}
.text-format-actions button{
    display:grid;place-items:center;width:2rem;height:2rem;padding:0;border-color:#dce5f0;
}
.text-format-actions .tool-icon{width:1rem;height:1rem}
.text-format-link{margin-top:.35rem}
.text-format-link input{min-width:0;flex:1 1 8rem}
.text-format-link button{padding:.3rem .45rem}
.text-format-menu.video-only [data-format-action]:not([data-format-action=video]){display:none}

.node[hidden],.board-panel[hidden],.image-lightbox [hidden]{display:none!important}
.box-tools{
    --tools-gap:14px;
    position:absolute;z-index:1;left:50%;bottom:calc(100% + var(--tools-gap));transform:translateX(-50%);
    display:flex;gap:.25rem;padding:.22rem;background:var(--surface);color:var(--ink);
    border:1px solid var(--field-border);border-radius:.7rem;box-shadow:0 4px 12px #08162e30;
    opacity:0;pointer-events:none;
}
.box-tools::after{
    content:"";position:absolute;top:100%;left:0;right:0;height:calc(var(--tools-gap) + 2px);
}
.node.box > .port{z-index:2}
.node:hover > .box-tools,.box-tools:focus-within{opacity:1;pointer-events:auto}
@media (hover:none){
    .node.selected > .box-tools{opacity:1;pointer-events:auto}
}
.box-tools button{
    display:grid;place-items:center;width:1.875rem;height:1.875rem;padding:0;
    background:var(--surface);color:var(--ink);border-color:var(--field-border);
}
.box-tools button:is(:hover,:focus-visible){background:var(--surface-soft);border-color:var(--accent-bright)}
.board-panel-heading button,.detail-tasks button,.detail-images button:last-child:has(.tool-icon){
    padding:.2rem;display:inline-grid;place-items:center;min-width:1.4rem;min-height:1.4rem;
}
.box-tools .tool-icon{width:1rem;height:1rem}
.box-tools button.branch-toggle[aria-expanded=false],.box-tools button.box-comments-button[aria-expanded=true]{color:#fff;background:#1d58b5;border-color:#1d58b5}
.box-comments-button{position:relative}
.box-comment-count{position:absolute;top:-.45rem;right:-.4rem;min-width:.9rem;padding:0 .18rem;
    border-radius:1rem;color:white;background:#1d58b5;font-size:.6rem;line-height:.9rem;font-weight:700}
.image-lightbox{border:0;border-radius:.75rem;padding:.75rem 3rem;background:#142538;color:#fff;max-width:95vw;max-height:94dvh}
.image-lightbox::backdrop{background:#071324db}
.image-lightbox figure{margin:0;display:grid;justify-items:center;gap:.55rem}
.image-lightbox img{display:block;max-width:calc(95vw - 6rem);max-height:78dvh;object-fit:contain}
.image-lightbox figcaption{max-width:75vw;text-align:center;overflow-wrap:anywhere}
.image-lightbox button{position:absolute;padding:.35rem;display:grid;place-items:center;background:#fff;color:#142c49}
.lightbox-close{right:.5rem;top:.5rem}.lightbox-previous{left:.45rem;top:50%}.lightbox-next{right:.45rem;top:50%}
.board-panel{position:absolute;z-index:2;cursor:default;touch-action:auto;background:#fff;border:1px solid #dce5f0;
    border-radius:.65rem;box-shadow:0 3px 14px #142c491e;padding:.65rem;font-size:.875rem}
.board-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:.55rem;margin-bottom:.55rem}
.board-panel-heading strong{overflow-wrap:anywhere}
#board-search{top:.65rem;left:.65rem;width:min(21rem,calc(100% - 1.3rem))}
#board-search input{width:100%}
#search-results{display:grid;gap:.3rem;max-height:40dvh;overflow:auto;margin-top:.4rem}
#search-results button{text-align:left;overflow-wrap:anywhere}
.node.search-highlight{outline:3px solid #2479df;outline-offset:5px}
#minimap{left:.65rem;bottom:.65rem;padding:.2rem;overflow:hidden}
#minimap svg{display:block;width:min(200px,40vw);height:auto;background:#f5f8fc;border-radius:.4rem;cursor:crosshair;touch-action:none}
#minimap .map-viewport{fill:#3180e81a;stroke:#2162c3;stroke-width:1.4}
#comments-panel,#details-panel{right:.65rem;top:.65rem;width:min(22rem,calc(100% - 1.3rem));max-height:calc(100% - 1.3rem);overflow:auto;user-select:text}
.comment-content,.comment-list,.comment-form,.comment-form label,.comment-replies,.comment-thread{display:grid;gap:.45rem}
.comment-list:empty,.comment-notice:empty{display:none}
.comment-thread{padding:.6rem;border:1px solid var(--border);border-radius:.45rem}
.comment-message p,.comment-list>p{margin:.2rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
.comment-meta,.comment-actions{display:flex;align-items:center;gap:.35rem .55rem;flex-wrap:wrap}
.comment-meta{justify-content:space-between;overflow-wrap:anywhere}
.comment-meta small,.comment-actions small,.comment-notice{color:var(--muted)}
.comment-replies{border-inline-start:2px solid var(--border);padding-inline-start:.55rem}
.comment-form :is(input,textarea){width:100%;min-width:0;font:inherit}
.comment-form textarea{resize:vertical;min-height:3.3rem}
.comment-form button{justify-self:start}
.comment-actions button{font-size:.78rem}
.details-form,.details-form label,.detail-tasks,.detail-images,.detail-links{display:grid;gap:.4rem}
.details-form{gap:.65rem}
.details-form :is(input:not([type=checkbox]),textarea,select){min-width:0;width:100%;font:inherit}
.details-form :is(textarea,fieldset){border:1px solid #dce5f0;border-radius:.4rem;padding:.4rem}
.details-form fieldset{min-width:0;display:grid;gap:.35rem;margin:0}
.detail-tasks > div,.detail-images > div{display:flex;align-items:center;gap:.3rem}
.detail-images > div > button:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}
.detail-links{overflow-wrap:anywhere}
.board-menu{position:absolute;right:0;z-index:3;display:grid;gap:.35rem;background:#fff;border:1px solid #dce5f0;
    border-radius:.6rem;padding:.55rem;width:min(17rem,85vw);box-shadow:0 3px 10px #142c4914}
.toolbar details .board-menu form{position:static;min-width:0;box-shadow:none;padding:.35rem}
.board-menu input{min-width:0;max-width:100%;width:100%}
.home-import{margin-top:.8rem}.home-import form{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.boards article form{margin-top:.5rem}

.toolbar #status{flex:1 1 0;min-width:0;min-height:1.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1130px){.toolbar #status{flex:1 0 100%;margin-left:0}}

:root{
    --motion-quick:140ms;
    --motion-panel:190ms;
    --motion-view:220ms;
    --motion-ease:cubic-bezier(.2,.65,.3,1);
}

@media (prefers-reduced-motion:no-preference){
    :where(button,summary,a,input,select,textarea,article,.node,.lane,.box-editor){
        transition:background-color var(--motion-quick) ease,border-color var(--motion-quick) ease,
            color var(--motion-quick) ease,box-shadow var(--motion-quick) ease,
            outline-color var(--motion-quick) ease,opacity var(--motion-quick) ease;
    }
    :where(button,summary){transition-property:background-color,border-color,color,box-shadow,outline-color,opacity,scale}
    :where(button:enabled,summary):active{scale:.97}
    .boards article:hover{border-color:#b8cde7;box-shadow:0 4px 12px #142c4918}

    .node:not(.selected):not(.search-highlight),.lane:not(.selected){outline:2px solid transparent;outline-offset:2px}
    .node,.lane{
        transition:background-color var(--motion-quick) ease,border-color var(--motion-quick) ease,
            box-shadow var(--motion-quick) ease,outline-color var(--motion-quick) ease,
            opacity var(--motion-panel) var(--motion-ease),translate var(--motion-panel) var(--motion-ease),
            display var(--motion-panel) allow-discrete;
    }
    .node[hidden],.node.is-entering,.lane.is-entering{opacity:0;translate:0 4px;pointer-events:none}
    .node[hidden] .port,.node[hidden] .box-tools,.node[hidden] .box-tools button,.node[hidden] .box-images button{
        pointer-events:none;
    }
    .node .port,.box-tools,.lane-rename,.lane-resize{
        transition:opacity var(--motion-quick) ease,background-color var(--motion-quick) ease,
            border-color var(--motion-quick) ease,color var(--motion-quick) ease;
    }
    #edges :is(.connection,.connection-label){transition:opacity var(--motion-panel) ease}
    #edges :is(.is-entering,.is-leaving){opacity:0}
    #edges .branch-route-exit{pointer-events:none}
    .box-images img{transition:scale var(--motion-panel) var(--motion-ease)}
    .box-images button:is(:hover,:focus-visible) img{scale:1.045}
    .box-editor,.lane-header input,.box-video,.image-lightbox img{
        transition:opacity var(--motion-panel) var(--motion-ease),scale var(--motion-panel) var(--motion-ease);
    }

    :is(.board-panel,.connection-menu,.text-format-menu,.text-format-link,#selection-box){
        opacity:1;translate:0 0;
        transition:opacity var(--motion-panel) var(--motion-ease),translate var(--motion-panel) var(--motion-ease),
            display var(--motion-panel) allow-discrete;
    }
    :is(.connection-menu,.text-format-menu,.text-format-link)[hidden]{display:none}
    :is(.board-panel,.connection-menu,.text-format-menu,.text-format-link,#selection-box)[hidden]{
        opacity:0;translate:0 -4px;pointer-events:none;
    }
    #selection-box{transition-duration:var(--motion-quick);translate:none}

    .toolbar details[open]{z-index:3}
    :is(.toolbar details,.home-import,.board-about,#board-delete-confirm) > :not(summary){
        translate:0 -4px;
        transition:translate var(--motion-panel) var(--motion-ease),opacity var(--motion-panel) var(--motion-ease);
        opacity:0;
    }
    :is(.toolbar details,.home-import,.board-about,#board-delete-confirm)[open] > :not(summary){opacity:1;translate:0 0}
    @supports selector(details::details-content){
        :is(.toolbar details,.home-import,.board-about,#board-delete-confirm)::details-content{
            transition:content-visibility var(--motion-panel) allow-discrete;
        }
    }

    .image-lightbox{
        opacity:0;translate:0 6px;scale:.99;
        transition:opacity var(--motion-panel) var(--motion-ease),translate var(--motion-panel) var(--motion-ease),
            scale var(--motion-panel) var(--motion-ease),display var(--motion-panel) allow-discrete,
            overlay var(--motion-panel) allow-discrete;
    }
    .image-lightbox[open]{opacity:1;translate:0 0;scale:1}
    .image-lightbox::backdrop{
        background-color:transparent;
        transition:background-color var(--motion-panel) ease,display var(--motion-panel) allow-discrete,
            overlay var(--motion-panel) allow-discrete;
    }
    .image-lightbox[open]::backdrop{background-color:#071324db}

    #canvas.view-transition{transition:background-position var(--motion-view) var(--motion-ease),
        background-size var(--motion-view) var(--motion-ease)}
    #canvas.view-transition #world{transition:transform var(--motion-view) var(--motion-ease)}

    @starting-style{
        :is(.board-panel,.connection-menu,.text-format-menu,.text-format-link,#selection-box):not([hidden]),
        :is(.toolbar details,.home-import,.board-about,#board-delete-confirm)[open] > :not(summary){
            opacity:0;translate:0 -4px;
        }
        .node.branch-visibility:not([hidden]){opacity:0;translate:0 4px}
        .node .box-editor,.lane-header input,.box-video,.image-lightbox img{opacity:0}
        .image-lightbox[open]{opacity:0;translate:0 6px;scale:.99}
        .image-lightbox[open]::backdrop{background-color:transparent}
    }
}

.node.box:is(.has-video,.has-images){
    height:calc(2 * var(--box-empty-height));grid-template:minmax(0,1.3rem) minmax(0,1fr) / minmax(0,1fr);
    align-content:stretch;gap:.24rem;padding:.38rem .45rem 1.55rem;
}
.node.box.has-images.has-video{grid-template-columns:repeat(2,minmax(0,1fr))}
.node.box:is(.has-video,.has-images):has(> .box-editor){grid-template-rows:minmax(0,2.15rem) minmax(0,1fr)}
.node.box:is(.has-video,.has-images) > :is(.box-label,.box-editor){grid-column:1/-1;min-width:0}
.node.box:is(.has-video,.has-images) > .box-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.node.box:is(.has-video,.has-images) > .box-editor{min-height:0;padding:0 .2rem;overflow:auto;font-size:.86rem}
.box-video,.box-images{grid-row:2;min-width:0;min-height:0}
.node.box.has-video.has-images .box-images{grid-column:2}
button.box-video,.box-images button{
    display:flex;align-items:center;justify-content:center;width:100%;height:100%;
    padding:0;overflow:hidden;border:1px solid #a8b8ca;border-radius:.4rem;
}
button.box-video{gap:.32rem;background:#23374e;color:#fff;cursor:pointer;font-size:.7rem}
button.box-video:is(:hover,:focus-visible){background:#304d6c}
button.box-video .tool-icon{width:.78rem;height:.78rem}
.box-images button{position:relative;background:#ffffff77;cursor:zoom-in}
.box-images img{display:block;width:100%;height:100%;object-fit:contain}
.box-image-count{position:absolute;right:.2rem;bottom:.2rem;padding:.08rem .26rem;border-radius:.25rem;background:#142538dc;color:#fff;font-size:.65rem}
.image-lightbox.video-lightbox{width:min(860px,94vw,calc(77dvh * 16 / 9));padding:.65rem}
.video-lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem}
.video-lightbox-header a{color:#d5e6ff;font-size:.85rem}
.video-lightbox .video-lightbox-header button{position:static}
.video-lightbox iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:.35rem;background:#0c1724}
.icon-tooltip{
    position:fixed;inset:auto;z-index:50;margin:0;box-sizing:border-box;
    max-width:min(17rem,calc(100vw - 16px));padding:.38rem .58rem;
    color:#fff;background:#142538;border:0;border-radius:.45rem;box-shadow:0 3px 12px #142c4933;
    font-size:.75rem;line-height:1.3;white-space:normal;pointer-events:none;opacity:0;
}
.icon-tooltip[hidden]{display:none}
.icon-tooltip.is-visible{opacity:1}
@media (prefers-reduced-motion:no-preference){
    .icon-tooltip{translate:0 3px;transition:opacity 150ms var(--motion-ease),translate 150ms var(--motion-ease)}
    .icon-tooltip.is-visible{translate:0 0}
    .node[data-enter-from]{
        transition:opacity 280ms var(--motion-ease),scale 280ms cubic-bezier(.19,.85,.29,1),
            translate 280ms var(--motion-ease),box-shadow 280ms ease;
    }
    .node[data-enter-from].is-entering{scale:.78;box-shadow:0 0 0 7px #75b8ff66,0 0 22px #2162c399}
    .node[data-enter-from=left]{transform-origin:left center}
    .node[data-enter-from=right]{transform-origin:right center}
    .node[data-enter-from=top]{transform-origin:center top}
    .node[data-enter-from=bottom]{transform-origin:center bottom}
    .node[data-enter-from=left].is-entering{translate:-13px 0}
    .node[data-enter-from=right].is-entering{translate:13px 0}
    .node[data-enter-from=top].is-entering{translate:0 -13px}
    .node[data-enter-from=bottom].is-entering{translate:0 13px}
}

.node.box.text-block{
    width:220px;padding:.35rem .45rem 1.45rem;border-color:transparent;background:transparent;box-shadow:none;
    font-weight:400;line-height:1.15;
}
.node.box.text-block > .box-label{min-width:0}
.node.box.text-block > .box-editor{min-height:1.8rem;font:inherit;background:#ffffff38}
#text-style-panel{right:.65rem;top:.65rem;width:min(17rem,calc(100% - 1.3rem))}
.text-style-options,.text-style-options label{display:grid;gap:.35rem}
.text-style-options{gap:.55rem}
.text-style-options input[type=color]{width:100%;height:2rem;padding:.12rem}

:root{
    --app-bg:#edf1f8;--surface:#fff;--surface-soft:#e9eef7;--ink:#18243a;--muted:#536782;
    --accent:#2868e3;--accent-hover:#2058c4;--accent-bright:#3278f6;
    --border:#dce4f1;--field-border:#bdcbe0;--link:#245fca;--grid-dot:#cdd9ed;
    --top:#1f2a3d;--top-control:#2a3952;--top-hover:#344763;--top-border:#455673;--top-ink:#f4f7ff;
    --danger:#a92d40;--danger-ink:#fff;
}
:root[data-theme=dark]{
    color-scheme:dark;--app-bg:#121b2b;--surface:#1d2a40;--surface-soft:#273a57;--ink:#edf3ff;
    --accent:#346ddd;--accent-hover:#2657b9;--accent-bright:#84afff;
    --muted:#a9bfd9;--border:#3c5169;--field-border:#526983;--link:#a3caff;--grid-dot:#30455a;
    --top:#111b2c;--top-control:#223049;--top-hover:#2b405e;--top-border:#3b5274;--danger:#a23b4d;
}
:root{color:var(--ink);background:var(--app-bg)}
a{color:var(--link)}
header,.toolbar{background:var(--top);color:var(--top-ink);border-color:var(--top-border)}
header a,header button{color:var(--top-ink)}
#theme-toggle{margin-left:auto}
header .header-tool,header form button,.toolbar > button:not(.primary):not([aria-pressed=true]),.toolbar > details > summary{
    color:var(--top-ink);background:var(--top-control);border:1px solid var(--top-border)
}
header .header-tool:not([hidden]):hover,header form button:hover,
.toolbar > button:enabled:not(.primary):not([aria-pressed=true]):hover,
.toolbar > details > summary:hover,.toolbar > details[open] > summary{
    color:var(--top-ink);background:var(--top-hover);border-color:#6583a3
}
header .header-tool{flex-shrink:0}
header .header-tool[aria-pressed=true]{background:#1d58b5}
#status{color:#c5d7eb}
.board-about{position:relative;z-index:4}
.board-about[hidden]{display:none}
.board-about summary{list-style:none}
.board-about summary::-webkit-details-marker{display:none}
#board-about-text{
    position:absolute;right:0;top:calc(100% + .35rem);width:min(22rem,80vw);max-height:40dvh;overflow:auto;
    padding:.75rem;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--border);
    border-radius:.55rem;box-shadow:0 5px 18px #0b142032;background:var(--surface);color:var(--ink)
}
article,.toolbar details form,.palette-panel,.shortcut-list,.arrange-panel,.board-menu,.board-panel,
.connection-menu,.text-format-menu{background:var(--surface);color:var(--ink);border-color:var(--border)}
button:not(.primary):not([aria-pressed=true]):not([data-color]):not(.box-video):not(.port):not(.danger):not(:where(.box-tools button)),
input:not([type=color]),select,textarea{color:inherit}
:root[data-theme=dark] :is(input:not([type=color]),select,textarea){background:var(--surface);border-color:var(--field-border)}
:root[data-theme=dark] button:not(.primary):not([aria-pressed=true]):not([data-color]):not(.box-video):not(.port):not(.danger):not(:where(.box-tools button)){
    background:var(--surface);border-color:var(--field-border)
}
:root[data-theme=dark] :is(header,.toolbar) > button:not(.primary):not([aria-pressed=true]){
    background:var(--top-control);border-color:var(--top-border)
}
:root[data-theme=dark] :is(header,.toolbar) > button:enabled:hover:not(.primary):not([aria-pressed=true]){background:var(--top-hover)}
:root[data-theme=dark] :is(.connection-menu legend,.shortcut-list dd){color:var(--muted)}
:root[data-theme=dark] .shortcut-list kbd{background:var(--surface-soft)}
:root[data-theme=dark] .toolbar button:enabled:not(.primary):not([aria-pressed=true]):not([data-color]):hover{background:var(--surface-soft)}
:root[data-theme=dark] .node.box .box-tools button{color:#f1f6ff;background:#233650;border-color:#7188a7}
:root[data-theme=dark] .node.box .box-tools button:is(:hover,:focus-visible){background:#364f72}
:root[data-theme=dark] .node.box .box-tools button:is([aria-expanded=false].branch-toggle,[aria-expanded=true].box-comments-button){background:#1d58b5;border-color:#8bb6ff}
:root[data-theme=dark] .node.box.text-block .box-editor{background:var(--surface)}
:root[data-theme=dark] #edges path.connection{stroke:#8baacd}
:root[data-theme=dark] #edges path.connection.selected{stroke:#78b5ff}
:root[data-theme=dark] #edges .connection-label{fill:#d1e5fb;stroke:var(--app-bg)}
:root[data-theme=dark] #edges marker path{fill:#8baacd}
:root[data-theme=dark] .lane-header{background:color-mix(in srgb,var(--lane-color) 28%,#223245)}
:root[data-theme=dark] #minimap svg{background:var(--surface-soft)}
:root[data-theme=dark] .box-run.is-link{color:#1655a5}
:root[data-theme=dark] .text-block .box-run.is-link{color:var(--link)}
:root[data-theme=dark] .video-lightbox-header button,.image-lightbox button{color:#142c49}
#canvas{background-image:radial-gradient(var(--grid-dot) 1px,transparent 1px)}
.node.box.text-block{color:var(--ink)}
#board-settings{right:.65rem;top:.65rem;width:min(26rem,calc(100% - 1.3rem));max-height:calc(100% - 1.3rem);overflow:auto;user-select:text}
#board-settings :is(form,fieldset,label){display:grid;gap:.55rem}
#board-settings :is(label,div,p)[hidden]{display:none}
#board-settings :is(input:not([type=hidden]),textarea,select){width:100%;min-width:0;font:inherit}
#board-settings :is(fieldset,textarea){border:1px solid var(--field-border);border-radius:.45rem;padding:.45rem;margin:0}
#board-settings textarea{resize:vertical}
#settings-share{display:grid;gap:.45rem}
.settings-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
#settings-feedback{margin:.55rem 0;color:var(--muted)}
#settings-feedback.settings-error{color:#c24559}
:root[data-theme=dark] #settings-feedback.settings-error{color:#ff9eae}
#board-delete-confirm{margin-top:.75rem;padding-top:.55rem;border-top:1px solid var(--border)}
#board-delete-confirm summary{color:#bc3b50}
:root[data-theme=dark] #board-delete-confirm summary{color:#ff9eae}
#board-delete-confirm p{margin:.5rem 0 0}
button.danger{color:var(--danger-ink);background:var(--danger);border-color:var(--danger)}
button.danger:hover{background:#8b2233;border-color:#8b2233}
.board-category{margin-top:1.35rem}
.board-category h2{font-size:1.05rem;margin:0}
.board-category .boards{margin-top:.55rem}
.boards article p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:.4rem 0;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
    :root,header,.toolbar,#canvas{transition:background-color var(--motion-panel) ease,color var(--motion-panel) ease}
    #canvas.view-transition{transition:background-color var(--motion-panel) ease,color var(--motion-panel) ease,
        background-position var(--motion-view) var(--motion-ease),background-size var(--motion-view) var(--motion-ease)}
}

:root,:root[data-theme=dark]{
    --top-ink:#f6f8fc;
    --top-control:transparent;
    --top-hover:#ffffff12;
    --top-border:#ffffff21;
}
:is(header,.toolbar) > :is(button,.header-tool),header form button,
:is(.toolbar,.board-about) details > summary,.board-about > summary{
    box-shadow:none;
}
:is(header,.toolbar) > button:not(.primary):not([aria-pressed=true]),
header .header-tool:not([aria-pressed=true]),header form button,.toolbar > details > summary{
    border-color:var(--top-border);background:var(--top-control);color:var(--top-ink)
}
:root :is(header,.toolbar) > button:enabled:hover:not(.primary):not([aria-pressed=true]),
header .header-tool:not([hidden]):hover,header form button:hover,
.toolbar > details > summary:hover,.toolbar > details[open] > summary{
    border-color:#ffffff2e;background:var(--top-hover);color:var(--top-ink)
}
:root :is(header,.toolbar) > button[aria-pressed=true],.toolbar > button.primary{
    color:#fff;background:#ffffff24;border-color:#ffffff35
}
:root :is(header,.toolbar) > button[aria-pressed=true]:hover,.toolbar > button.primary:hover{
    color:#fff;background:#ffffff30;border-color:#ffffff44
}

.toolbar > button,.toolbar > details > summary,header .header-tool:not([hidden]){
    width:1.8rem;height:1.8rem;min-height:1.8rem;
}
:is(.toolbar > button,.toolbar > details > summary,header .header-tool) > .tool-icon{
    width:.92rem;height:.92rem;
}
header form button{padding:.36rem .56rem}
:root .toolbar > button:not(.primary):not([aria-pressed=true]):not([data-color]){
    border-color:var(--top-border);background:var(--top-control)
}
:root[data-theme] .toolbar > button:enabled:not(.primary):not([aria-pressed=true]):not([data-color]):hover,
:root .toolbar > button:enabled:not(.primary):not([aria-pressed=true]):not([data-color]):hover{
    border-color:#ffffff2e;background:var(--top-hover)
}

#snap-guides{
    position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
}
#snap-guides line{
    visibility:hidden;stroke:#3d73cc;stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;
}
#snap-guides line[data-active]{visibility:visible}
:root[data-theme=dark] #snap-guides line{stroke:#8cbbff}

.dashboard-filters{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:.55rem;margin:1rem 0}
.dashboard-filters label{display:grid;gap:.28rem;font-size:.85rem;font-weight:600;min-width:0}
.dashboard-filters :is(input,select){width:100%;min-width:0}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0}
.dashboard-card{aspect-ratio:1;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;gap:.35rem;padding:.6rem;min-width:0;min-height:0}
.dashboard-card[hidden]{display:none}
@media (hover:hover){
    .dashboard-card:hover{box-shadow:0 6px 16px #142c491d,0 2px 5px #142c4912}
    :root[data-theme=dark] .dashboard-card:hover{box-shadow:0 6px 16px #0006,0 2px 5px #0004}
}
.dashboard-card div{margin-top:0}
.dashboard-preview{
    min-height:0;overflow:hidden;display:grid;place-items:center;border:1px solid #dce5f0;
    border-radius:.4rem;background:radial-gradient(#cfdbef 1px,transparent 1px) #f5f8fe;background-size:12px 12px;
}
.dashboard-preview-svg{display:block;width:100%;height:100%}
.dashboard-empty-preview{font-size:.8rem;color:#526a83}
.dashboard-card-title,.dashboard-card-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-card-title{font-size:.96rem;font-weight:700}
.dashboard-card-title a{text-decoration:none;color:inherit}
.dashboard-card-title a:hover{text-decoration:underline}
.dashboard-card-meta{color:var(--muted);font-size:.75rem;min-height:1em}
.dashboard-card-actions{display:flex;gap:.3rem;align-items:center;justify-content:flex-end}
.dashboard-card-actions form{margin:0}
.dashboard-icon{
    width:1.8rem;height:1.8rem;display:grid;place-items:center;padding:0;border:1px solid var(--border);
    border-radius:.4rem;background:var(--surface);color:var(--ink);cursor:pointer;
}
.dashboard-icon::-webkit-details-marker{display:none}
summary.dashboard-icon{list-style:none}
.dashboard-icon:hover{background:var(--surface-soft);border-color:var(--field-border)}
.dashboard-icon .tool-icon{width:.9rem;height:.9rem}
.dashboard-card-actions button.dashboard-icon[aria-pressed]{background:var(--surface);color:var(--ink);border-color:var(--border)}
.dashboard-card-actions button.dashboard-icon[aria-pressed=false]{color:var(--muted)}
.dashboard-delete-form{
    position:absolute;z-index:3;inset:auto .4rem .4rem;padding:.5rem;background:var(--surface);
    border:1px solid var(--border);border-radius:.45rem;box-shadow:0 4px 13px #142c4933;
}
.dashboard-delete-form p{margin:0 0 .3rem;font-size:.78rem}
.dashboard-delete-form div{display:flex;gap:.28rem;flex-wrap:wrap}
.dashboard-delete-form button{padding:.22rem .35rem;font-size:.74rem}
#dashboard-feedback{font-size:.85rem;color:var(--muted)}
#dashboard-feedback.settings-error{color:#c24559}
:root[data-theme=dark] #dashboard-feedback.settings-error{color:#ff9eae}
@media(max-width:600px){
    .dashboard-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dashboard-grid{gap:.35rem}
    .dashboard-card{padding:.28rem;gap:.22rem}
    .dashboard-card-title{font-size:.78rem}
    .dashboard-card-meta{font-size:.63rem}
    .dashboard-card-actions{gap:.12rem}
    .dashboard-icon{width:1.25rem;height:1.25rem}
    .dashboard-icon .tool-icon{width:.72rem;height:.72rem}
}

@media(max-width:360px){.dashboard-card-actions{gap:0;justify-content:space-between}.dashboard-icon{width:1.15rem;height:1.15rem}}

.node.box:not(.text-block) .box-editor{color:inherit;background:transparent;caret-color:currentColor}
.node.box:not(.text-block) .box-run.is-link{color:inherit}

:root{
    --top-active:#304b75;
    --top-active-hover:#3a5888;
    --top-active-border:#6b91c9;
}
:root[data-theme=dark]{
    --top-active:#294569;
    --top-active-hover:#35557f;
    --top-active-border:#638bc2;
}
:root[data-theme] :is(header,.toolbar) > button:enabled:is([aria-pressed=true],[aria-expanded=true]):not(.primary):not([data-color]):not(.danger),
:root :is(.toolbar > details[open],header .board-about[open]) > summary{
    color:#f6faff;background:var(--top-active);border-color:var(--top-active-border);
}
:root[data-theme] :is(header,.toolbar) > button:enabled:is([aria-pressed=true],[aria-expanded=true]):not(.primary):not([data-color]):not(.danger):hover,
:root :is(.toolbar > details[open],header .board-about[open]) > summary:hover{
    background:var(--top-active-hover);
}

.brand-logo{
    display:inline-flex;align-items:center;padding:.27rem .48rem;
    background:transparent;border-radius:.4rem;
}
.brand-logo img{display:block;width:7.5rem;height:auto;filter:brightness(0) invert(1)}
.dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:.65rem;flex-wrap:wrap;margin-bottom:.7rem}
.dashboard-heading h1{margin:0}
.dashboard-page-link,.trash-restore{display:inline-flex;align-items:center;gap:.35rem}
.dashboard-page-link{padding:.42rem .56rem;border:1px solid var(--border);border-radius:.45rem;background:var(--surface);text-decoration:none}
.dashboard-page-link:hover{background:var(--surface-soft)}
.dashboard-page-link .tool-icon,.trash-restore .tool-icon{width:.92rem;height:.92rem}
.trash-boards{display:grid;gap:.65rem;margin-top:1rem}
.trash-card{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.7rem .85rem;
}
.trash-primary-actions{justify-content:flex-end}
.trash-primary-actions :is(.trash-restore,.trash-delete-button){min-height:2.35rem;line-height:1.25}
@media (max-width:640px){
    .trash-card{grid-template-columns:minmax(0,1fr)}
    .trash-primary-actions{justify-content:flex-start}
}
.trash-card div,.trash-card p{margin:0}
.trash-card :is(small,.trash-meta){color:var(--muted)}
.trash-meta{font-size:.82rem}
.trash-meta:empty{display:none}
.trash-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.trash-confirm{
    grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:.65rem;
    flex-wrap:wrap;border-top:1px solid var(--border);padding-top:.65rem;font-size:.85rem;
}
.trash-confirm[hidden]{display:none}
#trash-feedback.settings-error{color:#c24559}
:root[data-theme=dark] #trash-feedback.settings-error{color:#ff9eae}

.dashboard-links{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem}
.stats-filter-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;grid-column:1/-1}
.stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.65rem;margin:1rem 0}
.stats-summary article{display:grid;gap:.25rem;padding:.75rem}
.stats-summary strong{font-size:1.45rem}
.stats-summary span,.stats-note,.stats-table small{color:var(--muted);font-size:.85rem}
.stats-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:.55rem;background:var(--surface)}
.stats-table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}
.stats-table th,.stats-table td{padding:.55rem .65rem;border-bottom:1px solid var(--border)}
.stats-table thead{background:var(--surface-soft)}
.stats-table tbody tr:last-child>*{border-bottom:0}
.stats-table tbody th small{display:block;font-weight:400}
.stats-table td{white-space:nowrap;font-variant-numeric:tabular-nums}
@keyframes top-active-pulse{
    0%,100%{box-shadow:0 0 0 0 #8cbcff0a}
    50%{box-shadow:0 0 0 3px #8cbcff37}
}
@media (prefers-reduced-motion:no-preference){
    :is(header,.toolbar) > button:enabled:is([aria-pressed=true],[aria-expanded=true]),
    .header-utilities > :is(button[aria-pressed=true],a[aria-current=page]),
    :is(.toolbar > details[open],header .board-about[open]) > summary{animation:top-active-pulse 2.2s ease-in-out infinite}
}

button.primary,.toolbar > button.primary{
    background:var(--accent);border-color:var(--accent);color:#fff;
}
button.primary:hover,.toolbar > button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
:focus-visible{outline-color:var(--accent-bright)}
.dashboard-page-link:hover,.dashboard-icon:hover{border-color:var(--accent-bright)}

.node.box.text-block.sized-text-block{align-content:stretch;grid-template-rows:minmax(0,1fr)}
.node.box.text-block.sized-text-block > :is(.box-label,.box-editor){min-height:0;overflow:auto;overscroll-behavior:contain}
.node.box.text-block .text-resize{
    position:absolute;right:3px;bottom:3px;width:17px;height:17px;padding:0;border:0;
    border-radius:0 .2rem .3rem .2rem;background:transparent;color:var(--muted);
    opacity:0;cursor:nwse-resize;
}
.node.box.text-block .text-resize::after{
    content:'';position:absolute;right:2px;bottom:2px;width:9px;height:9px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:0 0 2px 0;
}
.node.box.text-block:hover .text-resize,.node.box.text-block.selected .text-resize,
.node.box.text-block .text-resize:focus-visible{opacity:1}
#canvas.panning .text-resize{pointer-events:none}
:root[data-theme=dark] .node.box.text-block .text-resize{background:transparent}
.header-utilities{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.header-utilities #theme-toggle{margin-left:0}
header .header-utilities .header-tool:is([aria-current=page],[aria-pressed=true]){
    color:#f6faff;background:var(--top-active);border-color:var(--top-active-border)
}

.dashboard-page{flex-shrink:0;margin-bottom:0;padding-bottom:clamp(2.5rem,6vh,4.5rem)}
header.header-with-logo{
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
}
.header-with-logo .brand-logo{grid-column:2;grid-row:1;justify-self:center}
.header-with-logo > form{grid-column:1;grid-row:1;justify-self:start}
.header-with-logo .header-utilities{grid-column:3;grid-row:1;justify-self:end;margin-left:0}
@media (max-width:390px){
    .header-with-logo .brand-logo{grid-column:1/-1}
    .header-with-logo > form{grid-row:2}
    .header-with-logo .header-utilities{grid-row:2}
}
.trash-primary-actions .trash-delete-button{
    display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .7rem;
    border:1px solid #edbcc5;border-radius:.55rem;background:#fff5f7;color:#a52840;
    font-size:1rem;line-height:normal;list-style:none;
}
.trash-delete-button .tool-icon{width:.92rem;height:.92rem}
.trash-primary-actions .trash-delete-button:hover,.trash-primary-actions .trash-delete-button[aria-expanded=true]{
    background:#ffe8ed;border-color:#d98696;
}
:root[data-theme=dark] .trash-primary-actions .trash-delete-button{
    background:#352433;border-color:#794555;color:#ffafbc;
}
:root[data-theme=dark] .trash-primary-actions .trash-delete-button:hover,
:root[data-theme=dark] .trash-primary-actions .trash-delete-button[aria-expanded=true]{
    background:#4b2b3c;border-color:#ab6074;
}

.auth-page{width:min(30rem,calc(100% - 2rem));margin:1.5rem auto 3rem}
.auth-page h1,.auth-page h2{margin:0 0 .6rem}
.auth-page h2{font-size:1.05rem}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:.7rem;padding:1rem;margin:.85rem 0}
.auth-card summary{cursor:pointer;font-weight:650}
.auth-card form,.auth-form{display:grid;gap:.7rem}
.auth-card form + form,.auth-card[open] form{margin-top:.8rem}
.auth-card label{display:grid;gap:.3rem;min-width:0}
.auth-card input{width:100%;min-width:0}
.auth-card button{justify-self:start}
.auth-error{color:var(--danger);font-weight:600}
:root[data-theme=dark] .auth-error{color:#ffb3bd}
.access-form{display:flex;gap:.75rem;align-items:end;flex-wrap:wrap}
.access-form label:first-of-type{flex:1 1 16rem}
.access-list{display:grid;gap:.5rem}
.access-list article{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap}
.access-list small{display:block;color:var(--muted)}

.services-page .auth-form{justify-items:start}
.services-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;width:100%;margin:0}
.services-fields legend{font-weight:650}
.services-wide{grid-column:1/-1}
.services-confirm{display:grid;gap:.3rem;width:min(100%,21rem)}
.access-notify{flex-basis:100%;display:flex!important;align-items:center;gap:.4rem}
.access-notify input{width:auto}
@media(max-width:36rem){.services-fields{grid-template-columns:1fr}}

.auth-document{
    --login-bg:var(--app-bg);--login-glow:#dce9ff;--login-card:var(--surface);--login-ink:var(--ink);--login-muted:var(--muted);
    --login-line:var(--border);--login-field:var(--surface-soft);--login-accent:var(--accent);--login-hover:var(--accent-hover);--login-link:var(--link);
    --login-wave:#3977e529;--login-wave-alt:#389dce30;--login-shadow:0 18px 45px #142a4f16;
    --login-message:#eff6ff;--login-message-ink:#224b86;--login-message-border:#c9dbf6;
    --login-error:#fff0f2;--login-error-ink:#9e2341;--login-error-border:#f3bcc8;
    background:var(--login-bg);
}
:root[data-theme=dark].auth-document{
    --login-glow:#1e3457;
    --login-wave:#709eeb35;--login-wave-alt:#55a9cf33;--login-shadow:0 18px 45px #060e1c57;
    --login-message:#253957;--login-message-ink:#c2dcff;--login-message-border:#45618b;
    --login-error:#3d2230;--login-error-ink:#ffbecd;--login-error-border:#754057;
}
.auth-document body{
    height:auto;min-height:100dvh;
    background:radial-gradient(ellipse at top left,var(--login-glow),transparent 47%) var(--login-bg);
}
.login-screen{
    position:relative;isolation:isolate;min-height:100dvh;width:100%;margin:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(1.5rem,4.5vh,2.8rem);padding:clamp(3.8rem,8vh,6rem) 1rem clamp(3.8rem,14vh,8rem);
    color:var(--login-ink);
}
.login-waves{position:fixed;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.login-waves span{
    position:absolute;inset:0;background:var(--login-wave);translate:0 var(--wave-shift,0%);
    transform:scaleX(var(--wave-direction,1));
    clip-path:shape(from -4% 18%,
        curve to 22% 16% with 6% 26% / 13% 24%,
        curve to 54% 15% with 34% 3% / 41% 2%,
        curve to 104% 11% with 70% 32% / 85% 23%,
        line to 104% 11.24%,
        curve to 54% 15.24% with 85% 23.24% / 70% 32.24%,
        curve to 22% 16.24% with 41% 2.24% / 34% 3.24%,
        curve to -4% 18.24% with 13% 24.24% / 6% 26.24%,
        close);
}
.login-waves span:nth-child(1){--wave-shift:-17%;--wave-direction:-1;--wave-duration:18s;--wave-delay:-7s}
.login-waves span:nth-child(2){--wave-shift:-6%;--wave-duration:15s;--wave-delay:-10s;background:var(--login-wave-alt)}
.login-waves span:nth-child(3){--wave-shift:10%;--wave-direction:-1;--wave-duration:22s;--wave-delay:-16s;opacity:.65}
.login-waves span:nth-child(4){--wave-shift:28%;--wave-duration:17s;--wave-delay:-5s}
.login-waves span:nth-child(5){--wave-shift:40%;--wave-direction:-1;--wave-duration:20s;--wave-delay:-13s;opacity:.75}
.login-waves span:nth-child(6){--wave-shift:57%;--wave-duration:24s;--wave-delay:-9s;background:var(--login-wave-alt)}
.login-waves span:nth-child(7){--wave-shift:74%;--wave-direction:-1;--wave-duration:19s;--wave-delay:-14s}
@media (prefers-reduced-motion:no-preference){
    .login-waves span{
        animation:login-wave-drift var(--wave-duration) ease-in-out var(--wave-delay) infinite alternate;
    }
}
@keyframes login-wave-drift{
    from{
        translate:0 calc(var(--wave-shift) - 3%);
        transform:scaleX(var(--wave-direction,1)) skewY(-1.35deg);
    }
    to{
        translate:0 calc(var(--wave-shift) + 3%);
        transform:scaleX(var(--wave-direction,1)) skewY(1.35deg);
    }
}
.login-brand{display:block;line-height:0}
.login-brand img{display:block;width:clamp(9rem,30vw,11.25rem);height:auto}
@supports (mask-image:url("assets/logosistema.svg")){
    .login-brand{position:relative}
    .login-brand img{opacity:0}
    .login-brand::before{
        content:"";position:absolute;inset:0;background:var(--login-link);
        mask:url("assets/logosistema.svg") center / contain no-repeat;
    }
}
.auth-document .login-theme{
    position:absolute;top:1rem;right:1rem;z-index:1;margin:0;display:grid;place-items:center;
    padding:0;width:2.45rem;height:2.45rem;border-radius:.7rem;
    color:var(--login-link);background:var(--login-card);border-color:var(--login-line);
}
.auth-document .login-theme:hover{border-color:var(--login-link)}
.login-card{
    width:min(100%,27.5rem);padding:clamp(1.15rem,5vw,2.25rem);text-align:center;
    background:var(--login-card);border:1px solid var(--login-line);border-radius:1rem;box-shadow:var(--login-shadow);
}
.login-card h1{margin:0;font-size:clamp(1.3rem,4vw,1.6rem);letter-spacing:-.035em;line-height:1.2}
.login-intro{margin:.85rem 0 1.35rem;font-size:.89rem;line-height:1.5;color:var(--login-muted)}
.login-card form{display:grid;gap:.9rem;margin:0}
.login-card form + form,.login-resend form{margin-top:.85rem}
.login-card label{display:grid;gap:.35rem;font-size:.8rem;font-weight:650;color:var(--login-ink)}
.auth-document .login-card input:not([type=hidden]){
    width:100%;min-width:0;min-height:2.55rem;padding:.6rem .75rem;text-align:left;
    color:var(--login-ink);background:var(--login-field);border:1px solid var(--login-line);border-radius:.65rem;
    font-size:.9rem;font-weight:400;
}
.auth-document .login-card input:focus{border-color:var(--login-link)}
.auth-document .login-card button.primary{
    width:100%;min-height:2.55rem;margin-top:.15rem;border:1px solid transparent;border-radius:.65rem;
    color:#fff;background:var(--login-accent);font-size:.84rem;font-weight:700;
}
.auth-document .login-card button.primary:hover{background:var(--login-hover)}
.auth-document .login-card :focus-visible,.auth-document .login-theme:focus-visible{outline-color:var(--login-link)}
.login-card .cf-turnstile{max-width:100%;justify-self:center}
.login-card form button:not(.primary){justify-self:center}
.login-links{display:grid;justify-items:center;gap:.6rem;margin-top:1rem}
.login-links a,.login-resend summary{color:var(--login-link);font-size:.82rem;font-weight:650;text-underline-offset:.18em}
.login-links a{text-decoration:none}
.login-links a:hover{text-decoration:underline}
.login-resend{margin-top:1rem}
.login-resend summary{cursor:pointer}
.login-message{
    margin:0 0 1rem;padding:.7rem .85rem;border:1px solid var(--login-message-border);border-radius:.65rem;
    background:var(--login-message);color:var(--login-message-ink);font-size:.82rem;font-weight:600;line-height:1.45;
}
.login-message.login-error{background:var(--login-error);color:var(--login-error-ink);border-color:var(--login-error-border)}
@supports not (clip-path:shape(from 0 0,line to 100% 100%,close)){
    .login-waves span{display:none}
}