/* One look, a French school notebook: Seyès-ruled paper, ink-blue handwriting and the teacher's red pen.
   The tokens set colours and type, the base lays everything out, the touches at the end draw the notebook.
   Fonts are self-hosted (see fonts/README.md): the CSP allows nothing else. Patrick Hand has one weight,
   so synthetic bold is off and the handwriting stays clean wherever a rule asks for 600 or 700. */

@font-face { font-family: "Patrick Hand"; src: url(fonts/patrick-hand.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Caveat"; src: url(fonts/caveat.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
  --bg: #fcfbf6;
  --bg-art: linear-gradient(90deg, transparent 10px, #ef8f95 10px 12px, transparent 12px),
    repeating-linear-gradient(180deg, transparent 0 31px, #b3c4e3 31px 32px),
    repeating-linear-gradient(180deg, transparent 0 7px, #e3e9f4 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 31px, #e9e0f0 31px 32px);
  --surface: #fff;
  --surface-2: #eef1f8;
  --surface-soft: rgba(255, 255, 255, .75);
  --solid: #fff;
  --bar-bg: rgba(252, 251, 246, .95);
  --side-bg: #e9dfc9;
  --text: #1f3a8a;
  --muted: #6c7aa6;
  --line: #d5dcec;
  --edge: #ccd5ea;
  --edge-w: 1px;
  --r: 3px; --r-sm: 3px; --r-btn: 12px;
  --panel-shadow: 0 1px 0 rgba(31, 58, 138, .05), 0 12px 24px -16px rgba(31, 58, 138, .4);
  --blur: none;
  --btn-bg: #fff; --btn-text: var(--text); --btn-edge: #c3cde6; --btn-shadow: 0 2px 0 #c3cde6;
  --press: translateY(2px);
  --accent-bg: #2747b5; --accent-c: #2747b5; --accent-text: #fff; --accent-shadow: 0 3px 0 #172c78;
  --good: #2e9a5a; --good-text: #fff; --good-soft: #e1f3e7; --good-shadow: 0 3px 0 #1f6e40;
  --info: #2747b5; --info-text: #fff; --info-soft: #e3e9f8; --info-shadow: 0 3px 0 #172c78;
  --warn: #f2c230; --warn-soft: #fff3c4;
  --bad: #d7263d; --bad-soft: #fde1e4;
  --c-cards: #d7263d; --c-listen: #2747b5; --c-grammar: #7b3fa0; --c-talk: #e38b12; --c-journal: #2e9a5a;
  --c-streak: #d7263d; --c-words: #2747b5; --c-xp: #8a3ffc;
  --display: "Patrick Hand", "Chalkboard SE", var(--sys); --display-w: 400; --display-track: 0;
  --body: var(--sys);
  --fr: "Patrick Hand", "Chalkboard SE", var(--sys); --fr-style: normal; --fr-w: 400;
  --label-font: var(--sys); --eyebrow: #1f3a8a;
  --btn-font: var(--sys); --btn-case: none; --btn-track: 0;
  --nav-on-bg: #fffaf0; --nav-on-text: #1f3a8a;
  --focus: #d7263d;
  --bar-fill: #2e9a5a; --me-bg: #2747b5; --me-text: #fff;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); font-synthesis-weight: none; }
body {
  margin: 0; min-height: 100dvh; color: var(--text); font: 17px/1.5 var(--body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-art); }
.boot { font-family: var(--display); color: var(--muted); text-align: center; margin-top: 40vh; letter-spacing: .1em; }

h1, h2, h3 { font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-track);
  line-height: 1.1; margin: 0 0 .4em; }
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.fr { font-family: var(--fr); font-style: var(--fr-style); font-weight: var(--fr-w); }
.grow { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.spacer { height: 18px; }
.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }
.label { font: 700 12px/1.2 var(--label-font); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
kbd { font: 600 12px var(--sys); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); }

/* ---------------------------------------------------------------- layout: one column on the phone, sidebar on a computer */
.page, .main { width: 100%; max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 18px); }
.side { display: none; }
@media (min-width: 700px) {
  .page, .main { max-width: 640px; padding-top: 36px; }
}
@media (min-width: 960px) {
  .shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100dvh; }
  .main { max-width: 780px; padding: 44px 48px 36px; }
  .main.wide { max-width: 1120px; }
  .side { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; padding: 28px 16px 22px;
    border-right: 1px solid var(--line); background: var(--side-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
  .brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 24px; font: var(--display-w) 22px var(--display);
    letter-spacing: var(--display-track); }
  .brand img { width: 38px; height: 38px; border-radius: 11px; }
  .sidenav button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: var(--muted);
    font: 600 15px var(--btn-font); text-transform: var(--btn-case); letter-spacing: var(--btn-track); padding: 11px 12px;
    border-radius: var(--r-sm); cursor: pointer; text-align: left; }
  .sidenav button:hover { background: var(--surface-2); color: var(--text); }
  .sidenav button.on { background: var(--nav-on-bg); color: var(--nav-on-text); }
  .sidenav .ico { width: 20px; height: 20px; }
  .side-foot { margin-top: auto; padding: 14px; border-radius: var(--r-sm); background: var(--surface);
    border: var(--edge-w) solid var(--edge); display: flex; align-items: center; gap: 12px; }
  .side-foot .ico { width: 26px; height: 26px; color: var(--c-streak); }
  .side-foot b { display: block; font: var(--display-w) 18px/1.1 var(--display); }
  h1 { font-size: 42px; }
}

/* ---------------------------------------------------------------- top bar */
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; min-height: 42px; }
.top .title { font: var(--display-w) 19px/1.2 var(--display); letter-spacing: var(--display-track); flex: 1; }
.iconbtn { border: 0; background: none; font: inherit; font-size: 20px; padding: 8px; color: var(--text); cursor: pointer;
  border-radius: 12px; display: inline-grid; place-items: center; }
.iconbtn:hover { background: var(--surface-2); }
.iconbtn:active { background: var(--surface-2); }
.bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; flex: 1; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--bar-fill, var(--good)); transition: width .4s; }

/* ---------------------------------------------------------------- panels, buttons, fields */
.panel { background: var(--surface); border: var(--edge-w) solid var(--edge); border-radius: var(--r); box-shadow: var(--panel-shadow);
  padding: 20px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.panel.soft { box-shadow: none; border-color: var(--line); background: var(--surface-soft); }
.panel + .panel { margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1.2 var(--btn-font);
  text-transform: var(--btn-case); letter-spacing: var(--btn-track); color: var(--btn-text); background: var(--btn-bg);
  border: var(--edge-w) solid var(--btn-edge); border-radius: var(--r-btn); box-shadow: var(--btn-shadow); padding: 12px 18px;
  min-height: 50px; cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .08s, filter .15s, background .15s;
  user-select: none; -webkit-user-select: none; }
.btn:active { transform: var(--press); box-shadow: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--accent-bg); color: var(--accent-text); border-color: transparent; box-shadow: var(--accent-shadow); }
.btn.good { background: var(--good); color: var(--good-text); border-color: transparent; box-shadow: var(--good-shadow); }
.btn.info { background: var(--info); color: var(--info-text); border-color: transparent; box-shadow: var(--info-shadow); }
.btn.ghost { box-shadow: none; border-color: var(--line); background: transparent; }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 58px; font-size: 18px; }
.btn.round { width: 64px; height: 64px; min-height: 0; border-radius: 50%; padding: 0; font-size: 24px; }
.btn.round.huge { width: 88px; height: 88px; font-size: 34px; }
.btn.pill { min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 99px; }
.btns { display: flex; gap: 10px; }
.btns > .btn { flex: 1; padding-left: 6px; padding-right: 6px; }
@media (hover: hover) { .btn:hover { filter: brightness(1.06); } }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

input, textarea { font: 18px var(--body); color: var(--text); background: var(--surface-soft); width: 100%;
  border: var(--edge-w) solid var(--edge); border-radius: var(--r-sm); padding: 12px 14px; outline: none; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
textarea { min-height: 100px; resize: vertical; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
.code { font: 700 34px/1 var(--display); letter-spacing: .35em; text-align: center; padding: 16px 10px; }
.bigcode { font: 700 44px/1 var(--display); letter-spacing: .25em; text-align: center; padding: 10px 0 4px; }

.note { border-radius: var(--r-sm); padding: 10px 14px; font-size: 15px; }
.note.err { background: var(--bad-soft); }
.note.ok { background: var(--good-soft); }
.note.info { background: var(--info-soft); }
.note.warn { background: var(--warn-soft); }

/* ---------------------------------------------------------------- home */
.home { display: flex; flex-direction: column; flex: 1; }
.hero { position: relative; margin: 6px 0 22px; }
.eyebrow { font: 700 13px/1.2 var(--label-font); text-transform: uppercase; letter-spacing: .16em; color: var(--eyebrow);
  margin-bottom: 10px; }
.hero h1 { font-size: 38px; margin-bottom: 8px; }
.hero p { margin: 0; color: var(--muted); }
.home-grid { display: flex; flex-direction: column; gap: 16px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--surface); border: var(--edge-w) solid var(--edge); border-radius: var(--r-sm); padding: 12px;
  display: flex; flex-direction: column; gap: 4px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.stat .ico { color: var(--c); width: 22px; height: 22px; }
.stat b { font: var(--display-w) 30px/1 var(--display); letter-spacing: var(--display-track); }
.stat span { font-size: 13px; color: var(--muted); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.perf { height: 0; border-top: 1px solid var(--line); margin: 14px 0 4px; position: relative; }
.steps { list-style: none; padding: 0; margin: 0 0 18px; position: relative; }
.steps li { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.check { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; z-index: 1;
  color: var(--c); background: var(--solid); border: 2px solid var(--c); }
.check .ico { width: 17px; height: 17px; }
.steps li.done .check { background: var(--good); border-color: var(--good); color: var(--good-text); }
.steps .st { font-weight: 600; }
.steps li.done .st { color: var(--muted); }
.steps .hint { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.week { display: flex; flex-direction: column; gap: 12px; }
.week .panel-head { flex-wrap: wrap; row-gap: 4px; }
/* Seven equal columns whose circles shrink below 30px in a narrow week panel (the 960px two-column home). */
.dots { display: flex; gap: 6px; }
.dot { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 12px var(--label-font); color: var(--muted); }
.dot i { width: 100%; max-width: 30px; aspect-ratio: 1; height: auto; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: #fff; }
.dot i .ico { width: 15px; height: 15px; }
.dot.on i { background: var(--c-streak); }
.dot.cur { color: var(--text); }
.dot.cur i { box-shadow: 0 0 0 2px var(--solid), 0 0 0 4px var(--c-streak); }
.nav { display: flex; gap: 8px; margin-top: auto; padding-top: 20px; }
.nav .btn { flex: 1; flex-direction: column; gap: 4px; font-size: 13px; min-height: 60px; padding: 8px 4px; box-shadow: none; }
.nav .btn .ico { width: 21px; height: 21px; }
@media (min-width: 960px) {
  .hero { margin: 0 0 28px; }
  .hero h1 { font-size: 52px; }
  .home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start;
    grid-template-rows: auto 1fr; grid-template-areas: "today stats" "today week"; }
  .home-grid .today { grid-area: today; padding: 26px; }
  .home-grid .stats { grid-area: stats; }
  .home-grid .week { grid-area: week; }
  .home .nav { display: none; }
}

/* ---------------------------------------------------------------- cards */
.flash { min-height: min(62vh, 520px); display: flex; flex-direction: column; text-align: center; position: relative; }
.flash > .row:first-child { justify-content: space-between; }
.flash .lesson { font: 700 12px var(--label-font); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.flash .front { font: var(--display-w) 38px/1.15 var(--display); letter-spacing: var(--display-track); margin: 18px 0 10px;
  overflow-wrap: anywhere; }
.flash .back { font-size: 22px; margin: 6px 0; }
.flash .ex { font-family: var(--fr); font-style: var(--fr-style); font-size: 19px; margin-top: 14px; cursor: pointer; }
.flash .ex-sv { color: var(--muted); font-size: 15px; }
.flash .tips { background: var(--warn-soft); border-radius: var(--r-sm); padding: 9px 13px; font-size: 15px; text-align: left; margin-top: 14px; }
.flash img { max-width: 100%; max-height: 200px; border-radius: var(--r-sm); object-fit: cover; margin: 8px auto 2px; display: block; }
.flash .credit { font-size: 11px; color: var(--muted); }
.flash .mid { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sounds { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.gloss { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 10px 0; }
.gloss span { display: inline-flex; flex-direction: column; align-items: center; }
.gloss b { font: var(--fr-w) 17px var(--fr); font-style: var(--fr-style); }
.gloss small { font-size: 12px; color: var(--muted); }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.rate .btn { flex-direction: column; gap: 2px; font-size: 15px; padding: 8px 2px; min-height: 60px; color: var(--text); box-shadow: none; }
.rate .btn small { font: 400 11px var(--body); opacity: .8; text-transform: none; letter-spacing: 0; }
.rate .again { background: var(--bad-soft); border-color: transparent; }
.rate .hard { background: var(--warn-soft); border-color: transparent; }
.rate .good { background: var(--good-soft); border-color: transparent; }
.rate .easy { background: var(--info-soft); border-color: transparent; }
.rate .btn.suggest { outline: 3px solid var(--focus); outline-offset: 2px; }
.badge { display: inline-block; font: 700 11px var(--label-font); letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px;
  border-radius: 99px; background: var(--surface-2); }
.badge.new { background: var(--accent-bg); color: var(--accent-text); }
.badge.mine { background: var(--good); color: var(--good-text); }
.keys { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); }
.keys kbd { margin: 0 2px; }
@media (hover: none), (max-width: 699px) { .keys { display: none; } }
@media (min-width: 960px) { .flash { min-height: 470px; padding: 28px; } .flash .front { font-size: 46px; } }

/* ---------------------------------------------------------------- words and dictation marks */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: var(--fr-w) 16px var(--fr); font-style: var(--fr-style); border: var(--edge-w) solid var(--edge); background: var(--surface);
  color: var(--text); border-radius: 99px; padding: 8px 15px; cursor: pointer; }
.chip.on { background: var(--good); color: var(--good-text); border-color: var(--good); }
.marks { font: 20px/1.8 var(--fr); font-style: var(--fr-style); }
.marks span { padding: 1px 4px; border-radius: 6px; margin-right: 2px; }
.marks .ok { background: var(--good-soft); }
.marks .accent { background: var(--warn-soft); }
.marks .wrong, .marks .extra { background: var(--bad-soft); text-decoration: line-through; }
.marks .missing { background: var(--info-soft); }
.marks ins { text-decoration: none; color: var(--good); font-weight: 700; margin-right: 4px; }

/* ---------------------------------------------------------------- listening */
.player { display: flex; align-items: center; gap: 14px; }
.player .meta { flex: 1; }
.lines { list-style: none; padding: 0; margin: 0; }
.lines li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.lines .who { font: 700 15px var(--label-font); color: var(--c-listen); width: 22px; flex: none; padding-top: 2px; }
.lines .sv { color: var(--muted); font-size: 15px; }
.opt { display: flex; justify-content: flex-start; width: 100%; text-align: left; margin-top: 8px; font-weight: 500;
  text-transform: none; letter-spacing: 0; font-family: var(--body); }
.opt.right { background: var(--good-soft); }
.opt.wrongpick { background: var(--bad-soft); }
.wordlist { list-style: none; padding: 0; margin: 0; }
.wordlist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- talk */
.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.bubble { max-width: 86%; padding: 11px 15px; border-radius: 20px; border: var(--edge-w) solid var(--edge); }
.bubble.camille { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 6px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.bubble.me { align-self: flex-end; background: var(--me-bg, var(--info)); color: var(--me-text, var(--info-text)); border-color: transparent;
  border-bottom-right-radius: 6px; }
.bubble .fr { font-size: 19px; }
.bubble .sv { opacity: .75; font-size: 14px; margin-top: 4px; }
/* Her words while she is still speaking: the same bubble, paler until Whisper has heard all of it. */
.bubble.me.live { opacity: .6; }
/* Camille is writing: three dots that rise in turn, still for anyone who asked for less motion. */
.bubble.typing { display: flex; gap: 5px; padding: 15px 18px; }
.bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text); opacity: .35;
  animation: typing 1.2s infinite ease-in-out; }
.bubble.typing span:nth-child(2) { animation-delay: .15s; }
.bubble.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .bubble.typing span { animation: none; } }
.bubble .tools { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.bubble .tools button { border: 0; background: var(--surface-2); font: 600 13px var(--body); color: var(--text); padding: 4px 10px;
  cursor: pointer; border-radius: 99px; display: inline-flex; align-items: center; gap: 5px; }
.fix { align-self: flex-end; max-width: 86%; background: var(--warn-soft); border-radius: var(--r-sm); padding: 8px 12px; font-size: 15px; }
.fix b { font-family: var(--fr); font-style: var(--fr-style); }
/* In a conversation the title bar with Avsluta stays in reach while the chat scrolls. */
.top.stick { position: sticky; top: 0; z-index: 3; margin: 0 -16px 18px; padding: 6px 16px; background: var(--bar-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.talkbar { position: sticky; bottom: 0; background: var(--bar-bg); padding: 14px 0 4px; border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mic { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mic .btn.rec { background: var(--bad); color: #fff; border-color: transparent; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--bad) 22%, transparent); } }
.scene { display: flex; justify-content: flex-start; width: 100%; text-align: left; margin-top: 10px; }
@media (min-width: 960px) { .scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .scenes .scene { margin: 0; } }

/* ---------------------------------------------------------------- done, misc */
.done { text-align: center; padding-top: 6vh; position: relative; }
.done .streak-n { font: var(--display-w) 96px/1 var(--display); color: var(--c-streak); }
.confetti { position: absolute; inset: 0 0 auto; height: 0; pointer-events: none; }
.confetti i { position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation: fall 2.6s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fall { 0% { opacity: 1; transform: translateY(-20px) rotate(0); } 100% { opacity: 0; transform: translateY(70vh) rotate(540deg); } }
.spin { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--text);
  border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.wait { text-align: center; color: var(--muted); padding: 40px 0; }
.privacy li { margin-bottom: 8px; }
.entries .e { padding: 12px 0; border-bottom: 1px solid var(--line); }
.entries .e .fr { font-size: 19px; }
.seg { display: flex; border: var(--edge-w) solid var(--edge); border-radius: var(--r-sm); overflow: hidden; }
.seg button { flex: 1; border: 0; background: transparent; font: 600 15px var(--btn-font); padding: 11px 6px; cursor: pointer; color: var(--text); }
.seg button + button { border-left: var(--edge-w) solid var(--edge); }
.seg button.on { background: var(--accent-bg); color: var(--accent-text); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle input { width: 24px; height: 24px; accent-color: var(--accent-c); }
.login { margin-top: 10vh; }
.login img { border-radius: 20px; }
@media (min-width: 960px) { .login { margin: 14vh auto 0; max-width: 440px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ================================================================ notebook touches */
/* the date written in the top corner and the title underlined in red, as in a French classroom */
.eyebrow { font: 400 17px/1.6 var(--display); text-transform: none; letter-spacing: 0; text-align: right; }
.hero h1 { font-size: 36px; line-height: 1.35; text-decoration: underline 2px #d7263d; text-underline-offset: 8px; }
h1, h2, .top .title { line-height: 1.3; }
.top .title { font-size: 22px; }
/* today's homework on a taped-in sheet, graded in red; Caveat is the teacher's hand */
.today { position: relative; }
.today::before { content: ""; position: absolute; top: -13px; left: 50%; width: 120px; height: 28px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 214, 102, .72); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.today .label { font: 400 21px var(--display); text-transform: none; letter-spacing: 0; color: var(--text); }
.ticket-no { font: 700 30px/1 "Caveat", var(--sys); color: #d7263d; transform: rotate(-6deg); padding: 2px 10px;
  border: 2px solid #d7263d; border-radius: 50%; }
.perf { border-top: 2px solid #ef8f95; }
.steps li + li { border-top: 1px solid var(--line); }
.check { border-radius: 4px; border: 2px solid var(--c); background: #fff; }
.steps li.done .check { background: #fff; color: #d7263d; border-color: #d7263d; }
.steps .st { font: 400 23px/1.1 var(--fr); }
.steps .hint { font: 400 18px var(--fr); }
/* Patrick Hand draws smaller than the system font, so French text set in it goes a size up */
.fr { font-size: 1.2em; line-height: 1.35; }
/* the counters are sticky notes */
.stats { gap: 14px; }
.stat { border: 0; border-radius: 2px; box-shadow: 0 10px 14px -10px rgba(0, 0, 0, .35); align-items: center; padding: 14px 8px; }
.stat:nth-child(1) { background: #fff3a6; transform: rotate(-2.5deg); }
.stat:nth-child(2) { background: #ffd6e3; transform: rotate(1.5deg); }
.stat:nth-child(3) { background: #cdf0dc; transform: rotate(-1deg); }
.stat b { font: 700 40px/1 "Caveat", var(--sys); }
.stat span { color: #4a5680; }
.dot i { background: #fff; border: 1.5px solid var(--edge); color: #d7263d; }
.dot.on i { background: #fff; border: 2px solid #d7263d; }
.dot.cur i { box-shadow: 0 0 0 3px #fff3a6; }
/* the card is an index card: a red head line, blue ruled lines */
.flash { border: 0;
  background: linear-gradient(transparent 64px, #e4606b 64px 66px, transparent 66px),
    repeating-linear-gradient(180deg, transparent 0 35px, #c6d5ee 35px 36px) 0 66px / 100% calc(100% - 66px) no-repeat, #fff; }
.flash .lesson { color: #d7263d; }
.flash .front { line-height: 1.4; }
.flash .ex { font-size: 22px; }
.rate .btn { border: 1.5px solid; }
.rate .again { border-color: #f4a3ad; }
.rate .hard { border-color: #f0d36c; }
.rate .good { border-color: #9fd8b4; }
.rate .easy { border-color: #b5c4ee; }
.bubble, .bubble.camille, .bubble.me { border-radius: 4px; }
.bubble.camille { box-shadow: var(--panel-shadow); }
.bubble .fr { font-size: 21px; line-height: 1.3; }
/* corrections in the teacher's red pen */
.fix { background: #fff; border-left: 3px solid #d7263d; color: #b31d31; box-shadow: var(--panel-shadow); }
.fix b { font: 400 20px var(--fr); }
/* on a computer the sidebar is the kraft cover, bound with a spiral */
.side { border-right: 0; box-shadow: inset -1px 0 0 #d4c6a8; }
.side::after { content: ""; position: absolute; top: 0; bottom: 0; right: -9px; width: 18px;
  background: radial-gradient(circle, #fcfbf6 0 4px, #8d96aa 4.5px 6.5px, transparent 7px) 0 6px / 18px 26px repeat-y; }
.brand { font: 400 24px var(--display); }
.sidenav button.on { box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.done .streak-n { font: 700 110px/1 "Caveat", var(--sys); color: #d7263d; }
@media (min-width: 960px) {
  /* the paper starts beside the sidebar; login and placement have none, so there it fills the window */
  body:has(.side)::before { left: 256px; background-position: 40px 0, 0 0, 0 0, 0 0; }
  .hero h1 { font-size: 48px; }
}

/* grammar: a gap in the sentence she fills in place */
.gram .eyebrow { color: var(--c-grammar); text-align: left; }
.gapline { line-height: 2.1; font-size: 22px; }
input.gap { display: inline-block; max-width: 70%; padding: 2px 8px; margin: 0 4px; font-size: 20px; vertical-align: baseline; }
b.gap { color: var(--c-grammar); border-bottom: 2px solid var(--c-grammar); padding: 0 4px; }
.feel .btns { margin-top: 10px; }
.adapt-note { color: var(--c-grammar); margin-top: 6px; }

/* ---------------------------------------------------------------- smoothing (2026-10-26) */
.panel ul, .panel ol { margin: 0; padding-left: 20px; }
.steps li[role="button"] { cursor: pointer; }
@media (hover: hover) { .steps li[role="button"]:hover .st { text-decoration: underline; text-decoration-color: var(--line); } }
.btn.playing { color: var(--c-cards); }
.scene { align-items: flex-start; }
.scene .ico { margin-top: 3px; flex: none; }
.scene-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scene-t small { font-size: 15px; font-weight: 400; color: var(--muted); line-height: 1.3; }
.accents { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.accents button { font: 400 17px var(--fr); min-width: 32px; height: 32px; padding: 0 6px; border: 1px solid var(--btn-edge);
  border-radius: 8px; background: var(--btn-bg); color: var(--text); cursor: pointer; }
.accents button:active { transform: var(--press); }
.mid .accents { justify-content: center; margin-top: 14px; }
@media (hover: none), (pointer: coarse) { .accents { display: none; } }
/* An answered question keeps its right and wrong marks readable; only the untouched options fade. */
.opt[disabled] { opacity: 1; }
.opt[disabled]:not(.right):not(.wrongpick) { opacity: .5; }
.opt.right { border-color: var(--good); }
.opt.wrongpick { border-color: var(--bad); }