/* Responsible-gambling / account-protection panel (EPIC 8). Self-contained styles for #rgPanel built by
   responsible-gambling.js. Uses the shared design tokens (tokens.css). The lead wires the <link>. */

.rg-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

/* Active self-exclusion / cooldown banner. */
.rg-banner {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--warn);
  background: var(--warn-soft, rgba(255, 180, 60, 0.08));
}
.rg-banner-ic { flex: 0 0 auto; width: 24px; height: 24px; color: var(--warn); }
.rg-banner-ic svg { width: 100%; height: 100%; }
.rg-banner-sub { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* Sections. Each control is a lifted CARD (hairline shadow) rather than a flat
   bordered box, so the page reads as layered surfaces, not a uniform stack. */
.rg-sec {
  padding: var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}
.rg-sec-h { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }

/* HIERARCHY: "Spending limits" is the PRIMARY, everyday tool, so it is the
   dominant surface — a brand left-edge (the same edge-anchor convention the
   destructive self-exclusion uses in red), stronger elevation, a larger radius,
   and a scale-contrast heading. This makes the page read primary → secondary
   (take-a-break, plain) → destructive (self-exclusion, red) instead of three
   equal-weight boxes. */
#rgSecLimits {
  border-left: 4px solid var(--brand);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-2);
}
/* Decisive scale step (22px vs the 14px siblings ≈ 1.6×) so the primary reads
   dominant on SIZE alone, not only on elevation. */
#rgSecLimits > .rg-sec-h { font-size: var(--fs-xl); }
.rg-sec .muted { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
/* SEMANTIC COLOR: self-exclusion is DESTRUCTIVE (a hard-to-reverse / permanent lock), so it reads in the
   DANGER red — distinct from the amber (--warn) used by the informational enforcement note (.rg-enforce-note)
   and the active-break banner (.rg-banner). Amber = caution/info; red = destructive. A stronger left edge +
   a faint red-tinted surface set the most consequential action apart so it never reads as just another note. */
.rg-danger {
  border-color: var(--lose);
  border-left: 4px solid var(--lose);
  background: color-mix(in oklab, var(--lose) 12%, var(--surface-2));
}
/* NOTE: the danger is conveyed by the red LEFT EDGE + tint (non-text UI, ≥3:1) — NOT by red heading text.
   --lose (#f43f5e) as text on this surface is only ~3.4:1 (fails AA 4.5:1), so the heading keeps the default
   high-contrast --fg; colour is not the sole cue (the "Self-exclude" label + confirm-modal gate carry it). */

/* --------------------------------------------------------------------------
   Intro trio -> compact on-page anchor NAV (audit de-dup). The three static
   intro cards used to repeat the three control sections verbatim (each tool
   described twice). rg.js strips the duplicated `.rg-d` copy and tags the row
   `.rg-tools--nav`; here we restyle it as a compact segmented chip row that
   simply jumps to the real section. Scoped to #view-responsible so it only
   overrides the sprawling default `.rg-tools`/`.rg-tool` on this page.
   -------------------------------------------------------------------------- */
#view-responsible .rg-tools--nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
#view-responsible .rg-tools--nav .rg-tool {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                 /* real tap target */
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  text-align: center;
}
#view-responsible .rg-tools--nav .rg-tool:hover,
#view-responsible .rg-tools--nav .rg-tool:focus-visible {
  border-color: var(--line-3);
  background: var(--surface-3);
}
#view-responsible .rg-tools--nav .rg-tool b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
#view-responsible .rg-tools--nav .rg-tool .rg-ic { color: var(--muted); font-size: 16px; }
/* Trailing "jump down" affordance so the chips read as navigation, not controls. */
#view-responsible .rg-tools--nav .rg-tool::after {
  content: "\2193";                 /* downwards arrow */
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1;
}
@media (max-width: 560px) {
  #view-responsible .rg-tools--nav { flex-direction: column; }
}

/* Limits form — tidy 2-column grid (label · width-capped control), not a stack of wide boxes. */
.rg-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.rg-field {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 320px);
  align-items: start;
  gap: var(--sp-2) var(--sp-4);
}
.rg-label { font-weight: 600; font-size: var(--fs-sm); padding-top: var(--sp-2); }
.rg-field-control { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.rg-input {
  width: 100%;
  max-width: 320px;                 /* cap: no more full-width sprawl */
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: inherit;
  font: inherit;
}
.rg-current { color: var(--muted); font-size: var(--fs-xs); }
.rg-clear { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.rg-clear-cb { width: 16px; height: 16px; }

/* Narrow: collapse the grid to a single column so labels sit above their controls. */
@media (max-width: 560px) {
  .rg-field { grid-template-columns: 1fr; }
  .rg-label { padding-top: 0; }
  .rg-input { max-width: none; }
}

.rg-save { align-self: flex-start; }
.rg-status { min-height: 1.2em; font-size: var(--fs-sm); }
.rg-status.err { color: var(--warn); }

/* --------------------------------------------------------------------------
   Take-a-break / self-exclusion choices as clear SEGMENTED TILES (audit: real
   >=44px tap targets, two lines: choice + a plain-language sub-line). Replaces
   the small min-width:90px buttons. Behaviour/handlers unchanged.
   -------------------------------------------------------------------------- */
.rg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
.rg-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 56px;                 /* comfortably >=44px */
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  text-align: left;
  line-height: 1.25;
}
.rg-tile-main { font-weight: var(--fw-semi); font-size: var(--fs-md); }
.rg-tile-sub { color: var(--muted); font-size: var(--fs-xs); }
.rg-tile.danger .rg-tile-sub { color: inherit; opacity: .85; }

/* Permanent self-exclusion is the MOST SEVERE action, so it is the QUIETEST by
   default (not a loud filled button that out-shouts the primary "Spending
   limits" card). A ghost outline with a danger-red border + faint red tint marks
   its severity; the danger cue is the red EDGE (non-text, ≥3:1) while the text
   stays high-contrast --fg (never ~3.4:1 red-on-surface). It fills red only on
   hover/focus — reachable, but never inviting. */
/* .rg-tile.rg-exclude-perm (0,0,2,0) intentionally out-specifies button.ghost
   (0,0,1,1) so the border/background below win regardless of stylesheet order. */
.rg-tile.rg-exclude-perm {
  border-color: var(--lose);
  background: color-mix(in oklab, var(--lose) 10%, var(--surface-3));
}
.rg-tile.rg-exclude-perm:hover,
.rg-tile.rg-exclude-perm:focus-visible {
  background: linear-gradient(180deg, var(--lose), #e23a57);
  border-color: var(--lose);
  color: #fff;
}
.rg-tile.rg-exclude-perm:hover .rg-tile-sub,
.rg-tile.rg-exclude-perm:focus-visible .rg-tile-sub { color: #fff; opacity: .9; }

/* Pending loosenings. */
.rg-pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rg-pending-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.rg-pending-label { font-weight: 600; font-size: var(--fs-sm); }
.rg-pending-when { color: var(--muted); font-size: var(--fs-xs); margin-left: auto; }
.rg-cancel { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); }

@media (max-width: 560px) {
  .rg-pending-when { margin-left: 0; width: 100%; }
}

/* Point-of-action enforcement-honesty note (audit: trust). Prominent, never a soft badge. */
.rg-enforce-note {
  display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-2) 0;
  padding: var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--warn); background: var(--warn-soft, rgba(255, 180, 60, 0.08));
  font-size: var(--fs-sm); color: var(--fg-dim); line-height: 1.5;
}
.rg-enforce-ic { flex: none; color: var(--warn); line-height: 1; }
.rg-enforce-ic svg { width: 18px; height: 18px; }

/* One-shot highlight when an intro card jumps to its matching section. */
.rg-jumped {
  animation: rgJump 1.6s var(--ease-out, ease) 1;
  border-radius: var(--r-md);
}
@keyframes rgJump {
  0% { box-shadow: 0 0 0 2px var(--brand-glow, rgba(124, 92, 255, .5)); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) { .rg-jumped { animation: none; } }