/**
 * View layouts.
 *
 * Components live in components.css and are shared; this file is the shape of
 * each screen. The rule the whole file follows: a desktop is not a big phone.
 * v1 rendered one narrow column at every width and left a laptop two-thirds
 * empty, so every view here has a real wide layout rather than a centred strip.
 */

@layer views {

  /* ================================================== shell-level ======== */
  #view { flex: 1 1 auto; padding-block-end: 2rem; }

  /* The bottom bar floats over the end of the page, so every scrolling view
     has to reserve its height or the last control sits underneath it. */
  @media (max-width: 820px) {
    #view { padding-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); }
  }

  /* Kiosk, slides and poster paint the whole window themselves. */
  body[data-chrome='bare'] > .topbar,
  body[data-chrome='bare'] > .tabbar { display: none; }
  body[data-chrome='bare'] #view { padding-block: 0; }

  /* Reem Kufi gives ع a tall line box with the glyph low inside it, so grid
     centring the span centred the box and not the letter. A flat line-height
     and a block display make the box the glyph's own size again. */
  /* The button holds one of two labels, in two scripts that sit in completely
     different places relative to the baseline. Measured in Reem Kufi at 100px:
     ع inks from 32 above the baseline to 21 below it, while EN inks from 76
     above to 3 below. Centring the line box therefore centres EN and leaves ع
     riding 0.295em low, which is what it was doing. Each is centred on its own
     ink instead. Re-measure if the display face ever changes. */
  .lang-glyph {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1875rem;
    line-height: 1;
  }
  .lang-glyph[data-script='arabic'] { transform: translateY(-0.295em); }
  .lang-glyph[data-script='latin'] { transform: translateY(0.015em); font-size: 1rem; }
  .seg-wrap { flex-wrap: wrap; }
  .seg-wrap button { flex: 1 1 40%; }

  /* A page header: bilingual title, one sentence under it, actions on the end. */
  .page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 2vw, 1.5rem);
  }
  .page-head .lede { color: var(--ink-muted); max-width: 56ch; margin-block-start: .6rem; }

  /* Sub-navigation for the Project pages, which are one story in five parts. */
  /* Clear of the sticky top bar. Without the top padding the first chip sat
     against the bar's underside and read as part of it. */
  .subnav {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding-block-start: clamp(1rem, 2.5vw, 1.75rem);
    margin-block-end: 1.5rem;
  }
  .subnav a {
    padding: .45rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    text-decoration: none;
    font-size: var(--t-small);
    color: var(--ink-muted);
  }
  .subnav a:hover { background: var(--surface-sunk); color: var(--ink); }
  .subnav a[aria-current='page'] {
    background: var(--primary); border-color: var(--primary);
    color: var(--on-primary); font-weight: 500;
  }

  /* A "to confirm" marker. Every unverified fact in the project wears one, so
     nothing unconfirmed can reach an assessment unnoticed. */
  .todo {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .1rem .45rem;
    border: 1px dashed var(--accent);
    border-radius: var(--r-woven);
    color: var(--accent);
    font-size: .6875rem;
    font-weight: 500;
    vertical-align: middle;
  }

  /* =================================================== home / scan ======== */
  /* Desktop: the headline on the start side, a large viewfinder on the end.
     Phone: the viewfinder first, because on a phone it *is* the app. */
  .scan-layout {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-block: clamp(1.25rem, 3vw, 2.5rem);
    /* minmax(0, 1fr) rather than 1fr: a bare 1fr track takes an automatic
       minimum from its contents, and the trees strip's min-content is ten
       160px cards wide. That blew the single-column track out to 1,708px on a
       phone -- the strip stopped scrolling inside itself and scrolled the whole
       page sideways instead, which left the hero sitting off-centre in a page
       far wider than the window. The desktop rule below already used
       minmax(0, 1fr), which is why only the phone layout was wrong. */
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 900px) {
    .stage { --stage-h: min(70vh, 620px); }
    .scan-layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      padding-block: clamp(2rem, 5vw, 4rem);
    }
    .scan-hero { grid-column: 1; grid-row: 1; }
    .scan-stage { grid-column: 2; grid-row: 1; }
    .known-strip, .disclaimer { grid-column: 1 / -1; }
  }
  @media (max-width: 899px) {
    .scan-stage { order: -1; }
  }

  .scan-hero { display: grid; gap: 1.1rem; justify-items: start; }
  .scan-hero .lede { color: var(--ink-muted); max-width: 46ch; }
  .scan-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
  .privacy { display: flex; align-items: center; gap: .4rem; margin: 0; }
  .privacy .inline-ico { width: 16px; height: 16px; }
  .disclaimer { margin-block-start: .5rem; }

  /* ---------------------------------------------------------- viewfinder */
  .scan-stage { display: grid; gap: .9rem; }
  /* Sized by max-width rather than max-height. `aspect-ratio` with a capped
     height resolves the *width* from the height, which pushed the viewfinder
     wider than its column and off the side of a phone. Capping the width and
     letting the ratio produce the height cannot do that. */
  .stage {
    --stage-h: 46vh;
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: calc(var(--stage-h) * 4 / 5);
    margin-inline: auto;
    border-radius: var(--r-sheet);
    overflow: hidden;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--ink-muted);
  }
  .stage video, .stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--dur-ui) var(--ease);
  }
  .stage[data-mode='live'] video { opacity: 1; }
  .stage[data-mode='frozen'] canvas { opacity: 1; }

  .stage-guide, .stage-leaf {
    position: absolute;
    pointer-events: none;
    transition: opacity var(--dur-ui) var(--ease);
  }
  .stage-guide {
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .5;
  }
  .stage-leaf {
    width: 46%;
    color: currentColor;
    opacity: .22;
  }
  .stage[data-mode='live'] { color: #F6F3EA; }
  .stage[data-mode='live'] .stage-leaf { opacity: .5; }
  .stage[data-mode='frozen'] .stage-guide,
  .stage[data-mode='frozen'] .stage-leaf,
  .stage[data-mode='denied'] .stage-leaf { opacity: 0; }

  .stage-note {
    position: relative;
    display: grid;
    gap: .4rem;
    max-width: 30ch;
    padding: 1rem;
    text-align: center;
    font-size: var(--t-small);
  }
  .stage[data-mode='denied'] .stage-note { max-width: 38ch; text-align: start; }
  .stage[data-mode='live'] .stage-note,
  .stage[data-mode='frozen'] .stage-note { display: none; }

  /* The sampling grid that settles over a frozen frame: the leaf as the model
     receives it — a grid of samples rather than a photograph. */
  .stage[data-pixel-grid='1']::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(to right, rgb(246 243 234 / .18) 0 1px, transparent 1px calc(100% / 14)),
      repeating-linear-gradient(to bottom, rgb(246 243 234 / .18) 0 1px, transparent 1px calc(100% / 14));
    background-size: calc(100% / 14) calc(100% / 14);
    animation: grid-in var(--dur-ui) var(--ease) both;
  }
  @keyframes grid-in { from { opacity: 0 } to { opacity: 1 } }

  .stage-bar { display: grid; gap: .75rem; min-height: 74px; }
  .stage-controls { display: flex; gap: .75rem; align-items: center; }
  .model-state { display: grid; gap: .4rem; }

  /* ------------------------------------------------------- the trees strip */
  .known-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 1fr);
    gap: .75rem;
    overflow-x: auto;
    padding-block-end: .5rem;
    /* An end gutter, so the last card scrolls clear of the edge instead of
       stopping flush against it, and scroll padding to match so a snapped
       card is never parked underneath that gutter. */
    padding-inline-end: var(--gutter);
    scroll-padding-inline: 0 var(--gutter);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .known {
    display: grid;
    gap: .5rem;
    justify-items: start;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    text-decoration: none;
    scroll-snap-align: start;
  }
  .known:hover { background: var(--surface-sunk); }
  .known-shape { color: var(--primary); }
  .known-name { display: grid; }
  .known-name b { font-family: var(--font-display); font-weight: 600; }
  .known-name small { color: var(--ink-muted); font-size: .8125rem; }

  /* ====================================================== result ========== */
  /* The species name runs the full width; the photograph and the two readings
     it produced sit together on the start side; everything that follows from
     them — findings, treatment, suppliers — runs down the end side. Putting the
     name across the top is what lets the measurements share the photo's column
     instead of leaving it empty under a sticky image. */
  .result {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    padding-block: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
  }
  .result-title { display: grid; gap: .35rem; }
  .result-title .lede { color: var(--ink-muted); max-width: 46ch; }
  .result-side, .result-main { display: grid; gap: 1.25rem; align-content: start; }

  @media (min-width: 900px) {
    .result { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .result-title { grid-column: 1 / -1; }
    .result-side { position: sticky; inset-block-start: calc(64px + 1rem); }
  }
  .result-empty { padding-block: 4rem; }

  .result-photo { margin: 0; display: grid; gap: .75rem; }
  .photo-frame {
    position: relative;
    border-radius: var(--r-sheet);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-sunk);
    aspect-ratio: 4 / 5;
  }
  .photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  /* The overlay is revealed row by row on arrival, then toggled instantly. */
  .photo-overlay {
    opacity: 0;
    clip-path: inset(0 0 calc(100% - var(--reveal, 100%)) 0);
  }
  .result-photo[data-view='map'] .photo-overlay,
  .result-photo[data-revealing='1'] .photo-overlay { opacity: 1; }
  .photo-toggle { margin: 0; }

  .result-confidence { display: grid; gap: .75rem; }
  .section-title { font-size: var(--t-subtitle); margin-block-end: .75rem; }

  .findings { display: grid; gap: .65rem; list-style: none; padding: 0; margin: 0; }
  .finding { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
  .finding-mark {
    width: 10px; height: 10px;
    margin-block-start: .45rem;
    rotate: 45deg;
    background: var(--healthy-fill);
    outline: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
    outline-offset: -1px;
  }
  .finding[data-level='warn'] .finding-mark { background: var(--chlorosis-fill); }
  .finding[data-level='bad'] .finding-mark { background: var(--necrosis-fill); }

  .panel-alert { border-color: var(--accent); border-inline-start-width: 3px; }

  .treatments { display: grid; gap: 1.25rem; }
  .treatment-cause { margin-block-end: .75rem; }
  .products { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 0; }
  .products li { display: grid; gap: .15rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--line); }

  .suppliers { display: grid; gap: .75rem; list-style: none; padding: 0; margin: 0; }
  .supplier {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-block-end: .75rem;
    border-block-end: 1px solid var(--line);
  }
  .supplier:last-child { border-block-end: 0; padding-block-end: 0; }
  .supplier-name { display: grid; }
  .supplier-name b { font-weight: 500; }
  .supplier-actions { display: flex; gap: .5rem; }
  .supplier-actions .btn { min-height: 40px; padding-inline: .9rem; }

  .method summary { cursor: pointer; font-weight: 500; }
  .method p { margin-block-start: .75rem; }

  .tips { display: grid; gap: .5rem; padding-inline-start: 1.25rem; margin: 0; }
  .result-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

  /* ======================================================= trees =========== */
  .tree-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (min-width: 700px) { .tree-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .tree-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }

  .tree-tile a {
    display: grid;
    gap: .6rem;
    height: 100%;
    align-content: start;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    text-decoration: none;
  }
  .tree-tile a:hover { background: var(--surface-sunk); }
  .tile-shape { color: var(--primary); }
  .tile-names { display: grid; }
  .tile-names b { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
  .tile-names small { color: var(--ink-muted); font-size: .8125rem; justify-self: start; }
  .tile-tags { display: flex; gap: .35rem; flex-wrap: wrap; }

  /* ==================================================== one tree =========== */
  .tree-page { padding-block: clamp(1.25rem, 3vw, 2rem); }
  .tree-head {
    display: flex;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    flex-wrap: wrap;
    padding-block-end: clamp(1.25rem, 3vw, 2rem);
  }
  .tree-mark { color: var(--primary); flex: none; }
  .tree-body {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 900px) { .tree-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .lookalike { grid-column: 1 / -1; }
  .lookalike-body { display: flex; gap: 1.25rem; align-items: start; flex-wrap: wrap; }
  .lookalike-mark { color: var(--accent); flex: none; }
  .accuracy-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-display-l);
    line-height: 1;
    margin-block-end: .5rem;
  }
  .tree-actions { margin-block-start: 1.5rem; }

  /* ======================================================== help =========== */
  .help-page { padding-block-end: 2rem; }
  .help-official { margin-block-end: clamp(2rem, 5vw, 3rem); }
  .helplines { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (min-width: 800px) { .helplines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .helpline h3 { font-size: var(--t-subtitle); margin-block-end: .5rem; }
  .helpline p { margin-block-end: .6rem; }
  .helpline-numbers { display: flex; gap: .5rem; flex-wrap: wrap; }
  .helpline-numbers .btn { min-height: 40px; }
  .emirate-filter { max-width: 320px; margin-block: 1.25rem; }
  #supplier-list { padding: clamp(1rem, 2vw, 1.5rem); }

  /* ===================================================== project =========== */
  .project-page, .how-page, .lab-page, .journey-page, .team-page { padding-block-end: 3rem; }
  .project-page > section, .how-page > section, .lab-page > section, .journey-page > section {
    margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
  }

  .name-story { display: grid; gap: .75rem; }
  .name-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-display-l);
    line-height: 1;
    color: var(--primary);
    justify-self: start;
  }
  .name-tagline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-subtitle);
    color: var(--accent);
  }

  .prose-columns {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
  }
  @media (min-width: 900px) { .prose-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .prose h2 { font-size: var(--t-title); margin-block-end: .75rem; }
  .prose p + p { margin-block-start: .85rem; }

  /* A quotation is set as one: large, quiet, and not in a card like everything
     else, so it reads as a voice rather than as another content block. */
  .quote {
    margin: clamp(1.5rem, 4vw, 3rem) 0;
    padding-inline-start: clamp(1rem, 3vw, 2rem);
    border-inline-start: 3px solid var(--accent);
  }
  .quote blockquote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.25rem, 2vw + .5rem, 2rem);
    line-height: 1.35;
    max-width: 26ch;
    margin-block-end: .9rem;
  }
  :root[lang='ar'] .quote blockquote { line-height: 1.6; }
  .quote figcaption { display: grid; gap: .1rem; justify-items: start; }

  .leader-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
  }
  /* No filter, no crop through the face, no hover effect. */
  .leader { margin: 0; display: grid; gap: .6rem; }
  .leader img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 22%;
    border-radius: var(--r-panel);
    border: 1px solid var(--line);
  }
  .leader figcaption { display: grid; gap: .1rem; }
  .leader .credit { font-size: .6875rem; }

  .link-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .link-card {
    display: flex;
    gap: .9rem;
    align-items: start;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    text-decoration: none;
  }
  .link-card:hover { background: var(--surface-sunk); }
  .link-card > span:last-child { display: grid; gap: .15rem; }
  .link-card b { font-family: var(--font-display); font-weight: 600; }
  .link-icon { color: var(--primary); flex: none; }

  /* ========================================================= how =========== */
  .pipeline-scroll { overflow-x: auto; }
  .pipeline { min-width: 720px; width: 100%; height: auto; color: var(--ink-muted); }
  .pipe-box rect { fill: var(--surface-sunk); stroke: var(--line); stroke-width: 1; }
  .pipe-box text {
    fill: var(--ink);
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 400;
  }
  .pipe-decide rect { stroke: var(--accent); stroke-width: 1.5; }
  .pipe-line { stroke: var(--ink-muted); stroke-width: 1.5; fill: none; }
  .pipe-lane {
    fill: var(--ink-muted);
    font-family: var(--font-text);
    font-size: 12px;
    letter-spacing: .01em;
  }
  :root[dir='rtl'] .pipeline { transform: scaleX(-1); }
  :root[dir='rtl'] .pipeline text { transform: scaleX(-1); transform-origin: center; transform-box: fill-box; }

  .model-card { display: grid; gap: 1rem; }
  .model-card .arch { margin: 0; }
  .bars { display: grid; gap: .55rem; margin-block-end: .5rem; }
  /* A sub-heading inside a panel needs air above it or it collides with the
     block it follows — which on the Lab page was a row of accuracy bars. */
  .panel h3.section-title { margin-block-start: 1.75rem; }
  .panel h3.section-title:first-child { margin-block-start: 0; }
  .bar-row {
    display: grid;
    grid-template-columns: minmax(84px, 1fr) minmax(0, 3fr) auto;
    gap: .75rem;
    align-items: center;
  }
  .bar-row .meter-cells { height: 18px; }
  .bar-label { font-size: var(--t-small); }
  .bar-value { font-size: var(--t-small); font-variant-numeric: tabular-nums; }
  .matrix-wrap { max-width: 520px; }
  .limits { display: grid; gap: .85rem; padding-inline-start: 1.15rem; margin: 0; }
  .limits li { max-width: var(--measure); }

  /* ========================================================= lab =========== */
  .table-scroll { overflow-x: auto; }
  .bench-out { font-family: var(--font-display); font-weight: 600; min-height: 1.6em; margin: 0; }

  /* ===================================================== journey =========== */
  .timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
  .stage {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding-block-end: 1.75rem;
  }
  /* The rail is drawn on the node, not on the row, so the last stage does not
     trail a line into nothing. */
  .stage-node {
    position: relative;
    width: 13px; height: 13px;
    margin-block-start: .35rem;
    rotate: 45deg;
    background: var(--primary);
    flex: none;
  }
  .stage:not(:last-child) .stage-node::after {
    content: '';
    position: absolute;
    inset-block-start: 17px;
    inset-inline-start: 5px;
    width: 1px;
    height: 200px;
    background: var(--line);
    rotate: -45deg;
    transform-origin: top;
  }
  .stage-body { display: grid; gap: .35rem; }
  .stage-date { color: var(--ink-muted); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
  .stage h3 { font-size: var(--t-subtitle); }
  .stage p { max-width: var(--measure); }

  .iterations { display: grid; gap: 1rem; }
  @media (min-width: 1000px) { .iterations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .beats { display: grid; gap: .2rem; margin: 0; }
  .beats dt {
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-muted);
    margin-block-start: .75rem;
  }
  .beats dt:first-child { margin-block-start: 0; }
  .beats dd { margin: 0; }

  .compare { display: grid; gap: .75rem; }
  .compare-picker { margin-block-end: .25rem; }
  .compare-frame {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    overflow: hidden;
    background: var(--surface-sunk);
    aspect-ratio: 1366 / 860;
  }
  .compare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  /* v1 is clipped to the start side of the handle; v2 is the layer beneath. */
  .compare-v1 { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
  :root[dir='rtl'] .compare-v1 { clip-path: inset(0 0 0 calc(100% - var(--split))); }
  .compare-handle {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--split);
    width: 2px;
    background: var(--accent);
  }
  .compare-tag {
    position: absolute;
    inset-block-start: .6rem;
    padding: .15rem .5rem;
    border-radius: var(--r-woven);
    background: var(--ink);
    color: var(--bg);
    font-size: .6875rem;
  }
  .compare-tag-v1 { inset-inline-start: .6rem; }
  .compare-tag-v2 { inset-inline-end: .6rem; }
  .compare-range { width: 100%; accent-color: var(--accent); min-height: var(--tap); }

  /* ======================================================== team =========== */
  .school { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-block-end: 2rem; }
  /* A wide lockup, sized by height. Letterboxing it into a square left the
     school's name too small to read. */
  .school-logo {
    height: 62px;
    width: auto;
    max-width: min(210px, 100%);
    object-fit: contain;
  }
  .team-section { margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
  .member-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .member-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .person { display: grid; gap: .5rem; align-content: start; }
  .person-head { display: flex; gap: .9rem; align-items: center; margin-block-end: .5rem; }
  .avatar {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    flex: none;
    border-radius: var(--r-ctl);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--primary);
  }
  .person-label {
    font-family: var(--font-text);
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-muted);
    margin-block-start: .5rem;
  }
  .person-list { display: grid; gap: .35rem; padding-inline-start: 1.1rem; margin: 0; font-size: var(--t-small); }
  .person-speaks { font-size: var(--t-small); }
  .person-supervisor { grid-column: 1 / -1; }
  .reasons { margin: .4rem 0; padding-inline-start: 1.1rem; display: grid; gap: .25rem; }

  /* The school's initials set in the display face, until the real logo lands. */
  .school-mark {
    display: grid;
    place-items: center;
    width: 88px; height: 88px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface-sunk);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary);
    letter-spacing: .02em;
  }

  /* The reset strips markers from any list with a class, which is right for
     navigation and wrong for prose. These get the mark back — a small diamond,
     the same motif as the heart of the logo — rather than a disc. */
  .person-list, .limits, .tips, .reasons { list-style: none; padding-inline-start: 0; }
  .person-list li, .limits li, .tips li, .reasons li {
    position: relative;
    padding-inline-start: 1.1rem;
  }
  .person-list li::before, .limits li::before, .tips li::before, .reasons li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .55em;
    width: 7px; height: 7px;
    rotate: 45deg;
    background: var(--primary);
  }
  .limits li::before { background: var(--ink-muted); }
  /* The tips are a numbered sequence, so they keep their numbers. */
  .tips { counter-reset: tip; }
  .tips li::before {
    content: counter(tip);
    counter-increment: tip;
    inset-block-start: 0;
    width: auto; height: auto;
    rotate: none;
    background: none;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  /* ==================================================== feedback =========== */
  /* One column by default, two only when there is a side column to fill. */
  .feedback-layout { display: grid; gap: 1.25rem; align-items: start; max-width: 44rem; }
  @media (min-width: 900px) {
    .feedback-layout:has(.feedback-side) {
      max-width: none;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
  }
  .feedback-form { display: grid; gap: 1.25rem; }
  .feedback-side { display: grid; gap: 1.25rem; }

  .rating { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
  .rating legend { padding: 0; font-weight: 500; }
  .rating-scale { display: flex; gap: .6rem; }

  /* A real radio input, visually replaced by a diamond — the motif at the heart
     of the mark. Stars would make a school project look like an app store. */
  .diamond-radio {
    position: relative;
    display: grid;
    place-items: center;
    gap: .3rem;
    min-width: var(--tap);
    min-height: var(--tap);
    cursor: pointer;
  }
  .diamond-radio input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }
  .diamond-mark {
    width: 24px; height: 24px;
    rotate: 45deg;
    border: 2px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    transition: background var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
  }
  .diamond-radio:hover .diamond-mark { border-color: var(--primary); }
  .diamond-radio input:checked ~ .diamond-mark { background: var(--primary); border-color: var(--primary); }
  .diamond-radio input:focus-visible ~ .diamond-mark { outline: 3px solid var(--focus); outline-offset: 3px; }
  .diamond-num { font-size: .75rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

  .feedback-thanks { display: grid; gap: .75rem; justify-items: start; }
  .thanks-mark { color: var(--primary); margin: 0; }
  .admin-list { display: grid; gap: .6rem; list-style: none; padding: 0; margin-block-start: 1rem; }
  .admin-list li { display: grid; gap: .1rem; padding-block-end: .6rem; border-block-end: 1px solid var(--line); }

  /* ======================================================= brand =========== */
  .brand-page > section { margin-block-end: 1.25rem; }
  .brand-mark-row { display: flex; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; flex-wrap: wrap; }
  .variant-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-block-start: 1.5rem; }
  .variant { margin: 0; display: grid; gap: .5rem; justify-items: center; padding: 1rem; border-radius: var(--r-ctl); }
  .variant[data-on='light'] { background: var(--wool); color: var(--ink-core); }
  .variant[data-on='dark'] { background: var(--night); color: var(--wool); }
  .variant[data-on='mono'] { background: var(--surface-sunk); color: var(--ink); }
  .variant[data-on='app'] { background: var(--surface-sunk); }

  .lockup-row { display: flex; gap: 2rem; flex-wrap: wrap; align-items: end; }
  .lockup-row figure { margin: 0; display: grid; gap: .6rem; justify-items: start; }

  .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
  .swatch { margin: 0; display: grid; gap: .5rem; }
  .swatch-chip { display: block; height: 64px; border-radius: var(--r-woven); border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
  .swatch figcaption { display: grid; }

  .type-specimen { display: grid; gap: .35rem; }
  .specimen-display { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-l); line-height: 1.1; }
  .specimen-text { font-size: var(--t-subtitle); }

  .icon-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .75rem; }
  .icon-cell {
    margin: 0;
    display: grid;
    gap: .4rem;
    justify-items: center;
    padding: .75rem .25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    color: var(--primary);
  }
  .icon-cell figcaption { color: var(--ink-muted); word-break: break-all; }

  /* ====================================================== kiosk ============ */
  .kiosk {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
  }
  /* Sized against the viewport *height*, not its width. A kiosk screen is
     whatever the school has spare — a 24" monitor turned portrait, a laptop, a
     borrowed TV — and the one thing that must never happen is the "Tap to scan"
     button falling below the fold on a screen nobody can scroll. */
  .kiosk-body {
    flex: 1 1 auto;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: clamp(.6rem, 1.8vh, 1.5rem);
    padding: clamp(.75rem, 1.5vh, 2rem) clamp(1.5rem, 4vw, 4rem);
    text-align: center;
  }
  .kiosk-logo { cursor: pointer; padding: 0; }
  .kiosk-logo .lockup-stacked { --lockup-w: clamp(110px, 17vh, 240px); }
  .kiosk-tagline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.125rem, 2.6vh, 2rem);
    color: var(--accent);
    margin: 0;
  }

  .kiosk-fact {
    max-width: 62ch;
    display: grid;
    gap: .3rem;
    font-size: clamp(.875rem, 1.7vh, 1.0625rem);
    transition: opacity 200ms var(--ease);
  }
  .kiosk-fact[data-swap='1'] { opacity: 0; }
  .fact-label { color: var(--ink-muted); text-transform: none; margin: 0; }
  .fact-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.125rem, 2.2vh, 1.5rem); margin: 0; }
  .fact-text { margin: 0 auto; }
  .fact-alt { color: var(--ink-muted); font-size: var(--t-small); }

  .kiosk-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(.75rem, 1.8vh, 1.1rem) clamp(1.25rem, 3vw, 2.2rem);
    border-radius: var(--r-sheet);
    background: var(--primary);
    color: var(--on-primary);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.125rem, 3vh, 2rem);
    box-shadow: var(--shadow-scan);
  }
  .kiosk-cta .ico { width: clamp(28px, 4vh, 44px); height: clamp(28px, 4vh, 44px); }
  .kiosk-qr { display: grid; gap: .4rem; justify-items: center; }
  .kiosk-qr .qr { --qr-size: clamp(84px, 13vh, 150px); padding: 8px; }
  .kiosk-qr img { width: var(--qr-size); height: var(--qr-size); }
  .kiosk-exit { text-align: center; color: var(--ink-muted); padding-block: .5rem; margin: 0; font-size: .75rem; }

  /* ======================================================= deck ============ */
  .deck {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
  }
  .deck-stage {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 2vw, 2rem);
    min-height: 0;
  }
  /* 16:9, letterboxed inside whatever the projector actually gives us. The
     subtraction is the chrome around it: the Sadu band, the deck bar, the key
     hint and the stage's own padding. Get it wrong and the controls fall off
     the bottom of the screen mid-presentation. */
  .slide {
    width: min(100%, calc((100dvh - 210px) * 16 / 9));
    aspect-ratio: 16 / 9;
    display: grid;
    align-content: center;
    gap: clamp(.75rem, 2vh, 1.5rem);
    padding: clamp(1.25rem, 4vw, 3.5rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sheet);
    overflow: auto;
  }
  .slide-title { font-size: clamp(1.5rem, 3.4vw, 3rem); }
  .slide-title-layout { display: flex; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; flex-wrap: wrap; }
  .slide-title-layout .lockup-stacked { --lockup-w: clamp(140px, 14vw, 240px); }
  .slide-tagline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.75rem); color: var(--accent); }
  .slide-lede { font-size: clamp(1rem, 1.4vw, 1.375rem); max-width: 60ch; }
  .slide-facts, .slide-kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; margin-block: 1rem; }
  .slide-facts dt, .slide-kv dt { color: var(--ink-muted); font-size: var(--t-small); }
  .slide-facts dd, .slide-kv dd { margin: 0; }
  .slide-kv dd { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
  .slide-two { display: grid; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
  @media (min-width: 760px) { .slide-two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
  .slide-points { display: grid; gap: .7rem; list-style: none; padding: 0; margin: 0; }
  .slide-points li { position: relative; padding-inline-start: 1.25rem; font-size: clamp(.95rem, 1.2vw, 1.25rem); }
  .slide-points li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .55em;
    width: 8px; height: 8px;
    rotate: 45deg;
    background: var(--primary);
  }
  .slide-stat { display: grid; gap: .3rem; justify-items: center; text-align: center; }
  .stat-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: var(--primary); margin: 0; }
  .slide-demo { display: grid; gap: 1.25rem; justify-items: start; }
  .slide-qr { display: grid; gap: .5rem; justify-items: center; }

  .deck-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem clamp(.75rem, 2vw, 1.5rem);
    border-block-start: 1px solid var(--line);
    background: var(--surface);
    flex-wrap: wrap;
  }
  .deck-bar .spacer { flex: 1 1 auto; }
  .deck-count, .deck-speaker { font-size: var(--t-small); color: var(--ink-muted); }
  .deck-timer {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    padding-inline: .5rem;
  }
  /* Three bands: under the assessment's floor, inside the window, over its
     ceiling. The speaker needs to know which, not to do arithmetic on stage. */
  .deck-timer[data-band='under'] { color: var(--ink-muted); }
  .deck-timer[data-band='in'] { color: var(--healthy); }
  .deck-timer[data-band='over'] { color: var(--accent); }
  .deck[data-timer='0'] .deck-timer { opacity: .45; }

  .deck-notes {
    padding: 1rem clamp(.75rem, 2vw, 1.5rem);
    border-block-start: 1px solid var(--line);
    background: var(--surface-sunk);
    max-height: 32vh;
    overflow: auto;
  }
  .deck-notes h3 { font-size: 1rem; margin-block-end: .4rem; }
  .deck-keys { text-align: center; color: var(--ink-muted); padding-block: .4rem; margin: 0; }

  /* ===================================================== poster ============ */
  /* The poster is paper. It pins the light brand tokens rather than following
     the interface theme — a wordmark that swaps to its light-on-dark variant is
     invisible on a cream sheet, and the sheet is cream whatever the screen is. */
  .poster {
    --mark: url('../assets/brand/warif-mark.svg');
    --lockup: url('../assets/brand/warif-lockup.svg');
    --lockup-rtl: url('../assets/brand/warif-lockup-rtl.svg');
    --lockup-stacked: url('../assets/brand/warif-lockup-stacked.svg');
    --sadu-tile: url('../assets/brand/sadu-band.svg');
    width: var(--pw);
    min-height: var(--ph);
    margin-inline: auto;
    background: var(--wool);
    color: var(--ink-core);
    display: flex;
    flex-direction: column;
    /* Everything below is in millimetres so the browser lays out what the print
       shop receives, rather than something that only resembles it. An A1 is read
       standing a metre away: 4.6mm of body text is about 13pt, which is the
       floor for that distance, and the first draft at 3.4mm was unreadable from
       anywhere except directly in front of it. */
    font-size: 4.6mm;
    line-height: 1.45;
  }
  .poster-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8mm;
    align-items: start;
    padding: 12mm 14mm 8mm;
  }
  .poster-head .lockup { --lockup-w: 62mm; --lockup-h: 17mm; }
  .poster-title h1 { font-size: 17mm; line-height: 1.05; margin-block-end: 3mm; }
  .poster-tagline { font-family: var(--font-display); font-weight: 600; font-size: 8mm; color: var(--sadu-red); }
  .poster-descriptor { font-size: 5.4mm; color: #4A5B51; }
  .poster-credits {
    display: grid;
    justify-items: end;
    gap: 1.5mm;
    text-align: end;
    font-size: 3.9mm;
    line-height: 1.6;
  }
  .poster-credits p { max-width: 72mm; }
  .poster-school-logo { height: 16mm; width: auto; margin-block-end: 2mm; }

  .poster-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8mm;
    padding: 0 14mm 8mm;
    /* Spread the blocks down the sheet rather than stacking them at the top and
       leaving the bottom third of an A1 empty. */
    align-content: space-between;
  }
  .poster-wide, .poster-shots { grid-column: 1 / -1; }
  /* The QR sits beside Impact rather than under it: one code alone on a full
     A1 row is a lot of paper spent on a square. */
  .poster-qr-block { align-content: end; justify-content: end; }
  .poster-block h2 {
    font-size: 8mm;
    margin-block-end: 3mm;
    padding-block-end: 2mm;
    border-block-end: 0.6mm solid var(--ghaf);
  }
  .poster-block p { max-width: none; margin-block-end: 2.5mm; }
  .poster-note { font-size: 3.7mm; color: #4A5B51; }

  .poster-stages { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3mm; list-style: none; padding: 0; margin: 0; }
  .poster-stages li {
    display: grid;
    gap: 1mm;
    padding-block-start: 3mm;
    border-block-start: 1.2mm solid var(--ghaf-light);
    font-size: 3.9mm;
  }
  .poster-stages b { font-size: 4.6mm; }

  .poster-pipeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3mm;
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .poster-pipeline li {
    position: relative;
    padding: 3mm 3mm 3mm 10mm;
    border: 0.4mm solid var(--ghaf-light);
    font-size: 3.9mm;
  }
  .poster-pipeline li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    inset-inline-start: 3mm;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ghaf);
  }

  .poster-kv { display: grid; gap: 2mm; margin-block-end: 3mm; }
  .poster-kv > div { display: flex; justify-content: space-between; gap: 4mm; border-block-end: 0.3mm dotted #C5CFC2; padding-block-end: 1mm; }
  .poster-kv dt { color: #4A5B51; }
  /* Ten leaves, drawn. The most immediate thing on the sheet from across a hall,
     and the only place the poster shows what the library actually contains. */
  .poster-trees {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4mm;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .poster-trees li {
    display: grid;
    justify-items: center;
    gap: 0.8mm;
    text-align: center;
    color: var(--ghaf);
    font-size: 3.4mm;
  }
  .poster-trees b { font-family: var(--font-display); font-size: 4.2mm; color: var(--ink-core); }
  .poster-trees span { color: #4A5B51; }
  .poster-trees em {
    font-style: normal;
    font-size: 2.9mm;
    padding: 0.5mm 1.5mm;
    border: 0.3mm solid var(--ghaf);
    border-radius: 0.5mm;
  }
  .poster-trees li[data-reference='1'] { color: #7d8a80; }
  .poster-trees li[data-reference='1'] em { border-style: dashed; border-color: #7d8a80; color: #7d8a80; }
  .poster-kv dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* Sized by height, not by column width. A phone screenshot is taller than it
     is wide by more than two to one, so stretching three of them across an A1
     column produced three images a third of a metre tall. */
  .poster-shot-row { display: flex; gap: 6mm; justify-content: start; align-items: start; }
  .poster-shot-row img {
    height: 150mm;
    width: auto;
    object-fit: cover;
    object-position: top;
    border: 0.4mm solid #C5CFC2;
    border-radius: 2mm;
  }

  .poster-qr-block { display: flex; gap: 10mm; }
  .poster-qr { display: grid; gap: 2mm; justify-items: center; font-size: 4mm; }
  .poster-qr img { width: 42mm; height: 42mm; }

  .poster-foot {
    display: flex;
    justify-content: space-between;
    gap: 8mm;
    padding: 5mm 14mm 8mm;
    font-size: 3.4mm;
    color: #4A5B51;
  }

  /* On screen the poster is a preview: scaled to fit, centred, on a dark ground
     so the sheet reads as a sheet. `zoom` rather than `transform: scale` because
     a transform leaves the layout box at full size — 2,245 px across for an A1 —
     so the sheet stayed off-centre and the page kept a horizontal scrollbar.
     zoom reflows, so centring and page height come out right. Print sets its own
     page box and never sees any of this. */
  @media screen {
    body[data-chrome='bare'] #view:has(.poster) {
      background: #2A332C;
      padding: 2rem 1rem;
      overflow-x: hidden;
    }
    .poster { box-shadow: 0 20px 60px rgb(0 0 0 / .4); }
  }
}