/*
 * Tabs & Spaces design tokens.
 *
 * Near-monochrome by design: hierarchy comes from greyscale value, weight,
 * size and spacing, not hue. Colour is reserved for rare semantic moments.
 *
 * Light and dark live side by side via `light-dark()`. The active scheme is
 * driven by `color-scheme`: "light dark" follows the OS (the "System" theme);
 * `data-theme="light" | "dark"` on <html> pins one explicitly.
 */

:root {
  color-scheme: light dark;

  /* ── Colour: surfaces ─────────────────────────────────────────── */
  /* Warm neutrals: paper and stone, not screen grey. */
  --color-backdrop: light-dark(#f3f2ef, #0b0b0a); /* app frame behind panels, sidebar */
  --color-canvas: light-dark(#ffffff, #151514); /* main content panel */
  --color-surface: light-dark(#f7f6f3, #1b1b19); /* wells, tracks, quiet fills */
  --color-surface-raised: light-dark(#ffffff, #222220); /* cards on surface, menus, pills */
  --color-hover: light-dark(rgb(28 25 20 / 0.045), rgb(255 250 240 / 0.055));
  --color-active: light-dark(rgb(28 25 20 / 0.075), rgb(255 250 240 / 0.09));

  /* ── Colour: lines ────────────────────────────────────────────── */
  --color-border: light-dark(#ebe9e4, #262624);
  --color-border-strong: light-dark(#dcd9d2, #353532);

  /* ── Colour: text (all pass WCAG AA on canvas, surface and backdrop) */
  --color-text: light-dark(#1a1917, #edece8);
  --color-text-muted: light-dark(#57544e, #aeaca6);
  --color-text-subtle: light-dark(#6b6862, #8f8d87);

  /* ── Colour: emphasis ─────────────────────────────────────────── */
  --color-accent: light-dark(#1a1917, #edece8);
  --color-accent-hover: light-dark(#34322e, #ffffff);
  --color-on-accent: light-dark(#ffffff, #151514);
  --color-focus-ring: light-dark(#1a1917, #edece8);
  --ring: 0 0 0 3px light-dark(rgb(28 25 20 / 0.1), rgb(255 250 240 / 0.14));

  /* ── Colour: semantic (muted, used sparingly) ─────────────────── */
  --color-danger: light-dark(#b42318, #f97066);
  --color-success: light-dark(#1f7a4d, #47cd89);

  /* ── Typography ───────────────────────────────────────────────── */
  --font-sans:
    "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-md: 0.875rem; /* 14, the UI base */
  --text-lg: 1rem; /* 16 */
  --text-xl: 1.25rem; /* 20 */
  --text-2xl: 1.5rem; /* 24 */
  --text-3xl: 2rem; /* 32 */
  --text-4xl: 2.75rem; /* 44 */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;

  /* ── Spacing (4px grid) ───────────────────────────────────────── */
  --space-0-5: 0.125rem; /* 2 */
  --space-1: 0.25rem; /* 4 */
  --space-1-5: 0.375rem; /* 6 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */

  /* ── Shape ────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;
  --border-width: 1px;

  /* Layered, warm-tinted shadows; dark mode leans on a hairline highlight instead. */
  --shadow-xs:
    0 0 0 1px light-dark(rgb(28 25 20 / 0.06), rgb(255 250 240 / 0.06)),
    0 1px 2px light-dark(rgb(28 25 20 / 0.06), rgb(0 0 0 / 0.5));
  --shadow-sm:
    0 0 0 1px light-dark(rgb(28 25 20 / 0.05), rgb(255 250 240 / 0.06)),
    0 1px 2px light-dark(rgb(28 25 20 / 0.04), rgb(0 0 0 / 0.4)),
    0 2px 6px light-dark(rgb(28 25 20 / 0.04), rgb(0 0 0 / 0.3));
  --shadow-panel:
    0 0 0 1px light-dark(rgb(28 25 20 / 0.055), rgb(255 250 240 / 0.05)),
    0 1px 3px light-dark(rgb(28 25 20 / 0.04), rgb(0 0 0 / 0.4)),
    0 12px 32px -12px light-dark(rgb(28 25 20 / 0.08), rgb(0 0 0 / 0.5));
  --shadow-popover:
    0 0 0 1px light-dark(rgb(28 25 20 / 0.07), rgb(255 250 240 / 0.08)),
    0 4px 8px light-dark(rgb(28 25 20 / 0.04), rgb(0 0 0 / 0.3)),
    0 16px 40px -8px light-dark(rgb(28 25 20 / 0.14), rgb(0 0 0 / 0.6));

  /* ── Motion ───────────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout ───────────────────────────────────────────────────── */
  --sidebar-width: 256px;
  --sidebar-width-collapsed: 60px;
  --control-height-sm: 30px;
  --control-height-md: 36px;
  --panel-inset: 8px; /* gap between the app frame and the content panel */
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* A small, opinionated reset on top of the tokens. */

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

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.925em;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}


body {
  background: var(--color-backdrop, #f3f2ef);
  font-family: var(--font-sans, system-ui, sans-serif);
}

.frame {
  min-height: 100dvh;
  padding: var(--panel-inset, 10px);
}

.panel {
  min-height: calc(100dvh - 2 * var(--panel-inset, 10px));
  background: var(--color-canvas);
  border: var(--border-width, 1px) solid var(--color-border);
  border-radius: var(--radius-xl, 14px);
  box-shadow: var(--shadow-panel);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-bottom: var(--border-width, 1px) solid var(--color-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.mark {
  width: 28px;
  height: 28px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav a:not(.brand) {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  color: var(--color-text);
}

.brand {
  margin-right: var(--space-3);
}

.who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

main {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-10) var(--space-8) var(--space-16);
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.lede {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

h2 {
  margin: var(--space-10) 0 var(--space-3);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.card {
  background: var(--color-canvas);
  border: var(--border-width, 1px) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px light-dark(rgb(28 25 20 / 0.03), rgb(0 0 0 / 0.2));
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
}

.tile-label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tile-value {
  font-size: 1.625rem;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  white-space: nowrap;
}

thead th {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

tbody tr {
  border-top: var(--border-width, 1px) solid var(--color-border);
}

td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.name a {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.name a:hover {
  text-decoration: underline;
}

.sub {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

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

.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: var(--space-2);
  border-radius: 999px;
  background: light-dark(rgb(28 25 20 / 0.06), rgb(255 255 255 / 0.08));
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.chip.standard {
  background: light-dark(#e6eefc, #172338);
  color: light-dark(#1d4ed8, #9db8f5);
}

.chip.priority {
  background: light-dark(#efe7fb, #261b38);
  color: light-dark(#6d28d9, #c4a8f5);
}

.chip.late {
  background: light-dark(#fdf1dc, #3a2d14);
  color: light-dark(#8a4b06, #f3c27a);
}

.chip.awake {
  background: light-dark(#e3f4e8, #15301e);
  color: light-dark(#1f7a3d, #8fd6a6);
}

.notice.error {
  color: light-dark(#b42318, #f5a3a3);
}

.versions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

label.check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

label.check input {
  width: auto;
}

details.remove summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--control-height-sm, 30px);
}

details.remove form {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

button.danger {
  background: light-dark(#b42318, #f5a3a3);
  color: light-dark(#fff, #1c1914);
  height: var(--control-height-sm, 30px);
  font-size: var(--text-sm);
}

.chip.gone {
  background: light-dark(#fbe6e6, #3a1717);
  color: light-dark(#b42318, #f5a3a3);
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
}

.facts dt {
  color: var(--color-text-muted);
}

form.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5, 6px);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

input,
select,
textarea {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: var(--border-width, 1px) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--weight-regular);
}

input,
select {
  height: calc(var(--control-height-md, 36px) + 2px);
}

select {
  max-width: 20rem;
}

textarea {
  max-width: 40rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

button {
  align-self: flex-start;
  height: var(--control-height-md, 36px);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

button.quiet {
  background: transparent;
  color: var(--color-text-muted);
  border: var(--border-width, 1px) solid var(--color-border-strong);
  height: var(--control-height-sm, 30px);
  font-size: var(--text-sm);
}

.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.center {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 2 * var(--panel-inset, 10px));
}

.signin {
  width: min(24rem, 100%);
  padding: var(--space-8) var(--space-4);
}

.signin-mark {
  margin-bottom: var(--space-5);
}

.signin h1 {
  font-size: var(--text-2xl);
}

.signin .card {
  margin-top: var(--space-6);
}

.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.message {
  padding: var(--space-4) var(--space-5);
  border: var(--border-width, 1px) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
}

/* Our replies sit on the quiet surface, so the customer's words stand out. */
.message.staff {
  background: var(--color-surface);
}

.message-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.message-body {
  margin-top: var(--space-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
}

.actions {
  display: inline-flex;
  gap: var(--space-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

form.inline {
  margin-top: var(--space-3);
}

@media (max-width: 48rem) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main,
  .top {
    padding-inline: var(--space-4);
  }

  /* The header wraps: the brand on its own line, then the sections, then who's signed in. */
  .top,
  .nav {
    flex-wrap: wrap;
  }

  .nav {
    gap: var(--space-2) var(--space-4);
  }

  .brand {
    flex-basis: 100%;
    white-space: nowrap;
  }
}