/* ===========================================================================
   EGrow WorkOS — type scale and colour emphasis.

   The prototype sheets were written at a very compact scale: 8-11px for body
   text, status pills and column headings. Its newest sheet
   (product-delivery.css) had already moved to 11-12px; this file finishes that
   move across every module, and gives status and priority their own colour
   treatment so a list can be scanned without reading it.

   Loaded last, so the overrides here are deliberate.
   =========================================================================== */

:root {
    /* Status and priority palette. */
    --danger-ink: #c2352b;
    --danger-bg: #fdecea;
    --danger-line: #f6d4cf;

    --warn-ink: #a5620a;
    --warn-bg: #fff3e0;
    --warn-line: #f4dfbc;

    --success-ink: #0f7a4c;
    --success-bg: #e6f6ed;
    --success-line: #c9e8d7;

    --info-ink: #2c6cb0;
    --info-bg: #ebf3fc;
    --info-line: #cfe0f4;

    --quiet-ink: #61706a;
    --quiet-bg: #eff3f1;
    --quiet-line: #e1e8e4;
}

/* --- Record lists ------------------------------------------------------- */

.recordHead,
.tableHead,
.peopleHead,
.permissionHead,
.serviceHead,
.budgetHead {
    font-size: 10px;
    letter-spacing: .8px;
    font-weight: 700;
    color: #8b968f;
}

.record {
    padding: 15px 18px;
    position: relative;
}

/* A head and its rows must share horizontal padding or the flexible columns
   drift apart: the prototype gives .recordHead 16px while .record is 18px, so
   every column label sat 2px inside the content below it. The fixed columns
   lined up, which is why it read as "almost right" rather than broken.
   Import is the exception — its rows (.importColumn) keep the prototype's
   16px, so its head is already aligned and must stay where it is. */
.recordList:not(.importColumns) .recordHead {
    padding-left: 18px;
    padding-right: 18px;
}

.record p b,
.record p small {
    font-size: 14px;
    font-weight: 650;
}

.record p small {
    font-size: 11.5px;
    font-weight: 400;
    margin-top: 5px;
    line-height: 1.4;
}

.recordIcon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 15px;
    color: var(--quiet-ink);
}

.recordIcon.st-stop { background: var(--danger-bg); color: var(--danger-ink); }
.recordIcon.st-attention { background: var(--warn-bg); color: var(--warn-ink); }
.recordIcon.st-active { background: var(--info-bg); color: var(--info-ink); }
.recordIcon.st-planned { background: #eeeefb; color: #55589e; }
.recordIcon.st-done { background: var(--success-bg); color: var(--success-ink); }
.recordIcon.st-idle { background: var(--quiet-bg); color: var(--quiet-ink); }

.owner {
    font-size: 12px;
}

.owner i {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 10px;
    box-sizing: content-box;
}

.miniProgress {
    font-size: 11.5px;
    font-weight: 600;
}

.miniProgress i {
    width: 70px;
    height: 6px;
}

.record > strong {
    font-size: 15px;
    color: #a9b4ae;
}

/* Only genuinely stuck work carries an accent bar. Marking every in-flight
   row would make the highlight meaningless - most rows are in flight. */
.record.danger { box-shadow: inset 3px 0 0 var(--danger-ink); }

/* A row lifts a little under the pointer, in light mode as it does in dark
   (Sanket, 2026-09-15), above its neighbours so the shadow is not cut off.
   The whole row opens its item (workos.js). */
.record:hover {
    z-index: 1;
    background: #f6faf8;
    box-shadow: 0 1px 7px rgba(22, 50, 38, .11);
}

.record.danger:hover {
    box-shadow: inset 3px 0 0 var(--danger-ink), 0 1px 7px rgba(22, 50, 38, .11);
}

/* The wider columns only apply where the full table is shown; below 900px the
   prototype collapses the row to two columns and hides these cells. */
@media (min-width: 901px) {
    /* Scoped away from .importColumns: this rule carries !important to beat the
       prototype sheet, which also meant it beat `.importColumns .recordHead`
       and gave the import page's three-column head the record list's five. */
    .recordList:not(.importColumns) .recordHead,
    .record {
        grid-template-columns: minmax(320px, 2fr) minmax(150px, 1fr) 106px 92px 78px !important;
    }
}

/* --- Row buttons ---------------------------------------------------------
   These dashboard rows are <button>s, and neither the prototype sheets nor the
   browser default leaves them looking like table rows: without this they draw
   a grey box, a border and centred text. */

.attentionRow,
.projectRow,
.notification {
    border: 0;
    background: #fff;
    text-align: left;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
}

/* Attention flags follow the same status palette as the record lists. */
.flag.st-stop { background: var(--danger-bg); color: var(--danger-ink); }
.flag.st-attention { background: var(--warn-bg); color: var(--warn-ink); }
.flag.st-active { background: var(--info-bg); color: var(--info-ink); }
.flag.st-planned { background: #eeeefb; color: #55589e; }
.flag.st-done { background: var(--success-bg); color: var(--success-ink); }
.flag.st-idle { background: var(--quiet-bg); color: var(--quiet-ink); }

.projectIcon.st-stop { background: var(--danger-bg); color: var(--danger-ink); }
.projectIcon.st-attention { background: var(--warn-bg); color: var(--warn-ink); }
.projectIcon.st-active { background: var(--info-bg); color: var(--info-ink); }
.projectIcon.st-planned { background: #eeeefb; color: #55589e; }
.projectIcon.st-done { background: var(--success-bg); color: var(--success-ink); }
.projectIcon.st-idle { background: var(--quiet-bg); color: var(--quiet-ink); }

/* --- Status pills ------------------------------------------------------- */

.pill {
    --chip-ink: var(--quiet-ink);
    --chip-bg: var(--quiet-bg);
    --chip-line: var(--quiet-line);

    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-ink);
    border: 1px solid var(--chip-line);
}

.pill::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* The prototype's three tones stay as the fallback for anything that has not
   been given a finer status key yet. */
.pill.danger { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-line); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.pill.success { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-line); }

/* ... and the six-state palette is declared after it, so a row carrying both
   classes resolves to the finer colour. Real properties rather than the
   variables above, because module-layout.css already sets .pill.danger and
   friends at this same specificity. */
.pill.st-stop { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-line); }
.pill.st-attention { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.pill.st-active { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.pill.st-planned { background: #eeeefb; color: #55589e; border-color: #dcdcf5; }
.pill.st-done { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-line); }
.pill.st-idle { background: var(--quiet-bg); color: var(--quiet-ink); border-color: var(--quiet-line); }

/* The Service Desk status cell is an <em>; give it the same chip treatment. */
.serviceRow em.pill {
    font-style: normal;
    justify-self: start;
}

/* --- Priority chips ----------------------------------------------------- */

.priority {
    --chip-ink: var(--quiet-ink);
    --chip-bg: var(--quiet-bg);

    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 7px;
    background: var(--chip-bg);
    color: var(--chip-ink);
}

/* A short bar rather than the status dot, so the two columns stay distinct. */
.priority::before {
    content: "";
    flex: 0 0 3px;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: currentColor;
}

/* A heat ramp rather than six hues: priority cools off as it drops, which
   also keeps blue reserved for the "In Progress" status. */
.priority.urgent { --chip-ink: var(--danger-ink); --chip-bg: var(--danger-bg); }
.priority.high { --chip-ink: var(--warn-ink); --chip-bg: var(--warn-bg); }
.priority.medium { --chip-ink: #5b6b78; --chip-bg: #eef2f5; }
.priority.low { --chip-ink: #808c86; --chip-bg: #f3f6f4; }

/* No priority on the record: keep it as a quiet dash, not a chip. */
.priority.none {
    background: none;
    color: #a4afa9;
    padding-left: 0;
}

.priority.none::before {
    display: none;
}

/* --- Toolbar, tabs and filters ------------------------------------------ */

.tabs a,
.tabs button {
    font-size: 12px;
    padding: 9px 13px;
}

.tabs b {
    font-size: 11px;
    padding: 2px 7px;
}

.filter {
    font-size: 12px;
    padding: 10px 14px;
}

.viewSwitch a,
.viewSwitch button {
    font-size: 11px;
    padding: 8px 12px;
}

.viewSwitch > span {
    font-size: 9.5px;
}

.sectionStats small { font-size: 11px; }
.sectionStats b { font-size: 24px; }

/* --- Page header and notice --------------------------------------------- */

header p { font-size: 13px; }
.crumb { font-size: 10px; }

.notice {
    font-size: 13.5px;
    padding: 15px 17px;
}

.notice button,
.panelHead button {
    font-size: 12px;
}

.search input { font-size: 13px; }

/* --- Dashboard panels ---------------------------------------------------- */

.panelHead h3 { font-size: 15px; }
.panelHead p { font-size: 11px; }

.kpis article > span { font-size: 12px; }
.kpis h2 { font-size: 28px; }
.kpis small { font-size: 11px; }

.healthName b { font-size: 13px; }
.healthName small { font-size: 11px; }
.healthRow .percent { font-size: 12.5px; }
.healthRow em { font-size: 11px; width: 96px; }

.attentionRow small { font-size: 9.5px; }
.attentionRow b { font-size: 13px; }
.attentionRow p { font-size: 11px; }

.projectRow b { font-size: 13px; }
.projectRow small { font-size: 11px; }
.projectRow > strong { font-size: 11px; }

.activityRow > span { font-size: 10px; }
.activityRow p { font-size: 12px; }
.activityRow small { font-size: 10.5px; }

/* --- Teams, goals, automations ------------------------------------------ */

.teamRow { font-size: 12.5px; }
.teamRow p b { font-size: 13px; }
.teamRow p small { font-size: 11px; }

.goalCard > span { font-size: 10px; }
.goalCard h3 { font-size: 15px; }
.goalCard footer { font-size: 11px; }

.automationRow > div > b { font-size: 13.5px; }
.automationRow p { font-size: 11px; }
.automationRow p span { font-size: 9px; }
.automationRow em { font-size: 11px; }

/* --- Service desk and portfolio ------------------------------------------ */

.serviceRow { font-size: 12px; }

/* The action column was sized for 9px text; give it room for the larger label.
   Scoped so the narrow-screen two-column layout still applies below 900px. */
@media (min-width: 901px) {
    .serviceHead,
    .serviceRow {
        grid-template-columns: 1.5fr .9fr .78fr .6fr .85fr 96px;
    }
}
.serviceRow span small { font-size: 10.5px; }
.serviceRow span b { font-size: 13px; }
.deliveryTabs a,
.deliveryTabs button { font-size: 12px; }

.detailStats small { font-size: 10px; }
.detailStats b { font-size: 17px; }
.detailLine { font-size: 12.5px; }
.productCard p { font-size: 12.5px; }

/* --- People, roles and settings ------------------------------------------ */

/* The hero carries two buttons now: inviting someone, and the reporting
   lines. The second is outlined, so "Invite team member" stays the one the
   page is for. */
.heroActions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.accessHero .heroSecondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.accessHero .heroSecondary:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .7);
}

.accessHero h2 { font-size: 22px; }
.accessHero p { font-size: 12px; }
.accessHero small { font-size: 10px; }

.peopleAccessRow { font-size: 12px; }
.peopleAccessRow > div i { width: 30px; height: 30px; font-size: 11px; }
.peopleAccessRow select { font-size: 11px; padding: 8px; }
.peopleAccessRow em { font-size: 11px; }

.permissionRow b { font-size: 12px; }
.roleList > a b { font-size: 12px; }
.roleList > a small { font-size: 10.5px; }

.settingsTabs a { font-size: 12px; }
.settingList input { font-size: 13px; }
.settingList em { font-size: 10px; }
.settingList button { font-size: 11px; }

/* --- Drawer and forms ---------------------------------------------------- */

.drawerMeta { font-size: 12px; }
.detailGrid label { font-size: 10.5px; }
.detailGrid label > b { font-size: 13px; }
.description p,
.timeline p { font-size: 12.5px; line-height: 1.55; }

.createModal label { font-size: 11px; }
.createModal input,
.createModal select,
.createModal textarea,
.intakeForm input,
.intakeForm select,
.intakeForm textarea {
    font-size: 13px;
}

.fieldHelp { font-size: 11px; }

/* --- Sidebar ------------------------------------------------------------- */

.sidebar nav a,
.sidebar nav button,
.admin a,
.admin button { font-size: 13.5px; }

.sidebar nav p,
.admin p { font-size: 9.5px; }

.workspace b { font-size: 12.5px; }
.workspace small { font-size: 10.5px; }
.profile b { font-size: 12px; }
.profile small { font-size: 10px; }

/* --- Record detail page --------------------------------------------------- */

.recordPage {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr);
    gap: 16px;
    align-items: start;
}

.recordMain,
.recordFacts {
    padding: 24px 26px;
}

.recordPageHead {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.recordPageHead > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.recordPageHead h2 {
    font-size: 22px;
    margin: 8px 0 6px;
    letter-spacing: -.3px;
}

.recordPageHead p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

.recordPageChips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.recordFacts .settingsHead {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}

.recordFacts .settingsHead h2 {
    font-size: 15px;
    margin: 6px 0 0;
}

.recordFacts .detailLine:last-child {
    border-bottom: 0;
}

/* Going back is not the primary action on the page, so it stays a link. */
.backLink {
    display: inline-block;
    margin-top: 22px;
    font-size: 12px;
    font-weight: 700;
    color: #128755;
    text-decoration: none;
}

.backLink:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .recordPage { grid-template-columns: 1fr; }
}

/* --- Department filter ---------------------------------------------------- */

.filterForm {
    display: flex;
}

select.filter {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
    padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, #7d8a83 50%), linear-gradient(135deg, #7d8a83 50%, transparent 50%);
    background-position: calc(100% - 15px) 17px, calc(100% - 11px) 17px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

select.filter:focus {
    outline: 0;
    border-color: #159a61;
}

/* --- Product card progress bar -------------------------------------------
   The prototype sizes the product's mark tile with `.productCard>div>i`, and
   `.productBar` is itself a div inside the card - so that rule also caught the
   progress bar and rendered it as a 42px square. Two classes outrank it. */

.productCard .productBar > i {
    display: block;
    width: auto;
    height: 6px;
    border-radius: 9px;
    background: #edf2ef;
    overflow: hidden;
    place-items: initial;
}

.productCard .productBar > i > em {
    display: block;
    height: 100%;
    background: #16945d;
    font-size: 0;
}

/* --- Hidden configuration values ------------------------------------------
   A hidden module stays in the list, greyed back, so it is obvious that it
   still exists and can be brought back. */

.settingList > div.isHidden {
    background: #fbfcfb;
}

.settingList > div.isHidden input {
    color: #93a09a;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: #c6d0cb;
}

.settingList > div.isHidden .drag {
    opacity: .45;
}

.settingList em.muted {
    background: #eef1ef;
    color: #7d8a84;
}

.settingList button.ghost {
    color: #4f7f68;
    font-weight: 700;
}

.settingList button.ghost:hover {
    text-decoration: underline;
}

/* --- Inline edit affordances ---------------------------------------------- */

.editButton {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: #128755;
    cursor: pointer;
    font-family: inherit;
    align-self: flex-start;
}

.editButton:hover {
    background: #f1f8f4;
    border-color: #bfe3cf;
}

.productTitle .editButton {
    margin-left: 12px;
}

/* --- Sign-in extras ------------------------------------------------------- */

.authStack {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.authStack .authCard {
    width: 100%;
}

.authAlt {
    padding: 24px 32px;
}

.authDivider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #93a09a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.authDivider::before,
.authDivider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.authCard button.secondary {
    background: #fff;
    color: #128755;
    border: 1px solid #bfe3cf;
}

.authCard button.secondary:hover {
    background: #f1f8f4;
}

.authNote {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
}

.authNoteCard {
    text-align: center;
}

.authNoteCard .backLink {
    margin-top: 6px;
}

/* Error pages (errors/minimal.blade.php) sit on the sign-in page's ground. */
.errorCard .errorCode {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--muted);
}

.errorCard .backLink {
    margin-top: 4px;
}

/* The way back from a figure's work to the figure (WorkController::drill). */
.backLink.drillBack {
    margin: 0 0 12px;
}

.otpInput {
    text-align: center;
    font-size: 26px !important;
    letter-spacing: 12px;
    font-weight: 700;
    padding: 14px 12px !important;
}

/* --- Profile -------------------------------------------------------------- */

.profileLayout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.profileCard {
    padding: 24px 26px;
}

.profileCard .settingsHead {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

.profileCard .settingsHead h2 {
    font-size: 17px;
    margin: 6px 0 4px;
}

.profileCard label {
    display: block;
    color: #65736c;
    font-size: 11px;
    letter-spacing: .4px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.profileCard input {
    width: 100%;
    margin-top: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    background: #fbfcfb;
}

.profileCard input:focus {
    outline: 0;
    border-color: #159a61;
    background: #fff;
}

.profileCard .fieldHelp {
    display: block;
    margin-top: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.profileCard .detailLine {
    text-transform: none;
    letter-spacing: 0;
}

.profileCard .drawerAction {
    margin-top: 8px;
}

/* Pressed once and waiting on the server ("Changing…", "Signing in…"). */
.drawerAction:disabled,
.authCard button:disabled {
    opacity: .7;
    cursor: progress;
}

/* Sidebar identity block links to the profile. */
.profileLink {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

/* --- People: mobile column ------------------------------------------------ */

.phoneField {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    padding: 7px 8px;
    font-size: 12px;
    font-family: inherit;
    color: var(--ink);
}

.phoneField:hover:not(:disabled) {
    border-color: var(--line);
    background: #fbfcfb;
}

.phoneField:focus {
    outline: 0;
    border-color: #159a61;
    background: #fff;
}

.phoneField::placeholder {
    color: #a9b4ae;
}

/* --- Data import ---------------------------------------------------------- */

.importSteps {
    list-style: none;
    counter-reset: step;
    margin: 0 0 22px;
    padding: 0;
}

.importSteps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 22px 44px;
    border-left: 1px solid var(--line);
    margin-left: 14px;
}

.importSteps li:last-child {
    border-left-color: transparent;
    padding-bottom: 4px;
}

.importSteps li::before {
    content: counter(step);
    position: absolute;
    left: -14px;
    top: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e7f5ed;
    color: #118554;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
}

.importSteps b {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.importSteps p {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
    max-width: 62ch;
}

.importSteps .editButton {
    display: inline-block;
    text-decoration: none;
}

.importForm {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.importForm input[type="file"] {
    font-size: 12px;
    font-family: inherit;
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfb;
    flex: 1;
    min-width: 240px;
}

.importForm .drawerAction {
    width: auto;
    padding: 12px 20px;
    margin: 0;
}

.importErrors {
    background: #fdecea;
    border: 1px solid var(--danger-line);
    border-radius: 9px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.importErrors b {
    display: block;
    color: var(--danger-ink);
    font-size: 12.5px;
    margin-bottom: 8px;
}

.importErrors ul {
    margin: 0;
    padding-left: 18px;
}

.importErrors li {
    font-size: 12px;
    color: #7d3a34;
    line-height: 1.7;
}

.columnsHead {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: 4px;
}

.importColumns {
    border: 1px solid var(--line);
}

.importColumns .recordHead,
.importColumn {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) 110px minmax(180px, 1.2fr);
    gap: 14px;
    align-items: center;
}

.importColumn {
    padding: 12px 16px;
    border-bottom: 1px solid #eef2ef;
}

.importColumn:last-child {
    border-bottom: 0;
}

.importColumn b {
    font-size: 13px;
}

.importColumn small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
}

.importExample {
    font-size: 11.5px;
    color: #7b8983;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .importColumns .recordHead { display: none; }
    .importColumn { grid-template-columns: 1fr; }
}

/* --- Active filter chip --------------------------------------------------- */

.activeFilter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--info-bg);
    border: 1px solid var(--info-line);
    color: var(--info-ink);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    margin-bottom: 14px;
}

.activeFilter a {
    color: inherit;
    opacity: .75;
    text-decoration: underline;
    font-weight: 700;
}

/* --- Dashboard tiles link to what they count ------------------------------ */

.kpiCard {
    text-decoration: none;
    color: inherit;
    display: block;
}

.kpiCard article {
    height: 100%;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.kpiCard:hover article {
    border-color: #bfe3cf;
    box-shadow: 0 2px 10px rgba(20, 60, 40, .07);
}

a.healthRow {
    text-decoration: none;
    color: inherit;
}

a.healthRow:hover {
    background: #f6faf8;
}

/* --- Review handover ------------------------------------------------------ */

.reviewPanel {
    border: 1px solid var(--warn-line);
    background: #fffaf1;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 20px 0 4px;
}

.reviewPanel.mine {
    border-color: var(--info-line);
    background: var(--info-bg);
}

.reviewPanel.invite {
    border: 1px dashed var(--line);
    background: #fbfcfb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.reviewPanel.invite b {
    font-size: 13.5px;
}

.reviewPanel.invite p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.reviewHead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.reviewHead small {
    font-size: 11px;
    color: var(--muted);
}

.reviewWho {
    margin: 0;
    font-size: 13px;
}

.reviewNote {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: #5f6d66;
    line-height: 1.6;
}

.reviewNote.muted {
    color: #93a09a;
    font-style: italic;
}

.reviewActions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.approveButton {
    background: #128755;
    color: #fff;
    border: 1px solid #128755;
    border-radius: 7px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.approveButton:hover {
    background: #0f7549;
}

.reviewHistory em {
    color: var(--muted);
    font-style: normal;
}

/* The "To check" tile is a link into the review queue. */
.sectionStats a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    display: block;
}

.sectionStats a small,
.sectionStats a b {
    display: block;
}

.sectionStats a small {
    color: #85918b;
    font-size: 11px;
}

.sectionStats a b {
    font-size: 24px;
    margin-top: 6px;
}

.sectionStats a.hasWork {
    border-color: var(--info-line);
    background: var(--info-bg);
}

.sectionStats a.hasWork b {
    color: var(--info-ink);
}

/* --- Figures open the work they count (2026-09-14) ------------------------ */

.sectionStats a {
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sectionStats a:hover {
    border-color: #bfe3cf;
    box-shadow: 0 2px 10px rgba(20, 60, 40, .07);
}

/* The figure the list below is narrowed to. */
.sectionStats a.current {
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px var(--green);
}

.sectionStats .bad {
    color: var(--danger-ink);
}

.personStats a {
    display: block;
    margin: -4px -8px;
    padding: 4px 8px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.personStats a:hover {
    background: var(--quiet-bg);
}

.personStats a:hover b {
    color: var(--green);
}

a.hodBanner,
.serviceKpis a {
    color: inherit;
    text-decoration: none;
}

.serviceKpis a:hover {
    border-color: #bfe3cf;
}

/* Not the border: the banner's amber edge is part of it. */
a.hodBanner:hover {
    box-shadow: 0 2px 10px rgba(20, 60, 40, .09);
}

.serviceKpis a {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
}

:root[data-theme="dark"] .sectionStats a:hover,
:root[data-theme="dark"] .serviceKpis a:hover {
    border-color: #2f5c45;
}

:root[data-theme="dark"] .sectionStats a.current {
    border-color: #6fd7a3;
    box-shadow: inset 0 0 0 1px #6fd7a3;
}

/* --- People table: mobile column and row actions --------------------------
   Declared outside a media query so the column count always matches the
   markup; the base rule in access.css only knows about the older five. */

.peopleHead,
.peopleAccessRow {
    grid-template-columns: minmax(150px, 1.1fr) minmax(160px, 1.2fr) minmax(110px, .8fr) 150px 150px 90px 130px;
}

/*
 * The person cell carries the name and what is true of them: Super System
 * Owner, Tickets only, own access, and which work spaces they head. Held on
 * one line, the tags squeezed "Nisha Malla" into two; now they drop under the
 * name instead, and the name itself never breaks.
 */
.peopleAccessRow > div:first-child {
    flex-wrap: wrap;
    row-gap: 4px;
}

.peopleAccessRow > div:first-child > b {
    white-space: nowrap;
}

/* Someone not yet in a unit stands out until they are placed. */
.peopleAccessRow select.needsUnit {
    border-color: var(--warn-line);
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-weight: 700;
}

.pageErrors {
    margin-bottom: 14px;
    font-size: 12px;
}

.peopleActions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.peopleActions form {
    display: inline;
}

.linkButton {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: #128755;
    cursor: pointer;
}

.linkButton:hover {
    text-decoration: underline;
}

.linkButton.danger {
    color: #bd5149;
}

.peopleAccessRow em.left {
    color: #93a09a;
}

/* --- Wider work list: client, due date, stacked owners --------------------- */

/* The columns sit in a content area 324px narrower than the window (sidebar
   plus padding), so the breakpoint has to clear that, not just the viewport.
   Below it, client and due drop out and the row falls back to five columns. */
@media (min-width: 1200px) {
    .recordList.wide .recordHead,
    .recordList.wide .record {
        grid-template-columns: minmax(240px, 1.9fr) minmax(150px, 1fr) 118px 88px 110px 96px 78px !important;
    }
}

/* On a wide screen the title took most of the row while a client's name, the
   status and the priority were squeezed to the right edge (2026-09-14). */
@media (min-width: 1600px) {
    .recordList.wide .recordHead,
    .recordList.wide .record {
        grid-template-columns: minmax(300px, 1.5fr) minmax(190px, 1fr) 132px 92px 118px 100px 78px !important;
    }
}

.sortLink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

/* Headings are buttons; they need to look like it. */
.sortLink {
    padding: 4px 7px;
    margin: -4px -7px;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease;
}

.sortLink i {
    font-style: normal;
    opacity: .5;
    font-size: 10px;
}

.sortLink:hover {
    background: #eef3f0;
    color: #128755;
}

.sortLink:hover i {
    opacity: 1;
}

.sortLink.sorted {
    color: #128755;
    background: #e7f5ed;
}

.sortLink.sorted i {
    opacity: 1;
    font-weight: 700;
}

/* Stacked avatars for shared work. */
.owner i + i {
    margin-left: -10px;
    border: 2px solid #fff;
}

.owner i.more {
    background: #e4eae7;
    color: #63716a;
}

.owner em {
    font-style: normal;
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cellClient,
.cellDue {
    font-size: 12px;
    color: #6d7b74;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cellDue.overdue {
    color: var(--danger-ink);
    font-weight: 700;
}

@media (max-width: 1199px) {
    .recordList.wide .cellClient,
    .recordList.wide .cellDue,
    .recordList.wide .recordHead [data-col="client"],
    .recordList.wide .recordHead [data-col="due_date"] {
        display: none;
    }
}

/* Last resort: never clip a row, scroll it instead. */
.recordList {
    overflow-x: auto;
}

/* --- Tagging several people on one item ----------------------------------- */

.teamOptions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 12px;
    max-height: 168px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    margin-top: 7px;
    background: #fbfcfb;
}

.teamOptions label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    cursor: pointer;
}

.teamOptions input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* --- Anchors that are not "links" ------------------------------------------
   Rows, tiles and headings are anchors so they can be opened in a new tab, but
   they must not pick up the browser's blue/underline or purple :visited. */

.kpiCard,
.kpiCard:visited,
a.healthRow,
a.healthRow:visited,
.sortLink,
.sortLink:visited,
.tabs a,
.tabs a:visited,
.deliveryTabs a,
.deliveryTabs a:visited,
.accessTabs a,
.accessTabs a:visited,
.viewSwitch a,
.viewSwitch a:visited,
.settingsTabs a,
.settingsTabs a:visited,
.roleList > a,
.roleList > a:visited,
.intakeMenu a,
.intakeMenu a:visited,
.productCard,
.productCard:visited,
.sectionStats a,
.sectionStats a:visited,
.panelHead a,
.panelHead a:visited,
.notification,
.notification:visited {
    text-decoration: none;
}

.kpiCard, .kpiCard:visited,
a.healthRow, a.healthRow:visited,
.productCard, .productCard:visited,
.sectionStats a, .sectionStats a:visited,
.notification, .notification:visited {
    color: inherit;
}

/* The tile keeps its own colours for the value and the note. */
.kpiCard h2,
.kpiCard span,
.kpiCard small {
    color: inherit;
}

.kpiCard small.green { color: #128755; }
.kpiCard small.red { color: var(--danger-ink); }
.kpiCard small.amber { color: var(--warn-ink); }
.kpiCard small.blue { color: var(--info-ink); }
.kpiCard h2 { color: var(--ink); }
.kpiCard > article > span { color: #7b8982; }

a.healthRow .healthName b { color: var(--ink); }
a.healthRow .healthName small { color: #8c9892; }
a.healthRow .percent { color: var(--ink); }

/* --- Board view ------------------------------------------------------------ */

.boardView {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: flex-start;
}

.boardColumn {
    flex: 0 0 268px;
    background: #f1f5f3;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
}

.boardColumn > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.boardColumn > header span {
    font-size: 11px;
    font-weight: 700;
    color: #7b8983;
    background: #fff;
    border-radius: 999px;
    padding: 2px 9px;
}

.boardCards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.boardCard {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 12px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
}

.boardCard:hover {
    border-color: #bfe3cf;
}

.boardCard.danger {
    box-shadow: inset 3px 0 0 var(--danger-ink);
}

.boardCard b {
    display: block;
    font-size: 13px;
    line-height: 1.4;
}

.boardCard small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boardCard footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.boardCard footer .owner {
    flex: 1;
    display: flex;
}

.boardCard footer em {
    font-style: normal;
    font-size: 11px;
    color: var(--muted);
}

.boardCard footer em.overdue {
    color: var(--danger-ink);
    font-weight: 700;
}

.cardProgress {
    font-size: 11px;
    color: #128755;
}

.boardEmpty {
    margin: 0;
    padding: 14px 4px;
    font-size: 11.5px;
    color: #97a39d;
    text-align: center;
}

/* --- Calendar view --------------------------------------------------------- */

.calendarHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
}

.calendarHead b {
    font-size: 17px;
}

.calendarHead small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--muted);
}

.calendarNav {
    display: flex;
    gap: 6px;
}

.calendarNav a {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 7px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: #56645d;
    text-decoration: none;
}

.calendarNav a:hover {
    border-color: #bfe3cf;
    color: #128755;
}

.calendarGrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
}

.calendarDayName {
    padding: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    color: #8b968f;
    border-bottom: 1px solid var(--line);
    background: #fafcfb;
}

.calendarDay {
    min-height: 108px;
    border-right: 1px solid #eef2ef;
    border-bottom: 1px solid #eef2ef;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendarDay:nth-child(7n + 7) {
    border-right: 0;
}

.calendarDay.outside {
    background: #fbfcfb;
}

.calendarDay.outside .calendarDate {
    color: #b6c0ba;
}

.calendarDay.today .calendarDate {
    background: #128755;
    color: #fff;
}

.calendarDate {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    color: #63716a;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}

.calendarItem {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 10.5px;
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--quiet-bg);
    color: var(--quiet-ink);
}

.calendarItem.st-stop { background: var(--danger-bg); color: var(--danger-ink); }
.calendarItem.st-attention { background: var(--warn-bg); color: var(--warn-ink); }
.calendarItem.st-active { background: var(--info-bg); color: var(--info-ink); }
.calendarItem.st-planned { background: #eeeefb; color: #55589e; }
.calendarItem.st-done { background: var(--success-bg); color: var(--success-ink); }

.calendarMore {
    font-size: 10px;
    color: #93a09a;
    padding-left: 4px;
}

/* --- Timeline and Gantt ---------------------------------------------------- */

.timelinePanel {
    padding: 16px 18px;
}

.timelineScroll {
    overflow-x: auto;
    min-width: 0;
}

.timelineMonths {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    margin-bottom: 10px;
    margin-left: 200px;
    min-width: 520px;
}

.timelineMonths span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    color: #8b968f;
    border-left: 1px solid #eef2ef;
    padding-left: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.timelineGroup {
    font-size: 12px;
    font-weight: 700;
    color: #56645d;
    margin: 14px 0 6px;
}

.timelineGroup b {
    color: #93a09a;
    font-weight: 400;
}

.timelineRow {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 720px;
    padding: 3px 0;
}

.timelineLabel {
    flex: 0 0 200px;
    padding-right: 12px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timelineTrack {
    position: relative;
    flex: 1;
    height: 22px;
    background: linear-gradient(90deg, #f4f7f5 0 1px, transparent 1px) repeat-x;
    background-size: 8.33% 100%;
    border-radius: 5px;
}

.timelineBar {
    position: absolute;
    top: 3px;
    height: 16px;
    min-width: 8px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    padding: 0 6px;
    background: var(--quiet-bg);
    color: var(--quiet-ink);
    overflow: hidden;
}

.timelineBar.st-stop { background: var(--danger-bg); color: var(--danger-ink); }
.timelineBar.st-attention { background: var(--warn-bg); color: var(--warn-ink); }
.timelineBar.st-active { background: var(--info-bg); color: var(--info-ink); }
.timelineBar.st-planned { background: #eeeefb; color: #55589e; }
.timelineBar.st-done { background: var(--success-bg); color: var(--success-ink); }

.timelineBar em {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Items that cannot be placed ------------------------------------------- */

.undatedPanel {
    margin-top: 16px;
}

.undatedList {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px 18px 18px;
}

.undatedChip {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.undatedChip:hover {
    border-color: #bfe3cf;
}

.undatedChip.more {
    color: var(--muted);
    cursor: default;
}

/* A due date with no start date is a marker, not a bar. */
.timelineBar.point {
    width: 12px;
    min-width: 12px;
    border-radius: 50%;
    padding: 0;
    transform: translateX(-6px);
    justify-content: center;
}

.timelineBar.point em {
    display: none;
}

.timelineKey {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 200px;
    font-size: 10.5px;
    color: var(--muted);
}

.keyBar,
.keyPoint {
    display: inline-block;
    background: var(--info-bg);
    border: 1px solid var(--info-line);
}

.keyBar {
    width: 26px;
    height: 10px;
    border-radius: 4px;
}

.keyPoint {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 8px;
}

/* --- Who is working on a record -------------------------------------------- */

.teamSection {
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-top: 18px;
}

.teamSection h3 {
    font-size: 13px;
    margin: 0 0 12px;
}

.teamGroup {
    margin-bottom: 14px;
}

.teamGroup:last-child {
    margin-bottom: 0;
}

.teamGroup > small {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #93a09a;
    margin-bottom: 7px;
}

.teamGroup p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 6px;
    font-size: 12.5px;
}

.teamGroup p i {
    font-style: normal;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e9f4ee;
    color: #118353;
    font-size: 10px;
    font-weight: 700;
}

.teamGroup p em {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #118554;
    background: #e7f5ed;
    border-radius: 999px;
    padding: 2px 8px;
}

/* --- Brand ----------------------------------------------------------------
   The wordmark replaces the lettermark, with WORKOS beneath it in the same
   place the old subtitle sat. */

.brand {
    display: block;
    padding: 2px 8px 22px;
    text-decoration: none;
}

.brand img,
.brandMark {
    display: block;
    width: 132px;
    max-width: 100%;
    height: auto;
}

.brand > small {
    display: block;
    margin-top: 5px;
    color: #0d9a5c;
    font-size: 9px;
    letter-spacing: 3.4px;
    font-weight: bold;
}

/* The sign-in card centres its mark. */
.authCard .brand {
    padding: 0 0 20px;
}

/* --- Restricted work ------------------------------------------------------- */

.lock {
    margin-left: 6px;
    font-size: 10px;
    opacity: .65;
}

.sensitivityPill {
    background: #f3eefb;
    color: #6b4fa8;
    border: 1px solid #e2d8f4;
}

.sensitivityPill::before {
    display: none;
}

/* --- Project work and pickers ---------------------------------------------- */

.moduleAction {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.projectWork {
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-top: 18px;
}

.projectWorkHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.projectWorkHead h3 {
    font-size: 13px;
    margin: 0;
}

.projectWorkHead h3 b {
    color: #93a09a;
    font-weight: 400;
    margin-left: 4px;
}

.projectTask {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) 130px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eef2ef;
    text-decoration: none;
    color: inherit;
    font-size: 12.5px;
}

.projectTask:last-child {
    border-bottom: 0;
}

.projectTask:hover span {
    color: #128755;
}

.projectTask span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projectTask em {
    font-style: normal;
    font-size: 11.5px;
    color: var(--muted);
    text-align: right;
}

.projectEmpty {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

.createModal.wide {
    width: min(660px, 94vw);
}

.pickerSearch {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    margin-bottom: 10px;
}

.taskPicker {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 18px;
}

.taskPicker label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    cursor: pointer;
}

.taskPicker label:hover {
    background: #f6faf8;
}

.taskPicker input {
    width: auto;
    margin-top: 3px;
}

.taskPicker b {
    display: block;
    font-size: 12.5px;
    color: var(--ink);
}

.taskPicker small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
}

/* --- Projects listed against a product ------------------------------------- */

.productProject {
    text-decoration: none;
    color: inherit;
}

.productProject:hover span {
    color: #128755;
}

.productProject em {
    font-style: normal;
    font-size: 10.5px;
    color: var(--muted);
    background: var(--quiet-bg);
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
}

.portfolioEmpty {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}

/* --- Reference numbers ------------------------------------------------------ */

.ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: #7b8983;
    background: var(--quiet-bg);
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 7px;
    white-space: nowrap;
}

.drawerMeta .ref,
.recordPageHead .ref {
    font-size: 11px;
}

/* On a list row the number leads the title, so it sits on the 14px bold line
   rather than in the grey meta underneath. Keep it quiet enough that the title
   is still what the eye lands on. */
.record p b .ref {
    font-size: 11px;
    font-weight: 600;
    vertical-align: 1px;
    margin-right: 9px;
}

/* --- Activity detail -------------------------------------------------------- */

.activityWho {
    color: var(--muted);
    font-size: 11.5px;
}

.activityChanges {
    list-style: none;
    margin: 4px 0 14px 18px;
    padding: 0 0 0 12px;
    border-left: 2px solid #eef2ef;
}

.activityChanges li {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 11.5px;
    padding: 3px 0;
    color: var(--muted);
}

.activityChanges b {
    color: #56645d;
    font-size: 11px;
    min-width: 78px;
}

.activityChanges .from {
    text-decoration: line-through;
    text-decoration-color: #c6d0cb;
}

.activityChanges .to {
    color: var(--ink);
    font-weight: 600;
}

.activityChanges em {
    font-style: normal;
    color: #a9b4ae;
}

/* --- Board grouping --------------------------------------------------------- */

.boardGroupBy {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -4px 0 14px;
    flex-wrap: wrap;
}

.boardGroupBy > span {
    font-size: 9px;
    letter-spacing: 1px;
    color: #94a099;
    margin-right: 6px;
}

.boardGroupBy a {
    border: 1px solid var(--line);
    background: #fff;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 11px;
    color: #74817a;
    text-decoration: none;
}

.boardGroupBy a:hover {
    border-color: #bfe3cf;
    color: #128755;
}

.boardGroupBy a.selected {
    background: #e7f5ed;
    color: #108352;
    border-color: #bfe3cf;
    font-weight: 700;
}

.columnName {
    font-size: 12.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Global search ---------------------------------------------------------- */

.searchEmpty {
    padding: 30px 26px;
}

.searchEmpty h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.searchEmpty p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 68ch;
}

.searchCount {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--muted);
}

.searchGroup {
    margin-bottom: 14px;
    overflow: hidden;
}

.searchGroup .record {
    grid-template-columns: minmax(0, 1fr) 132px 24px !important;
}

.searchRow {
    display: block;
    padding: 12px 18px;
    border-bottom: 1px solid #eef2ef;
    text-decoration: none;
    color: inherit;
}

.searchRow:last-child {
    border-bottom: 0;
}

.searchRow:hover {
    background: #f6faf8;
}

.searchRow b {
    display: block;
    font-size: 13px;
}

.searchRow span {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--muted);
}

/* The keyboard hint is a real button that focuses the box. */
.shortcutHint {
    border: 1px solid #e3e7e5;
    background: #f4f6f5;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 9px;
    font-family: inherit;
    color: #74817a;
    cursor: pointer;
    white-space: nowrap;
}

.shortcutHint:hover {
    border-color: #bfe3cf;
    color: #128755;
}

/* The badge shows a count instead of a permanent dot. */
.iconBtn i {
    width: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    right: 2px;
    top: -5px;
}

.drawerEmpty {
    padding: 24px 4px;
}

.drawerEmpty b {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
}

.drawerEmpty p {
    margin: 0 0 18px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.7;
}

/* --- Automations ------------------------------------------------------------ */

.automationTopActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.automationTop small {
    line-height: 1.5;
}

.ghostButton {
    border: 1px solid #b7d9c6;
    background: transparent;
    color: #0f7a4c;
    border-radius: 7px;
    padding: 9px 13px;
    font-weight: 700;
    cursor: pointer;
}

/* The prototype's row assumed a fixed four-column rule with no controls; these
   rows now carry a run count and Edit/Delete. */
.automationRow {
    grid-template-columns: 42px 1fr 130px auto;
    gap: 16px;
}

.automationRow > div > b {
    font-size: 13.5px;
}

.automationRow p {
    font-size: 11.5px;
    line-height: 1.5;
}

.automationRow p span {
    display: inline-block;
    min-width: 34px;
    font-size: 9px;
}

.automationRow em {
    font-size: 11px;
    text-align: right;
}

.automationRow em small {
    display: block;
    color: #8b968f;
    font-size: 10px;
    margin-top: 4px;
}

.automationWarn {
    color: var(--warn-ink);
    margin-top: 7px !important;
}

.automationRowActions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Each half of the rule gets its own block so WHEN and THEN stay legible as
   the fields under them change. */
.ruleBlock {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 14px 16px 18px;
    margin-top: 16px;
    background: #fbfdfc;
}

.ruleBlock .eyebrow {
    color: #0f7a4c;
}

.ruleBlock label {
    margin: 11px 0 0;
}

.ruleField {
    margin: 0;
}

:root[data-theme="dark"] .ruleBlock {
    background: var(--surface-2);
    border-color: var(--line);
}

:root[data-theme="dark"] .ghostButton {
    border-color: #2f5f47;
    color: #55d197;
}

/* A short explanation above a form's fields, where the modal is asking for a
   decision rather than just collecting values. */
.modalNote {
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0 0 4px;
}

.modalNote b {
    color: var(--ink);
}

/* --- People who have left --------------------------------------------------- */

.peopleFilter {
    margin-bottom: 12px;
}

/* Their block is set apart from the working team rather than mixed into it. */
.departedTable {
    margin-top: 18px;
    background: #fafbfa;
    border-style: dashed;
}

.departedHead {
    padding: 15px 18px 13px;
    border-bottom: 1px solid var(--line);
}

.departedHead b {
    display: block;
    font-size: 13px;
    color: #6d7a74;
}

.departedHead small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 5px;
    max-width: 620px;
}

/*
 * Dissociated, not disabled: the whole row recedes — name, avatar, email and
 * controls together — so it reads as somebody who used to be here rather than
 * a row that failed to load. Restore stays legible, since it is the one thing
 * you might still want to do.
 */
.peopleAccessRow.departed {
    opacity: .55;
    filter: grayscale(.65);
}

.peopleAccessRow.departed:hover,
.peopleAccessRow.departed:focus-within {
    opacity: 1;
    filter: none;
}

/* No strikethrough: a line through a person's name reads as something other
   than "they moved on". The fade does the work. */
.peopleAccessRow.departed > div:first-child b {
    font-weight: 500;
    color: var(--muted);
}

.peopleAccessRow.departed i {
    background: #eceeed;
    color: #97a29d;
}

.peopleAccessRow.departed .phoneField,
.peopleAccessRow.departed select {
    color: var(--muted);
    background: transparent;
}

.peopleAccessRow.departed .linkButton {
    color: var(--muted);
}

.peopleAccessRow.departed:hover .linkButton {
    color: var(--green);
}

/* .panel in dark.css is the same specificity and loads later, so this needs
   the extra class to keep the block set apart from the working team. */
:root[data-theme="dark"] .panel.departedTable {
    background: var(--surface-2);
    border-color: #33423d;
}

:root[data-theme="dark"] .departedHead b {
    color: #a9b8b2;
}

:root[data-theme="dark"] .peopleAccessRow.departed i {
    background: var(--surface-3);
    color: #8b9a94;
}

/* --- Passwords and erasing --------------------------------------------------- */

.passwordReset {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 13px 15px;
    margin-top: 18px;
    background: #fbfdfc;
}

.passwordReset div {
    flex: 1;
}

.passwordReset b {
    display: block;
    font-size: 12px;
}

.passwordReset small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 5px;
}

.passwordReset .ghostButton {
    flex: 0 0 auto;
    font-size: 11px;
    white-space: nowrap;
}

/* An irreversible action should not look like Save. */
.modalActions button.destructive {
    background: #c2352b;
    border-color: #c2352b;
    color: #fff;
}

:root[data-theme="dark"] .passwordReset {
    background: var(--surface-2);
}

/* --- Sidebar scrolling -------------------------------------------------------- */

/*
 * With nineteen modules the sidebar is taller than a laptop window, and since
 * Administration and the profile are pushed to the bottom with margin-top:auto,
 * they fell below the fold — you could only reach Sign out by realising a fixed
 * sidebar could be scrolled. Only the module list scrolls now; who you are and
 * the way out stay put.
 */
.sidebar {
    overflow: hidden;
}

.sidebar nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Room for the fade, so the last item is not clipped mid-row. */
    padding-bottom: 4px;
    /* The scrollbar lives in the sidebar's right margin, not over the rows.
       A Mac draws its scrollbar on top of the content and widens it under
       the pointer, which hid every count and fold arrow down the right edge
       (Sanket, 2026-09-25). Pulled out by the sidebar's own padding and
       padded back in, the rows keep their width either way. */
    margin-right: -12px;
    padding-right: 12px;
    scrollbar-width: thin;
}

.sidebar .admin {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* --- Signing out ------------------------------------------------------------- */

/*
 * This was a "⋯" with a tooltip. Three dots mean "more options" everywhere
 * else in software, so the only way out of the app was a guess — and at 760px
 * `.sidebar button:not(.active)` in globals.css hid it outright, leaving no
 * way to sign out on a phone at all. Hence the explicit override below.
 */
.signOutRow {
    margin: 10px -2px 0;
    padding: 0 4px;
}

.signOutRow button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 7px;
    padding: 9px 11px;
    color: #66736d;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.signOutRow button:hover {
    border-color: #e6bdb8;
    background: #fdf6f5;
    color: #c2352b;
}

.signOutRow svg {
    flex: 0 0 auto;
}

:root[data-theme="dark"] .signOutRow button {
    background: var(--surface-2);
    color: #9aaaa4;
}

:root[data-theme="dark"] .signOutRow button:hover {
    background: #3a201e;
    border-color: #57302c;
    color: #ff8a80;
}

/* --- Showing a password ------------------------------------------------------ */

/*
 * Typing a password you cannot see, into a form you may be trying three
 * different passwords against, is a guessing game. The eye is off by default
 * and never persists.
 */
.revealField {
    position: relative;
    display: block;
}

.revealField input {
    padding-right: 44px !important;
}

.revealToggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #8b968f;
    cursor: pointer;
    padding: 0;
}

.revealToggle:hover {
    color: var(--green);
    background: rgba(21, 154, 97, .08);
}

/* Crossed out while hidden; plain eye once the password is showing. */
.revealToggle .revealShut {
    display: none;
}

.revealToggle[aria-pressed="true"] .revealShut {
    display: block;
}

:root[data-theme="dark"] .revealToggle {
    color: #8fa09a;
}

/*
 * The sign-in card styles its fields as `input[type="password"]`, which stops
 * matching the moment the eye flips the field to text — so restate the look
 * here, type-agnostically. `.authCard button` is the full-width green Sign in
 * button and outranks a bare .revealToggle, hence the longer selector.
 */
.authCard .revealField {
    margin-top: 6px;
}

.authCard .revealField input,
.authCard .revealField input[type="text"] {
    width: 100%;
    margin-top: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 44px 11px 12px;
    font-size: 13px;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    background: transparent;
}

.authCard .revealField input:focus {
    outline: 0;
    border-color: #159a61;
}

.authCard .revealField .revealToggle {
    width: 30px;
    margin-top: 0;
    padding: 0;
    background: none;
    color: #8b968f;
    font-size: inherit;
    font-weight: normal;
}

.authCard .revealField .revealToggle:hover {
    color: var(--green);
    background: rgba(21, 154, 97, .08);
}

/* --- Ranked access categories -------------------------------------------------- */

.permissionNote {
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 14px 0 4px;
    max-width: 760px;
}

.permissionNote em {
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
}

.permissionModule b {
    display: block;
    font-size: 12px;
}

.permissionModule select {
    width: 100%;
    max-width: 210px;
    margin-top: 6px;
    border: 1px solid var(--line);
    background: transparent;
    border-radius: 6px;
    padding: 5px 7px;
    font: inherit;
    font-size: 10.5px;
    color: var(--muted);
}

.permissionModule select:hover {
    border-color: var(--green);
    color: var(--green);
}

/* --- Subtasks, files and remarks ---------------------------------------------- */

.detailBlock {
    border-top: 1px solid var(--line);
    margin-top: 24px;
    padding-top: 20px;
}

.detailBlock h3 {
    font-size: 13px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.countChip {
    background: var(--quiet-bg);
    color: var(--muted);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
}

.detailEmpty {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 14px;
}

.parentLink {
    font-size: 11.5px !important;
    margin-top: 6px !important;
}

.completeButton {
    border: 1px solid #b7d9c6;
    background: #e7f5ed;
    color: #0f7a4c;
    border-radius: 7px;
    padding: 7px 13px;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
}

.completeButton:hover {
    background: #158b59;
    border-color: #158b59;
    color: #fff;
}

/* --- Subtask rows -------------------------------------------------------------- */

.subtaskRow,
.fileRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--line);
}

.subtaskRow > div,
.fileRow > div {
    flex: 1;
    min-width: 0;
}

.subtaskRow b,
.fileRow b {
    font-size: 12.5px;
}

.subtaskRow a,
.fileRow a {
    color: var(--ink);
    text-decoration: none;
}

.subtaskRow a:hover b,
.fileRow a:hover b {
    color: var(--green);
}

.subtaskRow small,
.fileRow small {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 4px;
}

/* Finished pieces recede, so the open ones are what you read. */
.subtaskRow.done b {
    color: var(--muted);
    font-weight: 500;
}

.subtaskForm,
.uploadForm {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.subtaskForm input[name="title"] {
    flex: 1 1 240px;
}

.subtaskForm input,
.subtaskForm select,
.uploadForm input {
    border: 1px solid var(--line);
    background: var(--quiet-bg);
    border-radius: 7px;
    padding: 9px 11px;
    font: inherit;
    font-size: 12px;
    color: var(--ink);
}

.uploadForm input[type="file"] {
    flex: 1 1 260px;
}

.subtaskForm button,
.uploadForm button,
.commentForm button {
    border: 0;
    background: var(--green);
    color: #fff;
    border-radius: 7px;
    padding: 0 18px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.fileKind {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 34px;
    border-radius: 6px;
    background: var(--info-bg);
    color: var(--info-ink);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* --- Remarks -------------------------------------------------------------------- */

.commentForm {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.commentForm textarea {
    flex: 1;
    border: 1px solid var(--line);
    background: var(--quiet-bg);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink);
    resize: vertical;
}

.commentForm button {
    padding: 11px 18px;
}

.commentRow {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.commentRow .person {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.commentRow > div {
    flex: 1;
}

.commentRow small {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    color: var(--muted);
}

.commentRow small b {
    color: var(--ink);
    font-size: 11.5px;
}

.commentRow p {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

:root[data-theme="dark"] .completeButton {
    background: #17402c;
    border-color: #235c3e;
    color: #55d197;
}

:root[data-theme="dark"] .subtaskForm input,
:root[data-theme="dark"] .subtaskForm select,
:root[data-theme="dark"] .uploadForm input,
:root[data-theme="dark"] .commentForm textarea {
    background: var(--surface-2);
}

/* --- Who signs work off --------------------------------------------------------- */

.approverToggle {
    display: flex !important;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 13px 15px;
    margin-top: 18px !important;
    background: #fbfdfc;
}

.approverToggle input[type="checkbox"] {
    width: auto !important;
    margin: 2px 0 0 !important;
    flex: 0 0 auto;
}

.approverToggle b {
    display: block;
    font-size: 12px;
}

.approverToggle small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 5px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

:root[data-theme="dark"] .approverToggle {
    background: var(--surface-2);
}

/* --- The sign-off queue --------------------------------------------------------- */

.signOffHead {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--line);
}

.signOffHead b {
    display: block;
    font-size: 13px;
}

.signOffHead small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 5px;
    max-width: 620px;
}

.signOffRow {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}

.signOffRow > div {
    flex: 1;
    min-width: 0;
}

.signOffRow a {
    text-decoration: none;
    color: var(--ink);
}

.signOffRow a:hover b {
    color: var(--green);
}

.signOffRow b {
    font-size: 13px;
}

.signOffRow small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

/* --- Tickets: who raised them, and what they say (2026-09-14) ------------- */

@media (min-width: 901px) {
    .serviceTable.withRaiser .serviceHead,
    .serviceTable.withRaiser .serviceRow {
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.15fr) .8fr .78fr .6fr .8fr 96px;
    }
}

.serviceTable.withRaiser .serviceRow {
    align-items: start;
}

.serviceItem {
    min-width: 0;
    gap: 3px;
}

.ticketFacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 2px;
}

.ticketFacts em {
    font-style: normal;
}

.ticketFacts .priority {
    font-size: 10.5px;
    padding: 3px 8px;
}

.ticketType {
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
}

/* Two lines of what was said; the whole of it is in the modal. */
.serviceRow .ticketRemarks {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.ticketRaiser {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}

.ticketRaiser > i {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    background: var(--person-bg, #e9f4ee);
    color: var(--person-ink, #118353);
}

.ticketRaiser > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.serviceRow .ticketRaiser b {
    font-size: 12.5px;
}

.serviceRow .ticketRaiser small {
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}

.serviceRow .ticketRaiser .raiserLeft {
    display: inline;
    margin: 0;
    font-weight: 400;
}

.ticketRaiser.unknown b {
    color: var(--muted);
}

/* The modal: the ticket first, the assignment after it. */
.ticketBrief {
    margin: -8px 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--quiet-bg);
}

.ticketBriefTitle {
    display: block;
    font-size: 15px;
    line-height: 1.35;
}

.ticketBrief .ticketFacts {
    margin: 8px 0 10px;
}

.ticketBrief .ticketFacts .pill {
    font-size: 10.5px;
    padding: 3px 9px;
}

.ticketBriefRemarks {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--ink);
}

.ticketBriefFacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.ticketBriefFacts dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
}

.ticketBriefFacts dd {
    margin: 3px 0 0;
    font-size: 12.5px;
    font-weight: 700;
}

.ticketBriefFacts dd small {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}

.ticketBriefFiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

@media (max-width: 600px) {
    .ticketBriefFacts {
        grid-template-columns: 1fr;
    }
}

:root[data-theme="dark"] .ticketBrief {
    background: var(--surface-2);
}

/* Away from the buttons that carry on: a slip should not delete. */
.modalActions .deleteTicket {
    margin-right: auto;
}

/* --- Today, and one person's workload -------------------------------------------- */

.todayStats {
    margin-bottom: 16px;
}

.todayRow {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

/* Nobody on anything today recedes, so the busy rows are what you read. */
.todayRow.idle {
    opacity: .62;
}

.todayRow.unowned .person {
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.todayWho {
    flex: 0 0 190px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}

.todayWho:hover b {
    color: var(--green);
}

.todayWho b {
    display: block;
    font-size: 12.5px;
}

.todayWho small {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 3px;
}

.todayWork {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 2px;
}

.todayChip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    border: 1px solid var(--line);
    background: var(--quiet-bg);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11.5px;
    color: var(--ink);
    text-decoration: none;
}

.todayChip:hover {
    border-color: var(--green);
    color: var(--green);
}

.todayChip i {
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9.5px;
    color: var(--muted);
}

.todayNothing {
    font-size: 11.5px;
    color: var(--muted);
    padding-top: 4px;
}

.todayCounts {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    font-size: 11px;
}

.todayCounts .bad {
    color: var(--danger-ink);
}

.todayCounts .good {
    color: var(--success-ink);
}

/* --- One person ------------------------------------------------------------------ */

.personHead {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
}

.person.large {
    width: 52px;
    height: 52px;
    font-size: 16px;
}

.personHead h2 {
    font-size: 20px;
    margin: 0;
}

.personHead p {
    font-size: 11.5px;
    color: var(--muted);
    margin: 6px 0 0;
}

.personHead > div:nth-child(2) {
    flex: 1;
}

.personStats {
    display: flex;
    gap: 22px;
}

.personStats small {
    display: block;
    font-size: 9.5px;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--muted);
}

.personStats b {
    display: block;
    font-size: 21px;
    margin-top: 4px;
}

.personStats .bad {
    color: var(--danger-ink);
}

.personBlock {
    margin-bottom: 14px;
}

.personWorkRow {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
}

.personWorkRow:hover {
    background: var(--quiet-bg);
}

.personWorkRow > div {
    flex: 1;
    min-width: 0;
}

.personWorkRow b {
    font-size: 12.5px;
}

.personWorkRow small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

.teamPerson {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--ink);
}

.teamPerson:hover b {
    color: var(--green);
}

@media (max-width: 900px) {
    .todayRow {
        flex-wrap: wrap;
    }

    .todayWho {
        flex-basis: 100%;
    }

    .todayCounts {
        flex-basis: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

/* --- Administration, collapsible ------------------------------------------------ */

/*
 * Administration was pinned open at the foot of the sidebar, so the workspace
 * list had to scroll inside whatever was left — the reason the modules
 * appeared to shift around. It folds away now, and remembers.
 */
.admin > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    padding: 4px 10px 8px;
    color: #99a49f;
    font-size: 9px;
    letter-spacing: 1.3px;
    font-weight: bold;
    user-select: none;
}

/* Safari draws its own triangle without this. */
.admin > summary::-webkit-details-marker {
    display: none;
}

.admin > summary:hover {
    color: var(--green);
}

.admin > summary span {
    flex: 1;
}

.adminChevron {
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.admin[open] > summary .adminChevron {
    transform: rotate(180deg);
}

/* The heading is the summary now; the old paragraph rule would double it up. */
.admin > p {
    display: none;
}

/*
 * `.admin a { display: flex }` in workos.css beats the UA rule that hides a
 * closed <details>'s contents, so the section folded in name only. Same trap
 * as [hidden] elsewhere in this sheet.
 */
.admin:not([open]) > a {
    display: none !important;
}

:root[data-theme="dark"] .admin > summary {
    color: #7f8d87;
}

/* ===========================================================================
   Saturated status colours.

   The palette above is a tint set — pale washes with dark ink — which reads
   well in a dense list where a solid block every row would shout. It fails
   wherever the colour IS the information and there is no text beside it: a
   Gantt bar was #fff3e0 on a white panel, which is to say invisible.

   So: the tints stay for text-bearing chips, and these solid tones take over
   wherever the shape alone has to carry the meaning. Hues follow the colour
   chart Sanket supplied — red stop, orange attention, blue active, violet
   planned, green done.
   =========================================================================== */

:root {
    --stop-solid: #e01f2d;
    --attention-solid: #f5871f;
    --active-solid: #2f86d0;
    --planned-solid: #7a4da0;
    --done-solid: #00a65a;
    --idle-solid: #98a5a0;

    /* Ink deepened so the tinted chips hold their own against the solids. */
    --danger-ink: #c01722;
    --warn-ink: #b3610a;
    --success-ink: #067a45;
    --info-ink: #1f6cb0;
}

:root[data-theme="dark"] {
    --stop-solid: #ff5a5f;
    --attention-solid: #ffa63d;
    --active-solid: #4ea3ea;
    --planned-solid: #a678cd;
    --done-solid: #2ecc7a;
    --idle-solid: #7d8c86;
}

/* --- The Gantt and timeline ---------------------------------------------- */

/* Solid, because a bar has no text to fall back on. */
.timelineBar.st-stop { background: var(--stop-solid); color: #fff; }
.timelineBar.st-attention { background: var(--attention-solid); color: #fff; }
.timelineBar.st-active { background: var(--active-solid); color: #fff; }
.timelineBar.st-planned { background: var(--planned-solid); color: #fff; }
.timelineBar.st-done { background: var(--done-solid); color: #fff; }
.timelineBar.st-idle { background: var(--idle-solid); color: #fff; }

.timelineBar {
    border: 0;
    box-shadow: 0 1px 2px rgba(16, 32, 25, .16);
}

.timelineBar em {
    color: #fff;
    opacity: .92;
}

.timelineBar.point {
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(16, 32, 25, .18);
}

/* --- Notifications -------------------------------------------------------- */

/* The flag is a coloured square with a glyph in it and nothing else to read. */
.flag.st-stop,
.notification .flag.st-stop { background: var(--stop-solid); color: #fff; }
.flag.st-attention,
.notification .flag.st-attention { background: var(--attention-solid); color: #fff; }
.flag.st-active,
.notification .flag.st-active { background: var(--active-solid); color: #fff; }
.flag.st-planned,
.notification .flag.st-planned { background: var(--planned-solid); color: #fff; }
.flag.st-done,
.notification .flag.st-done { background: var(--done-solid); color: #fff; }
.flag.st-idle,
.notification .flag.st-idle { background: var(--idle-solid); color: #fff; }

/* The prototype's own tones, used by the alert feed. */
.flag.amber { background: var(--attention-solid); color: #fff; }
.flag.blue { background: var(--active-solid); color: #fff; }

/* dark.css greys every .flag; these carry meaning, so they keep their colour. */
:root[data-theme="dark"] .flag.st-stop { background: var(--stop-solid); color: #14100f; }
:root[data-theme="dark"] .flag.st-attention { background: var(--attention-solid); color: #1a1206; }
:root[data-theme="dark"] .flag.st-active { background: var(--active-solid); color: #0b1720; }
:root[data-theme="dark"] .flag.st-planned { background: var(--planned-solid); color: #150e1c; }
:root[data-theme="dark"] .flag.st-done { background: var(--done-solid); color: #06180f; }
:root[data-theme="dark"] .flag.amber { background: var(--attention-solid); color: #1a1206; }
:root[data-theme="dark"] .flag.blue { background: var(--active-solid); color: #0b1720; }

/* --- Status chips --------------------------------------------------------- */

/*
 * Chips keep their tint — a list of solid blocks is unreadable — but gain a
 * solid dot, so the colour registers even at a glance and even for someone who
 * reads the two ambers as the same wash.
 */
.pill.st-stop::before,
.pill.st-attention::before,
.pill.st-active::before,
.pill.st-planned::before,
.pill.st-done::before,
.pill.st-idle::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 1px;
}

.pill.st-stop::before { background: var(--stop-solid); }
.pill.st-attention::before { background: var(--attention-solid); }
.pill.st-active::before { background: var(--active-solid); }
.pill.st-planned::before { background: var(--planned-solid); }
.pill.st-done::before { background: var(--done-solid); }
.pill.st-idle::before { background: var(--idle-solid); }

/* --- Tabs ----------------------------------------------------------------- */

/* A selected tab was a pale green wash; it now reads as chosen. */
.tabs a.selected,
.deliveryTabs a.selected,
.accessTabs a.selected {
    background: var(--done-solid);
    color: #fff;
    border-color: var(--done-solid);
}

.tabs a.selected b,
.deliveryTabs a.selected b,
.accessTabs a.selected b {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

/* A stage with nothing in it keeps its nought, quietly: the figures that
   matter should be the ones that catch the eye. */
.tabs a b.none {
    opacity: .45;
}

/* --- The notifications page ----------------------------------------------
   The drawer is what is new; this is the record of everything still kept.
   It borrows the drawer's own .notification row so the two read the same. */

.keepForm {
    display: flex;
    align-items: center;
    gap: 8px;
}

.keepForm label {
    font-size: 11px;
    color: var(--quiet-ink);
    white-space: nowrap;
}

.keepNote {
    gap: 8px;
}

.alertPage {
    padding: 6px 0;
    overflow: hidden;
}

.alertPage .notification {
    border-radius: 0;
}

.alertPage .notification + .notification {
    border-top: 1px solid var(--line);
}

.alertPageRead {
    display: flex;
    justify-content: flex-end;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--line);
}

.viewSwitch button.selected {
    background: var(--done-solid);
    border-color: var(--done-solid);
    color: #fff;
}

/*
 * dark.css restyles these selected tabs and loads after this sheet, so the
 * class is doubled to outrank it rather than reaching for !important.
 */
:root[data-theme="dark"] .tabs a.selected.selected,
:root[data-theme="dark"] .deliveryTabs a.selected.selected,
:root[data-theme="dark"] .accessTabs a.selected.selected,
:root[data-theme="dark"] .viewSwitch button.selected.selected {
    background: var(--done-solid);
    border-color: var(--done-solid);
    color: #06180f;
}

:root[data-theme="dark"] .tabs a.selected.selected b,
:root[data-theme="dark"] .deliveryTabs a.selected.selected b,
:root[data-theme="dark"] .accessTabs a.selected.selected b {
    background: rgba(0, 0, 0, .22);
    color: #06180f;
}

/* --- Board columns -------------------------------------------------------- */

/* The column header carries the status, so give it the solid edge. */
.boardColumn.st-stop > header { border-top: 3px solid var(--stop-solid); }
.boardColumn.st-attention > header { border-top: 3px solid var(--attention-solid); }
.boardColumn.st-active > header { border-top: 3px solid var(--active-solid); }
.boardColumn.st-planned > header { border-top: 3px solid var(--planned-solid); }
.boardColumn.st-done > header { border-top: 3px solid var(--done-solid); }
.boardColumn.st-idle > header { border-top: 3px solid var(--idle-solid); }

/* --- Subtasks in a list ---------------------------------------------------------- */

/*
 * A subtask sits under the job it belongs to. Indented rather than merged into
 * the parent row, because it is still real work with its own owner, status and
 * date — it just should not be read as a separate job.
 */
.record.subtaskOf {
    padding-left: 40px;
    position: relative;
}

.record.subtaskOf::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line);
}

.record.subtaskOf .recordIcon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    font-size: 13px;
    background: var(--quiet-bg);
    color: var(--muted);
}

.record.subtaskOf p b {
    font-size: 13px;
    font-weight: 600;
}

:root[data-theme="dark"] .record.subtaskOf::before {
    background: var(--surface-3);
}

/* How many pieces a job was broken into, on the parent row. */
.subtaskCount {
    display: inline-block;
    margin-left: 9px;
    background: var(--quiet-bg);
    color: var(--muted);
    border-radius: 9px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    vertical-align: 1px;
}

:root[data-theme="dark"] .subtaskCount {
    background: var(--surface-3);
    color: #9aaaa4;
}

/* The file picker on the ticket form, matching the other fields. */
.ticketFile input[type="file"] {
    width: 100%;
    border: 1px solid #dfe7e2;
    border-radius: 7px;
    background: #fafcfb;
    padding: 9px 11px;
    margin-top: 7px;
    font: inherit;
    font-size: 11px;
    color: var(--muted);
}

:root[data-theme="dark"] .ticketFile input[type="file"] {
    background: var(--surface-2);
    border-color: var(--line);
}

/* A ticket's attachment, reachable from the queue — tickets have no page. */
.fileChip {
    display: inline-block;
    margin-top: 6px;
    border: 1px solid var(--line);
    background: var(--quiet-bg);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10.5px;
    color: var(--muted);
    text-decoration: none;
}

.fileChip:hover {
    border-color: var(--green);
    color: var(--green);
}

:root[data-theme="dark"] .fileChip {
    background: var(--surface-3);
}

/* Ticket and Task sit side by side: reporting a problem is not the same act as
   writing down work, so they are two buttons, not one. */
.headerActions .secondaryAction {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 7px;
    padding: 0 14px;
    font-weight: 700;
    font-size: 12px;
    color: #56645d;
    cursor: pointer;
}

.headerActions .secondaryAction:hover {
    border-color: var(--green);
    color: var(--green);
}

:root[data-theme="dark"] .headerActions .secondaryAction {
    background: var(--surface-2);
    color: #9aaaa4;
}

/* --- My tickets ------------------------------------------------------------------ */

.myTicketRow {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}

.myTicketRow > div {
    flex: 1;
    min-width: 0;
}

.myTicketRow b {
    font-size: 13px;
}

.myTicketRow small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

.myTicketWho {
    flex: 0 0 150px;
    font-size: 11.5px;
    color: var(--muted);
    text-align: right;
}

@media (max-width: 760px) {
    .myTicketWho {
        display: none;
    }
}

/* A task raised as a ticket: who raised it and what they sent. */
.fromTicket p {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--muted);
}

/* A Service Desk ticket: the department it is for, its head, and its task. */
.ticketRoute {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
}

.ticketRoute a {
    color: #2a5aa6;
    font-weight: 600;
}

/* A ticket on My Tickets: its row, where it is on its way, and what happened
   (Sanket, 2026-09-15). */
.myTicket {
    border-bottom: 1px solid var(--line);
}

.myTicket .myTicketRow {
    border-bottom: 0;
}

.myTicketRow .ticketEdit,
.myTicketRow .ticketDelete {
    flex: 0 0 auto;
}

.myTicketRow .ticketDelete {
    margin: 0;
}

.myTicketRow .ticketDelete button {
    color: var(--danger-ink);
}

/* A given ticket's status, which follows its task rather than its form. */
.ticketFollows {
    display: block;
    padding: 9px 0;
    font-weight: 600;
    color: var(--muted);
}

/* Closing a ticket (Sanket, 2026-09-15): whoever has it says it is done, and
   whoever raised it, or its head of department, closes it or sends it back. */
.ticketCloseOut {
    margin: 0 18px 12px 61px;
    padding: 12px 14px;
    border: 1px solid var(--warn-line);
    border-left: 3px solid var(--attention-solid, #f5871f);
    border-radius: 8px;
    background: var(--warn-bg);
    font-size: 12px;
}

.ticketCloseOut p {
    margin: 0 0 8px;
}

.ticketCloseOut blockquote {
    margin: 0 0 8px;
    padding-left: 10px;
    border-left: 2px solid var(--warn-line);
    color: var(--muted);
}

.ticketCloseOut textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    resize: vertical;
}

.ticketCloseOutActions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/*
 * A closed ticket's work is locked (Santosh, 2026-09-16). On its task page the
 * controls are gone, so this says why, and offers the way back to whoever may
 * take it. Quiet on purpose: finished work is not an alarm.
 */
.lockedNotice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 4px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--quiet-line);
    border-left: 3px solid var(--success-ink);
    border-radius: 8px;
    background: var(--quiet-bg);
    font-size: 12.5px;
}

.lockedGlyph {
    flex: none;
    font-size: 16px;
    line-height: 1.3;
}

.lockedNotice > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lockedNotice small {
    color: var(--quiet-ink);
    font-size: 12px;
}

.lockedNotice blockquote {
    margin: 2px 0 0;
    padding-left: 10px;
    border-left: 2px solid var(--quiet-line);
    color: var(--quiet-ink);
}

/* Reopening: folded to one line until wanted, since it needs a reason. */
.ticketReopen {
    margin-top: 6px;
    font-size: 12px;
}

.myTicket .ticketReopen {
    margin: 0 18px 12px 61px;
}

.ticketReopen > summary {
    display: inline-block;
    cursor: pointer;
    color: var(--quiet-ink);
    font-weight: 600;
    list-style: none;
}

.ticketReopen > summary::-webkit-details-marker {
    display: none;
}

.ticketReopen > summary:hover,
.ticketReopen[open] > summary {
    color: var(--ink, inherit);
}

.ticketReopen form {
    margin-top: 8px;
}

.ticketReopen textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    resize: vertical;
}

.ticketReopenActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ticketReopenActions small {
    color: var(--quiet-ink);
}

/* Same trap as .unitAccess: a class-level display beats a closed <details>. */
.ticketReopen:not([open]) > form {
    display: none !important;
}

/* How a ticket ended, or that it waits to be closed. */
.ticketOutcome {
    display: block;
    font-size: 11.5px;
    color: var(--success-ink);
}

.ticketOutcome.rejected {
    color: var(--danger-ink);
}

/* --- Looking at a picture -------------------------------------------------
   A picture attached to work opens over the page instead of being downloaded
   first (Sanket, 2026-09-21). Dark all round, so the picture is the only
   thing lit; its name and Download sit under it. */

.pictureBox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 16, 12, .82);
}

.pictureBox[hidden] {
    display: none !important;
}

/* Not a containing block: the close and the steps belong to the dark, so they
   cannot be pushed off the screen by a wide picture. */
.pictureFrame {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(84vw, 1100px);
    max-height: 90vh;
}

.pictureFrame img {
    max-width: 100%;
    max-height: calc(90vh - 70px);
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.pictureFailed {
    margin: 0;
    padding: 28px 22px;
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--ink, #17232a);
    text-align: center;
    font-size: 13px;
}

.pictureBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #eef4f1;
    font-size: 12.5px;
}

.pictureBar b {
    display: block;
    word-break: break-word;
}

.pictureBar small {
    color: #a9bcb4;
}

.pictureGet,
.pictureGet:visited {
    flex: none;
    padding: 7px 14px;
    border-radius: 7px;
    background: var(--done-solid, #15915c);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.pictureClose,
.pictureStep {
    position: absolute;
    border: 0;
    background: rgba(12, 20, 16, .62);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.pictureClose {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 22px;
}

.pictureStep {
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 56px;
    border-radius: 8px;
    font-size: 26px;
}

.pictureStep[hidden] {
    display: none !important;
}

.pictureStep.back { left: 14px; }
.pictureStep.on { right: 14px; }

.pictureClose:hover,
.pictureStep:hover {
    background: rgba(12, 20, 16, .88);
}

/* On a phone there is no room beside the picture: the steps sit on it. */
@media (max-width: 720px) {
    .pictureBox { padding: 14px; }
    .pictureFrame { max-width: 100%; }
    .pictureClose { right: 10px; }
    .pictureStep.back { left: 6px; }
    .pictureStep.on { right: 6px; }
    .pictureStep { width: 34px; height: 48px; }
}

/* The name that opens it reads as the name, not as a button. */
.fileOpen {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-ink, #175f7d);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fileOpen:hover b {
    text-decoration: underline;
}

.fileRow .fileGet,
.fileRow .fileGet:visited {
    margin-left: 10px;
    font-size: 11px;
    color: var(--quiet-ink);
}

.fileKind.isPicture {
    background: var(--accent-soft, #e2eff4);
}

/* A chip that opens a picture is a button; it must still look like a chip. */
button.fileChip,
button.chatFile {
    border: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

/* Deleted by someone else, and kept on its raiser's list with why (Santosh #1). */
.ticketOutcome.deleted {
    color: var(--quiet-ink);
}

.deleteWhy textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    resize: vertical;
}

.ticketOutcome.review {
    color: var(--warn-ink);
}

.ticketOutcome span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

p.ticketOutcome {
    margin: 0 18px 10px 61px;
}

.ticketBrief p.ticketOutcome,
.assignModal p.ticketOutcome {
    margin: 10px 0 0;
}

.serviceRow .ticketOutcome {
    margin-top: 3px;
    font-size: 11px;
}

/* A ticket's row can be given to someone, or rejected. */
.serviceActions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.serviceRow .serviceActions .rejectTicket {
    padding: 0;
    color: var(--danger-ink);
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 760px) {
    p.ticketOutcome,
    .ticketCloseOut {
        margin-left: 18px;
    }
}

.ticketJourney {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0 18px 12px 61px;
    padding: 0;
    list-style: none;
}

.ticketJourney li {
    position: relative;
    padding: 18px 8px 0 0;
    min-width: 0;
}

/* The line between steps, drawn in the done colour as far as it has got. */
.ticketJourney li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 14px;
    right: 0;
    height: 2px;
    background: var(--line);
}

.ticketJourney li:last-child::before {
    display: none;
}

.ticketJourney li.done::before {
    background: #1ba466;
}

.ticketJourney li i {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--surface, #fff);
    font-style: normal;
    font-size: 8px;
    line-height: 10px;
    text-align: center;
    color: #fff;
}

.ticketJourney li.done i {
    border-color: #1ba466;
    background: #1ba466;
}

.ticketJourney li.current i {
    border-color: #2a5aa6;
    box-shadow: 0 0 0 3px rgba(42, 90, 166, .15);
}

.ticketJourney b {
    display: block;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticketJourney li.next b {
    color: var(--muted);
    font-weight: 600;
}

.ticketJourney small {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticketHistory {
    margin: 0 18px 12px 61px;
    font-size: 12px;
}

.ticketHistory summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
}

.ticketHistory ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.ticketHistory li {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    padding: 5px 0;
    border-top: 1px dashed var(--line);
}

.ticketHistory li span {
    color: var(--muted);
}

.ticketHistory li small {
    display: block;
    color: var(--muted);
}

@media (max-width: 760px) {
    .ticketJourney {
        grid-template-columns: 1fr;
        margin-left: 18px;
    }

    .ticketJourney li::before {
        display: none;
    }

    .ticketHistory {
        margin-left: 18px;
    }
}

:root[data-theme="dark"] .ticketJourney li i {
    background: var(--surface-2);
}

/* A client row is a link, not a drawer opener, so it needs the button's look. */
a.record {
    text-decoration: none;
    color: var(--ink);
}

.clientDetail {
    padding: 14px 18px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--muted);
}

/* --- Editing from the row -------------------------------------------------------- */

/*
 * The row used to be one big button, so owner, status and priority could only
 * be looked at. It is a container now: the title opens the record, the rest is
 * editable where it stands.
 */
.recordOpen {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.cellEdit {
    min-width: 0;
}

.cellEdit select {
    width: 100%;
    max-width: 100%;
    border: 1px solid transparent;
    font: inherit;
    cursor: pointer;
    appearance: none;
    text-overflow: ellipsis;
}

/* The status and priority selects keep the pill look they replaced. */
.cellEdit select.pill,
.cellEdit select.priority {
    padding-right: 10px;
}

.cellEdit select:hover {
    border-color: var(--line);
}

.cellEdit select:focus {
    outline: 0;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(21, 154, 97, .16);
}

.cellEdit.owner select {
    background: none;
    border-radius: 7px;
    padding: 7px 8px;
    font-size: 11.5px;
    color: var(--ink);
}

:root[data-theme="dark"] .cellEdit.owner select {
    color: var(--ink);
}

:root[data-theme="dark"] .cellEdit select option {
    background: var(--surface-2);
    color: var(--ink);
}

/* --- The client list --------------------------------------------------------- */

/*
 * Owner, status and priority describe a task, not a client. What matters about
 * a client is how much of their work is in flight, how much is late, and when
 * anybody last touched it.
 */
.clientHead,
.clientRow {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 100px 90px 90px 150px 24px;
    gap: 14px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}

.clientHead {
    font-size: 10px;
    letter-spacing: .8px;
    font-weight: 700;
    color: #8b968f;
}

.clientRow {
    text-decoration: none;
    color: var(--ink);
}

.clientRow:hover {
    background: var(--quiet-bg);
}

.clientRow > div {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.clientRow p {
    margin: 0;
    min-width: 0;
}

.clientRow p b,
.clientRow p small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clientRow p b {
    font-size: 13.5px;
}

.clientRow p small {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

.clientFigure {
    font-size: 17px;
    font-weight: 700;
}

.clientFigure.bad {
    color: var(--danger-ink);
}

/* A zero should not read as loudly as a number that matters. */
.clientFigure.quiet {
    color: #b8c2bd;
    font-weight: 500;
}

.clientRow em {
    font-style: normal;
    font-size: 11px;
    color: var(--muted);
}

.listTop {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/*
 * Wide tables scroll inside their own panel. Squeezing the columns instead
 * collapsed the name to 0px — a row of numbers with nothing to say which row
 * it was.
 */
.tableScroll {
    overflow-x: auto;
}

.clientHead,
.clientRow {
    min-width: 620px;
}

.clientHead.projectHead,
.clientRow.projectRowNew {
    min-width: 900px;
}

:root[data-theme="dark"] .clientFigure.quiet {
    color: #56645d;
}

/* --- The project list ---------------------------------------------------------- */

/*
 * Same idea as the client list: the generic columns described one task, not a
 * project. What a project is read by is how much is left, how much is late,
 * how far along it is and when it is due.
 */
.clientHead.projectHead,
.clientRow.projectRowNew {
    grid-template-columns: minmax(200px, 2fr) 70px 90px 70px 130px 120px 130px 24px;
}

.clientRow.projectRowNew .miniProgress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
}

.clientRow.projectRowNew .miniProgress i {
    flex: 1;
    display: block;
    height: 5px;
    background: var(--quiet-bg);
    border-radius: 5px;
    overflow: hidden;
}

.clientRow.projectRowNew .miniProgress em {
    display: block;
    height: 100%;
    background: var(--done-solid);
    border-radius: 5px;
}

.clientRow.projectRowNew em.overdue {
    color: var(--danger-ink);
    font-weight: 600;
}



/* ---------------------------------------------------------------------------
   Archive — what was taken off the board.

   Same grid discipline as the client and project lists: its own columns, a
   min-width so squeezing collapses the scroller rather than the title, and
   the destructive action always the last thing in the row.
   --------------------------------------------------------------------------- */

.archiveHead,
.archiveRow {
    display: grid;
    grid-template-columns: 28px minmax(240px, 2fr) 150px 130px 130px 110px 140px;
    gap: 14px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    min-width: 980px;
}

.archiveHead {
    font-size: 10px;
    letter-spacing: .8px;
    font-weight: 700;
    color: #8b968f;
}

.archiveRow p {
    margin: 0;
    min-width: 0;
}

.archiveRow p b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archiveRow p small,
.archiveRow em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.archiveRow:hover {
    background: var(--quiet-bg);
}

.archiveActions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.archiveFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.archiveFilters input[type="search"] {
    min-width: 200px;
}

/* Pushes the destructive control away from Filter and Clear. */
.archiveFilters .danger {
    margin-left: auto;
}

.archivePager {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding: 14px 0 4px;
}

.archivePager em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

/* Source tabs — work items, tickets and Service Desk live in separate tables,
   so each is listed on its own rather than unioned into one stream. */
.archiveTabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.archiveTab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.archiveTab b {
    font-size: 11px;
    color: var(--muted);
}

.archiveTab.active {
    background: var(--brand, #20a455);
    border-color: transparent;
    color: #fff;
}

.archiveTab.active b {
    color: #fff;
    opacity: .85;
}

/* ---------------------------------------------------------------------------
   Quick actions on a list row.

   Adding a subtask or a remark used to mean opening the record. These put both
   one click away, and the form opens under the row rather than over it so the
   list keeps its place.
   --------------------------------------------------------------------------- */

.rowActions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.rowAction {
    border: 0;
    background: transparent;
    color: #a9b4ae;
    font-size: 13px;
    line-height: 1;
    padding: 4px 5px;
    border-radius: 6px;
    cursor: pointer;
}

.rowAction:hover {
    background: var(--quiet-bg, #edf2ef);
    color: var(--brand, #20a455);
}

/* Always visible. They were revealed on hover to keep a long list calm, but a
   control you cannot see is a control nobody uses — and on a touch screen
   there is no hover at all. */
.record .rowAction {
    color: #7b8983;
    font-size: 15px;
    font-weight: 600;
    background: var(--quiet-bg, #eef3f0);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
}

.record:hover .rowAction {
    color: #4a5852;
}

.record .rowAction:hover,
.record .rowAction:focus-visible {
    background: var(--brand, #20a455);
    color: #fff;
}

.rowForm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 13px 62px;
    border-bottom: 1px solid var(--line);
    background: var(--quiet-bg, #f6faf8);
}

.rowFormLabel {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.rowForm input[type="text"] {
    flex: 1 1 260px;
    min-width: 180px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 12px;
    background: var(--panel, #fff);
    color: var(--ink);
}

.rowForm select,
.rowForm input[type="date"] {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 11px;
    background: var(--panel, #fff);
    color: var(--ink);
}

/* A class-level display beats [hidden]; the rule the skeleton ships is not
   enough once .rowForm sets display:flex. */
.rowForm[hidden] {
    display: none !important;
}

/* The client cell is a control now, not a label. */
.cellEdit.cellClient select {
    max-width: 100%;
}

@media (max-width: 1199px) {
    .rowForm {
        padding-left: 18px;
    }
}

/* Contributors sitting next to the owner select. The owner is in the dropdown;
   these are everyone else on the work, which an editable row used to hide. */
.ownerCell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* The select used to take the whole cell, which pushed the avatars to the far
   edge so the owner and the people working with them read as two columns.
   It now shrinks to what it needs and the avatars follow the name. */
.ownerCell .cellEdit.owner {
    min-width: 0;
    flex: 0 1 auto;
}

.ownerCell .cellEdit.owner select {
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
}

/* Overlapped, so any number of them costs about the same room. */
.alsoOn {
    flex: 0 0 auto;
    padding-left: 2px;
}

.alsoOn i {
    margin-left: -7px;
    box-shadow: 0 0 0 2px var(--panel, #fff);
}

.alsoOn i:first-child {
    margin-left: 0;
}

.record:hover .alsoOn i {
    box-shadow: 0 0 0 2px var(--quiet-bg, #f8fbf9);
}

/* The count sits beside the title, never inside it. */
.recordLead .subtaskCount {
    flex: 0 0 auto;
    margin-left: 0;
}

.alsoOn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

.alsoOn i {
    font-style: normal;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e9f4ee;
    color: #118353;
    font-size: 8px;
    font-weight: 600;
}

.alsoOn i.more {
    background: var(--quiet-bg, #edf2ef);
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Parent rows vs their subtasks.

   A fully expanded list used to read as one flat run of rows — the only cues
   were a 40px indent and a slightly smaller icon, which is not enough to find
   the parents at a glance. Parents now carry the weight; subtasks step back.
   --------------------------------------------------------------------------- */

.recordLead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.recordLead .recordOpen {
    flex: 1 1 0;
    min-width: 0;
    /* Not the full width it has elsewhere: the lead wraps (for the Area picker's
       own line), and a full-width title wrapped under its icon — every row
       stacked into four lines (Sanket, 2026-09-14). */
    width: auto;
}

/* The icon is the control that opens a parent, so it has to look like one. */
button.recordIcon.subtaskToggle {
    border: 0;
    cursor: pointer;
    position: relative;
    transition: background .12s ease;
}

button.recordIcon.subtaskToggle::after {
    content: "▸";
    position: absolute;
    right: -9px;
    bottom: -3px;
    font-size: 9px;
    color: var(--muted);
    transition: transform .12s ease;
}

button.recordIcon.subtaskToggle.open::after {
    transform: rotate(90deg);
}

button.recordIcon.subtaskToggle:hover {
    filter: brightness(.95);
}

/* Parents carry the weight. */
.record.parentRow p b {
    font-weight: 700;
}

.record.parentRow {
    background: var(--panel, #fff);
}

/* Subtasks step back: quieter title, deeper indent, a rail that reads as
   "these belong to the row above". */
.record.subtaskOf {
    padding-left: 56px;
    background: var(--quiet-bg, #f8fbf9);
}

.record.subtaskOf::before {
    left: 34px;
}

.record.subtaskOf p b {
    font-weight: 550;
    color: #45524b;
}

.record.subtaskOf p b .ref {
    opacity: .75;
}

:root[data-theme="dark"] .record.subtaskOf p b {
    color: #b9c6bf;
}

/*
 * A class-level display beats [hidden]: .record is display:grid !important.
 *
 * The phone layout further down this sheet then makes it display:flex
 * !important at the same specificity as .record[hidden] — so the later rule
 * won, and on a phone a folded subtask stayed on screen however many times you
 * pressed the fold (Sanket, 2026-09-16). The aria and the hidden attribute
 * were right all along; only the row would not go. Named with .recordList in
 * front so this outranks both, whatever order they end up in.
 */
.recordList .record[hidden],
.record[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   The record's details panel.

   It used to be a read-only list beside an Edit modal, so changing a due date
   meant opening a dialog on top of the thing you were reading. Every row here
   is the control itself, posting to the same endpoint the list rows use.
   --------------------------------------------------------------------------- */

.recordSide {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.recordSide > .panel {
    padding: 24px 26px;
}

.panelField {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}

.panelField:last-of-type {
    border-bottom: 0;
}

.panelField > span {
    font-size: 11.5px;
    color: var(--muted);
}

.panelField select,
.panelField input[type="date"] {
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

/* Quiet until you go near it, so the panel reads as information first and a
   form second. */
.panelField select:hover,
.panelField input[type="date"]:hover,
.panelField select:focus,
.panelField input[type="date"]:focus {
    border-color: var(--line);
    background: var(--panel, #fff);
    outline: none;
}

.recordFacts .detailLine {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.recordFacts .detailLine span {
    font-size: 11.5px;
    color: var(--muted);
}

.recordFacts .detailLine b {
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.recordSideActivity h3 {
    display: none; /* the panel already has its own heading */
}

@media (max-width: 1000px) {
    .panelField,
    .recordFacts .detailLine {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* ---------------------------------------------------------------------------
   The record's main column as a stack of cards.

   It used to be one long panel, so the head, the description, the subtasks and
   the comments all ran together. Each is its own card now, which is what makes
   the page scannable — you find the section by its edge, not by reading.
   --------------------------------------------------------------------------- */

.recordMain.panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.recordMain.panel > .recordPageHead,
.recordMain.panel > section,
.recordMain.panel > .detailBlock,
.recordMain.panel > .bigProgress {
    background: var(--panel, #fff);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0;
}

/* --- The head ------------------------------------------------------------ */

.recordPageHead {
    display: block;
}

.recordHeadTop {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.recordHeadTop .recordIcon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 17px;
}

.recordUpdated {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
}

.recordPageHead h2 {
    font-size: 26px;
    line-height: 1.25;
    margin: 0 0 8px;
}

.recordCrumb {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.crumbChip {
    background: var(--quiet-bg, #e8f4ed);
    color: var(--brand, #128755);
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
    text-decoration: none;
}

/* --- The fact strip ------------------------------------------------------

   Nine facts do not fit on one line, and a second line has to begin exactly
   where the first one did (Sanket, 2026-09-23: "when the description goes into
   two lines the alignment is not proper"). So the divider sits on the LEFT of
   each fact, and the strip is pulled one divider-and-padding to the left and
   clipped there: the line at the start of every row falls out of sight, each
   row starts flush with the page, and no divider is left dangling in the air
   at the end of a row. On one line it reads exactly as it did before. */

.factStrip {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 14px;
    padding: 14px 0;
    margin: 0 0 16px -19px;
    clip-path: inset(0 0 0 19px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.factItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-left: 1px solid var(--line);
    min-width: 0;
}

.factGlyph {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--quiet-bg, #edf2ef);
    font-size: 14px;
    color: #5b6b63;
}

.factGlyph.person {
    border-radius: 50%;
    background: #e9f4ee;
    color: #118353;
    font-size: 10px;
    font-weight: 700;
}

.factItem p {
    margin: 0;
    min-width: 0;
}

.factItem p b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.factItem p small {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 2px;
}

/* --- Actions ------------------------------------------------------------- */

.recordActions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.recordActions form {
    display: inline-flex;
}

@media (max-width: 760px) {
    /* Stacked one to a line, there is nothing to align or divide. */
    .factStrip {
        margin-left: 0;
        clip-path: none;
        row-gap: 0;
    }

    .factItem {
        border-left: 0;
        padding: 6px 0;
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------------------
   Tighter status and priority chips in list rows.

   They took 232px of the wide grid between them, which is more than the title
   could spare — a long task name truncated while two short words sat in
   generous boxes. Smaller here only; the record page keeps the roomier chip.
   --------------------------------------------------------------------------- */

.record .pill,
.record .priority,
.record .cellEdit select.pill,
.record .cellEdit select.priority {
    font-size: 10.5px;
    padding: 4px 8px;
    gap: 5px;
    letter-spacing: 0;
}

.record .pill::before {
    flex-basis: 5px;
    width: 5px;
    height: 5px;
}

.record .cellEdit select.pill,
.record .cellEdit select.priority {
    padding-right: 6px;
}

/* ---------------------------------------------------------------------------
   A row that holds work reads as solid.

   The tinted icon is the resting state and stays that way for a row with
   nothing under it. A parent fills with its status colour, so scanning a list
   you can see which rows open before touching any of them. Only rows with a
   toggle get this — the toggle exists precisely when children are on screen.
   --------------------------------------------------------------------------- */

button.recordIcon.subtaskToggle {
    font-weight: 700;
    color: #fff;
}

button.recordIcon.subtaskToggle.st-stop { background: var(--stop-solid); }
button.recordIcon.subtaskToggle.st-attention { background: var(--attention-solid); }
button.recordIcon.subtaskToggle.st-active { background: var(--active-solid); }
button.recordIcon.subtaskToggle.st-planned { background: var(--planned-solid); }
button.recordIcon.subtaskToggle.st-done { background: var(--done-solid); }
button.recordIcon.subtaskToggle.st-idle { background: var(--idle-solid); }

/* The caret has to read against a solid ground, not the row behind it. */
button.recordIcon.subtaskToggle::after {
    color: inherit;
    right: -8px;
    bottom: -4px;
    text-shadow: 0 0 3px var(--panel, #fff);
}

button.recordIcon.subtaskToggle:hover {
    filter: brightness(1.08);
}

/* The line that explains why a new requirement is not in the list behind. */
.saved .savedNote {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 2px 0 4px;
}

.saved a.drawerAction.quiet {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
}

/* --- Presence --------------------------------------------------------------- */

/*
 * Green here, yellow away, red not on. The dot sits on the avatar's corner
 * with a ring in the surface colour, so it reads against any avatar and any
 * theme without a second colour to maintain.
 */
.avatarWrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.presenceDot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--chat-surface, #fff);
    box-sizing: border-box;
}

.presenceDot.online { background: #1faa59; }
.presenceDot.away { background: #f2c230; }
.presenceDot.offline { background: #e0474c; }

.avatarWrap.large .presenceDot {
    width: 15px;
    height: 15px;
    border-width: 3px;
}

.presenceLine {
    font-size: 11.5px !important;
    font-weight: 600;
    margin: 5px 0 0 !important;
}

.presenceLine.presence-online { color: #148848; }
.presenceLine.presence-away { color: #a47a07; }
.presenceLine.presence-offline { color: var(--muted); }

:root[data-theme="dark"] .presenceDot {
    border-color: var(--surface);
}

:root[data-theme="dark"] .presenceDot.online { background: #34d17b; }
:root[data-theme="dark"] .presenceDot.away { background: #ffd24a; }
:root[data-theme="dark"] .presenceDot.offline { background: #ff6b6f; }

/* --- Completion record ---------------------------------------------------------- */

.completionRecord {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0;
    background: #fbfdfc;
}

.completionRecord h3 {
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
}

.completionLine {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 7px 0;
}

.completionLine + .completionLine {
    border-top: 1px dashed var(--line);
}

.completionMark {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--success-bg);
    color: var(--success-ink);
    font-size: 11px;
    font-weight: 800;
}

.completionLine.approved .completionMark {
    background: var(--done-solid);
    color: #fff;
}

.completionLine p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
}

.completionLine em {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--info-ink);
    background: var(--info-bg);
    border-radius: 9px;
    padding: 1px 8px;
    margin-left: 5px;
}

.completionLine small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.completionUnknown {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

:root[data-theme="dark"] .completionRecord {
    background: var(--surface-2);
}

/* --- Per-person access ------------------------------------------------------ */

/* The notes sat flush against the panel's edge; the grid below has padding. */
.permissionPanel > .permissionNote {
    margin-left: 16px;
    margin-right: 16px;
}

/* The department rule outranks the grid, so that note is set apart. */
.permissionNote.ticketOnlyNote {
    border-left: 3px solid var(--warn-line);
    padding-left: 10px;
}

/* Everyone in a category, by name, under it in the list. */
.roleMembers {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: -2px 0 8px 24px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

.roleMembers a,
.roleMembers a:visited {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 11.5px;
    text-decoration: none;
}

.roleMembers a span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roleMembers a:hover {
    color: var(--ink);
    background: rgba(21, 154, 97, .06);
}

.roleMembers a.selected {
    color: var(--ink);
    font-weight: 700;
    background: rgba(21, 154, 97, .12);
}

.accessTag {
    flex: none;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--quiet-line);
    background: var(--quiet-bg);
    color: var(--quiet-ink);
    white-space: nowrap;
}

.accessTag.tickets {
    background: var(--warn-bg);
    border-color: var(--warn-line);
    color: var(--warn-ink);
}

.accessTag.own {
    background: var(--info-bg);
    border-color: var(--info-line);
    color: var(--info-ink);
}

/* Heads a work space: authority that came from Reporting lines, not from the
   category picked on this page. The warning is for someone who has left and is
   still named as one, leaving that department with nobody. */
.accessTag.heads {
    background: var(--success-bg);
    border-color: var(--success-line);
    color: var(--success-ink);
}

.accessTag.headless {
    background: var(--danger-bg);
    border-color: var(--danger-line);
    color: var(--danger-ink);
}

/* The People table styles every <em> in a row as the status. */
.peopleAccessRow em.accessTag {
    font-size: 9.5px;
}

/* One person's grid: blue where it was given to them, red where taken. */
.permissionCheck.checked.given {
    background: var(--info-ink);
    border-color: var(--info-ink);
}

.permissionCheck.taken {
    background: var(--danger-bg);
    border-color: var(--danger-line);
    color: var(--danger-ink);
    font-weight: 700;
}

.permissionCheck.capped {
    background: transparent;
    border-style: dashed;
    color: var(--muted);
}

.permissionCheck:disabled {
    cursor: default;
}

.personHome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 16px 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.personHome b {
    display: block;
    font-size: 12.5px;
}

.personHome small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.55;
    color: var(--muted);
}

.personHome small em {
    font-style: normal;
    font-weight: 700;
    color: var(--ink);
}

.personHome select {
    min-width: 230px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 10px;
    font: inherit;
    font-size: 11.5px;
    background: transparent;
    color: var(--ink);
}

.personHomeRule {
    margin: 8px 16px 0;
    font-size: 10.5px;
    color: var(--muted);
}

.accessLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 14px 16px 8px;
    font-size: 10.5px;
    color: var(--muted);
}

.accessLegend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.accessLegend .permissionCheck {
    display: inline-grid;
    place-items: center;
    margin: 0;
    font-style: normal;
}

.accessReset {
    display: flex;
    justify-content: flex-end;
    padding: 14px 16px;
}

@media (max-width: 700px) {
    .personHome {
        flex-direction: column;
        align-items: stretch;
    }

    .personHome select {
        min-width: 0;
        width: 100%;
    }
}

:root[data-theme="dark"] .roleMembers a.selected {
    background: #1c3a2c;
    color: #6fd7a3;
}

/* --- Task Center lists ------------------------------------------------------ */

/*
 * Tasks | Requirements | Issues & Bugs: what the list is, before how it looks.
 * Each keeps one colour throughout — green, violet, red, the same as their
 * figure cards — tinted when waiting, solid when chosen.
 */
/* Sized to sit with the view buttons and status tabs below it. */
.listSwitch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 12px;
}

.listSwitch a,
.listSwitch a:visited {
    --tone: #128c58;
    --tone-bg: #e5f6ed;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1.5px solid var(--tone);
    border-radius: 8px;
    background: var(--tone-bg);
    color: var(--tone);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease;
}

.listSwitch a.requirements {
    --tone: #7a4fc0;
    --tone-bg: #f1eafa;
}

.listSwitch a.issues {
    --tone: #d24b41;
    --tone-bg: #ffedeb;
}

.listSwitch a i {
    font-style: normal;
    font-size: 13px;
}

.listSwitch a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -6px var(--tone);
}

.listSwitch a.selected {
    background: var(--tone);
    color: #fff;
    box-shadow: 0 4px 10px -6px var(--tone);
}

.listSwitch b {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--tone);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.listSwitch a.selected b {
    background: #fff;
    color: var(--tone);
}

:root[data-theme="dark"] .listSwitch a.tasks {
    --tone: #2ec27e;
    --tone-bg: #16322a;
}

:root[data-theme="dark"] .listSwitch a.requirements {
    --tone: #a78bf0;
    --tone-bg: #251e3b;
}

:root[data-theme="dark"] .listSwitch a.issues {
    --tone: #f0776c;
    --tone-bg: #3a201e;
}

:root[data-theme="dark"] .listSwitch a.selected {
    color: #0f1613;
}

@media (max-width: 600px) {
    .listSwitch {
        flex-wrap: nowrap;
        overflow-x: auto;
        display: flex;
    }

    .listSwitch a {
        flex: none;
        padding: 6px 10px;
        font-size: 12.5px;
    }
}

/* Requirements and Issues & Bugs: their view box only mirrors Task Center's. */
.permissionCheck.linked {
    display: grid;
    place-items: center;
    border-style: dashed;
    cursor: help;
}

.permissionCheck.linked.checked {
    background: var(--success-bg);
    border-color: var(--success-line);
    color: var(--success-ink);
}

.permissionLinked {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--muted);
}

/* --- Units ------------------------------------------------------------------ */

.unitHero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.unitHero > div {
    flex: 1;
}

.unitHero small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--green);
}

.unitHero h2 {
    margin: 4px 0 2px;
    font-size: 20px;
}

.unitHero p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.unitMark {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e5f6ed;
    color: #0f7a4c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}

.unitMark.large {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    font-size: 16px;
}

.unitGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.unitCard,
.unitCard:visited {
    display: block;
    padding: 16px;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.unitCard:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -14px rgba(16, 40, 30, .35);
}

.unitCardHead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unitCardHead div {
    flex: 1;
}

.unitCardHead b {
    display: block;
    font-size: 14px;
}

.unitCardHead small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}

.unitCardHead strong {
    font-size: 18px;
    color: var(--muted);
}

.unitCardFigures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.unitCardFigures p {
    margin: 0;
}

.unitCardFigures b {
    display: block;
    font-size: 18px;
}

.unitCardFigures small {
    font-size: 10.5px;
    color: var(--muted);
}

.unitCardFigures p.bad b {
    color: var(--danger-ink);
}

.unitPeople {
    margin-bottom: 14px;
}

.unitPeopleGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    padding: 12px 16px 16px;
}

.unitPerson,
.unitPerson:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
}

a.unitPerson:hover {
    border-color: var(--green);
}

.unitPerson p {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.unitPerson b,
.unitPerson small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unitPerson b {
    font-size: 12px;
}

.unitPerson small {
    font-size: 10.5px;
    color: var(--muted);
}

.unitPerson em {
    font-size: 10.5px;
    font-style: normal;
    color: var(--muted);
    white-space: nowrap;
}

.unitEmpty {
    padding: 30px;
    text-align: center;
}

.unitEmpty b {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

.unitEmpty p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.notice.unitNotice {
    background: var(--warn-bg);
    border-color: var(--warn-line);
    color: var(--warn-ink);
}

/* On a unit's dashboard: the other units a row is shared with. */
.sharedWith {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--info-ink);
    font-size: 10px;
    font-weight: 700;
}

:root[data-theme="dark"] .unitMark {
    background: #16322a;
    color: #6fd7a3;
}

/* Who else may see or post to a unit: one row per other unit. */
.unitAccess {
    margin-bottom: 14px;
}

/*
 * Folded until opened (partials/unit-access). The summary is the panel's head:
 * the heading, and one line saying where things stand, so the section only
 * needs opening to change something.
 */
.unitAccessSummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    border-radius: inherit;
}

.unitAccessSummary::-webkit-details-marker {
    display: none;
}

.unitAccessSummary:hover {
    background: var(--quiet-bg);
}

.unitAccessSummary:focus-visible {
    outline: 2px solid var(--done-solid);
    outline-offset: -2px;
}

.unitAccessSummary h3 {
    margin: 0;
    font-size: 15px;
}

.unitAccessGlance {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
}

.unitAccessGlance.isWalled {
    color: var(--quiet-ink);
}

.unitAccessGlance.isOpen {
    color: var(--success-ink);
}

.unitAccessChevron {
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: var(--quiet-ink);
    transition: transform .15s ease;
}

.unitAccess[open] .unitAccessChevron {
    transform: rotate(90deg);
}

.unitAccess[open] > .unitAccessSummary {
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.unitAccessNote {
    margin: 0;
    padding: 12px 18px 0;
    font-size: 11px;
    color: var(--quiet-ink);
}

/*
 * The openness form is display:flex and the grid display:grid, and a class-level
 * display is the trap that left the sidebar's Administration folded in name only
 * (.admin above) and a phone's subtasks unfoldable. Hide them explicitly.
 */
.unitAccess:not([open]) > :not(summary) {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .unitAccessChevron {
        transition: none;
    }
}

.unitAccessGrid {
    display: grid;
    grid-template-columns: 1fr 130px 130px;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 16px 16px;
}

.unitAccessGrid form {
    display: contents;
}

.unitAccessGrid b {
    font-size: 12px;
}

.unitAccessHead {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    color: #8b968f;
}

.unitAccessHead:not(:first-child) {
    text-align: center;
}

/* --- The Task Center in the sidebar ----------------------------------------- */

/*
 * The Task Center opens into Tasks / Requirements / Issues & Bugs, and Tasks
 * into their areas (partials/task-center-tree). Each level is a <details>, so
 * it folds on its chevron and remembers how it was left; the names inside the
 * summaries are ordinary links.
 */
.navTree > summary {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
    border-radius: 7px;
}

/* Safari draws its own triangle without this. */
.navTree > summary::-webkit-details-marker {
    display: none;
}

.sidebar nav .navTree > summary > a {
    flex: 1 1 auto;
    min-width: 0;
}

.navChevron {
    flex: 0 0 auto;
    margin: 0 9px 0 2px;
    color: #99a49f;
    transform: rotate(-90deg);
    transition: transform .18s ease;
}

.navTree[open] > summary > .navChevron {
    transform: none;
}

.navTree > summary:hover > .navChevron {
    color: var(--green);
}

/* Same trap as .admin: `.sidebar nav a { display: flex }` beats the rule that
   hides a closed <details>'s contents, so it would fold in name only. */
.navTree:not([open]) > .navTreeBody {
    display: none !important;
}

.navTreeBody {
    margin: 0 0 4px 19px;
    padding-left: 7px;
    border-left: 1px solid var(--line);
}

.sidebar nav .navTreeBody a {
    padding: 7px 10px;
    font-size: 13px;
    gap: 9px;
}

.sidebar nav .navTreeBody a span {
    font-size: 14px;
}

/* The Task Center while you are somewhere inside it. */
.sidebar nav a.inSection {
    color: #087c4b;
    font-weight: bold;
}

/* Counts, quieter than the red badge. */
.sidebar nav a em {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    font-weight: normal;
    color: #99a49f;
}

.sidebar nav a.active em {
    color: inherit;
}

/* The sidebar in your own order (workos.js). A grip on hover says the module
   can be dragged; a line says where it will land. */
.sidebar nav a[data-sidebar-module]:not(:has(i))::after {
    content: "⋮⋮";
    margin-left: auto;
    padding-left: 8px;
    font-size: 11px;
    letter-spacing: -2px;
    color: var(--muted);
    opacity: 0;
    transition: opacity .12s ease;
}

.sidebar nav a[data-sidebar-module]:hover::after {
    opacity: .6;
}

.sidebar nav a[data-sidebar-module].dragging {
    opacity: .45;
}

.sidebar nav a[data-sidebar-module].dropBefore {
    box-shadow: inset 0 2px 0 #128c58;
}

.sidebar nav a[data-sidebar-module].dropAfter {
    box-shadow: inset 0 -2px 0 #128c58;
}

.sidebarReset {
    margin: 6px 0 2px;
}

.sidebarReset[hidden] {
    display: none;
}

.sidebar nav .sidebarReset button {
    display: block;
    width: auto;
    margin: 0 0 0 10px;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.sidebar nav .sidebarReset button:hover {
    color: #128c58;
    text-decoration: underline;
}

:root[data-theme="dark"] .sidebar nav a[data-sidebar-module].dropBefore {
    box-shadow: inset 0 2px 0 #6fd7a3;
}

:root[data-theme="dark"] .sidebar nav a[data-sidebar-module].dropAfter {
    box-shadow: inset 0 -2px 0 #6fd7a3;
}

/* Reporting lines: which department reports to whom (partials/reporting-lines). */
.unitToolbar {
    align-items: center;
}

.unitToolbar p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.reportingLines {
    max-width: 560px;
}

.reportingGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 8px 16px;
    align-items: center;
    margin: 14px 0 6px;
}

.reportingGrid .reportingHead {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    color: var(--muted);
}

.reportingGrid b {
    font-size: 13.5px;
}

.reportingGrid select {
    width: 100%;
}

.reportingGrid .muted,
.unitReportsTo {
    color: var(--muted);
}

.unitReportsTo {
    margin: 4px 0 0;
    font-size: 12.5px;
}

.unitReportsTo b {
    color: var(--ink);
}

/* A work space's page: whether everyone sees its work. */
.unitOpenness {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.unitOpenness b {
    display: block;
    font-size: 13px;
}

.unitOpenness small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.unitOpenness.walled b::before {
    content: "▣ ";
}

.unitOpenness .secondaryAction {
    flex: 0 0 auto;
}

/* A walled-off work space's own entry, set apart from the lists above it. */
.sidebar nav .navTreeBody a.navSpace:not(.navSpace + .navSpace) {
    margin-top: 4px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 7px 7px;
    padding-top: 9px;
}

.sidebar nav .navTreeBody a.navSpace.active {
    background: #e7eef9;
    color: #2a5aa6;
}

:root[data-theme="dark"] .sidebar nav .navTreeBody a.navSpace.active {
    background: #1d2a3d;
    color: #8fb3ec;
}

/* The same colours as the Task Center's switch. */
.sidebar nav .navTree a.tasks.active {
    background: #e5f6ed;
    color: #128c58;
}

.sidebar nav a.navList.requirements.active {
    background: #f1eafa;
    color: #7a4fc0;
}

.sidebar nav a.navList.issues.active {
    background: #ffedeb;
    color: #d24b41;
}

.sidebar nav .navTreeBody.areas a {
    padding: 6px 10px;
    font-size: 12.5px;
}

.sidebar nav .navTreeBody.areas a.active {
    background: #e5f6ed;
    color: #128c58;
}

.sidebar nav a.navArea.unsorted:not(.active) {
    color: #a0aaa5;
}

/* An area's sub-areas, their names in line with the area's own past its dot. */
.sidebar nav .navTreeBody.areas a.navSubArea {
    padding: 5px 10px 5px 25px;
    color: #5f6d66;
    font-size: 12px;
}

.sidebar nav .navTreeBody.areas a.navSubArea.active {
    color: #128c58;
}

.sidebar nav .navAddSubArea .navAddAreaOpen {
    padding: 5px 10px 5px 25px;
    font-size: 12px;
}

.navAddSubArea .navAddAreaField {
    padding-left: 21px;
}

.navAddSubArea .navAddAreaError {
    padding-left: 25px;
}

/* "+ Add area" — a quiet link that turns into a name box. The generic
   `.sidebar nav button` rules would make these full menu rows. */
.navAddArea {
    margin: 1px 0 4px;
}

.sidebar nav .navAddArea button {
    width: auto;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.sidebar nav .navAddArea .navAddAreaOpen {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #128c58;
    font-size: 12.5px;
    font-weight: bold;
    text-align: left;
}

.sidebar nav .navAddArea .navAddAreaOpen:hover {
    background: #eef7f2;
}

.navAddAreaField {
    display: flex;
    gap: 5px;
    padding: 3px 4px 3px 6px;
}

.navAddAreaField[hidden] {
    display: none;
}

.navAddAreaField input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-size: 12.5px;
}

.navAddAreaField input:focus {
    outline: 2px solid #b9e3cc;
    border-color: #128c58;
}

.sidebar nav .navAddAreaField button {
    display: block;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: #128c58;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.navAddAreaError {
    display: block;
    padding: 2px 10px 4px;
    color: #c2352b;
    font-size: 11.5px;
}

:root[data-theme="dark"] .sidebar nav a.inSection {
    color: #6fd7a3;
}

:root[data-theme="dark"] .sidebar nav .navTree a.tasks.active,
:root[data-theme="dark"] .sidebar nav .navTreeBody.areas a.active {
    background: #16322a;
    color: #2ec27e;
}

:root[data-theme="dark"] .sidebar nav a.navList.requirements.active {
    background: #251e3b;
    color: #a78bf0;
}

:root[data-theme="dark"] .sidebar nav a.navList.issues.active {
    background: #3a201e;
    color: #f0776c;
}

:root[data-theme="dark"] .sidebar nav .navAddArea .navAddAreaOpen {
    color: #6fd7a3;
}

:root[data-theme="dark"] .sidebar nav .navTreeBody.areas a.navSubArea:not(.active) {
    color: #9aa7a1;
}

:root[data-theme="dark"] .sidebar nav .navAddArea .navAddAreaOpen:hover {
    background: var(--surface-2);
}

:root[data-theme="dark"] .navAddAreaField input {
    background: var(--surface-2);
    color: inherit;
}

/* Which area of the product a row sits in, beside its breadcrumb. */
.areaTag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2ef;
    color: #5f6d66;
    font-size: 10px;
    font-weight: 700;
}

:root[data-theme="dark"] .areaTag {
    background: var(--surface-2);
    color: #9aaaa4;
}

/*
 * The area, set from the row itself. Sorting a list of unplaced work meant
 * opening every task; this is the same one-field save the owner and status
 * cells use, in the space the grey area label had.
 */
/* A line of its own under the title: the work item column is ~230px wide, and
   beside the title the picker left it a couple of characters. */
.recordLead {
    flex-wrap: wrap;
}

.rowArea {
    flex: 0 0 100%;
    margin: 2px 0 0 44px;
}

.rowArea select {
    width: auto;
    min-width: 120px;
    max-width: 170px;
    border-radius: 999px;
    border-color: var(--line);
    padding: 3px 9px;
    font-size: 11px;
    color: #5f6d66;
    background: #fff;
}

.rowArea.unset select {
    border-style: dashed;
    color: #97a29c;
}

.rowArea select:hover {
    border-color: var(--green);
    color: var(--green);
}

:root[data-theme="dark"] .rowArea select {
    background: var(--surface-2);
    color: #9aaaa4;
}

@media (max-width: 760px) {
    /* On a phone the row is already down to a title and a status. */
    .rowArea {
        display: none;
    }
}

/* ===========================================================================
   Step 1 of the team's feedback (2026-09-14): work that exists but did not
   show. Subtask folding that people can find, a parent brought along for its
   subtasks, "helping" rows on My Work, row saves that stay put, and a board
   card that carries its subtasks.
   =========================================================================== */

/* The fold people look for: the count itself, with an arrow. */
button.subtaskCount.subtaskFold {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    background: var(--panel, #fff);
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

button.subtaskCount.subtaskFold i {
    font-style: normal;
    font-size: 9px;
    color: var(--muted);
    transition: transform .12s ease;
}

button.subtaskCount.subtaskFold.open i {
    transform: rotate(90deg);
}

button.subtaskCount.subtaskFold:hover {
    border-color: #bfe3cf;
    background: #f1faf5;
}

button.subtaskCount.subtaskFold:focus-visible,
button.recordIcon.subtaskToggle:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

:root[data-theme="dark"] button.subtaskCount.subtaskFold {
    background: var(--surface-2);
    color: var(--ink);
}

:root[data-theme="dark"] button.subtaskCount.subtaskFold:hover {
    background: var(--surface-3);
}

/* A parent here only because its subtasks matched: present, but quiet. */
.record.contextRow {
    background: var(--quiet-bg, #f8fbf9);
}

.record.contextRow .recordOpen p b {
    color: var(--muted);
    font-weight: 600;
}

.contextNote {
    font-style: normal;
    margin-left: 6px;
    font-size: 10.5px;
    color: var(--muted);
}

/* On My Work: someone else owns this, and you are on it. */
.helpingTag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #efe9f9;
    color: #6a45ad;
    font-size: 10px;
    font-weight: 700;
}

:root[data-theme="dark"] .helpingTag {
    background: #272040;
    color: #b39cf0;
}

/* A row saving in the background. */
.record.saving {
    opacity: .6;
    cursor: progress;
}

.record.saving select {
    pointer-events: none;
}

/* Where a row that left the view went. */
.rowMoved {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #eef2ef;
    background: #f6faf8;
    color: var(--muted);
    font-size: 12.5px;
}

.rowMoved b {
    color: var(--ink);
    font-weight: 700;
}

.rowMoved .linkButton {
    border: 0;
    background: none;
    padding: 0;
    color: var(--green);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.rowMoved .linkButton:disabled {
    color: var(--muted);
    cursor: progress;
}

:root[data-theme="dark"] .rowMoved {
    background: var(--surface-2);
    border-color: var(--line);
}

/* A toast that says something went wrong. */
.toast.failed > span {
    background: #d24b41;
}

/* The board card is a container now, so its title can be a link and its
   subtasks a list beside it. */
a.boardCardLink {
    display: block;
    color: inherit;
    text-decoration: none;
}

.boardCard.contextCard {
    background: var(--quiet-bg, #f8fbf9);
}

.boardCard.contextCard > a b {
    color: var(--muted);
}

.cardSubtasks,
.cardSubtaskCount {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid #eef2ef;
    font-size: 11.5px;
    color: var(--muted);
}

.cardSubtasks summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--ink);
}

.cardSubtasks summary::-webkit-details-marker {
    display: none;
}

.cardSubtasks summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 5px;
    font-size: 9px;
    color: var(--muted);
    transition: transform .12s ease;
}

.cardSubtasks[open] summary::before {
    transform: rotate(90deg);
}

.cardSubtasks ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.cardSubtasks li a {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.35;
}

.cardSubtasks li a:hover span {
    text-decoration: underline;
}

.pieceDot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--idle-solid);
    transform: translateY(1px);
}

.pieceDot.st-stop { background: var(--stop-solid); }
.pieceDot.st-attention { background: var(--attention-solid); }
.pieceDot.st-active { background: var(--active-solid); }
.pieceDot.st-planned { background: var(--planned-solid); }
.pieceDot.st-done { background: var(--done-solid); }

:root[data-theme="dark"] .cardSubtasks,
:root[data-theme="dark"] .cardSubtaskCount {
    border-color: var(--line);
}

/* --- Role categories, in System Settings ------------------------------------- */

.roleSaved {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #e9f6ef;
    color: #245c43;
    font-size: 13px;
}

.addRole {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    background: #f5f8f6;
    padding: 13px;
    margin: 18px 0;
    border-radius: 8px;
}

.addRole label:nth-of-type(1),
.addRole label:nth-of-type(3) {
    flex: 1 1 170px;
}

.addRole label:nth-of-type(2) {
    flex: 0 1 96px;
}

.addRole label {
    display: grid;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.addRole input,
.addRole select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    padding: 8px 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
}

.addRole button {
    border: 0;
    border-radius: 7px;
    background: #128c58;
    color: #fff;
    padding: 9px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.roleLadder {
    display: grid;
    border-top: 1px solid var(--line);
}

.roleRung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
}

/* Level, access and remove stay together, and drop under the name when the
   settings column is narrow. */
.rungTools {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

/* The level reads as a rung: the higher, the deeper the green. */
.rungLevel {
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 30px;
    border-radius: 7px;
    background: #e5f6ed;
    color: #0f6e46;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.rungName {
    flex: 1 1 190px;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rungName b {
    font-size: 13.5px;
    color: var(--ink);
}

.rungName small {
    font-size: 11.5px;
    color: var(--muted);
}

.rungRename {
    display: flex;
    gap: 6px;
    align-items: center;
}

.rungRename input {
    flex: 1;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    padding: 4px 6px;
    margin-left: -6px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

.rungRename input:hover,
.rungRename input:focus {
    border-color: var(--line);
    background: #fff;
    outline: 0;
}

.rungLevelForm {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rungLevelForm label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--muted);
}

.rungLevelForm input {
    width: 58px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 6px;
    font: inherit;
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.roleRung .linkButton,
.levelPreview .linkButton {
    border: 0;
    background: none;
    padding: 0;
    color: #128c58;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.rungFixed {
    font-size: 11.5px;
    color: var(--muted);
}

.rungAccess {
    font-size: 12.5px;
    font-weight: 700;
    color: #128c58;
    text-decoration: none;
    white-space: nowrap;
}

.rungRemove {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    padding: 5px 9px;
    font: inherit;
    font-size: 11.5px;
    color: #b93c31;
    cursor: pointer;
}

.rungRemove:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: .6;
}

/* Before a category moves: what its people gain and lose. */
.levelPreview {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid #f1d9a8;
    border-radius: 9px;
    background: #fff8ea;
    color: #5e4413;
    font-size: 13px;
}

.levelPreview p {
    margin: 0;
}

.levelPreview em {
    font-style: normal;
    font-weight: 800;
    margin-right: 6px;
}

.levelGain em { color: #128c58; }
.levelLose em { color: #b93c31; }

.levelPreviewActions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

:root[data-theme="dark"] .addRole { background: var(--surface-2); }
:root[data-theme="dark"] .addRole input,
:root[data-theme="dark"] .addRole select,
:root[data-theme="dark"] .rungLevelForm input,
:root[data-theme="dark"] .rungRemove { background: var(--surface-3); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .rungLevel { background: #16322a; color: #6fd7a3; }
:root[data-theme="dark"] .roleSaved { background: #16322a; color: #b9e6cc; }
:root[data-theme="dark"] .levelPreview { background: #2e2512; border-color: #5a4418; color: #f2d9a6; }


/* --- Teams, one per work space ------------------------------------------------ */

.teamGroup + .teamGroup {
    margin-top: 16px;
}

.teamGroupHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
}

.teamGroupHead h3 {
    margin: 0;
    font-size: 15px;
}

.teamGroupHead h3 a {
    color: var(--ink);
    text-decoration: none;
}

.teamGroupHead h3 a:hover {
    color: #128c58;
}

.teamGroupHead p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.teamGroupLink {
    font-size: 12.5px;
    font-weight: 700;
    color: #128c58;
    text-decoration: none;
    white-space: nowrap;
}

.teamEmpty {
    padding: 28px;
    text-align: center;
    color: var(--muted);
}

/* --- Current priority and workload, from the work itself (2026-09-14) ---- */

.teamPriority {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-right: 14px;
    color: var(--ink);
    text-decoration: none;
}

.teamPriority b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.teamPriority:hover b {
    color: var(--green);
}

.teamPriority small {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 11px;
    color: var(--muted);
}

.teamPriority small .priority {
    font-size: 10px;
    padding: 2px 7px;
    font-style: normal;
}

.teamPriority small .bad {
    color: var(--danger-ink);
    font-weight: 700;
}

.teamPriority.none {
    font-size: 12px;
    color: var(--muted);
}

/* The bar keeps to 100%; the number says how far past it someone is. */
.teamRow .load {
    align-items: center;
    gap: 10px;
    padding-right: 12px;
}

.teamRow .load i {
    flex: 0 0 72px;
    width: 72px;
    height: 6px;
}

.teamRow .load span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.teamRow .load span b {
    font-size: 13px;
}

.teamRow .load span small {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load.load-free em,
.load.load-ok em { background: var(--done-solid); }
.load.load-full em { background: var(--attention-solid); }
.load.load-over em { background: var(--stop-solid); }

.load.load-full span b,
.personStats b.load-full { color: var(--warn-ink); }

.load.load-over span b,
.personStats b.load-over { color: var(--danger-ink); }

.unitPerson span.load-full { color: var(--warn-ink); font-weight: 700; }
.unitPerson span.load-over { color: var(--danger-ink); font-weight: 700; }

/* Where full starts, marked on each person's bar. */
.teamRow .load i {
    position: relative;
    overflow: visible;
}

.teamRow .load i em {
    border-radius: 5px;
}

.teamRow .load i s {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--attention-solid);
    opacity: .75;
}

/* "5.8 of 8": the units behind the percentage. */
.teamRow .load span b u {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
}

/* --- How workload is measured: Teams, and System Settings → Workload --- */

.workloadScale {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    grid-template-rows: auto auto;
    column-gap: 22px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 18px;
}

.workloadScale .scaleText {
    grid-row: 1 / span 2;
}

.workloadScale small {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--muted);
}

.workloadScale p {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink);
}

.scaleBar {
    display: flex;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    align-self: end;
}

.scaleBar .band {
    display: grid;
    place-items: center;
    min-width: 0;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}

.scaleBar .band em {
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
}

.scaleBar .ok { background: var(--done-solid); }
.scaleBar .full { background: var(--attention-solid); }
.scaleBar .over { background: var(--stop-solid); }

.scaleTicks {
    position: relative;
    height: 16px;
    align-self: start;
}

.scaleTicks span {
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
}

.scaleTicks span:first-child {
    transform: none;
}

.workloadScale .scaleChange {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    text-decoration: none;
}

@media (max-width: 760px) {
    .workloadScale {
        grid-template-columns: 1fr;
    }

    .workloadScale .scaleText {
        grid-row: auto;
        margin-bottom: 10px;
    }
}

/* System Settings → Workload. */

.workloadForm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 18px 0 0;
}

.workloadForm fieldset {
    margin: 0;
    padding: 12px 14px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.workloadForm legend {
    padding: 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--muted);
}

.workloadForm label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    column-gap: 10px;
    align-items: center;
    margin: 6px 0;
    font-size: 12.5px;
    font-weight: 700;
}

.workloadForm label span {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}

.workloadForm input[type="number"] {
    width: 76px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    text-align: right;
}

.workloadForm label.workloadCheck {
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 10px;
}

.workloadForm label.workloadCheck span {
    grid-column: 2;
    font-size: 12px;
    color: var(--ink);
}

.workloadActions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.workloadActions button {
    padding: 9px 18px;
    border: 0;
    border-radius: 7px;
    background: var(--done-solid);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.workloadActions small,
.workloadReset small {
    font-size: 11px;
    color: var(--muted);
}

.workloadReset {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.workloadPreview .previewTable {
    margin: 4px 0;
    border-top: 1px solid rgba(94, 68, 19, .15);
}

.previewHead,
.previewRow {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 80px 150px;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
}

.previewHead {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    opacity: .75;
}

.previewRow b small {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 600;
    opacity: .8;
}

.workloadTeam {
    margin-top: 20px;
}

.workloadTeam h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.workloadTeamRow {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 60px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}

.workloadTeamRow small {
    font-size: 11px;
    color: var(--muted);
}

b.load-full { color: var(--warn-ink); }
b.load-over { color: var(--danger-ink); }

:root[data-theme="dark"] .levelPreview {
    background: var(--warn-bg);
    border-color: var(--warn-line);
    color: #f3d9a4;
}

:root[data-theme="dark"] .workloadPreview .previewTable {
    border-top-color: var(--warn-line);
}

:root[data-theme="dark"] .scaleBar .band,
:root[data-theme="dark"] .workloadActions button {
    color: #0f1613;
}

/* ===========================================================================
   Step 2 of the team's feedback: edit where you look.
   =========================================================================== */

/*
 * Row cells that can be changed look like they can, at rest — not only under
 * the pointer. The team read them as plain text and went to the task page.
 */
.cellEdit select {
    border-color: var(--line);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237b8983' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 9px 6px;
    padding-right: 21px;
}

.cellEdit select.pill,
.cellEdit select.priority {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 9px 6px;
    padding-right: 21px;
}

.cellEdit select:hover {
    border-color: #bfe3cf;
}

/* The due date: a button showing the date, over a hidden calendar input. */
.cellEdit.cellDue {
    position: relative;
    overflow: visible;
}

.dueButton {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    padding: 5px 6px;
    font: inherit;
    font-size: 12px;
    color: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.dueButton:hover {
    border-color: #bfe3cf;
}

.dueButton.unset {
    color: var(--muted);
    border-style: dashed;
}

.cellDue.overdue .dueButton {
    color: var(--danger-ink);
    font-weight: 700;
    border-color: #f1c6c1;
}

.dueInput {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
}

/* Adding people to a job, from the row. */
.peopleButton {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px dashed #b9c6bf;
    border-radius: 50%;
    background: transparent;
    color: #5f6d66;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.peopleButton:hover,
.peopleButton:focus-visible {
    border-style: solid;
    border-color: #128c58;
    color: #128c58;
    outline: 0;
}

.peoplePicker {
    position: absolute;
    z-index: 60;
    width: 260px;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(20, 35, 29, .16);
    font-size: 13px;
}

.peoplePickerTitle {
    font-size: 12px;
    color: var(--muted);
}

.peopleSearch {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    font: inherit;
    font-size: 13px;
}

.peopleOptions {
    display: grid;
    gap: 2px;
    max-height: 230px;
    overflow-y: auto;
}

.peopleOptions label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.peopleOptions label[hidden] {
    display: none;
}

.peopleOptions label:hover {
    background: #f1faf5;
}

.peoplePickerActions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.peoplePickerActions .linkButton {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
}

:root[data-theme="dark"] .peoplePicker {
    background: var(--surface-2);
    border-color: var(--line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

:root[data-theme="dark"] .peopleSearch {
    background: var(--surface-3);
    color: var(--ink);
    border-color: var(--line);
}

:root[data-theme="dark"] .peopleOptions label:hover {
    background: var(--surface-3);
}

/* ---------------------------------------------------------------------------
   Colour that helps tell work apart (team feedback #5). A steady tone per
   person (Ui::personTone) on their initials, and per area (TaskAreas::tone) on
   its label and its sidebar dot. Soft grounds, dark inks: status and priority
   keep the loud colours.
   --------------------------------------------------------------------------- */

.pt-0 { --person-bg: #dcf2ec; --person-ink: #0f6b5c; }
.pt-1 { --person-bg: #ebe5fb; --person-ink: #5b3fa6; }
.pt-2 { --person-bg: #fcefd6; --person-ink: #85560a; }
.pt-3 { --person-bg: #e1ebfb; --person-ink: #2a5aa6; }
.pt-4 { --person-bg: #fae3ea; --person-ink: #a0314d; }
.pt-5 { --person-bg: #ebf1d8; --person-ink: #52651a; }
.pt-6 { --person-bg: #dbeff7; --person-ink: #1a6480; }
.pt-7 { --person-bg: #fce4d8; --person-ink: #9e481b; }

.owner i[class*="pt-"],
.alsoOn i[class*="pt-"],
.boardCard .owner i[class*="pt-"] {
    background: var(--person-bg);
    color: var(--person-ink);
}

/* The owner's dot, inside the owner select, left of the name. */
.ownerCell .cellEdit.owner select[class*="pt-"] {
    background-image:
        radial-gradient(circle at 10px 50%, var(--person-ink) 0 4px, transparent 4.5px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237b8983' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 7px center;
    background-size: auto, 9px 6px;
    padding-left: 20px;
}

/* The owner's name keeps its room; the people beside it make do. */
.ownerCell .cellEdit.owner {
    flex: 1 1 auto;
    min-width: 76px;
}

.ownerCell .alsoOn,
.ownerCell .peopleButton {
    flex: 0 0 auto;
}

.areaTag.area-0, .areaDot.area-0 { --area-bg: #dcf2ec; --area-ink: #0f6b5c; }
.areaTag.area-1, .areaDot.area-1 { --area-bg: #e1ebfb; --area-ink: #2a5aa6; }
.areaTag.area-2, .areaDot.area-2 { --area-bg: #ebe5fb; --area-ink: #5b3fa6; }
.areaTag.area-3, .areaDot.area-3 { --area-bg: #fcefd6; --area-ink: #85560a; }
.areaTag.area-4, .areaDot.area-4 { --area-bg: #fae3ea; --area-ink: #a0314d; }
.areaTag.area-5, .areaDot.area-5 { --area-bg: #ebf1d8; --area-ink: #52651a; }
.areaTag.area-6, .areaDot.area-6 { --area-bg: #dbeff7; --area-ink: #1a6480; }
.areaTag.area-7, .areaDot.area-7 { --area-bg: #fce4d8; --area-ink: #9e481b; }

.areaTag[class*="area-"] {
    background: var(--area-bg);
    color: var(--area-ink);
}

/* `.sidebar nav a i` is the red count badge; the dot must outrank it. */
.sidebar nav a i.areaDot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin: 0 7px 0 0;
    padding: 0;
    border-radius: 50%;
    background: var(--area-ink, #98a5a0);
    font-style: normal;
    font-size: 0;
}

:root[data-theme="dark"] .areaTag[class*="area-"] {
    background: color-mix(in srgb, var(--area-ink) 28%, transparent);
    color: color-mix(in srgb, var(--area-ink) 45%, #ffffff);
}

/* --- The Technology team's Task Center: its own work first (feedback #7) --- */

.workStrip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.workStripHello {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 12px 18px;
    margin-right: auto;
    min-width: 200px;
}

.workStripHello b {
    font-size: 14px;
}

.workStripHello small {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.workStrip > a {
    display: grid;
    align-content: center;
    gap: 1px;
    min-width: 104px;
    padding: 10px 18px;
    border-left: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
}

.workStrip > a b {
    font-size: 20px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.workStrip > a small {
    font-size: 11.5px;
    color: var(--muted);
}

.workStrip > a:hover {
    background: #f4faf6;
}

.workStrip > a.bad b {
    color: var(--danger-ink);
}

.workStrip > a.waiting b {
    color: #b36b00;
}

.workStrip > a.overviewLink {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #128c58;
}

:root[data-theme="dark"] .workStrip > a:hover {
    background: var(--surface-3);
}

@media (max-width: 760px) {
    .workStripHello { flex: 1 0 100%; }
    .workStrip > a { flex: 1 1 33%; border-top: 1px solid var(--line); }
}

/* ===========================================================================
   A task beside the list (team feedback #11): partials/record-peek, opened by
   workos.js. Sits above the page, under the people picker.
   =========================================================================== */

body.peeking {
    overflow: hidden;
}

.peekLayer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    justify-content: flex-end;
    background: rgba(12, 31, 23, .22);
}

.peek {
    width: min(460px, 100vw);
    height: 100%;
    overflow-y: auto;
    background: #fff;
    box-shadow: -12px 0 32px rgba(20, 35, 29, .14);
    padding: 22px 24px 28px;
    animation: peekIn .16s ease-out;
}

@keyframes peekIn {
    from { transform: translateX(28px); opacity: .5; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .peek { animation: none; }
}

.peekLoading {
    color: var(--muted);
    font-size: 13px;
}

/* A <header>: globals.css gives every header space-between and a bottom
   margin, which on a grid shrinks the column to its content. */
.peekHead {
    position: relative;
    display: grid;
    gap: 6px;
    justify-content: stretch;
    align-items: start;
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.peekEyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-right: 44px;
    font-size: 12px;
    color: var(--muted);
}

.peekEyebrow .areaTag {
    margin-left: 0;
}

.peekClose {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f0f4f2;
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.peekClose:hover,
.peekClose:focus-visible {
    background: #e3eee8;
    outline: 2px solid #b9e3cc;
}

.peekHead > * {
    min-width: 0;
}

.peekHead form.peekTitle {
    display: block;
    width: 100%;
    margin: 0;
}

.peekTitle textarea {
    display: block;
    width: 100%;
    resize: none;
    overflow: hidden;
    margin-left: -7px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.peekTitle textarea:hover,
.peekTitle textarea:focus {
    border-color: var(--line);
    background: #fff;
    outline: 0;
}

.peekTitleText {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
}

.peekCrumb {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.peekCrumb a {
    color: #128c58;
    text-decoration: none;
    font-weight: 700;
}

.peekFields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.peekField label {
    display: grid;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.peekField select,
.peekField input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
    background-color: #fff;
}

.peekField select.pill {
    justify-self: stretch;
    font-weight: 700;
}

/* The panel's selects draw their own arrow, as the row's do. Left to Safari's
   native look, a select ignores its left padding, and the owner's colour dot
   sat on the first letter of their name. */
.peekField select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237b8983' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 9px 6px;
    padding-right: 26px;
}

.peekField select.pill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* Its colour comes from a `background` shorthand (.pill.st-*), which resets
       these too. */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 9px 6px;
}

.peekField select[class*="pt-"] {
    background-image:
        radial-gradient(circle at 12px 50%, var(--person-ink) 0 4px, transparent 4.5px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237b8983' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 10px center;
    background-size: auto, 9px 6px;
    padding-left: 24px;
}

.peekField.saving,
.peekDescription.saving,
.peekTitle.saving {
    opacity: .6;
}

.peekFacts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 0;
}

.peekFacts dt {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.peekFacts dd {
    margin: 3px 0 0;
    font-size: 13px;
}

.peekSection {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.peekSection h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 9px;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

.peekSection h3 small {
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}

.peekPeople {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.peekPerson {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.peekPerson i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 800;
    background: var(--person-bg, #e9f4ee);
    color: var(--person-ink, #118353);
}

.peekDescription textarea {
    width: 100%;
    min-height: 76px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink);
    resize: vertical;
}

.peekDescription textarea:focus {
    outline: 2px solid #b9e3cc;
    border-color: #128c58;
}

.peekText,
.peekMuted {
    margin: 0;
    font-size: 13px;
    white-space: pre-line;
}

.peekMuted {
    color: var(--muted);
}

.peekSubtask {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 6px;
    margin: 0 -6px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
}

.peekSubtask:hover {
    background: #f4faf6;
}

.peekSubtask small {
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
}

.peekRemark {
    padding: 6px 0;
}

.peekRemark b {
    font-size: 12.5px;
}

.peekRemark small {
    margin-left: 6px;
    font-size: 11px;
    color: var(--muted);
}

.peekRemark p {
    margin: 3px 0 0;
    font-size: 13px;
    white-space: pre-line;
}

.peekMore {
    display: inline-block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: #128c58;
    text-decoration: none;
}

.peekRemarkForm {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.peekRemarkForm input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    font: inherit;
    font-size: 13px;
}

.peekFoot {
    padding-top: 16px;
}

.peekOpen {
    font-size: 13.5px;
    font-weight: 700;
    color: #128c58;
    text-decoration: none;
}

:root[data-theme="dark"] .peek {
    background: var(--surface-2);
    box-shadow: -12px 0 32px rgba(0, 0, 0, .5);
}

:root[data-theme="dark"] .peekClose { background: var(--surface-3); }
:root[data-theme="dark"] .peekTitle textarea:hover,
:root[data-theme="dark"] .peekTitle textarea:focus,
:root[data-theme="dark"] .peekField select,
:root[data-theme="dark"] .peekField input,
:root[data-theme="dark"] .peekDescription textarea,
:root[data-theme="dark"] .peekRemarkForm input {
    background-color: var(--surface-3);
    color: var(--ink);
    border-color: var(--line);
}
:root[data-theme="dark"] .peekSubtask:hover { background: var(--surface-3); }

@media (max-width: 520px) {
    .peek { padding: 18px 16px 24px; }
    .peekFields { grid-template-columns: 1fr; }
}

/* --- The task page, work first (team feedback #4) ---------------------------- */

.pageTitle textarea {
    display: block;
    width: 100%;
    resize: none;
    overflow: hidden;
    margin: 6px 0 4px -7px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ink);
}

.pageTitle textarea:hover,
.pageTitle textarea:focus {
    border-color: var(--line);
    background: #fff;
    outline: 0;
}

.pageDescription {
    display: grid;
    gap: 4px;
}

.pageDescription textarea {
    width: 100%;
    min-height: 96px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    resize: vertical;
}

.pageDescription textarea:focus {
    outline: 2px solid #b9e3cc;
    border-color: #128c58;
}

.pageTitle.saving,
.pageDescription.saving {
    opacity: .6;
}

.pageSaved {
    min-height: 16px;
    font-size: 12px;
    font-weight: 700;
    color: #128c58;
}

.teamSection h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.teamSection .teamGroup i[class*="pt-"] {
    background: var(--person-bg);
    color: var(--person-ink);
}

/* History folds away: it is the record, not the work. */
.recordHistory {
    margin-top: 18px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.recordHistory > summary,
.activityMore > summary {
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    color: #128c58;
}

.recordHistory > summary::-webkit-details-marker,
.activityMore > summary::-webkit-details-marker {
    display: none;
}

.recordHistory > summary::before,
.activityMore > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    font-size: 10px;
    transition: transform .12s ease;
}

.recordHistory[open] > summary::before,
.activityMore[open] > summary::before {
    transform: rotate(90deg);
}

.activityMore {
    margin: 6px 0 2px;
}

:root[data-theme="dark"] .pageTitle textarea:hover,
:root[data-theme="dark"] .pageTitle textarea:focus,
:root[data-theme="dark"] .pageDescription textarea {
    background: var(--surface-3);
    color: var(--ink);
    border-color: var(--line);
}

/* --- Moving work by hand (team feedback #9, #10) ------------------------------ */

.boardCard[draggable="true"] {
    cursor: grab;
}

.boardCard.dragging {
    opacity: .45;
    cursor: grabbing;
}

.boardCard.saving {
    opacity: .7;
}

.boardColumn.dropTarget {
    outline: 2px dashed #128c58;
    outline-offset: -2px;
    background: #f1faf5;
}

:root[data-theme="dark"] .boardColumn.dropTarget {
    background: var(--surface-3);
}

/* A list in sections, the Board's own "Group by". */
.listGroupBy {
    margin: 0 0 10px;
}

.listGroup {
    border-bottom: 1px solid var(--line);
}

.listGroup > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--quiet-bg, #f8fbf9);
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.listGroup > summary::-webkit-details-marker {
    display: none;
}

.listGroup > summary::before {
    content: "▸";
    font-size: 10px;
    color: var(--muted);
    transition: transform .12s ease;
}

.listGroup[open] > summary::before {
    transform: rotate(90deg);
}

.listGroup > summary > span {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
}

:root[data-theme="dark"] .listGroup > summary {
    background: var(--surface-2);
}

/* --- A task into another, or a subtask out (team feedback #8) ---------------- */

.rowDrag {
    flex: 0 0 12px;
    width: 12px;
    margin-left: -6px;
    color: #a9b5af;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -2px;
    cursor: grab;
    opacity: 0;
    transition: opacity .12s ease;
    user-select: none;
}

.record:hover .rowDrag,
.record:focus-within .rowDrag {
    opacity: 1;
}

@media (hover: none) {
    .rowDrag { display: none; }
}

.record.dragging {
    opacity: .45;
}

.record.dropTarget {
    outline: 2px dashed #128c58;
    outline-offset: -2px;
    background: #f1faf5;
}

.promoteZone {
    margin: 8px 12px;
    padding: 12px;
    border: 2px dashed #b9d9c8;
    border-radius: 9px;
    color: #128c58;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.promoteZone[hidden] {
    display: none;
}

.promoteZone.dropTarget {
    border-color: #128c58;
    background: #f1faf5;
}

.toast .toastUndo {
    margin-left: 14px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #bdf0d4;
}

.promoteLayer .confirmModal {
    max-width: 440px;
}

.peekCrumb .linkButton {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: #128c58;
    cursor: pointer;
}

:root[data-theme="dark"] .record.dropTarget,
:root[data-theme="dark"] .promoteZone.dropTarget {
    background: var(--surface-3);
}

/* --- "Save as my view" (team feedback #14) ---------------------------------- */

.savedView {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin: -6px 0 8px;
    font-size: 12.5px;
}

.savedView form {
    margin: 0;
}

.savedView .linkButton {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: #128c58;
    cursor: pointer;
    text-decoration: none;
}

.savedViewMark {
    color: var(--muted);
    font-weight: 700;
}

/* --- View as (the Super System Owner, 2026-09-14) ----------------------------
   A strip that stays at the top of every page while someone else's view is
   showing, in a colour nothing else in the app uses, so it is never mistaken
   for your own. */

:root {
    --look-ink: #6a3fa0;
    --look-bg: #f4eefb;
    --look-line: #ddcdf0;
}

:root[data-theme="dark"] {
    --look-ink: #c6a8f5;
    --look-bg: #231d35;
    --look-line: #3a2f55;
}

.viewingAs {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -12px 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--look-line);
    border-radius: 10px;
    background: var(--look-bg);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(40, 20, 70, .08);
}

.viewingAsMark {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--look-ink);
    color: #fff;
    font-size: 17px;
}

.viewingAsText {
    flex: 1;
    min-width: 0;
}

.viewingAsText b {
    display: block;
    font-size: 14px;
    color: var(--look-ink);
}

.viewingAsText small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

.viewingAsRefused {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--danger-ink);
}

.viewingAsActions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.viewingAsActions form {
    margin: 0;
}

.viewingAsActions select {
    max-width: 200px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--look-line);
    border-radius: 7px;
    background: var(--surface, #fff);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
}

.viewingAsLink {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--look-ink);
    cursor: pointer;
}

.viewingAsLink:hover {
    text-decoration: underline;
}

.viewingAsStop,
.viewAsStart {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--look-ink);
    border-radius: 7px;
    background: var(--look-ink);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

:root[data-theme="dark"] .viewingAsStop,
:root[data-theme="dark"] .viewAsStart {
    color: #1b1428;
}

.accessTag.super {
    background: var(--look-bg);
    border-color: var(--look-line);
    color: var(--look-ink);
}

.viewAsForm {
    display: inline;
    margin: 0;
}

.viewAsPerson {
    margin-top: 10px;
    height: 32px;
    border: 1px solid var(--look-line);
    border-radius: 7px;
    background: var(--look-bg);
    color: var(--look-ink);
    padding: 0 12px;
    font-weight: 700;
    cursor: pointer;
}

/* The page that starts a look. */

.viewAsIntro {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-color: var(--look-line);
    background: var(--look-bg);
}

.viewAsIntro b {
    display: block;
    font-size: 14.5px;
    color: var(--look-ink);
}

.viewAsIntro p {
    margin: 4px 0 8px;
    max-width: 760px;
    font-size: 13px;
    color: var(--ink);
}

.viewAsIntro ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--muted);
}

.viewAsIntro li + li {
    margin-top: 2px;
}

.viewAsHead,
.viewAsRow {
    display: grid;
    grid-template-columns: minmax(210px, 1.3fr) minmax(170px, 1fr) minmax(190px, 1.2fr) minmax(120px, .7fr) 92px;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
}

.viewAsHead {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    color: #8b968f;
}

.viewAsRow {
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}

.viewAsRow:last-child {
    border-bottom: 0;
}

.viewAsRow .teamPerson p {
    margin: 0;
    min-width: 0;
}

.viewAsRow .teamPerson p b,
.viewAsRow .teamPerson p small {
    display: block;
}

.viewAsRow .teamPerson p b {
    font-size: 13px;
}

.viewAsRow .teamPerson p small {
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}

.viewAsAccess {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.viewAsAccess span {
    font-weight: 700;
}

.viewAsSeen {
    color: var(--muted);
}

.viewAsRow form {
    margin: 0;
    justify-self: end;
}

.viewAsLooks {
    margin-top: 16px;
    padding: 14px 18px;
}

.viewAsLooks h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.viewAsLooks p {
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}

.viewAsLooks p:last-child {
    border-bottom: 0;
}

.viewAsLooks p small {
    margin-left: 6px;
    color: var(--muted);
}

.viewAsLooks .viewAsNone {
    color: var(--muted);
}

@media (max-width: 1100px) {
    .viewingAs {
        flex-wrap: wrap;
    }

    .viewingAsActions {
        width: 100%;
        justify-content: flex-start;
    }

    .viewAsHead {
        display: none;
    }

    .viewAsRow {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .viewAsAccess,
    .viewAsOpens,
    .viewAsSeen {
        grid-column: 1;
    }

    .viewAsRow form {
        grid-column: 2;
        grid-row: 1;
    }
}

/* --- Leads: business development's pipeline (Sanket, 2026-09-21) --------- */

.leadFigures b.figureParts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.leadFigures b.figureParts span {
    display: block;
    font-size: 24px;
    white-space: nowrap;
}

.leadFigures b.figureParts i {
    margin-left: 5px;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--muted);
}

.leadFigures a em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 10.5px;
    color: var(--muted);
}

.leadToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.leadToolbar .viewSwitch {
    margin: 0;
}

button.addLead {
    border: 1px solid #158e5a;
    background: #158e5a;
    color: #fff;
    border-radius: 7px;
    padding: 9px 14px;
    font-weight: 700;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

button.addLead:hover {
    background: #0f7549;
}

/* The pipeline as a list, for reading down rather than across. */
.leadTableHead,
.leadRow {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) .7fr .75fr .95fr .85fr .7fr .6fr;
    gap: 12px;
    align-items: center;
    padding: 13px 18px;
}

.leadTableHead {
    font-size: 9px;
    letter-spacing: .8px;
    color: var(--muted);
    background: var(--surface-2, #f7f9f8);
}

.leadRow {
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}

/* Without a size, the list is one column shorter. */
.leadTableHead.noSize,
.leadRow.noSize {
    grid-template-columns: minmax(0, 1.9fr) .7fr .8fr .9fr .75fr .65fr;
}

/* The crop reads as its own thing, not one more word in the grey line. */
.leadCrop em {
    display: inline-block;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leadRow:hover {
    background: var(--hover, #f8fbf9);
}

.leadWho {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.leadRow b,
.leadRow strong {
    font-size: 13px;
}

.leadRow small,
.leadRow span {
    font-size: 11.5px;
    color: var(--muted);
}

.leadRow .leadWho b {
    color: var(--ink);
}

.leadRow .assigned {
    color: var(--success-ink);
    font-weight: 600;
}

.leadRow .unassigned {
    color: var(--warn-ink);
    font-weight: 600;
}

.leadValue {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A card in the pipeline: what it is worth, whose it is, how long it has sat. */
.leadBoard .leadCard .boardCardLink {
    gap: 4px;
}

.leadCard .leadValue {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--success-ink);
}

.leadCard .leadWaiting {
    display: block;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--muted);
}

.leadCard.goingCold {
    border-left: 3px solid var(--attention-solid, #f5871f);
}

.leadCard.goingCold .leadWaiting {
    color: var(--warn-ink);
    font-weight: 600;
}

p.ticketOutcome.fromLead {
    margin: -6px 0 14px;
}

/* Above the pipeline: which crop, and what kind of outfit. */
.leadSorts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

.leadSorts label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 9px;
    letter-spacing: .8px;
    color: var(--muted);
}

.leadSorts select {
    border: 1px solid var(--line);
    background: var(--surface, #fff);
    border-radius: 7px;
    padding: 7px 9px;
    color: inherit;
    font: inherit;
    font-size: 12px;
    letter-spacing: normal;
}

/* One or the other, never both (Sanket, 2026-09-22): a crop is measured in
   land, livestock is counted. `.createModal label { display: block }` beats the
   browser's own [hidden], so the hidden one has to be put down by name. */
/* Districts are ticked, not shift-clicked (Sanket, 2026-09-22): a multiple
   select needs a modifier key nobody has on a phone. */
.districtField {
    display: block;
    margin: 13px 0;
}

.districtFieldLabel {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.districtFieldLabel em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--success-ink);
}

.districtPicker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 168px;
    overflow-y: auto;
    margin-top: 7px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface, #fff);
}

.districtChip {
    margin: 0;
}

.districtChip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.districtChip span {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.districtChip input:checked + span {
    border-color: #158e5a;
    background: #158e5a;
    color: #fff;
}

.districtChip input:focus-visible + span {
    outline: 2px solid var(--info-ink);
    outline-offset: 2px;
}

[data-when-farming][hidden] {
    display: none !important;
}

.landInputs {
    display: flex;
    gap: 8px;
    margin-top: 7px;
}

.landInputs input {
    flex: 1 1 auto;
    margin-top: 0;
}

.landInputs select {
    flex: 0 0 120px;
    margin-top: 0;
}

.leadWhere b {
    font-weight: 700;
}

/* Crop, kind and district, each a way into the rest of the pipeline. */
.leadSeeAlso {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
}

.leadSeeAlso a {
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 11px;
    color: var(--muted);
    text-decoration: none;
}

.leadSeeAlso a:hover {
    border-color: var(--success-line);
    background: var(--success-bg);
    color: var(--success-ink);
}

/* Keeping up with a lead or a client (Sanket, 2026-09-22). */
.followUpRow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
}

.followUpRow > div {
    flex: 1 1 auto;
    min-width: 0;
}

.followUpRow b {
    display: block;
    font-size: 13px;
}

.followUpRow small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
}

.followUpRow .followUpOutcome {
    color: var(--ink);
    opacity: .85;
}

.followUpRow.isDone b {
    color: var(--muted);
    font-weight: 600;
}

.followUpRow.isLate b {
    color: var(--danger-ink);
}

.followUpRow form {
    margin: 0;
}

/* One line to line up the next step. */
.followUpAdd {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-2, #f7f9f8);
}

.followUpAdd select,
.followUpAdd input {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 10px;
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    font-size: 12px;
}

.followUpAdd input[name="note"] {
    flex: 1 1 220px;
    min-width: 0;
}

.followUpAdd button {
    border: 1px solid #158e5a;
    background: #158e5a;
    color: #fff;
    border-radius: 7px;
    padding: 8px 14px;
    font-weight: 700;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.followUpCount {
    font-size: 12px;
    color: var(--muted);
}

.followUpsLink {
    text-decoration: none;
}

@media (max-width: 760px) {
    .followUpAdd input[name="note"] {
        flex: 1 1 100%;
    }
}

/* System Settings → Leads: what a lead is measured by. */
.measureChoices {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.measureChoice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
}

.measureChoice.chosen {
    border-color: var(--success-line);
    background: var(--success-bg);
}

.measureChoice input {
    margin-top: 3px;
    width: auto;
}

.measureChoice b,
.measureChoice small {
    display: block;
}

.measureChoice small {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--muted);
}

.measureNote {
    margin: 0;
}

.measureActions {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    margin-top: 20px;
    padding-top: 16px;
}

.measureActions button {
    border: 1px solid #158e5a;
    background: #158e5a;
    color: #fff;
    border-radius: 7px;
    padding: 10px 18px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

/* One lead's page. */
.leadHead h2 .ref {
    margin-right: 8px;
}

.leadActions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.leadFacts {
    margin-bottom: 14px;
}

.leadContact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 4px 18px 16px;
    font-size: 13px;
}

.leadContact a {
    color: var(--success-ink);
    font-weight: 600;
    text-decoration: none;
}

.leadContact a:hover {
    text-decoration: underline;
}

.leadEvent {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 18px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
}

.leadEvent > span {
    color: var(--muted);
}

.leadEvent small {
    display: block;
    color: var(--muted);
}

@media (max-width: 900px) {
    .leadTableHead {
        display: none;
    }

    .leadRow {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 6px;
    }

    /* On a phone: who it is, the crop, where it has got to and how long. */
    .leadRow > span:nth-child(5),
    .leadRow > span:nth-child(6) {
        display: none;
    }

    .leadRow .leadCrop {
        justify-self: end;
    }

    .leadEvent {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* --- Phones ------------------------------------------------------------------ */

/*
 * Below 760px globals.css folds the sidebar into a 68px strip of icons, hiding
 * the names by hiding <button>s. The sidebar here is links, so the names were
 * crushed into the strip instead, Administration and the Task Center's lists
 * were hidden outright, the bell went with them, and the header's buttons ran
 * off a page that cannot scroll sideways (Sanket, 2026-09-15: "impossible to
 * navigate properly"). Below 900px — a phone, or a tablet held upright, where
 * the full sidebar left the page ~460px — the sidebar is a drawer now, opened
 * from a bar across the top that also carries the bell and the theme switch
 * (partials/mobile-bar; "The menu on a phone" in workos.js). 900px is where
 * the work lists already give up their columns.
 */

.mobileBar,
.navScrim,
.sidebarClose {
    display: none;
}

/* A list's status tabs and its work space filter share a line only while they
   fit: on a tablet on its side the filter ran off the edge of the page. */
.toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
}

@media (max-width: 900px) {
    /* The bar: under the chat bubble (8) and every layer that opens. */
    .mobileBar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 7;
        display: flex;
        align-items: center;
        gap: 2px;
        height: 56px;
        padding: 0 6px;
        background: var(--surface, #fff);
        border-bottom: 1px solid var(--line);
    }

    .mobileBarBrand {
        display: block;
        margin: 0 auto 0 4px;
        padding: 6px 4px;
    }

    .mobileBarBrand img {
        width: 104px;
        height: auto;
    }

    .mobileBarButton {
        position: relative;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--ink);
        font: inherit;
        font-size: 19px;
        text-decoration: none;
        cursor: pointer;
    }

    .mobileBarButton:active {
        background: var(--line);
    }

    .mobileBar .iconBtn i {
        top: 4px;
        right: 2px;
    }

    /* The sidebar, as a drawer over the page. */
    .sidebar {
        z-index: 90;
        width: min(300px, 86vw);
        padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
        overscroll-behavior: contain;
        outline: none;
    }

    html.navOpen .sidebar,
    .sidebar:target {
        transform: none;
        visibility: visible;
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(11, 31, 23, .3);
    }

    .navScrim {
        position: fixed;
        inset: 0;
        z-index: 89;
        background: rgba(11, 26, 20, .45);
    }

    html.navOpen .navScrim,
    .sidebar:target ~ .navScrim {
        display: block;
    }

    /* The page stays put under an open drawer. */
    html.navOpen,
    html.navOpen body {
        overflow: hidden;
    }

    .sidebarClose {
        position: absolute;
        top: 8px;
        right: 6px;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        color: var(--muted);
    }

    .brand {
        padding: 6px 52px 16px 8px;
    }

    /* Everything the strip of icons hid (globals.css), back in the drawer. */
    .sidebar nav p,
    .sidebar .admin,
    .profile .profileLink div,
    .sidebar nav .sidebarReset button,
    .sidebar nav .navAddArea .navAddAreaOpen,
    .sidebar nav .navAddAreaField button {
        display: block;
    }

    /* globals.css hides every sidebar button at this width, sign-out included. */
    .sidebar .signOutRow button {
        display: flex;
    }

    /* Room for a finger, which is not a pointer. */
    .sidebar nav a,
    .admin a {
        min-height: 44px;
    }

    .sidebar nav .navTreeBody a {
        min-height: 40px;
    }

    /* The page, under the bar. */
    .content {
        width: 100%;
        margin-left: 0;
        padding: 72px 14px 92px;
    }

    .viewingAs {
        top: 64px;
    }

    header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 18px;
    }

    .headerActions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* A whole row of its own, so it needs to look like a box to type in. */
    .headerActions .search {
        flex: 1 1 100%;
        width: auto;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface, #fff);
    }

    /* On the bar instead; and there is no keyboard to press ⌘K on. */
    .headerActions .shortcutHint,
    .headerActions .themeButton,
    .headerActions [data-alert-bell] {
        display: none;
    }

    .headerActions .secondaryAction,
    .headerActions .primary {
        flex: 1 1 0;
        height: 44px;
        font-size: 14px;
    }
}

/* Safari on a phone zooms the whole page into any field set smaller than 16px,
   and does not zoom back out when you leave it. */
@media (max-width: 760px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Pages that were wider than a phone, found by measuring every page at 375px.
   A one-column grid still grows to its widest content unless the column is
   allowed to shrink below it, hence minmax(0, 1fr) rather than 1fr. */
@media (max-width: 760px) {
    .settingsLayout,
    .productLayout {
        grid-template-columns: minmax(0, 1fr);
    }

    .settingsLayout > *,
    .productLayout > * {
        min-width: 0;
    }

    .personHead,
    .unitHero {
        flex-wrap: wrap;
    }

    .personStats {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .unitAccessGrid {
        grid-template-columns: minmax(0, 1fr) 76px 76px;
        gap: 8px;
        padding: 12px 14px 14px;
    }

    .unitAccessHead {
        font-size: 9px;
        letter-spacing: .4px;
    }

    /* Status and Edit / Delete go under the rule rather than beside it. */
    .automationRow {
        grid-template-columns: 42px minmax(0, 1fr);
        row-gap: 8px;
    }

    .automationRow > em,
    .automationRow > .automationRowActions {
        grid-column: 2;
    }

    /* A settings row's name box would not shrink, pushing Hide and Remove off
       the edge; now they drop to a second line. */
    .settingList > div {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .settingList input {
        flex: 1 1 140px;
        min-width: 0;
    }
}

/* A work list below 900px: the Task Center, My Work, a work space, every list.
   There the prototype drops a row to two columns and hides its owner, status
   and priority by class. Where the row can be edited those cells are forms, so
   nothing was hidden and the title was squeezed to its reference number; where
   it cannot, the title kept one line and the status went. Now the title and the
   row's buttons share the first line, the title up to two lines of it, and the
   status, owner and priority sit under it, indented to the title. */
@media (max-width: 900px) {
    .recordList .record {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 14px 12px 60px;
    }

    /* Pulled back over the indent, which is the icon and its gap, and leaving
       room beside it for the row's buttons (up to three of them, ~95px). */
    .recordList .record > .recordLead {
        order: -2;
        flex: 1 1 calc(100% - 57px);
        margin-left: -46px;
    }

    .recordList .record > .rowActions {
        order: -1;
        align-self: flex-start;
        margin-left: auto;
    }

    .recordList .record.subtaskOf {
        padding-left: 78px;
    }

    .recordList .record.subtaskOf > .recordLead {
        flex-basis: calc(100% - 65px);
        margin-left: -38px;
    }

    .recordList .record p b {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        line-height: 1.3;
    }

    .recordList .record > .pill,
    .recordList .record > .priority {
        display: inline-block;
    }

    /* The row's pickers shrink to their words here rather than filling a
       column, and the desktop sizes leave the words running under the arrow. */
    .recordList .record .cellEdit select.pill,
    .recordList .record .cellEdit select.priority {
        width: auto;
        padding: 5px 26px 5px 10px;
    }

    .recordList .record .ownerCell .cellEdit.owner select {
        padding-right: 26px;
    }

    .recordList .record > .owner {
        display: flex;
    }

    /* The status tabs and the work space filter each get a line. */
    .toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .toolbar .tabs {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .toolbar .filterForm,
    .toolbar .filterForm select {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Leads → Reporting (Sanket, 2026-09-23: "start on the reporting").

   Rows of numbers, and every number is a link to the list it counted. The
   figures at the top borrow the Leads tiles, so the two pages read alike; what
   is new here is the table, the bar, and the quiet list.
   --------------------------------------------------------------------------- */

/* Six figures read as one row, not the prototype's five and a stray. */
.reportFigures {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    .reportFigures {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .reportFigures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.reportSaid {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted);
}

.reportSaid b {
    color: var(--ink);
}

.reportSaid em {
    font-style: normal;
    font-weight: 600;
}

.reportBlock {
    margin-bottom: 16px;
    overflow: hidden;
}

/* --- The grouped tables -------------------------------------------------- */

.reportHead,
.reportRow {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) .6fr .5fr .5fr .7fr .8fr minmax(0, 1.4fr);
    gap: 12px;
    align-items: center;
    padding: 11px 18px;
}

/* Nothing to say about size: one column fewer. */
.reportHead.noSize,
.reportRow.noSize {
    grid-template-columns: minmax(0, 2fr) .7fr .6fr .6fr .8fr .9fr;
}

/* Whose follow-ups: five columns of its own. */
.reportHead.keepingUp,
.reportRow.keepingUp {
    grid-template-columns: minmax(0, 2fr) .7fr .7fr .9fr 1.1fr;
}

.reportHead {
    font-size: 9px;
    letter-spacing: .8px;
    color: var(--muted);
    background: var(--surface-2, #f7f9f8);
}

.reportHead span:not(:first-child),
.reportRow > :not(:first-child) {
    text-align: right;
}

.reportRow {
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    font-size: 12.5px;
}

.reportRow:hover {
    background: var(--hover, #f8fbf9);
}

.reportWho {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.reportWho:hover {
    color: var(--success-ink);
    text-decoration: underline;
}

.reportCount {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

a.reportCount:hover {
    color: var(--success-ink);
    text-decoration: underline;
}

/* A nought is not worth reading: it stays out of the way of the numbers. */
.reportCount.nought {
    color: var(--muted);
    font-weight: 500;
}

.reportCount.isLate {
    color: var(--danger-ink);
}

.reportShare {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

.reportSize {
    font-size: 11.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Stages, and the reasons deals go ------------------------------------ */

.reportStage {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(60px, 1.6fr) 44px minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: center;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}

.reportStage:hover {
    background: var(--hover, #f8fbf9);
}

.reportStage b {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reportStage strong {
    font-size: 15px;
    text-align: right;
}

.reportStage span {
    font-size: 11.5px;
    color: var(--muted);
}

.reportStage .isLate {
    color: var(--danger-ink);
    font-weight: 600;
}

.reportStage.nought b,
.reportStage.nought strong {
    color: var(--muted);
    font-weight: 600;
}

.reportBar i {
    display: block;
    height: 7px;
    border-radius: 9px;
    background: var(--quiet-bg, #edf2ef);
    overflow: hidden;
}

.reportBar i > em {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 9px;
    background: var(--green, #16945d);
    font-size: 0;
}

.reportBar.lost i > em {
    background: var(--danger-ink, #c0392b);
}

/* --- Nobody has spoken to them ------------------------------------------- */

.reportQuiet {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) .9fr 1.1fr;
    gap: 12px;
    align-items: center;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}

.reportQuiet:hover {
    background: var(--hover, #f8fbf9);
}

.reportQuiet b {
    font-size: 13px;
}

.reportQuiet span {
    font-size: 11.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reportQuiet .isLate {
    color: var(--danger-ink);
    font-weight: 600;
    text-align: right;
}

.reportMore {
    display: block;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-2, #f7f9f8);
    font-size: 12px;
    font-weight: 600;
    color: var(--success-ink);
    text-decoration: none;
}

.reportMore:hover {
    text-decoration: underline;
}

/* On a phone the column heads have to go, so each number carries its own
   name instead (data-label) and the row reads as a wrapped sentence. */
@media (max-width: 860px) {
    .reportHead {
        display: none;
    }

    .reportRow,
    .reportStage,
    .reportQuiet {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        padding: 12px 16px;
    }

    .reportRow > :not(:first-child),
    .reportStage > :not(:first-child),
    .reportQuiet > :not(:first-child) {
        text-align: left;
    }

    .reportWho,
    .reportQuiet .leadWho,
    .reportStage b {
        flex: 1 1 100%;
    }

    .reportRow [data-label]::before,
    .reportStage [data-label]::before,
    .reportQuiet [data-label]::before {
        content: attr(data-label) ' ';
        font-weight: 500;
        font-size: 11px;
        color: var(--muted);
    }

    .reportStage strong {
        font-size: 13px;
    }

    .reportBar {
        display: none;
    }
}

/* How long without a word counts as quiet, in System Settings → Leads. */
.quietDays {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--ink);
}

.quietDays input {
    width: 76px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.quietDays small {
    flex: 1 1 100%;
}

/* A settings list somebody may only look at: the value as text, where the
   rename field was (Sanket, 2026-09-23, department managers). The row is a
   flex line in globals.css, so the value simply takes the room. */
.settingList > div.readOnly .settingValue {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   System Settings → Service Desk: who works the ticket queue (Sanket,
   2026-09-23). One row a person, whoever works it at the top.
   --------------------------------------------------------------------------- */

.deskList {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.deskRow {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1.2fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.deskRow:last-child {
    border-bottom: 0;
}

.deskRow.onDesk {
    background: var(--success-bg, #f2faf5);
}

.deskWho b {
    display: block;
    font-size: 13px;
}

.deskWho small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}

.deskTag {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--success-ink);
}

.deskTag.muted {
    font-weight: 500;
    color: var(--muted);
}

.deskFixed {
    color: var(--muted);
    font-size: 12px;
}

.deskRow .person.quiet {
    background: var(--quiet-bg, #edf2ef);
    color: var(--muted);
}

@media (max-width: 760px) {
    .deskRow {
        grid-template-columns: 34px minmax(0, 1fr);
        row-gap: 6px;
    }

    .deskHas,
    .deskRow form,
    .deskFixed {
        grid-column: 2;
    }
}

/* ---------------------------------------------------------------------------
   Task dependencies (Sanket, 2026-09-23): what this waits on, what it holds
   up, what it belongs with. One row a relationship, grouped by which it is.
   --------------------------------------------------------------------------- */

.dependencyBlock .countChip.blocked {
    background: var(--danger-bg, #fdecea);
    color: var(--danger-ink, #b3271b);
}

.dependencyGroup {
    margin-bottom: 12px;
}

.dependencyGroup > small {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: .8px;
    color: var(--muted);
}

.dependencyRow {
    display: grid;
    grid-template-columns: 30px minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}

.dependencyRow:first-of-type {
    border-top: 0;
}

.dependencyRow > a {
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.dependencyRow > a b {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .3px;
}

.dependencyRow > a span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dependencyRow > a:hover span {
    color: var(--success-ink);
    text-decoration: underline;
}

.dependencyRow em,
.dependencyWhy {
    font-style: normal;
    font-size: 11.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Still holding this up: the one thing on the page worth flagging. */
.dependencyRow.holding > a span {
    color: var(--danger-ink);
}

.dependencyRow.done > a span {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--line);
}

.dependencyRow form {
    margin: 0;
}

.dependencyAdd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    margin-top: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2, #f7f9f8);
}

.dependencyAdd select,
.dependencyAdd input {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 10px;
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    font-size: 12px;
}

.dependencyAdd select[name="work_id"] {
    flex: 1 1 240px;
    min-width: 0;
}

.dependencyAdd input[name="note"] {
    flex: 1 1 180px;
    min-width: 0;
}

.dependencyKind {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    letter-spacing: .8px;
    color: var(--muted);
}

.dependencyAdd button {
    border: 0;
    border-radius: 7px;
    padding: 9px 14px;
    background: var(--brand, #128755);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.dependencyHelp {
    display: block;
    margin-top: 8px;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .dependencyRow {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        row-gap: 4px;
    }

    .dependencyRow em,
    .dependencyWhy {
        grid-column: 2 / -1;
    }

    .dependencyAdd select,
    .dependencyAdd input,
    .dependencyAdd button {
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------------------
   Naming somebody, and answering one remark (Sanket, 2026-09-23).
   --------------------------------------------------------------------------- */

/* A name that matched somebody on the team. */
.mention {
    font-weight: 600;
    color: var(--success-ink);
    background: var(--success-bg, #eaf6ef);
    border-radius: 5px;
    padding: 1px 4px;
    white-space: nowrap;
}

/* The list of people offered after an @. */
.mentionPicker {
    position: absolute;
    z-index: 1200;
    max-width: 320px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface, #fff);
    box-shadow: 0 10px 28px rgba(13, 38, 27, .18);
}

.mentionChoice {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 8px 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.mentionChoice:hover,
.mentionChoice.chosen {
    background: var(--hover, #f1f7f4);
    color: var(--success-ink);
    font-weight: 600;
}

/* An answer sits under the remark it answers. */
.commentRow.isReply {
    margin-left: 34px;
    padding-left: 12px;
    border-left: 2px solid var(--line);
}

.commentEdited {
    font-style: normal;
    font-size: 10px;
    color: var(--muted);
}

/* Edit and Reply open where they are, rather than in a modal. */
.commentAction {
    display: inline-block;
}

.commentAction > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

.commentAction > summary::-webkit-details-marker {
    display: none;
}

.commentAction > summary:hover {
    color: var(--success-ink);
}

.commentAction[open] > summary {
    color: var(--success-ink);
}

.commentAction form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    margin: 8px 0 4px;
}

.commentAction textarea {
    flex: 1 1 240px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    resize: vertical;
}

.commentAction button[type="submit"] {
    border: 0;
    border-radius: 7px;
    padding: 9px 14px;
    background: var(--brand, #128755);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.commentReply {
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   The Leads panel on the Task Center (Sanket, 2026-09-23): how the pipeline
   stands, for leadership and the team that works it.
   --------------------------------------------------------------------------- */

.leadsPanel {
    padding: 16px 18px;
    margin-bottom: 16px;
}

.leadsPanelHead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.leadsPanelHead b {
    font-size: 14px;
}

.leadsPanelHead small {
    flex: 1 1 auto;
    font-size: 11.5px;
    color: var(--muted);
}

.leadsPanelHead a {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--success-ink);
    text-decoration: none;
}

.leadsPanelHead a:hover {
    text-decoration: underline;
}

.leadsPanel .sectionStats {
    margin-bottom: 12px;
}

/* Where the open ones are sitting, in the order of the stages. */
.leadStageStrip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.leadStageStrip a {
    flex: 1 1 110px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: var(--surface-2, #f7f9f8);
}

.leadStageStrip a:hover {
    border-color: var(--success-line, #cfe8d9);
    background: var(--success-bg, #f2faf5);
}

.leadStageStrip b {
    display: block;
    font-size: 17px;
}

.leadStageStrip small {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--muted);
}

.leadStageStrip a.nought b {
    color: var(--muted);
}

/* When work was closed, in the column a due date used to hold (Sanket,
   2026-09-23). The time matters here, so it is allowed to be small. */
.cellFinished {
    font-size: 11px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cellFinished.wasChanged {
    color: var(--muted);
    font-style: italic;
}

/* The due date on the completion record, above when it was actually finished
   (Sanket, 2026-09-24). Not a tick: it is the promise, not the doing. */
.completionLine.due .completionMark {
    background: var(--quiet-bg, #edf2ef);
    color: var(--muted);
    font-weight: 600;
}

.completionLine.due em.late {
    color: var(--danger-ink);
    background: var(--danger-bg);
}

.completionLine.due em.onTime {
    color: var(--success-ink);
    background: var(--success-bg);
}

/* Dependencies in the peek panel: the same relationships, in a narrow column
   (Sanket, 2026-09-24: "can the link button also come in the peek panel"). */
.peekLink {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: baseline;
    padding: 6px 0;
    border-top: 1px solid var(--line);
}

.peekLink:first-of-type {
    border-top: 0;
}

.peekLink em {
    font-style: normal;
    font-size: 9px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
}

.peekLink > a {
    grid-column: 1 / 3;
    font-size: 12.5px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peekLink > a b {
    font-size: 10.5px;
    color: var(--muted);
    margin-right: 4px;
}

.peekLink > a:hover {
    color: var(--success-ink);
    text-decoration: underline;
}

.peekLink small {
    font-size: 10.5px;
    color: var(--muted);
}

.peekLink form {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
}

.peekLink.done > a {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--line);
}

.peekLate {
    color: var(--danger-ink);
}

.peekLinkForm {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.peekLinkForm select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    font-size: 11.5px;
}

/* ---------------------------------------------------------------------------
   Linked work on a list row (Sanket, 2026-09-25): a chip coloured by how the
   row is linked, and a card on hover or focus naming what with. The card is
   fixed to the window and placed by workos.js — the list scrolls sideways,
   which would clip anything hanging out of a row.
   --------------------------------------------------------------------------- */

.linkChip {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: 1px;
    align-items: center;
    gap: 3px;
    border-radius: 9px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    cursor: default;
    outline: none;
    background: var(--info-bg, #e8f1fb);
    color: var(--info-ink, #1d5fa8);
    box-shadow: inset 0 0 0 1px var(--info-line, transparent);
}

.linkChip i {
    font-style: normal;
    font-size: 10px;
}

.linkChip.waiting {
    background: var(--danger-bg, #fdecea);
    color: var(--danger-ink, #b3271b);
    box-shadow: inset 0 0 0 1px rgba(179, 39, 27, .25);
}

.linkChip.blocking {
    background: var(--warn-bg, #fff4e0);
    color: var(--warn-ink, #8a5a00);
    box-shadow: inset 0 0 0 1px var(--warn-line, transparent);
}

.linkChip:focus-visible {
    box-shadow: 0 0 0 2px var(--accent, #1f6f4a);
}

.linkCard {
    display: none;
    position: fixed;
    z-index: 80;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: var(--surface, #fff);
    color: var(--ink, #17211c);
    border: 1px solid var(--line, #e3e9e5);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16, 32, 24, .16);
    padding: 8px 6px 6px;
    font-weight: 400;
    text-align: left;
    white-space: normal;
}

.linkChip.showCard .linkCard {
    display: block;
}

.linkCardHead {
    display: block;
    margin: 4px 6px 3px;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted, #6b7a73);
}

.linkCardHead.waiting { color: var(--danger-ink, #b3271b); }
.linkCardHead.blocking { color: var(--warn-ink, #8a5a00); }
.linkCardHead.linked { color: var(--info-ink, #1d5fa8); }

.linkCardItem {
    display: block;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.linkCardItem:hover {
    background: var(--surface-2, #f3f6f4);
}

.linkCardItem em {
    font-style: normal;
    font-weight: 700;
    margin-right: 6px;
    color: var(--muted, #6b7a73);
}

.linkCardItem.done {
    color: var(--muted, #6b7a73);
    text-decoration: line-through;
    text-decoration-color: rgba(107, 122, 115, .5);
}

.linkCardItem small {
    margin-left: 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent, #1f6f4a);
}

/* A form on its way: the second press is held back (workos.js). */
form.isPosting [type="submit"] {
    opacity: .6;
    pointer-events: none;
}