/* History — the Hub's read-only fourth moment, and a chase list first.
   The list is module furniture; the workload matrix and the outcome table
   are the shared .hub-table. The chips are the shared View Switcher and the
   workload toggle is the shared disclosure, so neither is styled here.
   Both sections share one gutter, so the page reads as one column. */

.hs-container {
    display: block;
}

.hs-wrap {
    max-width: 1360px;
    padding: 4px 24px 40px;
}

.hs-wrap .table-wrap {
    margin-left: 0;
    margin-right: 0;
}

.hs-section {
    margin-bottom: 26px;
}

/* Every header states what the section is and the window it covers; the
   figure that is easy to misread carries its caveat beside it. */
.hs-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--ink-line-strong);
}

.hs-head h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.002em;
}

.hs-sub {
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

/* Values are separated by space, never by a glyph, so the run reads as the
   two or three facts it is. */
.hs-right {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.72rem;
    white-space: nowrap;
}

.hs-right b {
    color: var(--accent);
    font-weight: 750;
}

.hs-caveat {
    color: var(--text-tertiary);
}

.hs-none {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

/* ── 1. The chase list ──
   Rows grouped by player: the name prints once, the group with the longest
   wait is first, and the header carries the group's true count whether or
   not the rows below it are capped. */

.hs-cl-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
}

.hs-cl {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    /* clip, not hidden: hidden would make this the sticky headers'
       scrollport and they would never stick to anything. */
    overflow: clip;
}

/* Sticky below the app header, so a row is never orphaned from its
   player on a long list. */
.hs-cl-grp {
    position: sticky;
    top: var(--app-header-height);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: var(--surface-chrome);
    border-bottom: 1px solid var(--ink-line);
    box-shadow: 0 1px 0 var(--ink-line);
}

/* The name is the door to the player's timeline; .db-player-link carries
   the button-as-text treatment. */
.hs-cl-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hs-cl-pos {
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hs-cl-grp-n {
    display: flex;
    flex: 0 1 auto;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.hs-cl-grp-n span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hs-cl-grp-n .is-none {
    color: var(--accent);
    font-weight: 650;
}

.hs-cl-grp-n .is-old {
    color: var(--text-primary);
    font-weight: 700;
}

.hs-cl-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 128px minmax(0, 236px) 70px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--ink-line);
}

.hs-cl-row:hover {
    background: var(--ink-wash);
}

/* Every text cell clips, so no width can produce overlapping text. */
.hs-cl-day,
.hs-cl-task,
.hs-cl-area {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hs-cl-day {
    color: var(--text-secondary);
    font-size: 0.77rem;
}

/* Only a day with two sessions needs to say which one. */
.hs-cl-slot {
    margin-left: 6px;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.8px;
}

/* An Individual Testing row names its test beside the type: space and
   weight separate the two, never a dot. */
.hs-cl-test {
    margin-left: 6px;
    color: var(--text-secondary);
    font-weight: 650;
}

.hs-cl-task {
    color: var(--text-primary);
    font-size: 0.81rem;
    font-weight: 650;
}

.hs-cl-area {
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hs-cl-who {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.77rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The one accent in the list: nobody is named, so there is nobody to call. */
.hs-cl-who.is-none {
    color: var(--accent);
    font-weight: 650;
}

.hs-cl-age {
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.77rem;
}

.hs-cl-age.is-old {
    color: var(--text-primary);
    font-weight: 700;
}

.hs-cl-more {
    width: 100%;
    padding: 8px 16px;
    border: 0;
    border-top: 1px solid var(--ink-line);
    background: transparent;
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: 0.72rem;
    text-align: left;
    cursor: pointer;
}

.hs-cl-more:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.hs-cl-more:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -2px;
}

/* ── 2. The week ──
   One line while the week has no outcomes; the table returns only when
   something was actually cancelled or left undone. */

.hs-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 12px 16px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 0.79rem;
}

.hs-line b {
    color: var(--text-primary);
    font-weight: 700;
}

.hs-line-open {
    color: var(--accent);
    font-weight: 700;
}

.hs-line-areas {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--text-tertiary);
}

.hs-line-note {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

/* ── 3. The workload disclosure ──
   The shared .nv-disclosure carries the control; only the generated
   summary and the panel below it belong to the module. */

.hs-disc {
    margin-top: 10px;
}

.hs-disc-n {
    color: var(--text-tertiary);
    font-weight: 500;
}

.hs-disc-body {
    margin-top: 10px;
}

.hs-disc-rule {
    margin: 0 0 8px;
}

/* ── The tables ── */

/* Layout only — the tables keep their shared class. */
.hs-table {
    width: 100%;
}

.hub-table.hs-table td,
.hub-table.hs-table th {
    font-size: 0.75rem;
}

.hs-zero {
    color: var(--text-tertiary);
}

.hs-open {
    color: var(--accent);
    font-weight: 700;
}

.hs-bar-col {
    width: 200px;
}

.hs-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 150px;
}

.hs-track {
    position: relative;
    flex: 1;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--ink-line-strong);
    overflow: hidden;
}

.hs-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--text-secondary);
}

.hs-ratio {
    color: var(--text-secondary);
    font-size: 0.71rem;
    white-space: nowrap;
}

.hs-cell b {
    color: var(--text-primary);
    font-weight: 700;
}

.hs-cell i {
    margin-left: 4px;
    color: var(--text-tertiary);
    font-size: 0.68rem;
    font-style: normal;
}

.hs-inline {
    color: var(--text-tertiary);
    font-size: 0.71rem;
}

.hs-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}