/* ============================================================
   eeg-check.css - CBAM & GHG readiness check component
   Loaded only on the readiness-check pages. Uses the site's own
   tokens so the component inherits the design system.
   ============================================================ */

.rc{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) * 2);
  box-shadow:var(--shadow);
  padding:clamp(24px, 4vw, 48px);
  max-width:820px;
  margin:0 auto;
}

/* Before the script initialises, every question is shown as plain
   text. That keeps the page readable without JavaScript. */
.rc:not([data-rc-ready]) .rc-q[hidden]{ display:block }
.rc:not([data-rc-ready]) .rc-head,
.rc:not([data-rc-ready]) .rc-nav{ display:none }

.rc-head{ margin-bottom:28px }
.rc-status{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.rc-status strong{ color:var(--accent-700) }
.rc-progress{
  height:3px;
  background:var(--accent-100);
  border-radius:3px;
  overflow:hidden;
}
.rc-progress-fill{
  display:block;
  height:100%;
  width:20%;
  background:linear-gradient(90deg, var(--accent-600), var(--accent-400));
  border-radius:3px;
  transition:width .5s cubic-bezier(.22,.85,.28,1);
}

.rc-q{ border:0; margin:0; padding:0 }
.rc-q legend{
  font-family:var(--serif);
  font-size:clamp(22px, 2.6vw, 30px);
  line-height:1.25;
  color:var(--ink);
  padding:0;
  margin-bottom:22px;
}
.rc:not([data-rc-ready]) .rc-q{ margin-bottom:34px }

.rc-options{ display:grid; gap:10px }
.rc-option{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  background:var(--white);
  transition:border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.22,.85,.28,1);
}
.rc-option:hover{ border-color:var(--accent-400); transform:translateY(-2px) }
.rc-option input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin-top:2px;
  border:2px solid var(--accent-300);
  border-radius:50%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rc-option input:checked{
  border-color:var(--accent-600);
  box-shadow:inset 0 0 0 4px var(--white), inset 0 0 0 12px var(--accent-600);
}
.rc-option input:focus-visible{ outline:2px solid var(--accent-600); outline-offset:3px }
.rc-option:has(input:checked){
  border-color:var(--accent-600);
  background:var(--paper);
}
.rc-option span{ font-size:15.5px; line-height:1.5; color:var(--ink) }

/* .button sets its own display, which outranks the UA rule for
   [hidden]; this makes the attribute authoritative inside the tool. */
.rc [hidden]:not(.rc-q){ display:none !important }

.rc-nav{ display:flex; gap:12px; margin-top:30px; align-items:center }
.rc-nav .button[disabled]{ opacity:.4; pointer-events:none }

/* -- Result ---------------------------------------------------- */
.rc-result-top{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:26px }
.rc-dial{
  flex:0 0 auto;
  width:122px;
  height:122px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(var(--accent-600) calc(var(--rc-pct, 0) * 1%), var(--accent-100) 0);
  transition:background .9s cubic-bezier(.22,.85,.28,1);
}
.rc-dial-inner{
  width:96px;
  height:96px;
  border-radius:50%;
  background:var(--white);
  display:grid;
  place-items:center;
  text-align:center;
  line-height:1.05;
}
.rc-dial-inner b{ font-family:var(--serif); font-size:30px; color:var(--accent-700); display:block }
.rc-dial-inner em{ font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.rc-tier{ font-family:var(--serif); font-size:clamp(24px, 3vw, 32px); line-height:1.2; margin:0 0 8px; color:var(--ink) }
.rc-tier-lead{ margin:0; color:var(--muted); font-size:16px; line-height:1.6; max-width:44ch }

.rc-flags{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:12px }
.rc-flags li{
  position:relative;
  padding:14px 18px 14px 46px;
  background:var(--paper);
  border-radius:var(--radius);
  border-left:3px solid var(--accent-500);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
}
.rc-flags li::before{
  content:"!";
  position:absolute;
  left:16px;
  top:14px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--accent-600);
  color:var(--white);
  font-size:12px;
  font-weight:700;
  display:grid;
  place-items:center;
}
[dir="rtl"] .rc-flags li{
  padding:14px 46px 14px 18px;
  border-left:0;
  border-right:3px solid var(--accent-500);
}
[dir="rtl"] .rc-flags li::before{ left:auto; right:16px }

.rc-cta{
  margin-top:8px;
  padding:26px;
  border-radius:var(--radius);
  background:var(--accent-900);
  color:var(--cream);
}
.rc-cta h3{ font-family:var(--serif); font-size:23px; margin:0 0 8px; color:#fff; line-height:1.25 }
.rc-cta p{ margin:0 0 18px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.78) }
.rc-cta .button{ margin-inline-end:10px; margin-bottom:8px }
.rc-cta .button.secondary{ background:transparent; border-color:rgba(255,255,255,.42); color:#fff }
.rc-cta .button.secondary:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff }
.rc-restart{
  background:none;
  border:0;
  padding:0;
  margin-top:18px;
  color:var(--muted);
  font-size:14px;
  text-decoration:underline;
  cursor:pointer;
}

/* -- Dates and notes ------------------------------------------- */
.rc-dates{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px; margin-bottom:26px }
.rc-date{
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--accent-600);
  border-radius:var(--radius);
  padding:22px;
}
.rc-date strong{ display:block; font-family:var(--serif); font-size:24px; color:var(--accent-700); margin-bottom:8px }
.rc-date span{ font-size:14.5px; line-height:1.6; color:var(--muted) }
.rc-note{ font-size:14px; line-height:1.7; color:var(--muted); max-width:78ch; margin:0 0 14px }
.rc-note strong{ color:var(--ink) }

@media (prefers-reduced-motion: reduce){
  .rc-option,
  .rc-progress-fill,
  .rc-dial{ transition:none }
  .rc-option:hover{ transform:none }
}