/* Helm - Fenestr and BWS. Direction C, restyled 1 Nov 2026. One breakpoint (700px); base.html
   sets the body class. Under 700px: dark petrol page, light-teal buttons, faint wave (the only
   wave). 700px+: a tinted page (--page) with white cards; .layout-app has a petrol top band,
   .layout-station a petrol side rail, .layout-solo a petrol brand panel. Light palette is strong
   (solid tags, petrol table heads); contrast per pair is in light-strong-report.md. No hatching.
   Square top-left corner of the Fenestr mark via --frame. System fonts, no JS. */

:root {
  /* The light page tint (700px+). Change this one value to re-tint every light layout:
     Deep mist #D5DEE2 | Petrol tint #D3E0E1 | Graphite card #CBD0D3 */
  --page: #D5DEE2;

  /* Chrome: the same on every screen size */
  --petrol: #0F1E22;
  --petrol-2: #172A2F;
  --petrol-line: #2C4A52;
  --on-petrol: #EEF6F7;
  --on-petrol-soft: #9FB6BB;
  --teal-light: #2FB3C6;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 240' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232FB3C6' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-20 60C110 44.0 170 76.0 280 62S460 44.0 620 54'/%3E%3Cpath d='M-20 76C98 58.5 158 93.5 268 78S448 58.5 620 70'/%3E%3Cpath d='M-20 92C86 73.0 146 111.0 256 94S436 73.0 620 86'/%3E%3Cpath d='M-20 108C74 87.5 134 128.5 244 110S424 87.5 620 102'/%3E%3Cpath d='M-20 124C62 102.0 122 146.0 232 126S412 102.0 620 118'/%3E%3Cpath d='M-20 140C50 116.5 110 163.5 220 142S400 116.5 620 134'/%3E%3Cpath d='M-20 156C38 131.0 98 181.0 208 158S388 131.0 620 150'/%3E%3Cpath d='M-20 172C26 145.5 86 198.5 196 174S376 145.5 620 166'/%3E%3Cpath d='M-20 188C14 160.0 74 216.0 184 190S364 160.0 620 182'/%3E%3Cpath d='M-20 204C2 174.5 62 233.5 172 206S352 174.5 620 198'/%3E%3C/g%3E%3C/svg%3E");

  /* Surfaces and text: DARK by default (phone), flipped to light at 700px */
  --bg: #0F1E22;
  --surface: #172A2F;
  --surface-pick: #1B3238;
  --line: #2C4A52;
  --line-strong: #5E8590;    /* input borders: 3:1+ against the page and the panel */
  --ink: #EEF6F7;
  --ink-soft: #9FB6BB;
  --link: #2FB3C6;
  --btn: #2FB3C6;
  --btn-ink: #0F1E22;
  --btn-hover: #5CC6D5;
  --sec-ink: #2FB3C6;
  --sec-line: #2FB3C6;
  --sec-hover: #1B3238;
  --danger: #FF9F8A;
  --danger-line: #A8604F;
  --field: #0B181B;
  --focus: #2FB3C6;
  --alert-bg: #3A2420;
  --alert-ink: #FFD9CF;
  --alert-edge: #FF9F8A;
  --tag-ink: #2FB3C6;
  --tag-line: #2FB3C6;
  --tag-fill: transparent;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23EEF6F7' stroke-width='2.2'/%3E%3C/svg%3E");

  --frame: 0 12px 12px 12px;  /* square top-left, like the mark */
  --frame-sm: 0 8px 8px 8px;
  --frame-xs: 0 5px 5px 5px;
  --tap: 52px;
  --mark-h: 26px;
  --font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 18px/1.5 var(--font);
       background: var(--bg) var(--wave) no-repeat center bottom / 100% 220px;
       overflow-x: clip; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Identity: "Helm" + Fenestr mark | BWS mark, equal height, neither dominating ------ */
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px;
         color: var(--on-petrol); text-decoration: none; }
.helm { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.brands { display: inline-flex; align-items: center; gap: 14px; }
.brand-item { display: inline-flex; align-items: center; gap: 9px; }
.brand-item .mark { display: block; width: var(--mark-h); height: var(--mark-h); flex: none; }
.bws-mark { display: block; height: var(--mark-h); width: auto; flex: none; }
.brand-word { font-size: 17px; font-weight: 700; line-height: 1; color: var(--on-petrol); }
.brand-sep { width: 1px; height: calc(var(--mark-h) + 6px); background: var(--petrol-line); }

/* ---- Type ------------------------------------------------------------------------------ */
h1 { margin: 0 0 16px; font-size: 32px; font-weight: 800; line-height: 1.15;
     letter-spacing: -0.02em; }
h2 { margin: 32px 0 12px; }
p { margin: 0 0 14px; }
.label { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--ink-soft); }
.lede { font-size: 18px; color: var(--ink-soft); margin: 0 0 24px; }
.meta { font-size: 16px; color: var(--ink-soft); margin: 4px 0 0; }
.addr { display: block; font-family: var(--mono); font-size: 16px; overflow-wrap: anywhere;
        color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; }

/* ---- Alerts ---------------------------------------------------------------------------- */
.alert, p[role="alert"] { margin: 0 0 18px; padding: 14px 16px; background: var(--alert-bg);
         border: 1px solid var(--alert-edge); border-left-width: 6px;
         border-radius: var(--frame-sm); color: var(--alert-ink); font-weight: 600; }

/* ---- Phone chrome: the top of the dark page -------------------------------------------- */
.band, .rail { padding: 22px 16px 0; }
.band { position: relative; }
.nav { display: flex; margin: 18px -16px 0; border-bottom: 1px solid var(--line); }
.nav a, .nav summary { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px;
         font-size: 17px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
         cursor: pointer; list-style: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.nav a[aria-current="page"], .nav summary[aria-current] { color: var(--teal-light); border-bottom-color: var(--teal-light); }
.nav-menu { flex: 1; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; margin-left: 8px; border: 5px solid; border-color: currentColor transparent transparent; }
.nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface);
             border-bottom: 1px solid var(--line); }
.nav-panel a { justify-content: flex-start; padding: 0 16px; }
.nav-solo, .band-who, .rail-now, .rail-nav, .rail-foot { display: none; }
.work { max-width: 40rem; margin: 0 auto; padding: 24px 16px 150px; }

.brandpanel { padding: 48px 20px 8px; }
.brandpanel .helm { font-size: 60px; }
.brandpanel .brands { --mark-h: 30px; }
.solo-main { padding: 28px 20px 170px; }
.solo-inner { max-width: 32rem; margin: 0 auto; }
.layout-solo h1 { font-size: 34px; }

/* ---- Buttons --------------------------------------------------------------------------- */
.button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
          min-height: var(--tap); padding: 12px 20px; margin: 0; font: inherit; font-size: 18px;
          font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
          border: 2px solid var(--btn); border-radius: var(--frame-sm); background: var(--btn);
          color: var(--btn-ink); -webkit-tap-highlight-color: transparent; }
.button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.button:active { transform: scale(0.98); }
.button.secondary { background: transparent; color: var(--sec-ink); border-color: var(--sec-line); }
.button.secondary:hover { background: var(--sec-hover); }
.button.quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button.quiet:hover { background: var(--sec-hover); }
.button.danger { background: transparent; color: var(--danger); border-color: var(--danger-line); }
.button.danger:hover { background: var(--sec-hover); }
.button.small { width: auto; min-height: 44px; padding: 8px 14px; font-size: 16px; border-width: 1.5px; }
.button.inline { width: auto; display: inline-flex; }
.ms { flex: none; }
form { margin: 0 0 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row form { margin: 0; }
.row > input, .row > select { flex: 1 1 10rem; margin: 0; }
.or { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 17px;
      color: var(--ink-soft); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---- Fields ---------------------------------------------------------------------------- */
.fields { margin: 0; }
label { display: block; font-weight: 700; font-size: 16px; margin: 14px 0 6px; }
.fields > label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], select {
  display: block; width: 100%; min-height: var(--tap); padding: 12px 14px; font: inherit;
  color: var(--ink); background: var(--field); border: 1.5px solid var(--line-strong);
  border-radius: var(--frame-sm); }
input::placeholder { color: var(--ink-soft); opacity: 1; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: var(--chev); background-repeat: no-repeat;
  background-position: right 16px center; }
label.check { display: flex; align-items: center; gap: 14px; min-height: var(--tap);
              font-weight: 500; margin: 14px 0; }
label.check input { width: 26px; height: 26px; margin: 0; accent-color: var(--btn); flex: none; }
.fields .button { margin-top: 20px; }
.code-input { margin: 0; font-family: var(--mono); font-size: 26px; letter-spacing: 0.18em;
              text-transform: uppercase; }

/* ---- Page head with the add action ----------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
             gap: 14px; margin: 0 0 20px; }
.page-head h1 { margin: 0; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.add > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
       padding: 0 18px; border: 2px solid var(--btn); border-radius: var(--frame-sm);
       background: var(--btn); color: var(--btn-ink); font-weight: 700; font-size: 17px; }
details.add > summary::before { content: "+"; font-size: 24px; font-weight: 500; line-height: 1; }
details.add > summary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
details.add[open] { flex-basis: 100%; }
details.add[open] > summary { background: transparent; color: var(--sec-ink); border-color: var(--sec-line); }
details.add[open] > summary::before { content: "\2212"; }
details.add > form { margin-top: 12px; padding: 18px; background: var(--surface);
       border: 1px solid var(--line); border-radius: var(--frame); }

/* ---- Lists: panels on the phone, ledger rows on wide screens --------------------------- */
.list, .addresses, .picker { list-style: none; margin: 0; padding: 0; }
.ledger-head { display: none; }
.item { position: relative; margin: 0 0 12px; padding: 16px; background: var(--surface);
        border: 1px solid var(--line); border-radius: var(--frame); }
.item.off { border-style: dashed; }
.item.off .name { color: var(--ink-soft); }
.item.empty { color: var(--ink-soft); }
.name { display: block; font-size: 21px; font-weight: 750; line-height: 1.25; }
.person .name { padding-right: 96px; }
.item .tags { margin-top: 8px; }
.item .cell .meta { margin-top: 4px; }
.item > .actions { margin-top: 14px; }
.count { margin-top: 16px; }

.addresses { margin-top: 10px; }
.person > .addresses > li { padding: 6px 0; }
.status { display: block; font-size: 16px; color: var(--ink-soft); }
.status.linked { color: var(--link); }

details.edit > summary { position: absolute; top: 8px; right: 8px; display: flex; align-items: center;
       min-height: 44px; padding: 0 10px; font-size: 17px; font-weight: 600; color: var(--link); }
details.edit > summary:hover { text-decoration: underline; }
details.edit[open] > summary { text-decoration: underline; }
.edit-body { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.edit-body > form, .edit-body > .row { margin: 0 0 12px; }
.edit-body > :last-child { margin-bottom: 0; }
.edit-body > .label { margin: 4px 0 8px; font-size: 13px; }
.edit-addresses { margin: 0 0 18px; }
.edit-addresses > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
       gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.edit-addresses .actions { margin: 0; }

/* ---- Tags: one teal family ------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tag { display: inline-block; padding: 2px 9px; border: 1px solid var(--tag-line);
       border-radius: var(--frame-xs); font-size: 14px; font-weight: 600; line-height: 1.45;
       color: var(--tag-ink); background: var(--tag-fill); }
.tag-factory, .tag-ok { background: rgba(47, 179, 198, 0.14); }
.tag-plain { border-color: var(--line-strong); color: var(--ink-soft); }
.tag-off { border-style: dashed; border-color: var(--ink-soft); color: var(--ink-soft); }

/* ---- Home ------------------------------------------------------------------------------ */
.hero { margin: 0 0 28px; }
.hero h1 { margin: 0 0 10px; }
.hero .tags { margin: 0 0 10px; }
.menu { display: grid; gap: 10px; }
.menu a { position: relative; display: block; min-height: 76px; padding: 16px 48px 16px 18px;
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--frame);
          color: var(--ink); text-decoration: none; }
.menu a::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px;
                 margin-top: -5px; border: solid var(--link); border-width: 0 2.5px 2.5px 0;
                 transform: rotate(-45deg); }
.menu a strong { display: block; font-size: 20px; font-weight: 750; }
.menu a span { display: block; font-size: 16px; color: var(--ink-soft); }
.menu a:hover { border-color: var(--link); }
.home-signout { margin-top: 32px; }

/* ---- Registration code ----------------------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--frame);
         padding: 18px; margin: 0 0 18px; }
.panel > :last-child { margin-bottom: 0; }
.panel.empty { color: var(--ink-soft); }
.code-panel { border: 2px solid var(--btn); }
.code { margin: 6px 0 10px; font-family: var(--mono); font-size: 40px; font-weight: 700;
        letter-spacing: 0.16em; line-height: 1.2; overflow-wrap: anywhere; }

/* ---- Station (tablet on the bench) ----------------------------------------------------- */
.now { display: flex; flex-direction: column; justify-content: center; min-height: 112px; }
.now .who { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--ink-soft); }
.now.on { border: 2px solid var(--teal-light); }
.now.on .label { color: var(--teal-light); }
.now.on .who { color: var(--ink); }
.picker { display: grid; grid-template-columns: 1fr; gap: 12px; }
.picker form { margin: 0; }
.pick { display: flex; align-items: center; width: 100%; min-height: 72px; padding: 14px 20px;
        font: inherit; font-size: 22px; font-weight: 700; text-align: left; cursor: pointer;
        color: var(--ink); background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--frame); -webkit-tap-highlight-color: transparent; }
.pick:hover { border-color: var(--link); }
.pick:active { transform: scale(0.99); }
.pick.current { border: 3px solid var(--btn); background: var(--surface-pick); }
.pick.current::after { content: "On now"; margin-left: auto; padding: 3px 10px;
       border-radius: var(--frame-xs); background: var(--btn); color: var(--btn-ink);
       font-size: 14px; font-weight: 700; }
.foot { margin-top: 32px; text-align: center; }

/* ======================================================================================== */
/* 700px and wider: Bridge's structure in Fenestr colours. A soft tinted page (--page, the */
/* one value to change), white cards with Bridge's gentle shadow, compact type. No hatching */
/* or wave lines on any light layout.                                                       */
/* ======================================================================================== */
@media (min-width: 700px) {
  :root {
    --bg: var(--page);
    --surface: #FFFFFF;
    --surface-2: #EEF2F3;
    --surface-pick: #DDF0F3;
    --line: #B4C2C6;
    --line-strong: #5E747B;
    --ink: #0F1E22;
    --ink-soft: #33464C;
    --link: #08606F;
    --btn: #0A6C7D;
    --btn-ink: #FFFFFF;
    --btn-hover: #08606F;
    --sec-ink: #08606F;
    --sec-line: #0A6C7D;
    --sec-hover: #DDF0F3;
    --danger: #A8361F;
    --danger-line: #B5503A;
    --field: #FFFFFF;
    --focus: #08606F;
    --alert-bg: #FBEDE8;
    --alert-ink: #6E2412;
    --alert-edge: #C25A40;
    --shadow: 0 1px 2px rgba(15, 30, 34, .12), 0 8px 24px rgba(15, 30, 34, .10);
    --frame: 0 14px 14px 14px;
    --tap: 40px;
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230F1E22' stroke-width='2.2'/%3E%3C/svg%3E");
  }
  body { background: var(--bg); font-size: 15px; }
  p a, .addresses a { font-weight: 650; }
  .band :focus-visible, .rail :focus-visible, .brandpanel :focus-visible { outline-color: var(--teal-light); }
  h1 { margin-bottom: 14px; font-size: 28px; font-weight: 750; letter-spacing: -0.015em; }
  .label { margin-bottom: 6px; font-size: 12px; letter-spacing: 0.1em; }
  .lede { font-size: 15px; max-width: 42rem; }
  .meta { font-size: 14px; }
  .addr { font-size: 14px; }
  label { font-size: 14px; margin: 12px 0 5px; }
  input[type="text"], input[type="email"], select { padding: 8px 12px; font-size: 15px; border-width: 1px; }
  label.check { min-height: 40px; gap: 10px; }
  label.check input { width: 20px; height: 20px; }
  .alert, p[role="alert"] { padding: 11px 14px; font-size: 14px; border-left-width: 4px; }

  /* Buttons: Bridge's compact height, Fenestr teal */
  .button { min-height: var(--tap); padding: 8px 16px; font-size: 15px; font-weight: 650; border-width: 1.5px; }
  .button.small { min-height: 36px; padding: 6px 12px; font-size: 14px; border-width: 1.5px; }
  .fields .button { margin-top: 16px; }

  /* Cards: white on the tint, square top-left like the mark */
  .sheet, .panel, details.add > form, .hero, .menu a, .solo-inner {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--frame);
    box-shadow: var(--shadow); }
  .sheet { overflow: hidden; }
  .panel { padding: 20px 22px; }

  /* Tags: solid fills, white text */
  .tag { padding: 2px 9px; border: 0; font-size: 12.5px; font-weight: 700; color: #FFF;
         background: var(--t, #4A5C6A); }
  .tag-admin { --t: var(--petrol); }
  .tag-field { --t: #0A6C7D; }
  .tag-factory { --t: #1D6455; }
  .tag-ok { --t: #1E6B3C; }
  .tag-wait { --t: #3F4B50; }
  .tag-off { --t: #687479; }
  .tag-plain { --t: var(--teal-light); color: var(--petrol); }

  .page-head { margin-bottom: 20px; }
  details.add > summary { min-height: 40px; padding: 0 16px; border-width: 1px; font-size: 15px; }
  details.add > summary::before { font-size: 20px; }
  details.add > form { max-width: 32rem; padding: 20px 22px; }

  /* ---- Ledger: Bridge's table inside a card ---- */
  .ledger-head, .pick-sheet > h2.label { background: var(--petrol); color: #FFF; font-size: 12px;
                 font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .ledger-head { display: grid; column-gap: 24px; padding: 11px 20px; }
  .ledger > .item { display: grid; column-gap: 24px; align-items: center; margin: 0;
                    padding: 15px 20px; background: none; border: 0;
                    border-bottom: 1px solid var(--line); border-radius: 0; }
  .ledger > .item:last-child { border-bottom: 0; }
  .ledger > .item:hover { background: #EEF4F5; }
  .ledger > .item.off .name, .ledger > .item.off .meta, .ledger > .item.off .addr { color: #4F6066; }
  .ledger > .item.empty { display: block; }
  .item .tags { margin-top: 0; }
  .item > .actions { margin-top: 0; justify-content: flex-end; flex-wrap: nowrap; }
  .name { font-size: 16px; font-weight: 650; }
  .count { margin: 0; padding: 10px 20px; border-top: 1px solid var(--line); background: var(--surface-2);
           font-size: 13px; font-weight: 600; }

  .device-cols, .station-cols { grid-template-columns: minmax(0, 1fr) 150px 300px; }

  .people-cols { grid-template-columns: minmax(130px, 1fr) minmax(96px, 0.6fr) minmax(0, 2.6fr) 80px; }
  .ledger-head.people-cols span:nth-child(4) { display: none; }
  .ledger > .person { align-items: start; }
  .person .name { padding-right: 0; grid-column: 1; grid-row: 1; }
  .person > .tags { grid-column: 2; grid-row: 1; }
  .person > .addresses { grid-column: 3; grid-row: 1; margin: 0; }
  .person > .addresses > li { padding: 0 0 6px; }
  .person > .addresses > li:last-child { padding-bottom: 0; }
  .status { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px;
            color: #4A5459; }
  .status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
                    background: currentColor; }
  .status.linked { color: var(--link); }
  details.edit { grid-column: 1 / -1; grid-row: 2; }
  details.edit > summary { top: 6px; right: 12px; min-height: 40px; font-size: 15px; }
  details.edit[open] .edit-body { max-width: 44rem; margin-top: 12px; padding: 16px;
       background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--frame-sm); }

  /* ---- Home ---- */
  .hero { padding: 22px 24px; max-width: 1100px; }
  .hero > :last-child { margin-bottom: 0; }
  .hero h1 { font-size: 26px; }
  .menu { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-width: 1100px; gap: 14px; }
  .menu a { min-height: 0; padding: 18px 44px 18px 20px; }
  .menu a strong { font-size: 17px; font-weight: 650; }
  .menu a span { font-size: 14px; }
  .menu a:hover { border-color: var(--btn); }
  .home-signout { display: none; }

  .code-panel { max-width: 44rem; }
  .code { font-size: 36px; }
}

/* Touch screens at this width (an iPad on People) keep 44px targets */
@media (min-width: 700px) and (pointer: coarse) {
  :root { --tap: 44px; }
  .button.small, details.add > summary, details.edit > summary { min-height: 44px; }
}

@media (min-width: 1100px) {
  /* Room for a Status column beside each sign-in address */
  .people-cols { grid-template-columns: minmax(150px, 1fr) minmax(110px, 0.6fr)
                 minmax(0, 1.7fr) minmax(0, 1.1fr) 80px; }
  .ledger-head.people-cols span:nth-child(4) { display: block; }
  .person > .addresses { grid-column: 3 / 5; }
  .person > .addresses > li { display: grid; column-gap: 24px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr); }
}

/* ---- Person pages at 700px+: the slim petrol top band, full width below ---------------- */
@media (min-width: 700px) {
  .layout-app .band { position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
                      gap: 28px; min-height: 60px; padding: 0 24px; background: var(--petrol); }
  .layout-app .brand { flex-direction: row; align-items: center; gap: 16px; }
  .layout-app .helm { font-size: 24px; }
  .layout-app .brands { --mark-h: 22px; gap: 10px; }
  .layout-app .brand-word { display: none; }
  .layout-app .nav, .layout-app .nav-solo { display: flex; margin: 0; border: 0; gap: 2px; }
  .layout-app .nav a, .layout-app .nav summary { flex: none; min-height: 60px; padding: 0 14px; font-size: 15px;
                       color: var(--on-petrol-soft); border-bottom-width: 3px; margin: 0; }
  .layout-app .nav a:hover, .layout-app .nav summary:hover { color: var(--on-petrol); }
  .layout-app .nav-menu { position: relative; flex: none; }
  .layout-app .nav-panel { right: auto; min-width: 200px; background: var(--petrol);
                           border: 1px solid var(--petrol-line); }
  .layout-app .nav-panel a { min-height: 48px; }
  .layout-app .nav a[aria-current="page"], .layout-app .nav summary[aria-current] { color: var(--teal-light);
                         background: var(--petrol-2); border-bottom-color: var(--teal-light); }
  .layout-app .band-who { display: flex; align-items: center; gap: 14px; margin-left: auto; }
  .who-name { display: none; font-size: 14px; color: var(--on-petrol-soft); }
  .band-who form { margin: 0; }
  .band-signout { min-height: 40px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600;
                  color: var(--on-petrol); background: transparent; cursor: pointer;
                  border: 1px solid var(--petrol-line); border-radius: var(--frame-sm); }
  .band-signout:hover { border-color: var(--teal-light); }
  .layout-app .work { max-width: 1400px; padding: 28px 28px 56px; }
}
@media (min-width: 1100px) {
  .layout-app .brand-word { display: inline; font-size: 15px; }
  .who-name { display: inline; }
  .layout-app .band { padding: 0 32px; }
  .layout-app .work { padding: 32px 40px 64px; }
}

/* ---- Station tablet at 700px+: plain petrol side rail, no wave ------------------------- */
@media (min-width: 700px) {
  .layout-station { display: grid; grid-template-columns: clamp(230px, 24vw, 290px) minmax(0, 1fr); }
  .layout-station .rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
         padding: 28px 20px 20px; color: var(--on-petrol); background: var(--petrol); }
  .layout-station .helm { font-size: 32px; }
  .layout-station .brand { gap: 14px; }
  .layout-station .brands { --mark-h: 22px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .layout-station .brand-sep { display: none; }
  .layout-station .brand-word { font-size: 16px; }
  .rail-now { display: block; margin-top: 36px; }
  .rail-label { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
                text-transform: uppercase; color: var(--on-petrol-soft); }
  .rail-station { margin: 0 0 18px; font-size: 20px; font-weight: 700; line-height: 1.25; }
  .rail-op { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--teal-light); }
  .rail-op.none { color: var(--on-petrol-soft); }
  .rail-change { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px;
                 font-weight: 600; color: var(--teal-light); }
  .rail-nav { display: block; margin: 24px -20px 0; }
  .rail-nav a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px 0 16px;
                font-size: 17px; font-weight: 600; color: var(--on-petrol-soft); text-decoration: none;
                border-left: 4px solid transparent; }
  .rail-nav a[aria-current="page"] { color: var(--teal-light); background: var(--petrol-2);
                                     border-left-color: var(--teal-light); }
  .rail-foot { display: block; margin: auto 0 0; font-size: 15px; color: var(--on-petrol-soft); }
  .layout-station .work { max-width: 1100px; margin: 0; padding: 36px 36px 56px; }
  .layout-station h1 { font-size: 34px; margin-bottom: 20px; }
  .layout-station .station-label, .layout-station .now, .layout-station .foot { display: none; }
  /* The picker is one card: Bridge's tinted card head, then big name tiles (it is a tablet) */
  .pick-sheet > h2.label { margin: 0; padding: 13px 22px; font-size: 13px; }
  .pick-sheet > .picker, .pick-sheet > .panel { margin: 0; padding: 20px 22px 22px; }
  .pick-sheet > .panel { border: 0; border-radius: 0; box-shadow: none; }
  .picker { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .pick { min-height: 76px; background: var(--surface-2); border: 1px solid #8FA2A8; }
  .pick:hover { border-color: var(--btn); background: #FFFFFF; }
  .pick.current { border: 2px solid var(--btn); background: var(--surface-pick); }
}

/* ---- No one signed in, 700px+: petrol brand panel beside the tinted sign-in area ------- */
@media (min-width: 700px) {
  .solo { display: grid; grid-template-columns: clamp(300px, 40vw, 600px) minmax(0, 1fr); min-height: 100vh; }
  .brandpanel { padding: 72px 48px; background: var(--petrol); }
  .brandpanel .helm { font-size: 76px; }
  .brandpanel .brand { gap: 22px; }
  .brandpanel .brands { --mark-h: 30px; }
  .brandpanel .brand-word { font-size: 20px; }
  .solo-main { display: flex; align-items: center; padding: 48px 40px; }
  .solo-inner { width: 100%; max-width: 32rem; margin: 0; padding: 36px 36px 32px; }
  .layout-solo h1 { font-size: 34px; }
  .layout-solo .button { min-height: 48px; font-size: 16px; }
}
@media (min-width: 1100px) {
  .brandpanel { padding: 18vh 64px 64px; }
  .brandpanel .helm { font-size: 112px; }
  .brandpanel .brand { gap: 30px; }
  .brandpanel .brands { --mark-h: 44px; gap: 20px; }
  .brandpanel .brand-word { font-size: 28px; }
  .solo-main { padding: 64px 80px; }
  .solo-inner { max-width: 36rem; padding: 44px 44px 40px; }
  .layout-solo h1 { font-size: 40px; }
  .layout-solo .lede { font-size: 17px; }
  .layout-solo .button { min-height: 52px; font-size: 17px; }
}

.menu + h2.label { margin-top: 28px; }