/* The same two faces the public site serves, from the same files. The portal
   asked Google for Fraunces and IBM Plex until 5 Sep 2026; the edge CSP
   (style-src 'self') blocked the request, so none of it ever arrived and the
   portal rendered in Georgia. Self-hosting fixes it without loosening the CSP,
   costs no third-party round trip, and makes the portal look like the site it
   belongs to. */
@font-face{font-family:Fraunces;src:url("/fonts/fraunces-latin.woff2")format("woff2");
  font-weight:400 700;font-display:swap}
@font-face{font-family:Fraunces;src:url("/fonts/fraunces-italic-latin.woff2")format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/inter-latin.woff2")format("woff2");
  font-weight:400 700;font-display:swap}

/* -----------------------------------------------------------------------
   The portal is a statement, not a dashboard.

   The reference material for this screen is a policy schedule and a broker's
   statement: ruled, tabulated, set with authority. So hierarchy comes from
   type, rules and alignment rather than from a bordered card with a shadow
   around every row, which is what it had and which flattens everything to the
   same level of importance.

   Type
     Fraunces for display, with SOFT and WONK held at 0. Those axes are what
     make the face read soft and playful; at zero it is austere, which is the
     register an insurance document wants. It is the site's own face, so the
     portal still belongs to the same firm.

     Inter for everything else -- the same pair the public site serves,
     so the portal reads as part of it. Drawn for a company whose business is
     risk and systems: flat terminals, engineered curves, and enough character
     that a page set in it does not read as a template.

     Every figure is tabular and right-aligned, because a column of money that
     does not line up is the first thing that makes a document look amateur.

   Colour
     One accent. The oxblood red carries emphasis and anything that needs
     attention; the blue is reserved for what you can click. Status is set in
     small caps in its own colour ON the paper, not in a tinted chip -- four
     pastel pill colours is the look this was asked to get away from.
   ----------------------------------------------------------------------- */
:root{
  --paper:#F4F1EC; --sheet:#FFFFFF; --sunk:#FAF8F5;
  --ink:#16161A; --body:#3E3E44; --muted:#6A6A72; --faint:#94949C;
  --rule:#DEDAD2; --rule-firm:#C6C1B6;
  --accent:#8C1418; --accent-lift:#A81A1F;
  --link:#0F4C8A;
  --good:#1F5D3F; --warn:#8A5A0B;
  /* `gone` was the same hex as `accent`, so "Expired", "Lapsed" and "No
     access" were set in the loudest colour on the page -- louder than the
     primary button. What has already ended is past tense: it recedes. The
     accent is left to mean one thing, which is where to act. */
  --gone:#8B8188;
  --lift:0 30px 80px -34px rgba(22,22,26,.34);
  /* Slower and later-settling than a UI default. Motion that decelerates over
     half a second reads considered; the same move in 200ms reads like a widget. */
  --ease:cubic-bezier(.16,.84,.24,1);
  --slow:cubic-bezier(.22,1,.28,1);
  /* A fourth-based scale, so nothing is sized by eye. */
  --t-xs:11px; --t-sm:12.5px; --t-md:14px; --t-lg:16.5px;
  --d-sm:21px; --d-md:27px; --d-lg:34px;
  --gap:22px; --gap-lg:34px;
  /* Six list components had grown six near-identical paddings -- 13, 14, 15,
     15, 15 and 16px -- which reads as a wobble rather than a rhythm. One
     value, used by all of them. */
  --row-y:15px; --row-gap:16px;
  /* The column width was written out in five places -- the shell, the tab bar,
     the request sheet, the assistant panel and the maths behind the floating
     button. They were already out of step once: the button used a breakpoint
     the others did not have, so between 600 and 640px it hung outside the
     text. One number now, and everything that has to line up with the column
     is derived from it. */
  --col:600px; --rail:216px;
  /* The side gutter, for the same reason as --col: the floating button has to
     line up with the text, and the moment a breakpoint changed one without the
     other they drifted apart again. Three widths use three gutters; all three
     set this and everything follows. */
  --gutter:26px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#131316; --sheet:#1A1A1E; --sunk:#232328;
  --ink:#F2F0EC; --body:#CFCCC6; --muted:#9C9A95; --faint:#75736F;
  --rule:#302F35; --rule-firm:#454349;
  --accent:#D98B8E; --accent-lift:#E6A0A2;
  --link:#7FB0E0;
  --good:#77BE96; --warn:#D2AB70; --gone:#9A9098;
  --lift:0 24px 60px -28px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --paper:#131316; --sheet:#1A1A1E; --sunk:#232328;
  --ink:#F2F0EC; --body:#CFCCC6; --muted:#9C9A95; --faint:#75736F;
  --rule:#302F35; --rule-firm:#454349;
  --accent:#D98B8E; --accent-lift:#E6A0A2; --link:#7FB0E0;
  --good:#77BE96; --warn:#D2AB70; --gone:#9A9098;
  --lift:0 24px 60px -28px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --paper:#F4F1EC; --sheet:#FFFFFF; --sunk:#FAF8F5;
  --ink:#16161A; --body:#3E3E44; --muted:#6A6A72; --faint:#94949C;
  --rule:#DEDAD2; --rule-firm:#C6C1B6;
  --accent:#8C1418; --accent-lift:#A81A1F; --link:#0F4C8A;
  --good:#1F5D3F; --warn:#8A5A0B;
  /* `gone` was the same hex as `accent`, so "Expired", "Lapsed" and "No
     access" were set in the loudest colour on the page -- louder than the
     primary button. What has already ended is past tense: it recedes. The
     accent is left to mean one thing, which is where to act. */
  --gone:#8B8188;
  --lift:0 24px 60px -28px rgba(22,22,26,.36);
}

/* back-compat: older rules and the inline styles in place_page still name these */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --ground:var(--paper); --surface:var(--sheet); --line:var(--rule);
  --line-soft:var(--rule); --blue:var(--link); --red:var(--accent);
  --red-hover:var(--accent-lift); --navy:var(--ink); --on-navy:var(--paper);
  --green:var(--good); --amber:var(--warn);
  --blue-soft:var(--sunk); --red-soft:var(--sunk);
  --green-soft:var(--sunk); --amber-soft:var(--sunk);
  --r:0px; --r-lg:0px; --card:none;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font:400 15px/1.6 Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
b,strong{font-weight:600;color:var(--ink)}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}

.disp,h2.vh,.step h1,.btag h2,.sh h2,.done-p h3{
  font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.018em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144}
/* Set at a display optical size, the face thins its hairlines and opens its
   counters. Below ~20px that reads spindly, so anything smaller drops back. */
.tw .t,.pmeta .pn,.ch .tt{font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 30}

/* ================= sign in ================= */
#login{min-height:100vh;display:grid;grid-template-columns:1fr;background:var(--paper)}
@media(min-width:900px){#login{grid-template-columns:1.02fr 1fr}}
#login.gone{display:none}

.brandside{position:relative;color:#F4F1EC;overflow:hidden;padding:34px 30px;
  display:flex;flex-direction:column;justify-content:space-between;min-height:236px;
  /* a warm near-black, not a neutral one: it sits with the paper rather than
     against it, and stops the split reading as pure monochrome */
  background:radial-gradient(130% 100% at 8% 0%, #23201E 0%, #1A1817 44%, #121110 100%)}
@media(min-width:900px){.brandside{padding:56px 56px;min-height:100vh}}
#veins{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.62}
.bs-in{position:relative;z-index:2}
.bmark{display:flex;align-items:center;gap:14px}
.bmark .chip{background:#F4F1EC;padding:10px 14px;display:inline-flex;align-items:center;flex:none}
.bmark .chip img{display:block;height:28px;width:auto}
.bmark .nm{font-weight:500;font-size:14px;color:#F4F1EC;letter-spacing:.01em}
.bmark .nm span{display:block;font-weight:400;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(244,241,236,.5);margin-top:4px}
.btag{margin-top:auto;padding-top:40px;border-top:1px solid rgba(244,241,236,.14)}
.btag h2{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-weight:600;color:#F4F1EC;margin:0;font-size:clamp(26px,3.3vw,40px);line-height:1.14;
  letter-spacing:-.02em;max-width:15ch}
.btag h2 em{font-style:italic;font-weight:400;font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144}
.btag p{color:rgba(244,241,236,.58);font-size:13.5px;margin:16px 0 0;max-width:36ch;line-height:1.6}

.formside{display:flex;align-items:center;justify-content:center;padding:40px 24px 56px}
@media(min-width:900px){.formside{padding:56px}}
.fbox{width:100%;max-width:384px}
.steps{position:relative;min-height:330px}
.step{position:absolute;inset:0;opacity:0;transform:translateX(20px);pointer-events:none;
  transition:opacity .34s var(--ease),transform .4s var(--ease)}
.step.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.step.back{transform:translateX(-20px)}
.step h1{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:30px;font-weight:600;color:var(--ink);margin:0 0 10px;letter-spacing:-.02em;
  line-height:1.14}
.step .lede{font-size:14px;color:var(--muted);margin:0 0 28px;line-height:1.6}
.step .lede b{color:var(--ink);font-weight:500}

.seclabel{display:flex;align-items:center;gap:12px;font:500 10.5px/1 Inter,system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.seclabel i{width:26px;height:1px;background:var(--accent);flex:none}

.fld{margin-bottom:18px}
.fld label{display:block;font:500 10.5px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.fld input{width:100%;border:0;border-bottom:1px solid var(--rule-firm);background:none;
  border-radius:0;padding:9px 2px;font:400 16px/1.4 Inter,system-ui,-apple-system,sans-serif;color:var(--ink);
  transition:border-color .22s var(--ease)}
.fld input:focus{outline:none;border-bottom-color:var(--accent);border-bottom-width:2px;
  padding-bottom:8px}
.fld input::placeholder{color:var(--faint)}

.btn{width:100%;border:0;background:var(--accent);color:#F4F1EC;border-radius:0;
  font:500 13px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  padding:17px;cursor:pointer;position:relative;overflow:hidden;
  transition:background .2s var(--ease)}
.btn:hover{background:var(--accent-lift)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn .lbl{transition:opacity .18s,transform .28s var(--ease);display:inline-block}
.btn.busy .lbl{opacity:0;transform:translateY(-8px)}
.btn .ld{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .18s}
.btn.busy .ld{opacity:1}
.btn .ld i{width:15px;height:15px;border:1.5px solid rgba(244,241,236,.35);
  border-top-color:currentColor;border-radius:50%;display:block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.alt{width:100%;margin-top:12px;border:0;border-bottom:1px solid var(--rule-firm);
  background:none;padding:14px 2px;cursor:pointer;font:400 13.5px/1 Inter,system-ui,-apple-system,sans-serif;
  color:var(--link);text-align:left;transition:border-color .2s}
.alt:hover{border-bottom-color:var(--link)}

.choice{display:flex;flex-direction:column;margin-bottom:10px;
  border-top:1px solid var(--rule)}
.ch{display:flex;align-items:center;gap:16px;padding:20px 2px;border:0;
  border-bottom:1px solid var(--rule);background:none;cursor:pointer;text-align:left;
  transition:padding-left .22s var(--ease)}
.ch:hover{padding-left:8px}
.ch .ic{width:22px;height:22px;color:var(--accent);flex:none}
.ch .ic svg{width:22px;height:22px}
.ch .tt{font-weight:500;color:var(--ink);font-size:15px}
.ch .dd{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.ch .go{margin-left:auto;color:var(--faint);width:15px;height:15px;flex:none;
  transition:transform .24s var(--ease)}
.ch:hover .go{transform:translateX(4px);color:var(--accent)}

.otp{display:flex;gap:10px;margin-bottom:20px}
.otp input{flex:1;min-width:0;aspect-ratio:1/1.15;text-align:center;border:0;
  border-bottom:1.5px solid var(--rule-firm);background:none;border-radius:0;
  font:500 24px/1 Inter,system-ui,-apple-system,sans-serif;color:var(--ink);
  transition:border-color .2s var(--ease)}
.otp input:focus{outline:none;border-bottom-color:var(--accent);border-bottom-width:2.5px}
.otp input.has{border-bottom-color:var(--ink)}

.note,.spamnote,.warnbox,.qnote,.lanenote{border:0;border-left:2px solid var(--rule-firm);
  background:none;border-radius:0;padding:2px 0 2px 16px;font-size:12.5px;line-height:1.6;
  color:var(--muted);margin-bottom:16px}
.spamnote{border-left-color:var(--warn);color:var(--body);display:flex;gap:12px;
  align-items:flex-start}
.spamnote svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--warn)}
.spamnote b{color:var(--ink)}
.warnbox,.qnote{border-left-color:var(--accent);color:var(--body);margin:0 22px 4px}
.lanenote{border-left-color:var(--accent);color:var(--body);margin-bottom:8px}
.err{border-left:2px solid var(--accent);background:none;color:var(--accent);
  padding:2px 0 2px 16px;font-size:12.5px;font-weight:500;margin-bottom:18px;display:none}
.err.on{display:block;animation:nudge .3s var(--ease)}
@keyframes nudge{40%{transform:translateX(3px)}80%{transform:translateX(-2px)}}
.tiny{font-size:12px;color:var(--faint);margin-top:24px;line-height:1.6}
.tiny a,.linkish{color:var(--link);cursor:pointer;background:none;border:0;padding:0;
  font:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.backlink{background:none;border:0;color:var(--muted);font:400 12.5px/1 Inter,system-ui,-apple-system,sans-serif;
  cursor:pointer;padding:6px 0;margin-bottom:18px;display:inline-flex;align-items:center;gap:7px}
.backlink:hover{color:var(--ink)}
.backlink svg{width:13px;height:13px}

/* ================= the statement ================= */
/* Clearance for the two fixed things: the tab bar (about 63px) and the Raksha
   button, which floats 96px up and is 39px tall. At 104px the last item on
   every view sat under one or the other -- on the account page the final field
   was unreachable. */
#shell{display:none;max-width:var(--col);margin:0 auto;
  padding-bottom:calc(156px + env(safe-area-inset-bottom));min-height:100vh;
  background:var(--sheet)}
#shell.on{display:block}
@media(min-width:640px){#shell{border-left:1px solid var(--rule);border-right:1px solid var(--rule)}}

.top{position:sticky;top:0;z-index:30;background:var(--sheet);
  border-bottom:1px solid var(--ink);padding:16px 24px 14px}
.top .r{display:flex;align-items:center;justify-content:space-between;gap:14px}
.top .who{display:flex;align-items:center;gap:12px;min-width:0}
.top .sq{width:32px;height:32px;background:var(--ink);color:var(--paper);display:grid;
  place-items:center;font-family:Fraunces,serif;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:12px;letter-spacing:.02em;flex:none}
.top .sq.logo{object-fit:contain;background:none;border:1px solid var(--rule)}
.top .n{font-weight:500;color:var(--ink);font-size:14px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .s{font-size:11px;color:var(--faint);letter-spacing:.01em}
.out{border:0;border-bottom:1px solid var(--rule-firm);background:none;color:var(--muted);
  padding:4px 1px;font:400 12px/1 Inter,system-ui,-apple-system,sans-serif;cursor:pointer;flex:none;
  transition:color .2s,border-color .2s}
.out:hover{color:var(--accent);border-bottom-color:var(--accent)}

.view{display:none;padding:30px var(--gutter) 0}
.view.on{display:block}
/* The stagger used to stop at the seventh child, so on a view with a dozen
   sections everything from the eighth down arrived at once -- the entrance
   fell apart exactly where the page got long. It now runs to sixteen on a
   tighter step, so the whole column lands in about the same half second
   however many rows it has. */
.view.on > *{animation:settle .58s var(--slow) backwards}
.view.on > *:nth-child(1){animation-delay:.02s}
.view.on > *:nth-child(2){animation-delay:.05s}
.view.on > *:nth-child(3){animation-delay:.08s}
.view.on > *:nth-child(4){animation-delay:.11s}
.view.on > *:nth-child(5){animation-delay:.14s}
.view.on > *:nth-child(6){animation-delay:.17s}
.view.on > *:nth-child(7){animation-delay:.20s}
.view.on > *:nth-child(8){animation-delay:.23s}
.view.on > *:nth-child(9){animation-delay:.26s}
.view.on > *:nth-child(10){animation-delay:.29s}
.view.on > *:nth-child(11){animation-delay:.32s}
.view.on > *:nth-child(12){animation-delay:.35s}
.view.on > *:nth-child(13){animation-delay:.38s}
.view.on > *:nth-child(14){animation-delay:.41s}
.view.on > *:nth-child(n+15){animation-delay:.44s}
@keyframes settle{from{opacity:0;transform:translateY(9px)}}
h2.vh{font-size:var(--d-lg);color:var(--ink);margin:0 0 8px}
p.vs{font-size:var(--t-md);color:var(--muted);margin:0 0 var(--gap-lg);line-height:1.65;
  max-width:46ch}
.secl{font:500 10px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:var(--gap-lg) 0 0;padding-bottom:11px;
  border-bottom:1px solid var(--ink);
  /* The marker sits at the far end of the same rule rather than running on
     from the label, where it read as part of the heading and competed with it. */
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}

/* a policy is a ruled entry, not a card */
.card{background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  box-shadow:none;margin:0}
.crow{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:baseline;
  padding:20px 0;width:100%;background:none;border:0;text-align:left;cursor:pointer;
  position:relative;transition:padding-left .42s var(--slow)}
.crow:before{content:"";position:absolute;left:0;top:24px;width:0;height:1px;
  background:var(--accent);transition:width .42s var(--slow)}
.crow:hover{padding-left:20px}
.crow:hover:before{width:12px}
.ic42{display:none}
.tw{min-width:0}
.tw .t{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;color:var(--ink);
  font-size:var(--t-lg);line-height:1.3;letter-spacing:-.012em}
/* An insurer reference is a code. Setting it in mono is both more legible and
   more honest about what it is than running it on in the body face. */
.tw .m{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--t-xs);color:var(--faint);margin-top:7px;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{font:500 9.5px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.19em;text-transform:uppercase;
  padding:0;background:none;border-radius:0;white-space:nowrap;flex:none;color:var(--muted);
  align-self:center}
.pill.ok{color:var(--good)} .pill.soon{color:var(--warn)}
.pill.gone{color:var(--gone)} .pill.blue{color:var(--link)}
.chev{width:14px;height:14px;color:var(--faint);flex:none;align-self:center;
  transition:transform .42s var(--slow),color .2s}
.crow:hover .chev{color:var(--accent)}

.kv{border-top:1px solid var(--rule);padding:16px 0 6px;display:grid;
  grid-template-columns:auto 1fr;gap:11px 24px;font-size:var(--t-md);margin:0}
.kv dt{color:var(--muted);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  align-self:center}
.kv dd{margin:0;color:var(--ink);font-weight:400;text-align:right;
  font-variant-numeric:tabular-nums lining;font-size:var(--t-lg);letter-spacing:-.01em}
.crowfoot{padding:12px 0 18px;display:flex;gap:20px;flex-wrap:wrap}
.mini{border:0;border-bottom:1px solid var(--rule-firm);background:none;border-radius:0;
  padding:3px 1px;font:400 13px/1.5 Inter,system-ui,-apple-system,sans-serif;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:color .2s,border-color .2s}
.mini:hover{color:var(--accent);border-bottom-color:var(--accent)}
.mini svg{width:13px;height:13px;color:var(--accent)}
.mini.warn{color:var(--accent)}
.mini.go{background:var(--accent);color:#F4F1EC;border:0;padding:12px 22px;
  font:500 12px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.mini.go:hover{background:var(--accent-lift);color:#F4F1EC}
.psaved{align-self:center;font:400 12px/1 Inter,system-ui,-apple-system,sans-serif;color:var(--good);
  opacity:0;transition:opacity .3s}
.psaved.on{opacity:1}

.empty{padding:34px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.empty .i{display:none}
.empty .t{font-weight:500;color:var(--ink);margin-bottom:6px;font-size:15px}
.empty .d{font-size:13px;color:var(--muted);line-height:1.6;max-width:44ch}

.wa{background:none;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  border-radius:0;padding:18px 0;display:flex;align-items:center;gap:16px;margin-top:30px;
  box-shadow:none;cursor:pointer}
.wa .i{width:20px;height:20px;background:none;color:var(--accent);flex:none}
.wa .i svg{width:20px;height:20px}
.wa .t{font-weight:500;font-size:14.5px;color:var(--ink)}
.wa .d{font-size:12.5px;color:var(--muted);margin-top:3px}

.lane{display:flex;flex-direction:column;border-bottom:1px solid var(--rule)}
.pick{display:flex;align-items:center;gap:14px;width:100%;padding:16px 0;border:0;
  border-top:1px solid var(--rule);background:none;cursor:pointer;text-align:left;
  box-shadow:none;transition:padding-left .22s var(--ease)}
.pick:first-child{border-top:0}
.pick:hover{padding-left:8px}
.pick .pl{flex:1;font-weight:400;color:var(--ink);font-size:15px}
.pick .pgo{width:13px;height:13px;color:var(--faint);flex:none;transition:transform .22s var(--ease)}
.pick:hover .pgo{transform:translateX(4px);color:var(--accent)}
.opt{font-size:10.5px;color:var(--faint);margin-left:7px;letter-spacing:.1em;text-transform:uppercase}

/* profile */
.prof .profhead{display:flex;align-items:center;gap:20px;padding:20px 0;
  border-bottom:1px solid var(--rule)}
.logobig{width:60px;height:60px;flex:none;object-fit:contain;background:none;
  border:1px solid var(--rule);border-radius:0}
.logobig.ph{display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:20px;border:0}
.pmeta{min-width:0;flex:1}
.pmeta .pn{font-weight:500;color:var(--ink);font-size:15.5px;line-height:1.3}
.pmeta .pe{font-size:12px;color:var(--faint);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bar{height:1px;background:var(--rule);margin-top:14px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);transition:width .6s var(--ease)}
.pmeta .pc{font-size:10.5px;color:var(--faint);margin-top:8px;letter-spacing:.16em;
  text-transform:uppercase}
/* who can sign in */
.mems{border-top:1px solid var(--rule)}
.mem{display:flex;align-items:center;gap:var(--row-gap);padding:var(--row-y) 0;
  border-bottom:1px solid var(--rule)}
.mem .mi{min-width:0;flex:1}
.mem .me{font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mem .mw{font-size:11.5px;color:var(--faint);margin-top:3px}
.mem .pill{flex:none}
.mem .tag{font:500 10px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);flex:none}
.mem .tm{flex:none;font-size:12px}
.inv{padding-top:20px}
.invrow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.invrow input{flex:1;min-width:210px;border:0;border-bottom:1px solid var(--rule-firm);
  background:none;border-radius:0;padding:8px 2px;
  font:400 15px/1.5 Inter,system-ui,-apple-system,sans-serif;color:var(--ink)}
.invrow input:focus{outline:none;border-bottom-color:var(--accent)}
.invrow .go{flex:none;align-self:flex-end}
.lockednote{margin:0;padding:10px 0 16px;font-size:12px;color:var(--faint);line-height:1.6}

.form{padding:18px 0 0;display:flex;flex-direction:column;gap:18px}
.f label{display:block;font:500 10.5px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.f input,.f textarea,.f select{width:100%;border:0;border-bottom:1px solid var(--rule-firm);
  background:none;border-radius:0;padding:8px 2px;font:400 15px/1.5 Inter,system-ui,-apple-system,sans-serif;
  color:var(--ink);transition:border-color .2s}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-bottom-color:var(--accent)}
.f textarea{resize:vertical;min-height:64px}
.f .hint{font-size:11.5px;color:var(--faint);margin-top:6px}

.foot{margin:32px 0 0;font-size:11.5px;color:var(--faint);line-height:1.7;
  padding-top:18px;border-top:1px solid var(--rule)}
/* A card already closes on a rule. A second one 30px below it framed an empty
   band that read as a container with nothing in it. */
.card + .foot{border-top:0;margin-top:20px;padding-top:0}
.demo{display:none}


/* ---- payment state on a policy row -------------------------------------
   Status and a date. There is deliberately no money in this component: the
   question a client has is "am I covered", and a figure does not answer it. */
.payl{font:400 11.5px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.02em;
  padding:0 0 14px;color:var(--muted)}
.payl::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;
  vertical-align:middle;background:currentColor;border-radius:50%}
.payl.ok{color:var(--good)} .payl.soon{color:var(--warn)} .payl.gone{color:var(--accent)}

/* ---- the renewal calendar ----------------------------------------------- */
.secl .soonmark{font-style:normal;color:var(--warn);letter-spacing:.14em;font-size:9px;
  text-align:right;flex:none}
.secl.warnl{color:var(--accent)}
.cal{border-top:1px solid var(--rule)}
.calrow{display:flex;align-items:baseline;gap:var(--row-gap);padding:var(--row-y) 0;
  border-bottom:1px solid var(--rule)}
.cal.gone .calrow{opacity:.72}
.calrow .cd{flex:none;width:96px;font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink);font-variant-numeric:tabular-nums}
.calrow .cn{flex:1;min-width:0;font-size:14.5px;color:var(--ink);line-height:1.4}
.calrow .cn span{display:block;font-size:11.5px;color:var(--faint);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calrow .pill{flex:none}

/* ---- a claim, stage by stage --------------------------------------------
   Laid out as a run of rules rather than a card stack: a claim is a sequence,
   and boxing each step would read as seven unrelated problems. */
.clm.settled{opacity:.66}
.clhead{display:flex;align-items:flex-start;gap:16px;padding:20px 0 14px;
  border-bottom:1px solid var(--rule)}
.clhead > div:first-child{flex:1;min-width:0}
.cref{font:500 13px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);
  letter-spacing:.02em}
.ckind{font-size:11.5px;color:var(--faint);margin-top:5px}
.chead{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--ink);
  max-width:52ch}
.need{margin-top:14px;padding:12px 0 12px 14px;border-left:2px solid var(--accent);
  font-size:13px;line-height:1.6;color:var(--ink)}
.need b{font-weight:500}
.stps{margin-top:20px;border-top:1px solid var(--rule)}
.stp{display:flex;align-items:baseline;gap:var(--row-gap);padding:var(--row-y) 0;
  border-bottom:1px solid var(--rule)}
.stp .sw{flex:none;width:74px;font:500 9.5px/1.5 Inter,system-ui,-apple-system,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.stp.done .sw{color:var(--good)}
.stp.late .sw{color:var(--accent)}
.stp.now .sw,.stp.soon .sw{color:var(--warn)}
.stp .sl{flex:1;min-width:0;font-size:14px;color:var(--ink);line-height:1.45}
.stp.done .sl{color:var(--muted)}
.stp .sl span{display:block;font-size:11px;color:var(--faint);margin-top:4px;
  line-height:1.55}
.stp .sl .stat{font-style:normal;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin:0 7px 0 0;
  display:inline-block}
.stp .sl .basis{display:block;font-size:11px;color:var(--faint);margin-top:5px;
  line-height:1.55}
.stp .sd{flex:none;font:400 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--faint);
  font-variant-numeric:tabular-nums}

/* ---- the cover check ----------------------------------------------------- */
.gaps{border-top:1px solid var(--rule);margin-top:6px}
.gap{padding:var(--row-y) 0;border-bottom:1px solid var(--rule)}
.gn{font-size:14.5px;color:var(--ink);font-weight:400;line-height:1.4}
.gn .stat{font-style:normal;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-left:9px;
  vertical-align:middle}
.gw{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:6px;
  max-width:56ch}
.gb{font-size:11px;color:var(--faint);line-height:1.6;margin-top:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---- policies the client holds elsewhere -------------------------------- */
.owns{border-top:1px solid var(--rule)}
.own{display:flex;align-items:center;gap:var(--row-gap);padding:var(--row-y) 0;
  border-bottom:1px solid var(--rule)}
.own .oi{flex:1;min-width:0}
.own .op{font-size:14.5px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.own .om{font-size:11.5px;color:var(--faint);margin-top:4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.own .pill,.own .tm{flex:none}

/* ---- declared shipments -------------------------------------------------- */
.ships{border-top:1px solid var(--rule)}
.ship{display:flex;align-items:center;gap:var(--row-gap);padding:var(--row-y) 0;
  border-bottom:1px solid var(--rule)}
.ship .si{flex:1;min-width:0}
.ship .sg{font-size:14.5px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ship .sr{font-size:11.5px;color:var(--faint);margin-top:4px}
.ship .pill{flex:none}

/* tabs: a rule and a word, not a chip */
.tabs{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(var(--col),100%);
  background:var(--sheet);border-top:1px solid var(--ink);display:grid;z-index:40;
  padding-bottom:env(safe-area-inset-bottom)}
.tab{background:none;border:0;padding:14px 4px 15px;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:7px;color:var(--faint);position:relative;
  transition:color .22s var(--ease)}
.tab svg{width:17px;height:17px;transition:transform .28s var(--ease)}
.tab .lb{font:400 9.5px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.14em;
  text-transform:uppercase}
.tab.on{color:var(--ink)}
.tab.on svg{transform:translateY(-1px)}
.tab .bump{position:absolute;top:-1px;left:50%;width:100%;height:2px;background:var(--accent);
  transform:translateX(-50%) scaleX(0);transition:transform .46s var(--slow);
  transform-origin:center}
.tab.on .bump{transform:translateX(-50%) scaleX(1)}
/* Six tabs at a phone's width leave about 60px each, and REQUESTS alone is
   wider than that at the original size. The label shrinks with the viewport
   rather than wrapping; `.many` is the seventh tab, which only marine clients
   see and which needs a little more taken out. */
@media(max-width:520px){
  .tabs .tab{padding:13px 2px 14px;gap:6px}
  .tabs .tab .lb{font-size:8.5px;letter-spacing:.08em}
  .tabs .tab svg{width:16px;height:16px}
}
@media(max-width:400px){
  .tabs .tab .lb{font-size:7.5px;letter-spacing:.04em}
  .tabs .tab{padding:12px 1px 13px}
}
.tabs.many .tab .lb{font-size:8.5px;letter-spacing:.08em}
@media(max-width:520px){ .tabs.many .tab .lb{font-size:7.5px;letter-spacing:.04em} }
@media(max-width:400px){ .tabs.many .tab .lb{font-size:7px;letter-spacing:.02em} }
.tab .badge{position:absolute;top:9px;right:calc(50% - 21px);min-width:auto;height:auto;
  border-radius:0;background:none;color:var(--accent);
  font:500 9.5px/1 Inter,system-ui,-apple-system,sans-serif;padding:0;letter-spacing:.06em}

.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);opacity:0;
  background:var(--ink);color:var(--paper);padding:13px 20px;border-radius:0;
  font-size:12.5px;font-weight:400;box-shadow:var(--lift);pointer-events:none;z-index:70;
  transition:opacity .24s,transform .3s var(--ease);max-width:88vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* sheets */
.scrim{position:fixed;inset:0;background:rgba(22,22,26,.42);opacity:0;pointer-events:none;
  transition:opacity .26s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;width:min(var(--col),100%);transform:translate(-50%,100%);
  background:var(--sheet);border-radius:0;z-index:50;box-shadow:var(--lift);
  transition:transform .34s var(--ease);max-height:92vh;overflow-y:auto;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));border-top:2px solid var(--ink)}
.sheet.on{transform:translate(-50%,0)}
.grab{display:none}
.sh{padding:24px 24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.sh h2{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:22px;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.016em;line-height:1.24}
.sh .x{flex:none;width:26px;height:26px;border:0;background:none;color:var(--muted);
  cursor:pointer;display:grid;place-items:center}
.sh .x:hover{color:var(--accent)}
.sh .x svg{width:15px;height:15px}
.sblurb{padding:10px 24px 0;font-size:13px;color:var(--muted);line-height:1.6}
.sfor{padding:14px 24px 0;font-size:11px;color:var(--faint);letter-spacing:.1em;
  text-transform:uppercase}
.sfor b{color:var(--body);font-weight:500}
.sheet .form{padding:20px 24px 0}
.send{margin:22px 24px 0;width:calc(100% - 48px);border:0;border-radius:0;
  background:var(--accent);color:#F4F1EC;font:500 12.5px/1 Inter,system-ui,-apple-system,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;padding:17px;cursor:pointer;
  position:relative;overflow:hidden;transition:background .2s}
.send:hover{background:var(--accent-lift)}
.sfoot{padding:14px 24px 0;font-size:11.5px;color:var(--faint);line-height:1.6}
.done-p{padding:34px 24px 10px;display:none}
.done-p.on{display:block}
.done-p .ring{width:26px;height:26px;color:var(--good);margin-bottom:18px}
.done-p .ring svg{width:26px;height:26px;stroke-dasharray:32;stroke-dashoffset:32;
  animation:draw .5s .1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done-p h3{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:20px;font-weight:600;color:var(--ink);margin:0 0 8px}
.done-p p{font-size:13.5px;color:var(--muted);margin:0;max-width:40ch;line-height:1.6}
.done-p .ref{display:inline-block;margin-top:18px;padding-top:10px;
  border-top:1px solid var(--ink);color:var(--ink);
  font:500 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}
.form.hide,.sblurb.hide,.sfor.hide,.send.hide,.warnbox.hide,.sfoot.hide{display:none}

/* Raksha */
/* Right edge flush with the content's right edge at every width. A media
   query could not do this: between 600 and 640px the column is already capped
   at 600 but the breakpoint had not fired, so the button hung outside the
   text. max() takes the gutter on a narrow screen and the column inset on a
   wide one, with no breakpoint to fall through. */
.askfab{position:fixed;
  right:max(var(--gutter), calc(50% - (var(--col) / 2) + var(--gutter)));
  bottom:calc(88px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:9px;
  padding:12px 20px;border:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink);
  border-radius:0;background:var(--sheet);color:var(--ink);
  font:500 11px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;box-shadow:var(--lift);transition:background .2s,color .2s}
.askfab:hover{background:var(--ink);color:var(--paper)}
.askfab svg{width:14px;height:14px}

.askpanel{position:fixed;left:50%;bottom:0;width:min(var(--col),100%);transform:translate(-50%,100%);
  background:var(--sheet);border-radius:0;z-index:52;box-shadow:var(--lift);
  transition:transform .32s var(--ease);display:flex;flex-direction:column;
  height:min(80vh,640px);border-top:2px solid var(--ink)}
.askpanel.on{transform:translate(-50%,0)}
.askhead{display:flex;align-items:center;gap:14px;padding:18px 24px 16px;
  border-bottom:1px solid var(--rule);flex:none}
.askhead .av{width:22px;height:22px;border-radius:0;background:none;color:var(--accent);
  display:grid;place-items:center;flex:none}
.askhead .av svg{width:20px;height:20px}
.askhead .t{font-weight:500;color:var(--ink);font-size:14px;flex:1;letter-spacing:.01em}
.askhead .t span{display:block;font-weight:400;font-size:11px;color:var(--faint);margin-top:3px;
  letter-spacing:0}
.askhead .x{width:24px;height:24px;border:0;border-radius:0;background:none;color:var(--muted);
  cursor:pointer;display:grid;place-items:center;flex:none}
.askhead .x:hover{color:var(--accent)}
.askhead .x svg{width:14px;height:14px}
.asklog{flex:1;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:20px}
.msg{max-width:100%;font-size:14px;line-height:1.65;padding:0 0 0 16px;border-radius:0;
  white-space:pre-wrap;border-left:2px solid var(--rule)}
.msg.them{color:var(--body);border-left-color:var(--rule)}
.msg.me{color:var(--ink);border-left-color:var(--ink);font-weight:500;align-self:flex-end;
  text-align:right;padding:0 16px 0 0;border-left:0;border-right:2px solid var(--ink);
  max-width:80%}
.msg.hand{color:var(--body);border-left-color:var(--warn)}
.msg.fact{color:var(--body);border-left-color:var(--link)}
.msgoffer{align-self:flex-start;margin-top:-8px;padding-left:16px}
.dots{display:flex;gap:5px;align-self:flex-start;padding:4px 0 4px 16px;
  border-left:2px solid var(--rule)}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--faint);
  animation:bob 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{opacity:.3}30%{opacity:1}}
.askbar{flex:none;border-top:1px solid var(--ink);padding:16px 24px;display:flex;gap:14px;
  align-items:flex-end;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.askbar input{flex:1;border:0;border-bottom:1px solid var(--rule-firm);background:none;
  border-radius:0;padding:8px 1px;font:400 15px/1.5 Inter,system-ui,-apple-system,sans-serif;color:var(--ink)}
.askbar input:focus{outline:none;border-bottom-color:var(--accent)}
.askbar button{flex:none;width:auto;border:0;border-radius:0;background:none;
  color:var(--accent);cursor:pointer;display:grid;place-items:center;padding:6px 2px;
  border-bottom:1px solid var(--accent)}
.askbar button svg{width:16px;height:16px}
.asknote{padding:0 24px 12px;font-size:11px;color:var(--faint);line-height:1.6;flex:none}

/* ---- the cover period, drawn ------------------------------------------- */
.span{padding:20px 0 4px;border-top:1px solid var(--rule)}
.span .track{display:block;position:relative;height:1px;background:var(--rule-firm)}
.span .track i{position:absolute;left:0;top:0;height:1px;background:var(--ink);
  width:0;transition:width 1.1s var(--slow) .12s}
.span .track b{position:absolute;top:-3px;width:1px;height:7px;background:var(--ink);
  left:0;transition:left 1.1s var(--slow) .12s}
.span.soon .track i,.span.soon .track b{background:var(--warn)}
.span.gone .track i,.span.gone .track b{background:var(--gone)}
.span .ends{display:flex;justify-content:space-between;margin-top:9px}
.span .ends em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;color:var(--faint);letter-spacing:.02em}
.span .mid{display:block;margin-top:3px;font:500 9.5px/1 Inter,system-ui,-apple-system,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center}
.span.soon .mid{color:var(--warn)} .span.gone .mid{color:var(--gone)}

/* ---- a policy opens, rather than appearing ------------------------------
   The detail rows were toggled with the `hidden` attribute, which is
   display:none and cannot be animated -- so the one interaction a client
   performs most often was the only one with no motion at all. A grid whose
   single row goes from 0fr to 1fr collapses to exactly the content height
   without anyone measuring it in JavaScript. */
.fold{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--slow),opacity .3s var(--ease);
  opacity:0}
.fold > *{overflow:hidden;min-height:0}
.fold.open{grid-template-rows:1fr;opacity:1}
.crow .chev{transition:transform .42s var(--slow)}
.crow[aria-expanded="true"] .chev{transform:rotate(180deg)}


/* ==========================================================================
   Devices
   --------------------------------------------------------------------------
   The portal was drawn as a phone and then centred on whatever it was opened
   on, so a 600px column with a phone tab bar sat in the middle of a laptop and
   a quarter of an iPad's width went unused. Three shapes now, chosen by what
   the device actually gives you rather than by a guess at what it is:

     wide    >= 860px  -- the navigation is a column down the side. There is
                          room for it, it does not cover anything, and a bottom
                          bar on a desktop is a phone impression.
     short   height <= 500px and coarse -- a phone on its side has about 330px
                          of vertical room, and 63px of that was a tab bar with
                          words on it. Icons only, and the assistant tucks up.
     narrow  <= 360px  -- seven labels across a small phone. The labels go and
                          the icons carry it.
   ========================================================================== */

/* ---- wide: navigation down the side ------------------------------------ */
@media (min-width:860px){
  #shell{max-width:none;margin:0;padding-bottom:0;
    padding-left:var(--rail);min-height:100vh}
  .top{left:var(--rail);padding-left:0}
  .view{max-width:640px;margin:0 auto;padding-bottom:64px}
  .top .r{max-width:640px;margin:0 auto}

  .tabs{top:0;bottom:0;left:0;right:auto;width:var(--rail);height:100vh;
    transform:none;display:flex;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:2px;
    border-top:0;border-right:1px solid var(--rule);
    padding:26px 14px calc(20px + env(safe-area-inset-bottom));
    background:var(--sunk);overflow:visible}
  .tab{flex-direction:row;justify-content:flex-start;gap:14px;
    padding:12px 14px;border-radius:0;text-align:left}
  .tab .lb{font-size:11px;letter-spacing:.1em}
  .tab svg{width:16px;height:16px}
  .tab:hover{color:var(--body)}
  .tab.on{color:var(--ink)}
  /* The badge sits before the icon in the DOM (it is absolutely positioned on
     a phone, where source order does not matter). Down the side it is in the
     flow, so it needs to be told to go last as well as to push right --
     margin-left:auto alone shifted the icon and label of every badged row. */
  .tab .badge{position:static;order:3;margin-left:auto;font-size:10px}
  .tab .bump{order:4}
  /* The travelling indicator is horizontal by construction; down the side it
     becomes a rule against the tab rather than under it. */
  .tabs .slider{display:none}
  .tab.on:before{content:"";position:absolute;left:0;top:8px;bottom:8px;
    width:2px;background:var(--accent)}
  .askfab{right:auto;left:calc(var(--rail) + var(--gutter));
    bottom:calc(26px + env(safe-area-inset-bottom))}
}
@media (min-width:1180px){
  :root{--rail:248px}
  .view,.top .r{max-width:680px}
}

/* ---- tablet: wider column, same shape ----------------------------------
   An iPad in portrait is 768px and was showing a 600px column with 84px of
   dead paper either side. There is not room for the side rail -- it would
   leave less text than there is now -- so the column simply grows. */
@media (min-width:660px) and (max-width:859px){
  :root{--col:680px; --gutter:34px}
}

/* ---- short: a phone on its side, or any window with little height -------
   Gated on height alone. It was `and (pointer:coarse)` at first, which meant
   it never fired -- and a laptop window 400px tall wants exactly the same
   thing as a phone held sideways: the 63px of words along the bottom back. */
@media (max-height:520px){
  .tabs .tab .lb{display:none}
  .tabs .tab{padding:11px 2px;gap:0}
  #shell{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .askfab{bottom:calc(54px + env(safe-area-inset-bottom));padding:9px 14px}
  .view{padding-top:16px}
  .top{padding-top:10px;padding-bottom:10px}
  .top .s{display:none}
  h2.vh{font-size:var(--d-md);margin-bottom:4px}
  p.vs{margin-bottom:var(--gap)}
}

/* ---- narrow: seven tabs on a small phone -------------------------------- */
/* Below about 380px the button's label was as wide as a third of the screen
   and sat on top of whatever it floated over. The icon says enough. */
@media (max-width:380px){
  .askfab{padding:0;width:44px;height:44px;justify-content:center;border-radius:50%;
    border:1px solid var(--ink)}
  .askfab span,.askfab{font-size:0}
  .askfab svg{width:17px;height:17px}
}
@media (max-width:360px){
  :root{--gutter:18px}
  .tabs .tab .lb{display:none}
  .tabs .tab{padding:14px 2px;gap:0}
  .calrow .cd{width:82px;font-size:11px}
}

/* A claim step is three columns -- state, what it is, when it is due. On a
   320px screen that left about 120px for the sentence, which broke every
   label onto three lines. The state and the date share the top line and the
   sentence gets the full width underneath. */
@media (max-width:400px){
  .stp{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:baseline}
  .stp .sw{width:auto;grid-column:1;grid-row:1}
  .stp .sd{grid-column:2;grid-row:1}
  .stp .sl{grid-column:1 / -1;grid-row:2}
  .calrow{flex-wrap:wrap}
  .calrow .cn{flex:1 1 100%;order:3;margin-top:4px}
  .calrow .cd{flex:1}
}

/* ---- a finger is not a mouse -------------------------------------------- */
@media (pointer:coarse){
  /* Text buttons were 20px of ink. The ink stays the same size; the target
     around it grows to something a thumb can actually land on. */
  .mini{padding-top:11px;padding-bottom:11px}
  .crowfoot{gap:22px}
  .tab{min-height:52px}
}
/* Hover effects that stick after a tap are worse than none. */
@media (hover:none){
  .crow:hover{padding-left:0}
  .crow:hover:before{width:0}
  .pick:hover{padding-left:0}
  .mini:hover{color:var(--ink);border-bottom-color:var(--rule-firm)}
}

/* ---- views cross-fade rather than swap --------------------------------- */
.view{will-change:opacity}
.view.leaving{display:block;opacity:0;transform:translateY(-6px);
  transition:opacity .2s ease-in,transform .2s ease-in;pointer-events:none}

/* ---- the tab indicator travels ----------------------------------------- */
.tabs{position:fixed;overflow:hidden}
.tabs .slider{position:absolute;top:-1px;left:0;height:2px;background:var(--accent);
  transition:transform .52s var(--slow),width .52s var(--slow);pointer-events:none;
  width:0}
.tab .bump{display:none}

/* ---- the masthead tightens as you scroll -------------------------------- */
.top{transition:padding .34s var(--slow),border-color .34s var(--slow)}
.top.tight{padding-top:9px;padding-bottom:9px}
.top.tight .s{opacity:0;height:0;margin:0;overflow:hidden;
  transition:opacity .2s,height .28s var(--slow)}
.top .s{transition:opacity .28s .06s,height .28s var(--slow)}
.top.tight .sq{width:26px;height:26px;font-size:10px;
  transition:width .34s var(--slow),height .34s var(--slow)}
.top .sq{transition:width .34s var(--slow),height .34s var(--slow)}

/* ---- an empty state with something drawn in it -------------------------- */
.empty{position:relative;padding:40px 0 38px}
.empty:before{content:"";position:absolute;left:0;top:0;width:34px;height:1px;
  background:var(--accent)}

/* ---- the drawer's contents arrive after it opens ------------------------ */
.kv,.crowfoot,.span{transition:opacity .34s var(--slow) .1s}
.head[aria-expanded="false"] ~ .kv{opacity:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
}