@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  color-scheme: light;
  --ink: #233049;
  --muted: #718096;
  --line: #e3e8ef;
  --paper: #ffffff;
  --canvas: #f4f6f8;
  --blue: #345c87;
  --blue-deep: #23466f;
  --blue-pale: #eaf1f8;
  --sage: #436e63;
  --sage-pale: #e9f3ef;
  --gold: #a87935;
  --gold-pale: #f8f0e3;
  --red: #a6433b;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.55;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 78% 0%, #edf2f7 0, transparent 34rem), var(--canvas); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); }
.classroom-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px max(24px, calc((100vw - 1220px) / 2)); background: rgb(255 255 255 / 88%); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: var(--blue); font-size: .8rem; font-weight: 700; letter-spacing: .05em; box-shadow: 0 5px 12px #345c8726; }
.brand-mark-staff { background: #536c62; box-shadow: 0 5px 12px #536c6226; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .97rem; font-weight: 650; letter-spacing: -.02em; }
.brand small { color: var(--muted); font-size: .77rem; margin-top: 1px; }
.header-tools { display: flex; align-items: center; gap: 10px; }
.identity-chip { color: #53647a; background: #f2f5f8; border: 1px solid var(--line); border-radius: 99px; padding: 7px 13px; font-size: .82rem; }
.classroom-main { width: min(1160px, 100%); min-height: calc(100vh - 143px); padding: 42px 28px 70px; margin: 0 auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Playfair Display", Georgia, serif; color: #24334c; font-weight: 600; letter-spacing: -.035em; }
h1 { margin-bottom: 9px; font-size: clamp(2rem, 4vw, 3.05rem); line-height: 1.12; }
h2 { margin-bottom: 8px; font-size: 1.55rem; line-height: 1.25; }
h3 { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.eyebrow { margin-bottom: 8px; color: #7888a0; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.muted { color: var(--muted); }
.compact { font-size: .82rem; }
.surface { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 30px #293b5508; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; padding: 9px 14px; border: 1px solid #d4dce6; border-radius: 9px; color: #405876; background: #fff; cursor: pointer; font-size: .83rem; font-weight: 600; text-decoration: none; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.button:hover:not(:disabled) { background: #f3f6f9; border-color: #aebccc; transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #92aed077; outline-offset: 2px; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button-primary { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 4px 10px #345c871e; }
.button-primary:hover:not(:disabled) { color: #fff; background: var(--blue-deep); border-color: var(--blue-deep); }
.button-quiet { color: #61738b; background: transparent; border-color: transparent; box-shadow: none; }
.button-quiet:hover:not(:disabled) { background: #edf1f5; border-color: transparent; }
.button-wide { width: 100%; min-height: 47px; margin-top: 23px; }
.button-small { min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: .76rem; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .85fr); align-items: center; gap: clamp(38px, 8vw, 116px); min-height: min(690px, calc(100vh - 170px)); padding: 34px 5%; }
.login-story { max-width: 520px; }
.login-story h1 { max-width: 490px; font-size: clamp(2.5rem, 5vw, 4.05rem); }
.login-story > p:not(.eyebrow) { max-width: 455px; color: #738197; font-size: 1.03rem; line-height: 1.75; }
.login-note { display: flex; align-items: center; gap: 11px; max-width: 410px; margin-top: 38px; color: #6d7c91; font-size: .84rem; }
.note-icon { display: grid; place-items: center; flex: 0 0 33px; width: 33px; height: 33px; border: 1px solid #d8e4ed; border-radius: 50%; color: var(--blue); background: #f5f9fc; }
.login-card { width: 100%; max-width: 430px; padding: 34px 35px 32px; }
.login-card h2 { margin-bottom: 4px; }
.login-card > .muted { margin-bottom: 24px; font-size: .88rem; }
label { display: block; margin: 15px 0 6px; color: #465770; font-size: .82rem; font-weight: 650; }
input, textarea, select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #d4dce6; border-radius: 9px; color: var(--ink); background: #fff; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #a4afbe; }
.message { padding: 11px 14px; border: 1px solid #ecd7d1; border-radius: 9px; color: var(--red); background: #fff7f5; font-size: .84rem; }
.message:not([hidden]) { margin-top: 14px; }
.message.success { border-color: #cfe2d6; color: #436c5c; background: #eff8f2; }
.message.error { color: var(--red); }
.welcome-row, .admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.welcome-row .muted, .admin-heading .muted { margin-bottom: 0; }
.dashboard-actions { display: flex; align-items: center; gap: 14px; }
.dashboard-stat { display: flex; align-items: baseline; gap: 7px; padding: 5px 8px; color: #718096; white-space: nowrap; }
.dashboard-stat span { color: #354b67; font-family: "Playfair Display", Georgia, serif; font-size: 1.7rem; line-height: 1; }
.dashboard-stat small { font-size: .75rem; }
.session-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.session-card { display: grid; grid-template-columns: 53px minmax(0, 1fr); gap: 18px; padding: 22px; transition: border-color .16s ease, box-shadow .16s ease; }
.session-card:hover { border-color: #c4d3e2; box-shadow: 0 12px 30px #293b5510; }
.session-card-open { border-top: 3px solid #80a594; }
.session-card-index { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: #66809b; background: #f0f4f8; font-family: "Playfair Display", Georgia, serif; font-size: .96rem; }
.session-card-body { min-width: 0; }
.session-card-top, .admin-session-top, .writing-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.session-card-title .eyebrow, .admin-session-title .eyebrow, .writing-record-detail .eyebrow { margin: 0 0 4px; letter-spacing: .08em; }
.session-card-title h2 { margin: 0; font-family: "DM Sans", sans-serif; font-size: 1.12rem; font-weight: 650; letter-spacing: -.025em; }
.status-pill { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 26px; padding: 4px 9px; border-radius: 99px; color: #6e7b8d; background: #f0f2f5; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.status-open { color: #376850; background: var(--sage-pale); }
.status-closed { color: #6f7886; background: #eef0f3; }
.status-submitted { color: #365d84; background: #eaf1f8; }
.status-draft { color: #8c682e; background: var(--gold-pale); }
.session-card-summary { margin: 13px 0 16px; color: #77859a; font-size: .84rem; line-height: 1.55; }
.session-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.session-card-actions .muted { font-size: .76rem; }
.empty-card { grid-column: 1 / -1; display: grid; justify-items: center; padding: 58px 24px; text-align: center; }
.empty-card h2 { margin: 14px 0 5px; font-size: 1.35rem; }
.empty-card p { max-width: 410px; margin: 0; color: var(--muted); font-size: .88rem; }
.empty-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: #608372; background: #edf5f0; font-size: 1.1rem; }
.workspace-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.save-status { color: #8491a1; font-size: .77rem; text-align: right; }
.save-status.save-error { color: #a34a40; }
.session-brief { padding: 26px 30px 23px; }
.session-brief-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.session-brief h1 { margin-bottom: 8px; font-size: clamp(1.8rem, 3vw, 2.55rem); }
.session-summary { max-width: 800px; margin: 0 0 17px; color: #768499; font-size: .93rem; }
.instructions-block { padding-top: 15px; border-top: 1px solid #eef0f3; }
.instructions-block h2 { margin: 0 0 5px; color: #63768f; font-family: "DM Sans", sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.instructions-block p { margin: 0; color: #41536b; white-space: pre-wrap; font-size: .91rem; line-height: 1.68; }
.writing-card { margin-top: 15px; overflow: hidden; }
.writing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 24px 15px; border-bottom: 1px solid #edf0f3; }
.writing-toolbar .eyebrow { margin-bottom: 3px; }
.writing-toolbar h2 { margin: 0; font-family: "DM Sans", sans-serif; font-size: 1.1rem; font-weight: 650; letter-spacing: -.025em; }
.word-count { padding: 6px 10px; border-radius: 99px; color: #76869b; background: #f4f6f8; font-size: .73rem; white-space: nowrap; }
#student-writing,.original-essay { font-family: Georgia, "Times New Roman", serif; font-size: 1.13rem; line-height: 1.9; }
#student-writing { display: block; flex:1; height:0; min-height:0; resize:none; overflow:auto; padding: 30px clamp(22px, 6vw, 80px); border: 0; border-radius: 0; color: #34445b; }
#student-writing:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #aec4d6; }
#student-writing:disabled { color: #47566b; background: #fff; opacity: 1; cursor: default; }
.writing-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 21px; border-top: 1px solid #edf0f3; background: #fbfcfd; }
.writing-footer p { margin: 0; font-size: .76rem; }
.writing-actions { display: flex; gap: 9px; }
.recovery-notice, .conflict-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; margin-top: 12px; border: 1px solid #e6d8b9; border-radius: 12px; color: #725c35; background: #fffaf0; font-size: .83rem; }
.conflict-panel { align-items: flex-start; border-color: #ecd6c5; background: #fff8f3; }
.conflict-panel .eyebrow { margin-bottom: 4px; color: #9b7450; }
.conflict-panel h2 { margin: 0 0 3px; font-family: "DM Sans", sans-serif; font-size: 1rem; letter-spacing: -.02em; }
.conflict-panel p { margin: 0; max-width: 710px; font-size: .82rem; }
.conflict-actions, .recovery-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.conflict-actions { justify-content: flex-end; }
.workspace-message { margin-top: 12px; }
.classroom-footer { display: flex; justify-content: center; gap: 9px; padding: 21px 18px 25px; color: #96a1b0; font-size: .72rem; }
.classroom-footer a { color: #74849a; text-decoration: none; }
.classroom-footer a:hover { text-decoration: underline; }
.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; }

/* Staff workspace */
.admin-page .classroom-main { width: min(1320px, 100%); }
.admin-heading { align-items: center; }
.admin-heading h1 { margin-bottom: 5px; font-size: clamp(2rem, 3.8vw, 2.7rem); }
.admin-heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.admin-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.summary-tile { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px; }
.summary-tile span { color: #355878; font-family: "Playfair Display", Georgia, serif; font-size: 1.65rem; line-height: 1; }
.summary-tile small { color: #8090a4; font-size: .76rem; }
.admin-columns { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); align-items: start; gap: 15px; }
.admin-panel { padding: 22px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.panel-heading .eyebrow { margin-bottom: 4px; }
.panel-heading h2 { margin: 0; font-size: 1.45rem; }
.admin-session-list { display: grid; gap: 10px; }
.admin-session-card { padding: 16px; border: 1px solid #e8ecf1; border-radius: 12px; background: #fcfdfe; }
.admin-session-title h3 { margin: 0; font-size: 1rem; }
.admin-session-title .eyebrow { font-size: .63rem; }
.admin-session-card .session-card-summary { margin: 10px 0 12px; font-size: .79rem; }
.admin-session-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid #edf0f3; }
.compact-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.empty-inline { padding: 13px 14px; border: 1px dashed #d7dee7; border-radius: 10px; color: #8390a2; font-size: .82rem; }
.roster-panel form { padding: 14px; border: 1px solid #e9edf2; border-radius: 12px; background: #fbfcfd; }
.roster-panel form label:first-child { margin-top: 0; }
.roster-panel form textarea { min-height: 130px; font-size: .8rem; line-height: 1.55; }
.field-help { margin: 9px 0 13px; color: #7b899c; font-size: .73rem; line-height: 1.55; }
.field-help code { color: #526a84; font-size: .72rem; }
.roster-list { display: grid; gap: 7px; margin-top: 13px; }
.roster-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid #edf0f3; }
.roster-row:last-child { border-bottom: 0; }
.roster-name { min-width: 0; }
.roster-name strong, .roster-name span { display: block; overflow-wrap: anywhere; }
.roster-name strong { color: #40536d; font-size: .83rem; font-weight: 650; }
.roster-name span { margin-top: 2px; font-size: .69rem; }
.roster-empty { margin: 0; }
.form-panel, .review-panel { margin-top: 15px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 14px; }
.form-span-two { grid-column: 1 / -1; }
.form-grid textarea { min-height: 90px; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 17px; }
.form-actions .muted { font-size: .78rem; }
.review-description { margin: -4px 0 16px; font-size: .83rem; }
.review-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.writing-record { overflow: hidden; border: 1px solid #e7ebf0; border-radius: 12px; background: #fcfdfe; }
.writing-record-head { padding: 14px 15px 10px; }
.writing-record-detail h3 { margin: 0; font-size: .94rem; }
.writing-record-meta { margin: 0; padding: 0 15px 11px; color: #8994a2; font-size: .67rem; }
.writing-text { max-height: 360px; overflow: auto; margin: 0; padding: 15px; border-top: 1px solid #edf0f3; color: #40516a; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; font: .87rem/1.75 Georgia, "Times New Roman", serif; }
.writing-record-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 13px; border-top: 1px solid #edf0f3; }
.empty-card-small { grid-column: 1 / -1; padding: 30px 18px; border: 1px dashed #d7dee7; border-radius: 10px; color: #8290a4; font-size: .84rem; text-align: center; }

/* Live class observation */
.observation-panel { margin-bottom: 15px; }
.observation-heading { align-items: flex-end; margin-bottom: 11px; }
.observation-session-control { width: min(390px, 52%); }
.observation-session-control label { margin: 0 0 5px; color: #75839a; font-size: .7rem; }
.observation-session-control select { min-height: 38px; padding: 7px 10px; font-size: .8rem; }
.observation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 13px; border-bottom: 1px solid #edf0f3; }
.observation-toolbar p { margin: 0; font-size: .74rem; }
.observation-connection { flex: 0 0 auto; color: #738198; font-size: .74rem; font-weight: 600; }
.observation-connection.is-live { color: #367552; }
.observation-connection.is-stale { color: #a14b42; }
.observation-error { margin: 10px 0 0; color: #a14b42; font-size: .76rem; }
.observation-layout { display: grid; grid-template-columns: minmax(290px, .84fr) minmax(0, 1.16fr); gap: 14px; padding-top: 13px; }
.observation-roster-wrap, .observation-preview { min-width: 0; overflow: hidden; border: 1px solid #e8ecf1; border-radius: 11px; background: #fbfcfd; }
.observation-roster-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 11px 13px; border-bottom: 1px solid #e9edf2; }
.observation-roster-heading h3 { font-size: .84rem; }
.observation-roster-heading span { font-size: .69rem; }
.observation-roster { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; }
.observation-student-row { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #edf0f3; border-radius: 0; color: var(--ink); background: #fff; text-align: left; white-space: normal; }
.observation-student-row:hover:not(:disabled) { background: #f4f7fa; }
.observation-student-row.is-selected { position: relative; background: #edf3f8; box-shadow: inset 3px 0 #456d94; }
.observation-student-row:focus-visible { outline: 2px solid #7897b6; outline-offset: -2px; }
.observation-student-main, .observation-student-metrics { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.observation-student-identity { min-width: 0; }
.observation-student-name, .observation-student-code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observation-student-name { color: #3c506b; font-size: .77rem; font-weight: 650; }
.observation-student-code { margin-top: 1px; color: #8491a2; font-size: .64rem; }
.observation-student-pills { display: flex; align-items: center; flex: 0 0 auto; gap: 5px; }
.observation-status-pill { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 22px; padding: 3px 7px; border-radius: 99px; color: #647489; background: #e9edf1; font-size: .61rem; font-weight: 750; white-space: nowrap; }
.observation-status-logged { color: #073d19; background: #39ef73; }
.observation-status-writing { color: #fff; background: #000; }
.observation-status-finished { color: #07517c; background: #a9e4ff; }
.observation-status-unfocused { color: #fff; background: #e00016; }
.observation-status-waiting, .observation-status-offline { color: #647489; background: #e9edf1; }
.observation-presence { display: inline-flex; align-items: center; gap: 4px; color: #77869a; font-size: .58rem; font-weight: 650; white-space: nowrap; }
.observation-presence::before { width: 6px; height: 6px; border-radius: 50%; background: #aab3bf; content: ""; }
.observation-presence.is-online::before { background: #30bd78; box-shadow: 0 0 0 2px #30bd7826; }
.observation-student-metrics { margin-top: 6px; color: #8591a1; font-size: .62rem; }
.observation-word-count { color: #536881; font-weight: 650; }
.observation-last-saved { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observation-empty { padding: 18px 13px; margin: 0; color: #8290a2; font-size: .76rem; }
.observation-preview { display: flex; min-height: 280px; flex-direction: column; background: #fff; }
.observation-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 15px 7px; }
.observation-preview-heading .eyebrow { margin-bottom: 3px; font-size: .59rem; }
.observation-preview-heading h3 { color: #3b506a; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.25; }
.observation-preview-meta { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 15px 9px; color: #8693a4; font-size: .65rem; }
.observation-preview-text { flex: 1 1 auto; max-height: 310px; min-height: 190px; overflow: auto; margin: 0; padding: 13px 15px 17px; border-top: 1px solid #edf0f3; color: #40516a; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; font: .84rem/1.72 Georgia, "Times New Roman", serif; }
.observation-preview-text:empty::before { color: #93a0b0; content: "No saved writing is available for this student in this session yet."; font-family: "DM Sans", sans-serif; font-size: .77rem; }
.roster-editor { margin: 12px 0 3px; }
.roster-editor > summary { display: inline-flex; cursor: pointer; list-style: none; }
.roster-editor > summary::after { margin-left: 7px; content: "+"; font-size: 1rem; line-height: 1; }
.roster-editor[open] > summary::after { content: "−"; }
.roster-editor > summary::-webkit-details-marker { display: none; }
.roster-editor[open] > summary { margin-bottom: 11px; }
.roster-editor form { margin-top: 0; }

@media (max-width: 900px) {
  .login-layout { gap: 38px; padding-inline: 1%; }
  .admin-columns { grid-template-columns: 1fr; }
  .roster-panel { order: -1; }
  .observation-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .classroom-header { min-height: 68px; padding: 12px 16px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .header-tools { gap: 4px; }
  .header-tools .button { min-height: 36px; padding: 7px 9px; font-size: .73rem; }
  .identity-chip { max-width: 115px; overflow: hidden; padding: 6px 9px; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
  .classroom-main { min-height: calc(100vh - 125px); padding: 27px 15px 48px; }
  .login-layout { grid-template-columns: 1fr; min-height: 0; gap: 27px; padding: 14px 0 28px; }
  .login-story { padding: 0 4px; }
  .login-story h1 { max-width: 440px; font-size: clamp(2.25rem, 11vw, 3.2rem); }
  .login-story > p:not(.eyebrow) { font-size: .91rem; }
  .login-note { margin-top: 19px; }
  .login-card { max-width: none; padding: 25px 23px; }
  .welcome-row, .admin-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .dashboard-actions { width: 100%; justify-content: space-between; }
  .session-list { grid-template-columns: 1fr; }
  .session-card { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 17px 15px; }
  .session-card-index { width: 35px; height: 35px; border-radius: 11px; font-size: .82rem; }
  .session-card-title h2 { font-size: .98rem; }
  .session-card-top { align-items: flex-start; }
  .session-brief { padding: 20px 18px; }
  .session-brief-top { gap: 10px; }
  .session-brief h1 { font-size: 1.8rem; }
  .writing-toolbar { padding: 15px 17px; }
  .original-essay { font-size: 1.04rem; }
  #student-writing { min-height:0; padding: 22px 19px; font-size: 1.04rem; }
  .writing-footer { align-items: flex-start; flex-direction: column; padding: 13px 16px; }
  .writing-actions { width: 100%; }
  .writing-actions .button { flex: 1; }
  .recovery-notice, .conflict-panel { align-items: flex-start; flex-direction: column; }
  .conflict-actions { justify-content: flex-start; }
  .admin-heading-actions { width: 100%; }
  .admin-heading-actions .button { flex: 1; }
  .admin-summary { gap: 7px; }
  .summary-tile { align-items: flex-start; flex-direction: column; gap: 5px; padding: 12px; }
  .summary-tile span { font-size: 1.4rem; }
  .admin-panel { padding: 17px 14px; }
  .admin-session-bottom { align-items: flex-start; flex-direction: column; }
  .compact-actions { justify-content: flex-start; }
  .compact-actions .button { flex: 1; }
  .review-content { grid-template-columns: 1fr; }
  .observation-heading { align-items: flex-start; flex-direction: column; }
  .observation-session-control { width: 100%; }
  .observation-toolbar { align-items: flex-start; flex-direction: column; gap: 6px; }
  .observation-roster { max-height: 290px; }
  .observation-preview-text { max-height: 350px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-span-two { grid-column: auto; }
  .classroom-footer { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Compact project-sized timelines beside the selected essay. */
.observation-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:start; }
.observation-roster-wrap { grid-column:2; grid-row:1; }
.observation-roster { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; padding:6px; max-height:none; overflow:visible; }
.observation-student-row { min-width:0; min-height:95px; padding:6px 7px; border:1px solid #d3deeb; border-radius:6px; background:#fff; }
.observation-student-main { align-items:center; gap:3px; }
.observation-student-pills { align-items:center; gap:3px; }
.observation-student-row .observation-status-pill { min-height:0; font-size:.58rem; line-height:1; padding:3px 4px; }
.observation-student-code, .observation-student-row .observation-presence { display:none; }
.observation-student-name { font-size:.73rem; }
.observation-chart { display:block; height:46px; margin:3px 0; }
.observation-chart svg { display:block; width:100%; height:46px; }
.timeline-axis { fill:none; stroke:#dce5ee; stroke-width:1; }
.timeline-line { fill:none; stroke:#2878b8; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.timeline-dot { fill:#2878b8; }
.timeline-label { fill:#718299; font:9px sans-serif; }
.timeline-empty { display:flex; height:100%; align-items:center; justify-content:center; color:#8997a8; font-size:.75rem; }
.observation-student-metrics { margin-top:3px; justify-content:space-between; font-size:.69rem; }
.observation-preview { grid-column:1; grid-row:1; margin-top:0; min-height:420px; }
.observation-preview-text { min-height:330px; max-height:65vh; }
@media(max-width:760px) {
  .observation-layout { grid-template-columns:minmax(0,1fr); }
  .observation-preview { grid-column:1; grid-row:1; min-height:280px; }
  .observation-roster-wrap { grid-column:1; grid-row:2; }
  .observation-preview-text { min-height:190px; max-height:45vh; }
}
.button-danger { color:#ab2639; border-color:#e7bdc4; }
.button-danger:hover:not(:disabled) { background:#fff1f3; border-color:#ce7886; }
#delete-all-students { margin-top:12px; }

/* The newest class leads; older work remains available below. */
.session-card-featured { grid-column:1 / -1; padding:28px; border-color:#a9c5b8; background:linear-gradient(120deg,#f3faf6,#fff 70%); }
.session-card-featured .session-card-title h2 { font-size:1.65rem; }
.session-card-featured .session-card-summary { max-width:850px; font-size:.95rem; }
.previous-sessions-divider { grid-column:1 / -1; border-top:1px solid #dce4ec; margin-top:14px; padding-top:19px; }
.previous-sessions-divider h2 { margin:0; color:#77859a; font:600 .85rem "DM Sans",sans-serif; }
.session-card-previous { grid-template-columns:32px minmax(0,1fr); gap:10px; padding:13px 15px; border-top-width:1px; }
.session-card-previous .session-card-index { width:30px; height:30px; border-radius:8px; font-size:.77rem; }
.session-card-previous .session-card-title h2 { font-size:.94rem; }
.session-card-previous .eyebrow { font-size:.59rem; }
.session-card-previous .session-card-summary { margin:7px 0; font-size:.76rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.session-card-previous .session-card-actions { margin-top:9px; gap:7px; }
.session-card-previous .session-card-actions .button { padding:6px 10px; min-height:31px; font-size:.72rem; }
.session-card-previous .session-card-actions .muted { font-size:.68rem; }
@media(max-width:680px) { .session-card-featured { padding:20px 16px; } .session-card-featured .session-card-title h2 { font-size:1.3rem; } }

/* Submitted writing and professor feedback. */
.student-writing-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:stretch; margin-top:16px; }
#student-workspace { --student-document-height:clamp(640px,90vh,1100px); }
.student-writing-layout .writing-card { margin-top:0; min-width:0; height:var(--student-document-height); display:flex; flex-direction:column; overflow:hidden; }
.student-writing-layout.has-feedback { grid-template-columns:repeat(2,minmax(0,1fr)); }
.feedback-panel { padding:20px; min-width:0; }
.feedback-panel h2,.feedback-panel h3 { margin-top:0; }
.feedback-body { min-width:0; }
.feedback-body pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.65; }
.professor-review-layout.has-feedback { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.professor-review-layout .feedback-panel { padding:0; }
.observation-layout.has-feedback { grid-template-columns:minmax(0,2fr) minmax(260px,1fr); }
.observation-layout.has-feedback .observation-preview { grid-column:1; }
.observation-layout.has-feedback .observation-roster-wrap { grid-column:2; }
@media(max-width:1000px) { .professor-review-layout.has-feedback { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) { .student-writing-layout.has-feedback,.observation-layout.has-feedback { grid-template-columns:minmax(0,1fr); } .observation-layout.has-feedback .observation-roster-wrap { grid-column:1; } }

.bulk-feedback-panel { margin:16px 0; padding:20px; background:#f7f9fc; border:1px solid #d3deeb; border-radius:12px; }
.bulk-feedback-panel h3 { margin:0 0 10px; }
.bulk-feedback-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:14px; }
.bulk-feedback-table { overflow:auto; max-height:420px; margin-bottom:16px; }
.bulk-feedback-table table { width:100%; border-collapse:collapse; text-align:left; font-size:.85rem; }
.bulk-feedback-table th,.bulk-feedback-table td { padding:9px; border-bottom:1px solid #d3deeb; overflow-wrap:anywhere; }
.bulk-feedback-table select { min-width:200px; }
@media(max-width:760px) { .bulk-feedback-inputs { grid-template-columns:minmax(0,1fr); } }
.bulk-feedback-panel .message.info { color:#365571; border-color:#d0ddeb; background:#edf4fa; }

/* Equal-height finished documents with independent scrolling. */
.student-writing-layout.has-feedback > .writing-card,
.student-writing-layout.has-feedback > .feedback-panel { height:var(--student-document-height); display:flex; flex-direction:column; overflow:hidden; }
.student-writing-layout.has-feedback #student-writing { flex:1; height:0; min-height:0; resize:none; overflow:auto; padding:24px 30px; background:transparent; }
.student-writing-layout.has-feedback .writing-toolbar,
.student-writing-layout.has-feedback .writing-footer { flex-shrink:0; }
.student-writing-layout.has-feedback > .feedback-panel { padding:0; }
.feedback-header { padding:20px 24px 15px; flex-shrink:0; }
.feedback-header h2,.feedback-header h3 { margin:0; }
.feedback-header .muted { margin:8px 0 0; }
.student-writing-layout.has-feedback .feedback-body { flex:1; min-height:0; padding:0 24px 20px; overflow:auto; }
.feedback-body pre { margin:0; }
.feedback-footer { display:flex; justify-content:flex-end; flex-shrink:0; padding:14px 21px; border-top:1px solid #e4eaf1; }
.review-document { min-width:0; }
.professor-review-layout.has-feedback > .review-document { display:flex; flex-direction:column; height:clamp(440px,68vh,760px); overflow:hidden; border-radius:8px; }
.professor-review-layout.has-feedback .observation-preview-text { flex:1; min-height:0; max-height:none; overflow:auto; margin:0; padding:16px; }
.professor-review-layout.has-feedback .feedback-body { flex:1; min-height:0; overflow:auto; padding:0 16px 16px; }
.professor-review-layout .feedback-header { padding:16px; }
.feedback-body .feedback-result { padding:16px 20px; border-radius:12px; margin:0 0 20px; }
.feedback-result.result-pass { background:#f1f7fd; }
.feedback-result.result-fail { background:#fff3f3; }
.student-writing-layout.has-feedback .writing-footer { background:transparent; }

/* Separate writing rounds keep the original and its feedback together. */
.round-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px 0 10px; }
.rewrite-round { padding-bottom:24px; margin-bottom:24px; border-bottom:2px solid #dce5ef; }
.original-round { margin:20px 0 28px; }
.original-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.original-document { min-width:0; height:var(--student-document-height); display:flex; flex-direction:column; overflow:hidden; padding:0; }
.original-document .original-essay,.original-document .feedback-body { flex:1; min-height:0; overflow:auto; margin:0; padding:0 24px 20px; }
.original-essay { white-space:pre-wrap; overflow-wrap:anywhere; color:#47566b; }
.rewrite-round .observation-preview-text { min-height:220px; max-height:60vh; }
@media(max-width:760px) { .original-review-grid { grid-template-columns:minmax(0,1fr); } }
#student-original-instructions-panel { margin-bottom:20px; }

.rewrite-round .professor-review-layout.has-feedback .observation-preview-text { min-height:0; }

/* Class actions grouped by writing round, with destructive tools disclosed separately. */
.admin-session-bottom.session-controls { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.session-action-groups { display:flex; flex-direction:column; gap:0; }
.session-action-group { display:grid; grid-template-columns:105px minmax(0,1fr); align-items:start; gap:12px; padding:12px 0; }
.session-action-group + .session-action-group { border-top:1px solid #e8edf3; }
.session-action-label { padding-top:9px; color:#64758c; font-size:.73rem; font-weight:700; }
.session-action-buttons { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; }
.session-action-buttons .button { min-height:34px; padding:8px 11px; font-size:.74rem; line-height:1.3; }
.session-danger-actions { border-top:1px solid #e8edf3; padding-top:12px; }
.session-danger-actions summary { width:fit-content; cursor:pointer; color:#9a4d58; font-size:.74rem; font-weight:600; padding:4px 0; }
.session-danger-actions summary:focus-visible { outline:2px solid #7c99b5; outline-offset:4px; border-radius:3px; }
.session-danger-actions[open] .session-action-buttons { padding-top:12px; }
@media(max-width:560px) {
  .session-action-group { grid-template-columns:1fr; gap:7px; }
  .session-action-label { padding-top:0; }
}

/* Staff-only replay is independent from the live essay preview. */
.replay-panel { margin:24px 0; }
.replay-controls,.replay-transport,.replay-metadata,.replay-change-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.replay-controls { align-items:flex-end; }
.replay-controls label { margin-bottom:5px; }
.replay-metadata { margin:18px 0 12px; font-size:.8rem; color:#63748b; }
.replay-metadata strong { color:#344b68; }
#replay-slider { width:100%; padding:0; min-height:32px; accent-color:#365c82; }
.replay-change-controls { margin:12px 0; font-size:.8rem; }
.replay-highlight-label { display:flex; align-items:center; gap:8px; margin:0; }
.replay-highlight-label input { width:auto; min-height:0; margin:0; }
.replay-text { white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; max-height:65vh; min-height:220px; padding:22px; margin:0; border:1px solid #e0e7ef; border-radius:10px; background:#fff; color:#34445b; font:1rem/1.8 Georgia,serif; }
.replay-text ins,.replay-legend ins { color:#14613e; background:#dcfce7; text-decoration:underline; text-decoration-thickness:1px; }
.replay-text del,.replay-legend del { color:#a52d3c; background:#ffedf0; text-decoration:line-through; }
.replay-legend { display:flex; gap:8px; }
.replay-legend ins,.replay-legend del { padding:2px 5px; border-radius:3px; }
@media(max-width:560px){.replay-controls>div {width:100%;}.replay-transport .button {flex:1;}.replay-text {padding:14px;}}
/* Readable assessment summaries shared by original and rewrite feedback. */
.score-overview { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.score-grade { display:flex; flex-direction:column; gap:2px; }
.score-label { color:#62748a; font-size:.75rem; }
.score-value { color:#263f5b; font-size:2rem; line-height:1.15; letter-spacing:-.04em; }
.score-outcome { border-radius:99px; padding:6px 10px; background:#d8edff; color:#235b88; font-size:.71rem; font-weight:700; }
.result-fail .score-outcome { background:#ffdde1; color:#962f3e; }
.score-total { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; margin:14px 0 6px; font-size:.75rem; color:#50647d; }
.rubric-progress { display:block; width:100%; height:7px; border:0; border-radius:8px; overflow:hidden; appearance:none; background:#e5edf5; color:#5380a7; }
.rubric-progress::-webkit-progress-bar { background:#e5edf5; border-radius:8px; }
.rubric-progress::-webkit-progress-value { background:#5380a7; border-radius:8px; }
.rubric-progress::-moz-progress-bar { background:#5380a7; border-radius:8px; }
.feedback-result .score-length { margin:13px 0 0; font-size:.75rem; line-height:1.6; color:#596d85; }
.score-comparison { display:flex; align-items:center; flex-wrap:wrap; gap:7px 10px; margin:-6px 0 20px; font-size:.8rem; color:#526982; }
.score-comparison-arrow { color:#7f91a7; }
.score-change { color:#344f6b; background:#eef3f8; border-radius:6px; padding:4px 7px; font-size:.73rem; }
.feedback-rubric { margin:20px 0 24px; }
.feedback-rubric h4 { margin:0 0 16px; font-size:.9rem; font-weight:700; }
.rubric-item + .rubric-item { margin-top:15px; }
.rubric-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:.8rem; }
.rubric-label { color:#3d536d; }
.rubric-value { flex-shrink:0; font-variant-numeric:tabular-nums; color:#334e6b; }
.rubric-comment { margin:8px 0 0; color:#65768c; font-size:.77rem; line-height:1.65; }
@media(max-width:480px) { .score-value {font-size:1.75rem;} .feedback-body .feedback-result {padding:16px;} }

/* Staff revision analysis reuses the authenticated, on-demand replay history. */
.writing-analysis { margin-top:30px; padding-top:24px; border-top:1px solid #dce5ef; scroll-margin-top:20px; }
.writing-analysis h3 { margin:0 0 18px; }
.analysis-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0; }
.analysis-stat { display:flex; flex-direction:column; gap:7px; padding:14px 16px; background:#f4f7fb; border-radius:10px; }
.analysis-stat span { color:#62758c; font-size:.75rem; }
.analysis-stat strong { color:#304a67; font-size:1.1rem; font-variant-numeric:tabular-nums; }
.analysis-section { margin-top:20px; padding-top:18px; border-top:1px solid #e3eaf2; }
.analysis-section summary { cursor:pointer; font-weight:700; color:#344b68; padding:4px 0; }
.analysis-section h4 { margin:0; font-size:.95rem; }
.analysis-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.analysis-section-heading>div,.analysis-threshold { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.analysis-section-heading label,.analysis-threshold label { margin:0; font-size:.75rem; }
.analysis-section select { width:auto; padding:6px 26px 6px 10px; min-height:34px; font-size:.8rem; }
.analysis-threshold { margin:16px 0 8px; }
.analysis-table-wrap { width:100%; overflow:auto; margin:14px 0; max-height:440px; }
.analysis-table { width:100%; border-collapse:collapse; font-size:.77rem; }
.analysis-table th { text-align:left; padding:10px; color:#5c6e85; background:#f5f8fc; position:sticky; top:0; white-space:nowrap; }
.analysis-table td { padding:10px; border-bottom:1px solid #e7edf4; font-variant-numeric:tabular-nums; }
.analysis-save-link { background:transparent; border:0; padding:2px 0; color:#315e8c; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.analysis-save-link:focus-visible { outline:2px solid #4777a5; outline-offset:4px; }
.analysis-bar-cell { display:flex; align-items:center; gap:9px; min-width:125px; }
.analysis-bar-cell>span:last-child { min-width:30px; text-align:right; }
.analysis-bar-track { display:block; flex:1; height:7px; background:#eaf0f5; border-radius:3px; overflow:hidden; }
.analysis-bar { display:block; height:100%; background:#488b70; }
.analysis-bar-track.removed .analysis-bar { background:#c07983; }
.analysis-comparison-text { max-height:60vh; }
#analysis-comparison .analysis-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.analysis-section ins { background:#dcfce7; color:#14613e; }
.analysis-section del { background:#ffedf0; color:#a52d3c; }
@media(max-width:680px) { .analysis-stats {grid-template-columns:repeat(2,minmax(0,1fr));}.analysis-section-heading {align-items:flex-start;}.analysis-stat {padding:12px;}.analysis-table td,.analysis-table th {padding:9px 7px;}#analysis-comparison .analysis-stats {grid-template-columns:1fr;} }

/* Retained original wording stays readable but recedes in read-only rewrites. */
.rewrite-retained { color:#737373; }
.rewrite-new,.analysis-comparison-text ins { color:#14613e; background:#dcfce7; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.rewrite-retained-note { margin:0; padding:0 22px 10px; font-size:.72rem; }

/* The selected save's edits take precedence over original/rewrite colors. */
#replay-text .replay-latest-add,.replay-legend .replay-latest-add { color:#0753a6; background:#b9e6ff; border-radius:2px; text-decoration:underline; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
#replay-text .replay-latest-delete,.replay-legend .replay-latest-delete { color:#b4233b; background:#ffe1e7; border-radius:2px; text-decoration:line-through; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* Place copy and download at opposite edges of each essay action row. */
.essay-copy-actions,.essay-file-actions { display:flex; justify-content:space-between; align-items:center; gap:9px; min-width:0; }
.essay-file-actions { width:100%; }
.essay-copy-actions>.button,.essay-file-actions>.button { min-width:0; }
.writing-footer,.writing-actions { flex-wrap:wrap; }
.writing-actions { justify-content:flex-end; min-width:0; }

/* Comparison counts include removed original words, alongside the saved rewrite. */
.rewrite-comparison { flex-shrink:0; padding:12px 16px 14px; border-bottom:1px solid #e4eaf1; }
.rewrite-comparison-title { margin:0 0 9px; color:#63768f; font-size:.73rem; font-weight:650; }
.rewrite-comparison-bar { display:block; width:100%; height:10px; overflow:hidden; border-radius:99px; background:#edf1f5; }
.rewrite-comparison-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.rewrite-comparison-count { border-left:3px solid; padding-left:8px; min-width:0; font-size:.7rem; }
.rewrite-comparison-count strong { display:block; margin-top:3px; font-size:.86rem; }
.rewrite-comparison-count.rewrite-comparison-retained { color:#657184; border-color:#929baa; }
.rewrite-comparison-count.rewrite-comparison-added { color:#14613e; border-color:#35b876; }
.rewrite-comparison-count.rewrite-comparison-removed { color:#b4233b; border-color:#ed7187; }
.rewrite-comparison-bar>.rewrite-comparison-retained { fill:#929baa; }
.rewrite-comparison-bar>.rewrite-comparison-added { fill:#35b876; }
.rewrite-comparison-bar>.rewrite-comparison-removed { fill:#ed7187; }
.rewrite-comparison-note { margin:9px 0 0; color:#768499; font-size:.67rem; line-height:1.5; }

/* Each classroom round fills one window; documents and roster scroll inside it. */
#live-observation .observation-layout { --observation-window-height:calc(100vh - 32px); --observation-window-height:calc(100dvh - 32px); }
#live-observation .observation-preview,
#live-observation .observation-roster-wrap { height:var(--observation-window-height); min-height:0; }
#live-observation .observation-preview-heading,
#live-observation .observation-preview-meta,
#live-observation .observation-roster-heading { flex-shrink:0; }
#live-observation .professor-review-layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); flex:1; min-height:0; }
#live-observation .professor-review-layout.has-feedback { grid-template-columns:repeat(2,minmax(0,1fr)); }
#live-observation .professor-review-layout>.review-document { display:flex; flex-direction:column; height:auto; min-height:0; overflow:hidden; }
#live-observation .professor-review-layout .observation-preview-text,
#live-observation .professor-review-layout .feedback-body { flex:1; min-height:0; max-height:none; overflow:auto; }
#live-observation .observation-roster-wrap { display:flex; flex-direction:column; }
#live-observation .observation-roster { flex:1; min-height:0; max-height:none; overflow-y:auto; align-content:start; }
@media(max-width:1000px) {
  #live-observation .observation-preview { height:auto; }
  #live-observation .professor-review-layout,
  #live-observation .professor-review-layout.has-feedback { grid-template-columns:minmax(0,1fr); grid-template-rows:none; }
  #live-observation .professor-review-layout>.review-document { height:var(--observation-window-height); }
}

/* Compact original/new/deleted comparison, without extra text in student tiles. */
.observation-comparison-mini { display:block; margin-top:6px; }
.observation-comparison-mini .rewrite-comparison-bar { height:6px; }

/* Replay occupies the essay's own reading area, with fixed controls above it. */
.essay-replay-slot { display:flex; flex:1; min-height:0; overflow:hidden; }
.essay-review.is-replaying>.rewrite-comparison { display:none; }
.essay-replay-slot .replay-inline { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; margin:0; padding:12px 16px 0; overflow:hidden; }
.replay-inline-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; flex-shrink:0; }
.replay-inline-heading h3 { margin:0; font-size:.86rem; }
.replay-inline .replay-controls { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:12px; flex-shrink:0; overflow-x:auto; padding-bottom:4px; }
.replay-inline .replay-transport,.replay-inline .replay-settings { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; flex-shrink:0; }
.replay-inline .replay-settings>div:not([hidden]) { display:flex; align-items:center; gap:6px; }
.replay-inline .replay-controls .button { white-space:nowrap; }
.replay-inline .button-small { font-size:.64rem; padding:6px 8px; }
.replay-inline .replay-controls label { font-size:.62rem; margin-bottom:3px; }
.replay-inline select { min-height:28px; padding:4px 22px 4px 7px; font-size:.66rem; }
.replay-inline .replay-metadata { flex-shrink:0; margin:8px 0 5px; font-size:.65rem; gap:4px 9px; }
.replay-inline #replay-position { font-size:.64rem; margin-bottom:0; flex-shrink:0; }
.replay-inline #replay-slider { min-height:22px; margin:0; flex-shrink:0; }
.replay-inline .replay-change-summary { font-size:.63rem; color:#63748b; flex-shrink:0; }
.replay-help { font-size:.63rem; color:#63748b; margin:5px 0 8px; flex-shrink:0; max-height:100px; overflow:auto; }
.replay-help summary { cursor:pointer; }
.replay-help .replay-change-controls { margin:5px 0; font-size:.63rem; }
.replay-help .replay-legend { flex-wrap:wrap; }
.replay-help .field-help { font-size:.63rem; }
.essay-replay-slot .replay-text { flex:1; min-height:0; max-height:none; padding:16px 0; border:0; border-top:1px solid #edf0f3; border-radius:0; font:.84rem/1.72 Georgia,"Times New Roman",serif; }
.replay-inline .message { flex-shrink:0; margin:5px 0; padding:6px; font-size:.66rem; }
@media(max-width:560px){.replay-inline .replay-controls>div {width:auto;}.replay-inline .replay-transport .button {flex:0 1 auto;}}

.replay-inline-heading h3 { margin-right:auto; }
.replay-inline .replay-controls label { margin:0; white-space:nowrap; }
.replay-inline #replay-position { margin:3px 0 0; }

/* Staff sections share the same workspace without a large overview header. */
.admin-tabs { display:flex; gap:5px; width:fit-content; max-width:100%; margin:0 0 20px; padding:5px; border:1px solid #dce5ee; border-radius:12px; background:#fff; }
.admin-tab { border:0; border-radius:8px; padding:10px 25px; background:transparent; color:#63768f; font:650 .87rem "DM Sans",sans-serif; cursor:pointer; }
.admin-tab:hover { background:#f1f5f9; }
.admin-tab[aria-selected="true"] { color:#fff; background:#365c82; }
.admin-tab:focus-visible { outline:3px solid #92aed077; outline-offset:2px; }
.admin-tab-panel { min-width:0; }
.admin-tab-panel>.admin-panel:first-child { margin-top:0; }
@media(max-width:560px){.admin-tabs {width:100%;}.admin-tab {flex:1; padding:10px 12px;}}

/* Center staff navigation on the logo row, independently of the side widths. */
.admin-page .classroom-header { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.admin-page .classroom-header>.brand { grid-column:1; grid-row:1; justify-self:start; }
.admin-page .classroom-header>.admin-tabs { grid-column:2; grid-row:1; justify-self:center; margin:0; }
.admin-page .classroom-header>.header-tools { grid-column:3; grid-row:1; justify-self:end; }
@media(max-width:900px){
  .admin-page .classroom-header { grid-template-columns:minmax(0,1fr) auto; }
  .admin-page .classroom-header>.header-tools { grid-column:2; }
  .admin-page .classroom-header>.admin-tabs { grid-column:1/-1; grid-row:2; width:fit-content; }
}

.original-essay-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.timeline-unfocused-shade { fill:#ef435b; opacity:.13; }
.timeline-unfocused-mark { fill:#ef435b; }

/* Replay uses the full essay column; the same header button exits the mode. */
#live-observation .professor-review-layout:has(>.essay-review.is-replaying) { grid-template-columns:minmax(0,1fr); }
#live-observation .professor-review-layout:has(>.essay-review.is-replaying)>.feedback-panel { display:none; }
#original-replay-open[aria-pressed="true"],#rewrite-replay-open[aria-pressed="true"] { color:#235b88; background:#e8f1fb; border-color:#b9d2e8; }

/* Classes share the compact selector and detail layout used by Essays. */
.class-session-selectors { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:65%; margin-left:auto; }
.classes-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.classes-toolbar p { margin:0; }
.selected-class-detail { margin-top:22px; }
#selected-class-title { font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.25; margin:4px 0 12px; }
.selected-class-detail>.panel-heading { align-items:center; margin-bottom:20px; }
.selected-class-detail .panel-heading .compact { display:block; margin-top:7px; }
.selected-class-detail .class-summary { margin-bottom:0; }
.selected-class-detail .session-action-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.selected-class-detail .session-action-group { display:flex; flex-direction:column; gap:16px; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fcfdfe; }
.selected-class-detail .session-action-label { font-size:1rem; color:var(--ink); padding:0; }
.selected-class-detail .session-action-buttons { order:2; margin-top:auto; }
.class-instructions-preview { min-width:0; }
.class-instructions-preview h4 { margin:0 0 9px; font-size:.73rem; color:var(--muted); font-weight:500; }
.class-instructions-preview p { white-space:pre-wrap; max-height:260px; overflow:auto; margin:0; font-size:.85rem; line-height:1.8; }
.class-rewrite-note { margin:0; }
.classes-workspace #deleted-sessions { margin-top:22px; }
@media(max-width:680px){.class-session-selectors {max-width:100%;}.selected-class-detail .session-action-groups {grid-template-columns:1fr;}.classes-toolbar {align-items:flex-start;}}

/* Compact class selectors sit beside the timeline title. */
.observation-heading { align-items:center; gap:20px; }
.observation-heading>div:first-child { flex:1; min-width:0; }
.observation-session-cards { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin:0 0 0 auto; max-width:50%; }
.observation-session-card { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:9px; width:168px; height:76px; padding:10px; border:1px solid #d7e1ec; border-radius:8px; background:#fbfcfe; color:#41536c; text-align:left; cursor:pointer; font-family:"DM Sans",sans-serif; }
.observation-session-label { display:flex; flex-direction:column; gap:4px; min-width:0; }
.observation-session-card .observation-session-number { flex-shrink:0; font-size:1.65rem; font-weight:700; line-height:1; color:inherit; font-variant-numeric:tabular-nums; }
.observation-session-card strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:.73rem; line-height:1.3; }
.observation-session-card span { color:#73849b; font-size:.6rem; line-height:1.4; }
.observation-session-card:hover { background:#f1f6fc; border-color:#a6bfd9; }
.observation-session-card[aria-pressed="true"] { border-color:#365c82; background:#365c82; color:#fff; }
.observation-session-card[aria-pressed="true"] span { color:#fff; }
.observation-session-card:focus-visible { outline:3px solid #92aed077; outline-offset:3px; }
.observation-session-prompt { margin:0; color:#73849b; font-size:.8rem; }
@media(max-width:680px){.observation-heading {flex-direction:column;align-items:stretch;}.observation-session-cards {max-width:100%;}}

/* Focus reminder leaves autosaving and lease renewal running behind the modal. */
.focus-warning { width:min(520px,calc(100vw - 32px)); padding:30px; border:1px solid #f0c7cb; border-radius:18px; background:#fff5f5; color:#553c43; box-shadow:0 20px 80px #3a18252b; }
.focus-warning::backdrop { background:rgb(35 48 73 / 28%); }
.focus-warning .eyebrow { color:#a54450; }
.focus-warning h2 { color:#762f3a; font-size:1.65rem; margin-bottom:16px; }
.focus-warning p { font-size:.94rem; line-height:1.7; }
.focus-warning .focus-warning-accept { width:100%; margin-top:8px; color:#fff; background:#bd3547; border-color:#bd3547; }
.focus-warning .focus-warning-accept:hover { color:#fff; background:#a42b3b; border-color:#a42b3b; }
.focus-warning .focus-warning-accept:focus-visible { outline-color:#ce6877; }

.button-round-open { color:#276346; background:#e8f7ed; border-color:#bfdfcb; }
.button-round-open:hover:not(:disabled) { color:#1e573a; background:#d9f0e1; border-color:#98c9ac; }
.button-round-close { color:#a03b46; background:#fff0f1; border-color:#edc7cc; }
.button-round-close:hover:not(:disabled) { color:#892c37; background:#fce1e5; border-color:#dca2ab; }

/* Replay uses the same time axis and step curve as the student tiles. */
.replay-timeline { position:relative; width:100%; height:140px; flex-shrink:0; cursor:crosshair; touch-action:none; border-radius:10px; background:#f7faff; }
.replay-timeline svg { display:block; width:100%; height:100%; overflow:visible; }
.replay-chart-label { fill:#647b96; font-size:11px; }
.replay-playhead { stroke:#365c82; stroke-width:2; stroke-dasharray:4 3; }
.replay-playdot { fill:#365c82; stroke:white; stroke-width:2; }
.replay-timeline-key { font-size:.72rem; color:#647b96; margin:4px 0 8px; }
.replay-inline #replay-slider { position:absolute; width:1px; height:1px; min-height:0; clip-path:inset(50%); overflow:hidden; }
.replay-inline #replay-slider:focus-visible { position:static; width:100%; height:24px; clip-path:none; }
@media(max-width:560px){.replay-timeline {height:120px;}}

.replay-inline .replay-metadata { flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; align-items:center; padding-bottom:4px; }
.replay-inline .replay-metadata #replay-position { margin:0 0 0 auto; padding-left:12px; font-size:inherit; }