/* ============================================================
   THE NORDIN LAYER: the site's own shell, in the brand.

   Loaded AFTER app.css, by the pages that belong to the family rather than
   to a trip: the front door and /account/. Those pages are what a new person
   sees first and what everyone comes back to, so they wear the kit.

   The trip pages deliberately do NOT load this. app.css is shared by twelve
   pages, and the six Christmas pages keep their own Lake-Burton-at-night
   skin through the season. A trip is allowed to look like itself.

     Ground: Night Camp #101418, the kit's moodier dark.
     Type:   Zilla Slab, which echoes the beveled slab N, over Lexend.

   Source: Nordin-Brand-Kit/04_web/nordin-tokens.css and nordin-type.css.
   Load order matters: app.css, then this.
   ============================================================ */

/* Served from this origin, from the kit's own files. The weights are the ones
   these pages actually set: 400 body, 500 the who's-here pill, 600 buttons and
   headings, and Zilla 600 for headings, trip names and card titles. */
@font-face{ font-family:'Zilla Slab'; font-weight:600; font-display:swap;
  src:url('/assets/fonts/zilla-slab-600.woff2') format('woff2'); }
@font-face{ font-family:'Lexend'; font-weight:400; font-display:swap;
  src:url('/assets/fonts/lexend-400.woff2') format('woff2'); }
@font-face{ font-family:'Lexend'; font-weight:500; font-display:swap;
  src:url('/assets/fonts/lexend-500.woff2') format('woff2'); }
@font-face{ font-family:'Lexend'; font-weight:600; font-display:swap;
  src:url('/assets/fonts/lexend-600.woff2') format('woff2'); }

/* Token names are app.css's, so most of its rules re-point without being
   rewritten. Only the values move. Everything below this block exists because
   app.css hardcodes a colour there instead of reaching for a token. */
:root{
  --navy:#101418;        /* Night Camp */
  --navy-deep:#0A0D10;   /* a step under the ground: inputs and wells */
  --navy-soft:#26282e;   /* kit surface: cards, trip rows, dialogs */
  --spruce:#234739;      /* kit pine */
  --amber:#cfa963;       /* kit link gold, 7.4:1 on this ground */
  --amber-dim:#c2a262;   /* kit accent, the button ground */
  --cream:#f2edda;       /* kit cream, 15.8:1 */
  --slate:#bfc4ae;       /* kit muted ink */
  --line:rgba(191,196,174,0.20);
  --edge:rgba(191,196,174,0.10);
  --ok:#7fc296;
  --danger:#e08573;
  /* --tag-red is left at app.css's #A83E34: it is a measured decision
     (5.2:1 on cream at 10px) and the kit has nothing to replace it with. */

  /* The Home and Admin pills (homepill.js, adminfab.js). Their defaults are
     the Christmas pages' green-black and old amber, which read as a green
     patch on this charcoal. Night Camp under the kit gold instead: darker
     than the cards they float over, so they still stand off them. */
  --pill-bg:rgba(16,20,24,0.94);
  --pill-ink:#f2edda;
  --pill-edge:rgba(207,169,99,0.55);
  --pill-edge-hover:#cfa963;
  --pill-badge-bg:#cfa963;
  --pill-badge-ink:#101418;
}

/* The ground is flat Night Camp. It used to keep app.css's depth, a gold haze
   overhead and pine pooling at the foot; Chris compared the three side by
   side and asked for neither (2026-09-27), so the token is now `none`.

   Kept as a token so a glow can come back in one place. (The top bar used to
   paint it too, to hide its seam while it stuck to the top; it no longer
   sticks, so the body is its only user.) */
:root{
  --page-glow: none;
}
body{
  background-image:var(--page-glow);
  background-color:var(--navy);
  background-attachment:fixed;
  font-family:'Lexend','Segoe UI',system-ui,sans-serif;
}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:'Zilla Slab','Rockwell','Roboto Slab',serif;
  font-weight:600; letter-spacing:.01em;
}

/* The kit has no monospace at all, so the mono eyebrow becomes the kit's own
   motto treatment: Lexend 600, widely letterspaced, uppercase. */
.eyebrow{
  font-family:'Lexend','Segoe UI',system-ui,sans-serif;
  font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  font-size:0.75rem; color:var(--amber);
}
.who-online .who-pill,
.tag, .corner-tag, .tag-pill{ font-family:'Lexend','Segoe UI',system-ui,sans-serif; }

/* Numbers that line up in a column need tabular figures, and Lexend has none
   (the kit verified this in the font's GSUB). Zilla Slab carries them. */
.numeric, .stat, td.num{
  font-family:'Zilla Slab','Rockwell','Roboto Slab',serif;
  font-weight:600; font-feature-settings:'tnum' 1,'lnum' 1;
}

/* ---------- surfaces ----------
   Every one of these is here because app.css paints it with a literal
   rgba(14,35,33,...) rather than a token, so re-pointing --navy-soft alone
   would leave them the old spruce. */
.card{
  background:
    linear-gradient(180deg, rgba(242,237,218,0.05), rgba(242,237,218,0) 62%),
    var(--navy-soft);
  border-color:var(--line);
  border-top-color:var(--edge);
}
.card.needs-you{
  border-top-color:var(--amber-dim);
  background:
    linear-gradient(180deg, rgba(207,169,99,0.09), rgba(207,169,99,0) 62%),
    var(--navy-soft);
}
.lead-pane{
  border-color:rgba(194,162,98,0.42);
  border-top-color:rgba(216,187,125,0.55);
  background:
    linear-gradient(180deg, rgba(207,169,99,0.10), rgba(207,169,99,0) 65%),
    var(--navy-soft);
}
.notice{ border-left-color:var(--amber); background:rgba(207,169,99,0.09); }
.notice.bad{ border-left-color:var(--danger); background:rgba(224,133,115,0.10); }
.notice.good{ border-left-color:var(--ok); background:rgba(127,194,150,0.10); }
.toast, dialog.confirm, .who-online .who-list{ background:var(--navy-soft); }
.tag{ background:rgba(191,196,174,0.14); }
.tag-pending{ background:rgba(207,169,99,0.18); color:var(--amber); }
.tag-you{ background:rgba(127,194,150,0.18); color:var(--ok); }

/* ---------- controls ----------
   The gold is pinned to the PRIMARY button by excluding the variants in the
   selector rather than by restating each property afterwards. This file sits
   after app.css, so a bare .btn{...} here outranks app.css's own
   .btn-quiet{...} at equal specificity and silently repaints it. That went
   wrong twice while building the door: first the quiet buttons took the dark
   button ink and became invisible, then, after only the colour was restated,
   Sign out kept a gold ledge from the box-shadow. Excluding the variants ends
   the class of bug instead of the two instances of it. */
.btn:not(.btn-quiet):not(.btn-danger):not(.btn-nudge){
  background:linear-gradient(180deg,#d8bb7d,#c2a262);
  color:var(--navy);
  box-shadow:0 3px 0 #7a6132, 0 6px 12px rgba(0,0,0,0.32);
}
.btn:not(.btn-quiet):not(.btn-danger):not(.btn-nudge):hover{
  background:linear-gradient(180deg,#e2c88d,#cfa963);
}
.btn:not(.btn-quiet):not(.btn-danger):not(.btn-nudge):active{
  box-shadow:0 1px 0 #7a6132, 0 3px 6px rgba(0,0,0,0.32);
}
/* The quiet and danger buttons keep app.css's own depth and move only hues. */
.btn-quiet{
  background:linear-gradient(180deg,rgba(242,237,218,0.07),rgba(242,237,218,0) 60%),
             var(--navy-soft);
  border-color:var(--line);
  color:var(--cream);
}
.btn-quiet:hover{
  background:linear-gradient(180deg,rgba(242,237,218,0.13),rgba(242,237,218,0.02) 60%),
             var(--navy-soft);
}
.btn-danger{
  background:linear-gradient(180deg,rgba(224,133,115,0.10),rgba(224,133,115,0) 60%),
             var(--navy-soft);
  border-color:rgba(224,133,115,0.45);
  color:var(--danger);
}
.btn-danger:hover{
  background:linear-gradient(180deg,rgba(224,133,115,0.18),rgba(224,133,115,0.04) 60%),
             var(--navy-soft);
}
.btn-nudge{ border-color:rgba(194,162,98,0.55); color:#d8bb7d; }

/* The placeholder was a teal tint picked for the water ground. */
input::placeholder{ color:rgba(191,196,174,0.50); }
.check input{ accent-color:var(--amber); }
.check.on{
  border-color:var(--amber);
  background:linear-gradient(180deg,rgba(207,169,99,0.14),rgba(207,169,99,0.04));
  box-shadow:inset 0 1px 0 rgba(242,237,218,0.12), 0 1.5px 0 rgba(0,0,0,0.35);
}
/* The date glyph ships black; the old filter tinted it toward the spruce. */
input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(82%) sepia(16%) saturate(320%) hue-rotate(8deg);
}

/* ---------- the top bar carries the mark, not the name in type ----------
   Kit rule: the mark serves as the N in the name. The full fused lockup is
   113px wide and the bar has 87px before the buttons overflow 390px, so the
   bar takes the mark alone.
   mark-cream is the kit's one-colour cut. The kit's rule is to use the
   simplified small cut below 64px, and the reason is that beveled detail
   turns to mush at small sizes, but that cut is charcoal-inked and vanishes
   on this ground, and every dark-ground colourway is tone-on-tone and reads
   as a grey smudge at 26px. All were rendered at true size before this was
   chosen. The one-colour mark has no bevel to lose, so it stays crisp and
   honours what the size rule is actually protecting. */
.topbar .brand{ display:flex; align-items:center; line-height:0; flex:none; }
.topbar .brand img{ height:26px; width:26px; display:block; }

/* The bar runs to the edges of the phone and scrolls away with the page, like
   Beach Week's and the Christmas pages'. app.css leaves .topbar static inside
   the body's 22px top and 18px side padding, so its border-bottom had
   background above AND below it and stopped short of both edges. The negative
   margins pull it back out over that padding, and the border goes.

   It used to stick to the top, copied from the golf page, and most of what was
   written here was about hiding the seam a sticky bar made against the glowing
   page. Chris dropped both (2026-09-27): the ground is flat, and the Home and
   Admin pills already stay put at the foot of the screen, so the bar gives its
   height back to the recipes. With nothing behind it but the flat ground it
   needs no background of its own. HERE AND NOT app.css ON PURPOSE: .topbar is
   shared with the six Christmas pages, which never load this file. */
.topbar{
  margin:-22px -18px 22px;
  padding:10px 18px;
  border-bottom:none;
}

/* ---------- trip cards ----------
   The biggest thing on the signed-in home that you are meant to press, and
   the one flat surface left on a stylesheet that tiers depth by importance.
   They take the full ledge: a hard edge with no blur to read as thickness, a
   soft shadow to lift it off the ground, and light caught on the top edge.
   The chevron is the other half. A ledge says a thing can be pressed; it
   cannot say the press goes somewhere, and these are navigation. Two borders
   rather than a glyph, so no icon font and no extra request.
   The sink is a transform on :active, not a transition, so it survives
   prefers-reduced-motion. Press feedback is not decoration, and a phone has
   no hover to fall back on. */
.trip{
  background:
    linear-gradient(180deg, rgba(242,237,218,0.055), rgba(242,237,218,0) 58%),
    var(--navy-soft);
  border-color:rgba(191,196,174,0.20);
  border-top-color:rgba(191,196,174,0.34);
  box-shadow:0 4px 0 #14161a, 0 9px 18px rgba(0,0,0,0.42);
  position:relative;
  padding-right:44px;   /* keeps the meta line clear of the chevron */
}
.trip::after{
  content:""; position:absolute; right:19px; top:50%;
  width:9px; height:9px; margin-top:-5px;
  border-right:2px solid var(--amber);
  border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);
}
.trip:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 #14161a, 0 4px 9px rgba(0,0,0,0.42);
}
.trip .name{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; }