/* ============================================================
   IT‑Career‑Gym (.tech) — скин «Whiteboard» для компонентов g-
   Подключается ПОСЛЕ ui.css (и ui-extra.css, если он есть на странице).
   Меняет только внешний вид: маркер по доске днём, мел ночью — контуры 2px,
   пунктир у второстепенного, стикеры для статусов и тостов, скотч на всплывающем,
   рукописные подписи Caveat. Разметка и поведение — те же, что на itcareergym.ru.
   ============================================================ */

/* ---------- кнопки: как .btn сайта — 2px, наклон на hover, «тень-скотч» ---------- */
.g-btn { border-width: 2px; border-radius: var(--radius-btn); font-size: var(--fs-sm); }
.g-btn--primary:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 10px 0 -4px var(--tape); }
.g-btn--secondary { background: transparent; border-style: dashed; border-color: var(--ln); }
.g-btn--secondary:hover { border-style: solid; border-color: var(--ln); background: var(--surface2); }
.g-btn--secondary[aria-pressed="true"] { border-style: solid; background: var(--note-y); color: var(--ink); border-color: var(--ink); }
/* жёлтая «стикерная» кнопка — второе по важности действие на промо (как .btn-gold) */
.g-btn--note { background: var(--note-y); color: var(--ink); border-color: var(--ink); }
.g-btn--note:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 10px 0 -4px var(--tape); }

/* ---------- иконка модуля: круг, нарисованный маркером ---------- */
.g-ico { border: 2px solid currentColor; border-radius: 50%; background: transparent; }
a.g-card:hover .g-ico, .g-card--interactive:hover .g-ico { background: transparent; color: var(--hl); transform: translateY(-3px) rotate(-8deg) scale(1.08); }

/* ---------- карточка: бумага на доске ---------- */
.g-card { border: 2px solid var(--ln); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
a.g-card:hover, .g-card--interactive:hover { border-color: var(--hl); transform: translateY(-5px); }
.g-card--accent { border-color: var(--hl); }
/* скотч сверху — для карточек-«вырезок» (промо, отзывы, тарифы) */
.g-card--tape::before { content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px; margin-left: -32px; background: var(--tape); transform: rotate(-3deg); border-radius: 2px; pointer-events: none; }
/* стикер: жёлтый / голубой / зелёный, слегка наклонён */
.g-card--note { border: 0; border-radius: 3px; color: var(--ink); box-shadow: var(--note-shadow); background: var(--note-y); transform: rotate(-1deg); }
.g-card--note .g-card__text { color: #3d3a2a; }
.g-card--note.g-card--b { background: var(--note-b); transform: rotate(1deg); }
.g-card--note.g-card--g { background: var(--note-g); transform: rotate(-0.6deg); }

/* ---------- eyebrow: рукописная подпись над заголовком (как .wb-hand) ---------- */
.g-eyebrow { font: 700 1.5rem/1 var(--font-hand); text-transform: none; letter-spacing: 0; color: var(--hl); }
.g-eyebrow::before { display: none; }
.g-h1 em { color: var(--hl); }

/* ---------- поля: контур 2px, фокус — синий маркер ---------- */
.g-input, .g-select, .g-textarea { border-width: 2px; }
.g-input:focus, .g-select:focus, .g-textarea:focus { border-color: var(--accent2); box-shadow: 0 0 0 3px var(--color-selection); }

/* ---------- метки и чипы: пунктирная «пилюля», выбранный фильтр — стикер ---------- */
.g-label { border-radius: var(--radius-pill); }
/* двойной класс: иначе button.g-label { border: 0 } из ui.css снимает пунктир у меток-кнопок */
.g-label.g-label--outline { box-shadow: none; border: 1.5px dashed var(--ln); }
button.g-label[aria-pressed="true"] { background: var(--note-y); color: var(--ink); transform: rotate(-1deg); }
.g-chip { border: 1.5px dashed var(--ln); }

/* ---------- сообщения: стикер на доске, без жирной полосы слева ---------- */
.g-alert { border: 0; border-radius: 3px; box-shadow: var(--note-shadow); }
:root[data-theme="night"] .g-alert { box-shadow: none; border: 1.5px dashed currentColor; border-color: var(--ln-soft); }
.g-alert--inline { box-shadow: none; }

/* ---------- тост: стикер, приклеенный к углу экрана ---------- */
.g-toast { border: 0; border-radius: 3px; background: var(--note-y); color: var(--ink); box-shadow: var(--note-shadow); transform: rotate(-1deg); }
.g-toast--success { background: var(--note-g); }
.g-toast--info { background: var(--note-b); }
.g-toast--danger { background: #ffd2cc; }
.g-toast > .g-i, .g-toast--success > .g-i, .g-toast--warning > .g-i, .g-toast--info > .g-i { color: var(--ink); }
.g-toast--danger > .g-i { color: #8f1c13; }
.g-toast__text { color: #3d3a2a; }
.g-toast__action { color: #8f2b06; }
.g-toast .g-alert__close { color: var(--ink); }

/* ---------- диалог, меню, всплывающее: лист бумаги со скотчем ---------- */
.g-dialog { border: 2px solid var(--ln); border-radius: var(--radius-card); overflow: visible; }
.g-dialog__foot { border-top: 2px dashed var(--ln-soft); background: transparent; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.g-dialog[open]::before { content: ""; position: absolute; top: -11px; left: 50%; width: 72px; height: 20px; margin-left: -36px; background: var(--tape); transform: rotate(-2deg); border-radius: 2px; }
.g-menu, .g-popover { border: 2px solid var(--ln); border-radius: var(--radius-card); }

/* ---------- вкладки: подчёркивание маркером ---------- */
.g-tabs { border-bottom: 2px dashed var(--ln-soft); }

/* ---------- таблица: доска в клетку ---------- */
.g-table-wrap { border: 2px solid var(--ln); border-radius: var(--radius-card); }
.g-table th { font-family: var(--font-body); font-weight: 700; }

/* ---------- прогресс: штриховка, как XP-полоса на главной ---------- */
.g-track > i, .g-progress:not(.g-progress--success, .g-progress--warning, .g-progress--danger) .g-progress__bar > i { background: repeating-linear-gradient(-45deg, var(--cta) 0 6px, #ff8a57 6px 12px); }

/* ---------- пустое состояние: рисунок маркером ---------- */
.g-empty { border: 2px dashed var(--ln-soft); border-radius: var(--radius-card); }

/* ---------- игра (ui-game.css) по правилам Whiteboard: без лучей, конфетти, лент и градиентов ----------
   Подключать после ui-game.css. Награда — круг, нарисованный маркером, сумма рукой; выделение товара — стикер, не лента. */
.g-reward__burst::before { display: none; }
.g-reward__burst::after { background: transparent; box-shadow: none; border: 2.5px solid var(--g-tint, var(--color-energy)); border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; transform: rotate(-4deg); }
.g-reward__burst .g-i { fill: none; }
.g-reward__amount { font: 700 3rem/1 var(--font-hand); letter-spacing: 0; transform: rotate(-3deg); }
.g-confetti { display: none; }
.g-product__ribbon { background: var(--note-y); color: var(--ink); border-radius: 3px; font: 700 1.1rem/1 var(--font-hand); transform: rotate(-3deg); box-shadow: var(--note-shadow); }
.g-energy.is-unlimited .g-energy__bar > i { background: var(--color-energy); }

/* иконки в карточках игры: не плитка в скруглённом квадрате, а круг, нарисованный маркером (как .g-ico) */
.g-energy__icon, .g-option__icon, .g-product__icon, .g-quest__icon, .g-achievement__icon {
  border-radius: 50%; background: transparent; border: 2px solid currentColor;
}
.g-quest.is-done .g-quest__icon { background: transparent; }

/* ---------- из сверки с UI UX Pro Max: ссылка «к содержимому» — стикер, сводка ошибок — красный стикер ---------- */
.g-skip { background: var(--note-y); color: var(--ink); border-radius: 3px; box-shadow: var(--note-shadow); }
.g-skip:focus, .g-skip:focus-visible { transform: rotate(-1deg); }
.g-error-summary { border: 0; border-radius: 3px; box-shadow: var(--note-shadow); }
:root[data-theme="night"] .g-error-summary { box-shadow: none; border: 2px dashed var(--color-danger); }
.g-chips-more { border-color: var(--ln); }

/* метка-стикер: чуть повёрнута и с тенью, как приклеенная; оглавление — заголовок от руки, линия маркером */
.g-label--note { border-radius: 3px; box-shadow: var(--note-shadow); transform: rotate(-2deg); }
.g-toc__title { font: 700 1.5rem/1 var(--font-hand); }
.g-toc a { border-left-color: var(--ln-soft); color: var(--text2); }
.g-toc a:hover { border-left-color: var(--ln); }
.g-toc a.is-on, .g-toc a[aria-current="true"] { border-left-color: var(--cta); }

/* частые вопросы: номер от руки, линии маркером, у открытого вопроса значок — жёлтый стикер */
.g-faq__list { border-top-color: var(--ln); }
.g-faq__item { border-bottom: 1.5px dashed var(--ln-soft); }
.g-faq__n { font: 700 1.5rem/1.1 var(--font-hand); color: var(--accent); }
.g-faq__mark { border: 2px solid var(--ln); }
details[open] > .g-faq__q .g-faq__mark { background: var(--note-y); border-color: var(--ink); color: var(--ink); }
.g-faq__a { border-left: 2px solid var(--ln-soft); margin-left: calc(1.1rem); padding-left: calc(1.4rem + var(--space-2)); }
@media (max-width: 600px) { .g-faq__a { margin-left: .9rem; padding-left: calc(1.1rem + var(--space-2)); } }