/* Polam website. Tokens are the app's locked palette (apps/polam/docs/BRAND.md); do not add colours here.
   Mood: the surveyor's field book out in the sun. Signature: the field sketch (ink outline, every side's length on a
   paper chip along its edge, lettered square corner stones, yellow ± ring to scale, ranging-rod scale bar).
   Tape yellow is the only bold colour and is never text on light (1.47:1): the primary button carries an ink border.
   No letter-spacing or text-transform anywhere (Indic scripts break with either). Telugu/Tamil line height >= 1.55. */

@font-face{font-family:'Hind Guntur';font-weight:400;font-display:swap;src:url(/assets/fonts/HindGuntur_400Regular-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+20B9,U+2122,U+2190-2199,U+2212,U+2248,U+2264-2265}
@font-face{font-family:'Hind Guntur';font-weight:400;font-display:swap;src:url(/assets/fonts/HindGuntur_400Regular-telugu.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CD0-1CFF,U+200B-200D,U+25CC,U+A830-A839}
@font-face{font-family:'Hind Guntur';font-weight:600;font-display:swap;src:url(/assets/fonts/HindGuntur_600SemiBold-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+20B9,U+2122,U+2190-2199,U+2212,U+2248,U+2264-2265}
@font-face{font-family:'Hind Guntur';font-weight:600;font-display:swap;src:url(/assets/fonts/HindGuntur_600SemiBold-telugu.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CD0-1CFF,U+200B-200D,U+25CC,U+A830-A839}
@font-face{font-family:'Hind Guntur';font-weight:700;font-display:swap;src:url(/assets/fonts/HindGuntur_700Bold-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+20B9,U+2122,U+2190-2199,U+2212,U+2248,U+2264-2265}
@font-face{font-family:'Hind Guntur';font-weight:700;font-display:swap;src:url(/assets/fonts/HindGuntur_700Bold-telugu.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CD0-1CFF,U+200B-200D,U+25CC,U+A830-A839}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(/assets/fonts/BarlowCondensed_600SemiBold-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+20B9,U+2122,U+2190-2199,U+2212,U+2248,U+2264-2265}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(/assets/fonts/BarlowCondensed_700Bold-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+20B9,U+2122,U+2190-2199,U+2212,U+2248,U+2264-2265}

:root{
  color-scheme:light dark;
  --paper:#F3F5F1; --surface:#FFFFFF; --surface2:#E9EDE7; --ink:#111A14; --muted:#435047; --hair:#78857C; --hair-soft:#D5DCD5;
  --tape:#FFC21A; --on-tape:#111A14; --tape-edge:#111A14; --tape-soft:#FFF0BF; --on-tape-soft:#4A3600;
  --weak:#8A4500; --weak-c:#FFE9D2; --on-weak-c:#4D2600;
  --halo:rgba(255,194,26,.62); --halo-edge:#8F6A00; --plot-fill:rgba(255,194,26,.14); --grid:#DCE2DB;
  --shadow:0 1px 2px rgba(17,26,20,.08), 0 6px 18px rgba(17,26,20,.07);
  --script:'Nirmala UI';
  --f-body:'Hind Guntur', var(--script), system-ui, sans-serif;
  --f-num:'Barlow Condensed', 'Hind Guntur', 'Arial Narrow', sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1310; --surface:#18201B; --surface2:#222B25; --ink:#E9EFE9; --muted:#A6B3AA; --hair:#66736A; --hair-soft:#2E3832;
    --tape:#FFC93D; --on-tape:#111A14; --tape-edge:#FFC93D; --tape-soft:#3A2E05; --on-tape-soft:#FFE6A3;
    --weak:#F2A65A; --weak-c:#3A2410; --on-weak-c:#FFDDB8;
    --halo:rgba(255,201,61,.72); --halo-edge:#FFE08A; --plot-fill:rgba(255,201,61,.08); --grid:#1D2621;
    --shadow:none;
  }
}
/* Scripts the app's fonts do not cover fall back to the phone's Noto font (BRAND "Type"). */
:lang(hi), :lang(mr){--script:'Noto Sans Devanagari','Nirmala UI'}
:lang(ta){--script:'Noto Sans Tamil','Nirmala UI'}
:lang(kn){--script:'Noto Sans Kannada','Nirmala UI'}
:lang(ml){--script:'Noto Sans Malayalam','Nirmala UI'}
:lang(bn){--script:'Noto Sans Bengali','Nirmala UI'}
:lang(gu){--script:'Noto Sans Gujarati','Nirmala UI'}
:lang(or){--script:'Noto Sans Oriya','Nirmala UI'}
:lang(pa){--script:'Noto Sans Gurmukhi','Nirmala UI'}
:lang(te){--script:'Noto Sans Telugu','Nirmala UI'}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; overflow-wrap:break-word}
h1,h2,h3{font-family:var(--f-body); font-weight:700; line-height:1.4; margin:0; text-wrap:balance}
:lang(en) h1, :lang(en) h2, :lang(en) h3{line-height:1.25}
p{margin:0}
a{color:var(--ink); text-decoration-color:var(--halo-edge); text-decoration-thickness:2px; text-underline-offset:4px}
a:hover{text-decoration-thickness:3px}
a, summary{touch-action:manipulation; -webkit-tap-highlight-color:rgba(255,194,26,.3)}
:focus-visible{outline:3px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 6px var(--tape); border-radius:4px}
.num{font-family:var(--f-num); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
p .num, dd .num, .lede .num{line-height:1}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.icon{width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.icon.sm{width:18px; height:18px}
.icon .dot, .icon .fillc{fill:currentColor; stroke:none}

.skip{position:absolute; left:16px; top:-100px; z-index:50; background:var(--tape); color:var(--on-tape); border:1.5px solid var(--tape-edge); padding:12px 16px; border-radius:14px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}

.wrap{max-width:1100px; margin:0 auto; padding:0 16px}
@media (min-width:720px){ .wrap{padding:0 24px} }

/* ---------- header ---------- */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:10px; min-width:0; min-height:48px; color:var(--ink); text-decoration:none}
.brand svg{flex:none}
.brand b{display:block; font:700 22px/1.25 var(--f-body)}
.brand small{display:block; font-size:14px; line-height:1.55; color:var(--muted)}
.brand:hover b{text-decoration:underline; text-decoration-color:var(--halo-edge); text-decoration-thickness:2px; text-underline-offset:4px}
.logo .lg-bg{fill:var(--surface); stroke:var(--ink); stroke-width:2}
.logo .lg-halo{fill:none; stroke:var(--tape); stroke-width:6; stroke-linejoin:round}
.logo .lg-line{fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linejoin:round}
.logo .lg-stone{fill:var(--ink)}

.lang{position:relative; flex:none}
.lang summary{list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:6px 12px; border:1.5px solid var(--hair); border-radius:24px; background:var(--surface); cursor:pointer; font-size:16px; font-weight:600; line-height:1.3}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{border-color:var(--ink)}
.lang[open] summary{border-color:var(--tape-edge); background:var(--tape-soft); color:var(--on-tape-soft)}
.lang[open] summary .chev{transform:rotate(180deg)}
.lang ul{position:absolute; right:0; top:calc(100% + 6px); z-index:20; margin:0; padding:6px; list-style:none; width:max-content; min-width:200px; max-width:calc(100vw - 32px); background:var(--surface); border:1.5px solid var(--hair); border-radius:14px; box-shadow:0 12px 32px rgba(14,19,16,.18)}
.lang a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:6px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-size:17px; line-height:1.55}
.lang a:hover{background:var(--surface2)}
.lang a[aria-current="page"]{background:var(--tape-soft); color:var(--on-tape-soft); font-weight:600}
.lang a span{font-size:14px; color:var(--muted)}
.lang a[aria-current="page"] span{color:var(--on-tape-soft)}

/* ---------- hero ---------- */
.hero{display:grid; gap:24px; grid-template-areas:'text' 'act' 'card' 'facts'; grid-template-columns:minmax(0,1fr); padding-top:12px; padding-bottom:40px}
.h-text{grid-area:text} .h-card{grid-area:card; min-width:0} .h-act{grid-area:act} .h-facts{grid-area:facts}
.hero h1{display:flex; flex-direction:column; gap:2px}
.hero .name{font:700 46px/1.05 var(--f-num)}
.hero .name-te{font:700 30px/1.55 var(--f-body); color:var(--muted)}
.hero h1 .name-te:first-child{color:var(--ink); font-size:38px; line-height:1.5}
.hero h1 .name-te:first-child + .name{font-size:32px; color:var(--muted)}
.headline{margin-top:14px; font-size:22px; font-weight:600; line-height:1.45; max-width:30ch}
.lede{margin-top:12px; font-size:18px; line-height:1.65; max-width:56ch; color:var(--ink)}
.cta{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:60px; padding:10px 26px; border-radius:14px; background:var(--tape); color:var(--on-tape); border:1.5px solid var(--tape-edge); font-size:18px; font-weight:700; line-height:1.35; text-decoration:none; text-align:center; transition:box-shadow .2s ease}
.cta:hover{box-shadow:0 0 0 4px var(--tape-soft)}
.cta .icon{fill:currentColor; stroke:none}
.facts{margin:0; padding:0; list-style:none; display:grid}
.facts li{display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-top:1px solid var(--hair-soft); font-size:17px; line-height:1.55}
.facts li:last-child{border-bottom:1px solid var(--hair-soft)}
.facts .icon{margin-top:1px}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-areas:'text card' 'act card' 'facts card'; grid-template-rows:auto auto 1fr; gap:28px 56px; align-items:start; align-content:start; padding-top:36px; padding-bottom:64px}
  .hero .name{font-size:72px}
  .hero .name-te{font-size:40px}
  .hero h1 .name-te:first-child{font-size:52px}
  .hero h1 .name-te:first-child + .name{font-size:44px}
  .headline{font-size:26px}
}

/* ---------- SIGNATURE: the field sketch ---------- */
.card{background:var(--surface); border:1px solid var(--hair-soft); border-radius:14px; box-shadow:var(--shadow)}
.field{margin:0; background:var(--surface); border:1px solid var(--hair-soft); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.sketch{display:block; width:100%; height:auto}
.sketch .grid{fill:none; stroke:var(--grid); stroke-width:1}
.sketch .plot{fill:var(--plot-fill); stroke:none}
.sketch .outline{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round}
.sketch .halo-edge{fill:none; stroke:var(--halo-edge); stroke-linejoin:round}
.sketch .halo-under{fill:none; stroke:var(--surface); stroke-linejoin:round}
.sketch .halo{fill:none; stroke:var(--halo); stroke-linejoin:round}
.sketch .diag{fill:none; stroke:var(--muted); stroke-width:1.5; stroke-dasharray:6 5}
.sketch .chip{fill:var(--surface); stroke:var(--hair-soft); stroke-width:1}
.sketch .edge{fill:var(--ink); font-family:var(--f-num); font-weight:600; font-variant-numeric:tabular-nums; text-anchor:middle}
.sketch .stone{fill:var(--ink); stroke:var(--surface); stroke-width:1.5}
.sketch .stone-l{fill:var(--muted); font:700 12px/1 var(--f-num); text-anchor:middle}
.sketch .rod-i{fill:var(--ink)} .sketch .rod-t{fill:var(--tape)}
.sketch .scale-t{fill:var(--muted); font:600 12px/1 var(--f-num)}
.sketch .north{color:var(--muted)}
.sketch .north-t{fill:var(--muted); font:700 11px/1 var(--f-num); text-anchor:middle}
.field .sk{border-bottom:1px solid var(--hair-soft)}
.res{padding:14px 16px 12px}
.res .k{font-size:15px; font-weight:600; color:var(--muted); line-height:1.5}
.area{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; margin-top:2px}
.area .n{font:700 56px/1.05 var(--f-num); font-variant-numeric:tabular-nums}
.area .u{font-size:20px; font-weight:600; line-height:1.4}
.pm{display:flex; gap:8px; align-items:flex-start; margin-top:10px; font-size:16px; line-height:1.55}
.ring-ic{margin-top:1px}
.ring-ic .r-halo{fill:none; stroke:var(--halo); stroke-width:5; stroke-linejoin:round}
.ring-ic .r-line{fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linejoin:round}
.also{margin-top:6px; font-size:15px; line-height:1.6; color:var(--muted)}
.also .num{color:var(--ink); font-size:17px}
.legend{display:flex; gap:8px; align-items:center; padding:10px 16px 12px; border-top:1px solid var(--hair-soft); font-size:14px; line-height:1.55; color:var(--muted)}
.sw{flex:none; display:inline-block; width:22px; height:8px; border-radius:4px; background:var(--halo); box-shadow:inset 0 0 0 1px var(--halo-edge)}
.sw-line{flex:none; display:inline-block; width:22px; height:0; margin-top:12px; border-top:2.5px solid var(--ink)}
.cap{margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted); max-width:60ch}
@media (prefers-reduced-motion: no-preference){
  .field .halo, .field .halo-under, .field .halo-edge{animation:settle .6s cubic-bezier(.2,.8,.2,1) .15s both; transform-box:fill-box; transform-origin:center}
  @keyframes settle{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}
}

/* ---------- sections ---------- */
.sec{padding-top:40px; padding-bottom:40px; border-top:1px solid var(--hair-soft)}
.sec h2{font-size:30px}
.sec .intro{margin-top:12px; max-width:62ch; color:var(--muted); font-size:17px}
@media (min-width:900px){ .sec{padding-top:56px; padding-bottom:56px} .sec h2{font-size:38px} }

.ways{display:grid; gap:16px; margin-top:24px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr))}
.way{padding:20px 16px; background:var(--surface); border:1px solid var(--hair-soft); border-radius:14px}
.way-ic{display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--tape-soft); color:var(--on-tape-soft)}
.way-ic .icon{width:28px; height:28px}
.way h3{margin-top:14px; font-size:22px}
.way .meta{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:15px; font-weight:600; color:var(--muted); line-height:1.5}
.way p:last-child{margin-top:10px}
@media (min-width:720px){ .way{padding:24px} }

/* units */
.unit-grid{display:grid; gap:20px; margin-top:24px; align-items:start}
@media (min-width:900px){ .unit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px} }
.units{margin:0; padding:4px 0}
.urow{display:grid; gap:2px; padding:14px 16px; border-top:1px solid var(--hair-soft)}
.urow:first-child{border-top:none}
.urow dt{font-size:20px; font-weight:700; line-height:1.4}
.urow dt .te{font-weight:600; color:var(--muted); font-size:18px; line-height:1.55}
.urow dd{margin:0; font-size:16px; line-height:1.6}
.urow dd .num{font-size:19px}
.house{overflow:hidden}
.house .sk{border-bottom:1px solid var(--hair-soft); max-width:420px; margin:0 auto}
.hx{padding:16px}
.hx h3{font-size:21px}
.hx .q{margin-top:4px; font-size:16px; color:var(--muted); line-height:1.6}
.hx .q .num{color:var(--ink); font-size:18px}
.hx .note{margin-top:10px; font-size:14px; line-height:1.55; color:var(--muted)}
.lines{margin:12px 0 0; padding:0; list-style:none}
.ln{display:flex; align-items:baseline; gap:12px; min-height:48px; padding:10px 0; border-top:1px solid var(--hair-soft); font-size:16px; line-height:1.5}
.ln .tx{flex:1; min-width:0}
.ln .am{flex:none; max-width:55%; text-align:right; font:600 19px/1.4 var(--f-num); font-variant-numeric:tabular-nums}
.ln .am .num{font-size:19px}
.ln.lead .tx{font-weight:600}
.ln.lead .am .num{font-size:28px; font-weight:700}

/* ± band comparison */
.cmp-card{margin-top:24px; padding:16px}
.cmps{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:520px}
.cmp{margin:0; min-width:0}
.cmp figcaption{display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:4px; line-height:1.4}
.cmp figcaption b{font-size:30px; font-weight:700}
.cmp figcaption span{font-size:16px; color:var(--muted)}
.cmp-card .cap{display:flex; gap:10px; align-items:flex-start}
.cmp-card .cap.sharp{margin-top:8px}
.range{display:flex; gap:14px; align-items:flex-start; margin-top:20px; padding:18px 16px; border-radius:14px; background:var(--weak-c); color:var(--on-weak-c)}
.range .icon{margin-top:3px; color:var(--weak)}
.range h3{font-size:20px}
.range p{margin-top:6px; max-width:62ch}
.range .num{font-size:19px}
@media (min-width:720px){ .cmp-card{padding:24px} .range{padding:20px 24px} }

/* report */
.report{display:flex; gap:16px; align-items:flex-start; padding:20px 16px}
.rp-ic{flex:none; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--tape); color:var(--on-tape); border:1.5px solid var(--tape-edge)}
.report h2{font-size:26px}
.report p{margin-top:10px; max-width:66ch}
.report .note{display:flex; gap:8px; align-items:flex-start; font-size:15px; color:var(--muted); line-height:1.6}
.report .note .icon{margin-top:3px}
@media (max-width:420px){ .report{flex-direction:column} }
@media (min-width:900px){ .report{padding:28px} .report h2{font-size:32px} }

.band{display:flex; gap:14px; align-items:flex-start; padding:20px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--hair-soft)}
.band .icon{margin-top:4px}
.band h2{font-size:24px}
.band p{margin-top:6px; max-width:62ch}
.band a{display:inline-flex; align-items:center; min-height:48px; font-weight:600}
.bands{display:grid; gap:16px}
@media (min-width:900px){ .bands{grid-template-columns:1fr 1fr} .band{padding:24px} }

/* ---------- legal pages: a field-book page with the ranging rod along its top ---------- */
.rod{height:6px; background:repeating-linear-gradient(90deg, var(--ink) 0 28px, var(--tape) 28px 56px)}
.doc{position:relative; max-width:760px; margin:8px auto 48px; background:var(--surface); border:1px solid var(--hair-soft); border-radius:14px; box-shadow:var(--shadow); padding:30px 16px 28px; overflow:hidden}
.doc::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:repeating-linear-gradient(90deg, var(--ink) 0 28px, var(--tape) 28px 56px)}
@media (min-width:720px){ .doc{padding:44px 48px 44px} }
.doc h1{font-size:34px}
.doc .meta{margin-top:8px; font-size:15px; color:var(--muted)}
.doc .intro{margin-top:16px; font-size:18px; line-height:1.65}
.doc h2{font-size:23px; margin-top:32px}
.doc p, .doc li{max-width:68ch}
.doc p{margin-top:10px}
.doc ul, .doc ol{margin:10px 0 0; padding-left:22px}
.doc li{margin-top:8px; padding-left:4px}
.doc ol li::marker{font-weight:700; font-family:var(--f-num)}
.doc .note{font-size:15px; color:var(--muted)}
.doc .file{font-size:18px; white-space:normal; overflow-wrap:anywhere}
.doc .warn{display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--weak-c); color:var(--on-weak-c); font-weight:600; line-height:1.55}
.doc .warn .icon{margin-top:1px; color:var(--weak)}
.short{margin-top:20px; padding:4px 16px 16px; border-radius:12px; background:var(--tape-soft); color:var(--on-tape-soft)}
.short h2{margin-top:12px; font-size:20px}
.short ul{padding-left:22px}
.short li{margin-top:8px}
.out{display:inline-flex; align-items:center; gap:6px; min-height:48px}
.out .icon{width:16px; height:16px}
.mail{display:inline-flex; align-items:center; gap:10px; max-width:100%; min-height:52px; margin-top:12px; padding:8px 18px; border-radius:14px; border:1.5px solid var(--ink); color:var(--ink); font-weight:600; font-size:18px; text-decoration:none; overflow-wrap:anywhere}
.mail:hover{background:var(--tape-soft); color:var(--on-tape-soft)}
.mail span{min-width:0}
.doc .go{display:inline-flex; align-items:center; min-height:48px; font-weight:600}
.doc .home{display:inline-flex; align-items:center; min-height:48px; margin-top:16px; font-weight:600}

/* ---------- footer ---------- */
.foot{padding-top:0; padding-bottom:32px}
.foot .rod{margin-bottom:20px; border-radius:3px}
.foot ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 20px}
.foot a{display:inline-flex; align-items:center; min-height:48px; font-weight:600}
.foot a[aria-current="page"]{text-decoration:none}
.foot p{margin-top:12px; font-size:14px; color:var(--muted); line-height:1.55}

/* ---------- shared plot page (/p): full-bleed map, plot on top, bottom card. Same order as the app's map screen. ---------- */
.p-page{min-height:100dvh; overflow-wrap:anywhere}
.p-page main{min-height:100dvh}
.p-view{display:flex; flex-direction:column; height:100dvh; overflow:hidden}
.p-stage{position:relative; flex:1 1 auto; min-height:38dvh; background:var(--paper); overflow:hidden}
.p-canvas,.p-gm,.p-sketch-host{position:absolute; inset:0}
.p-gm{opacity:0; transition:opacity 200ms ease-out}
.p-gm.on{opacity:1}
.p-sketch{display:block; width:100%; height:100%}
.p-sketch .grid{fill:none; stroke:var(--grid); stroke-width:1}
.p-sketch .rod-i{fill:var(--ink); stroke:var(--ink); stroke-width:.75}
.p-sketch .rod-t{fill:var(--tape); stroke:var(--ink); stroke-width:.75}
.p-sketch .scale-t{font:600 14px var(--f-num); fill:var(--ink); font-variant-numeric:tabular-nums}
.p-sketch .p-ink{fill:var(--ink)}
.p-side{font:600 15px var(--f-num); font-variant-numeric:tabular-nums}
.p-stone{font:700 13px var(--f-body)}
/* the one signature moment: the red border draws itself in, then its corners and lengths appear */
.p-draw .p-line{stroke-dasharray:1; stroke-dashoffset:1; animation:p-line 720ms cubic-bezier(.23,1,.32,1) forwards}
.p-draw .p-marks,.p-draw .p-fill{opacity:0; animation:p-in 200ms ease-out 620ms forwards}
@keyframes p-line{to{stroke-dashoffset:0}}
@keyframes p-in{to{opacity:1}}

.p-gm-marks{position:absolute; left:0; top:0; pointer-events:none}
.p-pill{position:absolute; left:0; top:0; padding:0 6px; border-radius:8px; background:rgba(255,255,255,.94); color:#111A14; font:600 15px/22px var(--f-num); font-variant-numeric:tabular-nums; white-space:nowrap}
.p-pill[hidden]{display:none}
.p-gstone{position:absolute; left:0; top:0; display:grid; place-items:center; width:22px; height:22px; background:#111A14; border:1.5px solid #FFFFFF; color:#FFFFFF; font:700 13px/1 var(--f-body)}
.p-gm-marks span{animation:p-in 160ms ease-out both}

.p-home{position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:6px 12px 6px 6px; border-radius:24px; background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:var(--shadow), 0 0 0 1px var(--hair-soft)}
.p-home b{font:700 17px/1.3 var(--f-body)}
.p-controls{position:absolute; right:12px; top:12px; display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.p-controls[hidden]{display:none}
.p-controls button{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:48px; min-height:48px; padding:0; border:0; background:var(--surface); color:var(--ink); font:600 14px/1.3 var(--f-body); cursor:pointer}
.p-controls button:hover{background:var(--surface2)}
.p-layer,.p-zoom{border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.3)}
.p-controls .p-layer{padding:0 12px; border-radius:12px}
.p-zoom{display:flex; flex-direction:column}
.p-zoom button+button{border-top:1px solid var(--hair-soft)}
.p-zoom button:focus-visible{outline-offset:-3px; box-shadow:none}
.p-controls button{touch-action:manipulation}
.p-name:focus{outline:none}
.p-note{display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:8px 12px; border-radius:12px; background:var(--tape-soft); color:var(--on-tape-soft); font-size:14px; line-height:1.55}
.p-note[hidden]{display:none}

.p-card{flex:0 1 auto; max-height:62dvh; overflow:auto; overscroll-behavior:contain; padding:14px 16px max(16px, env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--hair-soft); display:flex; flex-direction:column; gap:2px}
/* the card scrolls; nothing in it may shrink to nothing (the name and village are overflow:hidden, so they would) */
.p-card>*{flex-shrink:0}
.p-from{display:flex; align-items:flex-start; gap:6px; color:var(--muted); font-size:14px; line-height:1.55}
.p-from .icon{margin-top:2px}
.p-name{font:600 20px/1.55 var(--f-body); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; text-wrap:initial}
.p-village{color:var(--muted); font-size:14px; line-height:1.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-area{margin-top:6px; line-height:1.15}
.p-area .n{font:700 34px/1.15 var(--f-num); font-variant-numeric:tabular-nums}
.p-area .u{font-size:19px; font-weight:400; line-height:1.55}
.p-alt{color:var(--muted); font-size:14px; line-height:1.55}
/* the buttons stay in reach while the longer card scrolls under them */
.p-acts{position:sticky; bottom:0; z-index:1; display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:8px; background:var(--surface)}
.p-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
.p-btn{display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:8px 14px; border:1.5px solid var(--hair); border-radius:12px; background:var(--surface); color:var(--ink); font-size:15px; font-weight:600; line-height:1.4; text-align:center; text-decoration:none}
.p-btn .icon{width:20px; height:20px}
.p-btn:hover{background:var(--surface2)}
.p-btn.primary{min-height:56px; border-color:var(--tape-edge); border-radius:14px; background:var(--tape); color:var(--on-tape); font-size:17px}
.p-btn.primary:hover{background:var(--tape)}
.p-btn:active{transform:translateY(1px)}
.p-small{margin-top:10px; color:var(--muted); font-size:13px; line-height:1.6}
.p-small a{display:inline-flex; align-items:center; min-height:48px; margin-block:-12px; white-space:nowrap}

.p-error{display:flex; flex-direction:column; justify-content:center; gap:10px; max-width:480px; min-height:100dvh; margin:0 auto; padding:24px 16px}
.p-error h1{font-size:26px; font-weight:600; line-height:1.4}
.p-err-b{color:var(--muted); margin-bottom:10px}
.p-err-ic{display:grid; place-items:center; width:64px; height:64px; margin-bottom:6px; border-radius:18px; background:var(--weak-c); color:var(--on-weak-c)}
.p-err-ic.soft{background:var(--tape-soft); color:var(--on-tape-soft)}
.p-err-ic .icon{width:32px; height:32px}
.p-more{display:inline-flex; align-items:center; justify-content:center; min-height:48px; font-weight:600}

@media (min-width:860px){
  .p-view{position:relative; display:block}
  .p-stage{position:absolute; inset:0}
  .p-sketch-host{left:396px}
  .p-card{position:absolute; left:16px; bottom:16px; width:380px; max-height:calc(100dvh - 92px); border:1px solid var(--hair-soft); border-radius:20px; box-shadow:0 12px 32px rgba(14,19,16,.18)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}