/* GoAus design language, 31 Oct 2026 ("design-1031"). Loaded LAST. Built from the owner's favourite: the "Next trip home" card
   (white card, bold ink border, rounded, a solid offset block behind it, tiny caps label, one big bold number).
   Three tiers, so not everything shouts:
     HERO   .ds-hero  : 2px ink border + 5px solid accent offset.  The one thing to do or know on a screen.
     CARD   .ds-card  : 1.5px ink border + 3px soft offset.        Everything else that is a card, list or row group.
     ROW    .ds-row   : inside a card, a 1.5px hairline between rows. No border or shadow of its own.
   Plus: .ds-label (caps section label), .ds-btn (.primary / .secondary / .tertiary), .ds-chip, .ds-stat (equal-height tile).
   Every class is also applied by selector to the existing markup on Home, People and Me (no JS or markup changes), so the old
   one-off styles in app.css / revamp-home.css / home.css are only the base underneath. Looks other than Classic keep their own
   colours: the ink border is their line colour and only the hero keeps the offset block. */

:root {
  --dz-ink: var(--text);                         /* border + shadow ink */
  --dz-hot: var(--accent);                       /* the offset block */
  --dz-bd: 2px; --dz-bd-s: 1.5px;
  --dz-r: 20px; --dz-r-ctl: 14px;
  --dz-card-line: var(--dz-ink);
  --dz-hair: color-mix(in srgb, var(--dz-ink) 16%, transparent);
  --dz-sh-hero: 5px 5px 0 var(--dz-hot);
  --dz-sh-card: 3px 3px 0 color-mix(in srgb, var(--dz-ink) 20%, transparent);
  --dz-sh-btn: 3px 3px 0 var(--dz-ink);
}
:root[data-theme='dark'] { --dz-hair: color-mix(in srgb, var(--dz-ink) 20%, transparent); --dz-sh-card: 3px 3px 0 color-mix(in srgb, var(--dz-ink) 12%, transparent); }
/* other looks: quiet line colour for cards, the look's own hot colour for the hero block, no card offset */
:root[data-look]:not([data-look='classic']) { --dz-card-line: var(--line); --dz-hot: var(--hot, var(--accent)); --dz-sh-card: none; --dz-sh-btn: none; --dz-hair: var(--line); }

/* ---------- label ---------- */
.ds-label, :is(#home, #people, #me) :is(.section h2, .h-sec h2, .sg-h, .sg-sub, .sg-kick) {
  font: 800 12px/1.2 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-block: 0; }
#me .sgrp .sg-h, #me .sg-h { margin: 26px 4px 10px; }
#me .sgrp .sg-sub, #me h3.sg-sub { margin: 20px 4px 8px; }
#me .sg-h:has(+ .sg-h) { display: none; }   /* a group with nothing in it yet shows no heading */
:is(#home, #me) .section { margin-bottom: 10px; }

/* ---------- hero ---------- */
.ds-hero, :is(#h-hero, #people .pp-empty, #me .account-cta, #home:not(:has(#h-hero)) .searchbar) {
  border: var(--dz-bd) solid var(--dz-hot); box-shadow: var(--dz-sh-hero); border-radius: var(--dz-r); }
:root[data-look='classic'] .ds-hero, :root[data-look='classic'] :is(#people .pp-empty, #me .account-cta, #home:not(:has(#h-hero)) .searchbar) { border-color: var(--dz-ink); }
.ds-hero, :is(#people .pp-empty, #me .account-cta, #home:not(:has(#h-hero)) .searchbar) { background: var(--surface); }
#people .pp-empty { margin-bottom: 8px; }
#me .cta-wrap { margin-bottom: 14px; }
#me .account-cta { margin-bottom: 0; }
#people .pp-empty { padding: 22px 18px; }
#people .pp-empty-ico { background: var(--accent-soft); border: var(--dz-bd-s) solid var(--dz-ink); }
/* the Me banner's close button sits inside the hero's border */
#me .cta-x { top: 10px; right: 10px; }

/* ---------- card ---------- */
.ds-card, :is(#home, #people, #me) :is(.card:not(.stats .card):not(.stats-more):not(.pp-empty):not(.account-cta), .list, .searchbar, .hx-day, .fs-recent, .h-quiet, .h-row, .hx-home, .hx-fam, .hx-later, .acct-nudge, .loc-compact, .loc-card, .upd-card) {
  background: var(--surface); border: var(--dz-bd-s) solid var(--dz-card-line); box-shadow: var(--dz-sh-card); border-radius: var(--dz-r); }
:is(#home, #people, #me) :is(.h-row, .fs-recent, .h-quiet, .hx-home, .hx-fam, .hx-later, .acct-nudge, .loc-compact, .loc-card) { padding: 14px 16px; }
:is(#home, #people, #me) #h-near .card { margin-bottom: 0; }
:is(#home, #people, #me) :is(.card, .list) + :is(.card, .list) { margin-top: 12px; }
#me .sgrp :is(.list, .card) { margin-top: 0; }
#me .sgrp :is(.list, .card) + :is(.list, .card) { margin-top: 12px; }
/* the "Updates" row when an update is ready: the accent edge, same card */
#me #me-updates { border-color: var(--accent); margin-top: 4px; }
/* the chevron in a row stays quiet */
:is(#home, #people, #me) :is(.h-row, .item) > .i:last-child { color: var(--muted); }

/* ---------- row (inside a card) ---------- */
.ds-row, :is(#home, #people, #me) .list > * + * { border-top: var(--dz-bd-s) solid var(--dz-hair); }
:is(#home, #people, #me) .list { overflow: hidden; }
:is(#home, #people, #me) .list > .item, :is(#home, #people, #me) .list > .item-pair { border-radius: 0; }
:is(#home, #people, #me) .item .ico, :is(#home, #people, #me) .h-row .ico, :is(#home, #people, #me) .fs-recent .ico, :is(#home, #people, #me) .h-quiet .ico, :is(#home, #people, #me) .account-cta .ico {
  border-radius: 12px; border: var(--dz-bd-s) solid var(--dz-card-line); background: var(--accent-soft); color: var(--accent); }
:is(#home, #people, #me) :is(.item, .h-row, .h-quiet) .ico:not(.accent) { background: var(--surface-2); color: var(--text); }
:root[data-look]:not([data-look='classic']) :is(#home, #people, #me) :is(.item, .h-row, .h-quiet, .account-cta) .ico { border-width: 0; }

/* ---------- buttons: primary / secondary / tertiary ---------- */
.ds-btn, :is(#home, #people, #me) .btn {
  min-height: 48px; border-radius: var(--dz-r-ctl); border: var(--dz-bd-s) solid var(--dz-ink); background: var(--surface); color: var(--text); font-weight: 800; box-shadow: none; }
.ds-btn.primary, :is(#home, #people, #me) .btn.primary { background: var(--accent); color: var(--on-accent); min-height: 52px; border: var(--dz-bd) solid var(--dz-ink); box-shadow: var(--dz-sh-btn); }
.ds-btn.primary:active, :is(#home, #people, #me) .btn.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dz-ink); }
.ds-btn.tertiary, :is(#home, #people, #me) :is(.link, button.link):not(.h-more) { background: none; border: 0; box-shadow: none; min-height: 44px; font-weight: 800; color: var(--accent); text-decoration: none; padding: 0 var(--s2, 8px); }
:is(#home, #people, #me) .btn.sm { min-height: 38px; border-radius: 12px; box-shadow: none; border-width: var(--dz-bd-s); }
:is(#home, #people, #me) .btn.block { width: 100%; }
:root[data-look]:not([data-look='classic']) :is(#home, #people, #me) .btn:not(.primary) { border-color: var(--line); }
:root[data-look]:not([data-look='classic']) :is(#home, #people, #me) .btn.primary { border-color: transparent; }
/* Directions: the secondary button, full width, no hint line */
#home #h-dir { border: var(--dz-bd-s) solid var(--dz-ink); border-radius: var(--dz-r-ctl); box-shadow: none; background: var(--surface); }
:root[data-look]:not([data-look='classic']) #home #h-dir { border-color: var(--line); }
/* the "Yes, tell me / Not now" pair in the nudge: one row, primary then secondary */
#home .acct-nudge-actions { gap: 10px; }
#home .acct-nudge-actions .btn { min-height: 46px; }

/* ---------- chips ---------- */
.ds-chip, :is(#home, #people, #me) :is(.h-go .chip, .loc-city-chip, .h-from-ch) {
  border: var(--dz-bd-s) solid var(--dz-card-line); background: var(--surface); box-shadow: none; border-radius: 999px; font-weight: 700; color: var(--text); }
#home .h-go .chip.h-add, #home .h-go .chip.h-edit { border: var(--dz-bd-s) solid var(--dz-card-line); color: var(--muted); }
#home .h-go .chip[aria-pressed='true'] { background: var(--text); color: var(--bg); border-color: var(--text); }
#home .loc-city-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; margin-top: 10px; font-size: 14px; }
#home .loc-city-chip .i { width: 16px; height: 16px; }
/* "Location off / Turn on / Search instead": one card row; the one action is a small primary chip, the other a plain word */
#home .loc-compact { gap: 10px; min-height: 52px; }
#home .loc-compact .grow { font-weight: 800; }
#home .loc-compact button[data-loc='on'], #home .loc-compact button[data-loc='where'] { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); border: var(--dz-bd-s) solid var(--dz-ink); font-weight: 800; }
#home .loc-compact button[data-loc='search'] { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
:root[data-look]:not([data-look='classic']) #home .loc-compact button[data-loc='on'], :root[data-look]:not([data-look='classic']) #home .loc-compact button[data-loc='where'] { border-color: transparent; }

/* ---------- stat tiles: three (or a wide one + one) in a row, all the same height ---------- */
.ds-stat, #me .stats .card, #me .stats .stats-more { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 96px; padding: 12px; background: var(--surface); border: var(--dz-bd-s) solid var(--dz-card-line); box-shadow: var(--dz-sh-card); border-radius: 16px; text-align: left; }
#me .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 10px; }
#me .stats .stats-more { grid-column: span 2; }
#me .stats .card b, #me .stats .stats-more b { font-size: 24px; line-height: 1.05; white-space: normal; overflow: visible; text-overflow: clip; order: 2; }
#me .stats .stats-more b { font-size: 17px; }
#me .stats .card small, #me .stats .stats-more small { order: 1; font: 800 11px/1.25 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; }
#me .stats .stats-more small { order: 3; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; }
#me .streak { border: var(--dz-bd-s) solid var(--dz-card-line); box-shadow: var(--dz-sh-card); }

/* ---------- Home specifics ---------- */
#home .hx-day { padding: 12px 16px; }
#home .h-from-here { margin-top: 2px; }
#home .h-near-home { font: 800 12px/1.2 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
#home .h-footer-link, #home .an-fb { color: var(--muted); font-weight: 700; text-decoration: none; }
#home .an-fb a, #home .an-fb button, #home .an-fb { text-decoration: underline; text-underline-offset: 3px; }
#me .sgrp p + :is(.list, .card), #me .sgrp .muted + :is(.list, .card) { margin-top: 10px; }
#me .stats > .card.card, #me .stats > .stats-more.stats-more { align-self: stretch; height: auto; margin: 0; box-sizing: border-box; }

/* ===================== the trip plan ("Your trip home / to School"): same language, one stack of blocks ===================== */
/* The plan was one big plain card. Now each part is its own block on a 12 px rhythm and 16 px gutters:
   the leave time is the HERO block (bold ink border + accent offset), the bus, the choice, the timeline, the links are CARDS,
   notes are a lighter card, the two actions are the shared primary / secondary buttons, "Other options" are chips. */
.plan-sheet { padding-inline: 16px; }
.plan-sheet .plan-body { min-height: 0; }
.plan-sheet .trip-card { display: flex; flex-direction: column; gap: 12px; background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 24px; border-radius: 0; }
.plan-sheet .trip-card > * { margin: 0; min-width: 0; }
.plan-sheet .trip-card > :empty { display: none; }
/* header: the place and the day, as a label line */
.plan-sheet .trip-head { gap: 12px; margin: 0 0 2px; }
.plan-sheet .trip-head .ico { width: 40px; height: 40px; border-radius: 12px; border: var(--dz-bd-s) solid var(--dz-card-line); background: var(--accent-soft); color: var(--accent); }
.plan-sheet .trip-dest { font-size: var(--rv-t-title, 20px); font-weight: 800; line-height: 1.15; }
.plan-sheet .trip-when { font: 800 12px/1.3 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
/* the tag ("School bus", "Your usual bus") */
.plan-sheet .tag-row { margin: 0; }
.plan-sheet .bus-tag { border: var(--dz-bd-s) solid currentColor; padding: 3px 10px; font-weight: 800; border-radius: 999px; }
/* HERO: the leave time */
.plan-sheet .bigrow { background: var(--surface); border: var(--dz-bd) solid var(--dz-hot); box-shadow: var(--dz-sh-hero); border-radius: var(--dz-r); padding: 16px; gap: 12px; margin: 4px 6px 6px 0; }
:root[data-look='classic'] .plan-sheet .bigrow { border-color: var(--dz-ink); }
.plan-sheet .bigrow .big { font-size: 34px; line-height: 1.02; font-weight: 800; letter-spacing: -.035em; }
.plan-sheet .bigrow .big em { color: var(--dz-hot); font-style: normal; }
.plan-sheet .nl-spare { margin: -2px 2px 0; }
.plan-sheet .nl-spare button { font: 700 13px/1.3 var(--font); color: var(--muted); text-decoration: none; border-bottom: var(--dz-bd-s) dotted var(--muted); }
/* CARD: the bus, the sub line, the choice row */
.plan-sheet .bus-eta, .plan-sheet .h-choice, .plan-sheet .note.lift, .plan-sheet .fromrow { background: var(--surface); border: var(--dz-bd-s) solid var(--dz-card-line); box-shadow: var(--dz-sh-card); border-radius: var(--dz-r); padding: 12px 14px; }
.plan-sheet .bus-eta { gap: 12px; }
.plan-sheet .bus-eta.soon { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.plan-sheet .bus-eta .muted { font-weight: 700; }
.plan-sheet .trip-card > .sub { font-size: 14px; color: var(--muted); margin: 0 2px; }
.plan-sheet .h-choice { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.plan-sheet .h-choice .link, .plan-sheet .h-choice button:not(.btn) { color: var(--accent); font-weight: 800; text-decoration: none; }
/* NOTE: the lighter card (hairline border, no offset), tinted by meaning */
.plan-sheet .note { background: var(--surface); border: var(--dz-bd-s) solid var(--dz-hair); box-shadow: none; border-radius: 12px; padding: 12px 14px; }
.plan-sheet .note.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.plan-sheet .note.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.plan-sheet .note.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.plan-sheet .note.lift { background: var(--accent-soft); border-color: var(--dz-card-line); }
.plan-sheet .note .link { color: var(--accent); font-weight: 800; text-decoration: none; }
/* "Usually on time · 90%" and the other insights: small tags, same as the status tags on Home */
.plan-sheet .insights { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plan-sheet .insights > * { border-radius: 999px; border: var(--dz-bd-s) solid var(--dz-hair); font-weight: 700; }
/* TIMELINE: one card, route-coloured markers (the line's own colour, as on the map), dashed ink for walking */
.plan-sheet .steps { background: var(--surface); border: var(--dz-bd-s) solid var(--dz-card-line); box-shadow: var(--dz-sh-card); border-radius: var(--dz-r); padding: 14px 16px 14px 12px; margin: 0; }
.plan-sheet .steps li { grid-template-columns: 76px 1fr; padding: 8px 0 8px 24px; }
.plan-sheet .steps li time { font: 800 15px/1.4 var(--font); }
.plan-sheet .steps li::before { --mk: var(--route, var(--dz-ink)); left: 2px; top: 12px; width: 12px; height: 12px; border: 3px solid var(--mk); background: var(--surface); box-sizing: border-box; }
.plan-sheet .steps li.change::before { background: var(--mk); }
.plan-sheet .steps li[style*='--route']::after { background: var(--route); opacity: .55; }
.plan-sheet .steps li.walk::before { border: 3px solid var(--muted); background: var(--surface); }
.plan-sheet .steps li.drive::before { background: var(--accent); border-color: var(--accent); }
.plan-sheet .steps li::after { left: 7px; width: 3px; top: 24px; bottom: -10px; }
.plan-sheet .fare-line { margin: 0 4px; font-size: 13px; }
/* ACTIONS: the shared primary + secondary, side by side */
.plan-sheet .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 0; }
.plan-sheet .actions .btn { width: 100%; min-height: 52px; border-radius: var(--dz-r-ctl); border: var(--dz-bd-s) solid var(--dz-ink); background: var(--surface); color: var(--text); font-weight: 800; box-shadow: none; }
.plan-sheet .actions .btn:first-child { background: var(--accent); color: var(--on-accent); border: var(--dz-bd) solid var(--dz-ink); box-shadow: var(--dz-sh-btn); }
.plan-sheet .actions .btn.on { background: var(--accent-soft); color: var(--accent); }
:root[data-look]:not([data-look='classic']) .plan-sheet .actions .btn { border-color: var(--line); }
:root[data-look]:not([data-look='classic']) .plan-sheet .actions .btn:first-child { border-color: transparent; }
/* OTHER OPTIONS: a label and chips */
.plan-sheet .also { margin: 4px 0 0; gap: 8px; font: 800 12px/1.3 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.plan-sheet .also button { border: var(--dz-bd-s) solid var(--dz-card-line); background: var(--surface); border-radius: 999px; min-height: 40px; font: 700 14px/1 var(--font); letter-spacing: 0; text-transform: none; }
.plan-sheet .also .back-to { border: 0; background: none; color: var(--accent); font-weight: 800; }
/* the quiet links: one card of rows */
.plan-sheet .card-links { display: flex; flex-direction: column; gap: 0; margin: 0; background: var(--surface); border: var(--dz-bd-s) solid var(--dz-card-line); border-radius: var(--dz-r); overflow: hidden; }
.plan-sheet .card-links .link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; color: var(--text); font-weight: 700; text-align: left; text-decoration: none; }
.plan-sheet .card-links .link + .link { border-top: var(--dz-bd-s) solid var(--dz-hair); }
.plan-sheet .card-links .link .i { color: var(--accent); }
.sgrp[hidden]{display:none!important}
#me #me-trips > .section:first-child { margin-top: 0; }

/* ===================== update 236: dark is light-on-dark, not white outlines ("my eyes", owner, 1 Nov) =====================
   In dark the ink border was the TEXT colour (near-white, 1.5-2 px) with a solid offset block: harsh on near-black. Now the same tokens
   resolve to soft light hairlines, warm surfaces step up a little with each layer, and the one hero keeps only a thin, muted offset. */
:root[data-theme='dark'] {
  --dz-ink: rgba(246, 241, 238, .17);
  --dz-card-line: rgba(246, 241, 238, .14);
  --dz-hair: rgba(246, 241, 238, .09);
  --dz-bd: 1.5px; --dz-bd-s: 1px;
  --dz-sh-hero: 3px 3px 0 color-mix(in srgb, var(--dz-hot) 40%, transparent);
  --dz-sh-card: none; --dz-sh-btn: none;
}
:root[data-theme='dark'][data-look='classic'] { --surface: #1C1917; --surface-2: #262220; --surface-3: #302B29; }
:root[data-look='classic'][data-theme='dark'] #h-hero { border-color: var(--dz-card-line); }
:root[data-theme='dark'][data-look='classic'] :is(#home:not(:has(#h-hero)) .searchbar, #people .pp-empty, #me .account-cta) { border-color: rgba(246, 241, 238, .2); }
:root[data-theme='dark'] .plan-sheet .steps li::before { --mk: var(--route, var(--muted)); }
/* the primary button in dark: a plain filled button, no hard edge */
:root[data-theme='dark'] :is(#home, #people, #me) .btn.primary, :root[data-theme='dark'] .plan-sheet .actions .btn:first-child { border-color: transparent; }
:root[data-theme='dark'] #home #h-dir { background: var(--surface); }
/* the stop card on Home: calmer rows (stop number, route pill, time) and the fleet line small and muted */
#home #h-near .card .nr-fan { font-size: 12px; font-weight: 500; color: var(--text-3, var(--muted)); letter-spacing: 0; }
:root[data-theme='dark'] #home #h-near .card { background: var(--surface); }
#home #h-near .card .nr + .nr { border-top: 1px solid var(--dz-hair); }
/* the weather row: a plain row, no stray edge or shadow (the half-drawn border was the card's offset shadow showing through) */
#home #home-inner.hv2 > #h-day.hx-day, #home #h-day.hx-day { box-shadow: none; border: 0; border-radius: 0; background: none; }
/* "Near Donkin Street · Change": one tidy line with the icon on its centre line */
#home .h-from-here { align-items: center; }
#home .h-from-here .hf-line { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; line-height: 1.3; }
#home .h-from-here .hf-short { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home .h-from-here .hf-dot { color: var(--muted); }
#home .h-from-here > .i { margin-top: 0; }