/* PALEADS — built on the Airtable design system.
   White canvas, deep navy text, Airtable Blue for anything interactive.
   Swiss-precision type with positive letter-spacing, 12px buttons, 16px cards. */

:root {
  /* --- Airtable light (the default canvas) --- */
  --surface:        #ffffff;
  --surface-2:      #f8fafc;
  --canvas:         #f8fafc;
  --text:           #181d26;   /* deep navy */
  --text-mid:       #333333;
  --text-weak:      rgba(4, 14, 32, .69);
  --border:         #e0e2e6;
  --border-strong:  #c9cdd4;

  --blue:           #1b61c9;   /* Airtable Blue — CTAs */
  --blue-hover:     #254fad;
  --blue-text:      #1b61c9;   /* links; overridden in dark for contrast */
  --blue-soft:      rgba(27, 97, 201, .08);
  --on-blue:        #ffffff;

  --success:        #006400;
  --success-soft:   rgba(0, 100, 0, .09);
  --warn:           #8a5200;
  --warn-soft:      rgba(138, 82, 0, .10);
  --danger:         #b3261e;
  --danger-soft:    rgba(179, 38, 30, .09);

  /* Blue-tinted depth, straight from the system */
  --shadow-btn: rgba(0,0,0,.32) 0 0 1px, rgba(0,0,0,.08) 0 0 2px,
                rgba(45,127,249,.28) 0 1px 3px, rgba(0,0,0,.06) 0 0 0 .5px inset;
  --shadow-soft: rgba(15,48,106,.05) 0 0 20px;
  --shadow-card: rgba(15,48,106,.06) 0 1px 3px, rgba(15,48,106,.04) 0 8px 24px;

  --font: 'Haas', 'Inter', -apple-system, BlinkMacSystemFont, system-ui,
          'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* 8px base scale */
  --r-sm: 2px;
  --r-btn: 12px;
  --r-card: 16px;
  --r-lg: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface:       #181d26;
    --surface-2:     #1e2330;
    --canvas:        #12161e;
    --text:          #f0f2f5;
    --text-mid:      #b0b4be;
    --text-weak:     rgba(240, 242, 245, .6);
    --border:        #2a2e38;
    --border-strong: #3a4150;

    --blue:          #1b61c9;
    --blue-hover:    #2f78e0;
    /* #1b61c9 on the dark canvas is only 2.7:1 — unreadable as text. Buttons
       keep the brand blue (white on it is fine); links get a lighter tint. */
    --blue-text:     #6ba5f7;
    --blue-soft:     rgba(107, 165, 247, .12);

    --success:       #6fcf7f;
    --success-soft:  rgba(111, 207, 127, .13);
    --warn:          #e0a75a;
    --warn-soft:     rgba(224, 167, 90, .13);
    --danger:        #f2857c;
    --danger-soft:   rgba(242, 133, 124, .13);

    --shadow-btn: rgba(0,0,0,.5) 0 0 1px, rgba(0,0,0,.3) 0 0 2px,
                  rgba(45,127,249,.35) 0 1px 3px;
    --shadow-soft: rgba(0,0,0,.35) 0 0 20px;
    --shadow-card: rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.25) 0 8px 24px;
  }
}

/* The toggle wins over the OS in both directions. */
:root[data-theme="dark"] {
  --surface:#181d26; --surface-2:#1e2330; --canvas:#12161e;
  --text:#f0f2f5; --text-mid:#b0b4be; --text-weak:rgba(240,242,245,.6);
  --border:#2a2e38; --border-strong:#3a4150;
  --blue:#1b61c9; --blue-hover:#2f78e0; --blue-text:#6ba5f7;
  --blue-soft:rgba(107,165,247,.12);
  --success:#6fcf7f; --success-soft:rgba(111,207,127,.13);
  --warn:#e0a75a;    --warn-soft:rgba(224,167,90,.13);
  --danger:#f2857c;  --danger-soft:rgba(242,133,124,.13);
  --shadow-btn:rgba(0,0,0,.5) 0 0 1px, rgba(0,0,0,.3) 0 0 2px, rgba(45,127,249,.35) 0 1px 3px;
  --shadow-soft:rgba(0,0,0,.35) 0 0 20px;
  --shadow-card:rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.25) 0 8px 24px;
}
:root[data-theme="light"] {
  --surface:#ffffff; --surface-2:#f8fafc; --canvas:#f8fafc;
  --text:#181d26; --text-mid:#333333; --text-weak:rgba(4,14,32,.69);
  --border:#e0e2e6; --border-strong:#c9cdd4;
  --blue:#1b61c9; --blue-hover:#254fad; --blue-text:#1b61c9;
  --blue-soft:rgba(27,97,201,.08);
  --success:#006400; --success-soft:rgba(0,100,0,.09);
  --warn:#8a5200;    --warn-soft:rgba(138,82,0,.10);
  --danger:#b3261e;  --danger-soft:rgba(179,38,30,.09);
  --shadow-btn:rgba(0,0,0,.32) 0 0 1px, rgba(0,0,0,.08) 0 0 2px, rgba(45,127,249,.28) 0 1px 3px, rgba(0,0,0,.06) 0 0 0 .5px inset;
  --shadow-soft:rgba(15,48,106,.05) 0 0 20px;
  --shadow-card:rgba(15,48,106,.06) 0 1px 3px, rgba(15,48,106,.04) 0 8px 24px;
}

*{box-sizing:border-box}

/* The [hidden] attribute must actually hide. The browser's default is
   [hidden]{display:none}, but any of our own display rules (.field is flex,
   .socials is inline-flex, table cells are block on mobile) outranks it and the
   element keeps painting — which is how the name field stayed visible on the
   sign-in screen while its .hidden property read true. */
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--font);font-size:16px;font-weight:400;
  line-height:1.35;letter-spacing:.18px;
  -webkit-font-smoothing:antialiased;
  transition:background-color .18s ease,color .18s ease;
}

h1,h2,h3{margin:0;font-weight:500;color:var(--text);text-wrap:balance}
h1{font-size:32px;line-height:1.15;letter-spacing:normal}
h2{font-size:24px;line-height:1.25;letter-spacing:.12px}
h3{font-size:20px;line-height:1.25;letter-spacing:.1px;margin:32px 0 12px}
p{margin:0}
a{color:var(--blue-text);text-underline-offset:2px}
a:hover{color:var(--blue-hover)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}

.dim{color:var(--text-weak);font-size:14px;letter-spacing:.07px}
.r{text-align:right}
.num{font-variant-numeric:tabular-nums}

/* boot ------------------------------------------------------------------- */
.boot{display:grid;place-items:center;min-height:100vh}
.spinner{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--blue);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* logo ------------------------------------------------------------------- */
.logo{
  display:flex;align-items:center;gap:10px;
  font-weight:500;letter-spacing:1.6px;font-size:16px;
  white-space:nowrap;color:var(--text);
}
.logo-lg{font-size:19px;letter-spacing:2px;justify-content:center}
.logo-mark{
  flex:none;display:block;width:24px;height:24px;
  background:center/contain no-repeat url("/static/paleads-white.png");
}
.logo-mark-lg{width:34px;height:34px}
:root[data-theme="light"] .logo-mark{background-image:url("/static/paleads-black.png")}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .logo-mark{background-image:url("/static/paleads-black.png")}
}

/* theme toggle ------------------------------------------------------------ */
.themetoggle{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:3px;
}
.themetoggle button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:32px;padding:0 12px;border:0;border-radius:999px;
  background:transparent;color:var(--text-weak);cursor:pointer;
  font:500 13px/1 var(--font);letter-spacing:.08px;
  transition:background-color .16s ease,color .16s ease;
}
.themetoggle button:hover{color:var(--text)}
.themetoggle button[aria-pressed="true"]{
  background:var(--surface);color:var(--text);
  box-shadow:var(--shadow-soft);
}
:root[data-theme="dark"] .themetoggle button[aria-pressed="true"],
.themetoggle button[aria-pressed="true"]{border:0}
.themetoggle svg{flex:none}
@media (max-width:640px){ .themetoggle button span{display:none} .themetoggle button{padding:0 12px} }

/* A 32px pill is fine for a mouse and too small for a thumb. On any coarse
   pointer the toggle grows to the 44px touch minimum. */
@media (pointer:coarse){
  .themetoggle button{ min-height:44px; min-width:44px; }
  .soc{ width:38px; height:38px; }
}

/* auth ------------------------------------------------------------------- */
.auth-wrap{display:grid;place-items:center;min-height:100vh;padding:24px;position:relative}
.auth-topright{position:absolute;top:20px;right:20px}
.auth-card{
  width:100%;max-width:412px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 32px;
  box-shadow:var(--shadow-card);
}
.auth-card h1{margin:24px 0 8px;font-size:28px}
.auth-card .sub{color:var(--text-weak);font-size:16px;letter-spacing:.16px;margin-bottom:26px}
.auth-card form{display:grid;gap:16px}
.swap{margin-top:20px;font-size:14px;color:var(--text-weak);text-align:center;letter-spacing:.07px}

/* fields ----------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.grow{flex:1 1 210px}
.field label{
  font-size:14px;font-weight:500;letter-spacing:.08px;color:var(--text);
}
input,select{
  min-height:46px;padding:0 14px;width:100%;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-btn);
  font:400 16px/1 var(--font);letter-spacing:.16px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
select{cursor:pointer}
input::placeholder{color:var(--text-weak)}
input:hover,select:hover{border-color:var(--border-strong)}
input:focus,select:focus{
  border-color:var(--blue);outline:none;
  box-shadow:0 0 0 3px var(--blue-soft);
}
.hint{font-size:14px;color:var(--text-weak);letter-spacing:.07px}

/* password reveal --------------------------------------------------------- */
.passwrap{position:relative}
.passwrap input{padding-right:46px}
.passtoggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:0;border-radius:8px;
  background:transparent;color:var(--text-weak);cursor:pointer;
  transition:color .16s ease,background .16s ease;
}
.passtoggle:hover{color:var(--text);background:var(--surface-2,rgba(128,128,128,.12))}
.passtoggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--blue-soft);color:var(--text)}
.formerror{
  background:var(--danger-soft);color:var(--danger);
  border:1px solid var(--danger);border-radius:var(--r-btn);
  padding:11px 14px;font-size:14px;letter-spacing:.07px;margin:14px 0 0;
}
.formok{
  background:var(--success-soft);color:var(--success);
  border:1px solid var(--success);border-radius:var(--r-btn);
  padding:11px 14px;font-size:14px;letter-spacing:.07px;margin:14px 0 0;
}

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 24px;white-space:nowrap;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-btn);
  font:500 16px/1.25 var(--font);letter-spacing:.08px;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.btn:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-primary{
  background:var(--blue);border-color:var(--blue);color:var(--on-blue);
  box-shadow:var(--shadow-btn);
}
.btn-primary:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:var(--on-blue)}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--blue);border-color:var(--blue)}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--blue-text);font:500 14px/1.35 var(--font);letter-spacing:.07px;
  text-decoration:underline;text-underline-offset:2px;
}
.linkbtn:hover{color:var(--blue-hover)}
.linkbtn.danger{color:var(--danger)}
.linkbtn.quiet{color:var(--text-weak);text-decoration:none}
.linkbtn.quiet:hover{color:var(--blue-text);text-decoration:underline}

/* chrome ----------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:26px;
  min-height:64px;padding:0 24px;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.tabs{display:flex;gap:4px}
.tab{
  background:none;border:0;cursor:pointer;
  padding:9px 14px;border-radius:var(--r-btn);
  color:var(--text-weak);font:500 16px/1.3 var(--font);letter-spacing:.08px;
  transition:background-color .16s ease,color .16s ease;
}
.tab:hover{color:var(--text);background:var(--surface-2)}
.tab.is-active{color:var(--blue-text);background:var(--blue-soft)}
.who{
  margin-left:auto;display:flex;align-items:center;gap:16px;
  font-size:14px;color:var(--text-weak);letter-spacing:.07px;
}
main{padding:32px 24px 80px;max-width:1400px;margin:0 auto}
section>h2{margin-bottom:20px}

/* search bar -------------------------------------------------------------- */
.searchbar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-soft);
}
.searchbar .btn{min-width:140px}

/* progress ---------------------------------------------------------------- */
.progress{margin-top:24px}
.bar{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.fill{height:100%;width:0;background:var(--blue);border-radius:999px;transition:width .4s ease}
.progress p{margin-top:10px;font-size:14px;color:var(--text-weak);letter-spacing:.07px}

/* placeholder ------------------------------------------------------------- */
.placeholder{
  display:grid;justify-items:center;gap:10px;text-align:center;
  padding:72px 20px;color:var(--text-weak);
}
.placeholder svg{color:var(--border-strong)}
.placeholder strong{color:var(--text);font-weight:500;font-size:18px;letter-spacing:.18px}
.placeholder p{max-width:46ch;font-size:16px;letter-spacing:.16px}
.placeholder.small{padding:40px 20px}

/* results ----------------------------------------------------------------- */
.resulthead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:32px 0 16px}
.resulthead h2{margin-bottom:4px}
.resulthead .btn{margin-left:auto}

.notes{display:grid;gap:10px;margin-bottom:18px}
.notes p{
  background:var(--blue-soft);border:1px solid var(--border);
  border-left:3px solid var(--blue);
  padding:11px 14px;border-radius:var(--r-btn);
  font-size:14px;color:var(--text-mid);letter-spacing:.07px;
}

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.filters input,.filters select{min-height:42px;width:auto;min-width:160px;font-size:15px}
.filters input[data-f="q"]{min-width:240px;flex:1 1 240px;max-width:360px}
.count{
  margin-left:auto;font:500 14px/1 var(--font);font-variant-numeric:tabular-nums;
  color:var(--text-weak);white-space:nowrap;letter-spacing:.07px;
}

/* tables ------------------------------------------------------------------ */
.tablewrap{
  overflow-x:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
}
table{border-collapse:collapse;width:100%;font-size:15px}
thead th{
  position:sticky;top:0;background:var(--surface-2);
  text-align:left;font:500 13px/1.3 var(--font);letter-spacing:.28px;
  color:var(--text-weak);text-transform:uppercase;
  padding:13px 16px;white-space:nowrap;border-bottom:1px solid var(--border);
}
thead th.r{text-align:right}
tbody td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:top;letter-spacing:.08px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.co{font-weight:500;color:var(--text);text-decoration:none}
.co:hover{color:var(--blue-text);text-decoration:underline}
.co svg{opacity:.4;margin-left:5px;vertical-align:-1px}
.co:hover svg{opacity:1}
.sub2{font:400 13px/1.4 var(--mono);color:var(--text-weak);margin-top:3px;letter-spacing:0}
.mail{color:var(--blue-text);text-decoration:none;font-size:14px;word-break:break-all;letter-spacing:.07px}
.mail:hover{text-decoration:underline}

/* urgency meter ----------------------------------------------------------- */
.urg{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.urg-bar{width:40px;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;flex:none;border:1px solid var(--border)}
.urg-bar i{display:block;height:100%;border-radius:999px}
.u-hi i{background:var(--success)}.u-mid i{background:var(--warn)}.u-lo i{background:var(--border-strong)}

/* pills ------------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:999px;font:500 13px/1.5 var(--font);
  white-space:nowrap;letter-spacing:.07px;
}
.p-ok{background:var(--success-soft);color:var(--success)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-no{background:var(--danger-soft);color:var(--danger)}
.p-dim{background:var(--surface-2);color:var(--text-weak)}

/* verdict — the first thing read before anyone sends from this table */
.verdict{
  display:inline-block;padding:3px 9px;border-radius:6px;
  font:600 11px/1.55 var(--font);letter-spacing:.4px;white-space:nowrap;
  cursor:help;
}
.v-send{background:var(--success-soft);color:var(--success)}
.v-risk{background:var(--warn-soft);color:var(--warn)}
.v-no{background:var(--danger-soft);color:var(--danger)}

.badge{
  display:inline-block;min-width:18px;margin-left:8px;padding:1px 6px;
  background:var(--danger);color:#fff;border-radius:999px;
  font:500 12px/1.5 var(--font);text-align:center;letter-spacing:0;
}

/* credential -------------------------------------------------------------- */
.cred{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue-soft);border:1px dashed var(--blue);
  border-radius:var(--r-btn);padding:6px 11px;
  font:500 15px/1 var(--mono);color:var(--blue-text);
  letter-spacing:.5px;user-select:all;
}
.cred button{background:none;border:0;padding:0;cursor:pointer;color:inherit;opacity:.6;display:inline-flex}
.cred button:hover{opacity:1}

/* stats ------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:32px}
.stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:18px 20px;box-shadow:var(--shadow-soft);
}
.stat b{
  display:block;font:500 28px/1.2 var(--font);font-variant-numeric:tabular-nums;
  color:var(--text);letter-spacing:normal;
}
.stat span{font-size:14px;color:var(--text-weak);letter-spacing:.07px}

@media (max-width:860px){
  .topbar{gap:14px;padding:12px 16px;flex-wrap:wrap;min-height:0}
  .who{width:100%;margin-left:0;order:3}
  main{padding:24px 16px 64px}
  .resulthead .btn{margin-left:0;width:100%}
  .count{margin-left:0;width:100%}
  h1{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   MOTION
   Custom curves — the built-in CSS easings are too weak to read as intentional.
   Enter/exit uses ease-out so movement starts immediately, which is the moment
   the eye is actually watching. Nothing here runs longer than 300ms except the
   deliberately slow scrape sheen.
   ========================================================================== */
:root{
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
}

/* Press feedback. Any pressable thing should answer the finger instantly. */
.btn, .tab, .themetoggle button, .soc{
  transition: transform 160ms var(--ease-out), background-color 160ms ease,
              border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.btn:active, .tab:active, .themetoggle button:active{ transform: scale(.97); }
.soc:active{ transform: scale(.9); }

/* Hover only where there is a real pointer — on touch it fires on tap and sticks. */
@media (hover:hover) and (pointer:fine){
  .stat{ transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
  .stat:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card); }
}

/* Rows enter staggered, from .995 and 6px — never from scale(0), because
   nothing in the real world appears out of nothing. */
@keyframes rowIn{ to{ opacity:1; transform:none; } }
.rowin{
  opacity:0; transform: translateY(6px) scale(.995);
  animation: rowIn 260ms var(--ease-out) forwards;
}

@keyframes blockIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
[data-el="results"]:not([hidden]), .placeholder{ animation: blockIn 280ms var(--ease-out) both; }

/* --- the long scrape ------------------------------------------------------
   A scrape can run for an hour, so the bar has to prove the system is alive
   even when the percentage has not moved in a minute. The width is the truth;
   the travelling sheen is the heartbeat. */
.bar{ position: relative; }
.fill{ position: relative; overflow: hidden; transition: width 600ms var(--ease-out); }
.fill::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: sheen 1.6s linear infinite;
}
@keyframes sheen{ to{ transform: translateX(100%); } }
.progress[data-done="1"] .fill::after{ animation: none; opacity: 0; }

/* Stage text crossfades rather than snapping between messages. */
.progress p{ transition: opacity 180ms ease; }
.progress p.swapping{ opacity: .35; }
.elapsed{ font-variant-numeric: tabular-nums; color: var(--text-weak); }

/* Skeleton placeholder while the first rows settle. */
.skel{ height:14px; border-radius:6px; background:var(--surface-2); position:relative; overflow:hidden; }
.skel::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  transform: translateX(-100%); animation: sheen 1.4s linear infinite;
}

/* Social icons */
.socials{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  color:var(--text-weak); background:var(--surface-2);
  border:1px solid var(--border); text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  .soc:hover{ color:var(--on-blue); background:var(--blue); border-color:var(--blue); }
}

/* Reduced motion means gentler, not none: opacity stays because it aids
   comprehension, movement and the infinite sheen go. */
@media (prefers-reduced-motion:reduce){
  .rowin{ opacity:1; transform:none; animation:none; }
  .fill::after, .skel::after{ animation:none; }
  [data-el="results"]:not([hidden]), .placeholder{ animation:none; }
  .btn:active, .tab:active, .themetoggle button:active, .soc:active{ transform:none; }
}

/* ==========================================================================
   RESPONSIVE — 320px to 4K
   ========================================================================== */

/* Fluid type: 15px on a small phone, 17px on a large desktop. */
body{ font-size: clamp(15px, 0.92rem + 0.12vw, 17px); }
h1{ font-size: clamp(24px, 4.4vw, 34px); }
h2{ font-size: clamp(20px, 2.6vw, 26px); }

/* ---- 4K and ultrawide ---- */
@media (min-width:2000px){
  main{ max-width:1720px; padding:44px 48px 100px; }
  .topbar{ padding-inline:48px; min-height:72px; }
  .stats{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
  table{ font-size:16px; }
  tbody td{ padding:16px 20px; }
}
@media (min-width:3000px){
  main{ max-width:2200px; }
  body{ font-size:18px; }
  .tablewrap{ border-radius:20px; }
}

@media (max-width:1024px){
  .filters input[data-f="q"]{ max-width:none; }
}

/* ---- phones: the table becomes cards --------------------------------------
   Eight columns cannot survive a 320px screen. Below 720px each row becomes a
   stacked card and every cell labels itself from its data-label. */
@media (max-width:720px){
  .tablewrap{ border:0; background:transparent; box-shadow:none; overflow:visible; }
  table, thead, tbody, tr, td{ display:block; width:100%; }
  thead{ position:absolute; width:1px; height:1px; overflow:hidden;
         clip:rect(0 0 0 0); white-space:nowrap; }

  tbody tr{
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-card); padding:14px 16px; margin-bottom:12px;
    box-shadow:var(--shadow-soft);
  }
  tbody tr:hover{ background:var(--surface); }

  tbody td{
    display:grid; grid-template-columns:minmax(88px,34%) 1fr; gap:12px;
    align-items:start; padding:7px 0; border-bottom:1px solid var(--border);
    text-align:left;
  }
  tbody td:last-child{ border-bottom:0; }
  tbody td.r{ text-align:left; }
  tbody td::before{
    content:attr(data-label);
    font-size:12px; font-weight:500; letter-spacing:.28px;
    text-transform:uppercase; color:var(--text-weak);
  }
  /* The company name is the card heading, so it drops its label and spans. */
  tbody td[data-label="Company"]{ display:block; padding-top:0; padding-bottom:11px; }
  tbody td[data-label="Company"]::before{ display:none; }
  tbody td[data-label="Company"] .co{ font-size:17px; }
  .urg{ justify-content:flex-start; }

  .searchbar{ padding:16px; }
  .searchbar .btn{ width:100%; min-width:0; }
  .filters{ gap:8px; }
  .filters input, .filters select{ min-width:0; flex:1 1 46%; font-size:16px; }
  .filters input[data-f="q"]{ flex:1 1 100%; }
  .resulthead{ margin-top:24px; }
  .stats{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
  .stat{ padding:14px 16px; }
  .stat b{ font-size:23px; }
}

/* ---- small phones (iPhone SE, 320px Androids) ---- */
@media (max-width:400px){
  main{ padding:18px 12px 56px; }
  .topbar{ padding:10px 12px; gap:10px; }
  .logo span:last-child{ font-size:14px; letter-spacing:1.2px; }
  .tabs{ width:100%; order:2; }
  .tab{ flex:1; padding:9px 6px; font-size:14px; text-align:center; }
  .auth-card{ padding:26px 20px; border-radius:var(--r-card); }
  .auth-topright{ top:12px; right:12px; }
  .filters input, .filters select{ flex:1 1 100%; }
  .stats{ grid-template-columns:1fr 1fr; }
  tbody td{ grid-template-columns:1fr; gap:3px; }
  .placeholder{ padding:48px 12px; }
}

/* The page body must never scroll sideways, whatever the content. */
html, body{ max-width:100%; overflow-x:hidden; }

/* --- location autocomplete ------------------------------------------------
   The scrape runs against the entry the user picks here, never against raw
   text. Guessing from free text is how a search for "banglore" resolved to a
   hamlet in Karachi. */
.combo{ position:relative; }
.suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  margin:0; padding:4px; list-style:none;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-btn); box-shadow:var(--shadow-card);
  max-height:290px; overflow-y:auto;
  animation:blockIn 140ms var(--ease-out) both;
}
.suggest li{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:10px 12px; border-radius:8px; cursor:pointer;
  font-size:15px; letter-spacing:.08px; min-height:44px;
}
.suggest li[aria-selected="true"], .suggest li:hover{ background:var(--blue-soft); }
.suggest b{ font-weight:500; color:var(--text); }
.suggest span{ font-size:13px; color:var(--text-weak); }
.suggest .empty{ cursor:default; color:var(--text-weak); font-size:14px; }
.suggest .empty:hover{ background:transparent; }
.combo .hint{ margin-top:2px; }
.combo .hint.warn{ color:var(--warn); }