/* Narrow Sea — signed-in workspace (customer, broker, underwriting, operations, sign-in).
   Figma: Customer / Broker / Underwriting dashboard · 1440 / 768 / 390. Tokens come from ns.css. */

body.layout-workspace { background: var(--off); }

/* ---------- shell ---------- */
.ws { display: flex; align-items: flex-start; min-height: 100vh; min-height: 100dvh; background: linear-gradient(to right, var(--navy) 224px, transparent 224px); }
.nw { white-space: nowrap; }
.ws-nav {
  width: 224px; flex: none; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  background: var(--navy); padding: 24px; display: flex; flex-direction: column; gap: 32px;
}
.ws-nav__brand { font: 400 24px/1.2 var(--serif); color: var(--white); text-decoration: none; }
.ws-nav__role { font: 400 10px/1.2 var(--sans); color: var(--gold); text-transform: uppercase; }
.ws-nav__list { display: flex; flex-direction: column; gap: 32px; }
.ws-nav__list a, .ws-nav__list button {
  display: flex; gap: 8px; align-items: flex-start; min-height: 40px; padding: 12px; width: 100%;
  font: 400 12px/1.25 var(--sans); color: var(--mist); text-decoration: none; text-align: left;
  background: none; border: 0; border-radius: 0; cursor: pointer;
}
.ws-nav__list a:hover, .ws-nav__list button:hover { color: var(--white); }
.ws-nav__list [aria-current="true"], .ws-nav__list [aria-current="page"], .ws-nav__list .is-active { background: var(--ocean); color: var(--gold); }
.ws-nav__glyph { width: 10px; height: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ws-nav__rule { height: 1px; border: 0; margin: 0; background: var(--ocean); flex: none; }
.ws-nav__acct { font: 400 11px/1.7 var(--sans); color: var(--mist); }
.ws-nav__acct button, .ws-nav__acct a { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; min-height: 24px; }
.ws-nav__acct button:hover, .ws-nav__acct a:hover { color: var(--white); }

.ws-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.ws-head { height: 64px; flex: none; background: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; }
.ws-crumb { font: 400 12px/1.3 var(--sans); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-head__brand { display: none; font: 400 23px/1 var(--serif); color: var(--navy); text-decoration: none; white-space: nowrap; }
.ws-head__end { display: flex; align-items: center; gap: 12px; }
.ws-body { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.ws-body > *, .ws-data > * { min-width: 0; }
.ws-data { display: flex; flex-direction: column; gap: 16px; }
.ws-body [id] { scroll-margin-top: 16px; }

/* introduction */
.ws-intro { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ws-intro__text { flex: 1 0 0; min-width: 190px; }
.ws-title { font: 400 34px/1.1 var(--serif); color: var(--navy); }
.ws-sub { font: 400 12px/1.6 var(--sans); color: var(--slate); }
.ws-intro .btn { flex: none; }

/* metrics (no card on desktop / tablet) */
.ws-metrics { display: flex; flex-wrap: wrap; gap: 16px; }
.ws-metric { flex: 1 0 0; min-width: 130px; padding: 18px; display: flex; flex-direction: column; }
.ws-metric__label { font: 400 11px/1.5 var(--sans); color: var(--slate); }
.ws-metric__value { font: 500 28px/1.2 var(--sans); color: var(--navy); overflow-wrap: anywhere; }
.ws-metric__note { font: 400 10px/1.5 var(--sans); color: var(--slate); }

/* panels */
.ws-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ws-panel__title { font: 600 14px/1.25 var(--sans); color: var(--navy); }
.ws-lines { font: 400 12px/1.6 var(--sans); color: var(--ink); }
.ws-lines--13 { font-size: 13px; }
.ws-lines--11 { font-size: 11px; }
.ws-lines p + p { margin-top: 0; }
.ws-fine { font: 400 11px/1.6 var(--sans); color: var(--slate); }
.ws-fine--10 { font-size: 10px; }
.ws-note { font: 400 12px/1.6 var(--sans); color: var(--slate); }
.ws-notices { display: flex; flex-direction: column; gap: 12px; }
.ws-notices .ws-link { display: block; }
.ws-notices .ws-link:hover .notice__title { text-decoration: underline; }
.ws-notices .ws-link:hover { text-decoration: none; }
.ws-rule { height: 1px; background: var(--line); border: 0; margin: 0; width: 100%; }
.ws-link { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.ws-link:hover { text-decoration: underline; }
.ws-panel .tag { align-self: flex-start; }
.ws-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-panel .btn { align-self: flex-start; }
.ws-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* grids — desktop widths follow the 1440 frame (984 px of content beside the 224 px navigation) */
.ws-grid { display: grid; gap: 24px; align-items: start; max-width: 984px; }
.ws-grid--main { grid-template-columns: minmax(0, 620fr) minmax(0, 340fr); }
.ws-grid--3 { grid-template-columns: minmax(0, 304fr) minmax(0, 304fr) minmax(0, 328fr); }
.ws-grid--admin { grid-template-columns: minmax(0, 476fr) minmax(0, 484fr); }
.ws-grid--wide { max-width: none; }
.ws-foot { font: 400 10px/1.6 var(--sans); color: var(--slate); }

/* table controls */
.ws-ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ws-search { display: flex; align-items: center; gap: 6px; font: 400 12px/1 var(--sans); color: var(--slate); flex: 1 1 110px; min-width: 0; }
.ws-search input { border: 0; background: transparent; padding: 6px 0; min-height: 32px; width: 100%; min-width: 0; font: 400 12px/1.2 var(--sans); color: var(--ink); border-bottom: 1px solid transparent; }
.ws-search input::placeholder { color: var(--slate); opacity: 1; }
.ws-search input:focus { outline: 0; border-bottom-color: var(--navy); }
.ws-search input::-webkit-search-cancel-button { cursor: pointer; }
.ws-ctl__end { display: flex; align-items: center; gap: 12px; flex: none; }
.ws-filter { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font: 400 11px/1.2 var(--sans); color: var(--navy); cursor: pointer; white-space: nowrap; }
.ws-filter select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.ws-filter:focus-within { outline: 2px solid var(--navy); outline-offset: 2px; }
.ws-glyph { display: inline-block; flex: none; vertical-align: middle; }
.ws-sort { border: 0; background: transparent; cursor: pointer; font: 400 11px/1.2 var(--sans); color: var(--navy); padding: 6px 0; min-height: 32px; white-space: nowrap; }
.ws-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 11px/1.6 var(--sans); color: var(--slate); }
.ws-pager button { border: 0; background: none; cursor: pointer; color: var(--slate); font: inherit; min-width: 24px; min-height: 24px; padding: 0 4px; }
.ws-pager button:disabled { opacity: .45; cursor: default; }
.ws-statuses { font: 400 11px/1.6 var(--sans); color: var(--ink); }
.ws-statuses button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.ws-statuses button:hover { text-decoration: underline; }
.ws-statuses button[aria-pressed="true"] { font-weight: 600; color: var(--navy); text-decoration: underline; }

/* data table inside a panel (ns.css .table, equal columns like the design) */
.ws-table { table-layout: fixed; }
.ws-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.ws-table td a { color: inherit; text-decoration: none; }
.ws-table tr.is-click:hover td:first-child a { text-decoration: underline; }
.ws-table td.num { font-variant-numeric: tabular-nums; }
.ws-table--kv th:first-child { width: 55%; }

/* states inside panels */
.ws-state:empty { display: none; }
.ws-state .empty, .ws-state .loading, .ws-state .errstate { border: 1px solid var(--line); }
.ws-panel .empty, .ws-panel .loading, .ws-panel .errstate { padding: 16px 0 4px; border: 0; background: transparent; }
.ws-panel .errstate { background: var(--err-bg); padding: 16px; }
.ws-state__text { font: 400 13px/1.6 var(--sans); color: var(--ink); }
.empty img { width: 20px; height: 20px; }

/* modal form */
.ws-modal .modal { gap: 16px; }
.ws-modal .modal__title { font-size: 30px; }
.ws-modal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ws-modal .field { min-height: 0; padding: 12px 14px; }
.ws-modal .field textarea { min-height: 96px; }
.ws-modal__calc { font: 400 13px/1.6 var(--sans); color: var(--ink); background: var(--off); padding: 12px 14px; }
.ws-modal__calc strong { font-weight: 600; color: var(--navy); }
.ws-modal__err { font: 400 12px/1.6 var(--sans); color: var(--err); }
.ws-modal .upload { padding: 16px; gap: 8px; }
.ws-modal .row { gap: 12px; }
.ws-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font: 400 13px/1.6 var(--sans); color: var(--ink); }
.ws-kv dt { color: var(--slate); }
.ws-kv dd { margin: 0; }
@media (max-width: 600px) {
  .ws-modal__grid { grid-template-columns: minmax(0, 1fr); }
  .ws-modal .modal { padding: 24px; }
  .ws-modal .row .btn { flex: 1 1 auto; }
}

/* mobile tab bar + "more" block */
.ws-tabbar { display: none; }
.ws-more { display: none; }
.m-only { display: none; }

/* ---------- underwriting ---------- */
.uw-grid { display: grid; grid-template-columns: minmax(0, 286fr) minmax(0, 674fr); gap: 24px; align-items: start; max-width: 984px; }
.uw-case { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.uw-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.uw-queue__list { display: flex; flex-direction: column; gap: 10px; }
.uw-qcase {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--off); color: var(--ink);
  text-decoration: none; border: 0; text-align: left; width: 100%; cursor: pointer; font: inherit; border-left: 2px solid transparent;
}
.uw-qcase:hover { background: #eef1f3; }
.uw-qcase[aria-current="true"] { background: var(--sand); }
.uw-qcase__ref { font: 600 12px/1.6 var(--sans); }
.uw-qcase__lines { font: 400 11px/1.6 var(--sans); }
.uw-exposures { display: flex; gap: 24px; }
.uw-exposure { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.uw-exposure__label { font: 400 10px/1.6 var(--sans); color: var(--slate); text-transform: uppercase; }
.uw-exposure__value { font: 400 20px/1.6 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.uw-accum { display: flex; flex-direction: column; gap: 6px; }
.uw-bar { position: relative; height: 8px; background: var(--off); border: 1px solid var(--line); overflow: hidden; }
.uw-bar__used, .uw-bar__add { position: absolute; top: 0; bottom: 0; left: 0; }
.uw-bar__used { background: var(--ocean); }
.uw-bar__add { background: var(--gold); }
.uw-bar.is-over .uw-bar__add { background: var(--err); }
.uw-matches { display: flex; flex-direction: column; gap: 6px; }
.uw-match { background: var(--err-bg); padding: 8px 10px; font: 400 11px/1.6 var(--sans); color: var(--ink); }
.uw-match strong { color: var(--err); font-weight: 600; }
.uw-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 400 11px/1.6 var(--sans); color: var(--ink); }
.uw-flags li { background: var(--sand); padding: 6px 10px; border-left: 2px solid var(--gold); }
.uw-why { font: 400 11px/1.6 var(--sans); color: var(--err); }
.uw-why p::before { content: "— "; }
.uw-docs { list-style: none; margin: 0; padding: 0; font: 400 12px/1.6 var(--sans); color: var(--ink); }
.uw-docs li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.uw-docs li:last-child { border-bottom: 0; }
.uw-docs .is-missing { color: var(--err); }
.uw-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.uw-timeline li { display: grid; grid-template-columns: 92px 64px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font: 400 11px/1.6 var(--sans); color: var(--ink); align-items: start; }
.uw-timeline time { color: var(--slate); font-variant-numeric: tabular-nums; }
.uw-timeline .tag { justify-self: start; }
.uw-acc { border-top: 0; }
.uw-acc:last-child { border-bottom: 0; }
.uw-acc > button { padding: 4px 0; font-size: 12px; color: var(--navy); }
.uw-acc .acc__body { padding: 0; font-size: 11px; }
.uw-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; max-width: 984px; }
.uw-pctcell { display: flex; flex-direction: column; gap: 4px; }

/* ---------- operations ---------- */
.ops-crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ops-agent { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ops-agent__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ops-agent__name { font: 400 24px/1.15 var(--serif); color: var(--navy); }
.ops-agent__role { font: 400 11px/1.5 var(--sans); color: var(--slate); margin-top: 4px; }
.ops-agent__last { font: 400 12px/1.6 var(--sans); color: var(--ink); flex: 1; overflow-wrap: anywhere; }
.ops-agent__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.ops-agent__foot .ops-log__ref { font-size: 11px; }
.ops-agent__n { white-space: nowrap; }
.ops-agent__count { font: 500 22px/1.1 var(--sans); color: var(--navy); }
.ops-live { display: inline-flex; align-items: center; gap: 8px; font: 400 11px/1.4 var(--sans); color: var(--slate); }
.ops-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.ops-live.is-stale::before { background: var(--err); }
.ops-live.is-paused::before { background: var(--slate); }
.ops-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ops-seg button { border: 0; background: var(--white); font: 400 11px/1 var(--sans); color: var(--ink); padding: 0 12px; min-height: 32px; cursor: pointer; }
.ops-seg button + button { border-left: 1px solid var(--line); }
.ops-seg button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.ops-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ops-log li { display: grid; grid-template-columns: 112px 68px 150px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 12px/1.5 var(--sans); color: var(--ink); }
.ops-log li:last-child { border-bottom: 0; }
.ops-log time { color: var(--slate); font-variant-numeric: tabular-nums; font-size: 11px; }
.ops-log__who { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.ops-log__what { overflow-wrap: anywhere; }
.ops-log__what span { color: var(--slate); }
.ops-log__ref { font: 600 11px/1.5 var(--sans); color: var(--navy); white-space: nowrap; }
.ops-log li.is-new { animation: ops-new 2.4s ease-out; }
@keyframes ops-new { from { background: var(--sand); } to { background: transparent; } }
.ops-log .tag { justify-self: start; }

/* ---------- sign-in hub ---------- */
.si-roles { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.si-roles legend { font: 600 11px/1.8 var(--sans); color: var(--slate); padding: 0; margin-bottom: 8px; }
.si-role { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; cursor: pointer; min-height: 120px; }
.si-role input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.si-role__name { font: 400 24px/1.15 var(--serif); color: var(--navy); }
.si-role__text { font: 400 12px/1.6 var(--sans); color: var(--slate); }
.si-role:has(input:checked) { border-color: var(--navy); background: var(--sand); box-shadow: inset 3px 0 0 var(--gold); }
.si-role:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.si-form { max-width: 984px; gap: 16px; padding: 24px; }
.si-form .field { max-width: 460px; }
.si-form .btn { align-self: flex-start; }
.si-session { max-width: 984px; }

/* ---------- tablet 768 ---------- */
@media (max-width: 1100px) {
  .ws { display: block; background: none; }
  .ws-nav { display: none; }
  .ws-main { min-height: 0; }
  .ws-head__brand { display: block; }
  .ws-crumb { display: none; }
  .ws-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .ws--signin .ws-body { padding-bottom: 24px; }
  .ws-grid { max-width: none; }
  .ws-grid--main, .ws-grid--admin, .uw-grid, .uw-book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
  .ws-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-metric { padding: 18px; }
  .ops-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-log li { grid-template-columns: 96px 64px minmax(0, 1fr) auto; }
  .ops-log__who { grid-column: 3; }
  .ops-log__what { grid-column: 3 / 5; }
  .si-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .si-form, .si-session { max-width: none; }

  .ws-tabbar {
    /* top, not bottom: Safari's floating toolbar sits over anything fixed at the bottom of an iPhone screen */
    display: flex; position: sticky; top: 0; z-index: 30; height: 52px;
    padding: 0 16px; background: var(--navy); align-items: center; justify-content: space-between; gap: 8px; overflow-x: auto;
  }
  .ws-tabbar a { font: 400 11px/1 var(--sans); color: var(--white); text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
  .ws-tabbar a[aria-current="true"] { color: var(--gold); }
  .ws-more { display: flex; flex-direction: column; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
  .ws-more__list { display: flex; flex-direction: column; }
  .ws-more__list a { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--line); font: 400 13px/1.3 var(--sans); color: var(--ink); text-decoration: none; }
  .ws-more__list a[aria-current="true"] { color: var(--navy); font-weight: 600; }
  .ws-more__acct { font: 400 12px/1.7 var(--sans); color: var(--slate); }
  .ws-more__acct button, .ws-more__acct a { font: 600 13px/1 var(--sans); color: var(--navy); background: none; border: 1px solid var(--slate); border-radius: var(--radius); padding: 0 16px; height: 40px; margin-top: 8px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .uw-controls { gap: 16px; }
}

/* ---------- mobile 390 ---------- */
@media (max-width: 600px) {
  .ws-body { gap: 12px; padding-left: 24px; padding-right: 24px; }
  .ws-data { gap: 12px; }
  .ws-grid--main, .ws-grid--3, .ws-grid--admin, .uw-grid, .uw-book, .uw-controls { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ws-intro .btn { width: auto; }
  .ws-tabbar a { font-size: 11px; }
  .uw-exposures { flex-wrap: wrap; gap: 12px 24px; }
  .uw-exposure { flex: 1 0 120px; }
  .uw-timeline li { grid-template-columns: 76px minmax(0, 1fr); }
  .uw-timeline li > :nth-child(3) { grid-column: 1 / -1; }
  .ops-crew { grid-template-columns: minmax(0, 1fr); }
  .ops-log li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .ops-log li > * { grid-column: auto; }
  .ops-log time { grid-column: 1; }
  .ops-log .tag { grid-column: 2; justify-self: end; }
  .ops-log__who, .ops-log__what, .ops-log__ref { grid-column: 1 / -1; }
  .si-roles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .si-role { min-height: 0; }
  .si-form { padding: 16px; }
  .ws-table.table--cards td { font-size: 12px; }
  .ws-table.table--cards td:first-child { font-weight: 600; }
  .ws-table.table--cards td { text-align: right; }
  .ws-table.table--cards td::before { text-align: left; flex: none; }
  .ws-filter, .ws-sort, .ws-search input { min-height: 44px; }
  .ws-pager button { min-width: 44px; min-height: 44px; }
  .ws-metric--card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; gap: 10px; }

  /* mobile-only blocks from the 390 frames */
  .m-only { display: flex; }
  .d-only { display: none !important; }
  .m-metrics { display: flex; gap: 16px; }
  .m-metric { flex: 1 0 0; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  .m-metric__label { font: 600 14px/1.25 var(--sans); color: var(--navy); }
  .m-metric__value { font: 400 28px/1.6 var(--sans); color: var(--ink); }
  .m-cta { align-self: flex-start; }
  .m-cta.btn { height: 48px; padding: 0 24px; font-size: 13px; }

  /* view switching: only the active view's sections show */
  .ws[data-mview="overview"] [data-m]:not([data-m~="overview"]),
  .ws[data-mview="quotes"] [data-m]:not([data-m~="quotes"]),
  .ws[data-mview="documents"] [data-m]:not([data-m~="documents"]),
  .ws[data-mview="more"] [data-m]:not([data-m~="more"]) { display: none !important; }
}
@media (min-width: 601px) {
  .m-only { display: none !important; }
}
@media (min-width: 1101px) {
  .ws-more, .ws-tabbar { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ops-log li.is-new { animation: none; }
}

/* ---------- one-tap approve (/app/approve/) — phone-first, opened from a WhatsApp alert ---------- */
.ap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.ap-head { background: var(--navy); border-bottom: 1px solid var(--gold); height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; }
.ap-head__brand { font: 400 23px/1 var(--serif); color: var(--white); text-decoration: none; white-space: nowrap; }
.ap-head__role { font: 400 10px/1.2 var(--sans); color: var(--gold); text-transform: uppercase; text-align: right; }
.ap-body { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.ap-state:empty { display: none; }
.ap-state .empty, .ap-state .loading, .ap-state .errstate { border: 1px solid var(--line); }
.ap-data, .ap-done { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ap-intro { display: flex; flex-direction: column; gap: 6px; }
.ap-intro .ws-tags { margin-top: 6px; }
.ap-title { font: 400 40px/1.08 var(--serif); color: var(--navy); overflow-wrap: anywhere; }
.ap-title:focus { outline: 0; }
.ap-why { margin: 6px 0 0; padding-left: 18px; font: 400 12px/1.6 var(--sans); color: var(--ink); }
.ap-kv { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.ap-kv > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font: 400 13px/1.5 var(--sans); }
.ap-kv > div:first-child { border-top: 0; padding-top: 0; }
.ap-kv dt { color: var(--slate); font-size: 12px; }
.ap-kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

.ap-terms { padding: 24px; gap: 14px; }
.ap-terms .premium__total { font-size: 44px; }
.ap-terms__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ap-terms__lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(188, 203, 210, .2); font: 400 13px/1.5 var(--sans); color: var(--white); }
.ap-terms__label { display: flex; flex-direction: column; min-width: 0; }
.ap-terms__how { font-size: 11px; color: var(--mist); overflow-wrap: anywhere; }
.ap-terms__amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-acc { border-top: 1px solid rgba(188, 203, 210, .2); }
.ap-acc:last-child { border-bottom: 0; }
.ap-acc > button { padding: 12px 0; min-height: 44px; font: 600 13px/1.5 var(--sans); color: var(--white); align-items: center; }
.ap-acc > button::after { color: var(--gold); }
.ap-acc .acc__body { padding: 0 0 8px; color: var(--mist); font-size: 12px; }
.ap-acc ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

.ap-checks, .ap-band { display: flex; flex-direction: column; gap: 14px; }
.ap-check, .ap-bandrow { display: flex; flex-direction: column; gap: 6px; }
.ap-check + .ap-check, .ap-bandrow + .ap-bandrow { border-top: 1px solid var(--line); padding-top: 14px; }
.ap-check__top, .ap-bandrow__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ap-check__name { font: 600 13px/1.5 var(--sans); color: var(--navy); }
.ap-check__name span { font-weight: 400; color: var(--slate); }
.ap-bandrow__top p { display: flex; flex-direction: column; min-width: 0; }
.ap-bandrow__label { font: 400 10px/1.6 var(--sans); color: var(--slate); text-transform: uppercase; }
.ap-bandrow__value { font: 400 18px/1.4 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.ap-check .tag, .ap-bandrow .tag { flex: none; }

.ap-act { position: sticky; bottom: 0; z-index: 5; margin: 0 -24px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: var(--off); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ap-act .ap-go { width: 100%; height: 52px; font-size: 14px; }
.ap-act__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ap-act__link { font: 600 13px/1 var(--sans); color: var(--navy); min-height: 44px; display: inline-flex; align-items: center; }
.ap-act__err { font: 400 12px/1.6 var(--sans); color: var(--err); }
.ap-done__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ap-closed .btn { align-self: flex-start; }
@media (max-width: 600px) {
  .ap-head { padding: 0 24px; }
  .ap-body { padding: 20px 24px 0; gap: 12px; }
  .ap-data, .ap-done { gap: 12px; }
  .ap-title { font-size: 34px; }
  .ap-terms { padding: 20px; }
  .ap-terms .premium__total { font-size: 38px; }
  .ap-kv > div { grid-template-columns: 96px minmax(0, 1fr); }
  .ap-done__btns .btn { width: 100%; }
  .ap .ws-foot { padding-bottom: 24px; }
}

/* ---------- sign-in methods + invitation (/app/) ---------- */
.si-methods { display: flex; flex-direction: column; gap: 16px; max-width: 984px; }
.si-tabs { gap: 28px; }
.si-tabs [role="tab"] { min-height: 40px; padding: 8px 0 10px; font-size: 14px; }
.si-tabs [role="tab"]:focus-visible { outline-offset: 0; }
.si-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; }
.si-fields .field { max-width: none; }
.si-invite { max-width: 760px; }
.si-invite__form { display: flex; flex-direction: column; gap: 16px; }
.si-invite__form .btn { align-self: flex-start; }
.si-invite .loading, .si-invite .empty, .si-invite .errstate { padding: 0; background: transparent; }
.si-invite .errstate { background: var(--err-bg); padding: 16px; }

/* ---------- people (/app/ops/#people) ---------- */
.ops-people th:nth-child(1) { width: 15%; }
.ops-people th:nth-child(2) { width: 21%; }
.ops-people th:nth-child(3) { width: 11%; }
.ops-people th:nth-child(4) { width: 14%; }
.ops-people th:nth-child(5) { width: 9%; }
.ops-people th:nth-child(6) { width: 12%; }
.ops-people th:nth-child(7) { width: 18%; }
.ops-people td { padding-top: 14px; padding-bottom: 14px; }
.ops-people__email { overflow-wrap: anywhere; }
.ops-people tr.is-off td { color: var(--slate); }
.ops-people__btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ops-act { border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); padding: 0 10px; min-height: 32px; font: 500 11px/1 var(--sans); color: var(--navy); cursor: pointer; white-space: nowrap; }
.ops-act:hover { border-color: var(--navy); }
.ops-act.is-loading { border-color: transparent; }
.ops-act.is-loading::before { content: "◌"; display: inline-block; margin-right: 4px; animation: ns-spin 1s linear infinite; }
#people .ws-ctl .btn { align-self: center; }
#people .empty, #people .loading { padding-top: 8px; }
.ops-person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ops-link { display: flex; gap: 8px; align-items: stretch; }
.ops-link .input { flex: 1 1 auto; min-width: 0; font-size: 13px; background: var(--off); }
.ops-link .btn { height: auto; min-height: 44px; flex: none; }
@media (max-width: 1100px) {
  .ops-people { min-width: 760px; }
  .si-methods { max-width: none; }
}
@media (max-width: 600px) {
  .si-tabs { gap: 20px; }
  .si-tabs [role="tab"] { min-height: 44px; font-size: 13px; }
  .si-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .si-invite__form .btn, .si-form > .btn { width: 100%; }
  .ops-people { min-width: 0; }
  .ops-people td { padding-top: 8px; padding-bottom: 8px; }
  .ops-people td.ops-people__acts { padding-bottom: 14px; }
  .ops-people td.ops-people__acts::before { display: none; }
  .ops-people__btns { width: 100%; justify-content: flex-start; }
  .ops-act { min-height: 44px; padding: 0 14px; font-size: 12px; flex: 1 1 auto; }
  .ops-person-grid { grid-template-columns: minmax(0, 1fr); }
  .ops-link { flex-direction: column; }
  #people .ws-ctl .btn { width: 100%; }
}
.ap-bandrow .uw-bar.is-over .uw-bar__used { background: var(--err); }
[data-inv-state]:empty { display: none; }
.si-invite .field.is-invalid .field__hint { display: none; }

@media (max-width: 600px) {
  .ws-search input, .ops-link .input { font-size: 16px; }   /* no iOS zoom on focus */
}