/* Palette, type and the two themes. Every colour in the UI comes from here. */

:root {
    --ground: #E9E7E2; --surface: #F8F7F4; --raised: #FFFFFF;
    --ink: #15181B; --muted: #63676A; --line: #CFCCC5; --line-soft: #DEDBD5;
    --accent: #C8451A; --accent-btn: #C8451A; --good: #2F6B4F; --warn: #9A6B12;
    --shadow: 0 1px 2px rgba(21,24,27,.06), 0 8px 24px rgba(21,24,27,.05);
    --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  }
  body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
  p { margin: 0; } a { color: var(--accent); }
  .topbar-title { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side { border-right: 1px solid var(--line); background: var(--surface); padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 60px; height: calc(100vh - 60px); }
  .side-foot span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .side-group { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 11px 5px; }
  .side-nav button:hover { color: var(--ink); background: var(--raised); }
  .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .muted { color: var(--muted); } .mono { font-family: var(--mono); }
  nav button:hover { color: var(--ink); background: var(--raised); }
  .card { border: 1px solid var(--line); border-radius: 6px; background: var(--raised); box-shadow: var(--shadow); }
  /* prose stays in the body face; the mono face is for data — times, ids, versions */
  .sub { font-size: 13.5px; color: var(--muted); max-width: 62ch; }
  .row-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.5; }
  .btn:hover { border-color: var(--ink); }
  .btn.primary { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
  .btn.danger:hover { border-color: var(--accent); color: var(--accent); }
  textarea { font-family: var(--mono); font-size: 12.5px; min-height: 160px; }
  .field > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
  .pill.ok { color: var(--good); border-color: var(--good); }
  .pill.warn { color: var(--warn); border-color: var(--warn); }
  .key { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; background: var(--surface); border: 1px dashed var(--line); border-radius: 4px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .lic-sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
  .keybox code { font-family: var(--mono); font-size: 17px; letter-spacing: .08em; padding: 11px 14px; border: 1px dashed var(--line); border-radius: 6px; background: var(--raised); flex: 1 1 320px; min-width: 0; overflow-x: auto; }
  .keybox code.masked { color: var(--muted); letter-spacing: .18em; }
  .lic-cell { background: var(--raised); padding: 16px 20px; display: grid; gap: 6px; align-content: start; }
  .seatbar i.on { background: var(--accent); }
  .months i.paid { background: var(--good); }
  .months i.own { background: var(--accent); }
  .chip { font-family: var(--mono); font-size: 10.5px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
  .chip.on { color: var(--ink); border-color: var(--ink); }
  .chip.later { color: var(--accent); border-color: var(--accent); opacity: .8; }
  .cell > span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .cal-head { background: var(--raised); padding: 7px 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .cal-day { background: var(--raised); min-height: 92px; padding: 6px 6px 8px; display: grid; gap: 3px; align-content: start; }
  .cal-day.out { background: var(--surface); }
  .cal-add:hover { color: var(--ink); background: var(--surface); }
  .cal-slot:hover { border-color: var(--accent); color: var(--accent); }
  .day b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .slot:hover { border-color: var(--accent); color: var(--accent); }
  .slot.add { color: var(--muted); border-style: dashed; }
  .slot.add:hover { color: var(--ink); border-color: var(--ink); }
  .type-tile:hover { border-color: var(--ink); }
  .type-tile.on { border-color: var(--accent-btn); box-shadow: inset 0 0 0 1px var(--accent-btn); }
  .asset-art .glyph { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .asset-info span { font-family: var(--mono); font-size: 10px; color: var(--muted); }
  .kit-row:hover { background: var(--surface); }
  .empty p { color: var(--muted); max-width: 44ch; }
  dialog.ui p { color: var(--muted); font-size: 14px; }
  .toast.bad { background: var(--accent-btn); color: #fff; }
  th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }