/* subpage.css — SUBPAGE variant tokens (STYLE-BIBLE §3, Sim's tuned lab block).
   Portal subpages ONLY (apps/*.html + utility pages that adopt the datasheet).
   Link AFTER datasheet.css. The .sheet-scoped tokens win over datasheet.css's
   :root by inheritance distance — the proven --accent mechanism, no !important.

   body.subpage also re-tints the page ground + sticky header so the sheet sits
   seamless on the page, exactly like the homepage (--surface == --paper). This
   replaces the legacy per-page body.tint-* classes on ported pages.

   --muted derived like FLAGSHIP's: ink mixed ~36% toward the paper.
   --accent stays the portal default (#D9846A) unless a page sets its own. */
body.subpage {
  --surface: #D4E0D5;
  --header-surface: #D4E0D5;
  --border: #B4C3B4;
  --border-strong: #9B9F9B;
  /* Utility pages (feedback form + list) reuse token-driven marketing
     components; re-tint their surfaces to sage too so nothing stays blue.
     Datasheet subpages (apps/*.html) don't reference these inside .sheet,
     so this is inert for them. */
  --surface-card: #C4D6C5;
  --surface-card-hover: #BBCFBC;
  --ghost: rgba(32, 36, 41, 0.06);
}
body.subpage .sheet {
  --paper: #D4E0D5;
  --card:  #C4D6C5;
  --line:  #9B9F9B;
  --line-soft: #B4C3B4;
  --rule:  #879287;
  --ink:   #202429;
  --muted: #616867;
}

/* ── Utility pages (support / feedback / donate / imprint) ───────────
   The `util` class is added ALONGSIDE `subpage` so these rules never
   touch the app datasheet pages (apps/*.html), which are `subpage` only.
   Utility copy is link-heavy, so in-sheet links get a datasheet underline
   (the global `a` is color:inherit/no-underline — right for app pages). */
body.util .sheet a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
body.util .sheet a:hover { text-decoration-color: var(--accent); }

/* An action link that ends a card — nudged onto its own line, accent-led. */
body.util .sheet .featgrid p .go {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  font-weight: 600;
}
body.util .sheet .featgrid p .go:hover { text-decoration-color: var(--accent); }

/* ── donate.html: the Ko-fi CTA, as a datasheet panel ────────────────
   Butts against the rule strip (border-top:none) like the app pages'
   sections. Squared accent button — the datasheet .dl idiom, enlarged. */
body.util .sheet .give {
  border: 1.5px solid var(--rule, var(--ink));
  border-top: none;
  padding: 26px 22px 24px;
  text-align: center;
}
body.util .sheet .kofi-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  padding: 13px 28px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.15s ease;
}
body.util .sheet .kofi-btn:hover { filter: brightness(1.08); text-decoration: none; }
body.util .sheet .give .note { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
body.util .sheet .give .alts { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }

/* ── feedback.html: form + submissions list, sized to the sheet ──────
   Keep the .fb-* class hooks (feedback.js binds to them); reshape to the
   squared, mono datasheet idiom. Surfaces already re-tint to sage via the
   body.subpage token block above. */
body.util .sheet .fb-form {
  border: 1.5px solid var(--rule, var(--ink));
  border-radius: 0;
  box-shadow: none;
  background: var(--card);
  padding: 22px;
}
/* Only the FIELD labels go mono-uppercase — not the radio option labels
   ("Bug"/"Feature"/"Question") or the consent sentence, which stay sentence
   case so they don't read as shouting. */
body.util .sheet .fb-form > label:not(.fb-consent) > span,
body.util .sheet .fb-form .fb-row > label > span,
body.util .sheet .fb-form .fb-field-label { color: var(--ink); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
body.util .sheet .fb-form > label:not(.fb-consent) > span em,
body.util .sheet .fb-form .fb-row > label > span em { text-transform: none; letter-spacing: 0; }
body.util .sheet .fb-form input[type="text"],
body.util .sheet .fb-form input[type="email"],
body.util .sheet .fb-form select,
body.util .sheet .fb-form textarea {
  border: 1.5px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
}
body.util .sheet .fb-form input:focus,
body.util .sheet .fb-form select:focus,
body.util .sheet .fb-form textarea:focus { border-color: var(--ink); background: #fff; }
body.util .sheet .fb-actions .btn-download {
  background: var(--accent);
  color: #fff;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
}
body.util .sheet .fb-pill { border-radius: 0; border: 1.5px solid var(--line); background: var(--paper); }
body.util .sheet .fb-pill.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.util .sheet .fb-list article,
body.util .sheet .fb-item {
  border: 1.5px solid var(--line);
  border-radius: 0;
  background: var(--card);
}
/* The remaining feedback-widget controls default to var(--radius-pill)/12px in
   site.css — square them so nothing renders as a rounded pill on the datasheet
   (the status legend is always-visible; the type badges + toast + resolution
   note appear as feedback.js populates the list). Colour coding is untouched. */
body.util .sheet .fb-status,
body.util .sheet .fb-item-type,
body.util .sheet .fb-radios,
body.util .sheet .fb-toast,
body.util .sheet .fb-item-resolution { border-radius: 0; }