/* FarnorID design system, M4 "calm ledger" (Iris m4-spec §1–§4, built by Remy).
   Tokens first, then buttons, header, page frame, sheets, and the older components kept for un-migrated screens. */
:root {
  /* surfaces */
  --bg: #F6F4EE; --surface: #FFFFFF; --surface-sunk: #F0EDE5;
  --border: #E4E0D6; --border-strong: #CFC9BB;
  /* text */
  --text: #1B1F24; --text-2: #4D545C; --text-3: #5F656C;
  /* brand */
  --basalt: #1B1F24; --on-basalt: #F6F4EE; --on-basalt-2: #B7BCC2;
  --fjord: #1F5C7A; --fjord-hover: #174A62; --fjord-tint: #E8F0F4;
  --brass: #B08A3E; --brass-tint: #F4EDDF;
  /* status */
  --success: #1D6B3A; --success-bg: #E5F1E8;
  --warning: #8A5800; --warning-bg: #F7EEDA;
  --danger: #B42318; --danger-bg: #FBE9E7;
  --neutral: #4D545C; --neutral-bg: #EDEBE5;
  /* type */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-display: 600 28px/34px var(--font);
  --t-title: 600 20px/28px var(--font);
  --t-heading: 600 15px/22px var(--font);
  --t-body: 400 15px/22px var(--font);
  --t-small: 400 13px/18px var(--font);
  --t-label: 600 12px/16px var(--font);
  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;
  /* shape */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(27,31,36,.06);
  --shadow-pop: 0 8px 28px rgba(27,31,36,.16), 0 1px 3px rgba(27,31,36,.08);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--fjord);
  --page: 960px;

  /* aliases for screens not yet migrated (remove once U7 is done) */
  --action: var(--fjord); --action-hover: var(--fjord-hover); --on-action: #FFFFFF; --on-fjord: #FFFFFF;
  --surface-2: var(--surface-sunk); --text-muted: var(--text-2);
  --r-control: var(--r-md); --r-card: var(--r-lg);
  --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--t-body); -webkit-font-smoothing: antialiased; }
h1 { font: var(--t-display); letter-spacing: -.015em; margin: 0 0 var(--s4); }
h2 { font: var(--t-title); letter-spacing: -.01em; margin: 0 0 var(--s3); }
h3 { font: var(--t-heading); margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s3); }
a { color: var(--fjord); }
time, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font: var(--t-small); }
.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.icon { flex: none; vertical-align: middle; }

/* ---------- Layout ---------- */
.container { max-width: var(--page); margin: 0 auto; padding: var(--s7) var(--s6) var(--s6); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
@media (max-width: 639px) { .container { padding: var(--s6) var(--s4) var(--s5); } }

.page-head { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.page-head > div:first-child { flex: 1; min-width: 220px; }
.page-head h1 { margin: 0; }
.page-head .subtitle { margin: var(--s1) 0 0; color: var(--text-2); }
main.container > .page-head + * { margin-top: 0; }

/* ---------- Header (dark Basalt, brand carrier) ---------- */
.topbar { background: var(--basalt); color: var(--on-basalt); position: relative; z-index: 20; }
.topbar-inner { max-width: var(--page); margin: 0 auto; padding: 0 var(--s6); display: flex; align-items: center; gap: var(--s7); height: 60px; }
.brand { display: flex; align-items: center; gap: var(--s2); font: 600 16px/1 var(--font); letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.topbar .brand { color: var(--on-basalt); }
.nav { display: flex; gap: var(--s1); align-self: stretch; }
.nav a { display: inline-flex; align-items: center; padding: 0 var(--s3); font: 500 14px/1 var(--font); color: var(--on-basalt-2); text-decoration: none; position: relative; transition: color .12s ease-out; }
.nav a:hover { color: var(--on-basalt); }
.nav a[aria-current="page"] { color: var(--on-basalt); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 0; height: 2px; background: var(--brass); }
.topbar :focus-visible { box-shadow: 0 0 0 2px var(--basalt), 0 0 0 4px var(--on-basalt); }
.topbar .menu { margin-left: auto; }
@media (max-width: 639px) {
  .topbar-inner { padding: 0 var(--s4); gap: var(--s3); flex-wrap: wrap; height: auto; min-height: 56px; }
  .nav { order: 3; width: 100%; height: 44px; margin: 0 calc(var(--s4) * -1); width: calc(100% + var(--s4) * 2); border-top: 1px solid rgba(255,255,255,.1); }
  .nav a { flex: 1; justify-content: center; }
  .nav a[aria-current="page"]::after { left: var(--s4); right: var(--s4); }
}

/* ---------- Menu (details/summary disclosure; menu.js adds Esc + outside click) ---------- */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-trigger { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s2) 0 var(--s1); border-radius: var(--r-pill); color: var(--on-basalt); font: 500 14px/1 var(--font); transition: background-color .12s ease-out; }
.menu-trigger:hover, .menu[open] > .menu-trigger { background: rgba(255,255,255,.08); }
.menu-trigger .chev, .menu-trigger .icon { color: var(--on-basalt-2); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 280px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--s2); z-index: 30; }
.menu-who { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s3); margin: 0 0 var(--s2); border-bottom: 1px solid var(--border); min-width: 0; }
.menu-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.menu-who strong { font: var(--t-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-who small { font: var(--t-small); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-sep { border-top: 1px solid var(--border); margin: var(--s2) 0; }
.menu-item { display: flex; align-items: center; gap: var(--s3); width: 100%; height: 36px; padding: 0 var(--s2); border: 0; border-radius: var(--r-sm); background: none; font: 400 14px/1 var(--font); color: var(--text); text-decoration: none; text-align: left; cursor: pointer; transition: background-color .12s ease-out; }
.menu-item .icon { color: var(--text-2); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-sunk); }
.menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--fjord); border-radius: var(--r-sm); }
.menu-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .icon { color: var(--danger); }
.menu-note { font: var(--t-small); color: var(--text-3); padding: 0 var(--s2) var(--s2); margin: 0; }
.topbar .menu-panel :focus-visible { box-shadow: inset 0 0 0 2px var(--fjord); }
@media (max-width: 639px) { .menu-trigger .menu-first { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ---------- Avatar ---------- */
.avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; object-fit: cover; background: var(--brass-tint); color: var(--text-2); display: inline-grid; place-items: center; font: 600 18px/1 var(--font); border: 1px solid var(--border); }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border-radius: var(--r-md); font: 600 14px/1 var(--font); cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); text-decoration: none; white-space: nowrap; transition: background-color .12s ease-out, box-shadow .12s ease-out, color .12s ease-out; }
.btn:hover { background: var(--surface-sunk); }
.btn:active { background: #E8E4DA; }
.btn-primary { background: var(--fjord); border-color: var(--fjord); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(27,31,36,.2); }
.btn-primary:hover { background: var(--fjord-hover); border-color: var(--fjord-hover); }
.btn-primary:active { background: #12394d; }
.btn-ghost, .btn-link { border-color: transparent; background: transparent; color: var(--fjord); text-decoration: none; padding: 0 var(--s3); }
.btn-ghost:hover, .btn-link:hover { background: var(--fjord-tint); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #961d13; border-color: #961d13; }
.btn-danger-ghost { border-color: transparent; background: transparent; color: var(--danger); padding: 0 var(--s3); }
.btn-danger-ghost:hover { background: var(--danger-bg); }
.btn-danger-outline { color: var(--danger); border-color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger-bg); }
.btn-sm { height: 36px; padding: 0 var(--s3); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-color: transparent; background: transparent; color: var(--text-2); }
.btn-icon:hover { background: var(--surface-sunk); color: var(--text); }
.btn-secondary { }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--surface); }
.btn-primary[disabled]:hover, .btn-primary[aria-disabled="true"]:hover { background: var(--fjord); }
.btn-block { width: 100%; }
@media (max-width: 639px) { .btn, .btn-sm { min-height: 44px; height: auto; } .btn-icon { width: 44px; height: 44px; } }

/* ---------- Sheets and rows ---------- */
.sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.sheet-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); }
.sheet-head h3 { margin: 0; flex: 1; }
.sheet-foot { padding: var(--s2) var(--s5); border-top: 1px solid var(--border); display: flex; gap: var(--s2); justify-content: flex-end; }
.srow { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); min-height: 60px; }
.srow > .srow-label { font: var(--t-small); color: var(--text-2); }
.srow > .srow-value { min-width: 0; overflow-wrap: anywhere; }
.irow { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); min-height: 64px; }
.srow + .srow::before, .irow + .irow::before, .sheet-head + .irow::before, .sheet-head + .srow::before, .srow + .irow::before, .irow + .srow::before { content: ""; position: absolute; top: 0; left: var(--s5); right: 0; border-top: 1px solid var(--border); }
.irow-main { min-width: 0; }
.irow-title { font: var(--t-heading); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.irow-meta { font: var(--t-small); color: var(--text-3); margin-top: 2px; }
.irow-meta .sep { margin: 0 var(--s1); }
.well { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--surface-sunk); color: var(--text-2); display: grid; place-items: center; flex: none; }
.well-lg { width: 40px; height: 40px; border-radius: 10px; font-weight: 700; }
.actions { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.note { font: var(--t-small); color: var(--text-3); margin: var(--s3) 0 0; }
@media (max-width: 639px) {
  .srow { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: var(--s4); }
  .srow > .srow-label { grid-column: 1 / -1; }
  .irow { padding: var(--s4); gap: var(--s3); grid-template-columns: 32px minmax(0, 1fr) auto; }
  .sheet-head { padding: var(--s4); }
  .srow + .srow::before, .irow + .irow::before, .sheet-head + .irow::before, .sheet-head + .srow::before, .srow + .irow::before, .irow + .srow::before { left: var(--s4); }
}

/* Settings layout: intro left, sheet right */
.settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s7); }
main.container > .settings + .settings { margin-top: var(--s8); }
.settings-intro h2 { font: var(--t-heading); letter-spacing: 0; margin: 0 0 var(--s1); }
.settings-intro p { font: var(--t-small); color: var(--text-3); margin: 0; }
.settings-body > * + * { margin-top: var(--s3); }
@media (max-width: 759px) { .settings { grid-template-columns: 1fr; gap: var(--s3); } main.container > .settings + .settings { margin-top: var(--s7); } }

/* Pills (status) */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); font: 600 12px/18px var(--font); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-success { color: var(--success); background: var(--success-bg); }
.status-warning { color: var(--warning); background: var(--warning-bg); }
.status-danger { color: var(--danger); background: var(--danger-bg); }
.status-neutral { color: var(--neutral); background: var(--neutral-bg); }
.status-warning::before { border-radius: 1px; transform: rotate(45deg); }
.status-danger::before { border-radius: 1px; }
.status-neutral::before { background: transparent; border: 2px solid currentColor; }
.pill { display: inline-flex; align-items: center; padding: 0 8px; height: 20px; border-radius: var(--r-pill); font: 600 12px/20px var(--font); background: var(--neutral-bg); color: var(--neutral); }
.pill-warning { background: var(--warning-bg); color: var(--warning); }
.pill-success { background: var(--success-bg); color: var(--success); }

/* Fields */
.field { display: flex; flex-direction: column; gap: var(--s1); font: var(--t-label); letter-spacing: .02em; color: var(--text-2); }
.field input, .field select, .field textarea { font: var(--t-body); color: var(--text); height: 40px; padding: 0 var(--s3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); width: 100%; }
.field input:hover, .field select:hover { border-color: var(--text-3); }
.field textarea { height: auto; padding: var(--s2) var(--s3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: var(--focus); border-color: var(--fjord); }
.field-error { color: var(--danger); font: 600 13px/18px var(--font); display: flex; gap: 6px; align-items: baseline; margin: var(--s1) 0 0; }
.field-error::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.field [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.error-summary { border: 2px solid var(--danger); background: var(--danger-bg); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.error-summary ul { margin: var(--s2) 0 0; padding-left: var(--s6); }
.inline-form { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 220px; min-width: 0; }
@media (max-width: 639px) { .field input, .field select { height: 44px; } }

/* Banners */
.banner { padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid; font: var(--t-body); margin-bottom: var(--s4); }
.banner-info { background: var(--fjord-tint); border-color: #C5D8E2; }
.banner-warning { background: var(--warning-bg); border-color: #E3CD9C; color: #5c3b00; }
.banner-error { background: var(--danger-bg); border-color: #EBB9B4; color: #7a1a12; }
.banner-success { background: var(--success-bg); border-color: #B8D9C2; }

/* ---------- Components kept for screens not yet migrated ---------- */
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--s7) var(--s4); }
.auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); margin-top: var(--s6); }
.auth-foot { margin-top: var(--s4); font: var(--t-small); color: var(--text-3); text-align: center; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); }
.panel-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s4); align-items: start; }
@media (max-width: 959px) { .panel-layout { grid-template-columns: 1fr; } }
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.list > li { padding: var(--s3) var(--s4); border-top: 1px solid var(--border); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.list > li:first-child { border-top: 0; }
.list > li[aria-selected="true"], .list > li[aria-current="true"] { background: var(--surface-sunk); box-shadow: inset 3px 0 0 var(--fjord); }
.app-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-sunk); display: grid; place-items: center; font-weight: 700; color: var(--text-2); flex: none; }
.item-main { flex: 1; min-width: 180px; }
.item-title { font: var(--t-heading); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; }
.dl dt { color: var(--text-2); }
.dl dd { margin: 0; }
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: end; }
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border); margin-bottom: var(--s4); }
.tabs a { padding: var(--s2) var(--s3); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--text-2); }
.tabs a[aria-current="page"] { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--fjord); }
.boundaries { background: var(--surface-sunk); border-radius: var(--r-md); padding: var(--s3) var(--s4); font: var(--t-small); }
.dialog { max-width: 480px; width: calc(100% - 32px); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); background: var(--surface); color: var(--text); }
.dialog::backdrop { background: rgba(27, 31, 36, .45); }
.checklist { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.checklist li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--border); }
.checklist li:first-child { border-top: 0; }
.checklist li::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); font-weight: 700; font-size: 13px; }
.copy-field { display: flex; gap: var(--s2); align-items: center; }
.copy-field code { flex: 1; min-width: 0; padding: var(--s2) var(--s3); background: var(--surface-sunk); border-radius: var(--r-md); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
details > summary { cursor: pointer; }
.empty { text-align: center; padding: var(--s8) var(--s4); color: var(--text-2); }
.skeleton { background: linear-gradient(90deg, var(--surface-sunk), var(--surface), var(--surface-sunk)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-md); height: 16px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.segmented a { height: 38px; padding: 0 var(--s3); display: inline-flex; align-items: center; text-decoration: none; color: var(--text-2); font: 600 13px/1 var(--font); }
.segmented a + a { border-left: 1px solid var(--border-strong); }
.segmented a[aria-current="page"] { background: var(--fjord); color: #fff; }
.event-summary { cursor: pointer; }
.event-summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: var(--s2); border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform .12s; }
details[open] > .event-summary::after { transform: rotate(45deg); }
.field textarea { font: inherit; }
a.sr-only:focus, a.sr-only:focus-visible { position: fixed; top: var(--s2); left: var(--s2); width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; z-index: 100; padding: var(--s2) var(--s4); background: var(--surface); color: var(--fjord); border-radius: var(--r-md); box-shadow: var(--focus); }
@media (max-width: 639px) {
  .event-summary { flex-wrap: wrap; }
  .event-summary .item-main { flex-basis: calc(100% - 24px); }
  .list > li .status { white-space: normal; }
}
.footer { max-width: var(--page); margin: 0 auto; padding: var(--s9) var(--s6) var(--s7); font: var(--t-small); color: var(--text-3); }
.footer a { color: var(--text-3); text-decoration: none; }
.footer a:hover { color: var(--text); text-decoration: underline; }
.footer .sep { margin: 0 var(--s2); }
@media (max-width: 639px) { .footer { padding: var(--s8) var(--s4) var(--s6); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.menu-item-dark { width: auto; color: var(--on-basalt); }
.menu-item-dark:hover { background: rgba(255,255,255,.08); }

/* ---------- Settings rows: view/edit states ---------- */
.edit-form { display: none; grid-column: 2 / -1; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.edit-form .field { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.edit-actions { display: flex; gap: var(--s1); align-items: center; }
.is-editing > .view, .is-editing .irow-main > .view { display: none; }
.is-editing > .edit-form, .is-editing .irow-main > .edit-form { display: flex; }
.irow .edit-form { grid-column: auto; }
.irow.is-editing > .view { display: none; }
.add-row { display: none; }
.add-row.is-editing { display: grid; }
.add-row .banner { margin: var(--s2) 0 0; }
.add-row .inline-form { margin-top: var(--s3); }
.photo-value { display: flex; align-items: center; gap: var(--s4); }
.photo-hint { max-width: 32ch; }
.photo-form { display: flex; align-items: center; gap: var(--s1); }
.photo-form .photo-save, .photo-form .photo-cancel { display: none; }
.photo-form.has-file .photo-save, .photo-form.has-file .photo-cancel { display: inline-flex; }
.photo-form.has-file .file-btn { display: none; }
.photo-row:not(.is-editing) .photo-form:not(.has-file) .photo-save { display: none; }
.file-btn:focus-within { box-shadow: var(--focus); }
.js .photo-form .photo-save { display: none; }
.js .photo-form.has-file .photo-save, .js .photo-form.has-file .photo-cancel { display: inline-flex; }
html:not(.js) .photo-form .photo-save { display: inline-flex; }
.row-menu > summary { display: inline-flex; }
.row-menu .menu-panel { width: 240px; }
.row-menu .menu-panel { z-index: 15; }
.irow-title .pill { font-weight: 600; }
.sheet .menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--fjord); }
@media (max-width: 639px) { .edit-form { grid-column: 1 / -1; } .photo-value { flex-direction: row; } .irow .actions { grid-column: 2 / -1; justify-content: flex-start; } }
@media (max-width: 639px) {
  .irow > form, .irow > .actions, .irow > a.btn { grid-column: 2 / -1; justify-self: start; margin-left: calc(var(--s3) * -1); }
  .irow > form .btn-secondary, .irow > form .btn:not(.btn-ghost):not(.btn-danger-ghost) { margin-left: var(--s3); }
  .irow > .row-menu { grid-column: 3; grid-row: 1; }
}

/* ---------- Apps ---------- */
.seg-lg { margin-bottom: var(--s6); }
.seg-lg a { height: 40px; padding: 0 var(--s4); gap: var(--s2); }
.seg-lg .count { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 600; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.app-tile { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); transition: box-shadow .12s ease-out, border-color .12s ease-out; }
.app-tile:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(27,31,36,.1); }
.tile-top { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.tile-id { min-width: 0; }
.tile-link { font: var(--t-heading); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.tile-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.tile-link:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }
.app-tile:has(.tile-link:focus-visible) { border-color: var(--fjord); }
.tile-link, .tile-host { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); min-width: 0; }
.tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s1); }
.tile-open { position: relative; z-index: 1; }
.tile-actions { display: flex; gap: var(--s1); align-items: center; flex: none; }
.back-btn { margin: 0 0 var(--s4) calc(var(--s3) * -1); }
.detail-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s7); }
.detail-head .app-logo { width: 56px; height: 56px; border-radius: 14px; font-size: 22px; }
.detail-id { flex: 1; min-width: 200px; }
.detail-id h1 { margin: 0; }
.detail-id .subtitle { margin: var(--s1) 0 0; color: var(--text-2); }
.detail-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.recent-row .outcome { align-items: flex-end; }

/* Empty states */
.empty-sheet { max-width: 560px; margin: var(--s7) auto 0; padding: var(--s8) var(--s7); text-align: center; }
.empty-sheet h2 { margin-bottom: var(--s2); }
.empty-sheet p { color: var(--text-2); max-width: 44ch; margin-left: auto; margin-right: auto; }
.empty-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--brass-tint); display: inline-grid; place-items: center; margin-bottom: var(--s4); }
.empty-mark svg { width: 32px; height: 32px; }
.demo-box { margin: var(--s6) 0 var(--s4); text-align: left; background: var(--surface-sunk); border-radius: var(--r-lg); padding: var(--s4); }
.demo-box h3 { font: var(--t-label); letter-spacing: .02em; color: var(--text-2); margin: 0 0 var(--s2); }
.demo-box ul { list-style: none; margin: 0; padding: 0; }
.demo-box li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; }
.demo-box li + li { border-top: 1px solid var(--border); }
.demo-id { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sample-label { margin: var(--s5) 0 var(--s2); }
.sample-btn { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s4) 0 var(--s2); border-radius: var(--r-md); background: var(--fjord); color: #fff; font: 600 14px/1 var(--font); }
.sample-btn svg { width: 24px; height: 24px; }
@media (max-width: 639px) { .empty-sheet { padding: var(--s7) var(--s5); } .seg-lg { display: flex; } .seg-lg a { flex: 1; justify-content: center; } }
.head-text { flex: 1; min-width: 0; }
.head-text h3 { margin: 0; }
.head-text p { margin: 2px 0 0; }
.menu-who small { white-space: nowrap; }
.menu-who > span:last-child { overflow: hidden; }

/* ---------- History ---------- */
.export-menu > summary { display: inline-flex; }
.export-menu .menu-panel { width: 240px; }
.filter-bar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.filter-bar .segmented a { height: 40px; }
.filter-bar .filters { flex: 1; display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.select-field { min-width: 0; }
.field select { appearance: none; -webkit-appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234D545C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; padding-right: var(--s7); }
.select-field select { appearance: none; -webkit-appearance: none; width: 148px; padding-right: var(--s7); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234D545C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; text-overflow: ellipsis; cursor: pointer; }
.filters .field input[type=date] { height: 40px; width: auto; min-width: 0; }
.filters .field { flex-direction: column; }
.filters .field:not(.select-field) { flex-direction: row; align-items: center; gap: var(--s2); }
.filters .field:not(.select-field) input { min-width: 0; }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s4); }
.chip { display: inline-flex; align-items: center; gap: var(--s1); height: 28px; padding: 0 var(--s2) 0 var(--s3); border-radius: var(--r-pill); background: var(--fjord-tint); color: var(--fjord); font: 600 13px/1 var(--font); text-decoration: none; transition: background-color .12s ease-out; }
.chip:hover { background: #D9E7EE; }
.history-sheet { overflow: hidden; }
.day-group + .day-group { border-top: 1px solid var(--border); }
.day-label { margin: 0; padding: var(--s2) var(--s5); background: var(--surface-sunk); font: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.history-sheet .list { border: 0; border-radius: 0; background: none; }
.history-sheet .list > li.event { display: block; padding: 0; border-top: 1px solid var(--border); }
.history-sheet .list > li.event:first-child { border-top: 0; }
.event > details > summary.event-summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto 8px; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); list-style: none; width: 100%; color: inherit; cursor: pointer; transition: background-color .12s ease-out; }
.event > details > summary.event-summary::-webkit-details-marker { display: none; }
.event > details > summary.event-summary::after { margin-left: 0; }
.event > details > summary.event-summary:hover { background: #FAF9F5; }
.event-summary .item-main { display: flex; flex-direction: column; min-width: 0; flex: none; }
.event-summary .item-title { font: var(--t-heading); }
.event-summary .muted, .event-meta { color: var(--text-3); display: block; }
.event-summary .outcome { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); text-align: right; }
.event-summary .outcome .hint { max-width: 26ch; color: var(--text-3); }
.event-time { color: var(--text-2); font-variant-numeric: tabular-nums; font: 400 13px/18px var(--font); min-width: 64px; text-align: right; }
.well-lg.brand-well { background: var(--basalt); }
.brand-well svg { width: 24px; height: 24px; }
.event .event-detail { margin: 0; padding: var(--s4) var(--s5) var(--s5) calc(var(--s5) + 40px + var(--s4)); background: var(--surface-sunk); border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.event-detail .dl { grid-template-columns: 110px 1fr; }
.event-detail .tech > summary { min-height: 32px; font-size: 13px; }
.event-detail .detail-actions { justify-content: flex-start; margin-left: calc(var(--s3) * -1); }
.load-more { display: flex; justify-content: center; margin-top: var(--s5); }
.foot-note { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s6); }
.foot-note .icon { flex: none; }
@media (max-width: 639px) {
  .filter-bar .filters { justify-content: flex-start; width: 100%; }
  .filter-bar .segmented { width: 100%; overflow-x: auto; }
  .filter-bar .segmented a { flex: 1; justify-content: center; padding: 0 var(--s2); }
  .select-field { flex: 1 1 140px; } .select-field select { width: 100%; }
  .event > details > summary.event-summary { grid-template-columns: 40px minmax(0, 1fr) auto; padding: var(--s4); gap: var(--s3); }
  .event-summary .outcome { grid-column: 2 / -1; grid-row: 2; align-items: flex-start; text-align: left; }
  .event-time { grid-column: 3; grid-row: 1; min-width: 0; }
  .event-summary::after { display: none; }
  .event .event-detail { padding: var(--s4); }
  .day-label { padding: var(--s2) var(--s4); }
}
.segmented a { white-space: nowrap; }

/* ---------- Auth shell (sign-in, consent, sign-up, recovery) ---------- */
.auth-shell { background: var(--bg); padding: var(--s8) var(--s4) var(--s7); }
.auth-brand { display: flex; justify-content: center; margin-bottom: var(--s7); }
.auth-brand .brand { font-size: 18px; gap: var(--s3); }
.auth-brand svg { width: 40px; height: 40px; }
.auth-card { max-width: 420px; background: var(--surface); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: var(--s7); margin-top: 0; }
.auth-card > * + * { margin-top: var(--s4); }
.auth-card h1 { font: var(--t-title); letter-spacing: -.015em; margin: 0; text-align: center; }
.auth-card .lede { color: var(--text-2); text-align: center; margin: var(--s2) 0 var(--s5); }
.auth-card .small.faint, .auth-card p.small.muted { text-align: center; }
.auth-card .btn-block { height: 44px; }
.auth-card .field { gap: var(--s2); }
.auth-card .field input { height: 44px; }
.form-stack { display: grid; gap: var(--s4); }
.auth-alt { display: flex; justify-content: center; gap: var(--s2); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--s4); margin-top: var(--s5); }
.auth-card form.auth-alt { border-top: 0; margin-top: var(--s2); padding-top: 0; }
.auth-card .auth-alt + .auth-alt { border-top: 0; padding-top: 0; margin-top: var(--s1); }
.auth-foot a { color: var(--text-3); text-decoration: none; }
.auth-foot a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 639px) { .auth-shell { padding: var(--s6) var(--s4); } .auth-card { padding: var(--s6); } .auth-brand { margin-bottom: var(--s6); } }
.app-chip { display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.app-chip .app-logo { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }

.steps { list-style: none; display: flex; justify-content: center; gap: var(--s4); margin: 0 0 var(--s5); padding: 0; font: var(--t-small); color: var(--text-3); }
.steps li { display: inline-flex; align-items: center; gap: var(--s2); }
.steps .step-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); font: 600 12px/1 var(--font); }
.steps li[aria-current="step"] { color: var(--fjord); font-weight: 600; }
.steps li[aria-current="step"] .step-n { background: var(--fjord); color: #fff; }

.codes { list-style: none; margin: var(--s5) 0 0; padding: var(--s4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); background: var(--surface-sunk); border-radius: var(--r-lg); font: 500 14px/22px var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
.code-actions { justify-content: center; }
.check-row { display: flex; align-items: center; gap: var(--s3); font: var(--t-body); min-height: 44px; }

.consent-logos { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.app-logo-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; }
.brand-logo { background: transparent; }
.brand-logo svg { width: 48px; height: 48px; }
.connector { width: 40px; border-top: 2px dotted var(--brass); }
.auth-card h1.consent-title { margin-top: var(--s4); }
.center { text-align: center; }
.account-chip { display: flex; align-items: center; gap: var(--s3); background: var(--surface-sunk); border-radius: var(--r-lg); padding: var(--s3) var(--s4); margin-top: var(--s5); }
.account-chip .avatar { background: var(--brass-tint); overflow: hidden; }
.account-chip .avatar img { width: 100%; height: 100%; object-fit: cover; }
.chip-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chip-id strong { font: var(--t-heading); }
.chip-id .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-h { font: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: var(--s5) 0 var(--s2); }
.receive { list-style: none; margin: 0; padding: 0; }
.receive li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--border); position: relative; }
.receive li:first-child { border-top: 0; }
.rcv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.rcv-photo { display: inline-flex; align-items: center; gap: var(--s2); }
.note-box { display: flex; gap: var(--s2); align-items: flex-start; background: var(--surface-sunk); border-radius: var(--r-md); padding: var(--s3); font: var(--t-small); color: var(--text-2); margin: var(--s4) 0; }
.note-box .icon { margin-top: 1px; }
.auth-card form > .btn-block + .btn-block { margin-top: var(--s2); }
.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--border-strong); position: relative; cursor: pointer; flex: none; margin: 0; transition: background-color .12s ease-out; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(27,31,36,.3); transition: transform .12s ease-out; }
.switch:checked { background: var(--fjord); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { box-shadow: var(--focus); }
.check { accent-color: var(--fjord); width: 20px; height: 20px; }

/* ---------- Confirm / result dialogs (revoke, delete, remove, regenerate, reconnect) ---------- */
.dialog { display: block; max-width: 480px; margin: var(--s7) auto; border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: var(--s7); }
.dialog > * + * { margin-top: var(--s4); }
.dialog h1 { font: var(--t-title); letter-spacing: -.015em; margin: 0; }
.dialog .h2 { font: var(--t-title); margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s6); }
.dialog-actions form { display: inline; }
.dialog .boundaries { background: var(--surface-sunk); }
.dialog .list { box-shadow: none; }
.dialog .list > li { padding: var(--s3) 0; border-top: 1px solid var(--border); background: none; }
.dialog .list { border: 0; background: none; border-radius: 0; }
.dialog .list > li:first-child { border-top: 0; }
@media (max-width: 639px) { .dialog { padding: var(--s6); margin: var(--s4) auto; } .dialog-actions { flex-direction: column-reverse; align-items: stretch; } .dialog-actions .btn, .dialog-actions form .btn { width: 100%; } .dialog-actions form { display: block; } }

/* Legacy form patterns (Manage integrations) */
fieldset { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin: 0; min-width: 0; }
legend { font: var(--t-label); letter-spacing: .02em; color: var(--text-2); padding: 0 var(--s2); }
input[type=radio], input[type=checkbox] { accent-color: var(--fjord); }
.card.stack > h2:first-child { margin-bottom: var(--s2); }
.card { box-shadow: var(--shadow-1); }
main.container > h1 { margin-bottom: var(--s4); }
.auth-card .receive .small, .auth-card .chip-id .small, .auth-card .rcv-main .small { text-align: left; }
.account-chip .avatar-md { width: 36px; height: 36px; background: var(--brass-tint); }
.codes li { white-space: nowrap; }
@media (max-width: 479px) { .codes { grid-template-columns: 1fr; } }

.auth-card h1, .dialog h1, .page-head h1, .empty-sheet h2 { text-wrap: balance; }
.codes { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* ---------- Manage integrations (app-owner side) ---------- */
.owner-head .app-logo { width: 56px; height: 56px; border-radius: 14px; font-size: 22px; }
.app-tabs { margin-bottom: var(--s6); }
.step-note { display: flex; align-items: center; gap: var(--s2); color: var(--text-2); margin: calc(var(--s3) * -1) 0 var(--s5); font: var(--t-small); }
.segmented a[aria-current="page"] { background: var(--fjord); color: #fff; }
.app-tabs a { height: 40px; padding: 0 var(--s4); }
/* sheets: legacy .card forms inside main read as sheets with even rhythm */
main.container > .card, main.container > form.card, main.container > section.card, main.container > details.card { padding: var(--s6); border-radius: var(--r-lg); margin-top: var(--s5); }
main.container > .card > * + *, main.container > form.card > * + *, main.container > section.card > * + * { margin-top: var(--s5); }
main.container > .card h2, main.container > section.card h2 { font: var(--t-title); margin: 0; }
.card .field + .field { margin-top: var(--s5); }
.field .small.muted, .field .small.faint { font: var(--t-small); letter-spacing: 0; color: var(--text-3); font-weight: 400; }
.card fieldset { border: 0; padding: 0; margin: 0; }
.card fieldset legend { padding: 0; margin-bottom: var(--s2); }
.card fieldset > label.row, .card fieldset > .row { padding: var(--s3) var(--s4); margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); flex-wrap: nowrap; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.card fieldset > label.row + label.row { margin-top: var(--s2); }
.card fieldset > label.row:has(input:checked) { border-color: var(--fjord); background: var(--fjord-tint); }
.card fieldset > label.row input { margin-top: 3px; }
.card details > summary { height: auto; min-height: 36px; font-weight: 600; color: var(--fjord); display: flex; align-items: center; }
code { font-family: var(--mono); font-size: .92em; background: var(--surface-sunk); padding: 1px 6px; border-radius: 4px; }
.card .copy-field code { background: var(--surface-sunk); }
.copy-field { background: var(--surface); }
.stack-sm { display: grid; gap: var(--s1); }
.stack-sm > .small { font: var(--t-label); color: var(--text-2); letter-spacing: .02em; }
/* Test connection checklist: icon-well rows with status pills */
.check-sheet { padding: 0; }
.check-sheet > * { margin-left: var(--s5); margin-right: var(--s5); }
.check-sheet > .checklist { margin: 0; }
.check-sheet > .checklist ~ * { margin-top: var(--s4); }
.check-sheet > :last-child { margin-bottom: var(--s5); }
.checklist li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); border-top: 1px solid var(--border); position: relative; }
.checklist li:first-child { border-top: 0; }
.checklist li::before { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--surface-sunk); color: var(--text-2); font: 600 13px/1 var(--font); }
.checklist li b { font: var(--t-heading); }
.check-sheet .row { margin-top: var(--s5); }
.check-sheet form { display: inline; }
@media (max-width: 639px) { main.container > .card, main.container > form.card, main.container > section.card, main.container > details.card { padding: var(--s5) var(--s4); } .checklist li { grid-template-columns: 32px minmax(0, 1fr); } .checklist li > .status { grid-column: 2; justify-self: start; } .check-sheet > * { margin-left: var(--s4); margin-right: var(--s4); } }
.card details > summary { list-style: none; gap: var(--s2); }
.card details > summary::-webkit-details-marker { display: none; }
.card details > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .12s; margin-right: var(--s1); }
.card details[open] > summary::before { transform: rotate(45deg); }
/* Apps tile v2: state line, then actions on their own row */
.tile-foot { flex-direction: column; align-items: stretch; gap: var(--s3); }
.tile-state { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.tile-actions { justify-content: flex-end; border-top: 1px solid var(--border); padding-top: var(--s3); margin: 0 calc(var(--s2) * -1) calc(var(--s2) * -1) 0; }
.tile-state { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: var(--s2); }

/* Integrations polish (Iris review) */
.app-tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border); margin: 0 0 var(--s6); overflow-x: auto; scrollbar-width: none; }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tabs a { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--s3); text-decoration: none; color: var(--text-2); font: 500 14px/1 var(--font); white-space: nowrap; position: relative; background: none; border: 0; border-radius: 0; flex: none; }
.app-tabs a:hover { color: var(--text); background: none; }
.app-tabs a[aria-current="page"] { color: var(--text); font-weight: 600; background: none; box-shadow: none; }
.app-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 2px; background: var(--fjord); }
.app-tabs a:focus-visible { box-shadow: var(--focus); }
.scope { margin-left: auto; font: 500 12px/1.4 var(--mono); color: var(--text-2); background: var(--surface-sunk); padding: 2px 8px; border-radius: var(--r-sm); }
.card fieldset > label.row .scope { align-self: center; }
.secret-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
details.card > summary { list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 36px; font-weight: 600; color: var(--fjord); }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .12s; margin-right: var(--s1); }
details.card[open] > summary::before { transform: rotate(45deg); }
main.container > .card h2, main.container > section.card h2, main.container > form.card h2 { font: var(--t-heading); letter-spacing: 0; }
/* A ghost button that starts a row lines its text up with the content edge */
.card .row > .btn-ghost:first-child, .card .row > .btn-danger-ghost:first-child, .card .row > form:first-child > .btn-danger-ghost, .secret-row > .btn-ghost:first-child { margin-left: calc(var(--s3) * -1); }

/* ---------- Public pages (Privacy, Terms, Security) ---------- */
.on-dark { color: var(--on-basalt); margin-left: auto; }
.on-dark:hover { background: rgba(255,255,255,.08); }
.pub-hero { padding: var(--s9) 0 var(--s7); }
.pub-container { max-width: var(--page); margin: 0 auto; padding: 0 var(--s6); }
.pub-tabs { margin: 0 0 var(--s6); }
.pub-hero h1 { font: 600 34px/40px var(--font); letter-spacing: -.02em; margin: 0 0 var(--s3); }
.pub-desc { font: 400 17px/26px var(--font); color: var(--text-2); max-width: 62ch; margin: 0 0 var(--s4); }
.pub-meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; color: var(--text-2); font: var(--t-small); margin: 0; }
.pub-note { display: flex; gap: var(--s2); align-items: flex-start; max-width: 62ch; background: var(--surface-sunk); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: var(--s5) 0 0; font: var(--t-small); color: var(--text-2); }
.pub-note .icon { margin-top: 2px; }
.pub-short { padding: var(--s6); margin-bottom: var(--s8); }
.pub-short h2 { font: var(--t-heading); margin: 0 0 var(--s4); }
.pub-short ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.pub-short li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); align-items: start; }
.pub-short .well { color: var(--fjord); background: var(--fjord-tint); }
.pub-wrap { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: var(--s9); align-items: start; }
.pub-nav { position: sticky; top: 84px; }
.pub-toc > summary { font: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); list-style: none; cursor: default; margin-bottom: var(--s3); }
.pub-toc > summary::-webkit-details-marker { display: none; }
.pub-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.pub-toc a { display: block; padding: var(--s1) var(--s3); margin-left: -1px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; font: var(--t-small); }
.pub-toc a:hover { color: var(--text); }
.pub-toc a[aria-current] { color: var(--fjord); border-left-color: var(--fjord); font-weight: 600; }
.pub-body .prose { font: 400 16px/26px var(--font); color: var(--text); }
.pub-body p { margin: 0 0 var(--s4); }
.pub-body ul, .pub-body ol { padding-left: var(--s6); margin: 0 0 var(--s4); }
.pub-body li { margin-bottom: var(--s2); }
.pub-sec { scroll-margin-top: 84px; }
.pub-sec h2 { font: 600 22px/30px var(--font); letter-spacing: -.01em; margin: var(--s9) 0 var(--s4); position: relative; }
.pub-sec:first-child h2 { margin-top: 0; }
.pub-sec h3 { font: 600 17px/24px var(--font); margin: var(--s6) 0 var(--s2); }
.pub-sec h2 .anchor { position: absolute; left: -22px; color: var(--text-3); text-decoration: none; opacity: 0; font-weight: 400; }
.pub-sec h2:hover .anchor, .pub-sec h2 .anchor:focus-visible { opacity: 1; }
.pub-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; margin: 0 0 var(--s5); }
.pub-table table { width: 100%; border-collapse: collapse; font: var(--t-small); }
.pub-table th, .pub-table td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-top: 1px solid var(--border); font-weight: 400; }
.pub-table thead th { border-top: 0; font: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--surface-sunk); }
.pub-table tbody th { font-weight: 600; color: var(--text); }
.pub-contact { padding: var(--s6); margin-top: var(--s9); }
.pub-contact h2 { font: var(--t-heading); margin: 0 0 var(--s2); }
.pub-contact p { margin: 0 0 var(--s2); }
.pub .footer { padding-top: var(--s8); }
.pub .pub-container { padding-bottom: 0; }
@media (max-width: 1023px) {
  .pub-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .pub-nav { position: static; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s2) var(--s4); }
  .pub-toc > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin: 0; min-height: 44px; }
  .pub-toc > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .pub-toc[open] > summary::after { transform: rotate(-135deg); }
  .pub-toc ul { margin-bottom: var(--s3); }
  .pub-sec h2 .anchor { display: none; }
}
@media (max-width: 639px) {
  .pub-hero { padding: var(--s7) 0 var(--s6); }
  .pub-container { padding: 0 var(--s4); }
  .pub-hero h1 { font-size: 28px; line-height: 34px; }
  .pub-short, .pub-contact { padding: var(--s5); }
  .pub-table { border: 0; background: none; box-shadow: none; overflow: visible; }
  .pub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pub-table table, .pub-table tbody, .pub-table tr { display: block; }
  .pub-table tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin-bottom: var(--s3); padding: var(--s2) 0; }
  .pub-table th, .pub-table td { display: block; border: 0; padding: var(--s1) var(--s4); }
  .pub-table tbody th { font: var(--t-heading); padding-top: var(--s3); }
  .pub-table td::before { content: attr(data-label); display: block; font: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
}
@media print { .topbar, .pub-nav, .footer, .pub-tabs { display: none; } .pub-wrap { display: block; } .pub-body { max-width: none; } }

.segmented a:not([aria-current="page"]):hover { background: var(--surface-sunk); color: var(--text); }
.sample-btn svg rect { fill: #F6F4EE; }
.sample-btn svg path:first-of-type { fill: #1B1F24; }

/* History filter row (Iris §11): one nowrap row 1024+; two rows 640–1023; Filters button under 640 */
.filter-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s3); }
.filter-bar .segmented { flex: none; }
.filter-bar .filters { flex: 1; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--s3); min-width: 0; }
.filters-body { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s3); min-width: 0; }
.filters-body .select-field { flex: 0 1 180px; min-width: 136px; }
.filters-body .select-field select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.filters-toggle { display: none; width: 100%; justify-content: space-between; }
@media (max-width: 1023px) {
  .filter-bar { flex-wrap: wrap; }
  .filter-bar .filters { flex: 1 1 100%; justify-content: stretch; }
  .filters-body { width: 100%; }
  .filters-body .select-field { flex: 1 1 0; }
}
@media (max-width: 639px) {
  .filters-toggle { display: none; }
  .js .filters-toggle { display: flex; }
  .filters-body { flex-direction: column; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); margin-top: var(--s2); }
  .filters-body[hidden] { display: none; }
  .filters-body .select-field { flex: none; }
}

/* Public pages: one grid, one left edge — [TOC 220][reading 680] (Iris review) */
.pub-grid { display: grid; grid-template-columns: 220px minmax(0, 680px); grid-template-areas: "toc hero" "toc body"; column-gap: var(--s9); max-width: var(--page); margin: 0 auto; padding: 0 var(--s6); justify-content: center; }
.pub-grid > .pub-hero { grid-area: hero; padding: var(--s9) 0 var(--s7); }
.pub-grid > .pub-nav { grid-area: toc; position: sticky; top: 84px; align-self: start; margin-top: calc(var(--s9) + 44px + var(--s6)); }
.pub-grid > .pub-body { grid-area: body; min-width: 0; }
.pub-grid .pub-short { margin-bottom: var(--s8); }
@media (max-width: 1023px) {
  .pub-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "toc" "body"; padding: 0 var(--s6); }
  .pub-grid > .pub-nav { position: static; margin-top: 0; margin-bottom: var(--s6); }
  .pub-grid > .pub-hero { padding-bottom: var(--s6); }
}
@media (max-width: 639px) { .pub-grid { padding: 0 var(--s4); } .pub-grid > .pub-hero { padding: var(--s7) 0 var(--s5); } }

/* Quick connect: the coding-agent prompt */
.prompt-box { max-height: 22rem; overflow: auto; background: var(--surface-sunk); border-radius: var(--r-md); }
.prompt-box pre { margin: 0; padding: var(--s3); font-family: var(--mono); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Apps: the Farnor Labs apps section */
.section-title { font-size: 15px; font-weight: 600; margin: var(--s5, 24px) 0 var(--s2, 8px); }
.farnor-tile .tile-link:not(a) { font-weight: 600; }