/* Layout only. Every colour is a var(--gt-*) emitted from the brand record by /brand.css,
   light and dark, or a --ui-* mixed from one (gt-ui.css); a literal hex value here fails
   scripts/check-branding.sh, which is what keeps re-branding to a single file.

   Sizes are in rem against a 14px root: a working screen shows a lot at once, so the type is
   compact, and the page, not a narrow column, sets the width. */
* { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 1rem/1.5 var(--gt-font-stack);
  background: var(--ui-canvas);
  color: var(--gt-color-fg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gt-color-accent-text); }
/* A real outline, not a shadow: it shows in Windows high-contrast mode, where shadows are
   dropped. Inset where a container clips its edges (the theme switch). */
:focus-visible { outline: 2px solid var(--gt-color-accent); outline-offset: 2px; }
.theme-switch button:focus-visible { outline-offset: -3px; }
/* An in-page link lands below the sticky top bar, not under it. */
html { scroll-padding-top: 4.75rem; }
code { font-size: .95em; }
p { margin: .5rem 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The logo's four rings, as four thin bands. */
.spectrum { display: flex; height: 3px; }
.spectrum span { flex: 1; }
.spectrum span:nth-child(1) { background: var(--gt-color-spectrum-1); }
.spectrum span:nth-child(2) { background: var(--gt-color-spectrum-2); }
.spectrum span:nth-child(3) { background: var(--gt-color-spectrum-3); }
.spectrum span:nth-child(4) { background: var(--gt-color-spectrum-4); }

/* ---- the sign-in pages: a light page, the logo above one card ---- */
body.centred {
  display: grid; place-items: center; min-height: 100vh;
  background: var(--ui-canvas); color: var(--gt-color-fg);
}
.door-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem 1rem; }
.door-wrap .brand-logo { max-height: 3.5rem; }
.door-wrap .brand-name { font-size: 1.9rem; font-weight: 500; letter-spacing: -.01em; }
.door-wrap .card {
  background: var(--ui-card); color: var(--gt-color-fg); border: 1px solid var(--gt-color-border);
  border-radius: var(--gt-radius-lg); box-shadow: var(--gt-shadow-2);
  overflow: hidden; padding: 0; width: 100%; max-width: 26rem;
}
.door-wrap .card .login { padding: 1.75rem; }
.door-wrap .card .login button[type="submit"] { padding: .65rem 1rem; }

/* ---- the console: a light menu down the left, the page beside it ---- */
.layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.nav-toggle, .nav-scrim, .nav-open { display: none; }
.sidebar {
  display: flex; flex-direction: column; gap: .75rem; padding: 0 0 1.25rem;
  background: var(--ui-card); color: var(--gt-color-fg); border-right: 1px solid var(--gt-color-border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* A menu taller than the screen scrolls; nothing in it is squeezed (the stripe went to 0px). */
.sidebar > * { flex-shrink: 0; }
.sidebar .brand { padding: 1.1rem 1.25rem .25rem; }
.sidebar .brand-logo { max-height: 2.2rem; }
.brand-name { font-weight: 500; font-size: 1.35rem; letter-spacing: -.01em; }
.brand-sub { color: var(--gt-color-muted); font-size: .85rem; margin-top: .4rem; }
.sidebar nav { display: flex; flex-direction: column; gap: .9rem; padding: 0 .75rem; }
.nav-section { display: flex; flex-direction: column; gap: 1px; }
/* A section's heading: small, quiet capitals, like Sangoma's grouped menus. */
.nav-heading {
  margin: 0 0 .3rem; padding: 0 .65rem; font-size: .7rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gt-color-muted);
}
.nav-item {
  position: relative; display: flex; align-items: center; gap: .65rem;
  padding: .45rem .65rem; border-radius: 8px; text-decoration: none;
  color: var(--gt-color-fg); font-size: .95rem;
}
.nav-item .ico { color: var(--gt-color-muted); width: 1.15rem; height: 1.15rem; }
.nav-item:hover { background: var(--ui-hover); }
/* The current screen: the accent, quietly, with a bar on the edge as the web app's rail. */
.nav-item.active { background: var(--ui-accent-soft); color: var(--gt-color-accent-text); font-weight: 500; }
.nav-item.active .ico { color: var(--gt-color-accent-text); }
.nav-item.active::before {
  content: ""; position: absolute; left: -.75rem; top: .4rem; bottom: .4rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--gt-color-accent);
}

/* Light, dark, or whatever the computer is set to. */
.theme-switch { display: flex; border: 1px solid var(--gt-color-border); border-radius: var(--gt-radius); overflow: hidden; }
.theme-switch button {
  flex: 1 1 0; background: transparent; color: var(--gt-color-muted); border-radius: 0;
  padding: .35rem .6rem; font-size: .85rem; font-weight: 400;
}
.theme-switch button + button { border-left: 1px solid var(--gt-color-border); }
.theme-switch button:hover { background: var(--ui-hover); color: var(--gt-color-fg); }
.theme-switch button[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--gt-color-accent-text); font-weight: 500; }
.door-wrap .theme-switch { background: var(--ui-card); }

.content { display: flex; flex-direction: column; min-width: 0; }
/* The top of a screen: where it sits in the menu, its name, its main actions, and the account. */
.topbar {
  /* Above anything a page lays out (its menu opens over the page), below the phone drawer. */
  position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 1rem;
  min-height: 4rem; padding: .6rem 1.75rem;
  background: var(--ui-card); border-bottom: 1px solid var(--gt-color-border);
}
.topbar-title { flex: 1 1 auto; min-width: 0; }
.crumb { margin: 0 0 .1rem; font-size: .78rem; color: var(--gt-color-muted); }
.topbar h1 { margin: 0; font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; }
.topbar-actions { display: flex; gap: .5rem; align-items: center; flex: none; }
.topbar-actions:empty { display: none; }
.user-menu { position: relative; flex: none; }
.user-menu summary {
  list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .25rem .55rem .25rem .25rem; border-radius: 999px; color: var(--gt-color-muted);
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--ui-hover); }
.user-menu .who { color: var(--gt-color-fg); font-weight: 500; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-avatar {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--ui-accent-soft); color: var(--gt-color-accent-text); font-size: .78rem; font-weight: 500;
}
.menu-pop {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 10; min-width: 15rem;
  display: grid; gap: .3rem; padding: .6rem;
  background: var(--ui-card); border: 1px solid var(--gt-color-border); border-radius: 10px;
  box-shadow: var(--gt-shadow-2);
}
.pop-heading {
  margin: .1rem .25rem .25rem; font-size: .7rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gt-color-muted);
}
.pop-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem;
  border-radius: 6px; background: transparent; color: var(--gt-color-fg); font-weight: 400;
  text-align: left; text-decoration: none;
}
.pop-item:hover { background: var(--ui-hover); }
.pop-item .ico { color: var(--gt-color-muted); }
.user-pop form { margin: 0; }

.page { padding: 1.5rem 1.75rem 3rem; }
.page h2, .section-title { margin: 1.6rem 0 .6rem; font-size: 1.1rem; font-weight: 500; }
.page h3 { margin: 1.2rem 0 .45rem; font-size: 1rem; font-weight: 500; }
.page > h2:first-child, .page > :first-child h2:first-child { margin-top: .25rem; }
.card {
  border: 1px solid var(--gt-color-border); border-radius: var(--gt-radius-lg);
  padding: 1.25rem; background: var(--ui-card); color: var(--gt-color-fg);
  box-shadow: var(--gt-shadow-1);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* Cards one under another, not cards laid out in a row. */
.page > .card + .card, .page > .card + form, .page > form + .card { margin-top: 1rem; }
.login { display: flex; flex-direction: column; gap: .9rem; min-width: 19rem; }
.login label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--gt-color-muted); }
input, select, textarea {
  padding: .5rem .65rem; border: 1px solid var(--gt-color-border);
  border-radius: var(--gt-radius); font: inherit; font-size: 1rem; background: var(--gt-color-bg); color: var(--gt-color-fg);
}
input[type="checkbox"], input[type="radio"] { padding: 0; accent-color: var(--gt-color-accent); }
input[type="file"] { padding: .35rem; }
input:focus, select:focus, textarea:focus { border-color: var(--gt-color-accent); outline: none; box-shadow: var(--ui-focus); }
button {
  padding: .5rem .95rem; border: 0; border-radius: var(--gt-radius); font: inherit; font-weight: 500;
  cursor: pointer; background: var(--gt-color-accent); color: var(--gt-color-accent-fg);
  transition: background-color .12s, border-color .12s, color .12s;
}
button:hover, .btn:hover { background: var(--ui-accent-hover); }
button.linkish {
  background: none; color: var(--gt-color-muted); padding: 0; font-weight: 400;
  text-decoration: underline; font-size: .9rem;
}
button.linkish:hover { background: none; color: var(--gt-color-fg); }
.error { color: var(--gt-color-danger); margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
.kv dt { color: var(--gt-color-muted); }
.kv dd { margin: 0; }

/* ---- a phone: the menu becomes a drawer, opened from the top bar ---- */
@media (max-width: 879px) {
  .layout { grid-template-columns: 1fr; }
  /* Closed, the drawer is hidden outright (not only slid away), so its links are out of the
     tab order and a screen reader's reading; it hides once the slide out has finished. */
  .sidebar {
    position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: min(18rem, 85vw); height: auto;
    transform: translateX(-100%); visibility: hidden; box-shadow: var(--gt-shadow-2);
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .nav-toggle:checked ~ .layout .sidebar { transform: none; visibility: visible; transition: transform .2s ease; }
  .nav-toggle:checked ~ .layout .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 15;
    background: color-mix(in oklab, var(--gt-color-fg) 35%, transparent);
  }
  .nav-open {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none;
    border-radius: 8px; cursor: pointer; color: var(--gt-color-fg);
  }
  .nav-open:hover { background: var(--ui-hover); }
  .nav-open .ico { width: 1.4rem; height: 1.4rem; }
  .topbar { padding: .5rem 1rem; gap: .6rem; }
  /* No room for the name beside the avatar, but a screen reader still says it. */
  .user-menu .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---- data screens ---- */
.toolbar, .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .75rem; }
.toolbar .spacer { flex: 1; }
form > .toolbar:last-child, form > .actions:last-child { margin: .25rem 0 0; }
.btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem;
  border-radius: var(--gt-radius); text-decoration: none;
  background: var(--gt-color-accent); color: var(--gt-color-accent-fg); border: 0; font: inherit;
  font-weight: 500; cursor: pointer; line-height: 1.3; transition: background-color .12s, border-color .12s;
}
/* A secondary action: an outline that fills faintly under the pointer. */
.btn.secondary, button.secondary {
  background: var(--ui-card); color: var(--gt-color-fg); border: 1px solid var(--gt-color-border);
  padding: calc(.5rem - 1px) calc(.95rem - 1px);
}
.btn.secondary:hover, button.secondary:hover { background: var(--ui-hover); border-color: var(--ui-border-strong); }
.btn.danger, button.danger { background: var(--gt-color-danger); color: var(--gt-color-bg); }
.btn.danger:hover, button.danger:hover { background: color-mix(in oklab, var(--gt-color-danger) 88%, black); }
/* A table sits in a card of its own: a quiet header, airy rows, the row under the pointer lit. */
.table-wrap {
  overflow-x: auto; background: var(--ui-card); border: 1px solid var(--gt-color-border);
  border-radius: var(--gt-radius-lg); margin-bottom: 1rem;
}
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td {
  text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--gt-color-border);
  white-space: nowrap; vertical-align: middle;
}
table.data th {
  color: var(--gt-color-muted); font-weight: 500; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; background: var(--ui-neutral-soft);
}
table.data tbody tr:hover td { background: var(--ui-hover); }
table.data tr:last-child td { border-bottom: 0; }
table.data td input:not([type="checkbox"]):not([type="radio"]), table.data td select { padding: .3rem .5rem; }
table.data td .btn, table.data td button { padding: .3rem .7rem; }
table.data td .btn.secondary, table.data td button.secondary { padding: calc(.3rem - 1px) calc(.7rem - 1px); }
table.data td form { margin: 0; }
.muted { color: var(--gt-color-muted); }
.pill {
  display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .82rem; line-height: 1.5;
  border: 1px solid transparent; background: var(--ui-neutral-soft); color: var(--gt-color-muted);
}
.pill.on { background: var(--ui-accent-soft); color: var(--gt-color-accent-text); }

/* A form: fields side by side, as many as the page fits, and everything that is not a
   single field (a group of fields, a list, a note, the buttons) across the whole row. */
.form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .75rem 1.25rem; align-items: start;
}
.form > fieldset, .form > .wide, .form > .check, .form > p, .form > .hint, .form > .toolbar,
.form > .actions, .form > .flash, .form > .table-wrap, .form > .checklist, .form > h2,
.form > h3, .form > div:not(.field) { grid-column: 1 / -1; }
.form label, .form .field { display: flex; flex-direction: column; gap: .25rem; font-size: .92rem; color: var(--gt-color-muted); min-width: 0; }
.form label > input, .form label > select, .form label > textarea { color: var(--gt-color-fg); width: 100%; }
.form label > input[type="checkbox"], .form label > input[type="radio"] { width: auto; }
.form .field > :not(.field-label):not(.hint) { color: var(--gt-color-fg); font-size: 1rem; }
.form .hint, .hint { color: var(--gt-color-muted); font-size: .85rem; line-height: 1.4; }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.form fieldset {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .85rem 1.5rem;
  align-items: start; margin: 0; min-width: 0;
  background: var(--ui-card); border: 1px solid var(--gt-color-border);
  border-radius: var(--gt-radius-lg); padding: .9rem 1.25rem 1.25rem;
}
.form fieldset > legend { padding: 0 .45rem; color: var(--gt-color-fg); font-weight: 500; }
.form fieldset > p, .form fieldset > .hint, .form fieldset > .check, .form fieldset > .wide,
.form fieldset > .table-wrap, .form fieldset > .checklist, .form fieldset > fieldset,
.form fieldset > div:not(.field) { grid-column: 1 / -1; }
.form fieldset > p, .form fieldset > .hint { margin: 0; }
.form .field.wide .check { font-size: 1rem; }
/* A label that starts with its box is one line: the box, then what it means. */
.form label:has(> input[type="checkbox"]:first-child), .form label:has(> input[type="radio"]:first-child) {
  flex-direction: row; align-items: center; gap: .5rem; color: var(--gt-color-fg); font-size: 1rem;
}
.toolbar label { display: inline-flex; align-items: center; gap: .4rem; }
.check { flex-direction: row !important; align-items: center; gap: .5rem; color: var(--gt-color-fg) !important; font-size: 1rem !important; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem 1rem; }
/* A message about what just happened: green done, red refused, both soft. */
.flash {
  padding: .65rem .9rem; border-radius: var(--gt-radius); margin-bottom: 1rem;
  border: 1px solid color-mix(in oklab, var(--gt-color-success) 35%, var(--gt-color-border));
  border-left: 3px solid var(--gt-color-success); background: var(--ui-success-soft);
}
.flash.error {
  border-color: color-mix(in oklab, var(--gt-color-danger) 35%, var(--gt-color-border));
  border-left-color: var(--gt-color-danger); background: var(--ui-danger-soft); color: var(--gt-color-danger);
}
.card, .table-wrap, .wb-stat { box-shadow: var(--gt-shadow-1); }
.empty { padding: 2rem; text-align: center; color: var(--gt-color-muted); }
details.card > summary { cursor: pointer; font-weight: 500; }
details.card[open] > summary { margin-bottom: .75rem; }
form.inline { display: inline; }
.toolbar label.inline { display: inline-flex; align-items: center; gap: .35rem; }

/* A handful of figures across the top of a screen. */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }
.stat {
  border: 1px solid var(--gt-color-border); border-radius: var(--gt-radius-lg); padding: .9rem 1.1rem;
  background: var(--ui-card); box-shadow: var(--gt-shadow-1);
}
.stat .label { color: var(--gt-color-muted); font-size: .85rem; display: block; }
.stat strong { font-size: 1.7rem; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
a.stat { text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.stat:hover { border-color: var(--gt-color-accent); box-shadow: var(--gt-shadow-2); }
.stat.alert { border-color: var(--gt-color-danger); }
.stat.alert strong { color: var(--gt-color-danger); }
.stat { position: relative; }
.stat-ico {
  position: absolute; right: .9rem; top: .85rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--ui-accent-soft); color: var(--gt-color-accent-text);
}
.stat-ico .ico { width: 1.05rem; height: 1.05rem; }
.stat:has(.stat-ico) .label { padding-right: 2.5rem; }
.stat.alert .stat-ico { background: var(--ui-danger-soft); color: var(--gt-color-danger); }
.card.empty .ico.lg { display: block; margin: 0 auto .6rem; color: var(--gt-color-muted); opacity: .7; }
.card.empty p { margin: 0; }
.card.empty .btn { margin-top: .9rem; }

/* The dashboard: the latest calls, and beside them the shortcuts this person may use. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.25rem; align-items: start; }
.dash-grid > :only-child { grid-column: 1 / -1; }
.dash-main > h2:first-child { margin-top: 0; }
.quick { padding: 1rem .6rem .6rem; }
.quick h2 { margin: 0 .6rem .5rem; font-size: 1rem; }
.quick ul { list-style: none; margin: 0; padding: 0; }
.quick a {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 8px;
  color: var(--gt-color-fg); text-decoration: none;
}
.quick a:hover { background: var(--ui-hover); }
.quick a > .ico:first-child { color: var(--gt-color-accent-text); }
.quick a > span { flex: 1; }
.quick a > .ico:last-child { color: var(--gt-color-muted); }
@media (max-width: 1099px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- wallboard ---- */
.wb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.wb-title { margin: 0 0 .6rem; font-size: 1.1rem; }
.wb-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.wb-stat { border: 1px solid var(--gt-color-border); border-radius: var(--gt-radius); padding: .45rem .6rem; }
.wb-stat strong { font-size: 1.9rem; line-height: 1.2; }
.wb-warn { border-color: var(--gt-color-warning); color: var(--gt-color-warning); }
.wb-alert { border-color: var(--gt-color-danger); color: var(--gt-color-danger); }
.wb-alert-text { color: var(--gt-color-danger); }
.wb-agents { margin: .6rem 0 .2rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.wb-today { margin: .5rem 0 0; font-size: .9rem; }
/* A colour a reseller chose, drawn as a small square beside its value. */
.swatch { display: inline-block; width: 1rem; height: 1rem; margin-right: .25rem; vertical-align: middle; border: 1px solid var(--gt-color-border); border-radius: 3px; }
/* A brand's logo, in place of its name: on the light menu and sign-in page (dark in dark mode). */
.brand-logo { display: block; max-height: 2.75rem; max-width: 100%; }
/* A reseller's logo or favicon, small, where the platform manages it. */
.asset-preview { display: inline-block; max-height: 1.75rem; max-width: 8rem; vertical-align: middle; margin-right: .5rem; }

/* The app sign-in code: scanned by a camera, so it keeps its own size and quiet zone, and
   stays dark on light whatever the theme. */
.qr svg { display: block; max-width: 100%; height: auto; }

/* Where a status sends calls: a choice, and a number beside it only when the choice is one. */
table.routes td.row-head { font-weight: 600; }
table.routes td.row-head label.check { display: flex; font-weight: 400; margin-top: .2rem; }
/* A second form on one page (Company settings: the statuses) stands apart from the first. */
form + form { margin-top: 1.5rem; }
.route { display: flex; gap: .35rem; align-items: center; }
.route select { width: auto; }
.route input { width: 9rem; display: none; }
.route:has(option[value="number"]:checked) input { display: block; }

/* Audio: each hold music a folded section of its own, its form inside. */
details.playlist { border-top: 1px solid var(--gt-color-border); padding: .6rem 0; }
details.playlist > summary { cursor: pointer; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
details.playlist[open] > summary { margin-bottom: .6rem; }
#audio-files audio { height: 2rem; max-width: 16rem; }
#audio-files form.inline input[name="name"] { width: 14rem; }
td.row-actions { white-space: nowrap; text-align: right; }
/* A table wider than the page scrolls sideways, but a row's own buttons stay in view, pinned to
   its right edge: a Suspend or Delete off the edge of the screen is one nobody can find. */
table.data td.row-actions {
  position: sticky; right: 0; background: var(--ui-card);
  box-shadow: -10px 0 10px -10px color-mix(in oklab, var(--gt-color-fg) 30%, transparent);
}
table.data tbody tr:hover td.row-actions { background: linear-gradient(var(--ui-hover), var(--ui-hover)), var(--ui-card); }
details.playlist > form.inline { display: block; margin-top: .5rem; }

/* A state somebody forced: opening hours closed by the switch, until it runs out. */
.pill.alert { border-color: var(--gt-color-warning); color: var(--gt-color-warning); }