`, never a `` wrapping a bare ``,
which Bootstrap paints blue and underlines. */
.crumb {
display: inline-flex; align-items: center; gap: .2rem; margin: 0 0 .3rem;
font-size: .78rem; font-weight: 600; color: var(--text-muted); text-decoration: none;
transition: color var(--transition);
}
.crumb:hover { color: var(--text); }
.crumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.crumb .bi { font-size: .72rem; }
/* ── Form fields ─────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: .85rem; }
.field:last-child { margin-bottom: 0; }
.field-label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .25rem; }
.field-value { float: right; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.field-input {
display: block; width: 100%; padding: .4rem .6rem;
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
background: #fff; color: var(--text); font: inherit; font-size: .8438rem;
transition: border-color var(--transition), box-shadow var(--transition);
}
.field-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.field-input:disabled { background: #f8fafc; color: #64748b; cursor: not-allowed; }
.field-input[type="range"] { padding: 0; border: 0; accent-color: var(--brand); }
.field-note { display: block; margin-top: .25rem; font-size: .72rem; color: var(--text-muted); line-height: 1.4; }
.field-note.lock { display: flex; align-items: center; gap: .35rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--border); }
/* The chosen voice, at the height of every other field on the row. It used to
be a 52px tile with a hint line under the name, which made one field twice
the weight of the control beside it for the sake of saying "click to
listen" — something a chevron says for free. */
.voice-trigger {
display: flex; align-items: center; gap: .5rem;
padding: .4rem .6rem; text-align: left; cursor: pointer;
}
.voice-trigger:hover:not(:disabled) { border-color: #94a3b8; background: #f8fafc; }
#voicePickerName {
flex: 0 1 auto; min-width: 0; overflow: hidden;
font-weight: 650; text-overflow: ellipsis; white-space: nowrap;
}
.voice-trigger-tag {
flex: none; padding: .05rem .4rem; border-radius: 999px;
background: var(--slate-bg); color: var(--text-muted);
font-size: .68rem; font-weight: 600;
}
.voice-trigger-tag:empty { display: none; }
.voice-trigger-arrow { flex: none; margin-left: auto; color: var(--text-muted); font-size: .7rem; }
/* ── The voice dialog ────────────────────────────────────────────────────── */
/* One list, one column, one click. The two gendered columns in a 1180px dialog
were the shape of a comparison, and nobody compares twelve voices — they play
two and pick one. Sex is a filter here rather than a wall, which is also the
only shape that survives a catalogue that says nothing about sex.
Nothing in here names a renderer: more than one sits behind this list, and
which one speaks a voice is a property of the voice, never a question. */
@media (min-width: 576px) { .voice-modal-dialog { max-width: 520px; } }
.voice-modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; }
.voice-modal-content .modal-header { padding: 1.1rem 1.15rem .9rem; background: #f8fafc; }
.voice-modal-content .modal-body { padding: .35rem .65rem .8rem; }
/* Outside the body, so the search and the chips stay put while the list
scrolls under them. */
.voice-filters {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
padding: .7rem 1.15rem; border-bottom: 1px solid var(--border);
}
.voice-search { position: relative; flex: 1 1 180px; min-width: 0; }
.voice-search .bi {
position: absolute; top: 50%; left: .6rem; transform: translateY(-50%);
color: var(--text-muted); font-size: .8rem; pointer-events: none;
}
.voice-search input {
width: 100%; padding: .34rem .6rem .34rem 1.85rem;
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
background: #fff; color: var(--text); font: inherit; font-size: .8125rem;
transition: border-color var(--transition), box-shadow var(--transition);
}
.voice-search input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.voice-search input::-webkit-search-cancel-button { cursor: pointer; }
.voice-chips { display: flex; gap: .25rem; }
.voice-chip {
padding: .26rem .6rem; border: 1px solid var(--border); border-radius: 999px;
background: #fff; color: var(--text-muted);
font-size: .72rem; font-weight: 600; line-height: 1.3; cursor: pointer;
transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.voice-chip:hover { border-color: #94a3b8; color: var(--text); }
.voice-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.voice-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.voice-list { display: flex; flex-direction: column; }
.voice-row {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
gap: .1rem; border-radius: var(--radius-sm);
transition: background-color var(--transition);
}
.voice-row:hover { background: #f8fafc; }
.voice-row.is-selected { background: var(--nav-hover-bg); }
/* The sample leads, because hearing one is what the dialog is for and it is
the only control here that does not close it. */
.voice-sample {
display: inline-grid; place-items: center; width: 30px; height: 30px; margin: .3rem;
border: 1px solid var(--border-strong); border-radius: 50%;
background: #fff; color: #475569; font: inherit; font-size: .75rem; cursor: pointer;
transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.voice-sample:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.voice-sample.is-playing { border-color: var(--ink); background: var(--ink); color: #fff; }
/* A voice we hold no sample for is still a voice, and still choosable. The
dead button says so more honestly than leaving it out of the list did. */
.voice-sample:disabled { opacity: .3; cursor: default; }
.voice-pick {
display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 18px;
align-items: center; gap: .55rem;
min-height: 46px; padding: .2rem .7rem .2rem .1rem;
border: 0; background: none; color: var(--text); text-align: left; cursor: pointer;
}
.voice-pick:focus-visible, .voice-sample:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* A face, not a gender glyph. A ♀ beside a name is a symbol standing where a
person should be, and it said the same thing fourteen times. */
.voice-face { display: block; border-radius: 50%; }
.voice-trigger-face { display: inline-grid; flex: none; }
.voice-trigger-face:empty { display: none; }
.voice-name {
min-width: 0; overflow: hidden;
font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap;
}
.voice-tag { color: var(--text-muted); font-size: .72rem; }
.voice-tick { color: var(--brand); font-size: .9rem; visibility: hidden; }
.voice-row.is-selected .voice-tick { visibility: visible; }
.voice-row.is-selected .voice-name { color: var(--brand); }
.voice-empty { margin: .9rem .5rem; color: var(--text-muted); font-size: .8125rem; text-align: center; }
/* ── A level, not a number ───────────────────────────────────────────────── */
/* Three answers to one ordered question, in one track — slower is left of
faster because the order is real.
Deliberately the same object as the dashboard's date period
(`.period-segments` in overview.css): a pill track, a filled pill for the
answer in force. Two segmented controls in one product that disagree about
what a segmented control looks like is the thing the boss notices first.
Change one and change the other. */
.level-toggle {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .125rem;
padding: .2rem; border: 1px solid var(--border); border-radius: 999px;
background: var(--surface); box-shadow: var(--shadow-sm);
}
.level-btn {
padding: .45rem .75rem; border: 0; border-radius: 999px;
background: none; color: var(--text-muted);
font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.25;
text-align: center; white-space: nowrap; cursor: pointer;
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.level-btn:hover:not(:disabled):not([aria-checked="true"]) { color: var(--text); background: var(--slate-bg); }
.level-btn[aria-checked="true"] {
color: #fff; background: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
}
.level-btn:disabled { cursor: default; }
.level-toggle:has(:disabled) { opacity: .65; }
.level-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 639.98px) {
.voice-modal-content .modal-header { padding: 1rem .9rem .8rem; }
.voice-filters { padding: .7rem .9rem; }
.voice-modal-content .modal-body { padding: .35rem .4rem .8rem; }
.voice-sample { width: 34px; height: 34px; }
}
.btn-x.danger { color: var(--red); border-color: #fecaca; }
.btn-x.danger:hover { background: var(--red-bg); border-color: #fca5a5; color: #991b1b; }
.btn-x:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.row-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
/* ── The two steps ───────────────────────────────────────────────────────── */
/* Still capped, because a message read at 1400px wide is a message nobody
proof-reads. The cap moved out by the width of one sidebar and no further:
what the custom fields take is theirs, not the message's. The numbers earn
their place because the order is real — words, then voice. */
.steps { display: flex; flex-direction: column; gap: 1rem; max-width: 1180px; }
/* The message and the blanks it leaves, side by side. The sidebar is a fixed
column because it holds controls, not prose: letting it grow with the window
would stretch four inputs across a screen and squeeze the only thing on this
page anybody actually reads. */
.write-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.write-main { min-width: 0; padding-right: 1.25rem; }
.write-side { min-width: 0; padding-left: 1.25rem; border-left: 1px solid var(--border); }
/* Under a laptop's width there is no room for two, and the message wins: the
fields go back under it, which is where they were. */
@media (max-width: 1023.98px) {
.write-grid { grid-template-columns: 1fr; }
.write-main { padding-right: 0; }
.write-side {
margin-top: 1.15rem; padding: 1rem 0 0;
border-left: 0; border-top: 1px solid var(--border);
}
}
/* The add affordance at the foot of the list it adds to, dashed so it reads as
the empty next row rather than as a fourth button competing with Publish. */
.add-var {
width: 100%; margin-top: .6rem; justify-content: center;
border-style: dashed; font-size: .8rem; padding: .34rem .7rem;
}
/* A dark bar, so a step reads as a lid on its own card rather than as one more
pale row inside it. The mark, the title and the action sit on one centre
line: the circle used to hang from the top of a single-line heading, which
is the misalignment you see before you can name it. */
.step-head {
display: flex; align-items: center; gap: .65rem;
padding: .8rem 1.15rem;
background: #000; color: #fff;
border-bottom: 1px solid #000;
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
/* On black the mark inverts: one white disc per step, unchanging. What is
still missing is said in words under the header ("Before you can publish"),
so the badge does not have to carry a second state as well. */
.step-no {
flex-shrink: 0; display: inline-grid; place-items: center;
width: 26px; height: 26px; border-radius: 50%;
background: #fff; color: var(--ink);
font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
transition: background-color var(--transition), color var(--transition);
}
.step-no .bi { font-size: .82rem; line-height: 1; }
.step-title { flex: 1 1 auto; min-width: 0; }
.step-title h2 { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.step-title p { margin: .1rem 0 0; font-size: .78rem; color: rgba(255, 255, 255, .68); }
.step-meta { flex-shrink: 0; align-self: center; font-size: .78rem; }
/* A white button on a black bar reads as a hole punched in it. The action
borrows the bar's own surface instead. */
.step-head .btn-x {
background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28);
color: #fff; box-shadow: none;
}
.step-head .btn-x:hover {
background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45);
color: #fff; box-shadow: none;
}
.step-head .btn-x:focus-visible { outline-color: #fff; }
/* Narrow: the title stops competing with its own metadata for the same line.
A three-line heading beside a version pill is worse than two rows. */
@media (max-width: 575.98px) {
.step-head { flex-wrap: wrap; }
.step-title { flex-basis: calc(100% - 26px - .65rem); }
.step-meta { margin-left: calc(26px + .65rem); align-self: flex-start; }
}
/* The head of a section inside a step. */
.sub-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .65rem; }
.sub-head h3 { margin: 0; font-size: .85rem; font-weight: 600; }
.sub-head .btn-x, .sub-head .icon-btn { margin-left: auto; }
.sub-empty { margin: 0; font-size: .8125rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.15rem; }
@media (max-width: 639.98px) { .field-grid { grid-template-columns: 1fr; } }
/* A switch, for a block of settings that is either in play or not at all. It
is not a checkbox: a checkbox is one of several answers to a question, this
is the question. Bootstrap ships one, but its blue is not ours. */
.switch {
display: inline-flex; align-items: center; gap: .55rem; margin: 0;
cursor: pointer; font-size: .8125rem; font-weight: 550; color: var(--text);
}
.switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.switch-track {
position: relative; flex: none; width: 38px; height: 22px;
border-radius: 999px; background: #cbd5e1;
transition: background-color var(--transition);
}
.switch-track::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
transition: transform var(--transition);
}
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch:has(input:disabled) { cursor: default; color: var(--text-muted); }
.switch input:disabled + .switch-track { opacity: .55; }
.dtmf-builder { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.dtmf-builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dtmf-builder-head h3 { margin: 0 0 .2rem; font-size: .875rem; font-weight: 650; }
.dtmf-builder-head p, .dtmf-empty { margin: 0; color: var(--text-muted); font-size: .8125rem; }
.dtmf-empty { margin-top: .8rem; }
/* The keypad, and always all nine keys of it. A key an operator wrote into the
message is found by reading down the column of numbers and typing what it
means beside it; a blank key is a key nobody may press. So there is nothing
to add and nothing to remove, and no dropdown of the digits still free. */
#responseKeys { margin-top: .8rem; }
.dtmf-pad { display: grid; gap: .4rem; max-width: 620px; }
.dtmf-key { display: grid; grid-template-columns: 22px minmax(0, 1fr) 4.5rem; align-items: center; gap: .55rem; }
.dtmf-key label { margin: 0; }
.dtmf-key-no {
display: inline-grid; place-items: center;
width: 22px; height: 22px; border-radius: 50%;
background: #e2e8f0; color: #475569;
font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dtmf-key.is-optout .dtmf-key-no { background: var(--amber-bg); color: var(--amber); }
.dtmf-key-note { grid-column: 2 / -1; font-size: .75rem; color: var(--amber); }
/* Which key takes somebody off the list is a property of a key, so it is a
control on the key's own row and not a second dropdown of the same nine
digits. Quiet until it is on: one of nine rows carries it, and the other
eight must not look like eight buttons waiting to be pressed. */
.key-optout {
justify-self: start; padding: .2rem .55rem; border-radius: 999px;
border: 1px dashed var(--border); background: none; color: var(--text-muted);
font-size: .7rem; font-weight: 600; line-height: 1.35; cursor: pointer;
transition: color var(--transition), background-color var(--transition),
border-color var(--transition);
}
.key-optout:hover:not(:disabled) { color: var(--amber); border-color: var(--amber); }
.key-optout[aria-pressed="true"] {
border-style: solid; border-color: transparent;
background: var(--amber-bg); color: var(--amber);
}
.key-optout:disabled { cursor: default; opacity: .55; }
@media (max-width: 575.98px) {
.dtmf-builder-head { align-items: stretch; flex-direction: column; }
.dtmf-builder-head .switch { align-self: flex-start; }
}
/* A grid of radio cards — "what should it do / say" in a create dialog. Same
shape the `agent` service uses for its own create dialog, on purpose: two
COC products asking the same question should not ask it in two layouts.
The whole card is the target and the input is visually hidden but NOT
`display: none`: it still has to take focus, answer the arrow keys and drive
`:checked`. Removing it from the accessibility tree would leave a group of
choices only a mouse can make.
The note is clamped to two lines. A card whose height is set by the longest
description makes every other card in the row taller for nothing, and the
full text is on the screen the choice leads to. */
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.pick-opt { display: block; margin: 0; cursor: pointer; }
/* Spans the row. Used for the option that is not one of a set — "Blank" beside
four examples — which also keeps an odd count from leaving an orphan cell. */
.pick-opt.wide { grid-column: 1 / -1; }
.pick-opt input {
position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.pick-body {
display: flex; align-items: flex-start; gap: .65rem; height: 100%;
padding: .8rem .85rem;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface);
transition: border-color var(--transition), box-shadow var(--transition),
background var(--transition);
}
.pick-opt:hover .pick-body { border-color: var(--border-strong); background: #fcfdfe; }
.pick-opt input:focus-visible + .pick-body { box-shadow: var(--ring); }
.pick-opt input:checked + .pick-body {
border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
/* The icon tile. Tinted rather than filled: it labels the card, and five
saturated squares in one dialog would compete with the primary button. */
.pick-icon {
flex: none; display: grid; place-items: center;
width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm);
font-size: 1rem;
}
.pick-icon.tone-slate { background: var(--slate-bg); color: #475569; }
.pick-icon.tone-green { background: var(--green-bg); color: var(--green); }
.pick-icon.tone-blue { background: var(--blue-bg); color: var(--blue); }
.pick-icon.tone-amber { background: var(--amber-bg); color: var(--amber); }
.pick-icon.tone-red { background: var(--red-bg); color: var(--red); }
.pick-text { min-width: 0; }
.pick-title { display: block; font-size: .8375rem; font-weight: 600; line-height: 1.3; }
.pick-note {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
margin-top: .15rem; font-size: .75rem; color: var(--text-muted); line-height: 1.4;
}
@media (max-width: 575.98px) { .pick { grid-template-columns: 1fr; } }
/* A create dialog that asks a question with cards in it needs the room for
two of them side by side. Bootstrap's `.modal-dialog` caps at 500px, which
is right for a form and far too narrow for a choice.
Above the 576px breakpoint only: below it Bootstrap already goes near
full-width with its own margins, and a max-width here would fight that. */
@media (min-width: 576px) { .modal-create { max-width: 880px; } }
/* The line under a dialog's title, saying what the dialog is for. One sentence:
a header that needs a paragraph is a dialog asking for too much. */
.modal-sub {
margin: .2rem 0 0; font-size: .8125rem; color: var(--text-muted); line-height: 1.45;
}
/* Bootstrap centres the close button against the title. With a subtitle under
it that puts the X halfway down the header instead of beside the heading. */
.modal-header:has(.modal-sub) { align-items: flex-start; }
/* Section-heading treatment for a field label, matching the create dialogs in
the other COC services. Only where a dialog has real sections — on an
ordinary form it makes every field shout. */
.field-label.caps {
text-transform: uppercase; letter-spacing: .045em;
font-size: .69rem; color: var(--text-muted); margin-bottom: .35rem;
}
/* Every step carries its action in its own head, in one shape. Deliberately
quiet: there is one filled button on this page and it is Publish, so a step
action that shouted would be competing with the only irreversible thing here. */
.step-action { flex-shrink: 0; align-self: center; padding: .32rem .7rem; font-size: .8rem; }
.sub-head .step-action { margin-left: auto; }
/* What is still standing between this draft and a publish. It appears only when
there is something on it, and it sits under the title — within a glance of
the button it disables, which is in the header. */
.blockers {
max-width: 1180px; margin: 0 0 1rem; padding: .8rem .9rem;
border: 1px solid #fde68a; border-radius: var(--radius-sm); background: var(--amber-bg);
}
.blockers-title {
display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem;
font-size: .8125rem; font-weight: 700; color: #92400e;
}
.blockers ul { margin: 0; padding-left: 1.35rem; font-size: .8125rem; color: #92400e; }
.blockers li { margin-top: .15rem; }
/* The insert menu, opened from the { } button on a part. */
.ins-menu { min-width: 240px; max-height: 264px; overflow-y: auto; padding: .3rem; }
.ins-menu .dropdown-item { gap: .5rem; font-size: .8125rem; border-radius: var(--radius-sm); }
.ins-menu .dropdown-item code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .78rem; color: #1e40af;
}
.ins-eg {
margin-left: auto; max-width: 110px; font-size: .72rem; color: var(--text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropdown-empty { margin: 0; padding: .45rem .65rem; font-size: .8125rem; color: var(--text-muted); }
.save-state { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; color: var(--text-muted); }
.save-state .bi-circle-fill { font-size: .5rem; }
.save-state.dirty { color: var(--amber); font-weight: 600; }
.save-state.ok { color: var(--green); }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
/* ── Segments ────────────────────────────────────────────────────────────── */
.seg-list { display: flex; flex-direction: column; gap: .5rem; }
.seg {
display: grid; align-items: start;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "num text tools" "clip clip clip" ". foot foot";
gap: 0 .55rem;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: #fbfcfe; padding: .55rem .6rem;
transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.seg:hover { border-color: var(--border-strong); }
.seg:focus-within { border-color: var(--brand); background: #fff; box-shadow: var(--ring); }
/* The words get their own column, so a long line wraps inside it and never
reaches the buttons. */
.seg-tools { grid-area: tools; display: flex; align-items: center; gap: .1rem; }
/* A narrow screen has no room for three columns: the buttons take the top row
with the number, and the words run the full width underneath. */
@media (max-width: 639.98px) {
.seg {
grid-template-columns: auto 1fr;
grid-template-areas: "num tools" "text text" "clip clip" "foot foot";
gap: .35rem .55rem;
}
.seg-tools { justify-self: end; }
}
/* The part's number, and the size every other disc in a part is cut to — the
play button below it is the same circle in the same column, so the two read
as one edge down the left of the list rather than as two indents. */
.seg-num {
grid-area: num; margin-top: 1px;
display: inline-grid; place-items: center;
width: 22px; height: 22px; border-radius: 50%;
background: #e2e8f0; color: #475569;
font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* No frame, no scrollbar, no drag handle. The part is the frame; the words are
the content of this page and get the largest type on it, at exactly the
height they occupy — the only height at which an operator can check them.
A textarea cannot colour part of its own text, so a backdrop mirrors it and
the textarea's own glyphs go transparent. Nothing scrolls here — the box
grows to fit — which is what makes that safe: no scroll offset to keep in
step, only identical metrics. */
.seg-input { grid-area: text; position: relative; }
.seg-hl, .seg-text {
margin: 0; padding: 0; border: 0;
font: inherit; font-size: .9375rem; line-height: 1.6;
white-space: pre-wrap; overflow-wrap: break-word;
}
.seg-hl {
position: absolute; inset: 0; color: var(--text);
pointer-events: none; user-select: none;
}
.seg-hl .ph { color: var(--brand); font-weight: 600; }
.seg-text {
position: relative; display: block; width: 100%; min-height: 1.6em;
resize: none; overflow: hidden; background: transparent;
color: transparent; caret-color: var(--ink);
}
.seg-text:focus { outline: none; }
.seg-text::placeholder { color: #94a3b8; }
/* Translucent, because the glyphs it covers are painted by the layer below. */
.seg-text::selection { background: rgba(37, 99, 235, .22); }
/* The recording of this part, under the part. Only there once there is one:
hidden, it takes no row, so an un-previewed message is exactly the page it
was before. The dotted rule above it says the words below are not the
operator's — they are what the voice will actually say. */
/* The row starts in the number's own column and carries the grid's column gap,
so the play button lands under the number and the reading under the words it
is a reading of. */
.seg-clip {
grid-area: clip; display: flex; align-items: flex-start; gap: .55rem;
margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--border);
}
.seg-reading {
flex: 1 1 auto; min-width: 0;
font-size: .8125rem; line-height: 1.5; color: var(--text-muted);
}
.seg-len { flex-shrink: 0; font-size: .72rem; padding-top: .15rem; font-variant-numeric: tabular-nums; }
/* The part playing right now. The whole reason the reading sits here is to let
an operator follow the message by ear and by eye at the same time. */
.seg.is-playing { border-color: var(--brand); background: var(--nav-hover-bg); }
.seg.is-playing .clip-play { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg-foot { grid-area: foot; display: flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .72rem; }
.seg-foot:not(:has(> :not([hidden]))) { display: none; }
.seg-foot .seg-count { margin-left: auto; }
.seg-warn { display: inline-flex; align-items: center; gap: .3rem; color: #92400e; }
.seg-count { font-variant-numeric: tabular-nums; }
.seg-list .empty { padding: 2.25rem 1rem; }
.icon-btn {
display: inline-grid; place-items: center; flex-shrink: 0;
width: 26px; height: 26px; border: 0; border-radius: var(--radius-sm);
background: transparent; color: #64748b; font-size: .8rem; cursor: pointer;
transition: background-color var(--transition), color var(--transition);
}
.icon-btn:hover { background: rgba(15,23,42,.06); color: var(--text); }
.icon-btn.danger:hover { background: var(--red-bg); color: var(--red); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* ── Placeholders ────────────────────────────────────────────────────────── */
/* One card per custom field, standing in a column beside the message. It was a
five-column table with a header row naming the controls — which is what a
table of unlabelled inputs needs, and needs the width of five columns to do.
Stacked, the name leads and the rest say what they are in their own
placeholders; the card's frame is what separates one field from the next. */
.var {
display: grid; gap: .35rem;
padding: .55rem .6rem;
border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fbfcfe;
transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.var + .var { margin-top: .45rem; }
.var:hover { border-color: var(--border-strong); }
.var:focus-within { border-color: var(--brand); background: #fff; box-shadow: var(--ring); }
/* The name and its "Unused" chip and its delete share the top line: the name is
what identifies the field, so it is the line you read to find one. */
.var-top { display: flex; align-items: center; gap: .3rem; }
.var-top .var-name-input { flex: 1 1 auto; min-width: 0; }
.var-top .pill { margin-right: 0; flex-shrink: 0; }
/* What it is read as, and an example of it — one question in two halves, so
they stay on one line however narrow the column gets. */
.var-pair { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr); gap: .35rem; }
/* The name is an identifier the renderer substitutes on, not prose — it is set
in the face that shows an underscore for what it is. */
.var-name-input {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .8rem; font-weight: 600; color: #1e40af;
}
.var.is-stale .var-name-input { color: var(--text-muted); }
.var .field-input { font-size: .8rem; padding: .3rem .45rem; }
/* ── Preview player ──────────────────────────────────────────────────────── */
/* Playing one part. The whole message plays from the header — this is the
button beside the reading of a single part, and the only survivor of the
clip list that used to be the page's third step. */
.clip-play {
flex-shrink: 0; display: inline-grid; place-items: center;
width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 50%;
background: #fff; color: #475569; font-size: .68rem; line-height: 1; cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.clip-play:hover { border-color: var(--brand); color: var(--brand); }
.clip-play:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* ── Key/value detail (call detail, Phase 2) ─────────────────────────────── */
/* A finished call is a dozen small facts, most of which are absent most of the
time — an unanswered call has no talk time, a call that never left the ground
has no SIP cause. A definition list is the shape that survives that: rows
that are not there simply are not rendered, and nothing has to hold a column
open for them. */
.kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .35rem .9rem; margin: 0; }
.kv dt { font-size: .78rem; color: var(--text-muted); font-weight: 500; }
.kv dd { margin: 0; font-size: .8125rem; color: var(--text); overflow-wrap: anywhere; }
.kv dd code { font-size: .75rem; }
@media (max-width: 575.98px) { .kv { grid-template-columns: 1fr; gap: 0 0; }
.kv dt { margin-top: .5rem; } }
/* Call detail is one record, not a dashboard. Outcome leads; stable facts and
the optional recipient response follow in the same reading column. */
.call-record { max-width: 920px; }
.call-record > .card-x-body { padding: 1.4rem 1.5rem; }
.call-outcome-block { padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.call-outcome-block h2,
.call-response h2,
.call-problem h2 { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 600; }
.call-outcome-block p,
.call-response p,
.call-problem p { max-width: 68ch; margin: 0; color: #475569; font-size: .875rem; }
.call-record-facts {
display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px minmax(0, 1fr);
gap: .65rem 1rem; margin: 1.25rem 0 0;
}
.call-record-facts dt { color: var(--text-muted); font-size: .78rem; font-weight: 400; }
.call-record-facts dd {
min-width: 0; margin: 0; color: var(--text); font-size: .8438rem;
overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.call-record-facts a { color: var(--text); text-underline-offset: 2px; }
.call-record-facts a:hover { color: var(--brand); }
.call-response,
.call-problem { padding-top: 1.1rem; margin-top: 1.25rem; border-top: 1px solid var(--border); }
.call-problem h2 { color: #b91c1c; }
@media (max-width: 767.98px) {
.call-record-facts { grid-template-columns: 82px minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
.call-record > .card-x-body { padding: 1.1rem; }
}
/* ── Campaign monitor (Phase 3) ──────────────────────────────────────────── */
/* A running campaign is one number an operator watches — how far through it is
— plus the handful of counts that explain the number. The bar is deliberately
plain: it is read at a glance from across a desk, and a striped animated one
would say "working" when a paused campaign is not.
The segments are stacked in the order they matter when something is wrong:
delivered, then everything that will never be delivered. */
.meter { height: 8px; border-radius: 999px; background: var(--slate-bg); overflow: hidden; display: flex; }
.meter span { display: block; height: 100%; }
.meter .m-done { background: var(--green); }
.meter .m-failed { background: var(--red); }
.meter .m-skipped { background: var(--border-strong); }
/* The counts that used to sit in four boxes under the bar now read as a
sentence beside it (`.runline`). Four cards for four integers was the page
telling an operator that each number was a thing to study. */
/* ── Browser surfaces ────────────────────────────────────────────────────── */
/* The parts we did not draw. Selection and the caret were already themed at the
top of this file; the scrollbar was not, and it shows on every table on every
screen. Numerals in a column that is read down get the tabular figures. */
.tbl td.num { font-variant-numeric: tabular-nums; }
@supports selector(::-webkit-scrollbar) {
.tbl-wrap, .ins-menu, .rows-wrap, .modal-body, .rail-body, .pane-body { scrollbar-width: thin; }
:is(.tbl-wrap, .ins-menu, .rows-wrap, .modal-body, .rail-body, .pane-body)::-webkit-scrollbar {
width: 10px; height: 10px;
}
:is(.tbl-wrap, .ins-menu, .rows-wrap, .modal-body, .rail-body, .pane-body)::-webkit-scrollbar-thumb {
background: #d3dbe5; border: 3px solid var(--surface); border-radius: 999px;
}
:is(.tbl-wrap, .ins-menu, .rows-wrap, .modal-body, .rail-body, .pane-body)::-webkit-scrollbar-thumb:hover {
background: #b6c2d1;
}
:is(.tbl-wrap, .ins-menu, .rows-wrap, .modal-body, .rail-body, .pane-body)::-webkit-scrollbar-track {
background: transparent;
}
}
/* ── Selects ─────────────────────────────────────────────────────────────── */
/* A filter that shipped as a bare browser select on three screens. Same metrics
as `.btn-x`, because that is what it sits beside in every card head. */
.select-x {
appearance: none; -webkit-appearance: none;
display: inline-flex; padding: .45rem 2rem .45rem .7rem;
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
background-color: #fff; color: var(--text);
font: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.35;
box-shadow: var(--shadow-xs); cursor: pointer;
background-image: var(--caret);
background-repeat: no-repeat; background-position: right .5rem center; background-size: 15px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.select-x:hover { border-color: #94a3b8; }
.select-x:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* ── The data table's toolbar ────────────────────────────────────────────── */
/* Search on the left and the controls that change the table on the right. It
replaces a row of permanently-open dropdowns,
which took the same width whether anything was filtered or not and read as
"All lists · Active · Everyone" — three controls saying nothing about which
was which. */
/* The bar is BLACK, and that is the one thing every table on this product now
shares by name rather than by coincidence. It began on Campaigns
(`.campaigns-card-head`), where the point was that a white toolbar above a
grey heading row puts the lightest thing on top and makes the heading look
like the toolbar; every list here had the same shape and the same problem,
so the rule moved to the class they all wear.
The colours are `--chrome*`, not new ones: this bar has to be the same black
as the topbar and the rail, or the page wears two blacks. The heading row
under it stays slate — the dark band says "controls", the slate one says
"this is what the columns are", and the rows say themselves. */
.dt-bar {
display: flex; align-items: center; justify-content: flex-start;
gap: .6rem .75rem; flex-wrap: wrap; padding: .7rem 1.15rem;
background: var(--chrome); color: var(--chrome-ink);
border-bottom-color: transparent;
}
/* Only when the bar really is the card's first row. A card that opens with
something else — a panel, a heading — would otherwise have two rounded
shoulders cut into the middle of it. */
.card-x > .dt-bar:first-child { border-radius: var(--radius) var(--radius) 0 0; }
/* Keep search useful without letting a short query field stretch across the
whole card. Every data-table index uses the same readable measure. */
.dt-bar .search {
flex: 1 1 20rem; width: min(100%, 24rem); max-width: 24rem; min-width: 0;
}
.dt-bar .search input { width: 100%; }
/* The controls go dark WITH the bar rather than staying white holes punched in
it. Translucent white, so one rule works whatever sits behind it. */
.dt-bar .search .bi { color: #cbd5e1; }
.dt-bar :is(.search input, .dt-btn) {
background-color: rgba(255,255,255,.07);
border-color: var(--chrome-border);
color: var(--chrome-ink);
box-shadow: none;
}
.dt-bar .search input { color: #fff; caret-color: #fff; }
.dt-bar .search input::placeholder { color: #cbd5e1; }
.dt-bar :is(.search input, .dt-btn):hover {
background-color: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.28);
color: #fff;
}
.dt-bar .dt-btn i { color: var(--chrome-ink-dim); }
.dt-bar .dt-btn:hover i { color: var(--chrome-ink); }
/* A control doing work says so in the one blue that survives on black. */
.dt-bar .dt-btn:is(.is-on, [aria-expanded="true"]),
.dt-bar .dt-btn.is-on i {
color: var(--brand-on-dark); border-color: rgba(79,155,255,.5);
}
.dt-bar :is(.search input, .dt-btn):focus-visible,
.dt-bar .search input:focus {
outline: none;
border-color: var(--brand-on-dark);
box-shadow: 0 0 0 3px rgba(79,155,255,.25);
}
/* "Including archived" — a marker on the bar, in the bar's own vocabulary. */
.dt-bar .archived-marker {
background-color: rgba(255,255,255,.07); border-color: var(--chrome-border);
color: var(--chrome-ink-dim);
}
.dt-bar .archived-marker:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.dt-bar h2 { flex: 0 0 auto; }
/* A phone gets the search on its own row and the tools under it, rather than
five controls squeezed into one line none of them fit. */
@media (max-width: 767.98px) {
.dt-bar .search { flex: 1 1 100%; }
.dt-tools { margin-left: 0; width: 100%; }
.dt-tools > * { flex: 1 1 auto; }
.dt-btn { width: 100%; justify-content: center; }
.dt-btn-text { display: inline; }
}
.dt-tools { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
/* One button for all three: Filter, Columns, and the row-height menu. Quieter
than `.btn-x` — these change the VIEW, and the things that change the DATA
(Add, Import, Export) are in the page header above and have to stay louder. */
.dt-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .42rem .65rem; border: 1px solid var(--border-strong);
border-radius: var(--radius-sm); background: #fff; color: var(--text);
font: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.35;
box-shadow: var(--shadow-xs); cursor: pointer; white-space: nowrap;
transition: border-color var(--transition), background-color var(--transition);
}
.dt-btn:hover { border-color: #94a3b8; background: #fcfdff; }
.dt-btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.dt-btn[aria-expanded="true"] { border-color: var(--brand); }
.dt-btn:disabled { opacity: 1; cursor: default; }
.dt-btn i { font-size: .85rem; color: var(--text-muted); }
.dt-btn.is-on, .dt-btn.is-on i { color: var(--brand); }
/* How many filters are on, or how many columns are showing. The only thing on
screen that says a column is hidden rather than absent. */
.dt-badge {
min-width: 1.05rem; padding: 0 .28rem; border-radius: 999px;
background: var(--brand); color: #fff;
font-size: .68rem; font-weight: 700; line-height: 1.5rem; height: 1.05rem;
display: inline-flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
}
@media (max-width: 575.98px) { .dt-btn-text { display: none; } }
/* The menus behind them. A heading per group, and a tick on what is in use —
a menu of values where nothing is marked is a menu you have to remember. */
.dt-menu { min-width: 12rem; max-width: 20rem; padding: .3rem; }
.dt-menu-head {
padding: .35rem .65rem .2rem; font-size: .68rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.dt-menu .dropdown-item.is-on { color: var(--brand); font-weight: 600; }
.dt-menu .dropdown-item.is-on::after {
content: "\F26E"; font-family: bootstrap-icons; margin-left: auto; font-size: .8rem;
}
.dt-check { width: 100%; cursor: pointer; gap: .55rem; }
.dt-check input { cursor: pointer; }
/* ── A filter, as a chip ─────────────────────────────────────────────────── */
/* It exists only while the filter does, so an unfiltered table has no filter
row at all — and a filtered one says so in a sentence nobody can miss. That
is also the answer to the commonest question about a long list: "where did my
rows go". */
.dt-filters {
display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
padding: .55rem .9rem; border-bottom: 1px solid var(--border);
background: var(--slate-bg);
}
/* NO `overflow: hidden` here, however tempting it is for the rounded ends:
this box CONTAINS the value menu, and clipping it to a 26px pill is a menu
that opens and cannot be seen. The two halves round themselves instead. */
.dt-chip {
display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong);
border-radius: 999px; background: #fff; box-shadow: var(--shadow-xs);
}
.dt-chip > .dropdown:first-child .dt-chip-main {
border-radius: 999px 0 0 999px;
}
.dt-chip:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.dt-chip-main {
display: inline-flex; align-items: center; gap: .32rem;
padding: .25rem .5rem .25rem .7rem; border: 0; background: none;
font: inherit; font-size: .78rem; color: var(--text); cursor: pointer;
}
.dt-chip-main:hover { background: var(--nav-hover-bg); }
.dt-chip-main:focus-visible { outline: none; }
/* The field's name, quiet; the value it is set to, not. "Status: Active" reads
as the sentence rather than as a control with a label bolted to it. */
.dt-chip-main b { font-weight: 600; color: var(--text-muted); }
.dt-chip-main b::after { content: ":"; }
.dt-chip-main > span { font-weight: 600; }
.dt-chip-main i { font-size: .7rem; color: var(--text-muted); }
.dt-chip-x {
display: inline-flex; align-items: center; padding: 0 .45rem 0 .2rem;
border: 0; border-left: 1px solid var(--border); background: none;
border-radius: 0 999px 999px 0;
color: var(--text-muted); cursor: pointer; font-size: .9rem;
}
.dt-chip-x:hover { background: var(--red-bg); color: #b91c1c; }
/* The chip is a flex row, so the menu Popper puts inside it must not become a
third column of it. */
.dt-chip > .dropdown { display: inline-flex; }
.dt-clear {
border: 0; background: none; padding: .25rem .4rem; margin-left: .15rem;
font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-muted);
cursor: pointer; border-radius: var(--radius-sm);
}
.dt-clear:hover { color: var(--text); background: rgba(15,23,42,.06); }
/* ── The bar a selection raises ──────────────────────────────────────────── */
/* What can be done to the rows that are ticked, and it exists only while some
are. It REPLACES the filter head rather than stacking under it: the filters
are how you got this selection and are not what you are about to do to it,
and two rows of controls over a table is how a screen stops being readable.
The count is first because it is the thing to check before pressing any of
the rest. */
.selbar {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
padding: .6rem 1.15rem; border-bottom: 1px solid var(--border);
background: var(--nav-hover-bg);
}
.selbar-count { font-size: .8125rem; font-weight: 700; color: var(--text); }
.selbar-acts { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 640px) {
.selbar-acts { margin-left: 0; width: 100%; }
.selbar-acts .btn-x, .selbar-acts .select-x { flex: 1 1 auto; justify-content: center; }
}
select.field-input {
appearance: none; -webkit-appearance: none; padding-right: 2rem;
background-image: var(--caret);
background-repeat: no-repeat; background-position: right .55rem center; background-size: 15px;
}
select.field-input:disabled { background-image: none; }
/* A quiet inline button that is a link, not a control. Used where a sentence
needs one word to be clickable and a `.btn-x` would shout. */
.lnk {
padding: 0; border: 0; background: none; color: var(--brand);
font: inherit; font-size: inherit; font-weight: 600; cursor: pointer;
text-underline-offset: 2px;
}
.lnk:hover { text-decoration: underline; }
.lnk:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
/* ── The two-column workspace ────────────────────────────────────────────── */
/* Settings on the left, the list on the right. The list is the page: it is what
an operator is actually working on, and the settings are five answers they
give once. The rail sticks, so the button that creates the campaign is
reachable from anywhere in a list of three hundred people. */
.work { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 991.98px) { .work { grid-template-columns: 1fr; } }
/* `.card-x + .card-x` gives a stacked card its 1rem of air. Inside a grid the
two are side by side, and that margin was pushing the right column 16px lower
than the left one — the misalignment reads as a broken layout. */
.work > .card-x + .card-x { margin-top: 0; }
.rail-body { padding: 1.05rem; }
/* A label and its control on one line. The prose that used to sit under every
field is now one `?` beside the label — the explanation still ships, it just
stops being 60% of the screen. */
.rail-row { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; }
.rail-row + .rail-row { border-top: 1px solid #f1f4f8; }
.rail-l { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .3rem;
font-size: .8125rem; color: #475569; }
.rail-c { flex: 0 0 auto; width: 124px; }
.rail-row .help { width: 17px; height: 17px; font-size: .62rem; }
.rail-sep { margin: .85rem 0 .7rem; border: 0; border-top: 1px solid var(--border); }
.rail-h {
margin: 0 0 .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: #94a3b8;
}
.rail .field { margin-bottom: .75rem; }
.rail .field-label { display: flex; align-items: center; gap: .3rem; }
.rail .field-label .help { width: 17px; height: 17px; font-size: .62rem; }
.pane { display: flex; flex-direction: column; min-width: 0; }
.pane-head {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
padding: .7rem 1.05rem; border-bottom: 1px solid var(--border);
}
.pane-head h2 { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; }
.pane-head .page-actions { margin-left: auto; }
.pane-body { padding: 1.05rem; min-width: 0; }
/* ── The drop zone ───────────────────────────────────────────────────────── */
/* The first thing on an empty pane, and the whole of it: one target, two
buttons, one line about what the file needs. */
.dz {
display: grid; place-items: center; gap: .1rem; padding: 2.6rem 1rem;
border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
background: #fbfcfe; text-align: center; cursor: pointer;
transition: border-color var(--transition), background-color var(--transition);
}
.dz:hover { border-color: #94a3b8; background: #f8fafc; }
.dz.is-over { border-color: var(--brand); background: var(--nav-hover-bg); }
.dz:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dz .bi { font-size: 1.6rem; color: #94a3b8; }
.dz-title { margin: .45rem 0 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.dz-acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: .9rem 0 0; }
.dz-note { margin: .9rem 0 0; font-size: .78rem; color: var(--text-muted); }
.dz-note code {
padding: .03rem .3rem; border-radius: 4px; background: var(--blue-bg); color: #1e40af;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem;
}
/* ── The imported file ───────────────────────────────────────────────────── */
/* What the file was, what matched, and — only when something did not — the one
question that fixes it. The mandatory "map every column" screen is gone: with
two fixed fields and placeholder names the customer already has in their
template, matching by name succeeds almost every time, and a grid of selects
that always says the right thing is a form nobody should have to submit. */
.csvbar {
margin-bottom: .85rem; padding: .6rem .75rem;
border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fbfcfe;
}
.csvbar-file { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; }
.csvbar-file .bi-filetype-csv { color: var(--green); font-size: 1rem; }
.csvbar-file b { font-weight: 600; }
.csvbar-file .lnk { margin-left: auto; font-size: .78rem; }
.csvbar-note { margin: .25rem 0 0; font-size: .75rem; color: var(--text-muted); }
.csvbar-ask {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--border);
font-size: .8125rem; color: #92400e;
}
.csvbar-ask + .csvbar-ask { margin-top: .4rem; padding-top: .4rem; }
.csvbar-ask .bi { color: var(--amber); }
.csvbar-ask select { width: auto; min-width: 160px; margin-left: auto; }
.csvbar .rmap { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border); }
/* Which CSV column is which. Selects under the names the file actually carries,
so the operator maps by reading across rather than by guessing. */
.rmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: .55rem .8rem; }
.rmap label { display: block; min-width: 0; margin: 0; }
.rmap .field-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── The recipient grid ──────────────────────────────────────────────────── */
/* An editable table, not a form per row: the operator is transcribing a list,
and what makes that bearable is that the columns line up and Tab goes right.
A paste from a spreadsheet fills the grid, which is why there is no separate
place to paste one. */
.coll-tools {
display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.coll-n { font-size: .8125rem; font-weight: 600; margin-right: auto; font-variant-numeric: tabular-nums; }
.rows-wrap {
max-height: min(52vh, 440px); overflow: auto;
border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.rgrid { min-width: 480px; }
.rhead, .rrow { display: grid; grid-template-columns: var(--rcols); align-items: stretch; }
.rhead {
position: sticky; top: 0; z-index: 1; background: var(--slate-bg);
border-bottom: 1px solid var(--border);
}
.rhead span {
padding: .42rem .6rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: #64748b; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.rhead span.req::after { content: "*"; margin-left: .15rem; color: var(--red); }
.rrow + .rrow { border-top: 1px solid var(--border); }
.rrow.is-bad { background: #fffafa; }
.rcell { position: relative; min-width: 0; border-left: 1px solid var(--border); }
.rcell:first-child { border-left: 0; }
.rcell input {
display: block; width: 100%; padding: .42rem .6rem; border: 0; border-radius: 3px;
background: transparent; color: var(--text); font: inherit; font-size: .8125rem;
}
.rcell input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--brand); }
.rcell input::placeholder { color: #a8b4c4; }
/* The CELL, not the row. Colouring five values red for one missing amount tells
an operator to check all five. */
.rcell.is-bad input { color: #991b1b; }
.rrow .icon-btn { align-self: center; justify-self: center; width: 24px; height: 24px; }
/* ── The tally ───────────────────────────────────────────────────────────── */
/* Counts first, then the rows that need attention — never more than a handful of
those: three hundred identical complaints is not a list anybody reads. */
.tally {
display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
margin: .8rem 0 0; font-size: .8125rem; color: var(--text-muted);
}
.tally-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.tally-ok { color: #15803d; }
.tally-bad { color: #991b1b; }
.tally-sep { color: #cbd5e1; }
.problems {
margin: .6rem 0 0; padding: .65rem .8rem;
border: 1px solid #fecaca; border-radius: var(--radius-sm); background: var(--red-bg);
}
.problems ul { margin: 0; padding-left: 1.2rem; font-size: .8125rem; color: #991b1b; }
.problems li { margin-top: .12rem; }
.problems code {
padding: .03rem .28rem; border-radius: 4px; font-size: .78rem;
background: rgba(153,27,27,.09); color: #7f1d1d;
}
/* ── The API note ────────────────────────────────────────────────────────── */
.coll-api { margin: 1rem 0 0; font-size: .8125rem; }
.coll-api.open { padding-top: 1rem; border-top: 1px solid var(--border); }
.code-x {
margin: 0; padding: .8rem .9rem; overflow-x: auto;
border: 1px solid #1e293b; border-radius: var(--radius-sm); background: #0f172a;
color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .78rem; line-height: 1.6; tab-size: 2;
}
.code-x .k { color: #7dd3fc; }
.code-x .s { color: #bef264; }
.code-x ::selection { background: rgba(125,211,252,.28); color: #f8fafc; }
.code-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.code-head .btn-x { margin-left: auto; }
/* ── Placeholder chips ───────────────────────────────────────────────────── */
.chips { display: flex; align-items: center; gap: .28rem; flex-wrap: wrap; }
.chip {
display: inline-flex; align-items: center; gap: .25rem;
padding: .08rem .42rem; border: 1px solid #bfdbfe; border-radius: 999px;
background: var(--blue-bg); color: #1e40af;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .7rem; font-weight: 600;
}
.chip.optional { border-color: var(--border); background: var(--slate-bg); color: #64748b; }
/* A segment chip is the same pill, but it is a LINK: the way from a person to
the list that will call them, and back. Bootstrap underlines every anchor,
which on a pill this small reads as a strikethrough. */
a.chip { text-decoration: none; }
a.chip:hover, a.chip:focus-visible { border-color: #60a5fa; }
/* An archived segment still shows on a contact — a membership that exists has
to be visible, or a campaign's audience count looks wrong for no reason —
but it is not a list anything will be called from, so it reads as grey. */
.chip.archived { border-color: var(--border); background: var(--slate-bg); color: #64748b; }
.settings-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-actions-end { justify-content: flex-end; }
/* "Including archived", and it is a MARKER rather than a control: it appears
only when the archive is folded in — which happens by following the rail's
Archived link, not by anything on this page — and clicking it is the way
out. A page showing archived rows has to say so; a page that is not should
not spend a control saying it could. */
.archived-marker {
border-color: var(--border-strong); background: var(--slate-bg); color: #64748b;
cursor: pointer; gap: .3rem;
}
.archived-marker:hover { color: var(--ink); border-color: var(--ink); }
.archived-marker .bi-x { font-size: .95rem; opacity: .75; }
/* Progress in a table cell: a bar the width of a thumbnail and the two numbers
beside it. The bar alone cannot say 7 of 8 apart from 700 of 800, and the
numbers alone need reading rather than glancing. */
.list-progress { display: grid; grid-template-columns: 84px auto; align-items: center; gap: .5rem; }
.list-progress .meter { height: 6px; }
.list-progress-n {
font-size: .78rem; color: var(--text-muted);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The campaign list's own columns.
Everything structural about this table — the sideways scroll, the sticky
head, the frozen first column, the sticky action cell — is the shared data
table's now (`.dt-scroll`, `assets/js/table.js`), because it was written
here first and then wanted on every other list. What is left is what is
true about THESE columns and nothing else, and it is written against the
column classes rather than a table class: the chooser can fold any of them
away, so a rule that depended on where a column sits would be a rule that
moves.
One fact per column, and nothing stacked inside one. Two lines in a cell
stops the eye reading DOWN a column — which is the only thing a table is
better at than a list of cards — so the template, the number it calls from,
how far it got and when it went out are four columns, not two cells with a
second line each. */
.tbl :is(th, td):is(.cmp-template, .cmp-phone, .cmp-when) { white-space: nowrap; }
/* Six campaign facts and its actions fit the card on desktop. Fixed layout
lets the bounded columns win over a long template name instead of making
the whole table wider than the viewport. */
.campaigns-page .tbl { table-layout: fixed; }
.campaigns-page .tbl .cmp-name-col { width: 17%; }
.campaigns-page .tbl .cmp-template { width: 15%; }
.campaigns-page .tbl .cmp-phone { width: 14%; }
.campaigns-page .tbl .cmp-progress { width: 14%; }
.campaigns-page .tbl .cmp-status { width: 15%; }
.campaigns-page .tbl .cmp-when { width: 15%; }
/* Only the unpredictable template name truncates. Phone, Status and Started
are operational facts and stay complete. */
.campaigns-page .tbl .cmp-template {
overflow: hidden; text-overflow: ellipsis;
}
.campaigns-page .tbl :is(th, td).row-act { width: 5rem; padding-left: .25rem; padding-right: .65rem; }
.campaign-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .2rem; }
/* The name is the one cell that can outgrow its column, and it truncates
rather than wrapping: a two-line name sets the height of every row beside
it, and the full name is one hover away.
Archived is the OTHER axis (`campaigns.status`), so its chip rides beside
the name rather than in the Status column, where it would be claiming to be
a seventh state. The row is a flex line so the chip keeps its width and the
name gives way — `.row-title` is a block everywhere else in the product, and
a block would drop the chip onto a second line, which is the thing this
table is not allowed to do. */
.cmp-id { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.cmp-id .row-title {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-id .pill { flex: none; margin: 0; }
.tbl td.cmp-phone { font-variant-numeric: tabular-nums; color: var(--text-muted); }
/* The template is a link, and it underlines on hover rather than always: ten
underlined names down a column is the loudest thing in a table whose rows
are ALL clickable anyway. */
.cmp-template a { text-decoration: none; }
.cmp-template a:is(:hover, :focus-visible) {
text-decoration: underline; text-underline-offset: 2px;
}
.cmp-progress .list-progress { grid-template-columns: 56px auto; gap: .45rem; }
/* The one row that is changing while it is being looked at. The pill already
pulses; this is what makes it findable in a list of twenty without reading
any of them. */
.tbl .row-link.is-live td:first-child {
box-shadow: inset 3px 0 0 var(--green);
}
/* A phone scrolls the page — that is what a phone does. Boxing the list into a
short window inside a document that scrolls anyway gives two scrollbars and
no more rows. */
@media (max-width: 767.98px) {
.campaigns-page .tbl { min-width: 720px; }
main.app-content.page-fill { height: auto; padding-bottom: 3rem; }
.page-fill > .card-x.fill,
.page-fill > .card-x.fill > .card-x-body { display: block; }
main.app-content.report-page { min-height: calc(100dvh - var(--topbar-h)); overflow: visible; }
.report-page > section:not([hidden]),
.report-page > section:not([hidden]) > .card-x,
.report-page > section:not([hidden]) > .card-x > .card-x-body { display: block; }
.report-page #runsView .tbl { table-layout: auto; min-width: 760px; }
}
/* Progress without a card around it. One bar, the counts beside it, and the
money underneath — the shortest form of the only question a running campaign
is asked. */
.runbar {
display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, auto);
align-items: center; gap: 1.5rem; min-height: 92px;
margin: 1.15rem 0 1.25rem; padding: 1rem 0;
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.run-meter-block { align-self: center; }
.run-meter-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
margin-bottom: .55rem; font-size: .78rem; color: var(--text-muted);
}
.run-meter-head strong { font-size: .8125rem; color: var(--text); }
.runbar .meter {
height: 14px; border: 1px solid #dbe3ec;
box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
}
.run-details { align-self: center; }
.run-details .runline:first-child { margin-top: 0; }
.run-details #ledger { color: var(--text-muted); }
.runline {
display: flex; align-items: baseline; gap: .35rem 1.15rem; flex-wrap: wrap;
margin: .6rem 0 0; font-size: .8125rem; color: var(--text-muted);
}
.runline b { font-size: .9375rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.runline .rl { display: inline-flex; align-items: baseline; gap: .3rem; }
.runline .rl.dim b { color: var(--text-muted); }
.runline .rl-right { margin-left: auto; }
@media (max-width: 767.98px) {
.runbar { grid-template-columns: 1fr; gap: .8rem; }
}
/* Which set of calls the campaign screen is showing. A campaign used once has
nothing to choose between, so this is absent far more often than it is
present — it sits above the progress bar and stays out of the way. */
.sendbar {
display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
margin: 1.15rem 0 -.35rem; font-size: .8125rem; color: var(--text-muted);
}
.sendbar .select-x { max-width: 24rem; }
.sendbar .field-note { margin: 0; }
.response-report { margin-bottom: 1rem; }
.response-report .card-x-head { align-items: center; }
.response-report .card-x-head p { margin: .18rem 0 0; color: var(--text-muted); font-size: .78rem; }
.response-track { display: flex; width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: var(--slate-bg); }
.response-segment { min-width: 2px; height: 100%; }
.response-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1.25rem; margin-top: .8rem; }
.response-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; padding: .55rem 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; }
.response-item:hover .response-name { text-decoration: underline; text-underline-offset: 3px; }
.response-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.response-swatch { width: 8px; height: 8px; border-radius: 50%; }
.response-item strong { font-variant-numeric: tabular-nums; }
.response-item > :last-child, .response-key { color: var(--text-muted); font-size: .75rem; }
.response-key { grid-column: 2; }
.tone-0 { background: #2563eb; } .tone-1 { background: #0f766e; }
.tone-2 { background: #7c3aed; } .tone-3 { background: #c2410c; }
.tone-4 { background: #be123c; } .tone-5 { background: #64748b; }
.response-cell { display: inline-flex; flex-direction: column; line-height: 1.25; }
.response-cell small { color: var(--text-muted); font-size: .72rem; }
@media (max-width: 575.98px) {
.response-report .card-x-head { align-items: stretch; flex-wrap: wrap; }
.response-report .card-x-head .btn-x { justify-content: center; width: 100%; }
.response-legend { grid-template-columns: 1fr; }
}
/* Campaign confirmations are centred decisions with one clear consequence.
Bootstrap owns focus trapping and escape handling; the app owns the voice. */
.confirm-content { border: 0; border-radius: var(--radius); box-shadow: 0 22px 60px rgba(15,23,42,.22); }
/* Bootstrap's h5 default is 20px/500, which reads as a page heading that has
wandered into a dialog. A question this short is a label: smaller, heavier,
ink rather than the body colour. */
.confirm-content .modal-header { padding: 1.15rem 1.25rem .45rem; border-bottom: 0; }
.confirm-content .modal-title { color: var(--ink); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.011em; }
/* The close is the least important control in the box - it is the same answer
as Back, which is already a button under it. It stops competing with the
title for the top line. */
.confirm-content .btn-close { width: .7em; height: .7em; opacity: .4; }
.confirm-content .btn-close:hover { opacity: .75; }
.confirm-content .modal-body { padding: 0 1.25rem 1.25rem; }
/* No `max-width` here, deliberately. A 48ch cap inside a 500px dialog left the
sentence ending two thirds of the way across while the table under it ran
the full width - three different right edges down one narrow column. The
dialog IS the measure: 500px of 14px Inter is about 66 characters. */
.confirm-message { margin: 0; color: var(--text-muted); font-size: .875rem; line-height: 1.55; }
/* The before/cost/after of a button that spends credit. The last row is the
answer, so it is the one that is allowed to be loud. */
.confirm-ledger { margin: .95rem 0 0; padding: .55rem .85rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--slate-bg); }
.confirm-ledger .ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: .3rem 0; font-size: .875rem; }
.confirm-ledger dt { margin: 0; color: var(--text-muted); font-weight: 400; }
.confirm-ledger dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.ledger-hint { margin-left: .4rem; color: var(--text-muted); font-size: .75rem; opacity: .85; }
.confirm-ledger .is-total { margin-top: .3rem; padding-top: .5rem; border-top: 1px solid var(--border-strong); }
.confirm-ledger .is-total dt { color: var(--ink); font-weight: 600; }
.confirm-ledger .is-total dd { color: var(--ink); font-size: 1.0625rem; font-weight: 700; }
.confirm-ledger .err dd { color: var(--red); }
.confirm-note { margin: .7rem 0 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }
.confirm-content .modal-footer { padding: .35rem 1.25rem 1.15rem; border-top: 0; }
.confirm-content [data-confirm].danger { background: var(--red); border-color: var(--red); color: #fff; }
.confirm-content [data-confirm].danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
/* ── Pager ───────────────────────────────────────────────────────────────── */
.pager {
display: flex; align-items: center; gap: .5rem;
padding: .6rem 1.15rem; border-top: 1px solid var(--border);
font-size: .78rem; color: var(--text-muted);
}
.pager .page-actions { margin-left: auto; }
.pager strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Numbered paging. One row of discs: jump to an end, step by one, or land on a
page you can see. The current page is the only filled thing in the row, so it
needs no second signal — no border, no weight change, no colour code. */
.pages { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.pg {
display: inline-grid; place-items: center;
min-width: 30px; height: 30px; padding: 0 .35rem;
border: 0; border-radius: 999px; background: transparent;
color: var(--text-muted); font: inherit; font-size: .8125rem; font-weight: 600;
font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer;
transition: background-color var(--transition), color var(--transition);
}
.pg:hover:not(:disabled):not(.is-current) { background: var(--slate-bg); color: var(--text); }
/* `:not(.is-current)` is load-bearing. The current page is a disabled button —
there is nowhere to go — and without this it faded the one filled disc in the
row to 30% grey, which read as "this page is unavailable". */
.pg:disabled:not(.is-current) { opacity: .3; cursor: default; }
.pg:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pg.is-current { background: var(--ink); color: #fff; cursor: default; }
.pg.gap { min-width: 18px; color: var(--border-strong); cursor: default; }
/* Under 480px the numbers go and the four arrows stay: on a phone the useful
move is one step or an end, not landing on page six of nine. */
@media (max-width: 479.98px) {
.pager { flex-wrap: wrap; }
.pg.num, .pg.gap { display: none; }
.pg.is-current { display: inline-grid; }
}
/* ── Search ──────────────────────────────────────────────────────────────── */
.search { position: relative; display: inline-flex; }
.search .bi {
position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
font-size: .8rem; color: #94a3b8; pointer-events: none;
}
.search input {
width: 190px; padding: .42rem .6rem .42rem 1.8rem;
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
background: #fff; color: var(--text); font: inherit; font-size: .8125rem;
transition: border-color var(--transition), box-shadow var(--transition);
}
.search input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
@media (max-width: 575.98px) { .search, .search input { width: 100%; } }
/* The full-width form, for a search that is the only control on its row. */
.search.block { display: flex; width: 100%; }
.search.block input { width: 100%; }
/* ── Reveal ──────────────────────────────────────────────────────────────── */
/* The one authored moment on these screens: a panel that was not there arrives
from where it will live rather than fading in from nowhere. */
.reveal { animation: reveal .22s cubic-bezier(.16,1,.3,1); }
@keyframes reveal { from { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }
/* ── The developer screen ─────────────────────────────────────────────────── */
/* A permission list is read top to bottom, not scanned across: each line is a
thing a key would be allowed to do, and the machine name beside it is what
the customer's developer will grep the docs for. `.check` alone is inline,
which is right beside a field and wrong for a list of eight. */
.check-list { display: grid; gap: .4rem; }
.check-list .check { align-items: flex-start; }
.check-list .check input { margin-top: .2rem; }
.check-list code { font-size: .72rem; color: var(--text-muted); }
/* ── Custom fields ───────────────────────────────────────────────────────── */
/* A contact's custom fields are a set of named values, and the plan is explicit
that ordinary users must never be shown raw JSON for them. So they are rows:
a name, a value, and one button to take the row away. Two columns rather than
a table because the header would say "Name" and "Value" and the placeholders
already do. */
.cf-list { display: grid; gap: .4rem; }
.cf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: .4rem; }
.cf-row .field-input { font-size: .8125rem; }
@media (max-width: 575.98px) {
.cf-row { grid-template-columns: minmax(0, 1fr) auto; }
.cf-row .field-input:nth-child(2) { grid-column: 1 / -1; }
}
/* ── Import counts ───────────────────────────────────────────────────────── */
/* What an import did, as five numbers in a row. It is the whole answer to
"what just happened to my four thousand rows", so it is the first thing on
the screen after the upload and it does not go away until the panel is
closed — a toast that vanished would take the only report with it. */
.tallies { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
.tally {
flex: 1 1 5.5rem; padding: .5rem .65rem; border: 1px solid var(--border);
border-radius: var(--radius-sm); background: var(--slate-bg);
}
.tally b { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tally span { font-size: .72rem; color: var(--text-muted); }
.tally.is-warn { border-color: #fcd34d; background: #fffbeb; }
.tally.is-warn b { color: #92400e; }
/* A file that is on its way up. The drop zone stays visible — it is where the
result appears — but stops inviting a second file while the first is being
read. */
.dz.is-busy { pointer-events: none; opacity: .55; }
/* ── The review workspace ────────────────────────────────────────────────── */
/* The mirror of `.work`: the thing being built on the left, the answer about it
on the right. Campaign settings are five questions with a list beside them,
so the questions are the rail; a run is a SELECTION with a verdict beside it,
so the verdict is the rail — and a verdict belongs after the thing it is
about, which on a narrow screen is the only reading order there is. */
.work-rev { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 991.98px) { .work-rev { grid-template-columns: 1fr; } }
/* One grid cell holding two stacked cards. The Run screen needs it because the
rail beside them is sticky, and `position: sticky` only works against the
grid itself — so the left column's cards cannot be direct children too. */
.work-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
/* Sticks, so the count and the button that acts on it stay on screen while an
operator scrolls a list of two hundred segments.
`top` clears the TOP BAR, which is itself sticky at `top: 0` and 56px tall:
at `top: 1rem` the rail pinned underneath it and the bar covered the first
40px of the card — which is the verdict number, the one thing on this screen
that must never be half visible.
And it is capped to what is left of the viewport, with the body scrolling
inside it. A rail is only as tall as its exclusions, so a selection with six
reasons for leaving people out grew past the fold and took the Start button
with it — a sticky panel whose action cannot be reached is not sticky. The
verdict stays put at the top of the card and the detail under it scrolls. */
@media (min-width: 992px) {
.work-rev > .rail {
position: sticky; top: calc(var(--topbar-h) + 1rem);
max-height: calc(100vh - var(--topbar-h) - 2rem);
display: flex; flex-direction: column;
}
/* `min-height: 0` or the flex item refuses to shrink and overflows anyway. */
.work-rev > .rail > .rail-body { overflow-y: auto; min-height: 0; }
}
/* The verdict itself: one number the size of a decision, then its unit.
`flex: 0 0 auto` because the rail is a flex column that may be capped to the
viewport: without it the number is what gets squeezed. */
.verdict { flex: 0 0 auto; padding: 1.05rem; border-bottom: 1px solid var(--border); }
.verdict-n {
display: block; font-size: 2.1rem; font-weight: 800; line-height: 1.05;
letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.verdict-u { font-size: .8125rem; color: var(--text-muted); }
.verdict.is-empty .verdict-n { color: var(--text-muted); }
/* ── A choice of two or three, as one control ────────────────────────────── */
/* Deliberately NOT called `.seg`: in this product a segment is already a
message part AND a saved audience rule, and a third meaning on the same word
is exactly how those two got confused (`docs/LISTS_AND_SEGMENTS.md` §2).
It replaces a `