@font-face {
  font-family: "Besley";
  src: url("./fonts/besley-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("./fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Bengali glyphs only: the browser fetches it when a page shows Bengali text. */
@font-face {
  font-family: "Noto Sans Bengali";
  src: url("./fonts/noto-sans-bengali-bengali.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2,
    U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7,
    U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("./fonts/bricolage-grotesque-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour — spec §2 */
  --green: #1f6e5c;
  --green-dark: #16513f;
  --green-deep: #175a4a;
  --ink: #23201c;
  --body-muted: #6b655c;
  --meta: #767065;
  --coral: #e8734a;
  --coral-text: #b65a38;
  --coral-deep: #9c4526;
  --coral-chip: #8a4327;
  --amber: #e9a93c;
  --amber-deep: #7a4e06;
  --cream: #fbf8f3;
  --cream-alt: #f1ede4;
  --chip-ink: #4a453d;
  --hairline: #ece6db;
  --border-card: #e4ddcf;
  --border-ctrl: #d9d1c2;
  --tint-green: #e7f1ed;
  --tint-coral: #fbe7de;
  --tint-amber: #fbefd6;
  --on-green-dim: #e7f1ed;
  --disabled-ink: #5f5a52;

  /* Pando Learning family (landing and sign-in): ~/Pando-Learning/DESIGN.md */
  --pando-night: #04283a;
  --pando-navy: #073c56;
  --pando-gold: #ffc727;
  --pando-gold-hover: #ffd95e;
  --pando-thread: #e8b21e;
  --pando-ivory: #fff8e8;
  --pando-field: #fffdf8;
  --pando-soft-night: #c4d6dd;
  --pando-soft-ivory: #2b556b;
  --pando-door: #fcf4e3;
  --font-display: "Besley", Clarendon, Georgia, serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana,
    "Noto Sans Bengali", "Nirmala UI", "Noto Sans SC", "Noto Naskh Arabic",
    sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --stitch: repeating-linear-gradient(
    90deg,
    var(--pando-thread) 0 20px,
    transparent 20px 32px
  );
  --stitch-navy: repeating-linear-gradient(
    90deg,
    var(--pando-navy) 0 20px,
    transparent 20px 32px
  );

  /* Type — spec §2 */
  --font-head: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system,
    "Noto Sans Bengali", sans-serif;

  /* Radii — spec §2 */
  --r-ctrl: 12px;
  --r-card: 18px;
  --r-pill: 999px;

  /* Layout — spec §2 */
  --tap: 44px;
  --measure: 760px;
  --pad: 20px;
  --sidebar: 262px;
  --sidebar-collapsed: 76px;
  --dock: 392px;

  /* Chrome height the onboarding viewport calculation subtracts: the
     onboarding card's own top offset. */
  --onboarding-chrome-h: 48px;
}

/* contrast: body-on-cream #23201C on #FBF8F3 */
body {
  color: var(--ink);
  background: var(--cream);
}

/* contrast: muted-on-cream #6B655C on #FBF8F3 */
.onboarding-sub,
#child-rollover,
.control-hint {
  color: var(--body-muted);
}

/* contrast: white-on-green #FFFFFF on #1F6E5C */
.button-green {
  color: #fff;
  background: var(--green);
}

/* contrast: chip-district #175A4A on #E7F1ED */
.chip-district {
  color: var(--green-deep);
  background: var(--tint-green);
}

/* contrast: chip-national #4A453D on #F1EDE4 */
.chip-national {
  color: var(--chip-ink);
  background: var(--cream-alt);
}

/* contrast: chip-you-added #8A4327 on #FBE7DE */
.chip-you-added {
  color: var(--coral-chip);
  background: var(--tint-coral);
}

/* contrast: chip-your-state #7A4E06 on #FBEFD6 */
.chip-your-state {
  /* V8 / D11 (§0.1): provisional demo treatment for the state chip. */
  color: var(--amber-deep);
  background: var(--tint-amber);
}

/* contrast: badge-you-are-here #FFFFFF on #B65A38 */
.badge-you-are-here {
  padding: 0.25rem 0.65rem;
  color: #fff;
  background: var(--coral-text);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* contrast: stage-current #B65A38 on #FBF8F3 min 3 */
.stage-current {
  /* A2 (§0.2): coral text is restricted to this large-text treatment. */
  /* Below 64rem the timeline is a vertical list under a fixed Ask button;
     this keeps the button off the current stage's name. */
  padding-inline-end: 4.5rem;
  color: var(--coral-text);
  background: var(--cream);
  font-size: 1.5rem;
  text-wrap: pretty;
}

/* contrast: handoff-body #FBF8F3 on #23201C */
.handoff-card {
  color: var(--cream);
  background: var(--ink);
}

/* contrast: handoff-accent #E9A93C on #23201C */
.handoff-accent {
  color: var(--amber);
  background: var(--ink);
}

/* contrast: answer-body #23201C on #FFFFFF */
.assistant-turn {
  color: var(--ink);
  background: #fff;
}

/* contrast: user-bubble #FFFFFF on #1F6E5C */
.user-turn {
  color: #fff;
  background: var(--green);
}

/* contrast: disabled-label #5F5A52 on #E4DDCF */
button:disabled,
select:disabled {
  color: var(--disabled-ink);
  background: var(--border-card);
}

/* The background belongs on the field, not on ::placeholder — a placeholder
   pseudo-element paints no background of its own, so the annotation below was
   naming a colour that never rendered. */
/* contrast: composer-placeholder #5F5A52 on #F1EDE4 */
textarea {
  background: var(--cream-alt);
}

textarea::placeholder {
  color: var(--disabled-ink);
}

/* contrast: send-button #FFFFFF on #1F6E5C */
#send {
  color: #fff;
  background: var(--green);
}

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

html {
  font-size: 16px;
}

/* The router scrolls to five landing anchors; smooth is a nicety, not a
   requirement, so it is opt-out by default for anyone who asked for less
   motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-width: 320px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  min-width: var(--tap);
  min-height: var(--tap);
  max-width: 100%;
  color: inherit;
  border: 1px solid var(--border-ctrl);
  border-radius: var(--r-ctrl);
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button:disabled,
select:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin-block: 0;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

h1 {
  font-size: 1.625rem;
}

h2 {
  font-size: 1.25rem;
}

p {
  margin-block: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus-visible,
.assistant-turn:focus-visible {
  outline: none;
}

#app-shell-nav :focus-visible {
  outline-color: #fff;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  min-height: var(--tap);
  padding: 0.65rem 1rem;
  color: #fff;
  background: var(--green);
  border-radius: var(--r-ctrl);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.brand-mark {
  display: inline-grid;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 var(--tap);
  place-items: center;
  color: var(--green);
  background: #fff;
  border-radius: var(--r-ctrl);
  font-family: var(--font-head);
  font-size: 1.5rem;
}

.brand-mark-green {
  color: #fff;
  background: var(--green);
}

.spinner {
  width: 2rem;
  height: 2rem;
  margin-block-start: 1.5rem;
  border: 3px solid var(--border-ctrl);
  border-top-color: var(--green);
  border-radius: 50%;
}

/* The resolving screen is the one place the demo makes a parent wait, so it
   spins — for anyone who has not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .spinner {
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: var(--r-ctrl);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.button-dashed {
  border: 2px dashed var(--border-ctrl);
}

.route-view,
.config-view,
.chat-view {
  min-height: 100dvh;
}

.onboarding-view {
  padding: 1.5rem var(--pad) 2rem;
}

.onboarding-card {
  width: 100%;
  max-width: 40.375rem;
  margin-inline: auto;
}

.language-card {
  display: flex;
  min-height: calc(100dvh - var(--onboarding-chrome-h));
  flex-direction: column;
  padding-block-start: 1.5rem;
}

.language-card h1 {
  margin-block: 2.5rem 0.25rem;
  font-size: 1.75rem;
}

.onboarding-sub {
  font-size: 1rem;
}

.control-hint {
  font-size: 0.8125rem;
}

.on-dark {
  color: var(--on-green-dim);
}

.progress-row {
  display: grid;
  grid-template-columns: var(--tap) 1fr auto;
  gap: 0.75rem;
  align-items: center;
  color: var(--body-muted);
  font-weight: 700;
}

.back-link {
  display: inline-grid;
  width: var(--tap);
  height: var(--tap);
  place-items: center;
  border-radius: var(--r-pill);
  font-size: 1.75rem;
  text-decoration: none;
}

.progress-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.progress-bars span {
  height: 5px;
  background: var(--border-card);
  border-radius: var(--r-pill);
}

.progress-bars .complete {
  background: var(--green);
}

.form-card h1 {
  margin-block: 2rem 0.75rem;
  font-size: 1.75rem;
}

.form-card > .control-hint {
  margin-block: 0.5rem 1.25rem;
}

.form-card label,
.form-card legend {
  display: block;
  margin-block-end: 0.45rem;
  font-weight: 700;
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  color: var(--ink);
  background: #fff;
}

.form-card select:disabled {
  color: var(--disabled-ink);
  background: var(--border-card);
}

.account-never {
  margin-block-start: 1.25rem;
  padding: 1.1rem;
  color: var(--green-deep);
  background: var(--tint-green);
  border-radius: var(--r-card);
}

.account-never ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 0.9rem;
  list-style: none;
}

.account-never li {
  padding: 0.45rem 0.75rem;
  background: #fff;
  border-radius: var(--r-pill);
  font-weight: 600;
}

.form-card > .button:last-child,
/* The child form's delete block follows the submit in edit mode, so :last-child
   no longer reaches it; the submit is full width in both modes. */ #child-submit,
.account-never + .button {
  width: 100%;
  margin-block-start: 1rem;
}

.child-delete,
.child-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.child-delete {
  margin-block-start: 1.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--hairline);
}

.child-delete button {
  min-height: var(--tap);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-ctrl);
  border-radius: var(--r-ctrl);
  font-weight: 700;
}

/* Edit mode reuses the onboarding forms, which carry a 3-step progress row.
   There is no step count when editing one child, so the bars and the counter
   go invisible rather than away: the row still positions the back link. */
#child-new[data-mode="edit"] .progress-bars,
#child-new[data-mode="edit"] #child-step,
#child-pathway[data-mode="edit"] .progress-bars,
#child-pathway[data-mode="edit"] #pathway-step {
  visibility: hidden;
}

/* Creating a child has no back step out of the pathway question, so there the
   link is hidden exactly as the spacer it replaced was: invisible, out of the
   tab order, and still holding its grid column. */
#child-pathway:not([data-mode="edit"]) #child-pathway-back {
  visibility: hidden;
}

/* "Add as many children as you like" is onboarding copy; editing one child is
   not the moment for it. */
#child-new[data-mode="edit"] #child-sub {
  display: none;
}

.form-card > .button + .button {
  margin-block-start: 0.75rem;
}

.form-card input[type="checkbox"] {
  width: 1.5rem;
  min-height: 0;
  height: 1.5rem;
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--green);
}

.consent-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-block-start: 1.25rem;
}

.consent-row label {
  margin: 0;
  font-weight: 600;
}

.consent-link {
  display: inline-block;
  margin-block-start: 0.5rem;
  font-weight: 700;
}

.form-status {
  min-height: 1.5rem;
  margin-block: 0.75rem 0;
  color: var(--body-muted);
}

.form-status.is-error {
  color: var(--coral-deep);
  font-weight: 600;
}

.form-card [aria-invalid="true"] {
  border-color: var(--coral-deep);
  box-shadow: 0 0 0 1px var(--coral-deep);
}

.pathway-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-block-start: 1.25rem;
}

.pathway-options button {
  min-height: 52px;
  font-weight: 700;
}

.pathway-options button[aria-pressed="true"] {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}

.back-spacer {
  visibility: hidden;
}

#child-year-label {
  margin-block-start: 1rem;
}

#child-rollover {
  margin-block-start: 0.8rem;
}

.chat-view form,
.chat-view .controls {
  display: grid;
  gap: 0.75rem;
}

.config-view,
.chat-view {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 2rem var(--pad);
}

.chat-view .controls,
.chat-view form {
  margin-block: 1.5rem;
}

.chat-view select,
.chat-view textarea,
.chat-view button {
  padding: 0.75rem;
}

#turns {
  display: grid;
  gap: 1rem;
}

.turn {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  overflow-wrap: anywhere;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.chip {
  display: inline-flex;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 700;
}

@media (min-width: 64rem) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.375rem;
  }

  .eyebrow {
    width: max-content;
    margin-inline: auto;
    padding: 0.45rem 1rem;
    color: #fff;
    background: rgb(255 255 255 / 15%);
    border-radius: var(--r-pill);
    font-weight: 700;
  }

  .onboarding-view {
    padding-block: 3rem;
  }

  .language-card,
  .form-card {
    min-height: auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--r-card);
    box-shadow: 0 15px 40px rgb(35 32 28 / 8%);
  }
}

/* PR 2 signed-in shell and views. */
body[data-route="home"],
body[data-route="pathway"],
body[data-route="now"],
body[data-route="guide"],
body[data-route="ask"],
body[data-route="settings"],
body[data-route="child/profile"] {
  padding-block-end: 5.5rem;
}

#app-shell-nav {
  display: contents;
}

#child-switcher {
  position: relative;
  padding: 1rem var(--pad);
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}

#shell-children-label {
  display: none;
}

#child-switcher-inline {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding-inline-end: 3.5rem;
  overflow-x: auto;
}

.child-switcher-button {
  display: inline-flex;
  min-width: var(--tap);
  min-height: var(--tap);
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
}

.child-switcher-button[aria-current="page"] {
  padding-inline-end: 1rem;
  background: var(--tint-green);
  box-shadow: inset 0 0 0 2px var(--green);
}

.child-monogram,
.now-monogram {
  display: inline-grid;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 var(--tap);
  place-items: center;
  color: var(--green-deep);
  background: var(--tint-green);
  border-radius: 50%;
  font-weight: 700;
}

.monogram-1 {
  color: var(--coral-deep);
  background: var(--tint-coral);
}

.monogram-2 {
  color: var(--amber-deep);
  background: var(--tint-amber);
}

.child-switcher-copy {
  display: none;
  text-align: left;
}

.child-switcher-button[aria-current="page"] .child-switcher-copy {
  display: grid;
}

.child-switcher-copy small {
  color: var(--body-muted);
  font-size: 0.8125rem;
}

#child-switcher-overflow,
#shell-no-children,
#shell-add-child-hint {
  margin-block-start: 0.75rem;
}

#child-switcher-overflow summary {
  min-height: var(--tap);
  cursor: pointer;
}

.child-overflow-list {
  display: grid;
  gap: 0.5rem;
}

#shell-add-child {
  position: absolute;
  top: 1rem;
  right: var(--pad);
  width: var(--tap);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 2px dashed var(--border-ctrl);
  border-radius: 50%;
}

#shell-add-child-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

#shell-add-child-hint {
  padding-inline-end: 3.5rem;
  color: var(--body-muted);
  font-size: 0.8125rem;
}

#primary-nav {
  position: sticky;
  z-index: 40;
  top: 0;
}

#primary-nav > a {
  display: grid;
  min-width: var(--tap);
  min-height: var(--tap);
  place-items: center;
  gap: 0.15rem;
  color: var(--body-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

#primary-nav > a {
  position: fixed;
  z-index: 45;
  bottom: 0;
  width: calc(100% / 4);
  min-height: 76px;
  padding: 0.5rem 0;
  background: #fff;
  border-top: 1px solid var(--hairline);
}

#nav-home {
  left: 0;
}

#nav-ask {
  left: 25%;
}

#nav-guides {
  left: 50%;
}

#nav-settings {
  left: 75%;
}

#primary-nav > a > span[aria-hidden="true"] {
  display: inline-grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
}

/* The icons stroke in currentColor, so the active and rail treatments below
   need only set the link's colour. */
#primary-nav > a > span[aria-hidden="true"] > svg {
  width: 100%;
  height: 100%;
}

body[data-route="home"] #nav-home,
body[data-route="ask"] #nav-ask,
body[data-route="guide"] #nav-guides,
body[data-route="settings"] #nav-settings {
  color: var(--green);
}

#rail-toggle {
  display: none;
}

.signed-view {
  padding: 2rem var(--pad);
}

.signed-page-header {
  display: grid;
  gap: 1rem;
  max-width: 86rem;
  margin-inline: auto;
}

.signed-page-header h1,
.now-header h1,
.guide-article > h1 {
  margin: 0;
  font-size: 1.625rem;
}

#pathway-sub,
.now-header p,
.guide-breadcrumb,
.guide-source-row,
.now-owner,
.guide-card > p {
  color: var(--body-muted);
}

.path-track-card {
  max-width: 86rem;
  margin: 2rem auto 0;
}

.path-track {
  position: relative;
  display: grid;
  list-style: none;
}

.stage-node {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  min-height: 7rem;
  align-items: start;
  /* At 200% text zoom the indented copy column is narrower than a long word;
     without this the words overflow the page instead of wrapping. */
  overflow-wrap: anywhere;
}

.stage-node:not(:last-child)::after {
  position: absolute;
  top: 3.65rem;
  bottom: -0.4rem;
  left: 2.1rem;
  width: 0.35rem;
  content: "";
  background: var(--border-card);
}

.stage-node.is-completed:not(:last-child)::after {
  background: var(--green);
}

.stage-marker {
  position: relative;
  z-index: 1;
  display: inline-grid;
  width: 3.75rem;
  height: 3.75rem;
  place-items: center;
  color: #fff;
  background: var(--cream);
  border: 2px solid var(--border-ctrl);
  border-radius: 50%;
  font-size: 1.75rem;
}

.stage-node.is-completed .stage-marker {
  background: var(--green);
  border-color: var(--green);
}

.stage-node.is-current .stage-marker {
  background: var(--coral);
  border: 0.55rem solid var(--tint-coral);
  box-shadow: inset 0 0 0 0.75rem var(--coral);
}

.stage-node > div {
  display: grid;
  gap: 0.2rem;
  padding-block-start: 0.15rem;
}

.stage-node strong {
  font-family: var(--font-head);
  font-size: 1.35rem;
}

/* A2 (§0.2): coral text appears only as bold large text (≥18.66px bold, the
   WCAG 3:1 threshold) — 24px here, 19px in the mobile track. */
.stage-node.is-current strong {
  color: var(--coral-text);
  font-size: 1.5rem;
}

.stage-node small {
  color: var(--body-muted);
  font-size: 1rem;
}

.you-are-here {
  justify-self: start;
}

.path-fork {
  margin-inline-start: 4.5rem;
  padding-inline-start: 1.25rem;
  border-left: 0.35rem solid var(--border-card);
}

#path-fork-label {
  color: var(--body-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#path-fork-cards {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 1rem;
  list-style: none;
}

.path-fork-card {
  display: grid;
  padding: 1rem 1.25rem;
  border: 2px dashed;
  border-radius: var(--r-card);
  overflow-wrap: anywhere;
}

.path-fork-card strong {
  font-family: var(--font-head);
  font-size: 1.15rem;
}

.path-fork-card small {
  color: var(--body-muted);
}

.path-fork-card.fork-voc {
  color: var(--amber-deep);
  background: var(--tint-amber);
}

.path-fork-card.fork-two {
  color: var(--coral-text);
  background: var(--tint-coral);
}

.path-fork-card.fork-four {
  color: var(--green-deep);
  background: var(--tint-green);
}

#path-route-note,
.guide-card-meta {
  margin-block-start: 0.75rem;
  font-size: 0.8125rem;
}

.guide-grid-section {
  max-width: 86rem;
  margin: 2.5rem auto 0;
}

.guide-later-section {
  max-width: 86rem;
  margin: 2rem auto 0;
}

.guide-later-section summary {
  cursor: pointer;
  font-weight: 700;
}

.path-grade-intro {
  max-width: 48rem;
}

.path-category {
  margin-block-start: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.path-category summary {
  cursor: pointer;
  overflow-wrap: anywhere;
}

.path-category-title {
  font-weight: 700;
}

.path-category-timing {
  margin-inline-start: 0.5rem;
  background: var(--tint-amber);
}

.path-category-covers {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.875rem;
  font-weight: 400;
}

.path-category-note {
  margin-block: 0.75rem 0;
}

.guide-grid {
  display: grid;
  gap: 1rem;
  margin-block-start: 1rem;
}

.guide-card {
  display: block;
  min-height: 12rem;
  padding: 1.25rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  text-decoration: none;
}

.home-cards {
  display: grid;
  gap: 1rem;
  margin-block-start: 1rem;
}

.home-card {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.home-date {
  margin: 0;
  color: var(--meta);
}

.home-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.home-card-head > div {
  display: grid;
  min-width: 0;
}

.home-card-head strong {
  font-family: var(--font-head);
  font-size: 1.375rem;
  line-height: 1.15;
}

.home-card-head small {
  color: var(--body-muted);
}

.home-card-head .badge-you-are-here {
  margin-inline-start: auto;
  flex: 0 0 auto;
}

.home-ribbon,
.home-ribbon-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 2fr 2fr;
  gap: 4px;
}

.home-ribbon span {
  height: 10px;
  background: var(--hairline);
  border-radius: var(--r-pill);
}

.home-ribbon .is-done {
  background: #c9ded6;
}

.home-ribbon .is-here {
  background: var(--green);
}

.home-ribbon-labels {
  margin-block-start: -0.5rem;
  font-size: 0.8125rem;
  color: var(--meta);
}

.home-ribbon-labels span {
  display: none;
  white-space: nowrap;
}

.home-ribbon-labels .is-here {
  display: block;
  color: var(--green-deep);
  font-weight: 700;
}

.home-count {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  color: var(--body-muted);
}

/* contrast: home-count #1F6E5C on #FFFFFF */
.home-count-n {
  color: var(--green);
  background: #fff;
  font-family: var(--font-head);
  font-size: 3.5rem;
  line-height: 1;
}

.home-done {
  margin-block-start: -0.75rem;
  color: var(--body-muted);
}

.home-progress {
  height: 6px;
  overflow: hidden;
  background: var(--hairline);
  border-radius: var(--r-pill);
}

.home-progress span {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: var(--r-pill);
}

.home-rollover {
  color: var(--green);
}

.home-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* contrast: button-quiet #175A4A on #E7F1ED */
.button-quiet {
  color: var(--green-deep);
  background: var(--tint-green);
}

.home-week-section {
  margin-block-start: 2rem;
}

.home-week-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
}

.home-week-head h2,
.home-ask h2 {
  margin: 0;
  font-size: 1.25rem;
}

.home-week-head a {
  font-weight: 700;
  white-space: nowrap;
}

.home-week {
  display: grid;
  gap: 1rem;
}

.home-ask {
  display: grid;
  gap: 1rem;
  margin-block-start: 2rem;
  padding: 1.5rem;
  background: var(--tint-green);
  border-radius: var(--r-card);
}

.home-ask h2 {
  color: var(--green-deep);
}

.home-ask-copy {
  display: grid;
  gap: 0.75rem;
}

.home-ask-copy p {
  margin: 0;
  color: var(--body-muted);
}

.home-ask .ask-starters {
  margin: 0;
  padding: 0;
}

.home-ask .button-green {
  justify-self: start;
}

.rollover-card {
  display: grid;
  gap: 1.25rem;
  max-width: 86rem;
  margin: 1.5rem auto 0;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--green);
  border-radius: var(--r-card);
}

.rollover-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.profile-fields {
  max-width: 86rem;
  margin: 1.5rem auto 0;
}

.profile-fields dt {
  margin-block-start: 1rem;
  font-weight: 600;
}

.profile-schools {
  max-width: 86rem;
  margin: 2rem auto 0;
}

.profile-schools h2 {
  margin-block-end: 0.75rem;
}

#child-schools-list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}

.school-row {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.school-row button {
  margin-inline-start: 0.75rem;
}

.profile-empty {
  color: var(--body-muted);
}

#child-school-add {
  margin-block-start: 1rem;
}

#child-school-add-heading::-webkit-details-marker {
  display: none;
}

.resources-section {
  display: grid;
  gap: 0.5rem;
  margin-block: 1rem;
}

#resources-stage {
  min-height: var(--tap);
}

.guide-card h3 {
  margin-block: 0.75rem 0.25rem;
}

.guide-card-compact .guide-card-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.guide-card-cta {
  display: block;
  margin-block-start: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
}

.guide-tag {
  display: inline-flex;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 700;
}

.tag-explain {
  color: var(--coral-chip);
  background: var(--tint-coral);
}

.tag-prepare {
  color: var(--green-deep);
  background: var(--tint-green);
}

.tag-route {
  color: var(--amber-deep);
  background: var(--tint-amber);
}

.now-feed {
  max-width: 46rem;
  margin-inline: auto;
}

.now-header h1 {
  font-size: 2rem;
}

.now-header p {
  margin-block-start: 0.75rem;
  font-size: 1.15rem;
}

#now-complete-hint {
  margin-block: 1rem;
}

.now-list {
  display: grid;
  gap: 1rem;
}

.now-row {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.now-completion {
  width: var(--tap);
  height: var(--tap);
  margin: 0;
  appearance: none;
  background: #fff;
  border: 2px solid var(--border-ctrl);
  border-radius: 50%;
}

.now-completion:checked {
  background: var(--green);
  border-color: var(--green);
}

.now-completion:checked::after {
  display: grid;
  height: 100%;
  place-items: center;
  color: #fff;
  content: "✓";
  font-size: 1.3rem;
}

.now-owner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}

.now-monogram {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
  font-size: 0.8125rem;
}

.now-row h3 {
  margin-block: 0.5rem 0.2rem;
  font-size: 1.25rem;
}

.now-row h3 a {
  color: inherit;
  text-decoration: underline;
}

.now-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-block-start: 0.8rem;
  color: var(--meta);
}

.now-row.is-done {
  background: var(--cream-alt);
}

.now-row.is-done h3 {
  color: var(--body-muted);
  text-decoration: line-through;
}

.now-row.is-done .now-meta {
  /* A3 (§0.2): meta on cream-alt uses body muted, not --meta. */
  color: var(--body-muted);
}

.guide-view {
  max-width: 90rem;
  margin-inline: auto;
}

.guide-article {
  max-width: var(--measure);
  min-width: 0;
  margin-inline: auto;
}

.guide-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  color: var(--body-muted);
  font-weight: 700;
  text-decoration: none;
}

.guide-breadcrumb {
  display: none;
}

.guide-article > h1 {
  margin-block: 1.5rem 1rem;
}

.guide-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  font-size: 0.8125rem;
}

.guide-paragraphs {
  display: grid;
  gap: 1.25rem;
  margin-block: 2rem;
}

#ask-dock:empty {
  display: none;
}

.settings-view,
.chat-view {
  max-width: var(--measure);
  margin-inline: auto;
}

.settings-card,
.family-card {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 1.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.settings-card {
  gap: 0.75rem;
  /* The account email is one unbreakable token; at 200% text zoom its
     min-content width would otherwise push the card past the viewport. */
  overflow-wrap: anywhere;
}

.settings-card select,
.settings-card button {
  min-height: var(--tap);
  padding: 0.6rem 0.8rem;
  justify-self: start;
}

#family-profile-form {
  display: grid;
  gap: 0.75rem;
}

#family-profile-form input,
#family-profile-form textarea {
  min-height: var(--tap);
}

/* Arc 3: the add-school form stacks like the family card's form above. */
#child-school-form {
  display: grid;
  gap: 0.75rem;
}

#child-school-form input:not([type="checkbox"]),
#child-school-form select {
  min-height: var(--tap);
}

/* Same checkbox rule the Now list uses (.now-completion): a circular
   checkmark control instead of the native box. */
#child-school-form input[type="checkbox"] {
  width: var(--tap);
  height: var(--tap);
  justify-self: start;
  margin: 0;
  appearance: none;
  background: #fff;
  border: 2px solid var(--border-ctrl);
  border-radius: 50%;
}

#child-school-form input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}

#child-school-form input[type="checkbox"]:checked::after {
  display: grid;
  height: 100%;
  place-items: center;
  color: #fff;
  content: "✓";
  font-size: 1.3rem;
}

.family-roster {
  padding-block: 1rem;
  border-block-start: 1px solid var(--hairline);
}

.family-roster ul,
#children-list {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 0.75rem;
  padding: 0;
  list-style: none;
}

.family-member {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.family-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.family-member-actions button,
.family-card button,
.join-view button {
  min-height: var(--tap);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-ctrl);
  border-radius: var(--r-ctrl);
  font-weight: 700;
}

.invite-result,
#family-invite-result {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--tint-green);
  border-radius: var(--r-ctrl);
}

#family-invite-link {
  overflow-wrap: anywhere;
}

.join-view {
  display: grid;
  gap: 1.25rem;
  max-width: var(--measure);
  margin-inline: auto;
}

.join-view form,
#family-invite-form {
  display: grid;
  gap: 0.75rem;
}

.join-view input,
.join-view select,
#family-invite-email {
  min-height: var(--tap);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-ctrl);
  border-radius: var(--r-ctrl);
}

#ask-surface {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

#ask-surface .ask-header {
  display: grid;
  gap: 0.25rem;
}

#ask-grounding,
#ask-dock-grounding {
  color: var(--body-muted);
  font-size: 1.0625rem;
}

.ask-dock-grounding {
  display: none;
}

.ask-dock-title {
  display: none;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

#ask-dock .ask-route-grounding {
  display: none;
}

#ask-dock .ask-dock-title,
#ask-dock .ask-dock-grounding {
  display: block;
}

#conversation {
  min-width: 0;
}

#turns {
  gap: 1.5rem;
}

#ask-surface .turn {
  width: fit-content;
  max-width: 100%;
  padding: 1.25rem;
  position: relative;
  text-align: left;
}

#ask-surface .user-turn {
  max-width: 80%;
  margin-inline-start: auto;
  border: 0;
  border-bottom-right-radius: 0;
}

#ask-surface .assistant-turn {
  width: 100%;
}

#ask-surface .turn p + p {
  margin-block-start: 1rem;
}

#ask-surface .chips {
  align-items: flex-start;
}

#ask-surface .chips .chip {
  flex-direction: column;
  align-items: flex-start;
}

.chip-link {
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  text-decoration: none;
}

/* The provenance label is the link affordance; the source and review lines
   read as detail, not as a three-line underlined block. */
.chip-link > span:first-child {
  text-decoration: underline;
}

#ask-surface .chips .chip span + span {
  font-weight: 400;
}

/* #status is screen-reader-only, so the turn notices need somewhere to be
   read. Same text, same moment — this is the sighted half. */
.ask-notice {
  margin-block-end: -0.5rem;
  color: var(--body-muted);
}

.ask-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.ask-starters .button {
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
}

.ask-boundary {
  padding-block-start: 1rem;
  color: var(--body-muted);
  border-top: 1px solid var(--hairline);
}

.ask-disclosure {
  margin-block-start: -1rem;
  color: var(--meta);
  font-size: 0.875rem;
}

.ask-composer {
  display: grid;
  gap: 1.5rem;
}

body[data-route="ask"] .ask-composer {
  position: sticky;
  z-index: 1;
  bottom: 76px;
  background: var(--cream);
}

#ask-surface form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0;
}

#ask-surface textarea {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0.9rem 1.25rem;
  resize: none;
  border: 0;
  border-radius: var(--r-pill);
}

#ask-surface #send {
  display: inline-flex;
  width: 60px;
  min-width: 60px;
  height: 60px;
  min-height: 60px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border: 0;
  border-radius: var(--r-pill);
  line-height: 1;
}

.send-arrow {
  font-size: 1.5rem;
}

#send-label {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 64rem) {
  body[data-route="ask"] .ask-composer {
    bottom: 0;
  }

  body[data-route="home"],
  body[data-route="pathway"],
  body[data-route="now"],
  body[data-route="guide"],
  body[data-route="ask"],
  body[data-route="settings"],
  body[data-route="child/profile"] {
    padding-block-end: 0;
  }

  body[data-route="home"] main,
  body[data-route="pathway"] main,
  body[data-route="now"] main,
  body[data-route="guide"] main,
  body[data-route="ask"] main,
  body[data-route="settings"] main,
  body[data-route="child/profile"] main {
    margin-inline-start: var(--sidebar);
  }

  body[data-rail="collapsed"][data-route="home"] main,
  body[data-rail="collapsed"][data-route="pathway"] main,
  body[data-rail="collapsed"][data-route="now"] main,
  body[data-rail="collapsed"][data-route="guide"] main,
  body[data-rail="collapsed"][data-route="ask"] main,
  body[data-rail="collapsed"][data-route="settings"] main,
  body[data-rail="collapsed"][data-route="child/profile"] main {
    margin-inline-start: var(--sidebar-collapsed);
  }

  #app-shell-nav {
    position: fixed;
    z-index: 35;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: var(--sidebar);
    flex-direction: column;
    padding: 1.5rem 1.1rem;
    color: #fff;
    background: var(--green);
    border-right: 1px solid var(--green-dark);
    overflow-y: auto;
  }

  /* A short desktop window must scroll the rail, not squeeze #primary-nav
     below its content height. */
  #app-shell-nav > * {
    flex-shrink: 0;
  }

  #app-shell-nav::before {
    display: inline-grid;
    width: var(--tap);
    height: var(--tap);
    flex: 0 0 var(--tap);
    place-items: center;
    margin-block-end: 1.5rem;
    color: var(--green);
    content: "P";
    background: #fff;
    border-radius: var(--r-ctrl);
    font-family: var(--font-head);
    font-size: 1.35rem;
  }

  #rail-toggle {
    display: flex;
    width: 100%;
    min-height: var(--tap);
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    margin-block-end: 1rem;
    padding: 0.5rem 0.65rem;
    color: var(--on-green-dim);
    background: transparent;
    border: 0;
    border-radius: var(--r-ctrl);
  }

  #rail-toggle > span::before {
    content: "«";
    font-size: 1.1rem;
  }

  body[data-rail="collapsed"] #rail-toggle {
    width: var(--tap);
    justify-content: center;
    padding: 0;
  }

  body[data-rail="collapsed"] #rail-toggle > span::before {
    content: "»";
  }

  #child-switcher {
    position: static;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
  }

  #shell-children-label {
    display: block;
    margin-block-end: 0.75rem;
    color: var(--on-green-dim);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #child-switcher-inline,
  .child-overflow-list {
    display: grid;
    gap: 0.45rem;
    padding: 0;
    overflow: visible;
  }

  .child-switcher-button,
  .child-switcher-button[aria-current="page"] {
    width: 100%;
    padding: 0.55rem 0.65rem;
    color: #fff;
    border-radius: var(--r-ctrl);
  }

  .child-switcher-button[aria-current="page"] {
    background: rgb(255 255 255 / 18%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%);
  }

  .child-switcher-copy,
  .child-switcher-button[aria-current="page"] .child-switcher-copy {
    display: grid;
  }

  .child-switcher-copy small {
    color: var(--on-green-dim);
  }

  #shell-add-child {
    position: static;
    width: 100%;
    justify-content: flex-start;
    gap: 0.65rem;
    margin-block-start: 0.5rem;
    padding: 0.5rem 0.65rem;
    color: var(--on-green-dim);
    background: transparent;
    border-color: rgb(255 255 255 / 55%);
    border-radius: var(--r-ctrl);
  }

  #shell-add-child-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  #shell-add-child-hint {
    padding: 0;
    color: var(--on-green-dim);
  }

  #primary-nav {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
    margin-block-start: 1.5rem;
    padding: 0;
    background: transparent;
    border: 0;
  }

  #primary-nav > a {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    color: var(--on-green-dim);
    border-radius: var(--r-ctrl);
    font-size: 1rem;
  }

  #primary-nav > a {
    position: static;
    width: auto;
    min-height: 0;
    background: transparent;
    border-top: 0;
  }

  body[data-route="home"] #nav-home,
  body[data-route="ask"] #nav-ask,
  body[data-route="guide"] #nav-guides,
  body[data-route="settings"] #nav-settings {
    color: var(--ink);
    background: #fff;
  }

  .signed-view {
    padding: 2.5rem 2.5rem 3rem;
  }

  .signed-page-header {
    /* Both columns need real floors on tight wide layouts — at 1024px the
       pathway rail margin leaves ~20rem of content, and a 0-minimum fr column
       loses every pixel to the second track's growth limit. 1440 is
       unchanged: the first column still flexes, the second still caps at
       22rem. */
    grid-template-columns: minmax(10rem, 1fr) minmax(min(19rem, 40%), 22rem);
    align-items: start;
  }

  #child-profile-edit {
    justify-self: end;
  }

  .signed-page-header h1,
  .guide-article > h1 {
    font-size: 2rem;
  }

  .path-track-card {
    padding: 2.5rem;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--r-card);
  }

  .path-track {
    grid-template-columns: repeat(4, minmax(7rem, 1fr));
  }

  .stage-node {
    grid-template-columns: 1fr;
    min-height: auto;
    justify-items: center;
    text-align: center;
  }

  .stage-node:not(:last-child)::after {
    top: 1.65rem;
    right: -2rem;
    bottom: auto;
    left: calc(50% + 2.4rem);
    width: calc(100% - 4.8rem);
    height: 0.35rem;
  }

  .stage-node > div {
    justify-items: center;
    padding-block-start: 0.75rem;
  }

  .stage-node strong {
    font-size: 1rem;
  }

  .stage-node.is-current strong {
    font-size: 1.1875rem;
  }

  .stage-node small {
    font-size: 0.8125rem;
  }

  .you-are-here {
    position: absolute;
    top: -2.35rem;
  }

  .path-fork {
    margin: 2.5rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--hairline);
    border-left: 0;
  }

  #path-fork-label {
    text-align: center;
  }

  #path-fork-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-card {
    padding: 1.5rem;
  }

  .home-ribbon-labels span {
    display: block;
  }

  .home-date {
    text-align: end;
  }

  .home-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-ask {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  /* The desktop timeline lays the stage labels out in narrow grid columns,
     where the mobile FAB reservation would wrap them. */
  .stage-current {
    padding-inline-end: 0;
  }

  body[data-route="pathway"] .now-row {
    grid-template-columns: 2rem minmax(0, 1fr);
    padding: 0.8rem 0;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
  }

  body[data-route="pathway"] .now-completion {
    width: 2rem;
    height: 2rem;
  }

  body[data-route="pathway"] .now-owner {
    font-size: 0.8125rem;
  }

  body[data-route="pathway"] .now-monogram,
  body[data-route="pathway"] .now-meta > span:not(.chip) {
    display: none;
  }

  body[data-route="pathway"] .now-row h3 {
    font-size: 1rem;
  }

  body[data-rail="collapsed"] #app-shell-nav {
    width: var(--sidebar-collapsed);
    align-items: center;
    padding-inline: 0.7rem;
  }

  body[data-rail="collapsed"] #shell-children-label,
  body[data-rail="collapsed"] #shell-add-child,
  body[data-rail="collapsed"] #shell-add-child-hint {
    display: none;
  }

  /* The collapsed sidebar hides the link labels and each child's name and
     stage visually only — display: none would strip the accessible name from
     every nav link and leave each child button announcing a bare monogram.
     The active button's copy is re-shown at 0-3-0 specificity above, so that
     selector is repeated here or the name bleeds over the monogram. */
  body[data-rail="collapsed"] #primary-nav > a span:not([aria-hidden="true"]),
  body[data-rail="collapsed"] .child-switcher-copy,
  body[data-rail="collapsed"] .child-switcher-button[aria-current="page"] .child-switcher-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body[data-rail="collapsed"] .child-switcher-button,
  body[data-rail="collapsed"] .child-switcher-button[aria-current="page"] {
    width: var(--tap);
    padding: 0;
  }

  body[data-rail="collapsed"] .child-switcher-button[aria-current="page"] {
    box-shadow: 0 0 0 3px #fff;
  }

  body[data-rail="collapsed"] #primary-nav > a {
    justify-content: center;
    padding: 0;
  }

  .guide-article {
    margin-inline: 0 auto;
  }

  .guide-back {
    display: none;
  }

  .guide-breadcrumb {
    display: block;
  }
}

/* The dock is 392px of fixed furniture. Below 90rem it would leave the page
   it sits beside narrower than the 64rem layout was drawn for, so the
   floating Ask button carries the chat until the window is wide enough. */
@media (min-width: 90rem) {
  /* Docked routes: the chat panel is fixed on the right; main leaves room. */
  body:is([data-route="home"], [data-route="pathway"], [data-route="now"], [data-route="guide"], [data-route="settings"], [data-route="child/profile"]) main {
    margin-inline-end: var(--dock);
  }

  #ask-dock {
    display: flex;
    position: fixed;
    z-index: 30;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--dock);
    flex-direction: column;
    padding: 1.5rem;
    background: #fff;
    border-left: 1px solid var(--hairline);
  }

  #ask-dock #ask-surface {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto 1fr auto;
  }

  #ask-dock #conversation {
    min-height: 0;
    overflow-y: auto;
  }

  #ask-dock #ask-heading {
    display: none;
  }
}

.stale-banner {
  margin-block: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  color: var(--amber-deep);
  background: var(--tint-amber);
  border-radius: var(--r-ctrl);
  font-size: 0.875rem;
  font-weight: 600;
}

.guide-card .stale-banner {
  margin-block: 0 0.75rem;
}

.guide-state {
  padding: 1.25rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.guide-retry {
  min-width: var(--tap);
  min-height: var(--tap);
  margin-block-start: 0.75rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: var(--r-ctrl);
  font-weight: 700;
}

#pathway-undecided {
  grid-column: 1 / -1;
}

.form-card input + label,
.form-card select + label {
  margin-block-start: 1rem;
}

.form-card input:read-only:not([type="checkbox"]) {
  color: var(--body-muted);
  background: var(--cream-alt);
}

#family-error .button {
  width: 100%;
  margin-block-start: 1rem;
}

/* Server-rendered distress constant: visibly its own kind of turn. */
.distress-turn {
  border-inline-start: 4px solid var(--amber-deep);
  padding-inline-start: 0.75rem;
}

/* The server's "not reviewed" label on a general-guidance turn. A band, not a
   dimmed line: it has to read as a frame around the guidance rather than as
   the guidance's own first sentence, so it keeps a body-text contrast ratio
   instead of being faded into one. */
/* contrast: general-label #6B655C on #F1EDE4 */
.general-label {
  color: var(--body-muted);
  background: var(--cream-alt);
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-ctrl);
  font-weight: 700;
}

/* The actions a negative turn offers, inside the turn that offered them. */
.turn-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1rem;
}

/* Child-scoped navigation reuses the Home card's identity and grade ribbon. */
#child-page-head {
  max-width: 62rem;
  margin-inline: auto;
  padding: 1.25rem 1.5rem 0;
}
#child-header {
  display: grid;
  gap: 1rem;
}

#child-tabs {
  display: flex;
  gap: .5rem;
  margin-top: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
#child-tabs > a {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  flex-wrap: wrap;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem .4rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
#child-tabs > a[aria-current="page"] {
  color: var(--green);
  border-bottom-color: currentColor;
  font-weight: 700;
}
#child-tab-now-count {
  min-width: 1.3rem;
  border-radius: 999px;
  padding: .1rem .35rem;
  background: var(--tint-green);
  color: var(--green);
  font-size: .75rem;
  text-align: center;
}

.child-switcher-button {
  text-decoration: none;
  color: inherit;
}
.child-now-count {
  display: none;
  margin-inline-start: auto;
  border-radius: var(--r-pill);
  padding: .1rem .4rem;
  font-size: .75rem;
  background: var(--tint-green);
  color: var(--green);
}
@media (min-width: 64rem) {
  .child-now-count {
    display: inline-block;
  }
}
body[data-rail="collapsed"] .child-now-count {
  display: none;
}

/* Journey details reuse the existing Now row and button surfaces. */
.action-row > div {
  min-width: 0;
}
.action-row summary {
  cursor: pointer;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.action-row details p,
.action-row details ol,
.action-row details ul {
  margin-block: 0.75rem;
}
.action-row details a {
  overflow-wrap: anywhere;
}
.action-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-block-start: 1rem;
}
.action-controls input {
  max-width: 100%;
  min-width: 0;
}
.action-position {
  font-weight: 700;
}

/* =====================================================================
   Pando Learning family: the signed-out landing and the sign-in page.
   The world is ~/Pando-Learning/DESIGN.md: flat night, navy, gold and
   ivory grounds; Besley 800 speaks, Atkinson reads; the dashed thread is
   the only divider; pills for anything pressed; no shadows.
   ===================================================================== */

body[data-route="landing"] {
  background: var(--pando-night);
}

body[data-route="sign-in"] {
  background: #fff;
}

body:not([data-route="landing"]) .site-header {
  display: none;
}

:is(.site-header, .landing-view, .sign-in-view, .language-view) {
  font-family: var(--font-text);
  --focus: var(--pando-gold);
}

:is(.site-header, .landing-view, .sign-in-view, .language-view) :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

:is(.landing-view, .sign-in-view, .language-view) ::selection {
  color: var(--pando-night);
  background: var(--pando-gold);
}

:is(.landing-view, .sign-in-view, .language-view) :is(h1, h2, h3) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:is(.landing-view, .sign-in-view, .language-view) p {
  text-wrap: pretty;
}

/* Buttons: a Besley label in a full pill. */
:is(.site-header, .landing-view, .sign-in-view, .language-view) .button {
  min-height: 3rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, translate 0.25s
    var(--ease-settle);
}

.button-compact {
  min-height: 2.6rem;
  padding: 0.45rem 1.25rem;
  font-size: 1rem;
}

/* contrast: pando-button-gold #04283A on #FFC727 */
.button-gold {
  color: var(--pando-night);
  background: var(--pando-gold);
}

.button-gold:hover {
  background: var(--pando-gold-hover);
}

/* contrast: pando-button-ivory #073C56 on #FFF8E8 */
.button-ivory {
  color: var(--pando-navy);
  background: var(--pando-ivory);
}

.button-ivory:hover {
  background: var(--pando-gold);
}

/* contrast: pando-button-navy #FFF8E8 on #073C56 */
.button-navy {
  color: var(--pando-ivory);
  background: var(--pando-navy);
  --focus: var(--pando-navy);
}

.button-navy:hover {
  background: var(--pando-night);
}

@media (prefers-reduced-motion: no-preference) {
  :is(.site-header, .landing-view, .sign-in-view, .language-view) .button:hover {
    translate: 0 -2px;
  }

  :is(.site-header, .landing-view, .sign-in-view, .language-view) .button:active {
    translate: 0;
  }
}

/* The quiet link beside a button: bold text on the dashed thread. */
.quiet-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline dashed var(--pando-thread) 3px;
  text-underline-offset: 0.35em;
}

.quiet-link:hover {
  text-decoration-color: var(--pando-gold);
}

/* The Parent University mark (Logo 5b, The Doorway) beside live text. */
.lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pu-mark {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
}

.pu-mark-arch {
  fill: var(--pando-ivory);
}

.pu-mark-door {
  fill: var(--pando-night);
}

.pu-mark-handle {
  fill: var(--pando-gold);
}

.lockup-text {
  display: grid;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

.lockup-family {
  margin-top: 0.3rem;
  color: var(--pando-soft-night);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Header: laid over the night hero; it does not stick. */
/* contrast: pando-ivory-on-night #FFF8E8 on #04283A */
.site-header {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 1.25rem var(--gutter);
  color: var(--pando-ivory);
  background: var(--pando-night);
}

.landing-nav {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
}

.landing-nav a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 0.45em;
}

.landing-nav a:hover {
  text-decoration: underline dashed var(--pando-thread) 3px;
}

.language-pill {
  display: inline-grid;
  min-width: var(--tap);
  min-height: var(--tap);
  place-items: center;
  padding: 0 2rem 0 0.9rem;
  color: inherit;
  /* Carets are drawn with gradients: img-src 'self' blocks inline SVG URLs. */
  background:
    linear-gradient(45deg, transparent 50%, var(--pando-ivory) 50%) no-repeat
    right calc(0.8rem + 0.35rem) center / 0.35rem 0.35rem,
    linear-gradient(135deg, var(--pando-ivory) 50%, transparent 50%) no-repeat
    right 0.8rem center / 0.35rem 0.35rem;
  border: 2px solid var(--pando-soft-night);
  border-radius: var(--r-pill);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

/* ---- Hero: the climb ------------------------------------------------ */

/* contrast: pando-landing #FFF8E8 on #04283A */
.landing-view {
  color: var(--pando-ivory);
  background: var(--pando-night);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: calc(100svh - 5.6rem);
  padding: clamp(1.5rem, 5vh, 4rem) 0 0 var(--gutter);
}

.landing-hero-copy {
  padding-block-end: clamp(2rem, 8vh, 6rem);
}

.landing-hero h1 {
  max-width: 11em;
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 1.03;
}

/* contrast: pando-soft-on-night #C4D6DD on #04283A */
.landing-sub,
.landing-trust {
  color: var(--pando-soft-night);
  background: var(--pando-night);
}

.landing-sub {
  max-width: 28em;
  margin: 1.4rem 0 2rem;
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.45;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.landing-trust {
  margin-top: 1.75rem;
  font-size: 0.95rem;
}

.grove {
  position: relative;
  align-self: end;
}

.grove-svg {
  display: block;
  width: 100%;
  height: auto;
}

.grove-tree {
  cursor: pointer;
}

.grove-label rect {
  fill: var(--pando-night);
  stroke: var(--pando-soft-night);
  stroke-width: 1.5;
}

.grove-label text {
  fill: var(--pando-ivory);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}

.grove-tree.is-on .grove-label rect {
  fill: var(--pando-gold);
  stroke: var(--pando-gold);
}

.grove-tree.is-on .grove-label text {
  fill: var(--pando-night);
}

.grove-tree:hover .grove-label rect {
  stroke: var(--pando-gold);
}

/* The grade card: an ivory page in the open sky above the slope. */
/* contrast: pando-navy-on-ivory #073C56 on #FFF8E8 */
.grove-card {
  position: absolute;
  top: 0;
  left: 2%;
  width: min(22rem, 48%);
  padding: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--pando-navy);
  background: var(--pando-ivory);
  border-radius: 14px;
  --focus: var(--pando-navy);
}

.grove-card label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.grove-card select {
  width: 100%;
  min-height: var(--tap);
  padding: 0.45rem 2.6rem 0.45rem 1rem;
  color: var(--pando-night);
  background:
    linear-gradient(45deg, transparent 50%, var(--pando-night) 50%) no-repeat
    right calc(1rem + 0.4rem) center / 0.4rem 0.4rem,
    linear-gradient(135deg, var(--pando-night) 50%, transparent 50%) no-repeat
    right 1rem center / 0.4rem 0.4rem,
    var(--pando-gold);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  appearance: none;
  cursor: pointer;
}

.grove-topics {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.grove-topics li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.6rem;
  background: var(--stitch-navy) top / 100% 2px no-repeat;
}

.grove-topics li:first-child {
  background: none;
}

.grove-timing {
  flex: none;
  padding: 0.1rem 0.6rem;
  border: 2px solid var(--pando-navy);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 700;
}

.grove-topics li:not([data-timing="now"]) {
  color: var(--pando-soft-ivory);
}

.grove-topics li:not([data-timing="now"]) .grove-timing {
  border-style: dashed;
}

/* ---- How it works: the gold field ------------------------------------ */

/* contrast: pando-navy-on-gold #073C56 on #FFC727 */
.landing-verbs {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: var(--section) var(--gutter);
  color: var(--pando-navy);
  background: var(--pando-gold);
  --focus: var(--pando-navy);
}

.verbs-lede {
  align-self: start;
  position: sticky;
  top: 2.5rem;
}

.verbs-lede h2,
.landing-forks h2,
.never-card h2,
.sourced-card h2,
.languages-band h2,
.partner-band h2 {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.03;
}

.verbs-lede p {
  max-width: 26em;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.35;
}

.verb-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.verb-list li {
  padding-block: 1.6rem;
  background: var(--stitch-navy) top / 100% 4px no-repeat;
}

.verb-list li:first-child {
  padding-top: 0;
  background: none;
}

.verb-list h3 {
  font-size: 1.45rem;
}

.verb-list p {
  max-width: 36em;
  margin: 0.4rem 0 0;
  font-size: 1.0625rem;
}

/* ---- After high school: the navy field ------------------------------- */

/* contrast: pando-ivory-on-navy #FFF8E8 on #073C56 */
.landing-forks {
  padding: var(--section) var(--gutter);
  color: var(--pando-ivory);
  background: var(--pando-navy);
}

/* contrast: pando-soft-on-navy #C4D6DD on #073C56 */
#landing-map-sub,
.fork-caption {
  color: var(--pando-soft-night);
  background: var(--pando-navy);
}

#landing-map-sub {
  max-width: 34em;
  margin: 1rem 0 0;
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
}

.fork-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 3.25rem 0 0;
  list-style: none;
  background: var(--stitch) top / 100% 4px no-repeat;
}

.fork-list li {
  position: relative;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  color: var(--pando-navy);
  background: var(--pando-ivory);
  border-radius: 14px;
}

/* Each route hangs from the thread on its own stitch. */
.fork-list li::before {
  content: "";
  position: absolute;
  top: -3.25rem;
  left: 2rem;
  width: 4px;
  height: 3.25rem;
  background: repeating-linear-gradient(
    180deg,
    var(--pando-thread) 0 14px,
    transparent 14px 22px
  );
}

.fork-list h3 {
  font-size: 1.45rem;
}

.fork-list p {
  margin: 0.4rem 0 0;
  color: var(--pando-soft-ivory);
}

.fork-caption {
  max-width: 44em;
  margin: 2rem 0 0;
}

/* ---- Trust: never, and show the work (ivory) -------------------------- */

.landing-trust-pair {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: var(--section) var(--gutter);
  color: var(--pando-navy);
  background: var(--pando-ivory);
  --focus: var(--pando-navy);
}

.never-card > p,
.sourced-card > p {
  max-width: 34em;
  margin: 1rem 0 0;
  font-size: 1.125rem;
}

.never-card ul {
  margin: 1.75rem 0;
  padding: 1.25rem 0 0;
  list-style: none;
  background: var(--stitch-navy) top / 100% 4px no-repeat;
}

.never-card li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.75rem;
  font-weight: 700;
}

/* A navy cross, drawn: "never" items are refusals, not features. */
.never-card li::before,
.never-card li::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 0.15rem;
  width: 0.9rem;
  height: 3px;
  background: var(--pando-navy);
  border-radius: 2px;
  rotate: 45deg;
}

.never-card li::after {
  rotate: -45deg;
}

/* contrast: pando-source-card #073C56 on #FFFFFF */
.source-example {
  margin-top: 1.75rem;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  color: var(--pando-navy);
  background: #fff;
  border-radius: 14px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.status-pill {
  padding: 0.18rem 0.7rem;
  border: 2px solid var(--pando-navy);
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 700;
}

.source-example h3 {
  margin-top: 1rem;
  font-size: 1.45rem;
}

.source-example p {
  margin: 0.5rem 0 0;
}

/* contrast: pando-soft-on-white #2B556B on #FFFFFF */
.source-meta {
  padding-top: 0.9rem;
  color: var(--pando-soft-ivory);
  background: var(--stitch-navy) top / 100% 2px no-repeat, #fff;
  font-size: 0.95rem;
}

.source-example .source-meta {
  margin-top: 1.1rem;
}

/* ---- Languages (gold) and the closing call (night) -------------------- */

.languages-band {
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
  color: var(--pando-navy);
  background: var(--pando-gold);
  --focus: var(--pando-navy);
}

.language-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.language-pills li {
  padding: 0.7rem 1.4rem;
  color: var(--pando-ivory);
  background: var(--pando-navy);
  border-radius: var(--r-pill);
  font-size: 1.15rem;
  font-weight: 700;
}

.language-pills .language-next {
  color: var(--pando-navy);
  background: none;
  border: 2px dashed var(--pando-navy);
}

.partner-band {
  padding: var(--section) var(--gutter) clamp(3rem, 6vw, 5rem);
}

.partner-band p {
  max-width: 34em;
  margin: 1.25rem 0 2rem;
  color: var(--pando-soft-night);
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
}

/* contrast: pando-footer #C4D6DD on #04283A */
.landing-footer {
  display: grid;
  gap: 2rem;
  margin-inline: var(--gutter);
  padding: 3rem 0 2.5rem;
  color: var(--pando-soft-night);
  background: var(--stitch) top / 100% 4px no-repeat, var(--pando-night);
  font-size: 0.95rem;
}

.landing-footer .lockup {
  color: var(--pando-ivory);
}

.footer-brand p {
  max-width: 30em;
  margin-top: 1rem;
}

.landing-footer a {
  color: inherit;
  text-underline-offset: 0.3em;
}

.footer-family {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.footer-family img {
  flex: none;
  width: 2.75rem;
  height: auto;
}

/* ---- Sign-in: the door and the form ------------------------------------ */

.sign-in-view {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: 100svh;
}

/* contrast: pando-door-ink #073C56 on #FCF4E3 */
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: min(850px, 100svh);
  color: var(--pando-navy);
  background: var(--pando-door);
}

/* The headline keeps its own band of the painting's ivory wall; the
   painting fills the rest, cropped from the bottom so the door stays whole. */
.door-art {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 85%;
  mask-image: linear-gradient(transparent, #000 2.5rem);
}

.door-story {
  order: -1;
  position: relative;
  z-index: 2;
  padding: clamp(2.25rem, 4.5vw, 4.5rem) clamp(1.75rem, 4.5vw, 4.75rem) 2rem;
}

.door-story h2 {
  font-size: clamp(2.4rem, 3.8vw, 4.25rem);
  line-height: 1.02;
}

.door-story p {
  max-width: 20em;
  margin: 0.8rem 0 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.3rem);
  line-height: 1.35;
}

/* Sunlight through the doorway: one slow drift, paused on request, on
   focus in the form, and absent under reduced motion. */
.door-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(transparent 30%, #000 55%);
}

.door-light span {
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(
    106deg,
    transparent 40%,
    rgb(255 244 207 / 0.34) 47%,
    rgb(255 250 225 / 0.58) 50%,
    transparent 58%
  );
  opacity: 0.7;
}

.door-motion {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  min-height: var(--tap);
  padding: 0.5rem 1rem;
  color: var(--pando-navy);
  background: var(--pando-ivory);
  border: 2px solid var(--pando-navy);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  --focus: var(--pando-navy);
}

@media (prefers-reduced-motion: no-preference) {
  .door-light span {
    animation: door-drift 22s ease-in-out -5s infinite alternate;
  }

  .sign-in-view[data-motion="paused"] .door-light span,
  .sign-in-view:has(input:focus) .door-light span {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .door-light,
  .door-motion {
    display: none;
  }
}

@keyframes door-drift {
  from {
    translate: -14% 0;
    rotate: -3deg;
  }

  to {
    translate: 14% 2%;
    rotate: 3deg;
  }
}

/* contrast: pando-panel #073C56 on #FFFFFF */
.sign-in-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem clamp(1.5rem, 4.5vw, 4.75rem) 2.75rem;
  color: var(--pando-navy);
  background: #fff;
  --focus: var(--pando-navy);
}

.sign-in-card {
  width: 100%;
  max-width: 28.75rem;
}

.sign-in-panel .back-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: inherit;
}

.sign-in-brand {
  display: grid;
  justify-items: center;
  margin-bottom: 1.75rem;
}

.sign-in-product {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(var(--pando-thread), var(--pando-thread))
    bottom / 2.6rem 3px no-repeat;
}

.sign-in-product .pu-mark {
  width: 2.4rem;
  height: 2.4rem;
}

.sign-in-product .pu-mark-arch {
  fill: var(--pando-navy);
}

.sign-in-product .pu-mark-door {
  fill: var(--pando-ivory);
}

.sign-in-family {
  width: 13.5rem;
  height: auto;
  margin-top: 0.75rem;
}

.sign-in-welcome {
  margin-bottom: 1.75rem;
  text-align: center;
}

.sign-in-welcome h1 {
  font-size: clamp(2.4rem, 3.4vw, 3.25rem);
  line-height: 1.08;
}

/* contrast: pando-panel-soft #2B556B on #FFFFFF */
#sign-in-lede,
.sign-in-new,
.sign-in-contact {
  color: var(--pando-soft-ivory);
  background: #fff;
}

#sign-in-lede {
  margin: 0.6rem 0 0;
  font-size: 1.1rem;
}

.sign-in-note:not(:empty) {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--pando-ivory);
  border-radius: 10px;
  font-weight: 700;
}

#sign-in-form {
  display: grid;
  gap: 0.5rem;
}

#sign-in-form label {
  font-weight: 700;
}

#sign-in-form input {
  min-height: 3.25rem;
  padding: 0.7rem 0.85rem;
  color: var(--pando-navy);
  background: var(--pando-field);
  border: 2px solid var(--pando-navy);
  border-radius: 10px;
  font: inherit;
  font-size: 1.0625rem;
  caret-color: #f0832b;
}

#sign-in-form input::placeholder {
  color: var(--pando-soft-ivory);
  opacity: 1;
}

#sign-in-form button {
  width: 100%;
  margin-top: 1rem;
}

.sign-in-new {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  background: var(--stitch-navy) top / 100% 3px no-repeat, #fff;
}

.sign-in-contact {
  margin: 0.75rem 0 0;
}

.sign-in-contact strong,
.sign-in-contact a {
  color: var(--pando-navy);
  font-weight: 700;
}

/* ---- Motion: the grove rises once, the chosen tree answers -------------- */

@media (prefers-reduced-motion: no-preference) {
  .grove-rise {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: grove-rise 0.9s var(--ease-settle) backwards;
  }

  .grove-tree:nth-of-type(1) .grove-rise {
    animation-delay: 0.15s;
  }
  .grove-tree:nth-of-type(2) .grove-rise {
    animation-delay: 0.24s;
  }
  .grove-tree:nth-of-type(3) .grove-rise {
    animation-delay: 0.33s;
  }
  .grove-tree:nth-of-type(4) .grove-rise {
    animation-delay: 0.42s;
  }
  .grove-tree:nth-of-type(5) .grove-rise {
    animation-delay: 0.51s;
  }
  .grove-tree:nth-of-type(6) .grove-rise {
    animation-delay: 0.6s;
  }
  .grove-tree:nth-of-type(7) .grove-rise {
    animation-delay: 0.69s;
  }
  .grove-tree:nth-of-type(8) .grove-rise {
    animation-delay: 0.78s;
  }
  .grove-tree:nth-of-type(9) .grove-rise {
    animation-delay: 0.87s;
  }
  .grove-tree:nth-of-type(10) .grove-rise {
    animation-delay: 0.96s;
  }
  .grove-tree:nth-of-type(11) .grove-rise {
    animation-delay: 1.05s;
  }
  .grove-tree:nth-of-type(12) .grove-rise {
    animation-delay: 1.14s;
  }
  .grove-tree:nth-of-type(13) .grove-rise {
    animation-delay: 1.23s;
  }
  .grove-tree:nth-of-type(14) .grove-rise {
    animation-delay: 1.32s;
  }
  .grove-tree:nth-of-type(15) .grove-rise {
    animation-delay: 1.41s;
  }

  .grove-sway {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: scale 0.45s var(--ease-settle);
  }

  .grove-tree.is-on .grove-sway {
    scale: 1.08;
  }

  .grove-tree.is-on .grove-leaf {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: grove-rustle 0.5s ease-in-out 3 alternate;
  }

  .grove-topics li {
    animation: grove-topic 0.4s var(--ease-settle) backwards;
  }

  .grove-topics li:nth-child(2) {
    animation-delay: 0.05s;
  }
  .grove-topics li:nth-child(3) {
    animation-delay: 0.1s;
  }
  .grove-topics li:nth-child(4) {
    animation-delay: 0.15s;
  }
  .grove-topics li:nth-child(5) {
    animation-delay: 0.2s;
  }
  .grove-topics li:nth-child(6) {
    animation-delay: 0.25s;
  }
}

@keyframes grove-rise {
  from {
    scale: 1 0;
  }
}

@keyframes grove-rustle {
  to {
    rotate: 14deg;
  }
}

@keyframes grove-topic {
  from {
    opacity: 0;
    translate: 0 0.4rem;
  }
}

/* ---- Narrow screens ---------------------------------------------------- */

@media (max-width: 1100px) {
  .landing-nav {
    display: none;
  }

  .site-header .language-pill {
    margin-inline-start: auto;
  }
}

@media (max-width: 900px) {
  .landing-hero,
  .landing-verbs,
  .landing-trust-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-hero {
    min-height: 0;
    padding-right: var(--gutter);
  }

  .landing-hero-copy {
    padding-block-end: 0;
  }

  .grove {
    margin-inline: calc(var(--gutter) * -1);
  }

  .grove-card {
    position: relative;
    inset: auto;
    z-index: 1;
    width: auto;
    margin: -2rem var(--gutter) 0;
  }

  /* Grade pills are too small to tap here (the select is the control);
     only the chosen grade keeps its pill so the card still points at it. */
  .grove-tree:not(.is-on) .grove-label {
    display: none;
  }

  .grove-tree.is-on .grove-label {
    scale: 1.6;
  }

  .verbs-lede {
    position: static;
  }

  .fork-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sign-in-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .sign-in-panel {
    order: -1;
  }

  .door {
    min-height: 0;
  }

  .door-story {
    padding-bottom: 0.5rem;
  }

  /* The painting's calm top quarter was for the desktop headline; here the
     headline has its own band, so crop that quarter away. */
  .door-art {
    flex: none;
    height: auto;
    aspect-ratio: 1122 / 1060;
    object-position: 50% 100%;
  }

  .sign-in-product {
    font-size: 1.75rem;
  }

  .sign-in-panel {
    padding-top: 3.5rem;
  }
}

@media (max-width: 560px) {
  #landing-get-started-nav {
    display: none;
  }

  .lockup-text {
    font-size: 1.1rem;
  }
}

/* ---- Language: the first step, on the landing's night ground --------- */

body[data-route="language"] {
  background: var(--pando-night);
}

/* contrast: pando-language #FFF8E8 on #04283A */
.language-view {
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--pando-ivory);
  background: var(--pando-night);
}

.language-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem var(--gutter) 0 calc(var(--gutter) - 0.6rem);
}

.language-top .back-link {
  color: inherit;
}

.language-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 7vh, 5rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
}

.language-view h1 {
  max-width: 8em;
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 1.03;
}

/* contrast: pando-language-soft #C4D6DD on #04283A */
.language-sub,
.language-changeable,
.language-hint {
  color: var(--pando-soft-night);
  background: var(--pando-night);
}

.language-sub {
  max-width: 22em;
  margin: 1.4rem 0 0;
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.45;
}

.language-changeable {
  margin: 2rem 0 0;
  padding-top: 1.4rem;
  background: var(--stitch) top left / 6rem 4px no-repeat, var(--pando-night);
  font-weight: 700;
}

.language-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* Pills: solid outline here now, dashed outline not yet, gold fill chosen. */
.language-options button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  column-gap: 0.75rem;
  min-height: 4.75rem;
  padding: 0.75rem 1.25rem 0.75rem 1.6rem;
  color: var(--pando-ivory);
  background: transparent;
  border: 2px solid var(--pando-soft-night);
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  text-align: left;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.language-options strong {
  justify-self: start;
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.2;
}

.language-options span {
  grid-column: 1;
  color: var(--pando-soft-night);
  font-size: 0.9rem;
}

.language-options button:not(:disabled):hover {
  border-color: var(--pando-gold);
}

/* contrast: pando-language-chosen #04283A on #FFC727 */
/* contrast: pando-language-chosen-sub #073C56 on #FFC727 */
.language-options button[aria-pressed="true"] {
  color: var(--pando-night);
  background: var(--pando-gold);
  border-color: var(--pando-gold);
}

.language-options button[aria-pressed="true"] span {
  color: var(--pando-navy);
}

.lang-check {
  display: none;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.75rem;
  height: 1.75rem;
}

.lang-check circle {
  fill: var(--pando-night);
}

.lang-check path {
  stroke: var(--pando-gold);
}

.language-options button[aria-pressed="true"] .lang-check {
  display: block;
}

.language-options button:disabled {
  color: var(--pando-soft-night);
  background: transparent;
  border-style: dashed;
}

.language-hint {
  margin: 1rem 0 0 1.6rem;
  font-size: 0.9rem;
}

#language-save-status {
  margin: 0;
}

#language-save-status:not(:empty) {
  margin-bottom: 1rem;
}

#language-continue {
  margin-top: 2rem;
  min-width: 14rem;
}

.language-hill {
  display: block;
  width: 100%;
  height: clamp(4rem, 11vw, 9rem);
}

@media (prefers-reduced-motion: no-preference) {
  .language-options button[aria-pressed="true"] .lang-check {
    animation: lang-check-in 0.35s var(--ease-settle);
  }

  @keyframes lang-check-in {
    from {
      scale: 0.4;
    }
  }
}

@media (max-width: 900px) {
  .language-body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
    padding-top: 1.5rem;
  }

  .language-view h1 {
    max-width: none;
  }

  .language-changeable {
    margin-top: 1.5rem;
  }
}

@media (max-width: 560px) {
  .language-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .language-options button {
    min-height: 3.5rem;
    padding-block: 0.55rem;
  }

  .language-body {
    gap: 1.5rem;
    padding-top: 1rem;
  }

  #language-continue {
    width: 100%;
  }
}