/* Components. Cards use a border, not a shadow (shadow is for menus and dialogs). */
.skip-link { position: absolute; left: -62.4375rem; top: 0; background: var(--surface); padding: var(--space-2) var(--space-3); z-index: 100; }
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.5rem; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid transparent; font-weight: 600; font-size: var(--fs-3); line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap; background: none;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn-sm { min-height: 2rem; padding: 0 var(--space-3); font-size: var(--fs-2); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn-secondary:hover { background: var(--accent-wash); color: var(--accent); }
.btn-ghost { color: var(--accent); }
.btn-ghost:hover { background: var(--accent-wash); color: var(--accent); }
.btn-danger { background: var(--danger); color: var(--ink-on-fill); }
.btn-danger:hover { filter: brightness(0.92); color: var(--ink-on-fill); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: auto; }
.btn[disabled]:hover { background: inherit; }
.btn-primary[disabled]:hover { background: var(--accent); }

/* Badge / status chip */
.badge {
  display: inline-flex; align-items: center; gap: 0.3em; padding: 0.1em 0.65em 0.1em 0.5em;
  border-radius: var(--radius-pill); border: 1px solid; font-size: var(--fs-1); font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.badge .icon { width: 1em; height: 1em; }
.badge-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); }
.badge-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
.badge-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-ink); }
.badge-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-ink); }
.badge-neutral { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--neutral-ink); }

/* Card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; }
.card-head p { margin: 2px 0 0; }
.card-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.card-body.flush { padding: var(--space-3) 0 0; }

/* Stat tile */
.stat { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: inherit; min-width: 0; }
a.stat:hover { border-color: var(--accent-brand); text-decoration: none; }
.stat-label { font-size: var(--fs-2); color: var(--ink-muted); font-weight: 600; }
.stat-value { font-size: var(--fs-7); font-weight: 700; color: var(--ink); line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.stat-hint { font-size: var(--fs-2); color: var(--ink-muted); margin-top: 2px; }
.tone-ok { color: var(--ok-ink); } .tone-warn { color: var(--warn-ink); } .tone-danger { color: var(--danger-ink); }
.stat-spark { margin-top: var(--space-2); }

/* Table */
.table-block { min-width: 0; }
.table-scroll { overflow-x: auto; }
.table { width: 100%; font-size: var(--fs-3); }
.table th, .table td { padding: 0.65rem var(--space-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { background: var(--surface-2); color: var(--ink-muted); font-size: var(--fs-2); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .right { text-align: right; font-variant-numeric: tabular-nums; }
.table .center { text-align: center; }
.table a.sort { color: inherit; display: inline-flex; align-items: center; gap: 2px; }
.table a.sort:hover { color: var(--accent); text-decoration: none; }
.table a.sort .icon { width: 1em; height: 1em; opacity: 0.6; }
.table th[aria-sort="ascending"] a.sort .icon, .table th[aria-sort="descending"] a.sort .icon { opacity: 1; color: var(--accent); }
.table-compact th, .table-compact td { padding: 0.35rem var(--space-3); font-size: var(--fs-2); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
.empty { text-align: center; padding: var(--space-6) var(--space-4); }
.empty-icon { color: var(--ink-muted); } .empty-icon .icon { width: 2.5rem; height: 2.5rem; }
.empty h3 { margin: var(--space-2) 0; }
.empty .btn { margin-top: var(--space-2); }
@media (max-width: 767px) {
  .table.table:not(.table-compact) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table:not(.table-compact) tr { display: block; border-bottom: 1px solid var(--border); padding: var(--space-2) 0; }
  .table:not(.table-compact) td { display: flex; justify-content: space-between; gap: var(--space-4); border: 0; padding: 0.25rem var(--space-4); text-align: right !important; }
  .table:not(.table-compact) td::before { content: attr(data-label); color: var(--ink-muted); font-weight: 600; text-align: left; flex: none; }
}

/* Tabs */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { padding: 0.6rem var(--space-4); color: var(--ink-muted); font-weight: 600; border-bottom: 0.1875rem solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { background: var(--neutral-bg); color: var(--neutral-ink); border-radius: var(--radius-pill); padding: 0 0.5em; font-size: var(--fs-1); }

/* Dialog and drawer */
.dialog { border: 0; padding: 0; background: transparent; color: var(--body); max-width: min(34rem, calc(100vw - 2rem)); width: 100%; }
.dialog::backdrop { background: var(--scrim); }
.dialog-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.dialog-body { padding: var(--space-5); overflow-y: auto; }
.dialog.drawer { margin: 0 0 0 auto; max-width: min(28rem, 100vw); height: 100vh; max-height: none; }
.dialog.drawer .dialog-panel { height: 100%; max-height: none; border-radius: 0; border-width: 0 0 0 1px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* Alerts and toasts */
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid; border-radius: var(--radius-md); }
.alert > .icon { margin-top: 2px; }
.alert-text { flex: 1; min-width: 0; }
.alert .icon-btn { width: 1.75rem; height: 1.75rem; margin: -0.25rem -0.5rem -0.25rem 0; color: inherit; }
.alert-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-ink); }
.alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-ink); }
.alert-neutral { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--neutral-ink); }
.toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90; display: grid; gap: var(--space-2); width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { pointer-events: auto; box-shadow: var(--shadow-1); background-clip: padding-box; }

/* Forms */
.field { display: grid; gap: 0.25rem; margin-bottom: var(--space-4); }
.field label, .field legend { font-weight: 600; color: var(--ink); font-size: var(--fs-3); }
.req { color: var(--danger); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .filterbar input, .search input, .multi summary {
  width: 100%; min-height: 2.5rem; padding: 0.45rem 0.7rem; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
}
/* Bare controls outside .field (sr-kit handoff): inline forms and dialog bodies. */
.inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .inline-form select, .inline-form textarea,
.dialog-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .dialog-body select, .dialog-body textarea {
  min-height: 2.5rem; padding: 0.45rem 0.7rem; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
}
.dialog-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .dialog-body select, .dialog-body textarea { width: 100%; }
.inline-form input:disabled, .inline-form select:disabled, .inline-form textarea:disabled,
.dialog-body input:disabled, .dialog-body select:disabled, .dialog-body textarea:disabled { background: var(--surface-2); color: var(--ink-muted); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--surface-2); color: var(--ink-muted); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-hint { margin: 0; color: var(--ink-muted); font-size: var(--fs-2); }
.field-error { margin: 0; color: var(--danger-ink); font-size: var(--fs-2); font-weight: 600; }
.field-error .icon { width: 1em; height: 1em; }
.field fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500 !important; cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; accent-color: var(--accent); }
.switch input { appearance: none; width: 2.5rem; height: 1.375rem; border-radius: 0.6875rem; background: var(--border-control); position: relative; cursor: pointer; transition: background 0.15s; }
.switch input::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ink-on-fill); transition: transform 0.15s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(1.125rem); }

/* Search and filter bar */
.search, .filter-search { position: relative; display: flex; align-items: center; min-width: 14rem; flex: 1 1 14rem; max-width: 26rem; }
.search > .icon, .filter-search > .icon { position: absolute; left: 0.6rem; color: var(--ink-muted); pointer-events: none; }
.search input, .filter-search input { padding-left: 2.2rem; }
.spinner { position: absolute; right: 0.7rem; width: 0.875rem; height: 0.875rem; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filterbar .month input { width: auto; }
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.multi-panel { position: absolute; z-index: 20; top: calc(100% + 0.25rem); left: 0; min-width: 16rem; max-height: 18rem; overflow-y: auto; display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.multi summary.btn { width: auto; }


/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); position: relative; }
.timeline li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--space-3); position: relative; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 0.8125rem; top: 1.875rem; bottom: -0.875rem; width: 2px; background: var(--border); }
.tl-dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid; }
.tl-dot .icon { width: 1rem; height: 1rem; }
.tl-title { font-weight: 600; color: var(--ink); }
.tl-ok .tl-dot { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); }
.tl-warn .tl-dot { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
.tl-danger .tl-dot { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-ink); }
.tl-info .tl-dot { background: var(--info-bg); border-color: var(--info-border); color: var(--info-ink); }
.tl-neutral .tl-dot { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--neutral-ink); }

/* Definition list */
.deflist { margin: 0; display: grid; gap: 0; }
.deflist > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--space-3); padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { color: var(--ink-muted); font-weight: 600; }
.deflist dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 479px) { .deflist > div { grid-template-columns: 1fr; gap: 0; } }

/* Proof viewer */
.proof { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.proof-frame { display: block; background: var(--surface-2); max-height: 28rem; overflow: auto; text-align: center; }
.proof-frame img { max-width: 100%; height: auto; display: inline-block; }
.proof-missing { display: grid; place-items: center; gap: var(--space-2); padding: var(--space-6); color: var(--ink-muted); background: var(--surface-2); text-align: center; }
.proof-missing .icon { width: 2.5rem; height: 2.5rem; } .proof-missing p { margin: 0; }
.proof figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); font-size: var(--fs-2); color: var(--ink-muted); }
.proof .deflist { padding: 0 var(--space-4); border-top: 1px solid var(--border); }

/* Login / bare pages */
main.bare { max-width: 26rem; margin: 10vh auto 0; padding: var(--space-4); }

.tone-info { color: var(--info-ink); } .tone-neutral { color: var(--neutral-ink); }