:root {
    --book-bg: #fafaf8;
    --book-paper: #fffefb;
    --book-paper-warm: #fffaf0;
    --book-ink: #2d3436;
    --book-muted: #5f696e;
    --book-subtle: #879095;
    --book-line: #969189;
    --book-line-strong: #7c7872;
    --book-shadow: #d0d0d0;
    --book-primary: #c04d35;
    --book-primary-strong: #a83b28;
    --book-selection: #2563eb;
    --book-selection-text: #1745a0;
    --book-selection-soft: #dbe8ff;
    --book-blue-soft: #e7f0ff;
    --book-success: #2f9e44;
    --book-success-strong: #237a35;
    --book-success-soft: #dff3e3;
    --book-warning: #d97706;
    --book-warning-soft: #fff0c2;
    --book-danger: #c92a2a;
    --book-danger-soft: #ffe3e3;
    --book-outline: 2px solid var(--book-ink);
    --book-radius: 14px;
    --book-radius-small: 9px;
    --tab-blue: #b8d5ff;
    --tab-yellow: #ffe69a;
    --tab-green: #bfe8c8;
    --tab-pink: #ffc9d3;
    --tab-purple: #d9c5f8;
    --tab-orange: #ffd0a8;
    --focus-ring: 0 0 0 4px rgb(37 99 235 / 0.25);
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--book-bg);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 6%, rgb(255 230 167 / 0.2), transparent 25rem),
        var(--book-bg);
    color: var(--book-ink);
    font-family: var(--cs-font-sans, "Inter", sans-serif);
    line-height: 1.4;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
summary:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--book-selection);
    outline-offset: 2px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    padding: 10px 14px;
    border: var(--book-outline);
    border-radius: var(--book-radius-small);
    background: white;
    color: var(--book-ink);
    font-weight: 700;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: none;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.record-book-app {
    min-height: 100vh;
}

.app-header {
    position: relative;
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(180px, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 76px;
    margin: 14px;
    padding: 10px 14px 10px 18px;
    border: var(--book-outline);
    border-radius: var(--book-radius);
    background: rgb(255 255 255 / 0.96);
    box-shadow: 4px 4px 0 var(--book-shadow);
}

.brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    width: fit-content;
    color: inherit;
    text-decoration: none;
}

.brand-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: var(--book-outline);
    border-radius: 11px;
    background: var(--book-primary);
    color: white;
    box-shadow: 2px 2px 0 var(--book-shadow);
}

.brand-icon svg {
    width: 24px;
    height: 24px;
}

.brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.08;
}

.brand-kicker,
.eyebrow {
    margin: 0;
    color: var(--book-muted);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.brand-copy strong {
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1.32rem;
    letter-spacing: -0.02em;
}

.header-context {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--book-muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}

.header-context > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-context > span:first-child {
    flex: 0 1 auto;
}

.header-section-name {
    flex: 1 1 auto;
}

.header-section-name::before {
    content: "·";
    margin-right: 10px;
    color: var(--book-subtle);
}

.header-actions {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.header-button,
.icon-button,
.mobile-shelf-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 11px;
    border: 2px solid var(--book-ink);
    border-radius: var(--book-radius-small);
    background: white;
    color: var(--book-ink);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 2px 2px 0 var(--book-shadow);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.header-button:hover,
.icon-button:hover,
.mobile-shelf-button:hover {
    background: var(--book-warning-soft);
    box-shadow: 3px 3px 0 var(--book-shadow);
    transform: translate(-1px, -1px);
}

.header-button svg,
.icon-button svg,
.mobile-shelf-button svg {
    width: 18px;
    height: 18px;
}

.icon-button {
    width: 44px;
    padding: 0;
}

.more-menu {
    position: relative;
}

.more-menu > summary {
    list-style: none;
}

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

.more-menu-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    display: grid;
    width: 230px;
    max-height: calc(100dvh - 96px);
    padding: 7px;
    overflow-y: auto;
    border: var(--book-outline);
    border-radius: 12px;
    background: white;
    box-shadow: 4px 4px 0 var(--book-shadow);
    overscroll-behavior: contain;
}

.more-menu-panel button {
    min-height: 40px;
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
}

.more-menu-panel button:hover,
.more-menu-panel button:focus-visible {
    background: var(--book-warning-soft);
}

.more-menu-panel .danger-menu-item {
    color: var(--book-danger);
}

.global-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 18px 12px;
    padding: 10px 14px;
    border: 2px solid var(--book-warning);
    border-radius: 10px;
    background: var(--book-warning-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

.global-notice > span:first-child {
    min-width: 0;
    max-width: 100%;
    flex: 1;
    overflow-wrap: anywhere;
}

.global-notice[data-tone="success"] {
    border-color: var(--book-success);
    background: var(--book-success-soft);
}

.global-notice-actions {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 7px;
}

.notice-button,
.notice-dismiss {
    min-height: 44px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1.5px solid var(--book-ink);
    border-radius: 7px;
    background: white;
    color: var(--book-ink);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    white-space: normal;
}

.notice-dismiss {
    min-width: 44px;
    padding: 5px 7px;
    border-color: transparent;
    background: transparent;
    color: var(--book-muted);
}

.global-notice[data-tone="danger"] {
    border-color: var(--book-danger);
    background: var(--book-danger-soft);
}

.book-stage {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: calc(100vh - 108px);
    gap: 0;
    padding: 8px 22px 22px;
}

.bookcase {
    position: relative;
    z-index: 3;
    display: flex;
    max-height: calc(100vh - 125px);
    flex-direction: column;
    align-self: start;
    padding: 18px 22px 16px 4px;
    border: 2px solid var(--book-ink);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: #f0eee8;
    box-shadow: 0 5px 0 var(--book-shadow);
}

.bookcase::before {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    width: 2px;
    background: rgb(45 52 54 / 0.12);
    content: "";
}

.bookcase-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 14px 12px;
}

.bookcase-heading > :first-child {
    min-width: 0;
}

.bookcase-heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bookcase-close-button {
    display: none;
    width: 44px;
    min-height: 44px;
    place-items: center;
    border: 2px solid var(--book-ink);
    border-radius: 9px;
    background: white;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

#bookcaseTitle {
    margin: 2px 0 0;
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1.15rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.bookcase-list {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 8px;
    padding: 5px 12px 6px 5px;
    overflow-y: auto;
    scrollbar-color: var(--book-line-strong) transparent;
}

.book-spine {
    position: relative;
    display: grid;
    grid-template-columns: 9px 1fr auto;
    min-height: 60px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px 8px 0;
    overflow: hidden;
    border: 2px solid var(--book-ink);
    border-radius: 0 10px 10px 0;
    background: white;
    cursor: pointer;
    text-align: left;
    box-shadow: 2px 2px 0 var(--book-shadow);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.book-spine:hover {
    background: var(--book-paper-warm);
    box-shadow: 3px 3px 0 var(--book-shadow);
    transform: translateX(2px);
}

.book-spine[aria-current="true"],
.book-spine.is-active {
    background: var(--book-warning-soft);
    box-shadow: 4px 4px 0 var(--book-shadow);
    transform: translateX(5px);
}

.book-spine:focus-visible {
    outline-offset: -4px;
}

.book-spine-colour {
    align-self: stretch;
    background: var(--book-primary);
}

.book-spine-copy {
    min-width: 0;
}

.book-spine-copy strong,
.book-spine-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-spine-copy strong {
    font-size: 0.86rem;
}

.book-spine-copy small {
    margin-top: 2px;
    color: var(--book-muted);
    font-size: 0.7rem;
}

.book-spine-count {
    display: grid;
    min-width: 26px;
    min-height: 26px;
    place-items: center;
    padding: 2px 5px;
    border: 1.5px solid var(--book-ink);
    border-radius: 999px;
    background: white;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
}

.bookcase-empty {
    margin: 10px 10px 0 6px;
    padding: 16px;
    border: 2px dashed var(--book-line-strong);
    border-radius: 10px;
    background: rgb(255 255 255 / 0.65);
    font-size: 0.78rem;
}

.bookcase-empty p {
    margin: 6px 0 12px;
    color: var(--book-muted);
}

.bookcase-empty a {
    color: var(--book-selection);
    font-weight: 700;
}

.bookcase-footnote {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: auto;
    padding: 16px 10px 0 8px;
    color: var(--book-muted);
    font-size: 0.67rem;
}

.privacy-mark {
    color: var(--book-success-strong);
    font-size: 0.55rem;
    line-height: 1.8;
}

.booklet {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: calc(100vh - 125px);
    border: 2px solid var(--book-ink);
    border-radius: 0 16px 16px 0;
    background: var(--book-paper);
    box-shadow: 6px 7px 0 var(--book-shadow);
}

/* The booklet shares its left seam with the shelf, so its focus ring stays
 * inside the paper instead of painting across the neighbouring bookcase. */
.booklet:focus-visible {
    outline-offset: -4px;
}

.welcome-page {
    display: grid;
    min-height: calc(100vh - 129px);
    place-content: center;
    justify-items: center;
    padding: 44px;
    color: var(--book-muted);
    text-align: center;
}

.welcome-page h2 {
    margin: 7px 0 8px;
    color: var(--book-ink);
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.welcome-page > p:last-child {
    max-width: 420px;
    margin: 0;
}

.welcome-illustration {
    position: relative;
    margin-bottom: 18px;
    color: var(--book-ink);
    filter: drop-shadow(5px 5px 0 var(--book-shadow));
}

.welcome-illustration svg {
    position: relative;
    z-index: 1;
    display: block;
    width: min(230px, 65vw);
}

.mini-tab {
    position: absolute;
    right: 8px;
    z-index: 0;
    width: 29px;
    height: 25px;
    border: 2px solid var(--book-ink);
    border-left: 0;
    border-radius: 0 7px 7px 0;
}

.mini-tab-blue {
    top: 42px;
    background: var(--tab-blue);
}

.mini-tab-yellow {
    top: 74px;
    background: var(--tab-yellow);
}

.mini-tab-green {
    top: 106px;
    background: var(--tab-green);
}

.open-book {
    display: flex;
    min-height: calc(100vh - 129px);
    flex-direction: column;
}

.booklet-header {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 22px;
    border-bottom: 2px solid var(--book-ink);
    border-top-right-radius: 14px;
    background:
        linear-gradient(90deg, transparent 0 48px, rgb(225 112 85 / 0.1) 48px 50px, transparent 50px),
        var(--book-paper-warm);
}

.booklet-title-group {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.booklet-title-group > div {
    min-width: 0;
}

.booklet-title-group .eyebrow {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.booklet-title-group h2 {
    margin: 1px 0 0;
    overflow: visible;
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1.55rem;
    line-height: 1.1;
    text-overflow: clip;
    overflow-wrap: anywhere;
    white-space: normal;
}

.mobile-shelf-button {
    display: none;
    width: 42px;
    padding: 0;
}

.save-status {
    display: inline-flex;
    min-width: 0;
    max-width: min(58%, 34rem);
    min-height: 34px;
    flex: 0 1 auto;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 12px;
    background: white;
    color: var(--book-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: normal;
}

.save-status__content {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.save-status__action {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 2px 7px;
    border: 1.5px solid currentcolor;
    border-radius: 999px;
    background: white;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.save-status-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.save-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--book-subtle);
}

.save-status[data-state="saved"] .save-status-dot {
    background: var(--book-success);
}

.save-status[data-state="saving"] .save-status-dot,
.save-status[data-state="retrying"] .save-status-dot {
    background: var(--book-warning);
    animation: save-pulse 900ms ease-in-out infinite alternate;
}

.save-status[data-state="offline"],
.save-status[data-state="retrying"] {
    border-color: var(--book-warning);
    background: var(--book-warning-soft);
}

.save-status[data-state="conflict"],
.save-status[data-state="error"] {
    border-color: var(--book-danger);
    background: var(--book-danger-soft);
    color: var(--book-danger);
}

@keyframes save-pulse {
    to {
        opacity: 0.35;
        transform: scale(0.8);
    }
}

.section-navigation {
    display: flex;
    min-height: 58px;
    align-items: flex-end;
    gap: 10px;
    padding: 8px 20px 0;
    border-bottom: 0;
    background: #f1f0eb;
    box-shadow: inset 0 -2px 0 var(--book-ink);
}

.section-tabs {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: flex-end;
    gap: 5px;
    overflow-x: auto;
    padding: 5px 5px 0;
    scroll-padding-inline: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.section-tabs::-webkit-scrollbar,
.period-strip::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.section-tabs::after,
.period-strip::after {
    width: var(--navigation-end-space, 0);
    min-width: var(--navigation-end-space, 0);
    height: 1px;
    flex: 0 0 var(--navigation-end-space, 0);
    content: "";
}

.section-tab {
    --section-colour: var(--tab-blue);
    position: relative;
    display: inline-flex;
    min-width: 135px;
    max-width: 210px;
    min-height: 46px;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 8px 14px;
    overflow: hidden;
    border: 2px solid var(--book-ink);
    border-bottom: 2px solid var(--book-ink);
    border-radius: 10px 10px 0 0;
    background: color-mix(in srgb, var(--section-colour), white 28%);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
}

.section-tab-label,
.period-tab-label {
    display: block;
    min-width: 0;
    overflow: visible;
    line-height: 1.2;
    text-overflow: clip;
    overflow-wrap: anywhere;
    white-space: normal;
}

.section-tab[data-colour="yellow"] {
    --section-colour: var(--tab-yellow);
}

.section-tab[data-colour="green"] {
    --section-colour: var(--tab-green);
}

.section-tab[data-colour="pink"] {
    --section-colour: var(--tab-pink);
}

.section-tab[data-colour="purple"] {
    --section-colour: var(--tab-purple);
}

.section-tab[data-colour="orange"] {
    --section-colour: var(--tab-orange);
}

.section-tab[aria-selected="true"],
.section-tab.is-active {
    z-index: 1;
    min-height: 51px;
    border-bottom-color: var(--book-paper);
    background: var(--book-paper);
    box-shadow: inset 0 5px 0 var(--section-colour);
}

.section-tab:focus-visible {
    position: relative;
    z-index: 3;
    outline-offset: -4px;
}

.section-tab-icon {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border: 1.5px solid var(--book-ink);
    border-radius: 6px;
    background: var(--section-colour);
    font-size: 0.69rem;
}

.add-section-button {
    display: inline-flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    padding: 7px 10px;
    border: 2px dashed var(--book-line-strong);
    border-radius: 9px;
    background: white;
    color: var(--book-muted);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 700;
}

.add-section-button:hover {
    border-color: var(--book-ink);
    color: var(--book-ink);
}

.section-page {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    background:
        linear-gradient(90deg, transparent 0 48px, rgb(225 112 85 / 0.11) 48px 50px, transparent 50px),
        repeating-linear-gradient(0deg, transparent 0 31px, rgb(37 99 235 / 0.035) 31px 32px),
        var(--book-paper);
}

.section-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 24px 14px 64px;
}

.section-title-group h2 {
    margin: 2px 0 0;
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1.45rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.section-title-group {
    min-width: 0;
}

.section-summary {
    margin: 4px 0 0;
    color: var(--book-muted);
    font-size: 0.78rem;
}

.section-primary-actions,
.dialog-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-primary-actions {
    flex: 0 0 auto;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid var(--book-ink);
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 2px 2px 0 var(--book-shadow);
}

.primary-button {
    background: var(--book-primary);
    color: white;
}

.primary-button:hover:not(:disabled) {
    background: var(--book-primary-strong);
    transform: translateY(-1px);
}

.secondary-button {
    background: white;
}

.secondary-button:hover:not(:disabled) {
    background: var(--book-warning-soft);
}

.primary-button svg,
.secondary-button svg {
    width: 17px;
    height: 17px;
}

.period-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 24px 12px 64px;
}

.period-strip {
    display: flex;
    min-width: 0;
    flex: 1;
    gap: 6px;
    overflow-x: auto;
    padding: 5px;
    scroll-padding-inline: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.period-tab {
    display: inline-flex;
    min-height: 44px;
    max-width: 190px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 999px;
    background: white;
    cursor: pointer;
    color: var(--book-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.period-tab[aria-selected="true"],
.period-tab.is-active {
    border: 2px solid var(--book-selection);
    background: var(--book-selection-soft);
    color: #1745a0;
}

.period-tab small {
    color: inherit;
    font-size: 0.65rem;
}

.period-settings-button {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 9px;
    background: white;
    cursor: pointer;
}

.period-settings-button:hover {
    border-color: var(--book-ink);
    background: var(--book-warning-soft);
}

.period-settings-button svg {
    width: 18px;
    height: 18px;
}

.section-empty {
    display: grid;
    max-width: 490px;
    justify-items: start;
    margin: 28px auto;
    padding: 24px;
    border: 2px dashed var(--book-line-strong);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.9);
}

.section-empty h3 {
    margin: 0;
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1.2rem;
}

.section-empty p {
    margin: 6px 0 16px;
    color: var(--book-muted);
    font-size: 0.82rem;
}

.period-panel {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.ledger-frame {
    min-height: 0;
    max-height: max(240px, calc(100dvh - 450px));
    flex: 1;
    margin: 0 20px 18px 52px;
    overflow: auto;
    border: 2px solid var(--book-ink);
    border-radius: 11px;
    background: white;
    box-shadow: 3px 3px 0 var(--book-shadow);
    overscroll-behavior: contain;
}

.record-ledger {
    min-width: min-content;
}

.record-table {
    --record-pupil-column-width: 190px;
    --record-data-width-total: 530px;

    width: 100%;
    min-width: max(720px, calc(var(--record-pupil-column-width) + var(--record-data-width-total)));
    border-collapse: separate;
    border-spacing: 0;
    color: var(--book-ink);
    font-size: 0.76rem;
    table-layout: fixed;
}

.record-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.record-table th,
.record-table td {
    height: 46px;
    padding: 4px 6px;
    border-right: 1px solid var(--book-line);
    border-bottom: 1px solid var(--book-line);
    background: rgb(255 255 255 / 0.97);
    text-align: center;
    vertical-align: middle;
}

.record-table thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    height: 52px;
    background: #f1f0eb;
    font-size: 0.7rem;
    font-weight: 700;
}

.record-table thead th[data-active-period="true"] {
    background: var(--book-selection-soft);
    box-shadow: inset 0 -3px 0 var(--book-selection);
}

.record-table td[data-active-period="true"] {
    box-shadow: inset 2px 0 0 rgb(37 99 235 / 0.18), inset -2px 0 0 rgb(37 99 235 / 0.18);
}

.record-period-heading {
    display: grid;
    grid-template-columns: minmax(56px, 1fr) minmax(52px, 6ch);
    align-items: center;
    gap: 5px;
}

.record-period-heading__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Custom and checklist labels are teacher-authored and may contain a long
 * unbroken word. Keep that text inside its fixed ledger column instead of
 * letting it paint across the next sticky heading.
 */
.custom-ledger thead th:not(.pupil-column),
.checklist-ledger thead th:not(.pupil-column) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checklist-ledger thead th:not(.pupil-column) > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.period-maximum-input {
    min-width: 46px;
    height: auto;
    min-height: 36px;
    padding: 2px 4px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 6px;
    background: white;
    font-size: 0.69rem;
    line-height: 1.2;
}

.record-table tr:last-child td,
.record-table tr:last-child th {
    border-bottom: 0;
}

.record-table th:last-child,
.record-table td:last-child {
    border-right: 0;
}

.record-table .pupil-column,
.record-table .pupil-cell,
.record-table [data-pupil-column] {
    position: sticky;
    left: 0;
    z-index: 7;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    padding-left: 13px;
    border-right: 2px solid var(--book-ink);
    background: var(--book-paper-warm);
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-table thead .pupil-column,
.record-table thead [data-pupil-column] {
    z-index: 10;
    background: #eee9dd;
}

.pupil-name {
    display: block;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pupil-history-mark {
    display: block;
    margin-top: 2px;
    color: var(--book-muted);
    font-size: 0.64rem;
    font-weight: 500;
}

.record-cell {
    position: relative;
    min-width: 78px;
}

.record-cell.has-note-action {
    padding-right: 40px;
}

.record-cell:focus-within {
    z-index: 4;
    background: var(--book-selection-soft);
    box-shadow: inset 0 0 0 2px var(--book-selection);
}

.record-cell input,
.record-cell select,
.score-input,
.entry-input {
    width: 100%;
    min-width: 54px;
    height: auto;
    min-height: 36px;
    padding: 4px 5px;
    border: 1.5px solid transparent;
    border-radius: 6px;
    background: transparent;
    line-height: 1.2;
    text-align: center;
}

/* The historical-maximum editor shares the generic entry-input class. Its
 * track keeps a 52px floor but grows with the digits at enlarged text sizes. */
.record-period-heading .period-maximum-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.record-cell input:hover,
.score-input:hover,
.entry-input:hover {
    border-color: var(--book-line-strong);
    background: white;
}

.record-cell input:focus,
.score-input:focus,
.entry-input:focus {
    outline: 2px solid var(--book-selection);
    outline-offset: -2px;
    border-color: var(--book-selection);
    background: white;
    box-shadow: none;
}

.record-cell.is-absent,
.record-cell[data-status="absent"] {
    background:
        repeating-linear-gradient(135deg, transparent 0 6px, rgb(201 42 42 / 0.09) 6px 12px),
        var(--book-danger-soft);
}

.record-cell.is-not-applicable,
.record-cell[data-status="not-applicable"] {
    background: #f2f2f2;
    color: var(--book-muted);
}

.record-cell-note {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--book-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
}

.record-cell-note:hover,
.record-cell-note.has-note {
    background: var(--book-warning-soft);
    color: var(--book-ink);
}

.check-button,
.star-award-button,
.rating-button {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.check-button[aria-pressed="true"],
.star-award-button[aria-pressed="true"],
.check-button.is-checked,
.star-award-button.is-awarded {
    border: 2px solid var(--book-success);
    background: var(--book-success-soft);
    color: #17692a;
}

.checklist-record-controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 6px;
    width: 100%;
}

.checklist-record-controls .check-button {
    width: 44px;
    padding-right: 6px;
    padding-left: 6px;
}

.checklist-status-select {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 36px;
    padding: 4px 24px 4px 6px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 7px;
    background: white;
    color: var(--book-ink);
    font-size: 0.67rem;
    line-height: 1.2;
    text-align: left;
}

.star-roster {
    display: grid;
    min-width: 650px;
}

.star-roster__filters {
    display: flex;
    gap: 7px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--book-line);
    background: var(--book-paper-warm);
}

.star-filter-button {
    min-height: 44px;
    padding: 5px 10px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 999px;
    background: white;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
}

.star-filter-button[aria-pressed="true"] {
    border-color: var(--book-selection);
    background: var(--book-selection-soft);
    color: #1745a0;
}

.star-roster__empty,
.record-ledger-empty {
    margin: 0;
    padding: 24px;
    color: var(--book-muted);
    text-align: center;
}

.star-roster-header,
.star-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(110px, 0.8fr) minmax(150px, 0.9fr);
    align-items: center;
    gap: 10px;
    min-height: 49px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--book-line);
}

.star-row > * {
    min-width: 0;
}

.star-roster-header {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 46px;
    background: #f1f0eb;
    font-size: 0.69rem;
    font-weight: 700;
}

.star-row:last-child {
    border-bottom: 0;
}

.star-row.is-awarded-this-week {
    background: var(--book-success-soft);
}

.star-row.is-previously-awarded {
    background: #fafafa;
}

.star-pupil-name {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
    white-space: normal;
}

.star-history,
.star-count {
    min-width: 0;
    color: var(--book-muted);
    font-size: 0.7rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.star-row .status-chip {
    max-width: 100%;
    height: auto;
    overflow-wrap: anywhere;
    white-space: normal;
}

.star-row__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.star-award-details-button {
    min-height: 44px;
    padding: 6px 9px;
    font-size: 0.68rem;
    white-space: nowrap;
}

.legacy-read-only-notice {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 22px 12px;
    padding: 11px 12px;
    border: 2px solid var(--book-ink);
    border-radius: 10px;
    background: var(--book-warning-soft);
    box-shadow: 3px 3px 0 var(--book-shadow);
}

.legacy-read-only-notice > div {
    min-width: 0;
}

.legacy-read-only-notice strong,
.legacy-read-only-notice p {
    overflow-wrap: anywhere;
}

.legacy-read-only-notice p {
    margin: 3px 0 0;
    color: var(--book-muted);
    font-size: 0.72rem;
}

.legacy-read-only-notice button {
    flex: 0 0 auto;
}

.custom-ledger [aria-readonly="true"],
.custom-ledger :disabled,
.phone-custom-entry [aria-readonly="true"],
.phone-custom-entry :disabled {
    border-color: var(--book-line-strong);
    background: #f3f1ea;
    color: var(--book-ink);
    cursor: default;
    opacity: 1;
}

.status-chip {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 999px;
    background: white;
    font-size: 0.66rem;
    font-weight: 700;
}

.status-chip[data-tone="success"] {
    border-color: var(--book-success);
    background: var(--book-success-soft);
    color: #17692a;
}

.phone-entry {
    display: none;
    margin: 0 12px 14px;
}

.phone-roster__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    border: 2px solid var(--book-ink);
    border-radius: 10px;
    background: var(--book-paper-warm);
}

.phone-roster__period-copy {
    display: grid;
    min-width: 0;
    text-align: center;
}

.phone-roster__period-copy strong,
.phone-roster__period-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-roster__period-copy span,
.phone-roster__status {
    color: var(--book-muted);
    font-size: 0.67rem;
}

.phone-roster__period-button,
.phone-roster__status-button,
.phone-roster__note-button {
    min-width: 44px;
    min-height: 44px;
    padding: 5px 8px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 7px;
    background: white;
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 700;
}

.phone-roster__period-button:disabled {
    opacity: 0.35;
    cursor: default;
}

.phone-roster__pupil-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.phone-roster__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.phone-custom-entry__field-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 2px solid var(--book-ink);
    border-radius: 9px;
    background: var(--book-blue-soft);
    box-shadow: 2px 2px 0 var(--book-shadow);
    font-size: 0.74rem;
    font-weight: 800;
}

.phone-custom-entry__field-picker > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.phone-custom-entry__field-select {
    width: 58%;
    min-width: 0;
    min-height: 44px;
    max-width: 58%;
    border: 2px solid var(--book-ink);
    border-radius: 7px;
    background: white;
    font: inherit;
}

.phone-custom-entry__text,
.phone-custom-entry__note,
.phone-custom-entry__number,
.phone-custom-entry__rating {
    width: 128px;
    min-width: 112px;
}

.phone-custom-entry__boolean {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
}

.custom-rating-input,
.phone-custom-entry__rating {
    border: 2px solid var(--book-line-strong);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.custom-rating-input[data-rating-tone="red"],
.phone-custom-entry__rating[data-rating-tone="red"] {
    border-color: #c92a2a;
    background: #fff0f0;
    color: #861d1d;
}

.custom-rating-input[data-rating-tone="amber"],
.phone-custom-entry__rating[data-rating-tone="amber"] {
    border-color: #b36b00;
    background: #fff7d6;
    color: #684000;
}

.custom-rating-input[data-rating-tone="green"],
.phone-custom-entry__rating[data-rating-tone="green"] {
    border-color: #2b8a3e;
    background: #eaf8ed;
    color: #176128;
}

.phone-roster__status-button[aria-pressed="true"] {
    border-color: var(--book-selection);
    background: var(--book-selection-soft);
}

.custom-record-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(82px, 50%);
    align-items: center;
    gap: 5px;
}

/* Rating selectors already carry blank, absent, and not-applicable choices.
 * Give that single control the whole entry track instead of reserving the
 * status-select column used by the other custom field types. */
.custom-record-controls:has(.custom-rating-input) {
    grid-template-columns: minmax(0, 1fr);
}

.custom-entry-status {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 32px;
    padding: 3px 5px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 6px;
    background: white;
    font-size: 0.65rem;
    line-height: 1.2;
}

.custom-boolean-input {
    width: 28px;
    height: 28px;
    margin: auto;
}

.phone-roster {
    display: grid;
    gap: 8px;
}

.phone-roster-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 10px 8px 14px;
    border: 2px solid var(--book-ink);
    border-radius: 10px;
    background: white;
    box-shadow: 2px 2px 0 var(--book-shadow);
}

.phone-roster-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-roster-control {
    width: 92px;
    height: auto;
    min-height: 44px;
    padding: 5px 6px;
    border: 2px solid var(--book-line-strong);
    border-radius: 8px;
    line-height: 1.2;
    text-align: center;
}

.booklet-footer {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 7px 22px;
    border-top: 1px solid var(--book-line);
    border-bottom-right-radius: 14px;
    background: #f1f0eb;
    color: var(--book-muted);
    font-size: 0.65rem;
}

.booklet-footer p {
    min-width: 0;
    margin: 0;
}

#recordCount {
    overflow-wrap: anywhere;
    text-align: right;
    white-space: normal;
}

.record-dialog {
    width: min(620px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 30px);
    padding: 0;
    overflow: hidden;
    border: var(--book-outline);
    border-radius: 14px;
    background: var(--book-paper);
    color: var(--book-ink);
    box-shadow: 6px 6px 0 var(--book-shadow);
}

.record-dialog::backdrop {
    background: rgb(45 52 54 / 0.42);
    backdrop-filter: blur(2px);
}

.record-dialog > form {
    display: grid;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 34px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    gap: 0;
    padding: 0;
}

.compact-dialog {
    width: min(470px, calc(100vw - 28px));
}

.wide-dialog {
    width: min(930px, calc(100vw - 28px));
}

.dialog-header {
    display: flex;
    min-width: 0;
    max-width: 100%;
    max-height: min(34dvh, 260px);
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 17px 20px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: 2px solid var(--book-ink);
    background: var(--book-paper-warm);
}

.dialog-body {
    --dialog-scroll-cue-size: 24px;

    display: grid;
    min-width: 0;
    min-height: 0;
    gap: 12px;
    padding: 12px 20px calc(12px + var(--dialog-scroll-cue-size));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px calc(12px + var(--dialog-scroll-cue-size));
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--dialog-scroll-cue-size)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--dialog-scroll-cue-size)),
        transparent 100%
    );
}

.dialog-body > * {
    min-width: 0;
    max-width: 100%;
    scroll-margin-block-end: var(--dialog-scroll-cue-size);
}

.dialog-header > div {
    min-width: 0;
}

.dialog-header h2 {
    margin: 2px 0 0;
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1.4rem;
    overflow-wrap: anywhere;
}

.dialog-close {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 2px solid var(--book-ink);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    padding: 0;
    font-size: min(1.4rem, 28px);
    line-height: 1;
}

.field-label,
.template-picker legend {
    color: var(--book-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.record-dialog input,
.record-dialog select,
.record-dialog textarea {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 2px solid var(--book-line-strong);
    border-radius: 8px;
    background: white;
}

.record-dialog input:focus,
.record-dialog select:focus,
.record-dialog textarea:focus {
    border-color: var(--book-selection);
}

.template-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
}

.template-picker legend {
    grid-column: 1 / -1;
    margin-bottom: 3px;
}

.template-option {
    position: relative;
    display: flex;
    min-height: 76px;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
    border: 2px solid var(--book-line-strong);
    border-radius: 9px;
    background: white;
    cursor: pointer;
}

.template-option:has(input:checked) {
    border-color: var(--book-selection);
    background: var(--book-selection-soft);
    box-shadow: inset 0 0 0 1px var(--book-selection);
}

.template-option input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    accent-color: var(--book-selection);
    /*
     * The focusable radio sits near the top of a much taller card. Chromium
     * otherwise reveals only the radio and can leave the card copy underneath
     * the dialog's bottom fade. Reserve the rest of the card when native
     * focus scrolling calculates its landing position.
     */
    scroll-margin-block-end: calc(var(--dialog-scroll-cue-size) + 64px);
}

.template-option span {
    display: grid;
    gap: 3px;
}

.template-option strong {
    font-size: 0.8rem;
}

.template-option small {
    color: var(--book-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

.template-option:has(input:checked) small {
    color: var(--book-selection-text);
}

.dialog-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
    padding: 12px 20px 20px;
    border-top: 1.5px solid var(--book-line-strong);
    background: var(--book-paper);
}

.record-dialog .dialog-actions {
    max-height: min(34dvh, 240px);
    overflow-x: hidden;
    overflow-y: auto;
}

.record-dialog button {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.dialog-lead,
.dialog-context {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    color: var(--book-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.record-boundary-help {
    margin: -2px 0 0;
    color: var(--book-muted);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.recovered-record-details {
    min-width: 0;
    max-width: 100%;
    padding: 0 12px 12px;
    border: 2px solid var(--book-line-strong);
    border-radius: 9px;
    background: var(--book-paper-warm);
}

.recovered-record-details > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
}

.recovered-record-details > p,
.recovered-award-focus {
    margin: 0;
    color: var(--book-muted);
    font-size: 0.74rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.recovered-record-details__content {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.recovered-detail-item {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--book-line-strong);
    border-radius: 7px;
    background: white;
}

.recovered-detail-item h3,
.recovered-detail-item ul {
    margin: 0;
}

.recovered-detail-item h3 {
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 0.84rem;
}

.recovered-detail-item ul {
    display: grid;
    gap: 3px;
    margin-top: 5px;
    padding-left: 18px;
    color: var(--book-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.recovered-detail-item li {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.recovered-award-focus {
    padding: 9px 10px;
    border: 2px solid var(--book-line-strong);
    border-radius: 8px;
    background: var(--book-paper-warm);
}

#outputDialog {
    width: min(520px, calc(100vw - 28px));
}

#outputDialog .compact-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

#outputDialog .compact-options legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--book-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

#outputDialog .compact-options label,
#outputDialog .check-option {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 2px solid var(--book-line-strong);
    border-radius: 9px;
    background: white;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
}

#outputDialog .compact-options label:has(input:checked) {
    border-color: var(--book-selection);
    background: var(--book-selection-soft);
    box-shadow: inset 0 0 0 1px var(--book-selection);
}

#outputDialog .compact-options input,
#outputDialog .check-option input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    accent-color: var(--book-selection);
}

#outputDialog .date-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#outputDialog .date-range-fields label {
    display: grid;
    gap: 5px;
    color: var(--book-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

#outputDialog .check-option {
    min-height: 44px;
    border-style: dashed;
    font-weight: 600;
}

#outputDialog #outputSummary {
    min-height: 40px;
    padding: 9px 11px;
    border-left: 4px solid var(--book-selection);
    border-radius: 0 7px 7px 0;
    background: var(--book-selection-soft);
    color: #1745a0;
}

.privacy-explanation {
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid var(--book-warning);
    border-radius: 0 8px 8px 0;
    background: var(--book-warning-soft);
    color: var(--book-ink);
    font-size: 0.74rem;
    line-height: 1.5;
}

.offline-copy-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 16px;
    margin: 0;
    padding: 12px;
    border: 2px solid var(--book-line-strong);
    border-radius: 9px;
    background: white;
    font-size: 0.75rem;
}

.offline-copy-summary dt {
    color: var(--book-muted);
}

.offline-copy-summary dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: right;
}

.print-surface {
    display: none;
}

.migration-audit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.migration-audit-card {
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 2px solid var(--book-ink);
    border-radius: 9px;
    background: white;
    box-shadow: 2px 2px 0 var(--book-shadow);
}

.migration-audit-card strong {
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1.35rem;
}

.migration-audit-card[data-matches="false"] {
    border-color: var(--book-danger);
    background: #fff1f0;
}

.migration-audit-card span,
.migration-warnings,
.conflict-summary {
    color: var(--book-muted);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
}

.dialog-operation-status {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 2px solid var(--book-danger);
    border-radius: 9px;
    background: var(--book-danger-soft);
    color: var(--book-ink);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.dialog-operation-status[data-tone="warning"] {
    border-color: var(--book-warning);
    background: var(--book-warning-soft);
}

.dialog-operation-status:focus-visible {
    outline: 3px solid var(--book-selection);
    outline-offset: 2px;
}

.migration-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.migration-source-card {
    min-width: 0;
    padding: 14px;
    border: 2px solid var(--book-ink);
    border-radius: 10px;
    background: white;
    box-shadow: 3px 3px 0 var(--book-shadow);
}

.migration-source-card[data-state="unreadable"] {
    border-color: var(--book-danger);
    background: #fff1f0;
}

.migration-source-card[data-state="missing"] {
    border-style: dashed;
    background: #f2f2f2;
}

.migration-source-card h3,
.migration-source-card p,
.migration-source-guidance {
    margin: 0;
    overflow-wrap: anywhere;
}

.migration-source-ownership {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 9px 10px;
    border: 2px solid var(--book-warning);
    border-radius: 8px;
    background: var(--book-warning-soft);
    color: var(--book-ink);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.migration-source-ownership[hidden] {
    display: none;
}

.migration-source-ownership input {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    min-height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    accent-color: var(--book-selection);
}

.migration-source-card h3 {
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1.05rem;
}

.migration-source-card p,
.migration-source-guidance {
    margin-top: 5px;
    color: var(--book-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.migration-warnings ul,
.conflict-summary {
    margin: 8px 0 0;
}

.migration-warnings,
#migrationWarningList,
#migrationWarningList li {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.migration-warnings > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 12px;
    cursor: pointer;
    font-weight: 700;
}

.manage-sections-list {
    display: grid;
    gap: 8px;
}

.manage-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border: 2px solid var(--book-ink);
    border-radius: 9px;
    background: white;
    box-shadow: 2px 2px 0 var(--book-shadow);
}

.manage-section-row > div:first-child {
    min-width: 0;
}

.manage-section-row[data-archived="true"] {
    border-style: dashed;
    background: #f2f2f2;
}

.manage-section-row strong,
.manage-section-row small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.manage-section-row small {
    margin-top: 2px;
    color: var(--book-muted);
    font-size: 0.7rem;
}

.manage-section-actions {
    display: flex;
    max-width: 100%;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 5px;
}

.custom-fields-settings {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px dashed var(--book-line-strong);
}

.custom-fields-settings[hidden] {
    display: none;
}

.inline-columns-manager {
    margin: 0 24px 12px 64px;
    border: 2px solid var(--book-ink);
    border-radius: 10px;
    background: rgb(255 255 255 / 0.94);
    box-shadow: 3px 3px 0 var(--book-shadow);
}

.inline-columns-manager[hidden] {
    display: none;
}

.inline-columns-manager > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    cursor: pointer;
    list-style: none;
}

.inline-columns-manager > summary::-webkit-details-marker {
    display: none;
}

.inline-columns-manager > summary > span:first-child {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.inline-columns-manager > summary strong,
.inline-columns-manager > summary small {
    overflow-wrap: anywhere;
}

.inline-columns-manager > summary small {
    color: var(--book-muted);
    font-size: 0.68rem;
}

.inline-columns-manager[open] > summary {
    border-bottom: 2px dashed var(--book-line-strong);
    background: var(--book-blue-soft);
}

.inline-columns-manager__body {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.inline-columns-manager__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.settings-subheader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-subheader h3,
.settings-subheader p {
    margin: 0;
}

.settings-subheader p {
    max-width: 36rem;
    margin-top: 3px;
    color: var(--book-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.custom-fields-list {
    display: grid;
    gap: 8px;
}

.custom-field-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(112px, 0.65fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 2px solid var(--book-ink);
    border-radius: 9px;
    background: white;
    box-shadow: 2px 2px 0 var(--book-shadow);
}

.period-column-row {
    grid-template-columns: minmax(140px, 1fr) auto;
}

.custom-field-row[data-hidden="true"] {
    border-style: dashed;
    background: #f5f7fb;
}

.custom-field-row[data-archived="true"] {
    border-style: dashed;
    background: #f2f2f2;
    color: var(--book-muted);
}

.custom-field-row input,
.custom-field-row select {
    min-width: 0;
}

.custom-field-lock-note {
    grid-column: 1 / -1;
    color: var(--book-muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
}

.custom-field-row select:disabled,
.custom-rating-labels input[readonly] {
    border-color: var(--book-line);
    background: var(--book-paper-warm);
    color: var(--book-ink);
    cursor: not-allowed;
}

#sectionSettingsDialog .custom-field-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

#sectionSettingsDialog .custom-field-actions {
    justify-content: flex-start;
}

.custom-field-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.custom-rating-labels {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 8px;
    border: 1.5px dashed var(--book-line-strong);
    border-radius: 7px;
    background: var(--book-paper-warm);
}

.custom-rating-labels legend {
    padding: 0 4px;
    color: var(--book-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.custom-rating-label {
    display: grid;
    min-width: 0;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

.custom-rating-label::before {
    width: 10px;
    height: 10px;
    border: 1px solid rgb(0 0 0 / 0.28);
    border-radius: 50%;
    background: #adb5bd;
    content: "";
}

.custom-rating-label[data-rating-tone="red"]::before {
    background: #c92a2a;
}

.custom-rating-label[data-rating-tone="amber"]::before {
    background: #d98200;
}

.custom-rating-label[data-rating-tone="green"]::before {
    background: #2b8a3e;
}

.custom-rating-label input {
    width: 100%;
}

.mini-action,
.review-pupil-button {
    min-height: 34px;
    padding: 5px 9px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 7px;
    background: white;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
}

.mini-action:disabled {
    opacity: 0.35;
    cursor: default;
}

.review-card ul {
    display: grid;
    gap: 5px;
    padding: 0;
    list-style: none;
}

.review-card li {
    min-width: 0;
    max-width: 100%;
}

.review-pupil-button {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

.review-content {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.pupil-history-review {
    display: grid;
    min-width: 0;
    gap: 10px;
    padding-top: 14px;
    border-top: 2px dashed var(--book-line-strong);
}

.pupil-history-controls label {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(180px, 320px);
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    font-weight: 800;
}

.pupil-history-controls select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 42px;
    padding: 7px 9px;
    border: 2px solid var(--book-ink);
    border-radius: 8px;
    background: white;
}

.pupil-history-panel h3,
.pupil-history-summary {
    margin: 0;
}

.pupil-history-controls,
.pupil-history-panel {
    min-width: 0;
}

.pupil-history-panel h3 {
    overflow-wrap: anywhere;
}

.pupil-history-summary {
    margin-top: 3px;
    color: var(--book-muted);
    font-size: 0.72rem;
}

.pupil-history-list {
    display: grid;
    gap: 7px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.pupil-history-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1.5px solid var(--book-line-strong);
    border-radius: 8px;
    background: white;
    overflow-wrap: anywhere;
}

.pupil-history-list li > div {
    min-width: 0;
}

.pupil-history-list strong,
.pupil-history-list span,
.pupil-history-list small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.pupil-history-list span {
    margin-top: 2px;
    font-size: 0.75rem;
}

.pupil-history-list small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 2px;
    color: var(--book-muted);
    font-size: 0.67rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.pupil-history-list .mini-action {
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.review-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.review-summary-grid[data-review-kind="star"] {
    grid-template-columns: minmax(0, 1fr);
}

.review-complete-summary {
    padding: 10px 12px;
    border: 2px solid var(--book-line-strong);
    border-radius: 9px;
    background: var(--book-paper-warm);
}

.review-complete-summary summary {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 12px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
}

.review-complete-summary ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px 18px;
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--book-muted);
    font-size: 0.74rem;
}

.review-complete-summary p {
    margin: 8px 0 0;
    color: var(--book-muted);
    font-size: 0.74rem;
}

.review-complete-summary li {
    min-width: 0;
    overflow-wrap: anywhere;
}

.review-card {
    min-width: 0;
    max-width: 100%;
    padding: 14px;
    border: 2px solid var(--book-ink);
    border-radius: 10px;
    background: white;
    box-shadow: 2px 2px 0 var(--book-shadow);
}

.review-card h3 {
    margin: 0 0 5px;
    font-family: "Fredoka", var(--cs-font-display, sans-serif);
    font-size: 1rem;
}

.review-card p,
.review-card ul {
    margin: 0;
    color: var(--book-muted);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.undo-toast {
    position: static;
    display: flex;
    width: min(420px, calc(100% - 88px));
    min-width: 0;
    align-self: flex-end;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 24px 10px 64px;
    padding: 11px 12px 11px 15px;
    border: var(--book-outline);
    border-radius: 10px;
    background: var(--book-ink);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 4px 4px 0 var(--book-shadow);
}

.undo-toast > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.undo-toast button {
    min-height: 44px;
    padding: 6px 11px;
    border: 2px solid white;
    border-radius: 7px;
    background: transparent;
    color: white;
    cursor: pointer;
    font-weight: 700;
}

.undo-toast button:focus-visible {
    outline-color: white;
}

.fatal-error {
    width: min(620px, calc(100% - 28px));
    max-width: 620px;
    margin: clamp(18px, 10vh, 80px) auto;
    padding: 24px;
    border: var(--book-outline);
    border-radius: var(--book-radius);
    background: var(--book-danger-soft);
    box-shadow: 4px 4px 0 var(--book-shadow);
}

@media (max-width: 1080px) {
    .app-header {
        grid-template-columns: auto 1fr auto;
    }

    .header-context {
        justify-content: flex-start;
    }

    .dashboard-button span,
    .header-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .header-button {
        width: 44px;
        padding: 0;
    }

    .more-menu-panel {
        right: -50px;
    }

    .book-stage {
        grid-template-columns: 190px minmax(0, 1fr);
        padding-right: 16px;
        padding-left: 16px;
    }

    .bookcase {
        padding-right: 16px;
    }

    .section-tab {
        min-width: 116px;
    }

    .section-page-header {
        padding-left: 55px;
    }

    .inline-columns-manager {
        margin-left: 55px;
    }

    .period-bar {
        padding-left: 55px;
    }

    .ledger-frame {
        margin-left: 43px;
    }
}

@media (max-width: 820px), (max-width: 900px) and (max-height: 500px) {
    :root {
        --mobile-app-header-height: max(64px, 3rem);
        --mobile-booklet-header-height: max(66px, 3.5rem);
    }

    .app-header {
        position: sticky;
        top: 0;
        grid-template-columns: 1fr auto;
        min-height: var(--mobile-app-header-height);
        margin: 0;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        background: white;
        box-shadow: 0 2px 0 var(--book-shadow);
    }

    .brand-icon {
        width: 38px;
        height: 38px;
    }

    .brand-copy strong {
        font-size: 1.12rem;
    }

    .header-context {
        display: none;
    }

    .book-stage {
        display: block;
        min-height: calc(100vh - var(--mobile-app-header-height));
        padding: 0;
    }

    .bookcase {
        position: fixed;
        top: var(--mobile-app-header-live-height, var(--mobile-app-header-height));
        right: auto;
        bottom: auto;
        left: 0;
        z-index: 100;
        width: min(310px, 88vw);
        height: calc(100dvh - var(--mobile-app-header-live-height, var(--mobile-app-header-height)));
        min-height: 0;
        max-height: calc(100dvh - var(--mobile-app-header-live-height, var(--mobile-app-header-height)));
        align-self: stretch;
        padding: 18px;
        overflow: hidden;
        border: 0;
        border-right: var(--book-outline);
        border-radius: 0;
        box-shadow: 6px 0 0 rgb(45 52 54 / 0.14);
        transform: translateX(-105%);
        transition: none;
    }

    body.is-bookcase-motion-enabled .bookcase {
        transition: transform 170ms ease;
    }

    .bookcase-list {
        min-height: 0;
        flex: 1 1 auto;
    }

    .bookcase-empty {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .bookcase-close-button {
        display: grid;
    }

    body.is-bookcase-open .bookcase {
        transform: none;
    }

    body.is-bookcase-open::after {
        position: fixed;
        inset: var(--mobile-app-header-live-height, var(--mobile-app-header-height)) 0 0;
        z-index: 90;
        background: rgb(45 52 54 / 0.4);
        content: "";
    }

    .booklet {
        min-height: calc(100vh - var(--mobile-app-header-height));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .booklet:focus-visible {
        outline-offset: -4px;
    }

    .welcome-page,
    .open-book {
        min-height: calc(100vh - var(--mobile-app-header-height));
    }

    .booklet-header {
        min-height: var(--mobile-booklet-header-height);
        padding: 10px 13px;
        border-top-right-radius: 0;
    }

    .mobile-shelf-button {
        display: inline-flex;
        width: 44px;
        min-width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .mobile-shelf-button:focus-visible {
        outline-offset: -4px;
    }

    .booklet-title-group h2 {
        font-size: 1.22rem;
    }

    .section-navigation {
        padding-right: 10px;
        padding-left: 10px;
    }

    .section-tab {
        min-width: 112px;
        max-width: min(14rem, calc(100vw - 80px));
        width: max-content;
        min-height: 44px;
        flex: 0 0 auto;
        padding-inline: 6px;
    }

    .section-tab-label {
        overflow: visible;
        text-overflow: clip;
    }

    .section-tab[aria-selected="true"],
    .section-tab.is-active {
        min-height: 48px;
    }

    .add-section-button span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .add-section-button {
        width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0;
    }

    .section-page-header {
        padding: 14px 12px 10px;
    }

    .inline-columns-manager {
        margin: 0 12px 10px;
    }

    .period-bar {
        padding: 0 12px 10px;
    }

    .ledger-frame {
        margin: 0 10px 12px;
    }

    .section-page {
        background: var(--book-paper);
    }

    .record-table .pupil-column,
    .record-table .pupil-cell,
    .record-table [data-pupil-column] {
        width: 155px;
        min-width: 155px;
        max-width: 155px;
    }

    .record-table {
        --record-pupil-column-width: 155px;
    }

    .booklet-footer {
        padding: 7px 12px;
        border-bottom-right-radius: 0;
    }

    #keyboardHint {
        display: none;
    }
}

@media (max-width: 600px), (max-width: 900px) and (max-height: 500px) {
    .app-header {
        gap: 8px;
        padding: 8px 10px;
    }

    .brand-kicker {
        display: none;
    }

    .header-actions {
        gap: 5px;
    }

    .dashboard-button {
        display: none;
    }

    .header-button {
        width: 44px;
        min-height: 44px;
    }

    .more-menu-panel {
        right: 0;
        width: min(260px, calc(100vw - 20px));
        max-height: calc(
            100dvh
            - var(--mobile-app-header-live-height, var(--mobile-app-header-height))
            - 8px
        );
        padding-bottom: max(7px, env(safe-area-inset-bottom));
    }

    .booklet-header {
        position: sticky;
        top: var(--mobile-app-header-live-height, var(--mobile-app-header-height));
        z-index: 20;
        height: auto;
        min-height: var(--mobile-booklet-header-height);
        gap: 10px;
        overflow: visible;
    }

    .booklet-title-group {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .booklet-title-group h2 {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .booklet-title-group .eyebrow {
        display: none;
    }

    .save-status {
        min-width: 0;
        max-width: min(48vw, 190px);
        width: auto;
        flex: 0 1 auto;
        padding: 5px 7px;
        border-radius: 10px;
        line-height: 1.2;
        white-space: normal;
    }

    .save-status-label {
        min-width: 0;
        overflow: visible;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .save-status__action {
        min-width: 44px;
        min-height: 44px;
        flex: 0 0 auto;
        padding: 4px 7px;
    }

    .section-navigation {
        position: sticky;
        top: calc(
            var(--mobile-app-header-live-height, var(--mobile-app-header-height))
            + var(--mobile-booklet-header-live-height, var(--mobile-booklet-header-height))
        );
        z-index: 18;
    }

    .section-page-header {
        align-items: center;
        gap: 8px;
    }

    .section-title-group h2 {
        font-size: 1.16rem;
    }

    .section-summary {
        display: none;
    }

    .section-primary-actions .secondary-button {
        width: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 0;
    }

    .section-primary-actions .secondary-button svg {
        width: 18px;
        height: 18px;
    }

    .primary-button {
        min-height: 44px;
        padding: 8px 11px;
    }

    .secondary-button {
        min-height: 44px;
    }

    .ledger-frame {
        display: none;
    }

    .phone-entry:not([hidden]) {
        display: block;
    }

    .phone-entry .star-roster {
        min-width: 0;
    }

    .phone-entry .star-roster-header {
        display: none;
    }

    .phone-entry .star-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        margin-bottom: 8px;
        border: 2px solid var(--book-ink);
        border-radius: 10px;
        background: white;
        box-shadow: 2px 2px 0 var(--book-shadow);
    }

    .phone-entry .star-row .status-chip,
    .phone-entry .star-history {
        grid-column: 1;
    }

    .phone-entry .star-row__actions {
        grid-column: 2;
        grid-row: 1 / span 3;
        display: grid;
        align-self: center;
        justify-content: stretch;
    }

    .phone-entry .star-row__actions .star-award-button,
    .phone-entry .star-row__actions .star-award-details-button {
        grid-column: auto;
        grid-row: auto;
        min-width: 44px;
        min-height: 44px;
    }

    .phone-entry .star-award-button {
        min-width: 44px;
        min-height: 44px;
    }

    .legacy-read-only-notice {
        align-items: stretch;
        flex-direction: column;
        margin: 0 12px 10px;
    }

    .legacy-read-only-notice button {
        width: 100%;
    }

    .phone-entry .star-filter-button {
        min-height: 44px;
    }

    .phone-entry .star-roster__filters {
        flex-wrap: wrap;
    }

    .phone-entry .star-award-details-button {
        max-width: 8rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .phone-roster-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px 10px;
    }

    .phone-entry :where(button, input, select, textarea) {
        scroll-margin-block-start: calc(
            var(--mobile-app-header-live-height, var(--mobile-app-header-height))
            + var(--mobile-booklet-header-live-height, var(--mobile-booklet-header-height))
            + var(--mobile-section-navigation-live-height, 54px)
            + 12px
        );
    }

    .phone-roster__controls {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(64px, 1fr) repeat(3, max-content);
        justify-content: stretch;
        gap: 5px;
        padding: 5px;
    }

    .phone-roster__controls.is-checklist {
        grid-template-columns: minmax(44px, 1fr) repeat(4, max-content);
    }

    .phone-roster-control {
        width: 100%;
        min-width: 0;
    }

    .phone-roster-control.phone-roster__check,
    .phone-roster-control.phone-custom-entry__boolean {
        width: 44px;
        min-width: 44px;
        justify-self: center;
    }

    .phone-roster__status-button {
        width: auto;
        min-width: 44px;
        min-height: 44px;
        padding: 4px;
    }

    .phone-roster__note-button {
        width: 100%;
        min-height: 44px;
        grid-column: 1 / -1;
        justify-content: center;
    }

    .global-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .global-notice-actions {
        width: 100%;
    }

    .notice-button {
        flex: 1;
    }

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

    .migration-source-grid {
        grid-template-columns: 1fr;
    }

    .manage-section-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-subheader {
        flex-direction: column;
    }

    .custom-field-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .custom-field-actions {
        justify-content: flex-start;
    }

    .custom-field-actions .mini-action {
        min-width: 44px;
        min-height: 44px;
    }

    .custom-rating-labels {
        grid-template-columns: 1fr;
    }

    .inline-columns-manager__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .inline-columns-manager__actions button {
        width: 100%;
    }

    .template-picker {
        grid-template-columns: 1fr;
    }

    .review-summary-grid {
        grid-template-columns: 1fr;
    }

    .pupil-history-controls label {
        grid-template-columns: 1fr;
    }

    #outputDialog .compact-options,
    #outputDialog .date-range-fields {
        grid-template-columns: 1fr;
    }

    .dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .dialog-actions button {
        width: 100%;
    }

    .dialog-actions > :only-child,
    .dialog-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .record-dialog .dialog-header {
        position: static;
        max-height: min(34dvh, 260px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .record-dialog .dialog-header h2 {
        display: block;
        font-size: min(1.4rem, 32px);
        overflow: visible;
    }

    .record-dialog .dialog-header .eyebrow {
        font-size: min(0.69rem, 18px);
    }

    .record-dialog .dialog-actions {
        position: static;
        max-height: min(34dvh, 240px);
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
    }

    .record-dialog {
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 16px);
    }

    .record-dialog > form {
        max-height: calc(100dvh - 20px);
        grid-template-rows: auto minmax(44px, 1fr) auto;
    }

    /*
     * If enlarged text or a long class name would leave less than one useful
     * recording row below the sticky chrome, the runtime adds this class.
     * Let the global and booklet headers scroll normally and retain only the
     * section tabs as orientation chrome, so focused entry controls cannot be
     * hidden underneath a taller-than-viewport header stack.
     */
    body.is-mobile-chrome-scrollable .app-header {
        position: relative;
        top: auto;
    }

    body.is-mobile-chrome-scrollable .booklet-header {
        position: relative;
        top: auto;
        z-index: auto;
        height: auto;
        overflow: visible;
    }

    body.is-mobile-chrome-scrollable .booklet-title-group {
        overflow: visible;
    }

    body.is-mobile-chrome-scrollable .section-navigation {
        top: 0;
    }

    body.is-mobile-chrome-scrollable .phone-entry :where(button, input, select, textarea) {
        scroll-margin-block-start: calc(
            var(--mobile-section-navigation-live-height, 54px)
            + 32px
        );
    }

    body.is-mobile-chrome-scrollable .bookcase {
        top: 0;
        height: 100dvh;
        max-height: 100dvh;
    }

    body.is-mobile-chrome-scrollable.is-bookcase-open::after {
        inset: 0;
    }

    .undo-toast {
        width: auto;
        min-width: 0;
        align-self: stretch;
        margin: 0 12px 10px;
    }
}

@media (max-width: 360px) {
    :root {
        --mobile-booklet-header-height: max(108px, 5rem);
    }

    .booklet-header {
        height: auto;
        min-height: var(--mobile-booklet-header-height);
        align-items: stretch;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        overflow: visible;
    }

    .booklet-title-group {
        width: 100%;
        flex: 0 0 auto;
    }

    .save-status {
        max-width: 100%;
        align-self: flex-end;
    }

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

    .section-primary-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .phone-custom-entry__field-picker {
        align-items: stretch;
        flex-direction: column;
    }

    .phone-custom-entry__field-select {
        width: 100%;
        max-width: 100%;
    }

    .dialog-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .dialog-actions > * {
        grid-column: 1 / -1 !important;
    }

    /*
     * These two recovery dialogs have four deliberately explicit choices.
     * Their one-column phone action stack is slightly taller than the generic
     * 34dvh footer cap at 320px, which clips the final choice even though the
     * complete stack fits safely beside the scrollable body.
     */
    #migrationSourceDialog .dialog-actions,
    #migrationDialog .dialog-actions {
        max-height: min(46dvh, 280px);
    }

    .migration-audit {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 601px) and (max-height: 500px) {
    .record-dialog .dialog-header {
        gap: 12px;
        padding: 8px 16px;
    }

    .record-dialog .dialog-header h2 {
        margin-top: 0;
        font-size: 1.2rem;
    }

    .record-dialog .dialog-body {
        gap: 6px;
        padding: 6px 20px calc(6px + var(--dialog-scroll-cue-size));
        scroll-padding-block: 6px calc(6px + var(--dialog-scroll-cue-size));
    }

    .record-dialog .dialog-actions {
        padding-top: 6px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

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

@media (max-height: 500px) {
    .bookcase-footnote {
        display: none;
    }
}

@media (any-pointer: coarse) {
    .primary-button,
    .secondary-button,
    .more-menu-panel button {
        min-height: 44px;
    }

    .record-cell input,
    .record-cell select,
    .score-input,
    .entry-input,
    .custom-entry-status {
        min-height: 44px;
    }

    .record-cell.has-note-action {
        padding-right: 48px;
    }

    .record-cell-note {
        width: 44px;
        height: 44px;
        right: 1px;
    }

    .record-cell-note:focus-visible {
        outline-offset: -4px;
    }

    /*
     * The enlarged note action uses the cell's reserved right gutter on a
     * coarse pointer. Inset adjacent select rings so their outer edge cannot
     * paint over that action when both controls occupy the minimum column.
     */
    .record-cell .checklist-status-select:focus-visible,
    .record-cell .custom-entry-status:focus-visible {
        outline-offset: -4px;
    }

    .checklist-record-controls {
        grid-template-columns: 44px minmax(0, 1fr);
        justify-items: stretch;
    }

    .checklist-record-controls .check-button {
        width: 44px;
        padding-right: 6px;
        padding-left: 6px;
    }

    .checklist-status-select {
        display: block;
        width: 100%;
    }

    .custom-boolean-input {
        width: 44px;
        height: 44px;
    }

    .mini-action,
    .review-pupil-button,
    .record-dialog .mini-action,
    .record-dialog .review-pupil-button {
        min-width: 44px;
        min-height: 44px;
    }
}

body.is-preserving-ledger-record-draft .ledger-frame {
    display: block;
}

body.is-preserving-ledger-record-draft .phone-entry {
    display: none;
}

body.is-preserving-phone-record-draft .ledger-frame {
    display: none;
}

body.is-preserving-phone-record-draft .phone-entry:not([hidden]) {
    display: block;
}

@media (forced-colors: active) {
    button:focus-visible,
    summary:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible,
    .record-cell input:focus,
    .score-input:focus,
    .entry-input:focus {
        outline: 3px solid Highlight !important;
        outline-offset: 2px;
    }

    .record-cell input:focus,
    .score-input:focus,
    .entry-input:focus {
        outline-offset: -3px;
    }

    /* Preserve the inset focus geometry used by controls that sit directly
     * against a clipped edge or a neighbouring ledger action. */
    .booklet:focus-visible,
    .section-tab:focus-visible,
    .mobile-shelf-button:focus-visible,
    .record-cell-note:focus-visible,
    .record-cell .checklist-status-select:focus-visible,
    .record-cell .custom-entry-status:focus-visible {
        outline-offset: -4px;
    }

    .section-tab[aria-selected="true"],
    .period-tab[aria-selected="true"],
    .book-spine[aria-current="true"],
    [aria-pressed="true"],
    [aria-checked="true"] {
        outline: 2px solid Highlight;
        outline-offset: -3px;
    }

    .record-cell[data-status="absent"] {
        outline: 2px solid CanvasText;
        outline-offset: -3px;
    }

    .record-cell[data-status="not-applicable"] {
        outline: 2px dashed CanvasText;
        outline-offset: -3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 0;
    }

    html,
    body {
        width: 297mm;
        min-width: 297mm;
        min-height: 210mm;
        margin: 0;
        overflow: visible;
        background: white;
        color: black;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.is-record-book-printing .record-book-app,
    .skip-link,
    .undo-toast {
        display: none !important;
    }

    body.is-record-book-printing .print-surface {
        display: block;
        width: 297mm;
        margin: 0;
        padding: 0;
        background: white;
        color: #111;
    }

    .print-page {
        display: grid;
        width: 297mm;
        height: 210mm;
        grid-template-rows: 28mm minmax(0, 1fr) 8mm;
        margin: 0;
        padding: 10mm;
        overflow: hidden;
        break-after: page;
        page-break-after: always;
        background: white;
    }

    .print-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .print-page > header {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8mm;
        padding-bottom: 4mm;
        border-bottom: 0.5mm solid #111;
    }

    .print-page > header h1 {
        display: -webkit-box;
        min-width: 0;
        flex: 1 1 auto;
        max-height: 18mm;
        margin: 0;
        overflow: hidden;
        font-family: "Fredoka", var(--cs-font-display, sans-serif);
        font-size: 15pt;
        line-height: 1.1;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .print-page > header p {
        display: -webkit-box;
        min-width: 0;
        max-width: 115mm;
        max-height: 18mm;
        flex: 0 1 115mm;
        margin: 0;
        overflow: hidden;
        color: #444;
        font-size: 8pt;
        font-weight: 600;
        line-height: 1.3;
        text-align: right;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .print-page table {
        width: 100%;
        margin: 0;
        align-self: start;
        border-collapse: collapse;
        font-size: 8pt;
        table-layout: fixed;
    }

    .print-page thead {
        display: table-header-group;
    }

    .print-page thead tr {
        height: 16mm;
    }

    .print-page tbody tr {
        height: 7mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-page th,
    .print-page td {
        padding: 0.35mm 1mm;
        overflow: hidden;
        border: 0.25mm solid #777;
        background: white;
        line-height: 1.05;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .print-page thead th {
        height: 16mm;
        background: #f1f1ed;
        font-size: 7.5pt;
        text-align: center;
        white-space: normal;
    }

    .print-page thead th > span {
        display: -webkit-box;
        max-width: 100%;
        max-height: 8mm;
        overflow: hidden;
        line-height: 2.6mm;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .print-page tbody th,
    .print-page tbody td {
        height: 7mm;
        white-space: nowrap;
    }

    .print-page tbody th {
        border-right: 0.5mm solid #111;
        font-size: 7pt;
        font-weight: 700;
        line-height: 1;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .print-page th > .print-pupil-name {
        display: -webkit-box;
        max-width: 100%;
        max-height: 5.2mm;
        overflow: hidden;
        line-height: 2.6mm;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .print-page td {
        text-align: center;
    }

    .print-page th > span,
    .print-page th > small,
    .print-page td > span,
    .print-page td > small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .print-page th > small,
    .print-page td > small {
        margin-top: 0.25mm;
        color: #555;
        font-size: 6pt;
        font-weight: 500;
        white-space: nowrap;
    }

    .print-note-reference {
        color: #2f5f9f !important;
        font-weight: 700 !important;
    }

    .print-notes-list {
        display: flex;
        min-width: 0;
        min-height: 0;
        flex-direction: column;
        gap: 1mm;
        padding-top: 2mm;
        overflow: hidden;
    }

    .print-note-fragment {
        min-width: 0;
        flex: 0 0 auto;
        padding: 1mm 1.5mm;
        overflow: hidden;
        border: 0.25mm solid #9a958d;
        border-left: 1.25mm solid #5d83b8;
        border-radius: 1.5mm;
        background: #fbfcff;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-note-fragment h2,
    .print-note-line {
        display: block;
        height: 3.5mm;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        font-size: 7.2pt;
        line-height: 3.5mm;
        text-overflow: clip;
        white-space: pre;
    }

    .print-note-fragment h2 {
        color: #253d5b;
        font-family: "Fredoka", var(--cs-font-display, sans-serif);
        font-size: 8.5pt;
        font-weight: 700;
    }

    .print-note-fragment h2 small {
        color: #555;
        font-family: var(--cs-font-sans, "Inter", sans-serif);
        font-size: 6.5pt;
        font-weight: 600;
    }

    .print-note-line--metadata {
        color: #555;
        font-size: 6.7pt;
        font-weight: 600;
    }

    .print-note-line--part-label {
        color: #253d5b;
        font-size: 6.7pt;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .print-note-line--content {
        color: #111;
        font-weight: 500;
        tab-size: 4;
    }

    .print-page > footer {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border-top: 0.25mm solid #aaa;
        color: #555;
        font-size: 7pt;
        text-align: right;
    }
}