/* Rentwarden's theme: tokens and base elements.
 *
 * From the Claude Design project (Nocturne DS + the Plumbline theme, which
 * is the design's name for it, not the product's). Named for what it holds
 * rather than for either, so renaming the product again costs nothing.
 * Three ideas from that system carry the whole interface, and each one is
 * load-bearing here rather than decorative:
 *
 *   1. Severity travels in THREE channels — colour, glyph and word — so no
 *      state depends on hue alone. Red / amber / teal / slate stay separable
 *      under deuteranopia and protanopia, and all four sit far from the brand
 *      accent. Resolved is slate, deliberately not green, to keep red and
 *      green out of the same set.
 *   2. Money is the one loud thing. Headline figures hang off a plumb line —
 *      a hairline accent rule at the left edge — with dollars at 500 weight
 *      and unit/cents dropping to muted. In tables, amounts are tabular and
 *      right-aligned and nothing else; colour there would compete with
 *      severity.
 *   3. Hierarchy is size and space, never weight past 500. Inter only.
 *
 * Rules fade to transparent at their ends rather than stopping cleanly.
 * Buttons are outlined, never flooded with accent.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ─────────────────────────────────────────────── tokens: light (default) */
:root {
  --color-bg: #e7e9f1;
  --color-surface: #fbfbfe;
  --color-text: #171922;
  --color-accent: #5d5294;
  --color-divider: rgba(23, 25, 34, .13);

  --panel: #f1f2f8;
  --muted: #5c6072;
  --line: rgba(25, 27, 38, .13);
  --soft: rgba(25, 27, 38, .055);
  --accent-line: #8d81cf;
  --accent-tint: rgba(93, 82, 148, .09);

  /* Severity roles. Each pairs a foreground with its own tinted ground. */
  --crit: #a4262c;
  --crit-bg: #f7e7e7;
  --warn: #8a5600;
  --warn-bg: #f8efdd;
  --info: #0b5d73;
  --info-bg: #e3eff3;
  --res: #4d5464;
  --res-bg: #e8eaf1;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;
}

/* ──────────────────────────────────────────────────────── tokens: dark */
:root[data-theme='dark'] {
  --color-bg: #12131f;
  --color-surface: #1a1c2a;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: rgba(233, 233, 237, .14);

  --panel: #151725;
  --muted: #8f93a8;
  --line: rgba(233, 233, 237, .13);
  --soft: rgba(233, 233, 237, .055);
  --accent-line: #9184d9;
  --accent-tint: rgba(145, 132, 217, .14);

  --crit: #ef8b81;
  --crit-bg: rgba(164, 38, 44, .22);
  --warn: #dda63f;
  --warn-bg: rgba(138, 86, 0, .26);
  --info: #6dbacf;
  --info-bg: rgba(11, 93, 115, .28);
  --res: #8b90a0;
  --res-bg: rgba(233, 233, 237, .07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #12131f;
    --color-surface: #1a1c2a;
    --color-text: #e9e9ed;
    --color-accent: #9184d9;
    --color-divider: rgba(233, 233, 237, .14);
    --panel: #151725;
    --muted: #8f93a8;
    --line: rgba(233, 233, 237, .13);
    --soft: rgba(233, 233, 237, .055);
    --accent-line: #9184d9;
    --accent-tint: rgba(145, 132, 217, .14);
    --crit: #ef8b81;
    --crit-bg: rgba(164, 38, 44, .22);
    --warn: #dda63f;
    --warn-bg: rgba(138, 86, 0, .26);
    --info: #6dbacf;
    --info-bg: rgba(11, 93, 115, .28);
    --res: #8b90a0;
    --res-bg: rgba(233, 233, 237, .07);
  }
}

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

/* `hidden` is a promise the browser only keeps at zero specificity: any rule
   that sets `display` on the element wins, and the thing stays on screen
   while every test that checks for the attribute passes. Two bars in this app
   were visible for exactly that reason. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 14px/1.55 Inter, system-ui, sans-serif;
  /* Tabular figures globally: every number in the product aligns by digit. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Public Sans", Inter, system-ui, sans-serif;
  /* 600 for headings, per theme/TYPOGRAPHY.md. The earlier "never past 500"
     rule came from the previous type scale; with Public Sans the page title
     is 26-30px / 600-700 and everything else stays at 400/500. */
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h6 {
  font: 600 10.5px "Public Sans", Inter, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

.muted { color: var(--muted); }

/* ──────────────────────────────────────────────────────────────── layout */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.nav {
  display: flex; align-items: center; gap: 26px;
  padding: 14px 0;
  background: linear-gradient(to right, transparent, var(--line) 40px,
              var(--line) calc(100% - 40px), transparent) no-repeat bottom / 100% 1px;
}
.nav a { color: var(--muted); text-decoration: none; font-size: 13px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-text); }

main { padding: 30px 0 72px; }

/* ───────────────────────────────────────────────────────── panels/cards */
.panel {
  background: var(--panel);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.panel-flush { padding: 0; overflow: hidden; }


/* ─────────────────────────────────── severity — colour + glyph + word */
.sev {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 11px Inter, system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
}
.sev-crit { color: var(--crit); }
.sev-warn { color: var(--warn); }
.sev-info { color: var(--info); }
.sev-res  { color: var(--res); }

/* The glyph is the second channel — never decoration. Square = critical,
   triangle = warning, circle = informational, check = resolved. */
.glyph { flex: none; display: inline-block; }
.glyph-square { width: 9px; height: 9px; background: currentColor; }
.glyph-triangle {
  width: 0; height: 0; background: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8.5px solid currentColor;
}
.glyph-circle { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
/* Unequal arms, or the rotated corner reads as a shallow chevron rather
   than a tick. The short arm is the down-stroke; the long one is the rise. */
.glyph-check {
  width: 6px; height: 10px; background: none;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}


/* ───────────────────────────────────────────────────────────── tables */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; padding: 9px 12px;
  font: 500 10.5px Inter, system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  background: linear-gradient(to right, transparent, var(--line) 40px,
              var(--line) calc(100% - 40px), transparent) no-repeat bottom / 100% 1px;
}
.table td { padding: 10px 12px; vertical-align: top; }
/* Row rules are row-level strips so the end-fade spans the row, not each cell. */
.table tbody tr {
  background: linear-gradient(to right, transparent, var(--soft) 40px,
              var(--soft) calc(100% - 40px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  background:
    linear-gradient(var(--accent-tint), var(--accent-tint)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right, transparent, var(--soft) 40px,
      var(--soft) calc(100% - 40px), transparent) no-repeat bottom / 100% 1px;
}
/* Amounts get tabular figures and right alignment and nothing else —
   colour here would compete with severity. */
.table td.amount, .table th.amount { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }

/* ──────────────────────────────────────────────────────────── controls */
/* One button, everywhere. A second button vocabulary is how two controls an
   inch apart end up different shapes.
 *
 * Secondary sits on a raised surface with a hairline round it; primary is a
 * solid dark fill. Filled rather than outlined: on a page where every card is
 * already an outlined rectangle, an outline does not read as the action.
 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 13px "Public Sans", Inter, system-ui, sans-serif;
  color: var(--color-text); text-decoration: none; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--line2);
  padding: 7px 13px; border-radius: 6px;
  /* A label that wraps inside its own button reads as two buttons. Buttons
     are short by definition; if one needs two lines, the label is wrong. */
  white-space: nowrap; flex: none;
}
.btn:hover { border-color: var(--color-text); }
.btn:active { background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface)); }

/* The one action a panel is asking for. Exactly one per panel: two solid
   fills side by side is two things claiming to be the answer. */
.btn-primary {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
  font-weight: 600;
}
.btn-primary:hover { background: color-mix(in srgb, var(--color-text) 88%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-text) 78%, transparent); }

.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--muted); }
.field .help { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.field .err { font-size: 11.5px; color: var(--crit); margin-top: 4px; }

/* ─────────────────────────────────────────────────────────── messages */
.msg {
  padding: 10px 13px; border-radius: var(--radius-sm);
  font-size: 13px; margin-bottom: 12px;
  background: var(--res-bg); border-left: 2px solid var(--res);
}
.msg.error { background: var(--crit-bg); border-left-color: var(--crit); color: var(--crit); }
.msg.warning { background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn); }
.msg.success { background: var(--info-bg); border-left-color: var(--info); color: var(--info); }

details > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
form.inline { display: inline; }