/* Tokay-only components. Built from Halite tokens (--h-*); no raw colours.
   Load order: vendor/halite.css, tokay-theme.css, tokay.css. */
.hidden{display:none!important}
body{margin:0}
.tk-main{max-width:640px;margin:0 auto;padding:16px 16px 64px}
.tk-main>*+*{margin-top:14px}

/* masthead: Halite's dotted stage, tinted warm, spots in the accent */
.tk-masthead{--h-tint:var(--tokay-tint);--h-glow:45%;padding:56px 16px 22px;border-bottom:1px solid var(--h-line)}
.tk-masthead>div{max-width:608px;margin:0 auto}
.tk-wordmark{margin:0;font-size:36px;line-height:1.05;font-weight:600;letter-spacing:-.02em}
.tk-wordmark i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--tokay-spot);margin-left:.06em}
.tk-lede{margin:8px 0 0;font-size:15px;color:var(--h-muted);line-height:1.35}

/* tabs: Halite small buttons, selected state driven by the existing .on class */
.tk-tabs{display:flex;gap:8px}
.tk-tabs .h-button.small{flex:1;min-height:44px;font-size:14.5px}
.tk-tabs .h-button.small.on{background:var(--h-brand);color:var(--h-brand-ink);border-color:var(--h-brand)}

/* status, notes, errors, empty */
.tk-status{background:var(--h-surface);border:1px solid var(--h-line);padding:12px 14px;font:400 13px/1.4 var(--h-mono);color:var(--h-muted)}
.tk-note{margin:8px 2px 0;font-size:13.5px;line-height:1.4;color:var(--h-muted)}
.tk-error{border:1px solid var(--h-danger);background:var(--h-danger-soft);color:var(--h-text);padding:12px 14px;font-size:14.5px;line-height:1.4}
.tk-error b{display:block;color:var(--h-danger);font:600 12px/1.4 var(--h-font);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.tk-error-text{color:var(--h-danger);font-weight:600}
.tk-empty{background:var(--h-surface);border:1px dashed var(--h-line-strong);padding:28px 16px;text-align:center}
.tk-empty .tk-ring{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;border:2px solid var(--h-line-strong);display:grid;place-items:center}
.tk-empty .tk-ring i{width:14px;height:14px;border-radius:50%;background:var(--h-line-strong)}
.tk-empty b{display:block;font-size:16px;font-weight:600}
.tk-empty p{margin:4px 0 0;font-size:14px;color:var(--h-muted);line-height:1.4}

/* store picker: Halite group of rows, selected row marked by the existing .primary class */
.tk-stores:empty{display:none}
.tk-stores .h-row{min-height:56px}
.tk-stores .h-row+.h-row::before{left:16px}
.tk-stores .h-row.primary{background:var(--h-brand-soft);box-shadow:inset 3px 0 0 var(--h-brand)}
.tk-stores .h-row.primary .t b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--h-brand);margin-left:8px;vertical-align:1px}

/* shoot button: the one big tap target on the capture tab */
.tk-shoot{min-height:76px;font-size:20px;gap:12px;margin-top:6px}
.tk-shoot .h-ic{width:26px;height:26px}
.h-button:disabled,.h-composer button:disabled{opacity:.62;cursor:default}
.h-button:disabled:hover{filter:none}

/* match chip: a spotted item. Orange dot + soft accent ground. */
.tk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tk-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;font-size:14px;font-weight:500;line-height:1.3;color:var(--h-text);background:color-mix(in srgb,var(--tokay-spot) 10%,var(--h-surface));border:1px solid var(--h-line-strong)}
.tk-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tokay-spot);flex:none}
/* found count and tag: the only orange text */
.h-tag.spot{border-color:var(--tokay-spot);color:var(--tokay-spot)}
.tk-count span{color:var(--tokay-spot)}

/* capture row: one photo, three states (busy, done, failed) */
.tk-cap{background:var(--h-surface);border:1px solid var(--h-line);padding:12px 14px}
.tk-cap-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tk-cap-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:15px}
.tk-cap-sub{margin-top:4px;font-size:13.5px;color:var(--h-muted);line-height:1.4}
.tk-cap .h-tag{flex:none}
.tk-cap .h-tag.err{border-color:var(--h-danger);color:var(--h-danger)}
.tk-cap .tk-error{margin-top:8px}
.tk-cap-bar{margin-top:10px;height:3px;background:var(--h-line);overflow:hidden;position:relative}
.tk-cap-bar::after{content:"";position:absolute;inset:0;width:40%;background:var(--h-brand);animation:tk-slide 1.4s var(--h-ease) infinite}
@keyframes tk-slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.tk-cap-bar::after{animation:none!important;width:100%;opacity:.5}}

/* search result: a place worth the trip. Photo, name, how far, what was spotted. */
.tk-count{margin-top:6px}
.tk-result{display:flex;gap:14px;align-items:flex-start;background:var(--h-surface);border:1px solid var(--h-line);padding:12px;margin-top:10px}
.tk-result a{flex:none;display:block}
.tk-result img{font-size:11px;color:var(--h-muted);overflow:hidden;display:block;width:84px;height:84px;object-fit:cover;border:1px solid var(--h-line);background:var(--h-surface-2)}
.tk-result-body{min-width:0;flex:1}
.tk-result-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tk-result-name{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.005em;min-width:0;overflow-wrap:anywhere}
.tk-result .h-tag{flex:none}
.tk-result-sub{margin-top:3px;font:400 12.5px/1.4 var(--h-mono);color:var(--h-muted)}

/* design reference page only */
.tk-doc h2.h-label{margin-top:34px}
.tk-doc .tk-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tk-doc .tk-sw div{background:var(--h-surface);border:1px solid var(--h-line)}
.tk-doc .tk-sw i{display:block;height:44px;border-bottom:1px solid var(--h-line)}
.tk-doc .tk-sw p{margin:0;padding:8px 10px;font:400 12px/1.45 var(--h-mono);color:var(--h-muted)}
.tk-doc .tk-sw b{display:block;color:var(--h-text);font-weight:500}
.tk-doc table{width:100%;border-collapse:collapse;font:400 12.5px/1.4 var(--h-mono);background:var(--h-surface);border:1px solid var(--h-line)}
.tk-doc th,.tk-doc td{padding:7px 10px;text-align:left;border-top:1px solid var(--h-line);vertical-align:top}
.tk-doc th{font-weight:600;color:var(--h-muted);border-top:0}
.tk-doc .scroll{overflow-x:auto}
.tk-doc .stack>*+*{margin-top:10px}
.tk-doc .pair{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tk-doc .ty{background:var(--h-surface);border:1px solid var(--h-line);padding:6px 14px}
.tk-doc .ty div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--h-line)}
.tk-doc .ty div:first-child{border-top:0}
.tk-doc .ty small{font:400 12px var(--h-mono);color:var(--h-muted);flex:none}
.tk-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.tk-bar .h-button{flex:none}

/* review page: variant switcher and phone frames */
.tk-doc.tk-main{max-width:1000px}
.tk-doc .tk-ref{max-width:640px;margin-left:auto;margin-right:auto}
.tk-variants{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.tk-variants .h-button.small{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-height:64px;padding:10px 12px;text-align:left}
.tk-variants .h-button.small small{font:400 12px/1.3 var(--h-font);opacity:.9}
.tk-mocks{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;justify-content:center}
@media (min-width:860px){.tk-mocks{grid-template-columns:repeat(2,minmax(0,390px))}}
.tk-phone figcaption{margin:0 0 8px;font:500 12px/1 var(--h-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--h-muted)}
.tk-phone{margin:0}
.tk-phone iframe{display:block;width:100%;height:760px;border:1px solid var(--h-line-strong);background:var(--h-surface-2);box-shadow:0 14px 30px -18px var(--h-shadow)}

/* app screens */
.tk-pick{margin-top:18px}
.tk-uploads{display:grid;gap:10px;margin-top:14px}
.tk-manual{margin-top:10px}