/* how much lah — kopitiam daylight. Hawker-sign red+blue on warm paper,
   HDB mint + mustard accents, mosaic tile strip. Numerals mono. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap');
:root{
  --paper:#f8f2e3; --card:#fffdf6; --ink:#221c12; --dim:#6f6350; --faint:#a09580;
  --red:#c92f27; --blue:#1d4e9e; --mint:#3f8f74; --mustard:#c9931d; --burnt:#c05a1f;
  --line:#e2d7bd; --rule:#d3c5a4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);
  font:16px/1.5 "Bricolage Grotesque",-apple-system,system-ui,sans-serif;
  padding-bottom:90px;overflow-x:hidden}
/* mosaic tile strip along the very top — hawker-centre wall */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:10px;z-index:9;
  background:repeating-linear-gradient(90deg,
    var(--mint) 0 22px, #fff 22px 24px, var(--blue) 24px 46px, #fff 46px 48px,
    var(--red) 48px 70px, #fff 70px 72px, var(--mustard) 72px 94px, #fff 94px 96px)}
.num{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}

nav.tabs{display:flex;gap:8px;padding:26px 14px 0;max-width:640px;margin:0 auto;font-size:13.5px}
nav.tabs a{color:var(--blue);text-decoration:none;padding:6px 13px;border:1.5px solid var(--blue);
  border-radius:3px;background:var(--card);font-weight:700}
nav.tabs a.here{color:#fff;background:var(--red);border-color:var(--red);transform:rotate(-1.2deg)}

header{padding:18px 18px 2px;max-width:640px;margin:0 auto}
/* the stall sign: white acrylic panel, double rule, red + blue lettering */
.sign{background:var(--card);border:3px solid var(--ink);box-shadow:0 0 0 3px var(--card),0 0 0 4.5px var(--ink),4px 6px 0 rgba(34,28,18,.18);
  padding:16px 18px 14px;border-radius:2px}
h1{font-size:38px;font-weight:800;letter-spacing:-.8px;line-height:.98;color:var(--blue);font-stretch:88%}
h1 .lah{color:var(--red);display:inline-block;transform:rotate(-2.2deg)}
.tag{color:var(--dim);margin-top:8px;font-size:14.5px;max-width:38ch}
.hero{margin:12px -4px -2px;padding:12px 14px;background:#fdf7dd;border:2px dashed var(--mustard);
  border-radius:3px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero .fact{font-size:21px;font-weight:750;line-height:1.22;color:var(--ink)}
.hero .fact b{color:var(--red)}
.hero .sub{color:var(--faint);font-size:11px;margin-top:5px;letter-spacing:.14em;text-transform:uppercase}

.controls{position:sticky;top:10px;z-index:5;background:linear-gradient(var(--paper) 80%,transparent);
  padding:12px 18px 16px;max-width:640px;margin:0 auto}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.yearwrap,.birthwrap{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:10px}
.year,.birth{font-size:34px;font-weight:800;color:var(--red);min-width:96px;transform:rotate(-2deg)}
input[type=range]{flex:1;appearance:none;height:5px;border-radius:3px;outline:none;
  background:repeating-linear-gradient(90deg,var(--rule) 0 8px,transparent 8px 12px)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ef6d60,var(--red) 62%);
  border:3px solid var(--paper);box-shadow:0 0 0 2px var(--red),0 3px 8px rgba(201,47,39,.35);cursor:pointer}
.seg{display:flex;background:var(--card);border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.seg button{background:none;border:0;color:var(--dim);font:inherit;font-size:13.5px;padding:8px 13px;cursor:pointer;font-weight:700}
.seg button.on{background:var(--blue);color:#fff}

main{max-width:640px;margin:0 auto;padding:0 12px}
.band{margin-top:32px}
.bandlabel{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 6px}
.bandlabel span:first-child{font-size:24px;font-weight:800;letter-spacing:-.4px;
  display:inline-block;transform:rotate(-1.2deg);padding:1px 10px;color:#fff;border-radius:2px;
  box-shadow:2px 3px 0 rgba(34,28,18,.15)}
.band:nth-of-type(1) .bandlabel span:first-child{background:var(--mint)}
.band:nth-of-type(2) .bandlabel span:first-child{background:var(--blue)}
.band:nth-of-type(3) .bandlabel span:first-child{background:var(--mustard)}
.band:nth-of-type(4) .bandlabel span:first-child{background:var(--burnt)}
.band:nth-of-type(5) .bandlabel span:first-child{background:var(--red)}
.bandlabel .hint{color:var(--faint);font-size:12px}

.rung{display:flex;align-items:center;gap:10px;padding:12px 6px;border-bottom:1.5px dashed var(--line);
  cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;background:var(--card)}
.rung:active{background:#fbf5e4}
.rname{flex:1;min-width:0;font-size:15.5px;font-weight:650}
.rname small{display:block;color:var(--faint);font-size:11.5px;margin-top:1px;font-weight:400}
/* the yellow provision-shop price sticker */
.rwork{font-size:14.5px;font-weight:800;white-space:nowrap;color:var(--red);
  background:#ffe27a;padding:5px 9px;border-radius:2px;border:1.5px solid #e3bd3a;
  transform:rotate(-1.4deg);box-shadow:1px 2px 0 rgba(34,28,18,.12)}
.band:nth-of-type(5) .rwork{background:var(--red);color:#fff;border-color:#9c211b}
.rprice{color:var(--dim);font-size:12.5px;white-space:nowrap;min-width:70px;text-align:right}
.rdelta{font-size:11.5px;min-width:56px;text-align:right;white-space:nowrap;font-weight:700}
.rdelta small{font-weight:400;color:var(--faint)}
.rdelta.up{color:var(--red)} .rdelta.down{color:var(--mint)} .rdelta.flat{color:var(--faint)}

.detail{display:none;padding:10px 8px 18px;border-bottom:1.5px dashed var(--line);background:#fdfaf0}
.rung.open + .detail{display:block}
.detail svg{width:100%;height:88px;display:block}
.detail svg polyline{stroke:var(--blue) !important}
.detail svg text{fill:var(--dim) !important}
.detail .cap{color:var(--dim);font-size:12px;margin-top:6px}
.detail .prov{color:var(--faint);font-size:11px;margin-top:4px}

.expander{display:block;width:100%;margin:26px 0 6px;background:var(--card);border:2px dashed var(--blue);
  color:var(--blue);font:inherit;font-weight:800;font-size:14px;padding:13px;border-radius:3px;cursor:pointer}
.expander:active{border-color:var(--red);color:var(--red)}
.note{margin:36px 6px 0;color:var(--dim);font-size:12.5px;line-height:1.65;border-top:3px double var(--rule);padding-top:14px}
.note b{color:var(--ink)} .note a{color:var(--blue);text-decoration:none;font-weight:700}
.nodata{color:var(--faint);font-size:13px;padding:12px 6px}

/* — Life Ledger: bill chits on the marble table — */
.chapter{background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:2px;
  padding:20px 20px 22px;margin:22px 4px 0;position:relative;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:14.5px;
  box-shadow:3px 5px 0 rgba(34,28,18,.1);transform:rotate(-.4deg);
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(29,78,158,.08) 27px 28.5px)}
.chapter:nth-child(even){transform:rotate(.5deg)}
.chapter::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:radial-gradient(circle at 6px -2px,transparent 7px,var(--card) 7px);
  background-size:14px 10px;background-repeat:repeat-x}
.chapter h2{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
  margin-bottom:10px;padding-bottom:8px;border-bottom:1.5px dashed var(--rule);font-family:inherit}
.chapter h2 .yy{color:var(--red);letter-spacing:0;font-weight:800}
.chapter p{font-size:14.5px;line-height:1.62}
.chapter p+p{margin-top:9px}
.chapter b{font-weight:800}
.chapter .big{font-size:24px;font-weight:800;display:inline-block;margin:2px 0;color:var(--red)}
.chapter .src{color:var(--faint);font-size:10.5px;margin-top:14px;padding-top:8px;border-top:1.5px dashed var(--rule)}
.chapter a{color:var(--blue) !important}
.chapter.limit{background:#f3ecd8;background-image:none;transform:rotate(.8deg)}
.chapter.limit::before{content:"NO RECORD";position:absolute;right:14px;top:12px;font-size:10px;
  letter-spacing:.2em;color:var(--red);border:1.5px solid var(--red);padding:3px 7px;border-radius:2px;
  transform:rotate(6deg);opacity:.8}
.chapter.limit p{color:var(--dim);font-size:13.5px}

@media(min-width:520px){h1{font-size:50px}.hero .fact{font-size:24px}}
/* — Glance: the whole wall on one screen — */
#viewseg{margin-left:auto}
.glance{position:relative;margin:6px 2px 0;height:72vh;min-height:480px;max-height:760px;
  background:var(--card);border:2.5px solid var(--ink);border-radius:3px;overflow:hidden;
  box-shadow:3px 5px 0 rgba(34,28,18,.14)}
.gaxis{position:absolute;left:0;top:0;bottom:0;width:52px;border-right:1.5px dashed var(--rule);
  background:#fdf9ec}
.gtick{position:absolute;left:0;width:100%;font-size:10px;font-weight:800;color:var(--dim);
  border-top:1px solid var(--line);padding:2px 4px 0;letter-spacing:.02em}
.gtick.major{color:var(--red);border-top-color:var(--rule)}
.gband{position:absolute;left:52px;right:0;border-top:1px dashed #efe6cd;pointer-events:none}
.sticker{position:absolute;display:flex;align-items:center;gap:4px;padding:3px 7px 3px 5px;
  background:#ffe27a;border:1.5px solid #e3bd3a;border-radius:3px;font-size:11.5px;font-weight:800;
  color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;
  box-shadow:1px 2px 0 rgba(34,28,18,.14);transition:top .45s cubic-bezier(.2,.8,.2,1);
  transform:rotate(-1.2deg)}
.sticker:nth-child(even){transform:rotate(1deg)}
.sticker .em{font-size:15px;line-height:1}
.sticker.big{background:var(--red);border-color:#9c211b;color:#fff}
.sticker.mid{background:var(--blue);border-color:#153a77;color:#fff}
.sticker:active{filter:brightness(1.06)}
/* — zoom sheet — */
.sheetwrap{position:fixed;left:0;right:0;top:0;height:100dvh;z-index:40;display:none}
.sheetwrap.open{display:block}
.sheetwrap .scrim{position:absolute;inset:0;background:rgba(34,28,18,.35)}
/* floating card, lifted into the comfortable reading zone — not glued to the bottom edge */
.sheet{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-52%);
  background:var(--card);border:3px solid var(--ink);border-radius:4px 18px 4px 18px;
  padding:18px 18px 20px;max-width:560px;margin:0 auto;
  box-shadow:6px 8px 0 rgba(34,28,18,.22),0 18px 44px rgba(34,28,18,.28);
  max-height:74dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  animation:pop .18s cubic-bezier(.2,.9,.3,1.1)}
@keyframes pop{from{opacity:0;transform:translateY(-46%) scale(.96)}to{opacity:1;transform:translateY(-52%) scale(1)}}
.sheet .shname{font-size:20px;font-weight:800;padding:0 34px 0 0;line-height:1.2}
.sheet .shname small{display:block;font-size:12px;color:var(--faint);font-weight:400;margin-top:1px}
.sheet .shrow{display:flex;gap:14px;align-items:baseline;margin:10px 0 4px;flex-wrap:wrap}
.sheet .shwork{font-size:26px;font-weight:800;color:var(--red)}
.sheet .shprice{font-size:15px;color:var(--dim)}
.sheet .shdelta{font-size:13px;font-weight:800}
.sheet .shdelta.up{color:var(--red)} .sheet .shdelta.down{color:var(--mint)}
.sheet svg{width:100%;height:92px;display:block;margin-top:8px}
.sparkends{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);
  font-family:ui-monospace,Menlo,monospace;margin-top:3px}
.sparkends b{color:var(--ink);font-weight:700}
.sheet svg polyline{stroke:var(--blue)} .sheet svg text{fill:var(--dim)}
.sheet .prov{color:var(--faint);font-size:11px;margin-top:8px}
.sheet .close{position:absolute;right:8px;top:8px;background:none;border:0;font-size:22px;
  color:var(--faint);cursor:pointer;padding:6px}
/* — truth machine — */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.leg{background:var(--card);border:2.5px solid var(--ink);border-radius:3px;padding:14px 14px 16px;
  box-shadow:3px 4px 0 rgba(34,28,18,.14);position:relative}
.leg h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.leg .lw{font-size:25px;font-weight:800;line-height:1.05}
.leg .lsub{color:var(--dim);font-size:12px;margin-top:6px;line-height:1.5}
.leg.win{border-color:var(--red)}
.leg.win::after{content:"AHEAD";position:absolute;right:-7px;top:-10px;font-size:10px;letter-spacing:.16em;
  background:var(--red);color:#fff;padding:3px 8px;border-radius:2px;transform:rotate(4deg);font-weight:800}
.verdict{margin:16px 2px 0;font-size:16.5px;line-height:1.55}
.verdict b{color:var(--red)}
.tbar{display:flex;height:26px;border:2px solid var(--ink);border-radius:3px;overflow:hidden;margin-top:12px;font-size:11px;font-weight:800}
.tbar div{display:flex;align-items:center;padding:0 8px;color:#fff;white-space:nowrap}
.tbar .own{background:var(--blue)} .tbar .rent{background:var(--mint)}
@media(max-width:430px){.vs{grid-template-columns:1fr}}