/* ===========================================================================
   PAGES — Donate, Store, and the founder record on About.
   Loaded after cipher.css, whose tokens and controls it uses.

   These are the only parts of the system that point outward, so they are the
   only parts carrying an accent other than green. They stay inside the same
   grammar as everything else: hairlines, monospace metadata, no cards.
   =========================================================================== */

:root {
  /* Two accents, used nowhere but here and kept close to the ground tone so
     they read as marks on a dark surface rather than as advertising. */
  --crimson:     #e0685f;
  --crimson-2:   #b8433c;
  --crimson-dim: #6d2a26;

  --amber-hot:   #dbb968;
  --amber-2:     #a8842f;
  --amber-dim:   #66501d;
}

/* ------------------------------------------------------- accented tabs */

/* The accent is colour plus a standing hairline. Neutral tabs carry no rule
   until they are selected, so the dashed rule marks these two out even where
   the colour does not read — the size, font and spacing are untouched. */
.navtab-donate,
.navtab-store { position: relative; }

.navtab-donate { color: var(--crimson); }
.navtab-store  { color: var(--amber-hot); }

.navtab-donate::before,
.navtab-store::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 0;
  border-bottom: 1px dashed currentColor;
  opacity: .5;
}

.navtab-donate:hover,
.navtab-donate:focus-visible {
  color: #ef8079;
  text-shadow: 0 0 7px rgba(224, 104, 95, .32);
}
.navtab-store:hover,
.navtab-store:focus-visible {
  color: #e8cd84;
  text-shadow: 0 0 7px rgba(219, 185, 104, .3);
}
.navtab-donate:hover::before,
.navtab-store:hover::before { opacity: 1; }

/* Selected keeps the system's solid rule, in the tab's own accent. */
.navtab-donate[aria-selected="true"],
.navtab-store[aria-selected="true"] { text-shadow: 0 0 8px rgba(0, 0, 0, 0); }
.navtab-donate[aria-selected="true"] { color: #ef8079; }
.navtab-store[aria-selected="true"]  { color: #e8cd84; }
.navtab-donate[aria-selected="true"]::after { background: var(--crimson); }
.navtab-store[aria-selected="true"]::after  { background: var(--amber-hot); }
.navtab-donate[aria-selected="true"]::before,
.navtab-store[aria-selected="true"]::before { opacity: 0; }

.navtab-donate:focus-visible { outline-color: var(--crimson); }
.navtab-store:focus-visible  { outline-color: var(--amber-hot); }

/* ------------------------------------------------------- overflow menu */

/* The menu replaces the scrolling strip at every width: a nav that both
   scrolls and has a MORE button gives you two ways to miss the same tab.

   `min-width: 0` is what makes any of it work. A flex item defaults to
   min-width:auto and so refuses to shrink below its content, which pushed the
   whole header wider than the page instead of letting the strip run short —
   and a strip that never runs short never reports anything to overflow. */
.nav {
  overflow: visible;
  min-width: 0;
  /* The gap between the three groups is a separation, not a tab gap, and does
     not need to be as wide as one. At the old 24px the six workspaces missed
     fitting a 1280px screen by 23px, which put Progressions in the menu on
     essentially every desktop. */
  column-gap: clamp(10px, 1.4vw, 18px);
}

.nav-strip {
  display: flex;
  gap: 0 clamp(10px, 1.6vw, 20px);
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Tabs keep their natural width. Left to shrink, they squash their own labels
   to fit instead of overflowing, so the strip never reports the pressure the
   menu exists to relieve — and every measured width is a lie. */
.nav-strip > .navtab { flex: none; }

.nav-more { position: relative; display: flex; align-items: stretch; }
.nav-more[hidden] { display: none; }

/* Donate and Store sit outside the strip entirely, so the overflow logic can
   never reach them. They are the two outward actions, and an action you cannot
   see is not an action. */
/* No margin and no padding of its own: `.nav` already puts a gap between its
   three groups, and adding a second one here cost 48px — enough to push
   Progressions into the menu on a 1280px screen for no reason. */
.nav-pinned {
  display: flex;
  align-items: stretch;
  flex: none;
  gap: 0 clamp(10px, 1.6vw, 20px);
}

.nav-more-btn { display: flex; align-items: center; gap: 4px; }
.nav-more-btn[aria-expanded="true"] { color: var(--green); }
.nav-more-mark { font-size: 9px; opacity: .7; }
/* A dot on the button when the workspace you are in is hidden inside it. */
.nav-more.has-current .nav-more-mark { color: var(--green); opacity: 1; }
.nav-more.has-current .nav-more-mark::after { content: "\00b7"; }

.nav-more-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 4px 0;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
}
.nav-more-panel[hidden] { display: none; }

/* Inside the menu the tabs become rows; the type stays identical. */
.nav-more-panel .navtab {
  padding: 9px 14px;
  text-align: left;
}
.nav-more-panel .navtab:hover { background: var(--bg-2); }
.nav-more-panel .navtab[aria-selected="true"]::after {
  left: 0; right: auto; top: 0; bottom: 0;
  width: 2px; height: auto;
}
/* In the menu the tabs are rows, and a rule under a row reads as a divider
   rather than as that row's accent. So the same non-colour marker turns on its
   side: a short dashed tick at the leading edge. */
.nav-more-panel .navtab-donate::before,
.nav-more-panel .navtab-store::before {
  left: 5px;
  right: auto;
  top: 10px;
  bottom: 10px;
  height: auto;
  border-bottom: 0;
  border-left: 1px dashed currentColor;
}

/* -------------------------------------------------------------- pages */

/* One measure for the whole page, so the hairlines end where the prose does.
   A rem measure rather than `ch`: these blocks mix mono metadata with sans
   prose, and `ch` would be measured against whichever font the box happens to
   inherit. */
.page { max-width: 34rem; }

.page-title {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.page-act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 22px 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-hair);
}

/* The two outward actions. Same control as every other .act — only the accent
   differs, and the glow is a low-opacity shadow rather than a halo. */
.act-donate {
  color: var(--crimson);
  border-color: var(--crimson-dim);
  box-shadow: 0 0 0 rgba(224, 104, 95, 0);
}
.act-donate:hover:not(:disabled) {
  color: #ef8079;
  border-color: var(--crimson-2);
  box-shadow: 0 0 10px rgba(224, 104, 95, .16);
}
.act-donate:focus-visible { outline-color: var(--crimson); }

.act-store {
  color: var(--amber-hot);
  border-color: var(--amber-dim);
}
.act-store:hover:not(:disabled) {
  color: #e8cd84;
  border-color: var(--amber-2);
  box-shadow: 0 0 10px rgba(219, 185, 104, .15);
}
.act-store:focus-visible { outline-color: var(--amber-hot); }

/* Not yet configured: cipher.css already greys a disabled .act, so all these
   two need is to drop their accent — the reason is given in words beside the
   button, not by the colour going flat. */
.act-donate:disabled,
.act-store:disabled { color: var(--fg-3); border-color: var(--line-hair); box-shadow: none; }

.ext-note {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ------------------------------------------------- metadata + founder */

.meta-list { margin: 16px 0; }

.meta-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-hair);
}
.meta-row dt {
  flex: none;
  width: 11ch;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.meta-row dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--fg);
}
.meta-row dd.is-active { color: var(--green); }

.founder {
  margin: 26px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  max-width: 34rem;
}
.founder-head {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
.founder-name {
  font-family: var(--f-sans);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--fg);
  margin: 6px 0 4px;
}

.meta-status {
  margin-top: 26px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  max-width: 34rem;
}
/* "System status" needs a wider label column than "Born" does — and has to
   out-specify `.meta-row dt`, which would otherwise win on specificity and
   wrap the label onto two lines. */
.meta-status .meta-row dt { width: auto; min-width: 15ch; white-space: nowrap; }

/* --------------------------------------------------------- external links */

.ext {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--green-dim);
}
.ext:hover { border-bottom-color: var(--green); }
.ext-mark { font-size: 9px; margin-left: 4px; vertical-align: 1px; opacity: .8; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  /* Anything that will not fit is in the menu, not off the edge of a
     scrolling strip where nobody finds it. */
  .nav { mask-image: none; }
  /* The panel stays anchored to the button's right edge at every width. MORE
     sits at the end of the strip, so anchoring it left runs it off screen. */
  .nav-more-panel .navtab { min-height: 44px; }
  .meta-row dt { width: 9ch; }

  /* The X and website links are the only things here the shared rule misses. */
  .meta-row dd .ext { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .navtab-donate, .navtab-store, .act-donate, .act-store { transition: none; }
}