/* ============================================================
Front surface — sidebar + content.
Separate from app.css (the engine reads light/teal/Inter).
============================================================ */
:root {
/* One size for every action button. Measured before this existed, the front
carried six button heights: 20.8 (.cal-run-* icons), 25 (.row-btn/.mtab),
27 (.modal-x/.dd-btn), 29 (.side-foot button), 37 (.btn-quiet/
.auth-submit) and 40 (.fab). The block at the end of this file applies
these three to all of them but the chip icons and .mtab. */
--btn-h: 32px;
--btn-px: 14px;
--btn-font: 13px;
/* ---- palette, from the brand guide (kit:12-15) ----
void #0a0507 . coal #120a0d . ash #1c1013 . line #271619
blood #e10e24 . ember #ff2e42 . scar #7a0a15
bone #ede6e4 . smoke #8a7a7d . dim #4a3d41 . amber #ffb02e . mint #3ad46a
The kit's own names are added as aliases at the end of this block; the
app's names keep their meaning so every existing rule still resolves. */
--bg: #060305;
--side-bg: #120a0d;
/* Page gradient. --bg stays the flat mid-tone the linear layer passes
through, so anything still reading var(--bg) matches the middle of the
ramp instead of clashing with it. */
--bg-red: #100407;
--bg-black: #020101;
/* Glass surfaces. backdrop-filter samples whatever is painted behind the
element, so every surface using these must stay translucent - give one an
opaque background and the blur becomes a no-op with no error anywhere. */
/* Glass surfaces. backdrop-filter samples whatever is painted behind the
element, so every surface using these must stay translucent - give one an
opaque background and the blur becomes a no-op with no error anywhere.
Retinted off the guide's coal/ash rather than neutral grey. */
--glass: rgba(28, 16, 19, .58);
--glass-deep: rgba(18, 10, 13, .66);
--glass-strong: rgba(18, 10, 13, .84);
--glass-line: #271619;
--glass-blur: blur(14px) saturate(140%);
--glass-blur-sm: blur(8px) saturate(130%);
/* For the one surface that overlays moving content rather than the page
gradient. Measured at --glass-strong (.82) with the 14px blur: the terms
list scrolling underneath stayed legible through the bar, so a row of
search terms read across "Back" and the step label. .94 still left a
readable ghost, hence .975 - the blur and the gradient tint still show,
but nothing behind it competes with the two controls. */
--glass-veil: rgba(10, 5, 7, .975);
--glass-blur-lg: blur(22px) saturate(140%);
/* ---- palette, from the brand guide (kit:12-15) ----
void #0a0507 . coal #120a0d . ash #1c1013 . line #271619
blood #e10e24 . ember #ff2e42 . scar #7a0a15
bone #ede6e4 . smoke #8a7a7d . dim #4a3d41 . amber #ffb02e . mint #3ad46a
The app's token NAMES are kept and only their values change, so all 335
rules in this file keep resolving and no selector has to move. */
--modal-bg: #0f090b;
--panel: #120a0d;
--panel-2: #1c1013;
--line: #271619;
--line-soft: #1d1013;
--text: #ffffff;
/* Not a straight lift of the guide's smoke/dim onto these two names. Both
carry information here - --mute paints .who, the second line of every list
row - and measured against --panel #120a0d the guide's dim #4a3d41 gives
1.89:1, under WCAG AA's 4.5:1 for body text and under 3:1 for large.
These two clear it: 6.44:1 and 4.80:1. The guide's own #4a3d41 is kept
below as --faint, for the decorative micro-labels it uses it for. */
--dim: #a2908f;
--mute: #8a7a7d;
--faint: #9a8d90;
--accent: #e10e24;
--accent-lit:#ff2e42;
--accent-bg: rgba(225, 14, 36, .11);
--ok: #3ad46a;
--ok-bg: rgba(58, 212, 106, .12);
--warn: #ffb02e;
--warn-bg: rgba(255, 176, 46, .12);
--bad: #ff2e42;
--bad-bg: rgba(255, 46, 66, .12);
/* The guide's own names, for rules written against it directly. */
--void: #0a0507; --coal: #120a0d; --ash: #1c1013;
--blood: #e10e24; --ember: #ff2e42; --scar: #7a0a15;
--bone: #ffffff; --smoke: #8a7a7d; --amber: #ffb02e; --mint: #3ad46a;
/* kit:23 puts Chakra Petch on headings and control labels; kit:19 puts
JetBrains Mono on body copy. The names stay so the ~30 rules that
reference them do not move. */
--ui: "Chakra Petch", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
--side-w: 264px;
/* The guide is square: 2px on controls, 0 on surfaces (kit:83, :91, :141). */
--radius: 2px;
/* Corners for the two things a reader treats as objects: the section panel
and the button. Separate from --radius (2px), which is a hairline used on
small chrome like the terminal's bottom bar and would read as a square
corner at panel size. */
--radius-panel: 10px;
--radius-btn: 8px;
--scroll-thumb: #1c1013;
--scroll-thumb-hover: #7a0a15;
}
/* ============================================================
Scrollbars - front.css owns these. front_base.html loads only this sheet,
so the ::-webkit-scrollbar rules in app.css never reach a front page and
every scroll area here was drawing the platform default.
============================================================ */
/* The standard properties, for engines with no ::-webkit-scrollbar. Guarded by
@supports rather than declared outright: Chromium implements BOTH, and when
scrollbar-width is set it stops honouring the ::-webkit-* sizing and draws its
own thin bar. Measured before the guard - the bar came back 10px wide against
the 8px declared below, and every other webkit rule here was inert with it. */
@supports not selector(::-webkit-scrollbar) {
* {
scrollbar-width: thin;
scrollbar-color: var(--scroll-thumb) transparent;
}
}
::-webkit-scrollbar { width: 8px; height: 8px; }
/* Transparent, not a colour: these sit on --panel, --panel-2 and the terminal's
#0A0A0A, and one track colour would be wrong against two of the three. */
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--scroll-thumb);
border-radius: 999px;
/* Inset by a transparent border so the thumb does not touch the content
edge. background-clip keeps the border from painting the thumb colour. */
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
/* Both axes meeting; without this the corner keeps the platform grey. */
::-webkit-scrollbar-corner { background: transparent; }
* { box-sizing: border-box; }
body {
margin: 0;
/* Two layers: a red glow off the top-left corner, over a linear ramp that
runs dark-red to black. fixed attachment sizes both to the viewport, so
the ramp does not stretch with page height or restart when the content
grows - a 1148px page and a 3878px one look the same.
min-height keeps the gradient covering the viewport on a short page,
where body would otherwise be only as tall as its content. */
background:
radial-gradient(1100px 620px at 10% -8%, rgba(225, 14, 36, .12), transparent 62%),
linear-gradient(158deg, var(--bg-red) 0%, var(--bg) 46%, var(--bg-black) 100%);
background-attachment: fixed, fixed;
min-height: 100vh;
color: var(--text);
/* Body copy is the mono face (kit:19); headings and controls take --ui,
now Chakra Petch, through the rules that already name it. */
font-family: var(--mono);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* ============ circuit surface ========================================== */
/* One copy of the artwork, referenced by both layers below. The traces are
drawn in the accent red inside the svg rather than drawn white and tinted
from css: an svg used as a background-image cannot be recoloured by the
page, so the colour has to be baked in. No `#` appears in the data uri -
rgb() is used instead - because `#` would have to be percent-encoded there. */
:root {
--circuit: url("data:image/svg+xml,");
}
/* These ride HTML's pseudo-elements, not body's: body::before carried the
engraved wordmark (removed 2026-09-04, see the note below)
and body::after is the scanline veil (:170), both already taken. front.css
sets no rule on `html` itself, so html's own `background` stays unset and
body's gradient still propagates to the canvas - which is what the negative
z-indexes below are measured against. A pseudo-element does not change that
propagation; only a background on html itself would.
Painting order, all negative so all above the canvas and below every in-flow
box: -3 static traces, -2 pulse, -1 the word. */
html::before,
html::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image: var(--circuit);
background-repeat: repeat;
background-size: 240px 240px;
}
html::before {
z-index: -3;
opacity: .05;
}
/* The pulse is the same traces at a higher opacity, revealed only through a
narrow band that travels. The MASK moves, not the background - so the board
stays put and the light runs along fixed copper, rather than the whole
circuit sliding across the page. */
html::after {
z-index: -2;
/* .2, not the .4 this started at: at .4 the lit band read as a bright swath
across the page rather than something glimpsed behind the word. */
opacity: .2;
-webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 26%, #000 50%, transparent 74%, transparent 100%);
mask-image: linear-gradient(115deg, transparent 0%, transparent 26%, #000 50%, transparent 74%, transparent 100%);
-webkit-mask-size: 55% 140%;
mask-size: 55% 140%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: -60% 0;
mask-position: -60% 0;
animation: circuit-flow 22s linear infinite;
}
/* Undersized-image arithmetic - the same the removed sgen-shine used, and the
only remaining user of it: at mask-size 55% the offset
is P * 0.45 * width, so P increasing moves the band RIGHT. Outside the mask
image there is no mask at all, which masks the element out completely - that
is what confines the glow to the band instead of lighting the whole board.
Sweeps over the first 65% of 22s, then holds off-frame, so it reads as an
occasional pass rather than a strobe. */
@keyframes circuit-flow {
0% { -webkit-mask-position: -60% 0; mask-position: -60% 0; }
65% { -webkit-mask-position: 160% 0; mask-position: 160% 0; }
100% { -webkit-mask-position: 160% 0; mask-position: 160% 0; }
}
/* Parked mid-board rather than off-frame, so the traces keep a lit section
with nothing travelling. */
@media (prefers-reduced-motion: reduce) {
html::after {
animation: none;
-webkit-mask-position: 50% 0;
mask-position: 50% 0;
}
}
/* The engraved SGEN wordmark that used to sit here is gone, removed on
request 2026-09-04: this is not an SGEN-branded surface. It was a
body::before carrying content: "SGEN", a body.auth-body::before that
recentred it on /login, a max-width:720px recentring, the sgen-shine and
sgen-light keyframes that drove it, and a prefers-reduced-motion block
that parked it. All of it went together - nothing else animated with
those two keyframes, and no template names any of it.
The circuit surface above (html::before / html::after) is NOT part of
this and stays: it carries no mark, only texture. */
/* The guide's scanline veil (kit:20). pointer-events:none, so it intercepts
nothing - every click still reaches the control underneath, which is why it
can be added without touching a single handler. */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .16) 3px 4px);
mix-blend-mode: multiply;
opacity: .35;
}
/* Headings take the display face (kit:23). */
h1, h2, h3, h4 { font-family: var(--ui); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; border-radius: 4px; }
/* ---------------- shell ---------------- */
.shell { display: flex; min-height: 100vh; }
/* ---------------- sidebar ---------------- */
.side {
width: var(--side-w);
flex: none;
/* Translucent, not var(--side-bg): an opaque panel here would cut a flat
216px column out of the gradient down the whole left edge. The black wash
keeps it readable as its own surface while the ramp continues under it. */
background: rgba(7, 7, 7, .55);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-right: 1px solid var(--glass-line);
padding: 22px 14px;
display: flex;
flex-direction: column;
gap: 26px;
}
/* Brand lockup, ported from the kit's sidebar head
(reputation-ui-kit.html:33-38 for the rules, :351-353 for the markup).
The glyph is two pseudo-element borders on one 26px box - one square, one
rotated 45deg at .55 - so it needs no image and no svg, and it recolours
with --blood like everything else.
Deviation from the kit: padding stays `0 10px` rather than the .sb-head
20px. .nav-item sets padding: 8px 10px at :267 and the later .nav-item at
:2250 does not override it, so 10px is what the nav labels below actually
sit at and the glyph's left edge lines up with them.
.brand-name sets no font-family, so it inherits the body face (--mono, :95
= JetBrains Mono) exactly as the kit's .sb-name inherits from the kit body.
Note this is NOT the nav's face: .nav-item:2251 switches those to --ui
(Chakra Petch). The wordmark follows the kit, not its neighbours. */
.brand {
display: flex;
align-items: center;
gap: 12px;
padding: 0 10px;
}
/* The mark itself. Replaced the kit's static rotated-square glyph
(reputation-ui-kit.html:33-36) with a wireframe globe; the markup and all of
the geometry are in templates/_brand.html.
The colour is set ONCE here and the svg paints with currentColor, so the
whole mark retints from this one line and carries no hex of its own. */
.brand-glyph {
width: 26px;
height: 26px;
flex: none;
color: var(--blood);
}
.globe { display: block; width: 100%; height: 100%; overflow: visible; }
/* The two SOLID shapes are scoped `.globe .g-*` on purpose. The group rule
below is `.globe circle`, which is (0,1,1) - a bare `.g-sat` at (0,1,0)
loses to it and computes fill:none/stroke:blood, i.e. the satellite draws as
a hollow ring and the disc as a second circle straight on top of the rim.
The descendant form is (0,2,0) and wins. */
.globe .g-disc,
.globe .g-sat {
fill: currentColor;
stroke: none;
}
/* non-scaling-stroke pins every line to device px. Without it a 30-unit
viewBox drawn into 26px would multiply each width by .867 and the whole
wireframe would render sub-pixel and muddy. It also holds the meridians at
constant weight while scaleX squeezes them - a plain scaled stroke thins out
as the ellipse collapses. */
.globe circle,
.globe ellipse {
fill: none;
stroke: currentColor;
vector-effect: non-scaling-stroke;
}
.g-disc {
opacity: .1;
animation: brand-pulse 4.2s ease-in-out infinite;
}
.g-rim { stroke-width: 1; }
.g-par { stroke-width: .75; opacity: .45; }
.g-mer {
stroke-width: .9;
opacity: .7;
/* fill-box, so `center` is the ellipse's own centre (15,15) and not the
origin of the user space. */
transform-box: fill-box;
transform-origin: center;
animation: brand-mer 5.4s linear infinite;
}
/* Negative delays start mid-cycle on the FIRST frame; a positive delay would
stack all three on top of each other until the offsets elapsed. One third of
5.4s apart puts them at even longitudes. */
.g-mer-b { animation-delay: -1.8s; }
.g-mer-c { animation-delay: -3.6s; }
.g-orbit {
transform-box: view-box;
transform-origin: 50% 50%;
animation: brand-orbit 7.2s linear infinite;
}
/* One cycle is a HALF turn: it ends on scaleX(-1), which renders identically
to scaleX(1) for an ellipse centred on its own origin, so the loop repeats
with no jump frame. The intermediate stops are cos() sampled every 22.5deg -
interpolating straight from 1 to -1 would give a triangle wave, which reads
as a line bouncing rather than a meridian turning. */
@keyframes brand-mer {
0% { transform: scaleX(1); }
12.5% { transform: scaleX(.924); }
25% { transform: scaleX(.707); }
37.5% { transform: scaleX(.383); }
50% { transform: scaleX(0); }
62.5% { transform: scaleX(-.383); }
75% { transform: scaleX(-.707); }
87.5% { transform: scaleX(-.924); }
100% { transform: scaleX(-1); }
}
@keyframes brand-orbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes brand-pulse {
0%, 100% { opacity: .1; }
50% { opacity: .04; }
}
/* Frozen, not hidden: the three meridians park at three different widths, so
the mark still reads as a globe with nothing moving. */
@media (prefers-reduced-motion: reduce) {
.g-disc, .g-mer, .g-orbit { animation: none; }
.g-disc { opacity: .1; }
.g-mer-b { transform: scaleX(.66); }
.g-mer-c { transform: scaleX(.33); }
}
.brand-name {
font-weight: 700;
letter-spacing: .28em;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
}
.brand-name span { color: var(--ember); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
display: block;
padding: 8px 10px;
border-radius: 6px;
font-size: 13.5px;
color: var(--dim);
transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--ash); color: var(--text); }
.nav-item.is-active {
background: var(--accent-bg);
color: var(--accent-lit);
font-weight: 500;
}
/* ---------------- content ---------------- */
.content {
flex: 1;
min-width: 0;
padding: 32px clamp(24px, 3vw, 40px) 44px;
}
/* The dashboard is the only page that opts into the rail (body.has-rail), so
this centres ITS column vertically without touching the other five pages.
`safe center` centres the stack when it is shorter than the viewport and
falls back to top-alignment the moment it is taller, so a full dashboard is
never pushed off the top of the screen. */
body.has-rail .content {
display: flex;
flex-direction: column;
justify-content: safe center;
}
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.page-head h1 { font-size: 19px; font-weight: 600; margin: 0 0 3px; letter-spacing: -.01em; }
.page-head p { font-size: 13.5px; color: var(--dim); margin: 0; }
.action {
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
border-radius: 6px;
white-space: nowrap;
transition: background .12s;
}
.action:hover { background: var(--accent-lit); }
/* ---------------- stat cards ---------------- */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
gap: 16px;
margin-bottom: 22px;
}
.stat {
background: var(--glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-line);
border-radius: var(--radius);
padding: 14px 16px 16px;
min-width: 0;
}
.stat .k {
font-size: 10.5px;
letter-spacing: .085em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 8px;
}
/* Which SOURCE a tile's number came from, on the tile itself.
"Logged in" and "Session held" are two different measurements of the same
question and they disagree by three accounts, so each says where it got its
figure rather than leaving an operator to guess which to believe. Lower
contrast and no letter-spacing: it qualifies the label, it is not a second
label. */
.stat .k-sub {
letter-spacing: 0;
text-transform: none;
opacity: .62;
font-style: italic;
}
.stat .v {
font-size: 27px;
font-weight: 600;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.stat .v.is-pending { color: var(--mute); }
/* ---------------- panels ---------------- */
.panel {
background: var(--glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-line);
border-radius: var(--radius);
margin-bottom: 22px;
overflow: hidden;
}
.panel > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 20px;
}
.panel > header h2 { font-size: 13.5px; font-weight: 600; margin: 0; }
.tag {
font-family: var(--mono);
font-size: 10.5px;
color: var(--mute);
border: 1px solid var(--line);
border-radius: 999px;
padding: 2px 9px;
white-space: nowrap;
}
.rows { border-top: 1px solid var(--line-soft); }
.row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 13px 20px;
border-bottom: 1px solid var(--line-soft);
font-size: 13.5px;
}
.row:last-child { border-bottom: 0; }
.row .label { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
/* .who now LEADS the log line rather than trailing it (_raillog.html:269), so
it is an identifier being scanned down a column, not an afterthought. --mute
was chosen when it sat at the end; at the head of the line it needs to be
separable from the message without out-shouting it, and it must not wrap -
a two-line email would break the one-line-per-entry rule. --dim clears WCAG
AA at 6.44:1 against --panel (see the palette note at the top of this file). */
.row .label .who {
color: var(--dim);
font-weight: 600;
white-space: nowrap;
}
.row.is-empty { color: var(--mute); justify-content: flex-start; }
/* count + time badges */
.badge {
font-family: var(--mono);
font-size: 11.5px;
min-width: 30px;
text-align: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid transparent;
flex: none;
font-variant-numeric: tabular-nums;
}
.badge.ok { color: var(--ok); background: var(--ok-bg); border-color: rgba(63,185,80,.28); }
.badge.warn { color: var(--warn); background: var(--warn-bg); border-color: rgba(210,153,34,.28); }
.badge.bad { color: var(--bad); background: var(--bad-bg); border-color: rgba(248,81,73,.28); }
.badge.flat { color: var(--mute); border-color: var(--line); }
/* A warm-up context that carries no category: recorded before the column
existed, or the labelling call failed. Dashed so the Topics column does
not present raw free text as though it were a category. */
.badge.flat.is-raw { border-style: dashed; opacity: .75; font-style: italic; }
/* ---------------- footnote ---------------- */
.note {
font-size: 12px;
font-style: italic;
color: var(--mute);
margin: 0;
}
/* ---------------- narrow ---------------- */
@media (max-width: 720px) {
.shell { flex-direction: column; }
.side {
width: auto;
border-right: 0;
border-bottom: 1px solid var(--line-soft);
flex-direction: row;
align-items: center;
gap: 14px;
padding: 12px 14px;
overflow-x: auto;
}
.side nav { flex-direction: row; gap: 4px; }
.nav-item { white-space: nowrap; }
}
/* placeholder nav entries: present, not linked, not focusable */
.nav-item.is-soon {
color: var(--faint);
cursor: default;
}
.nav-item.is-soon:hover { background: transparent; color: var(--faint); }
.tag[data-state="up"] { color: var(--ok); border-color: rgba(63,185,80,.28); }
.tag[data-state="down"] { color: var(--bad); border-color: rgba(248,81,73,.28); }
/* ============================================================
Sign-in
============================================================ */
.auth-body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 24px;
}
.auth-card {
width: 100%;
max-width: 360px;
background: var(--glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-line);
border-radius: var(--radius);
padding: 28px 26px 26px;
}
.auth-brand { padding: 0; margin-bottom: 22px; }
.auth-card h1 {
font-size: 18px;
font-weight: 600;
margin: 0 0 4px;
letter-spacing: -.01em;
}
.auth-sub {
font-size: 13px;
color: var(--dim);
margin: 0 0 20px;
}
.auth-error {
font-size: 13px;
color: var(--bad);
background: var(--bad-bg);
border: 1px solid rgba(248, 81, 73, .28);
border-radius: 6px;
padding: 9px 12px;
margin-bottom: 16px;
}
.auth-field { display: block; margin-bottom: 14px; }
.auth-field span {
display: block;
font-size: 12px;
color: var(--dim);
margin-bottom: 6px;
}
.auth-field input {
width: 100%;
background: var(--coal);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--text);
font-family: var(--ui);
font-size: 14px;
padding: 9px 11px;
}
.auth-field input:focus {
outline: none;
border-color: var(--accent);
}
.auth-submit {
width: 100%;
margin-top: 6px;
background: var(--accent);
color: #fff;
border: 0;
border-radius: 6px;
font-family: var(--ui);
font-size: 14px;
font-weight: 500;
padding: 10px;
cursor: pointer;
transition: background .12s;
}
.auth-submit:hover { background: var(--accent-lit); }
/* signed-in identity + sign out, shown in the front sidebar */
.side-foot {
margin-top: auto;
padding: 0 10px;
font-size: 12px;
color: var(--mute);
}
.side-foot .who {
display: block;
overflow-wrap: anywhere;
margin-bottom: 8px;
}
.side-foot button {
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--dim);
font-family: var(--ui);
font-size: 12px;
padding: 6px 10px;
cursor: pointer;
width: 100%;
transition: border-color .12s, color .12s;
}
.side-foot button:hover { border-color: var(--accent); color: var(--accent-lit); }
/* ============================================================
Front settings: forms and user rows
============================================================ */
.hidden { display: none !important; }
.form-body { padding: 16px; border-top: 1px solid var(--line-soft); }
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0 14px;
}
.auth-field em {
font-style: normal;
color: var(--mute);
}
.field-note {
font-size: 12px;
color: var(--mute);
margin: -6px 0 14px;
}
.check-line {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
color: var(--dim);
margin-bottom: 16px;
cursor: pointer;
}
.check-line input { accent-color: var(--accent); width: 14px; height: 14px; }
/* Seven day toggles on one row. Deliberately NOT wrapped in .auth-field: that
block's descendant rules reach everything inside it and both hit these -
.auth-field input (:413) put width:100%, a border, a background and
padding:9px 11px on each 14px checkbox, and .auth-field span (:406) forced
display:block plus a 6px bottom margin on every day label. */
.day-picker {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 14px;
}
/* Full width, so it sits on its own line above the row of chips. */
.day-picker .day-lbl {
width: 100%;
margin: 0 0 2px;
font-size: 12px;
color: var(--dim);
}
.day-chip { cursor: pointer; }
/* Taken off-screen rather than display:none, which would drop the box out of
the tab order and out of the label's implicit association with it. */
.day-chip input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.day-chip span {
display: block;
min-width: 44px;
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--ui);
font-size: 12px;
font-weight: 500;
color: var(--dim);
text-align: center;
transition: border-color .12s, color .12s, background .12s;
}
.day-chip:hover span { border-color: var(--mute); color: var(--text); }
.day-chip input:checked + span {
border-color: var(--accent);
background: var(--accent-bg);
color: var(--accent-lit);
}
/* The input is off-screen, so keyboard focus has to be shown on the chip or it
lands nowhere visible. */
.day-chip input:focus-visible + span {
border-color: var(--accent-lit);
box-shadow: 0 0 0 2px var(--accent-bg);
}
/* min-width:150px removed: it made "Close" 72px wide next to "New schedule
this day" at 171px in the same modal footer, which is the one width mismatch
left once the heights match. Buttons hug their text instead. */
.form-submit { width: auto; margin-top: 0; }
.form-submit:disabled { opacity: .55; cursor: default; }
/* user rows */
.row-tail {
display: flex;
align-items: center;
gap: 8px;
flex: none;
}
.row-note { font-size: 12px; color: var(--mute); }
.row-btn {
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--dim);
font-family: var(--ui);
font-size: 12px;
padding: 4px 10px;
cursor: pointer;
transition: border-color .12s, color .12s;
}
.row-btn:hover { border-color: var(--bad); color: var(--bad); }
/* .row-btn had no disabled rule, so a button carrying the disabled attribute
rendered identically to a live one - same colour, still cursor:pointer from
the base rule, and the hover above still fired. Every .row-btn that uses the
attribute (Generate, Clear, Back, Next, Stop) looked clickable while inert. */
/* Destructive row action. .row-btn's own hover already turns --bad, so this
only carries the resting state that tells the two apart before hover. */
.row-btn.is-danger { border-color: rgba(248, 81, 73, .38); color: var(--bad); }
/* .is-danger existed only for .row-btn, so the edit card's Delete button
(front_accounts.html:816) carried the class and rendered as an ordinary
quiet button - a destructive control that looked identical to Cancel. */
.btn-quiet.is-danger { border-color: rgba(248, 81, 73, .38); color: var(--bad); }
.btn-quiet.is-danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.row-btn.is-danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.row-btn:disabled { opacity: .45; cursor: default; }
.row-btn:disabled:hover { border-color: var(--line); color: var(--dim); }
/* ============================================================
Section-19 settings mock components.
Same structure as the dossier mock (mtabs/mock-panel/mset/mtog/
mchk/mchip/pill), re-tokenised onto the front palette so the page
stays one theme instead of importing the dossier's.
============================================================ */
.mtabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin: 0 0 16px;
border-bottom: 1px solid var(--line);
padding-bottom: 10px;
}
.mtab {
font-family: var(--mono);
font-size: 11.5px;
padding: 4px 10px;
border-radius: 6px;
color: var(--dim);
border: 1px solid transparent;
background: transparent;
white-space: nowrap;
cursor: pointer;
transition: color .12s, border-color .12s, background .12s;
}
.mtab:hover { color: var(--text); }
.mtab.on {
color: var(--accent-lit);
border-color: var(--accent);
background: var(--accent-bg);
}
.mock-panel {
border: 1px solid var(--glass-line);
border-radius: var(--radius);
background: var(--glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
padding: 18px 20px;
margin-bottom: 18px;
}
.mock-panel .ph {
font-weight: 600;
font-size: 13.5px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.mset {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 9px 0;
border-bottom: 1px dashed var(--line);
}
.mset:last-of-type { border-bottom: 0; }
.mtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mset .lbl { font-size: 13px; color: var(--text); }
.mset .sub { font-size: 11.5px; color: var(--mute); }
/* toggle */
.mtog {
width: 32px; height: 18px;
border-radius: 999px;
position: relative;
flex: none;
border: 1px solid var(--line);
background: var(--coal);
cursor: pointer;
padding: 0;
transition: background .14s, border-color .14s;
}
.mtog::after {
content: "";
position: absolute;
top: 1px; left: 1px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--mute);
transition: left .14s, background .14s;
}
.mtog.on { background: var(--ok-bg); border-color: var(--ok); }
.mtog.on::after { left: 15px; background: var(--ok); }
.mtog[aria-disabled="true"] { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) {
.mtog, .mtog::after { transition: none; }
}
/* checkbox */
.mchk {
width: 17px; height: 17px;
border-radius: 4px;
border: 1px solid var(--line);
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: transparent;
background: var(--coal);
cursor: pointer;
padding: 0;
}
.mchk.on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
/* chips */
.mchip {
font-family: var(--ui);
font-size: 12px;
font-weight: 500;
padding: 4px 11px;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--dim);
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.mchip:hover { color: var(--text); }
.mchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mock-flex { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* rows, pills, notes */
.mock-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
padding: 9px 0;
border-bottom: 1px solid var(--line-soft);
}
.mock-row:last-of-type { border-bottom: 0; }
.mock-row .grow { flex: 1; min-width: 0; }
.pill {
font-family: var(--mono);
font-size: 10.5px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--mute);
white-space: nowrap;
}
.pill.g { color: var(--ok); border-color: rgba(63,185,80,.32); background: var(--ok-bg); }
.pill.a { color: var(--warn); border-color: rgba(210,153,34,.32); background: var(--warn-bg); }
.pill.r { color: var(--bad); border-color: rgba(248,81,73,.32); background: var(--bad-bg); }
.mock-note {
font-size: 11.5px;
color: var(--mute);
margin-top: 10px;
font-style: italic;
}
.tag {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .05em;
padding: 2px 7px;
border-radius: 5px;
border: 1px solid;
white-space: nowrap;
text-transform: uppercase;
}
.t-no { color: var(--bad); border-color: rgba(248,81,73,.45); background: var(--bad-bg); }
.mgone .lbl { text-decoration: line-through; color: var(--mute); }
.mock-select {
border: 1px solid var(--glass-line);
border-radius: 6px;
background: rgba(255, 255, 255, .04);
backdrop-filter: var(--glass-blur-sm);
-webkit-backdrop-filter: var(--glass-blur-sm);
color: var(--text);
font-family: var(--mono);
font-size: 12px;
padding: 5px 8px;
flex: none;
}
.save-state {
font-family: var(--mono);
font-size: 11px;
color: var(--mute);
}
/* ============================================================
All-settings table
============================================================ */
.tbl-wrap { overflow-x: auto; }
/* The accounts roster is the one table whose row count is unbounded - 45 rows
today, and it grows every time a batch is imported. Left alone it stretches
the page and the toolbar/pagination scroll off the bottom, so the controls
that change the page are only reachable after scrolling past the rows they
control. Cap the viewport and scroll INSIDE it; the header stays put so the
twelve columns remain identifiable at any scroll depth.
Scoped to .acct-tbl-wrap, not .tbl-wrap: the import preview and the delete
list on the same page set their own inline max-height and must not inherit
this one. */
.acct-tbl-wrap { max-height: 60vh; overflow-y: auto; }
.acct-tbl-wrap thead th {
position: sticky;
top: 0;
z-index: 2;
/* thead is transparent by default, so rows would show through it while
scrolling. --panel is the surface this table already sits on; --card does
NOT exist in this stylesheet and would have silently fallen back to a
hardcoded white, breaking the dark theme. */
background: var(--panel);
}
table.stbl {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
table.stbl th {
text-align: left;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mute);
font-weight: 400;
padding: 0 12px 9px 0;
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
table.stbl td {
padding: 9px 12px 9px 0;
border-bottom: 1px dashed var(--line);
vertical-align: top;
}
table.stbl tr:last-child td { border-bottom: 0; }
table.stbl td.k {
font-family: var(--mono);
color: var(--text);
white-space: nowrap;
}
table.stbl td.v {
font-family: var(--mono);
color: var(--dim);
overflow-wrap: anywhere;
max-width: 340px;
}
table.stbl td.v.empty { color: var(--mute); font-style: italic; }
table.stbl td.v.masked { color: var(--warn); letter-spacing: .12em; }
table.stbl td.n { width: 1%; white-space: nowrap; }
/* warm-up progress bar */
.prog-track {
height: 6px;
border-radius: 999px;
background: var(--coal);
border: 1px solid var(--line);
overflow: hidden;
margin-top: 10px;
}
.prog-fill {
height: 100%;
background: var(--warn);
transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) { .prog-fill { transition: none; } }
.auth-submit.danger { background: var(--bad); }
.auth-submit.danger:hover { background: #ff6a62; }
/* account picker inside the warm-up form (mirrors warmup.html's scroll box) */
.picker {
max-height: 220px;
overflow-y: auto;
border: 1px solid var(--glass-line);
border-radius: 6px;
background: var(--glass-deep);
backdrop-filter: var(--glass-blur-sm);
-webkit-backdrop-filter: var(--glass-blur-sm);
}
.picker-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11px;
border-bottom: 1px solid var(--line-soft);
font-size: 13px;
cursor: pointer;
}
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: var(--panel-2); }
.picker-row input { accent-color: var(--accent); flex: none; }
.picker-email { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.picker-empty { padding: 12px; font-size: 13px; color: var(--mute); }
/* ============================================================
Floating action button + modal
============================================================ */
.fab {
position: fixed;
right: clamp(18px, 3vw, 34px);
bottom: clamp(18px, 3vw, 30px);
z-index: 40;
display: flex;
align-items: center;
gap: 8px;
background: var(--accent);
color: #fff;
border: 0;
border-radius: 999px;
font-family: var(--ui);
font-size: 13.5px;
font-weight: 500;
padding: 12px 18px;
cursor: pointer;
/* Sits over the panel background, so it carries its own elevation. */
box-shadow: 0 6px 20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .05);
transition: background .12s, transform .12s;
}
.fab:hover { background: var(--accent-lit); transform: translateY(-1px); }
.fab:active { transform: translateY(0); }
.fab .fab-plus { font-size: 17px; line-height: 1; margin-top: -1px; }
/* The modal is display:none until .is-open, so the markup can live in the
page without the backdrop swallowing clicks while it is shut. */
.modal {
position: fixed;
inset: 0;
z-index: 50;
display: none;
align-items: flex-start;
justify-content: center;
padding: clamp(16px, 6vh, 64px) 16px;
overflow-y: auto;
background: rgba(0, 0, 0, .78);
}
.modal.is-open { display: flex; }
.modal-card {
width: 100%;
max-width: 620px;
/* OPAQUE ON PURPOSE. --glass-strong is rgba(18,10,13,.84) over a blur, so the
card's effective background was whatever sat behind it: the same white text
measured 19.73:1 over the page's own #060305 and washed out over a bright
table row, which is why "hard to read" was reported for popups and not for
the pages under them. #0f090b IS that dark composite, so nothing changes
over a dark page - the ratio just stops depending on the page. */
background: var(--modal-bg);
border: 1px solid var(--glass-line);
border-radius: var(--radius);
box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
/* margin:auto keeps a short card centred and a tall one scrollable from
the top, which align-items:center alone cannot do. */
margin: auto;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--line-soft);
}
.modal-head h2 {
font-size: 14px;
font-weight: 600;
margin: 0;
letter-spacing: -.01em;
}
.modal-body { padding: 20px; }
.modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--line-soft);
}
.modal-x {
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--dim);
font-family: var(--ui);
font-size: 15px;
line-height: 1;
padding: 5px 9px;
cursor: pointer;
}
.modal-x:hover { border-color: var(--accent); color: var(--accent-lit); }
/* ---- wide, two-column modal layout: is-wide / modal-2col / modal-side ----
The base .modal-card above (:1396) caps at 620px, sized for a short
confirm dialog. A long form - the account edit card, #acctModal - has no
room to spread out under that cap and ends up one tall scrolling column.
is-wide raises the cap for cards that opt in; modal-2col and modal-side
arrange .modal-body's direct children into columns once there is room,
both collapsing to one column under 760px. Same fixed/proportional
two-track pattern as .lst-split (:2714 as of this write) - grid + gap
instead of margins, min-width:0 so a long value can't force a track
wider than the grid gives it. */
.modal-card.is-wide { max-width: 980px; }
/* No separate breakpoint needed here: .modal-card's own width:100%
(:1397, untouched) already resolves the used width against .modal's
content box before max-width caps it, so below 980px the card already
fills the available width - the same reason the base 620px card never
needed one either. */
.modal-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* 220px is a fixed rail, not a fraction, so the sidebar reads as a nav or
label column rather than competing for width with the main area.
minmax(0, 1fr) on the second track stops a long value (an email, a URL)
from overflowing the grid the way a bare 1fr can. */
.modal-side {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 16px;
}
@media (max-width: 760px) {
.modal-2col,
.modal-side {
grid-template-columns: 1fr;
}
}
/* One column of fields inside either layout above. min-width:0 lets it
shrink inside its grid track instead of forcing the track wider - same
reason .lst-main/.lst-side get it at :2721. gap, not margin-bottom per
field, keeps spacing consistent regardless of what the column holds. */
.modal-col {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
/* .auth-field carries its own 14px margin-bottom (:827) for the
single-column forms it was built for; inside .modal-col that would
stack with the gap above and double the space between fields. Zeroed
for this context only - .auth-field itself is unchanged everywhere
else it's used. */
.modal-col > .auth-field { margin-bottom: 0; }
/* Small uppercase heading marking a group of fields within a column. Same
microcaps treatment as .field-label (:2602), sized down and coloured
--mute - measured 4.85:1 on --modal-bg - since it names a section of
the form rather than one field. */
.modal-col-head {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mute);
margin: 0;
}
.btn-quiet {
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--dim);
font-family: var(--ui);
font-size: 14px;
font-weight: 500;
padding: 9px 16px;
cursor: pointer;
}
.btn-quiet:hover:not(:disabled) { border-color: var(--mute); color: var(--text); }
/* .btn-quiet was only ever on modal Cancel buttons, which never carry the
disabled attribute, so it had no disabled rule - the same gap the
.row-btn:disabled pair above closes. Save as job DOES use the attribute
(it is disabled until an account is ticked), and without these it kept
cursor:pointer and still lit up on hover while inert. */
.btn-quiet:disabled { opacity: .55; cursor: default; }
.btn-quiet:disabled:hover { border-color: var(--line); color: var(--dim); }
/* Same skin as .auth-field input, plus the bits only a textarea needs. */
.auth-field textarea {
width: 100%;
background: var(--coal);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--text);
font-family: var(--ui);
font-size: 14px;
line-height: 1.5;
padding: 9px 11px;
resize: vertical;
min-height: 76px;
}
.auth-field textarea:focus { outline: none; border-color: var(--accent); }
/* Description under a business name in the list. */
.biz-desc {
font-size: 12.5px;
color: var(--dim);
margin: 0 0 4px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--line);
overflow-wrap: anywhere;
white-space: pre-wrap;
}
/* body.modal-open freezes the page behind the card so a scroll gesture
over the backdrop moves the modal, not the list underneath it. */
body.modal-open { overflow: hidden; }
/* The dialog window.rdConfirm builds (static/confirm.js). Above .modal's
z-index 50 at :1382, because one caller - the recreate-profile check in
front_preparation.html - opens it while that page's account modal is still
on screen, and an equal z-index would put it behind. */
.modal.rd-confirm { z-index: 60; }
.rd-confirm .modal-card { max-width: 460px; }
/* One line of the message. .modal-body's padding is the only spacing when the
body is empty, so it is dropped in that case rather than left as a gap. */
.rd-confirm-line {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.5;
color: var(--dim);
}
.rd-confirm-line:last-child { margin-bottom: 0; }
.rd-confirm-body:empty { display: none; }
/* A fixed button floats over whatever scrolls beneath it, so a list that sits
under one reserves its height plus its offset at the end. Measured without
this rule: scrolled to the bottom, the last panel's lower edge (902px) fell
inside the button's band (878-918px), which puts a one-line panel's own
buttons underneath it. 88px clears the tallest case - the 40px button plus
its 30px bottom offset. */
.fab-pad { padding-bottom: 88px; }
/* One location's four fields inside the edit modal, repeated per location. */
.loc-edit {
border-top: 1px solid var(--line-soft);
padding-top: 12px;
margin-top: 14px;
}
.loc-edit-head {
font-size: 12px;
font-weight: 500;
color: var(--dim);
margin-bottom: 10px;
}
/* Generated-comment rows on Jobs step 3. A comment is a paragraph, so it gets
its own full-width line under the address instead of sharing the row with
it: .row is a centred flex line and .row-tail is flex:none, neither of
which a paragraph can live in without overflowing the panel. */
.gen-row {
flex-direction: column;
align-items: stretch;
gap: 5px;
}
.gen-head {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.gen-head .label { min-width: 0; overflow-wrap: anywhere; }
.gen-text {
font-size: 12.5px;
line-height: 1.55;
color: var(--dim);
/* anywhere, not break-word: a place id or url with no spaces would still
push the row wider than the panel under break-word. */
overflow-wrap: anywhere;
/* The generator can return line breaks; they are kept rather than collapsed. */
white-space: pre-wrap;
}
.gen-text.is-empty { color: var(--mute); font-style: italic; }
/* Multilogin checker rows on Settings. Same stacking reason as .gen-row: the
detail line is a command's raw output, not a badge, so it cannot sit in a
centred flex line without pushing past the panel. */
.chk-row {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.chk-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chk-head .label { min-width: 0; overflow-wrap: anywhere; }
.chk-detail {
font-family: var(--mono);
font-size: 12px;
line-height: 1.5;
color: var(--mute);
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.chk-fix {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12.5px;
color: var(--dim);
}
/* ---------------- schedule calendar ---------------- */
/* Marks which of List / Calendar is on screen. .row-btn:hover recolours the
border to --bad, so the current one is marked by the accent instead. */
.row-btn.on-view {
border-color: var(--accent);
color: var(--accent-lit);
background: var(--accent-bg);
}
.cal-bar {
display: flex;
align-items: center;
gap: 8px;
/* Was 12px 0 10px. Symmetric now: nothing about the bar's position between
the panel header and the grid asks for one more pixel above than below. */
padding: 12px 0;
flex-wrap: wrap;
}
/* min-width, not width: the label is centred between the two arrows and a
narrower month must not let them slide inward.
118px, not 150. Measured at this font, the widest of the twelve labels is
"September 2026" at 110px, so 150 left 40px of dead space at its widest and
65px on "August 2026" - which is the gap that pushed the forward arrow away
from the title. 118 clears the widest by 8. */
.cal-title {
font-size: 13.5px;
font-weight: 600;
min-width: 118px;
}
/* Capped so a long IANA name cannot push the run count off the bar. */
.cal-zone {
max-width: 210px;
font-size: 12px;
padding: 5px 8px;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: var(--line-soft);
border: 1px solid var(--line-soft);
border-radius: 6px;
overflow: hidden;
}
/* The header row and the day grid are two grids, so the header keeps its own
height without a min-height meant for cells. */
.cal-dow {
background: var(--panel-2);
padding: 7px 8px;
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--mute);
}
.cal-grid + .cal-grid { margin-top: 1px; border-radius: 0 0 6px 6px; border-top: 0; }
.cal-cell {
background: var(--panel);
min-height: 92px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
/* The whole cell opens that day's actions, so it reads as a control. */
cursor: pointer;
}
.cal-cell:hover { background: var(--panel-2); }
.cal-cell.is-other:hover { background: var(--coal); }
/* Days of the neighbouring months that fill out the first and last weeks. */
.cal-cell.is-other { background: var(--bg); }
/* Recessive by design - the guide's muted day is --dim at .4 opacity
(kit:285). Tokenised so it sits on the palette's hue rather than the
neutral grey left over from before the revamp. */
.cal-cell.is-other .cal-num { color: var(--faint); }
.cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.is-today .cal-num { color: var(--accent-lit); font-weight: 600; }
.cal-num { font-size: 11.5px; color: var(--dim); }
/* The pill is a WRAPPER, not the button it used to be: it now holds two
controls - the body, which edits the schedule, and the history icon on the
right. A button inside a button is not parseable, so the outer element had
to stop being one. Every .cal-run selector below still matches, including
the is-extra pair. */
.cal-run {
display: flex;
align-items: stretch;
width: 100%;
background: var(--accent-bg);
border: 1px solid rgba(229, 72, 77, .3);
border-radius: 4px;
font-family: var(--ui);
font-size: 11px;
line-height: 1.35;
/* One line per run: a long schedule name must not grow the row's height. */
overflow: hidden;
}
.cal-run-main {
flex: 1 1 auto;
min-width: 0;
text-align: left;
background: transparent;
border: 0;
color: var(--text);
font: inherit;
padding: 3px 4px 3px 5px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* The history icon. flex:none so a long name shrinks the body instead of
pushing the icon out of the pill. */
.cal-run-log {
flex: none;
display: flex;
align-items: center;
background: transparent;
border: 0;
border-left: 1px solid rgba(255, 255, 255, .08);
color: var(--mute);
padding: 0 4px;
cursor: pointer;
}
.cal-run-log svg { display: block; width: 11px; height: 11px; }
.cal-run-log:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
/* The stop square, same shape as .cal-run-log so a chip reads as one pill
whichever of the two it carries. Rendered on every chip and disabled while
that schedule has nothing live, rather than appearing only mid-run - a
control that is absent when idle cannot be found when it is needed. */
.cal-run-stop {
flex: none;
display: flex;
align-items: center;
background: transparent;
border: 0;
border-left: 1px solid rgba(255, 255, 255, .08);
color: var(--mute);
font: inherit;
font-size: 9px;
padding: 0 4px;
cursor: pointer;
}
.cal-run-stop:disabled { opacity: .35; cursor: default; }
.cal-run-stop:not(:disabled) { color: var(--bad); }
.cal-run-stop:not(:disabled):hover { background: rgba(248, 81, 73, .18); }
/* Armed - the second click stops. An icon has no label to swap, so the
confirmation is carried by the fill. */
/* --bad (#ff2e42) with white measures 3.67:1 and fails AA. This is the ARMED
state of a destructive control - the moment the label matters most - so it
darkens to #b02525 (6.69:1) rather than keeping a red that is bright but
unreadable. Same reasoning as the primary-button hover above. */
.cal-run-stop.is-armed {
background: #b02525;
border-color: #b02525;
color: #fff;
}
/* The status dot. Its colour is the only thing that changes per status, so the
pill keeps one shape and the state reads at a glance. */
.cal-dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
margin-right: 4px;
vertical-align: middle;
background: var(--mute);
}
.cal-run:hover { border-color: var(--accent); background: rgba(229, 72, 77, .2); }
/* Per status. `scheduled` keeps the accent look the pill has always had; the
other three are the same three colours .badge.ok/.warn/.bad already use, so
a reader meets one palette across the app. */
.cal-run.is-started { background: var(--ok-bg); border-color: rgba(63, 185, 80, .3); }
.cal-run.is-started:hover { border-color: var(--ok); background: rgba(63, 185, 80, .2); }
.cal-run.is-started .cal-dot { background: var(--ok); }
.cal-run.is-skipped { background: var(--warn-bg); border-color: rgba(210, 153, 34, .3); }
.cal-run.is-skipped:hover { border-color: var(--warn); background: rgba(210, 153, 34, .2); }
.cal-run.is-skipped .cal-dot { background: var(--warn); }
.cal-run.is-missed { background: transparent; border-color: var(--line); }
.cal-run.is-missed:hover { border-color: var(--mute); background: rgba(255, 255, 255, .04); }
.cal-run.is-missed .cal-dot { background: var(--mute); }
.cal-run.is-missed .cal-run-main { color: var(--dim); }
.cal-run.is-scheduled .cal-dot { background: var(--accent); }
/* Runs past the third are in the DOM but out of the layout until the cell is
opened, so no run is unreachable from the grid. */
.cal-run.is-extra { display: none; }
.cal-cell.is-open .cal-run.is-extra { display: flex; }
/* Per-day account counts, under the day chips. Same reason .day-picker sits
outside .auth-field: that block's descendant rules would restyle these
inputs into full-width fields. */
.day-counts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 0 0 14px; }
.day-counts .day-lbl { width: 100%; margin: 0 0 2px; font-size: 12px; color: var(--dim); }
.daycount { display: flex; flex-direction: column; gap: 3px; }
.daycount > span { font-size: 10.5px; color: var(--mute); text-align: center; }
.daycount input {
width: 46px;
background: var(--coal);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--text);
font-family: var(--ui);
font-size: 12px;
padding: 5px 4px;
text-align: center;
}
.day-total { margin-left: auto; font-size: 11.5px; color: var(--mute); padding-bottom: 6px; }
.day-total.is-bad { color: var(--bad); }
.day-total.is-ok { color: var(--ok); }
/* How many accounts a calendar pill's day warms. flex:none, so a long name
shrinks the body rather than pushing this out of the pill. */
.cal-count {
flex: none;
display: flex;
align-items: center;
padding: 0 4px;
font-size: 10px;
color: var(--mute);
border-left: 1px solid rgba(255, 255, 255, .08);
}
/* One fire, and under it the accounts it actually ran. */
.runlog-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.runlog-sub { width: 100%; margin-top: 4px; font-size: 11.5px; color: var(--mute); overflow-wrap: anywhere; }
.runlog-accounts { width: 100%; margin: 6px 0 0; display: flex; flex-direction: column; gap: 3px; }
.runlog-acct {
display: flex;
gap: 8px;
align-items: center;
font-size: 11.5px;
padding: 3px 6px;
border: 1px solid var(--line-soft);
border-radius: 4px;
}
.runlog-acct .who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--dim); }
.runlog-acct .pct { flex: none; font-family: var(--mono); font-size: 11px; color: var(--mute); }
/* A bar rather than a number alone: progress is the one field that says how
far a run got before it stopped. */
.runlog-bar { flex: none; width: 54px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.runlog-bar > i { display: block; height: 100%; background: var(--mute); }
.runlog-acct.is-completed .runlog-bar > i { background: var(--ok); }
.runlog-acct.is-failed .runlog-bar > i { background: var(--bad); }
.runlog-acct.is-running .runlog-bar > i { background: var(--accent); }
.runlog-acct.is-stopped .runlog-bar > i { background: var(--warn); }
.runlog-none { width: 100%; margin-top: 6px; font-size: 11.5px; color: var(--mute); }
/* One row per recorded run, inside the history card. */
.runlog-row { display: flex; gap: 10px; align-items: baseline; }
.runlog-when { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.runlog-msg { min-width: 0; overflow-wrap: anywhere; }
/* A day that has already gone by. openDayModal disables "New schedule
this day" on these, so the number is dimmed to say so before the
click. Only the number: the runs on it stay legible and stay
editable. */
.cal-cell.is-past .cal-num { opacity: .4; }
.cal-cell.is-open { min-height: auto; }
.cal-more {
background: transparent;
border: 0;
padding: 1px 2px;
text-align: left;
font-family: var(--ui);
font-size: 10.5px;
color: var(--mute);
cursor: pointer;
}
.cal-more:hover { color: var(--text); text-decoration: underline; }
.cal-fail { padding: 16px; font-size: 13px; color: var(--bad); }
@media (max-width: 720px) {
.cal-cell { min-height: 64px; padding: 4px; }
.cal-run { font-size: 10px; }
}
/* Second line of a saved-job row: what the stored configuration holds. */
.saved-sub {
display: block;
font-size: 12px;
margin-top: 2px;
overflow-wrap: anywhere;
}
@media (max-width: 720px) {
.fab { padding: 11px 15px; font-size: 13px; }
}
/* ---------------------------------------------------------------- warm-up terminal
Floating log panel, shown only while a warm-up is running (loadActive drives
it from the same rows.length it already uses for setRunningState). Carries no
data-panel attribute on purpose: showTab toggles [data-panel] elements per
tab, and a run is in progress regardless of which tab is open.
z-index sits between .fab (40) and .modal (50), so it covers the button but
an open card still covers it. */
.wterm {
position: fixed;
z-index: 45;
width: min(520px, calc(100vw - 32px));
background: var(--glass-deep);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-line);
border-radius: 8px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .62);
font-family: var(--mono);
overflow: hidden;
}
.wterm-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(255, 255, 255, .04);
border-bottom: 1px solid var(--glass-line);
font-size: 11.5px;
color: var(--dim);
cursor: move;
/* The bar is the drag handle; without this a drag selects its label text. */
user-select: none;
touch-action: none;
}
.wterm-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--line);
flex: none;
}
.wterm-dot.is-live { background: var(--ok); }
.wterm-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wterm-body {
max-height: 260px;
overflow-y: auto;
padding: 6px 0;
}
/* The rows come from loadLogs unchanged - .row/.label/.who/.badge - so they are
restyled here rather than the renderer being rewritten. */
.wterm .rows { border-top: 0; }
.wterm .row {
display: block;
padding: 3px 12px;
border-bottom: 0;
font-size: 12px;
line-height: 1.5;
color: var(--ok);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.wterm .row::before { content: "$ "; color: var(--mute); }
.wterm .row.is-empty { color: var(--mute); }
.wterm .row.is-empty::before { content: ""; }
.wterm .row .label { color: var(--ok); }
.wterm .row .who { color: var(--mute); }
.wterm .row .badge {
background: transparent;
border: 0;
padding: 0 0 0 8px;
color: var(--mute);
font-family: var(--mono);
font-size: 11px;
}
/* Three cards in one line above the stepper: Running now, Recent sessions and
the activity terminal. auto-fit rather than repeat(3, 1fr) because .hidden is
display:none (:392) - when no run is active the terminal leaves the flow and
the other two take the whole row instead of holding an empty third column. */
.wcards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
/* stretch, not start: the three hold different amounts - "Nothing yet." next
to 47 sessions - and start leaves a ragged bottom edge across the row. */
align-items: stretch;
margin-bottom: 12px;
}
/* .mock-panel carries its own margin-bottom (:502); the grid gap supplies the
spacing here, so the two would otherwise stack. */
.wcards > * { margin-bottom: 0; min-width: 0; }
/* The terminal sits in the row instead of floating over the page. static drops
it back into normal flow - the fixed position, the drag handle and the stored
coordinates it needed are gone with it. */
.wterm-card {
position: static;
z-index: auto;
width: auto;
box-shadow: none;
border-radius: var(--radius);
}
.wterm-card .wterm-bar { cursor: default; }
/* One scroll height across all three, so the row keeps a flat bottom edge
however many entries each card holds. */
.wcards .rows { max-height: 260px; overflow-y: auto; }
.wcards .wterm-body { max-height: 260px; }
/* The generated search terms. The list scrolls inside itself instead of
growing the step: every kind is still there and every Remove still reachable,
but the controls under it stay on screen. */
.terms-box {
max-height: 300px;
overflow-y: auto;
}
/* Step-5 summary: a two-column read-back of what the run will do. */
.sumgrid {
display: grid;
grid-template-columns: minmax(140px, 210px) 1fr;
gap: 7px 16px;
align-items: baseline;
font-size: 13px;
}
.sum-h {
grid-column: 1 / -1;
margin-top: 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--glass-line);
color: var(--dim);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.sumgrid .sum-h:first-child { margin-top: 0; }
.sum-k { color: var(--mute); }
.sum-v { color: var(--text); font-family: var(--mono); font-size: 12.5px; }
/* The qualifier after a value - where the number came from, or what it costs. */
.sum-n { color: var(--mute); font-family: var(--ui); font-size: 11.5px; }
.sum-empty {
grid-column: 1 / -1;
color: var(--mute);
font-style: italic;
}
/* ============================================================
Custom dropdowns (dropdown.js). A native