/* ============================================================================
   THE MALL SHELL — masthead, navigation, footer, buttons.

   PROVENANCE. `tokens.css` beside this file is a VERBATIM copy of
   `mallsite/public/css/tokens.css`, and the rules below are lifted from the
   matching blocks of `mallsite/public/css/app.css`. They are copied rather than
   fetched because the Checker must stay independently deployable: a tool a
   creator opens before an upload cannot go unstyled because the main Mall is
   down. Refresh by copying again, not by editing here — an edit here is a
   silent fork.

   The Checker is dark-only, like the Mall. The old stylesheet carried a
   light-scheme override whose status colours had to be re-tuned to stay
   readable; the Mall sets `color-scheme: dark` and one scheme is one set of
   measurements.
   ============================================================================ */

/* --------------------------------------------------------------- shell -- */

.skip {
  position: absolute;
  left: var(--space-3);
  top: calc(-1 * var(--space-10));
  z-index: 50;
  padding: var(--space-3) var(--space-5);
  background: var(--gold);
  color: var(--fg-on-gold);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.skip:focus { top: 0; }

/* One focus treatment, everywhere, and it is never removed. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- header -- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface-0) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.masthead-in {
  width: 100%;
  max-width: var(--page-wide);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg);
  text-decoration: none;
  min-width: 0;
}
.brand img { flex: none; border-radius: 50%; width: 44px; height: 44px; }

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-name {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-sign);
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.brand-sub {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* The strip scrolls on a phone, and a scrolling strip with a hard edge looks
   like a strip that ends, so the last few pixels fade. Five items fit from
   700px up, so the mask is switched off there rather than fading a tab for no
   reason. */
.nav {
  min-width: 0;
  justify-self: end;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
@media (min-width: 700px) {
  .nav { -webkit-mask-image: none; mask-image: none; }
}
.nav ul {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.nav a {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--fg); background: var(--surface-1); }
.nav a[aria-current='page'] {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
/* Mall is the one destination that leaves this application, so it is set apart
   by weight rather than by an arrow — the Mall's own header makes the same
   argument in reverse for its Checker tab. */
.nav a.nav-out { color: var(--gold); }
.nav a.nav-out:hover { color: var(--gold-bright); }

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

.page-head {
  width: 100%;
  max-width: var(--page-wide);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-4);
}
.page-head h1 {
  font-size: var(--text-xl);
  margin: 0;
}
.page-head .tag {
  margin: var(--space-2) 0 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.page-head .tag .runtime {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* The section marker the Mall uses above every section title. */
.sec-marker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-sign);
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 var(--space-2);
}
.sec-marker::before { content: '> '; opacity: 0.7; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--lime); color: var(--fg-on-lime); font-weight: 700; }
.btn-primary:hover { background: color-mix(in srgb, var(--lime) 84%, white); color: var(--fg-on-lime); }
.btn-primary:focus-visible { box-shadow: var(--focus-ring-on-light); }
.btn-ghost { border-color: var(--border-strong); color: var(--fg); background: color-mix(in srgb, var(--surface-0) 60%, transparent); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

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

.site-foot {
  margin-top: var(--space-7);
  background: var(--surface-sunk);
  border-top: 1px solid var(--border);
  padding-block: var(--space-6);
}
.foot-in {
  width: 100%;
  max-width: var(--page-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-7);
}
.foot-col > * { min-width: 0; }
.foot-col h2 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-sign);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-4);
}
.foot-col p { font-size: var(--text-sm); color: var(--fg-muted); margin: 0 0 var(--space-3); }
.foot-col p:last-child { margin-bottom: 0; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.foot-col a { font-size: var(--text-sm); min-height: 32px; display: inline-flex; align-items: center; }

@media (max-width: 860px) {
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 700px) {
  /* The brand and the nav stop fitting on one row well before the tabs
     themselves stop fitting, so the nav takes its own full-width row. */
  .masthead-in { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .nav { justify-self: stretch; }
  .masthead-in, .page-head, .foot-in { padding-inline: var(--space-4); }
}

/* ---------------------------------------------------------- foot strip -- */

/*
 * /item and /material are viewport-height flex columns with page scrolling
 * switched off, so the three-column .site-foot cannot go on them -- it would
 * either be pushed out of existence or force back the scrolling the layout
 * exists to remove. This is the same credit in one line, inside the column, so
 * every page in the Checker carries it at every size.
 */
.foot-strip {
  flex: none;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface-sunk);
  color: var(--fg-muted);
  font-size: var(--text-xs);
}
@media (max-width: 700px) { .foot-strip { padding-inline: var(--space-4); } }