/* ===========================================================================
   Manak Setu — stylesheet
   Look: a government register, not a SaaS dashboard. Ruled rows, a mono
   gutter for codes, hairline rules, and one strong accent per side
   (green for India, navy for the USA).
   =========================================================================== */

:root{
  --ink:#16202E;
  --ink-soft:#5A6673;
  --ink-faint:#8B95A1;
  --paper:#F6F7F5;
  --card:#FFFFFF;
  --rule:#D7DDE3;
  --rule-soft:#E8ECEF;

  --india:#0F6E56;
  --india-wash:#EAF4F0;
  --usa:#1B4E8F;
  --usa-wash:#EAF0F8;
  --signal:#8A5B0B;
  --signal-wash:#FBF2E1;
  --stop:#9C2B22;
  --stop-wash:#FAEDEB;

  --gutter:104px;
  --rail:56px;
}

*{box-sizing:border-box}

/* .panel par display:flex hai, isliye [hidden] apne aap kaam nahi karta.
   Ye line zaroori hai warna chhupe hue panel bhi dikh jaate hain. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 "IBM Plex Sans",system-ui,sans-serif;
  font-weight:400;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:26px;line-height:1.25}
h2{font-size:19px}
h3{font-size:15px}
p{margin:0}
button,input,select{font:inherit;color:inherit}

/* ------------------------------------------------------------- top bar --- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 24px;
  background:var(--ink);color:#EEF1F4;
}
.mark{display:flex;align-items:center;gap:12px;min-width:0}
.mark-glyph{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:1px solid rgba(255,255,255,.35);
  font-size:15px;line-height:1;
}
.mark-text{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.mark-text strong{font-weight:600;font-size:15px}
.mark-text span{font-size:12px;color:#9FAAB6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{
  display:flex;align-items:center;gap:7px;flex:none;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#9FAAB6;
}
.status .dot{width:7px;height:7px;background:#6B7784}
.status.ok .dot{background:#3FBF8F}
.status.ok{color:#BFD8CE}

/* ------------------------------------------------------------- layout --- */
.surface{max-width:980px;margin:0 auto;padding:28px 20px 72px}

.panel{
  display:flex;
  scroll-margin-top:72px;   /* sticky topbar heading ko dhak na le */
  background:var(--card);
  border:1px solid var(--rule);
  margin-bottom:20px;
}
.step-rail{
  width:var(--rail);flex:none;
  border-right:1px solid var(--rule);
  background:#FAFBFA;
  display:flex;justify-content:center;padding-top:26px;
}
.step-rail span{
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-faint);
}
.step-rail.india span{color:var(--india)}
.step-rail.usa span{color:var(--usa)}
.step-rail.gap span{color:var(--signal)}
.panel-body{flex:1;min-width:0;padding:26px 28px 28px}

.panel-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid var(--rule);
}
.count{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft)}
.lede{color:var(--ink-soft);margin:8px 0 22px;max-width:60ch}
.foot{font-size:13px;color:var(--ink-faint);margin:14px 0 18px;max-width:70ch}

/* -------------------------------------------------------------- form ---- */
.query{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:12.5px;color:var(--ink-soft);font-weight:500}
.field>span em{font-style:normal;color:var(--ink-faint);font-weight:400}
.field input,.field select{
  padding:11px 13px;background:#FCFDFC;
  border:1px solid var(--rule);border-radius:0;
  transition:border-color .15s,background .15s;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--ink);background:#fff;
}
#productName{font-size:18px;padding:14px 15px}
.field-row{display:grid;grid-template-columns:200px 1fr;gap:14px}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.btn-primary{
  padding:11px 20px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  cursor:pointer;font-weight:500;font-size:14.5px;
  transition:background .15s;
}
.btn-primary:hover{background:#0B131E}
.btn-primary:disabled{opacity:.5;cursor:progress}
.btn-quiet{
  padding:11px 16px;background:transparent;color:var(--ink-soft);
  border:1px solid var(--rule);cursor:pointer;font-size:14px;text-decoration:none;
}
.btn-quiet:hover{border-color:var(--ink-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--india);outline-offset:2px}

/* ------------------------------------------------------------- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 11px;background:var(--india-wash);
  border:1px solid #C6DED5;font-size:12.5px;color:#0B4F3E;
}
.chip b{font-family:"IBM Plex Mono",monospace;font-weight:500}

/* ------------------------------------------------------------ ledger ---- */
.ledger{border-top:1px solid var(--rule-soft)}
.row{
  display:grid;grid-template-columns:22px var(--gutter) 1fr auto;
  gap:14px;align-items:start;
  padding:14px 0 12px;border-bottom:1px solid var(--rule-soft);
}
.row input[type=checkbox]{margin-top:4px;accent-color:var(--india);width:15px;height:15px}
.code{
  font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:500;
  color:var(--india);padding-top:1px;
}
.row.withdrawn .code{color:var(--stop);text-decoration:line-through}
.row-main{min-width:0}
.row-title{font-size:14.5px;line-height:1.45}
.row-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;
  font-size:11.5px;
}
.tag{padding:2px 7px;border:1px solid var(--rule);color:var(--ink-soft);background:#FBFCFB}
.tag.mand{background:var(--india-wash);border-color:#C6DED5;color:#0B4F3E}
.tag.dead{background:var(--stop-wash);border-color:#E7C3BE;color:#7E231C}
.why{
  margin-top:9px;font-size:12.5px;color:var(--ink-soft);
}
.why summary{cursor:pointer;color:var(--ink-faint);list-style:none}
.why summary::-webkit-details-marker{display:none}
.why summary::before{content:"+ ";font-family:"IBM Plex Mono",monospace}
.why[open] summary::before{content:"− "}
.why ul{margin:8px 0 0;padding-left:16px}
.why li{margin-bottom:3px}

.conf{width:112px;flex:none;text-align:right}
.conf-val{font-family:"IBM Plex Mono",monospace;font-size:13px}
.conf-band{font-size:11px;color:var(--ink-faint);margin-top:2px}
.conf-bar{height:3px;background:var(--rule-soft);margin-top:6px}
.conf-bar i{display:block;height:100%;background:var(--india)}
.b-medium .conf-bar i{background:var(--signal)}
.b-medium .conf-val{color:var(--signal)}
.b-review .conf-bar i{background:var(--ink-faint)}
.b-review .conf-val{color:var(--ink-faint)}

/* ----------------------------------------------------------- warnings --- */
.warn{
  display:flex;gap:10px;padding:11px 14px;margin-bottom:14px;
  background:var(--stop-wash);border-left:3px solid var(--stop);
  font-size:13.5px;color:#7E231C;
}

/* ---------------------------------------------------------- crosswalk --- */
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px;font-size:12px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.sw{width:11px;height:11px;display:inline-block}
.sw-ok{background:var(--india)} .sw-mid{background:var(--signal)} .sw-no{background:var(--stop)}

.cw-row{
  display:grid;grid-template-columns:1fr 150px 1fr;
  border:1px solid var(--rule-soft);border-bottom:none;
}
.cw-row:last-child{border-bottom:1px solid var(--rule-soft)}
.cw-side{padding:13px 15px;min-width:0}
.cw-side.in{background:var(--india-wash)}
.cw-side.us{background:var(--usa-wash)}
.cw-side .code{color:inherit}
.cw-side.in .code{color:#0B4F3E}
.cw-side.us .code{color:#143C6E}
.cw-side p{font-size:13px;line-height:1.45;margin-top:5px;color:var(--ink-soft)}
.cw-mid{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px 8px;text-align:center;
  border-left:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft);
}
.cw-rel{font-size:11.5px;font-weight:500;line-height:1.3}
.rel-identical .cw-rel{color:var(--india)}
.rel-related .cw-rel{color:var(--signal)}
.rel-no_equivalent .cw-rel{color:var(--stop)}
.cw-conf{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-faint)}
.cw-note{
  grid-column:1/-1;padding:10px 15px;background:#FCFDFC;
  border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--ink-soft);line-height:1.5;
}

/* -------------------------------------------------------------- score --- */
.score{margin-bottom:24px}
.score-num{font-family:"IBM Plex Mono",monospace;font-size:46px;line-height:1;font-weight:500}
.score-num small{font-size:20px;color:var(--ink-faint);margin-left:3px}
.score-bar{height:6px;background:var(--rule-soft);margin:14px 0 10px}
.score-bar div{height:100%;width:0;background:var(--india);transition:width .5s ease}
.score-note{font-size:12.5px;color:var(--ink-faint);max-width:62ch}

/* ------------------------------------------------------------- upload --- */
.upload{margin-bottom:24px}
.upload-drop{
  display:flex;flex-direction:column;gap:3px;cursor:pointer;
  padding:16px 18px;border:1px dashed var(--rule);background:#FBFCFB;
}
.upload-drop:hover{border-color:var(--ink-soft);background:#F8FAF9}
.upload-drop strong{font-size:14px;font-weight:500}
.upload-drop span{font-size:12.5px;color:var(--ink-faint)}
.evidence{list-style:none;margin:10px 0 0;padding:0}
.evidence li{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 12px;border:1px solid var(--rule-soft);margin-top:6px;
  font-size:13px;background:#fff;
}
.evidence code{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--india)}

/* ------------------------------------------------------------ buckets --- */
.bucket{margin-bottom:22px}
.bucket-head{
  display:flex;align-items:baseline;gap:10px;
  padding-bottom:8px;border-bottom:2px solid var(--rule);margin-bottom:2px;
}
.bucket-head h3{font-size:14.5px}
.bucket-head .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-faint)}
.bucket.ok .bucket-head{border-color:var(--india)}
.bucket.mid .bucket-head{border-color:var(--signal)}
.bucket.no .bucket-head{border-color:var(--stop)}
.bucket-item{
  display:grid;grid-template-columns:130px 1fr;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
}
.bucket-item .ref{font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.bucket-item .t{font-size:13.5px;line-height:1.45}
.bucket-item .r{font-size:12px;color:var(--ink-faint);margin-top:4px}

.next{
  padding:18px 20px;background:#FAFBFA;border:1px solid var(--rule-soft);
  margin-bottom:22px;
}
.next h3{margin-bottom:10px}
.next ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.65;color:var(--ink-soft)}
.next li{margin-bottom:6px}

.disclaimer{
  font-size:12px;color:var(--ink-faint);line-height:1.6;
  max-width:72ch;padding-top:6px;
}

/* -------------------------------------------------------------- toast --- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:11px 18px;font-size:13.5px;z-index:40;
}

.empty{padding:26px 0;color:var(--ink-faint);font-size:13.5px}

/* ------------------------------------------------------------- mobile --- */
@media (max-width:760px){
  :root{--gutter:86px;--rail:38px}
  .surface{padding:18px 12px 56px}
  .panel-body{padding:20px 16px 22px}
  .step-rail{padding-top:22px}
  h1{font-size:22px}
  #productName{font-size:16px}
  .field-row{grid-template-columns:1fr}
  .row{grid-template-columns:20px 1fr;gap:10px}
  .code{grid-column:2}
  .row-main{grid-column:2}
  .conf{grid-column:2;width:100%;text-align:left}
  .conf-bar{max-width:180px}
  .cw-row{grid-template-columns:1fr}
  .cw-mid{
    flex-direction:row;justify-content:flex-start;gap:10px;
    border:none;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  }
  .bucket-item{grid-template-columns:1fr;gap:4px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}