/* The Institutional Clarity Index platform. AGH brand guidelines 2026.
   Phthalo Green frames every screen. Advisory Blue is for anything you tap.
   Gold marks the one thing to look at. Silver and gold carry the arch pattern only. */
:root{
  --green:#013333;--green-2:#0B4242;--blue:#2B56A7;--blue-2:#21468C;--blue-tint:#EEF2FA;
  --gold:#D6B033;--gold-ink:#7A5F06;--gold-tint:#FBF5E1;--silver:#C4C2C2;
  --ink:#1B2626;--muted:#4F5B5B;--bg:#F7F6F1;--card:#fff;--line:#DFDDD5;--soft:#EEEDE7;
  --warn:#A23B2A;--ok:#2F6B43;--flag:#FBF5E1
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:Lora,Georgia,serif;font-weight:500;color:var(--green);line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.75rem}h2{font-size:1.25rem;margin-top:1.5rem}h3{font-size:1.05rem}
a{color:var(--blue)}a:hover{color:var(--blue-2)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* header */
header.top{background:var(--green);color:#fff;position:relative;overflow:hidden}
header.top .pat,.pat{position:absolute;inset:0;pointer-events:none;background:url("agh-pattern-silver-gold.9a4ec9f1f18c.svg") 0 0/140px auto repeat;opacity:.07}
header.top .in{position:relative;max-width:1040px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
header.top .brand{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none}
header.top .brand img{height:38px;width:auto;display:block}
header.top .brand span{font-family:Lora,Georgia,serif;font-size:15px;color:#D7E3E3;border-left:1px solid rgba(255,255,255,.25);padding-left:14px;line-height:1.25}
header.top nav{display:flex;gap:18px;align-items:center;font-size:14px}
header.top nav a,header.top nav button{color:#E6EEEE;background:none;border:0;font:inherit;cursor:pointer;padding:6px 0;text-decoration:none}
header.top nav a:hover,header.top nav button:hover{color:#fff;text-decoration:underline}
header.top nav form{margin:0}
.goldline{height:3px;background:var(--gold)}
main{position:relative;width:100%;max-width:1040px;margin:0 auto;padding:28px 16px 40px;flex:1}
.arch-bg{position:fixed;right:-120px;bottom:-160px;width:340px;height:600px;background:url("agh-arch-silver.a1cf90ceb546.svg") center/contain no-repeat;opacity:.18;pointer-events:none;z-index:0}
main>*{position:relative;z-index:1}

/* building blocks */
.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:700;margin:0 0 6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 16px}
.card.narrow{max-width:460px;margin:24px auto}
.muted{color:var(--muted)}.small{font-size:.9rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:8px;padding:0 20px;font:500 15px Roboto,Arial,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--blue-2);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--green)}.btn.gold:hover{background:#C9A42A;color:var(--green)}
.btn.ghost{background:transparent;color:var(--blue)}.btn.ghost:hover{background:var(--blue-tint)}
.btn:disabled{opacity:.5;cursor:not-allowed}
input[type=email],input[type=password],input[type=text],input[type=number],textarea,select{width:100%;min-height:48px;padding:11px 13px;border:1px solid #C9CEC9;border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,86,167,.18)}
textarea{min-height:5.5rem;resize:vertical}
label{display:block;font-weight:500;font-size:14px;color:var(--muted);margin:.8rem 0 .35rem}
label.check{display:grid;grid-template-columns:24px 1fr;gap:10px;font-weight:400;color:var(--ink);font-size:15px}
label.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--blue)}
.messages{list-style:none;padding:0;margin:0 0 16px}
.messages li{padding:.75rem 1rem;border-radius:10px;margin-bottom:8px;background:var(--blue-tint);border-left:4px solid var(--blue)}
.messages li.success{background:#EAF3EC;border-color:var(--ok)}
.messages li.error,.messages li.warning{background:var(--gold-tint);border-color:var(--gold)}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500;color:var(--muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill{display:inline-block;font-size:.75rem;padding:.12rem .55rem;border-radius:999px;background:var(--blue-tint);color:var(--blue);font-weight:500}
.pill.warn{background:var(--gold-tint);color:var(--gold-ink)}
.pill.web{background:#E8F0EF;color:var(--green)}
.band{font-family:Lora,Georgia,serif;font-size:1.5rem;color:var(--green)}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}@media(min-width:720px){.grid2{grid-template-columns:1fr 1fr}}
.bar{height:8px;background:var(--soft);border-radius:4px;overflow:hidden;margin-top:6px}.bar>span{display:block;height:100%;background:var(--green)}
.bar.weak>span{background:var(--gold)}
td.diverge{background:var(--flag);font-weight:600}
.notes{font-size:.9rem;margin:.4rem 0 0;padding-left:1rem}
.round-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}.round-form select{width:auto;min-width:80px}.round-form textarea{min-height:3rem;flex:1 1 220px}
.flag{background:var(--flag);border-color:#EAD9A0}
.netbar{position:sticky;top:0;z-index:20;background:var(--gold);color:var(--green);padding:.5rem 16px;font-size:.9rem;display:none;text-align:center}
.netbar.show{display:block}
footer{position:relative;background:var(--green);color:#A9BDBD;font-size:13px;overflow:hidden}
footer .in{position:relative;max-width:1040px;margin:0 auto;padding:18px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* respondent: pillars across the top */
.dimtabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 10px}
.dimtabs a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--muted);font-size:11.5px;line-height:1.2;text-align:center;padding:8px 4px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.dimtabs a svg{width:22px;height:22px;color:var(--green)}
.dimtabs a .fill{position:absolute;left:0;bottom:0;height:3px;background:var(--gold)}
.dimtabs a.on{background:var(--green);border-color:var(--green);color:#E6EEEE}
.dimtabs a.on svg{color:var(--gold)}
.dimtabs a:hover{border-color:var(--blue)}
.dimtabs .nm{display:block}
.progress{height:6px;background:var(--soft);border-radius:3px;overflow:hidden;margin:.4rem 0 1rem}.progress>span{display:block;height:100%;background:var(--gold)}
.partline{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 14px;font-size:14px;color:var(--muted)}

/* respondent: one statement */
.parthead{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.parthead .mark{width:52px;height:52px;border-radius:14px;background:var(--green);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none;position:relative;overflow:hidden}
.parthead .mark svg{width:28px;height:28px;position:relative}
.q{border-top:1px solid var(--line);padding:18px 0}.q:first-of-type{border-top:0}
.q .stem{font-family:Lora,Georgia,serif;font-size:1.3rem;line-height:1.4;color:var(--green);margin:0 0 .4rem}
.q .num{font-size:13px;color:var(--muted);margin:0 0 6px;font-variant-numeric:tabular-nums}
.q .hint{font-family:Lora,Georgia,serif;font-style:italic;font-size:14.5px;color:var(--muted);margin:0 0 14px}
.scale{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;height:128px}
.scale label{margin:0;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;border:1px solid #D4D8D3;border-radius:12px;padding:0 3px 10px;cursor:pointer;background:#fff;font-size:12px;line-height:1.2;color:var(--muted);text-align:center;transition:transform .12s,border-color .15s,box-shadow .15s;position:relative}
.scale label:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 16px rgba(43,86,167,.12)}
.scale label b{display:block;font-family:Lora,Georgia,serif;font-weight:500;font-size:1.45rem;color:var(--green)}
.scale label:nth-child(1){height:54%}.scale label:nth-child(2){height:63%}.scale label:nth-child(3){height:72%}
.scale label:nth-child(4){height:81%}.scale label:nth-child(5){height:90%}.scale label:nth-child(6){height:100%}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale label:has(input:checked){background:var(--green);border-color:var(--green);color:#D7E3E3;box-shadow:inset 0 5px 0 var(--gold)}
.scale label:has(input:checked) b{color:#fff}
.scale label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.status{font-size:.82rem;margin-top:.45rem;min-height:1.2em}.status.saved{color:var(--ok)}.status.waiting{color:var(--warn)}
.files{font-size:.88rem;margin:.4rem 0 0;padding-left:1.1rem}
.attach{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--blue);border:1px dashed #9AAAC8;border-radius:8px;padding:10px 14px;cursor:pointer;margin-top:10px;font-size:14px}
.attach input{position:absolute;opacity:0;width:1px;height:1px}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
/* stepper (enhanced by capture.js): one statement at a time */
.stepper .q{display:none;border-top:0}
.stepper .q.cur{display:block;animation:fade .25s ease}
.stepnav{display:none;align-items:center;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.stepper+.stepnav,.stepper .stepnav{display:flex}
.stepnav .grow{flex:1;font-size:13px;color:var(--muted)}
.stepdots{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 12px}
.stepdots button{width:28px;height:28px;border-radius:7px;border:1px solid #CFD5D1;background:#fff;font:500 12px Roboto,Arial,sans-serif;color:var(--muted);cursor:pointer;padding:0}
.stepdots button.ans{background:var(--green);border-color:var(--green);color:#fff}
.stepdots button.cur{outline:2px solid var(--blue);outline-offset:1px}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* results */
.reshead{background:var(--green);color:#fff;border-radius:16px;padding:24px;position:relative;overflow:hidden;margin-bottom:16px}
.reshead>*{position:relative}
.reshead .pat{position:absolute}
.reshead h2,.reshead .band{color:#fff;margin-top:0}
.reshead .muted{color:#BFD0D0}
.dimrow{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center}
.dimrow svg{width:22px;height:22px;color:var(--blue)}
.dimrow.weak svg{color:var(--gold-ink)}

@media (max-width:640px){
  h1{font-size:1.45rem}
  main{padding:20px 14px 32px}
  .card{padding:16px}
  header.top .brand img{height:32px}
  header.top .brand span{display:none}
  .dimtabs{gap:4px}
  .dimtabs .nm{display:none}
  .q .stem{font-size:1.12rem}
  .scale{gap:5px;height:112px}
  .scale label{font-size:10px;padding-bottom:8px;border-radius:10px}
  .scale label b{font-size:1.15rem}
  .stepnav{position:sticky;bottom:0;background:var(--bg);margin:0 -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:3}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{header.top,footer,.netbar,.btn,.arch-bg{display:none!important}}
td .btn{min-height:36px;padding:0 12px;font-size:13.5px}
td form{margin:0}