/* The components, served at /style.css (after /tokens.css, before /layout.css): plain text, buttons,
   form fields, cards, chips, the confirm card, notes, empty states and the toast. Shared by the chat
   page (page.html) and the pages drawn from data (page-shell.html). Colours and sizes come only from
   tokens.css. Older markup with no classes (fieldset, details, a bare button) is styled here too, so
   a screen looks right before its markup is touched. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  /* The page as the look paints it, lit from where Soa sits (top left in the full app: Soa's bar) */
  background: radial-gradient(32rem 24rem at 0 0, var(--soa-halo), transparent 70%) no-repeat fixed, var(--bg-paint);
  color: var(--text);
  font: var(--text-md) / var(--leading) var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: var(--leading-tight); margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); font-weight: 700; }
h2 { font-size: var(--text-xl); font-weight: 650; margin-top: var(--space-5); }
h3 { font-size: var(--text-lg); font-weight: 600; }
h4 { font-size: var(--text-md); font-weight: 600; }
p { margin: 0 0 var(--space-3); }
small { color: var(--text-muted); }
small { font-size: var(--text-xs); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
pre { white-space: pre-wrap; font: var(--text-sm) / var(--leading) var(--font-mono); margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus: always visible from the keyboard */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* ---- Buttons: primary (one per job), secondary (the default), quiet (cancel, skip) ---- */
button, .actions a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch); min-width: var(--touch); padding: 0 var(--space-4);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--button-radius);
  background: var(--surface); color: var(--text); box-shadow: var(--button-shadow);
  font: 600 var(--text-md) / 1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background var(--speed), border-color var(--speed), transform var(--speed), box-shadow var(--speed);
  -webkit-tap-highlight-color: transparent;
}
button:hover, .actions a:hover { background: var(--surface-2); color: var(--text); }
button:active, .actions a:active { transform: var(--button-press); box-shadow: var(--button-shadow-pressed); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
/* Primary: the main step on each card or form */
.primary, .row .actions > a, #confirm, #send, #kitInstall, #importConfirm,
[data-do="confirm"], [data-do="new"], [data-do="ask"], [data-do="setup"] {
  background: var(--accent); border-color: var(--accent); color: var(--text-on-accent);
}
.primary:hover, .row .actions > a:hover, #confirm:hover, #send:hover,
#kitInstall:hover, #importConfirm:hover, [data-do="confirm"]:hover, [data-do="new"]:hover, [data-do="ask"]:hover, [data-do="setup"]:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent);
}
/* Quiet: no box until pressed, for the step you rarely want */
.quiet, #cancelProposal, #offerDrop, #clearSent, [data-do="cancel"], [data-do="skip"], [data-do="setup_cancel"] {
  background: transparent; border-color: transparent; color: var(--text-muted); box-shadow: none;
}
.quiet:hover, #cancelProposal:hover, #offerDrop:hover, #clearSent:hover,
[data-do="cancel"]:hover, [data-do="skip"]:hover, [data-do="setup_cancel"]:hover { background: var(--surface-2); color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0 0; }

/* ---- Form fields: a label above every box ---- */
label { font-weight: 500; }
/* Every box you type in: text, search, email, password, phone, number, dates... (not ticks, round
   choices, files or buttons, which have their own rules). */
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea {
  display: block; width: 100%; max-width: 100%; margin-top: var(--space-1);
  min-height: var(--touch); padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: var(--text-md) / var(--leading) var(--font);
}
textarea { resize: vertical; min-height: 6.5em; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input[type="file"] { display: block; margin-top: var(--space-1); max-width: 100%; font: inherit; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.field { margin: 0 0 var(--space-4); }
.field > label { display: block; }
.hint { display: block; color: var(--text-muted); font-size: var(--text-sm); font-weight: 400; margin-top: var(--space-1); }
.choices { display: grid; gap: var(--space-1); }
.choices label {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch);
  padding: 0 var(--space-3); border-radius: var(--radius-sm); font-weight: 400; cursor: pointer;
}
.choices label:hover { background: var(--surface-2); }

/* ---- Cards (fieldsets count as cards, so older markup looks the same) ---- */
.card, fieldset {
  background: var(--card-paint); border: var(--border-width) solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow-1); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); padding: var(--space-4); margin: 0 0 var(--space-3); min-width: 0;
}
fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-2); font-weight: 600; }
fieldset > legend + * { clear: both; }
fieldset fieldset { box-shadow: none; background: transparent; }
.card > :last-child, fieldset > :last-child { margin-bottom: 0; }
.stack { display: grid; gap: var(--space-3); }
.stack > .card { margin: 0; }

/* ---- Chips: the reason a person is listed, a card's state, on/off ---- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px; min-height: 24px;
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1.3;
  background: var(--neutral-soft); color: var(--neutral-soft-text); white-space: nowrap;
}
.chip.ok { background: var(--accent-soft); color: var(--accent-soft-text); }
.chip.warn { background: var(--pending-soft); color: var(--pending-soft-text); }
.chip.bad { background: var(--danger-soft); color: var(--danger-soft-text); }

/* ---- Notes: switched off / not found, problems, empty states ---- */
.note, .not-on, .problem {
  display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); background: var(--neutral-soft); color: var(--neutral-soft-text);
  font-size: var(--text-sm); border-left: 4px solid var(--border-strong);
}
.not-on { background: var(--pending-soft); color: var(--pending-soft-text); border-left-color: var(--pending); }
.problem { background: var(--danger-soft); color: var(--danger-soft-text); border-left-color: var(--danger); }
.not-on::before { content: "\25CB"; font-weight: 700; }    /* a hollow circle: something is off */
.problem::before { content: "!"; font-weight: 800; }
.empty {
  text-align: center; padding: var(--space-6) var(--space-4); color: var(--text-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius); background: transparent;
}
.empty strong { display: block; color: var(--text); font-size: var(--text-lg); margin-bottom: var(--space-1); }

/* ---- The confirm card: reads as "not saved yet" until Confirm ---- */
.confirm {
  border: 2px dashed var(--pending); border-radius: var(--radius-lg); background: var(--surface);
  padding: var(--space-4); box-shadow: var(--shadow-2); margin: 0 0 var(--space-4);
}
.confirm-banner {
  display: flex; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--pending-soft); color: var(--pending-soft-text); font-weight: 600; font-size: var(--text-sm);
}
.confirm-banner::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.confirm h2 { margin-top: 0; }
.change { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); background: var(--surface); }
.change-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: var(--touch); }
.change-head label { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 12em; font-weight: 600; cursor: pointer; min-height: var(--touch); }
.lines { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.lines li { overflow-wrap: anywhere; }
.lines li.changed .now { font-weight: 600; }
.lines .was { display: inline-block; margin-left: var(--space-1); padding: 0 6px; border-radius: 4px; background: var(--danger-soft); color: var(--danger-soft-text); font-size: var(--text-xs); text-decoration: line-through; }
.why-title { margin: var(--space-3) 0 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.why { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.why li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--danger-soft-text); }
.why label { display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--touch); font-weight: 600; color: var(--text); }
.question { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-soft-text); font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.held:empty { display: none; }
.held { font-size: var(--text-sm); color: var(--pending-soft-text); margin: var(--space-2) 0 0; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }
.confirm-actions .primary, .confirm-actions #confirm, .confirm-actions [data-do="confirm"] { flex: 1 1 10em; }

/* ---- Toast: a short "Saved" after a confirm ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--space-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 30; max-width: calc(100vw - 32px);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
  background: var(--text); color: var(--bg); font-weight: 600; box-shadow: var(--shadow-2);
  animation: toast-in var(--speed) ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- Older markup: details, tables, lists ---- */
details { background: var(--card-paint); border: var(--border-width) solid var(--card-border); border-radius: var(--radius); margin: 0 0 var(--space-3); box-shadow: var(--shadow-1); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 56px; padding: 0 var(--space-4); font-weight: 600; cursor: pointer; list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform var(--speed); flex: none; }
details[open] > summary::after { transform: rotate(-135deg); }
details > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
details > :last-child { margin-bottom: var(--space-4); }
table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: var(--text-sm); margin: 0 0 var(--space-3); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-muted); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }