. */
button.nav:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
/* --- Account ------------------------------------------------------------ */
/* The username, next to the button that changes its password. */
.account { font-size: .78rem; }
/* Confirmation of an action that leaves no visible trace on the page: without
this, changing the password closes a dialog and nothing else happens. */
.notice-ok {
margin: 0 0 1rem; padding: .6rem .85rem; border-radius: 6px; font-size: .85rem;
color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
background: color-mix(in srgb, var(--ok) 10%, transparent);
}
/* A freshly issued secret. It goes in a and not in a disabled input so it
can be selected by hand where the clipboard is not available.
Ordinary selection, deliberately. It used to be `user-select: all`, so that
one click would take the whole value -- but a click then selected everything
whether that was wanted or not, and a fully selected block can be dragged,
which made reading it feel like being one gesture away from breaking it. The
button next to it is what takes the whole value now, and selecting half of a
connection string by hand works again. */
.secret {
margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
max-height: none; border: 1px solid var(--border);
}
/* Label on the left, its button on the right, on the same baseline: the button
belongs to this block and not to the dialog, which already has its own. */
.copyable + .copyable { margin-top: .9rem; }
.copyable-head {
display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.copyable-head .cred-label { margin: 0 0 .3rem; }
/* Fixed width so "Copy" turning into "Copied" does not shift the label. */
.copyable-head button { flex: none; min-width: 7.5rem; }
/* --- Scope of an API key ------------------------------------------------ */
/* A fieldset and not loose divs: the two radios are one choice, and a legend
is what says so to a screen reader without inventing an aria attribute. */
.scope {
margin: 0 0 .8rem; padding: .7rem .8rem .8rem; border-radius: 7px;
border: 1px solid var(--border); background: var(--background);
}
.scope legend {
padding: 0 .35rem; font-size: .64rem; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted);
}
.choice { display: flex; gap: .5rem; align-items: baseline; padding: .15rem 0; cursor: pointer; }
.choice input { flex: none; }
/* `min-width: 0` porque el default de un flex item es `auto`: sin esto el
texto no puede encogerse por debajo de su ancho natural y desborda. */
.choice > span { min-width: 0; }
/* The consequence sits under the label, muted: it is what the option MEANS,
and putting it in a tooltip would hide it from exactly the person choosing. */
.choice em { display: block; font-style: normal; font-size: .72rem; color: var(--muted); }
/* Indented under its radio, so it reads as belonging to "Only these" and not
as a third option. Scrolls: a deployment with thirty agents must not push
the buttons off the screen. */
.agents {
display: flex; flex-direction: column; gap: .1rem;
margin: .4rem 0 0 1.45rem; max-height: 11rem; overflow-y: auto;
}
.agents .agent {
display: flex; gap: .45rem; align-items: baseline;
font-size: .82rem; cursor: pointer;
}
.agents .agent input { flex: none; }
/* --- The docs page ------------------------------------------------------ */
/* The only page that is a document and not a screen, so it is the only one
that needs prose. Narrower than the rest on purpose: `main` is 1000px, which
is right for a table and far too wide for a paragraph -- past roughly 75
characters the eye loses the start of the next line. */
.doc { max-width: 46rem; padding-bottom: 4rem; }
.doc p { line-height: 1.65; margin: 0 0 1rem; }
/* The one-line answer to "what is this", before any heading. */
.doc .lead { font-size: 1rem; color: var(--text); margin-bottom: 1.8rem; }
/* `h2` is uppercase and tiny elsewhere, where it labels a panel. Here it opens
a section that gets read, so it goes back to looking like a heading. */
.doc h2 {
font-size: 1.05rem; color: var(--text); text-transform: none;
letter-spacing: 0; margin: 2.2rem 0 .8rem;
padding-top: 1.1rem; border-top: 1px solid var(--border);
}
.doc h3 { font-size: .9rem; color: var(--text); margin: 1.5rem 0 .5rem; }
/* Lists carry the same line height as the paragraphs around them; a denser one
reads as a different kind of content rather than as part of the argument. */
.doc ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.doc li { line-height: 1.65; margin-bottom: .5rem; }
/* The bullet is punctuation, not content. */
.doc li::marker { color: var(--muted); }
.doc strong { color: var(--text); font-weight: 600; }
/* Inline code sits inside a sentence: a border would break the line's rhythm,
so it gets a tint instead. */
.doc code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
padding: .08rem .3rem; border-radius: 4px;
background: color-mix(in srgb, var(--muted) 16%, transparent);
}
/* A frame around every block. The background alone separated code from prose
only where the two happened to differ in tone; a border says where the block
starts and ends regardless, which matters most on the long examples, where
the top and the bottom are not on screen together. */
.doc pre {
margin: 0 0 1.2rem; padding: .9rem 1rem; line-height: 1.55; max-height: none;
border: 1px solid var(--border); border-radius: 7px;
}
/* The diagrams are `pre` too, and they get the same frame: next to a framed
example an unframed one reads as something that failed to render rather than
as a different kind of thing. */
.doc pre.flow { background: color-mix(in srgb, var(--panel) 60%, var(--background)); }
/* A block already has its own background; the inline tint would double up. */
.doc pre code { padding: 0; background: none; font-size: 1em; }
/* The diagram is art, not code: no wrapping and no shrinking. */
.doc .flow { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.doc table { margin: 0 0 1.2rem; }
.doc td, .doc th { white-space: normal; vertical-align: top; }
.doc td:first-child { white-space: nowrap; }
/* An aside: true, and not part of the argument you are following. Marked by a
rule down the side rather than a box, which would read as a warning.
Scoped to `.doc` deliberately. `.notice` on its own has no styling anywhere
-- only `.notice-error` and `.notice-ok` do -- so the seven uses of it on
/policy and /config render as ordinary paragraphs today. Styling the bare
class would silently restyle those two pages as well. */
.doc .notice {
margin: 0 0 1.2rem; padding-left: .8rem;
border-left: 2px solid var(--border);
color: var(--muted); font-size: .92em;
}
.doc .notice code { font-size: .9em; }
/* --- Syntax highlighting ------------------------------------------------ */
/* Its own tokens and not the status palette: `--ok` means "this finished well"
on the dashboard, and a string is not that. Tying the two would mean a change
to one silently repainting the other. */
:root {
--tok-comment: #7e8a97;
--tok-string: #93c48b;
--tok-keyword: #b48ce0;
--tok-literal: #d4b24c;
--tok-builtin: #6fb3c9;
--tok-number: #d99a6c;
--tok-name: #7aa5e0;
}
/* Comments are the part you skip on a second read; italic says so without
spending a colour. */
.tok-com { color: var(--tok-comment); font-style: italic; }
.tok-str { color: var(--tok-string); }
.tok-kw { color: var(--tok-keyword); }
.tok-lit { color: var(--tok-literal); }
.tok-bif { color: var(--tok-builtin); }
.tok-num { color: var(--tok-number); }
.tok-dec { color: var(--tok-literal); }
.tok-key { color: var(--tok-name); }
.tok-var { color: var(--tok-number); }
.tok-flag { color: var(--tok-builtin); }
/* --- The language picker ------------------------------------------------ */
/* Hidden, not removed: `display: none` would take them out of the tab order,
and then the picker could only be used with a mouse.
Not positioned either -- it sits inside its own label, so leaving it in flow
at zero size keeps it exactly where the click lands, and the browser has
nowhere to scroll to. */
.lang-pick {
width: 0; height: 0; margin: 0; padding: 0; border: 0;
opacity: 0; pointer-events: none;
}
label.lang {
display: inline-block; margin: 0 .3rem .9rem 0;
font-size: .76rem; padding: .2rem .7rem; border-radius: 5px;
color: var(--muted); background: var(--panel);
border: 1px solid var(--border); cursor: pointer; user-select: none;
}
label.lang:hover { color: var(--accent); border-color: var(--accent); }
.langs { margin: 0 0 1rem; display: flex; align-items: baseline; gap: .1rem; flex-wrap: wrap; }
.langs-legend {
font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); margin-right: .5rem;
}
/* The radio lives inside its label, which is also what removes the `for`/`id`
pair: a label wrapping its control is already associated with it. */
label.lang:has(.lang-pick:checked) {
color: var(--accent); border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* The focus ring has to land on the label, since the input itself is invisible.
Without this the picker is unusable by keyboard: you would be moving through
controls you cannot see. */
label.lang:has(.lang-pick:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* One choice switches every example on the page.
Through `:has()` on the container and not a sibling combinator from the
input. The sibling version needed every radio at the very top of the
document, and clicking a label focuses its radio: with the radio off-screen
the browser scrolled the page to it, so picking a language threw the reader
back to the top. Asking the container instead lets each radio sit where its
label is, which is where the click already happened.
Python shows without `:has()` having to match, so a browser that does not
support it still renders a readable page -- one language instead of a
picker, rather than no examples at all. */
.example .ex { display: none; }
.example .ex-python { display: block; }
.doc:has(.pick-javascript:checked) .ex-python,
.doc:has(.pick-bash:checked) .ex-python { display: none; }
.doc:has(.pick-javascript:checked) .ex-javascript,
.doc:has(.pick-bash:checked) .ex-bash { display: block; }
/* An example with no shell version falls back to Python rather than showing an
empty gap, and a note in its place says why. It comes last, and it is more
specific than the rule that hides Python above. */
.doc:has(.pick-bash:checked) .no-bash .ex-python { display: block; }
/* --- What a registration is still missing ------------------------------- */
/* Amber and not red: nothing is broken, something is unfinished. The same
colour the `waiting` status uses, for the same reason. */
.setup {
margin: 0 0 1.4rem; padding: .85rem 1rem 1rem; border-radius: 8px;
background: var(--panel);
border: 1px solid color-mix(in srgb, var(--waiting) 45%, transparent);
}
.setup h2 { margin: 0 0 .6rem; font-size: .95rem; color: var(--waiting); }
/* Grid and not flex: the subjects line up in a column, so the eye reads down
the list of what is affected instead of hunting for the name in each row. */
.setup .item {
display: grid; grid-template-columns: max-content 1fr max-content;
align-items: baseline; gap: .55rem; padding: .3rem 0; font-size: .82rem;
}
.setup .item + .item { border-top: 1px solid var(--border); }
.setup .what {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text);
overflow-wrap: anywhere;
}
.setup .why { color: var(--muted); }
/* An agent missing several steps is one entry with several reasons, so its
name is written once. */
.setup .reason { margin: 0; }
.setup .reason + .reason { margin-top: .25rem; }
/* The button sits on the baseline of a two-line reason too, so it does not
drift down the row as the text wraps. */
.setup .row-action { align-self: center; }
/* One column on a phone: three of them turn the reason into a two-word
column with the button hanging off the edge. */
@media (max-width: 34rem) {
.setup .item { grid-template-columns: 1fr; gap: .15rem; }
.setup .row-action { justify-self: start; margin-top: .3rem; }
}
/* --- Credentials issued with a registration ----------------------------- */
/* The name of what is below it, not a heading: two of these stack in one
dialog and a real heading would compete with the dialog's own. */
.cred-label {
margin: .9rem 0 .3rem; font-size: .68rem; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted);
}
.cred-label:first-child { margin-top: 0; }
/* Wider than the forms. This dialog shows configuration lines, not fields: at
27rem each connection string wraps over three lines, which pushed the signing
secret below the fold -- and that is the one whose absence later looks like a
401 from a wrong secret. */
#dialog-credentials { width: min(42rem, calc(100vw - 2rem)); }
/* It still scrolls if it has to, so the button that dismisses it is always
reachable: closing it is the only way to lose the secrets, and it must never
be off-screen. */
/* The margin is here and not on the label: the label carries `margin-top: 0`
as the first of a stack, and without this it sits flush against the sentence
above it, which belongs to the dialog and not to the block. */
#cred-body { margin-top: .9rem; max-height: min(32rem, 70vh); overflow-y: auto; }
/* --- Columns a narrow screen does without ------------------------------- */
/* Not scrolling sideways is only half the fix. Nine columns in a 495px panel
do fit -- the table caps itself -- but they fit as `J...`, `ST...` and dates
read `2...`, which is a table that no longer says anything. So the ones that
are historical totals, or that the row can be understood without, come out.
`display: none` on the `` is what collapses the column and hands its
share to the one that absorbs the slack; the `th` and the `td` need it too,
or the remaining cells shift one column to the left. */
@media (max-width: 44rem) {
.scroll col.minor, .scroll th.minor, .scroll td.minor { display: none; }
}
/* --- What a retirement takes, and what it leaves ------------------------ */
/* No bullet and no indent: these are two short inventories inside a dialog,
and a bulleted list there reads as prose to be skimmed rather than as the
two columns of a decision. */
.plain { margin: 0 0 .2rem; padding: 0; list-style: none; }
.plain li { padding: .12rem 0; font-size: .82rem; color: var(--muted); }
/* The half that is irreversible gets the colour; the half that survives does
not need one. */
#rt-gone li { color: var(--text); }
#rt-gone li::before { content: "\2212\00a0"; color: var(--bad); }
#rt-kept li::before { content: "\2713\00a0"; color: var(--ok); }
/* --- The dashboard's pointer at what is unfinished ---------------------- */
/* One line and not the panel: the panel with its buttons lives on the Agents
page, where things are changed. What the dashboard owes is the signal. */
.setup-line {
margin: 0 0 1.2rem; padding: .55rem .8rem; border-radius: 7px;
font-size: .82rem; color: var(--muted); background: var(--panel);
border: 1px solid color-mix(in srgb, var(--waiting) 45%, transparent);
}
.setup-line a { color: var(--accent); }
/* --- What feeds an agent ------------------------------------------------ */
.source-row { padding: .55rem 0; }
.source-row + .source-row { border-top: 1px solid var(--border); }
/* The name, its match and its button on one line; the secret, once asked for,
below. */
.source-head { display: flex; align-items: center; gap: .55rem; font-size: .84rem; }
.source-head .muted { font-size: .76rem; overflow-wrap: anywhere; }
.source-head .chip { text-transform: uppercase; letter-spacing: .05em; }
#sr-body { max-height: min(26rem, 60vh); overflow-y: auto; margin-bottom: .8rem; }
#dialog-sources { width: min(40rem, calc(100vw - 2rem)); }
/* Two histories, one panel. The tab that is on reads as the heading it
replaced -- there is no title above them, because the labels are the
title. */
.tabs { display: flex; gap: .35rem; align-items: baseline; margin: 1.6rem 0 .6rem; }
.tabs button {
background: none; border: none; padding: 0 0 .15rem;
font-size: 1rem; font-weight: 600; color: var(--muted); cursor: pointer;
border-bottom: 2px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabs button:hover:not([aria-selected="true"]) { color: var(--text); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabs .divider { color: var(--muted); opacity: .5; }