@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-tight-latin-wght-normal.woff2?v=4179443c53") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2?v=f11d729bb0") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/bodoni-moda-latin-italic.woff2?v=270728d2c2") format("woff2"); }
:root { --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; --serif: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; --display: "Inter Tight", sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: #fff; color: #0c1017; font-family: Inter, system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, strong, b, th { font-weight: 400; }
h1, h2, h3, h4, p { margin: 0; }
a { color: #1d5a7a; text-decoration: none; }
a:hover { color: #164a66; }
button, input, textarea, select { font-family: inherit; }
button { color: inherit; }
img, svg { flex: none; }
ul, ol { margin: 0; padding: 0; }
code { font-family: var(--mono); }
[hidden] { display: none !important; }
/* Staging only (stagingBadge in middleware.ts); the same rule the site sheet carries. */
.staging-badge { position: fixed; top: 0.5rem; right: 0.5rem; z-index: 2147483647; pointer-events: none; padding: 0.25rem 0.6rem; border-radius: 0.375rem; background: #facc15; color: #111; font: 700 0.75rem/1.2 system-ui, sans-serif; letter-spacing: 0.08em; box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 8px 14px; border-radius: 99px; background: #0c1017; color: #fff; font-size: 13px; }
.skip-link:focus { left: 8px; color: #fff; }
:focus-visible { outline: 2px solid #1d5a7a; outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: #5d6672; }
.ink { color: #0c1017; }
.ink2 { color: #3b434f; }
.serif { font-family: var(--serif); font-style: italic; }
.tnum { font-variant-numeric: tabular-nums; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }


.dash { min-height: 100vh; background: #fff; display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
.rail-input { position: absolute; opacity: 0; pointer-events: none; }
.dash:has(.rail-input:checked) { grid-template-columns: 60px minmax(0, 1fr); }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1px; padding: 10px; background: #f7f9fb; border-right: 1px solid #dee3ea; overflow-y: auto; overflow-x: hidden; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 2px 0 8px; margin-bottom: 8px; }
.rail-logo { display: block; height: 15px; width: auto; }
.rail-logo-link { display: inline-flex; }
.icon-btn { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #5d6672; cursor: pointer; }
.icon-btn:hover { background: #e9edf2; color: #0c1017; }
.rail-toggle .when-closed { display: none; }
.org { position: relative; padding-bottom: 8px; }
.org > summary { list-style: none; }
.org > summary::-webkit-details-marker { display: none; }
.org-btn { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px; border: 1px solid #dee3ea; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; color: #0c1017; }
.org-btn:hover { border-color: #c2c9d4; }
.org-tile { flex: none; width: 28px; height: 28px; border-radius: 7px; background: #0c1017; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 11.5px; letter-spacing: 0.04em; overflow: hidden; }
.org-tile img { width: 100%; height: 100%; object-fit: cover; }
.org-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.org-name { font-size: 13px; }
.org-role { font-size: 11px; color: #5d6672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 4px); display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #fff; border: 1px solid #dee3ea; border-radius: 10px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.12); }
.org-menu form { margin: 0; }
.org-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; color: #0c1017; }
.org-opt:hover { background: #f4f7fa; }
.org-opt[aria-current="true"] { background: #f4f7fa; cursor: default; }
.org-opt .org-tile { width: 24px; height: 24px; border-radius: 6px; font-size: 10px; font-family: inherit; letter-spacing: 0; background: #eef2f7; color: #0c1017; }
.org-opt[aria-current="true"] .org-tile { background: #0c1017; color: #fff; }
.org-opt-copy { flex: 1; display: flex; flex-direction: column; }
.org-opt-copy span:first-child { font-size: 13px; }
.org-opt-copy span:last-child { font-size: 11px; color: #5d6672; }
.org-mark { font-size: 11px; color: #5d6672; }
.org-new { border-top: 1px solid #ecf0f5; margin-top: 4px; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.org-new span { font-size: 11.5px; color: #5d6672; }
.org-new input { width: 100%; min-height: 32px; padding: 6px 10px; border: 1px solid #c2c9d4; border-radius: 8px; font-size: 13px; outline: none; }
.org-new input:focus { border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; }
.org-new button { min-height: 30px; border: 1px solid #c2c9d4; border-radius: 8px; background: #fff; font-size: 12.5px; cursor: pointer; color: #0c1017; }
.org-new button:hover { background: #eef2f7; }
.nav-group { padding: 12px 9px 5px; font-size: 11px; color: #6f7885; }
.nav-gap { display: none; height: 10px; }
.nav-item { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: #3b434f; font-size: 13.5px; text-align: left; cursor: pointer; }
.nav-item.is-foot { font-size: 13px; }
.nav-item svg { color: #6f7885; }
.nav-item:hover { background: #e9edf2; color: #0c1017; }
.nav-item:focus-visible { outline: 2px solid #1d5a7a; outline-offset: -2px; }
.nav-item[aria-current="page"] { background: #e9edf2; color: #0c1017; }
.nav-item[aria-current="page"] svg { color: #0c1017; }
.nav-label { flex: 1; white-space: nowrap; }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: #1d5a7a; color: #fff; font-size: 10.5px; }
.nav-dot { display: none; position: absolute; top: 7px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #1d5a7a; }
.rail-spacer { flex: 1; min-height: 16px; }
.rail-me { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #dee3ea; }
.rail-me form { margin: 0; }
.me-btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 5px 6px; border-radius: 8px; color: #0c1017; }
.me-btn:hover, .me-btn[aria-current="page"] { background: #e9edf2; color: #0c1017; }
.me-copy { min-width: 0; display: flex; flex-direction: column; }
.me-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-mail { font-size: 11px; color: #5d6672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-btn { width: 30px; height: 30px; }
.rail-demo { margin-top: 6px; padding: 10px; border: 1px dashed #c2c9d4; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #3b434f; }
/* Collapsed rail: icons only, a dot in place of the count. */
.dash:has(.rail-input:checked) .rail { padding: 10px 8px; }
.dash:has(.rail-input:checked) .rail-head { justify-content: center; padding: 0; }
.dash:has(.rail-input:checked) .rail-logo-link,
.dash:has(.rail-input:checked) .org-copy,
.dash:has(.rail-input:checked) .org-chev,
.dash:has(.rail-input:checked) .org-menu,
.dash:has(.rail-input:checked) .nav-group,
.dash:has(.rail-input:checked) .nav-label,
.dash:has(.rail-input:checked) .nav-badge,
.dash:has(.rail-input:checked) .me-copy,
.dash:has(.rail-input:checked) .logout-form,
.dash:has(.rail-input:checked) .rail-demo { display: none; }
.dash:has(.rail-input:checked) .nav-gap,
.dash:has(.rail-input:checked) .nav-dot { display: block; }
.dash:has(.rail-input:checked) .org-btn,
.dash:has(.rail-input:checked) .nav-item,
.dash:has(.rail-input:checked) .me-btn { justify-content: center; }
.dash:has(.rail-input:checked) .rail-toggle .when-open { display: none; }
.dash:has(.rail-input:checked) .rail-toggle .when-closed { display: inline; }
.main { min-width: 0; min-height: 100vh; background: #fff; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 24px; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid #dee3ea; }
.top-logo { display: none; height: 14px; width: auto; }
.trail { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.trail a, .trail span.crumb { color: #5d6672; white-space: nowrap; }
.trail a:hover { color: #0c1017; }
.trail [aria-current="page"] { color: #0c1017; }
.trail .sep { color: #c2c9d4; }
.top-fill { flex: 1; }
.top-search { display: block; flex: 0 1 220px; min-width: 120px; }
.top-search form { margin: 0; }
.top-search input { width: 100%; min-height: 34px; padding: 6px 14px; border: 1px solid #dee3ea; border-radius: 99px; background: #f4f7fa; font-size: 13px; color: #0c1017; outline: none; }
.top-search input:focus { border-color: #1d5a7a; background: #fff; box-shadow: 0 0 0 3px #dcebf3; }
.pulse { display: none; align-items: center; gap: 8px; font-size: 12.5px; color: #3b434f; white-space: nowrap; }
.pulse i { width: 6px; height: 6px; border-radius: 50%; background: #98a1ad; }
.pulse.is-live i { background: #1f6a5c; }
.page { padding: 22px 28px 96px; display: flex; flex-direction: column; gap: 18px; }
.demo-note { margin: 0; padding: 10px 14px; border: 1px dashed #c2c9d4; border-radius: 12px; font-size: 13px; color: #3b434f; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.tabbar { display: none; }
.tabbar-more { display: none; }
@media (min-width: 1280px) { .pulse { display: inline-flex; } }
@media (max-width: 899px) {
  .dash, .dash:has(.rail-input:checked) { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .top { padding: 0 16px; overflow: hidden; }
  .trail { flex: 0 1 auto; overflow: hidden; }
  .top-logo { display: block; }
  .top-search { display: none; }
  .page { padding: 18px 16px 120px; }
  .tabbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 64px; padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #dee3ea; }
  .tab-btn { position: relative; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; font-size: 12.5px; color: #5d6672; cursor: pointer; }
  .tab-btn::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: transparent; }
  .tab-btn[aria-current="page"] { color: #0c1017; }
  .tab-btn[aria-current="page"]::before { background: #0c1017; }
  .tab-count { position: absolute; top: 12px; right: calc(50% - 34px); width: 7px; height: 7px; border-radius: 50%; background: #1d5a7a; }
  .tabbar-more { position: fixed; inset: auto 12px 76px 12px; z-index: 61; margin: 0; flex-direction: column; padding: 8px; background: #fff; border: 1px solid #dee3ea; border-radius: 12px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.12); }
  .tabbar-more:popover-open { display: flex; }
  .tabbar-more a, .tabbar-more button { min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 15px; color: #0c1017; display: flex; align-items: center; cursor: pointer; width: 100%; }
  .tabbar-more form { margin: 0; }
}


.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #5d6672; }
.h1 { margin: 0; font-family: var(--display); font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.h1 em, .h2 em { font-family: var(--serif); font-style: italic; color: #1d5a7a; }
.h2 { margin: 0; font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; line-height: 1.25; }
.h3 { margin: 0; font-family: var(--display); font-size: 15px; letter-spacing: -0.01em; }
.lede { margin: 0; font-size: 13.5px; line-height: 1.55; color: #3b434f; text-wrap: pretty; }
.small { font-size: 12.5px; line-height: 1.5; color: #5d6672; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.head-copy { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.screen { display: flex; flex-direction: column; gap: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid #c2c9d4; background: #fff; color: #0c1017; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: #eef2f7; color: #0c1017; }
.btn.lg { height: auto; min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn.md { height: 34px; }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn.xs { height: 28px; padding: 0 12px; font-size: 12px; }
.btn.primary { border-color: #0c1017; background: #0c1017; color: #fff; }
.btn.primary:hover { background: #2a323d; color: #fff; }
.btn.danger { border-color: #9b3b3b; background: #9b3b3b; color: #fff; }
.btn.danger:hover { background: #842f2f; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.linkbtn { border: 0; background: none; padding: 0; color: #1d5a7a; font-size: 13px; cursor: pointer; text-align: left; }
.linkbtn:hover { color: #164a66; }
.linkbtn.danger { color: #9b3b3b; }
.linkbtn.ink { color: #0c1017; }
.inline-form { display: inline; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; border: 1px solid #0c1017; background: #0c1017; color: #fff; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; justify-self: start; }
.chip::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.chip.is-proposed { border: 1px dashed #3b434f; background: transparent; color: #0c1017; }
.chip.is-proposed::before { background: #0c1017; }
.chip.is-contested { border: 3px double #0c1017; background: #fff; color: #0c1017; }
.chip.is-contested::before { background: #0c1017; }
.chip.is-gap { border-color: #eef2f7; background: #eef2f7; color: #3b434f; }
.chip.is-gap::before { background: transparent; border: 1px solid #3b434f; }
.chip.is-superseded { border-color: #dee3ea; background: transparent; color: #6f7885; text-decoration: line-through; }
.chip.is-superseded::before { background: #98a1ad; }
.chip.is-dismissed { border-color: #dee3ea; background: transparent; color: #5d6672; }
.chip.is-dismissed::before { background: #98a1ad; }
.chip.is-closed { border-color: #c2c9d4; background: transparent; color: #5d6672; }
.chip.is-closed::before { background: #98a1ad; }
.hc { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid #0c1017; background: #0c1017; color: #fff; font-size: 11.5px; white-space: nowrap; flex: none; }
.hc::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hc.is-contested { border: 3px double #0c1017; background: #fff; color: #0c1017; }
.hc.is-gap { border-color: #c2c9d4; background: #eef2f7; color: #3b434f; }
.hc.is-proposed { border: 1px dashed #5d6672; background: #fff; color: #0c1017; }
.hc.is-replaced { border-color: #dee3ea; background: #f4f7fa; color: #5d6672; text-decoration: line-through; }
.hc.is-closed { border-color: #dee3ea; background: #f4f7fa; color: #5d6672; }
.hc.is-none { border: 1px dashed #c2c9d4; background: #fff; color: #5d6672; }
.hc.is-open { border-color: #ecd9b6; background: #fbf3e4; color: #7a4b12; }
.hc.is-gap::before, .hc.is-proposed::before, .hc.is-closed::before, .hc.is-none::before { background: transparent; border: 1.5px solid currentColor; }
.kc { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px; border-radius: 6px; font-size: 11.5px; white-space: nowrap; flex: none; border: 1px solid #a9c7d8; background: #dcebf3; color: #1d5a7a; }
.kc.is-claim { border-color: #c2c9d4; background: #fff; color: #3b434f; }
.kc.is-proposal { border: 1px dashed #c2c9d4; background: #fff; color: #3b434f; }
.scope-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid #e6eaf0; border-radius: 6px; font-size: 11.5px; color: #0c1017; white-space: nowrap; }
.scope-tag::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: #24506e; }
.scope-tag.tone-d1::before { background: #2f7f8c; } .scope-tag.tone-d2::before { background: #6bb3ae; } .scope-tag.tone-d3::before { background: #d2b483; }
.val-tag { display: inline-flex; padding: 3px 9px; border-radius: 7px; border: 1px solid #ecd9b6; background: #fbf3e4; color: #7a4b12; font-size: 12.5px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; border: 1px solid #dee3ea; background: #fff; color: #3b434f; font-size: 11.5px; white-space: nowrap; }
.tag.is-solid { border-color: #0c1017; background: #0c1017; color: #fff; }
.tag.is-ink { border-color: #0c1017; color: #0c1017; }
.tag.is-dashed { border: 1px dashed #3b434f; color: #0c1017; }
.tag.is-soft { border-color: #eef2f7; background: #eef2f7; color: #3b434f; }
.code { font-family: var(--mono); font-size: 11px; color: #5d6672; }
.av { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; color: #0c1017; background: #dbe6ef; border: 0; }
.av.tone-0 { background: #dbe6ef; } .av.tone-1 { background: #d8ecec; } .av.tone-2 { background: #e3f2ef; }
.av.tone-3 { background: #f6ecd9; } .av.tone-4 { background: #dcebf3; } .av.tone-5 { background: #e9ecf1; }
.av.is-system { border-radius: 6px; background: #eef2f7; color: #3b434f; border: 1px solid #c2c9d4; }
.av.is-agent { border-radius: 6px; background: #0a1420; color: #a8d6d1; }
.av.is-unknown { background: #fff; color: #5d6672; border: 1px dashed #c2c9d4; }
.av.s16 { width: 16px; height: 16px; font-size: 8px; } .av.s18 { width: 18px; height: 18px; font-size: 8px; }
.av.s20 { width: 20px; height: 20px; font-size: 9px; } .av.s26 { width: 26px; height: 26px; font-size: 10px; }
.av.s28 { width: 28px; height: 28px; font-size: 11px; } .av.s30 { width: 30px; height: 30px; font-size: 11px; }
.av.s40 { width: 40px; height: 40px; font-size: 15px; } .av.s52 { width: 52px; height: 52px; font-size: 17px; }
.av.s64 { width: 64px; height: 64px; font-size: 24px; }
.bars { display: inline-flex; gap: 2px; align-items: center; }
.bars i { width: 5px; height: 9px; border-radius: 1px; background: #dee3ea; }
.bars i.on { background: #0c1017; }
.bars.is-none i { background: #fff; border: 1px dashed #c2c9d4; }
.bars.tall i { height: 10px; }
.card { border: 1px solid #dee3ea; border-radius: 12px; background: #fff; }
.card-pad { padding: 16px 18px; }
.sec { display: flex; flex-direction: column; gap: 12px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; border-bottom: 1px solid #dee3ea; }
.tablist { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tab { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: #5d6672; font-size: 14px; cursor: pointer; white-space: nowrap; }
.tab:hover { color: #0c1017; }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: #0c1017; border-bottom-color: #0c1017; }
.tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #1d5a7a; color: #fff; font-size: 10.5px; }
.tab-c { font-size: 12px; color: #5d6672; }
.tabs-aside { margin-left: auto; font-size: 12.5px; color: #5d6672; padding: 6px 0; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #dee3ea; border-radius: 99px; }
.seg a, .seg button { height: 26px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; color: #3b434f; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; }
.seg a[aria-current="true"], .seg button[aria-pressed="true"] { background: #0c1017; color: #fff; }
.kv { display: grid; grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1.4fr); gap: 8px 16px; font-size: 13px; margin: 0; }
.kv dt { color: #5d6672; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #3b434f; }
.input, .textarea, .select { width: 100%; min-height: 36px; padding: 7px 12px; border: 1px solid #c2c9d4; border-radius: 10px; background: #fff; font-size: 13.5px; color: #0c1017; outline: none; }
.textarea { min-height: 84px; line-height: 1.5; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; }
.input.is-pill { border-radius: 99px; padding: 6px 14px; }
.hint { font-size: 12px; line-height: 1.45; color: #5d6672; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #0c1017; cursor: pointer; }
.check input { appearance: none; flex: none; width: 14px; height: 14px; margin: 0; border: 1px solid #3b434f; border-radius: 3px; background: #fff; display: inline-grid; place-content: center; cursor: pointer; }
.check input:checked { background: #0c1017; }
.check input:checked::after { content: "✓"; color: #fff; font-size: 10px; line-height: 12px; }
.check input[type="radio"] { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; }
.check input[type="radio"]:checked::after { content: none; }
.switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; border: 1px solid #0c1017; background: #fff; cursor: pointer; padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #0c1017; transition: left 120ms ease; }
.switch[aria-checked="true"] { background: #0c1017; }
.switch[aria-checked="true"]::after { left: 18px; background: #fff; }
.flash { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #eef5f9; border: 1px solid #c9dce7; font-size: 13.5px; line-height: 1.5; }
.flash-tag { flex: none; padding-top: 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #1d5a7a; }
.flash-text { flex: 1; }
.flash-x { flex: none; border: 0; background: none; color: #3b434f; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.flash.is-success { background: #e3f1ee; border-color: #b9dcd3; } .flash.is-success .flash-tag { color: #1f6a5c; }
.flash.is-error { background: #f9ebea; border-color: #e7c3c0; } .flash.is-error .flash-tag { color: #9b3b3b; }
.flash.is-warning { background: #f8efdc; border-color: #e8d5ab; } .flash.is-warning .flash-tag { color: #7d5a1f; }
.note { padding: 12px 14px; border-radius: 12px; background: #f4f7fa; font-size: 13px; line-height: 1.5; color: #3b434f; }
.note.is-dashed { background: transparent; border: 1px dashed #c2c9d4; }
.empty { padding: 28px 20px; border: 1px dashed #c2c9d4; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13.5px; color: #3b434f; }
.empty .h3 { color: #0c1017; }
.ok { color: #1f6a5c; } .bad { color: #9b3b3b; }
.dd { position: relative; }
.dd > summary { list-style: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd-btn { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid #c2c9d4; border-radius: 10px; background: #fff; color: #0c1017; font-size: 13.5px; text-align: left; cursor: pointer; }
.dd-btn .dd-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-btn .dd-val.is-ph { color: #5d6672; }
.dd-btn.is-sm { min-height: 34px; border-radius: 99px; padding: 6px 14px; font-size: 13px; width: auto; }
.dd-menu { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); min-width: 100%; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; padding: 4px; background: #fff; border: 1px solid #dee3ea; border-radius: 10px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.12); }
.dd-menu.is-right { left: auto; right: 0; }
.dd-opt { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: #fff; color: #0c1017; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; }
.dd-opt:hover, .dd-opt:has(input:checked), .dd-opt[aria-current="true"] { background: #f4f7fa; color: #0c1017; }
.dd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dd-tick { flex: none; width: 14px; font-size: 12px; color: #0c1017; visibility: hidden; }
.dd-opt:has(input:checked) .dd-tick, .dd-opt[aria-current="true"] .dd-tick { visibility: visible; }
.dd-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dd-sub { font-size: 11.5px; color: #5d6672; white-space: normal; }
/* Windows: native popovers, so they open and close without a script. */
.modal { margin: auto; padding: 0; border: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.2); color: #0c1017; overflow: hidden; }
.modal:popover-open { display: flex; flex-direction: column; }
.modal::backdrop, .drawer::backdrop { background: rgba(10, 20, 32, 0.42); }
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; }
.modal-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px 20px; border-bottom: 1px solid #ecf0f5; }
.modal-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.modal-title b { font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; }
.modal-title span { font-size: 12.5px; line-height: 1.45; color: #5d6672; }
.modal-x { width: 34px; height: 34px; color: #3b434f; }
.modal-x:hover { background: #eef2f7; }
.modal-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #f4f7fa; display: inline-flex; align-items: center; justify-content: center; }
.modal-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid #ecf0f5; }
.modal-err { padding: 10px 12px; border-radius: 10px; background: #f9ebea; border: 1px solid #e7c3c0; font-size: 13px; line-height: 1.5; }
.danger-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #f9ebea; border: 1px solid #e7c3c0; font-size: 13px; line-height: 1.5; }
.danger-box > summary { list-style: none; color: #9b3b3b; cursor: pointer; font-size: 13px; }
.danger-box:not([open]) { padding: 0; border: 0; background: none; }
.drawer { margin: 12px 12px 12px auto; padding: 0; border: 1px solid #dee3ea; width: min(520px, calc(100vw - 24px)); height: calc(100vh - 24px); max-height: none; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.12); color: #0c1017; overflow: hidden; }
.drawer:popover-open { display: flex; flex-direction: column; }
.drawer > form { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; }
@media (max-width: 899px) {
  .modal { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; }
  .drawer { margin: 0; width: 100%; max-width: 100%; height: 100vh; border-radius: 0; border: 0; }
}
/* The guided path, docked bottom-right. */
.tour { position: fixed; z-index: 50; right: 24px; bottom: 20px; }
.tour > summary { list-style: none; }
.tour > summary::-webkit-details-marker { display: none; }
.tour-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 10px; border-radius: 99px; border: 1px solid #dee3ea; background: #fff; box-shadow: 0 1px 2px rgba(12, 16, 23, 0.04); font-size: 13px; color: #0c1017; cursor: pointer; }
.tour-btn:hover { border-color: #c2c9d4; }
.tour-btn .muted { color: #5d6672; }
.tour-panel { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(320px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 2px; padding: 14px; background: #fff; border: 1px solid #dee3ea; border-radius: 12px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.12); }
.tour-lede { padding: 0 4px 8px; font-size: 12.5px; color: #3b434f; }
.tour-step { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 2px 4px; }
.tour-mark { width: 18px; font-family: var(--mono); font-size: 11px; color: #0c1017; }
.tour-t { flex: 1; font-size: 13px; color: #0c1017; }
.tour-step.is-done .tour-mark, .tour-step.is-done .tour-t { color: #5d6672; }
.tour-step.is-done .tour-t { text-decoration: line-through; }
.tour-go { min-height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid #0c1017; background: #0c1017; color: #fff; font-size: 12px; display: inline-flex; align-items: center; }
.tour-go:hover { color: #fff; background: #2a323d; }
@media (max-width: 899px) { .tour { right: 12px; bottom: 84px; } }


.sdot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: #24506e; display: inline-block; }
.sdot.d1 { background: #2f7f8c; } .sdot.d2 { background: #6bb3ae; } .sdot.d3 { background: #d2b483; }
.sdot.is-any { width: 7px; height: 7px; background: transparent; border: 1px solid #c2c9d4; }
.mini-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #5d6672; }
.mini-l { font-size: 11.5px; color: #5d6672; }
.fs12 { font-size: 12px; }
.inl { display: inline-flex; align-items: center; gap: 6px; }
.chip.is-sm { height: 20px; padding: 0 8px; font-size: 10px; }
.chip.is-xs { height: 18px; padding: 0 7px; font-size: 9.5px; }
.chip.is-xs::before, .chip.is-sm::before { display: none; }
.btn.ghost { border-color: transparent; background: transparent; color: #3b434f; }
.btn.ghost:hover { background: #eef2f7; }
.empty.is-center { align-items: center; text-align: center; padding: 40px 20px; font-size: 14px; }
.infobox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #eef5f9; border: 1px solid #c9dce7; font-size: 13px; line-height: 1.5; }
.infobox > .grow { min-width: 220px; }
.warnbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: 12px; background: #f8efdc; border: 1px solid #e8d5ab; font-size: 13px; }
.warnbox > .grow { min-width: 240px; }
.quote { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: #f4f7fa; font-size: 13.5px; line-height: 1.5; }
.quote .small { font-size: 12px; }

/* Tiles and queue */
.tiles { display: flex; flex-wrap: wrap; gap: 1px; background: #dee3ea; border: 1px solid #dee3ea; border-radius: 12px; overflow: hidden; }
.tile { flex: 1 1 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; background: #fff; color: #0c1017; }
.tile:hover { background: #f7f9fb; color: #0c1017; }
.tile-l { font-size: 12.5px; color: #3b434f; }
.tile-v { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile-s { font-size: 12px; color: #5d6672; }
.queue { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed #3b434f; border-radius: 12px; font-size: 13.5px; }
.queue > span { flex: 1; min-width: 220px; }

/* Grid and filter rail: inline at 1280px with the rail open, a sheet everywhere else. */
.mem-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.mem-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mem-filters { margin: 0; inset: 0 0 0 auto; width: 340px; height: 100vh; max-height: none; border: 0; padding: 20px 18px 40px; flex-direction: column; gap: 22px; background: #fff; overflow-y: auto; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.12); color: #0c1017; }
.mem-filters:popover-open { display: flex; }
.mem-filters::backdrop { background: transparent; }
.mem-filters-btn { margin-bottom: 6px; }
.fsheet-head { display: flex; align-items: center; justify-content: space-between; }
.fsheet-search { margin: 0; }
.fsheet-search .input { min-height: 44px; font-size: 15px; }
@media (min-width: 1280px) {
  .dash:not(:has(.rail-input:checked)) .mem-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .dash:not(:has(.rail-input:checked)) .mem-filters { display: flex; position: sticky; top: 72px; inset: auto; z-index: 1; width: auto; height: auto; max-height: calc(100vh - 80px); padding: 0; box-shadow: none; overflow: auto; }
  .dash:not(:has(.rail-input:checked)) .fsheet-head,
  .dash:not(:has(.rail-input:checked)) .fsheet-search,
  .dash:not(:has(.rail-input:checked)) .mem-filters-btn { display: none; }
}
@media (max-width: 899px) { .mem-filters { width: auto; inset: 0; } }
.fgroup { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fgroup > legend { float: left; width: 100%; }
.fhead { padding: 0 8px 6px; }
.fsaved, .fopt { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 3px 8px; border-radius: 8px; color: #0c1017; font-size: 13px; }
.fsaved { min-height: 32px; padding: 4px 8px; }
.fsaved:hover, .fopt:hover { background: #f4f7fa; color: #0c1017; }
.fsaved[aria-current="true"] { background: #eef2f7; }
.fopt[aria-current="true"] { background: #f4f7fa; }
.fopt[data-depth="1"] { padding-left: 20px; } .fopt[data-depth="2"] { padding-left: 32px; }
.fopt[data-depth="3"] { padding-left: 44px; } .fopt[data-depth="4"] { padding-left: 56px; }
.fcount { font-family: var(--mono); font-size: 11px; color: #5d6672; }
.fbox { flex: none; width: 14px; height: 14px; border: 1px solid #3b434f; border-radius: 3px; background: #fff; color: #fff; font-size: 10px; line-height: 12px; text-align: center; }
[aria-current="true"] > .fbox { background: #0c1017; }
[aria-current="true"] > .fbox::after { content: "✓"; }
.fradio { flex: none; width: 13px; height: 13px; border: 1px solid #3b434f; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #fff; }
[aria-current="true"] > .fradio { background: #0c1017; }
.fclear { align-self: flex-start; margin-left: 8px; }
@media (max-width: 899px) { .fsaved, .fopt { min-height: 44px; } }

/* Register */
.reg { display: flex; flex-direction: column; gap: 16px; }
.reg-controls { display: flex; flex-direction: column; gap: 10px; }
.reg-lens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.reg-lens-l { font-size: 13px; color: #3b434f; }
.reg-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; flex: 1; min-width: 0; }
.lchip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid #dee3ea; background: #fff; color: #0c1017; font-size: 12.5px; white-space: nowrap; }
.lchip .sdot { width: 7px; height: 7px; }
.lchip:hover { border-color: #c2c9d4; color: #0c1017; }
.lchip[aria-current="true"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.reg-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.check-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #0c1017; }
.check-link:hover { color: #0c1017; }
.tgroup { border: 1px solid #dee3ea; border-radius: 12px; background: #fff; overflow: hidden; }
.tgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 18px; background: #fafbfc; }
.tgroup-t { margin: 0; font-family: var(--display); font-size: 16px; letter-spacing: -0.01em; }
.tgroup-meta { margin-left: auto; font-size: 12px; color: #5d6672; }
.rrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 124px; gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid #ecf0f5; background: #fff; color: #0c1017; }
.rrow:hover { background: #f7f9fb; color: #0c1017; }
.rrow[aria-current="true"] { background: #eef5f9; }
.rrow-scope { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.rrow.d1 .rrow-scope { padding-left: 16px; } .rrow.d2 .rrow-scope { padding-left: 32px; } .rrow.d3 .rrow-scope { padding-left: 48px; }
.rrow-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rrow-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.rrow-val { font-family: var(--display); font-size: 19px; letter-spacing: -0.01em; }
.is-hist { color: #6f7885 !important; text-decoration: line-through; }
.rrow-kind { font-size: 12px; color: #5d6672; }
.rrow-st { font-size: 13px; line-height: 1.45; color: #3b434f; text-wrap: pretty; }
.rrow-note { font-size: 12px; color: #5d6672; }
.rrow-auth { display: none; flex-direction: column; gap: 5px; }
.rrow-auth > span:last-child { font-size: 11.5px; color: #5d6672; white-space: nowrap; }
.rrow-ch { display: none; font-size: 12px; color: #5d6672; text-align: right; }
@media (min-width: 1280px) {
  .dash:not(:has(.rail-input:checked)) .rrow, .rrow { grid-template-columns: 140px minmax(0, 1fr) 128px 104px 80px; }
  .rrow-auth { display: flex; }
  .rrow-ch { display: block; }
}
@media (max-width: 899px) { .rrow { grid-template-columns: minmax(0, 1fr); gap: 8px; } .rrow.d1 .rrow-scope, .rrow.d2 .rrow-scope, .rrow.d3 .rrow-scope { padding-left: 0; } }
.xtable { border: 1px solid #dee3ea; border-radius: 12px; overflow-x: auto; }
.xtable-in.is-flat { min-width: 980px; }
.xtable-in.is-src { min-width: 760px; }
.xhead, .xrow { display: grid; gap: 14px; padding: 12px 18px; }
.is-flat .xhead, .is-flat .xrow { grid-template-columns: minmax(0, 2.2fr) 120px 1.2fr 128px 110px 64px 150px 70px; }
.is-src .xhead, .is-src .xrow { grid-template-columns: minmax(0, 1.8fr) 1fr 120px 110px 64px; }
.xhead { padding: 10px 18px; background: #fafbfc; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #5d6672; }
.xrow { align-items: center; border-top: 1px solid #ecf0f5; background: #fff; color: #0c1017; font-size: 13px; }
.xrow:hover { background: #f7f9fb; color: #0c1017; }
.xrow[aria-current="true"] { background: #eef5f9; }
.xrow.is-empty { display: block; color: #5d6672; }
.frec { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.frec-st { line-height: 1.4; }
.frec-by { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #5d6672; }
.fval { font-family: var(--display); font-size: 15px; }
.ftopic { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.ftopic-s { display: flex; align-items: center; gap: 6px; color: #3b434f; }
.ftopic-s .sdot { width: 7px; height: 7px; }
.fauth { display: flex; flex-direction: column; gap: 4px; }
.fauth > span:last-child { font-size: 11.5px; color: #5d6672; }
.fsmall { font-size: 12px; color: #3b434f; }
.s-type { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.s-w { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.s-ing { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #3b434f; }
.lens { display: flex; flex-direction: column; border: 1px solid #dee3ea; border-radius: 12px; overflow: hidden; }
.lens-head { padding: 14px 18px; background: #0a1420; color: #c2c9d4; font-size: 13px; line-height: 1.5; }
.lens-head .w { color: #fff; }
.lens-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 20px; align-items: start; padding: 16px 18px; border-top: 1px solid #ecf0f5; background: #fff; color: #0c1017; }
a.lens-row:hover { background: #f7f9fb; color: #0c1017; }
.lens-topic { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.lens-ans { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lens-valrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.lens-val { font-family: var(--display); font-size: 21px; letter-spacing: -0.01em; }
.lens-val.is-none { color: #5d6672; }
.lens-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lcrumb { padding: 2px 7px; border-radius: 6px; font-size: 12px; color: #5d6672; }
.lcrumb.is-on { background: #eef2f7; color: #0c1017; }
.lsep { font-size: 12px; color: #98a1ad; }
.lens-via { font-size: 12.5px; line-height: 1.5; color: #3b434f; text-wrap: pretty; }
.lens-pend { align-self: flex-start; font-size: 12.5px; padding: 4px 8px; border: 1px dashed #3b434f; border-radius: 8px; }

/* Timeline */
.tl { display: flex; flex-direction: column; gap: 18px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: #3b434f; }
.tl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg-trunk { width: 1px; height: 14px; background: #c2c9d4; }
.lg-lane { width: 0; height: 14px; border-left: 1px dashed #c2c9d4; }
.lg-merge { width: 9px; height: 9px; border-radius: 50%; background: #0c1017; }
.lg-fork { width: 9px; height: 9px; border-radius: 50%; border: 3px double #0c1017; }
.tl-day { display: flex; flex-direction: column; }
.tl-dayhead { padding: 0 0 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #5d6672; border-bottom: 1px solid #dee3ea; }
.tl-row { display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; border-bottom: 1px solid #ecf0f5; }
.tl-time { padding-top: 18px; font-family: var(--mono); font-size: 11.5px; color: #5d6672; }
.tl-rail { position: relative; align-self: stretch; min-height: 76px; }
.tl-trunk { position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: #c2c9d4; }
.tl-lane { position: absolute; left: 30px; top: 0; bottom: 0; width: 0; border-left: 1px dashed #c2c9d4; opacity: 0; }
.tl-conn { position: absolute; left: 0; top: 0; overflow: visible; }
.tl-dot { position: absolute; left: 8px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: #0c1017; }
.tl-row.is-source .tl-dot { background: #fff; border: 1.5px solid #0c1017; }
.tl-row.is-ontology .tl-dot { border-radius: 2px; background: #fff; border: 1.5px solid #1d5a7a; }
.tl-row.is-review .tl-lane, .tl-row.is-supersession .tl-lane, .tl-row.is-conflict .tl-lane { opacity: 1; }
.tl-row.is-review .tl-dot { left: 26px; background: #fff; border: 1.5px dashed #3b434f; }
.tl-row.is-conflict .tl-dot { left: 26px; background: #fff; border: 3px double #0c1017; }
.tl-copy { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; min-width: 0; }
.tl-title { font-size: 14px; line-height: 1.4; color: #0c1017; }
.tl-title:hover { color: #1d5a7a; }
.tl-desc { font-size: 13px; line-height: 1.5; color: #3b434f; text-wrap: pretty; }
.tl-by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #5d6672; }
.tl-by .av { font-size: 8.5px; }
.tl-kind { margin-top: 16px; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid #dee3ea; border-radius: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #3b434f; }
@media (max-width: 899px) { .tl-row { grid-template-columns: 40px 40px minmax(0, 1fr); } .tl-kind { display: none; } }

/* Review */
.revs, .rels, .srcs { display: flex; flex-direction: column; gap: 16px; }
.rels { gap: 20px; }
.rev, .rel { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; margin: 0; }
.rev-head, .rel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rev-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3b434f; }
.rev-ext, .rel-at { margin-left: auto; }
.rev-st { font-family: var(--display); font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: #0c1017; text-wrap: pretty; }
.rev-st:hover { color: #1d5a7a; }
.rev-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; padding: 14px 0; border-top: 1px solid #ecf0f5; border-bottom: 1px solid #ecf0f5; }
.rev-facts > span { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.rev-val { font-family: var(--display); font-size: 17px; }
.rev-cols { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; }
.rev-why, .rev-ev { display: flex; flex-direction: column; gap: 6px; }
.rev-ev { gap: 8px; }
.rev-ev .linkbtn { align-self: flex-start; }
.rev-reason { font-size: 14px; }
.rev-gov { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; margin: 0; }
.rev-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rev-btns .btn { padding: 0 18px; }
.rev-retract { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 260px; margin: 0; align-items: center; }
.rev-retract .textarea { flex: 1; min-width: 200px; min-height: 36px; padding: 8px 10px; font-size: 13px; }
@media (max-width: 899px) { .rev-cols { grid-template-columns: minmax(0, 1fr); } }

/* Relations */
.rel-title { margin: 0; font-family: var(--display); font-size: 17px; letter-spacing: -0.01em; }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 899px) { .sides { grid-template-columns: minmax(0, 1fr); } }
.side { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #dee3ea; border-radius: 12px; }
.side.is-win { border-color: #0c1017; }
.side-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.side-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3b434f; }
.side-win { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.side-val { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.side-st { font-size: 13.5px; line-height: 1.5; }
.side-auth { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #5d6672; }
.side .linkbtn, .side-go, .rel-dismiss { align-self: flex-start; }
.side-go { height: auto; min-height: 36px; padding: 0 16px; white-space: normal; text-align: left; }
.rel-out { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid #ecf0f5; font-size: 13.5px; }
.sups { display: flex; flex-direction: column; border: 1px solid #dee3ea; border-radius: 12px; overflow: hidden; }
.sups-head { padding: 14px 18px; background: #fafbfc; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 20px; align-items: center; padding: 14px 18px; border-top: 1px solid #ecf0f5; }
.sup-l { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.sup-l .small { font-size: 12px; }
.sup-v { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 18px; }
.sup-old { color: #6f7885; text-decoration: line-through; }
.sup-new { color: #0c1017; }
.sup-arrow { color: #98a1ad; font-size: 14px; }

/* Sources list */
.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed #c2c9d4; border-radius: 12px; font-size: 13px; color: #3b434f; }
.soon-tag { border-color: #c2c9d4; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #0c1017; }

/* Side panel */
.panel { position: fixed; z-index: 70; top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px)); display: flex; flex-direction: column; background: #fff; border: 1px solid #dee3ea; border-radius: 16px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.12); overflow: hidden; }
@media (max-width: 899px) { .panel { inset: 0; width: auto; border: 0; border-radius: 0; } }
.panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 14px 0 22px; border-bottom: 1px solid #ecf0f5; }
.panel-x { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 20px; line-height: 1; color: #3b434f; }
.panel-x:hover { background: #eef2f7; color: #0c1017; }
.panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 24px; }
.pd-top { display: flex; flex-direction: column; gap: 10px; }
.pd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pd-val { font-family: var(--display); font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; }
.pd-st { font-family: var(--display); font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ptag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid #dee3ea; border-radius: 6px; font-size: 12px; color: #3b434f; }
.ptag.mono { font-size: 11px; }
.ptag .sdot { width: 7px; height: 7px; }
.answer { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: #0a1420; color: #c2c9d4; }
.rec .answer { padding: 18px; }
.answer-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #a8d6d1; }
.answer-grid { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 4px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.answer-grid .v { color: #fff; overflow-wrap: anywhere; }
.answer-text { font-size: 12.5px; line-height: 1.5; }
.pd-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-kv > span { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pd-by { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13px; vertical-align: middle; }
.pd-sec { display: flex; flex-direction: column; gap: 12px; }
.pd-sec.is-tight { gap: 2px; }
.pd-sec-h { padding-bottom: 10px; }
.pd-gov { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #ecf0f5; }
.pd-full { min-height: 40px; }
.prov { display: flex; flex-direction: column; border: 1px solid #dee3ea; border-radius: 12px; overflow: hidden; }
.prov-src, .prov-ev { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.prov-ev { background: #f4f7fa; }
.prov-k { font-size: 11.5px; color: #5d6672; }
.prov-t, .prov-x { font-size: 13.5px; line-height: 1.5; }
.prov-w { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #3b434f; }
.prov-ok { font-size: 12px; color: #5d6672; }
.prov-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; font-size: 12px; color: #5d6672; }
.prov-foot a { margin-left: auto; font-size: 12.5px; }
.prov.is-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border: 0; border-top: 1px solid #ecf0f5; border-radius: 0; padding-top: 12px; gap: 16px; overflow: visible; }
.prov.is-wide .prov-src { padding: 0; }
.prov.is-wide .prov-ev { border-radius: 10px; }
.prov.is-wide .prov-foot { grid-column: 1 / -1; padding: 0; }
.hist { display: flex; flex-direction: column; }
.hist-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.hist-av { position: relative; display: flex; }
.hist-row.has-line .hist-av::after { content: ""; position: absolute; left: 10.5px; top: 26px; bottom: 2px; width: 1px; background: #dee3ea; }
.hist-copy { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; }
.hist-l { font-size: 13px; }
.rec .hist-l { font-size: 13.5px; }
.hist-at { font-size: 11.5px; color: #5d6672; }
.hist-r { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.rec .hist-r { font-size: 13px; }
.rel-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; color: #0c1017; }
.rel-card:hover { background: #f7f9fb; color: #0c1017; }
.rel-card .chip { order: -1; align-self: flex-start; }
.rel-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #ecf0f5; color: #0c1017; }
.rel-row:hover { color: #0c1017; background: #f7f9fb; }
.rel-label { font-size: 12px; color: #5d6672; }
.rel-row .rel-label { font-size: 12.5px; }
.rel-copy { display: flex; flex-direction: column; gap: 2px; }
.rel-val { font-family: var(--display); font-size: 16px; }
.rel-st { font-size: 12.5px; color: #3b434f; }
.bits { display: flex; flex-direction: column; gap: 8px; }
.rec .bits { gap: 6px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid #dee3ea; border-radius: 99px; font-size: 12px; }
.triple { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.rec .triple { font-size: 13px; }
.triple .pred { font-family: var(--mono); font-size: 11px; color: #1d5a7a; }
.triple .rule { font-family: var(--mono); font-size: 10.5px; color: #5d6672; padding: 1px 6px; border: 1px solid #dee3ea; border-radius: 5px; }
.gov { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.gov-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.gov-acts .btn { cursor: pointer; }
.gov-reason { display: none; flex-direction: column; gap: 8px; }
.gov-go { display: flex; flex-wrap: wrap; gap: 8px; }
.gov-go .btn.primary { display: none; }
.gov:has(input[name="action"]:checked) .gov-acts { display: none; }
.gov:has(input[name="action"]:checked) .gov-reason { display: flex; }
.gov:has(input[value="approve"]:checked) .go-approve,
.gov:has(input[value="reject"]:checked) .go-reject,
.gov:has(input[value="retract"]:checked) .go-retract,
.gov:has(input[value="revoke"]:checked) .go-revoke { display: inline-flex; }

/* Record page */
.rec { gap: 22px; }
.rec > .linkbtn { align-self: flex-start; }
.rec-head { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.rec-title { font-size: 24px; line-height: 1.2; text-wrap: pretty; }
.rec-by { font-size: 13px; color: #3b434f; }
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1280px) { .rec-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.rec-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rec-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.rec-card.is-12 { gap: 12px; } .rec-card.is-10 { gap: 10px; } .rec-card.is-4 { gap: 4px; }
.rec-hist-h { margin-bottom: 8px; }
.rec-val { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.rec-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; }
.rec-kv > span { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.rec-aa { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; }

/* Source reader */
.srcp { gap: 22px; }
.srcp > .linkbtn { align-self: flex-start; }
.srcp-head { display: flex; flex-direction: column; gap: 8px; }
.srcp-title { font-size: 24px; line-height: 1.2; }
.srcp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 900px) { .srcp-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.srcp-main, .srcp-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.srcp-side { gap: 12px; }
.srcp-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 20px; padding: 16px 18px; border: 1px solid #dee3ea; border-radius: 12px; }
.srcp-kv > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srcp-kv .v { font-size: 12.5px; word-break: break-all; }
.srcp-text { padding: 28px 32px; border: 1px solid #dee3ea; border-radius: 12px; max-width: 720px; font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.srcp-text mark { background: transparent; color: #0c1017; padding: 1px 3px; border-radius: 3px; border-bottom: 1px dashed #98a1ad; }
.srcp-text mark.is-on { background: #dcebf3; border-bottom: 0; }
@media (max-width: 899px) { .srcp-text { padding: 18px 16px; } }
.srcp-side-head { display: flex; align-items: baseline; }
.srcp-side-head .linkbtn { margin-left: auto; font-size: 12.5px; }
.cite { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; }
.cite.is-on { background: #eef5f9; }
.cite-x { font-size: 13.5px; line-height: 1.5; }
.cite .linkbtn { font-size: 12.5px; align-self: flex-start; }
.cite-rec { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #ecf0f5; border-radius: 8px; background: #fff; color: #0c1017; font-size: 12.5px; line-height: 1.4; }
.cite-rec:hover { color: #0c1017; background: #f7f9fb; }

/* Author */
.au { gap: 22px; max-width: 960px; }
.au > .linkbtn { align-self: flex-start; }
.au-head { display: flex; align-items: center; gap: 16px; }
.au-head > div { display: flex; flex-direction: column; gap: 4px; }
.au-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; }
.au-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: #dee3ea; border: 1px solid #dee3ea; border-radius: 12px; overflow: hidden; }
.au-counters > div { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; }
.au-counters .k { font-size: 12px; color: #3b434f; }
.au-counters .v { font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; }
.au-recent { display: flex; flex-direction: column; padding: 20px; }
.au-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #ecf0f5; color: #0c1017; }
.au-row:hover { color: #0c1017; background: #f7f9fb; }
.au-row > span:first-child { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }


.ont { gap: 18px; }
.ont-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ont-head-copy { display: flex; flex-direction: column; gap: 6px; max-width: 680px; }
.ont-head-copy .h1 { line-height: 1.2; }
.ont-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ont-head-actions .tab-n { font-size: 10.5px; }
.ont-ver > summary { list-style: none; }
.ont-ver > summary::-webkit-details-marker { display: none; }
.ont-ver-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border: 1px solid #c2c9d4; border-radius: 10px; background: #fff; font-size: 13px; color: #0c1017; cursor: pointer; white-space: nowrap; }
.ont-ver-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border: 1px solid #0c1017; border-radius: 99px; background: #fff; color: #3b434f; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.ont-ver-tag.is-on { background: #0c1017; color: #fff; }
.ont-ver-chev { display: inline-flex; color: #5d6672; }
.ont-ver-menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 4px); width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; background: #fff; border: 1px solid #dee3ea; border-radius: 12px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.14); overflow: hidden; }
.ont-ver-search { margin: 0; padding: 8px; border-bottom: 1px solid #ecf0f5; }
.ont-ver-search input { width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid #dee3ea; border-radius: 8px; font-size: 13px; outline: none; }
.ont-ver-search input:focus { border-color: #1d5a7a; }
.ont-ver-list { max-height: 320px; overflow-y: auto; padding: 4px; }
.ont-ver-item { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-radius: 8px; background: #fff; color: #0c1017; }
.ont-ver-item:hover, .ont-ver-item[aria-current="true"] { background: #f4f7fa; color: #0c1017; }
.ont-ver-tick { font-size: 12px; color: #1d5a7a; }
.ont-ver-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ont-ver-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ont-ver-force { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 99px; background: #0c1017; color: #fff; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.ont-ver-sub { font-size: 11.5px; color: #5d6672; }
.ont-ver-sum { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: #3b434f; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ont-ver-empty { padding: 16px; font-size: 13px; color: #5d6672; }
.ont-old { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #eef5f9; border: 1px solid #c9dce7; font-size: 13px; }
.ont-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dee3ea; overflow-x: auto; scrollbar-width: none; }
.ont-tab { height: 40px; font-size: 13.5px; }
.ont-tab-n { font-family: var(--mono); font-size: 11px; color: #5d6672; }
.ont-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1280px) { .ont-cols { grid-template-columns: minmax(0, 1fr) 320px; } }
.ont-sec-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 16px 18px; border-bottom: 1px solid #ecf0f5; }
.ont-sec-copy { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.ont-sec-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ont-h2 { margin: 0; font-family: var(--display); font-size: 16px; letter-spacing: -0.01em; }
.ont-sec-text { font-size: 12.5px; line-height: 1.5; color: #3b434f; text-wrap: pretty; }
.ont-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid #dee3ea; border-radius: 99px; background: #f4f7fa; color: #3b434f; font-size: 11.5px; white-space: nowrap; }
.ont-tag.is-edit { border-color: #c9dce7; background: #eef5f9; color: #1d5a7a; }
.ont-tag-k { font-size: 11.5px; color: #5d6672; }
.ont-dot { flex: none; width: 9px; height: 9px; border-radius: 2px; background: #24506e; }
.ont-dot.d1 { background: #2f7f8c; } .ont-dot.d2 { background: #6bb3ae; } .ont-dot.d3 { background: #d2b483; }
.ont-dot.is-lg { width: 12px; height: 12px; border-radius: 3px; }
.ont-dot.is-sm { width: 8px; height: 8px; }
.ont-tree { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
.ont-tree-row { display: flex; align-items: stretch; color: #0c1017; }
.ont-tree-row:hover { color: #0c1017; }
.ont-guide { flex: none; width: 0; background: repeating-linear-gradient(to right, transparent 0 12px, #dee3ea 12px 13px, transparent 13px 26px); }
.ont-guide.g1 { width: 26px; } .ont-guide.g2 { width: 52px; } .ont-guide.g3 { width: 78px; } .ont-guide.g4 { width: 104px; }
.ont-guide.g5 { width: 130px; } .ont-guide.g6 { width: 156px; } .ont-guide.g7 { width: 182px; } .ont-guide.g8 { width: 208px; }
.ont-tree-box { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #dee3ea; border-radius: 10px; background: #fff; }
.ont-tree-row:hover .ont-tree-box { border-color: #98a1ad; }
.ont-tree-row[aria-current="true"] .ont-tree-box { border-color: #1d5a7a; background: #eef5f9; }
.ont-tree-label { font-size: 13.5px; white-space: nowrap; }
.ont-tree-aliases { flex: 1; min-width: 0; font-size: 12px; color: #6f7885; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ont-tree-n { font-family: var(--mono); font-size: 12px; }
.ont-tree-rec { font-size: 11.5px; color: #5d6672; }
.ont-aside { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
@media (min-width: 1280px) { .ont-aside { position: sticky; top: 70px; } }
.ont-scope-title { display: flex; align-items: center; gap: 10px; }
.ont-scope-name { font-family: var(--display); font-size: 20px; letter-spacing: -0.02em; }
.ont-scope-title .code { font-size: 11.5px; }
.ont-chain { display: flex; flex-direction: column; gap: 8px; }
.ont-k { font-size: 12px; color: #5d6672; }
.ont-lh { line-height: 1.5; }
.ont-chain-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ont-chain-n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #c2c9d4; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; color: #3b434f; }
.ont-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 7px 12px; font-size: 12.5px; padding-top: 12px; border-top: 1px solid #ecf0f5; }
.ont-kv > span:nth-child(odd) { color: #5d6672; }
.ont-topics { display: flex; flex-direction: column; gap: 6px; }
.ont-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ont-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid #dee3ea; border-radius: 99px; background: #fff; font-size: 12px; color: #0c1017; }
.ont-chip:hover { border-color: #0c1017; color: #0c1017; }
.ont-none { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.ont-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid #ecf0f5; }
.ont-actions .btn, .ont-sec-head .btn, .ont-rule .btn, .ont-vmore .btn { gap: 6px; }
.ont-dep { margin: 0; padding: 10px 12px; border: 1px dashed #c2c9d4; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.ont-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; padding: 16px; }
.ont-type { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #dee3ea; border-radius: 10px; }
.ont-type-top { display: flex; align-items: baseline; gap: 8px; }
.ont-type-name { font-family: var(--display); font-size: 17px; letter-spacing: -0.01em; }
.ont-type-n { margin-left: auto; font-family: var(--display); font-size: 24px; letter-spacing: -0.03em; }
.ont-type-total { margin-top: -8px; align-self: flex-end; font-size: 11.5px; color: #5d6672; }
.ont-type-ex { font-size: 12.5px; line-height: 1.5; color: #3b434f; text-wrap: pretty; }
.ont-type-ex.is-none { color: #5d6672; }
.ont-type-topics { display: flex; flex-wrap: wrap; gap: 4px; }
.ont-sq { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid #dee3ea; border-radius: 6px; font-size: 11.5px; color: #0c1017; white-space: nowrap; }
.ont-retire { margin-top: auto; align-self: flex-start; font-size: 12px; color: #5d6672; }
.ont-retire:hover { color: #0c1017; }
.ont-retired { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.ont-retired-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px dashed #c2c9d4; border-radius: 10px; font-size: 13px; }
.ont-retired-row s { color: #6f7885; }
.ont-arrow { color: #98a1ad; }
.ont-retired-v { margin-left: auto; font-size: 11.5px; color: #5d6672; }
.ont-selc { display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; padding: 9px 12px; border-radius: 10px; background: #f4f7fa; font-size: 13px; }
.ont-concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; padding: 16px; }
.ont-concept { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #dee3ea; border-radius: 10px; background: #fff; transition: opacity 0.2s, border-color 0.2s; }
.ont-concept:hover { border-color: #98a1ad; }
.ont-concept.is-on { border-color: #0c1017; }
.ont-concept.is-dim { opacity: 0.35; }
.ont-concept-hit { position: absolute; inset: 0; border-radius: 10px; }
.ont-concept-top { display: flex; align-items: baseline; gap: 8px; }
.ont-concept-kind { font-size: 12px; color: #5d6672; }
.ont-concept-use { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #5d6672; white-space: nowrap; }
.ont-sentences { display: flex; flex-direction: column; gap: 8px; }
.ont-sentence { display: flex; flex-direction: column; gap: 2px; }
.ont-sentence-line { font-size: 13.5px; line-height: 1.5; }
.ont-subj { padding: 1px 6px; border-radius: 5px; background: #eef2f7; }
.ont-obj { position: relative; z-index: 1; padding: 1px 6px; border-radius: 5px; border: 1px solid #c2c9d4; color: #0c1017; }
.ont-obj:hover { border-color: #0c1017; color: #0c1017; }
.ont-flags { font-family: var(--mono); font-size: 10.5px; color: #5d6672; }
.ont-flag-edit { position: relative; z-index: 1; color: #1d5a7a; }
.ont-trust { --c1: 150px; --a: 0.75; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 34px 18px 14px; }
@media (max-width: 899px) { .ont-trust { --c1: 104px; } }
.ont-bar-line { position: absolute; top: 12px; bottom: 10px; left: calc(18px + var(--c1) + 12px + (100% - 120px - var(--c1)) * var(--a)); width: 0; border-left: 1.5px dashed #1d5a7a; }
.ont-bar-label { position: absolute; top: 10px; left: calc(24px + var(--c1) + 12px + (100% - 120px - var(--c1)) * var(--a)); font-size: 11px; color: #1d5a7a; white-space: nowrap; }
.ont-trust-row { display: grid; grid-template-columns: var(--c1) minmax(0, 1fr) 60px; gap: 12px; align-items: center; padding: 7px 0; color: #0c1017; }
a.ont-trust-row:hover { background: #fafbfc; color: #0c1017; }
.ont-trust-row.is-und { margin-top: 6px; border-top: 1px dashed #dee3ea; }
.ont-trust-name { display: flex; flex-direction: column; min-width: 0; }
.ont-trust-type { font-size: 13px; color: #0c1017; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ont-trust-type.is-under { color: #5d6672; }
.ont-trust-srcs { font-size: 11px; color: #5d6672; }
.ont-track { height: 10px; border-radius: 99px; background: #eef2f7; overflow: hidden; }
.ont-fill { display: block; height: 100%; border-radius: 99px; background: #0c1017; }
.ont-fill.is-under { background: #98a1ad; }
.ont-trust-w { font-family: var(--mono); font-size: 12.5px; text-align: right; color: #0c1017; }
.ont-trust-w.is-under { color: #5d6672; }
.ont-und-track { display: flex; align-items: center; gap: 10px; }
.ont-und-bar { flex: 1; height: 10px; border-radius: 99px; border: 1px dashed #98a1ad; }
.ont-und-set { flex: none; font-size: 12.5px; }
.ont-und-label { font-size: 11.5px; text-align: right; color: #9b3b3b; }
.ont-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 18px 16px; border-top: 1px solid #ecf0f5; font-size: 12px; color: #3b434f; }
.ont-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ont-legend i { width: 16px; height: 8px; border-radius: 99px; background: #98a1ad; }
.ont-legend i.is-on { background: #0c1017; }
.ont-rules { display: flex; flex-direction: column; gap: 12px; }
.ont-rule { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.ont-rule-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ont-rule-head .code { font-size: 10.5px; }
.ont-rule-v { font-family: var(--display); font-size: 32px; letter-spacing: -0.03em; }
.ont-rule-text { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.ont-rule-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ont-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; align-items: start; }
.ont-more-empty { margin: 0; padding: 14px 18px; font-size: 12.5px; line-height: 1.5; color: #5d6672; }
.ont-alias { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 18px; border-bottom: 1px solid #ecf0f5; font-family: var(--mono); font-size: 12px; }
.ont-alias-t { display: flex; flex-direction: column; gap: 2px; }
.ont-alias-l { font-family: Inter, sans-serif; font-size: 11.5px; color: #5d6672; }
.ont-vrow { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px; border-bottom: 1px solid #ecf0f5; }
.ont-vrow-top { display: flex; align-items: center; gap: 8px; }
.ont-vrow-v { font-family: var(--display); font-size: 15px; }
.ont-vrow-at { margin-left: auto; font-size: 12px; color: #5d6672; }
.ont-vrow-sum { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: #3b434f; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ont-vrow .linkbtn { align-self: flex-start; }
.ont-vmore { padding: 12px 18px; }
/* The design sets no box-sizing on these, so their border sits outside the stated height. */
.ont-tag, .ont-ver-tag, .ont-sq, .ont-chain-n { box-sizing: content-box; }
/* Drawers. */
.ont-drawer { margin: 0 0 0 auto; height: 100vh; width: min(520px, calc(100vw - 24px)); border-radius: 0; border: 0; border-left: 1px solid #dee3ea; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.14); }
.ont-drawer::backdrop { background: rgba(10, 20, 32, 0.28); }
.ont-drawer-head { box-sizing: content-box; flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid #ecf0f5; }
.ont-drawer-head .modal-x { margin-left: auto; }
.ont-drawer-title { font-family: var(--display); font-size: 17px; }
.ont-drawer-intro { flex: none; padding: 12px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.ont-drawer-body { flex: 1; overflow-y: auto; padding: 12px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.ont-prop { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #dee3ea; border-radius: 10px; }
.ont-prop-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ont-prop-at { font-size: 12px; color: #5d6672; }
.ont-prop-id { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #5d6672; }
.ont-diff { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: #f7f9fb; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.ont-diff-line { display: flex; gap: 10px; }
.ont-diff-sign { flex: none; width: 10px; color: #1d5a7a; }
.ont-diff-sign.is-add { color: #1f6a5c; } .ont-diff-sign.is-remove { color: #9b3b3b; }
.ont-diff-text { word-break: break-word; }
.ont-more-in { position: absolute; opacity: 0; pointer-events: none; }
.ont-diff.is-full, .ont-more-in:checked ~ .ont-diff.is-short, .ont-more-label .when-full, .ont-more-in:checked ~ .ont-more-label .when-short { display: none; }
.ont-more-in:checked ~ .ont-diff.is-full { display: flex; }
.ont-more-in:checked ~ .ont-more-label .when-full { display: inline; }
.ont-more-label { align-self: flex-start; font-size: 12.5px; color: #1d5a7a; cursor: pointer; }
.ont-more-in:focus-visible ~ .ont-more-label { outline: 2px solid #1d5a7a; outline-offset: 2px; }
.ont-prop-blocked { font-size: 12.5px; line-height: 1.5; color: #7d5a1f; }
.ont-prop-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ont-prop-actions form { margin: 0; }
.ont-prop-btn { height: 32px; }
.ont-nothing { padding: 32px 12px; text-align: center; font-size: 13px; color: #5d6672; }
.ont-editor { margin: 12px 12px 12px auto; }
.ont-drawer-head.is-editor { padding: 0 14px 0 22px; }
.ont-beta { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px dashed #3b434f; border-radius: 99px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.ont-base { font-size: 12px; color: #5d6672; }
.ont-x { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; font-size: 20px; color: #3b434f; cursor: pointer; }
.ont-x:hover { background: #eef2f7; }
.pt-input { position: absolute; opacity: 0; pointer-events: none; }
.ont-editor > .pe-form { display: none; flex: 1; min-height: 0; flex-direction: column; margin: 0; }
.ont-editor:has(#pt-add_scope:checked) .pe-form[data-t="add_scope"] { display: flex; }
.ont-editor:has(#pt-add_scope:checked) .pe-pill[for="pt-add_scope"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-add_decision_type:checked) .pe-form[data-t="add_decision_type"] { display: flex; }
.ont-editor:has(#pt-add_decision_type:checked) .pe-pill[for="pt-add_decision_type"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-add_class:checked) .pe-form[data-t="add_class"] { display: flex; }
.ont-editor:has(#pt-add_class:checked) .pe-pill[for="pt-add_class"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-add_relation:checked) .pe-form[data-t="add_relation"] { display: flex; }
.ont-editor:has(#pt-add_relation:checked) .pe-pill[for="pt-add_relation"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-edit_relation:checked) .pe-form[data-t="edit_relation"] { display: flex; }
.ont-editor:has(#pt-edit_relation:checked) .pe-pill[for="pt-edit_relation"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-set_authority:checked) .pe-form[data-t="set_authority"] { display: flex; }
.ont-editor:has(#pt-set_authority:checked) .pe-pill[for="pt-set_authority"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-set_resolver_rule:checked) .pe-form[data-t="set_resolver_rule"] { display: flex; }
.ont-editor:has(#pt-set_resolver_rule:checked) .pe-pill[for="pt-set_resolver_rule"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-set_scope_label:checked) .pe-form[data-t="set_scope_label"] { display: flex; }
.ont-editor:has(#pt-set_scope_label:checked) .pe-pill[for="pt-set_scope_label"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-remove_term:checked) .pe-form[data-t="remove_term"] { display: flex; }
.ont-editor:has(#pt-remove_term:checked) .pe-pill[for="pt-remove_term"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-deprecate_term:checked) .pe-form[data-t="deprecate_term"] { display: flex; }
.ont-editor:has(#pt-deprecate_term:checked) .pe-pill[for="pt-deprecate_term"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-editor:has(#pt-outline:checked) .pe-form[data-t="outline"] { display: flex; }
.ont-editor:has(#pt-outline:checked) .pe-pill[for="pt-outline"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.pe-body { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.pe-types { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid #dee3ea; background: #fff; color: #0c1017; font-size: 12.5px; cursor: pointer; }
.pe-pill:hover { border-color: #98a1ad; }
.pe-note { font-size: 12px; line-height: 1.5; color: #5d6672; }
.pe-foot { flex: none; display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid #ecf0f5; }
.pe-send { min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid #0c1017; background: #0c1017; color: #fff; font-size: 13.5px; cursor: pointer; }
.pe-send:hover { background: #2a323d; }
.pe-cancel { min-height: 40px; padding: 0 14px; border-radius: 99px; border: 0; background: transparent; font-size: 13.5px; color: #3b434f; cursor: pointer; }
.pe-remove-btn { align-self: flex-start; }
.ont-field { display: flex; flex-direction: column; gap: 6px; }
.ont-field > span { font-size: 12.5px; color: #3b434f; }
.ont-input { min-height: 38px; padding: 8px 12px; border: 1px solid #c2c9d4; border-radius: 10px; background: #fff; font-size: 13.5px; color: #0c1017; outline: none; width: 100%; }
.ont-input:focus { border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; }
.ont-area { padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; resize: vertical; }
.ont-field .hint code { font-size: 11px; }
.ont-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ont-opt { display: inline-flex; cursor: pointer; }
.ont-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ont-opt span, .ont-optlink { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid #dee3ea; background: #fff; color: #0c1017; font-size: 12px; }
.ont-opt input:checked + span, .ont-optlink.is-on { border-color: #0c1017; background: #0c1017; color: #fff; }
.ont-opt input:focus-visible + span { outline: 2px solid #1d5a7a; outline-offset: 2px; }
.ont-optlink:hover { border-color: #98a1ad; color: #0c1017; }
.ont-optlink.is-on:hover { color: #fff; }
@media (max-width: 899px) {
  .ont-drawer, .ont-editor { margin: 0; width: 100%; height: 100vh; border-radius: 0; }
}
.ont-fill.w-0 { width: 0%; } .ont-trust.at-0 { --a: 0; }
.ont-fill.w-1 { width: 1%; } .ont-trust.at-1 { --a: 0.01; }
.ont-fill.w-2 { width: 2%; } .ont-trust.at-2 { --a: 0.02; }
.ont-fill.w-3 { width: 3%; } .ont-trust.at-3 { --a: 0.03; }
.ont-fill.w-4 { width: 4%; } .ont-trust.at-4 { --a: 0.04; }
.ont-fill.w-5 { width: 5%; } .ont-trust.at-5 { --a: 0.05; }
.ont-fill.w-6 { width: 6%; } .ont-trust.at-6 { --a: 0.06; }
.ont-fill.w-7 { width: 7%; } .ont-trust.at-7 { --a: 0.07; }
.ont-fill.w-8 { width: 8%; } .ont-trust.at-8 { --a: 0.08; }
.ont-fill.w-9 { width: 9%; } .ont-trust.at-9 { --a: 0.09; }
.ont-fill.w-10 { width: 10%; } .ont-trust.at-10 { --a: 0.1; }
.ont-fill.w-11 { width: 11%; } .ont-trust.at-11 { --a: 0.11; }
.ont-fill.w-12 { width: 12%; } .ont-trust.at-12 { --a: 0.12; }
.ont-fill.w-13 { width: 13%; } .ont-trust.at-13 { --a: 0.13; }
.ont-fill.w-14 { width: 14%; } .ont-trust.at-14 { --a: 0.14; }
.ont-fill.w-15 { width: 15%; } .ont-trust.at-15 { --a: 0.15; }
.ont-fill.w-16 { width: 16%; } .ont-trust.at-16 { --a: 0.16; }
.ont-fill.w-17 { width: 17%; } .ont-trust.at-17 { --a: 0.17; }
.ont-fill.w-18 { width: 18%; } .ont-trust.at-18 { --a: 0.18; }
.ont-fill.w-19 { width: 19%; } .ont-trust.at-19 { --a: 0.19; }
.ont-fill.w-20 { width: 20%; } .ont-trust.at-20 { --a: 0.2; }
.ont-fill.w-21 { width: 21%; } .ont-trust.at-21 { --a: 0.21; }
.ont-fill.w-22 { width: 22%; } .ont-trust.at-22 { --a: 0.22; }
.ont-fill.w-23 { width: 23%; } .ont-trust.at-23 { --a: 0.23; }
.ont-fill.w-24 { width: 24%; } .ont-trust.at-24 { --a: 0.24; }
.ont-fill.w-25 { width: 25%; } .ont-trust.at-25 { --a: 0.25; }
.ont-fill.w-26 { width: 26%; } .ont-trust.at-26 { --a: 0.26; }
.ont-fill.w-27 { width: 27%; } .ont-trust.at-27 { --a: 0.27; }
.ont-fill.w-28 { width: 28%; } .ont-trust.at-28 { --a: 0.28; }
.ont-fill.w-29 { width: 29%; } .ont-trust.at-29 { --a: 0.29; }
.ont-fill.w-30 { width: 30%; } .ont-trust.at-30 { --a: 0.3; }
.ont-fill.w-31 { width: 31%; } .ont-trust.at-31 { --a: 0.31; }
.ont-fill.w-32 { width: 32%; } .ont-trust.at-32 { --a: 0.32; }
.ont-fill.w-33 { width: 33%; } .ont-trust.at-33 { --a: 0.33; }
.ont-fill.w-34 { width: 34%; } .ont-trust.at-34 { --a: 0.34; }
.ont-fill.w-35 { width: 35%; } .ont-trust.at-35 { --a: 0.35; }
.ont-fill.w-36 { width: 36%; } .ont-trust.at-36 { --a: 0.36; }
.ont-fill.w-37 { width: 37%; } .ont-trust.at-37 { --a: 0.37; }
.ont-fill.w-38 { width: 38%; } .ont-trust.at-38 { --a: 0.38; }
.ont-fill.w-39 { width: 39%; } .ont-trust.at-39 { --a: 0.39; }
.ont-fill.w-40 { width: 40%; } .ont-trust.at-40 { --a: 0.4; }
.ont-fill.w-41 { width: 41%; } .ont-trust.at-41 { --a: 0.41; }
.ont-fill.w-42 { width: 42%; } .ont-trust.at-42 { --a: 0.42; }
.ont-fill.w-43 { width: 43%; } .ont-trust.at-43 { --a: 0.43; }
.ont-fill.w-44 { width: 44%; } .ont-trust.at-44 { --a: 0.44; }
.ont-fill.w-45 { width: 45%; } .ont-trust.at-45 { --a: 0.45; }
.ont-fill.w-46 { width: 46%; } .ont-trust.at-46 { --a: 0.46; }
.ont-fill.w-47 { width: 47%; } .ont-trust.at-47 { --a: 0.47; }
.ont-fill.w-48 { width: 48%; } .ont-trust.at-48 { --a: 0.48; }
.ont-fill.w-49 { width: 49%; } .ont-trust.at-49 { --a: 0.49; }
.ont-fill.w-50 { width: 50%; } .ont-trust.at-50 { --a: 0.5; }
.ont-fill.w-51 { width: 51%; } .ont-trust.at-51 { --a: 0.51; }
.ont-fill.w-52 { width: 52%; } .ont-trust.at-52 { --a: 0.52; }
.ont-fill.w-53 { width: 53%; } .ont-trust.at-53 { --a: 0.53; }
.ont-fill.w-54 { width: 54%; } .ont-trust.at-54 { --a: 0.54; }
.ont-fill.w-55 { width: 55%; } .ont-trust.at-55 { --a: 0.55; }
.ont-fill.w-56 { width: 56%; } .ont-trust.at-56 { --a: 0.56; }
.ont-fill.w-57 { width: 57%; } .ont-trust.at-57 { --a: 0.57; }
.ont-fill.w-58 { width: 58%; } .ont-trust.at-58 { --a: 0.58; }
.ont-fill.w-59 { width: 59%; } .ont-trust.at-59 { --a: 0.59; }
.ont-fill.w-60 { width: 60%; } .ont-trust.at-60 { --a: 0.6; }
.ont-fill.w-61 { width: 61%; } .ont-trust.at-61 { --a: 0.61; }
.ont-fill.w-62 { width: 62%; } .ont-trust.at-62 { --a: 0.62; }
.ont-fill.w-63 { width: 63%; } .ont-trust.at-63 { --a: 0.63; }
.ont-fill.w-64 { width: 64%; } .ont-trust.at-64 { --a: 0.64; }
.ont-fill.w-65 { width: 65%; } .ont-trust.at-65 { --a: 0.65; }
.ont-fill.w-66 { width: 66%; } .ont-trust.at-66 { --a: 0.66; }
.ont-fill.w-67 { width: 67%; } .ont-trust.at-67 { --a: 0.67; }
.ont-fill.w-68 { width: 68%; } .ont-trust.at-68 { --a: 0.68; }
.ont-fill.w-69 { width: 69%; } .ont-trust.at-69 { --a: 0.69; }
.ont-fill.w-70 { width: 70%; } .ont-trust.at-70 { --a: 0.7; }
.ont-fill.w-71 { width: 71%; } .ont-trust.at-71 { --a: 0.71; }
.ont-fill.w-72 { width: 72%; } .ont-trust.at-72 { --a: 0.72; }
.ont-fill.w-73 { width: 73%; } .ont-trust.at-73 { --a: 0.73; }
.ont-fill.w-74 { width: 74%; } .ont-trust.at-74 { --a: 0.74; }
.ont-fill.w-75 { width: 75%; } .ont-trust.at-75 { --a: 0.75; }
.ont-fill.w-76 { width: 76%; } .ont-trust.at-76 { --a: 0.76; }
.ont-fill.w-77 { width: 77%; } .ont-trust.at-77 { --a: 0.77; }
.ont-fill.w-78 { width: 78%; } .ont-trust.at-78 { --a: 0.78; }
.ont-fill.w-79 { width: 79%; } .ont-trust.at-79 { --a: 0.79; }
.ont-fill.w-80 { width: 80%; } .ont-trust.at-80 { --a: 0.8; }
.ont-fill.w-81 { width: 81%; } .ont-trust.at-81 { --a: 0.81; }
.ont-fill.w-82 { width: 82%; } .ont-trust.at-82 { --a: 0.82; }
.ont-fill.w-83 { width: 83%; } .ont-trust.at-83 { --a: 0.83; }
.ont-fill.w-84 { width: 84%; } .ont-trust.at-84 { --a: 0.84; }
.ont-fill.w-85 { width: 85%; } .ont-trust.at-85 { --a: 0.85; }
.ont-fill.w-86 { width: 86%; } .ont-trust.at-86 { --a: 0.86; }
.ont-fill.w-87 { width: 87%; } .ont-trust.at-87 { --a: 0.87; }
.ont-fill.w-88 { width: 88%; } .ont-trust.at-88 { --a: 0.88; }
.ont-fill.w-89 { width: 89%; } .ont-trust.at-89 { --a: 0.89; }
.ont-fill.w-90 { width: 90%; } .ont-trust.at-90 { --a: 0.9; }
.ont-fill.w-91 { width: 91%; } .ont-trust.at-91 { --a: 0.91; }
.ont-fill.w-92 { width: 92%; } .ont-trust.at-92 { --a: 0.92; }
.ont-fill.w-93 { width: 93%; } .ont-trust.at-93 { --a: 0.93; }
.ont-fill.w-94 { width: 94%; } .ont-trust.at-94 { --a: 0.94; }
.ont-fill.w-95 { width: 95%; } .ont-trust.at-95 { --a: 0.95; }
.ont-fill.w-96 { width: 96%; } .ont-trust.at-96 { --a: 0.96; }
.ont-fill.w-97 { width: 97%; } .ont-trust.at-97 { --a: 0.97; }
.ont-fill.w-98 { width: 98%; } .ont-trust.at-98 { --a: 0.98; }
.ont-fill.w-99 { width: 99%; } .ont-trust.at-99 { --a: 0.99; }
.ont-fill.w-100 { width: 100%; } .ont-trust.at-100 { --a: 1; }


/* overview */
.ov { gap: 24px; }
.ov-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 18px; border: 1px solid #dee3ea; border-radius: 12px; }
.ov-ep { flex: 1; min-width: 220px; font-family: var(--mono); font-size: 13px; word-break: break-all; }
.ov-copy { height: auto; min-height: 32px; padding: 0 14px; }
.ov-clients-line { font-size: 12.5px; color: #3b434f; }
.ov-demo-text { flex: 1; min-width: 260px; font-size: 13px; line-height: 1.55; color: #3b434f; }
.ov-link { border: 0; background: none; padding: 0; color: #1d5a7a; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ov-link.is-start { align-self: flex-start; }
.ov-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ov-counter { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; color: #0c1017; }
.ov-counter:hover { border-color: #c2c9d4; background: #fafbfc; color: #0c1017; }
.ov-counter-label { font-size: 12.5px; color: #3b434f; }
.ov-counter-value { font-family: var(--display); font-size: 38px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ov-counter-sub { font-size: 12px; color: #5d6672; }
.ov-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1280px) { .ov-cols { grid-template-columns: minmax(0, 1fr) 340px; } }
.ov-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ov-card { padding: 20px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; }
.ov-card.is-flush { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ov-card.is-stack { display: flex; flex-direction: column; gap: 10px; }
.ov-card.is-roomy { gap: 12px; }
.ov-card.is-list { display: flex; flex-direction: column; gap: 2px; }
.ov-card-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; }
.ov-card-head.is-bar { padding: 14px 18px; border-bottom: 1px solid #ecf0f5; }
.ov-card-head.is-tight { padding-bottom: 8px; }
.ov-card-head.is-flat { padding-bottom: 0; }
.ov-card-head .ov-link { margin-left: auto; }
.ov-h2 { margin: 0; font-family: var(--display); font-size: 16px; }
.ov-count { font-size: 12px; color: #5d6672; }
.ov-count.is-right { margin-left: auto; }
.ov-empty { margin: 0; padding: 14px 0 0; border-top: 1px solid #ecf0f5; font-size: 13px; color: #5d6672; }
.ov-empty.is-line { padding: 9px 0; }
.ov-att { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; width: 100%; padding: 14px 0; border-top: 1px solid #ecf0f5; color: #0c1017; }
.ov-att:hover { background: #fafbfc; color: #0c1017; }
.ov-att-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ov-att-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ov-att-by { font-size: 13px; }
.ov-att-where, .ov-att-note { font-size: 12px; color: #5d6672; }
.ov-att-chip { margin-left: auto; }
.ov-att-st { font-family: var(--display); font-size: 15px; line-height: 1.35; }
.ov-feed { max-height: 460px; overflow-y: auto; }
.ov-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: 12px 18px; border-bottom: 1px solid #ecf0f5; background: #fff; color: #0c1017; }
.ov-ev:hover { background: #fafbfc; color: #0c1017; }
.ov-ev-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ov-ev-title { font-size: 13.5px; line-height: 1.4; }
.ov-ev-sub { font-size: 12px; line-height: 1.45; color: #5d6672; }
.ov-kind { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid #dee3ea; border-radius: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #3b434f; }
.ov-feed-end { padding: 16px; text-align: center; font-size: 12.5px; color: #5d6672; }
.ov-big { font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; }
.ov-sub { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.ov-sub code { font-size: 11.5px; }
.ov-client { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #ecf0f5; }
.ov-client-logo { flex: none; width: 18px; height: 18px; object-fit: contain; display: inline-flex; align-items: center; justify-content: center; color: #3b434f; }
.ov-client-name { font-size: 13px; white-space: nowrap; }
.ov-client-label { flex: 1; min-width: 0; font-size: 12.5px; color: #3b434f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-client-label.is-none { color: #5d6672; }
.ov-client-last { font-size: 11.5px; color: #5d6672; white-space: nowrap; }
.ov-used { font-size: 13px; }
.ov-meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 99px; background: #eef2f7; overflow: hidden; }
.ov-meter::-webkit-progress-bar { background: #eef2f7; border-radius: 99px; }
.ov-meter::-webkit-progress-value { background: #0c1017; border-radius: 0; }
.ov-meter::-moz-progress-bar { background: #0c1017; }
.ov-form { margin: 0; align-self: flex-start; }
.ov-version-head { display: flex; flex-direction: column; gap: 2px; }
.ov-road { display: flex; flex-direction: column; gap: 4px; }
.ov-road-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #5d6672; }
.ov-road-item { font-size: 13px; line-height: 1.6; }
.ov-create { max-width: 560px; }
.ov-create-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ov-create-form .btn { align-self: flex-start; }
/* setup */
.su { max-width: 1080px; }
.su-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.su-step { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; color: #0c1017; text-align: left; }
.su-step:hover { color: #0c1017; border-color: #c2c9d4; }
.su-step.is-current, .su-step.is-current:hover { background: #0c1017; border-color: #0c1017; color: #fff; }
.su-step.is-locked { color: #98a1ad; cursor: default; }
.su-step-n { font-family: var(--mono); font-size: 11px; }
.su-step-label { flex: 1; font-size: 13px; }
.su-step-state { font-size: 11px; opacity: 0.8; }
.su-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; }
.su-card.is-pending { gap: 18px; border: 1px dashed #3b434f; }
.su-card.is-narrow { gap: 14px; max-width: 760px; }
.su-stack { display: flex; flex-direction: column; gap: 12px; }
.su-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; border: 1px solid #0c1017; background: #0c1017; color: #fff; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.su-badge.is-pending { border: 1px dashed #3b434f; background: transparent; color: #0c1017; }
.su-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.su-text { margin: 0; font-size: 13px; line-height: 1.55; color: #3b434f; }
.su-hint { margin: 0; font-size: 12px; line-height: 1.5; color: #5d6672; }
.su-ep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f4f7fa; }
.su-ep code { flex: 1; min-width: 200px; font-family: var(--mono); font-size: 13px; word-break: break-all; }
.su-btn { height: auto; min-height: 32px; padding: 0 14px; }
.su-note { padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: #eef5f9; border: 1px solid #c9dce7; }
.su-note.is-success { background: #e3f1ee; border-color: #b9dcd3; }
.su-note.is-warning { background: #f8efdc; border-color: #e8d5ab; }
.su-row { display: flex; flex-wrap: wrap; gap: 8px; }
.su-guide { border-color: #dee3ea; }
.su-start { align-self: flex-start; }
.su-facts { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 13px; }
.su-facts dt { color: #5d6672; }
.su-facts dd { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.su-origin { display: flex; flex-direction: column; gap: 6px; }
.su-origin-head { font-size: 13.5px; }
.su-origin-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 4px 16px; padding: 8px 0; border-top: 1px solid #ecf0f5; font-size: 12.5px; }
.su-origin-t { font-family: var(--mono); font-size: 12px; }
.su-origin-w { color: #3b434f; }
.su-inline { margin: 0; align-self: flex-start; }
.su-details { border-top: 1px solid #ecf0f5; padding-top: 12px; }
.su-details > summary { cursor: pointer; font-size: 13.5px; }
.su-details[open] > summary { margin-bottom: 12px; }
.su-details.is-card { border: 1px solid #dee3ea; border-radius: 12px; padding: 16px 22px; }
.su-mono { font-family: var(--mono); font-size: 12px; }
.su-grid2, .su-grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.su-grid2.is-top, .su-grid3.is-top { align-items: start; }
@media (min-width: 900px) {
  .su-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.su-persona { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; text-align: left; color: #0c1017; }
.su-persona:hover { border-color: #0c1017; color: #0c1017; }
.su-persona-name { font-family: var(--display); font-size: 17px; }
.su-persona-scope { font-size: 12.5px; color: #3b434f; }
.su-persona-types { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; }
.su-persona-clients { font-size: 12px; color: #5d6672; }
.su-door { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; min-width: 0; }
.su-door.is-lead { border-color: #0c1017; }
.su-door-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.su-h { margin: 0; font-family: var(--display); font-size: 16px; }
.su-tag { height: 20px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.su-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.su-form .linkbtn { align-self: flex-start; font-size: 12.5px; }
.su-form .input { min-height: 38px; }
.su-prompt { padding: 12px; border-radius: 10px; background: #f4f7fa; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.su-dark { padding: 12px; border-radius: 10px; background: #0a1420; color: #c2c9d4; font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto; }
.su-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 18px; border: 1px dashed #c2c9d4; border-radius: 12px; text-align: center; cursor: pointer; }
.su-drop-title { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.su-drop-sub { font-size: 11.5px; color: #5d6672; }
.su-drop input[type="file"] { max-width: 100%; font-size: 12px; color: #3b434f; }
/* consent, answers, error pages */
.cs { max-width: 680px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.cs-list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.cs-table { border: 1px solid #dee3ea; border-radius: 10px; overflow: hidden; font-size: 13px; }
.cs-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 10px 14px; border-top: 1px solid #ecf0f5; align-items: center; overflow-wrap: anywhere; }
.cs-row.is-head { border-top: 0; background: #f7f9fb; font-size: 12px; color: #5d6672; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
@media (max-width: 599px) { .cs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cs-row.is-head { display: none; } }
.an-card { display: flex; flex-direction: column; gap: 10px; }
.an-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.an-notes { margin: 6px 0 0 18px; color: #5d6672; }
.an-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; }
.an-note { flex: 1; min-width: 200px; }
.error-page { max-width: 640px; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid #dee3ea; border-radius: 12px; }
.error-page h1 { font-family: var(--display); font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.error-page p { font-size: 13.5px; line-height: 1.55; color: #3b434f; }
.error-page form { margin: 0; }
.error-page .button { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid #c2c9d4; background: #fff; color: #0c1017; font-size: 13px; cursor: pointer; }
.error-page .button:hover { background: #eef2f7; }
.error-page code { font-family: var(--mono); font-size: 12px; }
/* users */
.u-screen { gap: 16px; }
.u-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.u-head .head-copy { gap: 6px; }
.u-head .h1 { line-height: 1.2; }
.u-head .lede { line-height: normal; }
.u-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.u-info { padding: 10px 14px; border-radius: 10px; background: #eef5f9; border: 1px solid #c9dce7; font-size: 13px; }
.u-tabs .tablist { gap: 20px; }
.u-tabs .tab { height: 40px; font-size: 13.5px; text-decoration: none; }
.u-count { font-family: var(--mono); font-size: 11px; color: #5d6672; }
.u-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.u-search { flex: 1; min-width: 220px; max-width: 360px; display: block; }
.u-search form { margin: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid #c2c9d4; border-radius: 10px; color: #5d6672; }
.u-search form:focus-within { border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; }
.u-search input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 13.5px; color: #0c1017; background: transparent; }
.u-dd-unit { width: 210px; }
.u-dd-role { width: 170px; }
.u-screen .dd-btn, .ac-screen .dd-btn { min-height: 38px; padding: 6px 10px 6px 12px; }
.u-screen .dd-btn:focus-visible { border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; outline: none; }
.u-screen .dd-chev { color: #5d6672; display: inline-flex; }
.u-screen .dd-menu { min-width: 220px; max-height: 260px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.14); }
.u-screen .dd-opt { gap: 8px; padding: 8px 10px; border-radius: 7px; white-space: normal; text-decoration: none; }
.u-screen .dd-tick { font-size: 12px; line-height: 18px; color: #1d5a7a; }
.u-screen .dd-label { font-size: 13px; line-height: 18px; white-space: pre; }
.u-screen .dd-sub { font-size: 11.5px; line-height: 1.4; }
.u-screen .modal .dd-menu { position: relative; top: auto; margin-top: 4px; max-height: 220px; min-width: 0; }
.u-screen .dd.is-invalid .dd-btn { border-color: #9b3b3b; }
.u-screen .input, .ac-screen .input, .cl-screen .input { min-height: 38px; padding: 8px 12px; }
.u-table { border: 1px solid #dee3ea; border-radius: 12px; background: #fff; overflow: hidden; }
.u-scroll { overflow-x: auto; }
.u-th, .u-tr { display: grid; gap: 14px; align-items: center; padding: 9px 16px; }
.u-th { background: #fafbfc; border-bottom: 1px solid #dee3ea; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #5d6672; }
.u-tr { padding: 11px 16px; border-bottom: 1px solid #ecf0f5; font-size: 13px; }
.u-members { min-width: 940px; }
.u-members .u-th, .u-members .u-tr { grid-template-columns: minmax(230px, 2fr) 120px minmax(170px, 1.6fr) 104px 104px 70px 40px; }
.u-invites { min-width: 900px; }
.u-invites .u-th, .u-invites .u-tr { grid-template-columns: minmax(220px, 2fr) 120px minmax(150px, 1.4fr) minmax(140px, 1fr) 100px 100px 40px; }
.u-units { min-width: 860px; }
.u-units .u-th, .u-units .u-tr { grid-template-columns: minmax(240px, 2fr) minmax(150px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) 40px; }
.u-person { display: flex; align-items: center; gap: 10px; min-width: 0; color: #0c1017; }
.u-person:hover { color: #0c1017; }
.u-person-copy { display: flex; flex-direction: column; min-width: 0; }
.u-person-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.u-person-mail { font-size: 12px; color: #5d6672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-you { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 99px; background: #eef2f7; font-size: 10.5px; color: #3b434f; }
.u-role { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid #dee3ea; border-radius: 99px; font-size: 12px; }
.u-role.is-owner { border-color: #0c1017; }
.u-role.is-admin { border-color: #3b434f; }
.u-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.u-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; max-width: 100%; min-width: 0; padding: 0 8px; border: 1px solid #dee3ea; border-radius: 6px; font-size: 11.5px; color: #0c1017; white-space: nowrap; }
.u-dot { flex: none; width: 7px; height: 7px; border-radius: 2px; background: #24506e; }
.u-dot.d1 { background: #2f7f8c; } .u-dot.d2 { background: #6bb3ae; } .u-dot.d3 { background: #d2b483; }
.u-num { font-family: var(--mono); font-size: 12.5px; }
.u-gear { justify-self: end; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dee3ea; border-radius: 8px; background: #fff; color: #3b434f; cursor: pointer; }
.u-gear:hover { background: #eef2f7; border-color: #c2c9d4; }
.u-empty { padding: 32px; text-align: center; font-size: 13px; color: #5d6672; }
.u-empty-box { padding: 28px 20px; border: 1px dashed #c2c9d4; border-radius: 12px; font-size: 13.5px; color: #3b434f; }
.u-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; background: #fafbfc; font-size: 12.5px; color: #3b434f; }
.u-pages { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.u-page-arrow { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dee3ea; border-radius: 8px; background: #fff; color: #0c1017; }
.u-page-arrow[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.u-page { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #3b434f; font-size: 12.5px; }
.u-page:hover { background: #eef2f7; color: #0c1017; }
.u-page[aria-current="page"] { background: #0c1017; color: #fff; }
.u-pending-av { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px dashed #3b434f; }
.u-pending { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border: 1px dashed #3b434f; border-radius: 99px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.u-by { display: flex; align-items: center; gap: 7px; min-width: 0; }
.u-unit { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.u-unit-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13.5px; }
.u-unit-name .code { font-size: 10.5px; white-space: nowrap; }
.u-unit-desc { font-size: 12px; line-height: 1.45; color: #5d6672; }
.u-faces-cell { display: flex; align-items: center; gap: 8px; }
.u-faces { display: flex; }
.u-face { margin-right: -6px; display: inline-flex; border: 2px solid #fff; border-radius: 50%; }
.u-more { margin-left: 6px; font-size: 12px; color: #5d6672; }
.u-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.u-link-row code { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.m-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.m-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m-label { font-size: 12.5px; color: #3b434f; }
.m-req { color: #9b3b3b; }
.m-hint { font-size: 11.5px; line-height: 1.45; color: #5d6672; }
.m-textarea { padding: 9px 12px; min-height: 0; }
.m-fixed { font-size: 13.5px; }
.m-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.m-row { display: flex; gap: 8px; margin: 0; }
.m-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #dee3ea; border: 1px solid #dee3ea; border-radius: 10px; overflow: hidden; }
.m-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #fff; }
.m-stats span { font-size: 11.5px; color: #5d6672; }
.m-stats b { font-size: 14px; }
.m-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 14px; font-size: 13px; margin: 0; }
.m-kv dt { color: #5d6672; }
.m-kv dd { margin: 0; word-break: break-word; }
.u-screen .modal.is-confirm { width: min(440px, calc(100vw - 32px)); }
.danger-note { padding: 12px 14px; border-radius: 10px; background: #f9ebea; border: 1px solid #e7c3c0; font-size: 13px; line-height: 1.5; }
/* settings */
.set { gap: 18px; }
.set-intro { display: flex; flex-direction: column; gap: 6px; }
.set-intro .h1 { line-height: 1.2; }
.set-intro .lede { line-height: normal; }
.set-ro { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #f4f7fa; border: 1px solid #dee3ea; font-size: 13px; }
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.set-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px; }
.set-nav-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; color: #3b434f; font-size: 13px; white-space: nowrap; }
.set-nav-item:hover { background: #eef2f7; color: #3b434f; }
.set-nav-item[aria-current="page"] { background: #eef2f7; color: #0c1017; }
@media (min-width: 1280px) {
  .set-grid { grid-template-columns: 210px minmax(0, 1fr); }
  .set-nav { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 72px; }
}
.set-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-card { border: 1px solid #dee3ea; border-radius: 12px; background: #fff; }
.set-card.is-flush { overflow: hidden; }
.set-card.is-danger { border-color: #e7c3c0; }
.set-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 16px 18px; border-bottom: 1px solid #ecf0f5; }
.set-head-copy { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.set-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.set-h2 { margin: 0; font-family: var(--display); font-size: 16px; letter-spacing: -0.01em; }
.set-owner { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid #dee3ea; border-radius: 99px; background: #f4f7fa; color: #3b434f; font-size: 11.5px; white-space: nowrap; }
.set-lede { font-size: 12.5px; line-height: 1.5; color: #3b434f; text-wrap: pretty; }
.set-form { margin: 0; }
.set-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 16px 18px; }
.set-names .field { min-width: 0; }
.set-input { min-height: 38px; padding: 8px 12px; }
.set-input:disabled { background: #fff; color: #0c1017; }
.set-slug { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid #dee3ea; border-radius: 10px; background: #f4f7fa; font-family: var(--mono); font-size: 12.5px; color: #0c1017; }
.set-fine { font-size: 11.5px; line-height: 1.45; color: #5d6672; }
.set-actions { padding: 0 18px 16px; }
.set-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 18px; }
.set-logo { flex: none; width: 56px; height: 56px; border-radius: 12px; background: #0c1017; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 18px; overflow: hidden; }
.set-logo.has-logo { background: #f4f7fa; }
.set-logo img { width: 100%; height: 100%; object-fit: contain; }
.set-logo-note { flex: 1; font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.set-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.set-upload { position: relative; }
.set-upload:focus-within { outline: 2px solid #1d5a7a; outline-offset: 2px; }
.set-presets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 18px; margin: 0; }
@media (min-width: 1280px) { .set-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.set-preset { display: flex; gap: 12px; padding: 14px; border: 1px solid #dee3ea; border-radius: 10px; background: #fff; text-align: left; cursor: pointer; color: #0c1017; font: inherit; }
.set-preset.is-on { border-color: #0c1017; }
.set-preset:disabled { cursor: default; }
.set-preset:not(:disabled):not(.is-on):hover { border-color: #c2c9d4; }
.set-radio { flex: none; margin-top: 2px; width: 14px; height: 14px; border: 1px solid #3b434f; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #fff; }
.set-preset.is-on .set-radio, .set-capture-opt input:checked + .set-radio { background: #0c1017; }
.set-preset-copy { display: flex; flex-direction: column; gap: 4px; }
.set-preset-label { font-size: 14px; }
.set-preset-desc { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.set-truths { display: flex; flex-direction: column; gap: 6px; padding: 0 18px 16px; }
.set-truths-head { font-size: 12px; color: #5d6672; }
.set-truth, .set-always { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.set-always { font-size: 12.5px; color: #3b434f; }
.set-scroll { overflow-x: auto; }
.set-table.is-rules { min-width: 760px; }
.set-table.is-caps { min-width: 560px; }
.set-row { display: grid; gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid #ecf0f5; font-size: 13px; }
.is-rules .set-row { grid-template-columns: 28px minmax(150px, 1fr) minmax(150px, 1.2fr) minmax(200px, 1.6fr) 100px 40px; }
.is-caps .set-row { grid-template-columns: minmax(0, 1fr) 90px 120px 90px; }
.set-row.is-head { padding: 9px 16px; background: #fafbfc; border-bottom: 1px solid #dee3ea; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #5d6672; }
.is-caps .set-row:last-child { border-bottom: 0; }
.set-row.is-default { background: #fafbfc; border-bottom: 0; }
.set-row.is-default .muted { display: inline-flex; }
.set-n { font-family: var(--mono); font-size: 12px; color: #5d6672; }
.set-applies { display: flex; align-items: center; gap: 7px; }
.set-below { font-size: 11.5px; color: #5d6672; }
.set-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: #24506e; }
.set-dot.d1 { background: #2f7f8c; } .set-dot.d2 { background: #6bb3ae; } .set-dot.d3 { background: #d2b483; }
.set-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.set-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid #dee3ea; border-radius: 6px; font-size: 11.5px; color: #0c1017; white-space: nowrap; }
.set-more { justify-self: end; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dee3ea; border-radius: 8px; background: #fff; color: #3b434f; cursor: pointer; }
.set-more:hover { background: #eef2f7; border-color: #c2c9d4; }
.set-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.set-dd-btn { min-height: 38px; padding: 6px 10px 6px 12px; }
.set-dd-chev { color: #5d6672; }
.set-dd-menu { position: relative; top: auto; margin-top: 4px; max-height: 220px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.14); }
.set-dd-menu .dd-opt { padding: 8px 10px; border-radius: 7px; white-space: normal; }
.set-dd-menu .dd-tick { color: #1d5a7a; line-height: 18px; }
.set-opt-label { font-size: 13px; line-height: 18px; }
.set-opt-label.d1 { padding-left: 12px; } .set-opt-label.d2 { padding-left: 24px; } .set-opt-label.d3 { padding-left: 36px; }
.set-del > summary { list-style: none; }
.set-del > summary::-webkit-details-marker { display: none; }
.set-del[open] { flex-basis: 100%; }
.set-del[open] > summary { margin-bottom: 8px; }
.set-domains { display: flex; flex-direction: column; padding: 6px 18px 16px; }
.set-domain { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ecf0f5; }
.set-domain-name { font-family: var(--mono); font-size: 13px; flex: 1; }
.set-empty { padding: 10px 0; font-size: 13px; color: #3b434f; }
.set-add, .set-delete { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.set-add { padding-top: 12px; }
.set-delete { padding: 16px 18px; }
.set-add-input { flex: 1; min-width: 200px; max-width: 320px; }
.set-delete-btn { height: 38px; padding: 0 16px; }
.set-delete:has(input:invalid) .set-delete-btn, .set-delete-btn:disabled { opacity: 0.4; pointer-events: none; }
.set-switch-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; margin: 0; }
.set-switch-row .switch:disabled { cursor: default; opacity: 0.6; }
.set-switch-label { font-size: 13.5px; }
.set-body-note { padding: 16px 18px; font-size: 13px; color: #3b434f; }
.set-capture { display: flex; flex-direction: column; gap: 4px; padding: 10px 18px 16px; margin: 0; }
.set-capture-opt { display: flex; gap: 12px; padding: 8px 0; cursor: pointer; color: #0c1017; }
.set-capture-opt input { position: absolute; opacity: 0; pointer-events: none; }
.set-capture-opt input:focus-visible + .set-radio { outline: 2px solid #1d5a7a; outline-offset: 2px; }
.set-capture-copy { display: flex; flex-direction: column; gap: 2px; }
.set-capture-label { font-size: 13.5px; }
.set-capture-desc { font-size: 12.5px; color: #3b434f; }
.set-consent { margin: 6px 0 8px; }
.set-export { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #ecf0f5; }
.set-export.is-last { border-bottom: 0; }
.set-export-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.set-export-sub { font-size: 12px; color: #5d6672; }
/* account */
.ac-screen { gap: 18px; }
.ac-card { border: 1px solid #dee3ea; border-radius: 12px; background: #fff; overflow: hidden; }
.ac-me { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 20px; }
.ac-me-copy { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.ac-name { font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; }
.ac-mail { font-size: 13px; color: #3b434f; }
.ac-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ac-role { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid #0c1017; border-radius: 99px; font-size: 11.5px; }
.ac-when { font-size: 12px; color: #5d6672; }
.ac-me-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: #dee3ea; border: 1px solid #dee3ea; border-radius: 12px; overflow: hidden; }
.ac-stats > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; }
.ac-stats span { font-size: 12px; color: #3b434f; }
.ac-stats b { font-family: var(--display); font-size: 26px; letter-spacing: -0.03em; }
.ac-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1280px) { .ac-cols { grid-template-columns: minmax(0, 1fr) 340px; } }
.ac-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ac-h2 { margin: 0; font-family: var(--display); font-size: 16px; }
.ac-tabs-head { padding: 14px 16px 0; }
.ac-tabs-head .ac-h2 { margin-bottom: 6px; }
.ac-bar { padding: 14px 16px; border-bottom: 1px solid #ecf0f5; }
.ac-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #ecf0f5; color: #0c1017; }
.ac-row:hover, .ac-gov:hover, .ac-act:hover { background: #fafbfc; color: #0c1017; }
.ac-row-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-st { font-size: 13.5px; line-height: 1.4; }
.ac-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5d6672; }
.ac-row .chip::before { display: none; }
.ac-none { padding: 24px 16px; font-size: 13px; color: #5d6672; }
.ac-more { padding: 12px 16px; }
.ac-gov { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid #ecf0f5; color: #0c1017; font-size: 13px; }
.ac-at { font-size: 12px; color: #5d6672; }
.ac-act { display: flex; flex-direction: column; gap: 3px; padding: 11px 16px; border-bottom: 1px solid #ecf0f5; color: #0c1017; }
.ac-act-t { font-size: 13px; line-height: 1.4; }
.ac-act-m { font-size: 11.5px; color: #5d6672; }
.ac-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #ecf0f5; }
.ac-line:last-child { border-bottom: 0; }
.ac-line-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ac-line-copy span:first-child { font-size: 13px; }
.ac-line-copy span:last-child { font-size: 12px; color: #5d6672; }
/* clients */
.cl-screen { gap: 18px; }
.cl-head { gap: 6px; max-width: 720px; }
.cl-head .h1 { line-height: 1.2; }
.cl-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: 12px; background: #0a1420; color: #fff; }
.cl-ep-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #a8d6d1; }
.cl-endpoint code { flex: 1; min-width: 220px; font-family: var(--mono); font-size: 13px; word-break: break-all; }
.cl-ep-copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid #fff; background: #fff; color: #0c1017; font-size: 12.5px; cursor: pointer; }
.cl-sec { display: flex; flex-direction: column; gap: 12px; }
.cl-h2 { margin: 0; font-family: var(--display); font-size: 16px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.cl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; color: #0c1017; font: inherit; }
.cl-card:hover { border-color: #0c1017; box-shadow: 0 1px 2px rgba(12, 16, 23, 0.04); }
.cl-tile { width: 44px; height: 44px; border-radius: 10px; background: #f4f7fa; display: inline-flex; align-items: center; justify-content: center; color: #0c1017; }
.cl-logo { display: block; object-fit: contain; }
.cl-card-copy { display: flex; flex-direction: column; gap: 3px; }
.cl-card-name { font-size: 14px; }
.cl-card-sub { font-size: 12px; color: #5d6672; }
.cl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-status { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px dashed #3b434f; border-radius: 99px; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.cl-status.is-tested { border: 1px solid #0c1017; }
.cl-conn { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 99px; background: #e3f1ee; color: #1f6a5c; font-size: 11px; }
.cl-conn i { width: 6px; height: 6px; border-radius: 50%; background: #1f6a5c; }
.cl-table { border: 1px solid #dee3ea; border-radius: 12px; background: #fff; overflow: hidden; }
.cl-table-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #ecf0f5; font-size: 12px; }
.cl-grants { min-width: 980px; }
.cl-grants .u-th, .cl-grants .u-tr { grid-template-columns: minmax(200px, 1.4fr) minmax(130px, 1fr) 120px minmax(170px, 1.2fr) 104px 100px 76px 40px; }
.cl-client { display: flex; align-items: center; gap: 10px; }
.cl-mini { width: 30px; height: 30px; border-radius: 8px; background: #f4f7fa; display: inline-flex; align-items: center; justify-content: center; }
.cl-mono { font-family: var(--mono); font-size: 11.5px; color: #3b434f; overflow-wrap: anywhere; }
.cl-status-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.cl-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cl-steps li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.cl-steps code { font-family: var(--mono); font-size: 12px; background: #f4f7fa; padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.cl-step-n { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #c2c9d4; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; }
.cl-snip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #0a1420; }
.cl-snip code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #fff; word-break: break-all; white-space: pre-wrap; }
.cl-snip-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid #fff; background: #fff; font-size: 12px; cursor: pointer; color: #0c1017; }
.cl-conn-text { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.cl-screen .modal.is-confirm, .ac-screen .modal.is-confirm { width: min(440px, calc(100vw - 32px)); }


/* shared */
.gv { display: flex; flex-direction: column; gap: 16px; }
.gv-head { display: flex; flex-direction: column; gap: 6px; }
.gv-h1 { margin: 0; font-family: var(--display); font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.gv-sub { margin: 0; font-size: 13.5px; color: #3b434f; }
.gv-card { border: 1px solid #e6eaf0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(12, 16, 23, 0.03); }
.gv-empty { padding: 40px; border: 1px solid #e6eaf0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(12, 16, 23, 0.03); text-align: center; font-size: 13.5px; color: #5d6672; }
.gv-empty.is-sm { padding: 32px; font-size: 13px; }
.gv-k { font-size: 11.5px; color: #5d6672; padding-bottom: 6px; }
.gv-k0 { font-size: 11.5px; color: #5d6672; }
.val-tag.is-sm { padding: 3px 8px; border-radius: 6px; }
.rv-link { align-self: flex-start; font-size: 12.5px; color: #1d5a7a; }
.rv-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; cursor: pointer; background: #fff; color: #0c1017; border: 1px solid #dee3ea; }
.rv-btn:hover { background: #f4f7fa; }
.rv-btn.is-primary { background: #0c1017; color: #fff; border-color: #0c1017; }
.rv-btn.is-primary:hover { background: #2a323d; }
.rv-reason-in { width: 100%; padding: 9px 12px; border: 1px solid #dee3ea; border-radius: 10px; font-size: 13px; line-height: 1.5; resize: vertical; outline: none; background: #fff; color: #0c1017; }
/* The design dims the gestures until a reason is written; `required` still refuses an empty one. */
.rv-form:has(.rv-reason-in:placeholder-shown) .rv-btn, form:has(.rv-reason-in:placeholder-shown) .rv-btn { opacity: 0.4; }
.cx-main:has(.rv-reason-in:placeholder-shown) .rv-btn { opacity: 0.4; }
.rv-reason-in:focus { border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; }

/* review */
.rv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.rv-list { display: flex; flex-direction: column; gap: 8px; }
.rv-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid #dee3ea; background: #fff; color: #0c1017; }
.rv-item:hover { color: #0c1017; border-color: #c2c9d4; }
.rv-item[aria-current="true"] { border-color: #1d5a7a; background: #f4f7fa; }
.rv-item-st { font-size: 13.5px; line-height: 1.4; }
.rv-item-meta { font-size: 12px; color: #5d6672; }
.rv-item-by { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #5d6672; }
.rv-item-wait { margin-left: auto; }
.rv-detail { display: flex; flex-direction: column; }
.rv-d-head { padding: 16px 18px; border-bottom: 1px solid #eef1f5; display: flex; flex-direction: column; gap: 10px; }
.rv-d-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rv-d-topic { font-size: 12px; color: #5d6672; }
.rv-d-ext { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #5d6672; }
.rv-d-st { font-family: var(--display); font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }
.rv-d-by { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #5d6672; }
.rv-d-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.rv-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; align-items: stretch; }
.rv-cmp-now, .rv-cmp-new { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid #e6eaf0; background: #f7f9fb; }
.rv-cmp-new { border-color: #0c1017; background: #fff; }
.rv-cmp-v { font-family: var(--display); font-size: 18px; color: #0c1017; }
.rv-cmp-v.is-none { color: #5d6672; }
.rv-cmp-via { font-size: 12px; color: #5d6672; }
.rv-warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #eef2f7; font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.rv-reason { display: block; font-size: 13.5px; }
.rv-reason-t { display: block; font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.rv-ev { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #f7f9fb; }
.rv-ev-x { font-size: 13.5px; line-height: 1.55; }
.rv-ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: #5d6672; }
.rv-ev-open { margin-left: auto; font-size: 12.5px; }
.rv-d-foot { padding: 14px 18px; border-top: 1px solid #eef1f5; background: #fafbfc; border-radius: 0 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.rv-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.rv-btns { display: flex; gap: 8px; }
.rv-note, .rv-approvals { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
@media (min-width: 1280px) { .rv-grid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); } }

/* conflicts */
.cx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; color: #0c1017; }
.cx-row:hover { color: #0c1017; border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; }
.cx-row-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cx-row-top { display: flex; align-items: center; gap: 8px; }
.cx-row-at { font-size: 12px; color: #5d6672; }
.cx-row-q { font-size: 15px; }
.cx-row-vals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cx-or { font-size: 12px; color: #5d6672; }
.cx-row-go { color: #1d5a7a; }
.cx-page { margin: -22px -28px -96px; min-height: calc(100vh - 52px); display: flex; flex-direction: column; }
.cx-top { padding: 18px 28px; border-bottom: 1px solid #eef1f5; }
.cx-crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #98a1ad; }
.cx-crumb a { color: #5d6672; }
.cx-crumb a.ink { color: #0c1017; }
.cx-tags { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.cx-flag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px; border-radius: 6px; background: #fbf3e4; color: #7a4b12; border: 1px solid #ecd9b6; font-size: 11.5px; }
.cx-q { margin: 10px 0 0; font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; }
.cx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; font-size: 12.5px; color: #5d6672; }
.cx-meta-at { display: flex; align-items: center; gap: 6px; }
.cx-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
.cx-main { padding: 20px 28px 96px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cx-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cx-side { display: flex; flex-direction: column; border: 1px solid #dee3ea; border-radius: 12px; background: #fff; overflow: hidden; }
.cx-side.is-win { border-color: #0c1017; }
.cx-side-head { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #eef1f5; }
.cx-side-tags { display: flex; gap: 6px; align-items: center; }
.cx-win { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #0c1017; color: #fff; font-size: 11.5px; }
.cx-side-st { font-size: 14px; line-height: 1.35; }
.cx-side-kv { padding: 4px 16px 10px; }
.cx-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 34px; font-size: 12.5px; }
.cx-kv > span:first-child { color: #5d6672; }
.cx-kv > span:last-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; word-break: break-word; }
.cx-who { gap: 8px !important; }
.cx-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef1f5; }
.cx-cant { font-size: 12px; line-height: 1.45; color: #5d6672; }
.cx-overlap { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 3px double #0c1017; background: #fff; font-size: 13px; }
.cx-overlap svg { color: #7a4b12; }
.cx-gov { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #f7f9fb; border: 1px solid #e6eaf0; font-size: 13px; }
.cx-gov.is-note { padding: 12px 16px; line-height: 1.5; color: #3b434f; }
.cx-out { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px; border: 1px solid #0c1017; font-size: 13px; }
.cx-out .ink2 { font-size: 12.5px; }
.cx-aside { padding: 20px; background: #fafbfc; border-top: 1px solid #eef1f5; min-width: 0; }
.cx-aside-t { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.cx-rule { height: 1px; background: #e6eaf0; margin: 16px 0; }
.cx-until { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid #e6eaf0; background: #fff; font-size: 12.5px; }
.cx-until-v { font-size: 12px; color: #5d6672; }
@media (min-width: 1280px) {
  .cx-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .cx-aside { border-top: 0; border-left: 1px solid #eef1f5; }
}
@media (max-width: 899px) {
  .cx-page { margin: -18px -16px -120px; }
  .cx-top { padding: 18px 16px; }
  .cx-main { padding: 20px 16px 24px; }
  .cx-aside { padding: 20px 16px 120px; }
  .cx-sides { grid-template-columns: minmax(0, 1fr); }
}

/* activity */
.ay { max-width: 980px; }
.ay-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ay-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid #dee3ea; background: #fff; color: #0c1017; font-size: 12.5px; }
.ay-chip:hover { color: #0c1017; border-color: #c2c9d4; }
.ay-chip[aria-current="true"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.ay-day { overflow: hidden; }
.ay-dayhead { padding: 10px 16px; border-bottom: 1px solid #eef1f5; font-size: 12px; color: #5d6672; background: #fafbfc; }
.ay-row { position: relative; display: grid; grid-template-columns: 44px 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-bottom: 1px solid #f0f2f5; background: #fff; color: #0c1017; }
.ay-row:last-child { border-bottom: 0; }
.ay-row:hover { background: #f7f9fb; }
.ay-time { padding-top: 4px; font-family: var(--mono); font-size: 11px; color: #5d6672; }
.ay-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ay-title { font-size: 13.5px; line-height: 1.4; color: #0c1017; }
.ay-title:hover { color: #0c1017; }
/* The title is the row's link, stretched over it; the author and the source stay links above it. */
.ay-title::after { content: ""; position: absolute; inset: 0; }
.ay-desc a { position: relative; z-index: 1; color: #5d6672; }
.ay-desc a:hover { color: #0c1017; text-decoration: underline; }
.ay-desc { font-size: 12px; line-height: 1.45; color: #5d6672; }
.ay-kind { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid #dee3ea; border-radius: 6px; font-size: 11px; color: #3b434f; white-space: nowrap; }
@media (max-width: 599px) {
  .ay-row { grid-template-columns: 36px 26px minmax(0, 1fr); gap: 10px; }
  .ay-kind { display: none; }
}


/* decisions list ========================================================== */
.dl { gap: 16px; }
.dl-head { display: flex; flex-direction: column; gap: 6px; }
.dl-title { line-height: 1.2; }
.dl-head .lede { line-height: normal; }
.dl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dl-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid #dee3ea; background: #fff; color: #0c1017; font-size: 12.5px; white-space: nowrap; }
.dl-pill:hover { color: #0c1017; border-color: #c2c9d4; }
.dl-pill-n { font-family: var(--mono); font-size: 11px; color: #5d6672; }
.dl-pill[aria-current="true"] { border-color: #0c1017; background: #0c1017; color: #fff; }
.dl-pill[aria-current="true"] .dl-pill-n { color: #c2c9d4; }
.dl-dd { min-width: 0; }
.dl-dd.is-scope { width: 170px; }
.dl-dd.is-type { width: 150px; }
.dl-dd-btn { width: 100%; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border: 1px solid #dee3ea; border-radius: 8px; background: #fff; font-size: 12.5px; color: #0c1017; cursor: pointer; }
.dl-dd-btn .dd-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-dd-btn .dd-val.is-ph { color: #5d6672; }
.dl-dd-btn svg { color: #5d6672; }
.dl-dd .dd-menu { width: max-content; max-width: 280px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.14); }
.dl-opt { gap: 8px; border-radius: 7px; font-size: 12.5px; white-space: pre; align-items: center; }
.dl-opt .dd-tick { width: 12px; color: #1d5a7a; }
.dl-card { border: 1px solid #e6eaf0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(12, 16, 23, 0.03); overflow: hidden; }
.dl-scroll { overflow-x: auto; }
.dl-table { min-width: 620px; }
.dl-row { display: grid; grid-template-columns: minmax(220px, 2fr) 140px minmax(160px, 1.2fr) 90px; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f0f2f5; background: #fff; color: #0c1017; text-align: left; }
.dl-row:hover { background: #f7f9fb; color: #0c1017; }
.dl-row.is-head { padding: 10px 16px; border-bottom-color: #eef1f5; font-size: 11.5px; color: #5d6672; }
.dl-row.is-head:hover { background: #fff; }
.dl-row .w { display: none; }
.dl-dec { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-name { font-size: 13.5px; }
.dl-st { font-size: 12px; line-height: 1.4; color: #5d6672; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-type { font-size: 12.5px; color: #3b434f; }
.dl-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dl-wait { font-size: 11.5px; color: #5d6672; }
.dl-scopes { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dl-sc { display: inline-flex; align-items: center; gap: 6px; height: 22px; max-width: 100%; min-width: 0; padding: 0 7px; border: 1px solid #e6eaf0; border-radius: 6px; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.dl-sc .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dl-sc::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: #24506e; }
.dl-sc.tone-d1::before { background: #2f7f8c; } .dl-sc.tone-d2::before { background: #6bb3ae; } .dl-sc.tone-d3::before { background: #d2b483; }
.dl-more { font-size: 11.5px; color: #5d6672; align-self: center; }
.dl-by { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.dl-upd { font-size: 12px; color: #5d6672; }
.dl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px; font-size: 13px; color: #5d6672; }
@media (min-width: 1280px) {
  .dl-table { min-width: 1000px; }
  .dl-row { grid-template-columns: minmax(260px, 2.4fr) 120px 150px minmax(200px, 1.6fr) 150px 96px; }
  .dl-row .w { display: flex; }
}
/* sources list ============================================================ */
.sl-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #eef2f7; border: 1px solid #dee3ea; font-size: 12.5px; }
.sl-warn .grow { min-width: 220px; }
.sl-table { min-width: 860px; }
.sl-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 110px 150px 70px; gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid #f0f2f5; background: #fff; color: #0c1017; font-size: 13px; }
.sl-row:hover { background: #f7f9fb; color: #0c1017; }
.sl-row.is-head { padding: 10px 16px; border-bottom-color: #eef1f5; font-size: 11.5px; color: #5d6672; }
.sl-row.is-head:hover { background: #fff; }
.sl-src { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sl-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #f1f4f8; color: #1d5a7a; display: flex; align-items: center; justify-content: center; }
.sl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-ref { font-family: var(--mono); font-size: 10.5px; color: #5d6672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-type { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.sl-type span:last-child { font-size: 11.5px; }
.sl-row > .ink2 { font-size: 12.5px; }
.sl-by { display: flex; align-items: center; gap: 7px; font-size: 12.5px; min-width: 0; }
.sl-n { font-size: 12px; }
/* one decision ============================================================ */
.dc { margin: -22px -28px -96px; min-height: calc(100vh - 52px); display: flex; flex-direction: column; }
.dc-top { padding: 18px 28px 0; border-bottom: 1px solid #eef1f5; }
.dc-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dc-crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5d6672; }
.dc-crumb a { color: #5d6672; }
.dc-crumb a:hover { color: #0c1017; }
.dc-crumb svg { color: #98a1ad; }
.dc-crumb span { color: #0c1017; }
.dc-acts { display: flex; gap: 8px; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; cursor: pointer; background: #fff; color: #0c1017; border: 1px solid #dee3ea; box-shadow: 0 1px 1px rgba(12, 16, 23, 0.04); }
.dc-btn:hover { border-color: #98a1ad; color: #0c1017; }
.dc-btn.is-dark { background: #0c1017; color: #fff; border-color: #0c1017; box-shadow: none; }
.dc-btn.is-dark:hover { background: #1d2633; color: #fff; }
.dc-tags { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.dc-code { margin-left: 6px; font-family: var(--mono); font-size: 11px; color: #5d6672; }
.dc-title { margin: 10px 0 0; max-width: 820px; font-family: var(--display); font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }
.dc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; font-size: 12.5px; color: #5d6672; }
.dc-meta-i { display: flex; align-items: center; gap: 6px; }
.dc-meta-i:first-child { gap: 8px; }
.dc-meta .ink { color: #0c1017; }
.dc-tabs { display: flex; gap: 22px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.dc-tab { display: flex; align-items: center; gap: 6px; padding: 0 0 11px; font-size: 13px; color: #5d6672; white-space: nowrap; }
.dc-tab:hover { color: #0c1017; }
.dc-tab[aria-current="page"] { color: #0c1017; box-shadow: inset 0 -2px 0 #0c1017; }
.dc-tab-n { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px; background: #eef2f7; font-size: 10.5px; color: #3b434f; }
.dc-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.dc-main { padding: 20px 28px 96px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dc-insp { padding: 20px; background: #fafbfc; border-top: 1px solid #eef1f5; min-width: 0; }
@media (min-width: 1280px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .dc-insp { border-left: 1px solid #dee3ea; }
}
@media (max-width: 899px) {
  .dc { margin: -22px -16px -120px; }
  .dc-top { padding: 18px 16px 0; }
  .dc-main { padding: 20px 16px 40px; }
  .dc-insp { padding: 20px 16px 120px; }
}
.dc-card { border: 1px solid #e6eaf0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(12, 16, 23, 0.03); }
.dc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 16px; font-size: 13px; color: #0c1017; }
.dc-card-h .muted { font-size: 12px; }
.dc-none { padding: 16px; font-size: 13px; color: #5d6672; }
.dc-none.is-c { padding: 32px; text-align: center; }
.dc-src { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.dc-doc { flex: none; width: 36px; height: 36px; border-radius: 9px; background: #f1f4f8; color: #1d5a7a; display: flex; align-items: center; justify-content: center; }
.dc-src-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.dc-src-t .muted { font-size: 12px; }
.dc-quote { margin: 0 16px 16px; padding: 14px 16px; border-radius: 10px; background: #f7f9fb; display: flex; gap: 12px; }
.dc-quote-m { color: #98a1ad; padding-top: 2px; }
.dc-quote-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dc-quote-t { font-size: 14px; line-height: 1.6; color: #3b434f; }
.dc-quote-t mark { color: #0c1017; padding: 1px 3px; border-radius: 4px; background: #dcebf3; }
.dc-quote-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: #5d6672; }
.dc-acts-list { padding: 0 16px 10px; }
.dc-act { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; position: relative; width: 100%; padding: 7px 0; color: #0c1017; }
.dc-act:hover { color: #0c1017; }
.dc-act-line { position: absolute; left: 10.5px; top: 30px; bottom: -8px; width: 1px; background: #e6eaf0; }
.dc-act-t { font-size: 12.5px; line-height: 1.4; color: #3b434f; }
.dc-act .muted { font-size: 12px; }
.ap { padding: 0 6px 8px; }
.ap-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 150px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; min-height: 38px; padding: 4px 10px; border-radius: 8px; border: 1px solid transparent; background: #fff; color: #0c1017; font-size: 13px; }
.ap-row:hover { background: #f7f9fb; color: #0c1017; }
.ap-row[aria-current="true"] { background: #f4f7fa; border-color: #dee3ea; }
.ap-row.is-head { min-height: 0; padding: 0 10px 8px; font-size: 11.5px; color: #5d6672; }
.ap-row.is-head:hover { background: #fff; }
.ap-sc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ap-row.d1 .ap-sc { padding-left: 18px; } .ap-row.d2 .ap-sc { padding-left: 36px; } .ap-row.d3 .ap-sc { padding-left: 54px; }
.ap-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: #24506e; }
.ap-dot.is-lg { width: 9px; height: 9px; }
.ap-dot.tone-d1 { background: #2f7f8c; } .ap-dot.tone-d2 { background: #6bb3ae; } .ap-dot.tone-d3 { background: #d2b483; }
.ap-val { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #0c1017; }
.ap-val.is-none { color: #98a1ad; }
.ap-pend { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px dashed #98a1ad; border-radius: 5px; font-size: 10.5px; color: #3b434f; }
.ap-via { font-size: 12.5px; color: #5d6672; }
.ap-via.is-here { color: #0c1017; }
.hl { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.hl-lane { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; }
.hl-scope { display: flex; align-items: center; gap: 8px; padding-top: 12px; font-size: 12.5px; }
.hl-cards { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.hl-arrow { display: flex; align-items: center; color: #98a1ad; }
.hl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 170px; padding: 12px; border-radius: 12px; border: 1px solid #dee3ea; background: #fff; color: #0c1017; transition: box-shadow 0.2s, border-color 0.2s; }
.hl-card:hover { color: #0c1017; border-color: #98a1ad; }
.hl-card.is-old { opacity: 0.72; }
.hl-card[aria-current="true"] { border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; }
.hl-val { font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; }
.hl-val.is-struck { text-decoration: line-through; }
.dcf-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #e6eaf0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(12, 16, 23, 0.03); color: #0c1017; }
.dcf-card:hover { color: #0c1017; border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; }
.dcf-top { display: flex; align-items: center; gap: 8px; }
.dcf-open { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; color: #1d5a7a; }
.dcf-q { font-size: 15px; }
.dcf-sides { display: flex; align-items: center; gap: 10px; }
.dcf-v { padding: 4px 10px; border-radius: 7px; border: 1px solid #ecd9b6; background: #fbf3e4; color: #7a4b12; font-size: 13px; }
.dcf-v.is-win { box-shadow: 0 0 0 2px #0c1017; }
.dc-ex { margin: 0 16px 12px; padding: 12px 14px; border-radius: 10px; background: #f7f9fb; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.55; }
.dc-backs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 14px; font-size: 12px; color: #5d6672; }
.dc-back { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid #e6eaf0; border-radius: 6px; font-size: 11.5px; color: #0c1017; }
.dc-back.is-struck { text-decoration: line-through; }
.dc-backs-by { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
/* inspector */
.dc-sec-l { font-size: 11.5px; color: #5d6672; padding-bottom: 6px; }
.dc-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 34px; font-size: 12.5px; }
.dc-kv-v { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #0c1017; min-width: 0; word-break: break-word; }
.dc-person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dc-person a { color: #0c1017; white-space: nowrap; }
.dc-rule { height: 1px; background: #e6eaf0; margin: 16px 0; }
.dc-rel { display: flex; flex-direction: column; gap: 8px; }
.dc-rel-i { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid #e6eaf0; background: #fff; color: #0c1017; }
.dc-rel-i:hover { border-color: #98a1ad; color: #0c1017; }
.dc-rel-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: #5d6672; }
.dc-rel-st { font-size: 12.5px; line-height: 1.4; }
.dc-ai { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; padding: 12px 14px; border-radius: 10px; background: #0a1420; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: #c2c9d4; }
.dc-ai .v { color: #fff; }
.dc-ai.is-one { display: block; padding: 10px 12px; color: #fff; }
.dc-insp .gov .btn { height: 30px; min-height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; }
.sc-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid #e6eaf0; background: #fff; }
.sc-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.sc-val { font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; }
.sc-why { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.sc-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; color: #0c1017; }
.sc-step.is-past { color: #98a1ad; }
.sc-n { width: 20px; height: 20px; border-radius: 6px; border: 1px solid #c2c9d4; background: #fff; color: #3b434f; display: flex; align-items: center; justify-content: center; font-size: 10.5px; }
.sc-n.is-hit { background: #0c1017; color: #fff; border-color: #0c1017; }
.sc-l { font-size: 12.5px; }
.sc-step .muted { font-size: 12px; }
.vi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; }
.vi-val { font-family: var(--display); font-size: 18px; }
.vi-st { display: block; font-size: 12.5px; line-height: 1.45; color: #3b434f; padding-bottom: 6px; }
.vi-why { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: #f4f7fa; font-size: 13px; line-height: 1.45; }
.vi-why .muted { font-size: 11.5px; }


/* frame: the page column gives Ask the whole height */
.page:has(> .ak) { padding: 0; gap: 0; }
.ak { display: grid; grid-template-columns: minmax(0, 1fr); height: calc(100vh - 52px); min-height: 540px; }
.ak.has-conv { grid-template-columns: minmax(0, 1fr) 300px; }
.ak.has-pane { grid-template-columns: minmax(0, 1fr) 420px; }
.ak-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ak-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 20px; border-bottom: 1px solid transparent; }
.ak-bar.has-line { border-bottom-color: #eef1f5; }
.ak-bar-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-bar-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #3b434f; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ak-bar-btn:hover { background: #eef2f7; color: #0c1017; }
.ak-hist-btn { display: none; }
.ak-bar-btn.is-narrow { display: none; }
.ak-bar-new { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid #dee3ea; border-radius: 8px; background: #fff; color: #0c1017; font-size: 12.5px; white-space: nowrap; }
.ak-bar-new:hover { border-color: #98a1ad; color: #0c1017; }
.ak-thread { flex: 1; min-height: 0; overflow-y: auto; }
.ak-flash { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.ak-flash:has(.flash) { padding-top: 16px; }
.ak-msgs { max-width: 720px; margin: 0 auto; padding: 28px 20px 36px; display: flex; flex-direction: column; gap: 30px; }
.ak-msgs:empty { display: none; }
/* empty state */
.ak-empty { max-width: 640px; margin: 0 auto; padding: 14vh 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ak-empty-h { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; }
.ak-empty-p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #5d6672; }
.ak-empty-box { width: 100%; text-align: left; }
.ak-sugg { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ak-sugg-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: #f4f7fa; border: 1px solid #e6eaf0; font-size: 12.5px; color: #0c1017; cursor: pointer; white-space: nowrap; }
.ak-sugg-btn:hover { border-color: #98a1ad; }
.ak-off { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px dashed #c2c9d4; border-radius: 12px; font-size: 13px; line-height: 1.5; color: #3b434f; text-align: left; }
.ak-bottom .ak-off { max-width: 720px; margin: 0 auto 8px; }
.ak-mark { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #0c1017; color: #a8d6d1; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ak-mark.is-sm { width: 22px; height: 22px; border-radius: 6px; }
/* composer */
.ak-composer { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 10px 8px 16px; border: 1px solid #dee3ea; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(12, 16, 23, 0.05); }
.ak-composer textarea { width: 100%; border: 0; outline: none; resize: none; padding: 0; font-size: 14.5px; line-height: 1.5; color: #0c1017; background: transparent; }
.ak-composer textarea:disabled { background: transparent; color: #98a1ad; }
.ak-tools { display: flex; align-items: center; gap: 2px; margin-left: -8px; min-width: 0; }
.ak-tools > .ak-dd { min-width: 0; flex: 0 1 auto; }
.ak-dd > summary { list-style: none; }
.ak-dd-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; font-size: 12.5px; color: #3b434f; cursor: pointer; max-width: 220px; min-width: 0; }
.ak-dd-btn:hover, .ak-dd[open] > .ak-dd-btn { background: #eef2f7; color: #0c1017; }
.ak-dd-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-dd-menu { width: 250px; max-height: 300px; padding: 4px; border-radius: 10px; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.14); }
.ak-dd-menu.is-bottom { top: auto; bottom: calc(100% + 6px); }
.ak-dd-menu.is-top { top: calc(100% + 6px); }
.ak-dd-menu .dd-opt { gap: 8px; padding: 8px 10px; border-radius: 7px; }
.ak-dd-menu .dd-tick { width: 12px; font-size: 12px; line-height: 18px; color: #1d5a7a; }
.ak-opt-label { font-size: 13px; line-height: 18px; white-space: pre; }
.ak-send { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: #0c1017; color: #fff; cursor: pointer; }
.ak-send:disabled { opacity: 0.35; cursor: not-allowed; }
.ak-composer:has(textarea:placeholder-shown) .ak-send { opacity: 0.35; }
.ak-bottom { flex: none; padding: 8px 20px 16px; background: #fff; }
.ak-bottom .ak-composer { max-width: 720px; margin: 0 auto; }
/* messages */
.ak-user { align-self: flex-end; max-width: min(520px, 85%); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ak-bubble { padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #f1f4f8; font-size: 14px; line-height: 1.5; text-wrap: pretty; white-space: pre-wrap; }
.ak-user-sub { font-size: 11.5px; color: #6f7885; }
.ak-bot { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; scroll-margin-top: 16px; }
.ak-bot-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 2px; }
.ak-bot-status { display: flex; align-items: center; gap: 8px; }
.ak-answer { font-size: 14.5px; line-height: 1.65; color: #0c1017; text-wrap: pretty; }
.ak-answer p, .ak-answer ul, .ak-answer ol { margin: 0 0 10px; }
.ak-answer p:last-child, .ak-answer ul:last-child, .ak-answer ol:last-child { margin-bottom: 0; }
.ak-answer ul, .ak-answer ol { padding-left: 20px; }
.ak-answer li { margin: 2px 0; }
.ak-answer strong { font-weight: 500; }
.ak-answer:empty { display: none; }
.ak-typing { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.ak-typing-step { font-size: 12.5px; color: #5d6672; }
.ak-typing-bar { height: 8px; width: 90%; border-radius: 4px; background: #eef2f7; }
.ak-typing-bar.is-short { width: 66%; }
.ak-n { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: #dcebf3; font-family: var(--mono); font-size: 10px; color: #1d5a7a; margin: 0 1px; vertical-align: 2px; }
a.ak-n:hover { background: #c9dce7; color: #1d5a7a; }
.ak-hc { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; white-space: nowrap; background: #fff; color: #0c1017; border: 1px solid #0c1017; }
.ak-hc::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ak-hc.is-current { background: #0c1017; color: #fff; }
.ak-hc.is-contested { border: 3px double #0c1017; }
.ak-hc.is-gap { background: #eef2f7; color: #3b434f; border-color: #c2c9d4; }
.ak-hc.is-gap::before, .ak-hc.is-none::before, .ak-hc.is-proposed::before, .ak-hc.is-closed::before { background: transparent; border: 1.5px solid currentColor; }
.ak-hc.is-proposed { border: 1px dashed #5d6672; }
.ak-hc.is-superseded { background: #f4f7fa; color: #5d6672; border-color: #dee3ea; text-decoration: line-through; }
.ak-hc.is-closed { background: #f4f7fa; color: #5d6672; border-color: #dee3ea; }
.ak-hc.is-none { color: #5d6672; border: 1px dashed #c2c9d4; }
.ak-main { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 520px; padding: 14px 16px; border-radius: 12px; border: 1px solid #dee3ea; background: #fff; color: #0c1017; box-shadow: 0 1px 2px rgba(12, 16, 23, 0.04); }
.ak-main:hover { border-color: #1d5a7a; box-shadow: 0 0 0 3px #dcebf3; color: #0c1017; }
.ak-main-top { display: flex; align-items: center; gap: 6px; }
.ak-kc { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px; border-radius: 6px; background: #dcebf3; color: #1d5a7a; border: 1px solid #a9c7d8; font-size: 11.5px; }
.ak-kc.is-claim { background: #fff; color: #3b434f; border-color: #c2c9d4; }
.ak-open { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; color: #1d5a7a; }
.ak-main-st { font-size: 14px; line-height: 1.4; }
.ak-main-by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5d6672; }
.ak-srcs { display: flex; flex-direction: column; gap: 6px; }
.ak-lbl { font-size: 11.5px; color: #5d6672; }
.ak-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-src { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; background: #f4f7fa; border: 1px solid #e6eaf0; font-size: 12px; color: #0c1017; white-space: nowrap; }
.ak-src svg { color: #5d6672; }
.ak-src:hover { border-color: #98a1ad; color: #0c1017; }
.ak-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #5d6672; cursor: pointer; }
.ak-more > summary::-webkit-details-marker { display: none; }
.ak-more > summary:hover { color: #0c1017; }
.ak-more .ak-more-open, .ak-more[open] .ak-more-closed { display: none; }
.ak-more[open] .ak-more-open { display: inline; }
.ak-cites { margin-top: 6px; display: flex; flex-direction: column; border: 1px solid #e6eaf0; border-radius: 10px; overflow: hidden; }
.ak-cite { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #f0f2f5; background: #fff; color: #0c1017; }
.ak-cite:last-child { border-bottom: 0; }
.ak-cite:hover { background: #f7f9fb; color: #0c1017; }
.ak-cite-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ak-cite-st { font-size: 12.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-cite-where { font-size: 11.5px; color: #5d6672; }
.ak-art-card { display: flex; align-items: center; gap: 12px; max-width: 520px; padding: 10px 12px; border: 1px solid #e6eaf0; border-radius: 10px; background: #fff; color: #0c1017; }
.ak-art-card.is-on { border-color: #1d5a7a; }
.ak-art-card:hover { border-color: #98a1ad; color: #0c1017; }
.ak-art-card > svg { color: #5d6672; }
.ak-art-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; background: #f1f4f8; color: #1d5a7a; display: inline-flex; align-items: center; justify-content: center; }
.ak-art-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.ak-art-kind { font-size: 11.5px; color: #5d6672; }
.ak-actions { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ak-actions-row { display: flex; align-items: center; gap: 2px; margin-left: -6px; }
.ak-trace-link { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12px; color: #5d6672; }
.ak-trace-link:hover { background: #eef2f7; color: #0c1017; }
.ak-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: #5d6672; cursor: pointer; }
.ak-icon:hover { background: #eef2f7; color: #0c1017; }
.ak-icon[aria-pressed="true"] { background: #0c1017; color: #fff; }
.ak-icon.is-pane { width: 30px; height: 30px; color: #3b434f; }
.ak-trace-inline { display: none; }
.ak-trace-inline > summary { display: none; }
.ak-trace-box { padding: 6px 12px; border-radius: 10px; background: #fafbfc; border: 1px solid #eef1f5; }
/* how OIDA checked */
.ak-reasoner { min-width: 0; min-height: 0; overflow-y: auto; padding: 20px; background: #fafbfc; border-left: 1px solid #eef1f5; }
.ak-reasoner > .ak-lbl { padding-bottom: 6px; }
.ak-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; }
.ak-step-g { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; background: #fff; color: #0c1017; border: 1px solid #0c1017; }
.ak-step-g.is-ok { background: #e3f2ef; color: #1f6a5c; border-color: #a8d6d1; }
.ak-step-g.is-part { color: #5d6672; border: 1px dashed #98a1ad; }
.ak-step-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; align-items: flex-start; }
.ak-step-l { font-size: 12.5px; color: #0c1017; }
.ak-step-d { font-size: 12px; line-height: 1.4; color: #5d6672; }
.ak-step-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; background: #f4f7fa; border: 1px solid #e6eaf0; font-size: 12px; color: #0c1017; white-space: nowrap; }
.ak-step-chip svg { color: #5d6672; }
.ak-step .ak-hc { height: 24px; padding: 0 9px; }
.ak-rs-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6eaf0; font-size: 11.5px; color: #6f7885; }
/* artifact pane */
.ak-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-left: 1px solid #dee3ea; }
.ak-pane-head { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 18px; border-bottom: 1px solid #ecf0f5; }
.ak-pane-ico { flex: none; color: #1d5a7a; display: inline-flex; }
.ak-pane-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.ak-pane-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-pane-title .ak-art-kind { font-size: 11px; }
.ak-pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.ak-pane-foot { flex: none; padding: 10px 18px; border-top: 1px solid #ecf0f5; font-size: 11.5px; color: #6f7885; }
.ak-pane-note { font-size: 12.5px; line-height: 1.5; color: #3b434f; }
.ak-pane-foot-note { font-size: 12px; line-height: 1.5; color: #5d6672; }
.ak-sq { flex: none; width: 9px; height: 9px; border-radius: 2px; background: #24506e; }
.ak-res { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid #dee3ea; border-radius: 10px; background: #fff; }
.ak-res.is-hit { background: #eef5f9; border-color: #c9dce7; }
.ak-res-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ak-res-mark { margin-left: auto; font-size: 11.5px; color: #1d5a7a; }
.ak-res-item { display: flex; align-items: center; gap: 10px; color: #0c1017; }
.ak-big { font-family: var(--display); font-size: 18px; }
.is-struck { text-decoration: line-through; color: #6f7885; }
.ak-chip-sm { height: 18px; padding: 0 7px; font-size: 9.5px; }
.ak-cmp { border: 1px solid #dee3ea; border-radius: 10px; overflow: hidden; }
.ak-cmp-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid #ecf0f5; background: #fff; color: #0c1017; font-size: 13px; }
.ak-cmp-row:hover { background: #fafbfc; color: #0c1017; }
.ak-cmp-row.is-head { border-top: 0; background: #fafbfc; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5d6672; }
.ak-cmp-scope { display: flex; align-items: center; gap: 7px; }
.ak-cmp-scope .ak-sq { width: 8px; height: 8px; }
.ak-cmp-val { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ak-cmp-v { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 15px; }
.ak-cmp-v .ak-n { background: #eef2f7; min-width: 17px; height: 17px; font-size: 10.5px; border-radius: 5px; }
.ak-cmp-at { font-size: 12px; color: #3b434f; }
.ak-vs { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ak-vs-answer { padding-left: 12px; border-left: 2px solid #dee3ea; }
.ak-vs-answer .ak-answer { color: #3b434f; }
.ak-vs .ak-cmp-row { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); font-variant-numeric: tabular-nums; }
.ak-vs-flag { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12.5px; color: #5d6672; white-space: nowrap; cursor: pointer; }
.ak-side { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #dee3ea; border-radius: 10px; background: #fff; color: #0c1017; }
.ak-side:hover { border-color: #98a1ad; color: #0c1017; }
.ak-side-top { display: flex; align-items: center; gap: 8px; }
.ak-side-val { font-family: var(--display); font-size: 30px; letter-spacing: -0.02em; }
.ak-side-st { font-size: 13px; line-height: 1.5; }
.ak-side-meta { font-size: 12px; color: #5d6672; }
.ak-chk { display: flex; flex-direction: column; border: 1px solid #dee3ea; border-radius: 10px; overflow: hidden; }
.ak-chk-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-bottom: 1px solid #ecf0f5; background: #fff; color: #0c1017; }
.ak-chk-item:last-child { border-bottom: 0; }
.ak-chk-item:hover { background: #fafbfc; color: #0c1017; }
.ak-box { margin-top: 2px; width: 16px; height: 16px; border: 1px solid #3b434f; border-radius: 4px; }
.ak-chk-copy { display: flex; flex-direction: column; gap: 5px; }
.ak-chk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ak-chk-label { font-size: 11.5px; color: #5d6672; }
.ak-chk-text { font-size: 13.5px; line-height: 1.45; }
.ak-tl { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #ecf0f5; color: #0c1017; }
.ak-tl:hover { color: #0c1017; }
.ak-tl-date { font-family: var(--mono); font-size: 11.5px; color: #5d6672; padding-top: 3px; }
.ak-tl-copy { display: flex; flex-direction: column; gap: 5px; }
.ak-tl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ak-tl-val { font-family: var(--display); font-size: 17px; }
.ak-tl-scope { font-size: 12px; color: #3b434f; }
.ak-tl-note { font-size: 12px; line-height: 1.5; color: #5d6672; }
/* history: in the rail on a wide screen, in a drawer otherwise */
.ak-rail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ak-menu-input { position: absolute; opacity: 0; pointer-events: none; }
.ak-rail-top { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 8px; }
.ak-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border-radius: 6px; font-size: 12px; color: #5d6672; cursor: pointer; }
.ak-back:hover { background: #e9edf2; color: #0c1017; }
.ak-rail-head { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.ak-rail-title { flex: 1; font-size: 13.5px; }
.ak-new-sq { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dee3ea; border-radius: 7px; background: #fff; color: #0c1017; }
.ak-new-sq:hover { border-color: #98a1ad; color: #0c1017; }
.ak-search { display: block; }
.ak-search form { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; margin: 0; border: 1px solid #dee3ea; border-radius: 8px; background: #fff; color: #5d6672; }
.ak-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 12.5px; color: #0c1017; }
.ak-rail-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; }
.ak-hist-group { padding: 10px 8px 4px; font-size: 11px; color: #6f7885; }
.ak-hist-group.is-compact { padding: 10px 10px 4px; }
.ak-hist-item { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: #0c1017; }
.ak-rail .ak-hist-item { padding: 7px 10px; }
.ak-hist-item:hover { background: #f4f7fa; color: #0c1017; }
.ak-rail .ak-hist-item:hover, .ak-hist-item[aria-current="page"] { background: #e9edf2; }
.ak-hist-title { font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-hist-sub { font-size: 11.5px; color: #5d6672; }
.ak-hist-none { padding: 12px 10px; font-size: 12.5px; color: #5d6672; }
/* On Ask the open rail shows the history in place of the menu, until Menu is chosen. */
.dash:not(:has(.rail-input:checked)) .rail:has(.ak-rail):not(:has(.ak-menu-input:checked)) > :is(.nav-item:not(.is-foot), .nav-group, .nav-gap, .rail-spacer) { display: none; }
.rail:has(.ak-menu-input:checked) .ak-rail, .dash:has(.rail-input:checked) .ak-rail { display: none; }
.ak-hist-drawer { margin: 52px auto 0 0; padding: 0; border: 0; border-right: 1px solid #dee3ea; width: min(300px, 86vw); height: calc(100vh - 52px); max-height: none; background: #fff; box-shadow: 0 24px 60px rgba(12, 16, 23, 0.14); color: #0c1017; }
.ak-hist-drawer:popover-open { display: flex; flex-direction: column; }
.ak-hist-drawer::backdrop { background: rgba(10, 20, 32, 0.18); }
.ak-hist-drawer-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.ak-hist-drawer-top .ak-search { flex: 1; }
.ak-hist-drawer-top .ak-search form { height: 34px; }
.ak-x { width: 32px; height: 32px; color: #3b434f; }
.ak-hist-drawer-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.dash:has(.rail-input:checked) .ak-hist-btn { display: inline-flex; }
@media (min-width: 1280px) {
  .ak-trace-inline { display: none !important; }
}
@media (max-width: 1279px) {
  .ak.has-conv, .ak.has-pane { grid-template-columns: minmax(0, 1fr); }
  .ak-reasoner { display: none; }
  .ak-trace-link { display: none; }
  .ak-trace-inline { display: block; }
  .ak-trace-inline > summary { position: absolute; top: 0; left: -6px; display: inline-flex; list-style: none; align-items: center; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12px; color: #5d6672; cursor: pointer; }
  .ak-trace-inline > summary::-webkit-details-marker { display: none; }
  .ak-trace-inline > summary:hover { background: #eef2f7; color: #0c1017; }
  .ak-trace-inline .ak-trace-box { margin-top: 8px; }
  .ak-pane { position: fixed; inset: 52px 0 0 auto; z-index: 80; width: min(440px, 92vw); box-shadow: 0 24px 60px rgba(12, 16, 23, 0.16); }
  .ak-pane.is-default { display: none; }
  .ak-bar-btn.is-wide { display: none; }
  .ak-bar-btn.is-narrow { display: inline-flex; }
}
@media (max-width: 899px) {
  .ak-hist-btn { display: inline-flex; }
  .ak { height: calc(100vh - 52px - 64px); }
  .ak-pane { inset: 0; width: auto; z-index: 90; }
  .ak-bar { padding: 0 12px; }
  .ak-bar-btn.ak-hist-btn { padding: 0 8px; }
  .ak-msgs { padding: 20px 16px 28px; }
  .ak-bottom { padding: 8px 12px 12px; }
}