/* skelly redesign v2 — design tokens.
 *
 * Every colour, size and font on the boards is here, by name. The boards in
 * ./boards are the source of truth; this file is the same values given names so
 * the app and the email share one source. Do not add, round or "improve" a
 * value. If a board uses a value that is missing here, that is a bug in this
 * file: add it with the board's exact value and say so in your report.
 *
 * The app is dark only. There is no light theme in this redesign.
 */

/* Fonts are self-hosted from @fontsource , not loaded
 * from Google, so pages and the visual check render identically everywhere. */
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: block; src: url('/fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: block; src: url('/fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: block; src: url('/fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: block; src: url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: block; src: url('/fonts/space-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-display: block; src: url('/fonts/space-mono-latin-700-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* ---- Type ---- */
  --font-sans: 'Space Grotesk', system-ui, sans-serif;   /* all reading text, buttons that are not primary/secondary-mono */
  --font-mono: 'Space Mono', monospace;                  /* page titles (h1), brand, primary buttons, metadata, times, ids, branch names */
  --text-10: 10px;  /* "private" tag */
  --text-11: 11px;  /* uppercase mono labels (PROJECTS, WHAT WAS WRONG), badge */
  --text-12: 12px;  /* mono metadata, hints in chips, sidebar sub-lines */
  --text-13: 13px;  /* chips, small notes, primary button label */
  --text-14: 14px;  /* nav items, secondary text, table cells */
  --text-15: 15px;  /* body-secondary, job descriptions */
  --text-16: 16px;  /* base body */
  --text-17: 17px;  /* job titles, intro lines */
  --text-18: 18px;  /* section h2, plan summary paragraphs */
  --text-19: 19px;  /* inbox card titles */
  --text-20: 20px;  /* settings section h2, empty-state title */
  --text-22: 22px;  /* dialog title, usage number, phone h1 */
  --text-26: 26px;  /* welcome title, email h1 */
  --text-28: 28px;  /* sign-in h1 */
  --text-30: 30px;  /* page h1 (desktop) */
  --leading-body: 1.55;      /* desktop app body */
  --leading-phone: 1.5;      /* phone body */
  --leading-summary: 1.65;   /* plan summary paragraphs (desktop) */
  --leading-title: 1.15;     /* h1 */
  --tracking-label: .1em;    /* 11px uppercase mono labels */
  --tracking-h1: -.01em;

  /* ---- Surfaces ---- */
  --bg: #0E0E0E;            /* page */
  --bg-sidebar: #0A0A0A;    /* sidebar, phone top bar */
  --surface: #161616;       /* cards, rail panels, decision bar, inputs */
  --surface-active: #1C1C1C;/* active nav item, selected segment */
  --surface-inset: #121212; /* receipt grid cells */
  --surface-menu: #1A1A1A;  /* dropdown menus */
  --skeleton: #1E1E1E;      /* loading blocks */
  --avatar: #333333;        /* initials avatar fill */

  /* ---- Lines ---- */
  --line: #262626;          /* row dividers, card borders */
  --line-soft: #222222;     /* sidebar border, settings rows, header underline */
  --line-input: #2E2E2E;    /* inputs, segmented controls, tag borders */
  --line-strong: #333333;   /* menus, dashed empty blocks, scope label */
  --line-control: #3A3A3A;  /* secondary buttons, choice buttons */
  --line-menu-sep: #2A2A2A; /* menu separators */

  /* ---- Text ---- */
  --fg: #F2F2F0;            /* primary text */
  --fg-2: #C9C9C6;          /* secondary text, inactive nav */
  --fg-3: #B5B5B2;          /* descriptions */
  --fg-4: #D4D4D1;          /* failure panel body */
  --fg-approved: #E5E5E5;   /* approved chip text/icon */
  --mute: #9A9A9A;          /* labels, times, hints */
  --faint: #6B6B6B;         /* not-started ring, empty-state icon */

  /* ---- Accent: the one primary action, and "needs you" ---- */
  --acc: #A855F7;           /* primary button fill, badge, workspace avatar */
  --acc-on: #0E0E0E;        /* text on --acc */
  --acc-text: #C084FC;      /* accent text/icons (waiting diamond, links in receipts) */
  --acc-text-soft: #D8B4FE; /* needs-you label, waiting chip text */
  --acc-line: #4C2A73;      /* needs-you box and waiting chip border */
  --acc-bg: #1A1024;        /* waiting chip fill */
  --acc-bg-box: #140D1C;    /* needs-you box fill */

  /* ---- Status: running (amber) ---- */
  --run: #F59E0B;           /* running dot, progress segment */
  --run-text: #FBBF24;
  --run-line: #5C3F0A;      /* chip border */
  --run-line-bar: #3D2E0B;  /* running strip / bar border */
  --run-bg: #1A1407;        /* chip fill */
  --run-bg-bar: #16120A;    /* running strip / bar fill */

  /* ---- Status: done / passing (green) ---- */
  --ok: #4ADE80;
  --ok-text: #86EFAC;
  --ok-line: #1F4D2E;
  --ok-bg: #0C1A11;

  /* ---- Status: stopped / failing (red) ---- */
  --bad: #F87171;
  --bad-text: #FCA5A5;
  --bad-line: #5A2626;
  --bad-bg: #1C0E0E;        /* chip, red bar */
  --bad-bg-panel: #140B0B;  /* failure panel */
  --danger: #DC2626;        /* destructive filled button */
  --on-danger: #FFFFFF;

  /* ---- Overlays ---- */
  --scrim: rgba(0,0,0,.55);           /* behind phone drawer and dialogs */
  --shadow-menu: 0 12px 32px rgba(0,0,0,.5);
  --shadow-dialog: 0 24px 64px rgba(0,0,0,.6);

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --drawer-w: 300px;        /* phone */
  --rail-w: 340px;
  --page-pad-x: 56px;       /* project pages, settings */
  --page-pad-x-inbox: 64px; /* inbox, activity */
  --page-pad-x-phone: 16px;
  --phone-bar-h: 56px;
  --breakpoint-drawer: 900px; /* below this: phone layout */
  --tap-min: 44px;
  --radius: 0;              /* hard edges everywhere */
}

/* Email (V2-Email board) uses a light palette of its own. Emails need inline
 * styles, so these are for the email template module as constants. */
/*
  EMAIL_GROUND   #F2F1EE   page behind the card
  EMAIL_CARD     #FFFFFF
  EMAIL_LINE     #E0DED8   card border, choice-card border
  EMAIL_ROW      #E8E6E1   "Since yesterday" dividers
  EMAIL_INK      #111111   text, header band, choice border
  EMAIL_INK_2    #444444   descriptions
  EMAIL_INK_3    #555555   secondary
  EMAIL_MUTE     #6A6A6A   footer, hints
  EMAIL_DASHED   #8C877C   "Something else…" dashed border
  EMAIL_ACC      #7E22CE   primary button fill (white text)
  EMAIL_ACC_TEXT #6B21A8   labels, links
  EMAIL_OK       #15803D   ✓
  EMAIL_BAD      #B91C1C   ■
  EMAIL_HEADER_SUB #B5B5B2 date in the dark header band
  EMAIL_ACC_HOVER  #4C1D95 link hover (clients that support it)

  Not tokens: #FAFAFA and #777777 on V2-Email are the pretend mail-client
  header around the email, and #070707 on V2-Dialogs is the canvas backdrop
  behind the dialogs. Neither is built.
*/

/* ======================================================================
 * The app. Everything below reproduces the boards' inline styles as
 * classes; the computed styles are the boards' exactly (the visual check
 * compares pixels). Nothing here sets box-sizing globally: the boards
 * don't, and some of their sizes depend on it.
 * ====================================================================== */

/* Links: the boards' a / a:hover. :where keeps a:hover weaker than any
 * class below, as an inline colour on a board beats it. */
:where(a) { color: var(--fg); }
:where(a):hover { color: var(--acc-text); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
[hidden] { display: none !important; }

body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-16); line-height: var(--leading-body); }

/* ---- Shell: sidebar, main column ---- */
.shell { position: relative; display: flex; min-height: 100vh; }
.col { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.main { flex-grow: 1; }

.side { width: var(--sidebar-w); flex: none; box-sizing: border-box; position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto; background: var(--bg-sidebar); border-right: 1px solid var(--line-soft); padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.close-menu { display: none; }

.switcher { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); color: var(--fg); padding: 10px 12px; margin: 0; font: inherit; text-align: left; }
.switcher.on { border-color: var(--acc); }
.ws-mark { width: 26px; height: 26px; flex: none; background: var(--acc); color: var(--acc-on); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.ws-mark.small { width: 20px; height: 20px; font-size: 11px; }
.two { flex-grow: 1; display: flex; flex-direction: column; line-height: 1.25; }
.two-a { font-weight: 600; font-size: 14px; }
.two-b { font-size: 12px; color: var(--mute); }

.group { display: flex; flex-direction: column; gap: 2px; }
.label { padding: 0 10px 6px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--mute); }
.item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--fg-2); text-decoration: none; font-size: 14px; }
.item.on { background: var(--surface-active); color: var(--fg); font-weight: 600; }
.item.new { color: var(--mute); }
.grow { flex-grow: 1; }
.badge { background: var(--acc); color: var(--acc-on); font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 0 7px; }

.foot { margin-top: auto; }
.account { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 10px; margin: 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--fg); font: inherit; text-align: left; }
.account.on { background: var(--surface-active); }
.avatar { width: 28px; height: 28px; flex: none; background: var(--avatar); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; }

/* ---- Menus ---- */
.menu { position: fixed; z-index: 20; left: 14px; width: 280px; background: var(--surface-menu); border: 1px solid var(--line-strong); box-shadow: var(--shadow-menu); padding: 6px; }
.menu-ws { top: 124px; }
.menu-me { bottom: 76px; }
.menu-h { padding: 8px 12px 4px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--mute); }
.menu-who { padding: 10px 12px; display: flex; flex-direction: column; line-height: 1.3; }
.menu-sep { height: 1px; background: var(--line-menu-sep); margin: 6px 0; }
.menu-form { margin: 0; }
.mi { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 12px; margin: 0; border: 0; background: transparent; text-decoration: none; font: inherit; font-size: 14px; color: var(--fg); text-align: left; }
.tick { font-size: 12px; color: var(--mute); }

/* ---- Phone: top bar, drawer ---- */
.topbar { display: none; }
.scrim { position: fixed; inset: 0; z-index: 9; background: var(--scrim); }
.iconbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: transparent; color: var(--fg); }
.iconbtn.me .avatar { color: var(--fg); }

@media (max-width: 899px) {
  body { line-height: var(--leading-phone); }
  .shell { display: block; }
  .col { min-height: 100vh; }
  .topbar { flex: none; height: var(--phone-bar-h); display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--line-soft); background: var(--bg-sidebar); }
  .top-title { flex-grow: 1; font-family: var(--font-mono); font-weight: 700; font-size: 16px; }
  .side { display: none; position: fixed; z-index: 10; left: 0; top: 0; bottom: 0; width: var(--drawer-w); height: 100%; }
  .side.open { display: flex; }
  .brand { padding: 0 0 0 8px; }
  .close-menu { order: 2; margin-left: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--fg); }
  .menu-ws { top: 146px; }
  .menu-me.from-top { top: 56px; right: 8px; bottom: auto; left: auto; }
}

/* ---- Signed out, no workspace ---- */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

/* ---- One page, two layouts: .dk shows from 900px up, .ph below it ---- */
@media (min-width: 900px) { .ph { display: none !important; } }
@media (max-width: 899px) { .dk { display: none !important; } }
/* The decision bar stays at the bottom of the window on a long page. */
.bar { position: sticky; bottom: 0; z-index: 5; }
/* The running dot in the Live panel's heading (and the phone Live row). */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
/* A project's tables (History, Backlog, Checks) scroll sideways on a phone. */
@media (max-width: 899px) { .tab-body { overflow-x: auto; } .tab-body > div { padding: 20px 16px !important; } }