/* ============================================================
   TRAZO ADMIN — ported from the Trazo Design System
   (claude.ai/design project "Trazo Design System").
   Concept: a drafting studio. Warm ink on warm paper, marked
   with a single confident vermilion stroke.
   Layers: fonts → tokens → base elements → trz- components →
   app shell. Class names match the design system (trz-*).
   ============================================================ */

/* ---- Fonts (self-hosted) ---- */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/HankenGrotesk-Variable-7b3229a0.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "JetBrains Mono"; src: url("/assets/JetBrainsMono-Regular-8b44e3da.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/JetBrainsMono-Medium-8a32ca45.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/JetBrainsMono-SemiBold-64d82b82.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/JetBrainsMono-Bold-838e3cbe.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  color-scheme: light;

  /* Ink — warm near-black neutral scale */
  --ink-950: #14110E;
  --ink-900: #1B1712;
  --ink-800: #2A241E;
  --ink-700: #3D362E;
  --ink-600: #574E44;
  --ink-500: #746A5E;
  --ink-400: #8C8071;
  --ink-300: #B7AA97;
  --ink-250: #CBBDA8;
  --ink-200: #DBCFBC;
  --ink-150: #E6DCC9;
  --ink-100: #EEE5D6;
  --ink-50:  #F4EDE0;

  /* Paper — warm backgrounds */
  --paper:        #F6F1E6;
  --paper-raised: #FFFFFF;
  --paper-sunken: #EAE2D2;

  /* Vermilion — the Trazo stroke */
  --vermilion-700: #9E2A15;
  --vermilion-600: #BE3320;
  --vermilion-500: #DC3E24;
  --vermilion-400: #EF5A3C;
  --vermilion-200: #F0B6A5;
  --vermilion-100: #F5D6C8;
  --vermilion-50:  #FAEAE1;

  /* Semantic scales */
  --green-600:  #2E7D52; --green-500: #369163; --green-100: #D1E8DC; --green-50: #E4F1E9;
  --amber-600:  #A76A12; --amber-500: #C9861E; --amber-100: #EFDDB8; --amber-50: #F5EAD2;
  --red-600:    #B62419; --red-500:   #D2352A; --red-100:   #F0CCC6; --red-50:   #F8E3DE;
  --blue-600:   #275EA6; --blue-500:  #2F72C4; --blue-100:  #C7DBF0; --blue-50:  #E1EBF7;

  /* Semantic aliases — reference these in components */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-600);
  --text-subtle:    var(--ink-400);
  --text-inverse:   var(--paper);
  --text-accent:    var(--vermilion-600);
  --text-link:      var(--vermilion-600);
  --text-on-accent: #FFFFFF;

  --surface-page:        var(--paper);
  --surface-card:        var(--paper-raised);
  --surface-sunken:      var(--paper-sunken);
  --surface-tint:        var(--ink-50);
  --surface-accent:      var(--vermilion-500);
  --surface-accent-tint: var(--vermilion-100);
  --surface-inverse:     var(--ink-900);

  --line:        var(--ink-200);
  --line-subtle: var(--ink-150);
  --line-strong: var(--ink-250);
  --line-heavy:  var(--ink-900);
  --line-accent: var(--vermilion-500);
  --focus-ring:  var(--vermilion-500);

  --success: var(--green-500); --success-strong: var(--green-600); --success-tint: var(--green-100);
  --warning: var(--amber-500); --warning-strong: var(--amber-600); --warning-tint: var(--amber-100);
  --danger:  var(--red-500);   --danger-strong:  var(--red-600);   --danger-tint:  var(--red-100);
  --info:    var(--blue-500);  --info-strong:    var(--blue-600);  --info-tint:    var(--blue-100);

  /* "Ink object" pair — solid dark chips (default button, code block,
     toast, active pagination). These stay dark in BOTH themes, like a
     physical object resting on the page, so pin them instead of riding
     the ink scale (which flips in dark mode). */
  --surface-strong:        #1B1712;
  --surface-strong-hover:  #2A241E;
  --surface-strong-active: #14110E;
  --text-on-strong:        #FFFFFF;

  /* Typography */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800;
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px;
  --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px;
  --leading-tight: 1.12; --leading-snug: 1.28; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-label: 0.08em; --tracking-caps: 0.12em;

  /* Spacing / layout */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --width-prose: 680px; --width-content: 1080px;
  --sidebar-width: 248px;
  --control-sm: 30px; --control-md: 38px; --control-lg: 46px;
  --pad-card: var(--space-6);

  /* Effects */
  --radius-xs: 3px; --radius-sm: 5px; --radius-md: 7px; --radius-lg: 10px; --radius-pill: 999px;
  --border-hair: 1px; --border-thick: 2px; --border-mark: 3px;
  --shadow-xs: 0 1px 1px rgba(27, 23, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(27, 23, 18, 0.06), 0 1px 1px rgba(27, 23, 18, 0.04);
  --shadow-md: 0 4px 10px -2px rgba(27, 23, 18, 0.08), 0 2px 4px -2px rgba(27, 23, 18, 0.06);
  --shadow-lg: 0 12px 28px -6px rgba(27, 23, 18, 0.12), 0 4px 8px -4px rgba(27, 23, 18, 0.07);
  --shadow-focus: 0 0 0 3px var(--vermilion-100), 0 0 0 1px var(--vermilion-500);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms; --dur-base: 180ms;
}

/* ============================================================
   DARK THEME (from the design system's tokens/colors.css)
   Opt in with <html data-theme="dark">, or it follows the OS
   automatically unless a page pins data-theme="light". The ink
   scale inverts (950 = brightest, 50 = darkest, closest to the
   dark paper) so every component that already reads a raw ink
   scale step or a semantic text/surface alias repaints correctly
   with no code changes. Keep the two blocks below identical.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink-950: #FBF8F2;
  --ink-900: #F1E9D8;
  --ink-800: #E1D6C0;
  --ink-700: #CBBEA2;
  --ink-600: #A99878;
  --ink-500: #8A7A5C;
  --ink-400: #6C5E45;
  --ink-300: #52462F;
  --ink-250: #453A26;
  --ink-200: #362D1D;
  --ink-150: #2A2216;
  --ink-100: #211A10;
  --ink-50:  #18130B;

  --paper:        #15110B;
  --paper-raised: #1F1810;
  --paper-sunken: #0E0B07;

  --vermilion-700: #FF9078;
  --vermilion-600: #FA7A5E;
  --vermilion-500: #EF5A3C;
  --vermilion-400: #F2775C;
  --vermilion-200: #6B3122;
  --vermilion-100: #452118;
  --vermilion-50:  #301811;

  --green-600:  #4FAE7C; --green-500: #3E9668; --green-100: #1D3B2B; --green-50: #17291F;
  --amber-600:  #E0A238; --amber-500: #C9861E; --amber-100: #3E2F14; --amber-50: #2A2110;
  --red-600:    #F0796A; --red-500:   #E85B49; --red-100:   #3E1E19; --red-50:   #2A1512;
  --blue-600:   #6FA6E8; --blue-500:  #5590DA; --blue-100:  #1C3452; --blue-50:  #16283F;

  --text-accent: var(--vermilion-400);
  --text-link:   var(--vermilion-400);

  --surface-strong:        #0B0906;
  --surface-strong-hover:  #262019;
  --surface-strong-active: #000000;

  --shadow-focus: 0 0 0 3px var(--vermilion-100), 0 0 0 1px var(--vermilion-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    color-scheme: dark;

    --ink-950: #FBF8F2;
    --ink-900: #F1E9D8;
    --ink-800: #E1D6C0;
    --ink-700: #CBBEA2;
    --ink-600: #A99878;
    --ink-500: #8A7A5C;
    --ink-400: #6C5E45;
    --ink-300: #52462F;
    --ink-250: #453A26;
    --ink-200: #362D1D;
    --ink-150: #2A2216;
    --ink-100: #211A10;
    --ink-50:  #18130B;

    --paper:        #15110B;
    --paper-raised: #1F1810;
    --paper-sunken: #0E0B07;

    --vermilion-700: #FF9078;
    --vermilion-600: #FA7A5E;
    --vermilion-500: #EF5A3C;
    --vermilion-400: #F2775C;
    --vermilion-200: #6B3122;
    --vermilion-100: #452118;
    --vermilion-50:  #301811;

    --green-600:  #4FAE7C; --green-500: #3E9668; --green-100: #1D3B2B; --green-50: #17291F;
    --amber-600:  #E0A238; --amber-500: #C9861E; --amber-100: #3E2F14; --amber-50: #2A2110;
    --red-600:    #F0796A; --red-500:   #E85B49; --red-100:   #3E1E19; --red-50:   #2A1512;
    --blue-600:   #6FA6E8; --blue-500:  #5590DA; --blue-100:  #1C3452; --blue-50:  #16283F;

    --text-accent: var(--vermilion-400);
    --text-link:   var(--vermilion-400);

    --surface-strong:        #0B0906;
    --surface-strong-hover:  #262019;
    --surface-strong-active: #000000;

    --shadow-focus: 0 0 0 3px var(--vermilion-100), 0 0 0 1px var(--vermilion-400);
  }
}

/* ============================================================
   WHITE-LABEL BRANDING
   An org's single brand color (--brand, set inline by the
   layout on <html class="trz-branded">, or by the branding
   preview on a container) re-derives the whole vermilion scale
   with color-mix, so every accent-bearing component repaints.
   The semantic aliases are re-declared because var() references
   resolve where the custom property is *defined* — without
   them a .trz-branded container would inherit :root's already-
   resolved aliases. Keep the mix stops in step with the hand-
   tuned vermilion values in the token blocks above.
   ============================================================ */
.trz-branded {
  --vermilion-700: color-mix(in oklab, var(--brand) 72%, #14110E);
  --vermilion-600: color-mix(in oklab, var(--brand) 86%, #14110E);
  --vermilion-500: var(--brand);
  --vermilion-400: color-mix(in oklab, var(--brand) 84%, #FFFFFF);
  --vermilion-200: color-mix(in oklab, var(--brand) 38%, #FFFFFF);
  --vermilion-100: color-mix(in oklab, var(--brand) 24%, #FFFFFF);
  --vermilion-50:  color-mix(in oklab, var(--brand) 12%, #FFFFFF);

  /* Neutrals: Trazo's ink/paper are grays tinted with its brown; a branded
     shell tints the same grays with the org's brand hue instead, so the
     whole page reads as theirs — no Trazo warmth left over. */
  --ink-950: color-mix(in oklab, var(--brand) 4%,  #111111);
  --ink-900: color-mix(in oklab, var(--brand) 5%,  #181818);
  --ink-800: color-mix(in oklab, var(--brand) 6%,  #272727);
  --ink-700: color-mix(in oklab, var(--brand) 7%,  #3A3A3A);
  --ink-600: color-mix(in oklab, var(--brand) 8%,  #525252);
  --ink-500: color-mix(in oklab, var(--brand) 9%,  #6F6F6F);
  --ink-400: color-mix(in oklab, var(--brand) 10%, #888888);
  --ink-300: color-mix(in oklab, var(--brand) 12%, #B0B0B0);
  --ink-250: color-mix(in oklab, var(--brand) 14%, #C4C4C4);
  --ink-200: color-mix(in oklab, var(--brand) 15%, #D4D4D4);
  --ink-150: color-mix(in oklab, var(--brand) 16%, #E0E0E0);
  --ink-100: color-mix(in oklab, var(--brand) 16%, #E9E9E9);
  --ink-50:  color-mix(in oklab, var(--brand) 16%, #F0F0F0);

  --paper:        color-mix(in oklab, var(--brand) 7%,  #FCFCFB);
  --paper-raised: #FFFFFF;
  --paper-sunken: color-mix(in oklab, var(--brand) 12%, #F0EFED);

  --surface-strong:        color-mix(in oklab, var(--brand) 6%, #181818);
  --surface-strong-hover:  color-mix(in oklab, var(--brand) 7%, #272727);
  --surface-strong-active: color-mix(in oklab, var(--brand) 5%, #111111);

  --text-accent: var(--vermilion-600);
  --text-link:   var(--vermilion-600);
  --surface-accent:      var(--vermilion-500);
  --surface-accent-tint: var(--vermilion-100);
  --line-accent: var(--vermilion-500);
  --focus-ring:  var(--vermilion-500);
  --shadow-focus: 0 0 0 3px var(--vermilion-100), 0 0 0 1px var(--vermilion-500);

  /* Aliases re-declared for the same reason as the accent ones above. */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-600);
  --text-subtle:  var(--ink-400);
  --text-inverse: var(--paper);
  --surface-page:    var(--paper);
  --surface-card:    var(--paper-raised);
  --surface-sunken:  var(--paper-sunken);
  --surface-tint:    var(--ink-50);
  --surface-inverse: var(--ink-900);
  --line:        var(--ink-200);
  --line-subtle: var(--ink-150);
  --line-strong: var(--ink-250);
  --line-heavy:  var(--ink-900);
}

:root[data-theme="dark"] .trz-branded:not([data-theme="light"]),
.trz-branded[data-theme="dark"] {
  --vermilion-700: color-mix(in oklab, var(--brand) 55%, #FFFFFF);
  --vermilion-600: color-mix(in oklab, var(--brand) 64%, #FFFFFF);
  --vermilion-500: color-mix(in oklab, var(--brand) 85%, #FFFFFF);
  --vermilion-400: color-mix(in oklab, var(--brand) 74%, #FFFFFF);
  --vermilion-200: color-mix(in oklab, var(--brand) 45%, #15110B);
  --vermilion-100: color-mix(in oklab, var(--brand) 30%, #15110B);
  --vermilion-50:  color-mix(in oklab, var(--brand) 20%, #15110B);

  --ink-950: color-mix(in oklab, var(--brand) 4%,  #FAFAFA);
  --ink-900: color-mix(in oklab, var(--brand) 6%,  #F0F0F0);
  --ink-800: color-mix(in oklab, var(--brand) 7%,  #E0E0E0);
  --ink-700: color-mix(in oklab, var(--brand) 8%,  #C8C8C8);
  --ink-600: color-mix(in oklab, var(--brand) 9%,  #A3A3A3);
  --ink-500: color-mix(in oklab, var(--brand) 10%, #858585);
  --ink-400: color-mix(in oklab, var(--brand) 10%, #676767);
  --ink-300: color-mix(in oklab, var(--brand) 11%, #4D4D4D);
  --ink-250: color-mix(in oklab, var(--brand) 12%, #414141);
  --ink-200: color-mix(in oklab, var(--brand) 12%, #333333);
  --ink-150: color-mix(in oklab, var(--brand) 12%, #282828);
  --ink-100: color-mix(in oklab, var(--brand) 11%, #1F1F1F);
  --ink-50:  color-mix(in oklab, var(--brand) 10%, #161616);

  --paper:        color-mix(in oklab, var(--brand) 7%, #101010);
  --paper-raised: color-mix(in oklab, var(--brand) 9%, #191919);
  --paper-sunken: color-mix(in oklab, var(--brand) 5%, #0A0A0A);

  --surface-strong:        color-mix(in oklab, var(--brand) 6%, #0A0A0A);
  --surface-strong-hover:  color-mix(in oklab, var(--brand) 8%, #232323);
  --surface-strong-active: #000000;

  --text-accent: var(--vermilion-400);
  --text-link:   var(--vermilion-400);
  --shadow-focus: 0 0 0 3px var(--vermilion-100), 0 0 0 1px var(--vermilion-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .trz-branded:not([data-theme="light"]),
  :root[data-theme="auto"] .trz-branded:not([data-theme="light"]),
  .trz-branded:not([data-theme]),
  .trz-branded[data-theme="auto"] {
    --vermilion-700: color-mix(in oklab, var(--brand) 55%, #FFFFFF);
    --vermilion-600: color-mix(in oklab, var(--brand) 64%, #FFFFFF);
    --vermilion-500: color-mix(in oklab, var(--brand) 85%, #FFFFFF);
    --vermilion-400: color-mix(in oklab, var(--brand) 74%, #FFFFFF);
    --vermilion-200: color-mix(in oklab, var(--brand) 45%, #15110B);
    --vermilion-100: color-mix(in oklab, var(--brand) 30%, #15110B);
    --vermilion-50:  color-mix(in oklab, var(--brand) 20%, #15110B);

    --ink-950: color-mix(in oklab, var(--brand) 4%,  #FAFAFA);
    --ink-900: color-mix(in oklab, var(--brand) 6%,  #F0F0F0);
    --ink-800: color-mix(in oklab, var(--brand) 7%,  #E0E0E0);
    --ink-700: color-mix(in oklab, var(--brand) 8%,  #C8C8C8);
    --ink-600: color-mix(in oklab, var(--brand) 9%,  #A3A3A3);
    --ink-500: color-mix(in oklab, var(--brand) 10%, #858585);
    --ink-400: color-mix(in oklab, var(--brand) 10%, #676767);
    --ink-300: color-mix(in oklab, var(--brand) 11%, #4D4D4D);
    --ink-250: color-mix(in oklab, var(--brand) 12%, #414141);
    --ink-200: color-mix(in oklab, var(--brand) 12%, #333333);
    --ink-150: color-mix(in oklab, var(--brand) 12%, #282828);
    --ink-100: color-mix(in oklab, var(--brand) 11%, #1F1F1F);
    --ink-50:  color-mix(in oklab, var(--brand) 10%, #161616);

    --paper:        color-mix(in oklab, var(--brand) 7%, #101010);
    --paper-raised: color-mix(in oklab, var(--brand) 9%, #191919);
    --paper-sunken: color-mix(in oklab, var(--brand) 5%, #0A0A0A);

    --surface-strong:        color-mix(in oklab, var(--brand) 6%, #0A0A0A);
    --surface-strong-hover:  color-mix(in oklab, var(--brand) 8%, #232323);
    --surface-strong-active: #000000;

    --text-accent: var(--vermilion-400);
    --text-link:   var(--vermilion-400);
    --shadow-focus: 0 0 0 3px var(--vermilion-100), 0 0 0 1px var(--vermilion-400);
  }
}

/* Branding customize screen: form + live previews side by side */
.trz-brandgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: var(--space-8); align-items: start; }
@media (max-width: 1024px) { .trz-brandgrid { grid-template-columns: 1fr; } } /* matches the global drawer breakpoint */
.trz-brandgrid__previews { container-type: inline-size; }

/* The two theme-pinned preview boxes, light next to dark */
.trz-brandduo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 520px) { .trz-brandduo { grid-template-columns: 1fr; } }
/* Just above the drawer breakpoint the preview column can bottom out near its
   300px minimum — too narrow for two mockups side by side, so stack them
   whenever the column itself is tight (the 520px viewport rule stays as a
   fallback for engines without container queries). */
@container (max-width: 379px) { .trz-brandduo { grid-template-columns: 1fr; } }

.trz-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; }
.trz-swatch {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15); border-radius: var(--radius-pill);
}
.trz-swatch:hover { transform: scale(1.12); }
.trz-swatch[aria-pressed="true"] { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.trz-colorwell {
  width: 40px; height: 28px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-card);
}

.trz-brandprev { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-page); margin: 6px 0 4px; }
.trz-brandprev__side { display: flex; align-items: center; padding: 14px 16px; background: var(--surface-card); border-bottom: 1px solid var(--line-subtle); }
.trz-brandprev__icon { height: 22px; width: auto; display: block; }
.trz-brandprev__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
.trz-brandprev__link { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink-900); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-extra); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: var(--space-8) 0 var(--space-3); }
h3 { font-size: var(--text-base); font-weight: var(--weight-bold); margin: var(--space-5) 0 var(--space-2); }
p  { margin: 0 0 var(--space-3); }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--vermilion-400); }

code, kbd {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-800);
  background: var(--paper-sunken); border: 1px solid var(--line-subtle);
  border-radius: var(--radius-xs); padding: 2px 6px;
}

small { font-size: var(--text-xs); color: var(--text-muted); }

::selection { background: var(--vermilion-100); }

/* ---- Tables (from the dashboard UI kit) ---- */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 10px 18px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
  background: var(--paper-sunken); border-bottom: 1px solid var(--line);
}
tbody td { padding: 13px 18px; font-size: var(--text-sm); color: var(--ink-800); border-bottom: 1px solid var(--line-subtle); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--ink-50); }
td .trz-cell-title { font-size: 14px; font-weight: var(--weight-semibold); color: var(--ink-900); }
td .trz-cell-sub { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }
/* Action cells stay on one line. A wrapping flex box reports a max-content
   width of only its widest item, so auto table layout starves the column and
   the buttons stack; the card scrolls instead if the row really is too wide. */
td .trz-actions { flex-wrap: nowrap; }

/* ============================================================
   COMPONENTS (trz-*)
   ============================================================ */

/* ---- Logo ---- */
.trz-logo { display: inline-flex; align-items: center; }
.trz-logo__word { font-family: var(--font-sans); font-weight: var(--weight-extra); letter-spacing: var(--tracking-tight); color: var(--ink-900); line-height: 1; }

/* ---- Buttons ---- */
.trz-btn {
  --_bg: var(--surface-strong); --_fg: var(--text-on-strong); --_bd: transparent;
  --_bgh: var(--surface-strong-hover); --_bga: var(--surface-strong-active);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug); white-space: nowrap; cursor: pointer;
  border: var(--border-hair) solid var(--_bd); border-radius: var(--radius-md);
  background: var(--_bg); color: var(--_fg);
  height: var(--control-md); padding: 0 16px; font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  user-select: none; text-decoration: none;
}
.trz-btn:hover { background: var(--_bgh); color: var(--_fg); }
.trz-btn:active { background: var(--_bga); transform: translateY(0.5px); }
.trz-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.trz-btn[disabled] { opacity: 0.42; pointer-events: none; }

.trz-btn--sm { height: var(--control-sm); padding: 0 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.trz-btn--lg { height: var(--control-lg); padding: 0 22px; font-size: var(--text-base); }
.trz-btn--block { width: 100%; }

.trz-btn--primary { --_bg: var(--vermilion-500); --_fg: #fff; --_bgh: var(--vermilion-400); --_bga: var(--vermilion-600); }
.trz-btn--secondary { --_bg: var(--paper-raised); --_fg: var(--ink-900); --_bd: var(--ink-250); --_bgh: var(--ink-50); --_bga: var(--ink-100); }
.trz-btn--ghost { --_bg: transparent; --_fg: var(--ink-700); --_bgh: var(--ink-100); --_bga: var(--ink-150); }
.trz-btn--danger { --_bg: var(--red-500); --_fg: #fff; --_bgh: #E0463B; --_bga: var(--red-600); }
.trz-btn--accent-soft { --_bg: var(--vermilion-100); --_fg: var(--vermilion-700); --_bgh: var(--vermilion-50); --_bga: var(--vermilion-200); }

/* button_to renders <form><button> — keep the form inline */
form.button_to { display: inline; }

/* ---- Fields & controls ---- */
.trz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.trz-field__label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-800); display: flex; align-items: center; gap: 6px; }
.trz-field__hint { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-normal); }
.trz-field__error { font-size: var(--text-xs); color: var(--danger-strong); font-weight: var(--weight-medium); }

.trz-control {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink-900);
  background: var(--paper-raised); border: var(--border-hair) solid var(--ink-250);
  border-radius: var(--radius-sm); height: var(--control-md); padding: 0 12px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  appearance: none;
}
.trz-control::placeholder { color: var(--ink-400); }
.trz-control:hover { border-color: var(--ink-300); }
.trz-control:focus { outline: none; border-color: var(--vermilion-500); box-shadow: var(--shadow-focus); }
.trz-control:disabled { background: var(--ink-100); color: var(--text-subtle); cursor: not-allowed; }

.trz-control--textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: var(--leading-normal); resize: vertical; }
.trz-control--mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.trz-control--sm { height: var(--control-sm); font-size: var(--text-sm); padding: 0 10px; }
.trz-control--code { font-family: var(--font-mono); font-size: var(--text-lg); letter-spacing: 0.25em; text-align: center; }

select.trz-control, .trz-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23746A5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; cursor: pointer;
}
/* Chevron stroke is baked into the data-URI (can't ride a token) — swap it for dark ink-500 */
:root[data-theme="dark"] select.trz-control:not([multiple]), :root[data-theme="dark"] .trz-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) select.trz-control:not([multiple]), :root:not([data-theme]) .trz-select,
  :root[data-theme="auto"] select.trz-control:not([multiple]), :root[data-theme="auto"] .trz-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  }
}
select.trz-control[multiple] { background-image: none; height: auto; min-height: 96px; padding: 6px; }
input[type="date"].trz-control { width: auto; }

/* File inputs: restyle the native "Choose File" control as an inset chip that
   reads like a small secondary trz-btn. Everything rides the ink/paper tokens,
   so dark mode and .trz-branded shells re-tint it for free.
   Height math: 3px pad ×2 + control-sm (30px) + hairline ×2 = control-md. */
input[type="file"].trz-control {
  height: auto;
  padding: 3px 12px 3px 3px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
}
input[type="file"].trz-control::file-selector-button {
  appearance: none;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug); white-space: nowrap;
  color: var(--ink-800);
  background: var(--ink-150);
  border: var(--border-hair) solid var(--ink-250);
  border-radius: var(--radius-sm);
  height: var(--control-sm); padding: 0 12px; margin-right: 12px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
input[type="file"].trz-control:hover::file-selector-button { background: var(--ink-200); border-color: var(--ink-300); }
input[type="file"].trz-control:active::file-selector-button { background: var(--ink-250); }

/* ---- Cards ---- */
.trz-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.trz-card--raised { box-shadow: var(--shadow-md); }
.trz-card--pad { padding: var(--pad-card); }
.trz-card--table { overflow-x: auto; }

/* ---- Submission review cards (the submissions index) ---- */
.trz-subcard { padding: 14px 18px; }
.trz-subcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.trz-subcard__name { font-size: 14px; font-weight: var(--weight-semibold); color: var(--ink-900); }
.trz-subcard__origin { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); overflow-wrap: anywhere; }
.trz-subcard__time { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.trz-subcard__message {
  margin: 10px 0 0; font-size: var(--text-sm); color: var(--ink-800); line-height: var(--leading-normal);
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  cursor: pointer;
}
.trz-subcard__message.is-open { display: block; -webkit-line-clamp: unset; }
.trz-subcard__reason { margin-top: 6px; font-size: var(--text-xs); color: var(--text-muted); font-style: italic; }
.trz-subcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.trz-subcard__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trz-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-subtle); }
.trz-card__title { font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--ink-900); }
.trz-card__sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.trz-card__body { padding: 20px; }
.trz-card__body h2:first-child, .trz-card__body h3:first-child { margin-top: 0; }

/* ---- Section header ---- */
.trz-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); flex-wrap: wrap; }
.trz-sechead__eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--vermilion-600); margin-bottom: 8px; }
.trz-sechead__title { font-family: var(--font-sans); font-weight: var(--weight-extra); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); color: var(--ink-900); line-height: 1.1; margin: 0; }
.trz-sechead__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 6px 0 0; max-width: 62ch; }
.trz-sechead__actions { flex: none; display: flex; align-items: center; gap: 10px; }

/* ---- Stat cards ---- */
.trz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: var(--space-6) 0 var(--space-7, 28px); }
.trz-stat { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.trz-stat__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.trz-stat__value { font-weight: var(--weight-extra); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); color: var(--ink-900); line-height: 1; font-variant-numeric: tabular-nums; }
.trz-stat__value--danger { color: var(--danger-strong); }
.trz-stat__foot { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--text-muted); }

/* ---- Alerts (flash messages, notices, warning panels) ---- */
.trz-alert {
  --_bg: var(--ink-50); --_bd: var(--line); --_ac: var(--ink-500); --_tx: var(--ink-800);
  display: flex; gap: 12px; padding: 13px 15px; border-radius: var(--radius-md);
  background: var(--_bg); border: 1px solid var(--_bd);
  border-left: var(--border-mark) solid var(--_ac);
  margin-bottom: var(--space-4);
}
.trz-alert__body { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--_tx); line-height: var(--leading-normal); overflow-wrap: break-word; }
.trz-alert__title { font-weight: var(--weight-bold); color: var(--ink-900); }
.trz-alert__actions { flex: none; display: flex; align-items: center; gap: 8px; }
.trz-alert ul { margin: 6px 0 0; padding-left: 18px; }
.trz-alert--info { --_bg: var(--blue-50); --_bd: var(--blue-100); --_ac: var(--blue-500); }
.trz-alert--success { --_bg: var(--green-50); --_bd: var(--green-100); --_ac: var(--green-500); }
.trz-alert--warning { --_bg: var(--amber-50); --_bd: var(--amber-100); --_ac: var(--amber-500); }
.trz-alert--danger { --_bg: var(--red-50); --_bd: var(--red-100); --_ac: var(--red-500); }

/* ---- Badges ---- */
.trz-badge {
  --_bg: var(--ink-100); --_fg: var(--ink-700); --_dot: var(--ink-400);
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1;
  padding: 4px 9px; border-radius: var(--radius-sm); background: var(--_bg); color: var(--_fg);
  white-space: nowrap;
}
.trz-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--_dot); flex: none; }
.trz-badge--mono { font-family: var(--font-mono); letter-spacing: 0.02em; font-weight: var(--weight-medium); }
.trz-badge--neutral { --_bg: var(--ink-100); --_fg: var(--ink-700); --_dot: var(--ink-400); }
.trz-badge--accent  { --_bg: var(--vermilion-100); --_fg: var(--vermilion-700); --_dot: var(--vermilion-500); }
.trz-badge--success { --_bg: var(--green-100); --_fg: var(--green-600); --_dot: var(--green-500); }
.trz-badge--warning { --_bg: var(--amber-100); --_fg: var(--amber-600); --_dot: var(--amber-500); }
.trz-badge--danger  { --_bg: var(--red-100); --_fg: var(--red-600); --_dot: var(--red-500); }
.trz-badge--info    { --_bg: var(--blue-100); --_fg: var(--blue-600); --_dot: var(--blue-500); }

/* ---- Key/value grid (detail pages) ---- */
.trz-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; }
.trz-kv dt { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); padding: 10px 24px 10px 0; border-bottom: 1px solid var(--line-subtle); white-space: nowrap; }
.trz-kv dd { margin: 0; font-size: var(--text-sm); color: var(--ink-900); padding: 10px 0; border-bottom: 1px solid var(--line-subtle); overflow-wrap: anywhere; }
.trz-kv dt:nth-last-of-type(1), .trz-kv dd:nth-last-of-type(1) { border-bottom: none; }
.trz-kv dd.mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-800); }

/* ---- Pagination (pagy) ---- */
.trz-pagination { display: flex; align-items: center; gap: 6px; margin-top: var(--space-4); flex-wrap: wrap; }
.trz-pagination__info { font-size: var(--text-xs); color: var(--text-muted); margin-right: 6px; }
.trz-pagination__info b { color: var(--ink-800); font-weight: var(--weight-semibold); font-family: var(--font-mono); }
.pagy { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pagy a, .pagy .current, .pagy .gap {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-700);
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pagy a:hover { background: var(--ink-50); border-color: var(--line-strong); color: var(--ink-900); }
.pagy a.current, .pagy .current { background: var(--surface-strong); border-color: var(--surface-strong); color: var(--text-on-strong); }
.pagy .gap { border: none; background: none; color: var(--ink-400); min-width: 20px; }
.pagy a[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---- Empty state ---- */
.trz-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
.trz-empty__title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--ink-900); }
.trz-empty__desc { font-size: var(--text-sm); color: var(--text-muted); max-width: 44ch; }

/* ---- API key / code wells ---- */
.trz-well {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-800);
  background: var(--paper-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; overflow-wrap: anywhere;
  user-select: all;
}

/* ---- Recovery codes grid ---- */
.trz-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: var(--space-3) 0; }
.trz-codes code { text-align: center; padding: 8px 6px; font-size: var(--text-sm); user-select: all; }

/* ============================================================
   APP SHELL
   ============================================================ */
.trz-shell { display: flex; background: var(--paper); min-height: 100vh; }

.trz-sidebar {
  width: var(--sidebar-width); flex: none;
  background: var(--paper-raised); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0;
}
.trz-sidebar__brand { padding: 18px 18px 14px; }
.trz-sidebar__brand a { display: inline-flex; }

.trz-nav { padding: 4px 12px; display: flex; flex-direction: column; gap: 2px; }
.trz-nav__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); border-left: var(--border-mark) solid transparent;
  font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink-600);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.trz-nav__item:hover { background: var(--ink-50); color: var(--ink-900); }
.trz-nav__item--active { background: var(--ink-100); color: var(--ink-900); font-weight: var(--weight-semibold); border-left-color: var(--vermilion-500); }

.trz-sidebar__foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line-subtle); display: flex; align-items: center; gap: 10px; }
.trz-sidebar__user { flex: 1; min-width: 0; }
.trz-sidebar__user-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-900); overflow-wrap: anywhere; }
.trz-sidebar__user-role { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-mono); }

.trz-main { flex: 1; min-width: 0; }

/* ---- Mobile topbar + nav drawer (hidden on desktop) ---- */
.trz-topbar { display: none; }
.trz-backdrop { display: none; }
.trz-topbar__menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-md); height: var(--control-md); flex: none;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--ink-700); cursor: pointer;
}
.trz-topbar__menu:hover { background: var(--ink-100); color: var(--ink-900); }
.trz-topbar__menu:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.trz-topbar__brand { display: inline-flex; }
.trz-page { margin: 0 auto; padding: 32px 40px 60px; }
.trz-page--narrow { max-width: 760px; }

/* ---- Logged-out (auth) layout ---- */
.trz-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--paper); padding: 24px; }
.trz-auth__box { width: 400px; max-width: 100%; }
.trz-auth__box--wide { width: 560px; }
.trz-auth__logo { display: flex; justify-content: center; margin-bottom: 26px; }
.trz-auth__card { padding: 30px; }
.trz-auth__title { font-size: 19px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); margin: 0 0 4px; }
.trz-auth__sub { font-size: 13.5px; color: var(--text-muted); margin: 0 0 22px; }
.trz-auth__foot { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--ink-400); font-family: var(--font-mono); }
.trz-auth__links { text-align: center; margin-top: 18px; font-size: var(--text-sm); }
.trz-auth__divider { text-align: center; color: var(--text-subtle); font-size: var(--text-xs); margin: 16px 0; }

/* ---- Utilities ---- */
.trz-mono { font-family: var(--font-mono); }
.trz-muted { color: var(--text-muted); }
.trz-subtle { color: var(--text-subtle); }
.trz-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trz-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.trz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.trz-right { text-align: right; }
.trz-nowrap { white-space: nowrap; }
.trz-mt { margin-top: var(--space-6); }

@media (max-width: 1024px) {
  /* Sidebar becomes an off-canvas drawer, opened from the topbar.
     1024px (not a phone-sized value) so half-screen desktop windows
     get the stacked layout instead of a crushed two-column one. */
  .trz-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: none;
  }
  .is-nav-open .trz-sidebar { transform: none; box-shadow: var(--shadow-lg); }

  .trz-backdrop {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(20, 17, 14, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .is-nav-open .trz-backdrop { opacity: 1; pointer-events: auto; }

  .trz-topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 30;
    background: var(--paper-raised); border-bottom: 1px solid var(--line);
    padding: 8px 12px;
  }

  .trz-page { padding: 20px 16px 48px; }
  .trz-grid-2 { grid-template-columns: 1fr; }

  /* Tables scroll inside their card instead of blowing out the page */
  .trz-card--table table { min-width: 560px; }
}

/* ============================================================
   MARKETING PAGES (trz-mk-*)
   Ported from the "Trazo marketing landing pages" design project
   (Home / Pricing / Docs + MarketingNav / MarketingFooter).
   ============================================================ */
.trz-mk { background: var(--paper); min-height: 100vh; }
.trz-mk-wrap { max-width: var(--width-content); margin: 0 auto; padding: 0 32px; }

.trz-mk-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--vermilion-600); margin-bottom: 16px;
}

/* ---- Marketing nav ---- */
.trz-mk-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.trz-mk-header__in { height: 62px; display: flex; align-items: center; justify-content: space-between; }
.trz-mk-header__brand { display: inline-flex; text-decoration: none; }
.trz-mk-menu { display: flex; align-items: center; gap: 28px; }
.trz-mk-menu__link { font-size: 14px; font-weight: var(--weight-medium); color: var(--ink-600); text-decoration: none; }
.trz-mk-menu__link:hover { color: var(--ink-900); }
.trz-mk-menu__link--active { font-weight: var(--weight-bold); color: var(--ink-900); }

/* ---- Hero ---- */
.trz-mk-hero { padding: 76px 0 60px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.trz-mk-hero__title {
  font-weight: var(--weight-extra); font-size: 58px; line-height: 1.04;
  letter-spacing: -0.03em; color: var(--ink-900); margin: 0;
}
.trz-mk-hero__lede { font-size: 18px; line-height: 1.55; color: var(--ink-600); max-width: 44ch; margin: 22px 0 0; }
.trz-mk-hero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.trz-mk-checks { display: flex; align-items: center; gap: 18px; margin-top: 26px; font-size: var(--text-sm); color: var(--ink-500); flex-wrap: wrap; }
.trz-mk-checks span { display: inline-flex; align-items: center; gap: 7px; }

/* ---- Code block ("ink object": pinned dark in both themes) ---- */
.trz-mk-code { background: var(--surface-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.trz-mk-code__bar {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 14px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: rgba(251, 248, 242, 0.55); border-bottom: 1px solid rgba(251, 248, 242, 0.12);
}
.trz-mk-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.trz-mk-code pre code {
  background: none; border: none; padding: 0; border-radius: 0;
  font-size: 12.5px; line-height: 1.6; color: #F1E9D8; white-space: pre;
}

.trz-mk-delivered {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--ink-700);
}
.trz-mk-delivered svg { color: var(--green-600); flex: none; }
.trz-mk-delivered b { color: var(--ink-900); }
.trz-mk-delivered .trz-mono { font-size: var(--text-xs); }

/* ---- Feature band ---- */
.trz-mk-band { background: var(--paper-sunken); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trz-mk-band__in { padding: 64px 0; }
.trz-mk-band__head { max-width: 40ch; margin-bottom: 40px; }
.trz-mk-h2 { font-weight: var(--weight-extra); font-size: 34px; letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0; line-height: 1.12; }
.trz-mk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trz-mk-feature { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-xs); }
.trz-mk-feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--vermilion-50); color: var(--vermilion-600);
  border: 1px solid var(--vermilion-100); margin-bottom: 15px;
}
.trz-mk-feature__title { font-size: 15.5px; font-weight: var(--weight-bold); color: var(--ink-900); letter-spacing: var(--tracking-snug); }
.trz-mk-feature__body { font-size: 13.5px; line-height: 1.55; color: var(--ink-600); margin: 7px 0 0; }

/* ---- CTA band (pinned dark, like the code block) ---- */
.trz-mk-cta {
  background: var(--surface-strong); border-radius: var(--radius-lg); padding: 48px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-top: 70px;
}
.trz-mk-cta__title { font-weight: var(--weight-extra); font-size: 30px; letter-spacing: var(--tracking-tight); color: var(--text-on-strong); margin: 0; line-height: 1.1; }
.trz-mk-cta__sub { font-size: var(--text-base); color: rgba(251, 248, 242, 0.65); margin: 10px 0 0; max-width: 46ch; }
.trz-mk-cta__actions { flex: none; display: flex; gap: 12px; }

/* ---- Footer ---- */
.trz-mk-footer { border-top: 1px solid var(--line); margin-top: 70px; }
.trz-mk-footer__in { padding: 40px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.trz-mk-footer__links { display: flex; gap: 22px; font-size: var(--text-sm); }
.trz-mk-footer__links a { color: var(--ink-500); }
.trz-mk-footer__links a:hover { color: var(--ink-900); }
.trz-mk-footer__note { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-400); }
.trz-mk-footer__lang { display: flex; align-items: center; gap: 8px; }
.trz-mk-footer__lang .trz-control { width: auto; }

/* ---- Pricing ---- */
.trz-mk-pagehead { padding: 64px 0 20px; text-align: center; }
.trz-mk-pagehead .trz-mk-eyebrow { margin-bottom: 16px; }
.trz-mk-pagehead__title { font-weight: var(--weight-extra); font-size: 44px; letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0 0 14px; line-height: 1.1; }
.trz-mk-pagehead__sub { font-size: 16px; color: var(--ink-600); max-width: 52ch; margin: 0 auto; }

.trz-mk-tiers { padding: 36px 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) and (min-width: 921px) {
  .trz-mk-tiers { grid-template-columns: repeat(2, 1fr); }
}
.trz-mk-tier {
  position: relative; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
}
.trz-mk-tier--featured { border-color: var(--vermilion-500); box-shadow: var(--shadow-md); }
.trz-mk-tier__badge { position: absolute; top: 0; left: 24px; transform: translateY(-50%); }
.trz-mk-tier__name { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--ink-900); }
.trz-mk-tier__blurb { font-size: var(--text-sm); color: var(--ink-600); margin: 6px 0 20px; min-height: 34px; }
.trz-mk-tier__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 22px; }
.trz-mk-tier__amount { font-weight: var(--weight-extra); font-size: 36px; letter-spacing: var(--tracking-tight); color: var(--ink-900); }
.trz-mk-tier__period { font-size: var(--text-sm); color: var(--ink-500); }
.trz-mk-tier__feats { display: grid; gap: 10px; margin-top: 24px; }
.trz-mk-tier__feats span { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-700); }
.trz-mk-tier__feats svg { color: var(--green-600); flex: none; }

/* Flat per-site pricing: one plan card + one example-totals card. */
.trz-mk-tiers--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.trz-mk-example { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.trz-mk-example th { text-align: left; font-size: var(--text-xs); color: var(--ink-500); font-weight: var(--weight-semi); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.trz-mk-example td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-700); }
.trz-mk-example td:not(:first-child) { font-family: var(--font-mono); font-size: var(--text-xs); }
.trz-mk-example tr:last-child td { border-bottom: none; }

.trz-mk-compare { padding: 40px 0 70px; }
.trz-mk-compare th:not(:first-child), .trz-mk-compare td:not(:first-child) { text-align: center; }
.trz-mk-compare td:not(:first-child) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-600); }
.trz-mk-compare__note { font-size: 12.5px; color: var(--ink-400); margin-top: 14px; font-family: var(--font-mono); }

/* ---- Docs ---- */
.trz-mk-docs { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
.trz-mk-toc { position: sticky; top: 80px; padding: 40px 0; }
.trz-mk-toc__label {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 14px;
}
.trz-mk-toc nav { display: flex; flex-direction: column; gap: 2px; }
.trz-mk-toc a {
  padding: 7px 10px; margin-left: -10px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--ink-600); text-decoration: none;
}
.trz-mk-toc a:hover { background: var(--ink-50); color: var(--ink-900); }
.trz-mk-docs__main { padding: 40px 0 80px; max-width: 720px; min-width: 0; }
.trz-mk-docs__title { font-weight: var(--weight-extra); font-size: 38px; letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0 0 14px; line-height: 1.14; }
.trz-mk-docs__lede { font-size: 16px; line-height: 1.6; color: var(--ink-600); margin: 0 0 48px; max-width: 60ch; }
.trz-mk-docs__lede code, .trz-mk-docs__section p code { color: var(--vermilion-700); }
.trz-mk-docs__section { margin-bottom: 56px; }
.trz-mk-docs__section h2 { font-weight: var(--weight-bold); font-size: 22px; color: var(--ink-900); letter-spacing: var(--tracking-snug); margin: 0 0 8px; }
.trz-mk-docs__section p { font-size: 14.5px; line-height: 1.6; color: var(--ink-600); margin: 0 0 18px; }
.trz-mk-status--ok { color: var(--green-600); }
.trz-mk-status--warn { color: var(--amber-600); }
.trz-mk-status--err { color: var(--red-600); }

@media (max-width: 920px) {
  .trz-mk-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
  .trz-mk-hero__title { font-size: 40px; }
  .trz-mk-grid3, .trz-mk-tiers { grid-template-columns: 1fr; }
  .trz-mk-cta { padding: 32px 28px; }
  .trz-mk-docs { grid-template-columns: 1fr; gap: 0; }
  .trz-mk-toc { position: static; padding-bottom: 0; }
  .trz-mk-docs__main { padding-top: 24px; }
  .trz-mk-menu { gap: 16px; }
  .trz-mk-pagehead__title { font-size: 34px; }
}

@media (max-width: 640px) {
  .trz-sechead__title { font-size: var(--text-xl); }
  .trz-alert { flex-wrap: wrap; }

  /* Key/value grids stack: label above value */
  .trz-kv { grid-template-columns: 1fr; }
  .trz-kv dt { padding: 10px 0 0; border-bottom: none; white-space: normal; }
  .trz-kv dd { padding: 2px 0 10px; }
  .trz-kv dt:first-of-type { padding-top: 0; }
}