body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 2rem auto;
    max-width: 72rem;
    padding: 0 1rem;
    color: #1c1c1c;
}

h1 { margin-bottom: 0.25rem; }

.subtitle { color: #666; margin-top: 0; }

nav a { margin-right: 1rem; }

/* --- collapsible creator sections --- */

.creator {
    border: 1px solid #ddd;
    border-radius: 0.35rem;
    margin-bottom: 0.5rem;
    background: #fff;
}

.creator summary {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    /* Making the summary a flex container already drops the browser's own triangle;
       these say so explicitly rather than relying on that side effect, since the
       marker is drawn below instead. */
    list-style: none;
}

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

/*
 * The disclosure chevron: a square with two borders, turned 45 degrees, so it points
 * right when shut and down when open. Drawn rather than typed -- a glyph in a
 * `content` property is exactly what got mangled into noise once before.
 */
.creator summary::before {
    content: "";
    flex: none;
    align-self: center;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: -0.15rem;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: rotate(-45deg);
    transition: transform 150ms ease-out, border-color 150ms ease-out;
}

.creator[open] summary::before { transform: rotate(45deg); }

.creator summary:hover { background: #fafafa; }

.creator summary:hover::before { border-color: #444; }

/* Keyboard users get the same affordance as a mouse hover. */
.creator summary:focus-visible { background: #fafafa; outline: 2px solid #8ab4d8; outline-offset: -2px; }

.creator[open] summary { border-bottom: 1px solid #eee; }

/*
 * Opening animation. The panel eases in rather than appearing, which is what makes a
 * section feel like it opened rather than blinked.
 *
 * This keyframe is the version that works everywhere: it moves opacity and a couple of
 * pixels, never height, because a <details> cannot animate its own height in plain CSS
 * on older engines and faking it with max-height is either janky or clips the content.
 */
.creator[open] > :not(summary) {
    animation: section-reveal 150ms ease-out;
}

@keyframes section-reveal {
    from { opacity: 0; transform: translateY(-0.2rem); }
    to { opacity: 1; transform: none; }
}

/*
 * Where the browser can both address the content box and interpolate to `auto`, the
 * real height is animated instead, so everything below the section slides down with it
 * rather than jumping. Both features are tested for: one without the other would
 * switch the fallback off and animate nothing.
 */
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }

    .creator[open] > :not(summary) { animation: none; }

    .creator::details-content {
        block-size: 0;
        overflow: hidden;
        opacity: 0;
        transition:
            block-size 170ms ease-out,
            opacity 170ms ease-out,
            content-visibility 170ms allow-discrete;
    }

    .creator[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* Taken at their word: the chevron still turns, it just does not sweep. */
@media (prefers-reduced-motion: reduce) {
    .creator summary::before { transition: none; }
    .creator[open] > :not(summary) { animation: none; }
    .creator::details-content { transition: none; }
}

.creator-name { font-weight: 600; }

.creator-meta { color: #777; font-size: 0.85rem; }

.creator-progress {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: #666;
}

/* --- checklist table inside a section --- */

table { border-collapse: collapse; width: 100%; }

td {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.status-not-started { background: #eceff1; color: #455a64; }
.status-in-progress { background: #fff3cd; color: #8a6100; }
.status-complete    { background: #d8f0da; color: #1f6b2b; }

.actions { white-space: nowrap; text-align: right; }

.actions button {
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    margin-left: 0.25rem;
    border: 1px solid #bbb;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
}

.actions button:hover:enabled { background: #f0f0f0; }

.actions button:disabled { opacity: 0.45; cursor: default; }

.done { color: #1f6b2b; font-weight: 600; }

/* --- add creator --- */

.add-creator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e2e2e2;
    border-radius: 0.35rem;
    background: #fafafa;
}

.add-creator label { font-size: 0.85rem; color: #555; }

.add-creator input {
    font: inherit;
    padding: 0.3rem 0.5rem;
    border: 1px solid #bbb;
    border-radius: 0.25rem;
    flex: 1;
    max-width: 20rem;
}

.add-creator button {
    font: inherit;
    padding: 0.32rem 0.9rem;
    border: 1px solid #8a8a8a;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
}

.add-creator button:hover { background: #f0f0f0; }

.error { color: #b3261e; font-size: 0.9rem; margin-top: -0.5rem; }

/* --- rollup steps and substeps --- */

/* Step numbers: 1, 2, 3... with substeps as 4a, 4b, 4c.
   Left-aligned on purpose: a right-aligned column pins text to its right edge,
   so padding-left could never indent the substep numbers. */
td.num {
    width: 3.6rem;
    color: #999;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: left;
    padding-left: 0.9rem;
    padding-right: 0.5rem;
}

/* Number and label shift by the same amount, so the two columns indent together. */
tr.substep td.num { padding-left: 2rem; font-size: 0.85rem; }

tr.substep td.label { padding-left: 2rem; }

tr.substep td { color: #444; }

.optional {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8a8a;
    border: 1px solid #ddd;
    border-radius: 0.6rem;
    padding: 0.05rem 0.4rem;
}

.derived { font-size: 0.78rem; color: #999; font-style: italic; }

/* --- ownership --- */

/* Native selects render with OS chrome that clashes with the flat buttons here,
   so strip the default appearance and draw our own chevron. The arrow is an
   inline SVG data URI: plain ASCII, nothing that depends on font coverage. */
select {
    font: inherit;
    font-size: 0.8rem;
    color: #1c1c1c;
    padding: 0.22rem 1.5rem 0.22rem 0.5rem;
    border: 1px solid #bbb;
    border-radius: 0.25rem;
    background-color: #fff;
    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='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.55rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

select:hover { background-color: #f0f0f0; }

select:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 1px; }

td.assignee select { max-width: 11rem; }

/* An inherited name is shown for information, so it reads lighter than one
   pinned to this step. */
td.assignee select.inherited { color: #888; }

/* The owner reads as a pill beside the progress count. It is a real select, so
   picking a name saves immediately, same as the per-step dropdowns. */
.owner-pill {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.owner-badge {
    border: none;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    padding: 0.15rem 1.35rem 0.15rem 0.6rem;
    background-color: #e7edfa;
    color: #33477e;
    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='%2333477e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: right 0.45rem center;
    background-size: 0.5rem;
}

.owner-badge:hover { background-color: #dae4f7; }

.owner-badge.unassigned {
    background-color: #eceff1;
    color: #5c6b73;
    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='%235c6b73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.owner-badge.unassigned:hover { background-color: #e2e6e9; }

/* --- admin --- */

h2 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }

.empty { color: #777; }

.problems {
    margin: 1rem 0;
    padding: 0.7rem 1rem 0.7rem 2rem;
    border: 1px solid #f0c9c5;
    border-radius: 0.35rem;
    background: #fdf3f2;
    color: #8c2f26;
    font-size: 0.9rem;
}

tr.archived td.label a, tr.archived td.label span { color: #999; }

.step-edit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.step-edit input[type="text"] {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    min-width: 16rem;
    flex: 1;
}

.step-edit button, td.actions form button {
    font: inherit;
    font-size: 0.78rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid #bbb;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
}

.step-edit button:hover, td.actions form button:hover:enabled { background: #f0f0f0; }

label.check {
    font-size: 0.8rem;
    color: #555;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

td.actions form { display: inline-flex; gap: 0.25rem; margin-left: 0.3rem; }

.owner-form input[type="text"] {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

.add-creator select { font-size: 0.85rem; }

/* --- standalone list tables (dashboard, admin) ---
   The checklist tables live inside a bordered section already; these stand alone,
   so they get their own card and a styled header row. */

table.list {
    border: 1px solid #ddd;
    border-radius: 0.35rem;
    background: #fff;
    overflow: hidden;
    margin-top: 1rem;
}

table.list thead th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: #666;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid #e4e4e4;
    background: #fafafa;
}

/* Counts read better tucked beside their heading than spread across the page. */
table.list th.count, table.list td.count {
    width: 7rem;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

table.list td.label a { font-weight: 600; text-decoration: none; }

table.list td.label a:hover { text-decoration: underline; }

table.list tr:last-child td { border-bottom: none; }

/* --- inline checklist editor --- */

.summary-counts { white-space: nowrap; }

/* Indented to line up inside the section, like the step rows below it. */
.checklist-settings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem 0.7rem 2rem;
    border-bottom: 1px solid #eee;
    background: #fbfbfb;
}

.checklist-settings label { font-size: 0.85rem; color: #555; }

.checklist-settings input[type="text"] {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.22rem 0.45rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

.checklist-settings select { font-size: 0.85rem; }

.step-empty { padding: 0.7rem 0.9rem; margin: 0; }

/* --- step rows --- */

.editor-steps { width: 100%; border-collapse: collapse; }

.editor-steps td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #f0f0f0; }

.editor-steps tr:last-child td { border-bottom: none; }

.editor-steps td.label { width: 100%; padding-left: 0.3rem; }

.editor-steps td.label input {
    font: inherit;
    font-size: 0.85rem;
    width: 100%;
    padding: 0.25rem 0.45rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

.editor-steps tr.substep td.label { padding-left: 1.6rem; }

.editor-steps td.required-cell, .editor-steps td.assignee, .editor-steps td.actions {
    white-space: nowrap;
}

.editor-steps td.actions button {
    font: inherit;
    font-size: 0.78rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid #bbb;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
}

.editor-steps td.actions button:hover { background: #f0f0f0; }

/* A row marked for removal is only struck through until Save commits it. */
.editor-steps tr.removed td.label input { text-decoration: line-through; color: #999; }

.editor-steps tr.removed { background: #fdf3f2; }

.editor-steps tr.dragging { opacity: 0.4; }

/* --- drag handle: three bars, drawn rather than a glyph --- */

.editor-steps td.handle {
    width: 1.1rem;
    padding: 0.35rem 0.2rem;
    cursor: grab;
    vertical-align: middle;
}

.editor-steps td.handle span {
    display: block;
    width: 0.7rem;
    height: 2px;
    margin: 2px 0;
    border-radius: 1px;
    background: #ccc;
}

.editor-steps td.handle:hover span { background: #999; }

.editor-steps td.handle:active { cursor: grabbing; }

/* --- adding and saving --- */

.add-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.add-step input[type="text"] {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    min-width: 13rem;
}

.add-step button, .editor-save button {
    font: inherit;
    font-size: 0.82rem;
    padding: 0.28rem 0.8rem;
    border: 1px solid #8a8a8a;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
}

.add-step button:hover, .editor-save button:hover { background: #f0f0f0; }

.editor-save {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid #eee;
}

.editor-save .save-checklist {
    border-color: #2f6b3a;
    background: #eaf5ec;
    color: #1f5a2a;
    font-weight: 600;
}

.editor-save .save-checklist:hover { background: #ddeee1; }

.unsaved { font-size: 0.8rem; color: #8a6100; }

.checklist-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid #eee;
    font-size: 0.85rem;
}

.checklist-footer .spacer { margin-left: auto; }

/* The strip under one run's steps, holding where it came from and the way to remove it. */
.run-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid #eee;
    font-size: 0.85rem;
}

.run-footer .spacer { margin-left: auto; }

.run-origin {
    color: #777;
    font-style: italic;
}

/* Deleting is the one irreversible thing on this page, so it does not look like the
   status buttons sitting directly above it. */
button.danger {
    color: #a12d2d;
    border-color: #e3bcbc;
}

button.danger:hover {
    background: #fbf0f0;
    border-color: #a12d2d;
}

/* --- creator dashboard -------------------------------------------------------
 *
 * The operations sheets joined into one table, under the checklists on the home
 * page. Thirteen columns across three source sheets, so most of the work here is
 * keeping provenance visible and letting the table scroll rather than squeeze.
 *
 * Plain ASCII throughout, including the dash drawn for an absent cell: a non-ASCII
 * escape in a `content` property is what got mangled into noise once before.
 */

.dashboard { margin-top: 2.25rem; }

.dashboard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.dashboard-head h2 { margin: 0; }

/*
 * The toolbar: search, one dropdown per filter, and group-by. Wraps rather than
 * scrolls, so a narrow window stacks the controls instead of hiding them.
 */
.dashboard-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin: 0.6rem 0 0.25rem;
}

.dashboard-tools label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #555;
}

.dashboard-tools select {
    font-size: 0.8rem;
    padding: 0.25rem 0.3rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background: #fff;
    /* Long enough for an email address without stretching the row. */
    max-width: 14rem;
}

.dashboard-tools a { font-size: 0.8rem; }

.dashboard-tools input[type="search"] {
    font-size: 0.85rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    /* Wide enough for the placeholder, and allowed to give the space back when the
       header wraps on a narrow window. */
    width: 20rem;
    max-width: 100%;
    min-width: 8rem;
}

.dashboard-tools button,
.dashboard-meta button {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background: #fff;
    cursor: pointer;
}

.dashboard-tools button:hover,
.dashboard-meta button:hover { background: #f0f0f0; }


.dashboard-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin: 0.35rem 0 0.75rem;
    color: #777;
    font-size: 0.85rem;
}

.dashboard-meta form { margin: 0; }

/* A separator drawn as a border rather than typed as a bullet character. */
.dot-divider {
    padding-left: 0.75rem;
    border-left: 1px solid #ddd;
}

/*
 * Thirteen columns do not fit a 72rem page and should not be made to. The table keeps
 * its natural width and this scrolls, so no column is squeezed to the point of
 * wrapping an email address over three lines.
 */
.table-scroll {
    overflow-x: auto;
    border: 1px solid #ddd;
    border-radius: 0.35rem;
    background: #fff;
}

table.sheet-join {
    border-collapse: collapse;
    font-size: 0.82rem;
    /* Not 100%: the point of the scroller above is that the table may be wider. */
    white-space: nowrap;
}

table.sheet-join th,
table.sheet-join td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    vertical-align: top;
}

table.sheet-join thead th {
    position: sticky;
    top: 0;
    background: #fafafa;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    color: #444;
}

/*
 * No banding or boundaries by source sheet. Which spreadsheet a column came from is a
 * fact about fetching rather than something a reader needs, and the vertical rules it
 * used to need made twelve plain columns look like three tables wedged together.
 * `/admin/dashboard/status` is where provenance is answered.
 */

table.sheet-join tbody tr:hover { background: #fafbfc; }

table.sheet-join tbody tr:last-child td { border-bottom: none; }

table.sheet-join td.creator-cell {
    font-weight: 600;
    color: #1c1c1c;
}

table.sheet-join td.email { color: #666; }

/*
 * The storefront url: a link, so the full one copies from the context menu, showing
 * only as far as the query string -- the cut is made in StorefrontLinks, not here,
 * because it is a fact about the url rather than about how wide the column is.
 *
 * No `max-width` and no ellipsis. Every url now reads in 35 to 52 characters, and a
 * second truncation on top of the first would be the thing that made this column odd
 * to look at in the first place.
 *
 * Underlined on hover only: a column of 146 permanently underlined urls is a wall of
 * lines next to the plain cells.
 */
table.sheet-join td.url a {
    color: #1a5fb4;
    text-decoration: none;
}

table.sheet-join td.url a:hover { text-decoration: underline; }

/* Numbers and dates right-aligned so they compare down the column. Per the note in
   CLAUDE.md, padding-left on a right-aligned cell moves nothing -- the gap on the
   right is what this needs, and the shared padding above already provides it. */
table.sheet-join th.num,
table.sheet-join td.num { text-align: right; }

table.sheet-join td.money { font-variant-numeric: tabular-nums; }

/*
 * A creator with more than one storefront gets one line per storefront in each of the
 * storefront columns, so the lines stay opposite each other.
 */
table.sheet-join .stack { display: block; }

table.sheet-join .stack + .stack {
    margin-top: 0.15rem;
    color: #666;
}

/*
 * The sheet has no row for this creator at all, which is not the same as a row with
 * an empty cell -- one is a creator to add, the other a figure not filled in yet.
 */
table.sheet-join td.absent::before {
    content: "-";
    color: #c4c4c4;
}

.pill {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.pill-active, .pill-on       { background: #d8f0da; color: #1f6b2b; }
.pill-inactive, .pill-stop   { background: #eceff1; color: #546e7a; }
/*
 * Neither running nor stopped: the tracker lists them and left the status blank. Amber
 * rather than another grey, so it does not read as a quieter kind of Stop -- it is a
 * row somebody may need to go and look at.
 */
.pill-off                    { background: #fff3cd; color: #8a6100; }
.pill-unknown                { background: #f5f5f5; color: #999; }

/* Earlier stints on another commercial model; the detail is in the title attribute. */
.earlier {
    margin-left: 0.3rem;
    font-size: 0.72rem;
    color: #999;
    border-bottom: 1px dotted #bbb;
    cursor: help;
}

/*
 * Retired creators, in a collapsed section under the active table. Reuses the .creator
 * disclosure styles so the chevron and the opening animation are the same ones used on
 * the checklist pages -- this is the same affordance and should not look like a new one.
 */
.inactive-group {
    margin-top: 1rem;
}

.inactive-group > .table-scroll {
    /* The section already draws the border; a second one inside it reads as a box in a
       box. The rounded corners go too, for the same reason. */
    border: none;
    border-radius: 0;
}

/* The retired table is reference rather than working data, so it is quieter. */
.inactive-group td.creator-cell { font-weight: 500; color: #555; }

/*
 * A group heading, when the table is grouped. A row of its own inside the group's own
 * tbody, so it can never be separated from the rows it labels.
 *
 * Sticky is deliberately not used here: two sticky layers (the header row and a moving
 * group heading) overlap while scrolling, and the heading is cheap to scroll back to.
 */
table.sheet-join tr.group-head td {
    background: #eef2f7;
    border-bottom: 1px solid #cfd8e3;
    /* Generous above and below: the gap is what separates one group from the last,
       since a table with collapsed borders cannot put margin between its bodies. */
    padding: 0.85rem 0.6rem 0.55rem;
    position: sticky;
    left: 0;
}

/*
 * A heavier rule between groups than above the first one, so the boundary reads as a
 * break rather than as another row of the same table. Drawn as a border rather than a
 * spacer row: an empty row would be one more thing for a screen reader to announce.
 */
table.sheet-join tbody + tbody tr.group-head td {
    border-top: 3px solid #9fb0c4;
}

table.sheet-join tbody:first-of-type tr.group-head td {
    border-top: 1px solid #cfd8e3;
}

/* Clearly larger than the 0.82rem the table body uses -- this is a heading. */
table.sheet-join .group-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}

/* The count, drawn as a pill rather than typed in brackets. */
table.sheet-join .group-count {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.08rem 0.45rem;
    border-radius: 0.7rem;
    background: #d7dfe9;
    color: #3f4a57;
    font-size: 0.78rem;
    font-weight: 600;
    vertical-align: 0.1rem;
}

/*
 * The qualifier beside an AIP Status that is not about AIP -- "service fee". Quiet
 * enough that the pill still leads, loud enough that the row is not read as AIP.
 * Deliberately not a second pill: two pills side by side read as two statuses.
 */
.status-note {
    margin-left: 0.3rem;
    font-size: 0.7rem;
    color: #7a6a3a;
    white-space: nowrap;
    font-style: italic;
}