/* themes: each sets a handful of base colours; the softer text, lines and hover shades are mixed from them */
:root{
  --bg:#F7F7F5; --surface:#FFFFFF; --sunk:#EEEEEB; --text:#090A0C; --accent:#B98433; --danger:#B8442F;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;
  --r:8px; --bar:56px; --row:60px; --tile:44px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  color-scheme:light;
}
:root,html[data-theme]{
  --text-2:color-mix(in srgb, var(--text) 60%, transparent);
  --text-3:color-mix(in srgb, var(--text) 36%, transparent);
  --line:color-mix(in srgb, var(--text) 8%, transparent);
  --line-2:color-mix(in srgb, var(--text) 15%, transparent);
  --hover:color-mix(in srgb, var(--text) 4%, transparent);
  --press:color-mix(in srgb, var(--text) 7.5%, transparent);
  --inv:var(--text); --inv-text:var(--bg);
  --accent-soft:color-mix(in srgb, var(--accent) 17%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 34%, transparent);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg:#090A0C; --surface:#111215; --sunk:#17181C; --text:#F7F7F5; --danger:#E0715C; color-scheme:dark; } }
html[data-theme="paper"]{ --bg:#F6F5F1; --surface:#FDFCFA; --sunk:#ECEAE4; --text:#1A1916; --accent:#8A6A36; --on:#FFFFFF; --danger:#A03A2A; color-scheme:light; }
html[data-theme="sand"]{ --bg:#EDE8DD; --surface:#F6F2EA; --sunk:#E1DBCE; --text:#24201A; --accent:#74282C; --on:#FFF8F3; --danger:#A5381F; color-scheme:light; }
html[data-theme="mist"]{ --bg:#E9ECEF; --surface:#F5F6F8; --sunk:#DCE0E5; --text:#171B20; --accent:#2C4760; --on:#F5F6F8; --danger:#A33A3A; color-scheme:light; }
html[data-theme="graphite"]{ --bg:#121315; --surface:#1B1C1F; --sunk:#25272B; --text:#ECEAE6; --accent:#CDB27A; --on:#1A1408; --danger:#E08072; color-scheme:dark; }
html[data-theme="midnight"]{ --bg:#0E1320; --surface:#161C2C; --sunk:#1F2637; --text:#E8E9EC; --accent:#D9CAA4; --on:#14120A; --danger:#E58878; color-scheme:dark; }
html[data-theme="forest"]{ --bg:#101612; --surface:#182019; --sunk:#222B24; --text:#E7E9E3; --accent:#BC9E60; --on:#141006; --danger:#E08472; color-scheme:dark; }
html[data-theme="ember"]{ --bg:#171110; --surface:#211916; --sunk:#2C221E; --text:#EDE6E1; --accent:#CC9A8C; --on:#1C100C; --danger:#E8796A; color-scheme:dark; }
html[data-theme="violet"]{ --bg:#15101A; --surface:#1F1825; --sunk:#2A2131; --text:#ECE7EE; --accent:#D4B68E; --on:#18110A; --danger:#E5818A; color-scheme:dark; }
html[data-theme="oled"]{ --bg:#000000; --surface:#0E0E0F; --sunk:#19191B; --text:#F5F5F3; --accent:#C8CCD2; --on:#0B0C0E; --danger:#E8806F; color-scheme:dark; }
/* larger text and a tighter list, from Settings */
html[data-text="large"] body{ font-size:17px; }
html[data-text="large"]{ --row:68px; }
html[data-density="compact"]{ --row:46px; --tile:34px; }

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ background:var(--bg); color:var(--text); font:15px/1.45 var(--font); -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; overflow:hidden; }
[hidden]{ display:none !important; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.muted{ color:var(--text-2); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:var(--s2); height:36px; padding:0 var(--s3); border-radius:var(--r);
  font-size:14px; font-weight:500; white-space:nowrap; transition:background .2s var(--ease), opacity .2s; }
.btn svg{ width:18px; height:18px; margin-left:-2px; }
.btn.primary{ background:var(--inv); color:var(--inv-text); }
.btn.primary:hover{ opacity:.88; }
.btn.quiet{ color:var(--text-2); }
.btn.quiet:hover{ background:var(--hover); color:var(--text); }
.btn.danger{ color:var(--danger); }
.btn.danger:hover{ background:var(--hover); }
.btn.wide{ width:100%; justify-content:center; height:44px; }
.btn:disabled{ opacity:.4; pointer-events:none; }
.icon-btn{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--r); color:var(--text-2); flex:none; }
.icon-btn:hover{ background:var(--hover); color:var(--text); }

/* app frame */
.app{ display:flex; flex-direction:column; height:100%; }
.bar{ height:calc(var(--bar) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) max(var(--s3), env(safe-area-inset-right)) 0 max(var(--s3), env(safe-area-inset-left));
  display:flex; align-items:center; gap:var(--s2); border-bottom:1px solid var(--line); flex:none; -webkit-app-region:drag; }
.bar button,.bar a,.bar input,.bar label{ -webkit-app-region:no-drag; }
html.desktop .bar{ padding-right:calc(138px + var(--s2)); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:-.01em; padding-right:var(--s2); }
.brand img{ width:22px; height:22px; border-radius:5px; }
/* the dev sandbox says so, so it is never mistaken for the real shelf */
html.sandbox .brand::after{ content:"Dev"; padding:2px 6px; border-radius:5px; border:1px solid var(--line-2); color:var(--text-2); font:500 11px var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.crumbs{ display:flex; align-items:center; min-width:0; flex:1; overflow:hidden; color:var(--text-2); font-size:14px; }
.crumbs a{ padding:6px 8px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.crumbs a:hover{ background:var(--hover); color:var(--text); }
.crumbs a:last-child{ color:var(--text); font-weight:500; }
.crumbs i{ width:1px; height:14px; background:var(--line-2); transform:rotate(18deg); margin:0 2px; flex:none; }
.here{ display:none; }
.tools{ display:flex; align-items:center; gap:var(--s1); margin-left:auto; }
.search{ display:flex; align-items:center; gap:var(--s2); height:36px; width:240px; padding:0 10px; margin-right:var(--s2);
  border-radius:var(--r); background:var(--sunk); color:var(--text-3); transition:width .3s var(--ease); }
.search:focus-within{ width:300px; color:var(--text-2); }
.search svg{ width:17px; height:17px; }
.search input{ flex:1; min-width:0; border:0; background:none; outline:none; font-size:14px; color:var(--text); }
.search input::placeholder{ color:var(--text-3); }
.search input::-webkit-search-cancel-button{ display:none; }
.search kbd{ font:11px var(--mono); color:var(--text-3); }
.only-narrow{ display:none; }

.main{ flex:1; min-width:0; overflow:auto; padding:var(--s2) max(var(--s3), env(safe-area-inset-right)) calc(var(--s6) + env(safe-area-inset-bottom)) max(var(--s3), env(safe-area-inset-left)); }
.list-head,.row{ display:grid; grid-template-columns:44px minmax(0,1fr) 110px 170px auto; align-items:center; gap:var(--s3); padding:0 var(--s2); }
.list-head{ height:36px; font-size:12px; color:var(--text-3); border-bottom:1px solid var(--line); }
.list{ list-style:none; margin:0; padding:0; }
.row{ height:60px; border-radius:var(--r); cursor:default; position:relative; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.row::after{ content:""; position:absolute; left:calc(44px + var(--s3) + var(--s2)); right:var(--s2); bottom:0; height:1px; background:var(--line); }
.row:hover{ background:var(--hover); }
.row:hover::after,.row:has(+ .row:hover)::after{ opacity:0; }
.row:active{ background:var(--press); }
.row .thumb{ width:44px; height:44px; border-radius:6px; display:grid; place-items:center; color:var(--text-2); background:var(--sunk); overflow:hidden; }
.row .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.row .thumb svg{ width:22px; height:22px; }
.row.dir .thumb{ background:none; color:var(--text); }
.row.dir .thumb svg{ width:26px; height:26px; stroke-width:1.3; }
.row .name{ min-width:0; }
.row .name b{ display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .name small{ display:none; color:var(--text-2); font-size:12.5px; }
.row .size,.row .date{ color:var(--text-2); font-size:13px; font-variant-numeric:tabular-nums; }
.row .more{ opacity:0; }
.row:hover .more,.row .more:focus-visible,.row.menu-open .more{ opacity:1; }
.row.menu-open{ background:var(--press); }
@media (hover:none){ .row .more{ opacity:1; } .row:hover{ background:none; } }

.empty{ display:grid; place-items:center; text-align:center; padding:18vh var(--s4) 0; color:var(--text-2); }
.empty svg{ width:40px; height:40px; stroke-width:1.1; color:var(--text-3); margin-bottom:var(--s3); }
.empty h2{ margin:0 0 var(--s1); font-size:17px; font-weight:600; color:var(--text); }
.empty p{ margin:0; max-width:320px; }

/* drop target */
.drop{ position:fixed; inset:var(--s2); z-index:30; border:1.5px dashed var(--line-2); border-radius:12px; background:color-mix(in srgb, var(--bg) 88%, transparent);
  display:grid; place-items:center; pointer-events:none; animation:fade .15s var(--ease); }
.drop-inner{ display:flex; flex-direction:column; align-items:center; gap:var(--s2); font-weight:500; }
.drop-inner svg{ width:32px; height:32px; }

/* menu */
.menu{ position:fixed; z-index:40; min-width:200px; padding:var(--s1); border-radius:10px; background:var(--surface); border:1px solid var(--line-2);
  box-shadow:0 8px 24px rgba(0,0,0,.12); animation:pop .14s var(--ease); }
.menu button{ display:flex; width:100%; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:6px; font-size:14px; text-align:left; }
.menu button:hover{ background:var(--hover); }
.menu button svg{ width:18px; height:18px; color:var(--text-2); }
.menu button.danger{ color:var(--danger); }
.menu button.danger svg{ color:currentColor; }
.menu hr{ border:0; height:1px; background:var(--line); margin:var(--s1) 0; }

/* dialog */
.dialog{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:var(--s3); background:rgba(0,0,0,.28); animation:fade .15s var(--ease); }
.dialog-card{ width:min(400px,100%); padding:var(--s4); border-radius:12px; background:var(--surface); border:1px solid var(--line); animation:pop .18s var(--ease); }
.dialog-card h2{ margin:0 0 var(--s3); font-size:16px; font-weight:600; }
.dialog-card input{ width:100%; height:44px; padding:0 12px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--bg); outline:none; }
.dialog-card input:focus{ border-color:var(--text-3); }
.dialog-actions{ display:flex; justify-content:flex-end; gap:var(--s2); margin-top:var(--s4); }

/* viewer */
.viewer{ position:fixed; inset:0; z-index:35; background:#090A0C; color:#F7F7F5; display:flex; flex-direction:column; animation:fade .18s var(--ease); }
.viewer .icon-btn{ color:rgba(247,247,245,.7); }
.viewer .icon-btn:hover{ background:rgba(247,247,245,.08); color:#F7F7F5; }
.viewer-bar{ height:calc(var(--bar) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--s3) 0; display:flex; align-items:center; gap:var(--s3); flex:none; -webkit-app-region:drag; }
.viewer-bar > *{ -webkit-app-region:no-drag; }
html.desktop .viewer-bar{ padding-right:calc(138px + var(--s2)); }
.viewer-title{ flex:1; min-width:0; text-align:center; }
.viewer-title span{ display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.viewer-title small{ color:rgba(247,247,245,.5); font-size:12px; }
.viewer-stage{ flex:1; min-height:0; display:grid; place-items:center; padding:0 var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); touch-action:pan-y pinch-zoom; }
.viewer-stage img,.viewer-stage video{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.viewer-stage audio{ width:min(480px,100%); }
.viewer-stage iframe{ width:100%; height:100%; border:0; background:#fff; border-radius:6px; }
.viewer-stage pre{ width:min(900px,100%); height:100%; overflow:auto; margin:0; padding:var(--s4); border-radius:8px; background:#111215; font:13px/1.6 var(--mono); white-space:pre-wrap; word-break:break-word; }
.viewer-file{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); text-align:center; }
.viewer-file svg{ width:56px; height:56px; stroke-width:1; color:rgba(247,247,245,.5); }
.viewer-file p{ margin:0; color:rgba(247,247,245,.6); }
.viewer-file .btn.primary{ background:#F7F7F5; color:#090A0C; }
.viewer-nav{ position:absolute; top:50%; width:44px; height:44px; margin-top:-22px; display:grid; place-items:center; border-radius:50%; color:rgba(247,247,245,.75); background:rgba(247,247,245,.06); }
.viewer-nav:hover{ background:rgba(247,247,245,.12); color:#fff; }
.viewer-nav.prev{ left:var(--s3); } .viewer-nav.next{ right:var(--s3); }
@media (hover:none){ .viewer-nav{ display:none; } }

/* devices sheet */
.scrim{ position:fixed; inset:0; z-index:44; background:rgba(0,0,0,.28); animation:fade .2s var(--ease); }
.sheet{ position:fixed; z-index:45; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--surface); border-left:1px solid var(--line);
  display:flex; flex-direction:column; animation:slide .32s var(--ease); }
.sheet-head{ height:calc(var(--bar) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--s3) 0 var(--s4); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); flex:none; }
html.desktop .sheet{ top:var(--bar); }
html.desktop .sheet-head{ height:var(--bar); padding-top:0; }
.sheet-head h2{ margin:0; font-size:16px; font-weight:600; }
.sheet-body{ flex:1; overflow:auto; padding:var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); }
.sec{ margin-bottom:var(--s5); }
.sec h3{ margin:0 0 var(--s3); font-size:12px; font-weight:500; color:var(--text-3); letter-spacing:.02em; text-transform:uppercase; }
.connect{ display:grid; grid-template-columns:132px 1fr; gap:var(--s4); align-items:center; }
.qr{ width:132px; height:132px; padding:10px; border-radius:10px; background:#fff; color:#000; }
.qr img{ width:100%; height:100%; display:block; image-rendering:pixelated; }
.code{ font:500 30px/1 var(--mono); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.code-sub{ margin-top:var(--s2); font-size:13px; color:var(--text-2); }
.code-sub button{ color:var(--text); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.steps{ margin:var(--s4) 0 0; padding:0; list-style:none; counter-reset:s; font-size:14px; color:var(--text-2); }
.steps li{ counter-increment:s; display:grid; grid-template-columns:22px 1fr; gap:var(--s2); margin-bottom:var(--s2); }
.steps li::before{ content:counter(s); font:12px/22px var(--mono); color:var(--text-3); }
.steps b{ color:var(--text); font-weight:500; }
.addr{ font:13px var(--mono); color:var(--text); word-break:break-all; }
.note{ padding:var(--s3); border-radius:var(--r); background:var(--sunk); font-size:14px; color:var(--text-2); }
.note b{ color:var(--text); font-weight:500; }
.note p{ margin:0 0 var(--s2); } .note p:last-child{ margin:0; }
.note a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.status{ display:flex; align-items:center; gap:var(--s2); font-size:14px; }
.status i{ width:7px; height:7px; border-radius:50%; background:var(--text-3); }
.status.on i{ background:#3F9D6A; }
.dev{ display:flex; align-items:center; gap:var(--s3); padding:12px 0; border-bottom:1px solid var(--line); }
.dev:last-child{ border-bottom:0; }
.dev svg{ color:var(--text-2); }
.dev div{ flex:1; min-width:0; }
.dev b{ display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev small{ color:var(--text-2); font-size:12.5px; }
.dev .btn{ height:32px; padding:0 10px; }

/* uploads + toast */
.uploads,.toast{ position:fixed; z-index:38; left:50%; transform:translateX(-50%); bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  border-radius:10px; background:var(--inv); color:var(--inv-text); font-size:14px; animation:rise .25s var(--ease); }
.uploads{ width:min(360px, calc(100% - 32px)); padding:12px var(--s3); }
.uploads-text{ display:flex; justify-content:space-between; gap:var(--s3); }
.uploads-text span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uploads-track{ height:2px; margin-top:10px; background:color-mix(in srgb, var(--inv-text) 18%, transparent); border-radius:2px; overflow:hidden; }
.uploads-track i{ display:block; height:100%; width:0; background:var(--inv-text); transition:width .2s linear; }
.toast{ display:flex; align-items:center; gap:var(--s3); padding:0 6px 0 var(--s3); height:44px; max-width:calc(100% - 32px); white-space:nowrap; }
.toast #toastText{ overflow:hidden; text-overflow:ellipsis; }
.toast:not(:has(.toast-btn:not([hidden]))){ padding-right:var(--s3); }
.toast-btn{ height:32px; padding:0 12px; border-radius:6px; font-weight:600; }
.toast-btn:hover{ background:color-mix(in srgb, var(--inv-text) 10%, transparent); }
.uploads:not([hidden]) ~ .toast{ bottom:calc(var(--s4) + 72px + env(safe-area-inset-bottom)); }

/* pairing */
.pair{ position:fixed; inset:0; display:grid; place-items:center; padding:var(--s4); overflow:auto; }
.pair-card{ width:min(360px,100%); display:flex; flex-direction:column; align-items:center; text-align:center; }
.pair-mark{ width:56px; height:56px; border-radius:13px; margin-bottom:var(--s4); }
.pair h1{ margin:0 0 var(--s2); font-size:22px; font-weight:600; letter-spacing:-.015em; }
.pair p{ margin:0 0 var(--s4); }
.code-input{ width:100%; height:64px; text-align:center; font:500 30px var(--mono); letter-spacing:.12em; border-radius:10px;
  border:1px solid var(--line-2); background:var(--surface); outline:none; margin-bottom:var(--s3); }
.code-input:focus{ border-color:var(--text-3); }
.code-input::placeholder{ color:var(--text-3); opacity:.6; }
.field{ width:100%; text-align:left; display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s3); }
.field span{ font-size:13px; color:var(--text-2); }
.field input{ height:44px; padding:0 12px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--surface); outline:none; }
.field input:focus{ border-color:var(--text-3); }
.pair-error{ min-height:20px; margin:0 0 var(--s2) !important; color:var(--danger); font-size:14px; }

@keyframes fade{ from{ opacity:0; } }
@keyframes pop{ from{ opacity:0; transform:scale(.97); } }
@keyframes rise{ from{ opacity:0; transform:translate(-50%, 8px); } }
@keyframes slide{ from{ transform:translateX(24px); opacity:0; } }

/* places: sidebar on a computer, tab bar on a phone */
.body{ flex:1; min-height:0; display:flex; }
.side{ width:216px; flex:none; padding:var(--s3) var(--s2); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.side a{ display:flex; align-items:center; gap:12px; height:36px; padding:0 12px; border-radius:var(--r); color:var(--text-2); font-size:14px; }
.side a:hover{ background:var(--hover); color:var(--text); }
.side a.on{ background:var(--press); color:var(--text); font-weight:500; }
.side a svg{ width:19px; height:19px; }
.space{ margin-top:auto; padding:var(--s3) 12px var(--s1); font-size:12px; color:var(--text-3); }
.space.wide{ margin:0; padding:0; font-size:14px; color:var(--text-2); }
.space-track{ height:3px; border-radius:2px; background:var(--sunk); overflow:hidden; margin-bottom:var(--s2); }
.space-track i{ display:block; height:100%; background:var(--text-2); }
.tabs{ display:none; }
.drop-on{ background:var(--press) !important; box-shadow:inset 0 0 0 1.5px var(--text-3); border-radius:var(--r); }

/* selection */
.selbar{ position:absolute; inset:0; padding:env(safe-area-inset-top) max(var(--s3), env(safe-area-inset-right)) 0 max(var(--s2), env(safe-area-inset-left));
  display:flex; align-items:center; gap:var(--s2); background:var(--bg); z-index:3; animation:fade .15s var(--ease); -webkit-app-region:drag; }
.selbar > *{ -webkit-app-region:no-drag; }
html.desktop .selbar{ padding-right:calc(138px + var(--s2)); }
.selbar b{ font-weight:600; font-size:15px; margin-right:auto; }
.sel-actions{ display:flex; gap:var(--s1); }
.bar{ position:relative; }
.row .thumb{ position:relative; }
.row .thumb > svg{ position:relative; }
.row .thumb.has > svg{ position:absolute; inset:0; margin:auto; }
.row .thumb.has img{ position:relative; z-index:1; }
.check{ position:absolute; z-index:2; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9); background:rgba(0,0,0,.25); color:transparent; opacity:0; transition:opacity .15s; }
.check svg{ width:14px; height:14px; stroke-width:2.2; }
.row .check{ left:-6px; top:-6px; border-color:var(--line-2); background:var(--surface); }
.row:hover .check,.selecting .check{ opacity:1; }
.sel .check{ opacity:1; background:var(--inv) !important; border-color:var(--inv) !important; color:var(--inv-text); }
.row.sel{ background:var(--press); }
.row.sel::after{ opacity:0; }
.row em{ font-style:normal; }
.row .restore{ height:32px; padding:0 12px; }
.empty.foot{ padding:var(--s4) 0 0; display:flex; justify-content:center; }

/* photos */
.grid h3{ margin:var(--s4) 0 var(--s2); font-size:15px; font-weight:600; letter-spacing:-.01em; }
.grid h3:first-child{ margin-top:var(--s2); }
.tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:3px; }
.tile{ position:relative; aspect-ratio:1; background:var(--sunk); overflow:hidden; display:block; width:100%; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s; }
.tile:hover img{ opacity:.92; }
.tile .badge{ position:absolute; left:6px; bottom:6px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; display:grid; place-items:center; }
.tile .badge svg{ width:12px; height:12px; margin-left:1px; }
.tile .check{ right:6px; top:6px; }
.tile:hover .check{ opacity:1; }
.tile.sel img{ transform:scale(.9); border-radius:4px; transition:transform .2s var(--ease); }

/* move dialog */
.mover{ width:min(440px,100%); }
.mover-path{ display:flex; align-items:center; gap:var(--s2); margin:-8px 0 var(--s2) -8px; font-size:14px; color:var(--text-2); min-width:0; }
.mover-path span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mover-path .icon-btn:disabled{ opacity:.3; }
.mover-list{ list-style:none; margin:0; padding:0; height:min(300px, 45vh); overflow:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mover-list button{ display:flex; align-items:center; gap:12px; width:100%; height:44px; padding:0 var(--s2); border-radius:6px; text-align:left; font-size:14px; }
.mover-list button:hover{ background:var(--hover); }
.mover-empty{ padding:var(--s4) var(--s2); color:var(--text-3); font-size:14px; }

/* viewer: loading, photos, documents, sheets, music */
.viewer-tools{ display:flex; align-items:center; }
.zoom-pct{ min-width:52px; height:36px; font:12px var(--mono); color:rgba(247,247,245,.6); border-radius:var(--r); }
.zoom-pct:hover{ background:rgba(247,247,245,.08); color:#F7F7F5; }
.viewer-wait{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; width:min(340px,80%); }
.viewer-wait p{ margin:0; font-weight:500; }
.viewer-wait small{ color:rgba(247,247,245,.5); font-size:12.5px; }
.wait-track{ position:relative; width:100%; height:2px; border-radius:2px; overflow:hidden; background:rgba(247,247,245,.12); }
.wait-track i{ position:absolute; left:0; top:0; bottom:0; width:30%; background:#F7F7F5; animation:indet 1.3s var(--ease) infinite; }
.wait-track.known i{ animation:none; transition:width .5s var(--ease); }
@keyframes indet{ from{ transform:translateX(-100%); } to{ transform:translateX(340%); } }
.viewer-stage.zoom{ padding:0; overflow:hidden; touch-action:none; cursor:zoom-in; }
.viewer-stage.zoom.zoomed{ cursor:grab; }
.viewer-stage.zoom img{ transform-origin:center; user-select:none; -webkit-user-drag:none; }
.viewer-stage.doc{ display:block; overflow:auto; padding:var(--s2) 0 calc(var(--s6) + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; }
.pages{ margin:0 auto; display:flex; flex-direction:column; gap:var(--s3); }
.page{ width:100%; background:#fff; border-radius:2px; overflow:hidden; }
.page canvas{ width:100%; height:100%; display:block; }
.viewer-stage.table{ display:flex; flex-direction:column; padding:0; place-items:stretch; }
.sheet-scroll{ flex:1; min-height:0; overflow:auto; }
.sheet-scroll table{ border-collapse:separate; border-spacing:0; font-size:13px; }
.sheet-scroll th,.sheet-scroll td{ border-right:1px solid rgba(247,247,245,.08); border-bottom:1px solid rgba(247,247,245,.08); padding:6px 10px; white-space:nowrap; max-width:360px; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.sheet-scroll td.n{ text-align:right; font-variant-numeric:tabular-nums; }
.sheet-scroll thead th{ position:sticky; top:0; z-index:2; background:#17181C; color:rgba(247,247,245,.5); font-weight:500; font-size:11.5px; text-align:center; }
.sheet-scroll tbody th{ position:sticky; left:0; z-index:1; background:#111215; color:rgba(247,247,245,.4); font-weight:400; font-size:11.5px; text-align:right; }
.sheet-scroll thead th:first-child{ left:0; z-index:3; }
.sheet-more{ margin:0; padding:var(--s3); color:rgba(247,247,245,.5); font-size:13px; }
.sheet-tabs{ flex:none; display:flex; gap:2px; overflow-x:auto; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); border-top:1px solid rgba(247,247,245,.08); }
.sheet-tabs button{ height:32px; padding:0 12px; border-radius:6px; font-size:13px; white-space:nowrap; color:rgba(247,247,245,.6); }
.sheet-tabs button.on{ background:rgba(247,247,245,.1); color:#F7F7F5; }
.audio-card{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); width:min(360px,100%); text-align:center; }
.cover{ display:grid; place-items:center; width:min(280px,70vw); aspect-ratio:1; border-radius:10px; overflow:hidden; background:#17181C; }
.cover > *{ grid-area:1/1; }
.cover svg{ width:56px; height:56px; stroke-width:1; color:rgba(247,247,245,.4); }
.cover img{ width:100%; height:100%; object-fit:cover; }
.audio-card b{ font-weight:500; word-break:break-word; }
.audio-card audio{ width:100%; }
.viewer[data-mode="pdf"] .viewer-nav,.viewer[data-mode="doc"] .viewer-nav,.viewer[data-mode="slides"] .viewer-nav,.viewer[data-mode="sheet"] .viewer-nav{ top:auto; bottom:var(--s4); }

/* devices extras */
.fine{ margin:var(--s3) 0 0; font-size:13px; color:var(--text-2); }
.auth-confirm{ display:flex; gap:var(--s2); margin-top:var(--s2); }
.auth-confirm input{ flex:1; min-width:0; height:40px; padding:0 12px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--bg); font:500 18px var(--mono); letter-spacing:.1em; outline:none; }
.btn .icon-btn{ display:none; }

/* phones and narrow windows */
@media (max-width:720px){
  :root{ --bar:52px; }
  .brand span,.crumbs,.hide-narrow,.search kbd{ display:none !important; }
  .brand{ padding-right:0; }
  .here{ display:block; flex:1; min-width:0; margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .back:not([hidden]) + .brand{ display:none; }
  .only-narrow{ display:inline-grid; }
  .search{ display:none; position:absolute; left:var(--s3); right:var(--s3); width:auto !important; margin:0; z-index:2; height:40px; }
  .app.searching .search{ display:flex; top:calc(env(safe-area-inset-top) + 8px); }
  .bar{ position:relative; }
  #uploadBtn{ width:36px; padding:0; justify-content:center; }
  #uploadBtn span{ display:none; }
  #uploadBtn svg{ margin:0; }
  :root{ --row:64px; }
  html[data-text="large"]{ --row:72px; }
  html[data-density="compact"]{ --row:50px; }
  .list-head,.row{ grid-template-columns:var(--tile) minmax(0,1fr) 36px !important; gap:12px; padding:0 var(--s1); }
  .row::after{ left:calc(44px + 12px + 4px); right:var(--s1); }
  .row .size,.row .date{ display:none; }
  .row .name small{ display:block; }
  .main{ padding-top:var(--s1); }
  .connect{ grid-template-columns:1fr; justify-items:start; }
  .sheet{ border-left:0; }
  .side{ display:none; }
  .tabs{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20; padding:6px max(var(--s2), env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(var(--s2), env(safe-area-inset-left));
    background:var(--bg); border-top:1px solid var(--line); }
  .tabs a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0; font-size:10.5px; font-weight:500; color:var(--text-3); }
  .tabs a svg{ width:24px; height:24px; }
  .tabs a.on{ color:var(--text); }
  .main{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .uploads,.toast{ bottom:calc(76px + env(safe-area-inset-bottom)); }
  .uploads:not([hidden]) ~ .toast{ bottom:calc(148px + env(safe-area-inset-bottom)); }
  .tiles{ grid-template-columns:repeat(3, 1fr); gap:2px; margin:0 calc(-1 * max(var(--s3), env(safe-area-inset-left))); }
  .grid h3{ font-size:17px; }
  .sel-actions .btn{ width:40px; padding:0; justify-content:center; }
  .sel-actions .btn span{ display:none; }
  .sel-actions .btn svg{ margin:0; }
  .row .check{ opacity:0; }
  .selecting .row .check{ opacity:1; }
  .row .restore{ padding:0 10px; }
  .list-head,.row.deleted{ grid-template-columns:var(--tile) minmax(0,1fr) auto !important; }
}
.empty.foot svg{ width:18px; height:18px; margin:0; color:currentColor; stroke-width:1.5; }

/* file type labels: the extension sits in the icon tile, or as a small tag on a thumbnail */
.row .thumb .ext{ position:absolute; z-index:2; left:0; right:0; bottom:5px; text-align:center; font:600 8.5px/1 var(--mono); letter-spacing:.03em; color:var(--text-2); pointer-events:none; }
.row .thumb:not(.has),.row .thumb.nothumb{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.row .thumb:not(.has) > svg,.row .thumb.nothumb > svg{ position:static; margin:0; width:18px; height:18px; }
.row .thumb:not(.has) .ext,.row .thumb.nothumb .ext{ position:static; font-size:9px; }
.row .thumb.has:not(.nothumb) .ext{ left:auto; right:2px; bottom:2px; padding:2px 3px; border-radius:3px; background:rgba(9,10,12,.72); color:#F7F7F5 !important; font-size:7.5px; }
.k-doc{ color:#4F7FD8 !important; }
.k-sheet{ color:#3E9A64 !important; }
.k-slides{ color:#D7783F !important; }
.k-pdf{ color:#D2533F !important; }
.k-audio{ color:#9A6CD4 !important; }
.k-video{ color:#C9963F !important; }
.k-archive{ color:#9C8A62 !important; }
.row .thumb:not(.has) > svg{ color:var(--text-3); }

.tag{ font:600 10.5px/1 var(--mono); letter-spacing:.03em; color:var(--text-2); }

/* sidebar foot: storage and Settings */
.side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:var(--s2); }
.side-foot .space{ margin:0; padding:0 12px; }
.side-settings{ display:flex; align-items:center; gap:12px; height:36px; padding:0 12px; border-radius:var(--r); color:var(--text-2); font-size:14px; }
.side-settings:hover{ background:var(--hover); color:var(--text); }
.side-settings svg{ width:19px; height:19px; }
.side a.on svg,.tabs a.on svg{ color:var(--accent); }

/* search results found inside a document */
.row .snip{ display:block; color:var(--text-2); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .snip mark{ background:none; color:var(--text); font-weight:600; }
.row.has-snip{ height:calc(var(--row) + 14px); }
.row .star-mark{ display:inline-block; width:12px; height:12px; margin-left:6px; vertical-align:-1px; color:var(--accent); }
.row .star-mark svg{ width:12px; height:12px; fill:currentColor; stroke:none; }

/* Photos: filters and "on this day" */
.chips{ display:flex; gap:var(--s1); padding:var(--s2) 0 var(--s1); overflow-x:auto; }
.chips button{ height:32px; padding:0 14px; border-radius:16px; font-size:13.5px; color:var(--text-2); background:var(--sunk); white-space:nowrap; }
.chips button.on{ background:var(--inv); color:var(--inv-text); }
.memories{ margin:var(--s3) 0 var(--s2); }
.memories h3{ margin:0 0 var(--s2); font-size:15px; font-weight:600; }
.memories h3 small{ color:var(--text-2); font-weight:400; margin-left:6px; }
.memory-row{ display:flex; gap:3px; overflow-x:auto; }
.memory-row .tile{ flex:none; width:120px; border-radius:6px; }

/* PC import progress */
.importing{ position:fixed; z-index:37; right:var(--s4); bottom:calc(var(--s4) + env(safe-area-inset-bottom)); width:min(380px, calc(100% - 32px)); padding:14px var(--s3);
  border-radius:12px; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 8px 24px rgba(0,0,0,.14); font-size:14px; animation:rise2 .25s var(--ease); }
.importing b{ font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.importing small{ display:block; color:var(--text-2); font-size:12.5px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.importing .bar2{ height:3px; border-radius:2px; background:var(--sunk); overflow:hidden; margin:10px 0 2px; }
.importing .bar2 i{ display:block; height:100%; background:var(--accent); transition:width .6s var(--ease); }
.importing .imp-actions{ display:flex; justify-content:flex-end; margin:6px -8px -6px 0; }
.importing .imp-actions .btn{ height:30px; padding:0 10px; font-size:13px; }
@keyframes rise2{ from{ opacity:0; transform:translateY(8px); } }

/* settings */
.settings .sheet-body{ padding-top:var(--s3); }
.set-group{ margin-bottom:var(--s5); }
.set-group > h3{ margin:0 0 var(--s2); font-size:12px; font-weight:500; color:var(--text-3); letter-spacing:.02em; text-transform:uppercase; }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:12px 0; border-bottom:1px solid var(--line); }
.set-row:last-child{ border-bottom:0; }
.set-row > div:first-child{ min-width:0; }
.set-row b{ display:block; font-weight:500; font-size:14.5px; }
.set-row small{ display:block; color:var(--text-2); font-size:12.5px; margin-top:2px; }
.set-row.stack{ flex-direction:column; align-items:stretch; }
.set-loading{ margin:0 0 var(--s5); }
@media (max-width:420px){ .set-row:has(.seg button:nth-child(3)){ flex-direction:column; align-items:flex-start; gap:var(--s2); } }
.seg{ display:inline-flex; flex:none; padding:2px; border-radius:9px; background:var(--sunk); }
.seg button{ height:30px; padding:0 12px; border-radius:7px; font-size:13px; color:var(--text-2); white-space:nowrap; }
.seg button.on{ background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.switch{ position:relative; flex:none; width:44px; height:26px; border-radius:13px; background:var(--line-2); transition:background .2s var(--ease); }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .25s var(--ease); }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch[aria-checked="true"]::after{ transform:translateX(18px); }
.themes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s2); margin-top:var(--s2); }
.theme-swatch{ position:relative; border-radius:10px; padding:10px; text-align:left; border:1.5px solid transparent; background:var(--sw-bg); color:var(--sw-text); min-height:74px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sw-text) 12%, transparent); }
.theme-swatch.on{ border-color:var(--accent); }
.theme-swatch i{ display:flex; gap:4px; }
.theme-swatch i span{ width:12px; height:12px; border-radius:50%; }
.theme-swatch b{ font-size:12.5px; font-weight:500; }
.field-row{ display:flex; gap:var(--s2); margin-top:var(--s2); }
.field-row input{ flex:1; min-width:0; height:36px; padding:0 10px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--bg); font-size:13.5px; outline:none; }
.bars{ display:flex; flex-direction:column; gap:10px; margin-top:var(--s2); }
.bars div{ display:grid; grid-template-columns:90px 1fr 70px; align-items:center; gap:10px; font-size:13px; }
.bars div span:last-child{ text-align:right; color:var(--text-2); font-variant-numeric:tabular-nums; }
.bars em{ height:6px; border-radius:3px; background:var(--sunk); overflow:hidden; }
.bars em i{ display:block; height:100%; background:var(--accent); border-radius:3px; }
.log{ list-style:none; margin:var(--s2) 0 0; padding:0; max-height:280px; overflow:auto; }
.log li{ display:grid; grid-template-columns:96px 1fr; gap:var(--s2); padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.log li span{ color:var(--text-3); font-variant-numeric:tabular-nums; }
.log li.warning{ color:var(--danger); }
.keybox{ margin-top:var(--s2); padding:12px; border-radius:var(--r); background:var(--sunk); font:12.5px/1.6 var(--mono); word-break:break-all; user-select:all; }
.steps.tight li{ margin-bottom:6px; }

/* dialogs with a list (versions, duplicates) */
.panel-card{ width:min(560px,100%); max-height:min(80vh, 720px); display:flex; flex-direction:column; padding:var(--s3) var(--s4) var(--s4); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s2); }
.panel-head h2{ margin:0 !important; }
.panel-body{ overflow:auto; margin:0 calc(-1 * var(--s2)); padding:0 var(--s2); }
.vrow{ display:flex; align-items:center; gap:var(--s3); padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.vrow div{ flex:1; min-width:0; }
.vrow small{ display:block; color:var(--text-2); font-size:12.5px; }
.vrow .btn{ height:32px; padding:0 10px; }
.dup{ padding:var(--s2) 0 var(--s3); border-bottom:1px solid var(--line); }
.dup h4{ margin:0 0 6px; font-size:13px; font-weight:500; color:var(--text-2); }
.dup .vrow{ border:0; padding:6px 0; }

/* everything keyed off the row height variables */
.row{ height:var(--row); }
.row .thumb{ width:var(--tile); height:var(--tile); }
.list-head,.row{ grid-template-columns:var(--tile) minmax(0,1fr) 110px 170px auto; }
html[data-density="compact"] .row .name small{ display:none !important; }
html[data-density="compact"] .row .thumb .ext{ display:none; }
html[data-density="compact"] .row .thumb:not(.has) > svg{ margin:0; }

/* selection circles: whole, easy to hit, never clipped by the icon tile */
.row .thumb{ overflow:visible; }
.row .thumb img{ border-radius:6px; }
.row .check{ left:-9px; top:-9px; width:24px; height:24px; border-width:1.5px; }
.row .check::before{ content:""; position:absolute; inset:-8px; }
.tile .check{ width:24px; height:24px; right:6px; top:6px; }
.check svg{ width:15px; height:15px; }
html.plain-types .k-doc,html.plain-types .k-sheet,html.plain-types .k-slides,html.plain-types .k-pdf,html.plain-types .k-audio,html.plain-types .k-video,html.plain-types .k-archive{ color:var(--text-2) !important; }

/* ---- iPhone: its own layout, closer to how iOS apps look and behave ---- */
.big-title,.ptr,.tab-settings{ display:none; }
html.iphone body{ overscroll-behavior:none; touch-action:manipulation; }
/* iOS zooms into any field with text under 16 px; at 16 it stays put */
html.iphone input{ font-size:16px !important; }
html.iphone .code-input{ font-size:30px !important; }
html.iphone .main{ overscroll-behavior-y:none; position:relative; }

/* the bar: back, the name (once the large title has scrolled away), search and add */
html.iphone #settingsBtn,html.iphone #devicesBtn{ display:none; }
html.iphone .here{ opacity:0; transition:opacity .2s var(--ease); text-align:center; font-size:17px; }
html.iphone .app.titled .here,html.iphone .app.searching .here{ opacity:1; }
html.iphone .bar{ border-bottom-color:transparent; transition:border-color .2s; }
html.iphone .app.titled .bar{ border-bottom-color:var(--line); }
html.iphone .big-title{ display:block; margin:var(--s1) 0 var(--s2); padding:0 var(--s1); font-size:32px; line-height:1.15; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.iphone .app[data-view="search"] .big-title{ display:none; }

/* pull to refresh */
html.iphone .ptr{ display:grid; place-items:center; position:absolute; left:50%; top:-36px; width:32px; height:32px; margin-left:-16px; border-radius:50%;
  color:var(--text-2); opacity:0; pointer-events:none; transition:transform .25s var(--ease), opacity .2s; }
html.iphone .main:active .ptr{ transition:none; }
html.iphone .ptr svg{ width:20px; height:20px; transition:transform .2s var(--ease); }
html.iphone .ptr.ready svg{ transform:rotate(180deg); }
html.iphone .ptr.busy{ transform:translateY(56px) !important; opacity:1 !important; }
html.iphone .ptr.busy svg{ display:none; }
html.iphone .ptr.busy::after{ content:""; width:18px; height:18px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--text-2); animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* tab bar: Files, Recent, Photos, Starred, Settings; translucent like the system's own */
html.iphone .tabs{ display:flex; z-index:48; background:color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px); }
html.iphone .tabs a[data-view="deleted"]{ display:none; }
html.iphone .tab-settings{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0; font-size:10.5px; font-weight:500; color:var(--text-3); }
html.iphone .tab-settings svg{ width:24px; height:24px; }
html.iphone .tab-settings.on{ color:var(--text); }
html.iphone .tab-settings.on svg{ color:var(--accent); }

/* Settings and Devices are whole pages above the tab bar, not side panels */
html.iphone .sheet{ left:0; width:100%; border:0; bottom:0; padding-bottom:calc(58px + env(safe-area-inset-bottom)); background:var(--bg); animation:fade .18s var(--ease); }
html.iphone #sheet{ z-index:47; animation:push .3s var(--ease); }
html.iphone .sheet-head{ position:relative; border-bottom-color:transparent; }
html.iphone .sheet-head h2{ position:absolute; left:50%; transform:translateX(-50%); font-size:17px; }
html.iphone #settingsClose{ display:none; }
html.iphone .back-link,html.iphone .back{ display:inline-flex; align-items:center; white-space:nowrap; }
html.iphone .viewer{ z-index:52; }
html.iphone .bar .back.icon-btn{ width:auto; max-width:34%; gap:0; padding:0 6px 0 0; margin-left:-8px; color:var(--accent); font-size:17px; }
html.iphone .back span{ overflow:hidden; text-overflow:ellipsis; }
html.iphone .back svg{ width:24px; height:24px; }
html.iphone .back-link{ width:auto; gap:2px; padding:0 8px 0 2px; margin-left:-10px; color:var(--accent); font-size:17px; }
html.iphone .sheet-head:has(.back-link){ flex-direction:row-reverse; justify-content:flex-end; }
html.iphone .sheet-body{ padding-bottom:var(--s5); }
html.iphone .scrim{ display:none; }
@keyframes push{ from{ transform:translateX(30%); opacity:0; } }
.set-links{ display:flex; flex-direction:column; border-radius:12px; background:var(--surface); overflow:hidden; }
.set-links button{ display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 12px 8px 14px; text-align:left; }
.set-links button + button{ border-top:1px solid var(--line); }
.set-links button:active{ background:var(--press); }
.set-links span{ flex:1; min-width:0; }
.set-links b{ display:block; font-weight:500; font-size:16px; }
.set-links small{ display:block; color:var(--text-2); font-size:13px; }
.set-links svg{ color:var(--text-2); }
.set-links svg:last-child{ width:16px; height:16px; color:var(--text-3); }

/* action sheets: menus come up from the bottom, with large rows and Cancel apart */
html.iphone .menu{ left:8px !important; right:8px; top:auto !important; bottom:calc(8px + env(safe-area-inset-bottom)); min-width:0; padding:0; border:0; border-radius:14px;
  background:transparent; box-shadow:0 0 0 100vmax rgba(0,0,0,.32); display:flex; flex-direction:column; gap:8px; animation:sheetup .3s var(--ease); z-index:60; }
html.iphone .menu > :not(.menu-cancel){ background:var(--surface); }
html.iphone .menu-title{ padding:14px 16px 12px; border-radius:14px 14px 0 0; text-align:center; border-bottom:1px solid var(--line); }
html.iphone .menu-title b{ display:block; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.iphone .menu-title small{ color:var(--text-2); font-size:12.5px; }
html.iphone .menu button{ height:54px; padding:0 18px; gap:14px; border-radius:0; font-size:17px; margin:0; }
html.iphone .menu button + button:not(.menu-cancel),html.iphone .menu hr + button{ border-top:1px solid var(--line); }
html.iphone .menu > button:first-child{ border-radius:14px 14px 0 0; }
html.iphone .menu > :nth-last-child(2){ border-radius:0 0 14px 14px; }
html.iphone .menu > :first-child:nth-last-child(2){ border-radius:14px; }
html.iphone .menu button svg{ width:22px; height:22px; }
html.iphone .menu hr{ margin:0; height:6px; background:var(--sunk); }
html.iphone .menu-cancel{ justify-content:center; font-weight:600; border-radius:14px !important; background:var(--surface); }
html.iphone .menu button:active{ background:var(--press); }
@keyframes sheetup{ from{ transform:translateY(40px); opacity:0; } }

/* dialogs sit higher, clear of the keyboard */
html.iphone .dialog{ place-items:start center; padding-top:calc(18vh + env(safe-area-inset-top)); }
html.iphone .dialog-actions .btn{ height:44px; font-size:16px; }

/* the viewer: share instead of download; a tap on a photo hides the bar, as in Photos */
html.iphone .viewer-bar{ transition:opacity .2s var(--ease); }
html.iphone .viewer.bare .viewer-bar{ opacity:0; pointer-events:none; }
html.iphone .viewer.bare{ background:#000; }
html.iphone .viewer[data-mode="image"] .viewer-stage{ position:absolute; inset:0; padding:0; }
html.iphone .viewer[data-mode="image"] .viewer-bar{ position:relative; z-index:2; background:rgba(9,10,12,.62); }

/* bigger touch targets in the bar and lists */
html.iphone .bar .icon-btn,html.iphone #uploadBtn{ width:40px; height:40px; }
html.iphone .row .more{ width:40px; height:40px; }
html.iphone .toast{ height:48px; font-size:15px; }

/* ---- motion: transform and opacity only, timed by the springs generated in app.js ---- */
:root{ --sp-hover:var(--ease); --sp-hover-d:.2s; --sp-btn:var(--ease); --sp-btn-d:.25s; --sp-palette:var(--ease); --sp-palette-d:.4s; --sp-panel:var(--ease); --sp-panel-d:.5s; --sp-modal:var(--ease); --sp-modal-d:.55s; --sp-toast:var(--ease); --sp-toast-d:.3s; }
.menu{ animation:pop var(--sp-palette-d) var(--sp-palette); transform-origin:top right; }
.dialog-card{ animation:pop var(--sp-modal-d) var(--sp-modal); }
.dialog,.scrim{ animation:fade var(--sp-panel-d) var(--sp-panel); }
.sheet{ animation:slide var(--sp-panel-d) var(--sp-panel); }
.uploads,.toast{ animation:rise var(--sp-toast-d) var(--sp-toast); }
.viewer{ animation:fade var(--sp-panel-d) var(--sp-panel); overflow:hidden; }
html.iphone .menu{ animation:sheetup var(--sp-panel-d) var(--sp-panel); }
html.iphone #sheet{ animation:push var(--sp-panel-d) var(--sp-panel); }
html.iphone #settings{ animation:fade var(--sp-palette-d) var(--sp-palette); }

/* things give a little under the finger, and spring back */
.btn,.icon-btn,.theme-swatch,.seg button,.chips button,.tabs a,.tab-settings,.side a,.side-settings,.set-links button,.menu button,.mover-list button,.toast-btn,.vp-play,.vp-full{
  transition:background .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.btn:active,.icon-btn:active,.seg button:active,.chips button:active,.toast-btn:active,.vp-full:active{ transform:scale(.94); transition-duration:.08s; }
.theme-swatch:active,.tile:active,.set-links button:active,.side a:active,.side-settings:active,.mover-list button:active{ transform:scale(.97); transition-duration:.08s; }
.tabs a:active,.tab-settings:active{ transform:scale(.88); transition-duration:.08s; }
.row{ transition:background .15s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.row:active{ transform:scale(.985); transition-duration:.08s; }
.tile{ transition:transform var(--sp-btn-d) var(--sp-btn); }
html.iphone .menu button:active{ transform:none; }
.switch::after{ transition:transform var(--sp-btn-d) var(--sp-btn); }
.tabs a.on svg,.tab-settings.on svg{ animation:settle var(--sp-toast-d) var(--sp-toast); }
.theme-swatch.on{ animation:settle var(--sp-toast-d) var(--sp-toast); }
.toast-btn,.viewer-nav{ transition:background .18s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.viewer-nav:active{ transform:scale(.9); }
@keyframes settle{ from{ transform:scale(.86); } }

/* a list arrives one row after another; only the first screenful, and never on a refresh */
.row.enter,.tile.enter{ animation:arrive var(--sp-panel-d) var(--sp-panel) both; animation-delay:calc(var(--i) * 16ms); }
@keyframes arrive{ from{ opacity:0; transform:translateY(10px); } }

/* a new theme dissolves over the old one */
::view-transition-old(root),::view-transition-new(root){ animation-duration:.42s; animation-timing-function:ease-out; }

/* turning pages: the neighbours beside the open file */
.viewer-stage{ will-change:transform; }
.vpeek{ position:absolute; left:0; right:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; padding:0 var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); pointer-events:none; will-change:transform; }
.viewer-bar{ position:relative; z-index:2; }
/* the arrows stay for a wide table, where the swipe belongs to the table */
@media (hover:none){ .viewer[data-mode="sheet"] .viewer-nav:not([hidden]){ display:grid; top:auto; bottom:calc(52px + env(safe-area-inset-bottom)); background:rgba(23,24,28,.9); } }

/* Shelf's own video controls on a phone */
.vp{ position:relative; width:100%; height:100%; display:grid; place-items:center; }
.vp video{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.vp-play{ position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; display:grid; place-items:center; background:rgba(9,10,12,.55); color:#F7F7F5; }
.vp-play svg{ width:30px; height:30px; margin-left:4px; }
.vp-play:active{ transform:scale(.92); }
.vp.playing .vp-play{ opacity:0; pointer-events:none; transform:scale(1.15); }
.vp-bar{ position:absolute; left:0; right:0; bottom:calc(8px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; padding:0 var(--s1); color:rgba(247,247,245,.82); font:12px var(--mono); font-variant-numeric:tabular-nums; }
.vp-bar input{ flex:1; min-width:0; height:32px; margin:0; accent-color:#F7F7F5; background:none; }
.vp-full{ display:grid; place-items:center; width:40px; height:40px; color:inherit; }

html.calm *,html.calm *::before,html.calm *::after{ animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }

/* ---- the parts, one by one ---- */
/* the app itself eases in when it starts, and the connect screen rises */
.app{ animation:fade var(--sp-modal-d) var(--sp-modal); }
.pair-card{ animation:arrive var(--sp-modal-d) var(--sp-modal) both; }

/* pages arrive from the direction you are going */
@keyframes arrive{ from{ opacity:0; transform:translate(var(--dx, 0px), var(--dy, 10px)); } }
.empty:not(.foot){ animation:arrive var(--sp-panel-d) var(--sp-panel) both; }
.chips{ animation:fade var(--sp-panel-d) var(--sp-panel); }
.tile.enter{ animation-delay:calc(var(--i) * 12ms); }

/* pictures fade in as they load, rather than popping */
.row .thumb img,.tile img,.memory-row img{ opacity:0; transition:opacity .38s var(--ease); }
.row .thumb img.in,.tile img.in,.memory-row img.in{ opacity:1; }
.tile:hover img.in{ opacity:.92; }
.tile.sel img{ transition:transform var(--sp-btn-d) var(--sp-btn), opacity .2s; }

/* sidebar: one highlight that travels */
.side{ position:relative; }
.side-mark{ position:absolute; left:var(--s2); right:var(--s2); top:0; border-radius:var(--r); background:var(--press); pointer-events:none;
  transition:transform var(--sp-panel-d) var(--sp-panel), opacity .2s; }
.side a{ position:relative; }
.side a.on{ background:none; }
.side a svg,.tabs a svg,.tab-settings svg{ transition:color .25s var(--ease); }

/* choices: the raised part slides */
.seg{ position:relative; }
.seg button{ position:relative; z-index:1; transition:color .22s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.seg button.on{ background:none; box-shadow:none; }
.seg-thumb{ position:absolute; left:0; top:2px; bottom:2px; width:0; border-radius:7px; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.12); pointer-events:none;
  transition:transform var(--sp-panel-d) var(--sp-panel), width var(--sp-panel-d) var(--sp-panel); }
.switch{ transition:background .28s var(--ease); }

/* theme tiles and settings sections */
.theme-swatch{ transition:border-color .25s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.set-group.enter{ animation:arrive var(--sp-panel-d) var(--sp-panel) both; animation-delay:calc(var(--i) * 28ms); --dx:0px; --dy:10px; }
.sec{ animation:arrive var(--sp-panel-d) var(--sp-panel) both; --dx:0px; --dy:10px; }
html.iphone #settings{ animation:rise-page var(--sp-panel-d) var(--sp-panel); }
@keyframes rise-page{ from{ opacity:0; transform:translateY(14px); } }

/* floating panels are frosted glass over what is behind them */
.menu,.dialog-card,.importing{ background:color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(24px); backdrop-filter:saturate(1.5) blur(24px); }
html.iphone .menu{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
html.iphone .menu > :not(.menu-cancel),html.iphone .menu-cancel{ background:color-mix(in srgb, var(--surface) 96%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(24px); backdrop-filter:saturate(1.5) blur(24px); }
.dialog,.scrim{ background:rgba(0,0,0,.34); }
.menu button,.mover-list button{ transition:background .14s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }

/* selection */
.selbar{ animation:selIn var(--sp-palette-d) var(--sp-palette); }
@keyframes selIn{ from{ opacity:0; transform:translateY(-8px); } }
.check{ transition:opacity .18s var(--ease), background .18s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.sel .check{ animation:settle var(--sp-toast-d) var(--sp-toast); }
.row.sel{ transition:background .2s var(--ease); }

/* progress eases along */
.uploads-track i{ transition:width .35s var(--ease); }
.space-track i,.bars em i{ transition:width var(--sp-modal-d) var(--sp-modal); }

/* the viewer: controls arrive a beat after the file, and pictures and pages settle in */
.viewer-bar{ animation:barIn var(--sp-modal-d) var(--sp-modal) both; }
@keyframes barIn{ from{ opacity:0; transform:translateY(-10px); } }
html.iphone .viewer-bar{ transition:opacity .28s var(--ease), transform var(--sp-panel-d) var(--sp-panel); }
html.iphone .viewer.bare .viewer-bar{ transform:translateY(-14px); }
.viewer-nav{ animation:fade var(--sp-modal-d) var(--sp-modal); }
.viewer-wait{ animation:fade .4s ease-out .18s both; }
.page canvas,.viewer-stage pre,.sheet-scroll,.audio-card,.viewer-file,.vp{ animation:fade .34s var(--ease) both; }
.viewer-stage.zoom{ position:relative; }
.vp-play{ transition:opacity .24s var(--ease), transform var(--sp-panel-d) var(--sp-panel); }
.ptr svg{ transition:transform var(--sp-btn-d) var(--sp-btn); }
.toast-btn{ transition:background .18s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }

/* a photo has one size from the moment it slides in to the moment it is zoomed: it fills the same box and fits inside it */
.viewer-stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.viewer-stage.zoom > img,.vpeek.pic img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; display:block; }
.vpeek.pic{ padding:0; }
.vpeek:not(.pic) img{ width:100%; height:100%; object-fit:contain; display:block; }
.viewer-stage > video,.vp video{ width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; }

/* ---- colour: tonal grounds, ink for what matters, and one precious accent only where something is active or chosen ---- */
.theme-swatch{ min-height:76px; padding:12px; border:1px solid color-mix(in srgb, var(--sw-text) 14%, transparent); box-shadow:none; }
.theme-swatch[data-theme="system"]{ grid-column:1 / -1; min-height:52px; flex-direction:row; align-items:center; justify-content:space-between; }
.theme-swatch i{ align-items:center; gap:7px; }
.theme-swatch i span{ width:10px; height:10px; }
.theme-swatch i em{ flex:1; height:1px; background:color-mix(in srgb, var(--sw-text) 22%, transparent) !important; }
.theme-swatch[data-theme="system"] i{ order:2; width:40px; }
.theme-swatch b{ font-size:12.5px; font-weight:500; letter-spacing:.005em; }
.theme-swatch.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); animation:none; }
.seg-thumb{ box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.14); }
.seg button.on{ color:var(--text); font-weight:500; }
.set-group > h3,.sec h3{ font-weight:500; letter-spacing:.06em; font-size:11px; color:var(--text-3); }
.row.dir .thumb{ color:var(--text-2); }
.row.dir .thumb:not(.has) > svg{ width:24px; height:24px; stroke-width:1.25; }
.status.on i{ background:var(--accent); }
.dialog-card input:focus,.field input:focus,.code-input:focus,.field-row input:focus{ border-color:var(--accent); }
.sel .check{ background:var(--accent) !important; border-color:var(--accent) !important; color:var(--on); }
html.iphone .bar .back.icon-btn,html.iphone .back-link{ color:var(--text); }
.btn.primary{ letter-spacing:.005em; }

/* ---- profile switcher ---- */
.profile-btn{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 6px 0 5px; border-radius:var(--r); flex:none; font-size:13.5px; font-weight:500; color:var(--text); transition:background .18s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.profile-btn:hover{ background:var(--hover); }
.profile-btn:active{ transform:scale(.97); }
.profile-btn i{ display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--sunk); font:600 12px var(--font); font-style:normal; color:var(--text); }
.profile-btn i svg{ width:14px; height:14px; }
.profile-btn > svg{ width:16px; height:16px; color:var(--text-3); }
.brand span{ display:none; }
.menu .grow{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu button.on{ font-weight:500; }
.menu button > svg:last-child:not(:first-child){ color:var(--accent); }
@media (max-width:720px){
  .brand{ display:none !important; }
  .back:not([hidden]) ~ .profile-btn{ display:none; }
  .profile-btn{ padding-left:0; }
  .profile-btn span{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .here{ text-align:center; }
}
html.iphone .profile-btn{ height:40px; }

/* ---- PIN: an opaque page, so nothing behind it can be seen ---- */
.pin{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:max(var(--s4), env(safe-area-inset-top)) var(--s3) max(var(--s4), env(safe-area-inset-bottom)); background:var(--bg); overflow:auto; animation:fade var(--sp-palette-d) var(--sp-palette); }
.pin-card{ display:flex; flex-direction:column; align-items:center; width:min(300px,100%); animation:arrive var(--sp-modal-d) var(--sp-modal) both; --dx:0px; --dy:12px; }
.pin-lock{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); color:var(--accent); margin-bottom:var(--s3); }
.pin-card h2{ margin:0; font-size:21px; font-weight:600; letter-spacing:-.015em; }
.pin-card > p{ margin:4px 0 0; color:var(--text-2); font-size:14px; text-align:center; }
.pin-dots{ display:flex; gap:12px; height:12px; margin:var(--s4) 0 var(--s2); }
.pin-dots i{ width:11px; height:11px; border-radius:50%; border:1px solid var(--text-3); transition:background .14s var(--ease), border-color .14s var(--ease), transform var(--sp-toast-d) var(--sp-toast); }
.pin-dots i.on{ background:var(--text); border-color:var(--text); transform:scale(1.1); }
.pin-card > .pin-err{ min-height:20px; margin:4px 0 var(--s2); color:var(--danger); font-size:13px; }
.pin-keys{ display:grid; grid-template-columns:repeat(3,68px); gap:12px 18px; }
.pin-keys button{ width:68px; height:68px; border-radius:50%; display:grid; place-items:center; font-size:25px; font-weight:400; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); font-variant-numeric:tabular-nums; transition:background .14s var(--ease), transform var(--sp-btn-d) var(--sp-btn), opacity .2s; }
.pin-keys button:hover{ background:var(--sunk); }
.pin-keys button:active{ transform:scale(.92); transition-duration:.06s; background:var(--sunk); }
.pin-keys .pin-word{ background:none; box-shadow:none; color:var(--text-2); }
.pin-keys .pin-go{ background:none; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text-3); opacity:.5; }
.pin-keys .pin-go.ready{ background:var(--inv); color:var(--inv-text); box-shadow:none; opacity:1; }
.pin-link{ margin-top:var(--s3); font-size:14px; color:var(--text-2); }
.pin-link + .pin-link{ margin-top:var(--s1); color:var(--text-3); font-size:13px; }

/* ---- settings parts ---- */
.set-acts{ display:flex; flex:none; gap:2px; margin-right:-8px; }
.set-acts .btn{ height:32px; padding:0 10px; font-size:13px; }
.set-acts .btn svg{ margin:0; width:17px; height:17px; }
.set-select{ flex:none; max-width:45%; height:34px; padding:0 8px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--surface); color:var(--text); font:inherit; font-size:13.5px; }

/* ---- view: the panel ---- */
.view-panel{ width:264px; padding:6px; }
.view-sec{ padding:6px; }
.view-sec + .view-sec{ border-top:1px solid var(--line); margin-top:2px; padding-top:10px; }
.view-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:0 6px 6px; }
.view-head b{ font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.view-head small{ font-size:12.5px; color:var(--text); }
.view-panel input[type=range]{ display:block; width:calc(100% - 12px); margin:4px 6px 6px; accent-color:var(--accent); }
.view-dir{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--text-2); }
.view-dir svg{ width:14px; height:14px; transition:transform var(--sp-panel-d) var(--sp-panel); }
.view-panel .view-opt{ display:flex; width:100%; align-items:center; justify-content:space-between; height:32px; padding:0 8px; border-radius:6px; font-size:13.5px; color:var(--text-2); text-align:left; }
.view-panel .view-opt:hover{ background:var(--hover); }
.view-panel .view-opt svg{ width:16px; height:16px; color:var(--accent); opacity:0; }
.view-panel .view-opt.on{ color:var(--text); font-weight:500; }
.view-panel .view-opt.on svg{ opacity:1; }
html.iphone .view-panel{ left:8px !important; right:8px; top:auto !important; bottom:calc(8px + env(safe-area-inset-bottom)); width:auto; border-radius:14px; box-shadow:0 0 0 100vmax rgba(0,0,0,.32); background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; animation:sheetup var(--sp-panel-d) var(--sp-panel); z-index:60; }
html.iphone .view-panel .view-opt{ height:44px; font-size:16px; }
html.iphone .view-panel .menu-cancel{ display:block; width:100%; height:50px; margin-top:4px; border-top:1px solid var(--line); border-radius:0 !important; font-size:17px; background:none; }
html.iphone .main{ touch-action:pan-y; }

/* ---- sizes: details and list are rows; the rest are icons, like Explorer ---- */
.list-head [data-sort]:not([data-sort=""]){ cursor:pointer; }
.list-head [data-sort]:not([data-sort=""]):hover{ color:var(--text); }
.list-head [data-on="up"]::after{ content:" ↑"; color:var(--accent); }
.list-head [data-on="down"]::after{ content:" ↓"; color:var(--accent); }
html[data-size="list"] .row{ height:40px; }
html[data-size="list"] .row .thumb{ width:26px; height:26px; }
html[data-size="list"] .row .thumb .ext{ display:none; }
html[data-size="list"] .row .thumb svg{ width:17px; height:17px; }
html[data-size="list"] .row .name small{ display:none; }
html[data-size="list"] .row::after{ left:calc(44px + var(--s2)); }
html[data-size="list"] .list-head,html[data-size="list"] .row{ grid-template-columns:26px minmax(0,1fr) 90px 140px auto !important; }
@media (max-width:720px){ html[data-size="list"] .row{ grid-template-columns:26px minmax(0,1fr) 36px !important; } }
html[data-size="s"]{ --card:96px; --tile-min:96px; --cols:5; }
html[data-size="details"],html[data-size="list"]{ --tile-min:130px; --cols:4; }
html[data-size="m"]{ --card:136px; --tile-min:150px; --cols:3; }
html[data-size="l"]{ --card:196px; --tile-min:220px; --cols:2; }
html[data-size="xl"]{ --card:300px; --tile-min:340px; --cols:1; }
.tiles{ grid-template-columns:repeat(auto-fill, minmax(var(--tile-min,150px), 1fr)); }
@media (max-width:720px){
  .tiles{ grid-template-columns:repeat(var(--cols,3), 1fr); }
  html[data-size="s"]{ --card:68px; } html[data-size="m"]{ --card:100px; } html[data-size="l"]{ --card:150px; } html[data-size="xl"]{ --card:100%; }
}
.list.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(var(--card), 100%), 1fr)); gap:var(--s2); padding-top:var(--s1); }
.list.cards .row{ display:flex !important; flex-direction:column; align-items:stretch; height:auto; padding:6px; gap:6px; }
.list.cards .row::after{ display:none; }
.list.cards .row .thumb{ width:100%; height:auto; aspect-ratio:1; border-radius:8px; }
.list.cards .row.dir .thumb{ background:var(--sunk); }
.list.cards .row .thumb:not(.has) > svg,.list.cards .row.dir .thumb:not(.has) > svg{ width:34%; height:34%; stroke-width:1; }
.list.cards .row .name{ text-align:center; padding:0 2px 2px; }
.list.cards .row .name b{ font-size:13px; font-weight:500; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.3; }
.list.cards .row .name small,.list.cards .row .size,.list.cards .row .date,.list.cards .row .snip{ display:none; }
.list.cards .row .more{ position:absolute; right:10px; top:10px; width:30px; height:30px; background:color-mix(in srgb, var(--surface) 82%, transparent); border-radius:50%; }
.list.cards .row .check{ left:12px; top:12px; }
html[data-size="s"] .list.cards .row .more{ display:none; }
html[data-size="s"] .list.cards .row .name b{ font-size:12px; }
html[data-size="s"] .list.cards .row .thumb .ext{ display:none; }
/* groups */
.group{ list-style:none; grid-column:1 / -1; }
.group button{ display:flex; align-items:center; gap:6px; width:100%; height:40px; padding:0 var(--s1); margin-top:var(--s2); text-align:left; }
.group:first-child button{ margin-top:0; }
.group svg{ width:16px; height:16px; color:var(--text-3); transition:transform var(--sp-panel-d) var(--sp-panel); }
.group.folded svg{ transform:rotate(-90deg); }
.group b{ font-size:13px; font-weight:600; letter-spacing:-.003em; }
.group small{ font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.row.locked .thumb{ color:var(--accent); background:none; }
.row.locked .name b{ color:var(--text-2); }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.3s; }
.view-head b{ white-space:nowrap; }
.list.cards .row .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* off-site backup */
.b2-fields{ display:grid; gap:var(--s1); margin-top:var(--s2); }
.b2-fields input{ height:36px; padding:0 10px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--bg); font-size:13.5px; outline:none; min-width:0; }
.b2-fields input:focus{ border-color:var(--accent); }
.field-row:has(#b2Run){ flex-wrap:wrap; }
.b2-check{ margin-top:6px; }
.b2-check.good{ color:var(--text-2); }
.b2-check.bad{ color:var(--danger); }

/* the PIN page gets out of the way fast */
.pin,.pin-card{ animation-duration:.2s; }

/* ---- connecting: one button on the device, one question on the PC ---- */
.pair.easy .code-input{ display:none; }
.pair-alt{ margin-top:var(--s3); font-size:14px; color:var(--text-2); }
.pair-alt:hover{ color:var(--text); }
.pair-check,.approve-check{ font:500 34px/1 var(--mono); letter-spacing:.14em; font-variant-numeric:tabular-nums; }
.pair-check{ margin:var(--s2) 0 var(--s3); animation:arrive var(--sp-panel-d) var(--sp-panel) both; --dx:0px; --dy:8px; }
.approve-card{ text-align:center; width:min(360px,100%); }
.approve-mark{ display:grid; place-items:center; width:44px; height:44px; margin:0 auto var(--s3); border-radius:50%; border:1px solid var(--line-2); color:var(--accent); }
.approve-card h2{ margin-bottom:4px; font-size:18px; }
.approve-card p{ margin:0 0 var(--s3); font-size:14px; color:var(--text-2); }
.approve-card p.warn{ color:var(--danger); }
.approve-card small{ display:block; margin-top:var(--s2); font-size:12.5px; color:var(--text-2); }
.approve-card .dialog-actions{ justify-content:center; margin-top:var(--s4); }
.approve-card .btn{ height:40px; padding:0 var(--s4); }
.easy-steps{ margin-top:0; }
.easy-steps a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.copy-addr{ display:inline-block; padding:1px 8px; margin:2px 0; border-radius:6px; background:var(--sunk); color:var(--text); font:500 13.5px var(--mono); transition:background .15s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.copy-addr:hover{ background:var(--line-2); }
.copy-addr:active{ transform:scale(.96); }
.more-ways{ margin-top:var(--s3); }
.more-ways summary{ cursor:pointer; list-style:none; font-size:13.5px; color:var(--text-2); }
.more-ways summary::-webkit-details-marker{ display:none; }
.more-ways summary:hover{ color:var(--text); }
.more-ways[open] summary{ margin-bottom:var(--s3); }
/* it must show even while the PIN page is up; it reveals nothing of what is on the shelf */
#approve{ z-index:90; }
#approve{ background:color-mix(in srgb, var(--bg) 94%, transparent); }
.approve-card{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* ---- settings: a short list of places, then one place at a time ---- */
.settings .sheet-head h2{ flex:1; }
.set-back{ margin:0 var(--s1) 0 -8px; }
html.iphone .settings .sheet-head h2{ flex:none; }
html.iphone .settings .sheet-head{ justify-content:flex-start; }
html.iphone .set-back{ color:var(--text); margin-left:-10px; }
.set-menu{ display:flex; flex-direction:column; gap:var(--s3); }
.set-links{ margin:0; border:1px solid var(--line); }
.set-links button{ width:100%; transition:background .14s var(--ease), transform var(--sp-btn-d) var(--sp-btn); }
.set-links button:hover{ background:var(--hover); }
.set-links.enter{ animation:arrive var(--sp-panel-d) var(--sp-panel) both; --dx:0px; --dy:8px; }
.set-links svg:first-child{ width:20px; height:20px; color:var(--text-2); }
.set-links b{ font-size:14.5px; }
.set-links small{ font-size:12.5px; }
html.iphone .set-links b{ font-size:16px; }
.set-group:last-child{ margin-bottom:0; }
/* a tall photo stays inside its thumbnail */
.row .thumb.has{ position:relative; overflow:hidden; }
.row .thumb.has img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }