/* Brick Drive styles. Uses only tokens.css variables. Part 1: the components from the design step. Part 2: the app layout. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--text-base)/var(--leading-base) var(--font-sans);color:var(--text);background:var(--bg)}
h1,h2,h3{margin:0}
.icon{width:var(--icon-sm);height:var(--icon-sm);flex:none;stroke-width:2}
.icon-lg{width:var(--icon-md);height:var(--icon-md)}
:focus-visible{outline:var(--line-2) solid var(--focus);outline-offset:var(--line-2)}
.sr-only{position:absolute;width:var(--line-1);height:var(--line-1);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text-muted)}
.small{font-size:var(--text-sm);line-height:var(--leading-sm)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-md);padding:0 var(--space-4);border-radius:var(--radius-md);border:var(--line-1) solid var(--border-input);background:var(--surface);color:var(--text);font:600 var(--text-sm)/1 var(--font-sans);cursor:pointer;text-decoration:none;transition:background var(--motion-fast),border-color var(--motion-fast)}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(var(--line-1))}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-quiet{background:transparent;border-color:transparent;color:var(--text-muted)}
.btn-quiet:hover{background:var(--accent-tint);color:var(--text)}
.btn-danger{color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger-tint)}
.btn-sm{height:var(--control-sm);padding:0 var(--space-3)}
.btn-lg{height:var(--control-lg);padding:0 var(--space-5);font-size:var(--text-base)}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none}
.btn[aria-busy=true]{cursor:progress}
.spinner{width:var(--icon-sm);height:var(--icon-sm);border-radius:50%;border:var(--line-2) solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{display:inline-grid;place-items:center;width:var(--control-md);height:var(--control-md);border-radius:var(--radius-md);border:var(--line-1) solid transparent;background:transparent;color:var(--text-muted);cursor:pointer}
.icon-btn:hover{background:var(--accent-tint);color:var(--text)}
.icon-btn.round{border-radius:var(--radius-pill);width:var(--control-lg);height:var(--control-lg);background:var(--accent);color:var(--on-accent)}
.icon-btn.round:hover{background:var(--accent-strong)}

/* Forms */
.field{display:grid;gap:var(--space-2)}
.field label,.label{font-weight:600;font-size:var(--text-sm)}
.hint{font-size:var(--text-sm);color:var(--text-muted)}
.error{font-size:var(--text-sm);color:var(--danger);display:flex;gap:var(--space-2);align-items:center}
.input,.select,.textarea{width:100%;height:var(--control-md);padding:0 var(--space-3);border-radius:var(--radius-md);border:var(--line-1) solid var(--border-input);background:var(--surface);color:var(--text);font:inherit}
.textarea{height:auto;min-height:var(--textarea-min);padding:var(--space-3) var(--space-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 var(--line-3) var(--accent-tint)}
.input[aria-invalid=true]{border-color:var(--danger)}
.input[readonly]{background:var(--surface-sunken)}
.input-lg{height:var(--control-lg)}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.check{display:inline-flex;gap:var(--space-2);align-items:center;font-size:var(--text-sm);cursor:pointer}
.check input{appearance:none;width:var(--control-check);height:var(--control-check);margin:0;border:var(--line-1) solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface);display:grid;place-items:center}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";width:var(--tick-w);height:var(--tick-h);border:solid var(--on-accent);border-width:0 var(--line-2) var(--line-2) 0;transform:rotate(45deg) translate(calc(-1 * var(--line-1)),calc(-1 * var(--line-1)))}
.switch{position:relative;width:var(--control-row-compact);height:var(--icon-md);border-radius:var(--radius-pill);border:var(--line-1) solid var(--border-input);background:var(--surface-sunken);cursor:pointer;padding:0}
.switch::after{content:"";position:absolute;top:var(--space-1);left:var(--space-1);width:var(--knob);height:var(--knob);border-radius:50%;background:var(--text-muted);transition:transform var(--motion-fast)}
.switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked=true]::after{transform:translateX(var(--knob-travel));background:var(--on-accent)}
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap;border:0;padding:0;margin:0}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0}
.chip span{display:grid;place-items:center;min-width:var(--control-lg);height:var(--control-row-compact);padding:0 var(--space-3);border-radius:var(--radius-pill);border:var(--line-1) solid var(--border-input);font-size:var(--text-sm);font-weight:600}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip input:focus-visible+span{outline:var(--line-2) solid var(--focus);outline-offset:var(--line-2)}
.copy{display:flex;gap:var(--space-2)}
.copy .input{font-family:var(--font-mono);font-size:var(--text-sm)}

/* Surfaces */
.card{background:var(--surface);border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card)}
.card.narrow{max-width:var(--narrow-max);margin:0 auto}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}
.page-head h1{font-size:var(--text-xl);line-height:var(--leading-xl)}
.badge{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-badge);padding:0 var(--space-2);border-radius:var(--radius-pill);font:600 var(--text-xs)/1 var(--font-sans);background:var(--surface-sunken);color:var(--text-muted);border:var(--line-1) solid var(--border)}
.badge-accent{background:var(--accent-tint);color:var(--accent-strong);border-color:transparent}
.badge-success{background:var(--success-tint);color:var(--success);border-color:transparent}
.badge-warning{background:var(--warning-tint);color:var(--warning);border-color:transparent}
.badge-danger{background:var(--danger-tint);color:var(--danger);border-color:transparent}
.badge-info{background:var(--info-tint);color:var(--info);border-color:transparent}
.dot{width:var(--space-2);height:var(--space-2);border-radius:50%;background:currentColor}
.flash{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm)}
.flash .grow{flex:1}
.flash-success{background:var(--success-tint);color:var(--success)}
.flash-info{background:var(--info-tint);color:var(--info)}
.flash-warning{background:var(--warning-tint);color:var(--warning)}
.flash-danger{background:var(--danger-tint);color:var(--danger)}

/* Table */
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.empty{text-align:center;padding:var(--space-8) var(--space-5);display:grid;justify-items:center;gap:var(--space-2)}
.empty>.icon{width:var(--control-sm);height:var(--control-sm);color:var(--text-muted)}
.empty h3{font-size:var(--text-lg)}
.skeleton{background:linear-gradient(90deg,var(--surface-sunken),var(--border),var(--surface-sunken));border-radius:var(--radius-sm);height:var(--space-3)}
/* Meters */
.meter{height:var(--meter);border-radius:var(--radius-pill);background:var(--border);overflow:hidden}
.meter>span{display:block;height:100%;background:var(--accent);border-radius:inherit}
.meter.warn>span{background:var(--warning)}
.meter.full>span{background:var(--danger)}

/* ── Drive ─────────────────────────────────────────────────────────────── */
.num{font-variant-numeric:tabular-nums}
.ic-file{width:var(--icon-file);height:var(--icon-file)}
.ic-tile{width:var(--icon-tile);height:var(--icon-tile)}
.ft-folder{color:var(--ft-folder)}.ft-image{color:var(--ft-image)}.ft-audio{color:var(--ft-audio)}.ft-video{color:var(--ft-video)}
.ft-doc{color:var(--ft-doc)}.ft-sheet{color:var(--ft-sheet)}.ft-slides{color:var(--ft-slides)}.ft-pdf{color:var(--ft-pdf)}
.ft-archive{color:var(--ft-archive)}.ft-code{color:var(--ft-code)}.ft-other{color:var(--ft-other)}
.skip{position:absolute;left:var(--space-2);top:-60px;z-index:100}.skip:focus{top:var(--space-2)}

/* Shell */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);grid-template-rows:var(--header) 1fr;min-height:var(--shell-min);border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg)}
.app-header{grid-column:1/-1;min-width:0;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-3) 0 var(--space-4);background:var(--surface);border-bottom:var(--line-1) solid var(--border)}
.mark{display:flex;align-items:center;gap:var(--space-2);font-weight:700;width:calc(var(--sidebar) - var(--mark-inset))}
.mark .icon{color:var(--accent);width:var(--icon-brand);height:var(--icon-brand)}
.search{flex:1;min-width:0;max-width:var(--reading-max);display:flex;align-items:center;gap:var(--space-2);height:var(--control-md);padding:0 var(--space-2) 0 var(--space-3);border:var(--line-1) solid var(--border-input);border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--text-muted)}
.search input{flex:1;border:0;background:transparent;font:inherit;color:var(--text);min-width:0}
.search input:focus{outline:none}.search:focus-within{border-color:var(--focus);box-shadow:0 0 0 var(--line-3) var(--accent-tint)}
.hdr-right{margin-left:auto;display:flex;gap:var(--space-1);align-items:center}
.avatar{width:var(--control-sm);height:var(--control-sm);border-radius:50%;display:inline-grid;place-items:center;background:var(--accent-tint);color:var(--accent-strong);font:700 var(--text-xs)/1 var(--font-sans);flex:none}
.avatar.sm{width:var(--icon-file);height:var(--icon-file);font-size:var(--text-micro)}
.count-badge{position:absolute;top:var(--space-1);right:var(--space-1);min-width:var(--icon-sm);height:var(--icon-sm);padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--danger);color:var(--on-accent);font:700 var(--text-micro)/var(--icon-sm) var(--font-sans)}
.rel{position:relative}
.rail{background:var(--surface);border-right:var(--line-1) solid var(--border);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}
.rail .btn-new{margin-bottom:var(--space-3);justify-content:flex-start;height:var(--control-lg);border-radius:var(--radius-xl);box-shadow:var(--shadow-raised)}
.rail a{display:flex;align-items:center;gap:var(--space-3);height:var(--control-md);padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--text);text-decoration:none;font:500 var(--text-sm)/1 var(--font-sans);position:relative}
.rail a .icon{width:var(--icon-md);height:var(--icon-md);color:var(--text-muted)}
.rail a:hover{background:var(--row-hover)}
.rail a[aria-current=page]{background:var(--accent-tint);color:var(--accent-strong)}
.rail a[aria-current=page] .icon{color:var(--accent-strong)}
.rail a .n{margin-left:auto;font-size:var(--text-xs);font-weight:700;color:var(--accent-strong)}
.rail a.drop-over{background:var(--drop-target);outline:var(--line-2) dashed var(--drop-border);outline-offset:calc(-1 * var(--line-2))}
.storage{margin-top:auto;padding:var(--space-3);display:grid;gap:var(--space-2);font-size:var(--text-xs);color:var(--text-muted)}
.meter>span{background:var(--progress)}.meter{background:var(--progress-track)}
.main{display:grid;grid-template-columns:minmax(0,1fr) var(--details);min-width:0}
.content{padding:var(--space-3) var(--space-5) var(--space-5);min-width:0;overflow:auto}
.toolbar{display:flex;align-items:center;gap:var(--space-2);min-height:var(--icon-tile);flex-wrap:wrap}
.crumbs ol{display:flex;gap:var(--space-1);align-items:center;list-style:none;margin:0;padding:0;font-size:var(--text-lg);font-weight:600}
.crumbs a{color:var(--text-muted);text-decoration:none;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
.crumbs a:hover{background:var(--row-hover);color:var(--text)}
.crumbs [aria-current]{padding:var(--space-1) var(--space-2)}
.crumbs .icon{color:var(--text-muted)}
.seg{display:inline-flex;border:var(--line-1) solid var(--border-input);border-radius:var(--radius-md);overflow:hidden;margin-left:auto}
.seg button{all:unset;display:grid;place-items:center;width:var(--control-row-compact);height:var(--control-sm);cursor:pointer;color:var(--text-muted)}
.seg button[aria-pressed=true]{background:var(--accent-tint);color:var(--accent-strong)}
.seg button:focus-visible{outline:var(--line-2) solid var(--focus);outline-offset:calc(-1 * var(--line-2))}

/* Filter chips */
.fchips{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-1) 0 var(--space-2)}
.fchip{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-sm);padding:0 var(--space-3);border-radius:var(--radius-pill);border:var(--line-1) solid var(--border-input);background:var(--surface);color:var(--text);font:500 var(--text-sm)/1 var(--font-sans);cursor:pointer}
.fchip.set{background:var(--accent-tint);border-color:transparent;color:var(--accent-strong)}

/* Selection bar */
.selbar{display:flex;align-items:center;gap:var(--space-1);height:var(--control-lg);padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--accent-tint);color:var(--accent-strong);margin-bottom:var(--space-2);flex-wrap:wrap}
.selbar.off{visibility:hidden}   /* keeps its space, so selecting doesn't push the list down under the pointer */
.selbar .count{font-weight:600;margin:0 var(--space-2);font-size:var(--text-sm)}
.selbar .icon-btn{color:var(--accent-strong);width:var(--control-row-compact);height:var(--control-row-compact)}

/* File list */
.flist{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.flist th{font:600 var(--text-xs)/1 var(--font-sans);color:var(--text-muted);text-align:left;padding:var(--space-3) var(--space-2);border-bottom:var(--line-1) solid var(--border);white-space:nowrap}
.flist th button{all:unset;cursor:pointer;display:inline-flex;gap:var(--space-1);align-items:center}
.flist th button:focus-visible{outline:var(--line-2) solid var(--focus);outline-offset:var(--line-2)}
.flist td{height:var(--control-row);padding:0 var(--space-2);border-bottom:var(--line-1) solid var(--border);white-space:nowrap}
.flist tr:hover td{background:var(--row-hover)}
.flist tr[aria-selected=true] td{background:var(--row-selected);color:var(--on-row-selected)}
.flist tr[aria-selected=true] .meta{color:var(--on-row-selected)}
.flist tr.dragging td{background:var(--surface-sunken);box-shadow:inset 0 var(--line-1) 0 var(--border-input),inset 0 calc(-1 * var(--line-1)) 0 var(--border-input)}
.flist tr.drop-over td{background:var(--drop-target);box-shadow:inset 0 var(--line-2) 0 var(--drop-border),inset 0 calc(-1 * var(--line-2)) 0 var(--drop-border)}
.flist .name{display:flex;align-items:center;gap:var(--space-3);font-weight:500;min-width:0}
.flist .name span.t{overflow:hidden;text-overflow:ellipsis}
.flist .meta{color:var(--text-muted)}
.flist .w-check{width:var(--control-row-compact)}.flist .w-act{width:var(--control-lg)}
.flist .rename{height:var(--control-inline);max-width:var(--menu-max)}
.tags{display:inline-flex;gap:var(--space-1);color:var(--text-muted)}.tags .icon{width:var(--icon-xs);height:var(--icon-xs)}
tr[aria-selected=true] .tags{color:var(--on-row-selected)}
.flist.compact td{height:var(--control-row-compact)}
.tick{appearance:none;width:var(--control-check);height:var(--control-check);margin:0;border:var(--line-1) solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface);display:grid;place-items:center;cursor:pointer;vertical-align:middle}
.tick:checked,.tick:indeterminate{background:var(--accent);border-color:var(--accent)}
.tick:indeterminate::after{content:"";width:var(--tick-h);height:var(--line-2);background:var(--on-accent)}
.tick:checked::after{content:"";width:var(--tick-w);height:var(--tick-h);border:solid var(--on-accent);border-width:0 var(--line-2) var(--line-2) 0;transform:rotate(45deg) translate(calc(-1 * var(--line-1)),calc(-1 * var(--line-1)))}
.snip{display:block;color:var(--text-muted);white-space:normal;font-size:var(--text-xs);line-height:var(--leading-xs);margin-top:var(--space-1)}
mark{background:var(--warning-tint);color:var(--text);border-radius:var(--radius-sm);padding:0 var(--line-1)}
@media (max-width:700px){.flist thead{display:none}.flist .hide-sm{display:none}.flist td{height:auto;padding:var(--space-2)}}

/* Grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--thumb),1fr));gap:var(--space-3)}
.tile{border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;cursor:pointer;position:relative}
.tile:hover{border-color:var(--border-input)}
.tile[aria-selected=true]{outline:var(--line-2) solid var(--accent);outline-offset:calc(-1 * var(--line-1));background:var(--row-selected)}
.tile .th{aspect-ratio:4/3;display:grid;place-items:center;background:var(--surface-sunken)}
.tile .th.wave svg{width:80%;height:var(--control-md);color:var(--ft-audio)}
.tile .cap{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-2) var(--space-3);font:500 var(--text-sm)/1.3 var(--font-sans)}
.tile .cap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .tick{position:absolute;top:var(--space-2);left:var(--space-2)}

/* Drop zone */
.dropzone{border:var(--line-2) dashed var(--drop-border);background:var(--drop-target);border-radius:var(--radius-lg);display:grid;place-items:center;gap:var(--space-2);padding:var(--space-7);text-align:center;font-weight:600}
.dropzone .icon{width:var(--icon-drop);height:var(--icon-drop);color:var(--accent)}

/* Details panel */
.details{border-left:var(--line-1) solid var(--border);background:var(--surface);padding:var(--space-4);display:grid;align-content:start;gap:var(--space-4);font-size:var(--text-sm)}
.details h2{font-size:var(--text-lg);display:flex;gap:var(--space-3);align-items:center;overflow-wrap:anywhere}
.tabs{display:flex;gap:var(--space-1);border-bottom:var(--line-1) solid var(--border)}
.tabs button{all:unset;padding:var(--space-2) var(--space-3);cursor:pointer;color:var(--text-muted);font-weight:600;border-bottom:var(--line-2) solid transparent}
.tabs button[aria-selected=true]{color:var(--accent-strong);border-color:var(--accent)}
.tabs button:focus-visible{outline:var(--line-2) solid var(--focus)}
.kv{display:grid;grid-template-columns:var(--kv-label) minmax(0,1fr);gap:var(--space-2) var(--space-3)}
.kv dt{color:var(--text-muted)}.kv dd{margin:0}
.avatars{display:flex}.avatars .avatar{margin-right:calc(-1 * var(--space-2));border:var(--line-2) solid var(--surface)}
.preview-sm{aspect-ratio:16/9;border-radius:var(--radius-md);background:var(--surface-sunken);display:grid;place-items:center}
.act{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.act li{display:grid;grid-template-columns:var(--icon-file) minmax(0,1fr);gap:var(--space-2)}
.act time{display:block;color:var(--text-muted);font-size:var(--text-xs)}
.day{font:600 var(--text-xs)/1 var(--font-sans);color:var(--text-muted);margin-top:var(--space-1)}

/* Upload tray */
.tray{width:var(--tray);max-width:100%;background:var(--surface);border:var(--line-1) solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-pop);overflow:hidden}
.tray header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-3);background:var(--inverse);color:var(--on-inverse);font-weight:600;font-size:var(--text-sm)}
.tray header .icon-btn{color:var(--on-inverse);width:var(--control-sm);height:var(--control-sm)}
.tray header .icon-btn:hover{background:transparent;outline:var(--line-1) solid var(--on-inverse)}
.tray ul{list-style:none;margin:0;padding:var(--space-2) 0;max-height:var(--tray-list-max);overflow:auto}
.tray li{display:grid;grid-template-columns:var(--icon-file) minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}
.tray li .meter{grid-column:2/3}
.tray li .st{grid-column:2/3;font-size:var(--text-xs);color:var(--text-muted)}
.tray li .st.bad,.tray li .ic.bad{color:var(--danger)}.tray li .st.ok,.tray li .ic.ok{color:var(--success)}
.tray li .ic{grid-row:1/3;color:var(--text-muted);display:flex}
.tray li .icon-btn{grid-row:1/3;grid-column:3;width:var(--control-sm);height:var(--control-sm)}

/* Modal */
.modal{width:min(var(--modal),100%);min-width:0;background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);padding:var(--space-5);display:grid;gap:var(--space-4)}
.modal h3{font-size:var(--text-lg);display:flex;align-items:center;gap:var(--space-2)}
.modal .foot{display:flex;gap:var(--space-2);justify-content:flex-end;flex-wrap:wrap}
.people{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;min-height:var(--control-md);padding:var(--space-1) var(--space-2);border:var(--line-1) solid var(--border-input);border-radius:var(--radius-md);flex:1;background:var(--surface)}
.people:focus-within{border-color:var(--focus);box-shadow:0 0 0 var(--line-3) var(--accent-tint)}
.people input{flex:1;min-width:var(--chip-input-min);border:0;background:transparent;font:inherit;color:var(--text)}
.people input:focus{outline:none}
.pchip{display:inline-flex;align-items:center;gap:var(--space-1);height:var(--control-xs);padding:0 var(--space-1) 0 var(--space-3);border-radius:var(--radius-pill);background:var(--surface-sunken);border:var(--line-1) solid var(--border);font-size:var(--text-sm)}
.pchip.bad{border-color:var(--danger);color:var(--danger);background:var(--danger-tint)}
.pchip button{all:unset;display:grid;place-items:center;width:var(--icon-md);height:var(--icon-md);border-radius:50%;cursor:pointer}
.pchip button:focus-visible{outline:var(--line-2) solid var(--focus)}
.who{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.who li{display:grid;grid-template-columns:var(--control-sm) minmax(0,1fr) auto;gap:var(--space-3);align-items:center;font-size:var(--text-sm)}
.who .sub{color:var(--text-muted);font-size:var(--text-xs)}
.role{all:unset;display:inline-flex;gap:var(--space-1);align-items:center;cursor:pointer;padding:var(--space-2) var(--space-2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text)}
.role:hover{background:var(--row-hover)}.role:focus-visible{outline:var(--line-2) solid var(--focus)}
.role[aria-disabled=true]{color:var(--text-muted);cursor:not-allowed}
.access{display:grid;grid-template-columns:var(--control-md) minmax(0,1fr);gap:var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--radius-lg);background:var(--surface-sunken)}
.access .ico{width:var(--control-md);height:var(--control-md);border-radius:50%;display:grid;place-items:center;background:var(--success-tint);color:var(--success)}
.access select{all:unset;font-weight:600;cursor:pointer}
.access select:focus-visible{outline:var(--line-2) solid var(--focus)}
.sec-h{font:600 var(--text-sm)/1 var(--font-sans);margin:0}
.banner{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-3);border-radius:var(--radius-md);background:var(--info-tint);color:var(--info);font-size:var(--text-sm);flex-wrap:wrap}
.banner.warn{background:var(--warning-tint);color:var(--warning)}

/* Preview */
.viewer{background:var(--stage);color:var(--on-stage);border-radius:var(--radius-lg);overflow:hidden}
.viewer .vbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-bottom:var(--line-1) solid color-mix(in srgb, var(--on-stage) 14%, transparent)}
.viewer .vbar .icon-btn{color:var(--on-stage)}
.viewer .vbar .icon-btn:hover{background:color-mix(in srgb, var(--on-stage) 14%, transparent)}
.viewer .vbar .icon-btn[aria-pressed=true]{color:var(--stage);background:var(--on-stage)}
.viewer .vbar strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer .stage{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;padding:var(--space-7) var(--space-4);gap:var(--space-4)}
.player{width:100%;max-width:var(--modal);background:var(--surface);color:var(--text);border-radius:var(--radius-lg);padding:var(--space-4);display:grid;gap:var(--space-3)}
.player .row1{display:flex;gap:var(--space-3);align-items:center}
.wave{flex:1;min-width:0;width:100%;height:var(--icon-tile);display:block;color:var(--ft-audio)}
.wave .played{color:var(--accent)}
.times{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--text-muted)}
.cant{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-6);text-align:center}
.cant>span .icon{width:var(--icon-tile);height:var(--icon-tile)}

/* Versions, trash, rollback */
.vlist{list-style:none;margin:0;padding:0;border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.vlist li{display:grid;grid-template-columns:var(--control-sm) minmax(0,1fr) auto auto;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-3);border-bottom:var(--line-1) solid var(--border);font-size:var(--text-sm)}
.vlist li:last-child{border-bottom:0}
.vlist .sub{color:var(--text-muted);font-size:var(--text-xs)}
.icon-btn[aria-pressed=true]{color:var(--accent-strong);background:var(--accent-tint)}
.bars{display:flex;align-items:flex-end;gap:var(--line-3);height:var(--chart-h);padding:var(--space-2);border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.bars button{all:unset;flex:1;background:var(--progress-track);border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:pointer;min-height:var(--line-2)}
.bars button:hover{background:var(--border-input)}
.bars button[aria-pressed=true]{background:var(--accent)}
.bars button:focus-visible{outline:var(--line-2) solid var(--focus)}

/* AI */
.ai{border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--surface);display:grid;gap:var(--space-2);font-size:var(--text-sm)}
.ai h4{margin:0;display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-sm)}
.ai h4 .icon{color:var(--accent)}
.ai .src{display:flex;gap:var(--space-2);flex-wrap:wrap}
.ai .src a{display:inline-flex;gap:var(--space-2);align-items:center;height:var(--control-chip);padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--surface-sunken);border:var(--line-1) solid var(--border);color:var(--text);text-decoration:none;font-size:var(--text-xs)}
.ai.blocked{background:var(--vault-tint);color:var(--vault);border-color:transparent}

/* Vault */
.vault{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--vault-tint);color:var(--vault);text-align:center}
.vault .icon{width:var(--control-sm);height:var(--control-sm)}
.vault .input{max-width:var(--field-min);text-align:center;letter-spacing:.3em;font-family:var(--font-mono)}

/* Public */
.public{background:var(--bg);border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.public .ph{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--surface);border-bottom:var(--line-1) solid var(--border)}
.public .pb{padding:var(--space-6) var(--space-4);display:grid;place-items:center}

/* Toast */
.toast{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--inverse);color:var(--on-inverse);font-size:var(--text-sm);box-shadow:var(--shadow-pop)}
.toast .btn{height:var(--control-inline);background:transparent;color:var(--on-inverse);border-color:var(--on-inverse)}

/* Notifications */
.nlist{width:var(--tray);max-width:100%;background:var(--surface);border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.nlist header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);border-bottom:var(--line-1) solid var(--border);font-weight:600}
.nlist ul{list-style:none;margin:0;padding:0}
.nlist li{display:grid;grid-template-columns:var(--icon-file) minmax(0,1fr) var(--space-2);gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--line-1) solid var(--border);font-size:var(--text-sm)}
.nlist li:last-child{border-bottom:0}
.nlist .unread{width:var(--space-2);height:var(--space-2);border-radius:50%;background:var(--accent);margin-top:var(--space-2)}
.nlist time{display:block;color:var(--text-muted);font-size:var(--text-xs)}

@media (max-width:960px){.shell{grid-template-columns:minmax(0,1fr)}.rail{display:none}.main{grid-template-columns:minmax(0,1fr)}.details{border-left:0;border-top:var(--line-1) solid var(--border)}.mark{width:auto}}
@media (max-width:700px){.vbar .hide-sm{position:absolute;width:var(--line-1);height:var(--line-1);overflow:hidden;clip-path:inset(50%);white-space:nowrap}.app-header .mark span{position:absolute;width:var(--line-1);height:var(--line-1);overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hdr-right .hide-sm{display:none}.content{padding:var(--space-2)}}
.flist .name>span:first-child .icon,.tray li>span:first-child .icon{width:var(--icon-file);height:var(--icon-file)}
.tile .th>.icon{width:var(--icon-tile);height:var(--icon-tile)}
.tile .th.ft-folder,.tile .th.ft-video{color:inherit}.tile .th.ft-folder .icon{color:var(--ft-folder)}.tile .th.ft-video .icon{color:var(--ft-video)}
.check input[type=radio]{border-radius:50%}
.check input[type=radio]:checked::after{width:var(--space-2);height:var(--space-2);border:0;border-radius:50%;background:var(--on-accent);transform:none}
.toast{justify-self:start}

/* ── Part 2: the app ───────────────────────────────────────────────────── */
[hidden]{display:none!important}
html,body{height:100%}
a{color:var(--accent-strong)}
.grow{flex:1;min-width:0}
.h-xl{font-size:var(--text-xl);line-height:var(--leading-xl)}
.h-lg{font-size:var(--text-lg);line-height:var(--leading-lg)}
.h-md{font-size:var(--text-base)}
.measure{max-width:60ch}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ellipsis-wrap{overflow-wrap:anywhere}
.sec-gap{margin:var(--space-7) 0 var(--space-3)}
.soon{margin-left:auto;font-size:var(--text-xs);color:var(--text-muted);font-weight:500}
.skip{position:fixed;z-index:var(--z-toast)}
.show-sm{display:none}

/* Signed-out pages */
.bare-main{min-height:100%;display:grid;align-content:start;justify-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);background:var(--bg)}
.bare-main>.flash{width:min(var(--narrow-max),100%)}
.auth{width:min(var(--narrow-max),100%);display:grid;gap:var(--space-4);padding:var(--space-7)}
.auth h1{font-size:var(--text-xl);line-height:var(--leading-xl);display:flex;gap:var(--space-2);align-items:center}
.auth-mark{display:flex;gap:var(--space-2);align-items:center;font-weight:700;color:var(--text);text-decoration:none}
.auth-mark .icon{width:var(--icon-file);height:var(--icon-file);color:var(--accent)}
.code-input{font-family:var(--font-mono);letter-spacing:.2em;text-align:center}

/* Shell, full page */
.shell{min-height:100vh;height:100vh;border:0;border-radius:0;grid-template-rows:var(--header) minmax(0,1fr)}
.app-header{position:relative;z-index:var(--z-header)}
.menu-btn{display:none}
.mark{color:var(--text);text-decoration:none}
.rail{overflow:auto;min-height:0}
.rail .btn-new{width:max-content;padding:0 var(--space-5) 0 var(--space-4)}
.rail-sep{height:var(--line-1);background:var(--border);margin:var(--space-2) var(--space-1)}
.rail .storage{display:grid;height:auto;align-items:stretch;gap:var(--space-2);margin-top:auto;padding:var(--space-3);font-weight:400;font-size:var(--text-xs);color:var(--text-muted)}
.rail .storage .storage-h{display:flex;gap:var(--space-2);align-items:center;font-weight:600;color:var(--text);font-size:var(--text-sm)}
.rail .storage .storage-h .icon{width:var(--icon-sm);height:var(--icon-sm)}
.main{display:block;min-width:0;min-height:0;overflow:hidden;position:relative}
.flashes{padding:var(--space-2) var(--space-5) 0;display:grid;gap:var(--space-2)}
.page{display:grid;grid-template-columns:minmax(0,1fr);height:100%;min-height:0}
.page.with-details{grid-template-columns:minmax(0,1fr) var(--details)}
.page>.content,.main>.content{overflow:auto;height:100%}
.main>.content{max-width:var(--content-max)}
.page>.details{overflow:auto;min-height:0}
.toolbar .tools{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}
.toolbar .seg{margin-left:0}
.crumbs ol{flex-wrap:wrap}
.crumb-h{font-size:var(--text-lg);font-weight:600;padding:var(--space-1) var(--space-2);margin:0;overflow-wrap:anywhere}
.crumbs a.drop-over{background:var(--drop-target);outline:var(--line-2) dashed var(--drop-border)}
.crumbs>a{display:inline-flex;gap:var(--space-2);align-items:center;font-size:var(--text-sm);margin-bottom:var(--space-2)}
.tabs a{padding:var(--space-2) var(--space-3);color:var(--text-muted);font-weight:600;border-bottom:var(--line-2) solid transparent;text-decoration:none}
.tabs a[aria-selected=true]{color:var(--accent-strong);border-color:var(--accent)}
.tabs{margin-bottom:var(--space-2)}
.search-page{display:flex;gap:var(--space-2);margin:var(--space-1) 0 var(--space-2);max-width:var(--form-max)}
.banner{margin:var(--space-1) 0 var(--space-3)}

/* Rows and tiles */
#listing-wrap{position:relative}
.flist{table-layout:auto}
.flist td:nth-child(2),.flist td.nm{max-width:0;width:60%}
.flist td.nm:only-child,.flist td.nm{width:100%}
.flist .name a.t{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.flist tr[tabindex]{cursor:default;outline:none}
.flist tr[tabindex]:focus-visible td{box-shadow:inset 0 var(--line-2) 0 var(--focus),inset 0 calc(-1 * var(--line-2)) 0 var(--focus)}
.flist tr[tabindex]:focus-visible td:first-child{box-shadow:inset var(--line-2) var(--line-2) 0 var(--focus),inset 0 calc(-1 * var(--line-2)) 0 var(--focus)}
.flist .more{opacity:.7}.flist tr:hover .more,.flist tr:focus-within .more,.flist tr[aria-selected=true] .more{opacity:1}
.flist .tags .star{color:var(--warning)}
.flist .loc{max-width:var(--field-min);overflow:hidden;text-overflow:ellipsis}
.flist .loc .icon{width:var(--icon-xs);height:var(--icon-xs);vertical-align:calc(-1 * var(--line-2))}
.thumb.ic-file{width:var(--icon-file);height:var(--icon-file);object-fit:cover;border-radius:var(--radius-sm);flex:none;background:var(--surface-sunken)}
.grid-row{display:contents}
.tile{outline:none}
.tile:focus-visible{outline:var(--line-2) solid var(--focus);outline-offset:var(--line-2)}
.tile .th{overflow:hidden}
.tile .th.has-img{background:var(--surface-sunken)}
.tile .th img{width:100%;height:100%;object-fit:cover}
.tile .cap a.t{flex:1;min-width:0;color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .cap .more{width:var(--control-xs);height:var(--control-xs);margin-right:calc(-1 * var(--space-2))}
.tile .tick{opacity:0;z-index:1}.tile:hover .tick,.tile[aria-selected=true] .tick,.tile:focus-within .tick{opacity:1}
.tile.drop-over{outline:var(--line-2) dashed var(--drop-border);background:var(--drop-target)}
.drop-overlay{position:absolute;inset:var(--space-2);display:grid;place-items:stretch;z-index:var(--z-dropdown);pointer-events:none}
.drop-overlay .dropzone{background:var(--drop-target);opacity:.96}
.empty .dropzone{width:min(var(--empty-drop),100%);margin-bottom:var(--space-2)}

/* Menus */
.menu-wrap{position:relative;display:inline-block}
.menu{position:absolute;z-index:var(--z-dropdown);min-width:var(--menu-min);max-width:min(var(--menu-max),calc(100vw - var(--icon-sm)));background:var(--surface);border:var(--line-1) solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);padding:var(--space-2);display:grid;gap:var(--line-1);top:calc(100% + var(--space-1));left:0}
.hdr-right .menu{left:auto;right:0}
.menu>a,.menu>button,.menu form>button{all:unset;box-sizing:border-box;display:flex;gap:var(--space-3);align-items:center;height:var(--control-row-compact);padding:0 var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text);cursor:pointer;width:100%}
.menu>a:hover,.menu>button:hover,.menu form>button:hover,.menu>a:focus-visible,.menu>button:focus-visible,.menu form>button:focus-visible{background:var(--row-hover);outline:none}
.menu>a:focus-visible,.menu>button:focus-visible,.menu form>button:focus-visible{box-shadow:inset 0 0 0 var(--line-2) var(--focus)}
.menu [aria-checked=true]{font-weight:700;color:var(--accent-strong)}
.menu [aria-disabled=true]{color:var(--text-muted);cursor:not-allowed}
.menu .sep{height:var(--line-1);background:var(--border);margin:var(--space-1) var(--space-1)}
.menu .danger{color:var(--danger)}
.menu-head{display:grid;padding:var(--space-2) var(--space-3) var(--space-3);border-bottom:var(--line-1) solid var(--border);margin-bottom:var(--space-1);overflow-wrap:anywhere}
.menu.ctx{position:fixed;top:0;left:0}
.avatar-btn{all:unset;cursor:pointer;border-radius:50%;display:grid}
.avatar-btn:focus-visible{outline:var(--line-2) solid var(--focus);outline-offset:var(--line-2)}

/* Dialogs */
dialog.modal{border:0;color:var(--text);max-height:calc(100vh - var(--control-sm));overflow:auto;padding:var(--space-5)}
dialog.modal.wide{width:min(var(--modal-wide),calc(100vw - var(--icon-sm)))}
dialog.modal{width:min(var(--modal),calc(100vw - var(--icon-sm)))}
dialog.modal::backdrop{background:var(--overlay)}
dialog.modal[open]{display:grid;grid-template-columns:minmax(0,1fr)}
.modal h2{font-size:var(--text-lg);line-height:var(--leading-lg);display:flex;align-items:center;gap:var(--space-2);overflow-wrap:anywhere;margin:0}
.modal .x{margin-left:auto;margin-top:calc(-1 * var(--space-2));margin-right:calc(-1 * var(--space-2))}
.modal .foot{margin-top:var(--space-1)}
.pick-list{list-style:none;margin:0;padding:0;border:var(--line-1) solid var(--border);border-radius:var(--radius-md);max-height:var(--list-max);overflow:auto}
.pick-list li button{all:unset;box-sizing:border-box;display:flex;gap:var(--space-3);align-items:center;width:100%;height:var(--control-row);padding:0 var(--space-3);cursor:pointer;border-bottom:var(--line-1) solid var(--border);font-size:var(--text-sm)}
.pick-list li:last-child button{border-bottom:0}
.pick-list li button:hover{background:var(--row-hover)}
.pick-list li button:focus-visible{outline:var(--line-2) solid var(--focus);outline-offset:calc(-1 * var(--line-2))}
.pick-list li button[disabled]{color:var(--text-muted);cursor:not-allowed}
.pick-list .ft-folder .icon{width:var(--icon-md);height:var(--icon-md)}
.pick-list .chev{margin-left:auto;color:var(--text-muted)}
.pick-crumbs{display:flex;gap:var(--space-1);flex-wrap:wrap;align-items:center;font-size:var(--text-sm)}
.pick-crumbs button{all:unset;cursor:pointer;color:var(--accent-strong);padding:var(--space-1) var(--space-1);border-radius:var(--radius-sm)}
.pick-crumbs button:focus-visible{outline:var(--line-2) solid var(--focus)}
.pick-crumbs strong{padding:var(--space-1) var(--space-1)}
.pick-empty{padding:var(--space-4);color:var(--text-muted);font-size:var(--text-sm);text-align:center}
.share-add{display:flex;gap:var(--space-2);align-items:flex-start;flex-wrap:wrap}
.share-add .select{width:auto}
.who .role-sel{width:auto;height:var(--control-sm);padding:0 var(--space-2)}
.who .from{font-size:var(--text-xs);color:var(--text-muted)}
.who .flag{font-size:var(--text-xs);margin-top:var(--space-1)}
.who .fixed{font-size:var(--text-sm);color:var(--text-muted);padding:0 var(--space-2)}
.access .select{width:auto;height:var(--control-sm)}
.access .ico.off{background:var(--surface);color:var(--text-muted)}
.link-row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.link-set{border:var(--line-1) solid var(--border);border-radius:var(--radius-md);padding:0 var(--space-3)}
.link-set summary{cursor:pointer;padding:var(--space-3) 0;font-weight:600;font-size:var(--text-sm)}
.link-set .stack{gap:var(--space-4);padding-bottom:var(--space-3)}

/* Details panel */
.details{padding:var(--space-4);gap:var(--space-4)}
.details .dh{display:flex;align-items:flex-start;gap:var(--space-3)}
.details .dh h2{flex:1;min-width:0}
.details .preview-sm{overflow:hidden}
.details .preview-sm img{width:100%;height:100%;object-fit:contain}
.details .preview-sm .icon{width:var(--icon-tile);height:var(--icon-tile)}
.details .kv dd{overflow-wrap:anywhere}
.details .sk{display:grid;gap:var(--space-3)}
.who-mini{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}

/* Upload tray and toasts */
.tray{position:fixed;right:var(--space-4);bottom:0;z-index:var(--z-tray)}
.tray.min ul{display:none}
.tray li .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.tray li .acts{grid-row:1/3;grid-column:3;display:flex}
.tray li .acts .icon-btn{width:var(--control-sm);height:var(--control-sm)}
.toasts{position:fixed;left:var(--space-4);bottom:var(--space-4);z-index:var(--z-toast);display:grid;gap:var(--space-2);justify-items:start;pointer-events:none}
.toasts .toast{pointer-events:auto;max-width:min(var(--modal),calc(100vw - var(--control-sm)))}
.toast.bad{background:var(--danger);color:var(--on-accent)}

/* Home */
.home section{margin-bottom:var(--space-7)}
.sec-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-3)}
.hgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--thumb),1fr));gap:var(--space-3)}
.hcard{display:grid;border:var(--line-1) solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;color:var(--text);text-decoration:none}
.hcard:hover{border-color:var(--border-input)}
.hgrid>li{position:relative}
.hcard-x{position:absolute;top:var(--space-2);right:var(--space-2);background:var(--surface);opacity:0}
.hgrid>li:hover .hcard-x,.hcard-x:focus-visible{opacity:1}
@media (hover:none){.hcard-x{opacity:1}}
.hcard .th{aspect-ratio:16/10;display:grid;place-items:center;background:var(--surface-sunken);overflow:hidden}
.hcard .th img{width:100%;height:100%;object-fit:cover}
.hcard .th .icon{width:var(--icon-tile);height:var(--icon-tile)}
.hcard .cap{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-3) var(--space-3) var(--space-1);font-weight:500;font-size:var(--text-sm)}
.hcard .cap .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard .sub{padding:0 var(--space-3) var(--space-3);color:var(--text-muted);font-size:var(--text-xs)}

/* Preview */
.preview-page{height:100%}
.preview-page .viewer{border-radius:0;display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);height:100%;min-height:0}
.vbar .pv-name{flex:1;min-width:0;font-size:var(--text-base);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbar .pv-ic .icon{width:var(--icon-md);height:var(--icon-md)}
.vbar .pv-share{background:transparent;color:var(--on-stage);border-color:var(--on-stage)}
.viewer .stage{position:relative;overflow:auto;min-height:0;align-content:center}
.pv-img{max-width:100%;max-height:calc(100vh - var(--preview-chrome));object-fit:contain;background:var(--surface)}
.pv-video{max-width:100%;max-height:calc(100vh - var(--preview-chrome))}
.pv-pdf{width:min(var(--viewer-max),100%);height:calc(100vh - var(--preview-chrome-pdf));border:0;background:var(--surface)}
.pv-alt{color:var(--on-stage)}
.pv-text{width:min(var(--viewer-max),100%);max-height:calc(100vh - var(--preview-chrome));overflow:auto;margin:0;padding:var(--space-4);background:var(--surface);color:var(--text);border-radius:var(--radius-md);font:var(--text-sm)/1.55 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.pv-zip{width:min(var(--reading-max),100%);color:var(--text);max-height:calc(100vh - var(--preview-chrome));overflow:auto}
.cant{color:var(--text);max-width:var(--narrow-max)}
.player audio{width:100%}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-raised);z-index:1}
@media (min-width:701px){.viewer .stage:has(> .pv-nav){padding-inline:calc(var(--control-md) + var(--space-3) * 2)}}
.pv-nav.prev{left:var(--space-3)}.pv-nav.next{right:var(--space-3)}

/* Versions, storage, settings */
.vlist li{grid-template-columns:var(--control-sm) minmax(0,1fr) auto auto}
.vlist form{display:inline}
.usage{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-usage),1fr));gap:var(--space-3);margin:0}
.usage div{border:var(--line-1) solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3)}
.usage dt{color:var(--text-muted);font-size:var(--text-sm)}.usage dd{margin:0;font-weight:700}
.meter.big{height:var(--meter-big)}
.settings .card{max-width:var(--reading-max);margin-bottom:var(--space-4)}
.row-form{display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap}
.row-form .field{flex:1;min-width:var(--field-min)}
fieldset.field{border:0;padding:0;margin:0}
.steps{display:grid;gap:var(--space-5);padding-left:var(--space-5);margin:0}
.steps li{display:grid;gap:var(--space-3)}
.qr{width:var(--qr);height:var(--qr);background:var(--on-accent);padding:var(--space-2);border-radius:var(--radius-md)}
.qr svg,.qr img,.qr canvas{width:100%;height:100%}
.key{font-family:var(--font-mono);overflow-wrap:anywhere}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-code),1fr));gap:var(--space-2);padding-left:var(--space-5);font-family:var(--font-mono)}

/* Public link */
.bare-main:has(.public-page){padding:0;display:block}
.public-page{min-height:100vh;background:var(--bg)}
.public-page .ph{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface);border-bottom:var(--line-1) solid var(--border)}
.public-page .pb{max-width:var(--content-max);margin:0 auto;padding:var(--space-5) var(--space-4);display:grid;gap:var(--space-4)}
.pub-head{display:flex;gap:var(--space-3);align-items:center}
.pub-name{overflow-wrap:anywhere}
.pub-viewer .stage{padding:var(--space-5) var(--space-2)}
.small-crumbs ol{font-size:var(--text-sm)}

/* Narrow screens */
.scrim{position:fixed;inset:0;background:var(--overlay);z-index:calc(var(--z-drawer) - 1)}
@media (max-width:1100px){.page.with-details{grid-template-columns:minmax(0,1fr)}.page.with-details>.details{position:fixed;right:0;top:var(--header);bottom:0;width:min(var(--details),100vw);z-index:var(--z-details);box-shadow:var(--shadow-pop);border-left:var(--line-1) solid var(--border)}}
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:inline-grid}
  .rail{display:flex;position:fixed;top:0;bottom:0;left:0;width:min(var(--sidebar),85vw);z-index:var(--z-drawer);transform:translateX(-105%);transition:transform var(--motion-base) var(--motion-ease);box-shadow:var(--shadow-pop)}
  .rail.open{transform:none}
  .main{grid-column:1}
}
@media (max-width:700px){
  .search{max-width:none}
  .search .icon-btn{display:none}
  .flashes{padding:var(--space-2) var(--space-2) 0}
  .show-sm{display:block;font-size:var(--text-xs)}
  .flist td:nth-child(2){width:auto}
  .flist .w-check{width:var(--control-sm);padding-right:0}
  .toolbar .tools .seg{display:none}
  .tray{left:0;right:0;width:auto}
  .pv-nav{display:none}
  .vlist li{grid-template-columns:var(--control-sm) minmax(0,1fr);row-gap:var(--space-2)}
  .vlist li>.row{grid-column:2}
  .public-page .ph .btn .icon+*{display:none}
}
@media (prefers-reduced-motion:reduce){.rail{transition:none}}
dialog.modal:not([open]){display:none}
.hgrid{align-items:start}
.hcard{grid-template-columns:minmax(0,1fr)}
.hcard .cap{min-width:0}

/* S32 notifications, S18 asking for access */
.notes{list-style:none;margin:0;padding:0}
.note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:start;padding:var(--space-3) var(--space-4);border-bottom:var(--line-1) solid var(--border)}
.note:last-child{border-bottom:0}
.note p{margin:0;overflow-wrap:anywhere}
.note-ic{color:var(--text-muted);padding-top:var(--space-1)}
.note.unread .note-ic{color:var(--accent)}
.note.unread .note-body>p:first-child{font-weight:var(--weight-lg)}
.ask-form{text-align:left;width:100%}
@media (max-width:640px){.note{grid-template-columns:auto minmax(0,1fr)}.note-act{grid-column:2}}

/* Folder colours (names stored, tokens per theme) */
.ft-folder.fc-red{color:var(--fc-red)}.ft-folder.fc-orange{color:var(--fc-orange)}.ft-folder.fc-green{color:var(--fc-green)}.ft-folder.fc-teal{color:var(--fc-teal)}.ft-folder.fc-blue{color:var(--fc-blue)}.ft-folder.fc-purple{color:var(--fc-purple)}.ft-folder.fc-grey{color:var(--fc-grey)}

/* Floating New on narrow screens */
.fab{display:none}
@media (max-width:960px){.fab{display:inline-flex;position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:var(--z-header);box-shadow:var(--shadow-raised);border-radius:var(--radius-pill);height:var(--control-lg)}}
select.select{max-width:100%;min-width:0}

/* 0.2.0: file requests, transfers */
.tab-links{margin-bottom:var(--space-4)}
.tab-links a{padding:var(--space-2) var(--space-3);color:var(--text-muted);font-weight:600;text-decoration:none;border-bottom:var(--line-2) solid transparent}
.tab-links a[aria-current=page]{color:var(--accent-strong);border-color:var(--accent)}
.tab-links a:focus-visible{outline:var(--line-2) solid var(--focus)}
.narrow-form{max-width:var(--form-max)}
.copy-row{display:flex;gap:var(--space-2)}
.copy-row .input{flex:1;min-width:0}
.pre{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.ellipsis-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.kv dd{overflow-wrap:anywhere;min-width:0}
.collect{max-width:var(--form-max);margin:0 auto;display:grid;gap:var(--space-4)}
.drop{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-4);border:var(--line-2) dashed var(--border-input);border-radius:var(--radius-lg);text-align:center;background:var(--surface)}
.drop.over{border-color:var(--accent);background:var(--accent-tint)}
.drop > .icon{width:var(--icon-tile);height:var(--icon-tile);color:var(--text-muted)}
.sendlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.sendlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-items:center;font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border:var(--line-1) solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.sendlist .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sendlist .st{color:var(--text-muted);font-size:var(--text-xs)}
.sendlist .st.bad{color:var(--danger)}.sendlist .st.ok{color:var(--success)}
.sendlist .meter{grid-column:1/-1}
.collect.wide{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:960px){.collect.wide{grid-template-columns:minmax(0,1fr)}}
.snippet{margin:var(--space-1) 0 0;white-space:normal;overflow-wrap:anywhere;color:var(--text-muted);font-size:var(--text-xs);line-height:var(--leading-xs);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:var(--form-max)}
.keys{list-style:none;margin:0;padding:0;border-top:var(--line-1) solid var(--border)}
.key-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:var(--line-1) solid var(--border);flex-wrap:wrap}
.key-what{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0}
.key-what strong{overflow-wrap:anywhere}
.key-what .meta{flex-basis:100%}
.steps{margin:0;padding-left:var(--space-5);display:grid;gap:var(--space-2)}
.flash.stack{flex-direction:column;align-items:stretch}

/* 0.3.0: comments, locks, AI summary, folder roll-back */
.link-btn{all:unset;cursor:pointer;color:var(--accent-strong);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-sm)}
.link-btn:hover{text-decoration:underline}.link-btn:focus-visible{outline:var(--line-2) solid var(--focus);outline-offset:var(--line-2)}
.link-btn.danger{color:var(--danger)}
.count{display:inline-grid;place-items:center;min-width:var(--icon-md);height:var(--icon-md);padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:700 var(--text-xs)/1 var(--font-sans)}
.preview-page .viewer:has(.lockbar){grid-template-rows:auto auto minmax(0,1fr)}
.lockbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--warning-tint);color:var(--text)}
.lockbar>.icon{color:var(--warning);flex:none}
.lockbar p{margin:0;min-width:0;overflow-wrap:anywhere}.lockbar .muted{display:block}
.vbar .pv-comments{background:transparent;color:var(--on-stage);border-color:var(--on-stage)}
.comments .threads,.comments .replies{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.comments .replies{margin-left:var(--space-5);margin-top:var(--space-2);padding-left:var(--space-3);border-left:var(--line-2) solid var(--border)}
.comments .thread{display:grid;gap:var(--space-1)}
.cmt{display:grid;gap:var(--space-1)}
.cmt header{gap:var(--space-2);align-items:center;flex-wrap:wrap}
.cmt-body{white-space:pre-wrap;overflow-wrap:anywhere}
.cmt.resolved .cmt-body{color:var(--text-muted)}
.cmt-act{gap:var(--space-3);flex-wrap:wrap}
.cmt-new textarea{resize:vertical;min-height:calc(var(--control-md) * 1.5)}
.ai-card{gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--accent-tint)}
.ai-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--text-sm)}
.ai-text:focus{outline:none}
.rw-graph{display:grid;grid-template-columns:repeat(90,minmax(0,1fr));align-items:end;gap:var(--line-1);height:calc(var(--thumb) * 1.2);padding:var(--space-2) 0;border-bottom:var(--line-1) solid var(--border)}
.rw-graph button{all:unset;cursor:pointer;height:100%;display:flex;align-items:flex-end;border-radius:var(--radius-sm)}
.rw-graph button span{display:block;width:100%;min-height:var(--line-2);background:var(--accent);border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.rw-graph button[data-n="0"] span{background:var(--border)}
.rw-graph button:hover span{background:var(--accent-strong)}
.rw-graph button[aria-pressed=true] span{background:var(--warning)}
.rw-graph button:focus-visible{outline:var(--line-2) solid var(--focus)}
.rw-axis{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--text-muted)}
.rw-changes{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1);max-height:calc(var(--thumb) * 4);overflow:auto}
.rw-changes label{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:var(--space-2);align-items:baseline;padding:var(--space-2);border-radius:var(--radius-sm);cursor:pointer}
.rw-changes label:hover{background:var(--row-hover)}
.rw-changes input:checked+time,.rw-changes input:checked~span{font-weight:600}
.rw-changes time{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rw-changes span{overflow-wrap:anywhere}
.rw-skipped{margin:0;padding-left:var(--space-5)}
@media (max-width:700px){.rw-graph{grid-template-columns:repeat(45,minmax(0,1fr))}.rw-graph button:nth-child(-n+45){display:none}}
.folder-links{list-style:none;margin:0;padding:var(--space-1);display:grid;gap:var(--space-1);border:var(--line-1) solid var(--border);border-radius:var(--radius-md);max-height:var(--list-max);overflow:auto}
.folder-links a{gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);color:var(--text);text-decoration:none;min-width:0}
.folder-links a:hover{background:var(--row-hover)}