/* Built by `manage.py build_css` from static/css/: edit those files, not this one. */
/* ============================================================
   Loveday client portal - the design system.
   Palette and metrics follow the broker's prototype (demo.html) and the
   Loveday site tokens. The stylesheet is these files in name order,
   joined into static/portal.css by `manage.py build_css`; the browser
   loads that one file. File order is cascade order: a later file
   overrides an earlier one. Add a rule to the file and section it
   belongs to, then rebuild; never edit portal.css by hand (the test
   suite fails if it is out of date).
   ============================================================ */

/* ==== DESIGN TOKENS & RESET ============================= */

/* Loveday client portal — MVP styles.
   Palette lifted from the prototype (lovedayinsurance.com.au) so the web form
   reads as the same product. Tokens only live here; don't hard-code hex in
   templates. */
:root{--navy:#0b1f33;
  --navy-mid:#1f3645;
  --teal:#8bede5;
  --teal-2:#68d4cd;
  --teal-pale:#e6f9f7;
  --teal-light:#a8f0ea;
  --cream:#f7f8f8;
  --paper:#f0f2f5;
  --charcoal:var(--navy);        /* text colour: the navy, named for its job */
  --mid:#34445a;
  --pale:#758696;
  --border:#e4e7eb;
  --field-border:#dde1e6;
  --clay:#a0593e;
  --gold:#e1b96e;            /* secondary accent — use sparingly (prototype) */
  --warn:#e0a83e;            /* amber: change-request banners, pre-fill notes */
  --warn-bg:#fdf3e3;
  --warn-bg-2:#fdecc8;       /* the deeper amber of the changes-requested pill and the MFA-off strip */
  --warn-ink:#7a4d12;
  --warn-ink-2:#8a5a1a;      /* pill text on the amber backgrounds */
  --ok:#1e6e66;              /* success: submitted / current / premium up */
  --ok-bg:var(--teal-pale);       /* success ground: the pale teal */
  --danger-bg:#fde8e4;       /* error and expired backgrounds (text is --clay) */
  --hairline:#f0f1f3;        /* row dividers inside cards and tables */
  --lift:0 12px 28px rgba(44,57,71,0.1);   /* hover-lift shadow (prototype) */
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --radius:10px;

  /* Type scale. Eight sizes used to live between 10px and 15px, including
     12.5 and 13.5, which is not a scale but drift: with everything within
     five pixels the only way left to show hierarchy was to shrink text and
     shout it in capitals. Five sizes with real jumps, so hierarchy is
     legible without tracking or caps. */
  --t-1:12px;      /* labels, meta, table headers */
  --t-2:14px;      /* body, table cells, buttons */
  --t-3:16px;      /* section headings, emphasis */
  --t-4:20px;      /* the number on a card, a panel's title */
  --t-5:24px;      /* the title of a page or a modal */
  --t-6:32px;      /* the greeting, and the one number on a dashboard */

  /* Two radii, not six. Cards and panels; controls and pills. */
  --r-card:12px;
  --r-ctl:8px;
  --r-box:4px;
  --t-0:12px;
  --teal-500:#68d4cd;--teal-hover:#5cc7c0;--teal-300:#8bede5;
  --navy-700:#233547;--navy-line:#283a4b;--on-navy-2:#aab4bc;
  --focus:0 0 0 2px #fff, 0 0 0 4px #68d4cd;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-6:24px;--s-8:32px;--s-12:48px;--s-16:64px;

  /* Things that sit above the page are lifted, not outlined. */
  --shadow-1:0 1px 2px rgba(11,31,51,0.04), 0 4px 14px rgba(11,31,51,0.05);
  --shadow-2:0 2px 6px rgba(11,31,51,0.06), 0 12px 32px rgba(11,31,51,0.10);}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);font-family:var(--sans);color:var(--charcoal);
  -webkit-font-smoothing:antialiased;line-height:1.5}

/* ==== TOP NAVIGATION ==================================== */

/* top bar */
.tnav{background:var(--navy);height:60px;display:flex;align-items:center;
  gap:6px;padding:0 36px;color:#fff}
.tnav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;
  flex-shrink:0;margin-right:30px}
.tnav-logo img{height:24px;width:auto;display:block}
.tnav-badge{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--teal);border-left:1px solid rgba(255,255,255,0.2);padding-left:10px;
  font-weight:600;white-space:nowrap}
/* The links take whatever room is left and scroll inside it. Without the
   min-width:0 a flex item refuses to shrink below its content, so on a
   tablet the bar pushed the whole page sideways. */
.tnav-links{display:flex;gap:6px;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.tnav-links::-webkit-scrollbar{display:none}
.tnav-links a{color:rgba(255,255,255,0.6);text-decoration:none;font-size:var(--t-2);
  padding:7px 14px;border-radius:var(--r-ctl);transition:all .15s;white-space:nowrap}
.tnav-links a:hover{background:rgba(255,255,255,0.06);color:var(--cream)}
.tnav-links a.on{background:rgba(255,255,255,0.1);color:var(--cream)}
.tnav-user{margin-left:auto;display:flex;align-items:center;gap:10px}
.uchip{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,0.9);font-size:var(--t-2)}
.uav{width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:var(--t-1);font-weight:700;
  flex-shrink:0;letter-spacing:0.02em}
.uname{white-space:nowrap}
.uchip-out{background:transparent;border:1px solid rgba(255,255,255,0.22);color:rgba(255,255,255,0.85);
  font-family:var(--sans);font-size:var(--t-1);font-weight:500;padding:7px 13px;border-radius:var(--r-ctl);
  cursor:pointer;transition:all .15s}
.uchip-out:hover{background:rgba(255,255,255,0.1);color:#fff}
/* account switcher (person/account model): one login, several hats */
.acct-switch{display:inline-flex;align-items:center;margin-left:14px}
.acct-switch select{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.25);
  border-radius:var(--r-ctl);padding:6px 10px;font-family:inherit;font-size:var(--t-1);cursor:pointer;max-width:230px}
.acct-switch select option{color:var(--charcoal)}
.tnav-claim{color:var(--teal) !important;font-weight:600;text-decoration:none;
  font-size:var(--t-2);padding:7px 14px;border-radius:var(--r-ctl);white-space:nowrap;transition:background .15s}
.tnav-claim:hover{background:rgba(255,255,255,0.06)}

/* ==== PAGE CONTAINERS & HEADERS ========================= */

/* page */
/* 980, not 860: the business details page read as a strip down the
   middle of a wide screen; the wizard's question column
   keeps its own measure (.wiz-layout) */
.wrap{max-width:980px;width:100%;margin:0 auto;padding:36px 24px 80px}
/* width:100%: inside main's flex column, margin:auto made the wrap
   shrink to its content, so the business details page was a 520px strip
   whatever the screen */
.pagehead{margin-bottom:18px}
.pagehead h1{font-size:var(--t-6);font-weight:600;margin-bottom:4px}
.pagehead p{color:var(--mid);font-size:var(--t-2)}
.crumb-link{margin-bottom:10px}
.crumb-link a{font-size:var(--t-1);color:var(--mid);text-decoration:none;font-weight:500}
.crumb-link a:hover{color:var(--navy)}
/* Flashes: a toast, not a band.

   They used to render in the document flow above the page, so every
   confirmation pushed the whole page down behind a tall pale strip, worst
   of all on the client record where a full-bleed navy header sat under a
   centred column. Asked about twice. They now float clear
   of the layout at the top right, sized to their words, and take nothing
   from the page. */
.flash{background:var(--teal-pale);border-left:3px solid var(--teal-2);
  padding:12px 16px;border-radius:var(--r-ctl);font-size:var(--t-2);line-height:1.55;margin-bottom:18px}
/* the floating toasts only: the same class inline on a page (the broker's
   banner at the top of a form) is a banner, not a toast, and was getting
   the shadow and the tight padding */
.flashes .flash{padding:11px 38px 11px 14px;border-radius:var(--r-ctl);line-height:1.45;margin:0;
  color:var(--charcoal);box-shadow:0 8px 24px rgba(11,31,51,0.16);
  position:relative;pointer-events:auto;animation:flash-in 0.18s ease-out}
@keyframes flash-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.flash-x{position:absolute;top:6px;right:8px;border:none;background:none;
  font-size:var(--t-3);line-height:1;color:var(--mid);cursor:pointer;padding:2px 4px;
  font-family:inherit}
.flash-x:hover{color:var(--charcoal)}
.flash.going{opacity:0;transform:translateY(-6px);transition:opacity 0.25s,transform 0.25s}
.pill{font-size:var(--t-1);font-weight:500;padding:4px 11px;border-radius:999px;
  white-space:nowrap;display:inline-block;flex-shrink:0}
/* four tones by meaning (proposals/pills.py): neutral, teal, amber, clay.
   The per-state classes below are aliases of them, kept so an unconverted
   pill still reads correctly. */
.pill.neutral,.pill.draft,.pill.not_started,.pill.with_broker{background:var(--paper);color:var(--mid)}
.pill.teal,.pill.submitted,.pill.current,.pill.bound,.pill.upcoming{background:var(--ok-bg);color:var(--ok)}
.pill.amber,.pill.in_progress,.pill.changes_requested,.pill.sent,.pill.renewal_open,.pill.renewing{background:var(--warn-bg);color:var(--warn-ink-2)}
.pill.clay,.pill.expired{background:var(--danger-bg);color:var(--clay)}
/* forms hub */
.sh-label{font-size:var(--t-3);
  font-weight:600;
  color:var(--navy);
  margin-bottom:14px}
/* banners */
.flash.changes-banner{background:var(--warn-bg);border-left-color:var(--warn);color:var(--warn-ink)}
.flash.error{background:var(--danger-bg);border-left-color:var(--clay);color:var(--clay)}
/* flashes render once, in base.html; fixed, so the page never reflows */
.flashes{position:fixed;top:72px;right:24px;z-index:60;width:min(420px,calc(100vw - 48px));
  display:flex;flex-direction:column;gap:10px;pointer-events:none}
@media (max-width:600px){.flashes{left:16px;right:16px;width:auto}}
/* ============================================================
   v2 Phase 1 — prototype-faithful layer.
   Class names, metrics, and colours ported from the broker's demo.html
   (windows, fonts, spacing built as-is per Steve, Aug 2026).
   Demo var map: demo --gold = --teal (#8bede5), demo --teal = --teal-2,
   demo --gold-pale = --teal-pale, demo --accent-gold = --gold.
   ============================================================ */
/* wide app page (dashboard, documents) */
.page{flex:1;padding:44px 56px;max-width:1280px;width:100%;margin:0 auto}
.greet{font-size:var(--t-6);color:var(--charcoal);margin-bottom:4px;font-weight:500}
.greet-sub{font-size:var(--t-2);color:var(--mid);margin-bottom:30px}
/* section headers */
/* Section headings need air above them, or the next section starts hard
   against the previous one's last card. The first heading
   on a page already sits below the greeting, so it keeps its own spacing. */
.sh{display:flex;align-items:center;justify-content:space-between;
  margin:42px 0 18px}
.page > .sh:first-of-type{margin-top:0}
.sh .sh-label{margin-bottom:0}
/* status badges (policy states share the.pill component) */
.empty{padding:40px 20px;text-align:center;color:var(--pale);font-size:var(--t-2);
  background:#fafaf7;border:1px dashed var(--border);border-radius:var(--r-ctl)}

/* ==== BUTTONS =========================================== */

.btn-autofill{background:var(--teal-pale);color:var(--navy);border:1px solid var(--teal);
  border-radius:var(--r-ctl);font-family:var(--sans);font-size:var(--t-1);font-weight:600;
  padding:8px 14px;cursor:pointer;white-space:nowrap;transition:all .15s}
.btn-autofill:hover{background:var(--teal)}
.btn{border:none;border-radius:var(--r-ctl);font-family:var(--sans);font-size:var(--t-2);
  font-weight:600;padding:12px 22px;cursor:pointer;transition:all .15s}
.btn-primary{background:var(--teal);color:var(--navy)}
.btn-primary:hover{background:var(--teal-2)}
.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy)}
.btn:disabled{opacity:0.45;cursor:not-allowed}
.btn-sm{display:inline-block;background:#fff;border:1px solid var(--border);color:var(--navy);
  font-size:var(--t-1);font-weight:600;padding:8px 14px;border-radius:var(--r-ctl);text-decoration:none;
  cursor:pointer;transition:all .15s}
.btn-sm:hover{border-color:var(--navy)}
a.btn{text-decoration:none;display:inline-flex;align-items:center}
.btn-gold{background:var(--teal);color:var(--navy);border:none;padding:12px 22px;
  border-radius:var(--r-card);font-size:var(--t-2);font-weight:600;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);transition:background 0.18s;text-decoration:none;display:inline-block}
.btn-gold:hover{background:var(--teal-2)}
.tbl-btn{font-size:var(--t-1);
  color:var(--navy);
  background:var(--paper);
  border:1px solid var(--border);
  padding:5px 11px;
  border-radius:var(--r-ctl);
  cursor:pointer;
  margin-right:4px;
  font-family:var(--sans);
  font-weight:500;
  text-decoration:none;
  display:inline-block;
  white-space:nowrap}
.tbl-btn:hover{background:var(--teal-pale);border-color:var(--teal)}

/* ==== FORMS & CONTROLS ================================== */

/* fields */
label.cell{display:block;font-size:var(--t-1);font-weight:500;color:var(--pale);
  margin:10px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=date], input[type=number],textarea,select{width:100%;padding:11px 13px;border:1px solid var(--field-border);
  border-radius:var(--r-ctl);font-family:var(--sans);font-size:var(--t-2);background:#fff;
  color:var(--charcoal);outline:none;transition:border .15s,box-shadow .15s}
select:focus{border-color:var(--teal-2);box-shadow:0 0 0 3px rgba(104,212,205,0.22)}
input[type=checkbox]{accent-color:var(--teal-2);width:16px;height:16px;cursor:pointer}
/* the native date picker keeps its calendar affordance but wears our type */
input[type=date]{-webkit-appearance:none;appearance:none;min-height:44px}
input[type=date]::-webkit-datetime-edit{font-family:var(--sans)}
input:focus,textarea:focus{border-color:var(--teal-2);
  box-shadow:0 0 0 3px rgba(104,212,205,0.22)}
/* no drag handle by default: the boxes are sized for what goes in them,
   and a resizable corner invites pulling the layout about */
textarea{min-height:96px;resize:none}
/* except a client's own long answers, where the length is genuinely
   theirs to decide */
.section textarea{resize:vertical}
/* The grid owns the vertical rhythm. Labels carry their own 10px top
   margin for use outside a grid, which stacked on top of the row gap and
   left every row after the first sitting lower than its neighbours, worst
   where a hint added another line. */
.cellgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px 16px}
.cellgrid label.cell{margin-top:0}
.cellgrid .fhint{margin:0 0 6px}
/* radio / check */
.choices{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.choice{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--field-border);
  border-radius:999px;padding:8px 16px;font-size:var(--t-2);cursor:pointer;background:#fff;
  transition:all .15s}
.choice:hover{border-color:var(--teal-2)}
.choice input{accent-color:var(--teal-2);cursor:pointer}
.errlist{background:var(--danger-bg);color:var(--clay);border-radius:var(--r-ctl);padding:10px 14px;
  font-size:var(--t-2);margin-bottom:16px;list-style:none}
/* show/hide password toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:62px}
.pw-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;color:var(--mid);font-family:var(--sans);
  font-size:var(--t-1);font-weight:600;cursor:pointer;padding:6px 10px;transition:color .15s}
.pw-toggle:hover{color:var(--navy)}
/* signup field errors */
.fielderr{color:var(--clay);font-size:var(--t-1);margin-top:5px}
/* the footer sits at the foot of the window on a short page and after the
   content on a long one: body is a column the full height of the window
   and main takes the spare room. The sign-in page has no site footer and keeps its own shell. */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;display:flex;flex-direction:column}
/* a footer, not a stray link: a hairline across the page, with its line
   set on the same column as the page content (.page), so it lines up
   with the headings above it on every screen */
.site-foot{border-top:1px solid var(--hairline);font-size:var(--t-1);color:var(--pale);margin-top:auto}
.site-foot-in{max-width:1280px;margin:0 auto;padding:18px 56px 26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-foot a{color:var(--pale);text-decoration:underline}
.ack-privacy{font-size:var(--t-1);color:var(--mid);margin:10px 0 0}
.ack-privacy a{color:var(--mid)}
/* outranks.ftbl td.rowlbl below, which would otherwise keep the colour */
.ftbl td.rowlbl.pct-off{color:var(--clay);font-weight:600}
/* a one-of tick draws as a radio: it is one choice of several */
.choice input.as-radio{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:2px solid var(--field-border);border-radius:50%;margin:0}
.choice input.as-radio:checked{border:5px solid var(--teal-2)}
/* two short sections on one step: the second keeps its heading, under a rule */
.section-part + .section-part{margin-top:30px;padding-top:26px;border-top:1px solid var(--border)}
/* figures and dates need their digits: the PDF's narrow columns clipped "44"
   and a date; the table scrolls sideways before a box does */
.ftbl input.num-mask{min-width:64px}
.ftbl input.date-mask{min-width:124px}
/* a percentage is two digits, three at most: a fixed box, so nine of them
   in a row leave the drawn total its room instead of squeezing it to
   nothing */
.ftbl input.num-mask.pct{width:58px;min-width:0}
.ftbl td.pct-cell{white-space:nowrap}
/* a column of words grows as the client types instead of scrolling on one line */
.ftbl textarea.cell-grow{width:100%;min-height:42px;resize:none;overflow:hidden;line-height:1.4;padding:9px 12px}
/* money reads as money: a fixed $ inside the box, on the page only */
.money-in{position:relative;display:block}
.money-in::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--pale);pointer-events:none}
.money-in input.money{padding-left:26px}
/* assign forms (invite + manage) */
.assign-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;
  border-top:1px solid var(--hairline);cursor:pointer}
.assign-row:first-child{border-top:none}
.assign-row input{margin-top:3px;accent-color:var(--teal-2);width:16px;height:16px;cursor:pointer}
.assign-row-name{font-weight:600;font-size:var(--t-2);display:block}
.assign-row-blurb{font-size:var(--t-1);color:var(--mid);display:block;margin-top:2px}
/* set-password hint (invite / reset) */
.pwhint{font-size:var(--t-1);color:var(--pale);margin-top:6px;line-height:1.5}
.pwhint strong{color:var(--mid);font-weight:600}
.choices + .subq-web, .cellgrid + .subq-web{margin-top:16px}
/* a date is ten characters - cap the box */
input.date-mask{max-width:190px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:var(--t-1);font-weight:500;color:var(--pale);
  margin-bottom:6px}
.fld select{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--r-ctl);
  font-family:var(--sans);font-size:var(--t-2);background:#fff;color:var(--charcoal);outline:none}
.fld textarea{min-height:90px}
.fld-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ==== CARDS & DASHBOARD ================================= */

/* The client's dashboard, third sketch (3 Oct): one navy panel for the
   task, the other tasks on a white card with a teal button each, the status
   of cover as a figure and a sentence over the policies as cards in the
   client's words, the broker as a card. Everything sits on a surface. */
.dash .greet{margin-bottom:4px}
.dash .greet-sub{font-size:15px;color:var(--mid);margin-bottom:28px}
.dash-lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pale);margin:0 0 10px}
.dash-sec{margin-bottom:36px}
.dash-top{display:flex;align-items:baseline;justify-content:space-between}
.dash-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.action-card.next-up{background:var(--navy);border-radius:var(--r-card);padding:24px 28px;
  display:flex;align-items:center;gap:28px;margin-bottom:36px}
.next-up .body{flex:1;min-width:0}
.next-up .lab{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.next-up .msg{font-size:22px;font-weight:500;color:#fff;margin-top:6px;line-height:1.3}
.next-up .det{font-size:14px;color:rgba(255,255,255,.75);margin-top:6px;line-height:1.5}
.next-btn{margin-left:auto;background:var(--teal);color:var(--navy);font-weight:600;font-size:14px;
  padding:13px 22px;border-radius:var(--r-ctl);text-decoration:none;white-space:nowrap;transition:background .15s}
.next-btn:hover{background:var(--teal-2)}
.action-list{list-style:none;margin:12px 0 0;padding:0}
.action-list li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 16px;padding:8px 0;border-top:1px solid var(--hairline)}
.action-list-name{font-size:15px;color:var(--charcoal)}
.action-list a{font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;white-space:nowrap}
.action-list a:hover{text-decoration:underline}
.next-up .action-list li{border-top-color:rgba(255,255,255,.14)}
.next-up .action-list-name{color:#fff}
.next-up .action-list a{color:var(--teal)}
.dash-row{display:flex;align-items:center;gap:24px;padding:16px 22px;border-top:1px solid var(--hairline)}
.dash-row:first-child{border-top:none}
.dash-row .body{flex:1;min-width:0}
.dash-row .msg{font-size:16px;font-weight:500;color:var(--charcoal)}
.dash-row .det{font-size:14px;color:var(--mid);margin-top:2px;line-height:1.5}
.dash-upd .dash-row .msg{font-size:15px;font-weight:400}
.dash-do{background:var(--teal);color:var(--navy);font:600 13px/1 var(--sans);padding:11px 16px;
  border-radius:var(--r-ctl);text-decoration:none;white-space:nowrap;transition:background .15s}
.dash-do:hover{background:var(--teal-2)}
.dash-go{font:500 14px/1 var(--sans);color:var(--navy);text-decoration:none;white-space:nowrap}
.dash-go:hover{text-decoration:underline}
/* the status of cover */
.cov{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-1);overflow:hidden}
.cov-h{display:grid;grid-template-columns:220px 1fr;background:var(--teal-pale);border-bottom:1px solid var(--hairline)}
.cov-h.neutral{background:var(--paper)}
.cov-fig{padding:28px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(11,31,51,.08)}
.cov-fig .n{font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--navy)}
.cov-fig .n span{font-size:22px;color:var(--mid);font-weight:500}
.cov-fig .l{font-size:13px;color:var(--mid);margin-top:8px;line-height:1.4}
.cov-st{padding:26px 28px}
.cov-st .h{font-size:26px;font-weight:600;color:var(--charcoal);letter-spacing:-.01em;line-height:1.25}
.cov-st .h b{color:var(--navy)}
.cov-st .s{font-size:15px;color:var(--mid);margin-top:8px;line-height:1.5;max-width:70ch}
.cov-warn{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px;color:var(--clay);line-height:1.5}
.cov-warn i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--clay);flex:none;margin-top:7px}
.cov-warn a{color:var(--clay);font-weight:600;white-space:nowrap}
.cov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 22px 22px}
/* a cover the client ended this year: one quiet line, still a way to its page */
.cov-past{padding:0 22px 20px;display:grid;gap:4px}
.cov-grid + .cov-past{margin-top:-6px}
.cov-past a{font-size:14px;color:var(--pale);text-decoration:none}
.cov-past a:hover{color:var(--charcoal);text-decoration:underline;text-underline-offset:3px}
.pc{border:1px solid var(--border);border-top:3px solid var(--teal);border-radius:var(--r-ctl);padding:16px 18px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:3px;transition:box-shadow .15s}
.pc:hover{box-shadow:var(--shadow-1)}
.pc.need{border-top-color:var(--warn)}
.pc.ended{border-top-color:var(--border);background:var(--cream)}
.pc .n{font-size:16px;font-weight:600;color:var(--charcoal)}
.pc .i{font-size:13px;color:var(--pale)}
.pc .f{display:flex;gap:18px;margin-top:12px}
.pc .f > span{display:flex;flex-direction:column}
.pc .f b{font-size:17px;font-weight:600;color:var(--charcoal);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pc .f em{font-style:normal;font-size:12px;color:var(--pale);margin-top:1px}
.pc.ended .f b{color:var(--mid)}
.pc .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.pc .u{font-size:13px;color:var(--mid)}
.pc .u.need{color:var(--warn-ink-2);font-weight:600}
.pc .u.hand{color:var(--ok);font-weight:600}
.pc .u.ended{color:var(--mid);font-weight:600}
.pc .doc{font-size:12px;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--teal)}
/* the broker */
.broker-card{display:flex;align-items:center;gap:18px;padding:22px 24px}
.broker-card .uav{width:44px;height:44px;font-size:14px;flex:none}
.broker-card-name{font-size:16px;font-weight:600;color:var(--charcoal)}
.broker-card-c{font-size:14px;color:var(--mid);margin-top:3px}
.broker-card-c a{color:var(--navy);text-decoration:none;font-weight:500}
.broker-card-c a:hover{text-decoration:underline}
.broker-card-acts{margin-left:auto;display:flex;gap:10px}
@media (max-width:900px){
  .action-card.next-up{flex-direction:column;align-items:flex-start;gap:14px}
  .next-btn{margin-left:0}
  .dash-row{flex-wrap:wrap}
  .cov-h{grid-template-columns:1fr}
  .cov-fig{border-right:0;border-bottom:1px solid rgba(11,31,51,.08);padding:20px 24px}
  .cov-grid{grid-template-columns:1fr}
  .broker-card{flex-wrap:wrap}
  .broker-card-acts{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.next-btn,.dash-do,.pc{transition:none}}
.kv-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
  padding:6px 22px;margin-bottom:22px}
.kv{display:flex;justify-content:space-between;gap:24px;padding:13px 0;
  border-bottom:1px solid var(--hairline);font-size:var(--t-2)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--mid)}
.kv .v{font-weight:500;text-align:right;white-space:pre-line}
.scard .row{display:flex;justify-content:space-between;padding:6px 0;font-size:var(--t-1);
  color:var(--charcoal)}
.scard .row .k{color:var(--mid)}
.scard .row .v{font-weight:500}
.scard .row .v.ok{color:var(--teal-2);font-weight:600}
/* client record: people card rows */

/* ==== DOCUMENT & CLIENT LISTS =========================== */

/* client directory */
.client-list{display:flex;flex-direction:column;gap:10px}
.invite-link-row .btn{white-space:nowrap}
.dm{font-size:var(--t-1);
  color:var(--pale);
  margin-top:2px}
/* document list */
.dl{background:#fff;border-radius:var(--r-card);border:1px solid var(--border);
  box-shadow:var(--shadow-1);overflow:hidden}
.dr{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--hairline);
  font-size:var(--t-2);cursor:pointer;transition:background 0.12s;text-decoration:none;color:inherit}
.dr:hover{background:#fafaf7}
.dr:last-child{border-bottom:none}
.dr .body{flex:1}
.dr-static{cursor:default}
.di{width:34px;height:34px;background:var(--paper);border-radius:var(--r-ctl);display:flex;
  align-items:center;justify-content:center;font-size:var(--t-2);flex-shrink:0}
.dn{font-weight:500;color:var(--charcoal);font-size:var(--t-2)}
.dd{font-size:var(--t-1);color:var(--mid);white-space:nowrap;margin-left:auto}
.dl-action{font-size:var(--t-1);color:var(--navy);cursor:pointer;font-weight:500;
  white-space:nowrap;margin-left:auto}
.dr-do{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}
.dr-do .dl-action, .dr-do .attach-rm{margin-left:0}
.dr:hover .dl-action{text-decoration:underline}
/* attach supporting documents (declaration step of the wizard) */
.attach-block{margin-top:14px}
.attach-list{margin-bottom:12px}
.attach-list.is-empty{display:none}
.attach-list .dr{cursor:default}
.attach-rm{background:none;border:none;color:var(--clay);font-family:var(--sans);
  font-size:var(--t-1);font-weight:500;cursor:pointer;padding:4px 6px;margin-left:auto}
.attach-rm:hover{text-decoration:underline}
/* clients directory: whole row is the way in */
.client-row-link{display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  text-decoration:none;color:inherit;transition:all .15s}
.client-row-link:hover{border-color:var(--teal-2);transform:translateY(-1px);
  box-shadow:var(--lift)}

/* ==== POLICY DETAIL & CLAIM RAIL ======================== */

/* policy detail — split window (white main / navy claim rail) */
.split{display:flex;flex:1;min-height:0;height:calc(100vh - 101px)}
.split-main{flex:1;overflow-y:auto;background:#fff}
.crumb{padding:12px 32px;background:#fff;border-bottom:1px solid var(--border);
  font-size:var(--t-1);color:var(--mid);display:flex;align-items:center;justify-content:space-between}
.crumb a{color:var(--mid);text-decoration:none;cursor:pointer}
.crumb a:hover{color:var(--navy)}
.pd-body{padding:32px 40px}
.pd-body h1{font-size:var(--t-5);color:var(--charcoal);margin-bottom:6px;
  font-weight:600;letter-spacing:-0.02em}
.pd-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.pd-title h1{margin-bottom:0}
.pd-body .pol-sub{font-size:var(--t-2);color:var(--pale);margin-bottom:28px}
.pd-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;margin-bottom:30px}
/* The tiles keep their ground: whitening them removed the grey and gave
   the page nothing to hold it together, so it read as emptier rather than
   calmer. The point was never that they should disappear,
   only that they should not all weigh the same as the one that matters. */
.pstat{background:var(--paper);border:1px solid transparent;border-radius:var(--r-ctl);
  padding:16px 18px}
/* 2: expiry is the one the broker acts on, so it is the one that changes. Quiet
   with months left, teal once the renewal window opens, clay when it is
   close or gone. */
.pstat-when.renewing{background:var(--teal-pale);border-color:var(--teal-2)}
.pstat-when.renewing .v{color:var(--navy)}
.pstat-when.expired{background:var(--danger-bg);border-color:var(--clay)}
.pstat-when.expired .v, .pstat-when.expired .l{color:var(--clay)}
.pstat .l{font-size:var(--t-1);color:var(--pale);margin-bottom:6px;font-weight:500}
.pstat .v{font-size:var(--t-4);color:var(--charcoal);letter-spacing:-0.01em}
.pstat.urg .v{color:var(--clay)}
.ps{margin-bottom:30px}
.ps h3{font-size:var(--t-3);font-weight:600;color:var(--navy);margin-bottom:14px;
  letter-spacing:-0.01em}
/* The 40x2 teal rule under every heading is gone: it was standing in for
   hierarchy the type scale can now carry on its own. */
.ps .rule{display:none}
.cov-disclaimer{background:var(--paper);border-radius:var(--r-ctl);padding:14px 16px;margin-top:18px;
  font-size:var(--t-1);color:var(--mid);line-height:1.6}
.ps-empty{font-size:var(--t-2);color:var(--pale);padding:8px 0}
.sc-contact .name{font-weight:600;color:var(--cream);font-size:var(--t-2);margin-bottom:8px}
.sc-contact .detail{font-size:var(--t-2);color:var(--teal);line-height:1.9}
.sc-contact .detail a{color:var(--teal);text-decoration:none}
.claim-reminder{background:var(--teal-pale);border-radius:var(--r-ctl);padding:12px 14px;font-size:var(--t-1);
  color:var(--charcoal);line-height:1.6;border-left:3px solid var(--teal)}

/* ==== DOCUMENTS PAGE ==================================== */

/* documents page */
.docs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.docs-search{display:flex;gap:10px;align-items:center}
.docs-search input{padding:9px 14px;border:1px solid var(--border);border-radius:var(--r-ctl);
  font-family:var(--sans);font-size:var(--t-2);width:280px;background:#fff;outline:none}
.docs-search input:focus{border-color:var(--navy);box-shadow:none}
.filter-row{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.filter-pill{padding:6px 13px;font-size:var(--t-1);border-radius:999px;border:1px solid var(--border);
  color:var(--mid);background:#fff;cursor:pointer;transition:all 0.12s;
  font-family:var(--sans);line-height:1.5}
.filter-pill:hover{border-color:var(--navy);color:var(--navy)}
.filter-pill.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}

/* ==== MODALS & DROPZONES ================================ */

/* upload dropzone */
.dropzone{border:2px dashed var(--border);border-radius:var(--r-card);padding:36px 24px;
  text-align:center;background:#fafaf7;cursor:pointer;transition:all 0.15s;display:block}
.dropzone:hover{border-color:var(--teal);background:var(--teal-pale)}
.dropzone .icon{font-size:34px;margin-bottom:10px;opacity:0.6}
.dropzone .ttl{font-size:var(--t-2);font-weight:600;color:var(--charcoal);margin-bottom:4px}
.dropzone .sub{font-size:var(--t-1);color:var(--mid)}
.upload-list{margin-top:16px}
.upload-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--paper);
  border-radius:var(--r-ctl);margin-bottom:6px;font-size:var(--t-2)}
.upload-row .ic{font-size:18px}
.upload-row .nm{flex:1;color:var(--charcoal);font-weight:500}
/* modal */
.modal-bd{position:fixed;inset:0;background:rgba(15,20,28,0.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:500;padding:24px}
.modal-bd.on{display:flex;animation:mfade 0.18s ease}
.modal{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-2);
  max-width:560px;width:100%;max-height:88vh;
  overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,0.4)}
.modal-h{padding:24px 28px 18px;border-bottom:1px solid var(--border);display:flex;
  align-items:flex-start;justify-content:space-between;gap:16px}
.modal-h .lab{font-size:var(--t-1);font-weight:500;
  color:var(--teal-2);margin-bottom:6px}
.modal-h h3{font-size:var(--t-5);color:var(--charcoal);font-weight:600;line-height:1.25}
.modal-h .sub{font-size:var(--t-2);color:var(--mid);margin-top:6px;line-height:1.5}
.modal-h .x{background:none;border:none;font-size:22px;color:var(--pale);cursor:pointer;
  line-height:1;padding:4px;flex-shrink:0;font-family:var(--sans)}
.modal-h .x:hover{color:var(--charcoal)}
.modal-b{padding:24px 28px}
.modal-f{padding:18px 28px;border-top:1px solid var(--border);display:flex;gap:10px;
  justify-content:flex-end}
.dropzone-sm{padding:18px 20px}
.dropzone-sm .ttl{font-size:var(--t-2);margin-bottom:2px}
/* wide modal for the add-policy form */
.modal-wide{max-width:720px}

/* ==== FORM WIZARD & SECTIONS ============================ */

.progress{margin:18px 0 8px;height:8px;background:var(--paper);border-radius:var(--r-ctl);
  overflow:hidden}
.progress i{display:block;height:100%;background:var(--teal-2)}
/* sections + questions */
.section{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
  padding:24px 26px;margin-bottom:20px}
.section-eyebrow{font-size:var(--t-1);font-weight:500;color:var(--pale)}
.section-title{font-size:var(--t-4);font-weight:600;margin:2px 0 4px}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.section-note{font-size:var(--t-1);color:var(--mid);margin:6px 0 0}
/* The teal bar under a section header went the same way as.ps.rule: the
   eyebrow and the title already say where you are. */
.section-rule{display:none}
.q{padding:16px 0;border-top:1px solid var(--hairline)}
.q:first-of-type{border-top:none;padding-top:4px}
.qtext{font-size:var(--t-2);font-weight:500;margin-bottom:10px}
.qtext .n{color:var(--teal-2);font-weight:700;margin-right:6px}
/* wizard */
.wiz-head{margin:0 0 24px}
.wiz-dot{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:var(--mid);font-family:var(--sans);font-size:var(--t-1);font-weight:600;
  cursor:pointer;transition:all .15s;flex-shrink:0}
.wiz-dot:hover{border-color:var(--teal-2)}
.wiz-dot.on{background:var(--navy);border-color:var(--navy);color:#fff}
.wiz-steplabel{font-size:var(--t-2);font-weight:600;color:var(--charcoal);margin-bottom:8px}
.wiz-head .progress{margin:0}
.wiz-nav-r{margin-left:auto;display:flex;gap:12px}
.wiz-saved{font-size:var(--t-1);color:var(--teal-2);font-weight:600}
/* the sticky action bar: the wizard's nav, a plain form's buttons and the
   review page's row are one component */
.wiz-nav,.actions,.review-actions{position:sticky;bottom:0;background:var(--cream);
  padding:16px 0;margin-top:8px;display:flex;
  gap:12px;border-top:1px solid var(--border)}
.wiz-nav,.review-actions{align-items:center}
.actions,.review-actions{justify-content:flex-end}
/* important-information acknowledgement */
.ack-check{display:flex;flex-wrap:wrap;align-items:flex-start;gap:11px;margin-top:18px;padding:14px 16px;
  background:var(--teal-pale);border:1px solid var(--teal);border-radius:var(--r-card);
  font-size:var(--t-2);font-weight:500;color:var(--charcoal);cursor:pointer}
.ack-check input{margin-top:1px;width:18px;height:18px;accent-color:var(--teal-2);
  flex-shrink:0;cursor:pointer}
/* the wording wraps beside the tick, never under it: with the later
   plain-row rule it dropped to its own line in the narrower column (3 Oct) */
.ack-check > span{flex:1;min-width:0}
/* read-only prose (important information + declaration wording) */
.prose{font-size:var(--t-2);color:var(--charcoal);line-height:1.65}
.prose h2{font-size:var(--t-3);font-weight:600;margin:18px 0 6px}
.prose h3{font-size:var(--t-3);font-weight:600;margin:14px 0 4px}
.prose p{margin-bottom:10px}
.prose ul,.prose ol{margin:0 0 10px 20px}
.prose li{margin-bottom:5px}
.prose a{color:var(--navy);font-weight:500}
.prose .kicker{font-size:var(--t-1);font-weight:600;color:var(--teal-2);margin-bottom:2px}
.prose .kicker2{font-size:var(--t-2);color:var(--mid);margin-bottom:12px}
.prose .title{font-size:var(--t-4);font-weight:600;margin-bottom:14px;line-height:1.3}
.prose .title .sub{font-size:var(--t-2);color:var(--mid);font-weight:400}
.prose .decl>p{margin-bottom:10px}
.prose .dlist{list-style:none;margin:0}
.prose .dlist li{position:relative;padding-left:26px;margin-bottom:8px}
.prose .dlist .dl{position:absolute;left:0;font-weight:600;color:var(--navy)}
/* signature pad */
.sigpad{max-width:460px;margin-top:6px}
.sigpad-canvas{width:100%;height:auto;aspect-ratio:4/1;background:#fff;
  border:1px solid var(--field-border);border-radius:var(--r-ctl);touch-action:none;cursor:crosshair;display:block}
.sigpad-bar{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.sigpad-hint{font-size:var(--t-1);color:var(--pale)}
.sigpad-clear{background:transparent;border:none;color:var(--navy);font-family:var(--sans);
  font-size:var(--t-1);font-weight:600;cursor:pointer;padding:4px 6px}
.sigpad-clear:hover{text-decoration:underline}
/* sub-question wording carried over from the PDF design (a/b/c parts,
   "If Yes.." prompts) */
.subq-web{margin:14px 0 2px}
.subq-web .sl-subq{font-size:var(--t-2);font-weight:500;color:var(--charcoal);
  line-height:1.6;margin-bottom:6px}
.subq-web .sl-note{font-size:var(--t-2);font-weight:400;color:var(--mid);
  line-height:1.75}
/* an "If Yes to N:" lead-in gets the same breathing room above its lettered
   sub-question as the sub-question has above its control (bullet runs of
   consecutive notes keep their tight line-height rhythm) */
.subq-web .sl-note + .sl-subq{margin-top:10px}
.subq-web + .choices{margin-top:12px}
/* drawn tables carried over from the PDF design */
.ftbl-wrap{overflow-x:auto;margin:4px 0 6px}
.ftbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;min-width:420px}
.ftbl th{background:#fff;color:var(--pale);font-size:var(--t-1);font-weight:500;
  text-align:left;padding:12px 8px;border-bottom:1px solid var(--border)}
.ftbl th:first-child{padding-left:14px}
.ftbl td{border-bottom:1px solid var(--hairline);padding:10px 8px;vertical-align:middle}
.ftbl tr:last-child td{border-bottom:none}
.ftbl td.rowlbl{font-size:var(--t-2);color:var(--mid);padding:8px 14px 8px 14px;white-space:normal}
.ftbl td input{padding:9px 11px;border-color:#e8ebee}
/* a Total the form works out from the rows above it (static/js/totals.js) */
.ftbl td input.ftbl-sum{background:var(--paper);color:var(--charcoal);font-weight:500}
/* the declaration's numbered lead-in reads like a question, teal number */
.prose .decl > p:first-child{font-size:var(--t-2);font-weight:500;
  color:var(--charcoal);margin-bottom:12px}
.prose .decl > p:first-child b{color:var(--teal-2);font-weight:700;
  margin-right:6px}

/* ==== REVIEW & UNLOCK =================================== */

/* broker unlock control */
.unlock{position:relative;display:inline-block}
.unlock summary{display:inline-block;list-style:none;cursor:pointer}
.unlock summary::-webkit-details-marker{display:none}
.unlock-form .btn{padding:9px 16px;font-size:var(--t-2)}
/* review — embedded PDF */
.pdf-frame{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;
  background:#525659}
.pdf-frame iframe{width:100%;height:82vh;border:none;display:block}
.review-actions .btn-ghost:first-child{margin-right:auto}

/* ==== LOGIN ============================================= */

/* login */
.login-shell{min-height:100vh;display:flex}
.login-l{flex:1;background:var(--navy);color:#fff;padding:60px 64px;display:flex;
  flex-direction:column;justify-content:space-between}
.login-brand img{height:32px;width:auto;display:block}
.login-brand-badge{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--teal);margin-top:10px;font-weight:500}
.login-l h1{font-size:clamp(30px,3.9vw,56px);line-height:1.04;font-weight:700;
  letter-spacing:-0.02em;color:#fffefa}
.login-l h1 em{color:var(--teal);font-style:normal}
.login-l .rule{width:42px;height:3px;background:var(--teal);margin:24px 0 22px;
  border-radius:2px}
.login-l p{color:rgba(255,255,255,0.65);font-size:var(--t-2);line-height:1.7;max-width:480px}
.login-l .foot{font-size:var(--t-1);color:rgba(255,255,255,0.4);line-height:1.6}
.login-r{flex:0 0 460px;display:flex;align-items:center;justify-content:center;
  padding:60px 48px}
.login-card{width:100%;max-width:360px}
.login-card h2{font-size:var(--t-5);font-weight:600;margin-bottom:6px}
.login-card .lead{font-size:var(--t-2);color:var(--mid);margin-bottom:28px}
.login-card input[type=text],.login-card input[type=email], .login-card input[type=password]{padding:12px 16px;
  width:100%}
.login-card .btn-primary{padding:14px;
  font-size:var(--t-3);
  width:100%;
  margin-top:4px}
.login-card label{display:block;font-size:var(--t-1);font-weight:500;color:var(--pale);
  margin:0 0 6px}
.login-card .fld{margin-bottom:16px}
.login-card .meta{display:block;text-align:center;font-size:var(--t-1);color:var(--mid);
  margin-top:14px;text-decoration:none}

/* ==== BROKER MFA ======================================== */

/* broker MFA (TOTP enrolment + per-session verify) */
.qr-box{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  padding:18px;display:inline-block}
.qr-box svg{display:block;width:196px;height:196px}
.mfa-row{display:flex;gap:12px;align-items:center}
.mfa-input{max-width:200px;font-size:22px;letter-spacing:0.18em;text-align:center;
  font-variant-numeric:tabular-nums}
.backup-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.backup-codes code{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-ctl);
  padding:9px 12px;font-size:var(--t-2);text-align:center;letter-spacing:0.06em}

/* claims register (broker tab) */
.claim-desc{max-width:340px;font-size:var(--t-1);line-height:1.5;color:var(--mid)}
.claim-status select{width:auto;padding:7px 10px;font-size:var(--t-1)}

/* ==== BROKER SCREENS ==================================== */

/* submissions table */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
/* corners rounded on the cells, not by clipping — overflow:hidden here cut
   off the Start-renewal popover on rows near the table's bottom edge */
.tbl thead th:first-child{border-top-left-radius:var(--r-card)}
.tbl thead th:last-child{border-top-right-radius:var(--r-card)}
.tbl tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-card)}
.tbl tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-card)}
.tbl th{text-align:left;font-size:var(--t-1);font-weight:500;color:var(--pale);
  background:#fff;padding:14px 16px;border-bottom:1px solid var(--border)}
.tbl td{padding:15px 16px;border-top:1px solid var(--hairline);font-size:var(--t-2)}
/* broker client record (navy header + tabs) */
.crh{background:var(--navy);padding:26px 32px;color:var(--cream);position:relative}
.crh .back{font-size:var(--t-1);color:rgba(255,255,255,0.5);margin-bottom:10px;cursor:pointer;
  display:inline-block;text-decoration:none}
.crh .back:hover{color:var(--teal)}
.crh h2{font-size:var(--t-5);color:var(--cream);margin-bottom:4px;font-weight:500}
.crh .meta{font-size:var(--t-2);color:rgba(255,255,255,0.6)}
.cr-stat .v{font-size:var(--t-5);color:var(--cream)}
.cr-stat .l{font-size:var(--t-1);color:rgba(255,255,255,0.55);margin-top:3px;
  font-weight:400}
/* eight tabs on a narrow window scroll inside the bar rather than pushing
   the record sideways (10 Sep) */
.tabs{display:flex;border-bottom:1px solid var(--border);background:#fff;padding:0 28px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex-shrink:0}
.tab{padding:14px 18px;font-size:var(--t-2);color:var(--mid);cursor:pointer;
  border:none;border-bottom:2px solid transparent;transition:all 0.12s;
  background:none;font-family:var(--sans)}
.tab:hover{color:var(--charcoal)}
.tab:focus{outline:none}
/* a keyboard user still sees where they are, as a soft ground behind the
   tab, not a hard box that clipped the label */
.tab:focus-visible{outline:none;background:var(--teal-pale);border-radius:6px 6px 0 0}
.tab.on{color:var(--navy);border-bottom-color:var(--teal);font-weight:600}
.cr-body{background:#fff;padding:24px 28px;min-height:calc(100vh - 260px)}
.cr-pane{display:none}
.cr-pane.on{display:block}
.pr-note{margin-top:2px;font-size:var(--t-1);color:var(--pale)}
.tbl td.row-actions{text-align:right;white-space:nowrap}
.tbl td.row-actions .tbl-btn{margin-left:6px;margin-right:0}
.tbl td.when{white-space:nowrap}
/* broker tables breathe on the wide container */
.tbl td strong{white-space:nowrap}

/* ==== ANIMATION ================================== */

@keyframes mfade{from{opacity:0}to{opacity:1}}

/* error register (staff) */
.err-resolved{opacity:0.5}
.err-summary details summary{cursor:pointer;font-weight:500}
.err-tb{background:var(--paper);border-radius:var(--r-ctl);padding:12px;font-size:var(--t-1);
  line-height:1.5;overflow-x:auto;max-height:320px;white-space:pre-wrap}

.tbl-btn-primary{background:var(--teal);border-color:var(--teal);color:var(--navy);font-weight:600}
.tbl-btn-primary:hover{background:var(--teal-2);border-color:var(--teal-2)}

body.modal-open{overflow:hidden}

.q-done .tbl{opacity:.72}
.q-modal-ta{width:100%;padding:10px 12px;border:1px solid var(--field-border);
  border-radius:var(--r-ctl);font:inherit;font-size:var(--t-2);margin-top:8px}
.q-modal-who{font-size:var(--t-3) !important}
.row-link{color:var(--navy);text-decoration:none;font-weight:600;cursor:pointer}
.row-link:hover{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--teal-2);text-decoration-thickness:2px}
/* the row it sits in is the target, so the whole row answers the pointer
   and an arrow says where it goes, as the document rows already do */
/* the row highlights but does not claim to be clickable: the name is the
   target, and other cells carry their own buttons */
.tbl tbody tr:has(.row-link){transition:background 0.12s}
.tbl tbody tr:has(.row-link):hover{background:#fafaf7}

/* premium & renewal history strip */
/* always three columns: a lone year keeps a tile's width rather than
   stretching across the page, and three is the most there can be */
.prem-hist{display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin-top:4px}
.sum-tbl th.num, .sum-tbl td.num{text-align:right;white-space:nowrap}
.sum-h2{font-size:var(--t-2);font-weight:600;color:var(--charcoal);margin:28px 0 10px}
.sum-tbl tfoot td{border-top:2px solid var(--border);font-weight:600;
  background:var(--paper);padding:13px 16px}

.mfa-off{background:var(--warn-bg-2);color:var(--warn-ink-2);font-size:var(--t-1);font-weight:600;
  text-align:center;padding:8px 16px;line-height:1.5}

.fhint{font-size:var(--t-1);color:var(--pale);line-height:1.5;margin:-2px 0 7px}
.cov-text{font-size:var(--t-2);line-height:1.7;color:var(--mid);margin:0 0 16px}
.prem-card{background:var(--paper);border-radius:var(--r-card);padding:18px 20px}
.prem-card.on{background:var(--teal-pale)}
.prem-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.prem-top .yr{font-size:var(--t-1);font-weight:700;letter-spacing:0.08em;color:var(--mid)}
.prem-card .prem-v{font-size:var(--t-5);font-weight:600;color:var(--charcoal);
  margin:6px 0 14px;letter-spacing:-0.01em}

.pol-years .tab{text-decoration:none}
.pstat .mv{font-size:var(--t-1);margin-top:6px;font-weight:600}
.pstat .mv.up{color:var(--ok)}
.pstat .mv.dn{color:var(--clay)}
/* an unchanged premium is not bad news, so it is not red */
.pstat .mv.flat, .prem-card .mv.flat{color:var(--pale)}


/* client record header extras */
.cr-stat .v.urg{color:var(--gold)}

/* ==== PAGE-SPECIFIC ONE-OFFS ============================ */

.scard .pill.expired{margin-bottom:8px}
.sh-label-tight{margin-bottom:10px}
.sh-tight{margin-bottom:10px}
.crumb-here{color:var(--charcoal)}
.page-narrow{max-width:880px}
.page-narrow-sm{max-width:640px}
.page-narrow-xs{max-width:520px}
.tbl td.tbl-empty{color:var(--pale);text-align:center;padding:28px}
.err-where{margin:6px 0}
.mfa-note{font-size:var(--t-2);color:var(--mid);margin-bottom:14px}
a.btn.btn-block{display:block;text-align:center;text-decoration:none}
.login-card .meta-quiet{color:var(--pale)}
.pr-note-lead{margin:4px 0 10px}
/* the submitted / invalid-link outcome pages */
.outcome{text-align:center;padding-top:80px}
.outcome-ic{width:64px;height:64px;border-radius:50%;background:var(--teal-pale);
  color:var(--navy);display:flex;align-items:center;justify-content:center;
  font-size:30px;margin:0 auto 22px;border:2px solid var(--teal)}
.outcome h1{font-size:var(--t-5);font-weight:600;margin-bottom:10px}
.outcome p{color:var(--mid);max-width:460px;margin:0 auto 24px}
.outcome-bad{padding-top:90px}
.outcome-bad .outcome-ic{background:var(--danger-bg);color:var(--clay);border-color:#f3c3b7}
.outcome-bad h1{font-size:var(--t-5)}
.outcome-bad p{max-width:440px}

/* ==== UTILITIES ========================================== */

.hidden{display:none!important}
/* A file input behind a dropzone: out of sight but still focusable, so the
   dialog can be opened from the keyboard. display:none took it out of the
   tab order and the label cannot take focus. */
.sr-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* the cover page: the proposal line is the decision, so it reads as a
   panel rather than another table row */
.cover-prop{display:flex;align-items:flex-start;gap:18px;justify-content:space-between;
  border:1px solid var(--border);border-left:3px solid var(--teal-2);
  border-radius:var(--r-card);padding:16px 20px;background:#fff}
/* the buttons sit on the title line, not adrift in the card's middle
   against a two-line block */
.cover-prop .row-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-top:1px}
.pstat-warn .v{color:var(--clay)}
.rename-row{max-width:520px}
.rename-do{display:flex;gap:10px;align-items:center;margin-top:4px}
.rename-do input{flex:1}
.dropzone:focus-within{border-color:var(--teal-2);outline:2px solid var(--teal-2);
  outline-offset:2px}
.grow{flex:1}
.inline{display:inline}
.ta-r{text-align:right}
.span-all{grid-column:1/-1}
.mt-0{margin-top:0!important}
.mt-xs{margin-top:6px!important}
.mt-1{margin-top:12px!important}
.mt-2{margin-top:18px!important}
.mt-3{margin-top:20px!important}
.mt-4{margin-top:24px!important}
.mt-5{margin-top:36px!important}
.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:12px!important}
.mb-2{margin-bottom:18px!important}
.mb-3{margin-bottom:22px!important}

/* ==== RESPONSIVE: these override the files above; the files after
   this one carry their own media queries beside the rules they adjust ===== */

@media (max-width:860px){.prem-hist{grid-template-columns:1fr}}
@media (max-width:820px){.login-l{display:none}
  .login-r{flex:1}}
/* wide-nav trimming: drop the user's name, then the badge, before wrapping */
@media (max-width:1460px){.uname{display:none}}
@media (max-width:1280px){.tnav-badge{display:none}
  .tnav{padding:0 20px}
  .tnav-logo{margin-right:14px}
  .tnav-links a,.tnav-claim{padding:7px 10px}
  .acct-switch select{max-width:150px}
  .acct-switch{margin-left:4px}}
/* tablet: the bar is tight but everything is still reachable */
@media (max-width:1024px){.tnav{padding:0 16px}
  .tnav-logo{margin-right:12px}
  .tnav-links a,.tnav-claim{padding:7px 9px;font-size:var(--t-1)}
  .uname{display:none}
  .uchip-out{padding:6px 10px;font-size:var(--t-1)}}
/* tablet / mobile */
@media (max-width:640px){.tnav{padding:0 16px;gap:10px;height:58px}
  /* the bar was 19px wider than a phone: a smaller mark and
     tighter controls; the links still scroll sideways inside it */
  .tnav-logo{margin-right:0}
  .tnav-logo img{height:20px}
  .tnav-user{gap:6px;flex-shrink:0}
  .tnav-claim{padding:6px 4px;font-size:var(--t-1)}
  .uchip .uav{width:30px;height:30px}
  .tnav-badge, .uname{display:none}
  .tnav-links{gap:2px}
  .tnav-links a{padding:7px 9px;font-size:var(--t-1)}
  .uchip-out{padding:6px 10px}
  .wrap{padding:24px 16px 90px}
  .pagehead h1{font-size:var(--t-5)}
  .section{padding:20px 16px}
  .section-title-row{flex-direction:column;align-items:flex-start;gap:8px}
  .cellgrid{grid-template-columns:1fr}
  .wiz-nav{flex-wrap:wrap;gap:10px}
  .wiz-nav-r{width:100%;margin-left:0}
  .wiz-nav-r .btn{flex:1;text-align:center;justify-content:center}
  .wiz-saved{order:-1;width:100%}
  .review-actions{flex-wrap:wrap}
  .review-actions .btn{flex:1;justify-content:center}
  .review-actions .btn-ghost:first-child{margin-right:0}
  .login-r{flex:1;padding:32px 22px}
  .pdf-frame iframe{height:60vh}}
@media (max-width:900px){.page{padding:28px 20px}
  .site-foot-in{padding:16px 20px 22px}
  .flashes{padding:20px 20px 0}
  .split{flex-direction:column;height:auto}
    .pd-stats{grid-template-columns:1fr 1fr}
  .docs-head{flex-direction:column;align-items:flex-start;gap:14px}
  .docs-search{width:100%}
  .docs-search input{flex:1;width:auto}
  .action-card{flex-direction:column;align-items:flex-start;gap:14px}
  .fld-grid{grid-template-columns:1fr}}


/* ---- document pre-fill ------------------------------------------------ */
.pf-wrap{position:relative}
.pf-wrap input[type=text],.pf-wrap textarea,.pf-wrap select{border-color:var(--teal-2);background:var(--teal-pale)}
.pf-wrap.pf-edited input[type=text],.pf-wrap.pf-edited textarea,.pf-wrap.pf-edited select{border-color:var(--border);background:#fff}
.pf-mark{font-size:var(--t-1);color:var(--teal-2);font-weight:600;margin-top:4px;letter-spacing:.01em}
.pf-wrap.pf-edited .pf-mark{display:none}
td.pf-wrap .pf-mark{margin-top:2px;font-size:var(--t-1)}
.choice .pf-mark{margin:0 0 0 8px}
.pf-note{background:var(--warn-bg);border-left:3px solid var(--warn);color:var(--warn-ink);padding:10px 14px;
  border-radius:var(--r-ctl);font-size:var(--t-2);margin:6px 0 12px;line-height:1.5}
.pf-offer{border:1px solid var(--border);border-radius:var(--r-card);padding:14px 18px;margin:0 0 18px;background:#fff}
.pf-offer summary{cursor:pointer;font-weight:600;color:var(--charcoal);font-size:var(--t-2)}
.pf-offer p{font-size:var(--t-2);color:var(--mid);margin:10px 0}
.pf-offer-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pf-consent{font-size:var(--t-1);color:var(--pale)}
.pf-unmatched{margin-top:8px;font-size:var(--t-2)}
.pf-unmatched ul{margin:6px 0 0 18px}
.pf-progress{max-width:640px}
.pf-stages{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:8px}
.pf-stages li{padding:10px 14px;border-radius:var(--r-ctl);background:var(--paper);color:var(--mid);font-size:var(--t-2)}
.pf-stages li.on{background:var(--teal-pale);color:var(--charcoal);font-weight:600}
.pf-stages li.done{color:var(--charcoal)}
.pf-stages li.done::before{content:"\2713  ";color:var(--teal-2)}
.pf-status{color:var(--mid);font-size:var(--t-2);margin:10px 0 0}
.pf-failed{background:var(--danger-bg);border-left:3px solid var(--clay);color:var(--clay);padding:10px 14px;border-radius:var(--r-ctl)}
.pf-summary{margin-top:14px;padding:12px 16px;background:var(--paper);border-radius:var(--r-ctl);font-size:var(--t-2)}
.pf-summary details{margin-top:6px}
.pf-summary ul{margin:6px 0 0 18px}

.bk-send{margin-top:18px}
.bk-send textarea{width:100%;margin-top:6px}
.bk-tier3{margin:6px 0 10px}
#wizForm input:disabled,#wizForm textarea:disabled,
#wizForm input[readonly]{background:var(--paper);color:var(--pale)}
/* the signing date is filled at submit: it is read, not edited, so it
   takes no focus ring */
#wizForm input[readonly]{cursor:default}
#wizForm input[readonly]:focus{border-color:var(--field-border);box-shadow:none}

.upload-row-meta{display:flex;align-items:center;gap:10px}
.upload-row-meta .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-row-meta select{width:200px}
.upload-row-meta input[type=number]{width:96px}
/* Take one back out without starting the selection over. Given its own
   outline: as a bare grey glyph at the end of a full row it was not read
   as a control at all. */
.upload-row-rm{background:#fff;border:1px solid var(--border);color:var(--mid);
  font-size:var(--t-3);line-height:1;cursor:pointer;padding:4px 10px;
  font-family:inherit;border-radius:var(--r-ctl);flex-shrink:0}
.upload-row-rm:hover{border-color:var(--clay);color:var(--clay)}
/* Add a policy: two steps on one page */
.pa-form .section{padding:26px 28px}
.pa-nav{display:flex;gap:12px;align-items:center;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--hairline)}
.pa-form .dropzone{margin-top:4px}
.pdoc-read{margin-top:12px}
.pdoc-read-btn{background:var(--teal-pale);border:1px solid var(--teal-2);
  color:var(--navy);font-family:inherit;font-size:var(--t-2);font-weight:500;
  padding:9px 16px;border-radius:var(--r-ctl);cursor:pointer;text-align:left}
.pdoc-read-btn:hover{background:var(--teal-light)}
.pdoc-read-btn:disabled{opacity:0.6;cursor:default}
.pdoc-read-note{font-size:var(--t-1);color:var(--pale);margin-top:8px;line-height:1.5}
.pdoc-read-note:empty{margin-top:0}
.pf-warn{margin-top:6px;color:var(--warn-ink)}

/* change-password page: the sign-in card's form, inside the app chrome */
.pw-card{max-width:440px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px}
.pw-card .actions{position:static;display:flex;gap:10px;justify-content:flex-end;margin-top:6px;padding:0;background:transparent;border:0;box-shadow:none}
a.uchip{text-decoration:none;border-radius:var(--r-ctl);padding:4px 8px;margin:-4px -8px}
a.uchip:hover{background:rgba(255,255,255,0.08)}

.qr-manual{margin:12px 0 4px;font-size:var(--t-2);color:var(--mid);max-width:440px}
.qr-manual summary{cursor:pointer;color:var(--navy);font-weight:500}
.qr-manual p{margin:8px 0}
/* a signed PDF's fingerprint on the review row: the whole hash, copyable in one click (signing evidence, 15 Sep) */
.fp-hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;user-select:all}
.qr-key{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-3);letter-spacing:.06em;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-ctl);padding:8px 12px;user-select:all}


/* a button that has been pressed and is waiting on the server */
.btn.is-busy,.btn-gold.is-busy,.btn-sm.is-busy,.tbl-btn.is-busy,.uchip-out.is-busy{
  opacity:.65;cursor:progress;pointer-events:none}

.docs-search-inline{margin:0 0 12px}
.docs-search-inline input{flex:0 1 320px;min-width:0}

.crh-title{display:flex;align-items:center;justify-content:space-between;gap:24px}
.crh-title h2{margin:0}
/* one action beside the name; the invitation's state lives on the person
   in Contacts, not parked in the header forever */
.crh-do{display:flex;align-items:center;gap:10px;position:relative;flex-shrink:0}
.crh-do .unlock-form{right:0}
/* Contacts: what is true of this person's access, and what to do about it */
.access-note{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:640px;margin-top:12px;padding:14px 16px;background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--r-card)}
.access-what{font-size:var(--t-1);line-height:1.55;color:var(--mid)}
.access-what strong{color:var(--charcoal);font-weight:600}
.access-do{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn-sm-go{background:var(--teal);border-color:var(--teal);color:var(--navy);font-weight:600}

.bench-head .dm{margin-top:2px}
.bench-head .btn-gold[disabled]{opacity:.45;cursor:default}
.tbl.bench td{vertical-align:middle}
.route-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.route-pick{font-family:var(--sans);font-size:var(--t-1);padding:6px 28px 6px 10px;
  border:1px solid var(--border);border-radius:var(--r-ctl);background:#fff;color:var(--charcoal)}
.route-doc{display:inline-flex;align-items:center;gap:8px}
.route-doc .btn-sm{cursor:pointer}
.bench-pill-choose{background:var(--paper);color:var(--mid)}
.bench-pill-ready{background:var(--ok-bg);color:var(--ok)}
.bench-pill-check{background:var(--warn-bg);color:var(--warn-ink)}
.bench-pill-reading{background:var(--teal-pale);color:var(--navy)}
.send-list{list-style:none;margin:0 0 16px;padding:0}
.send-list li{padding:9px 0;border-bottom:1px solid var(--hairline);font-size:var(--t-2)}
.send-list li .dm{display:block;margin-top:2px}

/* Tick lists read as lists, not clouds of pills. Pills suit a No / Yes
   row; a question with two or more tick boxes lays them out one per line,
   as the paper form does, and a very long one (Cyber question 13) in two
   columns. Each tick box is its own label directly inside.q, so the
   question itself is the grid and everything else spans it. */
.q:has(> label.choice:nth-of-type(2)){display:grid;grid-template-columns:minmax(0,1fr);
  column-gap:28px;row-gap:2px;align-items:start}
.q:has(> label.choice:nth-of-type(2)) > :not(.choice){grid-column:1/-1}
.q:has(> label.choice:nth-of-type(2)) > .qtext{margin-bottom:12px}
.q:has(> label.choice:nth-of-type(2)) > .subq-web{margin:2px 0 8px}
.q:has(> label.choice:nth-of-type(2)) > .choice{border:none;border-radius:0;background:none;
  padding:6px 0;font-size:var(--t-2);align-items:flex-start;line-height:1.45}
.q:has(> label.choice:nth-of-type(2)) > .choice input{margin-top:3px}
.q:has(> label.choice:nth-of-type(2)) > .choice:hover{border-color:transparent}
.q:has(> label.choice:nth-of-type(12)){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.q:has(> label.choice:nth-of-type(12)){grid-template-columns:1fr}}

/* ==== THE CLIENT'S POLICY PAGE (templates/proposals/policy_detail.html) ===== */
/* One column: figures, the premium history led by the
   broker's sentence, documents, claims as one card, the cover type as a
   footnote. Scoped to.pp so the short names stay here. */
/* no width of its own: the standard.page container, so the title sits
   where it does on the dashboard */
.pp-crumb{font-size:var(--t-1);color:var(--mid);margin-bottom:14px}
.pp-crumb a{color:var(--mid);text-decoration:none}
.pp-crumb a:hover{color:var(--navy)}
.pp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pp-head h1{font-size:var(--t-6);font-weight:500;color:var(--charcoal);margin:0}
.pp-sub{font-size:var(--t-2);color:var(--mid);margin:6px 0 26px}
.pp .fig .l{font-size:var(--t-1);color:var(--pale);margin-bottom:6px;font-weight:500}
.pp .fig .v{font-size:var(--t-4);color:var(--charcoal);letter-spacing:-0.01em}
.pp .fig .s{font-size:var(--t-1);color:var(--mid);margin-top:4px}
/* the one figure that carries the state looks like it: the same colours
   as the status pill */
.pp .fig.when.teal{background:var(--teal-pale);border-color:var(--teal-2)}
.pp .fig.when.amber{background:var(--warn-bg);border-color:var(--warn)}
.pp .fig.when.amber .s{color:var(--warn-ink-2);font-weight:500}
.pp .fig.when.clay{background:var(--danger-bg);border-color:var(--clay)}
.pp .fig.when.clay .v,.pp .fig.when.clay .s{color:var(--clay)}
.pp .hlabel{display:block;font-size:var(--t-1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pale);margin:0 0 10px}
.pp .hrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;list-style:none;cursor:pointer}
.pp .hrow::-webkit-details-marker{display:none}
.pp .hrow .hlabel{margin:0}
.pp .hlink{font-size:var(--t-1);color:var(--navy);font-weight:500}
.pp .hrow:hover .hlink{text-decoration:underline}
.pp-docs[open] .hlink{color:var(--mid)}
.pp-upload{margin-bottom:14px}
.pp-sec{margin-bottom:34px}
.ptbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--border);border-radius:var(--r-card)}
.ptbl th{text-align:left;font-size:var(--t-1);font-weight:500;color:var(--pale);padding:12px 16px;border-bottom:1px solid var(--border)}
.ptbl td{padding:14px 16px;border-top:1px solid var(--hairline);font-size:var(--t-2);vertical-align:top}
.ptbl tbody tr:first-child td{border-top:none}
.ptbl td.yr{font-weight:600;white-space:nowrap}
.ptbl td.yr a{color:var(--navy);text-decoration:none}
.ptbl td.yr a:hover{text-decoration:underline}
.ptbl td.amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.ptbl td.chg{white-space:nowrap}
.ptbl td.chg.up{color:var(--clay)}
.ptbl td.chg.dn{color:var(--ok)}
.ptbl td.notes{color:var(--mid);font-size:var(--t-1);line-height:1.55}
.ptbl td.notes ul{margin:0;padding-left:16px}
.ptbl tr.on td{background:var(--teal-pale)}
.pp .dl .dd{font-size:var(--t-1);color:var(--mid);white-space:nowrap}
.pp-claims{margin-bottom:12px}
.claim-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:18px 22px 20px}
.claim-none{font-size:var(--t-2);color:var(--pale);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--hairline)}
.claim-row{display:flex;align-items:center;gap:28px}
.claim-row .btn{margin-left:auto;flex-shrink:0}
.claim-card .ct{flex:1;min-width:0;max-width:66ch}
@media (max-width:700px){.claim-row{flex-direction:column;align-items:flex-start}}
.claim-card .t1{font-size:var(--t-3);font-weight:600;color:var(--charcoal)}
.claim-card .t2{font-size:var(--t-1);color:var(--mid);margin-top:4px;line-height:1.55}
.claim-card .t2 a{color:var(--navy)}
.pp .act{display:inline-block;font:500 var(--t-1)/1 var(--sans);color:var(--navy);background:#fff;border:1px solid var(--border);
  border-radius:var(--r-ctl);padding:9px 14px;white-space:nowrap;text-decoration:none;cursor:pointer}
.pp .act:hover{border-color:var(--navy)}
.pp .act.main{background:var(--navy);color:#fff;border-color:var(--navy)}
.foot-note{font-size:var(--t-1);color:var(--pale);line-height:1.6;max-width:72ch}
.foot-note b{color:var(--mid);font-weight:600}
@media (max-width:760px){.pp .figs{grid-template-columns:1fr 1fr}.ptbl td.notes{display:none}
  .claim-card{flex-direction:column;align-items:flex-start}}

/* ==== ROUND-TWO UX PAGES (kept without the visual system, 2 Oct) ===== */
/* a text button: no box, for "look at this" beside a filled "do this" */
.btn-text{display:inline-flex;align-items:center;height:40px;padding:0;background:none;border:none;
  color:var(--mid);font-family:var(--sans);font-size:var(--t-2);font-weight:500;cursor:pointer;
  text-decoration:none;white-space:nowrap}
.btn-text:hover{text-decoration:underline;color:var(--navy)}
.btn-compact{display:inline-block;background:#fff;border:1px solid var(--border);color:var(--navy);
  font-size:var(--t-1);font-weight:600;padding:8px 14px;border-radius:var(--r-ctl);text-decoration:none;cursor:pointer}
/* broker client record (UI-17, B3-1): a navy band whose content sits in
   the page's own container, the position in two lines of words, then the
   tabs on the page itself with no band under them */
.crh{background:var(--navy);color:#fff}
.crh-in{max-width:1280px;margin:0 auto;padding:var(--s-8) 56px var(--s-6)}
.crh .back{font-size:var(--t-1);color:var(--on-navy-2);margin-bottom:var(--s-3);cursor:pointer;
  display:inline-block;text-decoration:none}
.crh .back:hover{color:#fff}
.crh h1{font-size:var(--t-6);color:#fff;margin:0;font-weight:600;letter-spacing:-.01em}
.crh .meta{font-size:var(--t-2);color:var(--on-navy-2);margin-top:var(--s-1)}
.crh-pos{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--navy-line)}
.crh-pos-cover{font-size:var(--t-3);font-weight:500;color:#fff;line-height:1.5}
.crh-attn{color:#f3b9a7}
.crh-attn-do{height:auto;margin-left:var(--s-3);color:var(--teal-300);font-size:var(--t-2)}
.crh-attn-do:hover{color:#fff}
.crh-pos-out{font-size:var(--t-2);color:var(--on-navy-2);margin-top:var(--s-1)}
.cr-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);margin-bottom:var(--s-4)}
.cr-lead{font-size:var(--t-2);color:var(--mid)}
.cr-quiet{font-size:var(--t-1);color:var(--pale)}
.cr-foot{margin-top:var(--s-4)}
.cr-people-acts{display:flex;gap:var(--s-4);align-items:center}
.cr-people-acts .btn-text{height:auto;font-size:var(--t-1)}
.cr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s-4)}
.kv-card-h{font-size:var(--t-1);font-weight:600;color:var(--pale);padding:12px 0 4px}
.cr-access{max-width:480px}
.route-lbl{margin:0 0 4px}
/* the activity log: grouped by day, the person first */
.act-day{font-size:var(--t-1);font-weight:600;color:var(--pale);margin:var(--s-6) 0 var(--s-2)}
.act-day:first-child{margin-top:0}
.act-row{display:flex;gap:var(--s-4);padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--t-2);color:var(--mid)}
.act-time{color:var(--pale);font-size:var(--t-1);width:7ch;flex-shrink:0;padding-top:2px;font-variant-numeric:tabular-nums}
.act-text b{color:var(--charcoal);font-weight:600}

.cr.page{padding-top:0}
.cr .tabs{background:transparent;padding:0;margin-top:24px}
.cr .cr-body{background:transparent;padding:24px 0 0;min-height:0}
/* ==== THE BROKER'S TO DO PAGE (proposals/todo.py) =================== */
/* Rebuilt 2 Oct to the second independent review: a dated headline
   sentence, one navy panel for the one earned item, sections in urgency
   order on a quiet surface, the client named once, the product in bold,
   the date on every fact, one filled button on the page, and on a quiet
   morning no button at all. No pills: the second line says the state. */
.td-h{margin-bottom:var(--s-8)}
.td-date{font-size:var(--t-1);color:var(--pale);margin-bottom:var(--s-2)}
.td-headline{font-size:28px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--charcoal);margin:0}
.td-undo{display:flex;gap:16px;align-items:center;justify-content:space-between;
  border:1px solid var(--border);border-radius:var(--r-ctl);background:#fff;padding:12px 16px;margin-bottom:var(--s-6)}
.td-undo b{display:block;font-weight:600;font-size:var(--t-2);color:var(--charcoal)}
.td-undo span{display:block;font-size:var(--t-1);color:var(--mid);margin-top:2px}
.td-sec{margin-bottom:var(--s-8)}
.td-sh{font-size:var(--t-2);font-weight:600;color:var(--charcoal);margin:0 0 var(--s-3)}
.td-sh span{font-weight:400;color:var(--pale)}
.td-list{background:#fff;border:1px solid var(--border);border-radius:var(--r-card)}
.td-row{display:flex;align-items:center;gap:var(--s-6);padding:var(--s-4) var(--s-6);
  border-top:1px solid var(--border);text-decoration:none;color:inherit}
.td-list > .td-row:first-child{border-top:none}
a.td-row:hover{background:var(--paper)}
.td-txt{flex:1;min-width:0}
.td-t1{font-size:var(--t-2);color:var(--mid);line-height:1.4}
.td-t1 b{font-weight:600;color:var(--charcoal)}
.td-t2{font-size:var(--t-1);color:var(--pale);margin-top:2px}
.td-link{color:var(--charcoal);font-weight:600;text-decoration:none}
.td-link:hover{text-decoration:underline}
.td-chev{width:16px;height:16px;flex-shrink:0;font-size:0;background:var(--pale);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
.td-row .btn-text{height:auto;font-size:var(--t-1)}
.td-foot{display:flex;gap:var(--s-4);align-items:baseline;flex-wrap:wrap;font-size:var(--t-1);color:var(--pale);
  padding-top:var(--s-6);border-top:1px solid var(--border)}
.td-changes summary{cursor:pointer;color:var(--pale);text-decoration:underline;text-underline-offset:3px;list-style:none;display:inline}
.td-changes summary::-webkit-details-marker{display:none}
.td-changes summary:hover{color:var(--navy)}
.td-changes[open]{display:block;width:100%;background:var(--paper);border-radius:var(--r-ctl);padding:12px 16px;margin-top:var(--s-3)}
.td-changes[open] summary{display:block;margin-bottom:8px;text-decoration:none;font-weight:500;color:var(--charcoal)}
.td-changes p{margin:0;line-height:1.6;color:var(--mid)}
.td-changes p + p{margin-top:4px}
.td-changes p.bad{color:var(--clay)}
/* the Record outcome modal: one choice per line, the first a link */
.outcome-choices{display:grid;gap:var(--s-2)}
.outcome-choice{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-ctl);padding:12px 14px;font-family:var(--sans);cursor:pointer;text-decoration:none;color:inherit}
.outcome-choice:hover{background:var(--paper)}
.outcome-choice b{display:block;font-size:var(--t-2);font-weight:600;color:var(--charcoal)}
.outcome-choice span{display:block;font-size:var(--t-1);color:var(--mid);margin-top:2px;line-height:1.5}
.modal-note{font-size:var(--t-1);color:var(--mid);margin:0 0 14px;line-height:1.5}
/* the broker's review page: one proposal, the PDF, and what to do with it */
.rv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-6);margin-bottom:var(--s-6)}
.rv-sub{font-size:var(--t-2);color:var(--mid);margin:6px 0 0}
.rv-acts{display:flex;align-items:center;gap:var(--s-3);flex-shrink:0}
.rv-note{font-size:var(--t-1);color:var(--warn-ink);background:var(--warn-bg);border-radius:var(--r-ctl);padding:10px 14px;margin:0 0 var(--s-4)}
.rv-pdf iframe{height:72vh}
.rv-under{display:flex;align-items:center;gap:var(--s-6);margin:var(--s-3) 0 var(--s-8);font-size:var(--t-1);color:var(--pale)}
@media (max-width:760px){.rv-head{flex-direction:column}}

/* the one fact this page was opened for */
.pp-task{font-size:var(--t-2);color:var(--charcoal);margin:-14px 0 26px;padding:12px 16px;background:var(--warn-bg);border-radius:var(--r-ctl)}
.pp-task a{color:var(--warn-ink);font-weight:600}
.pp-task.pp-ended{background:var(--danger-bg);color:var(--clay)}
.pp .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:34px}
.pp .fig{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s-4)}
.pp .fig .l{font-size:var(--t-1);color:var(--pale);margin-bottom:6px;font-weight:500}
.pp .fig .v{font-size:var(--t-4);color:var(--charcoal);letter-spacing:-0.01em}
.pp .fig .s{font-size:var(--t-1);color:var(--mid);margin-top:4px}
/* the one figure that carries the state looks like it: the same colours
   as the status pill */
.pp .fig.when.teal{background:var(--teal-pale);border-color:var(--teal-2)}
.pp .fig.when.amber{background:var(--warn-bg);border-color:var(--warn)}
.pp .fig.when.amber .s{color:var(--warn-ink-2);font-weight:500}
.pp .fig.when.clay{background:var(--danger-bg);border-color:var(--clay)}
.pp .fig.when.clay .v,.pp .fig.when.clay .s{color:var(--clay)}
/* the claim page (C9): the number first, three plain lines, one quiet button */
.claim-lead{font-size:var(--t-3);color:var(--mid);margin:0 0 var(--s-6)}
.claim-phone{display:inline-block;font-size:32px;font-weight:600;color:var(--ok);text-decoration:none;letter-spacing:-.01em;line-height:1.2}
.claim-phone:hover{text-decoration:underline}
.claim-mail{font-size:var(--t-2);color:var(--mid);margin:var(--s-2) 0 var(--s-8)}
.claim-mail a{color:var(--ok);text-decoration:none;font-weight:500}
.claim-steps{margin:0 0 var(--s-8);padding-left:22px;max-width:70ch}
.claim-steps li{font-size:var(--t-2);color:var(--charcoal);line-height:1.6;margin-bottom:var(--s-2)}
.claim-or{font-size:var(--t-2);color:var(--mid);margin:0 0 var(--s-3)}
/* documents by cover: a heading inside the surface, earlier
   versions behind one line */
.doc-group{margin-bottom:var(--s-4)}
.doc-group-h{font-size:var(--t-1);font-weight:600;color:var(--pale);padding:12px 18px 4px}
.doc-older summary{cursor:pointer;font-size:var(--t-1);color:var(--mid);padding:10px 18px;list-style:none}
.doc-older summary::-webkit-details-marker{display:none}
.doc-older summary:hover{color:var(--navy)}
.doc-older[open] summary{border-bottom:1px solid var(--border)}
/* a plain row with the box and a line above it (UI-23); it colours only
   when Next is pressed without it */
.ack-check .ack-done{font-style:normal;color:var(--ok);font-weight:600;margin-left:6px}
.ack-check.ack-miss{color:var(--clay)}
.ack-check.ack-miss input{border-color:var(--clay)}
.ack-note{display:block;flex:0 0 100%;padding-left:30px;font-size:var(--t-1);color:var(--clay);font-weight:500}
/* the PDF cover's kicker and title are not the web page's heading */
.prose-intro .kicker,.prose-intro .kicker2,.prose-intro .title{display:none}
/* the question a change request names */
.q-flagged{background:var(--warn-bg);margin:0 -16px;padding-left:16px;padding-right:16px;border-radius:var(--r-ctl)}
.q-flag{font-size:var(--t-1);color:var(--warn-ink);margin:-4px 0 10px;line-height:1.5}
.changes-go{font-weight:600;color:var(--warn-ink);margin-left:6px}

.cl-top{margin-bottom:24px;align-items:center;display:flex;justify-content:space-between}
.cl-top .greet{margin-bottom:0}
.td-attn{color:var(--clay)}
.pe-remove{margin-right:auto;color:var(--clay)}
.section-title:empty{display:none}
.sum-lead{font-size:var(--t-2);color:var(--mid);margin:0 0 16px}
.sum-tbl td{white-space:nowrap}
.sum-tbl td:first-child,.sum-tbl td:nth-child(2){white-space:normal}
.wiz-dot.done{background:var(--teal-2);border-color:var(--teal-2);color:var(--navy)}
.tbl td.num{font-variant-numeric:tabular-nums}

/* ---- To do as a list of actions (3 Oct) ---- */
.td-sh-caps{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.04em;color:var(--pale)}
.td-sh-caps span{text-transform:none;letter-spacing:0}
.td-row .btn-primary{height:auto;padding:7px 14px;font-size:var(--t-1)}
.td-remark{font-size:var(--t-1);color:var(--pale);white-space:nowrap}
.td-list-foot{padding:var(--s-3) var(--s-6);border-top:1px solid var(--border);font-size:var(--t-1);color:var(--pale)}
.td-list-foot a{color:var(--ok)}
.td-list > .td-list-foot:first-child{border-top:none}

/* ---- the form: steps by name beside it, the strip before step 1 (3 Oct) ---- */
.wiz-before{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0 0 22px;padding:18px 22px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-card)}
.wiz-before h3{font-size:var(--t-2);font-weight:600;margin:0 0 6px}
.wiz-before p,.wiz-before ul{margin:0;color:var(--mid);font-size:var(--t-1)}
.wiz-before ul{padding-left:18px}
.wiz-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.wiz-rail{position:sticky;top:20px}
.wiz-rail-t{font-size:var(--t-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pale);margin:0 0 10px}
.wiz-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wiz-step{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;width:100%;text-align:left;
  padding:7px 8px;border:1px solid transparent;border-radius:6px;background:none;font:inherit;font-size:var(--t-1);
  color:var(--mid);cursor:pointer}
.wiz-step:hover{background:#fff}
.wiz-step .wiz-dot{width:20px;height:20px;font-size:11px;display:grid;place-items:center;transition:none}
.wiz-step.on{background:#fff;border-color:var(--border);color:var(--charcoal);font-weight:600}
.wiz-step.on .wiz-dot{background:var(--navy);border-color:var(--navy);color:#fff}
.wiz-step.done .wiz-dot{background:var(--teal-pale);border-color:var(--teal-2);color:var(--navy)}
.wiz-step-t small{display:block;font-weight:400;color:var(--pale);font-size:12px}
.wiz-eta{margin-top:14px;font-size:var(--t-1);color:var(--pale)}
.wiz-main{min-width:0}
.wiz-main .wiz-head{display:none}
@media (max-width:900px){
  .wiz-layout{grid-template-columns:1fr}
  .wiz-rail{display:none}
  .wiz-main .wiz-head{display:block}
  .wiz-before{grid-template-columns:1fr;gap:14px}
}

/* ---- review: the answers by section (3 Oct) ---- */
.rv{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:6px 26px 10px;margin-bottom:24px}
.rv-sec{margin-bottom:var(--s-8);padding:18px 0;border-top:1px solid var(--border)}
.rv-sec:first-child{border-top:none}
.rv-h{font-size:var(--t-3);font-weight:600;margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rv-h a{font-size:var(--t-1);font-weight:500;color:var(--ok)}
.rv-dl dt .n{color:var(--teal-2);font-weight:700}

/* the signature was cleared because an answer changed after it (3 Oct) */
.sig-resign{margin-top:8px;font-size:var(--t-1);color:var(--warn-ink);background:var(--warn-bg);border-radius:var(--r-ctl);padding:8px 10px}

/* ---- change requests: the ticked questions (6 Oct) ---- */
.wiz-ask{display:inline-block;background:var(--warn-bg);color:var(--warn-ink);font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.cq-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.cq{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:6px 26px 10px}
.cq-sec{padding:16px 0;border-top:1px solid var(--border)}
.cq-sec:first-child{border-top:none}
.cq-sec h3{font-size:var(--t-2);font-weight:600;margin:0 0 8px}
.cq-row{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);gap:8px 16px;align-items:start;padding:7px 0;font-size:var(--t-1);cursor:pointer;border-radius:6px}
.cq-row:has(input:checked){background:var(--warn-bg);margin:0 -12px;padding:7px 12px}
.cq-row input{margin-top:2px;width:17px;height:17px;accent-color:var(--navy)}
.cq-row .q{color:var(--mid)}
.cq-row .q .n{color:var(--teal-2);font-weight:700}
.cq-row:has(input:checked) .q{color:var(--charcoal)}
.cq-row .a{color:var(--charcoal);overflow-wrap:anywhere}
.cq-row .a .miss{color:var(--warn-ink)}
.cq-side{position:sticky;top:20px;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:18px 20px}
.cq-side h3{margin:0 0 6px;font-size:var(--t-2);font-weight:600}
.cq-side .picked{font-size:var(--t-1);color:var(--mid);margin:0 0 14px}
.cq-side textarea{min-height:110px}
.cq-side .hint{font-size:12.5px;color:var(--pale);margin-top:12px}
.cq-side .acts{display:flex;gap:8px;margin-top:14px;align-items:center}
.rv-diff{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 16px;font-size:var(--t-1);align-items:start}
.rv-diff .h{font-size:11px;font-weight:600;color:var(--pale);text-transform:uppercase;letter-spacing:.04em}
.rv-diff .was{color:var(--pale);text-decoration:line-through}
.rv-diff .same{color:var(--pale)}
@media (max-width:900px){.cq-layout{grid-template-columns:1fr}.cq-side{position:static}.cq-row{grid-template-columns:24px 1fr}.cq-row .a{grid-column:2}}

/* ---- extra questions (6 Oct) ---- */
.xq{background:var(--teal-pale);border:1px solid var(--teal-2);border-radius:var(--r-card);padding:14px 16px;margin-top:14px}
.xq-h{margin:0 0 10px;font-size:var(--t-2);font-weight:600}
.xq-row{display:grid;grid-template-columns:minmax(0,1fr) 190px 28px;gap:10px;align-items:center;margin-bottom:8px}
.xq-row-kept{grid-template-columns:34px minmax(0,1fr) 190px 28px;font-size:var(--t-1)}
.xq-tag{color:var(--teal-2);font-weight:700}
.xq-text{color:var(--charcoal)}
.xq-kind{color:var(--pale)}
.xq-row input[type=text],.xq-row select{width:100%;padding:8px 11px;font-size:var(--t-1)}
.xq-rm{background:none;border:0;color:var(--pale);font-size:18px;cursor:pointer;line-height:1}
.xq-rm:hover{color:var(--clay)}
.xq-add{margin-top:4px}
.xq-page .xq{margin-top:0}
.xq-page .actions{margin-top:18px}
@media (max-width:700px){.xq-row,.xq-row-kept{grid-template-columns:1fr}}

/* ---- who handles a client (6 Oct) ---- */
.hb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.hb select{width:auto;max-width:420px;padding:8px 32px 8px 11px;font-size:var(--t-1)}
.hb .dm{flex-basis:100%}

/* ---- whose clients: the To do's Mine / Everyone, the directory's name ---- */
.td-who{margin-left:14px;display:inline-flex;gap:10px}
.td-who b{font-weight:600;color:var(--charcoal)}
.td-who a{color:var(--pale);text-decoration:none}
.td-who a:hover{color:var(--navy);text-decoration:underline}
.td-broker{font-size:var(--t-1);color:var(--pale);font-weight:400;margin-left:8px}
.site-foot-links{display:inline-flex;gap:18px}

/* ---- the Brokerage page ---- */
.bk .section{margin-bottom:26px}
.bk .section-title{margin-bottom:12px}
.bk .section-note{margin:-6px 0 14px}
.bk-preview{font-size:var(--t-1);color:var(--pale);margin:4px 0 0}
.bk-table{width:100%;border-collapse:collapse}
.bk-table th{text-align:left;font-size:var(--t-1);font-weight:500;color:var(--pale);padding:0 8px 6px 0}
.bk-table td{padding:0 8px 10px 0;vertical-align:middle}
.bk-table td input{width:100%}
.bk-table td:nth-child(3){min-width:170px}
.bk-email{font-size:var(--t-1);color:var(--mid);white-space:nowrap}
.bk-acts{margin-top:6px}
@media (max-width:640px){.bk-table thead{display:none}.bk-table tr{display:grid;gap:6px;margin-bottom:16px}.bk-table td{padding:0}}