/* Rulno's raised controls share one depth and one press response on every host. */
:root {
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --surface-depth: 0 4px 0 #dce3d8, 0 8px 20px #173e3407;
  --control-depth: 0 4px 0 #102e28, inset 0 1px 0 #ffffff18;
}
::selection { background: #cce3cc; color: #173e34; }
input, textarea { caret-color: #254f40; }
.primary-button, .next-button {
  box-shadow: var(--control-depth);
  background: #285648;
  border: 1px solid #21493d;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 120ms ease;
}
.small-button, .icon-button, .counter-button, .bookmark, .answer,
.mode-card, .action-row, .ticket, .audience-options button, .study-task,
.question-cell, .tariff, .sign-card, .dashboard-topic {
  box-shadow: var(--surface-depth);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), border-color 120ms ease, background-color 120ms ease;
}
.small-button, .answer, .audience-options button { border: 1px solid #d8e0d2; }
.answer { background: #fff; border-radius: 16px; }
.answer.correct { background: #e4f1df; border-color: #97bd89; box-shadow: 0 3px 0 #a4bd98; }
.answer.wrong { background: #f9e7e0; border-color: #d89680; box-shadow: 0 3px 0 #d1a190; }
.primary-button:active:not(:disabled), .next-button:active:not(:disabled) {
  transform: translateY(3px); box-shadow: 0 1px 0 #102e28, inset 0 1px 0 #ffffff18;
}
:is(.small-button,.icon-button,.counter-button,.bookmark,.answer,.mode-card,.action-row,.ticket,.audience-options button,.study-task,.question-cell,.tariff,.sign-card,.dashboard-topic):active:not(:disabled) {
  transform: translateY(3px); box-shadow: 0 1px 0 #c5d1bf;
}
button:disabled { cursor: default; }
.resume-card, .profile-card, .scene-panel, .dashboard-summary, .dashboard-focus, .dashboard-pro,
.mentor-banner, .learning-entry, .panel { box-shadow: 0 4px 0 #e0e5da, 0 12px 30px #173e3407; }
.mode-card { background: #fff; }
/* Long sign names must wrap inside a track, rather than widen the catalogue. */
.sign-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sign-grid > .sign-card { min-width: 0; }
.sign-grid > .sign-card > b { max-width: 100%; overflow-wrap: anywhere; }
.sign-detail > img { display: block; max-width: min(240px,100%); margin-inline: auto; }
@media (max-width:779px) {
  .sign-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.home-intro h1 { font-size: clamp(30px,5vw,42px); letter-spacing: -.03em; }
.progress-location { display: block; font-size: 14px; color: #526c5f; }
.learning-entry { background: #e5efdf; border-radius: 20px; padding: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-block: 20px; }
.learning-entry > div:first-child { flex: 1 1 240px; }
.learning-entry > div:last-child { display: flex; gap: 12px; flex-wrap: wrap; }
.learning-entry h2 { margin: 0 0 8px; font-size: 23px; letter-spacing: -.02em; }
.learning-entry p { margin: 0; font-size: 15px; line-height: 1.55; }
.learning-entry .primary-button { width: auto; }
body.web-shell[data-page="home"] #main > .learning-entry { grid-column: 1 / -1; grid-row: auto; margin: 0; }
body.web-shell[data-page="home"] #main > .home-intro { grid-row: auto; }
body.web-shell[data-page="home"] #main > .mentor-banner { grid-row: auto; }
.learning-extras { display: grid; gap: 16px; margin-top: 20px; }
.error-causes { margin: 0; border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.error-causes legend { font-size: 14px; margin-bottom: 10px; }
.error-causes button { border: 1px solid #d3dece; border-radius: 12px; padding: 10px 12px; min-height: 44px; font-size: 14px; background: #fff; }
.error-causes button[aria-pressed="true"] { border-color: #285648; background: #e4efdf; }
.diagnostic-result { margin-top: 28px; text-align: left; }
.mixed-topic-picker { background: #fff; padding: 20px; border-radius: 18px; margin: 20px 0; }
.mixed-topic-picker summary { min-height: 44px; font-size: 19px; font-weight: 700; cursor: pointer; }
.mixed-topic-picker label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; font-size: 16px; }
.mixed-topic-picker input { width: 22px; height: 22px; accent-color: #285648; }
.mixed-topic-picker .primary-button { margin-top: 20px; }
#modal[open], body.web-shell #modal[open] { animation: tactile-sheet-in 240ms var(--ease-drawer); }
#modal.dialog-closing[open], body.web-shell #modal.dialog-closing[open], #onboarding.dialog-closing[open] { animation: tactile-sheet-out 160ms var(--ease-out) forwards; pointer-events: none; }
#modal::backdrop, #onboarding::backdrop { background: #14362c66; }
@keyframes tactile-sheet-in { from { transform: translateY(22%); opacity: .65; } to { transform: translateY(0); opacity: 1; } }
@keyframes tactile-sheet-out { to { transform: translateY(22%); opacity: 0; } }
#onboarding { padding: 20px; width: min(720px,100%); max-height: 94vh; max-height: 94dvh; height: auto; margin: auto auto 0; border-radius: 24px 24px 0 0; box-shadow: 0 -8px 44px #163e3026; }
#onboarding[open] { animation: tactile-sheet-in 240ms var(--ease-drawer); gap: 18px; }
#onboarding .onboarding-top > span { font-size: 16px; letter-spacing: 0; }
#onboarding .onboarding-top .text-button { font-size: 14px; }
.guided-mentor { display: flex; align-items: center; gap: 16px; max-width: 560px; margin-inline: auto; width: 100%; }
.guided-mentor .onboarding-stepan { width: 108px; height: 108px; object-fit: contain; flex: 0 0 108px; }
.guided-mentor h1 { font-size: clamp(24px,5vw,30px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -.025em; }
.guided-mentor .note { display: block; }
#onboarding .onboarding-copy, #onboarding .onboarding-bottom { max-width: 560px; }
#onboarding .onboarding-copy h2 { font-size: 21px; line-height: 1.4; }
#onboarding .onboarding-bottom { padding-top: 0; margin-top: 0; }
#onboarding .onboarding-copy > p { color: #435d50; font-size: 16px; margin-bottom: 16px; }
.audience-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.audience-options button { background: #fff; border-radius: 16px; padding: 18px; text-align: left; display: grid; gap: 8px; }
.audience-options button b { font-size: 19px; }
.audience-options button span { font-size: 15px; line-height: 1.45; color: #526b5d; }
.audience-options button[aria-pressed="true"] { border-color: #6f9a65; background: #e6efdf; box-shadow: 0 4px 0 #adc4a2; }
.tour-question-image { display: block; width: 100%; max-height: 180px; object-fit: contain; margin: 12px auto 20px; }
.learning-portrait { width: 120px; height: 120px; object-fit: contain; display: block; margin-inline: auto; }
.lesson-course-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.voice-lesson .primary-button { margin-top: 24px; }
.voice-lesson .text-button { margin-top: 16px; }
.voice-lesson .answers { display: grid; gap: 12px; }
.voice-lesson .answer { min-height: 60px; font-size: 16px; padding: 14px; text-align: left; display: flex; align-items: center; gap: 12px; }
@media (hover:hover) and (pointer:fine) {
  .primary-button:hover:not(:disabled), .next-button:hover:not(:disabled) { background: #326552; }
  .mode-card:hover, .action-row:hover, .ticket:hover, .audience-options button:hover { border-color: #8fae83; }
}
@media (max-width:600px) {
  .learning-entry { padding: 18px; }
  .learning-entry .primary-button { width: 100%; }
  .learning-entry > div:last-child { width: 100%; }
  .audience-options { grid-template-columns: 1fr; }
  .audience-options button { padding: 14px 16px; }
  .guided-mentor .onboarding-stepan { width: 76px; height: 76px; flex-basis: 76px; }
  #onboarding { padding: 16px 16px max(16px,env(safe-area-inset-bottom)); }
  #onboarding .onboarding-copy h2 { font-size: 20px; }
  .lesson-course-head .small-button { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  #modal[open], body.web-shell #modal[open], #onboarding[open], #modal.dialog-closing[open], body.web-shell #modal.dialog-closing[open], #onboarding.dialog-closing[open] { animation: none; transform: none; }
  .primary-button, .next-button, .small-button, .icon-button, .answer, .mode-card, .action-row, .ticket { transition: background-color 100ms ease; }
  button:active { transform: none !important; }
}

#onboarding-title:focus { outline: none; }
.tour-consent { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0; font-size: 14px; line-height: 1.5; color: #435d50; }
.tour-consent input { min-width: 22px; width: 22px; height: 22px; margin-top: 0; accent-color: #285648; }

/* Keep the next action reachable inside a native safe-area viewport. */
#onboarding[open] { overflow: hidden; }
#onboarding .guided-mentor, #onboarding .onboarding-top, #onboarding .onboarding-bottom { flex: 0 0 auto; }
#onboarding .onboarding-copy { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
@media (max-height:500px) {
  #onboarding { padding: 12px; }
  #onboarding[open] { gap: 8px; }
  .guided-mentor .onboarding-stepan { display: none; }
  .guided-mentor h1 { font-size: 22px; margin-bottom: 6px; }
  .guided-mentor > div { display: flex; gap: 12px; align-items: center; }
}