/* ============================================================
   Loveday client portal - the design system in one file.
   Palette and metrics follow Rob's prototype (demo.html) and the
   Loveday site tokens. Rules live in labelled sections; add new
   rules to their section, never to the end of the file.
   ============================================================ */

/* ==== 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 (Steve, 10 Sep). */
  --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;

  /* 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 (found at 716px, 10 Sep). */
.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 */
.wrap{max-width:860px;margin:0 auto;padding:36px 24px 80px}
.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 (Steve, 7 Sep). 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 (found 8 Sep) */
.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}
.pill.draft{background:var(--paper);color:var(--mid)}
.pill.submitted{background:var(--ok-bg);color:var(--ok)}
/* forms hub */
.sh-label{font-size:var(--t-3);
  font-weight:600;
  color:var(--navy);
  margin-bottom:14px}
.pill.not_started{background:var(--paper);color:var(--mid)}
.pill.in_progress{background:var(--warn-bg);color:var(--warn-ink-2)}
.pill.changes_requested{background:var(--warn-bg-2);color:var(--warn-ink-2)}
.pill.renewal_open{background:var(--teal-pale);color:var(--navy)}
/* 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}}
.hub-request{margin-top:18px;font-size:var(--t-1);color:var(--pale)}
.hub-request a{color:var(--navy)}
/* ============================================================
   v2 Phase 1 — prototype-faithful layer.
   Class names, metrics, and colours ported from Rob'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 (Steve, 1 Sep). 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}
.sh-link{font-size:var(--t-1);color:var(--navy);text-decoration:none;cursor:pointer;font-weight:500}
.sh-link:hover{color:var(--navy-mid)}
/* status badges (policy states share the .pill component) */
.pill.expired{background:var(--danger-bg);color:var(--clay)}
.pill.renewing{background:var(--teal-pale);color:var(--navy)}
.pill.current{background:var(--ok-bg);color:var(--ok)}
.pill.upcoming{background:var(--teal-pale);color:var(--navy)}
.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)}
.btn-claim{width:100%;background:var(--teal);color:var(--navy);border:none;padding:12px;
  border-radius:var(--r-ctl);font-size:var(--t-2);font-weight:700;cursor:pointer;margin-top:8px;
  font-family:var(--sans)}
.btn-claim:hover{background:var(--teal-light)}
.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 (Steve, 1 Sep). */
.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}
/* 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 ================================= */

.profile-note{margin-top:30px;display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px}
.profile-note-k{font-size:var(--t-2);color:var(--charcoal);font-weight:500;margin-bottom:2px}
.profile-note a{color:var(--navy);font-weight:500;font-size:var(--t-1);text-decoration:none}
.profile-note a:hover{text-decoration:underline}
/* action-required banner */
/* top-aligned: the icon and the button belong beside the headline they
   act on, not floating level with a long quoted note */
.action-card{background:var(--navy);border-radius:var(--r-card);padding:24px 28px;display:flex;
  align-items:flex-start;gap:22px;margin-bottom:36px;box-shadow:0 8px 28px rgba(44,57,71,0.12)}
.action-card .ic{font-size:26px;margin-top:14px}
.action-card > .btn-gold{margin-top:8px}
.action-card .body{flex:1}
.action-card .lab{font-size:var(--t-1);font-weight:600;color:var(--gold);margin-bottom:8px}
.action-card .msg{font-size:var(--t-3);color:var(--cream);margin-bottom:5px;line-height:1.4}
.action-card .det{font-size:var(--t-1);color:rgba(255,255,255,0.55);line-height:1.5}
/* several proposals waiting: one banner listing each, each its own link
   (Steve, 15 Sep) */
.action-list{list-style:none;margin:14px 0 0;padding:0}
.action-list li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 16px;padding:10px 0;border-top:1px solid rgba(255,255,255,0.12)}
.action-list-name{font-size:var(--t-2);color:var(--cream)}
.action-list a{font-size:var(--t-2);font-weight:600;color:var(--gold);text-decoration:none;white-space:nowrap}
.action-list a:hover{text-decoration:underline}
/* several actions stack: tighten the gap between them, and let a
   not-yet-urgent one sit back a shade so the urgent ones lead */
.action-card + .action-card{margin-top:-22px}
/* lower-priority to-dos: same list, quieter weight, so a busy account is
   not a wall of navy banners */
.todo-row{display:flex;align-items:center;gap:18px;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-card);padding:16px 20px;
  margin-bottom:10px;text-decoration:none;color:inherit;transition:all 0.15s}
.todo-row:hover{border-color:var(--teal);transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(44,57,71,0.08)}
.todo-row .body{flex:1}
.todo-row .lab{font-size:var(--t-1);font-weight:500;color:var(--pale);margin-bottom:5px}
.todo-row .msg{font-size:var(--t-2);color:var(--charcoal);margin-bottom:3px;font-weight:600}
.todo-row .det{font-size:var(--t-1);color:var(--pale);line-height:1.5}
.todo-cta{font-size:var(--t-2);font-weight:600;color:var(--navy);white-space:nowrap}
.action-card + .todo-row{margin-top:26px}
.allclear{display:flex;align-items:center;gap:16px;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-card);padding:20px 24px;
  margin-bottom:36px}
.allclear .ic{width:34px;height:34px;border-radius:50%;background:var(--teal-pale);
  color:var(--ok);display:flex;align-items:center;justify-content:center;
  font-size:var(--t-3);font-weight:700;flex-shrink:0}
.allclear .msg{font-size:var(--t-3);color:var(--charcoal);font-weight:600}
.allclear .det{font-size:var(--t-1);color:var(--pale);margin-top:3px;line-height:1.5}
/* policy cards (horizontal scroll row) */
.cards-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;
  margin-left:-4px;padding-left:4px;padding-top:4px}
/* A column, so the expiry sits on the floor of every card rather than
   wherever the product name happened to stop: "Professional Indemnity"
   with a long insurer under it pushed its date a line and a half below
   its neighbour's (Steve, 10 Sep). */
.pcard{flex-shrink:0;width:218px;background:#fff;border-radius:var(--r-card);padding:22px;
  border:1px solid var(--border);cursor:pointer;transition:all 0.18s;position:relative;
  text-decoration:none;color:inherit;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(44,57,71,0.1);
  border-color:var(--teal)}
.pcard .ln{font-size:var(--t-3);color:var(--charcoal);margin-bottom:4px;font-weight:600}
.pcard .ins{font-size:var(--t-1);color:var(--mid);margin-bottom:14px}
.pcard .pill{align-self:flex-start}
.pcard .date{margin-top:auto;padding-top:18px;font-size:var(--t-5);color:var(--charcoal)}
.pcard .yr{font-size:var(--t-1);color:var(--pale);margin-top:1px}
.pcard.urg .date{color:var(--clay)}
.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{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
  padding:18px;margin-bottom:14px}
.scard h4{font-size:var(--t-1);font-weight:600;
  color:var(--mid);margin-bottom:12px}
.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}
.client-name{font-weight:600;font-size:var(--t-3)}
.client-chev{margin-left:auto;color:var(--pale);font-size:22px;line-height:1;transition:transform .15s}
/* invite copy-link box */
.invite-link{background:var(--teal-pale);border:1px solid var(--teal);border-radius:var(--r-card);
  padding:16px 18px;margin-bottom:20px}
.invite-link-lbl{font-size:var(--t-1);font-weight:600;
  color:var(--navy);margin-bottom:10px}
.invite-link-row{display:flex;gap:10px}
.invite-link-row input{flex:1;padding:10px 12px;border:1px solid var(--field-border);
  border-radius:var(--r-ctl);font-family:var(--mono,monospace);font-size:var(--t-1);background:#fff;color:var(--charcoal)}
.invite-link-row .btn{white-space:nowrap}
.invite-link-hint{font-size:var(--t-1);color:var(--mid);margin-top:9px;line-height:1.5}
.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)}
.attach-link{color:var(--navy);font-weight:500;text-decoration:none}
.attach-link:hover{text-decoration:underline}

/* ==== 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}
.split-claim{width:320px;flex-shrink:0;background:var(--navy);overflow-y:auto;
  padding:30px 26px;color:var(--cream)}
.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 (Steve, 10 Sep). 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 Rob 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 (Steve, 10 Sep). */
.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 (Steve, 10 Sep). */
.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}
/* claim rail */
.sc-title{font-size:var(--t-4);color:var(--cream);margin-bottom:4px;font-weight:600}
.sc-sub{font-size:var(--t-1);color:rgba(255,255,255,0.45);margin-bottom:24px;letter-spacing:0.04em}
.sc-step{margin-bottom:22px}
.sc-step-l{font-size:var(--t-1);color:var(--teal);margin-bottom:6px;font-weight:600}
.sc-step-h{font-size:var(--t-2);font-weight:600;color:var(--cream);margin-bottom:6px;line-height:1.4}
.sc-step-p{font-size:var(--t-1);color:rgba(255,255,255,0.65);line-height:1.65}
.sc-contact{background:rgba(255,255,255,0.07);border-radius:var(--r-ctl);padding:16px;margin:14px 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}
/* keyed-in policy: the document rides along in the same save */
.pdoc-row{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)}
.pdoc-h{font-size:var(--t-1);font-weight:600;
  color:var(--mid);margin-bottom:8px}
/* 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 (Steve, 10 Sep). */
.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-dots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.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-dot.done{background:var(--teal-pale);border-color:var(--teal);color:var(--navy)}
.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:rgba(247,248,248,0.94);
  backdrop-filter:blur(6px);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;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}
/* 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{position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  width:340px;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:0 16px 40px rgba(15,26,38,0.16);padding:14px;
  text-align:left;white-space:normal}
.unlock-form textarea{width:100%;padding:9px 11px;border:1px solid var(--field-border);
  border-radius:var(--r-ctl);font-family:var(--sans);font-size:var(--t-2);margin-bottom:8px}
.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-stats{display:flex;gap:18px;margin-top:18px}
.cr-stat{padding-right:18px;border-right:1px solid rgba(255,255,255,0.12)}
.cr-stat:last-child{border-right:none}
.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}
.tab:focus-visible{outline:2px solid var(--teal-2);outline-offset:-2px;border-radius:4px}
.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}
/* broker client record: profile tab — mock layout (kv cards + side card) */
.two-col{display:flex;gap:28px;align-items:flex-start}
.two-col-main{flex:1;min-width:0}
.two-col-side{width:300px;flex-shrink:0}
.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}

/* invite modal */

/* the broker priority queue */
.q-clear{font-size:var(--t-2);color:var(--pale);margin:0}
/* the queue's tabs sit on the page itself, not in the client record's
   padded .cr-body, so they carry their own alignment and pane spacing */
.q-tabs{padding:0;margin-bottom:0;border-radius:var(--r-card) 12px 0 0}
.q-pane{padding-top:22px}
.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}
/* no arrow on hover: inserting content reflows the line and shifts the
   row under the pointer (Steve, 10 Sep). The weight, the underline and the
   row highlight are signal enough without anything moving. */

.doc-year{margin-bottom:26px}

/* 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-tbl tfoot td{border-top:2px solid var(--border);font-weight:600;
  background:var(--paper);padding:13px 16px}
.sum-lapsed{color:var(--clay);font-weight:600}

.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}
.prem-lab{font-size:var(--t-1);font-weight:500;color:var(--pale);margin-bottom:7px}
.prem-ul{list-style:none;padding:0;margin:0}
.prem-ul li{position:relative;padding-left:14px;font-size:var(--t-1);
  line-height:1.55;color:var(--mid);margin-bottom:7px}
.prem-ul li:before{content:'';position:absolute;left:0;top:7px;width:5px;
  height:5px;border-radius:50%;background:var(--gold)}

/* policy year tabs + year-on-year movement */
.pol-years{margin:0 0 20px;background:transparent;border-bottom:1px solid var(--border)}
.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)}

/* renewals tab */
.rn-head{margin-bottom:14px}
.rn-count{font-size:var(--t-2);color:var(--mid);font-weight:600}
.rn-done td{opacity:.62}

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

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

.scard .pill.expired{margin-bottom:8px}
.scard-note{font-size:var(--t-1);line-height:1.6;margin-top:8px}
.scard-note-quiet{color:var(--mid)}
.sh-label-tight{margin-bottom:10px}
.sh-tight{margin-bottom:10px}
.days-urgent{color:var(--clay);font-weight:700}
.unlock-choice{display:block;width:100%;margin-bottom:6px;text-align:left}
.uav-navy{width:38px;height:38px;background:var(--navy);color:var(--teal)}
.crumb-here{color:var(--charcoal)}
.page-narrow{max-width:880px}
.page-narrow-sm{max-width:640px}
.page-narrow-xs{max-width:520px}
.split-claim-panel{width:auto;border-radius:var(--r-card);overflow:visible}
.dl-narrow{max-width:640px}
.dl-recent{margin-bottom:40px}
.tbl-narrow{max-width:820px}
.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 (CodeRabbit, 9 Sep). */
.sr-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cover-pick{border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:14px 16px;margin-bottom:18px;background:var(--paper)}
.cover-pick input[type=text]{width:100%}
/* 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:center;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}
.cover-prop .row-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.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}
.ml-1{margin-left:10px}

/* ==== RESPONSIVE (keep last: these override) ===== */

@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:14px;height:58px}
  .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}
  .flashes{padding:20px 20px 0}
  .split{flex-direction:column;height:auto}
  .split-claim{width: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}}
@media (max-width:900px){.two-col{flex-direction:column}.two-col-side{width:100%}}


/* ---- 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}

.pill.with_broker{background:var(--teal-pale);color:var(--navy)}
.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 (Steve, 15 Sep) */
#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 (Steve, 10 Sep). */
.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)}
/* Reading a schedule into the fields below. The action sits on the
   document's own row: a button floating under the list needed the
   filename repeated beside it to say which file it meant (Steve, 10 Sep). */
.pdoc-first{margin-bottom:22px}
/* 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}
.pill.sent{background:var(--teal-pale);color:var(--navy)}
.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}

/* the client's dashboard lists policy documents under each cover */
.pdocs{margin-bottom:14px}
.pdocs-h{font-size:var(--t-2);font-weight:600;color:var(--navy);margin:0 0 6px}
.pdocs-ins{font-weight:400;color:var(--pale);margin-left:6px}
.pdocs-none{padding:4px 0 2px}

/* 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 (Steve, 7 Sep) */
.crh-do{display:flex;align-items:center;gap:10px;position:relative;flex-shrink:0}
.btn-invite{background:var(--teal);color:var(--navy);border:none;border-radius:var(--r-ctl);
  padding:9px 18px;font-family:var(--sans);font-size:var(--t-2);font-weight:600;cursor:pointer;
  transition:background 0.12s}
.btn-invite:hover{background:var(--teal-2)}
.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}

/* The broker's bench on the Forms tab (Steve, 8 Sep) */
.bench-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:12px}
.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)}
.bench-suggest td{background:var(--paper)}
.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 (Steve, 8 Sep). */
.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}}