/* ==========================================================================
   STEPWORK · Design System v2 — «Тихая сила»
   Сакральное приложение выздоровления. Читаемость №1. Премиум-глубина.
   Офлайн: только системные шрифты (New York / SF). Грузится ПОСЛЕ инлайн-стилей.
   ========================================================================== */

:root{
  /* — БАЗА: тёплый пергамент, глубокие чернила (высокий контраст) — */
  --bg:        #efe7d6;
  --bg-deep:   #e8dfca;
  --panel:     #fdfbf6;
  --panel2:    #f4eee1;
  --panel-3:   #efe7d6;
  --line:      #e2d9c3;
  --line-soft: #ece4d2;
  --txt:       #201c14;   /* почти чёрные тёплые чернила */
  --ink-2:     #4b4436;
  --dim:       #6a6150;   /* приглушённый, но ЧИТАЕМЫЙ (>4.5:1) */
  --faint:     #8b8069;

  /* — АКЦЕНТЫ (сдержанные, благородные) — */
  --accent:    #3a5893;   /* глубокий индиго — доверие, глубина */
  --accent-2:  #4c6db2;
  --accent-ink:#2b4374;
  --accent-soft:#e9eef7;
  --gold:      #9c6f16;   /* сусальное золото — сакральное */
  --gold-2:    #c39a3c;
  --gold-soft: #f6edd7;
  --ok:        #34865b;
  --rec:       #bf4c4c;
  --term:      #2c6a4a;

  /* — ТИПОГРАФИКА — */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-serif: "New York", "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:  clamp(.78rem, .75rem + .18vw, .86rem);
  --fs-sm:  clamp(.88rem, .84rem + .25vw, .98rem);
  --fs-base: clamp(1.02rem, .98rem + .3vw, 1.14rem);   /* КРУПНЕЕ — читаемо */
  --fs-lg:  clamp(1.2rem, 1.1rem + .6vw, 1.5rem);
  --fs-xl:  clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  --fs-2xl: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);
  --lh:     1.62;

  /* — РАДИУСЫ / ТЕНИ (тёплые, слоёные) / MOTION — */
  --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 28px;
  --sh-1: 0 1px 2px rgba(74,54,20,.05), 0 2px 5px rgba(74,54,20,.05);
  --sh-2: 0 2px 6px rgba(74,54,20,.06), 0 10px 22px -8px rgba(74,54,20,.14);
  --sh-3: 0 6px 16px rgba(74,54,20,.08), 0 26px 50px -14px rgba(74,54,20,.26);
  --hl:   inset 0 1px 0 rgba(255,255,255,.7);   /* верхний блик «бумаги» */
  --ring: 0 0 0 3px rgba(58,88,147,.22);
  --dur: .34s; --dur-fast: .16s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
}

/* ---------- БАЗА / ЧИТАЕМОСТЬ ---------- */
html{ -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--font-ui) !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh) !important;
  color: var(--txt) !important;
  letter-spacing: .003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1100px 620px at 6% -12%, rgba(156,111,22,.09), transparent 58%),
    radial-gradient(1000px 680px at 110% 2%, rgba(58,88,147,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-deep)) !important;
  background-attachment: fixed;
}
/* зерно бумаги (офлайн SVG, едва заметно) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.wrap{ position:relative; animation: pageIn .55s var(--ease) both; }
@keyframes pageIn{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none} }

p, li, .muted, textarea, input, .desc, .intro, .q, .hint{ font-size: inherit; }
.muted, .dim{ color: var(--dim) !important; font-size: var(--fs-sm); }

/* ---------- ТИПОГРАФИКА: серьёзный серифный дисплей ---------- */
h1{ font-family: var(--font-serif) !important; font-weight: 640; letter-spacing:-.018em;
    font-size: var(--fs-xl) !important; line-height: 1.1; color: var(--txt); }
h2{ font-family: var(--font-serif); font-weight: 600; letter-spacing:-.01em; color: var(--ink-2); }
h1 + .muted, .top .muted{ margin-top:2px; }

/* ---------- ВЕРХНЯЯ ПАНЕЛЬ (стеклянная, залипающая) ---------- */
.top{ position: sticky; top:0; z-index: 30; padding: 10px 0 12px; margin-bottom: 4px;
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); }
.top::before{ content:""; position:absolute; inset:-16px -50vw 0; z-index:-1;
  background: linear-gradient(180deg, rgba(243,236,221,.92), rgba(243,236,221,.62) 70%, transparent);
  -webkit-mask: linear-gradient(180deg,#000 70%,transparent); mask: linear-gradient(180deg,#000 70%,transparent); }
.top a, a.pill{
  border:1px solid var(--line); background: var(--panel); color: var(--ink-2) !important;
  border-radius: 999px; padding:8px 15px; font-weight:600; font-size: var(--fs-sm); text-decoration:none;
  box-shadow: var(--sh-1), var(--hl);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.top a:hover{ transform: translateY(-1px); box-shadow: var(--sh-2), var(--hl); }
.top a:active{ transform: translateY(0) scale(.97); }

/* ---------- КАРТОЧКИ: слоёная бумага с глубиной ---------- */
.tile, .card, .sec, .step, .cat, .person, .h, .formula, .help, .stat,
.wcard, .rowcard, .mbox, .sheet, .cravingflow, .node, .res, .item, .quote{
  background: linear-gradient(180deg, var(--panel), var(--panel2)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-2), var(--hl);
}
.sec, .card, .help, .stat{ padding: clamp(15px,3.6vw,20px) !important; }
.sec h2, .sec h2 *{ color: var(--accent-ink) !important; font-size: var(--fs-lg) !important; }

/* акцент-плитки (герой) */
.tile{ position:relative; overflow:hidden;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
  will-change: transform; }
.tile:hover{ transform: translateY(-4px); box-shadow: var(--sh-3), var(--hl); }
.tile:active{ transform: translateY(-1px) scale(.99); }
.tile.hero{
  color:#fff !important; border-color: transparent !important;
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-ink) 100%) !important;
  box-shadow: 0 22px 48px -16px rgba(43,67,116,.6), var(--sh-2);
}
.tile.hero::before{ /* мягкое сияние-аврора */
  content:""; position:absolute; inset:-40%; z-index:0; opacity:.5; pointer-events:none;
  background: radial-gradient(closest-side, rgba(255,255,255,.5), transparent 70%);
  animation: aura 9s ease-in-out infinite alternate;
}
.tile.hero > *{ position:relative; z-index:1; }
.tile.hero .d, .tile.hero .muted, .tile.hero .t{ color: rgba(255,255,255,.95) !important; }
@keyframes aura{ from{ transform: translate(-14%,-8%) scale(1);} to{ transform: translate(16%,10%) scale(1.25);} }

/* ---------- КНОПКИ ---------- */
button, .btn, .save, .newbtn, .addrow, .cvbig, .cvnext, .mrow, .mcancel, .cvchip, .tab, .mbtn{
  font-family: inherit;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur), filter var(--dur), background var(--dur);
}
button:active, .btn:active, .save:active, .newbtn:active, .cvbig:active, .cvnext:active, .cvchip:active, .tab:active{ transform: scale(.96); }
.save, .newbtn, .cvbig, .cvnext, .btn.p{ box-shadow: var(--sh-2), var(--hl); }
.save:hover, .newbtn:hover, .cvbig:hover, .cvnext:hover{ filter: brightness(1.05); box-shadow: var(--sh-3); }
:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 12px; }
.top a, button, .chip, .mbtn, .mic, .tab{ min-height: 42px; }

/* ---------- ПОЛЯ ВВОДА (читаемо, тёплый фон) ---------- */
textarea, input[type=text], input[type=password], .txt, .spin, .ledit{
  color: var(--txt) !important; font-size: var(--fs-base) !important; line-height:1.5 !important;
  background: #fffdf8 !important; border:1px solid var(--line) !important; border-radius: var(--r-sm) !important;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
textarea::placeholder, input::placeholder{ color: var(--faint) !important; }
textarea:focus, input:focus, .txt:focus, .spin:focus, .ledit:focus{
  border-color: var(--accent) !important; box-shadow: var(--ring); background:#fff !important;
}

/* ---------- ТАБЛИЦЫ ---------- */
.grid{ border-radius: var(--r-sm) !important; box-shadow: var(--sh-1); overflow:hidden; }
.gh, .mgh{ background: linear-gradient(180deg,#efe4cc,#e7dabd) !important; color:#5a4a24 !important;
  font-weight:800 !important; letter-spacing:.02em; }
.gc, .mgc{ color: var(--ink-2) !important; }

/* ---------- ЦИТАТЫ (сакральные) ---------- */
.quote{ position:relative; border:1px solid var(--line) !important; border-left:3px solid var(--gold) !important;
  color: var(--ink-2) !important; font-family: var(--font-serif); font-size: var(--fs-lg) !important;
  line-height:1.45; padding: 14px 16px 14px 18px !important; }
.quote::before{ content:"“"; position:absolute; left:8px; top:-6px; font-family:var(--font-serif);
  font-size:2.4em; color: var(--gold-2); opacity:.4; }

/* активные слова-термины */
.term{ color: var(--term) !important; border-bottom:1.5px dashed var(--term); font-weight:600; }

/* ---------- ПЛАШКИ ВЫЕЗЖАЮТ (scroll-reveal) ---------- */
:root.ux .reveal{ opacity:0; transform: translateY(22px) scale(.98); transition: opacity .7s var(--ease), transform .7s var(--ease); }
:root.ux .reveal.in{ opacity:1; transform:none; }

/* ---------- RIPPLE ---------- */
.ripple{ position:absolute; border-radius:50%; transform: translate(-50%,-50%) scale(0); pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%); animation: ripple .62s var(--ease) forwards; }
@keyframes ripple{ to{ transform: translate(-50%,-50%) scale(1); opacity:0; } }

/* ---------- SHEET-МОДАЛКИ ---------- */
.ov{ backdrop-filter: blur(7px) saturate(140%); -webkit-backdrop-filter: blur(7px) saturate(140%); background: rgba(32,24,10,.42) !important; }
.sheet, .mbox{ animation: sheetUp .36s var(--ease-spring) both; box-shadow: var(--sh-3) !important; border-radius: var(--r-xl) var(--r-xl) 0 0 !important; }
@keyframes sheetUp{ from{ transform: translateY(30px); opacity:.3 } to{ transform:none; opacity:1 } }

/* ---------- СКРОЛЛБАР ---------- */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:#d6cbb0; border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#c9bd9d; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  :root.ux .reveal{ opacity:1 !important; transform:none !important; }
  .wrap{ animation:none; } .tile.hero::before{ animation:none; }
}