/* The look copied from the build (../BUILD/open-path-web/app/globals.css, read only): deep navy gradient
   ground, frosted glass cards, white headings, muted secondary text, a quiet diamond motif at the edges,
   a lot of empty space. The student view is its student app; the back end is its Station. */
:root { --ink: #f2f5f9; --muted: #9fb0c6; --glass: rgba(255,255,255,0.07); --edge: rgba(255,255,255,0.14); --rose: rgba(214,134,160,0.22);
  --font-temporary: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { font-family: var(--font-temporary); color: var(--ink); line-height: 1.55;
  background: radial-gradient(1200px 800px at 18% 0%, #2f4a68 0%, #1b2c45 45%, #121a2b 100%) fixed; }
body::before, body::after { content: ""; position: fixed; width: 150px; height: 150px; border: 1px solid var(--rose); transform: rotate(45deg); pointer-events: none; }
body::before { right: -40px; top: 140px; box-shadow: 0 0 0 26px transparent, 0 0 0 27px rgba(140,170,210,0.10); }
body::after { left: -60px; bottom: 120px; border-color: rgba(140,170,210,0.12); }
a { color: var(--ink); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 500; margin: 0 0 .5rem; } h1 { font-size: 1.6rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.05rem; } h4 { font-size: .98rem; }
.shell { max-width: 1080px; margin: 0 auto; padding: 40px 32px 96px; }
.top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; flex-wrap: wrap; gap: 8px; }
.top nav a { margin-left: 22px; color: var(--muted); } .top nav a:hover, .top nav a.on { color: var(--ink); }
.card { background: var(--glass); border: 1px solid var(--edge); border-radius: 18px; padding: 20px 22px; margin: 0 0 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28); backdrop-filter: blur(14px); }
.card .card { box-shadow: none; background: rgba(255,255,255,0.04); }
.muted, .quiet { color: var(--muted); } .quiet { margin: 48px 0; }
.kind { color: var(--muted); font-size: .85em; margin-right: .4em; }
.said { border-left: 2px solid var(--rose); padding-left: 12px; color: #f0d9e1; margin: 10px 0; }
.said p { margin: 4px 0; }
button, select, input, textarea { font: inherit; color: var(--ink); background: rgba(255,255,255,0.08); border: 1px solid var(--edge); border-radius: 999px; padding: 8px 18px; }
textarea, input[type=text], input:not([type]) { border-radius: 12px; width: 100%; } textarea { padding: 12px 14px; }
input[type=number] { border-radius: 12px; width: 90px; }
button { cursor: pointer; } button:hover:not(:disabled) { background: rgba(255,255,255,0.14); } button:disabled { opacity: .45; cursor: default; }
button.link { background: none; border: none; padding: 0 6px; color: var(--muted); text-decoration: underline; border-radius: 0; }
option { color: #111; }
.row, .paths, header { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; } header h3 { margin: 0 auto 0 0; }
.status { font-size: .78rem; color: var(--muted); border: 1px solid var(--edge); border-radius: 999px; padding: 1px 9px; margin-left: 6px; }
.status.published { color: #cfe6d6; } .status.changed { color: #f0d9e1; }
pre { white-space: pre-wrap; background: rgba(0,0,0,0.22); border-radius: 12px; padding: 12px 14px; max-height: 340px; overflow: auto; font-size: .88rem; }
table { width: 100%; border-collapse: collapse; } th { text-align: left; color: var(--muted); font-weight: 400; } td, th { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; }
dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; color: var(--muted); } dd { margin: 0; color: var(--ink); }
.versions { padding-left: 18px; } .versions li.selected summary { color: var(--ink); } .versions summary { color: var(--muted); cursor: pointer; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 18px 0 28px; }
.cardlink { display: block; min-height: 120px; margin: 0; text-align: center; padding: 34px 22px; transition: background .15s; }
.cardlink:hover { background: rgba(255,255,255,0.11); text-decoration: none; } .cardlink h3 { font-size: 1.15rem; margin-bottom: 6px; }
button.asbutton { border-radius: 18px; width: 100%; font: inherit; } a.button { display: inline-block; border: 1px solid var(--edge); border-radius: 999px; padding: 8px 18px; background: rgba(255,255,255,0.08); }
.title { margin: 6px 0 22px; } .crumbs { color: var(--muted); font-size: .9rem; margin: 0 0 10px; } .crumbs a { color: var(--muted); }
.reveal { margin: 12px 0; } h2 { margin-top: 26px; } .card h2 { margin-top: 0; font-size: 1.05rem; }
ol.path { list-style: none; padding: 0; margin: 24px 0; } ol.path li.step { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; margin-bottom: 12px; }
ol.path .n { font-size: 1.5rem; color: var(--muted); text-align: center; } ol.path li.next { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.11); }
ol.path li.not-yet { opacity: .62; } .keyline { margin: 4px 0 0; } .why { margin: 6px 0 0; color: #f0d9e1; } .status.next { color: var(--ink); border-color: rgba(255,255,255,.4); }

/* ---- the student surface: one activity fills the screen, a lot of empty space, nothing crowds an edge */
.student { max-width: 860px; } .studenttop { display: flex; justify-content: space-between; margin-bottom: 44px; color: var(--muted); } .studenttop a { color: var(--muted); }
.plainlist { list-style: none; padding: 0; margin: 0; } .rowlink { display: block; margin: 0 0 12px; padding: 18px 22px; text-align: left; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 28px 0; }
.tile { display: grid; place-items: center; min-height: 130px; margin: 0; font-size: 1.15rem; }
.surface { min-height: 280px; display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; }
.surface h2 { font-size: 1.4rem; margin: 0 0 12px; } .surface p { margin: 4px 0; font-size: 1.08rem; }
.surface img { max-width: 100%; max-height: 420px; object-fit: contain; border-radius: 12px; align-self: center; }
.player { display: flex; gap: 14px; align-items: center; margin: 18px 0; } .player input[type=range] { flex: 1; padding: 0; }
.turn { font-size: 1.35rem; line-height: 1.5; margin: 22px 0; } .onscreen p { margin: 4px 0; }
.onscreen img { max-width: 100%; border-radius: 12px; margin: 8px 0; display: block; }
.ways textarea { margin-top: 12px; }
.upload input { width: auto; border: none; background: none; }
.way { margin: 0 0 18px; } .way h3 { margin-bottom: 8px; } .pages { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); }

/* ---- the switch at the top, between the two views */
.switch { position: fixed; top: 14px; right: 18px; z-index: 30; display: flex; background: rgba(0,0,0,.28); border: 1px solid var(--edge); border-radius: 999px; padding: 3px; }
.switch a { padding: 5px 14px; border-radius: 999px; color: var(--muted); font-size: .9rem; } .switch a.on { background: rgba(255,255,255,.16); color: var(--ink); } .switch a:hover { text-decoration: none; }

/* ---- the back end (the Station's look) */
.warn { color: #f0d9e1; } .ok { color: #cfe6d6; }
.checks { margin: 6px 0; padding-left: 18px; color: #f0d9e1; font-size: .92rem; }
.pageview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; } .pageview img { max-width: 100%; border-radius: 12px; }
.pageview textarea { min-height: 360px; font: .86rem/1.45 ui-monospace, Menlo, monospace; }
.diff div { white-space: pre-wrap; font: .82rem/1.4 ui-monospace, Menlo, monospace; padding: 0 6px; }
.diff .add { background: rgba(120,200,150,.16); } .diff .del { background: rgba(214,134,160,.18); text-decoration: line-through; }
.imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.imgs figure { margin: 0; font-size: .86rem; } .imgs img { width: 100%; border-radius: 10px; }
.flash { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 40; max-width: 80vw; }
.flash:empty { display: none; }
.lines li { margin: 3px 0; } .lines .k { color: var(--muted); font-size: .8rem; margin-right: 6px; }
@media (max-width: 760px) { .shell { padding: 56px 16px 80px; } .pageview { grid-template-columns: 1fr; } ol.path li.step { grid-template-columns: 30px 1fr; } ol.path li.step .do { grid-column: 2; } }

/* ---- the student view, made to present: calm, large, consistent with the build's student app */
.student { font-size: 1.12rem; }
.student .title { font-size: 2.1rem; font-weight: 500; letter-spacing: .005em; margin-bottom: 30px; }
.student .rowlink { font-size: 1.25rem; padding: 24px 28px; }
.student .tile { font-size: 1.3rem; min-height: 150px; }
.student a { text-decoration: none; }
.eyebrow { display: block; color: #cdd8e6; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.soft { color: #cdd8e6; }
.lessonrow { font-size: 1.45rem; padding: 30px 32px; }
.studenttop a { font-size: 1.05rem; }

/* the lesson player */
.lessonview { max-width: 1240px; }
.stage { min-height: 62vh; display: flex; align-items: stretch; }
.stage > * { flex: 1; }
.titlecard { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; background: var(--glass); border: 1px solid var(--edge); border-radius: 22px; box-shadow: 0 18px 40px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.titlecard .eyebrow { margin-bottom: 18px; }
.titlecard .screentext h2 { font-size: 2.6rem; line-height: 1.2; margin: 0 0 22px; }
.titlecard .screentext li { font-size: 1.55rem; }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.screentext { display: flex; flex-direction: column; justify-content: center; }
.split .screentext { padding: 36px 34px; background: var(--glass); border: 1px solid var(--edge); border-radius: 22px; box-shadow: 0 18px 40px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.screentext h2 { font-size: 1.95rem; line-height: 1.25; font-weight: 500; margin: 0 0 18px; }
.screentext ul { list-style: none; padding: 0; margin: 0; }
.screentext li { font-size: 1.3rem; line-height: 1.45; margin: 0 0 14px; padding-left: 26px; position: relative; }
.screentext li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: #d686a0; }
.pics { display: grid; gap: 14px; height: 100%; min-height: 62vh; }
.pics.n1 { grid-template-columns: 1fr; }
.pics.n2 { grid-template-columns: 1fr 1fr; }
.pics.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .pics.n3 .p1 { grid-row: 1 / span 2; }
.pics.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pic { margin: 0; background: #fff; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.pic img { width: 100%; height: 100%; object-fit: contain; }
.controls { display: flex; align-items: center; gap: 16px; margin: 26px 0 10px; }
button.big { font-size: 1.15rem; padding: 12px 34px; }
button.primary { background: rgba(255,255,255,.9); color: #14213a; border-color: transparent; }
button.primary:hover:not(:disabled) { background: #fff; }
.progress { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.progress div { height: 100%; width: 0; background: linear-gradient(90deg, #9fb0c6, #f0d9e1); transition: width .4s ease; }
.asking { margin-top: 18px; }
.asking h2 { font-size: 1.5rem; }
.asking textarea { font-size: 1.15rem; margin: 10px 0; }
.asking .you { color: #cdd8e6; font-size: 1.1rem; margin: 14px 0 6px; }
.asking .answer p { font-size: 1.35rem; line-height: 1.5; margin: 6px 0; }
.status-line { color: #cdd8e6; font-size: 1.05rem; }
.student .turn { font-size: 1.55rem; }
.student .onscreen { font-size: 1.25rem; }
.student .onscreen img { background: #fff; padding: 10px; border-radius: 14px; max-height: 60vh; object-fit: contain; }
.student .ways textarea { font-size: 1.15rem; }
.student .ways .row button { font-size: 1.1rem; padding: 10px 26px; }
.student button.link { color: #dfe7f5; font-size: 1.05rem; text-decoration: none; border: 1px solid var(--edge); border-radius: 999px; padding: 8px 20px; background: rgba(255,255,255,.06); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .pics { min-height: 44vh; } .titlecard .screentext h2 { font-size: 2rem; } }

/* Practice, oral first: the course and topic, then only the item she is on, large. */
.practice { max-width: 1100px; margin: 0 auto; }
.pstage { min-height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ptitle { text-align: center; }
.ptitle .eyebrow { font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ptitle h2 { font-size: 2.6rem; line-height: 1.2; margin: 10px 0 0; font-weight: 600; }
.ptitle.small h2 { font-size: 1.4rem; }
.ptitle.small .eyebrow { font-size: .95rem; }
.pitem { width: 100%; display: flex; justify-content: center; }
.pitem img { max-width: 100%; max-height: 62vh; object-fit: contain; background: #fff; padding: 14px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.pbar { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 1.25rem; }
.pbar .grow { flex: 1; }
.pbar .dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.35); flex: none; }
.pbar .dot.listening { background: #5fd38d; box-shadow: 0 0 0 7px rgba(95,211,141,.18); }
.pbar .dot.speaking { background: #8fb8ff; box-shadow: 0 0 0 7px rgba(143,184,255,.2); }
.pbar .dot.failed { background: #ff8f8f; }
.pbar button.small { font-size: 1rem; padding: 8px 18px; border-radius: 999px; }
.pbar button.coach { border-color: rgba(255,210,120,.6); }
.pbar button.coach.on { background: rgba(255,210,120,.25); }
.ptype { display: flex; gap: 12px; margin-top: 14px; align-items: flex-end; }
.ptype textarea { flex: 1; font-size: 1.15rem; }
.coachpanel { margin-top: 18px; padding: 20px 22px; border-radius: 16px; background: rgba(255,210,120,.08); border: 1px solid rgba(255,210,120,.35); font-size: 1.1rem; }
.coachpanel h3 { margin: 0 0 6px; }
.coachpanel textarea { width: 100%; font-size: 1.1rem; margin: 8px 0; }
.coachpanel .tick { display: block; margin: 6px 0; font-size: 1.1rem; }
.direction textarea { width: 100%; margin: 10px 0; }
.direction.off { opacity: .7; }
/* Readable navigation and labels for her: no small grey text. The workbench's own switch keeps the top right. */
.student .studenttop a { font-size: 1.15rem; color: #dfe7f5; }
.studenttop .navleft { display: flex; gap: 28px; }
.titlecard .eyebrow { font-size: 1.2rem; color: #e6edf7; }
.ptitle .eyebrow { font-size: 1.2rem; opacity: 1; color: #e6edf7; }
.ptitle.small .eyebrow { font-size: 1.05rem; }
/* Beside the words, wide pictures sit one above the other (two halves), or one across the top and two below
   (a half and two quarters), so each is as large as it can be; the pictures get the wider share. */
.split:has(.pics.n2), .split:has(.pics.n3), .split:has(.pics.n4) { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.split .pics.n2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.split .pics.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .split .pics.n3 .p1 { grid-row: auto; grid-column: 1 / span 2; }
.split .pics { height: 64vh; min-height: 0; }
.split .pics.n2, .split .pics.n3, .split .pics.n4 { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.pic { min-height: 0; min-width: 0; }
.pic img { min-height: 0; }