/* ==========================================================================
   Geronimo — portal.css: cursistenportaal (login, dashboard, leren, quiz, proefexamen,
   leerdossier, gereedheid) en de tutor-widget. Stijl 360learning (22-9-2026).
   ========================================================================== */

/* ---------- Portaal-basis ---------- */
.portal-page main { background: var(--paper); }
.portal { padding-block: clamp(32px, 5vw, 64px) var(--section-y); }
.portal__wrap { max-width: var(--max); }
.portal__split { display: grid; gap: 2rem; max-width: 34rem; margin-inline: auto; background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 48px); }
.portal__head { display: grid; gap: .5rem; }
.portal__label { margin: 0; }
.portal__body { display: grid; gap: 1.25rem; }
.portal-card { display: grid; gap: 1rem; background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: clamp(20px, 2.5vw, 32px); }
.portal-card > .btn { justify-self: start; }
.portal-card > .eyebrow { margin: 0; }
.portal-card--ink { background: var(--ink); color: var(--white); }
.portal-card--accent { background: var(--accent); color: var(--white); }
.portal-notice { background: var(--paper-2); border-radius: var(--radius-l); padding: 1.25rem 1.5rem; display: grid; gap: .5rem; }
.portal-notice__title { font-weight: 700; font-size: 1.125rem; margin: 0; }
.portal-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.portal-link:hover { text-decoration: underline; }

/* ---------- Leren ---------- */
.learn { display: grid; gap: clamp(24px, 3vw, 40px); max-width: 64rem; margin-inline: auto; }
/* Leesmaat: tekstpagina's smaller dan het dashboard (ca. 75 tekens per regel). */
.learn-topic, .learn-quiz, .learn-result, .ready { max-width: 46rem; }
.learn .lead { font-size: 1.125rem; }
.learn__head { display: grid; gap: 1rem; }
.learn__head .eyebrow { margin: 0; }
.learn__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.learn-bar { position: relative; height: 10px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.learn-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--gradient); border-radius: 999px; width: 0; transition: width .6s var(--ease-out); }
.learn-bar__label { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.learn-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .learn-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.learn-next { display: grid; gap: .6rem; justify-items: start; }
.learn-next .eyebrow { color: #9DD5C9; margin: 0; }
.learn-next__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0; }
.learn-next__meta { margin: 0 0 .75rem; color: rgba(255,255,255,.75); }
.learn-h { background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: clamp(18px, 2.5vw, 28px); margin-bottom: 1rem; }
.learn-h__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 1rem; }
.learn-h__code { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--paper-2); color: var(--accent); font-size: .875rem; margin-right: .5rem; }
.learn-o { margin: 0 0 1rem; }
.learn-o__title { font-size: .8125rem; font-weight: 700; color: var(--ink-3); margin: 0 0 .35rem; }
.learn-list { list-style: none; margin: 0; padding: 0; }
.learn-list__item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.learn-list__item:last-child { border-bottom: 0; }
.learn-list__link { color: var(--ink); text-decoration: none; font-weight: 500; }
.learn-list__link:hover { color: var(--accent); }
.learn-list__link--soon { color: var(--ink-3); }
.state { flex: none; font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--paper-2); color: var(--ink-3); white-space: nowrap; }
.state--introduced { background: #FFF1DB; color: #9A5B00; }
.state--practiced { background: #E7EFFE; color: var(--accent); }
.state--mastered { background: #E3F7EE; color: #17754B; }
.learn-tts { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .5rem; color: var(--ink-2); font-size: .9375rem; }
.learn-tts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem .6rem; align-items: start; }
.learn-tts .state { margin-top: .1rem; justify-self: start; }
.learn-tts__code { font-weight: 700; color: var(--ink); }
.learn-block { display: grid; gap: 1rem; background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: clamp(20px, 2.5vw, 32px); }
.learn-block p { margin: 0; font-size: 1.0625rem; line-height: 1.7; }
.learn-block__title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; margin: 0 0 .25rem; }
.learn-dl { display: grid; gap: .9rem; margin: 0; }
.learn-dl dt { font-weight: 700; }
.learn-dl dd { margin: .1rem 0 0; color: var(--ink-2); }
.learn-rules { margin: 0; padding-left: 1.25rem; display: grid; gap: .6rem; line-height: 1.6; }
.learn-example { padding: .9rem 1rem; border-left: 3px solid var(--accent); background: var(--paper-2); border-radius: 0 10px 10px 0; color: var(--ink-2); }
.learn-myths { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.learn-myths li { padding: .9rem 1rem; border-radius: 10px; background: #FFF6F6; }
.learn-scenario { border-top: 1px solid var(--line); padding: 1rem 0; }
.learn-scenario summary { list-style: none; cursor: pointer; display: grid; gap: .3rem; }
.learn-scenario summary::-webkit-details-marker { display: none; }
.learn-scenario__sit { font-weight: 700; }
.learn-scenario__q { color: var(--ink-2); }
.learn-scenario__hint { font-size: .8125rem; font-weight: 700; color: var(--accent); }
.learn-scenario[open] .learn-scenario__hint { display: none; }
.learn-scenario__a { margin: .75rem 0 0; padding: .9rem 1rem; background: var(--paper-2); border-radius: 12px; }
.learn-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.learn-cta > p { flex-basis: 100%; margin: 0; }
.learn-nav { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.learn-form { display: grid; gap: 1.5rem; }
.quiz-q { border: 0; margin: 0; min-width: 0; padding: clamp(18px, 2.5vw, 28px); background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow); display: grid; gap: 1rem; }
/* float: een <legend> die float is, is geen 'rendered legend' meer en staat gewoon in de kaart. */
.quiz-q__stem { float: left; width: 100%; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; margin: 0; padding: 0; }
.quiz-q__num { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; border-radius: 8px; background: var(--paper-2); color: var(--accent); font-weight: 700; font-size: .875rem; margin-right: .35rem; }
.quiz-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.quiz-option { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.quiz-option:hover { border-color: var(--accent); background: #F7FAFF; }
.quiz-option input { margin-top: .25rem; accent-color: var(--accent); }
.quiz-option__letter { font-weight: 700; min-width: 1.2rem; color: var(--ink-3); }
.quiz-option.is-correct { border-color: var(--green); background: #E3F7EE; }
.quiz-option.is-chosen:not(.is-correct) { border-color: var(--error); background: #FDE8E8; }
.quiz-matrix { width: 100%; border-collapse: collapse; }
.quiz-matrix th, .quiz-matrix td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.quiz-matrix th:not(:first-child), .quiz-matrix td:not(:first-child) { text-align: center; width: 4rem; }
.quiz-matrix tr.is-wrong td { color: var(--error); }
.quiz-q--ok { border-left: 4px solid var(--green); }
.quiz-q--wrong { border-left: 4px solid var(--error); }
.quiz-q__verdict { margin: 0; }
.quiz-q--wrong .quiz-q__verdict { color: #8A1C1C; }
.learn-table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow); overflow: hidden; }
.learn-table th, .learn-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.learn-table th { font-size: .8125rem; color: var(--ink-3); font-weight: 700; }
.learn-table__code a { color: var(--ink); font-weight: 700; text-decoration: none; }
.kb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.kb-stats dt { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.kb-stats dd { margin: 0; font-weight: 700; }
.kb-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kb-table th, .kb-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.outbox-item { border-top: 1px solid var(--line); padding: .6rem 0; }
.outbox-item summary { cursor: pointer; }
.outbox-body { white-space: pre-wrap; background: var(--paper-2); padding: .9rem 1rem; border-radius: 10px; font-size: .875rem; overflow-x: auto; }

/* ---------- Reflectie ---------- */
.reflect { display: grid; gap: .75rem; background: #F7FAFF; border: 1px solid #D8E4FD; border-radius: var(--radius-l); padding: 1.25rem 1.5rem; }
.reflect__q { font-weight: 700; margin: 0; }
.reflect form { display: grid; gap: .75rem; }
.reflect textarea { min-height: 4.5rem; }

/* ---------- Beeldkaarten ---------- */
.visuals { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.visual { display: grid; gap: .5rem; align-content: start; padding: 1rem 1.1rem; border-radius: 12px; background: var(--paper-2); border: 1px dashed var(--line-2); font-size: .9375rem; }
.visual__id { font-size: .75rem; font-weight: 700; color: var(--ink-3); }
.visual__goal { color: var(--ink-2); font-size: .875rem; }

/* ---------- Dashboard: gereedheid + kaarten ---------- */
.ready { display: grid; gap: 1.25rem; }
.ready__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ready__item { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .85rem 1rem; background: var(--paper-2); border-radius: 12px; }
.ready__mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8125rem; background: var(--paper-3); color: var(--ink-3); }
.ready__item.is-ok .ready__mark { background: var(--green); color: var(--white); }
.ready__item.is-ok { background: #E3F7EE; }
.ready__title { font-weight: 700; margin: 0; }
.ready__text { margin: .15rem 0 0; color: var(--ink-2); font-size: .9375rem; }
.ready__verdict { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.dash-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.dash-card { display: grid; gap: .5rem; align-content: start; background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 1.25rem 1.4rem; }
.dash-card__n { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.03em; line-height: 1; }
.dash-card__t { font-weight: 700; }
.dash-card__s { color: var(--ink-2); font-size: .9375rem; margin: 0; }
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.flags li, .flags > p { margin: 0; padding: .75rem 1rem; border-radius: 10px; background: #FFF1DB; color: #7A4800; font-size: .9375rem; }

/* Sterk/zwak: twee kolommen op brede schermen, anders onder elkaar. */
.learn .grid--2 { display: grid; gap: 1.25rem 2rem; }
@media (min-width: 700px) { .learn .grid--2 { grid-template-columns: 1fr 1fr; } }
.learn .grid--2 .eyebrow { margin: 0 0 .5rem; }

/* ---------- Proefexamen ---------- */
.exam { display: grid; gap: 1.25rem; max-width: 48rem; margin-inline: auto; }
.exam__bar { position: sticky; top: var(--nav-h); z-index: 20; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.25rem; padding: .75rem 1rem; background: var(--white); border-radius: 12px; box-shadow: var(--shadow); font-size: .9375rem; }
.exam__timer { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.125rem; }
.exam__timer.is-low { color: var(--error); }
.exam__progress { color: var(--ink-2); }
.exam__nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.exam-map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: .4rem; }
.exam-map a, .exam-map span, .exam-map button { display: grid; place-items: center; width: 100%; height: 40px; border-radius: 8px; background: var(--white); border: 1.5px solid var(--line); text-decoration: none; font: 700 .875rem var(--font-body, inherit); color: var(--ink-2); cursor: pointer; }
.exam-map button:hover { border-color: var(--accent); color: var(--accent); }
.exam-map .is-answered { background: #E7EFFE; border-color: #B9CEFB; color: var(--accent); }
.exam-map .is-current { border-color: var(--ink); color: var(--ink); }
.exam-map .is-ok { background: #E3F7EE; border-color: #A9E4C8; color: #17754B; }
.exam-map .is-wrong { background: #FDE8E8; border-color: #F5B5B5; color: #B42318; }
.exam-score { display: grid; gap: .5rem; justify-items: start; }
.exam-score__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8vw, 5rem); letter-spacing: -0.04em; line-height: 1; }
.exam-score__n.is-pass { background: linear-gradient(90deg, #17754B, #4AC994); -webkit-background-clip: text; background-clip: text; color: transparent; }
.exam-score__n.is-fail { color: var(--error); }
.exam-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.exam-chapters li { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: .7rem .9rem; background: var(--white); border-radius: 10px; box-shadow: var(--shadow); font-size: .9375rem; }
.exam-chapters .learn-bar { grid-column: 1 / -1; height: 6px; }
.exam-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.exam-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: center; padding: .8rem 1rem; background: var(--white); border-radius: 12px; box-shadow: var(--shadow); font-size: .9375rem; }

/* ---------- Leerdossier / verklaring ---------- */
.dossier { display: grid; gap: 1.5rem; max-width: 48rem; margin-inline: auto; }
.dossier__head { display: grid; gap: .5rem; }
.dossier__meta { color: var(--ink-2); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.dossier__section { display: grid; gap: 1rem; background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: clamp(18px, 2.5vw, 28px); }
.dossier__section h2 { font-size: 1.25rem; }
.dossier__table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.dossier__table th, .dossier__table td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dossier__table th { font-size: .8125rem; color: var(--ink-3); }
.dossier__stamp { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; font-weight: 700; }
.dossier__stamp.is-ready { background: #E3F7EE; color: #17754B; } .dossier__stamp.is-not { background: #FFF1DB; color: #9A5B00; }
.dossier__share { display: grid; gap: .5rem; }
.dossier__share input { width: 100%; font-size: .875rem; }
.dossier__events { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; color: var(--ink-2); }
.dossier__events time { font-variant-numeric: tabular-nums; color: var(--ink-3); margin-right: .5rem; }
@media print { .dossier__section { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; } .dossier__share, .learn__foot, .arrow-link--back { display: none !important; } }

/* ---------- Tutor-widget ---------- */
.tutor-fab { position: fixed; right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); z-index: 60; display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.2rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--white); font: 700 .9375rem var(--font-display); cursor: pointer; box-shadow: var(--shadow-l); }
.tutor-fab__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); }
.tutor.is-open .tutor-fab { display: none; }
.tutor-panel { position: fixed; right: clamp(8px, 2vw, 24px); bottom: clamp(8px, 2vw, 24px); z-index: 61; width: min(420px, calc(100vw - 16px)); max-height: min(72vh, 640px); display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); overflow: hidden; }
.tutor-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--line); }
.tutor-panel__head .eyebrow { margin: 0 0 .15rem; }
.tutor-panel__label { margin: 0; font-weight: 600; font-size: .9375rem; }
.tutor-panel__close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-2); padding: 0 .25rem; }
.tutor-msgs { flex: 1 1 auto; overflow-y: auto; padding: .9rem 1rem; display: grid; gap: .6rem; align-content: start; }
.tutor-msg { margin: 0; padding: .6rem .85rem; border-radius: 14px; font-size: .9375rem; line-height: 1.5; max-width: 92%; white-space: pre-wrap; }
.tutor-msg--bot { background: var(--paper-2); justify-self: start; border-bottom-left-radius: 4px; }
.tutor-msg--user { background: var(--accent); color: var(--white); justify-self: end; border-bottom-right-radius: 4px; }
.tutor-msg--pending { color: var(--ink-3); }
.tutor-msg--error { color: #8A1C1C; background: #FDE8E8; }
.tutor-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; }
.tutor-chip { border: 1px solid var(--line-2); background: var(--white); border-radius: 999px; padding: .35rem .7rem; font-size: .8125rem; cursor: pointer; color: var(--ink-2); }
.tutor-chip:hover { border-color: var(--accent); color: var(--accent); }
.tutor-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .5rem 1rem; border-top: 1px solid var(--line); align-items: end; }
.tutor-form textarea { width: 100%; resize: none; border: 1.5px solid var(--line-2); border-radius: 10px; padding: .55rem .7rem; font: inherit; font-size: .9375rem; }
.tutor-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.tutor-note { margin: 0; padding: 0 1rem .75rem; }
.tutor.is-busy .tutor-chip { pointer-events: none; opacity: .5; }
.tutor-ask { border: 1.5px solid var(--line-2); background: var(--white); border-radius: 999px; padding: .35rem .8rem; font-size: .8125rem; font-weight: 700; cursor: pointer; color: var(--accent); }
.tutor-ask:hover { border-color: var(--accent); }
.tutor-panel__tools { display: flex; align-items: center; gap: .5rem; }
.tutor-voice { display: inline-flex; align-items: center; gap: .45rem; border: 2px solid var(--ink); background: var(--white); color: var(--ink); border-radius: 999px; padding: .4rem .8rem; font: 700 .8125rem var(--font-display); cursor: pointer; }
.tutor-voice__icon { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }
.tutor-voice.is-active { background: var(--ink); color: var(--white); }
.tutor-voice.is-active .tutor-voice__icon { background: var(--accent-3); animation: tutor-pulse 1.2s ease-in-out infinite; }
.tutor-voice.is-speaking .tutor-voice__icon { background: var(--white); }
@keyframes tutor-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .6; } }
.tutor-status { margin: 0; padding: .45rem 1rem; font-size: .8125rem; color: var(--ink-2); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.tutor-status--live { color: var(--ink); }
.tutor-status--error { color: var(--error); }
.tutor-msg--voice { border-left: 3px solid var(--accent); }