/* The site shell: masthead, navigation, page frame, cards, footer.
   Colours come from brand.css and are never redeclared here. */

/* ---- masthead ---- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem var(--gutter);
  background: var(--card);
  border-bottom: 1px solid var(--edge);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.brand-mark { display: block; height: 3.5rem; width: auto; }

.brand-words { display: flex; flex-direction: column; line-height: 1.15; }

.brand-name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy-ink);
}

.brand-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

/* Wrapping is not cosmetic here: at five sections the bar is 406px, which
   overflows a 390px phone and takes the whole page with it. */
.nav { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* min-height rather than more padding: these came out at 39.5px, which the
   layout diagnostic flags and a child's finger notices. 2.75rem clears 44px at
   the default text size, and the flex centring keeps the label where it was. */
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  color: var(--ink-soft);
}

.nav a:hover { background: var(--navy-wash); color: var(--navy-ink); }

.nav a.here {
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: inset 0 -3px 0 var(--gold-bright);
}

/* The appearance control. Sits with the navigation, sized to the same 44px
   floor as everything else in the masthead. It cycles rather than opening a
   menu, so it is one tap target instead of three. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--navy-ink);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.theme-toggle:hover { border-color: var(--gold); }

/* ---- page frame ---- */

.page {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 3rem;
}

.page-head { margin-bottom: 2rem; }

.page-head h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--navy-ink);
}

.page-head .strap {
  margin: 0.4rem 0 0;
  max-width: var(--measure);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.page h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.25rem;
  color: var(--navy-ink);
}

.page h2:first-child { margin-top: 0; }

.page p { max-width: var(--measure); }

/* ---- the two doors on the home page ---- */

.doors {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.door {
  display: block;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--lift);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}

.door:hover { transform: translateY(-3px); box-shadow: var(--lift-hover); }

.door h2 { margin: 0 0 0.4rem; font-size: 1.5rem; color: var(--navy-ink); }
.door p { margin: 0; color: var(--ink-soft); }

.door .door-tag {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--gold-wash);
  color: var(--gold-ink);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* ---- activity cards ---- */

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lift);
}

a.card:hover { border-color: var(--gold); box-shadow: var(--lift-hover); }

.card h3 { margin: 0; font-size: 1.15rem; color: var(--navy-ink); }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: none; }

.card.soon {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.card.soon h3 { color: var(--ink-soft); }

.tag {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.tag.ready { background: var(--navy-wash); color: var(--navy-ink); }
.tag.soon { background: var(--gold-wash); color: var(--gold-ink); }

/* ---- level chooser ---- */

.levels { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }

.level {
  min-width: 3.4rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--edge);
  border-radius: var(--radius);
  background: var(--card);
  font: inherit;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}

.level:hover { border-color: var(--gold); }

.level.here {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}

/* ---- notes and tables ---- */

.gate {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  border-left: 5px solid var(--gold);
  background: var(--gold-wash);
}

.gate h3 { margin: 0 0 0.4rem; color: var(--navy-ink); }
.gate p { margin: 0; }

.principle {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  border-left: 5px solid var(--navy);
  background: var(--navy-wash);
}

.principle p:first-child { margin-top: 0; }
.principle p:last-child { margin-bottom: 0; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0;
  font-size: 0.95rem;
}

table.grid th,
table.grid td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--edge);
}

table.grid th {
  background: var(--navy-wash);
  color: var(--navy-ink);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

table.grid td.level-cell { font-weight: 700; color: var(--navy-ink); white-space: nowrap; }

.cite {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--gold-ink);
}

.scroller { overflow-x: auto; }

/* ---- footer ---- */

.footer {
  border-top: 1px solid var(--edge);
  background: var(--card);
  padding: 1.5rem var(--gutter);
}

.colophon {
  max-width: 60rem;
  margin: 0 auto;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}

.colophon .quiet { display: block; margin-top: 0.2rem; color: var(--navy-soft); }

/* ---- home page hero ---- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
}

.hero-mark {
  flex: 0 0 auto;
  width: clamp(6rem, 18vw, 10.5rem);
  height: auto;
  filter: drop-shadow(0 10px 24px rgb(42 42 107 / 0.18));
}

.hero-words { flex: 1 1 20rem; }

.hero-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
}

.hero-words h1 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--navy-ink);
}

.hero-rule {
  width: 4.5rem;
  height: 4px;
  margin: 1rem 0;
  border: 0;
  border-radius: 2px;
  background: var(--gold);
}

.hero-words .strap {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  color: var(--ink-soft);
}

/* ---- the navy band ---- */

.band {
  background: var(--band-bg);
  color: var(--on-navy);
  padding: clamp(2rem, 6vw, 3.25rem) var(--gutter);
}

.band-inner { max-width: 60rem; margin: 0 auto; }

.band h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  color: var(--gold-bright);
  letter-spacing: -0.01em;
}

.band p {
  max-width: var(--measure);
  color: var(--on-navy-dim);
}

.band p:last-child { margin-bottom: 0; }
.band strong { color: var(--on-navy); }

/* A link in the band sits on the navy fill, so it cannot take the page's
   ordinary navy link colour — that would be navy on navy. Gold-bright is the
   band's own accent and is what the band heading already uses. */
.band-inner a { color: var(--gold-bright); }
.band-inner a:hover { color: var(--gold); }

/* ---- about page ---- */

.dedication {
  max-width: 40rem;
  margin: 0 0 2.5rem;
  padding: 1.75rem 1.9rem;
  border: 1px solid var(--edge);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--lift);
  text-align: center;
}

.dedication .to,
.gratitude .to {
  margin: 0 0 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
}

.dedication h2 {
  margin: 0 0 0.5rem;
  font-size: 1.7rem;
  color: var(--navy-ink);
  letter-spacing: -0.02em;
}

.dedication p { margin: 0 auto; max-width: 30rem; color: var(--ink-soft); }
.dedication .line { margin-top: 0.85rem; }

.pending {
  margin: 1.25rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  background: var(--gold-wash);
  color: var(--gold-ink);
  font-size: 0.85rem;
  text-align: left;
}

.credits { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

.credit {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--card);
}

.credit h3 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--navy-ink); }
.credit p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); max-width: none; }

.dedication .signed {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy-ink);
}

/* In-gratitude note. Quieter than the dedication above it — a smaller card,
   left-aligned, no gold rule — so the page has one dedication and one
   acknowledgement rather than two competing ones. */

.gratitude {
  max-width: 34rem;
  margin: 0 0 2.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--edge);
  border-left: 4px solid var(--navy-soft);
  border-radius: var(--radius);
  background: var(--card);
}

.gratitude h3 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--navy-ink); }
.gratitude p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.gratitude .signed { margin-top: 0.7rem; font-size: 0.85rem; font-weight: 600; color: var(--navy-ink); }

.gratitude .to { margin-bottom: 0.15rem; }

/* Stub pages — shown where an activity is declared but not yet built, and in
   the asset folders so a directory listing is never what a visitor meets. */
.stub {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.stub .tag { margin: 0; }

.stub-level { margin: 0; color: var(--ink-soft); }

.stub-basis {
  margin: 0 0 0.5rem;
  padding: 0.9rem 1.1rem;
  max-width: var(--measure);
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.stub-cite { margin: 0 0 2rem; font-size: 0.9rem; color: var(--ink-soft); }

/* Padded to a finger-sized target: the diagnostic flags anything under 40px,
   and this is the only link on a stub page. */
.stub-back {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  color: var(--navy-ink);
  text-decoration: none;
  background: var(--card);
}

.stub-back:hover { border-color: var(--gold); }

/* A quiet aside — used where a page has to say what it is not doing, which on
   this project is often. Not a warning; it is never red. */
.note-quiet {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* The install offer. Chrome puts installation behind a small icon at the end
   of the address bar, which is missable even by someone who built the site —
   so the page asks plainly instead. Hidden entirely unless the browser has
   actually offered, or unless it is iOS, where there is no API and the only
   honest thing is to say where the control is. */
.install {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--navy-wash);
  border-radius: var(--radius-lg);
}

.install-button {
  padding: 0.85rem 1.5rem;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--on-navy);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  cursor: pointer;
}

.install-button:hover:not(:disabled) { background: var(--navy-deep); border-color: var(--navy-deep); }

.install-button:disabled { background: var(--navy-soft); border-color: var(--navy-soft); cursor: default; }

.install-note { margin: 0.6rem 0 0 !important; color: var(--navy-ink); font-size: 0.95rem; }

.install.install-note { margin-top: 2rem; color: var(--navy-ink); }

.install-link { margin-top: 1.25rem; color: var(--ink-soft); }

/* Vertical padding rather than display:inline-block. Padding on an inline
   element enlarges the tap box without stopping the text wrapping, which
   inline-block would — and these two links are long enough to need to wrap on
   a narrow phone. */
.install-link a,
.band-inner a,
.why-link a,
.colophon a {
  padding: 0.8rem 0;
}

/* .band-inner is deliberately absent here — a link on the navy band takes gold
   further up this file, and listing it again below would win on source order
   and paint navy text on a navy band. */
.install-link a,
.why-link a,
.colophon a {
  color: var(--navy-ink);
}

.install-link a { font-weight: 700; }

/* ---- who is playing ----

   A shared device keeps one child's level and stars apart from the next
   child's, and it does that by picture rather than by name. There is
   deliberately no text field here: a class list of children's names would be
   personal data about minors sitting on a device that gets shared, lost and
   handed on, and this app holds none. See js/profiles.js.

   The tiles are sized for a young finger rather than for the layout — 5.5rem
   is 88px, twice the 44px floor, because the picture is the thing being aimed
   at and it is the first control a child meets. */

.who {
  margin-bottom: 1.75rem;
  padding: 1rem 1.1rem 0.85rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.who-head {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--navy-ink);
}

.who-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
}

.who-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-height: 5.5rem;
  padding: 0.6rem 0.35rem;
  border: 2px solid var(--edge);
  border-radius: var(--radius);
  background: var(--card);
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
}

.who-pick:hover { border-color: var(--gold); }

.who-glyph { font-size: 2rem; line-height: 1.1; }

.who-name { font-size: 0.85rem; font-weight: 700; }

/* A picture someone has used before is marked, so a child can find the one
   that is already theirs without opening it to check. */
.who-pick.claimed { border-color: var(--navy-soft); color: var(--navy-ink); }

.who-pick.here {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}

.who-note {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* The one destructive control in the app, so it is styled as a quiet link
   rather than a button — it should be findable and never inviting. */
.who-reset {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--wrong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* ---- the masthead chip ---- */

.who-slot { display: flex; }

.who-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--navy-wash);
  text-decoration: none;
  color: var(--navy-ink);
}

.who-chip:hover { border-color: var(--gold); color: var(--navy-ink); }

.who-chip-glyph { font-size: 1.3rem; line-height: 1; }

.who-chip-name { font-size: 0.9rem; font-weight: 700; }