/* ==========================================================================
   product.css — taprootatlas.com, and nothing else

   The software's own front door: the front page, sign in, forgotten password,
   contact, privacy. Deliberately not office.css (a sidebar, a search box, room
   colours and a menu, none of it any use to somebody who hasn't signed in) and
   deliberately not the client website's stylesheet (that is the client's
   brand, and this page is not theirs).

   The whole of it: a system typeface, a lot of space, one accent, and the same
   page in light and dark. No shadows, no gradients, no animation — Chris's
   instruction was "professional and simple, no flashy", 7 Sep 2026.

   THE ACCENT IS TAPROOT'S OWN AMBER, the same #d98e2b the office puts on its
   primary buttons, with near-black wording on it (the office measured that
   pair for contrast on 2 Sep 2026 — white on amber came out at 2.4:1 and was
   replaced). It is the one colour on the page, and it works on both grounds,
   which is why it does not change between light and dark when everything
   else does.
   ========================================================================== */

:root {
  --bg:#f7f6f3;
  --surface:#fff;
  --line:#e3dfd7;
  --ink:#1e2227;
  --muted:#5f5952;
  --accent:#d98e2b;
  --on-accent:#23180a;
  --accent-ink:#8a5510;       /* the accent as wording, dark enough to read */
  --bad-bg:#fbe4e4; --bad-line:#e8b0b0; --bad-ink:#8e1f1f;
}

/* Auto — follows the machine, unless a page has said otherwise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#15181c;
    --surface:#1c2026;
    --line:#2d333b;
    --ink:#eceae6;
    --muted:#a7a29a;
    --accent:#d98e2b;
    --on-accent:#23180a;
    --accent-ink:#e8b264;
    --bad-bg:#3a1f1f; --bad-line:#5e2f2f; --bad-ink:#f0b4b4;
  }
}

/* And an explicit choice wins in both directions. Nothing on these pages sets
   one today — there is no theme switch on a page you haven't signed in to —
   but the office stamps data-theme on <html> for people who have chosen, and
   this stays in step with it rather than quietly disagreeing. */
:root[data-theme="dark"] {
  --bg:#15181c;
  --surface:#1c2026;
  --line:#2d333b;
  --ink:#eceae6;
  --muted:#a7a29a;
  --accent-ink:#e8b264;
  --bad-bg:#3a1f1f; --bad-line:#5e2f2f; --bad-ink:#f0b4b4;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* The footer sits at the bottom of a short page rather than halfway up it. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a { color:var(--accent-ink); }
a:hover { text-decoration:none; }

/* --- the name, top left, on every page ----------------------------------- */
.masthead {
  padding:28px 24px 0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.wordmark {
  display:inline-block;
  font-size:15px;
  font-weight:700;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.wordmark .mark { color:var(--accent-ink); }

/* The console's own "Chris Brigden · Account · Sign out" — TRA4. Nothing
   else on taprootatlas.com ever sets this, so it never appears to a visitor
   who has signed in to nothing. */
.masthead .who { font-size:13px; color:var(--muted); }
.masthead .who a { color:var(--muted); text-decoration:underline; }
.masthead .who a:hover { color:var(--accent-ink); }
/* Signing out is a button in a form, not a link (TAP11, 26 Sep 2026), drawn
   as the link it replaced. */
form.signout { display:inline; margin:0; }
form.signout button { background:none; border:0; padding:0; font:inherit;
  color:var(--accent-ink); text-decoration:underline; cursor:pointer; }
.masthead .who form.signout button { color:var(--muted); }
.masthead .who form.signout button:hover { color:var(--accent-ink); }

/* --- the page ------------------------------------------------------------ */
main {
  flex:1;
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:72px 24px 88px;
}
main.wide { max-width:640px; }
/* The console's two screens (TRA4) are a list and a pair of panel grids, not
   a page of prose — they get the room the rest of taprootatlas.com deliberately
   doesn't. */
main.console { max-width:1000px; padding:40px 24px 88px; }

h1 {
  font-size:40px;
  line-height:1.15;
  letter-spacing:-.6px;
  font-weight:700;
  margin:0 0 20px;
}
h2 {
  font-size:19px;
  line-height:1.35;
  font-weight:650;
  margin:36px 0 8px;
}
p { margin:0 0 18px; }
.lede { font-size:20px; color:var(--muted); margin:0 0 40px; }
.quiet { color:var(--muted); font-size:15px; }

/* --- the one button ------------------------------------------------------ */
.button {
  display:inline-block;
  background:var(--accent);
  color:var(--on-accent);
  font:inherit;
  font-weight:650;
  font-size:16px;
  text-decoration:none;
  border:0;
  border-radius:6px;
  padding:14px 26px;
  cursor:pointer;
}
.button:hover { background:#c47f22; }
.button.wide { width:100%; }

/* --- forms --------------------------------------------------------------- */
form { margin:0; }
label {
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  margin:20px 0 6px;
}
input[type=email], input[type=text], input[type=password], textarea {
  width:100%;
  font:inherit;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:11px 13px;
}
textarea { min-height:170px; resize:vertical; }
input:focus, textarea:focus {
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
.actions { margin-top:28px; }
.after { margin-top:22px; font-size:15px; }

/* The honeypot. Off the screen rather than display:none, because some form
   fillers skip anything that is hidden outright — and out of the tab order
   and away from a screen reader, so nobody using one can trip over it. */
.trap {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.problem {
  background:var(--bad-bg);
  border:1px solid var(--bad-line);
  color:var(--bad-ink);
  border-radius:6px;
  padding:11px 14px;
  margin:0 0 4px;
  font-size:15px;
}

/* A flash that isn't a problem — "made", "removed", the ordinary run of
   things a click confirms. The office's own flash bar (office.css) treats
   good news and a caution the same unalarmed way rather than a red box and
   a green one, and TRA4's console pages (2CV Adventures made, a passkey
   removed) follow that rather than inventing a second colour of their own. */
.flash {
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  color:var(--ink);
  border-radius:6px;
  padding:11px 14px;
  margin:0 0 4px;
  font-size:15px;
}

/* --- the foot ------------------------------------------------------------ */
footer {
  border-top:1px solid var(--line);
  padding:20px 24px 34px;
  font-size:14px;
  color:var(--muted);
}
footer .inner {
  max-width:560px;
  margin:0 auto;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
footer a { color:var(--muted); }

/* --- on a phone ---------------------------------------------------------- */
@media (max-width:560px) {
  body { font-size:16px; }
  main { padding:44px 20px 64px; }
  h1 { font-size:31px; letter-spacing:-.4px; }
  .lede { font-size:18px; margin-bottom:32px; }
  .button { display:block; text-align:center; }
}

/* --- the console at /rootstock, and the passkey button on the way in ------
   TRA1, 9 September 2026. Four small rules. Everything else on the console
   is already here — h1, .lede, .quiet, .button, the form fields. */
h2 {
  font-size:19px;
  font-weight:600;
  margin:38px 0 12px;
}
.or { text-align:center; margin:14px 0 2px; }
.keys { list-style:none; margin:0 0 22px; padding:0; }
.keys li {
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:6px;
  padding:12px 14px;
  margin-bottom:8px;
}
.keys .key-name { font-weight:600; display:block; }
.keys form { display:inline; }
.linky {
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:var(--accent-ink);
  cursor:pointer;
  text-decoration:underline;
}

/* --- the console's two screens: Customers, and one company ----------------
   TRA4, 12 September 2026. `Taproot/CUSTOMERS PLAN.html`, approved by Chris
   on sight 8 Sep — every colour below is one already in :root above, so
   this costs nothing extra in the dark-mode block. main.console (above)
   gives these room the rest of taprootatlas.com deliberately doesn't need. */

/* Page name, top left, alone — controls go on the row below, never beside
   it (Chris, 5 Sep 2026, and it holds here same as every office page). */
.pagename { font-size:26px; font-weight:700; letter-spacing:-.01em; margin:0 0 18px; }

/* The tab strip. Plain, unlinked text apart from the one that is real —
   Overview and Customers are the only two pages TRA4 built; People, Money,
   Settings and History are the plan's own placeholders for later jobs, drawn
   here so the page matches it rather than looking unfinished, and left as
   spans rather than dead links so nothing on the page claims to go anywhere
   it doesn't. */
.tabs { display:flex; gap:22px; border-bottom:1px solid var(--line); margin:0 0 22px; flex-wrap:wrap; }
.tabs span {
  padding:0 0 9px; font-size:14px; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs span.on { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }

/* Search, state chips, and the primary action — one row. */
.controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.controls input[type=search], .controls input[type=text] {
  width:auto; flex:1 1 200px; min-width:160px; max-width:280px;
}
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  border:1px solid var(--line); background:var(--surface); border-radius:6px;
  padding:6px 12px; font-size:13px; color:var(--muted); cursor:pointer; font:inherit;
}
.chip.on { border-color:var(--ink); color:var(--ink); font-weight:600; }
.spacer { flex:1 1 auto; }

/* The counting strip. Deliberately no money on it — Taproot's own rule that
   a first screen carries no balance or total, Money keeps its own tab, and
   it is exactly as right here as it is in the office. */
.counts {
  display:flex; flex-wrap:wrap; border:1px solid var(--line);
  background:var(--surface); border-radius:8px; overflow:hidden; margin-bottom:20px;
}
.counts > div { flex:1 1 150px; padding:14px 16px; border-right:1px solid var(--line); }
.counts > div:last-child { border-right:0; }
.counts .fig { font-size:22px; font-weight:700; letter-spacing:-.01em; }
.counts .lab { font-size:12.5px; color:var(--muted); margin-top:2px; }

/* --- the customer list ----------------------------------------------------- */
.list { border:1px solid var(--line); background:var(--surface); border-radius:8px; overflow:hidden; }
.head, .row {
  display:grid;
  grid-template-columns:minmax(200px,2.2fr) 84px 84px 118px 108px;
  gap:14px; align-items:center; padding:14px 16px;
}
.head {
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line);
}
.row { border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:0; }
.row .name { font-size:15px; font-weight:600; text-decoration:none; color:var(--ink); }
.row .name:hover { text-decoration:underline; }
.row .addr {
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:12px; color:var(--muted); margin-top:3px; overflow-wrap:anywhere;
}
.row .num { font-size:14px; }
.row .when { font-size:14px; color:var(--muted); }

/* Warnings, not promises. "Live" wears no colour at all; only the states
   worth catching get marked — label the risky end, never the reassuring one. */
.state {
  display:inline-block; font-size:12px; padding:3px 9px; border-radius:4px;
  border:1px solid var(--line); color:var(--muted);
}
.state.setup { border-color:var(--accent); color:var(--accent-ink); }
.state.paused { border-color:var(--bad-line); background:var(--bad-bg); color:var(--bad-ink); }

.flag {
  grid-column:1 / -1; margin-top:4px; border-radius:6px;
  background:var(--bad-bg); border:1px solid var(--bad-line); color:var(--bad-ink);
  padding:9px 12px; font-size:13px;
}
.flag.soft { background:transparent; border-color:var(--accent); color:var(--accent-ink); }

/* The "+ New customer" disclosure — a <details> rather than a script, the
   same reason the office uses one for a drawer: a button that reveals a
   small form needs no JS to do it. */
.drawer { margin:0 0 20px; }
.drawer > summary { display:inline-block; cursor:pointer; list-style:none; }
.drawer > summary::-webkit-details-marker { display:none; }
.drawer > summary::marker { content:""; }
.drawer[open] > summary { margin-bottom:16px; }
.drawer-body {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:18px 20px; max-width:420px;
}

/* --- one company's own page ------------------------------------------------- */
.panels { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.panel { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:18px 20px; }
.panel h3 {
  font-size:12.5px; font-weight:700; margin:0 0 14px; color:var(--muted);
  letter-spacing:.05em; text-transform:uppercase;
}
.kv { display:flex; justify-content:space-between; gap:14px; padding:8px 0;
     border-bottom:1px solid var(--line); font-size:14px; }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted); }
.kv .v { text-align:right; font-weight:500; }
.kv .v.mono {
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:12.5px; font-weight:400; overflow-wrap:anywhere;
}
.panel .note { font-size:13px; color:var(--muted); margin-top:10px; }

/* A secondary button beside the one filled-in one — "Sign in as them" and
   its neighbours, all of them inert today (see app/routes/rootstock.py). */
.button.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.button.ghost:hover { background:var(--bg); }
.button.small { padding:8px 16px; font-size:14px; border-radius:6px; }
.button:disabled { opacity:.5; cursor:default; }
.console .actions { display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width:760px) {
  /* Four columns, not five: name, logins, rallies, state. "Last used" is the
     one dropped — it is still the first line of any flag underneath a row,
     so nothing it says is lost, only the column that repeats it. Narrower
     still on a phone (below), where even these four need tightening to fit
     a 375px width without the row itself running off the edge. */
  .head, .row { grid-template-columns:minmax(120px,1fr) 46px 46px 78px; }
  .head .h-when, .row .when { display:none; }
  .panels { grid-template-columns:1fr; }
}

@media (max-width:420px) {
  /* A phone's own width, not just "not a desktop". The state badge wraps to
     two lines here ("Setting" / "up") rather than being cut off — checked
     against a 375px viewport, the narrowest this is ever likely to open on. */
  .head, .row { grid-template-columns:minmax(90px,1fr) 32px 32px 60px; gap:8px; }
  .row, .head { padding:12px 14px; }
  .state { font-size:11px; padding:3px 6px; text-align:center; }
  /* LOGINS / RALLIES: the words themselves don't fit a 32px column even on
     their own line, and CSS Grid does not shrink an uppercase word that
     cannot break — it spills into the next one. visibility:hidden keeps the
     column's own width so the figures below still line up under it; only
     the printed label goes. */
  .head > div:nth-child(2), .head > div:nth-child(3) { visibility:hidden; }
}