/* It's Mint: Mint Ledger design system (docs/standards/07-styling-standards.md).
   Order: fonts, tokens (light, then dark), Bootstrap variable mapping, base, app shell,
   auth layout, components, mint- helpers, HTMX states, print.
   Components use tokens only; raw hex lives in the token blocks and nowhere else. */

/* ================= Fonts (self-hosted, static/vendor/ibm-plex) ================= */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/ibm-plex/sans-1.1.0/IBMPlexSans-Regular.5aaadb685d3c.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/ibm-plex/sans-1.1.0/IBMPlexSans-Medium.02ec16345450.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/ibm-plex/sans-1.1.0/IBMPlexSans-SemiBold.51d76d33ef85.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/ibm-plex/sans-1.1.0/IBMPlexSans-Bold.ea5f696de389.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/ibm-plex/mono-2.5.0/IBMPlexMono-Regular.b51685c998a0.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/ibm-plex/mono-2.5.0/IBMPlexMono-Medium.91abacd323ba.woff2") format("woff2"); }

/* ================= Tokens: light (default) ================= */
:root,
[data-bs-theme="light"] {
  --mint-page: #F4F8F6;
  --mint-bg: #FFFFFF;
  --mint-surface: #FFFFFF;
  --mint-surface-2: #F2F7F4;
  --mint-surface-3: #E6EFEA;
  --mint-line: #DCE5E0;
  --mint-line-2: #C9D6CF;
  /* Form-control borders: at least 3:1 against every surface they sit on (07 Accessibility, WCAG 1.4.11) */
  --mint-input-line: #7C8D87;
  --mint-text: #101C18;
  --mint-text-2: #3D524B;
  --mint-text-3: #5E6F6A;
  --mint-accent: #14A676;
  --mint-accent-ink: #0A6C4D;
  --mint-accent-wash: #DFF4EA;
  --mint-accent-2: #9BE3C6;
  --mint-on-accent: #FFFFFF;
  --mint-btn-bg: #0B7F59;
  --mint-btn-bg-hover: #0A6C4D;
  --mint-btn-text: #FFFFFF;
  --mint-nav-bg: #F2F7F4;
  --mint-nav-hover: #E4EFE9;
  --mint-nav-active: #FFFFFF;
  --mint-ok: #1E8E57;
  --mint-ok-wash: #DDF3E5;
  --mint-ok-ink: #17744A;
  --mint-warn: #E0A112;
  --mint-warn-ink: #8A5B00;
  --mint-warn-wash: #FBEFD5;
  --mint-bad: #C0392B;
  --mint-bad-wash: #F9DFDB;
  --mint-bad-ink: #A93226;
  --mint-info: #2F5F9E;
  --mint-info-wash: #E0E9F6;
  --mint-t3: #6B3FA0;
  --mint-t3-wash: #EEE5F7;
  --mint-ai-bg: #F2FBF6;
  --mint-ai-line: #BFE6D3;
  --mint-row-hover: #F5FAF7;
  --mint-shadow: 0 1px 2px rgb(16 28 24 / 5%), 0 6px 18px rgb(16 28 24 / 6%);
  --mint-scroll-edge: rgb(16 28 24 / 18%);
  /* Dyslexia-friendly grounds (07 Inclusion modes): off-white behind content, text contrast kept at AA */
  --mint-dys-page: #F5F1E6;
  --mint-dys-bg: #FBF8F0;
  --mint-dys-surface: #FEFCF6;

  --mint-font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mint-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --mint-radius: 4px;
  --mint-radius-sm: 3px;
  --mint-sidebar-width: 204px;
  --mint-topbar-height: 42px;  /* the sticky top bar; what sticks below it (the draft editor's toolbar) starts here */
}

/* ================= Tokens: dark (optional toggle) ================= */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --mint-page: #0A0F0D;
  --mint-bg: #0C1210;
  --mint-surface: #111916;
  --mint-surface-2: #16211D;
  --mint-surface-3: #1C2A25;
  --mint-line: #24322D;
  --mint-line-2: #304139;
  --mint-input-line: #62766E;
  --mint-text: #E2ECE7;
  --mint-text-2: #A9BCB5;
  --mint-text-3: #82968F;
  --mint-accent: #3CCB95;
  --mint-accent-ink: #7BDDB6;
  --mint-accent-wash: #10352A;
  --mint-accent-2: #2A7F60;
  --mint-on-accent: #062018;
  --mint-btn-bg: #3CCB95;
  --mint-btn-bg-hover: #7BDDB6;
  --mint-btn-text: #062018;
  --mint-nav-bg: #0F1714;
  --mint-nav-hover: #16211D;
  --mint-nav-active: #1B2A24;
  --mint-ok: #5CCB8A;
  --mint-ok-wash: #153524;
  --mint-ok-ink: #5CCB8A;
  --mint-warn: #E3A640;
  --mint-warn-ink: #E3A640;
  --mint-warn-wash: #3A2A0E;
  --mint-bad: #EE7B6E;
  --mint-bad-wash: #3E1A16;
  --mint-bad-ink: #EE7B6E;
  --mint-info: #8FB0E6;
  --mint-info-wash: #172640;
  --mint-t3: #C3A3EA;
  --mint-t3-wash: #2C1F3D;
  --mint-ai-bg: #0F241C;
  --mint-ai-line: #1D4A3A;
  --mint-row-hover: #15201C;
  --mint-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px rgb(0 0 0 / 35%);
  --mint-scroll-edge: rgb(0 0 0 / 60%);
  /* Dark grounds are already soft (not black) under off-white text: dyslexia mode keeps them */
  --mint-dys-page: #0A0F0D;
  --mint-dys-bg: #0C1210;
  --mint-dys-surface: #111916;
}

/* ================= Type scale (07 Typography) ================= */
/* Every font size in this file is one of these steps; nothing else sets a px size. The inclusion modes (plain
   language, dyslexia friendly) raise --mint-fs-scale so the whole scale grows together: body text reaches 15px and
   the hierarchy (page title > figures > section titles and body > labels) keeps its ratios. The steps are declared
   again on the mode classes so a mode class on any element (not only <html>) recomputes them. */
:root,
.mint-plain,
.mint-dyslexia {
  --mint-fs-2xs: calc(10px * var(--mint-fs-scale));    /* sidebar group headings, key hints */
  --mint-fs-xs: calc(10.5px * var(--mint-fs-scale));   /* table and calendar headers, counts */
  --mint-fs-sm: calc(11px * var(--mint-fs-scale));     /* pills, form help, notes under figures, labels */
  --mint-fs-meta: calc(11.5px * var(--mint-fs-scale)); /* section titles, breadcrumbs, secondary lines */
  --mint-fs-ui: calc(12px * var(--mint-fs-scale));     /* buttons, chips, notes, form checks */
  --mint-fs-body: calc(12.5px * var(--mint-fs-scale)); /* body text, tables, navigation, fields */
  --mint-fs-md: calc(13px * var(--mint-fs-scale));     /* tile and empty-state titles, word values in KPIs */
  --mint-fs-lg: calc(14px * var(--mint-fs-scale));     /* modal titles */
  --mint-fs-code: calc(17px * var(--mint-fs-scale));   /* one-time code fields */
  --mint-fs-h1: calc(19px * var(--mint-fs-scale));     /* page titles */
  --mint-fs-figure: calc(20px * var(--mint-fs-scale)); /* KPI figures */
}

:root { --mint-fs-scale: 1; }
/* 12.5px x 1.2 = 15px body text (07 Inclusion modes) */
.mint-plain,
.mint-dyslexia { --mint-fs-scale: 1.2; }

/* ================= Bootstrap variable mapping ================= */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--mint-font);
  --bs-font-monospace: var(--mint-font-mono);
  --bs-body-font-size: var(--mint-fs-body);
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--mint-text);
  --bs-body-bg: var(--mint-page);
  --bs-secondary-color: var(--mint-text-2);
  --bs-tertiary-color: var(--mint-text-3);
  --bs-secondary-bg: var(--mint-surface-2);
  --bs-tertiary-bg: var(--mint-surface-3);
  --bs-emphasis-color: var(--mint-text);
  --bs-code-color: var(--mint-text);  /* Bootstrap's pink <code> fails 4.5:1 on the page colour */
  --bs-border-color: var(--mint-line);
  --bs-border-color-translucent: var(--mint-line);
  --bs-border-radius: var(--mint-radius);
  --bs-border-radius-sm: var(--mint-radius-sm);
  --bs-border-radius-lg: var(--mint-radius);
  --bs-border-radius-xl: var(--mint-radius);
  --bs-border-radius-xxl: var(--mint-radius);
  --bs-border-radius-pill: var(--mint-radius-sm);
  --bs-link-color: var(--mint-accent-ink);
  --bs-link-color-rgb: 10, 108, 77;
  --bs-link-hover-color: var(--mint-accent-ink);
  --bs-link-hover-color-rgb: 10, 108, 77;
  --bs-focus-ring-color: var(--mint-accent);
  --bs-box-shadow: var(--mint-shadow);
  --bs-form-invalid-color: var(--mint-bad);
  --bs-form-invalid-border-color: var(--mint-bad);
  --bs-form-valid-color: var(--mint-ok-ink);
  --bs-form-valid-border-color: var(--mint-ok);
}

[data-bs-theme="dark"] {
  --bs-link-color-rgb: 123, 221, 182;
  --bs-link-hover-color-rgb: 123, 221, 182;
}

/* ================= Base ================= */
body {
  font-family: var(--mint-font);
  background: var(--mint-page);
  color: var(--mint-text);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--mint-accent);
  outline-offset: 1px;
}

h1, h2, h3, h4 { color: var(--mint-text); letter-spacing: -.01em; }

/* Links (sitemap `.mk a`): UI links (breadcrumb, card headers, tables, lists, tiles, tabs, chips, menus) carry no
   underline; a plain link gains one on hover. A link inside running prose keeps its underline (WCAG 1.4.1: the link
   colour alone is under 3:1 against body text). */
a { color: var(--mint-accent-ink); text-decoration: none; text-underline-offset: 2px; }
a:not([class]):hover { text-decoration: underline; }

:is(p, .mint-prose, .mint-note, .alert, .form-text, .invalid-feedback, .mint-empty) a:not(.btn) { text-decoration: underline; }

/* A container whose bullet lists are meant (help text, terms, legal copy): lists elsewhere in <main> are layout */
.mint-prose ul,
.mint-prose ol { margin: 0 0 6px; padding-left: 18px; }
.mint-prose li + li { margin-top: 2px; }
.mint-prose > :last-child { margin-bottom: 0; }

/* ================= App shell (layouts/app.html) ================= */
.mint-shell {
  display: grid;
  grid-template-columns: var(--mint-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.mint-sidebar {
  background: var(--mint-nav-bg);
  border-right: 1px solid var(--mint-line);
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mint-line-2) transparent;
}

/* Bootstrap's .offcanvas-lg makes the panel transparent (!important) at 992px and up: keep the menu's own ground */
.mint-sidebar.offcanvas-lg { background-color: var(--mint-nav-bg) !important; }

.mint-org {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--mint-line);
  margin-bottom: 4px;
}

.mint-org-sub { font-size: var(--mint-fs-xs); color: var(--mint-text-3); }

/* The app shell's organisation block (sitemap shell): logo or initials in a square, the name and the locality */
.mint-org-row { flex-direction: row; align-items: center; gap: 8px; }
.mint-org-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mint-org-name { font-size: var(--mint-fs-body); font-weight: 600; color: var(--mint-text); overflow-wrap: anywhere; }

/* 26px square (sitemap .orgb .lg). Its ground stays accent-ink, not the lighter accent: white initials on the
   accent are 3.1:1, under AA for 11px text (decisions.md, UI polish). */
.mint-org-logo {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: var(--mint-radius-sm);
  background: var(--mint-accent-ink);
  color: var(--mint-on-accent);
  font-size: var(--mint-fs-sm);
  font-weight: 700;
  overflow: hidden;
}

.mint-org-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--mint-surface); }

.mint-nav-label { flex: 1; min-width: 0; }

.mint-nav-count:empty { display: none; }

/* Solid mint count (sitemap .cnt) on the button ground, which keeps white text at AA (the accent itself is 3.1:1) */
.mint-nav-count {
  margin-left: auto;
  font-family: var(--mint-font-mono);
  font-size: var(--mint-fs-xs);
  font-weight: 600;
  line-height: 1.5;
  padding: 0 5px;
  border-radius: var(--mint-radius-sm);
  background: var(--mint-btn-bg);
  color: var(--mint-btn-text);
}

.mint-mark {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0 6px;
  font-size: var(--mint-fs-sm);
  font-weight: 600;
  color: var(--mint-text-3);
}

.mint-mark-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--mint-accent); }

.mint-nav-heading {
  font-size: var(--mint-fs-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mint-text-3);
  padding: 9px 8px 2px;
  margin: 0;
  font-weight: 600;
}

.mint-nav { list-style: none; margin: 0; padding: 0; }

.mint-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mint-text-2);
  font-size: var(--mint-fs-body);
  padding: 4px 8px;
  min-height: 26px;
  border-radius: var(--mint-radius-sm);
  text-decoration: none;
}

.mint-nav-link .mint-icon { width: 15px; height: 15px; }
.mint-nav-link:hover { background: var(--mint-nav-hover); color: var(--mint-text); }

.mint-nav-link.active,
.mint-nav-link[aria-current="page"] {
  background: var(--mint-nav-active);
  color: var(--mint-accent-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--mint-accent), 0 0 0 1px var(--mint-line);
}

.mint-sidebar-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--mint-line); }

.mint-main { min-width: 0; display: flex; flex-direction: column; }

.mint-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--mint-line);
  background: var(--mint-surface);
  position: sticky;
  top: 0;
  z-index: 1010;
}

.mint-search {
  flex: 1;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mint-surface-2);
  border: 1px solid transparent;
  border-radius: var(--mint-radius-sm);
  padding: 5px 10px;
  color: var(--mint-text-3);
  font-size: var(--mint-fs-ui);
}

.mint-kbd {
  margin-left: auto;
  font-family: var(--mint-font-mono);
  font-size: var(--mint-fs-2xs);
  border: 1px solid var(--mint-line);
  border-radius: var(--mint-radius-sm);
  padding: 0 4px;
  background: transparent;
  color: var(--mint-text-2);
}

.mint-search:focus-within { border-color: var(--mint-accent); }
.mint-search { margin: 0; min-width: 0; }

.mint-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--mint-text);
  font-size: var(--mint-fs-ui);
  padding: 0;
}

.mint-search-input::placeholder { color: var(--mint-text-3); opacity: 1; }
.mint-search-input:focus { outline: none; }
.mint-search-input:disabled { cursor: not-allowed; }

.mint-topbar-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.mint-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--mint-text-2);
  border: 1px solid transparent;
}

/* Top-bar items such as "Record a meeting" (sitemap .capt): the AI-tinted capture button */
.btn.mint-topbar-action {
  --bs-btn-color: var(--mint-accent-ink);
  --bs-btn-bg: var(--mint-ai-bg);
  --bs-btn-border-color: var(--mint-ai-line);
  --bs-btn-hover-color: var(--mint-accent-ink);
  --bs-btn-hover-bg: var(--mint-accent-wash);
  --bs-btn-hover-border-color: var(--mint-accent);
  --bs-btn-active-color: var(--mint-accent-ink);
  --bs-btn-active-bg: var(--mint-accent-wash);
  --bs-btn-active-border-color: var(--mint-accent);
  --bs-btn-font-size: var(--mint-fs-ui);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 9px;
  --bs-btn-padding-y: 4px;
  gap: 5px;
}

.btn.mint-topbar-action .mint-icon { width: 14px; height: 14px; }
.btn.mint-topbar-action .mint-nav-count { margin-left: 2px; }

.mint-icon-btn:hover { background: var(--mint-surface-2); color: var(--mint-text); }
.mint-icon-btn .mint-nav-count { position: absolute; top: -2px; right: -4px; }
a.mint-avatar { text-decoration: none; }
a.mint-avatar:hover { box-shadow: 0 0 0 2px var(--mint-accent); }

@media (width < 768px) {
  .mint-topbar-action { padding-inline: 6px; }
  .mint-kbd { display: none; }
}

.mint-content { padding: 14px 16px 22px; background: var(--mint-bg); flex: 1; }
.mint-content:focus { outline: none; }

/* Content rhythm (sitemap .content): the page's top-level blocks sit 12px apart by themselves, so templates need no
   mt-3 / mb-3 between them; any block margin on a direct child is neutralised (a .row keeps its gutter margins). */
main.mint-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}

main.mint-content > * { min-width: 0; }
main.mint-content > :not(.row) { margin-block: 0 !important; }
/* A form holding only hidden inputs (a CSRF token for buttons elsewhere that use form=) would be an empty 12px slot;
   it still submits while not displayed */
main.mint-content > form:not(:has(> :not(input[type="hidden"]))) { display: none; }

.mint-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mint-accent-wash);
  color: var(--mint-accent-ink);
  display: inline-grid;
  place-items: center;
  font-size: var(--mint-fs-xs);
  font-weight: 700;
  flex: none;
}

@media (width < 992px) {
  .mint-shell { grid-template-columns: minmax(0, 1fr); }
  .mint-sidebar.offcanvas-lg { position: fixed; height: 100vh; width: var(--mint-sidebar-width); }
}

/* The operator console's sidebar is always dark (sitemap operator shell): its nav carries data-bs-theme="dark", so
   the dark tokens apply inside it in either mode. Bootstrap's offcanvas background would otherwise win. */
.mint-sidebar[data-bs-theme="dark"] { background-color: var(--mint-nav-bg) !important; color: var(--mint-text); }

/* ================= Auth layout (layouts/auth.html) ================= */
.mint-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  background: var(--mint-surface-2);
  padding: 30px 16px;
}

.mint-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--mint-surface);
  border: 1px solid var(--mint-line);
  border-radius: var(--mint-radius);
  padding: 26px;
  display: grid;
  gap: 14px;
  box-shadow: var(--mint-shadow);
}

.mint-auth-card.mint-auth-wide { max-width: 860px; }

.mint-auth-card h1 { font-size: var(--mint-fs-h1); font-weight: 600; margin: 0; }
.mint-auth-card > * { margin-bottom: 0; }
.mint-auth-card form { display: grid; gap: 12px; }

/* ================= Portal layout (layouts/portal.html) ================= */
/* Portals for people outside the staff team (02 §11.3): one centred column, at most 940px wide */
.mint-portal-column { width: 100%; max-width: 940px; margin-inline: auto; }

/* Choice cards (setup wizard's pack step): the card whose radio is checked carries the accent ring, following the
   radio live rather than the saved choice; a server-rendered .border-primary ring leaves a card once its radio is
   unchecked, and anything marked .mint-when-checked (a "Selected" pill) shows only on the checked card */
.mint-auth-card .card:has(> .card-body .form-check-input[type="radio"]:checked) {
  border-color: var(--mint-accent) !important;
  box-shadow: 0 0 0 1px var(--mint-accent);
}

.mint-auth-card .card.border-primary:not(:has(> .card-body .form-check-input[type="radio"]:checked)) { border-color: var(--mint-line) !important; }
.mint-auth-card .card:not(:has(> .card-body .form-check-input[type="radio"]:checked)) .mint-when-checked { display: none; }

.mint-auth-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 420px;
  font-size: var(--mint-fs-meta);
  color: var(--mint-text-3);
}

.mint-auth-foot a { color: var(--mint-text-3); }
.mint-auth-foot a:hover { color: var(--mint-accent-ink); }

.mint-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* It's Mint wordmark: dark lettering in light mode, white lettering in dark mode */
.mint-wordmark { display: inline-flex; }
.mint-wordmark img { height: 30px; width: auto; }
.mint-wordmark-sm img { height: 22px; }
.mint-wordmark-dark,
[data-bs-theme="dark"] .mint-wordmark-light { display: none; }
[data-bs-theme="dark"] .mint-wordmark-dark { display: inline; }
.mint-brand-sub { font-size: var(--mint-fs-meta); color: var(--mint-text-3); }

.mint-or {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mint-fs-sm);
  color: var(--mint-text-3);
}

.mint-or::before,
.mint-or::after { content: ""; flex: 1; border-top: 1px solid var(--mint-line); }

/* Light / Dark / System as a compact segmented control (sitemap .seg) */
.mint-theme-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--mint-line);
  border-radius: var(--mint-radius);
  background: var(--mint-surface);
}

.mint-theme-switch .btn {
  --bs-btn-color: var(--mint-text-2);
  --bs-btn-hover-color: var(--mint-text);
  --bs-btn-hover-bg: var(--mint-surface-2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-padding-x: 8px;
  --bs-btn-padding-y: 2px;
  min-height: 24px;
}

.mint-theme-switch .btn[aria-pressed="true"] {
  --bs-btn-color: var(--mint-accent-ink);
  --bs-btn-bg: var(--mint-accent-wash);
  --bs-btn-hover-color: var(--mint-accent-ink);
  --bs-btn-hover-bg: var(--mint-accent-wash);
  --bs-btn-font-weight: 600;
  color: var(--mint-accent-ink);
  background: var(--mint-accent-wash);
}

/* ================= Components ================= */

/* Buttons */
.btn {
  --bs-btn-font-size: var(--mint-fs-ui);
  --bs-btn-font-weight: 500;
  --bs-btn-padding-x: 10px;
  --bs-btn-padding-y: 5px;
  --bs-btn-border-radius: var(--mint-radius-sm);
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-sm { --bs-btn-font-size: var(--mint-fs-meta); --bs-btn-padding-x: 7px; --bs-btn-padding-y: 2px; }
.btn-lg { --bs-btn-font-size: var(--mint-fs-md); --bs-btn-padding-x: 12px; --bs-btn-padding-y: 8px; }

.btn-primary {
  --bs-btn-color: var(--mint-btn-text);
  --bs-btn-bg: var(--mint-btn-bg);
  --bs-btn-border-color: var(--mint-btn-bg);
  --bs-btn-hover-color: var(--mint-btn-text);
  --bs-btn-hover-bg: var(--mint-btn-bg-hover);
  --bs-btn-hover-border-color: var(--mint-btn-bg-hover);
  --bs-btn-active-color: var(--mint-btn-text);
  --bs-btn-active-bg: var(--mint-btn-bg-hover);
  --bs-btn-active-border-color: var(--mint-btn-bg-hover);
  --bs-btn-disabled-color: var(--mint-btn-text);
  --bs-btn-disabled-bg: var(--mint-btn-bg);
  --bs-btn-disabled-border-color: var(--mint-btn-bg);
}

.btn-outline-secondary {
  --bs-btn-color: var(--mint-text);
  --bs-btn-bg: var(--mint-surface);
  --bs-btn-border-color: var(--mint-line-2);
  --bs-btn-hover-color: var(--mint-text);
  --bs-btn-hover-bg: var(--mint-surface);
  --bs-btn-hover-border-color: var(--mint-text-3);
  --bs-btn-active-color: var(--mint-text);
  --bs-btn-active-bg: var(--mint-surface-2);
  --bs-btn-active-border-color: var(--mint-text-3);
}

.btn-link {
  --bs-btn-color: var(--mint-accent-ink);
  --bs-btn-hover-color: var(--mint-accent-ink);
  --bs-btn-active-color: var(--mint-accent-ink);
  --bs-btn-padding-x: 0;
  text-decoration: none;
}

.btn-link:hover { text-decoration: underline; }

.btn-danger {
  --bs-btn-color: var(--mint-bad);
  --bs-btn-bg: var(--mint-surface);
  --bs-btn-border-color: var(--mint-bad);
  --bs-btn-hover-color: var(--mint-surface);
  --bs-btn-hover-bg: var(--mint-bad);
  --bs-btn-hover-border-color: var(--mint-bad);
}

.btn:focus-visible { outline: 2px solid var(--mint-accent); outline-offset: 1px; box-shadow: none; }

.mint-btn-ghost {
  --bs-btn-color: var(--mint-accent-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--mint-accent-ink);
  --bs-btn-hover-bg: var(--mint-accent-wash);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--mint-accent-ink);
  --bs-btn-active-bg: var(--mint-accent-wash);
  --bs-btn-active-border-color: transparent;
}

/* Shown but not usable yet (Wave 2 first drafts): still focusable so the "Coming soon" tooltip can be read */
.mint-coming-soon,
.mint-coming-soon:hover,
.mint-coming-soon:active { opacity: .6; cursor: not-allowed; }

/* Forms */
/* Rich-text fields (components/rich_text.html) and co-edited sections (components/editor.html#editor): the host
   holds Tiptap's .mint-editor-content (styled in vendor/tiptap/.../mint-editor.css) and never widens its column */
.mint-rich-text { display: flex; flex-direction: column; min-width: 0; }
.mint-editor-host { min-width: 0; }
/* A draft's sections (components/editor.html#editor, documents/draft.html): stacked, each under its heading */
.mint-draft-editor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mint-draft-section { min-width: 0; }
.mint-draft-section + .mint-draft-section { margin-top: 12px; }
.mint-section-heading { margin-bottom: 6px; }
/* Each section of a draft gets room to write in; the server-rendered copy shown until Tiptap syncs is as tall as the
   editor that replaces it. The toolbar stays in view under the top bar while a long draft scrolls. */
.mint-draft-editor .mint-editor-host,
.mint-draft-editor .mint-editor-host > .mint-editor-content { min-height: 12rem; }
.mint-draft-editor .mint-editor-toolbar { position: sticky; top: var(--mint-topbar-height); z-index: 2; }
/* A live draft with one section (documents/draft.html, .mint-editor--fill on the page's row): the section fills the
   Content card, which reaches the bottom of the window beside the right-hand column (from 992px, where the columns
   sit side by side); stacked below that, it is half the window tall. The page grows when the text is longer. */
.mint-editor--fill .mint-draft-content > .card-body,
.mint-editor--fill .mint-draft-content > .card-body > [data-suggestion-review-url],
.mint-editor--fill .mint-draft-editor,
.mint-editor--fill .mint-draft-section { display: flex; flex-direction: column; flex: 1 0 auto; }
.mint-editor--fill .mint-editor-host { flex: 1 0 auto; min-height: 50vh; min-height: 50dvh; }
.mint-editor--fill .mint-editor-host:has(> .mint-editor-content) { display: flex; flex-direction: column; }
.mint-editor--fill .mint-editor-host > .mint-editor-content { flex: 1 0 auto; }
@media (min-width: 992px) {
  main.mint-content:has(> .mint-editor--fill) { display: flex; flex-direction: column; }
  .mint-editor--fill { flex: 1 0 auto; }
  .mint-editor--fill > .mint-draft-main { display: flex; flex-direction: column; }
  .mint-editor--fill > .mint-draft-main > .mint-draft-content { flex: 1 0 auto; }
  .mint-editor--fill .mint-editor-host { min-height: 12rem; }
}
.form-label { font-size: var(--mint-fs-meta); font-weight: 500; color: var(--mint-text-2); margin-bottom: 3px; }
.form-label .mint-req { color: var(--mint-bad); }

.form-control,
.form-select {
  font-size: var(--mint-fs-body);
  min-height: 28px;
  padding: 4px 8px;
  color: var(--mint-text);
  background-color: var(--mint-surface);
  border-color: var(--mint-input-line);
  border-radius: var(--mint-radius-sm);
}

/* A select keeps room for its chevron, so a long option never runs under the arrow */
.form-select { padding-right: 26px; background-position: right 8px center; background-size: 12px 10px; }
.form-select[multiple],
.form-select[size]:not([size="1"]) { padding-right: 8px; }

.form-control:focus,
.form-select:focus {
  border-color: var(--mint-accent);
  box-shadow: 0 0 0 1px var(--mint-accent);
  background-color: var(--mint-surface);
  color: var(--mint-text);
}

.form-control::placeholder { color: var(--mint-text-3); }

.form-control.mint-code {
  font-family: var(--mint-font-mono);
  font-size: var(--mint-fs-code);
  letter-spacing: .4em;
  text-align: center;
  min-height: 38px;
}

.form-text { font-size: var(--mint-fs-sm); color: var(--mint-text-3); margin-top: 3px; }
.invalid-feedback { font-size: var(--mint-fs-sm); color: var(--mint-bad); }
.form-control.is-invalid { border-color: var(--mint-bad); }

.form-check-input { border-color: var(--mint-input-line); border-radius: var(--mint-radius-sm); }
.form-check-input:checked { background-color: var(--mint-accent); border-color: var(--mint-accent); }
.form-check-label { font-size: var(--mint-fs-ui); }

.mint-field { display: grid; gap: 0; }

/* Notes and alerts */
.mint-note,
.alert {
  border: 0;
  border-radius: var(--mint-radius);
  padding: 8px 10px;
  font-size: var(--mint-fs-ui);
  background: var(--mint-surface-2);
  color: var(--mint-text-2);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
}

.mint-note .mint-icon,
.alert .mint-icon { margin-top: 2px; flex: none; }

.mint-note-info, .alert-info { background: var(--mint-info-wash); color: var(--mint-info); }
.mint-note-ok, .alert-success { background: var(--mint-ok-wash); color: var(--mint-ok-ink); }
.mint-note-warn, .alert-warning { background: var(--mint-warn-wash); color: var(--mint-warn-ink); }
.mint-note-bad, .alert-danger { background: var(--mint-bad-wash); color: var(--mint-bad-ink); }
.mint-note-accent { background: var(--mint-accent-wash); color: var(--mint-accent-ink); }

/* Pills */
.mint-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mint-fs-sm);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--mint-radius-sm);
  background: var(--mint-surface-2);
  color: var(--mint-text-2);
  white-space: nowrap;
}

.mint-pill-accent { background: var(--mint-accent-wash); color: var(--mint-accent-ink); }
.mint-pill-ok { background: var(--mint-ok-wash); color: var(--mint-ok-ink); }
.mint-pill-warn { background: var(--mint-warn-wash); color: var(--mint-warn-ink); }
.mint-pill-bad { background: var(--mint-bad-wash); color: var(--mint-bad-ink); }
.mint-pill-info { background: var(--mint-info-wash); color: var(--mint-info); }
.mint-pill-t3 { background: var(--mint-t3-wash); color: var(--mint-t3); }
.mint-pill-grey { background: var(--mint-surface-2); color: var(--mint-text-2); }
.mint-pill-out { background: none; border: 1px solid var(--mint-line-2); color: var(--mint-text-2); }
.mint-pill .mint-icon { width: 12px; height: 12px; }

/* RAG: a dot plus the word, never colour alone */
.mint-rag { display: inline-flex; align-items: center; gap: 5px; }
.mint-rag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mint-rag-r { background: var(--mint-bad); }
.mint-rag-a { background: var(--mint-warn); }
.mint-rag-g { background: var(--mint-ok); }
.mint-rag-n { background: var(--mint-line-2); }

/* Cards and page header */
.card {
  --bs-card-bg: var(--mint-surface);
  --bs-card-border-color: var(--mint-line);
  --bs-card-border-radius: var(--mint-radius);
  --bs-card-spacer-x: 12px;
  --bs-card-spacer-y: 12px;
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-x: 12px;
  --bs-card-cap-padding-y: 8px;
  --bs-card-title-spacer-y: 8px;
}

/* Card header (sitemap .ch): no tinted band, inside the card's 12px padding, title left and extras right. The body
   after it starts 8px below (the mock-up's card gap). */
.card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 8px;
  padding: 12px 12px 8px;
  border-bottom: 0;
  font-size: var(--mint-fs-meta);
  color: var(--mint-text-3);
}

.card-header + .card-body { padding-top: 0; }
.card-footer { padding: 8px 12px; }

/* Section title (sitemap .ch h3): every heading in a card header and .card-title, whatever its Bootstrap size class,
   and .mint-section-title for a heading outside a card header */
.card-header :is(h2, h3, h4, h5, h6),
.card-title,
.mint-section-title {
  font-size: var(--mint-fs-meta);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mint-text-2);
  margin: 0;
}

.card-header :is(h2, h3, h4, h5, h6) { flex: 1 1 auto; min-width: 0; }
.card-title { margin-bottom: 8px; }

/* The filter toolbar of a titled card that filters its own table (components/card.html) */
.card-body.mint-card-toolbar { flex: none; padding-bottom: 8px; }
.card-body.mint-card-actions { flex: none; padding-top: 8px; }

/* Page header (sitemap .ph): the heading takes the room, actions stay right beside it at desktop widths; a long
   subtitle wraps under the title instead of pushing the actions down, and wrapped actions stay right-aligned */
.mint-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mint-page-header h1 { font-size: var(--mint-fs-h1); font-weight: 600; margin: 0; }
.mint-crumb { font-size: var(--mint-fs-meta); color: var(--mint-text-3); margin: 0 0 3px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.mint-crumb li + li::before { content: "/"; margin-right: 5px; color: var(--mint-text-3); }
.mint-crumb a { color: var(--mint-text-3); text-decoration: none; }
.mint-crumb a:hover { color: var(--mint-accent-ink); text-decoration: underline; }
.mint-page-heading { flex: 1 1 320px; min-width: 0; }
.mint-page-sub { color: var(--mint-text-2); font-size: var(--mint-fs-body); margin: 2px 0 0; }
.mint-page-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.mint-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mint-page-header > .mint-actions { margin-left: auto; justify-content: flex-end; }

/* Icons (Lucide sprite, components/icons.html#icon) */
.mint-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.btn .mint-icon { width: 16px; height: 16px; }

/* Toasts */
.toast { --bs-toast-font-size: var(--mint-fs-ui); --bs-toast-border-radius: var(--mint-radius); --bs-toast-bg: var(--mint-surface); --bs-toast-border-color: var(--mint-line); }

/* KPI tiles (components/kpis.html#row) */
.mint-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0;
  border: 1px solid var(--mint-line);
  border-radius: var(--mint-radius);
  background: var(--mint-surface);
}

.mint-kpi { padding: 10px 12px; border-left: 1px solid var(--mint-line); min-width: 0; }
.mint-kpi:first-child { border-left: 0; }
.mint-kpi dd { margin: 0; }
.mint-kpi-label { font-size: var(--mint-fs-meta); font-weight: 400; color: var(--mint-text-2); }
.mint-kpi-value { font-size: var(--mint-fs-figure); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--mint-text); }
/* A value that is words, not a figure: sans, smaller, wrapping between words so the strip stays one row high */
.mint-kpi-value.mint-kpi-value-text { font-family: var(--mint-font); font-size: var(--mint-fs-md); font-weight: 600; letter-spacing: 0; line-height: 1.3; padding-top: 3px; overflow-wrap: break-word; }
.mint-kpi-value-text { text-wrap: balance; }
.mint-kpi-note { font-size: var(--mint-fs-sm); color: var(--mint-text-3); }
.mint-text-ok { color: var(--mint-ok-ink); }
.mint-text-warn { color: var(--mint-warn-ink); }
.mint-text-bad { color: var(--mint-bad); }
.mint-text-info { color: var(--mint-info); }

/* Tables (components/tables.html) */
/* A table on its own has one border; the wrapper scrolls sideways only, so a 1px sub-pixel or caption overflow never
   shows a vertical scrollbar. It is positioned, so absolutely placed .visually-hidden text in its cells is clipped by
   it rather than escaping to the page (at the modes' larger type scale that made the page scroll sideways) */
.mint-table-wrap { position: relative; border: 1px solid var(--mint-line); border-radius: var(--mint-radius); background: var(--mint-surface); overflow-y: hidden; }

/* In a card (straight after the card, its header or its toolbar, or in a form that is the card's child) the table is
   flush: the card's border is the only one */
:is(.card, .card > form) > .mint-table-wrap { border: 0; border-radius: 0; }
:is(.card, .card > form) > .mint-table-wrap:first-child { border-top-left-radius: var(--mint-radius); border-top-right-radius: var(--mint-radius); }
:is(.card, .card > form) > .mint-table-wrap:last-child { border-bottom-left-radius: var(--mint-radius); border-bottom-right-radius: var(--mint-radius); }
:is(.card, .card > form) > .mint-table-wrap + .mint-pager { border-top: 1px solid var(--mint-line); }
/* The same in a .mint-card-region: a card's child that htmx swaps whole, such as the library table */
.card > .mint-card-region > .mint-table-wrap { border: 0; border-radius: 0; }
.card > .mint-card-region:last-child > .mint-table-wrap:last-child { border-bottom-left-radius: var(--mint-radius); border-bottom-right-radius: var(--mint-radius); }
.card > .mint-card-region > .mint-table-wrap + .mint-pager { border-top: 1px solid var(--mint-line); }

/* Bootstrap leaves a visually hidden <caption> in the table's flow (1px); take it out so it never causes overflow */
.table > caption.visually-hidden,
.mint-cal > caption.visually-hidden { position: absolute !important; }

.mint-table {
  --bs-table-bg: var(--mint-surface);
  --bs-table-color: var(--mint-text);
  --bs-table-border-color: var(--mint-line);
  --bs-table-hover-bg: var(--mint-row-hover);
  margin: 0;
  font-size: var(--mint-fs-body);
}

.mint-table > thead > tr > th {
  position: sticky;
  top: 0;
  background: var(--mint-surface-2);
  color: var(--mint-text-3);
  font-size: var(--mint-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 8px;
  white-space: nowrap;
}

.mint-table > tbody > tr > td { padding: 6px 8px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.mint-table > tbody > tr:last-child > :is(td, th) { border-bottom: 0; }
.mint-table > tbody > tr:hover > td { background: var(--mint-row-hover); }
.mint-table .mint-num-col { text-align: right; }
.mint-table > tbody > tr.mint-table-empty > td { padding: 10px; background: var(--mint-surface); }

.mint-pager { display: flex; justify-content: space-between; gap: 8px; font-size: var(--mint-fs-meta); color: var(--mint-text-3); padding: 6px 8px; }
.mint-pager-links { display: flex; gap: 12px; }
.mint-pager-links a { display: inline-flex; align-items: center; gap: 2px; min-height: 24px; }

/* Filter chips (components/chips.html#chips) */
/* Filter bar (sitemap .fbar): chips on the left wrap among themselves first; the tools (search, then buttons) keep
   right, on the same line while they fit and right-aligned on their own line once they don't */
.mint-filter-bar { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.mint-chips { display: flex; flex: 1 1 240px; min-width: 0; gap: 4px; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }

.mint-filter-tools {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-left: auto;
}

.mint-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  border: 1px solid var(--mint-line);
  background: var(--mint-surface);
  color: var(--mint-text-2);
  border-radius: var(--mint-radius-sm);
  padding: 2px 8px;
  font-size: var(--mint-fs-ui);
  text-decoration: none;
}

a.mint-chip:hover { border-color: var(--mint-text-3); color: var(--mint-text); }
.mint-chip-on { background: var(--mint-accent-wash); color: var(--mint-accent-ink); border-color: var(--mint-accent-2); }
.mint-chip-count { font-size: var(--mint-fs-sm); font-weight: 500; }

/* Toolbar search (sitemap .msearch): one bordered box holding the icon and a borderless input */
.mint-filter-search {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 220px;
  max-width: 100%;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--mint-line);
  border-radius: var(--mint-radius-sm);
  background: var(--mint-surface);
  color: var(--mint-text-3);
}

.mint-filter-search:focus-within { border-color: var(--mint-accent); }

.mint-filter-search .form-control,
.mint-filter-search .form-control:focus,
.mint-filter-search .form-control:disabled {
  flex: 1;
  min-width: 0;
  min-height: 24px;
  padding: 2px 0;
  font-size: var(--mint-fs-ui);
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Tabs (components/tabs.html#tabs) */
.mint-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--mint-line); }

.mint-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 6px 10px;
  font-size: var(--mint-fs-body);
  color: var(--mint-text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}

a.mint-tab:hover { color: var(--mint-text); }
.mint-tab-on { color: var(--mint-text); border-bottom-color: var(--mint-accent); font-weight: 600; }
.mint-tab-count { font-size: var(--mint-fs-xs); color: var(--mint-text-2); }
.mint-tab-disabled { opacity: .6; cursor: not-allowed; }

/* Progress (components/progress.html#bar); widths come from mint-w-N */
.mint-bar-wrap { display: flex; gap: 6px; align-items: center; }
.mint-bar { position: relative; flex: 1; min-width: 50px; height: 6px; border-radius: var(--mint-radius-sm); background: var(--mint-surface-3); overflow: hidden; }
.mint-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--mint-accent); border-radius: var(--mint-radius-sm); }
.mint-bar-ok { background: var(--mint-ok); }
.mint-bar-warn { background: var(--mint-warn); }
.mint-bar-bad { background: var(--mint-bad); }
.mint-bar-info { background: var(--mint-info); }
.mint-bar-text { font-size: var(--mint-fs-sm); color: var(--mint-text-2); min-width: 34px; text-align: right; }

/* Modals (components/modals.html#modal) */
.modal {
  --bs-modal-bg: var(--mint-surface);
  --bs-modal-border-color: var(--mint-line);
  --bs-modal-border-radius: var(--mint-radius);
  --bs-modal-inner-border-radius: var(--mint-radius);
  --bs-modal-box-shadow: var(--mint-shadow);
  --bs-modal-padding: 12px;
  --bs-modal-header-padding: 10px 12px;
  --bs-modal-header-border-color: var(--mint-line);
  --bs-modal-footer-border-color: var(--mint-line);
  --bs-modal-footer-gap: 6px;
}

.mint-modal .modal-title { font-size: var(--mint-fs-lg); font-weight: 600; }

/* Timeline (components/timeline.html#timeline) */
.mint-timeline { display: grid; list-style: none; margin: 0; padding: 0; }
.mint-timeline-item { display: grid; grid-template-columns: 56px 12px minmax(0, 1fr); gap: 8px; font-size: var(--mint-fs-ui); }
.mint-timeline-when { color: var(--mint-text-2); text-align: right; font-size: var(--mint-fs-sm); }
.mint-timeline-rule { position: relative; }
.mint-timeline-rule::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--mint-line-2); }
.mint-timeline-rule::after { content: ""; position: absolute; left: 1px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint-accent); border: 2px solid var(--mint-surface); }
.mint-timeline-body { padding-bottom: 10px; }
.mint-timeline-title { font-weight: 600; margin: 0; }
.mint-timeline-text { color: var(--mint-text-2); margin: 0; }

/* Kanban skeleton (components/kanban.html#board) */
/* Columns shrink to 128px before the board scrolls, so a seven-stage board fits the content width at 1280px */
.mint-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mint-kanban-col { background: var(--mint-surface-2); border-radius: var(--mint-radius); padding: 6px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.mint-kanban-head { display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: space-between; margin: 0; overflow-wrap: anywhere; padding: 2px 4px; font-size: var(--mint-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mint-text-2); }
/* A count that wraps under a long label stays on the right */
.mint-kanban-head > .mint-num { margin-left: auto; }
.mint-kanban-card { background: var(--mint-surface); border: 1px solid var(--mint-line); border-radius: var(--mint-radius-sm); padding: 7px 8px; display: grid; gap: 4px; font-size: var(--mint-fs-ui); }
.mint-kanban-title { font-weight: 600; line-height: 1.3; }
.mint-kanban-meta { color: var(--mint-text-2); font-size: var(--mint-fs-sm); }
.mint-kanban-none { margin: 0; padding: 6px 4px; color: var(--mint-text-2); font-size: var(--mint-fs-meta); }
/* A board card's "Move to" form (components/kanban.html, card.move): the select takes the room, the button its own */
.mint-kanban-move { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.mint-kanban-move .form-select { flex: 1 1 auto; min-width: 0; }

/* Tasks (automation/tasks*.html, sitemap `tasks`): the title with its source tag, the tick column, the bulk bar,
   the Selected task card's checklist, dismiss and comments */
.mint-task-title { display: block; font-weight: 600; line-height: 1.3; }
.mint-task-source { display: block; color: var(--mint-text-2); font-size: var(--mint-fs-sm); }
.mint-table td.mint-task-select, .mint-table th.mint-task-select { width: 32px; }
.mint-task-bulk { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.mint-task-bulk-field { display: grid; gap: 2px; min-width: 140px; flex: 1 1 140px; }
.mint-task-bulk-field .form-label { margin: 0; font-size: var(--mint-fs-sm); color: var(--mint-text-2); }
.mint-task-sort { margin: 0; padding: 0 12px 8px; color: var(--mint-text-2); font-size: var(--mint-fs-meta); }
.mint-task-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mint-task-check { display: flex; gap: 8px; align-items: flex-start; }
.mint-task-check form { margin: 0; }
.mint-task-box {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; padding: 0; border: 1px solid var(--mint-line-2); border-radius: var(--mint-radius-sm);
  background: var(--mint-surface); color: var(--mint-accent-ink);
}
.mint-task-check-done .mint-task-box { background: var(--mint-accent-wash); border-color: var(--mint-accent); }
.mint-task-check-done .mint-task-check-text { color: var(--mint-text-2); text-decoration: line-through; }
.mint-task-check-text { padding-top: 3px; overflow-wrap: anywhere; }
.mint-task-dismiss summary { cursor: pointer; color: var(--mint-text-2); font-size: var(--mint-fs-ui); min-height: 24px; }
.mint-task-dismiss form { display: grid; gap: 6px; margin-top: 6px; justify-items: start; }
.mint-task-comment { border-left: 2px solid var(--mint-line); padding-left: 8px; }
.mint-task-comment-meta { margin: 0; color: var(--mint-text-2); font-size: var(--mint-fs-sm); }
.mint-task-detail .btn-sm, .mint-kanban-move .btn-sm { min-height: 24px; }
.mint-task-detail form { margin: 0; }

/* Sideways scrolling with a visible cue (components/kanban.html, calendar.html): the wrapper holds the scroll group
   (its only element, focusable and labelled) and draws a shadow on each edge that still has content beyond it. The
   shadows follow the scroll position through a scroll-driven animation; with nothing to scroll the timeline is
   inactive and they stay hidden, and a browser without scroll timelines shows none rather than a wrong one. */
.mint-scroll-x { position: relative; min-width: 0; timeline-scope: --mint-scroll-x; }
.mint-scroll-x > * { scroll-timeline: --mint-scroll-x inline; scrollbar-width: thin; scrollbar-color: var(--mint-input-line) transparent; }
.mint-scroll-x::before,
.mint-scroll-x::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none; opacity: 0; }
.mint-scroll-x::before { left: 0; background: linear-gradient(to right, var(--mint-scroll-edge), transparent); }
.mint-scroll-x::after { right: 0; background: linear-gradient(to left, var(--mint-scroll-edge), transparent); }
@supports (animation-timeline: scroll()) {
  .mint-scroll-x::before,
  .mint-scroll-x::after { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --mint-scroll-x; }
  .mint-scroll-x::before { animation-name: mint-scroll-edge-start; }
  .mint-scroll-x::after { animation-name: mint-scroll-edge-end; }
}
@keyframes mint-scroll-edge-start { 0% { opacity: 0; } 5%, 100% { opacity: 1; } }
@keyframes mint-scroll-edge-end { 0%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* Month calendar skeleton (components/calendar.html#month) */
/* The wrapper only scrolls a narrow screen sideways; the grid itself carries the one line and the radius (sitemap
   .cal), so inside a card there is no second box */
.mint-cal-wrap { overflow-y: hidden; }

.mint-cal {
  width: 100%;
  min-width: 420px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mint-line);
  border-radius: var(--mint-radius);
  background: var(--mint-surface);
}

.mint-cal th { font-size: var(--mint-fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--mint-text-3); padding: 5px 6px; text-align: left; background: var(--mint-surface-2); border-bottom: 1px solid var(--mint-line); }
.mint-cal th:first-child { border-top-left-radius: var(--mint-radius-sm); }
.mint-cal th:last-child { border-top-right-radius: var(--mint-radius-sm); }
.mint-cal tbody tr:last-child .mint-cal-day:first-child { border-bottom-left-radius: var(--mint-radius-sm); }
.mint-cal tbody tr:last-child .mint-cal-day:last-child { border-bottom-right-radius: var(--mint-radius-sm); }
.mint-cal tbody tr:first-child .mint-cal-day { border-top: 0; }
.mint-cal abbr { text-decoration: none; }
.mint-cal-day { height: 84px; padding: 4px 5px; vertical-align: top; border-top: 1px solid var(--mint-line); border-left: 1px solid var(--mint-line); font-size: var(--mint-fs-sm); }
.mint-cal-day:first-child { border-left: 0; }
.mint-cal-out { background: var(--mint-surface-2); }
.mint-cal-num { display: inline-block; font-size: var(--mint-fs-xs); color: var(--mint-text-3); }
.mint-cal-today .mint-cal-num { color: var(--mint-btn-text); background: var(--mint-btn-bg-hover); border-radius: var(--mint-radius-sm); padding: 0 4px; }
.mint-cal-event { display: block; margin-top: 2px; border-radius: 2px; padding: 1px 4px; background: var(--mint-accent-wash); color: var(--mint-accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--mint-fs-xs); text-decoration: none; }
.mint-cal-info { background: var(--mint-info-wash); color: var(--mint-info); }
.mint-cal-warn { background: var(--mint-warn-wash); color: var(--mint-warn-ink); }
.mint-cal-bad { background: var(--mint-bad-wash); color: var(--mint-bad-ink); }
.mint-cal-grey { background: var(--mint-surface-3); color: var(--mint-text-2); }

/* Calendar week, day and agenda views (automation/calendar_week.html, 6D.2): each day a time list (the timeline
   rows), seven across on a wide screen for the week, stacked otherwise; the dot takes the item's layer tone */
.mint-cal-days { display: grid; gap: 12px; }
.mint-cal-days-week { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mint-cal-daylist { min-width: 0; padding-top: 6px; border-top: 1px solid var(--mint-line); }
.mint-cal-daylist-today { border-top: 2px solid var(--mint-accent); }
.mint-cal-dayhead { font-size: var(--mint-fs-sm); font-weight: 600; margin: 0 0 6px; }
.mint-cal-times .mint-timeline-item { grid-template-columns: 76px 12px minmax(0, 1fr); }
.mint-cal-times .mint-timeline-title { overflow-wrap: anywhere; }
.mint-cal-rule-info::after { background: var(--mint-info); }
.mint-cal-rule-warn::after { background: var(--mint-warn); }
.mint-cal-rule-bad::after { background: var(--mint-bad); }
.mint-cal-rule-grey::after { background: var(--mint-text-3); }
.mint-cal-feed-url { flex: 1 1 260px; min-width: 0; font-family: var(--mint-font-mono); font-size: var(--mint-fs-sm); }

/* AI output panel (components/ai.html#panel): always a draft awaiting approval (C13) */
.mint-ai { border: 1px solid var(--mint-ai-line); background: var(--mint-ai-bg); border-radius: var(--mint-radius); padding: 10px 12px; display: grid; gap: 6px; }
.mint-ai-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--mint-fs-body); }
.mint-ai-kind { font-weight: 600; color: var(--mint-accent-ink); }
.mint-ai-title { font-weight: 600; color: var(--mint-text); }
.mint-ai-provider { margin-left: auto; font-size: var(--mint-fs-sm); color: var(--mint-text-2); }
.mint-ai-body { color: var(--mint-text-2); }
.mint-ai-body p { margin: 0 0 4px; }
.mint-ai-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: var(--mint-fs-meta); }
.mint-ai-sources ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* The empty placeholder (components/ai.html#panel with empty=): a quiet box in the panel's own line colour */
.mint-ai > .mint-empty { border-color: var(--mint-ai-line); padding: 12px; }

/* Tier 3 lock (components/lock.html#tier3): purple is for Tier 3 only */
.mint-lock { border: 1px dashed var(--mint-t3); background: var(--mint-t3-wash); border-radius: var(--mint-radius); padding: 10px 12px; display: grid; gap: 4px; font-size: var(--mint-fs-ui); color: var(--mint-text); }
.mint-lock-title { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--mint-t3); }
.mint-lock-text { margin: 0; }

/* Empty state (components/empty.html#state) */
.mint-empty { border: 1px dashed var(--mint-line-2); border-radius: var(--mint-radius); padding: 18px; text-align: center; display: grid; gap: 6px; justify-items: center; color: var(--mint-text-2); }
.mint-empty p { margin: 0; }
.mint-empty-title { color: var(--mint-text); font-size: var(--mint-fs-md); font-weight: 600; }
.mint-empty-text { max-width: 60ch; }
.mint-empty-wave { font-size: var(--mint-fs-meta); }

/* List rows (components/list.html#list, sitemap .li): mark | title and sub | end, a hairline between rows */
.mint-list { list-style: none; margin: 0; padding: 0; }
.mint-li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--mint-line); }
.mint-li:first-child { border-top: 0; padding-top: 0; }
.mint-li:last-child { padding-bottom: 0; }
.mint-li-mark { display: inline-flex; flex: none; align-items: center; color: var(--mint-text-3); }
.mint-li-main { display: grid; flex: 1 1 auto; min-width: 0; }
.mint-li-title { font-weight: 500; color: var(--mint-text); overflow-wrap: anywhere; }
a.mint-li-title { color: var(--mint-accent-ink); }
a.mint-li-title:hover { text-decoration: underline; }
.mint-li-sub { font-size: var(--mint-fs-meta); color: var(--mint-text-3); }
.mint-li-end { flex: none; margin-left: auto; font-size: var(--mint-fs-meta); color: var(--mint-text-3); white-space: nowrap; }

/* Severity bar (sitemap .sev): a 3px coloured mark beside a list row; the row's words carry the meaning */
.mint-sev { display: block; width: 3px; height: 26px; border-radius: 2px; background: var(--mint-line-2); }
.mint-sev-bad { background: var(--mint-bad); }
.mint-sev-warn { background: var(--mint-warn); }
.mint-sev-ok { background: var(--mint-ok); }
.mint-sev-info { background: var(--mint-info); }
.mint-sev-accent { background: var(--mint-accent); }
.mint-sev-t3 { background: var(--mint-t3); }

/* Tiles (sitemap settings .setg / .setc): a responsive grid of bordered link cards, three across at desktop */
.mint-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
@media (width >= 992px) { .mint-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mint-tile {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 10px 12px;
  border: 1px solid var(--mint-line);
  border-radius: var(--mint-radius);
  background: var(--mint-surface);
  color: var(--mint-text);
  text-decoration: none;
}

a.mint-tile:hover { border-color: var(--mint-accent); color: var(--mint-text); }
.mint-tile-title { display: flex; gap: 6px; align-items: center; font-size: var(--mint-fs-md); font-weight: 600; }
.mint-tile-text { font-size: var(--mint-fs-meta); color: var(--mint-text-3); }

/* Rail grid (sitemap .g 230px | 1fr): a narrow left rail (folders, filters) beside the main column */
.mint-grid-rail { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: start; }
.mint-grid-rail > * { min-width: 0; }
@media (width < 992px) { .mint-grid-rail { grid-template-columns: minmax(0, 1fr); } }

/* Django messages as toasts (components/alerts.html#toast), stacked in #mint-toasts */
.mint-toast { --bs-toast-max-width: 360px; --bs-toast-padding-x: 10px; --bs-toast-padding-y: 8px; box-shadow: var(--mint-shadow); }

/* The form error summary (components/forms.html#error-summary): focused on load, so its focus ring must show */
.mint-error-summary { display: block; }
.mint-error-summary:focus { outline: 2px solid var(--mint-bad); outline-offset: 1px; }
.mint-error-summary ul { margin-top: 2px; }
/* Two or more links in the summary must be 24px apart, target to target (WCAG 2.5.8 Target Size) */
.mint-error-summary li + li { margin-top: 8px; }

/* Style guide (core/styleguide.html, DEBUG only) */
.mint-sg-code { font-family: var(--mint-font-mono); font-size: var(--mint-fs-sm); color: var(--mint-text-2); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.mint-sg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* One sample per type-scale step */
.mint-sg-fs-2xs { font-size: var(--mint-fs-2xs); }
.mint-sg-fs-xs { font-size: var(--mint-fs-xs); }
.mint-sg-fs-sm { font-size: var(--mint-fs-sm); }
.mint-sg-fs-meta { font-size: var(--mint-fs-meta); }
.mint-sg-fs-ui { font-size: var(--mint-fs-ui); }
.mint-sg-fs-body { font-size: var(--mint-fs-body); }
.mint-sg-fs-md { font-size: var(--mint-fs-md); }
.mint-sg-fs-lg { font-size: var(--mint-fs-lg); }
.mint-sg-fs-code { font-size: var(--mint-fs-code); }
.mint-sg-fs-h1 { font-size: var(--mint-fs-h1); }
.mint-sg-fs-figure { font-size: var(--mint-fs-figure); }

/* ================= mint- helpers ================= */
.mint-num { font-family: var(--mint-font-mono); font-variant-numeric: tabular-nums; }
.mint-label { font-size: var(--mint-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mint-text-2); }
.mint-muted { color: var(--mint-text-3); }
.mint-small { font-size: var(--mint-fs-meta); }
/* A small inline link with a 24px-high target (WCAG 2.2 2.5.8) */
.mint-target { display: inline-block; min-height: 24px; line-height: 24px; }
.mint-hairline { border-top: 1px solid var(--mint-line); }
/* Vertical stacks (sitemap .col): children keep their own height even when the stack is a stretched .col-* in a
   .row; a .row inside a stack keeps its gutters without overflowing the stack's edges */
.mint-stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mint-stack-sm { display: grid; gap: 6px; align-content: start; min-width: 0; }
.mint-stack > *,
.mint-stack-sm > * { min-width: 0; }
.mint-content .row.g-3 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
/* A .row inside a stack is laid out as a 12-column grid with gap gutters instead of Bootstrap's negative margins, so
   it never overflows the stack and its columns line up with the stack's other blocks. Column widths match Bootstrap's
   (col-lg-8 | col-lg-4 come out the same); below a column's breakpoint it takes the full width, as in Bootstrap.
   Rows with no grid equivalent keep Bootstrap's flex layout: auto-width columns (.col, .col-auto, .col-md,
   .col-md-auto …), offset-*, row-cols-* or justify-content-* on the row. The guard sits in :where() so it adds no
   specificity: the grid rules stay at (0,2,0) and the col-*-N span rules below (0,3,0) override the children's
   full-width reset (a guard counted in the specificity made every col-lg-8 | col-lg-4 row stack full width). */
:is(.mint-stack, .mint-stack-sm) > .row:where(:not([class*="row-cols-"], [class*="justify-content-"]):not(:has(> :is(.col, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-sm-auto, .col-md-auto, .col-lg-auto, .col-xl-auto, .col-xxl-auto, [class*="offset-"])))) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--bs-gutter-y) var(--bs-gutter-x);
  margin: 0;
}

:is(.mint-stack, .mint-stack-sm) > .row:where(:not([class*="row-cols-"], [class*="justify-content-"]):not(:has(> :is(.col, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-sm-auto, .col-md-auto, .col-lg-auto, .col-xl-auto, .col-xxl-auto, [class*="offset-"])))) > * { grid-column: 1 / -1; width: auto; max-width: none; margin-inline: 0; margin-top: 0; padding-inline: 0; }
:is(.mint-stack, .mint-stack-sm) > .row > .col-1 { grid-column: span 1; } :is(.mint-stack, .mint-stack-sm) > .row > .col-2 { grid-column: span 2; } :is(.mint-stack, .mint-stack-sm) > .row > .col-3 { grid-column: span 3; }
:is(.mint-stack, .mint-stack-sm) > .row > .col-4 { grid-column: span 4; } :is(.mint-stack, .mint-stack-sm) > .row > .col-5 { grid-column: span 5; } :is(.mint-stack, .mint-stack-sm) > .row > .col-6 { grid-column: span 6; }
:is(.mint-stack, .mint-stack-sm) > .row > .col-7 { grid-column: span 7; } :is(.mint-stack, .mint-stack-sm) > .row > .col-8 { grid-column: span 8; } :is(.mint-stack, .mint-stack-sm) > .row > .col-9 { grid-column: span 9; }
:is(.mint-stack, .mint-stack-sm) > .row > .col-10 { grid-column: span 10; } :is(.mint-stack, .mint-stack-sm) > .row > .col-11 { grid-column: span 11; } :is(.mint-stack, .mint-stack-sm) > .row > .col-12 { grid-column: span 12; }
@media (width >= 576px) {
  :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-1 { grid-column: span 1; } :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-2 { grid-column: span 2; } :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-3 { grid-column: span 3; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-4 { grid-column: span 4; } :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-5 { grid-column: span 5; } :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-6 { grid-column: span 6; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-7 { grid-column: span 7; } :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-8 { grid-column: span 8; } :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-9 { grid-column: span 9; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-10 { grid-column: span 10; } :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-11 { grid-column: span 11; } :is(.mint-stack, .mint-stack-sm) > .row > .col-sm-12 { grid-column: span 12; }
}
@media (width >= 768px) {
  :is(.mint-stack, .mint-stack-sm) > .row > .col-md-1 { grid-column: span 1; } :is(.mint-stack, .mint-stack-sm) > .row > .col-md-2 { grid-column: span 2; } :is(.mint-stack, .mint-stack-sm) > .row > .col-md-3 { grid-column: span 3; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-md-4 { grid-column: span 4; } :is(.mint-stack, .mint-stack-sm) > .row > .col-md-5 { grid-column: span 5; } :is(.mint-stack, .mint-stack-sm) > .row > .col-md-6 { grid-column: span 6; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-md-7 { grid-column: span 7; } :is(.mint-stack, .mint-stack-sm) > .row > .col-md-8 { grid-column: span 8; } :is(.mint-stack, .mint-stack-sm) > .row > .col-md-9 { grid-column: span 9; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-md-10 { grid-column: span 10; } :is(.mint-stack, .mint-stack-sm) > .row > .col-md-11 { grid-column: span 11; } :is(.mint-stack, .mint-stack-sm) > .row > .col-md-12 { grid-column: span 12; }
}
@media (width >= 992px) {
  :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-1 { grid-column: span 1; } :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-2 { grid-column: span 2; } :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-3 { grid-column: span 3; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-4 { grid-column: span 4; } :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-5 { grid-column: span 5; } :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-6 { grid-column: span 6; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-7 { grid-column: span 7; } :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-8 { grid-column: span 8; } :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-9 { grid-column: span 9; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-10 { grid-column: span 10; } :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-11 { grid-column: span 11; } :is(.mint-stack, .mint-stack-sm) > .row > .col-lg-12 { grid-column: span 12; }
}
@media (width >= 1200px) {
  :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-1 { grid-column: span 1; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-2 { grid-column: span 2; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-3 { grid-column: span 3; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-4 { grid-column: span 4; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-5 { grid-column: span 5; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-6 { grid-column: span 6; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-7 { grid-column: span 7; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-8 { grid-column: span 8; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-9 { grid-column: span 9; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-10 { grid-column: span 10; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-11 { grid-column: span 11; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xl-12 { grid-column: span 12; }
}
@media (width >= 1400px) {
  :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-1 { grid-column: span 1; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-2 { grid-column: span 2; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-3 { grid-column: span 3; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-4 { grid-column: span 4; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-5 { grid-column: span 5; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-6 { grid-column: span 6; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-7 { grid-column: span 7; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-8 { grid-column: span 8; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-9 { grid-column: span 9; }
  :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-10 { grid-column: span 10; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-11 { grid-column: span 11; } :is(.mint-stack, .mint-stack-sm) > .row > .col-xxl-12 { grid-column: span 12; }
}
/* Fixed widths in 5% steps for dynamic values (progress bars): CSP forbids inline styles */
.mint-w-0 { width: 0%; }
.mint-w-5 { width: 5%; }
.mint-w-10 { width: 10%; }
.mint-w-15 { width: 15%; }
.mint-w-20 { width: 20%; }
.mint-w-25 { width: 25%; }
.mint-w-30 { width: 30%; }
.mint-w-35 { width: 35%; }
.mint-w-40 { width: 40%; }
.mint-w-45 { width: 45%; }
.mint-w-50 { width: 50%; }
.mint-w-55 { width: 55%; }
.mint-w-60 { width: 60%; }
.mint-w-65 { width: 65%; }
.mint-w-70 { width: 70%; }
.mint-w-75 { width: 75%; }
.mint-w-80 { width: 80%; }
.mint-w-85 { width: 85%; }
.mint-w-90 { width: 90%; }
.mint-w-95 { width: 95%; }
.mint-w-100 { width: 100%; }

/* ================= Inclusion modes (07) ================= */
/* Both modes raise the type scale (Type scale above), so every component's text grows, not only body text */
.mint-plain body { line-height: 1.6; }
.mint-dyslexia body { letter-spacing: .03em; word-spacing: .12em; text-align: left; }
/* No italics: emphasis is carried by weight instead */
.mint-dyslexia :is(em, i, cite, dfn, var, address, .fst-italic) { font-style: normal !important; }
.mint-dyslexia em { font-weight: 600; }
/* An off-white ground behind content (the --mint-dys-* tokens; in the dark theme they equal its own grounds). Set
   again on every themed element so the operator's always-dark sidebar takes its own theme's values. */
.mint-dyslexia,
.mint-dyslexia [data-bs-theme] {
  --mint-page: var(--mint-dys-page);
  --mint-bg: var(--mint-dys-bg);
  --mint-surface: var(--mint-dys-surface);
}
/* Compact density: tighter tables, cards and gaps for people who want more on screen */
.mint-compact .mint-content { padding: 10px 12px; }
.mint-compact .mint-stack { gap: 8px; }
.mint-compact .mint-table > :not(caption) > * > * { padding-top: 3px; padding-bottom: 3px; }
.mint-compact .card { --bs-card-spacer-x: 9px; --bs-card-spacer-y: 8px; }
.mint-compact .mint-kpi { padding: 7px 9px; }
/* Reduce motion (a person's own setting, as well as prefers-reduced-motion below). The scroll edge shadows are
   exempt: they follow the scroll position and never move on their own */
.mint-reduce-motion *, .mint-reduce-motion :not(.mint-scroll-x)::before, .mint-reduce-motion :not(.mint-scroll-x)::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

/* ================= Settings pages (Stage 1.7) ================= */
/* Label / value pairs in a grid: three across, one across with .mint-kv-1 */
.mint-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; margin: 0; }
.mint-kv-1 { grid-template-columns: 1fr; }
.mint-kv dt { font-size: var(--mint-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mint-text-2); }
.mint-kv dd { margin: 0; }
/* The organisation's logo: shown on a checkerboard-free neutral box, never stretched */
.mint-logo-box { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 12px; background: var(--mint-surface-2); border: 1px solid var(--mint-line); border-radius: var(--mint-radius); }
.mint-logo-preview { max-width: 100%; max-height: 120px; object-fit: contain; }
.mint-logo-preview-sm { max-height: 32px; max-width: 120px; object-fit: contain; }
.mint-brand-preview { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--mint-line); border-radius: var(--mint-radius); }
/* A brand colour swatch (an SVG with the colour as its fill: CSP forbids inline styles) */
.mint-swatch { width: 96px; height: 28px; flex: none; }
.mint-term-preview .mint-nav-link { cursor: default; }

/* ================= Automation rules (sitemap rules, rule; 6E.1) ================= */
/* The editor beside its checks: 1.55fr | 1fr at desktop (the mock-up's grid), one column below */
.mint-rule-grid { display: grid; gap: 12px; align-items: start; }
@media (width >= 992px) { .mint-rule-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.mint-rule-grid > * { min-width: 0; }
.mint-rule-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mint-rule-fields > legend { grid-column: 1 / -1; margin-bottom: 0; font-size: var(--mint-fs-meta); color: var(--mint-text-2); }
.mint-rule-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mint-rule-inline > .form-control { flex: 0 1 90px; }
.mint-rule-inline > .form-select { flex: 1 1 140px; }
.mint-rule-narrow { flex: 0 1 180px; width: auto; }
.mint-rule-group { display: grid; gap: 6px; padding: 8px 10px; margin: 0; border: 1px dashed var(--mint-line-2); border-radius: var(--mint-radius); min-width: 0; }
.mint-rule-group > legend { float: none; width: auto; margin: 0; padding: 0 4px; color: var(--mint-text-2); }
/* Actions are numbered in page order, whether the row came with the page or was added by htmx */
.mint-rule-actions tbody { counter-reset: mint-rule-action; }
.mint-rule-action-num::before { counter-increment: mint-rule-action; content: counter(mint-rule-action); color: var(--mint-text-3); }
.mint-rule-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 6px 10px; }
.mint-rule-order { display: flex; gap: 2px; justify-content: flex-end; }
.mint-rule-merge summary { cursor: pointer; font-size: var(--mint-fs-meta); color: var(--mint-accent-ink); }
.mint-rule-merge-list { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0; padding: 0; }
.mint-rule-area, .mint-rule-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.mint-rule-area > .form-select { width: auto; min-width: 160px; }
.mint-rule-filters > .mint-field { min-width: min(220px, 100%); }
.mint-rule-status { white-space: nowrap; }
.mint-rule-status form { display: inline; }

/* ================= Automation flows (sitemap flows, flow; 6F.1) ================= */
/* Palette | canvas | side column from 1200px; stacked below, with the palette's buttons wrapping in rows */
.mint-flow-grid { display: grid; gap: 12px; align-items: start; }
.mint-flow-grid > * { min-width: 0; }
.mint-flow-palette, .mint-flow-canvas, .mint-flow-side { min-width: 0; }  /* the editor's three columns (6F.1) */
@media (width >= 1200px) { .mint-flow-grid { grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 300px); } }
.mint-flow-palette-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mint-flow-palette-list .btn-sm { min-height: 24px; }  /* WCAG 2.5.8 target size: a palette button without a tall icon was 23px */
@media (width >= 1200px) { .mint-flow-palette-list { flex-direction: column; } .mint-flow-palette-list .btn { width: 100%; text-align: start; } }
.mint-flow-path { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.mint-flow-item { display: grid; justify-items: stretch; min-width: 0; }
.mint-flow-path > .mint-flow-item::before { content: "";justify-self: center; width: 2px; height: 14px; background: var(--mint-line-2); }
.mint-flow-node { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--mint-line); border-radius: var(--mint-radius); background: var(--mint-surface); overflow-wrap: anywhere; }
.mint-flow-node.is-selected { border-color: var(--mint-accent); box-shadow: 0 0 0 1px var(--mint-accent); }
.mint-flow-node-trigger { background: var(--mint-accent-wash); }
.mint-flow-node-ai { background: var(--mint-ai-bg); border-color: var(--mint-ai-line); }
.mint-flow-node-appr { background: var(--mint-warn-wash); }
.mint-flow-type { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mint-fs-meta); color: var(--mint-text-2); }
.mint-flow-title { font-weight: 600; }
.mint-flow-sub { font-size: var(--mint-fs-meta); color: var(--mint-text-2); }
.mint-flow-tools { display: flex; gap: 2px; justify-content: flex-end; }
.mint-flow-trigger-edit summary { cursor: pointer; font-size: var(--mint-fs-meta); color: var(--mint-accent-ink); }
.mint-flow-trigger-edit[open] { margin-top: 6px; }
/* An approval's or a branch's paths: side by side from 992px, stacked below */
.mint-flow-branch { display: grid; gap: 10px; margin-top: 10px; min-width: 0; }
@media (width >= 992px) { .mint-flow-branch { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } }
.mint-flow-lane { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 8px; border: 1px dashed var(--mint-line-2); border-radius: var(--mint-radius); }
.mint-flow-lane-label { font-size: var(--mint-fs-meta); font-weight: 600; color: var(--mint-text-2); }
.mint-flow-narrow { max-width: 640px; }

/* ================= Sessions (sitemap `sessions`, `session`; 7C.2) ================= */
.mint-session-title { font-weight: 600; }
.mint-session-sub { display: block; font-size: var(--mint-fs-meta); color: var(--mint-text-2); }
.mint-session-note { display: block; }
.mint-session-card-head, .mint-session-month-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mint-session-card-head small, .mint-session-month-head small { color: var(--mint-text-2); }
.mint-session-card-head form, .mint-session-month-nav { margin-left: auto; display: flex; gap: 6px; }
/* Forms in a register row: hours, Attended, Not attended, Cancel booking; wrap at 768px rather than scroll */
.mint-session-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 3px 0; }
.mint-session-hours { width: 5.5rem; }
.mint-session-match { margin-top: 4px; }
.mint-session-remove { padding-inline: 4px; }
/* Every small button on the sessions pages has a 24px-high target, 24px apart (WCAG 2.2 2.5.8) */
#session-bookings .btn-sm, .mint-session-manage .btn-sm, .mint-session-month-nav .btn-sm { min-height: 28px; }
.mint-session-cancel summary { cursor: pointer; min-height: 24px; color: var(--mint-bad-ink); font-size: var(--mint-fs-ui); }
.mint-session-cancel[open] summary { margin-bottom: 6px; }
/* A form's checkboxes keep a 24px-wide clear space around each box (WCAG 2.2 2.5.8) */
.mint-session-form .form-check { margin-block: 10px; }

/* ================= Project plan and risks (sitemap `project-plan`, `project-risks`; 7E.1) ================= */
/* Gantt: a label column and an SVG track per row; bars, diamonds and the today line are SVG geometry (no inline style) */
.mint-gantt { display: grid; gap: 2px; }
.mint-gantt-row { display: grid; grid-template-columns: minmax(7rem, 13rem) minmax(0, 1fr); gap: 10px; align-items: center; }
.mint-gantt-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: var(--mint-fs-ui); }
.mint-gantt-name { overflow-wrap: anywhere; }
.mint-gantt-caption { font-size: var(--mint-fs-meta); color: var(--mint-text-3); text-transform: uppercase; }
.mint-gantt-edit { font-size: var(--mint-fs-meta); min-height: 24px; }
.mint-gantt-track { display: block; overflow: visible; border-bottom: 1px solid var(--mint-line); }
.mint-gantt-head .mint-gantt-track { border-bottom: 0; }
.mint-gantt-tick { stroke: var(--mint-line); stroke-width: 1; }
.mint-gantt-month { fill: var(--mint-text-3); font-size: var(--mint-fs-meta); font-family: var(--mint-font); }
.mint-gantt-bar-complete { fill: var(--mint-accent-2); background: var(--mint-accent-2); }
.mint-gantt-bar-active { fill: var(--mint-accent); background: var(--mint-accent); }
.mint-gantt-bar-behind { fill: var(--mint-warn); background: var(--mint-warn); }
.mint-gantt-bar-planned { fill: var(--mint-line-2); background: var(--mint-line-2); }
.mint-gantt-diamond { stroke: var(--mint-surface); stroke-width: 1.5; fill: var(--mint-text-2); }
.mint-gantt-diamond-met { fill: var(--mint-ok); }
.mint-gantt-diamond-late { fill: var(--mint-bad); }
.mint-gantt-diamond-slipping { fill: var(--mint-warn); }
.mint-gantt-diamond-funder { stroke: var(--mint-text); }
.mint-gantt-today { stroke: var(--mint-bad); stroke-width: 1.5; stroke-dasharray: 3 2; }
.mint-gantt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--mint-fs-meta); color: var(--mint-text-2); }
.mint-gantt-legend li { display: inline-flex; align-items: center; gap: 5px; }
.mint-gantt-key { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.mint-gantt-key-diamond { width: 9px; height: 9px; border-radius: 1px; background: var(--mint-text-2); transform: rotate(45deg); }
.mint-gantt-key-today { width: 2px; height: 12px; border-radius: 0; background: var(--mint-bad); }
@media (width < 576px) { .mint-gantt-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Row actions in the milestones, register and issues tables: 24px targets that wrap rather than scroll (WCAG 2.5.8) */
.mint-plan-row-actions { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mint-plan-row-actions .btn-sm { min-height: 24px; }
/* A list row's actions (Approve / Review on Leave, Retire / Remove on Time settings): spaced, and tall enough for
   WCAG 2.5.8 target size */
.mint-li-actions { display: inline-flex; gap: 8px; align-items: center; }
.mint-li-actions .btn-sm { min-height: 28px; }
/* Risk heat map: 5x5 counts coloured by score (the number carries the meaning; colour is not the only cue) */
.mint-heat { margin: 0; }
.mint-heat th, .mint-heat td { padding: 3px; border: 0; text-align: center; font-size: var(--mint-fs-meta); }
.mint-heat thead th:first-child, .mint-heat tbody th { text-align: left; color: var(--mint-text-2); font-weight: 500; }
.mint-heat-value { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 26px; border-radius: 4px; font-weight: 600; }
.mint-heat-ok { background: var(--mint-ok-wash); color: var(--mint-ok-ink); }
.mint-heat-warn { background: var(--mint-warn-wash); color: var(--mint-warn-ink); }
.mint-heat-bad { background: var(--mint-bad-wash); color: var(--mint-bad-ink); }
.mint-heat-empty { background: var(--mint-surface-2); }
.mint-heat-axis { margin-top: 4px; text-align: center; font-size: var(--mint-fs-meta); color: var(--mint-text-2); }
/* Timesheet week grid (wave-8 8C.2): a quarter-hours input per day, right-aligned like the figures around it */
.mint-week-grid td, .mint-week-grid th { vertical-align: middle; }
.mint-hours-input { width: 4.25rem; min-height: 24px; margin-left: auto; text-align: right; font-family: var(--mint-font-mono); }
.mint-hours-input[aria-invalid="true"] { border-color: var(--mint-bad); }
.mint-add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.mint-add-row .mint-field { flex: 1 1 200px; margin-bottom: 0; }
/* Timer card: state pill, running clock and its buttons in one wrapping row; the target and task selects side by side */
.mint-timer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mint-timer-clock { font-size: var(--mint-fs-figure); font-weight: 500; line-height: 1.1; }
.mint-timer-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; }
.mint-timer-fields .mint-field { margin-bottom: 0; }
/* Hours by month (wave-8 8E.1, sitemap .cols): a column per month, the figure above it; heights are mint-h-N in 5%
   steps (CSP forbids inline styles). The figures are repeated in a table for screen readers. */
.mint-cols { display: flex; align-items: stretch; gap: 6px; height: 110px; }
.mint-cols-col { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mint-cols-value { font-size: var(--mint-fs-meta); color: var(--mint-text-2); white-space: nowrap; }
.mint-cols-track { display: flex; flex: 1 1 auto; align-items: flex-end; justify-content: center; width: 100%; }
.mint-cols-bar { display: block; width: 100%; max-width: 32px; border-radius: 3px 3px 0 0; background: var(--mint-accent-2); }
.mint-cols-bar-current { background: var(--mint-accent); }
.mint-cols-axis { display: flex; gap: 6px; margin-top: 4px; font-size: var(--mint-fs-meta); color: var(--mint-text-3); }
.mint-cols-axis > span { flex: 1 1 0; min-width: 0; text-align: center; }
.mint-h-0 { height: 0%; }
.mint-h-5 { height: 5%; }
.mint-h-10 { height: 10%; }
.mint-h-15 { height: 15%; }
.mint-h-20 { height: 20%; }
.mint-h-25 { height: 25%; }
.mint-h-30 { height: 30%; }
.mint-h-35 { height: 35%; }
.mint-h-40 { height: 40%; }
.mint-h-45 { height: 45%; }
.mint-h-50 { height: 50%; }
.mint-h-55 { height: 55%; }
.mint-h-60 { height: 60%; }
.mint-h-65 { height: 65%; }
.mint-h-70 { height: 70%; }
.mint-h-75 { height: 75%; }
.mint-h-80 { height: 80%; }
.mint-h-85 { height: 85%; }
.mint-h-90 { height: 90%; }
.mint-h-95 { height: 95%; }
.mint-h-100 { height: 100%; }
/* The rota (wave-8 8E.1): week navigation, the people on a shift with their actions, and the assign picker, where
   someone who cannot fill the shift reads quieter and says why in words (never colour alone) */
.mint-week-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mint-rota-people { display: grid; gap: 4px; }
.mint-rota-people > li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.mint-li-muted .mint-li-title { font-weight: 400; color: var(--mint-text-2); }
.mint-rota-group { padding-top: 8px; border-top: 1px solid var(--mint-line); }
.mint-rota-group > summary { cursor: pointer; font-weight: 500; min-height: 24px; }

/* ================= Maps (fieldwork, D173; static/js/map.js) ================= */
/* Leaflet draws the boundaries as SVG paths with these classes (its className option), so their colours come from the
   tokens in light and dark; condition is also given in words beside the map, never by colour alone */
.mint-map { position: relative; height: 22rem; border: 1px solid var(--mint-line); border-radius: var(--mint-radius); background: var(--mint-surface-2); overflow: hidden; }
.mint-map-sm { height: 16rem; }
.mint-map-lg { height: 30rem; }
.mint-map.mint-map-edit { cursor: crosshair; }
.mint-map-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 18px; text-align: center; color: var(--mint-text-2); }
.mint-map.is-ready .mint-map-fallback { display: none; }
.mint-map .leaflet-container, .mint-map.leaflet-container { font-family: inherit; font-size: var(--mint-fs-ui); line-height: 1.5; background: var(--mint-surface-2); }
.mint-map-shape { stroke: var(--mint-accent); stroke-width: 2; fill: var(--mint-accent); fill-opacity: .18; }
.mint-map-good { stroke: var(--mint-ok); fill: var(--mint-ok); }
.mint-map-fair { stroke: var(--mint-warn); fill: var(--mint-warn); }
.mint-map-poor { stroke: var(--mint-bad); fill: var(--mint-bad); }
.mint-map-unknown { stroke: var(--mint-text-3); fill: var(--mint-text-3); }
.mint-map-pin { stroke: var(--mint-surface); stroke-width: 2; fill-opacity: 1; }
.mint-map-draft { stroke: var(--mint-info); stroke-width: 3; stroke-dasharray: 6 4; fill: var(--mint-info); fill-opacity: .12; }
.mint-map-handle { background: var(--mint-info); border: 2px solid var(--mint-surface); border-radius: 50%; cursor: move; box-shadow: 0 0 0 1px var(--mint-info); }
.mint-map-reference { stroke-dasharray: 4 4; fill-opacity: .06; }
.mint-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mint-map-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--mint-fs-sm); color: var(--mint-text-2); }
.mint-attention > li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--mint-line); }
.mint-attention > li:last-child { border-bottom: 0; }
.mint-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mint-photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mint-radius-sm); border: 1px solid var(--mint-line); }
.mint-photo-grid figcaption { font-size: var(--mint-fs-sm); color: var(--mint-text-2); }

/* ================= HTMX states ================= */
.htmx-indicator { opacity: 0; transition: opacity 120ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, :not(.mint-scroll-x)::before, :not(.mint-scroll-x)::after { transition: none !important; animation: none !important; }
}

/* ================= Print ================= */
@media print {
  .mint-sidebar, .mint-topbar, .mint-actions, #mint-toasts { display: none !important; }
  .mint-shell { display: block; }
  body, .mint-content { background: white; color: black; }
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}