/* Business Management Dashboard: the engine's own pieces (xd-). Everything is drawn in the business's
   tokens, so each dashboard takes its business's colours and type. Layout only; no figure lives here. */

/* A dashboard has more sections than a website has pages. Where they do not fit beside the name (a tablet, a small
   laptop, larger text) the row of links takes a line of its own under it and scrolls sideways, with a cue at each edge. */
.xd-frame .x-nav a { padding-inline: 10px; font-size: .9375rem; white-space: nowrap; }
@media (min-width: 53.75em) and (max-width: 73.74em) {
  .xd-frame .x-head-in { flex-wrap: wrap; row-gap: 0; }
  .xd-frame .x-nav {
    --x-under: var(--x-bg); position: relative; order: 3; flex: 0 0 100%; min-width: 0; overflow-x: auto; scroll-padding-inline: 24px;
    background: linear-gradient(90deg, var(--x-under) 40%, transparent) 0 0 / 32px 100% no-repeat local, linear-gradient(270deg, var(--x-under) 40%, transparent) 100% 0 / 32px 100% no-repeat local, linear-gradient(90deg, var(--x-hair), transparent) 0 0 / 14px 100% no-repeat scroll, linear-gradient(270deg, var(--x-hair), transparent) 100% 0 / 14px 100% no-repeat scroll;
  }
  .xd-frame .x-nav ul { width: max-content; margin-inline: -10px; }
}

.xd-kicker, .xd-kind { color: var(--x-muted); font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xd-lead { max-width: 68ch; }
.xd-sub { font-size: 1.0625rem; font-weight: 600; }
.xd-count { color: var(--x-muted); font: 400 1rem/1 var(--x-text); font-variant-numeric: tabular-nums; }
.xd-top { display: grid; gap: 4px; justify-items: start; }
.xd-over { --x-gap: 20px; }
.xd-cols { display: grid; gap: 20px; align-items: start; }
.xd-cols > * { min-width: 0; }
@media (min-width: 60em) { .xd-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; } .xd-narrow { display: none; } }

/* A panel: one titled part of a screen. */
.xd-box { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xd-box > * { min-width: 0; }
:where(#main) .xd-box > :is(h2, h3), :where(#main) .xd-section > h2 { font-size: 1.1875rem; }
.xd-h { font: 700 .9375rem/var(--x-lh-label) var(--x-text); }
#main .xd-h { font-family: var(--x-text); font-weight: 700; }

/* Summary cards: the figure first, its name under it; the whole card opens the list it counts. */
.xd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 12px; }
.xd-tile .x-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.xd-tile .x-card-title { font-size: .9375rem; font-weight: 600; }
.xd-tile-n { order: -1; font: var(--x-display-weight, 600) 2.25rem/1.1 "x-figures", var(--x-display, var(--x-text)); font-variant-numeric: tabular-nums; }
.xd-stale { align-self: start; white-space: normal; }

/* A record in a mixed list: kind and reference, the name that opens it, one line about it, its status. */
.xd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--x-hair); }
.xd-row:first-child { border-top: 0; padding-top: 2px; }
.xd-row-main { display: grid; gap: 2px; min-width: 0; }
.xd-row-t { font-weight: 600; }
.xd-row-side { display: grid; flex: none; justify-items: end; gap: 6px; }
.xd-mine { margin-inline-start: 8px; }
.xd-row-side .xd-mine { margin: 0; }
/* On a phone a status sits under its record, not beside it: a long status would leave the name no room. */
@media (max-width: 29.99em) { .xd-row { flex-direction: column; } .xd-row-side { display: flex; flex-wrap: wrap; } }
.xd-join { display: grid; gap: 4px; justify-items: start; }
.xd-join > .xd-rows { justify-self: stretch; }
.xd-join-l { font-weight: 600; }
.xd-join .xd-row:first-child { padding-top: 8px; }

.xd-events li, .xd-hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--x-hair); }
.xd-events li:first-child, .xd-hist li:first-child { border-top: 0; }
.xd-event-at { flex: none; min-width: 3.4rem; color: var(--x-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* The chart. Bar heights are written as lengths, so the plot needs no measuring and no script to appear.
   A label and a figure never wrap: each keeps one line of fixed height, so every bar stands on the same line.
   Where there are more bars than the plot can name, only every second, third or further label is printed
   (the classes say which, for three plot widths), and the figures on the bars are left to the table. */
.xd-plot { container-type: inline-size; }
.xd-bars { display: grid; grid-template-columns: repeat(var(--xd-n, 12), minmax(0, 1fr)); align-items: end; gap: var(--xd-gap, 4px); min-height: 8.5rem; padding-top: 4px; }
.xd-bar { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.xd-bar-n, .xd-bar-l { display: flex; justify-content: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xd-bar-n { height: 1.3em; font-size: .8125rem; font-weight: 700; line-height: 1.3; }
.xd-bar-fill { border-radius: 3px 3px 0 0; background: var(--x-series-1); }
.xd-bar-fill--none { border-radius: 0; background: var(--x-line); }
.xd-bar-l { height: 1.5rem; padding-top: 4px; color: var(--x-muted); font-size: .75rem; line-height: 1.3; }
.xd-bar--n .xd-bar-l, .xd-bars--fn .xd-bar-n { visibility: hidden; }
@container (min-width: 26em) {
  .xd-bar--n .xd-bar-l, .xd-bars--fn .xd-bar-n { visibility: visible; }
  .xd-bar--m .xd-bar-l, .xd-bars--fm .xd-bar-n { visibility: hidden; }
}
@container (min-width: 40em) {
  .xd-bar--m .xd-bar-l, .xd-bars--fm .xd-bar-n { visibility: visible; }
  .xd-bar--w .xd-bar-l, .xd-bars--fw .xd-bar-n { visibility: hidden; }
}
.xd-alt summary, .xd-test summary, .xd-fold summary { display: flex; align-items: center; min-height: 44px; color: var(--x-accent-ink); font-weight: 600; cursor: pointer; }
.xd-alt summary::before, .xd-test summary::before, .xd-fold summary::before { content: "+"; width: 1.1em; font-weight: 400; }
.xd-alt[open] summary::before, .xd-test[open] summary::before, .xd-fold[open] summary::before { content: "–"; }
.xd-alt summary::-webkit-details-marker, .xd-test summary::-webkit-details-marker, .xd-fold summary::-webkit-details-marker { display: none; }
.xd-alt .x-table-wrap { --x-under: var(--x-surface); }
.xd-test { display: grid; gap: 4px; }

/* Parts of a whole: a line, its figure in words, a bar for its share. */
.xd-part-list { display: grid; gap: 12px; }
.xd-part { display: grid; gap: 4px; justify-items: start; }
.xd-part-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; width: 100%; }
.xd-part-l { font-weight: 600; }
.xd-part-v { color: var(--x-muted); font-size: .9375rem; }
.xd-meter { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--x-surface-2); }
.xd-meter > span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--x-series-1); }

.xd-feed-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--x-hair); }
.xd-feed-name { font-weight: 600; }
.xd-feed-n { flex-basis: 100%; }

/* Lists. */
.xd-filters { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xd-filters > *, .xd-status { min-width: 0; }
.xd-filters-more { display: grid; gap: 10px; }
.xd-filters-btn { display: none; justify-self: start; }
.xd-result { display: grid; gap: 2px; }
/* The period a list is narrowed to: named beside the count only where the period chips are folded away. */
.xd-period-now { display: none; }
.xd-list .x-table-wrap, .xd-record .x-table-wrap { --x-under: var(--x-bg); }
.xd-section { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--x-hair); }
/* On a phone: the status chips keep one row that scrolls sideways, the other filters wait behind one button, and each
   record is one compact row (reference, name, a line of facts, status) so that several are in view at once.
   A row's column names are still there for a screen reader; they are only not drawn, and a cell with nothing to say
   (a dash on a wide screen) is left out. The chip row's scroll padding is what brings a chip that takes focus at
   its very edge fully into view. */
@media (max-width: 37.49em) {
  .xd-list .xd-lead { font-size: .9375rem; }
  .xd-filters { padding: 12px 14px; }
  .xd-filters-btn { display: inline-flex; }
  .xd-filters-more:not([data-open]) { display: none; }
  .xd-period-now { display: block; }
  .xd-status .x-chips {
    --x-under: var(--x-surface); position: relative; flex-wrap: nowrap; overflow-x: auto; margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 24px; scrollbar-width: none;
    background: linear-gradient(90deg, var(--x-under) 40%, transparent) 0 0 / 24px 100% no-repeat local, linear-gradient(270deg, var(--x-under) 40%, transparent) 100% 0 / 24px 100% no-repeat local, linear-gradient(90deg, var(--x-hair), transparent) 0 0 / 12px 100% no-repeat scroll, linear-gradient(270deg, var(--x-hair), transparent) 100% 0 / 12px 100% no-repeat scroll;
  }
  .xd-status .x-chip { flex: none; }
  .xd-records tr { margin: 0; padding: 10px 0 12px; border: 0; border-top: 1px solid var(--x-hair); border-radius: 0; background: none; }
  .xd-records tbody th { padding: 0; font-size: .875rem; }
  .xd-records td { display: inline; padding: 0; color: var(--x-muted); font-size: .9375rem; }
  .xd-records td::before { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .xd-records .x-td-v { display: inline; }
  .xd-records td:nth-child(2), .xd-records td:last-child { display: block; color: var(--x-ink); }
  .xd-records td:nth-child(2) { font-size: 1rem; font-weight: 600; }
  .xd-records td:last-child { padding-top: 6px; }
  .xd-records td:last-child .x-td-v { display: flex; flex-wrap: wrap; gap: 6px; }
  .xd-records td:nth-child(n + 4):not(:last-child) .x-td-v::before { content: " · "; white-space: pre; }
  .xd-records td:has(.xd-blank) { display: none; }
  .xd-records .x-pill { white-space: normal; }
}

/* One record. */
.xd-panel { --x-gap: 16px; }
.xd-acts { display: grid; gap: 10px; }
.xd-ask { padding: 12px 14px; border: 1px solid var(--x-danger); border-radius: var(--x-radius, 8px); }
.xd-ask-q { font-weight: 600; }
.xd-pick { display: grid; gap: 10px; }
.xd-pick .x-field { max-width: 22rem; }
.xd-lines, .xd-hist, .xd-joins { display: grid; gap: 6px; }
.xd-line { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--x-hair); }
.xd-line-q { flex: none; min-width: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.xd-line-n { font-weight: 600; }
.xd-line-note { color: var(--x-warn); font-size: .9375rem; font-weight: 600; }
.xd-seen { display: grid; justify-items: start; gap: 2px; padding-top: 12px; border-top: 1px solid var(--x-hair); }
.xd-record { max-width: 46rem; }
/* The top of a drawer: what the record is, and the same screen in the other language (the bar is behind the drawer). */
.xd-drawer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.xd-drawer-top > .xd-sub { min-width: 0; }
.xd-lang { flex: none; margin-inline-start: auto; font-size: .9375rem; }
/* The drawer: a sheet from the bottom edge on a phone (the kit's), a panel on the right where there is room for the list beside it. */
@media (min-width: 56.25em) {
  .xd-drawer { top: var(--ex-top, 0px); width: min(32rem, 46vw); height: calc(100dvh - var(--ex-top, 0px)); max-height: none; margin: 0 0 0 auto; border-radius: 0; }
}

/* Switches and boards. */
.xd-switch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 16px 24px; }
.xd-switch-g { display: grid; align-content: start; gap: 2px; }
.xd-switch-g .x-field { gap: 0; }
.xd-switch-g .x-hint { padding-inline-start: 32px; margin-top: -4px; padding-bottom: 6px; }
.xd-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 14px; }
.xd-place-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }

@media print { .xd-bar-fill, .xd-meter > span { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
@media (forced-colors: active) { .xd-bar-fill, .xd-meter > span { background: CanvasText; } .xd-meter { border: 1px solid CanvasText; } }