:root{
  --ground:#0a1428; --deep:#12213f; --cobalt:#1848c0; --cobalt-2:#3a6ae0;
  --mist:#9fb3e0; --sheet:#f8f4ec; --ink:#0a1428; --warm:#e8a53a; --radius:6px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--ground); color:var(--mist);
  font-family:"Mukta","Noto Sans","Segoe UI",sans-serif; font-weight:400; font-size:17px; line-height:1.6}

/* 🔴 FULL WIDTH, stacked (Prayas, 16 September 2026: *"form filling should be full-width"*). The band
   runs the whole way across and the sheet takes the rest, so the boxes somebody types into use the
   width of the screen instead of two thirds of it. The two-column version squeezed a long answer into
   a narrow column beside an empty field of blue. */
.wrap{display:flex; flex-direction:column; min-height:100vh}
.sheet{flex:1}   /* the sheet takes the rest of the page, so the dark ground never shows as a band under it */

/* the band: one flat mass, full width, with the title on it */
.field-zone{position:relative; padding:44px 44px 36px; overflow:hidden; background:var(--cobalt)}
.zone-in{position:relative; max-width:1400px; margin:0 auto}
.mass{display:none}                       /* the band IS the mass now; nothing floats behind it */
h1{font-size:32px; font-weight:800; color:var(--sheet); margin:0 0 10px; line-height:1.2}
.sub{font-size:17px; color:rgba(248,244,236,.82); margin:0 0 14px; max-width:70ch}
.sub code{font-size:14px; background:rgba(248,244,236,.18); padding:1px 5px; border-radius:3px}
.deadline{font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ground); background:var(--warm); display:inline-block; padding:3px 10px; border-radius:3px; margin:0}

/* the sheet: everything you read and do, across the whole width */
.sheet{background:var(--sheet); color:var(--ink); padding:48px 44px 80px; min-height:60vh}
.sheet > *{max-width:1400px; margin-left:auto; margin-right:auto}
@media(max-width:880px){ .field-zone{padding:32px 20px 28px} .sheet{padding:32px 20px 56px} }
h2{font-size:22px; font-weight:800; margin:0 0 20px}

.field{margin-bottom:28px}
.field label{display:block; font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px}
.field .req{font-weight:400; letter-spacing:.04em; opacity:.55}
.hint{font-size:14px; opacity:.7; margin:0 0 8px}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=date],textarea{
  width:100%; font-family:inherit; font-size:17px; padding:12px 14px;
  border:1px solid rgba(10,20,40,.25); border-radius:var(--radius); background:#fff; color:var(--ink)}
textarea{min-height:120px; resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--cobalt); outline-offset:-1px}
.has-error input,.has-error textarea{border-color:var(--warm); border-width:2px}
.err{color:var(--ink); background:var(--warm); display:inline-block; padding:2px 8px; border-radius:3px; font-size:14px; margin:8px 0 0}

.opts{display:flex; flex-direction:column; gap:10px}
.field .opt{display:flex; align-items:flex-start; gap:10px; font-size:17px; font-weight:400;
  letter-spacing:0; text-transform:none; cursor:pointer; margin:0; color:var(--ink)}
.opt input{margin-top:6px; width:18px; height:18px; accent-color:var(--cobalt); flex:none}

button{font-family:inherit; font-size:17px; font-weight:600; border:none; border-radius:var(--radius);
  padding:14px 28px; cursor:pointer; background:var(--warm); color:var(--ink)}
button:hover:enabled{background:#f2b75a}
button:disabled{opacity:.45; cursor:default}
.pow{font-size:14px; opacity:.6; margin:12px 0 0}

.msg{padding:14px 16px; border-radius:var(--radius); margin-bottom:24px; font-size:17px}
.msg.bad{background:rgba(232,165,58,.25)}
.msg.good{background:rgba(24,72,192,.12)}

.shut{padding:8px 0}
.shut h2{margin-bottom:8px}
.shut p{margin:0; font-size:17px; max-width:56ch}

.item{padding:16px 0; border-top:1px solid rgba(10,20,40,.18)}
.item:first-of-type{border-top:none}
.item .t{font-size:17px; font-weight:600}
.item .t a{color:var(--ink); text-decoration:none; border-bottom:2px solid var(--cobalt)}
.item .t a:hover{color:var(--cobalt)}
.item .d{font-size:14px; opacity:.7; margin-top:2px; font-variant-numeric:tabular-nums}
.item.broken .t{opacity:.6} .item.broken .d{color:var(--ink); background:var(--warm); display:inline-block; padding:1px 8px; border-radius:3px; opacity:1}
.state{font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:14px}
.state.open{color:var(--cobalt)} .state.soon{color:var(--ink); opacity:.6} .state.shut{color:var(--ink); opacity:.5}


/* ---- admin ---------------------------------------------------------------------------------------
   Reading answers is gated; filling a form is not. This is the reading side. */
.adminbar{display:flex; gap:20px; align-items:baseline; flex-wrap:wrap; margin-bottom:28px}
.adminbar a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:2px solid var(--cobalt)}
.adminbar a:hover{color:var(--cobalt)}
.adminbar form{margin-left:auto}
.adminbar button{padding:8px 16px; font-size:14px; background:rgba(10,20,40,.08)}

.tbl{width:100%; border-collapse:collapse; margin-top:8px}
.tbl th{text-align:left; font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 12px 10px 0; border-bottom:2px solid rgba(10,20,40,.25); white-space:nowrap}
.tbl td{padding:12px 12px 12px 0; border-bottom:1px solid rgba(10,20,40,.14); vertical-align:top; font-size:17px}
.tbl td.when{font-variant-numeric:tabular-nums; font-size:14px; opacity:.7; white-space:nowrap}
.tbl td .k{font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.55; display:block}
.tbl td .v{display:block; margin-bottom:10px; word-break:break-word}
.tbl td .v:last-child{margin-bottom:0}
.wide{overflow-x:auto}

.keyform{max-width:520px}
.count{font-variant-numeric:tabular-nums; font-weight:600}

/* compose: the short-tag box */
.code{font-family:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,monospace; font-size:15px;
  line-height:1.7; min-height:340px; tab-size:2; white-space:pre; overflow-wrap:normal; overflow-x:auto}
.idrow{display:flex; align-items:center; gap:0}
.idrow span{font-family:ui-monospace,monospace; font-size:17px; padding:12px 4px 12px 14px;
  background:#fff; border:1px solid rgba(10,20,40,.25); border-right:none;
  border-radius:var(--radius) 0 0 var(--radius); opacity:.55}
.idrow input{border-radius:0 var(--radius) var(--radius) 0; font-family:ui-monospace,monospace; flex:1; max-width:420px}
.composerow{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; margin-top:8px}
.cheat{font-size:14px; flex:1; min-width:280px}
.cheat summary{cursor:pointer; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:14px 0}
.cheat code{background:rgba(10,20,40,.08); padding:1px 6px; border-radius:3px; font-size:14px}
.tbl.small td,.tbl.small th{font-size:14px; padding:6px 12px 6px 0}
.tbl.small code{background:rgba(10,20,40,.08); padding:1px 6px; border-radius:3px}
.msg.bad b{font-weight:600}