/* /Components/Account/JoinShieldLock.razor.rz.scp.css */
.gate[b-u5u8klebe8] { max-width: 24rem; margin: 0 auto; padding: 1.5rem 0 3rem; }

.gate h1[b-u5u8klebe8] {
    font-family: var(--sl-serif);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.gate__lede[b-u5u8klebe8] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem 0 0;
    text-wrap: pretty;
}

.gate__error[b-u5u8klebe8] {
    margin: 1.25rem 0 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--mud-palette-error);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-error);
    font-size: 0.875rem;
}

.gate__form[b-u5u8klebe8] { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 1.75rem; }

.field[b-u5u8klebe8] { display: flex; flex-direction: column; gap: 0.4375rem; }
.field--set[b-u5u8klebe8] { border: 0; padding: 0; margin: 0; }
.two[b-u5u8klebe8] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

.label[b-u5u8klebe8] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 0;
}

.field[b-u5u8klebe8]  input,
.field[b-u5u8klebe8]  select {
    height: 3.25rem;
    padding: 0 0.875rem;
    font: inherit;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1);
    width: 100%;
    box-sizing: border-box;
}

.field[b-u5u8klebe8]  input:hover,
.field[b-u5u8klebe8]  select:hover { border-color: var(--mud-palette-text-secondary); }
.field[b-u5u8klebe8]  input:focus,
.field[b-u5u8klebe8]  select:focus { border-color: var(--mud-palette-text-primary); outline: none; }

.field[b-u5u8klebe8]  .validation-message {
    font-size: 0.8125rem;
    color: var(--mud-palette-error);
}

.field__hint[b-u5u8klebe8] { font-size: 0.8125rem; line-height: 1.4; color: var(--mud-palette-text-secondary); }

.pick[b-u5u8klebe8] { display: flex; gap: 0.5rem; }

.pick__one[b-u5u8klebe8] {
    flex-grow: 1;
    height: 3rem;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.pick__one:hover[b-u5u8klebe8] { border-color: var(--mud-palette-text-secondary); }

.pick__one--on[b-u5u8klebe8] {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.btn[b-u5u8klebe8] {
    height: 3.5rem;
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 140ms cubic-bezier(0.2, 0, 0, 1);
}

.btn--ink[b-u5u8klebe8] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.btn--ink:hover[b-u5u8klebe8] { opacity: 0.88; }
.btn:disabled[b-u5u8klebe8] { opacity: 0.5; cursor: default; }

.code[b-u5u8klebe8] {
    margin: 1.75rem 0;
    padding: 1.75rem 1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
}

.code__value[b-u5u8klebe8] {
    display: block;
    font-family: var(--sl-serif);
    font-size: 2.375rem;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.code__note[b-u5u8klebe8] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.field[b-u5u8klebe8]  .field__code {
    font-family: var(--sl-serif);
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* /Components/Account/SignIn.razor.rz.scp.css */
.gate[b-ks94q8ltem] { max-width: 24rem; margin: 0 auto; padding: 1.5rem 0 3rem; }

.gate__mark[b-ks94q8ltem] { color: var(--mud-palette-text-primary); display: block; }

.gate h1[b-ks94q8ltem] {
    font-family: var(--sl-serif);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 1.125rem 0 0;
}

.gate__lede[b-ks94q8ltem] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem 0 0;
    text-wrap: pretty;
}

.gate__error[b-ks94q8ltem] {
    margin: 1.25rem 0 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--mud-palette-error);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-error);
    font-size: 0.875rem;
    line-height: 1.45;
}

.gate__form[b-ks94q8ltem] { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 1.75rem; }

.field[b-ks94q8ltem] { display: flex; flex-direction: column; gap: 0.4375rem; }

.label[b-ks94q8ltem] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.field input[b-ks94q8ltem] {
    height: 3.25rem;                       /* 52px — typed with cold hands */
    padding: 0 0.875rem;
    font: inherit;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.field input:hover[b-ks94q8ltem] { border-color: var(--mud-palette-text-secondary); }
.field input:focus[b-ks94q8ltem] { border-color: var(--mud-palette-text-primary); outline: none; }
.field input:focus-visible[b-ks94q8ltem] { outline: 2px solid var(--mud-palette-secondary); outline-offset: 2px; }

.field__hint[b-ks94q8ltem] { font-size: 0.8125rem; line-height: 1.4; color: var(--mud-palette-text-secondary); }

.btn[b-ks94q8ltem] {
    height: 3.5rem;
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 140ms cubic-bezier(0.2, 0, 0, 1);
}

/* Ink on paper, and paper on ink in the dark. Never a brand colour — status owns colour. */
.btn--ink[b-ks94q8ltem] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.btn--ink:hover[b-ks94q8ltem] { opacity: 0.88; }

.gate__alt[b-ks94q8ltem] { margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--mud-palette-text-secondary); }

.gate__consent[b-ks94q8ltem] {
    margin: 1.25rem 0 0;
    font-size: 0.84375rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}
/* /Components/Account/StartShieldLock.razor.rz.scp.css */
.gate[b-x1qgaicp88] { max-width: 24rem; margin: 0 auto; padding: 1.5rem 0 3rem; }

.gate h1[b-x1qgaicp88] {
    font-family: var(--sl-serif);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.gate__lede[b-x1qgaicp88] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem 0 0;
    text-wrap: pretty;
}

.gate__error[b-x1qgaicp88] {
    margin: 1.25rem 0 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--mud-palette-error);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-error);
    font-size: 0.875rem;
}

.gate__form[b-x1qgaicp88] { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 1.75rem; }

.field[b-x1qgaicp88] { display: flex; flex-direction: column; gap: 0.4375rem; }
.field--set[b-x1qgaicp88] { border: 0; padding: 0; margin: 0; }
.two[b-x1qgaicp88] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

.label[b-x1qgaicp88] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 0;
}

.field[b-x1qgaicp88]  input,
.field[b-x1qgaicp88]  select {
    height: 3.25rem;
    padding: 0 0.875rem;
    font: inherit;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1);
    width: 100%;
    box-sizing: border-box;
}

.field[b-x1qgaicp88]  input:hover,
.field[b-x1qgaicp88]  select:hover { border-color: var(--mud-palette-text-secondary); }
.field[b-x1qgaicp88]  input:focus,
.field[b-x1qgaicp88]  select:focus { border-color: var(--mud-palette-text-primary); outline: none; }

.field[b-x1qgaicp88]  .validation-message {
    font-size: 0.8125rem;
    color: var(--mud-palette-error);
}

.field__hint[b-x1qgaicp88] { font-size: 0.8125rem; line-height: 1.4; color: var(--mud-palette-text-secondary); }

.pick[b-x1qgaicp88] { display: flex; gap: 0.5rem; }

.pick__one[b-x1qgaicp88] {
    flex-grow: 1;
    height: 3rem;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.pick__one:hover[b-x1qgaicp88] { border-color: var(--mud-palette-text-secondary); }

.pick__one--on[b-x1qgaicp88] {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.btn[b-x1qgaicp88] {
    height: 3.5rem;
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 140ms cubic-bezier(0.2, 0, 0, 1);
}

.btn--ink[b-x1qgaicp88] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.btn--ink:hover[b-x1qgaicp88] { opacity: 0.88; }
.btn:disabled[b-x1qgaicp88] { opacity: 0.5; cursor: default; }

.code[b-x1qgaicp88] {
    margin: 1.75rem 0;
    padding: 1.75rem 1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
}

.code__value[b-x1qgaicp88] {
    display: block;
    font-family: var(--sl-serif);
    font-size: 2.375rem;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.code__note[b-x1qgaicp88] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* What we worked out rather than asked for. §13.3 keeps this form to three minutes, so the clock
   is shown and corrected later instead of being a four-hundred-entry picker in the way. */
.guessed[b-x1qgaicp88] {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.guessed strong[b-x1qgaicp88] { color: var(--mud-palette-text-primary); font-weight: 600; }
.guessed span[b-x1qgaicp88] { color: var(--mud-palette-text-disabled); }

/* /Components/Account/Welcome.razor.rz.scp.css */
.gate[b-rj9fr3cd59] { max-width: 24rem; margin: 0 auto; padding: 1.5rem 0 3rem; }

.gate h1[b-rj9fr3cd59] {
    font-family: var(--sl-serif);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.gate__lede[b-rj9fr3cd59] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem 0 0;
    text-wrap: pretty;
}

.gate__choices[b-rj9fr3cd59] { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; }

.choice[b-rj9fr3cd59] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.125rem 1rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-decoration: none;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.choice:hover[b-rj9fr3cd59] { border-color: var(--mud-palette-text-primary); }

.choice__title[b-rj9fr3cd59] {
    font-family: var(--sl-serif);
    font-size: 1.25rem;
    color: var(--mud-palette-text-primary);
}

.choice__note[b-rj9fr3cd59] { font-size: 0.84375rem; line-height: 1.4; color: var(--mud-palette-text-secondary); }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The shell. Phone-first, because the scene that matters most is 0530 outdoors, one hand, gloves
   off for ten seconds (PRODUCT.md) — that is one column and a bottom tab bar, and nothing below
   is allowed to make it worse.

   Above the shell breakpoint the same markup becomes a two-column grid with a persistent rail.
   PRODUCT.md's other scene is Sunday at a table reading the week together, and that is as often a
   laptop as a phone: a 34rem column centred on a 27" monitor is a phone held at arm's length,
   which is exactly what this was before. PLAN.md §13.1.

   The breakpoint is content-driven rather than a device size — rail (14rem) plus the narrowest
   measure worth keeping (34rem) plus gutters (4rem) is 52rem. Below that the rail would eat into
   the measure rather than into empty space, so the bar stays. */

.shell[b-3gfiohixtm] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);

    /* Two widths, because screens want the space for different reasons, and one number for both
       is what made every screen feel like a phone.

       `--sl-measure` is a reading measure and stops growing early: prose, forms and comment
       threads get harder to read past ~75ch however wide the monitor is. It also holds the four
       screens a man moves between daily — Today, My Shield Lock, the feed, the inbox — in one
       column, so the text does not jump left and right as he changes tab.

       `--sl-wide` is the working width for screens built from rows and figures — the report's
       ledger and the long view's grid — where the extra space is information rather than longer
       lines. My Shield Lock was here and is not any more: its roster is one line per man, so the
       extra 16rem bought nothing but a column that started further left than every screen beside
       it in the rail.

       Pages read these instead of hardcoding a rem, so widening the application is this block
       rather than eleven files. */
    --sl-measure: 34rem;
    --sl-wide: 34rem;
}

.shell__body[b-3gfiohixtm] {
    flex-grow: 1;
    padding: 1.25rem 1.25rem 0;
    min-width: 0;
}

/* Only the rail has a wordmark. The phone has no header at all — 44px of chrome that says the
   name of the application he just opened is 44px not spent on the week. */
.shell__brand[b-3gfiohixtm] { display: none; }

.shell__nav[b-3gfiohixtm] {
    border-top: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    position: sticky;
    bottom: 0;
    /* Clears the home indicator without a fake status bar. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ::deep, because NavLink renders its own anchor: scoped CSS only decorates elements this
   component emits itself, so a plain `.tab` rule silently stops matching the moment a link
   becomes a component. That is what turned this bar into one run-on line of text. */
.shell__tabs[b-3gfiohixtm]  .tab {
    flex-grow: 1;
    padding: 0.875rem 0.25rem 1.125rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.shell__tabs[b-3gfiohixtm]  .tab:hover { color: var(--mud-palette-text-secondary); }

.shell__tabs[b-3gfiohixtm]  .tab--on { color: var(--mud-palette-text-primary); }
.shell__tabs[b-3gfiohixtm]  .tab--on:hover { color: var(--mud-palette-text-primary); }

/* The count rides the label rather than sitting on top of it: a superscript badge on a 48px
   target is a v1 habit that needs absolute positioning and still gets clipped. Secondary is the
   mark colour, the one thing on the bar allowed to be seen from across a room. */
.shell__tabs[b-3gfiohixtm]  .tab__count {
    margin-left: 0.3125rem;
    color: var(--mud-palette-secondary);
    font-weight: var(--sl-mark-weight, 400);
    font-variant-numeric: tabular-nums;
}

.shell__tabs[b-3gfiohixtm]  .tab--toggle {
    color: var(--mud-palette-secondary);
    font-weight: var(--sl-mark-weight, 400);
    flex-grow: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-left: auto;
}

/* Rail only. The bar is four sections and the toggle, and §13.3's floor is why: a fifth link on a
   320px phone takes every target under 48px. On a phone these screens are reached from the pages
   that own them — the report and the long view from the foot of My Shield Lock, his account from
   the foot of Today — which is where they were before the rail existed. */
.shell__more[b-3gfiohixtm] { display: none; }

/* The nav rule runs the full width — it is the edge of the page — but the tabs sit in the same
   column as the content, or they float unmoored on a wide screen. */
.shell__tabs[b-3gfiohixtm] {
    display: flex;
    max-width: 34rem;
    margin: 0 auto;
}

/* Five sections and the palette toggle. On a 320px phone the labels would wrap mid-word before
   they overflowed, which reads as a broken bar rather than a tight one — so the tracking goes
   first, then the size, and "Shield Lock" stays two words on one line. */
@media (max-width: 24rem) {
    .shell__tabs[b-3gfiohixtm]  .tab {
        padding-left: 0.125rem;
        padding-right: 0.125rem;
        font-size: 0.625rem;
        letter-spacing: 0.04em;
    }

    .shell__tabs[b-3gfiohixtm]  .tab--toggle {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
}

/* Still the bar, but the phone is now a large one or a small tablet and the gutters can breathe. */
@media (min-width: 40rem) and (max-width: 51.999rem) {
    .shell__body[b-3gfiohixtm] { padding: 2rem 2rem 0; }
    .shell__tabs[b-3gfiohixtm] { padding: 0 2rem; }
}

/* ---- The rail. ------------------------------------------------------------------------------

   `<main>` stays first in the DOM. The bottom bar's tab order — content, then sections — is the
   right one on a phone, and reordering the source to suit the rail would make the primary scene
   worse to serve the secondary one. Grid places the rail on the left regardless of source order,
   and both elements are landmarks, so a screen reader reaches the nav by landmark either way. */
@media (min-width: 52rem) {
    .shell[b-3gfiohixtm] {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        /* Not `stretch`: the rail is sticky, and a grid item stretched to the full row height has
           nothing left to slide against. */
        align-items: start;

        --sl-measure: 36rem;
        --sl-wide: 52rem;
    }

    .shell__nav[b-3gfiohixtm] {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 0;
        bottom: auto;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        padding-bottom: 0;

        /* A hairline, not the full-strength ink of the phone bar. That rule is short and reads as
           the edge of the page; the same weight run down 100dvh would be the loudest thing on a
           screen where the loudest thing is supposed to be a man's status (DESIGN.md). */
        border-top: 0;
        border-right: 1px solid var(--mud-palette-divider);

        /* The rail is pinned to 100dvh, so anything past its bottom edge cannot be scrolled to —
           the page scrolls underneath it and the rail does not move. That is invisible at a 16px
           root and real at a larger one: a man who has set his browser's default font size to 32px
           has a 660px rail in a 560px slot, and the palette toggle is the thing that falls off the
           end. Nothing forces a root size any more (the switcher's `Scale` used to pin it to 16px,
           overriding exactly that preference), so this is now reachable ground. */
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .shell__brand[b-3gfiohixtm] {
        display: block;
        font-family: var(--sl-serif);
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.2;
        color: var(--mud-palette-text-primary);
        text-decoration: none;
        padding: 1.5rem 1.5rem 1.375rem;
    }

    .shell__brand:hover[b-3gfiohixtm] { color: var(--mud-palette-secondary); }

    .shell__tabs[b-3gfiohixtm] {
        flex-direction: column;
        max-width: none;
        margin: 0;
        padding: 0 0.625rem;
        flex-grow: 1;
        gap: 0.0625rem;
    }

    .shell__tabs[b-3gfiohixtm]  .tab {
        flex-grow: 0;
        display: flex;
        align-items: center;
        text-align: left;
        /* DESIGN.md's 48px floor is not a touch concession — it is also the row height that keeps
           a rail from reading as a dense list of settings. */
        min-height: 3rem;
        padding: 0.75rem 0.875rem;
        border-radius: var(--mud-default-borderradius);
        transition: color 140ms cubic-bezier(0.2, 0, 0, 1),
                    background-color 140ms cubic-bezier(0.2, 0, 0, 1);
    }

    /* An ink wash, not a coloured bar. DESIGN.md refuses the coloured left border, and the accent
       on a nav row would read as a state rather than as a hover — the rail is chrome, and chrome
       does not report on anybody. Mixing from the text colour means this follows both palettes
       without a dark-mode branch. */
    .shell__tabs[b-3gfiohixtm]  .tab:hover {
        background: color-mix(in oklab, var(--mud-palette-text-primary) 4%, transparent);
    }

    .shell__tabs[b-3gfiohixtm]  .tab--on,
    .shell__tabs[b-3gfiohixtm]  .tab--on:hover {
        background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
    }

    /* The count leaves the label and takes the right edge — a rail row has the width for it, and
       the eye finds a column of figures faster than five numbers at five different offsets. */
    .shell__tabs[b-3gfiohixtm]  .tab__count { margin-left: auto; }

    /* Sunday, and himself. A hairline rather than a heading: the daily four are what a man opens
       without thinking, and these are the ones he goes looking for. Same rows, same 3rem floor —
       a second group is not a reason to render a dense list of settings under the real nav. */
    .shell__more[b-3gfiohixtm] {
        display: flex;
        flex-direction: column;
        gap: 0.0625rem;
        margin-top: 0.875rem;
        padding-top: 0.875rem;
        border-top: 1px solid var(--mud-palette-divider);
    }

    .shell__tabs[b-3gfiohixtm]  .tab--toggle {
        margin-left: 0;
        margin-top: auto;
        margin-bottom: 1rem;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    .shell__body[b-3gfiohixtm] {
        grid-column: 2;
        grid-row: 1;
        padding: 2.5rem 2.5rem 0;
    }
}

/* Room for the roster and the report to hold a second column, and for the rail to stop looking
   like a bookmark against it. The measure barely moves — it is already at its comfortable end. */
@media (min-width: 80rem) {
    .shell[b-3gfiohixtm] {
        grid-template-columns: 16rem minmax(0, 1fr);
        --sl-measure: 38rem;
        --sl-wide: 64rem;
    }

    .shell__body[b-3gfiohixtm] { padding: 3rem 3rem 0; }
}
/* /Components/Pages/CommentInbox.razor.rz.scp.css */
/* The inbox is read standing up, in a gap in the day, and its job is to be emptied. So: the
   context line above the words, one raised voice per thread, and two plain actions. It shares
   the feed's vocabulary deliberately — a comment should look the same wherever a man meets it. */

.inbox[b-scaxhkkfbn] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-scaxhkkfbn] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

.inbox__head[b-scaxhkkfbn] { padding-bottom: 0.875rem; border-bottom: 1px solid var(--mud-palette-text-primary); }

.inbox__head h1[b-scaxhkkfbn] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0;
}

.label[b-scaxhkkfbn] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.inbox__count[b-scaxhkkfbn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.count[b-scaxhkkfbn] {
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

/* ---- the threads ---- */

.threads[b-scaxhkkfbn] { list-style: none; margin: 1rem 0 0; padding: 0; }

.thread[b-scaxhkkfbn] {
    padding: 1.125rem 0 1.25rem;
    border-top: 1px solid var(--mud-palette-divider);
}

/* The one raised voice on the page. A rule in the margin rather than a background wash: the
   notebook marks a line, it does not highlight it. Losing it as he reads is the point. */
.thread--new[b-scaxhkkfbn] {
    margin-left: -0.875rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--mud-palette-secondary);
}

.thread__why[b-scaxhkkfbn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.thread--new .thread__why .label:first-child[b-scaxhkkfbn] { color: var(--mud-palette-secondary); }

.rule[b-scaxhkkfbn] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.thread__of[b-scaxhkkfbn] {
    font-family: var(--sl-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0.4375rem 0 0;
}

/* What he actually did, in its own unit — the thing being talked about, given the weight a
   percentage used to take (§13.5). */
.thread__was[b-scaxhkkfbn] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.1875rem 0 0;
}

.thread__said[b-scaxhkkfbn] {
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.thread__on[b-scaxhkkfbn] { font-size: 0.84375rem; color: var(--mud-palette-text-secondary); }

/* ---- the conversation ---- */

.says[b-scaxhkkfbn] { list-style: none; margin: 0.75rem 0 0; padding: 0; }

.say[b-scaxhkkfbn] {
    padding: 0.3125rem 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

.say__who[b-scaxhkkfbn] { font-weight: 600; margin-right: 0.375rem; }

.say--new .say__who[b-scaxhkkfbn] { color: var(--mud-palette-secondary); }

.say__edited[b-scaxhkkfbn] {
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-disabled);
}

/* ---- what he can do about it ---- */

.thread__do[b-scaxhkkfbn] {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    margin-top: 0.5rem;
}

.plain[b-scaxhkkfbn] {
    padding: 0;
    min-height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-secondary);
    font: inherit;
    font-size: 0.84375rem;
    font-weight: var(--sl-mark-weight, 400);
    cursor: pointer;
}

.plain[b-scaxhkkfbn] {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.plain:hover[b-scaxhkkfbn],
.plain:focus-visible[b-scaxhkkfbn] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}
.plain:disabled[b-scaxhkkfbn] { opacity: 0.45; cursor: default; text-decoration: none; }

/* Marking read is a housekeeping action, not an invitation — it does not compete with Reply. */
.plain--quiet[b-scaxhkkfbn] { color: var(--mud-palette-text-disabled); }
.plain--quiet:hover[b-scaxhkkfbn] { color: var(--mud-palette-text-secondary); }

.compose[b-scaxhkkfbn] { margin-top: 0.75rem; }

.compose__box[b-scaxhkkfbn] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.6875rem;
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.45;
    resize: vertical;
}

.compose__box[b-scaxhkkfbn]::placeholder { color: var(--mud-palette-text-disabled); }

.compose__do[b-scaxhkkfbn] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn[b-scaxhkkfbn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: 0 1.125rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover[b-scaxhkkfbn] { border-color: var(--mud-palette-text-primary); color: var(--mud-palette-text-primary); }

.btn--ink[b-scaxhkkfbn] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: transparent;
}

.btn--ink:hover[b-scaxhkkfbn] { opacity: 0.88; color: var(--mud-palette-primary-text); }
.btn:disabled[b-scaxhkkfbn] { opacity: 0.45; cursor: default; }
.btn--ink:disabled:hover[b-scaxhkkfbn] { opacity: 0.45; }

/* ---- nothing to read ---- */

.none[b-scaxhkkfbn] {
    margin-top: 1.5rem;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
}

.none h2[b-scaxhkkfbn] {
    font-family: var(--sl-serif);
    font-size: 1.3125rem;
    font-weight: 500;
    margin: 0;
}

.none p[b-scaxhkkfbn] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem auto 0;
    max-width: 24rem;
    text-wrap: pretty;
}

.none .btn[b-scaxhkkfbn] { margin-top: 1rem; }

@media (min-width: 40rem) {
    .inbox__head h1[b-scaxhkkfbn] { font-size: 2rem; }
}
/* /Components/Pages/GoalEdit.razor.rz.scp.css */
/* One goal, and the two halves of it: how it reads, which is always his, and what it measures,
   which closes with the first week (§13.4, D51). */

.edit[b-mzwbnj3ekx] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-mzwbnj3ekx] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

.edit__head[b-mzwbnj3ekx] {
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.edit__head h1[b-mzwbnj3ekx] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    margin: 0.25rem 0 0;
}

.edit__state[b-mzwbnj3ekx] {
    margin: 0.1875rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.label[b-mzwbnj3ekx] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.block[b-mzwbnj3ekx] { margin-top: 1.75rem; }

.block__head[b-mzwbnj3ekx] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.rule[b-mzwbnj3ekx] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.field[b-mzwbnj3ekx] { display: block; margin-top: 0.875rem; }
.field:first-of-type[b-mzwbnj3ekx] { margin-top: 0; }

.field__in[b-mzwbnj3ekx] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 3rem;
    margin-top: 0.25rem;
    padding: 0.625rem 0.6875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
}

.two[b-mzwbnj3ekx] { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.two .field[b-mzwbnj3ekx] { flex: 1 1 10rem; margin-top: 0.875rem; }

/* Closed by default: a man choosing a goal should never meet the axes, and a man who owns one
   should not have to scroll past them either (§13.4). */
.fold[b-mzwbnj3ekx] {
    padding: 0;
    min-height: 3rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-secondary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: var(--sl-mark-weight, 400);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.fold:hover[b-mzwbnj3ekx],
.fold:focus-visible[b-mzwbnj3ekx] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

.dials[b-mzwbnj3ekx] { margin: 0.25rem 0 0; padding: 0; border: 0; }

/* Settled: shown, and not his to move. Dimmed rather than hidden, because what a goal measures is
   worth reading even when it is finished being decided. */
.dials:disabled[b-mzwbnj3ekx] { opacity: 0.55; }

.lede[b-mzwbnj3ekx] { font-size: 0.9375rem; line-height: 1.5; margin: 0 0 0.875rem; text-wrap: pretty; }
.lede--quiet[b-mzwbnj3ekx] { color: var(--mud-palette-text-secondary); }

.said[b-mzwbnj3ekx] {
    margin: 0.875rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-secondary);
    font-weight: var(--sl-mark-weight, 400);
}

.broke[b-mzwbnj3ekx] {
    margin: 0.875rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.edit__do[b-mzwbnj3ekx] { display: flex; gap: 0.5rem; margin-top: 1.75rem; }

.btn[b-mzwbnj3ekx] {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

.btn--ink[b-mzwbnj3ekx] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.btn:disabled[b-mzwbnj3ekx] { opacity: 0.45; cursor: default; }

/* A line, not something to build up (D54). A native checkbox, so the keyboard and a screen reader
   get it for free; the row is the target, at the 3rem the other controls keep. */
.line[b-mzwbnj3ekx] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-height: 3rem;
    margin-top: 1rem;
    cursor: pointer;
}

.line input[b-mzwbnj3ekx] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; }
.line__say[b-mzwbnj3ekx] { display: block; font-size: 0.9375rem; line-height: 1.4; }
.line__why[b-mzwbnj3ekx] {
    display: block;
    margin-top: 0.125rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
    text-wrap: pretty;
}
/* /Components/Pages/GoalLibrary.razor.rz.scp.css */
.library[b-sr5wzm0j42] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-sr5wzm0j42] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

.library__head[b-sr5wzm0j42] { padding-bottom: 0.875rem; border-bottom: 1px solid var(--mud-palette-text-primary); }

.library__head h1[b-sr5wzm0j42] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    margin: 0.25rem 0 0;
}

.lede[b-sr5wzm0j42] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem 0 0;
    max-width: 30rem;
    text-wrap: pretty;
}

.label[b-sr5wzm0j42] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.block[b-sr5wzm0j42] { margin-top: 1.75rem; }
.block__head[b-sr5wzm0j42] { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.rule[b-sr5wzm0j42] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.picks[b-sr5wzm0j42] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.pick[b-sr5wzm0j42] {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.75rem 0;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.pick__what[b-sr5wzm0j42] {
    flex-grow: 1;
    font-family: var(--sl-serif);
    font-size: 1.125rem;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

.pick:hover .pick__what[b-sr5wzm0j42] { color: var(--mud-palette-secondary); }

.pick--taken[b-sr5wzm0j42] { cursor: default; }
.pick--taken .pick__what[b-sr5wzm0j42] { color: var(--mud-palette-text-disabled); }
.pick--taken:hover .pick__what[b-sr5wzm0j42] { color: var(--mud-palette-text-disabled); }

.pick__note[b-sr5wzm0j42] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

/* ---- what he has run before ---- */

/* Above the library and shaped differently: a goal he has already carried is a decision he has
   already made once, and it should not read as another sentence off the same list (D44). */
.agains[b-sr5wzm0j42] { list-style: none; margin: 0; padding: 0; }

.again[b-sr5wzm0j42] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.again:last-child[b-sr5wzm0j42] { border-bottom: 0; }

.again__what[b-sr5wzm0j42] { flex-grow: 1; min-width: 0; }

.again__what h2[b-sr5wzm0j42] {
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.again__what p[b-sr5wzm0j42] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* A real target: this is one of the few things on the screen he came to press. */
.again__do[b-sr5wzm0j42] {
    flex-shrink: 0;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-secondary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.again__do:hover[b-sr5wzm0j42] { border-color: var(--mud-palette-secondary); }
.again__do:disabled[b-sr5wzm0j42] { opacity: 0.45; cursor: default; }

/* The way out of the library, for a man the library does not have. It wears the same clothes as a
   template so it reads as one more thing he could pick, rather than an escape hatch. */
.pick--own[b-sr5wzm0j42] {
    display: block;
    text-decoration: none;
    text-align: left;
}

.pick--own .pick__note[b-sr5wzm0j42] { color: var(--mud-palette-text-disabled); }
/* /Components/Pages/GoalNew.razor.rz.scp.css */
/* Four questions, one at a time, with the sentence forming above them (§13.4). The next question
   only appears once the last is answered — a page of every question at once is the form this
   screen exists instead of. */

.ask[b-4rew96uywf] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 3rem; }

.ask__head[b-4rew96uywf] { padding-bottom: 0.875rem; border-bottom: 1px solid var(--mud-palette-text-primary); }

.ask__head h1[b-4rew96uywf] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    margin: 0.25rem 0 0;
}

.ask__lede[b-4rew96uywf] {
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.label[b-4rew96uywf] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

/* What he is building, in the display face, because it is the thing he is deciding — not a
   summary of the controls under it. */
.ask__says[b-4rew96uywf] {
    margin: 1.25rem 0 0;
    font-family: var(--sl-serif);
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

/* Before the first answer there is nothing to say, and a default sentence he did not choose would
   read as one he had. */
.ask__says--waiting[b-4rew96uywf] {
    font-family: var(--sl-sans);
    font-size: 0.9375rem;
    color: var(--mud-palette-text-disabled);
}

.qs[b-4rew96uywf] { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.q[b-4rew96uywf] { margin-top: 1.5rem; }
.q:first-child[b-4rew96uywf] { margin-top: 0; }

.q__ask[b-4rew96uywf] {
    display: block;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.5rem;
}

.q__answers[b-4rew96uywf] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.one[b-4rew96uywf] {
    min-height: 3rem;
    padding: 0 0.875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.one:hover[b-4rew96uywf] { border-color: var(--mud-palette-text-secondary); }

.one--on[b-4rew96uywf] {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.one:disabled[b-4rew96uywf] { opacity: 0.4; cursor: default; }

.block[b-4rew96uywf] { margin-top: 1.75rem; }

.block__head[b-4rew96uywf] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.rule[b-4rew96uywf] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.field[b-4rew96uywf] { display: block; margin-top: 0.875rem; }
.field:first-of-type[b-4rew96uywf] { margin-top: 0; }

.field__in[b-4rew96uywf] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 3rem;
    margin-top: 0.25rem;
    padding: 0.625rem 0.6875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
}

.two[b-4rew96uywf] { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.875rem; }
.two .field[b-4rew96uywf] { flex: 1 1 10rem; margin-top: 0; }

.said[b-4rew96uywf] {
    margin: 0.875rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-secondary);
    font-weight: var(--sl-mark-weight, 400);
}

.broke[b-4rew96uywf] {
    margin: 0.875rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.ask__do[b-4rew96uywf] { display: flex; gap: 0.5rem; margin-top: 1.75rem; }

.btn[b-4rew96uywf] {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

.btn--ink[b-4rew96uywf] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.btn:disabled[b-4rew96uywf] { opacity: 0.45; cursor: default; }

/* A line, not something to build up (D54). A native checkbox, so the keyboard and a screen reader
   get it for free; the row is the target, at the 3rem the other controls keep. */
.line[b-4rew96uywf] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-height: 3rem;
    margin-top: 1rem;
    cursor: pointer;
}

.line input[b-4rew96uywf] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; }
.line__say[b-4rew96uywf] { display: block; font-size: 0.9375rem; line-height: 1.4; }
.line__why[b-4rew96uywf] {
    display: block;
    margin-top: 0.125rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
    text-wrap: pretty;
}
/* /Components/Pages/GroupTrends.razor.rz.scp.css */
/* The long view. Two questions, in order: how has each man stood, and what has one goal actually
   done. Both are read slowly, so this is the report's ledger vocabulary at a longer range —
   hairlines, ink, and two colour vocabularies kept apart: status owns its five hues in the grid,
   and the charts below draw from the ramp, which may not go near them. DESIGN.md, PLAN.md §13.8. */

.trends[b-a3qy5suh2b] { max-width: var(--sl-wide); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-a3qy5suh2b] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

/* Title left, span right, and the rule under both. The chips wrap beneath the title on a phone
   rather than shrinking, because a target that shrinks is a target that gets missed. */
.trends__head[b-a3qy5suh2b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.spans[b-a3qy5suh2b] { display: flex; gap: 0.375rem; }

.trends__head h1[b-a3qy5suh2b] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0;
}

.label[b-a3qy5suh2b] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.block[b-a3qy5suh2b] { margin-top: 1.75rem; }

.block__head[b-a3qy5suh2b] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rule[b-a3qy5suh2b] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.note[b-a3qy5suh2b] {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-disabled);
}

.note--alone[b-a3qy5suh2b] { margin-top: 1rem; }

/* ---- whose goals ---- */

.chips[b-a3qy5suh2b] { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.chip[b-a3qy5suh2b] {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.84375rem;
    cursor: pointer;
}

.chip:hover[b-a3qy5suh2b] { border-color: var(--mud-palette-text-secondary); color: var(--mud-palette-text-primary); }

.chip--on[b-a3qy5suh2b] {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ---- one goal's history ---- */

.goal[b-a3qy5suh2b] { margin-top: 1.75rem; }

.goal__title[b-a3qy5suh2b] {
    font-family: var(--sl-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.goal__target[b-a3qy5suh2b] {
    margin: 0.125rem 0 0;
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

/* The plot box IS the plotting area: no padding, so a bar's `height: n%` and the target rule's
   `bottom: n%` are measured against the same thing. They were not, and a bar that exactly met
   the target was drawn well below the line it had reached. The period labels hang underneath in
   the margin instead. */
.plot[b-a3qy5suh2b] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    height: 8rem;
    margin: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.bar[b-a3qy5suh2b] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.bar__n[b-a3qy5suh2b] {
    font-family: var(--sl-serif);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 0.1875rem;
    color: var(--mud-palette-text-primary);
}

/* The data end is drawn; the baseline is the rule it stands on. The fill reads the chart ramp
   (Instrument.ChartLight/ChartDark), never a status colour — the grid above already carries those,
   and a second encoding of the same weeks fights it (PLAN.md §13.8). */
.bar__fill[b-a3qy5suh2b] {
    width: 100%;
    max-width: 2.25rem;
    background: var(--sl-chart-1, var(--mud-palette-text-primary));
    border-radius: 3px 3px 0 0;
    min-height: 1px;
}

/* One hue per goal. Five, then it cycles: a man with six goals on one screen is rarer than the
   confusion a sixth hue would buy, and every entry is a category rather than a tint. */
.goal:nth-of-type(5n+2) .bar__fill[b-a3qy5suh2b] { background: var(--sl-chart-2); }
.goal:nth-of-type(5n+3) .bar__fill[b-a3qy5suh2b] { background: var(--sl-chart-3); }
.goal:nth-of-type(5n+4) .bar__fill[b-a3qy5suh2b] { background: var(--sl-chart-4); }
.goal:nth-of-type(5n+5) .bar__fill[b-a3qy5suh2b] { background: var(--sl-chart-5); }

/* A period still running is a reading, not a result (§7.5). */
.bar--running .bar__fill[b-a3qy5suh2b] { opacity: 0.4; }
.bar--running .bar__n[b-a3qy5suh2b] { color: var(--mud-palette-text-disabled); }

.bar__when[b-a3qy5suh2b] {
    position: absolute;
    bottom: -1.125rem;
    font-size: 0.625rem;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

/* What "enough" looked like, drawn once across the whole plot rather than repeated per bar. */
.plot__target[b-a3qy5suh2b] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--mud-palette-secondary);
    pointer-events: none;
}

.plot__target span[b-a3qy5suh2b] {
    position: absolute;
    right: 0;
    top: -1.0625rem;
    font-size: 0.625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-secondary);
    background: var(--mud-palette-background);
    padding-left: 0.25rem;
}

/* ---- nothing yet ---- */

.none[b-a3qy5suh2b] {
    margin-top: 1.5rem;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
}

.none h2[b-a3qy5suh2b] {
    font-family: var(--sl-serif);
    font-size: 1.3125rem;
    font-weight: 500;
    margin: 0;
}

.none p[b-a3qy5suh2b] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem auto 0;
    max-width: 24rem;
    text-wrap: pretty;
}

.btn[b-a3qy5suh2b] {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    margin-top: 1rem;
    padding: 0 1.125rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.btn:hover[b-a3qy5suh2b] { border-color: var(--mud-palette-text-primary); color: var(--mud-palette-text-primary); }

/* The grid's own phone rules live with it, in Shared/WeekGrid.razor.css. */
@media (max-width: 34rem) {
    .plot[b-a3qy5suh2b] { height: 7rem; }
    .bar__when[b-a3qy5suh2b] { font-size: 0.5625rem; }

    /* Twelve dates across a phone run into each other, so every third one carries a label —
       counted from the end, because the period a man cares about is the most recent. */
    .plot .bar:not(:nth-last-child(3n+1)) .bar__when[b-a3qy5suh2b] { display: none; }
}

/* ---- the score's run (§13.8, D50) ---- */

.run[b-a3qy5suh2b] { margin-top: 1.75rem; }

.run__head[b-a3qy5suh2b] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

/* Stretched to the width, because the shape is what is being read and the x axis is weeks rather
   than a measure. The padding is the dots' room: percentage offsets resolve against the padding
   box, so a mark at 0 or 100 is still a whole mark. */
.run__plot[b-a3qy5suh2b] {
    position: relative;
    height: 3.5rem;
    padding: 0.4375rem;
}

/* Exactly the box the dots are placed in: an absolutely positioned child resolves both `inset`
   and its own percentage size against the padding box, which is what the dots' left and top
   resolve against too. Without a size of its own an SVG keeps its intrinsic 300×150 and draws
   its line straight off the page. */
.run__line-box[b-a3qy5suh2b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.run__line[b-a3qy5suh2b] {
    stroke: var(--mud-palette-secondary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.run__dot[b-a3qy5suh2b] {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--mud-palette-secondary);
    border: 1.5px solid var(--mud-palette-background);

    /* Centred on its point with margins rather than a transform. A transform on the dot makes it
       the containing block for its own label, and WebKit is where a pseudo-element hidden inside a
       transformed box leaves its paint behind when it is unhidden and re-hidden. Half the dot's
       own size, so this is exact rather than approximate. */
    margin-left: -0.25rem;
    margin-top: -0.25rem;
}

/* The week still running: hollow, because it is the only figure that can still move (§7.5). */
.run__dot--running[b-a3qy5suh2b] {
    background: var(--mud-palette-background);
    border-color: var(--mud-palette-secondary);
}

.run__weeks[b-a3qy5suh2b] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-disabled);
}

.run__week[b-a3qy5suh2b] { flex: 1 1 0; text-align: center; }
.run__week:first-child[b-a3qy5suh2b] { text-align: left; }
.run__week:last-child[b-a3qy5suh2b] { text-align: right; }

/* The week's figure, drawn rather than left to the browser. A native `title` waits about a second
   and never appears on a phone at all; on this plot that number exists nowhere else on the screen,
   so the wait is the difference between a readable chart and a shape. No delay, and it is the dot's
   own element so it follows the dot wherever the score puts it. */
.run__dot[b-a3qy5suh2b]::after {
    /* No box at all until it is wanted. `visibility` and `opacity` keep the box in the layer
       whether or not it is painted, and toggling them on a pseudo-element inside a transformed
       element left the label's paint on screen after the pointer had moved away — which is what
       made three of them appear to stand open at once. Generating the content only on hover means
       there is nothing left behind, because there was never anything there. */
    content: none;
    position: absolute;
    bottom: calc(100% + 0.4375rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0.3125rem 0.5rem;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

.run__dot:hover[b-a3qy5suh2b]::after { content: attr(data-tip); }

/* High up the plot there is no room above, so the label hangs under the dot instead of climbing
   over the heading. */
.run__dot--under[b-a3qy5suh2b]::after {
    bottom: auto;
    top: calc(100% + 0.4375rem);
}

/* The dots on the ends anchor to their own side, or the label hangs off the plot — and off a
   320px screen, which is a sideways scroll. */
.run__dot--first[b-a3qy5suh2b]::after { left: 0; transform: none; }
.run__dot--last[b-a3qy5suh2b]::after { left: auto; right: 0; transform: none; }

/* A ring rather than a scale, for the same reason: growing it meant a transform, and a transform
   is what the label sits inside. A shadow paints outside the box and moves nothing. */
.run__dot:hover[b-a3qy5suh2b] { box-shadow: 0 0 0 3px color-mix(in oklab, var(--mud-palette-secondary) 35%, transparent); }

/* Paper: the mark is ink and the running week stays hollow (§13.7, D42). */
@media print {
    /* Nothing is hoverable on paper. */
    .run__dot[b-a3qy5suh2b]::after { content: none; }
    .run__line[b-a3qy5suh2b] { stroke: #000; }
    .run__dot[b-a3qy5suh2b] { background: #000; border-color: #FFF; }
    .run__dot--running[b-a3qy5suh2b] { background: #FFF; border-color: #000; }
}
/* /Components/Pages/Lead.razor.rz.scp.css */
.lead[b-020fms04ep] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-020fms04ep] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

.lead__head[b-020fms04ep] { padding-bottom: 0.875rem; border-bottom: 1px solid var(--mud-palette-text-primary); }

.lead__head h1[b-020fms04ep] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    margin: 0.25rem 0 0;
}

.label[b-020fms04ep] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.label--quiet[b-020fms04ep] { letter-spacing: 0.04em; text-transform: none; }

.block[b-020fms04ep] { margin-top: 1.75rem; }
.block__head[b-020fms04ep] { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
.rule[b-020fms04ep] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.prose[b-020fms04ep] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 1rem;
    text-wrap: pretty;
}

.code[b-020fms04ep] {
    padding: 1.5rem 1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
    margin-bottom: 1rem;
}

.code__value[b-020fms04ep] {
    display: block;
    font-family: var(--sl-serif);
    font-size: 2.25rem;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
}

.code__note[b-020fms04ep] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.asks[b-020fms04ep] { list-style: none; margin: 0; padding: 0; }

.ask[b-020fms04ep] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-wrap: wrap;
}

.ask:last-child[b-020fms04ep] { border-bottom: 0; }
.ask__who[b-020fms04ep] { flex-grow: 1; min-width: 8rem; }

.ask h2[b-020fms04ep] {
    font-family: var(--sl-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    margin: 0;
}

.ask p[b-020fms04ep] { font-size: 0.84375rem; color: var(--mud-palette-text-secondary); margin: 0.125rem 0 0; }
.ask__do[b-020fms04ep] { display: flex; gap: 0.5rem; }

.btn[b-020fms04ep] {
    height: 3rem;
    padding: 0 1.125rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms cubic-bezier(0.2, 0, 0, 1);
}

.btn:hover[b-020fms04ep] { border-color: var(--mud-palette-text-primary); }
.btn--ink[b-020fms04ep] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); border-color: transparent; }
.btn--ink:hover[b-020fms04ep] { opacity: 0.88; }
.btn--sm[b-020fms04ep] { height: 2.75rem; padding: 0 0.9375rem; font-size: 0.875rem; }
.btn:disabled[b-020fms04ep] { opacity: 0.5; cursor: default; }

/* ---- this Shield Lock ---- */

.said[b-020fms04ep] {
    margin: 0 0 1rem;
    padding: 0.625rem 0.75rem;
    border-left: 2px solid var(--mud-palette-secondary);
    background: var(--mud-palette-surface);
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.settings[b-020fms04ep] { display: block; }

.field[b-020fms04ep] { display: block; margin-bottom: 1rem; }

.field .label[b-020fms04ep] { display: block; margin-bottom: 0.25rem; }

.field--set[b-020fms04ep] { border: 0; margin: 0 0 1rem; padding: 0; }

.field[b-020fms04ep]  select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 2.875rem;
    padding: 0 0.6875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
}

.field[b-020fms04ep]  select:focus { border-color: var(--mud-palette-text-primary); }

.field__hint[b-020fms04ep] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-disabled);
}

.pick[b-020fms04ep] { display: flex; gap: 0.5rem; }

.pick__one[b-020fms04ep] {
    flex: 1 1 0;
    min-height: 2.875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

.pick__one:hover[b-020fms04ep] { border-color: var(--mud-palette-text-secondary); color: var(--mud-palette-text-primary); }

.pick__one--on[b-020fms04ep] {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
.notice[b-k1tr8ozdxd] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 4rem; }

.label[b-k1tr8ozdxd] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.notice h1[b-k1tr8ozdxd] {
    font-family: var(--sl-serif);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.12;
    margin: 0.25rem 0 0;
    text-wrap: balance;
}

.lede[b-k1tr8ozdxd] {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    margin: 0.75rem 0 0;
    text-wrap: pretty;
}

.notice section[b-k1tr8ozdxd] { margin-top: 2.25rem; }

.notice h2[b-k1tr8ozdxd] {
    font-family: var(--sl-serif);
    font-size: 1.375rem;
    font-weight: 500;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.notice h3[b-k1tr8ozdxd] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    margin: 1.5rem 0 0.5rem;
}

/* 65–75 characters is the measure prose is read at; this is a page people must actually read. */
.notice p[b-k1tr8ozdxd], .plain li[b-k1tr8ozdxd], .who dd[b-k1tr8ozdxd] { max-width: 34rem; }

.notice p[b-k1tr8ozdxd] {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 0.875rem;
    text-wrap: pretty;
}

.plain[b-k1tr8ozdxd] { list-style: none; margin: 0; padding: 0; }

.plain li[b-k1tr8ozdxd] {
    position: relative;
    padding-left: 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: 0.625rem;
    text-wrap: pretty;
}

.plain li[b-k1tr8ozdxd]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6875rem;
    width: 0.375rem;
    height: 1px;
    background: var(--mud-palette-text-disabled);
}

.who[b-k1tr8ozdxd] { margin: 0; }

.who dt[b-k1tr8ozdxd] {
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    margin-top: 1rem;
}

.who dd[b-k1tr8ozdxd] {
    margin: 0.1875rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.stamp[b-k1tr8ozdxd] { font-size: 0.84375rem; color: var(--mud-palette-text-secondary); margin-top: 1.5rem; }
/* /Components/Pages/Profile.razor.rz.scp.css */
/* A man's own record. Read rarely, changed rarely, and one of the sections on it changes what
   the whole group is told — so Away comes first and everything else is a quiet form below it.
   DESIGN.md, PLAN.md §6.1. */

.you[b-1gzlyv9de0] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-1gzlyv9de0] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

.you__head[b-1gzlyv9de0] { padding-bottom: 0.875rem; border-bottom: 1px solid var(--mud-palette-text-primary); }

.you__head h1[b-1gzlyv9de0] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0;
}

.you__sub[b-1gzlyv9de0] {
    margin: 0.1875rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.label[b-1gzlyv9de0] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

/* Whatever just happened, said once, where he is looking. */
.said[b-1gzlyv9de0] {
    margin: 1rem 0 0;
    padding: 0.625rem 0.75rem;
    border-left: 2px solid var(--mud-palette-secondary);
    background: var(--mud-palette-surface);
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.block[b-1gzlyv9de0] { margin-top: 1.75rem; }

.block__head[b-1gzlyv9de0] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rule[b-1gzlyv9de0] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.lede[b-1gzlyv9de0] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.lede--quiet[b-1gzlyv9de0] { margin: 0.875rem 0 0; font-size: 0.8125rem; }

/* ---- away ---- */

.away--on[b-1gzlyv9de0] {
    padding: 1rem 1.125rem 1.125rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.away__when[b-1gzlyv9de0] {
    margin: 0;
    font-family: var(--sl-serif);
    font-size: 1.1875rem;
    line-height: 1.2;
}

.away__why[b-1gzlyv9de0] {
    margin: 0.3125rem 0 0;
    padding-left: 0.6875rem;
    border-left: 1px solid var(--mud-palette-lines-inputs);
    font-family: var(--sl-serif);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.away__what[b-1gzlyv9de0] {
    margin: 0.75rem 0 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* ---- forms ---- */

.form[b-1gzlyv9de0] { display: block; }

.field[b-1gzlyv9de0] { display: block; margin-bottom: 0.875rem; }

.field .label[b-1gzlyv9de0] { display: block; margin-bottom: 0.25rem; }

.field input[b-1gzlyv9de0], .field[b-1gzlyv9de0]  input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 2.875rem;
    padding: 0 0.6875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
}

.field input:focus[b-1gzlyv9de0], .field[b-1gzlyv9de0]  input:focus { border-color: var(--mud-palette-text-primary); }

.field__hint[b-1gzlyv9de0] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-disabled);
}

.two[b-1gzlyv9de0] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.btn[b-1gzlyv9de0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: 0 1.125rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover[b-1gzlyv9de0] { border-color: var(--mud-palette-text-primary); color: var(--mud-palette-text-primary); }

.btn--ink[b-1gzlyv9de0] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: transparent;
}

.btn--ink:hover[b-1gzlyv9de0] { opacity: 0.88; }
.btn:disabled[b-1gzlyv9de0] { opacity: 0.45; cursor: default; }

/* ---- how you sign in ---- */

.ways[b-1gzlyv9de0] { list-style: none; margin: 0 0 1.25rem; padding: 0; }

.way[b-1gzlyv9de0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.way:last-child[b-1gzlyv9de0] { border-bottom: 0; }

.way__what[b-1gzlyv9de0] { font-size: 0.9375rem; }

.way__note[b-1gzlyv9de0] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-disabled);
    text-align: right;
}

.way--later .way__what[b-1gzlyv9de0] { color: var(--mud-palette-text-disabled); }

/* ---- the group's clock ---- */

.facts[b-1gzlyv9de0] { margin: 0; }

.fact[b-1gzlyv9de0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.fact:last-child[b-1gzlyv9de0] { border-bottom: 0; }

.fact dt[b-1gzlyv9de0] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.fact dd[b-1gzlyv9de0] {
    margin: 0;
    font-size: 0.9375rem;
    text-align: right;
}

.fact__id[b-1gzlyv9de0] {
    display: block;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-disabled);
}

@media (max-width: 26rem) {
    .two[b-1gzlyv9de0] { grid-template-columns: 1fr; gap: 0; }
}

/* The one door on this page that goes somewhere else. Same shape as the block links on My Shield
   Lock — a name and a line saying what is behind it — so a man does not have to learn a second
   kind of link to find the men waiting at his. */
.onward[b-1gzlyv9de0] {
    display: block;
    padding: 0.875rem 0;
    text-decoration: none;
    color: inherit;
}

.onward__what[b-1gzlyv9de0] {
    display: block;
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    line-height: 1.2;
    color: var(--mud-palette-secondary);
}

.onward__what[b-1gzlyv9de0] {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.onward:hover .onward__what[b-1gzlyv9de0] { text-decoration-thickness: 2px; }

.onward__why[b-1gzlyv9de0] {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* ---- which palette ---- */

/* The same three-up choice the registration form uses for the week start, because it is the same
   shape of question: one of a few, and he can see them all at once. Two lines per button, since
   "Your device" needs a sentence and "Paper" does not explain itself either. */
.pick[b-1gzlyv9de0] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pick__one[b-1gzlyv9de0] {
    /* MudBlazor's stylesheet sets `button { display: inline-flex }` for every button in the
       application, so a button with two children lays them out in a row unless it says otherwise —
       which is how "Paper" and "Light, always" arrived on the same line with no space between
       them. Anything here with more than one child has to state its own display. */
    display: block;
    flex: 1 1 9rem;
    min-height: 3.5rem;
    padding: 0.625rem 0.75rem;
    font: inherit;
    text-align: left;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.pick__one:hover[b-1gzlyv9de0] { border-color: var(--mud-palette-text-secondary); }

.pick__one--on[b-1gzlyv9de0] {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
}

.pick__what[b-1gzlyv9de0] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
}

.pick__why[b-1gzlyv9de0] {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--mud-palette-text-disabled);
    text-wrap: pretty;
}
/* /Components/Pages/ShieldLockFeed.razor.rz.scp.css */
/* The feed is read sitting down, at length, often on Sunday morning with a cup of coffee — the
   opposite scene to Quick entry. So: reading measure, hairline rules, no 60px controls, and the
   only thing allowed to raise its voice is a comment he has not seen. */

.feed[b-6da91jpg2z] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-6da91jpg2z] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

.feed__head[b-6da91jpg2z] { padding-bottom: 0.875rem; border-bottom: 1px solid var(--mud-palette-text-primary); }

.feed__head h1[b-6da91jpg2z] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0;
}

.label[b-6da91jpg2z] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

/* ---- filters ---- */

.filters[b-6da91jpg2z] { margin-top: 1.125rem; }

.chips[b-6da91jpg2z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.chip[b-6da91jpg2z] {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.84375rem;
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.chip:hover[b-6da91jpg2z] { border-color: var(--mud-palette-text-secondary); color: var(--mud-palette-text-primary); }

.chip--on[b-6da91jpg2z] {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.pick[b-6da91jpg2z] { display: block; margin-top: 0.5rem; }

.pick select[b-6da91jpg2z] {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.6875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
}


/* ---- the days ---- */

.block[b-6da91jpg2z] { margin-top: 1.75rem; }

.block__head[b-6da91jpg2z] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rule[b-6da91jpg2z] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.entries[b-6da91jpg2z] { list-style: none; margin: 0; padding: 0; }

.entry[b-6da91jpg2z] {
    padding: 0.9375rem 0 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.entry:last-child[b-6da91jpg2z] { border-bottom: 0; }

/* The one raised voice on the page. A rule in the margin rather than a background wash: the
   notebook marks a line, it does not highlight it. */
.entry--new[b-6da91jpg2z] {
    margin-left: -0.875rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--mud-palette-secondary);
}

.entry__line[b-6da91jpg2z] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
}

.entry__who[b-6da91jpg2z] {
    font-family: var(--sl-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    flex-grow: 1;
    min-width: 0;
}

/* The number in its own unit, given the weight the percentage used to take (PLAN.md §13.5). */
.entry__said[b-6da91jpg2z] {
    font-family: var(--sl-serif);
    font-size: 1.3125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}

.entry__goal[b-6da91jpg2z] {
    font-size: 0.84375rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin: 0.0625rem 0 0;
}

.late[b-6da91jpg2z] {
    margin-left: 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

/* His own words, set as a quotation — the one place a man writes prose here. */
.entry__note[b-6da91jpg2z] {
    margin: 0.5rem 0 0;
    padding-left: 0.6875rem;
    border-left: 1px solid var(--mud-palette-lines-inputs);
    font-family: var(--sl-serif);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

/* ---- the conversation ---- */

.says[b-6da91jpg2z] { list-style: none; margin: 0.6875rem 0 0; padding: 0; }

.say[b-6da91jpg2z] {
    padding: 0.3125rem 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

.say__who[b-6da91jpg2z] {
    font-weight: 600;
    margin-right: 0.375rem;
}

.say--new .say__who[b-6da91jpg2z] { color: var(--mud-palette-secondary); }

.say__edited[b-6da91jpg2z] {
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-disabled);
}

.reply[b-6da91jpg2z] {
    margin-top: 0.5rem;
    padding: 0;
    min-height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-secondary);
    font: inherit;
    font-size: 0.84375rem;
    font-weight: var(--sl-mark-weight, 400);
    cursor: pointer;
}

.reply[b-6da91jpg2z] {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.reply:hover[b-6da91jpg2z],
.reply:focus-visible[b-6da91jpg2z] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

.compose[b-6da91jpg2z] { margin-top: 0.625rem; }

.compose__box[b-6da91jpg2z] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.6875rem;
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.45;
    resize: vertical;
}

.compose__box[b-6da91jpg2z]::placeholder { color: var(--mud-palette-text-disabled); }

.compose__do[b-6da91jpg2z] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ---- buttons and the empty states ---- */

.btn[b-6da91jpg2z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: 0 1.125rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover[b-6da91jpg2z] { border-color: var(--mud-palette-text-primary); color: var(--mud-palette-text-primary); }

.btn--ink[b-6da91jpg2z] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: transparent;
}

.btn--ink:hover[b-6da91jpg2z] { opacity: 0.88; color: var(--mud-palette-primary-text); }
.btn:disabled[b-6da91jpg2z] { opacity: 0.45; cursor: default; }
.btn--ink:disabled:hover[b-6da91jpg2z] { opacity: 0.45; }

.none[b-6da91jpg2z] {
    margin-top: 1.5rem;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
}

.none h2[b-6da91jpg2z] {
    font-family: var(--sl-serif);
    font-size: 1.3125rem;
    font-weight: 500;
    margin: 0;
}

.none p[b-6da91jpg2z] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem auto 0;
    max-width: 24rem;
    text-wrap: pretty;
}

.none .btn[b-6da91jpg2z] { margin-top: 1rem; }

.more[b-6da91jpg2z] {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    min-height: 2.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

.more:hover[b-6da91jpg2z] { border-color: var(--mud-palette-text-primary); color: var(--mud-palette-text-primary); }

@media (min-width: 40rem) {
    .feed__head h1[b-6da91jpg2z] { font-size: 2rem; }
}

/* ---- a goal reaching its end ---- */

/* Quieter than an entry and marked by a rule rather than a colour: closing a goal is news, not
   a verdict, and the status palette has nothing to say about it (DESIGN.md, D43). */
.closed[b-6da91jpg2z] {
    padding: 0.75rem 0 0.8125rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.closed__what[b-6da91jpg2z] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

.closed__end[b-6da91jpg2z] {
    margin: 0.1875rem 0 0;
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/ShieldLockWeek.razor.rz.scp.css */
/* Hairline rules and space carry the structure — no shadows, no cards with
   coloured left borders. The attention block earns its weight from the rule above it and the
   room around it, the way the top of a ledger page does. */

.week[b-nyqieeu5cl] {
    max-width: var(--sl-measure);
    margin: 0 auto;
    padding: 0 0 3rem;
}

.week__head[b-nyqieeu5cl] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.week__title[b-nyqieeu5cl] { flex-grow: 1; }

.week__head h1[b-nyqieeu5cl] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0;
}


/* The head's rule is a full-width hairline and the ramp is a full-width bar, so with nothing
   between them they read as one thing — the rule looked like part of the score. `::deep`, because
   the bar is a component's own markup and a plain selector would never reach it. */
.week[b-nyqieeu5cl]  .score { margin-top: 1.25rem; }

.week__state[b-nyqieeu5cl] {
    margin: 0.1875rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.label[b-nyqieeu5cl] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.label--quiet[b-nyqieeu5cl] { letter-spacing: 0.04em; text-transform: none; }

.block[b-nyqieeu5cl] { margin-top: 1.75rem; }

.block__head[b-nyqieeu5cl] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rule[b-nyqieeu5cl] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.flags[b-nyqieeu5cl], .roster[b-nyqieeu5cl] { list-style: none; margin: 0; padding: 0; }

.flags[b-nyqieeu5cl] { display: flex; flex-direction: column; gap: 1rem; }

.flag[b-nyqieeu5cl], .man[b-nyqieeu5cl] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.man[b-nyqieeu5cl] {
    padding: 0.8125rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.man:last-child[b-nyqieeu5cl] { border-bottom: 0; }

.flag__who[b-nyqieeu5cl], .man__who[b-nyqieeu5cl] { flex-grow: 1; min-width: 0; }

/* The reason under the name is prose, not part of the link's label. */
.flag__who p[b-nyqieeu5cl] { color: var(--mud-palette-text-secondary); }

/* The whole row is the target, not the name: a 48px floor is about the thing a cold thumb hits
   in the dark, and a link the width of a word is not it (DESIGN.md). */
.man__to[b-nyqieeu5cl] {
    display: block;
    flex-grow: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}



.flag h2[b-nyqieeu5cl], .man h2[b-nyqieeu5cl] {
    font-family: var(--sl-serif);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.flag h2[b-nyqieeu5cl] { font-size: 1.3125rem; }
.man h2[b-nyqieeu5cl] { font-size: 1.1875rem; }

.flag p[b-nyqieeu5cl], .man p[b-nyqieeu5cl] {
    font-size: 0.84375rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin: 0.125rem 0 0;
    text-wrap: pretty;
}

.flag__do[b-nyqieeu5cl] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary);
    white-space: nowrap;
    padding-top: 0.3125rem;
}

/* Where it is a link it is still the same mark — the words carry it, and 48px of target does the
   rest. Underlining on hover rather than by default keeps the row reading as a row of facts
   (DESIGN.md), and the block display is what gives a thumb something to hit. */
/* Underlined, like every other link on the page. It was hover-only, which on a phone means never
   — and a man cannot be expected to guess which of two blue words on a row is the one that goes
   somewhere. */
.flag__do--to[b-nyqieeu5cl] {
    display: block;
    min-height: 3rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.flag__do--to:hover[b-nyqieeu5cl],
.flag__do--to:focus-visible[b-nyqieeu5cl] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

[b-nyqieeu5cl] .sl-status { padding-top: 0.25rem; }

@media (min-width: 40rem) {
    .week__head h1[b-nyqieeu5cl] { font-size: 2rem; }
}

.waiting[b-nyqieeu5cl] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

/* A group of one. Not an error, and not four zeroes — a next step. */
.alone[b-nyqieeu5cl] {
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
    margin-bottom: 1.25rem;
}

.alone h2[b-nyqieeu5cl] {
    font-family: var(--sl-serif);
    font-size: 1.3125rem;
    font-weight: 500;
    margin: 0;
}

.alone p[b-nyqieeu5cl] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem auto 0;
    max-width: 24rem;
    text-wrap: pretty;
}

.alone__do[b-nyqieeu5cl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.875rem;
    padding: 0 1.25rem;
    margin-top: 1rem;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: var(--mud-default-borderradius);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.alone__do:hover[b-nyqieeu5cl] { opacity: 0.88; }

/* The two screens a group opens on a Sunday rather than on a Tuesday. They had no styles at all
   until now — both spans are inline, so this rendered as "The full reportWho to ask after, then
   the numbers — printable." on one line, which is the same class of bug as the nav that read
   "Shield LockFeedReportMine" (CLAUDE.md). Found by reading the markup against the stylesheet,
   not by a test: nothing asserts that a class someone wrote has a rule behind it. */
.onward[b-nyqieeu5cl] {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.onward__to[b-nyqieeu5cl] {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 1rem 0;
    text-decoration: none;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.onward__to:last-child[b-nyqieeu5cl] { border-bottom: 0; }

.onward__what[b-nyqieeu5cl] {
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.onward__what[b-nyqieeu5cl] {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.onward__to:hover .onward__what[b-nyqieeu5cl] { text-decoration-thickness: 2px; }

.onward__why[b-nyqieeu5cl] {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* One column at every width. There used to be a two-column grid from 80rem that moved the Sunday
   links into a 17rem aside beside the week — but the rail carries those links from 52rem up, so
   the aside was holding nothing and the column it reserved came out of the roster's width. With
   the page at the reading measure it stopped being invisible: the names, their summaries and the
   status chips were laid out in 17.5rem while the rule above them ran the full width. */

@media (min-width: 52rem) {
    .onward[b-nyqieeu5cl] { display: none; }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
/* The same document layout as the privacy notice (Privacy.razor.css). Scoped CSS cannot be shared
   between components, so it is copied — change one, change both. */

.notice[b-f9cllbl6ud] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 4rem; }

.label[b-f9cllbl6ud] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.notice h1[b-f9cllbl6ud] {
    font-family: var(--sl-serif);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.12;
    margin: 0.25rem 0 0;
    text-wrap: balance;
}

.lede[b-f9cllbl6ud] {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    margin: 0.75rem 0 0;
    text-wrap: pretty;
}

.notice section[b-f9cllbl6ud] { margin-top: 2.25rem; }

.notice h2[b-f9cllbl6ud] {
    font-family: var(--sl-serif);
    font-size: 1.375rem;
    font-weight: 500;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.notice h3[b-f9cllbl6ud] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    margin: 1.5rem 0 0.5rem;
}

/* 65–75 characters is the measure prose is read at; this is a page people must actually read. */
.notice p[b-f9cllbl6ud], .plain li[b-f9cllbl6ud], .who dd[b-f9cllbl6ud] { max-width: 34rem; }

.notice p[b-f9cllbl6ud] {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 0.875rem;
    text-wrap: pretty;
}

.plain[b-f9cllbl6ud] { list-style: none; margin: 0; padding: 0; }

.plain li[b-f9cllbl6ud] {
    position: relative;
    padding-left: 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: 0.625rem;
    text-wrap: pretty;
}

.plain li[b-f9cllbl6ud]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6875rem;
    width: 0.375rem;
    height: 1px;
    background: var(--mud-palette-text-disabled);
}

.who[b-f9cllbl6ud] { margin: 0; }

.who dt[b-f9cllbl6ud] {
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    margin-top: 1rem;
}

.who dd[b-f9cllbl6ud] {
    margin: 0.1875rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.stamp[b-f9cllbl6ud] { font-size: 0.84375rem; color: var(--mud-palette-text-secondary); margin-top: 1.5rem; }
/* /Components/Pages/Today.razor.rz.scp.css */
/* Used standing up, outdoors, before dawn, one-handed. Every control here is 60px, against the
   48px floor everywhere else (DESIGN.md). */

.day[b-1phrcwpt4s] { max-width: var(--sl-measure); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-1phrcwpt4s] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

.day__head[b-1phrcwpt4s] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

/* A basis rather than just a grow: on a 320px phone the date and the arrows want about 240px, and
   without a floor under the heading they took it out of "6 September" and sat on top of the date.
   Below that width the controls drop to their own row instead. */
.day__title[b-1phrcwpt4s] { flex: 1 1 11rem; min-width: 0; }

/* The picker and the arrows travel together and wrap together — at 320px the heading takes the
   width and these drop under it rather than squeezing the date into an ellipsis. */
.day__when[b-1phrcwpt4s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* The date sits beside the heading rather than above the cards: it is what the screen is about,
   not a step before it. Quiet until it is wanted — a man logging today never touches it. */
.day__pick input[b-1phrcwpt4s] {
    box-sizing: border-box;
    min-height: 3rem;
    padding: 0 0.6875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.875rem;
}

.day__pick input:hover[b-1phrcwpt4s] { color: var(--mud-palette-text-primary); }

/* Said loudly enough to stop him, because the cards below look the same whichever day they are
   for. The mark colour, since it is telling him where he is rather than judging anything. */
.elsewhen[b-1phrcwpt4s] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.625rem;
    margin: 0.875rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.elsewhen__what[b-1phrcwpt4s] { font-weight: var(--sl-mark-weight, 400); color: var(--mud-palette-secondary); }

.elsewhen__late[b-1phrcwpt4s] { color: var(--mud-palette-text-secondary); }

.elsewhen__back[b-1phrcwpt4s] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-secondary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: var(--sl-mark-weight, 400);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.elsewhen__back:hover[b-1phrcwpt4s],
.elsewhen__back:focus-visible[b-1phrcwpt4s] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

.day__head h1[b-1phrcwpt4s] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    margin: 0.25rem 0 0;
}

.label[b-1phrcwpt4s] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.cards[b-1phrcwpt4s] { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.125rem; }

.card[b-1phrcwpt4s] {
    padding: 1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.card__head[b-1phrcwpt4s] { display: flex; align-items: baseline; gap: 0.5rem; }

.card h2[b-1phrcwpt4s] {
    font-family: var(--sl-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    flex-grow: 1;
    text-wrap: pretty;
}

/* Ink, not the On pace green. "Saved" is a receipt for a keystroke; green here would claim the
   engine had just called him On pace, which is a different sentence (DESIGN.md). */
.saved[b-1phrcwpt4s] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.card__where[b-1phrcwpt4s] {
    font-size: 0.84375rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin: 0.1875rem 0 0;
}

.row[b-1phrcwpt4s] { display: flex; gap: 0.625rem; margin-top: 0.875rem; }

.big[b-1phrcwpt4s], .step[b-1phrcwpt4s], .tally[b-1phrcwpt4s], .amount[b-1phrcwpt4s] {
    height: 3.75rem;                        /* 60px, for cold hands in the dark */
    border-radius: var(--mud-default-borderradius);
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
}

.big[b-1phrcwpt4s] {
    flex-grow: 1;
    gap: 0.5rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.big:hover[b-1phrcwpt4s] { border-color: var(--mud-palette-text-secondary); color: var(--mud-palette-text-primary); }

.big--on[b-1phrcwpt4s] {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
}

.big--ink[b-1phrcwpt4s] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: transparent;
}

.big--ink:hover[b-1phrcwpt4s] { opacity: 0.88; color: var(--mud-palette-primary-text); }

.step[b-1phrcwpt4s] {
    width: 3.75rem;
    flex-shrink: 0;
    border: 1px solid var(--mud-palette-text-primary);
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: opacity 140ms cubic-bezier(0.2, 0, 0, 1);
}

.step:hover[b-1phrcwpt4s] { opacity: 0.7; }

.tally[b-1phrcwpt4s], .amount[b-1phrcwpt4s] {
    flex-grow: 1;
    gap: 0.3125rem;
    border: 1px solid var(--mud-palette-text-primary);
    color: var(--mud-palette-text-secondary);
    font-size: 0.9375rem;
}

.tally__n[b-1phrcwpt4s], .amount__n[b-1phrcwpt4s] {
    font-family: var(--sl-serif);
    font-size: 1.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}

.amount__u[b-1phrcwpt4s] { font-size: 0.875rem; }

.note[b-1phrcwpt4s] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.125rem 0 0;
    font-size: 0.78125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-disabled);
}

.note svg[b-1phrcwpt4s] { flex-shrink: 0; margin-top: 0.0625rem; }

.none[b-1phrcwpt4s] {
    margin-top: 1.5rem;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
}

.none h2[b-1phrcwpt4s] {
    font-family: var(--sl-serif);
    font-size: 1.3125rem;
    font-weight: 500;
    margin: 0;
}

.none p[b-1phrcwpt4s] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem auto 0;
    max-width: 24rem;
    text-wrap: pretty;
}

.btn[b-1phrcwpt4s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding: 0 1.25rem;
    margin-top: 1rem;
    border-radius: var(--mud-default-borderradius);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.btn--ink[b-1phrcwpt4s] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.btn--ink:hover[b-1phrcwpt4s] { opacity: 0.88; }

/* Once a man has one goal, nothing led back to the library — a dead end he had to guess his way
   out of. Quiet, because adding a goal is rarer than logging one. */
.add[b-1phrcwpt4s] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 3rem;
    margin-top: 1rem;
    color: var(--mud-palette-secondary);
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    text-decoration: none;
}

.add[b-1phrcwpt4s] {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.add:hover[b-1phrcwpt4s],
.add:focus-visible[b-1phrcwpt4s] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

/* A number he can tap up, or tap into and type. */
.amount[b-1phrcwpt4s] { cursor: text; }

.amount__n[b-1phrcwpt4s] {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--sl-serif);
    font-size: 1.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    line-height: 1;
    padding: 0;
}

.amount__n:focus[b-1phrcwpt4s] { outline: none; }
.amount:focus-within[b-1phrcwpt4s] { outline: 2px solid var(--mud-palette-secondary); outline-offset: 2px; }

/* The browser's spinners are tiny, unthemed, and beside two 60px buttons that already do the job. */
.amount__n[b-1phrcwpt4s]::-webkit-outer-spin-button,
.amount__n[b-1phrcwpt4s]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.amount__n[b-1phrcwpt4s] { appearance: textfield; -moz-appearance: textfield; }

/* ---- his own record ---- */

/* The way off this screen, not an action competing with the entry controls above it. */
.mine__account[b-1phrcwpt4s] {
    display: block;
    margin-top: 2rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--mud-palette-text-primary);
    text-decoration: none;
    color: inherit;
}

.mine__what[b-1phrcwpt4s] {
    display: block;
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    color: var(--mud-palette-secondary);
}

.mine__what[b-1phrcwpt4s] {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.mine__account:hover .mine__what[b-1phrcwpt4s],
.mine__account:focus-visible .mine__what[b-1phrcwpt4s] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

.mine__why[b-1phrcwpt4s] {
    display: block;
    margin-top: 0.0625rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- the group, glanced at ---- */

/* The loop, closed: he logs above, then he sees who needs a word. It sits below the controls
   because the control is what he opened the app for, and above his account because a man is
   more urgent than a password (PLAN.md §7.10, D40). */
.glance[b-1phrcwpt4s] { margin-top: 2.25rem; }

.glance__head[b-1phrcwpt4s] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rule[b-1phrcwpt4s] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.glance__men[b-1phrcwpt4s] { list-style: none; margin: 0; padding: 0; }

/* Deliberately My Shield Lock's .flag row, to the pixel. The same men appear in both places and
   a man should not have to read the block twice to learn it. */
.glance__man[b-1phrcwpt4s] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.8125rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.glance__man:last-child[b-1phrcwpt4s] { border-bottom: 0; }

.glance__who[b-1phrcwpt4s] { flex-grow: 1; min-width: 0; }

.glance__who h2[b-1phrcwpt4s] {
    font-family: var(--sl-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.glance__who p[b-1phrcwpt4s] {
    font-size: 0.84375rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin: 0.125rem 0 0;
    text-wrap: pretty;
}

/* The one coloured thing in the block, and it is the mark rather than a status hue: what to do
   is an action, and colouring it as a verdict would put a fifth meaning on the status palette
   (DESIGN.md). Same treatment as .flag__do on My Shield Lock. */
.glance__do[b-1phrcwpt4s] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary);
    white-space: nowrap;
    padding-top: 0.3125rem;
}

.glance__quiet[b-1phrcwpt4s] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* The name is the way into his week (D41). A block link rather than an underlined word: this is
   read at 0530 with one thumb, and DESIGN.md's 48px floor is the row, not the text. The rule
   sits on the row so the link can hold the whole target without drawing a second edge. */
.glance__link[b-1phrcwpt4s] { min-height: 3rem; flex-grow: 1; min-width: 0; }

/* The way out of the glance. It had these when the roster sat above it and lost them with that
   block: a 17px line of text is not something a cold thumb finds in the dark, whatever DESIGN.md's
   48px floor says. The underline comes from the global link rule and stays as it is. */
.glance__to[b-1phrcwpt4s] {
    display: inline-block;
    margin-top: 0.875rem;
    min-height: 3rem;
    line-height: 3rem;
    font-size: 0.875rem;
}

/* Where a goal went, said once and only after he ends one. */
.note--closed[b-1phrcwpt4s] {
    align-items: flex-start;
    color: var(--mud-palette-text-secondary);
}

.note--closed a[b-1phrcwpt4s] { color: var(--mud-palette-secondary); font-weight: var(--sl-mark-weight); }

/* Ending a goal. Quiet by design: it sits in the same slot as the Saved badge, reads as a label
   rather than a button, and asks once before it does anything. The 0530 controls below it are
   60px because they are tapped in the dark; this one is small because it should not be
   (DESIGN.md, D43). */
.close__start[b-1phrcwpt4s], .close__yes[b-1phrcwpt4s], .close__no[b-1phrcwpt4s] {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.25rem 0.125rem;
}

.close__start[b-1phrcwpt4s] { color: var(--mud-palette-text-disabled); }
.close__start:hover[b-1phrcwpt4s] { color: var(--mud-palette-text-secondary); text-decoration: underline; text-underline-offset: 0.18em; }

.close__ask[b-1phrcwpt4s] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.close__yes[b-1phrcwpt4s] { color: var(--mud-palette-secondary); }
.close__no[b-1phrcwpt4s] { color: var(--mud-palette-text-disabled); }
.close__yes:disabled[b-1phrcwpt4s] { opacity: 0.45; cursor: default; }

/* Saying something, in the feed's own compose vocabulary — this is the same act in a second
   place, and two ways to write a note would be two things to keep in step (§11.1, D41). */
.compose[b-1phrcwpt4s] { margin-top: 0.625rem; }

.compose__box[b-1phrcwpt4s] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.6875rem;
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.45;
    resize: vertical;
}

.compose__box[b-1phrcwpt4s]::placeholder { color: var(--mud-palette-text-disabled); }

.compose__do[b-1phrcwpt4s] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn:disabled[b-1phrcwpt4s] { opacity: 0.45; cursor: default; }
.btn--ink:disabled:hover[b-1phrcwpt4s] { opacity: 0.45; }

/* Sits where CALL HIM sits and reads the same, because it is the same slot answering the same
   question — what to do about him. The word differs because the instrument does. */
.glance__say[b-1phrcwpt4s] {
    padding: 0.3125rem 0 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.glance__say[b-1phrcwpt4s] {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.glance__say:hover[b-1phrcwpt4s],
.glance__say:focus-visible[b-1phrcwpt4s] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

.glance__sent[b-1phrcwpt4s] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- the line at the top ---- */

/* v1's quote hero, kept as one. Above the date, with the rule under the date still doing the
   dividing — a second rule here would box it in and make it look like a card it is not. */
.line[b-1phrcwpt4s] {
    margin: 0 0 1.5rem;
}

.line blockquote[b-1phrcwpt4s] {
    margin: 0;
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    font-style: italic;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

.line figcaption[b-1phrcwpt4s] {
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

/* The rail carries his account from here up, so the foot of Today stops repeating it. Below this
   the bar has no room for it (§13.3) and this link is the only way to /profile — which is why it
   is hidden rather than removed. */
@media (min-width: 52rem) {
    .mine__account[b-1phrcwpt4s] { display: none; }
}

/* ---- the note on an entry ---- */

/* Folded away until he wants it. The number is what he opened the screen to press (D40), so the
   note is one quiet line under it rather than a box on every card. */
.jot[b-1phrcwpt4s] { margin-top: 0.75rem; }

.jot__box[b-1phrcwpt4s] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.6875rem;
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.45;
    resize: vertical;
}

.jot__box[b-1phrcwpt4s]::placeholder { color: var(--mud-palette-text-disabled); }

.jot__do[b-1phrcwpt4s] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* What he wrote, shown back to him in the same face the feed uses for it — the group reads this
   against the number, so he should see it the way they will. Pressing it edits. */
.jot__said[b-1phrcwpt4s] {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0 0 0 0.6875rem;
    min-height: 3rem;
    border: 0;
    border-left: 1px solid var(--mud-palette-lines-inputs);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: var(--sl-serif);
    font-size: 0.9375rem;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
}

.jot__said:hover[b-1phrcwpt4s] { border-left-color: var(--mud-palette-secondary); }

.jot__add[b-1phrcwpt4s] {
    margin-top: 0.625rem;
    padding: 0;
    min-height: 3rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: var(--sl-mark-weight, 400);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.jot__add:hover[b-1phrcwpt4s],
.jot__add:focus-visible[b-1phrcwpt4s] {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

/* A write that threw (#78). Above the cards, because it may belong to one scrolled past. */
.failed[b-1phrcwpt4s] {
    margin: 1rem 0 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--mud-palette-error);
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

/* A refusal, said where it happened. */
.jot__no[b-1phrcwpt4s] {
    margin: 0.625rem 0 0;
    font-size: 0.84375rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/WeeklyReport.razor.rz.scp.css */
/* The Sunday meeting document. It is read aloud at a table from a phone or a sheet of paper, so
   it is a ledger rather than a dashboard: a rule under the head, columns of figures that line up,
   and no ornament that would not survive a mono printer. DESIGN.md, PLAN.md §13.7. */

.report[b-e3vtfop1ny] { max-width: var(--sl-wide); margin: 0 auto; padding: 0 0 3rem; }
.waiting[b-e3vtfop1ny] { color: var(--mud-palette-text-secondary); font-size: 0.9375rem; }

.report__head[b-e3vtfop1ny] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.report__title[b-e3vtfop1ny] { flex-grow: 1; min-width: 0; }

.report__head h1[b-e3vtfop1ny] {
    font-family: var(--sl-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0;
}

.report__sub[b-e3vtfop1ny] {
    margin: 0.1875rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.label[b-e3vtfop1ny] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

/* ---- week navigation ---- */


/* ---- the two blocks that come before the numbers ---- */

.block[b-e3vtfop1ny] { margin-top: 1.75rem; }

.block__head[b-e3vtfop1ny] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.rule[b-e3vtfop1ny] { flex-grow: 1; height: 1px; background: var(--mud-palette-divider); }

.quiet[b-e3vtfop1ny] { list-style: none; margin: 0; padding: 0; }

.quiet__man[b-e3vtfop1ny] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.quiet__man:last-child[b-e3vtfop1ny] { border-bottom: 0; }

.quiet__who[b-e3vtfop1ny] {
    flex-shrink: 0;
    width: 6.5rem;
    font-family: var(--sl-serif);
    font-size: 1.125rem;
    line-height: 1.2;
}

.quiet__why[b-e3vtfop1ny] {
    flex-grow: 1;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

.quiet__tag[b-e3vtfop1ny] {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ---- the ledger ---- */

.ledger[b-e3vtfop1ny] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.col--who[b-e3vtfop1ny] { width: 7rem; }
.col--did[b-e3vtfop1ny] { width: 8rem; }
.col--word[b-e3vtfop1ny] { width: 7.5rem; }

.ledger thead th[b-e3vtfop1ny] {
    text-align: left;
    padding: 0 0 0.4375rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.ledger thead .ledger__did[b-e3vtfop1ny] { text-align: right; padding-right: 1rem; }

.row td[b-e3vtfop1ny], .row th[b-e3vtfop1ny] { padding: 0.5rem 0; border-bottom: 1px solid var(--mud-palette-divider); vertical-align: baseline; }

/* Away is still on the page — he is part of the group's week — but it is not a result. */
.row--away[b-e3vtfop1ny] { color: var(--mud-palette-text-disabled); }

.row__who[b-e3vtfop1ny] {
    text-align: left;
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.2;
}

.row__goal[b-e3vtfop1ny] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);

    /* A long goal sentence wraps rather than shoving the numbers off the right edge. */
    overflow-wrap: anywhere;
}

.row td.row__did[b-e3vtfop1ny] {
    text-align: right;
    padding-right: 1rem;
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    white-space: nowrap;
}



/* ---- the tally ---- */

/* At the head of the document now, not the foot: the week in one line before the reading starts
   (§7.10, D47). No rule of its own — the head already draws one and a second directly under it
   reads as a mistake rather than as a division.

   It wraps rather than scrolls: five figures at 320px is two rows of legible numbers, and a
   summary a man has to swipe sideways is not a summary. */
.tally[b-e3vtfop1ny] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.25rem;
    margin-top: 1.125rem;
}

.tally__n[b-e3vtfop1ny] {
    font-family: var(--sl-serif);
    font-size: 1.625rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    /* Its own state's colour, falling back to ink where none is set. app.css drops it again for
       print, where a mid green is a mid grey to a mono printer (DESIGN.md, §13.7). */
    color: var(--sl-status, var(--mud-palette-text-primary));
}

/* Who needs a word is not a fifth status. It takes the mark colour — the one the rest of the
   product uses for "there is something to do here" — so the status palette keeps meaning
   exactly the five things it means (DESIGN.md, §7.10). */
.tally__n--word[b-e3vtfop1ny] {
    color: var(--mud-palette-secondary);
    font-weight: var(--sl-mark-weight, 400);
}

.tally__label[b-e3vtfop1ny] {
    margin-top: 0.1875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.report__foot[b-e3vtfop1ny] {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-disabled);
    text-wrap: pretty;
}

/* Directly under the figures it explains, rather than at the end of the document. */
.report__foot--tally[b-e3vtfop1ny] { margin-top: 0.75rem; }

/* ---- nothing to read out yet ---- */

.alone[b-e3vtfop1ny] {
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    text-align: center;
}

.alone h2[b-e3vtfop1ny] {
    font-family: var(--sl-serif);
    font-size: 1.3125rem;
    font-weight: 500;
    margin: 0;
}

.alone p[b-e3vtfop1ny] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem auto 0;
    max-width: 26rem;
    text-wrap: pretty;
}

.alone__do[b-e3vtfop1ny] {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    margin-top: 1rem;
    padding: 0 1.125rem;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

/* A phone at the table. `screen and`, because paper is not a phone: a printed report is a
   ledger at any screen width, and everything below would otherwise follow a 320px browser onto
   an A4 sheet (§13.7). */
@media screen and (max-width: 34rem) {
    .quiet__man[b-e3vtfop1ny] { flex-wrap: wrap; }
    .quiet__who[b-e3vtfop1ny] { width: auto; }
    .quiet__tag[b-e3vtfop1ny] { width: 100%; }
    .tally[b-e3vtfop1ny] { gap: 1rem 1.5rem; }

    /* The ledger stops being four columns and becomes a stack.

       It used to keep the columns and give the goal sentence whatever was left, which at 320px
       was 2rem of a 17.5rem screen — "Post 3 bootcamps a week" set one word to a line, running
       under the name beside it. Three fixed columns totalling 15.5rem cannot leave room for a
       sentence; the arithmetic was the bug, not the wrapping.

       The four facts all survive, in the order a man reads them out: whose it is, which goal,
       what he did, where that stands. Only the geometry changes. */
    .ledger[b-e3vtfop1ny] { table-layout: auto; }
    .ledger colgroup[b-e3vtfop1ny] { display: none; }
    .ledger tbody[b-e3vtfop1ny] { display: block; }

    /* Announced, not shown. The stack drops the visual header row, and a screen reader still
       needs the column names to make sense of the cells — which keep their roles, declared in
       the markup so the display change cannot quietly take the table with it. */
    .ledger thead[b-e3vtfop1ny] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .row[b-e3vtfop1ny] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.75rem;
        align-items: baseline;
        padding: 0.625rem 0;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .row td[b-e3vtfop1ny], .row th[b-e3vtfop1ny] { display: block; padding: 0; border-bottom: 0; }

    .row__who[b-e3vtfop1ny] { grid-column: 1 / -1; font-size: 1rem; }

    /* His name once, against his first goal — a ledger, not a spreadsheet. The continuation rows
       carry an empty header cell, which would otherwise open each of them with a blank line. */
    .row__who:empty[b-e3vtfop1ny] { display: none; }

    .row__goal[b-e3vtfop1ny] { grid-column: 1 / -1; font-size: 0.875rem; margin-top: 0.0625rem; }

    .row td.row__did[b-e3vtfop1ny] {
        grid-column: 1;
        text-align: left;
        padding-right: 0;
        margin-top: 0.25rem;
    }

    /* No explicit row: it takes the cell beside the figure wherever that lands. Pinning it to a
       row put it under the figure on a continuation row, where the hidden name cell means there
       is one row less above it. */
    .row__word[b-e3vtfop1ny] { grid-column: 2; justify-self: end; align-self: center; }
}

@media (min-width: 40rem) {
    .report__head h1[b-e3vtfop1ny] { font-size: 2rem; }
}

/* Paper. The controls go, the rules stay, and nothing is allowed to break across a page in the
   middle of a man (PLAN.md §13.7 — the shared rules live in app.css). */
/* The Share button sits at the end of the section's rule, quiet until it is wanted (§11.5.5). */
.share[b-e3vtfop1ny] {
    flex-shrink: 0;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary);
    cursor: pointer;
}

.share:disabled[b-e3vtfop1ny] { color: var(--mud-palette-text-disabled); cursor: default; }

@media print {
    .report[b-e3vtfop1ny] { max-width: none; padding: 0; }
    .stepper[b-e3vtfop1ny] { display: none; }
    .share[b-e3vtfop1ny] { display: none; }
    .block[b-e3vtfop1ny] { margin-top: 1.25rem; }
    .row[b-e3vtfop1ny], .quiet__man[b-e3vtfop1ny] { break-inside: avoid; }
    .ledger thead[b-e3vtfop1ny] { display: table-header-group; }
    .tally[b-e3vtfop1ny] { break-inside: avoid; }
}
/* /Components/Shared/ScoreBar.razor.rz.scp.css */
/* The ramp is a scale, not a status: it runs behind → off pace → on pace so a position reads as a
   direction. It is never the only thing said — the figure and the count sit under it, because
   colour alone carries nothing (DESIGN.md) and a ramp carries nothing at all on paper. */

.score__ramp[b-5nmvto2n17] {
    position: relative;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: linear-gradient(to right, var(--sl-behind), var(--sl-off) 55%, var(--sl-on));
}

/* Quiet rather than absent when there is no score. The week has started and the ramp is still the
   thing this block is about; it just has nothing to point at yet (§7.6 — Gray is a question). */
.score--quiet .score__ramp[b-5nmvto2n17] { opacity: 0.3; }

.score__mark[b-5nmvto2n17] {
    position: absolute;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    margin-left: -0.4375rem;
    transform: translateY(-50%);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Where the group stands: filled, and ringed in the page's own background so it reads against any
   part of the ramp it lands on. */
.score__mark--now[b-5nmvto2n17] {
    background: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-background);
}

/* Where it finished last week: hollow, because it is a memory rather than a state. */
.score__mark--last[b-5nmvto2n17] {
    background: var(--mud-palette-background);
    border: 2px solid var(--mud-palette-text-secondary);
}

.score__said[b-5nmvto2n17] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.625rem;
    margin: 0.625rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.score__n[b-5nmvto2n17] {
    font-family: var(--sl-serif);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.score__what[b-5nmvto2n17] { text-wrap: pretty; }

.score__last[b-5nmvto2n17] {
    margin-left: auto;
    color: var(--mud-palette-text-disabled);
    font-variant-numeric: tabular-nums;
}

/* Paper. A gradient is a grey smear to a mono printer, so the track becomes a rule and the two
   marks carry it — one filled, one hollow, exactly as on screen (§13.7, D42). */
@media print {
    .score__ramp[b-5nmvto2n17] {
        background: none;
        border-bottom: 1px solid #000;
        border-radius: 0;
        height: 0.375rem;
    }

    .score__mark--now[b-5nmvto2n17] { background: #000; border-color: #FFF; }
    .score__mark--last[b-5nmvto2n17] { background: #FFF; border-color: #000; }
}
/* /Components/Shared/StatusChip.razor.rz.scp.css */
.sl-status[b-7ws2p3qdwj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--sl-status);
    white-space: nowrap;
}

.sl-status__word[b-7ws2p3qdwj] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* /Components/Shared/StatusMark.razor.rz.scp.css */
.sl-mark[b-rf5n3rks8d] { color: var(--sl-status); display: block; }

/* The week in progress is a reading, not a result: it is drawn lighter so a man does not read
   Wednesday as a verdict on a week that has three days left in it (PLAN.md §7.5). */
.sl-mark--running[b-rf5n3rks8d] { opacity: 0.5; }
/* /Components/Shared/WeekGrid.razor.rz.scp.css */
/* The grid and its key, wherever they are drawn (#66). Moved whole from GroupTrends.razor.css,
   so /trends is unchanged by having a second home for it. */

.note[b-euw4lxizmo] {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-disabled);
}

/* ---- the grid ---- */

.grid[b-euw4lxizmo] { display: flex; flex-direction: column; }

.grid__row[b-euw4lxizmo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3125rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.grid__row:last-child[b-euw4lxizmo] { border-bottom: 0; }

.grid__row--head[b-euw4lxizmo] {
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.grid__who[b-euw4lxizmo] {
    flex-shrink: 0;
    width: 6rem;
    font-family: var(--sl-serif);
    font-size: 1.0625rem;
    line-height: 1.2;
}

.grid__row--head .grid__who[b-euw4lxizmo] {
    font-family: var(--sl-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.grid__weeks[b-euw4lxizmo] {
    display: grid;

    /* The span, set on .grid by the page. The fallback is the default span, so a grid that
       somehow renders without it is still twelve columns rather than one. */
    grid-template-columns: repeat(var(--sl-weeks, 12), 1fr);
    align-items: center;
    flex-grow: 1;
    min-width: 0;

    /* A 2px breath between marks so adjacent cells never read as one run of colour. */
    gap: 2px;
}

.grid__cell[b-euw4lxizmo] { display: flex; justify-content: center; }

.grid__tick[b-euw4lxizmo] {
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;

    /* Ticks are sparse, so each one hangs from its own column rather than centring in it. */
    justify-self: start;
}

/* Unless every column carries one. At four weeks the columns are wide enough that a
   left-hung date sits most of a column away from the mark it labels, which reads as a
   label for the gap rather than for the week. */
.grid--dated .grid__tick[b-euw4lxizmo] { justify-self: center; }

/* ---- the key ---- */

.key[b-euw4lxizmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.125rem;
    list-style: none;
    margin: 0.875rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--mud-palette-divider);
}

.key__one[b-euw4lxizmo] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* A phone holds twelve marks across if the name column gives way. */
@media (max-width: 34rem) {
    .grid__row[b-euw4lxizmo] { gap: 0.5rem; }
    .grid__who[b-euw4lxizmo] { width: 4.25rem; font-size: 0.9375rem; }
    .grid__tick[b-euw4lxizmo] { font-size: 0.5625rem; }
}