/* "Light up the city": /run (the night map and the Next card), the camera page in a run (/capture?run=1), and the home card.
   Look: "Map the city" (owner-approved 2026-10-30): rounded game surfaces from game-ui.css (sheet, pill, chips, stat tiles), in light and dark;
   gold comes from --tk-gold* (tokay.css). The camera overlay is always on a camera feed, so it uses the --tokay-cam* tokens and bright gold in both
   themes. Orange (--tokay-spot) is not used. Buttons are the Tokay button system; the one addition is .tk-gold (+ .tk-lg), the single big
   "Light it up" / "Next dark shop" action: gold fill, dark ink, same 1 px border, radius 0 and states as every .tk-btn. */

/* ---------- gold action (the game's one big button) ---------- */
.h-button.tk-btn.tk-gold{--g:var(--tk-gold);--g-lo:var(--tk-gold-lo);background:var(--g);border-color:var(--g-lo);color:#16212B}
.h-button.tk-btn.tk-gold:is(:hover,.is-hover):not(:disabled):not([aria-disabled="true"]){filter:brightness(1.08)}
.h-button.tk-btn.tk-gold:focus-visible{outline:2px solid var(--tk-gold-text);outline-offset:2px}
.h-button.tk-btn.tk-lg{--bh:56px;font-size:18px;font-weight:700}
.h-button.tk-btn.tk-lg .h-ic{width:22px;height:22px}
.tk-night-gold{--tk-gold:#F2C230;--tk-gold-text:#F4CF5E;--tk-gold-hi:#FBE48C;--tk-gold-lo:#A9740A} /* the bright golds, for a surface that is dark in both themes (a camera feed) */

/* ---------- /run ("Map the city": the map, the live pill, floating chips, the sheet / the left panel). Primitives live in game-ui.css ---------- */
.tk-runpage{height:100vh;height:100dvh;overflow:hidden}
.tk-run{flex:1;min-height:0;position:relative;--tk-gold:#F2C230;--tk-gold-hi:#FBE48C;--tk-gold-lo:#A9740A} /* bright gold fills in both themes (the text gold stays the themed one) */
.tk-run-stage{position:absolute;inset:0;background:var(--h-surface-2);overflow:hidden}
.tk-run-stage .tk-run-map{position:absolute;inset:0} /* two classes: maplibre-gl.css sets .maplibregl-map{position:relative} and loads later */
.tk-run-map .maplibregl-ctrl-bottom-left,.tk-run-map .maplibregl-ctrl-bottom-right{margin-bottom:var(--card-h,0px)}
.tk-run-over{position:absolute;left:12px;right:12px;top:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;padding-top:env(safe-area-inset-top,0px)}
.tk-run-pill{align-self:stretch;pointer-events:auto;box-shadow:0 0 0 1px var(--tk-g-pill-line),0 10px 22px -12px rgba(0,0,0,.55)}
.tk-run-chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:100%}
.tk-run-chips .tk-fchip{pointer-events:auto}
.tk-run-chips .tk-fchip b{font-size:16px}
.tk-run-chips .tk-fchip{white-space:nowrap}
@media (max-width:899px){.tk-run-chips #citychip{max-width:calc(100vw - 84px)}.tk-run-chips .tk-fchip>span{overflow:hidden;text-overflow:ellipsis}.tk-run.has-crew #citychip{display:none}}
.tk-run.has-pill .tk-run-tools{top:calc(12px + env(safe-area-inset-top,0px) + 64px)}
.tk-rn-first{display:none;color:var(--h-muted);font-weight:500}
.tk-run-maperr{position:absolute;left:12px;top:148px;z-index:2}
.tk-run-tools{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tk-run-fab{position:absolute;right:12px;bottom:calc(var(--card-h,0px) + 16px);z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:8px;transition:bottom .32s var(--tk-g-ease)}
.h-button.tk-btn.tk-run-tool{--bh:48px;width:48px;padding:0;border-radius:50%;background:var(--tk-g-panel);border-color:transparent;box-shadow:0 0 0 1px var(--tk-g-rule),0 8px 18px -10px var(--tk-g-shadow)}
.h-button.tk-btn.tk-run-tool[hidden]{display:none}
.h-button.tk-btn.tk-run-tool[aria-pressed="true"]{color:var(--tk-gold-text);box-shadow:0 0 0 2px var(--tk-gold-text)} /* compass and heading-up when on: gold, never an orange fill */
.h-button.tk-btn.tk-run-tool.is-off{color:var(--h-brand)}
.tk-run-zoom{display:none!important}

/* the sheet (game-ui.css .tk-gsheet) on phones and tablets */
.tk-run-card{--gs-half:clamp(364px,56%,520px);--gs-peek:150px;z-index:7}
.tk-run-card .tk-gsheet-body{padding-top:2px}
.tk-run-card #crew-card{display:none}
.tk-run-crewbox[hidden]{display:none}
.tk-run-over .tk-lu-crew{pointer-events:auto;max-width:100%;box-sizing:border-box;padding:10px 14px;border-radius:var(--tk-g-r-card);background:var(--tk-g-panel);box-shadow:0 0 0 1px var(--tk-g-rule),0 8px 18px -10px var(--tk-g-shadow)}
#crew-over:empty{display:none}

/* ---------- card contents ---------- */
.tk-lu-k{display:block;font:700 12px/1.2 var(--h-font);letter-spacing:.08em;text-transform:uppercase;color:var(--tk-gold-text)}
.tk-lu-k-blue{color:var(--h-brand)}
#cardbody{display:flex;flex-direction:column;gap:12px}
.tk-lu-target,.tk-lu-state,.tk-lu-done{display:flex;flex-direction:column;gap:12px}
.tk-lu-target{flex:1}

/* head: kicker (desktop), kind tag + street, +points, the name */
.tk-rn-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kick kick" "tags pts" "name name";align-items:center;column-gap:12px;row-gap:6px}
.tk-rn-head.is-plain{grid-template-areas:"kick kick" "name name"}
.tk-rn-kick{grid-area:kick;display:none}
.tk-rn-head.is-plain .tk-rn-kick{display:block}
.tk-rn-tags{grid-area:tags;display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.tk-rn-kind{display:inline-flex;align-items:center;gap:7px;min-height:30px;box-sizing:border-box;padding:0 12px 0 10px;border-radius:10px;background:var(--tk-g-card);font:700 15px/1 var(--h-font);color:var(--h-text)}
.tk-rn-kind .h-ic{width:17px;height:17px;color:var(--h-brand)}
.tk-rn-street{font:500 16px/1.2 var(--h-font);color:var(--h-muted);overflow-wrap:anywhere}
.tk-rn-pts{grid-area:pts;display:inline-flex;align-items:center;gap:8px;font:800 34px/1 var(--h-font);letter-spacing:-.02em;color:var(--tk-gold-text);font-variant-numeric:tabular-nums}
.tk-rn-pts .tk-coin{width:26px;height:26px}
.tk-rn-pts .tk-coin i{left:8px;top:5px;width:3px;height:13px}
.tk-rn-pts .tk-coin::after{inset:5px}
.tk-lu-name{grid-area:name;margin:0;font:800 30px/1.1 var(--h-font);letter-spacing:-.02em;overflow-wrap:anywhere;text-wrap:balance}
.tk-lu-sub{font-size:15px;line-height:1.4;color:var(--h-muted);overflow-wrap:anywhere}
.tk-rn-how{margin:0;font:500 16px/1.35 var(--h-font);color:var(--h-muted)}
.tk-rn-steps{display:none;margin:0;padding:0;list-style:none}
.tk-rn-stats{margin:0}
.tk-gstat.is-renew{border:0;font:inherit;text-align:left;cursor:pointer;color:var(--h-text);align-items:flex-start;box-shadow:inset 0 0 0 2px var(--tk-gold-text)}
.tk-gstat.is-renew .tk-gstat-v{color:var(--tk-gold-text);font-size:17px}
.tk-gstat.is-renew:focus-visible{outline:2px solid var(--h-brand);outline-offset:2px}

/* the two actions: the gold key, and Skip with its anchored menu */
.tk-rn-actions{display:flex;flex-direction:column;gap:6px}
.h-button.tk-btn.tk-rn-go{font-size:18px;min-width:0}
.tk-rn-skipwrap{position:relative}
.h-button.tk-btn.tk-rn-skip{width:100%;justify-content:center;font-weight:700;font-size:17px;--bh:48px;color:var(--h-text)}
.tk-rn-scrim{position:fixed;inset:0;z-index:0;margin:0;padding:0;border:0;background:rgba(6,12,18,.5);cursor:default}
.tk-rn-menu{position:absolute;z-index:2;left:0;right:0;bottom:calc(100% + 6px);display:flex;flex-direction:column;padding:6px 0;border-radius:var(--tk-g-r-card);background:var(--tk-g-panel);box-shadow:0 0 0 1px var(--tk-g-rule),0 18px 36px -14px var(--tk-g-shadow)}
.tk-rn-mi{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 20px;border:0;background:none;color:var(--h-text);font:700 17px/1.2 var(--h-font);text-align:left;cursor:pointer}
.tk-rn-mi+.tk-rn-mi{border-top:1px solid var(--tk-g-rule)}
.tk-rn-mi .h-ic{flex:none;color:var(--h-muted)}
.tk-rn-mi:hover:not(:disabled),.tk-rn-mi:focus-visible{background:var(--tk-g-card);outline:0}
.tk-rn-mi:focus-visible{box-shadow:inset 0 0 0 2px var(--h-brand)}
.tk-rn-mi:disabled{opacity:.5;cursor:default}
.tk-lu-chev{display:inline-grid;margin-left:6px;transition:transform .2s var(--tk-g-ease)}
.tk-lu-chev.is-open{transform:rotate(180deg)}

/* run strip, direction row, bonus chips, notes */
.tk-lu-strip{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:var(--tk-g-r-card);background:var(--tk-g-card)}
.tk-lu-strip-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tk-lu-pts{display:flex;align-items:baseline;gap:8px;min-width:0}
.tk-lu-pts b{font-size:26px;font-weight:800;line-height:1;color:var(--tk-gold-text)}
.tk-lu-pts span{font-size:14px;color:var(--h-muted)}
.tk-lu-lit{font-size:13px;font-weight:700;padding:4px 10px;border-radius:12px;background:var(--tk-g-panel);flex:none}
.tk-lu-combo{display:flex;align-items:center;gap:10px}
.tk-lu-combochip{flex:none;font-size:16px;font-weight:800;line-height:1;padding:5px 10px;border-radius:12px;color:var(--h-text);background:var(--tk-g-panel);white-space:nowrap}
.tk-lu-combochip.is-live{background:var(--tk-gold);color:#16212B}
.tk-lu-comboinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tk-lu-comboinfo>span{font-size:13px;line-height:1.35;color:var(--h-muted)}
.tk-lu-comboinfo [data-cd]{font-family:var(--h-mono);font-weight:700;color:var(--h-text)}
.tk-lu-bar{height:8px;border-radius:4px;background:var(--tk-g-rule-2)}
.tk-lu-bar i{display:block;height:100%;border-radius:4px;background:var(--tk-gold);transition:width 1s linear}
.tk-lu-way{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:var(--tk-g-r-card);background:var(--tk-g-card)}
.tk-lu-way b{font-size:17px;font-weight:700;line-height:1.2;color:var(--h-text)}
.tk-lu-arrow{flex:none;width:36px;height:36px;display:grid;place-items:center;color:var(--tk-gold-text);transition:transform .12s linear}
.tk-lu-arrow .h-ic{width:26px;height:26px}
.tk-lu-offer{display:flex;flex-direction:column;gap:8px}
.tk-lu-offerbtns{display:flex;flex-wrap:wrap;gap:8px}
.tk-lu-offerbtns .tk-btn{min-height:44px}
.tk-lu-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tk-lu-chips li{padding:4px 10px;border-radius:12px;font-size:13px;font-weight:700;line-height:1.3;color:var(--tk-gold-text);box-shadow:inset 0 0 0 1px var(--tk-gold-lo)}
.tk-lu-note{margin:0;padding:10px 12px;border-radius:var(--tk-g-r-card);font-size:14px;line-height:1.4;color:var(--h-muted);background:var(--tk-g-card)}
.tk-lu-center{text-align:center;background:none;padding:0;font-size:13.5px}
.tk-lu-state{align-items:center;text-align:center;padding:8px 0 4px}
.tk-lu-state .tk-lu-name{font-size:24px}
.tk-lu-state p{margin:0;max-width:34ch;font-size:15px;line-height:1.45;color:var(--h-muted)}
.tk-lu-state .tk-btn{align-self:stretch}
.tk-lu-state .h-run{margin:4px 0}
.tk-lu-crew{display:flex;flex-direction:column;gap:6px}
.tk-run-card .tk-lu-crew{padding:12px 14px;border-radius:var(--tk-g-r-card);background:var(--tk-g-card)}
.tk-lu-dispatch{display:flex;gap:10px;align-items:flex-start}
.tk-lu-dispatch .tk-lu-k{flex:none;padding-top:2px;color:var(--h-muted)}
.tk-lu-dispatch p{margin:0;font-size:14px;line-height:1.4;color:var(--h-text);overflow-wrap:anywhere}
.tk-lu-dispatch.is-new{animation:tk-lu-flash 2.4s ease-out}
@keyframes tk-lu-flash{0%,40%{box-shadow:0 0 0 2px var(--tk-gold)}100%{box-shadow:0 0 0 2px transparent}}
.tk-lu-frontier .tk-lu-name{font-size:26px}
.tk-lu-done{align-items:stretch}
.tk-lu-done .tk-lu-name{font-size:28px}
.tk-lu-bigpts{display:flex;align-items:center;gap:12px}
.tk-lu-bigpts b{font-size:clamp(40px,12vw,56px);line-height:1;font-weight:800;color:var(--tk-gold-text)}
.tk-lu-bigcoin{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:block}
.tk-rn-next{display:none}

/* markers on the map */
.tk-run-tgt{position:relative;width:34px;height:34px;pointer-events:none}
.tk-run-ring{position:absolute;inset:-4px;box-sizing:border-box;border-radius:50%;border:2.5px solid var(--tk-gold-text);opacity:.6;animation:tk-run-ring 2.2s ease-out infinite}
.tk-run-pin{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--tk-gold);color:#16212B;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.35)}
.tk-run-pin .h-ic{width:19px;height:19px}
.tk-run-lab{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);display:flex;flex-direction:column;gap:1px;max-width:220px;white-space:nowrap;padding:6px 12px;border-radius:12px;color:var(--h-text);background:var(--tk-g-panel);box-shadow:0 0 0 1px var(--tk-g-rule),0 6px 14px -8px var(--tk-g-shadow)}
.tk-run-lab b{font:700 15px/1.2 var(--h-font);overflow:hidden;text-overflow:ellipsis}
.tk-run-lab small{font:500 13px/1.2 var(--h-font);color:var(--h-muted)}
@keyframes tk-run-ring{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.tk-run-front{display:flex;flex-direction:column;gap:1px;padding:8px 14px;border-radius:14px;font:13px/1.3 var(--h-font);color:var(--h-text);background:var(--tk-g-panel);box-shadow:0 0 0 2px var(--h-brand),0 6px 14px -8px var(--tk-g-shadow);pointer-events:none}
.tk-run-front b{font-weight:700;font-size:15px}
.tk-run-front span{color:var(--h-muted)}
.tk-run-pulse{width:12px;height:12px;pointer-events:none}
.tk-run-pulse i{display:block;width:12px;height:12px;border-radius:50%;background:var(--tk-gold);animation:tk-run-lit 1.4s ease-out forwards}
@keyframes tk-run-lit{0%{transform:scale(1);opacity:.95}100%{transform:scale(11);opacity:0}}
@media (prefers-reduced-motion:reduce){.tk-run-ring,.tk-lu-dispatch.is-new{animation:none}.tk-lu-bar i,.tk-lu-chev,.tk-lu-arrow,.tk-run-fab{transition:none}}

/* short phones: the map needs the room, so the sheet and the chips give some up */
@media (max-height:780px) and (max-width:899px){
  .tk-run-card{--gs-half:clamp(330px,56%,400px)}
  .tk-run-chips #citychip{display:none}
  .tk-lu-name{font-size:26px}
  .tk-rn-pts{font-size:30px}
}
@media (max-width:420px){.tk-rn-street{font-size:15px}.tk-lu-name{font-size:28px}}
@media (max-width:380px){.tk-rn-stats .tk-gstat-v{font-size:19px}.tk-rn-stats .tk-gring{width:18px;height:18px;right:8px;top:10px}.tk-rn-stats .tk-gstat{padding-left:10px;padding-right:10px}}

/* ---------- desktop (>= 900 px): the sheet is a floating panel on the left, the chips run along the top of the map ---------- */
@media (min-width:900px){
  .tk-run-over{left:calc(clamp(400px,32vw,460px) + 40px);right:76px;top:16px;flex-direction:row;flex-wrap:wrap;align-items:center}
  .tk-run-pill,.tk-run-card .tk-gsheet-handle{display:none}
  .tk-run-chips{flex-direction:row;flex-wrap:wrap}
  .tk-run-tools{top:16px;right:16px}
  .tk-run-fab{right:16px;bottom:16px;transition:none}
  .tk-run-zoom{display:inline-flex!important}
  .tk-run-maperr{left:calc(clamp(400px,32vw,460px) + 40px);top:76px}
  .tk-rn-first{display:inline}
  .tk-run.has-pill .tk-run-tools{top:16px}
  .tk-run-card{position:absolute;left:16px;top:16px;bottom:auto;right:auto;width:clamp(400px,32vw,460px);max-width:none;height:auto;max-height:calc(100% - 32px);margin:0;border-radius:28px;transition:none}
  .tk-run-card.is-tall{height:calc(100% - 32px)}
  .tk-run-card .tk-gsheet-body{padding:22px 22px max(22px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
  .tk-run-card #crew-card{display:block}
  .tk-run-card #cardbody{flex:1}
  .tk-run-over #crew-over{display:none}
  .tk-rn-head{grid-template-areas:"kick kick" "tags tags" "name pts";row-gap:10px}
  .tk-rn-kick{display:block}
  .tk-rn-pts{align-self:end}
  .tk-lu-strip{order:-3}
  .tk-rn-head{order:-2}
  .tk-rn-stats{order:-1}
  .tk-rn-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tk-rn-steps li{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:var(--tk-g-r-card);background:var(--tk-g-card);font:700 15px/1.25 var(--h-font);color:var(--h-text)}
  .tk-rn-thumb{flex:none;width:44px;height:60px;border-radius:10px}
  .tk-rn-actions{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0 10px}
  .tk-rn-go{flex:1 1 220px}
  .tk-rn-skipwrap{flex:none}
  .h-button.tk-btn.tk-rn-skip{width:auto;min-width:104px;--bh:56px}
  .tk-rn-menu{left:auto;right:0;width:270px}
  .tk-rn-next{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:14px}
  .tk-rn-next .tk-lu-k{color:var(--h-muted);padding-bottom:6px;border-bottom:1px solid var(--tk-g-rule)}
  .tk-rn-next ul{margin:0;padding:0;list-style:none}
  .tk-rn-next li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--tk-g-rule)}
  .tk-rn-next li:last-child{border-bottom:0}
  .tk-rn-ki{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--tk-g-card);color:var(--h-brand)}
  .tk-rn-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .tk-rn-nm b{font:700 16px/1.2 var(--h-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tk-rn-nm small{font:500 14px/1.25 var(--h-font);color:var(--h-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tk-rn-np{flex:none;font:800 15px/1 var(--h-font);color:var(--tk-gold-text);font-variant-numeric:tabular-nums}
}

/* ---------- the camera page: no header bar, the camera is the screen (capture.html) ---------- */
.tk-capture{--cx-bg:var(--h-surface);--cx-ink:var(--h-text);--cx-mute:var(--h-muted);--cx-line:var(--h-line);--cx-gold:var(--tk-gold-text)}
.tk-ctxrow{display:flex;align-items:flex-start;gap:8px;min-width:0}
.tk-ctxmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tk-ctxr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.h-button.tk-btn.tk-cback{flex:none;--bh:44px;width:44px;color:var(--h-brand)}
.tk-runpill{display:flex;flex-direction:column;gap:1px;min-width:0;padding:6px 10px;color:var(--cx-ink);background:var(--cx-bg);border:1px solid var(--cx-line)}
.tk-runpill[hidden],.tk-runstat[hidden],.tk-runcheck[hidden],.tk-nextbtn[hidden]{display:none}
.tk-runpill b{font-size:15px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.tk-runpill span{font-size:12px;line-height:1.3;color:var(--cx-mute);overflow-wrap:anywhere}
.tk-runstat{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tk-runstat .tk-combo{font:700 15px/1 var(--h-mono);padding:3px 8px;color:#16212B;background:var(--tk-gold);border:1px solid var(--tk-gold-lo)}
.tk-runstat .tk-runpts{font:700 15px/1 var(--h-mono);padding:3px 6px;color:var(--cx-gold);background:var(--cx-bg);border:1px solid var(--cx-line)}
.tk-runcheck{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.tk-runcheck li{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--cx-ink);background:var(--cx-bg);border:1px solid var(--cx-line)}
.tk-runcheck i{flex:none;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--cx-mute);display:grid;place-items:center;color:transparent;transition:background .2s,border-color .2s}
.tk-runcheck i svg{width:11px;height:11px}
.tk-runcheck li.is-done i{background:var(--tk-gold);border-color:var(--tk-gold-lo);color:#16212B}
.tk-nextbtn.h-button.tk-btn{grid-column:3;justify-self:end;--bh:56px;height:auto;min-height:56px;max-width:120px;padding:6px 10px;flex-direction:column;gap:2px;white-space:normal;text-align:center;font-size:13px;line-height:1.2;font-weight:700;animation:tk-lu-pop .4s var(--h-spring)}
.tk-nextbtn .tk-mono{font-size:12px;font-weight:600}
@keyframes tk-lu-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.tk-runtip{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--cx-ink);background:var(--cx-bg);border:1px solid var(--cx-line);padding:5px 8px}
.tk-runtip[hidden]{display:none}
.tk-inrun  /* in a run the overlay is busy enough; the offer still comes after photos */
.tk-capture .tkfx-coin{--tk-gold:#F2C230;--tk-gold-hi:#FBE48C;--tk-gold-lo:#A9740A} /* the camera is dark in both themes: coins use the bright golds */
.tk-inrun .tk-shutter{border-color:var(--tk-gold-text);box-shadow:0 0 0 6px color-mix(in srgb,var(--tk-gold) 28%,transparent),0 3px 14px color-mix(in srgb,var(--h-shadow) 50%,transparent)}
.tk-inrun .tk-shutter i{background:var(--tokay-cam-ink)}
.tk-inrun .tk-shutter:disabled{box-shadow:none;border-color:var(--tokay-cam-mute)}
.tk-inrun .tk-shutter:disabled i{background:var(--tokay-cam-mute)}
.tk-capture .tk-mom{top:calc(env(safe-area-inset-top,0px) + 132px)}

/* phones and tablets (the camera fills the page): the context row floats over the top of the camera */
@media (max-width:899px), (max-width:1200px) and (orientation:portrait){
  .tk-capture{--cx-bg:color-mix(in srgb,var(--tokay-cam) 76%,transparent);--cx-ink:var(--tokay-cam-ink);--cx-mute:var(--tokay-cam-mute);--cx-line:color-mix(in srgb,var(--tokay-cam-ink) 28%,transparent);--cx-gold:#F4CF5E}
  .tk-capture .tk-ctx{position:absolute;left:0;right:0;top:0;z-index:4;padding:calc(10px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 0 calc(12px + env(safe-area-inset-left,0px));pointer-events:none}
  .tk-capture .tk-ctx>*,.tk-capture .tk-ctxrow>*{pointer-events:auto}
  .tk-capture .tk-ctx>.tk-ctxrow{pointer-events:none}
  .tk-capture .tk-view{margin-top:0}
  .tk-capture .tk-banner{top:var(--ctx-h,0px);background:var(--cx-bg);border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .tk-capture .tk-banner p{color:var(--cx-ink)}
  .h-button.tk-btn.tk-cback{background:var(--cx-bg);border-color:var(--cx-line);color:var(--cx-ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .tk-capture .tk-ctxmain .h-button.tk-btn.is-secondary{background:var(--cx-bg);border-color:var(--cx-line);color:var(--cx-ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  /* the store chip sits on the live image: a near-solid camera-dark surface (no blur) with camera-ink text, so it reads in both themes */
  .tk-capture .tk-ctxmain .h-button.tk-btn.is-select.is-secondary{background:color-mix(in srgb,var(--tokay-cam) 94%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
  .tk-capture .tk-ctxmain .h-button.tk-btn.is-secondary .k,.tk-capture .tk-ctxmain .h-button.tk-btn.is-secondary .near{color:var(--cx-mute)}
  .tk-capture .tk-ctxmain .h-button.tk-btn.is-select.is-secondary b,.tk-capture .tk-ctxmain .h-button.tk-btn.is-select.is-secondary .num,.tk-capture .tk-ctxmain .h-button.tk-btn.is-select.is-secondary #chipchev{color:var(--cx-ink)}
  .tk-capture .tk-ctx .tk-where{align-self:flex-start;width:fit-content;max-width:100%;padding:0 4px 0 10px;margin-top:6px;color:var(--cx-ink);background:var(--cx-bg);border:1px solid var(--cx-line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .tk-capture .tk-ctx .tk-where[hidden]{display:none}
  .tk-capture .tk-ctx .tk-alt{padding:0;color:var(--cx-ink);background:var(--cx-bg);border:1px solid var(--cx-line)}
  .tk-capture .tk-pts{color:var(--cx-ink)}
  .tk-capture .tk-pts-n{color:var(--cx-gold)}
  .tk-capture .tk-pts-pill{background:var(--cx-bg);border-color:var(--cx-line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .tk-capture .tk-ctx .tk-bounty{margin:6px 0 0;pointer-events:auto}
}
/* desktop: the context row is the first thing in the panel beside the camera */
@media (min-width:900px) and (orientation:landscape), (min-width:1201px){
  .tk-capture .tk-ctxrow{align-items:center;flex-wrap:wrap;row-gap:8px}
  .tk-capture .tk-ctxmain{flex:1 1 150px}
  .tk-capture .tk-ctxr{flex-direction:row;flex-wrap:wrap;align-items:center;margin-left:auto}
  .tk-capture .tk-ctx .tk-runpill{border-left:3px solid var(--tk-gold);padding-left:9px}
}

.tk-ctxmain .tk-alt .tk-btn{white-space:normal;height:auto;min-height:44px;max-width:100%;text-align:left;line-height:1.25} /* the "Or <store>" button shares the column with the back button and the counter: long names wrap */

/* ---------- the home card ---------- */
.tk-lu{--lu-bg:#1C2834;--lu-ink:#EAF0F5;--lu-mute:#A9B8C6;--lu-line:#3A4A5A;--lu-gold:#F4CF5E;--lu-gold-fill:#F2C230;--lu-gold-lo:#A9740A; /* a night tile on a light or a dark home page: always dark slate and gold */
  display:flex;flex-direction:column;gap:14px;box-sizing:border-box;margin:14px 0 6px;padding:16px;color:var(--lu-ink);background:var(--lu-bg);border:1px solid var(--lu-line)}
.tk-lu[hidden]{display:none}
.tk-lu-dots{display:none}
.tk-lu-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.tk-lu .tk-lu-k{color:var(--lu-gold)}
.tk-lu-h{margin:0;font-size:clamp(20px,5.2vw,26px);line-height:1.15;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.tk-lu-p{margin:0;font-size:14px;line-height:1.4;color:var(--lu-mute)}
.tk-lu-p b{color:var(--lu-ink);font-weight:600}
.tk-lu .h-button.tk-btn.tk-gold{--g:var(--lu-gold-fill);--g-lo:var(--lu-gold-lo)}
.tk-lu .tk-lu-bar{background:var(--lu-line)}
.tk-lu .tk-lu-bar i{background:var(--lu-gold-fill)}
@media (min-width:640px){
  .tk-lu{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:18px 22px}
  .tk-lu .tk-btn{flex:none;min-width:200px}
  .tk-lu-dots{display:block;flex:none;width:96px;height:56px}
}
body.is-searching .tk-lu-home{display:none}