/* Colours drawn from the Tingle Forest at Walpole — the Valley of the
     Giants: deep tingle and karri greens, reddish tingle bark, ferny
     understorey and mist — meeting the deep teal-blue of the Southern
     Ocean along the wild south coast. */
  :root {
    --accent:   #1d5248;   /* deep tingle-canopy green */
    --ocean:    #0f6d78;   /* Southern Ocean teal-blue */
    --alert:    #a8452b;   /* red tingle bark */
    --bg:       #eef2ec;   /* forest mist */
    --card:     #fbfdfb;
    --text:     #16221e;   /* deep forest shadow */
    --sub:      #566b60;   /* moss and bark grey-green */
    --border:   #75897c;   /* moss grey — 3:1 against the mist and the cards,
                              so block edges are visible to low vision */
    --radius:   14px;
    --safe-top: env(safe-area-inset-top);
    --safe-bot: env(safe-area-inset-bottom);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --accent: #57a892;   /* canopy green lifted for dark ground */
      --ocean:  #4fb0bc;
      --alert:  #e0765a;   /* tingle bark lifted */
      --bg:     #0e1613;   /* forest floor at dusk */
      --card:   #172420;
      --text:   #e6efe9;
      --sub:    #93a89b;
      --border: #5c7265;   /* lifted for 3:1 on the dark ground */
    }
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* The hidden attribute must always win, even over display rules */
  [hidden] { display: none !important; }

  /* Keyboard focus indicator (VoiceOver touch and mouse taps don't show it) */
  :focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
  header :focus-visible { outline-color: #fff; }   /* ocean is invisible on the green */

  /* Respect the system's reduced-motion setting */
  @media (prefers-reduced-motion: reduce) {
    #detail-dial { transition: none; }
    #location-toast { transition: none; }
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
  }

  header {
    background: #1d5248;   /* deep tingle-forest green in both light and dark themes */
    color: #fff;
    padding: calc(14px + var(--safe-top)) 16px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;      /* the Back button stays visible while a detail
                              screen scrolls */
    top: 0;
    z-index: 100;
  }
  header h1 { font-size: 20px; font-weight: 700; flex: 1; }

  /* GPS accuracy badge: static text, no button behaviour */
  #gps-badge {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  #hdr-back {
    background: none;
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    padding: 8px 10px 8px 0;
    touch-action: manipulation;
  }

  /* Pause / stop continuous callouts — sits just left of the GPS badge */
  #pause-callouts {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    font-family: inherit;
    touch-action: manipulation;
  }

  /* Continuous-callout footer badge on each live block's detail screen */
  #detail-footer {
    margin-top: 12px;   /* the panel already provides the side and bottom insets */
  }
  .callout-badge {
    display: block;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    font-family: inherit;
    text-align: center;
    touch-action: manipulation;
  }
  .callout-badge.on {
    background: var(--accent);
    color: #fff;
  }
  .callout-badge + .callout-badge { margin-top: 10px; }

  /* ---- detail screen: one block, opened full-page, VoiceOver-real ---- */
  #detail-panel { padding: 12px 12px calc(24px + var(--safe-bot)); }
  #detail-card {
    background: var(--card);
    border: 3px solid var(--accent);   /* clearly a different place from the grid */
    border-radius: var(--radius);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  /* The main value (or the heading, on screens without one) takes
     programmatic focus on forward navigation; no ring for touch/VoiceOver,
     but keyboard focus stays visible via :focus-visible */
  #detail-card h2 { font-size: 22px; color: var(--accent); }
  #detail-card h2:focus:not(:focus-visible) { outline: none; }
  .detail-big:focus:not(:focus-visible) { outline: none; }
  #detail-card p { font-size: 16px; line-height: 1.5; }
  /* #detail-card is scoped into every .detail-big rule below (not just the
     class alone) so it reliably beats the "#detail-card p" rule above on
     specificity — a plain ".detail-big" class lost that fight silently
     (16px rendered instead of 44px) until this was diagnosed 9 Jul 2026. */
  #detail-card .detail-big {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  /* Natural-language headline text (addresses, feature/POI names) is
     unbounded in length, unlike the live sensor readings below — scale the
     hero size down in steps so long results wrap to a couple of lines
     instead of filling the whole screen. Tiers picked from real data:
     short values like "New Moon" or "AQI 42 Good" keep the full 44px pop;
     medium ones like "81 Beaufort Street, Perth" or "Mount Barker
     (Pwakkenbak)" settle at 26px; long ones like a full street address or
     "Gascoyne River (Middle Branch)" drop to 19px, still bold and
     accent-coloured so it still reads as the answer, not body text. */
  #detail-card .detail-big.mid  { font-size: 26px; line-height: 1.25; }
  #detail-card .detail-big.long { font-size: 19px; line-height: 1.35; }

  /* Roomy tiers — fitDetailText() (core.js) steps a short screen's body
     text up so it uses the blank space below it, for low-vision reading.
     Capped at 22px, well before two-words-per-line. The .detail-big
     headlines and .live-value heroes keep their own sizing systems (the
     :not() guards — a plain "p" selector here would outrank them). */
  #detail-card.roomy  p:not(.detail-big):not(.live-value):not(.live-sub) {
    font-size: 19px; line-height: 1.55;
  }
  #detail-card.roomy2 p:not(.detail-big):not(.live-value):not(.live-sub) {
    font-size: 22px; line-height: 1.5;
  }
  #detail-card.roomy  .detail-note { font-size: 16px !important; }
  #detail-card.roomy2 .detail-note { font-size: 17px !important; }
  #detail-card.roomy  .detail-row h3 { font-size: 17px; }
  #detail-card.roomy2 .detail-row h3 { font-size: 19px; }

  /* ---- large live displays: big enough to read from a distance ---- */
  .live-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-height: 52vh;
    text-align: center;
  }
  .live-value {
    font-size: clamp(64px, 22vw, 190px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em;
    color: var(--accent);
    overflow-wrap: anywhere;
  }
  .live-value.small { font-size: clamp(32px, 10vw, 84px) !important; }
  .live-rule {
    width: 38%;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }
  .live-sub { color: var(--sub); font-size: 14px !important; }
  #detail-dial-wrap {
    position: relative;
    width: min(84vw, 56vh);   /* the dial owns the main portion of the page */
  }
  #detail-dial {
    display: block;
    width: 100%;
    height: auto;
    color: var(--text);
    transition: transform 0.2s;
  }
  .dial-needle {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    color: var(--alert);
  }

  /* ---- offline feature map on the Coast / River / Peaks screens ---- */
  .feature-map {
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: 10px;
  }
  .detail-note { color: var(--sub); font-size: 14px !important; }
  .detail-row {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
  }
  .detail-row h3 { font-size: 15px; color: var(--sub); margin-bottom: 4px; }
  .poi-btn, .detail-link {
    display: block;
    background: var(--card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    font-family: inherit;
    touch-action: manipulation;
  }

  /* ---- bottom badges: settings and information ---- */
  .foot-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 26px;
  }
  .foot-row button {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sub);
    font-family: inherit;
    touch-action: manipulation;
  }
  .choice-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    touch-action: manipulation;
    margin-bottom: 8px;
  }
  .choice-btn.selected { border: 2px solid var(--accent); font-weight: 700; }

  #arrange-btn {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    touch-action: manipulation;
  }
  body.arrange #arrange-btn { background: #fff; color: var(--accent); }

  /* Visually hidden but still read by VoiceOver (real text is never
     pruned from the accessibility tree, unlike aria-label on divs) */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  main { padding: 16px 16px calc(24px + var(--safe-bot)); }

  #grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  @media (min-width: 640px) { #grid { grid-template-columns: repeat(3, 1fr); } }

  .cell { display: flex; flex-direction: column; gap: 6px; }

  button.block {
    width: 100%;
    min-height: 96px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    text-align: left;
    color: var(--text);
    font-family: inherit;
    touch-action: manipulation;
  }
  button.block .vis { display: flex; flex-direction: column; gap: 5px; }
  .blk-top { display: flex; align-items: center; gap: 7px; }
  .blk-icon { font-size: 18px; }
  .blk-name { font-size: 13px; font-weight: 600; color: var(--sub); }
  .blk-value { font-size: 21px; font-weight: 700; line-height: 1.25; }

  /* Block picked up in arrange mode */
  .cell.picked button.block { outline: 3px solid var(--accent); outline-offset: 2px; }

  button.hide-btn {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--sub);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
    font-family: inherit;
    touch-action: manipulation;
  }

  #end-cell button.block {
    min-height: 60px;
    border-style: dashed;
    color: var(--sub);
  }

  #hidden-section { margin-top: 26px; }
  #hidden-section h2 { font-size: 16px; margin-bottom: 10px; }
  #hidden-list { display: flex; flex-direction: column; gap: 8px; }
  #hidden-list button {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    text-align: left;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    touch-action: manipulation;
  }
  #hidden-list p { color: var(--sub); font-size: 14px; }


  /* ---- visual-only address toast (hidden from VoiceOver) ---- */
  #location-toast {
    position: fixed;
    left: 16px; right: 16px;
    top: calc(90px + var(--safe-top));
    background: var(--card);
    color: var(--text);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px;
    font-size: 17px; font-weight: 600;
    line-height: 1.45;
    text-align: center;
    white-space: pre-line;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    pointer-events: none;   /* never blocks touch or VoiceOver exploration */
  }
  #location-toast.show { opacity: 1; visibility: visible; }