/* ---------- tokens ----------
   Warm paper and warm ink rather than cold grey cards. Blue is reserved for
   things you can press, so the four status hues are the only other colour on
   screen and always mean the same thing. */
:root{
  --paper:#f7f5f2; --surface:#fffefd; --surface-2:#f1eee9; --surface-3:#e9e5de;
  --ink:#1a1815; --ink-2:#5a544c; --ink-3:#918a80; --line:#e7e2da; --line-2:#d6cfc4;
  --rail:#1a1815; --rail-ink:#ffffff;
  --accent:#2f5ee0; --accent-hover:#2249bb; --accent-ink:#fff; --accent-soft:#eaf0fe; --accent-soft-2:#d9e4fc;
  /* conversation states */
  --reply:#b8460e; --reply-soft:#fbeee6;
  --hold:#8a6a13;  --hold-soft:#faf1dd;
  --done:#4a7c3f;  --done-soft:#eaf3e7;
  --fail:#b3312a;  --fail-soft:#fbeae8;
  /* legacy aliases still used by webhooks, keys and forms */
  --live:#4a7c3f; --live-soft:#eaf3e7; --warn:#8a6a13; --warn-soft:#faf1dd;
  --danger:#b3312a; --danger-soft:#fbeae8;
  --shadow-1:0 1px 2px rgb(26 24 21/.05),0 1px 3px rgb(26 24 21/.04);
  --shadow-2:0 16px 40px rgb(26 24 21/.14);
  --compose-head:#1a1815;
  --r-sm:6px; --r:8px; --r-lg:14px;
  --font:"Public Sans",system-ui,-apple-system,sans-serif; --display:"Bricolage Grotesque","Public Sans",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14120f; --surface:#1c1a16; --surface-2:#232019; --surface-3:#2c281f;
  --ink:#f0ece5; --ink-2:#b7b0a5; --ink-3:#8a8378; --line:#2b271f; --line-2:#3a352b;
  --rail:#0e0d0b; --rail-ink:#ffffff;
  --accent:#7b9df5; --accent-hover:#93b0f8; --accent-ink:#14120f; --accent-soft:#1c2740; --accent-soft-2:#26355a;
  --reply:#e0894f; --reply-soft:#2e2015; --hold:#d3ad4e; --hold-soft:#2a2313;
  --done:#8cc07c; --done-soft:#1b2718; --fail:#eb8078; --fail-soft:#2e1917;
  --live:#8cc07c; --live-soft:#1b2718; --warn:#d3ad4e; --warn-soft:#2a2313;
  --danger:#eb8078; --danger-soft:#2e1917;
  --shadow-1:0 1px 2px rgb(0 0 0/.4); --shadow-2:0 16px 40px rgb(0 0 0/.6);
  --compose-head:#0e0d0b;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#14120f; --surface:#1c1a16; --surface-2:#232019; --surface-3:#2c281f;
  --ink:#f0ece5; --ink-2:#b7b0a5; --ink-3:#8a8378; --line:#2b271f; --line-2:#3a352b;
  --rail:#0e0d0b; --rail-ink:#ffffff;
  --accent:#7b9df5; --accent-hover:#93b0f8; --accent-ink:#14120f; --accent-soft:#1c2740; --accent-soft-2:#26355a;
  --reply:#e0894f; --reply-soft:#2e2015; --hold:#d3ad4e; --hold-soft:#2a2313;
  --done:#8cc07c; --done-soft:#1b2718; --fail:#eb8078; --fail-soft:#2e1917;
  --live:#8cc07c; --live-soft:#1b2718; --warn:#d3ad4e; --warn-soft:#2a2313;
  --danger:#eb8078; --danger-soft:#2e1917;
  --shadow-1:0 1px 2px rgb(0 0 0/.4); --shadow-2:0 16px 40px rgb(0 0 0/.6);
  --compose-head:#0e0d0b;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font:14.5px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:1.75rem;font-weight:700}h2{font-size:1.1rem;font-weight:600}h3{font-size:1rem;font-weight:600}
p{margin:0}
.hidden{display:none!important}
.muted{color:var(--ink-3)}.small{font-size:.83rem}.lead{max-width:60ch;margin:.25rem 0 1.25rem}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
code,kbd{font-family:var(--mono)}
code{font-size:.86em;background:var(--surface-3);padding:.1em .4em;border-radius:4px}
kbd{font-size:.72rem;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 .4em;background:var(--surface)}
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.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.error{color:var(--danger);min-height:1.2em;font-size:.9rem}
.notice{background:var(--live-soft);color:var(--live);padding:.6rem .8rem;border-radius:var(--r-sm);font-size:.9rem}
.notice a{color:inherit}

/* ---------- controls ---------- */
.btn{font:inherit;font-weight:500;cursor:pointer;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:.5rem .85rem;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}
.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{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-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:.35rem .65rem;font-size:.85rem}
.btn.lg{padding:.7rem 1rem;font-size:1rem;justify-content:center}
.btn.danger{color:var(--danger)}.btn.danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.btn.icon-btn{padding:.45rem;aspect-ratio:1;justify-content:center}
.btn.icon-btn.sm{padding:.4rem}.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],select,textarea{font:inherit;padding:.55rem .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:.85rem;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:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .55rem;border-radius:999px;font-weight:600;line-height:1.3}
.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(--accent-soft);color:var(--accent)}
.badge{font-size:.7rem;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:.05rem .45rem;min-width:1.5em;text-align:center;line-height:1.5}
.badge.warn{background:var(--warn);color:#fff}
.avatar{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0;background:var(--accent)}
.avatar.sm{width:28px;height:28px;font-size:.72rem}

/* ---------- gate ---------- */
.gate{display:grid;grid-template-columns:1.1fr 1fr;height:100%}
.gate-art{background:linear-gradient(135deg,var(--accent) 0%,#5b8bef 60%,#9dbcf6 100%);position:relative;overflow:hidden}
.gate-art::before{content:"";position:absolute;inset:-20% -10% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:rgb(255 255 255/.12)}
.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/.75);stroke-width:2.5;fill:rgb(255 255 255/.08);position:relative}
.gate-art p{position:relative;color:#fff;font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:600;max-width:18ch;line-height:1.2;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:560px;width:100%;margin:0 auto}
.gate-panel h1{font-size:1.6rem}
@media(max-width:820px){.gate{grid-template-columns:1fr}.gate-art{display:none}}

/* ---------- shell: a 60px rail, not a 248px sidebar ---------- */
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.brand.lg{font-size:1.35rem}
.logo{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:9px;background:var(--accent);color:var(--accent-ink)}
.logo svg{width:1em;height:1em;stroke-width:2.2}
/* The first column only reserves space. The rail floats above it so peeking at
   it 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:236px 1fr;transition-duration:var(--rail-in)}
.topbar{display:none}

/* ---------- the rail ---------- */
/* Icons alone are a memory test, so the rail opens on hover — pointing at it is
   the whole gesture — and the pin keeps it open for people who would rather
   read names than remember icons. Peeking overlays the mail; pinning reflows
   it, so the choice is between the two, not between labels and none.
   Opening and closing are deliberately different: opening is one unhurried
   movement you are meant to watch, closing gets out of the way. */
:root{--rail-ease:cubic-bezier(.32,.72,0,1);--rail-in:.3s;--rail-out:.19s;--rail-step:15ms}

.rail{background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:.8rem 0;gap:.25rem;
  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:236px;padding:.8rem .6rem;transition-duration:var(--rail-in)}
:is(.rail:hover,.rail:focus-within){box-shadow:14px 0 34px rgb(0 0 0/.34)}
.rail-open .rail{box-shadow:none}

/* Every row keeps its 34px slot and grows into the width; nothing is swapped
   in or out, so there is nothing to pop. */
.rgroup{display:flex;flex-direction:column;gap:.25rem;align-items:center;width:100%}
.rail .foot{margin-top:auto;gap:.5rem;flex-shrink:0}
.rbox,.rico,.rme{position:relative;width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;gap:.6rem;border:0;background:transparent;padding:0;cursor:pointer;
  font:inherit;text-align:left;
  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 down the rail so the names arrive as a
   wave rather than all at once. */
.rlabel{flex:1 1 auto;min-width:0;font-size:.86rem;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(70ms + var(--i,0) * var(--rail-step)),
             transform .3s var(--rail-ease) calc(70ms + var(--i,0) * var(--rail-step))}

.rhead{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;flex-shrink:0;width:100%;
  padding-left:15px;transition:padding var(--rail-out) var(--rail-ease)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rhead{padding-left:1.5px;transition-duration:var(--rail-in)}
.rail .mk{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0;border:0;cursor:pointer;padding:0}
.rail .mk svg{width:16px;height:16px;stroke-width:2.1}
.rword{font-family:var(--display);font-weight:700;font-size:1.02rem;color:#fff;letter-spacing:-.02em;
  white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity .1s linear,transform .1s var(--rail-ease)}
: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 pin only means something once the rail is already open, so it is not
   there before — it widens into place rather than appearing. */
.rtoggle{width:0;height:26px;border-radius:8px;border:0;background:transparent;color:rgb(255 255 255/.45);
  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:15px;height:15px}
.rtoggle:hover{color:#fff;background:rgb(255 255 255/.1)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rtoggle{
  width:26px;opacity:1;transition:width var(--rail-in) var(--rail-ease),opacity .2s var(--rail-ease) 120ms}
.rail-open .rtoggle{color:#fff;background:rgb(255 255 255/.13)}

/* 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;font-family:var(--display);opacity:.62;padding-left:0}
.rbox:hover{opacity:.85}
.rbox.active{opacity:1;box-shadow:0 0 0 2px var(--rail),0 0 0 4px rgb(255 255 255/.35)}
.rbox .tint{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:10px;
  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:-3px;right:-4px;min-width:16px;height:16px;border-radius:8px;
  background:var(--reply);color:#fff;font-size:.58rem;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--rail);font-family:var(--font);padding:0 3px;
  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(--rail);
  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:rgb(255 255 255/.72);font-family:var(--font);font-weight:500;font-size:.86rem;
  padding-left:34.6px;padding-right:.5rem}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox:hover{background:rgb(255 255 255/.08)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox.active{
  background:rgb(255 255 255/.13);color:#fff;box-shadow:none}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .tint{
  left:12.5px;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:9px;right:8px;border-color:transparent;transition-duration:var(--rail-in)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .flag{
  bottom:12.5px;right:8px;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:32px}

.rsep{width:22px;height:1px;background:rgb(255 255 255/.14);margin:.6rem 0;flex-shrink:0;
  transition:width var(--rail-out) var(--rail-ease)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rsep{width:100%;transition-duration:var(--rail-in)}

.rico{color:rgb(255 255 255/.5);padding-left:8.5px}
.rico:hover{color:#fff;background:rgb(255 255 255/.08)}
.rico.active{background:rgb(255 255 255/.13);color:#fff}
.rico svg{width:17px;height:17px;flex-shrink:0}
.rico .q{width:17px;text-align:center;flex-shrink:0}
.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)}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rico{color:rgb(255 255 255/.62);padding-left:.5rem;padding-right:.5rem}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rico.active{color:#fff}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rico .flag{
  top:13.5px;right:8px;transition-duration:var(--rail-in)}

/* The rail is dark in both themes, so anything in it needs its own colour —
   inheriting `--ink` puts near-black text on near-black in light mode. */
.rme{color:rgb(255 255 255/.72);cursor:default;padding-left:3px}
:is(.rail:hover,.rail:focus-within,.rail-open .rail) .rme{padding-left:2.5px;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, and darkening alone says nothing on an already-dark page. */
.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:.34;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}
}
.avatar{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0;background:var(--accent);font-family:var(--display)}
.avatar.sm{width:28px;height:28px;font-size:.72rem}
.avatar.xs{width:22px;height:22px;font-size:.6rem}
.stack{display:flex;align-items:center}
.stack .avatar{border:2px solid var(--paper);margin-left:-7px}
.stack .avatar:first-child{margin-left:0}
.scrim{display:none}
/* The rail is out of flow, so main is the grid's only in-flow child and would
   otherwise land in the column the rail's width reserves. */
main{grid-column:2;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto}
main.single{overflow:auto}

/* status: a dot and a word, never a filled pill */
.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 ---------- */
.page{padding:2rem 2.6rem 2.6rem;max-width:1120px;width:100%}
.page.narrow{max-width:760px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.4rem}
.page-head h1{font-size:2.15rem;letter-spacing:-.028em}
.crumb{display:inline-flex;align-items:center;gap:.3rem;text-decoration:none;font-size:.88rem;margin-bottom:.9rem;color:var(--ink-2)}
.crumb:hover{color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.45rem;margin-bottom:1.1rem;box-shadow:var(--shadow-1)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.9rem}
.card-head p{margin-top:.15rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.card.link{cursor:pointer;transition:border-color .12s,transform .12s}.card.link:hover{border-color:var(--accent);transform:translateY(-1px)}
.danger-zone{border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:.9rem;padding:.8rem 0;border-top:1px solid var(--line)}
.rows li:first-child{border-top:0;padding-top:0}.rows li:last-child{padding-bottom:0}
.rows .grow{flex:1;min-width:0}
.rows .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .meta{color:var(--ink-3);font-size:.83rem;margin-top:.1rem}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.6rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
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:.8rem}
td:first-child code,td.nowrap code{white-space:nowrap;word-break:normal}
.copy{font-size:.72rem;padding:.12rem .4rem;margin-left:.35rem;vertical-align:middle;border-color:transparent;background:var(--surface-3)}
.rec-status{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;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)}
.progress{height:6px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin:1rem 0 1.4rem}
.progress span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease}
.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem;counter-reset:s}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem 1rem 3.4rem;position:relative;box-shadow:var(--shadow-1)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:1.05rem;top:1rem;width:1.65rem;height:1.65rem;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:var(--display);font-weight:700;font-size:.85rem}
.steps li.done::before{content:"✓";background:var(--live-soft);color:var(--live)}
.steps li.done h3{color:var(--ink-2)}
.steps h3{margin-bottom:.2rem}
.steps form{display:flex;gap:.6rem;align-items:flex-end;margin-top:.8rem;flex-wrap:wrap}
.steps form .field{flex:1;min-width:200px}
.scopes{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.scopes code{font-size:.72rem}

/* ---------- conversations: one full-width column ---------- */
.inbox-head{padding:1.5rem 2.4rem .9rem;display:flex;align-items:flex-start;gap:1.2rem}
.inbox-head h1{font-size:2.15rem;letter-spacing:-.028em}
.inbox-head .who{font-size:.86rem;color:var(--ink-3);margin-top:.45rem;display:flex;gap:.5rem;align-items:center}
.inbox-head .acts{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.find{display:flex;align-items:center;gap:.5rem;height:36px;padding:0 .8rem;border-radius:var(--r);border:1px solid var(--line-2);color:var(--ink-3);font-size:.875rem;width:240px;background:transparent}
.find input{border:0;background:transparent;padding:0;height:auto;font-size:.875rem;width:100%}
.find input:focus{outline:none}
.tabs{display:flex;align-items:center;gap:.2rem;padding:0 2.4rem;border-bottom:1px solid var(--line);flex-shrink:0}
.tab{padding:.55rem .8rem;font:inherit;font-size:.875rem;font-weight:600;color:var(--ink-3);border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;cursor:pointer;display:flex;gap:.45rem;align-items:center}
.tab:hover{color:var(--ink-2)}
.tab.active{color:var(--ink);border-bottom-color:var(--ink)}
.tab b{font-weight:600;color:var(--ink-3);font-size:.8rem}
.tab.active b{color:var(--reply)}
.tabs .right{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.convs{flex:1;overflow:auto}
.conv{display:grid;grid-template-columns:14px 46px 1fr auto;align-items:center;gap:.95rem;padding:.95rem 2.4rem;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit}
.conv:hover{background:var(--surface)}
.conv.unread{background:var(--surface)}
.conv.focused{box-shadow:inset 3px 0 0 var(--accent)}
.conv .dot{width:7px;height:7px;border-radius:50%}
.conv>span{min-width:0}
.conv .l1{display:flex;align-items:baseline;gap:.5rem;min-width:0}
.conv .names{font-weight:700;font-size:.96rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.conv .cnt{font-size:.75rem;color:var(--ink-3);font-weight:600}
.conv .l2{display:block;margin-top:.18rem;font-size:.93rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .l2 b{font-weight:600;color:var(--ink)}
.conv .l2 .sn{color:var(--ink-3)}
.conv .meta{display:flex;align-items:center;gap:1.15rem;justify-content:flex-end}
.conv .meta .time{font-size:.8rem;color:var(--ink-3);width:70px;text-align:right;font-variant-numeric:tabular-nums}
.conv .asg{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ink-2);width:104px}
.tagd{font-size:.72rem;font-family:var(--mono);color:var(--ink-3);background:var(--surface-2);border-radius:4px;padding:.1rem .35rem}

/* ---------- conversation view: an editorial measure, not a pane ---------- */
.cbar{display:flex;align-items:center;gap:.8rem;padding:.85rem 2rem;border-bottom:1px solid var(--line);flex-shrink:0}
.cbar .back{display:flex;align-items:center;gap:.4rem;color:var(--ink-2);font-size:.875rem;font-weight:500;text-decoration:none;background:transparent;border:0;font-family:inherit;cursor:pointer}
.cbar .back:hover{color:var(--ink)}
.cbar .right{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.ctl{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line-2);border-radius:var(--r);padding:.32rem .6rem .32rem .45rem;font-size:.82rem;font-weight:600;background:transparent;color:var(--ink);cursor:pointer;font-family:inherit}
.ctl:hover{border-color:var(--ink-3)}
.reading{flex:1;overflow:auto;padding:2rem 2rem 0;display:flex;justify-content:center}
.reading .col{width:780px;max-width:100%}
.ctitle{font-size:2rem;letter-spacing:-.028em}
.csub{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;color:var(--ink-3);font-size:.85rem}
.tmsg{padding:1.5rem 0;border-top:1px solid var(--line)}
.tmsg:first-of-type{border-top:0}
.tmsg-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;cursor:pointer}
.tmsg-head .nm{font-weight:700;font-size:.95rem}
.tmsg-head .sub{font-size:.8rem;color:var(--ink-3)}
.tmsg-head .rt{margin-left:auto;display:flex;align-items:center;gap:.7rem}
.tmsg.collapsed .tmsg-body,.tmsg.collapsed .authline,.tmsg.collapsed .deliv{display:none}
.tmsg-body{font-size:1rem;line-height:1.72;color:var(--ink-2);max-width:66ch}
.tmsg-body p+p{margin-top:.85rem}
.tmsg-body iframe{width:100%;border:0;display:block}
.tmsg-body .plain{white-space:pre-wrap;overflow-wrap:anywhere}
.authline{display:flex;gap:1.1rem;font-size:.78rem;color:var(--ink-3);margin-top:.9rem;flex-wrap:wrap}
.authline b{color:var(--done);font-weight:600}
.authline b.bad{color:var(--fail)}
.deliv{margin-top:1.1rem;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.deliv .dh{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;background:var(--surface-2)}
.dr{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;padding:.55rem .9rem;font-size:.84rem;border-top:1px solid var(--line);background:var(--surface)}
.dr .a{font-family:var(--mono);font-size:.8rem;overflow-wrap:anywhere}
.dr .m{font-size:.76rem;color:var(--ink-3)}
.att{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:.3rem .55rem;font-size:.8rem;text-decoration:none;color:var(--ink);margin-right:.4rem}
.replybox{border-top:1px solid var(--line);background:var(--surface);padding:1rem 2rem;display:flex;align-items:center;gap:.8rem;flex-shrink:0}
.replybox .f{flex:1}
.replybox textarea{min-height:42px;height:42px;padding:.6rem .85rem;resize:none}

.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:14px 46px 1fr;gap:.95rem;padding:.95rem 2.4rem;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:34px;height:34px;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:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.8rem}
.fig{background:var(--surface);padding:1.1rem 1.3rem}
.fig b{display:block;font-family:var(--display);font-size:2rem;letter-spacing:-.03em;line-height:1}
.fig .k{font-size:.82rem;color:var(--ink-3);margin-top:.45rem}
.fig .st{margin-top:.5rem;font-size:.76rem}
.sect{margin-bottom:1.8rem}
.sect>h2{font-size:1.05rem;margin-bottom:.2rem}
.sect>.sd{font-size:.84rem;color:var(--ink-3);margin-bottom:.9rem}
.line{display:grid;align-items:center;gap:1rem;padding:.8rem .2rem;border-top:1px solid var(--line)}
.line .nm{font-weight:600;font-size:.92rem}
.line .sub{font-size:.8rem;color:var(--ink-3);margin-top:.12rem}

/* ---------- dialogs / toasts ---------- */
dialog{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);width:min(560px,94vw);padding:0;box-shadow:var(--shadow-2)}
dialog.wide{width:min(760px,94vw)}
dialog::backdrop{background:rgb(10 14 20/.5);backdrop-filter:blur(2px)}
dialog form{padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.95rem}
dialog h3{font-size:1.2rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.3rem}
.filters select{width:auto;min-width:9.5rem;font-size:.88rem}
dialog .row{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.3rem}
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{background:var(--ink);color:var(--paper);padding:.65rem .95rem;border-radius:var(--r);font-size:.9rem;box-shadow:var(--shadow-2);max-width:380px;display:flex;align-items:center;gap:.5rem;animation:toast .25s ease-out}
.toast.err{background:var(--danger);color:#fff}.toast.ok{background:var(--live);color:#fff}
@keyframes toast{from{transform:translateY(8px);opacity:0}}

/* ---------- compose dock ---------- */
#compose-dock{position:fixed;inset:auto 0 0 0;z-index:45;display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-end;gap:1rem;padding:1.5rem 1.5rem 0;overflow:hidden;pointer-events:none}
#compose-dock>*{pointer-events:auto}
.compose{width:min(544px,calc(100vw - 3rem));min-width:min(360px,calc(100vw - 3rem));height:min(544px,calc(100vh - 3rem));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0;box-shadow:var(--shadow-2);overflow:hidden;animation:compose-up .16s ease-out}
@keyframes compose-up{from{transform:translateY(14px);opacity:0}}
.compose.min{width:min(300px,calc(100vw - 3rem));min-width:0;height:auto}
.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(--compose-head);color:#f2f5f9;padding:.4rem .45rem .4rem .9rem;cursor:pointer;user-select:none}
.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:rgb(255 255 255/.16)}
.ch-btn:focus-visible{outline:2px solid #fff;outline-offset:-1px}
.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,.compose textarea{border:0;border-radius:0;background:none;padding:.6rem 0}
.compose-row input:hover,.compose-row select:hover,.compose textarea:hover{border-color:transparent}
.compose-row input:focus-visible,.compose-row select:focus-visible,.compose textarea: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 textarea{flex:1;min-height:0;resize:none;padding:.9rem .95rem}
.compose .compose-error{padding:0 .95rem .5rem;min-height:0}
.compose .compose-error:empty{display:none}

.compose-atts{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem .95rem 0}
.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;align-items:center;gap:.35rem;padding:.7rem .95rem;border-top:1px solid var(--line)}
.compose-foot .send{border-radius:999px;padding:.55rem 1.5rem;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}

/* ---------- responsive ---------- */
@media(max-width:900px){
  /* The avatar stack and the owner are the first things to go: on a phone the
     row has to stay two lines, so only who/what and when survive. */
  .conv{grid-template-columns:14px minmax(0,1fr) auto;gap:.7rem;padding:.85rem 1.1rem;align-items:start}
  .conv .stack{display:none}
  .conv .dot{margin-top:.42rem}
  .conv .meta{flex-direction:column;align-items:flex-end;gap:.3rem}
  .conv .asg{display:none}
  .conv .st{font-size:.74rem}
  .tabs .tab{white-space:nowrap}
  .inbox-head{padding:1.1rem 1.1rem .7rem;flex-wrap:wrap}
  .inbox-head h1{font-size:1.6rem}
  .inbox-head .acts{width:100%;margin-left:0}
  .find{width:100%}
  .tabs{padding:0 1.1rem;overflow-x:auto}
  .reading{padding:1.1rem 1.1rem 0}
  .cbar,.replybox{padding-left:1.1rem;padding-right:1.1rem}
  .page{padding:1.2rem 1.1rem 2rem}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #compose-dock{padding:0}
  .compose{width:100%!important;border-radius:0}
}
@media(max-width:620px){
  /* No hover on a phone, and 236px would leave nothing for the mail: the rail
     stays icons whatever was pinned on a desktop, and nothing in it animates.
     These selectors deliberately mirror the open state's `:is(...)` prefix —
     a plain `.rail x` would lose to it on specificity and the rail would open
     itself on the first tap. */
  .app,.app.rail-open{grid-template-columns:52px 1fr}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail){
    width:52px;align-items:center;padding:.8rem 0;box-shadow:none;transition:none}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) :is(.rbox,.rico,.rme){
    width:34px;padding:0;transition:none}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) :is(.rlabel,.rword){display:none;opacity:0}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rtoggle{display:none}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rhead{padding-left:11px;transition:none}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rsep{width:22px;margin:.6rem 0;transition:none}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rbox{opacity:.62;font-size:.72rem;font-family:var(--display);font-weight:700;color:#fff}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rbox.active{opacity:1}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .tint{
    left:0;top:0;width:34px;height:34px;border-radius:10px;transition:none}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .initial{opacity:1}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .badge{
    top:-3px;right:-4px;border-color:var(--rail);transition:none}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rbox .flag{
    bottom:-2px;right:-2px;border-color:var(--rail);transition:none}
  :is(.rail,.rail:hover,.rail:focus-within,.rail-open .rail) .rico .flag{top:5px;right:5px;transition:none}
  .rail-scrim{display:none}
  .conv .meta .time{width:auto}
  /* Four controls will not fit beside the back link, so they take their own
     row rather than running off the edge. */
  .cbar{flex-wrap:wrap;gap:.5rem .8rem}
  .cbar .right{margin-left:0;width:100%;flex-wrap:wrap}
  .cbar .right .btn{flex-shrink:0}
  .replybox{padding:.8rem 1.1rem;gap:.55rem}
  .replybox .avatar{display:none}
  .reading .col{width:100%}
}