/* The pattern scanner (templates/scanner.html). Colours, the top bar and buttons come from account.css;
   headings in Source Serif 4, numbers in it too (lining, tabular), the rest Inter. */
.sc{max-width:1240px;margin:0 auto;padding:28px 28px 80px}
.sc-join{margin-left:6px}
.sc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px}
.sc-head h1{margin:0 0 6px;font:600 34px/1.15 "Source Serif 4",Georgia,serif;letter-spacing:-.012em}
.sc-sub{margin:0;color:var(--muted);font-size:14px}
.sc-sub b{color:var(--text);font:600 15px "Source Serif 4",Georgia,serif;font-variant-numeric:lining-nums tabular-nums}
.sc-live{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:15px;background:var(--panel);border:1px solid var(--line);
  color:var(--up);font-size:12.5px;font-weight:600;white-space:nowrap}
.sc-live i{width:8px;height:8px;border-radius:50%;background:var(--up);animation:sc-pulse 1.8s infinite}
.sc-live.off{color:var(--muted)}.sc-live.off i{background:var(--muted);animation:none}
.sc-live[hidden]{display:none}
@keyframes sc-pulse{0%{box-shadow:0 0 0 0 rgba(38,166,154,.6)}70%{box-shadow:0 0 0 7px rgba(38,166,154,0)}100%{box-shadow:0 0 0 0 rgba(38,166,154,0)}}

/* search, timeframe, sort */
.sc-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px}
.sc-search{flex:1;min-width:220px;max-width:380px;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:11px;border:1px solid var(--line2);
  background:var(--panel);color:var(--muted)}
.sc-search:focus-within{border-color:var(--gold)}
.sc-search svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sc-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--text);font:inherit;font-size:14px}
.sc-seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--panel2)}
.sc-seg button{height:32px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--muted);font:600 13.5px Inter,sans-serif;cursor:pointer}
.sc-seg button:hover{color:var(--text)}
.sc-seg button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.sc-sort{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--muted);font-size:13px}
.sc-check{display:inline-flex;align-items:center;gap:7px;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;user-select:none}
.sc-check input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.sc-seg[hidden]{display:none}
.sc-empty .ac-btn{margin-top:12px}
.sc-sort select{height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:600 13px Inter,sans-serif;cursor:pointer}

/* the pattern filters */
.sc-pats{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sc-pf{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:17px;border:1px solid var(--line2);background:none;
  color:var(--text2);font:600 13px Inter,sans-serif;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.sc-pf:hover{background:var(--panel)}
.sc-pf.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.sc-pf small{font:600 12.5px "Source Serif 4",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;opacity:.7}
.sc-pf .lk,.sc-chip .lk{color:var(--gold);font-size:11px}
.sc-pf.on .lk{color:inherit}
.sc-pf[disabled]{opacity:.4;cursor:default}

/* one stock per row: who, price, what was found, open */
.sc-list{display:flex;flex-direction:column}
.sc-row{display:grid;grid-template-columns:minmax(180px,230px) 118px minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px 8px;border-bottom:1px solid var(--line)}
.sc-row:hover{background:color-mix(in srgb,var(--panel) 60%,transparent)}
.sc-stock{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none}
.sc-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ic);color:#fff;font:700 12px/1 Inter,sans-serif;letter-spacing:-.02em}
.sc-stock span{min-width:0}
.sc-stock b{display:block;font-size:15.5px;font-weight:700;letter-spacing:.005em}
.sc-stock small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-stock:hover b{color:var(--gold)}
.sc-px{text-align:right;font-family:"Source Serif 4",Georgia,serif;font-variant-numeric:lining-nums tabular-nums}
.sc-px b{display:block;font-size:16px;font-weight:600}
.sc-px span{font-size:13.5px;font-weight:600}
.sc-px .up,.sc-px b .up{color:var(--up)}.sc-px .down,.sc-px b .down{color:var(--down)}
.sc-px .wait{color:var(--dim)}
.sc-found{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.sc-chip{display:inline-flex;align-items:stretch;border-radius:10px;border:1px solid var(--line2);background:var(--panel);overflow:hidden}
.sc-chip.hit{border-color:var(--gold)}
.sc-chip a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;color:var(--text);text-decoration:none;font-size:13px;white-space:nowrap}
.sc-chip a:hover{background:var(--panel2)}
.sc-chip .nm{font-weight:600}
.sc-chip .tf{border-left:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600}
.sc-chip .tf b{color:var(--text);font:600 13px "Source Serif 4",Georgia,serif;font-variant-numeric:lining-nums tabular-nums}
.sc-chip .tf:hover b{color:var(--gold)}
.sc-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.sc-tally{color:var(--muted);font-size:12.5px;white-space:nowrap}
.sc-tally b{color:var(--text);font:600 15px "Source Serif 4",Georgia,serif;font-variant-numeric:lining-nums tabular-nums}
.sc-al{display:inline-block;padding:2px 8px;border-radius:10px;background:rgba(245,185,66,.14);color:var(--gold);font-size:11.5px;font-weight:700;white-space:nowrap}
.sc-open{white-space:nowrap}
.sc-open svg{width:15px;height:15px;margin-left:5px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-empty{padding:56px 10px;text-align:center;color:var(--muted);line-height:1.6}
.sc-skel{height:74px;margin:10px 0;border-radius:12px;background:var(--panel);animation:sc-breathe 2.4s ease-in-out infinite}
@keyframes sc-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.sc-more{display:flex;margin:22px auto 0}
.sc-more[hidden]{display:none}
.sc-note{max-width:820px;margin:30px auto 0;color:var(--muted);font-size:12.5px;line-height:1.65;text-align:center}
@media (prefers-reduced-motion:reduce){.sc-live i,.sc-skel{animation:none}}

@media (max-width:900px){
  .sc-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who px" "found found" "side side";row-gap:12px}
  .sc-stock{grid-area:who}.sc-px{grid-area:px}.sc-found{grid-area:found}
  .sc-side{grid-area:side;flex-direction:row;align-items:center;justify-content:space-between}
  .sc-sort{margin-left:0}
}
@media (max-width:640px){
  .sc{padding:18px 16px 60px}
  .sc-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sc-head h1{font-size:28px}
  .sc-search{max-width:none;flex-basis:100%}
  .sc-pats{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 6px;padding:4px 16px 16px;scrollbar-width:none}
  .sc-pats::-webkit-scrollbar{display:none}
  .sc-pf{flex:none}
  .sc-row{padding:14px 2px}
  .sc-chip{flex-wrap:wrap;max-width:100%}
  .sc-chip a{padding:6px 8px;font-size:12.5px}
  .sc-chip .nm{flex:1 1 auto}
  .ac-toplink span{display:none}
}