/* dark by default when the system says so; the header button overrides and is remembered */
:root, :root[data-theme=dark] {
  --bg: #16181c; --panel: #1f2227; --line: #33373e; --text: #e6e6e6; --dim: #9aa0a8; --shade: #16181cb0; --tipbg: #000d;
  --pink: rgb(255, 105, 200); --blue: rgb(0, 140, 255); --accent: #4c8dff; --yes: #2fb344; --no: #e5484d; --warn: #ffc864; --err: #ff7b7b;
  color-scheme: dark;
}
:root[data-theme=light] {
  --bg: #f4f5f7; --panel: #ffffff; --line: #d5d9e0; --text: #1c1f24; --dim: #5f6670; --shade: #f4f5f7c0; --tipbg: #fffffff0;
  --accent: #2f6fe0; --warn: #a86a00; --err: #c62828;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f4f5f7; --panel: #ffffff; --line: #d5d9e0; --text: #1c1f24; --dim: #5f6670; --shade: #f4f5f7c0; --tipbg: #fffffff0;
    --accent: #2f6fe0; --warn: #a86a00; --err: #c62828;
    color-scheme: light;
  }
}
/* one spacing unit and three radii, used everywhere: panels, controls, chips */
/* a reason's letter keeps its colour from the lab's review sheets; on a light page it is darkened to stay readable */
:root { --ink-amt: 0%; }
:root[data-theme=light] { --ink-amt: 45%; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --ink-amt: 45%; } }
.lt, .filter .badge { color: color-mix(in srgb, var(--c), #000 var(--ink-amt)); }
:root { --pad: 12px; --r-panel: 12px; --r-ctl: 8px; --r-chip: 6px; }
* { box-sizing: border-box; }
/* a fixed frame: header, three columns and the footer fill the window; only the columns scroll */
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif;
  display: grid; grid-template-rows: 52px minmax(0, 1fr) 1cm; }
header { display: flex; gap: 14px; align-items: center; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); }
#logo { height: 36px; width: auto; flex: none; }
h1 { font-size: 18px; margin: 0; flex: 1; }
h2 { font-size: 15px; margin: 0 0 6px; }
.dim { color: var(--dim); }
button, select, input { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); }
button { padding: 5px 12px; cursor: pointer; }
button:not(:disabled):hover { border-color: var(--dim); }
select, input[type=text], input[type=number] { padding: 4px 8px; background: var(--bg); }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Load: a button with a dropdown beside it for where to load from */
.split { display: inline-flex; }
.split > button { border-radius: var(--r-ctl) 0 0 var(--r-ctl); font-weight: 600; padding: 4px 14px; }
.split .menu summary { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; padding: 4px 8px; border-left: 1px solid #ffffff55; height: 100%; }
.split .menu summary.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.split .menu summary.primary::after { color: #fff; content: "▾"; }
#load.done .primary { background: var(--panel); border-color: var(--accent); color: var(--accent); }
#load.done .menu summary.primary { border-left-color: var(--accent); }
#load.done .menu summary.primary::after { color: var(--accent); }
.menu .pop.right { left: auto; right: 0; }
.menu .pop .item { text-align: left; border: 0; background: none; padding: 4px 2px; white-space: nowrap; }
.menu .pop .item:not(:disabled):hover { color: var(--accent); }

/* three columns of panels; the gutters between them are the handles that resize the side bars */
#layout { --lw: 320px; --rw: 400px; display: grid; grid-template-columns: var(--lw) var(--pad) minmax(0, 1fr) var(--pad) var(--rw);
  grid-template-rows: minmax(0, 1fr); min-height: 0; }
/* the scrollbar's room is kept even when nothing scrolls, so folding a box never changes the bar's width */
aside { overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; padding: var(--pad); }
#left { padding-right: 0; }
#right { padding-left: 0; }
.gutter { cursor: col-resize; position: relative; }
.gutter::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 36px; margin: -18px 0 0 -1.5px; border-radius: 2px; background: var(--line); opacity: 0; transition: opacity .15s; }
.gutter:hover::after, body.resizing .gutter::after { opacity: 1; }
body.resizing { cursor: col-resize; user-select: none; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px; }
.box + .box { margin-top: var(--pad); }
.box h2 { margin-bottom: 10px; }
.box select { width: 100%; }
#thumb-wrap { position: relative; margin-bottom: 8px; border-radius: var(--r-ctl); overflow: hidden; background: #000; cursor: crosshair; line-height: 0; }
#thumb-wrap[hidden] { display: none; }
#thumb { width: 100%; height: auto; }
#thumb-view { position: absolute; border: 1.5px solid #fff; border-radius: 2px; box-shadow: 0 0 0 1px #0008; pointer-events: none; }
#file-box { margin: 0 0 10px; }
#file-name { display: flex; align-items: center; gap: 7px; word-break: break-all; font-size: 13px; cursor: pointer; list-style: none; }
#file-name::-webkit-details-marker { display: none; }
#file-name::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--dim); transition: transform .15s; }
#file-box[open] > #file-name::before { transform: rotate(90deg); }
#file-box.empty > #file-name { cursor: default; pointer-events: none; }
#file-box.empty > #file-name::before { display: none; }
#file-info { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0 13px; font-size: 12px; }
#file-info dt { color: var(--dim); }
#file-info dd { margin: 0; overflow-wrap: anywhere; }
#file-info dd.none { grid-column: 1 / -1; margin-top: 2px; }
.layers { display: flex; gap: 14px; font-size: 13px; white-space: nowrap; }
.layers label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
/* a channel's checkbox takes the channel's colour when it is on */
input.ch { width: 15px; height: 15px; margin: 0; cursor: pointer; }
input.ch.r { accent-color: #f33; } input.ch.g { accent-color: #2fb344; } input.ch.b { accent-color: #3d6bff; }
.row { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
/* a button shines while it is the next thing to press */
.shine { position: relative; overflow: hidden; box-shadow: 0 0 10px var(--accent); }
.shine::after { pointer-events: none; content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(100deg, transparent, #ffffff90, transparent); animation: shine 1.8s ease-in-out infinite; }
.offscreen, .offscreen::before, .offscreen::after { animation-play-state: paused !important; }
@keyframes shine { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
/* folding parts of a box */
details.fold { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
details.fold > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dim); list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
/* every fold's arrow: a small triangle pointing right when folded and down when open, centred on its text */
details.fold > summary::before, .box.foldable > .sec-head h2::before { content: ""; flex: none; width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--dim); transition: transform .15s; }
details.fold[open] > summary::before, .box.foldable:not(.folded) > .sec-head h2::before { transform: rotate(90deg); }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sec-head h2, .sec-head button { margin: 0; white-space: nowrap; }
.box > .sec-head { margin-bottom: 10px; }
.box.foldable.folded > .sec-head { margin-bottom: 0; }
.sec-head button { padding: 3px 10px; font-size: 12px; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); font-size: 12px; }
button.link:not(:disabled):hover { text-decoration: underline; }
button.link:disabled { color: var(--dim); }
.hint { color: var(--dim); font-size: 12px; margin: 4px 0 8px; }
.hint.slow { color: var(--warn); margin-bottom: 0; }

.help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 2px; border-radius: 50%;
  border: 1px solid var(--dim); color: var(--dim); font-size: 10px; font-weight: 700; line-height: 1; cursor: help; vertical-align: 1px; }
.help:hover, .help:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }

#view { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: var(--pad) 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.toolbar { display: flex; gap: 10px; align-items: center; height: 52px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); font-size: 13px; }
.toolbar .group { display: flex; gap: 10px; align-items: center; }
.toolbar .grow { flex: 1; }
button.big { padding: 6px 18px; font-size: 14px; font-weight: 600; background: var(--accent); border-color: var(--accent); color: #fff; }
#image-view, #items-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#image-view[hidden], #items-view[hidden] { display: none; }
#items-view { overflow-y: auto; padding: var(--pad); }
/* zoom: one rounded segmented control */
.zoom { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--panel); }
.zoom button { border: 0; border-radius: 0; background: transparent; width: 32px; font-size: 16px; line-height: 1; padding: 5px 0; }
.zoom button:hover { background: var(--bg); }
#zoom-label { min-width: 44px; text-align: center; align-self: center; font-variant-numeric: tabular-nums; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 5px 0; }
/* the overlay options, folded into one dropdown */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; color: var(--dim); }
.menu .pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 8px; min-width: 170px;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: 0 6px 18px #0004; }
.menu .pop label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.menu .pop label[hidden] { display: none; }
.menu .opt { display: flex; align-items: center; gap: 8px; }
.menu .opt label { flex: 1; }
.menu .opt input[type=range] { width: 80px; }
.menu .opt input[type=color] { width: 26px; height: 22px; padding: 0 2px; }
.menu .pop label.num input { width: 58px; padding: 2px 6px; }
/* each view shows only its own tools */
#view[data-view=image] .for-items, #view[data-view=items] .for-image { display: none; }
.tabs { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.menu .pop label.sort select { padding: 2px 6px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.tabs button { border: 0; border-radius: 0; background: transparent; padding: 5px 14px; }
.tabs button + button { border-left: 1px solid var(--line); }
.tabs button.on { background: var(--accent); color: #fff; }
.tabs span { opacity: .75; font-variant-numeric: tabular-nums; }
button.icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; }
button.icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the theme button shows where it goes: a sun in dark mode, a moon in light */
#theme .moon, :root[data-theme=light] #theme .sun { display: none; }
:root[data-theme=light] #theme .moon { display: inline; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) #theme .sun { display: none; }
  :root:not([data-theme]) #theme .moon { display: inline; }
}
#scroller { flex: 1; overflow: auto; position: relative; background: var(--bg); cursor: grab; touch-action: none; }
#scroller.dragging, #scroller.dragging #overlay g[data-i] { cursor: grabbing; }
#empty { color: var(--dim); padding: 40px; text-align: center; }
#stage { position: relative; }
#base { image-rendering: pixelated; display: block; }
#overlay { position: absolute; left: 0; top: 0; }
#overlay text { paint-order: stroke; stroke: #000; stroke-width: 2px; stroke-opacity: .6; font-family: system-ui, sans-serif; }


/* the footer: file, counts and timings as sections on the left; progress and the version on the right */
#statusbar { display: flex; align-items: center; gap: 10px; height: 1cm; padding: 0 14px; background: var(--panel); border-top: 1px solid var(--line);
  font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; }
#statusbar .seg { padding-right: 10px; border-right: 1px solid var(--line); }
#statusbar .seg:empty { display: none; }
#statusbar .grow { flex: 1; }
#statusbar b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
#sb-file { color: var(--text); font-weight: 600; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
#sb-memory { font-variant-numeric: tabular-nums; }
#sb-memory.warn { color: var(--warn); }
#status { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#status.err { color: var(--err); }
#statusbar .spin { width: 12px; height: 12px; display: none; }
#statusbar .spin.on { display: inline-block; }
#sb-version { padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--r-chip); font: inherit; font-variant-numeric: tabular-nums;
  color: inherit; background: none; cursor: pointer; }
#sb-version:hover, #sb-version:focus-visible { color: var(--text); border-color: var(--accent); }
#sb-version.stale { cursor: pointer; color: var(--bg); background: var(--warn); border-color: var(--warn); font-weight: 600; }

#tip { position: fixed; pointer-events: none; background: var(--tipbg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 10px; font-size: 12px; max-width: 320px; z-index: 10; white-space: pre-line; }

@media (max-width: 1300px) {
  #layout { --lw: 260px; --rw: 300px; }
}

.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--pink); border-radius: 50%; animation: spin .8s linear infinite; visibility: hidden; }
.spin.on { visibility: visible; }
/* a button at work: held, with a small spinner after its label */
button.working:disabled { opacity: 1; cursor: progress; }
button.working::after { content: ""; display: inline-block; width: .75em; height: .75em; margin-left: .45em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.spin.big { width: 44px; height: 44px; border-width: 4px; visibility: visible; }
@keyframes spin { to { transform: rotate(360deg); } }
#busy { position: absolute; inset: 52px 0 0 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--shade); color: var(--text); }
#busy[hidden] { display: none; }
#busy-time { color: var(--dim); font-variant-numeric: tabular-nums; }
/* over an image (work on it, or one painting as it downloads) the text sits in a pill below it, and work on
   it sweeps a copier's light bar back and forth over the image */
#scan-light { display: none; }
#busy.scan, #busy.peek { background: none; justify-content: flex-end; padding-bottom: 28px; pointer-events: none; overflow: hidden; }
#busy.scan .spin.big, #busy.peek /* a button at work: held, with a small spinner after its label */
button.working:disabled { opacity: 1; cursor: progress; }
button.working::after { content: ""; display: inline-block; width: .75em; height: .75em; margin-left: .45em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.spin.big { display: none; }
#busy.scan #busy-text, #busy.scan #busy-time, #busy.peek #busy-text, #busy.peek #busy-time { position: relative; z-index: 1; }
#busy.scan #busy-text, #busy.peek #busy-text { padding: 5px 14px; border-radius: 999px; background: var(--shade); font-weight: 600; font-variant-numeric: tabular-nums; }
#busy.scan #busy-time, #busy.peek #busy-time { margin-top: -6px; padding: 1px 10px; border-radius: 999px; background: var(--shade); color: var(--text); }
#busy.scan #scan-light { display: block; position: absolute; top: 0; bottom: 0; left: -90px; width: 90px; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(150, 255, 190, .10) 30%, rgba(235, 255, 245, .75) 50%, rgba(150, 255, 190, .10) 70%, transparent);
  box-shadow: 0 0 60px 20px rgba(120, 255, 170, .18); animation: copier 2.4s ease-in-out infinite alternate; }
@keyframes copier { from { transform: translateX(0); } to { transform: translateX(calc(100cqw + 90px)); } }
#busy.scan { container-type: inline-size; }
@media (prefers-reduced-motion: reduce) { #busy.scan #scan-light { animation-duration: 8s; } }

/* the Google Drive dialog */
#drive-dlg, #memory-dlg, #history-dlg, #storage-dlg { width: min(640px, calc(100vw - 32px)); padding: 18px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: 0 12px 40px #0006; }
#drive-dlg::backdrop, #memory-dlg::backdrop, #history-dlg::backdrop, #storage-dlg::backdrop { background: #0007; }
.drive-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.drive-row.end { justify-content: space-between; }
#drive-link { flex: 1; min-width: 0; }
/* every part keeps its size whatever the folder holds, so the dialog stays still while browsing */
#drive-path { margin-top: 10px; font-size: 13px; height: 1.5em; line-height: 1.5em; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
#drive-list { display: flex; flex-direction: column; height: 300px; overflow-y: auto; margin-top: 6px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); }
#drive-list .item { display: flex; gap: 12px; align-items: center; flex: none; text-align: left; border: 0; border-radius: 0; background: none; padding: 6px 10px; }
#drive-list .item .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#drive-list .item .meta { color: var(--dim); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#drive-msg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#drive-list .item + .item { border-top: 1px solid var(--line); }
#drive-list .item:hover { background: var(--bg); }
#drive-list .item[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
#drive-list .item .pic { flex: none; width: 48px; height: 48px; border-radius: 3px; background: var(--bg); overflow: hidden; display: grid; place-items: center; }
#drive-list .item .pic img { width: 100%; height: 100%; object-fit: cover; }
#drive-list .item.folder .pic::before { content: "📁"; font-size: 24px; }
#drive-msg.err { color: var(--err); }
#drive-thumbs-l, #drive-autosave-l { display: flex; gap: 6px; align-items: center; margin: 0; white-space: nowrap; }
#drive-thumbs-note { font-variant-numeric: tabular-nums; }
#drive-thumbs-note:not(:empty)::before { content: "· "; }
#drive-msg { margin: 0; }

/* a box that folds: its title opens and closes it */
.box.foldable > .sec-head h2 { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.box.foldable.folded > :not(.sec-head) { display: none; }
.box.foldable.folded > .sec-head button { display: none; }

#notice { position: fixed; z-index: 40; max-width: min(360px, calc(100vw - 16px)); background: var(--panel); color: var(--text); border: 1px solid var(--accent);
  border-radius: var(--r-ctl); padding: 12px 14px; box-shadow: 0 8px 24px #0007; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
#notice[hidden] { display: none; }
#notice p { margin: 0; }
#notice button { align-self: flex-end; }
:root { --gt-part: #e8890c; }
#gt-dlg { width: min(460px, calc(100vw - 32px)); padding: 18px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: 0 12px 40px #0006; }
#gt-dlg::backdrop { background: #0007; }
/* the popup's checklist: every issue the ground truth can have, crossed out with a green check once resolved */
.checklist { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; gap: 8px; align-items: flex-start; }
.checklist svg { flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.checklist li.ok { color: var(--dim); }
.checklist li.ok span { text-decoration: line-through; }
.checklist li.ok svg { color: var(--yes); }
.checklist li.warn svg { color: var(--gt-part); }
.checklist li.error svg { color: var(--no); }
#gt-msg:empty { display: none; }
#gt-dlg .grow { flex: 1; }


/* the low-memory popup */
#memory-dlg { width: min(520px, calc(100vw - 32px)); }
#memory-dlg h2 { margin: 0 0 8px; }
#memory-dlg .tips { margin: 10px 0 0; padding-left: 20px; line-height: 1.5; }
#memory-dlg .tips li + li { margin-top: 6px; }
kbd { font: 12px ui-monospace, monospace; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; }

/* the version history popup, and the bubble that points at the version after an update */
#history-dlg { width: min(560px, calc(100vw - 32px)); }
#history-dlg h2 { margin: 0 0 10px; }
#history-list { max-height: min(60vh, 520px); overflow-y: auto; padding-right: 6px; }
#history-list section { padding: 8px 0; border-top: 1px solid var(--line); }
#history-list section:first-child { border-top: 0; }
#history-list h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
#history-list h3 .date { color: var(--dim); font-weight: 400; }
#history-list h3 .tag { padding: 0 6px; border-radius: var(--r-chip); font-size: 11px; color: var(--bg); background: var(--accent); }
#history-list ul { margin: 0; padding-left: 18px; line-height: 1.5; }
#history-list .since { margin: 0 0 6px; color: var(--dim); }
#whats-new { position: fixed; right: 10px; bottom: calc(1cm + 10px); z-index: 35; display: flex; align-items: flex-start; gap: 4px; max-width: min(300px, calc(100vw - 20px));
  padding: 8px 6px 8px 12px; color: var(--text); background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r-ctl); box-shadow: 0 8px 24px #0007; font-size: 13px; }
#whats-new[hidden] { display: none; }
#whats-new::after { content: ""; position: absolute; right: var(--arrow, 24px); bottom: -7px; width: 12px; height: 12px; background: var(--panel);
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: rotate(45deg); }
#whats-new-open { flex: 1; min-width: 0; white-space: normal; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#whats-new-open:hover { color: var(--accent); }
#whats-new .x { padding: 0 6px; border: 0; background: none; color: var(--dim); font-size: 16px; line-height: 1; cursor: pointer; }
#whats-new .x:hover { color: var(--text); }

/* the user's avatar, and the dialog listing what this device keeps */
#user-menu summary { padding: 0; border: 0; background: none; border-radius: 50%; line-height: 0; }
#user-menu summary::after { content: none; }
#user-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar circle:first-child { fill: var(--accent); }
.avatar circle + circle, .avatar path { fill: #fff; }
#user-menu .who { display: flex; flex-direction: column; padding-bottom: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
#user-menu .who .dim { font-size: 12px; }
#storage-dlg .grow { flex: 1; }
#storage-total { margin-top: -2px; }
#storage-list { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 6px; }
#storage-list .group { border-top: 1px solid var(--line); padding: 6px 0; }
#storage-list .group:first-child { border-top: 0; }
#storage-list .group > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; padding: 4px 0; }
#storage-list .group > summary::-webkit-details-marker { display: none; }
#storage-list .group > summary::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--dim); transition: transform .15s; }
#storage-list .group[open] > summary::before { transform: rotate(90deg); }
#storage-list .group > summary .count { flex: 1; color: var(--dim); font-weight: 400; font-size: 12px; }
#storage-list .group > p { margin: 0 0 4px 15px; }
#storage-list .entry { display: flex; align-items: baseline; gap: 10px; padding: 3px 0 3px 15px; font-size: 13px; }
#storage-list .entry + .entry { border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
#storage-list .entry .pic { flex: none; width: 28px; height: 28px; object-fit: cover; border-radius: 3px; align-self: center; }
#storage-list .entry .label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#storage-list .entry .name { overflow-wrap: anywhere; }
#storage-list .entry .what { color: var(--dim); font-size: 12px; }
#storage-list .size { color: var(--dim); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#storage-list .del { border: 0; background: none; padding: 0 4px; color: var(--dim); font-size: 16px; line-height: 1; }
#storage-list .del:not(:disabled):hover { color: var(--no); }