@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-display: "Newsreader", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

/* --------------------------------------------------------------------------
   Chiacchiera design tokens.

   The identity: a warm paper background, terracotta for anything the learner is
   asked to act on, apricot for the quiet accents, espresso ink for the text, and
   Newsreader (a conversational serif) over DM Sans.

   Two rules the palette below keeps, because they are semantics and not taste:

     * `--success` and `--tone-green` stay green. They are the *correct answer*
       of every exercise (see .is-correct below), so they must not follow the
       brand hue — a terracotta "correct" would read as a mistake.
     * `--destructive` stays a crimson clearly redder and darker than
       `--primary`, so a wrong answer is never mistaken for a brand surface.
   -------------------------------------------------------------------------- */
:root {
  --radius: 0.75rem;
  --background: oklch(0.988 0.005 85);
  --foreground: oklch(0.29 0.03 45);
  --card: oklch(1 0 0);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.48 0.14 38);
  --primary-foreground: oklch(0.99 0.008 85);
  --secondary: oklch(0.972 0.018 85);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.955 0.012 85);
  --muted-foreground: oklch(0.52 0.028 50);
  --accent: oklch(0.925 0.05 70);
  --accent-foreground: oklch(0.42 0.12 35);
  --success: oklch(0.5 0.1 155);
  --success-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.45 0.19 20);
  --destructive-foreground: oklch(0.98 0.01 85);
  --border: oklch(0.9 0.012 75);
  --input: var(--border);
  --ring: var(--primary);
  --shadow-soft: 0 6px 20px -12px oklch(0.29 0.03 45 / 0.18);
  --tone-green: oklch(0.93 0.045 155);
  --tone-yellow: oklch(0.955 0.045 85);
  --tone-coral: oklch(0.945 0.035 30);
  --tone-blue: oklch(0.94 0.03 240);
  --scene-overlay: linear-gradient(90deg, oklch(0.24 0.04 40 / 0.88), oklch(0.24 0.04 40 / 0.55) 40%, transparent 80%);
  --scrim: oklch(0.2 0.02 40 / 0.35);
}

@layer base {
  * { border-color: var(--color-border); }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    min-height: 100vh;
  }
  h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0; }
  * { letter-spacing: 0 !important; }
}

@utility shadow-soft { box-shadow: var(--shadow-soft); }

.portal-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); min-height: 100vh; }
/* The sidebar is the wordmark's container: the brand name is configuration
   (italian_portal.brand.name), so its width is not known here — see .brand. */
.portal-sidebar { container-type: inline-size; position: sticky; top: 0; height: 100vh; padding: 38px 24px 24px; background: var(--card); border-right: 1px solid var(--border); display:flex; flex-direction:column; }
/* The brand lockup: the mark of the brand, then the wordmark.
   The mark is the file the tab icon is generated from (public/img/mark.png, see
   the landing page's nav and the favicon test), so the portal looks the same in
   the browser tab and on the page.

   The wordmark is sized to the sidebar instead of to a fixed number.
   `chiacchiera.` measures 223px at 42px — 42px more than the 181px content box
   of the 230px sidebar, so the size the mockup drew for the eight characters of
   `lezioni.` no longer fits. The mark and the gap take 42px of that box, which
   leaves 139px for the name: 14cqi is that measurement as a share of the box
   (223px / 42px = 5.31px per font-size px, so 97% of 139px is a 25px font), which
   keeps the lockup one line wide whatever the configured name is; the 42px cap is
   the design's size, and what the sign-in page keeps (it has no sidebar, so no
   container, and the name has room there). The px size first is the fallback for
   a browser without container query units. */
.brand { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:33px; font-size:clamp(20px,14cqi,42px); line-height:1; font-weight:600; }
/* The lockup of a page that centres it — the sign-in / sign-up shell. */
.brand.is-centered { justify-content:center; }
.brand-mark { width:32px; height:32px; flex:0 0 auto; border-radius:6px; }
.sidebar-note { margin-top:auto; padding:24px 0 0; }
.member-avatar { display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px; flex-shrink:0; border-radius:50%; background:var(--accent); color:var(--primary); font-family:var(--font-display); }
.member-avatar.small { width:32px; height:32px; }
.portal-body { min-width:0; }
.portal-header { height:76px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; padding:0 42px; background:var(--card); }
.portal-content { max-width:1240px; margin:0 auto; padding:36px 42px 50px; min-height:calc(100vh - 144px); }
.eyebrow { font-size:10px; font-weight:600; color:var(--primary); }
.level-label { display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--card); padding:8px 12px; border-radius:4px; font-size:11px; color:var(--muted-foreground); }
.welcome-scene { position:relative; min-height:280px; overflow:hidden; }
.welcome-scene img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.welcome-scene::after { content:''; position:absolute; inset:0; background:var(--scene-overlay); }
.welcome-copy { position:relative; z-index:1; color:var(--primary-foreground); padding:30px 34px; }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:24px 0; border-bottom:1px solid var(--border); }
.dashboard-stats>div { display:flex; gap:14px; align-items:center; padding:0 24px; border-right:1px solid var(--border); }
.dashboard-stats>div:first-child { padding-left:0; }.dashboard-stats>div:last-child { border:0; }
.stat-icon { color:var(--primary); background:var(--accent); padding:10px; border-radius:6px; }.stat-icon svg { width:20px; height:20px; }
.dashboard-stats strong { font-family:var(--font-display); font-size:25px; font-weight:500; }.dashboard-stats p { font-size:11px; color:var(--muted-foreground); }
.section-symbol { display:flex; justify-content:center; align-items:center; width:34px; height:34px; border:1px solid var(--border); border-radius:50%; color:var(--primary); flex-shrink:0; }.section-symbol svg { width:18px; }
.topic-form { margin-top:20px; padding:16px 18px; border:1px solid var(--border); border-radius:6px; background:var(--card); }.topic-form:focus-within { border-color:var(--primary); }
.topic-form textarea { width:100%; resize:vertical; min-height:68px; background:transparent; outline:none; font-size:14px; }.topic-form textarea::placeholder { color:var(--muted-foreground); }
.lesson-tile { padding:22px; border:1px solid var(--border); border-radius:6px; background:var(--card); transition:border-color .2s; }.lesson-tile:hover { border-color:var(--primary); }
.activity-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:6px; color:var(--primary); background:var(--card); }.activity-icon svg { width:20px; height:20px; }
.tone-green { background:var(--tone-green); }.tone-yellow { background:var(--tone-yellow); }.tone-coral { background:var(--tone-coral); }.tone-blue { background:var(--tone-blue); }
.practice-tile { border-radius:6px; padding:28px; transition:transform .2s; }.practice-tile:hover { transform:translateY(-3px); }
.portal-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:22px 42px; border-top:1px solid var(--border); font-size:10px; color:var(--muted-foreground); }
.search-field { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:10px 14px; color:var(--muted-foreground); font-size:13px; }.search-field input { outline:none; background:transparent; width:180px; }
.portal-select,.profile-field input,.profile-field select { background:var(--card); border:1px solid var(--border); border-radius:5px; padding:12px 14px; font-size:14px; color:var(--foreground); max-width:100%; }
.profile-field { display:flex; flex-direction:column; gap:10px; font-size:13px; font-weight:500; }.profile-avatar { display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; background:var(--accent); color:var(--primary); }
.mobile-scrim { display:none; }
@media(max-width:1023px) { .portal-layout { grid-template-columns:minmax(0,1fr); }.portal-sidebar { position:fixed; left:0; z-index:30; width:230px; transform:translateX(-100%); transition:transform .2s; }.portal-sidebar.is-open { transform:translateX(0); }.mobile-scrim { display:block; position:fixed; inset:0; background:var(--scrim); z-index:20; } }
@media(max-width:640px) { .portal-content { padding:26px 20px 36px; }.portal-header { padding:0 16px; height:64px; }.welcome-copy { padding:28px 22px; }.welcome-scene { min-height:310px; }.dashboard-stats>div { padding:0 10px; gap:8px; }.stat-icon { padding:7px; }.stat-icon svg { width:16px; }.dashboard-stats strong { font-size:22px; }.dashboard-stats p { font-size:10px; }.portal-footer { padding:20px; }.search-field { width:100%; }.search-field input { width:100%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }

/* --------------------------------------------------------------------------
   Lesson displays — port of Mockups/italian-portal/src/routes/lesson.$id*.

   A lesson is five separate displays (overview, verb tables, missing words,
   multiple choice, sentence writing) reached through the pill navigation below.
   The stateful pieces (tabs, study/test toggle, answer inputs, quiz choices) are
   plain classes so their look does not depend on Tailwind's CDN scanning the
   page.
   -------------------------------------------------------------------------- */
:root {
  /* Repeated as plain CSS on purpose: the `@theme` block at the top of this file
     is Tailwind v4 syntax, which a browser loading the file directly ignores —
     that left the Newsreader / DM Sans faces linked in the layout unused. */
  --font-display: "Newsreader", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
}

/* The `hidden` attribute has to win over the display of the classes below. */
[hidden] { display: none !important; }

.lesson-tab { border-radius:9999px; padding:8px 16px; font-size:14px; font-weight:500; color:var(--muted-foreground); transition:background-color .2s,color .2s; }
.lesson-tab:hover { background:var(--muted); }
.lesson-tab.is-active { background:var(--primary); color:var(--primary-foreground); }

.lesson-card { display:block; padding:24px; border:1px solid var(--border); border-radius:8px; background:var(--card); box-shadow:var(--shadow-soft); }
a.lesson-card { transition:transform .2s,border-color .2s; }
a.lesson-card:hover { transform:translateY(-2px); border-color:var(--primary); }

.lesson-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:6px; background:var(--primary); padding:12px 24px; font-size:14px; font-weight:500; color:var(--primary-foreground); }
.lesson-button:disabled { opacity:.5; cursor:default; }
.lesson-button.danger { border-color:var(--destructive); background:transparent; color:var(--destructive); }
.lesson-button.danger:hover:not(:disabled) { background:var(--tone-coral); }

.lesson-mode { border-radius:8px; background:var(--muted); padding:8px 16px; font-size:14px; color:var(--foreground); transition:background-color .2s,color .2s; }
.lesson-mode.is-active { background:var(--secondary); color:var(--primary); }

.lesson-answer-input { width:100%; max-width:12rem; border:1px solid var(--border); border-radius:5px; background:var(--card); padding:4px 8px; font-size:14px; color:var(--foreground); outline:none; }
.lesson-answer-input:focus { border-color:var(--primary); }
.lesson-correction { margin-left:8px; font-size:14px; color:var(--destructive); }

.gap-input { width:10rem; border:0; border-bottom:2px solid var(--border); border-radius:0; background:var(--muted); padding:2px 8px; text-align:center; font-size:16px; color:var(--foreground); outline:none; }
.gap-input:focus { border-bottom-color:var(--primary); }

.lesson-answer-input.is-correct { border-color:var(--success); }
.lesson-answer-input.is-wrong { border-color:var(--destructive); }
.gap-input.is-correct { border-bottom-color:var(--success); }
.gap-input.is-wrong { border-bottom-color:var(--destructive); }

.choice-btn { width:100%; border:2px solid var(--border); border-radius:6px; background:var(--card); padding:12px 20px; text-align:left; white-space:normal; font-size:14px; color:var(--foreground); transition:border-color .2s,background-color .2s,opacity .2s; }
.choice-btn:hover:not(:disabled) { border-color:var(--primary); }
.choice-btn.is-correct { border-color:var(--success); background:var(--tone-green); }
.choice-btn.is-wrong { border-color:var(--destructive); background:var(--tone-coral); }
.choice-btn.is-faded { opacity:.6; }

.lesson-textarea { border:1px solid var(--border); border-radius:6px; background:var(--card); padding:12px; font-size:14px; color:var(--foreground); outline:none; resize:vertical; }
.lesson-textarea:focus { border-color:var(--primary); }
.lesson-chip { border-radius:9999px; background:var(--accent); padding:4px 12px; font-size:14px; color:var(--accent-foreground); }
.lesson-feedback { margin-top:16px; border-radius:6px; background:var(--muted); padding:16px; }

@media(max-width:640px) { .lesson-card { padding:18px; } .gap-input { width:7rem; } }

/* --------------------------------------------------------------------------
   Accents — the Italian accented letters as keys that type themselves into the
   field the learner is working in (templates/_accents.html.twig, portal.js
   `initAccents`).

   The same keys are rendered in two shapes: a toolbar sitting on top of a
   textarea, so the writing exercise reads as a small editor holding nothing but
   the accents, and a palette of keys at the top of an exercise built from
   single-word fields (verb tables, missing words, the daily verb quiz).

   `display:flex` outranks the `hidden` attribute the templates toggle, so the
   two shapes say `display:none` for themselves when they are hidden.
   -------------------------------------------------------------------------- */
.accent-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-foreground); }
.accent-key { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 6px; border:1px solid var(--border); border-radius:5px; background:var(--card); font-family:var(--font-display); font-size:16px; line-height:1; color:var(--foreground); transition:border-color .15s,background-color .15s,color .15s; }
.accent-key:hover { border-color:var(--primary); background:var(--accent); color:var(--accent-foreground); }
.accent-key:active { transform:translateY(1px); }
.accent-key:focus-visible { outline:2px solid var(--ring); outline-offset:1px; }

/* The writing exercise: a bar attached to the top of the textarea, so the two
   read as one editor. */
.accent-editor { display:block; }
.accent-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid var(--border); border-bottom:0; border-radius:6px 6px 0 0; background:var(--muted); padding:6px 10px; }
.accent-toolbar[hidden] { display:none; }
.accent-editor .lesson-textarea { border-radius:0 0 6px 6px; }

/* The single-word exercises: a row of keys above the fields. */
.accent-palette { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px; }
.accent-palette[hidden] { display:none; }

/* --------------------------------------------------------------------------
   Dashboard — jump navigation, the lessons row, the empty state.

   The dashboard is the page a learner lands on, so it is laid out as a map of
   the portal: a jump navigation under the hero, the create form, and then one
   box holding the two lessons side by side — the built-in starter lesson (see
   StarterLesson) and the learner's own lessons. That row is the same shape as
   the jump navigation above it, and the empty state fills the right-hand panel
   for an account that has not created anything yet.
   -------------------------------------------------------------------------- */
#starter, #create, #lessons { scroll-margin-top: 24px; }

.dash-nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:24px; }
.nav-card { display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--border); border-radius:6px; background:var(--card); transition:border-color .2s,transform .2s; }
.nav-card:hover { border-color:var(--primary); transform:translateY(-2px); }
.nav-card-icon { display:inline-flex; justify-content:center; align-items:center; width:30px; height:30px; margin-bottom:6px; border-radius:6px; background:var(--accent); color:var(--primary); font-size:12px; font-weight:600; }
.nav-card strong { font-family:var(--font-display); font-size:17px; font-weight:500; }
.nav-card>span:last-child { font-size:11px; color:var(--muted-foreground); }

.dash-section-head { display:flex; align-items:center; gap:12px; }

/* The lessons row: the starter lesson and the learner's own lessons side by
   side, the same shape as .dash-nav above. Both panels stretch to the height of
   the taller one, and .starter-actions / .dash-empty are pushed to the bottom so
   the two line up. */
.dash-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch; }
.dash-panels>.starter-panel, .dash-panels>.own-panel { display:flex; flex-direction:column; }

.starter-panel { border:1px solid var(--border); border-radius:8px; background:var(--card); box-shadow:var(--shadow-soft); overflow:hidden; }
.starter-panel-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:14px; padding:24px 26px 18px; }
.starter-badge { display:inline-flex; align-items:center; border-radius:9999px; background:var(--accent); padding:5px 12px; font-size:10px; font-weight:600; color:var(--primary); }
.starter-contents { display:flex; flex-wrap:wrap; gap:10px; padding:0 26px 20px; }
.starter-stat { display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--border); border-radius:9999px; padding:5px 12px; font-size:11px; color:var(--muted-foreground); }
.starter-stat strong { font-family:var(--font-display); font-size:15px; font-weight:500; color:var(--foreground); }
.starter-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:auto; padding:16px 26px 20px; border-top:1px solid var(--border); background:var(--muted); }

.own-panel { border:1px solid var(--border); border-radius:8px; background:var(--card); box-shadow:var(--shadow-soft); }
.own-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:20px 22px 14px; }
.own-badge { display:inline-flex; justify-content:center; align-items:center; min-width:26px; height:26px; border-radius:9999px; background:var(--accent); padding:0 8px; font-family:var(--font-display); font-size:14px; font-weight:500; color:var(--primary); }
.own-list { display:flex; flex-direction:column; gap:12px; padding:0 22px 20px; }

.hero-ghost { display:inline-flex; align-items:center; border:1px solid var(--primary-foreground); border-radius:6px; padding:8px 16px; font-size:14px; font-weight:500; color:var(--primary-foreground); transition:background-color .2s,color .2s; }
.hero-ghost:hover { background:var(--primary-foreground); color:var(--primary); }

.lesson-button.small { padding:9px 16px; font-size:13px; }
.lesson-button.ghost { border-color:var(--border); background:var(--card); color:var(--foreground); }
.lesson-button.ghost:hover { border-color:var(--primary); color:var(--primary); }

.dash-empty { border:1px dashed var(--border); border-radius:8px; background:var(--card); padding:22px; }
/* Inside the lessons row the empty state fills the right-hand panel, so the two
   panels of the row stay the same height. */
.own-panel .dash-empty { flex:1; margin:0 22px 20px; background:var(--muted); }
.own-list .lesson-tile { padding:18px; }

.idea-chip { border:1px solid var(--border); border-radius:9999px; background:var(--card); padding:7px 14px; font-size:13px; color:var(--foreground); transition:border-color .2s,color .2s; }
.idea-chip:hover { border-color:var(--primary); color:var(--primary); }

@media(max-width:1023px) { .dash-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .dash-panels { grid-template-columns:minmax(0,1fr); } }
@media(max-width:640px) { .dash-nav { grid-template-columns:minmax(0,1fr); } .starter-panel-head { padding:20px 18px 14px; } .starter-contents { padding:0 18px 16px; } .starter-actions { padding:14px 18px 18px; } .own-panel-head { padding:18px 18px 12px; } .own-list { padding:0 18px 18px; } .own-panel .dash-empty { margin:0 18px 18px; } }

/* --------------------------------------------------------------------------
   100 top verbs — the daily verb driller (see VerbDrillerController).

   Port of Mockups/italian_verb_driller.html, dressed in the tokens of the
   portal: the mockup's terracotta becomes --primary, its cream page becomes
   --background, and the same column is kept — badge, three stats, progress
   strip, the day's quiz, and the verb card with the six forms of the presente
   and one example sentence.

   The quiz markup is built by portal.js (initVerbDriller), so the class names
   here and the ones in that function are a pair: the .is-correct / .is-wrong
   states of the answer controls, the dots, the feedback box, the controls of the
   six kinds of exercise (multiple choice, typed answer, table, matching pairs,
   word order, flashcard), the results screen with the review, the skill
   breakdown, and the panel of a finished day.
   -------------------------------------------------------------------------- */
.driller-badge { display:inline-flex; align-items:center; border-radius:9999px; background:var(--primary); padding:5px 14px; font-size:11px; font-weight:600; color:var(--primary-foreground); }

.driller-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.driller-stat { display:flex; flex-direction:column; gap:2px; border:1px solid var(--border); border-radius:8px; background:var(--card); padding:14px; text-align:center; }
.driller-stat-num { font-family:var(--font-display); font-size:26px; font-weight:500; line-height:1.1; color:var(--primary); }
.driller-stat-lbl { font-size:10px; font-weight:600; color:var(--muted-foreground); }

.driller-progress { display:flex; align-items:center; gap:12px; margin-top:14px; border:1px solid var(--border); border-radius:8px; background:var(--card); padding:14px 18px; }
.driller-bar { flex:1; height:6px; border-radius:3px; background:var(--muted); overflow:hidden; }
.driller-bar-fill { height:100%; border-radius:3px; background:var(--primary); transition:width .4s; }
.driller-plabel { font-size:11px; color:var(--muted-foreground); white-space:nowrap; }

.driller-section { margin-top:28px; }
.driller-label { margin-bottom:10px; font-size:10px; font-weight:600; color:var(--muted-foreground); }

.driller-note { border:1px solid var(--border); border-radius:8px; background:var(--tone-green); padding:16px 20px; font-size:14px; }
.driller-done { display:inline-flex; align-items:center; gap:6px; border-radius:6px; background:var(--tone-green); padding:6px 12px; font-size:13px; font-weight:600; color:var(--primary); }

/* The verb of the day. */
.driller-verb-card { position:relative; border:1px solid var(--border); border-radius:8px; background:var(--card); box-shadow:var(--shadow-soft); padding:26px; overflow:hidden; }
.driller-verb-card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--primary); }
.driller-verb-num { position:absolute; top:18px; right:22px; font-family:var(--font-display); font-size:48px; line-height:1; color:var(--accent); }
.driller-verb-main { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.driller-verb-inf { font-family:var(--font-display); font-style:italic; font-size:38px; line-height:1; color:var(--primary); }
.driller-verb-en { font-size:15px; color:var(--muted-foreground); }
.driller-cg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:22px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.driller-cghd { grid-column:1/-1; border-bottom:1px solid var(--border); background:var(--muted); padding:8px 16px; font-size:10px; font-weight:600; color:var(--muted-foreground); }
.driller-cgc { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border); padding:10px 16px; font-size:14px; }
.driller-cgc:nth-child(even) { border-left:1px solid var(--border); }
.driller-cgc:nth-last-child(-n+2) { border-bottom:0; }
.driller-cpro { font-size:12px; color:var(--muted-foreground); }
.driller-cform { font-family:var(--font-display); color:var(--foreground); }
.driller-ex { margin-top:18px; border-radius:8px; background:var(--muted); padding:14px 18px; }
.driller-exit { font-family:var(--font-display); font-style:italic; font-size:16px; }
.driller-exen { margin-top:2px; font-size:13px; color:var(--muted-foreground); }

/* The quiz: the card, the dots, the controls and the feedback. */
.driller-quiz-card { border:1px solid var(--border); border-radius:8px; background:var(--card); box-shadow:var(--shadow-soft); padding:26px; }
.driller-qprog { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.driller-dots { display:flex; flex:1; gap:6px; }
.driller-qdot { flex:1; height:5px; border-radius:9999px; background:var(--muted); transition:background-color .2s; }
.driller-qdot.is-active { background:var(--primary); }
.driller-qdot.is-correct { background:var(--success); }
.driller-qdot.is-wrong { background:var(--destructive); }
.driller-qplab { font-size:11px; color:var(--muted-foreground); white-space:nowrap; }
.driller-qvtag { display:inline-flex; border-radius:6px; background:var(--accent); padding:4px 10px; font-size:11px; font-weight:600; color:var(--accent-foreground); }
.driller-qq { margin:14px 0 18px; font-family:var(--font-display); font-size:19px; }
.driller-qq em { font-style:italic; color:var(--muted-foreground); }

.driller-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.driller-option { width:100%; border:2px solid var(--border); border-radius:6px; background:var(--card); padding:14px 18px; text-align:left; font-family:var(--font-display); font-size:16px; color:var(--foreground); transition:border-color .2s,background-color .2s; }
.driller-option:hover:not(:disabled) { border-color:var(--primary); }
.driller-option.is-correct { border-color:var(--success); background:var(--tone-green); color:var(--primary); }
.driller-option.is-wrong { border-color:var(--destructive); background:var(--tone-coral); color:var(--destructive); }
.driller-option:disabled { cursor:default; }

.driller-answer-row { display:flex; gap:10px; align-items:center; }
.driller-input { flex:1; min-width:0; border:2px solid var(--border); border-radius:6px; background:var(--card); padding:12px 16px; font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--foreground); outline:none; transition:border-color .15s; }
.driller-input:focus { border-color:var(--primary); }
.driller-input.is-correct { border-color:var(--success); background:var(--tone-green); color:var(--primary); }
.driller-input.is-wrong { border-color:var(--destructive); background:var(--tone-coral); color:var(--destructive); }
.driller-input:disabled { cursor:default; }

.driller-check { border:0; border-radius:6px; background:var(--primary); padding:12px 20px; font-size:12px; font-weight:600; color:var(--primary-foreground); white-space:nowrap; }
.driller-check:hover { background:var(--accent-foreground); }

.driller-fields { display:flex; flex-direction:column; gap:8px; }
.driller-field { display:flex; align-items:center; gap:10px; }
.driller-field-pronoun { min-width:56px; font-size:13px; color:var(--muted-foreground); }
.driller-field .driller-input { padding:8px 12px; font-size:15px; }

.driller-gap-sentence { margin-bottom:6px; font-family:var(--font-display); font-style:italic; font-size:17px; line-height:2.2; }
.driller-gap-input { display:inline-block; width:120px; vertical-align:baseline; }
.driller-gap-translation { margin-bottom:16px; font-size:13px; color:var(--muted-foreground); }

.driller-feedback { display:flex; align-items:flex-start; gap:8px; margin-top:16px; border-radius:6px; padding:14px 18px; font-size:14px; }
.driller-feedback.is-correct { background:var(--tone-green); color:var(--primary); }
.driller-feedback.is-wrong { background:var(--tone-coral); color:var(--destructive); }
.driller-feedback-detail { margin-top:6px; font-size:13px; }
.driller-next { display:block; width:100%; margin-top:18px; border:0; border-radius:6px; background:var(--primary); padding:14px; font-size:13px; font-weight:600; color:var(--primary-foreground); }
.driller-next:hover { background:var(--accent-foreground); }

/* The results screen, once the last question is answered. */
.driller-results { text-align:center; padding:16px 0 4px; }
.driller-score { font-family:var(--font-display); font-size:52px; font-weight:500; line-height:1; color:var(--primary); }
.driller-score-sub { margin-top:6px; font-size:14px; color:var(--muted-foreground); }
.driller-review { margin-top:20px; border-top:1px solid var(--border); }
.driller-review-row { display:flex; align-items:flex-start; gap:12px; border-bottom:1px solid var(--border); padding:14px 0; font-size:14px; text-align:left; }
.driller-review-mark { flex-shrink:0; font-size:16px; }
.driller-review-mark.is-correct { color:var(--success); }
.driller-review-mark.is-wrong { color:var(--destructive); }
.driller-review-answer { margin-top:2px; font-size:13px; color:var(--muted-foreground); }

/* The tags of the exercise in progress: the verb it is about, and its type. */
.driller-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.driller-qvtag.is-alt { background:var(--tone-coral); color:var(--destructive); }

/* The sentence a question is about, and the line under it. */
.driller-sentence { margin:0 0 12px; font-family:var(--font-display); font-style:italic; font-size:17px; line-height:2.2; }
.driller-hint { margin:0 0 16px; font-size:13px; color:var(--muted-foreground); }

/* The wide variant of the answers: whole sentences rather than single words. */
.driller-options.is-wide { grid-template-columns:minmax(0,1fr); }
.driller-options.is-wide .driller-option { font-family:var(--font-sans); font-style:normal; font-size:14px; }

/* The word missing from a sentence, typed in place. */
.driller-input.is-inline { display:inline-block; flex:none; width:130px; vertical-align:baseline; margin:0 6px; padding:6px 10px; font-size:15px; }

/* A secondary button (Reset, Bonus round, "Not yet"). */
.driller-check.is-secondary { border:2px solid var(--border); background:var(--card); color:var(--primary); }
.driller-check.is-secondary:hover { border-color:var(--primary); background:var(--card); }

/* The forms a table question has filled in. */
.driller-field-given { flex:1; border:2px solid transparent; border-radius:6px; background:var(--muted); padding:8px 12px; font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--muted-foreground); }

/* Matching pairs. */
.driller-match { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.driller-match-col { display:flex; flex-direction:column; gap:8px; }
.driller-match-item { border:2px solid var(--border); border-radius:6px; background:var(--card); padding:10px 12px; font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--foreground); text-align:center; }
.driller-match-item.is-selected { border-color:var(--primary); background:var(--accent); color:var(--primary); }
.driller-match-item.is-done { border-color:var(--success); background:var(--tone-green); color:var(--primary); cursor:default; }
.driller-match-item.is-bad { border-color:var(--destructive); background:var(--tone-coral); }

/* The sentence being rebuilt, and the bank of words it is built from. */
.driller-built { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:54px; margin-bottom:12px; border:2px dashed var(--border); border-radius:6px; background:var(--card); padding:10px; }
.driller-built.is-correct { border-color:var(--success); background:var(--tone-green); }
.driller-built.is-wrong { border-color:var(--destructive); background:var(--tone-coral); }
.driller-built-placeholder { font-size:13px; color:var(--muted-foreground); }
.driller-bank { display:flex; flex-wrap:wrap; gap:8px; min-height:44px; margin-bottom:16px; }
.driller-chip { border:2px solid var(--border); border-radius:6px; background:var(--card); padding:8px 14px; font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--foreground); }
.driller-chip:hover:not(.is-ghost):not(:disabled) { border-color:var(--primary); color:var(--primary); }
.driller-chip.is-ghost { border-style:dashed; background:var(--muted); color:transparent; cursor:default; user-select:none; }
.driller-chip:disabled { cursor:default; }

/* A row of buttons under a question or a results screen. */
.driller-actions { display:flex; gap:10px; margin-top:18px; }
.driller-actions > * { flex:1; margin-top:0; }

/* The flashcard: the answer, once it is asked for. */
.driller-flash { text-align:center; }
.driller-reveal { margin-top:18px; border-radius:6px; background:var(--muted); padding:16px; }
.driller-reveal-answer { margin-bottom:14px; font-family:var(--font-display); font-style:italic; font-size:24px; color:var(--primary); }
.driller-reveal .driller-actions { margin-top:0; }

/* The extra line of a question ("può belongs to potere"). */
.driller-feedback-note { margin-top:6px; font-size:13px; }

/* The review of the results. */
.driller-review-label { font-size:11px; font-weight:600; color:var(--muted-foreground); }

/* The panel of a finished day, and the mix it was made of. */
.driller-done-panel { text-align:left; }
.driller-done-line { margin-top:12px; font-size:14px; color:var(--muted-foreground); }
.driller-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* The skill breakdown: one bar per exercise type, right answers out of asked. */
.driller-skills-label { margin:22px 0 10px; }
.driller-skills { display:flex; flex-direction:column; gap:8px; }
.driller-skill { display:flex; align-items:center; gap:10px; font-size:13px; }
.driller-skill-name { width:150px; flex-shrink:0; color:var(--muted-foreground); }
.driller-skill-bar { flex:1; height:6px; border-radius:3px; background:var(--muted); overflow:hidden; }
.driller-skill-bar i { display:block; height:100%; border-radius:3px; background:var(--primary); }
.driller-skill-value { width:64px; flex-shrink:0; text-align:right; color:var(--muted-foreground); }
.driller-skill-count { opacity:0.6; }

/* The button that starts a bonus round, wherever it is offered. */
.driller-bonus { cursor:pointer; }
.driller-bonus:disabled { opacity:0.6; cursor:default; }

@media(max-width:640px) {
  .driller-stats { gap:8px; }
  .driller-stat { padding:12px 8px; }
  .driller-stat-num { font-size:22px; }
  .driller-quiz-card, .driller-verb-card { padding:20px; }
  .driller-options { grid-template-columns:minmax(0,1fr); }
  .driller-verb-inf { font-size:30px; }
  .driller-verb-num { font-size:36px; }
  .driller-score { font-size:42px; }
  .driller-skill-name { width:110px; }
}




/* --------------------------------------------------------------------------
   The extra activities of a lesson: the roleplay conversation, the story, the
   translation exercises and the word order game.
   -------------------------------------------------------------------------- */

/* The roleplay conversation: a log of turns, the AI on the left, the learner on
   the right, the English translation under the Italian line and the correction
   under the turn it belongs to. */
.chat-log { display:flex; flex-direction:column; gap:12px; max-height:440px; overflow-y:auto; padding:2px; }
.chat-turn { display:flex; }
.chat-turn[data-role='learner'] { justify-content:flex-end; }
.chat-bubble { max-width:min(100%,44rem); border:1px solid var(--border); border-radius:12px; background:var(--card); padding:10px 14px; font-size:14px; line-height:1.6; }
.chat-bubble.ai { background:var(--muted); border-top-left-radius:4px; }
.chat-bubble.learner { background:var(--accent); border-color:var(--accent); border-top-right-radius:4px; }
.chat-translation { margin-top:4px; font-size:12px; font-style:italic; color:var(--muted-foreground); }
.chat-correction { margin-top:6px; font-size:12px; color:var(--destructive); }

/* A goal of a roleplay scene the model reports as met. */
.lesson-chip.is-met { background:var(--tone-green); color:var(--primary); }

/* The story: the prose is the point, so it is set in the display face and a
   little larger than the interface around it. */
.story-text { font-size:17px; line-height:1.9; }
.story-text p + p { margin-top:14px; }

/* The translation exercise: the sentence to translate reads as the task itself. */
.translation-source { font-family:var(--font-display); font-size:22px; line-height:1.5; }

/* Word order: the sentence being built, then the chunks still to place. */
.wo-answer { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:54px; border:1px dashed var(--border); border-radius:6px; background:var(--muted); padding:10px 12px; }
.wo-source { display:flex; flex-wrap:wrap; gap:8px; }
.wo-chunk { border:1px solid var(--border); border-radius:5px; background:var(--card); padding:7px 12px; font-size:15px; color:var(--foreground); transition:border-color .15s,background-color .15s; }
.wo-chunk:hover { border-color:var(--primary); background:var(--accent); }

/* A lesson tile whose activity is still being generated (the page asks the AI
   for it one call at a time — see initLessonParts). The shimmer says "working",
   the dashed border says "not a link yet". */
.lesson-card-pending { border-style:dashed; background:var(--muted); }
.lesson-card-pending [data-part-count]::after { content:''; display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:50%; background:var(--primary); animation:pending-pulse 1.2s ease-in-out infinite; }
@keyframes pending-pulse { 0%, 100% { opacity:.25; } 50% { opacity:1; } }

/* The practice studio says the same about a tile whose activity is still being
   generated, so a click does not land on an empty display. */
.practice-tile-pending { border:1px dashed var(--border); }

/* The progress section of the dashboard (see ProgressService): the review scores as a
   chart and the mistake history as bars. Both are pure CSS — the chart is a row of
   fixed-height columns, the bars are width-proportional — so the section is readable
   without javascript, and both are sized by the view model rather than by a script. */
.progress-panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:18px; }
.progress-panel { border:1px solid var(--border); border-radius:8px; background:var(--card); padding:20px; }
.progress-note { margin-top:12px; font-size:13px; line-height:1.6; color:var(--muted-foreground); }
.progress-note a { color:var(--primary); }
.progress-headline { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-top:14px; font-size:13px; color:var(--muted-foreground); }
.progress-headline strong { font-family:var(--font-display); font-size:34px; font-weight:500; line-height:1; color:var(--foreground); }
.progress-trend { padding:3px 9px; border:1px solid var(--border); border-radius:999px; font-size:11px; }
.progress-trend.is-improving { border-color:var(--primary); color:var(--primary); }
.progress-trend.is-slipping { border-color:var(--destructive); color:var(--destructive); }
/* The chart: one column per attempt, oldest on the left, its height the score. */
.progress-chart { display:flex; align-items:flex-end; gap:6px; height:120px; margin-top:16px; padding-bottom:2px; border-bottom:1px solid var(--border); }
.progress-chart-bar { flex:1; min-width:8px; max-width:52px; display:flex; align-items:flex-end; height:100%; }
.progress-chart-bar i { display:block; width:100%; min-height:3px; border-radius:3px 3px 0 0; background:var(--primary); }
.progress-chart-bar.is-ok i { opacity:.65; }
.progress-chart-bar.is-low i { background:var(--destructive); opacity:.8; }
/* A plain bar for "how far through": the verb programme. */
.progress-meter { margin-top:22px; }
.progress-meter-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:13px; }
.progress-meter-head span:last-child { color:var(--muted-foreground); }
.progress-meter-track { height:8px; margin-top:8px; border-radius:4px; background:var(--muted); overflow:hidden; }
.progress-meter-track i { display:block; height:100%; border-radius:4px; background:var(--primary); }
/* Where to improve: the mistake history per skill, worst first, the bar relative to it. */
.progress-skills { margin-top:14px; }
.progress-skill { display:grid; grid-template-columns:minmax(0,1fr) 96px 24px; align-items:center; gap:10px; padding:7px 0; font-size:13px; }
.progress-skill-track { height:8px; border-radius:4px; background:var(--muted); overflow:hidden; }
.progress-skill-track i { display:block; height:100%; border-radius:4px; background:var(--primary); }
.progress-skill.is-worst .progress-skill-label { font-weight:600; }
.progress-skill.is-worst .progress-skill-track i { background:var(--destructive); }
.progress-skill-count { text-align:right; color:var(--muted-foreground); font-variant-numeric:tabular-nums; }

/* The CEFR level test — a port of the design of Mockups/cefr-level-test.html: the ladder of the six
   bands, the exercise sheet of the test (five formats, one question at a time) and the result sheet.
   Same layout, spacing and typography as the mockup; the colours come from the portal's theme
   (--primary for the mockup's blue pen, --destructive for its red one, and --cefr-pass for the green
   of a passed level, which the portal has no equivalent of). */
:root { --cefr-pass: #17734a; --cefr-pass-soft: #e3f3ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cefr-pass: #6fd4a0; --cefr-pass-soft: #173527; } }
:root[data-theme="dark"] { --cefr-pass: #6fd4a0; --cefr-pass-soft: #173527; }

.cefr-label { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-foreground); }
.cefr-note { font-size:.88rem; color:var(--muted-foreground); max-width:65ch; }
.cefr-muted { color:var(--muted-foreground); }

/* The ladder: six rungs, always on screen, saying what became of each band. */
.cefr-ladder { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.cefr-rung { border:1px solid var(--border); background:var(--card); border-radius:6px; padding:8px 4px 7px; text-align:center; }
.cefr-rung b { display:block; font-family:var(--font-display); font-size:1.25rem; font-weight:500; line-height:1.1; }
.cefr-rung span { display:block; font-size:.64rem; letter-spacing:.06em; color:var(--muted-foreground); }
.cefr-rung em { display:block; margin-top:4px; font-size:.6rem; font-style:normal; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-foreground); }
.cefr-rung.is-current { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.cefr-rung.is-current b { color:var(--primary); }
.cefr-rung.is-passed { background:var(--cefr-pass-soft); border-color:transparent; }
.cefr-rung.is-passed b { color:var(--cefr-pass); }
.cefr-rung.is-failed { background:color-mix(in oklab, var(--destructive) 14%, var(--card)); border-color:transparent; }
.cefr-rung.is-failed b { color:var(--destructive); text-decoration:line-through; text-decoration-thickness:2px; }

/* The sheet: the intro, one question, or the result — the mockup's card. */
.cefr-sheet { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:26px clamp(18px,4vw,34px); display:flex; flex-direction:column; gap:18px; }
.cefr-sheet h1, .cefr-sheet .cefr-title { font-family:var(--font-display); font-weight:600; line-height:1.12; font-size:clamp(2rem,6vw,2.8rem); }
.cefr-sheet h2 { font-family:var(--font-display); font-weight:600; line-height:1.12; font-size:1.5rem; }
.cefr-sheet p { max-width:65ch; }
.cefr-plain { padding-left:1.1em; display:flex; flex-direction:column; gap:6px; max-width:65ch; list-style:disc; }
.cefr-toggle { display:flex; gap:10px; align-items:flex-start; cursor:pointer; max-width:65ch; font-size:.95rem; }
.cefr-toggle input { margin-top:5px; accent-color:var(--primary); }

/* One question: the head, the instruction and the progress of the level. */
.cefr-qhead { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.cefr-chip { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--accent); color:var(--accent-foreground); }
.cefr-progress { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.cefr-progress i { display:block; height:100%; background:var(--primary); transition:width .3s; }
.cefr-instr { font-weight:600; color:var(--muted-foreground); font-size:.95rem; }
.cefr-prompt { font-size:1.32rem; line-height:1.5; }
.cefr-blank { display:inline-block; min-width:3.2em; border-bottom:2px solid var(--primary); color:var(--primary); text-align:center; line-height:1.2; }
.cefr-hint { color:var(--muted-foreground); font-style:italic; }
.cefr-passage { background:var(--muted); border:1px solid var(--border); border-radius:8px; padding:14px 16px; font-size:1.05rem; line-height:1.65; }

/* Multiple choice: one button per option, with its letter. */
.cefr-options { display:grid; gap:10px; }
.cefr-opt { text-align:left; font:inherit; font-size:1.05rem; color:var(--foreground); background:var(--card); border:1.5px solid var(--border); border-radius:8px; padding:11px 14px; cursor:pointer; display:flex; gap:12px; align-items:baseline; }
.cefr-opt:hover { border-color:var(--primary); }
.cefr-opt .k { font-size:.8rem; color:var(--muted-foreground); }
.cefr-opt.is-selected { border-color:var(--primary); background:var(--accent); }
.cefr-opt.is-right { border-color:var(--cefr-pass); background:var(--cefr-pass-soft); }
.cefr-opt.is-wrong { border-color:var(--destructive); background:color-mix(in oklab, var(--destructive) 12%, var(--card)); }

/* Gap fill: the big blue input of the mockup, with the portal's accent palette under it. */
.cefr-txt { font:inherit; font-size:1.2rem; color:var(--primary); background:var(--card); border:1.5px solid var(--border); border-radius:8px; padding:10px 12px; width:100%; }
.cefr-txt:focus { outline:none; border-color:var(--primary); }
.cefr-txt.is-right { border-color:var(--cefr-pass); }
.cefr-txt.is-wrong { border-color:var(--destructive); }

/* Sentence building: the drop area, then the tiles still to place. */
.cefr-tiles { display:flex; flex-wrap:wrap; gap:8px; min-height:48px; }
.cefr-built { border:1.5px dashed var(--border); border-radius:8px; padding:8px; }
.cefr-built.is-right { border-color:var(--cefr-pass); border-style:solid; }
.cefr-built.is-wrong { border-color:var(--destructive); border-style:solid; }
.cefr-tile { font:inherit; font-size:1.05rem; padding:6px 12px; border-radius:6px; border:1px solid var(--border); background:var(--muted); color:var(--foreground); cursor:pointer; }
.cefr-built .cefr-tile { background:var(--accent); color:var(--accent-foreground); border-color:transparent; }

/* Error spotting: the sentence, word by word. */
.cefr-words { display:flex; flex-wrap:wrap; gap:6px 4px; font-size:1.3rem; }
.cefr-word { font:inherit; background:none; border:none; border-bottom:2px solid transparent; padding:2px 4px; color:var(--foreground); cursor:pointer; border-radius:3px; }
.cefr-word:hover { background:var(--accent); }
.cefr-word.is-selected { border-bottom-color:var(--destructive); color:var(--destructive); background:color-mix(in oklab, var(--destructive) 12%, var(--card)); }
.cefr-word.is-right { border-bottom-color:var(--cefr-pass); color:var(--cefr-pass); background:var(--cefr-pass-soft); }
.cefr-word.is-wrong { border-bottom-color:var(--destructive); color:var(--destructive); background:color-mix(in oklab, var(--destructive) 12%, var(--card)); }

/* The feedback block: right, wrong, and why. */
.cefr-feedback { border-radius:8px; padding:12px 14px; font-size:.98rem; }
.cefr-feedback.is-ok { background:var(--cefr-pass-soft); color:var(--cefr-pass); }
.cefr-feedback.is-no { background:color-mix(in oklab, var(--destructive) 12%, var(--card)); color:var(--destructive); }
.cefr-feedback .x { color:var(--foreground); display:block; margin-top:4px; }

.cefr-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cefr-btn { font:600 1rem var(--font-sans); padding:11px 20px; border-radius:8px; border:1.5px solid var(--primary); background:var(--primary); color:var(--primary-foreground); cursor:pointer; }
.cefr-btn:disabled { opacity:.4; cursor:not-allowed; }
.cefr-btn.is-ghost { background:transparent; color:var(--primary); }
.cefr-btn.is-link { border:none; background:none; color:var(--muted-foreground); padding:11px 6px; text-decoration:underline; }

/* The result sheet. */
.cefr-big { font-family:var(--font-display); font-weight:700; font-size:clamp(4.5rem,18vw,7.5rem); line-height:.9; color:var(--primary); }
.cefr-result-head { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.cefr-result-head > div { min-width:0; flex:1 1 240px; display:flex; flex-direction:column; gap:6px; }
.cefr-bars { display:grid; gap:10px; }
.cefr-bar { display:grid; grid-template-columns:7.5em 1fr 3.2em; gap:10px; align-items:center; font-size:.95rem; }
.cefr-bar .track { height:10px; border-radius:5px; background:var(--border); overflow:hidden; }
.cefr-bar .track i { display:block; height:100%; background:var(--primary); }
.cefr-bar .n { font-size:.8rem; text-align:right; font-variant-numeric:tabular-nums; color:var(--muted-foreground); }
.cefr-table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
.cefr-table td, .cefr-table th { padding:7px 8px; border-bottom:1px solid var(--border); text-align:left; font-size:.95rem; }
.cefr-table th { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-foreground); font-weight:500; }
.cefr-ok-t { color:var(--cefr-pass); font-weight:600; }
.cefr-no-t { color:var(--destructive); font-weight:600; }
.cefr-review { display:flex; flex-direction:column; gap:14px; }
.cefr-rv { border-top:1px solid var(--border); padding-top:12px; display:flex; flex-direction:column; gap:4px; }
.cefr-rv .q { font-size:1.02rem; }
.cefr-rv del { color:var(--destructive); text-decoration-thickness:2px; }
.cefr-rv .c { color:var(--primary); font-weight:600; }
.cefr-rv .x { color:var(--muted-foreground); font-size:.93rem; }

@media(max-width:640px) {
  .chat-log { max-height:340px; }
  .translation-source { font-size:19px; }
  .story-text { font-size:16px; line-height:1.8; }
  .progress-panel { padding:16px; }
  .progress-chart { height:96px; }
  .progress-skill { grid-template-columns:minmax(0,1fr) 64px 22px; }
  .cefr-rung b { font-size:1.05rem; }
  .cefr-rung span { display:none; }
  .cefr-prompt { font-size:1.18rem; }
  .cefr-bar { grid-template-columns:6.2em 1fr 3em; }
}


/* --------------------------------------------------------------------------
   The public homepage — port of the landing route of the italian-lesson-studio
   design (templates/landing.html.twig, the site root document of the portal's
   domain).

   The page has no member chrome: no sidebar, no header, no lesson navigation.
   It is the one page an anonymous visitor sees, so it is laid out as a landing
   page (nav, hero, sections, closing call to action) and its colours are the
   same design tokens as the member area.

   The `is-*` classes are the button variants (`.landing-button`), the same
   convention as `.lesson-mode.is-active` below: the state is a class on the
   element, not a second element.
   -------------------------------------------------------------------------- */
.landing { min-height:100vh; background:var(--background); color:var(--foreground); }
.landing-nav { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; max-width:1200px; margin:0 auto; padding:24px; }
.landing-brand { display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:24px; font-weight:600; }
.landing-brand img { width:36px; height:36px; border-radius:6px; }
.landing-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; max-width:1200px; margin:0 auto; padding:48px 24px 80px; }
.landing-kicker { display:inline-flex; gap:8px; align-items:center; padding:6px 12px; border-radius:999px; background:var(--accent); color:var(--primary); font-size:13px; font-weight:500; }
.landing-title { margin-top:20px; font-size:clamp(44px,6.5vw,80px); line-height:1.02; font-weight:500; }
.landing-title em, .landing-cta-title em { color:var(--primary); font-style:italic; }
.landing-lead { margin-top:24px; max-width:32rem; font-size:18px; line-height:1.7; color:var(--muted-foreground); }
.landing-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.landing-points { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:32px; font-size:14px; color:var(--muted-foreground); }
.landing-points li { display:flex; align-items:center; gap:8px; }
.landing-points li::before { content:'✓'; color:var(--primary); font-weight:700; }
.landing-photo { position:relative; }
/* The frame is a 4:5 crop of whatever photo the hero shows, and the bundle's own
   photograph (img/st-pietro-2.jpg) has its subject - the dome - left of centre, so the
   crop is anchored left of centre: a plain centre crop cuts the dome in half. */
.landing-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:25% 50%; border-radius:28px 28px 28px 4px; }
.landing-bubble { position:absolute; left:-28px; bottom:32px; max-width:300px; padding:16px 20px; border-radius:20px 20px 20px 4px; background:var(--card); box-shadow:var(--shadow-soft); }
.landing-bubble-label { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-foreground); }
.landing-bubble-quote { display:block; margin-top:4px; font-family:var(--font-display); font-size:20px; }
.landing-section { max-width:1200px; margin:0 auto; padding:72px 24px; border-top:1px solid var(--border); }
.landing-heading { font-size:clamp(28px,3.4vw,36px); font-weight:500; }
.landing-section-lead { margin-top:12px; max-width:36rem; color:var(--muted-foreground); }
.landing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:40px; }
.landing-card { padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--card); }
.landing-card-icon { display:inline-flex; align-items:center; justify-content:center; min-width:24px; font-family:var(--font-display); font-size:24px; line-height:1; color:var(--primary); }
.landing-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.landing-step-num { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; background:var(--primary); color:var(--primary-foreground); font-family:var(--font-display); font-size:20px; }
.landing-cta { max-width:1152px; margin:0 auto 48px; padding:72px 32px; border-radius:28px; text-align:center; background:var(--primary); color:var(--primary-foreground); }
.landing-cta-title { font-size:clamp(30px,5vw,48px); font-weight:500; }
.landing-cta-title em { color:var(--primary-foreground); opacity:.8; }
.landing-cta-lead { margin-top:12px; opacity:.8; }
.landing-cta .landing-button { margin-top:32px; }
.landing-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px; max-width:1200px; margin:0 auto; padding:24px; font-size:13px; color:var(--muted-foreground); }

/* The buttons of the homepage. `is-ghost` is the quiet one of the navigation,
   `is-outline` the second hero button, `is-secondary` the light button on the
   terracotta closing panel — each of them the design's own variant. */
.landing-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:6px; border:1px solid transparent; background:var(--primary); padding:10px 18px; font-size:14px; font-weight:500; color:var(--primary-foreground); transition:opacity .2s,border-color .2s; }
.landing-button:hover { opacity:.9; }
.landing-button.is-large { padding:12px 24px; }
.landing-button.is-ghost { background:transparent; color:var(--foreground); }
.landing-button.is-ghost:hover { background:var(--muted); opacity:1; }
.landing-button.is-outline { border-color:var(--border); background:var(--card); color:var(--foreground); }
.landing-button.is-outline:hover { border-color:var(--primary); opacity:1; }
.landing-button.is-secondary { background:var(--secondary); color:var(--secondary-foreground); }

@media(max-width:900px) {
  .landing-hero { grid-template-columns:minmax(0,1fr); gap:40px; padding-top:24px; }
  .landing-bubble { left:16px; }
  .landing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .landing-steps { grid-template-columns:minmax(0,1fr); }
  .landing-cta { margin:0 16px 32px; }
}
@media(max-width:560px) {
  .landing-grid { grid-template-columns:minmax(0,1fr); }
  .landing-footer { flex-direction:column; }
}