:root {
  --bg: #fafaf8;
  --surface: #ffffff;
  --ink: #191918;
  --sub: #6b6b66;
  --line: #e4e4df;
  --panel: #f1f1ed;
  --good-bg: #e9f4ec;
  --good-ink: #1d6b34;
  --bad-bg: #faeceb;
  --bad-ink: #b42323;
  --warn-bg: #faf1dd;
  --warn-ink: #92610c;
  --accent: #2b4fd0;
  --accent-bg: #eef1fc;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 1.6rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}
header .home {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
header .home .mark {
  width: 24px; height: 24px; border-radius: 6px; background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
header .crumb { color: var(--sub); }
header nav {
  display: flex;
  gap: 2px;
  background: var(--panel);
  border-radius: 9px;
  padding: 3px;
}
header nav a {
  color: var(--sub);
  text-decoration: none;
  padding: 0.3rem 0.75rem;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
}
header nav a.on {
  color: var(--ink);
  font-weight: 600;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
.findbox { margin: 0; }
.whoami { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem;
          font-size: 13px; }
.whoami a { color: var(--ink); font-weight: 600; text-decoration: none; }
header .sendpill { margin-left: 0; }
.login { max-width: 26rem; margin: 3rem auto; }
.findbox input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  /* Fixed so the header geometry does not shift between screens. */
  width: 15rem;
}
.findbox input::placeholder { color: var(--sub); }
mark { background: var(--warn-bg); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.findrow { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.findrow:first-of-type { border-top: 0; }
.findwhere { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
             margin: 0.25rem 0 0; font-size: 0.92rem; }

.sendpill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
a.sendpill { text-decoration: none; }
.sendpill.bad { background: var(--bad-bg); color: var(--bad-ink); }
.sendpill.good { background: var(--good-bg); color: var(--good-ink); }
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.sendpill.bad .dot { background: var(--bad-ink); }
.sendpill.good .dot { background: var(--good-ink); }
.dot.warn { background: #d19a1e; }
main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.6rem 1.4rem 4rem;
}
main.wide { max-width: 100rem; }

h1 { font-size: 1.55rem; font-weight: 650; letter-spacing: -0.015em; margin: 0.6rem 0 0.4rem; }
h1 .domain { font-weight: 400; color: var(--sub); font-size: 1.05rem; margin-left: 0.4rem; }
h2 { font-size: 1.08rem; font-weight: 650; margin: 0 0 0.4rem; }
section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}
.sub { color: var(--sub); margin: 0.2rem 0 0.8rem; }
.muted { color: var(--sub); }

table { border-collapse: collapse; width: 100%; margin: 0.6rem 0 1rem; }
/* Every table scrolls inside its own box, so a wide table never widens the
   page. This is what lets cells shrink to their content without the layout
   spilling. Outside a section it is a card of its own. */
.tablewrap {
  overflow: auto; max-height: calc(100vh - 13rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 0.4rem;
}
.tablewrap table { margin: 0; }
/* Inside a section the card chrome would double up; the section is the card. */
section .tablewrap { background: none; border: none; border-radius: 0; padding: 0; }
/* ONE LINE, ALWAYS. The rule is on the cell itself, not on a class, so no
   future content can defeat it: a long value truncates and carries its full
   text in a title tooltip, and anything that genuinely needs room (a letter
   body, an address list) opens in the side pane instead of growing the row. */
th, td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--line);
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td { font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
th { color: var(--sub); font-weight: 600; font-size: 0.79rem; cursor: pointer; user-select: none; white-space: nowrap;
     position: sticky; top: 0; z-index: 5; background: var(--surface);
     border-bottom: none; box-shadow: 0 1px 0 var(--line); }
th:hover { color: var(--ink); }
th[data-dir="asc"]::after { content: " \2191"; color: var(--accent); }
th[data-dir="desc"]::after { content: " \2193"; color: var(--accent); }
td form { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.stack { display: flex; flex-direction: column; gap: 0.7rem; max-width: 34rem; }
.stack label { display: flex; flex-direction: column; gap: 0.25rem; }
.stack label.row { flex-direction: row; align-items: center; gap: 0.5rem; }
.inline-add { display: flex; gap: 0.5rem; flex-wrap: wrap; }
fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
}
legend { color: var(--sub); padding: 0 0.3rem; }

input[type="text"], input[type="number"], input:not([type]), textarea, select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font: inherit;
}
textarea { resize: vertical; }
button {
  font: inherit;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  align-self: flex-start;
}
button:hover { border-color: #b8b8b2; }
button.small { padding: 0.15rem 0.65rem; font-size: 0.85rem; border-radius: 7px; }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 0.55rem 1.6rem;
  border-radius: 9px;
}
button.primary:hover { background: #2445b8; border-color: #2445b8; }

.notice {
  border-radius: 10px;
  padding: 0.6rem 1rem;
  margin: 0.6rem 0;
  background: var(--surface);
  border: 1px solid var(--line);
}
.notice.good { background: var(--good-bg); color: var(--good-ink); border-color: #cfe4d5; }
.notice.bad { background: var(--bad-bg); color: #8c1d1d; border-color: #f0d4d2; }
.notice.bad button { border-color: var(--bad-ink); color: var(--bad-ink); background: var(--surface); font-weight: 600; }
.notice.floating { position: fixed; top: 1rem; right: 1rem; z-index: 10; max-width: 24rem; box-shadow: 0 2px 12px rgba(0,0,0,0.25); }

.campstrip {
  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
  margin: 0 0 0.8rem; padding: 0.45rem 0.8rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; font-size: 0.92rem; color: var(--sub);
}
.campstrip b { color: var(--ink); font-weight: 600; }
.campstrip a b { color: var(--ink); }
.stepper { display: flex; gap: 0.4rem; align-items: center; margin: 0 0 1rem; }
.stepper a { padding: 0.3rem 0.85rem; border: 1px solid var(--line); border-radius: 999px;
             text-decoration: none; color: var(--sub); font-weight: 500;
             background: var(--surface); font-size: 0.92rem; white-space: nowrap; }
.stepper a:hover { border-color: #b8b8b2; text-decoration: none; }
.stepper a.on { color: var(--accent); border-color: var(--accent);
                background: var(--accent-bg); font-weight: 600; }
.stepper .sep { color: var(--sub); }
.railcols { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.2rem;
            align-items: start; }
.railcols > div:last-child { min-width: 0; }
.railcols td.page { max-width: 16rem; }
.railcols td.grow { max-width: 14rem; }
@media (max-width: 72rem) { .railcols { grid-template-columns: 1fr; } }
.rail { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--line);
        border-radius: 10px; padding: 0.5rem 0; }
.rail h3 { margin: 0.2rem 0.9rem 0.4rem; font-size: 0.8rem; color: var(--sub);
           text-transform: uppercase; letter-spacing: 0.06em; }
.rail a { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.9rem;
          color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.rail a:hover { background: var(--bg); text-decoration: none; }
.rail a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.rail a .n { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail a.on .n { color: var(--accent); }
.rail .q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail a.unpulled .q { color: var(--sub); font-style: italic; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(40rem, 96vw);
          overflow: auto; background: var(--surface); border-left: 1px solid var(--line);
          box-shadow: -6px 0 24px rgba(0, 0, 0, 0.10); padding: 0.9rem 1.2rem 2rem;
          z-index: 20; }
.drawer .headrow a { font-weight: 600; }
.cardhead h2 { margin: 0.2rem 0 0.4rem; font-size: 1.35rem; }
.cardfacts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.6rem; }
.cnt { display: inline-block; padding: 0 0.55rem; border-radius: 999px; background: var(--ink);
       color: var(--surface); font-size: 0.78rem; font-weight: 700; line-height: 1.35rem;
       white-space: nowrap; }
.tabs { display: flex; gap: 2px; background: var(--panel); border-radius: 9px; padding: 3px;
        margin: 0 0 1rem; width: fit-content; max-width: 100%; }
.tabs a { color: var(--sub); text-decoration: none; padding: 0.3rem 0.8rem; border-radius: 7px;
          font-size: 13px; font-weight: 500; text-transform: capitalize; white-space: nowrap; }
.tabs a.on { color: var(--ink); font-weight: 600; background: var(--surface);
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); }
.tabs a .n { color: var(--accent); font-weight: 700; margin-left: 0.2rem; }
.cardsec { margin: 0 0 1rem; }
.cardsec h3 { margin: 0 0 0.35rem; font-size: 0.8rem; color: var(--sub); text-transform: uppercase;
              letter-spacing: 0.06em; }
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { padding: 0.25rem 0; border-top: 1px solid var(--line); }
.plainlist li:first-child { border-top: 0; }
.note { padding: 0.5rem 0.8rem; margin: 0.5rem 0; background: var(--bg); border: 1px solid var(--line);
        border-radius: 8px; white-space: pre-wrap; }
.note form.inline { float: right; }
.tagchip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.6rem;
           border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem;
           color: var(--sub); background: var(--surface); cursor: pointer; white-space: nowrap; }
.tagchip input { margin: 0; width: auto; }
.tagchip:has(input:checked) { border-color: var(--accent); background: var(--accent-bg);
                              color: var(--accent); font-weight: 600; }
.replybody .inline-add { margin-top: 0.5rem; }
.savetpl { margin: -0.4rem 0 0.8rem; }
fieldset.radios { border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.9rem 0.7rem;
                  margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
fieldset.radios legend { color: var(--sub); font-size: 0.85rem; padding: 0 0.3rem; }
form.stack fieldset.radios label { display: flex; flex-direction: row; gap: 0.5rem; align-items: baseline; }
fieldset.radios input { width: auto; margin: 0; }

.nextbar { display: flex; gap: 0.9rem; align-items: center; margin: 0.8rem 0; }
.headrow { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.headrow form { margin: 0; }
.editrow { display: flex; gap: 0.4rem; flex-wrap: nowrap; }
.editrow input[name="name"] { min-width: 14rem; }
/* Inside a one-line cell the editor shrinks instead of forcing a second row:
   min-width 0 overrides a flex item's auto minimum, which is what wrapped it. */
td .editrow input[name="name"] { min-width: 0; width: 12rem; }
button:disabled { opacity: 0.45; cursor: default; }
.actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; }
.actions > * { flex: 0 0 auto; }
.pulls { display: flex; gap: 2rem; flex-wrap: wrap; margin: 0.8rem 0 0.4rem; }
.pull { min-width: 13rem; }
.pull-label { color: var(--sub); font-size: 0.85rem; margin-right: 0.5rem; }
.pull-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.clienthit { color: var(--accent); font-weight: 600; }
.domainrow { display: inline-flex; align-items: center; gap: 0.3rem; }
.domainrow.nogo { color: var(--bad-ink); font-weight: 600; }
.cardstops { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0 0 0.5rem; }
.cardstops form.inline { margin: 0; }
.cardtools { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin: 0 0 0.8rem; }
.cardtools details.tool > summary { cursor: pointer; color: var(--accent); font-weight: 600;
                                    font-size: 0.9rem; }
.cardtools details.tool[open] { flex-basis: 100%; }
.stopform .clientpicks { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 0.2rem 1.4rem; }
.stopform label.row { flex-direction: row; align-items: center; gap: 0.4rem; }
.stopform label.row input { width: auto; margin: 0; }
button.icon, a.icon { display: inline-flex; align-items: center; padding: 0; margin: 0;
                      background: none; border: none; cursor: pointer;
                      color: var(--sub); line-height: 1; }
button.icon:hover, a.icon:hover { color: var(--accent); }
button.icon.copied { color: var(--good-ink); }
.pull-state { font-size: 0.8rem; margin-left: 0.4rem; }
.pull-state.working { color: var(--accent); }
.pull-state.done { color: var(--good-ink); }
.pull-state.stalled { color: var(--bad-ink); font-weight: 600; }
.pull-state.stopped { color: var(--sub); }
.pull-bar { height: 4px; background: var(--panel); border: 1px solid var(--line);
            border-radius: 3px; margin-top: 0.3rem; overflow: hidden; }
.pull-bar div { height: 100%; background: var(--accent); }
.pull-ctl { min-width: 0; align-self: center; }
.notice form.inline { margin-left: 0.5rem; }
details summary { cursor: pointer; }
.addr { display: flex; gap: 0.6rem; align-items: center; padding: 0.15rem 0; }
.addr-email { min-width: 15rem; }
.addr-kind { color: var(--sub); font-size: 0.85rem; }
.addr-add { display: flex; gap: 0.4rem; margin: 0.4rem 0 0.2rem; }
.addr-add input { padding: 0.2rem 0.5rem; font-size: 0.9rem; min-width: 14rem; }
.actions form, form.inline { display: inline; margin: 0; }
/* Numeric columns shrink to their own content (width 1% against a full-width
   table) instead of splitting the leftover space evenly, which left rank and
   keywords swimming in whitespace. The room goes to the elastic columns. */
th.num, td.num { width: 1%; text-align: right; }
th.tight, td.tight { width: 1%; }
/* The elastic columns: the only ones that absorb leftover width, each capped
   so the ellipsis actually engages. With every other column at width 1% the
   auto layout has just these to give room to, which is why the cap binds
   without table-layout: fixed. */
td.grow { max-width: 24rem; }
td.page { max-width: 42rem; }
/* A table with several elastic columns has to give somewhere. width: 1px with
   no minimum lets these shrink past their content when the table is squeezed
   (the cap is only their ceiling), so the columns after them - the actions -
   stay on screen instead of being pushed past the right edge where an
   operator never finds them. */
td.grow-s { width: 1px; min-width: 5rem; max-width: 13rem; }
/* A control cell shrinks to its buttons so an action can never be clipped
   away, and its buttons never wrap (white-space inherits from the cell). */
td.act { width: 1%; }
/* A phrase next to a button: the phrase truncates, the button stays whole.
   vertical-align keeps the inline-block from adding height to the row. */
td.growact { width: 1%; }
td.growact .txt { display: inline-block; max-width: 18rem; overflow: hidden;
                  text-overflow: ellipsis; vertical-align: bottom; }
/* A control in a row is exactly as tall as the row's text line, so a row with
   buttons is not taller than one without. Height comes from the line box, not
   from padding, and vertical-align: middle keeps the control out of the
   baseline's descender space - aligning on the baseline is what made every
   row with a button a few px taller than its neighbours. */
td button, td input, td select {
  line-height: 1.45; padding-top: 0; padding-bottom: 0;
  height: 1.45em; vertical-align: middle;
}

/* Outreach: one lifecycle table, the thread in a sticky side pane. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 1.2rem;
        align-items: start; }
/* The lifecycle table is wider than the space the pane leaves it; it scrolls
   inside its own column instead of painting underneath the pane. */
.cols > div:first-child { min-width: 0; overflow: auto;
                          max-height: calc(100vh - 13rem); }
@media (max-width: 72rem) { .cols { grid-template-columns: 1fr; } }
.pane { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto;
        background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
        padding: 1rem 1.2rem; }
.pane pre, td details pre { white-space: pre-wrap; background: var(--bg);
        border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem;
        font-size: 0.85rem; margin: 0.3rem 0; }
td details pre { max-width: 40rem; }
.msg-head { color: var(--sub); font-size: 0.85rem; margin-top: 0.7rem; }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.8rem 0 0.2rem; }
.chips a, .chips span { padding: 0.2rem 0.75rem; border: 1px solid var(--line);
           border-radius: 999px; text-decoration: none; color: var(--sub);
           background: var(--surface);
           font-size: 0.88rem; white-space: nowrap; }
.chips a:hover { text-decoration: none; border-color: #b8b8b2; }
.chips a.on { border-color: var(--accent); background: var(--accent-bg);
              color: var(--accent); font-weight: 600; }
.chips b { color: var(--ink); font-weight: 650; margin-right: 0.25rem; }
.chips a.on b { color: var(--accent); }
.badge { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px;
         border: 1px solid var(--line); font-size: 0.8rem; font-weight: 600;
         white-space: nowrap; }
.badge.set { background: var(--good-bg); color: var(--good-ink); border-color: transparent; }
.badge.warn { background: var(--bad-bg); color: var(--bad-ink); border-color: transparent; }
tr.canceled td { color: var(--sub); }
.cadence { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.cadence label { display: flex; flex-direction: column; gap: 0.25rem;
                 font-size: 0.9rem; color: var(--sub); }
.cadence label.row { flex-direction: row; align-items: center; }
.cadence input[type="number"] { width: 6.5rem; }
.pane textarea { width: 100%; }

/* The copy screen: a letter is read as a block of prose, so the fields are
   full width and the body is tall enough to see the whole letter at once. */
.copyform { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.4rem; }
.copyform label { font-size: 0.9rem; color: var(--sub); }
.copyform input[type="text"], .copyform textarea { width: 100%; }
.copyform textarea { min-height: 16rem; font-family: inherit; }
.copyform h3 { margin: 0.6rem 0 0; }
.copyform details pre { white-space: pre-wrap; }

/* The start screen scoreboard: the three numbers that say whether outreach is
   actually happening, each in its own card, label above the number. */
.scoreboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 1rem; margin: 1rem 0 1.4rem; }
.score { display: flex; flex-direction: column; gap: 0.3rem;
         background: var(--surface); border: 1px solid var(--line);
         border-radius: 10px; padding: 1.1rem 1.3rem 1rem; }
.score-n { font-size: 2.4rem; font-weight: 650; line-height: 1.1;
           font-variant-numeric: tabular-nums; }
.score-n.bad { color: var(--bad-ink); }
.score-l { color: var(--sub); font-size: 0.92rem; font-weight: 500; order: -1; }
.score .sub { font-size: 0.85rem; margin-top: auto; }
.meter { height: 5px; border-radius: 3px; background: var(--panel);
         overflow: hidden; margin-top: 0.3rem; }
.meter div { height: 100%; background: var(--accent); }
/* The sticky header sits above the rows it pins, or the first row shows
   through its background as it scrolls under. */
thead th { z-index: 6; }

/* Add a client stays folded into a quiet button until it is needed. */

/* Letters tab: each template is one line until opened. */
.letterline { border-bottom: 1px solid var(--line); padding: 0.45rem 0.2rem; }
.letterline > summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.letterline .copyform { margin-top: 0.8rem; }

/* The reading list: replies as letters, not as rows. A card is a <details>,
   so open/closed survives without script and the keyboard map only has to
   toggle the attribute. */
.triage { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap;
          margin: 1rem 0 0.7rem; }
.triage .toggle { padding: 0.25rem 0.7rem; border: 1px solid var(--line);
                  background: var(--surface); border-radius: 8px;
                  font-size: 0.88rem; font-weight: 500; }
.triage .toggle.on { border-color: var(--accent); background: var(--accent-bg);
                     color: var(--accent); font-weight: 600; }
.triage .keys { margin-left: auto; color: var(--sub); font-size: 0.82rem; }
.triage kbd { font: inherit; font-size: 0.78rem; border: 1px solid var(--line);
              border-bottom-width: 2px; border-radius: 5px; padding: 0 0.35rem;
              background: var(--surface); margin-right: 0.15rem; }
.replies { display: flex; flex-direction: column; gap: 0.55rem; }
.reply { background: var(--surface); border: 1px solid var(--line);
         border-left: 3px solid transparent; border-radius: 10px; }
.reply.unread { border-left-color: var(--accent); }
.reply[data-focus] { border-color: var(--accent); }
.reply > summary { display: flex; gap: 0.6rem; align-items: center;
                   padding: 0.5rem 1rem; cursor: pointer; list-style: none; }
.reply > summary::-webkit-details-marker { display: none; }
.reply .dot-unread { width: 7px; height: 7px; border-radius: 50%;
                     flex: 0 0 auto; background: transparent; }
.reply.unread .dot-unread { background: var(--accent); }
/* The preview is the reply's own first words; it gives up its width first so
   the domain, the verdict and the date always stay whole. */
.reply .prev { color: var(--sub); flex: 1; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.reply[open] .prev { visibility: hidden; }
.reply .when { color: var(--sub); font-size: 0.86rem; white-space: nowrap; }
.reply .price { font-weight: 650; color: var(--warn-ink);
                font-variant-numeric: tabular-nums; }
.replybody { padding: 0 1rem 0.7rem; }
/* A long reply scrolls inside its own card. Without the cap one guidelines
   email fills the screen and the list stops being scannable, which is the
   whole point of showing the text inline. */
.replybody pre { white-space: pre-wrap; background: var(--bg);
                 border: 1px solid var(--line); border-radius: 8px;
                 padding: 0.7rem 0.85rem; font-size: 0.92rem;
                 font-family: inherit; margin: 0.2rem 0 0.6rem;
                 max-height: 18rem; overflow: auto; }
.verdicts { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
            border-top: 1px solid var(--line); padding-top: 0.6rem; }
.verdicts .grow { flex: 1; }
.verdicts input[type="text"] { padding: 0.1rem 0.4rem; width: 4rem;
                               margin-right: 0.2rem; }
.verdicts button.on { border-color: var(--accent); background: var(--accent-bg);
                      color: var(--accent); font-weight: 600; }

/* ------------------------------------------------ address priority tiers */
/* A tier is a card whose members are chips: the order of the cards IS the
   send order, so the arrows sit in the card head next to the rank, and the
   local parts wrap freely underneath rather than forcing a table column. */
section.tier { padding-bottom: 0.7rem; }
section.tier .headrow h2 { font-size: 1rem; display: flex; gap: 0.5rem;
                           align-items: center; }
section.tier .headrow .muted { display: flex; gap: 0.35rem; align-items: center;
                               white-space: nowrap; }
.locals { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
          margin-top: 0.55rem; }
/* A chip is the remove button: one click, one target, no hover-only affordance
   hiding the only way to unlist an address. */
.locals form { margin: 0; }
.locals button { font-family: var(--mono, inherit); }
.locals input { padding: 0.2rem 0.5rem; font-size: 0.9rem; }

/* --------------------------------------------------- results detail pane */
/* One line per brand: whether the page LINKED it or only said the word, then
   the exact words the link was made of. The distinction is the whole point of
   the pane, so it is a badge and never a colour alone. */
.rival { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.25rem 0;
         border-bottom: 1px solid var(--line); }
.rival:last-child { border-bottom: none; }
.rival .who { min-width: 9rem; font-weight: 600; }
.rival .anchors { color: var(--sub); flex: 1; min-width: 0; }
.rival .anchors q { font-style: normal; }
/* The overflow anchors stay on the brand's own line: a block <details> would
   push the row to two lines and break the one-line-per-thing rule that holds
   everywhere else. Closed it reads "+24 more"; open it continues the list. */
.rival .moreanch, .rival .moreanch > summary { display: inline; }
.rival .moreanch > summary { color: var(--sub); cursor: pointer; }
.rival .moreanch[open] > summary::after { content: ", "; }

/* Sign in with Google: the button is a link, so it dresses like the form's button. */
a.button.google { display: inline-block; text-decoration: none; }
.login details.pwlogin { margin-top: .75rem; }
.login details.pwlogin summary { cursor: pointer; color: var(--muted, #666); margin-bottom: .5rem; }