/* The look of every page: rounded panels on a blue-grey ground, a sidebar
   for moving around, and one unmistakable style for "this is selected".
   Colours follow the device's light or dark setting. */

/* Inter, the brand typeface, served from this site (SIL Open Font Licence) so
   pages look the same with or without an internet connection. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2"); }

:root {
  --ground: #eef2f9; --panel: #ffffff; --inset: #f4f6fb; --line: #dfe5f0;
  --ink: #101421; --muted: #4a5368;
  --accent: #496ab3; --accent-ink: #ffffff; --accent-soft: #e4eaf6; --accent-text: #2b4478;
  --strong: #101421; --strong-ink: #ffffff; --strong-muted: #b9c6e6;
  --ok: #1c6b4a; --ok-soft: #dff1e8;
  --warn: #6a4a00; --warn-soft: #fbeccb;
  --bad: #9b1c24; --bad-soft: #fbe3e4;
  --display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0c101b; --panel: #131829; --inset: #1a2136; --line: #262f47;
    --ink: #eef1f8; --muted: #b3bdd4;
    --accent: #8fa8e0; --accent-ink: #0c101b; --accent-soft: #1f2941; --accent-text: #c9d5f2;
    --strong: #496ab3; --strong-ink: #ffffff; --strong-muted: #e4eaf6;
    --ok: #8fd9b4; --ok-soft: #16352a;
    --warn: #f1cf7e; --warn-soft: #3a2e10;
    --bad: #f3a3a8; --bad-soft: #3d171a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.5 var(--text); }
a { color: var(--accent-text); }
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: 32px; line-height: 1.12; }
h2 { font-size: 19px; line-height: 1.25; }
p { margin: 0 0 10px; max-width: 68ch; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.hidden-label { position: absolute; left: -9999px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- the frame: sidebar and page ---- */
.shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.side { display: flex; flex-direction: column; gap: 26px; padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); text-decoration: none; padding: 0 10px; }
.side-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 8px; }
.side-foot { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.side-foot .who { font-weight: 600; overflow-wrap: anywhere; }
.side-foot .mail { color: var(--muted); overflow-wrap: anywhere; margin-bottom: 10px; }
.page { padding: 28px 32px 72px; min-width: 0; }
.page-inner { max-width: none; }

/* navigation: the page you are on is a filled pill */
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--strong); color: var(--strong-ink); font-weight: 600; }
.nav svg { width: 18px; height: 18px; flex: none; }

/* workspaces: the open one is outlined, tinted and ticked */
.spaces { display: flex; flex-direction: column; gap: 6px; }
.spaces form { margin: 0; }
.space { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: 14px; padding: 9px 10px; cursor: pointer; }
.space:hover { background: var(--panel); }
.space.current { background: var(--panel); border-color: var(--accent); cursor: default; }
.space .name { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.space .kind { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.space .tick { flex: none; width: 18px; height: 18px; color: var(--accent); }

/* ---- page furniture ---- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.head p { margin: 8px 0 0; color: var(--muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.panel { background: var(--panel); border-radius: 22px; padding: 22px 24px; margin-top: 16px; }
.panel > h2 { margin-bottom: 12px; }
.panel.note { background: var(--accent-soft); color: var(--accent-text); }
.panel.note p { margin: 0; max-width: 80ch; }
.panel.problem { background: var(--bad-soft); color: var(--bad); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.grid-2 > .panel { margin-top: 16px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--panel); border-radius: 22px; padding: 22px 24px; }
.stat .label { font-size: 14px; color: var(--muted); }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 22px; }
.stat span.sub { font-size: 14px; color: var(--muted); }
.stat.lead { background: var(--strong); color: var(--strong-ink); }
.stat.lead .label, .stat.lead span.sub { color: var(--strong-muted); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.button:hover { filter: brightness(1.08); }
.button:disabled { opacity: .55; cursor: default; }
.button.quiet { background: var(--accent-soft); color: var(--accent-text); padding: 9px 16px; }
.button.plain { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 8px 16px; font-weight: 500; }

.chip { display: inline-block; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 11px; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; }
.chip.plain { background: var(--inset); color: var(--muted); }
.chip.done { background: var(--ok-soft); color: var(--ok); }
.chip.failed { background: var(--bad-soft); color: var(--bad); }
.chip.queued, .chip.uploading { background: var(--inset); color: var(--muted); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }

/* rows: uploads, stages */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; padding-top: 0; }
.rows li:last-child { padding-bottom: 0; }
.rows .main { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.rows .main a { font-weight: 600; text-decoration: none; }
.rows .main a:hover { text-decoration: underline; }
.rows .side-info { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; }

.stages li { align-items: flex-start; flex-wrap: nowrap; }
.dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--inset); color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 1px; }
.stage-done .dot { background: var(--ok-soft); color: var(--ok); }
.stage-running .dot { background: var(--accent); color: var(--accent-ink); animation: pulse 1.4s ease-in-out infinite; }
.stage-failed .dot { background: var(--bad-soft); color: var(--bad); }
.stage-waiting .main { color: var(--muted); }
.stages .title { font-weight: 600; }
.stages .cost { flex: none; color: var(--muted); font-size: 14px; }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .stage-running .dot { animation: none; } }

/* forms */
label.field, .field > label { display: block; font-weight: 600; margin-bottom: 6px; }
.field { margin-bottom: 18px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 14px; }
input[type="text"], input[type="email"], input[type="number"], select {
  font: inherit; color: var(--ink); background: var(--inset); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; max-width: 100%; }
input[type="text"], input[type="email"] { width: min(100%, 380px); }
.form-row { display: flex; gap: 8px 20px; flex-wrap: wrap; }

/* choices: big radio cards, the chosen one outlined, tinted and ticked */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.choice { position: relative; display: block; background: var(--inset); border: 2px solid transparent; border-radius: 16px; padding: 14px 44px 14px 16px; cursor: pointer; }
.choice:hover { border-color: var(--line); }
.choice input { position: absolute; opacity: 0; }
.choice b { display: block; }
.choice span { font-size: 14px; color: var(--muted); }
.choice::after { content: ""; position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); }
.choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.choice:has(input:checked)::after { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.drop { display: block; border: 2px dashed var(--line); border-radius: 18px; background: var(--inset); padding: 30px 20px; text-align: center; cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop.chosen { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.drop b { display: block; font-size: 17px; overflow-wrap: anywhere; }
.drop span { color: var(--muted); font-size: 14px; }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.meter { height: 8px; border-radius: 999px; background: var(--inset); overflow: hidden; margin: 8px 0 4px; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.meter.over i { background: var(--bad); }

/* signed out: one centred panel */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate-card { position: relative; overflow: hidden; background: var(--panel); border-radius: 28px; padding: 56px 48px; width: min(100%, 560px); }
.gate-card > * { position: relative; }
.gate-card svg.motif { position: absolute; right: -60px; top: -30px; width: 300px; height: 210px; opacity: .5; }
.gate-card h1 { font-size: 44px; margin: 14px 0 12px; }
.gate-card .button { margin-top: 14px; }
.motif .l { stroke: var(--line); stroke-width: 2; fill: none; }
.motif .n { fill: var(--accent); }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; gap: 16px; padding: 16px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { margin-top: 0; }
  .page { padding: 8px 16px 56px; }
  .grid-2, .stats { grid-template-columns: minmax(0, 1fr); }
  .gate-card { padding: 40px 24px; }
}

/* the invite form shows only the fields its chosen kind needs */
.only-existing { display: none; }
form:has(#kind-existing:checked) .only-existing { display: block; }

/* ask: one wide question box, the answer in reading type, numbered sources */
.ask { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px; border-radius: 999px; }
.ask input[type="text"] { flex: 1 1 280px; width: auto; min-width: 0; border: 0; background: transparent; font-size: 18px; padding: 10px 14px; }
.ask input[type="text"]:focus-visible { outline: none; }
.ask:focus-within { box-shadow: 0 0 0 3px var(--accent); }
.answer { font-size: 19px; line-height: 1.55; white-space: pre-line; max-width: 70ch; }
.cites li { align-items: flex-start; flex-wrap: nowrap; justify-content: flex-start; }
.cites .dot { background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 900px) { .ask { border-radius: 22px; } }

/* the map takes the full width and nearly the full height of the window */
.map-frame { width: 100%; height: clamp(460px, calc(100vh - 150px), 1500px); border: 0; display: block; background: #05070d; }

/* claim trace: the words in the document, with the extracted ones marked */
.stat b.word { font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
.support + .support { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote { margin: 0; padding: 14px 16px; background: var(--inset); border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 90ch; }
.quote mark { background: var(--accent-soft); color: var(--ink); box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; padding: 1px 3px; }
.cites .main a { font-weight: 600; text-decoration: none; }
.cites .main a:hover { text-decoration: underline; }

/* tabs: which group of a list is showing; the chosen one is filled */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--panel); border-radius: 999px; padding: 5px; width: fit-content; max-width: 100%; }
.tabs a { padding: 8px 16px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="true"] { background: var(--strong); color: var(--strong-ink); font-weight: 600; }
.tabs .n { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 4px; }

/* a dispute: what happened, then its claims in one row that scrolls sideways when there are many */
.dispute-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.dispute-head .what { flex: 1 1 420px; min-width: 0; }
.dispute-head h2 { margin-bottom: 4px; }
.dispute-head p { margin: 0; max-width: 90ch; }
.claim-strip { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
               padding-bottom: 8px; scrollbar-width: thin; align-items: stretch; }
.claim-card { flex: 1 0 260px; max-width: 440px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px;
              background: var(--inset); border: 2px solid transparent; border-radius: 16px; padding: 12px 14px;
              color: var(--ink); text-decoration: none; min-width: 0; }
.claim-card:hover { border-color: var(--line); }
.claim-card .role { font-size: 13px; color: var(--muted); }
.claim-card b { font-weight: 600; overflow-wrap: anywhere; }
.claim-card .from { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; margin-top: auto; }
.claim-card.winner { border-color: var(--accent); background: var(--accent-soft); }
.claim-card.winner .role { color: var(--accent-text); font-weight: 600; }
.claim-card.loser b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.dispute-foot { display: flex; gap: 8px 24px; flex-wrap: wrap; align-items: flex-start; margin-top: 4px; }
details.why summary { cursor: pointer; font-weight: 600; color: var(--accent-text); width: fit-content; }
details.why p { margin: 8px 0 0; max-width: 90ch; }
details.why form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* the pipeline: five stages down the page */
.flow { list-style: none; margin: 0; padding: 0; }
.flow-head { display: flex; gap: 14px; align-items: flex-start; }
.flow-head .dot { background: var(--strong); color: var(--strong-ink); width: 30px; height: 30px; font-size: 15px; }
.flow-head p { margin: 2px 0 0; }
.flow-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; margin: 16px 0 0 44px; }
.flow-figures b { display: block; font-size: 30px; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; }
@media (max-width: 900px) { .flow-figures { margin-left: 0; } .tabs { border-radius: 18px; } }

/* the knowledge map component: a dark stage of its own in a panel */
.map-panel { padding: 0; overflow: hidden; background: #05070d; }
div.map-frame { position: relative; }
.map-frame.live { height: clamp(420px, 62vh, 1100px); }

/* the overview's background map: a fixed layer behind the page; panels let it show through */
.map-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.shell { position: relative; z-index: 1; }
.over-map .panel, .over-map .stat:not(.lead) { background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.over-map .stat.lead { background: color-mix(in srgb, var(--strong) 88%, transparent); }

/* questions: each one a panel you open; answers are the same big radio cards as elsewhere */
a.qcard { display: block; color: inherit; text-decoration: none; border: 2px solid transparent; }
a.qcard:hover { border-color: var(--accent); }
a.qcard h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; max-width: 80ch; }
textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: min(100%, 720px); display: block; margin-top: 10px; resize: vertical; }
.choice textarea { background: var(--panel); }
details.wrong { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
details.wrong summary { cursor: pointer; font-weight: 600; color: var(--accent-text); width: fit-content; }
details.wrong form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* the upload list: one row per file; a file not everyone may see is tinted */
.filelist li { padding-inline: 10px; border-radius: 12px; }
.filelist li.restricted { background: var(--warn-soft); border-top-color: transparent; }
.filelist li.restricted + li { border-top-color: transparent; }
.filelist .main b { overflow-wrap: anywhere; }
.filelist .button.plain { padding: 6px 12px; font-size: 14px; }

/* progress: a spinner, a bar that fills (or moves, when there is nothing to count), and the six stages */
.spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-soft);
        border-top-color: var(--accent); animation: spin .8s linear infinite; vertical-align: -2px; flex: none; }
.spin.small-spin { width: 11px; height: 11px; border-width: 2px; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.meter.busy i { width: 28%; animation: slide 1.6s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(380%); } }
.progress-line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 2px; }
.progress-line strong { color: var(--ink); font-weight: 600; }
.panel.working { border: 2px solid var(--accent); }
.stage-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.stage-steps li { height: 6px; border-radius: 999px; background: var(--inset); }
.stage-steps li.done { background: var(--ok); }
.stage-steps li.now { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } .meter.busy i { animation: none; width: 100%; opacity: .35; } }

a.back { display: inline-block; margin-bottom: 10px; font-weight: 600; text-decoration: none; color: var(--accent-text); }
a.back:hover { text-decoration: underline; }

/* quick-fire: the start button on the list, and the strip on each question */
.run-panel { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; border: 2px solid var(--accent); }
.run-panel p { margin: 4px 0 0; }
.run-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap;
             background: var(--accent-soft); color: var(--accent-text); }
.working-note { display: inline-flex; gap: 8px; align-items: center; max-width: 70ch; }

/* the Ask page: with a map, the question bar floats in its top-left corner, where the map leaves room */
.ask-stage.with-map { position: relative; }
.ask-stage.with-map .map-panel { margin-top: 0; }
.ask-stage.with-map .ask { position: absolute; top: 18px; left: 18px; z-index: 2; margin: 0; width: min(560px, calc(100% - 36px));
                           background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(8px);
                           -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.ask-stage.with-map .ask input[type="text"] { font-size: 17px; }
@media (max-width: 900px) {
  .ask-stage.with-map .ask { position: static; width: auto; margin-bottom: 12px; box-shadow: none; }
  .ask-stage.with-map { display: flex; flex-direction: column-reverse; }
}

/* one dispute: the add-context box is the page's main control */
a.plain-link { color: inherit; text-decoration: none; }
a.plain-link:hover { text-decoration: underline; }
.add-context { border: 2px solid var(--accent); }
.add-context h2 { margin-bottom: 6px; }
.add-context textarea { width: 100%; max-width: none; font-size: 17px; min-height: 120px; }
.claim-card .quote { padding: 8px 10px; }
/* two-step sign-in (account.py) */
.button.danger { background: var(--bad); color: #fff; }
.two-step .steps { margin: 10px 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.two-step .qr { margin: 12px 0 8px; }
.two-step .qr svg { display: block; border-radius: 8px; }
.two-step-code .qr { margin: 8px 0; }
.two-step-code .qr svg { display: block; border-radius: 8px; background: #fff; }
.two-step-key { font-size: 15px; letter-spacing: .04em; overflow-wrap: anywhere; }
.ui-step > form.ui-step-detail { margin-top: 8px; }
.admin-measure { max-width: var(--measure); }
.error-page { margin-top: var(--space-8); }
.two-step .key code { font-size: 15px; letter-spacing: .04em; overflow-wrap: anywhere; white-space: normal; }
.code-input { font-size: 22px; letter-spacing: .2em; width: 9ch; text-align: center; font-variant-numeric: tabular-nums; }
.side-foot .account-link { display: inline-block; color: var(--muted); font-size: 13px; margin: -4px 0 10px; text-decoration: none; }
.side-foot .account-link:hover, .side-foot .account-link[aria-current] { color: var(--ink); text-decoration: underline; }

/* ---- the design system's frame (p7): the glue its components leave to the app ---- */
.menu-wrap { position: relative; }
.menu-wrap > .ui-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; }
.menu-wrap.menu-up > .ui-menu { top: auto; bottom: calc(100% + 4px); }
.ui-menu[hidden] { display: none; }
.ui-menu form { display: contents; }
.ui-sync a { color: inherit; text-decoration: none; }
.ui-sync a:hover { text-decoration: underline; }
.signed-out { min-height: 100vh; display: grid; place-items: center; background: var(--ground); padding: var(--space-4); box-sizing: border-box; }
.signed-out-sheet { width: min(100%, 440px); box-sizing: border-box; padding: var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); }
.map-fallback { color: var(--map-ink); padding: var(--space-6); }
.own-unused .ui-textarea { opacity: .55; }
.question-section, .resolve-disagreements, .page-section { margin-top: var(--space-8); }
.resolve-disagreements { display: flex; flex-direction: column; gap: var(--space-4); }
.resolve-done { margin: var(--space-2) 0 var(--space-4); }
.resolve-done summary { cursor: pointer; }
.ui-notice > .ui-spinner { margin-top: 3px; flex: none; }
.ui-tabs { margin: var(--space-6) 0 var(--space-2); }
.map-stage-page { position: relative; height: max(480px, calc(100vh - 230px)); }
.map-stage-page:fullscreen { height: 100vh; width: 100vw; border-radius: 0; }
.map-full { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 5; gap: 6px; }
.map-askbar { position: absolute; top: var(--space-4); left: var(--space-4); width: min(560px, calc(100% - 2 * var(--space-4))); z-index: 5; }

/* Sources (p7): the running step's bar spans the step, the live map sits on its stage */
.ui-step > .step-bar { grid-column: 2 / 4; margin: 6px 0 2px; }
.live-stage { height: clamp(360px, 56vh, 900px); margin-top: var(--space-6); }
.upload-title { overflow-wrap: anywhere; }
.upload-name { font-weight: 600; overflow-wrap: anywhere; }
.upload-progress { display: flex; flex-direction: column; gap: var(--space-4); }
.upload-progress > .ui-notice { margin-top: var(--space-6); }
.source-problem { color: var(--danger); }
.notice-action { margin-top: var(--space-2); }
fieldset.ui-field { border: 0; padding: 0; margin: 0; }
fieldset.ui-field > legend { padding: 0; margin-bottom: 6px; }
.upload-file-detail { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.upload-file-detail .ui-select { min-height: 32px; max-width: 260px; font-size: 14px; }
/* Operator (p7) */
form:has(#kind-existing:checked) .only-existing.ui-form { display: flex; }
.operator-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); max-width: 720px; }
.operator-company { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.operator-company-name { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.operator-meter { max-width: 420px; }
.operator-cap { width: 110px; }
/* connectors and AI tools (p7) */
.row-actions { justify-content: flex-end; flex-wrap: nowrap; }
.browse-trail a { color: inherit; }
.browse-file td { color: var(--ink-muted); }
.folder-sample { margin: 0; padding-left: 20px; }
.access-new-group { max-width: 280px; }
fieldset.ui-field > .ui-check { margin-top: 2px; }
.ai-address { font-size: 15px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere; }
.consent-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; max-width: var(--measure); }
.source-open { align-self: flex-start; font-size: 13px; font-weight: 500; }
.pass-on { margin-top: var(--space-3); }
.pass-on > summary { list-style: none; cursor: pointer; }
.pass-on > summary::-webkit-details-marker { display: none; }
.pass-on[open] > summary { margin-bottom: var(--space-4); }
.pass-on > .ui-form { max-width: 480px; }
/* People and first-run set-up (p3) */
.setup-progress { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 14px; color: var(--ink-muted); counter-reset: step; }
.setup-progress li { counter-increment: step; display: flex; align-items: center; gap: 8px; }
.setup-progress li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 12px; font-weight: 700; }
.setup-progress li[data-state="done"]::before { content: "✓"; background: var(--positive); color: var(--sheet); box-shadow: none; }
.setup-progress li[data-state="now"] { color: var(--ink); font-weight: 600; }
.setup-progress li[data-state="now"]::before { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-text); }
.setup-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.people-request { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.people-request-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.people-select { min-height: 32px; font-size: 14px; max-width: 220px; }
.people-invite { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); max-width: 760px; }
.people-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.people-inline { margin: 0; }
.people-depts > summary { cursor: pointer; color: var(--ink); }
.people-depts[open] > summary { margin-bottom: var(--space-2); }
.people-new-dept { max-width: 260px; }
.noworkspace-code { max-width: 220px; text-transform: uppercase; letter-spacing: .04em; }
/* sign-in choices (p4) */
.signin-choices { display: flex; flex-direction: column; gap: var(--space-3); max-width: 360px; margin: var(--space-6) 0 var(--space-4); }
.signin-provider { justify-content: center; gap: 10px; }
.signin-mark { width: 18px; height: 18px; flex: none; }
/* the operator console (p12) */
.console-months { margin-top: var(--space-4); }
.console-table td { vertical-align: top; }
.console-quiet td { color: var(--ink-muted); }
.console-meter { min-width: 140px; }
.console-counts { min-width: 220px; }
.console-total td { font-weight: 600; }
.reading-now { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.reading-now li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); }
.reading-now li > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* an import's progress: the map building behind, dimmed, and the six steps as cards across it */
.import-stage { height: clamp(460px, 68vh, 820px); margin-top: var(--space-6); }
.import-stage > .import-map { opacity: .7; }
.import-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-6); pointer-events: none; color: var(--map-ink); }
.import-head { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.import-heading { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.import-now { margin: 0; font-size: 14px; line-height: 20px; color: var(--map-ink-muted); overflow-wrap: anywhere; }
.import-now b { color: var(--map-ink); font-weight: 600; }
.import-bar { max-width: 520px; margin-top: 6px; height: 6px; }
.import-overlay .import-bar { background: color-mix(in srgb, var(--map-ink) 22%, transparent); }   /* seen on the dark map */
.import-overlay .import-bar .ui-progress-fill { background: var(--map-accent); box-shadow: 0 0 10px var(--map-accent); }
.import-cards { list-style: none; margin: 0; padding: 8px 0 0; display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: var(--space-3); overflow-x: auto; pointer-events: auto; }   /* the top padding is the card at work's room to lift */
.import-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--map-stage) 82%, transparent); box-shadow: inset 0 0 0 1px var(--map-hair);
  backdrop-filter: blur(6px); transition: opacity 300ms ease, transform 300ms ease, box-shadow 300ms ease; }
.import-card[data-state="waiting"] { opacity: .5; }
.import-card[data-state="now"] { box-shadow: inset 0 0 0 1.5px var(--map-accent); transform: translateY(-6px); }
.import-card[data-state="failed"] { box-shadow: inset 0 0 0 1.5px var(--danger); }
.import-card-step { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--map-hair); color: var(--map-ink-muted); margin-bottom: 4px; }
.import-card[data-state="done"] .import-card-step { background: var(--positive); box-shadow: none; color: transparent; position: relative; }
.import-card[data-state="done"] .import-card-step::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--sheet); }
.import-card[data-state="now"] .import-card-step { box-shadow: inset 0 0 0 1.5px var(--map-accent); color: var(--map-accent); }
.import-card-title { font-weight: 600; font-size: 14px; line-height: 19px; }
.import-card-figure { font-size: 18px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.import-card-detail { font-size: 12.5px; line-height: 17px; color: var(--map-ink-muted); }
@media (max-width: 720px) { .import-overlay { padding: var(--space-4); } .import-stage { height: 560px; } }
/* an import's own page: the map is the page, from the menu to the window's edge and top to bottom, with the
   page's title, back link and actions over it, and anything else (a folder's settings) below it */
.stage-top, .stage-rest { display: contents; }
.ui-sheet.sheet-stage { padding: 0; overflow: hidden; border-width: 0 0 0 1px; border-radius: 0;
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0; }
.sheet-stage > .ui-sheet-inner { max-width: none; gap: 0; }
.stage-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; }
.stage-hero > .ui-map-stage { position: absolute; inset: 0; height: auto; margin: 0; border-radius: 0; }   /* an import, the Map page */
.stage-hero .import-overlay { justify-content: flex-end; padding: var(--space-8); }
.stage-hero > .stage-top { display: flex; flex-direction: column; gap: var(--space-3); position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  padding: var(--space-8) var(--space-8) 0; pointer-events: none; color: var(--map-ink); }
.stage-top a, .stage-top button, .stage-top form, .stage-top .ui-notice { pointer-events: auto; }
.stage-hero .ui-page-head { margin: 0; }
.stage-hero .ui-page-title { color: var(--map-ink); }
.stage-hero .ui-back, .stage-hero .stage-top .ui-eyebrow, .stage-hero .stage-top .ui-lede, .stage-hero .stage-top .ui-hint,
.stage-hero .stage-top .ui-lede a { color: var(--map-ink-muted); }
.stage-hero .stage-top .ui-hint { margin: 0; max-width: 640px; }
.sheet-stage .stage-rest { display: flex; flex-direction: column; gap: var(--space-8); max-width: var(--content-max); margin-inline: auto;
  width: 100%; box-sizing: border-box; padding: var(--space-10) clamp(20px, 4vw, var(--space-12)) var(--space-16); }
@media (max-width: 860px) {
  .ui-sheet.sheet-stage { margin: 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); border-width: 1px 0 0; }
  .stage-hero > .stage-top { padding: var(--space-6) var(--space-4) 0; }
  .stage-hero .import-overlay { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .import-card { transition: none; } .import-card[data-state="now"] { transform: none; } }
/* the Map page (Alex, 20 Oct): the map is the page, with its title over the top left and the ask bar on it */
.stage-hero > .map-top { right: auto; padding-top: var(--space-5); }
.stage-hero .map-askbar { top: var(--space-4); left: 50%; transform: translateX(-50%); }   /* centred: the title holds the left */
@media (max-width: 1000px) { .stage-hero > .map-top { display: none; } .stage-hero .map-askbar { left: var(--space-4); transform: none; } }
.map-ask-status { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 4; margin: 0; color: var(--map-ink-muted); }
/* the home page: the company's map behind it, faint (Alex, 20 Oct) */
.ui-sheet.sheet-backdrop { position: relative; overflow: hidden; }
.home-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .16; }
.home-backdrop-map { position: absolute; inset: 0; }
.sheet-backdrop > .ui-sheet-inner { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-backdrop { opacity: .32; } }
:root[data-theme="dark"] .home-backdrop { opacity: .32; }