:root{
  --navy:#12305B; --navy-dk:#0B2140; --navy-lt:#2C5286; --accent:#1B6FC4;
  --bg:#F4F6FA; --card:#FFFFFF; --line:#DCE3ED;
  --ink:#1B2430; --muted:#5A6779;
  --green:#1F7A4C; --green-lt:#4C9A5E; --amber:#B4791B; --orange:#C4611B; --red:#B3261E;
  --radius:12px; --shadow:0 2px 10px rgba(18,48,91,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5;
}
h1,h2,h3{color:var(--navy); line-height:1.25}
h1{font-size:1.45rem} h2{font-size:1.15rem} h3{font-size:1rem}
a{color:var(--accent)}

header{
  background:var(--navy); color:#fff; padding:.85rem 1rem;
  display:flex; align-items:center; gap:.75rem; position:sticky; top:0; z-index:50;
}
header .brand{font-size:1.05rem; font-weight:700; line-height:1.15}
header .brand small{display:block; font-weight:400; font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; opacity:.85}
header .spacer{flex:1}
header button{background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35);
  padding:.45rem .75rem; border-radius:8px; font-size:.8rem; cursor:pointer; font-family:inherit}
header button:hover{background:rgba(255,255,255,.28)}

main{padding:1rem; max-width:900px; margin:0 auto; padding-bottom:3rem}
main.wide{max-width:1200px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; margin-bottom:.85rem; box-shadow:var(--shadow)}
.card.tight{padding:.75rem}
.muted{color:var(--muted); font-size:.88rem}
.tiny{font-size:.8rem}
.row{display:flex; align-items:center; gap:.6rem}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}
hr{border:none; border-top:1px solid var(--line); margin:.9rem 0}
.sect{margin:1.4rem 0 .5rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700}

/* ---------- confidentiality banner ---------- */
.confid{
  background:#E8F1FB; border:1px solid #BBD5F0; border-left:5px solid var(--accent);
  color:#12305B; padding:.85rem 1rem; border-radius:var(--radius);
  margin-bottom:1rem; font-size:.92rem;
}
.confid b{display:block; margin-bottom:.2rem}

/* ---------- buttons ---------- */
button.btn{background:var(--navy); color:#fff; border:none; padding:.75rem 1.1rem;
  border-radius:10px; font-size:.95rem; font-weight:600; cursor:pointer; font-family:inherit}
button.btn:hover{background:var(--navy-dk)}
button.btn:disabled{background:#9AA6B6; cursor:not-allowed}
button.btn.ghost{background:transparent; color:var(--navy); border:1.5px solid var(--navy)}
button.btn.ghost:hover{background:#EBF1F9}
button.btn.sm{padding:.4rem .7rem; font-size:.8rem; border-radius:8px}
button.btn.big{width:100%; padding:1rem; font-size:1.05rem; min-height:52px}

input,select,textarea{width:100%; padding:.7rem .75rem; border:1.5px solid var(--line);
  border-radius:9px; font-size:1rem; font-family:inherit; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(27,111,196,.15)}
label{display:block; font-size:.78rem; font-weight:700; color:var(--muted);
  margin:.7rem 0 .25rem; text-transform:uppercase; letter-spacing:.04em}
textarea{min-height:110px; resize:vertical}

/* ---------- Malayalam ----------
   Malayalam glyphs sit visually smaller than Latin at the same px and the script
   stacks conjuncts vertically, so it needs a size bump and more line-height or it
   reads cramped. Rendered with the device's own Malayalam font — no webfont, so
   the form still costs one request and leaks nothing to a font CDN. */
.ml{
  font-size:1.02em; line-height:1.75; color:var(--ink);
  font-family:"Noto Sans Malayalam","Manjari","Meera",system-ui,sans-serif;
}
.qtext.ml{color:#37414F; margin-top:-.35rem; margin-bottom:.7rem}
.ml-inline{font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted)}
.sect-ml{text-transform:none; letter-spacing:0; font-weight:600; font-size:.9rem;
  color:var(--navy-lt); margin-top:.15rem}
p.muted .ml, .muted .ml{color:var(--muted); font-size:.95em}

/* ---------- survey items ---------- */
.qnum{font-size:.72rem; font-weight:700; color:var(--accent); letter-spacing:.05em}
.q{border:1px solid var(--line); border-radius:10px; padding:.85rem; margin-bottom:.6rem;
  background:#fff}
.q.answered{border-left:4px solid var(--green); background:#FBFDFC}
.q.unanswered-warn{border-left:4px solid var(--amber); background:#FFFBF2}
.qtext{font-size:.98rem; margin:.2rem 0 .7rem; line-height:1.4}

/* 5-point scale: real radios, big targets, works one-handed */
.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:.3rem}
.scale label{margin:0; padding:0; text-transform:none; letter-spacing:0}
.scale input{position:absolute; opacity:0; width:0; height:0}
.scale .opt{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:52px; border:1.5px solid var(--line); border-radius:9px; cursor:pointer;
  background:#fff; color:var(--muted); font-weight:700; font-size:1rem; padding:.3rem .1rem;
  text-align:center; line-height:1.1;
}
.scale .opt small{font-size:.55rem; font-weight:600; letter-spacing:.02em; opacity:.85;
  text-transform:uppercase}
.scale input:focus-visible + .opt{box-shadow:0 0 0 3px rgba(27,111,196,.35)}
.scale input:checked + .opt{background:var(--navy); border-color:var(--navy); color:#fff}
.scale .opt:active{transform:scale(.97)}
.legend{display:flex; justify-content:space-between; font-size:.68rem; color:var(--muted);
  margin-top:.3rem}

.progress{position:sticky; top:56px; z-index:40; background:var(--bg); padding:.5rem 0 .3rem}
.bar{height:8px; background:var(--line); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .2s}

/* ---------- messages ---------- */
.err{background:#FBE6E5; color:var(--red); padding:.7rem .85rem; border-radius:9px;
  font-size:.88rem; margin:.5rem 0; font-weight:500}
.ok{background:#E3F3EA; color:var(--green); padding:.7rem .85rem; border-radius:9px;
  font-size:.88rem; margin:.5rem 0; font-weight:500}
.warnbar{background:#FDF1DC; color:#8A5A0F; border:1px solid #F0D9A8; padding:.7rem .85rem;
  border-radius:9px; font-size:.88rem; margin:.6rem 0; font-weight:500}
.empty{text-align:center; padding:2.5rem 1rem; color:var(--muted)}
.empty .big{font-size:2.2rem; margin-bottom:.4rem; opacity:.4}

/* ---------- bands ---------- */
.band{display:inline-block; padding:.2rem .6rem; border-radius:20px; font-size:.68rem;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff}
.b-excellent{background:var(--green)} .b-good{background:var(--green-lt)}
.b-moderate{background:var(--amber)} .b-low{background:var(--orange)}
.b-critical{background:var(--red)}   .b-none{background:#9AA6B6}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem;
  margin-bottom:1rem}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:.9rem;
  box-shadow:var(--shadow)}
.kpi b{display:block; font-size:1.9rem; color:var(--navy); line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi span{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:700}
.kpi .sub{font-size:.72rem; color:var(--muted); margin-top:.2rem}
.kpi.hero b{font-size:2.6rem}

/* ---------- domain panels ---------- */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:.85rem; box-shadow:var(--shadow); overflow:hidden}
.panel .head{display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem;
  border-bottom:1px solid var(--line); background:#FAFBFD; cursor:pointer}
.panel .head .score{font-size:1.5rem; font-weight:800; color:var(--navy);
  font-variant-numeric:tabular-nums; min-width:4rem}
.panel .head h3{flex:1; font-size:1rem}
.panel .body{padding:1rem}
.panel .chev{color:var(--muted); font-size:.8rem}

/* horizontal meter used for dept sub-analysis + distribution */
.meter{display:grid; grid-template-columns:9rem 1fr 3.5rem; gap:.5rem; align-items:center;
  margin-bottom:.4rem; font-size:.84rem}
.meter .track{background:var(--line); border-radius:99px; height:20px; overflow:hidden}
.meter .fill{height:100%; border-radius:99px; background:var(--accent)}
.meter .val{text-align:right; font-variant-numeric:tabular-nums; font-weight:700}
.meter .hid{color:var(--muted); font-style:italic; font-size:.76rem; grid-column:2 / span 2}
.meter.f-excellent .fill{background:var(--green)} .meter.f-good .fill{background:var(--green-lt)}
.meter.f-moderate .fill{background:var(--amber)}  .meter.f-low .fill{background:var(--orange)}
.meter.f-critical .fill{background:var(--red)}    .meter.f-none .fill{background:#9AA6B6}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.85rem; min-width:520px}
th{background:#F0F3F8; color:var(--navy); text-align:left; padding:.6rem; font-weight:700;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  cursor:pointer; user-select:none}
td{border-bottom:1px solid var(--line); padding:.6rem; vertical-align:middle}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- trend chart ---------- */
.trend{width:100%; height:180px; display:block}

/* ---------- remarks ---------- */
.remark{border-left:3px solid var(--line); padding:.5rem .8rem; margin-bottom:.5rem;
  background:#FAFBFD; border-radius:0 8px 8px 0; font-size:.92rem; white-space:pre-wrap}
.remark .k{font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-weight:700; display:block; margin-bottom:.2rem}

/* ---------- login ---------- */
.loginwrap{max-width:400px; margin:0 auto; padding:2.5rem 1rem; text-align:center}
.crest{width:62px; height:62px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700;
  margin:0 auto 1rem}
.loginwrap .card{text-align:left; margin-top:1rem}
.foot{margin-top:1.2rem}

@media (min-width:700px){
  h1{font-size:1.8rem}
  .scale .opt small{font-size:.6rem}
}