/* Business Management Dashboard, for an academy (xda-): the day by coach, a session's list of who is coming,
   and the panel that gives a lesson to a coach or moves it. Drawn in the business's tokens, like the engine's
   own pieces. Layout only; no figure lives here. */

.xda-day { gap: 12px; }
.xda-day-top { display: grid; gap: 2px; }

/* The day. On a phone and a tablet it is a list for each coach, one under another, each session a full-width
   block that says its own times. Nothing here depends on a measurement, so it is there on the first paint. */
.xda-grid { display: grid; gap: 16px; }
.xda-axis, .xda-out { display: none; }
.xda-col { display: grid; align-content: start; gap: 6px; min-width: 0; }
.xda-col-top { display: grid; }
:where(#main) .xda-col-top h3 { font-size: 1rem; }
.xda-evs { display: grid; gap: 6px; }
.xda-ev { display: grid; min-width: 0; }
.xda-ev-a {
  display: grid; align-content: start; gap: 1px; min-height: 44px; margin: 0; padding: 6px 10px; border-inline-start: 4px solid var(--x-series-1); border-radius: 6px;
  background: var(--x-surface-2); color: var(--x-ink); font-size: .875rem; line-height: var(--x-lh-label); text-decoration: none;
}
.xda-ev--lesson .xda-ev-a { border-color: var(--x-series-3); }
.xda-ev--wait .xda-ev-a { border-color: var(--x-warn); background: var(--x-warn-soft); }
/* A session called off for the weather keeps its place on the day; its edge is broken, and its line says why. */
.xda-ev--off .xda-ev-a { border-inline-start-style: dashed; border-color: var(--x-warn); }
/* What a group session says about itself can be a whole phrase ("Called off: weather"): on a narrow screen with
   large text it takes a second line inside its row, and never makes the row wider than the page. */
.xda-state { border-radius: 14px; white-space: normal; }
.xda-ev-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.xda-ev-n { font-weight: 600; }
.xda-ev-m { color: var(--x-muted); }
.xda-ev--wait .xda-ev-m { color: var(--x-ink); }
@media (hover: hover) and (pointer: fine) { .xda-ev-a:hover .xda-ev-n { text-decoration: underline; } }

/* Where there is room, and the browser can share one set of lines between the columns, the same lists become a
   grid: a line for each quarter hour down the page, a column for each coach, each session as tall as it is long.
   A line grows when a session's words need more room, and every column grows with it, so the hours stay level.
   The hatched stretches are the hours a coach is not in. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 56.25em) {
    .xda-grid { grid-template-columns: 3.25rem repeat(var(--cols, 3), minmax(0, 1fr)); grid-template-rows: auto repeat(var(--rows, 48), minmax(1.05rem, auto)); gap: 0 8px; }
    .xda-axis { display: grid; grid-column: 1 / -1; grid-row: 2 / -1; grid-template-rows: subgrid; }
    .xda-axis span { grid-row: var(--r) / span var(--s); padding-top: 2px; border-top: 1px solid var(--x-hair); color: var(--x-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
    .xda-col { grid-column: var(--c); grid-row: 1 / -1; grid-template-rows: subgrid; gap: 0; }
    .xda-col-top { grid-row: 1; padding-bottom: 8px; }
    .xda-out { display: block; grid-column: 1; grid-row: calc(var(--r) + 1) / span var(--s); border-radius: 4px; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--x-hair) 6px 7px); }
    .xda-evs { grid-column: 1; grid-row: 2 / -1; grid-template-rows: subgrid; gap: 0; }
    .xda-ev { grid-column: 1; grid-row: var(--r) / span var(--s); padding-block: 1px; }
    .xda-ev--lane0 { margin-inline-end: 50%; }
    .xda-ev--lane1 { margin-inline-start: 50%; }
    .xda-ev-a { min-height: 0; padding: 3px 8px; font-size: .8125rem; }
    .xda-none { display: none; }
  }
}

/* The days of the schedule: a row of days to choose from, and the links that step past them. */
.xda-days { display: grid; gap: 4px; }

/* A session's drawer, and a booking's own panel under its status buttons. */
.xda-roster { --x-gap: 6px; }
.xda-panel { --x-gap: 16px; }
.xda-box { --x-gap: 8px; padding-top: 14px; border-top: 1px solid var(--x-hair); }
.xda-box .x-radios .x-hint { font-size: inherit; }
.xda-move { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 10px; }
.xda-alt-g { --x-gap: 6px; }

@media print { .xda-ev-a { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
@media (forced-colors: active) { .xda-out { border: 1px dashed GrayText; background: none; } }