/* ===========================================================================
   MO SEBA (iOS) — the theme.

   A citizen application has to feel like it belongs on the phone it is
   installed on, and on iOS that is not a matter of taste - it is a set of
   conventions people have used ten thousand times and will not be taught
   again by a government app.

   What is being honoured, specifically:
   - Grouped inset lists: 10px corners, a 16px side gutter, and separators
     that start at the label rather than the card edge.
   - The system blue for anything interactive and nothing else. A government
     app that invents its own accent for "Apply" makes the button stop
     looking like a button.
   - A large title that is genuinely large, left-aligned, and sits above the
     content rather than in a bar.
   - The tab bar at the bottom with a hairline top border and 10px labels.
   - Sheets rise from the bottom with a grabber. Nothing appears in the middle
     of the screen.
   - -apple-system first in the stack, so this renders in San Francisco on the
     device it is pretending to be.

   Odia sits beside English throughout, because a citizen-facing application
   in Odisha that is English-only is not a citizen-facing application.
   =========================================================================== */
:root{
  --ios-bg:#F2F2F7;           /* systemGroupedBackground */
  --ios-card:#FFFFFF;
  --ios-label:#000000;
  --ios-label-2:#3C3C4399;    /* secondaryLabel */
  --ios-label-3:#3C3C434D;
  --ios-sep:#3C3C435C;
  --ios-blue:#007AFF;
  --ios-green:#34C759;
  --ios-orange:#FF9500;
  --ios-red:#FF3B30;
  --ios-fill:#78788033;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
       "Helvetica Neue",sans-serif;
  --odia:var(--f-odia);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* A COLUMN, not a row. The orientation strip is injected as the first child
   of <body>, so a row body puts it beside the content as a dark band down the
   left edge. The stage below is the row. */
body{
  margin:0;min-height:100vh;font:17px/1.4 var(--sf);color:#111;
  background:radial-gradient(80% 60% at 50% 0%,#EAEAF0,#D8D9E0 70%);
  display:flex;flex-direction:column;align-items:center;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.stage{display:flex;gap:46px;align-items:flex-start;padding:30px 22px 50px;
  flex-wrap:wrap;justify-content:center;max-width:1180px;width:100%}

/* ------------------------------------------------------------- the handset */
.device{
  width:393px;flex:none;border-radius:54px;padding:12px;background:#1C1C1E;
  box-shadow:0 0 0 2px #3A3A3C,0 34px 70px rgba(0,0,0,.34);
}
.screen{
  position:relative;border-radius:43px;overflow:hidden;background:var(--ios-bg);
  height:812px;display:flex;flex-direction:column;
}
/* the dynamic island */
.island{
  position:absolute;left:50%;top:11px;transform:translateX(-50%);
  width:118px;height:34px;border-radius:19px;background:#000;z-index:60;
}
.sbar{
  flex:none;display:flex;align-items:center;padding:14px 26px 6px;
  font:600 15px var(--sf);color:#000;height:50px;
}
.sbar .rr{margin-left:auto;display:flex;gap:6px;align-items:center}
.sbar svg{height:12px;fill:#000}

/* ------------------------------------------------------------------- nav */
.nav{
  flex:none;padding:0 16px 6px;background:var(--ios-bg);
}
.nav .back{
  display:inline-flex;align-items:center;gap:3px;color:var(--ios-blue);
  font-size:17px;height:38px;margin-left:-6px;
}
.nav .back svg{width:11px;height:19px;fill:none;stroke:var(--ios-blue);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.nav h1{
  margin:0;font-size:34px;line-height:1.14;font-weight:700;letter-spacing:-.022em;
}
.nav .od{font-family:var(--odia);font-size:15px;color:var(--ios-label-2);
  margin:3px 0 0;font-weight:400}

.body{flex:1;min-height:0;overflow-y:auto;padding-bottom:18px;
  -webkit-overflow-scrolling:touch}

/* -------------------------------------------------------- grouped lists */
.ghdr{
  font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ios-label-2);padding:22px 32px 7px;font-weight:400;
}
.grp{background:var(--ios-card);border-radius:10px;margin:0 16px;overflow:hidden}
.row{
  display:flex;align-items:center;gap:12px;padding:11px 16px;width:100%;
  text-align:left;position:relative;min-height:48px;
}
.row:active{background:#00000008}
/* the separator starts at the label, not the card edge - the detail that
   makes a list look native or not */
.row+.row::before{
  content:"";position:absolute;left:16px;right:0;top:0;height:.5px;
  background:var(--ios-sep);
}
.row.ic+.row.ic::before{left:58px}
.row .icn{
  width:30px;height:30px;border-radius:7px;flex:none;display:grid;
  place-items:center;
}
.row .icn svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.bl{background:var(--ios-blue)}.gr{background:var(--ios-green)}
.or{background:var(--ios-orange)}.rd{background:var(--ios-red)}
.pu{background:#AF52DE}.te{background:#30B0C7}
.row .tx{flex:1;min-width:0}
.row .tx b{display:block;font-size:17px;font-weight:400;letter-spacing:-.01em}
.row .tx .od{display:block;font-family:var(--odia);font-size:13.5px;
  color:var(--ios-label-2);margin-top:1px}
.row .tx .sub{display:block;font-size:13.5px;color:var(--ios-label-2);
  margin-top:2px;line-height:1.35}
.row .val{color:var(--ios-label-2);font-size:17px;flex:none}
.row .chev{width:8px;height:14px;flex:none;fill:none;stroke:var(--ios-label-3);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gfoot{font-size:13px;color:var(--ios-label-2);padding:7px 32px 0;line-height:1.4}

/* status pills */
.st{
  font-size:13px;font-weight:600;padding:3px 9px;border-radius:11px;flex:none;
  letter-spacing:-.01em;
}
.s-go{background:#34C75926;color:#248A3D}
.s-wait{background:#FF950026;color:#B25000}
.s-done{background:#007AFF1F;color:#0060DF}
.s-no{background:#FF3B3026;color:#C0392B}

/* --------------------------------------------------------------- the card */
.hero{
  margin:14px 16px 0;background:var(--ios-card);border-radius:14px;padding:16px;
}
.hero .hh{display:flex;align-items:flex-start;gap:12px}
.hero .hh .tt{flex:1;min-width:0}
.hero .hh b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.hero .hh span{display:block;font-size:14px;color:var(--ios-label-2);margin-top:2px}
.steps{display:flex;margin-top:16px}
.step{flex:1;text-align:center;position:relative}
.step::before{
  content:"";position:absolute;left:-50%;top:11px;width:100%;height:2px;
  background:var(--ios-fill);
}
.step:first-child::before{display:none}
.step.on::before{background:var(--ios-green)}
.step i{
  position:relative;display:grid;place-items:center;width:23px;height:23px;
  border-radius:50%;margin:0 auto 7px;background:var(--ios-fill);
}
.step.on i{background:var(--ios-green)}
.step.now i{background:var(--ios-blue)}
.step i svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3}
.step span{font-size:11px;color:var(--ios-label-2);display:block;line-height:1.3}
.step.now span{color:var(--ios-blue);font-weight:600}

/* --------------------------------------------------------------- buttons */
.cta{
  display:block;width:calc(100% - 32px);margin:16px;height:50px;
  background:var(--ios-blue);color:#fff;border-radius:12px;font-size:17px;
  font-weight:600;letter-spacing:-.01em;
}
.cta:active{background:#0062CC}
.cta.sec{background:var(--ios-fill);color:var(--ios-blue)}
.cta:disabled{background:var(--ios-fill);color:var(--ios-label-3)}

/* ------------------------------------------------------------- the sheet */
.scrim{position:absolute;inset:0;background:#00000059;z-index:70}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:71;background:var(--ios-bg);
  border-radius:14px 14px 0 0;max-height:88%;overflow-y:auto;padding-bottom:24px;
  animation:rise .3s cubic-bezier(.32,.72,0,1);
}
@keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:#00000040;
  margin:7px auto 4px}
.sheet .sh{
  display:flex;align-items:center;padding:8px 16px 12px;
}
.sheet .sh b{flex:1;text-align:center;font-size:17px;font-weight:600}
.sheet .sh button{color:var(--ios-blue);font-size:17px;min-width:60px}
.sheet .sh button.r{text-align:right}
.fld{padding:11px 16px;display:flex;align-items:center;gap:12px;min-height:48px;
  position:relative}
.fld+.fld::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;
  background:var(--ios-sep)}
.fld label{width:106px;flex:none;font-size:17px}
.fld input,.fld select{
  flex:1;min-width:0;border:0;background:none;font:17px var(--sf);
  text-align:right;color:var(--ios-label-2);outline:0;
}
.fld input::placeholder{color:var(--ios-label-3)}
.seg{
  display:flex;background:var(--ios-fill);border-radius:9px;padding:2px;
  margin:12px 16px;
}
.seg button{
  flex:1;padding:7px 4px;border-radius:7px;font-size:13px;font-weight:500;
  color:#000;
}
.seg button[aria-pressed=true]{background:#fff;font-weight:600;
  box-shadow:0 3px 8px #0000001f}

/* ------------------------------------------------------------- tab bar */
.tabbar{
  flex:none;display:flex;background:#F9F9F9F2;backdrop-filter:blur(20px);
  border-top:.5px solid var(--ios-sep);padding:7px 0 22px;
}
/* min-height 44px because that is APPLE's floor, not a generic web one: the
   HIG puts every control at 44x44pt minimum, and a tab bar is the most
   thumbed control on the screen. These were 42px - icon 25 + gap 3 + label 10
   + line-height - which is the sort of two-pixel miss that an iOS reviewer
   spots immediately in an application claiming to be built to the platform.
   The 10px label stays: 10px IS the iOS tab-bar metric, and it is the
   platform exception recorded in 00-DESIGN.md, not a stray small size. */
.tabbar button{flex:1;display:grid;place-items:center;gap:3px;min-height:44px;
  color:var(--ios-label-2);font-size:10px;letter-spacing:0}
.tabbar button svg{width:25px;height:25px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-selected=true]{color:var(--ios-blue)}
.tabbar button[aria-selected=true] svg{stroke-width:2.3}

/* ------------------------------------------------------------- the aside */
.notes{flex:1;min-width:280px;max-width:420px;padding-top:16px;color:#1B1C20}
.notes h2{margin:0 0 7px;font-size:24px;font-weight:700;letter-spacing:-.025em}
.notes .lede{margin:0 0 20px;font-size:16px;line-height:1.6;color:#4A4C55}
.nb{border-left:3px solid var(--ios-blue);padding:1px 0 1px 15px;margin-bottom:18px}
.nb h3{margin:0 0 4px;font-size:16px;font-weight:650}
.nb p{margin:0;font-size:14.5px;line-height:1.6;color:#4A4C55}
.nb code{font:13px ui-monospace,Consolas,monospace;background:#fff;padding:1px 5px;
  border-radius:4px}

@media(max-width:900px){
  .stage{gap:26px;padding:18px 14px 36px}
  .notes{max-width:none}
}
@media(max-width:430px){
  .device{width:100%;padding:0;border-radius:0;box-shadow:none;background:none}
  .screen{border-radius:0;height:auto;min-height:calc(100vh - 42px)}
  .island{display:none}
}
@media(prefers-reduced-motion:reduce){.sheet{animation:none}}


/* ==========================================================================
   iOS FIDELITY PASS
   Avick's brief was that the handset apps should have "iPhone app look and
   feel". The bones were already right: grouped inset lists, the system blue
   reserved for interactive, a genuinely large left-aligned title, a blurred
   tab bar, -apple-system first. Four things were missing or wrong.
   ========================================================================= */

/* ---- 1. A REAL BUG. The glyph sizing rule was `.row .icn svg`, scoped to a
   list row. The hero card's icon is not in a row, so its SVG inherited no
   size, filled its 38x38 box edge to edge, and the white strokes landed on
   the boundary where they read as nothing. On screen it was a plain blue
   square with no symbol in it, which is exactly what an unfinished app looks
   like. Sized as a PROPORTION so it is right at 30px and at 38px and at
   whatever size the next one is. */
.icn svg{width:57%;height:57%;fill:none;stroke:#fff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- 2. The handset was taller than the window. 812px of screen plus 24px
   of bezel plus the stage padding exceeds an 838px content area once the
   demo strip takes its 62px, so the bottom of the phone, tab bar included,
   was cut off by the viewport. The screen now takes the smaller of its
   design height and what the window actually has. */
.screen{height:min(812px,calc(100vh - 168px));min-height:560px}

/* ---- 3. The press state was #00000008, which is about 3% black and
   invisible on a white row. iOS highlights a tapped row clearly and
   immediately, and that feedback is most of why a native list feels
   responsive. No transition on the way IN: a press must register at once. */
.row:active{background:var(--ios-fill)}
.tabbar button:active{opacity:.45}

/* ---- 4. THE LARGE-TITLE COLLAPSE, which is the single most recognisable
   iOS interaction and was not here at all. Scrolling the list shrinks the
   34px title away and fades in a compact centred title on a blurred bar,
   exactly as every stock iOS app does.

   Driven by a class on .screen rather than by animating scroll position, so
   it costs one class toggle and the browser does the rest. The compact bar
   is `aria-hidden` and the real <h1> stays in the document, so the heading
   structure never changes under a screen reader. */
.navbar{
  position:absolute;left:0;right:0;top:0;z-index:55;
  height:96px;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:9px;
  background:#F2F2F7CC;backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:.5px solid transparent;
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--e-out,cubic-bezier(.16,.84,.26,1)),
             border-color .22s ease;
}
.navbar b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.screen.compact .navbar{opacity:1;border-bottom-color:var(--ios-sep)}
.nav h1,.nav .od{
  transform-origin:left top;
  transition:opacity .2s cubic-bezier(.16,.84,.26,1),
             transform .26s cubic-bezier(.16,.84,.26,1);
}
.screen.compact .nav h1{opacity:0;transform:translateY(-8px) scale(.55)}
.screen.compact .nav .od{opacity:0;transform:translateY(-6px)}

/* the sheet gets a spring rather than an ease, because a sheet that rises
   and settles reads as a physical object and an eased one reads as a div */
.sheet{animation-timing-function:cubic-bezier(.32,1.34,.5,1)!important}

@media(prefers-reduced-motion:reduce){
  .navbar,.nav h1,.nav .od{transition:none}
  .sheet{animation:none!important}
}