/* Quorum — built stylesheet. DO NOT EDIT BY HAND.
 * Produced by `make css` from quorum/tailwind/input.css:
 *   tokens.css (design handoff, verbatim) + components.css (component layer).
 * Committed on purpose so integrators never run Node (ADR-0015, ADR-0020).
 */

/* Quorum — design tokens
   Tipos de letra auto-alojados (OFL). Não usar pedidos a Google Fonts em produção.
   Ficheiros em quorum/static/quorum/fonts/; os URL sao relativos a esta folha,
   por isso funcionam com qualquer STATIC_URL. */

@font-face { font-family: "Quorum Sans"; src: url("../fonts/SourceSans3-Variable.30164609c163.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Quorum Serif"; src: url("../fonts/SourceSerif4-Variable.e9192c2fe0a3.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Quorum Mono"; src: url("../fonts/IBMPlexMono-Regular.79936b18df9f.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Superfícies e tinta */
  --q-canvas: #F6F7F8;
  --q-surface: #FFFFFF;
  --q-surface-sunken: #EFF0F2;   /* fundo de mesa atrás das folhas de documento */
  --q-surface-muted: #FBFBFC;    /* cabeçalhos de tabela, rodapés de cartão */
  --q-ink: #111827;
  --q-ink-secondary: #374151;
  --q-muted: #6B7280;
  --q-faint: #9CA3AF;
  --q-border: #E5E7EB;
  --q-border-strong: #CBD2D9;
  --q-border-hairline: #F1F2F4;

  /* Acento — ações primárias, ligações, foco. Uma só cor. */
  --q-accent: #0B5C6B;
  --q-accent-hover: #08434E;
  --q-accent-ink: #08434E;
  --q-accent-tint: #E7EFF1;
  --q-accent-border: #CFE0E4;

  /* Semântica — exclusivamente estado */
  --q-success: #1B7F4C;
  --q-success-ink: #14603A;
  --q-success-tint: #E7F4ED;
  --q-success-border: #CDE7DA;
  --q-warning: #B7791F;
  --q-warning-ink: #835408;
  --q-warning-tint: #FDF6E7;
  --q-warning-border: #F2E3C0;
  --q-danger: #B42318;
  --q-danger-ink: #941A11;
  --q-danger-tint: #FDECEA;
  --q-danger-border: #F7D5D1;
  --q-info: #3B5BDB;
  --q-info-ink: #2F46AE;
  --q-info-tint: #EEF2FF;
  --q-info-border: #DCE2FA;
  --q-neutral-tint: #F3F4F6;
  --q-neutral-border: #E3E5E9;

  /* Tipografia */
  --q-font-ui: "Quorum Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --q-font-doc: "Quorum Serif", Georgia, "Times New Roman", serif;
  --q-font-mono: "Quorum Mono", ui-monospace, SFMono-Regular, monospace;
  --q-numeric: tabular-nums;

  --q-text-2xs: 10px;   /* sobrancelhas em maiúsculas, apenas com letter-spacing */
  --q-text-xs: 11.5px;  /* metadados, chips */
  --q-text-sm: 12.5px;  /* controlos secundários */
  --q-text-base: 13px;  /* corpo de tabela */
  --q-text-md: 13.5px;  /* corpo de interface */
  --q-text-lg: 15px;    /* corpo de decisão, botões de portal */
  --q-text-h3: 17px;
  --q-text-h2: 21px;
  --q-text-h1: 25px;
  --q-text-metric: 27px;
  --q-text-metric-lg: 34px;
  --q-text-doc: 15.5px; /* corpo dentro de documento (serif) */

  --q-weight-regular: 400;
  --q-weight-medium: 500;
  --q-weight-semibold: 600;
  --q-weight-bold: 700;   /* só sobrancelhas de acento e crachás */

  --q-leading-tight: 1.25;
  --q-leading-ui: 1.45;
  --q-leading-prose: 1.6;
  --q-leading-doc: 1.65;

  --q-tracking-eyebrow: 0.14em;
  --q-tracking-label: 0.1em;
  --q-tracking-display: -0.015em;

  /* Espaçamento — escala de 4 */
  --q-space-1: 4px;  --q-space-2: 6px;  --q-space-3: 8px;
  --q-space-4: 10px; --q-space-5: 12px; --q-space-6: 14px;
  --q-space-7: 16px; --q-space-8: 18px; --q-space-9: 20px;
  --q-space-10: 22px; --q-space-12: 26px; --q-space-14: 30px;

  /* Raios, traços, sombras */
  --q-radius-chip: 4px;
  --q-radius-control: 6px;
  --q-radius-surface: 8px;
  --q-radius-sheet: 0;    /* papel não tem cantos arredondados */
  --q-border-width: 1px;
  --q-border-width-strong: 1.5px;
  --q-shadow-sheet: 0 1px 2px rgba(17, 24, 39, 0.05), 0 16px 40px -20px rgba(17, 24, 39, 0.22);
  --q-shadow-dialog: 0 1px 2px rgba(17, 24, 39, 0.06), 0 24px 48px -24px rgba(17, 24, 39, 0.28);
  --q-focus-ring: 0 0 0 2px var(--q-surface), 0 0 0 4px var(--q-accent);

  /* Alturas de controlo e linha */
  --q-control-sm: 30px;
  --q-control: 34px;
  --q-control-md: 36px;
  --q-control-lg: 38px;
  --q-control-decision: 44px;
  --q-touch-min: 44px;   /* fluxos de membro: 48px preferencial */
  --q-row-comfortable: 46px;
  --q-row-compact: 36px;

  /* Movimento */
  --q-motion-fast: 150ms;
  --q-motion: 200ms;
  --q-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --q-motion-fast: 1ms; --q-motion: 1ms; }
}

/* Base para tema escuro — não obrigatório na v1; os papéis mantêm-se. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"], :root[data-theme="dark"] {
    --q-canvas: #0E1417;
    --q-surface: #151C20;
    --q-surface-sunken: #0A0F11;
    --q-surface-muted: #1A2226;
    --q-ink: #ECEFF1;
    --q-ink-secondary: #C3CBD1;
    --q-muted: #93A1A8;
    --q-faint: #6C7A81;
    --q-border: #253036;
    --q-border-strong: #35444C;
    --q-border-hairline: #1D262B;
    --q-accent: #4FA3B3;
    --q-accent-hover: #6FBDCB;
    --q-accent-ink: #B9DDE4;
    --q-accent-tint: #12262B;
    --q-accent-border: #1E3D45;
    --q-success-tint: #10241A; --q-success-ink: #7FCFA4; --q-success-border: #1C3A2A;
    --q-warning-tint: #251C0B; --q-warning-ink: #E0BA66; --q-warning-border: #3D2F12;
    --q-danger-tint: #2A1311; --q-danger-ink: #F0A19A; --q-danger-border: #43201D;
    --q-info-tint: #141A2E; --q-info-ink: #A8B8F0; --q-info-border: #232C4A;
    --q-neutral-tint: #1B2328; --q-neutral-border: #263036;
  }
}

/* Reset mínimo */
body {
  margin: 0;
  background: var(--q-canvas);
  color: var(--q-ink);
  font-family: var(--q-font-ui);
  font-size: var(--q-text-md);
  line-height: var(--q-leading-ui);
  font-variant-numeric: var(--q-numeric);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--q-accent); text-decoration: none; }
a:hover { color: var(--q-accent-hover); text-decoration: underline; }
:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
  border-radius: var(--q-radius-chip);
}
.q-doc { font-family: var(--q-font-doc); font-size: var(--q-text-doc); line-height: var(--q-leading-doc); }
.q-mono { font-family: var(--q-font-mono); }


/* Quorum — component layer.
 *
 * Every value here reads a token from tokens.css. Nothing is a literal colour or a magic pixel.
 * The geometry follows design/handoff/redlines.md: 46px comfortable rows, 36px compact, 22px
 * chips, 30/36/38/44px buttons, 4/6/8/0 radii, 232px side navigation, 56px top bar.
 */

/* ============================================================================================
   Layout: shell
   ============================================================================================ */
.q-shell { display: flex; min-height: 100vh; }
.q-shell__nav {
  width: 232px; flex: 0 0 232px; background: var(--q-surface);
  border-right: var(--q-border-width) solid var(--q-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.q-shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.q-shell--embedded .q-shell__nav { display: none; }
.q-shell--embedded .q-topbar { display: none; }

.q-topbar {
  height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: var(--q-space-5);
  padding: 0 var(--q-space-12); background: var(--q-surface);
  border-bottom: var(--q-border-width) solid var(--q-border);
  position: sticky; top: 0; z-index: 20;
}
.q-brand {
  display: flex; align-items: center; gap: var(--q-space-3);
  padding: var(--q-space-6) var(--q-space-7) var(--q-space-5);
  font-size: var(--q-text-h3); font-weight: var(--q-weight-semibold);
  letter-spacing: var(--q-tracking-display); color: var(--q-ink);
}
.q-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--q-space-3) var(--q-space-4); }
.q-nav__item {
  display: flex; align-items: center; gap: var(--q-space-3); height: 34px;
  padding: 0 var(--q-space-4); border-radius: var(--q-radius-control);
  color: var(--q-ink-secondary); font-size: var(--q-text-md); text-decoration: none;
}
.q-nav__item:hover { background: var(--q-neutral-tint); color: var(--q-ink); text-decoration: none; }
.q-nav__item[aria-current="page"] {
  background: var(--q-accent-tint); color: var(--q-accent-ink); font-weight: var(--q-weight-semibold);
}
.q-subnav {
  display: flex; gap: var(--q-space-2); height: 40px; align-items: stretch;
  border-bottom: var(--q-border-width) solid var(--q-border); margin-bottom: var(--q-space-7);
}
.q-subnav__item {
  display: inline-flex; align-items: center; gap: var(--q-space-2); padding: 0 var(--q-space-5);
  color: var(--q-ink-secondary); font-size: var(--q-text-md); text-decoration: none;
}
.q-subnav__item[aria-current="page"] {
  color: var(--q-accent-ink); box-shadow: inset 0 -2px 0 var(--q-accent);
  font-weight: var(--q-weight-semibold);
}
.q-page { padding: var(--q-space-12) var(--q-space-12) 60px; max-width: 1400px; width: 100%; }
.q-page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--q-space-7); margin-bottom: var(--q-space-9); flex-wrap: wrap; }
.q-title { margin: 0; font-size: var(--q-text-h1); font-weight: var(--q-weight-semibold); letter-spacing: var(--q-tracking-display); }
.q-subtitle { margin: 6px 0 0; color: var(--q-muted); font-size: var(--q-text-md); }
.q-eyebrow {
  font-size: var(--q-text-2xs); font-weight: var(--q-weight-semibold); text-transform: uppercase;
  letter-spacing: var(--q-tracking-eyebrow); color: var(--q-muted); margin: 0 0 5px;
}
.q-section-title { margin: 0; font-size: 14px; font-weight: var(--q-weight-semibold); }
.q-meta { color: var(--q-muted); font-size: var(--q-text-xs); }
.q-mono { font-family: var(--q-font-mono); font-size: var(--q-text-xs); }
.q-doc { font-family: var(--q-font-doc); font-size: var(--q-text-doc); line-height: var(--q-leading-doc); }

.q-stack { display: flex; flex-direction: column; gap: var(--q-space-7); }
.q-row { display: flex; align-items: center; gap: var(--q-space-3); flex-wrap: wrap; }
.q-row--tight { gap: var(--q-space-2); }
.q-grid { display: grid; gap: var(--q-space-5); }
.q-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.q-spacer { flex: 1 1 auto; }
.q-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================================
   Surfaces
   ============================================================================================ */
.q-card {
  background: var(--q-surface); border: var(--q-border-width) solid var(--q-border);
  border-radius: var(--q-radius-surface); padding: var(--q-space-7);
}
.q-card--compact { padding: var(--q-space-6); }
.q-card--decision { padding: var(--q-space-8); border-color: var(--q-accent); }
.q-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--q-space-5);
  margin-bottom: var(--q-space-5);
}
.q-card__foot {
  margin: var(--q-space-7) calc(var(--q-space-7) * -1) calc(var(--q-space-7) * -1);
  padding: var(--q-space-5) var(--q-space-7); background: var(--q-surface-muted);
  border-top: var(--q-border-width) solid var(--q-border);
  border-radius: 0 0 var(--q-radius-surface) var(--q-radius-surface);
}
.q-divider { height: 1px; background: var(--q-border-hairline); border: 0; margin: var(--q-space-7) 0; }

/* ============================================================================================
   Buttons
   ============================================================================================ */
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--q-space-3);
  height: var(--q-control-md); padding: 0 var(--q-space-7); border-radius: var(--q-radius-control);
  border: var(--q-border-width) solid var(--q-border); background: var(--q-surface);
  color: var(--q-ink-secondary); font-family: inherit; font-size: var(--q-text-md);
  font-weight: var(--q-weight-medium); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--q-motion-fast) var(--q-ease), border-color var(--q-motion-fast) var(--q-ease);
}
.q-btn:hover { background: var(--q-neutral-tint); text-decoration: none; }
.q-btn:disabled, .q-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.q-btn[aria-busy="true"] { cursor: progress; }
.q-btn--primary {
  background: var(--q-accent); border-color: var(--q-accent); color: #fff;
  font-weight: var(--q-weight-semibold);
}
.q-btn--primary:hover { background: var(--q-accent-hover); border-color: var(--q-accent-hover); color: #fff; }
.q-btn--quiet {
  background: transparent; border-style: dashed; border-color: var(--q-border-strong);
  color: var(--q-accent);
}
.q-btn--destructive { color: var(--q-danger); border-color: var(--q-danger-border); }
.q-btn--destructive:hover { background: var(--q-danger-tint); }
.q-btn--sm { height: var(--q-control-sm); padding: 0 var(--q-space-5); font-size: var(--q-text-sm); }
.q-btn--lg { height: var(--q-control-lg); padding: 0 var(--q-space-9); font-size: var(--q-text-lg); }
.q-btn--decision { height: var(--q-control-decision); padding: 0 var(--q-space-10); font-size: var(--q-text-lg); }
.q-btn--block { width: 100%; }
.q-btn__spinner {
  width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor;
  border-right-color: transparent; animation: q-spin 700ms linear infinite; display: none;
}
.q-btn[aria-busy="true"] .q-btn__spinner { display: inline-block; }
@keyframes q-spin { to { transform: rotate(360deg); } }

/* ============================================================================================
   Chips
   ============================================================================================ */
.q-chip {
  display: inline-flex; align-items: center; gap: var(--q-space-2); height: 22px;
  padding: 0 var(--q-space-3); border-radius: var(--q-radius-chip); white-space: nowrap;
  font-size: var(--q-text-xs); font-weight: var(--q-weight-semibold);
  border: var(--q-border-width) solid var(--q-neutral-border); background: var(--q-neutral-tint);
  color: var(--q-ink-secondary);
}
.q-chip--success { background: var(--q-success-tint); border-color: var(--q-success-border); color: var(--q-success-ink); }
.q-chip--warning { background: var(--q-warning-tint); border-color: var(--q-warning-border); color: var(--q-warning-ink); }
.q-chip--danger  { background: var(--q-danger-tint);  border-color: var(--q-danger-border);  color: var(--q-danger-ink); }
.q-chip--info    { background: var(--q-info-tint);    border-color: var(--q-info-border);    color: var(--q-info-ink); }
.q-chip--accent  { background: var(--q-accent-tint);  border-color: var(--q-accent-border);  color: var(--q-accent-ink); }
.q-chip--struck  { text-decoration: line-through; }
.q-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--q-space-2);
  border-radius: var(--q-radius-chip); font-size: var(--q-text-2xs);
  font-weight: var(--q-weight-bold); text-transform: uppercase;
  letter-spacing: var(--q-tracking-label);
  background: var(--q-warning-tint); color: var(--q-warning-ink);
  border: var(--q-border-width) solid var(--q-warning-border);
}
.q-badge--new { background: var(--q-accent-tint); color: var(--q-accent-ink); border-color: var(--q-accent-border); }
.q-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--q-neutral-tint); color: var(--q-ink-secondary);
  font-size: var(--q-text-2xs); font-weight: var(--q-weight-semibold);
}

/* ============================================================================================
   Forms
   ============================================================================================ */
.q-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--q-space-6); }
.q-label { font-size: var(--q-text-sm); font-weight: var(--q-weight-medium); color: var(--q-ink-secondary); }
.q-hint { font-size: var(--q-text-xs); color: var(--q-muted); margin-top: 4px; }
.q-input, .q-select, .q-textarea, .q-file {
  box-sizing: border-box; width: 100%; max-width: 100%; min-height: var(--q-control-lg); padding: 0 var(--q-space-4);
  border: var(--q-border-width) solid #8F98A3; border-radius: var(--q-radius-control);
  background: var(--q-surface); color: var(--q-ink); font-family: inherit;
  font-size: var(--q-text-md); font-variant-numeric: var(--q-numeric);
}
.q-textarea { padding: var(--q-space-4); min-height: 84px; line-height: var(--q-leading-ui); resize: vertical; }
.q-select { padding-right: var(--q-space-8); }
.q-input:focus-visible, .q-select:focus-visible, .q-textarea:focus-visible {
  outline: 2px solid var(--q-accent); outline-offset: 2px; border-color: var(--q-accent);
}
.q-input[aria-invalid="true"], .q-textarea[aria-invalid="true"] { border-color: var(--q-danger); }
.q-error { color: var(--q-danger-ink); font-size: var(--q-text-sm); }

/* Rows editor: flow steps, template fields — one bordered block per row, numbered by CSS. */
.q-rows { list-style: none; margin: 0 0 var(--q-space-6); padding: 0; counter-reset: q-row;
  display: flex; flex-direction: column; gap: var(--q-space-5); }
.q-rows__item { counter-increment: q-row; border: var(--q-border-width) solid var(--q-border);
  border-radius: var(--q-radius-control); padding: var(--q-space-6); background: var(--q-surface); }
.q-rows__index::before { content: counter(q-row); }
.q-rows__item:has(.q-rows__delete input:checked) { background: var(--q-surface-sunken); }
.q-rows__item:has(.q-rows__delete input:checked) .q-grid { display: none; }
.q-field > div:has(input[type="checkbox"]) { display: flex; flex-wrap: wrap; gap: var(--q-space-2) var(--q-space-6); }
.q-error-summary {
  border: var(--q-border-width) solid var(--q-danger-border); background: var(--q-danger-tint);
  color: var(--q-danger-ink); border-radius: var(--q-radius-control);
  padding: var(--q-space-5) var(--q-space-6); margin-bottom: var(--q-space-7);
}
.q-error-summary ul { margin: var(--q-space-3) 0 0; padding-left: var(--q-space-7); }
.q-radio-group { display: flex; flex-wrap: wrap; gap: var(--q-space-3); }
.q-radio-group label { display: inline-flex; align-items: center; gap: var(--q-space-2); font-size: var(--q-text-md); }
.q-segmented { display: inline-flex; border: var(--q-border-width) solid var(--q-border-strong); border-radius: var(--q-radius-control); overflow: hidden; }
.q-segmented label {
  display: inline-flex; align-items: center; justify-content: center; height: 34px;
  padding: 0 var(--q-space-5); font-size: var(--q-text-sm); cursor: pointer;
  border-right: var(--q-border-width) solid var(--q-border);
}
.q-segmented label:last-child { border-right: 0; }
.q-segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.q-segmented input:checked + span { font-weight: var(--q-weight-semibold); }
.q-segmented label:has(input:checked) { background: var(--q-neutral-tint); }
.q-segmented label:has(input[value="present"]:checked) { background: var(--q-success-tint); color: var(--q-success-ink); }
.q-segmented label:has(input[value="absent"]:checked) { background: var(--q-danger-tint); color: var(--q-danger-ink); }
.q-segmented label:has(input[value="represented"]:checked) { background: var(--q-info-tint); color: var(--q-info-ink); }
.q-segmented label:has(input:focus-visible) { outline: 2px solid var(--q-accent); outline-offset: -2px; }

.q-dropzone {
  border: 1.5px dashed var(--q-border-strong); border-radius: var(--q-radius-control);
  padding: var(--q-space-9); text-align: center; color: var(--q-muted);
  display: flex; flex-direction: column; align-items: center; gap: var(--q-space-4);
}
.q-dropzone--over { border-color: var(--q-accent); background: var(--q-accent-tint); }

/* ============================================================================================
   Tables
   ============================================================================================ */
.q-table-wrap { overflow-x: auto; border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-surface); background: var(--q-surface); }
.q-table { width: 100%; border-collapse: collapse; font-size: var(--q-text-base); }
.q-table thead th {
  position: sticky; top: 0; z-index: 1; height: 30px; background: var(--q-surface-muted);
  text-align: left; padding: 0 var(--q-space-5); color: var(--q-muted);
  font-size: var(--q-text-2xs); font-weight: var(--q-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--q-tracking-label);
  border-bottom: var(--q-border-width) solid var(--q-border); white-space: nowrap;
}
.q-table tbody td { padding: 12px var(--q-space-5); border-bottom: var(--q-border-width) solid var(--q-border-hairline); vertical-align: middle; }
.q-table tbody tr { height: var(--q-row-comfortable); }
.q-table tbody tr:hover { background: var(--q-surface-muted); }
.q-table--compact tbody tr { height: var(--q-row-compact); }
.q-table--compact tbody td { padding: 7px var(--q-space-4); }
.q-table th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.q-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.q-table__actions { text-align: right; white-space: nowrap; }
.q-table caption { text-align: left; padding: var(--q-space-5); color: var(--q-muted); font-size: var(--q-text-xs); }

.q-pagination { display: flex; align-items: center; gap: var(--q-space-3); padding: var(--q-space-5) 0; }
.q-pagination__current { font-size: var(--q-text-sm); color: var(--q-muted); }

/* ============================================================================================
   Filters bar
   ============================================================================================ */
.q-filters {
  display: flex; align-items: flex-end; gap: var(--q-space-4); flex-wrap: wrap;
  padding: var(--q-space-5) var(--q-space-6); background: var(--q-surface);
  border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-surface);
  margin-bottom: var(--q-space-7);
}
.q-filter { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.q-filter__label {
  font-size: 9px; text-transform: uppercase; letter-spacing: var(--q-tracking-label);
  font-weight: var(--q-weight-semibold); color: var(--q-muted);
}
.q-filter select, .q-filter input {
  height: var(--q-control); font-size: var(--q-text-sm); font-weight: var(--q-weight-semibold);
  border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-control);
  background: var(--q-surface); color: var(--q-ink); padding: 0 var(--q-space-3);
}
.q-filters__query { font-family: var(--q-font-mono); font-size: 10.5px; color: var(--q-muted); }

/* ============================================================================================
   Counters and risk strip
   ============================================================================================ */
.q-counters { display: flex; gap: var(--q-space-5); flex-wrap: wrap; margin-bottom: var(--q-space-7); }
.q-counter {
  flex: 1 1 140px; padding: var(--q-space-5) var(--q-space-6); background: var(--q-surface);
  border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-surface);
  text-decoration: none; color: inherit;
}
.q-counter:hover { border-color: var(--q-accent-border); text-decoration: none; }
.q-counter__value { font-size: var(--q-text-metric); font-weight: var(--q-weight-semibold); letter-spacing: -0.02em; }
.q-counter__label { font-size: var(--q-text-xs); color: var(--q-muted); }

.q-risk {
  border: var(--q-border-width) solid var(--q-warning-border); background: var(--q-warning-tint);
  border-radius: var(--q-radius-surface); padding: var(--q-space-6) var(--q-space-7);
  margin-bottom: var(--q-space-7);
}
.q-risk__list { list-style: none; margin: var(--q-space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--q-space-3); }
.q-risk__item { display: flex; gap: var(--q-space-4); align-items: baseline; flex-wrap: wrap; font-size: var(--q-text-md); }

/* ============================================================================================
   Process line (stepper)
   ============================================================================================ */
.q-process { background: var(--q-surface); border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-surface); padding: var(--q-space-7); }
.q-process__track { display: flex; align-items: stretch; overflow-x: auto; padding-bottom: var(--q-space-4); }
.q-process__track:focus-visible { outline: 2px solid var(--q-accent); outline-offset: 2px; }
.q-process__step { min-width: 104px; flex: 1 1 0; display: flex; flex-direction: column; gap: var(--q-space-3); position: relative; padding-right: var(--q-space-3); }
.q-process__node {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--q-border-strong);
  background: var(--q-surface); display: flex; align-items: center; justify-content: center;
  color: var(--q-surface); flex: 0 0 auto;
}
.q-process__step--done .q-process__node { background: var(--q-accent); border-color: var(--q-accent); color: #fff; }
.q-process__step--current .q-process__node {
  width: 22px; height: 22px; border-color: var(--q-accent); border-width: 2px;
  box-shadow: 0 0 0 5px var(--q-accent-tint); background: var(--q-surface);
}
.q-process__rail { position: absolute; top: 8px; left: 16px; right: 0; height: 1px; background: var(--q-border); }
.q-process__step--done .q-process__rail { background: var(--q-accent-border); }
.q-process__label { font-size: var(--q-text-xs); color: var(--q-ink-secondary); line-height: var(--q-leading-tight); }
.q-process__step--current .q-process__label { font-weight: var(--q-weight-semibold); color: var(--q-ink); }
.q-process__when { font-family: var(--q-font-mono); font-size: 10.5px; color: var(--q-muted); }
.q-process__deviations {
  margin-top: var(--q-space-6); padding-top: var(--q-space-6);
  border-top: 1px dashed var(--q-border-strong); display: flex; gap: var(--q-space-7);
  align-items: center; flex-wrap: wrap;
}
.q-process__deviations-label {
  font-size: var(--q-text-2xs); text-transform: uppercase; letter-spacing: var(--q-tracking-eyebrow);
  font-weight: var(--q-weight-semibold); color: var(--q-muted);
}
.q-process__deadline { margin-left: auto; display: flex; align-items: center; gap: var(--q-space-2); color: var(--q-warning-ink); font-size: var(--q-text-xs); }

/* ============================================================================================
   Next-action card
   ============================================================================================ */
.q-next {
  border: var(--q-border-width) solid var(--q-accent); border-radius: var(--q-radius-surface);
  background: var(--q-surface); padding: var(--q-space-8);
}
.q-next__title { margin: 0 0 6px; font-size: var(--q-text-h3); font-weight: var(--q-weight-semibold); letter-spacing: -0.01em; }
.q-next__why { margin: 0 0 var(--q-space-7); color: var(--q-ink-secondary); }
.q-next__meta { margin: var(--q-space-5) 0 0; color: var(--q-muted); font-size: var(--q-text-xs); }

/* ============================================================================================
   Decision panel
   ============================================================================================ */
.q-decision { display: flex; align-items: stretch; gap: 0; border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-surface); overflow: hidden; background: var(--q-surface); }
.q-decision__doc { flex: 1 1 560px; min-width: 0; background: var(--q-surface-sunken); padding: var(--q-space-12); overflow-y: auto; }
.q-decision__rail { flex: 1 1 340px; min-width: 340px; max-width: 396px; border-left: var(--q-border-width) solid var(--q-border); background: var(--q-surface); display: flex; flex-direction: column; }
.q-decision__section { padding: var(--q-space-7); border-bottom: var(--q-border-width) solid var(--q-border-hairline); }
@media (max-width: 900px) {
  .q-decision { flex-direction: column-reverse; }
  .q-decision__rail { max-width: none; border-left: 0; border-bottom: var(--q-border-width) solid var(--q-border); }
}

.q-stamp { border: var(--q-border-width) solid var(--q-accent-border); border-radius: var(--q-radius-control); background: #FBFDFD; }
.q-stamp__head {
  display: flex; align-items: center; gap: var(--q-space-3); padding: var(--q-space-3) var(--q-space-6);
  border-bottom: var(--q-border-width) solid var(--q-accent-tint);
  font-size: var(--q-text-2xs); font-weight: var(--q-weight-bold); text-transform: uppercase;
  letter-spacing: var(--q-tracking-eyebrow); color: var(--q-accent-ink); margin: 0;
}
.q-stamp__body { display: grid; grid-template-columns: auto 1fr; gap: var(--q-space-2) var(--q-space-5); padding: var(--q-space-6); font-family: var(--q-font-mono); font-size: var(--q-text-xs); color: var(--q-ink-secondary); margin: 0; }
.q-stamp__body dt { color: var(--q-muted); }
.q-stamp__body dd { margin: 0; overflow-wrap: anywhere; }
.q-stamp__integrity { display: flex; align-items: center; gap: var(--q-space-2); padding: var(--q-space-3) var(--q-space-6); border-top: var(--q-border-width) solid var(--q-accent-tint); font-size: var(--q-text-xs); color: var(--q-success-ink); margin: 0; }
.q-stamp__integrity--broken { color: var(--q-danger-ink); }

.q-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--q-space-4); }
.q-chain__row { display: flex; gap: var(--q-space-4); align-items: baseline; font-size: var(--q-text-md); }
.q-chain__row--current { font-weight: var(--q-weight-semibold); }

/* ============================================================================================
   Document sheet
   ============================================================================================ */
.q-sheet {
  background: var(--q-surface); box-shadow: var(--q-shadow-sheet); border-radius: var(--q-radius-sheet);
  padding: 22mm 20mm 20mm; max-width: 210mm; margin: 0 auto;
  font-family: var(--q-font-doc); font-size: var(--q-text-doc); line-height: var(--q-leading-doc);
  color: var(--q-ink);
}
.q-sheet h1 { font-size: 21px; font-weight: var(--q-weight-semibold); text-align: center; margin: var(--q-space-12) 0 4px; }
.q-sheet h2 { font-size: 16px; font-weight: var(--q-weight-semibold); margin: var(--q-space-9) 0 var(--q-space-4); }
.q-sheet p { margin: 0 0 var(--q-space-6); text-wrap: pretty; }
.q-sheet ol, .q-sheet ul { margin: 0 0 var(--q-space-7); padding-left: var(--q-space-9); }
.q-sheet li { margin-bottom: var(--q-space-2); }
.q-sheet__runhead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--q-space-3); border-bottom: 1.2pt solid var(--q-ink);
  font-family: var(--q-font-ui); font-size: 9px; font-weight: var(--q-weight-semibold);
  letter-spacing: var(--q-tracking-eyebrow); text-transform: uppercase; color: var(--q-muted);
}

/* diff highlighting: colour plus a 4px shadow of the same colour, not a box */
.q-diff__line { margin: 0 0 var(--q-space-5); }
.q-diff__line--changed, .q-diff__line--added {
  background: var(--q-success-tint); box-shadow: 0 0 0 4px var(--q-success-tint);
}
.q-diff__line--removed { color: var(--q-muted); text-decoration: line-through; }
.q-diff__legend { margin-top: var(--q-space-7); font-size: var(--q-text-xs); color: var(--q-muted); }

/* ============================================================================================
   Timeline (audit)
   ============================================================================================ */
.q-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.q-timeline__row { display: flex; gap: var(--q-space-6); padding: var(--q-space-4) 0; border-bottom: var(--q-border-width) solid var(--q-border-hairline); }
.q-timeline__time { flex: 0 0 92px; font-family: var(--q-font-mono); font-size: var(--q-text-xs); color: var(--q-muted); }
.q-timeline__body { flex: 1 1 auto; min-width: 0; font-size: var(--q-text-md); }
.q-timeline__hash { font-family: var(--q-font-mono); font-size: 10.5px; color: var(--q-faint); overflow-wrap: anywhere; }

/* ============================================================================================
   KPI cards and charts
   ============================================================================================ */
.q-kpi { background: var(--q-surface); border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-surface); padding: var(--q-space-7); display: flex; flex-direction: column; gap: var(--q-space-3); }
.q-kpi__label { font-size: var(--q-text-xs); color: var(--q-muted); }
.q-kpi__value { font-size: var(--q-text-metric); font-weight: var(--q-weight-semibold); letter-spacing: -0.02em; line-height: 1; }
.q-kpi__unit { font-size: var(--q-text-md); color: var(--q-muted); margin-left: 4px; font-weight: var(--q-weight-regular); }
.q-kpi__reading { font-size: var(--q-text-xs); color: var(--q-ink-secondary); }
.q-kpi__trend { display: inline-flex; align-items: center; gap: 2px; font-size: var(--q-text-xs); font-weight: var(--q-weight-semibold); }
.q-kpi__trend--good { color: var(--q-success-ink); }
.q-kpi__trend--bad { color: var(--q-warning-ink); }
.q-sparkline { color: var(--q-accent); display: block; }
.q-bars__label { font-size: 11.5px; fill: var(--q-ink-secondary); }
.q-bars__value { font-size: 11.5px; fill: var(--q-muted); font-variant-numeric: tabular-nums; }
.q-bars__bar { fill: var(--q-accent); }
.q-line__axis { stroke: var(--q-border); stroke-width: 1; }
.q-line { color: var(--q-accent); }
.q-donut__seg--0 { stroke: var(--q-accent); }
.q-donut__seg--1 { stroke: var(--q-info); }
.q-donut__seg--2 { stroke: var(--q-success); }
.q-donut__seg--3 { stroke: var(--q-warning); }
.q-donut__seg--4 { stroke: var(--q-faint); }

.q-heat {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px;
  border-radius: var(--q-radius-chip); font-size: var(--q-text-xs);
  font-variant-numeric: tabular-nums; background: var(--q-neutral-tint); color: var(--q-ink-secondary);
}
.q-heat--0 { background: var(--q-surface-muted); color: var(--q-faint); }
.q-heat--1 { background: #E7EFF1; }
.q-heat--2 { background: #CFE0E4; }
.q-heat--3 { background: #A9C9D0; color: var(--q-accent-ink); }
.q-heat--4 { background: #7FB0BA; color: #fff; }

.q-pips { display: inline-flex; gap: 3px; align-items: center; }
.q-pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--q-border-strong); background: var(--q-surface); }
.q-pip--filled { background: var(--q-success); border-color: var(--q-success); }
.q-pip--minimum { box-shadow: 0 0 0 2px var(--q-accent-tint); border-color: var(--q-accent); }

/* ============================================================================================
   Calendar
   ============================================================================================ */
.q-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.q-cal th { padding: var(--q-space-3); font-size: var(--q-text-2xs); text-transform: uppercase; letter-spacing: var(--q-tracking-label); color: var(--q-muted); text-align: left; }
.q-cal td { min-height: 62px; height: 62px; vertical-align: top; border: var(--q-border-width) solid var(--q-border-hairline); padding: var(--q-space-2); }
.q-cal__day { font-family: var(--q-font-mono); font-size: var(--q-text-xs); color: var(--q-muted); }
.q-cal__today .q-cal__day { color: var(--q-accent-ink); font-weight: var(--q-weight-semibold); }
.q-cal__event { display: block; margin-top: 3px; padding: 2px var(--q-space-2); border-radius: var(--q-radius-chip); background: var(--q-accent-tint); color: var(--q-accent-ink); font-size: var(--q-text-xs); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-cal__event--planned { background: var(--q-neutral-tint); color: var(--q-ink-secondary); border: 1px dashed var(--q-border-strong); }
.q-cal--conflict { background: var(--q-warning-tint); outline: 1.5px solid var(--q-warning-border); }
.q-cal__reason { font-size: var(--q-text-xs); color: var(--q-warning-ink); margin-top: 3px; }

/* ============================================================================================
   Toasts, dialogs, drawers, skeletons
   ============================================================================================ */
.q-toasts { position: fixed; right: var(--q-space-9); bottom: var(--q-space-9); z-index: 60; display: flex; flex-direction: column; gap: var(--q-space-3); }
.q-toast {
  display: flex; align-items: center; gap: var(--q-space-4); min-width: 260px; max-width: 420px;
  padding: var(--q-space-5) var(--q-space-7); border-radius: var(--q-radius-control);
  background: var(--q-surface); border: var(--q-border-width) solid var(--q-border);
  box-shadow: var(--q-shadow-dialog); font-size: var(--q-text-md);
  animation: q-rise var(--q-motion) var(--q-ease);
}
.q-toast--success { border-color: var(--q-success-border); }
.q-toast--danger { border-color: var(--q-danger-border); color: var(--q-danger-ink); }
.q-toast--warning { border-color: var(--q-warning-border); color: var(--q-warning-ink); }
@keyframes q-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Flash messages — the page-reload twin of a toast. Every one of them can be closed, and the calm
   ones close themselves, so a redirect never parks a banner on top of the work. */
.q-flash {
  display: flex; align-items: center; gap: var(--q-space-4);
  padding: var(--q-space-5) var(--q-space-7); border-radius: var(--q-radius-control);
  background: var(--q-surface); border: var(--q-border-width) solid var(--q-border);
  font-size: var(--q-text-md); animation: q-rise var(--q-motion) var(--q-ease);
}
.q-flash > svg { flex: none; }
.q-flash__text { flex: 1 1 auto; margin: 0; }
.q-flash__close { flex: none; padding: 0 var(--q-space-3); }
.q-flash--success { border-color: var(--q-success-border); }
.q-flash--warning { border-color: var(--q-warning-border); color: var(--q-warning-ink); }
.q-flash--danger { border-color: var(--q-danger-border); color: var(--q-danger-ink); }
.q-flash--info { border-color: var(--q-accent); }
.q-flash--neutral { border-color: var(--q-border-strong); }
.q-flash--leaving { animation: q-fade var(--q-motion) var(--q-ease) forwards; }
@keyframes q-fade { to { opacity: 0; transform: translateY(-4px); } }

.q-dialog { border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-surface); box-shadow: var(--q-shadow-dialog); padding: var(--q-space-9); max-width: 520px; width: 92vw; }
.q-dialog::backdrop { background: rgba(17, 24, 39, .35); }
.q-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 92vw); background: var(--q-surface); box-shadow: var(--q-shadow-dialog); border-left: var(--q-border-width) solid var(--q-border); z-index: 50; padding: var(--q-space-9); overflow-y: auto; }

.q-skeleton { background: var(--q-neutral-tint); border-radius: var(--q-radius-chip); height: 12px; }
.q-skeleton--row { height: var(--q-row-comfortable); border-radius: 0; margin-bottom: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .q-skeleton { animation: q-pulse 1.4s ease-in-out infinite; }
}
@keyframes q-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.q-empty { text-align: center; padding: var(--q-space-14) var(--q-space-9); color: var(--q-muted); }
.q-empty__title { font-size: var(--q-text-h3); font-weight: var(--q-weight-semibold); color: var(--q-ink); margin: 0 0 var(--q-space-3); }

.q-tabs { display: flex; gap: var(--q-space-2); border-bottom: var(--q-border-width) solid var(--q-border); margin-bottom: var(--q-space-7); overflow-x: auto; }
.q-tab {
  display: inline-flex; align-items: center; gap: var(--q-space-2); height: 38px; padding: 0 var(--q-space-6);
  color: var(--q-ink-secondary); font-size: var(--q-text-md); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.q-tab[aria-selected="true"] { color: var(--q-accent-ink); box-shadow: inset 0 -2px 0 var(--q-accent); font-weight: var(--q-weight-semibold); }
.q-tab__count { font-family: var(--q-font-mono); font-size: 10.5px; color: var(--q-muted); }

.q-kbd { display: inline-flex; align-items: center; padding: 1px 5px; border: var(--q-border-width) solid var(--q-border-strong); border-radius: var(--q-radius-chip); font-family: var(--q-font-mono); font-size: 10.5px; color: var(--q-ink-secondary); }

/* HTMX indicators */
.q-indicator { display: none; }
.htmx-request .q-indicator { display: block; }
.htmx-request.q-indicator { display: block; }

/* ============================================================================================
   Member portal — 48px targets, full width, one decision per block
   ============================================================================================ */
.q-portal { max-width: 560px; margin: 0 auto; padding: var(--q-space-9) var(--q-space-8) 60px; }
.q-portal__block { background: var(--q-surface); border: var(--q-border-width) solid var(--q-border); border-radius: var(--q-radius-surface); padding: var(--q-space-8); margin-bottom: var(--q-space-6); }
.q-portal .q-btn { min-height: 48px; width: 100%; font-size: var(--q-text-lg); }
.q-portal .q-btn + .q-btn { margin-top: var(--q-space-3); }
.q-portal__meta { font-size: var(--q-text-md); color: var(--q-muted); }

/* ============================================================================================
   Responsive
   ============================================================================================ */
@media (max-width: 1024px) {
  .q-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 834px) {
  .q-shell__nav { display: none; }
  .q-page { padding: var(--q-space-8) var(--q-space-8) 60px; }
  .q-grid--2, .q-grid--3, .q-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .q-table thead { display: none; }
  .q-table tbody tr { display: block; height: auto; padding: var(--q-space-5); border-bottom: var(--q-border-width) solid var(--q-border); }
  .q-table tbody td { display: flex; justify-content: space-between; gap: var(--q-space-5); padding: 4px 0; border: 0; }
  .q-table tbody td::before { content: attr(data-label); color: var(--q-muted); font-size: var(--q-text-xs); }
  .q-decision__doc { padding: var(--q-space-7); }
}
@media (max-width: 390px) {
  .q-page { padding: var(--q-space-7) 18px 60px; }
}

@media print {
  .q-shell__nav, .q-topbar, .q-subnav, .q-filters, .q-toasts, .q-btn { display: none !important; }
  .q-page { padding: 0; max-width: none; }
  .q-sheet { box-shadow: none; padding: 0; }
}