/* ============================================================
   PPI committee forms — shared styles
   Uses the same slate + teal tokens as the 2027 redesign so the
   forms feel part of the site. Works standalone (no dependency
   on styles.css). Dark by default, light via [data-theme="light"].
   ============================================================ */
:root{
  --bg:#0d1526; --surface:#16213a; --surface-2:#1f2c47;
  --line:#35496f; --line-soft:#26365433;
  --text:#eef2f9; --text-dim:#aebbd4; --text-faint:#8a99b8;
  --teal:#35c4ba; --teal-strong:#5ad6cd; --teal-soft:rgba(53,196,186,.14);
  --munster:#0e63b3; --leinster:#0f8a4d;
  --danger:#e06666; --danger-soft:rgba(224,102,102,.14);
  --ok:#4fca8b;
  --radius:16px; --radius-sm:10px; --tap:46px;
  --ring:0 0 0 3px var(--teal-soft),0 0 0 1px var(--teal);
  --ease:.18s cubic-bezier(.4,0,.2,1);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#eaeef4; --surface:#ffffff; --surface-2:#f3f6fb;
  --line:#d3dbe8; --line-soft:#e6ebf3;
  --text:#152239; --text-dim:#54627d; --text-faint:#7c88a0;
  --teal:#128a83; --teal-strong:#0f746e; --teal-soft:rgba(18,138,131,.12);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.55;
  font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,legend{font-family:'Outfit',sans-serif;margin:0}
a{color:var(--teal-strong)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--ring)}

.skip-link{position:absolute;left:-999px;top:8px;background:var(--teal);color:#00201d;
  padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none;z-index:50}
.skip-link:focus{left:12px}

/* Header */
.c-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.c-header-inner{max-width:820px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.c-brand{display:flex;align-items:center;gap:12px;min-width:0}
.c-mark{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--leinster),var(--teal));color:#fff;font-family:'Outfit';font-weight:800}
.c-logo{width:40px;height:40px;border-radius:10px;object-fit:contain;background:#fff;padding:3px;flex-shrink:0}
.c-brand h1{font-size:1.05rem;line-height:1.15}
.c-brand p{margin:1px 0 0;font-size:.75rem;color:var(--text-dim)}
.c-actions{display:flex;gap:8px;flex-shrink:0}
.c-btn-ghost{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);font-weight:600;font-size:.82rem;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:var(--ease)}
.c-btn-ghost:hover{border-color:var(--teal);color:var(--teal-strong)}

/* Layout */
.c-wrap{max-width:820px;margin:0 auto;padding:26px 20px 70px}
.c-intro{margin-bottom:22px}
.c-intro h2{font-size:1.7rem;font-weight:800;letter-spacing:-.01em}
.c-intro p{margin:8px 0 0;color:var(--text-dim);max-width:62ch}
.c-tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;margin-bottom:22px}
.c-tabs a{min-height:38px;padding:0 16px;display:inline-flex;align-items:center;border-radius:999px;
  color:var(--text-dim);font-weight:600;font-size:.85rem;text-decoration:none;transition:var(--ease)}
.c-tabs a[aria-current="page"]{background:var(--teal);color:#00201d;font-weight:700}

/* Form */
form{display:flex;flex-direction:column;gap:22px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0;background:var(--surface)}
legend{padding:0 8px;font-size:1.05rem;font-weight:700;color:var(--text)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.field-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:.86rem;font-weight:600;color:var(--text)}
label .req{color:var(--teal-strong);margin-left:2px}
.hint{font-size:.76rem;color:var(--text-faint)}
input,select,textarea{width:100%;min-height:var(--tap);padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:.95rem;font-family:inherit}
textarea{min-height:100px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
select{cursor:pointer}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.field-error{font-size:.78rem;color:var(--danger);min-height:0}

/* Radio cards */
.radio-row{display:flex;gap:12px;flex-wrap:wrap}
.radio-card{flex:1;min-width:150px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);transition:var(--ease)}
.radio-card:hover{border-color:var(--teal)}
.radio-card input{width:auto;min-height:0;margin-top:3px;accent-color:var(--teal)}
.radio-card:has(input:checked){border-color:var(--teal);background:var(--teal-soft)}
.radio-card strong{display:block;font-size:.92rem}
.radio-card span{font-size:.78rem;color:var(--text-dim)}

/* Consent + submit */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--text-dim)}
.consent input{width:auto;min-height:0;margin-top:3px;accent-color:var(--teal)}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn-submit{min-height:var(--tap);padding:0 26px;border-radius:11px;border:0;background:var(--teal);
  color:#00201d;font-weight:800;font-size:.95rem;cursor:pointer;transition:var(--ease)}
.btn-submit:hover{background:var(--teal-strong)}
.btn-submit:disabled{opacity:.6;cursor:progress}

/* Feedback */
.banner{padding:13px 16px;border-radius:var(--radius-sm);font-size:.9rem;display:none}
.banner.show{display:block}
.banner.error{background:var(--danger-soft);border:1px solid var(--danger);color:var(--text)}
.success-panel{display:none;text-align:center;padding:44px 24px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
.success-panel.show{display:block}
.success-panel .tick{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ok) 20%,var(--surface-2));color:var(--ok);font-size:2rem}
.success-panel h2{font-size:1.4rem;margin-bottom:8px}
.success-panel p{color:var(--text-dim);max-width:48ch;margin:0 auto 18px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
footer{max-width:820px;margin:0 auto;padding:0 20px 40px;color:var(--text-faint);font-size:.78rem;text-align:center}

/* =====================================================================
   Application workspace — county -> clubs -> competitions
   ===================================================================== */
.workspace{ margin-top:6px; }
.workspace-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.workspace-head h3{ font-size:1.15rem; }
.progress-line{ margin:0; color:var(--text-dim); font-size:.85rem; }

.club-list{ display:flex; flex-direction:column; gap:10px; }
.club-row{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; }
.club-row.is-done{ border-color:color-mix(in srgb, var(--ok) 45%, var(--line)); }

.club-head{ display:flex; align-items:center; gap:12px; padding:12px 14px; }
.club-name{ flex:1; font-weight:700; }
.club-status{ font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px;
  background:var(--surface-2); color:var(--text-faint); white-space:nowrap; }
.club-row.is-done .club-status{ background:var(--ok); color:#06301f; }
.club-toggle{ min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text); font-weight:600; font-size:.82rem; cursor:pointer; }
.club-toggle:hover{ border-color:var(--teal); color:var(--teal-strong); }

.club-panel{ display:flex; flex-direction:column; gap:12px; padding:14px; border-top:1px solid var(--line); }
.panel-note{ margin:0; color:var(--text-dim); font-size:.85rem; }

.competitions{ display:flex; flex-direction:column; gap:12px; }
.comp-block{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; background:var(--surface-2); }
.comp-head{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:.92rem; margin-bottom:10px; }
.comp-block .field label{ font-size:.82rem; }
.comp-block .req{ color:var(--teal-strong); }
.remove-comp{ background:transparent; border:1px solid var(--line); color:var(--text-dim);
  font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:8px; cursor:pointer; }
.remove-comp:hover{ border-color:var(--danger); color:var(--danger); }

.btn-add-comp{ align-self:flex-start; background:transparent; border:1px dashed var(--line);
  color:var(--teal-strong); font-weight:600; padding:8px 14px; border-radius:9px; cursor:pointer; }
.btn-add-comp:hover:not(:disabled){ border-color:var(--teal); }
.btn-add-comp:disabled{ opacity:.5; cursor:default; }
.btn-add-club{ width:100%; margin-top:12px; background:transparent; border:1px dashed var(--line);
  color:var(--text-dim); font-weight:600; padding:11px 14px; border-radius:10px; cursor:pointer; }
.btn-add-club:hover{ border-color:var(--teal); color:var(--teal-strong); }

.comp-error{ margin:0; }
.banner.ok{ background:color-mix(in srgb, var(--ok) 16%, var(--surface)); border:1px solid var(--ok); color:var(--text); }

/* CB row pinned at top of its county, and the closing-date note */
.club-row.is-cb{ border-color:color-mix(in srgb, var(--teal) 40%, var(--line)); background:color-mix(in srgb, var(--teal) 6%, var(--surface)); }
.cb-tag{ font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--teal-strong); border:1px solid var(--teal); border-radius:999px; padding:2px 8px; }
.deadline-note{ margin:0 0 18px; font-size:.85rem; color:var(--text-dim);
  border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:8px; padding:9px 12px; background:var(--surface); }
.deadline-note.closed{ border-left-color:var(--danger); color:var(--text); }