/* ==========================================================================
   Ayuda domain-connection prototype — shared component layer
   Built from the visual language observed in the running product
   (section 7 of the working design direction).

   D1 and D2 write page CONTENT. Shells, cards, tables, tabs, chips, buttons,
   form fields, empty states and the study apparatus all live here.

   No @import, no font fetch, no URL of any kind. Everything is local.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding-top: var(--studybar-h, 0px);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink-heading); font-weight: var(--fw-med); }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-3); padding-left: var(--s-6); }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }
a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--brand-hover); }

/* Focus is always visible. Never remove this. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: var(--studybar-h, 0px); z-index: 60;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
}
.skip-link:focus { left: var(--s-3); }

/* --------------------------------------------------------------------------
   2. Type utilities
   -------------------------------------------------------------------------- */

.page-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-med); color: var(--ink-strong); letter-spacing: -0.01em; }
.sub-heading { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--fw-med); color: var(--ink-heading); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); }
.quiet { color: var(--ink-2); }
.quieter { color: var(--ink-3); }
.strong { font-weight: var(--fw-med); }
.mono { font-family: var(--font-mono); font-size: var(--fs-small); }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--s-3); }
.stack-tight > * + * { margin-top: var(--s-2); }
.row-inline { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   3. Shells
   -------------------------------------------------------------------------- */

.app { display: flex; min-height: calc(100vh - var(--studybar-h, 0px)); align-items: stretch; }
.app__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---- client: collapsed icon rail ---------------------------------------- */

.rail {
  flex: 0 0 var(--rail-w); width: var(--rail-w);
  background: var(--surface); border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-3) 0; gap: var(--s-1);
}
.rail__mark {
  width: 26px; height: 26px; border-radius: var(--r-md);
  background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center;
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  margin-bottom: var(--s-3);
}
.rail__item {
  width: 34px; height: 34px; border: 0; background: transparent;
  border-radius: var(--r-md); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
}
.rail__item:hover { background: var(--surface-alt); color: var(--ink); }
.rail__item[aria-current="page"] { background: var(--brand-quiet); color: var(--brand-deep); }
.rail__spacer { flex: 1 1 auto; }

/* ---- ops: expanded sidebar ---------------------------------------------- */

.sidebar {
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; padding: var(--s-3) var(--s-2);
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2) var(--s-3);
  font-size: var(--fs-body); font-weight: var(--fw-med); color: var(--ink-heading);
}
.sidebar__mark {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center; font-size: var(--fs-meta); font-weight: var(--fw-bold);
}
.sidebar__search {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: 100%; margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--r-md); color: var(--ink-2);
  font: var(--fw-normal) var(--fs-small)/var(--lh-small) var(--font-ui);
  cursor: pointer; text-align: left;
}
.sidebar__search:hover { border-color: var(--rule-strong); color: var(--ink); }
.sidebar__search kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0 4px; background: var(--surface);
}
.sidebar__nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar__item {
  display: block; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); color: var(--ink-2);
  font-size: var(--fs-small); line-height: var(--lh-small);
  text-decoration: none; border: 0; background: transparent;
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-ui);
}
.sidebar__item:hover { background: var(--surface-alt); color: var(--ink); }
.sidebar__item[aria-current="page"] {
  /* --brand on --brand-quiet measures 3.97:1 at 12px/500. --brand-deep is 5.93:1. */
  background: var(--brand-quiet); color: var(--brand-deep); font-weight: var(--fw-med);
}
.sidebar__spacer { flex: 1 1 auto; min-height: var(--s-5); }

/* ---- topbar -------------------------------------------------------------- */

.topbar {
  flex: 0 0 var(--topbar-h); min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: 0 var(--s-5);
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.breadcrumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb__sep { color: var(--ink-3); }
.breadcrumb__current { color: var(--ink); }
.topbar__right { display: flex; align-items: center; gap: var(--s-3); }
.topbar__link { font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; }
.topbar__link:hover { color: var(--ink); text-decoration: underline; }
.avatar {
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--surface-alt); border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-size: var(--fs-meta); font-weight: var(--fw-med); color: var(--ink-2);
}

/* ---- content ------------------------------------------------------------- */

.content { flex: 1 1 auto; padding: var(--s-6) var(--s-5) 64px; }
.content__inner { max-width: var(--content-w); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-4); }
.content--ops .content__inner { max-width: var(--content-w-ops); }
.page-head { display: flex; flex-direction: column; gap: var(--s-2); }
.page-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   4. Environment switcher (segmented)
   -------------------------------------------------------------------------- */

.envswitch {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.envswitch__seg {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 0; background: transparent; cursor: pointer;
  font: var(--fw-med) var(--fs-small)/var(--lh-small) var(--font-ui);
  color: var(--ink-2);
}
.envswitch__seg + .envswitch__seg { border-left: 1px solid var(--rule); }
.envswitch__seg[aria-pressed="true"], .envswitch__seg[aria-current="true"] { background: var(--surface-alt); color: var(--ink); }
.envswitch__seg:hover { background: var(--surface-alt); }
.envswitch__addr { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   5. Two-level tabs
   -------------------------------------------------------------------------- */

.tabs { display: flex; gap: var(--s-4); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.tabs__item {
  position: relative; padding: var(--s-2) 0 var(--s-3);
  font-size: var(--fs-body); color: var(--ink-2);
  text-decoration: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui);
}
.tabs__item:hover { color: var(--ink); }
.tabs__item[aria-current="page"] { color: var(--ink-strong); font-weight: var(--fw-med); }
.tabs__item[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand);
}
.tabs--sub { gap: var(--s-4); border-bottom: 1px solid var(--rule); margin-top: 0; }
.tabs--sub .tabs__item { font-size: var(--fs-small); padding: var(--s-2) 0 var(--s-2); }
.tabs-group { display: flex; flex-direction: column; }
.tabs-group .tabs--sub { padding-top: var(--s-2); }

/* --------------------------------------------------------------------------
   6. Card — header / body / footer, with the note OUTSIDE the body
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.card__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule);
}
.card__header h2, .card__header h1 {
  font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-med); color: var(--ink-heading);
}
.card__header-desc { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); }
.card__body { padding: var(--s-5); }
.card__body--tight { padding: var(--s-4); }
.card__body--flush { padding: 0; }
.card__section + .card__section { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.card__footer {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rule); background: var(--surface);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
/* The quiet caveat line that sits under the card, not in it. The
   action-then-reassurance pairing is a signature of this product. */
.card__note {
  margin: var(--s-2) 0 0; padding: 0 var(--s-1);
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2);
}

/* Notice block — used inside a card body for the email contract. */
.notice {
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-3);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  background: var(--surface-alt); font-size: var(--fs-body);
}
.notice--warn { border-left-color: var(--warn); background: var(--warn-quiet); }
.notice--ok { border-left-color: var(--ok); background: var(--ok-quiet); }
.notice--brand { border-left-color: var(--brand); background: var(--brand-quiet); }
.notice__title { font-weight: var(--fw-med); color: var(--ink-heading); margin-bottom: var(--s-2); }

/* --------------------------------------------------------------------------
   7. Definition list rows
   -------------------------------------------------------------------------- */

.dl { margin: 0; display: flex; flex-direction: column; }
.dl .row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s-4); padding: var(--s-3) 0; align-items: start;
}
.dl .row + .row { border-top: 1px solid var(--rule); }
.dl dt {
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-med);
  color: var(--ink-2); text-transform: none; padding-top: 1px;
}
.dl dd { margin: 0; min-width: 0; font-size: var(--fs-body); color: var(--ink); }
.dl dd.code { font-family: var(--font-mono); font-size: var(--fs-small); word-break: break-all; }
.dl dd.plain { font-family: var(--font-ui); }
.dl dd .meta { display: block; margin-top: var(--s-1); }
.dl--tight .row { grid-template-columns: 150px minmax(0, 1fr); padding: var(--s-2) 0; }
@media (max-width: 640px) {
  .dl .row, .dl--tight .row { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* --------------------------------------------------------------------------
   8. Code chip + copy button
   -------------------------------------------------------------------------- */

.code-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 3px var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink);
  max-width: 100%; word-break: break-all;
}
.copy-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--rule); background: var(--surface);
  border-radius: var(--r-sm); padding: 2px var(--s-2); cursor: pointer;
  font: var(--fw-med) var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--ink-2);
}
.copy-btn:hover { border-color: var(--rule-strong); color: var(--ink); background: var(--surface-alt); }
.copy-btn[data-copied="true"] { color: var(--ok); border-color: var(--ok); }

/* Record table — the one or two records the customer has to add. */
.record-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.record-table th {
  text-align: left; background: var(--surface-alt); color: var(--ink-2);
  font-size: var(--fs-meta); font-weight: var(--fw-med);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.record-table td {
  padding: var(--s-3); border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); vertical-align: top; word-break: break-all;
}
.record-table td.plain { font-family: var(--font-ui); }
.record-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: var(--r-md); border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink);
  font: var(--fw-med) var(--fs-body)/1 var(--font-ui);
  padding: var(--s-2) var(--s-4); min-height: 30px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-alt); }
.btn svg { width: 15px; height: 15px; stroke-width: 1.5; flex: 0 0 auto; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.md { padding: var(--s-2) var(--s-4); min-height: 32px; }
.btn.sm { padding: var(--s-1) var(--s-3); min-height: 26px; font-size: var(--fs-small); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--surface-alt); color: var(--ink); }
.btn.danger { color: var(--warn); border-color: var(--rule); }
.btn.danger:hover { background: var(--warn-quiet); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; background: var(--surface-alt);
  color: var(--ink-3); border-color: var(--rule);
}
.btn.primary[disabled], .btn.primary[aria-disabled="true"] {
  background: var(--surface-alt); border-color: var(--rule); color: var(--ink-3);
}
.btn-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* Why a control is unavailable — never leave it to the disabled state alone. */
.btn-reason { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   10. Chips, pills, status dot
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: 1px var(--s-2); background: var(--surface);
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-med); color: var(--ink-2);
}
.chip--recommended { border-color: var(--ok); color: var(--ok-deep); background: var(--ok-quiet); }
.chip--servername { border-color: var(--accent); color: var(--accent); background: var(--accent-quiet); }
.chip--warn { border-color: var(--warn); color: var(--warn); background: var(--warn-quiet); }
.chip--brand { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-quiet); }
.chip--proposed { border-color: var(--proposed-rule); color: var(--proposed-rule); background: var(--accent-quiet); }

/* Status: coloured dot PLUS the word. The word is the meaning; the dot only
   repeats it. Colour is never the sole carrier. */
.status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink); }
.status__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--ink-3); flex: 0 0 auto; }
.status__dot--ok { background: var(--ok); }
.status__dot--warn { background: var(--warn); }
.status__dot--wait { background: var(--brand); }
.status__dot--neutral { background: var(--ink-3); }
.status__word { font-weight: var(--fw-med); }
.status--lg { font-size: var(--fs-body); }
.status--lg .status__dot { width: 9px; height: 9px; }

/* --------------------------------------------------------------------------
   11. Provenance label — one of exactly four, everywhere
   -------------------------------------------------------------------------- */

.prov {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2);
}
.prov::before {
  content: ""; width: 5px; height: 5px; border-radius: var(--r-pill);
  background: var(--ink-3); flex: 0 0 auto;
}
.prov[data-prov="told"]::before { background: var(--accent); }
.prov[data-prov="checked"]::before { background: var(--ok); }
.prov[data-prov="operator"]::before { background: var(--brand); }
.prov[data-prov="waiting"]::before { background: var(--ink-3); }
.prov--block { display: flex; margin-top: var(--s-1); }

/* --------------------------------------------------------------------------
   12. Timeline
   -------------------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--s-4); padding: var(--s-3) 0; margin: 0;
}
.timeline__item + .timeline__item { border-top: 1px solid var(--rule); }
/* The times are the evidence the whole provenance argument rests on, so they
   are not allowed to be the least readable text on the page. --ink-3 measured
   3.02:1; --ink-2 is 5.01:1 on --surface and 4.83:1 on --bg. */
.timeline__when { font-size: var(--fs-meta); color: var(--ink-2); font-family: var(--font-mono); padding-top: 2px; }
.timeline__text { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); }
.timeline__sim { color: var(--ink-2); }
@media (max-width: 640px) { .timeline__item { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Every timeline entry tagged 'checked' was produced by the proposed
   public-DNS check and by nothing else. With the study bar's Proposed outline
   switched off, lines like "Rechecked public DNS" would otherwise read as
   accomplished fact, so the entry says so itself. One rule, both portals, no
   markup change: the client renders .prov inside .timeline__text and ops wraps
   the same element in .meta. */
.timeline__text .prov[data-prov="checked"]::after {
  content: "· from the proposed public-DNS check";
  color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   13. Ops data table
   -------------------------------------------------------------------------- */

.table-intro { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s-3); }
.filter-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.filter-chip {
  border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-pill);
  padding: 2px var(--s-3); cursor: pointer;
  font: var(--fw-med) var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--ink-2);
}
.filter-chip:hover { background: var(--surface-alt); color: var(--ink); }
.filter-chip[aria-pressed="true"] { background: var(--ink-heading); border-color: var(--ink-heading); color: #fff; }

.table-wrap { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.data-table thead th {
  background: var(--surface-alt); text-align: left;
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-med); color: var(--ink-2);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.data-table tbody td {
  padding: var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-alt); }
.data-table td.mono, .data-table td .mono { font-family: var(--font-mono); }
.data-table td.empty-cell { color: var(--ink-2); }  /* an absence is meaning, not decoration: 5.01:1 */

.sort-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: var(--fw-med) var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--ink-2);
}
.sort-btn:hover { color: var(--ink); }
.sort-btn .sort-affordance { color: var(--ink-3); font-size: 10px; }
.sort-btn[aria-sort="ascending"] .sort-affordance,
.sort-btn[aria-sort="descending"] .sort-affordance { color: var(--ink); }

/* A footnote below the table explaining how to read an absence. */
.table-foot { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   14. Ops hint dot — circled i, keyboard reachable, text duplicated for SR
   -------------------------------------------------------------------------- */

.hint {
  position: relative; display: inline-grid; place-items: center;
  width: 13px; height: 13px; border-radius: var(--r-pill);
  border: 1px solid var(--ink-3); color: var(--ink-2);
  font-size: 9px; font-weight: var(--fw-bold); line-height: 1;
  background: var(--surface); cursor: help; vertical-align: middle;
  margin-left: 4px;
}
.hint::after { content: "i"; font-family: var(--font-ui); }
.hint:hover, .hint:focus-visible { border-color: var(--ink-2); color: var(--ink); }
.hint::before {
  content: attr(data-hint);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 280px;
  background: var(--ink-strong); color: #fff;
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-normal);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  text-align: left; white-space: normal;
}
.hint:hover::before, .hint:focus-visible::before { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   15. Empty states — a full sentence, never "No data"
   -------------------------------------------------------------------------- */

.empty {
  padding: var(--s-6) var(--s-5); text-align: left;
  color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small);
}
.empty__title { font-size: var(--fs-body); font-weight: var(--fw-med); color: var(--ink-heading); margin-bottom: var(--s-2); }
.empty__action { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   16. Form fields
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field + .field { margin-top: var(--s-4); }
.field__label { font-size: var(--fs-meta); font-weight: var(--fw-med); color: var(--ink-2); }
.field__help { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3); color: var(--ink);
  font: var(--fw-normal) var(--fs-body)/var(--lh-body) var(--font-ui);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--rule-strong); }
.textarea { min-height: 76px; resize: vertical; }
.input.mono { font-family: var(--font-mono); font-size: var(--fs-small); }

/* Radio and checkbox rows read as one tappable row with a full sentence. */
.choice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); cursor: pointer; background: var(--surface);
}
.choice + .choice { margin-top: var(--s-2); }
.choice:hover { border-color: var(--rule-strong); background: var(--surface-alt); }
.choice input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--brand); }
.choice__text { min-width: 0; }
.choice__title { font-size: var(--fs-body); color: var(--ink); }
.choice__desc { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); margin-top: 2px; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-quiet); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   17. Study apparatus — deliberately NOT product chrome
   -------------------------------------------------------------------------- */

.studybar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: var(--study-bg); color: var(--study-ink);
  font-family: var(--font-ui); font-size: var(--fs-meta); line-height: var(--lh-meta);
  border-bottom: 2px solid var(--proposed-rule);
}
.studybar__inner { padding: var(--s-2) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.studybar__row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.studybar__row--top { justify-content: space-between; }
.studybar__disclaimer { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.studybar__tag {
  background: var(--proposed-rule); color: #fff; border-radius: var(--r-sm);
  padding: 1px var(--s-2); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 10px;
}
.studybar__disclaimer-text { color: var(--study-ink-2); }
.studybar__disclaimer-text strong { color: var(--study-ink); font-weight: var(--fw-med); }
.studybar__group { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.studybar__label { color: var(--study-ink-2); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; font-weight: var(--fw-med); }
.studybar__divider { width: 1px; align-self: stretch; min-height: 16px; background: var(--study-rule); }

.studybar a { color: var(--study-accent); text-decoration: none; }
.studybar a:hover { text-decoration: underline; }
.studybar a[aria-current="page"] { color: var(--study-ink); font-weight: var(--fw-med); }

.studybar__btn {
  border: 1px solid var(--study-rule); background: transparent; color: var(--study-ink);
  border-radius: var(--r-sm); padding: 2px var(--s-2); cursor: pointer;
  font: var(--fw-med) var(--fs-meta)/var(--lh-meta) var(--font-ui);
}
.studybar__btn:hover { background: #1C222C; }
.studybar__btn[aria-pressed="true"] { background: var(--proposed-rule); border-color: var(--proposed-rule); color: #fff; }
.studybar__toggle { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.studybar__toggle input { accent-color: var(--proposed-rule); margin: 0; }
.studybar :focus-visible { outline: 2px solid var(--study-accent); outline-offset: 2px; }

.studybar__legend { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: 0; }
.studybar__legend .prov { color: var(--study-ink-2); }
.studybar__state { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--study-ink); }
.studybar__state .status__dot { width: 7px; height: 7px; }

/* The proposed-region outline. Off when the class is absent. */
html.show-proposed [data-basis="proposed"] {
  outline: 1px dashed var(--proposed-rule);
  outline-offset: 3px;
  position: relative;
}
html.show-proposed [data-basis="proposed"]::before {
  content: "Proposed";
  position: absolute; top: -9px; right: var(--s-3); z-index: 5;
  background: var(--proposed-tag-bg); color: var(--proposed-tag-ink);
  font: var(--fw-bold) 9px/1.4 var(--font-ui);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: var(--r-sm); pointer-events: none;
}
/* Nested proposed regions would stack tags. Only tag the outermost. */
html.show-proposed [data-basis="proposed"] [data-basis="proposed"]::before { display: none; }
/* Opt out per element where the corner tag would collide with content. */
html.show-proposed [data-basis="proposed"][data-basis-tag="off"]::before { display: none; }

@media print { .studybar { display: none; } body { padding-top: 0; } }

/* --------------------------------------------------------------------------
   18. Study landing page (index.html only)
   -------------------------------------------------------------------------- */

.study-page { max-width: 780px; margin: 0 auto; padding: var(--s-7) var(--s-5) 80px; }
.study-page h1 { font-size: var(--fs-title); line-height: var(--lh-title); color: var(--ink-strong); }
.study-page h2 { font-size: var(--fs-card); line-height: var(--lh-card); margin-top: var(--s-6); }
.study-page .lede { font-size: var(--fs-sub); line-height: 21px; color: var(--ink-2); margin-top: var(--s-3); }
.study-page .card + .card { margin-top: var(--s-4); }
.study-page ul { padding-left: var(--s-6); }
.portal-links { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.portal-link {
  flex: 1 1 260px; display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow);
}
.portal-link:hover { border-color: var(--rule-strong); background: var(--surface-alt); }
.portal-link__title { font-size: var(--fs-body); font-weight: var(--fw-med); color: var(--brand-deep); }
.portal-link__desc { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); margin-top: var(--s-1); }