/* Kander Consult. Every value here was read off Kander's own mark and their own
   site's stylesheets, never eyedropped and never chosen by taste. The two
   sources disagree slightly and BRAND.md says which one won and why. */
:root{
  /* chrome ramp. The dark end is Kander's navy rather than a neutral black,
     because their site sets its "black" to #143253 and a neutral grey next to
     that navy reads as a second, muddier brand. */
  --ink:#143253; --night:#0E2440; --slate-dp:#1D4067; --slate:#2F5382;
  --steel:#5A6E92; --gray:#8B98AD; --silver:#ACB7C7; --mist:#C6CFDA;
  --fog:#DEE4EB; --paper:#F3F5F8; --white:#FFFFFF;

  /* accent ramp. --accent is the orange in the Kander mark itself, which is
     what sits next to it in the header on all 43 screens. --accent-mid is the
     lighter orange their website uses. --accent-live is --accent darkened
     until it clears 4.5:1 on white, because the brand orange measures 3.46:1
     and would be unreadable as link and inline-code text. */
  --accent:#F15523; --accent-mid:#FF6532; --accent-live:#D83F0E;

  /* The blue from the ring of the mark. Reserved for the dark band, charts and
     anything that must read as chrome rather than as an action. */
  --brandblue:#3D5AA9;

  /* status ramp, reserved. --risk is deliberately darker than Kander's
     #A94D1B: on a console whose brand accent is already orange, a mid orange
     risk pill reads as a button. */
  --good:#2A7454; --watch:#8A5E12; --risk:#8C3D14; --critical:#A32F2F;

  /* semantic surfaces. surface-0 is WHITE on purpose. */
  --surface-0:#FFFFFF;
  --surface-1:linear-gradient(180deg,#FFFFFF 0%,#EDF1F7 100%);
  --surface-2:#F7F9FC;
  --line:#DEE4EB;
  --line-strong:#C6CFDA;
  --text:#143253;
  --text-2:#2F5382;
  --text-3:#5A6E92;

  /* Libre Franklin is the freely servable revival of Franklin Gothic, which is
     the face Kander sets their own site in. Their licence is an Adobe Fonts
     one tied to their Squarespace site and cannot be served from here. */
  --sans:"Libre Franklin",system-ui,-apple-system,Segoe UI,sans-serif;
  --head:"Libre Franklin","Franklin Gothic Medium",Arial,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. Built from the navy and the ring blue, kicked with the orange. */
  --band:linear-gradient(135deg,#0E2440 0%,#1F3E72 58%,#3D5AA9 100%);
  --band-lift:0 2px 4px rgba(20,50,83,.10), 0 18px 40px -22px rgba(61,90,169,.55);
  --band-kick:#FFA678;

  --shadow-s:0 1px 2px rgba(20,50,83,.05);
  --shadow-m:0 1px 2px rgba(20,50,83,.04), 0 6px 16px -6px rgba(20,50,83,.10);
  --shadow-l:0 2px 4px rgba(20,50,83,.05), 0 18px 40px -14px rgba(20,50,83,.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:#E6E9F1}
body{
  margin:0;padding:0;min-height:100vh;
  background:linear-gradient(198deg,#FFFFFF 0%,#F2F3F5 46%,#E6E9F1 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}
/* Kander's mark is a wide lockup, not the square badge OMI Firm used, so
   104px would have set the wordmark at about 7px. The card is 370px wide
   with 34px of padding, which leaves 302px; 232 sits inside that with air. */
.loginbox .logo{display:block;width:232px;height:auto;margin:0 auto 6px}
.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 Kander mark is the ring monogram cut out of the full lockup and
   squared, so it holds its shape at header height. */
.topbrand img{height:30px;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(61,90,169,.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(61,90,169,.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:#8FA8E8}

/* 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,#F4F7FC 0%,#E9EEF8 100%);
  border-bottom:2px solid #C9D4EA}
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 #F8F9FC, two points off white. A row being read should be
   obvious. */
tbody tr:hover td{background:#EDF1FA}
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:#F1F5FB}

/* 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(61,90,169,.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(20,50,83,.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(20,50,83,.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:#EAEFF9;border:1px solid #C9D7EE}
.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}
}