/* ==========================================================================
   Legal+ POC — application stylesheet
   Built on the Amspensan / PI Design System. Every value below is either a DS
   token or a value derived from one of the DS rules recorded in readme.md.

   DS rules enforced here:
   - Surfaces: white, 8px radius, 1px #EBEBEB drawn as outline at -1px offset,
     no shadow at rest. No gradient card backgrounds, no coloured left-border
     accent cards, no glassmorphism.
   - Hover on a surface or nav row: black wash rgba(0,0,0,.08). Never a colour
     change. No transform, no entrance animation.
   - Hover on a filled button: the accent's own -hover shade + hover shadow.
   - Focus: 1px solid black at +2px on buttons; inputs swap their hairline for
     a 2px --primary-color outline at -2px.
   - Disabled: opacity .40 + pointer-events none.
   - Selected: --menu-selected-color with full-strength ink.
   - Transitions 0.5s ease (colour/border/shadow); nav rows 600ms ease-out;
     toggles 0.8s cubic-bezier(.47,0,.23,1.38); progress 400ms.
   - Body copy light 300. Labels / table headers / list titles medium 500.
     Headings semibold 600.
   - Monospace for timestamps, record IDs and date ranges. Never for prose.
   - Sentence case everywhere except proper nouns.
   ========================================================================== */

/* --- Helvetica, the one face ---------------------------------------------- */
@font-face{font-family:'Helvetica';src:url('../fonts/Helvetica.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica';src:url('../fonts/Helvetica-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica';src:url('../fonts/Helvetica-Bold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica';src:url('../fonts/Helvetica-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica';src:url('../fonts/Helvetica-Oblique.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}

:root{
  /* DS layout rails. --sidebar-width (231px) and --topnav-minheight (56px)
     come from tokens/spacing.css; the collapsed rail is the DS's 68px. */
  --rail: var(--sidebar-width);
  --rail-collapsed: 68px;
  --topnav: var(--topnav-minheight);
  --transition-default: .5s ease;
  --transition-nav: 600ms ease-out;
  --animation-spring-gentle: .8s cubic-bezier(.47,0,.23,1.38);
}

/* ==========================================================================
   1. Global reset — link styling
   The DS has no underlined-link pattern in app chrome. Links are underlined
   only inside prose, via .link. Everything else is a control.
   ========================================================================== */
a{ color: inherit; text-decoration: none; }
a:hover, a:focus, a:active, a:visited{ text-decoration: none; }
a *, a:hover *{ text-decoration: none; }

/* tokens/base.css sets a:hover to --link-color-hover + underline. That must not
   reach app chrome — only .link inside prose keeps DS link styling. */
a:not(.link):hover,
a:not(.link):focus,
a:not(.link):active,
a:not(.link):visited{ text-decoration: none; }

/* The one underlined link: inside prose. */
.link{ color: var(--link-color); text-decoration: underline; text-underline-offset: 2px; }
.link:hover{ color: var(--link-color-hover); text-decoration: underline; }

button{ font-family: inherit; }
img, svg{ display: block; }
html, body{ overflow-x: hidden; }
body{ min-height: 100vh; }

/* Scrollbars — quiet, DS neutral ramp */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: var(--grey-medium); border-radius: 80px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover{ background: var(--grey-dark); background-clip: content-box; }

/* ==========================================================================
   2. Shell
   The sidebar is fixed so the rail is always full-height and structured; the
   previous sticky/stretch approach left the column empty below 100vh on long
   pages. Main is offset by the rail.
   ========================================================================== */
.main{
  margin-left: var(--rail);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background-color-body);
  transition: margin-left 400ms ease-in-out;
}
body.rail-collapsed .main{ margin-left: var(--rail-collapsed); }

.content{ flex: 1; padding: var(--spacing-6) var(--spacing-8) var(--spacing-12); }
.content-narrow{ max-width: 1040px; margin: 0 auto; width: 100%; }
.content-flush{ padding: 0; }

/* ==========================================================================
   3. Sidebar
   ========================================================================== */
.sidebar{
  position: fixed; inset: 0 auto 0 0;
  width: var(--rail);
  background: var(--white);
  border-right: 1px solid var(--grey-light);
  display: flex; flex-direction: column;
  z-index: var(--z-sticky);
  transition: width 400ms ease-in-out;
}
body.rail-collapsed .sidebar{ width: var(--rail-collapsed); }

.sidebar-head{
  height: var(--topnav);
  display: flex; align-items: center; gap: var(--spacing-2);
  padding: 0 var(--spacing-3);
  border-bottom: 1px solid var(--grey-light);
  flex-shrink: 0;
}
.brand{ display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; }
.brand-mark{
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--primary-color); color: var(--primary-ink);
  border-radius: var(--border-radius-medium);
  display: grid; place-items: center;
  font-size: var(--font-size-medium); font-weight: var(--font-weight-bold);
}
.brand-name{
  font-size: var(--h6-size); line-height: var(--h6-line);
  font-weight: var(--font-weight-bold); color: var(--text-color-main);
  white-space: nowrap;
}
.brand-name em{ font-style: normal; color: var(--accent-ink); }
.rail-toggle{
  margin-left: auto; width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-small);
  color: var(--text-color-subdued);
  transition: background-color var(--transition-default);
}
.rail-toggle:hover{ background: var(--rgba-hover-light); }
body.rail-collapsed .brand-name, body.rail-collapsed .rail-toggle{ display: none; }
body.rail-collapsed .sidebar-head{ justify-content: center; padding: 0; }

/* Scroll region — only the nav scrolls, so head and foot stay put. */
.sidebar-scroll{
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: var(--spacing-3);
  display: flex; flex-direction: column; gap: var(--spacing-1);
}
.sidebar-foot{
  flex-shrink: 0;
  padding: var(--spacing-3);
  border-top: 1px solid var(--grey-light);
}

.nav-cta{
  display: flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  height: 40px; padding: 0 var(--spacing-4);
  border-radius: var(--border-radius-default);
  background: var(--primary-color); color: var(--primary-ink);
  font-size: var(--font-size-medium); font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-button);
  transition: background-color var(--transition-default), box-shadow var(--transition-default);
  margin-bottom: var(--spacing-2);
  white-space: nowrap;
}
.nav-cta:hover{ background: var(--primary-color-hover); box-shadow: var(--shadow-button-hover); }
.nav-cta i{ font-size: 18px; flex-shrink: 0; }
body.rail-collapsed .nav-cta{ padding: 0; }
body.rail-collapsed .nav-cta span{ display: none; }

/* 11px uppercase overline — the one ALL-CAPS the DS permits. */
.nav-section{
  font-size: var(--font-size-smaller); line-height: var(--line-height-small);
  font-weight: var(--font-weight-semibold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-color-subdued);
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-1);
}
body.rail-collapsed .nav-section{
  text-align: center; padding: var(--spacing-3) 0 var(--spacing-1);
  font-size: 9px; overflow: hidden;
}

.nav-item{
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-medium);
  color: var(--text-color-main);
  font-size: var(--font-size-medium); line-height: var(--line-height-default);
  font-weight: var(--font-weight-regular);
  transition: background-color var(--transition-nav);
  white-space: nowrap;
}
.nav-item i{ font-size: 18px; color: var(--text-color-subdued); flex-shrink: 0; }
.nav-item:hover{ background: var(--rgba-hover-light); }
.nav-item[aria-current="page"]{
  background: var(--menu-selected-color);
  font-weight: var(--font-weight-medium);
}
.nav-item[aria-current="page"] i{ color: var(--text-color-subdued); }
.nav-badge{
  margin-left: auto;
  min-width: 20px; padding: 1px var(--spacing-2);
  border-radius: var(--border-radius-round);
  background: var(--primary-color); color: var(--primary-ink);
  font-size: var(--font-size-smaller); font-weight: var(--font-weight-semibold);
  text-align: center;
}
body.rail-collapsed .nav-item{ justify-content: center; padding: var(--spacing-2) 0; }
body.rail-collapsed .nav-item span{ display: none; }
body.rail-collapsed .nav-badge{
  position: absolute; margin: 0; transform: translate(12px,-10px);
  min-width: 16px; font-size: 9px; padding: 0 4px;
}
body.rail-collapsed .nav-item{ position: relative; }

/* ==========================================================================
   4. Top nav
   ========================================================================== */
.topnav{
  position: sticky; top: 0; z-index: var(--z-sticky);
  min-height: var(--topnav); height: var(--topnav);
  background: var(--white);
  border-bottom: 1px solid var(--grey-light);
  box-shadow: var(--shadow-button);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--spacing-4);
  padding: 0 var(--spacing-6);
}

.workspace-trigger{
  display: flex; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-medium);
  border: none; background: transparent; cursor: pointer;
  font-size: var(--font-size-medium); font-weight: var(--font-weight-medium);
  color: var(--text-color-main);
  transition: background-color var(--transition-default);
  max-width: 260px;
}
.workspace-trigger:hover{ background: var(--rgba-hover-light); }
.workspace-trigger > i{ color: var(--text-color-subdued); font-size: 14px; }
.workspace-mark{
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--border-radius-medium);
  background: var(--primary-color); color: var(--primary-ink);
  display: grid; place-items: center;
  font-size: var(--font-size-smaller); font-weight: var(--font-weight-semibold);
}

.omnibox{
  width: 100%; max-width: 520px; min-width: 0; justify-self: stretch;
  display: flex; align-items: center; gap: var(--spacing-2);
  height: 32px; padding: 0 var(--spacing-2) 0 var(--spacing-3);
  background: var(--white);
  border: none; outline: 1px solid var(--grey-light); outline-offset: -1px;
  border-radius: var(--border-radius-default);
  color: var(--text-color-subdued);
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-family: inherit;
  cursor: text; text-align: left;
  transition: outline-color var(--transition-default), background-color var(--transition-default);
}
.omnibox:hover{ outline-color: var(--grey-dark); }
.omnibox i{ font-size: 16px; flex-shrink: 0; }
.omnibox span:not(.kbd){
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-weight: var(--font-weight-light);
}
.omnibox .kbd{ flex: 0 0 auto; flex-shrink: 0; }
.kbd{
  font-family: var(--font-family-mono); font-size: var(--font-size-smaller);
  padding: 2px var(--spacing-1);
  background: var(--white); color: var(--text-color-subdued);
  border-radius: var(--border-radius-small);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
}

.topnav-end{ display: flex; align-items: center; gap: var(--spacing-1); justify-self: end; }
.icon-btn{
  position: relative;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-medium);
  color: var(--text-color-main);
  transition: background-color var(--transition-default);
}
.icon-btn i{ font-size: 18px; }
.icon-btn:hover{ background: var(--rgba-hover-light); }
.icon-btn .unread{
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--status-error); outline: 2px solid var(--white);
}
.lang-trigger{
  display: flex; align-items: center; gap: var(--spacing-1);
  height: 36px; padding: 0 var(--spacing-2);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-medium); color: var(--text-color-main);
  transition: background-color var(--transition-default);
}
.lang-trigger:hover{ background: var(--rgba-hover-light); }
.lang-trigger i{ font-size: 16px; color: var(--text-color-subdued); }

/* ==========================================================================
   5. Dropdown menus (shadow-dropdown is the DS's floating shadow)
   ========================================================================== */
.dd{ position: relative; }
.dd-menu{
  position: absolute; z-index: var(--z-dropdown);
  min-width: 240px; padding: var(--spacing-1);
  background: var(--white);
  border-radius: var(--border-radius-default);
  box-shadow: var(--shadow-dropdown);
  display: none;
}
.dd-menu[data-open="true"]{ display: block; }
.dd-menu.dd-start{ top: calc(100% + var(--spacing-1)); left: 0; }
.dd-menu.dd-end{ top: calc(100% + var(--spacing-1)); right: 0; }
.dd-menu.dd-wide{ min-width: 320px; }
.dd-head{
  padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
  font-size: var(--font-size-smaller); font-weight: var(--font-weight-semibold);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-color-subdued);
}
.dd-item{
  width: 100%; min-height: 36px;
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-light); color: var(--text-color-main);
  text-align: left;
  transition: background-color var(--transition-default);
}
.dd-item:hover{ background: var(--rgba-hover-light); }
.dd-item i{ font-size: 16px; color: var(--text-color-subdued); flex-shrink: 0; }
.dd-item[aria-selected="true"]{ background: var(--menu-selected-color); font-weight: var(--font-weight-medium); }
.dd-item[aria-selected="true"] i{ color: var(--primary-color); }
.dd-item .dd-check{ margin-left: auto; color: var(--primary-color); opacity: 0; }
.dd-item[aria-selected="true"] .dd-check{ opacity: 1; }
.dd-item-sub{ font-size: var(--font-size-small); color: var(--text-color-subdued); font-weight: var(--font-weight-light); }
.dd-divider{ height: 1px; background: var(--grey-light); margin: var(--spacing-1) 0; }
.dd-danger, .dd-danger i{ color: var(--danger-color); }

/* ==========================================================================
   6. Page header / breadcrumbs
   ========================================================================== */
.crumbs{
  display: flex; align-items: center; gap: var(--spacing-1); flex-wrap: wrap;
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  color: var(--text-color-subdued);
  margin-bottom: var(--spacing-3);
}
.crumbs a{ color: var(--text-color-subdued); transition: color var(--transition-default); }
.crumbs a:hover{ color: var(--text-color-main); }
.crumbs i{ font-size: 12px; color: var(--grey-medium); }
.crumbs [aria-current="page"]{ color: var(--text-color-main); font-weight: var(--font-weight-medium); }

.page-head{
  display: flex; align-items: flex-end; gap: var(--spacing-4);
  flex-wrap: wrap; margin-bottom: var(--spacing-6);
}
.page-head-text{ flex: 1 1 320px; min-width: 0; }
.page-head h1{
  margin: 0 0 var(--spacing-1);
  font-size: var(--h4-size); line-height: var(--h4-line);
  font-weight: var(--font-weight-semibold); color: var(--text-color-main);
}
.page-head .sub{
  margin: 0;
  font-size: var(--font-size-medium); line-height: var(--line-height-default);
  font-weight: var(--font-weight-light); color: var(--text-color-subdued);
}
.page-head .over{
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  color: var(--text-color-subdued); margin-bottom: var(--spacing-1);
}
.page-head-actions{ display: flex; gap: var(--spacing-2); flex-shrink: 0; flex-wrap: wrap; }

/* ==========================================================================
   7. Buttons — DS css/buttons.css geometry
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: var(--spacing-2) var(--spacing-4);
  height: 36px;
  border: 0.5px solid transparent;
  border-radius: var(--border-radius-default);
  font-size: var(--font-size-medium); line-height: var(--line-height-default);
  font-weight: var(--font-weight-semibold);
  color: var(--text-color-main); background: transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  box-shadow: var(--shadow-button);
  transition: background-color var(--transition-default), border-color var(--transition-default), box-shadow var(--transition-default);
}
.btn i{ font-size: 16px; }
.btn:active{ box-shadow: var(--shadow-button-pressed); }
.btn[disabled], .btn.is-disabled, .btn.disabled{ opacity: .40; pointer-events: none; }

.btn-primary{ background: var(--primary-color); border-color: var(--primary-color); color: var(--primary-ink); }
.btn-primary:hover{ background: var(--primary-color-hover); border-color: var(--primary-color-hover); box-shadow: var(--shadow-button-hover); }

/* DS buttons.css — transparent fill, accent ink, currentColor hairline. */
.btn-secondary{
  background: transparent;
  border-color: currentColor;
  color: var(--accent-ink);
}
.btn-secondary:hover{ box-shadow: var(--shadow-button-hover); }

.btn-ghost{ background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover{ background: var(--rgba-hover-light); box-shadow: none; }

.btn-danger{ background: transparent; border-color: currentColor; color: var(--danger-color); }
.btn-danger:hover{ box-shadow: var(--shadow-button-hover); }

/* App alias for DS .btn-destructive (filled danger). */
.btn-danger-solid, .btn-destructive{
  background: var(--danger-color); border-color: var(--danger-color); color: var(--white);
}
.btn-danger-solid:hover, .btn-destructive:hover{
  background: var(--danger-color-hover); border-color: var(--danger-color-hover); box-shadow: var(--shadow-button-hover);
}

/* base.css a:hover beats .btn-primary on specificity — re-assert on <a> controls. */
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited{ text-decoration: none; }
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-primary:visited{ color: var(--primary-ink); }
a.btn-secondary,
a.btn-secondary:hover,
a.btn-secondary:focus,
a.btn-secondary:visited{ color: var(--accent-ink); }
a.btn-ghost,
a.btn-ghost:hover,
a.btn-ghost:focus{ color: var(--text-color-main); }
a.btn-danger,
a.btn-danger:hover,
a.btn-danger:focus{ color: var(--danger-color); }
a.btn-danger-solid,
a.btn-danger-solid:hover,
a.btn-danger-solid:focus,
a.btn-danger-solid:visited,
a.btn-destructive,
a.btn-destructive:hover,
a.btn-destructive:focus,
a.btn-destructive:visited{ color: var(--white); }
a.nav-cta,
a.nav-cta:hover,
a.nav-cta:focus,
a.nav-cta:active,
a.nav-cta:visited{ color: var(--primary-ink); text-decoration: none; }
a.nav-item,
a.nav-item:hover,
a.nav-item:focus,
a.nav-item:visited{ color: var(--text-color-main); text-decoration: none; }
a.nav-item[aria-current="page"],
a.nav-item[aria-current="page"]:hover{ font-weight: var(--font-weight-medium); }
a.row-link,
a.row-link:hover,
a.card-link,
a.card-link:hover,
a.dd-item,
a.dd-item:hover,
a.entry,
a.entry:hover,
a.tpl,
a.tpl:hover{ text-decoration: none; }

.btn-sm{ height: 32px; padding: var(--spacing-2); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.btn-lg{ height: 44px; padding: var(--spacing-4) var(--spacing-6); }
.btn-icon{ width: 36px; padding: 0; }
.btn-sm.btn-icon{ width: 32px; }

/* DS focus: 1px solid black at +2px on buttons. */
.btn:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible,
.dd-item:focus-visible, .tab:focus-visible, .nav-cta:focus-visible{
  outline: 1px solid var(--black); outline-offset: 2px;
}

/* ==========================================================================
   8. Surfaces
   ========================================================================== */
.card{
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  padding: var(--spacing-5);
}
.card-sm{ padding: var(--spacing-4); }
.card-lg{ padding: var(--spacing-6); }
.card-flush{ padding: 0; overflow: hidden; }

/* Interactive surface: black wash on hover, no colour change, no transform. */
.card-link{ display: block; transition: background-color var(--transition-default); }
.card-link:hover{ background: var(--rgba-hover-light); }

.card-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--spacing-3); margin-bottom: var(--spacing-4);
}
.card-head-text{ min-width: 0; }
.card-head h2{
  margin: 0; font-size: var(--h6-size); line-height: var(--h6-line);
  font-weight: var(--font-weight-semibold); color: var(--text-color-main);
}
.card-head .sub{
  margin: 2px 0 0; font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-light); color: var(--text-color-subdued);
}
.card-head-actions{ display: flex; align-items: center; gap: var(--spacing-2); flex-shrink: 0; }

.section-label{
  font-size: var(--font-size-smaller); line-height: var(--line-height-small);
  font-weight: var(--font-weight-semibold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-color-subdued);
  margin: 0 0 var(--spacing-2);
}

/* ==========================================================================
   9. Grids
   ========================================================================== */
.grid{ display: grid; gap: var(--spacing-3); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.split{ display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--spacing-4); align-items: start; }
.split-even{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--spacing-4); align-items: start; }
.aside-right{ display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--spacing-5); align-items: start; }
.aside-left{ display: grid; grid-template-columns: 240px minmax(0,1fr); gap: var(--spacing-5); align-items: start; }

@media (max-width: 1280px){
  .grid-4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .aside-right, .split{ grid-template-columns: 1fr; }
}
@media (max-width: 1024px){
  .grid-3, .grid-2, .split-even, .aside-left{ grid-template-columns: 1fr; }
  .content{ padding: var(--spacing-5) var(--spacing-5) var(--spacing-10); }
}

/* ==========================================================================
   10. Stat cards
   ========================================================================== */
.stat{
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  padding: var(--spacing-4);
  display: flex; flex-direction: column; gap: var(--spacing-2);
}
.stat-top{ display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.stat-label{ font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--text-color-subdued); }
.stat-glyph{
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--border-radius-default);
  display: grid; place-items: center;
  background: var(--status-info-bg); color: var(--status-info-ink);
}
.stat-glyph i{ font-size: 18px; }
.stat-glyph.warn{ background: var(--status-warning-bg); color: var(--status-warning-ink); }
.stat-glyph.ok{ background: var(--status-success-bg); color: var(--status-success-ink); }
.stat-glyph.err{ background: var(--status-error-bg); color: var(--status-error-ink); }
.stat-glyph.neutral{ background: var(--status-neutral-bg); color: var(--status-neutral-ink); }
.stat-value{
  font-size: var(--h4-size); line-height: var(--h4-line);
  font-weight: var(--font-weight-semibold); color: var(--text-color-main);
}
.stat-foot{ font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }
.delta{ display: inline-flex; align-items: center; gap: 2px; font-weight: var(--font-weight-medium); }
.delta i{ font-size: 12px; }
.delta.up{ color: var(--status-success-ink); }
.delta.down{ color: var(--status-error-ink); }

/* ==========================================================================
   11. Status pills — three-token status system from tokens/colors.css
   Closed vocabulary for this product: Draft · Sent · Viewed · Pending ·
   Signed · Complete · Expired · Rejected · Voided.
   ========================================================================== */
/* Status pills — DS .label geometry with status-token colourways. */
.pill{
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 4px 12px;
  border-radius: var(--border-radius-round);
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-semibold); white-space: nowrap;
}
.pill i{ font-size: 12px; }
.pill-draft, .pill-voided{ background: var(--status-neutral-bg); color: var(--status-neutral-ink); }
.pill-sent, .pill-viewed, .pill-processing{ background: var(--status-info-bg); color: var(--status-info-ink); }
.pill-pending, .pill-expiring{ background: var(--status-warning-bg); color: var(--status-warning-ink); }
.pill-signed, .pill-complete{ background: var(--status-success-bg); color: var(--status-success-ink); }
.pill-expired, .pill-rejected{ background: var(--status-error-bg); color: var(--status-error-ink); }

/* Category tags — DS round label shape + measured tint pairs. */
.tag{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--border-radius-round);
  font-size: var(--font-size-smaller); line-height: var(--line-height-small);
  font-weight: var(--font-weight-semibold);
  background: var(--status-neutral-bg); color: var(--status-neutral-ink);
  white-space: nowrap;
}
.tag i{ font-size: 12px; }
.tag-construction{ background: var(--status-warning-bg); color: var(--status-warning-ink); }
.tag-employment  { background: var(--pharma-blue-light); color: var(--pharma-blue-hover); }
.tag-business    { background: var(--pharma-blue-light); color: var(--status-info-ink); }
.tag-realestate  { background: var(--status-success-bg); color: var(--status-success-ink); }
.tag-legal       { background: #ECE1FE; color: var(--label-purple-bg); }
.tag-technology  { background: #D6F3F4; color: #106B71; }

/* ==========================================================================
   12. Avatars — flat data-accent fills, never gradients (DS)
   ========================================================================== */
.avatar{
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--border-radius-round);
  display: grid; place-items: center;
  font-size: var(--font-size-smaller); font-weight: var(--font-weight-semibold);
  color: var(--white);
  background: var(--queen-blue);
}
.avatar-32{ width: 32px; height: 32px; font-size: var(--font-size-small); }
.avatar-40{ width: 40px; height: 40px; font-size: var(--font-size-medium); }
.avatar-c1{ background: var(--queen-blue); }
.avatar-c2{ background: var(--ayame-iris); }
.avatar-c3{ background: var(--red-bud); }
.avatar-c4{ background: var(--emerald-green-dark); }
.avatar-c5{ background: var(--plum-purple); }
.avatar-c6{ background: #8A6A12; }
.avatar-stack{ display: inline-flex; align-items: center; }
.avatar-stack .avatar{ outline: 2px solid var(--white); margin-left: -6px; }
.avatar-stack .avatar:first-child{ margin-left: 0; }
.avatar-rest{ background: var(--grey-light); color: var(--text-color-subdued); }

/* ==========================================================================
   13. Tabs
   ========================================================================== */
.tabs{
  display: flex; gap: var(--spacing-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--grey-light);
  margin-bottom: var(--spacing-5);
}
.tab{
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--spacing-3) var(--spacing-3);
  margin-bottom: -1px;
  border: none; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-medium); color: var(--text-color-subdued);
  transition: color var(--transition-default), border-color var(--transition-default);
}
.tab:hover{ color: var(--text-color-main); }
.tab[aria-selected="true"]{ color: var(--text-color-main); border-bottom-color: var(--theme-color); }
.tab-count{
  padding: 1px 7px; border-radius: var(--border-radius-round);
  background: var(--grey-light); color: var(--text-color-subdued);
  font-size: var(--font-size-smaller); font-weight: var(--font-weight-medium);
}
.tab[aria-selected="true"] .tab-count{ background: var(--menu-selected-color); color: var(--text-color-main); }
[data-panel]{ display: none; }
[data-panel][data-active="true"]{ display: block; }

/* Segmented control */
.segmented{
  display: inline-flex; padding: var(--spacing-1); gap: 2px;
  background: var(--grey-light);
  border-radius: var(--border-radius-default);
  outline: none;
}
.segmented button{
  display: inline-flex; align-items: center; gap: var(--spacing-1);
  padding: 6px var(--spacing-3);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-regular);
  color: var(--text-color-subdued);
  transition: background-color var(--transition-default), color var(--transition-default);
}
.segmented button i{ font-size: 14px; }
.segmented button[aria-selected="true"]{ background: var(--white); color: var(--text-color-main); box-shadow: none; }

/* ==========================================================================
   14. Toolbar / filters
   ========================================================================== */
.toolbar{
  display: flex; align-items: center; gap: var(--spacing-2);
  flex-wrap: wrap; margin-bottom: var(--spacing-4);
}
.toolbar-end{ margin-left: auto; display: flex; align-items: center; gap: var(--spacing-2); }
.chip-btn{
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--spacing-3);
  background: var(--white);
  border: none; outline: 1px solid var(--grey-light); outline-offset: -1px;
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-small); color: var(--text-color-main);
  cursor: pointer;
  transition: outline-color var(--transition-default), background-color var(--transition-default);
}
.chip-btn:hover{ outline-color: var(--grey-medium); }
.chip-btn i{ font-size: 14px; color: var(--text-color-subdued); }
.chip-btn[data-applied="true"]{
  background: var(--menu-selected-color);
  outline-color: var(--primary-color); color: var(--primary-color);
}
.chip-btn[data-applied="true"] i{ color: var(--primary-color); }

.field-search{
  display: flex; align-items: center; gap: var(--spacing-2);
  height: 32px; padding: 0 var(--spacing-3);
  background: var(--white);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  border-radius: var(--border-radius-medium);
  min-width: 240px; flex: 0 1 320px;
  transition: outline-color var(--transition-default);
}
.field-search:focus-within{ outline: 2px solid var(--primary-color); outline-offset: -2px; }
.field-search i{ font-size: 14px; color: var(--text-color-subdued); flex-shrink: 0; }
.field-search input{
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: var(--font-size-small);
  font-weight: var(--font-weight-light); color: var(--text-color-main);
}

/* ==========================================================================
   15. Inputs
   ========================================================================== */
.label{
  display: block;
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-medium); color: var(--text-color-main);
  margin-bottom: 6px;
}
.hint{
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-light); color: var(--text-color-subdued);
  margin-top: var(--spacing-1);
}
.input, .select, .textarea{
  width: 100%;
  padding: var(--spacing-3);
  min-height: 40px;
  background: var(--white); color: var(--text-color-main);
  border: none; outline: 1px solid var(--grey-light); outline-offset: -1px;
  border-radius: var(--border-radius-default);
  font-family: inherit; font-size: var(--font-size-medium);
  font-weight: var(--font-weight-light);
  transition: outline-color var(--transition-default);
}
.input:hover, .select:hover, .textarea:hover{ outline-color: var(--grey-dark); }
/* DS: inputs replace their hairline with a 2px --primary-color outline at -2px */
.input:focus, .select:focus, .textarea:focus{ outline: 2px solid var(--primary-color); outline-offset: -2px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"]{ outline: 2px solid var(--danger-color); outline-offset: -2px; }
.textarea{ min-height: 96px; resize: vertical; line-height: var(--line-height-default); }
.select{ appearance: none; cursor: pointer; padding-right: var(--spacing-8); background-image: none; }
.select-wrap{ position: relative; }
.select-wrap > i{ position: absolute; right: var(--spacing-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-color-subdued); font-size: 14px; }
.field{ margin-bottom: var(--spacing-4); }
.field-row{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--spacing-4); }
@media (max-width: 720px){ .field-row{ grid-template-columns: 1fr; } }

/* Toggle switch — the DS's one springy element */
.switch{
  position: relative; width: 36px; height: 20px; flex-shrink: 0;
  border-radius: var(--border-radius-round);
  background: var(--grey-medium);
  border: none; cursor: pointer; padding: 0;
  transition: background-color var(--animation-spring-gentle);
}
.switch::after{
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform var(--animation-spring-gentle);
}
.switch[aria-checked="true"]{ background: var(--primary-color); }
.switch[aria-checked="true"]::after{ transform: translateX(16px); }

.switch-row{
  display: flex; align-items: flex-start; gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  border-radius: var(--border-radius-default);
  margin-bottom: var(--spacing-2);
  cursor: pointer;
  transition: outline-color var(--transition-default), background-color var(--transition-default);
}
.switch-row:hover{ background: var(--rgba-hover-light); }
.switch-row[data-on="true"]{ outline-color: var(--primary-color); background: var(--menu-selected-color); }
.switch-row-body{ flex: 1; min-width: 0; }
.switch-row-name{ font-size: var(--font-size-medium); font-weight: var(--font-weight-medium); }
.switch-row-desc{ font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); margin-top: 2px; }

/* Choice cards */
.choice-grid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--spacing-3); }
.choice-grid-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 860px){ .choice-grid, .choice-grid-2{ grid-template-columns: 1fr; } }
.choice{
  position: relative; text-align: left;
  padding: var(--spacing-4);
  background: var(--white);
  border: none; outline: 1px solid var(--grey-light); outline-offset: -1px;
  border-radius: var(--border-radius-default);
  cursor: pointer; font-family: inherit;
  transition: outline-color var(--transition-default), background-color var(--transition-default);
}
.choice:hover{ background: var(--rgba-hover-light); }
.choice[aria-checked="true"]{ outline: 2px solid var(--primary-color); outline-offset: -2px; background: var(--menu-selected-color); }
.choice-title{ font-size: var(--font-size-medium); font-weight: var(--font-weight-semibold); color: var(--text-color-main); }
.choice-desc{ font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); margin-top: 2px; }
.choice-check{ position: absolute; top: var(--spacing-3); right: var(--spacing-3); color: var(--primary-color); font-size: 16px; opacity: 0; transition: opacity var(--transition-default); }
.choice[aria-checked="true"] .choice-check{ opacity: 1; }

/* ==========================================================================
   16. Tables
   ========================================================================== */
.table-card{
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  overflow: hidden;
}
table.data{ width: 100%; border-collapse: collapse; }
table.data thead th{
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--grey-light);
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-medium); color: var(--text-color-subdued);
  white-space: nowrap;
}
table.data tbody td{
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--grey-light);
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  font-weight: var(--font-weight-light); color: var(--text-color-main);
  vertical-align: middle;
}
table.data tbody tr:last-child td{ border-bottom: none; }
table.data tbody tr[data-href]{ cursor: pointer; transition: background-color var(--transition-default); }
table.data tbody tr[data-href]:hover{ background: var(--rgba-hover-light); }
table.data th.num, table.data td.num{ text-align: right; }

.cell-primary{ display: flex; align-items: center; gap: var(--spacing-3); min-width: 0; }
.cell-primary > i{ font-size: 18px; color: var(--primary-color); flex-shrink: 0; }
.cell-title{ font-size: var(--font-size-medium); font-weight: var(--font-weight-medium); color: var(--text-color-main); }
.cell-sub{ font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); margin-top: 2px; }

.kebab{
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-small);
  color: var(--text-color-subdued);
  transition: background-color var(--transition-default);
}
.kebab:hover{ background: var(--rgba-hover-light); color: var(--text-color-main); }

.table-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-4); flex-wrap: wrap;
  padding: var(--spacing-4) var(--spacing-1);
  font-size: var(--font-size-small); color: var(--text-color-subdued);
}
.pager{ display: flex; gap: var(--spacing-1); }
.pager button{
  min-width: 32px; height: 32px; padding: 0 var(--spacing-2);
  border: none; outline: 1px solid var(--grey-light); outline-offset: -1px;
  background: var(--white); border-radius: var(--border-radius-medium);
  font-family: inherit; font-size: var(--font-size-small); color: var(--text-color-main);
  cursor: pointer; transition: outline-color var(--transition-default), background-color var(--transition-default);
}
.pager button:hover{ outline-color: var(--grey-medium); }
.pager button[aria-current="true"]{ background: var(--menu-selected-color); outline-color: var(--primary-color); color: var(--primary-color); font-weight: var(--font-weight-semibold); }

/* Checkbox */
.cb{
  width: 16px; height: 16px; flex-shrink: 0;
  appearance: none; margin: 0; cursor: pointer;
  background: var(--white);
  outline: 1px solid var(--grey-medium); outline-offset: -1px;
  border-radius: var(--border-radius-small);
  display: grid; place-items: center;
  transition: background-color var(--transition-default), outline-color var(--transition-default);
}
.cb:checked{ background: var(--primary-color); outline-color: var(--primary-color); }
.cb:checked::after{ content: '\2713'; color: var(--white); font-size: 11px; line-height: 1; font-weight: 700; }

/* ==========================================================================
   17. List rows (queues, signers, versions)
   ========================================================================== */
.rows{ display: flex; flex-direction: column; }
.row{
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--grey-light);
}
.row:last-child{ border-bottom: none; }
.row-body{ flex: 1; min-width: 0; }
.row-title{ font-size: var(--font-size-medium); font-weight: var(--font-weight-medium); color: var(--text-color-main); }
.row-meta{ font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); margin-top: 2px; }
.row-actions{ display: flex; align-items: center; gap: var(--spacing-2); flex-shrink: 0; }

.row-link{
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-3); border-radius: var(--border-radius-medium);
  transition: background-color var(--transition-default);
}
.row-link:hover{ background: var(--rgba-hover-light); }
.row-glyph{
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--border-radius-default);
  display: grid; place-items: center;
  background: var(--status-info-bg); color: var(--status-info-ink);
}
.row-glyph.warn{ background: var(--status-warning-bg); color: var(--status-warning-ink); }
.row-glyph.err{ background: var(--status-error-bg); color: var(--status-error-ink); }
.row-glyph.ok{ background: var(--status-success-bg); color: var(--status-success-ink); }
.row-glyph.neutral{ background: var(--status-neutral-bg); color: var(--status-neutral-ink); }
.row-chevron{ color: var(--grey-medium); font-size: 16px; flex-shrink: 0; }

.order-pip{
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--border-radius-round);
  background: var(--menu-selected-color); color: var(--primary-color);
  display: grid; place-items: center;
  font-size: var(--font-size-small); font-weight: var(--font-weight-semibold);
}

/* Definition rows */
.defs{ display: flex; flex-direction: column; }
.def{
  display: flex; gap: var(--spacing-4);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--grey-light);
  font-size: var(--font-size-medium);
}
.def:last-child{ border-bottom: none; }
.def-key{ width: 140px; flex-shrink: 0; color: var(--text-color-subdued); font-weight: var(--font-weight-light); }
.def-val{ flex: 1; min-width: 0; color: var(--text-color-main); font-weight: var(--font-weight-regular); }

/* ==========================================================================
   18. Timeline
   ========================================================================== */
.timeline{ position: relative; padding-left: var(--spacing-5); }
.timeline::before{
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px;
  width: 2px; background: var(--grey-light);
}
.tl{ position: relative; padding: var(--spacing-1) 0 var(--spacing-3); }
.tl::before{
  content: ''; position: absolute; left: calc(-1 * var(--spacing-5) + 1px); top: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); outline: 2px solid var(--primary-color); outline-offset: -1px;
}
.tl[data-actor="system"]::before{ outline-color: var(--grey-dark); }
.tl-title{ font-size: var(--font-size-medium); line-height: var(--line-height-default); font-weight: var(--font-weight-light); color: var(--text-color-main); }
.tl-title strong{ font-weight: var(--font-weight-medium); }
/* DS: timestamps are monospace and absolute. Never relative time on a record. */
.tl-time{ font-family: var(--font-family-mono); font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--text-color-subdued); margin-top: 2px; }

/* ==========================================================================
   19. Progress
   ========================================================================== */
.track{
  height: 8px; background: var(--grey-light);
  border-radius: var(--border-radius-round); overflow: hidden;
}
.track-lg{ height: 24px; border-radius: var(--border-radius-medium); }
.track > span{
  display: block; height: 100%;
  background: var(--primary-color);
  border-radius: var(--border-radius-round);
  transition: width 400ms ease;
}
.track > span.ok{ background: var(--status-success); }
.track > span.warn{ background: var(--status-warning); }

.meter{ display: grid; grid-template-columns: 180px minmax(0,1fr) 56px; align-items: center; gap: var(--spacing-3); padding: var(--spacing-2) 0; font-size: var(--font-size-medium); }
.meter-val{ text-align: right; font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
@media (max-width: 720px){ .meter{ grid-template-columns: 120px minmax(0,1fr) 48px; } }

/* ==========================================================================
   20. Banners / callouts
   ========================================================================== */
.banner{
  display: flex; align-items: flex-start; gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--border-radius-default);
  font-size: var(--font-size-medium); line-height: var(--line-height-default);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--spacing-4);
}
.banner strong{ font-weight: var(--font-weight-medium); }
.banner > i{ font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.banner-info{ background: var(--status-info-bg); color: var(--status-info-ink); }
.banner-warn{ background: var(--status-warning-bg); color: var(--status-warning-ink); }
.banner-err{ background: var(--status-error-bg); color: var(--status-error-ink); }
.banner-ok{ background: var(--status-success-bg); color: var(--status-success-ink); }
.banner-neutral{ background: var(--cotton-cloud); color: var(--text-color-main); }
.banner .banner-body{ flex: 1; min-width: 0; }
.banner-actions{ display: flex; gap: var(--spacing-2); flex-shrink: 0; }

/* Plan strip — flat Midnight Onyx, the DS's one dark surface. No gradient. */
.plan-strip{
  display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap;
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--midnight-onyx); color: var(--white);
  border-radius: var(--border-radius-default);
  margin-bottom: var(--spacing-5);
}
.plan-strip-glyph{
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--border-radius-default);
  background: rgba(255,255,255,.12);
  display: grid; place-items: center;
}
.plan-strip-glyph i{ font-size: 20px; }
.plan-strip-body{ flex: 1 1 240px; min-width: 0; }
.plan-strip-title{ display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--h6-size); line-height: var(--h6-line); font-weight: var(--font-weight-semibold); }
.plan-strip-sub{ font-size: var(--font-size-small); font-weight: var(--font-weight-light); opacity: .85; margin-top: 2px; }
.plan-chip{
  padding: 2px var(--spacing-2); border-radius: var(--border-radius-round);
  background: rgba(255,255,255,.14);
  outline: 1px solid rgba(255,255,255,.24); outline-offset: -1px;
  font-size: var(--font-size-smaller); font-weight: var(--font-weight-medium);
}
.plan-strip-meta{ display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--font-size-small); font-weight: var(--font-weight-light); opacity: .85; }
/* Secondary on the dark plan strip must stay a light filled control. */
.plan-strip .btn-secondary{
  background: var(--white);
  border-color: var(--white);
  color: var(--text-color-main);
}
.plan-strip .btn-secondary:hover{ box-shadow: var(--shadow-button-hover); }
a.plan-strip .btn-secondary,
.plan-strip a.btn-secondary,
.plan-strip a.btn-secondary:hover,
.plan-strip a.btn-secondary:focus,
.plan-strip a.btn-secondary:visited{ color: var(--text-color-main); }

/* ==========================================================================
   21. Empty state — DS: one plain sentence naming the filter, no illustration
   ========================================================================== */
.empty{
  padding: var(--spacing-10) var(--spacing-6);
  text-align: center;
}
.empty p{
  margin: 0 0 var(--spacing-4);
  font-size: var(--font-size-medium); font-weight: var(--font-weight-light);
  color: var(--text-color-subdued);
}

/* ==========================================================================
   22. Modal / drawer / overlay
   ========================================================================== */
.scrim{
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.6);
  display: none; align-items: center; justify-content: center;
  padding: var(--spacing-6);
}
.scrim[data-open="true"]{ display: flex; }
.modal{
  background: var(--white);
  border-radius: var(--border-radius-default);
  box-shadow: var(--shadow-modal);
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  padding: var(--spacing-4);
}
.modal-wide{ width: min(792px, 100%); }
.modal-head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-4);
  margin: calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1) var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 0.5px solid var(--grey-medium);
}
.modal-head h2{
  margin: 0;
  font-size: var(--font-size-large); line-height: var(--line-height-large);
  font-weight: var(--font-weight-semibold);
}
.modal-head .sub{ margin: var(--spacing-1) 0 0; font-size: var(--font-size-medium); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }
.modal-foot{
  display: flex; justify-content: flex-end; gap: var(--spacing-4); flex-wrap: wrap;
  margin: var(--spacing-4) calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 0.5px solid var(--grey-medium);
}
.modal-foot-split{ justify-content: space-between; }

/* Command palette */
.palette-scrim{
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.6);
  display: none; justify-content: center; align-items: flex-start;
  padding: 10vh var(--spacing-6) var(--spacing-6);
}
.palette-scrim[data-open="true"]{ display: flex; }
.palette{
  background: var(--white); width: min(640px,100%);
  border-radius: var(--border-radius-default);
  box-shadow: var(--shadow-modal);
  overflow: hidden; max-height: 70vh; display: flex; flex-direction: column;
}
.palette-input{
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--grey-light);
}
.palette-input i{ font-size: 18px; color: var(--text-color-subdued); }
.palette-input input{
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: var(--h6-size); font-weight: var(--font-weight-light);
  color: var(--text-color-main);
}
.palette-results{ overflow-y: auto; padding: var(--spacing-2); }
.palette-group{ padding: var(--spacing-2) var(--spacing-3) var(--spacing-1); font-size: var(--font-size-smaller); font-weight: var(--font-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-color-subdued); }
.palette-item{
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-medium);
  transition: background-color var(--transition-default);
}
.palette-item:hover, .palette-item[data-cursor="true"]{ background: var(--menu-selected-color); }
.palette-item i{ font-size: 16px; color: var(--text-color-subdued); flex-shrink: 0; }
.palette-item-body{ flex: 1; min-width: 0; }
.palette-item-title{ font-size: var(--font-size-medium); font-weight: var(--font-weight-medium); }
.palette-item-sub{ font-size: var(--font-size-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }

/* Toast — no entrance bounce, per DS motion rules */
.toast-host{ position: fixed; bottom: var(--spacing-6); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--spacing-2); align-items: center; }
.toast{
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  box-shadow: var(--shadow-dropdown);
  font-size: var(--font-size-medium); color: var(--text-color-main);
  max-width: 520px;
}
.toast i{ font-size: 18px; flex-shrink: 0; }
.toast.ok i{ color: var(--status-success-ink); }
.toast.info i{ color: var(--status-info-ink); }
.toast.warn i{ color: var(--status-warning-ink); }
.toast.err i{ color: var(--status-error-ink); }

/* ==========================================================================
   23. Stepper (wizard)
   ========================================================================== */
.stepper{
  display: flex; align-items: center;
  padding: var(--spacing-4);
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  margin-bottom: var(--spacing-5);
  overflow-x: auto;
}
.step{ display: flex; align-items: center; gap: var(--spacing-2); flex-shrink: 0; }
.step-pip{
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--border-radius-round);
  background: var(--grey-light); color: var(--text-color-subdued);
  display: grid; place-items: center;
  font-size: var(--font-size-small); font-weight: var(--font-weight-semibold);
  transition: background-color var(--transition-default), color var(--transition-default);
}
.step-name{ font-size: var(--font-size-small); color: var(--text-color-subdued); white-space: nowrap; }
.step[data-state="done"] .step-pip{ background: var(--status-success-bg); color: var(--status-success-ink); }
.step[data-state="current"] .step-pip{ background: var(--primary-color); color: var(--primary-ink); }
.step[data-state="current"] .step-name{ color: var(--text-color-main); font-weight: var(--font-weight-medium); }
.step-rule{ flex: 1 0 24px; height: 2px; background: var(--grey-light); margin: 0 var(--spacing-2); min-width: 16px; }
.step-rule[data-done="true"]{ background: var(--status-success); }

/* Fixed action pane — always visible at the bottom of the main column.
   Border matches other surfaces: 1px hairline, no drop shadow. */
#stage{ padding-bottom: 96px; }
.wizard-foot{
  position: fixed;
  left: var(--rail); right: 0; bottom: 0;
  z-index: 25;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-4); flex-wrap: wrap;
  padding: var(--spacing-4) var(--spacing-8);
  background: var(--white);
  border-top: 1px solid var(--grey-light);
  box-shadow: none;
}
body.rail-collapsed .wizard-foot{ left: var(--rail-collapsed); }
.wizard-foot-start{
  display: flex; align-items: center; gap: var(--spacing-3);
  min-width: 0; flex: 1 1 auto;
}
.wizard-foot .step-of{
  font-size: var(--font-size-small); line-height: var(--line-height-small);
  color: var(--text-color-subdued); white-space: nowrap;
}
.wizard-foot-actions{
  display: flex; align-items: center; gap: var(--spacing-2);
  flex-shrink: 0; margin-left: auto;
}
@media (max-width: 1024px){
  .wizard-foot{ padding: var(--spacing-4) var(--spacing-5); }
}

/* ==========================================================================
   24. Document rendering surface
   ========================================================================== */
.paper{
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  padding: var(--spacing-12) 72px;
  max-width: 820px; margin: 0 auto;
  font-size: var(--font-size-medium); line-height: 1.75;
  font-weight: var(--font-weight-light); color: var(--text-color-main);
}
.paper h2{ font-size: var(--h5-size); line-height: var(--h5-line); font-weight: var(--font-weight-semibold); text-align: center; margin: 0 0 var(--spacing-1); }
.paper .paper-sub{ text-align: center; font-size: var(--font-size-small); color: var(--text-color-subdued); margin-bottom: var(--spacing-8); }
.paper h4{ font-size: var(--h6-size); line-height: var(--h6-line); font-weight: var(--font-weight-semibold); margin: var(--spacing-5) 0 var(--spacing-2); }
.paper p{ margin: 0 0 var(--spacing-3); }
.paper ol, .paper ul{ margin: 0 0 var(--spacing-3); padding-left: var(--spacing-5); }
.paper li{ margin-bottom: var(--spacing-1); }

/* Variable token */
.var{
  padding: 1px 6px; border-radius: var(--border-radius-small);
  background: var(--success-blue-light); color: #3A42B0;
  outline: 1px dashed #A8AEEA; outline-offset: -1px;
  font-weight: var(--font-weight-medium);
}
.var-unresolved{
  background: var(--status-error-bg); color: var(--status-error-ink);
  outline: 1px dashed var(--status-error-ink); outline-offset: -1px;
}

/* Clause block — authoring chrome */
.clause{
  position: relative;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
  margin: var(--spacing-3) calc(-1 * var(--spacing-2));
  border-left: 3px solid var(--primary-color);
  border-radius: var(--border-radius-small);
}
.clause-src{
  position: absolute; top: var(--spacing-2); right: var(--spacing-2);
  display: inline-flex; align-items: center; gap: var(--spacing-1);
  padding: 2px var(--spacing-2); border-radius: var(--border-radius-round);
  background: var(--menu-selected-color); color: var(--primary-color);
  font-size: var(--font-size-smaller); font-weight: var(--font-weight-semibold);
}
.clause-src i{ font-size: 10px; }

/* Conditional block */
.cond{
  padding: var(--spacing-3);
  margin: var(--spacing-2) calc(-1 * var(--spacing-2));
  border-left: 3px solid var(--status-warning);
  background: var(--status-warning-bg);
  border-radius: var(--border-radius-small);
}
.cond-rule{
  display: inline-flex; align-items: center; gap: var(--spacing-1);
  padding: 2px var(--spacing-2); border-radius: var(--border-radius-round);
  background: var(--white); color: var(--status-warning-ink);
  font-size: var(--font-size-smaller); font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}
.cond-rule i{ font-size: 11px; }
.cond .clause{ background: transparent; }

/* Recipient field token */
.rfield{
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-medium);
  background: var(--mustard-yellow-light); color: var(--status-warning-ink);
  outline: 1px dashed var(--status-warning-ink); outline-offset: -1px;
  font-size: var(--font-size-small); font-weight: var(--font-weight-medium);
  cursor: pointer; margin: 2px;
  transition: background-color var(--transition-default);
}
.rfield:hover{ background: #FFE08A; }
.rfield i{ font-size: 14px; }
.rfield .avatar{ width: 16px; height: 16px; font-size: 9px; }
.rfield[data-state="unassigned"]{ background: var(--status-error-bg); color: var(--status-error-ink); outline-color: var(--status-error-ink); }
.rfield[data-state="done"]{ background: var(--status-success-bg); color: var(--status-success-ink); outline: 1px solid var(--status-success); outline-offset: -1px; }

.signature-mark{ font-family: 'Segoe Script','Brush Script MT',cursive; font-size: 22px; color: var(--primary-color); }
.sign-slot{ border-bottom: 1px solid var(--grey-medium); padding-bottom: var(--spacing-1); }

/* Preview mode strips all authoring chrome */
.preview .clause{ border-left: none; padding: 0; margin: var(--spacing-3) 0; }
.preview .clause-src{ display: none; }
.preview .cond{ border-left: none; background: transparent; padding: 0; margin: var(--spacing-2) 0; }
.preview .cond-rule{ display: none; }
.preview .var{ background: transparent; outline: none; padding: 0; color: inherit; font-weight: var(--font-weight-light); }
.preview .rfield{ background: var(--status-info-bg); color: var(--status-info-ink); outline: 1px solid var(--primary-color); outline-offset: -1px; }

/* ==========================================================================
   25. Editor workspace
   ========================================================================== */
.editor-bar{
  position: sticky; top: var(--topnav); z-index: 20;
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-5);
  background: var(--white);
  border-bottom: 1px solid var(--grey-light);
  flex-wrap: wrap;
}
.editor-title{ display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; }
.editor-title i{ color: var(--primary-color); font-size: 18px; }
.editor-title [contenteditable]{
  font-size: var(--font-size-medium); font-weight: var(--font-weight-medium);
  outline: none; border-radius: var(--border-radius-small); padding: 2px 4px;
  transition: background-color var(--transition-default);
}
.editor-title [contenteditable]:hover{ background: var(--rgba-hover-light); }
.editor-title [contenteditable]:focus{ outline: 2px solid var(--primary-color); outline-offset: -2px; }
.save-state{ display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--font-size-small); color: var(--text-color-subdued); }
.save-state i{ color: var(--status-success-ink); font-size: 14px; }

.editor-grid{
  display: grid;
  grid-template-columns: 248px minmax(0,1fr) 300px;
  height: calc(100vh - var(--topnav) - 53px);
}
@media (max-width: 1280px){ .editor-grid{ grid-template-columns: 220px minmax(0,1fr); } .editor-inspector{ display: none; } }
@media (max-width: 960px){ .editor-grid{ grid-template-columns: 1fr; } .editor-palette{ display: none; } }

.editor-palette{
  background: var(--white);
  border-right: 1px solid var(--grey-light);
  overflow-y: auto; padding: var(--spacing-4) var(--spacing-3);
}
.editor-canvas{
  background: var(--cotton-cloud);
  overflow-y: auto; padding: var(--spacing-6);
}
.editor-inspector{
  background: var(--white);
  border-left: 1px solid var(--grey-light);
  overflow-y: auto; padding: var(--spacing-5) var(--spacing-4);
}
.editor-inspector h3, .editor-palette h3{
  margin: 0 0 var(--spacing-3); padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--grey-light);
  font-size: var(--font-size-small); font-weight: var(--font-weight-semibold);
  color: var(--text-color-main);
}
.tool{
  width: 100%;
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border: none; background: transparent;
  border-radius: var(--border-radius-medium);
  font-family: inherit; font-size: var(--font-size-small);
  color: var(--text-color-main); text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-default);
}
.tool:hover{ background: var(--rgba-hover-light); }
.tool i{ font-size: 16px; color: var(--text-color-subdued); flex-shrink: 0; }
.tool i.accent{ color: var(--primary-color); }
.tool i.warn{ color: var(--status-warning-ink); }
.tool i.info{ color: var(--status-info-ink); }
.var-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-2); padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--grey-light);
  font-size: var(--font-size-small);
}
.var-row:last-child{ border-bottom: none; }
.var-row code{ font-family: var(--font-family-mono); font-size: var(--font-size-small); color: var(--text-color-main); }
.var-row .ok{ color: var(--status-success-ink); }
.var-row .bad{ color: var(--status-error-ink); font-weight: var(--font-weight-medium); }

/* ==========================================================================
   26. Category shelves / template cards
   ========================================================================== */
.shelf{ margin-bottom: var(--spacing-8); }
.shelf-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-3); }
.shelf-title{ display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--h6-size); line-height: var(--h6-line); font-weight: var(--font-weight-semibold); }
.shelf-glyph{ width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--border-radius-default); display: grid; place-items: center; }
.shelf-glyph i{ font-size: 16px; }
.shelf-count{ font-size: var(--font-size-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }
.shelf-more{ font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--primary-color); }
.shelf-more:hover{ color: var(--primary-color-hover); }

.tpl{
  display: flex; flex-direction: column; gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  transition: background-color var(--transition-default);
}
.tpl:hover{ background: var(--rgba-hover-light); }
.tpl-thumb{
  height: 132px; overflow: hidden; position: relative;
  border-radius: var(--border-radius-small);
  background: var(--white);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  padding: var(--spacing-3) var(--spacing-4);
}
.tpl-thumb::before{ content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--primary-color); }
.tpl-thumb-title{ font-size: 8px; font-weight: var(--font-weight-semibold); color: var(--text-color-subdued); letter-spacing: .04em; margin-bottom: 6px; }
.tpl-thumb .ln{ height: 3px; background: var(--grey-light); border-radius: 1px; margin-bottom: 4px; }
.tpl-thumb .ln.w60{ width: 60%; } .tpl-thumb .ln.w80{ width: 80%; } .tpl-thumb .ln.w40{ width: 40%; }
.tpl-name{ font-size: var(--font-size-medium); line-height: var(--line-height-default); font-weight: var(--font-weight-medium); }
.tpl-tags{ display: flex; gap: var(--spacing-1); flex-wrap: wrap; }

/* ==========================================================================
   27. Entry cards (create hub, AI hub)
   ========================================================================== */
.entry{
  display: flex; gap: var(--spacing-4);
  padding: var(--spacing-5);
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  transition: background-color var(--transition-default), outline-color var(--transition-default);
}
.entry:hover{ background: var(--rgba-hover-light); }
.entry[data-recommended="true"]{ outline: 2px solid var(--primary-color); outline-offset: -2px; }
.entry-glyph{
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--border-radius-default);
  background: var(--menu-selected-color); color: var(--primary-color);
  display: grid; place-items: center;
}
.entry-glyph i{ font-size: 24px; }
.entry[data-recommended="true"] .entry-glyph{ background: var(--primary-color); color: var(--primary-ink); }
.entry-body{ flex: 1; min-width: 0; }
.entry-title{ display: flex; align-items: center; gap: var(--spacing-2); flex-wrap: wrap; margin-bottom: var(--spacing-1); }
.entry-title h3{ margin: 0; font-size: var(--h6-size); line-height: var(--h6-line); font-weight: var(--font-weight-semibold); }
.entry-desc{ margin: 0 0 var(--spacing-2); font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }
.entry-cta{ font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--primary-color); display: inline-flex; align-items: center; gap: var(--spacing-1); }

.strip{ display: flex; gap: var(--spacing-3); overflow-x: auto; padding-bottom: var(--spacing-3); }
.strip-card{
  flex: 0 0 240px;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  transition: background-color var(--transition-default);
}
.strip-card:hover{ background: var(--rgba-hover-light); }
.strip-title{ display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-medium); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-1); }
.strip-title i{ color: var(--primary-color); font-size: 16px; }
.strip-meta{ font-size: var(--font-size-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }

/* ==========================================================================
   28. Tree (content library)
   ========================================================================== */
.tree{
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  padding: var(--spacing-3);
  position: sticky; top: calc(var(--topnav) + var(--spacing-6));
}
.tree-node{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-medium);
  font-family: inherit; font-size: var(--font-size-small);
  color: var(--text-color-main); text-align: left;
  transition: background-color var(--transition-nav);
}
.tree-node:hover{ background: var(--rgba-hover-light); }
.tree-node[aria-selected="true"]{ background: var(--menu-selected-color); color: var(--primary-color); font-weight: var(--font-weight-medium); }
.tree-node .n{ font-size: var(--font-size-smaller); color: var(--text-color-subdued); font-variant-numeric: tabular-nums; }
.tree-node[aria-selected="true"] .n{ color: var(--primary-color); }

/* ==========================================================================
   29. Charts
   ========================================================================== */
.chart{ width: 100%; height: 220px; display: block; }
.legend{ display: flex; gap: var(--spacing-4); flex-wrap: wrap; margin-top: var(--spacing-2); font-size: var(--font-size-small); color: var(--text-color-subdued); }
.legend-item{ display: flex; align-items: center; gap: 6px; }
.legend-key{ width: 10px; height: 10px; border-radius: var(--border-radius-smaller); flex-shrink: 0; }

/* ==========================================================================
   30. Recipient (external) chrome — deliberately distinct, still on-system
   ========================================================================== */
body.external{ background: var(--cotton-cloud); }
.ext-bar{
  position: sticky; top: 0; z-index: 30;
  height: var(--topnav);
  display: flex; align-items: center; gap: var(--spacing-4);
  padding: 0 var(--spacing-6);
  background: var(--white);
  border-bottom: 1px solid var(--grey-light);
}
.ext-note{ font-size: var(--font-size-small); color: var(--text-color-subdued); padding-left: var(--spacing-3); border-left: 1px solid var(--grey-light); }
.ext-shell{ max-width: 1160px; margin: 0 auto; padding: var(--spacing-8) var(--spacing-6) 120px; }
.ext-card{
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  padding: var(--spacing-12);
  max-width: 640px; margin: 0 auto; text-align: center;
}
.ext-card h1{ margin: 0 0 var(--spacing-2); font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--font-weight-semibold); }
.ext-card > p{ margin: 0 0 var(--spacing-6); font-size: var(--font-size-medium); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }
.ext-from{
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--border-radius-round);
  background: var(--menu-selected-color); color: var(--primary-color);
  font-size: var(--font-size-small); font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-4);
}
.ext-thumb{
  width: 200px; height: 260px; margin: var(--spacing-5) auto var(--spacing-6);
  background: var(--white);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  border-radius: var(--border-radius-small);
  padding: var(--spacing-6) var(--spacing-5);
  text-align: left; position: relative; overflow: hidden;
}
.ext-thumb::before{ content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--primary-color); }
.ext-thumb h5{ font-size: 10px; text-align: center; margin: 0 0 var(--spacing-3); font-weight: var(--font-weight-semibold); color: var(--text-color-subdued); }
.ext-thumb .ln{ height: 4px; background: var(--grey-light); border-radius: 1px; margin-bottom: 5px; }
.ext-thumb .ln.w60{ width: 60%; } .ext-thumb .ln.w80{ width: 80%; }
.ext-thumb .ln.hd{ height: 6px; width: 70%; background: var(--grey-medium); margin: var(--spacing-3) 0 var(--spacing-2); }
.ext-msg{
  background: var(--cotton-cloud);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-4) var(--spacing-5);
  text-align: left; font-size: var(--font-size-medium); line-height: var(--line-height-large);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--spacing-5);
}
.ext-grid{ display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--spacing-5); align-items: start; }
@media (max-width: 1024px){ .ext-grid{ grid-template-columns: 1fr; } }
.ext-side{
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  padding: var(--spacing-5);
  position: sticky; top: calc(var(--topnav) + var(--spacing-5));
}
.ext-foot{
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap;
  padding: var(--spacing-3) var(--spacing-6);
  background: var(--white);
  border-top: 1px solid var(--grey-light);
}
.ext-foot-status{ flex: 1 1 240px; font-size: var(--font-size-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }
.ext-foot-status strong{ font-weight: var(--font-weight-medium); color: var(--text-color-main); }

.checklist-item{
  width: 100%;
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--border-radius-medium);
  font-family: inherit; font-size: var(--font-size-small); text-align: left;
  color: var(--text-color-main);
  transition: background-color var(--transition-default);
}
.checklist-item:hover{ background: var(--rgba-hover-light); }
.checklist-pip{
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: var(--border-radius-round);
  display: grid; place-items: center; font-size: 10px;
  background: var(--status-warning-bg); color: var(--status-warning-ink);
}
.checklist-item[data-done="true"] .checklist-pip{ background: var(--status-success-bg); color: var(--status-success-ink); }
.checklist-item[data-done="true"] .checklist-name{ color: var(--text-color-subdued); }

.sig-pad{
  height: 160px; margin-bottom: var(--spacing-4);
  background: var(--cotton-cloud);
  border-radius: var(--border-radius-default);
  outline: 1px dashed var(--grey-medium); outline-offset: -1px;
  display: grid; place-items: center;
  font-family: 'Segoe Script','Brush Script MT',cursive;
  font-size: 36px; color: var(--primary-color);
}
.legal-note{ font-size: var(--font-size-smaller); line-height: var(--line-height-small); font-weight: var(--font-weight-light); color: var(--text-color-subdued); }

/* ==========================================================================
   31. Chat (AI)
   ========================================================================== */
.chat{ display: flex; flex-direction: column; gap: var(--spacing-4); }
.msg{ display: flex; gap: var(--spacing-3); }
.msg-glyph{
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--border-radius-default);
  display: grid; place-items: center;
}
.msg-glyph.ai{ background: var(--menu-selected-color); color: var(--primary-color); }
.msg-body{
  flex: 1; min-width: 0;
  font-size: var(--font-size-medium); line-height: var(--line-height-large);
  font-weight: var(--font-weight-light);
}
.msg-body p{ margin: 0 0 var(--spacing-2); }
.msg-body p:last-child{ margin-bottom: 0; }
.msg.user .msg-body{
  background: var(--cotton-cloud);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--border-radius-default);
}
.composer{
  display: flex; align-items: flex-end; gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: var(--white);
  border-radius: var(--border-radius-default);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
}
.composer:focus-within{ outline: 2px solid var(--primary-color); outline-offset: -2px; }
.composer textarea{
  flex: 1; border: none; outline: none; background: transparent; resize: none;
  font-family: inherit; font-size: var(--font-size-medium);
  font-weight: var(--font-weight-light); color: var(--text-color-main);
  min-height: 24px; max-height: 160px; line-height: var(--line-height-default);
}
.suggest{
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--white);
  outline: 1px solid var(--grey-light); outline-offset: -1px;
  border-radius: var(--border-radius-round);
  font-family: inherit; font-size: var(--font-size-small); color: var(--text-color-main);
  cursor: pointer; text-align: left;
  transition: background-color var(--transition-default), outline-color var(--transition-default);
}
.suggest:hover{ background: var(--rgba-hover-light); outline-color: var(--grey-medium); }
.suggest i{ font-size: 14px; color: var(--primary-color); flex-shrink: 0; }

/* ==========================================================================
   32. Utilities
   ========================================================================== */
.mono{ font-family: var(--font-family-mono); font-size: var(--font-size-small); letter-spacing: .01em; }
.subdued{ color: var(--text-color-subdued); }
.nowrap{ white-space: nowrap; }
.flex{ display: flex; }
.col{ flex-direction: column; }
.wrap{ flex-wrap: wrap; }
.mid{ align-items: center; }
.between{ justify-content: space-between; }
.end{ justify-content: flex-end; }
.g1{ gap: var(--spacing-1); } .g2{ gap: var(--spacing-2); } .g3{ gap: var(--spacing-3); }
.g4{ gap: var(--spacing-4); } .g5{ gap: var(--spacing-5); } .g6{ gap: var(--spacing-6); }
.grow{ flex: 1; min-width: 0; }
.mb1{ margin-bottom: var(--spacing-1); } .mb2{ margin-bottom: var(--spacing-2); }
.mb3{ margin-bottom: var(--spacing-3); } .mb4{ margin-bottom: var(--spacing-4); }
.mb5{ margin-bottom: var(--spacing-5); } .mb6{ margin-bottom: var(--spacing-6); }
.mb8{ margin-bottom: var(--spacing-8); }
.mt2{ margin-top: var(--spacing-2); } .mt3{ margin-top: var(--spacing-3); }
.mt4{ margin-top: var(--spacing-4); } .mt5{ margin-top: var(--spacing-5); }
.mt6{ margin-top: var(--spacing-6); } .mt8{ margin-top: var(--spacing-8); }
.hide{ display: none !important; }
.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; }