/* ============================================================
   Dockside — the look

   ONE FILE, linked from every page. The pre-launch page settled the design
   language; this carries it across the rest of the site without rewriting
   sixty pages by hand.

   Overrides only. Nothing here changes layout — no flex, no grid, no widths,
   no positioning. Radii, tap sizes, type weight and the small-caps labels, and
   that is all. A stylesheet that moves things is a stylesheet that breaks a
   page nobody looked at.

   TO REMOVE: delete the <link> from the pages. Every page still carries its own
   complete styles underneath, so pulling this out returns them exactly as they
   were.

   TOKENS ALREADY DECLARED per page: --harbor --steel --steel-line --haze
   --paint --hivis. Forty-six of the sixty-one pages declare them; the rest are
   print charts and redirects that should not change.
   ============================================================ */

/* ---- cards and panels ----
   6px reads as a web page from 2015; 18px reads as an app. The site was
   running eight different radii, which is what actually made it look
   unfinished — not any one value. */
.card, .panel, .rig, .row, .tot, .hit, .cell, .box, .step, .up,
.linebar, .state, .k-half, .k-third, .story, .next, .on {
  border-radius: 18px;
}

/* ---- controls ----
   10px on anything you press, and a 44px floor for a gloved thumb. */
button, .btn, .act, .mini, .go, .send, .pick, .cta, input, select, textarea {
  border-radius: 10px;
}
button, .btn, .act, .go, .send, .cta {
  min-height: 44px;
}
.mini {
  min-height: 38px;              /* dense admin rows, still tappable */
}

/* ---- small uppercase labels ----
   Mono, 11px, .1em. The single most recognisable thing about the language. */
.lbl, .role, .lab, .nlab, .rig-head, .who, .k, .zonehead, .mark {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- headings ---- */
h1 { font-weight: 900; letter-spacing: -.035em; line-height: 1.05; }
h2 { font-weight: 900; letter-spacing: -.03em; }
h3 { font-weight: 800; letter-spacing: -.02em; }

/* ---- numbers ----
   Anything that is a figure reads in mono. A count, a code, a cabin. */
.big, .num, .zone, .cnt b, .tot b, .code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 700;
}

/* ---- status pills ----
   Tinted at ~15% with full-colour text, the way the pre-launch page does it.
   Amber stays the only accent; green and red are status, never decoration. */
.pill, .badge, .live, .soon {
  border-radius: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 11px;
}
.pill.paid, .pill.live, .live { background: rgba(61,214,140,.14); color: #3DD68C; }
.pill.lapsed, .pill.warn     { background: rgba(242,85,90,.14);  color: #F2555A; }
.pill.soon, .soon            { background: rgba(255,176,32,.16); color: #FFB020; }

/* ---- the one accent ----
   Text on amber is #231400. White on amber is unreadable in Gulf sun and it
   creeps back in every time somebody adds a button. */
.go, .btn:not(.ghost), .cta:not(.ghost), button.go {
  color: #231400;
}

/* ---- print ----
   Charts get pinned to walls. Nothing here should follow them onto paper. */
@media print {
  .card, .panel, .rig, .row { border-radius: 0; }
}