/* ==========================================================================
   Website Grader — light theme, layered on css/home.css
   Every class name and custom property here is a hook grader.js writes to
   (--pct, --ring-color, data-tier, data-priority, data-pass). Renaming any of
   them silently breaks the results rendering, so they're preserved exactly.
   ========================================================================== */

:root{
  /* Status colours are functional, not decorative — they encode pass/fail.
     Tuned darker than the old dark-theme values to hold contrast on white. */
  --score-good:#1A7F4B;
  --score-mid:#B26A00;
  --score-bad:#C4342A;
}

/* ===== Hero ===== */
.grader-hero{ padding:6rem 0 3.5rem; }
.grader-hero-inner{ max-width:52rem; }
.grader-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1.05;
  letter-spacing:-.04em;
  max-width:19ch;
  text-wrap:balance;
}
.grader-sub{
  margin-top:1.5rem;
  max-width:50ch;
  font-size:1.1rem;
  line-height:1.6;
  color:var(--slate);
}

.grader-form{
  margin-top:2.5rem;
  display:flex;
  gap:.75rem;
  max-width:34rem;
}
.grader-form input{
  flex:1;
  min-width:0;
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:.9rem 1.1rem;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.grader-form input::placeholder{ color:#9AA0AA; }
.grader-form input:focus{
  outline:none;
  border-color:var(--blue-bright);
  box-shadow:0 0 0 3.5px rgba(47,139,255,.16);
}

.grader-note{
  margin-top:1rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--slate);
}

.grader-status{
  margin-top:1.75rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.95rem;
  color:var(--slate);
}
.grader-status[hidden]{ display:none; }
.grader-spinner{
  width:17px; height:17px;
  border-radius:50%;
  border:2px solid var(--line-strong);
  border-top-color:var(--blue);
  animation:grader-spin .8s linear infinite;
  flex-shrink:0;
}
@keyframes grader-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .grader-spinner{ animation:none; } }

.grader-error{
  margin-top:1.75rem;
  max-width:34rem;
  padding:1rem 1.15rem;
  border-radius:10px;
  border:1px solid #F0D2CF;
  background:#FDF4F3;
  color:#A32B22;
  font-size:.93rem;
}
.grader-error[hidden]{ display:none; }

/* ===== Results ===== */
.grader-results{ padding:1rem 0 6rem; }
.grader-results[hidden]{ display:none; }
.wrap-narrow{ max-width:52rem; margin:0 auto; padding:0 2rem; }

.grader-result-target{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
}
.grader-result-target span{ color:var(--blue); text-transform:none; }
.cache-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:.18rem .55rem;
  vertical-align:middle;
}
.cache-badge[hidden]{ display:none; }

/* ===== Digital Health Score ===== */
.dhs-header{
  margin-top:2.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.1rem;
}
.dhs-eyebrow{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
}
.score-ring{
  --ring-color:var(--slate);
  width:176px; height:176px;
  border-radius:50%;
  flex-shrink:0;
  background:conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--line) 0);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 1s var(--ease);
}
.score-ring-inner{
  width:146px; height:146px;
  border-radius:50%;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.1rem;
}
.dhs-score-num{
  font-family:var(--font-display);
  font-size:3.3rem;
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ink);
}
.dhs-score-denom{ font-family:var(--font-mono); font-size:.82rem; color:var(--slate); }

.exec-summary{
  margin:2rem auto 0;
  max-width:56ch;
  text-align:center;
  font-size:1.1rem;
  line-height:1.6;
  color:var(--slate);
}

/* ===== Category cards ===== */
.dhs-categories{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.dhs-card{
  --tier-color:var(--slate);
  padding:1.5rem 1.35rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-card);
}
.dhs-card[data-tier="good"]{ --tier-color:var(--score-good); }
.dhs-card[data-tier="mid"]{ --tier-color:var(--score-mid); }
.dhs-card[data-tier="bad"]{ --tier-color:var(--score-bad); }
.dhs-card-top{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.dhs-dot{ width:8px; height:8px; border-radius:50%; background:var(--tier-color); flex-shrink:0; }
.dhs-card-label{ font-size:.82rem; font-weight:600; color:var(--slate); line-height:1.3; }
.dhs-card-score{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--ink);
}
.dhs-card-score span{
  font-family:var(--font-mono);
  font-size:.82rem;
  font-weight:400;
  color:var(--slate);
  margin-left:.15rem;
}
.dhs-card-tier{
  margin-top:.45rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tier-color);
}

/* ===== Strengths ===== */
.split-block{ margin-top:3.5rem; }
.strengths-block h3, .recs-block h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:-.02em;
  margin-bottom:1.25rem;
}
.strengths-list{ display:flex; flex-direction:column; gap:.8rem; }
.strengths-list li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-size:.98rem;
  color:var(--slate);
}
.strength-check{
  flex-shrink:0;
  width:20px; height:20px;
  border-radius:50%;
  background:rgba(26,127,75,.1);
  color:var(--score-good);
  font-size:.7rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:.12rem;
}

/* ===== Recommendations ===== */
.recs-block{ margin-top:3.5rem; }
.recs-list{ display:flex; flex-direction:column; gap:1rem; }
.recs-empty{ color:var(--slate); font-size:.95rem; }
.rec-card{
  --priority-color:var(--slate);
  padding:1.6rem 1.7rem;
  border:1px solid var(--line);
  border-left:3px solid var(--priority-color);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow-card);
}
.rec-card[data-priority="high"]{ --priority-color:var(--score-bad); }
.rec-card[data-priority="medium"]{ --priority-color:var(--score-mid); }
.rec-card[data-priority="low"]{ --priority-color:var(--blue); }
.rec-priority{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--priority-color);
  font-weight:500;
  margin-bottom:.6rem;
}
.rec-issue{
  font-family:var(--font-display);
  font-size:1.1rem;
  letter-spacing:-.02em;
  margin-bottom:.6rem;
}
.rec-finding{ color:var(--ink); font-size:.96rem; line-height:1.6; max-width:64ch; }
.rec-why{ color:var(--slate); font-size:.92rem; line-height:1.6; max-width:64ch; margin-top:.7rem; }
.rec-inline-label{ color:var(--ink); font-weight:600; }
.rec-meta{
  margin-top:1.2rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.2rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.rec-meta-label{
  display:block;
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:.3rem;
}
.rec-meta p{ font-size:.9rem; color:var(--slate); }
.rec-evidence{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:.78rem;
  line-height:1.6;
  color:var(--slate);
}
.rec-evidence .rec-inline-label{
  color:var(--slate);
  font-family:var(--font-mono);
  text-transform:uppercase;
  font-size:.68rem;
  letter-spacing:.06em;
}

/* ===== Complimentary review ===== */
.growth-section{ margin-top:5rem; text-align:center; }
.growth-eyebrow{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:.75rem;
}
.growth-section h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.2vw,2.1rem);
  letter-spacing:-.03em;
}
.growth-lede{
  margin:1rem auto 0;
  max-width:56ch;
  color:var(--slate);
  font-size:1rem;
  line-height:1.6;
}
.growth-grid{
  margin-top:2.5rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
  text-align:left;
}
.growth-card{
  padding:1.7rem 1.6rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-card);
}
.growth-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
  border:1px solid rgba(0,70,214,.25);
  background:var(--tint);
  border-radius:999px;
  padding:.25rem .65rem;
  margin-bottom:.9rem;
}
.growth-card h4{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:-.02em; margin-bottom:.55rem; }
.growth-card p{ font-size:.9rem; color:var(--slate); line-height:1.6; }

/* ===== Final CTA ===== */
.unlock-cta{
  margin-top:4rem;
  padding:3rem 2.6rem;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--paper-soft);
  text-align:center;
}
.unlock-cta h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.2vw,2.1rem);
  letter-spacing:-.03em;
}
.unlock-cta > p{
  margin:1rem auto 0;
  max-width:54ch;
  color:var(--slate);
  font-size:1rem;
  line-height:1.6;
}
.unlock-list{
  margin:1.8rem auto 2.2rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  text-align:left;
  width:fit-content;
}
.unlock-list li{
  font-size:.95rem;
  color:var(--ink-soft);
  padding-left:1.65rem;
  position:relative;
}
.unlock-list li::before{
  content:"";
  position:absolute;
  left:0; top:.42em;
  width:11px; height:6px;
  border-left:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}
.unlock-cta a.btn{ display:inline-flex; margin:.5rem auto 0; }

/* ===== Technical details ===== */
.tech-details{ margin-top:5rem; padding-bottom:2rem; }
.tech-details h3{ font-family:var(--font-display); font-size:1.25rem; letter-spacing:-.02em; }
.tech-details-note{
  margin-top:.5rem;
  margin-bottom:1.6rem;
  color:var(--slate);
  font-size:.9rem;
}
.tech-accordion{
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:.75rem;
  overflow:hidden;
  background:#fff;
}
.tech-accordion summary{
  cursor:pointer;
  list-style:none;
  padding:1.05rem 1.35rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--ink);
}
.tech-accordion summary::-webkit-details-marker{ display:none; }
.tech-accordion summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:1.1rem;
  color:var(--slate);
}
.tech-accordion[open] summary::after{ content:"–"; }
.audit-list{ border-top:1px solid var(--line); }
.audit-row{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.8rem 1.35rem;
  border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.audit-row:last-child{ border-bottom:none; }
.audit-row-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--slate);
  flex-shrink:0;
}
.audit-row[data-pass="yes"] .audit-row-dot{ background:var(--score-good); }
.audit-row[data-pass="no"] .audit-row-dot{ background:var(--score-bad); }
.audit-row[data-pass="info"] .audit-row-dot{ background:var(--blue); }
.audit-row[data-pass="legacy"] .audit-row-dot{ background:var(--line-strong); }
.audit-row[data-pass="legacy"] .audit-row-title{ color:var(--slate); font-style:italic; }
.audit-row-title{ flex:1; color:var(--slate); }
.audit-row-value{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--slate);
  white-space:nowrap;
}
.audit-row[data-pass="no"] .audit-row-value{ color:var(--score-bad); }

/* ===== Responsive ===== */
@media (max-width:760px){
  .grader-hero{ padding:3.5rem 0 2.5rem; }
  .grader-form{ flex-direction:column; }
  .grader-form .btn{ width:100%; }
  .dhs-categories{ grid-template-columns:repeat(2,1fr); }
  .growth-grid{ grid-template-columns:1fr; }
  .rec-meta{ grid-template-columns:1fr; }
  .unlock-cta{ padding:2.2rem 1.5rem; }
  .wrap-narrow{ padding:0 1.25rem; }
}