/* Data room — one stylesheet, no external fonts or CDN, so the strict CSP holds.

   The shell and tokens below intentionally mirror the reusable "Modern" portal foundation used
   by Regula.  The implementation remains native CSS/Jinja: importing its React/Tailwind runtime
   would replace progressive enhancement, weaken the CSP boundary and duplicate authorization in
   the browser. */

:root {
  --ink: #172033;
  --ink-2: #26324a;
  --paper: #f5f7fb;
  --card: #ffffff;
  --surface-subtle: #eef1f7;
  --field: #fbfcff;
  --line: #dfe4ed;
  --line-strong: #7b879a;
  --text: #26324a;
  --muted: #657188;
  --accent: #5b55e7;
  --accent-hover: #4942cf;
  --accent-soft: #ecebff;
  --control-h: 40px;
  --good: #18765c;
  --good-soft: #e2f5ee;
  --warn: #996014;
  --warn-soft: #fff3d8;
  --bad: #b4233d;
  --bad-soft: #fde8ec;
  --radius: 16px;
  --control-radius: 10px;
  --overlay-radius: 20px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px rgba(15, 23, 42, .06);
  --shadow-lift: 0 24px 64px rgba(15, 23, 42, .18);
  --motion-fast: 140ms cubic-bezier(.2, .8, .2, 1);
  --motion-standard: 220ms cubic-bezier(.2, .8, .2, 1);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  --header-h: 64px;
  --sidebar-w: 264px;
  --frame: 100%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Hidden from visual layout, but intentionally exposed to assistive technology. */
.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;
}

/* Keyboard users get the document shortcut before the fixed application chrome. */
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .5rem .75rem;
  color: #fff;
  background: var(--ink);
  border: 2px solid #fff;
  border-radius: 6px;
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: .98rem; }

/* ------------------------------------------------------------- fixed header */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: var(--ink);
  color: #fff;
  padding: 0 14px 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 40;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .09);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 640;
  font-size: .97rem;
  letter-spacing: -.011em;
  white-space: nowrap;
}
.topbar .brand:hover { text-decoration: none; opacity: .92; }
.topbar .brand .mark { display: block; flex: none; }
.topbar .brand .customer-brand-logo {
  width: auto;
  max-width: 112px;
  height: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 7px;
  object-fit: contain;
  object-position: left center;
  background: #fff;
}
.topbar .brand .wordmark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.topbar .brand .env {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 3px;
}
.internal-test-mark {
  flex: none;
  border: 1px solid #f7c56a;
  border-radius: 5px;
  background: #6d4205;
  color: #fff7e8;
  padding: 3px 8px;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar .spacer { flex: 1; }

/* A quiet secondary action, distinct from the account menu next to it. */
.topbar .top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .74);
  font-size: .865rem;
  padding: 6px 10px;
  border-radius: 7px;
  white-space: nowrap;
}
.topbar .top-link:hover { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }
.topbar .top-link .ic { opacity: .8; }

.topbar .rule { width: 1px; height: 22px; background: rgba(255, 255, 255, .16); }

/* --- account menu (native <details>, so it works with no JavaScript) --- */

.usermenu { position: relative; }
.usermenu > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 5px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  color: #fff;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { background: rgba(255, 255, 255, .12); }
.usermenu .avatar {
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, #3f7ce0, #22b8f0);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usermenu .who { display: flex; flex-direction: column; line-height: 1.18; text-align: left; }
.usermenu .who b { font-size: .855rem; font-weight: 600; }
.usermenu .who em {
  font-style: normal;
  font-size: .72rem;
  color: rgba(255, 255, 255, .58);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usermenu > summary .ic { opacity: .6; transition: transform .15s ease; }
.usermenu[open] > summary .ic { transform: rotate(180deg); }

.usermenu .panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 232px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-lift);
  padding: 6px;
  z-index: 50;
}
.usermenu .panel .head {
  padding: 8px 10px 9px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
}
.usermenu .panel .head b { display: block; color: var(--ink); font-size: .875rem; }
.usermenu .panel .head span { color: var(--muted); font-size: .76rem; word-break: break-all; }
.usermenu .panel a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--text);
  font-size: .875rem;
}
.usermenu .panel a:hover { background: #f2f5fa; text-decoration: none; }
.usermenu .panel a .ic { color: var(--muted); }
.usermenu .panel a.danger { color: var(--bad); }
.usermenu .panel a.danger .ic { color: var(--bad); }
.usermenu .panel a.danger:hover { background: var(--bad-soft); }
.usermenu .panel .sep { height: 1px; background: var(--line); margin: 5px 0; }

.burger {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  border-radius: 7px;
  width: 32px;
  height: 30px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* A preview must never be mistakable for the real thing, so it says so across the top. */
.previewbar {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 35;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 18px;
  background: #fdf1de;
  border-bottom: 1px solid #e8cf9f;
  color: #6d4205;
  font-size: .85rem;
}
.previewbar .tag {
  background: var(--warn); color: #fff; border-radius: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px;
}
.previewbar .btn { margin-left: auto; }
.previewbar + .sidebar, body:has(.previewbar) .sidebar { top: calc(var(--header-h) + 39px); }
.main.previewing { padding-top: calc(var(--header-h) + 39px); }

/* ----------------------------------------------------------------- sidebar */

.sidebar {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 12px 10px 16px;
  z-index: 30;
}
.sidebar .group {
  font-size: .655rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #9aa5bb;
  font-weight: 700;
  padding: 15px 10px 5px;
}
.sidebar .group:first-child { padding-top: 4px; }
.sidebar a.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #45526e;
  font-size: .885rem;
  font-weight: 500;
  margin-bottom: 1px;
  position: relative;
}
.sidebar a.item .ic { flex: none; color: #9aa5bb; }
.sidebar a.item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar a.item:hover { background: #f2f5fa; color: var(--ink); text-decoration: none; }
.sidebar a.item:hover .ic { color: #64718c; }
.sidebar a.item.on { background: var(--accent-soft); color: #1a49a8; font-weight: 615; }
.sidebar a.item.on .ic { color: var(--accent); }
.sidebar a.item .tag {
  margin-left: auto;
  background: var(--warn);
  color: #fff;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Environment, not filler prose: which store, which build. */
.sidebar .side-foot {
  margin-top: auto;
  padding: 14px 10px 2px;
  border-top: 1px solid var(--line);
  color: #9aa5bb;
  font-size: .715rem;
  line-height: 1.6;
}
.sidebar .side-foot .pair { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sidebar .side-foot .k { color: #b3bccd; }
.sidebar .side-foot .v { font-family: var(--mono); font-size: .68rem; color: #7b8699; }

.main { margin-left: var(--sidebar-w); padding-top: var(--header-h); }
.main.no-sidebar { margin-left: 0; }

/* The content fills the space beside the sidebar. Tables in this product are wide — a document
   list carries an index number, a name, a stage, a folder, a type, a size, a page count and its
   rules — and every pixel spent on symmetric margins is a column somebody has to scroll to. */
.main > .wrap, .main.no-sidebar > .wrap { margin: 0; }

/* The shell is a column so the footer sits at the bottom of the viewport on a short page rather
   than floating halfway up it, and below the content on a long one. */
.main { display: flex; flex-direction: column; min-height: 100vh; }
.main > .wrap { flex: 1 0 auto; }
.main > .foot { flex: none; }

.scrim { display: none; }

@media (max-width: 900px) {
  .burger { display: inline-block; }
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lift); }
  body.nav-open .scrim {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(11, 29, 66, .35);
    z-index: 25;
  }
  .main { margin-left: 0; }
}

/* One frame for every page inside a shell. Its left edge is the anchor the eye uses, so it
   must not move between pages — that jump is what reads as an unfinished product. */
.wrap { max-width: var(--frame); margin: 0 auto; padding: 24px 22px 80px; }

/* Every page fills the frame. A page that is genuinely one column of settings says so with
   `column = 'col'`, which no longer narrows the page — it caps the *fields*, because a text input
   sixteen hundred pixels wide is not easier to fill in, while a table that has to be scrolled is
   harder to read. The class stays so the intent is still declared where it is true. */
.wrap > .col { max-width: none; }
.wrap > .col .field > input,
.wrap > .col .field > select,
.wrap > .col .field > .ui-select,
.wrap > .col .field > .ui-file,
.wrap > .col .field > textarea,
.wrap > .col .code-input { max-width: 560px; }
.wrap > .col .card > p, .wrap > .col .card > .small { max-width: 78ch; }

/* On a phone the header has room for the brand and the links, but not for both in full. */
@media (max-width: 640px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar .brand { font-size: .9rem; min-width: 0; }
  .topbar .brand .wordmark { display: none; }
  .topbar .brand .env, .topbar .rule { display: none; }
  .internal-test-mark {
    max-width: 132px;
    padding: 3px 6px;
    font-size: .57rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  .topbar .top-link span { display: none; }
  .usermenu .who { display: none; }
  .usermenu > summary { padding: 5px; }
  .usermenu .panel { right: -4px; min-width: 210px; }
  .burger { display: inline-flex; }

  .wrap { padding: 18px 14px 60px; }
  .card { padding: 16px 14px; }
  .page-head { gap: 10px; }
  .toolbar { width: 100%; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }

  /* Let the row become two lines rather than squeezing the title into a column of words. */
  .doc-row { flex-wrap: wrap; }
  .doc-row .meta { flex: 1 1 auto; }
  .doc-row .acts { flex: 1 1 100%; justify-content: flex-end; }

  .viewer-bar { padding: 8px 12px; gap: 10px; }
  .viewer-bar .title { width: 100%; order: -1; }
  .pages { padding: 14px 10px 70px; }
  textarea.codes { font-size: .82rem; letter-spacing: 0; }
  .enrol { gap: 16px; }
}

.crumbs { color: var(--muted); font-size: .85rem; margin-bottom: 10px; }
.crumbs a { color: var(--muted); }

.page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 240px; }
.page-head p { color: var(--muted); margin: .2em 0 0; }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card-head .grow { flex: 1; }

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .k { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.stat .v { font-size: 1.5rem; font-weight: 640; color: var(--ink); line-height: 1.2; margin-top: 2px; }
.stat .s { color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------- overview and attention */

/* The funnel: a row of counts that reads left to right as the round progresses. */
.funnel { display: flex; gap: 8px; flex-wrap: wrap; }
.funnel .step {
  flex: 1; min-width: 104px;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: #fbfcfe;
}
.funnel .step .n { display: block; font-size: 1.5rem; font-weight: 650; color: var(--ink); line-height: 1.15; }
.funnel .step .l {
  display: block; font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}

.card.attention { border-left: 3px solid var(--warn); }
a.att {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid #f1f4f9; color: var(--text); font-size: .9rem;
}
a.att:last-child { border-bottom: 0; }
a.att:hover { text-decoration: none; background: #fafbfe; }
a.att .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
a.att-urgent .dot { background: var(--bad); }
a.att-open   .dot { background: var(--warn); }
a.att-quiet  .dot { background: var(--line-strong); }
a.att-urgent .txt { color: var(--ink); font-weight: 560; }

/* The timeline: the audit log's rows, told as a story. */
.timeline { font-size: .88rem; }
.moment {
  display: grid; grid-template-columns: 96px 12px 1fr; align-items: baseline; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid #f1f4f9;
}
.moment:last-child { border-bottom: 0; }
.moment .when { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.moment .dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.moment .dot.investor { background: var(--accent); }
.moment .dot.company { background: var(--line-strong); }
.moment .what strong { color: var(--ink); font-weight: 570; }

/* ------------------------------------------------------------------- Q&A */

.stages { display: flex; gap: 8px; flex-wrap: wrap; }
.stages .stage {
  flex: 1;
  min-width: 108px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--text);
  background: #fff;
}
.stages .stage:hover { background: #f6f8fc; text-decoration: none; }
.stages .stage.on { border-color: var(--accent); background: var(--accent-soft); }
.stages .stage .n { display: block; font-size: 1.3rem; font-weight: 660; color: var(--ink); line-height: 1.2; }
.stages .stage .l { display: block; font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stages .stage.on .l { color: #1a49a8; }

.qa-card .qa-body { white-space: pre-wrap; margin: 2px 0 8px; }
.qa-card .qa-meta { margin-bottom: 10px; }
.qa-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.qa-item:last-child { border-bottom: 0; }
.qa-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.card.req .provided { margin: 8px 0; }
ul.tight { margin: 6px 0 0; padding-left: 18px; }
ul.tight li { margin: 2px 0; }

/* Disclosure keeps native open/close semantics but not the platform marker. Every ordinary
   disclosure opts into this class so broad selectors cannot alter protected focus geometry. */
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 2px 2px 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .65;
  transform: rotate(45deg);
}
.disclosure[open] > summary::after { transform: translateY(3px) rotate(225deg); }

/* A plain disclosure for detail nobody needs by default — a sealed document list, say. */
details.reveal { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
details.reveal > summary {
  cursor: pointer; font-size: .88rem; color: var(--accent); list-style: none;
}
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal > summary::before { content: none; }
details.reveal > summary::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 2px 2px 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .65;
  transform: rotate(45deg);
}
details.reveal[open] > summary::after { transform: translateY(3px) rotate(225deg); }
details.reveal > summary:hover { text-decoration: underline; }
details.reveal[open] > summary { margin-bottom: 10px; }
.provided-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 6px 8px; background: #f7faff; border: 1px solid var(--line);
  border-radius: 7px; margin-bottom: 5px; font-size: .88rem;
}
.provided-row:last-child { margin-bottom: 0; }

/* --------------------------------------------------- holders (groups) */

.holder { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.holder:last-child { margin-bottom: 0; }
.holder-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; background: #fafbfe; border-bottom: 1px solid var(--line);
}
.holder-head .grow { flex: 1; min-width: 200px; }
.holder-head .grow strong { color: var(--ink); margin-right: 8px; }
.holder-body { padding: 12px 14px; }
.holder-body .members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rule-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.rule-row:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- search and the index */

.searchbar { display: flex; gap: 10px; }
.searchbar input[type=search] {
  flex: 1;
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  font-family: inherit;
  font-size: .95rem;
  background: #fff;
  color: var(--text);
}
.searchbar input[type=search]:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

a.hit {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  color: inherit;
}
a.hit:last-child { border-bottom: 0; }
a.hit:hover { text-decoration: none; background: #fafbfe; }
a.hit .hit-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
a.hit .hit-head strong { color: var(--accent); }
a.hit:hover .hit-head strong { text-decoration: underline; }
a.hit .snippet {
  margin: 5px 0 0;
  color: var(--text);
  font-size: .875rem;
  line-height: 1.6;
}

.index-list { font-size: .9rem; }
.index-row { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f1f4f9; }
.index-row:last-child { border-bottom: 0; }
.index-row .num {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  min-width: 52px;
  flex: none;
}
.index-row .nm { color: var(--text); }
.index-row .nm.folder { font-weight: 640; color: var(--ink); }
.index-row.folder { background: #fafbfe; }
.index-row .meta { color: var(--muted); font-size: .8rem; margin-left: auto; text-align: right; white-space: nowrap; }
.doc-row .number {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
  min-width: 34px;
  flex: none;
}

/* An empty state should say what the thing is for and offer the next step, not apologise. */
.empty-state { text-align: center; padding: 40px 24px 34px; }
.empty-state .ic { color: var(--line-strong); margin-bottom: 10px; }
.empty-state h2 { margin-bottom: .3em; }
.empty-state p { color: var(--muted); max-width: 44ch; margin: 0 auto 18px; font-size: .92rem; }

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: .9rem; align-items: start; }
.kv dt { color: var(--muted); font-size: .82rem; }
.kv dd { margin: 0; }

/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfe; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.table-scroll > table { min-width: 620px; }
/* A name is a name: let the row scroll rather than breaking one word across four lines. */
td > strong, td > a > strong { white-space: nowrap; }
.empty { color: var(--muted); padding: 18px 4px; font-style: italic; }

/* --------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: .88rem;
  font-family: inherit;
  font-weight: 520;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #f6f8fc; text-decoration: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #16305f; }
.btn.danger { color: var(--bad); border-color: #edc9c6; }
.btn.danger:hover { background: var(--bad-soft); }
.btn.solid-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.solid-danger:hover { background: #8d1d17; }
.btn.small { padding: 4px 10px; font-size: .8rem; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: #eef2f8; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

[hidden] { display: none !important; }
label { display: block; font-size: .8rem; color: var(--muted); font-weight: 560; margin-bottom: 4px; }

/* Every control the product uses, listed by hand rather than left to the browser. A native date
   input beside a styled text input is the tell that a form was assembled instead of designed:
   different height, different border, different type, a grey calendar glyph nobody chose. The
   list is exhaustive on purpose — a type that is missing here is a control that looks foreign. */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=url], input[type=search], input[type=date], input[type=time], input[type=month],
input[type=datetime-local], input[type=file], select, textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: .92rem;
  background: #fff;
  color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled {
  background: #f4f6fa; color: var(--muted); cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: #9aa5b8; }

textarea { min-height: 84px; height: auto; resize: vertical; }
/* The corner grip is the one piece of native chrome worth keeping — it is a real affordance — but
   only vertically, since a textarea dragged wider breaks the column it sits in. */

/* A select's arrow is drawn rather than inherited, so it matches the rest and does not change
   between platforms. The gap on the right is the arrow's room. */
select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235b6885' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
select:disabled { cursor: not-allowed; opacity: .8; }
select[multiple] { appearance: auto; background-image: none; padding-right: 10px; }

/* Spinners are a fiddly target and inconsistent between browsers; the field is typed into. */
input[type=number] { appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Date and time keep the platform's proven calendar/clock behaviour, but no platform chrome is
   visible in the page. The field and trigger glyph are product-owned; the transparent browser
   indicator remains the trusted bridge that opens the accessible system picker. */
input[type=date], input[type=time], input[type=month], input[type=datetime-local] {
  appearance: none;
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding-right: 38px;
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 18px 18px;
}
input[type=date], input[type=month], input[type=datetime-local] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%235b6885' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.25' y='4.75' width='13.5' height='12' rx='2'/%3E%3Cpath d='M6.5 3v3M13.5 3v3M3.5 8.25h13M6.5 11h.01M10 11h.01M13.5 11h.01M6.5 14h.01M10 14h.01'/%3E%3C/svg%3E");
}
input[type=time] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%235b6885' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 6v4l2.75 1.75'/%3E%3C/svg%3E");
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  opacity: 0;
}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; }

/* Search decorations are otherwise supplied by WebKit and change shape between Chrome and
   Safari. Clearing one value is still one keystroke, while the field keeps the product shell. */
input[type=search] { appearance: none; }
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration { appearance: none; display: none; }

/* A file input's own button is styled rather than replaced, so keyboard and drag both still work. */
input[type=file] { padding: 6px 10px; background: #fbfcfe; cursor: pointer; }
input[type=file]::file-selector-button {
  appearance: none;
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 560;
  font-size: .85rem;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--paper); border-color: var(--accent); }

/* ------------------------------------------------ product-owned pickers

   A styled <select> still opens an operating-system menu. The source controls below stay in the
   form for FormData, constraint validation and no-JavaScript fallback; controls.js only clips
   them after it has created the visible, keyboard-operable product layer. */
.ui-control-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  background: transparent !important;
}

.ui-select { display: block; position: relative; width: 100%; min-width: 0; }
.ui-select-trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}
.ui-select-trigger:hover { border-color: #8792a8; background: var(--card); }
.ui-select-trigger:focus-visible,
.ui-select.is-open .ui-select-trigger {
  outline: 3px solid rgba(34, 93, 216, .16);
  outline-offset: 1px;
  border-color: #225dd8;
}
.ui-select.is-disabled .ui-select-trigger {
  background: #f4f6fa;
  color: var(--muted);
  cursor: not-allowed;
  opacity: .8;
}
.ui-select.is-placeholder .ui-select-value { color: var(--muted); }
.ui-select.is-invalid .ui-select-trigger { border-color: var(--bad); }
.ui-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin: -3px 2px 2px 4px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  color: var(--muted);
  transform: rotate(45deg);
  transition: transform var(--motion-fast);
}
.ui-select.is-open .ui-select-chevron { transform: translateY(3px) rotate(225deg); }

.ui-picker {
  position: fixed;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 18px 48px rgba(23, 32, 51, .2), 0 3px 12px rgba(23, 32, 51, .12);
}
.ui-picker[hidden] { display: none !important; }
.ui-picker-search { padding: 9px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
.ui-picker-search input[type=text] { min-height: 36px; padding: 7px 10px; font-size: .86rem; }
.ui-picker-options { min-height: 0; overflow: auto; padding: 6px; outline: 0; overscroll-behavior: contain; }
.ui-picker-options:focus-visible { box-shadow: inset 0 0 0 2px rgba(34, 93, 216, .16); }
.ui-picker-group {
  padding: 8px 10px 5px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ui-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: .9rem;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
}
.ui-picker-option.is-active { background: var(--accent-soft); color: var(--ink); }
.ui-picker-option[aria-selected=true] { color: var(--accent); font-weight: 650; }
.ui-picker-option[aria-disabled=true] { color: var(--muted); opacity: .6; cursor: not-allowed; }
.ui-picker-option-label { min-width: 0; overflow-wrap: anywhere; }
.ui-picker-check,
.ui-picker-suggestion { flex: none; width: 16px; height: 16px; position: relative; color: currentColor; }
.ui-picker-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
  opacity: 0;
}
.ui-picker-option[aria-selected=true] .ui-picker-check::after { opacity: 1; }
.ui-picker-suggestion::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.ui-picker-suggestion::after {
  content: "";
  position: absolute;
  width: 5px;
  border-top: 1.5px solid currentColor;
  right: 0;
  bottom: 2px;
  transform: rotate(45deg);
}
.ui-picker-empty { margin: 0; padding: 16px 10px; color: var(--muted); font-size: .84rem; text-align: center; }

/* The operating-system file window remains the correct security boundary. Only the page-side
   control is replaced: the real input transparently covers this shell, preserving click, drop,
   keyboard, required validation and the browser's trusted file handoff. */
.ui-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--control-h);
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--field);
  color: var(--text);
  cursor: pointer;
}
.ui-file:hover { border-color: #8792a8; background: var(--card); }
.ui-file:focus-within {
  outline: 3px solid rgba(34, 93, 216, .16);
  outline-offset: 1px;
  border-color: #225dd8;
}
.ui-file.is-invalid { border-color: var(--bad); }
.ui-file.is-disabled { opacity: .65; cursor: not-allowed; background: #f4f6fa; }
.ui-file-source {
  position: absolute !important;
  z-index: 2;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  cursor: pointer;
}
.ui-file-source:disabled { cursor: not-allowed; }
.ui-file-action {
  flex: none;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(34, 93, 216, .18);
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .84rem;
  font-weight: 620;
  line-height: 1.2;
}
.ui-file-status { min-width: 0; overflow: hidden; color: var(--muted); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }

/* Ticks and radios: the same box on every platform, at a size a thumb can hit. */
input[type=checkbox], input[type=radio] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:checked, input[type=radio]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
input[type=radio]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .5; cursor: not-allowed; }
.field { margin-bottom: 12px; }
.field .hint { color: var(--muted); font-size: .78rem; margin: 4px 0 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 150px; }
.row.align-end { align-items: flex-end; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: .87rem; color: var(--text); margin: 0 0 8px; font-weight: 460; cursor: pointer; }
.check input { margin-top: 1px; }

/* ------------------------------------------------------------- form layout

   A row of flex children wraps wherever it runs out of room, which means the shape of a form
   depends on the length of its longest label — and a field that wraps alone onto its own line
   leaves three quarters of that line empty. A twelve-column grid instead: each field says how much
   of the line it takes, and the line is the same on every render.

   The other half of the problem is hints. A hint under a three-column field wraps to three lines
   and shoves everything below it down, which is what produced the ragged gaps this replaced. A
   hint that belongs to a narrow field is written under the row, at full width, where it reads as
   a sentence rather than as a column of words. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px 12px;
  align-items: end;
}
/* An unclassified direct child must remain usable. Without this fallback, a bare label occupies
   one of the twelve implicit columns and collapses its control to a few characters wide. */
.form-grid > * { grid-column: span 12; min-width: 0; }
.form-grid > .field { grid-column: span 12; margin-bottom: 0; max-width: none; }
.form-grid > .field.c2 { grid-column: span 2; }
.form-grid > .field.c3 { grid-column: span 3; }
.form-grid > .field.c4 { grid-column: span 4; }
.form-grid > .field.c5 { grid-column: span 5; }
.form-grid > .field.c6 { grid-column: span 6; }
.form-grid > .field.c8 { grid-column: span 8; }
.form-grid > .field.c9 { grid-column: span 9; }

/* A hint about the row above it, not squeezed into one field's column. */
.form-grid > .form-note {
  grid-column: span 12;
  margin: -8px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
  max-width: 68ch;
}
.form-grid > .form-note em { font-style: normal; font-weight: 600; color: var(--text); }
/* A note beside its field rather than under it. One narrow field on a line leaves the rest of that
   line empty, and the explanation is exactly the right size to fill it. */
.form-grid > .form-note.beside { grid-column: span 8; margin: 0; align-self: center; }
.form-grid > .form-note.beside-9 { grid-column: span 9; margin: 0; align-self: center; }
@media (max-width: 640px) {
  .form-grid > .form-note.beside, .form-grid > .form-note.beside-9 { grid-column: span 12; }
}

/* A group of settings that belong together, with a name. Ten fields in an undifferentiated list
   is a list somebody has to read twice to find anything in. */
fieldset.group { border: 0; padding: 0; margin: 0 0 22px; }
fieldset.group > legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: .82rem;
  font-weight: 680;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
fieldset.group + fieldset.group { border-top: 1px solid var(--line); padding-top: 20px; }

/* A switch is a decision with a consequence, so it gets the consequence written under it rather
   than a bare label the reader has to infer from. */
.setting {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 10px;
  align-items: start;
  margin: 0 0 14px;
  cursor: pointer;
}
.setting > input { grid-row: 1; margin-top: 2px; }
.setting > .t { grid-column: 2; font-size: .9rem; font-weight: 560; color: var(--text); }
.setting > .d { grid-column: 2; font-size: .8rem; color: var(--muted); line-height: 1.5; max-width: 68ch; }
/* A grid ends flush and a setting starts flush, so the two ran together wherever a group had both.
   The junction belongs to the vocabulary rather than to whichever template noticed it first. */
.form-grid + .setting, .setting + .form-grid { margin-top: 16px; }

/* Long management forms remain readable on wide administration screens. */
.form-width-lg { max-width: 980px; }

@media (max-width: 640px) {
  /* Below this width every field is the whole line anyway; keeping the spans would leave three
     characters of a date field beside three of a currency. */
  .form-grid > .field[class*="c"] { grid-column: span 12; }
}

/* Field widths, named rather than measured in each template. A form where three fields are 110px,
   130px and 150px for no reason reads as unfinished, and a template carrying its own numbers is
   how that happens. */
.field.w-xs { --fw: 110px; }
.field.w-sm { --fw: 150px; }
.field.w-s  { --fw: 175px; }
.field.w-md { --fw: 200px; }
.field.w-lg { --fw: 280px; }
.field.w-xs, .field.w-sm, .field.w-s, .field.w-md, .field.w-lg { max-width: var(--fw); }
.field.w-full { max-width: none; }
/* A row gives its children a 150px floor so three fields do not crush into columns of nothing.
   That floor also beat every max-width narrower than it, which made w-xs a 110px rule that
   rendered at 150 — the named widths have to win inside a row, or they are not names for
   anything. */
/* Inside a row a field would otherwise shrink to whatever its control asks for — a date input asks
   for 145 — and a named width that comes out five pixels different is not a name for anything. */
.row > .field.w-xs, .row > .field.w-s, .row > .field.w-sm,
.row > .field.w-md, .row > .field.w-lg { flex: 0 0 var(--fw); min-width: 0; }

/* The handful of spacing adjustments a page legitimately needs, so none of them is written inline. */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; }
.flat { margin: 0; }
.flex-none { flex: none; }
/* Text that carries its own line breaks — a response typed into a textarea, a note, a quote. */
.prewrap { white-space: pre-wrap; }

/* A sentence that is itself a warning, as against a whole panel that is one. Reaching for
   .notice.warn to colour one line turns a remark into a box, which says more than was meant. */
.t-warn { color: var(--warn); }
.t-bad { color: var(--bad); }
.t-good { color: var(--good); }
.t-muted { color: var(--muted); }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.form-actions.right { justify-content: flex-end; }
/* An empty state centres its text; its buttons have to be told, since text-align does not reach
   a flex child. */
.form-actions.center { justify-content: center; }
.inline-form { display: inline; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ chips */

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip.view { background: var(--accent-soft); color: #1a49a8; }
.chip.down { background: var(--good-soft); color: var(--good); }
.chip.deny { background: var(--bad-soft); color: var(--bad); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.grey { background: #eef1f6; color: var(--muted); }
.chip.mono { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; }
/* Release stage. Three steps, cool to warm, so the sensitive end reads as the sensitive end. */
.chip.l1 { background: #e8f5ee; color: #12734a; }
.chip.l2 { background: #fdf1de; color: #9a5b06; }
.chip.l3 { background: #fdeceb; color: #a5231c; }

.muted { color: var(--muted); }
.small { font-size: .84rem; }
.mono { font-family: var(--mono); font-size: .84rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

.notice { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }
.notice.warn { border-color: var(--warn); background: var(--warn-soft); }
.notice.bad { border-color: var(--bad); background: var(--bad-soft); }
.notice.good { border-color: var(--good); background: var(--good-soft); }
.notice p:last-child { margin-bottom: 0; }
.notice p:first-child { margin-top: 0; }

/* --------------------------------------------------------------- dialogs */

dialog.dlg {
  border: 0;
  padding: 0;
  border-radius: 14px;
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  box-shadow: var(--shadow-lift);
  color: var(--text);
  overflow: visible;
}
dialog.dlg.wide { width: min(820px, calc(100vw - 32px)); }
dialog.dlg::backdrop { background: rgba(11, 29, 66, .42); }
dialog.dlg[open] { display: flex; flex-direction: column; }

.dlg-head { padding: 20px 22px 12px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; font-size: 1.1rem; }
.dlg-head p { margin: .35em 0 0; color: var(--muted); font-size: .86rem; }
.dlg-body { padding: 18px 22px 22px; overflow-y: auto; }
.dlg-body > :last-child { margin-bottom: 0; }
.dlg-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.dlg-close:hover { background: #eef2f8; color: var(--ink); }
.dlg-sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* --------------------------------------------------------------- auth page */

.auth { max-width: 400px; margin: 9vh auto; }
.auth .card { padding: 26px 26px 22px; }
.auth h1 { font-size: 1.28rem; }
.auth p.lede { color: var(--muted); margin-top: 0; font-size: .92rem; }
.auth .brandline { text-align: center; margin-bottom: 18px; color: var(--ink); font-weight: 650; letter-spacing: .02em; }
/* Typed as `input.code-input` so it outweighs the `input[type=text]` base rule above. */
input.code-input {
  font-family: var(--mono);
  font-size: 1.45rem;
  letter-spacing: .3em;
  text-align: center;
  padding: 10px 11px;
}

/* -------------------------------------------------------------- doc lists */

.doc-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row .thumb {
  width: 54px; height: 40px; border-radius: 5px; border: 1px solid var(--line);
  object-fit: cover; object-position: top center; background: #eef1f6; flex: none;
}
.doc-row .meta { flex: 1; min-width: 0; }
.doc-row .name { font-weight: 570; color: var(--ink); }
.doc-row .sub { color: var(--muted); font-size: .82rem; }
.doc-row .acts { display: flex; gap: 8px; align-items: center; }

.folder-title {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 660; margin: 20px 0 4px;
}
.folder-title:first-child { margin-top: 0; }
.folder-title .folder-blurb {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .8rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ----------------------------------------------------------------- viewer */

.viewer-bar {
  position: sticky; top: var(--header-h); z-index: 20;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 9px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.viewer-bar .title { font-weight: 600; color: var(--ink); }
.viewer-bar .grow { flex: 1; }
.pages { max-width: 980px; margin: 0 auto; padding: 20px 16px 90px; }
.page-shell { margin-bottom: 18px; position: relative; }
.page-shell img {
  width: 100%; display: block; border: 1px solid var(--line);
  border-radius: 4px; box-shadow: var(--shadow); background: #fff;
}
.page-shell .ph {
  width: 100%; aspect-ratio: 16 / 9; border: 1px dashed var(--line-strong);
  border-radius: 4px; background: #fff; display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: .85rem;
}
.page-shell .no { position: absolute; top: 8px; right: -46px; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .page-shell .no { right: 8px; top: 6px; background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 4px; } }

.pages.marking,
.pages.marking .page-shell { cursor: crosshair; touch-action: none; }
.viewer-mark {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  border: 2px solid rgba(93, 83, 212, .78);
  border-radius: 3px;
  background: rgba(93, 83, 212, .14);
  pointer-events: none;
}
.viewer-mark.saved-comment {
  border-color: rgba(32, 115, 181, .72);
  background: rgba(32, 115, 181, .1);
}
.viewer-mark.saved-annotation {
  border-color: rgba(204, 139, 20, .78);
  background: rgba(255, 196, 53, .16);
}
.viewer-mark.pending {
  border-style: dashed;
  border-color: var(--accent);
  background: rgba(93, 83, 212, .18);
}

.no-select { user-select: none; -webkit-user-select: none; }

.refmenu { position: relative; }
.refmenu > summary { list-style: none; cursor: pointer; }
.refmenu > summary::-webkit-details-marker { display: none; }
.refpanel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-lift);
  padding: 12px 14px;
  z-index: 45;
}
.refgroup { margin-top: 10px; }
.refpage {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: #9aa5bb; font-weight: 700; margin-bottom: 4px;
}
a.refitem, .refitem {
  display: block; padding: 7px 9px; border-radius: 7px; color: var(--text);
  font-size: .85rem; border: 1px solid transparent;
}
a.refitem:hover { background: #f2f5fa; text-decoration: none; border-color: var(--line); }
.refitem strong { color: var(--accent); display: block; }
.refitem.external strong { color: var(--muted); }
.refitem .reflabel { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; }

/* -------------------------------------------------------------- heat bars */

.heat { display: flex; flex-direction: column; gap: 3px; }
.heat-row { display: grid; grid-template-columns: 42px 1fr 110px; align-items: center; gap: 10px; font-size: .82rem; }
.heat-row .p { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.heat-row .bar { height: 15px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
.heat-row .bar > i { display: block; height: 100%; background: linear-gradient(90deg, #4c86ef, #1c4fb3); }
.heat-row .v { color: var(--muted); font-variant-numeric: tabular-nums; }

.bar-inline { height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; min-width: 70px; }
.bar-inline > i { display: block; height: 100%; background: var(--ink); }

/* ---------------------------------------------------------- 2FA enrolment */

.enrol { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.enrol .qr { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; line-height: 0; }
.enrol .qr svg { display: block; width: 168px; height: 168px; }
.enrol .steps { flex: 1; min-width: 230px; font-size: .88rem; }
.enrol .steps ol { margin: 0 0 12px; padding-left: 18px; }
.enrol .steps li { margin-bottom: 6px; }
.secret {
  font-family: var(--mono);
  font-size: .82rem;
  background: #f3f6fb;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  word-break: break-all;
  letter-spacing: .04em;
}

/* A textarea rather than a list: the codes have to be copyable and selectable, and this way
   "copy all" hands over exactly what was on screen. */
textarea.codes {
  font-family: var(--mono);
  font-size: .92rem;
  line-height: 1.9;
  letter-spacing: .03em;
  background: #f8fafd;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  resize: none;
  min-height: 0;
  text-align: center;
  color: var(--ink);
}

/* --------------------------------------------------------------- footer */

.foot {
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
  background: var(--paper, #fff);
}
.foot code { font-family: var(--mono); }
.foot .powered-by {
  display: block;
  margin-top: 5px;
  font-weight: 600;
  letter-spacing: .015em;
}

.copyable { display: flex; gap: 8px; align-items: center; }
.copyable input { font-family: var(--mono); font-size: .82rem; }

/* A name long enough to wrap makes every row in the table a different height, and a name long
   enough to push a column off the edge makes the table scroll. Clip it on one line and put the
   whole thing in the cell's title, which is the tooltip every browser already has and costs no
   script. On a phone the row is a stacked card with room for the full name, so the clip is
   lifted there — a tooltip is no use to a thumb. */
.clip {
  display: block;
  max-width: 52ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td[title] { cursor: help; }

/* The index's tree indent. Depth is data, which is why it was written inline; but a room nests
   folders three or four deep in practice, and past that the indent has nowhere left to go — so
   the scale stops at six and the deepest rows simply share a margin. */
.index-row.d0 { padding-left: 0; }
.index-row.d1 { padding-left: 22px; }
.index-row.d2 { padding-left: 44px; }
.index-row.d3 { padding-left: 66px; }
.index-row.d4 { padding-left: 88px; }
.index-row.d5 { padding-left: 110px; }
.index-row.d6 { padding-left: 132px; }

/* ------------------------------------------------ Regula Modern portal shell

   This is a visual port of the shared portal foundation, not a runtime port.  Existing anchors,
   forms and server-rendered capability decisions remain authoritative. */

body {
  background-color: var(--paper);
  background-image: radial-gradient(circle at 84% -12%, rgba(91, 85, 231, .1), transparent 32rem);
}

.topbar {
  left: var(--sidebar-w);
  min-width: 0;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
  backdrop-filter: saturate(140%) blur(18px);
  padding: 0 18px;
  gap: 9px;
}
.topbar.standalone { left: 0; }
.shell-topbar > .brand { display: none; }
.topbar.standalone > .brand { display: flex; }
.topbar .brand { color: var(--ink); }
.topbar .brand:hover { color: var(--ink); }
.topbar .brand .env {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-subtle);
}
.shell-context {
  display: flex;
  min-width: 0;
  flex: 0 1 290px;
  flex-direction: column;
  line-height: 1.2;
}
.shell-context strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-context span {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.internal-test-mark {
  border-color: #e3c06d;
  background: var(--warn-soft);
  color: #754508;
  padding: 4px 8px;
}
.topbar .top-link {
  min-height: 40px;
  color: var(--muted);
  border-radius: var(--control-radius);
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.topbar .top-link:hover { color: var(--ink); background: var(--surface-subtle); }
.topbar .top-link .ic { color: var(--muted); opacity: 1; }
.topbar .rule { background: var(--line); }
.topbar .usermenu > summary {
  min-height: 44px;
  color: var(--ink);
  transition: background-color var(--motion-fast);
}
.topbar .usermenu > summary:hover,
.topbar .usermenu[open] > summary { background: var(--surface-subtle); }
.topbar .usermenu .who b { color: var(--ink); }
.topbar .usermenu .who em { color: var(--muted); }
.usermenu .avatar {
  border-radius: var(--control-radius);
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(91, 85, 231, .65);
}
.usermenu .panel,
.refpanel {
  border-radius: var(--overlay-radius);
  box-shadow: var(--shadow-lift);
}
.usermenu .panel a:hover,
a.refitem:hover { background: var(--surface-subtle); }

.burger {
  min-width: 40px;
  min-height: 40px;
  border-color: var(--line);
  border-radius: var(--control-radius);
  color: var(--ink);
}
.burger:hover { background: var(--surface-subtle); }

.sidebar {
  top: 0;
  padding: 0 10px 16px;
  border-color: var(--line);
  background: rgba(251, 252, 255, .96);
  box-shadow: 1px 0 0 rgba(15, 23, 42, .02);
  overflow: hidden;
}
.sidebar-brand {
  display: flex;
  min-height: var(--header-h);
  align-items: center;
  gap: 11px;
  margin: 0 -10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.sidebar-brand:hover { color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .72); }
.sidebar-brand .mark {
  width: 36px;
  height: 36px;
  flex: none;
  padding: 7px;
  border-radius: var(--control-radius);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(91, 85, 231, .18);
}
.sidebar-brand .mark.customer-brand-logo {
  width: auto;
  max-width: 100px;
  height: 28px;
  padding: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  box-shadow: none;
}
.sidebar-brand-copy { min-width: 0; line-height: 1.18; }
.sidebar-brand-copy b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-brand-copy em {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: .57rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .13em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.sidebar-nav {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 12px;
}
.sidebar .group {
  color: var(--muted);
  font-size: .625rem;
  letter-spacing: .12em;
  padding: 18px 10px 7px;
}
.sidebar .group:first-child { padding-top: 4px; }
.sidebar a.item {
  min-height: var(--control-h);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  color: var(--muted);
  font-size: .82rem;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.sidebar a.item .ic { color: var(--muted); }
.sidebar a.item:hover { background: var(--surface-subtle); color: var(--ink); }
.sidebar a.item.on {
  border-color: rgba(91, 85, 231, .18);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 650;
}
.sidebar a.item.on::before {
  position: absolute;
  left: -4px;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  content: "";
}
.sidebar a.item.on .ic { color: var(--accent); }
.sidebar a.item .tag { background: rgba(91, 85, 231, .14); color: var(--accent-hover); }
.sidebar .side-foot { color: var(--muted); border-color: var(--line); }
.sidebar .side-foot .k { color: var(--muted); }
.sidebar .side-foot .v { color: var(--text); }

.main > .wrap { padding: 32px 30px 80px; }
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: 1.65rem; letter-spacing: -.025em; }
.crumbs { margin-bottom: 14px; }

.card,
.stat {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card { padding: 21px 22px; margin-bottom: 20px; }
.card-head { margin-bottom: 15px; }
.stat { padding: 16px 18px; }
.stat .k { color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .09em; }
.stat .v { color: var(--ink); font-weight: 680; }

table th {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
}
table td { border-color: var(--line); }
tbody tr { transition: background-color var(--motion-fast); }
tbody tr:hover { background: rgba(238, 241, 247, .62); }

.btn {
  min-height: var(--control-h);
  border-radius: var(--control-radius);
  border-color: var(--line);
  background: var(--card);
  padding: 8px 14px;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.btn:hover { background: var(--surface-subtle); border-color: var(--line-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.small { min-height: 34px; padding: 5px 10px; }
.btn.ghost:hover { background: var(--surface-subtle); }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=search], input[type=date], input[type=time], input[type=month],
input[type=datetime-local], input[type=file], select, textarea {
  min-height: var(--control-h);
  border-color: var(--line-strong);
  border-radius: var(--control-radius);
  background-color: var(--field);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(34, 93, 216, .16);
  outline-offset: 1px;
  border-color: #225dd8;
}

.chip { border-radius: 999px; }
.chip.view { background: var(--accent-soft); color: #3730a3; }
.notice {
  border: 1px solid rgba(91, 85, 231, .22);
  border-left: 4px solid var(--accent);
  border-radius: var(--control-radius);
  padding: 14px 16px;
}
.notice.warn { border-color: #e3c06d; border-left-color: var(--warn); }
.notice.bad { border-color: #e7a2af; border-left-color: var(--bad); }
.notice.good { border-color: #91d1ba; border-left-color: var(--good); }

dialog.dlg {
  border-radius: var(--overlay-radius);
  box-shadow: var(--shadow-lift);
}
dialog.dlg::backdrop { background: rgba(23, 32, 51, .46); backdrop-filter: blur(3px); }
.dlg-head { padding: 22px 24px 14px; }
.dlg-body { padding: 20px 24px 24px; }
.dlg-close { border-radius: var(--control-radius); }
.dlg-close:hover { background: var(--surface-subtle); }

.auth { max-width: 430px; margin: 8vh auto; }
.auth .card { padding: 30px; border-radius: var(--overlay-radius); }
.auth .brandline { color: var(--accent); }

/* ------------------------------------------------------ shared auth shell

   Regulation and Polarstar treat authentication as a first-class product surface: an independent
   responsive shell that shares the portal's tokens and primitives.  This native Jinja/CSS version
   preserves Data Room's server-owned forms, CSRF and error decisions while carrying the same visual
   language from the signed-out door into the authenticated workspace. */

.auth-page {
  overflow-x: hidden;
  background: var(--paper);
}
.auth-page .main.no-sidebar {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 0;
}
.auth-shell {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(380px, .82fr) minmax(540px, 1.18fr);
  background-color: var(--paper);
  background-image: radial-gradient(circle at 82% -8%, rgba(91, 85, 231, .09), transparent 34rem),
                    linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 22rem);
}
.auth-masthead {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .1);
  background: #171b2f;
  color: #fbfbff;
  padding: 40px 48px 38px;
}
.auth-brand,
.auth-mobile-brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.auth-brand:hover,
.auth-mobile-brand:hover { color: inherit; text-decoration: none; }
.auth-brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: var(--control-radius);
  background: rgba(91, 85, 231, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.auth-brand-mark .mark { display: block; }
.auth-brand-mark.has-customer-logo {
  width: min(112px, 30vw);
  padding: 6px 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}
.auth-brand-mark .customer-brand-logo {
  width: 100%;
  max-width: 96px;
  height: 26px;
  object-fit: contain;
  object-position: left center;
}
.auth-brand-copy { min-width: 0; line-height: 1.18; }
.auth-brand-copy strong {
  display: block;
  overflow: hidden;
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-brand-copy small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #c8cde2;
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.auth-story {
  width: 100%;
  max-width: 560px;
  margin: auto 0;
}
.auth-story-rule {
  display: block;
  width: 48px;
  height: 1px;
  margin-bottom: 32px;
  background: #7771ff;
}
.auth-eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.auth-masthead .auth-eyebrow { color: #c8cde2; }
.auth-product-headline {
  max-width: 540px;
  margin: 22px 0 0;
  color: #fbfbff;
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  font-weight: 520;
  letter-spacing: -.04em;
  line-height: 1.13;
}
.auth-product-description {
  max-width: 500px;
  margin: 24px 0 0;
  color: #c8cde2;
  font-size: .88rem;
  line-height: 1.9;
}
.auth-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 48px 0 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.auth-points > div {
  min-width: 0;
  padding: 0 16px;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.auth-points > div:first-child { padding-left: 0; }
.auth-points > div:last-child { padding-right: 0; border-right: 0; }
.auth-points dt {
  color: #8f89ff;
  font-family: var(--mono);
  font-size: .62rem;
}
.auth-points dd {
  margin: 10px 0 0;
  color: #c8cde2;
  font-size: .72rem;
  line-height: 1.6;
}
.auth-masthead-foot {
  margin: 0;
  color: #9ca5bf;
  font-size: .62rem;
  letter-spacing: .03em;
}
.auth-stage {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 104px 40px 72px;
}
.auth-powered-by {
  position: absolute;
  right: 24px;
  bottom: 22px;
  margin: 0;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .025em;
}
.auth-stage-top {
  position: absolute;
  top: 22px;
  right: 24px;
  display: flex;
  max-width: calc(100% - 48px);
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.auth-test-mark,
.auth-switch {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: rgba(255, 255, 255, .88);
  padding: 7px 11px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
}
.auth-test-mark {
  border-color: #e3c06d;
  background: var(--warn-soft);
  color: #754508;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.auth-switch:hover {
  border-color: var(--line-strong);
  background: var(--surface-subtle);
  color: var(--ink);
  text-decoration: none;
}
.auth-frame { width: 100%; max-width: 440px; }
.auth-mobile-brand {
  display: none;
  margin-bottom: 42px;
  color: var(--ink);
}
.auth-mobile-brand .auth-brand-copy small { color: var(--muted); }
.auth-intro {
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}
.auth-intro h1 {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 3vw, 2.15rem);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1.16;
}
.auth-intro > p:last-child {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.65;
}
.auth-panel {
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 24px;
}
.auth-panel .notice { margin-bottom: 18px; }
.auth-panel .field { margin-bottom: 18px; }
.auth-panel input[type=email],
.auth-panel input[type=password],
.auth-panel input[type=text] { min-height: 44px; background: var(--card); }
.auth-panel form > .btn { width: 100%; }
.auth-panel .form-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.auth-panel .form-actions .btn { width: 100%; justify-content: center; }
.auth-panel > .small:last-child { margin-bottom: 0; }
.auth-protection {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 2px 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.55;
}
.auth-protection .ic {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--good);
}

.foot { background: transparent; }

@media (max-width: 1180px) {
  .shell-context { flex-basis: 220px; }
  .topbar .top-link span { display: none; }
}

@media (max-width: 900px) {
  .topbar { left: 0; }
  .shell-topbar > .brand { display: flex; }
  .shell-context { display: none; }
  .sidebar { top: 0; width: min(var(--sidebar-w), 88vw); }
  body.nav-open .scrim { inset: 0; background: rgba(23, 32, 51, .38); backdrop-filter: blur(2px); }
  .main > .wrap { padding: 24px 20px 72px; }
}

@media (max-width: 640px) {
  .main > .wrap { padding: 20px 14px 64px; }
  .page-head h1 { font-size: 1.4rem; }
  .card { padding: 17px 15px; border-radius: 13px; }
  .auth { margin: 5vh auto; }
  .auth .card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .top-link,
  .topbar .usermenu > summary,
  .sidebar a.item,
  .btn,
  tbody tr { transition-duration: .01ms; }
  .btn:hover { transform: none; }
}

@media (forced-colors: active) {
  .sidebar a.item.on { outline: 2px solid Highlight; }
  .internal-test-mark { outline: 1px solid CanvasText; }
  .viewer-mark {
    border-color: Highlight;
    background: transparent;
    forced-color-adjust: none;
  }
  .viewer-mark.saved-comment { border-style: dotted; }
  .viewer-mark.saved-annotation { border-style: solid; }
  .viewer-mark.pending { border-style: dashed; }
}