:root {
  --navy: #102f50;
  --navy-deep: #0b2745;
  --blue: #1f70de;
  --blue-strong: #1262ce;
  --blue-soft: #eaf2ff;
  --surface: #ffffff;
  --page: #f4f7fb;
  --line: #dfe6ef;
  --line-dark: #cdd8e5;
  --text: #1d2939;
  --muted: #667085;
  --green: #287a47;
  --green-soft: #eaf6ee;
  --red: #c9342c;
  --red-soft: #fde9e7;
  --amber: #8a5a00;
  --amber-soft: #fff6db;
  --purple: #7852b3;
  --purple-soft: #f1eafd;
  --shadow: 0 8px 24px rgba(16, 47, 80, 0.06);
  /* Use only fonts owned by the operating system/browser here. Do not name an
     unbundled font such as Inter: browser extensions can inject a font face with
     the same family name and otherwise make the app swap fonts after first paint. */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--page);
}

* { box-sizing: border-box; }
/* Keep the content column at a constant width while navigating between pages of
   different heights. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
html, body { margin: 0; min-height: 100%; background: var(--page); }
body { font-size: 15px; line-height: 1.45; }
a { color: var(--blue-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.setup-availability-editing { border: 0; padding: 0; margin: 0; min-width: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 3vw, 2.35rem); line-height: 1.12; margin-bottom: .4rem; letter-spacing: -.025em; }
h1:focus { outline: none; }
h2 { font-size: 1.25rem; margin-bottom: .6rem; }
h3 { font-size: 1rem; margin-bottom: .5rem; }
small { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Buttons and fields */
.primary-button, .secondary-button, .soft-button, .text-button, .icon-button {
  border-radius: 9px; border: 1px solid transparent; font-weight: 650; transition: .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
}
.primary-button { background: var(--blue); color: #fff; border-color: var(--blue); padding: .78rem 1rem; }
.primary-button:hover { background: var(--blue-strong); text-decoration: none; }
.secondary-button { background: #fff; color: var(--text); border-color: var(--line-dark); padding: .72rem 1rem; }
.secondary-button:hover { background: #f8fafc; text-decoration: none; }
.soft-button { background: var(--blue-soft); color: var(--blue-strong); padding: .55rem .8rem; }
.text-button { background: transparent; color: var(--blue-strong); padding: .35rem .2rem; }
.icon-button { width: 38px; height: 38px; background: #fff; color: var(--text); border-color: var(--line); font-size: 1.4rem; }
.compact { padding: .55rem .82rem; }
.full-width { width: 100%; }
.danger-text { background: transparent; color: var(--red); border: 0; padding: .4rem .2rem; font-weight: 650; }
.danger-button { background: var(--red); color: #fff; border: 1px solid var(--red); border-radius: 10px; padding: .62rem .9rem; font-weight: 700; cursor: pointer; }
.danger-button:hover { filter: brightness(.96); }
.danger-icon { color: var(--red) !important; }

.field-group { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
.field-group label { font-size: .84rem; font-weight: 700; color: #344054; }
.text-input, .select-input {
  width: 100%; min-height: 42px; border: 1px solid var(--line-dark); border-radius: 8px; background: #fff; color: var(--text); padding: .58rem .72rem; outline: none;
}
.text-input:focus, .select-input:focus { border-color: #7daff3; box-shadow: 0 0 0 3px rgba(31,112,222,.12); }
.read-only { background: #f7f9fc; color: #536173; }
.validation-message { color: var(--red); font-size: .78rem; }
.inline-input { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: .35rem; align-items: center; }

.alert { border-radius: 10px; padding: .85rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.alert-error { background: var(--red-soft); color: #9c241f; border-color: #f3c9c6; }
.alert-success { background: var(--green-soft); color: var(--green); border-color: #c9e6d1; }
.alert-warning { background: var(--amber-soft); color: var(--amber); border-color: #f0dda9; }
.alert a { font-weight: 700; }
.warning-end-icon { display: inline-block; margin-left: .45rem; font-size: .95em; vertical-align: baseline; }

/* Authentication */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 43%) 1fr; background: #fff; }
.auth-brand-panel { background: linear-gradient(145deg, var(--navy-deep), var(--navy)); color: #fff; padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; min-height: 100vh; }
.brand-lockup { display: flex; align-items: center; gap: 1rem; }
.brand-mark { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.13); display: grid; place-items: center; font-weight: 800; letter-spacing: .04em; }
.brand-title { font-size: 1.42rem; font-weight: 800; line-height: 1.05; }
.brand-subtitle { color: #b9cae0; font-size: .83rem; margin-top: .35rem; }
.auth-brand-copy { margin: auto 0 2.2rem; max-width: 540px; }
.auth-brand-copy h2 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.1; margin-bottom: 1rem; letter-spacing: -.03em; }
.auth-brand-copy p { color: #d3deeb; max-width: 48ch; font-size: 1rem; }
.week-preview { max-width: 460px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 1rem 1.15rem; }
.preview-title { color: #b9cae0; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .5rem; }
.preview-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.preview-row:last-child { border-bottom: 0; }
.auth-brand-foot { color: #9fb5ce; font-size: .78rem; margin-top: 1.5rem; }
.auth-content-panel { display: grid; place-items: center; padding: 2rem; background: #fbfcfe; }
.auth-card { width: min(100%, 470px); padding: clamp(1.4rem, 3vw, 2.5rem); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.auth-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 1.1rem; }
.eyebrow { font-size: .73rem; font-weight: 850; letter-spacing: .1em; color: #678; margin-bottom: .55rem; }
.eyebrow.blue { color: var(--blue-strong); }
.auth-card h1 { font-size: 2rem; }
.auth-copy { color: var(--muted); margin-bottom: 1.35rem; }
.auth-form { display: flex; flex-direction: column; gap: .95rem; }
.auth-primary { min-height: 48px; }
.auth-secondary { width: 100%; margin-top: .55rem; }
.auth-link { display: block; text-align: center; margin-top: 1rem; font-weight: 600; font-size: .88rem; }
.auth-divider { display: flex; align-items: center; gap: .8rem; color: #98a2b3; font-size: .78rem; margin: 1.2rem 0 .5rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.security-note { display: flex; flex-direction: column; gap: .25rem; background: #f6f9fd; border: 1px solid var(--line); border-radius: 10px; padding: .8rem; margin-top: 1.1rem; font-size: .82rem; color: var(--muted); }
.security-note strong { color: #344054; }
.auth-footnote { text-align: center; color: var(--muted); font-size: .86rem; margin: 1rem 0 0; }
.verification-success { text-align: center; background: var(--green-soft); border: 1px solid #c8e7d3; padding: 1.2rem; border-radius: 14px; }
.success-mark { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin: 0 auto .8rem; font-weight: 800; }

/* Main application shell */
.app-layout { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }
.sidebar { background: var(--navy); color: #fff; min-height: 100vh; position: sticky; top: 0; height: 100vh; padding: 1.8rem 1.15rem 1.2rem; display: flex; flex-direction: column; }
.sidebar-brand { color: #fff; padding: .1rem .75rem 2rem; text-decoration: none; }
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand-title { display: block; font-weight: 850; font-size: 1.26rem; line-height: 1.08; }
.sidebar-brand-sub { display: block; color: #b9cae0; font-size: .74rem; margin-top: .48rem; }
.side-nav { display: flex; flex-direction: column; gap: .42rem; }
.side-nav a { color: #dce6f2; display: flex; gap: .75rem; align-items: center; padding: .72rem .8rem; border-radius: 9px; font-weight: 550; }
.side-nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.side-nav a.active { background: var(--blue); color: #fff; font-weight: 750; }
.side-nav a span, .logout-button span { width: 18px; text-align: center; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 18px; display: block; fill: currentColor; }
.side-nav .progress-nav-icon { width: 15px; height: 15px; flex: 0 0 18px; color: #fff; }
.logout-form { margin-top: auto; }
.logout-button { width: 100%; border: 0; background: transparent; color: #dce6f2; padding: .7rem .8rem; border-radius: 9px; text-align: left; display: flex; align-items: center; gap: .75rem; }
.logout-button:hover { background: rgba(255,255,255,.07); }
.main-column { min-width: 0; }
.global-action-bar { min-height: 46px; display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: .45rem clamp(1rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); position: sticky; top: 0; z-index: 18; }
.global-undo-button { border: 1px solid #b8c6d8; background: #fff; color: #26415f; border-radius: 8px; min-height: 32px; padding: .35rem .7rem; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .78rem; white-space: nowrap; }
.global-undo-button:hover:not(:disabled) { background: #f4f8fc; border-color: #93a9c2; }
.global-undo-button:disabled { opacity: .45; cursor: default; }
.global-undo-error { margin-right: auto; color: #b42318; font-size: .78rem; line-height: 1.25; }
.mobile-global-undo { display: none; margin-left: auto; min-height: 34px; background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); }
.mobile-global-undo:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.main-content { min-height: calc(100vh - 46px); }
.mobile-header, .mobile-bottom-nav { display: none; }
.page-shell { max-width: 1460px; margin: 0 auto; padding: 2.2rem clamp(1rem, 3vw, 2.4rem) 4rem; }
.page-heading-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.page-subtitle, .card-muted { color: var(--muted); }
.page-subtitle { margin-bottom: 0; }
.page-actions { display: flex; gap: .6rem; }
.content-card, .summary-card, .next-exam-card, .loading-card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.content-card { padding: 1.2rem; }
.loading-card { padding: 2rem; color: var(--muted); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.section-heading h2, .section-heading h3 { margin-bottom: .12rem; }
.section-heading p { margin-bottom: 0; color: var(--muted); font-size: .86rem; }

/* Dashboard */
/* Compact desktop dashboard, widened slightly so study times remain on one line. */
.dashboard-page { max-width: 565px; }
.dashboard-page .page-heading-row { flex-direction: column; align-items: stretch; }
.dashboard-page .page-heading-row > .secondary-button { align-self: flex-start; }
.next-exam-card { background: linear-gradient(135deg, #1465d2, #2680ec); border: 0; color: #fff; padding: 1.3rem 1.5rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.next-exam-card h2 { font-size: 1.7rem; margin: .3rem 0 .1rem; }
.next-exam-card p { margin: 0; color: #deebff; }
.card-kicker { color: #cde0ff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.exam-countdown { text-align: center; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; min-width: 88px; padding: .7rem; }
.exam-countdown strong { display: block; font-size: 1.8rem; }
.exam-countdown span { font-size: .78rem; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.dashboard-page .summary-grid { gap: .45rem; }
.dashboard-page .summary-card { padding: .78rem .62rem; }
.dashboard-page .summary-card span { font-size: .73rem; }
.dashboard-page .summary-card strong { font-size: 1.1rem; }
.summary-card { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.summary-card span { color: var(--muted); font-size: .82rem; font-weight: 650; }
.summary-card strong { font-size: 1.35rem; }
.summary-card small { display: block; }
.agenda-list { display: flex; flex-direction: column; }
.agenda-item { display: grid; grid-template-columns: 5px 68px 1fr auto; gap: .85rem; align-items: center; border-bottom: 1px solid #edf1f6; padding: .75rem 0; }
.agenda-item:last-child { border-bottom: 0; }
.subject-strip { align-self: stretch; border-radius: 6px; min-height: 52px; }
.agenda-date, .agenda-main { display: flex; flex-direction: column; }
.agenda-date span, .agenda-main span { color: var(--muted); font-size: .8rem; }
.agenda-duration { color: #475467; font-weight: 650; white-space: nowrap; }
.dashboard-page .agenda-item { grid-template-columns: 4px 54px minmax(0, 1fr); gap: .55rem; }
.dashboard-page .agenda-main > span { white-space: nowrap; }
.agenda-session-details { display: flex; align-items: baseline; gap: .55rem; white-space: nowrap; }
.agenda-duration-inline { color: #475467 !important; font-size: .8rem !important; font-weight: 650; white-space: nowrap; }
.dashboard-page .section-heading > a { white-space: nowrap; font-size: .8rem; }
.empty-list { color: var(--muted); background: #f8fafc; border: 1px dashed var(--line-dark); border-radius: 10px; padding: 1rem; }
.empty-state.large { text-align: center; padding: 3rem 1.5rem; }

/* Plan setup */
.setup-page { max-width: 1320px; }
.setup-page-loading { overflow-anchor: none; }
.setup-loading-main { min-height: 620px; display: flex; align-items: flex-start; }
.setup-loading-side { min-height: 500px; }
.setup-loading-copy { color: var(--muted); }
.setup-steps { display: flex; align-items: center; gap: .7rem; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1rem; font-size: .83rem; font-weight: 700; }
.setup-steps > span:not(.step-arrow), .setup-flow-labels > span { white-space: nowrap; }
.setup-steps { flex-wrap: wrap; }
.setup-steps .setup-intro { margin: 0; color: var(--muted); font-weight: 400; }
.setup-flow-labels { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.setup-steps .step-arrow { color: #98a8bb; font-size: 1.15rem; font-weight: 500; line-height: 1; }
.setup-steps .done { color: var(--green); }.setup-steps .active { color: var(--blue-strong); }.setup-steps .muted { color: #98a2b3; }
.setup-flow-status-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .8rem; margin-bottom: 1rem; }
.setup-flow-status-row .setup-steps { flex: 1 1 100%; width: auto; margin-bottom: 0; }
.setup-stale-warning { flex: 0 1 520px; display: flex; align-items: center; margin: 0; padding: .7rem .9rem; font-size: .82rem; font-weight: 650; line-height: 1.25; }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 1rem; align-items: start; }
.setup-main-card, .study-settings-card { padding: 1.15rem; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 225px; gap: .8rem; margin-bottom: 1rem; }
.student-type-field { width: 225px; max-width: 100%; }
.subjects-heading { margin-top: .35rem; border-top: 1px solid #eef2f6; padding-top: 1rem; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.desktop-subject-table .data-table { table-layout: fixed; }
.desktop-subject-table th:nth-child(1), .desktop-subject-table td:nth-child(1) { width: 19%; }
.desktop-subject-table th:nth-child(2), .desktop-subject-table td:nth-child(2) { width: 13.5%; }
.desktop-subject-table th:nth-child(3), .desktop-subject-table td:nth-child(3) { width: 16.5%; }
.desktop-subject-table th:nth-child(4), .desktop-subject-table td:nth-child(4) { width: 12.5%; }
.desktop-subject-table th:nth-child(5), .desktop-subject-table td:nth-child(5) { width: 13%; }
.desktop-subject-table th:nth-child(6), .desktop-subject-table td:nth-child(6) { width: 18%; }
.desktop-subject-table th:nth-child(7), .desktop-subject-table td:nth-child(7) { width: 3%; }
.desktop-subject-table th:nth-child(8), .desktop-subject-table td:nth-child(8) { width: 4.5%; }
.desktop-subject-table .data-table th, .desktop-subject-table .data-table td { padding-left: .42rem; padding-right: .42rem; }
.desktop-subject-table td:nth-child(1), .desktop-subject-table td:nth-child(2), .desktop-subject-table td:nth-child(3) { overflow-wrap: anywhere; }
.desktop-subject-table th:nth-child(4), .desktop-subject-table th:nth-child(5),
.desktop-subject-table td:nth-child(4), .desktop-subject-table td:nth-child(5) { text-align: center; }
.desktop-subject-table th:nth-child(6), .desktop-subject-table td:nth-child(6) { padding-left: 1rem; }
.desktop-subject-table .subject-action-heading, .desktop-subject-table .subject-action-cell { padding-left: 0; padding-right: 0; text-align: center; }
.desktop-subject-table .subject-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--blue-strong); padding: 0; font-size: .9rem; }
.desktop-subject-table td:nth-child(8) .subject-action-icon { margin-right: 0; }
.subject-score { display: inline-flex; align-items: center; gap: .22rem; white-space: nowrap; }
.subject-score small { white-space: nowrap; }
.compact-value-box { min-width: 34px; padding-left: .35rem; padding-right: .35rem; }
.subject-rating-input { width: 78px; max-width: 78px; }
.data-table th { text-align: left; background: #f7f9fc; color: #344054; padding: .68rem .6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .78rem; }
.data-table td { padding: .72rem .6rem; border-bottom: 1px solid #edf1f6; vertical-align: middle; }
.value-box { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: .3rem .45rem; border: 1px solid var(--line-dark); border-radius: 7px; background: #fff; }
.progress-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; padding: .3rem .55rem; font-size: .79rem; font-weight: 750; white-space: nowrap; }
.progress-pill.behind { color: var(--red); background: var(--red-soft); }
.progress-pill.ahead { color: var(--green); background: var(--green-soft); }
.progress-pill.current { color: #475467; background: #f0f2f5; }
.row-actions { display: flex; gap: .35rem; align-items: center; justify-content: flex-end; }
.row-actions button { border: 0; background: transparent; color: var(--blue-strong); padding: .3rem; font-size: .85rem; }
.editor-panel { margin-top: 1rem; padding: 1rem; border: 1px solid #cfe0f6; background: #f8fbff; border-radius: 12px; }
.editor-grid { display: grid; gap: .65rem; }
.subject-editor-grid { grid-template-columns: 1.2fr 1fr .9fr 1.15fr; }
.editor-help { color: var(--muted); font-size: .8rem; margin-top: .65rem; }
.editor-actions { display: flex; gap: .55rem; justify-content: flex-end; margin-top: .8rem; }
.list-add-row { display: flex; justify-content: flex-start; margin-top: .75rem; }
.subject-add-row { justify-content: flex-end; }
/* Subjects & exams: keep Add subject on the same line as the explanatory subtitle. */
.subjects-heading > div { width: 100%; min-width: 0; }
.subjects-subheading-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; min-width: 0; }
.subjects-subheading-row p { flex: 0 1 auto; }
.subjects-subheading-row .soft-button { flex: 0 0 auto; margin-left: auto; }
.weekly-availability-heading { width: 100%; justify-content: space-between; align-items: center; gap: .7rem; }
.weekly-availability-heading h3 { margin: 0; }
.study-settings-card { position: sticky; top: 1rem; width: 520px; max-width: 100%; }
.study-settings-card > .field-group { margin-bottom: .9rem; }
/* Plan Setup Availability vertical rhythm. These field groups sit inside the card's fieldset,
   so do not use a direct-child selector from .study-settings-card. */
.availability-primary-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: .9rem; row-gap: .8rem; margin-bottom: 1rem; }
.study-settings-card .availability-primary-settings-grid .field-group { margin-bottom: 0; min-width: 0; }
.weekly-hours-group > label, .exam-study-maximum-group > label { min-height: 2.05rem; line-height: 1.2; display: flex; align-items: flex-end; }
.exam-study-maximum-group label { max-width: 100%; }
.study-settings-card .start-exam-study-group { margin-bottom: 0; }
.preferred-study-time-input { width: min(100%, 220px); }
.preferred-study-time-group { min-width: 0; }
.preferred-study-time-group small { display: block; max-width: 100%; line-height: 1.35; margin-top: .3rem; }
.weekly-hours-group { margin: 0; min-width: 0; }
.weekly-hours-input { width: 82px; max-width: 82px; }
.study-hours-input-with-max { display: flex; align-items: center; gap: .5rem; min-width: 0; white-space: nowrap; }
.study-hours-max-hint { display: inline-block; flex: 0 0 7.4rem; min-width: 7.4rem; color: var(--muted); font-size: .82rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.compact-heading { margin-top: 1.2rem; }
.availability-list { display: flex; flex-direction: column; gap: .45rem; }
.availability-row-shell { position: relative; }
.availability-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .34rem .68rem; border: 1px solid var(--line); border-radius: 9px; }
.availability-editor-validation {
  grid-column: 1 / -1;
  margin-top: .12rem;
  padding: .42rem .55rem;
  border: 1px solid #efc4c4;
  border-radius: 8px;
  background: #fff4f4;
  color: var(--red);
  font-size: .79rem;
  font-weight: 650;
  line-height: 1.25;
}
.availability-row-shell.is-editing .availability-row { border-color: #9fc2ee; box-shadow: 0 0 0 2px rgba(31, 112, 222, .08); }
.availability-summary { border-radius: 10px; padding: .75rem; margin: 1rem 0 .8rem; display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; border: 1px solid; }
.availability-summary.match { background: var(--green-soft); color: var(--green); border-color: #c5e3ce; }
.availability-summary.short { background: var(--red-soft); color: var(--red); border-color: #f3c9c6; }
.generate-button { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
.generate-button:disabled { filter: grayscale(1); }
.generate-button.is-busy, .regenerate-button.is-busy { cursor: default; opacity: .82; }
.regenerate-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.generate-busy-spinner {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: generate-busy-spin .75s linear infinite;
}
@keyframes generate-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .generate-busy-spinner { animation-duration: 1.5s; }
}
.mobile-only { display: none; }

/* Timetable */
.timetable-summary-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.timetable-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(290px, .75fr); gap: 1rem; align-items: start; }
.calendar-card { padding: 0; overflow: hidden; }
.calendar-toolbar { padding: .65rem 1rem; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; text-align: center; }
.calendar-toolbar-copy { display: flex; flex-direction: column; min-width: 0; gap: .14rem; }
.calendar-toolbar-copy > strong { display: block; }
.calendar-toolbar-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
}
.calendar-template-action {
  grid-column: 1;
  justify-self: end;
  margin-right: .55rem;
}
.calendar-toolbar-detail-row > span {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
  color: var(--muted);
  font-size: .75rem;
  white-space: nowrap;
}
.calendar-toolbar-actions {
  grid-column: 3;
  justify-self: center;
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .72rem;
}
.calendar-toolbar .calendar-toolbar-action { min-width: 72px; min-height: 24px; padding: .2rem .42rem; border-radius: 7px; font-size: .66rem; line-height: 1.05; white-space: nowrap; gap: .26rem; }
.calendar-toolbar .calendar-toolbar-action .generate-busy-spinner { width: .7rem; height: .7rem; flex-basis: .7rem; border-width: 1.5px; }
.week-calendar { display: grid; grid-template-columns: repeat(7, minmax(105px, 1fr)); min-height: 0; overflow-x: auto; align-items: stretch; border-bottom: 1px solid #edf1f6; }
.week-calendar > :nth-child(7n) { border-right: 0; }
.calendar-day-head { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; border-right: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; }
.calendar-day-head.today, .calendar-band-cell.today { background-color: #fbfdff; }
.calendar-day-head span { color: var(--muted); font-size: .72rem; text-transform: uppercase; font-weight: 700; }
.calendar-day-head strong { font-size: 1rem; }
.calendar-time-band { min-height: 0; padding: .22rem .3rem; display: flex; flex-direction: column; gap: .18rem; overflow: visible; border-right: 1px solid #edf1f6; border-bottom: 1px dashed #e4eaf1; }
.calendar-time-band.morning { min-height: 104px; background: rgba(31,112,222,.018); }
.calendar-time-band.midday { min-height: 76px; background: rgba(31,112,222,.035); }
.calendar-time-band.afternoon { min-height: 92px; background: rgba(16,47,80,.018); }
.calendar-time-band.evening { min-height: 76px; background: rgba(16,47,80,.035); }
.calendar-time-band.last-used-band { min-height: 0; border-bottom: 0; padding-bottom: .22rem; }
.calendar-empty-week { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 1rem; background: #f8fafc; }
.calendar-session { position: relative; border-left: 4px solid; border-radius: 7px; padding: .22rem .34rem; display: flex; flex-direction: column; justify-content: flex-start; gap: .06rem; font-size: .7rem; min-height: 0; line-height: 1.08; overflow: visible; flex: 0 0 auto; user-select: none; }
.calendar-session.study-event { cursor: pointer; }
.calendar-session.exam-event { cursor: default; box-shadow: inset 0 0 0 1px rgba(16,47,80,.20); padding-right: 2.7rem; }
.calendar-session.completed { padding-right: 1.8rem; opacity: 1; }
.calendar-session.study-event.completed { background: transparent !important; border: 2px solid var(--green) !important; box-shadow: none; }
.calendar-session.study-event.assignment-event.completed { background: var(--surface, #fff) !important; }
.calendar-session.assignment-event.completed .calendar-session-time,
.calendar-session.assignment-event.completed .calendar-session-subject-line {
  background: var(--surface, #fff);
}
.calendar-session.assignment-event { isolation: isolate; }
.calendar-session.assignment-event .assignment-badge {
  z-index: 3;
  display: inline-block;
  width: max-content;
  max-width: calc(100% - .56rem);
  white-space: nowrap;
  color: #000 !important;
  background: var(--subject-bg, #fff);
  border: 1px solid var(--subject-border, #667085);
  border-radius: 2px;
  padding: .12rem .22rem;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .025em;
}
.calendar-session.assignment-event .assignment-dot-field {
  position: absolute;
  inset: 3px;
  z-index: 0;
  pointer-events: none;
  border-radius: 3px;
  background-image: radial-gradient(circle, rgba(0,0,0,.82) 0 1px, transparent 1.25px);
  background-size: 8px 8px;
  background-position: 1px 1px;
}
.calendar-session.assignment-event .calendar-session-time,
.calendar-session.assignment-event .calendar-session-subject-line {
  position: relative;
  z-index: 1;
  background: var(--subject-bg, #fff);
  border-radius: 2px;
  width: max-content;
  max-width: calc(100% - 2px);
  padding-right: 2px;
}
.calendar-session.assignment-event.completed .completion-tick { z-index: 4; top: 1.18rem; }
.calendar-session strong, .calendar-session span, .calendar-session small { margin: 0; padding: 0; }
.calendar-session strong { font-size: .64rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.08; }
.calendar-session span { font-weight: 750; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.08; }
.calendar-session small { font-size: .63rem; line-height: 1.08; }
.exam-badge, .assignment-badge, .completion-tick { position: absolute; right: .28rem; top: .2rem; font-style: normal; font-weight: 850; line-height: 1; }
.exam-badge { font-size: .54rem; letter-spacing: .04em; color: var(--navy); background: var(--subject-bg, #fff); border: 1px solid var(--subject-border, #c7d0dc); border-radius: 3px; padding: .14rem .22rem; }
.completion-tick { color: var(--green); font-size: .88rem; }
.mobile-agenda { display: none; padding: .8rem 1rem; }
.allocation-card { position: sticky; top: 1rem; }
.allocation-list { display: flex; flex-direction: column; margin: .7rem 0; }
.allocation-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: .65rem; padding: .7rem 0; border-bottom: 1px solid #edf1f6; }
.allocation-total-row { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .7rem 0 0; font-weight: 800; }
.allocation-row > div { display: flex; flex-direction: column; }.allocation-row small { font-size: .72rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.allocation-row > .dot { width: 14px; height: 14px; }
.fit-banner { background: var(--green-soft); color: var(--green); border: 1px solid #c9e6d1; border-radius: 9px; padding: .75rem; font-size: .8rem; margin-top: .7rem; }
.chronological-card { margin-top: 1rem; width: max-content; max-width: 100%; }
.chronological-card .table-wrap { width: auto; max-width: 100%; display: inline-block; }
.session-table { width: auto; min-width: 0; }
.session-table th, .session-table td { white-space: nowrap; padding-left: .58rem; padding-right: .9rem; }
.session-table th:last-child, .session-table td:last-child { padding-right: .58rem; }
.subject-name-with-dot { display: flex; align-items: center; gap: .5rem; }

/* Subject palette: 16 distinctive colours in paired light/medium hues. The custom
   properties let the Progress Chart use exactly the same study-rectangle background
   and border colours rather than maintaining a separate chart palette. */
.subject-0 { --subject-bg:#fde8e8; --subject-border:#e56b6f; background:var(--subject-bg); border-color:var(--subject-border); color:#8a3034; } /* light red */
.subject-1 { --subject-bg:#f6b8ba; --subject-border:#c94c52; background:var(--subject-bg); border-color:var(--subject-border); color:#72272b; } /* medium red */
.subject-2 { --subject-bg:#fff0de; --subject-border:#e69a45; background:var(--subject-bg); border-color:var(--subject-border); color:#8a5316; } /* light orange */
.subject-3 { --subject-bg:#f7c487; --subject-border:#d98226; background:var(--subject-bg); border-color:var(--subject-border); color:#75430c; } /* medium orange */
.subject-4 { --subject-bg:#fff8c9; --subject-border:#d5b83b; background:var(--subject-bg); border-color:var(--subject-border); color:#6d5a0a; } /* light yellow */
.subject-5 { --subject-bg:#f2db75; --subject-border:#bfa52d; background:var(--subject-bg); border-color:var(--subject-border); color:#62540a; } /* medium yellow */
.subject-6 { --subject-bg:#e6f6e9; --subject-border:#63a96f; background:var(--subject-bg); border-color:var(--subject-border); color:#2c6b38; } /* light green */
.subject-7 { --subject-bg:#bfe3c5; --subject-border:#3c8d4d; background:var(--subject-bg); border-color:var(--subject-border); color:#225f30; } /* medium green */
.subject-8 { --subject-bg:#e6f1ff; --subject-border:#5c91d6; background:var(--subject-bg); border-color:var(--subject-border); color:#285f9f; } /* light blue */
.subject-9 { --subject-bg:#b9d5f5; --subject-border:#3778c2; background:var(--subject-bg); border-color:var(--subject-border); color:#1f568e; } /* medium blue */
.subject-10 { --subject-bg:#f0e8fa; --subject-border:#9a73c5; background:var(--subject-bg); border-color:var(--subject-border); color:#6a4497; } /* light violet */
.subject-11 { --subject-bg:#d6c0ed; --subject-border:#7d55ae; background:var(--subject-bg); border-color:var(--subject-border); color:#54337c; } /* medium violet */
.subject-12 { --subject-bg:#f3e9de; --subject-border:#b88a5a; background:var(--subject-bg); border-color:var(--subject-border); color:#725132; } /* light brown */
.subject-13 { --subject-bg:#d8b998; --subject-border:#946b43; background:var(--subject-bg); border-color:var(--subject-border); color:#543b27; } /* medium brown */
.subject-14 { --subject-bg:#eeeeee; --subject-border:#aaaaaa; background:var(--subject-bg); border-color:var(--subject-border); color:#555555; } /* light grey */
.subject-15 { --subject-bg:#c8c8c8; --subject-border:#888888; background:var(--subject-bg); border-color:var(--subject-border); color:#3f3f3f; } /* medium grey */

.dot.subject-0 { background: #fde8e8; }
.dot.subject-1 { background: #f6b8ba; }
.dot.subject-2 { background: #fff0de; }
.dot.subject-3 { background: #f7c487; }
.dot.subject-4 { background: #fff8c9; }
.dot.subject-5 { background: #f2db75; }
.dot.subject-6 { background: #e6f6e9; }
.dot.subject-7 { background: #bfe3c5; }
.dot.subject-8 { background: #e6f1ff; }
.dot.subject-9 { background: #b9d5f5; }
.dot.subject-10 { background: #f0e8fa; }
.dot.subject-11 { background: #d6c0ed; }
.dot.subject-12 { background: #f3e9de; }
.dot.subject-13 { background: #d8b998; }
.dot.subject-14 { background: #eeeeee; }
.dot.subject-15 { background: #c8c8c8; }

/* Dashboard agenda subject strip uses the lighter subject fill colour for consistency
   with the interior of the corresponding timetable session. */
.subject-strip.subject-0 { background: var(--subject-bg); }
.subject-strip.subject-1 { background: var(--subject-bg); }
.subject-strip.subject-2 { background: var(--subject-bg); }
.subject-strip.subject-3 { background: var(--subject-bg); }
.subject-strip.subject-4 { background: var(--subject-bg); }
.subject-strip.subject-5 { background: var(--subject-bg); }
.subject-strip.subject-6 { background: var(--subject-bg); }
.subject-strip.subject-7 { background: var(--subject-bg); }
.subject-strip.subject-8 { background: var(--subject-bg); }
.subject-strip.subject-9 { background: var(--subject-bg); }
.subject-strip.subject-10 { background: var(--subject-bg); }
.subject-strip.subject-11 { background: var(--subject-bg); }
.subject-strip.subject-12 { background: var(--subject-bg); }
.subject-strip.subject-13 { background: var(--subject-bg); }
.subject-strip.subject-14 { background: var(--subject-bg); }
.subject-strip.subject-15 { background: var(--subject-bg); }

/* Static authentication preview aliases. */
.subject-blue { background: #e6f1ff; border-color: #5c91d6; color: #285f9f; }
.subject-green { background: #e6f6e9; border-color: #63a96f; color: #2c6b38; }
.subject-purple { background: #f0e8fa; border-color: #9a73c5; color: #6a4497; }
.dot.subject-blue { background: #5c91d6; }
.dot.subject-green { background: #63a96f; }
.dot.subject-purple { background: #9a73c5; }

/* Account */
.account-page { max-width: 920px; }
.account-grid { display: grid; grid-template-columns: 360px 460px; gap: 1rem; align-items: start; width: 836px; max-width: 100%; }
.account-profile-card, .passkey-card { min-height: 100%; }
.passkey-card { width: 460px; max-width: 100%; }
.account-identity-row { display: grid; grid-template-columns: 90px 1fr; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid #edf1f6; }
.account-identity-row span { color: var(--muted); }
.verified-badge, .recent-auth-badge { display: inline-flex; color: var(--green); background: var(--green-soft); border-radius: 8px; padding: .35rem .55rem; font-weight: 700; font-size: .78rem; margin: .8rem 0; }
.count-badge { background: var(--blue-soft); color: var(--blue-strong); font-weight: 800; border-radius: 99px; padding: .25rem .55rem; font-size: .75rem; }
.passkey-list { display: flex; flex-direction: column; }
.passkey-item { display: grid; grid-template-columns: 38px 1fr auto; gap: .7rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid #edf1f6; }
.passkey-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-soft); color: var(--blue); }
.passkey-details { display: flex; flex-direction: column; }.passkey-details span { color: var(--muted); font-size: .77rem; }
.passkey-actions-menu { position: relative; }.passkey-actions-menu summary { color: var(--blue-strong); font-weight: 650; cursor: pointer; }
.passkey-actions-menu[open] { min-width: 210px; }.passkey-actions-menu form { margin-top: .5rem; }.rename-form { display: flex; gap: .4rem; }.rename-form .text-input { min-height: 36px; padding: .4rem .5rem; }
.passkey-add-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.passkey-add-heading h3 { margin-bottom: .15rem; }
.passkey-add-heading p { margin: 0 0 .7rem; color: var(--muted); font-size: .82rem; }
.account-security-note { margin: 0 0 .7rem; }
.passkey-confirm-form { margin-top: .55rem; }
.add-passkey-form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: end; margin-top: .7rem; }
.small-note { font-size: .78rem; margin-top: .8rem; }
.recovery-info-card { margin-top: 1rem; width: 836px; max-width: 100%; }


.exam-summary-cell { display: table-cell; }
.exam-summary-cell span, .exam-summary-cell small { display: block; }
.exam-summary-cell small { margin-top: .18rem; color: var(--muted); }
.needs-attention { color: var(--red) !important; font-weight: 650; }
.stacked-field-label { display: flex; flex-direction: column; align-items: flex-start; gap: .04rem; line-height: 1.08; }
.stacked-field-label small { color: var(--muted); font-weight: 600; font-size: .72rem; }
.exam-duration-inputs { display: grid; grid-template-columns: max-content max-content; gap: .58rem; justify-content: start; }
.compact-number-input { display: grid; grid-template-columns: 58px auto; gap: .28rem; align-items: center; margin: 0; }
.compact-number-input .text-input { width: 58px; min-width: 58px; padding-left: .35rem; padding-right: .35rem; text-align: center; }
.compact-number-input span { color: var(--muted); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.exam-conflict-warning {
  margin-top: .72rem;
  padding: .65rem .78rem;
  border: 1px solid #efb7b2;
  border-radius: 8px;
  background: var(--red-soft);
  color: #8d231f;
  font-size: .82rem;
  line-height: 1.35;
}
.exam-conflict-warning strong { font-weight: 800; }
.timetable-agenda-item:not(.exam-agenda-item), .study-list-row { cursor: pointer; user-select: none; }
.timetable-agenda-item.completed, .session-table tr.completed { background: #f3fbf6; }
.inline-exam-badge { display: inline-flex; margin-left: .35rem; padding: .12rem .28rem; border-radius: 4px; background: #e6ebf1; color: var(--navy); font-size: .58rem; letter-spacing: .04em; font-weight: 850; vertical-align: middle; }
.inline-assignment-badge {
  display: inline-flex;
  margin-left: .35rem;
  padding: .12rem .28rem;
  border: 1px solid var(--subject-border, #667085);
  border-radius: 3px;
  background: var(--subject-bg, #fff) !important;
  color: #000 !important;
  font-size: .58rem;
  letter-spacing: .025em;
  font-weight: 900;
  vertical-align: middle;
  line-height: 1;
}
.session-table .inline-exam-badge { font-size: .78rem; padding: .14rem .36rem; background: #fff7f6; color: var(--red); border: 1px solid #f1c6c2; }
.inline-completion-tick { color: var(--green); font-weight: 900; margin-left: .3rem; }
.exam-list-row { background: #fdeceb; }
.session-table .exam-list-row:hover { background: #fbe3e1; }
.session-table tr.study-list-row:hover { background: #f7fbff; }

/* Responsive */
@media (max-width: 1100px) {
  .setup-grid, .timetable-layout { grid-template-columns: 1fr; }
  .study-settings-card, .allocation-card { position: static; }
  .study-settings-card { width: 100%; }
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .profile-grid .field-group:last-child { grid-column: 1 / -1; }
  .subject-editor-grid { grid-template-columns: 1fr 1fr; }
  .account-grid { grid-template-columns: 1fr; width: 100%; }
  .passkey-card { width: 100%; max-width: none; }
  .recovery-info-card { width: 100%; }
}

@media (max-width: 760px) {
  .availability-primary-settings-grid { grid-template-columns: 1fr; }
  body { font-size: 14px; }
  .auth-shell { display: block; background: #fbfcfe; }
  .auth-brand-panel { min-height: auto; padding: 1rem 1.1rem; }
  .auth-brand-copy, .week-preview, .auth-brand-foot { display: none; }
  .brand-mark { width: 38px; height: 38px; border-radius: 10px; }.brand-title { font-size: 1rem; }.brand-subtitle { display: none; }
  .auth-content-panel { padding: 1.2rem 1rem 2rem; min-height: calc(100vh - 70px); align-items: start; }
  .auth-card { box-shadow: none; border-radius: 14px; padding: 1.25rem; }.auth-card h1 { font-size: 1.65rem; }

  .app-layout { display: block; }
  .sidebar { display: none; }
  .mobile-header { display: flex; height: 58px; background: var(--navy); align-items: center; padding: 0 1rem; position: sticky; top: 0; z-index: 20; gap: .65rem; }
  .mobile-brand { color: #fff; font-weight: 800; text-decoration: none; }
  .global-action-bar { display: none; }
  .mobile-global-undo { display: inline-flex; max-width: 44%; overflow: hidden; }
  .mobile-global-undo span { overflow: hidden; text-overflow: ellipsis; }
  .mobile-bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); z-index: 30; padding: .35rem .35rem calc(.35rem + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav a { color: #667085; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem; font-size: 1.05rem; }.mobile-bottom-nav a.active { color: var(--blue); }.mobile-bottom-nav small { font-size: .65rem; color: inherit; }
  .mobile-bottom-nav .nav-icon { width: 17px; height: 17px; flex-basis: 17px; }
  .main-content { min-height: calc(100vh - 58px); padding-bottom: 68px; }
  .page-shell { padding: 1.25rem 1rem 2rem; }
  .page-heading-row { align-items: flex-start; }.page-actions { flex-direction: column; }
  h1 { font-size: 1.7rem; }
  .summary-grid, .timetable-summary-grid { grid-template-columns: 1fr 1fr; }
  .next-exam-card { padding: 1rem; }.next-exam-card h2 { font-size: 1.35rem; }
  .exam-countdown { min-width: 70px; }
  .agenda-item { grid-template-columns: 4px 58px 1fr; gap: .65rem; }.agenda-duration { grid-column: 3; font-size: .76rem; }
  .setup-steps { display: flex; }
  .setup-flow-labels { display: none; }
  .setup-flow-status-row { display: block; margin-bottom: 1rem; }
  .setup-stale-warning { width: 100%; margin: 0; }
  .setup-grid { display: block; }.study-settings-card { margin-top: 1rem; }
  .profile-grid { grid-template-columns: 1fr; }.profile-grid .field-group:last-child { grid-column: auto; }
  .student-type-field { width: 100%; max-width: none; }
  .desktop-subject-table { display: none; }.mobile-only { display: flex; }.subject-card-list { flex-direction: column; gap: .55rem; }
  .subject-card { border: 1px solid var(--line); border-radius: 10px; padding: .75rem; }.subject-card > div:first-child { display: flex; justify-content: space-between; gap: .5rem; }.subject-card > div:first-child span { color: var(--muted); font-size: .78rem; }.subject-card-meta { display: flex; align-items: center; justify-content: space-between; margin: .55rem 0; color: var(--muted); font-size: .8rem; }
  .subject-editor-grid { grid-template-columns: 1fr; }
  .dashboard-page .agenda-item { grid-template-columns: 4px 50px minmax(0, 1fr); }
  .agenda-session-details { flex-wrap: wrap; gap: .25rem .5rem; }
  .desktop-calendar { display: none; }.mobile-agenda { display: flex; }
  .calendar-card { padding-bottom: .2rem; }.allocation-card { margin-top: 0; }
  .chronological-card { display: none; }
  .account-grid { display: block; }.passkey-card { margin-top: 1rem; }.passkey-item { grid-template-columns: 36px 1fr; }.passkey-actions-menu { grid-column: 2; }.add-passkey-form { grid-template-columns: 1fr; }
}

/* v1.0.6 navigation/form polish */
.setup-loading-card { min-height: 150px; }

/* v1.0.7 timetable precision, navigation stability and compact layout */
.dashboard-page { max-width: 565px; }
.agenda-session-details { gap: 1.1rem; }

/* Plan Setup refinements */
.compact-number-input { grid-template-columns: 48px auto; gap: .25rem; }
.compact-number-input .text-input { width: 48px; min-width: 48px; padding-left: .35rem; padding-right: .25rem; }

/* Timetable summary and main content share the same four-column geometry.
   The calendar spans through Subjects; Weekly allocation starts exactly where Study period starts. */
.timetable-summary-grid,
.timetable-layout { grid-template-columns: 1.25fr 1fr .65fr .78fr; gap: 1rem; }
.timetable-summary-primary { display: contents; }
.timetable-layout .calendar-card { grid-column: 1 / 4; }
.timetable-layout .allocation-card { grid-column: 4; }
.study-period-card { min-width: 0; }
.allocation-card { width: auto; min-width: 0; }
.allocation-row { grid-template-columns: 16px minmax(0, 1fr) auto; width: 100%; min-width: 0; column-gap: .48rem; }
.allocation-subject-copy { min-width: 0; overflow-wrap: anywhere; }
.allocation-subject-copy small { min-width: 0; overflow-wrap: anywhere; }
.allocation-duration { align-self: start; justify-self: end; padding-top: .02rem; white-space: nowrap; }

/* Exact time positioning without stretching session rectangles to their duration. */
.week-calendar { display: grid; grid-template-columns: 60px repeat(7, minmax(105px, 1fr)); min-height: 0; overflow-x: auto; align-items: stretch; border-bottom: 0; }
.week-calendar > :nth-child(7n) { border-right: initial; }
.calendar-time-corner { min-height: 58px; border-right: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; background: #f8fafc; }
.calendar-day-head { min-height: 58px; border-top: 1px solid transparent; }
.calendar-time-label { min-height: 12px; padding: .05rem .3rem 0 0; color: #8491a3; font-size: .62rem; text-align: right; border-right: 1px solid #edf1f6; position: relative; }
.calendar-time-label.hour-mark { border-top: 1px solid #e6ebf2; padding-top: .12rem; }
.calendar-axis-range-handle {
  position: absolute;
  right: 2px;
  z-index: 18;
  min-width: 56px;
  height: 18px;
  padding: 0 .24rem;
  border: 1px solid #a9b7c8;
  border-radius: 5px;
  background: #fff;
  color: #526071;
  font: inherit;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  box-shadow: 0 1px 2px rgba(16,47,80,.08);
}
.calendar-axis-start-handle { top: 0; }
.calendar-axis-end-handle { bottom: 0; }
.calendar-axis-range-handle:hover,
.calendar-axis-range-handle:focus-visible,
.calendar-axis-range-handle.is-dragging {
  border-color: #6d7f94;
  color: #243447;
  outline: none;
}
.calendar-axis-range-handle::before {
  content: "↕";
  margin-right: .16rem;
  color: #8491a3;
}
body.calendar-axis-range-dragging,
body.calendar-axis-range-dragging * { cursor: ns-resize !important; user-select: none !important; }
.calendar-slot-cell { min-height: 12px; padding: .05rem .24rem; border-right: 1px solid #edf1f6; position: relative; overflow: visible; }
.calendar-slot-cell.hour-mark { border-top: 1px solid #e6ebf2; }
.calendar-slot-cell.last-calendar-slot, .calendar-time-label.last-calendar-slot { border-bottom: 1px solid #edf1f6; padding-bottom: .14rem; }
.calendar-day-head.current-day-column { border-top-color: #98a2b3; border-left: 1px solid #98a2b3; border-right: 1px solid #98a2b3; background: #fbfdff; }
.calendar-slot-cell.current-day-column { border-left: 1px solid #98a2b3; border-right: 1px solid #98a2b3; background-color: #fbfdff; }
.calendar-slot-cell.current-day-column.last-calendar-slot { border-bottom: 1px solid #98a2b3; }
.calendar-empty-week { grid-column: 1 / -1; }

.calendar-session { margin: .05rem 0; padding: .2rem .34rem; gap: .08rem; min-height: 0; line-height: 1.08; }
.calendar-session.study-event { cursor: grab; }
.calendar-session.study-event:active { cursor: grabbing; }
.calendar-session.dragging { opacity: .58; }

.calendar-session.move-required { box-shadow: 0 0 0 2px rgba(201,52,44,.22); }
.calendar-session.study-event.completed { background: transparent !important; border: 2px solid var(--green) !important; box-shadow: none; }
.calendar-session-time { margin: 0; padding: 0; line-height: 1.08; }
.calendar-session-subject-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .08rem .42rem; margin: 0; padding: 0; line-height: 1.08; }
.calendar-session-subject-line span { font-weight: 750; }
.calendar-session-subject-line small { white-space: nowrap; }
.calendar-session.study-event .calendar-session-subject-line small { color: #596579; }

.move-session-panel { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; border-color: #b9d2f2; background: #f8fbff; }
.move-session-panel p { margin: .25rem 0 0; color: var(--muted); max-width: 70ch; }
.move-session-controls { display: grid; grid-template-columns: 150px 130px auto auto; gap: .5rem; align-items: center; }

/* Chronological list */
.session-table .chronological-exam-badge { min-width: 52px; justify-content: center; text-align: center; font-size: .86rem; padding: .18rem .45rem; }
.session-table .chronological-assignment-badge { justify-content: center; text-align: center; font-size: .76rem; padding: .18rem .4rem; }
.session-table tr.chronological-week-summary-row td {
  background: #f7f9fc;
  color: #344054;
  border-top: 1px solid #dfe6ee;
  border-bottom: 1px solid #dfe6ee;
  font-weight: 600;
}
.session-table tr.chronological-week-summary-row td:first-child {
  min-width: 15.5rem;
}
.chronological-week-toggle {
  width: 1.65rem;
  height: 1.65rem;
  margin-right: .45rem;
  padding: 0;
  border: 1px solid #b9c6d4;
  border-radius: 5px;
  background: #fff;
  color: #344054;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.chronological-week-toggle:hover { background: #eef4fb; }
.chronological-week-toggle:focus-visible { outline: 2px solid #75a7e8; outline-offset: 1px; }
/* Treat all chronological entries for the current day as one outlined group rather than
   drawing a separate rectangle around every row. With border-collapse: collapse, the shared
   horizontal edges are drawn as independent overlays on only the first and last rows so they
   cannot be lost to a neighbouring row/header border. */
.session-table tr.current-day-row td { position: relative; }
.session-table tr.current-day-row td:first-child { border-left: 2px solid #98a2b3; }
.session-table tr.current-day-row td:last-child { border-right: 2px solid #98a2b3; }
.session-table tr.current-day-first td::before,
.session-table tr.current-day-last td::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #98a2b3;
  pointer-events: none;
  z-index: 1;
}
.session-table tr.current-day-first td::before { top: 0; }
.session-table tr.current-day-last td::after { bottom: 0; }
.exam-list-row { background: #fdeceb; }

.timetable-loading-card { min-height: 280px; }

@media (max-width: 1100px) {
  .timetable-layout { grid-template-columns: 1fr; }
  .timetable-layout .calendar-card, .timetable-layout .allocation-card { grid-column: 1; }
  .allocation-card { width: 100%; }
  .move-session-panel { flex-direction: column; align-items: stretch; }
  .move-session-controls { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .move-session-controls { grid-template-columns: 1fr; }
}
.pattern-prompt-panel { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; border-color: #b9d2f2; background: #f8fbff; }
.pattern-prompt-panel p { margin: .2rem 0 0; color: var(--muted); }
.pattern-prompt-actions { display: flex; gap: .55rem; flex: 0 0 auto; }
@media (max-width: 760px) {
  .pattern-prompt-panel { flex-direction: column; align-items: stretch; }
  .pattern-prompt-actions { flex-direction: column; }
}

/* v1.0.8 rendering stability, exam input and true-duration calendar fixes */
.compact-number-input .text-input {
  text-align: center;
}

/* The calendar uses a single five-minute interaction/rendering lattice. Study/exam cards
   span the rows represented by their duration; the hour height remains unchanged because
   each five-minute row is one third of the former 15-minute row height. */
.week-calendar {
  position: relative;
  align-items: stretch;
  grid-auto-flow: row;
  overflow-x: auto;
  overflow-y: visible;
}
.calendar-time-corner,
.calendar-day-head,
.calendar-time-label,
.calendar-slot-cell {
  min-height: 0;
}
.calendar-time-label,
.calendar-slot-cell {
  height: var(--calendar-slot-height, 4px);
}
.calendar-slot-cell {
  padding: 0;
}
.calendar-time-label {
  padding: 0 .3rem 0 0;
  line-height: var(--calendar-slot-height, 4px);
}
.calendar-time-label.hour-mark,
.calendar-slot-cell.hour-mark {
  border-top: 1px solid #e6ebf2;
}
.calendar-session {
  z-index: 4;
  align-self: stretch;
  margin: 1px 3px;
  padding: .24rem .36rem;
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,47,80,.06);
}
.calendar-session.study-event.completed {
  background: transparent !important;
  border: 2px solid var(--green) !important;
}

/* Make the future-session move workflow immediately visible at the user's current
   scroll position instead of rendering controls above the current viewport. */
.floating-move-panel,
.floating-pattern-panel {
  position: fixed;
  z-index: 1000;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  box-shadow: 0 18px 44px rgba(16,47,80,.20);
}
.floating-pattern-panel {
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
}
.floating-pattern-panel .pattern-prompt-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.prompt-escape-note {
  margin-top: .45rem !important;
  color: #98a2b3 !important;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .floating-move-panel,
  .floating-pattern-panel {
    max-width: calc(100vw - 24px);
  }
}


/* v1.0.10 navigation stability, unusual exam-time warning and direct pointer drag */
.exam-time-warning {
  margin-top: .65rem;
  padding: .72rem .8rem;
  border: 1px solid #e2b45c;
  border-radius: 10px;
  background: #fff8e8;
  color: #7a4e00;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.exam-time-warning > div { display: flex; flex-direction: column; gap: .12rem; }
.exam-time-warning span { font-size: .82rem; }
.unusual-time-confirmed { color: var(--green); font-weight: 750; white-space: nowrap; }

/* Keep the Plan Setup desktop geometry deterministic. Data is prefetched before normal
   navigation, so these dimensions no longer switch between loading and loaded layouts. */
@media (min-width: 1101px) {
  .setup-page { width: min(1320px, 100%); }
  .setup-grid { grid-template-columns: minmax(0, 1fr) 520px; }
}

.calendar-session.study-event {
  cursor: grab;
  touch-action: none;
  -webkit-user-drag: none;
}
.calendar-session.study-event.dragging {
  cursor: grabbing;
  opacity: .58;
  z-index: 20;
}
.calendar-slot-cell.drag-target {
  background: rgba(31,112,222,.12) !important;
  outline: 2px solid rgba(31,112,222,.55);
  outline-offset: -2px;
}
.account-loading-card { min-height: 360px; }

@media (max-width: 760px) {
  .exam-time-warning { align-items: stretch; flex-direction: column; }
  .weekly-hours-group { max-width: 100%; }
}

/* v1.0.10 final interaction/rendering corrections */
/* Five-minute calendar lattice. Three 4px rows preserve the former 12px-per-15-minute
   vertical density, while a 30-minute session now spans six rows and can be positioned/resized
   on five-minute boundaries. */
.calendar-time-label,
.calendar-slot-cell {
  height: var(--calendar-slot-height, 4px);
}
.calendar-time-label {
  line-height: var(--calendar-slot-height, 4px);
  font-size: .56rem;
  overflow: visible;
}
.calendar-time-label.hour-mark {
  position: relative;
  z-index: 2;
  line-height: 12px;
}
.calendar-time-label.quarter-hour-mark,
.calendar-slot-cell.quarter-hour-mark {
  border-top: 1px solid rgba(230,235,242,.45);
}
.calendar-slot-cell:not(.hour-mark):not(.quarter-hour-mark) {
  border-top: 1px solid rgba(237,241,246,.20);
}
.calendar-session {
  margin: 0 3px;
  padding: 1px 3px;
  gap: 0;
  line-height: 1;
}
.calendar-session-time,
.calendar-session-subject-line,
.calendar-session-subject-line span,
.calendar-session-subject-line small {
  line-height: 1;
}
.calendar-session-time { font-size: .56rem; }
.calendar-session-subject-line { gap: 0 .32rem; }
.calendar-session-subject-line span { font-size: .58rem; }
.calendar-session-subject-line small { font-size: .55rem; }

/* Study-period movement is calendar-only. Chronological/mobile list rows remain
   selectable for completion/deletion but are not drag sources. */
.calendar-session.study-event {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.calendar-session.study-event > * { pointer-events: none; }
.calendar-session.study-event.dragging {
  cursor: grabbing;
  opacity: .55;
}
.session-table .study-list-row,
.timetable-agenda-item:not(.exam-agenda-item) {
  cursor: pointer;
  touch-action: auto;
  -webkit-user-drag: auto;
}
.study-drag-active .calendar-session {
  pointer-events: none;
}
.calendar-slot-cell.drag-target {
  background: rgba(31,112,222,.14) !important;
  outline: 2px solid rgba(31,112,222,.58);
  outline-offset: -2px;
}

/* Completed study periods keep the green outline while showing the row background. */
.calendar-session.study-event.completed {
  background: transparent !important;
  border: 2px solid var(--green) !important;
}

/* Visible drag proxy so a study period feels directly attached to the pointer while moving. */
.study-drag-ghost {
  position: fixed !important;
  z-index: 5000 !important;
  pointer-events: none !important;
  margin: 0 !important;
  opacity: .92 !important;
  background: #fff !important;
  border: 2px solid var(--blue) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(16,47,80,.24) !important;
  padding: .35rem .5rem !important;
  color: var(--text) !important;
  height: auto !important;
  min-height: 34px !important;
  overflow: hidden !important;
}
.study-drag-ghost td { border: 0 !important; padding: .1rem .25rem !important; }
.study-drag-ghost .subject-strip { min-height: 24px; }

/* v1.0.11: single-click selection for keyboard deletion of study sessions.
   Calendar selection remains an internal interaction state but no longer draws a blue rectangle. */
.timetable-agenda-item.study-session-selected {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(31,112,222,.10);
}
.session-table tr.study-list-row.study-session-selected td {
  position: relative;
  background: #eaf3ff !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
/* A selected chronological row is identified only by its thicker vertical outer edges.
   Mask the table/current-day horizontal separators so no thin line remains above or below it. */
.session-table tr.study-list-row.study-session-selected td::before,
.session-table tr.study-list-row.study-session-selected td::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #eaf3ff;
  pointer-events: none;
  z-index: 3;
}
.session-table tr.study-list-row.study-session-selected td::before { top: 0; }
.session-table tr.study-list-row.study-session-selected td::after { bottom: 0; }
.session-table tr.study-list-row.study-session-selected td:first-child {
  box-shadow: inset 2px 0 0 var(--blue);
}
.session-table tr.study-list-row.study-session-selected td:last-child {
  box-shadow: inset -2px 0 0 var(--blue);
}


/* v1.4 timetable interaction refinements. */
.study-drop-preview,
.pattern-conflict-warning {
  pointer-events: none;
  z-index: 3;
  align-self: stretch;
  margin: 1px 3px;
  border-radius: 7px;
  box-sizing: border-box;
}
.study-drop-preview-valid {
  border: 2px solid rgba(31,112,222,.72);
  background: rgba(31,112,222,.08);
}
.study-drop-preview-invalid,
.pattern-conflict-warning {
  border: 1px solid #d92d20;
  background: transparent !important;
  box-shadow: none;
}
.calendar-slot-cell.drag-target-invalid {
  background: transparent !important;
  outline: none !important;
}

/* v1.4.7 exam emphasis and robust calendar study-session hit area. */
.calendar-session.exam-event {
  border: 2px solid var(--red) !important;
  box-sizing: border-box;
  box-shadow: none !important;
}
.calendar-session.exam-event .exam-badge {
  position: absolute;
  right: .28rem;
  top: .2rem;
  z-index: 3;
  display: inline-block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  color: var(--red) !important;
  background: var(--subject-bg, #fff) !important;
  border: 1px solid var(--subject-border, var(--red));
  border-radius: 2px;
  font-size: .62rem;
  padding: .14rem .22rem;
}

/* Exam rectangles use a fine red dot field so they read instantly as exam blocks even when
   their subject colour is similar to ordinary study periods. Text sits on the subject
   background above the decorative dots so the pattern remains outside the copy. */
.calendar-session.exam-event .exam-dot-field {
  position: absolute;
  inset: 3px;
  z-index: 0;
  pointer-events: none;
  border-radius: 3px;
  background-image: radial-gradient(circle, rgba(217,45,32,.78) 0 1px, transparent 1.25px);
  background-size: 8px 8px;
  background-position: 1px 1px;
}
.calendar-session.exam-event > :not(.exam-dot-field):not(.exam-badge) { position: relative; z-index: 1; }
.calendar-session.exam-event .calendar-session-time,
.calendar-session.exam-event .calendar-session-subject-line {
  background: var(--subject-bg, #fff);
  border-radius: 2px;
  width: max-content;
  max-width: calc(100% - 2.6rem);
  padding-right: 2px;
}

/* Keep the visible rectangle unchanged while ensuring the entire study-session card
   remains the pointer target, including its border and very small 30-minute cards. */
.calendar-session.study-event {
  isolation: isolate;
}

/* v1.4.11 calendar study-period edge resizing. */
.calendar-session.study-event > .session-resize-handle {
  position: absolute;
  left: 4px;
  right: 2px;
  height: 5px;
  z-index: 12;
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}
.session-resize-handle-top { top: -1px; }
.session-resize-handle-bottom { bottom: -1px; }
.calendar-session.study-event > .session-resize-handle::after {
  content: "";
  position: absolute;
  left: 38%;
  right: 38%;
  height: 1px;
  top: 2px;
  border-radius: 2px;
  background: transparent;
}
.calendar-session.study-event:hover > .session-resize-handle::after {
  background: rgba(16,47,80,.35);
}
.calendar-session.study-event.resizing {
  opacity: .32;
  cursor: ns-resize;
}
.calendar-session.study-resize-preview {
  pointer-events: none !important;
  z-index: 25 !important;
  opacity: .92;
  box-shadow: 0 0 0 2px rgba(31,112,222,.45), 0 2px 8px rgba(16,47,80,.14);
}
.study-resize-active,
.study-resize-active * {
  cursor: ns-resize !important;
}

/* Resize/prompt render stability. The floating prompt host lives after the timetable content and
   has no layout height, so showing a fixed-position prompt never inserts/removes flow content ahead
   of the calendar. During the resize render handshake browser scroll anchoring is temporarily
   disabled; JavaScript restores the final calendar viewport position once from OnAfterRenderAsync. */
.timetable-floating-prompt-host {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* Right-click / long-press Study <-> Assignment context menu. It is fixed-positioned inside
   the zero-height prompt host so opening it never changes timetable layout or scroll position. */
.study-purpose-context-menu {
  position: fixed;
  z-index: 1250;
  padding: .3rem;
  border: 1px solid #cfd8e6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16,47,80,.22);
  color: var(--text);
}
.study-purpose-context-action {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: .5rem .62rem;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
}
.study-purpose-context-action:hover,
.study-purpose-context-action:focus-visible {
  background: #eaf3ff;
  outline: none;
}
.study-purpose-context-hint {
  display: block;
  padding: .18rem .62rem .28rem;
  color: #98a2b3;
  font-size: .66rem;
  line-height: 1.2;
}

/* The app owns the long-press action on subject study sessions, so suppress the browser's
   native touch callout while keeping normal scrolling on agenda/list representations. */
.calendar-session.study-event,
.timetable-agenda-item:not(.exam-agenda-item),
.session-table tr.study-list-row {
  -webkit-touch-callout: none;
}
html.timetable-viewport-guard,
html.timetable-viewport-guard body,
html.timetable-viewport-guard .timetable-page {
  overflow-anchor: none;
}

/* v1.4.60: visibly identify the currently selected calendar study period without
   changing its size, subject border, completion border, or drag/resize geometry.
   A two-pixel outer box-shadow follows the rounded perimeter and z-index keeps it
   above neighbouring grid items instead of allowing the highlight to be painted over. */
.calendar-session.study-event.study-session-selected {
  outline: none;
  box-shadow: 0 0 0 2px #9cc9f7 !important;
  z-index: 20;
}

/* Keep the resize hit areas entirely inside the real study rectangle. The visible grip line
   sits directly over the selected rectangle's top/bottom blue edge. */
.calendar-session.study-event > .session-resize-handle {
  left: 0;
  right: 0;
  height: 6px;
}
.session-resize-handle-top { top: 0; }
.session-resize-handle-bottom { bottom: 0; }
.calendar-session.study-event > .session-resize-handle::after {
  left: 32%;
  right: 32%;
  height: 2px;
  border-radius: 1px;
  background: transparent;
}
.session-resize-handle-top::after { top: 0; }
.session-resize-handle-bottom::after { top: auto; bottom: 0; }
.calendar-session.study-event:hover > .session-resize-handle::after {
  background: rgba(31,112,222,.55);
}

.prompt-error-text {
  color: #9c241f !important;
  background: var(--red-soft);
  border: 1px solid #f3c9c6;
  border-radius: 8px;
  padding: .55rem .65rem;
  margin-top: .55rem !important;
}

.overwrite-altered-times-prompt {
  margin: .8rem 0;
  padding: .8rem;
  border: 1px solid #b9d2f2;
  border-radius: 10px;
  background: #f8fbff;
}
.overwrite-altered-times-prompt > strong { display: block; margin-bottom: .28rem; }
.overwrite-altered-times-prompt > p { margin: 0 0 .65rem; color: var(--muted); font-size: .8rem; }

.overwrite-altered-times-floating {
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px));
}


/* v1.4.23: during the one-time timetable bootstrap, do not show a study rectangle as draggable
   before its browser pointer runtime exists. The class is removed by initCalendarDrag only after
   the final initial clock/week render has settled and all listeners are active. Week navigation
   never reapplies this class, so newly displayed weeks remain immediately interactive. */
.week-calendar.calendar-interaction-refreshing .calendar-session.study-event {
  visibility: hidden;
  pointer-events: none !important;
  cursor: default !important;
}


/* v1.4.25 chronological-list tightening and completed-study progress chart. */
.chronological-card {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}
/* Keep the explanatory sentence from determining the card's intrinsic width. The table is the
   sizing content, leaving only the normal card padding beyond the Duration column. */
.chronological-card .section-heading {
  width: 36rem;
  max-width: 100%;
}
.chronological-card .table-wrap {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.progress-chart-page { max-width: 1540px; }
.progress-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.progress-chart-card { overflow: hidden; }
.progress-chart-heading { margin-bottom: 1rem; }
.progress-chart-layout { display: block; }
.progress-chart-scroll { min-width: 0; overflow-x: auto; padding: .25rem .15rem .2rem; }
.progress-chart-svg { display: block; width: 100%; height: auto; background: #fff; border: 1px solid #edf1f6; border-radius: 12px; }
.progress-grid-line { stroke: #e8edf3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.progress-axis-line { stroke: #667085; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.progress-x-tick-line { stroke: #98a2b3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.progress-axis-label { fill: #667085; font-size: 13px; }
.progress-x-tick { font-size: calc(13px - 1pt); }
.progress-axis-title { fill: #344054; font-size: 14px; font-weight: 700; }
.progress-overall-target-line { stroke: #667085; stroke-width: 1.25; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.progress-overall-target-label { fill: #475467; font-size: calc(9px + 1pt); font-weight: 750; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.96); stroke-width: 2px; stroke-linejoin: round; }
/* Each subject owns a scheduled-target compartment in the weekly stack. The darker outline is
   the target; completed study fills upward from the bottom without changing the compartment size. */
.progress-subject-stack-segment { cursor: default; }
.progress-subject-actual-fill { fill: var(--subject-bg); stroke: none; pointer-events: none; }
.progress-subject-target-outline { fill: transparent; stroke: var(--subject-border); stroke-width: 1.25; vector-effect: non-scaling-stroke; pointer-events: all; }
.progress-subject-stack-segment:hover .progress-subject-target-outline { stroke-width: 1.8; }
.progress-subject-stack-segment:hover .progress-subject-actual-fill { filter: brightness(.97); }
.progress-subject-target-label { fill: var(--subject-border); font-size: calc(8.5px + 1pt); font-weight: 800; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.94); stroke-width: 2px; stroke-linejoin: round; }
.progress-subject-studied-label { fill: #243b53; font-size: calc(9.5px + 1pt); font-weight: 850; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.94); stroke-width: 2.2px; stroke-linejoin: round; }
.progress-subject-studied-label-bottom { font-size: calc(8.5px + 1pt); }
.progress-subject-side-label { fill: var(--subject-border); font-size: 11px; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.96); stroke-width: 2px; stroke-linejoin: round; }
.progress-subject-hover-hit { fill: transparent; stroke: none; pointer-events: all; }
.progress-subject-hover-tooltip { opacity: 0; pointer-events: none; }
.progress-subject-hover-zone:hover .progress-subject-hover-tooltip { opacity: 1; }
.progress-subject-hover-tooltip-bg { fill: rgba(33,43,54,.94); stroke: none; }
.progress-subject-hover-tooltip-text { fill: #fff; font-size: 8px; font-weight: 750; pointer-events: none; }
.progress-empty-chart-text { fill: #98a2b3; font-size: 18px; font-weight: 700; }
.progress-chart-loading-card { min-height: 300px; }

@media (max-width: 760px) {
  .mobile-bottom-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .progress-summary-grid { grid-template-columns: 1fr; }
  .progress-chart-card { padding: .8rem; }
}

/* v1.4.41: keep transient timetable operation status on the Generated line so showing a message
   does not insert a new block above the timetable content. */
.timetable-page .page-heading-row > div:first-child { flex: 1 1 auto; min-width: 0; }
/* Timetable header refinement: align the bottom of Edit inputs / Regenerate with
   the bottom of the Generated status line instead of the top of the heading block. */
.timetable-page .page-actions { align-self: flex-end; }
.timetable-generated-status-row {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  min-width: 0;
  min-height: 1.35rem;
}
.timetable-generated-status-row .page-subtitle { flex: 0 0 auto; }
.timetable-inline-status {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
}
.timetable-inline-status.is-success { color: var(--green); }
.timetable-inline-status.is-error { color: #9c241f; }

@media (max-width: 760px) {
  .timetable-generated-status-row { align-items: flex-start; gap: .45rem; flex-wrap: wrap; }
  .timetable-inline-status { flex-basis: 100%; max-width: 100%; white-space: normal; }
}

/* v1.4.47 manual extra/cramming-study creation. */
.manual-study-subject-panel {
  /* JS positions this dialog immediately to the right of the day column that was
     double-clicked. Keep it hidden for the first render so the old centred position
     never flashes over the session anchor before that placement is calculated. */
  visibility: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 24px));
}
.manual-study-subject-panel .select-input { width: 100%; margin-top: .25rem; }
.manual-study-subject-label { display: block; margin-top: .55rem; color: #344054; font-size: .75rem; font-weight: 750; }
.calendar-slot-cell.manual-study-anchor {
  outline: 2px solid var(--blue-strong);
  outline-offset: -2px;
  background: #eef6ff !important;
  z-index: 2;
}
body.manual-study-draw-armed .calendar-slot-cell.manual-study-anchor { cursor: ns-resize; }
body.manual-study-drawing, body.manual-study-drawing * { cursor: ns-resize !important; }
.manual-study-draw-preview {
  position: relative;
  z-index: 9;
  pointer-events: none;
  min-height: 0;
  padding: .18rem .25rem;
  overflow: hidden;
  border: 2px dashed var(--subject-border, #4f78a8);
  border-radius: 5px;
  background: var(--subject-bg, #e8f1ff);
  color: #23364d;
  font-size: .7rem;
  line-height: 1.15;
}
.manual-study-draw-preview strong,
.manual-study-draw-preview span { display: block; }
.manual-study-draw-preview.is-invalid {
  border-color: #d92d20 !important;
  background: rgba(254,243,242,.92) !important;
  color: #9c241f;
}

@media (max-width: 760px) {
}


/* v1.4.48 contextual timetable action warnings/errors. */
.timetable-action-notice {
  position: fixed;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .72rem .8rem;
  margin: 0;
  border: 1px solid #e3a29d;
  background: #fff7f6;
  color: #8f211c;
  box-shadow: 0 16px 38px rgba(16,47,80,.20);
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.35;
}
.timetable-action-notice.is-warning { border-color: #e2b45c; background: #fff8e8; color: #7a4e00; }
.timetable-action-notice > span { flex: 1 1 auto; min-width: 0; }
.action-notice-close {
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
}
.action-notice-close:hover { background: rgba(16,47,80,.08); }

/* Manual placement purpose is chosen explicitly before drawing. Assignment remains a
   StudySession owned by its subject; this control only changes StudySessionPurpose. */
.manual-study-purpose-options {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  margin-top: .65rem;
}
.manual-study-purpose-option {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: #344054;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.manual-study-purpose-option input[type="radio"] {
  width: .92rem;
  height: .92rem;
  margin: 0;
  accent-color: var(--blue-strong);
}

/* v1.4.70 manual placement: optional explicit weekly-pattern intent. */
.manual-study-pattern-actions {
  margin-top: .65rem;
}

/* v1.4.72 manual placement: selectable pattern option and projected future conflicts. */
.manual-study-pattern-option {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 2rem;
  padding: .38rem .68rem;
  border: 1px solid #98a2b3;
  border-radius: 7px;
  background: #fff;
  color: #344054;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}
.manual-study-pattern-option:hover:not(:disabled) { background: #f5f9ff; border-color: #6d9ed8; }
.manual-study-pattern-option:disabled { opacity: .46; cursor: default; background: #f2f4f7; }
.manual-study-pattern-option-indicator {
  width: .82rem;
  height: .82rem;
  flex: 0 0 .82rem;
  border: 1.5px solid #667085;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}
.manual-study-pattern-option.is-selected {
  border-color: var(--blue-strong);
  background: #eef6ff;
  color: #184f91;
}
.manual-study-pattern-option.is-selected .manual-study-pattern-option-indicator {
  border-color: var(--blue-strong);
  background: var(--blue-strong);
  box-shadow: inset 0 0 0 2.5px #fff;
}
.manual-pattern-conflict-warning {
  z-index: 7;
  margin-left: 3px;
  margin-right: 3px;
}

.optional-label { color: var(--muted); font-weight: 500; }
.additional-exam-availability-heading { margin-top: 1.35rem; align-items: flex-end; }
.additional-exam-availability-heading > div { flex: 1 1 0; min-width: 0; max-width: calc(100% - 155px); }
.additional-exam-availability-heading small { display: block; margin-top: .18rem; line-height: 1.25; }
.additional-exam-availability-heading .soft-button { flex: 0 0 auto; white-space: nowrap; }
.exam-availability-summary { background: var(--blue-soft); color: var(--navy); border-color: #cfe0f6; }

@media (max-width: 760px) {
  .additional-exam-availability-heading { align-items: stretch; flex-direction: column; }
  .additional-exam-availability-heading > div { max-width: 100%; }
  .additional-exam-availability-heading .soft-button { align-self: flex-end; }
}

/* Timetable week-toolbar actions remain compact on narrow screens while preserving week navigation. */
@media (max-width: 760px) {
  .calendar-toolbar { padding: .55rem .6rem; gap: .35rem; }
  .calendar-toolbar-detail-row { grid-template-columns: max-content max-content; justify-content: center; gap: .45rem; }
  .calendar-template-action { grid-column: 1; justify-self: center; margin-right: 0; }
  .calendar-toolbar-detail-row > span { display: none; }
  .calendar-toolbar-actions { grid-column: 2; justify-self: center; }
  .calendar-toolbar-copy strong { font-size: .78rem; line-height: 1.15; }
  .calendar-toolbar .calendar-toolbar-action { min-width: 64px; padding: .19rem .3rem; font-size: .61rem; }
}

/* Step 1 template-support infrastructure: timetable study-period Copy/Paste. A pasted copy is
   provisional until the student clicks a legal calendar position, so no overlapping/invalid row
   is ever persisted merely because Ctrl+V was pressed. */
.study-purpose-context-action:disabled {
  opacity: .42;
  cursor: not-allowed;
  background: transparent;
}
body.study-copy-paste-active,
body.study-copy-paste-active * {
  cursor: grab !important;
}
.study-copy-paste-ghost {
  z-index: 5100 !important;
  margin: 0 !important;
  opacity: .94 !important;
  box-sizing: border-box;
  box-shadow: 0 12px 30px rgba(16,47,80,.26) !important;
  pointer-events: none !important;
  user-select: none !important;
}
.study-copy-paste-preview {
  z-index: 35;
}
.study-copy-paste-final {
  z-index: 30;
}


/* Subjects & exams: compact, fully visible seven-column desktop table.
   A selected name/date/exam gets a wider temporary editor, without widening the
   permanently displayed columns or hiding Behind/ahead off-screen. */
.desktop-subject-table .subject-inline-table {
  width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse;
  font-size: .81rem;
}
.desktop-subject-table .subject-inline-table th,
.desktop-subject-table .subject-inline-table td {
  padding: .3rem .18rem; overflow-wrap: normal;
}
.desktop-subject-table .subject-inline-table th { font-size: .71rem; line-height: 1.18; }
.desktop-subject-table .subject-inline-table th:nth-child(1),
.desktop-subject-table .subject-inline-table td:nth-child(1) { width: 25%; }
.desktop-subject-table .subject-inline-table th:nth-child(2),
.desktop-subject-table .subject-inline-table td:nth-child(2) { width: 14%; }
.desktop-subject-table .subject-inline-table th:nth-child(3),
.desktop-subject-table .subject-inline-table td:nth-child(3) { width: 20%; }
.desktop-subject-table .subject-inline-table th:nth-child(4),
.desktop-subject-table .subject-inline-table td:nth-child(4) { width: 9%; text-align: center; }
.desktop-subject-table .subject-inline-table th:nth-child(5),
.desktop-subject-table .subject-inline-table td:nth-child(5) { width: 11%; text-align: center; }
.desktop-subject-table .subject-inline-table th:nth-child(6),
.desktop-subject-table .subject-inline-table td:nth-child(6) {
  width: 18%; text-align: right; padding-left: .15rem; padding-right: calc(.15rem + 2ch);
}
/* Keep the Behind/ahead value near the adjacent Drop icon rather than at the
   left edge of its relatively generous column. */
.desktop-subject-table .subject-inline-table td:nth-child(6) .subject-inline-trigger {
  display: flex; align-items: center; justify-content: flex-end; padding-right: .12rem;
}
.desktop-subject-table .subject-inline-table th:nth-child(7),
.desktop-subject-table .subject-inline-table td:nth-child(7) { width: 3%; text-align: center; padding: .1rem 0; }
.desktop-subject-table .subject-action-icon { width: 20px; height: 30px; font-size: 1rem; }
.subject-inline-hint { color: var(--muted); font-size: .79rem; margin: -.15rem 0 .55rem; }
.subject-inline-hint strong { color: var(--blue-strong); margin-left: .4rem; }
.subject-inline-trigger {
  display: block; width: 100%; min-width: 0; min-height: 30px;
  padding: .24rem .18rem; border: 1px solid transparent;
  border-radius: 7px; background: transparent;
  color: inherit; text-align: left; font: inherit; line-height: 1.25;
  cursor: pointer;
}
.subject-inline-trigger:hover:not(:disabled) { border-color: #bed8f7; background: #eef6ff; }
.subject-inline-trigger:focus-visible { outline: 2px solid var(--blue-strong); outline-offset: 1px; }
.subject-inline-trigger:disabled { color: inherit; opacity: 1; cursor: default; }
.subject-inline-trigger small { display: block; margin-top: .08rem; color: var(--muted); font-size: .69rem; line-height: 1.2; }
.desktop-subject-table .subject-name-trigger strong {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  max-width: 100%; font-weight: 700;
}
.desktop-subject-table .subject-study-start-cell .subject-inline-trigger {
  white-space: nowrap; font-size: .76rem; letter-spacing: -.015em;
}
.desktop-subject-table .subject-exam-cell .subject-inline-trigger { white-space: nowrap; font-size: .78rem; }
.desktop-subject-table .subject-exam-cell .subject-inline-trigger small { white-space: nowrap; }
.subject-rating-cell .subject-rating-trigger { display: inline-flex; justify-content: center; align-items: center; width: auto; }
.desktop-subject-table .compact-value-box { min-width: 30px; padding: .2rem .24rem; font-size: .84rem; }
.desktop-subject-table .progress-pill {
  max-width: 100%; padding: .25rem .25rem; font-size: .71rem;
  white-space: nowrap; letter-spacing: -.01em;
}
.subject-editing-row { background: #f6faff; }
.subject-inline-edit-cell { background: #eef6ff; vertical-align: top !important; }
.desktop-subject-table .subject-inline-table .subject-inline-edit-cell {
  position: relative; z-index: 4; overflow: visible; padding: .2rem;
}
.subject-inline-edit-cell .text-input, .subject-inline-edit-cell .select-input,
.subject-mobile-editor .text-input, .subject-mobile-editor .select-input {
  min-width: 0; width: 100%; min-height: 36px; padding: .35rem .42rem; font-size: .82rem;
}
.subject-inline-controls { display: flex; flex-direction: column; align-items: stretch; gap: .24rem; min-width: 0; }
.subject-inline-sublabel { color: var(--muted); font-size: .73rem; font-weight: 700; line-height: 1.2; }
.desktop-subject-table .subject-inline-popover {
  position: relative; z-index: 5; max-width: calc(100vw - 3rem);
  padding: .52rem; border: 1px solid #bed8f7; border-radius: 8px;
  background: #fff; box-shadow: 0 8px 20px rgba(16,47,80,.16);
}
.desktop-subject-table .subject-inline-name-editor { width: 314px; }
.desktop-subject-table .subject-inline-date-editor { width: 128px; }
.desktop-subject-table .subject-inline-exam-editor { width: 166px; }
.desktop-subject-table .subject-inline-table .subject-inline-rating {
  width: 52px; max-width: 52px; min-width: 52px; padding: .28rem .2rem;
  text-align: center; font-size: .83rem;
}
.subject-inline-rating { width: 100%; max-width: 64px; text-align: center; }
.subject-inline-progress { width: 100%; min-width: 0; }
.desktop-subject-table .subject-inline-table .subject-inline-progress {
  position: relative; z-index: 5; width: 115px; max-width: 100%;
  margin-left: auto; margin-right: 0; background: white; font-size: .75rem; padding: .2rem .13rem;
}
.subject-inline-duration { display: flex; flex-wrap: wrap; gap: .4rem; }
.subject-inline-duration label { display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); font-size: .72rem; }
.subject-inline-duration input.text-input { width: 52px; min-width: 52px; padding: .28rem; text-align: center; }
.subject-inline-notice-row td { padding: .3rem .65rem .55rem !important; background: #f6faff; }
.subject-inline-notice { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: #8d231f; }
.subject-inline-notice > span { flex: 1 1 280px; }
.subject-inline-notice .secondary-button { flex: 0 0 auto; min-height: 34px; }
.subject-adding-row .subject-inline-edit-cell { vertical-align: top; }
/* New subjects use an in-table full-width insertion row, not a separate form. */
.subject-add-editor-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem; align-items: end; padding: .4rem;
}
.subject-add-editor-grid > label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.subject-add-editor-grid > label > .text-input,
.subject-add-editor-grid > label > .select-input { min-width: 0; width: 100%; }
.subject-add-editor-grid .subject-add-name-field { grid-column: span 2; }
.subject-add-editor-grid .subject-inline-sublabel { display: block; }
.subject-add-editor-grid .subject-inline-rating { max-width: 60px; }
.subject-add-close {
  display: inline-block; align-self: end; border: 0; background: transparent;
  padding: .45rem .25rem; color: var(--muted); text-align: left;
  font-size: .74rem; cursor: pointer;
}
.subject-add-close:hover { color: var(--red); }
/* Keep date text and native calendar icon adjacent in narrow desktop editors.
   Exam date is especially compact; do not shrink the editable name popover. */
.desktop-subject-table .subject-inline-date-editor input[type="date"],
.desktop-subject-table .subject-inline-exam-editor input[type="date"] {
  display: block; box-sizing: border-box; width: 100%; min-width: 0;
  padding: .32rem .14rem .32rem .25rem; font-size: .76rem;
}
/* The exam popover still has room for time and duration, but the date picker
   itself should be tight to the date text rather than spanning that whole width. */
.desktop-subject-table .subject-inline-exam-editor input[type="date"],
.desktop-subject-table .subject-inline-date-editor input[type="date"] {
  width: 112px; max-width: 100%;
}
.desktop-subject-table .subject-inline-exam-editor input[type="time"] {
  display: block; box-sizing: border-box; width: 100%; min-width: 0;
  padding: .32rem .18rem; font-size: .78rem;
}
.desktop-subject-table .subject-inline-date-editor input[type="date"]::-webkit-calendar-picker-indicator,
.desktop-subject-table .subject-inline-exam-editor input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0; padding: 0; width: 15px; height: 15px; flex: 0 0 15px;
}
/* Native picker icon must remain visible on the expanded date controls. */
.subject-inline-edit-cell input[type="date"],
.subject-mobile-editor input[type="date"],
.subject-card input[type="date"] { color-scheme: light; }
.subject-inline-edit-cell input[type="date"]::-webkit-calendar-picker-indicator,
.subject-mobile-editor input[type="date"]::-webkit-calendar-picker-indicator,
.subject-card input[type="date"]::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; }
.subject-card .subject-inline-trigger { width: 100%; }
.subject-mobile-row { display: flex; flex-direction: column; align-items: stretch; gap: .18rem; min-width: 0; padding: .2rem 0; }
.subject-mobile-label { color: var(--muted); font-weight: 700; font-size: .73rem; }
.subject-mobile-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .35rem .65rem; }
.subject-mobile-progress { grid-column: 1 / -1; }
.subject-mobile-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.subject-mobile-notice { padding: .5rem; margin-top: .35rem; border-radius: 7px; background: #fff1ef; }
.subject-add-card { background: #f6faff; border-color: #bed8f7 !important; }
.subject-add-card .subject-inline-controls { gap: .35rem; }
@media (max-width: 760px) {
  .subject-card > div:first-child { flex-direction: column; justify-content: flex-start; }
  .subject-card .subject-inline-controls .text-input, .subject-card .subject-inline-controls .select-input,
  .subject-card .subject-mobile-row > .text-input, .subject-card .subject-mobile-row > .select-input { min-height: 40px; }
}
/* Between small-desktop and wide-desktop widths, stack Availability below Subjects
   so even the last Behind/ahead column stays visible without horizontal scrolling. */
@media (min-width: 1101px) and (max-width: 1319px) {
  .setup-page .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-page .study-settings-card { position: static; width: 100%; }
}

/* Plan Setup Availability: compact in-row editable day, start time and finish time.
   Normal and Additional Exam rows use the same structure; only Delete stays at right. */
.availability-inline-hint {
  margin: .45rem 0 .5rem;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.3;
}
.availability-row {
  gap: .32rem;
  padding: .27rem .45rem;
}
.availability-row > div.availability-inline-values {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(78px, 1.05fr) minmax(98px, 1fr) auto minmax(98px, 1fr);
  align-items: center;
  column-gap: .22rem;
  width: 100%;
  min-width: 0;
}
.availability-inline-values > div { min-width: 0; }
.availability-inline-to {
  display: block;
  font-size: .77rem;
  text-align: center;
  color: var(--muted);
  white-space: nowrap;
}
.availability-inline-trigger {
  display: inline-block;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: .33rem .08rem;
  color: var(--navy);
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: .77rem;
  line-height: 1.1;
  cursor: text;
}
.availability-day-trigger { font-weight: 750; }
/* Both time labels occupy equally sized slots. Center their displayed values
   so the intervening “to” sits midway between the start and finish times. */
.availability-time-trigger { color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.availability-inline-trigger:hover:not(:disabled) { background: #edf5ff; color: var(--blue-strong); }
.availability-inline-trigger:disabled { opacity: 1; cursor: default; }
.availability-inline-trigger:focus-visible {
  outline: 2px solid var(--blue-strong);
  outline-offset: 2px;
}
.availability-inline-editor { min-width: 0; width: 100%; }
.availability-inline-editor .text-input,
.availability-inline-editor .select-input {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 35px;
  min-height: 35px;
  padding: .26rem .18rem;
  font-size: .77rem;
  color-scheme: light;
}
.availability-inline-editor input[type="time"]::-webkit-calendar-picker-indicator {
  margin: 0; padding: 0; cursor: pointer;
}
.availability-row .availability-row-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .05rem;
}
.availability-row-actions .availability-delete-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 27px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  font-size: 1.1rem;
}
.availability-row-shell.is-editing .availability-row { border-color: #9fc2ee; }
.availability-inline-new-row .availability-row { background: #f6faff; }
.availability-row-shell > .availability-editor-validation { margin: .32rem 0 .3rem; }
@media (max-width: 450px) {
  .availability-row { flex-wrap: wrap; }
  .availability-row > div.availability-inline-values {
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    row-gap: .13rem;
  }
  .availability-inline-values .availability-day-slot { grid-column: 1 / -1; }
  .availability-inline-values .availability-start-slot { grid-column: 1; }
  .availability-inline-values .availability-inline-to { grid-column: 2; }
  .availability-inline-values .availability-end-slot { grid-column: 3; }
  .availability-row .availability-row-actions { margin-left: auto; }
}

/* Schedule identity: the year is supplied by the student's computer clock. */
.schedule-identity-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .8rem; }
.schedule-full-name { margin: .5rem 0 1rem; overflow-wrap: anywhere; }
@media (max-width: 600px) { .schedule-identity-fields { grid-template-columns: 1fr; } }

/* Input actions share a button height; the desktop layout places Edit Inputs before Export. */
.schedule-input-actions { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
.calendar-toolbar .schedule-input-actions .calendar-toolbar-action { height: 24px; min-height: 24px; box-sizing: border-box; justify-content: center; }

/* Both toolbar rows share a grid so headings and actions align without position offsets. */
.schedule-toolbar {
  --schedule-toolbar-pair-gap: .35rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: minmax(24px, auto) minmax(24px, auto);
  align-items: center;
  column-gap: .55rem;
  row-gap: .3rem;
}
.schedule-toolbar > strong { grid-column: 2; grid-row: 1; }
.schedule-toolbar .calendar-toolbar-detail-row,
.schedule-toolbar .calendar-toolbar-actions,
.schedule-toolbar .schedule-input-actions { display: contents; }
.schedule-toolbar .calendar-template-action { grid-column: 1; grid-row: 2; margin-right: 0; justify-self: end; }
.schedule-toolbar .calendar-toolbar-instruction {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  max-width: 48ch;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.25;
}
.schedule-toolbar .schedule-input-export { grid-column: 3; grid-row: 1; }
.schedule-toolbar .schedule-input-actions > a { grid-column: 3; grid-row: 2; }
.schedule-toolbar .regenerate-button { grid-column: 4; grid-row: 2; }
@media (max-width: 760px) {
  .schedule-toolbar { grid-template-columns: auto auto auto; justify-content: center; gap: .3rem; }
  .schedule-toolbar > strong { grid-column: 1; grid-row: 1; }
  .schedule-toolbar .schedule-input-export { grid-column: 2; grid-row: 1; }
  .schedule-toolbar .schedule-input-actions > a { grid-column: 2; grid-row: 2; }
  .schedule-toolbar .regenerate-button { grid-column: 3; grid-row: 2; }
}


/* Schedule Manager: keep expired rows red, including the selected row. */
.schedule-manager-page { max-width: 1180px; }
.schedule-manager-page .page-heading-row > div { min-width: 0; }
.schedule-manager-page .page-heading-row > button { flex-shrink: 0; }
.schedule-manager-list {
  display: flex; flex-direction: column; gap: .15rem; width: 100%; min-width: 0;
  font-size: .9rem; max-height: 30rem; overflow-y: auto;
  border: 1px solid var(--line-dark); border-radius: 9px;
  background: var(--surface); color: var(--text); padding: .35rem;
}
.schedule-manager-option { flex: 0 0 auto; display: flex; flex-direction: column; gap: .1rem; width: 100%; padding: .4rem .65rem; border: 1px solid transparent; border-radius: 6px; background: var(--surface); color: var(--text); text-align: left; overflow-wrap: anywhere; }
.schedule-manager-option:hover { background: #f4f7fb; }
.schedule-manager-option[aria-selected="true"] { border-color: var(--blue); background: var(--blue-soft); }
.schedule-manager-option.is-expired { background: var(--red-soft); color: #9c241f; }
.schedule-manager-option.is-expired:hover, .schedule-manager-option.is-expired[aria-selected="true"] { border-color: var(--red); background: #fbd3cf; }
.schedule-manager-option:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.schedule-manager-option-name { font-weight: 700; }
.schedule-manager-option-detail { font-size: .76rem; }
.schedule-expiry-check-error { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem; }
@media (max-width: 760px) {
  .schedule-manager-list { font-size: .85rem; }
  .mobile-bottom-nav a { padding-inline: .1rem; min-width: 0; }
}

/* Schedule Manager file selection and context actions. */
.schedule-manager-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.schedule-menu-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; z-index: 180; cursor: default; }
.schedule-context-menu { position: fixed; z-index: 181; min-width: 210px; max-width: min(360px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; padding: .5rem; background: white; border: 1px solid #c5cfda; border-radius: 10px; box-shadow: 0 8px 28px #182e452b; }
.schedule-context-menu p { margin: .35rem .55rem .65rem; font-weight: 650; overflow-wrap: anywhere; }
.schedule-context-menu button { display: block; width: 100%; text-align: left; padding: .65rem .75rem; border: 0; border-radius: 6px; background: transparent; color: #183153; cursor: pointer; }
.schedule-context-menu button:hover, .schedule-context-menu button:focus-visible { background: #edf3fa; outline: 2px solid #3c628c; outline-offset: -2px; }
.schedule-context-menu button:disabled { opacity: .45; cursor: not-allowed; }
.schedule-context-menu .schedule-delete-action { color: #a22121; }

/* The exported schedule picker sits below the list and loads on selection. */
.schedule-import-card { margin-top: 1rem; }
.schedule-import-card > label { display: block; margin-bottom: .45rem; font-weight: 600; }
.schedule-import-row { display: flex; min-width: 0; }
.schedule-import-file { width: 100%; min-width: 0; padding: .5rem; border: 1px solid var(--line-dark); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.schedule-import-file::file-selector-button { margin-right: .75rem; padding: .45rem .85rem; border: 1px solid var(--line-dark); border-radius: 5px; color: var(--text); background: #edf3fa; font: inherit; cursor: pointer; }
.schedule-import-file:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.schedule-import-file:disabled { opacity: .6; }
.schedule-import-card > p { margin: .65rem 0 0; color: var(--muted); }

/* Temporary exported timetables have no editing gestures. */
.is-exported-schedule .calendar-session,
.is-exported-schedule .timetable-agenda-item,
.is-exported-schedule .session-table tr { cursor: default; }

/* Completed history is selectable for completion/correction, but never draggable. */
.calendar-session.study-event.completed,
.calendar-session.study-event.completed:active { cursor: pointer; }
.calendar-session.study-event.completed > .session-resize-handle { display: none; }
.session-correction-backdrop {
    position: fixed; inset: 0; z-index: 2200; background: rgba(16, 24, 40, .35);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.session-correction-dialog { width: min(36rem, 100%); max-height: 90vh; overflow-y: auto; }
.session-correction-dialog h2 { margin-top: 0; }
.session-correction-dialog fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.session-correction-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.session-correction-fields label { display: flex; flex-direction: column; gap: .25rem; }
.session-correction-fields input, .session-correction-fields select { min-width: 0; width: 100%; }
.session-correction-completed { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.session-correction-completed input { width: auto; }
.session-correction-note { font-size: .85rem; }
.session-correction-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.session-correction-delete { color: #a32626; }
@media (max-width: 420px) { .session-correction-fields { grid-template-columns: 1fr; } }

.is-finished-schedule .calendar-session.study-event,
.is-finished-schedule .calendar-session.study-event:active { cursor: pointer; }
.is-finished-schedule .calendar-session.study-event > .session-resize-handle { display: none; }
.finished-schedule-note { margin: .5rem 0; padding: .6rem .8rem; border-radius: 6px; background: #edf2f8; color: #344054; font-size: .85rem; }

/* Instructions remain beside Create Template; the modal uses the browser's focus trap. */
.schedule-toolbar .calendar-template-actions {
  grid-column: 1; grid-row: 2; justify-self: end;
  display: flex; align-items: center; gap: var(--schedule-toolbar-pair-gap);
}
.timetable-instructions-dialog {
  width: min(46rem, calc(100vw - 2rem)); max-width: none;
  max-height: 85vh; max-height: 85dvh; padding: 0;
  border: 1px solid var(--line-dark); border-radius: 12px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 18px 60px #13233b40; text-align: left;
}
.timetable-instructions-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.timetable-instructions-dialog::backdrop { background: #14243b66; }
.timetable-instructions-dialog > header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.timetable-instructions-dialog h2 { margin: 0; }
.timetable-instructions-body { overflow-y: auto; overscroll-behavior: contain; padding: .25rem 1.25rem; font-size: .9rem; line-height: 1.5; }
.timetable-instructions-body p { margin: .85rem 0; }
.timetable-instructions-actions { display: flex; justify-content: flex-end; margin: 0; padding: .75rem 1.25rem; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .schedule-toolbar .calendar-template-actions { flex-direction: column; align-items: stretch; justify-self: stretch; }
}


/* Compact Schedule Setup / Schedule presentation, approved 26 October 2026.
   Control shapes and border radii are retained; desktop calendar density is set below. */
.timetable-metadata-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; min-width: 0; }
.timetable-metadata-row .schedule-full-name,
.timetable-metadata-row .timetable-generation-stamp { flex: 0 1 auto; margin: 0; max-width: 100%; }
.timetable-metadata-row .timetable-guidance { flex: 1 1 32rem; margin: 0; }
@media (max-width: 760px) {
  .timetable-metadata-row > p { flex-basis: 100%; }
}
@media (min-width: 1101px) {
  .app-layout { font-size: 13px; line-height: 1.35; }
  .app-layout .global-action-bar { min-height: 34px; padding: 1px 24px; }
  .app-layout .global-undo-button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
  .app-layout .main-content { min-height: calc(100vh - 34px); }
  .app-layout .page-shell { padding: 10px 24px 10px; }
  .app-layout h1 { font-size: 26px; margin-bottom: 4px; line-height: 1.1; }
  .app-layout h2 { font-size: 18px; margin-bottom: 6px; }
  .app-layout h3 { font-size: 15px; }
  .app-layout .eyebrow { margin-bottom: 4px; }
  .app-layout .page-heading-row { margin-bottom: 10px; }
  .app-layout .page-subtitle { font-size: 13px; line-height: 1.35; }
  .app-layout .sidebar { padding-top: 22px; }
  .app-layout .sidebar-brand { padding-bottom: 24px; }
  .app-layout .side-nav { gap: 5px; }
  .app-layout .side-nav a { padding: 10px 12px; font-size: 13px; }
  .app-layout .setup-page { --setup-field-gap: 10px; max-width: 1460px; width: min(1460px,100%); }
  .app-layout .setup-grid { gap: 12px; }
  .app-layout .setup-flow-status-row { margin-bottom: 10px; }
  .app-layout .setup-steps { padding: 7px 12px; font-size: 13px; column-gap: 1.4rem; }
  .app-layout .field-group { gap: 3px; }
  .app-layout .field-group label { font-size: 13px; line-height: 1.2; }
  .app-layout .text-input,
  .app-layout .select-input { min-height: 34px; padding: 5px 9px; font-size: 13px; line-height: 1.35; }
  .app-layout .schedule-identity-fields { gap: var(--setup-field-gap); }
  .app-layout .schedule-full-name { margin: 5px 0 10px; font-size: 13px; }
  /* Transfer 20px from Student type to Email, retaining the previous Name width. */
  .app-layout .profile-grid { grid-template-columns: 180px minmax(0, calc((100% - 200px - 2 * var(--setup-field-gap)) / 2.25)) minmax(0, 1fr); gap: var(--setup-field-gap); margin-bottom: 9px; }
  .app-layout .profile-grid .student-type-field { width: 100%; }
  .app-layout .preferred-study-time-input { width: min(100%, 170px); padding-left: 5px; padding-right: 5px; }
  .app-layout .profile-grid small { font-size: 12px; }
  .app-layout .subjects-heading { padding-top: 8px; margin-top: 3px; }
  .app-layout .section-heading { gap: 8px; margin-bottom: 7px; }
  .app-layout .section-heading p { font-size: 13px; }
  .app-layout .subject-inline-hint { margin: 0 0 5px; font-size: 12px; line-height: 1.3; }
  .app-layout .soft-button { padding: 5px 9px; font-size: 13px; }
  .app-layout .desktop-subject-table .subject-inline-table { font-size: 13px; }
  .app-layout .desktop-subject-table .subject-inline-table th { font-size: 12px; padding: 6px 3px; }
  .app-layout .desktop-subject-table .subject-inline-table td { padding-top: 4px; padding-bottom: 4px; }
  .app-layout .subject-inline-trigger { min-height: 28px; padding: 2px; }
  .app-layout .desktop-subject-table .subject-study-start-cell .subject-inline-trigger,
  .app-layout .desktop-subject-table .subject-exam-cell .subject-inline-trigger { font-size: 13px; }
  .app-layout .subject-inline-trigger small { font-size: 12px; }
  .app-layout .study-hours-max-hint { font-size: 13px; }
  .app-layout .generate-button { min-height: 34px; padding: 6px 10px; font-size: 13px; }
  .app-layout .compact-heading { margin-top: 10px; margin-bottom: 5px; }
  .app-layout .availability-inline-hint { font-size: 12px; margin: 4px 0 5px; }
  .app-layout .availability-inline-to { font-size: 13px; }
  .app-layout .availability-delete-icon { min-height: 24px; height: 24px; }
  .app-layout .timetable-page .schedule-full-name { margin: 3px 0; }
  .app-layout .timetable-generated-status-row { min-height: 18px; }
  .app-layout .timetable-generated-status-row .page-subtitle { font-size: 12px; }
  .app-layout .timetable-summary-grid { margin-top: 7px; margin-bottom: 8px; gap: 12px; }
  .app-layout .summary-card span { font-size: 13px; }
  .app-layout .summary-card small { font-size: 12px; }
  .app-layout .timetable-layout { gap: 12px; }
  .app-layout .calendar-toolbar .calendar-toolbar-action { font-size: 12px; padding: 3px 7px; }
  .app-layout .calendar-toolbar-detail-row > span { font-size: 12px; }
  .app-layout .schedule-toolbar { gap: 3px 7px; }
  .app-layout .calendar-time-label,
  .app-layout .calendar-axis-range-handle { font-size: calc(11px - 1pt); color: #536173; }
  .app-layout .calendar-session { padding: 0 3px; }
  .app-layout .calendar-session-time { font-size: calc(12px - 2pt) !important; line-height: 1 !important; }
  .app-layout .calendar-session-subject-line { font-size: calc(12px - 2pt); align-items: center; }
  .app-layout .calendar-session-subject-line span { font-size: calc(12px - 2pt); line-height: 1; }
  .app-layout .calendar-session-subject-line small { font-size: 11px; line-height: 1; }
  .app-layout .allocation-card { padding: 12px; }
  .app-layout .allocation-card h2 { font-size: 18px; }
  .app-layout .allocation-card .card-muted { font-size: 13px; line-height: 1.35; margin-bottom: 7px; }
  .app-layout .allocation-list { margin: 6px 0; }
  .app-layout .allocation-row { padding: 4px 0; gap: 6px; }
  .app-layout .allocation-row strong,
  .app-layout .allocation-duration { font-size: 13px; }
  .app-layout .allocation-row small { font-size: 12px; }
  .app-layout .allocation-total-row { padding-top: 7px; }
  .app-layout .fit-banner { padding: 8px; font-size: 12px; line-height: 1.35; }
  .app-layout .availability-primary-settings-grid { row-gap: 6px; column-gap: 10px; margin-bottom: 6px; }
  .app-layout .study-settings-card .text-input,
  .app-layout .study-settings-card .select-input { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
  .app-layout .weekly-hours-group > label,
  .app-layout .exam-study-maximum-group > label { min-height: 28px; }
  .app-layout .availability-row { padding: 1px 7px; padding-top: 0; padding-bottom: 0; }
  .app-layout .availability-inline-trigger { padding: 4px 1px; font-size: 13px; line-height: 1.15; padding-top: 3px; padding-bottom: 3px; }
  .app-layout .availability-row-actions .availability-delete-icon { min-height: 22px; height: 22px; }
  .app-layout .setup-main-card,
  .app-layout .study-settings-card { padding: 10px; }
  .app-layout .availability-list { gap: 2px; }
  .app-layout .availability-summary { margin: 7px 0; padding: 5px 8px; gap: 1px; font-size: 13px; line-height: 1.25; margin-top: 5px; margin-bottom: 5px; }
  .app-layout .additional-exam-availability-heading { margin-top: 7px; display: grid; grid-template-columns: 1fr auto; gap: 3px 7px; align-items: center; }
  .app-layout .additional-exam-availability-heading > div { display: contents; }
  .app-layout .additional-exam-availability-heading h3 { grid-column: 1; grid-row: 1; }
  .app-layout .additional-exam-availability-heading small { font-size: 12px; line-height: 1.25; grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .app-layout .additional-exam-availability-heading .soft-button { grid-column: 2; grid-row: 1; }
  .app-layout .timetable-page .page-heading-row { margin-bottom: 3px; }
  .app-layout .summary-card { padding: 4px 12px; gap: 0; }
  .app-layout .summary-card span,
  .app-layout .summary-card small { line-height: 1.15; }
  .app-layout .summary-card strong { font-size: 18px; line-height: 1.15; }
  .app-layout .calendar-toolbar { padding: 6px 10px; gap: 8px; padding-top: 3px; padding-bottom: 3px; }
  /* Reclaim date-column space for names while keeping Difficulty beside the exam details. */
  .app-layout .desktop-subject-table .subject-inline-table th:nth-child(1),
  .app-layout .desktop-subject-table .subject-inline-table td:nth-child(1) { width: 33.65%; }
  .app-layout .desktop-subject-table .subject-inline-table th:nth-child(2),
  .app-layout .desktop-subject-table .subject-inline-table td:nth-child(2) { width: 11%; }
  .app-layout .desktop-subject-table .subject-inline-table th:nth-child(3),
  .app-layout .desktop-subject-table .subject-inline-table td:nth-child(3) { width: 20.85%; }
  .app-layout .desktop-subject-table .subject-inline-table th:nth-child(4),
  .app-layout .desktop-subject-table .subject-inline-table td:nth-child(4) { width: 8.5%; }
  .app-layout .desktop-subject-table .subject-inline-table th:nth-child(5),
  .app-layout .desktop-subject-table .subject-inline-table td:nth-child(5) { width: 10.5%; }
  .app-layout .desktop-subject-table .subject-inline-table th:nth-child(6),
  .app-layout .desktop-subject-table .subject-inline-table td:nth-child(6) { width: 12.5%; padding-left: 2px; padding-right: 2px; }
  .app-layout .desktop-subject-table .subject-inline-table th:nth-child(7),
  .app-layout .desktop-subject-table .subject-inline-table td:nth-child(7) { width: 3%; }
  .app-layout .desktop-subject-table .subject-exam-summary { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .app-layout .desktop-subject-table .subject-exam-summary small { display: inline; margin-top: 0; }
  .app-layout .desktop-subject-table .compact-value-box { font-size: 13px; padding: 2px 4px; }
  .app-layout .timetable-metadata-row .schedule-full-name,
  .app-layout .timetable-metadata-row .page-subtitle { margin: 0; }
  .app-layout .timetable-metadata-row .timetable-generation-stamp { font-size: 12px; }
}

/* Compact summaries read as a single value-first phrase and wrap on narrow screens. */
.app-layout .summary-card.inline-summary-card { flex-direction: row; flex-wrap: wrap; align-content: center; align-items: baseline; column-gap: 4px; row-gap: 2px; }
.app-layout .summary-card.inline-summary-card strong,
.app-layout .summary-card.inline-summary-card span { font-size: 13px; line-height: 1.25; }
.app-layout .summary-card.inline-summary-card strong { font-weight: 750; }
.app-layout .summary-card.inline-summary-card span { font-weight: 500; }
.app-layout .calendar-day-head { flex-direction: row; gap: 6px; }
.app-layout .calendar-day-head span,
.app-layout .calendar-day-head strong { font-size: 13px; line-height: 1.2; }
.app-layout .account-email-warning { margin: 6px 0; padding: 6px 8px; }
@media (min-width: 1101px) {
  /* Saved subject rows are tighter; expanded inline editors keep their input height. */
  .app-layout .desktop-subject-table .subject-inline-table td { padding-top: 1px; padding-bottom: 1px; }
  .app-layout .desktop-subject-table .subject-inline-trigger { min-height: 24px; padding-top: 1px; padding-bottom: 1px; }
  .app-layout .desktop-subject-table .subject-action-icon { height: 24px; }
  .app-layout .desktop-subject-table .compact-value-box { padding-top: 1px; padding-bottom: 1px; }
  .app-layout .setup-page .profile-grid { margin-bottom: 6px; }
  .app-layout .setup-page .subjects-heading { margin-top: 0; padding-top: 6px; }

  /* Summary boxes follow their contents, with uniform 16px horizontal spacing. */
  .app-layout .dashboard-summary-grid,
  .app-layout .progress-summary-grid { display: flex; flex-wrap: wrap; align-items: start; gap: 8px 16px; }
  .app-layout .dashboard-summary-grid .summary-card,
  .app-layout .progress-summary-grid .summary-card { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  .app-layout .dashboard-summary-grid .summary-card { padding: 5px 8px; }
  .app-layout .dashboard-page .next-exam-card { padding-top: 10px; padding-bottom: 10px; margin-bottom: 8px; }
  .app-layout .dashboard-page .next-exam-card h2 { font-size: 16px; line-height: 1.2; margin-top: 2px; margin-bottom: 2px; }
  .app-layout .dashboard-page { max-width: 720px; }
  .app-layout .dashboard-page .next-exam-card,
  .app-layout .dashboard-page .upcoming-study-card { width: 80%; }
  .app-layout .dashboard-page .agenda-item { grid-template-columns: 4px 90px minmax(0, 1fr); padding: 4px 0; column-gap: 10px; }
  .app-layout .dashboard-page .subject-strip { min-height: 20px; }
  .app-layout .dashboard-page .agenda-date { white-space: nowrap; line-height: 1.25; }
  .app-layout .dashboard-page .agenda-main { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; line-height: 1.25; min-width: 0; }
  .app-layout .dashboard-page .agenda-main > strong { overflow-wrap: anywhere; }
  .app-layout .dashboard-page .agenda-session-details { line-height: 1.25; gap: 12px; }
  .app-layout .dashboard-page .agenda-session-details span { font-size: 13px !important; }

  /* Share the calendar/allocation tracks, keeping the first three summaries content-sized. */
  .app-layout .timetable-summary-grid,
  .app-layout .timetable-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .65fr) minmax(0, .78fr); }
  .app-layout .timetable-summary-grid { display: grid; gap: 8px 12px; margin-top: 4px; margin-bottom: 5px; align-items: start; }
  .app-layout .timetable-summary-primary { display: flex; flex-wrap: wrap; gap: 8px 16px; grid-column: 1 / 4; min-width: 0; }
  .app-layout .timetable-summary-grid .summary-card { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 3px 8px; min-height: 0; }
  .app-layout .timetable-summary-grid .study-period-card { grid-column: 4; justify-self: stretch; width: 100%; max-width: 100%; }
  .app-layout .timetable-summary-grid .study-period-card small { display: inline; white-space: nowrap; margin-left: auto; text-align: right; }

  /* 15 minutes = 10.5px; a half-hour session retains 21px for both text lines and the completion ring.
     A 10px quarter-hour clips the unchanged duration text in half-hour sessions.
     Drag/resize reads this computed row height and still snaps to five-minute intervals. */
  .app-layout .week-calendar { --calendar-compact-slot-height: 3.5px; }
  /* Draw the same completion ring inside the card without consuming its two-line text area. */
  .app-layout .calendar-session.study-event.completed {
    border: 0 !important; box-shadow: inset 0 0 0 2px var(--green); padding: .25px 5px;
  }
  /* A single desktop toolbar row gives the calendar the space formerly used by stacked actions. */
  .app-layout .timetable-page:not(.is-exported-schedule) .schedule-toolbar { grid-template-rows: minmax(24px, auto); row-gap: 0; }
  .app-layout .timetable-page:not(.is-exported-schedule) .schedule-toolbar > strong,
  .app-layout .timetable-page:not(.is-exported-schedule) .schedule-toolbar .calendar-template-actions,
  .app-layout .timetable-page:not(.is-exported-schedule) .schedule-toolbar .schedule-input-actions,
  .app-layout .timetable-page:not(.is-exported-schedule) .schedule-toolbar .regenerate-button { grid-row: 1; }
  .app-layout .timetable-page:not(.is-exported-schedule) .schedule-toolbar .schedule-input-actions {
    display: flex; flex-direction: row; align-items: center;
    grid-column: 3; gap: var(--schedule-toolbar-pair-gap);
  }
  .app-layout .allocation-card .fit-banner { padding: 4px 6px; margin-top: 5px; margin-bottom: 0; line-height: 1.25; }
  .app-layout .allocation-card .schedule-export-button { margin: 3px 0 0; padding: 3px 8px; min-height: 26px; font-size: 12px; line-height: 1.25; }

  .app-layout .chronological-card { margin-top: 8px; padding-top: 10px; padding-bottom: 10px; }
  .app-layout .chronological-card .session-table th { padding-top: 4px; padding-bottom: 4px; }
  .app-layout .chronological-card .session-table td { padding-top: 2px; padding-bottom: 2px; line-height: 1.25; }
  .app-layout .chronological-week-summary-row td,
  .app-layout .session-table td:first-child,
  .app-layout .session-table td:last-child { font-size: calc(.88rem - 1pt); }
  .app-layout .chronological-week-toggle { width: 20px; height: 20px; margin-right: 5px; }

  .app-layout .progress-chart-card { padding-top: 10px; padding-bottom: 8px; }
  .app-layout .progress-chart-heading { margin-bottom: 4px; }
  .app-layout .progress-chart-heading h2 { margin-bottom: 0; }
  .app-layout .progress-chart-scroll { padding-top: 0; padding-bottom: 0; }

  .app-layout .account-grid { row-gap: 8px; }
  .app-layout .account-profile-card,
  .app-layout .passkey-card,
  .app-layout .recovery-info-card { padding-top: 10px; padding-bottom: 10px; }
  .app-layout .recovery-info-card { margin-top: 8px; }
  .app-layout .account-page .account-identity-row { padding-top: 5px; padding-bottom: 5px; }
  .app-layout .account-page .verified-badge { margin-top: 6px; margin-bottom: 6px; }
  .app-layout .account-page .passkey-item { padding-top: 5px; padding-bottom: 5px; }
  .app-layout .account-page .passkey-add-panel { margin-top: 8px; padding-top: 8px; }
  .app-layout .account-page .small-note { margin-top: 6px; }
  .app-layout .account-page .content-card > p:last-child { margin-bottom: 0; }
}

@media (max-width: 1100px) {
  .dashboard-page .agenda-item { grid-template-columns: 4px 86px minmax(0, 1fr); }
  .dashboard-page .agenda-date { white-space: nowrap; }
  .dashboard-page .agenda-main > span { white-space: normal; }
}