/* ---------- tokens ----------
   Quiet neutrals, one warm signal colour, and the primary action inverted
   against the page: white on near-black, near-black on white. */
:root{
  --paper:#fbfbfc; --side:#f6f6f7; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#ebebee;
  --ink:#18181b; --ink-2:#52525b; --ink-3:#71717a; --line:#ececef; --line-2:#dcdce1;
  --primary:#18181b; --primary-hover:#2e2e33; --primary-ink:#ffffff;
  --accent:#e5531f; --accent-hover:#c9441a; --accent-ink:#fff; --accent-soft:#fdeee8; --accent-soft-2:#fbdccf;
  --ring:#e5531f;
  /* conversation states */
  --reply:#c2410c; --reply-soft:#fff1e8;
  --hold:#a16207;  --hold-soft:#fdf6dc;
  --done:#15803d;  --done-soft:#e7f6ec;
  --fail:#c0262d;  --fail-soft:#fdecec;
  /* legacy aliases still used by webhooks, keys and forms */
  --live:#15803d; --live-soft:#e7f6ec; --warn:#a16207; --warn-soft:#fdf6dc;
  --danger:#c0262d; --danger-soft:#fdecec; --danger-ink:#ffffff;
  --info:#2563eb; --info-soft:#e8effd;
  --bubble-in:#f1f1f3; --bubble-out:#e6e8ee;
  --note:#a16207; --note-soft:#fdf8e6;
  --seg:#ffffff; --badge:#18181b; --badge-ink:#fff; --badge-mute:#e4e4e7; --badge-mute-ink:#52525b;
  --shadow-1:0 1px 2px rgb(24 24 27/.05),0 1px 3px rgb(24 24 27/.04);
  --shadow-2:0 18px 44px rgb(24 24 27/.16),0 2px 6px rgb(24 24 27/.06);
  --compose-head:#18181b;
  --r-sm:7px; --r:9px; --r-lg:14px;
  --page-gutter:1.5rem;
  --side-w:248px; --list-w:340px; --details-w:300px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --display:var(--font); --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0c0c0e; --side:#121214; --surface:#0f0f11; --surface-2:#18181b; --surface-3:#202024;
  --ink:#f4f4f5; --ink-2:#c4c4ca; --ink-3:#8b8b94; --line:#1e1e22; --line-2:#2b2b30;
  --primary:#f4f4f5; --primary-hover:#ffffff; --primary-ink:#0c0c0e;
  --accent:#ff6a3d; --accent-hover:#ff8560; --accent-ink:#0c0c0e; --accent-soft:#2a1610; --accent-soft-2:#3d1e13;
  --ring:#ff6a3d;
  --reply:#fb923c; --reply-soft:#2a1a0e; --hold:#facc15; --hold-soft:#29230b;
  --done:#4ade80; --done-soft:#0f2417; --fail:#f87171; --fail-soft:#2c1213;
  --live:#4ade80; --live-soft:#0f2417; --warn:#facc15; --warn-soft:#29230b;
  --danger:#f87171; --danger-soft:#2c1213; --danger-ink:#1f0707;
  --info:#60a5fa; --info-soft:#0f1d33;
  --bubble-in:#1c1c20; --bubble-out:#e9e9ec;
  --note:#facc15; --note-soft:#1d1a0c;
  --seg:#2a2a30; --badge:#f4f4f5; --badge-ink:#0c0c0e; --badge-mute:#26262b; --badge-mute-ink:#a1a1aa;
  --shadow-1:0 1px 2px rgb(0 0 0/.5); --shadow-2:0 18px 44px rgb(0 0 0/.65),0 0 0 1px rgb(255 255 255/.05);
  --compose-head:#18181b;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0c0c0e; --side:#121214; --surface:#0f0f11; --surface-2:#18181b; --surface-3:#202024;
  --ink:#f4f4f5; --ink-2:#c4c4ca; --ink-3:#8b8b94; --line:#1e1e22; --line-2:#2b2b30;
  --primary:#f4f4f5; --primary-hover:#ffffff; --primary-ink:#0c0c0e;
  --accent:#ff6a3d; --accent-hover:#ff8560; --accent-ink:#0c0c0e; --accent-soft:#2a1610; --accent-soft-2:#3d1e13;
  --ring:#ff6a3d;
  --reply:#fb923c; --reply-soft:#2a1a0e; --hold:#facc15; --hold-soft:#29230b;
  --done:#4ade80; --done-soft:#0f2417; --fail:#f87171; --fail-soft:#2c1213;
  --live:#4ade80; --live-soft:#0f2417; --warn:#facc15; --warn-soft:#29230b;
  --danger:#f87171; --danger-soft:#2c1213; --danger-ink:#1f0707;
  --info:#60a5fa; --info-soft:#0f1d33;
  --bubble-in:#1c1c20; --bubble-out:#e9e9ec;
  --note:#facc15; --note-soft:#1d1a0c;
  --seg:#2a2a30; --badge:#f4f4f5; --badge-ink:#0c0c0e; --badge-mute:#26262b; --badge-mute-ink:#a1a1aa;
  --shadow-1:0 1px 2px rgb(0 0 0/.5); --shadow-2:0 18px 44px rgb(0 0 0/.65),0 0 0 1px rgb(255 255 255/.05);
  --compose-head:#18181b;
  color-scheme:dark;
}
/* Anything drawn on a light bubble (outgoing mail in both themes) reads its
   colours from here, so links, chips and delivery rows stay legible on it. */
.on-light{
  --ink:#18181b; --ink-2:#3f3f46; --ink-3:#62626b; --line:rgb(0 0 0/.09); --line-2:rgb(0 0 0/.16);
  --surface:#ffffff; --surface-2:rgb(0 0 0/.045); --surface-3:rgb(0 0 0/.08);
  --accent:#c9441a; --accent-soft:#fdeee8; --accent-soft-2:#fbdccf;
  --reply:#c2410c; --reply-soft:#fff1e8; --hold:#a16207; --hold-soft:#fdf6dc;
  --done:#15803d; --done-soft:#e3f3e8; --fail:#c0262d; --fail-soft:#fdecec;
  --live:#15803d; --warn:#a16207; --danger:#c0262d;
  color:var(--ink);
  /* Matching the frames' scheme stops the browser painting an opaque
     backdrop behind an HTML body that is meant to sit on the bubble. */
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font:14px/1.5 var(--font);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:1.6rem;font-weight:650}h2{font-size:1.05rem;font-weight:600}h3{font-size:.95rem;font-weight:600}
p{margin:0}
.hidden{display:none!important}
/* A mailbox read as mail has no states, owners or internal notes. */
.mail-mode .queue-only{display:none!important}
.muted{color:var(--ink-3)}.small{font-size:.82rem}.lead{max-width:62ch;margin:.25rem 0 1.25rem}
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
code,kbd{font-family:var(--mono)}
code{font-size:.84em;background:var(--surface-3);padding:.1em .4em;border-radius:5px}
kbd{font-size:.7rem;border:1px solid var(--line-2);border-radius:5px;padding:0 .35em;background:var(--surface-2);color:var(--ink-3);line-height:1.5}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.75rem .9rem;font:.8rem/1.55 var(--mono);overflow-x:auto;margin:0}
svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.error{color:var(--danger);min-height:1.2em;font-size:.88rem}
.notice{background:var(--live-soft);color:var(--live);padding:.6rem .8rem;border-radius:var(--r-sm);font-size:.88rem}
.notice a{color:inherit}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

/* ---------- controls ---------- */
.btn{font:inherit;font-size:.86rem;font-weight:500;cursor:pointer;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:.45rem .8rem;display:inline-flex;align-items:center;gap:.45rem;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s,color .12s,transform .14s var(--ease-out),box-shadow .14s}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);font-weight:600}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3);color:var(--ink)}
.btn.sm{padding:.36rem .65rem;font-size:.82rem}
.btn.lg{padding:.7rem 1rem;font-size:.95rem;justify-content:center}
.btn.danger{color:var(--danger)}.btn.danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.btn.primary.danger{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.btn.primary.danger:hover{background:var(--danger);border-color:var(--danger);filter:brightness(.92)}
.btn.icon-btn{padding:.45rem;aspect-ratio:1;justify-content:center}
.btn.icon-btn.sm{padding:.42rem}.btn.icon-btn.xs{padding:.25rem;font-size:.8rem;border-color:transparent;background:transparent;color:var(--ink-3)}
.btn.icon-btn.xs:hover{background:var(--surface-3);color:var(--ink)}
.btn.toggle[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
input[type=text],input[type=password],input[type=search],input[type=url],input[type=email],input[type=datetime-local],select,textarea{font:inherit;padding:.52rem .7rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);width:100%;transition:border-color .12s}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
textarea{resize:vertical;min-height:120px;line-height:1.5}
.field{display:flex;flex-direction:column;gap:.35rem;font-size:.84rem;color:var(--ink-2);font-weight:500}
.check{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--ink);font-weight:400}
.check input{width:auto;margin:0;accent-color:var(--accent)}
.stack{display:flex;flex-direction:column;gap:.9rem}
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;padding:.16rem .5rem;border-radius:6px;font-weight:600;line-height:1.35}
.pill.ok,.pill.verified,.pill.active,.pill.sent,.pill.delivered{background:var(--live-soft);color:var(--live)}
.pill.pending,.pill.queued,.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.failed,.pill.bounced,.pill.off,.pill.bad{background:var(--danger-soft);color:var(--danger)}
.pill.info{background:var(--info-soft);color:var(--info)}
.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:500;padding:.14rem .5rem;border-radius:6px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap;line-height:1.4}
.chip svg{width:.95em;height:.95em}
.chip.ok{background:var(--done-soft);color:var(--done)}
.chip.bad{background:var(--fail-soft);color:var(--fail)}
.chip.warn{background:var(--hold-soft);color:var(--hold)}
.chip.info{background:var(--info-soft);color:var(--info)}
.badge{font-size:.7rem;font-weight:600;background:var(--badge);color:var(--badge-ink);border-radius:999px;padding:0 .4rem;min-width:1.35rem;height:1.35rem;display:inline-grid;place-items:center;line-height:1;font-variant-numeric:tabular-nums}
.badge.mute{background:var(--badge-mute);color:var(--badge-mute-ink)}
.badge.warn{background:var(--warn);color:#000}
.avatar{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;font-weight:600;font-size:.82rem;color:#fff;flex-shrink:0;background:var(--accent);letter-spacing:0}
.avatar.sm{width:28px;height:28px;font-size:.7rem}
.avatar.xs{width:22px;height:22px;font-size:.6rem}
.avatar.xxs{width:18px;height:18px;font-size:.52rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- gate ---------- */
.gate{display:grid;grid-template-columns:1.1fr 1fr;height:100%;background:var(--surface)}
.gate-art{background:radial-gradient(120% 90% at 85% 10%,#ff6a3d33 0%,transparent 55%),radial-gradient(90% 70% at 10% 100%,#ff6a3d1f 0%,transparent 60%),#0c0c0e;position:relative;overflow:hidden;border-right:1px solid var(--line)}
.gate-art{display:flex;flex-direction:column;justify-content:flex-end;gap:1.5rem;padding:3rem clamp(1.5rem,6vw,4.5rem)}
.gate-art svg{width:min(52%,360px);height:auto;stroke:rgb(255 255 255/.55);stroke-width:2;fill:rgb(255 255 255/.03);position:relative}
.gate-art p{position:relative;color:#f4f4f5;font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:600;max-width:18ch;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.gate-panel{display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:3rem clamp(1.5rem,6vw,5rem);max-width:540px;width:100%;margin:0 auto}
.gate-panel h1{font-size:1.5rem}
.or{display:flex;align-items:center;gap:.8rem;color:var(--ink-3);font-size:.8rem}
.or::before,.or::after{content:"";height:1px;background:var(--line-2);flex:1}
@media(max-width:820px){.gate{grid-template-columns:1fr}.gate-art{display:none}}

/* ---------- shell ---------- */
.brand{display:flex;align-items:center;gap:.6rem;font-weight:650;font-size:1.05rem;letter-spacing:-.02em}
.brand.lg{font-size:1.3rem}
.logo{display:inline-grid;place-items:center;width:1.75em;height:1.75em;border-radius:8px;background:var(--primary);color:var(--primary-ink)}
.logo svg{width:1em;height:1em;stroke-width:2.1}
/* The first column only reserves space. The sidebar floats above it so
   peeking at a collapsed one never reflows the mail underneath. */
.app{display:grid;grid-template-columns:60px 1fr;height:100%;position:relative;
  transition:grid-template-columns var(--rail-out) var(--rail-ease)}
.app.rail-open{grid-template-columns:var(--side-w) 1fr;transition-duration:var(--rail-in)}
.topbar{display:none}

/* ---------- the sidebar ---------- */
/* Open by default, with names, counts and sections. Collapsed it is a rail of
   icons that opens on hover — pointing at it is the whole gesture — and the
   toggle in its header decides which of the two it rests as. */
:root{--rail-ease:cubic-bezier(.32,.72,0,1);--rail-in:.3s;--rail-out:.19s;--rail-step:12ms}

.rail{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:.75rem 0;gap:.12rem;
  overflow-x:hidden;overflow-y:auto;position:absolute;left:0;top:0;bottom:0;width:60px;z-index:20;will-change:width;
  transition:width var(--rail-out) var(--rail-ease),padding var(--rail-out) var(--rail-ease),
             box-shadow var(--rail-out) var(--rail-ease)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail){width:var(--side-w);padding:.75rem .65rem;transition-duration:var(--rail-in)}
:is(.rail:hover,.rail:focus-within){box-shadow:14px 0 34px rgb(0 0 0/.28)}
.rail-open .rail{box-shadow:none}

.rgroup{display:flex;flex-direction:column;gap:.12rem;align-items:center;width:100%}
.rail .foot{margin-top:auto;gap:.12rem;flex-shrink:0;padding-top:.6rem}
/* On a short screen the sections scroll and the foot stays: your settings,
   the theme and signing out are always one step away, never below the fold. */
.rail .foot{position:sticky;bottom:-.75rem;z-index:2;margin-bottom:-.75rem;padding-bottom:.75rem;background:var(--side);box-shadow:0 -1px 0 var(--line)}
.rbox,.rico,.rme{position:relative;width:36px;height:34px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;gap:.65rem;border:0;background:transparent;padding:0;cursor:pointer;
  font:inherit;text-align:left;color:var(--ink-2);
  transition:width var(--rail-out) var(--rail-ease),padding var(--rail-out) var(--rail-ease),
             background-color .12s ease,color .12s ease,opacity .12s ease}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) :is(.rbox,.rico,.rme){
  width:100%;transition-duration:var(--rail-in)}

/* The label is always there and always in place; only its opacity and a few
   pixels of travel change, staggered so the names arrive as a wave. */
.rlabel{flex:1 1 auto;min-width:0;font-size:.875rem;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateX(-6px);
  transition:opacity .1s linear,transform .1s var(--rail-ease)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rlabel{
  opacity:1;transform:none;
  transition:opacity .2s var(--rail-ease) calc(60ms + var(--i,0) * var(--rail-step)),
             transform .3s var(--rail-ease) calc(60ms + var(--i,0) * var(--rail-step))}

.rhead{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;flex-shrink:0;width:100%;
  padding:0 0 0 14px;transition:padding var(--rail-out) var(--rail-ease)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rhead{padding:.3rem .35rem .3rem .35rem;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;transition-duration:var(--rail-in)}
.rail .mk{width:32px;height:32px;border-radius:8px;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;flex-shrink:0;border:0;cursor:pointer;padding:0;font:inherit;font-weight:700;font-size:.95rem;transition:opacity .2s}
.rword{display:flex;flex-direction:column;min-width:0;line-height:1.2;
  white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity .1s linear,transform .1s var(--rail-ease)}
.rword b{font-weight:600;font-size:.9rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.rword small{font-size:.72rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rword{
  opacity:1;transform:none;transition:opacity .22s var(--rail-ease) 60ms,transform .32s var(--rail-ease) 60ms}

/* The toggle only means something once the sidebar is already open, so it
   widens into place rather than appearing. */
.rtoggle{width:0;height:28px;border-radius:7px;border:0;background:transparent;color:var(--ink-3);
  cursor:pointer;display:grid;place-items:center;padding:0;flex-shrink:0;margin-left:auto;overflow:hidden;
  opacity:0;transition:width var(--rail-out) var(--rail-ease),opacity .1s linear}
.rtoggle svg{width:16px;height:16px}
.rtoggle:hover{color:var(--ink);background:var(--surface-3)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rtoggle{
  width:28px;opacity:1;transition:width var(--rail-in) var(--rail-ease),opacity .2s var(--rail-ease) 120ms}
.rail-open .rtoggle{color:var(--ink-2)}

/* Search sits like a field but is a button: it takes you to the list's box. */
.rsearch{margin-bottom:.5rem}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rsearch{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rsearch:hover{color:var(--ink-2);border-color:var(--line-2)}
.rsearch .rlabel{font-weight:400}
.rkbd{flex:none;font-size:.66rem;padding:0 .35rem;margin-right:.1rem}

/* A mailbox: the coloured square shrinks concentrically into a dot beside its
   address, which is the whole animation in one element. */
.rbox{color:#fff;font-size:.72rem;font-weight:700;opacity:.7;padding-left:0}
.rbox:hover{opacity:.9}
.rbox.active{opacity:1;box-shadow:0 0 0 2px var(--side),0 0 0 3.5px var(--ink-3)}
.rbox .tint{position:absolute;left:1px;top:0;width:34px;height:34px;border-radius:9px;
  transition:left var(--rail-out) var(--rail-ease),top var(--rail-out) var(--rail-ease),
             width var(--rail-out) var(--rail-ease),height var(--rail-out) var(--rail-ease),
             border-radius var(--rail-out) var(--rail-ease)}
.rbox .initial{position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .09s linear}
.rbox .badge{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;border-radius:9px;
  background:var(--badge);color:var(--badge-ink);font-size:.6rem;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--side);padding:0 4px;
  transition:top var(--rail-out) var(--rail-ease),right var(--rail-out) var(--rail-ease),
             border-color var(--rail-out) var(--rail-ease)}
.rbox .flag{position:absolute;bottom:-2px;right:-2px;width:9px;height:9px;border-radius:50%;
  background:var(--hold);border:2px solid var(--side);
  transition:bottom var(--rail-out) var(--rail-ease),right var(--rail-out) var(--rail-ease),
             border-color var(--rail-out) var(--rail-ease)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox{
  opacity:1;color:var(--ink-2);font-weight:500;font-size:.875rem;
  padding-left:34px;padding-right:2.4rem}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox:hover{background:var(--surface-2);color:var(--ink)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox.active{
  background:var(--surface-3);color:var(--ink);box-shadow:none}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .tint{
  left:13px;top:12.5px;width:9px;height:9px;border-radius:50%;transition-duration:var(--rail-in)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .initial{opacity:0}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .badge{
  top:8px;right:8px;border-color:transparent;background:var(--badge-mute);color:var(--badge-mute-ink);transition-duration:var(--rail-in)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .flag{
  bottom:12.5px;right:10px;border-color:transparent;transition-duration:var(--rail-in)}
/* When a mailbox has both, the DNS flag steps aside for the unread count. */
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox:has(.badge) .flag{right:36px}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox:not(:has(.badge,.flag)){padding-right:.6rem}
.rbox .mailbox-label{display:flex;align-items:baseline;gap:.4rem}
.rbox .mailbox-label span{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.rbox .mailbox-label small{font-size:.72rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;flex:0 1000 auto;min-width:0}

.rsection{width:100%;flex:none;height:0;margin:0;padding:0 .6rem;overflow:hidden;color:var(--ink-3);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:20px}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rsection{height:20px;margin:.85rem 0 .2rem}
.rsep{width:22px;height:1px;background:var(--line-2);margin:.5rem 0;flex-shrink:0}

.rico{padding-left:9.5px}
.rico:hover{color:var(--ink);background:var(--surface-2)}
.rico.active{background:var(--surface-3);color:var(--ink)}
.rico svg{width:17px;height:17px;flex-shrink:0}
.rico .q{width:17px;text-align:center;flex-shrink:0;font-weight:600}
.rico .flag{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--hold);
  transition:top var(--rail-out) var(--rail-ease),right var(--rail-out) var(--rail-ease)}
.rico .count{display:none}
.rico .dotc{position:absolute;top:6px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rico{padding-left:.6rem;padding-right:.5rem}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rico .count{display:inline-grid}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rico .dotc{display:none}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rico .flag{
  top:13.5px;right:10px;transition-duration:var(--rail-in)}
.rico[disabled]{opacity:.45;cursor:default}

.rme{cursor:default;padding-left:4px;color:var(--ink-2)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rme{padding-left:.45rem;padding-right:.5rem}

/* Peeking floats over the mail, so the mail is dimmed and blurred underneath
   it: half a sentence at the left edge otherwise reads as broken rather than
   covered. */
.rail-scrim{position:absolute;inset:0;z-index:15;background:#000;opacity:0;pointer-events:none;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:opacity var(--rail-out) var(--rail-ease)}
:is(.rail:hover,.rail:focus-within)~.rail-scrim{opacity:.3;transition-duration:var(--rail-in)}
.rail-open .rail:hover~.rail-scrim,.rail-open .rail:focus-within~.rail-scrim{opacity:0}

@media(prefers-reduced-motion:reduce){
  .app,.rail,.rail-scrim,.rbox,.rico,.rme,.rhead,.rsep,.rlabel,.rword,.rtoggle,
  .rbox .tint,.rbox .initial,.rbox .badge,.rbox .flag,.rico .flag{transition:none!important}
}
/* Not .stack: that one is the vertical form layout. */
.avatars{display:flex;align-items:center}
.avatars .avatar{border:2px solid var(--paper);margin-left:-7px}
.avatars .avatar:first-child{margin-left:0}
.scrim{display:none}
/* The sidebar is out of flow, so main is the grid's only in-flow child and
   would otherwise land in the column the sidebar's width reserves. */
main{grid-column:2;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto;background:var(--paper)}
main.single{overflow:auto}
main.mail-main{overflow:hidden}

/* Status labels; conversation rows add a soft background. */
.st{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;white-space:nowrap}
.st i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.st.needs_reply{color:var(--reply)}.st.needs_reply i{background:var(--reply)}
.st.waiting{color:var(--hold)}.st.waiting i{background:var(--hold)}
.st.resolved{color:var(--done)}.st.resolved i{background:var(--done)}
.st.failed{color:var(--fail)}.st.failed i{background:var(--fail)}
.st.mute{color:var(--ink-3)}.st.mute i{background:var(--ink-3)}

/* ---------- pages ----------
   Every page shares the mail panes' frame: a 62px bar with where you are and
   what you can do, then a centred column of rounded panels whose rows are
   divided like the details panel's. */
.page{--col:1000px;width:100%;min-height:100%;flex-shrink:0;display:flex;flex-direction:column;padding:0 0 3rem}
.page>*{width:min(100% - 2 * var(--page-gutter),var(--col));margin-inline:auto}
.page:has(#profile-form)>:not(.page-head){width:min(100% - 2 * var(--page-gutter),760px);margin-left:max(var(--page-gutter),(100% - var(--col)) / 2);margin-right:auto}
.page-head{position:sticky;top:0;z-index:5;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;
  min-height:62px;padding:.6rem max(var(--page-gutter),calc((100% - var(--col)) / 2));margin:0 0 1.5rem;
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.page-head>div:first-child{display:flex;align-items:center;gap:.45rem;min-width:0;flex:1 1 auto}
.page-head .eyebrow{margin:0;font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3);white-space:nowrap;text-decoration:none}
.page-head .eyebrow::after{content:"/";margin-left:.45rem;color:var(--ink-3);opacity:.5}
.page-head a.eyebrow:hover{color:var(--ink)}
.page-head h1{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.page-head .btn{padding:.38rem .75rem;font-size:.82rem}
.page>.lead{margin-top:0;margin-bottom:1.1rem;color:var(--ink-3);font-size:.86rem;max-width:none}
.page>.lead+*{margin-top:0}
.crumb{display:inline-flex;align-items:center;gap:.3rem;text-decoration:none;font-size:.88rem;color:var(--ink-2)}
.crumb:hover{color:var(--ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;margin:0 auto 1rem}
.card>h2{font-size:.95rem;font-weight:600;margin-bottom:.35rem}
.card>h2+.muted{margin-bottom:.9rem}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem 1rem;margin-bottom:.9rem}
.card-head>div{min-width:0;flex:1 1 180px}
.card-head h3{overflow-wrap:anywhere;font-size:.95rem}
.card-head p{margin-top:.2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:.75rem;margin-bottom:1rem}
.cards>.card{margin:0;width:auto}
.cards>.empty{grid-column:1/-1;background:var(--surface);border:1px dashed var(--line-2);border-radius:12px}
.card.link{color:inherit;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s}
.card.link:hover{background:var(--surface-2);border-color:var(--line-2)}
.card.link .card-head{margin-bottom:.4rem}
.danger-zone{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.danger-zone h3{color:var(--danger)}
.danger-zone .card-head{margin:0}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:.85rem;padding:.75rem 0;border-top:1px solid var(--line)}
.rows li:first-child{border-top:0;padding-top:0}.rows li:last-child{padding-bottom:0}
.page>.rows{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:0 auto 1rem;overflow:hidden}
.page>.rows:empty{display:none}
.page>.rows>li,.page>.rows>li:first-child,.page>.rows>li:last-child{padding:.8rem 1.1rem}
.page>.rows>li:hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.rows .grow{flex:1;min-width:0}
.rows .title{overflow-wrap:anywhere;font-size:.88rem}
.rows .title strong{font-weight:600}
.rows .title a,.rows a.title{overflow-wrap:anywhere;color:var(--ink);text-decoration:none;font-weight:500}
.rows .title a:hover,.rows a.title:hover{text-decoration:underline;text-underline-offset:2px}
.rows .meta{color:var(--ink-3);font-size:.78rem;margin-top:.15rem;overflow-wrap:anywhere}
.rows .meta .pill{vertical-align:baseline}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}
.member-actions{flex-shrink:0}
#webhook-rows .title{overflow-wrap:anywhere}
#webhook-rows .actions{flex:0 1 auto}
#webhook-rows .card-head .meta{margin-top:.3rem}
#member-rows .title .muted{display:block;font-size:.8rem;font-weight:400}
#member-rows li{align-items:flex-start}
.table-wrap{overflow-x:auto}
.table-wrap:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.card>.table-wrap{margin:0 -1.25rem -1.1rem;padding:0 1.25rem .4rem}
.table-hint{display:none}
.deliveries table{min-width:740px}
.deliveries td:nth-child(2) code{white-space:nowrap;word-break:normal}
.payload{white-space:pre-wrap;overflow-wrap:anywhere}
table{width:100%;border-collapse:collapse;font-size:.84rem}
th,td{text-align:left;padding:.6rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}
th{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
tr:last-child td{border-bottom:0}
td code{word-break:break-all;white-space:pre-wrap;font-size:.78rem}
td:first-child code,td.nowrap code{white-space:nowrap;word-break:normal}
td.nowrap{white-space:nowrap}
.copy{font-size:.72rem;padding:.12rem .35rem;margin-left:.3rem;vertical-align:middle;border-color:transparent;background:transparent;color:var(--ink-3)}
.copy:hover{background:var(--surface-3);color:var(--ink);border-color:transparent}
.rec-status{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:600;white-space:nowrap}
.rec-status.ok{color:var(--live)}.rec-status.bad{color:var(--warn)}.rec-status.unknown{color:var(--ink-3)}
.rec-status.optional{color:var(--ink-3);font-weight:500}
.progress{height:4px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin-bottom:1.25rem}
.progress span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease}
.steps{list-style:none;padding:0;margin-bottom:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;counter-reset:s}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem 1.2rem 3.3rem;position:relative;min-width:0;overflow-wrap:anywhere}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:1.1rem;top:1.05rem;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.75rem}
.steps li.done::before{content:"✓";background:var(--live-soft);color:var(--live)}
.steps li.done h3{color:var(--ink-2)}
.steps h3{margin-bottom:.25rem;font-size:.95rem}
.steps form{display:flex;gap:.6rem;align-items:flex-end;margin-top:.85rem;flex-wrap:wrap}
.steps form .field{flex:1;min-width:min(200px,100%)}
.steps .table-wrap{margin-top:.75rem}
.scopes{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem;align-items:center}
.scopes code{font-size:.7rem}

/* ---------- mail: list, conversation and details side by side ---------- */
.mail{display:grid;grid-template-columns:var(--list-w) minmax(0,1fr);height:100%;min-height:0}
.listpane{border-right:1px solid var(--line);background:var(--surface);min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.convpane{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--paper);overflow:hidden}
.pane-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:var(--ink-3);text-align:center;padding:2rem}
.pane-empty .illus svg{width:96px;height:72px}
.pane-empty h3{color:var(--ink-2);font-size:1rem}
.pane-empty p{font-size:.84rem;max-width:34ch}
.pane-empty kbd{margin:0 .1rem}

/* ---------- inbox list ---------- */
.inbox{width:100%;display:flex;flex-direction:column;min-height:0;flex:1}
.inbox-head{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1rem .75rem;flex-shrink:0}
.inbox-identity{min-width:0;flex:1}
.inbox-head h1{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.inbox-address{color:var(--ink-3);font-size:.76rem;margin-top:.1rem;display:flex;flex-wrap:wrap;gap:0 .45rem;min-width:0}
.inbox-address>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.inbox-head .who{display:inline-flex;gap:.45rem;align-items:center;white-space:nowrap}
.inbox-head .who::before{content:"·"}
.inbox-head .who:empty{display:none}
.inbox-head .who .st{font-size:.74rem;font-weight:500}
.inbox-head .acts{margin-left:auto;display:flex;gap:.15rem;align-items:center;flex-shrink:0;margin-top:-.15rem}
.inbox-head .acts .btn svg{width:17px;height:17px}
.find{display:flex;align-items:center;gap:.5rem;height:34px;margin:0 1rem .7rem;padding:0 .65rem;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink-3);font-size:.85rem;background:var(--surface-2);flex-shrink:0}
.find:focus-within{border-color:var(--line-2);outline:2px solid var(--ring);outline-offset:1px}
.find input{border:0;background:transparent;padding:0;height:auto;font-size:.85rem;width:100%;min-width:0;color:var(--ink)}
.find input::placeholder{color:var(--ink-3);opacity:1}
.find input:focus,.find input:focus-visible{outline:none}
.find kbd{flex:none}
.find:focus-within kbd{display:none}
/* The queue's three states, side by side like a switch. */
.segmented{position:relative;isolation:isolate;display:flex;gap:2px;padding:3px;margin:0 1rem .5rem;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);flex-shrink:0}
.segmented .tab{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.38rem .45rem;border:0;border-radius:7px;background:transparent;color:var(--ink-3);font:inherit;font-size:.8rem;font-weight:500;cursor:pointer;white-space:nowrap}
.segmented .tab span{overflow:hidden;text-overflow:ellipsis}
.segmented .tab b{font-weight:500;font-variant-numeric:tabular-nums;color:inherit}
.segmented .tab b:not(:empty)::before{content:"· "}
.segmented .tab:hover{color:var(--ink-2)}
.segmented .tab.active{background:var(--seg);color:var(--ink);box-shadow:var(--shadow-1)}
.segmented .tab:disabled{opacity:.5;cursor:default}
.tab:focus-visible,.conv:focus-visible,.rbox:focus-visible,.rico:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
/* A folder view replaces the switch with its name and a way back. */
.view-chip{display:flex;align-items:center;gap:.4rem;margin:0 1rem .5rem;padding:.38rem .4rem .38rem .7rem;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:.82rem;font-weight:500;flex-shrink:0}
.view-chip b{font-weight:500;color:var(--ink-3)}
.view-chip .ch-btn{margin-left:auto;color:var(--ink-3);padding:.2rem;border-radius:6px}
.view-chip .ch-btn:hover{background:var(--surface-3);color:var(--ink)}
.inbox-summary{min-height:0;padding:0 1rem .25rem;color:var(--ink-3);font-size:.72rem;flex-shrink:0}
.inbox-summary:empty{display:none}
.convs{flex:1;min-height:0;overflow:auto;padding:0 .5rem .75rem;align-self:stretch}
/* Lined up over the rows' checkboxes, as the head of their column. */
/* Select all and the actions on what is selected share one row, so ticking a
   conversation swaps the label for the actions without moving the list. */
.selbar{display:flex;align-items:center;gap:.5rem;min-height:30px;margin:0 .75rem .25rem;padding:0 .1rem 0 .95rem;border-radius:8px;flex-shrink:0;transition:background .12s}
.selbar.active{background:var(--surface-2)}
.convs-all{display:flex;align-items:center;gap:.55rem;padding:.2rem .4rem .2rem 0;font-size:.72rem;color:var(--ink-3);cursor:pointer;user-select:none;-webkit-user-select:none;flex-shrink:0}
.convs-all:hover{color:var(--ink)}
.convs-all input{margin:0;width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.convs-all:has(input:disabled){opacity:.55;cursor:default}
.convs-all input:disabled{cursor:default}
.selbar.active #ib-all-label{display:none}
.conv-day{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:.85rem .5rem .4rem}
.convs-more{display:flex;justify-content:center;padding:.8rem 0 1.2rem}
.conv{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:.7rem;padding:.65rem .6rem;border:0;border-radius:10px;cursor:pointer;width:100%;text-align:left;background:transparent;font:inherit;color:inherit;transition:background .1s}
.conv-row{position:relative;margin-bottom:1px}
.conv:hover{background:var(--surface-2)}
.conv.open,.conv-row.selected .conv{background:var(--surface-3)}
.conv.focused{box-shadow:inset 0 0 0 1px var(--line-2)}
.conv.open.focused{box-shadow:inset 2px 0 0 var(--accent)}
.conv>span{min-width:0}
.conv .cav{position:relative;display:block;width:36px;height:36px}
.conv .cav .avatar{width:36px;height:36px;font-size:.78rem}
.conv .cav .avatar+.avatar{position:absolute;width:20px;height:20px;font-size:.5rem;right:-4px;bottom:-3px;border:2px solid var(--surface)}
/* The checkbox sits over the avatar and shows itself when wanted. Its label
   is the target: the avatar's whole column, top to bottom, so the target does
   not shrink to the box the moment the box appears. */
.conv-pick-hit{position:absolute;left:0;top:0;bottom:0;width:calc(.6rem + 36px + .35rem);z-index:1;cursor:pointer;user-select:none;-webkit-user-select:none}
.conv-pick{position:absolute;left:1.2rem;top:1.25rem;margin:0;width:16px;height:16px;opacity:0;cursor:pointer;accent-color:var(--accent)}
.conv-row:hover .conv-pick,.conv-pick:focus-visible,.conv-pick:checked,.selecting .conv-pick{opacity:1}
.conv-row.pending{opacity:.55;pointer-events:none;transition:opacity .15s}
.conv-row:hover .cav,.selecting .cav,.conv-row.selected .cav{opacity:.15}
.conv .conv-copy{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.conv .l1,.conv .l2,.conv .l3{display:flex;align-items:center;gap:.45rem;min-width:0}
.conv .names{font-weight:500;font-size:.875rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.conv.unread .names{font-weight:650}
.conv .time{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto;flex-shrink:0}
.conv .subject{display:block;flex:1;min-width:0;font-size:.82rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv.unread .subject{color:var(--ink);font-weight:550}
.conv .sn{display:block;flex:1;min-width:0;font-size:.8rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .badge{flex-shrink:0;margin-left:auto}
.conv .cnt{font-size:.7rem;color:var(--ink-3);flex-shrink:0}
.conv .asg{display:inline-flex;flex-shrink:0}
.conv .asg .avatar{width:18px;height:18px;font-size:.5rem}
.conv .asg.none{display:none}
.conv .st{padding:.08rem .4rem;border-radius:5px;font-size:.68rem;font-weight:500;flex-shrink:0;gap:.3rem}
.conv .st i{width:5px;height:5px}
.conv .st.needs_reply{background:var(--reply-soft)}
.conv .st.waiting{background:var(--hold-soft)}
.conv .st.resolved{background:var(--done-soft)}
.conv .st.failed{background:var(--fail-soft)}
/* In a view that already says the state, each row need not repeat it. */
.conv .st.same{display:none}
.tagd{font-size:.72rem;font-family:var(--mono);color:var(--ink-3);background:var(--surface-2);border-radius:4px;padding:.1rem .35rem}
.draft-row .conv-copy .l1{gap:.4rem}

/* ---------- one conversation ---------- */
.conv-view{display:grid;grid-template-columns:minmax(0,1fr) var(--details-w);flex:1;min-height:0;position:relative}
.conv-view.details-closed{grid-template-columns:minmax(0,1fr)}
.conv-view.details-closed .details{display:none}
.conv-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cbar{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem .7rem 1.25rem;border-bottom:1px solid var(--line);flex-shrink:0;min-height:62px}
.cbar .back{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:-.4rem;border-radius:8px;color:var(--ink-2);background:transparent;border:0;cursor:pointer;flex-shrink:0}
.cbar .back:hover{color:var(--ink);background:var(--surface-3)}
.cbar .back svg{width:18px;height:18px}
.cavatar{display:flex;flex-shrink:0}
.cavatar .avatar{width:36px;height:36px}
.chead{min-width:0;flex:1}
.ctitle{font-size:.98rem;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35;min-width:0}
#c-verified{flex-shrink:0;display:flex}
#c-verified .chip{font-size:.7rem;padding:.05rem .4rem}
.csub{display:flex;align-items:center;gap:.45rem;color:var(--ink-3);font-size:.78rem;min-width:0;white-space:nowrap;margin-top:.05rem}
.csub-text{display:flex;gap:.4rem;min-width:0;overflow:hidden}
.csub-text span{overflow:hidden;text-overflow:ellipsis}
.csub-text span:last-child{flex-shrink:0}
/* The conversation's quieter actions. */
.more-wrap{position:relative;display:inline-flex}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:190px;display:flex;flex-direction:column;padding:.3rem;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow-2)}
.menu-item{display:flex;align-items:center;gap:.6rem;border:0;background:none;color:var(--ink);font:inherit;font-size:.84rem;text-align:left;padding:.45rem .6rem;border-radius:7px;cursor:pointer;white-space:nowrap}
.menu-item svg{color:var(--ink-3);width:16px;height:16px}
.menu-item:hover,.menu-item:focus-visible{background:var(--surface-3);outline:none}
.menu-item.danger,.menu-item.danger svg{color:var(--danger)}
.cbar .right{margin-left:auto;display:flex;gap:.1rem;align-items:center;flex-shrink:0}
.cbar .right .btn.icon-btn svg{width:17px;height:17px}
.cbar .right .btn.primary,.cbar .right #c-restore{margin-left:.45rem}
.ctl{display:inline-flex;align-items:center;gap:.4rem;max-width:100%;border:1px solid transparent;border-radius:6px;padding:.1rem .4rem .1rem .3rem;margin-left:-.3rem;font-size:.8rem;font-weight:500;background:transparent;color:var(--ink);cursor:pointer;font-family:inherit;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl:hover{border-color:var(--line-2);background:var(--surface-2)}
.ctl .st{font-size:.76rem;font-weight:500;padding:.08rem .45rem;border-radius:5px}
.ctl .st.needs_reply{background:var(--reply-soft)}.ctl .st.waiting{background:var(--hold-soft)}.ctl .st.resolved{background:var(--done-soft)}.ctl .st.failed{background:var(--fail-soft)}
.ro{display:none;font-size:.82rem;color:var(--ink-2)}
.ctl.hidden+.ro{display:inline}
.reading{flex:1;min-height:0;overflow:auto;padding:0 1.5rem}
.reading .col{width:100%;max-width:980px;margin-inline:auto;min-width:0}
#c-thread{display:flex;flex-direction:column;gap:1.1rem;padding:1.4rem 0 .75rem}
.thread-date{align-self:center;color:var(--ink-3);font-size:.72rem;font-weight:500;padding:.15rem .6rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}

/* A message is a bubble: received on the left, ours on the right. */
.tmsg{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;max-width:min(78%,760px);min-width:0;align-self:flex-start}
.tmsg:has(iframe){width:min(86%,760px);max-width:none}
.tmsg.outgoing{align-self:flex-end;align-items:flex-end}
.tmsg-head{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--ink-3);min-width:0;max-width:100%;padding:0 .15rem}
.outgoing .tmsg-head{flex-direction:row-reverse}
.tmsg-sender{display:flex;align-items:baseline;gap:.4rem;min-width:0}
.tmsg-head .nm{font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmsg-head .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tmsg-head time{font-variant-numeric:tabular-nums;white-space:nowrap}
.tmsg-direction{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:500;white-space:nowrap}
.tmsg-direction svg{width:.9em;height:.9em}
.tmsg-actions{display:inline-flex;gap:.05rem;opacity:0;transition:opacity .12s}
.tmsg:hover .tmsg-actions,.tmsg:focus-within .tmsg-actions{opacity:1}
.tmsg-actions .ch-btn{color:var(--ink-3);padding:.25rem;border-radius:6px}
.tmsg-actions .ch-btn:hover{background:var(--surface-3);color:var(--ink)}
.bubble{background:var(--bubble-in);color:var(--ink);border-radius:4px 14px 14px 14px;padding:.65rem .9rem;min-width:0;max-width:100%;width:fit-content}
.tmsg:has(iframe) .bubble{width:100%}
.outgoing .bubble{background:var(--bubble-out);border-radius:14px 4px 14px 14px}
.tmsg-body{font-size:.9rem;line-height:1.6;color:inherit}
.tmsg-body p+p{margin-top:.85rem}
.tmsg-body:has(iframe){background:#fff;border-radius:9px;padding:.7rem .8rem;margin:-.15rem -.3rem}
.tmsg-body iframe{width:100%;border:0;display:block}
.on-light .tmsg-body:has(iframe){background:transparent;padding:0;margin:0}
.tmsg-body .plain{white-space:pre-wrap;overflow-wrap:anywhere}
.tmsg-empty{color:var(--ink-3);font-size:.84rem;font-style:italic}
.tmsg-attachments{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.tmsg-attachments .att{margin:0}
.tmsg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;font-size:.7rem;color:var(--ink-3);padding:0 .15rem}
.outgoing .tmsg-foot{justify-content:flex-end}
.tmsg-agent{overflow-wrap:anywhere;min-width:0}
.tmsg-meta{display:flex;align-items:center;gap:.5rem}
.tmsg-meta time{font-variant-numeric:tabular-nums}
.tmsg-meta .st{font-size:inherit;font-weight:500}
.tmsg-meta .st svg{width:1.15em;height:1.15em}
.tmsg-warn{margin:0 0 .6rem;padding:.5rem .7rem;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--fail) 45%,transparent);background:var(--fail-soft);color:var(--fail);font-size:.82rem;line-height:1.45}
.tmsg-images{margin:0 0 .6rem;padding:.45rem .7rem;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);font-size:.8rem;line-height:1.45}
.tmsg-images .linkish{margin-left:.5rem}
.message-details{margin-top:.6rem;font-size:.74rem;color:var(--ink-3)}
.message-details summary{width:fit-content;cursor:pointer;border-radius:var(--r-sm)}
.message-details summary:hover{color:var(--ink)}
.authline{display:flex;gap:.4rem 1rem;margin-top:.45rem;flex-wrap:wrap;overflow-wrap:anywhere}
.authline b{color:var(--done);font-weight:600}
.authline b.bad{color:var(--fail)}
/* Show original */
.original-summary{border-collapse:collapse;font-size:.84rem;width:100%}
.original-summary th{text-align:left;font-weight:500;color:var(--ink-3);padding:.22rem 1rem .22rem 0;white-space:nowrap;vertical-align:top;width:1%}
.original-summary td{padding:.22rem 0;overflow-wrap:anywhere}
.original-summary b{color:var(--done);font-weight:600}
.original-summary b.bad{color:var(--fail)}
.original-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.original-tools .muted{margin-left:auto}
.original-source{max-height:52vh;overflow:auto;font-size:.76rem}
.original-source .hdrs b{color:var(--ink);font-weight:600}
.original-source .rest{color:var(--ink-2)}
.deliv{margin-top:.75rem;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.deliv .dh{display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem;background:var(--surface-2)}
.deliv .eyebrow{margin:0}
.dr{display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:center;padding:.45rem .75rem;font-size:.8rem;border-top:1px solid var(--line)}
.dr .a{font-family:var(--mono);font-size:.76rem;overflow-wrap:anywhere}
.dr .m{font-size:.72rem;color:var(--ink-3)}
.att{max-width:100%;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:.3rem .55rem;font-size:.78rem;text-decoration:none;color:var(--ink);margin-right:.4rem}
.att:hover{border-color:var(--ink-3)}
.att.blocked{color:var(--fail);border-color:var(--fail);background:var(--fail-soft);cursor:not-allowed}
/* Internal notes: the team's own, set apart in amber. */
.tmsg.note .bubble{background:var(--note-soft);border:1px dashed color-mix(in srgb,var(--note) 45%,transparent);border-radius:12px}
.tmsg.note .tmsg-head .sub{color:var(--note)}
.tmsg.note .plain{white-space:pre-wrap}
.mention{font-weight:600;color:var(--accent)}

/* Who else is here, at the foot of the thread like a typing indicator. */
.presence{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.25rem .15rem 1rem;font-size:.78rem;color:var(--ink-3)}
.presence .sep{margin:0 .1rem}
.presence b{font-weight:500}
.presence.warn{color:var(--ink-2)}
.presence .spin{width:13px;height:13px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.presence .spin{animation:none}}

/* ---------- reply box ---------- */
.replybox{border-top:1px solid var(--line);background:var(--surface);padding:0 1.25rem 1rem;display:flex;flex-direction:column;gap:.55rem;flex-shrink:0}
.qr-modes{display:flex;gap:1.25rem;border-bottom:1px solid var(--line);margin:0 -1.25rem;padding:0 1.25rem}
.qr-mode{position:relative;border:0;background:transparent;padding:.7rem 0 .6rem;font:inherit;font-size:.84rem;font-weight:500;color:var(--ink-3);cursor:pointer}
.qr-mode:hover{color:var(--ink-2)}
.qr-mode.active{color:var(--ink)}
.qr-mode.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.qr-recipient{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.15rem 0 .15rem .65rem;border-left:2px solid var(--info);color:var(--ink-3);font-size:.78rem;overflow-wrap:anywhere}
.qr-recipient svg{color:var(--info);width:15px;height:15px}
.qr-all{border:0;background:none;padding:0;font:inherit;font-size:.78rem;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.replybox .f{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.replybox .f:focus-within{border-color:var(--ink-3)}
/* One line at rest; grows with what is written, then scrolls. */
.replybox .qr-editor .ed-body{flex:none;min-height:44px;max-height:36vh;padding:.65rem .85rem;background:transparent}
.qr-editor.ed-empty .ed-body::before{top:.65rem;left:.85rem}
.replybox .ed-toolbar{background:transparent}
.replybox .qr-foot{display:flex;align-items:center;gap:.35rem;padding:.35rem .4rem .35rem .65rem;border-top:1px solid var(--line)}
.replybox .qr-foot .btn.primary{margin-left:auto;padding:.42rem .95rem}
.qr-controls{display:inline-flex;align-items:center;gap:.1rem;color:var(--ink-3);min-width:0;flex-wrap:wrap}
.qr-controls .ch-btn{padding:.42rem;border-radius:7px}
.qr-controls .ch-btn:hover{background:var(--surface-3);color:var(--ink)}
.replybox.noting .f{background:var(--note-soft);border-color:color-mix(in srgb,var(--note) 40%,var(--line-2))}
.qr-note{width:100%;border:0;padding:.7rem .85rem;font:inherit;font-size:.9rem;resize:vertical;background:transparent;color:var(--ink);min-height:84px}
.qr-note:focus,.qr-note:focus-visible{outline:none}
.replybox.noting .qr-recipient{display:none}

/* ---------- details ---------- */
.details{border-left:1px solid var(--line);background:var(--surface);overflow:auto;min-height:0;min-width:0}
.details-head{display:flex;align-items:center;justify-content:space-between;padding:0 1rem 0 1.25rem;min-height:62px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.details-head h2{font-size:.98rem;font-weight:600}
#c-details-close{display:none}
.dsec{padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
.dlabel{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.75rem}
.kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:.55rem .75rem;margin:0;font-size:.82rem;align-items:center}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv dd .chip{vertical-align:middle}
.kv dd.wrap{white-space:normal;display:flex;flex-wrap:wrap;gap:.3rem}
.contact{border:1px solid var(--line-2);border-radius:10px;padding:.7rem .8rem;background:var(--surface-2);margin-bottom:.85rem;display:flex;gap:.65rem;align-items:center;min-width:0}
.contact .who{min-width:0}
.contact .nm{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact .em{font-size:.76rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.dlist li{display:flex;align-items:center;gap:.6rem;min-width:0;font-size:.82rem}
.dlist .grow{flex:1;min-width:0}
.dlist .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:500}
.dlist a.t:hover{text-decoration:underline}
.dlist .m{display:block;font-size:.74rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlist .fi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2);flex-shrink:0}

.empty{color:var(--ink-3);padding:3rem 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.empty.tall{height:100%;justify-content:center}
.empty h3{color:var(--ink-2)}
.illus svg{width:110px;height:84px;stroke:var(--line-2);stroke-width:2;fill:var(--surface-2)}
.skeleton{display:grid;grid-template-columns:36px 1fr;gap:.7rem;padding:.75rem .6rem;align-items:center}
.skeleton i{display:block;border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}
.skeleton .a{width:36px;height:36px;border-radius:50%}
.skeleton .l1{height:13px;width:38%;margin-bottom:.45rem}.skeleton .l2{height:12px;width:72%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skeleton i{animation:none}}

/* ---------- health: is my mail moving ---------- */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.fig{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;min-width:0}
.fig b{display:block;font-size:1.6rem;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.fig .k{font-size:.8rem;color:var(--ink-3);margin-top:.45rem}
.fig .st{margin-top:.55rem;font-size:.74rem;font-weight:500;white-space:normal;align-items:baseline}
.sect{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem .35rem;margin-bottom:1rem}
.sect>h2{font-size:.95rem;font-weight:600;margin-bottom:.2rem}
.sect>.sd{font-size:.8rem;color:var(--ink-3);margin-bottom:.75rem}
.sect>div>.muted{padding:.2rem 0 .85rem}
.line{display:grid;align-items:center;gap:1rem;padding:.75rem 1.25rem;margin:0 -1.25rem;border-top:1px solid var(--line)}
.line .nm{font-weight:600;font-size:.88rem}
.line .sub{font-size:.78rem;color:var(--ink-3);margin-top:.12rem}

.health-domain{grid-template-columns:minmax(0,1fr) auto;text-decoration:none;color:inherit}
.health-domain:hover{background:var(--surface-2)}
.health-domain .nm,.health-domain .sub{overflow-wrap:anywhere}
.health-failure{grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto auto}

/* ---------- dialogs / toasts ---------- */
dialog{border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink);width:min(540px,94vw);padding:0;box-shadow:var(--shadow-2)}
dialog.wide{width:min(760px,94vw)}
dialog::backdrop{background:rgb(0 0 0/.55);backdrop-filter:blur(3px)}
dialog form{padding:1.25rem 1.4rem;display:flex;flex-direction:column;gap:.85rem}
dialog h3{font-size:1.05rem;font-weight:600;overflow-wrap:anywhere}
/* The buttons sit in a footer bar, under any error, as the panes' bars do. */
dialog form>*{order:0}
dialog #dlg-error{order:1}
dialog #dlg-error:empty{min-height:0}
dialog form>.row:has(+ #dlg-error){order:2;margin:.15rem -1.4rem -1.25rem;padding:.8rem 1.4rem;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 14px 14px}
/* search everything (⌘K) */
dialog.palette{width:min(640px,94vw);margin:12vh auto auto;overflow:hidden;display:none;flex-direction:column;max-height:min(560px,76vh)}
dialog.palette[open]{display:flex}
.pal-in{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--line);color:var(--ink-3)}
.pal-in svg{width:18px;height:18px;flex:none}
.pal-in input{flex:1;min-width:0;border:0;background:transparent;padding:0;height:auto;font-size:1rem;color:var(--ink)}
.pal-in input::placeholder{color:var(--ink-3);opacity:1}
.pal-in input:focus,.pal-in input:focus-visible{outline:none}
.pal-list{overflow-y:auto;padding:.35rem;flex:1;min-height:0;overscroll-behavior:contain}
.pal-group{padding:.65rem .65rem .3rem;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.pal-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .65rem;border-radius:var(--r-sm);cursor:pointer;min-height:40px}
.pal-item.sel{background:var(--surface-3)}
.pal-ico{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.pal-ico svg{width:15px;height:15px}
.pal-item .avatar{flex:none}
.pal-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pal-title,.pal-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-title{font-size:.88rem;color:var(--ink)}
.pal-title.unread{font-weight:600}
.pal-sub{font-size:.78rem;color:var(--ink-3)}
.pal-item mark{background:var(--accent-soft-2);color:inherit;border-radius:3px;padding:0 1px}
.pal-meta{display:flex;align-items:center;gap:.5rem;flex:none;font-size:.75rem;color:var(--ink-3)}
.pal-box{display:inline-flex;align-items:center;gap:.3rem;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-box i{width:7px;height:7px;border-radius:50%;flex:none}
.pal-here{color:var(--ink-2)}
.pal-count{min-width:1.4rem;padding:0 .4rem;border-radius:99px;background:var(--badge-mute);color:var(--badge-mute-ink);text-align:center;font-variant-numeric:tabular-nums}
.pal-note{display:flex;align-items:center;gap:.5rem;padding:.75rem .65rem;font-size:.82rem;color:var(--ink-3)}
.pal-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink-3);animation:pal-spin .7s linear infinite}
@keyframes pal-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pal-spin{animation:none}}
.pal-foot{display:flex;align-items:center;gap:1rem;padding:.55rem 1rem;border-top:1px solid var(--line);background:var(--surface-2);font-size:.72rem;color:var(--ink-3)}
.pal-foot>span{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.pal-foot>span.pal-tip{display:block}
.pal-foot code{font-size:.7rem}
.pal-tip{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:640px){dialog.palette{margin-top:.75rem;max-height:80vh}.pal-tip,.pal-in kbd{display:none}}
dialog .grants{border:1px solid var(--line);border-radius:10px;padding:.15rem .8rem}
dialog .grants li,dialog .grants li:first-child,dialog .grants li:last-child{padding:.45rem 0}
dialog .grants select{padding-block:.35rem;font-size:.84rem}
dialog fieldset{border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;margin:0;min-width:0;display:flex;flex-direction:column;gap:.7rem}
dialog legend{font-size:.84rem;font-weight:500;color:var(--ink-2);padding:0 .3rem}
dialog .row .field{flex:1;min-width:0}
dialog .check{min-width:0;overflow-wrap:anywhere}
dialog .check input{flex-shrink:0}
dialog .grant{flex-wrap:wrap;gap:.5rem}
dialog .grant .check{flex:1 1 180px}
dialog .grant select{width:auto;max-width:100%;flex:1 1 145px}
dialog .grants.disabled{opacity:.5}
dialog .stack .check:has(input:disabled){opacity:.5}
dialog .mode-pick .check{align-items:flex-start}
dialog .mode-pick .check input{margin-top:.2rem}
dialog .mode-note{margin-top:-.35rem}
dialog .secret code{min-width:0}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.page>.filters{margin:0 auto 1rem;justify-content:flex-start}
.page>.row{display:flex;justify-content:center;gap:.5rem}
.filters select{width:auto;max-width:100%;min-width:min(9.5rem,100%);font-size:.88rem}
dialog .row{display:flex;gap:.5rem;justify-content:flex-end}
dialog .secret{display:flex;gap:.5rem;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .8rem}
dialog .secret code{flex:1;word-break:break-all;background:none;padding:0}
.toasts{position:fixed;bottom:1.2rem;left:1.2rem;display:flex;flex-direction:column;gap:.5rem;z-index:50}
.toast{max-width:min(380px,calc(100vw - 2.4rem));overflow-wrap:anywhere;background:var(--primary);color:var(--primary-ink);padding:.65rem .95rem;border-radius:var(--r);font-size:.9rem;box-shadow:var(--shadow-2);display:flex;align-items:center;gap:.5rem;animation:toast .38s var(--ease-pop)}
.toast.err{background:var(--danger);color:var(--danger-ink)}
.toast.ok svg{color:#22c55e}
@keyframes toast{from{transform:translateY(14px) scale(.96);opacity:0}}

/* ---------- compose dock ---------- */
#compose-dock{position:fixed;inset:0 0 0 60px;z-index:45;display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-end;gap:1px;overflow:hidden;pointer-events:none}
.app.rail-open~#compose-dock{left:var(--side-w)}
#compose-dock>*{pointer-events:auto}
.compose{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;background:var(--surface);border:0;border-left:1px solid var(--line);box-shadow:var(--shadow-2);overflow:hidden;animation:compose-up .32s var(--ease-out)}
@keyframes compose-up{from{transform:translateY(18px);opacity:0}}
.compose.min{flex:0 1 300px;min-width:0;max-width:22%;height:auto;border:1px solid var(--line-2);border-bottom:0;border-radius:10px 10px 0 0}
.compose.min .compose-form{display:none}
.compose.drop{outline:2px dashed var(--accent);outline-offset:-4px}

.compose-head{display:flex;align-items:center;gap:.15rem;background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);min-height:52px;padding:.5rem .6rem .5rem 1.1rem;cursor:pointer;user-select:none}
.compose.min .compose-head{border-bottom:0;min-height:42px}
.compose-head h3{flex:1;min-width:0;font-family:var(--font);font-size:.9rem;font-weight:600;letter-spacing:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ch-btn{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-sm);background:transparent;color:inherit;padding:.3rem;transition:background .12s}
.ch-btn:hover{background:var(--surface-3)}
.ch-btn:focus-visible{outline:2px solid var(--ring);outline-offset:-1px}
.compose-head .ch-btn{color:var(--ink-3);padding:.4rem;border-radius:7px}
.compose-head .ch-btn:hover{color:var(--ink)}
.compose.min [data-act=min] svg{transform:rotate(180deg)}

.compose-form{flex:1;min-height:0;display:flex;flex-direction:column}
.compose-row{display:flex;align-items:center;gap:.6rem;padding:0 .95rem;border-bottom:1px solid var(--line)}
.compose-row:focus-within{box-shadow:inset 0 -2px 0 var(--accent);border-bottom-color:transparent}
.compose-row .clabel{flex-shrink:0;min-width:2.4rem;color:var(--ink-3);font-size:.9rem}
.compose-row input,.compose-row select{min-width:0;border:0;border-radius:0;background:none;padding:.6rem 0}
.compose-row input:hover,.compose-row select:hover{border-color:transparent}
.compose-row input:focus-visible,.compose-row select:focus-visible{outline:none}
.compose-row select{width:auto;max-width:100%;margin-left:-.15rem;padding-left:.15rem;cursor:pointer}
.cc-toggles{display:flex;gap:.5rem;flex-shrink:0}
.cc-toggle{font:inherit;font-size:.85rem;line-height:1;cursor:pointer;border:0;background:none;color:var(--ink-3);padding:.25rem}
.cc-toggle:hover{color:var(--ink)}
.cc-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}
.compose-editor{flex:1;min-height:0}
.compose .compose-error{padding:0 .95rem .5rem;min-height:0}
.compose .compose-error:empty{display:none}

.compose-controls{display:inline-flex;align-items:center;gap:.1rem}
.att-chip{display:inline-flex;align-items:center;gap:.4rem;max-width:15rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.25rem .3rem .25rem .5rem;font-size:.82rem}
.att-chip .name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.att-chip .ch-btn{color:var(--ink-3);padding:.15rem}
.att-chip .ch-btn:hover{background:var(--surface-3);color:var(--ink)}

.compose-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;padding:.7rem .95rem;border-top:1px solid var(--line)}
.compose-foot .send{border-radius:8px;padding:.5rem 1.3rem;margin-right:.35rem}
.compose-foot .ch-btn{color:var(--ink-3);padding:.5rem;border-radius:50%}
.compose-foot .ch-btn svg{width:1.3em;height:1.3em}
.compose-foot .ch-btn:hover{background:var(--surface-3);color:var(--ink)}
.compose-foot .ch-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.compose-foot .grow{flex:1}

/* ---------- editor (public/editor.js) ---------- */
.ed{display:flex;flex-direction:column;min-height:0;position:relative}
.ed.ed-drop{outline:2px dashed var(--accent);outline-offset:-4px}
/* Follows the app theme; the colours are not sent, so the recipient's client picks its own. */
.ed-body{position:relative;flex:1;min-height:0;overflow:auto;padding:.9rem .95rem;background:var(--surface);color:var(--ink);caret-color:var(--ink);font:15px/1.6 system-ui,sans-serif;overflow-wrap:anywhere;outline:none}
.ed-body img{max-width:100%}
.ed-body ul,.ed-body ol{margin:0;padding-left:1.6em}
.ed-body blockquote{margin:0 0 0 .8ex;padding-left:1ex;border-left:2px solid var(--line-2)}
.ed-body a{color:var(--accent)}
.ed-empty .ed-body::before{content:attr(data-placeholder);position:absolute;top:.9rem;left:.95rem;color:var(--ink-3);pointer-events:none}
.ed-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem .95rem 0}
.ed-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.1rem;padding:.3rem .6rem;border-top:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.ed-tool{color:var(--ink-2);gap:.15rem;padding:.35rem;font-size:.82rem}
.ed-tool:hover{background:var(--surface-3);color:var(--ink)}
.ed-tool[aria-pressed="true"],.ed-tool[aria-expanded="true"],.ed-fmt[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.ed-tool[disabled]{opacity:.4;cursor:default}
.ed-tool svg{width:1.15em;height:1.15em}
.ed-font-label{min-width:5.6rem;text-align:left}
.ed-size-label{min-width:3.4rem;text-align:left}
.ed-sep{width:1px;align-self:stretch;margin:.25rem .2rem;background:var(--line)}
.ed-menu-wrap{position:relative;display:inline-flex}
/* Menus open upwards: the row sits just above the footer. */
.ed-menu{position:fixed;z-index:50;display:flex;flex-direction:column;gap:.1rem;min-width:9rem;max-height:calc(100dvh - 16px);overflow-y:auto;padding:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-2)}
.ed-menu button{font:inherit;text-align:left;border:0;background:none;color:var(--ink);padding:.35rem .5rem;border-radius:var(--r-sm);cursor:pointer}
.ed-menu button:hover{background:var(--surface-3)}
.ed-menu[data-for=align]{flex-direction:row;min-width:0}
.ed-menu-label{font-size:.72rem;color:var(--ink-3);padding:.2rem .3rem 0}
.ed-swatches{display:grid;grid-template-columns:repeat(6,1.35rem);gap:.25rem;padding:.2rem .3rem}
.ed-menu .ed-swatch{width:1.35rem;height:1.35rem;padding:0;border:1px solid var(--line-2);border-radius:4px}
.ed-menu .ed-none{grid-column:1/-1;font-size:.78rem;padding:.2rem .3rem}

/* ---------- tab bar (phones) ---------- */
.tabbar{display:none}
@media(max-width:620px){
  .tabbar{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
    background:var(--side);border-top:1px solid var(--line);padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom));z-index:30}
  .app.no-tabbar .tabbar{display:none}
  .tabbar .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
    min-height:50px;border:0;background:none;color:var(--ink-3);font:inherit;font-size:.68rem;font-weight:500;cursor:pointer;
    border-radius:10px;-webkit-tap-highlight-color:transparent}
  .tabbar .tab.hidden{display:none}
  .tabbar .tab svg{width:21px;height:21px}
  .tabbar .tab.active{color:var(--ink)}
  .tabbar .tab.active svg{color:var(--accent)}
  .tabbar .tab:disabled{opacity:.4}
  .tabbar .tab-badge{position:absolute;top:3px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    background:var(--badge);color:var(--badge-ink);font-size:.6rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--side)}
  .tabbar .tab-dot{position:absolute;top:7px;left:calc(50% + 7px);width:8px;height:8px;border-radius:50%;background:var(--hold)}
  .tabbar .hidden{display:none}
}

/* ---------- responsive ---------- */
@media(min-width:1800px){
  :root{--list-w:380px;--details-w:320px}
}
/* Details float over the thread when there is no room beside it. */
@media(max-width:1359px){
  .conv-view,.conv-view.details-closed{grid-template-columns:minmax(0,1fr)}
  .conv-view .details,.conv-view.details-closed .details{display:none;position:absolute;right:0;top:0;bottom:0;width:min(var(--details-w),100%);z-index:6;box-shadow:var(--shadow-2)}
  .conv-view.details-overlay .details{display:block}
  #c-details-close{display:inline-flex}
}
@media(max-width:1099px){
  :root{--list-w:300px}
  .reading{padding:0 1rem}
}
/* One pane at a time: the list, or the conversation opened from it. */
@media(max-width:999px){
  .mail{grid-template-columns:minmax(0,1fr)}
  .mail.reading-conv .listpane{display:none}
  .mail:not(.reading-conv) .convpane{display:none}
  .listpane{border-right:0}
  .cbar .back{display:inline-flex}
  .cbar{padding-left:1rem}
}
@media(max-width:900px){
  :root{--page-gutter:1.25rem}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  #compose-dock{padding:0;flex-direction:column-reverse;gap:.35rem}
  .compose{width:100%;height:0;border-radius:0}
  .compose.min{flex:0 0 auto;max-width:100%;height:auto}
}
@media(max-width:620px){
  :root{--page-gutter:.75rem}
  /* A phone has no hover and no room for a sidebar beside the mail: the
     sidebar is a drawer with its names, opened from the tab bar, and the mail
     takes the whole width. */
  :root{--side-w:min(304px,86vw)}
  .app,.app.rail-open{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;transition:none;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  main{grid-column:1;grid-row:1}
  .rail,.app.rail-open .rail{position:fixed;top:0;bottom:0;left:0;z-index:60;width:var(--side-w);
    padding:calc(.75rem + env(safe-area-inset-top)) .65rem calc(.75rem + env(safe-area-inset-bottom)) calc(.65rem + env(safe-area-inset-left));
    transform:translateX(-100%);visibility:hidden;box-shadow:none;
    transition:transform .26s var(--rail-ease),visibility 0s linear .26s}
  .app.drawer-open .rail{transform:none;visibility:visible;box-shadow:14px 0 34px rgb(0 0 0/.35);
    transition:transform .3s var(--rail-ease),visibility 0s}
  .rail .rlabel,.rail .rword{opacity:1;transform:none;transition:none}
  .rtoggle{display:none}
  .rail :is(.rbox,.rico,.rme){height:42px}
  :is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .tint{top:16.5px}
  :is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .badge{top:12px}
  :is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .flag{bottom:16.5px}
  :is(.rail:hover,.rail:focus-within,.rail-open .rail) .rico .flag{top:17.5px}
  .rail-scrim{position:fixed;z-index:55}
  :is(.rail:hover,.rail:focus-within)~.rail-scrim{opacity:0}
  .app.drawer-open .rail-scrim{opacity:.45;pointer-events:auto}
  /* Keyboard shortcuts mean nothing to a thumb. */
  #help-btn{display:none}
  #compose-dock,.app.rail-open~#compose-dock{left:0}
  .inbox-head{padding:.85rem .75rem .6rem}
  .find,.segmented,.view-chip{margin-inline:.75rem}
  .convs{padding:0 .25rem .75rem}
  .selbar{margin:0 .75rem .25rem;padding-left:.7rem}
  .segmented .tab{font-size:.76rem;padding:.38rem .3rem}
  .cbar{gap:.5rem;padding:.6rem .6rem .6rem .75rem}
  .cavatar,.csub{display:none}
  .cbar .right .btn.primary{padding:.42rem;aspect-ratio:1;font-size:0;gap:0}
  .cbar .right .btn.primary svg{font-size:.82rem}
  .reading{padding:0 .75rem}
  .replybox{padding:0 .75rem .75rem}
  .qr-modes{margin:0 -.75rem;padding:0 .75rem}
  .tmsg,.tmsg:has(iframe){max-width:94%;width:auto}
  .tmsg:has(iframe){width:94%}
  .tmsg-head .sub{display:none}
  .tmsg-body:has(iframe){padding:.4rem}
  .tmsg .dr{grid-template-columns:minmax(0,1fr) auto;gap:.4rem}
  .tmsg .dr .m{grid-column:1/-1;grid-row:2;overflow-wrap:anywhere}
  .page-head{min-height:54px;margin-bottom:1rem}
  .page-head .eyebrow{display:none}
  .card,.sect{padding-inline:1rem}
  .card>.table-wrap{margin-inline:-1rem;padding-inline:1rem}
  .line{margin-inline:-1rem;padding-inline:1rem}
  .page>.rows>li,.page>.rows>li:first-child,.page>.rows>li:last-child{padding-inline:.9rem}
  .steps li{padding:1rem 1rem 1rem 3rem}
  .card-head{gap:.75rem}
  .card-head>div{flex-basis:100%}
  .fig{padding:1rem .8rem;min-width:0}
  .fig .st{font-size:.72rem}
  .health-failure{grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
  .health-failure>span:nth-child(2){grid-column:1/-1;grid-row:2}
  #member-rows li{flex-wrap:wrap;gap:.6rem}
  #member-rows .grow{flex-basis:calc(100% - 50px)}
  .member-actions{margin-left:46px}
  #d-mailboxes li{flex-wrap:wrap}
  #d-mailboxes .grow{flex-basis:calc(100% - 44px)}
  #d-mailboxes .danger{margin-left:42px}
  .filters select{width:100%}
  .table-hint{display:block;margin-bottom:.5rem}
  .dns-table,.dns-table tbody{display:block;width:100%}
  .dns-table tr:first-child{display:none}
  .dns-table tr{display:block;padding:.75rem 0;border-top:1px solid var(--line)}
  .dns-table td{display:block;padding:.25rem 0;border:0}
  .dns-table td::before{content:attr(data-label);display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:.2rem}
  .dns-table td code,.dns-table td.nowrap code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
  .steps li::before{top:.95rem;left:.95rem}
  dialog form{padding:1.2rem;gap:.85rem}
  dialog form>.row:has(+ #dlg-error){margin:.15rem -1.2rem -1.2rem;padding:.75rem 1.2rem}
  dialog .row{flex-wrap:wrap}
  /* Date and time controls need their full width on a phone. */
  dialog .auto-reply .row{flex-direction:column}
  dialog .auto-reply .row .field{flex:none;width:100%}
  /* The details cover the conversation rather than leaving a sliver of it. */
  .conv-view .details,.conv-view.details-closed .details{width:100%;box-shadow:none}
  /* With no tab bar under it, the reply box keeps clear of the home indicator. */
  .app.no-tabbar .replybox{padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}
  /* A message being written is the whole screen. */
  #compose-dock{z-index:70}
  .compose{border-left:0}
  .compose-head{padding-top:calc(.5rem + env(safe-area-inset-top))}
  .compose-foot{flex-wrap:nowrap;gap:.15rem;padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom))}
  .compose-foot .send{padding:.55rem 1.1rem;margin-right:.2rem}
  .compose-foot .ch-btn{padding:.55rem}
  .pal-foot{display:none}
  /* Toasts sit above the tab bar, not on it. */
  .toasts{bottom:calc(4.4rem + env(safe-area-inset-bottom))}
  .app.no-tabbar~.toasts,.app.hidden~.toasts{bottom:calc(1rem + env(safe-area-inset-bottom))}
  /* Webhook deliveries: a row per delivery rather than a table to scroll. */
  .deliveries .table-hint{display:none}
  .deliveries .table-wrap{overflow:visible;margin:0;padding:0;border:0}
  .deliveries table,.deliveries tbody{display:block;min-width:0;width:100%}
  .deliveries tr:first-child{display:none}
  .deliveries tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem .6rem;align-items:center;padding:.75rem 0;border-top:1px solid var(--line)}
  .deliveries td{display:block;padding:0;border:0;min-width:0}
  .deliveries td:nth-child(2) code{white-space:nowrap}
  .deliveries tr{grid-template-columns:auto minmax(0,1fr) auto}
  .deliveries td:nth-child(2){grid-column:2/-1}
  .deliveries td:nth-child(3){grid-row:2;grid-column:3;color:var(--ink-3);font-size:.78rem;white-space:nowrap}
  .deliveries td:nth-child(4){grid-row:2;color:var(--ink-3);font-size:.78rem}
  .deliveries td:nth-child(4)::before{content:"Attempt "}
  .deliveries td:nth-child(5){grid-row:2;grid-column:2;color:var(--ink-3);font-size:.78rem}
  .deliveries td:nth-child(6){grid-row:3;grid-column:1/-1;display:flex;gap:.4rem}
  .check{align-items:flex-start}
  .check input{margin-top:.2rem}
}
/* Fingers, not pointers: room to hit, and text fields at the size iOS will
   not zoom into. */
@media(pointer:coarse){
  input[type=text],input[type=password],input[type=search],input[type=url],input[type=email],input[type=datetime-local],select,textarea,.ed-body{font-size:16px}
  .btn{min-height:40px}
  .btn.sm{min-height:36px}
  .btn.icon-btn,.btn.icon-btn.sm{min-width:40px;min-height:40px;justify-content:center}
  .btn.icon-btn.xs,.copy{min-width:32px;min-height:32px;justify-content:center}
  .cbar .back{width:40px;height:40px}
  .check input[type=checkbox],.check input[type=radio]{width:20px;height:20px;flex-shrink:0}
  .segmented .tab{min-height:36px}
  .compose-head .ch-btn{min-width:40px;min-height:40px;display:inline-grid;place-items:center}
  .menu-item{min-height:42px}
}
.menu-item.phone-only{display:none}
@media(max-width:400px){
  .segmented .tab b{display:none}
  #c-star,#c-snooze{display:none}
  .menu-item.phone-only:not(.hidden){display:flex}
  .compose-foot .send{padding:.55rem .85rem}
  .compose-foot .ch-btn{padding:.45rem}
}

/* folders and stars */
.conv .star-mark{display:inline-flex;color:var(--hold);flex-shrink:0}
.conv .star-mark svg{width:.8rem;height:.8rem;fill:currentColor;stroke:currentColor}
#c-star.on{color:var(--hold)}
#c-star.on svg{fill:currentColor}
.toast-action{margin-left:.6rem;background:none;border:0;padding:.1rem .3rem;font:inherit;font-weight:600;color:inherit;text-decoration:underline;cursor:pointer;border-radius:var(--r-sm)}
.toast-action:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* bulk actions */
.bulkbar{display:flex;align-items:center;gap:0;flex:1;min-width:0}
.bulkbar .bulk-count{font-size:.76rem;font-weight:600;margin-right:auto;padding-right:.3rem;display:inline-flex;align-items:center;gap:.4rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.bulkbar .btn.icon-btn{padding:.28rem;border-color:transparent;background:transparent;color:var(--ink-2)}
.bulkbar .btn.icon-btn:hover{background:var(--surface-3);color:var(--ink)}
.bulkbar .btn.icon-btn.danger{color:var(--danger)}
.bulkbar .btn.icon-btn.danger:hover{background:var(--danger-soft)}
.bulkbar .btn svg{width:15px;height:15px}
.bulkbar .bulk-sep{width:1px;height:14px;background:var(--line-2);margin:0 .15rem}
/* While an action runs, its progress is all the row says. */
.bulkbar[aria-busy="true"] :is(.btn,.bulk-sep){display:none}
.bulkbar .spin{width:13px;height:13px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:spin .8s linear infinite;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.bulkbar .spin{animation:none}}
/* quoted text */
.quote-toggle{display:inline-flex;align-items:center;justify-content:center;margin-top:.4rem;padding:0 .5rem;height:1.1rem;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);color:var(--ink-3);font:inherit;font-size:.7rem;line-height:1;cursor:pointer}
.quote-toggle:hover{color:var(--ink)}
.quote-toggle:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.plain.quoted{color:var(--ink-3);margin-top:.5rem}
.compose-carried{display:flex;flex-wrap:wrap;gap:.4rem;padding:.4rem .9rem}
.compose-quote{padding:.2rem .9rem .5rem;font-size:.78rem;color:var(--ink-3)}
.compose-quote summary{cursor:pointer;width:fit-content}
.compose-quote-body{white-space:pre-wrap;max-height:10rem;overflow:auto;margin-top:.35rem;padding-left:.6rem;border-left:2px solid var(--line-2)}
/* drafts and settings */
.draft-mark{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fail);flex-shrink:0}
.draft-state{white-space:nowrap}

.settings-form{display:flex;flex-direction:column;gap:.85rem}
.settings-form>h2{margin-bottom:0}
.sig-editor{border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:6rem;background:var(--surface);overflow:hidden}
/* snooze and scheduled send */
.conv .time.snoozed,.scheduled-row .time{display:inline-flex;align-items:center;gap:.25rem;color:var(--hold)}
.conv .time svg{width:.8rem;height:.8rem}
#c-snooze.on{color:var(--hold)}
.draft-mark.sched{color:var(--hold)}
.later-choices{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0 1rem}
.later-choices .btn{justify-content:space-between}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.tmsg-meta .linkish{margin-left:.25rem;font-size:.72rem}
.compose-foot .send-later{margin-left:.25rem}
.alias-list{list-style:none;margin:0 0 .5rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.alias-add{align-items:center;gap:.4rem}
.alias-add input{flex:1;min-width:6rem}
.meter{height:.45rem;border-radius:999px;background:var(--surface-3);overflow:hidden;margin:.2rem 0 .5rem}
.meter span{display:block;height:100%;width:0;background:var(--live);border-radius:inherit}
.meter.warn span{background:var(--warn)}
/* Which mailboxes this device is notified about. */
.notify-boxes{border:0;padding:0;margin:.6rem 0 0;min-width:0}
.notify-boxes legend{padding:0;margin-bottom:.45rem}
.notify-boxes .stack{gap:.45rem}
.notify-boxes .check{overflow-wrap:anywhere}
.notify-boxes .check .muted{margin-left:.15rem}
.notify-devices{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.notify-devices h3{margin:0 0 .2rem;font-size:.9rem}
.notify-devices .rows{margin-top:.5rem}
.notify-devices .device .title{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}
.notify-devices .device .meta{overflow-wrap:anywhere}

/* The import review stays usable on narrow screens. */
.import-table-wrap { overflow-x: auto; }
.import-table { width: 100%; }
.import-table input[type=password] { min-width: 10rem; width: 100%; }
#mailcow-import details { margin-block: .8rem; }
#mailcow-import summary { cursor: pointer; }
#mailcow-import code { overflow-wrap: anywhere; }
#mailcow-import .row { display: flex; gap: .5rem; flex-wrap: wrap; }
.import-table input:disabled { opacity: .5; }

/* ---------- motion ----------
   One curve for things arriving (fast out, long settle) and one with a touch
   of give for things answering you. Arrivals only play when a navigation
   brings something in — app.js marks the container .entering for a moment —
   so live updates and saves redraw in place without replaying anything. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-pop:cubic-bezier(.34,1.45,.64,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes rise-sm{from{opacity:0;transform:translateY(5px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.97)}}
@keyframes slide-l{from{opacity:.4;transform:translateX(24px)}}
@keyframes float{50%{transform:translateY(-7px)}}
@keyframes drift{to{transform:translate(-7%,5%) scale(1.12)}}

/* Pages: the header stays put; what is under it rises a beat apart, and so do
   the rows and cards the page fetches. "backwards" fills only the delay, so
   nothing is left holding a transform (and a stacking context) afterwards. */
main.entering .page>:not(.page-head){animation:rise .5s var(--ease-out) backwards;animation-delay:calc(var(--d,0) * 55ms)}
main.entering .page>:nth-child(3){--d:1}main.entering .page>:nth-child(4){--d:2}main.entering .page>:nth-child(5){--d:3}
main.entering .page>:nth-child(6){--d:4}main.entering .page>:nth-child(7){--d:5}main.entering .page>:nth-child(n+8){--d:6}
main.entering :is(.figs>.fig,.cards>.card,.page>.rows>li,.steps>li,.sect .line,#webhook-rows>*,#address-rows>li){
  animation:rise-sm .45s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 40ms + 60ms)}
main.entering :is(.figs,.cards,.page>.rows,.steps,.sect>div,#webhook-rows,#address-rows)>:nth-child(2){--i:1}
main.entering :is(.figs,.cards,.page>.rows,.steps,.sect>div,#webhook-rows,#address-rows)>:nth-child(3){--i:2}
main.entering :is(.figs,.cards,.page>.rows,.steps,.sect>div,#webhook-rows,#address-rows)>:nth-child(4){--i:3}
main.entering :is(.figs,.cards,.page>.rows,.steps,.sect>div,#webhook-rows,#address-rows)>:nth-child(5){--i:4}
main.entering :is(.figs,.cards,.page>.rows,.steps,.sect>div,#webhook-rows,#address-rows)>:nth-child(6){--i:5}
main.entering :is(.figs,.cards,.page>.rows,.steps,.sect>div,#webhook-rows,#address-rows)>:nth-child(n+7){--i:6}
/* The setup bar fills from empty instead of appearing full. */
main.entering .progress span{animation:grow .9s var(--ease-out) .15s backwards}
@keyframes grow{from{width:0}}

/* The list: a new view's rows arrive as a short wave; a refresh does not. */
.convs.entering>:is(.conv-row,.conv-day,.empty){animation:rise-sm .4s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 28ms)}
.convs.entering>:nth-child(2){--i:1}.convs.entering>:nth-child(3){--i:2}.convs.entering>:nth-child(4){--i:3}
.convs.entering>:nth-child(5){--i:4}.convs.entering>:nth-child(6){--i:5}.convs.entering>:nth-child(7){--i:6}
.convs.entering>:nth-child(8){--i:7}.convs.entering>:nth-child(9){--i:8}.convs.entering>:nth-child(n+10){--i:9}
.skeleton{animation:fade .3s ease-out backwards}

/* A conversation opens into place; its messages follow, top to bottom. */
.conv-view{animation:fade .22s ease-out}
.conv-main>.cbar{animation:rise-sm .35s var(--ease-out) backwards}
#c-thread.entering>*{animation:rise .45s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 45ms + 40ms)}
#c-thread.entering>:nth-child(2){--i:1}#c-thread.entering>:nth-child(3){--i:2}#c-thread.entering>:nth-child(4){--i:3}
#c-thread.entering>:nth-child(n+5){--i:4}
.replybox{animation:rise-sm .4s var(--ease-out) .12s backwards}
.conv-view.details-overlay .details{animation:slide-l .3s var(--ease-out)}
.pane-empty{animation:fade .35s ease-out}
.pane-empty .illus svg{animation:float 6s ease-in-out infinite}

/* The reply / note switch underlines the mode it is in. */
.qr-mode{transition:color .15s,border-color .2s var(--ease-out)}

/* The queue switch: one highlight that slides to the chosen state. */
.segmented .tab{position:relative;transition:color .2s}
.segmented.sliding::before{content:"";position:absolute;z-index:-1;left:0;top:3px;bottom:3px;width:var(--seg-w,0);
  transform:translateX(var(--seg-x,0));border-radius:7px;background:var(--seg);box-shadow:var(--shadow-1)}
.segmented.slide-ready::before{transition:transform .34s var(--ease-out),width .34s var(--ease-out)}
.segmented.sliding .tab.active{background:transparent;box-shadow:none}
.bulkbar:not(.hidden){animation:fade .18s ease-out}

/* Answering a press. */
.btn:active:not([disabled]){transform:scale(.97)}
.btn.lg:active:not([disabled]){transform:scale(.985)}
:is(.rico,.rbox,.tab,.menu-item,.pal-item):active{transform:scale(.98)}
.conv:active{transform:scale(.995)}
.conv{transition:background .12s,transform .14s var(--ease-out),box-shadow .12s}
.btn.primary:not(.danger):hover{box-shadow:0 4px 14px -6px rgb(0 0 0/.45)}
.card.link{transition:background .15s,border-color .15s,transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.card.link:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgb(0 0 0/.35)}

/* Menus and the palette open from where they were asked for. */
.menu:not(.hidden){animation:pop .17s var(--ease-out);transform-origin:top right}
/* The editor measures its menus the moment they open to place them, so they
   only fade: a scale would hand it the wrong size. */
.ed-menu:not(.hidden){animation:fade .14s ease-out}
.pal-item{transition:background .1s}

/* Dialogs scale in from just below and fade back out. Browsers without
   @starting-style simply open and close them at once, as before. */
dialog{opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .18s ease-out,transform .26s var(--ease-out),overlay .2s allow-discrete,display .2s allow-discrete}
dialog[open]{opacity:1;transform:none}
@starting-style{dialog[open]{opacity:0;transform:translateY(10px) scale(.98)}}
dialog::backdrop{opacity:0;transition:opacity .2s ease-out,overlay .2s allow-discrete,display .2s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
dialog.palette{transform:translateY(-6px) scale(.985)}
dialog.palette[open]{transform:none}
@starting-style{dialog.palette[open]{transform:translateY(-6px) scale(.985)}}

/* Sign in: the panel settles in; behind it the glow drifts and the envelope
   floats, slowly enough to read as light rather than movement. */
.gate:not(.hidden) .gate-panel>:not(.hidden){animation:rise .6s var(--ease-out) backwards}
.gate:not(.hidden) .gate-panel>:nth-child(2){animation-delay:.06s}.gate:not(.hidden) .gate-panel>:nth-child(3){animation-delay:.1s}
.gate:not(.hidden) .gate-panel>:nth-child(4){animation-delay:.14s}.gate:not(.hidden) .gate-panel>:nth-child(5){animation-delay:.18s}
.gate:not(.hidden) .gate-panel>:nth-child(n+6){animation-delay:.22s}
.gate-art::before{content:"";position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(34% 28% at 72% 22%,rgb(255 106 61/.13),transparent 70%),radial-gradient(28% 26% at 18% 85%,rgb(255 106 61/.08),transparent 70%);
  animation:drift 16s ease-in-out infinite alternate}
.gate-art svg{animation:float 7s ease-in-out infinite}
.gate-art p{animation:rise .8s var(--ease-out) .1s backwards}

/* Everything above is decoration: with reduced motion it all goes, and so
   does every transition's travel. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}