/* Day desk and Night desk.
   Night: layered near-black, Plus Jakarta Sans, 6px radius, borders instead of shadows.
   Day: the same layout on a light canvas with ink text and thin borders.
   JetBrains Mono stays on the case number. Status pills share one component.
   Accent #3b9eff is the primary button fill in both themes, with dark ink #14161a
   (about 6.5:1). On the day canvas that blue is too faint for a ring, an active
   mark, or a text link (about 2.6:1 on #f4f5f6), so Day uses #1473e6 for the mark
   and #1366d6 for links and navigation labels (about 5.4:1 on white, 4.9:1 on
   #f4f5f6). Night links use #3b9eff (about 6.8:1 on the raised surface). Status
   green, amber, and red stay separate from buttons. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("fonts/inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

html[data-theme="night"] {
  color-scheme: dark;
  --nd-bg: #08090a;
  --nd-raised: #0f1011;
  --nd-overlay: #161718;
  --nd-line: #23252a;
  --nd-line-strong: #323334;
  --nd-input: #383b3f;
  --nd-hover: #1c1e22;
  --nd-text: #f7f8f8;
  --nd-text-2: #d0d6e0;
  --nd-text-3: #a4aab4;
  --nd-accent: #3b9eff;
  --nd-accent-ink: #14161a;
  --nd-mark: #3b9eff;
  --nd-ok: #3dce6e;
  --nd-danger: #ff8b8b;
  --nd-danger-ink: #14161a;
  --nd-warn: #f0c14d;
  --nd-info: #8fd4e4;
  /* Agenda urgency. Softer than the status fills so a long list stays quiet.
     Ink is the header and due-date text (WCAG AA on the night raised surface
     and on an 8% mix of the bar). The bar is the row edge. Blue stays off. */
  --ag-over: #c46a6a;
  --ag-over-ink: #d9a0a0;
  --ag-today: #c4a15a;
  --ag-today-ink: #d4bc78;
  --ag-soon: #3f9a62;
  --ag-soon-ink: #8fc4a2;
  /* Status pill inks. Info text is the blue accent. A 10% tint of the bar
     stays under the ink at WCAG AA. */
  --pe-success-ink: var(--nd-ok);
  --pe-success-bar: var(--nd-ok);
  --pe-danger-ink: var(--nd-danger);
  --pe-danger-bar: var(--nd-danger);
  --pe-warning-ink: var(--nd-warn);
  --pe-warning-bar: var(--nd-warn);
  --pe-info-ink: var(--nd-accent);
  --pe-info-bar: var(--nd-accent);
  --pe-neutral-ink: var(--nd-text-2);
  --pe-neutral-bar: var(--nd-text-3);
  /* Navigation pills. 16% accent on the raised surface stays about 5.5:1 under
     #3b9eff; the 24% hover stays about 4.7:1. */
  --pe-link: #3b9eff;
  --pe-nav-ink: #3b9eff;
  --pe-nav-line: #3b9eff;
  --pe-nav-bg: color-mix(in srgb, #3b9eff 16%, var(--nd-raised));
  --pe-nav-hover: color-mix(in srgb, #3b9eff 24%, var(--nd-raised));
}
html,
html[data-theme="day"] {
  color-scheme: light;
  --nd-bg: #f4f5f6;
  --nd-raised: #ffffff;
  --nd-overlay: #f7f8f8;
  --nd-line: #e1e4e8;
  --nd-line-strong: #c5cad1;
  --nd-input: #ffffff;
  --nd-hover: #eceee8;
  --nd-text: #14161a;
  --nd-text-2: #2c3138;
  --nd-text-3: #5c6570;
  --nd-accent: #3b9eff;
  --nd-accent-ink: #14161a;
  --nd-mark: #1473e6;
  --nd-ok: #157a32;
  --nd-danger: #b42318;
  --nd-danger-ink: #ffffff;
  --nd-warn: #8a5a00;
  --nd-info: #0b6e7c;
  /* Same hues as the day status inks. Text on white and on an 8% tint clears AA. */
  --ag-over: #b42318;
  --ag-over-ink: #b42318;
  --ag-today: #8a5a00;
  --ag-today-ink: #8a5a00;
  --ag-soon: #157a32;
  --ag-soon-ink: #157a32;
  /* #3b9eff is the tint and the border. Day text uses a darker blue in the
     same family so the word clears AA on white (the accent itself is 2.8:1). */
  --pe-success-ink: var(--nd-ok);
  --pe-success-bar: var(--nd-ok);
  --pe-danger-ink: var(--nd-danger);
  --pe-danger-bar: var(--nd-danger);
  --pe-warning-ink: var(--nd-warn);
  --pe-warning-bar: var(--nd-warn);
  --pe-info-ink: #1257b3;
  --pe-info-bar: var(--nd-accent);
  --pe-neutral-ink: var(--nd-text-2);
  --pe-neutral-bar: var(--nd-text-3);
  /* #1366d6 is the same blue family as the accent and clears WCAG AA as text
     on white (about 5.4:1), on #f4f5f6 (about 4.9:1), and on a 10–16% tint. */
  --pe-link: #1366d6;
  --pe-nav-ink: #1366d6;
  --pe-nav-line: #1366d6;
  --pe-nav-bg: color-mix(in srgb, #3b9eff 10%, var(--nd-raised));
  --pe-nav-hover: color-mix(in srgb, #3b9eff 16%, var(--nd-raised));
}
/* Pages whose content policy blocks the theme script still follow the OS.
   An explicit Day choice stays light. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="day"]) {
    color-scheme: dark;
    --nd-bg: #08090a;
    --nd-raised: #0f1011;
    --nd-overlay: #161718;
    --nd-line: #23252a;
    --nd-line-strong: #323334;
    --nd-input: #383b3f;
    --nd-hover: #1c1e22;
    --nd-text: #f7f8f8;
    --nd-text-2: #d0d6e0;
    --nd-text-3: #a4aab4;
    --nd-accent: #3b9eff;
    --nd-accent-ink: #14161a;
    --nd-mark: #3b9eff;
    --nd-ok: #3dce6e;
    --nd-danger: #ff8b8b;
    --nd-danger-ink: #14161a;
    --nd-warn: #f0c14d;
    --nd-info: #8fd4e4;
    --ag-over: #c46a6a;
    --ag-over-ink: #d9a0a0;
    --ag-today: #c4a15a;
    --ag-today-ink: #d4bc78;
    --ag-soon: #3f9a62;
    --ag-soon-ink: #8fc4a2;
    --pe-success-ink: var(--nd-ok);
    --pe-success-bar: var(--nd-ok);
    --pe-danger-ink: var(--nd-danger);
    --pe-danger-bar: var(--nd-danger);
    --pe-warning-ink: var(--nd-warn);
    --pe-warning-bar: var(--nd-warn);
    --pe-info-ink: var(--nd-accent);
    --pe-info-bar: var(--nd-accent);
    --pe-neutral-ink: var(--nd-text-2);
    --pe-neutral-bar: var(--nd-text-3);
    --pe-link: #3b9eff;
    --pe-nav-ink: #3b9eff;
    --pe-nav-line: #3b9eff;
    --pe-nav-bg: color-mix(in srgb, #3b9eff 16%, var(--nd-raised));
    --pe-nav-hover: color-mix(in srgb, #3b9eff 24%, var(--nd-raised));
  }
}
html {
  --nd-font: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nd-mono: "JetBrains Mono", ui-monospace, monospace;
  --nd-radius: 6px;
  --bg: var(--nd-bg);
  --panel: var(--nd-raised);
  --panel-2: var(--nd-overlay);
  --ink: var(--nd-text);
  --muted: var(--nd-text-3);
  --muted-2: var(--nd-text-3);
  --line: var(--nd-line);
  --line-2: var(--nd-line);
  --chip: var(--nd-overlay);
  --brand: var(--nd-text-2);
  --brand-800: var(--nd-text);
  --brand-900: var(--nd-text);
  --brand-tint: var(--nd-overlay);
  --brand-ink: var(--nd-accent-ink);
  --ok: var(--nd-ok);
  --ok-bg: color-mix(in srgb, var(--nd-ok) 14%, transparent);
  --ok-line: color-mix(in srgb, var(--nd-ok) 45%, transparent);
  --warn-ink: var(--nd-warn);
  --warn-bg: color-mix(in srgb, var(--nd-warn) 14%, transparent);
  --warn-line: color-mix(in srgb, var(--nd-warn) 45%, transparent);
  --danger: var(--nd-danger);
  --danger-bg: color-mix(in srgb, var(--nd-danger) 14%, transparent);
  --danger-line: color-mix(in srgb, var(--nd-danger) 45%, transparent);
  --next: var(--nd-info);
  --next-bg: color-mix(in srgb, var(--nd-info) 14%, transparent);
  --next-line: color-mix(in srgb, var(--nd-info) 40%, transparent);
  --amber-solid: var(--nd-warn);
  --red-solid: var(--nd-danger);
  --green-solid: var(--nd-ok);
  --blue-solid: var(--nd-info);
  --pending: var(--nd-text-3);
  --accent: var(--nd-mark);
  --focus-ring: 0 0 0 2px var(--nd-bg), 0 0 0 4px var(--nd-mark);
  --shadow: none;
  --shadow-pop: 0 16px 40px color-mix(in srgb, #000 28%, transparent);
  --radius: 8px;
  --radius-ctl: var(--nd-radius);
  --font: var(--nd-font);
  --font-heading: var(--nd-font);
  --font-fact: var(--nd-font);
  --fg: var(--nd-text);
  --card: var(--nd-raised);
  --border: var(--nd-line);
  --err: var(--nd-danger);
}

/* One status pill. Same radius, padding, size, and weight in Night and Day.
   The e-signature list uses this class (pe-status + is-success / is-danger /
   is-warning / is-info / is-neutral). Signed, complete, done, live, and
   confirmed are success. Expired, overdue, declined, failed, and conflict
   are danger. Due today, pending, needs review, and in progress are warning.
   Sent, opened, and scheduled are info. Draft, not started, canceled, and
   off are neutral. The tint is 10% of the bar on the raised surface so the
   ink stays WCAG AA. Agenda urgency keeps the quieter red, amber, and green
   by overriding these variables inside .ag-home. */
.pe-status,
.ui-status,
.tag.done,
.tag.gap,
.tag.next,
.tag.blocked,
.tag.neutral,
.badge-blocked,
.md-state,
.warnpill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 2px 0 0;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--pe-line, var(--nd-line-strong));
  background: var(--pe-bg, var(--nd-overlay));
  color: var(--pe-ink, var(--pe-neutral-ink));
  font-family: var(--nd-font);
  font-size: 0.85rem;
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
  vertical-align: baseline;
  text-decoration: none;
}
.pe-status.is-success,
.tag.done,
.ui-status.ok,
.ui-status.met,
.md-state.ok {
  --pe-ink: var(--pe-success-ink);
  --pe-line: color-mix(in srgb, var(--pe-success-bar) 55%, var(--nd-line));
  --pe-bg: color-mix(in srgb, var(--pe-success-bar) 10%, var(--nd-raised));
}
.pe-status.is-danger,
.tag.gap,
.ui-status.over,
.badge-blocked,
.md-state.bad {
  --pe-ink: var(--pe-danger-ink);
  --pe-line: color-mix(in srgb, var(--pe-danger-bar) 55%, var(--nd-line));
  --pe-bg: color-mix(in srgb, var(--pe-danger-bar) 10%, var(--nd-raised));
}
.pe-status.is-warning,
.tag.next,
.tag.blocked,
.ui-status.today,
.ui-status.warn,
.md-state.warn,
.warnpill {
  --pe-ink: var(--pe-warning-ink);
  --pe-line: color-mix(in srgb, var(--pe-warning-bar) 55%, var(--nd-line));
  --pe-bg: color-mix(in srgb, var(--pe-warning-bar) 10%, var(--nd-raised));
}
.pe-status.is-info {
  --pe-ink: var(--pe-info-ink);
  --pe-line: color-mix(in srgb, var(--pe-info-bar) 55%, var(--nd-line));
  --pe-bg: color-mix(in srgb, var(--pe-info-bar) 10%, var(--nd-raised));
}
.ui-status.soon {
  --pe-ink: var(--pe-success-ink);
  --pe-line: color-mix(in srgb, var(--pe-success-bar) 55%, var(--nd-line));
  --pe-bg: color-mix(in srgb, var(--pe-success-bar) 10%, var(--nd-raised));
}
.pe-status.is-neutral,
.tag.neutral,
.ui-status.neutral,
.ui-status.later,
.md-state:not(.ok):not(.warn):not(.bad) {
  --pe-ink: var(--pe-neutral-ink);
  --pe-line: var(--nd-line-strong);
  --pe-bg: color-mix(in srgb, var(--pe-neutral-bar) 10%, var(--nd-raised));
}
/* A later semantic class wins over a legacy tag color. */
.pe-status.is-success { --pe-ink: var(--pe-success-ink); --pe-line: color-mix(in srgb, var(--pe-success-bar) 55%, var(--nd-line)); --pe-bg: color-mix(in srgb, var(--pe-success-bar) 10%, var(--nd-raised)); }
.pe-status.is-danger { --pe-ink: var(--pe-danger-ink); --pe-line: color-mix(in srgb, var(--pe-danger-bar) 55%, var(--nd-line)); --pe-bg: color-mix(in srgb, var(--pe-danger-bar) 10%, var(--nd-raised)); }
.pe-status.is-warning { --pe-ink: var(--pe-warning-ink); --pe-line: color-mix(in srgb, var(--pe-warning-bar) 55%, var(--nd-line)); --pe-bg: color-mix(in srgb, var(--pe-warning-bar) 10%, var(--nd-raised)); }
.pe-status.is-info { --pe-ink: var(--pe-info-ink); --pe-line: color-mix(in srgb, var(--pe-info-bar) 55%, var(--nd-line)); --pe-bg: color-mix(in srgb, var(--pe-info-bar) 10%, var(--nd-raised)); }
.pe-status.is-neutral { --pe-ink: var(--pe-neutral-ink); --pe-line: var(--nd-line-strong); --pe-bg: color-mix(in srgb, var(--pe-neutral-bar) 10%, var(--nd-raised)); }
.md-state:empty { display: none; }
.pe-status .status-glyph,
.ui-status .status-glyph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }