/* ===========================================================
   Gamification Engine — тема-брат к Idea Engine.
   Та же сетка/типографика (style.css), другой акцент: холодный
   аналитический сине-тиловый вместо тёплой терракоты.
   Здесь ТОЛЬКО переопределения и новые элементы движка.
   =========================================================== */

body.gam {
  --accent:       #2E6A86;   /* тил-синий */
  --accent-deep:  #1F4E63;
  --accent-soft:  #DCEAF0;
  --accent-tint:  #EEF5F8;
}

/* брендовая марка под новый акцент */
body.gam .brand-mark {
  background: radial-gradient(circle at 32% 30%, #4E93AE, var(--accent) 60%, var(--accent-deep));
}
body.gam .pipeline:hover .stage-link:hover { background: rgba(46,106,134,.07); }

/* бейдж движка рядом с названием */
body.gam .brand-name::after {
  content: "engine";
  font-family: var(--sans); font-weight: 600; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: 5px; padding: 2px 5px; margin-left: 7px;
  vertical-align: middle;
}

/* переключатель движков */
.switch-link { color: var(--accent-deep); font-weight: 600; }
.switch-link:hover { text-decoration: underline; }

/* переключатель режима */
.mode-switch { display: flex; flex-direction: column; gap: 6px; }
.seg { display: flex; gap: 4px; background: var(--paper-2); border-radius: 9px; padding: 3px; }
.seg button {
  flex: 1; border: none; background: transparent; padding: 7px 8px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft-c); transition: all .15s;
}
.seg button.on { background: var(--card); color: var(--accent-deep); box-shadow: var(--shadow); }
.mode-note { font-size: 11.5px; color: var(--ink-faint); margin: 2px 0 0; line-height: 1.4; }

/* статус-точки шагов в сайдбаре (поверх .stage-num) */
.stage-link .stage-num { position: relative; }
.stage-link.st-draft .stage-num { border-color: #C99A3E; color: #9A7322; }
.stage-link.st-done  .stage-num { background: var(--good); border-color: var(--good); color: #fff; }
.stage-link.st-done.active .stage-num { background: var(--good); border-color: var(--good); }
.stage-dot {
  position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--paper);
}
.stage-link.st-done .stage-dot { background: var(--good); }
.stage-link.st-draft .stage-dot { background: #D8A943; }
.stage-link.st-empty .stage-dot { display: none; }
.stage-count .cmt-tally { color: var(--accent-deep); font-weight: 600; }

/* статус-чип в шапке шага */
.step-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
.step-status b { font-weight: 600; }
.ctx-hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.ctx-hint b { color: var(--ink-soft-c); font-weight: 600; }

/* отрендеренный артефакт шага */
.artifact {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.artifact h1 { font-family: var(--serif); font-size: 22px; margin: 0 0 14px; letter-spacing: -.01em; }
.artifact h2 { font-family: var(--serif); font-size: 17px; margin: 20px 0 8px; }
.artifact p { margin: 8px 0; }
.artifact ul { margin: 8px 0; padding-left: 20px; }
.artifact li { margin: 3px 0; }

/* таблицы аналитики */
.artifact table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13.5px; }
.artifact th, .artifact td {
  border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top;
}
.artifact th {
  background: var(--accent-tint); color: var(--accent-deep); font-weight: 600;
  font-size: 12px; letter-spacing: .01em;
}
.artifact tr:nth-child(even) td { background: #FCFAF5; }

/* бейджи в ячейках */
.bdg { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; letter-spacing: .02em; }
.bdg.ok   { background: var(--good-soft); color: #41572f; }
.bdg.warn { background: #F6E6C8; color: #8a6420; }
.bdg.sml  { background: var(--accent-soft); color: var(--accent-deep); }

/* тред комментариев к шагу */
.step-comments { margin-top: 6px; }
.step-comments .comments-head { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }

/* концепции-ставки */
.bets-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.view-toggle { display: flex; gap: 4px; background: var(--paper-2); border-radius: 9px; padding: 3px; }
.view-toggle button { border: none; background: transparent; padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft-c); }
.view-toggle button.on { background: var(--card); color: var(--accent-deep); box-shadow: var(--shadow); }

.bet-field { margin: 6px 0; font-size: 13.5px; }
.bet-field .bf-lbl { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }

.cmp-table { width: 100%; }
.cmp-table .bdg { white-space: nowrap; }