/* Μαθαίνω! v0.6.48 — approved 75% clean / 25% hand-drawn interface.
   Production skin phase 1. Scoped to HTML data-workbook="on"; no lesson logic changes.
   Avoid color-mix and modern container queries to support older iPads. */
html[data-workbook="on"] {
  --wb-ink:#203947;
  --wb-muted:#627e8c;
  --wb-line:#c5dde1;
  --wb-paper:#fffdf9;
  --wb-paper-alt:#f1f8f5;
  --wb-mint:#2b8285;
  --wb-mint-strong:#1b747c;
  --wb-soft:#dfefeb;
  --wb-pencil:#7eaaa9;
  --wb-shadow:rgba(32,69,77,.13);
}
html[data-theme="dark"][data-workbook="on"] {
  --wb-ink:#edf7f6;
  --wb-muted:#bbd1d5;
  --wb-line:#52747e;
  --wb-paper:#1c3240;
  --wb-paper-alt:#243d4c;
  --wb-mint:#6abbb6;
  --wb-mint-strong:#5ab4ae;
  --wb-soft:#284b51;
  --wb-pencil:#86c1bd;
  --wb-shadow:rgba(5,14,21,.38);
}
html[data-workbook="on"] body {
  color:var(--wb-ink);
  background-color:#ecf3f2;
  background-image:linear-gradient(90deg,transparent 0,transparent 50px,rgba(44,138,147,.08) 51px,transparent 52px),
    repeating-linear-gradient(to bottom,transparent 0,transparent 38px,rgba(48,127,142,.036) 39px,transparent 40px);
  background-attachment:fixed;
}
html[data-theme="dark"][data-workbook="on"] body {
  color:var(--wb-ink);
  background-color:#101f2b;
  background-image:linear-gradient(90deg,transparent 0,transparent 50px,rgba(153,202,209,.052) 51px,transparent 52px),
    repeating-linear-gradient(to bottom,transparent 0,transparent 38px,rgba(153,202,209,.025) 39px,transparent 40px);
}
html[data-workbook="on"] main {
  max-width:850px;
  box-sizing:border-box;
  padding:clamp(13px,3vw,28px);
}
html[data-workbook="on"] main > p:first-of-type {
  color:var(--wb-muted);
  padding-left:5px;
  font-size:.99rem;
  margin:10px 0 25px;
  line-height:1.55;
}
/* Original illustrated book emblem on the existing app heading. */
html[data-workbook="on"] .workbook-brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
html[data-workbook="on"] .workbook-brand h1 {
  font-size:clamp(1.85rem,5vw,2.5rem);
  line-height:1.12;
  letter-spacing:-.05em;
  margin:0;
  font-weight:840;
  color:var(--wb-ink);
}
html[data-workbook="on"] .workbook-emblem {
  width:52px;height:52px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:19px 11px 17px 14px / 12px 19px 13px 18px;
  background:#23586a;
  color:#c9ede5;
  border:2px solid #6faeab;
  box-shadow:2px 4px 0 rgba(16,62,78,.22);
  transform:rotate(-4deg);
}
html[data-workbook="on"] .workbook-emblem svg {width:33px;height:33px}
html[data-workbook="on"] .workbook-emblem svg path {
  stroke-linecap:round;stroke-linejoin:round;
}
/* Every screen now shares an illustrated card frame; forms remain in normal flow. */
html[data-workbook="on"] main > section:not(.hidden) {
  background:var(--wb-paper);
  border:1.7px solid var(--wb-line);
  border-radius:29px 17px 31px 21px / 19px 31px 20px 28px;
  box-shadow:2px 5px 0 var(--wb-shadow),0 12px 32px rgba(23,70,84,.05);
  padding:clamp(17px,3vw,27px);
  position:relative;
  isolation:isolate;
}
html[data-workbook="on"] main > section:not(.hidden)::before {
  content:"";
  position:absolute;
  inset:4px;
  border:1.4px solid var(--wb-pencil);
  border-radius:inherit;
  opacity:.31;
  pointer-events:none;
  filter:url("#mathaino-workbook-ink");
}
html[data-workbook="on"] .focus section {box-shadow:none}
html[data-workbook="on"] main section > h2,
html[data-workbook="on"] main section > .parent-header h2,
html[data-workbook="on"] .history-visual-intro h2 {
  font-size:clamp(1.37rem,3.4vw,1.87rem);
  letter-spacing:-.032em;
  line-height:1.23;
  color:var(--wb-ink);
}
html[data-workbook="on"] main section > h2:first-of-type::after {
  content:"";
  display:block;
  width:87px;height:12px;margin:6px 0 12px;
  background: center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 12'%3E%3Cpath d='M2 7C23 3 40 9 56 5S84 6 92 4' fill='none' stroke='%2355a69f' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M9 10Q42 8 83 9' fill='none' stroke='%2355a69f' stroke-opacity='.3' stroke-width='1.4'/%3E%3C/svg%3E");
}
html[data-workbook="on"] main section p {
  line-height:1.58;
}
html[data-workbook="on"] #home .home-subject-intro {color:var(--wb-muted)}
html[data-workbook="on"] #homeAvatarActions {
  border-radius:18px 9px 20px 13px / 13px 20px 11px 18px;
}
html[data-workbook="on"] #childLabel {color:var(--wb-ink)}
/* Primary navigation becomes a set of original hand-cut workbook tabs. */
html[data-workbook="on"] #subjects {
  gap:10px;
  align-items:stretch;
  margin:21px 0;
}
html[data-workbook="on"] #subjects button {
  border:1.8px solid #a4c9c9;
  background:#e6f2ef;
  color:#24525e;
  font-weight:700;
  border-radius:17px 9px 19px 12px / 10px 18px 11px 20px;
  min-height:51px;
  box-shadow:2px 3px 0 rgba(23,81,93,.1);
  flex:1 1 130px;
  max-width:100%;
  line-height:1.3;
}
html[data-workbook="on"] #subjects button:nth-child(even) {
  border-radius:9px 19px 12px 17px / 20px 9px 18px 12px;
}
html[data-workbook="on"] #subjects button.active {
  background:#bfe4da;
  border-color:#2b8588;
  color:#194e54;
  box-shadow:2px 4px 0 rgba(25,99,98,.2),inset 1px 1px 0 rgba(255,255,255,.45);
}
html[data-theme="dark"][data-workbook="on"] #subjects button {
  background:#284c53;color:#eef9f8;border-color:#5d8a8e;
}
html[data-theme="dark"][data-workbook="on"] #subjects button.active {
  background:#326d70;color:#fff;border-color:#8ad0c7;
}
html[data-workbook="on"] #lessonOptions,
html[data-workbook="on"] .lesson-options {
  background:var(--wb-paper-alt);
  border:1.7px solid var(--wb-line);
  border-radius:18px 24px 16px 20px / 24px 16px 20px 17px;
  padding:clamp(12px,2.5vw,20px);
  box-shadow:2px 3px 0 rgba(39,99,108,.07);
}
html[data-workbook="on"] #lessonOptions h3 {color:var(--wb-ink)}
/* Shared ink-and-paper controls, including parent settings, reports, and exercises. */
html[data-workbook="on"] button,
html[data-workbook="on"] select,
html[data-workbook="on"] .auth-field,
html[data-workbook="on"] .settings input:not([type=checkbox]) {
  border-radius:15px 9px 17px 11px / 11px 17px 9px 15px;
  border-width:1.5px;
  box-shadow:1px 2px 0 rgba(30,73,84,.06);
}
html[data-workbook="on"] button:nth-of-type(2n) {
  border-radius:9px 17px 11px 16px / 17px 9px 16px 11px;
}
html[data-workbook="on"] button {
  min-height:44px;
  transition:box-shadow .15s, background-color .15s, border-color .15s;
}
html[data-workbook="on"] button:focus-visible,
html[data-workbook="on"] select:focus-visible,
html[data-workbook="on"] input:focus-visible {
  outline:3px solid #ce9458;
  outline-offset:3px;
}
html[data-workbook="on"] button.primary,
html[data-workbook="on"] #home button.primary {
  background:linear-gradient(174deg,#348b8d,#1f7580);
  color:#fff;
  border:1.7px solid #226771;
  box-shadow:2px 4px 0 rgba(14,74,84,.22),inset 2px 1px 0 rgba(255,255,255,.22);
  font-weight:750;
}
html[data-theme="dark"][data-workbook="on"] button.primary {
  background:linear-gradient(174deg,#327d86,#256570);
  color:#fff;border-color:#8bd1cb;
}
html[data-workbook="on"] button.good,
html[data-workbook="on"] .good,
html[data-workbook="on"] button.bad,
html[data-workbook="on"] .bad {
  box-shadow:1px 2px 0 var(--wb-shadow);
}
/* Shared answers and learning cards. Keep original good/bad color semantics. */
html[data-workbook="on"] .choice,
html[data-workbook="on"] #historyChoices button,
html[data-workbook="on"] .g5-choice,
html[data-workbook="on"] .car-answer,
html[data-workbook="on"] .chess-check-answer {
  min-height:53px;
  border-radius:18px 10px 21px 11px / 12px 20px 10px 17px;
  border-width:1.8px;
}
html[data-workbook="on"] .choice:nth-child(even),
html[data-workbook="on"] .car-answer:nth-child(even),
html[data-workbook="on"] .chess-check-answer:nth-child(even) {
  border-radius:10px 21px 12px 19px / 20px 10px 18px 12px;
}
html[data-workbook="on"] .card,
html[data-workbook="on"] .g5-panel,
html[data-workbook="on"] .chess-learning-card,
html[data-workbook="on"] #chessRuleCard,
html[data-workbook="on"] #chessRuleCheck,
html[data-workbook="on"] .profile-card {
  border-radius:18px 26px 16px 23px / 24px 16px 25px 18px;
  border:1.4px solid var(--wb-line);
  background:var(--wb-paper-alt);
  box-shadow:2px 3px 0 rgba(37,81,88,.075);
}
html[data-workbook="on"] .card {color:var(--wb-ink)}
html[data-workbook="on"] .profile {
  background:var(--wb-paper-alt);
  border:2px solid var(--wb-line);
  border-radius:26px 13px 24px 17px / 17px 25px 14px 24px;
  box-shadow:2px 5px 0 var(--wb-shadow);
}
html[data-workbook="on"] .profile:nth-child(even) {
  border-radius:14px 26px 18px 25px / 25px 16px 27px 16px;
}
html[data-workbook="on"] .avatar-picture svg,
html[data-workbook="on"] #profileList .line-icon {
  border-radius:26% 34% 29% 31% / 34% 26% 32% 28%;
}
html[data-workbook="on"] .line-icon path[stroke] {
  filter:url("#mathaino-workbook-ink");
}
/* Visual rhythm for section-level menus and progress. */
html[data-workbook="on"] .app-menu {
  background:var(--wb-paper);
  color:var(--wb-ink);
  border:1.8px solid var(--wb-line);
  border-radius:19px 12px 21px 14px / 13px 20px 12px 19px;
  box-shadow:3px 5px 0 var(--wb-shadow),0 14px 30px #203f4e20;
}
html[data-workbook="on"] .app-menu button {
  box-shadow:none;
  min-height:42px;
}
html[data-workbook="on"] .app-menu #themeControl {border-color:var(--wb-line)}
html[data-workbook="on"] .app-menu #workbookControl {
  display:flex;gap:9px;align-items:center;justify-content:space-between;
  padding:10px 8px;
  margin:0 0 6px;
  border-bottom:1px dashed var(--wb-line);
}
html[data-workbook="on"] #workbookControl label {
  font-size:.9rem;
  color:var(--wb-ink);
  font-weight:650;
  cursor:pointer;
}
html[data-workbook="on"] #workbookSwitch {
  min-height:0;
  width:21px;height:21px;
  accent-color:#2b8588;
  flex:none;
}
html[data-workbook="on"] #menuToggle {
  background:var(--wb-paper);
  border-color:var(--wb-line);
  color:var(--wb-ink);
  border-radius:15px 9px 17px 11px / 10px 18px 10px 15px;
  box-shadow:2px 3px 0 var(--wb-shadow);
}
html[data-workbook="on"] .version {color:var(--wb-muted)}
html[data-workbook="on"] #historyStage,
html[data-workbook="on"] .g5-scene,
html[data-workbook="on"] #carPictureFrame {
  border-radius:22px 13px 24px 15px / 14px 24px 15px 22px;
}
html[data-workbook="on"] #historyStage:not(:fullscreen):not(.history-expanded) {
  box-shadow:2px 4px 0 var(--wb-shadow);
}
html[data-workbook="on"] #grade5Body .g5-note {
  background:var(--wb-paper-alt);
  color:var(--wb-ink);
  border-left-color:#489b96;
}
html[data-workbook="on"] #grade5Body .g5-energy-progress {
  height:10px;
  border-radius:12px 7px 11px 8px / 7px 12px 8px 11px;
}
html[data-workbook="on"] #grade5Body .g5-energy-progress>div {
  border-radius:11px 6px 12px 7px / 6px 11px 7px 12px;
  background:#56a99f;
}
html[data-workbook="on"] #chessModeTabs button[aria-selected="true"] {
  background:#2d858a;
  color:#fff;
}
html[data-workbook="on"] .chess-rule-mini-board,
html[data-workbook="on"] #chessBoard {
  /* The chess grid must remain perfectly square and undistorted. */
  filter:none;
}
/* Make room on narrow phones without shifting important controls. */
@media(max-width:540px) {
  html[data-workbook="on"] main {padding:12px}
  html[data-workbook="on"] .workbook-brand {gap:8px}
  html[data-workbook="on"] .workbook-emblem {width:42px;height:42px}
  html[data-workbook="on"] .workbook-emblem svg {width:28px;height:28px}
  html[data-workbook="on"] .workbook-brand h1 {font-size:1.78rem}
  html[data-workbook="on"] main > section:not(.hidden) {padding:17px 13px}
  html[data-workbook="on"] #subjects {gap:8px}
  html[data-workbook="on"] #subjects button {flex:1 1 126px;padding:11px 9px}
  html[data-workbook="on"] main section > h2:first-of-type::after {width:71px}
}
/* Preserve focus mode and child opt-out-of-color accessibility preference. */
html[data-workbook="on"] .focus section,
html[data-workbook="on"].focus section,
html[data-workbook="on"] .no-color section {
  box-shadow:none;
}
html[data-workbook="on"] .no-color .good,
html[data-workbook="on"] .no-color .bad,
html[data-workbook="on"] .no-color .active {
  border-width:3px!important;
}
@media(prefers-reduced-motion:reduce) {
  html[data-workbook="on"] button {transition:none}
}

/* The appearance control remains readable even while the skin is disabled. */
#workbookControl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:4px 0 7px;
  padding:10px 8px;
  border-top:1px solid #d2dfef;
}
#workbookControl label{
  font-size:.86rem;
  font-weight:650;
  cursor:pointer;
  line-height:1.3;
}
#workbookSwitch{
  width:20px;
  height:20px;
  flex:none;
  accent-color:#287f82;
  cursor:pointer;
}
html[data-theme="dark"] #workbookControl{border-color:#526581}
html[data-workbook="on"] .settings input:not([type=checkbox]){box-sizing:border-box}