/* cool porcelain + teal: modern and quiet, so the photos stay the star */
  :root { --t-head: 1.05rem; --t-body: 0.92rem; --t-small: 0.85rem; --t-tiny: 0.75rem;
    --bg: #F3F5F7; --card: #FFFFFF; --ink: #0F1417; --muted: #5B6672;
    --line: #E3E8EE; --accent: #0F766E; --accent-soft: #DBF0EB; --accent-ink: #FFFFFF;
    --amber: #9A6B10; --good: #187339; --bad: #B33231; --wait: #8A6A14;
    --chat-me: #0F766E; --chat-bot: #EEF2F5;
    --glow: rgba(15, 118, 110, 0.07);
    --shadow: 0 1px 2px rgba(15,20,23,0.05), 0 8px 24px rgba(15,20,23,0.06);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0E1116; --card: #161B22; --ink: #E9ECEF; --muted: #97A2AD;
      --line: #262E38; --accent: #3DD6B5; --accent-soft: #123229; --accent-ink: #04241C;
      --amber: #E0A94E; --good: #5BC77E; --bad: #EF8B81; --wait: #D9BC6A;
      --chat-me: #0F766E; --chat-bot: #1C232C;
      --glow: rgba(61, 214, 181, 0.05);
      --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.35);
    }
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }  /* hidden always wins, even over display:grid */
  body {
    margin: 0; color: var(--ink);
    background: radial-gradient(70rem 32rem at 50% -12rem, var(--glow), transparent 70%), var(--bg);
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px; line-height: 1.5;
  }
  h1, h2, h3 { letter-spacing: -0.015em; }
  .wrap { max-width: 68rem; margin: 0 auto; padding: 1.2rem 1.2rem 3rem; }

  header { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0 1.2rem; flex-wrap: wrap; }
  .logo {
    width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(135deg, #0F766E, #14B8A6 55%, #2DD4BF);
    display: grid; place-items: center; box-shadow: var(--shadow);
  }
  .logo svg { display: block; }
  .brand h1 { font-size: 1.35rem; margin: 0; font-weight: 800; letter-spacing: -0.02em; }
  .brand .sub { color: var(--muted); font-size: var(--t-small); }
  .statuspill {
    margin-left: auto; display: flex; align-items: center; gap: 0.45rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.35rem 0.85rem; font-size: var(--t-small); color: var(--muted); box-shadow: var(--shadow);
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
  .dot.err { background: var(--bad); }

  .statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.8rem; }
  .card {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 1rem 1.1rem; box-shadow: var(--shadow);
  }
  .stat .big { font-size: 1.65rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
  .stat .label { color: var(--muted); font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.1rem; }
  .libbreak { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.6rem 0.9rem; margin-top: 0.8rem; }
  .libbreak .lbl { color: var(--muted); font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: 0.07em; }
  .libbreak .pill, .pairbox .pill { display: inline-flex; align-items: baseline; gap: 0.35rem; background: rgba(255,255,255,0.05); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: var(--t-body); }
  .libbreak .pill b { font-variant-numeric: tabular-nums; }
  .libbreak .pill.main { background: rgba(52,211,153,0.14); }

  /* years histogram: single series, hover tooltip, baseline-anchored bars */
  .years { margin-top: 0.8rem; }
  .years h2 { font-size: var(--t-small); margin: 0 0 0.6rem; color: var(--muted); font-weight: 600; }
  .chart { display: flex; align-items: flex-end; gap: 2px; height: 74px; }
  .chart .bar {
    flex: 1; min-width: 4px; background: var(--accent); opacity: 0.75;
    border-radius: 4px 4px 0 0; position: relative; transition: opacity 0.15s;
    cursor: default;
  }
  .chart .bar:hover, .chart .bar:focus-visible { opacity: 1; outline: none; }
  .chart .bar .tip {
    display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--bg); font-size: var(--t-tiny); padding: 0.25rem 0.55rem;
    border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; z-index: 2;
  }
  .chart .bar:hover .tip, .chart .bar:focus-visible .tip { display: block; }
  .axis { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--t-tiny); margin-top: 0.3rem; font-variant-numeric: tabular-nums; }

  .maingrid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.9rem; margin-top: 0.9rem; }
  @media (max-width: 760px) { .maingrid { grid-template-columns: 1fr; } }

  .chatcard { display: flex; flex-direction: column; min-height: 30rem; padding: 0; overflow: hidden; }
  /* two-column layouts (tablets, unfolded phones): never stretch the chat
     to the side column's height — cap it near the viewport and keep it in
     view, so the input box is never a screen below the messages */
  @media (min-width: 761px) {
    .chatcard { align-self: start; position: sticky; top: 0.9rem;
                height: min(44rem, calc(100vh - 7rem));
                height: min(44rem, calc(100dvh - 7rem)); }
  }
  .chathead { padding: 0.9rem 1.1rem 0.6rem; border-bottom: 1px solid var(--line); }
  .chathead h2 { margin: 0; font-size: var(--t-head); }
  .chathead .sub { color: var(--muted); font-size: var(--t-small); }
  #log { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
  .msg { max-width: 84%; padding: 0.55rem 0.9rem; border-radius: 14px; white-space: pre-wrap; }
  .me { align-self: flex-end; background: var(--chat-me); color: #fff; border-bottom-right-radius: 4px; }
  .bot { align-self: flex-start; background: var(--chat-bot); border-bottom-left-radius: 4px; }
  .action { align-self: center; color: var(--accent); font-size: var(--t-small); font-weight: 600; }
  .thinking span { display: inline-block; animation: blink 1.2s infinite; }
  .thinking span:nth-child(2) { animation-delay: 0.2s; }
  .thinking span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .thinking span { animation: none; } }
  .chips { display: flex; gap: 0.45rem; padding: 0 1.1rem 0.6rem; flex-wrap: wrap; }
  .chip {
    background: var(--accent-soft); color: var(--ink); border: 0; border-radius: 999px;
    padding: 0.35rem 0.8rem; font: inherit; font-size: var(--t-small); font-weight: 600;
    cursor: pointer; transition: filter 0.15s, transform 0.12s; white-space: nowrap;
  }
  .chip:hover { filter: brightness(0.96); transform: translateY(-1px); }
  form.chatform { display: flex; gap: 0.6rem; padding: 0.8rem 1.1rem; border-top: 1px solid var(--line); }
  input#chatinput {
    flex: 1; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.65rem 0.9rem; font: inherit; font-size: var(--t-head);
  }
  input#chatinput:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  button.primary {
    background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 12px;
    padding: 0.6rem 1.15rem; font: inherit; font-size: var(--t-body); font-weight: 700;
    cursor: pointer; box-shadow: var(--shadow); transition: filter 0.15s;
  }
  button.primary:hover:not(:disabled) { filter: brightness(1.07); }
  button.primary:disabled { opacity: 0.5; cursor: default; }
  button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* ---- form controls: one look everywhere ---------------------------------
     Menus, text boxes, numbers and dates share the chip family's shape —
     the same radius, border and ink as the rest of the page, in both
     themes — instead of the browser's defaults. Range sliders and boxes
     take the accent colour. */
  :root { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6672' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2397A2AD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  }
  select,
  input[type=text], input[type=search], input[type=number], input[type=date],
  input[type=datetime-local], input[type=time], input[type=email], input[type=password],
  input[type=url], input:not([type]), textarea {
    font: inherit; font-size: var(--t-body); color: var(--ink); background: var(--card);
    border: 1px solid var(--line); border-radius: 10px; padding: 0.42rem 0.7rem;
    min-height: 2.15rem; max-width: 100%; box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(15,20,23,0.04) inset; transition: border-color 0.15s, box-shadow 0.15s;
  }
  select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 1.9rem; background-image: var(--chevron);
    background-repeat: no-repeat; background-position: right 0.65rem center;
  }
  select.inline { display: inline-block; min-height: 1.6rem; padding: 0.1rem 1.6rem 0.1rem 0.5rem; font-size: var(--t-small); vertical-align: baseline; margin: 0 0.1rem; background-position: right 0.45rem center; }
  select:hover, input:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  select:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  input[type=search] { -webkit-appearance: none; }
  input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
  input[type=number] { width: 5.5rem; }
  input[type=range] { accent-color: var(--accent); }
  input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; vertical-align: -2px; }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
  select:disabled, input:disabled { opacity: 0.55; cursor: default; }
  label { color: var(--muted); }
  label > select, label > input { margin-left: 0.35rem; }
  .cctl > label { display: inline-flex; align-items: center; gap: 0.35rem; }

  .side { display: flex; flex-direction: column; gap: 0.9rem; }
  .side h2 { font-size: var(--t-head); margin: 0 0 0.45rem; }
  .listrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.32rem 0; font-size: var(--t-body); flex-wrap: wrap; }
  .listrow > span:first-child { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
  .listrow > .chip { flex: 0 0 auto; }
  /* a card's explanation: two lines, then "more" — the page is a tool, not a manual */
  .desc.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .descmore { background: none; border: 0; color: var(--accent); font: inherit; font-size: var(--t-small); font-weight: 600;
              cursor: pointer; padding: 0 0 0.4rem; }
  .listrow .n { margin-left: auto; color: var(--muted); font-size: var(--t-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* long lists read as a table: a rule between rows, room to breathe */
  .tlist > * + * { border-top: 1px solid var(--line); }
  .tlist > .listrow { padding: 0.5rem 0; }
  /* proposal rows: one boxed block each — the name on top with the count
     pinned right, the buttons on their own line in a fixed order (look,
     approve, map… hide at the far right) — and the block you are working
     in lit up, so there is never any doubt which row a button belongs to */
  .prow { border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.75rem 0.6rem; margin: 0.5rem 0; background: var(--card); }
  .prow.open, .prow:focus-within { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
  .prow .phead { display: flex; align-items: baseline; gap: 0.35rem 0.6rem; flex-wrap: wrap; }
  .prow .ptitle { font-weight: 700; font-size: var(--t-body); min-width: 0; overflow-wrap: anywhere; }
  .prow .pmeta { color: var(--muted); font-size: var(--t-small); flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
  .prow .pn { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-small); color: var(--accent);
              background: var(--accent-soft); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; align-self: center; }
  .prow .pacts { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.45rem; }
  .prow .pacts .chip.primary { background: var(--accent); color: var(--accent-ink); }
  .prow .pacts .chip.primary:disabled { opacity: 0.4; cursor: default; }
  .prow .pacts .chip.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); margin-left: auto; }
  .prow .pnest { margin: 0.4rem 0 0; }
  .prow .pnest .prow { margin: 0.4rem 0; background: var(--bg); }
  .badge {
    font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.06em; padding: 0.1rem 0.4rem;
    border-radius: 6px; background: var(--accent-soft); color: var(--accent);
  }
  .qrow { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; font-size: var(--t-body); }
  .qmark { font-size: var(--t-tiny); }
  .qrow.done .qmark { color: var(--good); }
  .qcancel {
    margin-left: auto; background: none; border: 0; color: var(--muted);
    cursor: pointer; font-size: var(--t-body); padding: 0 0.3rem;
  }
  .qcancel:hover { color: var(--bad); }
  .qrow.failed .qmark { color: var(--bad); }
  .qrow.pending .qmark { color: var(--wait); }
  .qrow.qdone .qmark { color: var(--good); }
  .qrow.qbad .qmark { color: var(--bad); }
  .qresult { color: var(--muted); font-size: var(--t-small); }
  .qhead { font-size: var(--t-tiny); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
           margin: 0.6rem 0 0.1rem; padding-top: 0.4rem; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
  .qhead:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  .qrow.qdone, .qrow.qbad { opacity: 0.85; }
  .qrow .qstate { font-size: var(--t-tiny); font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 99px; margin-right: 0.3rem; }
  .qrow.qdone .qstate { background: rgba(52,211,153,.18); color: var(--good); }
  .qrow.qbad .qstate { background: rgba(251,111,127,.18); color: var(--bad); }
  .qrow.qcancelled .qstate { background: rgba(255,255,255,.08); color: var(--muted); }
  .qrow.qbad .qresult { color: var(--bad); }
  .empty { color: var(--muted); font-size: var(--t-small); }

  /* six tabs as a floating segmented pill; scrolls sideways on phones */
  .tabs {
    display: flex; gap: 0.25rem; margin: 1rem 0;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.28rem; box-shadow: var(--shadow);
    width: fit-content; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab {
    background: none; border: 0; border-radius: 999px; cursor: pointer;
    color: var(--muted); font: inherit; font-size: var(--t-body); font-weight: 600;
    padding: 0.45rem 0.95rem; white-space: nowrap; flex: none;
    transition: background 0.15s, color 0.15s;
  }
  .tabs .tab.active { background: var(--accent); color: var(--accent-ink); }
  .tabs .tab:hover:not(.active) { color: var(--ink); background: var(--accent-soft); }
  @media (max-width: 700px) {
    /* phones: wrap onto two rows so every tab is visible, nothing hidden */
    .tabs { flex-wrap: wrap; overflow-x: visible; gap: 0.15rem; border-radius: 20px; }
    .tabs .tab { padding: 0.4rem 0.62rem; font-size: var(--t-small); }
  }
  .ctlrow {
    display: grid; grid-template-columns: 10rem 1fr; gap: 0.9rem; align-items: start;
    padding: 0.55rem 0; border-bottom: 1px solid var(--line);
  }
  .ctlrow:last-of-type { border-bottom: 0; }
  .ctlrow button {
    background: var(--card); color: var(--ink); border: 1px solid var(--line);
    border-radius: 10px; padding: 0.5rem 0.6rem; font-size: var(--t-body); cursor: pointer; width: 100%;
  }
  .ctlrow button:hover:not(:disabled) { border-color: var(--accent); }
  .ctlrow button:disabled { opacity: 0.5; cursor: default; }
  .ctldesc { color: var(--muted); font-size: var(--t-small); line-height: 1.45; }
  .card.terse .ctlrow .ctldesc, .card.terse > .ctldesc { display: none; }
  .card.terse .ctlrow { display: inline-flex; margin: 0.2rem 0.4rem 0.2rem 0; }
  .nightday > summary::-webkit-details-marker { display: none; }
  .whogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
  /* the who's who card in folding groups, each with its count: open what you are working on, fold the rest */
  .whogrp { margin-top: 0.5rem; border-top: 1px solid var(--line); padding-top: 0.35rem; }
  .whogrp > summary { cursor: pointer; font-size: var(--t-body); list-style: none; display: flex; align-items: center; gap: 0.4rem; }
  .whogrp > summary::-webkit-details-marker { display: none; }
  .whogrp > summary::before { content: '▸'; color: var(--muted); font-size: var(--t-small); transition: transform 0.15s; }
  .whogrp[open] > summary::before { transform: rotate(90deg); }
  .whogrp > summary .n { margin-left: 0; color: var(--muted); font-weight: 400; font-size: var(--t-small); }
  .thumbgrid .whobhead { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 100%; width: 100%; margin: 0.4rem 0 0.1rem; font-size: var(--t-small); }
  .thumbgrid .whobhead img, .whobhead img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--accent-soft); flex: 0 0 40px; cursor: default; }
  .whobhead span { flex: 1 1 auto; min-width: 0; }
  .whotile { border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem; background: var(--card); cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
  .whotile:hover { border-color: var(--accent); }
  .whotile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--accent-soft); }
  .whotile .nm { font-weight: 700; font-size: var(--t-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .whotile .sub { font-size: var(--t-tiny); }
  .yearsbar { display: flex; align-items: flex-end; gap: 1px; height: 18px; }
  .yearsbar i { flex: 1 1 0; background: var(--accent); opacity: 0.55; border-radius: 1px 1px 0 0; min-width: 2px; }
  .yearsbar i.gap { background: var(--line); opacity: 1; height: 2px !important; }
  .whobadge { display: inline-block; font-size: var(--t-tiny); padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); margin-right: 0.2rem; }
  .whobadge.warn { background: color-mix(in srgb, #e0a800 25%, transparent); }
  .whofaces { display: flex; flex-wrap: wrap; gap: 4px; }
  .whofaces img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--accent-soft); }
  .whohead { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
  .whohead img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
  .whohead img.chosen { border-color: var(--accent); }
  .whorow { border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem 0.6rem; margin-top: 0.5rem; }
  @media (max-width: 560px) { .ctlrow { grid-template-columns: 1fr; gap: 0.3rem; } }
  .thumbgrid { display: flex; flex-wrap: wrap; gap: 4px; padding: 0.5rem 0 0.8rem; }
  :root { --thumb: 74px; }   /* the sheets' thumbnail size: the slider on every sheet bar */
  /* a sideways swipe that misses a grid must not page back through history */
  html, body { overscroll-behavior-x: none; }
  .thumbgrid img {
    width: var(--thumb); height: var(--thumb); object-fit: cover; border-radius: 6px;
    background: var(--accent-soft); cursor: pointer;
  }
  /* review grids: sideways swipes paint selections, so only vertical
     panning goes to the browser; no accidental image drags or callouts */
  .thumbgrid.propsheet { touch-action: pan-y; user-select: none;
                         -webkit-user-select: none; -webkit-touch-callout: none; }
  .thumbgrid img.nothumb { font-size: var(--t-tiny); color: var(--muted); text-align: center; outline: 1px dashed var(--line); outline-offset: -1px; }
  .thumbgrid img.excluded {
    opacity: 0.3; outline: 2px solid var(--bad); outline-offset: -2px;
  }
  .thumbnote { width: 100%; color: var(--muted); font-size: var(--t-small); }
  /* de-duplicator sheets: one row per group, keeper outlined, copies dimmed */
  .ddgroup { border-top: 1px solid var(--line, #e5e5e5); padding: 0.45rem 0; }
  .ddgroup .members { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.3rem; }
  .ddmember { width: calc(var(--thumb) * 1.62); font-size: var(--t-tiny); color: var(--muted); cursor: pointer; line-height: 1.25; }
  .ddmember img { width: calc(var(--thumb) * 1.62); height: calc(var(--thumb) * 1.22); object-fit: cover; border-radius: 6px; background: var(--accent-soft); display: block; }
  .ddmember.keep img { outline: 3px solid var(--good, #2a9d4a); outline-offset: -3px; }
  .ddmember.copy img { opacity: 0.55; }
  .ddmember .tag { display: inline-block; font-weight: 700; padding: 0 4px; border-radius: 4px; margin-top: 2px; }
  .ddmember.keep .tag { background: var(--good, #2a9d4a); color: #fff; }
  .ddmember.copy .tag { background: var(--bad, #c33); color: #fff; }
  .ddmember .path { overflow-wrap: anywhere; }
  .memory { position: relative; }
  /* memories deserve more than thumbnail size — near-square tiles, three
     to a row in the side column */
  #memories .memory img { width: 108px; height: 108px; border-radius: 10px; }
  .memory .yearbadge {
    position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,0.55);
    color: #fff; font-size: var(--t-tiny); font-weight: 700; padding: 0 0.35rem;
    border-radius: 6px; pointer-events: none;
  }
  /* -- Create tab -- */
  .createwrap { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 1rem; align-items: start; }
  @media (max-width: 900px) { .createwrap { grid-template-columns: 1fr; } }
  #clog { display: flex; flex-direction: column; gap: 0.55rem; max-height: 60vh; overflow-y: auto; padding: 0.4rem 0; }
  #clog .msg { max-width: 92%; }
  .cgrid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.4rem; }
  .cgrid img {
    width: 86px; height: 86px; object-fit: cover; border-radius: 8px;
    background: var(--accent-soft); cursor: pointer; border: 3px solid transparent;
  }
  .cgrid img.picked { border-color: var(--accent); }
  #tray { display: flex; flex-wrap: wrap; gap: 4px; min-height: 40px; margin-bottom: 0.5rem; }
  #tray img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; cursor: pointer; }
  #ccanvas {
    width: 100%; border: 1px solid var(--line); border-radius: 8px;
    touch-action: none; background: #fff; display: block;
  }
  .cctl { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: 0.6rem 0; font-size: var(--t-small); color: var(--muted); }
  .cctl select, .cctl input[type=range] { accent-color: var(--accent); }
  #cbgpick { width: 2.1rem; height: 1.6rem; padding: 0; border: 1px solid var(--line);
             border-radius: 6px; background: none; cursor: pointer; vertical-align: middle; }
  /* phones: one tidy setting per line, control pushed to the right edge */
  @media (max-width: 700px) {
    .cctl { display: block; }
    .cctl > label {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.45rem 0; border-bottom: 1px dashed var(--line);
    }
    .cctl > label:last-child { border-bottom: none; }
    .cctl > label > select { margin-left: auto; max-width: 60%; }
    .cctl > label > input[type=text],
    .cctl > label > input:not([type]) { flex: 1; min-width: 0; }
    .cctl > label > input[type=checkbox] { margin: 0; }
  }
  .cbtns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
  .cbtns button {
    background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px;
    padding: 0.55rem 1rem; font-size: var(--t-body); cursor: pointer;
  }
  .cbtns button.secondary { background: var(--accent-soft); color: var(--ink); }
  .cbtns button:disabled { opacity: 0.45; cursor: default; }
  .machine { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  .machine:last-child { border-bottom: 0; }
  .machinehead { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 600; font-size: var(--t-body); }
  .mwarn { margin-top: 0.4rem; padding: 0.45rem 0.6rem; border-radius: 8px; font-size: var(--t-small);
           background: rgba(220, 60, 60, 0.12); color: #e05b5b; border: 1px solid rgba(220, 60, 60, 0.35); }
  .mwarn.soft { background: rgba(220, 160, 40, 0.12); color: #cf9432; border-color: rgba(220, 160, 40, 0.35); }
  /* the index out of step with Immich: one red line across every page */
  .healthbar { margin: 0.6rem 0 0; padding: 0.55rem 0.8rem; border-radius: 10px; font-size: var(--t-body);
               background: rgba(220, 60, 60, 0.14); color: #e05b5b; border: 1px solid rgba(220, 60, 60, 0.4);
               display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
  .healthbar b { color: inherit; }
  .healthbar .chip { border-color: rgba(220, 60, 60, 0.5); }
  #hubcard .ok { color: var(--good); } #hubcard .notok { color: var(--bad); font-weight: 600; }
  /* one type scale for the whole page: a heading, the body, a quieter small for notes, a tiny for labels and ticks */
  .card h2 { font-size: var(--t-head); margin: 0 0 0.45rem; }
  .card h2 .sub { font-size: var(--t-body); font-weight: 400; }
  .card, .listrow, .tlist, .machinehead, .qrow,
  .mwarn, .healthbar, .ctlrow button, .cbtns button, details summary { font-size: var(--t-body); }
  .sub, .ctldesc, .empty, .chip, .workerchip,
  .enginestrip, .qresult, .axis, .mlabel { font-size: var(--t-small); }
  .empty, .ctldesc, .sub { font-style: normal; }
  .ctldesc { line-height: 1.5; }
  .mnow { margin-top: 0.25rem; }
  .mnow b { font-weight: 600; }
  /* Tidy up: one card per question; sections inside it show and hide
     themselves, and the card says so when none of them is showing */
  .card h3 { font-size: var(--t-body); font-weight: 600; margin: 0.7rem 0 0.25rem; }
  .tidycard .tidysec + .tidysec { border-top: 1px solid var(--line); }
  .tidycard details.how { margin-bottom: 0.2rem; }
  .tidycard details.how .ctldesc { margin-top: 0.3rem; }
  .tidycard .tidyempty { display: none; margin-top: 0.4rem; }
  .tidycard:not(:has(.tidysec:not([hidden]))) .tidyempty { display: block; }
  .machinestats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.35rem; }
  /* chart tokens (validated pairs, light and dark): photos vs videos */
  :root { color-scheme: light dark;
          --chart-photo: #1F7D4E; --chart-video: #B0771B; --chart-motion: #666E91; }
  @media (prefers-color-scheme: dark) {
    :root { --chart-photo: #2E9464; --chart-video: #BB861F; --chart-motion: #7B84AE; }
  }
  .starrow { margin: 0.4rem 0; }
  .starrow .mlabel { display: flex; justify-content: space-between; color: var(--muted);
                     font-size: var(--t-small); margin-bottom: 0.15rem; }
  .starstack { display: flex; gap: 2px; }
  .starstack .pfill { background: var(--chart-photo); }
  .starstack .pfill.vid { background: var(--chart-video); }
  .starstack .pfill.motion { background: var(--chart-motion); }
  .swatch { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 3px;
            margin: 0 0.3em 0 0.8em; vertical-align: baseline; }
  .mstat { min-width: 9rem; flex: 1; }
  .mstat .mlabel {
    display: flex; justify-content: space-between; color: var(--muted);
    font-size: var(--t-tiny); margin-bottom: 0.15rem;
  }
  .mstat .pbar { margin: 0; height: 7px; }
  #enginemeta { color: var(--muted); font-size: var(--t-small); width: 100%; }
  #jobstate { color: var(--muted); font-size: var(--t-small); }
  /* a progress note or result can carry a file path with no spaces (an
     ffmpeg error names its binary): wrap anywhere, never widen the page */
  #jobstate, .qresult, .mwarn, .thumbnote { overflow-wrap: anywhere; word-break: break-word; }

  /* Travels map: an interactive canvas with a toolbar above it */
  .maptools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
              margin: 0.55rem 0; }
  .mapseg { display: inline-flex; background: var(--accent-soft); border-radius: 999px;
            padding: 3px; gap: 2px; }
  .mapseg button {
    border: 0; background: transparent; color: var(--ink); font: inherit;
    font-size: var(--t-small); font-weight: 600; padding: 0.28rem 0.8rem;
    border-radius: 999px; cursor: pointer; line-height: 1;
  }
  .mapseg button:hover { filter: brightness(0.95); }
  .mapseg button.on { background: var(--accent); color: var(--accent-ink); }
  #tvZoomIn, #tvZoomOut { font-size: var(--t-head); font-weight: 700; padding: 0.22rem 0.7rem; }
  .maphint { font-size: var(--t-small); color: var(--muted); }
  .mapsearch {
    border: 1px solid var(--line); border-radius: 999px; padding: 0.34rem 0.85rem;
    font: inherit; font-size: var(--t-small); background: var(--card); color: var(--ink);
    width: 12rem; max-width: 46vw;
  }
  .mapsearch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .mapwrap { position: relative; }
  .mapwrap canvas { width: 100%; display: block; border-radius: 10px;
                    background: #05060f; cursor: grab; touch-action: none; }
  .mapwrap canvas.dragging { cursor: grabbing; }
  .maploading {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #9aa6cf; font-size: var(--t-body); font-weight: 600;
    background: #05060f; border-radius: 10px;
  }
  .maptip {
    position: absolute; max-width: 16rem; background: var(--card); color: var(--ink);
    border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.65rem;
    font-size: var(--t-small); line-height: 1.4; box-shadow: 0 6px 22px rgba(0,0,0,0.35);
    pointer-events: none; z-index: 3;
  }
  .maptip .sub { color: var(--muted); font-size: var(--t-tiny); }
  .legend { color: var(--muted); font-size: var(--t-small); margin-top: 0.5rem;
            line-height: 1.6; }
  .mapwrap:fullscreen { background: #05060f; }
  .mapwrap:fullscreen canvas { border-radius: 0; height: 100%; }
  /* iPhones have no element fullscreen API, so .fakefull pins the map over
     the page instead; z 50 keeps it under the photo sheets (z 55+) */
  .mapwrap.fakefull { position: fixed; inset: 0; z-index: 50;
                      background: #05060f; height: 100dvh; }
  .mapwrap.fakefull canvas { border-radius: 0; height: 100%; }
  /* the page toolbar vanishes in fullscreen (it's outside the fullscreen
     element), so the map carries its own controls there */
  .fsbar { display: none; position: absolute; top: 0.7rem; left: 0.7rem; right: 0.7rem;
           gap: 7px; z-index: 5; flex-wrap: wrap; align-items: center; justify-content: flex-end;
           pointer-events: none; }   /* the gaps let map drags through */
  .fsbar > * { pointer-events: auto; }
  .mapwrap:fullscreen .fsbar, .mapwrap.fakefull .fsbar { display: flex; }
  .fsbar button {
    border: 0; border-radius: 999px; padding: 0.55rem 1rem; font: inherit;
    font-size: var(--t-body); font-weight: 700; cursor: pointer; white-space: nowrap; line-height: 1.2;
    background: rgba(255,255,255,0.92); color: #1a1d2e;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  }
  .fssearch {
    border: 0; border-radius: 999px; padding: 0.55rem 1rem; font: inherit;
    font-size: var(--t-body); background: rgba(255,255,255,0.92); color: #1a1d2e;
    flex: 1 1 10rem; min-width: 0; max-width: 20rem; margin-right: auto;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  }
  /* the memory-video picker: the search box shrinks to fit and drops
     to its own line on a phone, its button never off the card's edge */
  #vSearchForm { padding: 0; border: 0; flex: 1 1 14rem; min-width: 0; }
  #vSearchForm input { flex: 1 1 6rem; min-width: 0; width: auto; }
  #vSearchForm button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit;
                        font-size: var(--t-small); font-weight: 600; background: var(--accent-soft); color: var(--ink); cursor: pointer; }
  /* search matches open under the bar, never on top of it */
  .mapwrap:fullscreen .mapresults, .mapwrap.fakefull .mapresults { top: 3.6rem; }
  /* a phone: the search on its own line, the buttons in a row beneath */
  @media (max-width: 600px) {
    .fssearch { flex: 1 1 100%; max-width: none; }
    .fsbar button { padding: 0.5rem 0.85rem; font-size: var(--t-body); }
    .mapwrap:fullscreen .mapresults, .mapwrap.fakefull .mapresults { top: 6.6rem; }
  }
  /* search matches: a little panel over the map, works in fullscreen too */
  .mapresults {
    position: absolute; top: 0.6rem; left: 0.6rem; z-index: 6;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.4); overflow: hidden;
    max-width: min(24rem, 88%); max-height: 55%; overflow-y: auto;
  }
  .mapresults button {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    font: inherit; font-size: var(--t-small); color: var(--ink); cursor: pointer;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line);
  }
  .mapresults button span { display: block; color: var(--muted); font-size: var(--t-tiny); }
  .mapresults button.on { background: var(--accent-soft); }
  .mapresults button:hover { background: var(--accent-soft); }
  .mapresults .mr-note { padding: 0.45rem 0.75rem; color: var(--muted); font-size: var(--t-tiny); }
  /* contact sheet for a tapped dot — fixed, so it works in fullscreen too
     (it stays a child of the fullscreen element) */
  .mapsheet {
    position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.55);
    display: grid; place-items: center; padding: 1.2rem;
  }
  .mapsheet-panel {
    background: var(--card); border-radius: 14px; width: min(94vw, 920px);
    max-height: 86vh; max-height: 86dvh;  /* dvh: phone URL bars lie about vh */
    display: flex; flex-direction: column;
    box-shadow: 0 18px 60px rgba(0,0,0,0.5); overflow: hidden;
  }
  .mapsheet-head {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1rem; border-bottom: 1px solid var(--line);
  }
  .mapsheet-head > div { flex: 1; font-weight: 700; }
  .mapsheet-head .sub { font-weight: 500; color: var(--muted); font-size: var(--t-small); }
  .mapsheet-grid {
    overflow-y: auto; padding: 0.8rem 1rem 1rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(max(104px, calc(var(--thumb) * 1.4)), 1fr));
    gap: 6px;
  }
  /* square cells: rows are set to the measured column width by
     tvSquareRows() — aspect-ratio and %-padding spacers both fail inside
     grid tracks on phone browsers. 90px is only the pre-measure fallback */
  .mapsheet-grid { grid-auto-rows: 90px; }
  .mapsheet-grid .cell { position: relative; border-radius: 8px;
                         overflow: hidden; background: var(--accent-soft);
                         cursor: pointer; border: 0; padding: 0; }
  .mapsheet-grid img.nothumb { font-size: var(--t-tiny); color: #ccc; text-align: center; outline: 1px dashed #666; outline-offset: -2px; }
  .mapsheet-grid img { position: absolute; inset: 0; width: 100%; height: 100%;
                       object-fit: cover; display: block; }
  .mapsheet-grid .vid::after {
    content: '▶'; position: absolute; right: 5px; bottom: 3px; color: #fff;
    font-size: var(--t-tiny); text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  }
  .mapsheet-grid .cell.sel::after {
    content: '✓'; position: absolute; inset: 0; display: grid;
    place-items: center; font-size: 1.6rem; font-weight: 800; color: #fff;
    background: rgba(20, 60, 45, 0.55); border: 3px solid var(--accent);
    border-radius: 8px; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  }
  .mapsheet-grid .empty { grid-column: 1 / -1; }
  .mapsheet-more { grid-column: 1 / -1; padding: 0.3rem 0 0.1rem; }
  .mapsheet-more button { width: 100%; border: 0; border-radius: 8px;
    padding: 0.6rem; font: inherit; font-weight: 700; cursor: pointer;
    background: var(--accent-soft); color: var(--ink); }
  /* the selection basket: floats over the map, survives closing the sheet */
  .selbar {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 1rem; z-index: 55; display: flex; gap: 0.45rem;
    align-items: center; background: var(--card); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.45rem 0.5rem 0.45rem 0.9rem;
    box-shadow: 0 10px 34px rgba(0,0,0,0.45); flex-wrap: wrap;
    justify-content: center; max-width: 94vw;
  }
  .selbar b { font-size: var(--t-body); white-space: nowrap; }
  .selbar button { border: 0; border-radius: 999px; padding: 0.45rem 0.8rem;
    font: inherit; font-size: var(--t-small); font-weight: 700; cursor: pointer;
    background: var(--accent-soft); color: var(--ink); }
  .selbar button.primary { background: var(--accent); color: var(--accent-ink); }
  .albpick {
    position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,0.55);
    display: grid; place-items: center; padding: 1rem;
  }
  .albpick-panel { background: var(--card); border-radius: 14px;
    width: min(94vw, 430px); max-height: 80vh; max-height: 80dvh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,0.5); }
  .albpick-head { padding: 0.8rem 1rem; font-weight: 700;
    border-bottom: 1px solid var(--line); display: flex; align-items: center; }
  .albpick-head span { flex: 1; }
  .albpick-list { overflow-y: auto; padding: 0.5rem; }
  .albpick-list button { display: block; width: 100%; text-align: left;
    border: 0; background: none; font: inherit; padding: 0.55rem 0.6rem;
    border-radius: 8px; cursor: pointer; color: var(--ink); }
  .albpick-list button:hover { background: var(--accent-soft); }
  .albpick-new { display: flex; gap: 0.45rem; padding: 0.7rem;
    border-top: 1px solid var(--line); }
  .albpick-new input { flex: 1; border: 1px solid var(--line);
    border-radius: 8px; padding: 0.5rem 0.6rem; font: inherit;
    background: var(--bg); color: var(--ink); min-width: 0; }
  .albpick-new button { border: 0; border-radius: 8px; padding: 0.5rem 0.8rem;
    font: inherit; font-weight: 700; cursor: pointer;
    background: var(--accent); color: var(--accent-ink); }
  .mapbig video { max-width: 100%; max-height: 92vh; margin: auto;
                  display: block; border-radius: 6px; }
  /* the Engine room's sections: one page had grown too long to scroll */
  .esub { margin-bottom: 0.7rem; }
  .esub .mapseg { flex-wrap: wrap; row-gap: 3px; }
  @media (max-width: 700px) { .esub .mapseg button { font-size: var(--t-small); padding: 0.28rem 0.6rem; } }
  .esub .badge { display: inline-block; min-width: 1.15rem; padding: 0 0.3rem; border-radius: 999px;
                 background: var(--accent); color: var(--accent-ink); font-size: var(--t-tiny); line-height: 1.15rem;
                 text-align: center; margin-left: 0.2rem; vertical-align: 1px; }
  /* what the engine is doing, on every section (the Engine section has the full cards) */
  .enginestrip { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: center; font-size: var(--t-small);
                 color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 12px;
                 padding: 0.45rem 0.8rem; margin-bottom: 0.7rem; }
  .enginestrip b { color: var(--ink); font-weight: 600; }
  .enginestrip .on { color: var(--good); } .enginestrip .off { color: var(--bad); }
  .enginestrip .chip { margin-left: auto; padding: 0.22rem 0.6rem; }
  #tab-engine[data-esub="engine"] .enginestrip { display: none; }
  .card[data-sub] { display: none; }
  #tab-engine[data-esub="engine"] .card[data-sub="engine"],
  #tab-engine[data-esub="places"] .card[data-sub="places"],
  #tab-engine[data-esub="tidy"] .card[data-sub="tidy"],
  #tab-engine[data-esub="people"] .card[data-sub="people"],
  #tab-engine[data-esub="settings"] .card[data-sub="settings"],
  #tab-engine[data-esub="albums"] .card[data-sub="albums"] { display: block; }
  .stpair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.4rem; }
  .stpair figure { margin: 0; cursor: pointer; border: 3px solid transparent; border-radius: 12px; overflow: hidden; background: #000; }
  .stpair figure.chosen { border-color: var(--accent); }
  .stpair img { width: 100%; max-height: 52vh; object-fit: contain; display: block; }
  .stpair figcaption { font-size: var(--t-tiny); color: var(--muted); padding: 0.25rem 0.4rem; background: var(--card); }
  .stchips .chip.on { background: var(--accent); color: #fff; }
  .stw { display: grid; grid-template-columns: 11rem 1fr; gap: 0.2rem 0.6rem; align-items: center; font-size: var(--t-tiny); }
  .stw .bar { height: 8px; background: var(--line); border-radius: 4px; position: relative; }
  .stw .bar i { position: absolute; top: 0; height: 100%; background: var(--accent); border-radius: 4px; opacity: 0.8; }
  .stw .bar b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); opacity: 0.5; }
  .stcap { font-size: var(--t-tiny); color: var(--muted); text-align: center; width: calc(var(--thumb) + 10px); line-height: 1.25; }
  .stcap b { color: var(--ink); }
  .card[data-sub][hidden] { display: none !important; }
  .card[data-sub]:first-of-type { margin-top: 0; }
  /* the contact-sheet toolbox: the same bar under every sheet */
  .sheetbar { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; padding: 0.35rem 0;
              font-size: var(--t-small); color: var(--muted); }
  .sheetbar .chip { padding: 0.28rem 0.6rem; font-size: var(--t-small); }
  .sheetbar .sep { width: 1px; height: 1.2rem; background: var(--line); margin: 0 0.2rem; }
  .sheetbar b { color: var(--ink); }
  .sheetbar .msg { width: 100%; color: var(--ink); }
  .sheetbar .zoom { display: inline-flex; align-items: center; gap: 0.25rem; }
  .sheethelp { background: var(--accent-soft); border-radius: 10px; padding: 0.5rem 0.8rem; margin: 0.2rem 0 0.5rem;
               font-size: var(--t-small); color: var(--ink); }
  .sheethelp ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
  .sheethelp li { margin: 0.15rem 0; }
  .sheetbar .zoom input { width: 6.5rem; accent-color: var(--accent); }
  /* modal dialogs of the toolbox: the place picker, date, album, info */
  /* a map's own layers (controls sit at z-index 1000) stay inside the map, never over a dialog */
  .leaflet-container { isolation: isolate; position: relative; z-index: 0; }
  /* any pin map can fill the screen (a fat finger on a phone needs room):
     pinned over everything, dialogs included, until ⛶ or Escape */
  .mapfull, .leaflet-container.mapfull { position: fixed !important; inset: 0 !important; z-index: 300 !important;
                               height: 100dvh !important; width: 100vw !important; border-radius: 0 !important; margin: 0 !important; }
  .mapfullbtn { width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 16px; background: #fff; color: #222;
                cursor: pointer; display: block; text-decoration: none; }
  .mapfullbtn:hover { background: #f4f4f4; }
  .tbmodal { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.6);
             display: grid; place-items: center; padding: 0.6rem; }
  .tbpanel { background: var(--card); color: var(--ink); border-radius: 14px; width: min(96vw, 560px);
             max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden;
             box-shadow: 0 18px 60px rgba(0,0,0,0.5); }
  .tbhead { padding: 0.7rem 0.9rem; font-weight: 700; border-bottom: 1px solid var(--line);
            display: flex; align-items: center; gap: 0.5rem; }
  .tbhead span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .tbbody { padding: 0.6rem 0.9rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.45rem; }
  .tbbody input[type=text], .tbbody input[type=search], .tbbody input[type=datetime-local], .tbbody input[type=number], .tbbody select {
    font: inherit; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); color: var(--ink); max-width: 100%; }
  .tbrow { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
  .tbrow .k { color: var(--muted); min-width: 4.6rem; font-size: var(--t-small); }
  .tbrow .v { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--t-body); }
  .tbmap { height: 46vh; min-height: 220px; border-radius: 8px; overflow: hidden; background: var(--accent-soft); }
  .tbfoot { padding: 0.6rem 0.9rem; border-top: 1px solid var(--line); display: flex; gap: 0.4rem;
            justify-content: flex-end; flex-wrap: wrap; }
  .tbfoot .chip.primary { font-weight: 700; background: var(--accent); color: var(--accent-ink); }
  .peekinfo { position: absolute; top: 0.7rem; right: 0.9rem; z-index: 2; border: 0; cursor: pointer;
              background: rgba(255,255,255,0.16); color: #fff; border-radius: 999px; width: 2.3rem; height: 2.3rem;
              font: inherit; font-size: var(--t-head); font-weight: 700; }
  .stars button { background: none; border: 0; font-size: 1.25rem; cursor: pointer; padding: 0 0.1rem; opacity: 0.35; }
  .stars button.on { opacity: 1; }
  /* press-and-hold (or right-click) any thumbnail anywhere: the photo, big */
  #peek { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.94);
          display: grid; place-items: center; cursor: zoom-out; }
  #peek img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
  #peek .cap { position: absolute; bottom: 0.7rem; left: 0.6rem; right: 0.6rem; text-align: center;
               color: #ddd; font-size: var(--t-small); text-shadow: 0 1px 3px #000; overflow-wrap: anywhere; }
  .mapbig {
    position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.92);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  }
  .mapbig img { max-width: 100%; max-height: 92vh; margin: auto; display: block;
                border-radius: 6px; }
  .bignav {
    background: none; border: 0; color: #fff; font-size: 2.6rem; cursor: pointer;
    padding: 0 0.6rem; opacity: 0.8; align-self: stretch;
  }
  .bignav:hover { opacity: 1; }
  .bigclose {
    position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: 0;
    color: #fff; font-size: 1.5rem; cursor: pointer; opacity: 0.85;
  }
  .biglike {
    position: absolute; top: 0.7rem; left: 0.9rem; border: 0; cursor: pointer;
    background: rgba(255,255,255,0.14); color: #fff; border-radius: 999px;
    padding: 0.4rem 0.85rem; font: inherit; font-size: var(--t-small); font-weight: 600;
  }
  .biglike:hover { background: rgba(255,255,255,0.24); }
  .bigcap {
    position: absolute; left: 0; right: 0; bottom: 0.8rem; text-align: center;
    color: #ddd; font-size: var(--t-small); text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    padding: 0 0.5rem;
  }
  @media (max-width: 700px) {
    .maphint { display: none; }        /* phones: the gestures explain themselves */
    .mapsheet { padding: 0.4rem; }
    .mapsheet-panel { width: 100%; max-height: 96%; }
    .mapsheet-head { padding: 0.6rem 0.7rem; }
    .mapsheet-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
                     gap: 4px; padding: 0.5rem 0.7rem 0.7rem; }
    .bignav { font-size: 1.9rem; padding: 0 0.3rem; }
    .mapbig img { max-height: 86vh; }
    .selbar { border-radius: 18px; padding: 0.4rem 0.55rem; gap: 0.3rem; }
    .selbar button { padding: 0.4rem 0.55rem; font-size: var(--t-small); }
    .selbar b { font-size: var(--t-small); }
  }

  #loginoverlay {
    position: fixed; inset: 0; z-index: 10;
    background: radial-gradient(50rem 26rem at 50% 18%, var(--glow), transparent 70%), var(--bg);
    display: grid; place-items: center; padding: 1rem;
  }
  .logincard { max-width: 22rem; width: 100%; display: flex; flex-direction: column;
               gap: 0.7rem; padding: 1.6rem 1.4rem; }
  .logincard .logo { margin: 0 auto; }
  .logincard h2 { margin: 0; text-align: center; font-size: 1.25rem; font-weight: 800; }
  .logincard .sub { text-align: center; color: var(--muted); font-size: var(--t-small); margin-top: -0.4rem; }
  .logincard input {
    background: var(--bg); color: var(--ink); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.65rem 0.9rem; font: inherit; font-size: var(--t-head);
  }
  .logincard input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  #loginerror { color: var(--bad); font-size: var(--t-small); text-align: center; min-height: 1.2em; margin: 0; }
  .pbar {
    height: 10px; border-radius: 999px; background: var(--accent-soft);
    overflow: hidden; margin: 0.45rem 0 0.3rem;
  }
  .pfill {
    height: 100%; border-radius: 999px; background: var(--accent);
    width: 0%; transition: width 0.6s ease;
  }
  .ptext { font-size: var(--t-small); color: var(--muted); display: flex; justify-content: space-between; gap: 0.5rem; }
  .workerchip { font-size: var(--t-small); font-weight: 600; }
  .workerchip.on { color: var(--good); }
  .workerchip.off { color: var(--wait); }
.dpair{display:inline-flex;gap:3px;margin-left:auto}
.dpair .dropthumb{margin-left:0}
.dropthumb{width:44px;height:44px;object-fit:cover;border-radius:6px;margin-left:auto;cursor:zoom-in;background:rgba(255,255,255,.06)}
.dropthumb.nothumb{opacity:.3}
.paircode{font-size: var(--t-head);letter-spacing:0.08em;padding:0.1rem 0.45rem;user-select:all}
.pairbox{line-height:1.7}
  /* Pick: two photos side by side, tap the better one */
  .pkpair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.6rem; }
  .pk { position: relative; background: #000; border: 2px solid transparent; border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer;
        aspect-ratio: 1; display: block; width: 100%; transition: border-color 0.15s, transform 0.12s; }
  .pk:hover { border-color: var(--accent); }
  .pk.chosen { border-color: var(--accent); transform: scale(0.98); }
  .pk img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pkmsg { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; color: #ddd; font-size: var(--t-small); text-align: center; }
  @media (max-width: 760px) { .pkpair { grid-template-columns: 1fr; } .pk { aspect-ratio: 4 / 3; } }
  /* What it's learning: thin bars against a reference mark, one line over time */
  .lngroup { margin-top: 0.5rem; }
  .lngroup h4 { margin: 0 0 0.2rem; font-size: var(--t-small); color: var(--muted); font-weight: 600; text-transform: none; }
  .lnrow { display: grid; grid-template-columns: 13rem 1fr 3.2rem; gap: 0.5rem; align-items: center; font-size: var(--t-small); padding: 0.1rem 0; }
  .lnbar { position: relative; height: 10px; background: var(--line); border-radius: 4px; }
  .lnbar i { position: absolute; top: 0; height: 100%; background: var(--accent); border-radius: 4px; }
  .lnbar b { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); opacity: 0.55; }
  .lnbar s { position: absolute; top: 0; height: 100%; width: 1px; background: var(--muted); opacity: 0.6; left: 50%; }
  .lnval { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
  .lnhist svg { width: 100%; height: 6rem; display: block; }
  .lnpick { display: grid; grid-template-columns: 4.2rem 4.2rem 1fr; gap: 0.5rem; align-items: center; padding: 0.35rem 0; }
  .lnpick img { width: 4.2rem; height: 4.2rem; object-fit: cover; border-radius: 8px; background: #000; opacity: 0.45; }
  .lnpick img.won { opacity: 1; outline: 2px solid var(--accent); }
  @media (max-width: 760px) { .lnrow { grid-template-columns: 8rem 1fr 3rem; } }
  .lnrow { grid-template-columns: 13rem 1fr 3.2rem 1.6rem; }
  .lnedit { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: var(--t-small); padding: 0; }
  .lnedit:hover { color: var(--accent); }
  .lnrow.set span:first-child::after { content: " · set by you"; color: var(--accent); font-size: var(--t-tiny); }
  .lnrow input[type=number] { width: 4.6rem; font: inherit; font-size: var(--t-small); }
  .lnform { grid-column: 2 / -1; display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
  @media (max-width: 760px) { .lnrow { grid-template-columns: 8rem 1fr 3rem 1.6rem; } }