:root {
  --bg: #f7f7fb;
  --panel: #ffffff;
  --panel-2: #eef0f6;
  --text: #1b1b21;
  --muted: #5f6270;
  --line: #d9dbe4;
  --accent: #3b5bdb;
  --accent-soft: #e4e9ff;
  --mark: #ffe58a;
  --danger: #c62828;
  /* heading colours by level, the same hues as the phone app */
  --h1: #1f5fb0;
  --h2: #1e7b48;
  --h3: #9a5a00;
  --h4: #7a3ea3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121317;
    --panel: #1b1d24;
    --panel-2: #252833;
    --text: #e6e7ee;
    --muted: #9a9dab;
    --line: #333744;
    --accent: #8ea2ff;
    --accent-soft: #263055;
    --mark: #6b5a12;
    --danger: #ff6b6b;
    --h1: #8ab4f8;
    --h2: #7fcb95;
    --h3: #f0b85c;
    --h4: #c79bf5;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hidden { display: none !important; }
button { font: inherit; }

/* ---- PIN gate ---- */
.gate { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); }
.gate-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px;
  width: min(360px, 92vw); text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.gate-card h1 { margin: 0 0 6px; font-size: 22px; }
.gate-card p { margin: 0 0 16px; color: var(--muted); }
.gate-card input { width: 100%; font-size: 28px; letter-spacing: .4em; text-align: center; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); }
.gate-card #account-fields input { font-size: 16px; letter-spacing: normal; text-align: left; margin-bottom: 8px; }
.gate-card .remember { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); text-align: left; cursor: pointer; }
.gate-card .remember input { width: auto; font-size: inherit; letter-spacing: normal; padding: 0; margin: 3px 0 0; }
.sidebar-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sidebar-actions .view-btn { flex: 1 1 45%; font-size: 13px; padding: 6px 8px; white-space: nowrap; }
/* Connect card: the addresses this server answers on, one of them shown as a QR code. */
.connect-layout { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
@media (max-width: 700px) { .connect-layout { grid-template-columns: 1fr; } .connect-qr { justify-self: center; } }
.connect-list { display: flex; flex-direction: column; gap: 4px; }
.connect-item { border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; }
.connect-item:hover { background: var(--panel-2); }
.connect-item.on { background: var(--accent-soft); border-color: var(--accent); }
.connect-item .url { font-family: ui-monospace, Consolas, monospace; font-size: 15px; display: block; }
.connect-item .where { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.connect-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.connect-qr img { width: 260px; height: 260px; background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box; }
.connect-qr .chosen { font-family: ui-monospace, Consolas, monospace; font-size: 15px; word-break: break-all; text-align: center; max-width: 280px; }
.account-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .account-forms { grid-template-columns: 1fr; } }
.account-forms .field-form { margin-top: 0; }
.gate-card button { margin-top: 14px; width: 100%; padding: 10px; border: 0; border-radius: 10px;
  background: var(--accent); color: white; font-weight: 600; cursor: pointer; }
.error { color: var(--danger); }
/* The sign-in card's own paragraphs are muted; a refusal is not. The wait line sits under it. */
.gate-card p.error { color: var(--danger); margin: 12px 0 0; }
.gate-card #pin-wait { margin: 6px 0 0; }
.gate-card button:disabled { opacity: .45; cursor: not-allowed; }

/* ---- layout ---- */
.app { display: grid; grid-template-columns: 280px 1fr; height: 100%; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.sidebar-head h1 { margin: 0; font-size: 18px; }
.status { width: 10px; height: 10px; border-radius: 50%; background: #9e9e9e; display: inline-block; }
.status.ok { background: #2e7d32; } .status.bad { background: var(--danger); }
.side-label { padding: 6px 16px 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.docs-label { border-top: 1px solid var(--line); padding-top: 10px; }
.outline { list-style: none; margin: 0; padding: 2px 8px 8px; overflow: auto; flex: 1 1 40%; min-height: 60px; }
.outline li { padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--text); }
.outline li:hover { background: var(--panel-2); }
/* where you are: the element at the top of the view, and the headings above it */
.outline li.current { background: var(--accent-soft); }
.outline li.on-path { box-shadow: inset 3px 0 0 currentColor; }
.outline li.l1 { font-weight: 700; color: var(--h1); }
.outline li.l2 { padding-left: 22px; color: var(--h2); }
.outline li.l3 { padding-left: 34px; font-size: 12.5px; color: var(--h3); }
.outline li.l4 { padding-left: 46px; font-size: 12px; font-style: italic; color: var(--h4); }
/* folded in the document: dimmed, with an ellipsis (the triangle is the outline's own folding) */
.outline li.collapsed { opacity: .65; }
.outline li.collapsed::after { content: " …"; }
.outline li .twisty { display: inline-block; width: 14px; margin-right: 2px; text-align: center; color: var(--muted); font-size: 10px;
  font-weight: 400; font-style: normal; border-radius: 4px; }
.outline li .twisty.open { transform: rotate(90deg); }
.outline li .twisty:not(.leaf):hover { background: var(--line); color: var(--text); }
.outline-head { display: flex; align-items: center; justify-content: space-between; padding-right: 10px; }
.outline-tools { display: flex; gap: 2px; }
.otool { border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 22px; height: 22px; padding: 0;
  display: inline-grid; place-items: center; border-radius: 6px; }
.otool .ico { width: 14px; height: 14px; }
.otool:hover { background: var(--panel-2); color: var(--text); }
/* one line per element under its heading */
.outline li.el { color: var(--muted); font-size: 12.5px; }
.outline li.el.d0 { padding-left: 10px; }
.outline li.el.d1 { padding-left: 22px; }
.outline li.el.d2 { padding-left: 34px; }
.outline li.el.d3 { padding-left: 46px; }
.outline li.el.d4 { padding-left: 58px; }
.outline li .grip { display: inline-block; width: 14px; margin-left: -6px; color: var(--muted); opacity: 0; cursor: grab;
  letter-spacing: -2px; font-size: 11px; font-weight: 400; font-style: normal; touch-action: none; }
.outline li:hover .grip { opacity: .8; }
.outline li.lifted { background: var(--panel-2); }
.outline li.none { color: var(--muted); cursor: default; font-style: italic; }
.outline li.none:hover { background: transparent; }
.section.flash, .note.flash { animation: flash 1.2s ease-out; }
/* Put there by a section template and not filled in yet. */
.note.tpl { opacity: .6; }
@keyframes flash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
.doc-list { list-style: none; margin: 0; padding: 4px 8px; overflow: auto; flex: 1 1 60%; }
.doc-list li { padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.doc-list li:hover { background: var(--panel-2); }
.doc-list li.active { background: var(--accent-soft); }
.doc-list .t { font-weight: 600; }
.doc-list .d { font-size: 12px; color: var(--muted); }
.doc-list li.none { color: var(--muted); cursor: default; font-size: 13px; }
.doc-list li.none:hover { background: transparent; }
.sidebar-foot { padding: 10px 12px; border-top: 1px solid var(--line); }
/* A text box with its shortcut shown as a key while it is empty and unfocused, and an × to clear it. */
.field { position: relative; display: flex; align-items: center; min-width: 0; }
.field input { width: 100%; min-width: 0; padding-right: 30px !important; }
.field input::-webkit-search-cancel-button { display: none; }
.field .key { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; font: 11px/1 ui-monospace, Consolas, monospace;
  color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--panel); }
.field:focus-within .key, .field.has-text .key { display: none; }
.field .clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.field .clear:hover { background: var(--panel-2); color: var(--text); }
.sidebar-foot .field { width: 100%; }
.sidebar-foot input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--text); }
body.sidebar-hidden .app { grid-template-columns: 1fr; }
body.sidebar-hidden .sidebar { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.doc-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 2; }
/* The title takes the room; the search box, right next to the menu, gives way first when the window narrows. */
.doc-title { flex: 1 1 auto; margin: 0; font-size: 20px; min-width: 0; outline: none; border-radius: 6px; padding: 2px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-title:focus { background: var(--panel-2); text-overflow: clip; }
.search-field { flex: 0 1 190px; min-width: 80px; }
#search { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--text); }
.save-state { font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; }
.save-state:empty { display: none; }
.icon-btn { border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--text); }
.only-narrow { display: none; }
.empty { color: var(--muted); padding: 40px; }

/* ---- elements ---- */
/* The scroll container spans the full width (so the scrollbar sits at the window edge); the
   content column is capped for comfortable reading but widens as images are made larger. */
.elements { padding: 12px 20px 60px; overflow: auto; flex: 1; min-height: 0; outline: none; }
/* Jump to the end, as on the phone: bottom right of the document, only while there is further to scroll. */
.main { position: relative; }
.jump-bottom { position: absolute; right: 22px; bottom: 22px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; display: grid; place-items: center; opacity: .9; }
.jump-bottom:hover { opacity: 1; background: var(--panel-2); }
.jump-bottom .ico { width: 22px; height: 22px; }
/* The entry picked with the arrow keys in the document list, before Enter opens it. */
.doc-list li.kbd { outline: 2px solid var(--accent); outline-offset: -2px; }
.content { max-width: min(100%, max(980px, calc(var(--thumb-w) * 4 + 80px))); padding-left: 14px; position: relative; }

/* gutter guides: one line per enclosing heading, in that heading's colour, drawn in one layer for the whole document */
.guide-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.guide-layer i { position: absolute; width: 2px; opacity: .55; border-radius: 1px; }
body.reordering .guide-layer { display: none; }

/* breadcrumb bar: floats under the header as you scroll into a section */
.crumbs { position: sticky; top: 0; height: 0; z-index: 3; overflow: visible; }
/* A tab hanging from the header, flush with the top and left edges of the content area (the
   scroller has 12px/20px of padding, hence the negative offsets), just wide enough for the path. */
.crumbs-bar { position: absolute; top: -12px; left: -20px; max-width: calc(100% + 20px); display: flex; align-items: center;
  padding: 4px 14px 4px 20px; border-radius: 0 0 10px 0; background: var(--panel);
  border: 1px solid var(--line); border-top: 0; border-left: 0; box-shadow: 0 3px 10px rgba(0,0,0,.14);
  font-size: 13px; white-space: nowrap; overflow: hidden; }
.crumbs-bar .cut { color: var(--muted); margin-right: 2px; }
.crumbs-in { display: flex; align-items: center; gap: 2px; overflow: hidden; }
.crumb { border: 0; background: transparent; font: inherit; padding: 2px 6px; border-radius: 6px; cursor: pointer; opacity: .72; }
.crumb.last { opacity: 1; font-weight: 600; }
.crumb:hover { background: var(--panel-2); opacity: 1; }
.crumb.l1 { color: var(--h1); } .crumb.l2 { color: var(--h2); } .crumb.l3 { color: var(--h3); } .crumb.l4 { color: var(--h4); }
.crumb-sep { color: var(--muted); }
.section { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; cursor: pointer; user-select: none; }
.section .chev { width: 20px; color: var(--muted); transition: transform .15s; }
.section.collapsed .chev { transform: rotate(-90deg); }
.section .title { flex: 1; outline: none; border-radius: 6px; padding: 2px 6px; font-weight: 700; }
.section .title[contenteditable="true"] { background: var(--panel-2); cursor: text; }
.section .title.placeholder { color: var(--muted); font-style: italic; font-weight: 500; }
.section { position: relative; }
.mini.level { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.level-menu { top: 100%; left: auto; right: 60px; transform: none; }
.level-menu button.current { background: var(--accent-soft); font-weight: 700; }
.section:hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); border-radius: 8px; }

/* small hover tools on headings and notes */
.mini { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 6px;
  border-radius: 6px; opacity: 0; transition: opacity .12s; }
.section:hover .mini, .note:hover .mini, .mini:focus { opacity: 1; }
.mini:hover { background: var(--panel-2); color: var(--text); }
.mini.del:hover { color: var(--danger); }
/* The outline icons: 18 px strokes in the button's colour, centred in a 28 px square. */
.ico { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mini:has(> .ico), .doc-del:has(> .ico) { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; }
/* The ✎ glyph points down-left; flip it so it matches the app's pencil (tip lower-left, eraser top-right). */
.mini.edit { display: inline-block; transform: scaleX(-1); }
.note { position: relative; }
/* Hover tools sit above everything on the card (images included) on a translucent pill. */
.note-tools { position: absolute; top: 6px; right: 8px; z-index: 3; display: flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(0,0,0,.15);
  opacity: 0; transition: opacity .12s; }
.note:hover .note-tools, .note-tools:focus-within { opacity: 1; }
.note-tools .mini { opacity: 1; }
.note-title { padding-right: 110px; }

/* insertion gaps and add bar */
.gap { height: 18px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gap-btn { opacity: 0; transition: opacity .12s; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  width: 22px; height: 22px; border-radius: 50%; line-height: 1; cursor: pointer; font-size: 15px; padding: 0;
  position: relative; z-index: 1; /* in front of the dashed line */ }
.gap:hover .gap-btn, .gap-btn:focus { opacity: 1; }
.gap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line); opacity: 0; }
.gap:hover::before { opacity: 1; }
.popmenu { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 6px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: min(96vw, 600px); }
/* Equal tiles for a new element: the icon above a short label, the accent colour saying "adds something". */
.tile { width: 68px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0;
  background: transparent; color: var(--accent); border-radius: 8px; cursor: pointer; font: inherit; font-size: 11px; line-height: 1; padding: 0; }
.tile:hover { background: var(--accent-soft); }
.tile .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.tile .hx { font-weight: 700; font-size: 15px; line-height: 22px; height: 22px; letter-spacing: .02em; }
.tile .tl { color: var(--muted); }
.add-bar { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 8px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.add-bar .tiles { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.add-bar .hint { font-size: 12px; text-align: center; }
.note.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--accent-soft); }
.lb-del { margin-left: 16px; border: 1px solid #666; background: transparent; color: #eee; width: 30px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer; }
.lb-del .ico { width: 17px; height: 17px; }
.lb-del:hover { border-color: var(--danger); color: var(--danger); }
.section.l1 { border-top: 1px solid var(--line); padding-top: 12px; } .section.l1 .title { font-size: 24px; }
.section.l2 .title { font-size: 20px; }
.section.l3 .title { font-size: 17px; }
.section.l4 .title { font-size: 15px; font-style: italic; }
.section.l1 .title:not(.placeholder) { color: var(--h1); }
.section.l2 .title:not(.placeholder) { color: var(--h2); }
.section.l3 .title:not(.placeholder) { color: var(--h3); }
.section.l4 .title:not(.placeholder) { color: var(--h4); }

/* ---- drag to reorder (to-do rows, cards and headings, outline rows) ---- */
.mini.grab { cursor: grab; letter-spacing: -2px; font-size: 12px; touch-action: none; }
.slide { transition: transform .16s ease; }
.lifted { transition: none !important; position: relative; z-index: 5; }
.note.lifted, .section-wrap.lifted { box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.section-wrap.lifted { background: var(--bg); border-radius: 8px; }
.todo-row.lifted { background: var(--panel); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
body.reordering, body.reordering * { user-select: none; cursor: grabbing !important; }

.note { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
/* Anything under a collapsed section: notes, sub-headings and the insertion gaps between them. */
.hidden-by-section { display: none !important; }
.media-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
:root { --thumb-w: 180px; }
.thumb { position: relative; width: var(--thumb-w); height: calc(var(--thumb-w) * 0.75); border-radius: 8px; overflow: hidden;
  background: #000; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.uploading { background: var(--panel-2); display: grid; place-items: center; }
.thumb.uploading img { position: absolute; inset: 0; opacity: .55; }
.thumb.uploading .up-pct { position: relative; z-index: 1; font-size: 13px; font-weight: 600; color: white; background: rgba(0,0,0,.55); border-radius: 999px; padding: 2px 9px; }
/* Uncropped previews: each picture keeps its own aspect ratio, fits inside the size step in both
   directions, and is never scaled up past its real pixels (a 200x50 image stays a 200x50 strip). */
body.uncropped .thumb { width: auto; height: auto; max-width: 100%; }
body.uncropped .thumb img { width: auto; height: auto; max-width: min(var(--thumb-w), 100%); max-height: var(--thumb-w); object-fit: contain; }
.thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* a picture with its title under it */
.thumb-wrap { margin: 0; display: flex; flex-direction: column; width: var(--thumb-w); max-width: 100%; }
body.uncropped .thumb-wrap { width: auto; }
.thumb-title { font-size: 12px; line-height: 1.35; color: var(--muted); padding: 3px 4px 0; outline: none; border-radius: 4px; min-height: 1.35em;
  overflow-wrap: anywhere; }
.thumb-title:empty::before { content: attr(data-placeholder); opacity: 0; transition: opacity .12s; }
.thumb-wrap:hover .thumb-title:empty::before { opacity: .7; }
.thumb-title:focus { background: var(--panel-2); color: var(--text); }
.thumb-title:focus:empty::before { content: none; }
body.continuous .thumb-title:empty { display: none; }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 34px;
  text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.thumb .dur { position: absolute; right: 6px; bottom: 4px; font-size: 12px; color: white; background: rgba(0,0,0,.55);
  padding: 1px 6px; border-radius: 10px; }
.text { white-space: pre-wrap; outline: none; border-radius: 8px; padding: 6px 8px; margin: 0 -8px; min-height: 1.5em; }
.text:empty::before { content: "Empty note — click to write"; color: var(--muted); font-style: italic; }
.text:focus { background: var(--panel-2); }
.text ul, .text ol { margin: 2px 0; padding-left: 24px; }
.text li { margin: 1px 0; }
.fmt { display: none; gap: 2px; margin: 4px 0 0 -4px; }
/* Only while the note text itself has the caret, not its data inputs. */
.note:has(.text:focus) .fmt { display: flex; }
.fmt button { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 13px;
  min-width: 30px; padding: 2px 8px; border-radius: 6px; }
.fmt button:hover { background: var(--accent-soft); }
mark { background: var(--mark); color: inherit; border-radius: 3px; }
.clips { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.clip { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.clip audio { height: 32px; }
.clip .tr { flex-basis: 100%; color: var(--text); font-style: italic; }
/* titles and section intros */
.note-title { font-weight: 700; font-size: 16px; outline: none; border-radius: 6px; padding: 2px 6px; margin: 0 -6px 4px; }
.note-title[contenteditable="true"]:focus { background: var(--panel-2); }
.note-title:empty::before { content: "Title"; color: var(--muted); font-weight: 500; }
.section-intro { margin: -2px 0 8px 28px; color: var(--muted); font-size: 14px; }
.section-intro:empty::before { content: "Intro text"; color: var(--muted); font-style: italic; }
.mini.ttl { font-weight: 700; font-family: Georgia, serif; }
body.continuous .section .intro, body.continuous .mini.ttl { display: none; }

/* structured data */
.offline { background: var(--danger); color: white; text-align: center; font-weight: 600; padding: 8px 12px; }
/* While a search filters the document: a pill held at the foot of the window, with Show all. */
.search-banner { position: sticky; bottom: 12px; z-index: 5; margin: 18px auto 0; display: flex; align-items: center; gap: 12px;
  width: fit-content; max-width: 100%; padding: 7px 8px 7px 16px; border-radius: 999px; background: var(--accent); color: white;
  font-size: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .22); }
.search-banner button { flex: none; border: 0; border-radius: 999px; padding: 5px 12px; background: rgba(255, 255, 255, .22); color: white;
  font: inherit; font-weight: 600; cursor: pointer; }
.search-banner button:hover { background: rgba(255, 255, 255, .35); }
.data-block { margin-top: 8px; padding: 8px 10px; background: var(--panel-2); border-radius: 8px; font-size: 13px; }
.data-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.data-head .mini { opacity: 0; }
.data-block:hover .data-head .mini, .data-block.open .data-head .mini.done { opacity: 1; }
.data-tools { display: flex; gap: 2px; }
.data-block.closed { cursor: pointer; }
.data-block.closed:hover { box-shadow: inset 0 0 0 1px var(--line); }
.data-block.open { box-shadow: inset 0 0 0 1px var(--accent); }
.data-grid .none { grid-column: 1 / -1; color: var(--muted); font-style: italic; }
.data-name { font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.data-grid { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; align-items: center; }
.data-grid .k { color: var(--muted); }
.data-grid.edit { gap: 6px 12px; }
.data-grid .v { display: flex; align-items: center; gap: 6px; }
.data-grid input, .data-grid select { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 6px; max-width: 220px; }
.data-grid input[type="number"] { width: 110px; }
.data-grid .unit { color: var(--muted); }
.chip { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: 13px; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.data-add-wrap { position: relative; display: inline-block; margin-top: 6px; }
.data-add { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 6px; font: inherit; font-size: 13px; border-radius: 6px; }
.data-add:hover { color: var(--accent); background: var(--panel-2); }
.attach-menu { left: 0; transform: none; top: 100%; min-width: 180px; }
.menu-note { display: block; color: var(--muted); font-size: 12px; padding: 4px 10px; }
/* A card's ⋯ menu: cut, copy, paste after it, save a heading as a template. */
.card-menu { left: auto; right: 0; top: 100%; transform: none; min-width: 210px; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
.card-menu button { display: flex; align-items: center; gap: 16px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px;
  text-align: left; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.card-menu button:hover { background: var(--accent-soft); }
.card-menu .key { margin-left: auto; font: 11px/1 ui-monospace, Consolas, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; }
/* What is cut or copied, floating over the bottom of the document until pasted or cleared. */
.clip-bar { position: fixed; bottom: 18px; left: calc(140px + 50%); transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 6px 4px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.18); font-size: 13px; }
.clip-bar button { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 10px; border-radius: 999px; }
.clip-bar button:hover { background: var(--accent-soft); }
.clip-bar .clear { color: var(--muted); font-weight: 400; font-size: 16px; padding: 2px 8px; }
@media (max-width: 800px) { .clip-bar { left: 50%; } }
.section-wrap { position: relative; }
.section-wrap.flash { animation: flash 1.2s ease-out; }
.summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px 28px; }
.summary span { background: var(--accent-soft); color: var(--text); border-radius: 8px; padding: 1px 8px; font-size: 12px; }
.section-data { margin: 0 0 8px 28px; }
.defaults-menu { left: auto; right: 0; transform: none; top: 100%; min-width: 260px; text-align: left; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.defaults-menu .menu-title { font-size: 12px; color: var(--muted); }
.defaults-menu label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.menu-link { border: 0; background: transparent; color: var(--accent); text-align: left; padding: 4px 0; cursor: pointer; font: inherit; font-size: 13px; }
.menu-link:hover { text-decoration: underline; }
.doc-defaults { top: 38px; }
.panel { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20; display: grid; place-items: center; padding: 16px; }
.panel-card { width: min(960px, 96vw); max-height: 92vh; overflow: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel); z-index: 1; }
.panel-head h3 { margin: 0; font-size: 17px; }
.panel-body { padding: 14px 18px 18px; }
.muted { color: var(--muted); font-size: 13px; }
.data-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.data-table th, .data-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table th { cursor: pointer; user-select: none; color: var(--muted); font-weight: 600; position: sticky; top: 52px; background: var(--panel); }
.data-table th.sorted { color: var(--accent); }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--panel-2); }
.data-table td.label { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.data-table td.empty { color: var(--muted); }
.tpl-layout { display: grid; grid-template-columns: 220px 1fr; gap: 18px; }
@media (max-width: 700px) { .tpl-layout { grid-template-columns: 1fr; } }
.tpl-list { display: flex; flex-direction: column; gap: 4px; }
.tpl-item { border: 0; background: transparent; color: var(--text); text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.tpl-item:hover { background: var(--panel-2); }
.tpl-item.on { background: var(--accent-soft); font-weight: 600; }
.tpl-new { border: 1px dashed var(--line); background: transparent; color: var(--accent); padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; margin-top: 6px; }
.tpl-new:hover { background: var(--panel-2); }
.tpl-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.tpl-head input { flex: 1; font: inherit; font-size: 18px; font-weight: 600; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
button.danger { border: 1px solid var(--line); background: transparent; color: var(--danger); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
button.danger:hover { border-color: var(--danger); }
.field-list { display: flex; flex-direction: column; }
.field-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.field-row.on { background: var(--accent-soft); border-radius: 8px; }
.field-row .ftext { flex: 1; min-width: 0; }
.field-row .fname { font-weight: 600; }
.field-row .fdesc { color: var(--muted); font-size: 12px; }
.field-row .fbtns button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 14px; }
.field-row .fbtns button:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.field-row .fbtns button:disabled { opacity: .3; cursor: default; }
.field-form { margin-top: 12px; padding: 12px 14px; background: var(--panel-2); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.field-form h4 { margin: 0; }
.field-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field-form input, .field-form select, .field-form textarea { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.field-form .row { display: flex; gap: 10px; }
.field-form label.ask-check { flex-direction: row; align-items: flex-start; margin: 0; }
.field-form .row label { flex: 1; }
.form-btns { display: flex; justify-content: flex-end; gap: 8px; }
.form-btns button { border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.form-btns button[type="submit"], .form-btns button.primary { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; }
.form-btns button.danger { color: var(--danger); border-color: var(--danger); }
.form-btns button.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.ask p { margin: 0 0 14px; max-width: 60ch; }
/* The shortcut list. */
.hotkeys { columns: 2 320px; column-gap: 28px; }
.hotkeys h4 { margin: 0 0 6px; break-after: avoid; }
.hotkeys table { border-collapse: collapse; width: 100%; margin-bottom: 16px; break-inside: avoid; font-size: 13px; }
.hotkeys td { padding: 3px 6px 3px 0; vertical-align: top; }
.hotkeys td.keys { white-space: nowrap; color: var(--muted); width: 1%; }
.hotkeys kbd { font: 12px/1 ui-monospace, Consolas, monospace; color: var(--text); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; background: var(--panel-2); }
.ask-check { display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; font-size: 13px; color: var(--muted); cursor: pointer; }
/* The selected element (j / k, or a click) and one picked up with m. */
.content > [data-element-id].selected { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.content > .section-wrap.selected { border-radius: 8px; outline-offset: 2px; }
.content > [data-element-id].lifted { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 12px; background: var(--accent-soft); }
/* Ticked with x: a tint, kept distinct from the cursor's outline so both read at once. */
.content > .note.checked { background: var(--accent-soft); border-color: var(--accent); }
.content > .section-wrap.checked { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); border-radius: 8px; }
.panel-card:has(.ask) { width: min(520px, 96vw); }
body.continuous .data-add-wrap, body.continuous .data-head .mini, body.continuous .section .data { display: none; }

/* to-do lists */
.todo-items { display: flex; flex-direction: column; gap: 2px; }
.todo-row { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; }
.todo-row input[type="checkbox"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; flex: none; }
/* Out to the right of the row, so a click anywhere beside the words puts the caret in the item.
   (Presses beside the card, outside it, are kept from reaching the text by the scroller's handler.) */
.todo-text { flex: 1 1 auto; min-width: 4em; outline: none; border-radius: 6px; padding: 2px 6px; min-height: 1.5em; white-space: pre-wrap; }
.todo-text[contenteditable="true"]:focus { background: var(--panel-2); }
.todo-row.done .todo-text { text-decoration: line-through; color: var(--muted); }
/* A note's table: the grid (scrolling sideways when wide), its actions and the plot. */
.note-table { margin: 6px 0 4px; }
.note-table .tbl-wrap { overflow-x: auto; margin: 4px 0 6px; }
.tbl { border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 0; vertical-align: top; position: relative; }
.tbl th { background: var(--panel-2); font-weight: 600; text-align: left; }
.tbl .cell { min-width: 4.5em; max-width: 22em; padding: 4px 8px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.4em; }
.tbl .cell[contenteditable="true"]:focus { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tbl .cell:empty::before { content: attr(data-ph); color: var(--muted); font-weight: 400; }
.tbl td.tbl-rowtools { border: 0; padding-left: 2px; }
.tbl .tbl-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 3px 4px; border-radius: 4px; visibility: hidden; }
.tbl th .tbl-x { position: absolute; top: 2px; right: 2px; }
.tbl tr:hover .tbl-rowtools .tbl-x, .tbl th:hover .tbl-x { visibility: visible; }
.tbl .tbl-x:hover { color: var(--danger); background: var(--panel-2); }
.tbl-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--muted); margin: 2px 0 4px; }
.tbl-actions button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 8px; font: inherit; border-radius: 6px; }
.tbl-actions button:hover { color: var(--accent); background: var(--panel-2); }
.tbl-actions button.rm-table:hover { color: var(--danger); }
.tbl-actions select { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; max-width: 12em; }
.tbl-plotset { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tbl-plotbox .tbl-plot { display: block; width: 100%; max-width: 760px; height: auto; margin-top: 6px; }
.tbl-plot .grid { stroke: var(--line); stroke-width: 1; }
.tbl-plot .axis { stroke: var(--muted); stroke-width: 1.5; }
.tbl-plot .tick { fill: var(--muted); font-size: 11px; }
.tbl-plot .name { fill: var(--text); font-size: 12px; font-weight: 600; }
.tbl-plot .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.tbl-plot .pt { fill: var(--accent); }
/* The point of the row with the caret. */
.tbl-plot .pt.cur { fill: var(--panel); stroke: var(--accent); stroke-width: 3; }

/* A sub-item, indented under its item. */
.todo-row.sub { margin-left: 28px; }
.todo-title { font-weight: 700; font-size: 16px; outline: none; border-radius: 6px; padding: 2px 6px; margin: 0 0 4px -6px; }
.todo-title[contenteditable="true"]:focus { background: var(--panel-2); }
.todo-grip { color: var(--muted); cursor: grab; font-size: 12px; letter-spacing: -2px; padding: 3px 2px 0 0; user-select: none; flex: none;
  touch-action: none; }
.todo-grip:hover { color: var(--text); }
.todo-row { transition: opacity .35s; }
.todo-row.slide { transition: opacity .35s, transform .16s ease; }
.todo-row.fading { opacity: 0; }
.todo-add { display: block; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 6px 8px; margin-top: 2px; font: inherit; font-size: 14px; border-radius: 6px; }
.todo-add:hover { color: var(--accent); background: var(--panel-2); }
.meta.todo-progress { display: block; }
.todo-hide { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; padding: 2px 6px; margin-left: 6px; border-radius: 6px; }
.todo-hide:hover { background: var(--panel-2); }

.meta { display: none; font-size: 12px; color: var(--muted); margin-top: 6px; }
body.show-times .meta { display: block; }

.live-btn { border: 1px solid var(--danger); background: transparent; color: var(--danger); padding: 6px 10px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; font-weight: 600; }
.live-btn:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* ---- view menu ---- */
.view-wrap { position: relative; }
/* The menu button never wraps; when the bar is tight only its triangle is left. */
#view-btn { white-space: nowrap; flex: none; }
.doc-head.compact #view-btn .lbl { display: none; }
.doc-head > #share-btn, .doc-head > #live-btn { flex: none; white-space: nowrap; }
.view-menu .menu-section { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 0 2px; }
.view-menu .menu-section:first-child { margin-top: 0; }
.view-menu .menu-item { border: 0; background: transparent; color: var(--text); text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer; font: inherit; width: 100%; }
.view-menu .menu-item:hover { background: var(--accent-soft); }
.view-btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
/* The bin on a document list entry: there on hover (and always on touch screens, which cannot hover). */
.doc-list li { position: relative; }
.doc-list li .doc-del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; opacity: 0; transition: opacity .12s; }
.doc-list li:hover .doc-del, .doc-list li:focus-within .doc-del { opacity: 1; color: var(--danger); }
@media (hover: none) { .doc-list li .doc-del { opacity: .6; } }
.doc-list li .doc-del:hover { background: color-mix(in srgb, var(--danger) 12%, var(--panel-2)); }
.doc-list li:hover .t, .doc-list li:hover .d { padding-right: 28px; }
.view-menu { position: absolute; right: 0; top: 38px; z-index: 4; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 8px 10px; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.view-menu label { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.view-row { display: flex; align-items: center; gap: 6px; }
.view-row span { flex: 1; }
.view-row button { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 8px; cursor: pointer; font-size: 16px; }
.view-row button.wide { width: auto; flex: 1; font-size: 13px; padding: 0 10px; }
.sections-row { border-top: 1px solid var(--line); padding-top: 8px; }

/* ---- continuous document: no controls, hairline separators, no cards ---- */
body.continuous .gap, body.continuous .add-bar, body.continuous .mini, body.continuous .note-tools { display: none; }
body.continuous .note { background: transparent; border: 0; border-radius: 0; padding: 10px 0 12px; margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
body.continuous .note:last-of-type { border-bottom: 0; }
body.continuous .section { margin-top: 22px; }
body.continuous .section.l1 { border-top: 0; }
body.continuous .section:hover { background: transparent; }
body.continuous .text { margin: 0; padding: 0; cursor: text; }
body.continuous .text:empty::before { content: none; }
body.continuous .section { cursor: text; user-select: text; }
body.continuous .section .chev { cursor: pointer; padding: 4px 6px; margin-left: -6px; border-radius: 6px; }
body.continuous .section .chev:hover { background: var(--panel-2); color: var(--text); }
body.continuous .section .title { cursor: text; }

/* ---- lightbox ---- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 10; }
.lb-close { position: absolute; top: 14px; right: 18px; border: 0; background: rgba(255,255,255,.12); color: white;
  width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; z-index: 3; }
/* The controls float over the picture (it is laid out after them), so every bit of them is clickable. */
.lb-all { position: absolute; top: 18px; right: 70px; z-index: 3; border: 1px solid #666; background: rgba(0,0,0,.45); color: #eee;
  padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; }
.lb-all:hover { border-color: #aaa; }
.lb-all.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 45%, rgba(0,0,0,.45)); color: #fff; }
.lb-more { position: relative; display: inline-flex; }
.lb-menu { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column;
  background: #23262e; border: 1px solid #555; border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.lb-menu button { border: 0; background: transparent; color: #eee; font: inherit; font-size: 13px; text-align: left; padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.lb-menu button:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.lb-menu button:disabled { opacity: .35; cursor: default; }
.lb-body { position: relative; max-width: 96vw; max-height: 88vh; }
.lb-body video { display: block; max-width: 96vw; max-height: 88vh; }
/* Pictures: a fixed viewport with the picture moved inside it by a transform. */
.lb-stage { position: relative; width: 96vw; height: 84vh; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.lb-stage.dragging { cursor: grabbing; }
.lb-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lb-world img { display: block; max-width: none; max-height: none; }
.lb-world .lb-placeholder { position: absolute; left: 0; top: 0; }
.lb-world .lb-full { position: relative; opacity: 0; transition: opacity .3s ease; }
.lb-world .lb-full.shown { opacity: 1; }
.lb-world svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lb-zoom { min-width: 36px; color: #aaa; }
/* The video with its speed menu overlaid top right; the menu fades like the player's own controls. */
.lb-video { position: relative; display: inline-block; max-width: 96vw; max-height: 88vh; }
.lb-speed { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; color: #eee; font-size: 13px;
  background: rgba(0,0,0,.55); border-radius: 999px; padding: 4px 6px 4px 12px; opacity: 0; transition: opacity .25s; }
.lb-video.active .lb-speed, .lb-speed:focus-within { opacity: 1; }
.lb-video:not(.ready) .lb-speed { display: none; }
.lb-speed select { font: inherit; font-size: 13px; color: #eee; background: #2a2d36; border: 1px solid #555; border-radius: 999px; padding: 2px 6px; }
.lb-speed select option { background: #2a2d36; color: #eee; }
.lb-speed .vbtn { font: inherit; font-size: 13px; color: #eee; background: transparent; border: 1px solid #555; border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.lb-speed .vbtn:hover { background: rgba(255,255,255,.12); }
.lb-speed .vbtn:disabled { opacity: .7; cursor: default; }
.lb-speed .vbtn.icon { width: 28px; height: 26px; padding: 0; display: grid; place-items: center; border-color: transparent; background: rgba(255,255,255,.08); }
.lb-speed .vbtn.icon:hover { background: rgba(255,255,255,.2); }
.lb-speed .vbtn.icon svg { width: 16px; height: 16px; fill: #eee; }
.lb-info { flex-wrap: wrap; }
.lb-info .buf { flex-basis: 100%; text-align: center; color: #8f94a3; }
.lb-speed .vsep { width: 1px; align-self: stretch; background: #555; margin: 0 2px; }
/* The image editor. */
.img-editor { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.panel.wide .img-editor { flex: 1; }
.ie-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ie-tools .seg, .ie-textbox .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ie-tools .seg button, .ie-textbox .seg button { border: 0; border-left: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 5px 10px; cursor: pointer; font: inherit; }
.ie-tools .seg button:first-child, .ie-textbox .seg button:first-child { border-left: 0; }
.ie-tools .seg button.on, .ie-textbox .seg button.on { background: var(--accent); color: white; font-weight: 600; }
.ie-tools .colours { display: inline-flex; gap: 4px; }
.ie-tools .swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.ie-tools .swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.ie-hint { font-size: 12px; }
.ie-stage { flex: 1; min-height: 300px; display: grid; place-items: center; background: #111; border-radius: 10px; overflow: hidden; position: relative; }
/* The Text tool's box, beside where the text goes; the picture behind shows the draft as it is typed. */
.ie-textbox { position: absolute; z-index: 2; width: min(320px, calc(100% - 8px)); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.ie-textbox textarea { width: 100%; box-sizing: border-box; min-height: 3.4em; resize: vertical; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
.ie-textbox .form-btns { align-self: stretch; }
.ie-stage canvas { display: block; cursor: crosshair; touch-action: none; }
.img-editor .form-btns { align-items: center; }
.img-editor .ie-size { margin-right: auto; }
/* A short message over the viewer and panels. */
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 70; background: rgba(20,22,28,.92); color: #fff;
  padding: 9px 16px; border-radius: 999px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
#toast button { border: 0; background: transparent; color: #8fb3ff; font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
/* Undo and redo in the header. */
.hist-btns { display: inline-flex; gap: 2px; flex: none; }
.icon-btn.hist { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); padding: 0; }
.icon-btn.hist:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.icon-btn.hist:disabled { opacity: .35; cursor: default; }
.icon-btn.hist .ico { width: 18px; height: 18px; }
/* The trash. */
.trash { min-width: min(680px, 90vw); }
.trash-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.trash-head .big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trash-head .muted { flex: 1; min-width: 200px; font-size: 13px; }
.trash-head .empty, .trash-item .restore { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.trash-head .empty { border-color: var(--danger); color: var(--danger); background: transparent; }
.trash-head .empty:disabled { opacity: .4; cursor: default; }
.trash-item { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto 30px; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.trash-item .label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-item .where { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-item .size { text-align: right; font-variant-numeric: tabular-nums; }
/* Storage. */
.storage { min-width: min(720px, 90vw); }
.sto-total { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sto-total .big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sto-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--panel-2); }
.sto-bar i { display: block; height: 100%; }
.sto-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 14px; font-size: 13px; color: var(--muted); }
.sto-legend b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sto-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.sto-tabs button { border: 0; border-left: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 5px 12px; cursor: pointer; font: inherit; }
.sto-tabs button:first-child { border-left: 0; }
.sto-tabs button.on { background: var(--accent); color: white; font-weight: 600; }
.sto-doc-head { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 120px 80px; gap: 10px; align-items: center; padding: 7px 6px; border-radius: 8px; cursor: pointer; }
.sto-doc-head:hover { background: var(--panel-2); }
.sto-doc-head .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sto-doc-head .count { font-size: 12px; white-space: nowrap; }
.sto-doc-head .meter { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.sto-doc-head .meter i { display: block; height: 100%; background: var(--accent); }
.sto-doc-head .size, .sto-file .size { text-align: right; font-variant-numeric: tabular-nums; }
.sto-doc-files { margin: 0 0 8px 26px; border-left: 2px solid var(--line); padding-left: 8px; }
.sto-file { display: grid; grid-template-columns: 86px minmax(0, 1fr) 80px 30px; gap: 10px; align-items: center; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.sto-file:hover { background: var(--panel-2); }
.sto-file .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sto-file .kind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sto-file .k-video { color: #d97706; } .sto-file .k-photo { color: #2563eb; } .sto-file .k-recording { color: #059669; }
.sto-del { border: 0; background: transparent; color: var(--muted); width: 28px; height: 26px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.sto-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--panel-2)); }
.sto-del .ico { width: 16px; height: 16px; }
.sto-more { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; padding: 5px 6px; margin-right: 10px; }
.sto-more:hover { text-decoration: underline; }
/* The speed test. */
.speedtest p { margin: 0 0 12px; max-width: 64ch; }
.st-results { border-collapse: collapse; font-size: 15px; margin-bottom: 8px; }
.st-results td { padding: 4px 18px 4px 0; }
.st-results td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.st-means h4 { margin: 12px 0 4px; }
.st-est { border-collapse: collapse; font-size: 13px; }
.st-est th, .st-est td { padding: 3px 14px 3px 0; text-align: left; font-variant-numeric: tabular-nums; }
.st-est th { color: var(--muted); font-weight: 600; }
.panel-card:has(.speedtest) { width: min(640px, 96vw); }
/* Loading: the thumbnail stands in and a thin bar along the top of the stage shows the download. */
.lb-progress { position: absolute; left: 0; top: 0; right: 0; height: 3px; background: rgba(255,255,255,.12); pointer-events: none; }
.lb-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.lb-progress.indeterminate i { width: 30%; animation: lb-indeterminate 1.1s ease-in-out infinite alternate; }
@keyframes lb-indeterminate { from { margin-left: 0; } to { margin-left: 70%; } }
.lb-placeholder { filter: saturate(.9); }
.lb-caption { color: #ccc; font-size: 13px; margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* Facts about the file, filled in as they become known: size, pixels, length, name. */
.lb-info { color: #8f94a3; font-size: 12px; margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.lb-info span + span::before { content: "·"; margin-right: 6px; color: #666; }
.lb-info .cap { color: #ccc; }
.lb-title { border: 1px solid #555; background: rgba(255,255,255,.08); color: #eee; padding: 4px 10px; border-radius: 8px; font: inherit; font-size: 13px; min-width: 220px; }
.lb-title:focus { outline: none; border-color: #aaa; }
.lb-title::placeholder { color: #888; }
.lb-btn { border: 1px solid #666; background: transparent; color: #eee; padding: 3px 10px; border-radius: 8px; cursor: pointer; }
.lb-btn:hover:not(:disabled) { border-color: #aaa; }
.lb-btn:disabled { opacity: .35; cursor: default; }
.lb-btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255,255,255,.12); color: white;
  width: 44px; height: 64px; border-radius: 10px; font-size: 34px; line-height: 1; cursor: pointer; z-index: 3; }
.lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
.thumb.dragging { opacity: .4; }
.thumb.drop-left { box-shadow: -3px 0 0 var(--accent); }
.thumb.drop-right { box-shadow: 3px 0 0 var(--accent); }
.thumb[draggable="true"] { cursor: grab; }

@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 30% 0 0; z-index: 5; transform: translateX(-100%); transition: transform .2s; }
  body.sidebar-hidden .sidebar { display: flex; } /* the wide-screen hide does not apply to the overlay */
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  #search { width: 140px; }
  .elements { padding: 10px 12px 60px; }
}

/* Screenshots: the capture that stays open, and the crop editor. */
/* A big frame gets a panel the size of the window; the stage takes whatever height is left. */
.panel.wide .panel-card { width: 98vw; height: 96vh; max-height: 96vh; display: flex; flex-direction: column; }
.panel.wide .panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel.wide .shot-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel.wide .shot-stage { flex: 1; height: auto; min-height: 200px; }
.panel-card:fullscreen { width: 100vw; height: 100vh; max-height: none; border-radius: 0; border: 0; display: flex; flex-direction: column; }
.panel-card:fullscreen .panel-body, .panel-card:fullscreen .shot-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel-card:fullscreen .shot-stage { flex: 1; height: auto; }
.shot-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.shot-tools .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.shot-tools .seg button { border: 0; border-left: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 5px 10px; cursor: pointer; font: inherit; min-width: 34px; }
.shot-tools .seg button:first-child { border-left: 0; }
.shot-tools .seg button.on { background: var(--accent); color: white; font-weight: 600; }
.shot-tools .fullscreen { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 5px 10px; border-radius: 8px; cursor: pointer; font: inherit; }
.shot-tools .zval { min-width: 36px; }
.shot-tools .hint { font-size: 12px; }
.shot-stage { position: relative; width: 100%; height: 60vh; overflow: hidden; user-select: none; touch-action: none; cursor: crosshair; border-radius: 8px; background: #000; }
.shot-stage.panning { cursor: grab; }
.shot-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; image-rendering: auto; }
.shot-sel { position: absolute; border: 2px solid var(--accent); background: rgba(90, 130, 255, .12); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); pointer-events: none; box-sizing: border-box; }
.shot-hover { position: absolute; border: 2px dashed #ffd54a; pointer-events: none; box-sizing: border-box; }
.shot-edges { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; image-rendering: pixelated; }
/* The floating screenshot button (a Document Picture-in-Picture window; app.css is shared with it). */
body.pip { margin: 0; padding: 12px 14px; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif; display: flex; flex-direction: column; gap: 8px; min-height: 100vh; box-sizing: border-box; }
body.pip .pip-head { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pip .pip-doc { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
body.pip .pip-target { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
body.pip .pip-note { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
body.pip .pip-shoot { font: inherit; font-weight: 600; padding: 10px; border: 0; border-radius: 10px; background: var(--accent); color: white; cursor: pointer; }
body.pip .pip-shoot:disabled { opacity: .6; cursor: default; }
body.pip .pip-count { font-size: 48px; font-weight: 700; text-align: center; line-height: 1; }
body.pip .pip-status { font-size: 12px; min-height: 1.4em; }
body.pip .pip-row { display: flex; gap: 6px; }
body.pip .pip-row button { flex: 1; font: inherit; font-weight: 600; padding: 10px 6px; border: 0; border-radius: 10px; background: var(--accent); color: white; cursor: pointer; }
body.pip .pip-row .pip-rec { background: var(--danger); }
body.pip .pip-row button:disabled { opacity: .6; cursor: default; }
body.pip .pip-mic { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
body.pip .pip-recording { display: flex; align-items: center; gap: 8px; font-weight: 600; }
body.pip .pip-recording .dot { color: var(--danger); animation: rec-blink 1s steps(2) infinite; }
body.pip .pip-recording .pip-stop { margin-left: auto; font: inherit; padding: 4px 12px; border: 1px solid var(--danger); border-radius: 8px; background: transparent; color: var(--danger); cursor: pointer; }
/* The recording indicator in the main window: always visible, with the only way to stop short of Chrome's own bar. */
.rec-state { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px;
  background: var(--panel); color: var(--text); border: 1px solid var(--danger); border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); font-weight: 600; }
.rec-state .dot { color: var(--danger); animation: rec-blink 1s steps(2) infinite; }
.rec-state .time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
.rec-state button { font: inherit; font-weight: 600; padding: 4px 14px; border: 0; border-radius: 999px; background: var(--danger); color: white; cursor: pointer; }
@keyframes rec-blink { to { opacity: .25; } }
/* The camera panel: live preview with the controls around it. */
.cam-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.cam-tools select { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; max-width: 260px; }
.cam-mic { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cam-stage { background: #000; border-radius: 10px; overflow: hidden; display: grid; place-items: center; max-height: 70vh; }
.cam-stage video { display: block; max-width: 100%; max-height: 70vh; }
.cam-btns { margin-top: 10px; align-items: center; }
.cam-btns .cam-size { margin-right: auto; }
body.pip .pip-row .pip-cam { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.shot-tools .analysing { font-size: 12px; }
.shot-tools .seg button:disabled { opacity: .5; cursor: default; }
/* The countdown before a screenshot: big enough to read from across the room. */
/* The capture prompt: what is shared, a small live preview, the countdown and the ways on. */
.cap-prompt { display: flex; flex-direction: column; gap: 10px; }
.cap-what { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cap-desc { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cap-change { border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 4px 12px; border-radius: 8px; cursor: pointer; font: inherit; flex: none; }
.cap-change:hover { background: var(--panel-2); }
.cap-preview { position: relative; background: #000; border-radius: 10px; overflow: hidden; display: grid; place-items: center; height: 240px; }
.cap-preview video { display: block; max-width: 100%; max-height: 240px; }
.cap-ended { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: #fff; font-size: 14px; }
.cap-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.cap-opts label { display: inline-flex; align-items: center; gap: 6px; }
.cap-opts select { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.cap-btns { flex-wrap: wrap; }
#countdown { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; user-select: none; }
#countdown .num { font-size: min(40vh, 240px); font-weight: 700; line-height: 1; }
#countdown .sub { font-size: 15px; opacity: .85; }
.shot-btns { margin-top: 10px; align-items: center; }
.shot-btns .shot-size { margin-right: auto; }
.shot-fps { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.shot-fps select { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }