/* Ink, in Mainframe (CITADL's design language).
 *
 * Every value here is a reference to citadl-tokens.generated.css, which
 * scripts/vendor-mainframe.sh vendors byte for byte from citadl-design-tokens.
 * This file declares no colour, font family, font size or radius of its own;
 * test/mainframe.test.ts fails if it does. Light is :root and dark is
 * <html class="dark">, set by theme.js: a saved choice, else the device.
 *
 * Deliberately small: a page shell, one column, buttons, inputs, a list row
 * and a status label. Ink is read on a phone, so reading text uses the
 * body-large role and every control is a full thumb target. */

:root {
  --bg: hsl(var(--citadl-background));
  --panel: hsl(var(--citadl-muted));
  --ink: hsl(var(--citadl-foreground));
  --ink-2: hsl(var(--citadl-muted-foreground));
  --line: hsl(var(--citadl-border));
  --accent: hsl(var(--citadl-accent));
  --danger: hsl(var(--citadl-destructive));
  --ok: hsl(var(--citadl-ok));
  --warn: hsl(var(--citadl-warn));
  --on-accent: hsl(var(--citadl-foreground)); /* dark text on the amber: white on it is under 3 to 1 */
  --accent-text: color-mix(in srgb, var(--accent), hsl(var(--citadl-foreground)) 35%); /* the amber darkened until it reads as text on the light ground */
  --accent-line: hsl(var(--citadl-accent) / 0.6);
  --accent-tint: hsl(var(--citadl-accent) / 0.1);
  /* A 44px thumb target, built from space roles: 24 + 16 + 4. */
  --tap: calc(var(--citadl-space-section) + var(--citadl-space-panel) + var(--citadl-space-tight));
  /* A phone browser zooms the page when a field's text is under 16px. Mainframe
   * has no type role at that size, so fields borrow the 16px space role. */
  --field-text: var(--citadl-space-panel);
  --gutter: var(--citadl-space-panel); /* 16px on each side at every width */
  --column: 36rem; /* one column, never wider than a comfortable line */
  --r: var(--citadl-radius-control);
  --t: var(--citadl-duration-fast);
}

/* The accent is the same amber in both modes, so text on it stays dark. */
.dark { --accent-text: var(--accent); --on-accent: hsl(var(--citadl-background)); }

*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; }
:root.dark { color-scheme: dark; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  font-family: var(--citadl-font-sans); font-size: var(--citadl-font-size-body-large); line-height: 1.45;
  letter-spacing: var(--citadl-letter-spacing-body); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img, canvas, svg { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: calc(var(--citadl-hairline) * 2) solid var(--accent); outline-offset: calc(var(--citadl-hairline) * 2); }
a { color: var(--accent-text); }

/* ---- page shell ---- */
.bar { display: flex; align-items: center; gap: var(--citadl-space-stack); background: var(--bg);
  border-bottom: var(--citadl-hairline) solid var(--line);
  padding: calc(var(--citadl-space-stack) + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) var(--citadl-space-stack) max(var(--gutter), env(safe-area-inset-left)); }
.brand { display: inline-flex; align-items: center; gap: var(--citadl-space-stack); flex: 1; min-width: 0; color: inherit; text-decoration: none; }
/* The CITADL mark is a one-colour mask, so it takes the text colour in both modes. */
.mark { flex: none; width: var(--citadl-space-section); height: var(--citadl-space-section); background: var(--ink);
  -webkit-mask: url('/citadl/logomark.svg') center / contain no-repeat; mask: url('/citadl/logomark.svg') center / contain no-repeat; }
.product, h1 { font-family: var(--citadl-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--citadl-letter-spacing-display); }
.product { font-size: var(--citadl-font-size-title); }

.page { flex: 1; width: 100%; max-width: calc(var(--column) + var(--gutter) * 2); margin: 0 auto;
  padding: var(--citadl-space-section) max(var(--gutter), env(safe-area-inset-right)) calc(var(--citadl-space-page) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); }

/* ---- type ---- */
h1, h2, p, ul, ol { margin: 0; }
h1 { font-size: var(--citadl-font-size-display); line-height: 1.15; }
h2 { font-size: var(--citadl-font-size-title); font-weight: 600; line-height: 1.25; }
/* Vertical rhythm comes from the container, not from each element: sections sit
 * a section apart and the things inside one sit a stack apart. These two rules
 * come after the resets above so that they win over them. */
.page > * + * { margin-top: var(--citadl-space-section); }
section > * + * { margin-top: var(--citadl-space-stack); }
.muted { color: var(--ink-2); }
.small { font-size: var(--citadl-font-size-body); }
/* A label is spaced capitals; hierarchy comes from type and space, never from a new hue. */
.label, label { display: block; font-size: var(--citadl-font-size-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--citadl-letter-spacing-label); color: var(--ink-2); margin-bottom: var(--citadl-space-tight); }
/* Numbers and data, and only those, are set in mono with tabular figures. */
.num, time { font-family: var(--citadl-font-mono); font-variant-numeric: tabular-nums; }
time { white-space: nowrap; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--citadl-space-cell); min-height: var(--tap);
  padding: 0 var(--citadl-space-panel); border: var(--citadl-hairline) solid var(--line); border-radius: var(--r); background: none;
  font-weight: 500; text-decoration: none; color: var(--ink);
  transition: border-color var(--t), background-color var(--t), color var(--t); }
.btn:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-tint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.btn.danger { color: var(--danger); border-color: hsl(var(--citadl-destructive) / 0.4); }
.btn.danger:hover:not(:disabled) { background: hsl(var(--citadl-destructive) / 0.1); border-color: hsl(var(--citadl-destructive) / 0.4); }
.btn.quiet { border-color: transparent; color: var(--ink-2); font-size: var(--citadl-font-size-body); }
.btn.quiet:hover:not(:disabled) { color: var(--ink); }
.btn.block { display: flex; width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---- inputs ---- */
input[type=text], input[type=email], input[type=search], select, textarea { display: block; width: 100%; min-height: var(--tap);
  padding: var(--citadl-space-cell) var(--citadl-space-stack); border: var(--citadl-hairline) solid var(--line); border-radius: var(--r);
  background: var(--bg); font-size: var(--field-text); transition: border-color var(--t); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--accent-line); }
textarea { min-height: calc(var(--tap) * 2); resize: vertical; }
input:disabled, select:disabled, textarea:disabled { opacity: .7; }
::placeholder { color: var(--ink-2); opacity: .7; }
.field + .field { margin-top: var(--citadl-space-stack); }
/* A message under a field or an action. The error colour is Mainframe's one status red. */
.msg { font-size: var(--citadl-font-size-body); color: var(--ink-2); }
.msg.error { color: var(--danger); }

/* ---- list row ---- */
.list { list-style: none; padding: 0; border-top: var(--citadl-hairline) solid var(--line); }
.row { display: flex; align-items: center; gap: var(--citadl-space-stack); min-height: var(--tap);
  padding: var(--citadl-space-stack) 0; border-bottom: var(--citadl-hairline) solid var(--line); }
.row .main { flex: 1; min-width: 0; }
.row .title { font-weight: 500; }
.row .meta { font-size: var(--citadl-font-size-body); color: var(--ink-2); }

/* ---- status label ---- */
.status { flex: none; display: inline-flex; align-items: center; gap: var(--citadl-space-tight); white-space: nowrap;
  font-size: var(--citadl-font-size-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--citadl-letter-spacing-label); color: var(--ink-2); }
.status::before { content: ''; width: var(--citadl-space-cell); height: var(--citadl-space-cell); background: currentColor; }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.status.danger { color: var(--danger); }