/* Shared visual contract. Loaded last on student, teacher and operations pages.
   Reference layout is retained; 14px minimum, 32px maximum at a 16px root. */
:root {
  --font-size-xs: .875rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.125rem;
  --font-size-reading: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --text-title: clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
  --touch-size: 2.75rem;
  --ui-ink: #303632;
  --ui-muted: #56655b;
  --ui-green: #354f3c;
  --ui-line: #d8e1d5;
  --ui-soft: #fafcf8;
  --ui-radius: .5rem;
  --ui-focus: #476c53;
}
body.student-app, body.admin-app {
  --touch-size: 2.75rem;
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  font-family: var(--font-family-ui); font-size: var(--font-size-sm);
  line-height: 1.75; color: var(--ui-ink); --muted: var(--ui-muted);
  --green: var(--ui-green);
}
.student-app > main, .admin-app > #workspace { flex: 1; width: 100%; }
body.student-app h1, body.admin-app h1 { font-size: var(--text-title); line-height: 1.45; }
body.student-app h2 { font-size: var(--font-size-reading); line-height: 1.5; }
body.student-app h3 { font-size: var(--font-size-md); line-height: 1.6; }
.student-app .student-header, .admin-app .handoff-topbar {
  height: auto; min-height: 4.5rem; padding: .5rem clamp(1rem, 3vw, 3rem);
  background: #fff; border-bottom: 1px solid var(--ui-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.student-app .student-logo, .admin-app .handoff-brand img {
  display: block; width: 9.5rem; height: 3rem; object-fit: contain;
}
.student-app .student-header nav, .admin-app .handoff-top-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
}
.student-app .student-header nav button, .admin-app .handoff-top-actions a {
  display: inline-flex; align-items: center; min-height: var(--touch-size);
  padding: .5rem .75rem; font-size: var(--font-size-xs); border-radius: var(--ui-radius);
}
.student-app .student-header nav button:hover, .admin-app .handoff-top-actions a:hover { background: #edf3e8; }
.student-app .coin-preview, .student-app .coin-preview small { font-size: var(--font-size-xs); }
.student-app .save-strip {
  position: static; top: auto; right: auto; max-width: none;
  min-height: 2.5rem; padding: .5rem clamp(1rem, 3vw, 3rem);
  font-size: var(--font-size-xs); background: var(--ui-soft); border-bottom: 1px solid #e5ebe2;
}
body.student-app button, body.admin-app button,
.admin-app .handoff-dashboard .btn, .admin-app .handoff-dashboard .row-open {
  min-height: var(--touch-size); border-radius: var(--ui-radius);
  padding: .625rem .875rem; font-size: var(--font-size-xs);
  font-family: var(--font-family-ui); font-weight: 600; line-height: 1.6;
  white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
body.student-app button.primary, body.admin-app button.primary,
.admin-app .handoff-dashboard .btn.primary {
  color: #fff; background: var(--ui-green); border: 1px solid var(--ui-green);
}
body.student-app button:disabled, body.admin-app button:disabled {
  cursor: not-allowed; opacity: .55;
}
body.student-app summary { min-height: var(--touch-size); padding-block: .625rem; font-size: var(--font-size-xs); }
body.student-app :is(button,a,input,textarea,select,summary):focus-visible,
body.admin-app :is(button,a,input,textarea,select,summary):focus-visible {
  outline: 3px solid var(--ui-focus); outline-offset: 3px;
}
body.student-app .page-heading { gap: 1.5rem; }
.student-app .intro-copy, .student-app .main-task, .student-app .main-task p,
.student-app .word-meaning p, .student-app .self-check, .student-app .whole-review p,
.student-app .closing-card p { font-size: var(--font-size-sm); line-height: 1.85; }
.student-app .paper-heading { height: auto; min-height: 3.5rem; padding: .75rem 1.5rem; flex-wrap: wrap; }
.student-app .paper-heading h2, .student-app .paper-heading h3 { font-size: var(--font-size-md); white-space: normal; }
.student-app .reading-buttons { flex-wrap: wrap; gap: .5rem; }
.student-app .reading-buttons button { min-height: var(--touch-size); padding: .5rem .75rem; font-size: var(--font-size-xs); }
.student-app .student-progress-tools { width: 12rem; max-width: 100%; flex-basis: 12rem; }
.student-app .steps button { min-height: var(--touch-size); font-size: var(--font-size-xs); }
.student-app[data-stage=prep] .steps { flex-wrap: wrap; }
.student-app .workspace-grid, .student-app .workspace-grid.with-support,
.student-app[data-stage=prep] .workspace-grid { grid-template-columns: minmax(0,1fr) minmax(20rem,23rem); gap: 1.5rem; }
.student-app .writing-panel textarea, .student-app .writing-panel.prep textarea,
.student-app .editor-annotations, .student-app .writing-panel.prep .editor-annotations,
.student-app .original-text, .student-app .submitted-text, .student-app .history-text {
  font-family: var(--font-family-ui); font-size: var(--font-size-reading);
  line-height: 1.9; padding: 1.5rem; letter-spacing: .01em;
}
.student-app .reading-text, .student-app .reading-text p,
.student-app .reading-reference .reading-text p { font-size: var(--font-size-reading); line-height: 1.9; }
.student-app .reading-text p:first-child, .student-app .reading-reference .reading-text p:first-child {
  font-size: var(--text-title); line-height: 1.5;
}
.student-app .support-header { height: auto; min-height: 3.5rem; padding: .5rem 1rem; }
.student-app .support-header h2 { font-size: var(--font-size-sm); }
.student-app .support-content p, .student-app .support-content label,
.student-app .support-content input, .student-app .support-content textarea,
.student-app .coach-message p, .student-app .word-entry p,
.student-app .resource-card blockquote, .student-app .help-facts blockquote,
.student-app #sketch-panel textarea { font-size: var(--font-size-sm); line-height: 1.8; }
.student-app .coach-conversation { max-height: 55dvh; }
.student-app .composer-bottom { flex-wrap: wrap; }
.student-app .composer-bottom button { width: var(--touch-size); height: var(--touch-size); flex-basis: var(--touch-size); }
.student-app .tool-switcher { flex-wrap: wrap; }
.student-app .tool-switcher button { white-space: normal; gap: .375rem; }
.student-app .word-search-control input { min-height: var(--touch-size); font-size: var(--font-size-sm); }
.student-app .word-search-control button { width: var(--touch-size); height: var(--touch-size); flex-basis: var(--touch-size); }
.student-app .word-entry h3 { font-size: var(--font-size-md); }
.student-app #word-results { max-height: 60dvh; }
.student-app .source-review-shortcut, .student-app[data-stage=prep] .source-review-shortcut {
  position: static; margin: 0 0 .5rem auto; padding: .5rem .75rem;
}
.student-app #writing-controls .primary, .student-app .actions button { font-size: var(--font-size-sm); }
.student-app .whole-review-heading { flex-wrap: wrap; }
/* Text annotations stay aligned with the editor; compact gutter marks remain local controls. */
.student-app .review-marker { min-height: 1.25rem; min-width: 1.25rem; padding: 0; border-radius: .25rem; }
.student-app .review-insertion-point { border-radius: 0; min-height: var(--touch-size); }
.student-app .review-legend { line-height: 1.8; padding-block: .5rem; }
.admin-app .handoff-dashboard { --green: var(--ui-green); --green-dark: var(--ui-green); --muted: var(--ui-muted); }
.admin-app #content { padding-bottom: 2.5rem; }
.admin-app .handoff-layout { min-height: calc(100dvh - 10rem); }
.admin-app #sidebar-wrapper { height: auto; align-self: start; min-height: calc(100dvh - 4.5rem); }
.site-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: .5rem 1rem; margin-top: auto; padding: 1.25rem clamp(1rem,3vw,3rem);
  background: #fff; color: var(--ui-muted); border-top: 1px solid var(--ui-line);
  font: 400 var(--font-size-xs)/1.7 var(--font-family-ui);
}
.site-footer > span:first-child { color: var(--ui-green); font-weight: 700; }
#action-confirm { width: min(32rem,calc(100vw - 2rem)); border: 1px solid var(--ui-line); border-radius: .75rem; padding: 1.5rem; color: var(--ui-ink); box-shadow: 0 1.5rem 5rem #172d2930; }
#action-confirm::backdrop { background: #172d2966; }
#action-confirm h2 { margin: 0; font-size: var(--font-size-reading); }
#action-confirm p { margin-block: 1rem 1.5rem; font-size: var(--font-size-sm); }
#action-confirm footer { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
@media(max-width:64rem) {
  .student-app .workspace-grid, .student-app .workspace-grid.with-support, .student-app[data-stage=prep] .workspace-grid { display: flex; flex-direction: column; }
  .student-app .support-area { position: static; width: 100%; }
  .student-app .coach-panel { width: 100%; max-height: none; }
  .student-app .tool-switcher { max-width: none; }
  .student-app .writing-grid.has-reading { display: block; }
  .admin-app #sidebar-wrapper { min-height: 0; }
}
@media(max-width:40rem) {
  .student-app .student-header, .admin-app .handoff-topbar { padding-inline: 1rem; gap: .5rem; flex-wrap: wrap; }
  .student-app .student-header nav { gap: .5rem; }
  .student-app .student-logo, .admin-app .handoff-brand img { width: 8.25rem; height: 2.75rem; }
  .student-app .page-heading { display: block; }
  .student-app main { padding-inline: 1rem; }
  .student-app .student-progress-tools, .student-app[data-stage=prep] .student-progress-tools { width: auto; max-width: 100%; flex-basis: auto; }
  .student-app .steps { flex-wrap: wrap; }
  .student-app .paper-heading { padding: .75rem 1rem; }
  .student-app .prep-compose-actions { flex-direction: column; align-items: stretch; }
  .student-app #writing-controls .actions { flex-wrap: wrap; }
  .student-app .editor-comparison.comparing { display: block; }
  .student-app .reading-body { padding: 1.25rem; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}
/* Override compact reference selectors at their component boundary. */
.student-app[data-stage=prep] .page-heading h1,
.student-app .page-heading h1 { font-size: var(--text-title); line-height: 1.5; }
body.student-app .support-area button, .student-app #writing-controls button {
  min-height: var(--touch-size); padding: .625rem .875rem; border-radius: var(--ui-radius);
}
body.student-app .support-area .composer-bottom button,
body.student-app .support-area .word-search-control button { padding: 0; }
.student-app .source-review-shortcut, .student-app[data-stage=prep] .source-review-shortcut { min-height: var(--touch-size); }
.student-app .save-strip { align-self: stretch; width: 100%; text-align: right; justify-content: flex-end; }
.admin-app .account-menu { margin: 0; padding: 0; border: 0; }
.admin-app .account-menu > div { top: calc(100% + .5rem); }
.admin-app .handoff-dashboard .panel-head { gap: 1rem; flex-wrap: wrap; }
.admin-app .handoff-dashboard .panel-head .btn { flex-shrink: 0; }
@media(max-width:40rem) {
  .admin-app .handoff-top-actions { width: auto; flex: 1; gap: .25rem; justify-content: flex-end; }
  .admin-app .handoff-top-actions a { padding-inline: .375rem; }
  .admin-app .account-menu summary { font-size: var(--font-size-xs); }
}
body.student-app .activity-entry-row button,
body.student-app .inline-sketch > button,
body.student-app .writing-panel button:not(.review-marker) { min-height: var(--touch-size); }
.student-app .activity-entry-row { height: auto; min-height: var(--touch-size); }
/* Compact page actions: context lives in the selected value, never above it. */
.admin-app .handoff-dashboard .hero { align-items: center; gap: 1.5rem; }
.admin-app .handoff-dashboard .hero h1 { margin-bottom: 0; }
.admin-app .handoff-dashboard .hero > .hero-actions {
  display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: .75rem; min-width: 0; max-width: 100%;
}
.admin-app .handoff-dashboard .hero > .hero-actions > :is(select,button,a) {
  box-sizing: border-box; height: var(--touch-size); min-height: var(--touch-size);
  margin: 0; padding: 0 .875rem; font-size: var(--font-size-sm); line-height: 1.25;
  border-radius: var(--ui-radius); vertical-align: middle;
}
.admin-app .handoff-dashboard .hero > .hero-actions > select { width: auto; max-width: 15rem; }
.admin-app .handoff-dashboard .hero > .hero-actions > :is(button,a) { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.admin-app .handoff-dashboard .hero > .hero-actions .icon { flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; }
.admin-app .inline-guide { margin-top: 1rem; padding-top: .5rem; font-size: var(--font-size-xs); }
.admin-app .inline-guide summary { color: var(--ui-muted); font-size: var(--font-size-xs); }
.admin-app .inline-guide p { line-height: 1.8; font-size: var(--font-size-xs); }
.admin-app .optional-fields { margin-top: 1.25rem; }
.admin-app .optional-fields summary { font-size: var(--font-size-xs); }
.student-app .intro-copy:empty, .student-app .word-search-error:empty { display: none; }
.student-app .prep-compose-actions { justify-content: flex-end; }
@media(max-width:64rem) {
  .admin-app .handoff-dashboard .hero { align-items: flex-start; flex-wrap: wrap; }
  .admin-app .handoff-dashboard .hero > .hero-actions { justify-content: flex-start; }
}
@media(max-width:40rem) {
  .admin-app .handoff-dashboard .hero > .hero-actions { width: 100%; gap: .5rem; }
  .admin-app .handoff-dashboard .hero > .hero-actions > :is(select,button,a) { padding-inline: .75rem; }
}
.student-app .help-feedback [role=status]:empty { display: none; }
.admin-app #advanced-navigation { border: 0; padding-top: 0; }
@media(max-width:63.9375rem) {
  .admin-app #sidebar-wrapper { align-items: center; }
  .admin-app #sidebar-wrapper > nav { padding: 0; gap: .5rem; }
  .admin-app #sidebar-wrapper > nav a { padding: .625rem .75rem; }
  .admin-app #advanced-navigation { margin: 0; padding: 0; }
  .admin-app #advanced-navigation > summary { min-height: var(--touch-size); padding: .625rem .5rem; }
}

/* Reference-aligned columns: task and writing share the same left edge and width. */
@media(min-width:901px){
 .student-app .workspace-grid,.student-app .workspace-grid.with-support,.student-app[data-stage=prep] .workspace-grid{grid-template-columns:minmax(0,1fr) clamp(19.5rem,24vw,22rem);gap:1.5rem}
 .student-app:is([data-stage=main],[data-stage=review]) .page-heading{display:grid;grid-template-columns:minmax(0,1fr) clamp(19.5rem,24vw,22rem);gap:1.5rem}
 .student-app:is([data-stage=main],[data-stage=review]) .student-progress-tools{width:auto;max-width:none;min-width:0;padding:1rem}
 .student-app .writing-grid.has-reading{grid-template-columns:minmax(0,1fr)}
}
.student-app .writing-panel.prep textarea{min-height:18rem;height:clamp(18rem,32dvh,24rem)}
.student-app[data-stage=main] .writing-panel textarea{min-height:22rem;height:clamp(22rem,47dvh,36rem)}
.student-app[data-stage] .source-review-shortcut{position:static;display:block;margin:.5rem 0 .5rem auto;font-size:.875rem}
.student-app .review-banner{margin-bottom:1rem;border-left:3px solid #657f60}
.student-app .student-request-reason{white-space:pre-wrap;overflow-wrap:anywhere;margin:.5rem 0;color:var(--ui-ink)}
.admin-app .request-count{display:inline-grid;place-items:center;min-width:1.5rem;min-height:1.5rem;border-radius:1rem;background:#496447;color:#fff;font-size:.875rem;padding:0 .35rem}
.admin-app .request-count[hidden]{display:none}
.admin-app .source-request-text{padding:1rem;border:1px solid var(--ui-line);border-radius:.75rem;background:var(--ui-soft);margin:.75rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-app .source-request-text h4{margin:0 0 .5rem;font-size:1rem}
.admin-app .source-request-text p{font-size:1rem;line-height:1.75;margin:.5rem 0}
.admin-app .queue-item p{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:900px){.student-app .writing-panel.prep textarea,.student-app[data-stage=main] .writing-panel textarea{min-height:18rem;height:36dvh}.student-app .source-review-shortcut{min-height:2.75rem}}

/* One next action; optional review tools stay collapsed until requested. */
.student-app .review-finish { padding:1rem 0 0; border-top:1px solid var(--ui-line); }
.student-app .review-finish > p { margin:0 0 .75rem; color:var(--ui-muted); font-size:1rem; line-height:1.65; }
.student-app .next-step { justify-content:flex-end; margin:.5rem 0 0; }
.student-app .next-step > .primary { min-height:3rem; }
.student-app .compare-tools { justify-content:space-between; gap:.5rem; padding:.5rem 1rem; }
.student-app .compare-tools[hidden], .student-app .comparison-options[hidden], .student-app .review-current-title[hidden] { display:none; }
.student-app .comparison-options { position:relative; font-size:.875rem; }
.student-app .comparison-options > summary { cursor:pointer; padding:.625rem; color:var(--ui-muted); }
.student-app .comparison-settings { padding:.75rem; display:grid; gap:.75rem; border:1px solid var(--ui-line); border-radius:.5rem; background:#fff; }
.student-app details.review-toolbar { display:block; padding:.75rem 1rem; }
.student-app details.review-toolbar > summary { cursor:pointer; font-size:.9375rem; font-weight:600; color:var(--ui-muted); }
.student-app details.review-toolbar > p { margin:.75rem 0; font-size:.875rem; }
.student-app .review-target-buttons { margin-top:.75rem; }
@media(max-width:600px){.student-app .next-step > .primary{width:100%}.student-app .compare-tools{padding:.5rem .75rem}}

/* Original and editable text start on the same baseline in the existing comparison. */
.student-app[data-stage=review] .editor-comparison.comparing :is(.original-column > h3,.review-current-title) {
  min-height:2.6875rem;
}
.student-app[data-stage=review] .editor-comparison.comparing :is(.original-text,textarea) {
  scrollbar-gutter:stable;
}
@media(min-width:701px) {
  .student-app[data-stage=review] .editor-comparison.comparing .original-column {
    border-right:0; box-shadow:inset -1px 0 var(--ui-line);
  }
}