/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #081222 #f8fafc #0b0f14 #3b82f6 #4b8cf7 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

/* DARK BY DEFAULT — the owner chose it on the blueprint. The dark set is the
   page; the light set below applies while <html> carries data-theme="light",
   which the platform's own toggle sets and remembers. color-scheme rides each
   block so controls and scrollbars follow the ground. */
:root {
  color-scheme: dark;
  --canvas: #0b0f14;
  --surface: #23272c;
  --surface-2: #171b20;
  --border: #2d3135;
  --border-strong: #54575b;
  --ink: #f8fafc;
  --muted: #999c9f;
  --accent: #3b82f6;
  --accent-hover: #5895f7;
  --accent-ink: #0b0f14;
  --accent-text: #4b8cf7;
  --accent-strong: #5995f8;
  --accent-soft: #162846;
  --accent-border: #21437a;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0d281d;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #301e12;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #311216;
  --danger-strong: #d16969;
  --chart-1: #3b82f6;
  --chart-2: #d476ea;
  --chart-3: #d9414f;
  --chart-4: #c89121;
  --chart-5: #33990c;
  --chart-6: #21b4bb;
  --font-display: "Archivo Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Manrope Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.04em;
  --eyebrow-tracking: 0.14em;

  --look: swiss;
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-btn: none;
  --section-y: 6rem;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 500;
  --measure: 60ch;
}

/* The same palette on a light page — written here, never by the app. Do not
   repoint any of these from app code: a token that references another token
   here is a cycle, and CSS makes every property in a cycle invalid. */
html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --border: #ddddde;
  --border-strong: #b6b7b9;
  --ink: #0b0f14;
  --muted: #6d6f72;
  --accent: #3b82f6;
  --accent-hover: #326fd1;
  --accent-ink: #0b0f14;
  --accent-text: #2e65bf;
  --accent-strong: #2e65bf;
  --accent-soft: #e4eefe;
  --accent-border: #a7c7fb;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #3b82f6;
  --chart-2: #c96bdf;
  --chart-3: #c52c3f;
  --chart-4: #bd870a;
  --chart-5: #2f8116;
  --chart-6: #179fa5;
}

/* ====================================================================
 * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty.
 *
 * design.css is a FLOOR, not a ceiling.
 *
 * For a long time it was both, and the cost was measurable: an app could
 * not write a single CSS rule, so every app built here had the same 10px
 * radius, the same Public Sans at the same 15px, the same 1px borders and
 * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three
 * apps in a row came out looking like the same product in three coats of
 * paint, which is what this file exists to end.
 *
 * It loads AFTER design.css and theme.css, so anything here wins.
 *
 * ---- THE FIRST LEVER: RETUNE THE SYSTEM ---------------------------
 *
 * A :root block here re-tunes every component at once — nothing is
 * restyled one class at a time. These are the tokens that decide an app's
 * CHARACTER, and they are the fastest way to make two apps look nothing
 * alike:
 *
 *   --radius-sm --radius --radius-lg   0 is brutal, 4 is crisp, 18 is soft
 *   --font-sans --font-mono            a display face changes more than colour
 *   --t-xs … --t-5xl                   the type scale, and how far it ramps
 *   --lh --lh-tight --track-tight      density and tone
 *   --s-1 … --s-12                     the spacing scale: tight or generous
 *   --shadow --shadow-raised           flat, or lifted
 *   --border --border-strong widths    hairline, or heavy and drawn
 *   --dur-1 --dur-2 --ease             brisk, or languid
 *   --content-max --measure            a wide dashboard or a narrow reading page
 *
 * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner
 * picked the palette on the approval card before you built anything, and
 * it is the only part of the look they chose themselves. theme.css holds
 * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an
 * rgb() or an hsl(), here or anywhere. The validator refuses those.
 *
 * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE ---------------------
 *
 * design.css covers the ordinary furniture. It does NOT cover the one
 * screen that makes this app itself — a timer's dial, a board's columns,
 * a chart, a seating plan, a game grid. Write those here, in full, and
 * name them for what they are (.dial, .board-col), never .card-2.
 *
 * Compose the primitives where they fit and write your own where they do
 * not. An app that used only the frozen classes and added nothing shipped
 * 160 component classes and zero rules of its own — and read as generated,
 * because the system's ceiling had become the app's ceiling.
 *
 * Keep using the tokens in what you write. A rule built on var(--s-4) and
 * var(--radius) stays consistent with everything around it and follows the
 * app when its character changes; one built on 16px and 10px does not.
 * ==================================================================== */

/* A size variant design.css may not define; harmless if it already does. */
.avatar-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

/* --- Lead pipeline (kanban board) — Pipeflow's one custom screen --------- */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  align-items: start;
}

.board-col {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-card);
  min-width: 17rem;
}

.board-col-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.35rem;
  font-size: 0.875rem;
}

.board-col-total {
  padding: 0 1rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.board-col-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 0.6rem 0.75rem;
  min-height: 6rem;
  flex: 1;
  transition: background-color 120ms ease;
  border-radius: var(--radius);
}

.board-col-body.is-drop-target {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: 1px dashed var(--accent-border);
  outline-offset: -4px;
}

.board-col-empty {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  padding: 1rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.board-card {
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  cursor: grab;
  transition: box-shadow 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.board-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}

.board-card:active {
  cursor: grabbing;
}

.board-card.is-dragging {
  opacity: 0.45;
}

.board-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}