/* ==========================================================================
   PLATFORM ADMINISTRATION — dashboard, offices, plans, subscriptions, audit log
   --------------------------------------------------------------------------
   Owned by the platform-admin workstream. Prefix: .adm-
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Contents
     1  Text and small parts   sub-lines, codes, headings, readonly values
     2  Filters                the bar above a list
     3  Lists                  a table that becomes one card per row when narrow
     4  Sorting                the column buttons and their direction mark
     5  Panels                 the inline form every decision passes through
     6  Office page            status line, facts, tiles, roles, meters, timeline
     7  History                what moved in a subscription, line by line
     8  Hand-over              the owner's first password, shown once
     9  Plans                  one card per plan
    10  Dashboard              sections, revenue, lists, the weekly bars
    11  Audit log              the values disclosure
    12  Forced colours
   ========================================================================== */

/* ==========================================================================
   1 · TEXT AND SMALL PARTS
   ========================================================================== */

.adm-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.adm-sub--danger {
  color: var(--color-danger-fg);
}

.adm-line {
  display: block;
  font-weight: var(--font-weight-medium);
}

.adm-name {
  font-size: var(--font-size-md);
}

.adm-code {
  padding-inline: var(--space-1);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  color: var(--color-text);
}

.adm-section {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.adm-subtitle {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.adm-fieldset-note {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* A fact shown but not editable: dashed, so it does not look like a field that failed to load. */
.adm-readonly {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.adm-errors {
  margin: 0;
  padding-inline-start: var(--space-4);
  list-style: disc;
}

.adm-choices {
  display: grid;
  gap: var(--space-2);
}

.adm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A row-level destructive button is quiet: a solid red button on every card makes a list look like
   an alarm. The loud one is the confirmation's, which is where the harm would be done. */
.btn.adm-btn-danger {
  color: var(--color-danger-fg);
  background: transparent;
  border-color: var(--color-danger-border);
}

.btn.adm-btn-danger:hover {
  background: var(--color-danger-soft);
}

.adm-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ==========================================================================
   2 · FILTERS
   The shared filter bar is a grid with a floor; the audit log has more controls and wants a
   slightly smaller floor so a wide screen fits them in two rows, not three.
   ========================================================================== */

.adm-filters--audit {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

/* The search box is the one control people type into: it gets two columns' room and the selects share
   the rest, so a placeholder like "name, registration number or owner email" is not cut short. */
@media (min-width: 48rem) {
  .adm-filters:not(.adm-filters--audit) > .field:first-child {
    grid-column: span 2;
  }
}

/* ==========================================================================
   3 · LISTS
   Six or seven columns on a wide screen. Under 56rem the table is re-flowed as one card per row:
   the cells stack, each carrying its column's name (data-label) in front, and the header row is kept
   for screen readers only. Reading order is the DOM order, so nothing moves for assistive technology;
   the explicit table roles in the markup keep the table semantics that `display: block` would
   otherwise take away.
   ========================================================================== */

.adm-table td:first-child {
  min-inline-size: 12rem;
}

.adm-term {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A row for an office that is not open recedes; its badge still says why, in words. */
.adm-row--off td {
  color: var(--color-text-muted);
}

.adm-row--open > td {
  border-block-end-color: transparent;
}

.adm-expand-row > td {
  padding: var(--space-3);
  white-space: normal;
}

.adm-expand-row,
.adm-expand-row:hover,
.table--zebra .adm-expand-row:nth-child(even) {
  background: var(--color-surface);
}

.adm-note {
  max-inline-size: 22rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.adm-actions {
  white-space: nowrap;
}

/* Seven columns do not fit beside the sidebar between a tablet and a laptop: the creation date, the least asked for (it is
   on the office's own page), steps aside until there is room, so the action stays in view instead of off the edge. */
@media (min-width: 70rem) and (max-width: 80rem) {
  .adm-table--offices th:nth-child(6),
  .adm-table--offices td:nth-child(6) {
    display: none;
  }
}

/* Below what a table of these columns needs beside the sidebar (about 70rem), a list is one card per row. */
@media (max-width: 70rem) {
  .adm-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .adm-table,
  .adm-table tbody,
  .adm-table tr,
  .adm-table td {
    display: block;
  }

  /* Visually hidden, still announced: the cells carry their own labels below. */
  .adm-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .adm-table tbody tr {
    margin-block-end: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .adm-table.table--zebra tbody tr:nth-child(even) {
    background: var(--color-surface);
  }

  .adm-table td,
  .adm-table.table--zebra td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
    border: 0;
    white-space: normal;
  }

  .adm-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 7rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
  }

  /* What a cell holds stacks under its own label's line when there is no room beside it. */
  .adm-table td > * {
    min-inline-size: 0;
  }

  /* The first cell leads the card; it needs no label of its own. */
  .adm-table td:first-child {
    display: block;
    padding-block-start: 0;
    min-inline-size: 0;
  }

  .adm-table td:first-child::before {
    content: none;
  }

  .adm-table .table__actions {
    inline-size: auto;
    padding-block-end: 0;
  }

  .adm-table .adm-expand-row {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .adm-table .adm-expand-row > td {
    display: block;
    padding: 0;
  }

  .adm-note {
    max-inline-size: none;
  }
}

/* On a tablet or a small laptop the cards sit two to a row; a panel that opens under one takes the whole row. */
@media (min-width: 44rem) and (max-width: 70rem) {
  .adm-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .adm-table tbody tr {
    margin-block-end: 0;
  }

  .adm-table tbody .adm-expand-row {
    grid-column: 1 / -1;
  }
}

/* The audit log runs to dozens of pages. The shared page list does not wrap, so on a phone it would push the
   whole page wider than the screen; here it wraps onto a second line instead. */
.adm-pager .pagination__list {
  flex-wrap: wrap;
}

/* ==========================================================================
   4 · SORTING
   A column header is a button, so it can be reached and used from the keyboard, and the cell's
   aria-sort says which way the list is ordered. The mark is two small triangles: the one that is
   in use is solid, the other a trace — a shape, not a colour, carries the direction.
   ========================================================================== */

.adm-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height-sm);
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
}

.adm-sort:hover,
.adm-sort:focus-visible {
  color: var(--color-link-hover);
}

.adm-sort__mark {
  position: relative;
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.875rem;
}

.adm-sort__mark::before,
.adm-sort__mark::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  block-size: 0.375rem;
  background: currentColor;
  opacity: 0.28;
}

.adm-sort__mark::before {
  inset-block-start: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.adm-sort__mark::after {
  inset-block-end: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

th[aria-sort='ascending'] .adm-sort__mark::before,
th[aria-sort='descending'] .adm-sort__mark::after {
  opacity: 1;
}

/* ==========================================================================
   5 · PANELS
   The inline form a decision passes through, opened under the thing it is about. A primary edge for
   a change, a danger edge for one that takes something away; the title says which in words.
   ========================================================================== */

.adm-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.adm-panel--danger {
  border-color: var(--color-danger-border);
  border-inline-start-color: var(--color-danger);
}

.adm-panel__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   6 · OFFICE PAGE
   ========================================================================== */

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

.adm-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 56rem) {
  .adm-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.adm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.adm-facts--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adm-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.adm-fact dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.adm-fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  overflow-wrap: anywhere;
}

.adm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
}

/* The shared tile is a wide-screen row of icon and number; four of them in a card read better as a
   compact grid, so its padding comes in a little. */
.adm-tiles .stat-tile {
  padding: var(--space-3);
}

.adm-roles {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-role {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-border-subtle);
}

.adm-role:first-child {
  padding-block-start: 0;
}

.adm-role:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

/* The owner's account: who, whether they can sign in, and the way back in when they cannot. */
.adm-owners {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-owner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adm-owner__main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.adm-owner__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.adm-owner__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.adm-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-meter .progress-label {
  margin-block-end: var(--space-1);
}

.adm-meter .adm-sub {
  margin-block-start: var(--space-1);
}

.adm-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-timeline__item {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border-subtle);
}

.adm-timeline__item:first-child {
  padding-block-start: 0;
}

.adm-timeline__item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.adm-timeline__when {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.adm-timeline__what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  .adm-timeline__item {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   7 · HISTORY
   ========================================================================== */

.adm-event {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.adm-flow,
.adm-change {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.adm-flow .icon,
.adm-change .icon {
  color: var(--color-text-subtle);
}

/* ==========================================================================
   8 · HAND-OVER
   The owner's first password, shown once. A dashed edge marks it as something that will not be here
   again; the value is large, selectable in one click, and in a monospace face that tells a 1 from an l.
   ========================================================================== */

.adm-secret {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-primary-border);
  border-radius: var(--radius-lg);
}

.adm-secret__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.adm-secret__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.adm-secret__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.adm-secret__row dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.adm-secret__row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
}

.adm-secret__value {
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
  user-select: all;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.adm-secret__value--key {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 40rem) {
  .adm-secret__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One tap puts a value on the clipboard (the data-copy handler in dashboard.js). The handler sets
   data-copied / data-copy-failed for a couple of seconds; the state is an icon AND a word. */
.adm-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap-target-min);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.adm-copy:hover {
  background: var(--color-primary-soft);
}

.adm-copy__icon--done,
.adm-copy__icon--fail,
.adm-copy__done,
.adm-copy__fail {
  display: none;
}

.adm-copy[data-copied='true'] {
  color: var(--color-success-fg);
  background: var(--color-success-soft);
  border-color: var(--color-success);
}

.adm-copy[data-copied='true'] .adm-copy__icon--idle,
.adm-copy[data-copied='true'] .adm-copy__idle {
  display: none;
}

.adm-copy[data-copied='true'] .adm-copy__icon--done {
  display: inline-block;
}

.adm-copy[data-copied='true'] .adm-copy__done {
  display: inline;
}

.adm-copy[data-copy-failed='true'] {
  color: var(--color-danger-fg);
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

.adm-copy[data-copy-failed='true'] .adm-copy__icon--idle,
.adm-copy[data-copy-failed='true'] .adm-copy__idle {
  display: none;
}

.adm-copy[data-copy-failed='true'] .adm-copy__icon--fail {
  display: inline-block;
}

.adm-copy[data-copy-failed='true'] .adm-copy__fail {
  display: inline;
}

/* ==========================================================================
   9 · PLANS
   One card per plan, side by side: what an administrator compares is the plans against each other.
   A switched-off plan keeps its card, dashed and quiet, with its badge saying so in words.
   ========================================================================== */

.adm-plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-4);
  align-items: start;
}

.adm-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.adm-plan--off {
  background: var(--color-surface-sunken);
  border-style: dashed;
}

.adm-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.adm-plan__id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.adm-plan__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.adm-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xl);
}

.adm-limits {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.adm-limits > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-1);
  border-block-end: 1px solid var(--color-border-subtle);
}

.adm-limits > div:last-child {
  border-block-end: 0;
}

.adm-limits dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.adm-limits dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
}

.adm-plan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: auto;
}

/* ==========================================================================
   10 · DASHBOARD
   ========================================================================== */

.adm-also {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.adm-revenue {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border-subtle);
}

.adm-revenue:last-of-type {
  padding-block-end: 0;
  border-block-end: 0;
}

.adm-revenue__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-2xl);
}

.adm-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.adm-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.adm-checklist .icon {
  flex: 0 0 auto;
  margin-block-start: 2px;
  color: var(--color-text-subtle);
}

.adm-attention {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-attention__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border-subtle);
}

.adm-attention__item:first-child {
  padding-block-start: 0;
}

.adm-attention__item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.adm-attention__when {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* The weekly bars. Each is a number above a column and a date below, so the figure is read, not
   estimated from a height. The height is one custom property — the bar's share of the tallest in its
   series — and a zero is still a hairline on the baseline, so "none" is drawn and not simply absent. */
.adm-usage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6) var(--space-5);
}

.adm-usage__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
}

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

.adm-usage__icon {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.adm-usage__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.adm-usage__total {
  margin: 0;
  font-size: var(--font-size-2xl);
  line-height: 1.1;
}

.adm-usage__note {
  margin-block-start: var(--space-4);
}

.adm-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-inline-size: 0;
}

.adm-bar__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.adm-bar__track {
  display: flex;
  align-items: flex-end;
  inline-size: 100%;
  block-size: 5.5rem;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-xs);
}

.adm-bar__fill {
  inline-size: 100%;
  block-size: calc(var(--bar, 0) * 100%);
  min-block-size: 2px;
  background: var(--color-primary);
  border-start-start-radius: var(--radius-xs);
  border-start-end-radius: var(--radius-xs);
}

.adm-usage__item:nth-child(2) .adm-bar__fill {
  background: var(--color-info);
}

.adm-usage__item:nth-child(3) .adm-bar__fill {
  background: var(--color-success);
}

.adm-bar__label {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   11 · AUDIT LOG
   An entry's old and new values sit in a disclosure under its event, so a page of fifty entries is a
   page of fifty lines and not fifty tables. For anything an office owns there is no disclosure — only
   a note, with a lock, that the values are not the platform's to read.
   ========================================================================== */

.adm-values {
  margin-block-start: var(--space-1);
}

.adm-values > summary {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-link);
  cursor: pointer;
}

.adm-values__table {
  inline-size: 100%;
  margin-block-start: var(--space-2);
  font-size: var(--font-size-sm);
  border-collapse: collapse;
}

.adm-values__table th,
.adm-values__table td {
  padding: var(--space-1) var(--space-2);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
  border-block-end: 1px solid var(--color-border-subtle);
}

.adm-values__table thead th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.adm-values__table tbody th {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* A row whose values are not the platform's to read says so with a lock — spoken to assistive technology
   and shown on hover — and the page's own notice at the top says why. Fifty rows each saying it in words
   would be a wall of the same sentence. */
.adm-hidden-note {
  display: inline-flex;
  align-items: center;
  margin-block-start: var(--space-1);
  color: var(--color-text-subtle);
  cursor: help;
}

/* ==========================================================================
   12 · FORCED COLOURS
   Backgrounds are dropped in forced-colours mode, which would leave a bar with no height to see;
   a border keeps it drawn.
   ========================================================================== */

@media (forced-colors: active) {
  .adm-bar__fill {
    background: CanvasText;
  }

  .adm-bar__track,
  .adm-panel,
  .adm-secret,
  .adm-plan {
    border: 1px solid CanvasText;
  }
}