/* Vista — shared design system. dakBUILT brand standards (VISTA.md). */
:root{
  --navy:#00205B;
  --green:#44D62C;
  /* Secondary text. Was #97999B — only 2.86:1 on white (fails WCAG AA). #676d75
     is ~5:1, so all the muted text that leans on --gray now passes. */
  --gray:#676d75;
  --ink:#0d1b2a;
  --bg:#f4f6fa;
  --card:#ffffff;
  --line:#e2e6ee;
  /* Vista display font = Montserrat (the VISTA wordmark font). A Vista-specific
     choice; the dakBUILT corporate guide uses Alfa Slab One, which here lives
     only inside the dakBUILT block logo image. */
  --display:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--body);background:var(--bg);color:var(--ink);
  min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;
  /* column so the footer can be pushed to the bottom on short pages */
  display:flex;flex-direction:column;
}
/* A visible focus ring for every keyboard-focusable control — the design pass
   flagged that only a couple had one. Only on :focus-visible, so a mouse click
   never shows it. Per-element rules below can still override with a tighter ring. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;border-radius:3px;
}

/* Base look for every single-select dropdown, so none can fall back to the raw
   OS control (the swipe-action, time-format, default-view, role, … pickers had
   nothing). Low specificity: the per-area rules (compose / move / calendar /
   prefs / reply) layer sizing on top; multi-select listboxes keep native. */
select:not([multiple]){font-family:var(--body);font-size:.9rem;color:var(--ink);
  background-color:#fff;border:1px solid var(--line);border-radius:.45rem;
  padding:.35rem .5rem;cursor:pointer}

/* top bar */
.topbar{
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem clamp(1rem,4vw,2rem);gap:1rem;flex-wrap:wrap;
  padding-top:calc(.85rem + env(safe-area-inset-top));
}
.brand{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:.55rem}
.brand span{color:var(--green)}
.brand .mark{height:30px;width:auto;display:block}
.brand .logo{height:30px;width:auto;display:block}
.topbar .env{
  font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:1rem;border:1px solid rgba(255,255,255,.35);
  color:#fff;opacity:.85;
}
/* the logo is a link home — same destination as "Home" in the nav */
.brand-home{display:inline-flex;align-items:center;text-decoration:none;border-radius:.35rem}
.brand-home:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.topbar nav{display:flex;align-items:center;gap:1.1rem;font-size:.9rem}
.topbar nav a{color:rgba(255,255,255,.85);text-decoration:none}
.topbar nav a:hover,.topbar nav a.active{color:var(--green)}
/* your own name in the top bar is the way into your profile */
.who{font-size:.85rem;color:rgba(255,255,255,.7);text-decoration:none}
.who:hover,.who.active{color:var(--green)}

/* layout */
/* The SPA shell region (_base.html). Flex column so a .wrap fills and the
   footer sits at the bottom, and so a full-bleed app page (.inbox-app) can
   grow to the viewport. min-height:0 lets inner panes own their own scroll. */
#appMain{flex:1;min-height:0;display:flex;flex-direction:column}
/* Full-bleed app pages (inbox) pin the viewport and drop the footer. */
.app-body{height:100dvh;overflow:hidden}
.app-body .site-footer{display:none}
.wrap{max-width:60rem;margin:0 auto;padding:clamp(1.25rem,4vw,2.5rem);width:100%;flex:1}
h1{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,6vw,2.6rem);line-height:1.05;margin-bottom:.4rem;letter-spacing:-.01em}
h1 .dot{color:var(--green)}
.sub{color:var(--gray);margin-bottom:2rem;font-size:1.02rem}
h2{font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;color:var(--gray);margin:2rem 0 .9rem}

/* cards + grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:.7rem;
  padding:1.1rem 1.2rem;text-decoration:none;color:inherit;display:block;
  transition:border-color .15s,transform .15s;
}
a.card:hover{border-color:var(--green);transform:translateY(-2px)}
.card .k{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:.3rem}
.card .d{font-size:.9rem;color:var(--gray);line-height:1.4}
.card.locked{opacity:.55}
.pill{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:.15rem .5rem;border-radius:1rem;margin-top:.6rem}
.pill.on{background:rgba(68,214,44,.14);color:#1f7a12}
.pill.off{background:#eef0f4;color:var(--gray)}

/* table (admin) */
.tbl{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:.7rem;overflow:hidden}
.tbl th,.tbl td{padding:.7rem .85rem;text-align:left;font-size:.92rem;border-bottom:1px solid var(--line)}
.tbl th{background:#f8fafc;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.tbl tr:last-child td{border-bottom:none}
.tbl .muted{color:var(--gray)}
.tbl th.ctr,.tbl td.ctr{text-align:center}
.wrapx{overflow-x:auto}

/* buttons */
.btn{font-family:var(--body);font-size:.85rem;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:.35rem .7rem;border-radius:.45rem;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--gray)}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.on{background:var(--green);border-color:var(--green);color:#04340a}
.btn.ghost{background:transparent}
/* destructive — deliberately the only red control on the page */
.btn.danger{background:#a12020;border-color:#a12020;color:#fff}
.btn.danger:hover{background:#8a1b1b;border-color:#8a1b1b}
.confirm{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.7rem}
/* grant/revoke cell in the module-access grid — square-ish so a row of them
   reads as a matrix rather than a row of words */
.btn.tog{min-width:2.2rem;padding:.3rem .4rem;font-size:.95rem;line-height:1.15}
/* A locked switch — your own access, and the Admin module. Must come AFTER
   .btn.on: same specificity, so source order is what stops a disabled switch
   from still rendering green and reading as live. */
.btn:disabled,.btn[disabled]{
  background:#eef0f4;border-color:var(--line);color:#5f6672;
  cursor:not-allowed;
}
.btn:disabled:hover,.btn[disabled]:hover{border-color:var(--line)}
form.inline{display:inline}

/* add-user row — wraps to stacked fields on a phone rather than overflowing */
.addrow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1rem}
.addrow input,.addrow select{
  font-family:var(--body);font-size:.9rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:.45rem;padding:.45rem .6rem;
  min-height:2.3rem;
}
.addrow input[type=email]{flex:1 1 15rem}
.addrow input[type=text]{flex:1 1 11rem}
.addrow input[type=number]{width:5.5rem}
/* match the inputs' height so the row reads as one control strip */
.addrow .btn{min-height:2.3rem}
.addrow input::placeholder{color:var(--gray)}
/* Focus is otherwise invisible on these — the stylesheet defines no focus
   styles anywhere else yet, but a form you tab through must show where you are. */
.addrow input:focus-visible,.addrow select:focus-visible,.btn:focus-visible{
  outline:2px solid var(--green);outline-offset:2px}

/* ---------------------------------------------------------------- inbox */
.msglist{list-style:none;border:1px solid var(--line);border-radius:.7rem;
  overflow:hidden;background:var(--card)}
.msg + .msg{border-top:1px solid var(--line)}
/* Date-group headings in the list (Today / Yesterday / This week / …). */
.msg-sep{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray);padding:.5rem 1rem .35rem;background:var(--bg);
  border-top:1px solid var(--line)}
.msg-sep:first-child{border-top:0}
.msg a{display:grid;gap:.15rem .6rem;padding:.8rem 1rem;text-decoration:none;
  color:inherit;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"tag from when" "subject subject subject" "preview preview preview"}
.msg a:hover{background:#f8fafc}
.msg a:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.msg-tag{grid-area:tag;font-size:.6rem;font-weight:700;letter-spacing:.08em;
  padding:.15rem .4rem;border-radius:.25rem;align-self:center;
  background:#eef0f4;color:#5f6672}
.tag-outlook{background:#e8f0fe;color:#14498f}
.tag-gmail{background:#fdeceb;color:#a02b22}
.tag-cliq{background:#e6f4ea;color:#1b7a3e}
.tag-teams{background:#eeebfa;color:#4b3f9e}
.tag-icloud{background:#eef1f4;color:#3a3f47}
.msg-from{grid-area:from;font-weight:600;font-size:.92rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-when{grid-area:when;font-size:.8rem;color:#5f6672;white-space:nowrap}
.msg-subject{grid-area:subject;font-size:.92rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-preview{grid-area:preview;font-size:.85rem;color:#5f6672;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Unread: weight + a navy rule, never colour alone — the green accent is 1.9:1
   on white and would fail as the only signal. */
.msg.unread a{border-left:3px solid var(--navy);padding-left:calc(1rem - 3px)}
.msg.unread .msg-from,.msg.unread .msg-subject{font-weight:700}
.msg-att{font-size:.75rem;opacity:.8;vertical-align:baseline}
/* Replied / forwarded marker, inline just before the subject text. Navy so it
   reads as a status, not the green accent (which fails contrast on its own). */
.msg-verb{width:.9rem;height:.9rem;vertical-align:-.12em;margin-right:.3rem;
  color:var(--navy);fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Visually hidden, still read by screen readers ("Replied — <subject>"). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Desktop hover quick-actions — a small floating toolbar over the row's right
   edge. Fine-pointer + hover only, so touch devices (where swipe rules) never
   see it, and .js gates it so no-JS never shows a dead control. */
.msg{position:relative}
.msg-quick{position:absolute;top:.35rem;right:.5rem;z-index:2;display:none;gap:.2rem;
  padding:.15rem;border-radius:.55rem;background:var(--card);
  box-shadow:0 1px 5px rgba(0,0,0,.14)}
@media (hover:hover) and (pointer:fine){
  .js .msg:hover .msg-quick{display:inline-flex}
}
.msg-quick-btn{display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;padding:0;cursor:pointer;color:#5f6672;
  background:#fff;border:1px solid var(--line);border-radius:.4rem}
.msg-quick-btn:hover{border-color:var(--gray);color:var(--navy)}
.msg-quick-btn.danger:hover{border-color:#a12020;color:#a12020}
.msg-quick-btn:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.msg-quick-btn .ic{width:1.05rem;height:1.05rem;display:block}
.msg.acting{opacity:.5;pointer-events:none}
.msg.removing{overflow:hidden;
  transition:height .12s ease-out,opacity .1s ease-out,margin .12s ease-out,padding .12s ease-out}
/* Swipe to act (inbox.js). The row content is opaque and slides sideways; the
   coloured tint + label underneath are revealed on the trailing edge. Green =
   archive, red = delete, matching the hover icons. touch-action:pan-y lets a
   vertical scroll through while we claim the horizontal drag. */
.msg a{background:var(--card);touch-action:pan-y}
.msg.swipe-archive{background:#e7f6ec}
.msg.swipe-delete{background:#fdeaea}
.msg::before,.msg::after{content:"";position:absolute;top:0;bottom:0;z-index:0;
  display:none;align-items:center;padding:0 1.1rem;pointer-events:none;
  font-weight:700;font-size:.82rem;letter-spacing:.02em}
.msg.swiping-right::before{display:flex;left:0;content:attr(data-swipe-label)}
.msg.swiping-left::after{display:flex;right:0;content:attr(data-swipe-label)}
.msg.swipe-archive::before,.msg.swipe-archive::after{color:#1c7a43}
.msg.swipe-delete::before,.msg.swipe-delete::after{color:#a12020}
/* Folders under Sources: a per-source expand arrow reveals that connector's
   folders as drag-and-drop targets. */
/* Source row: a ▸ arrow that expands the folders in place (pick a folder without
   entering the mailbox), and the name that ENTERS the account (scoping the four
   views above to it). The arrow is a clear, full-height tap target of its own so
   it never gets lost next to the name. */
.src-row{display:flex;align-items:stretch;gap:.1rem}
.src-row .rail-item{flex:1;min-width:0}
.src-exp{flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--gray);
  padding:0 .5rem;border-radius:.5rem;display:inline-flex;align-items:center;
  justify-content:center}
.src-exp:hover{color:var(--navy);background:#f1f4f9}
.src-exp .chev{display:inline-block;font-size:.85rem;line-height:1;
  transition:transform .15s ease}
.src-exp.open{color:var(--navy)}
.src-exp.open .chev{transform:rotate(90deg)}
.drop-tree{margin:.05rem 0 .3rem .55rem}
.drop-list{list-style:none;margin:0;padding:0}
.drop-children{padding-left:.9rem}          /* one indent step per nested level */
.drop-row{display:flex;align-items:center;gap:.05rem}
/* A nested folder's own collapse toggle. */
.drop-exp{flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--gray);
  padding:.2rem .3rem;line-height:1;border-radius:.3rem;display:inline-flex;
  align-items:center;justify-content:center}
.drop-exp:hover{color:var(--navy);background:rgba(0,32,91,.08)}
.drop-exp .chev{display:inline-block;font-size:.62rem;transition:transform .15s ease}
.drop-exp.open{color:var(--navy)}
.drop-exp.open .chev{transform:rotate(90deg)}
.drop-exp-spacer{flex:0 0 auto;width:1.05rem}   /* align leaves under their siblings */
.drop-folder{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.24rem .5rem;border-radius:.35rem;font-size:.82rem;
  color:var(--ink);text-decoration:none}
.drop-folder:hover{background:rgba(0,32,91,.06)}
.drop-folder.active{background:rgba(0,32,91,.08);color:var(--navy);font-weight:600}
/* ★ pin toggle on each folder row — subtle until hover, gold when pinned. */
.drop-fav{flex:0 0 auto;background:none;border:0;cursor:pointer;font-size:.8rem;line-height:1;
  color:var(--line);padding:.1rem .25rem;border-radius:.3rem;opacity:0;
  transition:opacity .12s,color .12s}
.drop-row:hover .drop-fav{opacity:1}
.drop-fav:hover{color:var(--gray)}
.drop-fav.on{opacity:1;color:#f5b301}
/* Tighter rail so more folders + favorites fit; Favorites rows drag to reorder. */
.rail-tight{gap:.03rem}
.rail-tight .rail-item{padding:.3rem .6rem}
/* Favourites read like Outlook's: the folder name aligned hard-left with "All
   Sources", the mailbox filling the middle, the unread bubble in a right-hand
   column. Subfolder font size/weight so more fit. The drag grip is pulled out of
   flow (into the left gutter, on hover) so it never pushes the name inward — the
   whole row is draggable regardless. */
.fav-item{display:flex;align-items:center;gap:.4rem;position:relative}
.rail-item.fav-item{font-size:.82rem;font-weight:500}
.fav-grip{position:absolute;left:.02rem;top:50%;transform:translateY(-50%);
  color:var(--line);cursor:grab;font-size:.7rem;line-height:1;
  opacity:0;transition:opacity .12s}
.fav-item:hover .fav-grip{opacity:.6}
.fav-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-src{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.62rem;color:var(--gray);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
.fav-item .rail-badge{flex:0 0 auto}
.fav-item.fav-dragging{opacity:.45}
.fav-item.fav-drop-before{box-shadow:inset 0 2px 0 0 var(--green)}
.fav-item.fav-drop-after{box-shadow:inset 0 -2px 0 0 var(--green)}
@media (max-width:800px){.drop-fav{opacity:.6}.fav-grip{opacity:.6}}
.drop-folder.drop-hover{background:rgba(0,32,91,.1);
  outline:2px dashed var(--navy);outline-offset:-2px}
.msg.dragging{opacity:.5}
/* Clickable addresses in the reader header — subtle until hovered. */
.addr-link{color:inherit;text-decoration:none}
.addr-link:hover{color:var(--navy);text-decoration:underline}
/* Signature editors (profile personal + admin corporate) */
.sigform{display:flex;flex-direction:column;gap:.9rem;max-width:40rem;margin:.4rem 0 1rem}
.sig-src{border:1px solid var(--line);border-radius:.6rem;padding:.6rem .8rem .8rem;
  display:flex;flex-direction:column;gap:.6rem;min-width:0}
.sig-src legend{font-family:var(--display);font-weight:700;font-size:.9rem;padding:0 .3rem}
.sig-field{display:flex;flex-direction:column;gap:.25rem}
/* DIRECT child only, and deliberately so. As a descendant rule this styled every
   <span> inside the corporate signature editor too — and that quietly broke the
   Bold button: to decide whether bold is already applied, Blink measures a dummy
   <span> it inserts at the caret, that rule made the dummy compute as 600, so
   execCommand('bold') concluded there was nothing to do and did nothing.
   Italic and underline were unaffected, which is what made it look like a
   browser quirk rather than our own stylesheet. */
.sig-field > span{font-size:.8rem;font-weight:600;color:#5f6672}
.sigform textarea{font-family:var(--body);font-size:.9rem;line-height:1.45;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:.5rem;padding:.55rem .65rem;
  resize:vertical;min-height:2.8rem}
.sigform textarea:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.sigform .btn{align-self:flex-start}
/* The corporate signature's small rich-text editor (admin). One bordered block:
   a toolbar rail on top, the editable area under it, so it reads as a single
   field rather than a row of buttons floating above a box. */
.rte{border:1px solid var(--line);border-radius:.5rem;background:#fff;overflow:hidden}
.rte:focus-within{outline:2px solid var(--green);outline-offset:1px}
.rte-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;
  padding:.3rem .35rem;background:#f7f9fc;border-bottom:1px solid var(--line)}
.rte-btn{font-family:var(--body);font-size:.82rem;line-height:1;cursor:pointer;
  min-width:1.9rem;min-height:1.9rem;padding:.3rem .45rem;color:var(--ink);
  background:transparent;border:1px solid transparent;border-radius:.35rem}
.rte-btn:hover{background:#fff;border-color:var(--line)}
.rte-btn:focus-visible{outline:2px solid var(--green);outline-offset:1px}
/* Lit when the caret is inside that formatting (bold/italic/link/etc.). */
.rte-btn.rte-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.rte-btn.rte-on:hover{background:var(--navy);color:#fff}
.rte-sep{width:1px;height:1.1rem;margin:0 .25rem;background:var(--line)}
.rte-area{font-family:var(--body);font-size:.9rem;line-height:1.45;color:var(--ink);
  padding:.6rem .65rem;min-height:6rem;max-height:22rem;overflow:auto;
  overflow-wrap:break-word;word-break:break-word}
.rte-area:focus{outline:none}          /* the ring is on .rte, not the box */
.rte-area:empty::before{content:attr(data-placeholder);color:var(--gray)}
.rte-area img{max-width:100%!important;height:auto;cursor:pointer}
/* Selected image + its four drag-to-resize corner handles. Handles are fixed
   (positioned from the image's viewport rect) and live outside the editable
   area, so they never serialise into the email. */
.rte-area img.rte-img-sel{outline:2px solid var(--navy);outline-offset:1px}
.rte-img-handle{position:fixed;z-index:60;width:12px;height:12px;
  margin:-7px 0 0 -7px;background:#fff;border:2px solid var(--navy);
  border-radius:2px;box-shadow:0 1px 3px rgba(13,27,42,.35);touch-action:none}
.rte-img-nw,.rte-img-se{cursor:nwse-resize}
.rte-img-ne,.rte-img-sw{cursor:nesw-resize}
/* Wide quoted content (forward/reply of a wide email) scales/scrolls INSIDE the
   editor instead of pushing the page sideways and taking the toolbar with it. */
.rte-area table{max-width:100%}
.rte-area a{color:var(--navy)}
.rte-area ul,.rte-area ol{padding-left:1.3rem}
.rte-hint{font-size:.75rem;color:var(--gray);padding:.35rem .65rem .5rem;
  border-top:1px solid var(--line);background:#f7f9fc;margin:0}
.rte-hint.bad{color:#a12020}
/* Text-colour popover: brand swatches + a free picker, anchored under its button. */
.rte{position:relative}
/* Fixed, not absolute, so the editor's overflow:hidden can't clip it — it
   overlays everything; rte.js anchors it under the colour button on open. */
.rte-colors{position:fixed;z-index:1000;display:flex;
  flex-direction:column;gap:.35rem;width:12.5rem;padding:.55rem;background:#fff;
  border:1px solid var(--line);border-radius:.5rem;box-shadow:0 6px 20px rgba(13,27,42,.15)}
/* display:flex above beats the UA [hidden]{display:none}, so the popover would
   stay visible when JS sets hidden — the same override trap as .field[hidden].
   Make the attribute win. */
.rte-colors[hidden]{display:none}
.rte-colors-head{font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray)}
.rte-swatch-row{display:flex;flex-wrap:wrap;gap:.3rem}
.rte-swatch{width:1.5rem;height:1.5rem;padding:0;border:1px solid rgba(13,27,42,.12);
  border-radius:.3rem;cursor:pointer}
.rte-swatch:hover,.rte-swatch:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.rte-color-custom{align-self:flex-start;width:100%;height:1.6rem;padding:0;
  border:1px solid var(--line);border-radius:.3rem;background:#fff;cursor:pointer}

/* Recipient autocomplete (#3) — a fixed overlay anchored under the field, so a
   narrow compose pane can't clip it (same reasoning as the colour popover). */
.af-pop{position:fixed;z-index:1000;max-height:15rem;overflow:auto;background:#fff;
  border:1px solid var(--line);border-radius:.5rem;box-shadow:0 6px 20px rgba(13,27,42,.16)}
.af-pop[hidden]{display:none}
.af-item{display:flex;flex-direction:column;gap:.05rem;padding:.4rem .6rem;cursor:pointer}
.af-item.active,.af-item:hover{background:rgba(0,32,91,.08)}
.af-name{font-size:.9rem;color:var(--ink)}
.af-email{font-size:.78rem;color:var(--gray)}

/* Cliq group builder (#8) */
.to-group{width:100%;padding:.4rem;border:1px solid var(--line);border-radius:.5rem;
  font-family:var(--body);font-size:.9rem;background:#fff}
.to-group option{padding:.25rem .35rem}
.group-toggle{margin-right:.4rem;vertical-align:-1px}
.group-msg{font-size:.85rem;color:#a12020;margin:0}

/* compose */
.compose{display:flex;flex-direction:column;gap:.5rem;max-width:44rem}
.field{display:flex;flex-direction:column;gap:.3rem}
/* The [hidden] attribute must win over the display:flex above (author rules beat
   the UA [hidden] rule) — so compose can hide the fields it isn't using. */
.field[hidden]{display:none}
/* Base look for text-ish fields inside a .field label, so forms built on .field
   (Suggestions, New task, …) don't fall back to the raw OS control. The more
   specific .field.mailrow / .field input[type=file] rules still win. */
.field > input:not([type=file]):not([type=checkbox]):not([type=radio]),
.field > textarea{font-family:var(--body);font-size:.9rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:.45rem;
  padding:.4rem .55rem;width:100%;accent-color:var(--navy)}
.field > textarea{resize:vertical;min-height:3rem}
/* Tint the native date/time picker controls to brand where the browser allows it. */
.field > input[type=datetime-local],.field > input[type=date],
.field > input[type=time]{color-scheme:light;accent-color:var(--navy)}
/* Native file inputs (Suggestions picture, …): style the "Choose file" button to
   match the UI instead of the raw OS control. */
.field input[type=file]{font-family:var(--body);font-size:.85rem;color:var(--gray)}
.field input[type=file]::file-selector-button,
.field input[type=file]::-webkit-file-upload-button{
  font-family:var(--body);font-size:.85rem;font-weight:600;margin-right:.7rem;
  padding:.4rem .9rem;border:1px solid var(--line);border-radius:.45rem;
  background:#fff;color:var(--ink);cursor:pointer;
  transition:background .12s,border-color .12s}
.field input[type=file]::file-selector-button:hover,
.field input[type=file]::-webkit-file-upload-button:hover{
  background:#f1f4f9;border-color:var(--navy)}
.field-label{font-family:var(--display);font-weight:700;font-size:.85rem}
/* Compose header rows: label BESIDE the field (same as the reply headers), so
   new / reply / forward look identical and take less vertical space. */
.field.mailrow{flex-direction:row;align-items:center;gap:.5rem}
.field.mailrow > .field-label{flex:0 0 3.6rem;font-family:var(--body);font-weight:600;
  font-size:.8rem;color:var(--gray)}
/* Match the reply header inputs exactly so new/reply/forward are identical. */
.field.mailrow > input,.field.mailrow > select{flex:1 1 auto;min-width:0;
  font-size:.9rem;padding:.35rem .5rem;border-radius:.45rem}
/* The little "Cc/Bcc" show-hide toggle, shared by compose and reply. */
.cc-toggle{align-self:flex-start;background:none;border:0;cursor:pointer;padding:.1rem .2rem;
  font:inherit;font-size:.8rem;font-weight:600;color:var(--gray)}
.cc-toggle:hover{color:var(--navy);text-decoration:underline}
.compose input,.compose select,.compose textarea{
  font-family:var(--body);font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:.55rem;padding:.55rem .7rem;
  min-height:2.4rem;width:100%}
.compose textarea{resize:vertical;min-height:9rem;line-height:1.5}
.compose input:focus-visible,.compose select:focus-visible,
.compose textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.compose-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.compose-actions .btn{min-height:2.4rem}
.muted{color:rgba(0,32,91,.65);font-size:.85rem;font-weight:400}

/* Source filter + pager. Both are .btn rows, so they inherit the control
   styling and only layout is new here. */
.srcfilter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.srcfilter .btn{min-height:2.3rem}
.pager{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.pager .btn{min-height:2.3rem}
/* Newest hugs the left, Older the right — and when only one is present it
   still sits on its own side, so the control doesn't jump as you page. */
.pager .pg-new{margin-right:auto}
.pager .pg-old{margin-left:auto}
/* With JS, the pager is the no-JS fallback + the cursor source for infinite
   scroll — hidden, and the .list-more footer takes over. */
html.js .pager{display:none}
.list-more{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 0 1.2rem;font-size:.85rem;color:var(--gray)}
.list-more[hidden]{display:none}
.list-more.error a{color:var(--navy);font-weight:600;text-decoration:underline;cursor:pointer}
.list-more-spin{width:1rem;height:1rem;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--navy);
  animation:list-more-spin .7s linear infinite}
@keyframes list-more-spin{to{transform:rotate(360deg)}}

/* ============================================================ inbox app shell
   The inbox is a full-width workspace, not a centered document: three columns
   — rail | list | reading pane — each scrolling independently, pinned to the
   viewport so the page itself never scrolls. A future events pane slots in to
   the right of the reading pane without disturbing this. */
.app-body{height:100dvh;overflow:hidden}
.inbox-app{
  flex:1;min-height:0;
  --list-w:26rem;
  display:grid;
  grid-template-columns:15rem var(--list-w) 7px minmax(0,1fr);
}
.rail,.list-pane,.msg-pane{min-height:0;overflow-y:auto}
.rail{border-right:1px solid var(--line);background:var(--card);
  padding:1rem .75rem;display:flex;flex-direction:column;gap:.35rem}
.rail-compose{margin-bottom:.6rem;text-align:center}
.rail-views{display:flex;flex-direction:column;gap:.1rem}
.rail-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  text-decoration:none;color:var(--ink);font-size:.92rem;font-weight:600;
  padding:.5rem .65rem;border-radius:.5rem}
.rail-item:hover{background:#f1f4f9}
.rail-item.active{background:rgba(0,32,91,.08);color:var(--navy)}
.rail-badge{font-size:.7rem;font-weight:700;background:var(--navy);color:#fff;
  border-radius:1rem;padding:.05rem .45rem;min-width:1.5rem;text-align:center}
.rail-group-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray);margin:1rem .65rem .3rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.rail-clear{font-size:.66rem;font-weight:700;letter-spacing:.04em;color:var(--gray);
  text-decoration:none;white-space:nowrap}
.rail-clear:hover{color:var(--navy)}
.rail-folders .rail-item{font-weight:500}   /* lighter than the common views */
.rail-note{font-size:.75rem;color:var(--gray);margin-top:auto;padding:.8rem .65rem 0;line-height:1.4}

.list-pane{background:var(--bg);padding:1rem;position:relative}
/* Undo window — floats at the bottom after a physical action. Pinned to the
   VIEWPORT (position:fixed), not the list pane: the pane is a scroll container,
   so an absolutely-positioned child would sit at the bottom of the full scrolled
   list — below the fold on a busy inbox. Hidden until inbox.js adds .show. */
.inbox-toast{position:fixed;left:50%;bottom:1.25rem;z-index:1000;
  transform:translateX(-50%) translateY(.5rem);
  display:inline-flex;align-items:center;gap:.9rem;max-width:calc(100% - 2rem);
  padding:.55rem .6rem .55rem 1rem;border-radius:.6rem;
  background:#eaf7ee;color:#276a3c;border:1px solid #b6e0c2;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  font-size:.9rem;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.inbox-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.inbox-toast .toast-text{white-space:nowrap;font-weight:600}
.inbox-toast .toast-undo{flex:none;background:#276a3c;color:#eaf7ee;font:inherit;
  font-weight:700;border:1px solid #276a3c;border-radius:.4rem;
  padding:.28rem .8rem;cursor:pointer}
.inbox-toast .toast-undo:hover{background:#1f5230;border-color:#1f5230}
.listsearch{display:flex;gap:.5rem;margin-bottom:.9rem}
.listsearch input[type=search]{flex:1;min-width:0;font-family:var(--body);
  font-size:.9rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:.45rem;padding:.45rem .6rem;min-height:2.3rem}
.listsearch input[type=search]:focus-visible,
.rail-item:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* Refresh — a round icon button; the glyph spins while a re-fetch is in flight. */
.refresh-btn{min-height:2.3rem;display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;padding:0;font-size:1.05rem;line-height:1;text-decoration:none}
.refresh-ico{display:inline-block;line-height:1}
/* Spin only the arrow — the button box stays put. */
.refresh-btn.spinning .refresh-ico{animation:vspin .6s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
#listBody.refreshing{opacity:.55;transition:opacity .1s .1s}
/* The list drops the outer card border here — the pane IS the container. */
.list-pane .msglist{border-radius:.6rem}

.divider{cursor:col-resize;background:var(--line);
  border-left:3px solid var(--bg);border-right:3px solid var(--bg);
  background-clip:padding-box}
.divider:hover,.resizing .divider{background:var(--green)}
.divider:focus-visible{outline:2px solid var(--green);outline-offset:-1px}
body.resizing{cursor:col-resize;user-select:none}

/* The reading pane is a fixed toolbar over a scrolling area. The toolbar is a
   non-scrolling flex child, so Archive/Delete/Reply (or Send/Cancel) stay put
   while either the message or the reply scrolls beneath. No reply box is shown
   until Reply is pressed — then the whole pane becomes the compose. */
.msg-pane{background:var(--card);padding:0;display:flex;flex-direction:column;overflow:hidden}
/* Compose in the reading pane (New message, Forward) — same as reply: it fills
   the message pane while the rail (folders) and list stay exactly where they are. */
.compose-reader{flex:1;min-height:0;display:flex;flex-direction:column}
.compose-reader .compose{max-width:none;gap:.4rem}
.compose-heading{font-family:var(--display);font-weight:700;font-size:1rem}
.bar-spacer{flex:1}
.compose-note{margin:.3rem 0 0}
.field-grow{flex:1;min-height:0}
.compose-reader .compose-body{min-height:15rem}
/* The rich editor filling a compose/reply pane the way the textarea it replaced
   did: the group and its .rte both grow as column flex, the editable area takes
   the slack and scrolls. Signatures keep the default capped sizing above. */
.compose-reader .rte-group,
.reader.replying .reply-body-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.compose-reader .rte,
.reader.replying .reply-body-wrap .rte{flex:1;min-height:0;display:flex;flex-direction:column}
.compose-reader .rte-area,
.reader.replying .reply-body-wrap .rte-area{flex:1;min-height:8rem;max-height:none}
/* Attachments — reading pane list + preview. */
.attachments{display:flex;flex-wrap:wrap;gap:.8rem;margin:.5rem 0 1.1rem}
.att{display:flex;flex-direction:column;gap:.4rem;max-width:100%}
.att-thumb img{max-width:230px;max-height:190px;border-radius:.5rem;
  border:1px solid var(--line);display:block}
.att-chip{display:inline-flex;align-items:center;gap:.5rem;background:#f8fafc;
  border:1px solid var(--line);border-radius:.5rem;padding:.42rem .6rem;font-size:.85rem}
.att-ico{opacity:.7}
.att-name{max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--ink)}
.att-size{color:var(--gray);font-size:.78rem}
.att-dl{color:var(--navy);text-decoration:none;font-weight:600}
.att-dl:hover{text-decoration:underline}
/* Attach drop zone — compose + reply. */
.attach-input{display:none}
.attach-zone{border:1.5px dashed var(--line);border-radius:.6rem;padding:.7rem .85rem;
  cursor:pointer;background:#fbfcfe;transition:border-color .12s ease,background .12s ease}
.attach-zone:hover,.attach-zone:focus-visible{border-color:var(--gray);outline:none}
.attach-zone.dragover{border-color:var(--green);background:#f0fbef}
.attach-hint{margin:0;font-size:.85rem;color:var(--gray)}
.attach-zone.has-files .attach-hint{margin-bottom:.45rem}
.attach-list{list-style:none;margin:.2rem 0 0;padding:0;display:flex;
  flex-direction:column;gap:.28rem}
.attach-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.83rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:.4rem;padding:.3rem .5rem}
.attach-rm{background:none;border:0;color:var(--gray);cursor:pointer;font-size:.9rem;
  line-height:1;padding:0 .2rem}
.attach-rm:hover{color:#a12020}
.attach-zone-reply{margin-top:.5rem}
.msg-pane.loading{opacity:.5;transition:opacity .1s .1s}
.pane-empty{flex:1;display:flex;flex-direction:column;gap:.6rem;align-items:center;
  justify-content:center;color:var(--gray);font-size:1rem;text-align:center;padding:2rem}
.pane-empty p{max-width:26rem}
.pane-empty-lead{font-weight:700;font-size:1.1rem;color:var(--ink)}
.pane-pad{margin:1.4rem}

.reader{flex:1;min-height:0;display:flex;flex-direction:column}
.reader-bar{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:.7rem clamp(1rem,3vw,2.4rem);border-bottom:1px solid var(--line);
  background:var(--card)}
.reader-bar .inline{display:inline}
.bar-read{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.bar-reply{display:none;flex-wrap:wrap;gap:.6rem;align-items:center}
.reader.replying .bar-read{display:none}
.reader.replying .bar-reply{display:flex}
.reply-all-check{font-size:.85rem;display:inline-flex;align-items:center;gap:.3rem;cursor:pointer}
.reply-to-note{color:var(--gray);font-size:.85rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:22rem}

.reader-scroll{flex:1;min-height:0;overflow-y:auto;padding:1.3rem clamp(1rem,3vw,2.4rem)}
/* Full width — the email body uses the whole pane (Darren: don't "box me in").
   The header text still reads fine full-width; the body iframe is auto-sized. */
.reader-read{max-width:none}

/* reply takes over the whole scrolling area; the textarea fills it and scrolls
   itself, so the toolbar above stays fixed */
.reader-reply{display:none}
.reader.replying .reader-scroll{overflow:hidden;display:flex;flex-direction:column;padding:0}
.reader.replying .reader-read{display:none}
.reader.replying .reader-reply{display:flex;flex-direction:column;flex:1;min-height:0;
  padding:1rem clamp(1rem,3vw,2.4rem)}
.reader-reply .reply-label{margin-bottom:.5rem}
.reader-reply textarea{flex:1;min-height:0;resize:none;overflow:auto;
  font-family:var(--body);font-size:.95rem;line-height:1.5;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:.55rem;padding:.7rem .8rem}
.reader-reply textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.reader-back{display:none}   /* mobile only — see media query */
.mobile-bar,.rail-back{display:none}   /* mobile-only nav — see media query */
/* Chat conversation pane (Cliq): scrolling transcript + pinned reply box. */
.chat-reader{flex:1;min-height:0;display:flex;flex-direction:column}
.chat-reader .reader-title{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy)}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  gap:1.15rem;padding:1.3rem clamp(1rem,3vw,2.2rem)}
.chat-msg{max-width:70ch}
/* Links inside a chat message (a shared SharePoint file shows as its name). */
.chat-text a,.chat-filelink{color:var(--navy);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;word-break:break-word}
.chat-text a:hover{color:var(--green)}
.chat-meta{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.2rem}
.chat-meta .chat-from{font-weight:700;font-size:.92rem;color:var(--navy)}
.chat-meta .chat-time{font-size:.72rem;font-weight:400;color:var(--gray)}
.chat-text{white-space:pre-wrap;word-break:break-word;line-height:1.55;
  font-size:.95rem;color:var(--ink)}
/* Reply bar — full-width box that matches compose, pinned at the bottom. */
.chat-reply{flex:0 0 auto;display:flex;gap:.6rem;align-items:flex-end;box-sizing:border-box;
  width:100%;padding:.75rem clamp(1rem,3vw,2.2rem) .9rem;
  border-top:1px solid var(--line);background:var(--card)}
.chat-reply textarea{flex:1 1 auto;width:100%;box-sizing:border-box;
  min-height:2.6rem;max-height:40vh;resize:none;overflow-y:auto;
  font-family:var(--body);font-size:.95rem;line-height:1.45;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:.7rem;padding:.6rem .85rem}
.chat-reply textarea::placeholder{color:var(--gray)}
.chat-reply textarea:focus-visible{outline:2px solid var(--green);outline-offset:1px;
  border-color:var(--green)}
.chat-reply .btn{flex:0 0 auto;min-height:2.6rem}
/* Paperclip attach on the chat reply bar; the little number shows file count. */
.chat-attach{flex:0 0 auto;display:inline-flex;align-items:center;gap:.15rem;
  min-height:2.6rem;padding:0 .4rem;cursor:pointer;color:var(--gray);font-size:1.1rem;
  border:1px solid var(--line);border-radius:.5rem;background:#fff}
.chat-attach:hover{color:var(--navy);border-color:var(--gray)}
.chat-attach:focus-within{outline:2px solid var(--green);outline-offset:1px}
.chat-attach-n{font-size:.75rem;font-weight:700;color:var(--navy)}
/* move-to picker in the toolbar */
.move-form{display:inline-flex;gap:.3rem;align-items:center}
.move-select{font-family:var(--body);font-size:.82rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:.45rem;padding:.35rem .5rem;max-width:12rem}
.move-select:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.move-go{padding:.3rem .6rem;font-size:.8rem;min-height:auto}
/* With JS the select auto-submits on change, so the fallback Go button is only
   needed without JS — inbox.js stamps <html class="js"> and this hides it. */
.js .move-go{display:none}
/* Desktop moves mail by click/drag to a folder, so the Move-to dropdown is a
   mobile-only affordance (Darren, 2026-08-05). */
@media (min-width:801px){.move-form{display:none}}

/* ---- narrow: collapse to one column, list<->message toggled ------------- */
@media (max-width:800px){
  .app-body{height:auto;overflow:visible}
  .inbox-app{grid-template-columns:1fr;grid-template-rows:auto auto}
  .divider{display:none}
  .mobile-bar{display:flex;gap:.5rem;align-items:center;margin-bottom:.7rem}
  .mobile-bar .btn{flex:0 0 auto}

  /* Three stacked screens — folders, list, message — one at a time. The default
     is the message LIST. Folders/labels are their OWN screen (not crammed atop
     the list), reached by the "Folders" button; tapping a folder navigates and
     lands back on the list showing it. */
  .rail{display:none;overflow-y:visible;border-right:0}
  .inbox-app.show-rail .rail{display:flex;flex-direction:column;gap:.15rem;
    border-bottom:0}
  .inbox-app.show-rail .list-pane,
  .inbox-app.show-rail .msg-pane{display:none}
  .rail-back{display:inline-flex;align-self:flex-start;margin-bottom:.5rem;
    color:var(--navy);font-weight:700}
  .rail-views{flex-direction:column;gap:.1rem}   /* full-width rows to tap */
  .rail-item{padding:.5rem .6rem}
  /* The expand arrow is the fast path on a phone — tap it to reveal a source's
     folders inline (no navigation), then tap a folder to open it. Bigger touch
     targets than on desktop. */
  .src-exp{padding:.45rem .7rem;font-size:1rem}
  .drop-folder{padding:.5rem .7rem;font-size:.92rem}

  .list-pane{overflow-y:visible}
  .msg-pane{display:none}
  .inbox-app.has-selection .rail,
  .inbox-app.has-selection .list-pane{display:none}
  .inbox-app.has-selection .msg-pane{display:block;overflow:visible}
  /* On a phone the page scrolls, not the pane — so pin the toolbar with
     position:sticky instead of the desktop fixed-height flex trick. */
  /* overflow-x:clip stops a too-wide email (or its quote on reply/forward) from
     scrolling the whole page sideways and dragging the sticky toolbar off — the
     y-axis stays visible, so the bar still pins and the page still scrolls. */
  .reader{display:block;overflow-x:clip}
  .reader-bar{position:sticky;top:0;z-index:5}
  .reader-scroll,
  .reader.replying .reader-scroll{overflow:visible;display:block;padding:1rem}
  .reader.replying .reader-reply{display:block}
  /* Roomy, drag-resizable typing box on a phone (was a fixed, non-resizable box
     that scrolled internally under the on-screen keyboard). The page scrolls, so
     let the field be tall and let the reader grow with it. */
  .reader-reply textarea,
  .compose-reader .compose-body{min-height:45vh;resize:vertical}
  /* Same roomy box for the rich editor on a phone: let it sit in normal flow and
     grow, rather than pinning to a scroll container under the keyboard. */
  .compose-reader .rte-group,.reader.replying .reply-body-wrap,
  .compose-reader .rte,.reader.replying .reply-body-wrap .rte{display:block;flex:none}
  .compose-reader .rte-area,
  .reader.replying .reply-body-wrap .rte-area{min-height:45vh;max-height:none}
  .reader-back{display:inline-block;color:var(--navy);font-weight:700;
    font-size:1.15rem;text-decoration:none;margin-right:.2rem}
}

/* message view */
.msg-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.msg-title{font-size:clamp(1.2rem,4vw,1.7rem);margin-bottom:.5rem}
.reply{margin-top:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.reply-label{font-family:var(--display);font-weight:700;font-size:.9rem}
.reply textarea{font-family:var(--body);font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:.55rem;
  padding:.6rem .7rem;resize:vertical;min-height:6rem}
.reply textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.reply-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.msg-meta{margin-bottom:1rem;font-size:.9rem;line-height:1.5}
/* "Details" toggle + the full recipient card (all To/Cc), opened on demand. */
.msg-detail-btn{margin-left:.5rem;font:inherit;font-size:.7rem;font-weight:600;
  color:var(--navy);background:none;border:1px solid var(--line);border-radius:.4rem;
  padding:.05rem .45rem;cursor:pointer;vertical-align:middle;white-space:nowrap}
.msg-detail-btn:hover{background:var(--bg)}
.msg-headers{position:relative;margin:-.4rem 0 1rem;border:1px solid var(--line);
  border-radius:.6rem;background:#fff;padding:.7rem 2rem .7rem .9rem;max-width:40rem;
  box-shadow:0 8px 24px rgba(13,27,42,.12)}
.msg-headers-x{position:absolute;top:.3rem;right:.4rem;border:none;background:none;
  font-size:.85rem;line-height:1;color:var(--gray);cursor:pointer;padding:.25rem}
.msg-headers-x:hover{color:var(--navy)}
.msg-headers-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;
  font-size:.82rem}
.msg-headers-dl>div{display:contents}
.msg-headers-dl dt{font-weight:700;color:var(--gray);white-space:nowrap}
.msg-headers-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
/* The email body iframe is auto-sized to its content by inbox.js (sizeMsgBody),
   so there's no inner scrollbar — the whole reading pane scrolls. Full width,
   no box. A small min-height only until the height is measured. */
.msg-body{width:100%;display:block;border:0;background:#fff;min-height:8rem}
.addrow input[type=search]{flex:1 1 14rem;font-family:var(--body);font-size:.9rem;
  color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:.45rem;padding:.45rem .6rem;min-height:2.3rem}
.addrow input[type=search]:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* footer — "powered by dakBUILT" corporate lockup.
   The per-character spans are distributed by space-between so the words span
   EXACTLY the lockup's width; see templates/_footer.html. Navy at 70% rather
   than --gray: #97999B is a 2.9:1 contrast on white and fails WCAG AA, this
   reads at ~6:1 while staying quiet. */
.site-footer{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:2rem 1rem calc(1.75rem + env(safe-area-inset-bottom))}
.build-stamp{margin:0;font-size:.66rem;letter-spacing:.02em;color:var(--gray);
  font-variant-numeric:tabular-nums}
.build-link{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
.build-link:hover{color:var(--navy);border-bottom-color:currentColor}
/* ---- What's new / changelog ---- */
.release{border:1px solid var(--line);border-radius:.7rem;padding:1rem 1.1rem;
  margin:0 0 1rem;background:#fff}
.release.is-current{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.release-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem;margin-bottom:.6rem}
.release-title{margin:0;font-size:1.05rem}
.release-meta{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem}
.change-group{display:flex;gap:.7rem;align-items:flex-start;margin:.45rem 0}
.change-badge{flex:0 0 auto;margin-top:.15rem;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;padding:.12rem .5rem;border-radius:1rem;
  min-width:4.2rem;text-align:center}
.change-added{background:rgba(68,214,44,.16);color:#1f7a12}
.change-changed{background:#e8f0fe;color:#14498f}
.change-fixed{background:#fff4e0;color:#95611a}
.change-removed{background:#fdeceb;color:#a02b22}
.change-list{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem;
  font-size:.92rem;line-height:1.45}
/* Companion-page tabs: hop between What's new and Suggestions. */
.info-tabs{display:inline-flex;gap:.3rem;margin:0 0 1rem;padding:.25rem;
  background:#eef0f4;border-radius:.6rem}
.info-tabs a{font-size:.9rem;font-weight:600;color:var(--gray);text-decoration:none;
  padding:.35rem .8rem;border-radius:.45rem}
.info-tabs a:hover{color:var(--navy)}
.info-tabs a.on{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.footer-links{margin:0;font-size:.72rem}
.footer-links a{color:var(--gray);text-decoration:none}
.footer-links a:hover{color:var(--navy);text-decoration:underline}
/* ---- Suggestions box ---- */
.suggestions{display:flex;flex-direction:column;gap:.7rem;margin:.4rem 0 1rem}
.suggestion{border:1px solid var(--line);border-radius:.6rem;padding:.7rem .85rem;background:#fff}
.suggestion-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem}
.suggestion-title{font-weight:600}
.suggestion-desc{margin:.4rem 0 .2rem;font-size:.92rem;color:var(--ink);white-space:pre-wrap}
/* Curator note ("Released in v1.03") — a small brand-green line under the head. */
.suggestion-note{margin:.35rem 0 .1rem;font-size:.82rem;font-weight:600;color:#276a3c;
  background:#eaf7ee;border:1px solid #b6e0c2;border-radius:.4rem;
  padding:.25rem .55rem;display:inline-block}
.suggestion-img{display:block;max-width:100%;max-height:16rem;width:auto;margin:.5rem 0 .2rem;
  border:1px solid var(--line);border-radius:.5rem}
.suggestion-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem;margin-top:.35rem;font-size:.8rem}
.btn.sug-remove{font-size:.78rem;padding:.25rem .6rem;color:#a02b22}
.btn.sug-remove:hover{background:#fdeceb;border-color:rgba(161,32,32,.4)}
.sug-status{flex:0 0 auto;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;padding:.12rem .5rem;border-radius:1rem}
.sug-open{background:#eef0f4;color:var(--gray)}
.sug-planned{background:#e8f0fe;color:#14498f}
.sug-in_progress{background:#fff4e0;color:#95611a}
.sug-ready{background:#e0f5f2;color:#0b6e63}
.sug-done{background:rgba(68,214,44,.16);color:#1f7a12}
.sug-declined{background:#fdeceb;color:#a02b22}
.poweredby{width:120px;margin:0 auto}
.poweredby .pb{display:flex;justify-content:space-between;
  font-size:.5rem;font-weight:600;line-height:1;text-transform:lowercase;
  color:rgba(0,32,91,.7);margin:0 0 .35rem}
.poweredby .pb span{white-space:pre}
.poweredby img{width:100%;height:auto;display:block}

/* login */
.login{flex:1;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  background:var(--navy);padding:1.5rem}
/* On login the page background is navy, where a navy lockup would vanish — so
   the footer lives inside the white panel instead of at the page foot. */
.login .site-footer{padding:1.5rem 0 0;margin-top:1.5rem;border-top:1px solid var(--line)}
.login .panel{background:#fff;border-radius:1rem;padding:clamp(1.75rem,5vw,2.75rem);
  max-width:24rem;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login .logo{width:min(180px,55%);height:auto;margin:0 auto .4rem;display:block}
/* sits BELOW the sign-in button — it labels the environment you are about to
   enter, not the product name above it. block + fit-content (not inline-block)
   so it takes its own line: the sign-in button is inline-level and the two
   would otherwise sit side by side whenever the panel is wide enough. */
.login .env-tag{display:block;width:fit-content;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#8a6d1a;background:#fff8e6;border:1px solid #ffe08a;
  padding:.2rem .6rem;border-radius:1rem;margin:1.15rem auto 0}
.login p{color:var(--gray);margin:.4rem 0 1.6rem;font-size:.95rem}
.ms{display:inline-flex;align-items:center;gap:.6rem;background:#2f2f2f;color:#fff;
  text-decoration:none;padding:.7rem 1.1rem;border-radius:.5rem;font-weight:600;font-size:.95rem}
.ms:hover{background:#1f1f1f}
.ms .g{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:16px;height:16px}
.ms .g i{display:block}
.notice{background:#fff5f5;border:1px solid #ffd0d0;color:#a12020;
  border-radius:.6rem;padding:.8rem 1rem;font-size:.9rem;margin-bottom:1.2rem;text-align:left}
.banner{background:#fff8e6;border:1px solid #ffe08a;color:#8a6d1a;
  border-radius:.6rem;padding:.7rem 1rem;font-size:.88rem;margin-bottom:1.5rem}

/* Transient confirmation ("Reply sent", "Mail sent") — a success-toned banner
   that JS fades out after a few seconds (app.js). Distinct green so it reads as
   "done", not "heads up". .banner-flash-out is the fade the script adds before
   removing the node. */
.banner-flash{background:#eaf7ee;border-color:#b6e0c2;color:#276a3c;
  transition:opacity .4s ease, transform .4s ease}
.banner-flash-out{opacity:0;transform:translateY(-.35rem)}

/* ============================ Tasks (Innergy) ============================ */
.tasks-sub{margin:.2rem 0 1rem}
.tasks-sub .sync-ok{color:#276a3c;font-weight:600}
.tasks-sub .sync-stale{color:#b3541e;font-weight:600}
.tasklist{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0}
/* Each task is a click-to-expand disclosure: summary = the row, detail below. */
.task{border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:.6rem;background:#fff}
.task-high{border-left-color:#e0a800}
.task-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem .9rem;cursor:pointer;list-style:none}
.task-summary::-webkit-details-marker{display:none}
.task-summary::marker{content:""}
.task-summary:hover{background:#f8fafc}
.task[open] .task-summary{border-bottom:1px solid var(--line)}
.task-detail{padding:.6rem .9rem .8rem}
.task-desc{white-space:pre-line;margin:0 0 .6rem;color:var(--ink);font-size:.9rem;line-height:1.4}
.task-facts{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;margin:0;font-size:.85rem}
.task-facts>div{display:contents}
.task-facts dt{color:var(--gray);font-weight:600}
.task-facts dd{margin:0;color:var(--ink);min-width:0}
.task-main{min-width:0}
.task-name{display:block;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-ctx{display:block;font-size:.78rem;color:var(--gray);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-side{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.task-pri{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#8a6d1a;background:#fff5d6;border:1px solid #ffe08a;border-radius:1rem;padding:.1rem .5rem}
.task-due{font-size:.8rem;color:var(--gray)}
.task-due.overdue{color:#c0392b;font-weight:600}
.task-due.nodue{opacity:.7}
/* Tasks sub-navigation (My Tasks | Projects) */
.subtabs{display:flex;gap:.3rem;margin:.2rem 0 1rem;border-bottom:1px solid var(--line)}
.subtab{padding:.45rem .9rem;text-decoration:none;color:var(--gray);font-weight:600;
  font-size:.9rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtab:hover{color:var(--ink)}
.subtab.active{color:var(--navy);border-bottom-color:var(--navy)}
/* Innergy Notes (read view) */
.notes-kinds{margin:.1rem 0 .7rem}
.subtab-badge{display:inline-block;min-width:1.15rem;padding:0 .35rem;margin-left:.1rem;
  border-radius:1rem;background:rgba(0,32,91,.09);color:var(--navy);font-size:.7rem;
  font-weight:700;text-align:center}
.notes-search{display:flex;gap:.5rem;margin:.1rem 0 1rem;flex-wrap:wrap}
.notes-search input[type=search]{flex:1 1 22rem;min-width:0}
.notelist{display:flex;flex-direction:column;gap:.75rem}
.notecard{border:1px solid var(--line);border-radius:.6rem;background:#fff;padding:.7rem .85rem}
.notecard-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.notecard-num{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.notecard-name{font-weight:600;min-width:0}
.notecard-proj{color:var(--gray);font-size:.85rem}
.notecard-status{margin-left:auto;font-size:.68rem;color:var(--gray);border:1px solid var(--line);
  border-radius:1rem;padding:.02rem .55rem;white-space:nowrap}
.note-entry{border-top:1px solid var(--line);padding-top:.5rem;margin-top:.5rem}
.note-entry:first-of-type{border-top:0;padding-top:0;margin-top:0}
.note-type{display:inline-block;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gray);font-weight:700;margin-bottom:.2rem}
.note-body{white-space:pre-wrap;word-break:break-word;line-height:1.5;font-size:.9rem;color:var(--ink)}
.notes-cap{font-size:.8rem;margin-top:.8rem}
/* Project hub */
.projlist{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0}
.proj{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid var(--line);border-radius:.6rem;padding:.65rem .9rem;
  text-decoration:none;background:#fff}
.proj:hover{background:#f1f4f9}
.proj-main{min-width:0}
.proj-name{display:block;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-ctx{display:block;font-size:.78rem;color:var(--gray);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-count{flex:0 0 auto;font-size:.75rem;font-weight:700;color:var(--navy);
  background:rgba(0,32,91,.08);border-radius:1rem;padding:.15rem .6rem;white-space:nowrap}
.proj-count.zero{color:var(--gray);background:#eef1f5;font-weight:600}
.backlink{text-decoration:none;color:var(--gray);font-size:.85rem;font-weight:600}
.backlink:hover{color:var(--navy)}
.proj-toolbar{margin:0 0 .7rem}
.task.done{opacity:.72;border-left-color:#c9d3c0}
.task.done .task-name{text-decoration:line-through;color:var(--gray);font-weight:500}
.task-check{flex:0 0 auto;color:#276a3c;font-weight:700}
/* New-task form (disclosure on My Tasks) */
.newtask{margin:.4rem 0 1.2rem;border:1px solid var(--line);border-radius:.6rem;background:#fff}
.newtask>summary{cursor:pointer;padding:.55rem .9rem;font-weight:600;color:var(--navy);
  list-style:none}
.newtask>summary::-webkit-details-marker{display:none}
.newtask[open]>summary{border-bottom:1px solid var(--line)}
.newtask-form{display:flex;flex-direction:column;gap:.6rem;padding:.8rem .9rem}
.newtask-row{display:flex;gap:.8rem;flex-wrap:wrap}
.newtask-row .field{flex:1 1 12rem;min-width:0}
.newtask-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.newtask-hint{font-size:.78rem}
.proj-detail-head{margin-bottom:1rem}
.proj-detail-title{margin:.3rem 0 .1rem}
/* Admin Innergy picker cell */
.innergy-form{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.innergy-form select{max-width:12rem}

/* ============================ Calendar (#6) ============================ */
/* Sticky page title — same feel as the calendar's "Calendar." header, for
   profile/admin so the title stays put while the long form scrolls. */
.page-head{position:sticky;top:0;z-index:30;background:var(--bg);
  padding:.5rem 0;margin:-.2rem 0 .5rem;border-bottom:1px solid var(--line)}
.cal-wrap{max-width:64rem}
/* Filter rail — the SAME components as the inbox folder rail (.rail / .rail-item /
   .src-row / .src-exp / .rail-group-label), so navigating between the two feels
   identical. The main calendar fills the rest of the window; hide rules are scoped
   to .cal-wrap so the rail's own swatches stay lit. Remembered per browser. */
/* Full-height, INDEPENDENT scrolling like the inbox: the layout fills #appMain
   (the page is body_class="app-body"), and the rail and the calendar each own
   their own vertical scroll — scrolling one never moves the other. */
.cal-layout{display:flex;align-items:stretch;gap:0;flex:1;min-height:0}
/* Tighter than the default page .wrap clamp — the calendar is a dense grid, not a
   reading column, so it earns its window back. */
.cal-layout > .cal-wrap{margin:0;flex:1 1 auto;min-width:0;max-width:none;
  overflow-y:auto;padding:.7rem 1.1rem}
.cal-rail{flex:0 0 15rem;overflow-y:auto}
.cal-rail-body{display:flex;flex-direction:column;gap:.3rem}
.cal-rail-toggle{display:none}
.cal-conn{justify-content:flex-start;gap:.45rem;font-weight:600}
.cal-conn .cal-master{accent-color:var(--navy);margin:0;flex:0 0 auto}
.cal-cal-item{justify-content:flex-start;font-weight:500;gap:.5rem}
.cal-cal-item input{accent-color:var(--navy);margin:0;flex:0 0 auto}
.cal-fgroup .cal-fgroup-body{display:none;padding-left:1.55rem}
.cal-fgroup.open .cal-fgroup-body{display:block}
.cal-fgroup.open .src-exp .chev{transform:rotate(90deg)}
/* Master toggled off: the whole connection is hidden from the calendar, but its
   per-calendar ticks are kept — dim the list so it's clear the selection stands,
   the group is just switched off. */
.cal-fgroup.group-off .cal-fgroup-body{opacity:.45}
/* Mini month picker at the top of the rail (JS-rendered). */
.cal-mini{border:1px solid var(--line);border-radius:.6rem;padding:.45rem .5rem;
  background:#fff;margin:0 .05rem .5rem}
.cal-mini-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.25rem;font-size:.82rem;font-weight:700;color:var(--ink)}
.cal-mini-nav{background:none;border:0;cursor:pointer;color:var(--navy);font-size:1.1rem;
  line-height:1;padding:.05rem .35rem;border-radius:.3rem}
.cal-mini-nav:hover{background:#f1f4f9}
.cal-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.cal-mini-dow{font-size:.58rem;color:var(--gray);font-weight:700;padding:.1rem 0}
.cal-mini-day{font-size:.72rem;padding:.22rem 0;border-radius:.3rem;text-decoration:none;
  color:var(--ink);display:block}
.cal-mini-day:hover{background:#f1f4f9}
.cal-mini-day.out{color:#c7ccd4}
.cal-mini-day.today{background:var(--green);color:#fff;font-weight:700}
@media (max-width:800px){
  /* app-body is height:auto on mobile — panes scroll with the page, rail on top. */
  .cal-layout{flex-direction:column;gap:0}
  .cal-rail,.cal-layout > .cal-wrap{overflow:visible}
  .cal-rail{flex:none;width:100%;border-right:0;border-bottom:1px solid var(--line);
    padding:.7rem .75rem}
  .cal-rail-toggle{display:block;width:100%;text-align:left;cursor:pointer;
    border:1px solid var(--line);border-radius:.6rem;padding:.55rem .8rem;
    background:#fff;font-weight:600;color:var(--navy)}
  .cal-rail.collapsed .cal-rail-body{display:none}
  .cal-rail:not(.collapsed) .cal-rail-toggle{margin-bottom:.5rem}
}
/* Sticky within the independently-scrolling .cal-wrap. NO negative top margin:
   under sticky top:0 that leaves a gap above the header's painted background
   where scrolled agenda content peeks through (the "scroll glitch"). Flush bg
   at top:0 covers it. The extra top pad keeps a solid band the events scroll under. */
.cal-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.8rem;position:sticky;top:0;z-index:30;background:var(--bg);
  padding:.55rem 0 .55rem;margin:0 0 .3rem;border-bottom:1px solid var(--line)}
.cal-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cal-views{display:inline-flex;gap:.3rem}
.cal-new{white-space:nowrap}
/* Per-calendar colours — SAME source coding as the inbox tags (tag-outlook /
   tag-gmail): Outlook blue, Google red/pink. Kept in sync deliberately so a
   source is one colour everywhere in Vista. */
/* --c  = the strong accent (left borders, legend dots, the Today outline)
   --cbg = the LIGHT tint used to fill event chips/blocks (the inbox tag bg)
   --ctext = readable text on that tint. Chips are tinted, not solid-dark, so a
   dense month/week grid reads calm instead of shouting. */
.cal-outlook{--c:#14498f;--cbg:#e8f0fe;--ctext:#14498f}
.cal-gmail{--c:#a02b22;--cbg:#fdeceb;--ctext:#a02b22}
.cal-icloud{--c:#3a3f47;--cbg:#eef1f4;--ctext:#3a3f47}
/* Innergy tasks overlaid on the calendar — Innergy's brand ORANGE, dashed left
   edge to read as a due-date marker rather than a real event. */
.cal-innergy{--c:#c2410c;--cbg:#fdece0;--ctext:#9a3412}
.cal-event.cal-task{border-left-style:dashed}
.cal-taskmark{color:var(--c,#c2410c);font-weight:700}
.cal-time.cal-due{color:var(--ctext,#9a3412);font-weight:700}
.cal-dot{width:.8rem;height:.8rem;border-radius:50%;background:var(--c);display:inline-block}
/* Dot cluster for an event synced across calendars: one colour per calendar,
   packed tight so it reads as a single marker with two (or more) colours. */
.cal-dotset{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}

/* ---- Agenda ---- */
.cal-agenda{display:flex;flex-direction:column;gap:1.4rem}
.cal-day-label{font-family:var(--display);font-weight:700;font-size:1rem;
  padding-bottom:.35rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.cal-events{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.cal-event{display:flex;align-items:baseline;gap:.8rem;padding:.5rem .7rem;
  border:1px solid var(--line);border-left:4px solid var(--c);border-radius:.5rem;
  background:#fff}
.cal-event.cal-declined{opacity:.55}
.cal-event.cal-declined .cal-title{text-decoration:line-through}
.cal-time{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:.85rem;
  color:var(--gray);min-width:5.5rem}
.cal-event-main{flex:1 1 auto;display:flex;flex-direction:column;gap:.1rem;
  text-decoration:none;color:var(--ink);min-width:0}
.cal-event-main:hover .cal-title{text-decoration:underline}
.cal-title{font-weight:600;font-size:.95rem}
.cal-loc,.cal-org{font-size:.8rem;color:var(--gray)}
.cal-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
/* Small source tag (Outlook / Google) — colours no longer encode the source, so
   name it on the agenda/day rows. */
.cal-src{font-size:.68rem;color:var(--gray);border:1px solid var(--line);
  border-radius:1rem;padding:.02rem .45rem;letter-spacing:.02em;flex:0 0 auto}
/* Multi-day continuation arrows (agenda/day rows + month/week chips). */
.cal-cont{color:var(--ink);font-weight:900;font-size:1.15em;line-height:1}
/* Past events: dimmed everywhere; struck through in the agenda. */
.cal-past{opacity:.55}
.cal-agenda .cal-event.cal-past .cal-title{text-decoration:line-through}
.cal-band.cal-past{opacity:.42}
.cal-rsvp{flex:0 0 auto;display:inline-flex;gap:.25rem}
.cal-rsvp-btn{padding:.2rem .5rem;font-size:.78rem;min-height:auto}
.cal-resp{flex:0 0 auto;font-size:.75rem;font-weight:700;padding:.15rem .5rem;
  border-radius:1rem;white-space:nowrap}
.cal-resp-accepted{background:rgba(47,158,68,.14);color:#2f9e44}
.cal-resp-tentative{background:rgba(240,140,0,.16);color:#b25e00}
.cal-resp-declined{background:rgba(161,32,32,.12);color:#a12020}

/* ---- Month grid ---- */
.cal-monthbar{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
/* Month view fits the window (desktop): the wrap becomes a flex column that can't
   scroll, and the six week rows share the leftover height evenly. Cells clip
   (overflow:hidden already) rather than push the grid past the fold. Mobile keeps
   its natural min-height cells and scrolls — cramming a month into a phone is worse
   than a short scroll. */
@media (min-width:801px){
  .cal-wrap.cal-monthfit{display:flex;flex-direction:column;overflow:hidden;min-height:0}
  .cal-monthfit .cal-month{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .cal-monthfit .cal-mweek{flex:1 1 0;min-height:0}
  .cal-monthfit .cal-mcells{height:100%}
  .cal-monthfit .cal-mcell{min-height:0}
  /* Compact the cell contents so a compressed row shows its chips whole instead of
     slicing text mid-line — daynum, lane reserve, chips and the +more link all
     shrink a touch. Month view only (week/agenda keep their roomier chips). */
  /* Match the bar overlay's 1.4rem lanes so timed events clear the bars exactly;
     --lanes is now per-cell, so a band-free day reserves nothing and rises up. */
  .cal-monthfit .cal-lanespace{height:calc(var(--lanes,0) * 1.4rem)}
  .cal-monthfit .cal-timed{font-size:.7rem;padding:.06rem .25rem;border-radius:.3rem}
  .cal-monthfit .cal-timed:hover{background:#f1f4f9}
  .cal-monthfit .cal-daynum{font-size:.75rem;padding:.02rem .3rem}
  .cal-monthfit .cal-more-btn{font-size:.66rem;color:var(--gray);padding-left:.25rem}
}
.cal-monthlabel{font-family:var(--display);font-size:1.05rem;min-width:9rem;text-align:center}
/* Header row, then a week row per week. Each week has day cells (number + timed
   chips) with an absolutely-positioned band layer for spanning all-day events. */
.cal-month{border:1px solid var(--line);border-radius:.4rem;overflow:hidden}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);background:#fafbfd;
  border-bottom:1px solid var(--line)}
.cal-dow span{padding:.3rem .45rem;font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gray);font-weight:700}
.cal-mweek{position:relative}
.cal-mweek:not(:last-child){border-bottom:1px solid var(--line)}
.cal-mcells{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-mcell{min-height:7rem;padding:.25rem .3rem;display:flex;flex-direction:column;
  gap:.14rem;overflow:hidden}
/* A little air under the day number before the first event, like Google's grid. */
.cal-mcell .cal-daynum{margin-bottom:.05rem}
.cal-mcell:not(:first-child){border-left:1px solid var(--line)}
.cal-mcell.cal-out{background:#fafbfd}
.cal-mcell.cal-out .cal-daynum{color:var(--gray);opacity:.55}
.cal-mcell.cal-today .cal-daynum{background:var(--navy);color:#fff}
/* Reserve vertical room for the bar lanes so timed chips sit BELOW the bars. */
.cal-lanespace{flex:0 0 auto;height:calc(var(--lanes,0) * 1.4rem + .2rem)}
.cal-timed{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--ink);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:.02rem .1rem}
.cal-timed:hover .cal-ttitle{text-decoration:underline}
.cal-tdot{flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;background:var(--c)}
.cal-ttitle{overflow:hidden;text-overflow:ellipsis}
/* Spanning all-day bars, laid over the cells by grid-column (days) / grid-row (lane). */
.cal-bands{position:absolute;top:1.6rem;left:0;right:0;display:grid;
  grid-template-columns:repeat(7,1fr);grid-auto-rows:1.4rem;pointer-events:none}
.cal-band{pointer-events:auto;margin:1px 2px;height:1.2rem;display:flex;align-items:center;
  gap:.15rem;background:var(--cbg);color:var(--ctext);border-left:3px solid var(--c);
  border-radius:.25rem;padding:0 .35rem;font-size:.72rem;font-weight:600;line-height:1;
  text-decoration:none;overflow:hidden;white-space:nowrap}
.cal-band:hover{filter:brightness(.96)}
/* Merged (multi-calendar) all-day bar: neutral gray fill reads faint, so outline
   it dark to set it apart from a regular event. Inset shadow keeps the rounded
   corners and adds no layout width. The dots inside carry the real colours. */
.cal-band.cal-merged{box-shadow:inset 0 0 0 1.3px rgba(30,30,30,.45)}
.cal-band.is-left{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.cal-band.is-right{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.cal-btitle{overflow:hidden;text-overflow:ellipsis}
.cal-bcont{flex:0 0 auto;font-weight:900}
/* Day-view date range behind a multi-day event's title. */
.cal-range{color:var(--gray);font-weight:400;font-size:.85em}

/* Week view: one month week, taller cells, with a dated (clickable) header. */
.cal-dow-day{display:block;padding:.4rem .55rem;text-decoration:none;color:var(--ink);
  font-size:.82rem;border-right:1px solid var(--line)}
.cal-dow-day:last-child{border-right:0}
.cal-dow-day:hover{background:rgba(0,32,91,.06)}
.cal-dow-day.cal-today{background:var(--navy);color:#fff}
.cal-dow-name{text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;
  color:var(--gray);font-weight:700}
.cal-dow-day.cal-today .cal-dow-name{color:rgba(255,255,255,.8)}
.cal-dow-num{font-weight:700}
.cal-weekview .cal-mcell{min-height:14rem}
.cal-weekview .cal-mcell.cal-today{background:rgba(0,32,91,.04)}
.cal-weekview .cal-bands{top:.2rem}

/* "+N more" opens a per-day modal listing the whole day. */
.cal-more-btn{border:0;background:none;cursor:pointer;font:inherit;text-align:left;padding:0}
.cal-more-btn:hover{text-decoration:underline;color:var(--navy)}
.cal-modal-back{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000}
.cal-daypop{position:fixed;z-index:1001;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(23rem,92vw);max-height:80vh;overflow:auto;background:#fff;border-radius:.7rem;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.cal-daypop-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem .9rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.cal-daypop-head strong{font-family:var(--display)}
.cal-daypop-x{border:0;background:none;font-size:1.05rem;cursor:pointer;color:var(--gray);line-height:1}
.cal-daypop-x:hover{color:var(--ink)}
.cal-daypop-body{padding:.6rem .9rem;display:flex;flex-direction:column;gap:.35rem}
.cal-daypop-body .cal-band{margin:0;height:auto;min-height:1.35rem;white-space:normal}
.cal-daypop-body .cal-timed{white-space:normal}
.cal-daynum{display:inline-block;font-size:.8rem;font-weight:600;color:var(--ink);
  text-decoration:none;padding:.05rem .3rem;border-radius:.3rem}
.cal-daynum:hover{background:rgba(0,32,91,.08)}
.cal-chip{display:block;font-size:.72rem;line-height:1.25;color:var(--ctext);
  background:var(--cbg);border-left:2px solid var(--c);
  border-radius:.3rem;padding:.08rem .3rem;margin-top:.15rem;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-chip:hover{filter:brightness(.96)}
.cal-chip-t{font-variant-numeric:tabular-nums;opacity:.7}
.cal-more{display:block;font-size:.7rem;color:var(--gray);margin-top:.1rem;padding-left:.3rem}

/* ---- Week (7-day) grid ---- */
/* Week and month break the calendar out of the reading-width cap so the grid
   uses the full page — a 7-wide grid needs the room. */
.cal-wrap.cal-wide{max-width:none}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem;align-items:start}
.cal-wcol{border:1px solid var(--line);border-radius:.5rem;min-height:8rem;
  display:flex;flex-direction:column;overflow:hidden;background:#fff}
.cal-wcol.cal-today{outline:2px solid var(--navy);outline-offset:-2px}
.cal-wcol-head{display:flex;align-items:baseline;justify-content:center;gap:.3rem;
  padding:.35rem;text-decoration:none;color:var(--ink);background:#fafbfd;
  border-bottom:1px solid var(--line)}
.cal-wcol-head:hover{background:rgba(0,32,91,.06)}
.cal-wcol-dow{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gray);font-weight:700}
.cal-wcol-num{font-size:.95rem;font-weight:700}
.cal-wcol-events{display:flex;flex-direction:column;gap:.2rem;padding:.3rem;overflow:hidden}
/* Mobile: the whole calendar fits the screen — no horizontal scroll in either
   the week OR the month grid. Columns tighten and event times drop. */
@media (max-width:800px){
  /* Month + week share the spanning-bar grid; both fit the screen (7 columns). */
  .cal-mcell{min-height:4.6rem;padding:.12rem}
  .cal-weekview .cal-mcell{min-height:9rem}
  .cal-daynum{font-size:.72rem;padding:.02rem .22rem}
  .cal-dow span{padding:.2rem .15rem;font-size:.56rem}
  .cal-dow-day{padding:.25rem .15rem;font-size:.62rem}
  .cal-dow-name{font-size:.52rem}
  .cal-more{font-size:.56rem;padding-left:.15rem}
  .cal-timed{font-size:.6rem;gap:.2rem}
  .cal-tdot{width:.4rem;height:.4rem}
  .cal-band{font-size:.58rem;height:1rem;margin:1px}
  .cal-bands{grid-auto-rows:1.15rem;top:1.4rem}
  .cal-weekview .cal-bands{top:.2rem}
  .cal-lanespace{height:calc(var(--lanes,0) * 1.15rem + .15rem)}
  .cal-chip-t{display:none}
}

/* ---- Event form ---- */
.cal-form-wrap{max-width:34rem}
.cal-form{display:flex;flex-direction:column;gap:.9rem;margin-top:.5rem}
.cal-when{display:flex;gap:.8rem;flex-wrap:wrap}
.cal-when .field{flex:1 1 8rem}
.cal-allday{flex-direction:row;align-items:center;gap:.45rem;font-weight:600}
.cal-form input[type=text],.cal-form input[type=date],.cal-form input[type=time],
.cal-form select,.cal-form textarea{font-family:var(--body);font-size:.95rem;
  padding:.5rem .6rem;border:1px solid var(--line);border-radius:.5rem;background:#fff;
  color:var(--ink);width:100%}
.cal-form input:disabled{background:#f4f6fa;color:var(--gray)}
.cal-form-actions{display:flex;gap:.6rem;align-items:center}
.cal-delete{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.cal-rsvp-bar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 1rem;
  padding:.6rem .8rem;background:#f4f6fa;border-radius:.6rem;font-size:.9rem}

/* Meeting-invite RSVP inside the reading pane (_message_pane.html). A calm card
   with a navy accent, so an invite reads as actionable without shouting. */
.msg-rsvp-bar{margin:.2rem 0 1.1rem;padding:.7rem .9rem;background:#f4f6fa;
  border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:.6rem}
.msg-rsvp-head{display:flex;align-items:center;gap:.45rem;font-size:.92rem;
  font-weight:600;color:var(--ink)}
.msg-rsvp-ico{font-size:1.05rem;line-height:1}
.msg-rsvp-when{overflow-wrap:anywhere}
.msg-rsvp-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.msg-rsvp-label{font-size:.85rem;color:var(--gray)}
.msg-rsvp-bar .btn.tog{min-width:auto;padding:.3rem .7rem;font-size:.85rem}
/* Your CURRENT response — a calm, response-coloured tint (matches .cal-resp-*),
   NOT the loud green .btn.on. Only the previously-selected button carries it;
   an unanswered invite leaves all buttons neutral (ghost). Shared by the email
   reading-pane RSVP and the calendar guest view. */
.btn.tog.sel{font-weight:700}
.btn.tog.sel-accepted{background:rgba(47,158,68,.14);border-color:rgba(47,158,68,.45);color:#1e7a34}
.btn.tog.sel-tentative{background:rgba(240,140,0,.16);border-color:rgba(240,140,0,.4);color:#b25e00}
.btn.tog.sel-declined{background:rgba(161,32,32,.12);border-color:rgba(161,32,32,.4);color:#a12020}
.msg-rsvp-msgwrap{display:block;margin-top:.6rem}
.msg-rsvp-msg,.cal-rsvp-form textarea,.cal-propose textarea{width:100%;font-family:var(--body);
  font-size:.9rem;padding:.4rem .5rem;border:1px solid var(--line);border-radius:.45rem;
  background:#fff;color:var(--ink);resize:vertical}

/* Guest (non-organiser) event view — read-only summary + RSVP + propose. */
.cal-view{padding:.2rem 0 .6rem}
.cal-view-title{font-family:var(--display);font-size:1.2rem;margin:0 0 .4rem}
.cal-view-line{margin:.15rem 0;font-size:.95rem}
.cal-view-desc{margin:.6rem 0 0;white-space:pre-wrap;color:var(--ink)}
.cal-rsvp-form{display:flex;flex-direction:column;gap:.6rem;margin:.4rem 0 1rem}
.cal-rsvp-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.cal-propose{margin:.4rem 0 1rem;border:1px solid var(--line);border-radius:.6rem;padding:.2rem .8rem}
.cal-propose summary{cursor:pointer;font-weight:600;padding:.5rem 0}
.cal-propose[open] summary{margin-bottom:.4rem}
.cal-propose form{display:flex;flex-direction:column;gap:.7rem;padding-bottom:.7rem}
.cal-propose-note{margin:.2rem 0 0}

/* Recurrence scope selector on the edit form. */
.cal-scope{border:1px solid var(--line);border-radius:.6rem;padding:.5rem .8rem;display:flex;
  flex-wrap:wrap;gap:.3rem 1rem;align-items:center}
.cal-scope legend{padding:0 .3rem}
.cal-scope-opt{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;font-weight:500}
.cal-delete-scope{max-width:16rem}

/* Section heading with a right-aligned action (e.g. Calendars + Refresh). */
.h2row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  flex-wrap:wrap}
.h2row h2{margin:0}
.btn.sm{padding:.28rem .6rem;font-size:.85rem;line-height:1.2}

/* Google calendar picker (Profile). */
.calpick{display:flex;flex-direction:column;gap:.4rem;margin:.4rem 0 1rem;max-width:34rem}
/* One row per calendar/account: its colour swatch, then the show toggle + name. */
.calrow{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;
  border:1px solid var(--line);border-radius:.55rem;background:#fff}
.calrow-show{display:flex;align-items:center;gap:.5rem;cursor:pointer;flex:1 1 auto;margin:0}
.calrow-show input{flex:0 0 auto;margin:0}
.calrow-name{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.4rem}
.sharedmbx{list-style:none;margin:.2rem 0 1rem;padding:0;display:flex;
  flex-direction:column;gap:.35rem;max-width:30rem}
.sharedmbx-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border:1px solid var(--line);border-radius:.5rem;padding:.45rem .7rem;background:#fff}
.sharedmbx-name{font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sharedmbx-remove{padding:.25rem .6rem;font-size:.8rem;min-height:auto}
.prefsform{display:flex;flex-direction:column;gap:.7rem;max-width:24rem;margin:.4rem 0 1rem}
.prefsform select,.prefsform input[type=text],.prefsform input[type=email],
.prefsform input:not([type]),
.prefsform textarea{font-family:var(--body);font-size:.95rem;padding:.5rem .6rem;
  border:1px solid var(--line);border-radius:.5rem;background:#fff;color:var(--ink);width:100%}
.prefsform textarea{resize:vertical;min-height:5.5rem;line-height:1.5}
.prefsform select:focus-visible,.prefsform input:focus-visible,
.prefsform textarea:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.prefsform .btn{align-self:flex-start}
/* One swatch button per row; the palette opens in a popover (profile.js). */
.colorpick{display:inline-flex;line-height:0;flex:none}
.colorpick-trigger{width:1.7rem;height:1.7rem;border-radius:.4rem;padding:0;cursor:pointer;
  border:1px solid rgba(0,0,0,.25);box-sizing:border-box;background:#c0c4cc;
  display:inline-flex;align-items:center;justify-content:center}
.colorpick-trigger:hover{outline:2px solid var(--navy);outline-offset:1px}
/* Default (not explicitly chosen): still shows the calendar's colour, but a
   dashed ring signals it's automatic, not a pick you made. */
.colorpick-trigger.is-default{border-style:dashed;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
/* Full-screen catcher so a click anywhere off the popover closes it. */
.colorpick-back{position:fixed;inset:0;z-index:199;background:transparent}
.colorpick-pop{z-index:200;display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;
  padding:.55rem;background:#fff;border:1px solid var(--line);border-radius:.6rem;
  box-shadow:0 8px 26px rgba(0,0,0,.18);max-width:16rem}
/* An author `display` beats the [hidden] UA rule, so hiding via the `hidden`
   attribute silently does nothing without these — which is exactly what kept the
   palette stuck open. Keep them right beside the display rules above. */
.colorpick-pop[hidden],.colorpick-back[hidden]{display:none}
.colorpick-swatch{width:1.4rem;height:1.4rem;border-radius:.3rem;cursor:pointer;padding:0;
  border:1px solid rgba(0,0,0,.15);box-sizing:border-box;position:relative}
.colorpick-swatch:hover,.colorpick-swatch:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
/* The current choice gets a ring + tick so you can see what's set. */
.colorpick-swatch.is-selected{outline:2px solid var(--navy);outline-offset:1px}
.colorpick-swatch.is-selected::after{content:"";position:absolute;inset:0;margin:auto;
  width:.45rem;height:.8rem;border:solid #fff;border-width:0 .16rem .16rem 0;
  transform:translateY(-.08rem) rotate(45deg);filter:drop-shadow(0 0 1px rgba(0,0,0,.5))}
.colorpick-swatch-none{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--gray);font-size:.95rem;line-height:1}
.colorpick-swatch-none.is-selected::after{border-color:var(--navy);filter:none}
.calpick .btn{align-self:flex-start;margin-top:.3rem}
/* Per-connection feature toggles — small on/off pills inline on each provider
   row (green = on, outline = off), so you can run e.g. Google Calendar without
   Google Mail. Each is its own tiny form that posts on click. */
.cap-toggles{display:flex;gap:.35rem;margin-top:.45rem;flex-wrap:wrap}
.cap-toggles .inline{margin:0}
.btn.tog.cap-tog{min-width:auto;padding:.18rem .6rem;font-size:.78rem;font-weight:600}
.msg-rsvp-note{margin:.5rem 0 0;font-size:.85rem;color:var(--gray)}

/* Editable reply headers (To/Cc/Bcc/Subject) above the reply body. Same compact
   label-beside-field look as compose's .mailrow, so new/reply/forward match. */
.reply-fields{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.6rem}
.reply-frow{display:flex;align-items:center;gap:.5rem}
/* [hidden] must beat display:flex so the Cc/Bcc rows can be toggled off. */
.reply-frow[hidden]{display:none}
.reply-flabel{flex:0 0 3.6rem;font-size:.8rem;color:var(--gray);font-weight:600}
.reply-from-ro{color:var(--gray);background:#f7f8fa;cursor:default}
.reply-frow input{flex:1 1 auto;min-width:0;font-family:var(--body);font-size:.9rem;
  padding:.35rem .5rem;border:1px solid var(--line);border-radius:.45rem;
  background:#fff;color:var(--ink)}
/* The From picker (reply send-as): the base select rule gives it the box; it
   just needs to stretch like the To/Subject inputs beside it. */
.reply-frow select{flex:1 1 auto;min-width:0}

/* ===================== Left module rail (_apprail.html) ===================== */
:root{--rail-w:52px}
/* Only pages that render the rail get the gutter — login stays full-bleed. */
body:has(.apprail){padding-left:var(--rail-w)}
.apprail{position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);z-index:60;
  background:var(--navy);display:flex;flex-direction:column;align-items:center;
  gap:.35rem;padding:.5rem 0;padding-top:calc(.5rem + env(safe-area-inset-top))}
.apprail-item{width:2.5rem;height:2.5rem;display:flex;align-items:center;
  justify-content:center;border-radius:.6rem;color:rgba(255,255,255,.82);
  text-decoration:none;position:relative}
.apprail-item svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.apprail-item:hover{background:rgba(255,255,255,.12);color:#fff}
.apprail-item.active{background:rgba(255,255,255,.16);color:var(--green)}
/* the active module also gets a green edge marker, Outlook-style */
.apprail-item.active::before{content:"";position:absolute;left:-.5rem;top:.4rem;
  bottom:.4rem;width:3px;border-radius:2px;background:var(--green)}
.apprail-item:focus-visible{outline:2px solid var(--green);outline-offset:1px}
/* What's New + Suggestions, pinned to the bottom of the rail. */
.apprail-util{margin-top:auto;display:flex;flex-direction:column;align-items:center;
  gap:.35rem}
/* Mobile: the module rail becomes a horizontal icon bar at the very top. It's
   included before the topbar on every page, so in normal flow it sits above the
   brand row — the two navy bars read as one header — letting you jump between
   areas without the desktop side rail. */
@media (max-width:800px){
  body:has(.apprail){padding-left:0}
  .apprail{position:static;flex-direction:row;width:100%;height:auto;bottom:auto;
    justify-content:space-around;gap:.1rem;padding:.25rem .4rem;
    padding-top:calc(.25rem + env(safe-area-inset-top));z-index:auto;
    border-bottom:1px solid rgba(255,255,255,.14)}
  /* the rail already carries the safe-area inset now — don't double it on the
     brand bar sitting below it */
  body:has(.apprail) .topbar{padding-top:.85rem}
  .apprail-item{flex:1 1 0;height:2.6rem;border-radius:.5rem}
  /* let the bottom group's icons become normal row items on mobile */
  .apprail-util{display:contents}
  .apprail-item.active{background:rgba(255,255,255,.16)}
  /* active marker moves from a left edge to a bottom underline */
  .apprail-item.active::before{left:25%;right:25%;top:auto;bottom:2px;
    width:auto;height:3px}
}