/* Components: the dozen patterns elements alone cannot express. */
@layer components {
  /* Page frame ------------------------------------------------------ */
  .page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
  }

  /* Top bar: wordmark, sections, search, user, closed by a double rule. */
  .topbar {
    display: flex;
    align-items: flex-end;
    height: 64px;
    padding-bottom: var(--space-3);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .topbar::after { content: none; }
  .topbar-rule { border-top: var(--rule-w) solid var(--rule); margin-top: 2px; height: 3px; }

  .wordmark {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: var(--tracking-wordmark);
    text-transform: uppercase;
    white-space: nowrap;
    margin-right: var(--space-7);
    padding-bottom: 6px;
  }
  .wordmark:hover { color: var(--ink); text-decoration: none; }

  .nav { display: flex; align-items: flex-end; }
  .nav a {
    font-size: var(--text-base);
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 0 2px 6px;
    margin: 0 14px;
    border-bottom: 1.5px solid transparent;
    white-space: nowrap;
  }
  .nav a:hover { color: var(--ink); text-decoration: none; }
  .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

  .topbar-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 220px;
    margin-right: var(--space-6);
    padding-bottom: 5px;
    border-bottom: var(--rule-w) solid var(--ink-3);
    color: var(--ink-3);
  }
  .topbar-search input { border: 0; height: auto; padding: 0; font-style: italic; }
  .topbar-search input:not(:placeholder-shown) { font-style: normal; color: var(--ink); }

  .topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding-bottom: 6px;
    white-space: nowrap;
  }
  .topbar-user button { border: 0; height: auto; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; background: none; }
  .topbar-user button:hover { background: none; color: var(--ink); }

  /* Page header ------------------------------------------------------ */
  .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    padding-top: var(--space-7);
    margin-bottom: 28px;
  }
  .page-header-title { display: flex; flex-direction: column; gap: 6px; }
  .page-header-crumbs { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .page-header-sub { color: var(--ink-2); font-style: italic; }
  .page-header-actions { display: flex; align-items: center; gap: var(--space-3); }

  /* Filter strip: two groups of underlined small caps above a table. */
  .filters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: var(--rule-w) solid var(--rule-light);
    padding-bottom: 10px;
    margin-bottom: 28px;
  }
  .filters-group { display: flex; gap: 28px; }
  .filters a, .filters button {
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0 0 3px;
    border: 0;
    border-bottom: var(--rule-w) solid transparent;
    height: auto;
    background: none;
  }
  .filters a:hover, .filters button:hover { color: var(--ink); text-decoration: none; background: none; }
  .filters a[aria-current="true"], .filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

  /* Buttons ---------------------------------------------------------- */
  .button-primary, button[data-variant="primary"], input[type="submit"][data-variant="primary"] {
    color: var(--paper);
    background: var(--ink);
  }
  .button-primary:hover, button[data-variant="primary"]:hover, input[type="submit"][data-variant="primary"]:hover {
    color: var(--paper);
    background: color-mix(in srgb, var(--ink) 88%, var(--paper));
  }
  .button-quiet, button[data-variant="quiet"] { border-color: transparent; padding: 0 var(--space-2); }

  /* Table extras ----------------------------------------------------- */
  .table-note { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-4); }
  .table-note-caption { font-size: var(--text-xs); font-style: italic; color: var(--ink-3); }
  .table-empty { padding: var(--space-7) 0; text-align: center; font-style: italic; color: var(--ink-2); border-bottom: var(--rule-w) solid var(--rule); }

  td .row-title { font-weight: 500; }
  td .row-aside { font-size: var(--text-xs); font-style: italic; color: var(--ink-3); margin-left: 6px; }
  td.muted, .muted { color: var(--ink-2); }
  td.faint, .faint { color: var(--ink-3); }

  /* Marks: a tick, a dash, or an attention note. No coloured pills. */
  .mark { display: inline-flex; align-items: center; gap: var(--space-2); }
  .mark svg { width: 13px; height: 13px; flex: none; }
  .mark-none { color: var(--ink-3); }
  .attention { color: var(--accent); font-style: italic; }

  /* Pagination ------------------------------------------------------- */
  .pagination { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: var(--space-2); }
  .pagination a { color: var(--ink); }
  .pagination [aria-disabled="true"] { color: var(--ink-3); }

  /* Flash / notice: a ruled line, ink or accent. */
  .notice {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin: var(--space-6) 0 calc(-1 * var(--space-3));
    border-top: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .notice[data-kind="alert"] { color: var(--accent); border-color: var(--accent); }

  /* Forms ------------------------------------------------------------ */
  .form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); }
  .field { display: flex; flex-direction: column; gap: 0; grid-column: span 12; }
  .field label, .field .field-label { margin-bottom: 0; }
  .field[data-span="2"] { grid-column: span 2; }
  .field[data-span="3"] { grid-column: span 3; }
  .field[data-span="4"] { grid-column: span 4; }
  .field[data-span="5"] { grid-column: span 5; }
  .field[data-span="6"] { grid-column: span 6; }
  .field[data-span="8"] { grid-column: span 8; }
  .field[data-span="9"] { grid-column: span 9; }
  .field .field-hint, .field .field-error { margin-top: var(--space-1); }
  .field .choices { margin-top: var(--space-1); }
  .field-hint { font-size: var(--text-xs); color: var(--ink-3); font-style: italic; }
  .field-error { font-size: var(--text-xs); color: var(--accent); font-style: italic; }
  .form-actions { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); margin-top: var(--space-5); border-top: var(--rule-w) solid var(--rule-light); }

  /* Tabs, ruled. */
  .tabs { display: flex; border-bottom: var(--rule-w) solid var(--rule-light); margin-bottom: var(--space-5); }
  .tabs a { padding: 10px 2px; margin-right: 22px; color: var(--ink-2); border-bottom: 1.5px solid transparent; }
  .tabs a:hover { text-decoration: none; color: var(--ink); }
  .tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  .tabs a[aria-disabled="true"], .nav a[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
  .tabs a[aria-disabled="true"]:hover, .nav a[aria-disabled="true"]:hover { color: var(--ink-3); text-decoration: none; }
  .button[aria-disabled="true"] { color: var(--ink-3); border-color: var(--ink-3); cursor: default; background: transparent; }
}

@layer components {
  /* Choice row: radios rendered as a ruled segmented control. */
  .field-label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-1); }
  .choices { display: flex; }
  .choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--control-height);
    padding: 0 var(--space-4);
    margin: 0 0 0 -1px;
    border: var(--rule-w) solid var(--ink);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }
  .choice:first-child { margin-left: 0; }
  .choice input { position: absolute; opacity: 0; width: 0; height: 0; }
  .choice:has(input:checked) { background: var(--ink); color: var(--paper); }
  .choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

  .form { max-width: 880px; }
  .form-section { padding-top: var(--space-5); margin-top: var(--space-5); border-top: var(--rule-w) solid var(--rule-light); }
  .form-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
  .form-section h4 { margin-bottom: var(--space-4); }
  [hidden] { display: none !important; }

  .errors { margin-bottom: var(--space-5); }
  .errors ul { margin: var(--space-1) 0 0; padding-left: 1.2em; }
}

@layer components {
  /* Two-column detail layout of ruled panels. */
  .columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
  .column { display: flex; flex-direction: column; }
  .panel { padding: var(--space-5) 0; border-top: var(--rule-w) solid var(--rule); }
  .panel h4 { margin-bottom: var(--space-4); }
  .panel-wide { grid-column: span 2; }
  .panel-actions { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
  .form-compact .form-actions { justify-content: flex-start; border-top: 0; margin-top: var(--space-3); padding-top: 0; }
  .prewrap { white-space: pre-wrap; }
  .table-compact td { padding-top: 7px; padding-bottom: 7px; }
}

@layer components {
  /* Figures: a row of headline numbers, ruled above. */
  .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--space-6); border-top: var(--rule-w) solid var(--rule); padding-top: var(--space-4); margin-bottom: var(--space-4); }
  .figure h4 { margin-bottom: var(--space-2); }
  .figure-value { font-size: var(--text-lg); line-height: 1.1; }
  .figure-note { font-size: var(--text-xs); color: var(--ink-2); margin-top: var(--space-1); font-style: italic; }

  /* Balances strip on a ledger: label over number. */
  .balances { display: flex; gap: var(--space-7); margin-bottom: var(--space-5); }
  .balance { display: flex; flex-direction: column; gap: 2px; }
  .balance .num { font-size: var(--text-md); }

  /* Reverse-entry disclosure in a page header. */
  .reverse { position: relative; }
  .reverse summary { list-style: none; }
  .reverse summary::-webkit-details-marker { display: none; }
  .reverse-form { position: absolute; right: 0; top: calc(100% + var(--space-2)); width: 420px; background: var(--paper); border: var(--rule-w) solid var(--rule); padding: var(--space-4); z-index: 2; }
  .reverse-form .form-actions { border-top: 0; margin-top: var(--space-3); padding-top: 0; }
  .small { font-size: var(--text-xs); }
}

@layer components {
  /* Identification scans: small ruled thumbnails with a caption. */
  .documents { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); align-items: flex-start; }
  .document { display: flex; gap: var(--space-3); width: 260px; }
  .document-thumb { display: block; width: 72px; height: 72px; object-fit: cover; border: var(--rule-w) solid var(--rule); flex: none; }
  .document-pdf { display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
  .document-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .document-meta .row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  button.document-remove { margin-top: var(--space-1); height: auto; padding: 0; border: 0; font-size: var(--text-xs); color: var(--ink-3); }
  button.document-remove:hover { background: none; color: var(--accent); }
  .document-add { display: flex; align-items: center; height: 72px; }
  input[type="file"].file { border: 0; height: auto; padding: 4px 0; font-size: var(--text-sm); }
  input[type="file"]::file-selector-button { font: inherit; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; background: transparent; border: var(--rule-w) solid var(--ink); color: var(--ink); padding: 4px 10px; margin-right: var(--space-3); cursor: pointer; }
}

@layer components {
  /* Outcome tags: a pastel wash behind small caps. */
  .tag { display: inline-block; padding: 1px 8px; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
  .tag-clear { background: var(--wash-clear); }
  .tag-conflict { background: var(--wash-conflict); }
  .tag-conflict_waived { background: var(--wash-waived); }

  .choice:has(input.result-choice[value="clear"]:checked) { background: var(--wash-clear); color: var(--ink); }
  .choice:has(input.result-choice[value="conflict"]:checked) { background: var(--wash-conflict); color: var(--ink); }
  .choice:has(input.result-choice[value="conflict_waived"]:checked) { background: var(--wash-waived); color: var(--ink); }

  .hits { margin-bottom: var(--space-4); }
  .hits h4 { margin-bottom: var(--space-2); }
}

@layer components {
  .checks { display: flex; gap: var(--space-5); }
  .check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 400; margin: 0; }
  .check input { accent-color: var(--ink); width: 14px; height: 14px; margin: 0; }
}

@layer components {
  dl.totals { grid-template-columns: 1fr max-content; max-width: 360px; margin-left: auto; }
  dl.totals dt { text-align: right; text-transform: none; letter-spacing: 0; font-size: var(--text-base); font-weight: 400; color: var(--ink); }
  dl.totals .totals-grand { font-weight: 600; border-top: var(--rule-w) solid var(--rule); padding-top: var(--space-2); }
}

@layer components {
  /* Icons: thin strokes, sized to the text they sit beside. */
  .icon { display: inline-block; vertical-align: -0.18em; flex: none; }
  h4 .icon { vertical-align: -0.2em; margin-right: 2px; color: var(--ink-3); }
  .button .icon, button .icon { margin-right: 0; }
  .icon-link { display: inline-block; padding: 2px 4px; color: var(--ink-2); }
  .icon-link:hover { color: var(--accent); text-decoration: none; }
  .icon-link + .icon-link { margin-left: var(--space-1); }
  .topbar-user form { display: inline; }
  .topbar-user button { display: inline-flex; align-items: center; }
  .topbar-user button:hover { color: var(--accent); }
}

@layer components {
  /* The gate: sign-in and password pages. A narrow column, the wordmark
     set large, a double rule, and the form on its baselines. */
  .gate { max-width: 400px; margin: 18vh auto 0; }
  .gate-mark { font-size: 30px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.1; }
  .gate-rule { height: 4px; border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); margin: var(--space-3) 0 var(--space-5); }
  .gate-lede { font-style: italic; color: var(--ink-2); margin-bottom: var(--space-6); }
  .gate-form .form-grid { gap: var(--space-5); }
  .gate-actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-6); }
  .gate-aside { font-size: var(--text-sm); color: var(--ink-2); }
  .gate-notice { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
}