/* Next Kopi runtime layer: what the boards drew inside a phone frame, placed in a real viewport.
   Colours come from tokens.css only. Component look comes from kit.css. */
html{background:var(--paper);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100dvh;font-size:var(--t-body)}
#app{min-height:100dvh;position:relative;padding-bottom:140px}
#app.pushed{padding-bottom:40px}
:focus-visible{outline:2px solid var(--kopi);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* safe areas: the boards reserved 54px for a status bar */
.hd{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}
.cmp{position:fixed;height:auto;min-height:60px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;background:var(--paper-raised);backdrop-filter:none;-webkit-backdrop-filter:none}  /* round 30.1 note 4: a solid bar, so the page no longer reads through it */
.cmp a.l{color:var(--kopi);text-decoration:none;min-width:0}
.cmp .l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}  /* a long back label (“Friday breakfast”) stays on one line */
.overimg{top:calc(env(safe-area-inset-top,0px) + 12px)}
.pushed-body{padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
.av-btn{border-radius:50%;display:grid;place-items:center;width:44px;height:44px}

/* the floating nav, fixed to the viewport */
.nav{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transition:transform .2s ease}
.cap,.tab,.fab{transition:height .2s ease,width .2s ease,border-radius .2s ease}
.tab{text-decoration:none}.tab:hover{text-decoration:none}
@media (max-width:359px){.nav .cap{flex:1}.nav .tab{flex:1;width:auto}}
@media (prefers-reduced-motion:reduce){.nav,.cap,.tab,.fab,.sheet{transition:none!important;animation:none!important}}

/* sheets: fixed, scrollable, animated in */
.scrim{position:fixed;animation:nk-fade .2s ease}
.sheet>*{flex-shrink:0}
.sheet{position:fixed;max-height:92dvh;overflow:auto;overscroll-behavior:contain;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px);animation:nk-up var(--dur-sheet) var(--ease-sheet)}
@keyframes nk-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes nk-fade{from{opacity:0}to{opacity:1}}
.px16{padding-left:16px;padding-right:16px}  /* the cards' edge on a phone (walk 2026-10-29: Find someone sat 4px inside the cards) */
.bar-bottom{position:fixed;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
#app:has(.bar-bottom){padding-bottom:calc(env(safe-area-inset-bottom,0px) + 190px)}  /* round 46 GAPS 3: the page scrolls clear of the In · Maybe · Can't bar */
body:has(.bar-bottom) .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 160px)}  /* round 46 · 3: the joined line sits above the bar */
body.nv35:has(.nav.fab16) #app{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 176px)}  /* round 47 GAPS 3·4: the + (bottom 88, 64 tall) no longer sits on the circle's last line */

/* form controls inside the designer's .inp shell */
.fld-l{font:600 14px var(--font-body);color:var(--ink-2)}
.inp input,.inp textarea,.inp select{border:0;background:transparent;font:inherit;color:inherit;outline:none;min-width:0;width:100%;resize:vertical}
.inp:focus-within{border-color:var(--kopi);background:var(--paper-raised)}
.inp input::placeholder,.inp textarea::placeholder{color:var(--ink-3)}
.tog-w{position:relative;display:inline-flex;flex:none}
.tog-i{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.tog-i:checked+.tog{background:var(--in)}.tog-i:checked+.tog:after{left:22px}
.tog:after{transition:left .15s ease}
.tog-i:focus-visible+.tog{outline:2px solid var(--kopi);outline-offset:2px}
button:disabled{opacity:.5;cursor:default}
a.btn:hover,a.chip:hover,a.li:hover,a.row:hover,a.card:hover,.hero a:hover{text-decoration:none}
a.li{color:inherit}
.seg button{cursor:pointer}
.code-in{letter-spacing:.5em;font:500 26px var(--font-display);text-align:center}

/* toast (design round 3): one line, an optional action such as Undo; fixed above the capsule */
.toast{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 100px);max-width:480px;margin:0 auto;animation:nk-fade .2s ease}
.toast.plain{padding-right:16px}
/* the helper's sheet opens over the form's sheet */
#sheets2 .scrim{opacity:.6;z-index:50}
#sheets2 .sheet{z-index:51}
.inp .hin{margin-left:4px}
.hsrc a{color:var(--kopi)}

/* compact title bar that appears when a tab's large title scrolls away */
.mini{position:fixed;top:0;left:0;right:0;z-index:15;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--glass-edge);text-align:center;font:600 17px var(--font-body);transform:translateY(-100%);transition:transform .2s ease}
.mini.show{transform:none}

.desk-only{display:none}
/* desktop: one centred 640px column, the capsule bottom-centre, sheets as centred modal cards */
@media (min-width:1024px){
  #app{width:var(--col-desktop);margin:0 auto}
  .hd{padding-left:0;padding-right:0}
  .nav{left:50%;right:auto;transform:translateX(-50%)}
  .cmp,.mini{left:50%;right:auto;width:var(--col-desktop);transform:translateX(-50%);border-radius:0 0 20px 20px}
  .mini:not(.show){transform:translate(-50%,-100%)}
  .mini.show{transform:translateX(-50%)}  /* shown, it stays centred over the column (CO 2026-10-14: off to the right) */
  .sheet{left:50%;right:auto;top:50%;bottom:auto;width:480px;transform:translate(-50%,-50%);border-radius:24px;padding:24px;max-height:86dvh;animation:nk-fade .2s ease}
  .sheet .grab{display:none}
  .bar-bottom{display:none}
  .desk-only{display:block}
  /* the design wraps cards in margin:0 -16px so card edges meet the column edges */
  /* CO 2026-10-13 (desktop widths inconsistent): every block that keeps a 16px side margin on the phone meets the
     column edges here too, not only .card, so cards, rows, tabs and the Since card share one left and one right edge */
  #app :is(.card,.cv,.wa10,.keep10,.nudge10,.banner,.talk9,.gone9,.wa9,.d3flag9,.keep11,.k12,.tbs16.px,.tl30,.w49,.pn30,.ps30,.ob30,.ord8,.join8){margin-left:0;margin-right:0}
  #app .since16{padding-left:0;padding-right:0}
  /* round 37 B·5: I owe one / I bought one stay left-aligned within 640 on desktop */
  #app .buy37{max-width:var(--w-form)}
  /* Home (round 15) pads its own rows 20px; on desktop they meet the column edges like every other screen */
  #app :is(.top15,.tt15,.pbw15,.ex15,.pc15,.uc35,.tc34,.nk34p,.th34,.runs15){padding-left:0;padding-right:0}
  #app .ck15{padding-left:0}
  #app .bleed16{margin-left:0;margin-right:0}
  #app .sh,#app .grp{padding-left:4px;padding-right:4px}
  #app :is(.px,.px16){padding-left:0;padding-right:0}
  #app .hero>.img:first-child{height:220px!important}
  #app>.img:first-child{border-radius:0 0 24px 24px}
  .sit-title{font-size:40px}
  .toast,body:has(.bar-bottom) .toast{bottom:112px}
  #app:has(.bar-bottom){padding-bottom:140px}  /* the bar is hidden on desktop */
  body.nv35 #app{padding-bottom:184px}  /* round 47 GAPS 3·4: the toast (bottom 112 + its height) no longer covers the last row */
  #sheets2 .sheet{width:480px}
  /* round 37 · C — the desktop width system (design/round-37/return, board C·1) */
  .sheet{width:var(--w-dialog);border-radius:20px;max-height:80vh}
  /* round 37.1 · A (replaces 37 C's whole-Form-screen 640): every screen is the one 1080 column, so nothing jumps between
     screens; on a Form screen everything under the heading sits in a 640 measure, left-aligned with the heading */
  #app.wf37 .pushed-body,#app.wf37 [data-stage],#app.wf37 .mt37>*{max-width:var(--w-form)}
  #app.wf37 .cmp{position:static;transform:none;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px 0 4px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:0}
  #app.wf37 .cmp>.l{height:auto}
  #app.wf37 .cmp .t{text-align:left;justify-content:flex-start;font:600 32px/1.15 var(--font-display,var(--font-body))}
  #app.wf37 .cmp .r{position:absolute;right:0;top:20px}
  #app.wf37 .cmp{position:relative;left:auto;right:auto}
  #app.wf37 .av371{flex-direction:row;align-items:center!important;gap:16px}  /* Profile: the photo left, Add a photo beside it */
  #app.wf37 .cmp .r [type=submit]{display:none}  /* Save moves under the fields it saves (save371) */
  #app.wf37 .pushed-body{padding-top:16px}
  #app .save371{margin-top:4px}
  #app.wf37 .cs371~.cmp>:not(.r){display:none}  /* Circle settings opens under the circle's tabs, not its own heading */
  #app.wf37 .cs371~.cmp{padding:0;min-height:0}
  #app.wf37 .cs371~.cmp .r{top:-44px}
  /* Form: fields and full-width buttons fill the 640 */
  /* Page: a lone field (search) caps at 640, left-aligned; buttons are their own size, left-aligned, min 200; inside a card they fill it */
  #app:not(.wf37) .fld{max-width:var(--w-form)}
  #app:not(.wf37) .btn.w{width:auto;min-width:200px;align-self:flex-start}
  #app:not(.wf37) .card .btn.w{width:100%;min-width:0;align-self:stretch}
  /* covers: a 240px banner as wide as its column, cropped centred; phones keep 3:2 */
  #app .frame32{aspect-ratio:auto;height:240px}
  #app .hero>.img:first-child{height:240px!important}
  /* Home: the box stays 640 and centred, the row of words centred under it */
  #app .pbw15{max-width:var(--w-form);margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}
}

/* /admin: the same calm single column */
.admin{padding:0 16px 40px}
.admin .topbar{min-height:72px;padding-top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:space-between;max-width:var(--col-desktop);margin:0 auto;gap:12px}
.admin .colw{max-width:var(--col-desktop);margin:0 auto}
.admin .chip{text-decoration:none}
.admin .li .row{flex:none}
@media (max-width:600px){.admin .hide-sm{display:none}.admin .li{flex-wrap:wrap}.admin .li>.row{width:100%;justify-content:flex-end}}

[hidden]{display:none!important}  /* a flex/grid class must never un-hide a hidden element */
/* Add / edit a place: the pin (round 1 · §4.5) */
.map12{height:200px;border-radius:var(--r-field);overflow:hidden;border:1px solid var(--line);background:var(--paper-sunk);z-index:0}
.pin12{color:var(--kopi);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}.pin12 .ic{width:36px;height:36px;fill:var(--kopi-soft)}
.map12 .leaflet-control-attribution{font:11px var(--font-body);background:var(--glass)}