/* Scribe — the workspace shell: the sidebar, the main column beside it, the
 * mini-bar, the drawer the sidebar becomes on a phone and on the writing
 * desk, and the Handwriting and Page style panels it opens.
 *
 * Linked last, after every other stylesheet, and built only from styles.css's
 * tokens, so it works in both themes. Flat and paper-like: hairlines only
 * where structure needs them (the sidebar's edge, its foot, a panel's edge),
 * no boxed cards and no bordered nav items, and a shadow only on the menu
 * that floats.
 *
 * What it reads, all kept by script:
 * - body[data-view]: "signin", "setup" or "writing" (app.js showView), or
 *   none before the first view shows.
 * - body.sidebar-collapsed: hidden on a wide screen by its own button, and
 *   remembered (lib/sidebar.js).
 * - body.drawer-open: the sidebar slid in as a drawer (lib/sidebar.js).
 * - #sidebar[hidden]: signed out (showView).
 * - .side-panel[hidden]: which panel is open, if any (lib/sidebar.js).
 *
 * Stacking, bottom to top: the tour's ring and card (30, tour.css), the
 * scrim (38), a panel (39), the drawer (40), on a phone a panel again (45),
 * as a sheet over the drawer it was opened from, and the drop overlay (48),
 * under the toast (50, styles.css).
 *
 * Home is one question and the composer (lib/composer.js) in the middle of
 * the main column; the composer's chips are .attachment, never .chip. */

/* ---- Icons -------------------------------------------------------------- */

/* The sprite only holds the symbols; it takes no room. Not display: none,
   which some browsers treat as "draw nothing it defines". */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 16px; height: 16px; flex: none; }

/* A borderless icon button in the page's muted grey: collapse and expand. */
.tool-button { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.tool-button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.tool-button:focus-visible { outline-offset: 2px; }

/* The brand, in the sidebar's head and the mini-bar. */
.brand-mark { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 17px/1 Georgia, "Times New Roman", serif; letter-spacing: -.4px; color: var(--text); }
.brand-mark img { width: 22px; height: 22px; flex: none; filter: saturate(.5); }

/* ---- The two columns ---------------------------------------------------- */

/* One column unless the sidebar sits beside the page (wide screens, below). */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.main-col { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }
/* The footer links sit at the foot of the main column however short the view. */
.main-col > .site-footer { margin: auto auto 0; padding-top: 24px; }

/* ---- The sidebar -------------------------------------------------------- */

/* Its middle (Recent) scrolls, not the whole column, so the account menu
   that opens upward from the foot is never clipped. */
.sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; height: 100dvh; padding: 12px 8px; background: var(--sidebar); border-right: 1px solid var(--line); }

.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 0 0 8px; margin-bottom: 12px; }

.side-nav { display: grid; gap: 1px; flex: none; }
.nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 13px; line-height: 1.35; text-align: left; }
.nav-item .icon { color: var(--muted); }
/* Selected (New assignment on Home, an open panel) and hover: a soft fill, never a border. */
.nav-item:hover:not(:disabled), .nav-item[aria-current="page"], .nav-item[aria-expanded="true"] { background: var(--hover); }
.nav-item:focus-visible { outline-offset: 2px; }
/* Inside a list that scrolls, where a ring outside would be cut off. */
.recent button:focus-visible { outline-offset: -2px; }

.recent { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
.recent h2 { margin: 18px 8px 4px; font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--muted); }
#recentList { min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
#recentEmpty { margin: 2px 8px 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* A row: the title on one line, a soft fill on hover and for the one on the desk. */
.recent-item { display: block; width: 100%; padding: 5px 8px; overflow: hidden; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 12.5px; line-height: 1.4; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.recent-item:hover:not(:disabled), .recent-item[aria-current="page"] { background: var(--hover); }
#recentAll { align-self: flex-start; padding: 5px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; }
#recentAll:hover:not(:disabled) { background: var(--hover); color: var(--text); }

/* The foot: the plan row (billing.css) and the account. */
.side-foot { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--line); }
/* Nothing to show (the demo, signed out): no hairline over an empty foot.
   A browser without :has() keeps the line. */
.side-foot:has(> #accountMenu[hidden]):not(:has(.billing-meter:not([hidden]))) { display: none; }

/* ---- The account menu --------------------------------------------------- */

.account-menu { position: relative; }
/* The account's initial in a rust circle, the address, and a muted ⇅. */
.account-menu summary { display: flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 6px 8px; border-radius: 7px; list-style: none; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover, .account-menu[open] summary { background: var(--hover); }
.account-menu summary:focus-visible { outline-offset: 2px; }
.avatar { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; line-height: 1; }
/* This computer (the dev server without accounts) has no address to take a letter from. */
.avatar:empty { display: none; }
#accountEmail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.account-menu summary .icon { width: 14px; height: 14px; color: var(--muted); }
/* Upward, over Recent, the width of the sidebar. */
.account-menu > div { position: absolute; left: -4px; right: -4px; bottom: calc(100% + 6px); z-index: 30; display: grid; gap: 1px; padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px var(--shadow); }
.account-menu > div button { padding: 7px 9px; border: 0; border-radius: 7px; font-size: 12.5px; text-align: left; }
.account-menu > div button:focus-visible { outline-offset: -2px; }

/* ---- The mini-bar ------------------------------------------------------- */

/* Off on a wide Home with the sidebar showing; the rules below turn it on. */
.mini-bar { display: none; align-items: center; gap: 8px; min-height: 52px; padding: 0 12px; }
#miniTitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 15px Georgia, "Times New Roman", serif; }
/* Signed out, and before any view shows: the brand alone, as the sign-in
   page's header. */
body:not([data-view]) .mini-bar, body[data-view="signin"] .mini-bar { display: flex; min-height: 60px; padding: 0 24px; }
body:not([data-view="setup"]):not([data-view="writing"]) #openSidebar { display: none; }
/* On a wide desk the status column's own button is the way to the sidebar;
   the mini-bar shows there only on a phone (below). */

/* ---- The drawer --------------------------------------------------------- */

/* Out of sight (and out of the tab order) until body.drawer-open slides it in. */
body[data-view="writing"] .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 248px; height: auto; align-self: stretch; transform: translateX(-100%); visibility: hidden; transition: transform .18s ease-out, visibility 0s linear .18s; }
body[data-view="writing"].drawer-open .sidebar { transform: none; visibility: visible; transition: transform .18s ease-out; }
.scrim { position: fixed; inset: 0; z-index: 38; background: var(--overlay); animation: scrim-in .18s ease-out; }
@keyframes scrim-in { from { opacity: 0; } }

/* ---- The panels --------------------------------------------------------- */

/* Handwriting and Page style, one at a time: out from the sidebar's edge
   over the main column, the window's full height, with a scroll of their
   own. Beside the sidebar on a wide Home; at the left edge where the
   sidebar is out of sight (collapsed, or on the desk with the drawer shut);
   beside the drawer on the desk when it is open. Above the tour's card, so
   a step pointing at Handwriting waits behind the panel it opened. */
.side-panel { position: fixed; top: 0; bottom: 0; left: 248px; z-index: 39; width: 360px; max-width: calc(100vw - 248px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border-right: 1px solid var(--line); animation: panel-in .18s ease-out; }
/* A reveal from the sidebar's edge rather than a slide across it. */
@keyframes panel-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
body.sidebar-collapsed .side-panel, body[data-view="writing"] .side-panel { left: 0; max-width: 100vw; }
body[data-view="writing"].drawer-open .side-panel { left: 248px; max-width: calc(100vw - 248px); }

/* The title and the ×, staying put while the body scrolls. */
.side-panel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 12px 12px 0 18px; background: var(--panel); }
.side-panel-head h2 { margin: 0; font: 18px/1.25 Georgia, "Times New Roman", serif; letter-spacing: -.3px; }
/* Focus lands on the heading (tabindex="-1") only to start the panel's tab order there. */
.side-panel-head h2:focus { outline: none; }
.side-panel-body { padding: 14px 18px 24px; }

/* "These apply once the writing finishes." */
.panel-note { margin: 0 0 18px; padding: 7px 11px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12px; line-height: 1.5; }

/* A group: its sentence-case label, then its controls 14px apart. */
.panel-group { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.panel-group + .panel-group { margin-top: 26px; }
.group-label { margin: 0 0 -6px; padding: 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--muted); }
/* A legend isn't a grid item, so it spaces itself. */
.theme-picker > .group-label { margin-bottom: 8px; }
.panel-group input[type="text"], .panel-group select { width: 100%; min-width: 0; border-radius: 8px; font-size: 13px; }
.panel-group input[type="text"] { padding: 8px 10px; }
.panel-group select { padding: 7px 8px; }

/* A control and its name on one line: the name, then the control taking the rest. */
.style-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; color: var(--text); font-size: 13px; }
.style-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
/* Messiness: the slider, and its word in a width of its own so the slider stays put. */
.style-range { grid-template-columns: 74px minmax(0, 1fr) 58px; }
.style-range input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.style-range input[type="range"]:disabled { opacity: .4; cursor: default; }
.style-range output { color: var(--muted); font-size: 12px; text-align: right; }

/* Light / Dark / System as one segmented control. Where :has() works the
   radios hide inside their labels, which show the choice and its focus;
   elsewhere they stay as plain radios. */
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.segmented label { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 7px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.segmented label:hover { color: var(--text); }
.segmented input { margin: 0; accent-color: var(--accent); }
@supports selector(:has(*)) {
  .segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .segmented label:has(:checked) { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
  .segmented label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* The handwriting card's content, in the panel: Mine (the visitor's own
   sheet) and Library, each a pane (.hand-pane) under the switch. */
.hand-pane > .hint { margin: 12px 0 18px; }
.handwriting-body .character-details { margin-top: 22px; }
/* The sentence pages read (prose-setup.js), beside Clear sentences: shown
   only while they are read and once some are kept. */
.prose-step { display: block; margin-top: 22px; }
.prose-step .sheet-actions > .small-note { flex: 1 1 12em; margin: 0; }

/* Mine | Library (lib/library-tab.js): the theme picker's control, in two. */
.hand-source { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.segmented.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* While a library hand writes: which, and the way back to the visitor's own. */
.hand-in-use { margin: 0 0 14px; }
.inline-action { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.inline-action:hover:not(:disabled) { background: transparent; color: var(--accent-strong); }

/* The Library: a row for each hand, one open at a time to a page written in it. */
.library-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.library-item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.library-row { display: grid; gap: 3px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.library-row:hover:not(:disabled) { background: var(--hover); }
.library-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.library-name { font-size: 13.5px; font-weight: 600; }
.library-in-use { color: var(--green); font-size: 11px; font-weight: 600; }
.library-line { color: var(--muted); font-size: 12px; }
/* The strip and the page are paper, never themed (--paper is white in both). */
.library-strip { display: block; width: 100%; height: auto; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.library-open { padding: 0 12px 12px; }
.library-page { aspect-ratio: 612 / 792; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.library-page canvas { display: block; width: 100%; height: auto; }
/* What it can't write can run to a dozen symbols, so it gets the width, the button under it. */
.library-actions { display: grid; gap: 10px; margin-top: 10px; }
.library-missing { margin: 0; }
.library-use { justify-self: end; }

/* ---- Home and the composer ---------------------------------------------- */

/* One question and one box, in the middle of the main column. */
#setupView.home-view { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; width: 100%; max-width: none; padding: 40px 32px; }
.home { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 640px; }
.home-title { margin: 0 0 18px; font: 34px/1.15 Georgia, "Times New Roman", serif; letter-spacing: -1px; text-align: center; }
.home-title span { color: var(--accent); }
.home .demo-only { margin: 0 0 18px; max-width: 520px; color: var(--text); font-size: 13px; line-height: 1.6; text-align: center; }
.composer-slot { width: 100%; }

/* The composer (lib/composer.js): the chips, the text, a row of buttons. */
.composer { display: flex; flex-direction: column; width: 100%; padding: 10px 10px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: var(--line-strong); }
/* A paste or drop that just landed. */
.composer.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.composer textarea { display: block; width: 100%; min-height: 32px; margin: 0; padding: 6px 4px; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 14px; line-height: 20px; resize: none; overflow-y: hidden; }
.composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: var(--faint); }
.composer-note { margin: 0 4px 6px; color: var(--danger-text); font-size: 11.5px; line-height: 1.45; }
.composer > .status { margin: 6px 4px 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.composer > .status.bad { color: var(--danger-text); }

/* The chips: one per page file and per pasted text, over the text. */
.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.attachments:empty { display: none; }
.attachment { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 3px 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-size: 11.5px; line-height: 1.3; }
.attachment-thumb { width: 22px; height: 28px; flex: none; border-radius: 3px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.attachment-label { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.attachment-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.attachment-meta { flex: none; color: var(--muted); white-space: nowrap; }
.attachment-link { flex: none; color: var(--accent); white-space: nowrap; }
.attachment-open { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 2px 2px 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: inherit; text-align: left; }
.attachment-open .icon { color: var(--accent); }
.attachment-open:hover:not(:disabled) { background: var(--hover); }
.attachment-remove { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); }
.attachment-remove .icon { width: 13px; height: 13px; }
.attachment-remove:hover:not(:disabled) { background: var(--hover); color: var(--text); }

/* The row under the text: + (a label round the file input), the style pill, and the arrow. */
.composer-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.icon-button { position: relative; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
.icon-button:hover { background: var(--hover); }
.icon-button > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.icon-button:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-button.disabled { opacity: .4; pointer-events: none; }
.send { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); }
.send:hover:not(:disabled) { background: var(--accent-fill-hover); }
.send:focus-visible { outline-offset: 3px; }
.composer.empty .send { background: var(--track); color: var(--muted); }
/* What the next pages will look like; it opens Page style. */
.style-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 11.5px; line-height: 1.4; white-space: nowrap; }
.style-pill::after { content: ""; flex: none; width: 5px; height: 5px; margin: -3px 1px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.style-pill:hover:not(:disabled), .style-pill[aria-expanded="true"] { background: var(--hover); border-color: var(--line); color: var(--text); }
.style-pill:focus-visible { outline-offset: 2px; }
/* "Scribe writes in your handwriting. Set it up once →" */
.nudge { display: block; width: fit-content; max-width: 100%; margin: 18px auto 0; padding: 7px 11px; border: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12px; line-height: 1.5; text-align: left; }
.nudge:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.nudge:focus-visible { outline-offset: 2px; }

/* ---- The writing desk --------------------------------------------------- */

/* The status column in the sidebar's place, then the pages; each scrolls on its own. */
#writingView.writing-view { display: grid; grid-template-columns: 272px minmax(0, 1fr); align-items: start; flex: 1 0 auto; width: 100%; max-width: none; margin: 0; padding: 0; }

/* The status column: quiet, on the sidebar's tone, no card and no borders inside. */
.session-panel { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; min-width: 0; padding: 12px; overflow-y: auto; background: var(--sidebar); border-right: 1px solid var(--line); }
.session-top { display: flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 0 0 4px; margin-bottom: 12px; }
.session-top .brand-mark { flex: 1; font-size: 15px; }
.session-top .brand-mark img { width: 20px; height: 20px; }
/* What was asked. */
.request { padding: 9px 10px; border-radius: 10px; background: var(--hover); font-size: 12px; line-height: 1.45; }
.request-files { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 0 0 4px; padding: 0; list-style: none; color: var(--muted); font-size: 11px; }
.request-files:empty { display: none; }
.request-files li { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-files li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 2px; background: var(--accent); vertical-align: 1px; }
.request-text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-line-clamp: 4; -webkit-box-orient: vertical; cursor: pointer; }
.request-text.expanded { display: block; -webkit-line-clamp: unset; }
.request-text:empty { display: none; }
.request-edit { margin-top: 4px; padding: 2px 0; border: 0; background: transparent; color: var(--accent); font-size: 11.5px; font-weight: 550; }
.request-edit:hover:not(:disabled) { background: transparent; text-decoration: underline; text-underline-offset: 2px; }
/* How the writing is going. */
.session-panel .current-problem { padding: 16px 4px 0; }
.session-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* The badge keeps its shape; a long kicker wraps beside it instead. */
.session-heading .pill { flex: none; white-space: nowrap; }
.current-problem .eyebrow { color: var(--accent); font-size: 9px; letter-spacing: 1px; }
.current-problem h2 { margin: 6px 0 2px; font: 17px/1.3 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.current-problem p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
.session-progress { margin: 10px 4px 6px; }
.session-progress progress { height: 3px; }
.progress-label { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 11px; }
.playback-controls { display: flex; gap: 2px; margin: 0 0 6px; }
.text-button { padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11.5px; }
.text-button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.session-panel .failure { margin: 8px 0; }
#retryGenerate { width: 100%; margin-bottom: 10px; font-size: 12px; }
/* The problems: plain rows, the one being written on a soft fill. */
.queue-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 0 4px; }
.queue-heading h3 { margin: 0; color: var(--muted); font-size: 11px; font-weight: 500; }
.queue-heading > span { color: var(--muted); font: 10px ui-monospace, monospace; }
.session-panel #queueEmpty { margin: 4px 4px 0; }
.problem-queue { display: grid; gap: 1px; margin: 6px 0 0; padding: 0; list-style: none; }
.problem-queue li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; color: var(--muted); font-size: 12px; }
.problem-queue li.active { background: var(--hover); color: var(--text); }
.problem-queue li.done { color: var(--green); }
.queue-dot { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 9px; line-height: 1; }
.active .queue-dot { border-color: var(--green); background: var(--green); color: var(--panel); }
.done .queue-dot { border-color: transparent; color: var(--green); }
.queue-name { min-width: 0; overflow-wrap: anywhere; }
.queue-state { margin-left: auto; font-size: 10px; white-space: nowrap; }
/* Where the pages came from and how they were written, small, at the foot. */
.session-footer { margin-top: auto; padding: 14px 4px 0; }
.session-footer > div { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; color: var(--muted); font-size: 10.5px; }
.session-footer strong { color: var(--text); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.engine-note { margin: 8px 0 0; color: var(--muted); font-size: 10.5px; overflow-wrap: anywhere; }

/* The pages, under a header that stays in view, and the composer docked under them. */
.paper-stage { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; padding: 0 24px; }
.desk-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0 -24px 18px; padding: 10px 16px 10px 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
.desk-head h1 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font: 16px/1.3 Georgia, "Times New Roman", serif; text-overflow: ellipsis; white-space: nowrap; }
.page-count { color: var(--muted); font-size: 11px; white-space: nowrap; }
.desk-actions { display: flex; align-items: center; gap: 4px; }
.desk-actions .ghost { padding: 5px 9px; border: 0; color: var(--muted); font-size: 12px; }
.desk-actions .ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.desk-actions .primary { padding: 6px 12px; font-size: 12px; }
.paper-stage > .page-stack, .paper-stage > .page-footnote { width: 100%; max-width: 820px; margin-left: auto; margin-right: auto; }
/* Docked, the composer is one floating bar: +, the box, the arrow, its chips over them. */
.composer-slot.docked { position: sticky; bottom: 14px; z-index: 6; width: min(78%, 720px); margin: 18px auto 14px; }
.composer-slot.docked .composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; column-gap: 8px; padding: 7px 7px 7px 8px; border-radius: 22px; box-shadow: 0 6px 24px var(--shadow-soft); }
.composer-slot.docked .composer > .attachments,
.composer-slot.docked .composer > .composer-note,
.composer-slot.docked .composer > .status { grid-column: 1 / -1; }
.composer-slot.docked .composer > .attachments { grid-row: 1; margin: 0 0 6px; }
.composer-slot.docked .composer > .composer-note { grid-row: 2; }
.composer-slot.docked .composer-row { display: contents; }
.composer-slot.docked #addFiles { grid-column: 1; grid-row: 3; }
.composer-slot.docked .composer textarea { grid-column: 2; grid-row: 3; min-height: 30px; padding: 5px 2px; }
.composer-slot.docked .send { grid-column: 3; grid-row: 3; margin: 0; }
.composer-slot.docked .style-pill { display: none; }
.composer-slot.docked .composer > .status { grid-row: 4; }

/* The demo's composer is fixed: its text reads as text, not a disabled field. */
body.demo .composer textarea[readonly] { background: transparent; }

/* Files dragged over the page: where they will go. */
.drop-overlay { position: fixed; inset: 0; z-index: 48; display: grid; place-items: center; padding: 24px; background: var(--overlay); pointer-events: none; }
.drop-overlay p { margin: 0; padding: 28px 36px; border: 2px dashed var(--accent); border-radius: 16px; background: var(--panel); color: var(--text); font-size: 14px; }

/* A pasted text, read back. */
.pasted-preview { width: min(640px, calc(100vw - 32px)); max-height: min(70vh, 640px); padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 10px 40px var(--shadow); }
.pasted-preview::backdrop { background: var(--overlay); }
.pasted-preview h2 { margin: 0 0 10px; font: 18px/1.3 Georgia, "Times New Roman", serif; }
.pasted-preview pre { max-height: 40vh; margin: 0; padding: 10px 12px; overflow: auto; border-radius: 8px; background: var(--sunken); color: var(--text); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.pasted-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---- Wide screens ------------------------------------------------------- */

@media (min-width: 741px) {
  /* On Home the sidebar sits beside the page, unless it was collapsed. */
  body[data-view="setup"]:not(.sidebar-collapsed) .shell { grid-template-columns: 248px minmax(0, 1fr); }
  body[data-view="setup"].sidebar-collapsed .sidebar { display: none; }
  body[data-view="setup"].sidebar-collapsed .mini-bar { display: flex; }
  /* A drawer opened on a phone, then the window widened: Home has no drawer. */
  body[data-view="setup"] .scrim { display: none; }
}

/* ---- Phones ------------------------------------------------------------- */

@media (max-width: 740px) {
  /* A slim header with ☰ and the brand; the sidebar is a drawer over a scrim. */
  body[data-view] .mini-bar { display: flex; }
  body[data-view="signin"] .mini-bar { min-height: 52px; padding: 0 16px; }
  .sidebar, body[data-view="writing"] .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 280px; max-width: calc(100vw - 48px); height: auto; align-self: stretch; transform: translateX(-100%); visibility: hidden; transition: transform .18s ease-out, visibility 0s linear .18s; }
  body.drawer-open .sidebar { transform: none; visibility: visible; transition: transform .18s ease-out; }
  /* A panel is a full-screen sheet, over the drawer it was opened from. */
  body[data-view] .side-panel, body[data-view].drawer-open .side-panel { left: 0; right: 0; z-index: 45; width: auto; max-width: none; border-right: 0; animation-name: sheet-in; }
  .side-panel-head { min-height: 52px; padding: 10px 10px 0 16px; }
  .side-panel-body { padding: 12px 16px 28px; }
  /* Home: the question and the box, full width under the mini-bar. */
  #setupView.home-view { align-items: flex-start; padding: 28px 16px 24px; }
  .home-title { font-size: 27px; letter-spacing: -.6px; }
  /* The placeholder takes two lines at this width; the box shows both. */
  .composer textarea { min-height: 52px; }
  .attachment-name { max-width: 120px; }
  /* The desk: the status column as a card above the pages (the mini-bar has
     the ☰ and the brand), and the composer fixed to the foot of the screen. */
  #writingView.writing-view { display: flex; flex-direction: column; }
  /* The slim header on the desk: the ☰ and what is on the desk, no brand. */
  body[data-view="writing"] .mini-bar .brand-mark { display: none; }
  .session-panel { position: relative; height: auto; margin: 4px 12px 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 12px; overflow: visible; }
  /* New assignment stays, in the card's corner. */
  .session-top .brand-mark, #openSidebarDesk { display: none; }
  .session-top { position: absolute; top: 10px; right: 12px; min-height: 0; margin: 0; }
  .session-panel > .request { margin-right: 34px; }
  .problem-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 110px; overflow-y: auto; }
  .queue-state { display: none; }
  .session-footer { margin-top: 10px; padding-top: 0; }
  .session-footer > div { display: inline-flex; margin-right: 12px; }
  .paper-stage { min-height: 0; padding: 0 12px 96px; }
  .desk-head { margin: 12px -12px 14px; padding: 8px 12px; }
  .desk-head h1 { display: none; }
  .page-count { flex: 1; }
  .composer-slot.docked { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; margin: 0; }
  .composer-slot.docked .composer textarea { min-height: 30px; }
}
@keyframes sheet-in { from { transform: translateX(-100%); } }

/* A short, numbered path from class selection to a handwriting sample. */
.library-alternative { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.handwriting-step { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.handwriting-step-title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.handwriting-step-title > span { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.handwriting-step-hint { margin: 0; color: var(--muted); font-size: 12px; }
.handwriting-step .row { margin-top: 10px; }