/* MaggotClaw design kit 1.1 -- web components. Hand-written; reads ONLY the variables in tokens.css.
 * The recipe is IMAGO's web (site_chrome.py "PHASE 1" block + "THE ROAD, INSIDE THE APP", 2026-11-02),
 * cut down to plain element selectors + a few classes so any MaggotClaw page can link it as-is.
 * Dark is the default; <html data-theme="light"> (or "system") gives the light road greens.
 * Classes: .card .panel .hero  .btn .primary .danger .danger-fill .linkish  .muted .subtle .caption .display
 *          .bignum .stat .n  .tbl  .pill (.ok .warn .bad .info)  .tag  .ok .review .danger(text)  .mono .num
 *          .topbar .sidebar .navitem  .linkrow  .skel
 * Rules that matter:
 *   borders over shadows (dark = no shadows; light = soft shadows on floating things only); ONE primary per screen
 *   (dark accent blue, light sun yellow); headings Bricolage Grotesque 800/700/600, body Inter 400/500/600;
 *   radius sm (4) tags/checkboxes, md (10) inputs + cards, lg (14) big cards/dialogs/pop-ups, xl (20) panels/hero,
 *   full (pill) every button and chip; 4px spacing scale only; sentence case, no ALL-CAPS. */

html { background: var(--color-bg); }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-family-sans); font-size: var(--font-body-lg-size); line-height: var(--font-body-lg-line);
  font-weight: var(--font-weight-regular); -webkit-font-smoothing: antialiased;
}
:root { caret-color: var(--color-accent); }
:where(b, strong, th, legend, dt) { font-weight: var(--font-weight-semibold); }
code, kbd, samp, pre, .mono { font-family: var(--font-family-mono); }
.num, .tbl td, .bignum, .stat .n { font-variant-numeric: tabular-nums; }

/* type: headings in Bricolage Grotesque (h1 800 narrow, h2 700, h3 600), body Inter; balanced heading lines;
   sentence case everywhere, no all-caps */
h1, h2, h3, .display { color: var(--color-text); text-wrap: balance; text-transform: none; }
h1 { font-family: var(--font-h1-family); font-size: var(--font-h1-size); line-height: var(--font-h1-line); font-weight: var(--font-h1-weight);
  font-variation-settings: "wdth" var(--font-h1-wdth); letter-spacing: -.02em; margin: 0 0 var(--space-3); }
h2 { font-family: var(--font-h2-family); font-size: var(--font-h2-size); line-height: var(--font-h2-line); font-weight: var(--font-h2-weight);
  font-variation-settings: "wdth" var(--font-h2-wdth); letter-spacing: -.01em; margin: var(--space-7) 0 var(--space-3); }
h3 { font-family: var(--font-h3-family); font-size: var(--font-h3-size); line-height: var(--font-h3-line); font-weight: var(--font-h3-weight);
  margin: 0 0 var(--space-3); }
.display { font-family: var(--font-display-family); font-size: var(--font-display-size); line-height: var(--font-display-line);
  font-weight: var(--font-display-weight); font-variation-settings: "wdth" var(--font-display-wdth); letter-spacing: -.02em; margin: 0 0 var(--space-3); }
/* big numbers: information, not something to click -> text colour, display face */
.bignum, .stat .n { font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); letter-spacing: -.02em;
  font-size: var(--font-display-size); line-height: var(--font-display-line); color: var(--color-text); }
:is(.card, .panel) > :is(h2, h3):first-child { margin-top: 0; }
p { margin: 0 0 var(--space-4); max-width: var(--layout-reading); }
.muted { color: var(--color-text-muted); font-size: var(--font-label-size); line-height: var(--font-label-line); }
.subtle, .caption { color: var(--color-text-subtle); font-size: var(--font-caption-size); line-height: var(--font-caption-line); }
a { color: var(--color-accent); text-underline-offset: .2em; text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-enter), text-decoration-thickness var(--dur-fast) var(--ease-enter); }
a:hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }
.ok { color: var(--color-success); } .review { color: var(--color-warning); } .danger { color: var(--color-danger); } .info { color: var(--color-info); }

/* app frame: 48px top bar, 240px sidebar (dimmer than the work area), active item = accent-subtle + accent label */
.topbar { height: var(--layout-topbar); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-5);
  background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.sidebar { width: var(--layout-sidebar); background: var(--color-surface-2); border-right: 1px solid var(--color-border); padding: var(--space-3); }
.navitem { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-row); padding: 0 var(--space-4);
  border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-size: var(--font-label-size); font-weight: var(--font-weight-medium);
  transition: background-color var(--dur-fast) var(--ease-enter), color var(--dur-fast) var(--ease-enter); }
.navitem:hover { background: var(--color-surface); color: var(--color-text); }
.navitem[aria-current="page"], .navitem.active { background: var(--color-accent-subtle); color: var(--color-accent); }

/* cards (radius 10), big cards (14), panels / hero blocks (20): 1px border on a surface, NO shadow at rest */
.card, .panel, .hero { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: none; padding: var(--space-5); margin: 0 0 var(--space-4); }
.card.big { border-radius: var(--radius-lg); padding: var(--space-6); }
.panel, .hero { border-radius: var(--radius-xl); padding: var(--space-6); }
/* things you open lift a little and show their edge in accent (light: plus a soft shadow; dark: border only) */
a.card, .linkrow { display: block; color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-enter), background-color var(--dur-fast) var(--ease-enter),
    transform var(--dur-normal) var(--ease-emphasized-enter), box-shadow var(--dur-normal) var(--ease-emphasized-enter); }
.linkrow { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
@media (hover: hover) {
  a.card:hover, .linkrow:hover { border-color: var(--color-accent); color: inherit; transform: translateY(-2px);
    box-shadow: 0 1px 2px var(--color-shadow-key), 0 10px 24px -12px var(--color-shadow-ambient); }
}
/* floating things (menus, pop-ups, dialogs, toasts): a lighter surface + border-raised edge; light mode adds a soft
   shadow (the shadow colours are transparent in dark, so dark stays borders-only) */
dialog, .menu, .toast, [popover] { background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border-raised); box-shadow: var(--shadow-16); }
dialog { border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-64); }
dialog::backdrop { background: var(--color-backdrop); }
.menu, [popover] { border-radius: var(--radius-lg); padding: var(--space-2); }
.toast { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }

/* pills / chips (full) and tags (radius 4): quiet, words carry the meaning */
.pill, .tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text-muted); font-size: var(--font-caption-size); line-height: var(--font-caption-line); font-weight: var(--font-weight-medium); }
.tag { border-radius: var(--radius-sm); padding: 0 var(--space-2); }
:is(.pill, .tag).ok { background: var(--color-success-bg); color: var(--color-success); border-color: transparent; }
:is(.pill, .tag).warn { background: var(--color-warning-bg); color: var(--color-warning); border-color: transparent; }
:is(.pill, .tag).bad { background: var(--color-danger-bg); color: var(--color-danger); border-color: transparent; }
:is(.pill, .tag).info { background: var(--color-info-bg); color: var(--color-info); border-color: transparent; }

/* forms: label above, inputs on surface with a border-strong edge, radius 10 */
input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=hidden], [type=submit], [type=button]), select, textarea {
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: 0 var(--space-4); font-family: inherit; font-size: var(--font-body-size); line-height: var(--font-body-line);
  min-height: var(--control-h-sm); box-sizing: border-box; transition: border-color var(--dur-fast) var(--ease-enter); }
textarea { padding: var(--space-3) var(--space-4); }
:is(input, select, textarea):hover { border-color: var(--color-text-muted); }
:is(input, select, textarea):focus { border-color: var(--color-accent); }
:is(input, select, textarea):disabled { background: var(--color-surface-2); color: var(--color-text-subtle); cursor: not-allowed; }
::placeholder { color: var(--color-text-subtle); opacity: 1; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--color-accent); }
label { color: var(--color-text); font-size: var(--font-label-size); font-weight: var(--font-weight-medium); }

/* buttons: every button is a pill. Secondary by default (1px border, 500); ONE primary per screen (600):
   dark = accent blue fill, light = sun yellow fill with ink text (highlight / on-highlight).
   Danger = red text; solid red only on the step that IS the delete. Lift 1px on hover, press to .98. */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--control-h-sm); padding: 0 var(--control-pad-sm); border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
  font-family: inherit; font-size: var(--font-label-size); line-height: var(--font-label-line); font-weight: var(--font-weight-medium);
  text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-enter), border-color var(--dur-fast) var(--ease-enter),
    transform var(--dur-normal) var(--ease-emphasized-enter); }
button:hover, .btn:hover { background: var(--color-surface-2); color: var(--color-text); }
button:active, .btn:active { background: color-mix(in oklab, var(--color-surface-2), var(--color-text) 7%); }
:is(button, .btn).primary { background: var(--color-highlight); border-color: var(--color-highlight); color: var(--color-on-highlight); font-weight: var(--font-weight-semibold); }
:is(button, .btn).primary:hover { background: var(--color-highlight-hover); border-color: var(--color-highlight-hover); color: var(--color-on-highlight); }
:is(button, .btn).primary:active { background: var(--color-highlight); }
:is(button, .btn).danger { color: var(--color-danger); }
:is(button, .btn).danger-fill { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); }
:is(button, .btn).linkish { background: none; border-color: transparent; color: var(--color-accent); }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (hover: hover) {
  :is(button, .btn):not(:disabled, [aria-disabled="true"], .linkish):hover { transform: translateY(-1px); }
}
:is(button, .btn):not(:disabled, [aria-disabled="true"]):active { transform: translateY(0) scale(.98); transition-duration: var(--dur-fast); }

/* focus: 2px ring, 2px off, never animated */
:is(a, button, input, select, textarea, summary, [tabindex], .btn):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); transition: none; }

/* tables: muted 500 headings, border dividers, 40px rows */
table { border-collapse: collapse; }
.tbl th, .tbl td { border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); text-align: left; height: var(--control-row); box-sizing: border-box; }
.tbl th { color: var(--color-text-muted); font-size: var(--font-label-size); font-weight: var(--font-weight-medium); background: var(--color-surface-2); }
.tbl tr:hover td { background: var(--color-surface-2); }
.tbl tr[aria-selected="true"] td { background: var(--color-accent-subtle); }

/* <details>: slides open where the browser can size to auto (interpolate-size), plain open/close elsewhere */
summary { cursor: pointer; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip;
    transition: block-size var(--dur-gentle) var(--ease-standard), content-visibility var(--dur-gentle) allow-discrete; }
  details[open]::details-content { block-size: auto; }
}

/* page to page: a quick cross-fade, the new page rising a few pixels (~200 ms; Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mc-vt-out var(--dur-quick) var(--ease-exit) both; }
::view-transition-new(root) { animation: mc-vt-in var(--dur-normal) var(--ease-emphasized-enter) both; }
@keyframes mc-vt-out { to { opacity: 0; } }
@keyframes mc-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* scrollbars: quiet */
* { scrollbar-color: var(--color-border-strong) transparent; }

/* SKELETON loader (MaggotClaw App Standard, owner 2026-10-26): grey blocks shaped like the
   content that is coming, never the word "Loading" alone. Shown only after 150 ms; a slow
   sheen, none under reduced motion. Markup:
   <div class="skel" aria-hidden="true"><span class="skel-line skel-head"></span>
   <span class="skel-line w90"></span><span class="skel-line w75"></span><span class="skel-block"></span>
   </div><span class="vh">Loading</span>   (+ aria-busy="true" on the region being filled) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skel { display: grid; gap: var(--space-4); animation: skel-show 0s linear 150ms both; }
.skel-line, .skel-block { display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-2) 0%, color-mix(in oklab, var(--color-surface-2), var(--color-text) 7%) 50%, var(--color-surface-2) 100%);
  background-size: 200% 100%; animation: skel-sheen 1.4s ease-in-out infinite; }
.skel-line { height: var(--space-4); }
.skel-head { height: 22px; width: 55%; margin-bottom: var(--space-3); }
.skel-block { height: 96px; border-radius: var(--radius-md); margin: var(--space-3) 0; }
.skel .w90 { width: 90%; } .skel .w75 { width: 75%; } .skel .w60 { width: 60%; } .skel .w40 { width: 40%; }
@keyframes skel-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes skel-sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* MOTION OFF: under the OS reduced-motion setting (unless <html data-motion="on">) and always under
   <html data-motion="off">: no transitions, no animations, no lifts, no page transitions, no sliding <details> */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) *, :root:not([data-motion="on"]) *::before, :root:not([data-motion="on"]) *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  :root:not([data-motion="on"]) details::details-content { transition: none !important; }
  :root:not([data-motion="on"]) :is(button, .btn, a.card, .linkrow) { transform: none !important; }
  :root:not([data-motion="on"])::view-transition-group(*), :root:not([data-motion="on"])::view-transition-old(*),
  :root:not([data-motion="on"])::view-transition-new(*) { animation: none !important; }
  :root:not([data-motion="on"]) :is(.skel-line, .skel-block) { background: var(--color-surface-2); }
}
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important; }
:root[data-motion="off"] details::details-content { transition: none !important; }
:root[data-motion="off"] :is(button, .btn, a.card, .linkrow) { transform: none !important; }
:root[data-motion="off"]::view-transition-group(*), :root[data-motion="off"]::view-transition-old(*),
:root[data-motion="off"]::view-transition-new(*) { animation: none !important; }
:root[data-motion="off"] :is(.skel-line, .skel-block) { background: var(--color-surface-2); }