:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202c3c; background: #f3f5f8; line-height: 1.5; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
.site-header { min-height: 76px; padding: 20px 5%; background: #fff; border-bottom: 1px solid #e0e5ed; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.identity { display: flex; align-items: center; gap: 20px; color: #5e6c7f; font-size: .875rem; }.institution { color: #1c355a; font-size: 1.25rem; font-weight: 750; letter-spacing: -.04em; }.divider { width: 1px; height: 21px; background: #d8dfe8; }.pilot-label { color: #465974; background: #eef2f8; border-radius: 5px; padding: 5px 10px; font-size: .8125rem; white-space: nowrap; }
main { max-width: 1056px; padding: 40px 28px 0; margin: auto; }.card { background: #fff; border: 1px solid #d6dee9; border-radius: 9px; box-shadow: 0 4px 18px #20314c05; }.login-card { max-width: 460px; margin: 8vh auto 0; padding: 34px; }.eyebrow { color: #526582; font-size: .75rem; font-weight: 650; letter-spacing: .12em; margin: 0 0 5px; }h1 { font-size: clamp(1.65rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.25; margin: 0 0 12px; }h2 { font-size: 1.18rem; line-height: 1.35; margin: 0 0 12px; }.intro { color: #617085; margin: 0 0 26px; }
label { display: block; color: #33445b; font-size: .875rem; font-weight: 600; margin: 16px 0 6px; }input[type=text], input[type=password], input:not([type]), textarea { width: 100%; border: 1px solid #cbd5e3; border-radius: 6px; color: #253246; background: #fff; padding: 10px 11px; }input:focus, textarea:focus { outline: 3px solid #7da7df55; border-color: #527dad; }input[type=radio], input[type=checkbox] { width: auto; margin: 0; accent-color: #2d629d; }
button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 15px; border: 1px solid #cbd5e3; border-radius: 7px; color: #27486e; background: #fff; cursor: pointer; font-size: .875rem; font-weight: 550; white-space: nowrap; }button:hover:not(:disabled) { background: #eaf0f9; border-color: #7693b7; }button:disabled { color: #6e7a8d; background: #f4f6f9; cursor: default; }.primary-button { color: #fff; background: #27598f; border-color: #27598f; }.primary-button:hover:not(:disabled) { color: #fff; background: #204c7d; }.login-card button[type=submit] { width: 100%; margin-top: 25px; }.quiet-button { color: #27486e; }.error-message { color: #9d342b; font-size: .875rem; }.site-footer { padding: 28px 24px; color: #697689; font-size: .75rem; text-align: center; }
.session-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }.session-top h1 { margin-bottom: 0; }.session-actions { display: flex; gap: 10px; }.session-meta { display: flex; gap: 38px; padding: 14px 20px; margin-bottom: 18px; }.meta-item { display: flex; flex-direction: column; gap: 2px; color: #33445b; font-size: .9rem; }.meta-item strong { color: #697689; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }.pilot-banner { display: flex; align-items: baseline; gap: 12px; color: #465974; background: #edf3fb; border: 1px solid #d7e3f1; border-radius: 7px; padding: 11px 14px; margin-bottom: 18px; font-size: .875rem; }.pilot-banner strong { color: #27486e; }.instructions, .waiting-card, .task { padding: 24px; margin-bottom: 18px; }.instructions ul { margin: 8px 0 0; padding-left: 22px; color: #465974; }.waiting-card { border-left: 3px solid #8199b7; }.stage-label, .section-kicker { color: #526582; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.waiting-card p { color: #617085; }.network-note { font-size: .875rem; margin-bottom: 0; }.task-text { white-space: pre-wrap; color: #33445b; margin: 0; }.task-requirement { color: #526582; font-size: .875rem; font-weight: 600; margin-bottom: 0; }
.editor-shell { overflow: hidden; background: #fff; border: 1px solid #d6dee9; border-radius: 9px; box-shadow: 0 4px 18px #20314c05; }.editor-toolbar { min-height: 54px; padding: 13px 24px; border-bottom: 1px solid #e5e9ef; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.editor-toolbar label { margin: 0; }.save-status { color: #596b7e; font-size: .8125rem; text-align: right; }.save-status.error { color: #9d342b; }.paper { padding: 42px 7% 30px; }#essay { display: block; min-height: max(340px, calc(100dvh - 500px)); resize: vertical; border: 0; border-radius: 0; padding: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.1875rem; line-height: 1.9; overflow-wrap: break-word; }.editor-shell:focus-within { border-color: #7e9cbd; box-shadow: 0 0 0 2px #7e9cbd18; }.editor-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; border-top: 1px solid #e5e9ef; padding: 13px 24px; font-size: .875rem; }.editor-footer #word-count { color: #233b5e; font-weight: 600; }.timer { color: #617085; font-size: .8125rem; }.editor-controls { display: flex; justify-content: flex-start; gap: 10px; margin: 0; padding: 16px 24px; border-top: 1px solid #e5e9ef; background: #f7f9fc; }.workspace-note { color: #617085; font-size: .8125rem; margin: 10px 4px 18px; }.conflict-panel { color: #5d342d; background: #fff7f3; border: 1px solid #edc6bb; border-radius: 7px; padding: 15px; margin: 15px 0; font-size: .875rem; }.conflict-panel p { margin: 5px 0 12px; }.conflict-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.writing-workspace { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 18px; }.writing-workspace:has(.chat-host) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }.chat-host { min-width: 0; }.chat-panel { display: flex; min-height: 520px; max-height: calc(100dvh - 140px); flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #d6dee9; border-radius: 9px; box-shadow: 0 4px 18px #20314c05; }.chat-heading { padding: 17px 19px 8px; }.chat-heading h2 { margin: 0; }.chat-status { min-height: 22px; margin: 0; padding: 0 19px 10px; color: #617085; font-size: .8125rem; }.chat-status.error { color: #9d342b; }.chat-transcript { flex: 1 1 auto; min-height: 210px; overflow-y: auto; padding: 6px 15px 16px; border-top: 1px solid #e5e9ef; border-bottom: 1px solid #e5e9ef; background: #fbfcfe; }.chat-empty { color: #697689; font-size: .875rem; margin: 15px 4px; }.chat-message { max-width: 94%; margin: 11px 0; padding: 10px 12px; border: 1px solid #d6dee9; border-radius: 8px; background: #fff; }.chat-message-user { margin-left: auto; border-color: #c2d4e8; background: #f0f6fd; }.chat-message-meta { display: flex; justify-content: space-between; gap: 12px; color: #526582; font-size: .72rem; font-weight: 650; }.chat-message-meta time { color: #7b8796; font-weight: 450; }.chat-message-content { white-space: pre-wrap; overflow-wrap: anywhere; color: #253246; font-size: .9rem; line-height: 1.55; margin: 5px 0 0; }.chat-form { padding: 13px 15px 15px; }.chat-form label { margin: 0 0 6px; }.chat-form textarea { min-height: 86px; resize: vertical; font-size: .9rem; line-height: 1.45; }.chat-form textarea:disabled { color: #68778a; background: #f4f6f9; }.chat-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }.chat-hint { color: #697689; font-size: .75rem; }.chat-readonly-host { max-width: 790px; margin: 18px 0 30px; }.chat-readonly-host .chat-panel { min-height: 280px; max-height: none; }.chat-readonly-host .chat-form { display: none; }.chat-readonly-host .chat-transcript { max-height: 560px; }
.reflection-form { max-width: 790px; }.reflection-intro { padding: 20px 24px; margin-bottom: 15px; }.reflection-intro h2 { margin: 0; }.reflection-meta { display: flex; gap: 30px; padding: 13px 18px; margin-bottom: 15px; color: #465974; font-size: .875rem; }.form-intro { white-space: pre-line; color: #617085; font-size: .9rem; margin: 15px 2px 24px; }.reflection-question { border: 1px solid #d6dee9; border-radius: 8px; padding: 17px 19px 19px; margin: 0 0 14px; }.reflection-question legend { color: #253b5b; font-weight: 650; padding: 0 5px; }.question-prompt { white-space: pre-line; color: #465974; font-size: .9rem; margin: 0 0 13px; }.choice { display: flex; align-items: flex-start; gap: 9px; color: #33445b; font-weight: 400; margin: 8px 0; }.choice span { line-height: 1.35; }.reflection-question input[type=text] { margin-top: 4px; }.reflection-question textarea { margin-top: 9px; min-height: 68px; font-size: .9rem; }.reflection-subtitle { margin: 28px 0 14px; }.reflection-actions { display: flex; justify-content: flex-end; margin: 18px 0 30px; }.reflection-save-status { margin: 12px 0 0; }.essay-readonly { color: #465974; margin: 16px 0 30px; }.essay-readonly summary { cursor: pointer; font-weight: 600; }.essay-readonly pre { padding: 17px; overflow-x: auto; color: #253246; background: #fff; border: 1px solid #d6dee9; white-space: pre-wrap; font: 1rem/1.6 Georgia, serif; }.complete-card { max-width: 700px; padding: 30px; margin: 20px auto; }.complete-card h2 { margin-top: 8px; }.complete-card p { color: #465974; }
.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; }.routing-note { color: #617085; font-size: .875rem; margin: 12px 0 0; }
/* Give writing panels the viewport width and one shared, scrollable height. */
main:has(.writing-workspace) { max-width: none; width: 100%; padding-inline: clamp(16px, 2vw, 40px); }
.writing-workspace { --panel-height: max(520px, calc(100dvh - 110px)); }
.writing-workspace > .editor-shell, .writing-workspace > .chat-host { height: var(--panel-height); min-height: 0; }
.writing-workspace .editor-shell { display: flex; flex-direction: column; }
.writing-workspace .editor-toolbar, .writing-workspace .editor-footer, .writing-workspace .editor-controls { flex: 0 0 auto; }
.writing-workspace .paper { display: flex; flex: 1 1 auto; min-height: 0; padding: 30px clamp(24px, 3vw, 56px); }
.writing-workspace #essay { flex: 1 1 auto; height: 100%; min-height: 0; resize: none; overflow-y: auto; }
.writing-workspace .chat-panel { height: 100%; min-height: 0; max-height: none; }
.writing-workspace .chat-heading, .writing-workspace .chat-status, .writing-workspace .chat-form { flex: 0 0 auto; }
.writing-workspace .chat-transcript { min-height: 0; }
.chat-message-pending .chat-message-content { color: #617085; font-size: 1.35rem; font-weight: 700; letter-spacing: .18em; animation: chat-waiting 1.2s ease-in-out infinite; }
@keyframes chat-waiting { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .chat-message-pending .chat-message-content { animation: none; } }
.writing-workspace .chat-form textarea { resize: none; }
@media (max-width: 800px) { .writing-workspace, .writing-workspace:has(.chat-host) { grid-template-columns: 1fr; }.chat-host { position: static; }.chat-panel { min-height: 420px; max-height: none; }.chat-readonly-host { max-width: none; } }
@media (max-width: 600px) { .site-header { padding: 16px 20px; min-height: 66px; flex-wrap: wrap; gap: 10px; }.identity { gap: 12px; }main { padding: 26px 14px 0; }.login-card { margin-top: 3vh; padding: 24px 20px; }.session-top { flex-direction: column; gap: 12px; }.session-meta { gap: 25px; }.editor-toolbar, .editor-footer { padding: 12px 16px; }.paper { padding: 25px 22px; }#essay { min-height: 360px; font-size: 1.125rem; }.reflection-meta { flex-direction: column; gap: 4px; }.editor-controls { justify-content: stretch; }.editor-controls button { flex: 1; }.conflict-actions button { flex: 1; white-space: normal; }.chat-form { padding: 12px; }.chat-actions { align-items: flex-end; flex-direction: column; }.chat-actions button { width: 100%; }.chat-hint { align-self: flex-start; } }

.task-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.task-summary::-webkit-details-marker { display: none; }
.task-summary h2 { margin: 0; }
.task-summary:focus-visible { outline: 3px solid #7da7df; outline-offset: 6px; border-radius: 3px; }
.task-toggle { color: #27598f; font-size: .8125rem; font-weight: 600; }
.task[open] .task-summary { margin-bottom: 14px; }

.completion-illustration { display: block; width: min(100%, 360px); height: auto; margin: 24px auto 0; border-radius: 8px; }

.instructions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 28%); align-items: center; gap: 24px; }
.instructions-copy { min-width: 0; }
.instructions-illustration { display: block; width: 100%; max-width: 270px; height: auto; justify-self: end; border-radius: 8px; }
@media (max-width: 680px) {
  .instructions { grid-template-columns: 1fr; gap: 12px; }
  .instructions-illustration { width: min(100%, 220px); justify-self: center; }
}