/* Complaint Portal (scoped) — minimal, modern, and safe overrides */

/* Simple stack spacing kept from baseline */
.stack > * + * { margin-top: 10px; }

/* Page-scope design tokens */
body#portal {
  --portal-border: #d1d5db;                 /* matches select box border */
  --portal-border-hover: #c8cfda;
  --portal-accent: #2563eb;                 /* brand blue */
  --portal-row-radius: 10px;
  --portal-focus-inset: 0 0 0 2px rgba(2, 6, 23, 0.12) inset;
  --portal-focus-ring:  0 0 0 2px rgba(37, 99, 235, 0.22);
}

/* Remove the section "lines" (card borders) for the first two sections only */
body#portal section.card[aria-labelledby="stateLegend"],
body#portal section.card[aria-labelledby="boardsLegend"] {
  border: none;
  box-shadow: var(--shadow);   /* keep card elevation without border line */
}

/* BOARD LIST LAYOUT (rendered by /assets/app.js into #boards) */
body#portal #boards fieldset { border: none; padding: 0; margin: 0; }
body#portal #boards { display: grid; gap: 8px; }

/* Each option is a boxed row; radio + text live inside the same box */
body#portal #boards .board-option {
  display: grid;
  grid-template-columns: 26px 1fr;   /* blue dot | board text */
  align-items: center;               /* dot vertically aligns with wrapped text */
  gap: 10px;
  padding: 10px 12px;
  margin: 0 8px;                     /* breathing room within the fieldset */
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-row-radius);
  background: #fff;
  cursor: pointer;
}

/* Tidy the native radio */
body#portal #boards .board-option > input[type="radio"] {
  margin: 0;
  justify-self: center;              /* center the blue dot in its column */
}

/* Board name + host */
body#portal #boards .board-name { font-weight: 600; }
body#portal #boards .board-host { display: block; color: var(--muted); font-size: 13px; }

/* Optional badge (kept from baseline) */
body#portal #boards .badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 12px; }
body#portal #boards .badge-warn { background: rgba(220,38,38,.10); color: #b91c1c; border: 1px solid rgba(220,38,38,.25); }

/* Hover affordance */
body#portal #boards .board-option:hover { border-color: var(--portal-border-hover); }

/* Selected state: subtle blue tint with a crisper border (dot stays inside) */
body#portal #boards .board-option:has(> input[type="radio"]:checked) {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.45);
}

/* Keyboard focus: show highlight only on keyboard nav (not mouse click) */
body#portal #boards .board-option:has(> input[type="radio"]:focus-visible) {
  box-shadow: var(--portal-focus-inset), var(--portal-focus-ring);
}

/* Kill any outer fieldset outline that could span too wide */
body#portal #boards:focus,
body#portal #boards *:focus { outline: none; }

/* State select — subtle focus only on keyboard */
body#portal select:focus { outline: none; }
body#portal select:focus-visible {
  box-shadow: var(--portal-focus-inset), var(--portal-focus-ring);
  border-radius: 8px;
}

/* Turnstile spacing (as in baseline) */
body#portal .turnstile-box { min-height: 0; }
body#portal .turnstile-box:empty { display: none; }
/* === Complaint Portal: remove only the fieldset border lines (keep cards) === */

/* Kill the fieldset box lines under the two legends */
body#portal section.card[aria-labelledby="stateLegend"] fieldset,
body#portal section.card[aria-labelledby="boardsLegend"] fieldset {
  border: none !important;   /* removes the rectangle line */
  padding: 0;                /* let internal spacing handle layout */
}

/* Make sure no pseudo “frame” reappears from theme styles */
body#portal section.card[aria-labelledby="stateLegend"] fieldset::before,
body#portal section.card[aria-labelledby="stateLegend"] fieldset::after,
body#portal section.card[aria-labelledby="boardsLegend"] fieldset::before,
body#portal section.card[aria-labelledby="boardsLegend"] fieldset::after {
  content: none !important;
}

/* Keep legend spacing looking intentional without a border */
body#portal section.card[aria-labelledby="stateLegend"] legend,
body#portal section.card[aria-labelledby="boardsLegend"] legend {
  margin-bottom: 8px;        /* tweak if you want tighter/looser */
}

/* Also stop any focus outline from showing on the whole fieldset */
body#portal section.card[aria-labelledby="stateLegend"] fieldset:focus,
body#portal section.card[aria-labelledby="boardsLegend"] fieldset:focus {
  outline: none;
}
/* ===== Complaint Portal compact controls (scoped to this page) ===== */

/* 1) Shrink the state dropdown to its content width (desktop),
      still full-width on small screens */
body#portal #stateSelect {
  display: inline-block;
  width: auto;                 /* shrink to content */
  min-width: 340px;            /* readable target size */
  max-width: 100%;
  padding-right: 36px;         /* room for native chevron */
}
@media (max-width: 640px) {
  body#portal #stateSelect {
    width: 100%;
    min-width: 0;
  }
}

/* 2) Board selection "bubble" hugs its content like a pill */
body#portal #boards .board-option {
  display: inline-grid;        /* shrink-to-fit but preserve grid layout */
  grid-template-columns: 26px 1fr;  /* radio dot | text (same as before) */
  width: fit-content;
  max-width: 100%;
  min-width: 520px;            /* keep options visually even; adjust 500–560px if desired */
  margin: 0 8px;               /* keep existing horizontal breathing room */
  padding-right: 10px;         /* tidy right edge */
}

@media (max-width: 640px) {
  body#portal #boards .board-option {
    min-width: 0;
    width: 100%;               /* expand on small screens */
  }
}

/* === Complaint Portal: tighter board selection pill (CSS-only, scoped) === */

/* State dropdown stays compact on desktop */
body#portal #stateSelect {
  display: inline-block;
  width: auto;
  min-width: 320px;
  max-width: 100%;
  padding-right: 32px;
}

/* Board selection "bubble" — shrink to content width */
body#portal #boards .board-option {
  display: inline-grid !important;      /* override any block rule */
  grid-template-columns: 24px 1fr;      /* radio | text */
  width: fit-content;
  max-width: 100%;
  min-width: 420px;                      /* << controls width; lower to tighten */
  margin: 0 8px;
  padding-right: 10px;
}

/* Responsive: full width on small screens */
@media (max-width: 640px) {
  body#portal #stateSelect {
    width: 100%;
    min-width: 0;
  }
  body#portal #boards .board-option {
    min-width: 0;
    width: 100%;
  }
}
/* === Complaint Portal: center content inside all cards (scoped) === */
body#portal .card {
  text-align: center;
}

/* Center controls inside each card */
body#portal #state-select-wrap { text-align: center; }
body#portal #stateSelect { display: inline-block; }        /* already compact; keeps centered */

body#portal #boards { text-align: center; }
body#portal #boards .board-option {                         /* our pill stays inline */
  display: inline-grid !important;
}

body#portal .card .actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

body#portal #board-check {
  display: flex;
  justify-content: center;
}
/* Complaint Portal: center the card headers */
body#portal .card > h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Complaint Portal: force-center the card section headers */
body#portal main.container > .card > h2,
body#portal .card h2 {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Center legends in the first two cards (state + boards) to match the "Open board site" card */
body#portal section.card fieldset > legend,
body#portal section.card legend.h4 {
  display: block;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Center the hostname under each board name within the selection pill */
body#portal #boards .board-option .board-name,
body#portal #boards .board-option .board-host {
  grid-column: 2;          /* stay in the text column */
  justify-self: center;    /* center horizontally within that column */
  text-align: center;      /* center multi-line text too */
}
/* Portal: bigger primary action button, compact spacing */
body#portal #openBtn {
  font-size: 18px;
  padding: 14px 22px;
  border-radius: 12px;
}

/* Keep it visually dominant in the stack */
body#portal #openBtn { align-self: center; }

/* Optional: slightly tighten the area around the Turnstile box */
body#portal .turnstile-box {
  display: grid;
  place-items: center;
  padding: 6px 0;
}
/* Center the button and widget in the "Open selected board page" section only */
body#portal section[aria-labelledby="openLegend"] .stack {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers both button and widget */
  gap: 10px;
}

/* Bigger button stays centered (already set earlier) */
body#portal #openBtn {
  font-size: 18px;
  padding: 14px 22px;
  border-radius: 12px;
}

/* Turnstile sits right under the button and is centered */
body#portal section[aria-labelledby="openLegend"] .turnstile-box {
  margin-top: 4px;
}

/* Slightly larger on very small screens to keep it tappable */
@media (max-width: 420px) {
  body#portal section[aria-labelledby="openLegend"] .turnstile-scale {
    transform: scale(0.8);
  }
}
/* Portal: elongate Cloudflare Turnstile under the Open button */
body#portal section[aria-labelledby="openLegend"] .cf-turnstile {
  /* make it a touch smaller overall but stretched horizontally */
  transform: scale(0.9) scaleX(1.25);
  transform-origin: center center;

  /* soften the card feel */
  border-radius: 10px;
  overflow: hidden;       /* clips the iframe corners */
  display: inline-block;  /* plays nice with flex centering */
}

/* keep it visually centered with the button above */
body#portal section[aria-labelledby="openLegend"] .turnstile-box {
  display: grid;
  place-items: center;
  margin-top: 6px;
}
/* Center the widget + button as a vertical stack */
body#portal section[aria-labelledby="openLegend"] .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Keep the primary button large */
body#portal #openBtn {
  font-size: 18px;
  padding: 14px 22px;
  border-radius: 12px;
}

/* Let Turnstile render at its native "normal" size; just center it */
body#portal .turnstile-box {
  display: grid;
  place-items: center;
}

/* OPTIONAL: if you want it *slightly* smaller (but same shape), use a gentle scale: */
/*
body#portal .turnstile-box .cf-turnstile {
  transform: scale(0.9);
  transform-origin: center;
}
*/
/* Slightly reduce Turnstile size (keeps proportions) */
body#portal section[aria-labelledby="openLegend"] .turnstile-box {
  display: inline-block;          /* so the scale affects its footprint */
  transform: scale(0.65);          /* try 0.9 → 10% smaller */
  transform-origin: center center; /* no left/right drift */
}

/* Keep the stack centered */
body#portal section[aria-labelledby="openLegend"] .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}