/* Agora Español: additions on top of /css/app.css (same look, a few new pieces) */
.es-tag { display: inline-block; font-size: .42em; vertical-align: middle; background: var(--coral); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; padding: 4px 8px 2px; transform: rotate(-4deg) translateY(-6px); box-shadow: 3px 3px 0 var(--ink); letter-spacing: .06em; text-shadow: none; }
.top-btns { display: flex; gap: 8px; }
.switch-link { display: block; text-align: center; margin: 34px 0 6px; color: var(--muted); font-size: 14px; }

/* home: your level + notebook counts */
.stats-strip { margin-top: 18px; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); cursor: pointer; padding: 0; overflow: hidden; text-align: center; }
.stats-strip > div { padding: 10px 6px 9px; }
.stats-strip > div + div { border-left: 2px solid rgba(28, 18, 34, .15); }
.stats-strip b { display: block; font-family: var(--font-comic); font-size: 30px; letter-spacing: .03em; line-height: 1; }
.stats-strip span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-top: 3px; }
.stats-strip .lvl b { color: #c24a1c; }
.stats-strip .trend { font-size: 13px; margin-left: 3px; color: #1f8a47; }

/* letter grades */
.grade { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 4px; border-radius: 12px; border: 3px solid var(--ink); font-family: var(--font-comic); font-size: 26px; letter-spacing: .02em; line-height: 1; color: var(--ink); background: #e8e0cf; box-shadow: 2px 2px 0 var(--ink); }
.grade.gA { background: #ffc93c; }
.grade.gB { background: #7fe0a0; }
.grade.gC { background: #9fd0f5; }
.grade.gD { background: #f5b08a; }
.grade.gF { background: #ff8a8a; }
.concept .grade { position: absolute; left: 10px; top: 12px; min-width: 44px; height: 44px; font-size: 24px; }
.concept .grade.none { background: var(--coral); font-family: var(--font-ui); font-size: 20px; }
.concept.locked .grade.none { background: #d8d0c2; }
.concept .tag-stretch { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #1c1222; color: var(--sun); border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }
.concept .es { font-style: italic; opacity: .6; font-weight: 500; }
.concept.locked { opacity: .78; }
.partner-seg { margin-top: 10px; }

/* incoming call */
.ringing.incoming .ring-topic { color: var(--sun); font-weight: 700; margin-top: 10px; font-size: 15px; }
.ring-actions { display: flex; justify-content: center; gap: 64px; margin-top: 42px; }
.ring-btn { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; cursor: pointer; position: relative; box-shadow: 3px 3px 0 var(--ink); }
.ring-btn svg { width: 34px; height: 34px; }
.ring-btn span { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--paper); white-space: nowrap; }
.ring-btn.answer { background: var(--green); color: #07210f; animation: answerPulse 1.2s infinite; }
.ring-btn.decline { background: var(--red); color: #fff; }
@keyframes answerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* live corrections + new words during a call */
.fix-chips { position: absolute; top: calc(74px + env(safe-area-inset-top)); left: 12px; width: min(520px, calc(100% - 150px)); z-index: 4; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; }
.fix-chip { background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 8px 12px; font-size: 14.5px; line-height: 1.3; animation: chipIn .3s ease-out; transition: opacity .5s, transform .5s; max-width: 100%; }
.fix-chip.out { opacity: 0; transform: translateY(-8px); }
.fix-chip .k { font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.fix-chip.fix .k { color: #c2331c; }
.fix-chip.new .k { color: #1f7a45; }
.fix-chip.nice { background: #fff4cc; }
.fix-chip.nice .k { color: #a86400; }
.fix-chip.nice b { color: #1c1222; }
.fix-chip s { opacity: .6; }
.fix-chip b { color: #0f6b33; }
.fix-chip em { display: block; font-size: 12.5px; opacity: .7; font-style: normal; margin-top: 2px; }
@keyframes chipIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }

/* result card after a call */
.result-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
.rc-head { display: flex; align-items: center; gap: 14px; }
.rc-face { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); flex: none; position: relative; }
.rc-face .scene { position: absolute; inset: 0; }
.rc-grade { font-size: 44px; min-width: 70px; height: 70px; border-radius: 18px; box-shadow: 3px 3px 0 var(--ink); margin-left: auto; flex: none; }
.rc-head > div:nth-child(2) { min-width: 0; }
.rc-face { width: 60px; height: 60px; }
.rc-title { font-size: 23px; }
.rc-title { font-family: var(--font-comic); font-size: 26px; letter-spacing: .03em; line-height: 1.05; }
.rc-sub { font-size: 13px; opacity: .7; margin-top: 3px; }
.rc-best { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 8px; background: var(--ink); color: var(--sun); }
.rc-summary { font-size: 15px; line-height: 1.45; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; }
.rc-sec { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .55; margin-top: 4px; }
.rc-goals { display: grid; gap: 4px; font-size: 14px; }
.rc-goals .ok { color: #13893f; font-weight: 600; }
.rc-goals .no { opacity: .6; }
.rc-fix { font-size: 14px; line-height: 1.35; padding: 7px 0; border-bottom: 1px dashed rgba(28,18,34,.2); }
.rc-fix:last-child { border-bottom: 0; }
.rc-fix s { opacity: .55; }
.rc-fix b { color: #0f6b33; }
.rc-fix em { display: block; font-style: normal; font-size: 12.5px; opacity: .7; }
.type-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 5px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; border: 1.5px solid var(--ink); }
.type-tag.grammar { background: #9fd0f5; }
.type-tag.vocab { background: #ffc93c; }
.type-tag.pronunciation { background: #f5a0c0; }
.rc-words { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-words span { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; font-size: 13.5px; }
.rc-words span i { font-style: normal; opacity: .6; }
.rc-level { font-size: 13.5px; padding: 8px 10px; border-radius: 10px; background: rgba(43, 212, 107, .18); border: 2px solid #13893f; }
.rc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.rc-actions .sheet-btn { text-align: center; }
.grading { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 4px solid rgba(28,18,34,.15); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* notebook */
.nb-title { font-family: var(--font-comic); font-size: 46px; letter-spacing: .04em; margin: 16px 0 12px; color: var(--sun); font-weight: 400; }
.level-card { border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; }
.level-card .big { grid-row: span 3; font-family: var(--font-comic); font-size: 58px; line-height: 1; color: #c24a1c; }
.level-card .lbl { font-weight: 700; font-size: 17px; }
.level-card .bar { height: 10px; border-radius: 6px; background: rgba(28,18,34,.12); overflow: hidden; border: 2px solid var(--ink); }
.level-card .bar i { display: block; height: 100%; background: var(--green); }
.level-card small { font-size: 12.5px; opacity: .7; }
.nb-tabs { margin: 18px 0 8px; }
.nb-filter { margin-bottom: 12px; }
.nb-filter button { font-size: 12.5px; padding: 5px 10px; }
.nb-list { display: grid; gap: 8px; }
.nb-row { border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); padding: 10px 12px; box-shadow: 3px 3px 0 var(--ink); }
.nb-row .es { font-weight: 700; font-size: 16.5px; }
.nb-row .en { opacity: .7; font-size: 14px; margin-left: 6px; }
.nb-row .from { display: block; font-size: 11.5px; opacity: .5; margin-top: 3px; }
.nb-row.fix { font-size: 15px; line-height: 1.35; }
.nb-row.fix s { opacity: .55; }
.nb-row.fix b { color: #0f6b33; }
.nb-row.fix em { display: block; font-style: normal; font-size: 13px; opacity: .72; margin-top: 2px; }
.nb-row.grade-row { display: flex; align-items: center; gap: 12px; }
.nb-row.grade-row .grade { min-width: 40px; height: 40px; font-size: 22px; }
.nb-empty { color: var(--muted); padding: 18px 4px; font-size: 15px; }

/* onboarding: translation under the Spanish line */
.ob-bubble .tr { display: block; font-size: 13px; opacity: .6; margin-top: 4px; font-style: italic; }

/* onboarding level picker: compact rows so her face stays visible */
.ob-opts.compact { gap: 7px; }
.ob-opts.compact .ob-opt, .ob-opts.compact .ob-why { padding-top: 9px; padding-bottom: 9px; min-height: 0; }
.ob-opts.compact .ob-opt { padding-top: 7px; padding-bottom: 7px; }
.ob-opts.compact .ob-opt b { font-size: 15px; line-height: 1.2; }
.ob-opts.compact .ob-opt span:not(.ico) { font-size: 12.5px; margin-top: 0; line-height: 1.25; text-align: left; }
.ob-opts.compact .ob-opt .ico { top: 50%; transform: translateY(-50%); width: 34px; height: 34px; font-size: 13px; }

/* language switch (Español / Français) */
.lang-switch { margin-top: 16px; }
.lang-switch button { font-size: 14px; }
#call.in-person #selfView, #call.in-person #bCam { display: none !important; }
.rc-cost { font-size: 12.5px; color: #6a5a70; margin: 8px 0 2px; text-align: center; }
.nb-sec { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: 14px 0 6px; }
.nb-row.common { border-left: 4px solid #ff7a45; }
.nb-count { font-weight: 800; color: #ff7a45; margin-right: 6px; }
.scene.tod-night .bg-layer::after, .scene.tod-dusk .bg-layer::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
.scene.tod-night .bg-layer::after { background: rgba(40, 40, 110, .55); }
.scene.tod-dusk .bg-layer::after { background: rgba(255, 140, 90, .28); }
.ob-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ob-room { background: #f6ecd9; border: 3px solid #1c1222; border-radius: 14px; padding: 0 0 6px; overflow: hidden; cursor: pointer; font: inherit; color: #1c1222; box-shadow: 3px 3px 0 #1c1222; }
.ob-room.sel { outline: 4px solid #ffc93c; outline-offset: 2px; }
.ob-room-pic { display: block; aspect-ratio: 390 / 300; overflow: hidden; position: relative; }
.ob-room-pic svg { width: 100%; height: auto; display: block; }
.ob-room b { display: block; margin-top: 5px; font-size: 14px; }
.ob-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ob-room { background: #f6ecd9; border: 3px solid #1c1222; border-radius: 14px; padding: 0 0 6px; overflow: hidden; cursor: pointer; font: inherit; color: #1c1222; box-shadow: 3px 3px 0 #1c1222; }
.ob-room.sel { outline: 4px solid #ffc93c; outline-offset: 2px; }
.ob-room-pic { display: block; aspect-ratio: 390 / 300; overflow: hidden; position: relative; }
.ob-room-pic svg { width: 100%; height: auto; display: block; }
.ob-room b { display: block; margin-top: 5px; font-size: 14px; }
.field-note { display: block; font-size: 12px; opacity: .7; margin-top: 6px; }

/* skill stats (vocab, grammar…), same look as social */
.st-bar { display: block; height: 9px; border-radius: 7px; background: rgba(28,18,34,.12); border: 2px solid var(--ink); overflow: hidden; }
.stat-grid { display: grid; gap: 5px; margin-top: 12px; text-align: left; }
.stat-row { display: grid; grid-template-columns: 22px 96px 1fr 30px; align-items: center; gap: 6px; font-size: 13px; }
.stat-row .st-ico { text-align: center; }
.stat-row .st-name { font-weight: 700; }
.stat-row .st-bar i { display: block; height: 100%; background: #ffc93c; }
.stat-row b { text-align: right; font-size: 13px; }
.rc-stats { display: grid; gap: 5px; }
.rc-stats .stat-row { grid-template-columns: 22px 92px 1fr 28px 38px; }
.stat-row .delta { font-style: normal; font-size: 12px; font-weight: 800; text-align: right; opacity: .6; }
.stat-row .delta.up { color: #13893f; opacity: 1; }
.stat-row .delta.down { color: #c2331c; opacity: 1; }
.level-card .stat-grid { grid-column: 1 / -1; margin-top: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.chip-btn { border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.chip-btn.sel { background: var(--green); }
.ob-chips { margin-bottom: 4px; }

.ob-why { min-height: 0; width: 100%; text-align: left; }
.ob-opts.compact .ob-why { padding-top: 7px; padding-bottom: 7px; }
.ob-opts.compact .ob-why b { font-size: 15px; line-height: 1.2; }
.ob-opts.compact .ob-why span:not(.ico) { font-size: 12.5px; margin-top: 0; line-height: 1.25; }
.ob-opts.compact .ob-why .ico { top: 50%; transform: translateY(-50%); width: 34px; height: 34px; font-size: 17px; }
.ob-lvl-note { margin-top: 8px; color: #fff; opacity: .85; }
.ob-why.sel { background: var(--sun); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.ob-why.sel .ico { background: var(--coral); }
.ob-opts.compact:has(.ob-why) { gap: 5px; }
.ob-opts.compact .ob-why { padding-top: 5px; padding-bottom: 5px; }
.ob-opts.compact .ob-why .ico { width: 30px; height: 30px; font-size: 15px; }
.rc-lvl { padding: 10px 12px; border-radius: 12px; background: rgba(43, 212, 107, .14); border: 2px solid #13893f; display: flex; flex-direction: column; gap: 7px; }
.rc-lvl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; } .rc-lvl-h b { font-size: 16px; } .rc-lvl-h em { font-style: normal; font-weight: 700; color: #0f6b33; font-size: 13px; }
.rc-lvl-bar { height: 14px; border-radius: 999px; background: #fff; border: 2px solid #1c1222; overflow: hidden; } .rc-lvl-bar i { display: block; height: 100%; background: #2bd46b; border-radius: 999px; transition: width 1.1s cubic-bezier(.3, .8, .3, 1); }