/* THA Hike Planner: visual layer, built on THA-App-Design-System.md (v1.0, 6 November 2026).
   Light only (guide 4.1): there is deliberately no dark-mode rule anywhere in this file.
   Every colour, radius, shadow and font below comes from the token block. Nothing outside it uses a raw colour value. */

/* Raleway, self-hosted (SIL Open Font License, see fonts/OFL.txt). Weights 400, 500, 600 and 700 only, Latin subset. */
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/raleway-400.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/raleway-500.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/raleway-600.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/raleway-700.woff2') format('woff2'); }

:root {
  /* guide 5.1 and 32 */
  --tha-ocean: #03405C;
  --tha-lagoon: #035D5D;
  --tha-steel: #588092;

  --tha-pearl: #F1F0E8;
  --tha-ice: #E6EFF6;
  --tha-mist: #E9EFEC;
  --tha-sky: #C9E6F0;
  --tha-seafoam: #E1F0EA;
  --tha-minty: #79D4AD;
  --tha-near-white: #F3F3F2;
  --tha-whisper-grey: #EBEBEB;
  --tha-warm-beige: #F4E4C2;

  --tha-rose: #EFDDDD;
  --tha-burgundy: #703240;

  /* guide 5.2 */
  --tha-ocean-pressed: #022E43;
  --tha-amber: #A8650F;
  --tha-amber-text: #6B4300;

  --tha-text: #0A0A0A;
  --tha-grey: #444444;
  --tha-muted: #6B7280;          /* non-essential meta on white only */
  --tha-border: #D1D5DB;         /* decorative container borders */
  --tha-input-border: #7F8A92;   /* inputs and tappable outlines, 3:1 or more */
  --tha-white: #FFFFFF;

  --tha-focus: #035D5D;          /* Forest Lagoon, matches the website */

  --tha-radius-sm: 8px;
  --tha-radius: 10px;
  --tha-radius-lg: 16px;

  --tha-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --tha-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);

  --tha-transition: 0.2s ease;

  --tha-font: "Raleway", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Added by the app (not in guide section 32): the Lagoon focus ring, the AWTGS grade colours from guide section 7
     (used only on a labelled grade chip), and page spacing from section 11.2. The emergency red is deliberately not defined. */
  --tha-focus-ring: rgba(3, 93, 93, 0.28);
  --tha-grade-1: #79D4AD;
  --tha-grade-2: #CC6699;
  --tha-grade-3: #FFAE00;
  --tha-grade-4: #F15B2A;
  --tha-grade-5: #EC0033;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px;
  --page-pad: 20px;

  /* Shapes for tick / arrow / question / chevron marks. Used as masks, so they take whatever colour the control gives them. */
  --icon-tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --icon-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20V5M5 12l7-7 7 7'/></svg>");
  --icon-question: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 9a3.5 3.5 0 0 1 6.8 1c0 2.4-3.3 2.9-3.3 5M12 19.5h.01'/></svg>");
  --icon-alert: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v9M12 19.5h.01'/></svg>");
  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>");

  color-scheme: only light;
}

html {
  -webkit-text-size-adjust: 100%;
  font-family: var(--tha-font);
  font-variant-numeric: lining-nums;   /* guide 8.5: Raleway's default figures are old-style */
  background: var(--tha-pearl);
  color: var(--tha-text);
  color-scheme: only light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--tha-pearl); color: var(--tha-text); font-size: 16px; line-height: 1.55; font-weight: 400;
  padding-bottom: env(safe-area-inset-bottom); }
button, input, select, textarea { font: inherit; font-variant-numeric: inherit; }
/* times, dates and late-back are compared and read precisely (guide 8.5) */
.tha-num, input[type=date], input[type=time], input[type=datetime-local], input[type=number] { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- text ---------- */
h1, h2, h3 { font-family: inherit; }
h1 { font-size: 28px; line-height: 1.25; font-weight: 700; color: var(--tha-ocean); margin: var(--sp-2) 0 var(--sp-3); }
h2 { font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--tha-ocean); margin: var(--sp-6) 0 var(--sp-2); }
h3 { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--tha-text); margin: var(--sp-5) 0 var(--sp-2); }
h3:first-child, .card > h3:first-child { margin-top: 0; }
p { margin: var(--sp-2) 0; }
.muted { color: var(--tha-grey); font-size: 14px; line-height: 1.5; }       /* helper text: Dark Grey, never muted grey, on the Pearl page */
.muted a { font-weight: 600; }
a { color: var(--tha-ocean); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Hover styles apply only on devices that can hover. On a phone a tap would otherwise leave the hover colour stuck on the control. */
@media (hover: hover) { a:hover { color: var(--tha-ocean-pressed); } }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* a number stays with its unit, and a grade stays on one line */
.nb, .gr { white-space: nowrap; }
/* tertiary "back" link at the top of a screen: a comfortable tap target, no underline */
main > p:first-child > a:only-child { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; padding-right: var(--sp-3); }
code { font-size: 13px; word-break: break-all; background: var(--tha-mist); border-radius: 4px; padding: 1px 5px; }
.loading { color: var(--tha-grey); }

/* ---------- header and page ---------- */
.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: calc(var(--sp-1) + env(safe-area-inset-top)) var(--page-pad) var(--sp-1); background: var(--tha-pearl); border-bottom: 1px solid var(--tha-border); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--tha-ocean); text-decoration: none; font-weight: 700; font-size: 17px; }
.tag { font-size: 12px; font-weight: 700; line-height: 1.4; background: var(--tha-ice); color: var(--tha-ocean); border: 1px solid var(--tha-sky); border-radius: 99px; padding: 1px 9px; }
/* online is a quiet dot (the words are for screen readers); offline is a clear chip */
.net { flex: none; font-size: 13px; font-weight: 700; line-height: 1.4; }
.net.on { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.net .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tha-lagoon); }
.net.off { color: var(--tha-amber-text); background: var(--tha-warm-beige); border: 1px solid var(--tha-amber); border-radius: 99px; padding: 2px 10px; }
.net:empty { display: none; }
/* inside a planning step: one compact header (back, hike name, step and saved time, status) with the progress line along its bottom edge */
.top.planning { display: block; padding: calc(var(--sp-1) + env(safe-area-inset-top)) 0 0; }
.ph { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--page-pad) var(--sp-1) var(--sp-1); }
.back { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--tha-radius-sm); text-decoration: none; }
.back i { width: 24px; height: 24px; background: var(--tha-ocean); transform: rotate(180deg); -webkit-mask: var(--icon-chevron) center / 20px 20px no-repeat; mask: var(--icon-chevron) center / 20px 20px no-repeat; }
.pt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pname { color: var(--tha-ocean); font-size: 17px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmeta { color: var(--tha-grey); font-size: 13px; font-weight: 500; }
.top.planning .progress { border-radius: 0; margin: 0; height: 4px; }
.top.planning .progress > i { border-radius: 0; }
main { max-width: 700px; margin: 0 auto; padding: var(--sp-4) var(--page-pad) 120px; }

/* ---------- bottom tab bar (top-level screens only): Hikes and Plan ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; background: var(--tha-white); border-top: 1px solid var(--tha-border);
  padding-bottom: env(safe-area-inset-bottom); }
.tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: var(--sp-2) var(--sp-3);
  color: var(--tha-grey); font-size: 13px; font-weight: 600; text-decoration: none; border-top: 3px solid transparent; margin-top: -1px; }
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--tha-ocean); border-top-color: var(--tha-ocean); font-weight: 700; }
.tab:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--tha-focus-ring); }

/* ---------- cards ---------- */
.card { background: var(--tha-white); border: 1px solid var(--tha-border); border-radius: var(--tha-radius); padding: var(--sp-4); margin: var(--sp-4) 0; box-shadow: var(--tha-shadow); }
.card h3 { margin-bottom: var(--sp-1); }
.card p.muted { margin: var(--sp-1) 0 0; }
.hikecard { margin: var(--sp-2) 0 var(--sp-5); }
/* tappable hike card: a choice card (guide 16) */
.card.tap { display: block; width: 100%; text-align: left; color: var(--tha-text); cursor: pointer; border: 1.5px solid var(--tha-input-border); transition: border-color var(--tha-transition), background-color var(--tha-transition); }
.card.tap h3 { color: var(--tha-ocean); }
.card.tap:active { background: var(--tha-seafoam); border-color: var(--tha-ocean); }
.card.debug { border-style: dashed; border-color: var(--tha-steel); background: transparent; box-shadow: none; }   /* PROTOTYPE/DEBUG */
.debug-only { opacity: .85; }

/* ---------- buttons (guide 14) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; line-height: 1.25; border: 1.5px solid var(--tha-ocean); border-radius: var(--tha-radius-sm);
  padding: 12px var(--sp-5); min-height: 48px; background: var(--tha-ocean); color: var(--tha-white); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--tha-transition), border-color var(--tha-transition); }
.btn:active { background: var(--tha-ocean-pressed); border-color: var(--tha-ocean-pressed); color: var(--tha-white); }
.btn.alt { background: var(--tha-white); color: var(--tha-ocean); border-color: var(--tha-ocean); }
.btn.alt:active { background: var(--tha-seafoam); color: var(--tha-ocean); border-color: var(--tha-ocean); }
/* deleting a saved plan is a destructive action, not an emergency: concern colour (guide 6.5), never red */
.btn.danger { background: var(--tha-white); color: var(--tha-burgundy); border-color: var(--tha-burgundy); }
.btn.danger:active { background: var(--tha-rose); color: var(--tha-burgundy); border-color: var(--tha-burgundy); }
/* hover only where a pointer can hover; :active (while pressed) is the same everywhere */
@media (hover: hover) {
  .btn:hover { background: var(--tha-ocean-pressed); border-color: var(--tha-ocean-pressed); color: var(--tha-white); }
  .btn.alt:hover { background: var(--tha-seafoam); color: var(--tha-ocean); border-color: var(--tha-ocean); }
  .btn.danger:hover { background: var(--tha-rose); color: var(--tha-burgundy); border-color: var(--tha-burgundy); }
  .linkbtn:hover { color: var(--tha-ocean-pressed); }
  .chip[data-act]:hover { background: var(--tha-seafoam); }
}
.btn.block { display: flex; width: 100%; }
.btn.small { min-height: 44px; padding: 8px var(--sp-4); font-size: 15px; }
.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0; }
.row > * { flex: 1 1 140px; min-width: 0; }
.row > .f { margin: 0; }
/* two fields side by side only where there is room; on a phone each field gets its own line so labels, inputs and helper text never crowd */
@media (max-width: 479px) { .row:has(> .f) { flex-direction: column; gap: var(--sp-5); } .row:has(> .f) > .f { flex: none; } }
.nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--tha-pearl); border-top: 1px solid var(--tha-border);
  padding: var(--sp-3) var(--page-pad) calc(var(--sp-3) + env(safe-area-inset-bottom)); display: flex; gap: var(--sp-3); max-width: 700px; margin: 0 auto; }
.nav > * { flex: 1; }
.linkbtn { background: none; border: 0; color: var(--tha-ocean); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; padding: var(--sp-2) var(--sp-3); }

/* ---------- form controls (guide 15) ---------- */
.f { display: block; min-width: 0; margin: var(--sp-5) 0; }
.f > span { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
.f small { display: block; color: var(--tha-grey); font-size: 14px; font-weight: 400; line-height: 1.45; margin-top: 6px; }
.f small.fieldmsg { color: var(--tha-burgundy); font-weight: 600; }
.f small.fieldmsg[hidden] { display: none; }
/* date and time fields: the label and a visible Clear control share a row (the button is deliberately outside the <label>) */
.f .fl { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 44px; margin-bottom: 2px; }
.f .fl label { font-size: 16px; font-weight: 600; line-height: 1.35; }
.clr { flex: none; min-height: 44px; min-width: 44px; padding: 0 var(--sp-2); background: none; border: 0; color: var(--tha-ocean); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.clr:disabled { color: var(--tha-grey); font-weight: 500; text-decoration: none; cursor: default; }
.clr:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tha-focus-ring); border-radius: 4px; }
@media (hover: hover) { .clr:not(:disabled):hover { color: var(--tha-ocean-pressed); } }
/* "Finish + 1 h" and friends under the late-back field: small action chips in a row */
.quicklate { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }
h3 + .row { margin-top: var(--sp-1); }
.nightsout { font-size: 20px; font-weight: 700; color: var(--tha-ocean); margin: var(--sp-1) 0 var(--sp-2); }
.sublabel { font-weight: 700; font-size: 16px; margin: var(--sp-3) 0 var(--sp-1); }
.domain { color: var(--tha-grey); font-weight: 500; font-size: 14px; }
.status { margin: var(--sp-1) 0 var(--sp-3); }
input[type=text], input[type=number], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=datetime-local], input[type=url], select, textarea {
  width: 100%; font-size: 16px; line-height: 1.4; color: var(--tha-text); background: var(--tha-white); border: 1.5px solid var(--tha-input-border);
  border-radius: var(--tha-radius-sm); padding: 11px var(--sp-3); min-height: 48px; transition: border-color var(--tha-transition), box-shadow var(--tha-transition); }
/* Safari gives its built-in date, time and date-time pickers a minimum width and centres their value, which pushed the page sideways on an iPhone.
   Take away that intrinsic width, keep the field inside its column, and left-align the value like every other field. An empty one keeps its height. */
input[type=date], input[type=time], input[type=datetime-local] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; height: 48px; text-align: left; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; margin: 0; padding: 0; }
input[type=date]::-webkit-datetime-edit, input[type=time]::-webkit-datetime-edit, input[type=datetime-local]::-webkit-datetime-edit { padding: 0; }
input::placeholder, textarea::placeholder { color: var(--tha-muted); opacity: 1; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--tha-focus); box-shadow: 0 0 0 3px var(--tha-focus-ring); }
.chip:focus-visible, .btn:focus-visible, .linkbtn:focus-visible, a:focus-visible, summary:focus-visible, .card.tap:focus-visible {
  outline: none; border-color: var(--tha-focus); box-shadow: 0 0 0 3px var(--tha-focus-ring); }
a:focus-visible, .linkbtn:focus-visible { border-radius: 4px; }
/* Tick boxes look exactly like the tick marks on the choice cards (kit, conditions): the same card, the same 22px square, the same tick.
   The real checkbox stays in place (invisible, still tappable and focusable); the square is drawn beside it. */
.chk { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 48px; margin: var(--sp-2) 0; background: var(--tha-white);
  border: 1.5px solid var(--tha-input-border); border-radius: var(--tha-radius-sm); cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.3;
  transition: border-color var(--tha-transition), background-color var(--tha-transition); }
.chk input { position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.chk::before { content: ''; flex: none; width: 22px; height: 22px; border: 2px solid var(--tha-input-border); border-radius: 6px; background: var(--tha-white);
  transition: background-color var(--tha-transition), border-color var(--tha-transition); }
.chk:has(input:checked) { background: var(--tha-seafoam); border-color: var(--tha-ocean); font-weight: 600; color: var(--tha-ocean); }
.chk:has(input:checked)::before { background: var(--tha-ocean); border-color: var(--tha-ocean); }
.chk:has(input:checked)::after { content: ''; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--tha-white); pointer-events: none;
  -webkit-mask: var(--icon-tick) center / 13px 13px no-repeat; mask: var(--icon-tick) center / 13px 13px no-repeat; }
.chk:has(input:focus-visible) { border-color: var(--tha-focus); box-shadow: 0 0 0 3px var(--tha-focus-ring); }
@media (hover: hover) { .chk:hover { border-color: var(--tha-steel); background: var(--tha-seafoam); } }
.item { padding: var(--sp-4) 0; border-top: 1px solid var(--tha-border); }
.item:first-of-type { border-top: 0; }
.item h3 { margin-top: 0; }
.item .f { margin: var(--sp-3) 0 0; }
/* step 2: eight factors in a tighter list. Each row keeps 44px-tall buttons, with less air between rows than other steps */
.factors { margin: var(--sp-2) 0 var(--sp-3); }
.factors .item { padding: 10px 0 6px; }
.factors .item h3 { font-size: 16px; margin: 0 0 6px; }
.factors .chips { margin: 0; gap: var(--sp-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.factors .chip { min-height: 44px; padding: 6px 12px; }

/* ---------- choice cards (guide 16): every tap selection ----------
   Selected = Seafoam, Ocean border AND a filled mark with a tick, so it never relies on colour alone. */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: var(--sp-2) 0 var(--sp-4); }
.chip { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; font-size: 16px; font-weight: 500; line-height: 1.3; min-height: 48px; padding: 10px 14px;
  background: var(--tha-white); color: var(--tha-text); border: 1.5px solid var(--tha-input-border); border-radius: var(--tha-radius-sm); cursor: pointer;
  transition: border-color var(--tha-transition), background-color var(--tha-transition); }
.chip[data-chip]::before, .chip[data-toggle]::before { content: ''; flex: none; width: 22px; height: 22px; border: 2px solid var(--tha-input-border); border-radius: 50%; background: var(--tha-white);
  transition: background-color var(--tha-transition), border-color var(--tha-transition); }
.chip[data-toggle]::before { border-radius: 6px; }               /* squares for pick-any, circles for pick-one */
.chip:active { background: var(--tha-seafoam); }
@media (hover: hover) { .chip:hover { border-color: var(--tha-steel); background: var(--tha-seafoam); } }
.chip.on { background: var(--tha-seafoam); border-color: var(--tha-ocean); color: var(--tha-ocean); font-weight: 600; }
.chip.on[data-chip]::before, .chip.on[data-toggle]::before { background: var(--tha-ocean); border-color: var(--tha-ocean); }
.chip.on[data-chip]::after, .chip.on[data-toggle]::after { content: ''; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--tha-white);
  -webkit-mask: var(--icon-tick) center / 13px 13px no-repeat; mask: var(--icon-tick) center / 13px 13px no-repeat; }
/* a selected answer that deserves a second look (little or no coverage, "not yet talked it through"): amber pair with an alert mark */
.chip.on.warn { background: var(--tha-warm-beige); border-color: var(--tha-amber); color: var(--tha-amber-text); }
.chip.on.warn::before { background: var(--tha-amber); border-color: var(--tha-amber); }
.chip.on.warn::after { -webkit-mask-image: var(--icon-alert); mask-image: var(--icon-alert); }
/* the two marks on each factor in step 2 differ in label, icon and surface */
.chip.on[data-toggle$=":stretch"] { background: var(--tha-warm-beige); border-color: var(--tha-amber); color: var(--tha-amber-text); }
.chip.on[data-toggle$=":stretch"]::before { background: var(--tha-amber); border-color: var(--tha-amber); }
.chip.on[data-toggle$=":stretch"]::after { -webkit-mask-image: var(--icon-up); mask-image: var(--icon-up); }
.chip.on[data-toggle$=":unsure"] { background: var(--tha-ice); border-color: var(--tha-ocean); border-style: dashed; color: var(--tha-ocean); }
.chip.on[data-toggle$=":unsure"]::before { background: var(--tha-ocean); border-color: var(--tha-ocean); border-radius: 50%; }
.chip.on[data-toggle$=":unsure"]::after { -webkit-mask-image: var(--icon-question); mask-image: var(--icon-question); }
/* a chip that triggers an action rather than a choice (use a suggested time, plan it in more detail) is a small secondary button */
.chip[data-act] { display: inline-flex; width: auto; min-height: 44px; padding: 8px 14px; color: var(--tha-ocean); font-weight: 600; border-color: var(--tha-ocean); }
.chip[data-act]:active { background: var(--tha-seafoam); }

/* ---------- panels (guide 6.3, 6.4, 6.5, 21) ---------- */
.note { border-left: 4px solid var(--tha-ocean); background: var(--tha-ice); color: var(--tha-text); border-radius: 0 var(--tha-radius) var(--tha-radius) 0; padding: var(--sp-3) 14px; margin: var(--sp-4) 0; font-size: 15px; line-height: 1.5; }
.note.ok { border-left-color: var(--tha-lagoon); background: var(--tha-seafoam); }
.note.ok::before { content: ''; display: inline-block; vertical-align: -3px; width: 18px; height: 18px; margin-right: var(--sp-2); background: var(--tha-lagoon);
  -webkit-mask: var(--icon-tick) center / 13px 13px no-repeat; mask: var(--icon-tick) center / 13px 13px no-repeat; }
.note.warn { border-left-color: var(--tha-amber); background: var(--tha-warm-beige); }
.note.bad { border-left-color: var(--tha-burgundy); background: var(--tha-rose); color: var(--tha-burgundy); }
/* the contextual prompt: Warm Beige with a narrow amber edge, dark text, a quiet way to answer it */
.nudge { border-left: 4px solid var(--tha-amber); background: var(--tha-warm-beige); color: var(--tha-text); border-radius: 0 var(--tha-radius) var(--tha-radius) 0; padding: var(--sp-3) 14px 6px; margin: var(--sp-4) 0; }
.nudge p { margin: 0 0 var(--sp-2); }
.nudge-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-1); }
.nudge-actions .linkbtn { color: var(--tha-amber-text); padding-left: 0; }
/* teaching panel (THA's own notes for the hike): Seafoam with an Ocean edge */
.info { border-left: 4px solid var(--tha-ocean); background: var(--tha-seafoam); border-radius: 0 var(--tha-radius) var(--tha-radius) 0; }
.card.info { padding: var(--sp-3) 14px; box-shadow: none; border-width: 0 0 0 4px; border-color: var(--tha-ocean); }
.card.info h3 { color: var(--tha-ocean); }
.card.info ul, details.info ul { margin: var(--sp-2) 0 var(--sp-1); padding-left: 1.2em; }
details.info { border-width: 0 0 0 4px; border-color: var(--tha-ocean); }

/* ---------- status chips (guide 22, 23) ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; border-radius: 99px; padding: 2px 10px; background: var(--tha-seafoam); color: var(--tha-lagoon); border: 1px solid var(--tha-lagoon); }
.pill::before { content: ''; width: 14px; height: 14px; background: var(--tha-lagoon); -webkit-mask: var(--icon-tick) center / 11px 11px no-repeat; mask: var(--icon-tick) center / 11px 11px no-repeat; }
.pill.warn { background: var(--tha-warm-beige); color: var(--tha-amber-text); border-color: var(--tha-amber); }
.pill.warn::before { width: 8px; height: 8px; border-radius: 50%; background: var(--tha-amber); -webkit-mask: none; mask: none; }
/* "Saved on this device": a local state, never the confirmed green. Shown as plain text in the planning header, after the step:
   "Step 2 of 10 · Saved on this device 2:41 am"; the separator only appears with the text */
.savebar::before { content: ' · '; white-space: pre; }
.savebar:empty { display: none; }
.savebar.bad { display: block; margin: 2px 0 4px; font-weight: 600; color: var(--tha-burgundy); background: var(--tha-rose); border: 1px solid var(--tha-burgundy); border-radius: var(--tha-radius-sm); padding: 4px 10px; }
.savebar.bad::before { content: none; }

/* grades (guide 7): plain text, with a small square of the grade colour before it in compact lines. The colour is decoration; the words carry the meaning.
   On the hike card at the top of a planning step the grade is plain text with its AWTGS icon to the right of the card's text. */
.sw { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; background: var(--tha-grade-1); }
.sw.g1 { background: var(--tha-grade-1); } .sw.g2 { background: var(--tha-grade-2); } .sw.g3 { background: var(--tha-grade-3); }
.sw.g4 { background: var(--tha-grade-4); } .sw.g5 { background: var(--tha-grade-5); }
.hikecard { display: flex; align-items: flex-start; gap: var(--sp-3); }
.hikecard .hc-text { flex: 1 1 auto; min-width: 0; }
.gicon { flex: none; width: 52px; height: 52px; border-radius: var(--tha-radius-sm); }

/* ---------- progress (guide 17) ---------- */
.progress { height: 6px; background: var(--tha-whisper-grey); border-radius: 99px; overflow: hidden; margin: var(--sp-2) 0 var(--sp-1); }
.progress > i { display: block; height: 100%; background: var(--tha-ocean); border-radius: 99px; transition: width var(--tha-transition); }

/* ---------- collapsible sections ---------- */
details { margin: var(--sp-3) 0; border: 1px solid var(--tha-border); border-radius: var(--tha-radius-sm); background: var(--tha-white); padding: 0 var(--sp-4); }
details[open] { padding-bottom: var(--sp-3); }
summary { cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; gap: var(--sp-3); color: var(--tha-ocean); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ''; flex: none; width: 18px; height: 18px; background: var(--tha-ocean); -webkit-mask: var(--icon-chevron) center / 14px 14px no-repeat; mask: var(--icon-chevron) center / 14px 14px no-repeat; transition: transform var(--tha-transition); }
details[open] > summary::before { transform: rotate(90deg); }
details .f { margin: var(--sp-3) 0; }
h2.sec { border-top: 1px solid var(--tha-border); padding-top: var(--sp-5); margin-top: var(--sp-6); }

/* ---------- the summary ---------- */
.sum { margin-top: var(--sp-2); }
.sum .headline { margin: var(--sp-1) 0 var(--sp-2); }
.sum dl { margin: 0; }
.sum dt { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--tha-lagoon); margin-top: var(--sp-4); }
.sum dl > dt:first-child { margin-top: var(--sp-1); }
.sum dd { margin: 2px 0 0; white-space: pre-wrap; }
.sum p { white-space: pre-line; }
.sum ul { padding-left: 1.2em; margin: var(--sp-1) 0; }
.sum li { margin: 6px 0; }
.sum .tripinfo { background: var(--tha-white); border: 1px solid var(--tha-border); border-radius: var(--tha-radius); padding: var(--sp-1) var(--sp-4) var(--sp-4); margin: var(--sp-4) 0; }
.sum section { margin: var(--sp-5) 0; background: var(--tha-white); border: 1px solid var(--tha-border); border-radius: var(--tha-radius); box-shadow: var(--tha-shadow); padding: var(--sp-1) var(--sp-4) var(--sp-4); }
.sum section h2 { margin: var(--sp-4) 0 var(--sp-1); }
.sum section.trail { border-top: 4px solid var(--tha-ocean); }
.sum section.before { border-top: 4px solid var(--tha-steel); }

/* a group: a heading (Ocean, larger than its content) with its one Edit link beside it, then phrases and one level of bullets */
.sum .grp { margin-top: var(--sp-5); }
.sum .gh { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 44px; }
.sum .gh h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--tha-ocean); }
.sum a.edit { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sp-2); font-size: 15px; font-weight: 600; }
.sum .grp p { margin: var(--sp-1) 0; }
.sum .grp p.lead { margin-bottom: 0; }
.sum .grp p.gap { color: var(--tha-amber-text); font-style: italic; border-left: 3px solid var(--tha-amber); padding-left: var(--sp-3); }
.sum .grp.attn { background: var(--tha-warm-beige); border-left: 4px solid var(--tha-amber); border-radius: 0 var(--tha-radius) var(--tha-radius) 0; padding: var(--sp-1) 14px var(--sp-2); margin-top: var(--sp-5); }
.sum .grp.attn a { color: var(--tha-ocean); }
/* a field error that is also on the summary (a late-back before the hike starts, a turn-around outside the trip dates): the concern colours, never red */
.sum .grp li.concern { color: var(--tha-burgundy); font-weight: 600; }
.sum .grp.attn ul { margin: var(--sp-1) 0; }
.sum .grp.info { padding: var(--sp-1) 14px var(--sp-2); }
.sum .grp.info ul { margin: var(--sp-1) 0; }
.sum .counts { margin-top: var(--sp-5); }

/* the key times together, larger, with lining figures. Two across on a phone; four across when there is room. */
.keytimes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0 var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--tha-ice); border-radius: var(--tha-radius); }
.kt { display: flex; flex-direction: column; min-width: 0; }
.ktl { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--tha-ocean); }
.ktd { font-size: 16px; font-weight: 600; line-height: 1.3; }
.ktt { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--tha-ocean); white-space: nowrap; }
.ktn { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--tha-grey); }
/* "Share plan": a short line under the buttons (copied, or sharing isn't available) and, only when nothing else works, the text to select. */
.sharenote { margin: var(--sp-3) 0 0; font-size: 15px; line-height: 1.45; color: var(--tha-grey); }
.sharenote:empty { display: none; }
.sharenote textarea.sharetext { display: block; width: 100%; margin-top: var(--sp-2); min-height: 180px; }
/* Open items: a lead line ("Kit still to sort:") reads as a small heading with its bullets indented under it, so a plain bullet that follows it
   (such as "Pat doesn't yet know the plan") is clearly a separate item and not one of the kit items. One level of bullets only. */
.sum .grp.attn p.lead, #leaves p.lead:not(.intro) { font-weight: 600; margin-top: var(--sp-3); }
.sum .grp.attn ul, #leaves ul { padding-left: 22px; }
.sum .grp.attn p.lead + ul, #leaves p.lead:not(.intro) + ul { padding-left: 48px; }
.sum .grp.attn p.lead + ul + ul, #leaves p.lead + ul + ul { margin-top: var(--sp-3); }
/* a late-back that sits at or before the expected finish: still shown as a key time, with this short amber note under it */
.ktflag { margin-top: 2px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--tha-amber-text); }
/* "Conditions checked covers:" and "Still to sort:" are a plain line, then the items as bullets */
ul.covers, ul.stillto { margin: 0 0 var(--sp-3); padding-left: 22px; color: var(--tha-grey); font-size: 15px; }
p.covers, p.stillto { margin-bottom: var(--sp-1); }
@media (min-width: 560px) { .keytimes { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } }

/* where the copy came from, and that nothing was sent: truthful state, in a supporting place under the plan (guide 20.3, 23) */
.aboutcopy { font-size: 14px; line-height: 1.5; color: var(--tha-grey); background: var(--tha-ice); border: 1px solid var(--tha-sky); border-radius: var(--tha-radius); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); }
.aboutcopy strong { color: var(--tha-ocean); }
.smalllink { font-size: 13px; }
.smalllink a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }