/* Dragon Websites — interface styles.
This file is Dragon Command Center's app.css, carried across so the two products are the
same product to look at. Keep it that way: when one changes, copy it rather than editing
one of the two copies, and put anything only this app needs in the section at the end.
Spacing is deliberately generous: elements never touch or crowd, and vertical
margins are symmetric so sections read as evenly separated blocks. */
/* The interface is dark, and the browser needs telling. Without this it styles native
controls -- checkboxes, the tier select, date pickers, scrollbars -- for a light page,
so an unchecked checkbox rendered as a bright white square on a near-black table. */
:root {
color-scheme: dark;
}
:root {
--bg: #0f1216;
--surface: #171b21;
--surface-raised: #1e242c;
/* A step below the surface, for the areas that frame something rather than hold it: a
dialog's header and footer. Darker than the body they sit against, which is what makes
three areas read as three. */
--surface-sunken: #12161b;
--border: #2a323c;
--text: #e6eaef;
/* Lightened from #9aa5b1, which read at 6.91:1 on the surface and 6.24:1 on a raised
card -- under the 7:1 that AAA asks of body text, on the color most of this product's
prose is set in. This clears it on every surface here: 8.12:1 on the surface, 7.34:1
on a card, 8.53:1 in a dialog's header. */
--text-muted: #a8b3bf;
/* The arc for items nobody has taken up: the muted text color, softened, so it reads as
the quiet part of a ring rather than as a fourth state with something to say. */
--donut-idle: rgba(154, 165, 177, 0.4);
/* Orange, in two jobs that pull opposite ways.
As text on a dark page it has to be light enough to read against it; as a fill under
a white label it has to be dark enough for the label to be read against it. One
value cannot do both: the old single orange gave its buttons a label at 4.05:1,
under the 4.5:1 the rule asks for, while reading at 4.26:1 on a card, also under it.
So there are two, each measured for the job it does, and each with a hover a step
lighter that stays over the line. */
--accent: #e06529;
--accent-hover: #f0935a;
--accent-fill: #a94519;
--accent-fill-hover: #c4501d;
--ok: #3fa66a;
--warn: #d19a3c;
/* Red as text: pills, alerts, the strength meter's first step. Lightened for the same
reason the orange was -- it read at 3.92:1 on a card, which is not a reading. */
--danger: #e06b6b;
--danger-hover: #f09a9a;
/* The red a destructive button is filled with.
--danger itself is tuned for text and pills on the dark surface, which puts it at
much the same lightness as the accent orange -- so a Revoke button and a Save button
read as the same button at a glance down a table. This one is darker and further from
the orange, which is the whole job of the color on a control that cannot be undone. */
--danger-strong: #9e2b2b;
--danger-strong-hover: #c23333;
/* Password strength, one step per requirement met. Chosen for even perceived
spacing on the dark surface rather than by rotating hue mechanically. */
--strength-1: #cf4b4b;
--strength-2: #d97036;
--strength-3: #d19a3c;
--strength-4: #a8ac41;
--strength-5: #3fa66a;
--space-xs: 0.5rem;
--space-sm: 0.875rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
/* How wide a switch is. */
--toggle-width: 34px;
/* The height of the strip that closes the page, under the navigation and under the
content alike.
The rule above the footer and the rule under the account block read as one line
drawn across the page, interrupted by the column edge. Where each sits is decided
by the height of what is beneath it, and those two heights used to be arrived at
separately -- one from padding and a line of small text, the other from padding and
a name -- which put the navigation's rule eight pixels above the footer's. Both
blocks are this tall now, so the line meets itself. */
--page-foot: 4.5rem;
--radius: 10px;
--measure: 68rem;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Nothing scrolls sideways. */
body { overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; }
/* A link lightens as well as underlining. The underline alone is easy to miss on a line
that already sits among other text, and the lighter orange reads at a higher contrast
than the resting one rather than a lower one. */
a:hover { color: var(--accent-hover); text-decoration: underline; }
/* ---------------------------------------------------------------------------
Hovering fades rather than snaps.
Half a second, and in both directions: the transition is declared on the
resting state, not on :hover, so it governs the pointer arriving and leaving
alike. Declared on :hover it would ease in and snap back.
Only what actually changes under the pointer is listed. Transitioning
everything would catch layout properties as well and make a hovered row
appear to resize itself.
Two things are deliberately left out. The sub-navigation reveal has its own
timing, chosen separately. And the toggle switch keeps its 120ms: that one is
a control changing state rather than a hover, and half a second of travel
after a click reads as the switch not having registered it.
--------------------------------------------------------------------------- */
a,
button,
.button,
.sidenav-toggle,
.icon-button,
.account-tab,
.stat-toggle,
th.is-sortable,
tbody tr,
.picker-button,
.picker-row {
transition:
background-color 500ms ease,
color 500ms ease,
border-color 500ms ease;
}
@media (prefers-reduced-motion: reduce) {
a,
button,
.button,
.sidenav-toggle,
.icon-button,
.account-tab,
.stat-toggle,
th.is-sortable,
tbody tr,
.picker-button,
.picker-row {
transition: none;
}
}
/* ---------------------------------------------------------------------------
The navigation column.
Down the left rather than across the top. A row runs out of width as it grows
-- it already wrapped onto a second line on a narrow window -- and a row has
nowhere at all to put an item nested under another. A column grows downward,
which is the direction there is always more of, and nesting is just an indent.
--------------------------------------------------------------------------- */
body.has-sidenav {
display: grid;
grid-template-columns: 15rem 1fr;
min-height: 100vh;
}
/* Without this the content column refuses to be narrower than its widest child,
and a wide table pushes the whole grid sideways instead of scrolling inside
its own container. A grid child's default minimum is its content, not zero. */
.shell { min-width: 0; display: flex; flex-direction: column; }
.shell > main { flex: 1 0 auto; }
.sidenav {
background: var(--surface);
/* The accent edge belongs to the column itself rather than to the admin area. It
used to mark the platform-administration side alone; the two navigations are meant
to look the same, so it is the default and there is no second version of it. */
border-right: 1px solid var(--accent);
/* The column stays put while the page scrolls: with a dozen destinations, having
to scroll back to the top to reach one is the thing a sidebar is meant to fix. */
position: sticky;
top: 0;
align-self: start;
/* A full viewport height, not merely a cap: the account block is pinned to the
bottom of the column, and against a content-height column it sat directly under
the last link with the page background showing beneath it. */
height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-md) 0;
}
.sidenav-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 0 var(--space-md);
}
.sidenav-body {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--space-md);
min-height: 0;
}
.sidenav-list {
list-style: none;
margin: 0;
padding: 0;
}
.sidenav-list a {
display: block;
padding: var(--space-xs) var(--space-md);
color: var(--text-muted);
border-left: 2px solid transparent;
font-size: 0.92rem;
}
.sidenav-list a:hover {
color: var(--text);
background: var(--surface-raised);
text-decoration: none;
}
/* Where you are, and where you are inside. The second matters once items nest:
a marked child with an unmarked parent reads as two unrelated things. */
.sidenav-list a.is-current {
color: var(--text);
background: var(--surface-raised);
border-left-color: var(--accent);
font-weight: 600;
}
.sidenav-list a.is-within { color: var(--text); }
/* A nested list is indented and quieter, so the hierarchy is legible without a
second mechanism. */
.sidenav-list.is-sub {
margin: 0;
}
.sidenav-list.is-sub a {
padding-left: calc(var(--space-md) + var(--space-md));
font-size: 0.86rem;
}
/* Sub-items appear on hover, and on keyboard focus so they are not mouse-only.
The open and closed states are a single grid row of 0fr and 1fr, which interpolates to
whatever height the list actually is. The obvious alternative, animating max-height
between zero and a number large enough for any list, is what this replaced: against a
list 76px tall that number had to be 384px, so opening reached full height in a fifth
of the duration and closing spent four fifths of it moving invisibly back down before
anything appeared to happen. It read as a snap with a delay in front of it, which is
worse than no animation at all.
An item with no children carries no .has-sub and is unaffected, which is what lets
this ship before there is a single sub-item to show. */
.sidenav-sub {
display: grid;
grid-template-rows: 0fr;
transition:
grid-template-rows 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 220ms ease;
opacity: 0;
}
/* The row is what collapses, so the list inside it must be allowed to be shorter than
its content and must not spill while it is. */
.sidenav-sub > .sidenav-list {
min-height: 0;
overflow: hidden;
}
.sidenav-list .has-sub:hover > .sidenav-sub,
.sidenav-list .has-sub:focus-within > .sidenav-sub {
grid-template-rows: 1fr;
opacity: 1;
}
/* The section you are actually in stays open, so the marked child is not hidden the
moment the pointer leaves. */
.sidenav-list .has-sub:has(a.is-current) > .sidenav-sub {
grid-template-rows: 1fr;
opacity: 1;
}
/* Motion is decoration here: the list opens either way, and someone who has asked their
system for less of it should not be made to wait through a curve. */
@media (prefers-reduced-motion: reduce) {
.sidenav-sub { transition: none; }
}
/* Who you are sits at the bottom of the column, away from the destinations, and opens
the same way any other section does. Its own sub-items -- Profile and Sign Out -- are
revealed on hover rather than standing permanently at the foot of every page. */
/* The count beside a name in the column.
The only thing that tells somebody an alert exists without their opening the page, so
it is legible rather than decorative: the tone the pills use for something wrong, and
room around the figure so a three-digit count does not touch the word beside it. */
.nav-count {
display: inline-block;
margin-left: var(--space-xs);
padding: 0 0.4rem;
border-radius: 999px;
background: var(--danger-strong);
color: #fff;
font-size: 0.75rem;
font-weight: 650;
line-height: 1.5;
}
.sidenav-account {
margin-top: auto;
/* The column's own bottom padding would sit beneath this block and lift its rule off
the footer's line, so the block runs to the bottom edge of the column instead and
takes the closing strip's height itself. */
margin-bottom: calc(var(--space-md) * -1);
min-height: var(--page-foot);
border-top: 1px solid var(--border);
/* Centered in the strip rather than sitting at the top of it, which puts the name on
the same row as the footer's own line across the way. Padding rather than none, so
that the sub-items revealed on hover do not touch the rule when the block grows. */
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-sm) 0;
}
/* The name is one line and truncated rather than broken wherever it reaches the edge.
A long display name split across two lines reads as two names. */
.sidenav-account > .sidenav-list > li > a {
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Only ever visible on a narrow screen, where the column becomes a bar. */
/* A mark rather than a box. Every other icon in this product is drawn without edges, and
a bordered rectangle in the corner of a phone screen read as a button somebody had
already pressed. The tap target keeps its size through the padding. */
.sidenav-toggle {
display: none;
background: none;
border: none;
color: var(--text);
padding: 0.25rem 0.6rem;
font-size: 1rem;
line-height: 1;
}
/* The button rule draws a hairline inside every button on hover, which on a mark with no
fill and no label reads as a box appearing around it -- the same reason the icon buttons
turn it off. */
.sidenav-toggle:hover {
background: none;
color: var(--accent);
box-shadow: none;
}
/* Keyboard users get past the whole column in one keystroke. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10;
background: var(--surface-raised);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--accent);
border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
/* Two lines, always: "Dragon" over what it is. Left to wrap on its own it broke
wherever the column happened to run out -- "Dragon Command" over "Center" -- which
splits the product's name across the break instead of at it. */
.wordmark {
display: block;
font-size: 1.05rem;
font-weight: 650;
letter-spacing: 0.01em;
line-height: 1.25;
color: var(--text);
}
.wordmark span {
display: block;
color: var(--accent);
}
/* The wordmark is a brand mark rather than a link in a sentence, so it does not take
the underline that the global a:hover rule gives every other link. */
.wordmark:hover { text-decoration: none; }
main {
max-width: var(--measure);
margin: 0 auto;
width: 100%;
/* Symmetric top and bottom. */
padding: var(--space-lg) var(--space-md);
}
h1 {
font-size: 1.6rem;
font-weight: 650;
margin: 0 0 var(--space-xs);
letter-spacing: -0.01em;
}
h2 {
font-size: 1.15rem;
font-weight: 620;
margin: 0 0 var(--space-sm);
}
.lede {
color: var(--text-muted);
margin: 0 0 var(--space-lg);
max-width: 46rem;
}
/* The measure exists so a paragraph of prose is comfortable to read. Above a table that
runs the width of the page, a paragraph stopping two thirds of the way across reads as
a ragged edge rather than as a considered line length. */
.lede.wide { max-width: none; }
section { margin: 0 0 var(--space-xl); }
section:last-of-type { margin-bottom: 0; }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-md);
}
.card + .card { margin-top: var(--space-md); }
/* The last thing in a card sits as far from the bottom edge as the first sits from the
top, and no farther.
Two things had been adding to the card's own padding rather than sitting inside it: a
field's bottom margin, which is spacing between fields and belongs between them, and
the bottom padding of a table's final row, which is the table's internal rhythm. Both
read as a band of empty ground under the last item -- forty pixels of it under the
time zone -- and neither is anything anyone asked for. */
.card > *:last-child { margin-bottom: 0; }
/* Named rather than left to the rule above, which a later `.field:last-of-type` outweighs
at equal specificity. A field's generous bottom margin is spacing before the next field
and has nothing to sit before when it is the last thing in the card. */
.card > .field:last-child { margin-bottom: 0; }
.card > table:last-child tbody tr:last-child > td,
.card > .table-wrap:last-child tbody tr:last-child > td {
padding-bottom: 0;
}
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-sm);
flex-wrap: wrap;
}
/* Tables size to their content and scroll inside their own container rather than
pushing the page sideways. */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
/* The ground anything drawn over a table is placed against -- today the line that shows
where a dragged row would land. */
position: relative;
}
table {
border-collapse: collapse;
width: auto;
min-width: 100%;
}
th, td {
text-align: left;
/* Cells align to the top. A row whose first cell runs to several lines -- a setting with a
list of domains under it -- would otherwise float its status and controls to the middle
of that height, leaving them out of line with the single-line rows above and below. */
vertical-align: top;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
th {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
background: var(--surface-raised);
}
/* A table whose rows are all one line high, where the tallest thing in a row is a
control rather than text. Top alignment is the default because a cell that wraps to
several lines would otherwise drag its row's status and buttons to the middle of that
height; where nothing wraps there is no such height, and the words simply need to sit
across from the button rather than above it. */
table.middle-data th,
table.middle-data td {
vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-raised); }
td.wrap { white-space: normal; min-width: 16rem; }
/* For values that are long but should not claim a wide column of their own.
overflow-wrap breaks only where it must, so an email wraps at a sensible point
instead of one character per line. */
td.wrap-tight {
white-space: normal;
overflow-wrap: break-word;
max-width: 20rem;
min-width: 9rem;
}
.pill {
display: inline-block;
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.pill-active { background: rgba(63, 166, 106, 0.16); color: var(--ok); }
.pill-failing { background: rgba(207, 75, 75, 0.16); color: var(--danger); }
.pill-revoked { background: rgba(154, 165, 177, 0.16); color: var(--text-muted); }
/* Partly configured: some items done, some not. Amber reads as "attention", not "broken". */
.pill-partial { background: rgba(214, 158, 46, 0.16); color: var(--warn, #d69e2e); }
.pill-stale { background: rgba(209, 154, 60, 0.16); color: var(--warn); }
/* The standard rate: a state like the other two beside it, and the quiet one of the
three, because it is what most rows say and nothing about it needs attention. */
.pill-standard { background: rgba(154, 165, 177, 0.16); color: var(--text-muted); }
.muted { color: var(--text-muted); }
/* A paragraph set as a block: both edges even, the way the sentences before a deletion
are set. For prose that states an arrangement rather than describing the page -- the
terms an account is held on. Words are never broken across lines to achieve it. */
.justified {
text-align: justify;
hyphens: manual;
}
.empty {
color: var(--text-muted);
padding: var(--space-lg);
text-align: center;
}
/* Forms */
form { margin: 0; }
.field { margin-bottom: var(--space-md); }
.field:last-of-type { margin-bottom: var(--space-lg); }
/* A card whose last row of fields is its last thing at all.
The trailing margin above is room for whatever follows the fields -- a button, another
row -- and where nothing follows, it leaves the card sitting lower on the bottom than
on the top. */
.card-tight .field:last-of-type { margin-bottom: 0; }
label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: var(--space-xs);
}
.hint {
display: block;
font-size: 0.82rem;
font-weight: 400;
color: var(--text-muted);
margin-top: 0.35rem;
}
/* A note that belongs to the whole form rather than to one field, standing between the
fields and the button that acts on them. It takes the same space under it that a row of
fields takes, so the button is not pressed against the sentence explaining what it does. */
form > .hint {
margin-bottom: var(--space-lg);
}
input, select {
width: 100%;
padding: 0.7rem 0.85rem;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
font: inherit;
font-size: 0.95rem;
}
input:focus, select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(212, 87, 31, 0.18);
}
/* The browser's own arrow is drawn wherever the platform likes, which on this theme
left it almost touching the right border and no amount of padding moved it reliably.
Drawing our own puts it at a distance we choose, identically in every browser. The
chevron is an inline data URI rather than a file so it cannot 404 and costs no
request. */
select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239aa5b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.9rem center;
background-size: 0.7rem;
/* Room for the chevron and the gap either side of it, so a long option never runs
underneath it. */
padding-right: 2.4rem;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-md);
/* Fields align at the top, so a hint under one input does not shift its neighbors. */
align-items: start;
}
button, .button {
display: inline-block;
padding: 0.65rem 1.3rem;
border: 1px solid transparent;
border-radius: 8px;
background: var(--accent-fill);
color: #fff;
font: inherit;
font-weight: 600;
font-size: 0.92rem;
cursor: pointer;
}
/* Hover lightens the fill and adds a hairline inside the edge. The fill alone can only
move so far before the white label stops being readable against it, and the ring costs
no contrast at all -- so the two together are what makes the change plain. */
button:hover, .button:hover {
background: var(--accent-fill-hover);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
/* A link styled as a button is still a link, so the rule that lightens link text on
hover reaches it and turned its label orange on an orange fill. The label is white
because it is read against that fill; hovering does not change what it is read
against. */
color: #fff;
text-decoration: none;
}
/* The secondary treatment applies to links styled as buttons too. Without the .button
selector here, an fell back to the filled accent style and
shouted louder than the real action beside it. */
button.secondary, .button.secondary {
background: transparent;
border-color: var(--border);
color: var(--text);
}
button.secondary:hover, .button.secondary:hover { background: var(--surface-raised); }
/* An action in a table row stays on one line: a wrapped label pushes the info icon onto a
line of its own and makes every row taller than it needs to be. */
/* Buttons standing side by side under a table. Only a table cell's row of actions was ever
given a gap, so a pair outside one sat with nothing between them but the space in the
markup -- which collapses to a single character's width. */
div.row-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-md);
}
td.row-actions .button.small,
td.row-actions button.small {
white-space: nowrap;
}
button.danger, .button.danger { background: var(--danger-strong); }
button.danger:hover, .button.danger:hover { background: var(--danger-strong-hover); }
button.link {
background: none;
border: none;
color: var(--danger);
padding: 0;
font-size: 0.88rem;
text-decoration: underline;
}
/* Text rather than a fill, so it lightens the way a link does -- in its own color, since
a red control that turned orange on hover would read as a different control. */
button.link:hover { background: none; color: var(--danger-hover); }
/* The small treatment applies to links styled as buttons too, for the same reason the
secondary treatment above does: an matched neither the padding
nor the font size, so it sat a head taller than the real button beside it while the
markup on both said "small". A class that silently does nothing on one of the two ways
a button is written is worse than no class at all. */
button.small, .button.small {
padding: 0.35rem 0.8rem;
font-size: 0.82rem;
}
button:disabled { opacity: 0.55; cursor: not-allowed; }
/* The same room above as below.
It had a bottom margin and no top one, so the box sat against whatever came before it
and a comfortable distance from what came after. Symmetric values alone were not
enough: vertical margins between siblings collapse to the larger of the two, so a
24px top margin under a paragraph carrying 40px still rendered 40 above and 24 below.
Matching the largest margin a neighbor is likely to bring makes both sides settle at
the same number. */
.notice {
padding: var(--space-sm) var(--space-md);
border-radius: 8px;
margin: var(--space-lg) 0;
font-size: 0.92rem;
border: 1px solid transparent;
}
.notice-error { background: rgba(207, 75, 75, 0.12); border-color: rgba(207,75,75,0.4); color: #f0b4b4; }
.notice-ok { background: rgba(63, 166, 106, 0.12); border-color: rgba(63,166,106,0.4); color: #a8ddc0; }
.notice[hidden] { display: none; }
.auth-panel {
max-width: 26rem;
margin: var(--space-xl) auto;
}
/* A heading with no paragraph under it carries the room that paragraph used to.
The h1's own bottom margin is small because it almost always has a lede beneath
it; where the lede is gone, that leaves the heading sitting against the card. */
.auth-panel h1:not(:has(+ .lede)) {
margin-bottom: var(--space-lg);
}
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--space-md);
}
/* A second row of tiles under the first. The gap between the rows is the gap between the
tiles, so a set split over two lines reads as one block rather than two sections. */
.stat-row-next {
margin-top: var(--space-md);
}
/* Every tile on one line, however many there are.
A client's dashboard is one answer about one client, and auto-fit would break the last
tile or two onto a line of their own on a middling screen, which reads as a second set.
Below the width where five tiles still have room to be read, it goes back to fitting as
many as will fit. */
.stat-row-one {
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-columns: none;
}
@media (max-width: 900px) {
.stat-row-one {
grid-auto-flow: row;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
}
.stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-md);
/* A tile is a figure and its name, one above the other, and nothing else shares the
line with either. Centered, the two read as one object however wide the tile gets. */
text-align: center;
/* Held in the middle, so a tile with a ring in it and a tile with a figure in it carry
what they hold the same way. Aligned to the top, the shorter contents sat high in a
box that had grown for its neighbor and read as a tile with a gap under it. */
display: flex;
flex-direction: column;
justify-content: center;
}
.stat .value { font-size: 1.7rem; font-weight: 650; line-height: 1.2; }
.stat .label { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.2rem; }
/* A kind's items as one ring.
Every item of that kind is in exactly one arc -- paid for, carried free, or found and
never taken up -- so the three are a whole, which is what a ring says and three numbers
side by side do not. The two boundaries come from the server as percentages; the colors
stay here. A kind with nothing in it sets both to zero and reads as an empty gray ring
rather than as a full arc of something there is none of. */
.donut {
position: relative;
width: 4.5rem;
height: 4.5rem;
margin: 0 auto var(--space-sm);
border-radius: 50%;
background: conic-gradient(
var(--ok) 0 var(--pro-end, 0%),
var(--warn) var(--pro-end, 0%) var(--free-end, 0%),
var(--donut-idle) var(--free-end, 0%) 100%
);
}
/* The hole. Painted in the tile's own background rather than masked, so the ring looks
the same in a browser without mask support. */
.donut::after {
content: '';
position: absolute;
inset: 24%;
border-radius: 50%;
background: var(--surface);
}
/* A pie is the same circle with the hole filled in. Nothing else about it differs, which
is why it is one class here rather than a second gradient to keep in step. */
.donut.is-pie::after {
content: none;
}
/* The same three parts as bars, upright or lying down.
Each bar is a share of the kind's total, not of the largest of the three: a full bar
means "all of them" on every tile, where scaling to the largest would leave one bar
full on every tile and make two tiles impossible to compare. The track behind each bar
is the whole, so a short bar still shows what it is short of. */
.bars {
display: flex;
margin: 0 auto var(--space-sm);
}
.bar-track {
background: rgba(154, 165, 177, 0.12);
border-radius: 999px;
overflow: hidden;
}
.bar-fill {
display: block;
border-radius: 999px;
}
.bar-fill.is-pro { background: var(--ok); }
.bar-fill.is-free { background: var(--warn); }
.bar-fill.is-idle { background: var(--donut-idle); }
/* One bar rather than three: the ring unrolled, read in the same order.
The three segments are parts of one length, so the bar is always full and the eye
compares them against each other rather than each against an empty track. The track
itself only shows through when a kind has nothing in it at all. */
.stack {
display: flex;
overflow: hidden;
}
.stack .bar-fill {
border-radius: 0;
}
.stack-vertical {
flex-direction: column;
width: 0.9rem;
height: 4.5rem;
margin: 0 auto var(--space-sm);
}
.stack-vertical .bar-fill {
width: 100%;
height: var(--share, 0%);
}
.stack-horizontal {
width: 100%;
height: 0.9rem;
}
.stack-horizontal .bar-fill {
height: 100%;
width: var(--share, 0%);
}
/* A single lying-down bar is much shorter than a ring, so it is centered in the height a
ring would have taken. A tile keeps its proportions whichever shape is chosen. */
.stack-holder {
display: flex;
align-items: center;
height: 4.5rem;
margin-bottom: var(--space-sm);
}
/* Upright: three columns standing on one line, the height of the tallest ring they
replace so a row of tiles keeps its height whichever shape is chosen. */
.bars-vertical {
height: 4.5rem;
gap: var(--space-sm);
align-items: flex-end;
justify-content: center;
}
.bars-vertical .bar-track {
width: 0.85rem;
height: 100%;
display: flex;
align-items: flex-end;
}
.bars-vertical .bar-fill {
width: 100%;
height: var(--share, 0%);
}
/* Lying down: three rows, read top to bottom in the same order the colors are given. */
.bars-horizontal {
flex-direction: column;
justify-content: center;
gap: 0.55rem;
width: 100%;
height: 4.5rem;
}
.bars-horizontal .bar-track {
width: 100%;
height: 0.7rem;
}
.bars-horizontal .bar-fill {
height: 100%;
width: var(--share, 0%);
}
/* The same three counts under the ring, each in its arc's color and in its order. */
.donut-figures {
font-size: 1.35rem;
color: var(--text-muted);
}
.donut-figures .is-pro { color: var(--ok); }
.donut-figures .is-free { color: var(--warn); }
.donut-figures .is-idle { color: var(--text-muted); }
/* The word after a number in a tile or a cell -- "1 Free / 2 Pro". Quieter and smaller
than the figure it labels, because the figures are what is compared down a column and
the words say the same thing on every row. */
.unit {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-muted);
margin-left: 0.2rem;
}
/* Confirmation modal. Confirmations use this, never the browser's own dialogs. */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(8, 10, 13, 0.72);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
z-index: 50;
}
.modal-backdrop[hidden] { display: none; }
/* Three areas, drawn as three areas: the padding belongs to each of them rather than to the
dialog, so the rules between them run the whole width and a header reads as a header
instead of as the first line of the body. */
.modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0;
max-width: 30rem;
width: 100%;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
/* A column of three, so a dialog too tall for the window scrolls its body and keeps its
title and its buttons where they are. The whole dialog used to scroll, which put the
button that ends it below the bottom of the screen. */
display: flex;
flex-direction: column;
max-height: 90vh;
}
/* The title, and at the far end of the same row the mark that explains the dialog. Centered
against each other rather than sitting on a shared baseline: one is words and the other a
circle, and a baseline would hang the circle low. */
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border);
background: var(--surface-sunken);
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
/* The title carries no margin of its own here, and sits on the same line box as the mark
beside it. Written against the header as well as the heading: the dialog's own heading
rule further down sets a bottom margin, and an equal-specificity selector earlier in the
file loses to it -- which is where the space under the title came from. */
.modal .modal-head h3 {
margin: 0;
line-height: 1.2;
}
/* Quiet until it is wanted. The mark is an offer, not an instruction, so it sits back until
the pointer is on it -- written against the header as well as the mark, because every
icon button is drawn in the accent color and a bare class does not outrank that. */
.modal-head .modal-info { color: var(--text-muted); }
.modal-head .modal-info:hover { color: var(--accent); }
.modal-body {
padding: var(--space-lg);
overflow-y: auto;
}
/* The body carries the space under its own last element, so a dialog does not end with a
paragraph's margin pressed against the rule above the buttons. */
.modal-body > *:last-child { margin-bottom: 0; }
/* Every button a dialog has, in one place at the end of it. */
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--border);
background: var(--surface-sunken);
border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}
/* The modal's headings and its section labels are one style: "Recommendation" and "Where To
Change It" are headings of their sections, so they read like the title above them rather
than as a different kind of thing. */
.modal h3,
.modal .modal-reco-label { margin: 0 0 var(--space-sm); font-size: 1.1rem; color: var(--text); }
/* One paragraph style throughout, in the muted tone. The description and the recommendation
were two different colors, which made the same kind of prose look like two kinds; the muted
tone is the quieter of the two and lets the headings carry the structure. */
/* Justified, as in the danger card this usually follows from: what is read last before
something is deleted reaches both edges rather than ending each line wherever the words
ran out. No hyphenation with it: a word is never broken across two lines here, so on a
measure this narrow the word spacing carries the justification by itself. */
.modal p {
margin: 0 0 var(--space-lg);
color: var(--text-muted);
text-align: justify;
hyphens: manual;
}
footer {
border-top: 1px solid var(--border);
margin-top: var(--space-xl);
/* Height comes from --page-foot rather than from the padding, so that the rule above
it lands on the same row as the one under the navigation. See that token. */
min-height: var(--page-foot);
padding: 0 var(--space-md);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-muted);
font-size: 0.85rem;
}
/* Below this there is not enough width for a column of navigation beside the
content, so it becomes a bar across the top with the list folded away behind
the toggle. The bar itself stays put; only the list collapses. */
@media (max-width: 900px) {
body.has-sidenav { grid-template-columns: 1fr; }
.sidenav {
position: static;
/* Released from the full viewport height it takes as a column. Left at 100vh the
bar alone filled the screen and pushed every page's content below the fold. */
height: auto;
max-height: none;
overflow: visible;
border-right: none;
border-bottom: 1px solid var(--accent);
/* As a bar it carries the brand and the menu mark and nothing else, so it is spaced
like a header: the same air under them as above. Zero here left the rule sitting
directly under the wordmark. */
padding-bottom: var(--space-md);
gap: var(--space-sm);
}
.sidenav-toggle { display: inline-block; }
/* Collapsed by the client script. It ships expanded so that a browser running no
script shows the whole list rather than a button that does nothing. */
.sidenav-body[hidden] { display: none; }
.sidenav-body { padding-bottom: var(--space-md); }
/* No column here, so no rule to line the footer up with: the account block is one more
row in a bar and goes back to being only as tall as its contents. */
.sidenav-account {
margin-top: var(--space-sm);
margin-bottom: 0;
min-height: 0;
padding-top: var(--space-sm);
}
/* There is no hover on a touch screen, so nothing would ever reveal a sub-item. The
whole list is already behind the toggle here and vertical room is not the constraint
it is in a column, so children are simply shown, with nothing to animate. */
.sidenav-sub {
grid-template-rows: 1fr;
opacity: 1;
transition: none;
}
}
@media (max-width: 640px) {
main { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.modal-footer { flex-direction: column-reverse; }
.modal-footer button { width: 100%; }
}
/* Administration. Visually distinct so it is never ambiguous whose data is on screen:
the wordmark in the navigation column reads "Dragon Administration" and the column
itself is edged in the accent, which says it on every page without a bar of prose. */
/* Money reads down the column, so it is right-aligned and figures line up. Tabular
numerals keep the digits on a shared grid; proportional ones make $9.99 and $11.00
ragged against each other. */
td.amount, th.amount {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Everything but the name column centered. The name is what the table is read by, and a
centered column of names has no edge to run the eye down. */
table.center-data th:not(:first-child),
table.center-data td:not(:first-child) {
text-align: center;
}
/* Where the first column is a checkbox, the name is the second and the rule above would
center it. The checkbox centers under its own heading; the cell after it goes left. */
table.center-data th.pick + th,
table.center-data td.pick + td {
text-align: left;
}
/* An action column ends at the table's own edge.
Left to itself the column takes whatever width is going and the buttons float
somewhere inside it, so a row of them down the table has no shared edge to read
against. Named explicitly under center-data as well, which would otherwise center
every column but the first and outrank a plainer selector. */
th.actions-end,
td.actions-end,
table.center-data th.actions-end,
table.center-data td.actions-end {
text-align: right;
}
/* A column of prose in an otherwise centered table.
An address is read along its length, like a name, and centering leaves it with no edge
to run the eye down -- the same reason the first column stays left. Named under
center-data as well, which centers everything after the first and would otherwise
outrank a plainer selector. */
th.align-start,
td.align-start,
table.center-data th.align-start,
table.center-data td.align-start {
text-align: left;
}
/* A column no wider than what is in it.
A width of 1% is the browser's way of being told "as narrow as the content allows": the
table still has to reach the full width, so every spare pixel goes to the columns that
can use it and this one closes up around its own text, at the far edge of the table.
Nowrap keeps that closing from breaking a word across two lines. */
th.col-tight,
td.col-tight {
width: 1%;
white-space: nowrap;
}
/* Invoice numbers are identifiers, not prose: even width so they scan as a column. */
td.num {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* The field inside a prompt modal. Caption above the input, both full width, with the
same breathing room as the rest of the dialog. */
.modal-field {
display: block;
margin-top: var(--space-md);
}
/* A field the chosen service does not need. The browser's own rule for [hidden] is display:
none, and the block above outranks it -- so a field hidden in script stayed on screen,
asking Backblaze users for an address the region already determines. */
.modal-field[hidden] { display: none; }
.modal-field span {
display: block;
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
.modal-field input {
width: 100%;
box-sizing: border-box;
}
/* The field is wrapped in its own label, which is set in semibold, and an input inherits its
weight -- so the example inside it and anything typed there came out bold, while every
other field in the product is set at the ordinary weight. The caption stays bold; what is
in the box does not. */
.modal-field input,
.modal-field select {
font-weight: 400;
}
/* A switch and whatever belongs to it: the row itself, and the setup that only matters
while that row is on. The group holds the rule between rows, so a panel opening does not
push a line out from under its own switch. */
.switch-group { border-bottom: 1px solid var(--border); }
.switch-group:last-child { border-bottom: none; }
.switch-group .switch-line { border-bottom: none; }
/* Opened and closed by a grid row rather than by height, which is the one way to animate
from nothing to whatever the content turns out to be: a height can only be interpolated
between two numbers, and the number here is not known until the panel is open. */
.switch-extra {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 200ms ease;
}
.switch-extra > .switch-extra-inner {
min-height: 0;
overflow: hidden;
}
.switch-extra.is-open {
grid-template-rows: 1fr;
opacity: 1;
}
/* Set in from the name above it, so it reads as belonging to that row rather than as the
next thing in the table, and given room to breathe once open. No gutter on the right:
the switch has a column of its own now, so there is nothing on this side to stay clear
of. */
.switch-extra.is-open > .switch-extra-inner {
padding: var(--space-xs) 0 var(--space-md) var(--space-md);
}
/* The other kind of panel: not an aside about the service its row names, but the settings
that row governs. These are the card's own content, so they are full width and set in from
nothing, and the last of them gives its trailing margin back so the space under the final
field matches the space over the switch. */
.switch-extra.is-plain.is-open > .switch-extra-inner {
padding: var(--space-md) 0 0;
}
.switch-extra.is-plain .field:last-of-type { margin-bottom: 0; }
/* Somebody who has asked their system not to animate gets the same panel, immediately. */
@media (prefers-reduced-motion: reduce) {
.switch-extra { transition: none; }
}
/* Two fields that are halves of one thing -- a key and its secret -- side by side, so they
read as the pair they are and are copied across in one go. Equal columns, and they stack
on a narrow screen where two of them would be too cramped to type into. */
.field-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
align-items: start;
}
.field-pair > .field { margin-top: 0; }
@media (max-width: 40rem) {
.field-pair { grid-template-columns: 1fr; }
}
/* Six settings that describe one thing between them -- how the courier behaves while it is
carrying a copy -- rather than six questions asked in turn. Three across and two down puts
the whole of that description in view at once; down a single column, a reader had to
scroll to see what the last two said. The grid's own gap does the spacing, so each field
gives up the margin it carries when it stands alone. */
.field-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
align-items: start;
}
.field-grid > .field { margin: 0; }
/* Two, then one, as the card narrows. A third of a narrow screen is not a box anybody can
read a number in, and the point of the grid is being able to read them all. */
@media (max-width: 64rem) {
.field-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
.field-grid { grid-template-columns: 1fr; }
}
/* An address that has to be copied exactly, in the middle of a sentence. */
.literal {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.92em;
color: var(--text);
overflow-wrap: anywhere;
}
/* Something is being done, and the dialog stays open while it is: what is happening, and
a bar under it. The bar is the one an upload already uses -- one bar in one place -- and
it is set moving rather than filled, because the server unpacking a file out of an
archive says nothing at all until it is finished. A bar that crept to ninety percent and
waited there would be inventing progress it cannot see. */
.modal-working {
margin: var(--space-md) 0 0;
}
.modal-working .upload-bar {
margin-top: var(--space-xs);
}
/* The mark on a field that has to be filled in. Colored rather than bold, so it reads as a
sign beside the label instead of part of the word.
Written against the field as well as the mark: every span inside a modal field is a
block, being a caption above its box, and a bare class does not outrank that -- the mark
sat on a line of its own under the label until this selector was as specific as the rule
it had to beat. */
.modal-field span.required-mark,
.required-mark {
display: inline;
margin: 0;
color: var(--accent);
}
/* And the same trap as the fields above: an author's display outranks the browser's rule
for [hidden], so the mark on the one optional field -- a port, which states its own
default -- stayed on screen after being hidden in script. */
.modal-field span.required-mark[hidden],
.required-mark[hidden] {
display: none;
}
/* The note under a field: where to find the thing being asked for. Quieter than the label
above the box and closer to it than to the field below. */
.field-hint {
display: block;
margin-top: 0.35rem;
color: var(--text-muted);
font-size: 0.82rem;
}
/* The credential box, which takes a password on one line or a private key on several. It
grows only when a service is chosen that accepts a key, so a password field is never a
great empty rectangle. */
.modal-field textarea.secret-field {
width: 100%;
box-sizing: border-box;
font-weight: 400;
resize: vertical;
font-family: inherit;
}
/* The paths of a partial restore, typed one per line. A monospace box, because what goes
in it is a path and the difference between two paths is often one character. */
.modal-field.restore-paths textarea {
width: 100%;
box-sizing: border-box;
resize: vertical;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.85rem;
}
/* What a choice costs, where it costs something. Set apart from the quiet hint above it,
because "the password crosses the network in the clear" is not a hint. */
.modal-caution {
margin: var(--space-sm) 0 0;
padding: var(--space-sm) var(--space-md);
border-left: 3px solid var(--warn);
background: rgba(209, 154, 60, 0.1);
color: var(--text);
font-size: 0.9rem;
}
/* A form rather than a question. Connecting a storage service asks for seven things, and at
30rem the labels and their fields crowd each other down a narrow column. Its height is
the same as every other dialog's: the body scrolls, the title and the buttons stay. */
.modal-wide {
max-width: 38rem;
}
.modal-field select {
width: 100%;
box-sizing: border-box;
}
/* The sentence under a section's title, explaining what the section is for.
Justified and the full width of the box below it, so the paragraph and the thing it
introduces share an edge on both sides rather than the text stopping short of it. Its top
margin is given up entirely: the heading's own bottom margin is the whole of the gap, and
two margins between a title and its first line was more air than a title needs.
Hyphenation stays manual. Justified text tempts a browser into breaking words across
lines, and no word in this product is ever split. */
.section-note {
margin-top: 0;
text-align: justify;
hyphens: manual;
}
section:has(> .section-note) .section-head { margin-bottom: var(--space-xs); }
/* A switch and what it governs, on one line: the words at the left where reading starts,
the switch at the right where the eye finishes, and a rule between rows so a list of them
reads as a list rather than as one block of text with switches in it. */
.switch-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--border);
}
/* The first and last rows give their outer padding back to the card, so the space above the
first line and below the last is the card's own and the two match. Left alone, the last
row kept its fourteen pixels and sat thirty-nine from the bottom against twenty-five at
the top -- a list that looks like it is missing a row. */
.card > .switch-line:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* A reading rather than a switch on the right of the row: the value and the threshold under
it. Ranged right, so both lines end on the same edge as the pill in the row below them --
left alone the shorter of the two floated, and a column of readings looked ragged down its
own margin. A row ending in a toggle is untouched: a button is not a span. */
.switch-line > span:last-child { text-align: right; }
.card > .switch-line:first-child { padding-top: 0; }
/* A row wrapped in a group with its own panel is no longer its card's first or last child,
so the trimming above has to be said again for the group -- said only by :first-child it
applied to every row at once, since each is the only line inside its own group, and the
whole list closed up. */
.switch-group:first-child > .switch-line { padding-top: 0; }
.switch-group:last-child > .switch-line { padding-bottom: 0; }
/* A column holding nothing but a checkbox: as narrow as the box, and the box drawn at the
size of a box rather than stretched across the column the way form inputs are here. */
.cell-pick,
th.cell-pick {
width: 2.5rem;
text-align: center;
padding-right: 0;
}
.cell-pick input[type="checkbox"] {
width: auto;
margin: 0;
vertical-align: middle;
}
/* A checkbox and its words on one line, with the box aligned to the text rather than
floating above it: these read as a sentence you agree with, not as a field with a label. */
.check-line {
display: flex;
align-items: center;
gap: var(--space-sm);
}
/* Form inputs on these pages are full width, which for a checkbox means a tick floating in
the middle of a six-hundred-pixel box with its words pushed off to the right. A box is the
size of a box. */
.check-line input[type="checkbox"] {
width: auto;
flex: none;
margin: 0;
}
.check-line span { display: inline; margin: 0; }
/* The sentence explaining what the empty field and a zero mean. Sits under the input,
set back from it so it reads as guidance rather than as a second label. */
.modal-hint {
margin-top: var(--space-sm);
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.5;
}
/* Two buttons in one cell need space between them, or they read as one control.
The gap comes from an inner flex box rather than from the cell itself: making a td a
flex container takes it out of the table layout, so against a real fleet the whole
actions column detached from its row and sat on the page background instead of the
row's, with the row's own stripe stopping short of it. */
td.row-actions {
/* The lifecycle controls (Upgrade, Pause/Resume, Deactivate, Disconnect) can be more
than fits on one line at a narrow width; let them wrap in place rather than push the
table wider than the screen. */
white-space: normal;
}
td.row-actions > .actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-sm);
align-items: center;
justify-content: flex-end;
}
/* The selection column in the available list. Sized to the control so the names next
to it start on a consistent left edge. */
th.pick, td.pick {
width: 1px;
padding-right: var(--space-sm);
}
.checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.checkbox input {
width: 1rem;
height: 1rem;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
/* The count and the action under a table. They sit apart at the ends on a wide screen
and stack, in reading order, when there is no room for both on one line. */
.table-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-top: var(--space-md);
}
/* Two actions at the same end of a table's footer.
The count keeps the left, and these keep the right in the order they are written, so
the one that acts on what is selected comes before the one that adds something new.
They wrap together rather than one at a time, which would leave a lone button
stranded on a line of its own. */
.footer-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
}
/* The section for the one action on a page that cannot be undone.
Marked by its border rather than by a wash of color: the card still has to be read, and
the button inside it is already the loudest thing on the page. The space above it is
wider than between ordinary sections, so it does not read as the next thing to do. */
.danger-zone {
margin-top: var(--space-xl);
}
.danger-zone .card {
border-color: var(--danger-strong);
}
.danger-zone .card p {
margin-top: 0;
/* Justified, so the paragraph reaches both edges of the card rather than ending each
line wherever the words happen to run out. What is written here is the last thing
read before something is deleted, and it should look like a block set down
deliberately. Words are never broken across lines to achieve it. */
text-align: justify;
hyphens: manual;
}
/* The title of a page inside a section, under the row of sub-pages.
A section's own page carries its heading on the first card; a page inside one has no
card to carry it, so the heading stands alone and needs the space a section would have
put above it. */
.section-head-page {
margin-top: var(--space-lg);
}
/* A quiet line under a form's action -- "forgot your password?", "back to sign in".
Set apart from the button so it reads as a way out rather than a second action. */
.form-aside {
margin-top: var(--space-md);
margin-bottom: 0;
font-size: 0.9rem;
color: var(--text-muted);
}
/* Three across for city, region, and postal code, collapsing to one when there is no
room. Matches .grid-2, which the connection form already uses. */
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: var(--space-md);
/* Fields align at the top, so a hint under one does not shift its neighbors. */
align-items: start;
}
/* The picture beside its controls, wrapping to stacked on a narrow screen. */
.avatar-row {
display: flex;
align-items: flex-start;
gap: var(--space-lg);
flex-wrap: wrap;
}
.avatar-controls { flex: 1 1 20rem; }
/* Upload and Remove sit on one line with room between them. Remove was styled as a
link, which gave a destructive action the visual weight of a footnote beside the
button it undoes; as a button the two read as the pair of choices they are. */
.avatar-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border);
background: var(--surface-raised);
flex: 0 0 auto;
display: block;
}
/* Before a picture is uploaded: the initial, at the same size as the image will be, so
the layout does not shift when one arrives. */
.avatar-empty {
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
font-weight: 600;
color: var(--text-muted);
}
/* Two columns, and only ever two.
The identity block has four fields. Left to auto-fit they land three across with the
fourth alone on a row of its own, which reads as a mistake rather than a layout. */
.grid-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
align-items: start;
}
@media (max-width: 640px) {
.grid-pair { grid-template-columns: 1fr; }
}
/* The mark on a required field.
Taken from the control rather than from a class on the label, so it cannot disagree
with what is actually enforced: a field that stops being required loses its asterisk
in the same edit, and one that becomes required gains it without anybody remembering
to. A label that promises optional over a control the server refuses is worse than no
mark at all.
Scoped to the two detail forms. The avatar picker's file input is required to submit
that form, but choosing a picture is not required of anybody, and an asterisk there
would say it was.
The asterisk is decoration: `required` is already on the control, which is what a
screen reader announces, so repeating it as text would say it twice. */
#profile-form .field:has(:required) > label::after,
#register-form .field:has(:required) > label::after {
content: '*';
color: var(--accent);
margin-left: 0.25rem;
font-weight: 600;
}
/* The trail back up, under the title.
Separators are drawn by the stylesheet rather than typed into the markup, so the
character can change in one place and a screen reader is never read a slash between
every step. The last step is where the reader is and is not a link. */
.crumbs {
margin: calc(var(--space-xs) * -1) 0 var(--space-md);
font-size: 0.85rem;
color: var(--text-muted);
}
.crumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.crumbs li + li::before {
content: '/';
margin-right: 0.4rem;
color: var(--border);
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current='page'] { color: var(--text); }
/* The password strength meter.
Sits under its field, close enough to read as part of it and set apart enough not to
crowd the input. */
.strength {
margin-top: var(--space-sm);
/* The meter is the container the requirement columns are measured against; see the
container query below. */
container-type: inline-size;
}
.strength-bar {
height: 6px;
border-radius: 3px;
background: var(--surface-raised);
overflow: hidden;
}
.strength-bar span {
display: block;
height: 100%;
width: 0;
border-radius: 3px;
background: var(--danger);
transition: width 140ms ease, background-color 140ms ease;
}
/* One color per level, walking red to green.
Three shades covering five states meant two pairs of levels looked identical, so
satisfying a rule appeared to do nothing. The steps run through red, orange, amber
and yellow-green to green, each a visible move from the one before. */
.strength[data-level="1"] .strength-bar span { background: var(--strength-1); }
.strength[data-level="2"] .strength-bar span { background: var(--strength-2); }
.strength[data-level="3"] .strength-bar span { background: var(--strength-3); }
.strength[data-level="4"] .strength-bar span { background: var(--strength-4); }
.strength[data-level="5"] .strength-bar span { background: var(--strength-5); }
/* The wording follows the same scale, so the label is not the only thing carrying the
state for anyone who cannot separate the colors. */
.strength[data-level="1"] .strength-label { color: var(--strength-1); }
.strength[data-level="2"] .strength-label { color: var(--strength-2); }
.strength[data-level="3"] .strength-label { color: var(--strength-3); }
.strength[data-level="4"] .strength-label { color: var(--strength-4); }
.strength[data-level="5"] .strength-label { color: var(--strength-5); }
.strength-label {
margin: 0.5rem 0 0;
font-size: 0.85rem;
color: var(--text-muted);
}
/* The requirements, as a checklist rather than a paragraph nobody reads. */
.strength-list {
list-style: none;
margin: 0.6rem 0 0;
padding: 0;
display: grid;
/* Stacked by default, which is what a narrow panel gets. The five-column form is
opted into below, where there is room for it. */
grid-template-columns: 1fr;
gap: 0.3rem 0.9rem;
font-size: 0.85rem;
color: var(--text-muted);
}
/* Three columns, filled downward: lowercase and uppercase, then number and special,
then length on its own. Two rows are declared and the flow is by column, so the items
fall down each column in turn rather than across each row -- which is what makes the
third column hold one item instead of leaving a hole in the middle of the second row.
Asked of the viewport this would be wrong: the same meter sits in a 26rem panel on
the reset page and in a 44rem one on the register form, and at any given window
width those two need different answers. The question is how much room the meter
itself has, so the meter is the container that gets asked.
38rem is where three columns hold the longest requirement without breaking it. Below
that the list stacks, which is still in order. */
@container (min-width: 38rem) {
.strength-list {
grid-template-columns: none;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
}
}
.strength-list li {
display: flex;
/* Top, not center: the longest requirement wraps to a second line in a narrow
column, and centered it would sit the tick between the two lines. */
align-items: flex-start;
gap: 0.5rem;
}
/* An empty ring until met, a filled check afterwards. Shape as well as color, so the
state does not depend on distinguishing red from green. */
.strength-list .tick {
width: 0.85rem;
height: 0.85rem;
/* Centered on the first line of the label rather than on the block. */
margin-top: 0.2rem;
border-radius: 50%;
border: 1px solid var(--border);
flex: 0 0 auto;
}
.strength-list li.met { color: var(--ok); }
.strength-list li.met .tick {
border-color: var(--ok);
background: var(--ok);
box-shadow: inset 0 0 0 2px var(--surface);
}
/* The account form asks for an address, so it needs more room than a sign-in panel
without becoming a full-width sheet of inputs. */
.auth-panel-wide { max-width: 44rem; }
/* A single reading: what it is, what it means, and how it has moved. */
.reading-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
gap: var(--space-md);
}
.reading {
background: var(--surface);
border: 1px solid var(--border);
border-left-width: 3px;
border-left-color: var(--border);
border-radius: var(--radius);
padding: var(--space-md);
}
/* Severity is carried by a bar down the left edge as well as by the words, so the state
does not depend on separating colors. */
.reading-notice { border-left-color: var(--accent); }
.reading-warning { border-left-color: var(--warn); }
.reading-critical { border-left-color: var(--danger); }
.reading-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
}
.reading-label { font-weight: 600; }
.reading-value {
font-size: 1.35rem;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
/* The plain sentence. This is the layer most people read and never leave. */
.reading-meaning {
margin: 0.5rem 0 0;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
.reading-alert {
margin: 0.6rem 0 0;
font-size: 0.9rem;
color: var(--warn);
}
.reading-critical .reading-alert { color: var(--danger); }
.spark {
display: block;
width: 100%;
height: 40px;
margin-top: var(--space-md);
color: var(--text-muted);
}
.spark-empty { margin: var(--space-md) 0 0; font-size: 0.85rem; }
/* The raw layer. Closed by default, and never more than one click away. */
.reading-raw {
margin-top: var(--space-md);
border-top: 1px solid var(--border);
padding-top: var(--space-sm);
}
.reading-raw summary {
cursor: pointer;
font-size: 0.85rem;
color: var(--text-muted);
}
.reading-raw dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.3rem var(--space-md);
margin: var(--space-sm) 0 0;
font-size: 0.85rem;
}
.reading-raw dt { color: var(--text-muted); }
.reading-raw dd { margin: 0; word-break: break-word; }
.notice-warn {
background: rgba(209, 154, 60, 0.14);
border: 1px solid rgba(209, 154, 60, 0.35);
color: #e8c88a;
}
/* Work in progress, as distinct from a state that has settled. Amber rather than green
or red: nothing has succeeded or failed yet, and saying either would be a guess.
The pulse is slow and low-contrast on purpose -- it signals activity without
competing with the content next to it. */
.pill-working {
background: rgba(209, 154, 60, 0.16);
color: var(--warn);
animation: working-pulse 2.4s ease-in-out infinite;
}
.notice-working {
background: rgba(209, 154, 60, 0.10);
border-color: rgba(209, 154, 60, 0.32);
color: #e8c88a;
}
@keyframes working-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* Anyone who has asked not to see movement gets the same information without it. */
@media (prefers-reduced-motion: reduce) {
.pill-working { animation: none; }
}
/* Cells do not wrap, which is what keeps columns sized to their content -- but a
sentence in a cell is not content of that kind. Left as nowrap, the searching hint
widened the Label column by four hundred pixels and pushed the row's own button
outside the table. An upstream error message in the same cell would do it worse. */
td .hint {
white-space: normal;
max-width: 26rem;
}
/* A filter above a long table. Full width so it reads as belonging to the table
underneath rather than floating beside it, and with room below so the two are
separate blocks rather than one crowded one. */
.table-filter {
margin-bottom: var(--space-md);
}
.table-filter input {
width: 100%;
max-width: 28rem;
}
/* Present for screen readers, absent on screen: the filter's placeholder already says
what it does, so a visible label would repeat it. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* The connector disclosure on the connection form. Set apart from the fields by its own
space and its quieter color rather than by a rule down its side: it is four paragraphs
now, one for each tier, and a bar beside a block that tall reads as a quotation. */
.disclosure {
margin: var(--space-lg) 0;
max-width: 46rem;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
}
.disclosure p { margin: 0 0 var(--space-sm); }
.disclosure p:last-child { margin-bottom: 0; }
/* Three columns, one per tier, so the three are read as alternatives rather than as a
sequence. Its own max-width is dropped: that figure was set for one column of prose
and here it would squeeze three into a third of it each. */
.disclosure.grid-3 { max-width: none; }
/* One tier's note, under a heading that spans it: the title names what is being
connected, and what that does is read across two columns beneath it. The max-width
goes for the same reason it goes above -- it measures one column, not two. */
.disclosure-split { max-width: none; }
.disclosure-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-lg);
}
.disclosure-columns p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.disclosure-columns { grid-template-columns: 1fr; }
}
/* The row of fields sitting directly above the note.
The row carries its own trailing margin and the note carries a matching one above it,
and the two together read as twice the space anything else on the page is given. */
.grid-pair:has(+ .disclosure) .field,
.grid-3:has(+ .disclosure) .field { margin-bottom: 0; }
.disclosure h3 {
margin: 0 0 var(--space-xs);
font-size: 0.9rem;
color: var(--text);
}
/* The info icon on a settings row, and the recommendation block in its modal. */
.icon-button {
/* Laid out as a box of its own, so a cell can place it.
A