/* Quarrora STANDBY skin — Material You, dark (the owner's Claude Design export, vault/design/).
 *
 * Loaded ONLY by the standby build (src/app/layout.tsx links /standby-skin.css when
 * lib/edition.ts says "standby"; scripts/standby/build-standby.mjs copies this file into that
 * build's export). The prod build never loads it, so prod's look cannot change through it.
 *
 * Everything keys on html[data-edition="standby"] and on the data-q / data-variant / data-tone
 * markers the shared components carry (Sidebar, TopBar, Card, PageHeader, Pill, StatusBadge,
 * Button). Pages are untouched — so every screen, today's and tomorrow's, wears the skin.
 *
 * Kept from DESIGN.md on purpose: letters that are not a status colour stay one colour (#F5F5F5,
 * the dark theme's 96%) — the type hierarchy is still size and weight — and no currency symbol.
 */

/* ---- tokens: the design's palette, in the app's HSL token slots ---------------------------- */
html[data-edition="standby"],
html[data-edition="standby"].dark {
  --background: 222 17% 7%;        /* #0F1115 */
  --foreground: 0 0% 96%;          /* #F5F5F5 */
  --card: 218 17% 13%;             /* #1B1F26  surface */
  --card-foreground: 0 0% 96%;
  --primary: 218 100% 83%;         /* #A8C8FF */
  --primary-foreground: 210 100% 19%; /* #00305F */
  --secondary: 217 22% 23%;        /* #2D3747  secondary container */
  --secondary-foreground: 0 0% 96%;
  --muted: 216 16% 16%;            /* #232830  surface high */
  --muted-foreground: 0 0% 96%;
  --accent: 218 100% 83%;
  --accent-foreground: 210 100% 19%;
  --border: 220 13% 22%;           /* #30353F  outline variant */
  --ring: 218 100% 83%;
  --radius: 1rem;

  --q-s-lowest: #0B0D11;
  --q-s-low: #161920;
  --q-s: #1B1F26;
  --q-s-high: #232830;
  --q-s-highest: #2C323C;
  --q-sc: #2D3747;
  --q-pc: #21477D;
  --q-on-pc: #E1EAFF;
  --q-outline: #8C929C;
  --q-ov: #30353F;
  --q-primary: #A8C8FF;
  --q-on-primary: #00305F;
  color-scheme: dark;
}

/* ---- type: Roboto Flex everywhere but code ---------------------------------------------- */
html[data-edition="standby"] body,
html[data-edition="standby"] body :where(*:not(code, pre, kbd, samp, .font-mono)) {
  font-family: "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
}
html[data-edition="standby"] body {
  background: #0F1115;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
html[data-edition="standby"] :focus-visible { outline: 2px solid var(--q-primary); outline-offset: 2px; }

/* ---- the STANDBY banner ------------------------------------------------------------------ */
html[data-edition="standby"] [data-q="standby-banner"] {
  background: var(--q-pc);
  color: var(--q-on-pc);
  border-radius: 0 0 16px 16px;
  margin: 0 12px;
}

/* ---- top bar ------------------------------------------------------------------------------ */
html[data-edition="standby"] [data-q="topbar"] {
  background: #0F1115;
  border-bottom: 0;
  height: 72px;
  padding-inline: 16px 24px;
}
/* Height, shape and fill only — the field's own left padding leaves room for its search icon. */
html[data-edition="standby"] [data-q="topbar"] input {
  height: 48px;
  border-radius: 24px;
  border: 0;
  background: var(--q-s-high);
}
html[data-edition="standby"] [data-q="topbar"] input:focus { background: var(--q-s-highest); }

/* ---- navigation drawer ------------------------------------------------------------------- */
html[data-edition="standby"] [data-q="drawer"] {
  background: var(--q-s-low);
  border-right: 0;
  border-radius: 0 24px 24px 0;
  padding-top: 12px;
}
html[data-edition="standby"] [data-q="drawer"]:not(.w-16) { width: 17rem; }
html[data-edition="standby"] [data-q="nav"] {
  min-height: 44px;
  border-radius: 22px;
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 500;
  background: none;
}
html[data-edition="standby"] [data-q="nav"]:hover { background: rgba(245, 245, 245, 0.06); }
html[data-edition="standby"] [data-q="nav"][aria-current="page"] {
  background: var(--q-sc);
  font-weight: 700;
}
html[data-edition="standby"] [data-q="nav"][aria-current="page"] svg { color: var(--q-primary); }
html[data-edition="standby"] [data-q="nav"] > span.absolute { display: none; } /* prod's accent bar */
html[data-edition="standby"] [data-q="ghead"] {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding-inline: 16px;
}

/* ---- page header --------------------------------------------------------------------------- */
html[data-edition="standby"] [data-q="page-header"] h1 {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 40;
}
html[data-edition="standby"] [data-q="page-header"] p { font-size: 15px; margin-top: 6px; }

/* ---- cards ---------------------------------------------------------------------------------- */
html[data-edition="standby"] [data-q="card"] {
  background: var(--q-s);
  border-color: transparent;
  border-radius: 24px;
  padding: 20px;
}
html[data-edition="standby"] [data-q="card"] h2 { font-size: 16px; font-weight: 700; }
html[data-edition="standby"] [data-q="card"] [data-q="card"] {
  background: var(--q-s-low);
  border: 1px solid var(--q-ov);
  border-radius: 20px;
}

/* ---- buttons: pill-shaped, the design's filled / tonal / outlined / text ---------------------- */
html[data-edition="standby"] button[data-variant] {
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none;
}
html[data-edition="standby"] button[data-variant="primary"],
html[data-edition="standby"] button[data-variant="accent"] { background: var(--q-primary); color: var(--q-on-primary); }
html[data-edition="standby"] button[data-variant="primary"]:hover,
html[data-edition="standby"] button[data-variant="accent"]:hover { filter: brightness(1.07); }
html[data-edition="standby"] button[data-variant="secondary"] { background: var(--q-sc); color: #F5F5F5; }
html[data-edition="standby"] button[data-variant="secondary"]:hover { background: #364256; }
html[data-edition="standby"] button[data-variant="outline"] { background: none; border: 1px solid var(--q-outline); }
html[data-edition="standby"] button[data-variant="outline"]:hover,
html[data-edition="standby"] button[data-variant="ghost"]:hover { background: rgba(245, 245, 245, 0.06); }

/* ---- status pills: the design's six tones ----------------------------------------------------- */
html[data-edition="standby"] [data-q="pill"] {
  border-radius: 8px;
  font-weight: 700;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  padding: 3px 10px;
}
html[data-edition="standby"] [data-q="pill"][data-tone="green"]  { background: rgba(110, 220, 170, 0.13); color: #93E7C1; }
html[data-edition="standby"] [data-q="pill"][data-tone="amber"]  { background: rgba(246, 200, 110, 0.14); color: #F7D08C; }
html[data-edition="standby"] [data-q="pill"][data-tone="sky"]    { background: rgba(130, 200, 245, 0.14); color: #A6D8F8; }
html[data-edition="standby"] [data-q="pill"][data-tone="slate"]  { background: rgba(200, 204, 214, 0.12); color: #D8DBE2; }
html[data-edition="standby"] [data-q="pill"][data-tone="violet"] { background: rgba(196, 176, 255, 0.14); color: #D4C7FF; }
html[data-edition="standby"] [data-q="pill"][data-tone="red"]    { background: rgba(255, 180, 171, 0.14); color: #FFB8AF; }

/* ---- registers (tables) ----------------------------------------------------------------------- */
html[data-edition="standby"] table { border-collapse: separate; border-spacing: 0; }
html[data-edition="standby"] thead th {
  background: var(--q-s-low);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  height: 44px;
  border-bottom: 1px solid var(--q-ov);
}
html[data-edition="standby"] tbody td { height: 52px; border-bottom: 1px solid var(--q-ov); font-size: 14px; }
html[data-edition="standby"] tbody tr:last-child td { border-bottom: 0; }
html[data-edition="standby"] tbody tr:hover td { background: rgba(245, 245, 245, 0.035); }
html[data-edition="standby"] td, html[data-edition="standby"] th { font-variant-numeric: tabular-nums; }

/* ---- fields ------------------------------------------------------------------------------------ */
html[data-edition="standby"] main input:not([type="checkbox"]):not([type="radio"]),
html[data-edition="standby"] main select,
html[data-edition="standby"] main textarea,
html[data-edition="standby"] [data-q="card"] input:not([type="checkbox"]):not([type="radio"]),
html[data-edition="standby"] [data-q="card"] select {
  background: var(--q-s-high);
  border-color: transparent;
  border-radius: 12px;
}