/* Manwatkar Hospital — public site.
   ---------------------------------------------------------------------------
   Set like the hospital's own stationery, not like a landing page. The two
   artifacts this borrows from are the prescription letterhead (name, degrees,
   registration number, a heavy rule under the masthead) and the bilingual OPD
   signboard on the wall (a ruled timetable, Devanagari above English).

   Rules that hold everywhere:
   - Vermilion is EMERGENCY and nothing else. Never a button, never a heading,
     never decoration. In Indian medical signage red carries one meaning, and
     spending it on a call-to-action would make casualty harder to find.
   - No cards, no shadows, no gradients, no rounded corners except on controls
     the finger actually touches.
   - No motion. A hospital page should sit still.
   - Tabular numerals throughout: times and phone numbers line up in columns.
   - System fonts only. Patients here are on 3G, and a webfont that fails to
     load leaves the timetable unreadable.
*/

/* "only light" opts out of Chrome's Auto Dark Mode. Without it Chrome inverts
   the page on phones set to dark, and an inverted medical page puts white text
   on the emergency red and makes the OPD board hard to read. */
:root{
  color-scheme: only light;
  --paper:#f9faf8;        /* clinical white, faint green cast */
  --paper-2:#f2f4f0;
  --ink:#14181a;          /* near-black, green-grey */
  --ink-soft:#4e564f;
  --bottle:#0e4a34;       /* institutional green: rules, labels, structure */
  --bottle-soft:#2a6a51;
  --vermilion:#b3261e;    /* EMERGENCY ONLY */
  --rule:#d5dad2;
  --rule-strong:#9aa599;
  --wrap:1140px;
  --rail:132px;           /* marginal label column */

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
         "Noto Sans Devanagari",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,
          "Noto Serif Devanagari",serif;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
a{color:var(--bottle)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--bottle);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:20;background:var(--ink);color:#fff;padding:.6rem 1rem}

/* ── emergency strip ─────────────────────────────────────────────────────── */
.emg{background:var(--vermilion);color:#fff}
.emg .wrap{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;
  padding:.6rem 1.5rem;flex-wrap:wrap}
.emg-label{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.emg-text{font-size:.95rem}
.emg-text b{font-weight:600}
.emg a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.55)}
.emg a:hover{border-bottom-color:#fff}

/* ── letterhead masthead ─────────────────────────────────────────────────── */
.masthead{border-bottom:2.5px solid var(--ink);background:var(--paper)}
.masthead .wrap{padding-top:2rem;padding-bottom:1.25rem}
@media(max-width:700px){
  .masthead .wrap{padding-top:1.4rem;padding-bottom:1rem}
  .mast-meta{gap:.2rem .9rem;line-height:1.5}
  body{font-size:16px}
}
.mast-mr{
  font-family:var(--serif);
  font-size:clamp(2.1rem,6.2vw,3.6rem); line-height:1.12; margin:0;
  color:var(--bottle); font-weight:600; letter-spacing:.005em;
}
.mast-en{
  margin:.35rem 0 0; font-size:clamp(.95rem,2.4vw,1.22rem); font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink);
}
.mast-rule{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--ink-soft);
  margin:.6rem 0 0}
.mast-meta{margin:.9rem 0 0;font-size:.82rem;color:var(--ink-soft);
  display:flex;gap:.55rem 1.4rem;flex-wrap:wrap}
.mast-meta span{white-space:nowrap}

/* ── navigation ──────────────────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--rule);background:var(--paper);
  position:sticky;top:0;z-index:10}
.nav .wrap{display:flex;align-items:center;gap:1.6rem;min-height:52px;flex-wrap:wrap}
.nav a{font-size:.79rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);padding:.9rem 0;border-bottom:2px solid transparent;
  margin-bottom:-1px}
.nav a:hover{color:var(--ink);border-bottom-color:var(--bottle)}
.nav a[aria-current=page]{color:var(--bottle);border-bottom-color:var(--bottle)}
.nav .nav-book{margin-left:auto;color:var(--bottle)}

/* On a phone the nav wrapped to three rows and pushed the timetable most of a
   screen down. One scrolling strip instead, like a newspaper section bar. */
@media(max-width:700px){
  .nav .wrap{flex-wrap:nowrap;overflow-x:auto;gap:1.35rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;min-height:46px}
  .nav .wrap::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:.75rem 0;font-size:.75rem}
  .nav .nav-book{margin-left:0;padding-right:1.5rem}
}

/* ── editorial rail layout ───────────────────────────────────────────────── */
.band{border-bottom:1px solid var(--rule)}
.band .wrap{display:grid;grid-template-columns:var(--rail) 1fr;gap:0 2.5rem;
  padding-top:3.2rem;padding-bottom:3.2rem}
.rail{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bottle);padding-top:.45rem}
.rail small{display:block;font-weight:600;letter-spacing:.04em;text-transform:none;
  color:var(--ink-soft);font-size:.78rem;margin-top:.35rem}
.col{min-width:0}
@media(max-width:760px){
  .band .wrap{grid-template-columns:1fr;gap:.9rem}
  .rail{padding-top:0}
}

h2.head{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.25rem);
  line-height:1.15;margin:0 0 1rem;font-weight:600;letter-spacing:-.01em}
.lede{font-family:var(--serif);font-size:clamp(1.12rem,2.3vw,1.42rem);line-height:1.5;
  margin:0 0 1.4rem;max-width:34ch;color:var(--ink)}
.body{max-width:60ch;color:var(--ink-soft)}
.body p{margin:0 0 1rem}

/* ── OPD board: the signature element ────────────────────────────────────── */
.board{width:100%;border-collapse:collapse;margin:0;font-size:.95rem}
.board caption{text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bottle);padding-bottom:.7rem}
.board th,.board td{text-align:left;padding:.5rem .8rem;border-bottom:1px solid var(--rule);
  vertical-align:baseline}
.board thead th{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1.5px solid var(--rule-strong);padding-bottom:.5rem}
.board th:first-child,.board td:first-child{padding-left:0}
.board .day{font-weight:600;color:var(--ink);white-space:nowrap}
.board .day i{font-style:normal;display:block;font-weight:400;
  color:var(--ink-soft);font-size:1rem;line-height:1.35}
.board .open{color:var(--ink)}
/* Closed reads as a word, never as a struck-through time. */
.board .shut{color:var(--ink-soft);font-weight:700;font-size:.76rem;
  letter-spacing:.15em;text-transform:uppercase}
.board .shut i{font-style:normal;display:block;font-weight:400;font-size:1rem;
  letter-spacing:0;text-transform:none;line-height:1.35}
.board tbody tr:last-child th,.board tbody tr:last-child td{border-bottom:1.5px solid var(--rule-strong)}
@media(max-width:520px){
  .board{font-size:.88rem}
  .board th,.board td{padding:.5rem .45rem}
  .board thead th{font-size:.6rem;letter-spacing:.1em}
  .board .day i,.board .shut i{font-size:.9rem}
}
.board-note{margin:.9rem 0 0;font-size:.85rem;color:var(--ink-soft)}
.board-emg{margin:.55rem 0 0;font-size:.85rem;color:var(--vermilion);font-weight:600}

/* ── actions ─────────────────────────────────────────────────────────────── */
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.btn{display:inline-block;padding:.78rem 1.5rem;font-size:.82rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--bottle);
  border-radius:2px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.btn-solid{background:var(--bottle);color:var(--paper)}
.btn-solid:hover{background:#0a3a28}
.btn-line{background:transparent;color:var(--bottle)}
.btn-line:hover{background:var(--paper-2)}

/* ── prescriber blocks (doctors) ─────────────────────────────────────────── */
.prescriber{padding:1.5rem 0;border-top:1px solid var(--rule)}
.prescriber:first-child{border-top:0;padding-top:0}
.prescriber h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin:0;letter-spacing:-.01em}
.prescriber .degrees{margin:.25rem 0 0;font-size:.82rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--bottle)}
.prescriber .reg{margin:.35rem 0 0;font-size:.82rem;color:var(--ink-soft)}
.prescriber .bio{margin:.7rem 0 0;max-width:58ch;color:var(--ink-soft)}
.prescriber .fee{margin:.5rem 0 0;font-size:.88rem;color:var(--ink-soft)}

/* ── plain lists (services, contact) ─────────────────────────────────────── */
.listing{list-style:none;margin:0;padding:0}
.listing li{padding:.95rem 0;border-top:1px solid var(--rule);display:flex;
  gap:1.2rem;align-items:baseline;flex-wrap:wrap}
.listing li:first-child{border-top:0}
.listing .name{font-weight:600;min-width:14ch}
.listing .name i{font-style:normal;display:block;font-family:var(--serif);font-weight:400;
  color:var(--ink-soft);font-size:.95rem}
.listing .desc{color:var(--ink-soft);flex:1 1 22ch;font-size:.95rem}

.datalist{margin:0}
.datalist dt{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:1.1rem}
.datalist dt:first-child{margin-top:0}
.datalist dd{margin:.25rem 0 0;font-size:1.02rem}
.datalist dd a{text-decoration:none;border-bottom:1px solid var(--rule-strong)}

/* ── notices ─────────────────────────────────────────────────────────────── */
.notice{border-left:3px solid var(--bottle);padding:.2rem 0 .2rem 1.1rem;margin:0 0 1.3rem}
.notice h3{margin:0 0 .2rem;font-size:1rem;font-weight:700}
.notice p{margin:0;color:var(--ink-soft);font-size:.95rem}
.flash{border-left:3px solid var(--bottle);padding:.75rem 1.1rem;margin:1.5rem 0 0;
  background:var(--paper-2);font-size:.95rem}
.flash.error{border-left-color:var(--vermilion)}

/* ── forms ───────────────────────────────────────────────────────────────── */
.form{max-width:34rem}
.form-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
.field{margin:0 0 1.35rem;flex:1 1 190px}
.field label,.field legend{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem;padding:0}
.field input[type=text],.field input[type=date],.field select{
  width:100%;padding:.72rem .8rem;font-size:1rem;font-family:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--rule-strong);border-radius:2px}
.field input:focus,.field select:focus{border-color:var(--bottle);outline:none;
  box-shadow:inset 0 0 0 1px var(--bottle)}
fieldset.field{border:0;margin:0 0 1.35rem;padding:0}
.hint{margin:.4rem 0 0;font-size:.83rem;color:var(--ink-soft)}
.err{margin:.4rem 0 0;font-size:.85rem;color:var(--vermilion);font-weight:600}

/* sitting picker — two large targets, priced like a timetable row */
.sittings{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sitting input{position:absolute;width:1px;height:1px;opacity:0}
.sitting span{display:block;padding:.95rem 1.1rem;border:1.5px solid var(--rule-strong);
  border-radius:2px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.sitting b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.2rem}
.sitting time{font-family:var(--serif);font-size:1.24rem;color:var(--ink)}
.sitting span:hover{border-color:var(--bottle)}
.sitting input:checked+span{border-color:var(--bottle);background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--bottle)}
.sitting input:checked+span b{color:var(--bottle)}
.sitting input:focus-visible+span{outline:2px solid var(--bottle);outline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ── confirmation ────────────────────────────────────────────────────────── */
.receipt{max-width:31rem;border:1.5px solid var(--ink);padding:1.8rem}
.receipt-head{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bottle);border-bottom:1.5px solid var(--rule-strong);padding-bottom:.7rem;margin-bottom:1.2rem}
.receipt h1{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin:0 0 1.2rem}
.receipt dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.5rem;margin:0 0 1.4rem}
.receipt dt{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);align-self:baseline}
.receipt dd{margin:0;font-weight:600}
.receipt .after{border-top:1px solid var(--rule);padding-top:1.1rem;font-size:.93rem;
  color:var(--ink-soft)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{border-top:2.5px solid var(--ink);margin-top:0;background:var(--paper)}
.foot .wrap{display:grid;gap:2rem;padding-top:2.6rem;padding-bottom:2rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot h4{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bottle);margin:0 0 .7rem}
.foot p{margin:.25rem 0;font-size:.93rem;color:var(--ink-soft)}
.foot a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot a:hover{color:var(--ink);border-bottom-color:var(--rule-strong)}
.foot .emg-line{color:var(--vermilion);font-weight:600}
.colophon{border-top:1px solid var(--rule);padding:1.1rem 0 2.4rem}
.colophon p{margin:0;font-size:.8rem;color:var(--ink-soft)}

.empty{color:var(--ink-soft);max-width:52ch}
.callout{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.4rem);margin:.4rem 0 2rem}
.callout a{text-decoration:none;border-bottom:2px solid var(--rule-strong)}
.callout a:hover{border-bottom-color:var(--bottle)}

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