/* training — #/training (training.rs), plus the sticky action bar that the Build and My companies
   tabs share (.summary). Layout and game-art presentation only; see docs/DESIGN.md. */
@layer pages {
  /* Game art floats on its --surface-2 tile: a dark drop shadow at night, a soft one on paper. */

  /* ── The strength card: the player's own number, so it carries a faint brand light ── */
  .training .power { display: flex; align-items: center; gap: var(--sp-6); background-image: linear-gradient(120deg, var(--brand-soft), transparent 42%); }
  .training .power-icon { display: grid; place-items: center; flex: none; width: 104px; height: 104px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .training .power-icon img { width: 76px; height: 76px; object-fit: contain; filter: var(--art-shadow); }
  .training .power-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
  .training .power-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
  .training .power-stat { display: flex; flex-direction: column; gap: 6px; }
  .training .dmg { align-items: flex-end; text-align: right; }
  .training .tier-row { display: flex; align-items: center; gap: var(--sp-4); }
  .training .tier-row .grow { display: flex; flex-direction: column; gap: 6px; }
  .training .tier-text { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
  .training .tier-text b { color: var(--text); }
  .training .tier-badge { width: 44px; height: 52px; object-fit: contain; flex: none; filter: var(--art-shadow); transition: transform var(--t-base) var(--ease); }
  .training .tier-badge:hover { transform: translateY(-2px); }
  .training .tier-badge.locked { opacity: .7; }

  /* ── The grounds: one card each, the selectable picture on top, the upgrade in its foot ── */
  .training .grounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .training .ground-cell { display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--t-base), box-shadow var(--t-base); }
  .training .ground { display: grid; grid-template-columns: 208px minmax(0, 1fr); align-items: stretch; text-align: left; color: inherit; transition: background-color var(--t-fast); }
  .training .ground:hover:not(:disabled) { background: var(--surface-2); }
  .training .ground:disabled { cursor: default; }
  .training .ground .art { position: relative; display: grid; place-items: center; min-height: 148px; margin: var(--sp-3) 0 var(--sp-3) var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); }
  .training .ground .art img { width: 184px; height: 116px; object-fit: contain; filter: var(--art-shadow); transition: transform var(--t-slow) var(--ease); }
  .training .ground:hover:not(:disabled) .art img { transform: translateY(-3px) scale(1.04); }
  .training .ground .info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); min-width: 0; }
  .training .quality { color: var(--gold-text); font-size: var(--fs-md); letter-spacing: .12em; line-height: 1; }
  .training .numbers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-1); }
  /* The tick: an empty ring until the ground is chosen. */
  .training .pick { position: absolute; top: var(--sp-2); left: var(--sp-2); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    color: transparent; background: var(--surface-overlay); border: 2px solid var(--border-strong); box-shadow: var(--shadow-1);
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-base) var(--ease); }
  .training .ground:hover .pick { border-color: var(--brand-border); }
  .training .ground-cell.selected .pick { color: var(--on-brand); background: var(--brand); border-color: var(--brand-edge); transform: scale(1.08); }
  .training .done-pill { position: absolute; top: var(--sp-2); left: var(--sp-2); }
  .training .ground-cell.done .art img { opacity: .6; filter: var(--art-shadow) saturate(.4); }
  .training .ground-cell.done .info { opacity: .7; }
  .training .upgrade { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: auto;
    padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-subtle); }
  .training .upgrade.maxed { justify-content: flex-start; }
  .training .effect { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .training .effect b { font-size: var(--fs-ui); color: var(--green-text); font-variant-numeric: tabular-nums; }
  .training .sk-ground { height: 236px; border-radius: var(--r-lg); }

  /* ── The sticky action bar (training, building, working): a floating panel above the page ── */
  :is(.training, .companies) .summary { position: sticky; bottom: var(--sp-4); z-index: 20; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); border-radius: var(--r-lg); background: var(--surface-overlay); border: 1px solid var(--border); box-shadow: var(--shadow-3), var(--highlight); }
  :is(.training, .companies) .sum-items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-8); min-width: 0; }
  :is(.training, .companies) .sum { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  :is(.training, .companies) .sum b { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
  :is(.training, .companies) .sum b img, :is(.training, .companies) .sum b .icon { width: 22px; height: 22px; object-fit: contain; flex: none; }
  :is(.training, .companies) .sum b .icon { color: var(--text-3); }
  :is(.training, .companies) .summary .btn.go { min-width: 200px; }

  /* ── Narrower screens ── */
  @media (max-width: 1000px) {
    .training .grounds { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    /* Above the phone tab bar. */
    :is(.training, .companies) .summary { bottom: calc(var(--tabbar-h) + var(--sp-2) + env(safe-area-inset-bottom)); padding: var(--sp-3); }
    :is(.training, .companies) .summary .btn.go { width: 100%; min-width: 0; }
    :is(.training, .companies) .sum-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); width: 100%; }
    :is(.training, .companies) .sum-items .outs { grid-column: 1 / -1; }
    :is(.training, .companies) .sum b.t-stat { font-size: var(--fs-h3); }
    :is(.training, .companies) .sum b img, :is(.training, .companies) .sum b .icon { width: 18px; height: 18px; }
    :is(.training, .companies) .sum .t-overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  }
  @media (max-width: 560px) {
    .training .power { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
    .training .power-icon { width: 72px; height: 72px; }
    .training .power-icon img { width: 52px; height: 52px; }
    .training .dmg { align-items: flex-start; text-align: left; }
    .training .ground { grid-template-columns: 132px minmax(0, 1fr); }
    .training .ground .art { min-height: 112px; margin: var(--sp-2) 0 var(--sp-2) var(--sp-2); }
    .training .ground .art img { width: 120px; height: 76px; }
    .training .ground .info { padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
    .training .done-pill { top: auto; bottom: var(--sp-2); left: 50%; transform: translateX(-50%); }
    .training .upgrade { padding: var(--sp-3) var(--sp-4); }
    .training .upgrade .btn { width: 100%; }
    .training .section-head .btn { width: 100%; }
  }
}