/* Threadline's chrome, and the console's palette.

   ======================================================================
   THE RULE, TAKEN FROM THE PACKAGE: NEVER SET A COLOUR ON ONE SIDE ONLY.
   ======================================================================

   Every rule below that sets a background sets a text colour in the same rule,
   and the reverse. That is not tidiness. Every one of the five faults found on
   the first dark host was this same mistake, including a selected tab painted
   white-on-near-white and form controls measured at literally 1.00:1 — the
   same colour on both sides.

   ======================================================================
   THE CONSOLE'S PALETTE — --mkadmin-*
   ======================================================================

   The console resolves every colour through three levels: `--mkadmin-*` first,
   then the host's own published names, then a CSS system colour (package
   decision 2026-09-03-S). A host that states the first level needs nothing
   else, and Threadline states it, so the console looks native rather than
   bolted on.

   EVERY NAME BELOW WAS READ OUT OF THE PACKAGE'S OWN STYLESHEET on 2026-09-22
   —  `makarios_admin/console/templates/_admin_console.css` — and there are
   eleven of them. NOT ONE IS INVENTED. Three invented property names are what
   produced a black-on-black console at Panelman's /admin, and `tests/
   test_console_palette.py` reads the package's stylesheet as the authority and
   fails if this list and that one ever differ in either direction: a name
   published here that the console never reads is dead, and a name the console
   reads that is not published here falls through to a level that may not suit.

   THEY ARE DECLARED IN PAIRS, and the pairs are the point. `--mkadmin-accent`
   is meaningless without `--mkadmin-accent-ink`; so is a field background
   without its field text. */

:root {
  color-scheme: light dark;

  /* Threadline's own palette. One family, light and legible, because the
     screens this application will grow are read on a shop floor under shop
     lighting on a phone, not in an office. */
  --tl-bg:          #F4F6F8;
  --tl-fg:          #16202B;
  --tl-muted:       #53606E;
  --tl-faint:       #6B7785;
  --tl-card:        #FFFFFF;
  --tl-card-2:      #EEF2F6;
  --tl-line:        #C8D2DC;
  --tl-field-bg:    #FFFFFF;
  --tl-field-fg:    #16202B;
  --tl-accent:      #1F4E79;
  --tl-accent-ink:  #FFFFFF;
  --tl-danger:      #B3261E;
  --tl-danger-ink:  #FFFFFF;
  --tl-ok-bg:       #E3F1E4;
  --tl-ok-fg:       #14401B;
  --tl-warn-bg:     #FBE7E5;
  --tl-warn-fg:     #6A1710;

  /* ---- the console's eleven, stated explicitly ---- */
  --mkadmin-fg:          var(--tl-fg);
  --mkadmin-muted:       var(--tl-muted);
  --mkadmin-faint:       var(--tl-faint);
  --mkadmin-surface:     var(--tl-card);
  --mkadmin-surface-2:   var(--tl-card-2);
  --mkadmin-line:        var(--tl-line);
  --mkadmin-field-bg:    var(--tl-field-bg);
  --mkadmin-field-fg:    var(--tl-field-fg);
  --mkadmin-accent:      var(--tl-accent);
  --mkadmin-accent-ink:  var(--tl-accent-ink);
  --mkadmin-danger:      var(--tl-danger);
}

/* ------------------------------------------------------------ the page */

body {
  margin: 0;
  background: var(--tl-bg);
  color: var(--tl-fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

main { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

/* ------------------------------------------------------------- top bar */

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--tl-accent);
  color: var(--tl-accent-ink);
}
.topbar a { color: var(--tl-accent-ink); text-decoration: none; }
.topbar a:hover, .topbar a:focus-visible { text-decoration: underline; }
.topbar .brand { font-weight: 700; letter-spacing: 0.02em; }
.topbar nav { display: flex; gap: 1rem; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.topbar form.inline { display: inline; margin: 0; }

/* A button that must read as a link still has to be a button, so it keeps the
   keyboard and the form. Colour set on both sides, like everything else. */
.linkish {
  background: transparent;
  color: var(--tl-accent-ink);
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ------------------------------------------------------------- content */

.card {
  background: var(--tl-card);
  color: var(--tl-fg);
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 0 0 1.25rem;
}
.card.quiet { background: var(--tl-card-2); color: var(--tl-fg); }
.card.signin { max-width: 26rem; margin: 3rem auto; }

h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.lede { color: var(--tl-muted); margin-top: 0; }
.hint { color: var(--tl-faint); font-size: 0.9rem; }
code { background: var(--tl-card-2); color: var(--tl-fg); padding: 0 0.25em; border-radius: 3px; }

a.primary-link { color: var(--tl-accent); font-weight: 600; }

/* --------------------------------------------------------------- forms */

.field { margin: 0 0 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

/* THE UNTYPED-INPUT FAULT, NOT REPEATED. VGX's own control rule misses inputs
   without a type selector, so those inherit the body colour on one side and
   the browser default on the other. This selects every text-like control by
   element as well as by type. */
input, select, textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  font: inherit;
  background: var(--tl-field-bg);
  color: var(--tl-field-fg);
  border: 1px solid var(--tl-line);
  border-radius: 6px;
}

button.primary {
  background: var(--tl-accent);
  color: var(--tl-accent-ink);
  border: 1px solid var(--tl-accent);
  border-radius: 6px;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ----------------------------------------------------- the message area */
/*
   CATEGORIES ARE NOT COSMETIC. `ok` and `warn` are the package's two, and
   rendering a refusal identically to a confirmation is one of the three faults
   recorded against VGX's own stylesheet. Each sets BOTH sides. */

.messages { list-style: none; margin: 1rem auto 0; padding: 0 1rem; max-width: 1000px; }
.msg {
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin: 0 0 0.5rem;
  border: 1px solid transparent;
}
.msg-ok   { background: var(--tl-ok-bg);   color: var(--tl-ok-fg);   border-color: var(--tl-ok-fg); }
.msg-warn { background: var(--tl-warn-bg); color: var(--tl-warn-fg); border-color: var(--tl-warn-fg); }

.state {
  background: var(--tl-card-2);
  color: var(--tl-fg);
  border: 1px solid var(--tl-line);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
}

/* -------------------------------------------------------------- footer */

.foot {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  color: var(--tl-faint);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------ stock take */

.shops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.25rem; }
.card.shop { margin: 0; }
.actions { display: flex; gap: 1rem; flex-wrap: wrap; }

table.grid { width: 100%; border-collapse: collapse; margin: 0 0 1rem;
  background: var(--tl-card); color: var(--tl-fg); }
table.grid th, table.grid td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--tl-line); vertical-align: top; }
table.grid th { background: var(--tl-card-2); color: var(--tl-fg); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tr.slips td { background: var(--tl-card-2); color: var(--tl-fg); }
table.grid input, table.grid select { width: auto; }

.badge { display: inline-block; border-radius: 999px; padding: 0 0.6rem; font-size: 0.85rem; font-weight: 600;
  border: 1px solid var(--tl-line); background: var(--tl-card-2); color: var(--tl-fg); }
.badge-not_started { background: var(--tl-card-2); color: var(--tl-muted); }
.badge-counting { background: #FFF1CC; color: #4A3300; border-color: #4A3300; }
.badge-complete { background: var(--tl-ok-bg); color: var(--tl-ok-fg); border-color: var(--tl-ok-fg); }

ul.attention, ul.plain { list-style: none; padding: 0; margin: 0.5rem 0; }
ul.plain li { padding: 0.25rem 0; border-bottom: 1px solid var(--tl-line); }

.row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 12rem; }
.row .field { margin: 0; }
.row select { width: auto; }
form.inline { display: inline; }
form.decide { display: flex; gap: 0.4rem; flex-wrap: wrap; }
form.decide input { width: 12rem; }
form.suspense { border-top: 1px solid var(--tl-line); padding-top: 0.5rem; margin-top: 0.5rem; }
label.choice { display: block; font-weight: normal; margin: 0.25rem 0; }
label.choice input { width: auto; margin-right: 0.4rem; }

button.small {
  background: var(--tl-card); color: var(--tl-accent);
  border: 1px solid var(--tl-accent); border-radius: 6px;
  padding: 0.25rem 0.7rem; font: inherit; font-size: 0.9rem; cursor: pointer;
}

.figure-row { display: flex; gap: 2rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.figure .big { display: block; font-size: 2.2rem; font-weight: 800; }
.reveal .pin { font-size: 1.6rem; letter-spacing: 0.15em; }
.pager { display: flex; gap: 1rem; }

/* --------------------------------------------------------- the home page */

/* The signed-in line: a strip, not a card. */
.signed-in { color: var(--tl-muted); background: transparent; margin: 0 0 1.25rem; }

/* A TILE IS ONE LINK. The stock take page's `.shops` grid and `.card`, with
   the whole card clickable rather than a link inside it. Both sides of every
   colour set, as everywhere else. */
.tiles { margin-bottom: 1.25rem; }
a.card.tile { display: block; margin: 0; text-decoration: none;
  background: var(--tl-card); color: var(--tl-fg); }
a.card.tile h2 { color: var(--tl-accent); background: transparent; }
a.card.tile p { margin: 0; color: var(--tl-muted); background: transparent; }
a.card.tile:hover, a.card.tile:focus-visible { border-color: var(--tl-accent);
  background: var(--tl-card-2); color: var(--tl-fg); outline: 2px solid var(--tl-accent); outline-offset: -2px; }

/* ------------------------------------------------ a button that is working */

/* Set by /static/busy.js on the press. Both sides, like everything else. */
button[aria-busy="true"], button.primary[aria-busy="true"] { cursor: progress;
  background: var(--tl-card-2); color: var(--tl-fg); border-color: var(--tl-line); }