/**
 * Postroute - the components.
 *
 * Every repeated object, defined once: the button, the card, the field, the
 * alert, the table, the dialog. Nothing here types a value - it reads the
 * scales in theme.css - and nothing outside this file redefines what is here.
 * A page stylesheet may position a component; it may not restyle it.
 *
 * Loaded after theme.css and before app.css by every layout.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Revealed by script; must win over whatever display the element carries.
   The one !important in the portal, and it is the mechanism. */
[hidden] {
    display: none !important;
}

/* --- button --------------------------------------------------------------
   Rendered by <x-button>. .btn is the shape; the variant is the colour. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height-md);
    padding: var(--control-pad-md);
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    cursor: pointer;
    transition: filter var(--transition-fast), background var(--transition-fast);
}

.btn:hover {
    filter: brightness(1.08);
}

.btn:focus-visible {
    outline: var(--focus-ring-ink);
    outline-offset: 2px;
}

.btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.btn-primary {
    color: var(--accent-ink);
    background: var(--accent);
}

.btn-quiet {
    color: var(--ink);
    background: transparent;
    border-color: var(--line);
}

.btn-quiet:hover {
    filter: none;
    background: var(--ground);
}

/* Destroys something, and says so rather than looking like every other button. */
.btn-danger {
    color: var(--bad-ink);
    background: var(--bad);
}

.btn-sm {
    min-height: var(--control-height-sm);
    padding: var(--control-pad-sm);
    font-size: var(--text-sm);
}

.btn-lg {
    min-height: var(--control-height-lg);
    padding: var(--control-pad-lg);
    font-size: var(--text-lg);
}

/* A button standing on its own after an input, outside a .form, would otherwise
   sit flush against the box - the two read as one control. */
.field + .btn,
.alert + .btn,
.list + .btn {
    margin-top: var(--space-4);
}

.btn + .form--inline {
    margin-top: var(--space-6);
}

/* A row of buttons: a hero's calls to action, a dialog's tool row. */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* --- link ---------------------------------------------------------------- */

.link {
    padding: 0;
    font: inherit;
    font-size: var(--text-base);
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}

.link--plain {
    background: none;
    border: 0;
}

.link--danger {
    color: var(--bad);
}

/* A link that keeps quiet until pointed at: footer navigation, an address in
   a footer row. Inherits the text colour around it; no underline until hover. */
.link--quiet {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}

.link--quiet:hover,
.link--quiet:focus-visible {
    color: var(--ink);
    text-decoration: underline;
}

/* --- card, panel ---------------------------------------------------------- */

.card {
    width: 100%;
    max-width: var(--width-card);
    padding: var(--space-8);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.card__head {
    margin-bottom: var(--space-6);
}

.panel {
    padding: var(--space-5) var(--space-5) var(--space-6);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.panel__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-soft);
}

.panel--wide {
    margin-bottom: var(--space-5);
}

/* The public page's three points: aligned columns divided by a hairline,
   each with a small index, a title and three lines - not boxes. */
.columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-8);
}

.column {
    padding-left: var(--space-5);
    border-left: 1px solid var(--line);
}

.column__index {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.column__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.column__text {
    margin: 0;
    color: var(--ink-soft);
}

/* --- prose: a legal page, a long explanation ------------------------------
   Long-form text on the public shell: headings, paragraphs, lists, a table.
   One definition, so the privacy notice, the terms and the DPA read alike. */

.prose {
    max-width: var(--width-prose);
    padding: var(--space-12) 0 var(--space-16);
}

.prose h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
}

.prose h2 {
    margin: var(--space-10) 0 var(--space-3);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.prose h3 {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.prose p,
.prose li {
    margin: 0 0 var(--space-3);
    color: var(--ink);
}

.prose ul,
.prose ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
}

.prose a {
    color: var(--accent);
}

.prose__meta {
    margin: 0 0 var(--space-8);
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

/* The honest label a page carries until someone who does this for a living
   has read it. */
.prose__note {
    margin: 0 0 var(--space-8);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.prose table {
    width: 100%;
    margin: 0 0 var(--space-4);
    border-collapse: collapse;
    font-size: var(--text-base);
}

.prose th,
.prose td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

/* A screenshot in a guide: the whole width of the text, with an edge, so a white
   page on a white page still reads as a picture of something. */
.prose__shot {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--space-3) 0 var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.prose th {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-soft);
}

/* --- text ------------------------------------------------------------------ */

.brand {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.lede {
    margin: var(--space-1) 0 0;
    color: var(--ink-soft);
    font-size: var(--text-base);
}

.note {
    margin: var(--space-5) 0 0;
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.hello {
    margin: 0 0 var(--space-4);
}

.head {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-soft);
}

.figure {
    margin: 0 0 var(--space-3);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-none);
}

.tag {
    margin-left: var(--space-1);
    padding: 0 var(--space-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--ink-soft);
    vertical-align: middle;
}

/* Who operates the platform - <x-identity />. An <address> is italic by
   default and this one is not a quotation. */
.identity {
    margin-top: var(--space-2);
    font-style: normal;
}

.identity__line {
    margin: 0;
}

/* --- facts: a label and its value, two columns ------------------------------ */

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0 0 var(--space-6);
    font-size: var(--text-base);
}

.facts dt {
    color: var(--ink-soft);
}

.facts dd {
    margin: 0;
}

/* The public page's version: each pair in its own cell, cells flowing across
   the width, the label small and uppercase above its value. */
/* Same columns and gutter as .columns above it, so the two grids line up. */
.facts--wide {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-8);
    margin: 0;
    font-size: var(--text-md);
}

.facts--wide dt {
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Two pairs stacked in one cell - a mail server and where it stands. */
.facts--wide dd + dt {
    margin-top: var(--space-4);
}

/* --- form, field ------------------------------------------------------------ */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form--inline {
    margin-top: var(--space-4);
}

.form--tight {
    gap: var(--space-1);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line);
    align-items: flex-start;
}

.form--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.form--row .field {
    flex: 1 1 10rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field--narrow {
    flex: 0 0 7rem;
}

.field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink-soft);
}

.field__input {
    min-height: var(--control-height-md);
    padding: var(--control-pad-md);
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
}

.field__input:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* The one-time code is read back off the screen digit by digit, so it gets
   monospaced and spaced out rather than run together. */
.field__input--code {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-code);
    text-align: center;
}

.field__input--tiny {
    width: 7rem;
    min-height: var(--control-height-sm);
    padding: var(--control-pad-sm);
    font-size: var(--text-sm);
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--ink-soft);
}

.check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--ink-soft);
}

.check__box {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

/* --- alert ------------------------------------------------------------------ */

.alert {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
}

.alert p {
    margin: 0;
}

.alert__list {
    margin: 0;
    padding-left: var(--space-4);
}

.alert--bad {
    color: var(--bad);
    background: var(--bad-ground);
}

.alert--ok {
    color: var(--ok);
    background: var(--ok-ground);
}

.alert--warn {
    color: var(--warn);
    background: var(--warn-ground);
}

/* --- list ------------------------------------------------------------------- */

.list {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.list__item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-base);
}

.list__meta {
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

/* Recovery codes are read off the screen and typed elsewhere, so they get the
   same monospaced treatment as a one-time code. */
.codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    list-style: none;
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.codes__item {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    letter-spacing: var(--tracking-mono);
}

.codes--single {
    display: block;
    grid-template-columns: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    word-break: break-all;
}

/* --- drawer: a <details> that opens a secondary form ------------------------ */

.drawer {
    margin-top: var(--space-6);
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
}

.drawer__summary {
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink-soft);
    list-style-position: inside;
}

.drawer__summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.drawer[open] .drawer__summary {
    margin-bottom: var(--space-4);
}

/* --- menu: a <details> holding a row's actions -------------------------------- */

.menu {
    display: inline-block;
    text-align: left;
}

.menu__summary {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--accent);
    list-style: none;
}

.menu__summary::-webkit-details-marker {
    display: none;
}

.menu[open] .menu__summary {
    margin-bottom: var(--space-2);
}

.menu__row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* --- table ---------------------------------------------------------------- */

.table {
    width: 100%;
    margin-bottom: var(--space-7);
    border-collapse: collapse;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: var(--text-base);
}

.table th {
    padding: var(--space-2) var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.table tr:last-child td {
    border-bottom: 0;
}

.table__right {
    text-align: right;
}

.table__mid {
    text-align: center;
    width: 6rem;
}

/* An alias belongs to a mailbox, so its row hangs off the one above rather
   than standing on its own. */
.row--child td {
    border-bottom: 0;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.row--child + tr:not(.row--child) td {
    border-top: 1px solid var(--line);
}

.table .cell--indent {
    padding-left: var(--space-8);
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

/* An outside address is not an account here, and must not look like one. */
.row--external td:first-child,
.row--external td:nth-child(2) {
    color: var(--ink-soft);
}

/* --- meter: a bar rather than a number ---------------------------------------
   Nobody reads 3187 MB, everybody reads "nearly full". Widths are classes
   because the CSP forbids an inline style. */

.meter {
    display: block;
    width: 6rem;
    height: var(--space-1);
    margin-bottom: var(--space-1);
    background: var(--ground);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.meter__fill {
    display: block;
    height: 100%;
    background: var(--accent);
}

.meter__fill--w0 { width: 0%; }
.meter__fill--w5 { width: 5%; }
.meter__fill--w10 { width: 10%; }
.meter__fill--w15 { width: 15%; }
.meter__fill--w20 { width: 20%; }
.meter__fill--w25 { width: 25%; }
.meter__fill--w30 { width: 30%; }
.meter__fill--w35 { width: 35%; }
.meter__fill--w40 { width: 40%; }
.meter__fill--w45 { width: 45%; }
.meter__fill--w50 { width: 50%; }
.meter__fill--w55 { width: 55%; }
.meter__fill--w60 { width: 60%; }
.meter__fill--w65 { width: 65%; }
.meter__fill--w70 { width: 70%; }
.meter__fill--w75 { width: 75%; }
.meter__fill--w80 { width: 80%; }
.meter__fill--w85 { width: 85%; }
.meter__fill--w90 { width: 90%; }
.meter__fill--w95 { width: 95%; }
.meter__fill--w100 { width: 100%; }

/* --- toggle, tree: a mailbox row that opens its aliases ---------------------- */

.toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-size: var(--text-base);
    color: var(--ink-soft);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.toggle:hover {
    background: var(--ground);
    border-color: var(--line);
}

.toggle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 1px;
}

.toggle__count {
    font-variant-numeric: tabular-nums;
}

.toggle__arrow {
    font-size: var(--text-xs);
    transition: transform var(--transition-fast);
}

.toggle--open .toggle__arrow {
    transform: rotate(180deg);
}

.tree > td {
    border-bottom: 1px solid var(--line);
    padding: 0;
}

.table .tree__cell {
    padding: var(--space-2) var(--space-4) var(--space-3);
    background: var(--ground);
}

.tree__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    font-size: var(--text-base);
}

.tree__add {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--line);
}

/* --- dialog -----------------------------------------------------------------
   The browser's own <dialog>: it brings the backdrop, the focus trap and
   Escape-to-close; all that is left here is how it looks. */

.modal {
    padding: 0;
    max-width: var(--width-modal);
    width: calc(100% - var(--space-8));
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.modal::backdrop {
    background: var(--scrim);
}

.modal__body {
    padding: var(--space-6);
}

.modal__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.modal__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.modal .form + .form {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

/* --- logo ------------------------------------------------------------------
   Outlined letters by design - the artwork carries its own contour. They close
   up and smudge below about 28px, so nothing here renders it smaller. */

.logo {
    display: block;
    height: 3.2rem;
    width: auto;
}

.logo--lg {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-3);
}

/* --- jump: the box the whole page is reached through -------------------------
   It is first and it is large because it is the shortest path to the only thing
   anyone opens this application to do. A plain GET form, so it works before any
   script has loaded. */

.jump {
    margin: 0 0 var(--space-6);
}

.jump__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink-soft);
}

.jump__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.jump__input {
    flex: 1 1 18rem;
    max-width: 32rem;
}

/* --- tiles: the domains, as places to go rather than a list to read ----------
   A whole card is the target, not a word inside a row: it is the difference
   between aiming and clicking. */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.tiles__empty {
    grid-column: 1 / -1;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
}

.tile:hover,
.tile:focus-visible {
    border-color: var(--accent);
}

/* The firm that pays for its customer, on billing's customer page. */
.tile--paying {
    background: var(--ok-ground);
    border-color: var(--ok);
}

/* A customer on billing's first page, by its last invoice. */
.tile--paid {
    background: var(--ok-ground);
    border-color: var(--ok);
}

.tile--open {
    background: var(--warn-ground);
    border-color: var(--warn);
}

.tile--overdue {
    background: var(--bad-ground);
    border-color: var(--bad);
}

/* The paying firm's name on the cards of the firms it pays for. */
.tile__payer {
    color: var(--ok);
    font-weight: var(--weight-semibold);
}

.tile__name {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.tile__meta {
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

/* --- crumbs: where a page sits, above its title ---------------------------- */

.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.crumbs__item + .crumbs__item::before {
    content: "›";
    margin-right: var(--space-1);
}

.crumbs__link {
    color: inherit;
}

.crumbs__link:hover,
.crumbs__link:focus-visible {
    color: var(--accent);
}

/* --- gauge: what is left, on the volumes that can run out ---------------------
   Mailboxes are unlimited, so a quota bar says nothing any more. These are the
   real ceilings, and all of them are read rather than estimated. */

.gauge {
    margin: 0 0 var(--space-5);
}

/* The overview stacks three of these and the page has work below them, so the
   explanatory line is gone and the rhythm is tighter. */
.gauge--tight {
    margin-bottom: var(--space-3);
}

.gauge--tight .gauge__head {
    margin-bottom: var(--space-1);
}

.gauge:last-of-type {
    margin-bottom: var(--space-3);
}

.gauge__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
}

.gauge__free {
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.gauge__meta {
    display: block;
    margin-top: var(--space-2);
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

/* --- bar: one volume, split by what is filling it ------------------------------
   A single fill answers 'how full'; this answers 'full of what', which is the
   question on a volume shared by the system, the images and a build cache that
   grows with every deploy. The track showing through is the free space, so
   nothing has to be drawn for it. Widths are classes, one per percent: the CSP
   drops an inline style, and rounding to fives made a bar disagree with its own
   caption. */

.usage {
    display: flex;
    width: 100%;
    height: var(--space-3);
    background: var(--ground);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.usage__seg {
    height: 100%;
}

/* One colour per kind of content, not a severity scale: nothing here is a
   warning, it is an inventory. A colour may repeat across bars - the two never
   appear side by side - but never inside one. */
.usage__seg--mail   { background: var(--accent); }
.usage__seg--cloud  { background: var(--ok); }
.usage__seg--db     { background: var(--warn); }
.usage__seg--av     { background: var(--ink-soft); }
.usage__seg--images { background: var(--accent); }
.usage__seg--cache  { background: var(--warn); }
.usage__seg--other  { background: var(--ink-soft); opacity: 0.45; }

/* The key under the bar. Colour alone never carries the meaning: every segment
   is named and sized in text as well, for a printed page and for anyone who
   does not separate these hues. */
.usage__key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.usage__dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: var(--space-1);
    border-radius: var(--radius-sm);
    vertical-align: baseline;
}

.usage__dot--mail   { background: var(--accent); }
.usage__dot--cloud  { background: var(--ok); }
.usage__dot--db     { background: var(--warn); }
.usage__dot--av     { background: var(--ink-soft); }
.usage__dot--images { background: var(--accent); }
.usage__dot--cache  { background: var(--warn); }
.usage__dot--other  { background: var(--ink-soft); opacity: 0.45; }
.usage__dot--free   { background: var(--ground); border: 1px solid var(--line); }

/* A bar inside a panel takes the panel's width, unlike the 6rem one that sits
   in a table cell next to a mailbox. */
.meter--wide {
    width: 100%;
    height: var(--space-3);
}

/* Past these the colour carries the message, so the figure does not have to be
   read to notice. */
.meter__fill--warn { background: var(--warn); }
.meter__fill--bad  { background: var(--bad); }

.usage__seg--w0 { width: 0%; }
.usage__seg--w1 { width: 1%; }
.usage__seg--w2 { width: 2%; }
.usage__seg--w3 { width: 3%; }
.usage__seg--w4 { width: 4%; }
.usage__seg--w5 { width: 5%; }
.usage__seg--w6 { width: 6%; }
.usage__seg--w7 { width: 7%; }
.usage__seg--w8 { width: 8%; }
.usage__seg--w9 { width: 9%; }
.usage__seg--w10 { width: 10%; }
.usage__seg--w11 { width: 11%; }
.usage__seg--w12 { width: 12%; }
.usage__seg--w13 { width: 13%; }
.usage__seg--w14 { width: 14%; }
.usage__seg--w15 { width: 15%; }
.usage__seg--w16 { width: 16%; }
.usage__seg--w17 { width: 17%; }
.usage__seg--w18 { width: 18%; }
.usage__seg--w19 { width: 19%; }
.usage__seg--w20 { width: 20%; }
.usage__seg--w21 { width: 21%; }
.usage__seg--w22 { width: 22%; }
.usage__seg--w23 { width: 23%; }
.usage__seg--w24 { width: 24%; }
.usage__seg--w25 { width: 25%; }
.usage__seg--w26 { width: 26%; }
.usage__seg--w27 { width: 27%; }
.usage__seg--w28 { width: 28%; }
.usage__seg--w29 { width: 29%; }
.usage__seg--w30 { width: 30%; }
.usage__seg--w31 { width: 31%; }
.usage__seg--w32 { width: 32%; }
.usage__seg--w33 { width: 33%; }
.usage__seg--w34 { width: 34%; }
.usage__seg--w35 { width: 35%; }
.usage__seg--w36 { width: 36%; }
.usage__seg--w37 { width: 37%; }
.usage__seg--w38 { width: 38%; }
.usage__seg--w39 { width: 39%; }
.usage__seg--w40 { width: 40%; }
.usage__seg--w41 { width: 41%; }
.usage__seg--w42 { width: 42%; }
.usage__seg--w43 { width: 43%; }
.usage__seg--w44 { width: 44%; }
.usage__seg--w45 { width: 45%; }
.usage__seg--w46 { width: 46%; }
.usage__seg--w47 { width: 47%; }
.usage__seg--w48 { width: 48%; }
.usage__seg--w49 { width: 49%; }
.usage__seg--w50 { width: 50%; }
.usage__seg--w51 { width: 51%; }
.usage__seg--w52 { width: 52%; }
.usage__seg--w53 { width: 53%; }
.usage__seg--w54 { width: 54%; }
.usage__seg--w55 { width: 55%; }
.usage__seg--w56 { width: 56%; }
.usage__seg--w57 { width: 57%; }
.usage__seg--w58 { width: 58%; }
.usage__seg--w59 { width: 59%; }
.usage__seg--w60 { width: 60%; }
.usage__seg--w61 { width: 61%; }
.usage__seg--w62 { width: 62%; }
.usage__seg--w63 { width: 63%; }
.usage__seg--w64 { width: 64%; }
.usage__seg--w65 { width: 65%; }
.usage__seg--w66 { width: 66%; }
.usage__seg--w67 { width: 67%; }
.usage__seg--w68 { width: 68%; }
.usage__seg--w69 { width: 69%; }
.usage__seg--w70 { width: 70%; }
.usage__seg--w71 { width: 71%; }
.usage__seg--w72 { width: 72%; }
.usage__seg--w73 { width: 73%; }
.usage__seg--w74 { width: 74%; }
.usage__seg--w75 { width: 75%; }
.usage__seg--w76 { width: 76%; }
.usage__seg--w77 { width: 77%; }
.usage__seg--w78 { width: 78%; }
.usage__seg--w79 { width: 79%; }
.usage__seg--w80 { width: 80%; }
.usage__seg--w81 { width: 81%; }
.usage__seg--w82 { width: 82%; }
.usage__seg--w83 { width: 83%; }
.usage__seg--w84 { width: 84%; }
.usage__seg--w85 { width: 85%; }
.usage__seg--w86 { width: 86%; }
.usage__seg--w87 { width: 87%; }
.usage__seg--w88 { width: 88%; }
.usage__seg--w89 { width: 89%; }
.usage__seg--w90 { width: 90%; }
.usage__seg--w91 { width: 91%; }
.usage__seg--w92 { width: 92%; }
.usage__seg--w93 { width: 93%; }
.usage__seg--w94 { width: 94%; }
.usage__seg--w95 { width: 95%; }
.usage__seg--w96 { width: 96%; }
.usage__seg--w97 { width: 97%; }
.usage__seg--w98 { width: 98%; }
.usage__seg--w99 { width: 99%; }
.usage__seg--w100 { width: 100%; }


/* --- the legend row: names on the left, the percentage on the right ----------
   One column of percentages down the panel reads in a glance; the same figures
   inside sentences have to be hunted for. */

.usage__names {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}

.usage__pct {
    margin-left: auto;
    padding-left: var(--space-4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- menu: everything that hangs off the person's own name -------------------
   A <details>, so it opens with no script at all. Logging out lives in here
   rather than in the corner of every page, where it is one slip away from
   ending the session you are in the middle of. */

.menu {
    position: relative;
}

.menu__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    cursor: pointer;
    list-style: none;
}

.menu__summary::-webkit-details-marker {
    display: none;
}

.menu__summary:hover,
.menu[open] .menu__summary {
    border-color: var(--line);
    background: var(--ground);
}

.menu__arrow {
    color: var(--ink-soft);
    font-size: var(--text-xs);
}

.menu[open] .menu__arrow {
    transform: rotate(180deg);
}

.menu__panel {
    position: absolute;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 12rem;
    margin-top: var(--space-1);
    padding: var(--space-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
}

/* Inside the menu a button is a row, not a pill. */
.menu__item {
    justify-content: flex-start;
    width: 100%;
    border-color: transparent;
}

/* A column of figures, spread across the table rather than crowded against the
   right edge. .table__mid is 6rem wide by design - it holds one count next to
   one arrow - and four of those side by side leave the name column with half
   the table and the figures fighting over the rest. These take an equal share
   each, and never wrap: "15 MB" broken across two lines is not a figure any
   more, it is two. */
/* Alternating rows, because counting people down a list is easier than counting
   lines. The shade is put on by the template rather than by nth-child: each
   customer owns its own row plus the panels that open under it, so counting
   rows would stripe the panels instead of the people. */
.row--shade {
    background: var(--ground);
}

/* The figures are the content here, not a caption to it, so they are read in
   the text colour. In a table where a number IS the control, grey reads as
   disabled. */
.table--zebra .toggle {
    color: var(--ink);
}

/* A name that is a link does not need to be underlined to be one: it is the
   first thing on the row, in the text colour, and the underline arrives when
   the pointer does. */
.name-link {
    color: var(--ink);
    font-size: var(--text-md);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.name-link:hover,
.name-link:focus-visible {
    text-decoration: underline;
}

.table__fig {
    width: 15%;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- utilities --------------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}