/*
  Pathways (/pathways/, decision 044), from design/screens/wonder-and-pathways/css/:
  pathways.css for the dashboard and pathways-explainer.css for the signed-out page.
  Classes only: no style="" anywhere (CSP). Colors come from tokens; dark mode follows
  the semantic tokens, and the stop tints switch to Spy Pond in dark mode.
*/

.pw { padding-block: var(--wc-space-12) var(--wc-space-16); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wc-space-6); }

/* ---------- Intro ---------- */
.pw-intro { display: grid; gap: var(--wc-space-3); }
.pw-intro h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -0.035em; }
.pw-intro .lede { max-width: 1308px; font-size: 1.1875rem; }

/* ---------- Thread colors: each thread is a topic, in its chip colors (tokens.css,
   dark mode included) ---------- */
.thread--science { --th-bg: var(--wc-topic-science-bg); --th-fg: var(--wc-topic-science-fg); }
.thread--technology { --th-bg: var(--wc-topic-technology-bg); --th-fg: var(--wc-topic-technology-fg); }
.thread--engineering { --th-bg: var(--wc-topic-engineering-bg); --th-fg: var(--wc-topic-engineering-fg); }
.thread--arts { --th-bg: var(--wc-topic-arts-bg); --th-fg: var(--wc-topic-arts-fg); }
.thread--math { --th-bg: var(--wc-topic-math-bg); --th-fg: var(--wc-topic-math-fg); }
.thread--nature { --th-bg: var(--wc-topic-nature-bg); --th-fg: var(--wc-topic-nature-fg); }
.thread--history { --th-bg: var(--wc-topic-history-bg); --th-fg: var(--wc-topic-history-fg); }
.thread--reading { --th-bg: var(--wc-topic-reading-bg); --th-fg: var(--wc-topic-reading-fg); }
.thread--games { --th-bg: var(--wc-topic-games-bg); --th-fg: var(--wc-topic-games-fg); }
.thread-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; }
.saved-card__tile .thread-icon { width: 28px; height: 28px; }

/* ---------- Your pathways ---------- */
.pw-saved { display: grid; gap: var(--wc-space-3); }
.pw-saved__row { display: flex; flex-wrap: wrap; gap: var(--wc-space-3); }
.saved-card {
  min-width: 190px;
  min-height: 76px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: var(--wc-space-3);
  background: var(--wc-surface);
  color: var(--wc-text);
  border: var(--wc-border-width) solid var(--wc-border);
  border-radius: 16px;
  text-decoration: none;
}
.saved-card:hover { color: var(--wc-text); }
.saved-card[aria-current="true"] { border-width: 3px; box-shadow: 4px 4px 0 var(--wc-border); }
.saved-card__tile {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  background: var(--th-bg);
  color: var(--th-fg);
  border: var(--wc-border-width) solid var(--wc-spy-pond);
  border-radius: 12px;
  font-family: var(--wc-font-display);
  font-weight: 800;
  font-size: 0.8125rem;
}
.saved-card__text { display: grid; gap: 3px; }
.saved-card__name { font-family: var(--wc-font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.1; }
.saved-card__ages { font-family: var(--wc-font-label); font-size: 0.75rem; font-weight: 700; color: var(--wc-text-muted); }
.saved-card .chip--needed { justify-self: start; background: var(--wc-notice); font-size: 0.6875rem; padding: 0 7px; letter-spacing: 0; text-transform: none; border-width: 1.5px; }

/* Select (add a pathway) */
/* Closed, the details is the inline Add button; open, it takes the whole row with the
   panel under it. (display: contents can't do this: browsers box a details' content.) */
.pw-add { display: block; }
.pw-add[open] { flex-basis: 100%; display: grid; gap: var(--wc-space-3); }
.pw-add[open] > summary { justify-self: start; }
.pw-add > summary {
  min-height: 76px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: var(--wc-space-2);
  border: var(--wc-border-width) dashed var(--wc-border);
  border-radius: 16px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.pw-add > summary::-webkit-details-marker { display: none; }
.pw-add__panel {
  display: grid;
  gap: var(--wc-space-4);
  padding: 18px 20px;
  background: var(--wc-surface);
  border: var(--wc-border-width) solid var(--wc-border);
  border-radius: 18px;
}
.pw-add__threads { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--wc-space-2); }
.thread-tile { position: relative; display: grid; min-width: 0; }  /* fills its grid cell, no wider */
.thread-tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.thread-tile > span {
  min-height: 76px;
  padding: 10px 12px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  text-align: center;
  background: var(--th-bg);
  color: var(--th-fg);
  border: var(--wc-border-width) solid var(--wc-spy-pond);
  border-radius: 12px;
}
.thread-tile b { font-family: var(--wc-font-display); font-weight: 800; font-size: 1.0625rem; }
.thread-tile small { font-family: var(--wc-font-body); font-weight: 700; font-size: 0.8125rem; line-height: 1.25; }
.thread-tile input:checked + span { box-shadow: 0 0 0 4px var(--wc-bunsen); }
.thread-tile input:focus-visible + span { outline: var(--wc-focus-ring); outline-offset: 6px; }
.pw-add__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wc-space-2); }
.pw-add__foot .btn { margin-left: auto; }
.pw-add fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--wc-space-2); }
.pw-add legend { float: left; margin-right: var(--wc-space-2); }
/* The topic picker: the nine topics three by three, like the home page's badges
   (decision 043), its label on its own line (these beat the inline fieldset rules
   above). On phones, two across, and an odd last tile spans the row. */
.pw-add .pw-add__threads { display: grid; align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pw-add .pw-add__threads legend { float: none; display: block; width: 100%; margin: 0 0 var(--wc-space-3); padding: 0; }
@media (max-width: 30rem) {
  .pw-add .pw-add__threads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-add .pw-add__threads > .thread-tile:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}

/* ---------- The route ---------- */
.route {
  background: var(--wc-surface);
  border: var(--wc-border-width) solid var(--wc-border);
  border-radius: var(--wc-radius-panel);
  padding: 22px clamp(14px, 2.5vw, 28px) 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wc-space-3);
}
.route__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wc-space-3) var(--wc-space-6); }
.route__head h2 { font-size: 1.875rem; letter-spacing: -0.02em; }
.route__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.route__tools form { margin: 0; }
.route__window { border-radius: 999px; }
.route__window .pick--segment > span { min-height: 40px; padding: 0 14px; font-weight: 700; font-size: 0.8125rem; white-space: nowrap; }
@media (max-width: 30rem) {
  .route__tools, .route__tools > form:first-child { width: 100%; }
  .route__window .pick--segment > span { white-space: normal; text-align: center; line-height: 1.2; padding: 4px 8px; }
}


/* Kind discs and chips */
.kind-disc { width: 22px; height: 22px; flex: 0 0 22px; display: inline-grid; place-items: center; border: 1.5px solid var(--wc-spy-pond); border-radius: 999px; background: var(--kind-bg); color: var(--wc-spy-pond); }
.kind-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border: 1.5px solid var(--wc-spy-pond); border-radius: 999px; background: var(--kind-bg); color: var(--wc-spy-pond); font-family: var(--wc-font-label); font-weight: 700; font-size: 0.6875rem; }
.kind--wonder { --kind-bg: var(--wc-lantern-tint); }
.kind--listed { --kind-bg: var(--wc-bubbler-tint); }
.kind--place { --kind-bg: var(--wc-bunsen-tint); }
.kind--activity { --kind-bg: var(--wc-white); }

/* Stops */
.stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; }
.stop { position: relative; display: flex; flex-direction: column; gap: var(--wc-space-3); min-width: 0; }
.stop--1 { --stop: var(--wc-bunsen); --stop-fg: var(--wc-spy-pond); --stop-tint: var(--wc-bunsen-tint); }
.stop--2 { --stop: var(--wc-lantern); --stop-fg: var(--wc-spy-pond); --stop-tint: var(--wc-lantern-tint); }
.stop--3 { --stop: var(--wc-bubbler); --stop-fg: var(--wc-spy-pond); --stop-tint: var(--wc-bubbler-tint); }
.stop--4 { --stop: var(--wc-spy-pond); --stop-fg: var(--wc-graph-paper); --stop-tint: var(--wc-grid); }
@media (prefers-color-scheme: dark) {
  .stop { --stop-tint: var(--wc-spy-pond); }
  .stop--4 { --stop: var(--wc-graph-paper); --stop-fg: var(--wc-spy-pond); }
}
/* A stop's header ("question headers"): the stop's colored rule, its name (an h3 under the
   route's h2) and its question. No numbers: the stops aren't a fixed order. */
.stop__head { display: grid; gap: 4px; padding-top: 12px; border-top: 5px solid var(--stop); }
.stop__name { font-family: var(--wc-font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.015em; }
.stop__prompt { margin: 0; font-family: var(--wc-font-body); font-size: 1rem; line-height: 1.3; color: var(--wc-text-muted); }
.stop__options { display: flex; flex-direction: column; gap: 10px; }
.stop__options form { margin: 0; }

.stop-note { padding: 10px 12px; border: var(--wc-border-width) solid var(--wc-spy-pond); border-radius: 12px; font-size: 0.875rem; line-height: 1.4; color: var(--wc-spy-pond); }
.stop-note--gone { background: var(--wc-notice); }
.stop-note--passed { background: var(--wc-lantern-tint); }
.stop-empty { padding: 14px; border: var(--wc-border-width) dashed var(--wc-mist); border-radius: 14px; font-size: 0.9375rem; color: var(--wc-text-muted); }

/* Full option card */
.opt {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  text-align: left;
  background: var(--wc-surface);
  color: var(--wc-text);
  border: var(--wc-border-width) solid var(--wc-border);
  border-radius: 14px;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}
.opt:hover, .opt:focus-visible { transform: translate(-1px, -1px); }
.opt[aria-pressed="true"] { background: var(--stop-tint); border-width: 3px; box-shadow: 4px 4px 0 var(--wc-border); }
.opt__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.opt__flag { padding: 2px 7px; border: 1.5px solid var(--wc-spy-pond); border-radius: 999px; font-family: var(--wc-font-label); font-weight: 700; font-size: 0.6875rem; color: var(--wc-spy-pond); }
.opt__flag--on { background: var(--wc-bubbler-tint); }
.opt__flag--grown-up { background: var(--wc-notice); }
.opt__flag--ends { background: var(--wc-bunsen-tint); }
.opt__picked { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--wc-font-label); font-weight: 700; font-size: 0.6875rem; }
.opt__check { width: 22px; height: 22px; display: inline-grid; place-items: center; background: var(--stop); color: var(--stop-fg); border: var(--wc-border-width) solid var(--wc-spy-pond); border-radius: 999px; }
.opt__title { font-family: var(--wc-font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; }
.opt__when { font-family: var(--wc-font-label); font-weight: 700; font-size: 0.75rem; color: var(--wc-link); }
.opt__detail { font-size: 0.9375rem; line-height: 1.45; color: var(--wc-text-muted); }
.opt__facts { font-family: var(--wc-font-label); font-size: 0.72rem; line-height: 1.4; }

/* New pick arrives after an htmx swap (proposed motion) */
.opt.is-new { animation: pw-rise 200ms ease-out both; }
@keyframes pw-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* "N more" panel */
.more { border: var(--wc-border-width) solid var(--wc-border); border-radius: 14px; overflow: hidden; background: var(--wc-surface); }
.more__title { padding: 8px 12px; background: var(--wc-bg); border-bottom: var(--wc-border-width) solid var(--wc-border); }
.more__list { list-style: none; margin: 0; padding: 0; }
.more__head { padding: 8px 12px 2px; color: var(--wc-link); font-size: 0.6875rem; }
.more__row {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: var(--wc-surface);
  color: var(--wc-text);
  border: 0;
  border-top: 1.5px dashed var(--wc-hairline);
}
.more__row:hover { background: var(--wc-bg); }
.more__row .kind-disc { margin-top: 3px; }
.more__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.more__text b { font-size: 0.9375rem; line-height: 1.3; }
.more__text span { font-family: var(--wc-font-label); font-size: 0.72rem; color: var(--wc-text-muted); }
.more__rest > summary {
  min-height: 44px;
  display: grid;
  place-items: center;
  border-top: var(--wc-border-width) solid var(--wc-border);
  color: var(--wc-link);
  font-weight: 700;
  font-size: 0.875rem;
  list-style: none;
  cursor: pointer;
}
.more__rest > summary::-webkit-details-marker { display: none; }
.more__rest[open] > summary { order: 2; }
.more__rest[open] { display: flex; flex-direction: column; }
.more__rest[open] .more__label-closed, .more__rest:not([open]) .more__label-open { display: none; }

/* Phones: stops stack, rail runs down the left */
@media (max-width: 61.25rem) {
  .stops { grid-template-columns: 1fr; gap: 32px; }
  .stop { padding: 0; }
}

/* ---------- Lower row ---------- */
.pw-lower { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.soon { flex: 999 1 520px; min-width: 0; background: var(--wc-surface); border: var(--wc-border-width) solid var(--wc-border); border-radius: var(--wc-radius-panel); padding: 22px 24px; display: grid; gap: var(--wc-space-3); }
.soon h2, .posted h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.soon__list { list-style: none; margin: 0; padding: 0; }
.soon__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 0; border-bottom: 1.5px dashed var(--wc-hairline); }
.soon__when { flex: 0 0 180px; font-family: var(--wc-font-label); font-weight: 700; font-size: 0.78rem; color: var(--wc-link); }
.soon__what { flex: 1 1 220px; min-width: 0; display: inline-flex; align-items: center; gap: var(--wc-space-2); font-weight: 700; font-size: 1rem; }
.soon__tags { display: inline-flex; align-items: center; gap: 6px; }
.tag-pick { padding: 1px 8px; background: var(--wc-spy-pond); color: var(--wc-graph-paper); border-radius: 999px; font-family: var(--wc-font-label); font-size: 0.6875rem; font-weight: 700; }
.tag-thread { padding: 1px 8px; border: 1.5px solid var(--wc-spy-pond); border-radius: 999px; background: var(--th-bg); color: var(--th-fg); font-family: var(--wc-font-label); font-size: 0.6875rem; font-weight: 700; }

.posted { flex: 1 1 300px; background: var(--wc-spy-pond); color: var(--wc-graph-paper); border-radius: var(--wc-radius-panel); padding: 22px 24px; display: grid; gap: var(--wc-space-3); }
.posted form { margin: 0; }
.switch {
  width: 100%;
  min-height: 48px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: transparent;
  color: var(--wc-graph-paper);
  border: 0;
  border-bottom: 1.5px solid var(--wc-pond-panel);
  font-size: 1rem;
  text-align: left;
}
.switch__track { position: relative; flex: 0 0 52px; height: 30px; border: var(--wc-border-width) solid var(--wc-graph-paper); border-radius: 999px; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: var(--wc-graph-paper); transition: transform 160ms cubic-bezier(.3, 1.6, .5, 1); }
.switch[aria-checked="true"] .switch__track { background: var(--wc-bubbler); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(22px); }
.posted__note { font-size: 0.875rem; line-height: 1.5; color: var(--wc-mist); }

/* ---------- Signed out: the explainer ---------- */

.pw-kicker { color: var(--wc-link); }

/* How it works: the four stops as a numbered strip */
.explain { display: grid; gap: var(--wc-space-4); }
.explain h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.explain__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wc-space-4); }
.explain__step { display: grid; gap: var(--wc-space-3); align-content: start; padding: 0 16px 16px; background: var(--wc-surface); border: var(--wc-border-width) solid var(--wc-border); border-radius: 16px; }
.explain__step > p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--wc-text-muted); }
/* The same header as a route's stops; the rule runs along the card's top edge. */
.explain__step .stop__head { margin-inline: -16px; padding: 12px 16px 0; border-radius: 14px 14px 0 0; }

/* The sample route: read-only cards, no hover lift, no picked state */
.route--sample .route__head { align-items: baseline; }
.route__note { margin: 0; font-size: 0.9375rem; color: var(--wc-text-muted); }
.explain__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.opt--static { cursor: default; }
.opt--static:hover { transform: none; }
.opt__safety { font-size: 0.8125rem; line-height: 1.4; color: var(--wc-text); }
.stop__more { margin: 0; font-family: var(--wc-font-label); font-size: 0.75rem; font-weight: 700; color: var(--wc-text-muted); }

/* Call to action, like the Wonders email card */
.pw-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wc-space-4); padding: 24px clamp(16px, 3vw, 32px); background: var(--wc-bunsen); color: var(--wc-spy-pond); border: var(--wc-border-width) solid var(--wc-spy-pond); border-radius: var(--wc-radius-panel); box-shadow: 4px 4px 0 var(--wc-spy-pond); }
.pw-cta h2 { font-size: 1.75rem; letter-spacing: -0.02em; }
.pw-cta p { margin: 4px 0 0; max-width: 40rem; }
.pw-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--wc-space-2); }
.pw-cta .btn--secondary { background: transparent; }
.pw-privacy { margin: 0; font-size: 0.9375rem; color: var(--wc-text-muted); }

@media (max-width: 61.25rem) {
  .explain__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .explain__steps { grid-template-columns: minmax(0, 1fr); }
  .pw-cta__buttons, .pw-cta__buttons .btn { width: 100%; }
}

/* ---------- Ours ---------- */
.pw-undo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wc-space-3); }
.pw-undo form { margin: 0; }
.pw-empty { padding: 18px 20px; border: var(--wc-border-width) dashed var(--wc-border); border-radius: 16px; color: var(--wc-text-muted); }
.pw-limit { color: var(--wc-text-muted); }
.opt__link { align-self: flex-start; font-size: 0.875rem; }
.opt__safety b { font-weight: 700; }
.opt-wrap { display: flex; flex-direction: column; gap: 4px; }
.stop-note p { margin: 0; }
.more__rest { display: block; }