/* MarketSeer theme: teal #33A0AB, teal ink #1A6B75, navy #1A2940, from the marketseer.ai concept. */
/* Wolven Aurora LIGHT. Colors are the deck's own (slide 2, DESIGN SYSTEM /
   Color) and the grounds are taken verbatim from p3_frame.py. Nothing here is
   invented: if a new color is needed it comes from the deck, not from taste. */
:root{
  /* chrome ramp */
  --ink:#102A3A; --night:#1A2940; --slate-dp:#22384A; --slate:#2A4256;
  --steel:#5A6675; --gray:#8A95A3; --silver:#B8C4D1; --mist:#C9D2DC;
  --fog:#E5E7EB; --paper:#F4F7F9; --white:#FFFFFF;

  /* accent ramp, light mode */
  --accent:#1A6B75; --accent-mid:#33A0AB; --accent-live:#1A6B75;

  /* status ramp, reserved */
  --good:#2A7454; --watch:#8A5E12; --risk:#A94D1B; --critical:#A32F2F;

  /* semantic surfaces. surface-0 is WHITE on purpose. */
  --surface-0:#FFFFFF;
  --surface-1:linear-gradient(180deg,#FFFFFF 0%,#EEF4F6 100%);
  --surface-2:#F7F9FB;
  --line:#E5E7EB;
  --line-strong:#C9D2DC;
  --text:#102A3A;
  --text-2:#2A4256;
  --text-3:#5A6675;

  --sans:"Open Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --head:"Montserrat","Open Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  /* THE DARK BAND. One surface, used in nine places, for one thing: the
     console speaking about the whole of something rather than one of its
     rows. It was nine copies with two different first stops and three
     spellings of the shadow, which is how a surface drifts. */
  --band:linear-gradient(135deg,#102A3A 0%,#1D4A5A 62%,#1A6B75 100%);
  --band-lift:0 2px 4px rgba(15,18,20,.10), 0 18px 40px -22px rgba(26,107,117,.55);
  --band-kick:#7FD3DB;

  --shadow-s:0 1px 2px rgba(15,18,20,.05);
  --shadow-m:0 1px 2px rgba(15,18,20,.04), 0 6px 16px -6px rgba(15,18,20,.10);
  --shadow-l:0 2px 4px rgba(15,18,20,.05), 0 18px 40px -14px rgba(15,18,20,.18);
}
*{box-sizing:border-box}
/* Author rules beat the UA sheet, so any element given a display value here
   would ignore the hidden attribute. .login sets display:grid, which kept the
   sign-in card painted on top of the app after a successful login. */
[hidden]{display:none !important}
html{background:#E6EFF1}
body{
  margin:0;padding:0;min-height:100vh;
  background:linear-gradient(198deg,#FFFFFF 0%,#F2F5F5 46%,#E6EFF1 100%) fixed;
  color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
h2{font-size:22px;margin-bottom:18px}
h3{font-size:14px;margin-bottom:10px}
code{font-family:var(--mono);font-size:.92em;color:var(--accent-live)}
a{color:var(--accent-live)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginbox{width:100%;max-width:370px;background:var(--surface-1);
  border:1px solid var(--line);box-shadow:var(--shadow-l);border-radius:6px;
  padding:34px;display:flex;flex-direction:column;gap:14px}
.loginbox .logo{display:block;width:104px;height:auto;margin:0 auto 4px}
.loginbox h1{font-size:17px;font-weight:600;color:var(--ink);text-align:center;
  letter-spacing:-.01em;margin-bottom:10px}
.loginbox h1::after{content:"";display:block;width:38px;height:2px;background:var(--accent);
  margin:12px auto 0}
.brand{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--accent);font-weight:600}
.loginbox textarea{width:100%;box-sizing:border-box;font:inherit;padding:9px 11px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface-0);
  color:var(--ink);resize:vertical}

/*
 * The forgot card, both states.
 *
 * ⚠ THE PANES HAVE TO BE FLEX COLUMNS THEMSELVES. .loginbox is a flex column,
 * so its direct children stretch to full width for free. Wrapping the fields
 * in a div to make them swappable puts them one level down, where they fall
 * back to their natural width, which is what left the Resend button small and
 * left-aligned with everything bunched against it on ccc.opleague.net.
 */
.fg-pane{display:flex;flex-direction:column;gap:14px}

/* The outcome, legible before a word is read. */
.fg-tick{width:46px;height:46px;margin:2px auto 0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);border:2px solid var(--accent);background:var(--white)}

.fg-msg{margin:0;text-align:center;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.fg-msg b{color:var(--ink);font-family:var(--mono);font-size:12.5px;word-break:break-all}

/* The two facts that decide what somebody does next, set to be scanned rather
   than parsed out of a sentence. */
.fg-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.fg-facts > div{background:var(--surface-0);padding:10px 12px;text-align:center}
.fg-facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 3px}
.fg-facts dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}

/* Set apart because it is the single most likely reason somebody comes back
   thinking the reset is broken. */
.fg-spam{margin:0;padding:11px 13px;border-radius:6px;font-size:12.5px;line-height:1.55;
  color:var(--slate);background:#FDF5EC;border:1px solid #F0DDC6}
.fg-spam b{color:var(--watch)}

.fg-again{margin:0;text-align:center;font-size:12px;color:var(--text-3);min-height:1.2em}

/* The two ways out of the sign-in card. Small, quiet, and never competing with
   the Sign in button. */
.loginlinks{margin:2px 0 0;text-align:center;font-size:12.5px;color:var(--steel);
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.loginlinks a{color:var(--accent-live);text-decoration:none}
.loginlinks a:hover{text-decoration:underline}

/* One account request awaiting a decision. The reason is shown in full and
   wraps, because the reason IS the decision and a truncated one makes approve
   a reflex. */
.reqrow{display:flex;align-items:flex-start;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.reqrow.is-done{opacity:.6}
.reqrow__who{flex:1 1 auto;min-width:0}
.reqrow__why{margin:4px 0 0;white-space:pre-wrap}
.reqrow__when{margin-top:4px}
.reqrow__acts{display:flex;gap:6px;flex:none;align-items:center;flex-wrap:wrap}
@media (max-width:640px){.reqrow{flex-direction:column}}

/* Whether system mail can send at all, said in a color a glance can read. */
.mailstate{margin:0 0 12px;padding:11px 13px;border-radius:6px;font-size:13px;line-height:1.55}
.mailstate.is-ok{color:var(--good);background:#F1F8F4;border:1px solid #CFE6D9}
.mailstate.is-bad{color:var(--critical);background:#FBF3F3;border:1px solid #F0C9C2}
.mailstate b{display:block;margin-bottom:2px}

/* header lockup */
.topbrand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;
  padding-right:6px;border-right:1px solid var(--line);margin-right:4px}
/* The mark is a half-mask: tall and narrow, and it sat inside a square canvas
   with wide empty margins, so contained in a 30px square it shrank to an
   illegible sliver. marketseer-mark.png is the same artwork trimmed to its ink
   with the white dropped out, so height is what to set. The full square file
   stays as it is for the sign-in page and the favicon. */
.topbrand img{height:34px;width:auto;display:block;object-fit:contain}
/* The words stack beside the mark: whose console it is on top, what it is
   underneath. Matches the OPLeague console's lockup. Both lines are
   letterspaced caps, which is what stops two lines of text reading as a
   sentence and makes them read as a mark. */
.topbrand__words{display:flex; flex-direction:column; justify-content:center; gap:3px;
  white-space:nowrap; line-height:1}
.topbrand__words b{font:700 14px/1 var(--head,inherit); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink)}
.topbrand__words i{font-style:normal; font:600 8.5px/1 var(--mono,inherit); letter-spacing:.17em;
  text-transform:uppercase; color:var(--accent)}
@media (max-width:1100px){.topbrand__words i{display:none}
  .topbrand{border-right:0;margin-right:0}}

/* ON A PHONE THE LOCKUP IS THE MARK.
   Measured, not guessed: every one of the 45 pages scrolled sideways by
   exactly 36px at 390px, which is one cause and not 45. The header row holds
   the brand, seven group buttons and a 243px arm-and-sign-out group, and a
   390px phone gives it 350px of content width. `#groups` can already shrink to
   nothing and it still does not fit. The words go, the mark stays, and the row
   fits. A wordless mark on a phone is a smaller loss than a console that
   scrolls sideways on every page. */

label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-3)}
label.block{margin-bottom:12px}
label.chk{flex-direction:row;align-items:center;gap:8px}
input,select,textarea{
  background:var(--white);border:1px solid var(--line-strong);color:var(--text);
  padding:8px 10px;font-family:var(--sans);font-size:13.5px;border-radius:4px;width:100%;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
textarea{font-family:var(--mono);font-size:12.5px;line-height:1.6;min-height:150px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--silver)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,107,117,.14)}
button{
  background:var(--accent);color:#fff;border:1px solid var(--accent);padding:9px 16px;
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;border-radius:4px;
  box-shadow:var(--shadow-s);transition:background .12s ease,border-color .12s ease}
button:hover{background:var(--accent-mid);border-color:var(--accent-mid)}
button.ghost{background:var(--white);border:1px solid var(--line-strong);color:var(--text-2);
  font-weight:500;box-shadow:none}
button.ghost:hover{background:var(--surface-2);border-color:var(--silver);color:var(--ink)}
button.danger{background:var(--white);border:1px solid var(--critical);color:var(--critical);
  box-shadow:none}
button.danger:hover{background:#FBF3F3;border-color:var(--critical)}
.err{color:var(--critical);font-size:12.5px;margin:0}

/* password field with a reveal toggle */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:62px}
.reveal{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;box-shadow:none;border-radius:3px;
  color:var(--text-3);font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;cursor:pointer;
}
.reveal:hover{background:var(--surface-2);color:var(--accent-live)}
.reveal:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.reveal[aria-pressed="true"]{color:var(--accent-live)}
.remember{margin-top:2px;color:var(--text-2);font-size:12.5px}

/* chrome */
.top{display:flex;align-items:center;gap:22px;padding:0 20px;height:56px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
/* min-width:0 lets the tab strip shrink. Without it a flex item refuses to go
   below its content width, so the tabs push the arm switch and sign-out off the
   screen and give the whole page a horizontal scroll. */
#tabs{display:flex;gap:2px;margin-right:auto;overflow-x:auto;min-width:0;
  scrollbar-width:thin}
#tabs button{background:none;border:0;color:var(--text-3);font-weight:500;padding:9px 12px;
  border-bottom:2px solid transparent;border-radius:0;box-shadow:none}
#tabs button:hover{background:none;color:var(--ink)}
#tabs button.on{color:var(--accent-live);border-bottom-color:var(--accent)}
.armwrap{display:flex;align-items:center;gap:10px}
.arm{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border:1px solid;border-radius:3px;background:var(--white)}
.arm.off{color:var(--steel);border-color:var(--mist)}
.arm.on{color:var(--good);border-color:var(--good);background:#F2F8F5}
/* Layout: a calm 1140px band for rows that need the width, and a reading
   measure for anything that is prose. Nothing runs edge to edge. */
main{padding:38px 22px 96px;max-width:1140px;margin:0 auto}
.phead{max-width:760px;margin:0 0 28px}
.phead .kick{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.phead h2{font-size:27px;margin:10px 0 0;letter-spacing:-.018em}
.phead p{color:var(--text-3);font-size:14.5px;line-height:1.65;margin:9px 0 0}
.view > h2{font-size:27px;margin-bottom:22px}
.reading{max-width:68ch}

/* One inverted band, on the dashboard only, so the eye lands on the four
   numbers that decide whether today is going well. The background here is a
   dead value: styles-2.css sets `--band` on this same selector, later, and
   wins. Removed rather than left to be read as the truth. */
.headline{border-radius:8px;
  padding:4px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  box-shadow:0 2px 4px rgba(26,107,117,.18), 0 22px 44px -20px rgba(43,80,152,.55);
  margin-bottom:14px}
@media (max-width:820px){.headline{grid-template-columns:repeat(2,1fr)}}
.hl{padding:22px 24px 20px}
.hl b{display:block;font-family:var(--mono);font-size:32px;font-weight:600;color:#fff;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}
.hl span{display:block;font-size:11.5px;color:rgba(255,255,255,.72);margin-top:7px;
  letter-spacing:.02em}
.hl.lit b{color:#5DE9FA}

/* Secondary figures sit quieter, as a hairline strip rather than more cards. */
.substrip{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--line);
  border-radius:6px;background:var(--white);overflow:hidden;margin-bottom:26px;
  box-shadow:var(--shadow-s)}
@media (max-width:900px){.substrip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.substrip{grid-template-columns:repeat(2,1fr)}}
.sub-i{padding:14px 16px;border-right:1px solid var(--line)}
.sub-i:last-child{border-right:0}
.sub-i b{display:block;font-family:var(--mono);font-size:17px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.sub-i span{display:block;font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.35}
.sub-i.bad b{color:var(--critical)}

/* Cards carry the work: roomier padding, equal heights across a row. */
.panel{padding:28px}
.panel + .panel{margin-top:22px}
.panel > .hint:last-child{margin-bottom:0}
.eq{display:grid;gap:20px;grid-auto-rows:1fr}
.eq > *{height:100%}
.eq2{grid-template-columns:1fr 1fr}
@media (max-width:900px){.eq2{grid-template-columns:1fr}}

/* A labeled group inside a long form, so eighteen inputs read as four ideas. */
.fs{border:0;margin:0 0 22px;padding:0}
.fs:last-of-type{margin-bottom:0}
.fs legend{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);padding:0 0 12px;
  border-bottom:1px solid var(--line);width:100%;margin-bottom:16px}

/* Card detail as labeled pairs rather than one run-on mono line. */
.detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px 22px;
  margin-top:6px}
.detail div{min-width:0}
.detail dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:3px}
.detail dd{margin:0;font-size:13px;color:var(--text-2);overflow-wrap:anywhere}
.detail dd.n{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Roomier tables. */
th,td{padding:11px 14px}
.panel > .tablewrap{margin:0 -28px -28px;width:calc(100% + 56px)}
.panel > .tablewrap:first-child{margin-top:-28px}
.panel > .tablewrap table{border-radius:0}

/* panels */
.panel{background:var(--surface-1);border:1px solid var(--line);border-radius:6px;
  padding:20px;margin-bottom:18px;box-shadow:var(--shadow-m)}
.hint{color:var(--text-3);font-size:12.5px;margin:0 0 10px;line-height:1.55}
.formrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.formrow label{min-width:150px}
.formrow label.grow{flex:1;min-width:220px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid3{grid-template-columns:1fr}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.row2{grid-template-columns:1fr}}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  margin-bottom:18px;box-shadow:var(--shadow-m)}
.tile{background:var(--white);padding:16px 18px}
.tile b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile span{display:block;font-size:11.5px;color:var(--text-3);margin-top:4px}
.tile.good b{color:var(--good)} .tile.warn b{color:var(--watch)} .tile.bad b{color:var(--critical)}

/* tables */
.tablewrap{overflow-x:auto}

/* A WIDE TABLE SCROLLS, IT DOES NOT GET CRUSHED.
   Most tables sit inside `.tablewrap` and scroll. Several do not, and those
   were squeezed instead: Clients > Archive by 233px and Settings by 224px at
   phone width. Rather than chase every render site and hope the next one
   remembers the wrapper, a table carries its own scroll on a small screen.
   `display:block` makes the table itself the scrolling box; the rows still
   lay out as a table inside it. */
@media (max-width:700px){
  table{display:block; overflow-x:auto; max-width:100%}
}
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--white)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
/* THE HEADER ROW IS THE TABLE'S OWN BAND.
   29 tables, all of them topped with grey mono caps on the flattest grey in
   the palette, which is what made the list pages read as a spreadsheet pasted
   under a blue hat. Pale blue ground, the label in the accent, and a real rule
   under it: the head is a different KIND of row from the ones below it and the
   same hairline for both said otherwise. */
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-live);font-weight:600;
  background:linear-gradient(180deg,#F4FBFC 0%,#E9F6F8 100%);
  border-bottom:2px solid #C9E5EA}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Reading across six columns is what a list page is FOR, and the row under the
   cursor was tinted #F8FBFC, two points off white. A row being read should be
   obvious. */
tbody tr:hover td{background:#EDF7FA}
tr:last-child td{border-bottom:0}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--mist);color:var(--steel);display:inline-block;
  border-radius:3px;background:var(--white)}
.pill.running,.pill.sent,.pill.active{color:var(--good);border-color:var(--good);background:#F2F8F5}
.pill.paused,.pill.draft{color:var(--watch);border-color:var(--watch);background:#FBF7EF}
.pill.failed,.pill.bounced,.pill.stopped{color:var(--critical);border-color:var(--critical);
  background:#FBF3F3}
.pill.replied{color:var(--accent-live);border-color:var(--accent);background:#F1FAFB}

/* logs */
.log{font-family:var(--mono);font-size:11.5px;line-height:1.75;color:var(--text-2);
  max-height:280px;overflow:auto;background:var(--white);border:1px solid var(--line);
  border-radius:4px;padding:4px 12px}
.log div{border-bottom:1px solid var(--line);padding:4px 0}
.log div:last-child{border-bottom:0}
.log b{color:var(--accent-live);font-weight:500}

/* sequence editor */
.step{border:1px solid var(--line);background:var(--white);padding:16px;margin-bottom:12px;
  border-radius:5px;box-shadow:var(--shadow-s)}
.step .head{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.step .head .no{font-family:var(--mono);font-size:11px;color:var(--accent-live);letter-spacing:.1em}
.step label{margin-bottom:8px}
.cardhead{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cardhead h3{margin:0}
.cardhead .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* Five buttons in a row is fine on a monitor and 102px off the side of a
   phone. Once they wrap onto their own line, pinning them right leaves them
   stranded, so they start from the left with everything else. */
@media (max-width:700px){.cardhead .sp{margin-left:0;width:100%}}
.mono{font-family:var(--mono);font-size:12px;color:var(--text-3)}

@media (prefers-reduced-motion: reduce){*{transition:none !important}}

/* modal: used by the signature editor */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgba(20,45,70,.44);backdrop-filter:blur(3px)}
.modal-card{width:100%;max-width:1020px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface-1);border:1px solid var(--line-strong);border-radius:8px;
  box-shadow:var(--shadow-l);overflow:hidden}
.modal-head{display:flex;align-items:center;gap:14px;padding:18px 24px;
  border-bottom:1px solid var(--line);background:var(--white)}
.modal-body{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px;overflow:auto}
@media (max-width:860px){.modal-body{grid-template-columns:1fr}}
.modal-body textarea{min-height:280px}
.modal-body iframe{width:100%;height:280px;border:1px solid var(--line);border-radius:4px;
  background:#fff}
.modal-foot{display:flex;align-items:center;gap:12px;padding:16px 24px;
  border-top:1px solid var(--line);background:var(--white)}
.modal-foot .hint{margin:0}

/* ---- section separation ------------------------------------------------
   A labeled rule that runs to the right edge, so a page reads as chapters
   rather than a stack of similar boxes. The first one on a page sits tighter
   because the page head is already above it. */
.sechead{display:flex;align-items:center;gap:13px;margin:46px 0 18px}
.sechead:first-of-type{margin-top:0}
/* A NUMERAL, NOT A LABEL.
   Settings is eight of these down one page, Growth four, Deliverability and
   the Accounts pages three. The number is the only thing saying a long white
   form is an ordered list of jobs and not one endless page, and at 10.5px in
   the same weight as the note beside it, it was not saying it. */
.sechead .n{display:grid;place-items:center;flex:none;width:27px;height:27px;
  border-radius:9px;font-family:var(--mono);font-size:11px;font-weight:700;
  line-height:1;letter-spacing:.01em;color:#fff;white-space:nowrap;
  background:linear-gradient(145deg,var(--accent-mid) 0%,var(--accent) 100%);
  box-shadow:0 3px 8px -3px rgba(26,107,117,.55)}
.sechead h3{font-size:17px;margin:0;white-space:nowrap}
.sechead .note{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sechead::after{content:"";flex:1;height:1px;background:var(--line);min-width:24px}
@media (max-width:700px){.sechead .note{display:none}}

/* A titled card: the heading gets its own region rather than floating above
   the content it names. */
.panel > h3:first-child{padding-bottom:14px;margin-bottom:20px;
  border-bottom:1px solid var(--line);font-size:14.5px}
.panel > h3:first-child + .hint{margin-top:-6px}

/* Card stacks that are really one section keep tighter spacing than the
   chapter breaks around them. */
.stack > .panel + .panel{margin-top:16px}

/* ---- arm switch on a mailbox card --------------------------------------
   Its own region below the details, because arming is a different kind of
   decision from editing a setting and should not sit in a row of buttons. */
.armrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.armrow .lab{font-size:13.5px;font-weight:600;color:var(--ink)}
.armrow .note{font-size:12.5px;color:var(--text-3);margin-top:2px;line-height:1.5}
.armrow .grow{flex:1;min-width:240px}

.switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;flex-direction:row}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{position:relative;width:46px;height:26px;border-radius:13px;flex:none;
  background:var(--mist);border:1px solid var(--line-strong);
  transition:background .16s ease,border-color .16s ease}
.switch .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(26,41,64,.28);transition:transform .16s ease}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .track .knob{transform:translateX(20px)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}
.switch .state{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);min-width:66px}
.switch input:checked ~ .state{color:var(--good)}
@media (prefers-reduced-motion: reduce){.switch .track,.switch .knob{transition:none}}

/* ---- sequence flow -----------------------------------------------------
   Steps are a path, not a pile. A rail runs behind them, each step carries a
   numbered node on that rail, and the gap between two steps is where the wait
   is edited, because that is what the gap means. */
.seqflow{position:relative;padding-left:38px}
.seqflow::before{content:"";position:absolute;left:12px;top:6px;bottom:26px;width:2px;
  background:linear-gradient(180deg,var(--accent) 0%,var(--mist) 100%);border-radius:1px}
.seqmark{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);padding:2px 0 14px}
.seqmark::before{content:"";position:absolute;left:-32px;top:3px;width:10px;height:10px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--surface-2)}
.seqmark.end{padding:14px 0 0}
.seqmark.end::before{top:15px;background:var(--mist)}

.step{position:relative}
.step::before{content:attr(data-no);position:absolute;left:-38px;top:16px;width:24px;height:24px;
  border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-size:11px;
  font-weight:600;display:grid;place-items:center;
  box-shadow:0 0 0 4px var(--surface-2),0 1px 3px rgba(26,41,64,.2)}

.connector{position:relative;display:flex;align-items:center;gap:10px;
  margin:0 0 12px;padding:12px 0 12px 2px}
.connector::before{content:"";position:absolute;left:-31px;top:50%;width:8px;height:8px;
  margin-top:-4px;border-right:2px solid var(--silver);border-bottom:2px solid var(--silver);
  transform:rotate(45deg)}
.connector .waitbox{display:inline-flex;align-items:center;gap:8px;background:var(--white);
  border:1px solid var(--line-strong);border-radius:20px;padding:5px 14px;font-size:12.5px;
  color:var(--text-2)}
.connector .waitbox input{width:52px;text-align:center;padding:3px 4px;font-family:var(--mono);
  font-size:12.5px;border-radius:3px}
.connector .then{font-size:12.5px;color:var(--text-3)}

/* ---- weekly hours grid -------------------------------------------------- */
.dayrow{display:grid;grid-template-columns:110px 62px 1fr 1fr;gap:12px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line)}
.dayrow:last-child{border-bottom:0}
.dayrow.head{border-bottom:1px solid var(--line-strong);padding-bottom:9px;margin-bottom:4px}
.dayrow.head span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.dayrow .dname{font-size:13.5px;font-weight:600;color:var(--ink)}
.dayrow input[type=time]{padding:6px 8px;font-size:13px}
.dayrow.off .dname,.dayrow.off input[type=time]{opacity:.42}
@media (max-width:560px){.dayrow{grid-template-columns:84px 50px 1fr 1fr;gap:8px}}

/* ---- sequence list ------------------------------------------------------ */
.disclose{width:28px;height:28px;padding:0;flex:none;font-size:15px;line-height:1;
  font-family:var(--mono)}
.sq-name{flex:1;min-width:180px;max-width:420px;font-size:15px;font-weight:600;
  border-color:transparent;background:transparent;padding:6px 8px}
.sq-name:hover{border-color:var(--line-strong);background:var(--white)}
.sq-name:focus{border-color:var(--accent);background:var(--white)}
.sq-name.saved{border-color:var(--good);background:#F2F8F5}

/* ---- two-level navigation ---------------------------------------------- */
#groups{display:flex;gap:2px;margin-right:auto;min-width:0;overflow-x:auto}
#groups button{background:none;border:0;color:var(--text-3);font-weight:600;font-size:13.5px;
  padding:9px 14px;border-bottom:2px solid transparent;border-radius:0;box-shadow:none}
#groups button:hover{background:none;color:var(--ink)}
#groups button.on{color:var(--accent-live);border-bottom-color:var(--accent)}
.subnav{position:sticky;top:56px;z-index:19;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:0 20px}
.subnav{display:flex;align-items:center}
.subnav > nav{flex:1;min-width:0}
.subnav #tabs{max-width:1140px;margin:0 auto;height:42px;align-items:center}
.extlink{flex:none;margin-left:16px;font-size:12px;font-weight:600;color:var(--accent-live);
  text-decoration:none;white-space:nowrap;border:1px solid var(--line-strong);border-radius:4px;
  padding:6px 12px;background:var(--white)}
.extlink:hover{border-color:var(--accent);background:var(--surface-2)}
@media (max-width:760px){.extlink{display:none}}
.subnav #tabs button{font-size:12.5px;padding:0 12px;height:42px;border-bottom-width:2px}

/* ---- dashboard: blockers and channel cards ------------------------------ */
.blocker{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.blocker:last-child{border-bottom:0}
.blocker .dot{width:8px;height:8px;border-radius:50%;align-self:center}
.blocker.stop .dot{background:var(--critical)}
.blocker.watch .dot{background:var(--watch)}
.blocker.ready .dot{background:var(--good)}
.blocker .what{font-size:14px;color:var(--ink);line-height:1.45}
.blocker.ready .what{color:var(--good);font-weight:600}
.blocker .where{font-family:var(--mono);font-size:11px;color:var(--text-3);white-space:nowrap}

.chan{display:flex;flex-direction:column;height:100%}
.chan .chanhead{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.chan .chanhead h3{margin:0;font-size:15px}
.chan .chanhead .pill{margin-left:auto}
.chan .figs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px}
.chan .fig b{display:block;font-family:var(--mono);font-size:20px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.chan .fig span{display:block;font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.35}
.chan .fig.lit b{color:var(--good)}
.chan .foot{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--text-3)}

/* ------------------------------------------------------------ LinkedIn inbox
   A mailbox rather than a table: the list is a column you scan, the pane is a
   conversation you read. Both scroll inside themselves so the page itself never
   does, which is what makes it feel like a mail client instead of a report. */

.mailbox{display:grid;grid-template-columns:340px 1fr;gap:0;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-0);
  box-shadow:var(--shadow-m);overflow:hidden;height:calc(100vh - 250px);min-height:460px}

.mb-side{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);
  background:var(--surface-2)}
.mb-tools{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.mb-tools input{font-size:12.5px;padding:7px 10px}
.mb-tools button{padding:7px 12px;font-size:12.5px;flex:none}

.mb-filters{display:flex;gap:2px;padding:8px 10px;border-bottom:1px solid var(--line);
  overflow-x:auto}
.mb-filters button{background:none;border:0;padding:5px 9px;border-radius:5px;
  font-size:11.5px;font-weight:500;color:var(--text-3);cursor:pointer;white-space:nowrap}
.mb-filters button:hover{background:var(--fog);color:var(--ink)}
.mb-filters button.on{background:var(--accent);color:#fff}
.mb-filters button span{font-family:var(--mono);font-size:10px;margin-left:6px;opacity:.75}
.mb-filters button span:empty{display:none}

.mb-threads{flex:1;overflow-y:auto;min-height:0}
.mb-t{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:11px 13px;border-bottom:1px solid var(--line);border-left:2px solid transparent}
.mb-t:hover{background:var(--fog)}
.mb-t.on{background:var(--surface-0);border-left-color:var(--accent)}
.mb-t-top{display:flex;align-items:baseline;gap:8px}
.mb-t-name{font-size:13px;font-weight:500;color:var(--text);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-t.unread .mb-t-name{font-weight:700;color:var(--ink)}
.mb-t-when{font-family:var(--mono);font-size:10px;color:var(--text-3);flex:none}
.mb-t-line{font-size:12px;color:var(--text-3);line-height:1.45;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb-t-tags{display:flex;gap:5px;margin-top:5px}
.mb-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  align-self:center}
.mb-flag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line-strong);border-radius:3px;padding:1px 5px}
.mb-flag.q{color:var(--watch);border-color:var(--watch)}
.mb-empty{padding:26px 16px;color:var(--text-3);font-size:12.5px;line-height:1.6}

.mb-pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.mb-blank{flex:1;display:grid;place-items:center;color:var(--text-3);font-size:13px}
.mb-open{display:flex;flex-direction:column;flex:1;min-height:0}

.mb-head{display:flex;align-items:flex-start;gap:16px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.mb-who{flex:1;min-width:0}
.mb-who h3{margin:0;font-size:15px;letter-spacing:-.01em}
.mb-who p{margin:3px 0 0;font-size:12.5px}
.mb-acts{display:flex;gap:7px;flex:none}
.mb-acts button,.mb-acts .btnlink{padding:6px 11px;font-size:12px}
.btnlink{display:inline-flex;align-items:center;text-decoration:none;border-radius:6px;
  border:1px solid var(--line-strong);color:var(--text-2);background:var(--surface-0)}
.btnlink:hover{border-color:var(--accent);color:var(--accent-live)}

.mb-log{flex:1;overflow-y:auto;min-height:0;padding:20px;display:flex;
  flex-direction:column;gap:14px;background:var(--surface-2)}
.mb-m{max-width:min(68ch,80%);border-radius:9px;padding:11px 14px;font-size:13px;
  line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:var(--shadow-s)}
.mb-m.in{align-self:flex-start;background:var(--surface-0);border:1px solid var(--line)}
.mb-m.out{align-self:flex-end;background:#EAF7F9;border:1px solid #C9EAEE}
.mb-m-meta{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.mb-m.pending{border-style:dashed;opacity:.9}
.mb-m.failed{border-color:var(--critical)}
.mb-m-note{display:block;font-size:11.5px;color:var(--critical);margin-top:6px}
.mb-day{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);padding:2px 0}

.mb-compose{border-top:1px solid var(--line);padding:12px 16px;background:var(--surface-0)}
.mb-compose textarea{width:100%;font-family:var(--sans);font-size:13px;line-height:1.6;
  resize:vertical;min-height:74px}
.mb-foot{display:flex;align-items:center;gap:12px;margin-top:9px}
.mb-foot .hint{margin:0;flex:1}
.mb-foot button{flex:none}

@media (max-width:900px){
  .mailbox{grid-template-columns:1fr;height:auto}
  .mb-side{border-right:0;border-bottom:1px solid var(--line)}
  .mb-threads{max-height:320px}
  .mb-log{max-height:420px}
}

/* The extension's own account of itself. Without this the only place its state
   is visible is its options page, which means a mirror that has quietly stopped
   updating looks identical to one with nothing new to say. */
.mb-status{display:flex;align-items:center;gap:9px;padding:9px 14px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:7px;background:var(--surface-2);
  font-size:12.5px;color:var(--text-2)}
.mb-status-dot{width:7px;height:7px;border-radius:50%;background:var(--mist);flex:none}
.mb-status.live .mb-status-dot{background:var(--good)}
.mb-status.paused .mb-status-dot{background:var(--watch)}
.mb-status.bad .mb-status-dot{background:var(--critical)}
.mb-status.bad{border-color:var(--critical)}
.mb-status-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-status-when{font-family:var(--mono);font-size:11px;color:var(--text-3);flex:none}

/* ================================================= THE HEADER ON A PHONE ==
   Measured: all 45 pages scrolled sideways by exactly 36px at 390px, which is
   one cause and not 45. The header row holds the brand, seven group buttons
   and a 243px arm-and-sign-out group, and a 390px phone gives it 350px.

   Squeezing the nav into what was left made it read "Dasl": it fitted and
   could not be used. So the header is two rows. The mark and the controls take
   the first, the nav takes the whole of the second and scrolls on its own,
   which is what a tab strip on a phone is for. The lockup's words stand down,
   as its second line already does below 1100px, because with them the first
   row wants 373px of the 366 available and the controls wrap to a third row.

   This sits at the end of the file on purpose: it has to beat `.top`'s own
   height, and at equal specificity that means coming after it. */
@media (max-width:620px){
  .top{flex-wrap:wrap; height:auto; min-height:0; gap:8px 12px; padding:8px 12px}
  .topbrand__words{display:none}
  #groups{order:3; width:100%; margin-right:0}
  .armwrap{gap:6px; margin-left:auto}
}