/* Role Admin — copied verbatim from Work Management's app.css on 2026-11-08 (spec §7.1: the WORK house style, unchanged; itself Cost Control's house sheet). Role Admin's own additions are at the end. */
:root {
    --cargo-tank-black: #262626;
    --water-ballast-white: #EBEBEB;
    --marine-blue: #128FA5;
    --marine-blue-hover: #0F7F93;
    --hull-red: #932F3E;
    --north-sea-blue: #7BA1A6;
    --oxidized-orange: #EF8354;

    --page-bg: var(--water-ballast-white);
    --surface: #FFFFFF;
    --text: var(--cargo-tank-black);
    --text-muted: #5F6B6D;
    --border: #D6D6D6;

    --radius: 8px;
    /* Added from the design review (03 §10.1, D38): status tones, the timeline's today line and the overrunning bar. */
    --danger: #A8200D;   --danger-bg: #FDECEA;
    --warning: #7A3E00;  --warning-bg: #FDF0D5;
    --success: #0B6E3D;  --success-bg: #E3F4EA;
    --neutral: #4B5563;  --neutral-bg: #EEF0F2;
    --today: #E8590C;
    --overrun-bar: repeating-linear-gradient(135deg, #D9442B 0 6px, #F3B2A6 6px 11px);
    --radius-card: 12px;
    --radius-pill: 999px;
    --touch: 44px;
    --shadow: 0 1px 3px rgba(38, 38, 38, .12), 0 1px 2px rgba(38, 38, 38, .08);
    --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--page-bg);
    color: var(--text);
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0 0 .5rem; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; margin-top: 1.2rem; }

a { color: var(--marine-blue); text-decoration: none; }

/* Shell (MainLayout.razor, 03 §3.1): sidebar at 1280 px and up, an icon rail from 768 px, a tab bar below it. */
.app-shell { min-height: 100vh; display: flex; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-sidebar {
    flex: none; width: 224px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: .15rem; padding: .7rem .6rem;
    background: var(--surface); border-right: 1px solid var(--border);
}
.app-sidebar .brand { display: flex; align-items: center; gap: .55rem; padding: .3rem .5rem .9rem; color: var(--text); }
.app-sidebar .brand img { width: 28px; height: 28px; }
.app-sidebar .brand .title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.app-sidebar a:not(.brand), .tab-bar a {
    display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: .4rem .6rem;
    border-radius: var(--radius); color: var(--text-muted); font-weight: 600;
}
.app-sidebar a:not(.brand):hover { background: #eef6f8; }
.app-sidebar a.active, .tab-bar a.active { color: var(--marine-blue); background: #e8f4f6; }
.nav-icon { width: 22px; height: 22px; flex: none; }
.app-header { display: none; align-items: center; gap: .6rem; padding: .55rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.app-header img { height: 26px; width: 26px; }
.app-header .title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.header-help { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); min-height: var(--touch); color: var(--text-muted); border-radius: var(--radius); }
.header-help.active { color: var(--marine-blue); background: #e8f4f6; }
.tab-bar { display: none; }
.app-content { flex: 1; padding: 1rem 1.25rem; max-width: 1280px; width: 100%; margin: 0 auto; }
/* Following under the sidebar's links (03 §3.2): desktop only, quieter than the links above it. */
.sidebar-following { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.sidebar-following .sidebar-heading { margin: 0 .6rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.sidebar-following ul { list-style: none; margin: 0; padding: 0; }
.app-sidebar .sidebar-following a { min-height: 32px; gap: .4rem; padding: .25rem .6rem; font-weight: 400; font-size: .85rem; }
.sidebar-following a .ref { flex: none; font-weight: 600; color: var(--text); }
.sidebar-following a .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-following .flag-mark { flex: none; color: var(--warning, #b26a00); }
.sidebar-following .flag-mark.bad { color: var(--danger, #b42318); }
.app-sidebar .sidebar-following a.sidebar-more { font-size: .8rem; color: var(--marine-blue); }

@media (max-width: 1279px) {
    .app-sidebar { width: 72px; padding: .6rem .35rem; align-items: stretch; }
    .app-sidebar .brand { justify-content: center; padding: .3rem 0 .8rem; }
    .app-sidebar .brand .title { display: none; }
    .app-sidebar a:not(.brand) { flex-direction: column; justify-content: center; gap: .15rem; min-height: 56px; padding: .35rem .15rem; text-align: center; }
    .app-sidebar .nav-label { font-size: .68rem; line-height: 1.1; }
    .sidebar-following { display: none; }
}
@media (max-width: 767px) {
    .app-sidebar { display: none; }
    .app-header { display: flex; position: sticky; top: 0; z-index: 30; }
    .app-content { padding: .75rem 1rem calc(64px + 1rem + env(safe-area-inset-bottom)); }
    .tab-bar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        padding: .25rem .5rem env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border);
    }
    .tab-bar a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: .1rem; min-height: 56px; font-size: .75rem; }
}

/* Made for fingers (03 principle 9, §10.2): on a touch screen every control is at least 44 px with clear space round it. */
@media (pointer: coarse) {
    .btn, .btn.small, .link-btn, .back-link, select, input[type="text"], input[type="date"], input[type="search"], .segmented button {
        min-height: var(--touch);
    }
    .link-btn { display: inline-flex; align-items: center; padding: 0 .3rem; }
    .btn.small { padding: .35rem .9rem; }
    .row-label .toggle { width: var(--touch); height: var(--touch); }
    .inline-actions { gap: .5rem .8rem; }
}

.page-head, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.page-head h1, .section-head h2 { margin: 0; }

/* Cards */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
    box-shadow: var(--shadow); padding: 1rem; margin-bottom: 1rem;
}
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.notice { background: #fff8f0; border: 1px solid var(--oxidized-orange); border-radius: var(--radius); padding: .6rem .8rem; }
.saved-note { color: var(--marine-blue); font-weight: 600; }
.spinner { color: var(--text-muted); padding: .5rem 0; }

/* Buttons */
.btn {
    display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: .95rem;
    border: none; border-radius: var(--radius); padding: .55rem 1rem; cursor: pointer;
    background: var(--marine-blue); color: #fff;
}
.btn:hover { background: var(--marine-blue-hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--marine-blue); border: 1px solid var(--marine-blue); }
.btn.small { font-size: .85rem; padding: .35rem .7rem; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* Forms */
label { display: block; font-weight: 600; font-size: .85rem; margin: .8rem 0 .25rem; }
select, input[type="text"], input[type="number"] {
    width: 100%; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--font-body); font-size: 1rem; background: #fff; color: var(--text);
}
.search-row { display: flex; gap: .5rem; margin-bottom: .6rem; }
.search-row select { width: auto; flex: 0 0 auto; min-width: 10rem; }
/* In a table cell, 100% of a narrow column clipped the Kind choices to two letters. */
.grid select { width: auto; min-width: 7.5rem; padding: .3rem .4rem; font-size: .9rem; }

/* Tables */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.grid th, table.grid td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.grid th { font-weight: 600; color: var(--text-muted); font-size: .8rem; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .detail { min-width: 16rem; }

/* Status chips */
.chip { display: inline-block; padding: .1rem .5rem; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip.good { background: var(--success-bg); color: var(--success); }
.chip.wait { background: var(--neutral-bg); color: var(--neutral); }
.chip.bad { background: var(--danger-bg); color: var(--danger); }
.chip.warn { background: var(--warning-bg); color: var(--warning); }
/* Category types (core.CategoryType): outlined, so they never read as a status. */
.chip.type { background: transparent; border: 1px solid currentColor; font-weight: 600; }
.chip.type-part { color: var(--marine-blue); }
.chip.type-service { color: #6a4c93; }
.chip.type-rental { color: #a14e22; }
.chip.type-none { color: var(--text-muted); }

/* Facts list */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.facts dt { font-weight: 600; color: var(--text-muted); }
.facts dd { margin: 0; }

/* Pick lists */
.pick-list { list-style: none; padding: 0; margin: 0; max-height: 18rem; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.pick-list li + li { border-top: 1px solid var(--border); }
.pick { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .45rem .6rem; font-weight: 400; font-size: .95rem; cursor: pointer; }
.pick.inactive { color: var(--text-muted); cursor: default; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(38, 38, 38, .45); z-index: 40; }
.modal {
    position: fixed; z-index: 50; top: 8vh; left: 50%; transform: translateX(-50%);
    width: min(640px, calc(100vw - 2rem)); max-height: 84vh; overflow-y: auto;
    background: var(--surface); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); padding: 1rem 1.2rem;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.modal-head h2 { margin: 0; }
.modal-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-muted); }

/* Failed API calls (ErrorState.razor): a `panel` that replaces a section whose load failed, an `inline`
   strip beside a refused action. `benign` is the signing-in transition, which is not a fault. */
.error-state {
    display: flex; gap: .7rem; align-items: flex-start;
    border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem;
    background: var(--surface); border: 1px solid var(--border);
}
.error-state.problem { background: #fdf5f6; border-color: var(--hull-red); }
.error-state.benign { background: var(--surface); border-color: var(--border); }
.error-state.inline { padding: .5rem .7rem; font-size: .9rem; }
.error-mark { font-size: 1.1rem; line-height: 1.4; flex: none; }
.error-body { min-width: 0; }
.error-title { font-family: var(--font-head); font-weight: 600; margin: 0; }
.error-detail { color: var(--text-muted); margin: .2rem 0 0; }
.error-state .btn.small { margin-top: .6rem; }

.app-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }

#blazor-error-ui {
    background: var(--hull-red); color: #fff; bottom: 0; display: none; left: 0; right: 0;
    padding: .8rem 1rem; position: fixed; z-index: 1000;
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .8rem; }

a.btn { display: inline-block; }

/* Blazor focuses the page heading after navigation (FocusOnNavigate) for screen readers; no ring is needed on a heading. */
h1:focus { outline: none; }

/* A chip that follows text in the same cell. */
.chip.beside { margin-left: .4rem; }
/* Text written over several lines, such as a workscope's ERP Description, keeps its line breaks. */
.pre-line { white-space: pre-line; }

/* Danger buttons: destructive confirmations. */
.btn.danger { background: var(--hull-red); }
.btn.danger:hover { background: #7a2633; }

/* Contract picker (Pages/Contracts.razor) */
.contract-list { list-style: none; padding: 0; margin: 0 0 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.contract-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; flex-wrap: wrap; }
.contract-list li + li { border-top: 1px solid var(--border); }
.contract-list a { display: flex; gap: .7rem; min-width: 0; font-weight: 600; }
.contract-list .contract-id { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.other-contracts > summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; padding: .3rem 0 .6rem; }
.other-contracts .contract-list { opacity: .85; }

/* The contract board (Pages/Board.razor) */
.board-head { flex-wrap: wrap; }
.board-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.segmented { display: inline-flex; border: 1px solid var(--marine-blue); border-radius: var(--radius); overflow: hidden; }
.segmented button { border: none; background: var(--surface); color: var(--marine-blue); font: inherit; font-size: .85rem; font-weight: 600; padding: .35rem .7rem; cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--marine-blue); }
.segmented button.on { background: var(--marine-blue); color: #fff; }
.segmented button.on + button.on { border-left-color: rgba(255, 255, 255, .45); }
.inline-check { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 600; font-size: .85rem; }
.board-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .8rem; margin-bottom: .8rem; }
.filter-field { display: flex; flex-direction: column; gap: .2rem; margin: 0; font-size: .8rem; }
.filter-field input[type="text"], .filter-field select { width: auto; padding: .3rem .4rem; font-size: .9rem; }
.filter-text input[type="search"] { width: 16rem; padding: .3rem .4rem; font-size: .9rem; }
.filter-field select { min-width: 8rem; max-width: 14rem; }
.filter-check { padding-bottom: .4rem; }
.filter-result { display: inline-flex; align-items: center; gap: .6rem; padding-bottom: .1rem; }
.filter-empty { margin: 0; padding: 1rem; }

.board-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.board { min-width: 56rem; }
.board-row { display: grid; grid-template-columns: minmax(18rem, 24rem) 1fr; border-bottom: 1px solid var(--border); }
.board-row:last-child { border-bottom: none; }
.row-label { display: flex; align-items: flex-start; gap: .4rem; padding: .4rem .6rem; min-width: 0; border-right: 1px solid var(--border); }
/* One line each (owner, 2026-11-07): a long name is cut short, its whole on hover, and only the name gives way. */
.label-text { flex: 1 1 auto; min-width: 0; }
.label-main { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.label-main > * { flex: none; }
.label-main > .row-open { flex: 0 1 auto; min-width: 0; }
.label-sub { display: flex; align-items: center; gap: .35rem; min-width: 0; margin-top: .1rem; white-space: nowrap; }
.label-sub > * { flex: none; }
.label-sub > .sub-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row-label .ref { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }
.ref-hover { cursor: help; }
.row-label .name { font-weight: 600; }
.board-row.phase .row-label { padding-left: 2.2rem; }
.board-row.phase .row-label .name { font-weight: 400; }
.row-label .seq { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 1.2rem; }
.row-label .objective { color: var(--text); }
/* Plainly a control of its own, because the rest of the row opens the panel. */
.row-label .toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
    background: #fff; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; color: var(--marine-blue); padding: 0 0 .15rem; font-size: 1.7rem; line-height: 1; }
.row-label .toggle:hover, .row-label .toggle:focus-visible { background: #e8f4f6; border-color: var(--marine-blue); }
.board-row.workscope, .board-row.phase, .board-row.item { cursor: pointer; }
.board-row.workscope:hover > .row-label, .board-row.phase:hover > .row-label, .board-row.item:hover > .row-label { background: #eef6f8; }
.board-row.workscope { background: #f6f9fa; }
.board-row.other .row-label { padding-left: 2.2rem; }
.board-row.attention > .row-label { box-shadow: inset 3px 0 0 var(--hull-red); }
.board-row.attention.phase { background: #fdf5f6; }
.attention-mark { font-size: .72rem; }

.row-track { position: relative; min-height: 2.2rem;
    background-image: linear-gradient(to right, var(--border) 1px, transparent 1px);
    background-size: calc(100% / var(--cols)) 100%; }
.row-track.scale { display: grid; grid-template-columns: repeat(var(--cols), 1fr); align-items: end; min-height: 0; }
.row-track.scale span { font-size: .75rem; line-height: 1.15; color: var(--text-muted); padding: .35rem .2rem; text-align: center; overflow: hidden; }
.row-track.scale span.today { color: var(--marine-blue); font-weight: 700; }
.row-track .finer { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(123, 161, 166, .12); pointer-events: none; }
.row-track .today-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--today); pointer-events: none; }

.bar { position: absolute; top: 50%; height: .8rem; margin-top: -.4rem; border-radius: 4px; min-width: 4px; }
.bar.runs-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bar.runs-after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bar-workscope { height: .35rem; margin-top: -.175rem; background: var(--north-sea-blue); opacity: .55; }
.bar-phase.active { background: var(--marine-blue); }
.bar-phase.planned { background: #fff; border: 2px solid var(--marine-blue); }
.bar-phase.on-hold { background: repeating-linear-gradient(45deg, #c9d3d5, #c9d3d5 4px, #eef1f2 4px, #eef1f2 8px); }
.bar-phase.overrunning { background: var(--overrun-bar); }
.overrun-tail { background: repeating-linear-gradient(45deg, rgba(147, 47, 62, .55), rgba(147, 47, 62, .55) 3px, rgba(147, 47, 62, .15) 3px, rgba(147, 47, 62, .15) 6px); }

/* Row names open the side panel; a count of what's new beside them. */
.row-open { display: inline-flex; align-items: baseline; gap: .35rem; background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.row-open > * { flex: none; }
.row-open > .name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-open:hover .name, .row-open:focus-visible .name { color: var(--marine-blue); text-decoration: underline; }
.chip.unread { background: #e8f4f6; color: var(--marine-blue); }
.board-row.selected > .row-label { background: #e8f4f6; }

/* A workscope's key events and open actions: a lighter row than a phase, in date order after its phases. The shape says
   which it is (◇ key event, ○ action) and the line beneath says which level it's on. */
.board-row.item .row-label { padding: .2rem .6rem .2rem 2.2rem; }
.board-row.item .row-track { min-height: 1.9rem; }
.board-row.item .row-label .name { font-weight: 400; }
.board-row.item .item-date { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.board-row.item.done .name { color: var(--text-muted); }
.board-row.related > .row-label { background: #f2f9fa; }
.item-icon { color: var(--marine-blue); min-width: 1.2rem; line-height: 1.4; }
.board-row.item.late .item-icon.is-action { color: var(--hull-red); }
.board-row.item.done .item-icon { color: var(--text-muted); }
.item-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); color: var(--marine-blue); font-size: 1.15rem; line-height: 1; }
.item-mark.is-action { font-size: .95rem; }
.board-row.item.late .item-mark.is-action { color: var(--hull-red); }
.board-row.item.done .item-mark { color: var(--text-muted); }
/* A key event passed that needs attention (D37): red on the horizon, or a red "← date" at its left edge when it passed before it. */
.item-mark.passed { color: var(--danger); }
.passed-mark { position: absolute; top: 50%; left: 2px; transform: translateY(-50%); color: var(--danger); font-size: .75rem;
    font-weight: 600; white-space: nowrap; background: var(--danger-bg); border-radius: 3px; padding: 0 .25rem; line-height: 1.4; }

/* The side panel (Components/ThreadPanel.razor): beside the board, not over it, so the row stays in view. */
/* The page widens while the panel is open, so the board keeps its whole horizon on a wide screen. */
.app-content:has(.board-layout.with-panel) { max-width: 1760px; }
.board-layout.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); gap: 1rem; align-items: start; }
.side-panel {
    position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: .8rem 1rem 1rem;
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.panel-head h2 { margin: .15rem 0 0; }
.side-panel .facts { margin-bottom: .6rem; }
.flag-list, .key-events { list-style: none; padding: 0; margin: 0 0 .6rem; }
.flag-list li, .key-events li { display: flex; align-items: baseline; gap: .45rem .8rem; flex-wrap: wrap; padding: .25rem 0; }
.key-events .diamond { color: var(--marine-blue); }
.key-events .diamond.done { color: var(--text-muted); }
.key-event-note { flex: 1 1 100%; margin: 0 0 0 1.05rem; }
.key-event-level { margin: .15rem 0 .4rem; }
.key-event-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; flex: 1 1 100%; margin: .25rem 0; }
.key-event-form input { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: .9rem; }
.key-event-form input[type="text"] { flex: 1 1 100%; min-width: 0; }
.key-event-form input[type="date"] { flex: 1 1 auto; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.section-head h3 { margin-bottom: .25rem; }
.dated-items:focus { outline: none; }
.key-events li.focused { background: #e8f4f6; box-shadow: -.4rem 0 0 #e8f4f6, .4rem 0 0 #e8f4f6; border-radius: 2px; }
.action.focused { box-shadow: 0 0 0 2px var(--marine-blue); }

.thread { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; }
.comment { border-left: 3px solid transparent; padding: .1rem 0 .1rem .5rem; }
.comment.new { border-left-color: var(--marine-blue); }
.comment.deleted .comment-head strong { color: var(--text-muted); }
.comment-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.comment-body { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment.focused { background: #e8f4f6; border-radius: 2px; }
.comment:focus { outline: none; }
.mention { color: var(--marine-blue); font-weight: 600; }
.mention.me { background: #e8f4f6; border-radius: 3px; padding: 0 .15rem; }
.mention-box { position: relative; width: 100%; }
.mention-box textarea { width: 100%; }
.mention-picker { position: absolute; left: 0; bottom: 100%; z-index: 20; min-width: 14rem; max-height: 14rem; overflow-y: auto; margin: 0 0 .2rem; padding: .2rem; list-style: none; background: #fff; border: 1px solid #cfd8dc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.mention-picker button { display: block; width: 100%; padding: .25rem .5rem; background: none; border: none; border-radius: 3px; font: inherit; text-align: left; cursor: pointer; }
.mention-picker button:hover, .mention-picker button.active { background: #e8f4f6; }
.follow-btn { white-space: nowrap; }
.follow-btn.on { color: var(--marine-blue); }
.followed-mark { color: var(--marine-blue); font-size: .85rem; }
.following-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.following-list li { display: flex; align-items: center; gap: .6rem .8rem; flex-wrap: wrap; }
.comment-actions { display: flex; gap: .8rem; margin-top: .15rem; }
.reply { margin-left: 1.2rem; }
.new-line { display: flex; align-items: center; gap: .5rem; color: var(--marine-blue); font-size: .8rem; font-weight: 600; }
.new-line::before, .new-line::after { content: ""; flex: 1; border-top: 1px solid var(--marine-blue); }
.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--marine-blue); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { opacity: .5; cursor: default; }
/* Actions beside other content. A .link-btn has no padding and Blazor drops the whitespace between elements, so it
   would touch its neighbour. The space comes from the row's column gap of .8rem, more than a word space so an action
   can't read as part of the sentence, and a gap and not a margin so a group that wraps starts flush with the row.
   InlineActionE2ETests measures both. */
.inline-actions { display: inline-flex; flex-wrap: wrap; gap: .8rem; }
.inline-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; }

.composer { display: flex; flex-direction: column; gap: .4rem; }
.composer.reply { margin: .2rem 0 .4rem 1.2rem; }
.composer textarea {
    width: 100%; resize: vertical; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--font-body); font-size: .95rem; color: var(--text); background: #fff;
}
.composer-tools { display: flex; justify-content: flex-end; gap: .5rem; }
/* The comment box stays at the foot of the panel however long the thread is, so writing never means scrolling. */
.composer-dock { position: sticky; bottom: -1rem; z-index: 1; margin: .6rem -1rem -1rem; padding: .6rem 1rem 1rem;
    background: var(--surface); border-top: 1px solid var(--border); }
.show-more { margin: 0 0 .6rem; }

/* The panel by width (03 §3.1): docked beside the board on a desktop; below 1280 px a drawer over it, the board dimmed
   behind; below 768 px the whole screen, with Back. It scrolls itself in each, so the composer stays docked at its foot. */
.panel-backdrop { display: none; }
.panel-back { display: none; }
@media (max-width: 1279px) {
    .board-layout.with-panel { display: block; }
    .board-layout.with-panel .side-panel {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(560px, 100vw); max-height: none;
        border-radius: 0; border-width: 0 0 0 1px; box-shadow: -8px 0 30px rgba(0, 0, 0, .18); padding-bottom: 1rem;
    }
    .board-layout.with-panel .panel-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(38, 38, 38, .35); }
    .app-content:has(.board-layout.with-panel) { max-width: 1280px; }
}
@media (max-width: 767px) {
    .board-layout.with-panel .side-panel { width: 100vw; border-left: none; box-shadow: none; padding: .6rem 1rem 1rem; }
    .board-layout.with-panel .panel-backdrop { display: none; }
    .panel-back { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-weight: 600; }
    .panel-head .modal-close { display: none; }
    .panel-head { flex-wrap: wrap; }
}

/* What a phase's state asks for, at the top of its panel (03 §4.2.1): an overrunning box, a should-have-started box. */
.state-box { border-radius: var(--radius-card); padding: .7rem .9rem; margin: 0 0 .8rem; border: 1px solid; }
.state-box p { margin: 0; }
.state-box .btn-row { margin-top: .6rem; }
.state-box.danger { background: var(--danger-bg); border-color: #F3B2A6; color: var(--danger); }
.state-box.warning { background: var(--warning-bg); border-color: #EBC98A; color: var(--warning); }

/* Related ▾ (RelatedActions.razor): other apps' screens for what's in the panel. */
.related-menu { position: relative; display: inline-block; margin: 0 0 .6rem; }
.related-menu > summary { list-style: none; cursor: pointer; }
.related-menu > summary::-webkit-details-marker { display: none; }
.related-list { position: absolute; z-index: 20; left: 0; top: calc(100% + .25rem); min-width: 14rem; margin: 0; padding: .3rem .5rem;
    list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.related-list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .3rem 0; }

/* Flags in the side panel: changed and cleared in place, raised from the composer or a comment. */
.phase-status { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.phase-status-confirm { margin: 0 0 .6rem; }
.phase-status-confirm p { flex: 1 1 100%; margin: 0; }
.board-retired { padding: .6rem .75rem .5rem; }
.board-retired summary { cursor: pointer; }
.board-retired .flag-list { margin-top: .4rem; }
.flag-form .put-back { flex: 1 1 100%; display: flex; align-items: flex-start; gap: .45rem; font-weight: 400; }
.flag-form .put-back input { flex: none; width: auto; margin: .2rem 0 0; }
.plan-form label { display: inline-flex; align-items: center; gap: .3rem; }
.plan-form input[type="date"] { flex: 0 1 auto; width: auto; }
.plan-form textarea { flex: 1 1 100%; min-width: 0; padding: .3rem .4rem; font: inherit; }
.plan-problem { color: var(--danger, #b42318); }
.plan-warning { color: #a14e22; }
/* A list on its own screen looks like the contracts list: same surface, text size and padding. Picking a row opens its panel. */
.list-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.2rem; }
.list-table table.grid { font-size: 1rem; }
.list-table table.grid th, .list-table table.grid td { padding: .55rem .8rem; }
.list-table table.grid tbody tr:last-child td { border-bottom: none; }
.list-table table.grid tbody tr { cursor: pointer; }
.list-table table.grid tbody tr:hover td { background: #eef6f8; }
.list-table table.grid tbody tr.selected td { background: #e8f4f6; }
.list-table .ongoing-ref { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.list-table .ongoing-name { font-weight: 600; text-align: left; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .15rem .7rem .15rem .5rem; background: #fff;
    border: 1px solid var(--border); border-radius: 4px; font-weight: 600; }
.back-link:hover, .back-link:focus-visible { background: #e8f4f6; border-color: var(--marine-blue); }
.back-arrow { font-size: 2.2rem; line-height: .7; font-weight: 400; padding-bottom: .3rem; }
.ongoing-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.ongoing-count { margin-left: .3rem; font-variant-numeric: tabular-nums; font-weight: 400; }
.flag-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; flex: 1 1 100%; margin-top: .25rem; }
/* The plan sits straight under the panel's fold-outs, so it brings its own gap. After .flag-form, whose margin it overrides. */
.plan-actions, .plan-form { margin-top: .6rem; }
.flag-form input, .flag-from-comment input {
    flex: 1 1 12rem; min-width: 0; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--font-body); font-size: .9rem;
}
.flag-picker { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.flag-from-comment { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.flag-from-comment .flag-picker { justify-content: flex-start; }

/* Work actions in the side panel (Components/ActionList.razor, ActionRequestForm.razor). */
.action-list { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-direction: column; gap: .5rem; }
.action { border: 1px solid var(--border); border-left: 3px solid var(--marine-blue); border-radius: var(--radius); padding: .45rem .6rem; }
.action.overdue { border-left-color: var(--hull-red); background: #fdf5f6; }
.action[data-status="Closed"], .action[data-status="Cancelled"] { border-left-color: var(--border); }
.action.selected { box-shadow: 0 0 0 1px var(--marine-blue); }
.action-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.action-detail { margin: .2rem 0; white-space: pre-wrap; }
.overdue-text { color: var(--danger); font-weight: 600; }
.assignees { list-style: none; padding: 0; margin: .3rem 0; display: flex; flex-direction: column; gap: .15rem; }
.assignees li { display: flex; align-items: baseline; gap: .4rem .8rem; flex-wrap: wrap; }
.action .move { color: var(--marine-blue); font-weight: 600; }
.action-form { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .7rem .7rem; margin: .4rem 0; background: #f6f9fa; }
.action-form label { margin-top: .5rem; }
.action-form input[type="text"], .action-form input[type="date"], .action-form input[type="search"], .action-form textarea {
    width: 100%; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--font-body); font-size: .9rem; background: #fff;
}
.action-form .people { border: none; padding: 0; margin: .6rem 0 .4rem; }
.action-form .people legend { font-weight: 600; font-size: .85rem; padding: 0; margin-bottom: .25rem; }
.action-form .people-filter { margin-bottom: .3rem; }
.action-form .pick-list { max-height: 12rem; background: #fff; }
.action-form .composer-tools { align-items: center; margin-top: .4rem; }
.action-form select { width: 100%; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .9rem; background: #fff; }
/* What stands between the people asked and booking to the phase (03 §5.2), each with its fix beside it. */
.action-checks { margin: .6rem 0 .2rem; padding: .5rem .65rem; border-radius: var(--radius); background: var(--warning-bg); color: var(--warning); font-size: .88rem; }
.action-check { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .2rem 0; }
.action-check > span:first-child { flex: 1 1 14rem; }
.action-checks .action-check input[type="date"] { width: auto; padding: .25rem .35rem; }
.action-checks p { margin: .3rem 0 0; }
/* An action its people can't book to yet, or with nothing to book to (03 §5.2): the chip, then why. */
.cant-book { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; margin: .25rem 0; }
.cant-book > span:last-child { flex: 1 1 10rem; min-width: 0; }
.flag-form select { flex: 1; min-width: 0; padding: .3rem .4rem; }

/* Raising a phase, and its billable line (03 §3.3, §4.3, §4.7). */
.add-phase-form { align-items: stretch; }
.plan-form .add-phase-field, .plan-form .line-picker { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; flex: 1 1 100%; font-weight: 600; font-size: .85rem; text-align: left; }
.plan-form .add-phase-field input, .plan-form .add-phase-field select, .plan-form .line-picker select { flex: none; width: 100%; min-width: 0; font-weight: 400; padding: .3rem .4rem; font-family: inherit; }
.plan-form .add-phase-note { display: flex; }
.plan-form .add-phase-note input[type="checkbox"] { flex: none; width: auto; margin: 0; }
.add-phase-billing { flex: 1 1 100%; margin: .2rem 0; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); }
.add-phase-billing legend { font-weight: 600; font-size: .85rem; padding: 0 .25rem; }
.add-phase-choice { display: flex; align-items: flex-start; gap: .45rem; margin: .25rem 0; font-weight: 400; }
.plan-form .add-phase-choice { display: flex; }
.plan-form .add-phase-choice input { flex: none; width: auto; margin: .2rem 0 0; }
.add-phase-line, .add-phase-note { flex: 1 1 100%; }
.add-phase-line p, .add-phase-note { margin: .15rem 0 0; }
.line-picker + p { margin: .25rem 0 0; }
.phase-line { margin-top: .6rem; }
.phase-line p { margin: .15rem 0; }
/* A sentence runs right up to the actions here: Blazor drops the space between them, and the rule is that they never touch (03). */
.phase-line p .inline-actions, .proposal-list li > .inline-actions { margin-left: .8rem; }
.proposal-list details li > span, .proposal-list li > span { margin-right: .5rem; }
.proposal-list { list-style: none; padding: 0; margin: 0 0 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.proposal-list li { padding: .6rem .8rem; }
.proposal-list li + li { border-top: 1px solid var(--border); }
.proposal-list li > div + div, .proposal-list .plan-warning { margin-top: .2rem; }
.proposal-list a { font-weight: 600; margin-right: .5rem; }

/* My work (Pages/Home.razor, Components/MyActionCard.razor; 03 §4.1). */
.my-work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.my-work-head h1 { margin: 0; }
.greeting { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin: .2rem 0 .8rem; }
.summary-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1.1rem; }
.summary-card {
    display: flex; flex-direction: column; gap: .1rem; min-height: var(--touch); padding: .7rem .9rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); color: var(--text);
}
.summary-card:hover, .summary-card:focus-visible { border-color: var(--marine-blue); }
.summary-count { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.summary-label { font-weight: 600; }
.summary-sub { color: var(--text-muted); font-size: .85rem; }
.summary-card.danger { border-color: #F3B2A6; }
.summary-card.danger .summary-count, .summary-card.danger .summary-sub { color: var(--danger); }
.summary-card.warning .summary-count { color: var(--warning); }
.my-actions { margin-bottom: 1.2rem; }
.my-action { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .85rem; border-radius: var(--radius-card); background: var(--surface); }
.my-action-summary { font-size: 1rem; overflow-wrap: anywhere; }
.my-action-ref .ref { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.my-action-form { margin-top: .4rem; }
.see-all { margin: -.4rem 0 1rem; }
@media (min-width: 768px) { .see-all:not(.wide) { display: none; } }
.following-list:not(.all) li.extra-wide { display: none; }
@media (max-width: 1023px) { .summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .greeting { display: none; }
    .summary-cards { gap: .5rem; }
    .summary-card { padding: .55rem .7rem; }
    .summary-count { font-size: 1.25rem; }
    .following-list:not(.all) li.extra { display: none; }
    .card-actions .btn { flex: 1 1 auto; }
}

/* Needs attention (Board.razor, 03 §4.4.2): a row of counts, each a quick filter. */
.attention-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; margin: 0 0 .7rem; }
.attention-total { font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-right: .25rem; }
.attention-total.some strong { color: var(--danger); }
.attention-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: var(--radius-pill);
    border: 1px solid #F3B2A6; background: var(--danger-bg); color: var(--danger); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.attention-chip .count { font-variant-numeric: tabular-nums; }
.attention-chip.on { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (pointer: coarse) { .attention-chip { min-height: var(--touch); padding: 0 .9rem; } }

/* The scale bar's words: in full on a desktop and tablet, as date chips on a phone (03 §3.1). */
.span-short { display: none; }

/* The filters behind Filters (n) on a tablet; the phone has Find and the dates only (03 §4.4.3, D33). */
.filters-toggle { display: none; }
.more-filters { display: contents; }
@media (max-width: 1279px) {
    .filters-toggle { display: inline-flex; align-items: center; }
    .more-filters { display: none; }
    .more-filters.open { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .8rem; flex: 1 1 100%;
        padding: .6rem .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
}

/* The board on a phone (03 §4.4.5): cards grouped by urgency, no timeline. */
.phone-board { display: none; }
.phone-group { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 1rem 0 .4rem; }
.phone-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.phone-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; width: 100%; min-height: var(--touch); padding: .65rem .8rem;
    background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--marine-blue); border-radius: var(--radius-card);
    font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.phone-card.attention { border-left-color: var(--danger); }
.phone-card[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--marine-blue); }
.phone-card-title { font-weight: 600; overflow-wrap: anywhere; }
.phone-card-title .ref { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.phone-card-marks { display: flex; flex-wrap: wrap; gap: .3rem; }
@media (max-width: 767px) {
    .phone-board { display: block; }
    .board-wrap, .board-filters .filter-field:not(.filter-text), .filters-toggle, .more-filters, .more-filters.open, .desk-only { display: none; }
    .span-long { display: none; }
    .span-short { display: inline; }
    .filter-text input[type="search"] { width: 100%; }
    .board-filters .filter-text { flex: 1 1 100%; }
    .board-tools { gap: .6rem; }
    .board-head h1 { font-size: 1.15rem; }
}

/* The weekly meeting (03 §4.4.6): a stepper over the board, the text a step larger, no sidebar, for a Teams share. */
.meeting-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .8rem; padding: .6rem .8rem;
    background: #e8f4f6; border: 1px solid var(--marine-blue); border-radius: var(--radius-card);
}
.meeting-where { font-family: var(--font-head); font-weight: 700; }
.meeting-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.app-shell:has(.meeting-mode) .app-sidebar { display: none; }
.app-content:has(.meeting-mode) { max-width: none; }
.meeting-mode .board { font-size: 1.1rem; }
.meeting-mode .board .small, .meeting-mode .attention-mark { font-size: .95rem; }
.meeting-mode .board-row.workscope .name { font-size: 1.15rem; }
.meeting-plan .meeting-list { margin: .3rem 0 0; padding-left: 1.4rem; }
.meeting-plan .meeting-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: .2rem 0; }

/* The panel's header, actions and tabs (ThreadPanel.razor, 03 §4.2.1–2). */
.panel-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: -.2rem 0 .6rem; }
.panel-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin: 0 0 .8rem; }
.panel-actions .related-menu { margin: 0; }
.panel-more { margin: 0 0 .8rem; padding: .6rem .75rem .2rem; background: #f6f9fa; border: 1px solid var(--border); border-radius: var(--radius-card); }
.panel-more[hidden], .tab-panel[hidden] { display: none; }
.tabs { display: flex; gap: .25rem; margin: .4rem 0 .7rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; margin-bottom: -1px;
    background: none; border: none; border-bottom: 3px solid transparent; font: inherit; font-weight: 600; color: var(--text-muted);
    cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--marine-blue); }
.tab.on { color: var(--marine-blue); border-bottom-color: var(--marine-blue); }
.tab-count { font-weight: 400; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .tab { min-height: var(--touch); } }
.panel-phase-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.panel-phase {
    display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; width: 100%; min-height: var(--touch); padding: .5rem .7rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.panel-phase:hover, .panel-phase:focus-visible { border-color: var(--marine-blue); background: #eef6f8; }
.panel-phase-name { font-weight: 600; }
.panel-phase-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
/* Someone who may change nothing here still learns that, rather than opening an empty box. */
.more-empty { display: none; margin: 0 0 .4rem; }
.panel-more:not(:has(> :not(.more-empty))) .more-empty { display: block; }
/* Find a workscope (Pages/Find.razor, MainLayout's box; 03 §4.2.4). In the header on desktop and tablet, a tab on a phone. */
.app-topbar { display: flex; justify-content: flex-end; padding: .6rem 1.25rem 0; max-width: 1280px; width: 100%; margin: 0 auto; }
.app-topbar input[type="search"] { width: min(24rem, 100%); padding: .45rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-pill);
    font: inherit; background: var(--surface); }
.app-shell:has(.meeting-mode) .app-topbar { display: none; }
@media (max-width: 767px) { .app-topbar { display: none; } }
.find-box { margin: 0 0 1rem; }
.find-input { width: 100%; max-width: 36rem; min-height: var(--touch); padding: .55rem .8rem; border: 1px solid var(--border);
    border-radius: var(--radius-card); font: inherit; font-size: 1.05rem; background: var(--surface); }
.find-group { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 1rem 0 .4rem; }
.find-list { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.find-row { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; }
.find-row + .find-row { border-top: 1px solid var(--border); }
.find-open { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; min-height: var(--touch); justify-content: center; color: var(--text); }
.find-open:hover .find-title, .find-open:focus-visible .find-title { color: var(--marine-blue); text-decoration: underline; }
.find-title { font-weight: 600; overflow-wrap: anywhere; }
.find-title .ref { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.find-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.find-row .follow-btn { flex: none; }

/* The team view (Pages/Team.razor, 03 §4.3). */
.team-list { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.team-member + .team-member { border-top: 1px solid var(--border); }
.team-member.overdue { box-shadow: inset 3px 0 0 var(--danger); }
.team-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; width: 100%; min-height: var(--touch); padding: .6rem .9rem;
    background: none; border: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.team-row:disabled { cursor: default; }
.team-row:not(:disabled):hover { background: #eef6f8; }
.team-name { font-weight: 600; min-width: 12rem; }
.team-counts { color: var(--text-muted); flex: 1 1 auto; }
.team-member.overdue .team-counts { color: var(--danger); }
.team-caret { color: var(--marine-blue); }
.team-actions { padding: 0 .9rem .8rem; }

/* A phase panel's way back to its workscope (ThreadPanel.razor). */
.panel-up { font-size: .85rem; text-align: left; }

/* ===================================================================== Role Admin additions (2026-11-08) */

/* The designed no-access card (Components/NoAccess.razor), Cost Control's pattern. */
.no-access { display: flex; gap: .8rem; align-items: flex-start; max-width: 40rem; }
.no-access h1 { font-size: 1.15rem; margin-top: 0; }

/* Explain is authoring: tablet and desktop only (spec §7.3). */
.phone-only { display: none; }
@media (max-width: 767px) {
    .phone-only { display: block; }
    .wide-only { display: none; }
}

/* Related ▾ (Components/RelatedActions.razor). */
.related-menu { position: relative; }
.related-menu > summary { list-style: none; }
.related-menu > summary::-webkit-details-marker { display: none; }
.related-list {
    position: absolute; right: 0; z-index: 20; min-width: 14rem; margin: .3rem 0 0; padding: .3rem 0; list-style: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.related-list li { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .35rem .7rem; }
.related-list a { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--touch); }

/* ---- Role Admin features (2026-11-09). Built from the house sheet's tokens; nothing above is changed. ---- */

/* People search and lists (People.razor, PersonPicker.razor). */
.person-list { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.person-list li + li { border-top: 1px solid var(--border); }
.person-row { display: flex; align-items: center; gap: .7rem; min-height: var(--touch); padding: .5rem .8rem; color: var(--text); width: 100%;
    background: none; border: none; font: inherit; text-align: left; cursor: pointer; }
.person-row:hover, .person-row:focus-visible { background: #eef6f8; }
.person-row .person-name { font-weight: 600; overflow-wrap: anywhere; }
.person-row .person-sub { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }
.person-row .person-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #e8f4f6; color: var(--marine-blue);
    display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: .8rem; }
.avatar.archived { background: var(--neutral-bg); color: var(--neutral); }
.list-heading { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 1rem 0 .4rem; }

/* Person and group cards. */
.person-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .8rem; }
.person-head .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.group-card { padding: 0; overflow: visible; }
.group-card-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; }
.group-card-toggle { flex: 1 1 auto; min-width: 0; min-height: var(--touch); display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    background: none; border: none; padding: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.group-card-toggle .group-name { font-family: var(--font-head); font-weight: 600; }
.group-card-body { border-top: 1px solid var(--border); padding: .7rem .8rem .8rem; }
.group-card .saved-note, .level-card .saved-note, .review-card .saved-note { margin: 0; padding: .5rem .8rem; border-top: 1px solid var(--border); background: #f2f9fa; }
.saved-note { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.held-levels { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.held-levels li { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.chip-row { display: flex; flex-wrap: wrap; gap: .3rem; }

/* What each app says (MessageList.razor). */
.message-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.message { display: grid; grid-template-columns: 20px 1fr; gap: .1rem .55rem; align-items: start; }
.message .app-icon { width: 20px; height: 20px; margin-top: .15rem; }
.message-body { min-width: 0; }
.message-app { font-weight: 600; }
.message-text { margin: .1rem 0 0; }
.message-dng { margin: .15rem 0 0; color: var(--text-muted); }
.message-dng strong { color: var(--text); font-weight: 600; }
.message-meta { margin: .15rem 0 0; }
.group-notes { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.group-notes li { background: #fff8f0; border: 1px solid #f4c7ad; border-radius: var(--radius); padding: .5rem .7rem; }
.honest-name { color: var(--text-muted); font-style: italic; margin: 0 0 .6rem; }

/* The assign sheet (AssignSheet.razor, spec §7.3): full screen on a phone, a ~560 px drawer on a tablet, a 400 px
   docked panel on a desktop (§7.2). One main action, at the foot, in reach of a thumb. */
.sheet-backdrop { position: fixed; inset: 0; z-index: 44; background: rgba(38, 38, 38, .35); }
.sheet {
    position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw;
    display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
}
.sheet-head { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.sheet-head h2 { flex: 1 1 auto; margin: 0; font-size: 1.05rem; }
.sheet-head .sheet-back { display: none; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; padding: .8rem 1rem 1rem; }
.sheet-foot { border-top: 1px solid var(--border); padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: var(--surface); }
.sheet-foot .assign-question { margin: 0 0 .5rem; font-weight: 600; }
.sheet-foot .btn { width: 100%; min-height: var(--touch); }
.modal-close { min-width: var(--touch); min-height: var(--touch); }
@media (min-width: 1280px) { .sheet-backdrop { background: transparent; } }
@media (max-width: 1279px) { .sheet { width: 560px; } }
@media (max-width: 767px) {
    .sheet { width: 100vw; border-left: none; box-shadow: none; z-index: 60; }
    .sheet-backdrop { display: none; }
    .sheet-head .sheet-back { display: inline-flex; align-items: center; }
    .sheet-head .modal-close { display: none; }
}

.level-options { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.level-option {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; min-height: var(--touch); padding: .5rem .75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.level-option:hover:not(:disabled), .level-option:focus-visible { border-color: var(--marine-blue); }
.level-option[aria-checked="true"] { border: 2px solid var(--marine-blue); background: #eef6f8; padding: calc(.5rem - 1px) calc(.75rem - 1px); }
.level-option:disabled { color: var(--text-muted); cursor: default; background: #fafafa; }
.level-option .level-name { font-weight: 600; }
.level-toggle { display: flex; align-items: flex-start; gap: .6rem; margin: 0; min-height: var(--touch); padding: .5rem .75rem; font-weight: 400;
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.level-toggle input { width: 22px; height: 22px; flex: none; margin: .05rem 0 0; }
.level-toggle.disabled { color: var(--text-muted); cursor: default; }
.level-toggle.pending { border: 2px solid var(--marine-blue); background: #eef6f8; }
.level-toggle .level-name { font-weight: 600; }
.level-categories { margin: .3rem 0 0 2.6rem; }
.level-categories.pending { border: 2px solid var(--marine-blue); background: #eef6f8; }
.sheet-section { margin: 0 0 .9rem; }
.sheet-section > h3 { margin: 0 0 .4rem; }
textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; }

/* Category picker (CategoryPicker.razor): the selection as outlined chips, then a searchable list. */
.category-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; }
.category-chip { display: inline-flex; align-items: center; gap: .25rem; padding-right: .1rem; }
.category-chip button { background: none; border: none; color: inherit; cursor: pointer; min-width: 28px; min-height: 28px; font-size: .9rem; }
@media (pointer: coarse) { .category-chip button { min-width: var(--touch); min-height: var(--touch); } }
.category-list { max-height: 15rem; }
/* The category tree (FR-13): categories are the choices; subcategories sit under them, "Included" once it is chosen. */
.category-tree > li { padding: 0; }
.category-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-right: .6rem; }
/* On a phone the name, its "Now …" note and the "1 subcategory" link must share 390 px: the label shrinks and wraps
   (the note drops under the name), the link keeps its size, and nothing scrolls sideways. */
.category-row .pick { flex: 1 1 auto; min-width: 0; min-height: var(--touch); flex-wrap: wrap; overflow-wrap: anywhere; }
.category-row .pick .chip.beside { margin-left: 0; }
/* "Scan now" on the group page's Where it's gated (Role Administrators): a finger-sized target on every screen. */
.scan-now { min-height: var(--touch); flex: 0 0 auto; }
.category-expand { flex: 0 0 auto; min-height: var(--touch); white-space: nowrap; }
.subcategory-list { list-style: none; margin: 0; padding: 0 .6rem .45rem 2.2rem; font-size: .9rem; color: var(--text-muted); }
.subcategory-list li { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; }
.subcategory-list li.included { color: var(--text); }
input[type="search"] { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; }

/* Roles, the group page, Review and History. */
.group-list a.person-row { text-decoration: none; }
.level-card .level-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.level-card > summary { cursor: pointer; list-style: none; min-height: var(--touch); }
.level-card > summary::-webkit-details-marker { display: none; }
.level-card.focused { border-color: var(--marine-blue); box-shadow: 0 0 0 2px #cde8ed; }
.holder-list { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.holder-list a { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--touch); color: var(--text); }
.gate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.gate-list li { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .7rem; }
.gate-list pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: .3rem 0 0; font-size: .8rem; background: #f6f7f8; padding: .4rem .5rem; border-radius: 4px; }
.review-card { padding: 0; }
.review-card .review-main { padding: .7rem .9rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.review-card .review-what { font-weight: 600; margin: 0; }
.review-card p { margin: .2rem 0 0; }
.history-list { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.history-row { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; padding: .45rem .8rem; }
.history-row + .history-row { border-top: 1px solid var(--border); }
.history-row .history-text { flex: 1 1 18rem; min-width: 0; }
.history-filters { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: flex-end; margin-bottom: .8rem; }
.history-filters input[type="date"] { padding: .35rem .4rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; min-height: 2.3rem; }
.explain-grid { display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr; gap: 1rem; align-items: start; }
.explain-level textarea { min-height: 4.5rem; }
.counter { text-align: right; margin: .1rem 0 0; }

/* Per-category groups (CategoryLevelsPanel.razor, Person.razor; Warehouse, decided 2026-11-09): each category with its
   one level as a chip the admin taps to change. Built from the house tokens; 44 px targets. */
.category-level-list { list-style: none; margin: 0 0 .6rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.category-level-list > li + li { border-top: 1px solid var(--border); }
.category-level-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: var(--touch); padding: 0 .6rem; }
.category-level-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.level-chip {
    flex: none; min-height: var(--touch); padding: 0 .8rem; border: 1px solid var(--marine-blue); border-radius: var(--radius-pill);
    background: var(--surface); color: var(--marine-blue); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.level-chip:hover, .level-chip:focus-visible, .level-chip.on { background: #eef6f8; }
.level-chip.on { border-width: 2px; }
.category-level-edit { padding: .2rem .6rem .6rem; }
.category-level-edit .level-options { margin-bottom: 0; }
.add-categories { min-height: var(--touch); margin-top: .2rem; }
.add-level-heading { margin-top: .8rem; }
.empty-level .link-btn { min-height: var(--touch); }
.view-switch { margin-bottom: .8rem; }
.view-switch button { min-height: var(--touch); padding: 0 1rem; }

/* Compare and match (Compare.razor, FR-19): each difference a 44 px checkbox row, both people's side said under it. */
.compare-actions { margin-top: .2rem; margin-bottom: .8rem; }
.compare-actions .btn { min-height: var(--touch); display: inline-flex; align-items: center; }
.compare-presets { margin: .2rem 0 .6rem; flex-wrap: wrap; }
.compare-presets button { min-height: var(--touch); padding: 0 .9rem; }
.compare-presets button:disabled { opacity: .5; cursor: default; }
.compare-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.compare-text { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; min-width: 0; overflow-wrap: anywhere; }
.compare-text .chip.beside { margin-left: 0; }
.compare-sides { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 1rem; }
.compare-apply { min-height: var(--touch); margin-top: .2rem; }

/* Clean up (CleanUpPanel.razor, FR-42): counts per kind, then the one main action. */
.cleanup-kinds { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cleanup-list { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.cleanup-list a { display: inline-flex; align-items: center; min-height: var(--touch); }
.cleanup details > summary { min-height: var(--touch); display: flex; align-items: center; cursor: pointer; }
.cleanup-apply { min-height: var(--touch); margin-top: .4rem; }

/* Help (business-app-help): cards grouped by the category SharePoint sends. Clips are recorded phone-size (390 x 844). */
.help-group { margin-top: 1.2rem; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.help-card { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.help-card h3 { margin: 0; }
.help-video { width: 100%; max-height: 70vh; border-radius: var(--radius); background: #0d1b2a; aspect-ratio: 390 / 844; }
.help-meta { margin: auto 0 0; display: flex; gap: .5rem; align-items: center; }
.help-meta .btn { min-height: var(--touch); }