/* ═══════════════════════════════════════════
   CLOCKWORK BALLET — clean page stylesheet
   v2026-06-14e

   Root /styles.css owns:
   - tokens and palette
   - typography
   - global background / page-bg-img / hex grid
   - shared .panel, .btn, .select, .resource-card, .tag-stat language

   This file only handles Clockwork-specific layout and calculator pieces.
   Search guards: old vault-refresh block removed; no page background override.
   ═══════════════════════════════════════════ */

/* ── LOCAL PAGE WIDTH / HEADER ───────────── */
.clockwork-page .main,
.clockwork-page .page-footer,
.clockwork-page .cw-page-head {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.clockwork-page .main {
  padding-top: 18px;
}

.clockwork-page .cw-page-head {
  padding: 34px 28px 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
}

.clockwork-page .cw-page-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 22px;
  align-items: end;
}

.clockwork-page .cw-page-head__copy {
  max-width: 720px;
}

.clockwork-page .cw-page-title {
  margin: 8px 0 10px;
  color: var(--gold-bright);
  text-shadow: 0 0 34px rgba(230,199,122,.12);
}

.clockwork-page .cw-page-sub {
  max-width: 650px;
  color: var(--text-soft);
}

.clockwork-page .cw-cheat-card {
  min-height: auto;
  align-self: stretch;
  justify-content: center;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(230,199,122,.075), transparent 42%),
    linear-gradient(180deg, rgba(13,24,40,.90), rgba(4,8,15,.96));
  border-color: rgba(200,164,93,.20);
  box-shadow:
    0 14px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(230,199,122,.045);
}

.clockwork-page .cw-cheat-card .resource-card__title {
  font-size: 15px;
}

.clockwork-page .cw-cheat-card .resource-card__body {
  color: var(--text-soft);
}

/* ── SETUP / CONTROLS ───────────────────── */
.clockwork-page .clockwork-setup-panel,
.clockwork-page .reroll-panel,
.clockwork-page .svc-list-wrap {
  margin-bottom: 16px;
}

.clockwork-page .clockwork-panel-head {
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(140,165,210,.12);
}

.clockwork-page .clockwork-panel-head p {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
}

.clockwork-page .ctrls {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  align-items: end;
}

.clockwork-page .ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clockwork-page .ctrl-group label {
  color: var(--gold-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 700;
}

.clockwork-page .select,
.clockwork-page select {
  width: 100%;
  min-height: 38px;
}

.clockwork-page .select:focus,
.clockwork-page select:focus {
  border-color: rgba(230,199,122,.58);
  box-shadow: 0 0 0 3px rgba(230,199,122,.08), inset 0 1px 0 rgba(230,199,122,.06);
}

.clockwork-page .clockwork-node-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 13px;
  border: 1px solid rgba(140,165,210,.13);
  background:
    radial-gradient(circle at 0% 0%, rgba(200,164,93,.055), transparent 36%),
    rgba(4,8,15,.28);
}

.clockwork-page .node-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

.clockwork-page .chk-row {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(140,165,210,.10);
  border-radius: 10px;
  background: rgba(7,17,31,.42);
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.clockwork-page .chk-row:hover {
  color: var(--text-soft);
  border-color: rgba(200,164,93,.26);
  background: rgba(13,24,40,.64);
}

.clockwork-page .chk-row input[type=checkbox] {
  accent-color: var(--gold-primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.clockwork-page .chk-label-text {
  color: var(--text-soft);
  font-weight: 600;
}

.clockwork-page .node-exclusive-note {
  font-size: 10px;
  color: var(--orange-fire);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-blue);
}

/* ── TOOLTIPS ───────────────────────────── */
.clockwork-page .tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.clockwork-page .tip-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(38,58,87,.72);
  border: 1px solid rgba(140,165,210,.2);
  color: var(--blue-light);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: help;
}

.clockwork-page .tip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 260px;
  z-index: 100;
  pointer-events: none;
  padding: 8px 10px;
  border: 1px solid rgba(200,164,93,.28);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(13,24,40,.98), rgba(5,10,22,.99));
  box-shadow: 0 18px 38px rgba(0,0,0,.46);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
  transition: opacity .15s;
}

.clockwork-page .tip:hover .tip-text {
  visibility: visible;
  opacity: 1;
}

/* ── REROLL TOOL ─────────────────────────── */
.clockwork-page .reroll-panel {
  padding: 17px 18px;
}

.clockwork-page .reroll-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--gold-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.clockwork-page .reroll-alice-note {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0;
  text-transform: none;
}

.clockwork-page .link-button {
  border: 0;
  background: transparent;
  color: var(--gold-muted);
  font-size: 11px;
  padding: 0;
}

.clockwork-page .link-button:hover {
  color: var(--gold-bright);
}

.clockwork-page .tier-picker {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.clockwork-page .tier-pick-btn {
  min-width: 52px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-blue);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: border-color .15s, color .15s, background .15s;
}

.clockwork-page .tier-pick-btn:hover { border-color: var(--gold-muted); color: var(--gold-bright); }
.clockwork-page .tier-pick-btn.sel-s { background: rgba(216,90,78,0.15); border-color: var(--red-loss); color: var(--red-loss); }
.clockwork-page .tier-pick-btn.sel-a { background: rgba(167,139,250,0.15); border-color: #a78bfa; color: #a78bfa; }
.clockwork-page .tier-pick-btn.sel-b { background: rgba(96,165,250,0.15); border-color: #60a5fa; color: #60a5fa; }
.clockwork-page .tier-pick-btn.sel-c { background: rgba(94,106,125,0.15); border-color: var(--text-faint); color: var(--text-faint); }
.clockwork-page .tier-pick-btn.sel-f { background: rgba(38,58,87,0.15); border-color: var(--blue-steel); color: var(--blue-steel); }

.clockwork-page .reroll-verdict {
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  background:
    radial-gradient(circle at 8% 0%, rgba(230,199,122,.08), transparent 36%),
    linear-gradient(180deg, rgba(17,31,51,.72), rgba(7,17,31,.9));
}

.clockwork-page .v-keep { border: 1px solid var(--border-soft); }
.clockwork-page .v-reroll { border: 1px solid rgba(96,165,250,0.3); }
.clockwork-page .v-consider { border: 1px solid rgba(242,138,46,0.3); }
.clockwork-page .v-idle { border: 1px solid var(--border-blue); }
.clockwork-page .verdict-label { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.clockwork-page .v-keep .verdict-label { color: var(--gold-bright); }
.clockwork-page .v-reroll .verdict-label { color: #60a5fa; }
.clockwork-page .v-consider .verdict-label { color: var(--orange-fire); }
.clockwork-page .v-idle .verdict-label { color: var(--text-faint); }
.clockwork-page .verdict-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.clockwork-page .verdict-icon { font-size: 22px; flex-shrink: 0; }
.clockwork-page .reroll-pick-label { font-size: 11px; color: var(--text-faint); margin-bottom: 8px; }
.clockwork-page .no-rerolls-note { font-size: 12px; color: var(--text-faint); padding: 4px 0; }

/* ── SERVICE CARD LIST ───────────────────── */
.clockwork-page .svc-list-wrap {
  padding: 10px;
}

.clockwork-page .svc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clockwork-page .tier-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 4px 0;
  padding: 11px 12px 8px;
  border: 0;
  border-top: 1px solid rgba(200,164,93,.24);
  border-radius: 0;
  background: transparent;
}

.clockwork-page .tier-banner:first-child { margin-top: 4px; }
.clockwork-page .tier-banner--roulette { border-top-color: rgba(216,90,78,.45); }

.clockwork-page .tier-banner__label {
  color: var(--gold-muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(230,199,122,.12);
}

.clockwork-page .tier-banner__desc {
  font-size: 12px;
  color: var(--text-faint);
}

.clockwork-page .svc-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin: 0;
  padding: 16px 16px 16px 14px;
  border: 1px solid rgba(200,164,93,.20);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(230,199,122,.085), transparent 38%),
    linear-gradient(180deg, rgba(13,24,40,.96), rgba(5,10,22,.985));
  box-shadow:
    0 14px 40px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(230,199,122,.05);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.clockwork-page .svc-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-muted) 58%, transparent);
  opacity: .55;
}

.clockwork-page .svc-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(230,199,122,.48), transparent 58%);
  opacity: .8;
}

.clockwork-page .svc-card:hover {
  transform: translateY(-1px);
  border-color: rgba(230,199,122,.38);
  box-shadow:
    0 18px 54px rgba(0,0,0,.42),
    0 0 0 1px rgba(230,199,122,.04),
    inset 0 1px 0 rgba(230,199,122,.06);
}

.clockwork-page .svc-card--top {
  border-color: rgba(230,199,122,.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(230,199,122,.15), transparent 39%),
    radial-gradient(circle at 88% 18%, rgba(200,164,93,.08), transparent 30%),
    linear-gradient(180deg, rgba(16,29,49,.98), rgba(5,10,22,.99));
}

.clockwork-page .svc-row-roulette {
  border-color: rgba(216,90,78,.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(216,90,78,.075), transparent 38%),
    linear-gradient(180deg, rgba(19,14,24,.96), rgba(5,10,22,.985));
}

.clockwork-page .svc-row-roulette::before {
  background: linear-gradient(180deg, rgba(216,90,78,.95), rgba(143,63,58,.6), transparent);
}

.clockwork-page .svc-row-id23::before {
  background: linear-gradient(180deg, rgba(47,211,107,.78), rgba(200,164,93,.52), transparent);
}

.clockwork-page .svc-rank,
.clockwork-page .svc-body,
.clockwork-page .svc-ev-block {
  position: relative;
  z-index: 1;
}

.clockwork-page .svc-rank {
  min-width: 34px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(200,164,93,.18);
  border-radius: 999px;
  background: rgba(4,8,15,.36);
  color: var(--gold-muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.clockwork-page .svc-body { flex: 1; min-width: 0; }

.clockwork-page .svc-name {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .01em;
}

.clockwork-page .svc-effect {
  max-width: 780px;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

.clockwork-page .svc-effect-primary {
  font-size: 13px;
  color: #D8DEEA;
  font-weight: 500;
  line-height: 1.4;
}

.clockwork-page .svc-note {
  font-size: 10px;
  color: var(--red-loss);
  margin-top: 3px;
  font-style: italic;
}

.clockwork-page .svc-info {
  font-size: 10px;
  color: var(--blue-light);
  margin-top: 3px;
}

.clockwork-page .svc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(140,165,210,.10);
}

.clockwork-page .svc-tag {
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 600;
}

.clockwork-page .tag-combat { background: rgba(47,211,107,0.1); color: var(--green-recording); border: 1px solid rgba(47,211,107,0.2); }
.clockwork-page .tag-conditional { background: rgba(242,138,46,0.1); color: var(--orange-fire); border: 1px solid rgba(242,138,46,0.2); }
.clockwork-page .tag-nonviable { background: rgba(216,90,78,0.1); color: var(--red-loss); border: 1px solid rgba(216,90,78,0.2); }
.clockwork-page .tag-builddep { background: rgba(147,51,234,0.1); color: #c084fc; border: 1px solid rgba(147,51,234,0.2); }

.clockwork-page .tag-stat,
.clockwork-page .badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 1px solid rgba(140,165,210,.16);
  background: rgba(7,17,31,.7);
}

.clockwork-page .badge-rainbow { background: rgba(147,51,234,0.15); color: #c084fc; border-color: rgba(147,51,234,0.3); }
.clockwork-page .badge-gold { background: rgba(200,164,93,0.12); color: var(--gold-bright); border-color: var(--border-soft); }
.clockwork-page .badge-purple { background: rgba(99,72,165,0.15); color: #a78bfa; border-color: rgba(99,72,165,0.3); }
.clockwork-page .badge-blue { background: rgba(37,99,235,0.1); color: #60a5fa; border-color: rgba(37,99,235,0.2); }

.clockwork-page .tier { font-weight: 700; font-size: 13px; }
.clockwork-page .tier-sp { color: #ff9ef5; text-shadow: 0 0 8px rgba(255,158,245,0.4); }
.clockwork-page .tier-s { color: var(--gold-bright); }
.clockwork-page .tier-a { color: #a78bfa; }
.clockwork-page .tier-b { color: #60a5fa; }
.clockwork-page .tier-c { color: var(--text-faint); }
.clockwork-page .tier-f { color: var(--blue-steel); }

.clockwork-page .svc-tier-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(4,8,15,.42);
  border: 1px solid rgba(140,165,210,.12);
}

.clockwork-page .svc-ev-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 112px;
  padding: 12px;
  border: 1px solid rgba(140,165,210,.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(230,199,122,.07), transparent 50%),
    rgba(4,8,15,.32);
}

.clockwork-page .svc-ev-pct {
  color: var(--gold-bright);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(230,199,122,.12);
}

.clockwork-page .svc-ev-sub {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.clockwork-page .ev-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 5px;
  border-radius: 999px;
  background: rgba(140,165,210,.12);
  overflow: hidden;
}

.clockwork-page .ev-bar {
  height: 5px;
  min-width: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-muted), var(--gold-bright));
  box-shadow: 0 0 14px rgba(230,199,122,.18);
  transition: width .3s;
}

.clockwork-page .ev-val { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; }
.clockwork-page .ev-pos { color: var(--text-soft); }
.clockwork-page .ev-neg { color: var(--red-loss); }
.clockwork-page .ev-zero { color: var(--text-faint); }

/* ── INLINE MECHANIC BLOCKS ─────────────── */
.clockwork-page .roul-block,
.clockwork-page .id23-block {
  margin-top: 8px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(13,24,40,0.74);
}

.clockwork-page .roul-block { border: 1px solid rgba(99,72,165,0.22); }
.clockwork-page .id23-block { border: 1px solid rgba(47,211,107,0.18); }
.clockwork-page .roul-header { font-size: 10px; color: var(--text-faint); margin-bottom: 6px; line-height: 1.4; }
.clockwork-page .roul-row,
.clockwork-page .id23-row { display: flex; gap: 8px; font-size: 11px; padding: 3px 0; border-bottom: 1px solid rgba(140,165,210,0.06); }
.clockwork-page .roul-row:last-of-type,
.clockwork-page .id23-row:last-of-type { border-bottom: none; }
.clockwork-page .roul-row-head { color: var(--text-faint); font-size: 10px; }
.clockwork-page .roul-cog { width: 55px; color: var(--text-muted); }
.clockwork-page .roul-p { width: 65px; color: var(--text-faint); }
.clockwork-page .roul-ev { width: 85px; font-weight: 500; }
.clockwork-page .roul-ev10 { width: 85px; color: var(--text-faint); }
.clockwork-page .roul-v { color: var(--text-faint); }
.clockwork-page .roul-ev.pos { color: var(--green-recording); }
.clockwork-page .roul-ev.neg { color: var(--red-loss); }
.clockwork-page .roul-note { font-size: 10px; color: var(--text-faint); margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(140,165,210,0.06); line-height: 1.4; }
.clockwork-page .id23-outcome { width: 90px; color: var(--text-muted); }
.clockwork-page .id23-prob { width: 55px; color: var(--text-faint); }
.clockwork-page .id23-ev { width: 85px; font-weight: 500; }
.clockwork-page .id23-rating { font-size: 10px; }

.clockwork-page .clockwork-footnote {
  margin: 12px 4px 2px;
  padding: 12px 14px;
  border: 1px solid rgba(140,165,210,.12);
  border-radius: 12px;
  background: rgba(4,8,15,.32);
  color: var(--text-faint);
  font-size: 10.5px;
  line-height: 1.55;
}

/* ── LIGHTBOXES / FOOTER ─────────────────── */
.clockwork-page .page-footer {
  border-top: 1px solid var(--border-soft);
  padding: 20px 28px;
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 36px;
}

.clockwork-page .page-footer a { color: var(--gold-muted); }
.clockwork-page .page-footer a:hover { color: var(--gold-bright); }

.clockwork-page .overlay {
  backdrop-filter: blur(10px);
  background: rgba(4,8,15,.72);
  padding: 18px;
}

.clockwork-page .overlay-panel,
.clockwork-page #id23-lightbox > div,
.clockwork-page #lightbox-overlay > div {
  position: relative;
  border: 1px solid rgba(200,164,93,.24) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(230,199,122,.095), transparent 38%),
    linear-gradient(180deg, rgba(13,24,40,.96), rgba(5,10,22,.985)) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(230,199,122,.06) !important;
  overflow: hidden;
}

.clockwork-page .overlay-close {
  border: 1px solid rgba(200,164,93,.22) !important;
  background: rgba(4,8,15,.48) !important;
  color: var(--gold-muted) !important;
}

/* ── RESPONSIVE ─────────────────────────── */
@media (max-width: 980px) {
  .clockwork-page .cw-page-head__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .clockwork-page .cw-cheat-card {
    max-width: 420px;
  }

  .clockwork-page .ctrls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .clockwork-page .cw-page-head {
    padding: 24px 16px 18px;
  }

  .clockwork-page .main {
    padding: 16px 16px 0;
  }

  .clockwork-page .ctrls,
  .clockwork-page .node-grid {
    grid-template-columns: 1fr;
  }

  .clockwork-page .svc-card {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .clockwork-page .svc-ev-block {
    grid-column: 1 / -1;
    align-items: flex-start;
    min-width: 0;
  }

  /* Lightbox panels — tighten padding on mobile */
  .clockwork-page .overlay-panel {
    padding: 20px 16px !important;
  }

  /* Roulette/ID23 inner grids — allow horizontal scroll if needed */
  .clockwork-page .roul-block,
  .clockwork-page .id23-block {
    overflow-x: auto;
  }
}