/* ──────────────────────────────────────────────────────────────────────────────────────────────
   TractionSeats — Chart Builder + People & Roster
   Visual source of truth: this app's own Bootstrap 5 theme and wwwroot/app.css (borders #dee2e6,
   primary var(--bs-primary), focus ring #258cfb, dark top bar). No new brand colours or fonts.
   Readability: 18px base (fleet house rule, PMApplianceHub app.css), scoped to these pages only.
   Accessibility: WCAG 2.2 AA target (Portal Design Standard) — visible focus, labels above fields,
   state never signalled by colour alone, phone tier stacks instead of scrolling tables sideways.
   ────────────────────────────────────────────────────────────────────────────────────────────── */

.tsb, .tsr {
    font-size: 18px;
    line-height: 1.55;
    color: #212529;
}

.tsb .btn, .tsr .btn,
.tsb .form-control, .tsr .form-control,
.tsb .form-select, .tsr .form-select,
.tsb .form-check-label, .tsr .form-check-label,
.tsb .alert, .tsr .alert {
    font-size: 1rem;
}
.tsb .btn-sm, .tsr .btn-sm { font-size: 0.95rem; }
.tsb .form-label, .tsr .form-label { font-weight: 600; margin-bottom: 0.3rem; }
.tsb .form-text, .tsr .form-text { font-size: 0.95rem; color: #5c636a; }

/* One focus treatment for every control on these pages. */
.tsb :focus-visible, .tsr :focus-visible {
    outline: 3px solid #258cfb;
    outline-offset: 2px;
    box-shadow: none;
}

/* Bootstrap's global rule hides the outline via box-shadow; keep the outline above instead. */
.tsb .btn:focus-visible, .tsr .btn:focus-visible { box-shadow: 0 0 0 0.1rem #fff; }

.ts-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Page frame ─────────────────────────────────────────────────────────────────────────────── */

.tsb { display: flex; flex-direction: column; min-height: calc(100vh - 56px); background: #f8f9fa; }

.tsb-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.25rem; background: #fff; border-bottom: 1px solid #dee2e6;
}
.tsb-toolbar h1 { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.25; }
.tsb-toolbar .tsb-sub { color: #5c636a; font-size: 0.95rem; margin: 0.15rem 0 0; }
.tsb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tsb-status {
    display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 700;
    padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid; vertical-align: middle; margin-left: 0.5rem;
    text-transform: uppercase; letter-spacing: 0.02em;
}
.tsb-status.is-published { color: #0f5132; background: #d1e7dd; border-color: #a3cfbb; }
.tsb-status.is-draft { color: #664d03; background: #fff3cd; border-color: #ffe69c; }

.tsb-messages { padding: 0.75rem 1.25rem 0; }
.tsb-messages .alert { margin-bottom: 0.5rem; }

.tsb-body { display: flex; flex: 1; min-height: 0; min-width: 0; }

/* Only the chart canvas scrolls sideways — never the page. */
.tsb-canvas {
    flex: 1; min-width: 0; overflow: auto; padding: 1.5rem 1.25rem 3rem;
    background-color: #f8f9fa;
    /* plain ground: the old dotted grid made the empty space around a small chart look enormous */
}
.tsb-hint { color: #5c636a; font-size: 0.95rem; margin: 0 0 1rem; }
.tsb-hint kbd { font-size: 0.85rem; background: #e9ecef; color: #212529; border: 1px solid #ced4da; }

/* ── Tree ───────────────────────────────────────────────────────────────────────────────────── */

.tsb-tree, .tsb-children { list-style: none; margin: 0; padding: 0; }
.tsb-tree { display: flex; justify-content: center; gap: 24px; width: max-content; min-width: 100%; }

.tsb-node { display: flex; flex-direction: column; align-items: center; position: relative; }

.tsb-children {
    display: flex; justify-content: center; gap: 24px; padding-top: 32px; position: relative;
}
/* parent → bar */
.tsb-children::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 16px; background: #adb5bd;
}
/* bar → child */
.tsb-children > .tsb-node::before {
    content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px; background: #adb5bd;
}
/* horizontal bar across siblings */
.tsb-children > .tsb-node:not(:only-child)::after {
    content: ""; position: absolute; top: -16px; height: 2px; background: #adb5bd;
}
.tsb-children > .tsb-node:first-child:not(:only-child)::after { left: 50%; right: -12px; }
.tsb-children > .tsb-node:last-child:not(:only-child)::after { left: -12px; right: 50%; }
.tsb-children > .tsb-node:not(:first-child):not(:last-child)::after { left: -12px; right: -12px; }

.tsb-card {
    width: 300px; background: #fff; border: 1px solid #ced4da; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); cursor: pointer; text-align: left;
    display: flex; flex-direction: column;
}
.tsb-card:hover { border-color: var(--bs-primary); }
.tsb-card.is-selected { border: 2px solid var(--bs-primary); box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15); }
.tsb-card.is-vacant { border-style: dashed; }

.tsb-card-main { padding: 0.8rem 0.95rem 0.6rem; }

.tsb-title-btn {
    display: block; width: 100%; background: none; border: 0; padding: 0; text-align: left;
    font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #212529;
    overflow-wrap: anywhere;
}
.tsb-title-btn:hover { color: var(--bs-primary); text-decoration: underline; }

.tsb-occupant { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.4rem; font-size: 0.95rem; }
.tsb-avatar {
    flex: none; width: 30px; height: 30px; border-radius: 50%; background: #1b6ec2; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
}
.tsb-avatar.is-vacant { background: #e9ecef; color: #5c636a; }
.tsb-occupant .is-vacant-text { color: #5c636a; font-style: italic; }
.tsb-flag { color: #842029; font-weight: 600; font-size: 0.9rem; }

.tsb-acc {
    margin: 0.55rem 0 0; padding: 0.5rem 0 0 1.1rem; border-top: 1px solid #e9ecef;
    font-size: 0.93rem; color: #343a40; line-height: 1.4;
}
.tsb-acc li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.tsb-acc-empty { margin: 0.55rem 0 0; padding-top: 0.5rem; border-top: 1px solid #e9ecef; color: #5c636a; font-size: 0.93rem; font-style: italic; }

/* The ONE disclosure control, identical on every seat. */
.tsb-card-foot {
    border-top: 1px solid #e9ecef; padding: 0.35rem 0.5rem; display: flex; align-items: center; gap: 0.35rem;
    background: #fcfcfd; border-radius: 0 0 10px 10px;
}
.tsb-disclosure {
    display: inline-flex; align-items: center; gap: 0.35rem; background: #fff; border: 1px solid #ced4da;
    border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.9rem; color: #343a40; min-height: 36px;
}
.tsb-disclosure:hover:not(:disabled) { border-color: var(--bs-primary); color: var(--bs-primary); }
.tsb-disclosure:disabled { color: #6c757d; background: transparent; border-style: dashed; cursor: default; }
.tsb-disclosure .bi { transition: transform 0.15s; }
.tsb-disclosure .bi { transform: rotate(-90deg); }            /* collapsed: points right */
.tsb-disclosure[aria-expanded="true"] .bi { transform: rotate(0deg); } /* open: points down to the reports */
.tsb-foot-spacer { flex: 1; }
.tsb-icon-btn {
    background: none; border: 1px solid transparent; border-radius: 6px; color: #495057;
    min-width: 36px; min-height: 36px; font-size: 0.95rem;
}
.tsb-icon-btn:hover { border-color: #ced4da; color: var(--bs-primary); }

/* ── Side panel (seat detail / templates) ───────────────────────────────────────────────────── */

.tsb-panel {
    width: 440px; flex: none; background: #fff; border-left: 1px solid #dee2e6;
    display: flex; flex-direction: column; max-height: calc(100vh - 56px); position: sticky; top: 56px;
}
.tsb-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    padding: 1rem 1.1rem 0.75rem; border-bottom: 1px solid #e9ecef;
}
.tsb-panel-head h2 { font-size: 1.25rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.tsb-panel-head .tsb-sub { color: #5c636a; font-size: 0.9rem; margin: 0.15rem 0 0; }
.tsb-panel-body { padding: 1rem 1.1rem 1.5rem; overflow-y: auto; }
.tsb-section { margin-bottom: 1.4rem; }
.tsb-section h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; }
.tsb-backdrop { display: none; }

.tsb-acc-row { display: flex; gap: 0.35rem; align-items: flex-start; margin-bottom: 0.4rem; }
.tsb-acc-row .tsb-acc-num { flex: none; width: 1.6rem; padding-top: 0.45rem; color: #5c636a; font-weight: 600; text-align: right; }
.tsb-acc-row textarea { resize: vertical; min-height: 2.6rem; field-sizing: content; }
.tsb-acc-edit { flex: 1 1 auto; min-width: 0; }
.tsb-acc-desc { margin-top: 0.2rem; }
.tsb-lma-flagdesc { margin-top: 0.25rem; color: #664d03; font-size: 0.92em; }
.tsb-lma-flagdesc q { margin-left: 0.3rem; }
.tsb-acc-desc > summary { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; color: #0a58ca; font-size: 0.9em; }
.tsb-acc-desc > p { margin: 0.25rem 0 0.4rem; padding-left: 0.6rem; border-left: 3px solid #dee2e6; color: #343a40; white-space: pre-line; }
.tsb-acc-desc > textarea { margin-top: 0.25rem; }
.tsb-counter { font-size: 0.95rem; color: #5c636a; }
.tsb-counter.is-over { color: #842029; font-weight: 700; }

.tsb-dirty {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px;
    background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; font-size: 0.95rem; margin-bottom: 0.9rem;
}
.tsb-sticky-actions {
    position: sticky; bottom: -1.5rem; background: #fff; padding: 0.75rem 0 1.5rem; margin-bottom: -1.5rem;
    display: flex; flex-wrap: wrap; gap: 0.5rem; border-top: 1px solid #e9ecef;
}

.tsb-note { font-size: 0.95rem; color: #5c636a; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 0.6rem 0.75rem; }

.tsb-template-seat { border: 1px solid #dee2e6; border-radius: 8px; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; }
.tsb-template-seat .tsb-ts-title { font-weight: 700; }
.tsb-template-seat .tsb-ts-meta { color: #5c636a; font-size: 0.9rem; }
.tsb-template-group { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #5c636a; margin: 1rem 0 0.4rem; }

.tsb-empty { max-width: 640px; margin: 3rem auto; text-align: center; }
.tsb-empty .bi { font-size: 3rem; color: #6c757d; }

/* Review modal */
.tsb-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1060; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; overflow-y: auto; }
.tsb-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 680px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.tsb-modal header, .tsb-modal footer { padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.tsb-modal header { border-bottom: 1px solid #e9ecef; }
.tsb-modal footer { border-top: 1px solid #e9ecef; justify-content: flex-end; }
.tsb-modal header h2 { font-size: 1.3rem; margin: 0; font-weight: 700; }
.tsb-modal .tsb-modal-body { padding: 1rem 1.25rem; }
.tsb-modal ul { padding-left: 1.2rem; }

/* Desktop: the panel sits beside the chart (nothing dimmed, the selected seat stays visible next to it).
   Tablet/phone: the panel becomes an overlay drawer over the chart. */
@media (max-width: 1199.98px) {
    .tsb-panel {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 1055; max-height: none;
        width: min(460px, 100vw); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
    }
    .tsb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1050; border: 0; }
}

@media (max-width: 575.98px) {
    .tsb-toolbar { padding: 0.75rem 1rem; }
    .tsb-toolbar h1 { font-size: 1.3rem; }
    .tsb-actions { width: 100%; }
    .tsb-actions .btn { flex: 1 1 auto; }
    .tsb-canvas { padding: 1rem 1rem 2.5rem; }
    .tsb-card { width: 272px; }
    .tsb-panel { width: 100vw; }
}

/* ── People & Roster ────────────────────────────────────────────────────────────────────────── */

.tsr { background: #f8f9fa; min-height: calc(100vh - 56px); padding: 1.25rem; }
.tsr-inner { max-width: 1320px; margin: 0 auto; }
.tsr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.tsr-head h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.tsr-head p { color: #5c636a; margin: 0.2rem 0 0; font-size: 0.95rem; }

.tsr-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; background: #fff; border: 1px solid #dee2e6; border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 1rem; }
.tsr-filters .tsr-search { flex: 1 1 280px; }
.tsr-filters .tsr-status { flex: 0 1 220px; }
.tsr-count { color: #5c636a; font-size: 0.95rem; margin: 0 0 0.5rem; }

.tsr-list { background: #fff; border: 1px solid #dee2e6; border-radius: 10px; }
.tsr-row-head, .tsr-row {
    display: grid; grid-template-columns: minmax(240px, 1.5fr) 100px minmax(220px, 1.6fr) minmax(170px, 1fr) minmax(170px, 1fr);
    gap: 0.75rem; align-items: start; padding: 0.8rem 1rem;
}
.tsr-row-head { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #5c636a; border-bottom: 1px solid #dee2e6; }
.tsr-row { border-bottom: 1px solid #e9ecef; }
.tsr-row:last-child { border-bottom: 0; }
.tsr-cell-label { display: none; }

.tsr-name { font-weight: 700; background: none; border: 0; padding: 0; text-align: left; color: #212529; overflow-wrap: anywhere; }
.tsr-name:hover { color: var(--bs-primary); text-decoration: underline; }
.tsr-contact { color: #5c636a; font-size: 0.93rem; overflow-wrap: anywhere; }
.tsr-state { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.93rem; }
.tsr-muted { color: #5c636a; font-size: 0.93rem; }
.tsr-chip {
    display: inline-block; max-width: 100%; padding: 0.15rem 0.55rem; margin: 0 0.3rem 0.3rem 0; border-radius: 6px;
    background: #e7f1ff; color: #084298; border: 1px solid #b6d4fe; font-size: 0.93rem; overflow-wrap: anywhere;
}
.tsr-more { background: none; border: 1px solid #ced4da; border-radius: 6px; padding: 0.1rem 0.5rem; font-size: 0.9rem; color: #343a40; }
.tsr-more:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.tsr-unknown { color: #664d03; }

.tsr-profile dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.tsr-profile dt { color: #5c636a; font-weight: 600; }
.tsr-profile dd { margin: 0; overflow-wrap: anywhere; }
.tsr-profile ul { padding-left: 1.2rem; margin: 0; }

/* Phone/tablet: each person becomes a stacked card — no sideways-scrolling table. */
@media (max-width: 991.98px) {
    .tsr { padding: 1rem; }
    .tsr-row-head { display: none; }
    .tsr-row { grid-template-columns: 1fr; gap: 0.45rem; padding: 0.9rem 1rem; }
    .tsr-cell-label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #5c636a; }
    .tsr-actions { display: flex; gap: 0.5rem; }
    .tsr-actions .btn { flex: 1; }
}

/* ── App header: keep it on one screen width on phones (no page-wide overflow) ─────────────── */
@media (max-width: 767.98px) {
    /* On a phone the bar wraps to several rows (~200px); pinned, it would cover the page. It scrolls away instead. */
    header.navbar { flex-wrap: wrap; row-gap: 0.4rem; position: static; }
    header.navbar > nav { flex-wrap: wrap; row-gap: 0.25rem; column-gap: 0.75rem !important; width: 100%; }
    header.navbar .ts-hide-sm { display: none !important; }
}

/* Roster profile drawer (always an overlay) */
.tsr-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1050; border: 0; }
.tsr-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1055; width: min(520px, 100vw);
    background: #fff; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column;
    font-size: 18px; line-height: 1.55;
}
.tsr-drawer .tsb-panel-body { flex: 1; }
.tsb-modal.tsr { min-height: 0; padding: 0; background: #fff; }

/* Mentor / coach line: supporting context, visually secondary to the occupant (not an occupant). */
.tsb-mentor { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.9rem; color: #495057; }
.tsb-mentor .bi { color: #5c636a; }
.tsb-card .tsb-flag { margin-top: 0.3rem; }
.tsb-context { display: flex; gap: 0.45rem; align-items: baseline; font-size: 0.95rem; }
.tsb-context .bi { color: #5c636a; }
.tsr-chip.is-shared { background: #fff3cd; color: #664d03; border-color: #ffe69c; }


/* ══ 2026-09-29 redesign (screenshot review) ═══════════════════════════════════════════════════════
   Compact cards, tighter branches, view controls, a focused branch view on narrow screens, a consistent
   seat panel, and a summary-first profile. Same palette and type scale as above. */

/* Chart view controls */
.tsb-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin: 0 0 1rem; }
.tsb-hint { font-size: 0.9rem; margin-bottom: 1rem; }
.tsb-tree-wrap { width: 100%; }

/* Wide chart vs focused branch view */
.tsb-narrow-only { display: none; }
@media (max-width: 767.98px) {
    .tsb-wide-only { display: none !important; }
    .tsb-narrow-only { display: block; }
}

/* Focused branch view (narrow screens) */
.tsf-path ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; padding: 0; margin: 0 0 0.75rem; font-size: 0.95rem; }
.tsf-path li + li::before { content: "›"; color: #6c757d; margin-right: 0.4rem; }
.tsf-crumb { background: none; border: 0; padding: 0.2rem 0; color: #0a58ca; text-decoration: underline; min-height: 32px; }
.tsf-path [aria-current] { font-weight: 700; }
.tsf-h { font-size: 1rem; font-weight: 700; margin: 1rem 0 0.5rem; color: #495057; }
.tsf-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.tsf-card { display: flex; align-items: stretch; background: #fff; border: 1px solid #ced4da; border-radius: 10px; overflow: hidden; }
.tsf-card.is-focus { border: 2px solid #1b6ec2; }
.tsf-card.is-selected { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2); }
.tsf-card.is-vacant { border-style: dashed; }
.tsf-open { flex: 1; min-width: 0; background: none; border: 0; text-align: left; padding: 0.7rem 0.85rem; display: grid; gap: 0.15rem; min-height: 64px; }
.tsf-title { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.tsf-who { font-size: 0.95rem; overflow-wrap: anywhere; }
.tsf-meta { font-size: 0.85rem; color: #5c636a; }
.tsf-drill { flex: none; background: #f1f5f9; border: 0; border-left: 1px solid #dee2e6; padding: 0 0.8rem; font-size: 0.9rem; color: #343a40; min-width: 96px; }
.tsf-drill:hover { color: #0a58ca; background: #e7f1ff; }

/* Seat panel: plain statement of mode, consistent sections, seat links */
.tsb-eyebrow { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #5c636a; margin: 0; }
.tsb-mode { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.6rem 1.1rem; font-size: 0.93rem; border-bottom: 1px solid #e9ecef; }
.tsb-mode.is-published { background: #eef6f1; color: #0f5132; }
.tsb-mode.is-draft { background: #fff8e1; color: #664d03; }
.tsb-count { font-weight: 400; color: #5c636a; font-size: 0.9em; }
.tsb-person { font-size: 1.05rem; font-weight: 600; }
.tsb-seatlink { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; width: 100%; text-align: left; background: none;
    border: 1px solid #dee2e6; border-radius: 8px; padding: 0.4rem 0.6rem; margin-bottom: 0.35rem; }
.tsb-seatlink:hover { border-color: var(--bs-primary); }
.tsb-seatlink-title { font-weight: 600; color: #1d2329; }
.tsb-seatlink-who { font-size: 0.9rem; color: #5c636a; }

/* People & Roster: the name is the entry point */
.tsr-name { font-size: 1.05rem; color: #0a58ca; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tsr-name:hover { text-decoration-thickness: 2px; }

/* Profile: summary first, secondary sections collapsed */
.tsr-summary { border-bottom: 1px solid #e9ecef; padding-bottom: 1rem; margin-bottom: 1.1rem; }
.tsr-contactlist { list-style: none; padding: 0; margin: 0 0 0.6rem; display: grid; gap: 0.3rem; }
.tsr-contactlist li { display: flex; gap: 0.5rem; align-items: baseline; overflow-wrap: anywhere; }
.tsr-contactlist .bi { color: #5c636a; }
.tsr-desc { font-size: 0.93rem; margin-bottom: 0.6rem; }
.tsr-seatlist { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.5rem; }
.tsr-seatlist > li { border: 1px solid #dee2e6; border-radius: 8px; padding: 0.55rem 0.75rem; }
.tsr-seat-title { font-weight: 700; }
.tsr-seat-meta { font-size: 0.93rem; }
.tsr-plan { border: 1px solid #b6d4fe; background: #f5f9ff; border-radius: 8px; padding: 0.75rem; margin-top: 0.5rem; }
.tsr-more-section { border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 0.6rem; }
.tsr-more-section > summary { padding: 0.6rem 0.8rem; cursor: pointer; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; min-height: 44px; }
.tsr-more-section > summary::marker { color: #5c636a; }
.tsr-sum-title { font-weight: 700; }
.tsr-sum-note { font-size: 0.9rem; color: #5c636a; }
.tsr-more-body { padding: 0 0.8rem 0.8rem; }
.tsr-h4 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; }

/* Links inside coloured banners take the banner's own dark text colour (AA contrast on the tinted ground). */
.tsb-messages .alert .btn-link { color: inherit; font-weight: 600; text-decoration: underline; }


/* ══ 2026-09-29 second pass: readable at normal zoom, one branch at a time, no scaling ═════════════════
   The leadership row (Visionary → Integrator → leaders) is the home view. A leader's chevron shows that
   branch on its own at full size, with a path back and the other branches one click away. A branch wider
   than the screen scrolls sideways inside its frame; text is never scaled down. */

.tsb-canvas { overflow: visible; }

/* Seat cards: same size everywhere, text at reading size */
.tsb-card { width: 232px; border-radius: 9px; }
.tsb-card-main { padding: 0.7rem 0.85rem 0.55rem; }
.tsb-title-btn { font-size: 1.06rem; line-height: 1.3; }
.tsb-occupant { margin-top: 0.35rem; font-size: 1rem; gap: 0.45rem; }
.tsb-occupant-name { overflow-wrap: anywhere; }
.tsb-avatar { width: 28px; height: 28px; font-size: 0.75rem; }
.tsb-acc-count { margin-top: 0.35rem; font-size: 0.9rem; color: #5c636a; }
.tsb-acc { font-size: 0.92rem; }
.tsb-card.is-shared { border-color: #d39e00; }
.tsb-card .tsb-flag { font-size: 0.9rem; margin-top: 0.3rem; }
.tsb-card-foot { padding: 0.3rem 0.5rem; }
.tsb-disclosure { min-height: 34px; font-size: 0.9rem; padding: 0.15rem 0.65rem; }

/* Connectors: reports hang directly under their manager */
.tsb-tree, .tsb-children { gap: 16px; }
.tsb-children { padding-top: 30px; }
.tsb-children::before { height: 15px; }
.tsb-children > .tsb-node::before { top: -15px; height: 15px; }
.tsb-children > .tsb-node:not(:only-child)::after { top: -15px; }
.tsb-children > .tsb-node:first-child:not(:only-child)::after { right: -8px; }
.tsb-children > .tsb-node:last-child:not(:only-child)::after { left: -8px; }
.tsb-children > .tsb-node:not(:first-child):not(:last-child)::after { left: -8px; right: -8px; }

/* Branch view header: path back + the other branches */
.tsb-branchbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem;
    background: #fff; border: 1px solid #dee2e6; border-radius: 10px; padding: 0.55rem 0.9rem; margin: 0 0 0.9rem;
}
.tsb-path ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; padding: 0; margin: 0; }
.tsb-path li + li::before { content: "›"; color: #6c757d; margin-right: 0.45rem; }
.tsb-path [aria-current] { font-weight: 700; }
.tsb-crumb { background: none; border: 0; padding: 0.25rem 0; color: #0a58ca; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }
.tsb-crumb:hover { text-decoration-thickness: 2px; }
.tsb-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tsb-switch-label { font-size: 0.9rem; color: #5c636a; margin-right: 0.2rem; }

/* The chart frame: only this scrolls sideways */
.tsb-scrollframe { position: relative; }
.tsb-tree-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 1rem; scrollbar-gutter: stable; }
.tsb-scrollctl { display: none; align-items: center; gap: 0.45rem; }
.tsb-scrollframe[data-overflow] .tsb-scrollctl { display: inline-flex; }
.tsb-scrollnote { font-size: 0.9rem; color: #5c636a; }
.tsb-track { position: relative; display: inline-block; width: 140px; height: 10px; border-radius: 5px; background: #dee2e6; cursor: pointer; }
.tsb-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 5px; background: #495057; }
.tsb-scrollbtn:disabled { border-color: #ced4da; }
/* soft edge where more of the branch continues */
.tsb-scrollframe[data-overflow]:not([data-at-end])::after,
.tsb-scrollframe[data-overflow]:not([data-at-start])::before {
    content: ""; position: absolute; top: 3.2rem; bottom: 1rem; width: 36px; pointer-events: none; z-index: 2;
}
.tsb-scrollframe[data-overflow]:not([data-at-end])::after { right: 0; background: linear-gradient(to left, #f8f9fa, rgba(248, 249, 250, 0)); }
.tsb-scrollframe[data-overflow]:not([data-at-start])::before { left: 0; background: linear-gradient(to right, #f8f9fa, rgba(248, 249, 250, 0)); }

/* The seat whose details are open: a tag that points at the panel */
.tsb-card { position: relative; }
.tsb-selmark {
    position: absolute; top: -13px; right: 10px; z-index: 1; background: #0b5ed7; color: #fff; font-size: 0.78rem; font-weight: 600;
    padding: 0.1rem 0.5rem; border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.tsb-card.is-selected { box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.22); }

@media (prefers-reduced-motion: reduce) { .tsb-disclosure .bi { transition: none; } }
.tsb-blank { color: #5c636a; font-style: italic; }

/* Profile: current seats lead; contact details follow as their own block */
.tsr-seats-first { border-bottom: 1px solid #e9ecef; padding-bottom: 1rem; margin-bottom: 1rem; }
.tsr-contact-block h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; }

/* Branch view: each manager sits over the start of its own row of reports (classic left-aligned org chart), and the
   whole branch is centred while it fits. Opening a seat deep in a wide branch then keeps the manager, the opened seat
   and its reports together at the left, instead of centring the manager over a row that runs off screen. */
.tsb-tree.is-branch { justify-content: flex-start; min-width: 0; margin: 0 auto; }
.tsb-tree.is-branch .tsb-node { align-items: flex-start; }
.tsb-tree.is-branch .tsb-children { justify-content: flex-start; }
.tsb-tree.is-branch .tsb-children::before { left: 115px; }
.tsb-tree.is-branch .tsb-children > .tsb-node::before { left: 115px; }
.tsb-tree.is-branch .tsb-children > .tsb-node:first-child:not(:only-child)::after { left: 115px; right: -8px; }
.tsb-tree.is-branch .tsb-children > .tsb-node:last-child:not(:only-child)::after { left: -8px; right: auto; width: 125px; }

/* The app bar is sticky: keep anything scrolled into view (focus, anchors, scrollIntoView) clear of it. */
html { scroll-padding-top: 72px; }
@media (max-width: 767.98px) { html { scroll-padding-top: 16px; } }

/* ══ Company Profile intake (/company-profile) ═════════════════════════════════════════════════════════
   Same palette, type scale and focus treatment as the builder and roster pages. */
.tsp { background: #f8f9fa; min-height: calc(100vh - 56px); padding: 1.25rem; font-size: 18px; line-height: 1.55; color: #212529; }
.tsp .btn, .tsp .form-control, .tsp .form-check-label, .tsp .alert { font-size: 1rem; }
.tsp .btn-sm { font-size: 0.95rem; }
.tsp :focus-visible { outline: 3px solid #258cfb; outline-offset: 2px; box-shadow: none; }
.tsp-inner { max-width: 1320px; margin: 0 auto; }
.tsp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.tsp-head h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.tsp-sub { color: #5c636a; margin: 0.25rem 0 0; font-size: 0.95rem; max-width: 70ch; }
.tsp-savebox { display: flex; align-items: center; gap: 0.75rem; }
.tsp-saved { font-size: 0.93rem; color: #5c636a; }
.tsp-muted { color: #5c636a; }

/* Steps */
.tsp-steps ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1.1rem; counter-reset: none; }
.tsp-step { display: inline-flex; align-items: center; gap: 0.45rem; background: #fff; border: 1px solid #ced4da; border-radius: 999px;
    padding: 0.3rem 0.8rem 0.3rem 0.35rem; color: #343a40; font-size: 0.95rem; min-height: 40px; }
.tsp-step:hover { border-color: var(--bs-primary); }
.tsp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: #e9ecef; font-weight: 700; font-size: 0.85rem; }
.tsp-step.is-done .tsp-step-n { background: #d1e7dd; color: #0f5132; }
.tsp-step.is-current { border: 2px solid var(--bs-primary); font-weight: 600; color: #0a58ca; }
.tsp-step.is-current .tsp-step-n { background: var(--bs-primary); color: #fff; }

/* Question + side panel */
.tsp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.tsp-form, .tsp-side, .tsp-review > section, .tsp-review > .tsp-notes { background: #fff; border: 1px solid #dee2e6; border-radius: 10px; }
.tsp-form { padding: 1.1rem 1.25rem; }
.tsp-form h2, .tsp-review h2 { font-size: 1.3rem; font-weight: 700; margin: 0; }
.tsp-step-sub { color: #5c636a; margin: 0.2rem 0 1rem; }
.tsp-questions { border: 0; padding: 0; margin: 0; min-width: 0; }
.tsp-q { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.tsp-q legend, .tsp-q > .form-label { font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem; float: none; }
.tsp-hint { font-size: 0.93rem; color: #5c636a; margin: -0.15rem 0 0.4rem; }
.tsp-choices .form-check { margin-bottom: 0.3rem; }
.tsp-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 1rem; }
.tsp-inline { display: flex; gap: 1.5rem; }
/* 24px targets with room between them (WCAG 2.2 target size) */
.tsp .form-check { padding-left: 2.1em; min-height: 30px; margin-bottom: 0.25rem; }
.tsp .form-check .form-check-input { width: 1.35em; height: 1.35em; margin-top: 0.08em; margin-left: -2.1em; }
.tsp-num { max-width: 8rem; }
.tsp-name { max-width: 24rem; }
.tsp-nav { display: flex; gap: 0.6rem; justify-content: flex-end; border-top: 1px solid #e9ecef; padding-top: 0.9rem; }
.tsp-side { padding: 1rem 1.1rem; position: sticky; top: 72px; }
.tsp-side h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.6rem; }
.tsp-sidelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.tsp-sidelist li { border-left: 3px solid #b6d4fe; padding-left: 0.6rem; }
.tsp-side-title { display: block; font-weight: 600; }
.tsp-side-why { display: block; font-size: 0.9rem; color: #5c636a; }

/* Review */
.tsp-review { display: grid; gap: 1rem; }
.tsp-review > section { padding: 1rem 1.25rem; }
.tsp-review h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.6rem; }
.tsp-notes { list-style: none; padding: 0.7rem 1.1rem; margin: 0; font-size: 0.95rem; }
.tsp-notes li::before { content: "i"; display: inline-flex; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #e7f1ff; color: #0a58ca;
    font-size: 0.75rem; font-weight: 700; align-items: center; justify-content: center; margin-right: 0.5rem; font-style: italic; }
.tsp-suggest { border-color: #ffe69c !important; background: #fffdf4 !important; }
.tsp-sug { border-top: 1px solid #f1e3b0; padding: 0.7rem 0; }
.tsp-sug:first-of-type { border-top: 0; padding-top: 0; }
.tsp-sug.is-on { background: #f1f8f4; margin: 0 -1.25rem; padding: 0.7rem 1.25rem; }
.tsp-badge { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.tsp-badge.is-core { color: #41464b; background: #f1f3f5; border-color: #ced4da; }
.tsp-badge.is-recommended { color: #084298; background: #e7f1ff; border-color: #b6d4fe; }
.tsp-badge.is-suggested { color: #0f5132; background: #d1e7dd; border-color: #a3cfbb; }
.tsp-tier { margin-top: 0.35rem; }
.tsp-card.is-suggested { border-color: #198754; }
.tsp-chart .tsb-tree { justify-content: flex-start; min-width: 0; margin: 0 auto; }
.tsp-chart .tsb-node { align-items: flex-start; }
.tsp-chart .tsb-children { justify-content: flex-start; }
.tsp-chart .tsb-children::before, .tsp-chart .tsb-children > .tsb-node::before { left: 115px; }
.tsp-chart .tsb-children > .tsb-node:first-child:not(:only-child)::after { left: 115px; right: -8px; }
.tsp-chart .tsb-children > .tsb-node:last-child:not(:only-child)::after { left: -8px; right: auto; width: 125px; }
.tsp-chart .tsb-card { cursor: default; }
.tsp-branch { font-size: 1rem; font-weight: 700; margin: 1rem 0 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; color: #495057; }
.tsp-seatlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.tsp-seatlist > li { border: 1px solid #dee2e6; border-radius: 8px; padding: 0.55rem 0.75rem; }
.tsp-seatlist > li.is-selected { border: 2px solid var(--bs-primary); }
.tsp-seat-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tsp-titlein { flex: 1 1 260px; max-width: 30rem; font-weight: 600; }
.tsp-remove { margin-left: auto; color: #842029; }
.tsp-why { font-size: 0.93rem; margin: 0.3rem 0 0.2rem; }
.tsp-acc summary, .tsp-removed summary, .tsp-keep summary { cursor: pointer; font-size: 0.93rem; color: #0a58ca; min-height: 32px; }
.tsp-acc ol { font-size: 0.93rem; margin: 0.3rem 0 0; padding-left: 1.3rem; }
.tsp-removed, .tsp-keep { margin-top: 0.9rem; }
.tsp-cmp { display: grid; gap: 0.25rem; }

@media (max-width: 991.98px) {
    .tsp { padding: 1rem; }
    .tsp-grid { grid-template-columns: 1fr; }
    .tsp-side { position: static; }
}
/* Phone: the proposed chart becomes an indented outline instead of a shrunken tree. */
@media (max-width: 767.98px) {
    /* labels stay in the accessibility tree; only the current step's label is shown */
    .tsp-step-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .tsp-step.is-current .tsp-step-l { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .tsp-chart .tsb-tree, .tsp-chart .tsb-children { display: block; width: auto; }
    .tsp-chart .tsb-children { padding: 0.5rem 0 0 1rem; margin-left: 0.6rem; border-left: 2px solid #ced4da; }
    .tsp-chart .tsb-children::before, .tsp-chart .tsb-children > .tsb-node::before, .tsp-chart .tsb-children > .tsb-node::after { display: none; }
    .tsp-chart .tsb-node { display: block; margin-bottom: 0.5rem; }
    .tsp-chart .tsb-card { width: 100%; }
    .tsp-inline { gap: 1rem; }
}
.tsp-side-h3 { font-size: 0.95rem; font-weight: 700; margin: 0.9rem 0 0.4rem; }
.tsp-review > section { min-width: 0; }
.tsp-review { grid-template-columns: minmax(0, 1fr); }
.tsp-grouptitle { font-weight: 600; flex: 1 1 260px; }
.tsp-count { font-weight: 700; color: #084298; }
.tsp-sublist { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.4rem; }
.tsp-sublist > li { border-left: 3px solid #dee2e6; padding-left: 0.6rem; }
.tsp-sublist > li.is-selected { border-left-color: var(--bs-primary); }
.tsp-branchtabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.tsp-fold { margin-left: auto; }
.tsp-fold + .tsp-remove { margin-left: 0; }
.tsp-foldbox { margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: #f5f9ff; border: 1px solid #b6d4fe; border-radius: 8px; }
.tsp-folded { margin-top: 1rem; }
.tsp-matchlist { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.6rem; }
.tsp-matchlist > li { border: 1px solid #dee2e6; border-radius: 8px; padding: 0.6rem 0.8rem; }
.tsp-match-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.3rem; }
.tsp-accchoice { border: 0; padding: 0; margin: 0.4rem 0 0; min-width: 0; }
.tsp-accchoice legend { font-size: 0.95rem; font-weight: 600; float: none; margin-bottom: 0.3rem; }
.tsp-accdiff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 0.4rem; font-size: 0.93rem; }
.tsp-accdiff ol { padding-left: 1.3rem; margin: 0.2rem 0 0; }
.tsp-accdiff li.is-only { background: #fff3cd; }
@media (max-width: 767.98px) { .tsp-accdiff { grid-template-columns: 1fr; } }

.tsp-unresolved { border-color: #f5c2c7 !important; background: #fff8f8 !important; }
.tsp-unres { border-top: 1px solid #f1d0d3; padding-top: 0.7rem; margin-top: 0.7rem; }
.tsp-unres-lines li { margin-bottom: 0.35rem; }
.tsp-linesedit .btn-outline-secondary { --bs-btn-color: #495057; --bs-btn-border-color: #6c757d; }
.tsp-move { display: inline-block; width: auto; max-width: 16rem; margin-left: 0.5rem; vertical-align: middle; }
.tsp-linesedit { margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; }
.tsp-blocker { color: #842029; font-weight: 600; font-size: 0.95rem; margin: 0.4rem 0; }
.tsp-needsreview { background: #fffdf4; border: 1px solid #ffe69c !important; border-radius: 8px; padding: 0.7rem 0.9rem !important; }
.tsp-group-review { border-top: 1px solid #f1e3b0; padding-top: 0.6rem; margin-top: 0.6rem; }
.tsp-pairtable { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; font-size: 0.95rem; }
.tsp-pairtable th, .tsp-pairtable td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
.tsp-pairtable th { font-size: 0.85rem; color: #5c636a; font-weight: 600; }
.tsp-moved { margin: 0.4rem 0 0; }
@media (max-width: 767.98px) { .tsp-move { display: block; margin: 0.3rem 0 0; max-width: 100%; } }

.tsb-lmaflag { color: #7a4d00; font-weight: 600; font-size: 0.85rem; margin-top: 0.3rem; }
.tsb-lma-list li { margin-bottom: 0.7rem; }
.tsb-lma-after { font-size: 0.93rem; color: #0f5132; }
.tsb-lma-noroom { font-size: 0.93rem; color: #842029; }