/* ===========================================================================
   SANJOG (Android) — the theme.

   Material 3, honoured properly, because the point of building two handset
   applications is that they must not look like the same application with a
   different accent colour. Everything below is a Material convention and
   none of it is an iOS one:

   - A TONAL SURFACE LADDER, not white cards on grey. M3 stacks surfaces by
     elevation as tints of the primary hue: surface, surface-container,
     surface-container-high. There is no shadow anywhere in this file.
   - CONTAINER / ON-CONTAINER PAIRS. Every coloured element carries its own
     legible foreground - primary-container with on-primary-container - which
     is what keeps contrast right when the palette is regenerated from a
     wallpaper.
   - LARGE, SOFT CORNERS. 16dp on cards, 28dp on the FAB and the sheet, full
     round on chips. iOS is 10; Android is not.
   - AN EXTENDED FAB, bottom right, above the navigation bar.
   - A NAVIGATION BAR with a pill-shaped active indicator behind the icon.
   - Roboto first in the stack.

   The one thing that is not decoration: this is health data, so nothing here
   is real, and the application shows what it holds and for how long.
   =========================================================================== */
:root{
  /* an M3 tonal scheme, green seed */
  --m-primary:#3B6B27;
  --m-on-primary:#FFFFFF;
  --m-primary-c:#BCF39A;
  --m-on-primary-c:#062100;
  --m-secondary:#55624C;
  --m-secondary-c:#D9E7CB;
  --m-on-secondary-c:#131F0D;
  --m-tertiary:#19686A;
  --m-tertiary-c:#A0EFF1;
  --m-on-tertiary-c:#002020;
  --m-error:#B3261E;
  --m-error-c:#F9DEDC;
  --m-on-error-c:#410E0B;
  --m-surface:#F9FAF3;
  --m-surface-1:#F1F4EA;
  --m-surface-2:#EBEEE3;
  --m-surface-3:#E5E9DC;
  --m-on-surface:#1A1C18;
  --m-on-surface-var:#44483E;
  --m-outline:#75796C;
  --m-outline-var:#C5C8BA;
  --rob:Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;
  --odia:var(--f-odia);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;min-height:100vh;font:16px/1.5 var(--rob);color:var(--m-on-surface);
  background:radial-gradient(80% 60% at 50% 0%,#E8EDE2,#CFD6C7 72%);
  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:392px;flex:none;border-radius:34px;padding:10px;background:#2A2E26;
  box-shadow:0 0 0 1.5px #414539,0 30px 64px rgba(0,0,0,.34);
}
.screen{
  position:relative;border-radius:26px;overflow:hidden;background:var(--m-surface);
  height:806px;display:flex;flex-direction:column;
}
.sbar{
  flex:none;display:flex;align-items:center;padding:10px 18px 4px;
  font:500 13px var(--rob);color:var(--m-on-surface-var);
}
.sbar .rr{margin-left:auto;display:flex;gap:6px;align-items:center}
.sbar svg{height:13px;fill:var(--m-on-surface-var)}

/* --------------------------------------------------------------- app bar */
.appbar{flex:none;padding:6px 8px 14px 18px}
.appbar .r1{display:flex;align-items:center;gap:6px;min-height:48px}
.appbar .r1 .ib{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;
}
.appbar .r1 .ib:active{background:#1A1C1814}
.appbar .r1 .ib svg{width:23px;height:23px;fill:none;stroke:var(--m-on-surface-var);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.appbar .r1 .sp{flex:1}
.appbar h1{margin:6px 0 0;font-size:28px;line-height:1.24;font-weight:400;
  letter-spacing:0}
.appbar .od{font-family:var(--odia);font-size:13.5px;color:var(--m-on-surface-var);
  margin:3px 0 0}

/* ---------------------------------------------------------------- chips */
/* The top padding is 10px and not 2px for a reason that is invisible until
   you test it: this row is overflow-x:auto, and per spec a box with one axis
   not `visible` clips the OTHER axis too. The chips' 8px hit-area overhang was
   being clipped away at the top edge, so the enlarged touch target existed in
   the stylesheet and not on the screen. Ten pixels of padding keeps the
   overhang inside the padding box, where it is not clipped. */
.chips{display:flex;gap:8px;padding:10px 18px 14px;overflow-x:auto;flex:none}
.chip{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;
  border:1px solid var(--m-outline-var);border-radius:8px;font-size:14px;
  font-weight:500;color:var(--m-on-surface-var);white-space:nowrap;flex:none;
  background:none;
}
.chip[aria-pressed=true]{
  background:var(--m-secondary-c);border-color:transparent;
  color:var(--m-on-secondary-c);padding-left:9px;
}
.chip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;display:none}
.chip[aria-pressed=true] svg{display:block}

/* ----------------------------------------------------------------- list */
.body{flex:1;min-height:0;overflow-y:auto;padding:0 12px 108px}
.card{
  background:var(--m-surface-2);border-radius:16px;padding:14px 16px;
  margin-bottom:10px;width:100%;text-align:left;display:block;
}
.card:active{background:var(--m-surface-3)}
.card.due{background:var(--m-error-c)}
.card.soon{background:var(--m-primary-c)}
.card .ch{display:flex;align-items:flex-start;gap:13px}
.card .av{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--m-tertiary-c);color:var(--m-on-tertiary-c);
  font:500 16px var(--rob);letter-spacing:.02em;
}
.card.due .av{background:#FFFFFFAD;color:var(--m-on-error-c)}
.card.soon .av{background:#FFFFFF9E;color:var(--m-on-primary-c)}
.card .tt{flex:1;min-width:0}
.card .tt b{display:block;font-size:16px;font-weight:500;letter-spacing:.01em}
.card .tt .sub{display:block;font-size:13.5px;color:var(--m-on-surface-var);
  margin-top:2px;line-height:1.4}
.card.due .tt .sub{color:var(--m-on-error-c)}
.card.soon .tt .sub{color:var(--m-on-primary-c)}
.card .when{font-size:12.5px;color:var(--m-on-surface-var);flex:none;text-align:right;
  line-height:1.35}
.card .tags{display:flex;gap:6px;flex-wrap:wrap;margin:11px 0 0 55px}
.tg{
  font-size:12px;font-weight:500;padding:3px 9px;border-radius:7px;
  background:#1A1C1814;color:var(--m-on-surface-var);
}
.card.due .tg{background:#FFFFFF8A;color:var(--m-on-error-c)}
.card.soon .tg{background:#FFFFFF80;color:var(--m-on-primary-c)}
.tg.warn{background:var(--m-error);color:#fff}

.sechd{
  font-size:14px;font-weight:500;color:var(--m-on-surface-var);
  padding:16px 6px 9px;letter-spacing:.01em;
}

/* ------------------------------------------------------------------- FAB */
.fab{
  position:absolute;right:16px;bottom:96px;z-index:30;height:56px;
  display:inline-flex;align-items:center;gap:11px;padding:0 20px;
  border-radius:16px;background:var(--m-primary-c);color:var(--m-on-primary-c);
  font-size:15px;font-weight:500;
}
.fab:active{filter:brightness(.95)}
.fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}

/* ------------------------------------------------------------------- nav */
.navbar{
  flex:none;display:flex;background:var(--m-surface-2);padding:11px 0 16px;
}
.navbar button{flex:1;display:grid;place-items:center;gap:4px;
  font-size:12px;font-weight:500;color:var(--m-on-surface-var)}
.navbar .ind{
  width:64px;height:32px;border-radius:16px;display:grid;place-items:center;
  transition:background .18s;
}
.navbar button[aria-selected=true] .ind{background:var(--m-secondary-c)}
.navbar button[aria-selected=true]{color:var(--m-on-surface)}
.navbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.navbar button[aria-selected=true] svg{stroke-width:2.4}

/* ---------------------------------------------------------------- sheet */
.scrim{position:absolute;inset:0;background:#00000052;z-index:70}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:71;background:var(--m-surface-1);
  border-radius:28px 28px 0 0;max-height:90%;overflow-y:auto;padding:0 0 22px;
  animation:rise .25s cubic-bezier(.05,.7,.1,1);
}
@keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet .drag{width:32px;height:4px;border-radius:2px;background:#44483E52;
  margin:16px auto 6px}
.sheet h2{margin:0;padding:8px 24px 4px;font-size:22px;font-weight:400}
.sheet .sub{margin:0;padding:0 24px 16px;font-size:14px;color:var(--m-on-surface-var)}
.sheet .grp{padding:0 16px}
.tf{
  position:relative;margin-bottom:12px;background:var(--m-surface-3);
  border-radius:4px 4px 0 0;border-bottom:1px solid var(--m-on-surface-var);
  padding:22px 16px 7px;
}
.tf label{
  position:absolute;left:16px;top:7px;font-size:12px;color:var(--m-on-surface-var);
}
.tf input,.tf select{width:100%;border:0;background:none;font:16px var(--rob);
  outline:0;color:var(--m-on-surface)}
.tf:focus-within{border-bottom:2px solid var(--m-primary);padding-bottom:6px}
.tf:focus-within label{color:var(--m-primary)}
.radios{display:grid;gap:2px;padding:4px 8px 10px}
.rd{display:flex;align-items:center;gap:13px;padding:11px 8px;border-radius:12px;
  width:100%;text-align:left}
.rd:active{background:#1A1C180F}
.rd .dot{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--m-outline);
  flex:none;display:grid;place-items:center;
}
.rd[aria-checked=true] .dot{border-color:var(--m-primary)}
.rd[aria-checked=true] .dot::after{content:"";width:10px;height:10px;
  border-radius:50%;background:var(--m-primary)}
.rd .lbl{flex:1;min-width:0}
.rd .lbl b{display:block;font-size:15px;font-weight:500}
.rd .lbl span{display:block;font-size:13px;color:var(--m-on-surface-var);
  margin-top:1px;line-height:1.4}
.sheetacts{display:flex;gap:9px;padding:14px 20px 0;justify-content:flex-end}
.btn{
  height:40px;padding:0 24px;border-radius:20px;font-size:14px;font-weight:500;
}
.btn.filled{background:var(--m-primary);color:var(--m-on-primary)}
.btn.filled:active{filter:brightness(1.1)}
.btn.text{color:var(--m-primary)}
.btn.tonal{background:var(--m-secondary-c);color:var(--m-on-secondary-c)}
.btn:disabled{background:#1A1C181F;color:#1A1C1861}

/* --------------------------------------------------------------- snackbar */
.snack{
  position:absolute;left:16px;right:16px;bottom:88px;z-index:80;
  background:#31352D;color:#F1F2E9;border-radius:6px;padding:14px 16px;
  font-size:14px;line-height:1.45;display:flex;gap:12px;align-items:center;
  animation:rise .2s ease-out;
}
.snack b{color:#BCF39A;font-weight:500;white-space:nowrap}

/* ------------------------------------------------------------- the aside */
.notes{flex:1;min-width:280px;max-width:420px;padding-top:16px}
.notes h2{margin:0 0 7px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.notes .lede{margin:0 0 20px;font-size:16px;line-height:1.6;color:#454A40}
.nb{border-left:3px solid var(--m-primary);padding:1px 0 1px 15px;margin-bottom:18px}
.nb h3{margin:0 0 4px;font-size:16px;font-weight:600}
.nb p{margin:0;font-size:14.5px;line-height:1.6;color:#454A40}
.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)}
}
@media(prefers-reduced-motion:reduce){.sheet,.snack{animation:none}}

/* ------------------------------------------------------- touch, on a phone
   A Material 3 filter chip is 32dp tall and that is the specification, not an
   oversight - making it 44 stops it being a Material chip, which is the whole
   argument of this application. Material's own guidance reaches the 48dp
   target with HIT AREA rather than height, so that is what this does: the
   chip stays 32dp and grows an invisible 48dp target around it.

   Same reasoning for the navigation bar: the 32dp pill is the indicator, and
   the item's own height already carries the target. */
.chip{position:relative}
.chip::after{
  content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px;
}
@media(max-width:620px) and (pointer:coarse){
  .card{min-height:72px}
}


/* ==========================================================================
   MATERIAL 3 FIDELITY PASS
   The counterpart to Mo Seba's iOS pass. Two real faults.

   1. THE HANDSET WAS TALLER THAN THE WINDOW. 806px of screen plus the bezel
      plus the stage padding measured 919px inside a 900px viewport, so the
      bottom of the phone was cut off by the browser. Same fault Mo Seba had.

   2. NO STATE LAYERS. This is the Material 3 equivalent of Mo Seba's missing
      large-title collapse: the single most recognisable behaviour of the
      platform, absent. M3 does not use a ripple any more; it specifies a
      STATE LAYER, a translucent overlay of the element's own on-colour at a
      defined opacity per state: hover 8%, focus 10%, pressed 10%. That is
      why a Material button darkens rather than glowing, and why it works on
      any generated palette.

      Implemented with the real on-colour per component, so a chip, the FAB
      and a nav item each tint with their OWN foreground rather than a shared
      grey. A shared grey is the thing that makes an imitation look like an
      imitation.
   ========================================================================= */
.screen{height:min(806px,calc(100vh - 168px));min-height:560px}

/* ---- the state layer. `currentColor` is the component's own on-colour, so
   this is correct on every surface without naming one. */
.chip,.fab,.tabbar button,.card,.row,.nb,button{
  position:relative;isolation:isolate;
}
.chip::after,.fab::after,.tabbar button::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;background:currentColor;
  opacity:0;transition:opacity .1s linear;
  pointer-events:none;
}
/* M3 opacities, not invented ones */
.chip:hover::after,.fab:hover::after,.tabbar button:hover::after{opacity:.08}
.chip:focus-visible::after,.fab:focus-visible::after,
.tabbar button:focus-visible::after{opacity:.10}
.chip:active::after,.fab:active::after,.tabbar button:active::after{opacity:.10}

/* the FAB already dimmed with a filter, which is not the platform behaviour
   and fought the state layer */
.fab:active{filter:none}

/* ---- the nav indicator. M3 moves an active-indicator pill behind the
   selected item rather than only recolouring it, and the pill is what makes
   a Material bottom bar read as Material. */
.tabbar button{transition:color .12s linear}

@media(prefers-reduced-motion:reduce){
  .chip::after,.fab::after,.tabbar button::after{transition:none}
}