/* Copyright Samuel Krauss (Elchi Studios). All rights reserved.
   SPDX-License-Identifier: LicenseRef-Proprietary */

/* Elchi Studios: the console layer. Loaded after elchi.css by the two places
   people work in for an hour rather than read for a minute: the dashboard
   (admin) and the console (panel). Same tokens, same components, denser.

   Plain elements inside .console (a button, a field, a table) take the
   design system's look through :where(), which has no weight, so any class
   still wins. Nothing here sets a colour the tokens do not define. */

/* ---------- Page ---------- */
.console { font-size: 0.9375rem; }
.console main { padding-block: var(--space-6) var(--space-9); }
.console main:focus { outline: none; }
.console-main { width: min(100% - 2 * var(--gutter, 1rem), 66rem); margin-inline: auto; }
:where(.console main) h1 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); letter-spacing: -0.015em; margin-block: var(--space-1) var(--space-3); }
:where(.console main) h2 { font-size: 1.125rem; margin-block: var(--space-7) var(--space-3); }
:where(.console main) h3 { font-size: 1rem; margin-block: var(--space-4) var(--space-2); }
:where(.console main) :is(h1, h2, h3):first-child { margin-top: 0; }
:where(.console main) p { margin-block: 0 var(--space-3); }
:where(.console main) p:last-child { margin-bottom: 0; }
:where(.console main) :is(ul, ol) { margin-block: 0 var(--space-3); padding-inline-start: 1.25rem; }
:where(.console main) form { margin: 0; }
:where(.console main) details > summary { cursor: pointer; font-weight: 600; }
:where(.console main) pre { overflow-x: auto; padding: var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-sunk); font-size: 0.8125rem; }
:where(.console main) code { overflow-wrap: anywhere; }

/* Words for a page's own small pieces. */
.console .dim { color: var(--c-text-2); }
.console .faint { color: var(--c-text-3); }
.console .mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.console .warn { color: var(--c-warn); }
.console .label { margin: 0 0 var(--space-1); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; color: var(--c-text-2); }
.console .label a { color: inherit; text-decoration: none; }
.console .label a:hover { color: var(--c-action); text-decoration: underline; }
.console .lede, .console .intro { max-width: 46em; margin-bottom: var(--space-5); color: var(--c-text-2); font-size: 1rem; }
.console .help, .console .hint { font-size: 0.875rem; color: var(--c-text-3); line-height: 1.5; max-width: 52em; }
.console .hint { margin-block: var(--space-1) 0; }
.console .help { margin-block: var(--space-2) var(--space-3); }
.console .hint--block { display: block; }
.console .centre { display: grid; place-items: center; min-height: 70vh; }
.console .big { font-size: 1.875rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---------- Controls without a class ---------- */
:where(.console) :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="file"], select, textarea) {
  width: 100%; min-height: 2.5rem; padding: 0.45rem 0.7rem; border: 1px solid var(--c-control); border-radius: var(--radius-2);
  background-color: var(--c-raised); color: var(--c-text); font-size: 0.9375rem;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
:where(.console) :where(input, select, textarea):hover:not(:disabled) { border-color: var(--c-text-2); }
:where(.console) :where(input, select, textarea):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 0; border-color: var(--c-focus); }
:where(.console) :where(input, select, textarea):disabled { background-color: var(--c-sunk); color: var(--c-text-3); cursor: not-allowed; }
:where(.console) :where(input, textarea)::placeholder { color: var(--c-text-3); opacity: 1; }
:where(.console) textarea { min-height: 6rem; resize: vertical; line-height: 1.5; field-sizing: content; max-height: 28rem; }
:where(.console) :where(input[type="file"]) { padding: 0.35rem; color: var(--c-text-2); }
:where(.console) :where(input[type="checkbox"], input[type="radio"]) { width: 1.1rem; height: 1.1rem; accent-color: var(--c-action-fill); }
:where(.console) select { appearance: none; padding-inline-end: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
:where(.console main) label { display: block; margin-block: var(--space-3) var(--space-1); font-size: 0.875rem; font-weight: 600; color: var(--c-text); }
:where(.console main) label:first-child { margin-top: 0; }
:where(.console) .visually-hidden { margin: 0; }

/* Buttons: a plain button is the primary action, as it always was here. */
.console :is(button, .btn-primary, .btn-download, .cta, .sso-btn, .signin-primary, .signin-secondary, .button-link, .link-button) {
  --b-bg: var(--c-action-fill); --b-fg: var(--c-on-action); --b-line: var(--c-action-fill);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.5rem; padding: 0.4rem 1rem; border: 1px solid var(--b-line); border-radius: var(--radius-2);
  background-color: var(--b-bg); color: var(--b-fg); font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
.console :is(button, .btn-primary, .btn-download, .cta, .sso-btn, .signin-primary, .button-link):hover { --b-bg: var(--c-action-strong); --b-line: var(--c-action-strong); color: var(--b-fg); }
.console :is(button, .btn-primary, .btn-download, .cta, .sso-btn, .signin-primary, .signin-secondary, .button-link, .link-button):active { transform: scale(0.97); }
.console :is(button):disabled, .console :is(button.ghost, button.danger):disabled { --b-bg: var(--c-sunk); --b-fg: var(--c-text-3); --b-line: var(--c-line); cursor: not-allowed; transform: none; }
/* The quiet ones. */
.console :is(button.ghost, button.quiet, .signin-secondary, .btn-link, button.chip, .link-button) { --b-bg: var(--c-raised); --b-fg: var(--c-text); --b-line: var(--c-control); }
.console :is(button.ghost, button.quiet, .signin-secondary, button.chip, .link-button):hover { --b-bg: var(--c-sunk); --b-line: var(--c-text-2); }
.console button.quiet { --b-bg: transparent; --b-line: transparent; --b-fg: var(--c-action); }
.console :is(button.danger, button.ghost.danger) { --b-bg: var(--c-raised); --b-fg: var(--c-danger); --b-line: var(--c-danger); }
.console button.danger:hover { --b-bg: var(--c-danger-wash); --b-line: var(--c-danger); }
.console .btn-link { min-height: 2.25rem; margin-inline-start: auto; padding: 0.3rem 0.8rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; border: 1px solid var(--b-line); border-radius: var(--radius-2); background-color: var(--b-bg); color: var(--b-fg); transition: background-color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); }
.console .btn-link:hover { --b-bg: var(--c-sunk); }
.console .btn-link:active { transform: scale(0.97); }
.console button.note-btn { --b-bg: transparent; --b-fg: var(--c-warn); --b-line: var(--c-warn); border-style: dashed; }
.console button.note-btn:hover { --b-bg: var(--c-warn-wash); }
.console .small-button, .console button.small { min-height: 2rem; padding: 0.2rem 0.6rem; font-size: 0.8125rem; }
.console .chip { min-height: 2rem; padding: 0.2rem 0.75rem; border-radius: var(--radius-round); font-size: 0.8125rem; font-weight: 600; }
.console .chip--good:hover { --b-fg: var(--c-ok); --b-line: var(--c-ok); }
.console .chip--quiet { --b-fg: var(--c-text-2); }
.console .sso-btn, .console .signin-primary, .console .signin-secondary { display: flex; width: 100%; min-height: 2.75rem; }
.console .sso-or { text-align: center; margin: var(--space-3) 0; font-size: 0.8125rem; color: var(--c-text-3); }
/* Buttons of the design system itself keep their own look in a console. */
.console .switcher-button { --b-bg: transparent; --b-fg: var(--c-text-2); --b-line: transparent; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; font-weight: 400; }
.console .switcher-button:hover { --b-bg: var(--c-sunk); --b-line: transparent; --b-fg: var(--c-text); }
.console .sort { all: unset; cursor: pointer; display: inline-flex; gap: 0.4em; align-items: center; }

/* ---------- Layout pieces ---------- */
.console .row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-3); }
.console .row:first-child { margin-top: 0; }
.console .row--tight { margin-top: var(--space-2); }
.console .row--flush { margin-top: 0; }
.console .row select { width: auto; }
.console .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3) var(--space-5); align-items: start; margin-bottom: var(--space-3); }
.console .grid2 label { margin-top: 0; }
.console .two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 var(--space-6); }
.console .split { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-5); align-items: start; }
@media (max-width: 56rem) { .console .split { grid-template-columns: 1fr; } }
.console .card { display: grid; align-content: start; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.console .card > :is(h2, h3) { margin: 0; }
.console .card > form + form { margin-top: var(--space-2); }
.console .card--key { border-color: var(--c-warn); background-color: var(--c-warn-wash); }
.console .card--narrow { max-width: 28rem; }
.console .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.console details.card > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); }
.console details.card > summary::before { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease); }
.console details.card[open] > summary::before { transform: rotate(45deg); }
.console details.card > summary::-webkit-details-marker { display: none; }

/* Notes after an action: shape and word first. */
.console .note { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: baseline; margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); font-size: 0.9375rem; }
.console .note::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background-color: var(--c-text-2); forced-color-adjust: none; }
.console .note.ok { border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); }
.console .note.ok::before { background-color: var(--c-ok); }
.console .note.bad { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); background-color: var(--c-danger-wash); }
.console .note.bad::before { background-color: var(--c-danger); border-radius: 1px; }
.console .note.warn { color: var(--c-text); border-color: color-mix(in srgb, var(--c-warn) 45%, transparent); background-color: var(--c-warn-wash); }
.console .note.warn::before { background-color: var(--c-warn); border-radius: 0; width: 0.7em; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.console .alert { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent); border-radius: var(--radius-2); background-color: var(--c-danger-wash); font-size: 0.9375rem; }

/* Small labels for a state: new, live, urgent. */
.console :is(.pill, .tag, .topic) { display: inline-block; margin-inline-start: var(--space-2); padding: 0 0.45em; border: 1px solid var(--c-line); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; line-height: 1.6; color: var(--c-text-2); vertical-align: 0.1em; white-space: nowrap; }
.console :is(.pill-new, .pill-high, .pill-note, .topic-project) { color: var(--c-action); border-color: color-mix(in srgb, var(--c-action) 50%, transparent); }
.console :is(.pill-won, .pill-live, .tag-live) { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 50%, transparent); }
.console :is(.pill-urgent) { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); }
.console :is(.tag-warn) { color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 50%, transparent); }
.console :is(.pill-spam, .pill-lost, .pill-low) { color: var(--c-text-3); }
.console .topic-partnership { color: var(--c-text); border-color: var(--c-text-2); }

/* Filters along the top of a list. */
.console .filters { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-5); border-bottom: 1px solid var(--c-line); }
.console .filters a { padding: var(--space-2) var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--c-text-2); text-decoration: none; font-size: 0.9375rem; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.console .filters a:hover { color: var(--c-text); border-bottom-color: var(--c-line); }
.console .filters a.on { color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-action); }

/* ---------- Tables ---------- */
.console .table-scroll { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); margin-bottom: var(--space-4); }
.console .table-scroll:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
:where(.console main) table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
:where(.console main) :is(th, td) { padding: 0.55rem 0.8rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--c-line); }
:where(.console main) th { background-color: var(--c-sunk); font-size: 0.8125rem; font-weight: 600; color: var(--c-text-2); white-space: nowrap; }
:where(.console main) tbody tr { transition: background-color var(--dur-fast) var(--ease); }
:where(.console main) tbody tr:hover { background-color: color-mix(in srgb, var(--c-sunk) 60%, transparent); }
:where(.console main) tbody tr:last-child td { border-bottom: 0; }
.console table.posts, .console .deliveries { border: 0; }
.console .audit-detail { font-size: 0.8125rem; min-width: 14rem; overflow-wrap: anywhere; }
.console form.inline { display: inline-block; margin-inline-end: var(--space-2); }
.console table.monitors td.target { word-break: break-all; min-width: 10rem; }
.console table.monitors td.alert-forms { min-width: 18rem; }
.console table.monitors td.alert-forms form { display: flex; gap: var(--space-2); margin: 0 0 var(--space-2); }
.console table.monitors td.alert-forms input { flex: 1; min-width: 0; }
.console table.monitors td.row-actions { white-space: nowrap; }
.console table.monitors td.row-actions form.inline { display: block; margin: 0 0 var(--space-2); }
.console .limit { margin: 0; flex-wrap: nowrap; }
.console .limit input { width: 7rem; font-variant-numeric: tabular-nums; }
.console .eauth-search input, .console .w-field { max-width: 26rem; }
.console .licence-list, .console .licence-facts { margin: var(--space-4) 0; }
.console .licence-issue { align-items: start; margin-top: var(--space-5); }
.console .licence-issue .card { margin-bottom: 0; }
.console .key-value { font-family: var(--font-mono); font-size: 0.875rem; overflow-wrap: anywhere; user-select: all; }
.console pre.key-value { white-space: pre-wrap; }
.console .key-once { border-color: var(--c-warn); background-color: var(--c-warn-wash); }
.console ul.plain { list-style: none; padding: 0; }
.console .advice { padding-inline-start: 1.25rem; font-size: 0.9375rem; }

/* ---------- The dashboard's header ---------- */
.console-bar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--c-line); background-color: color-mix(in srgb, var(--c-page) 94%, transparent); }
.console-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); padding-top: var(--space-2); }
.console-bar .brand { font-size: 0.9375rem; min-height: 2.75rem; }
.console-bar__end { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.console-bar__end .theme { margin: 0; }
.console-bar__in > .switcher-button { margin-inline-start: calc(-1 * var(--space-2)); }
@media (max-width: 29.99rem) { .console-bar .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.console-who { font-size: 0.8125rem; color: var(--c-text-2); white-space: nowrap; }
/* The pages are a row of their own under the name, like tabs: sixteen of
   them never squeeze the name or the account. */
.console-nav { order: 3; flex: 1 0 100%; display: flex; gap: 0; margin: 0 calc(-1 * var(--space-2)); overflow-x: auto; scrollbar-width: none; }
.console-nav::-webkit-scrollbar { display: none; }
.console-nav a { position: relative; flex: none; padding: var(--space-2) var(--space-2) var(--space-3); color: var(--c-text-2); text-decoration: none; font-size: 0.875rem; white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
.console-nav a::after { content: ""; position: absolute; inset-inline: var(--space-2); bottom: 0; height: 2px; background-color: var(--c-action); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease); }
.console-nav a:hover, .console-nav a[aria-current="page"] { color: var(--c-text); }
.console-nav a:hover::after { transform: scaleX(1); background-color: var(--c-line-strong); }
.console-nav a[aria-current="page"]::after { transform: scaleX(1); background-color: var(--c-action); }
@media (max-width: 47.99rem) {
  .console-who { display: none; }
  .console-bar__end .theme { display: none; }
}

/* ---------- The console's header and account menu ---------- */
.console .top-actions { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.console .account { position: relative; }
.console .account-trigger { --b-bg: transparent; --b-line: transparent; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border-radius: 50%; }
.console .account-trigger:hover, .console .account-trigger[aria-expanded="true"] { --b-bg: var(--c-sunk); --b-line: var(--c-line); }
.console .avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--c-line); background-color: var(--c-sunk); color: var(--c-text-2); font-size: 0.75rem; font-weight: 700; }
.console .avatar-img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.console .account-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 30; width: min(16rem, 100vw - 2rem); padding: var(--space-2); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.3); }
.console .account-head { display: grid; gap: 0.1rem; padding: var(--space-2) var(--space-2) var(--space-3); margin-bottom: var(--space-1); border-bottom: 1px solid var(--c-line); }
.console .account-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console .account-mail { color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console .account-menu a, .console .account-out { --b-bg: transparent; --b-fg: var(--c-text); --b-line: transparent; display: flex; justify-content: flex-start; width: 100%; min-height: 2.5rem; padding: var(--space-2); border-radius: var(--radius-1); color: var(--c-text); text-decoration: none; font-weight: 400; transition: background-color var(--dur-fast) var(--ease); }
.console .account-menu a:hover, .console .account-out:hover { --b-bg: var(--c-sunk); background-color: var(--c-sunk); color: var(--c-text); }
.console .account-menu form { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--c-line); }
.console .account-out { --b-fg: var(--c-danger); color: var(--c-danger); }
.console .account-out:hover { color: var(--c-danger); }
.console .account-menu .theme { margin: var(--space-2); }
@media (max-width: 47.99rem) {
  .console .top-actions .cta { min-width: 2.75rem; padding-inline: 0.75rem; }
  .console .top-actions .cta .cta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .console .top-actions .cta::before { content: "+"; font-size: 1.375rem; line-height: 1; font-weight: 400; }
}

/* ---------- Applications: tiles and rows ---------- */
.console .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile, 10rem)), 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.console .grid--media { --tile: 13rem; }
.console .tile { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-2); }
.console .tile-face { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease); }
.console .tile-mark { font-size: 2rem; font-weight: 700; color: var(--tint, var(--c-text-3)); transition: transform var(--dur-base) var(--ease); }
.console .tile-icon { width: 100%; height: 100%; object-fit: cover; }
.console .tile-name { display: block; margin-top: var(--space-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
.console .tile-meta { display: block; font-size: 0.8125rem; color: var(--c-text-3); }
.console .tile-state { position: absolute; top: 0.6rem; right: 0.6rem; width: 0.55rem; height: 0.55rem; }
.console .tile-state.live { border-radius: 50%; background-color: var(--c-ok); }
.console .tile-state.warn { background-color: var(--c-warn); clip-path: polygon(50% 4%, 100% 96%, 0 96%); width: 0.65rem; }
.console .tile-state.idle { border-radius: 50%; border: 2px solid var(--c-text-3); }
.console .tile:hover .tile-face { border-color: var(--tint, var(--c-text-2)); transform: translateY(-2px); }
.console .tile:hover .tile-mark { transform: scale(1.08); }
.console .tile:hover .tile-name { color: var(--c-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.console .tile:active .tile-face { transform: scale(0.98); }
.console .tile:focus-visible { outline: none; }
.console .tile:focus-visible .tile-face { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.console .tile-new .tile-face { border-style: dashed; border-color: var(--c-control); background-color: transparent; }
.console .tile-new:hover .tile-face { border-style: solid; }
@media (max-width: 29.99rem) { .console .grid:not(.grid--media) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
/* Twelve tints, chosen by a hash of the application's identifier, so two
   applications side by side are told apart without a style attribute. */
.tint-0 { --h: 174; } .tint-1 { --h: 204; } .tint-2 { --h: 234; } .tint-3 { --h: 264; }
.tint-4 { --h: 294; } .tint-5 { --h: 324; } .tint-6 { --h: 354; } .tint-7 { --h: 24; }
.tint-8 { --h: 44; } .tint-9 { --h: 84; } .tint-10 { --h: 124; } .tint-11 { --h: 154; }
[class*="tint-"] { --tint: hsl(var(--h) 55% var(--tint-l, 36%)); }
:root[data-theme="dark"] { --tint-l: 68%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tint-l: 68%; } }

/* An application's own page. */
.console .app { display: flex; gap: var(--space-4); align-items: flex-start; }
.console .app-body { flex: 1; min-width: 0; }
.console .app-name { font-weight: 700; text-decoration: none; color: var(--c-text); }
.console .app-name:hover { color: var(--c-action); text-decoration: underline; }
.console .app-id { display: block; margin-top: 0.15rem; color: var(--c-text-3); font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.console .stats { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-4); }
.console .stat { display: grid; gap: 0.1rem; }
.console .stat b { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.console .stat span { font-size: 0.8125rem; color: var(--c-text-3); }
.console .stat.quiet b { color: var(--c-text-2); }
.console .stat.bad b { color: var(--c-danger); }

/* Credentials, secrets, snippets. A one-time secret is the one thing on the
   screen that will not be there again, so it carries the warning colour. */
.console p.secret, .console .secret.plain { display: block; margin: var(--space-2) 0; padding: var(--space-3); border: 1px solid var(--c-warn); border-radius: var(--radius-2); background-color: var(--c-warn-wash); font-family: var(--font-mono); font-size: 0.875rem; overflow-wrap: anywhere; user-select: all; }
.console .secret.plain { border-color: var(--c-line); background-color: var(--c-sunk); }
.console .cred { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.console .cred-value { position: relative; padding: var(--space-2) 5.5rem var(--space-2) var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-sunk); font-family: var(--font-mono); font-size: 0.875rem; overflow-wrap: anywhere; }
.console .cred-value .copy, .console .snippet .copy { position: absolute; top: var(--space-1); right: var(--space-1); }
.console .snippet { margin-bottom: var(--space-5); position: relative; border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-sunk); }
.console .snippet pre { margin: 0; padding: var(--space-3) 5.5rem var(--space-3) var(--space-3); border: 0; background: none; font-size: 0.8125rem; line-height: 1.6; white-space: pre; }
.console [data-tabs] .tabs { margin-bottom: 0; }
.console [data-tabs] .snippet { border-top-left-radius: 0; }
.console .tabs button { --b-bg: transparent; --b-fg: var(--c-text-2); --b-line: transparent; min-height: 2.5rem; border-radius: 0; border-bottom: 2px solid transparent; font-weight: 400; }
.console .tabs button:hover { --b-bg: transparent; --b-fg: var(--c-text); border-bottom-color: var(--c-line); }
.console .tabs button[aria-selected="true"] { --b-fg: var(--c-text); font-weight: 600; border-bottom-color: var(--c-action); }
.console .tabs button:active { transform: none; }
.console .copy { --b-bg: var(--c-raised); --b-fg: var(--c-text); --b-line: var(--c-control); min-height: 2.25rem; padding: 0.2rem 0.7rem; font-size: 0.8125rem; }
.console .copy:hover { --b-bg: var(--c-sunk); }

/* Steps and choices when creating something. */
.console .wizard { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.console .wizard li { display: flex; align-items: center; gap: var(--space-2); color: var(--c-text-3); font-size: 0.875rem; }
.console .wizard li:not(:last-child)::after { content: ""; width: 1.5rem; height: 1px; margin-inline-start: var(--space-1); background-color: var(--c-line); }
.console .wizard-num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--c-control); border-radius: 50%; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.console .wizard .done { color: var(--c-text-2); }
.console .wizard .done .wizard-num { border-color: var(--c-ok); color: var(--c-ok); }
.console .wizard [aria-current="step"] { color: var(--c-text); font-weight: 600; }
.console .wizard [aria-current="step"] .wizard-num { border-color: var(--c-action-fill); background-color: var(--c-action-fill); color: var(--c-on-action); }
.console .pick { display: grid; gap: var(--space-3); margin-bottom: var(--space-2); }
.console .pick-item { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); font-weight: 400; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.console .pick-item:hover { border-color: var(--c-text-2); }
.console .pick-item:has(input:checked) { border-color: var(--c-action); background-color: var(--c-action-wash); }
.console .pick-item:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.console .pick-item input { flex: none; margin-top: 0.2rem; }
.console .pick-body { display: grid; gap: 0.15rem; }
.console .pick-head { display: flex; align-items: center; gap: var(--space-2); }
.console .pick-mark { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-1); background-color: var(--c-sunk); color: var(--tint, var(--c-text)); font-size: 0.75rem; font-weight: 700; }
.console .pick-name { font-weight: 600; }
.console .pick-desc { font-size: 0.875rem; color: var(--c-text-2); }
.console .checks { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.console .checks label { display: flex; gap: var(--space-2); align-items: center; margin: 0; font-weight: 400; }
.console .checks input, .console .check input { width: auto; }
.console .check { display: flex; align-items: center; gap: var(--space-2); }

/* Usage: one row per application, a bar for its share. */
.console .usage-row { display: grid; grid-template-columns: 1.6rem minmax(6rem, 1fr) minmax(4rem, 2fr) 4rem 3.5rem; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--c-line); color: inherit; text-decoration: none; }
.console .usage-row:last-of-type { border-bottom: 0; }
.console .usage-row.plain { grid-template-columns: minmax(6rem, 1fr) minmax(4rem, 2fr) 3.5rem; }
.console a.usage-row { transition: background-color var(--dur-fast) var(--ease); }
.console a.usage-row:hover { background-color: color-mix(in srgb, var(--c-sunk) 60%, transparent); }
.console a.usage-row:hover .usage-name { color: var(--c-action); text-decoration: underline; }
.console .usage-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console .usage-num { text-align: end; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.console .usage-bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 0.45rem; border: 0; border-radius: var(--radius-round); background-color: var(--c-sunk); overflow: hidden; color: var(--tint, var(--c-action-fill)); }
.console .usage-bar::-webkit-progress-bar { background-color: var(--c-sunk); border-radius: var(--radius-round); }
.console .usage-bar::-webkit-progress-value { background-color: var(--tint, var(--c-action-fill)); border-radius: var(--radius-round); }
.console .usage-bar::-moz-progress-bar { background-color: var(--tint, var(--c-action-fill)); border-radius: var(--radius-round); }
.console .usage-bar.warnbar::-webkit-progress-value { background-color: var(--c-danger); }
.console .usage-bar.warnbar::-moz-progress-bar { background-color: var(--c-danger); }
.console .usage-legend { margin-top: var(--space-2); text-align: end; font-size: 0.8125rem; color: var(--c-text-3); }
.console .spark { display: block; width: 100%; height: 3.5rem; margin-top: var(--space-4); overflow: visible; }
.console .spark rect { fill: var(--c-action-fill); }
.console .spark rect.zero { fill: var(--c-line); }
.console .spark rect.fail { fill: var(--c-danger); }
.console .spark-foot { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: 0.8125rem; color: var(--c-text-3); }

/* People in a list: members, invitations, sessions. */
.console .usage-row.session-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.console .session-row > span { min-width: 0; }
.console .session-row .usage-name { white-space: normal; overflow-wrap: anywhere; }
.console .person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.console .person > span { min-width: 0; }
.console .inline-form { margin: 0; }
.console .inline-form select { width: auto; min-width: 8rem; }
@media (max-width: 45.99rem) {
  .console .usage-row.session-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .console .session-row > span:first-child { grid-column: 1 / -1; }
}

/* Guidance and empty states. */
.console .banner { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid color-mix(in srgb, var(--c-action) 35%, var(--c-line)); border-radius: var(--radius-2); background-color: var(--c-action-wash); }
.console .banner-mark { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-2); background-color: var(--c-action-fill); color: var(--c-on-action); font-weight: 700; }
.console .banner h3 { margin: 0 0 var(--space-1); font-size: 1rem; }
.console .banner p { color: var(--c-text-2); }
.console .zero { max-width: 40rem; margin-top: var(--space-6); }
.console .zero .steps { display: grid; gap: var(--space-2); margin: var(--space-5) 0; padding: 0; list-style: none; counter-reset: step; }
.console .zero .steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--space-3); align-items: baseline; color: var(--c-text-2); }
.console .zero .steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--c-control); border-radius: 50%; font-size: 0.75rem; color: var(--c-text-2); }
.console .empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); border: 1px dashed var(--c-control); border-radius: var(--radius-2); text-align: center; color: var(--c-text-2); }

/* Settings and two-factor. */
.console .profile-row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.console .profile-pic img, .console .avatar-lg { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; border: 1px solid var(--c-line); background-color: var(--c-sunk); object-fit: cover; font-size: 1.5rem; color: var(--c-text-3); }
.console .profile-forms { flex: 1; min-width: min(100%, 16rem); }
.console .steps, .console .enrol-steps { display: grid; gap: var(--space-6); margin: 0; padding-inline-start: 1.25rem; }
.console .steps strong, .console .enrol-steps strong { display: block; margin-bottom: var(--space-2); }
.console .code-input { max-width: 9rem; font-family: var(--font-mono); letter-spacing: 0.3em; text-align: center; }
.console .enrol .row input { max-width: 9rem; letter-spacing: 0.3em; text-align: center; }

/* ---------- Sign-in to a console ---------- */
.console .login, .console .signin { display: grid; gap: var(--space-3); width: min(100%, 24rem); padding: var(--space-6); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.console .login h1, .console .signin-title { margin: 0; font-size: 1.625rem; }
.console .signin-lede, .console .login .dim { margin: 0; color: var(--c-text-2); }
.console .signin .mark, .console .login .mark { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.console .signin-foot, .console .sso-note { margin-top: var(--space-2); font-size: 0.8125rem; color: var(--c-text-3); }
.console .signin-primary + .signin-secondary { margin-top: 0; }

/* ---------- Support threads, tickets, enquiries ---------- */
.console .thread { display: grid; gap: var(--space-3); margin: var(--space-5) 0; max-width: 48rem; }
.console .msg { padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.console .msg header { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font-size: 0.875rem; }
.console .msg-who { font-weight: 600; }
.console .msg-when { color: var(--c-text-3); font-size: 0.8125rem; }
.console .msg-body { white-space: pre-wrap; line-height: 1.6; }
.console .msg.ours, .console .msg.from-us { border-inline-start: 3px solid var(--c-action); }
.console .msg.theirs { border-inline-start: 3px solid var(--c-line); }
/* An internal note must never be mistaken for a reply: dashed, tinted, labelled. */
.console .msg.note { display: block; border: 1px dashed var(--c-warn); border-inline-start-width: 3px; background-color: var(--c-warn-wash); }
.console .msg.note::before { content: none; }
.console .tickets, .console .arrivals { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-line); }
.console .ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
.console .ticket--ours, .console .arrival--new, .console .lead--new { box-shadow: inset 3px 0 0 var(--c-action); padding-inline-start: var(--space-4); }
.console .ticket-subject { font-weight: 600; color: var(--c-text); text-decoration: none; }
.console .ticket-subject:hover { color: var(--c-action); text-decoration: underline; }
.console .ticket-meta { grid-column: 1; margin: 0; font-size: 0.8125rem; color: var(--c-text-3); }
.console .ticket-meta .ref { color: var(--c-text-2); }
.console .ticket-side { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-size: 0.8125rem; }
@media (max-width: 39.99rem) { .console .ticket { grid-template-columns: minmax(0, 1fr); } .console .ticket-side { grid-column: 1; grid-row: auto; } }
.console .ticket-row { display: grid; grid-template-columns: 0.6rem minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); color: inherit; text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
.console .ticket-row:hover { background-color: color-mix(in srgb, var(--c-sunk) 60%, transparent); }
.console .ticket-row:hover .ticket-subject { color: var(--c-action); text-decoration: underline; }
.console .ticket-state { width: 0.6rem; height: 0.6rem; }
.console .ticket-state.needs-you { background-color: var(--c-warn); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.console .ticket-state.ours { border-radius: 50%; background-color: var(--c-ok); }
.console .ticket-state.done { border-radius: 50%; border: 2px solid var(--c-text-3); }
.console .ticket-main { display: grid; gap: 0.1rem; min-width: 0; }
.console .ticket-row .ticket-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console .ticket-status { font-size: 0.875rem; color: var(--c-text-2); white-space: nowrap; }
.console .ticket-status.warn { color: var(--c-warn); }
.console .ticket-when { font-size: 0.8125rem; color: var(--c-text-3); white-space: nowrap; }
@media (max-width: 45.99rem) { .console .ticket-row { grid-template-columns: 0.6rem minmax(0, 1fr); } .console .ticket-status, .console .ticket-when { grid-column: 2; } }
.console .side-label { margin-top: var(--space-4); }
.console .side-line { margin-top: var(--space-1); }

.console .leads { display: grid; border-top: 1px solid var(--c-line); }
.console .lead { padding: var(--space-5) 0; border-bottom: 1px solid var(--c-line); }
.console .lead--spam { opacity: 0.6; }
.console .lead-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.console .lead-who h2 { margin: 0 0 var(--space-1); font-size: 1.0625rem; }
.console .lead-meta { margin: 0; font-size: 0.8125rem; color: var(--c-text-2); }
.console .lead-meta a { color: inherit; }
.console .lead-when { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; white-space: nowrap; }
.console .lead-msg { margin: var(--space-3) 0 0; max-width: 64ch; white-space: pre-wrap; }
.console .lead-config { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--c-line); font-size: 0.8125rem; }
.console .cfg-line { display: block; width: 100%; font-size: 0.8125rem; }
.console .cfg-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.1rem 0.5rem; border: 1px solid var(--c-line); border-radius: var(--radius-round); font-family: var(--font-mono); font-size: 0.75rem; }
.console .cfg-chip svg { width: 0.7rem; height: 0.7rem; }
.console .lead-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.console .lead-set { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.console .reply { font-size: 0.875rem; font-weight: 600; }
.console .lead-note { margin: var(--space-3) 0 0; font-size: 0.8125rem; color: var(--c-text-3); }
@media (max-width: 39.99rem) { .console .lead-head { flex-direction: column; align-items: flex-start; gap: var(--space-1); } }

/* The overview: the number of people waiting leads. */
.console .headline-stat { margin-bottom: var(--space-5); padding: var(--space-5) var(--space-6); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.console .headline-stat--waiting { box-shadow: inset 3px 0 0 var(--c-action); }
.console .headline-number { margin: var(--space-2) 0 var(--space-4); font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.console .headline-aside { margin-top: var(--space-3); font-size: 0.875rem; color: var(--c-text-2); }
.console .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1px; border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-line); overflow: hidden; }
.console .tiles .tile { display: grid; gap: var(--space-1); padding: var(--space-4); background-color: var(--c-raised); border-radius: 0; }
.console .tiles .tile strong { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.console .tiles a.tile:hover { background-color: var(--c-sunk); }
.console .tiles--quiet .tile strong { font-size: 1.125rem; font-weight: 600; }
.console .arrivals li { padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
.console .arrival-top { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.console .arrival-top a { font-weight: 600; color: var(--c-text); text-decoration: none; }
.console .arrival-top a:hover { color: var(--c-action); text-decoration: underline; }
.console .arrival-when { margin-inline-start: auto; font-size: 0.8125rem; color: var(--c-text-3); }
.console .arrival-msg { margin: var(--space-1) 0 0; max-width: 70ch; font-size: 0.875rem; color: var(--c-text-2); }

/* ---------- Media library, journal, content editor ---------- */
.console .upload { display: grid; gap: var(--space-3); max-width: 34rem; }
.console .upload button { justify-self: start; }
.console .asset { margin: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.console .asset img, .console .placeholder { display: block; width: 100%; height: 9rem; object-fit: cover; background-color: var(--c-sunk); }
.console .placeholder { display: grid; place-items: center; color: var(--c-text-3); }
.console .asset figcaption { display: grid; gap: var(--space-1); padding: var(--space-3); font-size: 0.8125rem; }
.console .asset-url { display: grid; gap: var(--space-1); margin-top: var(--space-1); }
.console .asset-url input { min-height: 2rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--c-text-2); }
.console .library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.console .library-grid figure { margin: 0; }
.console .library-grid img { display: block; width: 100%; height: 7rem; object-fit: cover; border-radius: var(--radius-1); background-color: var(--c-sunk); }
.console .library-grid figcaption { margin-top: var(--space-1); font-size: 0.75rem; word-break: break-all; user-select: all; }
.console .journal-form { display: grid; gap: var(--space-1); }
.console .journal-form label { margin-top: var(--space-4); }
.console .slug-row { display: flex; align-items: center; gap: var(--space-2); }
.console .slug-row input { flex: 1; }
.console .mono-area { font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.55; }
.console .journal-actions { margin: var(--space-5) 0; }
.console .post-preview { max-width: 46rem; font-size: 1.0625rem; line-height: 1.65; }
.console .post-preview h1 { font-size: 1.875rem; }
.console .post-preview h2 { font-size: 1.375rem; margin-top: var(--space-6); }
.console .post-preview img { max-width: 100%; height: auto; }
.console .post-preview figure { margin: var(--space-5) 0; }
.console .post-preview figcaption { margin-top: var(--space-2); font-size: 0.875rem; color: var(--c-text-2); }
.console .post-preview :is(th, td) { border: 1px solid var(--c-line); }
.console .content-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; }
.console .draft-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.console .draft-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.console .editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: var(--space-5); align-items: start; }
@media (max-width: 63.99rem) { .console .editor { grid-template-columns: 1fr; } }
.console .group { margin-bottom: var(--space-4); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); scroll-margin-top: 5rem; }
.console .group h2 { margin: 0 0 var(--space-1); font-size: 1.0625rem; }
.console .group-page { margin: var(--space-3) 0 0; font-size: 0.8125rem; color: var(--c-text-3); }
.console .group .field { display: block; margin-top: var(--space-4); }
.console .group .field label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.console .field.is-draft :is(input, textarea) { border-color: var(--c-warn); border-width: 2px; }
.console .field-orig { margin: var(--space-1) 0 0; font-size: 0.8125rem; color: var(--c-text-3); }
.console .editor-index { position: sticky; top: 5rem; padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.console .index-list { display: grid; gap: 0.1rem; margin: var(--space-2) 0 var(--space-4); }
.console .index-list a { display: flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: var(--space-1) var(--space-2); margin-inline: calc(-1 * var(--space-2)); border-radius: var(--radius-1); color: var(--c-text-2); text-decoration: none; font-size: 0.875rem; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.console .index-list a:hover { background-color: var(--c-sunk); color: var(--c-text); }
.console .index-dot { width: 0.45rem; height: 0.45rem; margin-inline-start: auto; border-radius: 50%; background-color: var(--c-warn); }
.console .index-note { font-size: 0.8125rem; color: var(--c-text-3); }
@media (max-width: 63.99rem) {
  .console .editor-index { position: static; }
  .console .index-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
  .console .index-list a { margin-inline: 0; border: 1px solid var(--c-line); }
}
.console .editor-save { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: color-mix(in srgb, var(--c-raised) 94%, transparent); backdrop-filter: blur(8px); }

/* ---------- Newsletter: the issue in two languages, its mail in light and dark ---------- */
.console .issue-langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-4); align-items: start; }
.console .issue-langs fieldset { display: grid; gap: var(--space-1); margin: 0; min-width: 0; }
.console .issue-langs legend { padding: 0 var(--space-1); font-weight: 700; }
.console .issue-langs legend .dim { font-weight: 400; font-size: 0.8125rem; }
.console .issue-langs label { margin-top: var(--space-3); }
.console .issue-meta { display: grid; gap: var(--space-1); margin: var(--space-3) 0 var(--space-4); }
.console .issue-meta > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); }
.console .issue-meta dt { color: var(--c-text-3); font-size: 0.875rem; }
.console .issue-meta dd { margin: 0; overflow-wrap: anywhere; }
.console .issue-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-4); }
.console .issue-previews figure { margin: 0; min-width: 0; }
.console .issue-previews figcaption { margin-bottom: var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--c-text-2); }
.console .issue-previews iframe { display: block; width: 100%; height: 44rem; border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-sunk); }
.console .filters--flush { margin: 0; border-bottom: 0; }
.console .issue-send fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; border: 0; }
.console .issue-send input[type="datetime-local"] { width: auto; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .console main > .console-main > * { animation: console-rise var(--dur-base) var(--ease) both; }
}
@keyframes console-rise { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Analytics: tiles, the line of visitors per day, bars ---------- */
.console .analytics-filter { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin: 0 0 var(--space-2); }
.console .analytics-filter label { display: grid; gap: var(--space-1); margin: 0; font-size: 0.875rem; }
.console .analytics-filter :is(select, input) { width: auto; min-width: 9rem; }
.console .analytics-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); margin-top: 0; gap: var(--space-5) var(--space-6); }
.console .analytics-tiles .stat b { font-size: 1.75rem; }
.console .analytics-tiles .stat > span { font-size: 0.875rem; }
.console .trend { color: var(--c-text-2); font-size: 0.8125rem; }
.console .trend::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-inline-end: 0.35em; background-color: currentColor; vertical-align: 0.05em; }
.console .trend--up::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.console .trend--down::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.console .trend--flat::before { height: 0.15em; vertical-align: 0.25em; }
.console .chart-scroll { overflow-x: auto; margin-top: var(--space-2); }
.console .chart-scroll:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.console .linechart { display: block; width: 100%; min-width: 40rem; height: auto; overflow: visible; }
.console .linechart__grid line { stroke: var(--c-line); stroke-width: 1; }
.console .linechart__grid .linechart__base { stroke: var(--c-text-3); }
.console .linechart__label { fill: var(--c-text-3); font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.console .linechart__line { fill: none; stroke: var(--c-action-fill); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.console .linechart__dot { fill: var(--c-action-fill); stroke: var(--c-raised); stroke-width: 2; transition: r var(--dur-fast) var(--ease); }
.console .linechart__dot--hover { opacity: 0; }
.console .linechart__hit { fill: transparent; }
.console .linechart__cross { stroke: var(--c-text-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.console .linechart__day:hover .linechart__cross { opacity: 1; }
.console .linechart__day:hover .linechart__dot { opacity: 1; r: 6px; }
.console .chart-table { margin-top: var(--space-3); }
.console .chart-table summary { cursor: pointer; color: var(--c-action); font-size: 0.875rem; }
.console .chart-table .table-scroll { margin-top: var(--space-2); max-height: 22rem; overflow-y: auto; }
.console .analytics-table td, .console .analytics-table th { vertical-align: middle; }
.console :is(.analytics-table, .card table) .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.console .analytics-label { min-width: 8rem; overflow-wrap: break-word; }
.console .analytics-sources { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.console .analytics-label .dim { display: block; font-size: 0.75rem; }
.console td.bar { width: 30%; min-width: 5rem; }
.console .vbar { display: block; width: 100%; height: 0.7rem; border-radius: var(--radius-1); }
.console .vbar rect { stroke: var(--c-raised); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.console .vbar__good { fill: var(--c-ok); }
.console .vbar__improve { fill: var(--c-warn); }
.console .vbar__poor { fill: url(#vbar-hatch); }
.console .vbar__hatch { fill: var(--c-danger); }
.console .vbar__hatch-bg { fill: color-mix(in srgb, var(--c-danger) 45%, var(--c-raised)); }
.console .vbar-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.console .card .vbar + .hint { margin-top: var(--space-1); }

@media (forced-colors: active) {
  .console .note::before, .console .tile-state, .console .ticket-state { forced-color-adjust: none; background-color: CanvasText; }
  .console .usage-bar { border: 1px solid CanvasText; }
  .console .linechart__line { stroke: CanvasText; }
  .console .linechart__dot { fill: CanvasText; }
  .console .vbar { border: 1px solid CanvasText; }
}