/* ===========================================================================
   Onboarding Portal — design system  ("Quiet Ledger")
   Refined, institutional fintech aesthetic. Hand-written, zero dependencies.
   No external fonts (CSP font-src 'self'): a characterful system serif for
   display, a clean system sans for UI, tabular mono for references.
   This single sheet styles every page; the login + guest journey are the
   showcase. All class hooks used by the JS are preserved.
   ========================================================================= */

:root {
  /* Type ------------------------------------------------------------------ */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", "SF Mono",
    Menlo, Consolas, monospace;

  /* Ink + paper ----------------------------------------------------------- */
  --ink-900: #11171b;
  --ink-700: #29333a;
  --ink-500: #54616b;
  --ink-400: #79858f;
  --paper:   #f6f2e9;
  --paper-2: #efe9dc;
  --surface: #fffdf8;
  --surface-2: #faf6ee;

  /* Hairlines ------------------------------------------------------------- */
  --line:        #e4ddcd;
  --line-strong: #d2c9b4;

  /* Accent (deep evergreen = trust / secured / approved) ------------------ */
  --accent:      #1f6b5a;
  --accent-700:  #185647;
  --accent-900:  #0f3a30;
  --accent-100:  #e3efe9;
  --accent-ring: rgba(31, 107, 90, 0.28);

  /* Gold — used sparingly, decorative rule only --------------------------- */
  --gold: #b08a4b;

  /* Status palette (muted, desaturated) ----------------------------------- */
  --ok:        #1f6b5a; --ok-bg:     #e3efe9; --ok-line:     #bcd9cd;
  --info:      #2f5d86; --info-bg:   #e6eef6; --info-line:   #c5d6e7;
  --warn:      #936212; --warn-bg:   #f6ecd4; --warn-line:   #e6d2a3;
  --danger:    #963232; --danger-bg: #f7e3df; --danger-line: #e9c4bd;
  --neutral:   #54616b; --neutral-bg: #ece8de; --neutral-line: #ddd5c5;
  /* "Publié / en ligne" — vert FIXE, ne suit pas l'accent : évite qu'un thème à
     couleur phare rouge (burgundy, terracotta…) fasse passer un formulaire publié
     pour une erreur. Redéclaré uniquement par le thème sombre (midnight). */
  --live:      #1f6b5a; --live-bg:   #e3efe9; --live-line:   #bcd9cd;

  /* Geometry -------------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Soft, warm-tinted elevation ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(31, 30, 22, 0.05);
  --shadow-md: 0 6px 20px -8px rgba(31, 30, 22, 0.18),
               0 2px 6px -2px rgba(31, 30, 22, 0.08);
  --shadow-lg: 0 24px 60px -24px rgba(15, 30, 25, 0.35),
               0 8px 24px -12px rgba(31, 30, 22, 0.18);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  margin: 0;
  color: var(--ink-700);
  background-color: var(--paper);
  /* Atmosphere with pure CSS (no url() — CSP-safe): warm vignette + grain-free
     paper gradient. */
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(31, 107, 90, 0.06), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(176, 138, 75, 0.05), transparent 55%);
  background-attachment: fixed;
  line-height: 1.55;
  font-size: 16px;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-100); color: var(--accent-900); }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
h2 { font-size: 1.32rem; }
h3 { font-size: 1.08rem; }

p { margin: 0 0 0.85rem; }
a { color: var(--accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-400);
  margin: 0 0 0.5rem;
}
.lead { color: var(--ink-500); font-size: 1.02rem; }
small.help, .muted {
  color: var(--ink-400);
  font-size: 0.82rem;
  line-height: 1.4;
}
.mono, code, .ref {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* --- App bar -------------------------------------------------------------- */
header.app-bar {
  background: var(--surface);
  color: var(--ink-700);
  padding: 0.85rem clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(1.1);
}
header.app-bar strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
/* small evergreen diamond mark before any app-bar wordmark */
header.app-bar strong::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 2px;
  background: linear-gradient(145deg, var(--accent), var(--accent-900));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transform: rotate(45deg);
  flex: none;
}
header.app-bar a { color: var(--ink-500); font-size: 0.9rem; }
header.app-bar a:hover { color: var(--accent-700); }
header.app-bar a[aria-current="page"] { color: var(--accent-700); font-weight: 600; }
header.app-bar span { display: inline-flex; align-items: center; gap: 1rem; }
/* super-admin tools render on a second nav line, right-aligned under the primary nav */
header.app-bar .app-bar__navs { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
header.app-bar nav.app-bar__super a { font-size: 0.82rem; color: var(--ink-400); }
header.app-bar nav.app-bar__super a:hover,
header.app-bar nav.app-bar__super a[aria-current="page"] { color: var(--accent-700); }

/* --- Main / containers ---------------------------------------------------- */
main {
  max-width: 880px;
  margin: clamp(1.5rem, 4vw, 3rem) auto;
  padding: 0 clamp(1.25rem, 5vw, 2rem);
}

/* --- Cards / sheets ------------------------------------------------------- */
.card,
.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.card { padding: clamp(1.4rem, 3vw, 2rem); }
.sheet { padding: clamp(1.4rem, 3vw, 2.1rem); }
.sheet + .sheet { margin-top: 1.25rem; }

/* Section headers inside a sheet */
.sheet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.sheet__head h1,
.sheet__head h2 { margin: 0; }

/* --- Form sections -------------------------------------------------------- */
fieldset.section {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 1.1rem 0;
  padding: 1.15rem 1.25rem 1.35rem;
  background: var(--surface-2);
  position: relative;
}
fieldset.section > legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-900);
  padding: 0 0.55rem;
  margin-left: -0.2rem;
}

/* --- Fields --------------------------------------------------------------- */
.field-row {
  margin: 0.95rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.field-row > label {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink-700);
  letter-spacing: 0.005em;
}
label.inline {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.1rem;
  color: var(--ink-700);
}

input, select, textarea {
  width: 100%;
  max-width: 460px;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  line-height: 1.4;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-400); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--surface);
}
input[type="checkbox"], input[type="radio"] {
  width: auto;
  accent-color: var(--accent);
  margin: 0;
  transform: translateY(1px);
}
input[type="file"] {
  padding: 0.4rem;
  background: var(--surface-2);
  border-style: dashed;
  cursor: pointer;
  max-width: 460px;
}
textarea { min-height: 96px; resize: vertical; }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  padding-top: 0.15rem;
}
.radio-group label.inline,
.checkbox-group label.inline {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.8rem;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.radio-group label.inline:hover,
.checkbox-group label.inline:hover { border-color: var(--accent); }

/* Mandatory consent rows (signup). Checkbox top-aligned so the statement may
   wrap freely; the whole row is the click target. */
.consent { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.2rem 0; }
.consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink-700);
  cursor: pointer;
}
.consent input[type="checkbox"] { margin-top: 0.18rem; flex: 0 0 auto; }

/* Admin capability picker — inline list editor only: center the chips in the
   (centered) table cell. The create form keeps the default left alignment. */
.role-edit-row .checkbox-group { justify-content: center; }
.role-edit-row td { text-align: center; }

/* Searchable multi-select (chips + filtered dropdown) -------------------- */
.multiselect {
  max-width: 480px;
  position: relative;
}
.multiselect__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.multiselect__chips:not(:empty) { margin-bottom: 0.4rem; }
.multiselect__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.4rem 0.25rem 0.7rem;
}
.multiselect__chip-remove {
  width: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink-400);
  font-size: 0.85em;
  line-height: 1;
  cursor: pointer;
}
.multiselect__chip-remove:hover { color: var(--danger); }
.multiselect__search { width: 100%; }
.multiselect__list {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 20;
}
.multiselect__list[hidden] { display: none; }
.multiselect__option {
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.multiselect__option.is-active,
.multiselect__option:hover {
  background: var(--accent-100);
  color: var(--accent-900);
}

.address-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  max-width: 480px;
}
.address-group input { max-width: none; }

.file-field { max-width: 480px; }
.file-field input[type="file"] { width: 100%; }
.file-field .file-upload-btn { margin: 0.5rem 0 0; }
.file-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.file-list .file-item { display: flex; align-items: center; gap: 0.4rem; }
.file-list .muted {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-700);
  background: var(--accent-100);
  border: 1px solid var(--ok-line);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.55rem;
  width: fit-content;
  font-size: 0.82rem;
}
.file-remove-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-400);
  border-radius: var(--r-sm);
  line-height: 1;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
}
.file-remove-btn:hover { color: var(--danger); border-color: currentColor; }

/* --- Subform (repeated referenced form) ----------------------------------- */
.subform {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 1rem 1.1rem 1.15rem;
  margin: 1.1rem 0;
}
.subform__head { margin-bottom: 0.6rem; }
.subform__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-900);
}
.subform-instances { display: flex; flex-direction: column; gap: 0.9rem; }
.subform-instance {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 0.7rem 1rem 0.95rem;
  margin: 0;
}
.subform-instance > legend {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--accent-700);
  padding: 0 0.4rem;
}
.subform-section__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-400);
  font-weight: 600;
  /* Top divider so grouped sections read as distinct blocks. The first title in a
     body sits flush (no rule above the very first group). */
  margin: 1.25rem 0 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.subform-section__title:first-child { margin-top: 0.2rem; padding-top: 0; border-top: 0; }
.add-instance { margin-top: 0.9rem; }
.remove-instance { margin-top: 0.6rem; }

/* Count chip on the sub-form head (mirrors .toc__count). */
.subform__count {
  margin-left: 0.55rem; font-size: 0.72rem; font-variant-numeric: tabular-nums;
  color: var(--ink-400); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 0.04rem 0.5rem;
}

/* Instance completion pill. */
.inst-state {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.12rem 0.5rem; border-radius: var(--r-pill); white-space: nowrap; align-self: center;
}
.inst-state--ok   { color: var(--accent-700); background: var(--accent-100); border: 1px solid var(--ok-line); }
.inst-state--todo { color: var(--warn);       background: var(--warn-bg);    border: 1px solid var(--warn-line); }

/* VARIANT A — each instance is a collapsible <details> card. Header shows a
   one-line summary so a long list stays scannable; body holds the fields. */
details.subform-instance { padding: 0; overflow: hidden; }
details.subform-instance > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.85rem; user-select: none; transition: background-color 0.14s var(--ease);
}
details.subform-instance > summary::-webkit-details-marker { display: none; }
details.subform-instance > summary:hover { background: var(--surface-2); }
.inst-caret {
  flex: none; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--ink-400); border-bottom: 2px solid var(--ink-400);
  transform: rotate(-45deg); transition: transform 0.2s var(--ease);
}
details.subform-instance[open] > summary .inst-caret { transform: rotate(45deg); }
.inst-title   { font-weight: 600; font-size: 0.88rem; color: var(--accent-700); white-space: nowrap; }
.inst-summary { color: var(--ink-500); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inst-spacer  { flex: 1 1 auto; min-width: 0.5rem; }
.inst-body    { padding: 0.15rem 0.95rem 0.85rem; border-top: 1px solid var(--line); }
.inst-body .field-row:first-child { margin-top: 0.7rem; }
.inst-body .remove-instance { margin-top: 0.8rem; }

.subform--unresolved {
  border: 1px dashed var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.7rem;
  font-size: 0.86rem;
}
.subform-recap { margin: 0.4rem 0; }
.subform-recap > strong { color: var(--ink-900); }
.subform-recap__instance {
  padding: 0.25rem 0 0.25rem 0.85rem;
  border-left: 2px solid var(--line-strong);
  font-size: 0.9rem;
  color: var(--ink-700);
}

/* --- Person (dedup identity selector) ------------------------------------- */
.person { margin: 0.95rem 0; }
/* Reused common identity fields collapse into a <details> so the section-specific
   fields stay in focus. The summary is a subtle, clearly-clickable affordance. */
.person__identity-wrap {
  margin-top: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.person__identity-wrap > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-500);
  transition: background-color 0.14s var(--ease);
}
.person__identity-wrap > summary::-webkit-details-marker { display: none; }
.person__identity-wrap > summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-400);
  border-bottom: 2px solid var(--ink-400);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease);
}
.person__identity-wrap[open] > summary::before { transform: rotate(45deg); }
.person__identity-wrap > summary:hover { background: var(--surface); }
.person__identity {
  padding: 0.15rem 0.85rem 0.75rem;
  border-top: 1px solid var(--line);
}
.person__identity .field-row:first-child { margin-top: 0.7rem; }

/* --- Buttons -------------------------------------------------------------- */
button {
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  margin-right: 0.5rem;
  line-height: 1.2;
  transition: transform 0.12s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
button:last-child { margin-right: 0; }
button:active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

button.primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-700) 100%);
  color: #fff;
  border-color: var(--accent-700);
  box-shadow: var(--shadow-sm);
}
button.primary:hover {
  background: linear-gradient(180deg, var(--accent-700) 0%, var(--accent-900) 100%);
  box-shadow: var(--shadow-md);
}
button.secondary {
  background: var(--surface);
  color: var(--ink-700);
  border-color: var(--line-strong);
}
button.secondary:hover { border-color: var(--ink-400); background: var(--surface-2); }

/* --- Badges / status pills ----------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--neutral-line);
  background: var(--neutral-bg);
  color: var(--ink-500);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--draft         { background: var(--warn-bg);    border-color: var(--warn-line);    color: var(--warn); }
.badge--published     { background: var(--live-bg);    border-color: var(--live-line);    color: var(--live); }
.badge--archived      { background: var(--neutral-bg); border-color: var(--neutral-line); color: var(--ink-500); }
.badge--submitted,
.badge--in_review,
.badge--corrected     { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.badge--needs_correction { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.badge--approved,
.badge--exported      { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.badge--rejected,
.badge--cancelled     { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }

/* --- Tables --------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-400);
  font-weight: 600;
  background: var(--surface-2);
}
th, td {
  text-align: left;
  padding: 0.72rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 0.12s var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tr.stale td { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); }
tr.stale:hover td { background: #f3e6c6; }

/* --- Alerts / errors / code ----------------------------------------------- */
.errors {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.9rem;
  margin: 0.9rem 0;
  color: #5f2222;
  font-size: 0.92rem;
}
.errors:empty { display: none; }
.errors p { margin: 0; }
.errors p + pre { margin-top: 0.5rem; }
/* scrollIntoView() in showErrors() aligns the banner to the very top, where the
   sticky app-bar would clip its first line. Reserve the app-bar height + a line
   so the title ("Step is incomplete") lands fully visible. */
#errors { scroll-margin-top: 4.5rem; }

/* Positive counterpart to .errors (e.g. "account created, please sign in"). */
.notice {
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  border-left: 3px solid var(--ok);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.9rem;
  margin: 0.9rem 0;
  color: var(--accent-900);
  font-size: 0.92rem;
}
.notice:empty { display: none; }
.notice p { margin: 0; }

pre {
  background: var(--ink-900);
  color: #e7efe9;
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* --- Toolbar / action bar ------------------------------------------------- */
.toolbar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* --- Organization selector (super_admin targets an org; hidden for org-scoped
   admins). Right-aligned; shared by the admin and manager pages. ------------- */
.orgbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.6rem;
}
.orgbar label.inline {
  font-size: 0.82rem;
  color: var(--ink-500);
  gap: 0.45rem;
}
.orgbar select { width: auto; max-width: none; }

/* Filters living inside the queue table's "Actions" header cell: undo the
   uppercase thead-th typography so the controls read normally, and stack them. */
.table-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.5rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-900);
}
.table-actions select { width: auto; max-width: none; }
/* The two filter checkboxes share one row; the select and button stack around it. */
.table-actions__checks { display: flex; gap: 0.7rem; }
/* Shrink the actions column to its content so the data columns get the width. */
.col-actions { width: 1%; white-space: nowrap; }

/* =========================================================================
   LOGIN — split-screen showcase
   ========================================================================= */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* Brand panel (deep evergreen, layered CSS atmosphere) */
.auth__brand {
  position: relative;
  overflow: hidden;
  color: #eef3ef;
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #0e1f19;
  background-image:
    radial-gradient(95% 60% at 18% 12%, rgba(44, 122, 102, 0.45), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(176, 138, 75, 0.16), transparent 55%),
    linear-gradient(160deg, #163027 0%, #0f211a 55%, #0a1611 100%);
}
/* fine diagonal hairline texture, CSS-only */
.auth__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.025) 0,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 11px
  );
  pointer-events: none;
}
.auth__brand > * { position: relative; z-index: 1; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Reusable evergreen diamond mark (brand glyph, footer accents). */
.diamond {
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(145deg, var(--accent), var(--accent-900));
  flex: none;
}
/* Larger, brighter variant for the login brand wordmark (sits on a dark panel). */
.brand-mark .diamond {
  width: 1.05rem; height: 1.05rem;
  border-radius: 3px;
  background: linear-gradient(145deg, #4fb59a, #1f6b5a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px -6px rgba(79, 181, 154, 0.7);
}

.auth__pitch { max-width: 26ch; }
.auth__pitch .eyebrow { color: rgba(212, 196, 160, 0.85); }
.auth__pitch h1 {
  color: #f4f7f3;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}
.auth__pitch h1 .rule {
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.auth__pitch p { color: rgba(228, 236, 230, 0.78); font-size: 1.02rem; }

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: rgba(223, 232, 226, 0.82);
}
.trust-list li { display: flex; align-items: center; gap: 0.6rem; }
.trust-list li::before {
  content: "";
  width: 1.1rem; height: 1.1rem;
  flex: none;
  border-radius: 50%;
  background:
    linear-gradient(transparent, transparent),
    radial-gradient(circle, rgba(79, 181, 154, 0.25) 60%, transparent 61%);
  box-shadow: inset 0 0 0 1px rgba(79, 181, 154, 0.5);
  /* tiny check drawn with a clipped corner */
  position: relative;
}
.trust-list li::after {
  content: "";
  position: absolute;
  margin-left: 0.36rem;
  width: 0.28rem; height: 0.52rem;
  border: solid #6fd0b6;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* Sign-in panel */
.auth__panel {
  background: var(--paper);
  background-image:
    radial-gradient(90% 60% at 100% 0%, rgba(31, 107, 90, 0.05), transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 5vw, 3.5rem);
}
.auth__card {
  width: 100%;
  max-width: 400px;
}
.auth__card .card { padding: clamp(1.6rem, 3vw, 2.25rem); }
.auth__card h1 { font-size: 1.65rem; margin-bottom: 0.3rem; }
.auth__card .lead { margin-bottom: 1.5rem; }
.auth__card .field-row { margin: 0 0 1.1rem; }
.auth__card input { max-width: none; }
.auth__card button.primary { width: 100%; padding: 0.72rem; margin-top: 0.4rem; }
.auth__foot {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-400);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* =========================================================================
   GUEST JOURNEY — application shell
   ========================================================================= */
.journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.journey-head .eyebrow { margin-bottom: 0.35rem; }
#status {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink-900);
}
#status .ref { color: var(--accent-700); }

/* Language toggle styled as a segmented control */
label.inline:has(#langSelect) {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.18rem 0.18rem 0.18rem 0.7rem;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#langSelect {
  width: auto;
  max-width: none;
  border: 0;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 0.25rem 1.7rem 0.25rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-700);
}
#langSelect:focus { box-shadow: 0 0 0 3px var(--accent-ring); }

/* The step body + action bar */
#step { animation: rise 0.45s var(--ease) both; }
#actions.toolbar {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}

/* Summary recap rows (rendered by client-application.js as fieldset > rows).
   Subform instance fieldsets are also `fieldset:not(.section)` inside #step, so
   they (and the subform recap block) are excluded from these recap rules. */
#step fieldset:not(.section):not(.subform-instance) {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  margin: 1rem 0;
  padding: 1rem 1.2rem;
}
#step fieldset:not(.section):not(.subform-instance) > legend {
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 0.5rem;
  color: var(--ink-900);
}
#step fieldset:not(.section):not(.subform-instance) > div:not(.subform-recap) {
  display: flex;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.92rem;
}
#step fieldset:not(.section):not(.subform-instance) > div:not(.subform-recap):last-child { border-bottom: 0; }

/* =========================================================================
   SUBMITTED — confirmation
   ========================================================================= */
.confirm { text-align: center; max-width: 520px; margin-inline: auto; }
.confirm .seal {
  width: 76px; height: 76px;
  margin: 0.5rem auto 1.4rem;
  border-radius: 50%;
  background: var(--accent-100);
  border: 1px solid var(--ok-line);
  display: grid;
  place-items: center;
  position: relative;
}
.confirm .seal::after {
  content: "";
  width: 22px; height: 40px;
  border: solid var(--accent);
  border-width: 0 3px 3px 0;
  transform: translateY(-4px) rotate(45deg);
  transform-origin: center;
  animation: check 0.5s 0.15s var(--ease) both;
}
.confirm h1 { font-size: 1.7rem; }
.confirm .ref {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.55rem;
  color: var(--accent-700);
  font-size: 1.02rem;
}
.confirm .actions { margin-top: 1.6rem; }

/* =========================================================================
   ORGANIZATION — spacing between the two stacked setting blocks (own-org view)
   ========================================================================= */
#mineCard h2 { margin-top: 1.75rem; }
#mineCard .toolbar { margin-top: 1.25rem; }

/* =========================================================================
   Motion — staggered page-load reveal
   ========================================================================= */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes check {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

[data-rise] { animation: rise 0.6s var(--ease) both; }
[data-rise="1"] { animation-delay: 0.05s; }
[data-rise="2"] { animation-delay: 0.15s; }
[data-rise="3"] { animation-delay: 0.25s; }
[data-rise="4"] { animation-delay: 0.35s; }
[data-rise="5"] { animation-delay: 0.45s; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand {
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }
  .auth__brand .trust-list { display: none; }
  .auth__pitch h1 { font-size: clamp(1.7rem, 1.2rem + 4vw, 2.2rem); }
  .address-group { grid-template-columns: 1fr; }
  .journey-head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   Provenance field states — FR-19..22
   Applied as modifier classes on .field-row elements rendered by form-renderer.js.
   Three states are visually distinct via different border-left colour + background.
   ========================================================================= */

/* --- Locked (soft-lock from high-confidence extraction) ------------------- */
/* Evergreen left-bar signals "trusted source"; control is readonly until
   the guest clicks "Modifier". Label row is flex so the lock glyph and the
   Modifier button sit inline with the label text. */
.field--locked {
  background: var(--accent-100);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem 0.65rem;
  margin-left: -0.75rem;  /* visually align left edge with normal field rows */
}

/* Label row: flex so glyph + text + Modifier button are inline */
.field--locked > label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Lock glyph injected by form-renderer.js before the label text (unicode lock) */
.field--locked > label::before {
  content: "\1F512";  /* U+1F512 LOCK — no CDN font required */
  font-size: 0.75rem;
  line-height: 1;
  flex: none;
}

/* Readonly control styling inside a locked row */
.field--locked input[readonly],
.field--locked input[disabled],
.field--locked select[disabled],
.field--locked textarea[readonly],
.field--locked textarea[disabled] {
  background: var(--surface-2);
  color: var(--ink-500);
  border-color: var(--ok-line);
  cursor: default;
}

/* "Modifier" override button — small secondary, inline with the label */
.field--locked .modifier-btn {
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-500);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1.4;
  margin-left: auto;  /* push to the right end of the label row */
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
  white-space: nowrap;
}
.field--locked .modifier-btn:hover {
  border-color: var(--ink-400);
  background: var(--surface-2);
}
.field--locked .modifier-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* --- Conflict (two high-confidence documents disagree) --------------------- */
/* Amber left-bar signals "needs attention"; the renderer shows candidate values
   as selectable choices below the control (FR-21). */
.field--conflict {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem 0.65rem;
  margin-left: -0.75rem;
}

.field--conflict > label {
  color: var(--warn);
}

/* Hint text listing conflict candidates, rendered by form-renderer.js */
.field--conflict .conflict-hint {
  color: var(--warn);
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 0.3rem;
}

/* --- Suggestion (low-confidence pre-fill, editable) ----------------------- */
/* Neutral left-bar signals "AI suggested, please verify"; lighter than locked,
   no lock glyph, control remains fully editable (FR-22). */
.field--suggestion {
  background: var(--surface-2);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem 0.65rem;
  margin-left: -0.75rem;
}

/* Subtle help text informing the guest this value was pre-filled */
.field--suggestion .suggestion-hint {
  color: var(--ink-400);
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 0.25rem;
}

/* --- Reviewer-only fields (reviewer_only) --------------------------------- */
/* Hidden from the client, filled by managers in the review panel. Reuses the
   provenance field-state grammar with a distinct indigo tint + left-bar so the
   internal fields stand out from the client states. */
.field--reviewer {
  background: var(--review-bg, rgba(99, 102, 241, 0.08));
  border-left: 3px solid var(--review-line, #6366f1);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem 0.65rem;
}

/* =========================================================================
   Manager detail layout — content column + persistent lateral review panel
   ========================================================================= */
/* This page carries three columns (preview | content | review); the 1180px
   designer cap squeezes the centre to ~1/3, so widen it to near full screen.
   Higher specificity than `body.designer-page main` so it wins regardless of
   stylesheet order. */
body.designer-page.detail-page main { max-width: min(1680px, 95vw); }

.detail-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.detail-main { flex: 1 1 auto; min-width: 0; }

/* Keep the review action toolbar to the RIGHT of the title at all widths instead of
   dropping below it when the button count changes per status ("Start review" shows in
   submitted but not in_review). The head never wraps; the toolbar can shrink and wraps
   its OWN buttons (it is also .toolbar → flex-wrap:wrap), staying right-aligned, so the
   title keeps the left. Narrow viewports still stack via the < 820px media query. */
.detail-page .sheet-doc__head { flex-wrap: nowrap; }
.detail-page .sheet-doc__tools { flex: 0 1 auto; justify-content: flex-end; }

.review-panel {
  flex: 0 0 340px;
  position: sticky;
  /* Stick below the sticky app-bar (~3.75rem) like .toc, not under it. */
  top: 4.75rem;
  max-height: calc(100vh - 5.75rem);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--review-line, #6366f1);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow-md);
}
.review-panel__title { margin: 0 0 0.15rem; }
.review-panel__hint { font-size: 0.8rem; margin: 0 0 0.75rem; }
.review-panel .field-row { margin: 0.6rem 0; }
/* renderForm wraps fields in a fieldset.section — flatten it inside the panel */
.review-panel .section { background: transparent; border: 0; padding: 0; margin: 0; }
.review-panel .section > legend { padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--ink-500); }
.review-prov { display: block; color: var(--ink-400); margin-top: 0.2rem; }

/* Left in-page document preview (FIX8): sits to the LEFT of the content column so
   the manager can compare the uploaded document against the captured fields. */
.preview-panel {
  flex: 0 0 360px;
  position: sticky;
  /* Stick below the sticky app-bar (~3.75rem) like .toc, not under it. */
  top: 4.75rem;
  max-height: calc(100vh - 5.75rem);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow-md);
}
.preview-panel__title { margin: 0 0 0.6rem; }
.preview-panel__name { font-size: 0.82rem; color: var(--ink-500); margin: 0 0 0.5rem; word-break: break-all; }
.preview-panel__frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--r-sm); }
.preview-panel__img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }

/* Inline assign control (FIX7): a select + confirm button on the action toolbar. */
/* Full-width so it wraps onto its own second row of the action toolbar. */
.assign-control { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex: 0 0 100%; margin-top: 0.15rem; }
.assign-control select { width: auto; max-width: 14rem; }

/* Stack the side panels under the content on narrow viewports */
@media (max-width: 900px) {
  .detail-layout { flex-direction: column; }
  .review-panel,
  .preview-panel { position: static; flex-basis: auto; width: 100%; max-height: none; }
  .preview-panel__frame { height: 60vh; }
}

/* ===========================================================================
   Legal / informational documents (CGU, mentions légales, confidentialité).
   Long-form reading: constrained measure, calm vertical rhythm, the display
   serif for headings to match the brand. Pure tokens, no new colours.
   ========================================================================= */
.legal {
  max-width: 72ch;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.legal h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--ink-900);
  margin: 0 0 0.4rem;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-900);
  margin: 2.2rem 0 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.legal h3 {
  font-size: 1.02rem;
  color: var(--ink-900);
  margin: 1.3rem 0 0.3rem;
}
.legal p,
.legal li { color: var(--ink-700); }
.legal .lead {
  font-size: 1.05rem;
  color: var(--ink-500);
  margin: 0 0 1.6rem;
}
.legal ul { padding-left: 1.2rem; }
.legal li { margin: 0.25rem 0; }
.legal a { color: var(--accent-700); }
.legal address {
  font-style: normal;
  line-height: 1.5;
  margin: 0.4rem 0 0;
}
/* Placeholders for legal facts the operator must supply before publishing. */
.legal .todo {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn);
  border-radius: var(--r-sm);
  padding: 0.05rem 0.4rem;
  font-size: 0.9em;
  white-space: nowrap;
}
.legal .meta {
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-400);
}
.legal nav.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}