/* Dominares HQ, in the house identity: the "two L's". The palette and Michroma come from
   /tokens.css, a byte-for-byte copy of the brand kit's web/tokens.css (the same file the store
   and Lina load), so every colour below is a --brand-* value or a state colour checked against
   those grounds: paper and white sheets in light, black and the dark surface in dark. The mark
   is flat emerald #00B070 on both; on paper that is 2.6:1, so it is never small text there:
   small accent text is deep emerald in light and light emerald in dark. Michroma sets only the
   "HQ" label (the wordmark itself is an outlined mark); headlines and body are Recursive.
   "Lina" is never uppercased here.
   Everything the page shows as a state (ok, warn, down, muted, comped, disputed, flag, live,
   paused, read-only) is a class here, because the CSP forbids an inline style and §5.1 forbids
   a CSSOM write. Visibility is the `hidden` attribute, which beats every display rule below. */

@font-face {
  font-family: "Recursive";
  src: url("/fonts/recursive-mono.woff2") format("woff2-variations");
  font-weight: 300 1000;
  font-display: swap;
}

/* Text colours are AA (4.5:1 or better) on both grounds of their scheme:
   light ink 17.4/18.7 · muted 6.0/6.5 · link and ok 5.0/5.4 · warn 6.6/7.1 · danger 7.0/7.5
   on paper/white; dark ink 17.9/16.7 · muted 7.9/7.4 · link and ok 10.4/9.7 · warn 9.4/8.8 ·
   danger 8.4/7.8 on black/surface. The primary button is paper on deep emerald in light (5.0)
   and black on emerald in dark (7.1). --field (control borders) is 3:1 or better against both
   grounds; --rule is a quiet divider. */
:root {
  --paper: var(--brand-paper);
  --sheet: #ffffff;
  --ink: var(--brand-ink);
  --muted: var(--brand-muted-light);
  --rule: #d3ddd7;
  --field: #6b8577;
  --link: var(--brand-emerald-deep);
  --link-hover: var(--brand-emerald-ink);
  --accent: var(--brand-emerald-deep);
  --hairline: var(--brand-emerald);
  --mark-color: var(--brand-emerald);
  --primary: var(--brand-emerald-deep);
  --on-primary: var(--brand-paper);
  --danger: #a3221b;
  --ok: var(--brand-emerald-deep);
  --warn: #8a4600;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: 2.25rem;
  --radius: 12px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: var(--brand-black);
    --sheet: var(--brand-surface);
    --ink: var(--brand-text);
    --muted: var(--brand-muted-dark);
    --rule: #1d2c25;
    --field: #5e7a6b;
    --link: var(--brand-emerald-light);
    --link-hover: #ffffff;
    --accent: var(--brand-emerald-light);
    --primary: var(--brand-emerald);
    --on-primary: var(--brand-black);
    --danger: #f28b7d;
    --ok: var(--brand-emerald-light);
    --warn: #f0a04b;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Recursive", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "MONO" 0, "CASL" 0;
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block: max(1rem, env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-bottom));
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 2px;
}

code,
.mono {
  font-family: "Recursive", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variation-settings: "MONO" 1, "CASL" 0;
  font-size: 0.92em;
}

/* `hidden` is how the page shows and hides things, so it beats every display rule here. */
[hidden] {
  display: none !important;
}

/* ── masthead and headline ─────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-block: 0.5rem 1rem;
  border-bottom: 1px solid var(--hairline);
}
/* The lockup: the kit's D (flat emerald on both grounds) and, beside it, the outlined
   DOMINARES in the page's ink over an emerald hairline and "HQ" in Michroma, the way the
   business card sets DOMINARES over "Lina". Row layout here; .stacked on the sign-in page. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
  margin: 0;
}
.mark {
  display: block;
  width: auto;
}
.d {
  color: var(--mark-color);
  height: clamp(2.25rem, 2rem + 0.8vw, 2.75rem);
}
/* Scoped: a bare .lock once turned a "banner lock" paragraph into a flex column and broke its
   sentence apart. Nothing but the lockup is called "lock" now; keep it scoped all the same. */
.wordmark .lock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
/* DOMINARES is about 14 times as wide as it is tall: 0.72rem tall is 162px, which leaves the
   Refresh button room beside it at 390px. */
.word {
  height: clamp(0.72rem, 0.6rem + 0.5vw, 0.85rem);
}
/* "HQ" is a short uppercase label, the one place Michroma is set as live text. */
.hq {
  font-family: var(--brand-display);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.28em;
  padding-top: 0.4rem;
  border-top: 1px solid var(--hairline);
  border-image: linear-gradient(90deg, var(--hairline), transparent) 1;
  align-self: stretch;
}
a.wordmark:hover .word {
  color: var(--link);
}
.refresh {
  margin-left: auto;
}
.stamp {
  color: var(--muted);
  font-size: var(--step--1);
  width: 100%;
}

#headline {
  padding-block: 1.25rem 0.5rem;
}
/* Headlines are Recursive (the house sans) in bold; Michroma is too wide for a headline. */
.hstate,
h2,
.tile .n,
.gate h1:not(.wordmark) {
  font-weight: 750;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.01em;
}
.hstate {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step-3);
  line-height: 1.15;
  margin: 0;
}
.hsub {
  color: var(--muted);
  margin: 0.25rem 0 0;
}

h2 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--step-2);
  line-height: 1.2;
  margin: 1.75rem 0 0.6rem;
}
/* An emerald hairline runs from each section title and fades toward the edge. */
h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline), transparent);
}

/* ── surfaces ──────────────────────────────────────────────────────────── */

.rows,
.tile {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  margin-block: 0 0.75rem;
}
.tile {
  padding: 1rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.tile .n {
  font-size: var(--step-3);
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0;
}
.tile .l {
  color: var(--muted);
  font-size: var(--step--1);
  margin: 0;
}

.row,
.irow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.irow {
  align-items: flex-start;
  flex-wrap: wrap;
}
.row:last-child,
.irow:last-child {
  border-bottom: 0;
}
.row.head {
  font-weight: 700;
}
.k {
  font-weight: 600;
}
.v {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.left {
  flex: 1 1 14rem;
}
.meta,
.note {
  color: var(--muted);
  font-size: var(--step--1);
}
.meta {
  margin-left: auto;
}
.left .meta,
.acts .meta {
  margin-left: 0;
}
.sub {
  color: var(--muted);
  font-size: var(--step--1);
  margin: 0.25rem 0 0.5rem;
}
.acts {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
.grp {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  margin: 0.75rem 0 0.15rem;
}
.sub-grp {
  padding-left: 1.25rem;
}
.hd {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.hd .acts {
  margin-left: auto;
}
.nm {
  font-weight: 600;
}
.cv,
.st,
.err {
  font-size: var(--step--1);
}
.pz {
  padding-block: 0.5rem;
}

.links .row {
  text-decoration: none;
  color: inherit;
}
.links .row:hover .k {
  color: var(--link);
}

/* ── banners, buttons, fields ──────────────────────────────────────────── */

.banner {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  background: var(--sheet);
  padding: 0.6rem 0.9rem;
  margin: 0 0 0.75rem;
  font-size: var(--step--1);
}
.banner.error {
  border-left-color: var(--danger);
}
.banner.readonly {
  border-left-color: var(--link);
}

.btn {
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  padding: 0.45rem 0.8rem;
  border-radius: 9px;
  border: 1px solid var(--field);
  background: var(--paper);
  color: var(--ink);
  min-height: 2.5rem;
}
.btn:hover {
  border-color: var(--ink);
}
/* The primary button (its class is still "gold", from before the brand): paper on deep
   emerald in light (5.0:1), black on emerald in dark (7.1:1). */
.btn.gold,
.btn.go {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
.btn.gold:hover,
.btn.go:hover {
  border-color: var(--ink);
}
.btn.danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}
.btn.ghost {
  background: transparent;
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Staging keeps every write button tappable — it is the 403 that teaches, not a dead control. */
.read-only {
  opacity: 0.55;
}
/* Dimmed while a refresh is in flight, so a tap on Refresh is visibly doing something. */
body.spin {
  opacity: 0.6;
}

input,
select {
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field);
  border-radius: 9px;
  padding: 0.45rem 0.6rem;
  min-height: 2.5rem;
}

/* ── free codes ────────────────────────────────────────────────────────── */

/* The mint form: one field per line, its label beside it. */
.fline {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.4rem 0;
}
.fline label {
  font-weight: 600;
  font-size: var(--step--1);
}
.fnote {
  flex: 1 1 14rem;
}
.fdays {
  width: 6rem;
}
/* The code just made, with the sentence to send: an emerald-edged box, never a banner. */
.fout {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ok);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0 0.75rem;
}
.fout p {
  margin: 0.25rem 0;
}
.fcode {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
}
.fsent {
  font-size: var(--step--1);
}
.fout .btn {
  margin-left: 0.4rem;
}

/* ── edit your sites ───────────────────────────────────────────────────── */

/* One row a site (.irow): its name and what is published on the left, the page and the button on
   the right. The page's label and its picker stay together (.edpick); the picker names a path as
   well as a page, so on a phone it can be wider than the row, and it shrinks to it. The button
   wraps below them as a unit, the same way for both sites. */
.edpick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.edpick label {
  flex: none;
  font-weight: 600;
  font-size: var(--step--1);
}
.edpick select {
  min-width: 0;
}

/* ── the password asked for again ──────────────────────────────────────── */

/* A sheet over the foot of the page, so it is in view wherever the tap was; hidden means gone.
   To check on the owner's iPhone: that the software keyboard leaves the password field in view. If it hides it, drop
   the position rules below — the form then sits in the page after the links, and focusing the field scrolls to it. */
.stepup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  gap: 0.5rem;
  max-width: 60rem;
  margin-inline: auto;
  background: var(--sheet);
  border-top: 2px solid var(--hairline);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.9rem clamp(1rem, 4vw, 2rem) calc(0.9rem + env(safe-area-inset-bottom));
  box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}
.stepup p {
  margin: 0;
}
.stepup label {
  font-weight: 600;
  font-size: var(--step--1);
}

/* ── the customer drawer and the provider sections ─────────────────────── */

/* The drawer opens under the Customers card and scrolls into view; it is a card like the others, edged in emerald. */
#drawer {
  scroll-margin-top: 1rem;
  border-left: 4px solid var(--hairline);
}
#drawerClose {
  margin-left: auto;
}
/* A link that is a button: the console door in the drawer. */
a.btn {
  display: inline-block;
  text-decoration: none;
  line-height: 1.6;
}

/* ── states ────────────────────────────────────────────────────────────── */

.dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--muted);
  vertical-align: baseline;
}
.ok,
.live {
  color: var(--ok);
}
.dot.ok,
.dot.live {
  background: var(--ok);
}
.warn,
.flag,
.comped,
.paused {
  color: var(--warn);
}
.dot.warn,
.dot.comped,
.dot.paused {
  background: var(--warn);
}
.down,
.disputed {
  color: var(--danger);
}
.dot.down,
.dot.disputed {
  background: var(--danger);
}
.muted {
  color: var(--muted);
}
.dot.muted {
  background: var(--muted);
}

/* ── the Command Center door, the sign-in gate and the footer ──────────── */

.cc {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
  padding: 0.9rem 1rem;
  margin-block: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.ccl {
  font-weight: 700;
  color: var(--link);
}
.ccs {
  color: var(--muted);
  font-size: var(--step--1);
}

.gate {
  max-width: 26rem;
  margin: 10vh auto 0;
}
.gate > .wordmark {
  margin-bottom: 1.5rem;
}
.gate h1:not(.wordmark) {
  font-size: var(--step-3);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.gate form {
  display: grid;
  gap: 0.5rem;
  margin-block: 1rem;
}
.gate label {
  font-weight: 600;
  font-size: var(--step--1);
}
/* Sign-in: the same lockup stacked and centred, the D large; it holds Lina's square, so it
   stands for the whole estate on this Dominares-facing page. */
.signin .gate {
  margin-top: 8vh;
}
.wordmark.stacked {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 0 1.25rem;
}
.stacked .d {
  height: clamp(5rem, 4rem + 5vw, 6.5rem);
}
.stacked .lock {
  align-items: center;
  gap: 0.6rem;
}
.stacked .word {
  height: 1.1rem;
}
.stacked .hq {
  text-align: center;
  font-size: 0.8125rem;
  padding-top: 0.6rem;
  padding-left: 0.28em;
  border-image: linear-gradient(90deg, transparent, var(--hairline), transparent) 1;
}
.signin .gate > .sub {
  text-align: center;
  margin-bottom: 1.75rem;
}

footer {
  border-top: 1px solid var(--hairline);
  margin-top: 2rem;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  color: var(--muted);
  font-size: var(--step--1);
}
footer p {
  margin: 0;
}
footer .a2hs {
  flex: 1 1 16rem;
}

/* Inside a home-screen app there is nothing to add. */
@media (display-mode: standalone) {
  .a2hs {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── money, in the customer drawer (R4 part 2) ────────────────────────── */

/* One money action: its own small form, set apart so a refund is never one tap from a credit. */
.mform {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0.4rem 0.9rem 0.55rem;
  margin: 0.6rem 0;
}
.mform .k {
  display: block;
  margin: 0.2rem 0;
}
.mform input[type="checkbox"] {
  min-height: 0;
  width: auto;
}