/* ============================================================================
   Procurement · app.css — the single stylesheet for the app. No build step.
   ----------------------------------------------------------------------------
   Design language: ECE MakerSpace "Variant A" (cream / ink / orange), as
   implemented by website/src/styles/global.css. Token names, type scale,
   radii, shadows and the ink-band trick come from .work/design-language.md;
   the app-specific components (dense data tables, the workbook sheets, KPI
   tiles, dialogs, toasts, empty states, pagination, tabs, dropdowns, status
   pills, alerts, breadcrumbs, page headers, the sidebar and the admin panel)
   are added below under COMPONENTS.

   FOUR LAYERS, and what belongs in each:

     1. TOKENS      :root only. A colour literal may appear nowhere else except
                    #fff on a white plate and the rgb(... / a) translucencies
                    already present in the org's source.
     2. BASE        element defaults, focus ring, skip link, motion, print.
     3. COMPONENTS  the design system. Page templates use these and nothing else.
     4. COMPAT      (a) layout utilities, for NEW code, layout only:
                    display / flex / grid / gap / spacing / width / order.
                    Never colour, type scale, radius, shadow or border.
                    (b) LEGACY: the fumadocs `-fd-` names and the Tailwind-ish
                    names the not-yet-migrated templates still carry.
                    Quarantined at the bottom, defined from the tokens above,
                    deletable once the page agents finish moving to COMPONENTS.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* grounds */
  --c-bg: #f7f5e7;            /* brand cream: page ground */
  --c-bg-soft: #efecd9;       /* deeper cream: bands, table heads */
  --c-raised: #ffffff;        /* cards, panels, inputs */

  /* lines */
  --c-line: rgb(28 28 28 / 0.12);
  --c-line-strong: rgb(28 28 28 / 0.3);

  /* text */
  --c-ink: #1c1c1c;
  --c-ink-soft: #44433c;
  --c-ink-mute: #5f5d54;

  /* accent (orange) */
  --c-accent: #ef7334;        /* fills and decor only, never small text */
  --c-accent-deep: #d85f22;   /* hover fill, large display text, focus ring */
  --c-accent-text: #b34a0a;   /* orange as text on cream/white (4.91:1) */
  --c-accent-text-strong: #8f3b06;
  --c-accent-bright: #ff8a4d; /* orange text on the ink band */
  --c-on-accent: #1c1c1c;     /* ink label on orange fills */

  /* dark band */
  --c-band: #1c1c1c;
  --c-cream: #f7f5e7;

  /* status palette (promoted from accounts/src/pages.js + mahjong) */
  --c-danger: #c0392b;              /* fills; 5.44:1 under white text */
  --c-danger-line: #8f2b20;
  --c-danger-text: #a00;            /* danger as text; 7.75:1 on white */
  --c-danger-soft-bg: #fdeeee;
  --c-danger-soft-line: #eabbbb;
  --c-danger-soft-text: #8a1f1f;    /* 8.12:1 on --c-danger-soft-bg */
  --c-success: #1a5e1a;             /* fills; 7.89:1 under white text */
  --c-success-text: #1a5e1a;        /* 7.89:1 on white, 7.21:1 on cream */
  --c-success-soft-bg: #eef7ee;
  --c-success-soft-line: #b7dfb7;
  --c-success-soft-text: #1a5e1a;
  --c-info: #2a2a8a;
  --c-info-text: #2a2a8a;           /* 11.69:1 on white */
  --c-info-soft-bg: #eef2ff;
  --c-info-soft-line: #b9c2ec;
  --c-info-soft-text: #2a2a8a;
  --c-warn: #c9a227;                /* decorative trim only, never text */
  --c-warn-alt: #a07d1c;
  --c-warn-text: #7a5c00;           /* [app] 6.25:1 on white, 5.71 on cream */
  --c-warn-soft-bg: #fdf6e3;
  --c-warn-soft-line: #e0cf95;
  --c-warn-soft-text: #7a5c00;

  /* radii */
  --r-sm: 0.5rem;
  --r-md: 0.875rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-pill: 999px;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* elevation */
  --shadow-1: 0 1px 2px rgb(28 28 28 / 0.05), 0 8px 24px rgb(28 28 28 / 0.08);
  --shadow-2: 0 2px 4px rgb(28 28 28 / 0.06), 0 24px 60px -16px rgb(28 28 28 / 0.16);
  --shadow-glow: 0 0 0 1px rgb(239 115 52 / 0.35), 0 16px 48px -12px rgb(239 115 52 / 0.3);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* type scale (org-wide; the app adds --text-2xs as its 12px floor) */
  --text-2xs: 0.75rem;        /* 12px: pills and dense meta. NEVER go smaller */
  --text-xs: 0.8125rem;       /* 13px */
  --text-sm: 0.9375rem;       /* 15px */
  --text-md: 1.0625rem;       /* 17px: body base */
  --text-lg: clamp(1.1875rem, 1.08rem + 0.55vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.5rem + 1.9vw, 2.75rem);
  --text-3xl: clamp(2.5rem, 1.9rem + 2.9vw, 3.9rem);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* layout: ONE container width, shared by header, main and footer. The org's
     marketing sites use 72rem; this app is table-heavy and runs at 75rem
     (1200px), the width the widest sheet needs (audit A-04). */
  --container: 75rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --nav-h: 4.25rem;

  /* density: row padding inside data tables */
  --row-py: 0.5rem;

  /* focus */
  --focus-ring: 2px solid var(--c-accent-deep);

  /* fumadocs compatibility aliases. Referenced by not-yet-migrated templates
     and by econ.html's inline <style>. Delete with layer 4b. */
  --fd-background: 52.5 50% 93.7%;
  --fd-foreground: 0 0% 11%;
  --fd-card: 0 0% 100%;
  --fd-card-foreground: 0 0% 11%;
  --fd-secondary: 51.8 40.7% 89.4%;
  --fd-secondary-foreground: 0 0% 11%;
  --fd-muted: 51.8 40.7% 89.4%;
  --fd-muted-foreground: 49.1 6.1% 35.1%;
  --fd-accent: 51.8 40.7% 89.4%;
  --fd-accent-foreground: 0 0% 11%;
  --fd-primary: 22.7 89.4% 37.1%;
  --fd-primary-foreground: 0 0% 100%;
  --fd-border: 51.4 17.1% 83.9%;
  --fd-ring: 20.1 72.8% 49%;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--c-ink);
}
p { text-wrap: pretty; }

a { color: var(--c-accent-text); text-decoration: none; }
a:hover { color: var(--c-accent-text-strong); text-decoration: underline; text-underline-offset: 3px; }

img, svg, video, iframe { display: block; max-width: 100%; }
ul, ol { padding: 0; }
hr { border: 0; border-top: 1px solid var(--c-line); }
figure { margin: 0; }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--c-bg-soft);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  background: var(--c-bg-soft);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  overflow-x: auto;
  margin: var(--s-5) 0;
}
pre code { background: none; padding: 0; font-size: inherit; }

::selection { background: var(--c-accent); color: var(--c-on-accent); }

/* Every interactive element gets a visible ring. Single colon: `::focus-visible`
   is invalid and silently disables the rule (a real bug in mahjong's CSS). */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: var(--s-4); z-index: 100;
  background: var(--c-accent); color: var(--c-on-accent);
  font-family: var(--font-display); font-weight: 600;
  padding: 0.7rem 1.2rem; border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. COMPONENTS
   ========================================================================== */

/* ---- 3.1 Layout primitives --------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.site-main { padding-block: var(--s-6) var(--s-8); }

.section { padding-block: clamp(2rem, 2rem + 2vw, 3.5rem); }
.section-tight { padding-block: clamp(1.25rem, 1.25rem + 1.5vw, 2rem); }

/* ---- 3.2 App shell: header, nav, mobile panel --------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgb(247 245 231 / 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--c-line);
}
.nav-inner {
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-4);
}

.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  border-radius: var(--r-sm); color: var(--c-ink);
}
.brand:hover { text-decoration: none; color: var(--c-ink); }
.brand-plate {
  background: #fff; border-radius: var(--r-sm); padding: 0.3rem;
  display: inline-flex; box-shadow: var(--shadow-1); flex: none;
}
.brand-plate img { width: 2rem; height: 2rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); letter-spacing: -0.01em;
}
.brand-sub {
  font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-ink-mute);
}

.nav-links { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 1.25rem); list-style: none; }
.nav-links a:not(.btn) {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500;
  color: var(--c-ink-soft); letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: var(--s-2) 0; min-height: 2.75rem;
}
.nav-links a:not(.btn):hover { color: var(--c-ink); text-decoration: none; }
.nav-links a[aria-current="page"] {
  color: var(--c-accent-text); box-shadow: inset 0 -2px 0 var(--c-accent);
}

.nav-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav-user { display: flex; align-items: center; gap: var(--s-2); }
.nav-user-name { font-weight: 600; font-size: var(--text-sm); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0.7rem 0.6rem;
  margin-left: auto;
  background: transparent; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle .bar {
  display: block; height: 2px; width: 100%; background: var(--c-ink);
  border-radius: 1px; transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.menu-open .nav-toggle .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.menu-open .nav-toggle .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-panel {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 55;
  background: rgb(247 245 231 / 0.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: var(--s-5) var(--gutter) var(--s-8);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.4s var(--ease-out), visibility 0s 0.4s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-open .mobile-panel { transform: translateX(0); visibility: visible; transition: transform 0.4s var(--ease-out); }
body.menu-open { overflow: hidden; }
.mobile-panel ul { list-style: none; display: flex; flex-direction: column; }
.mobile-panel li + li { border-top: 1px solid var(--c-line); }
.mobile-panel a:not(.btn),
.mobile-panel .mobile-link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 2.75rem; padding: var(--s-3) 0;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  color: var(--c-ink); background: none; border: 0; cursor: pointer; text-align: left;
}
.mobile-panel a:not(.btn):hover,
.mobile-panel .mobile-link:hover { color: var(--c-accent-text); text-decoration: none; }
.mobile-panel .mobile-meta { font-size: var(--text-xs); color: var(--c-ink-mute); padding-top: var(--s-3); }
.mobile-panel .btn { margin-top: var(--s-4); width: 100%; }

@media (max-width: 60rem) {
  .nav-links, .nav-actions .nav-user { display: none; }
  .nav-toggle { display: flex; }
  .nav-actions { margin-left: 0; }
}
@media (min-width: 60.0625rem) { .mobile-panel { display: none; } }

/* ---- 3.3 Footer: the ink band ------------------------------------------ */

.site-footer {
  --c-line: rgb(247 245 231 / 0.14);
  --c-line-strong: rgb(247 245 231 / 0.32);
  --c-ink: var(--c-cream);
  --c-ink-soft: #d6d3c6;
  --c-ink-mute: #a5a297;
  --c-accent-text: #ffd9c4;
  --c-accent-text-strong: #ffe9dd;
  margin-top: auto;
  background: var(--c-band);
  border-top: 1px solid rgb(247 245 231 / 0.14);
  color: var(--c-ink-soft);
  font-size: var(--text-xs);
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-5); padding-block: var(--s-5);
}
.footer-brand { display: flex; align-items: center; gap: var(--s-3); }
.footer-crest {
  width: 2.5rem; height: 2.5rem; padding: 0.2rem;
  background: #fff; border-radius: var(--r-sm);
}
.footer-name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  color: var(--c-ink); line-height: 1.25;
}
.footer-name small {
  display: block; font-weight: 500; font-size: var(--text-2xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-mute);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; }
.footer-links a { color: var(--c-ink-soft); display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-links a:hover { color: var(--c-accent-bright); }
.footer-legal { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); color: var(--c-ink-mute); }
.footer-legal img { height: 1.5rem; width: auto; }
@media (max-width: 40rem) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-legal { margin-left: 0; }
}

/* ---- 3.4 Page header, breadcrumbs, notes ------------------------------- */

.page-head { position: relative; margin-bottom: var(--s-5); }
.page-head-row {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--s-3); margin-bottom: var(--s-5);
}
.page-title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--s-1); }
.page-lede { color: var(--c-ink-mute); font-size: var(--text-sm); max-width: 46rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }

.crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.crumbs li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-xs); color: var(--c-ink-mute); }
.crumbs li + li::before { content: "/"; color: var(--c-ink-mute); }
.crumbs a { color: var(--c-ink-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent-text);
  margin-bottom: var(--s-3);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--c-accent); border-radius: 1px; }

/* admin-authored per-page markdown block */
.page-markdown {
  margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-raised); font-size: var(--text-sm);
  color: var(--c-ink-soft); max-width: 60rem;
}
.page-markdown > :first-child { margin-top: 0; }
.page-markdown > :last-child { margin-bottom: 0; }
.page-markdown h1, .page-markdown h2, .page-markdown h3, .page-markdown h4 { color: var(--c-ink); }
.page-markdown h2 { font-size: var(--text-lg); margin: var(--s-4) 0 var(--s-2); }
.page-markdown h3 { font-size: var(--text-md); margin: var(--s-3) 0 var(--s-1); }
.page-markdown p, .page-markdown li { color: var(--c-ink-soft); }
.page-markdown ul, .page-markdown ol { padding-left: 1.4rem; margin: var(--s-2) 0; display: grid; gap: var(--s-1); }
.page-markdown li::marker { color: var(--c-accent-text); }
.page-markdown a { text-decoration: underline; }
.page-edit { position: absolute; top: 0; right: 0; }

/* prose: notes, policy text, mail previews */
.prose { max-width: 46rem; color: var(--c-ink-soft); }
.prose h2 { font-size: var(--text-lg); margin: var(--s-5) 0 var(--s-2); }
.prose h3 { font-size: var(--text-md); margin: var(--s-4) 0 var(--s-2); }
.prose ul, .prose ol { margin: var(--s-3) 0; padding-left: 1.5rem; display: grid; gap: var(--s-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--c-accent-text); font-weight: 600; }
.prose p + p { margin-top: var(--s-3); }
.prose strong { color: var(--c-ink); }

/* ---- 3.5 Buttons ------------------------------------------------------- */

.btn, .btn-primary, .btn-ghost, .btn-danger, .btn-sm, .btn-lg,
.btn-icon, .btn-icon-danger, .tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.01em; line-height: 1.2;
  padding: 0.55em 1.2em;
  min-height: 2.75rem;               /* 44px target, all pointer types */
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: transparent; color: var(--c-ink);
  cursor: pointer; text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
    background-color 0.25s, border-color 0.25s, color 0.25s;
}
.btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-danger:hover, .tab:hover {
  text-decoration: none; transform: translateY(-1px);
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: translateY(0); }

.btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn-primary:hover { background: var(--c-accent-deep); color: var(--c-on-accent); box-shadow: var(--shadow-glow); }

.btn-ghost { border-color: var(--c-line-strong); color: var(--c-ink); background: rgb(28 28 28 / 0.04); }
.btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent-text-strong); }

.btn-danger { background: var(--c-danger); border-color: var(--c-danger-line); color: #fff; }
.btn-danger:hover { background: var(--c-danger-line); color: #fff; }

.btn-sm { font-size: var(--text-xs); padding: 0.4em 0.9em; }
.btn-lg { font-size: var(--text-md); padding: 0.75em 1.6em; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.btn .icon { flex: none; }

.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
.btn-danger:disabled, .btn-sm:disabled, .btn-lg:disabled,
button:disabled {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* pending state: every async write sets aria-busy while in flight */
[aria-busy="true"] { cursor: progress; }
[aria-busy="true"] .btn-label { opacity: 0.6; }
[aria-busy="true"]::after {
  content: ""; width: 0.9em; height: 0.9em; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-icon, .btn-icon-danger {
  padding: 0; min-width: 2.75rem; min-height: 2.75rem;
  border-radius: var(--r-sm); border-color: var(--c-line);
  background: var(--c-raised);
}
.btn-icon:hover { border-color: var(--c-accent); color: var(--c-accent-text-strong); }
.btn-icon-danger { color: var(--c-danger-text); border-color: var(--c-line); }
.btn-icon-danger:hover { border-color: var(--c-danger); color: var(--c-danger); background: var(--c-danger-soft-bg); }
.icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .icon, .btn-icon .icon, .btn-icon-danger .icon { width: 1.05rem; height: 1.05rem; }

/* ---- 3.6 Forms --------------------------------------------------------- */

label {
  display: block; margin-bottom: var(--s-1);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-sm); color: var(--c-ink);
}
.field-label {
  display: block; margin-bottom: var(--s-1);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-ink-mute);
}
.field-hint, label .hint {
  display: block; margin-top: var(--s-1);
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-xs); color: var(--c-ink-mute);
}
.field { margin-bottom: var(--s-4); max-width: 32rem; }
.field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.field-narrow input, .field-narrow select { max-width: 10rem; }
.field-error { margin-top: var(--s-1); font-size: var(--text-xs); font-weight: 500; color: var(--c-danger-text); }

input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="password"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="url"], input[type="tel"], input[type="file"],
input:not([type]), .input, .field input, select, textarea {
  font: inherit;
  font-family: var(--font-body);
  font-size: 16px;                 /* never below 16px: iOS zooms below this */
  padding: 0.5rem 0.65rem;
  min-height: 2.5rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-raised);
  color: var(--c-ink);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
input[type="number"], input[type="date"], .num { font-variant-numeric: tabular-nums; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .input:focus-visible {
  outline: var(--focus-ring); outline-offset: 1px; border-color: var(--c-accent);
}
/* never let the control look leak onto checkbox/radio/file inputs */
input[type="checkbox"].input, input[type="radio"].input {
  width: 1.15rem; min-height: 0; padding: 0; border: 0; background: none;
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.45; cursor: not-allowed; background: var(--c-bg-soft); }
input::placeholder, textarea::placeholder { color: var(--c-ink-mute); }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--c-accent-deep); cursor: pointer; }
input[type="file"] { padding: 0.4rem; font-size: var(--text-sm); }

/* a checkbox/radio with its own label, as one row of a form or table */
.check {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; margin-bottom: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
}
.check input { flex: none; }

.form-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; margin-bottom: var(--s-4); }
.form-row .field { margin-bottom: 0; }

@media (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="number"], input[type="search"],
  input[type="password"], input[type="date"], input[type="datetime-local"],
  select, textarea, .btn, .btn-icon, .btn-icon-danger { min-height: 2.75rem; }
}

/* ---- 3.7 Alerts and callouts ------------------------------------------ */

.alert {
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-ink-mute);
  border-radius: var(--r-sm); background: var(--c-raised);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  font-size: var(--text-sm); color: var(--c-ink);
  display: flex; gap: var(--s-3); align-items: flex-start;
}
.alert-title { font-family: var(--font-display); font-weight: 600; display: block; }
.alert p { margin: 0; }
.alert > .icon { flex: none; margin-top: 0.15rem; }
.alert-info { border-left-color: var(--c-info); background: var(--c-info-soft-bg); color: var(--c-info-soft-text); }
.alert-success { border-left-color: var(--c-success); background: var(--c-success-soft-bg); color: var(--c-success-soft-text); }
.alert-danger { border-left-color: var(--c-danger); background: var(--c-danger-soft-bg); color: var(--c-danger-soft-text); }
.alert-warn { border-left-color: var(--c-warn); background: var(--c-warn-soft-bg); color: var(--c-warn-soft-text); }
.alert-info .alert-title { color: var(--c-info-soft-text); }
.alert-success .alert-title { color: var(--c-success-soft-text); }
.alert-danger .alert-title { color: var(--c-danger-soft-text); }
.alert-warn .alert-title { color: var(--c-warn-soft-text); }

.callout {
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent);
  background: var(--c-raised); border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5); margin: var(--s-5) 0;
  font-size: var(--text-sm); color: var(--c-ink-soft); max-width: 46rem;
}
.callout-title { display: block; font-family: var(--font-display); font-weight: 600; color: var(--c-ink); margin-bottom: var(--s-1); }
.callout p + p { margin-top: var(--s-2); }
.callout.danger, .callout.variant { border-left-color: var(--c-danger); }
.callout.danger .callout-title, .callout.variant .callout-title { color: var(--c-danger-text); }
.callout.tip, .callout.beginner { border-left-color: var(--c-warn); }
.callout.tip .callout-title, .callout.beginner .callout-title { color: var(--c-warn-text); }

/* ---- 3.8 Badges and status pills -------------------------------------- */

.badge, .chip, .badge-role, .badge-lock, .badge-open, .badge-muted,
.badge-info, .badge-warn, .badge-danger, .badge-success {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-family: var(--font-display); font-size: var(--text-2xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  border-radius: var(--r-pill); border: 1px solid var(--c-line);
  padding: 0.05rem 0.6rem;
  background: var(--c-bg-soft); color: var(--c-ink-soft);
  white-space: nowrap; vertical-align: 1px;
}
.badge-muted { background: var(--c-bg-soft); border-color: var(--c-line); color: var(--c-ink-mute); }
.badge-info { background: var(--c-info-soft-bg); border-color: var(--c-info-soft-line); color: var(--c-info-soft-text); }
.badge-success, .badge-open { background: var(--c-success-soft-bg); border-color: var(--c-success-soft-line); color: var(--c-success-soft-text); }
.badge-danger, .badge-lock { background: var(--c-danger-soft-bg); border-color: var(--c-danger-soft-line); color: var(--c-danger-soft-text); }
.badge-warn { background: var(--c-warn-soft-bg); border-color: var(--c-warn-soft-line); color: var(--c-warn-soft-text); }
/* the loudest treatment, for a count that must not be missed */
.badge-solid { background: var(--c-danger); border-color: var(--c-danger-line); color: #fff; }

.chip {
  background: var(--c-accent); color: var(--c-on-accent); border-color: transparent;
  border-radius: var(--r-sm); padding: 0.1rem 0.45rem; letter-spacing: 0.04em;
}
.badge-role { text-transform: uppercase; letter-spacing: 0.06em; }
.badge-role::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }

/* ---- 3.9 Cards, panels, KPI tiles ------------------------------------- */

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-raised); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  padding: var(--s-4);
}
.card.flush { padding: 0; overflow: hidden; }
a.card { color: inherit; }
a.card:hover { text-decoration: none; }
@media (hover: hover) {
  a.card:hover, .card.is-link:hover {
    border-color: var(--c-line-strong); box-shadow: var(--shadow-2);
    transform: translateY(-2px);
  }
}
.card-title { font-size: var(--text-lg); }
.card-text { color: var(--c-ink-mute); font-size: var(--text-sm); }
.card .go {
  margin-top: auto; padding-top: var(--s-3); color: var(--c-accent-text);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.card-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.panel {
  background: var(--c-raised); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
}
.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.panel-title { font-size: var(--text-md); }

/* KPI tile: label, big number, sub-line. The whole tile links when it filters. */
.kpi-label {
  margin: 0; font-family: var(--font-display);
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-ink-mute);
}
.kpi-value {
  margin: var(--s-1) 0 0; font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--c-ink);
}
.kpi-sub { margin: var(--s-1) 0 0; font-size: var(--text-xs); color: var(--c-ink-mute); }
.kpi-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
/* the active filter: colour is never the only channel (the caller also sets
   aria-current and a visible marker), but the tile must look chosen */
.card.kpi-active, .kpi-tile[aria-current="true"] {
  border-color: var(--c-accent-deep);
  box-shadow: inset 0 0 0 1px var(--c-accent-deep), var(--shadow-1);
  background: var(--c-warn-soft-bg);
}
.card.kpi-active .kpi-value, .kpi-tile[aria-current="true"] .kpi-value { color: var(--c-accent-text-strong); }
.kpi-marker { font-size: var(--text-2xs); font-weight: 600; color: var(--c-accent-text-strong); }
/* ---- 3.10 Data tables -------------------------------------------------- */

/* A wrapper with `overflow-x: auto` is also a vertical scrollport, so a
   `position: sticky` header inside it is offset from the scrollport's top
   edge. `top: 0` is therefore the only safe offset: with no scrolling it
   leaves the header exactly where it was, and with scrolling it pins the
   header to the wrapper. The workbook sheets additionally cap their height so
   a 40-row sheet scrolls under its own header instead of the page's. */
.table-wrap, .sheet-scroll {
  overflow: auto; margin: var(--s-4) 0;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-raised);
}
.sheet-scroll { max-height: min(80dvh, 46rem); }
.table, .procurement-table, .sheet-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
}
.table caption {
  caption-side: top; text-align: left; padding: var(--s-3) var(--s-4) 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  color: var(--c-ink-mute);
}
.table th, .table td,
.procurement-table th, .procurement-table td,
.sheet-table th, .sheet-table td {
  padding: var(--row-py) var(--s-3);
  border-bottom: 1px solid var(--c-line);
  text-align: left; vertical-align: middle;
}
.table thead th, .procurement-table thead th, .sheet-table thead th {
  position: sticky; top: 0; z-index: 2;
  /* a collapsed border scrolls away from a sticky header; an inset shadow does not */
  box-shadow: inset 0 -1px 0 var(--c-line);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink);
  background: var(--c-bg-soft); white-space: nowrap;
}
.table tbody td, .procurement-table tbody td, .sheet-table tbody td { color: var(--c-ink-soft); }
.table tbody tr:hover,
.procurement-table tbody tr:hover,
.sheet-table tbody tr:hover { background: rgb(239 115 52 / 0.07); }
.table tbody tr:last-child td,
.procurement-table tbody tr:last-child td,
.sheet-table tbody tr:last-child td { border-bottom: 0; }
.table tfoot th, .table tfoot td,
.procurement-table tfoot th, .procurement-table tfoot td,
.sheet-table tfoot th, .sheet-table tfoot td {
  background: var(--c-bg-soft); border-bottom: 0; color: var(--c-ink);
  font-family: var(--font-display); font-weight: 600;
}
.sheet-grand th, .sheet-grand td { font-weight: 700; font-size: var(--text-sm); }

/* numeric columns: always tabular, always right-aligned */
.num, .sheet-num, .cell-subtotal, .text-right { text-align: right; font-variant-numeric: tabular-nums; }
.table .num, .procurement-table .num { font-weight: 600; color: var(--c-accent-text); }
.sheet-center, .sheet-table td.sheet-center { text-align: center; }
.whitespace-nowrap { white-space: nowrap; }

.sheet-empty {
  padding: var(--s-5); text-align: center;
  color: var(--c-ink-mute); font-size: var(--text-sm);
}
.sheet-end {
  margin: var(--s-3) 0; font-family: var(--font-display);
  font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--c-ink-mute);
}

/* in-cell editors: 16px so a focused cell never zooms the page on iOS. The
   dense grid is 36px tall on a fine pointer and 44px on touch. */
.cell {
  width: 100%; min-width: 6rem;
  border: 1px solid transparent; background: transparent;
  padding: 0.2rem 0.35rem; font-family: var(--font-body); font-size: 16px;
  color: inherit; border-radius: var(--r-sm); min-height: 2.25rem;
}
.cell:hover { border-color: var(--c-line); }
.cell:focus-visible { border-color: var(--c-accent); background: var(--c-raised); }
.cell-num { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.cell:disabled, .cell[readonly] { color: var(--c-ink-mute); background: transparent; }
.cell-subtotal { font-weight: 600; color: var(--c-ink); }
.cell[aria-invalid="true"] { border-color: var(--c-danger); background: var(--c-danger-soft-bg); }
.sheet-status { min-width: 9.5rem; min-height: 2.25rem; padding: 0.15rem 0.3rem; font-size: 16px; }
.sheet-submission { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.sheet-submit-input { width: auto; min-width: 9.5rem; min-height: 2.25rem; padding: 0.2rem 0.4rem; }
.sheet-submit-input[type="date"] { min-width: 8.5rem; }
@media (pointer: coarse) {
  .cell, .sheet-status, .sheet-submit-input { min-height: 2.75rem; }
}
.proc-check { width: 3rem; text-align: center; }
.proc-check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
.proc-next { font-size: var(--text-xs); }
/* the workbench sheet: the widest table in the app. `.proc-all` and
   `.proc-row-check` are also JS hooks (procurement.html queries them). */
.proc-table { min-width: 64rem; }
.proc-all, .proc-row-check { width: 1.15rem; height: 1.15rem; cursor: pointer; }

/* a horizontally scrollable table must be reachable by keyboard: templates
   add tabindex="0" role="region" plus an aria-label. */
.sheet-scroll:focus-visible, .table-wrap:focus-visible {
  outline: var(--focus-ring); outline-offset: 2px;
}

/* ---- 3.11 Sheet header (workbook screens) ------------------------------ */

.sheet-header { margin-bottom: var(--s-4); }
.sheet-header-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-2); min-height: 1.5rem;
}
.sheet-header-row.sheet-spacer { min-height: var(--s-2); }
.sheet-title { font-size: var(--text-md); font-weight: 700; font-family: var(--font-display); }
.sheet-header-right { margin-left: auto; display: inline-flex; gap: var(--s-2); align-items: baseline; }
.sheet-label {
  font-family: var(--font-display); font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-mute);
}
.sheet-value { font-size: var(--text-sm); }
.sheet-note { font-size: var(--text-xs); font-style: italic; color: var(--c-ink-mute); }

/* ---- 3.12 Action bar and filters -------------------------------------- */

.order-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); margin: var(--s-3) 0 var(--s-4);
}
.order-hint { margin-left: auto; font-size: var(--text-xs); color: var(--c-ink-mute); }

.order-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3);
  margin-bottom: var(--s-4); padding: var(--s-3);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg-soft);
}
.order-filters label { margin-bottom: var(--s-1); }
.order-filters .input, .order-filters input, .order-filters select { min-width: 9rem; }
.order-filter-search .input, .order-filter-search input { min-width: 14rem; }

/* ---- 3.13 Tabs, pills, dropdowns -------------------------------------- */

.tabs, .order-tabs, .proc-tabs, .order-mobile-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tabs { margin-bottom: var(--s-4); border-bottom: 1px solid var(--c-line); padding-bottom: var(--s-3); }

.tab {
  border-radius: var(--r-sm) var(--r-sm) 0 0; border-color: transparent;
  padding: 0.5em 0.9em; color: var(--c-ink-soft); background: transparent;
}
.tab:hover { border-color: var(--c-line); color: var(--c-ink); }
.tab[aria-current="page"], .tab-active {
  border-color: var(--c-line); border-bottom-color: var(--c-accent-deep);
  color: var(--c-accent-text-strong); background: var(--c-raised);
}

.pill, .order-pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 2.75rem; padding: 0.3rem 0.95rem;
  border-radius: var(--r-pill); border: 1px solid var(--c-line-strong);
  background: var(--c-raised); color: var(--c-ink-soft);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  transition: background-color 0.15s var(--ease-out), color 0.15s, border-color 0.15s;
}
.pill:hover, .order-pill:hover {
  border-color: var(--c-accent); color: var(--c-accent-text-strong); text-decoration: none;
}
.pill-active, .order-pill.is-active,
.pill[aria-current="page"], .order-pill[aria-current="page"] {
  background: var(--c-bg-soft); border-color: var(--c-accent-deep);
  color: var(--c-accent-text-strong); box-shadow: inset 0 0 0 1px var(--c-accent-deep);
}

.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 40;
  min-width: 12rem; padding: var(--s-1); text-align: left;
  background: var(--c-raised); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
}
.dropdown-menu a, .dropdown-menu button, .dropdown-item {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; min-height: 2.5rem; text-align: left;
  padding: 0.4rem 0.6rem; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--text-sm);
  background: none; border: 0; cursor: pointer; color: inherit;
  text-decoration: none;
}
.dropdown-menu a:hover, .dropdown-menu button:hover, .dropdown-item:hover {
  background: var(--c-bg-soft); color: var(--c-ink); text-decoration: none;
}
.dropdown-menu .meta { margin-left: auto; color: var(--c-ink-mute); font-size: var(--text-xs); }
.dropdown-user {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0.4rem 0.6rem; font-size: var(--text-sm); color: var(--c-ink-soft);
}
.dropdown-user strong { color: var(--c-ink); }
.dropdown-user .meta {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-ink-mute);
}
.dropdown-danger { color: var(--c-danger-text); }
.dropdown-danger:hover { background: var(--c-danger-soft-bg); color: var(--c-danger-soft-text); }
.dropdown-menu a.is-current, .dropdown-menu button.is-current, .dropdown-item[aria-current="true"] {
  background: var(--c-bg-soft); font-weight: 600; color: var(--c-ink);
}
.dropdown-sep { border-top: 1px solid var(--c-line); margin: var(--s-1) 0; }

/* ---- 3.14 Sidebar (order form switcher) -------------------------------- */

.order-shell {
  display: grid; grid-template-columns: 16.25rem minmax(0, 1fr);
  gap: var(--s-5); align-items: start;
}
.sidebar, .order-sidebar {
  position: sticky; top: calc(var(--nav-h) + var(--s-3));
  background: var(--c-raised); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--s-4);
  max-height: calc(100dvh - var(--nav-h) - var(--s-6));
  overflow-y: auto;
}
.sidebar-title, .order-sidebar-title {
  margin: 0; font-family: var(--font-display); font-size: var(--text-2xs);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-ink-mute);
}
.sidebar-sub, .order-sidebar-sub { margin: 0 0 var(--s-3); font-size: var(--text-xs); color: var(--c-ink-mute); }
.sidebar-list, .order-sidebar-list { display: flex; flex-direction: column; gap: var(--s-1); list-style: none; }

.side-item, .order-side-item {
  display: block; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: var(--s-2); color: var(--c-ink); text-decoration: none;
  transition: background-color 0.15s var(--ease-out), border-color 0.15s;
}
.side-item:hover, .order-side-item:hover { background: var(--c-bg-soft); text-decoration: none; }
.side-item.is-active, .order-side-item.is-active { background: var(--c-bg-soft); border-color: var(--c-accent-deep); }
.side-top, .order-side-top { display: flex; align-items: center; gap: var(--s-2); }
.side-name, .order-side-name { font-weight: 600; font-size: var(--text-sm); }
.side-top .badge, .order-side-top .badge { margin-left: auto; }
.side-meta, .order-side-meta {
  display: flex; justify-content: space-between; gap: var(--s-2);
  margin-top: var(--s-1); font-size: var(--text-xs);
  color: var(--c-ink-mute); font-variant-numeric: tabular-nums;
}
.side-updated, .order-side-updated {
  display: block; margin-top: 0.1rem; font-size: var(--text-xs); color: var(--c-ink-mute);
}

.order-main { min-width: 0; }
.order-panel {
  background: var(--c-raised); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5) var(--s-5);
}
.order-mobile-nav { display: none; margin-bottom: var(--s-3); }
.order-mobile-nav > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; min-height: 2.75rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  background: var(--c-raised);
}
.order-mobile-nav > summary::-webkit-details-marker { display: none; }
.order-mobile-links { margin-top: var(--s-2); }
.order-topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.order-topbar-title {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  margin-right: auto;
}

@media (max-width: 64rem) {
  .order-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .order-sidebar { display: none; }
  .order-mobile-nav { display: block; }
  .order-hint { margin-left: 0; width: 100%; }
}

/* ---- 3.15 Disclosure cards (order, procurement, history) --------------- */

details.card, .hist-card, .proc-order-card {
  background: var(--c-raised); border: 1px solid var(--c-line);
  border-radius: var(--r-md); margin-bottom: var(--s-3); padding: 0;
  box-shadow: var(--shadow-1); overflow: hidden;
}
details.card > summary,
.hist-head, .proc-order-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none;
  min-height: 2.75rem;
}
details.card > summary::-webkit-details-marker,
.hist-head::-webkit-details-marker,
.proc-order-details > summary::-webkit-details-marker { display: none; }
details.card > summary:hover, .hist-head:hover, .proc-order-head:hover { background: var(--c-bg-soft); }
details.card[open] > summary,
.hist-card[open] > .hist-head,
.proc-order-details[open] > .proc-order-head { border-bottom: 1px solid var(--c-line); }
.proc-order-details > summary { list-style: none; }

/* the disclosure chevron. The previous rule wrote content:'be'/'b4' (a broken
   \25BE escape) and printed literal text after every collapsed header. */
.proc-order-head::after, .hist-head::after, details.card > summary::after {
  content: "\25BE"; display: inline-block; margin-left: auto;
  color: var(--c-ink-mute); font-size: var(--text-xs);
  transition: transform 0.2s var(--ease-out);
}
.proc-order-details[open] > .proc-order-head::after,
.hist-card[open] > .hist-head::after,
details.card[open] > summary::after { transform: rotate(180deg); }

.proc-order-title, .hist-order {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
}
.hist-head-main { display: inline-flex; align-items: center; gap: var(--s-2); }
.hist-head-meta { font-size: var(--text-xs); color: var(--c-ink-mute); }
.hist-head-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.hist-sub {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); font-size: var(--text-xs); color: var(--c-ink-mute);
}
.hist-card > .sheet-scroll {
  border: 0; border-top: 1px solid var(--c-line); border-radius: 0; margin: 0;
}
.proc-order-details > .order-actions,
.proc-order-details > .sheet-scroll { padding: 0 var(--s-4); }
.proc-order-details > .order-actions { padding-top: var(--s-3); }
.proc-order-details > .sheet-scroll {
  border: 0; border-top: 1px solid var(--c-line); border-radius: 0; margin: 0;
  padding-bottom: var(--s-3);
}
.history-group { margin-bottom: var(--s-5); }
.history-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  color: var(--c-ink); margin-bottom: var(--s-2);
}

/* ---- 3.16 Receiving: grouped card grid -------------------------------- */

.recv-group { margin-bottom: var(--s-5); }
.recv-group-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 700;
  margin-bottom: var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
.recv-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.recv-card { display: flex; flex-direction: column; gap: var(--s-2); }
.recv-photo { margin: 0; }
.recv-photo-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; gap: var(--s-2);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm);
  background: var(--c-bg-soft); color: var(--c-ink-mute);
  font-size: var(--text-xs); text-align: center; padding: var(--s-3);
}
.recv-photo-drop:hover { border-color: var(--c-accent); color: var(--c-accent-text-strong); }
.recv-photo-drop img { width: 100%; height: 100%; object-fit: cover; }
.recv-photo-empty { font-size: var(--text-sm); font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-2); }
.recv-photo-empty::before {
  content: ""; width: 1.5rem; height: 1.25rem; flex: none;
  border: 1px dashed currentColor; border-radius: 4px;
  background: linear-gradient(135deg, transparent 55%, currentColor 55% 60%, transparent 60%);
}

/* ---- 3.17 Empty states ------------------------------------------------ */

.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-raised); padding: var(--s-5); margin: var(--s-4) 0;
  max-width: 34rem; color: var(--c-ink-soft); font-size: var(--text-sm);
}
.empty-state .empty-title { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); }
.empty-state .empty-actions { margin-top: var(--s-1); }

/* ---- 3.18 Dialog ------------------------------------------------------
   ONE dialog pattern: .modal-backdrop[hidden] > .modal. Native
   <dialog class="modal"> uses the same inner styles. Never window.confirm. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(28 28 28 / 0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  overflow-y: auto;
}
/* the flex display above would otherwise beat the UA rule for [hidden] and
   leave every dialog permanently on screen */
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%; max-width: 42rem; max-height: calc(100dvh - 2 * var(--s-5));
  overflow-y: auto; margin: auto;
  background: var(--c-raised); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: var(--s-5);
}
dialog.modal { border: 1px solid var(--c-line); color: var(--c-ink); }
dialog.modal::backdrop { background: rgb(28 28 28 / 0.5); }
.modal-head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.modal-title { font-size: var(--text-lg); font-family: var(--font-display); font-weight: 600; }
.modal-head .btn-icon { margin-left: auto; }
.modal-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.modal-foot .btn-danger { margin-left: auto; }
@media (max-width: 40rem) {
  .modal-backdrop { align-items: flex-start; padding-top: var(--s-4); }
  .modal { max-height: calc(100dvh - 2 * var(--s-4)); }
}

/* ---- 3.19 Toast and live regions -------------------------------------- */

.toast {
  position: fixed; bottom: var(--s-5); left: 50%; z-index: 200;
  transform: translateX(-50%) translateY(2rem);
  background: var(--c-band); color: var(--c-cream);
  border-left: 4px solid var(--c-accent);
  padding: 0.65rem 1.1rem; border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: 500;
  max-width: min(28rem, calc(100vw - 2rem));
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-error { border-left-color: var(--c-danger); }
.toast:empty { display: none; }

/* ---- 3.20 Pagination -------------------------------------------------- */

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.pager-info {
  font-size: var(--text-xs); color: var(--c-ink-mute);
  font-variant-numeric: tabular-nums; margin-right: auto;
}
.pager a, .pager .pager-current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--s-2);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  color: var(--c-ink-soft); font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--c-accent); color: var(--c-accent-text-strong); text-decoration: none; }
.pager .pager-current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.pager [aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ---- 3.21 Admin panel ------------------------------------------------- */

.admin-tabs { margin-bottom: var(--s-5); }
.admin-panel { display: grid; gap: var(--s-4); }
.admin-panel > section, .admin-section {
  background: var(--c-raised); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
}
.admin-section > h2, .admin-section > h3 { font-size: var(--text-md); margin-bottom: var(--s-3); }
.settings-group { margin-bottom: var(--s-5); }
.settings-group > h3 { font-size: var(--text-sm); margin-bottom: var(--s-2); }
.audit-info { cursor: help; border-bottom: 1px dotted var(--c-ink-mute); }

/* ---- 3.22 Misc app bits ----------------------------------------------- */

.email-body {
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  padding: var(--s-3); background: var(--c-bg);
  max-height: 24rem; overflow-y: auto; font-size: var(--text-sm);
}
.email-body-text {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5;
}
.link { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.muted { color: var(--c-ink-mute); }
.mono { font-family: var(--font-mono); }
.placeholder { color: var(--c-ink-mute); }   /* the styled empty table value */
.audit { font-variant-numeric: tabular-nums; }

/* ---- 3.23 Sign-in ----------------------------------------------------- */

.signin {
  display: flex; justify-content: center;
  padding-block: clamp(var(--s-5), 6vw, var(--s-8));
}
.signin-card {
  width: 100%; max-width: 26rem; padding: var(--s-6) var(--s-5) var(--s-5);
  align-items: flex-start; text-align: left;
}
.signin-plate { padding: 0.5rem; margin-bottom: var(--s-4); }
.signin-plate img { width: 3rem; height: 3rem; }
.signin-title { font-size: var(--text-xl); margin-bottom: var(--s-1); }
.signin-lede { color: var(--c-ink-mute); font-size: var(--text-sm); margin-bottom: var(--s-5); max-width: 30rem; }
.signin-alert { width: 100%; }
.signin-form { width: 100%; }
.signin-form .field { max-width: none; margin-bottom: var(--s-4); }
.signin-form label { font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-mute); }
.signin-submit { width: 100%; }
.signin-help { margin-top: var(--s-5); font-size: var(--text-xs); color: var(--c-ink-mute); }

/* ==========================================================================
   4. COMPATIBILITY
   ========================================================================== */

/* ---- 4a. Layout utilities ------------------------- allowed for NEW code.
   Layout only: display / flex / grid / gap / spacing / width / order. Never
   colour, type scale, radius, shadow or border. Anything else belongs in a
   component above. ------------------------------------------------------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none !important; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.push, .ml-auto { margin-left: auto; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.max-w-prose { max-width: 46rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-5); }
.mt-8 { margin-top: var(--s-6); }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-5); }
.mb-8 { margin-bottom: var(--s-6); }
.p-3 { padding: var(--s-3); }
.p-4 { padding: var(--s-4); }
.p-6 { padding: var(--s-5); }
.pb-3 { padding-bottom: var(--s-3); }
.px-3 { padding-inline: var(--s-3); }
.px-4 { padding-inline: var(--s-4); }
.py-2 { padding-block: var(--s-2); }
.py-10 { padding-block: var(--s-6); }
.order-first { order: -1; }
.order-last { order: 999; }
.overflow-x-auto { overflow-x: auto; }
.overflow-hidden { overflow: hidden; }
@media (max-width: 40rem) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 4b. LEGACY ----------------------------------- migration debt, delete
   once the four page agents have moved their templates to the components
   above. The `-fd-` names are the old fumadocs tokens (econ.html still has
   an inline <style> written against them); the rest are Tailwind-ish names
   the not-yet-restyled templates carry. ---------------------------------- */
.bg-fd-background { background-color: var(--c-bg); }
.bg-fd-background\/80 { background-color: rgb(247 245 231 / 0.8); }
.bg-fd-card { background-color: var(--c-raised); }
.bg-fd-accent { background-color: var(--c-bg-soft); }
.bg-fd-secondary\/50 { background-color: rgb(239 236 217 / 0.5); }
.text-fd-foreground { color: var(--c-ink); }
.text-fd-muted-foreground { color: var(--c-ink-mute); }
.text-fd-primary { color: var(--c-accent-text); }
.text-fd-accent-foreground { color: var(--c-ink); }
.border-fd-border { border-color: var(--c-line); }
.backdrop-blur-lg { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

.bg-red-500\/10 { background-color: var(--c-danger-soft-bg); }
.border-red-500\/40 { border-color: var(--c-danger-soft-line); }
.text-red-600 { color: var(--c-danger-text); }
.bg-green-500\/10 { background-color: var(--c-success-soft-bg); }
.border-green-500\/40 { border-color: var(--c-success-soft-line); }
.text-green-700 { color: var(--c-success-text); }

.border, .border-b { border-style: solid; border-color: var(--c-line); border-width: 0; }
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.rounded-lg { border-radius: var(--r-sm); }
.max-w-\[1400px\], .max-w-6xl { max-width: var(--container); }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.w-40 { width: 10rem; }
.w-56 { width: 14rem; }
.w-80 { width: 20rem; }
.h-14 { height: 3.5rem; }
.h-full, .min-h-full { height: 100%; min-height: 100%; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-30 { z-index: 30; }
.aspect-video { aspect-ratio: 16 / 9; }
.object-cover { object-fit: cover; }
.font-mono { font-family: var(--font-mono); }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-5xl { font-size: var(--text-2xl); }
.text-center { text-align: center; }
.space-y-2 > * + * { margin-top: var(--s-2); }
.space-y-3 > * + * { margin-top: var(--s-3); }
.space-y-4 > * + * { margin-top: var(--s-4); }
.space-y-6 > * + * { margin-top: var(--s-5); }
@media (min-width: 40rem) {
  .sm\:px-6 { padding-inline: var(--s-5); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:col-span-4 { grid-column: span 4 / span 4; }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   5. PRINT: the workbook sheets and the export screens
   ========================================================================== */

@media print {
  :root {
    --c-bg: #fff; --c-bg-soft: #fff; --c-raised: #fff;
    --c-line: rgb(28 28 28 / 0.35); --c-line-strong: rgb(28 28 28 / 0.6);
    --nav-h: 0rem;
    --shadow-1: none; --shadow-2: none; --shadow-glow: none;
  }
  html, body { background: #fff; font-size: 10pt; }
  .site-header, .site-footer, .mobile-panel, .nav-toggle, .skip-link,
  .toast, .page-edit, .order-actions, .order-hint, .order-mobile-nav,
  .order-sidebar, .sidebar, .btn, .btn-icon, .btn-icon-danger,
  .modal-backdrop, .pager, .order-filters, .crumbs { display: none !important; }
  .site-main, .section, .section-tight { padding: 0; }
  .container { width: 100%; max-width: none; }
  a { color: var(--c-ink); text-decoration: none; }
  a[href^="/"]::after, a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 8pt; color: var(--c-ink-mute);
  }
  .card, .panel, details.card, .hist-card, .proc-order-card {
    box-shadow: none; border-color: var(--c-line); break-inside: avoid;
  }
  .table-wrap, .sheet-scroll { overflow: visible; max-height: none; border: 0; margin: 0; }
  table, .table, .procurement-table, .sheet-table { font-size: 8.5pt; }
  table thead th, .table thead th { position: static; background: #fff; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, img, figure { break-inside: avoid; }
  /* CSS cannot force a closed <details> open in every engine; base.html also
     registers a beforeprint handler that opens them all. */
  details:not([open]) > *:not(summary) { display: block !important; }
  details::details-content { content-visibility: visible !important; }
  details > summary { display: none; }
  .kpi-value { font-size: 14pt; }
}