/* ==========================================================================
   Student Reader Tracker — the teacher hub, the create page, the project
   view and the student's own form all share this sheet.

   Tokens, fonts, buttons (.btn/.rf-btn-*), inputs (.rf-input) and the theme
   toggle come from /css/readflexes.css; the gym shell (sidebar, nav, main)
   is the same as gym-fluency.css because these pages live in the same shell.

   HOUSE RULE, load-bearing here: no narrow centred column. Every screen
   fills the width with fluid side padding and lays out in columns, and the
   create page in particular is measured for no vertical overflow at
   1280x800 by scripts/gym-tests/reading-create.probe.mjs.
   ========================================================================== */
:root{ --success:#00e676; --warning:#ffb020; --error:#ff4d6d; }

*{ box-sizing:border-box }
a{ color:inherit; text-decoration:none }
html,body{ height:100%; margin:0; overflow:hidden; display:block; }

.app{ display:grid; grid-template-columns:260px 1fr; height:100vh; }
.sidebar{ position:sticky; top:0; height:100vh; padding:18px 14px; border-right:1px solid var(--line);
  background:var(--panel); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.brand{ display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.brand-logo{ height:120px; display:block; margin:0 auto; filter:drop-shadow(0 0 8px rgba(77,240,255,.25)); }
.brand-sub{ text-align:center; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:6px 0 18px; }
.brand-sub a:hover{ color:var(--neon-cyan); }
.nav-section{ margin-top:14px; }
.nav-title{ padding:8px 10px; }
.nav{ display:flex; flex-direction:column; gap:4px; padding:0 6px 8px; }
.nav a{ padding:10px 14px; border-radius:999px; border:1px solid transparent; display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text);
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.nav a:hover{ background:rgba(77,240,255,.08); border-color:var(--line); }
.nav a.active{ color:var(--neon-cyan); border-color:rgba(77,240,255,.45); background:rgba(77,240,255,.10); box-shadow:var(--glow-cyan); }
.nav a .icon{ width:18px; text-align:center; opacity:.9; }

.main{ padding:20px clamp(10px, 2vw, 28px); height:100vh; overflow:auto; overscroll-behavior:contain; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.hidden{ display:none !important; }
/* display:flex beats [hidden] — the builder's .review-tabs paid for this one,
   and several rows here are flex containers that hide. */
[hidden]{ display:none !important; }

.page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; }
.page-head h1{ margin:0 0 4px; font-size:24px; }
.page-head p{ margin:0; max-width:78ch; }

/* ── The headers (owner's picks, 2026-09-20) ──────────────────────────────
   Student page: Neon Marquee — arcade-gold kicker, the dynamic title in
   gradient ink, a neon rule. Teacher page: Bookshelf Ribbon — one gold word
   in the title (an <em> the dictionary carries) over a tiny CSS bookshelf.
   Both carry light-mode overrides: the neon values that glow on #0d0d2b sit
   near 1.2:1 on the light ground (the readflexes.css kicker lesson). */
.reader-kicker{ font-family:var(--font-arcade); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--neon-gold);
  text-shadow:0 0 8px rgba(255,225,0,.55); margin:0 0 8px; }
.light-mode .reader-kicker{ color:#8a6d00; text-shadow:none; }
.reader-head--student h1{ font-size:30px;
  background:linear-gradient(92deg, var(--neon-cyan) 10%, #9be8ff 45%, var(--neon-purple) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 12px rgba(77,240,255,.3)); }
.light-mode .reader-head--student h1{
  background:linear-gradient(92deg, #0a7f9e 10%, #2563c8 45%, #7c3aed 90%);
  -webkit-background-clip:text; background-clip:text; filter:none; }
.reader-rule{ height:3px; width:min(220px, 60%); margin:2px 0 10px; border-radius:999px;
  background:linear-gradient(90deg, var(--neon-cyan), var(--neon-purple), transparent); }
.reader-head--teacher h1{ font-size:28px; }
.reader-head--teacher h1 em{ font-style:normal; color:var(--neon-gold);
  text-shadow:0 0 10px rgba(255,225,0,.4); }
.light-mode .reader-head--teacher h1 em{ color:#8a6d00; text-shadow:none; }
.reader-shelf{ width:230px; max-width:100%; margin:4px 0 10px; }
.reader-shelf .spines{ display:flex; align-items:flex-end; gap:3px; height:26px; }
.reader-shelf .spines span{ width:9px; border-radius:2px 2px 0 0; opacity:.85; }
.reader-shelf .spines span:nth-child(1){ height:14px; background:var(--neon-cyan); }
.reader-shelf .spines span:nth-child(2){ height:21px; background:var(--neon-purple); }
.reader-shelf .spines span:nth-child(3){ height:16px; background:var(--neon-gold); }
.reader-shelf .spines span:nth-child(4){ height:23px; background:var(--neon-fire); }
.reader-shelf .spines span:nth-child(5){ height:18px; background:var(--neon-cyan); }
.reader-shelf .spines span:nth-child(6){ height:25px; background:#6ee7b7; }
.reader-shelf .spines span:nth-child(7){ height:15px; background:var(--neon-purple); }
.reader-shelf .spines span:nth-child(8){ height:22px; background:var(--neon-gold); }
.reader-shelf .spines span:nth-child(9){ height:17px; background:#ff6b9d; }
.reader-shelf .spines span:nth-child(10){ height:24px; background:var(--neon-cyan); }
.reader-shelf .plank{ height:4px; border-radius:999px; margin-top:-1px;
  background:linear-gradient(90deg, #8a5a2b, #5d3a18); }

/* ── The backgrounds (owner's picks, 2026-09-20) ──────────────────────────
   Student page: Synthwave Grid — a faint 44px neon grid with a purple
   horizon rising from the foot. Teacher pages: Paper Grain — a whisper of
   SVG noise over a lamplight gradient. Both sit on .main, whose default
   background-attachment keeps them pinned to the element's own box while
   the content scrolls past — the horizon stays at the foot of the SCREEN,
   not of a 3000px table. Far quieter than the content on purpose. */
.main.reader-bg-grid{ background:
  linear-gradient(rgba(77,240,255,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(77,240,255,.05) 1px, transparent 1px),
  radial-gradient(700px 380px at 50% 115%, rgba(166,77,255,.20), transparent 65%),
  var(--bg);
  background-size:44px 44px, 44px 44px, auto, auto; }
.light-mode .main.reader-bg-grid{ background:
  linear-gradient(rgba(37,99,200,.07) 1px, transparent 1px),
  linear-gradient(90deg, rgba(37,99,200,.07) 1px, transparent 1px),
  radial-gradient(700px 380px at 50% 115%, rgba(124,58,237,.10), transparent 65%),
  var(--bg);
  background-size:44px 44px, 44px 44px, auto, auto; }
.main.reader-bg-paper{ background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(180deg, #101034 0%, var(--bg) 45%, #0b0b26 100%); }
.light-mode .main.reader-bg-paper{ background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(180deg, #f7faff 0%, var(--bg) 45%, #e8edfb 100%); }
/* The floating 🌐 chip (site-lang-toggle.js) sits top-right; keep the theme
   toggle clear of it. */
.page-head .rf-theme-toggle{ margin-right:150px; }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer{ flex:1 }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label{ font-weight:700; font-size:14px; }
.field .hint{ color:var(--muted); font-size:12.5px; }
.field.bad .rf-input{ border-color:var(--error); box-shadow:0 0 0 2px rgba(255,77,109,.18); }

.notice{ border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:var(--panel); margin-bottom:12px; }
.notice.warn{ border-color:rgba(255,176,32,.5); }
.notice.err{ border-color:rgba(255,77,109,.5); }

/* ── The hub ───────────────────────────────────────────────────────────── */
.project-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.project-card{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.project-card h3{ margin:0; font-size:17px; }
.project-card .meta{ color:var(--muted); font-size:13px; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  border:1px solid var(--line); font-size:12px; font-weight:700; }
.pill.live{ color:var(--neon-cyan); border-color:rgba(77,240,255,.45); }
.pill.done{ color:var(--muted); }
/* A project somebody else set, listed because it reaches this teacher's own
   students. Marked on the card as well as under the section heading: a
   teacher who scrolled past the heading must still be able to tell whose
   project it is before they open it. */
.pill.shared{ color:var(--warning); border-color:rgba(255,176,32,.45); }
/* A full-width heading inside the card grid, so the two lists are two lists
   rather than one long one. */
.grid-head{ grid-column:1 / -1; margin:6px 0 0; }
.grid-head h2{ margin:0; font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.grid-head p{ margin:2px 0 0; }

/* ── The create page: two columns, no vertical overflow at 1280x800 ────── */
.create-grid{ display:grid; grid-template-columns:minmax(320px, 1.1fr) minmax(300px, .9fr); gap:14px; align-items:start; }
.class-list{ display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto; padding-right:4px; }
.class-row{ border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; }
.class-row > .row{ justify-content:space-between; }
.class-name{ font-weight:700; }
.roster{ margin-top:8px; border-top:1px solid var(--line); padding-top:8px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:4px 12px; max-height:180px; overflow:auto; }
.roster label{ display:flex; gap:8px; align-items:center; font-size:13.5px; }
.assign-actions{ position:sticky; bottom:0; padding-top:12px; background:linear-gradient(transparent, var(--bg) 40%); }

/* ── The project view ──────────────────────────────────────────────────── */
/* The Table / Carousel switch (owner, 2026-09-20: "larger and more 3d and
   colorful"). Big candy buttons rather than quiet chips: a gradient face, a
   darker rim below for the 3D read, and each button keeps its own hue —
   cyan for the table, purple for the carousel — so the pair reads as two
   destinations rather than two states of one thing. The pressed one sits
   DOWN (translateY + the rim shrinks), which is the whole 3D grammar. */
.view-toggle{ display:flex; gap:10px; flex-wrap:wrap; }
.view-toggle .chip{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-family:var(--font-heading); font-weight:800; font-size:16px;
  color:var(--text); cursor:pointer; padding:10px 20px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:0 4px 0 rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.view-toggle .chip .chip-ico{ font-size:18px; line-height:1; }
.view-toggle .chip:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.view-toggle .chip:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.view-toggle .chip[aria-pressed="true"]{
  transform:translateY(2px);
  box-shadow:0 2px 0 rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.35);
}
.view-toggle .chip[data-view="table"][aria-pressed="true"]{
  color:#062a33; border-color:rgba(77,240,255,.8);
  background:linear-gradient(180deg, #7ff5ff, var(--neon-cyan));
  text-shadow:none; box-shadow:0 2px 0 rgba(20,120,140,.8), var(--glow-cyan), inset 0 2px 6px rgba(255,255,255,.35);
}
.view-toggle .chip[data-view="carousel"][aria-pressed="true"]{
  color:#fff; border-color:rgba(166,77,255,.8);
  background:linear-gradient(180deg, #c07dff, var(--neon-purple));
  box-shadow:0 2px 0 rgba(80,20,140,.8), var(--glow-purple), inset 0 2px 6px rgba(255,255,255,.25);
}
.light-mode .view-toggle .chip{
  border-color:var(--line);
  background:linear-gradient(180deg, #ffffff, #e8edfb);
  box-shadow:0 4px 0 rgba(13,13,43,.18), 0 6px 14px rgba(13,13,43,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:var(--radius); }
table.reading{ border-collapse:collapse; width:100%; font-size:13.5px; }
table.reading th, table.reading td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; white-space:nowrap; }
table.reading th{ position:sticky; top:0; background:var(--panel); z-index:1; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
table.reading tr.no-response td{ color:var(--muted); }
table.reading td.num{ text-align:right; }
.cover{ width:34px; height:48px; object-fit:cover; border-radius:4px; border:1px solid var(--line); background:var(--bg); display:block; }
.cover-fallback{ width:34px; height:48px; border-radius:4px; border:1px dashed var(--line); display:grid; place-items:center; font-size:18px; }
.book-cell{ display:flex; gap:8px; align-items:flex-start; max-width:280px; white-space:normal; }
/* The prediction column carries the student's FULL text, wrapping — the
   teacher reads it in the table without opening anything. Bounded sideways
   so twenty short columns are not squeezed by one long sentence; the wrap
   already scrolls horizontally when a project has many weeks. */
table.reading td.pred{ white-space:normal; min-width:220px; max-width:340px;
  font-size:13px; line-height:1.4; }
.flag{ display:inline-block; font-size:11px; font-weight:700; color:var(--warning); }
.summary-btn{ background:none; border:0; cursor:pointer; font-size:15px; padding:0 2px; color:inherit; }

/* ── The bookshelf (teacher carousel + the student class bookshelf) ─────────
   One look on both ends (js/reading/shelf.js draws the cards): a snap row of
   real covers, the title and author centred under each, stars and the latest
   summary below — the owner's Book-Marks-style brief (2026-09-16). What
   differs between the ends is only whether a name line exists at all. */
.shelf{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:14px 4px 16px; scroll-padding-inline:4px; }
.shelf-book{ flex:0 0 clamp(160px, 19vw, 210px); scroll-snap-align:start; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:shelf-in .5s ease both; animation-delay:calc(var(--i, 0) * 60ms); }
@keyframes shelf-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.shelf-jacket{ width:100%; aspect-ratio:2 / 3; transition:transform .25s ease, filter .25s ease; }
.shelf-book:hover .shelf-jacket{ transform:translateY(-6px) scale(1.02); }
.shelf-jacket .cover, .shelf-jacket .cover-fallback{ width:100%; height:100%; object-fit:cover;
  border-radius:4px; box-shadow:0 10px 24px rgba(0,0,0,.35); font-size:44px; }
.shelf-name{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--neon-cyan); margin-top:4px; }
.shelf-mine{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--warning); border:1px solid rgba(255,176,32,.45); border-radius:999px;
  padding:2px 10px; margin-top:6px; }
.shelf-title{ font-family:Georgia, 'Times New Roman', serif; font-weight:700; font-size:15.5px;
  line-height:1.25; margin-top:4px; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; }
.shelf-author{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.shelf-pages{ font-size:12px; color:var(--muted); }
.shelf-summary{ font-size:12.5px; line-height:1.45; color:var(--muted); margin:2px 0 0;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
/* The genre under the author, and the student's prediction above the
   summary (it is what they thought BEFORE reading). The card clamps the
   prediction like the summary; the overlay and the table carry it whole. */
.shelf-genre{ display:inline-block; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--neon-purple);
  border:1px solid rgba(166,77,255,.45); border-radius:999px; padding:2px 10px; margin-top:2px; }
.shelf-prediction{ font-size:12.5px; line-height:1.45; margin:2px 0 0; font-style:italic;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.shelf-prediction b{ font-style:normal; color:var(--neon-gold); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.05em; margin-right:2px; }
.light-mode .shelf-prediction b{ color:#8a6d00; }
.stars{ display:inline-flex; gap:2px; font-size:15px; line-height:1; }
.stars .star{ color:var(--line); }
.stars .star.on{ color:var(--warning); text-shadow:0 0 6px rgba(255,176,32,.35); }
@media (prefers-reduced-motion: reduce){
  .shelf-book{ animation:none; }
  .shelf-book:hover .shelf-jacket{ transform:none; }
}

/* The 1..5 star picker on the weekly check-in. Buttons, not radios: a tap
   target a nine-year-old hits, filled up to the pick. */
.star-row{ display:flex; gap:6px; }
.star-row button{ background:none; border:0; cursor:pointer; font-size:30px; line-height:1;
  padding:2px 4px; color:var(--line); transition:transform .12s ease, color .12s ease; }
.star-row button.on{ color:var(--warning); text-shadow:0 0 8px rgba(255,176,32,.4); }
.star-row button:hover{ transform:scale(1.15); }

/* ── The student form ──────────────────────────────────────────────────── */
.student-main{ max-width:1400px; }
.candidates{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:10px; }
.candidate{ border:1px solid var(--line); border-radius:var(--radius); padding:8px; background:var(--panel); cursor:pointer; text-align:left; color:inherit; }
.candidate:hover{ border-color:rgba(77,240,255,.45); }
.candidate[aria-pressed="true"]{ border-color:rgba(77,240,255,.7); box-shadow:var(--glow-cyan); }
.candidate .cover, .candidate .cover-fallback{ width:100%; height:150px; margin-bottom:6px; }
.candidate .t{ font-weight:700; font-size:13.5px; line-height:1.25; }
.candidate .a{ color:var(--muted); font-size:12px; }
.confirm{ display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.confirm .cover, .confirm .cover-fallback{ width:80px; height:112px; }
/* The unmatched escape hatch is deliberately NOT a peer of the confirm
   button: small, quiet, and below the candidates. It is a real door and it
   is not the path of least resistance. */
.not-here{ background:none; border:0; color:var(--muted); font-size:12.5px; text-decoration:underline; cursor:pointer; padding:6px 0; margin-top:8px; }
.day-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:6px; margin-top:8px; }
.day-grid label{ display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:13.5px; cursor:pointer; }
.day-grid label:has(input:checked){ border-color:rgba(77,240,255,.55); background:rgba(77,240,255,.10); }
textarea.rf-input{ min-height:140px; resize:vertical; font:inherit; }
.counter{ color:var(--muted); font-size:12.5px; }
.counter.over{ color:var(--error); }

/* ── The prediction box: sentence starters inside it, key words above ─────
   The starters sit INSIDE the textarea's top-left corner in grey, like a
   placeholder a student can tap. Visibility is one rule with no state:
   they show exactly while the box is empty (js/reading/respond.js
   syncStarters), so typing hides them and erasing everything brings them
   back. pointer-events:none on the overlay keeps the textarea clickable
   between the buttons. */
.starter-box{ position:relative; }
.starter-box textarea{ min-height:120px; width:100%; }
.starter-overlay{ position:absolute; top:10px; left:12px; right:12px;
  display:flex; flex-wrap:wrap; gap:6px; pointer-events:none; }
.starter-overlay .starter{ pointer-events:auto; cursor:pointer; font:inherit;
  font-size:13px; color:var(--muted); opacity:.8; background:transparent;
  border:1px dashed var(--line); border-radius:999px; padding:4px 12px;
  transition:color .12s ease, border-color .12s ease, opacity .12s ease; }
.starter-overlay .starter:hover{ color:var(--text); opacity:1;
  border-color:rgba(77,240,255,.5); }
.keyword-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.keyword-row .keyword{ cursor:pointer; font:inherit; font-size:13px;
  font-weight:700; color:var(--neon-gold); background:rgba(255,225,0,.08);
  border:1px solid rgba(255,225,0,.4); border-radius:999px; padding:3px 12px; }
.keyword-row .keyword:hover{ background:rgba(255,225,0,.18); }
.light-mode .keyword-row .keyword{ color:#7a6a00; }

/* The genre, where the teacher reads it (the book cell and the overlay). */
.genre-tag{ display:inline-block; align-self:flex-start; font-size:11px;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--neon-purple); border:1px solid rgba(166,77,255,.45);
  border-radius:999px; padding:2px 10px; margin-top:4px; }
.past-list{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:8px; }
.past-list li{ border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; }

@media (max-width: 900px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:static; height:auto; }
  .main{ height:auto; }
  html,body{ overflow:auto; }
  .create-grid{ grid-template-columns:1fr; }
  .class-list{ max-height:none; }
  .page-head .rf-theme-toggle{ margin-right:0; }
}