/* Тема гида «Бумажная тетрадь» (редизайн 14.10.2026).
   Почему так: гид продолжает бумажные мультики Саши — тёплая бумага, чернила, вырезанные
   человечки. Прежний тёмно-синий остался цветом чернил и тёмной темы. Референсы и
   отвергнутые направления — product/research/redesign-mobbin-2026-10-14.md.
   Все страницы гида берут цвета только отсюда: свой hex в странице — это расхождение. */
@import url('/phuket/vendor/fonts/fonts.css');

:root{
  color-scheme: light;
  --paper:#F4EEE2;      /* фон страницы — тот же лист, что в мультиках */
  --card:#FFFDF8;       /* карточки, листы */
  --sunk:#EFE6D3;       /* вдавленное: поля ввода, подложки чипов */
  --ink:#1F2A44;        /* основной текст и тёмные плашки */
  --ink-2:#5B6275;      /* вторичный текст */
  --ink-3:#686C78;      /* подписи, плейсхолдеры — 4.5+ на бумаге */
  --line:#E2D6BF;       /* линии, рамки */
  --line-2:#9C8B6A;     /* рамки полей — 3:1 к карточке, граница поля должна читаться */
  --terra:#B8552E;      /* акцент: кнопки — белый текст на нём 4.7 */
  --terra-ink:#AE4A25;  /* акцент текстом по бумаге — контраст 4.5+ */
  --mango:#F2B33D;      /* выделение, звёздочки, «новое» */
  --sea:#3E8E8A;        /* хорошо, открыто */
  --sea-ink:#2E6F6B;
  --warn:#B23B32;       /* предупреждения */
  --on-accent:#FFFDF8;
  --shadow:0 1px 0 rgba(31,42,68,.06), 0 6px 18px -8px rgba(31,42,68,.25);
  --shadow-lg:0 -2px 0 rgba(31,42,68,.04), 0 -12px 32px -12px rgba(31,42,68,.35);
  --r:14px; --r-sm:10px; --r-lg:22px;
  --font:'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif:'Lora', Georgia, 'Times New Roman', serif;
  --hand:'Bad Script', 'Comic Sans MS', cursive; /* как в мультиках Саши */
  /* оценки: от A к D — от морской волны к кирпичу, без кислотных светофоров */
  --gA:#2E7D6B; --gB:#5E7F32; --gC:#C98A1B; --gD:#B5453A; --g0:#9AA0AB;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#1B2133; --card:#252C40; --sunk:#1F2639; --ink:#F2EBDD; --ink-2:#C2BBAE;
    --ink-3:#A39E95; --line:#343C54; --line-2:#46506C; --terra:#E27650; --terra-ink:#F09170;
    --mango:#F2B33D; --sea:#5BB3AD; --sea-ink:#7CC7C1; --warn:#EF7A6E; --on-accent:#1B2133;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 6px 18px -8px rgba(0,0,0,.6);
    --shadow-lg:0 -12px 32px -12px rgba(0,0,0,.7);
    --gA:#4FAE97; --gB:#93B65A; --gC:#E0A646; --gD:#E07063; --g0:#7D8494;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#1B2133; --card:#252C40; --sunk:#1F2639; --ink:#F2EBDD; --ink-2:#C2BBAE;
  --ink-3:#A39E95; --line:#343C54; --line-2:#46506C; --terra:#E27650; --terra-ink:#F09170;
  --mango:#F2B33D; --sea:#5BB3AD; --sea-ink:#7CC7C1; --warn:#EF7A6E; --on-accent:#1B2133;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg:0 -12px 32px -12px rgba(0,0,0,.7);
  --gA:#4FAE97; --gB:#93B65A; --gC:#E0A646; --gD:#E07063; --g0:#7D8494;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--font);
  -webkit-font-smoothing:antialiased}
/* Бумажное зерно: едва заметное, только на фоне страницы, не под текстом карточек. */
.paper-grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0}
a{color:var(--terra-ink)}
:focus-visible{outline:2.5px solid var(--terra);outline-offset:2px}
[hidden]{display:none!important}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding:0 20px;border-radius:999px;border:0;font:600 16px/1 var(--font);cursor:pointer;
  text-decoration:none;transition:transform .12s ease, box-shadow .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--terra);color:var(--on-accent);box-shadow:0 2px 0 var(--terra-ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn[disabled]{opacity:.6;cursor:default}

/* Буква-оценка — «печать проверяющего»: кружок с неровной обводкой. */
.stamp{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:50%;font:700 13px/1 var(--font);color:#fff;
  background:var(--g0);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.stamp.lg{width:52px;height:52px;font-size:19px}
.stamp[data-g^="A"]{background:var(--gA)} .stamp[data-g^="B"]{background:var(--gB)}
.stamp[data-g^="C"]{background:var(--gC)} .stamp[data-g^="D"]{background:var(--gD)}
/* Контраст буквы (аудит 14.10): на светлых охре и сером — чернила, в тёмной теме — тёмный текст. */
.stamp[data-g^="C"],.stamp:not([data-g^="A"]):not([data-g^="B"]):not([data-g^="D"]){color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stamp{color:var(--on-accent)}}
:root[data-theme="dark"] .stamp{color:var(--on-accent)}

/* Рукописная пометка на полях — голос автора. */
.hand{font-family:var(--hand);font-weight:400;color:var(--terra-ink);font-size:1.15em;line-height:1.15}

/* Чип */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;
  background:var(--card);border:1.5px solid var(--line);color:var(--ink);font:500 14px/1 var(--font);
  cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Поле ввода */
.field{width:100%;min-height:50px;padding:0 16px;border-radius:var(--r);border:1.5px solid var(--line-2);
  background:var(--card);color:var(--ink);font:16px/1.2 var(--font)}
.field::placeholder{color:var(--ink-3)}
.field:focus{outline:none;border-color:var(--terra)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}