/* HelmX Field Desk — phone first.
   No build step on purpose: the server has no Node, and one static file is one
   less thing to go wrong the morning a show opens. */

:root{
  --paper:#F6F3F2; --surface:#FFFFFF; --surface-2:#EFEAE8;
  --ink:#1A1614; --ink-2:#5A504B; --muted:#867A74;
  --line:#E2D9D5; --line-2:#CFC3BE;
  --accent:#C10512; --accent-ink:#8E0410; --accent-wash:#FBEDED;
  --hot:#C10512; --warm:#9A5B08; --cold:#3C6E8F;
  --good:#1E6B45; --good-wash:#E8F3ED;
  --shadow:0 1px 2px rgba(26,22,20,.06), 0 4px 14px rgba(26,22,20,.05);
  --tap:48px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --paper:#131010; --surface:#1C1817; --surface-2:#262120;
    --ink:#F2EEEC; --ink-2:#C8BDB8; --muted:#94867F;
    --line:#2F2827; --line-2:#443937;
    --accent:#FF4D4D; --accent-ink:#FF8080; --accent-wash:#2B1717;
    --hot:#FF5C5C; --warm:#E0A354; --cold:#6FA8CA;
    --good:#5FBF8E; --good-wash:#17271F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme=dark]{
    --paper:#131010; --surface:#1C1817; --surface-2:#262120;
    --ink:#F2EEEC; --ink-2:#C8BDB8; --muted:#94867F;
    --line:#2F2827; --line-2:#443937;
    --accent:#FF4D4D; --accent-ink:#FF8080; --accent-wash:#2B1717;
    --hot:#FF5C5C; --warm:#E0A354; --cold:#6FA8CA;
    --good:#5FBF8E; --good-wash:#17271F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  background:var(--paper); /* nothing behind the page is ever visible */
  height:100%;
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  /* Flex column + sticky footer: the tab bar is IN the flow, pinned to the
     viewport bottom while scrolling. position:fixed is unreliable in iOS
     browsers (bars detach mid-page); sticky cannot detach. */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main.wrap{flex:1 0 auto; width:100%}
a{color:var(--accent-ink); text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* -- chrome ---------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line); padding:10px 16px;
  display:flex; align-items:center; gap:12px;
  padding-top:calc(10px + env(safe-area-inset-top));
}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.brand .mark{color:var(--accent); font-weight:800}
.brand-logo{height:24px; width:auto; display:block}
.brand small{font-weight:500; color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.topbar .spacer{margin-left:auto}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--accent-wash); color:var(--accent-ink);
  display:grid; place-items:center; font-size:12px; font-weight:700; border:1px solid var(--line);
}

/* The header is a single no-wrap row. On a narrow phone the brand wordmark
   used to claim its full intrinsic width and push the last item - the profile
   avatar - off the right edge. Pin every control so none of them can drop,
   and let the wordmark be the one thing that gives way: object-fit keeps it
   proportional while max-width shrinks it. */
.topbar .brand{min-width:0; flex-shrink:1; overflow:hidden}
.topbar .brand-logo{max-width:100%; object-fit:contain; object-position:left center}
.topbar .hdr-credits,
.topbar .btn-sm,
.topbar .menu-wrap,
.topbar .avatar{flex-shrink:0}
@media (max-width:430px){
  .topbar{gap:8px; padding-left:12px; padding-right:12px}
  .topbar .btn-sm{padding:6px 9px}
  .hdr-credits{margin-right:0}
}

.tabbar{
  position:sticky; bottom:0; z-index:30; display:grid; margin-top:auto;
  grid-template-columns:repeat(4,1fr); background:var(--surface);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  min-height:var(--tap); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-size:11px; font-weight:600; color:var(--muted); padding:8px 4px; letter-spacing:.02em;
}
.tabbar a.on{color:var(--accent)}
.tabbar svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8}

.wrap{max-width:760px; margin:0 auto; padding:16px}
h1{font-size:22px; letter-spacing:-.02em; margin:0 0 4px}
h2{font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:24px 0 10px}
.sub{color:var(--ink-2); margin:0 0 18px; font-size:14px}

/* -- flash ----------------------------------------------------------------- */
.flash{
  background:var(--good-wash); color:var(--good); border:1px solid var(--good);
  border-radius:10px; padding:10px 14px; margin:0 0 14px; font-size:14px; font-weight:600;
}
.errors{
  background:var(--accent-wash); color:var(--accent-ink); border:1px solid var(--accent);
  border-radius:10px; padding:10px 14px; margin:0 0 14px; font-size:14px;
}
.errors ul{margin:0; padding-left:18px}

/* -- cards & stats --------------------------------------------------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}
.pad{padding:14px 16px}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:0 0 18px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
a.stat{display:block; color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent}
a.stat:active{background:var(--surface-2)}
.stat .n{font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.stat .k{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-top:6px; font-weight:600}
.stat.alert .n{color:var(--accent)}

.eventbar{
  background:var(--ink); color:var(--paper); border-radius:12px; padding:12px 16px; margin:0 0 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.eventbar .name{font-weight:700; letter-spacing:-.01em}
.eventbar .meta{font-size:12px; opacity:.75; margin-left:auto; text-align:right}

/* -- buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:12px 18px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font-size:15px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.btn:hover{border-color:var(--muted)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn-block{width:100%}
.btn-lg{min-height:60px; font-size:17px; border-radius:14px}
.btn-sm{min-height:36px; padding:6px 12px; font-size:13px; border-radius:8px}

/* -- forms ----------------------------------------------------------------- */
label{display:block; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=hidden]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=image]),select,textarea{
  width:100%; min-height:var(--tap); padding:11px 13px; border:1px solid var(--line-2);
  border-radius:10px; background:var(--surface); color:var(--ink); font-size:16px; font-family:inherit;
}
textarea{min-height:88px; resize:vertical; line-height:1.5}
/* iOS date pickers keep an intrinsic width and ignore width:100% until
   the native appearance is stripped - without this they overflow cards. */
input[type=date],input[type=datetime-local],input[type=time]{
  -webkit-appearance:none; appearance:none;
  display:block; max-width:100%; min-width:0; text-align:left;
}
.field{margin:0 0 14px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row > .field{min-width:0}
input[type=date]{width:100%; min-width:0; display:block; -webkit-appearance:none; appearance:none; box-sizing:border-box}
input[type=date]::-webkit-date-and-time-value{text-align:left}
@media (max-width:520px){ .row{grid-template-columns:1fr} }

/* Segmented choices — bigger than radios and readable at arm's length. */
.seg{display:flex; gap:8px; flex-wrap:wrap}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg label{
  margin:0; min-height:var(--tap); display:flex; align-items:center; padding:0 16px;
  border:1px solid var(--line-2); border-radius:10px; background:var(--surface);
  font-size:14px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink-2); cursor:pointer;
}
.seg input:checked + label{background:var(--accent); border-color:var(--accent); color:#fff}
.seg input:focus-visible + label{outline:2px solid var(--accent); outline-offset:2px}
.seg.temp input[value=hot]:checked + label{background:var(--hot); border-color:var(--hot)}
.seg.temp input[value=warm]:checked + label{background:var(--warm); border-color:var(--warm)}
.seg.temp input[value=cold]:checked + label{background:var(--cold); border-color:var(--cold)}

.btn-wa{background:#128C4B; border-color:#128C4B; color:#fff}
.btn-wa:hover{background:#0F7A41; border-color:#0F7A41}
.btn-wa[aria-disabled=true]{
  background:var(--surface-2); border-color:var(--line-2); color:var(--muted); cursor:default;
}
.btn-wa .wa-hint{font-weight:500; font-size:13px; opacity:.85}
.hello-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px}
.hello-btn{display:block; text-align:center; font-size:14px; padding:12px 6px}
.hello-tg{background:#2AABEE; border-color:#2AABEE; color:#fff}
.hello-tg:hover{background:#1E96D6; border-color:#1E96D6}
.hello-btn[aria-disabled=true]{
  background:var(--surface-2); border-color:var(--line-2); color:var(--muted); cursor:default;
}

/* Camera tiles */
.shots{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 16px}
.shot{
  position:relative; border:1.5px dashed var(--line-2); border-radius:14px; background:var(--surface);
  min-height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; overflow:hidden; text-align:center; padding:12px;
}
.shot:hover{border-color:var(--accent)}
.shot input{position:absolute; inset:0; opacity:0; cursor:pointer}
.shot svg{width:30px; height:30px; stroke:var(--muted); fill:none; stroke-width:1.6}
.shot .t{font-size:13px; font-weight:600; color:var(--ink-2)}
.shot .h{font-size:11px; color:var(--muted)}
.shot.filled{border-style:solid; border-color:var(--good)}
.shot.filled svg{stroke:var(--good)}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.shot .badge{
  position:absolute; top:8px; right:8px; background:var(--good); color:#fff;
  font-size:10px; font-weight:700; padding:3px 7px; border-radius:20px; letter-spacing:.05em; z-index:2;
}

/* Topbar menus */
.menu-wrap{position:relative}
.menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:230px; max-width:300px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.28); padding:8px;
}
.menu-item{
  display:block; padding:9px 10px; border-radius:8px; font-size:14.5px; color:var(--ink);
}
.menu-item:hover{background:var(--surface-2)}

/* First-run tour */
.onb{
  position:fixed; inset:0; z-index:140; background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.onb-card{
  background:var(--surface); border-radius:20px; width:100%; max-width:480px;
  padding:26px 20px 18px;
  max-height:88dvh; overflow-y:auto;
}
.onb-icon{font-size:40px; margin-bottom:10px}
.onb-card h2{margin:0 0 10px}
.onb-card p{color:var(--ink-2); font-size:15px; line-height:1.55; margin:0 0 10px}
.onb-sub{color:var(--muted); font-size:13.5px}
.onb-dots{display:flex; gap:6px; justify-content:center; margin:16px 0 14px}
.onb-dots .dot{width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:background .2s, transform .2s}
.onb-dots .dot.on{background:var(--accent); transform:scale(1.25)}
.onb-nav{display:flex; gap:10px}
.onb-nav .btn{flex:1}
.onb-foot{text-align:center; margin-top:12px}
.onb-foot button{
  background:none; border:none; color:var(--muted); font:inherit;
  font-size:13px; cursor:pointer; padding:6px 10px; text-decoration:underline;
}

/* Leads view switcher + the three views */
.viewswitch{display:flex; gap:6px; justify-content:flex-end; margin:0 0 10px}
.viewswitch button{
  width:40px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); display:grid; place-items:center; cursor:pointer;
}
.viewswitch button.on{border-color:var(--accent); color:var(--accent)}

/* shared bits */
.lead .contactinfo{font-size:12px; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lead .typepill, .lead .countrytag{display:none}

/* detailed (default): row + contact info */
.view-list .lead .contactinfo{display:block}

/* compact: one dense line */
.view-compact{gap:5px}
.view-compact .lead{padding:6px 10px; gap:9px; border-radius:9px}
.view-compact .lead .face{width:30px; height:30px; flex:0 0 30px; border-radius:7px; font-size:12px}
.view-compact .lead .nm{font-size:14px}
.view-compact .lead .co, .view-compact .lead .contactinfo{display:none}
.view-compact .lead .side{flex-direction:row}
.view-compact .lead .side .pill:not(:first-child){display:none}

/* cards: trading-card grid */
.leads.view-cards{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
.view-cards .lead{
  flex-direction:column; align-items:stretch; gap:0; padding:0;
  border-radius:16px; overflow:hidden; position:relative;
}
.view-cards .lead::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:1;
  background:var(--line-2);
}
.view-cards .lead[data-temp="hot"]::before{background:var(--hot)}
.view-cards .lead[data-temp="warm"]::before{background:var(--warm)}
.view-cards .lead[data-temp="cold"]::before{background:var(--cold)}
.view-cards .lead .face{
  width:100%; height:auto; aspect-ratio:1/1; flex:none; border-radius:0; font-size:52px;
}
.view-cards .lead .who{padding:10px 12px 2px}
.view-cards .lead .nm{white-space:normal; font-size:15px; line-height:1.25; text-wrap:balance}
.view-cards .lead .co{white-space:normal; font-size:12px; margin-top:2px}
.view-cards .lead .contactinfo{display:none}
.view-cards .lead .side{
  margin:8px 12px 12px; flex-direction:row; flex-wrap:wrap; gap:5px;
  align-items:center; justify-content:flex-start;
}
.view-cards .lead .typepill, .view-cards .lead .countrytag{display:inline-block}
.view-cards .lead .countrytag{background:transparent; border:1px solid var(--line-2); color:var(--muted)}

/* Lead action grid */
.lead-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px}
.lead-actions .btn{min-height:42px; padding:9px 10px; font-size:14px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.lead-actions .span2{grid-column:1 / -1}

/* Photo lightbox */
.lightbox{position:fixed; inset:0; z-index:120; background:#000; display:flex; flex-direction:column}
.lightbox[hidden]{display:none}
.lb-stage{flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; min-height:0}
.lb-stage img{max-width:100%; max-height:100%; transform-origin:center center; will-change:transform; user-select:none; -webkit-user-select:none; -webkit-user-drag:none}
.lb-close{
  position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:0;
  background:rgba(255,255,255,.16); color:#fff; font-size:24px; line-height:1; cursor:pointer;
}
.lb-bar{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
.lb-bar .btn{background:rgba(255,255,255,.16); color:#fff; border-color:transparent}
.lb-hint{font-size:12px; color:rgba(255,255,255,.55)}

/* Add-photos tile in the gallery */
.gallery .add-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  aspect-ratio:1; border-radius:10px; border:1.5px dashed var(--line-2);
  color:var(--muted); font-size:12.5px; cursor:pointer;
}
.gallery .add-tile:active{background:var(--surface-2)}

/* QR slider (My badge & QR) */
.qr-slider{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  gap:12px; margin:0 -16px; padding:0 16px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.qr-slider::-webkit-scrollbar{display:none}
.qr-slide{flex:0 0 100%; scroll-snap-align:center; min-width:0}
.qr-card{background:#fff; border-radius:16px; padding:18px; text-align:center}
.qr-card-label{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#888; margin-bottom:10px;
}
.qr-dots{display:flex; justify-content:center; gap:6px; margin-top:12px}
.qr-dots .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--line-2); transition:background .2s, transform .2s;
}
.qr-dots .dot.on{background:var(--accent); transform:scale(1.25)}

/* Search loader */
.searching{display:flex; gap:14px; align-items:center}
.spinner{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  border:3px solid var(--line-2); border-top-color:var(--accent);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.search-phase{transition:opacity .4s; font-size:14px; color:var(--ink-2)}
.search-track{height:4px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-top:10px}
.search-track .glow{
  height:100%; width:35%; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:sweep 1.6s ease-in-out infinite;
}
@keyframes sweep{0%{transform:translateX(-110%)} 100%{transform:translateX(400%)}}
@media (prefers-reduced-motion:reduce){.spinner,.search-track .glow{animation-duration:3s}}

/* Voice bar */
.voicebar{
  width:100%; min-height:52px; display:flex; align-items:center; gap:10px; justify-content:center;
  border:1.5px dashed var(--line-2); border-radius:14px; background:var(--surface);
  font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; font-family:inherit;
  margin:0 0 16px; padding:10px 16px;
}
.voicebar .dot{width:10px; height:10px; border-radius:50%; background:var(--muted); flex:0 0 10px}
.voicebar.rec{border-style:solid; border-color:var(--accent); color:var(--accent-ink)}
.voicebar.rec .dot{background:var(--accent); animation:pulse 1.2s infinite}
.voicebar .vb-time{font-variant-numeric:tabular-nums; color:var(--accent-ink)}
@keyframes pulse{50%{opacity:.3}}

/* -- lead list ------------------------------------------------------------- */
.leads{display:flex; flex-direction:column; gap:8px}
.lead{
  display:flex; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; box-shadow:var(--shadow);
}
.lead:hover{border-color:var(--line-2)}
.lead .face{
  width:44px; height:44px; border-radius:10px; flex:0 0 44px; object-fit:cover;
  background:var(--surface-2); display:grid; place-items:center; color:var(--muted);
  font-weight:700; font-size:14px; overflow:hidden;
}
.lead .face img{width:100%; height:100%; object-fit:cover}
.lead .who{min-width:0; flex:1}
.lead .nm{font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lead .co{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lead .side{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto}

.pill{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; background:var(--surface-2); color:var(--ink-2); white-space:nowrap;
}
.pill.accent{background:var(--accent-wash); color:var(--accent-ink)}
.pill.good{background:var(--good-wash); color:var(--good)}
.pill.hot{background:var(--hot); color:#fff}
.pill.warm{background:var(--warm); color:#fff}
.pill.cold{background:var(--cold); color:#fff}
.pill.due{background:var(--accent); color:#fff}

.filters{display:flex; gap:8px; overflow-x:auto; padding:0 0 12px; -webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; padding:8px 14px; border-radius:20px; border:1px solid var(--line-2);
  background:var(--surface); font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap;
}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--paper)}

.empty{text-align:center; padding:48px 20px; color:var(--muted)}
.empty .big{font-size:15px; font-weight:600; color:var(--ink-2); margin-bottom:6px}

/* -- detail ---------------------------------------------------------------- */
.hero{display:flex; gap:14px; align-items:flex-start; margin:0 0 16px}
.hero .face{
  width:76px; height:76px; border-radius:14px; flex:0 0 76px; overflow:hidden; background:var(--surface-2);
  display:grid; place-items:center; color:var(--muted); font-weight:700; font-size:22px; border:1px solid var(--line);
}
.hero .face img{width:100%; height:100%; object-fit:cover}
.hero h1{margin:0 0 2px}
.hero .role{color:var(--ink-2); font-size:14px}
.hero .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}

.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; margin:0}
.kv dt{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; padding-top:2px}
.kv dd{margin:0; color:var(--ink)}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px}
.gallery a{display:block; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.gallery img{width:100%; height:100%; object-fit:cover; display:block}

.timeline{list-style:none; margin:0; padding:0; font-size:14px}
.timeline li{padding:9px 0 9px 16px; border-left:2px solid var(--line); position:relative; color:var(--ink-2)}
.timeline li::before{content:""; position:absolute; left:-5px; top:15px; width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.timeline b{color:var(--ink)}
.timeline time{display:block; font-size:11.5px; color:var(--muted); margin-top:1px}

.statusgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px}
.statusgrid button{
  min-height:44px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; font-family:inherit;
}
.statusgrid button.on{background:var(--accent); border-color:var(--accent); color:#fff}

.pager{display:flex; gap:8px; justify-content:center; margin:20px 0 0}
.pager a,.pager span{padding:8px 12px; border-radius:8px; border:1px solid var(--line); font-size:14px; background:var(--surface)}
.pager .cur{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.pager{flex-wrap:wrap; align-items:center}
.pager .pager-nav{min-width:40px; text-align:center; font-size:17px; line-height:1; padding:9px 12px}
.pager .is-off{opacity:.35}
.pager .pager-gap{border:none; background:none; padding:8px 2px; color:var(--muted)}
.pager-count{text-align:center; margin:8px 0 0; font-size:12.5px; color:var(--muted)}
#leads-results[aria-busy="true"], #users-results[aria-busy="true"]{opacity:.5; transition:opacity .12s}

/* -- login ----------------------------------------------------------------- */
.login{max-width:400px; margin:0 auto; padding:56px 20px}
.login .brand{justify-content:center; margin-bottom:8px; font-size:26px}
.login .tagline{text-align:center; color:var(--muted); font-size:13px; margin:0 0 32px; letter-spacing:.04em; text-transform:uppercase}
.login .note{font-size:12.5px; color:var(--muted); margin-top:16px; text-align:center; line-height:1.5}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* Wordmark pair: light version by default, dark version when the dark
   palette is in effect (system or manual). */
.logo-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) .logo-light{display:none}
  :root:not([data-theme=light]) .logo-dark{display:inline}
}
:root[data-theme=dark] .logo-light{display:none}
:root[data-theme=dark] .logo-dark{display:inline}

/* Back affordance on drill-down pages (the PWA has no browser back). */
.back-link{
  display:inline-flex; align-items:center; gap:4px; margin:2px 0 10px;
  font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;
  padding:6px 10px 6px 2px; border-radius:8px;
}
.back-link:active{color:var(--ink)}

/* Collapsible settings cards, styled like the nav cards above them. */
.set-card{padding:0; margin-bottom:10px}
.set-card>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:16px 18px; -webkit-tap-highlight-color:transparent;
}
.set-card>summary::-webkit-details-marker{display:none}
.set-card .chev{color:var(--muted); font-size:18px; transition:transform .15s}
.set-card[open] .chev{transform:rotate(90deg)}
.set-body{padding:2px 18px 18px}

/* Indeterminate progress + drag-over highlight for uploads. */
.progressbar{height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.progressbar i{display:block; height:100%; width:35%; border-radius:3px; background:var(--accent); animation:pb-slide 1.2s ease-in-out infinite}
@keyframes pb-slide{0%{margin-left:-35%}100%{margin-left:100%}}
.shot.drag{border-color:var(--accent); background:var(--accent-wash)}

/* Long URLs (LinkedIn) wrap inside the details card instead of escaping it. */
.kv dd{min-width:0; overflow-wrap:anywhere}
.kv dd a{word-break:break-all}

/* Undo bar: sits above the tab bar, shrinking line shows time left. */
.undo-bar{
  position:fixed; left:14px; right:14px; bottom:calc(74px + env(safe-area-inset-bottom));
  z-index:220; background:var(--ink); color:var(--paper);
  border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.35); overflow:hidden;
}
.undo-bar span{flex:1; font-size:14px; font-weight:600}
.undo-bar button{
  background:none; border:none; color:var(--accent-ink); font-weight:800;
  font-size:14px; letter-spacing:.06em; cursor:pointer; padding:4px 6px;
}
.undo-bar i{position:absolute; left:0; bottom:0; height:3px; background:var(--accent);
  animation:undo-shrink 4.5s linear forwards}
@keyframes undo-shrink{from{width:100%}to{width:0}}

/* Swipe-to-act rows. */
.swipe-wrap{position:relative; overflow:hidden; border-radius:14px}
.swipe-actions{position:absolute; top:0; right:0; bottom:0; display:flex}
.swipe-btn{width:86px; border:none; color:#fff; font-weight:700; font-size:13px; cursor:pointer}
.swipe-btn.resched{background:var(--accent)}
.swipe-btn.del{background:var(--hot)}
.swipe-card{position:relative; z-index:1; transition:transform .18s ease; touch-action:pan-y}

.js-swipe-menu{
  position:absolute; top:6px; right:8px; z-index:2;
  background:none; border:none; color:var(--muted); font-size:20px; line-height:1;
  padding:4px 6px; cursor:pointer;
}

/* AI-credit balance in the header: one tap to the top-up page. */
.hdr-credits{
  display:inline-flex; align-items:center; margin-right:8px; padding:5px 10px;
  border-radius:14px; background:var(--accent-wash); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  text-decoration:none; white-space:nowrap;
}

/* Notifications: a bottom sheet on phones (thumb reach, scrolls inside,
   never overflows), the familiar dropdown on wider screens. */
.ntf{position:fixed; inset:0; z-index:100}
.ntf-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.ntf-sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:72dvh;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-bottom:none;
  border-radius:18px 18px 0 0; box-shadow:0 -12px 34px rgba(0,0,0,.28);
  padding-bottom:env(safe-area-inset-bottom);
  animation:ntf-up .22s ease-out;
}
@keyframes ntf-up{from{transform:translateY(24px); opacity:.6} to{transform:none; opacity:1}}
.ntf-head{flex:none; padding:6px 14px 8px; border-bottom:1px solid var(--line)}
.ntf-grip{display:block; width:36px; height:4px; border-radius:2px; background:var(--line-2); margin:2px auto 10px}
.ntf-title-row{display:flex; align-items:center; gap:6px}
.ntf-title-row strong{flex:1; font-size:15px}
.ntf-close{
  width:32px; height:32px; border-radius:50%; border:none; background:var(--surface-2);
  color:var(--ink-2); font-size:20px; line-height:1; display:grid; place-items:center; cursor:pointer;
}
.ntf-list{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:6px 8px}
.ntf-group{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:8px 8px 4px}
.ntf-day{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:18px 0 6px}
.ntf-item{
  display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:10px; align-items:start;
  padding:10px 8px; border-radius:10px; color:var(--ink); text-decoration:none;
}
.ntf-item:hover,.ntf-item:active{background:var(--surface-2)}
.ntf-item + .ntf-item{border-top:1px solid var(--line)}
.ntf-dot{width:8px; height:8px; border-radius:50%; background:transparent; margin-top:6px}
.ntf-item.is-unread .ntf-dot{background:var(--accent)}
.ntf-body{min-width:0; display:block}
.ntf-t{display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ntf-item.is-unread .ntf-t{font-weight:700}
.ntf-b{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4;
}
.ntf-b-full{-webkit-line-clamp:4}
.ntf-ago{font-size:11.5px; color:var(--muted); white-space:nowrap; margin-top:3px}
.ntf-empty{font-size:13px; color:var(--muted); padding:22px 8px; text-align:center; margin:0}
.ntf-foot{
  flex:none; display:block; text-align:center; padding:12px; border-top:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--accent-ink); text-decoration:none;
}
html.ntf-open, html.ntf-open body{overflow:hidden}
@media (min-width:641px){
  .ntf{position:static; z-index:auto}
  .ntf-backdrop{display:none}
  .ntf-sheet{
    position:absolute; left:auto; right:0; top:calc(100% + 8px); bottom:auto; z-index:60;
    width:380px; max-height:70vh; border-radius:12px; border-bottom:1px solid var(--line);
    box-shadow:0 12px 34px rgba(0,0,0,.28); padding-bottom:0; animation:none;
  }
  .ntf-grip,.ntf-close{display:none}
  html.ntf-open, html.ntf-open body{overflow:auto}
}
@media (prefers-reduced-motion:reduce){.ntf-sheet{animation:none}}

/* Notification rows behave like native list rows: no long-press callout,
   no link drag, no text selection (a long press inside the fixed sheet
   could take WebKit down on iOS). Delete button + undo toast. */
.ntf-sheet,.ntf-item{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
.ntf-item{-webkit-user-drag:none; transition:transform .2s}
.ntf-sheet{transition:transform .2s ease-out; touch-action:pan-y}
.ntf-side{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.ntf-x{
  width:32px; height:32px; margin:-4px -8px -8px 0; border:none; border-radius:50%;
  background:transparent; color:var(--muted); font-size:20px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.ntf-x:hover,.ntf-x:active{background:var(--surface-2); color:var(--ink)}
.ntf-toast{
  position:fixed; left:12px; right:12px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:110;
  display:flex; align-items:center; gap:12px; overflow:hidden;
  background:var(--ink); color:var(--paper); border-radius:12px; padding:12px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35); font-size:14px;
}
.ntf-toast-text{flex:1}
.ntf-toast-undo{
  border:none; background:transparent; color:var(--accent-ink); font:inherit; font-weight:700;
  padding:6px 8px; cursor:pointer; letter-spacing:.02em;
}
.ntf-toast-bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--accent); transform-origin:left}
.ntf-toast.is-running .ntf-toast-bar{animation:ntf-countdown 3s linear forwards}
@keyframes ntf-countdown{from{transform:scaleX(1)} to{transform:scaleX(0)}}
@media (min-width:641px){
  .ntf-x{opacity:0}
  .ntf-item:hover .ntf-x,.ntf-x:focus-visible{opacity:1}
  .ntf-toast{left:auto; right:16px; bottom:16px; width:340px}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) .ntf-toast{background:#2a2a3a; color:#f2f2f7}
}
:root[data-theme=dark] .ntf-toast{background:#2a2a3a; color:#f2f2f7}

.ntf-toast[hidden]{display:none}
/* Row = div; the link is stretched over the whole row, the delete button
   floats above it. Tapping anywhere opens, tapping the x deletes. */
.ntf-item{position:relative}
.ntf-link{display:block; min-width:0; color:inherit; text-decoration:none; -webkit-user-drag:none}
.ntf-link::after{content:""; position:absolute; inset:0}
.ntf-side{position:relative; z-index:1; pointer-events:none}
.ntf-x{pointer-events:auto}
/* Hover highlights only where hover exists; touch keeps :active only. */
@media (hover:none){
  .ntf-item:hover{background:transparent}
  .ntf-item:active{background:var(--surface-2)}
  .ntf-x:hover{background:transparent; color:var(--muted)}
}
/* Keep the undo toast clear of the tab bar. */
.ntf-toast{bottom:calc(80px + env(safe-area-inset-bottom))}
@media (min-width:641px){.ntf-toast{bottom:16px}}

/* Tab bar: the "+" quick-scan button sits raised in the middle. */
.tabbar{grid-template-columns:1fr 1fr auto 1fr 1fr; align-items:end}
.tab-scan{
  width:58px; height:58px; margin:-20px 10px 6px; border:none; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 4px var(--surface);
  -webkit-tap-highlight-color:transparent;
}
.tab-scan:active{transform:scale(.94)}
.tab-scan svg{width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round}

/* -- page shell (js/shell.js): content swaps in place ----------------------- */
.wrap.fd-in-tab{animation:fd-fade .16s ease-out both}
.wrap.fd-in-fwd{animation:fd-fwd .22s cubic-bezier(.2,.7,.2,1) both}
.wrap.fd-in-back{animation:fd-back .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes fd-fade{from{opacity:0} to{opacity:1}}
@keyframes fd-fwd{from{opacity:0; transform:translateX(16px)} to{opacity:1; transform:none}}
@keyframes fd-back{from{opacity:0; transform:translateX(-16px)} to{opacity:1; transform:none}}
/* Thin loading bar under the status bar, shown only when a page takes a moment. */
#fd-nav-bar{
  position:fixed; top:env(safe-area-inset-top, 0px); left:0; right:0; height:3px; z-index:300;
  pointer-events:none; opacity:0; transition:opacity .15s; overflow:hidden;
}
#fd-nav-bar.is-on{opacity:1}
#fd-nav-bar i{display:block; height:100%; width:35%; border-radius:2px; background:var(--accent); animation:pb-slide 1s ease-in-out infinite}

/* Motion for the chrome: menus grow out of their button, the sheet's
   backdrop fades in, tabs acknowledge the press. */
.menu{animation:fd-menu .14s ease-out; transform-origin:top right}
@keyframes fd-menu{from{opacity:0; transform:translateY(-6px) scale(.97)} to{opacity:1; transform:none}}
.ntf-backdrop{animation:fd-fade .2s ease-out}
.tabbar a{transition:color .15s, transform .12s; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.tabbar a:active{transform:scale(.9)}
.menu-item{-webkit-tap-highlight-color:transparent}
.menu-item:active{background:var(--surface-2)}

/* In-app store: buttons and cards are hidden until the App Store has priced them. */
#app-store [hidden]{display:none!important}

/* Sign in with Apple (HIG): a clearly visible button in either theme. */
.apple-btn{background:#000;color:#fff;border-color:#000}
.apple-btn svg path{fill:#fff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) .apple-btn{background:#fff;color:#000;border-color:#fff}
  :root:not([data-theme=light]) .apple-btn svg path{fill:#000}
}
:root[data-theme=dark] .apple-btn{background:#fff;color:#000;border-color:#fff}
:root[data-theme=dark] .apple-btn svg path{fill:#000}