/* Maya's view: only what Richard's design (design/styles.css, used unchanged) didn't draw. Deep blue. */

/* The workbench's own Student / Back end switch, top right, in the design's glass. */
.switch { position: fixed; top: 22px; right: 26px; z-index: 40; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(16px); }
.switch a { padding: 6px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; text-decoration: none; }
.switch a.on { background: var(--selected); color: var(--ink); }
.flash { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 50; max-width: 640px; color: var(--ink); background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 10px 18px; font-size: 14px; }
.flash:empty { display: none; }

/* Her courses in the drawer. */
.course-dot.c-science { background: #c18c36; }
.course-dot.c-french { background: #b98ad9; }
.course-dot.c-geography { background: #6fb7a8; }

/* Lecture: the video always visible, with a time bar to go back and forth, and Stop and ask. */
.film video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b1729; }
.film.is-playing .play-overlay { display: none; }
.film-empty { display: grid; place-items: center; color: #263e40; }
.lecture-bar { display: flex; align-items: center; gap: 16px; padding: 14px 8px 4px; }
.bar-button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--edge); background: var(--strong-glass); flex: none; }
.bar-button svg { width: 18px; height: 18px; }
.lecture-bar input[type=range] { flex: 1; padding: 0; height: 6px; accent-color: var(--accent); background: transparent; border: 0; }
.clock { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.stop-ask { flex: none; }
.ask-panel { max-width: 1040px; width: 100%; margin: 0 auto; padding: 24px 28px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px; }
.ask-panel textarea, .typed-row textarea, .coachpanel textarea, .notes-chart textarea { width: 100%; font-size: 16px; resize: vertical; }
.ask-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.you { color: var(--muted); font-size: 16px; }
.you::before { content: 'You: '; color: var(--faint); }
.tutor-line { font-size: 18px; line-height: 1.5; }

/* Walkthrough: what the tutor puts on screen, large; the voice button shows when the call is live. */
.conversation .question p { margin: 0 0 8px; }
.conversation .question p + p { font-size: 19px; color: var(--muted); }
.voice-button.live { box-shadow: 0 0 0 8px rgba(196, 222, 249, .16), 0 0 30px rgba(196, 222, 249, .25); }
#reply-area { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-width: 720px; }
.typed-row { display: flex; gap: 12px; align-items: flex-end; }

/* Practice: the applet where the cut-out used to be, large; the voice and Coach in one quiet row beneath it. */
.practice-stage { max-width: 1240px; width: 100%; margin: auto; flex-direction: column; gap: 14px; }
.applet-frame { padding: 8px; border-radius: 24px; }
.applet-frame iframe { display: block; width: 100%; height: calc(100vh - 290px); min-height: 460px; border: 0; border-radius: 17px; background: #fff; }
.practice-dock { display: flex; align-items: center; gap: 14px; width: 100%; }
.practice-dock .grow { flex: 1; }
.voice-button.small { width: 48px; height: 48px; }
.voice-button.small svg { width: 20px; height: 20px; }
.type-button.coach { border: 1px solid rgba(255, 210, 120, .5); border-radius: 999px; padding: 7px 16px; }
.type-button.coach.on { background: rgba(255, 210, 120, .22); }
.coachpanel { width: 100%; padding: 20px 24px; border-radius: 18px; border: 1px solid rgba(255, 210, 120, .35); display: flex; flex-direction: column; gap: 10px; }
.coachpanel .tick { display: block; margin: 4px 0; }

/* Notes: her chart in the design's writing sheet. */
.notes-chart { overflow: auto; }
.notes-chart table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; }
.notes-chart td { vertical-align: top; padding: 8px 10px; border-top: 1px solid var(--edge); }
.notes-chart td:first-child { width: 42%; color: var(--muted); }
.notes-chart .feedback { margin-top: 20px; border-top: 1px solid var(--edge); padding-top: 16px; }

/* Add material: the old form inside the design's workspace. */
.today .card, .today .way { display: flex; flex-direction: column; gap: 10px; }
.today .card { padding: 22px 26px; border-radius: 20px; background: var(--glass); border: 1px solid var(--edge); }
.today .way { padding: 12px 0; border-bottom: 1px solid var(--edge); }
.today .row { display: flex; gap: 12px; align-items: center; }
.today .said { color: var(--ink); background: var(--strong-glass); border-radius: 12px; padding: 10px 14px; }
.today .title { font-size: 34px; margin-bottom: 18px; }
.today button { border: 1px solid var(--edge); border-radius: 999px; padding: 9px 20px; background: var(--strong-glass); }
.today a { color: var(--accent); }

/* Hidden means hidden, whatever the panel's own layout says. */
[hidden] { display: none !important; }
/* The question panel sits under the video, not beside it. */
.lecture-stage { flex-direction: column; gap: 16px; }
.lecture-stage .player { width: 100%; }
.applet-frame iframe { height: calc(100vh - 330px); }
.practice-stage .applet-frame { max-width: none; width: 100%; }

/* Practice: the applet is part of the page, not a box in a frame. */
.practice-stage .applet-frame { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; backdrop-filter: none; }
.applet-frame iframe { background: transparent; min-height: 0; height: auto; }
/* A course's units. */
.unit { margin-top: 26px; }
.unit-name { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-weight: 500; }

/* Navigation: topics on the left, the chosen topic's tiles on the right. */
.course-page { max-width: 1240px; margin: 0 auto; padding-top: 50px; }
.course-columns { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; margin-top: 26px; align-items: start; }
.topics { display: flex; flex-direction: column; gap: 10px; }
.topic-card { text-align: left; padding: 16px 18px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; }
.topic-card.selected { outline: 2px solid var(--accent); }
.topic-unit { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.topic-name { font-size: 17px; font-weight: 500; }
.topic-title { font-size: 32px; letter-spacing: -.8px; }
.topic-sub { color: var(--muted); margin: 6px 0 22px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tile { text-align: left; padding: 22px 24px; border-radius: 20px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; position: relative; }
.tile h3 { font-size: 22px; }
.tile p { color: var(--muted); font-size: 15px; }
.tile-n { position: absolute; top: 18px; right: 20px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; border: 1px solid var(--edge); color: var(--muted); }
.tile-icon svg { width: 26px; height: 26px; }
.empty-panel { padding: 40px; border-radius: 20px; color: var(--muted); text-align: center; }
.back-link { align-self: flex-start; color: var(--muted); font-size: 15px; padding: 6px 2px; margin-left: 60px; }
.back-link:hover { color: var(--ink); }
.add-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; max-width: 900px; }
.add-way { text-align: left; padding: 28px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; min-height: 190px; }
.add-way h2 { font-size: 24px; }
.add-way p { color: var(--muted); }
@media (max-width: 900px) { .course-columns, .tiles, .add-ways { grid-template-columns: 1fr; } }
.today .add-way { border-radius: 22px; padding: 28px; border: 1px solid var(--edge); background: var(--glass); }

/* My Notes: Cornell, question left and her answer right on every row; Read / Recall; Download. */
.notes-stage { max-width: 1040px; width: 100%; margin: auto; }
.notes-sheet { width: 100%; padding: 26px 32px; border-radius: 22px; max-height: calc(100vh - 230px); overflow: auto; }
.notes-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 14px; }
.notes-top .topic-sub { margin: 4px 0 0; }
.cornell-section { margin: 22px 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.crow { display: grid; grid-template-columns: 5fr 7fr; gap: 26px; padding: 14px 0; border-bottom: 1px solid var(--edge); align-items: start; }
.cq { color: var(--muted); font-size: 16px; line-height: 1.5; }
.ca textarea { width: 100%; font-size: 15px; resize: vertical; }
.ca .mine { margin-top: 8px; color: var(--ink); font-size: 15px; border-left: 2px solid var(--accent); padding-left: 10px; }
.notes-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; color: var(--muted); flex-wrap: wrap; }
.handoffs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.feedback summary { cursor: pointer; color: var(--muted); margin-top: 16px; }
.test-workspace { width: 100%; max-width: 1040px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.test-workspace .notes-sheet { text-align: left; }
.profile-text { white-space: pre-wrap; line-height: 1.6; font-size: 15px; margin: 6px 0 18px; }
.test-wait { max-width: 720px; }
.test-stage { max-width: 1040px; width: 100%; margin: auto; }

/* Student workspace: DM Sans from the bundled font files; one reading edge and quiet navigation. */
body[data-view=s] .switch { display:none; }
body[data-view=s] { --muted:#b8c9dd; --faint:#99adc5; }
.nav-toggle { left:20px; top:20px; width:44px; height:44px; padding:11px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(145deg,#ffffff16,#ffffff04); box-shadow:inset 0 1px 0 #ffffff28,0 6px 18px #0002; }
.nav-toggle svg { width:21px; height:21px; }
.operator-link { margin-top:auto; padding:32px 13px 0; color:var(--muted); font-size:12px; text-decoration:none; }
.app-shell main { padding:25px 88px 120px; gap:24px; }
.back-link { margin:0; min-height:44px; max-width:calc(100% - 20px); display:flex; align-items:center; text-align:left; font-size:14px; }
body.working .tabs { position:fixed; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:20; margin:0; padding:5px; border-radius:18px; background:linear-gradient(130deg,#314963e8,#14273fe8); border-color:#c3daee30; box-shadow:inset 0 1px 0 #ffffff38,0 12px 38px #0005; }
body.working .tabs button { min-width:100px; min-height:46px; padding:10px 16px; font-size:13px; }
body.working .tabs button.active { background:linear-gradient(145deg,#e3f2ff2d,#a7c8eb12); box-shadow:inset 0 1px 0 #ffffff50,0 3px 8px #0002; }
.walk-stage { align-items:flex-start; justify-content:center; padding:30px 0 0; }
.conversation { width:100%; max-width:920px; text-align:left; margin:0 auto; }
.conversation-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; margin-bottom:30px; }
.quiet-link { color:var(--muted); font-size:14px; padding:10px 0; min-height:44px; }
.conversation-options { margin-left:auto; position:relative; font-size:13px; color:var(--muted); z-index:5; }
.conversation-options summary { cursor:pointer; list-style:none; padding:12px 0 12px 16px; }
.conversation-options summary::-webkit-details-marker { display:none; }
.conversation-options summary span { margin-left:12px; }
.conversation-options>div { position:absolute; right:0; top:44px; width:190px; padding:6px; background:#1c3048; border:1px solid var(--edge); border-radius:13px; box-shadow:0 12px 28px #0005; }
.conversation-options button { width:100%; text-align:left; padding:12px; border-radius:8px; }
.conversation-options button:hover { background:var(--glass-hover); }
.conversation .question { width:100%; max-width:none; margin:0; text-align:left; font-size:26px; line-height:1.45; letter-spacing:-.45px; }
.menu-heading { font-size:24px; font-weight:500; letter-spacing:-.6px; line-height:1.3; margin-bottom:24px; }
.concept-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.concept-choice { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:18px; text-align:left; min-height:204px; padding:27px 50px 26px 26px; border:1px solid #c9e3ff30; border-radius:20px; background:radial-gradient(ellipse at 0 0,#bfdfff18,transparent 75%),linear-gradient(145deg,#ffffff0c,#ffffff03); box-shadow:inset 0 1px 0 #e1f2ff40,0 12px 30px #00000018; transition:background .15s,border-color .15s,transform .15s; }
.concept-choice:hover { border-color:#c9e3ff70; background:linear-gradient(145deg,#c6e5ff22,#c6e5ff09); transform:translateY(-2px); }
.concept-question { font-size:21px; line-height:1.38; letter-spacing:-.3px; color:#f1f6ff; }
.concept-terms { font-size:14px; line-height:1.55; letter-spacing:0; color:var(--muted); }
.concept-arrow { position:absolute; right:23px; top:27px; font-size:19px; color:#c2d7eb; }
.conversation:not(.choosing) { max-width:760px; }
.scenario { color:#bdccdc; font-size:19px; letter-spacing:0; line-height:1.75; margin-bottom:26px; max-width:65ch; }
.current-question { font-weight:500; line-height:1.5; }
.conversation .current-question p+p { font-size:22px; color:var(--ink); margin-top:18px; }
.response-area { margin-top:36px; }
.response-composer { padding:16px; border:1px solid #c6def83a; border-radius:18px; background:linear-gradient(135deg,#deeeff10,#cce1ff04); box-shadow:inset 0 1px 0 #ffffff20,0 12px 35px #0001; }
.response-composer:focus-within { border-color:#b7d6f588; }
.response-composer textarea { width:100%; padding:2px 2px 12px; font-size:17px; line-height:1.6; resize:vertical; min-height:76px; border:0; background:none; border-radius:0; margin:0; box-shadow:none; }
.response-composer textarea::placeholder { color:#a3b6cc; }
.response-composer textarea:focus-visible { outline:none; }
.response-actions { display:flex; justify-content:space-between; align-items:center; }
.conversation .voice-button { width:40px; height:40px; border-radius:11px; border:1px solid #c6def826; background:#c6def80b; box-shadow:inset 0 1px 0 #ffffff20; margin:0; }
.conversation .voice-button svg { width:19px; height:19px; }
.response-actions .button { width:40px; min-height:40px; padding:0; border-radius:11px; font-size:24px; }
.response-area .voice-state { min-height:20px; margin-top:9px; text-align:left; }
.library-workspace, .course-page { width:100%; max-width:1080px; margin:50px auto 0; padding:0; }
.library-workspace h1, .course-page h1 { font-size:34px; letter-spacing:-1px; }
.course-columns { grid-template-columns:240px minmax(0,1fr); gap:48px; margin-top:38px; }
.topic-card { box-shadow:none; background:transparent; border:1px solid transparent; border-radius:12px; padding:14px 16px; }
.topic-card.selected { outline:0; border-color:#c9e3ff2a; background:linear-gradient(120deg,#d3eaff13,#d3eaff04); box-shadow:inset 0 1px 0 #ffffff20; }
.topic-unit { font-size:11px; letter-spacing:.05em; }
.topic-name { font-size:15px; }
.topic-title { font-size:27px; }
.topic-sub { font-size:13px; }
.tiles { grid-template-columns:1fr; gap:10px; }
.tile { min-height:76px; display:grid; grid-template-columns:32px 1fr 20px; gap:16px; align-items:center; padding:18px 22px; border-radius:15px; background:linear-gradient(125deg,#e3f2ff10,#ffffff03); box-shadow:inset 0 1px 0 #ffffff28,0 8px 20px #0001; }
.tile h3 { font-size:18px; }
.tile-icon svg { width:23px; height:23px; color:#c5ddf3; }
.tile-arrow { color:var(--muted); }
.tile:hover,.add-way:hover { border-color:#cce5ff66; background:linear-gradient(125deg,#e3f2ff20,#ffffff07); }
.today { max-width:800px; }
.today>.back-link { margin-bottom:24px; }
.add-ways { gap:18px; margin-top:30px; }
.today .add-way { min-height:210px; padding:28px; border-radius:20px; gap:14px; background:linear-gradient(140deg,#e4f2ff12,#ffffff03); box-shadow:inset 0 1px 0 #ffffff35,0 12px 30px #0002; }
.add-way h2 { font-size:22px; }
.add-way p { font-size:14px; max-width:24ch; }
.today .card { margin-top:26px; max-width:620px; padding:28px; gap:22px; background:linear-gradient(135deg,#e4f2ff0d,#ffffff03); box-shadow:inset 0 1px 0 #ffffff28; }
.today .way { border:0; padding:0; gap:8px; }
.today label { font-size:14px; color:var(--muted); }
.today label.add-way { color:var(--ink); }
.today input,.today select { width:100%; min-width:0; font-size:15px; }
.source-methods { display:flex; gap:6px; border-bottom:1px solid var(--edge); padding-bottom:16px; }
.today .source-methods button { border:0; background:none; border-radius:9px; color:var(--muted); padding:9px 13px; }
.today .source-methods button[aria-pressed=true] { color:var(--ink); background:#cee5ff16; }
.page-range summary { cursor:pointer; font-size:14px; color:var(--muted); }
.page-range summary span { font-size:12px; opacity:.7; margin-left:12px; }
.page-range .row { margin-top:16px; }
.page-range label { flex:1; display:grid; gap:6px; }
.today #make { background:linear-gradient(145deg,#e4f2ff,#b4d1ed); color:#142c43; border:0; border-radius:11px; min-height:44px; }
@media (max-width:760px) {
 .nav-toggle { left:14px; top:15px; width:42px; height:42px; }
 .app-shell main { padding:15px 20px 110px; gap:18px; }
 .working .back-link { margin-left:48px; font-size:12px; min-height:42px; }
 .walk-stage { padding-top:10px; }
 .conversation-toolbar { margin-bottom:22px; }
 .conversation-options { font-size:12px; }
 .concept-grid { grid-template-columns:1fr; gap:12px; }
 .concept-choice { min-height:0; padding:23px 46px 23px 22px; gap:12px; border-radius:17px; }
 .concept-question { font-size:19px; }
 .concept-terms { font-size:13px; }
 .menu-heading { font-size:23px; margin-bottom:20px; }
 .conversation .question { font-size:23px; }
 .scenario { font-size:17px; }
 .response-area { margin-top:27px; }
 body.working .tabs { width:calc(100% - 24px); bottom:max(12px,env(safe-area-inset-bottom)); }
 body.working .tabs button { min-width:0; min-height:54px; padding:7px 4px; font-size:10px; gap:5px; }
 .library-workspace,.course-page { margin-top:72px; }
 .library-workspace h1,.course-page h1 { font-size:28px; }
 .library-heading { align-items:flex-start; gap:16px; flex-wrap:wrap; }
 .course-columns { grid-template-columns:1fr; gap:26px; margin-top:24px; }
 .topics { flex-direction:row; overflow:auto; padding:3px 3px 12px; }
 .topics .side-label { display:none; }
 .topic-card { min-width:180px; max-width:240px; flex-shrink:0; }
 .add-ways { grid-template-columns:1fr; }
 .today .add-way { min-height:170px; }
 .today .card { padding:20px; }
 .today .row { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { .concept-choice { transition:none; } .concept-choice:hover { transform:none; } }
@media (min-width:761px) {
 .walk-stage { padding-top:8px; }
 .conversation-toolbar { margin-bottom:22px; }
 .concept-choice { min-height:180px; }
}

/* Lecture segments, in order, above the player. */
.segments { display: flex; gap: 8px; width: 100%; max-width: 1040px; margin: 0 auto 12px; overflow-x: auto; padding-bottom: 4px; }
.segment { flex: 1 0 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--edge); background: var(--glass); }
.segment.active { background: var(--selected); border-color: var(--accent); }
.seg-n { font-size: 12px; color: var(--muted); }
.seg-title { font-size: 14px; line-height: 1.3; }
.seg-time { font-size: 12px; color: var(--faint); }
/* The lecture fits the screen: the video is sized so the segment list, its controls and the dock all show. */
.lecture-stage .player, .lecture-stage .segments, .lecture-stage .ask-panel { max-width: min(1040px, calc((100vh - 420px) * 16 / 9 + 22px)); width: 100%; margin-left: auto; margin-right: auto; }
.lecture-stage { padding: 0; gap: 10px; }

/* Find it for me: her words in, what was found out, with a picture of the page. */
.find-box { display: flex; gap: 12px; padding: 14px; border-radius: 18px; max-width: 900px; margin-top: 18px; }
.find-box input { flex: 1; font-size: 17px; }
.found-head { margin: 26px 0 12px; font-size: 22px; }
.found-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 16px; border-radius: 18px; max-width: 900px; margin-bottom: 12px; }
.found-page { width: 150px; border-radius: 8px; background: #fff; }
.found-text { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.found-text p { color: var(--muted); }
/* The applet: measured once, scaled as a picture from the top centre, faded in when ready. */
.applet-frame { overflow: hidden; display: flex; justify-content: center; }
.applet-frame iframe { width: 100%; transform-origin: top center; opacity: 0; transition: opacity .25s ease; flex: none; }
.applet-frame iframe.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .applet-frame iframe { transition: none; } }
/* Test me: the exam-style questions as written (lines and A/B/C/D kept), her answers, one box to type in. */
.test-sheet { display: flex; flex-direction: column; gap: 14px; }
.test-log { max-height: calc(100vh - 360px); overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.tutor-block { white-space: pre-wrap; font-size: 17px; line-height: 1.55; }
.feedback-now { margin-top: 18px; border-top: 1px solid var(--edge); padding-top: 14px; }
.notes-sheet a.button { text-decoration: none; }
/* Walkthrough v2.5 writes plain text: shown as written (its lines kept), large. */
.conversation .tutor-screen { white-space: pre-wrap; text-align: left; font-size: 21px; line-height: 1.5; max-width: 720px; }

/* OpenPath (20 Oct): only what the new screens need to sit in the design. No restyling; the themes come later. */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { display: flex; flex-direction: column; gap: 14px; width: min(380px, 100%); padding: 28px; border-radius: 22px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.login-card input { font-size: 16px; }
.login-error:empty { display: none; }
.theme-switch { display: flex; gap: 6px; margin: 4px 0 10px; }
.theme-switch button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge); background: transparent; color: var(--muted); }
.theme-switch button.selected { background: var(--selected); color: var(--ink); }
.tile-off { opacity: .55; }
.tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-says { font-size: 13px; color: var(--muted); }
a.tile { color: inherit; text-decoration: none; }
.lecture-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.segment-waiting { opacity: .6; }
.seg-part { font-size: 12px; color: var(--muted); padding: 0 6px; }
#signout { background: none; border: 0; cursor: pointer; text-align: left; }

.writing-row { margin-top: 18px; }
.writing-frame { padding: 0; border-radius: 22px; overflow: hidden; height: calc(100vh - 130px); }
.writing-frame iframe { display: block; width: 100%; height: 100%; border: 0; }