/* "Ask for it" (public/wanted.js, src/wanted.ts): the ask box in an empty search, the My asks list on /settings, the found banner, and the wanted tag on the game map sheet.
   Buttons are the Tokay button system; 44 px touch targets (--bh) on phones. Orange is not used: found is the --h-ok green, wanted on the map is the game gold. */
.tk-ask{border:1px solid var(--h-line-strong);background:var(--h-surface);padding:14px;text-align:left;display:flex;flex-direction:column;gap:10px;margin-top:14px}
.tk-ask b{font-size:16px;font-weight:600}
.tk-ask p{margin:0;color:var(--h-muted);font-size:14.5px;line-height:1.45}
.tk-ask-err{color:var(--h-danger)!important}
.tk-ask-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.tk-ask-row > .h-button{flex:0 1 auto}
.tk-ask .h-button.tk-btn,.tk-asks .h-button.tk-btn,.tk-ask-banner .h-button.tk-btn{--bh:44px}
.tk-ask .h-button.tk-btn:not(.is-sm):not(.is-icon){width:100%}
.tk-ask-tag{display:inline-flex;align-items:center;gap:2px}
.tk-ask-tag .h-ic{width:14px;height:14px;color:var(--h-ok)}
.tk-ask-ok{color:var(--h-ok)}
@media (min-width:768px){.tk-ask{max-width:520px;margin-left:auto;margin-right:auto}}

.tk-asks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tk-asks-item{border:1px solid var(--h-line);background:var(--h-surface);padding:12px 14px;display:flex;flex-direction:column;gap:10px;border-radius:14px}
.tk-asks-item.is-found{border-color:color-mix(in srgb,var(--h-ok) 55%,var(--h-line))}
.tk-asks-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tk-asks-text b{font-size:16px;overflow-wrap:anywhere}
.tk-asks-confirm{flex:1 1 100%;margin:0}
@media (min-width:1024px){.tk-asks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}

.tk-ask-banner{position:fixed;z-index:60;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 10px);background:var(--h-surface);border:1px solid var(--h-ok);box-shadow:0 12px 30px var(--h-shadow);padding:14px;display:flex;flex-direction:column;gap:8px;max-width:460px}
.tk-ask-banner h3{margin:0;font-size:19px}
.tk-ask-banner p{margin:0;color:var(--h-muted);font-size:14.5px}
.tk-ask-ok-t{color:var(--h-ok);font-size:15px}
.tk-ask-banner .tk-ask-x{--bh:44px;margin:-8px -8px 0 0}
@media (min-width:768px){.tk-ask-banner{left:auto;right:24px;top:116px;width:430px}}

/* /run: a wanted shop's sheet line */
.tk-wanted-line{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:8px 0 0;padding:10px 12px;border:1px dashed var(--tk-gold-text);border-radius:12px;font-size:14.5px;color:var(--h-text)}
.tk-wanted-line b{color:var(--tk-gold-text);font-weight:700}
/* the tie-break block (target.pick_reason wanted_tiebreak): who asked, their words, and the near-tie it won; same dashed gold border, no fill, no stripe, no orange */
.tk-wanted-line.is-why{display:grid;gap:2px}
.tk-wanted-line.is-why .tk-wanted-for{color:var(--h-muted);font-size:13.5px}
.tk-wanted-line.is-why .tk-wanted-beat{margin-top:4px;padding-top:6px;border-top:1px dashed var(--tk-gold-text);font-size:13.5px}

/* "Wanted near you" (wanted.js mountRail, index.html #wanted). Phones: one quiet row to /run, only when something is wanted. From 1024 px: a sticky 360 px right rail beside the home lists.
   With search results the rail folds to one line above them so the results and #detail keep their columns. Gold dashed chip for the ask count; no orange. */
.tk-wantedrail{margin-top:20px}
.tk-wantedrail .wr-line{display:none;align-items:center;min-height:44px;padding:8px 14px;border:1px dashed var(--tk-gold-text);border-radius:12px;color:var(--h-text);font-size:14.5px;text-decoration:none;overflow-wrap:anywhere}
.tk-wantedrail.has-rows .wr-line{display:flex}
.tk-wantedrail .wr-card{display:none}
.tk-hero.compact+.tk-wrap>.tk-wantedrail{display:none}
.tk-wantedrail .wr-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.tk-wantedrail .wr-head h2{margin:0}
.tk-wantedrail .wr-count{font-size:13.5px;color:var(--h-muted)}
.tk-wantedrail .wr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tk-wantedrail .wr-row{border:1px solid var(--h-line);background:var(--h-surface);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;transition:opacity .16s ease}
.tk-wantedrail .wr-row.is-out{opacity:0}
.tk-wantedrail .wr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tk-wantedrail .wr-name{font-size:16px;font-weight:600;overflow-wrap:anywhere;min-width:0}
.tk-wantedrail .wr-chip{flex:none;font-size:12.5px;padding:2px 8px;border:1px dashed var(--tk-gold-text);border-radius:999px;color:var(--tk-gold-text);white-space:nowrap}
.tk-wantedrail .wr-meta{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;color:var(--h-muted)}
.tk-wantedrail .wr-for{font-size:14.5px;overflow-wrap:anywhere}
.tk-wantedrail .wr-act{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:2px}
.tk-wantedrail .wr-ago{font-size:13px;color:var(--h-muted)}
.tk-wantedrail .wr-act .h-button.tk-btn,.tk-wantedrail .wr-state .h-button.tk-btn{--bh:44px}
.tk-wantedrail .wr-state{border:1px solid var(--h-line);background:var(--h-surface);border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tk-wantedrail .wr-state p{margin:0;color:var(--h-muted);font-size:14.5px;line-height:1.45}
.tk-wantedrail .wr-all{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--h-text);font-size:14.5px}
@media (prefers-reduced-motion:reduce){.tk-wantedrail .wr-row{transition:none}}
@media (min-width:1024px){
  .tk-wantedrail{margin-top:0}
  .tk-wantedrail .wr-line{display:none!important}
  .tk-wantedrail .wr-card{display:block}
  .tk-hero.compact+.tk-wrap>.tk-wantedrail{display:block}
  /* home: list column + rail */
  .tk-wrap:has(#wanted:not([hidden])):not(:has(.tk-result,.tk-lk)){display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:clamp(24px,3vw,48px);align-items:start}
  .tk-wrap:has(#wanted:not([hidden])):not(:has(.tk-result,.tk-lk))>:not(#wanted):not(#city){grid-column:1}
  .tk-wrap:has(#wanted:not([hidden])):not(:has(.tk-result,.tk-lk))>#wanted{grid-column:2;grid-row:1 / span 8;position:sticky;top:calc(var(--tk-bar) + 16px);margin-top:clamp(20px,3vw,32px)}
  .tk-wrap:has(#wanted:not([hidden])):not(:has(.tk-result,.tk-lk)) .tk-sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the city table (rank.css) shares the right column: the rail on top, the table under it */
  .tk-hero:not(.compact)+.tk-wrap:has(#wanted:not([hidden])):has(#city:not([hidden]))>#wanted{grid-column:2;grid-row:1;position:static;margin-top:clamp(20px,3vw,32px)}
  .tk-hero:not(.compact)+.tk-wrap:has(#wanted:not([hidden])):has(#city:not([hidden]))>#city{grid-row:2 / span 4;margin-top:20px}
  /* search results showing: the rail is one line above them */
  .tk-wrap:has(.tk-result,.tk-lk)>#wanted{grid-column:1/-1;grid-row:1;margin:12px 0 0}
  .tk-wrap:has(.tk-result,.tk-lk)>#wanted .wr-card{display:none}
  .tk-wrap:has(.tk-result,.tk-lk)>#wanted.has-rows .wr-line{display:flex!important}
  .tk-wrap:has(.tk-result,.tk-lk)>#wanted:not(.has-rows){display:none}
  .tk-wrap:has(.tk-result,.tk-lk)>#results{grid-row:2}
  .tk-wrap:has(.tk-result,.tk-lk)>.tk-detail:not([hidden]){grid-row:2}
}
.tk-wantedrail [hidden]{display:none!important}