/* team-pulse review UI.
 *
 * Direction: the tool was born as a cron job and its output is a letter to an
 * executive. So the type carries that split — MONO is the machine's voice
 * (labels, status, metadata, team keys, the literal prompt text) and SANS is
 * the human's voice (the report body, help text, everything a person wrote or
 * is about to sign). You can tell at a glance which is which.
 *
 * One accent (teal), one alarm (clay), two surface levels. The pulse mark is
 * the only flourish, and it earns its place by animating exactly when the
 * pipeline is actually working.
 */

:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#EFF2F6; --surface-3:#E6EBF0;
  --ink:#10151B; --ink-2:#39424F; --muted:#5C6675; --faint:#8792A2;
  --line:#E2E7ED; --line-strong:#CBD3DC;
  --accent:#0B7C6B; --accent-strong:#075E51; --accent-soft:#E2F0ED;
  --clay:#A8442A; --clay-soft:#F7E9E4;
  --shadow-sm:0 1px 2px rgba(16,21,27,.05);
  --shadow:0 1px 2px rgba(16,21,27,.04), 0 10px 26px rgba(16,21,27,.06);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:10px; --r-lg:14px;
  --measure:68ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1116; --surface:#141A21; --surface-2:#1A222B; --surface-3:#222C37;
    --ink:#E9EDF2; --ink-2:#C2CBD6; --muted:#98A3B2; --faint:#6B7684;
    --line:#222B35; --line-strong:#323D4A;
    --accent:#2DB5A0; --accent-strong:#5AD1BD; --accent-soft:#0F2F29;
    --clay:#DE7A5E; --clay-soft:#2A1913;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.34);
  }
}
:root[data-theme="dark"]{
  --bg:#0D1116; --surface:#141A21; --surface-2:#1A222B; --surface-3:#222C37;
  --ink:#E9EDF2; --ink-2:#C2CBD6; --muted:#98A3B2; --faint:#6B7684;
  --line:#222B35; --line-strong:#323D4A;
  --accent:#2DB5A0; --accent-strong:#5AD1BD; --accent-soft:#0F2F29;
  --clay:#DE7A5E; --clay-soft:#2A1913;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
/* class-based display rules out-specify the UA [hidden] rule; hidden must win */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-strong); text-underline-offset:3px; text-decoration-thickness:1px}
p{margin:.55em 0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:var(--accent-soft); color:var(--accent-strong)}

h1,h2,h3{margin:0; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:1.62rem; font-weight:680; line-height:1.15}
h2{font-size:1.06rem; font-weight:660}
h3{font-size:.96rem; font-weight:640}

.wrap{max-width:1000px; margin:0 auto; padding:0 22px}
.page{padding:30px 22px 72px}
.muted{color:var(--muted)}
.scroll-x{overflow-x:auto}
code{font-family:var(--mono); font-size:.86em; background:var(--surface-2);
  border:1px solid var(--line); border-radius:5px; padding:.08em .34em}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* The machine's voice: every label, key and status in the app. */
.eyebrow{
  font-family:var(--mono); font-size:.655rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint); margin:0 0 7px;
}

/* ============================================ masthead */
.site-head{background:var(--surface); border-bottom:1px solid var(--line)}
.site-head__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px 14px; padding-top:13px; padding-bottom:13px; flex-wrap:wrap; min-width:0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand__mark{display:block; width:26px; height:12px; color:var(--accent); flex:none}
.brand__mark svg{display:block; width:100%; height:100%}
.brand__mark path{fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.brand__name{font-family:var(--mono); font-weight:600; font-size:.94rem; letter-spacing:-.02em}
.brand__tag{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.whoami{display:flex; align-items:center; gap:8px; min-width:0}
.whoami__label{margin:0}
.whoami__user{font-family:var(--mono); font-size:.76rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}

.site-foot{
  border-top:1px solid var(--line); margin-top:12px;
  padding-top:20px; padding-bottom:44px; color:var(--faint); font-size:.83rem;
}
.site-foot p{max-width:var(--measure); margin:0}

.crumb{font-family:var(--mono); font-size:.72rem; color:var(--faint); margin:0 0 16px}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--accent-strong)}

/* ============================================ page head */
.page-head{margin:0 0 24px; max-width:var(--measure)}
.page-head h1 + .lede{margin-top:9px}
.lede{color:var(--muted); font-size:1rem; max-width:62ch; margin:0}
.lede--sub{margin-top:10px; font-size:.92rem}
.page-head--run{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; max-width:none;
}

/* ============================================ cards */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 24px; margin:0 0 16px; box-shadow:var(--shadow-sm);
}
.card__head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.card__head .eyebrow{width:100%; margin-bottom:2px}
.card__intro{margin:0 0 16px; font-size:.9rem; max-width:60ch}
.empty{text-align:center; padding:44px 24px}
.empty__title{font-weight:660; margin:0 0 4px}

/* ============================================ pills + badges */
.pill{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
  font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; font-weight:500;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line-strong);
  color:var(--muted); background:var(--surface-2); white-space:nowrap;
}
.pill--lg{font-size:.7rem; padding:5px 13px}
.pill--accent,.pill--ready{color:var(--accent-strong); border-color:var(--accent); background:var(--accent-soft)}
.pill--sent{color:#fff; border-color:var(--accent); background:var(--accent)}
.pill--failed{color:var(--clay); border-color:var(--clay); background:var(--clay-soft)}
.pill--queued,.pill--running,.pill--sending{color:var(--muted)}
.pill--queued::before,.pill--running::before,.pill--sending::before{
  content:""; width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.pill--muted{color:var(--faint)}
.badges{display:flex; gap:5px; flex-wrap:wrap}
.badge{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:2px 7px;
}
.badge--quiet{margin-left:8px; color:var(--faint); background:transparent}

/* ============================================ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:.87rem; font-weight:600; line-height:1.2;
  padding:9px 15px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); cursor:pointer; text-decoration:none;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.btn:hover{border-color:var(--accent); color:var(--accent-strong)}
.btn--primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-strong); border-color:var(--accent-strong); color:#fff}
.btn--ghost{background:transparent; color:var(--muted)}
.btn--ghost:hover{color:var(--accent-strong)}
.btn--send{
  background:var(--accent); border-color:var(--accent); color:#fff;
  font-size:.95rem; padding:12px 22px; box-shadow:var(--shadow-sm);
}
.btn--send:hover{background:var(--accent-strong); border-color:var(--accent-strong); color:#fff}
/* Destructive, but not loud: it reads as chrome until you reach for it, then
   commits to clay -- the same colour a failed run and an error panel use.
   Accent stays the send's alone. */
.btn--danger{background:transparent; color:var(--muted)}
.btn--danger:hover{background:var(--clay-soft); border-color:var(--clay); color:var(--clay)}
.btn[disabled]{opacity:.5; cursor:not-allowed; border-color:var(--line-strong); color:var(--muted)}
.form-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px}
.form-foot .muted{font-size:.84rem}
.form-foot--reset{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.inline-form{display:inline-flex; margin:0}

/* ============================================ index: team rows
   Two teams in a card grid reads as three-quarters empty page. A row list
   stays dense at 2 and still works at 20. */
.teams{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.team-row{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:18px 22px;
  display:grid; gap:6px 24px; align-items:center;
  /* EVERY track is fixed except the owner column. One auto track anywhere makes
     each row size its own columns and the labels stop lining up down the list —
     which is the entire reason to use rows instead of cards. */
  grid-template-columns:170px minmax(0,1fr) 210px 232px;
}
.team-row--owned{border-left:3px solid var(--accent); padding-left:19px}
.team-row__id{display:flex; flex-direction:column; gap:7px; align-items:flex-start; min-width:0}
.team-row__title{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.team-row__name{font-family:var(--mono); font-size:1.1rem; font-weight:600; letter-spacing:-.01em}
.team-row__name a{color:var(--ink); text-decoration:none}
.team-row__name a:hover{color:var(--accent-strong)}

.meta{margin:0; display:flex; flex-direction:column; gap:2px; min-width:0}
.meta dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}
.meta dd{margin:0; font-size:.85rem; color:var(--ink-2); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.team-row__act{display:flex; align-items:center; gap:8px; justify-self:end}
.lastrun{display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:inherit}
.lastrun:hover .lastrun__win{color:var(--accent-strong)}
.lastrun__win{color:var(--muted)}

@media (max-width:820px){
  .team-row{grid-template-columns:1fr; gap:14px; align-items:start}
  .meta dd{white-space:normal; overflow-wrap:anywhere}
  .team-row__act{justify-self:start}
}

/* ============================================ team tabs */
.tabs{display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid var(--line)}
.tab{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:9px 14px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{color:var(--ink)}
.tab--on{color:var(--accent-strong); border-bottom-color:var(--accent)}

/* a field whose control sits beside a small action (e.g. Clear) */
.input-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
/* a field revealed by the option above it — indented so the link is obvious */
.field--tucked{margin:14px 0 0; padding-left:14px; border-left:2px solid var(--accent-soft)}
.field--tucked input[type=date]{max-width:190px}

/* the document link — an input whose entire job is receiving one pasted URL.
   Bounded rather than full-bleed: a Drive link is ~70 characters, and a field
   that spans the card promises a canvas it does not need. The mark says "a URL
   goes here" so the hint below never has to. */
.linkfield{position:relative; max-width:34rem}
.linkfield input[type=url]{padding-left:34px; text-overflow:ellipsis}
.linkfield__mark{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; pointer-events:none; color:var(--faint);
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:color .15s ease;
}
.linkfield:focus-within .linkfield__mark{color:var(--accent)}
.linkfield input[type=url]::placeholder{color:var(--faint)}

/* the previous document, offered under the field. Quiet on purpose: taking it up
   should be one easy click, but never the thing your eye lands on first — the
   normal case is pasting this week's link. */
.reuse{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:7px 0 0; font-size:.82rem}
.reuse__act{color:var(--accent-strong); text-decoration:none;
  border-bottom:1px solid var(--accent-soft)}
.reuse__act:hover{border-bottom-color:var(--accent)}
.reuse__when{color:var(--faint)}
.daterange{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.daterange__part{display:flex; flex-direction:column; gap:5px; min-width:0}
.daterange__part label{font-weight:620; font-size:.85rem}
.daterange__sep{color:var(--faint); padding-bottom:10px}
.btn--sm{font-size:.78rem; padding:6px 11px}

/* ============================================ forms */
.settings-form fieldset{border:0; margin:0; padding:0; min-width:0}
.settings-form fieldset[disabled]{opacity:.6}
.field{margin:0 0 20px; display:flex; flex-direction:column; gap:6px; min-width:0}
.field > label{font-weight:620; font-size:.9rem; color:var(--ink)}
input[type=text],input[type=url],input[type=email],input[type=number],select,textarea{
  font:inherit; font-size:.9rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:8px; padding:9px 11px;
  width:100%; max-width:100%; min-width:0;
}
input[type=text]:focus,input[type=url]:focus,input[type=email]:focus,
input[type=number]:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
textarea{font-family:var(--mono); font-size:.82rem; line-height:1.6; resize:vertical}
input[type=number]{max-width:140px}
select{max-width:300px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px}
.hint{margin:0; font-size:.84rem; color:var(--muted); max-width:56ch; line-height:1.5}
.deflt{margin:0; font-family:var(--mono); font-size:.7rem; color:var(--faint)}
.counter{font-variant-numeric:tabular-nums}

.checkset{border:0; margin:0; padding:0; min-width:0}
.checkset legend{font-weight:620; font-size:.9rem; padding:0; margin-bottom:6px; color:var(--ink)}
.checkset .hint{margin-bottom:9px}
.checkset .deflt{margin-top:9px}
.check{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:999px; padding:7px 14px;
  font-size:.86rem; background:var(--surface); margin:0 6px 6px 0;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.check:hover{border-color:var(--accent)}
.check:has(input:checked){
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); font-weight:600;
}
.check input{margin:0; accent-color:var(--accent); flex:none}
/* full-width checkbox rows (include_overall etc.) read as statements, not chips */
.field > .check{border-radius:8px; width:100%; margin:0}
.run-form .checkset{display:flex; flex-wrap:wrap; align-items:center}

/* ============================================ panels + previews */
.panel{border:1px solid var(--line); border-left:3px solid var(--line-strong);
  border-radius:var(--r); padding:14px 18px; margin:0 0 18px; background:var(--surface-2)}
.panel--error{border-color:var(--clay); border-left-color:var(--clay); background:var(--clay-soft)}
.panel__title{margin:0 0 6px; font-weight:660; color:var(--clay)}
.panel ul{margin:0; padding-left:1.15em; font-size:.87rem}
.panel li{margin:.25em 0}

.preview-block{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.preview{
  font-family:var(--mono); font-size:.76rem; line-height:1.65; white-space:pre-wrap;
  overflow-wrap:anywhere; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 16px; margin:0; color:var(--ink-2); overflow-x:auto;
}
.preview--error{color:var(--clay); background:var(--clay-soft); border-color:var(--clay)}

/* ============================================ the working state
   The pulse is the product's name made literal — it draws only while the
   pipeline is genuinely working. */
.working__bar{margin:14px 0 12px; color:var(--accent)}
.working__bar svg{display:block; width:100%; height:34px}
.working__bar path{
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1600; stroke-dashoffset:1600; animation:trace 2.4s ease-in-out infinite;
}
@keyframes trace{
  0%{stroke-dashoffset:1600} 55%{stroke-dashoffset:0} 100%{stroke-dashoffset:-1600}
}
@media (prefers-reduced-motion:reduce){
  .working__bar path{animation:none; stroke-dashoffset:0}
  .pill--queued::before,.pill--running::before,.pill--sending::before{animation:none}
}
.working__status{font-weight:620; margin:0 0 6px}
.working .muted{font-size:.88rem; max-width:58ch}

/* ============================================ the draft — the hero screen */
.review-note{border-left:3px solid var(--accent); background:var(--accent-soft); border-color:var(--accent)}
.review-note__line{margin:0 0 4px; color:var(--accent-strong); font-weight:620; font-size:.96rem}

/* The run page is a document, not a dashboard: hold the whole column to a
   letter's width so the draft never floats in a field of dead white. */
.page-head--run,.review-note,.mail,.send-card,.sent-note,.closing,
.working,.card.mail + .card{max-width:860px}

.mail{padding:0; overflow:hidden}
.mail__head{background:var(--surface-2); border-bottom:1px solid var(--line); padding:16px 26px}
.mail__meta{margin:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:3px 16px}
.mail__meta dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); padding-top:3px;
}
.mail__meta dd{margin:0; min-width:0; overflow-wrap:anywhere}
.mail__to{font-family:var(--mono); font-size:.84rem; color:var(--accent-strong); font-weight:600}
.mail__subject{font-weight:620; font-size:.96rem}
.mail__edited{margin:14px 26px -6px; color:var(--accent-strong)}

/* The one place the reader is the exec: give it a document's measure. */
.report{padding:26px; font-size:.95rem; line-height:1.65; max-width:var(--measure)}
.report > :first-child{margin-top:0}
.report > :last-child{margin-bottom:0}
.report h1,.report h2,.report h3{margin:1.5em 0 .45em; font-size:1rem; font-weight:660}
.report p{margin:.7em 0}
.report ul{padding-left:1.15em; margin:.5em 0}
.report li{margin:.32em 0}
.report a{color:var(--accent-strong)}
.report strong{font-weight:660}

.mail__tools{padding:0 26px 20px}
.edit-panel{padding:0 26px 24px; display:none}
.edit-panel.is-open{display:block}
.edit-panel textarea{font-size:.8rem}

.send-card{border-color:var(--accent); box-shadow:var(--shadow)}
.send-form{margin:0}
.send-form .muted{font-size:.85rem; margin:10px 0 0; max-width:52ch}
.sent-note{border-left:3px solid var(--accent)}
.sent-note__line{margin:0 0 4px; font-size:1rem}
/* Under the send card, behind a rule of its own: reaching the delete means
   passing the send button rather than sitting beside it. */
.danger-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:760px; margin-top:24px; padding-top:16px;
  border-top:1px solid var(--line);
}
.danger-foot .muted{font-size:.84rem}

.closing{font-size:.84rem; margin-top:16px; font-family:var(--mono)}

/* ============================================ history table */
.runs{margin-top:24px; padding-top:20px; border-top:1px solid var(--line)}
.pager{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.pager__at{font-family:var(--mono); font-size:.72rem; color:var(--faint)}
/* a disabled fieldset must not look like an enabled one */
.stack{border:0; margin:0; padding:0; min-width:0}
.stack[disabled]{opacity:.5}
.panel-card{border-left:3px solid var(--line-strong); background:var(--surface-2)}
.table{border-collapse:collapse; width:100%; font-size:.85rem; min-width:460px}
.table th,.table td{text-align:left; padding:9px 14px; border-bottom:1px solid var(--line)}
.table th:first-child,.table td:first-child{padding-left:0}
.table th:last-child,.table td:last-child{padding-right:0}
.table thead th{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); font-weight:500;
}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--surface-2)}
.rowlink{cursor:pointer}
.rowlink__a{color:var(--ink); text-decoration:none; font-weight:600}
.rowlink:hover .rowlink__a{color:var(--accent-strong)}
/* the anchor is the row's focus target, so make the ring frame the whole row */
.rowlink__a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.table time{font-family:var(--mono); font-size:.78rem; color:var(--muted)}

/* ============================================ sign-in page
   Its own centred layout — no nav, nothing to do but sign in. */
.signin-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  padding:24px; background:var(--bg);
}
.signin{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:40px 36px; max-width:420px; width:100%;
  text-align:center;
}
.signin__mark{width:46px; height:22px; margin:0 auto 20px; color:var(--accent)}
.signin__mark svg{display:block; width:100%; height:100%}
.signin__mark path{fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.signin .eyebrow{margin-bottom:8px}
.signin h1{font-size:1.5rem; margin-bottom:10px}
.signin__lede{color:var(--muted); font-size:.94rem; margin:0 auto; max-width:34ch}
.signin__form{margin:26px 0 0}
.btn--signin{width:100%; padding:12px 18px; font-size:.95rem}
.signin__note{
  margin:18px 0 0; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--faint);
}
.signin__note strong{color:var(--muted); font-weight:600}

/* ============================================ confirm dialog
   Replaces window.confirm(), which is styled by the browser and titled with the
   origin — it announces "127.0.0.1:8000" where the user needs to read the
   action they are about to take. */
.modal{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:0;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
  max-width:440px; width:calc(100% - 32px);
}
.modal::backdrop{background:rgba(16,21,27,.45)}
:root[data-theme="dark"] .modal::backdrop{background:rgba(0,0,0,.6)}
.modal__inner{padding:24px}
.modal__title{font-size:1.06rem; font-weight:660; margin:0 0 8px}
.modal__body{margin:0; color:var(--muted); font-size:.92rem; line-height:1.55}
.modal__foot{display:flex; justify-content:flex-end; gap:9px; margin-top:22px}

@media (max-width:560px){
  body{font-size:15px}
  .page{padding-left:15px; padding-right:15px}
  .wrap{padding:0 15px}
  h1{font-size:1.36rem}
  .card{padding:18px 17px}
  .team-row{padding:16px 17px}
  .team-row--owned{padding-left:14px}
  .mail__head,.report,.mail__tools,.edit-panel{padding-left:17px; padding-right:17px}
  .mail__edited{margin-left:17px; margin-right:17px}
  .brand__tag{display:none}
}