/* Southwest Day / Twilight / Night.
 *
 * The locked token table from PinonSuite/docs/theme.md. Day is `:root`;
 * Twilight and Night are recalibrated per token, never Day inverted --
 * which is why each mode restates every value rather than deriving one.
 *
 * Two vocabularies, one set of values. PinonPM names the tokens for
 * materials (`--paper`, `--sage`); Depot, Kiln, Shepherd and Deliver name
 * them for roles (`--bg`, `--ok`). Every pair is the same hex in all
 * three modes, so the material names carry the values -- theme.md locks
 * those -- and the role names are `var()` aliases. A custom property
 * resolves at use, so `--bg` follows `--paper` through a mode switch
 * without Twilight and Night having to repeat the aliases.
 *
 * The consequence that matters for adoption: no product changes a single
 * class name or a single `var()` call to adopt this file.
 */

:root {
  /* Grounds. No state meaning. */
  --ink: #141210;
  --paper: #f3eee4;
  --panel: #fffcf6;
  --line: #d2cbbd;
  --muted: #5a544b;

  /* Signals. --sage: done/ok. --resin: blocked/cancelled/bad.
     --turquoise: in review, and the accent every product draws its
     primary control from. */
  --sage: #2f5a43;
  --resin: #b4531e;
  --turquoise: #2f8a86;

  /* Lifecycle. The three above cannot express a run: --resin has to
     serve failed, blocked, cancelled and warn at once, and there is no
     in-progress colour at all. Promoted 2026-09-18 -- see the README. */
  --cactus: #2f9e44;
  --chile: #c62828;
  --ochre: #a67c1f;

  /* Shipped by every product, named in no vocabulary yet -- see README,
     "What is deliberately not here". --well is a sunken ground (inputs,
     pre); --accent-ink is the text that sits on --turquoise. */
  --well: #f8f4ea;
  --accent-ink: #fffcf6;

  /* theme.md locks these two. Both stacks end in a system face, so a
     product that loads no webfont renders exactly what it renders
     today. */
  --font-ui: "Source Sans 3", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Source Serif 4", ui-serif, Georgia, serif;
}

/* Role names. Defined once, in terms of the material names above, and
   never restated per mode. */
:root {
  --fg: var(--ink);
  --bg: var(--paper);
  --card: var(--panel);
  --ok: var(--sage);
  --bad: var(--resin);
  --accent: var(--turquoise);
  /* Deliver ships this amber as --run. Same colour, role name, so its
     stylesheet needs no edit -- but --ochre is the value, because
     theme.md names tokens for materials and because PinonPM proposed
     the same colour under that name for Priority: High. */
  --run: var(--ochre);
  /* --line and --muted are spelled the same in both vocabularies.
     --cactus, --chile and --ochre are material names already, so the
     products that use them need no alias either. */
}

html[data-theme="twilight"] {
  --ink: #f0e3dc;
  --paper: #3d2f47;
  --panel: #4a3a52;
  --line: #746078;
  --muted: #c9b6bf;

  --sage: #8fbf9a;
  --resin: #f09460;
  --turquoise: #62c6bf;

  --cactus: #5cd671;
  --chile: #ff5c5c;
  --ochre: #e8bb52;

  --well: #2a2130;
  --accent-ink: #1c2e2c;
}

html[data-theme="night"] {
  --ink: #ece6df;
  --paper: #17151d;
  --panel: #1e1c26;
  --line: #423e50;
  --muted: #8b8590;

  --sage: #6ea882;
  --resin: #d47a48;
  --turquoise: #3ecfc4;

  --cactus: #4ade68;
  --chile: #ff5a4a;
  --ochre: #c99a3a;

  --well: #0d1116;
  --accent-ink: #0a1f1c;
}

/* Page chrome and controls.
 *
 * Every rule here is one that three or more product UIs already ship
 * identically -- the rule of three from PinonSuite/docs/shared-libraries.md,
 * checked against the files rather than assumed. Anything that appears in
 * one or two products stays in that product; see the README for the list
 * and why each one is still out.
 *
 * Nothing here names a colour. Every value comes from tokens.css, which
 * is what makes three lighting modes cost one token table instead of
 * three stylesheets. `tests/tokens.rs` fails the build if a hex literal
 * appears in this file.
 */

* { box-sizing: border-box; }

/* Not by the rule of three -- only Shepherd ships it. It is here because
   `hidden` is silently defeated by any `display` a rule sets later, and a
   nav that ignores `hidden` shows signed-out visitors the whole menu.
   That is a reset, in the same category as `box-sizing`, not a
   component. */
[hidden] { display: none !important; }

/* Also not by the rule of three -- Depot and Shepherd ship it, Kiln has
   no links, and Deliver and PinonPM style only the links inside their
   nav. It is here for the same reason as the reset above: this file
   paints `body` a dark ground in two of the three modes and then has no
   business leaving link colour to the browser, which picks a blue that
   is legible on white and nowhere else.

   This is a visible change for Deliver and PinonPM on adoption -- their
   body links go from UA blue to --turquoise. Said out loud rather than
   slipped in; a product that wants the browser's blue back writes one
   rule. */
a { color: var(--accent); }

body {
  margin: 0;
  /* Was `15px/1.45 system-ui, sans-serif` in three products. --font-ui
     ends in system-ui, so this renders identically for a product that
     loads no webfont, and picks up Source Sans 3 for one that does. */
  font: 15px/1.45 var(--font-ui);
  background: var(--bg);
  color: var(--fg);
}

header {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
#chrome-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
#who { color: var(--muted); font-size: 0.9rem; }
#theme-mode { padding: 0.2rem 0.4rem; font-size: 0.85rem; }

main { padding: 1.2rem 1.4rem 3rem; max-width: 960px; }
h1 { font-size: 1.35rem; margin: 0 0 0.4rem; }
h2 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }
p, label { color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0.7rem 0;
}

/* Kiln's rule omits `textarea` because Kiln has no textarea, not because
   it wants one styled differently. Depot and Shepherd include it. */
input, select, button, textarea {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--well);
  color: var(--fg);
}
button {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  font-weight: 600;
  cursor: pointer;
}
button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }

.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: end; }
.field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.4rem 0; }
.field label { font-size: 0.8rem; }

.err { color: var(--bad); }
.ok { color: var(--ok); }
.hint { font-size: 0.9rem; color: var(--muted); }

/* Three products, agreeing on everything but a hundredth of a rem:
   Shepherd has font-size 0.9rem here and 0.8rem on `th`, Depot and Kiln
   have 0.92rem and inherit. Adopting takes Depot and Kiln's values.
   Stated rather than quietly resolved, because it is a visible change to
   one product and the fix if it is wrong is one local rule. */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }

/* Auth forms -- `login_form` and `change_password_form` in lib.rs.
   Promoted 2026-09-22 at the suite owner's direction, ahead of the rule
   of three: five products had five login screens with the same two
   fields and five different eight-line copies of this column. Narrow,
   centred, stacked. */
.auth { max-width: 320px; margin: 4rem auto; display: flex; flex-direction: column; gap: 0.75rem; }
.auth h1 { margin: 0 0 0.25rem; }
.auth label { margin: 0; }
.auth input { width: 100%; }
.auth button { align-self: flex-start; }
.auth p:empty { display: none; }