/* ============================================================================================
SceneSat Cosmodrome — organizer workspace
DESIGN RULES. Read these before adding anything; they are what keep the app from drifting
back into generic dark-SaaS.
1. ONE elevation. Surfaces are flat fills separated by a 1px hairline. No gradient fills,
no drop shadows on content. Depth comes from value (--sunken < --ground < --surface <
--raised), never from blur.
2. Colour MEANS something. Violet is interaction (links, focus, the brand mark). The state
colours are reserved for state. Nothing is tinted for decoration.
3. Density over air. A list of three and a list of fifty get the same row grammar, so the
page grows with the data instead of padding it out. Never set a min-height to make a
short item look as substantial as a long one.
4. Type is a scale, not a statement. The page title is 26px. Nothing on a workspace index
needs to be 82px.
5. The ground is flat and unlit. There is no backdrop artwork — a background image is
coming, and it will sit behind opaque surfaces so nothing is ever read through it.
6. Say it in sentence case. Uppercase letterspaced micro-labels are used for table column
headers and data labels only — places where the label must not compete with the value.
============================================================================================ */
:root {
/* Ground and surfaces — four steps, each a flat fill. */
--ground: #0b0b0f;
--sunken: #0e0e13;
--surface: #131319;
--raised: #181820;
/* Hairlines. --line separates components, --line-soft separates rows within one. */
--line: #23232d;
--line-soft: #1b1b24;
/* Ink — three weights. Anything quieter than --ink-3 is unreadable on --ground. */
--ink: #eceaf2;
--ink-2: #9d9bab;
--ink-3: #6d6b7a;
/* Identity. Violet is Cosmodrome's; cyan is its second. */
--violet: #9b7cff;
--violet-dim: #7d63d8;
--cyan: #69dcf6;
/* State. Only ever used to report state. */
--success: #65e6a8;
--orange: #ff9d5c;
--danger: #ff747e;
/* Kept so any rule or app still naming the old tokens resolves. */
--space: var(--ground);
--panel: var(--surface);
--muted: var(--ink-2);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
color: var(--ink);
background: var(--ground);
}
* { box-sizing: border-box }
body {
margin: 0;
min-height: 100vh;
background: var(--ground);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit }
/* --------------------------------------------------------------------------------------------
Header — a rule across the top, not a floating pane of glass
-------------------------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 3;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 0 max(24px, calc((100vw - 1120px) / 2));
border-bottom: 1px solid var(--line);
background: #0b0b0fe6;
backdrop-filter: blur(14px);
}
/* The brand lockup: SceneSat's Sputnik, then the Cosmodrome nameplate. Both are artwork, so the
anchor carries no type of its own — its accessible name comes from aria-label. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none }
/* Sized by height so the two scale together; width follows from each viewBox. Both carry their
own ink (#F2F6FB): they are referenced by , so no rule in this file reaches inside them —
a currentColor in either would resolve to black. */
.brand-sputnik { height: 20px; width: auto; flex: none }
.brand-mark { height: 21px; width: auto; flex: none }
/* The nameplate's own baseline rule already reads as an underline; dim the whole lockup very
slightly at rest so it does not out-shout the page title, and bring it up on hover. */
.brand { opacity: .92 }
.brand:hover { opacity: 1 }
nav { display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--ink-2) }
nav a { text-decoration: none; padding: 6px 10px; border-radius: 6px }
nav > a:hover { color: var(--ink); background: #ffffff0d }
.identity {
color: var(--ink-3);
padding-left: 14px;
margin-left: 8px;
border-left: 1px solid var(--line);
white-space: nowrap;
}
main {
position: relative;
z-index: 1;
max-width: 1120px;
margin: 0 auto;
padding: 34px 24px 90px;
}
/* --------------------------------------------------------------------------------------------
Page head
One line of title, one line of prose. `.hero` and `.hero.compact` are kept as the index
heading; `.event-hero` is the detail-page variant that carries facts down the right side.
-------------------------------------------------------------------------------------------- */
.hero { padding: 0 0 18px; border-bottom: 1px solid var(--line) }
.hero.compact { padding-top: 0 }
.hero h1 {
font-size: 26px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -.021em;
margin: 0;
max-width: 40ch;
}
.hero p:not(.eyebrow) { font-size: 13.5px; color: var(--ink-2); max-width: 74ch; margin: 10px 0 0 }
/* A quiet line of context above a title — who you are here, or what this section is. Not a
shouty cyan micro-caption; it sits under the title's weight, not over it. */
.eyebrow {
font-size: 12.5px;
font-weight: 400;
color: var(--ink-3);
letter-spacing: 0;
text-transform: none;
margin: 0 0 5px;
}
/* The Event page names its Series here and links to it, so the eyebrow can carry a link. */
.eyebrow a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px }
.eyebrow a:hover { color: var(--ink) }
/* A sentence that reports a condition — a quota reached, a step not yet available. It is prose,
not a badge: `.tag` was being used for these, which put pill-shaped paragraphs on the page. */
.notice { font-size: 13px; color: var(--ink-2); margin: 10px 0 0; max-width: 78ch }
.notice.warn { color: var(--orange) }
/* Explains the vocabulary of a page in a sentence. Used where two nouns are easily confused —
the terms themselves lift out of the muted prose so the definition can be skimmed. */
.lede { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); max-width: 78ch }
.lede strong, .hero p strong { color: var(--ink); font-weight: 600 }
/* A row of small facts under a page title — episode count, last sync, a link or two. */
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
margin-top: 12px;
font-size: 12.5px;
color: var(--ink-3);
}
.hero-meta a { color: var(--violet); text-decoration: none }
.hero-meta a:hover { text-decoration: underline }
.back {
display: inline-block;
color: var(--ink-3);
text-decoration: none;
font-size: 13px;
margin-bottom: 16px;
}
.back:hover { color: var(--ink) }
/* Detail-page hero: title on the left, the facts that identify this thing on the right. Both
columns start at the top — the facts column carries the Event's links as well as its times,
so it is routinely the taller of the two and bottom-aligning pushed the title down the page. */
.event-hero {
display: flex;
justify-content: space-between;
gap: 40px;
align-items: flex-start;
border-bottom: 1px solid var(--line);
padding: 0 0 20px;
}
.event-hero h1 { font-size: 30px; font-weight: 600; letter-spacing: -.022em; line-height: 1.15 }
.event-facts {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
min-width: 210px;
color: var(--ink-2);
font-size: 13px;
text-align: right;
}
.event-facts strong { color: var(--ink); font-weight: 600 }
.event-facts a { color: var(--violet); text-decoration: none }
.event-facts a:hover { text-decoration: underline }
/* The links below the times are actions, not facts — a rule separates the two so the column
does not read as one undifferentiated list. */
.event-facts a:first-of-type { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft) }
/* The cover thumbnail sits beside the title/description text, both inside the hero's left flex
child — not a third sibling of .event-hero itself, which would break its two-column layout. */
.event-hero-main { display: flex; gap: 16px; align-items: flex-start; min-width: 0 }
.event-cover {
width: 84px;
height: 84px;
border-radius: 8px;
object-fit: cover;
flex: 0 0 auto;
border: 1px solid var(--line-soft);
}
/* A row of small facts under the description — website, location, party system. */
.event-meta-line { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2) }
.event-meta-line a { color: var(--violet); text-decoration: none }
.event-meta-line a:hover { text-decoration: underline }
/* --------------------------------------------------------------------------------------------
Sections
`.section-heading` does double duty in the views: a standalone section header (with an
.eyebrow and an h2), and the h2 inside a panel. Both are styled here.
-------------------------------------------------------------------------------------------- */
.section-heading {
display: flex;
justify-content: space-between;
align-items: end;
gap: 16px;
margin: 38px 0 12px;
}
.section-heading h2 { font-size: 16px; font-weight: 600; letter-spacing: -.012em; margin: 0 }
/* As a plain h2 it is a heading rather than a flex row, so it must not inherit the section
margins. It keeps the 16px section size — the Audience heading is a peer of "Streams & Now
Playing", not a sub-heading of it — and only drops to 15px inside a panel. */
h2.section-heading { display: block; margin: 0 0 12px; font-size: 16px; font-weight: 600 }
.station-panel > h2.section-heading { font-size: 15px }
/* A count beside a section title, and the one-line gloss on the right of it. */
.sec-count { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums }
.sec-note { font-size: 12.5px; color: var(--ink-3); text-align: right }
.muted { color: var(--ink-2) }
p.muted { font-size: 13px; max-width: 78ch }
/* --------------------------------------------------------------------------------------------
Surfaces
`.card` is the one panel primitive: a flat fill and a hairline. It carries no padding, so a
panel opts in with `.station-panel`.
-------------------------------------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
}
.station-panel { padding: 18px 20px; margin-top: 14px }
.station-panel > h2.section-heading { margin: 0 0 10px }
/* --------------------------------------------------------------------------------------------
Series and Events
THE distinction this app is built on, so the markup makes it structural rather than
decorative: a Series is a container, and its editions are rows INSIDE it. An Event that
belongs to no Series is a row in its own list under a heading that says so. Nothing about
the two is interchangeable, which is what went wrong when both were the same card.
-------------------------------------------------------------------------------------------- */
.series {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
margin-top: 10px;
overflow: hidden;
}
.series-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: start;
padding: 15px 18px;
text-decoration: none;
}
.series-head:hover { background: var(--raised) }
.series-title { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap }
.series-title h2, .series-title h3 {
font-size: 17px;
font-weight: 600;
letter-spacing: -.016em;
margin: 0;
}
.series-desc { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); max-width: 70ch }
.series-right { display: flex; align-items: center; gap: 8px; white-space: nowrap }
/* How often it runs, said as a word. It is a property of the Series, not a badge to be won. */
.cadence { font-size: 12.5px; color: var(--ink-3) }
.cadence:before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-3);
margin: 0 8px 3px 4px;
vertical-align: middle;
}
/* The editions inside a Series, and — with `.rows` — any other list of the same shape. Sunken
relative to the container so a Series reads as holding them. */
.editions { border-top: 1px solid var(--line-soft); background: var(--sunken) }
.rows {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
margin-top: 10px;
overflow: hidden;
}
/* The stations list adds a cover column ahead of the name; every other .rows list keeps the
plain five-column shape below. The thumb opens the lightbox (see lightbox.js) — the row
itself stays one big link. */
.rows.with-covers .ed { grid-template-columns: 104px 36px 1fr 96px 100px 140px }
.ed .cover, .ep-cover { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; cursor: zoom-in; display: block }
.ed .cover-blank { width: 36px; height: 36px; border-radius: 6px; background: var(--raised); border: 1px dashed var(--line-soft) }
.ep-cover { width: 28px; height: 28px }
.episode-table .ep-cover-col { width: 36px; padding-right: 4px }
/* Opt-in image lightbox (data-lightbox-src). */
.cd-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(6, 10, 18, 0.88); padding: 32px }
.cd-lightbox.is-open { display: flex }
.cd-lightbox__image { max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55) }
.cd-lightbox__close { position: absolute; top: 14px; right: 18px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: 0.8 }
.cd-lightbox__close:hover { opacity: 1 }
body.cd-lightbox-open { overflow: hidden }
/* One Event. Five columns: state, what it is, when, what it is connected to, how many heard it.
The figure column is right-aligned and tabular so a column of them can be compared. */
.ed {
display: grid;
grid-template-columns: 104px 1fr 96px 100px 140px;
gap: 14px;
align-items: center;
padding: 11px 18px;
font-size: 13px;
text-decoration: none;
border-top: 1px solid var(--line-soft);
}
.ed:first-child { border-top: 0 }
/* The Series page lists its own editions, and Korolev sends no binding counts or audience
figures with those — so the row drops to the three columns it can actually fill rather than
padding out two empty ones. */
.rows.compact .ed { grid-template-columns: 104px 1fr 96px }
.ed:hover { background: var(--raised) }
.ed .name { font-weight: 500; color: var(--ink) }
.ed .name .label { color: var(--ink-3); font-weight: 400 }
.ed .meta { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums }
/* An Event with both a listening and a watching peak needs two lines; tighten the leading so
that row does not tower over its neighbours. */
.ed .fig {
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.35;
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ed .fig strong { color: var(--ink); font-weight: 600 }
/* A Series with no editions yet says so, and says what to do about it. An empty container is
a state worth naming — it is the difference between "nothing here" and "not set up". */
.ed-empty {
padding: 12px 18px;
font-size: 12.5px;
color: var(--ink-3);
border-top: 1px solid var(--line-soft);
}
.ed-empty a { color: var(--violet) }
/* --------------------------------------------------------------------------------------------
State
A dot and a word. The dot carries the colour so the label stays readable, and only `live`
is allowed to draw attention to itself — it is the one state that is happening right now.
-------------------------------------------------------------------------------------------- */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2) }
.st i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none }
.st.live { color: var(--success) }
.st.live i { background: var(--success); box-shadow: 0 0 8px var(--success) }
.st.planned i { background: var(--cyan) }
.st.completed i { background: #4b4a58 }
.st.cancelled i { background: var(--danger) }
.st.archived i { background: #3a3946 }
.st.draft i { background: transparent; border: 1px solid var(--ink-3) }
/* Guest stations and their episodes speak a different vocabulary: a station is `active`, an
episode is `draft` until it is `downloadable`. Any status not listed here keeps the neutral
grey dot rather than being guessed at — the same default the old sheet gave everything but
`live` and `planned`. */
.st.active i { background: var(--success) }
.st.downloadable i { background: var(--success) }
.st.paused i, .st.inactive i { background: var(--orange) }
/* How you reach this thing — a membership role, or administrator reach. Said quietly: it is
context, not status, and it is the same on every row. */
.who-tag {
font-size: 11px;
color: var(--ink-3);
border: 1px solid var(--line);
border-radius: 4px;
padding: 2px 7px;
white-space: nowrap;
}
.who-tag.admin { color: var(--violet); border-color: #9b7cff40 }
/* --------------------------------------------------------------------------------------------
Badges
`.status` reports a thing's own lifecycle state; `.tag` labels a kind or a property. Both
are small, bordered and quiet — a page full of filled pills is a page where nothing stands
out. `.kind` is kept as an alias of `.tag`.
-------------------------------------------------------------------------------------------- */
.status, .kind, .tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border: 1px solid var(--line);
border-radius: 4px;
background: transparent;
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--ink-2);
white-space: nowrap;
}
/* A lifecycle state is always one lowercase word from Korolev ("live", "completed"), so it can
be capitalised here. `.tag` cannot: it carries multi-word labels like "Video stream", which
`capitalize` would turn into "Video Stream". Those are capitalised at the source instead. */
.status { text-transform: capitalize }
.status.live { color: var(--success); border-color: #65e6a840; background: #65e6a812 }
.status.planned { color: var(--cyan); border-color: #69dcf640 }
.status.completed { color: var(--ink-3) }
.status.cancelled { color: var(--danger); border-color: #ff747e40 }
.status.draft { color: var(--ink-3); border-style: dashed }
.status.downloadable { color: var(--success); border-color: #65e6a840 }
.status.active { color: var(--success); border-color: #65e6a840 }
.tag.ok { color: var(--success); border-color: #65e6a840 }
.tag.warn { color: var(--orange); border-color: #ff9d5c40 }
/* Reached as a SceneSat administrator rather than through an invitation. Violet, so it reads as
"how you got here" next to the green/orange tags that report a thing's own state. */
.tag.admin { color: var(--violet); border-color: #9b7cff40 }
/* --------------------------------------------------------------------------------------------
Empty states
An empty workspace is usually a permissions story, not a decoration opportunity, so it gets
a sentence that explains what to do — and no 80px glowing ring.
-------------------------------------------------------------------------------------------- */
.empty { text-align: left; padding: 30px 24px; max-width: 720px; margin-top: 14px }
.empty h2, .empty h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px }
.empty p { color: var(--ink-2); font-size: 13px; margin: 0 }
.orbit-icon {
display: block;
width: 26px;
height: 26px;
border: 1px solid var(--violet-dim);
border-radius: 50%;
margin-bottom: 14px;
}
/* --------------------------------------------------------------------------------------------
Bindings — the streams and Now Playing feeds an Event is connected to
-------------------------------------------------------------------------------------------- */
.binding-list { display: grid; gap: 12px }
.binding { padding: 18px 20px }
.binding > header { display: flex; justify-content: space-between; align-items: center; gap: 20px }
/* The header's left half is a kind badge stacked over the binding's own name. */
.binding > header > div:first-child { display: grid; gap: 6px; justify-items: start }
.binding h3 { font-size: 16px; font-weight: 600; letter-spacing: -.012em; margin: 0 }
.binding-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.now-preview {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
background: var(--sunken);
border: 1px solid var(--line-soft);
border-radius: 6px;
padding: 13px 15px;
margin-top: 14px;
}
.now-preview div { display: flex; gap: 4px; flex-direction: column }
.now-preview small, .now-preview span { color: var(--ink-3); font-size: 12px }
.now-preview strong { font-size: 15px; font-weight: 600 }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3a3946 }
.live-dot.on { background: var(--danger); box-shadow: 0 0 10px var(--danger) }
.revision { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-3) }
/* Resolved downstream identifiers. Monospace because these get copied into another system or
quoted to staff — they are values, not prose. */
.binding-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 14px 0 0; padding: 0 }
.binding-facts > div { display: grid; gap: 3px }
.binding-facts dt {
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: .1em;
font-size: 9.5px;
font-weight: 700;
}
.binding-facts dd { margin: 0; font-family: ui-monospace, monospace; font-size: 12.5px }
/* The public Now Playing URL: long and unbreakable, so wrap it rather than let it widen the
card on a phone. */
.feed-url { display: grid; gap: 4px; margin: 12px 0 0 }
.feed-url small {
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: .1em;
font-size: 9.5px;
font-weight: 700;
}
.feed-url a {
font-family: ui-monospace, monospace;
font-size: 12px;
color: var(--cyan);
word-break: break-all;
}
/* Zond's heartbeat, at the end of the "Chat recording" section heading. */
.zond-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.zond-status small { color: var(--ink-3); font-size: 11.5px }
/* The recorded chat log's search box, in a `.cl-toolbar` row. The base `input` rule is
width: 100%, which as a flex item takes the whole line and pushes Search and Clear onto one of
their own; this makes it share the row and still grow into the space it has. */
.chat-search { width: auto; flex: 1 1 260px; max-width: 420px }
/* --------------------------------------------------------------------------------------------
Live output status (Stage 2a — rendered on page load; Stage 2b patches the data-live-field
nodes in place). realtime.js toggles the state class on these nodes by name, so every key in
its LABELS map must have a rule here.
Colour carries meaning, so it is used only where the state is actually known: green = on air,
red = confirmed offline, orange = we could not ask. "Unavailable" must never look like
"offline".
-------------------------------------------------------------------------------------------- */
.live-state {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px 18px;
margin-top: 14px;
font-size: 12.5px;
color: var(--ink-2);
}
.live-state strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600 }
.live-state small { color: var(--ink-3) }
.live-state .state {
display: inline-flex;
padding: 2px 8px;
border: 1px solid var(--line);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
}
.live-state .state.live { color: var(--success); border-color: #65e6a840; background: #65e6a812 }
.live-state .state.offline { color: var(--danger); border-color: #ff747e40 }
/* Not-found and not-yet-connected are configuration, not outage. */
.live-state .state.missing { color: var(--orange); border-color: #ff9d5c40 }
.live-state .state.unconfigured { color: var(--ink-2) }
/* Explicitly muted, NOT red: we did not measure this, so do not imply we did. */
.live-state .state.unknown { color: var(--ink-2) }
.live-state .state.not-monitored { color: var(--ink-3) }
/* --------------------------------------------------------------------------------------------
Forms
-------------------------------------------------------------------------------------------- */
.publisher { border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 16px }
.publisher summary { cursor: pointer; font-weight: 600; color: var(--violet); font-size: 13px }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px }
label { color: var(--ink-2); font-size: 12.5px; display: grid; gap: 6px }
.wide { grid-column: 1 / -1 }
/* Hint text under a field (what a value is, or where to find it). */
label small { color: var(--ink-3); font-size: 11px; line-height: 1.35 }
/* Beside a label's own text, not under it: "this value is the Series' default, not the Event's
own" is about the FIELD's origin, which reads better next to the name than below the input. */
label .from-series {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 100px;
background: var(--sunken);
border: 1px solid var(--line-soft);
font-size: 10.5px;
text-transform: none;
}
/* The current cover, shown above its own upload widget on the Event/Series details forms. */
.event-cover-preview {
display: block;
max-width: 320px;
max-height: 180px;
width: auto;
border-radius: 8px;
object-fit: contain;
border: 1px solid var(--line-soft);
margin: 0 0 12px;
}
input, textarea, select {
width: 100%;
border: 1px solid #2c2b39;
border-radius: 6px;
background: var(--sunken);
color: var(--ink);
padding: 9px 11px;
font: inherit;
font-size: 13px;
}
/* The rule above is meant for fields. A submit/button input is not a field — the station editors
use ``, and a full-width Save stretched across its toolbar. */
input[type="submit"], input[type="button"], input[type="reset"] { width: auto }
textarea { resize: vertical }
/* The base sheet styles `input`, so a `select` left alone falls back to the raw browser control
and reads as foreign. These match the input rule exactly and add the chevron that
`appearance: none` removes. */
select {
appearance: none;
padding-right: 34px;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
/* The dark theme does not reach the native option list on most platforms; set both so an
opened menu is not a white flash. */
select option { background: #0e0e13; color: var(--ink) }
select:focus, input:focus, textarea:focus {
outline: none;
border-color: var(--violet);
box-shadow: 0 0 0 3px #9b7cff26;
}
.check { display: flex; align-items: center; flex-direction: row; gap: 8px }
.check input { width: auto }
/* Several buttons on one line — lifecycle moves, editor toolbars. */
.button-row { display: flex; flex-wrap: wrap; gap: 8px }
/* A short list of resolved facts — a Series' inherited outputs, say. Not a bulleted list: these
are labelled values, and the bullet adds nothing a monospace key does not already say. */
.fact-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px }
.fact-list li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2) }
.fact-list strong, .fact-list .target { font-family: ui-monospace, monospace; font-size: 12.5px }
.fact-list strong { color: var(--ink); font-weight: 600 }
.fact-list .arrow { color: var(--ink-3) }
/* One team member: who they are, what they may do, and the controls that change it. A member is
its own