/* p.93.fyi — one light, high-contrast theme for outdoor phones and older eyes.
   Sizes in rem so the phone's own text-size setting applies. */
:root {
  --bg: #f6f7f2; --card: #ffffff; --ink: #14181a; --ink2: #3d4547; --line: #d5dbd2; --line2: #9aa59c;
  --green: #b5e655; --green-ink: #255b0a; --green-dot: #2e8b2e;
  --amber: #8a5300; --amber-dot: #d08a10; --red: #b3261e; --red-dot: #d13b2f; --grey-dot: #8a948d;
  --blue: #0b5c99; --focus: #1f6fb2;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1.125rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif }
main { max-width: 34rem; margin: 0 auto; padding: 0.75rem 1rem 3rem }
a { color: var(--green-ink); font-weight: 600 }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
h1 { font-size: 1.75rem; line-height: 1.15; margin: 0.4rem 0 0.2rem }
h2 { font-size: 1.4rem; line-height: 1.2; margin: 0 }
.muted { color: var(--ink2); font-size: 1rem }
.small { font-size: 0.95rem }
.hide { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.75rem }
.brand b { font-size: 1.35rem } .brand span { display: block; color: var(--ink2); font-size: 0.95rem }
.pill { white-space: nowrap; font: inherit; font-size: 1rem; font-weight: 700; min-height: 3rem; padding: 0.5rem 1rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none }
.pill img, .pill .av { width: 2rem; height: 2rem }
.langs { display: flex; gap: 0.25rem } .langs a { padding: 0.5rem 0.6rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.95rem; min-height: 2.75rem; display: inline-flex; align-items: center }
.langs a[aria-current="true"] { background: var(--ink); color: #fff }

/* cards & buttons */
.card { background: var(--card); border: 2px solid var(--line); border-radius: 1rem; padding: 1rem; margin: 0 0 0.9rem }
.btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; font: inherit; font-size: 1.2rem; font-weight: 800; min-height: 3.5rem; padding: 0.75rem 1rem; border-radius: 0.9rem; border: 3px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; text-align: center }
.btn.go { background: var(--green); border-color: var(--green-ink); color: #0f1a06 }
.btn.quiet { border-width: 2px; border-color: #6b6b6b; font-weight: 700; font-size: 1.05rem }
.btn:active { transform: translateY(1px) }
.row { display: flex; gap: 0.6rem } .row > * { flex: 1 }
.linkbtn { font: inherit; background: none; border: 0; padding: 0.5rem 0; color: var(--green-ink); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 2.75rem }

/* status verdict */
.verdict { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.4rem 0 0.3rem }
.dot { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; border-radius: 50%; margin-top: 0.42rem; background: var(--grey-dot) }
.lv-open .dot { background: var(--green-dot) } .lv-busy .dot { background: var(--amber-dot) } .lv-full .dot { background: var(--red-dot) } .lv-out .dot { background: var(--blue) }
.head { font-size: 1.45rem; font-weight: 800; line-height: 1.2 }
.lv-open .head { color: #1d6b1d } .lv-busy .head { color: var(--amber) } .lv-full .head { color: var(--red) } .lv-out .head { color: var(--blue) }
.sub { color: var(--ink2); font-size: 1.05rem }
.stale .head { color: var(--ink2) } .stale .dot { background: var(--grey-dot) }
.when { color: var(--ink2); font-size: 1rem; white-space: nowrap }

/* home cards */
.park .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem }
.park .acts { display: flex; gap: 0.6rem; margin-top: 0.8rem } .park .acts .btn { flex: 1 } .park .acts .more { flex: 0 0 6.5rem; padding-left: 0.4rem; padding-right: 0.4rem }
.owner { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0; font-size: 1.05rem }
.faces { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap }
.av { border-radius: 50%; background: #dfe7da center/cover no-repeat; display: inline-grid; place-items: center; font-weight: 800; color: #24412a; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line2); overflow: hidden; flex: 0 0 auto }
.av.owner { box-shadow: 0 0 0 3px var(--green-dot) }
.morebox { border-top: 2px solid var(--line); margin-top: 0.9rem; padding-top: 0.8rem }
.morebox p { margin: 0.4rem 0 }
.photos { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.3rem 0 } .photos img { height: 7rem; border-radius: 0.6rem; border: 1px solid var(--line) }
.links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.6rem }
.links a { min-height: 2.75rem; display: inline-flex; align-items: center }
.welcome { background: #fff8db; border-color: #e7d37a }
.welcome .wh { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem }
.welcome ul { margin: 0.5rem 0 0; padding-left: 1.2rem } .welcome li { margin: 0.3rem 0 }
.tabs { display: flex; gap: 0; margin: 0 0 0.9rem; border: 2px solid var(--ink); border-radius: 0.8rem; overflow: hidden }
.tabs button { flex: 1; font: inherit; font-weight: 800; min-height: 3rem; border: 0; background: var(--card); color: var(--ink); cursor: pointer }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff }
#map { height: 68vh; min-height: 22rem; border-radius: 1rem; border: 2px solid var(--line); overflow: hidden }
.foot { margin-top: 1.5rem; color: var(--ink2); font-size: 1rem }
.foot p { margin: 0.4rem 0 }

/* report flow */
.q { font-size: 1.5rem; font-weight: 800; margin: 1rem 0 0.6rem }
.opt, .n, .chip, .btn, .step button, .ct, .pill, .tabs button { touch-action: manipulation }
.opt { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; font: inherit; min-height: 5.5rem; padding: 0.8rem 1rem; margin: 0 0 0.7rem; border-radius: 1rem; border: 3px solid var(--line2); background: var(--card); color: var(--ink); cursor: pointer }
.opt b { display: block; font-size: 1.35rem } .opt span.s { color: var(--ink2); font-size: 1.05rem }
.opt.o-open { border-color: var(--green-dot) } .opt.o-busy { border-color: var(--amber-dot) } .opt.o-full { border-color: var(--red-dot) } .opt.o-out { border-color: var(--blue) }
.opt .dot { margin-top: 0; width: 1.4rem; height: 1.4rem }
.opt.o-open .dot { background: var(--green-dot) } .opt.o-busy .dot { background: var(--amber-dot) } .opt.o-full .dot { background: var(--red-dot) } .opt.o-out .dot { background: var(--blue) }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.55rem }
.n { font: inherit; font-size: 1.5rem; font-weight: 800; min-height: 4rem; border-radius: 0.9rem; border: 3px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer }
.n.wide { grid-column: span 2; font-size: 1.15rem }
.n:active { background: var(--green) }
.done { background: #eef8dc; border-color: #7fb03a }
.done .dh { font-size: 1.5rem; font-weight: 800 }
.alert { background: #fdecea; border: 2px solid var(--red); color: #5f140f; border-radius: 0.8rem; padding: 0.8rem 1rem; margin: 0.6rem 0 }
.okmsg { color: var(--green-ink); font-weight: 700; min-height: 1.5rem; margin: 0.4rem 0 }
details.x { background: var(--card); border: 2px solid var(--line); border-radius: 0.9rem; margin: 0 0 0.6rem }
details.x > summary { list-style: none; display: flex; align-items: center; gap: 0.8rem; min-height: 3.75rem; padding: 0.6rem 1rem; cursor: pointer; font-weight: 700; font-size: 1.15rem }
details.x > summary::-webkit-details-marker { display: none }
details.x > summary::after { content: "›"; margin-left: auto; font-size: 1.6rem; transition: transform .15s }
details.x[open] > summary::after { transform: rotate(90deg) }
details.x > summary small { display: block; font-weight: 500; color: var(--ink2); font-size: 0.95rem }
details.x .xb { padding: 0 1rem 1rem }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap }
.chip { font: inherit; font-size: 1.1rem; font-weight: 700; min-height: 3.25rem; padding: 0.5rem 1rem; border-radius: 999px; border: 3px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff }
.chip[aria-pressed="true"]::before { content: "✓ " }
.step { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.6rem 0 }
.step .ctl { display: flex; align-items: center; gap: 0.5rem }
.step button { font: inherit; font-size: 1.7rem; font-weight: 800; width: 3.5rem; height: 3.5rem; border-radius: 0.8rem; border: 3px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer }
.step output { min-width: 2.5rem; text-align: center; font-size: 1.6rem; font-weight: 800 }
input[type=email], input[type=text] { font: inherit; width: 100%; min-height: 3.25rem; padding: 0.6rem 0.8rem; border-radius: 0.8rem; border: 2px solid var(--ink); margin: 0.4rem 0 }
.modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center }
.modal .box { background: var(--card); border-radius: 1.2rem 1.2rem 0 0; width: 100%; max-width: 34rem; padding: 1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto }

/* courts diagram */
.cv { display: flex; gap: 0.9rem; margin: 0.6rem 0 0.2rem; align-items: flex-start }
.cg { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0 }
.cgl { font-size: 0.95rem; font-weight: 800; line-height: 1.2 } .cgl span { display: block; font-weight: 500; color: var(--ink2); font-size: 0.9rem }
.cgc { display: flex; gap: 0.35rem }
.ct { flex: 1 1 0; max-width: 4.2rem; min-width: 0; padding: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent }
.ct svg { display: block; width: 100%; height: auto; border-radius: 0.35rem }
.ct.empty svg { opacity: .55 }
.compact .cv { margin: 0.5rem 0 0 } .compact .ct { max-width: 2.3rem } .compact .cgl, .compact .bench, .compact .wetl { display: none }
.wetl { font-size: 0.8rem; font-weight: 800; color: var(--blue); text-align: center }
button.ct { cursor: pointer; border: 3px dashed var(--line2); border-radius: 0.5rem; padding: 3px; max-width: 4.6rem }
button.ct[aria-pressed="true"] { border: 3px solid var(--blue); background: #dcefff }
button.ct:disabled { opacity: .45; border-style: solid; cursor: not-allowed }
.ctn { font-size: 0.9rem; font-weight: 800; text-align: center; margin-top: 2px }
.bench { position: relative; display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; min-height: 2rem; padding: 5px 8px 4px; border-radius: 0.6rem; background: #fff3dd; border: 2px solid #e3b25a }
.bench::before { content: ""; position: absolute; left: 6px; right: 6px; top: 14px; height: 3px; border-radius: 2px; background: rgba(150,110,55,.6) }
.bench .pd { position: relative; z-index: 1; width: 17px; height: 32px }
.bench .wn { flex-basis: 100%; font-size: 1rem; font-weight: 800; color: #6b3d00 }
.bench.none::before { display: none } .bench.none .wn { color: var(--ink2); font-weight: 600 }

/* map pins (map tab) */
.vpin { background: none; border: 0 }
.pin { position: relative; width: 150px; height: 150px }
.core { position: absolute; left: 43px; top: 43px; width: 64px; height: 64px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 5px solid var(--grey-dot); box-shadow: 0 2px 10px rgba(0,0,0,.35) }
.core b { font-size: 1.4rem; line-height: 1 } .core span { font-size: 0.7rem; color: var(--ink2); font-weight: 700 }
.pin.lv-open .core { border-color: var(--green-dot) } .pin.lv-busy .core { border-color: var(--amber-dot) } .pin.lv-full .core { border-color: var(--red-dot) } .pin.lv-out .core { border-color: var(--blue) }
.pin .lbl { position: absolute; left: -20px; right: -20px; top: 112px; text-align: center; font-size: 0.85rem; font-weight: 800; color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 6px #fff }
.pin .av { position: absolute }
.av.playing { animation: pulse 2s infinite }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--green-dot) } 50% { box-shadow: 0 0 0 7px rgba(46,139,46,.35) } }
@media (prefers-reduced-motion: reduce) { .av.playing { animation: none } * { transition: none !important } }

dialog.sheet { border: 0; padding: 0; width: 100%; max-width: 34rem; margin: auto auto 0; border-radius: 1.2rem 1.2rem 0 0; color: var(--ink) }
dialog.sheet::backdrop { background: rgba(0,0,0,.45) }
dialog.sheet .box { padding: 1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important }

/* /tops */
.sel { font: inherit; width: 100%; min-height: 3.25rem; padding: 0.5rem 0.7rem; border-radius: 0.8rem; border: 2px solid var(--ink); background: var(--card); margin: 0.4rem 0 }
input[type=number] { font: inherit; width: 100%; min-height: 3.25rem; padding: 0.5rem 0.7rem; border-radius: 0.8rem; border: 2px solid var(--ink); margin: 0.3rem 0 }
input[type=range] { width: 100%; min-height: 2.75rem; accent-color: var(--green-ink) }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem }
.tile { text-align: center; border: 2px solid var(--line); border-radius: 0.9rem; padding: 0.6rem 0.3rem }
.tile .ti { font-size: 1.6rem } .tile .tn { font-size: 2rem; font-weight: 800; line-height: 1.1 } .tile .tl { font-weight: 800 } .tile .ts { color: var(--ink2); font-size: 0.85rem }
.big { font-size: 1.15rem }
.ftwrap { overflow-x: auto } .ft { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 1rem } .ft th, .ft td { text-align: right; padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--line) } .ft th { font-size: 0.9rem } .ft th:first-child, .ft td:first-child { text-align: left }
.ft tr.hl td { background: #eef8dc; font-weight: 800 }
.beta { display: inline-block; vertical-align: middle; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.2rem 0.55rem; border-radius: 999px; background: #5b2b8a; color: #fff }
h1 .beta { font-size: 0.75rem; position: relative; top: -0.2em }

/* Link to /try (new designs being tested) */
.trybar { display: flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.5rem 0.85rem; margin: 0 0 0.8rem; border-radius: 0.9rem;
  border: 2px dashed var(--line2); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 400; font-size: 1rem; line-height: 1.3 }
.trybar span:first-of-type { flex: 1 } .trybar b { font-weight: 800 }

/* ---- park cards and report page: answers per line, real court picture, hours, weather ---- */
.fmeta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; margin: 0.2rem 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--ink2) }
.fmeta .warn { color: var(--amber) } .fmeta .off { color: var(--blue) }
.fnotes { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.4rem 0 }
.fnote { background: #fff1c2; color: #5c4400; border-radius: 0.75rem; padding: 0.45rem 0.75rem; font-weight: 800; font-size: 1rem; line-height: 1.3 }
.fnote span { display: block; font-weight: 600; font-size: 0.95rem }
.fans { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.1rem; border-bottom: 1px solid var(--line) }
.fans:last-of-type { border-bottom: 0 }
.fans .l { flex: 1; min-width: 0; font-size: 0.95rem; color: var(--ink2); font-weight: 700; line-height: 1.2 } .fans .l small { display: block; font-weight: 600 }
.fans .v { font-size: 1.45rem; font-weight: 900; line-height: 1; border-radius: 0.75rem; padding: 0.35rem 0.6rem; text-align: right; white-space: nowrap }
.fans .go { background: #dff4cb; color: #17661a } .fans .wt { background: #ffedc9; color: #7a4700 } .fans .st { background: #dcebf9; color: #0a5591 } .fans .uk { background: var(--line); color: var(--ink2) }
.fpic { display: flex; gap: 0.6rem; justify-content: center; background: #2b5a39; border-radius: 1rem; padding: 0.5rem 0.4rem; margin-top: 0.5rem; box-shadow: inset 0 -5px 0 #1d4127 }
.fgrp { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem }
.fgl { color: #fff; text-align: center; font-weight: 900; font-size: 0.85rem; line-height: 1.1 }
.fcts { display: flex; gap: 0.3rem; justify-content: center }
.fct { flex: 1 1 0; min-width: 0; max-width: 4rem; padding: 0; border: 3px solid transparent; border-radius: 0.75rem; background: none; display: flex; flex-direction: column; align-items: stretch; gap: 2px; color: #fff; font: inherit }
.fct svg { display: block; width: 100%; height: auto }
.flb { font-size: 0.8rem; font-weight: 900; line-height: 1; min-height: 1.2rem; display: flex; align-items: center; justify-content: center }
.fpic.edit .fct { background: #1d4127; border-color: #1d4127; box-shadow: 0 4px 0 #1d4127; cursor: pointer; touch-action: manipulation }
.fpic.edit .fct.u { border: 3px dashed #c8f06a }
.fpic.edit .fct:active { transform: translateY(3px); box-shadow: none }
.frack { display: flex; align-items: center; gap: 0.25rem; min-height: 2.1rem; padding: 0.2rem 0.4rem; border-radius: 0.75rem; background: #244d31; border: 2px solid #d6a656; color: #fff; font-size: 0.8rem; font-weight: 800 }
.frack .fpds { display: flex; gap: 2px; flex: 1; min-width: 0; overflow: hidden } .fpd { flex: none; width: 11px; height: 22px }
.fbest { background: var(--ink); color: #fff; border-radius: 1rem; padding: 0.65rem 0.9rem; margin: 0 0 0.8rem; font-weight: 800; font-size: 1.05rem; line-height: 1.3 }
.fbest small { display: block; font-weight: 600; font-size: 0.9rem; opacity: 0.85 }
.fage { font-size: 0.95rem; color: var(--ink2); margin: 0.4rem 0.1rem 0 }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.6rem }
.tool { min-height: 4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1.1;
  padding: 0.25rem; border-radius: 0.8rem; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation }
.tool i { font-style: normal; font-size: 1.5rem; line-height: 1 }
.tool[aria-pressed="true"], .tog[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink) }
.quick { display: flex; gap: 0.4rem; margin-top: 0.5rem } .quick .btn { flex: 1; min-height: 3rem; font-size: 1rem }
.cnt { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 }
.cnt .t { flex: 1; min-width: 0; font-weight: 800; font-size: 1rem; line-height: 1.2 }
.cnt button { min-width: 3.25rem; min-height: 3rem; font: inherit; font-size: 1.35rem; font-weight: 800; border-radius: 0.75rem; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation }
.cnt output { min-width: 2.5rem; text-align: center; font-size: 1.6rem; font-weight: 900 }
.tog { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; min-height: 3.5rem; padding: 0.5rem 0.75rem; margin: 0.4rem 0; font: inherit; font-size: 1.05rem; font-weight: 800;
  border-radius: 0.8rem; border: 2px solid var(--line2); background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation }
.tog i { font-style: normal; font-size: 1.35rem } .tog span { flex: 1 } .tog small { display: block; font-weight: 600; font-size: 0.9rem; opacity: 0.85 }
.sendbar { position: fixed; inset: auto 0 0; background: var(--card); border-top: 2px solid var(--line); box-shadow: 0 -6px 18px rgba(15, 20, 23, 0.2);
  padding: 0.5rem max(16px, env(safe-area-inset-right, 0px)) calc(0.6rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
.sendbar > div { max-width: 32rem; margin: 0 auto }
.sendbar .btn { flex-direction: column; gap: 0.1rem } .sendbar .btn small { font-size: 0.85rem; font-weight: 700 }
.sendbar .btn:disabled { background: var(--line); border-color: var(--line2); color: var(--ink2) }
.repwrap { padding-bottom: 8rem }

/* A report over 90 minutes old: greyed out, never read as a wait */
.fold .fpic { filter: grayscale(0.85); opacity: 0.6 }