:root {
    color-scheme: light;

    /* Application color tokens backed by Open Props primitives. */
    --brand-ink: var(--gray-12);
    --body-ink: var(--gray-9);
    --quiet-ink: var(--gray-8);
    --muted-ink: var(--gray-7);
    --on-brand-ink: var(--gray-0);

    --brand-accent: var(--orange-7);
    --brand-accent-muted: var(--orange-6);
    --brand-accent-border: var(--orange-5);
    --brand-accent-focus: var(--orange-4);
    --brand-emphasis-ink: var(--orange-9);
    --brand-action-surface: var(--orange-8);
    --brand-action-surface-hover: var(--orange-9);
    --brand-accent-ink: var(--orange-10);
    --brand-soft: var(--orange-0);
    --brand-soft-strong: var(--orange-1);

    --surface-page: var(--sand-1);
    --surface-panel: var(--gray-0);
    --surface-subtle: var(--sand-1);
    --surface-muted: var(--sand-0);
    --line-color: var(--sand-4);
    --line-color-strong: var(--sand-5);

    --success-indicator: var(--green-6);
    --danger-ink: var(--red-9);
    --danger-line: var(--red-3);
    --danger-surface: var(--red-0);
    --reference-ink: var(--blue-8);
    --reference-surface: var(--blue-0);

    --presence-blue: var(--blue-7);
    --presence-green: var(--green-7);
    --presence-violet: var(--violet-7);
    --presence-orange: var(--orange-7);
    --presence-red: var(--red-7);
    --presence-neutral: var(--gray-8);

    --row-hover-surface: color-mix(
        in srgb,
        var(--brand-soft-strong) 10%,
        var(--surface-panel)
    );

    --table-min-width: 64rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --brand-ink: var(--gray-1);
        --body-ink: var(--gray-2);
        --quiet-ink: var(--gray-4);
        --muted-ink: var(--gray-5);
        --on-brand-ink: var(--gray-0);

        --brand-accent: var(--orange-4);
        --brand-accent-muted: var(--orange-5);
        --brand-accent-border: var(--orange-6);
        --brand-accent-focus: var(--orange-4);
        --brand-emphasis-ink: var(--orange-3);
        --brand-action-surface: var(--orange-8);
        --brand-action-surface-hover: var(--orange-9);
        --brand-accent-ink: var(--orange-3);
        --brand-soft: color-mix(in srgb, var(--orange-8) 18%, var(--gray-11));
        --brand-soft-strong: color-mix(
            in srgb,
            var(--orange-8) 28%,
            var(--gray-11)
        );

        --surface-page: var(--gray-12);
        --surface-panel: var(--gray-11);
        --surface-subtle: var(--gray-10);
        --surface-muted: var(--gray-10);
        --line-color: var(--gray-8);
        --line-color-strong: var(--gray-7);

        --success-indicator: var(--green-4);
        --danger-ink: var(--red-3);
        --danger-line: var(--red-7);
        --danger-surface: color-mix(in srgb, var(--red-9) 25%, var(--gray-11));
        --reference-ink: var(--blue-3);
        --reference-surface: color-mix(
            in srgb,
            var(--blue-9) 25%,
            var(--gray-11)
        );

        --presence-blue: var(--blue-6);
        --presence-green: var(--green-6);
        --presence-violet: var(--violet-6);
        --presence-orange: var(--orange-7);
        --presence-red: var(--red-6);
        --presence-neutral: var(--gray-7);
    }
}

* {
    box-sizing: border-box;
}

html {
    background: var(--surface-page);
}

body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    color: var(--brand-ink);
    font-family: var(--font-sans);
    font-size: var(--font-size-1);
}

.print-only {
    display: none;
}

.app-shell {
    width: min(100% - var(--size-fluid-4), 96rem);
    margin-inline: auto;
    padding-block: var(--size-fluid-4) var(--size-fluid-5);
}

.masthead {
    margin-block-end: var(--size-4);
    padding-inline: var(--size-1);
}

.masthead h1 {
    max-inline-size: none;
    margin: 0;
    color: var(--brand-ink);
    font-family: var(--font-serif);
    font-size: var(--font-size-fluid-3);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-0);
}

.floating-tools {
    position: fixed;
    inset-block-start: calc(5vh + var(--size-3));
    inset-inline-end: calc(var(--size-fluid-3) + var(--size-3));
    z-index: 100;
    display: flex;
    align-items: flex-start;
    gap: var(--size-3);
}

.presence-indicator {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--size-3);
    min-height: var(--size-8);
    padding: var(--size-1) var(--size-3);
    border: var(--border-size-1) solid var(--line-color);
    border-radius: 0;
    color: var(--quiet-ink);
    background: var(--surface-panel);
    box-shadow: var(--shadow-3);
}

.presence-label {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    white-space: nowrap;
}

.presence-dot {
    width: var(--size-2);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--success-indicator);
}

.presence-stack {
    display: flex;
    align-items: center;
    padding-inline-start: var(--size-2);
}

.presence-compact {
    gap: 0;
    padding-inline: var(--size-2);
}

.presence-compact .presence-stack {
    padding-inline-start: 0;
}

.presence-avatar {
    display: grid;
    width: var(--size-7);
    aspect-ratio: 1;
    place-items: center;
    border: var(--border-size-2) solid var(--surface-panel);
    border-radius: 50%;
    color: var(--on-brand-ink);
    font-size: var(--font-size-00);
    font-weight: var(--font-weight-8);
    line-height: 1;
    cursor: default;
}

.presence-avatar + .presence-avatar {
    margin-inline-start: calc(var(--size-2) * -1);
}

.presence-avatar.blue {
    background: var(--presence-blue);
}

.presence-avatar.green {
    background: var(--presence-green);
}

.presence-avatar.violet {
    background: var(--presence-violet);
}

.presence-avatar.orange {
    background: var(--presence-orange);
}

.presence-avatar.red {
    background: var(--presence-red);
}

.presence-avatar.presence-more {
    background: var(--presence-neutral);
}

.moderator-menu {
    position: relative;
    z-index: 2;
}

.moderator-trigger {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--size-2);
    min-height: var(--size-8);
    padding: var(--size-2) var(--size-4);
    border: var(--border-size-1) solid var(--brand-action-surface-hover);
    border-radius: 0;
    color: var(--on-brand-ink);
    background: var(--brand-action-surface);
    box-shadow: var(--shadow-3);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-8);
    list-style: none;
    cursor: pointer;
}

.moderator-trigger::-webkit-details-marker {
    display: none;
}

.moderator-trigger::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: var(--font-size-2);
    line-height: 1;
}

.moderator-menu[open] .moderator-trigger::after {
    content: "−";
}

.moderator-trigger:hover {
    background: var(--brand-action-surface-hover);
}

.moderator-trigger:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.moderator-panel {
    position: fixed;
    inset-block-start: 5vh;
    inset-inline-end: var(--size-fluid-3);
    display: flex;
    width: clamp(20rem, 25vw, 30rem);
    height: 90vh;
    padding: var(--size-8) var(--size-4) var(--size-4);
    flex-direction: column;
    overflow-y: auto;
    border: var(--border-size-1) solid var(--line-color);
    border-radius: 0;
    color: var(--brand-ink);
    background: var(--surface-panel);
    box-shadow: var(--shadow-6);
}

.moderator-panel-header {
    padding-block-end: var(--size-4);
    border-block-end: var(--border-size-1) solid var(--line-color);
}

.moderator-panel-header p {
    max-inline-size: none;
    margin: 0 0 var(--size-1);
    color: var(--brand-accent);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-3);
    text-transform: uppercase;
}

.moderator-panel-header h2 {
    max-inline-size: none;
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--font-size-4);
}

.moderator-actions {
    display: grid;
    gap: var(--size-2);
    padding-block: var(--size-4);
}

.moderator-action {
    width: 100%;
    min-height: var(--size-8);
    padding: var(--size-3);
    border: var(--border-size-1) solid var(--line-color);
    border-radius: 0;
    color: var(--body-ink);
    background: var(--surface-subtle);
    box-shadow: none;
    font: inherit;
    font-weight: var(--font-weight-6);
    text-align: start;
    cursor: pointer;
    text-decoration: none;
}

.moderator-action:hover {
    border-color: var(--brand-accent-border);
    background: var(--brand-soft);
}

.moderator-panel-footer {
    margin-block-start: auto;
    padding-block-start: var(--size-4);
    border-block-start: var(--border-size-1) solid var(--line-color);
}

.danger-action {
    color: var(--danger-ink);
    border-color: var(--danger-line);
    background: var(--danger-surface);
}

.register-card {
    overflow: hidden;
    border: var(--border-size-1) solid var(--line-color);
    border-radius: 0;
    background: var(--surface-panel);
    box-shadow: var(--shadow-3);
}

.attendance-card {
    margin-block-end: var(--size-6);
}

.attendance-panel {
    min-inline-size: 0;
    margin: 0;
    padding: var(--size-fluid-4);
    border: 0;
}

.attendance-panel legend {
    float: inline-start;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--brand-ink);
    font-family: var(--font-serif);
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-0);
}

.attendance-groups {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--size-6);
}

.attendance-group:only-child {
    grid-column: 1 / -1;
}

.attendance-group h2 {
    max-inline-size: none;
    margin: 0 0 var(--size-3);
    color: var(--muted-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
}

.attendance-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: var(--size-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.attendee-option {
    display: grid;
    grid-template-columns: var(--size-4) minmax(0, 1fr);
    align-items: center;
    gap: var(--size-3);
    width: 100%;
    min-height: var(--size-8);
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--line-color);
    border-radius: 0;
    color: var(--quiet-ink);
    background: var(--surface-subtle);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    cursor: pointer;
    transition:
        border-color 160ms var(--ease-2),
        background-color 160ms var(--ease-2),
        color 160ms var(--ease-2);
}

.attendee-option:hover {
    border-color: var(--brand-accent-border);
}

.attendee-option:has(input:checked) {
    border-color: var(--brand-accent-border);
    color: var(--brand-accent-ink);
    background: var(--brand-soft-strong);
}

.attendee-option input {
    width: var(--size-4);
    height: var(--size-4);
    margin: 0;
    accent-color: var(--brand-accent);
}

.topic-filter-select {
    display: block;
    inline-size: auto;
    margin-block: var(--size-2);
    margin-inline: auto var(--size-4);
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--line-color-strong);
    border-radius: 0;
    color: var(--body-ink);
    background: var(--surface-panel);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-0);
}

.topic-filter-select:focus {
    border-color: var(--brand-accent);
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.table-frame {
    overflow-x: auto;
}

.minutes-empty-row td {
    color: var(--muted-ink);
    text-align: center;
}

.entry-table {
    width: 100%;
    min-width: var(--table-min-width);
    border-collapse: collapse;
    border-radius: 0;
    table-layout: fixed;
}

.entry-table th,
.entry-table td {
    border-radius: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.entry-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.number-column {
    width: 5.5rem;
}

.topic-column {
    width: 13rem;
}

.responsibility-column {
    width: 9rem;
}

.content-column {
    width: auto;
}

.reference-column {
    width: 8.5rem;
}

.review-column {
    width: 10rem;
}

.entry-table thead {
    color: var(--muted-ink);
    background: var(--surface-subtle);
}

.entry-table th,
.entry-table td {
    padding: var(--size-4);
    border-block-end: var(--border-size-1) solid var(--line-color);
    vertical-align: top;
    text-align: start;
}

.entry-table :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(4)) {
    padding-inline: var(--size-3);
}

.entry-table thead th {
    padding-block: var(--size-3);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
}

.entry-row {
    transition: background-color 160ms var(--ease-2);
}

.entry-row:hover > td {
    background-color: var(--row-hover-surface);
}

.row-insert-control[hidden] {
    display: none;
}

.row-insert-control td {
    position: relative;
    height: 0;
    padding: 0;
    border: 0;
    overflow: visible;
}

.row-insert-control.append td {
    height: calc(var(--size-6) / 2 + var(--size-3));
}

.row-insert-control.append:hover > td {
    background-color: var(--surface-panel);
}

.row-insert-button {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    z-index: 3;
    display: grid;
    width: var(--size-6);
    aspect-ratio: 1;
    padding: 0;
    place-items: center;
    transform: translate(-50%, -50%);
    border: var(--border-size-1) solid var(--brand-accent);
    border-radius: 0;
    color: var(--brand-emphasis-ink);
    background: var(--surface-panel);
    box-shadow: var(--shadow-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-7);
    line-height: 1;
    cursor: pointer;
}

.row-insert-control .row-insert-button:hover {
    color: var(--on-brand-ink);
    background: var(--brand-action-surface);
}

.row-insert-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.number-cell {
    position: relative;
}

.entry-number {
    display: inline-block;
    color: var(--quiet-ink);
    font-family: var(--font-sans);
    font-size: var(--font-size-1);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-7);
}

.entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-1);
    margin-block-start: var(--size-3);
}

.entry-action-button {
    display: grid;
    width: var(--size-6);
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    place-items: center;
    border: var(--border-size-1) dashed currentColor;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.entry-action-icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sync-entry-action {
    color: var(--brand-emphasis-ink);
    background: var(--brand-soft);
}

.sync-entry-action:hover {
    border-color: var(--brand-accent);
    background: var(--brand-soft-strong);
}

.delete-entry-action {
    position: absolute;
    inset-block-end: var(--size-4);
    inset-inline-start: var(--size-3);
    color: var(--danger-ink);
    background: var(--danger-surface);
}

.delete-entry-action:hover {
    border-color: var(--danger-ink);
}

.entry-action-button:focus-visible {
    outline: var(--border-size-2) solid currentColor;
    outline-offset: var(--size-1);
}

.topic-cell {
    font-weight: inherit;
}

.responsibility-list {
    display: grid;
    gap: var(--size-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.responsibility-name {
    display: block;
    padding-inline-start: var(--size-2);
    border-inline-start: var(--border-size-3) solid var(--brand-accent-border);
    color: var(--body-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-2);
}

.responsibility-name.editable {
    padding: var(--size-2);
    border: var(--border-size-1) dashed var(--line-color-strong);
    border-inline-start: var(--border-size-3) solid var(--brand-accent-border);
    background: var(--surface-muted);
    transition:
        border-color 160ms var(--ease-2),
        color 160ms var(--ease-2);
}

.responsibility-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--size-2);
    align-items: center;
}

.responsibility-edit-button {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0 var(--size-4) 0 0;
    border: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    font: inherit;
    line-height: inherit;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.responsibility-edit-button > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.responsibility-edit-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    width: 0.8rem;
    height: 0.8rem;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--muted-ink);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 160ms var(--ease-2);
}

.responsibility-edit-button:hover .responsibility-edit-icon,
.responsibility-edit-button:focus-visible .responsibility-edit-icon {
    stroke: var(--brand-accent);
}

.responsibility-name.editable:has(.responsibility-edit-button:hover),
.responsibility-name.editable:has(.responsibility-edit-button:focus-visible) {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}

.responsibility-edit-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-border);
    outline-offset: var(--size-1);
}

.responsibility-delete-button {
    display: grid;
    width: var(--size-5);
    height: var(--size-5);
    padding: 0;
    place-items: center;
    border: 0;
    color: var(--muted-ink);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.responsibility-delete-icon {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.responsibility-delete-button:hover {
    color: var(--danger-ink);
}

.responsibility-delete-button:focus-visible {
    color: var(--danger-ink);
    outline: var(--border-size-2) solid currentColor;
    outline-offset: var(--size-1);
}

.responsibility-input-control {
    min-width: 0;
}

.responsibility-input {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--body-ink);
    background: transparent;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-2);
}

.responsibility-input::placeholder {
    color: var(--muted-ink);
    font-weight: var(--font-weight-5);
}

.responsibility-input:focus {
    outline: 0;
}

.responsibility-input-control:focus-within {
    border-color: var(--brand-accent);
    border-inline-start-color: var(--brand-accent);
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.insert-responsibility-control {
    min-height: var(--size-6);
    border: var(--border-size-1) dashed var(--line-color-strong);
    border-inline-start: var(--border-size-3) solid var(--brand-accent-border);
    border-radius: 0;
    background: var(--surface-muted);
    list-style: none;
    transition:
        border-color 160ms var(--ease-2),
        background-color 160ms var(--ease-2);
}

.insert-responsibility-control:hover {
    border-color: var(--brand-accent-muted);
    background: var(--brand-soft);
}

.insert-responsibility-button {
    display: grid;
    width: 100%;
    min-height: var(--size-6);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    color: var(--brand-emphasis-ink);
    background: transparent;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-5);
    line-height: 1;
    cursor: pointer;
}

.insert-responsibility-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-border);
    outline-offset: calc(var(--border-size-2) * -1);
}

.responsibility-empty-state {
    display: block;
    padding: var(--size-2);
    color: var(--muted-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-5);
}

.topic-title,
.topic-count,
.review-date,
.review-status {
    display: block;
}

.topic-title {
    color: var(--brand-ink);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-2);
}

.topic-edit-button {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--size-2) var(--size-5) var(--size-2) var(--size-2);
    border: var(--border-size-1) dashed var(--line-color-strong);
    border-radius: 0;
    color: inherit;
    background: var(--surface-muted);
    box-shadow: none;
    font: inherit;
    line-height: inherit;
    text-align: start;
    cursor: pointer;
}

.topic-edit-button > .topic-title {
    overflow-wrap: anywhere;
    white-space: normal;
}

.topic-edit-icon {
    position: absolute;
    inset-block-start: var(--size-2);
    inset-inline-end: var(--size-2);
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: var(--muted-ink);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 160ms var(--ease-2);
}

.topic-edit-button:hover {
    border-color: var(--brand-accent-muted);
    background: var(--brand-soft);
}

.topic-edit-button:hover .topic-edit-icon {
    stroke: var(--brand-emphasis-ink);
}

.topic-edit-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-border);
    outline-offset: var(--size-1);
}

.topic-input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--size-10);
    margin-block-start: var(--size-2);
    padding: var(--size-2);
    border: var(--border-size-1) solid var(--line-color-strong);
    border-radius: 0;
    color: var(--brand-ink);
    background: var(--surface-panel);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-2);
    overflow-wrap: anywhere;
    resize: vertical;
    white-space: pre-wrap;
}

.topic-input:hover {
    border-color: var(--brand-accent-muted);
}

.topic-input:focus {
    border-color: var(--brand-accent);
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.topic-count {
    margin-block-start: var(--size-2);
    color: var(--muted-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-5);
}

.comment-list {
    display: grid;
    gap: var(--size-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--size-2);
    padding: var(--size-3);
    border: var(--border-size-1) solid var(--line-color);
    border-radius: 0;
    background: var(--surface-panel);
    box-shadow: var(--shadow-1);
}

.comment-entry.comment {
    border-style: solid;
}

.comment-entry.annotation {
    border-style: dashed;
}

.comment-entry.sticky {
    border-inline-start: var(--size-1) solid var(--brand-accent);
}

.comment-entry.collapsed {
    padding-block: var(--size-2);
    border-style: solid;
    background: var(--surface-muted);
    box-shadow: none;
}

.timeline-comment-controls {
    display: flex;
    flex: 0 0 auto;
    gap: var(--border-size-2);
}

.timeline-comment-meta-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--size-1);
    align-self: flex-start;
    margin-block-start: calc(var(--size-3) * -1);
    margin-inline-start: auto;
    margin-inline-end: calc(var(--size-3) * -1);
}

.timeline-comment-meta-actions .comment-origin {
    margin-block-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.comment-entry.collapsed .timeline-comment-meta-actions {
    margin-block-start: calc(var(--size-2) * -1);
}

.comment-entry.collapsed > .comment-meta > .comment-origin {
    margin-block-start: calc(var(--size-2) * -1);
}

.collapsed-comment-group {
    min-width: 0;
    border: var(--border-size-1) solid var(--line-color);
    background: var(--surface-panel);
    list-style: none;
}

.collapsed-comment-details {
    background: inherit;
}

.collapsed-comment-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--size-2);
    align-items: center;
    min-height: var(--size-7);
    padding: var(--size-2) var(--size-3);
    border: 0;
    color: var(--muted-ink);
    background: inherit;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    cursor: pointer;
    list-style: none;
}

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

.collapsed-comment-summary::before {
    content: "›";
    color: var(--brand-accent);
    font-size: var(--font-size-3);
    line-height: 1;
    transform-origin: center;
    transition: transform 120ms var(--ease-2);
}

.collapsed-comment-details[open] > .collapsed-comment-summary::before {
    transform: rotate(90deg);
}

.collapsed-comment-summary:hover {
    color: var(--body-ink);
    background: inherit;
}

.collapsed-comment-group:has(
    > .collapsed-comment-details > .collapsed-comment-summary:hover
) {
    border-color: var(--brand-accent-muted);
}

.collapsed-comment-summary:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.collapsed-comment-list {
    display: grid;
    gap: var(--size-3);
    margin: var(--size-2) 0 0;
    padding: 0;
    list-style: none;
}

.collapsed-comment-placeholder {
    color: var(--muted-ink);
}

.timeline-comment-control-button {
    display: grid;
    width: var(--size-5);
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    place-items: center;
    border: var(--border-size-1) dashed var(--brand-accent-border);
    border-radius: 0;
    color: var(--brand-emphasis-ink);
    background: var(--brand-soft);
    box-shadow: none;
    cursor: pointer;
}

.timeline-comment-control-button:hover,
.timeline-comment-control-button:focus-visible,
.timeline-comment-control-button[aria-pressed="true"] {
    color: var(--brand-emphasis-ink);
    border-color: var(--brand-accent);
    background: var(--brand-soft-strong);
}

.timeline-comment-control-button:focus-visible {
    outline: var(--border-size-2) solid currentColor;
    outline-offset: var(--size-1);
}

.timeline-comment-control-icon {
    width: 0.75rem;
    height: 0.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.annotation-controls {
    display: flex;
    flex: 0 0 auto;
    gap: var(--size-1);
    align-self: flex-start;
    margin-inline-start: auto;
}

.annotation-control-button {
    display: grid;
    width: var(--size-5);
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    place-items: center;
    border: var(--border-size-1) dashed currentColor;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.annotation-control-icon {
    pointer-events: none;
    width: 0.75rem;
    height: 0.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.edit-annotation-action {
    color: var(--brand-emphasis-ink);
    background: var(--brand-soft);
}

.edit-annotation-action:hover {
    border-color: var(--brand-accent);
    background: var(--brand-soft-strong);
}

.delete-annotation-action {
    color: var(--danger-ink);
    background: var(--danger-surface);
}

.delete-annotation-action:hover {
    border-color: var(--danger-ink);
}

.annotation-control-button:focus-visible {
    outline: var(--border-size-2) solid currentColor;
    outline-offset: var(--size-1);
}

.insert-annotation-control[hidden] {
    display: none;
}

.insert-annotation-control {
    min-height: var(--size-9);
    border: var(--border-size-1) dashed var(--line-color-strong);
    border-radius: 0;
    background: var(--surface-muted);
    list-style: none;
    transition:
        border-color 160ms var(--ease-2),
        background-color 160ms var(--ease-2);
}

.insert-annotation-control:hover {
    border-color: var(--brand-accent-muted);
    background: var(--brand-soft);
}

.insert-annotation-button {
    display: grid;
    width: 100%;
    min-height: var(--size-9);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    color: var(--brand-emphasis-ink);
    background: transparent;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-5);
    line-height: 1;
    cursor: pointer;
}

.insert-annotation-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-border);
    outline-offset: calc(var(--border-size-2) * -1);
}

.annotation-input-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--size-2);
    padding: var(--size-3);
    border: var(--border-size-1) dashed var(--line-color-strong);
    border-radius: 0;
    background: var(--surface-muted);
    list-style: none;
}

.annotation-input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--size-10);
    margin: 0;
    padding: var(--size-2);
    border: var(--border-size-1) solid var(--line-color-strong);
    border-radius: 0;
    color: var(--body-ink);
    background: var(--surface-panel);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-0);
    line-height: var(--font-lineheight-3);
    overflow-wrap: anywhere;
    resize: vertical;
    white-space: pre-wrap;
}

.annotation-input::placeholder {
    color: var(--muted-ink);
}

.annotation-input:hover {
    border-color: var(--brand-accent-muted);
}

.annotation-input:focus {
    border-color: var(--brand-accent);
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.comment-meta {
    display: flex;
    align-items: baseline;
    gap: var(--size-2);
    min-width: 0;
}

.comment-origin {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-block-start: calc(var(--size-3) * -1);
    margin-inline-start: auto;
    margin-inline-end: calc(var(--size-3) * -1);
}

.comment-author {
    overflow: hidden;
    color: var(--body-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-date {
    color: var(--muted-ink);
    font-family: var(--font-sans);
    font-size: var(--font-size-0);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-6);
    white-space: nowrap;
}

.comment-text {
    max-inline-size: none;
    margin: 0;
    color: var(--body-ink);
    font-size: var(--font-size-0);
    line-height: var(--font-lineheight-3);
}

.reference-id {
    display: inline-block;
    padding: var(--size-1) var(--size-2);
    border-radius: 0;
    color: var(--reference-ink);
    background: var(--reference-surface);
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    white-space: nowrap;
}

.reference-preview-button {
    margin: 0;
    border: 0;
    box-shadow: none;
    line-height: normal;
    cursor: pointer;
}

.reference-preview-button:hover,
.reference-preview-button:focus-visible {
    color: var(--brand-accent-ink);
    background: var(--brand-soft-strong);
}

.reference-preview-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.jira-preview-overlay {
    position: fixed;
    inset: auto anchor(right) auto auto;
    top: calc(anchor(bottom) + var(--size-2));
    width: 26rem;
    height: 24rem;
    max-width: calc(100vw - var(--size-4));
    max-height: calc(100vh - var(--size-4));
    margin: 0;
    padding: 0;
    overflow: auto;
    border: var(--border-size-1) solid var(--line-color-strong);
    border-inline-start: var(--size-1) solid var(--brand-accent);
    border-radius: 0;
    color: var(--body-ink);
    background: var(--surface-panel);
    box-shadow: var(--shadow-5);
    position-try-fallbacks:
        flip-block,
        flip-inline,
        flip-block flip-inline;
}

.jira-preview-card {
    display: grid;
    gap: var(--size-4);
    margin: 0;
    min-height: 100%;
    padding: var(--size-4);
}

.jira-preview-header {
    display: flex;
    align-items: flex-start;
    gap: var(--size-4);
    padding-block-end: var(--size-4);
    border-block-end: var(--border-size-1) solid var(--line-color);
}

.jira-preview-heading {
    display: grid;
    gap: var(--size-2);
    min-width: 0;
}

.jira-preview-key {
    justify-self: start;
}

.jira-preview-link {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    justify-self: start;
    color: var(--reference-ink);
    text-decoration: none;
}

.jira-preview-link:hover .jira-preview-key,
.jira-preview-link:focus-visible .jira-preview-key {
    color: var(--brand-accent-ink);
    background: var(--brand-soft-strong);
}

.jira-preview-external-link-icon {
    width: 0.8rem;
    height: 0.8rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jira-preview-title {
    max-inline-size: none;
    margin: 0;
    color: var(--brand-ink);
    font-family: var(--font-serif);
    font-size: var(--font-size-3);
    line-height: var(--font-lineheight-1);
    overflow-wrap: anywhere;
}

.jira-preview-close-control {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

.jira-preview-close-button {
    display: grid;
    width: var(--size-6);
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    place-items: center;
    border: var(--border-size-1) dashed var(--brand-accent-border);
    border-radius: 0;
    color: var(--brand-emphasis-ink);
    background: var(--brand-soft);
    box-shadow: none;
    cursor: pointer;
}

.jira-preview-close-button:hover {
    border-color: var(--brand-accent);
    background: var(--brand-soft-strong);
}

.jira-preview-close-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.jira-preview-close-icon {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
}

.jira-preview-metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--size-3) var(--size-5);
    margin: 0;
}

.jira-preview-metadata-item {
    display: grid;
    gap: var(--size-1);
    min-width: 0;
}

.jira-preview-metadata dt {
    color: var(--muted-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
}

.jira-preview-metadata dd {
    margin: 0;
    color: var(--body-ink);
    font-size: var(--font-size-1);
    overflow-wrap: anywhere;
}

.jira-preview-description {
    display: grid;
    gap: var(--size-2);
    padding-block-start: var(--size-4);
    border-block-start: var(--border-size-1) solid var(--line-color);
}

.jira-preview-description h3 {
    margin: 0;
    color: var(--brand-ink);
    font-size: var(--font-size-1);
}

.jira-preview-description p {
    max-inline-size: none;
    margin: 0;
    color: var(--body-ink);
    font-size: var(--font-size-1);
    line-height: var(--font-lineheight-3);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.jira-preview-description .jira-preview-empty {
    color: var(--muted-ink);
    font-style: italic;
}

@media (max-width: 42rem) {
    .jira-preview-overlay {
        width: calc(100vw - var(--size-4));
        height: min(24rem, calc(100vh - var(--size-4)));
        max-height: calc(100vh - var(--size-4));
    }

    .jira-preview-card {
        padding: var(--size-4);
    }

    .jira-preview-metadata {
        grid-template-columns: minmax(0, 1fr);
    }
}

.reference-list {
    display: grid;
    gap: var(--size-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.reference-list-item {
    min-width: 0;
}

.reference-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--size-2);
    align-items: center;
    border: var(--border-size-1) dashed var(--reference-ink);
    background: var(--reference-surface);
    transition:
        border-color 160ms var(--ease-2),
        background-color 160ms var(--ease-2);
}

.reference-state-list {
    display: grid;
    gap: var(--size-2);
    min-width: 0;
}

.reference-edit-button {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--size-1) var(--size-5) var(--size-1) var(--size-2);
    border: 0;
    border-radius: 0;
    color: var(--reference-ink);
    background: transparent;
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    line-height: normal;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms var(--ease-2);
}

.reference-edit-button > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reference-edit-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--size-2);
    width: 0.8rem;
    height: 0.8rem;
    transform: translateY(-50%);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reference-edit-button:hover,
.reference-edit-button:focus-visible {
    color: var(--brand-accent);
    background: transparent;
}

.reference-controls:has(.reference-edit-button:hover),
.reference-controls:has(.reference-edit-button:focus-visible) {
    border-color: var(--brand-accent);
    background: var(--brand-soft);
}

.reference-edit-button:focus-visible,
.insert-reference-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent);
    outline-offset: var(--size-1);
}

.reference-delete-button {
    display: grid;
    width: var(--size-5);
    height: var(--size-5);
    padding: 0;
    place-items: center;
    border: 0;
    color: var(--muted-ink);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.reference-delete-icon {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reference-delete-button:hover {
    color: var(--danger-ink);
}

.reference-delete-button:focus-visible {
    color: var(--danger-ink);
    outline: var(--border-size-2) solid currentColor;
    outline-offset: var(--size-1);
}

.reference-input {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--size-1) var(--size-2);
    border: var(--border-size-1) solid var(--reference-ink);
    border-radius: 0;
    color: var(--reference-ink);
    background: var(--surface-panel);
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    line-height: normal;
}

.reference-input:focus {
    outline: var(--border-size-2) solid var(--reference-ink);
    outline-offset: var(--size-1);
}

.insert-reference-button {
    display: grid;
    width: 100%;
    min-height: var(--size-6);
    margin: 0;
    padding: 0;
    place-items: center;
    border: var(--border-size-1) dashed var(--reference-ink);
    border-radius: 0;
    color: var(--reference-ink);
    background: var(--reference-surface);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-7);
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 160ms var(--ease-2),
        color 160ms var(--ease-2),
        background-color 160ms var(--ease-2);
}

.insert-reference-button:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
    background: var(--brand-soft);
}

.review-date {
    color: var(--brand-ink);
    font-weight: var(--font-weight-7);
}

.review-postponement-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--size-1);
    margin-block-start: var(--size-2);
}

.review-postponement-button {
    min-width: 0;
    margin: 0;
    padding: var(--size-1);
    border: var(--border-size-1) dashed var(--brand-accent-border);
    border-radius: 0;
    color: var(--brand-emphasis-ink);
    background: var(--brand-soft);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-1);
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color 160ms var(--ease-2),
        color 160ms var(--ease-2),
        background-color 160ms var(--ease-2);
}

.review-postponement-button:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
    background: var(--brand-soft-strong);
}

.review-postponement-button:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent);
    outline-offset: var(--size-1);
}

.review-status {
    width: fit-content;
    margin-block-start: var(--size-2);
    padding: var(--size-1) var(--size-2);
    border-radius: 0;
    color: var(--brand-emphasis-ink);
    background: var(--brand-soft-strong);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
}

.people-page {
    width: min(100% - var(--size-fluid-4), 44rem);
}

.people-page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--size-5);
    margin-block-end: var(--size-5);
}

.people-page-header h1 {
    max-inline-size: none;
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--font-size-fluid-3);
}

.people-page-kicker,
.people-page-description {
    max-inline-size: none;
    margin: 0;
}

.people-page-kicker {
    color: var(--brand-accent);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-3);
    text-transform: uppercase;
}

.people-page-description {
    margin-block-start: var(--size-2);
    color: var(--muted-ink);
}

.people-page-back {
    flex: 0 0 auto;
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--line-color-strong);
    color: var(--body-ink);
    background: var(--surface-panel);
    font-weight: var(--font-weight-6);
    text-decoration: none;
}

.people-page-back:hover {
    border-color: var(--brand-accent-border);
    background: var(--brand-soft);
}

.people-editor-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.people-create-control {
    display: grid;
    gap: var(--size-3);
    padding: var(--size-4);
    border-block-end: var(--border-size-1) solid var(--line-color-strong);
    background: var(--surface-subtle);
}

.people-create-control h2 {
    max-inline-size: none;
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--font-size-3);
}

.people-create-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--size-4);
}

.people-create-button,
.people-delete-button {
    width: fit-content;
    margin: 0;
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--brand-action-surface-hover);
    border-radius: 0;
    color: var(--on-brand-ink);
    background: var(--brand-action-surface);
    box-shadow: none;
    font: inherit;
    font-weight: var(--font-weight-7);
    cursor: pointer;
}

.people-create-button:hover {
    background: var(--brand-action-surface-hover);
}

.people-editor-row {
    padding: var(--size-4);
    border-block-end: var(--border-size-1) solid var(--line-color);
}

.people-editor-row:last-child {
    border-block-end: 0;
}

.people-name-field {
    display: grid;
    gap: var(--size-2);
}

.people-name-label {
    color: var(--muted-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
}

.people-name-input {
    width: 100%;
    margin: 0;
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--line-color-strong);
    border-radius: 0;
    color: var(--brand-ink);
    background: var(--surface-panel);
    box-shadow: none;
    font: inherit;
    font-weight: var(--font-weight-6);
}

.people-name-input:focus {
    border-color: var(--brand-accent);
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.people-delete-control {
    margin-block-start: var(--size-3);
    color: var(--danger-ink);
    font-size: var(--font-size-0);
}

.people-delete-control summary {
    width: fit-content;
    cursor: pointer;
}

.people-delete-confirmation {
    display: grid;
    gap: var(--size-2);
    margin-block-start: var(--size-2);
    padding: var(--size-3);
    border: var(--border-size-1) solid var(--danger-line);
    background: var(--danger-surface);
}

.people-delete-confirmation p {
    max-inline-size: none;
    margin: 0;
}

.people-delete-button {
    border-color: var(--danger-ink);
    color: var(--danger-ink);
    background: var(--surface-panel);
}

.people-delete-button:hover {
    color: var(--on-brand-ink);
    background: var(--danger-ink);
}

.series-page {
    width: min(100% - var(--size-fluid-4), 64rem);
}

.series-page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--size-4);
    margin-block: var(--size-5) var(--size-4);
    padding-inline: var(--size-1);
}

.series-page-header h1,
.empty-meeting-card h1 {
    max-inline-size: none;
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--font-size-fluid-3);
}

.series-page-kicker {
    max-inline-size: none;
    margin: 0 0 var(--size-1);
    color: var(--brand-accent-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-8);
    letter-spacing: var(--font-letterspacing-3);
    text-transform: uppercase;
}

.series-card {
    overflow: hidden;
}

.series-admin-link {
    width: fit-content;
    flex: 0 0 auto;
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--line-color-strong);
    color: var(--body-ink);
    background: var(--surface-panel);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    text-decoration: none;
}

.series-admin-link:hover {
    border-color: var(--brand-accent-border);
    color: var(--brand-accent-ink);
    background: var(--brand-soft);
}

.series-create-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr);
    align-items: end;
    gap: var(--size-5);
    margin-block-end: var(--size-4);
    padding: var(--size-4);
}

.series-create-control h2 {
    max-inline-size: none;
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--font-size-3);
}

.series-create-control p:not(.series-page-kicker) {
    max-inline-size: none;
    margin: var(--size-2) 0 0;
    color: var(--muted-ink);
    font-size: var(--font-size-0);
}

.series-create-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--size-3);
}

.series-create-fields label {
    display: grid;
    gap: var(--size-2);
    color: var(--muted-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
}

.series-create-fields input,
.series-create-fields button {
    min-height: var(--size-9);
    margin: 0;
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--line-color-strong);
    border-radius: 0;
    box-shadow: none;
    font: inherit;
}

.series-create-fields input {
    width: 100%;
    color: var(--brand-ink);
    background: var(--surface-panel);
}

.series-create-fields input:focus {
    border-color: var(--brand-accent);
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.series-create-fields button {
    border-color: var(--brand-action-surface-hover);
    color: var(--on-brand-ink);
    background: var(--brand-action-surface);
    font-weight: var(--font-weight-7);
    cursor: pointer;
}

.series-create-fields button:hover {
    background: var(--brand-action-surface-hover);
}

.series-empty-state {
    padding: var(--size-4);
    color: var(--muted-ink);
}

.series-empty-state p {
    max-inline-size: none;
    margin: 0;
}

.series-participants-card {
    margin-block-start: var(--size-4);
    overflow: hidden;
}

.series-participants-summary {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-3) var(--size-4);
    color: var(--body-ink);
    cursor: pointer;
    list-style: none;
}

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

.series-participants-summary:hover {
    background: var(--surface-subtle);
}

.series-participants-summary:focus-visible {
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: calc(-1 * var(--border-size-2));
}

.series-participants-summary-title {
    font-weight: var(--font-weight-7);
}

.series-participants-summary-meta {
    margin-inline-start: auto;
    color: var(--muted-ink);
    font-size: var(--font-size-0);
    text-align: end;
}

.series-participants-summary::after {
    content: "+";
    color: var(--brand-accent-ink);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-7);
}

.series-participants-card[open] > .series-participants-summary {
    border-block-end: var(--border-size-1) solid var(--line-color);
    background: var(--surface-subtle);
}

.series-participants-card[open] > .series-participants-summary::after {
    content: "−";
}

.series-participants-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-4);
    padding: var(--size-4);
    border-block-end: var(--border-size-1) solid var(--line-color);
}

.series-participants-header h2 {
    max-inline-size: none;
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--font-size-3);
}

.series-participant-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--size-2);
    margin: 0;
    padding: var(--size-4);
    list-style: none;
}

.series-participant-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, auto);
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--line-color);
    background: var(--surface-subtle);
}

.series-participant-name {
    min-width: 0;
    overflow: hidden;
    color: var(--quiet-ink);
    font-weight: var(--font-weight-6);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-participant-item:focus-within {
    border-color: var(--brand-accent-border);
    background: var(--brand-soft);
}

.series-participant-group-select {
    width: 100%;
    margin: 0;
    padding: var(--size-2);
    border: var(--border-size-1) solid var(--line-color-strong);
    border-radius: 0;
    color: var(--body-ink);
    background: var(--surface-panel);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--font-size-0);
}

.series-participant-group-select:focus {
    border-color: var(--brand-accent);
    outline: var(--border-size-2) solid var(--brand-accent-focus);
    outline-offset: var(--size-1);
}

.series-participants-empty {
    display: grid;
    gap: var(--size-3);
    padding: var(--size-4);
}

.series-participants-empty p {
    max-inline-size: none;
    margin: 0;
}

.series-list,
.meeting-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.series-list-item,
.meeting-list-item {
    inline-size: 100%;
    max-inline-size: none;
    padding-inline-start: 0;
}

.series-link,
.meeting-link {
    display: flex;
    inline-size: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--size-4);
    padding: var(--size-4);
    border-block-end: var(--border-size-1) solid var(--line-color);
    color: var(--brand-ink);
    font-weight: var(--font-weight-7);
    text-decoration: none;
}

.series-list-item:last-child > .series-link,
.meeting-list-item:last-child > .meeting-link {
    border-block-end: 0;
}

.series-link small {
    color: var(--muted-ink);
    font-weight: var(--font-weight-5);
}

.series-link:hover,
.meeting-link:hover {
    color: var(--brand-accent-ink);
    background: var(--brand-soft);
}

.series-back-link,
.meeting-breadcrumb a {
    color: var(--quiet-ink);
    font-weight: var(--font-weight-6);
    text-decoration-color: var(--line-color-strong);
    text-underline-offset: var(--size-1);
}

.series-back-link:hover,
.meeting-breadcrumb a:hover {
    color: var(--brand-accent-ink);
    text-decoration-color: currentColor;
}

.meeting-breadcrumb {
    display: flex;
    gap: var(--size-2);
    margin-block-end: var(--size-2);
    color: var(--muted-ink);
    font-size: var(--font-size-0);
}

.meeting-date-picker {
    display: flex;
    align-items: end;
    gap: var(--size-3);
    margin-block-end: var(--size-4);
    padding: var(--size-4);
    border: var(--border-size-1) dashed var(--line-color-strong);
    background: var(--surface-muted);
}

.meeting-date-picker label {
    display: grid;
    flex: 1 1 auto;
    gap: var(--size-2);
    color: var(--muted-ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
}

.meeting-date-picker input,
.meeting-date-picker button,
.create-meeting-button {
    min-height: var(--size-9);
    margin: 0;
    padding: var(--size-2) var(--size-3);
    border: var(--border-size-1) solid var(--line-color-strong);
    border-radius: 0;
    box-shadow: none;
    font: inherit;
}

.meeting-date-picker input {
    color: var(--brand-ink);
    background: var(--surface-panel);
}

.meeting-date-picker button,
.create-meeting-button {
    border-color: var(--brand-action-surface-hover);
    color: var(--on-brand-ink);
    background: var(--brand-action-surface);
    font-weight: var(--font-weight-7);
    cursor: pointer;
}

.meeting-date-picker button:hover,
.create-meeting-button:hover {
    background: var(--brand-action-surface-hover);
}

.empty-meeting-card {
    display: grid;
    gap: var(--size-3);
    margin-block-start: var(--size-4);
    padding: var(--size-fluid-4);
}

.empty-meeting-card p {
    max-inline-size: none;
    margin: 0;
}

.create-meeting-button {
    width: fit-content;
}

@media (max-width: 48rem) {
    .app-shell {
        width: min(100% - var(--size-3), 96rem);
        padding-block-start: var(--size-3);
    }

    .floating-tools {
        inset-inline-end: var(--size-3);
        gap: var(--size-2);
    }

    .presence-indicator {
        padding-inline: var(--size-2);
    }

    .presence-label {
        display: none;
    }

    .moderator-panel {
        inset-inline-end: var(--size-3);
        width: calc(100vw - (var(--size-3) * 2));
    }

    .attendance-groups {
        grid-template-columns: 1fr;
        gap: var(--size-5);
    }

    .attendance-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .people-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .people-page-back {
        width: fit-content;
    }

    .people-create-fields {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .series-page-header,
    .series-participants-header {
        align-items: stretch;
        flex-direction: column;
    }

    .series-participants-summary-meta {
        display: none;
    }

    .series-create-control,
    .series-create-fields {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .series-create-fields button {
        width: fit-content;
    }

    .series-participant-list {
        grid-template-columns: 1fr;
    }

    .meeting-date-picker {
        align-items: stretch;
        flex-direction: column;
    }

    .meeting-date-picker button {
        width: fit-content;
    }
}

@media (max-width: 30rem) {
    .presence-indicator:not(.presence-compact) {
        display: none;
    }

    .attendance-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .register-card {
        animation: var(--animation-fade-in) 360ms var(--ease-out-3);
    }
}

@page {
    size: A4 landscape;
    margin: 4mm;
}

@media print {
    :root {
        color-scheme: light;
        --brand-ink: #111;
        --body-ink: #222;
        --quiet-ink: #333;
        --muted-ink: #555;
        --surface-page: #fff;
        --surface-panel: #fff;
        --surface-subtle: #f3f3f3;
        --surface-muted: #f7f7f7;
        --line-color: #ccc;
        --line-color-strong: #999;
        --brand-accent: #444;
        --brand-accent-border: #888;
        --brand-emphasis-ink: #111;
        --brand-soft: #f3f3f3;
        --brand-soft-strong: #e8e8e8;
        --reference-ink: #111;
        --reference-surface: transparent;
        --table-min-width: 0;
    }

    html,
    body {
        min-width: 0;
        min-height: 0;
        background: #fff;
    }

    body {
        color: #111;
        font-size: 8.5pt;
        line-height: 1.35;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .print-only {
        display: block;
    }

    .floating-tools,
    .meeting-breadcrumb,
    .topic-filter-select,
    .entry-actions,
    .row-insert-control,
    .timeline-comment-controls,
    .annotation-controls,
    .insert-annotation-control,
    .insert-responsibility-control,
    .insert-reference-control,
    .review-postponement-controls,
    .jira-preview-overlay,
    .debug-bauble,
    .debug-panel,
    .debug-interaction-control,
    #debug-toggle,
    #debug-interaction-toggle,
    #loader {
        display: none !important;
    }

    .app-shell.meeting-page {
        width: auto;
        margin: 0;
        padding: 0;
    }

    .masthead {
        margin-block-end: 7mm;
        padding: 0 0 4mm;
        border-block-end: 0.5mm solid #222;
    }

    .print-document-label,
    .print-series-name {
        max-inline-size: none;
        margin: 0;
    }

    .print-document-label {
        color: #555;
        font-size: 7.5pt;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .print-series-name {
        margin-block-start: 1.5mm;
        font-size: 11pt;
        font-weight: 700;
    }

    .masthead h1 {
        margin-block-start: 1mm;
        font-size: 20pt;
        line-height: 1.1;
    }

    .register-card {
        overflow: visible;
        border: 0.25mm solid #bbb;
        background: #fff;
        box-shadow: none;
    }

    .attendance-card {
        margin-block-end: 5mm;
        break-inside: avoid-page;
    }

    .attendance-panel {
        padding: 4mm;
    }

    .attendance-panel legend {
        float: none;
        width: auto;
        font-size: 12pt;
    }

    .attendance-panel legend + .attendance-groups {
        padding-block-start: 3mm;
    }

    .attendance-groups {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4mm 12mm;
    }

    .attendance-group {
        flex: 0 1 auto;
    }

    .attendance-group h2 {
        margin-block-end: 1.5mm;
        color: #555;
        font-size: 7.5pt;
    }

    .attendance-list {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5mm 5mm;
    }

    .attendee-option {
        display: grid;
        width: auto;
        grid-template-columns: 3.2mm minmax(0, 1fr);
        align-items: center;
        gap: 1.5mm;
        min-height: 0;
        padding: 0;
        border: 0;
        color: #111;
        background: transparent;
        font-size: 8.5pt;
        cursor: default;
    }

    .attendee-option::before {
        content: "";
        display: grid;
        width: 3.2mm;
        height: 3.2mm;
        place-items: center;
        border: 0.25mm solid #555;
        color: #111;
        font-size: 8pt;
        font-weight: 700;
        line-height: 1;
    }

    .attendee-option:has(input:checked)::before {
        content: "✓";
    }

    .attendee-option:has(input:checked) {
        border: 0;
        color: #111;
        background: transparent;
    }

    .attendee-option input {
        display: none;
    }

    .table-frame {
        overflow: visible;
    }

    .entry-table {
        min-width: 0;
        font-size: 7.5pt;
    }

    .entry-table thead {
        display: table-header-group;
        color: #333;
        background: #eee;
    }

    .entry-table th,
    .entry-table td,
    .entry-table :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(4)) {
        padding: 2.5mm 2mm;
        border-color: #bbb;
    }

    .entry-table thead th {
        padding-block: 2mm;
        font-size: 6.5pt;
    }

    .entry-table thead th + th {
        border-inline-start: 0.2mm solid #ccc;
    }

    .number-column {
        width: 16mm;
    }

    .topic-column {
        width: 34mm;
    }

    .responsibility-column {
        width: 28mm;
    }

    .reference-column {
        width: 24mm;
    }

    .review-column {
        width: 27mm;
    }

    .entry-row {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .entry-row:hover > td {
        background: transparent;
    }

    .entry-number,
    .topic-title {
        font-size: 9.5pt;
    }

    .comment-author,
    .comment-date,
    .comment-text,
    .comment-entry .reference-id {
        font-size: 7pt;
    }

    .responsibility-name,
    .reference-id {
        font-size: 7pt;
    }

    .review-date,
    .review-status {
        font-size: 7pt;
    }

    .comment-list {
        gap: 1.5mm;
    }

    .comment-entry {
        gap: 1mm;
        padding: 2mm;
        border-color: #ccc;
        background: #fff;
        box-shadow: none;
    }

    .comment-entry.sticky {
        border-inline-start-color: #555;
    }

    .comment-entry.collapsed {
        padding: 2mm;
        background: #fff;
    }

    .comment-entry.collapsed .collapsed-comment-placeholder,
    .collapsed-comment-summary {
        display: none;
    }

    .collapsed-comment-group,
    .collapsed-comment-details {
        display: contents;
        border: 0;
        background: transparent;
    }

    .collapsed-comment-details > .collapsed-comment-list {
        display: grid !important;
        margin: 0;
    }

    .comment-origin {
        margin-block-start: -2mm;
        margin-inline-end: -2mm;
    }

    .reference-id {
        padding: 0;
        color: #111;
        background: transparent;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .reference-preview-button {
        border: 0;
        color: #111;
        background: transparent;
        cursor: default;
    }

    .review-status {
        color: #333;
    }
}

.ignore-pe {
    pointer-events: none;
}