/* WaterGuide Self-Assessment (Beta) - styling inspired by WaterGuide report aesthetics */
:root{
  --bg: radial-gradient(1200px 800px at 20% 0%, rgba(96,195,212,.14), transparent 60%), radial-gradient(900px 700px at 85% 10%, rgba(236,130,44,.12), transparent 55%), #f6f7f8;
  --paper: #ffffff;
  --ink: #132024;
  --muted: #51626a;
  --line: rgba(19,32,36,.10);

  --brand-red: #b22a2e;      /* from report cover accent */
  --brand-teal: #68c0d2;     /* from WaterGuide figure */
  --brand-orange: #d48037;   /* from WaterGuide figure */
  --brand-green: #1b4d2b;    /* from cover greens */
  --brand-sand: #d9ccb1;     /* from cover beige */

/* Element palette (sampled from WaterGuide figure) */
--e1: #47555a; /* dark slate */
--e2: #3c85af; /* blue */
--e3: #60c3d4; /* cyan */
--e4: #ec822c; /* orange */
--e5: #d5ba46; /* gold */
--e6: #7ca56c; /* green */

--accent: var(--brand-red);

  --rag-red: #b22a2e;
  --rag-amber: #d48037;
  --rag-green: #1b4d2b;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(19,32,36,.10);
  --shadow-soft: 0 8px 20px rgba(19,32,36,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
a{color:inherit}
button,input,select,textarea{font:inherit}

.topbar{
  position:sticky; top:0; z-index:10;
  background: rgba(247,246,242,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand__mark{
  width:12px; height:36px; border-radius: 10px;
  background: linear-gradient(180deg, var(--brand-red), #7d1c20);
  box-shadow: 0 8px 18px rgba(178,42,46,.25);
}
.brand__title{font-weight: 750; letter-spacing: .2px; font-size: 18px}
.brand__subtitle{font-size: 12px; color: var(--muted)}

.topnav{display:flex; gap:10px; align-items:center}

.app{max-width: 1120px; margin: 0 auto; padding: 18px}
@media (max-width: 720px){ .app{padding: 14px} }

.hero{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: var(--paper);
  border: 1px solid var(--line);
}
.hero__bg{
  position: relative;
  min-height: 240px;
  background: url("./assets/cover_bg.png") center/cover no-repeat;
}
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(19,32,36,.18), rgba(19,32,36,.70));
}
.hero__content{
  position:relative;
  padding: 22px 22px 18px;
  display:flex; gap:20px; align-items:flex-end; justify-content:space-between;
  color: #fff;
}
.hero__content h1{
  margin:0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .2px;
}
.hero__content p{margin:8px 0 0; max-width: 70ch; color: rgba(255,255,255,.92)}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap}

.panel{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
@media (max-width: 980px){ .panel{grid-template-columns:1fr} }

.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.card h2{margin: 0 0 10px; font-size: 18px}
.card h3{margin: 16px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em}
.card p{margin: 10px 0; color: var(--ink)}
.muted{color: var(--muted)}
.small{font-size: 12px; color: var(--muted)}
.divider{height:1px; background:var(--line); margin: 14px 0}

.btnrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
button{
  appearance:none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}
button:hover{box-shadow: 0 10px 22px rgba(19,32,36,.10); transform: translateY(-1px)}
button:active{transform: translateY(0px)}
button.primary{
  border: 1px solid rgba(178,42,46,.22);
  background: linear-gradient(180deg, var(--brand-red), #8f1f23);
  color: #fff;
}
button.ghost{
  background: transparent;
}
button.danger{
  border: 1px solid rgba(178,42,46,.35);
  background: rgba(178,42,46,.08);
  color: var(--brand-red);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  font-size: 12px;
  color: var(--muted);
}
.badge__dot{width:10px;height:10px;border-radius: 99px;background: var(--brand-sand)}
.badge.rag-red{color: var(--rag-red); border-color: rgba(178,42,46,.28); background: rgba(178,42,46,.07)}
.badge.rag-red .badge__dot{background: var(--rag-red)}
.badge.rag-amber{color: #8a4f22; border-color: rgba(212,128,55,.28); background: rgba(212,128,55,.10)}
.badge.rag-amber .badge__dot{background: var(--rag-amber)}
.badge.rag-green{color: var(--rag-green); border-color: rgba(27,77,43,.28); background: rgba(27,77,43,.08)}
.badge.rag-green .badge__dot{background: var(--rag-green)}

.progress{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top: 14px;
}
.progress__bar{
  flex:1;
  height: 10px;
  background: rgba(19,32,36,.06);
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(19,32,36,.06);
}
.progress__bar > div{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-orange), var(--brand-red));
}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap: 12px}
@media (max-width: 720px){ .grid2{grid-template-columns:1fr} }

.field label{display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px}
.field input, .field select, .field textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(19,32,36,.14);
  background: rgba(255,255,255,.86);
  outline:none;
}
.field textarea{min-height: 88px; resize: vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(104,192,210,.7);
  box-shadow: 0 0 0 4px rgba(104,192,210,.18);
}

.elementHeader{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.elementTitle{
  display:flex; gap:10px; align-items:flex-start;
}
.elementNum{
  width: 34px; height: 34px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(217,204,177,.35);
  border: 1px solid rgba(19,32,36,.08);
  font-weight: 750;
}
.elementMeta{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.elementBlurb{margin-top: 6px; color: var(--muted); max-width: 75ch}

.q{
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}
.q:first-of-type{border-top:0;padding-top:0;margin-top:0}
.q__row{display:flex; gap:12px; align-items:flex-start; justify-content:space-between}
.q__text{flex:1}
.q__prompt{margin:0; font-weight: 600}
.q__hint{margin: 6px 0 0; color: var(--muted); font-size: 12px}
.q__select{min-width: 240px}
@media (max-width: 820px){
  .q__row{flex-direction:column}
  .q__select{min-width: 100%}
}

.kpi{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
}
.kpi b{font-size: 13px}
.kpi .value{font-variant-numeric: tabular-nums; font-weight: 750}

.ragCard{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.ragCard__left{display:flex; gap:12px; align-items:center}
.ragCard__num{
  width: 42px; height: 42px; border-radius: 16px;
  background: rgba(217,204,177,.35);
  display:grid; place-items:center;
  font-weight: 800;
}
.ragCard__title{font-weight: 750; margin:0}
.ragCard__subtitle{margin: 4px 0 0; color: var(--muted); font-size: 12px}
.ragCard__right{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.ragCard__score{font-weight: 800; font-variant-numeric: tabular-nums}

.reco{
  border-left: 4px solid rgba(19,32,36,.10);
  padding-left: 12px;
  margin: 10px 0;
}
.reco.red{border-left-color: rgba(178,42,46,.55)}
.reco.amber{border-left-color: rgba(212,128,55,.65)}
.reco.green{border-left-color: rgba(27,77,43,.55)}
.reco ul{margin: 8px 0 0 18px}
.reco li{margin: 6px 0; color: var(--ink)}

.figure{
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow:hidden;
}
.figure img{width:100%; height:auto; display:block}

.dialog{border:none; border-radius: 20px; padding:0; box-shadow: 0 30px 60px rgba(19,32,36,.18)}
.dialog::backdrop{background: rgba(19,32,36,.55)}
.dialog__inner{padding: 18px 18px 14px; max-width: 620px}
.dialog__inner h2{margin: 0 0 8px}
.dialog__actions{display:flex; justify-content:flex-end; gap:10px; margin-top: 12px}


/* Modern hero button variant */
button.secondary{
  border: 1px solid rgba(96,195,212,.35);
  background: rgba(96,195,212,.14);
  color: #0b2b33;
}
.hero__actions button.secondary{ color:#fff; background: rgba(19,32,36,.25); border-color: rgba(255,255,255,.28); }
.hero__actions button.secondary:hover{ background: rgba(19,32,36,.32); }

/* Element-specific accents */
.element--e1{ --accent: var(--e1); }
.element--e2{ --accent: var(--e2); }
.element--e3{ --accent: var(--e3); }
.element--e4{ --accent: var(--e4); }
.element--e5{ --accent: var(--e5); }
.element--e6{ --accent: var(--e6); }

.card.element{
  border-top: 4px solid rgba(0,0,0,0);
  border-top-color: var(--accent);
  background:
    radial-gradient(700px 380px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    var(--paper);
}

.elementHeader{
  position: relative;
}
.card.element .elementNum{
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.92));
  border-color: color-mix(in srgb, var(--accent) 25%, rgba(19,32,36,.10));
}
.card.element .progress__bar > div{
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, #ffffff), var(--accent));
}

/* Element tiles on dashboard */
.elementTile{
  border-left: 4px solid var(--accent);
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, rgba(19,32,36,.10));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.86));
  color: color-mix(in srgb, var(--accent) 65%, #0f1a1d);
  font-size: 12px;
  font-weight: 650;
}

/* Weight controls */
.weightRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  margin: 8px 0;
}
.weightRow__label{display:flex; flex-direction:column; gap:4px}
.weightSelect{
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(19,32,36,.14);
  background: rgba(255,255,255,.9);
}

.radarWrap{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  overflow:hidden;
}
.radarWrap canvas{
  width: 100%;
  height: 100%;
  display:block;
}

.hero__content > div:first-child{
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: rgba(19,32,36,.24);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}