/* Adealia — the modern design system. Report 194.

   SOURCE: `planning/design/modern-handoff/` (HANDOFF.md, and the Design
   system page in "Adealia Modern.dc.html"). This file loads LAST
   (`base.html`), so what it declares wins over app.css, components.css and
   the three journeys stylesheets.

   WHAT IS HERE
     1. Tokens the handoff adds (the colour and type values it changes are
        in components.css §1, where the tests read them).
     2. Icons: `.ms`, Material Symbols Outlined (`sym()` in _icons.html).
     3. THE SHELL: `.shell`, the left menu `.shell-rail`, the top bar
        `.shell-top`, the drawer under 760px, the phone tab bar.
     4. THE SIDE PANEL: `.ui-panel` (host in _panel_host.html, a page fills
        it with _panel.html, behaviour in static/js/panel.js).
     5. Shared components, one class each, for the page tracks:
          .ui-title / .ui-lede          a page's title and its first line
          .ui-step-label                12/600 "Review · Licensing and …"
          .ui-btn --primary --secondary --quiet --danger --sm   one copper
          .ui-pill --done --progress --sent-back --locked --waiting
                   --neutral --kind      status is a pill with a word
          .ui-card (--sent-back)        14px radius, the edge, white
          .ui-rows > details.ui-row     steps that open in place
            .ui-row__head .ui-row__ico .ui-row__text .ui-row__title
            .ui-row__meta .ui-row__chev .ui-row__body
            state on the row: --done --sent-back --waiting --todo --locked
          .ui-field .ui-field__label .ui-field__hint + .ui-input
          .ui-kv                        one answer, with its Copy button
          .ui-person                    the person strip at the top of a panel
          .ui-help                      "Need help?" and the contacts
          .ui-progress > .ui-progress__bar (--sent-back --progress)
          .ui-state --empty --error --loading, .ui-skel
          .ui-chip (aria-current / .is-on)  a filter chip
          .ui-avatar (--soft --lg)
          .ui-linkbtn                   a link drawn as a quiet button
     Radius: 10 controls, 14 cards, 999 pills. Spacing: --space-1…7 are
     4 8 12 16 20 24 32. Type: 30 page title, 18 section, 15 body, 13 meta,
     12 step label and pills. Instrument Sans only. */

/* ── 1. Tokens ──────────────────────────────────────────────────────── */
:root {
  --rail-w:       248px;
  --rail-w-min:   68px;
  --top-h:        60px;
  --panel-w:      520px;
  --hover-bg:     #F1EEE7;   /* a menu row under the pointer */
  --count-bg:     #EDE8DE;   /* a count on a menu row, a soft avatar */
  --track-bg:     #E9E4DA;   /* a progress bar's empty track */
  --skel-bg:      #EFECE6;   /* a loading placeholder; also Locked's pill */
  --kind-bg:      #EDF0F5;   /* the "Review" / "Task" kind pill */
  --done-ink:     var(--green-deep);   /* #0F6B4F, progress and done */
  --scrim:        color-mix(in srgb, var(--ink-navy) 28%, transparent);
  --scrim-panel:  color-mix(in srgb, var(--ink-navy) 18%, transparent);
  --shadow-panel: -12px 0 40px color-mix(in srgb, var(--ink-navy) 14%, transparent);
  --fs-step:      var(--fs-micro);     /* 12px, the step label */
  --fs-title-panel: var(--fs-heading); /* 22px */
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ── 2. Icons ───────────────────────────────────────────────────────── */
/* Hosted here, not fetched from Google: a failed fetch paints the ligature
   names as words. `block` so a name is never painted while the font loads. */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300 500;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex: none;
  vertical-align: middle;
  user-select: none;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'wght' 350, 'opsz' 20, 'FILL' 0;
}
.ms--fill { font-variation-settings: 'wght' 350, 'opsz' 20, 'FILL' 1; }

/* ── 3. The shell ───────────────────────────────────────────────────── */
/* The app is no longer a card on the ground (components.css §26): the menu
   runs the full height of the window, as the handoff draws it. */
body:has(> .shell) { padding: 0; background: var(--page-bg); }
.app-shell.shell {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  height: 100%;
  background: var(--page-bg);
}
.shell-col { min-width: 0; }

/* The left menu. */
.shell-rail {
  width: var(--rail-w);
  flex: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  transition: width .18s ease;
  z-index: 50;
  overflow: hidden;
}
.shell-rail__brand {
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--line-2);
}
.shell-rail__home {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; text-decoration: none; color: var(--ink-1);
}
.shell-rail__logo { height: 30px; width: auto; max-width: 180px; display: block; object-fit: contain; object-position: left center; }
.shell-rail__chip {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--anchor); color: var(--on-anchor); font-weight: 600;
}
.shell-rail__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell-rail__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.shell-rail .shell-nav {
  display: flex; flex-direction: column; gap: 18px;
  padding: 0; margin: 0; flex: none; overflow: visible;
}
.shell-rail .nav-group { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.shell-rail .nav-group + .nav-group { border-top: 0; padding-top: 0; margin-top: 0; }
.shell-rail .nav-group__label {
  margin: 0;
  padding: 0 10px 4px;
  font-size: var(--fs-step);
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.shell-rail .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 38px;
  height: auto;
  padding: 0 10px;
  margin: 0;
  border-radius: var(--radius-nav);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-2);
  background: transparent;
  text-decoration: none;
  box-shadow: none;
}
.shell-rail .nav-item .ms { font-size: 20px; }
.shell-rail .nav-item__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-rail .nav-item:hover { background: var(--hover-bg); color: var(--ink-1); }
.shell-rail .nav-item.active,
.shell-rail .nav-item.active:hover { background: var(--anchor); color: var(--on-anchor); font-weight: 600; }
.shell-rail .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.shell-rail .nav-item__count,
.shell-rail .nav-item.active .nav-item__count {
  margin-left: auto;
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--count-bg);
  color: var(--ink-1);
}
.shell-rail__extra { flex: none; }
.shell-rail__extra:empty { display: none; }

.shell-rail__foot {
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.shell-rail__powered {
  margin: 0;
  padding: 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-micro);
  color: var(--ink-4);
}
.shell-rail__adealia { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-3); }
.shell-rail__adealia-mark { width: 16px; height: 16px; display: block; }
.shell-rail__collapse {
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: var(--radius-nav);
  color: var(--ink-3);
  font: inherit;
  font-size: var(--fs-meta);
  cursor: pointer;
}
.shell-rail__collapse:hover { background: var(--hover-bg); color: var(--ink-1); }
.shell-rail__collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* COLLAPSED, at 760px and wider: the icons alone, remembered per browser.
   Every row keeps its accessible name (the label is visually hidden, and
   the link carries a title) and its count (a small badge on the icon). */
@media (min-width: 760px) {
  html[data-rail="collapsed"] .shell-rail { width: var(--rail-w-min); }
  html[data-rail="collapsed"] .shell-rail__brand { padding: 0 10px; justify-content: center; }
  html[data-rail="collapsed"] .shell-rail__logo { max-width: 46px; height: 26px; object-position: center; }
  html[data-rail="collapsed"] .shell-rail__name { display: none; }
  html[data-rail="collapsed"] .shell-rail .nav-group__label,
  html[data-rail="collapsed"] .shell-rail .nav-item__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; padding: 0;
  }
  html[data-rail="collapsed"] .shell-rail .nav-item { justify-content: center; padding: 0; }
  html[data-rail="collapsed"] .shell-rail .nav-item__count {
    position: absolute; top: 2px; right: 4px; margin: 0;
    min-width: 18px; padding: 0 5px; text-align: center; line-height: 16px;
  }
  html[data-rail="collapsed"] .shell-rail .nav-item.active .nav-item__count { box-shadow: 0 0 0 2px var(--rail-bg); }
  html[data-rail="collapsed"] .shell-rail__extra,
  html[data-rail="collapsed"] .shell-rail__powered,
  html[data-rail="collapsed"] .shell-rail__collapse-word { display: none; }
}

/* THE DRAWER, under 760px: the menu slides in over a scrim from the top
   bar's menu button (chrome.js). No collapsed state on a phone. */
.rail-scrim {
  position: fixed; inset: 0; z-index: 190;
  background: var(--scrim);
}
.rail-scrim[hidden] { display: none; }
@media (max-width: 759.98px) {
  .shell-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: auto;
    width: min(var(--rail-w), 86vw);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .2s ease;
    visibility: hidden;
  }
  body.rail-open .shell-rail {
    transform: none;
    visibility: visible;
    box-shadow: var(--shadow-panel);
  }
  .shell-rail__collapse { display: none; }
  .shell-rail .nav-item { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .shell-rail, .ui-panel__sheet { transition: none; }
}

/* The top bar. */
.shell-top {
  height: var(--top-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 28px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.shell-top__menu {
  display: none;
  width: 40px; height: 40px; flex: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  color: var(--ink-1);
  cursor: pointer;
  padding: 0;
}
.shell-top__menu .ms { font-size: 22px; }
.shell-top .topsearch {
  flex: 1;
  min-width: 0;
  max-width: 440px;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
.shell-top .topsearch__form {
  height: 40px;
  max-width: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--rail-bg);
  color: var(--ink-4);
  box-shadow: none;
}
.shell-top .topsearch__form:focus-within { border-color: var(--ink-4); box-shadow: var(--shadow-focus); }
.shell-top .topsearch__ico { font-size: 20px; color: var(--ink-4); }
.shell-top .topsearch__input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent; box-shadow: none;
  padding: 0; margin: 0;
  font: inherit; font-size: 14px; color: var(--ink-1);
}
.shell-top .topsearch__input::placeholder { color: var(--ink-4); opacity: 1; }
.shell-top .topsearch__key {
  flex: none; font: inherit; font-size: var(--fs-micro); color: var(--ink-4);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; background: var(--card-bg);
}
.shell-top__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.shell-top .bell {
  position: relative;
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-1);
  text-decoration: none;
}
.shell-top .bell:hover { background: var(--hover-bg); }
.shell-top .bell .ms { font-size: 22px; }
.shell-top .bell-count {
  position: absolute; top: 3px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--copper-cta); color: var(--on-primary);
  font-size: var(--fs-micro); font-weight: 600; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--card-bg);
}
.shell-top .user-menu { position: relative; flex: none; }
.shell-top .user-menu-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 6px 3px 3px; margin: 0;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; box-shadow: none;
  color: var(--ink-1); font: inherit; cursor: pointer; text-align: left;
  height: auto; min-height: 40px;
}
.shell-top .user-menu-btn:hover { background: var(--hover-bg); }
.shell-top .user-menu .avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--anchor); color: var(--on-anchor);
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0; text-transform: none;
}
.shell-top .user-text { line-height: 1.2; min-width: 0; }
.shell-top .user-name { font-size: 14px; font-weight: 600; color: var(--ink-1); white-space: nowrap; }
.shell-top .user-role { font-size: var(--fs-micro); color: var(--ink-4); white-space: nowrap; }
.shell-top .user-menu-caret { font-size: 18px; color: var(--ink-4); }
.shell-top .user-menu-dropdown { z-index: 100; }

@media (max-width: 1023.98px) {
  .shell-top { padding: 0 var(--space-5); }
  .shell-top .topsearch__key { display: none; }
}
@media (max-width: 759.98px) {
  .shell-top { padding: 0 var(--space-3); gap: var(--space-2); }
  .shell-top__menu { display: flex; }
  .shell-top .topsearch__input { font-size: 16px; }   /* iOS does not zoom at 16 */
  .shell-top .user-text,
  .shell-top .user-menu-caret { display: none; }
  .shell-top .user-menu-btn { padding: 3px; }
  .shell-top .admin-chip__long { display: none; }
}
/* A page's own status in the bar (chat's knowledge base, the Resources
   count) has no room beside the search below a desk; the page says it. */
@media (max-width: 1023.98px) {
  .shell-top__right > .conn-badge,
  .shell-top__right > .status { display: none; }
}

/* The phone's tab bar keeps its place (base.html); its icons are the
   handoff's symbols now. A page that turns the bar off (a checklist, a
   firm item) does not keep the room reserved for it (components.css). */
.main-col.shell-col:not(:has(> .tabbar)) { padding-bottom: env(safe-area-inset-bottom); }
.tabbar__tab .ms.ico { font-size: 22px; width: 22px; height: 22px; }
.tabbar__tab.is-on .ms.ico { font-variation-settings: 'wght' 400, 'opsz' 20, 'FILL' 1; }

/* ── 4. The side panel ──────────────────────────────────────────────── */
.ui-panel { position: fixed; inset: 0; z-index: 300; }
.ui-panel[hidden] { display: none; }
html.has-panel, html.has-panel body { overflow: hidden; }
.ui-panel__scrim {
  position: absolute; inset: 0;
  background: var(--scrim-panel);
  opacity: 0; transition: opacity .18s ease;
}
.ui-panel.is-open .ui-panel__scrim { opacity: 1; }
.ui-panel__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(var(--panel-w), 100%);
  display: flex; flex-direction: column;
  background: var(--card-bg);
  box-shadow: var(--shadow-panel);
  transform: translateX(24px); opacity: .98;
  transition: transform .18s ease, opacity .18s ease;
  outline: none;
}
.ui-panel.is-open .ui-panel__sheet { transform: none; opacity: 1; }
@media (max-width: 759.98px) {
  .ui-panel__sheet { width: 100%; }
}
.ui-panel__loading,
.ui-panel__content,
.ui-panel__form,
.ui-panel__error {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.ui-panel__loading[hidden], .ui-panel__content[hidden] { display: none; }
.ui-panel__content > script { display: none; }
.ui-panel__head {
  flex: none;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 18px var(--space-5) 14px;
  border-bottom: 1px solid var(--line-2);
}
.ui-panel__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-panel__title {
  margin: 0;
  font-size: var(--fs-title-panel); font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink-1);
  overflow-wrap: anywhere;
}
.ui-panel__meta { margin: 0; font-size: var(--fs-meta); color: var(--ink-4); }
.ui-panel__close {
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm);
  background: var(--tint-bg); color: var(--ink-1);
  cursor: pointer; padding: 0;
}
.ui-panel__close:hover { background: var(--sunk-bg); }
.ui-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-panel__body {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.ui-panel__body > * { margin-top: 0; margin-bottom: 0; }
.ui-panel__body .flashes { margin: 0; padding: 0; }
.ui-panel__foot {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px var(--space-5) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-2);
  background: var(--card-bg);
}
.ui-panel__foot .ui-btn--primary { flex: 1 1 200px; }
.ui-panel__foot-note { flex-basis: 100%; margin: 0; font-size: var(--fs-meta); color: var(--ink-4); }
.ui-panel__section { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-panel__section-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.ui-panel__section-title small { font-size: inherit; font-weight: 400; color: var(--ink-4); }
.ui-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.ui-panel select,
.ui-panel textarea {
  font: inherit; font-size: var(--fs-body); color: var(--ink-1);
  border: 1px solid var(--line-input); border-radius: var(--radius-sm);
  background: var(--card-bg); padding: 10px 12px; width: 100%;
}
.ui-panel textarea { resize: vertical; min-height: 96px; }

/* Skeletons, for the panel while it loads and for a list's loading state. */
.ui-skel {
  display: block; height: 12px; width: 100%;
  border-radius: 6px; background: var(--skel-bg);
}
.ui-skel--label { width: 40%; height: 10px; }
.ui-skel--title { width: 70%; height: 20px; margin-top: 6px; }
.ui-skel--short { width: 30%; }

/* ── 5. Shared components ───────────────────────────────────────────── */

/* A page's title and its first line (rule 2: the first line says what the
   page is for). */
.ui-title {
  margin: 0;
  font-size: var(--fs-page-title); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.01em; color: var(--ink-1);
}
.ui-lede { margin: 4px 0 0; font-size: var(--fs-body); color: var(--ink-3); }

.ui-step-label {
  margin: 0;
  font-size: var(--fs-step); font-weight: 600; line-height: 1.4;
  color: var(--ink-4); letter-spacing: 0; text-transform: none;
}
.ui-due-text--overdue { color: var(--alert-fg); }

/* Buttons. `.ui-btn` takes its geometry from the `--btn-*` tokens
   (components.css §1): 44px, a 10px radius, 15/600. ONE `--primary` per
   screen, and it is copper. */
/* Moved to redesign.css (report 251). */

/* Pills: a word, and a colour that means the same thing everywhere. The
   geometry is the `--pill-*` tokens (12/600, 2px 10px, 999). */
.ui-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--pill-fs); font-weight: var(--pill-weight); line-height: var(--pill-lh);
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--chip-bg); color: var(--ink-3);
}
.ui-pill--done      { background: var(--ok-bg);    color: var(--ok-fg); }
.ui-pill--progress  { background: var(--warn-bg);  color: var(--warn-fg); }
.ui-pill--sent-back { background: var(--alert-bg); color: var(--alert-fg); }
.ui-pill--locked    { background: var(--skel-bg);  color: var(--ink-3); }
.ui-pill--waiting   { background: var(--wait-bg);  color: var(--wait-fg); }
.ui-pill--neutral   { background: var(--chip-bg);  color: var(--ink-3); }
.ui-pill--kind      { background: var(--kind-bg);  color: var(--ink-2); }

/* Cards. */
.ui-card--sent-back { border-color: var(--alert-line); }

/* Steps that open in place (rule 5). A list card of <details> rows: the
   head is one line with a state icon, the body holds one line of
   description, links as buttons, a short checklist and one action. */
/* One list card, the rows inside it split by a hairline. Report 202: the
   tracks drew it four times (.ui-rows here, .bx-list in journeys-person.css,
   .lib-listcard in library.css, .rp-rows in rest-pages.css); it is drawn
   here once, and the track class names stay as aliases on their markup. */
.ui-rows, .ui-listcard, .bx-list, .lib-listcard, .rp-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ui-row + .ui-row,
.ui-listcard > * + *,
.bx-list > li + li,
.lib-listcard > .ui-card + .ui-card,
.rp-row + .rp-row { border-top: 1px solid var(--line-2); }
.ui-row__head {
  display: flex; align-items: center; gap: 14px;
  padding: var(--space-4) 18px;
  cursor: pointer; list-style: none;
  color: var(--ink-1);
}
.ui-row__head::-webkit-details-marker { display: none; }
.ui-row__head:hover { background: var(--rail-bg); }
.ui-row__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ui-row__ico { font-size: 24px; color: var(--ink-4); }
.ui-row__text { flex: 1; min-width: 0; }
.ui-row__title { display: block; font-size: var(--fs-row); font-weight: 600; overflow-wrap: anywhere; }
.ui-row__meta { display: block; font-size: var(--fs-meta); color: var(--ink-4); }
.ui-row__chev { font-size: 22px; color: var(--ink-4); transition: transform .15s ease; }
.ui-row[open] > .ui-row__head .ui-row__chev { transform: rotate(180deg); }
.ui-row__body {
  padding: 0 18px var(--space-5) 56px;
  display: flex; flex-direction: column; gap: 14px;
}
.ui-row--done .ui-row__ico       { color: var(--done-ink); font-variation-settings: 'wght' 350, 'opsz' 20, 'FILL' 1; }
.ui-row--sent-back               { background: color-mix(in srgb, var(--alert-bg) 45%, var(--card-bg)); }
.ui-row--sent-back .ui-row__ico,
.ui-row--sent-back .ui-row__meta { color: var(--alert-fg); }
.ui-row--waiting .ui-row__ico    { color: var(--wait-fg); }
.ui-row--todo .ui-row__ico       { color: var(--copper-cta); }
.ui-row--locked .ui-row__title   { color: var(--ink-3); }
@media (max-width: 759.98px) {
  .ui-row__body { padding-left: 18px; }
}

/* Form fields: a label over its control, a hint under it. */
.ui-field { gap: 6px; }
.ui-field__label { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.ui-field__hint { margin: 0; font-size: var(--fs-meta); font-weight: 400; color: var(--ink-4); }

/* One answer the person gave, with its Copy button. */
.ui-kv {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ui-kv__text { flex: 1; min-width: 0; }
.ui-kv__key { display: block; font-size: var(--fs-micro); color: var(--ink-4); }
.ui-kv__value { display: block; font-weight: 500; overflow-wrap: anywhere; }

/* The person an item is about, as one strip. */
.ui-person {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--rail-bg); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 14px;
}
.ui-person__text { min-width: 0; }
.ui-person__name { font-weight: 600; }
.ui-person__meta { font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }

/* Avatars. */
.ui-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--anchor); color: var(--on-anchor);
  font-size: var(--fs-meta); font-weight: 600; overflow: hidden;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.ui-avatar--soft { background: var(--count-bg); color: var(--ink-1); }

/* "Need help?" and the people to ask. Contacts say how they are reached
   "by email" and leave room for "and by text" (rule 10). */
.ui-help {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.ui-help__head { display: flex; align-items: center; gap: var(--space-2); }
.ui-help__title { margin: 0; font-size: var(--fs-section); font-weight: 600; }
.ui-help__person { display: flex; gap: var(--space-3); padding-top: 14px; border-top: 1px solid var(--line-2); }
.ui-help__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-help__why { font-size: var(--fs-micro); color: var(--ink-4); }
.ui-help__name { font-weight: 600; }
.ui-help__line { font-size: 14px; display: flex; align-items: center; gap: 6px; color: var(--ink-3); overflow-wrap: anywhere; }
.ui-help__line .ms { font-size: 17px; }
.ui-help__line a { text-decoration: none; }

/* Progress. */
.ui-progress {
  height: 6px; border-radius: var(--radius-pill);
  background: var(--track-bg); overflow: hidden;
}
.ui-progress--sm { height: 5px; }
.ui-progress__bar { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--done-ink); }
.ui-progress__bar--sent-back { background: var(--alert-fg); }
.ui-progress__bar--progress  { background: var(--copper-cta); }

/* Empty, loading and error. Each says what happened and what to do. */
.ui-state {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px var(--space-5);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.ui-state__ico { font-size: 32px; color: var(--ink-4); }
.ui-state__title { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--ink-1); }
.ui-state__text { margin: 0; max-width: 420px; font-size: 14px; color: var(--ink-4); }
.ui-state__actions { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.ui-state--empty .ui-state__ico { color: var(--done-ink); }
.ui-state--error { border-color: var(--alert-line); padding: var(--space-7) var(--space-5); }
.ui-state--error .ui-state__ico { color: var(--alert-fg); }
.ui-state--loading { align-items: stretch; text-align: left; padding: var(--space-5); gap: var(--space-3); }
.ui-panel__body .ui-state { border: 0; padding-left: 0; padding-right: 0; }

/* A filter chip. The one that is on is navy (a selection, not an action). */
.ui-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card-bg); color: var(--ink-1);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ui-chip:hover { border-color: var(--ink-4); }
.ui-chip[aria-current], .ui-chip.is-on { background: var(--anchor); border-color: var(--anchor); color: var(--on-anchor); }

/* A link drawn as a quiet button ("Open the NMREC lookup ↗"). */
.ui-linkbtn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--rail-bg); color: var(--ink-1);
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.ui-linkbtn:hover { border-color: var(--ink-4); color: var(--ink-1); }
.ui-linkbtn .ms { font-size: 16px; color: var(--ink-4); }

/* The home's greeting beside its buttons had room when the menu was off
   canvas below 900px; with the menu in the page it takes its own line. */
@media (max-width: 1023.98px) {
  .ui-page-head.ui-page-head--home { grid-template-columns: minmax(0, 1fr); }
  .ui-page-head.ui-page-head--home > .ui-page-head__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* ── 7. The broker's frame in the one shell ─────────────────────────── */
/* `journeys/_frame.html` (the checklist, one activity, the onboarding home)
   was a page of its own with the document as its scroller. In the shell the
   column scrolls instead, under the top bar, and the frame's pinned action
   (`.jp-foot`, sticky) sticks to the foot of that column. */
body.jp-body:has(> .shell) { display: flex; height: 100%; min-height: 0; padding: 0; background: var(--page-bg); }
body.jp-body .shell-col { overflow-y: auto; }
body.jp-body .shell-col > .shell-top { position: sticky; top: 0; }
.shell-col > .jp { min-height: 0; flex: 1 0 auto; }
.shell-col > .jp.jp--ink { flex: 1 0 auto; }
.jp-top.jp-top--line {
  position: static; min-height: 0;
  justify-content: flex-end;
  padding: var(--space-3) 18px 0;
  background: transparent; border-bottom: 0;
}
@media (min-width: 901px) {
  .jp--desk .jp-top.jp-top--line {
    padding: 10px 32px; background: var(--card-bg); border-bottom: 1px solid var(--line);
  }
  .jp--desk .jp-desk { min-height: calc(100vh - var(--top-h) - 57px); }
}
body.jp-body .ui-page--foot { flex: none; }

/* The way back from the assistant to the checklist (chat, report 160). */
.focus-line {
  flex: none; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 28px; font-size: var(--fs-ui);
  background: var(--card-bg); border-bottom: 1px solid var(--line-2);
}
.focus-line a { text-decoration: none; font-weight: 500; color: var(--ink-3); }
.focus-line a:hover { color: var(--ink-1); }
.focus-line .focus-top__title { margin-left: auto; font-weight: 600; color: var(--ink-1); }
@media (max-width: 759.98px) { .focus-line { padding: var(--space-3) var(--space-4); } }

/* ── 6. A firm item: as a page, and in the side panel ───────────────── */
/* As a page, the item's own line (`_item_bar.html`) is the top of the page
   in the one shell rather than a frame of its own. */
.ui-item-bar { font-size: var(--fs-ui); }
.ui-item-bar__back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; }
.ui-item-bar__back .ms { font-size: 18px; }
@media (max-width: 759.98px) {
  .ui-item-bar__wide { display: none; }
}
/* A review at a desk fills the width edge to edge (journeys-staff.css,
   report 160), so its line takes its own padding and the white of the
   decision column. */
@media (min-width: 1181px) {
  body.is-review .jr-page--item > .ui-item-bar {
    margin: 0; padding: 14px 32px;
    background: var(--card-bg); border-bottom: 1px solid var(--line);
  }
  body.is-review .jr-review { min-height: calc(100vh - var(--top-h) - 50px); }
}

/* In the panel. The review and task templates put the same parts in the
   panel's body that the page puts in its left column; these are the page's
   `.jr-item` rules for them, re-scoped to the panel. */
.ui-panel .jr-decide { padding-bottom: 0; }
.ui-panel .jr-decide .jr-seg { display: grid; margin: 0 0 var(--space-3); }
.ui-panel .jr-phone-only,
.ui-panel .jr-phone-bar { display: none; }
.ui-panel .jr-item__part { max-width: none; }
.ui-panel .jr-item__part .jr-h3,
.ui-panel .jr-given .jr-h3 { margin: 0 0 var(--space-2); font-size: 14px; font-weight: 600; }
.ui-panel .jr-instructions { margin: 0; padding: 0; background: none; border: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }
.ui-panel .jr-instructions p { margin: 0 0 var(--space-2); }
.ui-panel .jr-prose { margin: 0 0 var(--space-2); font-size: 14px; color: var(--ink-2); }
.ui-panel .jr-task__link { margin: var(--space-3) 0 0; }
.ui-panel .jr-tick-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; border: 0; }
.ui-panel .jr-tick-list li + li { border-top: 0; }
.ui-panel .jr-tick-list label {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-bg); color: var(--ink-1); cursor: pointer;
}
.ui-panel .jr-tick-list input { width: 18px; height: 18px; accent-color: var(--done-ink); }
.ui-panel .jr-viewer { min-height: 0; padding: 0; overflow: hidden; }
.ui-panel .jr-viewer object, .ui-panel .jr-viewer iframe { min-height: 420px; }
.ui-panel .jr-viewer img { max-height: 420px; }
.ui-panel .jr-viewer--fit { padding: 0; background: none; }
.ui-panel .jr-answers { padding: 0; background: none; border: 0; }
.ui-panel .jr-answers h3 { display: none; }
.ui-panel .jr-answers dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
.ui-panel .jr-answers dd { margin: 0 0 var(--space-2); }
.ui-panel .jr-file-bar { flex-wrap: wrap; }
.ui-panel .jr-effect { margin: 0; font-size: var(--fs-meta); color: var(--ink-4); }
.ui-panel .jr-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.ui-panel .jr-done-note { margin: 0; }
.ui-panel .jr-given { margin: 0; }
.ui-panel__foot [data-tick-hint][hidden], .ui-panel__foot .jr-go-hint[hidden] { display: none; }

/* ── 8. People, teams and groups  [report 198, the people track] ──────
   Page rules for people/*.html, settings/firm_role*.html and
   audiences/*.html, drawn to the handoff's Firm · people and teams
   screens. Nothing above is changed; these read the shared tokens.
   The pieces are named for their page on purpose (`.person-change`,
   `.team-panel`) so they do not claim to be part of the system. */

/* The list: the handoff's table. A rail-coloured head row, 13/18 rows,
   the name 15/600 over its email, status as a pill. */
.people-list .ui-table th,
.aud-table .ui-table th {
  background: var(--rail-bg);
  color: var(--ink-4);
  font-size: var(--fs-micro);
  padding: 10px 18px;
  border-bottom-color: var(--line-2);
}
.people-list .ui-table td,
.aud-table .ui-table td { padding: 13px 18px; font-size: 14px; color: var(--ink-1); }
.people-list .ui-table__link,
.aud-table .ui-table__link { font-size: var(--fs-row); font-weight: 600; color: var(--ink-1); text-decoration: none; }
.people-list .ui-table__sub,
.aud-table .ui-table__sub { font-size: var(--fs-meta); color: var(--ink-4); }
.people-list .ui-table tbody tr:hover { background: var(--rail-bg); }
.people-roster th:last-child { width: 130px; }
/* Stacked on a phone (components.css §15): the row keeps its padding, the
   cells give theirs back, so a person is one compact block as drawn. */
@media (max-width: 720px) {
  .people-list .ui-table tbody tr,
  .aud-table .ui-table tbody tr { padding: 14px var(--space-4); }
  .people-list .ui-table td,
  .aud-table .ui-table td { padding: 0 0 4px; font-size: 14px; }
  .people-list .ui-table td[data-label="—"],
  .aud-table .ui-table td:first-child { padding-bottom: var(--space-2); }
}

/* A person's four fields (people/_change.html): label over control; one
   column in the panel, two on the record. A read-only field is its value. */
.person-change { display: flex; flex-direction: column; gap: var(--space-4); }
.person-change__row { display: flex; flex-direction: column; gap: 6px; }
.person-change__form { margin: 0; }
.person-change__form select { width: 100%; min-height: var(--btn-min-h); }
.person-change__value { font-size: var(--fs-body); color: var(--ink-1); overflow-wrap: anywhere; }
.person-change__hint { margin: 0; }
.ui-page .person-details .person-change {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5); margin-top: var(--space-4);
}
.ui-page .person-details .person-change__hint { grid-column: 1 / -1; }
.person-details__offboard { margin: var(--space-4) 0 0; }
.person-offboard, .person-offboard:hover { color: var(--alert-fg); }
.teams-archive, .teams-archive:hover:not(:disabled) { color: var(--alert-fg); }
@media (max-width: 759.98px) {
  .ui-page .person-details .person-change { grid-template-columns: minmax(0, 1fr); }
}

/* In the side panel. The property question is the macro the profile
   shares (`_property_management.html`), laid out as a panel field here. */
.person-panel .lic-form, .team-panel form { margin: 0; }
.person-panel .lic-grid { display: block; }
.person-panel .lic-grid label,
.person-panel .lic-grid .lic-file,   /* a picker's field: it holds its own label */
.team-panel .prof-grid label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink-1);
}
.person-panel .lic-grid label > *,
.person-panel .lic-grid .lic-file > *,
.team-panel .prof-grid label > *,
.person-new__grid label > * { font-weight: 400; }
/* The body is a flex column that scrolls; its parts keep their height. */
.person-panel .ui-panel__body > *,
.team-panel .ui-panel__body > *,
.person-new-panel .ui-panel__body > *,
.offboard-panel .ui-panel__body > * { flex: none; }
.person-panel .lic-actions,
.team-panel .lic-actions { margin-top: var(--space-2); }
.person-panel .prof-note, .team-panel .prof-note, .team-panel .ui-hint {
  margin: var(--space-2) 0 0; font-size: var(--fs-meta); color: var(--ink-4);
}
/* The panel is outside `.ui-page`, so its selects miss the page's chevron
   (components.css §6). Given back here, for this area's panels only. */
.person-panel select, .team-panel select, .person-new-panel select {
  appearance: none; -webkit-appearance: none;
  min-height: var(--btn-min-h);
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%234F6178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
.person-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.person-panel__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }
.person-panel .ui-panel__foot { justify-content: space-between; }
.person-panel__full { margin-left: auto; }
.offboard-panel .off-list { margin: 0; }
.offboard-panel .ui-panel__foot { justify-content: flex-end; }
.offboard-panel .sig-tick { margin: 0; }

/* A team in the panel: the page's cards become sections with a hairline. */
.team-panel .ui-panel__body > .ui-card {
  padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0; margin: 0;
}
.team-panel .ui-panel__body > .ui-card + .ui-card { padding-top: var(--space-5); border-top: 1px solid var(--line-2); }
.team-panel .ui-card__head { margin: 0 0 var(--space-2); }
.team-panel .ui-card__title { font-size: 14px; font-weight: 600; }
.team-panel .prof-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.team-panel .lic-item { padding: 10px 12px; }
.team-panel .ui-panel__foot { justify-content: space-between; }
.team-panel .ui-panel__foot .ui-btn--primary { flex: 0 1 200px; }

/* Teams: the handoff's table — the name 15/600, the head row 12/600. */
.teams-row--head { font-size: var(--fs-micro); padding: 10px 24px; }
.teams-row__name { font-weight: 600; }
.teams-row__caret.ms { font-size: 20px; color: var(--ink-4); }
.teams-role-note { padding: 14px 24px; margin: 0; border-top: 1px solid var(--line-2); }
@media (max-width: 900px) {
  .teams-row__caret.ms { display: none; }   /* `.ms` would bring it back */
  .teams-role-note { padding: 14px 16px; }
}

/* Add a person: the fields in two columns at a desk, one in the panel. */
.person-new__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5); margin: var(--space-3) 0;
}
.person-new__grid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.person-new__grid input, .person-new__grid select { min-height: var(--btn-min-h); }
.person-new-panel .person-new__grid { grid-template-columns: minmax(0, 1fr); margin: 0; }
.person-invite .ui-card__title { display: flex; align-items: center; gap: var(--space-2); }
.person-invite .ui-card__title .ms { color: var(--done-ink); }
.person-new-panel .person-invite { padding: var(--space-4); }
@media (max-width: 759.98px) {
  .person-new__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Groups: the edit summary reads with its icon. */
.lic-item details > summary .ms { font-size: 16px; vertical-align: -3px; }
.aud-count { margin: 0 0 var(--space-3); }

/* ── Content width (Danny, 28 Sep) ────────────────────────────────────
   On a wide monitor the page stretched the whole screen. Everything below
   the top bar is capped and centered in the column; the menu and the top
   bar still run full width. The cap is the width the design was drawn at
   minus the menu. */
:root { --content-max: 1200px; }
/* Report 204: an OpenFlow v2 page (`.of-t`, of-base.css) sets its own width. */
.shell-col > :not(.shell-top):not(.tabbar):not(.of-t):not(script):not(style) {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  box-sizing: border-box;
}