/*
 * CRS / FATCA Reporting – Fund XP visual identity
 *
 * Brand (Fund XP graphic charter):
 *   Fund green  #005c4d   primary actions, active navigation, "filed"
 *   Teal        #71b0aa   accents, focus, selection (never as text on white: low contrast)
 *   Ink         #13100d   text, dark brand panel
 * Type: the charter uses Acumin Variable Concept Extra Condensed (Adobe, not
 * self-hostable). Barlow Condensed carries the same condensed geometry for
 * headings, Barlow for the interface; IBM Plex Mono only for identifiers
 * that must be read character by character (TIN, IBAN, DocRefId).
 *
 * Signature element: the parallel diagonals of the XP mark, echoed in the
 * slanted cuts of the status tags and of the filing bar. Everything else is
 * quiet: white surfaces, fine lines, generous spacing, tabular figures.
 */

/* ---------------------------------------------------------------- Fonts */
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* --------------------------------------------------------------- Tokens */
:root {
  --green: #005c4d;
  --green-dark: #00463a;
  --green-wash: #e6f0ee;
  --teal: #71b0aa;
  --teal-wash: #eef6f5;
  --ink: #13100d;
  --ink-2: #2b2b29;
  --slate: #5f6b69;          /* secondary text (AA on white and on --mist) */
  --mist: #f4f7f6;           /* application background */
  --paper: #ffffff;
  --line: #dde5e3;
  --line-soft: #ebf0ef;

  --st-new: #3b5b86;
  --st-filed: var(--green);
  --st-changed: #995900;
  --st-delete: #b3261e;
  --error: #b3261e;
  --warning: #8a5a00;

  --font-ui: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-head: 'Barlow Condensed', 'Arial Narrow', 'Barlow', sans-serif;
  --font-id: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: 2.125rem;

  --r-s: 4px;
  --r-m: 8px;
  --topbar: 3.75rem;
  --sidebar: 17.5rem;
  --shadow-float: 0 12px 32px rgb(19 16 13 / 0.14);
}

/* ----------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--mist);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: 0.005em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
p { margin: 0 0 0.75em; max-width: 72ch; }
a { color: var(--green); text-underline-offset: 2px; }
.mono, code { font-family: var(--font-id); font-size: 0.9em; letter-spacing: -0.01em; }
.muted { color: var(--slate); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--teal-wash); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; box-shadow: 0 0 0 4px rgb(113 176 170 / 0.35); }

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

/* ---------------------------------------------------------------- Shell */
.app { display: grid; grid-template-rows: auto 1fr; min-height: 100%; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.5rem;
  height: var(--topbar);
  padding: 0 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { display: flex; align-items: center; gap: 0.7rem; margin-right: 1rem; white-space: nowrap; text-decoration: none; color: var(--ink); }
.topbar .brand img { height: 2rem; width: auto; display: block; }
.topbar .brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em; }
.topbar .brand-name span { color: var(--slate); font-weight: 500; }
.topbar .file { color: var(--slate); font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding-left: 1rem; border-left: 1px solid var(--line); }
.topbar .unsaved { color: var(--st-changed); }
.topbar .unsaved::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; margin-right: 0.4rem; vertical-align: middle; }
.topbar .spacer { flex: 1; }
.topbar .sep { width: 1px; align-self: stretch; margin: 0.9rem 0.25rem; background: var(--line); }
.topbar .btn { border-color: transparent; background: transparent; font-weight: 500; }
.topbar .btn:hover { background: var(--mist); border-color: transparent; }
.topbar .btn-primary { background: var(--green); color: #fff; }
.topbar .btn-primary:hover { background: var(--green-dark); }

.workspace { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 0; }
.workspace-single { grid-template-columns: 1fr; }
.sidebar {
  position: sticky; top: var(--topbar); align-self: start;
  height: calc(100vh - var(--topbar));
  border-right: 1px solid var(--line);
  background: var(--paper);
  padding: 1.25rem 0.75rem 2rem;
  overflow-y: auto;
}
.main { padding: 2rem 2.5rem 5rem; min-width: 0; }
.main > * { max-width: 84rem; }
.main > .page-wide { max-width: 118rem; }

@media (max-width: 60rem) {
  .topbar { height: auto; flex-wrap: wrap; padding: 0.5rem 1rem; }
  .topbar .file { display: none; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .main { padding: 1.25rem 1rem 4rem; }
}

/* ----------------------------------------------------------------- Tree */
.tree { list-style: none; margin: 0; padding: 0; }
.tree .tree { padding-left: 0.75rem; margin-left: 0.7rem; border-left: 1px solid var(--line-soft); }
.tree-item {
  position: relative;
  display: flex; align-items: baseline; gap: 0.45rem;
  width: 100%; padding: 0.4rem 0.6rem;
  border: 0; border-radius: var(--r-s);
  background: none; color: var(--ink-2);
  font: inherit; text-align: left; cursor: pointer;
}
.tree-item:hover { background: var(--mist); }
.tree-item[aria-current='page'] { background: var(--green-wash); color: var(--green-dark); font-weight: 600; }
.tree-item[aria-current='page']::before { content: ''; position: absolute; left: -0.75rem; top: 0.35rem; bottom: 0.35rem; width: 3px; background: var(--teal); border-radius: 2px; }
.tree > li > .tree-item[aria-current='page']::before { left: -0.6rem; }
.tree-item .kind { font-size: 0.72rem; font-weight: 600; color: var(--slate); background: var(--mist); border-radius: 3px; padding: 0 0.3rem; }
.tree-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0.6rem 0.75rem; }
.tree-head h2 { font-size: var(--step-1); margin: 0; }
.tree-empty { padding: 0.5rem 0.6rem; color: var(--slate); font-size: var(--step--1); }

/* ------------------------------------------------------------ Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.35rem; padding: 0.4rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { border-color: var(--slate); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-danger { color: var(--st-delete); }
.btn-danger:hover { border-color: var(--st-delete); background: #fdf3f2; }
.btn-small { min-height: 1.9rem; padding: 0.15rem 0.65rem; font-size: var(--step--1); }
.btn-link { border: 0; background: none; padding: 0; color: var(--green); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn-icon { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--slate); padding: 0.1rem 0.4rem; border-radius: var(--r-s); }
.btn-icon:hover { background: var(--mist); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ----------------------------------------------------------- Page head */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; margin-bottom: 0.6rem; font-size: var(--step--1); color: var(--slate); }
.crumbs button { border: 0; background: none; padding: 0; font: inherit; color: var(--slate); cursor: pointer; }
.crumbs button:hover { color: var(--green); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--line); }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--slate); margin: 0.35rem 0 0; }

/* -------------------------------------------------------------- Panels */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; }
.panel > h2, .panel > h3 { margin-bottom: 1rem; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.panel-head h2, .panel-head h3 { margin: 0; }
.panel-head input[type='search'] { max-width: 24rem; }
.section-title { font-size: var(--step-1); margin: 1.75rem 0 0.9rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line-soft); }
.section-title:first-child { margin-top: 0; }

/* --------------------------------------------------------------- Forms */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .field > legend { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.field .req { color: var(--error); }
.field .hint { font-size: var(--step--1); color: var(--slate); margin: 0; }
.field-check { flex-direction: row; align-items: center; gap: 0.55rem; }
.field-check label { font-size: var(--step-0); font-weight: 400; color: var(--ink); }
input[type='text'], input[type='number'], input[type='date'], input[type='email'], input[type='search'], input[type='password'], select, textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); color: var(--ink);
  font: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
textarea { min-height: 5rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: #93a09d; }
input:hover, select:hover, textarea:hover { border-color: #b9c6c3; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgb(113 176 170 / 0.3); }
input:disabled, select:disabled, textarea:disabled { background: var(--mist); color: var(--ink-2); border-color: var(--line-soft); }
input[type='checkbox'] { width: 1.1rem; height: 1.1rem; accent-color: var(--green); flex: none; }
input[type='search'] { padding-left: 2.1rem; background: var(--paper) no-repeat 0.7rem center / 0.95rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b69' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.inline-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.inline-row .field { flex: 1 1 10rem; }

.segmented { display: inline-flex; padding: 3px; gap: 3px; background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-m); }
.segmented button { border: 0; background: transparent; padding: 0.35rem 1rem; font: inherit; font-weight: 500; border-radius: 5px; cursor: pointer; color: var(--slate); }
.segmented button[aria-pressed='true'] { background: var(--paper); color: var(--green-dark); font-weight: 600; box-shadow: 0 1px 2px rgb(19 16 13 / 0.12); }

fieldset.checks { border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 0.75rem 1rem; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.35rem 1rem; }
fieldset.checks legend { padding: 0 0.35rem; }
details > summary { cursor: pointer; margin: 1rem 0 0.75rem; color: var(--green); font-weight: 500; }

/* ------------------------------------------------------------ Sub-records */
.subrecord { border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.1rem 1.25rem; margin-bottom: 1rem; background: var(--paper); box-shadow: inset 3px 0 0 var(--teal); }
.subrecord-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 1rem; }
.subrecord-head h3, .subrecord-head h4 { margin: 0; font-size: var(--step-1); }
.repeat-row { display: grid; grid-template-columns: 1fr 13rem auto; gap: 0.6rem; align-items: end; margin-bottom: 0.6rem; }
.repeat-row.payments { grid-template-columns: 1.4fr 1fr 10rem auto; }
@media (max-width: 40rem) { .repeat-row, .repeat-row.payments { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { position: sticky; top: 0; background: var(--paper); color: var(--slate); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--teal-wash); }
td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.is-deleted td { color: var(--slate); text-decoration: line-through; }
tr.is-deleted td:first-child, tr.is-deleted td:last-child { text-decoration: none; }

/* ------------------------------------------------------ Filing status */
/* Status tag: slanted left edge, the diagonal of the XP mark. */
.status {
  display: inline-block;
  padding: 0.1rem 0.6rem 0.1rem 0.85rem;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap; line-height: 1.5;
  color: #fff;
  clip-path: polygon(0.45rem 0, 100% 0, 100% 100%, 0 100%);
}
.status-new { background: var(--st-new); }
.status-filed { background: var(--st-filed); }
.status-changed { background: var(--st-changed); }
.status-toDelete { background: var(--st-delete); }

/* Filing strip at the top of a report. */
.filing-strip { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2.5rem; align-items: center; border-top: 3px solid var(--green); }
.filing-bar { display: flex; gap: 3px; height: 0.55rem; margin: 0.75rem 0 0.9rem; }
.filing-bar span { display: block; height: 100%; min-width: 0.6rem; clip-path: polygon(0.3rem 0, 100% 0, calc(100% - 0.3rem) 100%, 0 100%); }
.filing-bar span:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 0.3rem) 100%, 0 100%); }
.filing-bar span:last-child { clip-path: polygon(0.3rem 0, 100% 0, 100% 100%, 0 100%); }
.filing-bar span:only-child { clip-path: none; }
.filing-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: var(--step--1); }
.filing-legend .count { font-weight: 600; margin-left: 0.2rem; }
.next-export { font-size: var(--step-1); margin: 0; line-height: 1.35; }
.next-export strong { font-weight: 600; color: var(--ink); }
@media (max-width: 60rem) { .filing-strip { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Tabs */
.tabs { display: flex; gap: 1.75rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 0.7rem 0; font: inherit; font-weight: 500; color: var(--slate); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected='true'] { color: var(--green-dark); font-weight: 600; border-bottom-color: var(--green); }
.tabs .badge { margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--mist); font-size: 0.75rem; color: var(--slate); }

/* --------------------------------------------------------------- Lists */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem; }
.entity {
  display: flex; flex-direction: column; gap: 0.25rem; text-align: left;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--paper); font: inherit; color: inherit; cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.entity:hover { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.entity strong { font-family: var(--font-head); font-weight: 600; font-size: var(--step-1); }
.entity .meta { font-size: var(--step--1); color: var(--slate); }
.empty { padding: 2rem 1.5rem; border: 1px dashed #c6d3d0; border-radius: var(--r-m); text-align: center; color: var(--slate); background: var(--paper); }
.empty p { margin: 0 auto 0.9rem; }
.empty .actions { justify-content: center; }

/* -------------------------------------------------------------- Issues */
.issues { list-style: none; margin: 0; padding: 0; }
.issues li { padding: 0.55rem 0.85rem; border-left: 3px solid; margin-bottom: 0.4rem; background: var(--paper); font-size: var(--step--1); border-radius: 0 var(--r-s) var(--r-s) 0; }
.issues .error { border-color: var(--error); background: #fdf5f4; }
.issues .warning { border-color: var(--warning); background: #fdf9f0; }
.issues .where { display: block; font-weight: 600; }
.issue-count-error { color: var(--error); font-weight: 600; }
.issue-count-warning { color: var(--warning); font-weight: 600; }

/* --------------------------------------------------------- Attachments */
.files { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.files li { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
.files .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dropzone { border: 1px dashed #c6d3d0; border-radius: var(--r-m); padding: 1.25rem; text-align: center; color: var(--slate); background: var(--mist); }
.dropzone.over { border-color: var(--green); background: var(--green-wash); }

/* -------------------------------------------------------------- Dialog */
.dialog { border: 0; border-radius: var(--r-m); padding: 0; width: min(38rem, 94vw); max-height: 90vh; color: var(--ink); box-shadow: var(--shadow-float); }
.dialog-wide { width: min(66rem, 96vw); }
.dialog::backdrop { background: rgb(19 16 13 / 0.5); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font-size: var(--step-2); }
.dialog-body { padding: 1.5rem; overflow-y: auto; max-height: calc(90vh - 9rem); }
.dialog-body dl { margin: 0 0 1.25rem; }
.dialog-body dt { font-size: var(--step--1); }
.dialog-body dd { margin: 0.1rem 0 0; font-weight: 500; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); background: var(--mist); border-radius: 0 0 var(--r-m) var(--r-m); }
pre.xml-preview { max-height: 50vh; overflow: auto; background: var(--mist); border: 1px solid var(--line-soft); padding: 1rem; font-family: var(--font-id); font-size: 0.78rem; border-radius: var(--r-s); white-space: pre; }

/* -------------------------------------------------------------- Toasts */
.toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 50; }
.toast { background: var(--ink); color: #fff; padding: 0.8rem 1.1rem; border-radius: var(--r-s); max-width: 28rem; box-shadow: var(--shadow-float); border-left: 4px solid var(--teal); }
.toast-success { border-left-color: #7fd3b8; }
.toast-error { border-left-color: #ff8a80; }

/* ------------------------------------------------ Home and sign-in pages */
/* Split layout: brand panel (colour logo on dark, as allowed by the charter) + content. */
.auth { display: grid; grid-template-columns: minmax(20rem, 5fr) 7fr; min-height: calc(100vh - var(--topbar)); }
.auth-full { min-height: 100vh; }
.auth-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 3rem 3rem 2.5rem;
  background: var(--ink); color: #fff;
}
.auth-brand img { width: 7.5rem; height: auto; display: block; }
.auth-brand h2 { font-size: 2.6rem; line-height: 1.05; margin: 0 0 0.75rem; color: #fff; }
.auth-brand p { color: #c9d6d3; max-width: 30ch; margin: 0; }
.auth-brand .company { font-size: var(--step--1); color: #9fb4b0; }
/* The XP diagonals, large and quiet, bleeding off the panel. */
.auth-brand::after {
  content: ''; position: absolute; right: -6rem; bottom: -4rem; width: 22rem; height: 30rem;
  background: linear-gradient(115deg, transparent 0 34%, rgb(113 176 170 / 0.16) 34% 47%, transparent 47% 55%, rgb(0 92 77 / 0.35) 55% 70%, transparent 70%);
  pointer-events: none;
}
.auth-main { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--paper); }
.auth-main > .home { margin: 0; padding: 0; width: min(28rem, 100%); }
.auth-main .panel { border: 0; padding: 0; background: none; }
@media (max-width: 52rem) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 2rem 1.5rem; }
  .auth-brand h2 { font-size: 2rem; }
  .auth-brand::after { display: none; }
}

.home { max-width: 44rem; margin: 10vh auto 0; padding: 0 1.5rem 3rem; }
.home h1 { font-size: 2.4rem; margin-bottom: 0.5rem; }
.home .lede { font-size: var(--step-1); color: var(--slate); margin-bottom: 2rem; }
.home .actions { margin: 1.5rem 0 2.5rem; }
.home .actions .btn { min-height: 2.75rem; padding: 0.5rem 1.4rem; }
.home form .actions { margin: 1.25rem 0 0; }
.home form .btn-primary { width: 100%; min-height: 2.75rem; }
.home .privacy { border-top: 1px solid var(--line); padding-top: 1.25rem; font-size: var(--step--1); color: var(--slate); }
.home .privacy strong { color: var(--ink); }
.home form .field + .field { margin-top: 1rem; }

.qr { width: 12rem; max-width: 100%; margin: 0 0 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); }
.qr svg { width: 100%; height: auto; display: block; }

/* -------------------------------------------------------- Import wizard */
.sheet-config { border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.sheet-config-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.sheet-config-head h3 { margin: 0; }
.sheet-config-head select { width: auto; min-width: 16rem; }
.mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem 1rem; }
.summary-list { margin: 0 0 1rem; padding-left: 1.2rem; }
del { color: var(--st-delete); }
ins { color: var(--green); text-decoration: none; font-weight: 500; }

/* ------------------------------------------------------------- Polish */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.2rem;
  background: var(--paper) no-repeat right 0.75rem center / 0.7rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235f6b69' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
}
/* Checkboxes placed in a form grid line up with the inputs of the same row. */
.grid > .field-check { align-self: end; min-height: 2.5rem; }
th.num { text-align: right; }
/* Row actions stay discreet until needed. */
td .btn-small { border-color: transparent; background: transparent; }
tr:hover td .btn-small, td .btn-small:focus-visible { border-color: var(--line); background: var(--paper); }
td .btn-danger.btn-small:hover { border-color: var(--st-delete); background: #fdf3f2; }
.capitalize { text-transform: capitalize; }
.slices { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.slices p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
dl.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem 1.25rem; margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--mist); border-radius: var(--r-s); }
dl.facts dt { font-size: var(--step--1); font-weight: 600; color: var(--slate); }
dl.facts dd { margin: 0.15rem 0 0; }
.brand-preview { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--mist); border-radius: var(--r-s); }
.brand-logo-preview { height: 3rem; width: auto; max-width: 10rem; object-fit: contain; }
.brand-preview strong { display: block; font-family: var(--font-head); font-size: var(--step-1); margin-bottom: 0.4rem; }
.brand-strip { display: flex; gap: 3px; }
.brand-strip span { display: block; width: 4rem; height: 0.4rem; clip-path: polygon(0.25rem 0, 100% 0, calc(100% - 0.25rem) 100%, 0 100%); }
.colour-input { display: flex; gap: 0.5rem; align-items: center; }
.colour-input input[type='color'] { width: 2.75rem; height: 2.5rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); cursor: pointer; flex: none; }
.select-inline { width: auto; min-width: 12rem; }
.overview-table { margin-top: 1rem; }
.acd-feedback { border-top: 3px solid var(--st-delete); }
.auth-links { margin-top: 1rem; font-size: var(--step--1); }
.topbar-search { margin: 0 0.5rem; }
.topbar-search input[type='search'] { width: 15rem; min-height: 2.2rem; }
@media (max-width: 80rem) { .topbar-search input[type='search'] { width: 10rem; } }
.profile-bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-end; padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--mist); border-radius: var(--r-s); }
.profile-bar .field { flex: 1 1 18rem; }
.header-row { width: 5rem !important; min-height: 2.1rem; display: inline-block; }
.mapping .field input { margin-top: 0.3rem; }
.drafts { margin-top: 1.5rem; border-top: 3px solid var(--st-changed); }
.draft-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line-soft); }
.xsd-ok { display: flex; align-items: center; gap: 0.5rem; }
/* Top-bar drop-down menus */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ''; width: 0.4rem; height: 0.4rem; margin-left: 0.2rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.menu-round > summary { width: 2.35rem; padding: 0; border-radius: 50%; background: var(--green-wash) !important; color: var(--green-dark); font-weight: 600; }
.menu-round > summary::after { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 14rem; padding: 0.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-float); }
.menu-list button { display: block; width: 100%; padding: 0.55rem 0.75rem; border: 0; background: none; text-align: left; font: inherit; border-radius: var(--r-s); cursor: pointer; color: var(--ink); }
.menu-list button:hover, .menu-list button:focus-visible { background: var(--mist); }
.menu-note { margin: 0; padding: 0.55rem 0.75rem 0.65rem; font-size: var(--step--1); color: var(--slate); border-bottom: 1px solid var(--line-soft); margin-bottom: 0.3rem; }
.menu-note strong { color: var(--ink); }
.issues .ok { border-color: var(--st-filed); background: var(--green-wash); }
.serial-input { width: 9rem; min-height: 2rem; }

/* ---------------------------------------------- Inline field problems */
.label-row { display: flex; align-items: center; gap: 0.35rem; }
.field-msg { margin: 0; font-size: var(--step--1); min-height: 0; }
.field-msg:empty { display: none; }
.field.field-error input, .field.field-error select, .field.field-error textarea { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field.field-error .field-msg, fieldset.field-error > .field-msg { color: var(--error); font-weight: 500; }
.field.field-warning input, .field.field-warning select { border-color: #d9a441; }
.field.field-warning .field-msg { color: var(--warning); }
fieldset.field-error { border-color: var(--error); }
.help-button { width: 1.2rem; height: 1.2rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--slate); font: 600 0.72rem/1 var(--font-ui); cursor: pointer; flex: none; }
.help-button:hover, .help-button[aria-expanded='true'] { border-color: var(--green); color: var(--green); background: var(--green-wash); }
.help-text { margin: 0.1rem 0 0.2rem; padding: 0.55rem 0.7rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-2); background: var(--teal-wash); border-left: 3px solid var(--teal); border-radius: 0 var(--r-s) var(--r-s) 0; max-width: none; }

/* ------------------------------------------------------------- Toasts */
.toast { display: flex; align-items: center; gap: 0.75rem; }
.toast-text { flex: 1; }
.toast-count { font-weight: 600; opacity: 0.8; }
.toast-action { border: 1px solid rgb(255 255 255 / 0.5); background: transparent; color: #fff; font: inherit; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: var(--r-s); cursor: pointer; }
.toast-action:hover { background: rgb(255 255 255 / 0.12); }
.toast-close { border: 0; background: none; color: #fff; opacity: 0.7; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0.1rem; }
.toast-close:hover { opacity: 1; }

/* --------------------------------------------------------- Save state */
.btn-attention { box-shadow: 0 0 0 3px rgb(113 176 170 / 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .btn-attention { animation: attention 2.4s ease-in-out 2; }
  @keyframes attention { 50% { box-shadow: 0 0 0 6px rgb(113 176 170 / 0.25); } }
}

/* ------------------------------------------------------- Accounts list */
.pill { display: inline-block; margin-right: 0.3rem; padding: 0 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.pill-error { background: #fbe7e5; color: var(--error); }
.pill-warning { background: #fbf1dc; color: var(--warning); }
.pill-ok { background: var(--green-wash); color: var(--green); }
.list-footer { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
tbody tr.clickable:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* -------------------------------------------------------- Account page */
.account-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.account-summary h1 { margin: 0 0 0.4rem; }
.summary-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; margin: 0; max-width: none; color: var(--slate); }
.summary-facts .fact strong { color: var(--ink); }
.ok-text { color: var(--green); font-weight: 600; }
.summary-actions .position { font-size: var(--step--1); margin-right: 0.25rem; }
.section-nav { position: sticky; top: var(--topbar); z-index: 10; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1rem; padding: 0.5rem 0; background: var(--mist); }
.section-nav button { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 0.3rem 0.85rem; font: inherit; font-weight: 500; cursor: pointer; color: var(--ink-2); }
.section-nav button:hover { border-color: var(--green); color: var(--green-dark); }
.nav-badge:empty { display: none; }
.nav-badge { font-size: 0.7rem; font-weight: 600; padding: 0 0.4rem; border-radius: 999px; }
.section-panel { padding: 0; scroll-margin-top: calc(var(--topbar) + 4rem); }
.section-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.75rem; cursor: pointer; list-style: none; }
.section-panel > summary::-webkit-details-marker { display: none; }
.section-panel > summary h2 { margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.section-panel > summary h2::before { content: ''; width: 0.5rem; height: 0.5rem; border: solid var(--slate); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; }
.section-panel[open] > summary h2::before { transform: rotate(45deg); }
.section-panel[open] > summary { border-bottom: 1px solid var(--line-soft); }
.section-body { padding: 1.25rem 1.75rem 1.5rem; }
.section-badge { font-size: var(--step--1); font-weight: 600; }
.tone-error { color: var(--error); } .nav-badge.tone-error { background: #fbe7e5; }
.tone-warning { color: var(--warning); } .nav-badge.tone-warning { background: #fbf1dc; }
.tone-ok { color: var(--green); }
.grid.flags { margin-top: 1rem; }
.danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ----------------------------------------------------------- Side menu */
.tree-sub { margin: 0.1rem 0 0; font-size: var(--step--1); color: var(--slate); }
.tree-search { margin: 0 0.6rem 0.75rem; width: calc(100% - 1.2rem) !important; min-height: 2.1rem !important; }
.tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item { align-items: center; }
.tree-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.dot-filed { background: var(--st-filed); } .dot-changed { background: var(--st-changed); }
.dot-new { background: var(--st-new); } .dot-toDelete { background: var(--st-delete); }

/* --------------------------------------------------------- Onboarding */
.onboarding { border-top: 3px solid var(--teal); }
.checklist { list-style: none; margin: 0 0 0.75rem; padding: 0; counter-reset: step; }
.checklist li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.checklist .check { width: 1.4rem; height: 1.4rem; border: 2px solid var(--line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; flex: none; }
.checklist li.done .check { background: var(--green); border-color: var(--green); }
.checklist li.done > span:not(.check):not(.sr-only) { color: var(--slate); text-decoration: line-through; }

/* ------------------------------------------------------ Accessibility */
.skip-link { position: absolute; left: 0.5rem; top: -3rem; z-index: 100; padding: 0.5rem 1rem; background: var(--green); color: #fff; border-radius: var(--r-s); font-weight: 600; }
.skip-link:focus { top: 0.5rem; }
.section-panel > summary { color: var(--ink); }
:root { --st-none: #8a9492; }
.status-notReportable { background: var(--st-none); }
tr.is-muted td { color: var(--slate); }
.filing-drop { cursor: pointer; margin-bottom: 1rem; }
.filing-drop p { margin: 0.2rem auto; }
.file-cell { word-break: break-all; font-size: 0.78rem; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
.filter-bar input[type='search'] { flex: 1 1 18rem; max-width: 26rem; }
.date-filter { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--step--1); color: var(--slate); }
.date-filter input { width: auto; min-height: 2.2rem; }
.list-count { margin: 0 0 0.5rem; font-size: var(--step--1); }
td.nowrap { white-space: nowrap; }

.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; margin-left: 0.4rem; padding: 0 0.35rem; border-radius: 999px; background: var(--error); color: #fff; font-size: 0.7rem; font-weight: 700; }
.nav-count[hidden] { display: none; }


/* =================================================== Hierarchy & actions */
/* Page title (h1) > section title (h2) > sub-section (h3) > group label. */
.page-head h1 { font-size: var(--step-3); }
.page-head .sub { font-size: var(--step-0); }
.panel > h2, .panel-head h2, .section-panel > summary h2 { font-size: 1.35rem; letter-spacing: 0.01em; }
.panel > h3, .panel-head h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.section-label { margin: 2rem 0 0.6rem; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); max-width: none; }
.section-label::after { content: ''; display: block; height: 1px; margin-top: 0.5rem; background: var(--line); }

/* Secondary actions: outlined and quiet, so that the one primary button stands out. */
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink-2); font-weight: 500; }
.btn-quiet:hover { background: var(--paper); border-color: var(--slate); color: var(--ink); }
.title-with-select { display: flex; align-items: center; gap: 0.75rem; }
.select-compact { width: auto !important; min-height: 2rem !important; padding: 0.15rem 1.9rem 0.15rem 0.6rem !important; font-weight: 600; font-size: var(--step-0); border-radius: 999px !important; background-position: right 0.55rem center !important; }

/* ===================================================== Light status marks */
.mark { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; white-space: nowrap; }
.mark-symbol { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; font-weight: 700; }
.mark-done { color: var(--green); }
.mark-wait { color: #3b5b86; }
.mark-progress { color: #995900; }
.mark-idle { color: var(--slate); }
.mark-alert { color: var(--error); }
.mark-alert .mark-symbol { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--error); color: #fff; font-size: 0.72rem; }

/* ===================================================== Filing progress bar */
.filing-progress { margin: 0.25rem 0 1.25rem; }
.filing-progress-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-bottom: 0.5rem; }
.filing-progress-text strong { font-size: var(--step-1); font-family: var(--font-head); }
.bar { display: flex; gap: 3px; height: 0.7rem; border-radius: 999px; overflow: hidden; background: var(--mist); }
.bar-seg { flex-basis: 0; min-width: 0.5rem; }
.seg-done { background: var(--green); }
.seg-wait { background: #6f8fb8; }
.seg-progress { background: #d9a441; }
.seg-idle { background: #c9d2d0; }
.seg-alert { background: var(--error); }
.bar-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-top: 0.6rem; font-size: var(--step--1); }
.bar-legend .count { margin-left: 0.3rem; font-weight: 600; color: var(--ink); }

/* ============================================ Overview: two-column layout */
.overview-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 88rem) { .overview-layout { grid-template-columns: minmax(0, 1fr) 21rem; } }
.overview-main { min-width: 0; }
.side-column { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 88rem) { .side-column { grid-template-columns: 1fr; } }
.side-alert { white-space: normal; margin-top: 0.4rem !important; }
@media (min-width: 88rem) { .side-column { position: sticky; top: calc(var(--topbar) + 1rem); } }
.side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.1rem 1.25rem; }
.side-card p { margin: 0 0 0.5rem; }
.side-title { margin: 0 0 0.6rem; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.side-big { font-family: var(--font-head); font-size: var(--step-2); font-weight: 600; line-height: 1.1; }
.side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0; }
.side-stats dt { font-size: var(--step--1); color: var(--slate); }
.side-stats dd { margin: 0; font-family: var(--font-head); font-size: var(--step-2); font-weight: 600; }
.activity { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.activity li { display: grid; padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--step--1); }
.activity li:last-child { border-bottom: 0; }
.activity-what { font-weight: 600; color: var(--ink); }
.activity-target { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-when { color: var(--slate); font-size: 0.75rem; }

/* ============================================================ Side menu */
.side-identity { padding: 0 0.6rem 0.9rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); }
.side-org { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.side-project { margin: 0.2rem 0 0; font-family: var(--font-head); font-size: var(--step-1); font-weight: 600; line-height: 1.2; }
.tree-overview { margin-bottom: 0.4rem; }
.tree-icon { color: var(--slate); width: 1rem; text-align: center; }
.side-section { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0.6rem 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.side-count { padding: 0 0.45rem; border-radius: 999px; background: var(--mist); letter-spacing: 0; }
.tree-row { display: flex; align-items: center; gap: 0.1rem; }
.tree-row .tree-item { flex: 1; min-width: 0; }
.tree-toggle { flex: none; width: 1.4rem; height: 1.6rem; border: 0; background: none; color: var(--slate); cursor: pointer; border-radius: var(--r-s); font-size: 0.75rem; }
.tree-toggle:hover { background: var(--mist); color: var(--ink); }
.tree-client > .tree-row .tree-label { font-weight: 600; }
.tree-client + .tree-client { margin-top: 0.15rem; }
.tree-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--slate); }
.tree-clients .tree { margin-left: 1.35rem; }
.side-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem; margin: 1.25rem 0.6rem 0; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); font-size: 0.72rem; color: var(--slate); }
.side-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ============================================================ Report page */
/* Account filing statuses: same light marks as the project page. */
.mark-st-filed { color: var(--green); }
.mark-st-new { color: #3b5b86; }
.mark-st-changed { color: #995900; }
.mark-st-toDelete { color: var(--error); }
.mark-st-notReportable { color: var(--slate); }
.seg-st-filed { background: var(--green); }
.seg-st-new { background: #6f8fb8; }
.seg-st-changed { background: #d9a441; }
.seg-st-toDelete { background: var(--error); }
.seg-st-notReportable { background: #c9d2d0; }

/* Problems: "● 7 errors · ● 3 warnings", clickable. */
.problem-summary { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.mark-alert-dot { color: var(--error); }
.sep-dot { color: var(--slate); }
.mark-button { border: 0; background: none; padding: 0.1rem 0.25rem; margin: -0.1rem -0.25rem; font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--r-s); }
.mark-button:hover { background: var(--mist); text-decoration: underline; text-underline-offset: 3px; }
.mark-button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Next export panel. */
.next-export-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; margin-bottom: 1rem; }
.next-export-text { min-width: 0; }
.next-export .side-title { margin-bottom: 0.4rem; }
.next-export-line { margin: 0 0 0.2rem; font-family: var(--font-head); font-size: var(--step-2); font-weight: 600; line-height: 1.2; max-width: none; }
.next-export-problems { margin-top: 0.6rem; }
.next-export .bar-legend { margin-top: 0.7rem; }

/* Action groups and the accounts toolbar. */
.action-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.list-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1rem; margin: 1.25rem 0 0.9rem; }
.list-toolbar input[type='search'] { width: 22rem; max-width: 100%; }
.list-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0 0 0.9rem; padding: 0.6rem 0.9rem; background: var(--mist); border-radius: var(--r-s); max-width: none; font-size: var(--step--1); }
.list-notice .mark { white-space: normal; }
/* Row actions stay discreet until the row is pointed at or focused. */
.row-action { border-color: transparent; background: transparent; color: var(--slate); font-weight: 500; }
tr:hover .row-action, .row-action:focus-visible { border-color: var(--line); color: var(--error); background: var(--paper); }
.sub-with-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* No typographic ligatures: "--" must stay "--" (the ACD forbids it), names show exactly what was typed. */
body, input, textarea, select, button { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; }

/* Top bar menus: separators, shortcuts, unsaved dot */
.menu-sep { border: 0; border-top: 1px solid var(--line-soft); margin: 0.3rem 0.4rem; }
.menu-list button { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.menu-list kbd { font-family: var(--font-mono); font-size: 0.72rem; color: var(--slate); background: var(--mist); border-radius: 3px; padding: 0.05rem 0.35rem; }
.menu-org { display: block; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.menu-dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.4rem; border-radius: 50%; background: #d9a441; vertical-align: middle; }
.menu-dot[hidden] { display: none; }
@media (min-width: 60.01rem) { .topbar .file { display: inline-flex; align-items: center; gap: 0.6rem; } }
.file-save { font-size: var(--step--1); font-weight: 600; }
.file-save[hidden] { display: none; }

/* ======================================================= Check side panel */
.check-panel { position: fixed; top: var(--topbar); right: 0; bottom: 0; z-index: 25; width: min(30rem, 100vw); display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--line); box-shadow: -12px 0 32px -16px rgb(19 16 13 / 0.18); }
@media (min-width: 75rem) { body.with-check-panel .main { padding-right: calc(30rem + 2.5rem); } }
.cp-head { padding: 1.1rem 1.4rem 0.9rem; border-bottom: 1px solid var(--line-soft); }
.cp-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cp-head h2 { font-size: 1.35rem; margin: 0.15rem 0 0.35rem; }
.cp-head .side-title { margin: 0; }
.cp-counts { display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.cp-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--slate); cursor: pointer; padding: 0.1rem 0.45rem; border-radius: var(--r-s); }
.cp-close:hover { background: var(--mist); color: var(--ink); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.cp-chip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 0.2rem 0.75rem; font: inherit; font-size: var(--step--1); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.cp-chip:hover { border-color: var(--slate); }
.cp-chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cp-body { flex: 1; overflow-y: auto; padding: 0.6rem 0.8rem 1rem; }
.cp-empty { padding: 1rem 0.6rem; color: var(--green); font-weight: 600; }
.cp-group { border-radius: var(--r-m); padding: 0.5rem 0.6rem; margin-bottom: 0.35rem; }
.cp-group.current { background: var(--green-wash); outline: 1px solid rgb(0 92 77 / 0.18); }
.cp-group-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.2rem 0.3rem 0.4rem; }
.cp-group-head .muted { font-size: 0.75rem; }
.cp-issue { display: grid; grid-template-columns: 1.1rem 1fr auto; gap: 0.5rem; align-items: start; padding: 0.45rem 0.3rem; border-top: 1px solid var(--line-soft); font-size: var(--step--1); line-height: 1.4; }
.cp-issue.active { background: #fff; border-radius: var(--r-s); box-shadow: 0 0 0 2px var(--error) inset; }
.cp-dot { margin-top: 0.3rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.cp-dot.err { background: var(--error); }
.cp-dot.war { background: #d9a441; }
.cp-field { display: block; font-weight: 600; color: var(--ink); }
.cp-go { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.cp-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 1.4rem; border-top: 1px solid var(--line); background: var(--mist); font-size: var(--step--1); }
/* The field the panel points at. */
.field.field-focus { border-radius: var(--r-s); box-shadow: 0 0 0 3px rgb(179 38 30 / 0.22); }
/* Notifications move left of the side panel while it is open. */
@media (min-width: 75rem) { body.with-check-panel .toasts { right: calc(30rem + 1rem); } }

/* Reportable jurisdictions */
.jur-summary { margin: 0 0 0.9rem; max-width: none; }
.jur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.25rem 1rem; }
.jur-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; padding: 0.4rem 0.55rem; border-radius: var(--r-s); }
.jur-item:hover { background: var(--mist); }
.jur-item label { cursor: pointer; display: flex; gap: 0.5rem; align-items: baseline; }
.jur-item:not(.on) label { color: var(--slate); }
.jur-code { font-size: 0.75rem; color: var(--slate); min-width: 1.6rem; }
.jur-item .mark { font-size: 0.75rem; }

/* Sortable column titles */
.sort-button { border: 0; background: none; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
th.num .sort-button { justify-content: flex-end; width: 100%; }
.sort-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sort-arrow { font-size: 0.6rem; color: var(--green); min-width: 0.6rem; }
th[aria-sort='ascending'], th[aria-sort='descending'] { color: var(--ink); }
/* Country field with search */
.country-input { background-image: none; }

/* Code next to a mark (e.g. "✓ Accepted VAL") */
.mark-code { margin-left: 0.35rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--slate); }
.mark-info { color: #3b5b86; }

/* ===================================================== Single status vocabulary */
/* ● New (teal) and ◐ Awaiting ACD (blue) must not look alike. */
.mark-info { color: #1f7a8c; }
.seg-info, .seg-st-new { background: #4fa3b5; }
.seg-st-awaiting { background: #6f8fb8; }
.mark-st-awaiting { color: #3b5b86; }
/* Side menu: the same symbols as the marks, small. */
.state-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 0.9rem; font-size: 0.7rem; font-weight: 700; line-height: 1; }
.state-dot.mark-alert { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--error); color: #fff; font-size: 0.6rem; }
.side-legend .state-dot { margin-right: 0.15rem; }

/* Settings → Clients */
.settings-intro { margin: 0 0 1rem; max-width: none; }
details.client-settings { padding: 0; }
details.client-settings > summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; padding: 1.1rem 1.5rem; cursor: pointer; list-style: none; }
details.client-settings > summary::-webkit-details-marker { display: none; }
details.client-settings > summary::before { content: '▸'; color: var(--slate); margin-right: 0.4rem; }
details.client-settings[open] > summary::before { content: '▾'; }
.client-settings-name { font-family: var(--font-head); font-size: var(--step-1); font-weight: 600; margin-right: auto; }
.client-settings-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--step--1); }
.client-settings-body, details.client-settings > p { padding: 0 1.5rem 1.2rem; }
.client-settings-body h3 { margin: 0.6rem 0 0.4rem; }
.client-settings-name { margin: 0 auto 0 0; color: var(--ink); font-size: var(--step-1); }

/* ============================================================ Account tabs */
/* One part of the account at a time; the tab bar stays visible while scrolling a long part. */
.section-tabs { position: sticky; top: var(--topbar); z-index: 5; background: var(--mist); margin: 0 0 1rem; padding-top: 0.25rem; }
.section-tabs [role='tab'] { display: inline-flex; align-items: center; gap: 0.45rem; }
.section-panel[hidden] { display: none; }
.section-panel { scroll-margin-top: calc(var(--topbar) + 4rem); }
.section-panel:focus { outline: none; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.section-head h2 { margin: 0; font-size: 1.35rem; }

/* ================================================================ Tabs, folder style */
/* Clearly tabs: each one a tab shape; the selected one is white, has a green top edge and
   opens onto the content (its bottom edge hides the base line). The base line is drawn inside
   the bar (inset shadow), so it is not cut off by the horizontal scrolling of narrow screens. */
.tabs { gap: 0.3rem; align-items: flex-end; padding: 0 0.25rem; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; overflow-y: hidden; }
.tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.15rem 0.55rem; margin-bottom: 0;
  border: 1px solid var(--line); border-radius: 10px 10px 0 0;
  background: #e8eeec; color: var(--ink-2); font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.tabs button:hover { background: #dde6e3; color: var(--ink); }
.tabs button[aria-selected='true'] {
  background: var(--paper); color: var(--ink); font-weight: 600;
  border-bottom-color: var(--paper);                    /* opens onto the content */
  box-shadow: inset 0 3px 0 var(--green);               /* green top edge */
  z-index: 1;
}
.tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
.tabs .badge { background: var(--mist); }
.tabs button[aria-selected='true'] .badge { background: var(--green-wash); color: var(--green-dark); }

/* Account: the tabs sit directly on the panel of the selected part (one folder): the bar
   overlaps the panel's top border by 1px, and the selected tab covers it. */
.section-tabs { margin-bottom: -1px; padding: 0.5rem 0 0; box-shadow: none; }
.section-panels .section-panel { border-top-left-radius: 0; margin-top: 0; }

/* ======================================================== Readability pass */
/* (2) Figures line up: tabular digits everywhere numbers are compared; currency apart, muted. */
.num, td.num, .amount, .side-stats dd, .count { font-variant-numeric: tabular-nums; }
.amount { white-space: nowrap; }
.amount .ccy { display: inline-block; min-width: 2.6em; margin-left: 0.4em; text-align: left; color: var(--slate); font-size: 0.85em; }
/* (3) Accounts list: scrolls in its own frame so the column titles stay visible; row under the pointer is marked. */
.table-sticky { max-height: calc(100vh - var(--topbar) - 8rem); overflow: auto; }
.table-sticky thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); box-shadow: inset 0 -1px 0 var(--line); }
.table-wrap tbody tr:hover td { background: #f1f6f4; }
/* (6) Account title: number · holder */
.title-holder { font-weight: 500; color: var(--ink-2); }
.title-sep { color: var(--slate); }
/* (7) Compact save status */
.topbar .file { padding-left: 0.9rem; }
#file-status { cursor: default; }
/* (8) Side menu: names on up to two lines instead of being cut */
.tree-label { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow-wrap: anywhere; }
/* (5) Icons in action buttons */
.btn .icon, .btn-link .icon { display: inline-flex; vertical-align: -3px; margin-right: 0.45rem; }
.btn .icon svg { display: block; }
.btn-small .icon svg { width: 14px; height: 14px; }
/* (4) Forms: at most three fields per row (shorter eye travel), labels of equal height so the inputs line up */
.grid { grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc((100% - 2 * 1.25rem) / 3)), 1fr)); }
.grid > .field > label { min-height: 1.45rem; display: flex; align-items: center; gap: 0.3rem; }
/* (1) Tax residences: one line per country with its TIN */
.residences { display: grid; gap: 0.6rem; }
.residence-row { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 1.4fr) auto; gap: 0.5rem 1.25rem; align-items: start;
  padding: 0.75rem 0.9rem; border: 1px solid var(--line-soft); border-radius: var(--r-m); background: #fafcfb; }
.residence-row > .row-action { margin-top: 1.75rem; }
.residence-tins { display: grid; gap: 0.4rem; }
.residence-links { display: flex; gap: 1rem; font-size: var(--step--1); }
.residences > .btn { justify-self: start; }
.other-tins { margin-top: 0.4rem; }
.residences-empty { margin: 0; }
.date-input { max-width: 11rem; font-variant-numeric: tabular-nums; }
@media (max-width: 60rem) { .residence-row { grid-template-columns: 1fr; } .residence-row > .row-action { margin-top: 0; justify-self: start; } }
.group-label { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
/* (10) Progress during long operations */
.progress { display: grid; gap: 0.4rem; min-width: 16rem; }
.progress-label { font-size: var(--step--1); font-weight: 500; }
.progress-track { position: relative; height: 0.45rem; border-radius: 999px; background: var(--mist); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--green); transition: width 0.25s ease; }
.progress-track.indeterminate .progress-fill { position: absolute; width: 35%; animation: progress-slide 1.2s ease-in-out infinite; }
@keyframes progress-slide { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .progress-track.indeterminate .progress-fill { animation: none; width: 100%; opacity: 0.45; } }
.toast .progress { min-width: 14rem; }

/* ============================================================ Country combobox with flags */
.combo { position: relative; }
.combo .country-input { padding-left: 2.35rem; }
.combo-flag { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); display: inline-flex; pointer-events: none; }
.flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); flex: none; }
.flag[hidden] { display: none; }
.combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 16rem; overflow-y: auto; margin: 0; padding: 0.3rem; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 16px 36px -14px rgba(14, 42, 37, 0.35); }
.combo-list[hidden] { display: none; }
.combo-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem; border-radius: var(--r-s); cursor: pointer; font-size: var(--step-0); }
.combo-option[aria-selected='true'], .combo-option:hover { background: var(--green-wash); }
.combo-code { min-width: 1.8rem; color: var(--slate); font-size: 0.8rem; }

/* ============================================================ Date field with calendar */
.date-box { position: relative; display: flex; align-items: stretch; max-width: 12.5rem; }
.date-box .date-input { max-width: none; flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.date-button { flex: none; width: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--paper); color: var(--ink-2); cursor: pointer; }
.date-button:hover { background: var(--mist); color: var(--ink); }
.date-button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.jur-item label { align-items: center; }
/* A group in error (e.g. the tax residences) shows its message, not red borders on every field it contains;
   a field of the group that is itself in error keeps its own red border. */
.field-group.field-error input, .field-group.field-error select, .field-group.field-warning input, .field-group.field-warning select { border-color: var(--line); box-shadow: none; }
.field-group .field.field-error input, .field-group .field.field-error select { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field-group .field.field-warning input, .field-group .field.field-warning select { border-color: var(--warning, #995900); }

/* ============================================================ Field types */
/* Amount with its currency inside the field */
.amount-box { position: relative; display: flex; }
.amount-input { text-align: right; font-variant-numeric: tabular-nums; padding-right: 3.6rem !important; width: 100%; }
.amount-unit { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); font-size: 0.8rem; font-weight: 600; color: var(--slate); pointer-events: none; }
/* Currency search (no flag) */
.combo .country-input.no-flag { padding-left: 0.75rem; }
/* Matricule counter next to the label */
.char-count { margin-left: auto; font-size: 0.72rem; color: var(--slate); font-variant-numeric: tabular-nums; }
/* Phone: dialling code with its flag, then the number */
.phone-box { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.4rem; }
.phone-dial .country-input { padding-right: 0.4rem; }
/* Choice cards */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem; }
.choice-cards.compact { grid-template-columns: repeat(auto-fill, minmax(11rem, 16rem)); }
.choice-card { position: relative; display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--paper); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.choice-card:hover { border-color: var(--slate); }
.choice-card input { margin-top: 0.2rem; accent-color: var(--green); flex: none; }
.choice-card:has(input:checked) { border-color: var(--green); background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.choice-text { display: grid; gap: 0.2rem; }
.choice-label { font-weight: 600; color: var(--ink); line-height: 1.3; }
.choice-desc { font-size: var(--step--1); color: var(--ink-2); line-height: 1.4; }
.choice-code { font-size: 0.7rem; color: var(--slate); }
.field-group.field-error .choice-cards { outline: 2px solid var(--error); outline-offset: 4px; border-radius: var(--r-m); }
/* Control types and equity interests as pills */
.checks.pills { display: flex; flex-wrap: wrap; gap: 0.45rem; border: 0; padding: 0; }
.checks.pills legend { width: 100%; margin-bottom: 0.4rem; font-weight: 600; font-size: var(--step--1); }
.checks.pills .field-check { position: relative; }
.checks.pills .field-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checks.pills .field-check label { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); cursor: pointer; font-size: var(--step--1); }
.checks.pills .field-check label:hover { border-color: var(--slate); }
.checks.pills .field-check input:checked + label { background: var(--green); border-color: var(--green); color: #fff; }
.checks.pills .field-check input:checked + label .pill-code { color: rgba(255, 255, 255, 0.8); }
.checks.pills .field-check input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 2px; }
.pill-code { font-size: 0.68rem; color: var(--slate); }

/* Check panel: the whole problem row opens its field */
button.cp-issue-link { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line-soft); background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
button.cp-issue-link:hover { background: rgba(255, 255, 255, 0.85); border-radius: var(--r-s); }
.cp-group.current button.cp-issue-link:hover { background: #fff; }
button.cp-issue-link:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: var(--r-s); }
.cp-chevron { align-self: center; font-size: 1.2rem; line-height: 1; color: var(--slate); transition: transform 0.12s, color 0.12s; }
button.cp-issue-link:hover .cp-chevron { color: var(--green); transform: translateX(2px); }

/* "Check report": its look follows the state of the report */
.btn-check { display: inline-flex; align-items: center; gap: 0.1rem; }
.btn-check .check-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; margin-left: 0.5rem; padding: 0 0.4rem;
  border-radius: 999px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.btn-check.has-errors { border-color: var(--error); background: #fdf0ef; color: #8e1d16; }
.btn-check.has-errors:hover { background: #fbe3e1; }
.btn-check.has-errors .check-count { background: var(--error); color: #fff; }
.btn-check.has-warnings { border-color: #d9a441; background: #fdf6e8; color: #6e4300; }
.btn-check.has-warnings .check-count { background: #995900; color: #fff; }
.btn-check.is-clean { color: var(--ink-2); }
.btn-check.is-clean .check-count { background: var(--green-wash); color: var(--green); }
.report-check-slot { display: contents; }

/* ============================================================ Module home page */
.launcher { max-width: 1160px; margin: 0 auto; }
.launcher-head { margin: 1.5rem 0 1.75rem; }
.launcher-head h1 { margin-bottom: 0.3rem; }
.module-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
.module-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; height: 100%; min-height: 13rem;
  padding: 1.5rem; text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l, 14px);
  box-shadow: 0 1px 2px rgba(14, 42, 37, 0.06); }
button.module-tile { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
button.module-tile:hover { border-color: var(--green); box-shadow: 0 14px 30px -18px rgba(14, 42, 37, 0.45); transform: translateY(-2px); }
button.module-tile:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.module-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--green); color: #fff; margin-bottom: 0.4rem; }
.module-name { font-family: var(--font-head); font-size: 1.45rem; font-weight: 600; line-height: 1.15; }
.module-desc { color: var(--ink-2); font-size: var(--step--1); line-height: 1.45; flex: 1; }
.module-state { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--slate); }
.module-open { color: var(--green); }
.module-tile.is-disabled { background: #f4f7f6; cursor: not-allowed; }
.module-tile.is-disabled .module-icon { background: #c9d4d1; }
.module-tile.is-disabled .module-name, .module-tile.is-disabled .module-desc { color: #6b7775; }
.module-checks { display: grid; gap: 0.15rem; } .module-checks .field-check { margin: 0; }
.cp-regime { display: inline-block; margin-right: 0.4rem; padding: 0 0.35rem; border-radius: 4px; background: var(--mist); color: var(--slate); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: 1px; }

/* ============================================================ Register page */
.register-exports { margin-bottom: 1.25rem; }
.register-check { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.register-check .side-title { margin: 0 0 0.2rem; }
.regime-blocks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.regime-blocks .next-export { margin-bottom: 0; }
.regime-block .side-title { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.25rem; }
.regime-sub { font-family: var(--font-body, inherit); font-size: var(--step--1); font-weight: 500; color: var(--slate); letter-spacing: 0; text-transform: none; }
/* Account page: the CRS and FATCA statuses, FATCA notes and differences between files */
.regime-statuses { display: inline-flex; gap: 0.9rem; flex-wrap: wrap; }
.regime-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--slate); }
.list-notice.notice-error { border-left: 3px solid var(--error); }
.fatca-why { margin: 0.2rem 0 1rem; color: var(--ink-2); }
.fatca-hint { margin-top: 0.75rem; }
.import-diffs { border-left: 4px solid #d9a441; }
.import-diffs ins { text-decoration: none; font-weight: 600; color: var(--green); }
.import-diffs del { color: var(--slate); }

/* ------------------------------------------------------ Module homes -- */
.home .other-project { margin: 0 0 1rem; }
.home .other-project .actions { margin: 0.6rem 0 0; }

/* ------------------------------------------------ Shared by the modules -- */
.cell-link { text-align: left; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.update-banner { position: sticky; top: 0; z-index: 50; display: flex; gap: 1rem; align-items: center; justify-content: center; padding: 0.5rem 1rem; background: #fff4d6; color: var(--ink); border-bottom: 1px solid #e8cf8a; font-size: var(--step--1); }
.admin-contact + .admin-contact { margin-top: 0.4rem; }

/* Home page: the tools (open to every user, no project file) in their own section, below the modules. */
.launcher-section { margin: 2.25rem 0 1rem; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.tool-grid .module-tile { min-height: 9.5rem; }
.update-banner kbd { font-family: var(--font-mono); font-size: 0.8em; background: rgba(255, 255, 255, 0.85); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: 0.05rem 0.35rem; }

/* Figure tiles and pager of the pages filled from the server (platform/ui/figures.js, used by the tools). */
.figure-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.figure-tile { display: grid; gap: 0.2rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
.figure-tile strong { font-family: var(--font-head); font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.figure-tile span { color: var(--slate); font-size: var(--step--1); }
.figure-tile.tone-error strong { color: var(--error); }
.figure-tile.tone-warning strong { color: var(--warning); }
.figure-pager { flex-wrap: wrap; }
.sort-arrow.sort-idle { color: var(--slate); opacity: 0.55; }

/* Print of the tool pages (Print button): the content only, without the menus, the buttons and the input forms. */
@media print {
  body:has(.tool-page) .topbar, body:has(.tool-page) .sidebar, body:has(.tool-page) .skip-link, body:has(.tool-page) .update-banner,
  body:has(.tool-page) .toasts, .tool-page .no-print, .tool-page .actions, .tool-page .page-actions, .tool-page .figure-pager button,
  .tool-page .filter-bar button, .tool-page .crumbs { display: none !important; }
  body:has(.tool-page) .workspace, body:has(.tool-page) .main { display: block; overflow: visible; height: auto; padding: 0; }
  .tool-page { max-width: none; }
  .tool-page .panel { break-inside: avoid; border-color: #bbb; box-shadow: none; }
  .tool-page .table-wrap { overflow: visible; }
  .tool-page .sort-arrow { display: none; }
  .tool-page .sort-button { text-decoration: none; }
  .tool-page details > :not(summary) { display: block; }
  .tool-page tr { break-inside: avoid; }
  /* Bars and status marks are drawn with background colours, which browsers leave out of prints unless told. */
  .tool-page .reg-bar, .tool-page .reg-bar-fill, .tool-page .pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Charts of the tools (platform/ui/charts.js): donut, 100% bar, columns. */
.chart { margin: 0.5rem 0 0.25rem; }
.chart-image svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.chart-donut .chart-image { flex: 0 0 13rem; }
.chart-donut .chart-legend { flex: 1 1 14rem; }
.chart-stacked .chart-image svg { height: 2.4rem; }
.chart-clickable path, .chart-clickable rect { cursor: pointer; }
.chart-clickable path:hover, .chart-clickable rect:hover { opacity: 0.85; }
.chart-legend { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: var(--step--1); }
.chart-donut .chart-legend { flex-direction: column; margin: 0; }
.chart-legend li, .chart-pick { display: inline-flex; align-items: center; gap: 0.45rem; }
.chart-pick { border: 0; background: none; padding: 0.1rem 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.chart-pick:hover .chart-label { text-decoration: underline; text-underline-offset: 3px; }
.chart-swatch { width: 0.75rem; height: 0.75rem; border-radius: 2px; flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.chart-figure { color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-text { fill: var(--slate); font-family: var(--font-ui); font-size: 12px; }
.chart-value { fill: var(--ink); font-family: var(--font-ui); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-total { fill: var(--ink); font-family: var(--font-head); font-size: 28px; font-weight: 600; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-line .chart-image { cursor: crosshair; border-radius: var(--r-s); }
.chart-line .chart-image:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.chart-stroke { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-area { opacity: 0.08; }
.chart-guide { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart-tag-date { fill: var(--ink); }
.chart-tag-text { font-family: var(--font-ui); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-readout { margin: 0 0 0.35rem; min-height: 1.4em; font-size: var(--step--1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-swatch-line { height: 0.2rem; width: 1rem; border-radius: 2px; }
.billing-month { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--step--1); color: var(--slate); font-weight: 600; }
.billing-month input { width: auto; }

/* Server log (Administration → Security, Organisation → Security). */
.log-code { font-size: 0.72rem; }
td.log-detail { max-width: 36rem; overflow-wrap: anywhere; font-size: 0.85rem; }
.log-pager { align-items: center; }

/* News of Fund XP on the home page (views/news.js): a panel fixed on the right, like the check panel, that slides out to
   the right ("Hide ›") and back (tab on the edge). Administration → News: views/newsAdmin.js. */
.news-panel { position: fixed; top: var(--topbar); right: 0; bottom: 0; z-index: 24; width: min(24rem, 100vw); overflow-y: auto;
  background: var(--paper); border-left: 1px solid var(--line-soft); border-top: 4px solid var(--teal); box-shadow: -8px 0 24px rgb(0 0 0 / 0.06);
  padding: 1rem 1.25rem 1.5rem; transform: translateX(0); transition: transform 0.25s ease, visibility 0.25s; }
.news-dock.is-hidden .news-panel { transform: translateX(100%); visibility: hidden; }
.news-handle { position: fixed; right: 0; top: calc(var(--topbar) + 6rem); z-index: 23; display: none; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.9rem 0.45rem; border: 1px solid var(--teal); border-right: 0; border-radius: var(--r-s) 0 0 var(--r-s); background: var(--teal-wash);
  color: var(--ink); font: 600 0.85rem/1 var(--font-ui); cursor: pointer; writing-mode: vertical-rl; box-shadow: -4px 0 12px rgb(0 0 0 / 0.06); }
.news-dock.is-hidden .news-handle { display: flex; }
.news-handle:hover { background: var(--teal); }
.news-handle .news-count { writing-mode: vertical-rl; }
@media (min-width: 75rem) { .launcher-layout:has(.news-dock:not(.is-hidden)) { padding-right: 24rem; } }
@media (prefers-reduced-motion: reduce) { .news-panel { transition: none; } }
.news-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.news-head h2 { margin: 0; font-size: 1.15rem; }
.news-mail { font-size: 0.85rem; margin: 0.4rem 0 0.75rem; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.news-item { border-top: 1px solid var(--line-soft); padding-top: 0.75rem; }
.news-item h3 { margin: 0.2rem 0 0.4rem; font-size: 1rem; }
.news-item p { margin: 0 0 0.5rem; font-size: 0.92rem; }
.news-meta { font-size: 0.78rem; color: var(--slate); display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.news-type { font-weight: 600; color: var(--green-dark); }
.news-new { margin-left: 0.3rem; padding: 0 0.45rem; border-radius: 999px; background: var(--teal); color: var(--ink); font-weight: 700; font-size: 0.72rem; }
.news-count { padding: 0.45rem 0.2rem; border-radius: 999px; background: var(--teal); color: var(--ink); font-weight: 700; font-size: 0.72rem; }
.news-types { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.news-type-choice { display: flex; gap: 0.5rem; align-items: flex-start; }
.news-preview { border: 1px dashed var(--line); border-radius: var(--r-s); padding: 0.75rem 1rem; }
.news-link-preview { color: var(--green); text-decoration: underline; }

/* The trail of every page (platform/ui/trail.js): always the first line of the page. */
.crumbs.trail { margin: 0 0 0.9rem; align-items: center; }
.crumbs.trail .trail-current { color: var(--ink); font-weight: 600; }
.crumbs.trail span[aria-hidden] { color: var(--slate); }
main.home > .crumbs.trail { margin-bottom: 1.25rem; }

/* Page head kept in view while a long page scrolls (title and main actions); not on small screens. */
@media (min-width: 900px) and (min-height: 640px) {
  .main .page-head { position: sticky; top: var(--topbar); z-index: 15; background: var(--mist); padding-top: 0.75rem; margin-top: -0.75rem; }
  .main .page-head h1 { font-size: var(--step-2); }
}
/* Back to top (shell.js). */
.to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 22; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--green); font-size: 1.25rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); }
.to-top:hover { background: var(--green-wash); }
@media (min-width: 75rem) { body.with-check-panel .to-top { right: calc(30rem + 1.5rem); } }
/* Side menu that folds (platform/ui/sidebar.js). */
.sidebar-fold { display: block; margin: -0.5rem 0 0.5rem auto; width: 1.9rem; height: 1.9rem; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); color: var(--slate); font-weight: 700; cursor: pointer; }
.sidebar-fold:hover { color: var(--green); border-color: var(--green); }
.workspace.sidebar-folded { grid-template-columns: 3rem 1fr; }
.workspace.sidebar-folded .sidebar { padding: 1.25rem 0.4rem; }
.workspace.sidebar-folded .sidebar-fold { margin: 0 auto; }
.side-filter { margin: 0 0.25rem 0.6rem; }
.side-filter input { width: 100%; }
/* Warning before the lock for inactivity (app.js). */
.idle-warning { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 60; width: min(30rem, calc(100vw - 2rem));
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: var(--r-s);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18); padding: 1rem 1.25rem; }
.idle-warning .idle-title { font-weight: 700; margin: 0 0 0.35rem; }

/* A resource to download next to the actions (the Excel template): a link, set apart from the buttons. */
.action-link { display: inline-flex; align-items: center; gap: 0.35rem; align-self: center; border: 0; background: none; padding: 0.3rem 0.9rem 0.3rem 0;
  margin-right: 0.15rem; border-right: 1px solid var(--line); color: var(--green); font: inherit; font-size: var(--step--1); font-weight: 600;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; }
.action-link:hover { color: var(--green-dark); text-decoration-style: solid; }
.action-link svg { width: 1rem; height: 1rem; }
/* A choice between a few options in a dialog (radio buttons). */
.choice-list { border: 0; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.choice-list legend { font-weight: 600; margin-bottom: 0.4rem; padding: 0; }
.choice-list .choice { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; cursor: pointer; }

/* Help of a module and its guided tours (platform/ui/guide.js). */
.topbar-help { display: inline-flex; align-items: center; gap: 0.4rem; }
.help-mark { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--teal); color: var(--ink); font-weight: 700; font-size: 0.8rem; }
.help-panel { position: fixed; top: var(--topbar); right: 0; bottom: 0; z-index: 26; width: min(26rem, 100vw); overflow-y: auto; background: var(--paper);
  border-left: 1px solid var(--line); border-top: 4px solid var(--teal); box-shadow: -12px 0 32px -16px rgb(19 16 13 / 0.18); padding: 1rem 1.25rem 2rem; }
.help-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.help-head h2 { margin: 0; font-size: 1.15rem; }
.help-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.help-item { border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 0.75rem 0.9rem; }
.help-item h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.help-item p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--slate); }
.tour-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.tour-dim { position: fixed; background: rgb(19 16 13 / 0.45); }
.tour-ring { position: fixed; border: 3px solid var(--teal); border-radius: 8px; box-shadow: 0 0 0 4px rgb(113 176 170 / 0.35); }
.tour-bubble { position: fixed; width: min(360px, calc(100vw - 24px)); pointer-events: auto; background: var(--paper); color: var(--ink);
  border-radius: var(--r-s); border-top: 4px solid var(--teal); box-shadow: 0 16px 40px rgb(0 0 0 / 0.25); padding: 0.9rem 1rem 0.8rem; --arrow-x: 50%; }
.tour-bubble h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.tour-bubble p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.tour-count { color: var(--slate); font-size: 0.78rem !important; margin-bottom: 0.25rem !important; }
.tour-note { color: #8a4b00; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
/* The arrow towards the element shown. */
.tour-bubble.below::before, .tour-bubble.above::after { content: ''; position: absolute; left: calc(var(--arrow-x) - 10px); border: 10px solid transparent; }
.tour-bubble.below::before { top: -24px; border-bottom-color: var(--teal); }
.tour-bubble.above::after { bottom: -20px; border-top-color: var(--paper); }
.tour-bubble.centred { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }

/* Help: compact rows (title and one line of text, "Show me" on the right). */
.help-intro { font-size: 0.85rem; margin: 0.35rem 0 0.5rem; }
.help-demo { font-size: 0.85rem; margin: 0 0 0.6rem; padding: 0.45rem 0.6rem; background: var(--teal-wash); border-radius: var(--r-s); }
.help-list { gap: 0; border-top: 1px solid var(--line-soft); }
.help-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; padding: 0.45rem 0.25rem; }
.help-item:hover { background: var(--mist); }
.help-item h3 { margin: 0; font-size: 0.9rem; }
.help-item p { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-show { border: 0; background: none; color: var(--green); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; padding: 0.25rem 0.35rem; border-radius: var(--r-s); }
.help-show:hover, .help-show:focus-visible { background: var(--green-wash); }
.tour-hint { color: var(--slate); font-size: 0.8rem !important; }
.tour-wait { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.4rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tour-spin 0.9s linear infinite; vertical-align: -1px; }
@keyframes tour-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tour-wait { animation: none; } }
/* Demo project (fictive data) and notices. */
.demo-badge { margin-left: 0.5rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: #fff4d6; color: #7a4b00; border: 1px solid #e8c56b; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.notice { padding: 0.6rem 0.9rem; border-radius: var(--r-s); margin: 0 0 1rem; }
.notice-warning { background: #fff4d6; border: 1px solid #e8c56b; color: #5c3a00; }

/* Guided empty state (layout.js guidedEmpty). */
.guided-empty { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 2.25rem 2rem; text-align: center; display: grid; justify-items: center; gap: 0.75rem; }
.guided-empty-mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.8rem; font-weight: 600; }
.guided-empty h2 { margin: 0; font-size: 1.35rem; }
.guided-empty-text { margin: 0; max-width: 36rem; color: var(--slate); }
.guided-empty-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; width: 100%; max-width: 56rem; margin-top: 0.5rem; text-align: left; }
.guided-empty-option { border: 1px solid var(--line); border-radius: var(--r-s); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.guided-empty-option.main { border: 2px solid var(--green); }
.guided-empty-option h3 { margin: 0; font-size: 1.05rem; }
.guided-empty-option p { margin: 0 0 0.25rem; color: var(--slate); font-size: 0.92rem; flex: 1 1 auto; }
.guided-empty-footer { margin: 0.5rem 0 0; color: var(--slate); font-size: 0.92rem; }
/* Progress in steps (layout.js progressSteps). */
.progress-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.progress-step { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.9rem 1rem; border-right: 1px solid var(--line-soft); }
.progress-step:last-child { border-right: 0; }
.step-mark { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid #b8c4c2; color: var(--slate); font-weight: 700; box-sizing: border-box; }
.step-body { display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; }
.step-detail { color: var(--slate); font-size: 0.88rem; }
.step-done .step-mark { background: var(--green); border-color: var(--green); color: #fff; }
.step-wait .step-mark { border-color: #2f5d8a; color: #2f5d8a; }
.step-alert { background: #fdf6f5; box-shadow: inset 0 -3px 0 #b3261e; }
.step-alert .step-mark { background: #b3261e; border-color: #b3261e; color: #fff; }
.step-alert .step-detail { color: #9b1f17; font-weight: 600; }
.step-current { background: var(--teal-wash); box-shadow: inset 0 -3px 0 var(--teal); }
.step-current .step-mark { border-color: var(--green); color: var(--green); }
/* "More" menu of a page head. */
.more-menu > summary { display: inline-flex; align-items: center; gap: 0.35rem; }
.more-menu .menu-list { right: 0; left: auto; min-width: 14rem; }
.menu-list .menu-danger { color: #9b1f17; }