/* ============================================================================
   views.css · Houston Bloom site · owns the look of the shared header and of
   the links and activity views.

   The design system's components read layer-2 tokens. vendor/styles.css carries
   the `editorial` style, whose paper (#faf8f3) and line (#e5dfd2) are the
   header colours in Megan's Figma. This file repoints the editorial accent and
   the four faces at the landing page's own palette, so the three views read as
   one site. It is the only place those values are set for the new views. A
   proper `houston-bloom` style in the design system would replace it; until
   that is registered this stays local. The style list is in
   _activity/Handoff - Figma changes to implement.md.

   Scope: the header carries data-style="editorial" itself, so the landing page
   (which has its own private palette) is not touched. links.html and
   activity.html set it on <html>.
   ============================================================================ */

:is(html, .nav-bar)[data-style="editorial"],
:is(.cls-head, .links-id)[data-style="bloom"],
.home-map {
  --palette-accent:       #2d5a3f;   /* the landing page green */
  --palette-accent-deep:  #1e4630;
  --palette-accent-soft:  #e3eadb;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --butter:       #f3d88b;   /* the landing page yellow, so the spec page hero can use it too */
  --palette-rust: #8B2A1A;   /* the event reel rust, for the ICP workshop card that opens the reel (2026-10-01). Contract gap: no semantic name for a second accent */
  /* DM Serif Display ships one weight, 400. The editorial style asks for 600 to 700 headings, and the browser
     answers by smearing a fake bold over the glyphs. Pin every heading to the weight the face has. */
  --heading-weight: 400;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* the new views sit on the landing page's cream; the header stays on paper */
html[data-style="editorial"] {
  --color-bg: #ece5d6;
  --color-surface-alt: #e3dccb;
}
html[data-style="editorial"] body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }

/* ── header ─────────────────────────────────────────────────────────────── */
.nav-bar { --nav-bg: var(--palette-paper); --nav-link-font: var(--font-body); --color-text-muted: var(--palette-ink); }
.nav-bar .inner { padding-block: 18px; padding-inline: 24px; max-width: none; }
.nav-bar .brand-logo { width: 52px; height: 52px; }
.nav-bar nav { gap: 28px; }
.nav-bar nav a { padding: 12px 0; }
.nav-bar nav a { position: relative; }
.nav-bar nav a.active, .nav-bar nav a[aria-current="page"] { color: var(--palette-accent); font-weight: 700; }
/* The current page: a bar from the link down to the bottom edge of the white header (the .inner padding below it). */
.nav-bar nav a.active::after, .nav-bar nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 3px; background: var(--palette-accent); }
.nav-bar nav a:hover { color: var(--palette-accent); }
/* the pill is one label and one caret; the list opens under it */
.nav-bar .template-menu { --tmenu-ink: var(--palette-accent); }

/* The four links are about 500px wide and the switcher pill about 150px, so a three-column header runs out
   of room near 900px. Between 900 and 1000 the side columns shrink to their content; at 900 and below the
   header stops sticking and the links take their own row, scrolling sideways. A sticky header that is two
   rows tall would take a fifth of a phone screen. */
@media (max-width: 1000px) { .nav-bar .inner { grid-template-columns: auto 1fr auto; } .nav-bar nav { gap: 20px; } }
@media (min-width: 481px) and (max-width: 900px) {
  .nav-bar { position: static; }
  .nav-bar .inner { grid-template-columns: auto 1fr; grid-template-areas: "brand actions" "links links"; row-gap: 4px; }
  .nav-bar .brand { grid-area: brand; }
  .nav-bar .header-actions { grid-area: actions; }
  .nav-bar nav { grid-area: links; overflow-x: auto; max-width: 100%; justify-content: flex-start; gap: 20px; scrollbar-width: none; }
  .nav-bar nav::-webkit-scrollbar { display: none; }
  /* nav scrolls sideways here, which clips anything outside it: carry the header bottom padding inside nav so the bar shows */
  .nav-bar .inner { padding-bottom: 0; }
  .nav-bar nav { padding-bottom: 6px; }
  .nav-bar nav a { white-space: nowrap; padding: 8px 0; }
  .nav-bar nav a.active::after, .nav-bar nav a[aria-current="page"]::after { bottom: -6px; }
}
/* Phones: nav-bar 1.2.0 folds the links behind its menu button. In the open panel the current page is bold
   with a bar down its left edge instead of the header-edge bar. */
@media (max-width: 480px) {
  .nav-bar .inner { padding-block: 12px; }
  .nav-bar[data-nav-menu] nav a.active::after, .nav-bar[data-nav-menu] nav a[aria-current="page"]::after { top: 8px; bottom: 8px; left: 0; right: auto; width: 3px; height: auto; }
  .nav-bar[data-nav-menu][data-nav-open] nav a { padding-left: var(--space-base); }
  .nav-bar .nav-toggle { --navt-ink: var(--palette-accent); --navt-rule: var(--palette-accent); --navt-bg: transparent; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* links view: no search box, and the filter chips centre under the intro */
.tpl--links .llib-search{display:none}
.tpl--links .llib-chips{justify-content:center}

/* the Houston Bloom mark is an image: fixed height, width follows */
.nav-bar .brand-logo { width: auto; height: 26px; }
.nav-bar .brand-logo img { display: block; height: 100%; width: auto; }
.tpl--links .links-mark { width: auto; height: 72px; }
.tpl--links .links-mark img { display: block; height: 100%; width: auto; margin: 0 auto; }

/* heroes on the new views: the face at its one weight, the landing hero's tracking, nothing synthesised */
:is(.tpl--links .links-id h1, .am-title, .tpl h1) { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; font-synthesis: none; }

/* Gardening Tools: the button that rings the related parts on the spec map */
.tools-map { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: var(--s4) 0 var(--s5); }


/* The map look, shared by the spec page's inline map and the Activity page: the site's darkest green, cream
   text, the butter highlight, the horizon colours, a starfield, and a roomier rail. Moved here from cls.mjs
   on 2026-10-01 so both pages read one set of tokens. */
.cls-mapframe,
#app > .tpl--activity-map > :not(.am-head) {
  color-scheme: dark;
  --color-bg: #04110b; --color-surface: #071a10; --color-surface-alt: #0c2618;
  --color-text: #ece5d6; --color-text-muted: #c6bfae; --color-text-faint: #a9a393; --color-text-inverse: #0f2a1c;
  --color-accent: #f3d88b; --color-accent-deep: #f3d88b; --color-accent-text: #f3d88b; --color-accent-soft: rgba(243, 216, 139, 0.14);
  --color-brand: #f3d88b; --color-focus: #f3d88b;
  --color-border: rgba(236, 229, 214, 0.16); --color-border-strong: rgba(236, 229, 214, 0.32);
  --map-cat-1: #6fbf87; --map-cat-2: #f3d88b; --map-cat-3: #7fb3c0; --map-cat-4: #d9a83a;
  --field-bg: #04110b; --field-ink: #ece5d6;
  --shadow-raise: 0 10px 24px rgba(0, 0, 0, 0.35); --shadow-high: 0 18px 40px rgba(0, 0, 0, 0.45);
  --palette-star: #ece5d6; --palette-star-alpha: 45%;
  --atmosphere-layer:
    radial-gradient(1.4px 1.4px at 22px 34px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%),
    radial-gradient(1px 1px at 96px 142px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 178px 58px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%),
    radial-gradient(1px 1px at 240px 210px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58px 236px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%),
    radial-gradient(1px 1px at 138px 20px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 206px 160px, color-mix(in oklch, var(--palette-star) var(--palette-star-alpha), transparent) 50%, transparent 51%);
  --atmosphere-size: 280px 280px; --atmosphere-position: 0 0;
  color: var(--color-text);
}

:is(.cls-mapframe, #app) .tpl--activity-map { --rail: 340px; --title-size: var(--text-heading-md); }
:is(.cls-mapframe, #app) .tpl--activity-map .am-rail { padding: var(--space-xl) var(--space-lg) var(--space-lg) var(--space-xl); gap: var(--space-base) var(--space-base); border-right: var(--border-width) var(--border-style) var(--color-border); }
#app > .tpl--activity-map { background: #04110b; }

/* The lit part on the spec map (active, hovered, connected): a glass badge with a quiet line, at Megan's word
   2026-10-01 ("transparent background and very subtle line"), instead of the outline key's heavy ring and tint. */
:is(.cls-mapframe, #app) .orbit-map[data-keystyle="outline"] :is([data-active], [data-state="on"], [data-state="near"]) [data-badge],
:is(.cls-mapframe, #app) .orbit-map[data-keystyle="outline"] :is([data-active], [data-state="on"], [data-state="near"]):is([data-outline="dotted"], [data-outline="double"]) [data-badge] {
  --bw: 1px;
  border-color: color-mix(in oklch, var(--lit) 45%, transparent);
  background: color-mix(in oklch, var(--color-text) 10%, transparent);
}
:is(.cls-mapframe, #app) .orbit-map[data-keystyle="outline"] [data-outline="double"] :is([data-active], [data-state="on"], [data-state="near"]) [data-badge] { --bw: 3px; }

/* The Graph view wears the Orbit view's ground: the same 40px grid and a still version of its colour wash
   (the four category colours, thinned), so switching views keeps the same room. Megan, 2026-10-01. */
:is(.cls-mapframe, #app) .am-map.node-graph {
  --graph-wash: 22%;
  background-image:
    linear-gradient(color-mix(in oklch, var(--color-accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--color-accent) 7%, transparent) 1px, transparent 1px),
    radial-gradient(42% 48% at 12% 14%, color-mix(in oklch, var(--map-cat-1) var(--graph-wash), transparent), transparent),
    radial-gradient(40% 46% at 90% 20%, color-mix(in oklch, var(--map-cat-3) var(--graph-wash), transparent), transparent),
    radial-gradient(44% 50% at 30% 92%, color-mix(in oklch, var(--map-cat-2) var(--graph-wash), transparent), transparent),
    radial-gradient(40% 46% at 86% 88%, color-mix(in oklch, var(--map-cat-4) var(--graph-wash), transparent), transparent);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* page heroes share one size on every page: the bloom display size for the title, body-lg under it (Megan, 2026-10-01) */
.tpl--links .links-id h1{font-size:var(--text-heading-xl)}
.tpl--links .links-id p{font-size:var(--text-body-lg)}

/* Spec and Activity maps (Megan, 2026-10-01).
   When a horizon is picked, its parts gather round the centre: Today fades out so they are not drawn over it.
   A lit or gathered part was enlarged with `scale`, which stretches a small raster and blurs the drawing. The
   badge is drawn at its real size instead, so the lines stay sharp. */
:is(.cls-mapframe, #app) .orbit-map [data-slot="centre"] { transition: opacity .4s ease; }
:is(.cls-mapframe, #app) .orbit-map:has([data-slot="item"][data-ring]) [data-slot="centre"] { opacity: 0; pointer-events: none; }
:is(.cls-mapframe, #app) .orbit-map[data-keystyle="outline"] :is([data-slot="item"], [data-slot="star"]) [data-slot="glyph"] { scale: 1 !important; }
:is(.cls-mapframe, #app) .orbit-map[data-keystyle="outline"] [data-slot="item"]:is([data-ring], [data-state="on"]) [data-badge] { width: 60px; height: 60px; }
:is(.cls-mapframe, #app) .orbit-map[data-keystyle="outline"] [data-slot="item"][data-state="near"] [data-badge] { width: 40px; height: 40px; }
:is(.cls-mapframe, #app) .orbit-map[data-keystyle="outline"] [data-slot="star"][data-state="on"] [data-badge] { width: 48px; height: 48px; }

/* ── horizon tiles ─────────────────────────────────────────────────────────
   One component for the landing page, Gardening Tools and the spec page (2026-10-01). Every value is a
   design-system token, read in the bloom style's scope (each page puts the tiles inside it). Light on a
   light ground; .hz-tiles--glass on a dark hero. */
.hz-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);max-width:760px;margin:var(--space-xl) auto 0;padding:0}
.hz-tiles[hidden]{display:none}
.hz-tiles > :is(a,button){display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);min-width:0;padding:var(--space-lg);font:inherit;text-align:center;text-decoration:none;cursor:pointer;border-radius:var(--radius-lg);border:var(--border-width) solid var(--palette-green-deep);background:var(--palette-paper);color:var(--palette-ink);transition:background-color .2s ease,border-color .2s ease}
.hz-tiles > :is(a,button):hover{background:color-mix(in oklch,var(--palette-green-deep) 8%,var(--palette-paper))}
.hz-tiles > :is(a,button):focus-visible{outline:2px solid var(--palette-green-deep);outline-offset:3px}
.hz-tile-n{font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-text-muted)}
.hz-tile-icon{display:block;width:48px;height:48px;color:var(--palette-green-deep)}
.hz-tile-icon svg{display:block;width:100%;height:100%;overflow:visible}
.hz-tile-label{font-size:var(--text-body);line-height:1.25;text-wrap:balance}
.hz-tile-go{margin-top:auto;font-size:var(--text-body-sm);font-weight:600;color:var(--palette-green-deep);text-decoration:underline;text-underline-offset:3px}
.hz-tiles--glass > :is(a,button){background:color-mix(in oklch,var(--palette-paper) 7%,transparent);color:var(--palette-paper);border-color:color-mix(in oklch,var(--palette-paper) 18%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hz-tiles--glass > :is(a,button):hover{background:color-mix(in oklch,var(--palette-paper) 12%,transparent);border-color:color-mix(in oklch,var(--palette-brand) 70%,transparent)}
.hz-tiles--glass > :is(a,button):focus-visible{outline-color:var(--palette-brand)}
.hz-tiles--glass > [aria-pressed="true"]{background:color-mix(in oklch,var(--palette-brand) 22%,transparent);border-color:var(--palette-brand)}
.hz-tiles--glass .hz-tile-n{color:color-mix(in oklch,var(--palette-paper) 72%,transparent)}
.hz-tiles--glass .hz-tile-icon{color:var(--palette-brand)}
.hz-tiles--glass .hz-tile-go{color:var(--palette-paper);text-decoration-color:var(--palette-brand);text-decoration-thickness:2px}
@media (max-width:640px){.hz-tiles{grid-template-columns:1fr}}

/* yellow in the horizon drawings on the dark heroes (Megan, 2026-10-01), mixed into the green rather than laid on flat: the flower petals, the shield
   (half green, half yellow; the heart stays green) and the bird wings. The light tiles keep one green: butter on paper is too faint. */
.hz-tiles--glass{--hz-yellow-wash:color-mix(in oklch,var(--butter) 62%,var(--palette-brand))}
.hz-tiles--glass .hbi-flower .f-petal{fill:var(--hz-yellow-wash);fill-opacity:.85}
.hz-tiles--glass .hbi-flower .f-core{fill:var(--hz-yellow-wash)}
.hz-tiles--glass .hbi-hs .h-tint{fill:var(--hz-yellow-wash);fill-opacity:1}
.hz-tiles--glass .hbi-murm .b-wing{fill:var(--hz-yellow-wash)}
/* dark glass, for tiles on a mid-green ground (Gardening Tools): the dark band at partial opacity */
.hz-tiles--glass.hz-tiles--deep > :is(a,button){background:color-mix(in oklch,var(--palette-band) 55%,transparent);border-color:color-mix(in oklch,var(--palette-paper) 14%,transparent)}
.hz-tiles--glass.hz-tiles--deep > :is(a,button):hover{background:color-mix(in oklch,var(--palette-band) 72%,transparent);border-color:color-mix(in oklch,var(--palette-brand) 70%,transparent)}
/* the flowing line to the playhead goes too while a horizon is gathered (Megan, 2026-10-01) */
:is(.cls-mapframe, #app) .orbit-map [data-slot="energy"] { transition: opacity .3s ease; }
:is(.cls-mapframe, #app) .orbit-map:has([data-slot="item"][data-ring]) [data-slot="energy"] { opacity: 0; }
/* and when a single part is hovered or picked */
:is(.cls-mapframe, #app) .orbit-map[data-focus] [data-slot="centre"] { opacity: 0; visibility: hidden; pointer-events: none; }
:is(.cls-mapframe, #app) .orbit-map[data-focus] [data-slot="energy"] { opacity: 0; }

/* every page's hero description wraps at one measure, centred and balanced (Megan, 2026-10-01) */
html :is(.hero .lede, .cls-head .cls-lede, .tpl--links .links-id p) { max-width: 34rem; margin-inline: auto; text-wrap: balance; }