/* ==========================================================================
   pages/search.css: Search the Existlist (/search) and the record card
   Owner: the search page builder. Every rule is scoped under .pg-search (the
   router puts that class on <main id="app"> while this page shows). Tokens from
   public/ds/tokens.css. The card borrows the Reveal's crew card language (Eli's
   reveal option 2): accent bar, serif name, a greyscale face bleeding in from the
   right with a glow in the mode colour.
   ========================================================================== */

.pg-search .sx { padding-bottom: var(--s-10); }

/* ---- title block ------------------------------------------------------- */
.pg-search .sx-top { padding-top: var(--s-7); }
.pg-search .sx-h1 { margin-top: var(--s-2); }
.pg-search .sx-top .page-sub { max-width: 560px; }
.pg-search .sx-modes { margin-top: var(--s-6); max-width: 460px; }

/* ---- the field --------------------------------------------------------- */
.pg-search .sx-bar { position: relative; margin-top: var(--s-4); }
.pg-search .sx-input {
  min-height: 60px; padding: 14px 52px 14px 54px; border-radius: var(--r-lg);
  font-size: var(--fs-lg); font-weight: 500; background: var(--page-deep);
  border-color: var(--mode-line); box-shadow: 0 0 0 1px rgba(var(--mode-rgb), .06), 0 10px 40px -18px rgba(var(--mode-rgb), .55);
  -webkit-appearance: none; appearance: none;
}
.pg-search .sx-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pg-search .sx-input:focus { border-color: var(--mode-primary); box-shadow: 0 0 0 3px rgba(var(--mode-rgb), .25), 0 10px 40px -14px rgba(var(--mode-rgb), .7); }
.pg-search .sx-bar-ic {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--mode-primary);
  display: grid; place-items: center; pointer-events: none;
}
.pg-search .sx-bar-ic .i { width: 22px; height: 22px; }
.pg-search .sx-kbd {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-xs);
  border: 1px solid var(--border); color: var(--text-muted); font: 600 var(--fs-xs)/1 var(--font-label);
  pointer-events: none;
}
.pg-search .sx-input:focus ~ .sx-kbd { opacity: 0; }

.pg-search .sx-status:empty { display: none; }
.pg-search .sx-status {
  margin-top: var(--s-3); color: var(--text-2); font: 500 var(--fs-xs)/1.3 var(--font-label);
  letter-spacing: .12em; text-transform: uppercase;
}
.pg-search .sx-out { margin-top: var(--s-5); }
.pg-search .sx-skel .skel { border-radius: var(--r-md); }

/* ---- idle: how, tips, recent ------------------------------------------ */
.pg-search .sx-how { color: var(--text-2); font-size: var(--fs-base); line-height: 1.5; margin: 0; }
.pg-search .sx-how b { color: var(--text); font-weight: 600; }
.pg-search .sx-tips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.pg-search .sx-tips-k {
  font: 600 var(--fs-micro)/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
  margin-right: var(--s-1);
}
.pg-search .sx-tip {
  min-height: 36px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: 500 var(--fs-sm)/1 var(--font-ui); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pg-search .sx-tip:hover { border-color: var(--mode-line); background: var(--mode-tint); }
.pg-search .sx-head { margin-top: var(--s-8); margin-bottom: var(--s-3); }

/* ---- result rows ------------------------------------------------------ */
.pg-search .sx-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3);
  font: 600 var(--fs-micro)/1.2 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
}
.pg-search .sx-meta-lbl { color: var(--mode-primary); }
.pg-search .sx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pg-search .sx-row {
  position: relative; display: flex; align-items: center; gap: var(--s-4); min-height: 76px; padding: 10px 14px 10px 12px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
  color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.pg-search .sx-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mode-primary);
  opacity: 0; transition: opacity var(--t-fast);
}
.pg-search .sx-row:hover, .pg-search .sx-row:focus-visible {
  border-color: var(--mode-line);
  background: linear-gradient(90deg, rgba(var(--mode-rgb), .12), rgba(var(--mode-rgb), 0) 60%), var(--surface);
}
.pg-search .sx-row:hover::before, .pg-search .sx-row:focus-visible::before { opacity: 1; }
.pg-search .sx-face {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center;
  background: hsl(var(--av, 30) 22% 18%); color: hsl(var(--av, 30) 45% 72%);
  font: 600 var(--fs-lg)/1 var(--font-serif); border: 1px solid var(--border);
}
.pg-search .sx-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.15) brightness(.9); }
.pg-search .sx-row:hover .sx-face img, .pg-search .sx-row:focus-visible .sx-face img { filter: grayscale(.2) contrast(1.05); }
.pg-search .sx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pg-search .sx-title { font: 500 var(--fs-lg)/1.2 var(--font-serif); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-search .sx-alias { font: 400 var(--fs-sm)/1 var(--font-ui); color: var(--text-muted); }
.pg-search .sx-desc {
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-search .sx-work {
  flex: 0 1 auto; max-width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--mode-line); color: var(--mode-highlight);
  font: 600 var(--fs-micro)/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
}
.pg-search .sx-chev { color: var(--text-2); display: grid; place-items: center; }
.pg-search .sx-foot { margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pg-search .sx-foot .btn-quiet { min-height: 36px; padding: 6px 4px; color: var(--mode-primary); }

/* ---- nobody on file --------------------------------------------------- */
.pg-search .sx-none {
  text-align: center; padding: var(--s-8) var(--s-5); border-radius: var(--r-lg);
  border: 1px dashed var(--hover); background: radial-gradient(ellipse at 50% 0%, rgba(var(--mode-rgb), .10), transparent 65%), var(--surface);
}
.pg-search .sx-none-ic {
  width: 56px; height: 56px; margin: 0 auto var(--s-4); border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--mode-tint); color: var(--mode-primary);
}
.pg-search .sx-none-ic .i { width: 26px; height: 26px; }
.pg-search .sx-none-title { margin: 0; font: 700 var(--fs-xl)/1.2 var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.pg-search .sx-none-p { margin: var(--s-3) auto 0; max-width: 460px; color: var(--text-2); line-height: 1.5; }
.pg-search .sx-none.is-tip { padding: var(--s-6) var(--s-5); }
.pg-search .sx-none-acts {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-6) auto 0; max-width: 620px; text-align: left;
}
.pg-search .sx-cross { margin-bottom: var(--s-6); }
.pg-search .sx-none.is-after { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.pg-search .sx-cross-k {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3);
  font: 600 var(--fs-micro)/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--mode-primary);
}
.pg-search .sx-cross-k .i { width: 16px; height: 16px; }

/* ---- the record card -------------------------------------------------- */
.pg-search .sx-back {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; margin-top: var(--s-5);
  color: var(--text-2); text-decoration: none; font: 600 var(--fs-sm)/1 var(--font-label); letter-spacing: .08em;
}
.pg-search .sx-back:hover { color: var(--text); }
.pg-search .sx-back .i { width: 18px; height: 18px; }

.pg-search .sx-card {
  position: relative; margin-top: var(--s-3); border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--mode-line); box-shadow: var(--mode-glow);
  background: linear-gradient(100deg, var(--mode-card) 0%, rgba(var(--mode-rgb), .05) 55%, var(--page-deep) 100%);
}
.pg-search .sx-card.is-loading { padding: var(--s-6); border-color: var(--border); box-shadow: none; background: var(--surface); }
.pg-search .sx-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 3;
  background: var(--mode-primary); box-shadow: 0 0 16px rgba(var(--mode-rgb), .6);
}
.pg-search .sx-card.is-loading::before { display: none; }
.pg-search .sx-hero { position: relative; z-index: 2; min-height: 250px; display: flex; align-items: flex-end; }
.pg-search .sx-htxt { position: relative; z-index: 2; padding: var(--s-7) var(--s-7) var(--s-5) calc(var(--s-7) + 5px); max-width: 64%; }
.pg-search .sx-kick { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.pg-search .sx-kick-t { font: 500 var(--fs-xs)/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.pg-search .sx-name {
  margin: var(--s-4) 0 0; font: 500 clamp(34px, 6vw, 56px)/1.04 var(--font-serif); letter-spacing: -.01em; color: var(--text);
  overflow-wrap: anywhere; text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.pg-search .sx-who { margin: var(--s-3) 0 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.45; letter-spacing: .01em; }
.pg-search .sx-aka { margin: var(--s-3) 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.4; }
.pg-search .sx-aka span {
  font: 600 var(--fs-micro)/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px;
}

/* the face: greyscale, bleeding in from the right, a glow in the mode colour */
.pg-search .sx-hface { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: 1; }
.pg-search .sx-hface::before {
  content: ""; position: absolute; inset: -20% -20% -20% 6%; z-index: 0;
  background: radial-gradient(closest-side, rgba(var(--mode-rgb), .42), rgba(var(--mode-rgb), 0) 100%);
}
.pg-search .sx-hph {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  /* One layer only: a composited second layer silently dropped the whole mask
     in Chromium and left a hard edge down the left of the face. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 20%, rgba(0,0,0,.6) 46%, #000 74%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 20%, rgba(0,0,0,.6) 46%, #000 74%);
}
.pg-search .sx-hph img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  filter: grayscale(1) contrast(1.25) brightness(.85); opacity: 0; transition: opacity 420ms var(--ease-out);
}
.pg-search .sx-hface.is-in .sx-hph img { opacity: 1; }
.pg-search .sx-hface.is-in .sx-hph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: color-mix(in srgb, var(--mode-primary) 32%, #fff); mix-blend-mode: multiply;
}
.pg-search .sx-hface.is-mono { display: grid; place-items: center; }
.pg-search .sx-hmono {
  position: relative; z-index: 1; font: 600 clamp(64px, 12vw, 120px)/1 var(--font-serif); letter-spacing: -.03em;
  color: rgba(var(--mode-rgb), .5); text-shadow: 0 0 40px rgba(var(--mode-rgb), .45);
}
.pg-search .sx-hface.is-mono .sx-hmono:empty::before { content: "?"; }
.pg-search .sx-caption {
  position: absolute; right: 12px; bottom: 10px; z-index: 2; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.55); color: var(--text-2); font: 500 10.5px/1.2 var(--font-label); letter-spacing: .08em;
}
.pg-search .sx-acts { position: relative; z-index: 2; padding: 0 var(--s-7) var(--s-7) calc(var(--s-7) + 5px); }
.pg-search .sx-draft { width: 100%; max-width: 440px; }

/* ---- card sections ---------------------------------------------------- */
.pg-search .sx-sec { margin-top: var(--s-8); }
.pg-search .sx-sec .section-head { margin-bottom: var(--s-2); }
.pg-search .sx-sec-sub { margin: 0 0 var(--s-4); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.pg-search .link-more .i { width: 16px; height: 16px; }

/* today's seats: the board's seat colours down the left, like the crew cards */
.pg-search .sx-seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.pg-search .sx-seat {
  position: relative; width: 100%; height: 100%; min-height: 112px; display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 14px 14px 12px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; cursor: pointer; overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.pg-search .sx-seat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--seat, var(--mode-primary));
  box-shadow: 0 0 12px var(--seat, var(--mode-primary));
}
.pg-search .sx-seat:hover { border-color: var(--seat, var(--mode-primary)); background: var(--surface-2); }
.pg-search .sx-seat:active { transform: translateY(1px); }
.pg-search .sx-seat-k { font: 600 var(--fs-xs)/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--seat, var(--mode-primary)); }
.pg-search .sx-seat-v { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; flex: 1; }
.pg-search .sx-seat-s { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-sm)/1 var(--font-ui); color: var(--text); }
.pg-search .sx-seat-s .i { width: 16px; height: 16px; color: var(--green); }
.pg-search .sx-seat.is-off { background: var(--page-deep); }
.pg-search .sx-seat.is-off::before { opacity: .35; box-shadow: none; }
.pg-search .sx-seat.is-off .sx-seat-k { opacity: .7; }
.pg-search .sx-seat.is-off .sx-seat-s { color: var(--text-2); }
.pg-search .sx-seat.is-off .sx-seat-s .i { color: var(--red); }
.pg-search .sx-seat.is-here { border-color: var(--green-line); background: linear-gradient(90deg, var(--green-bg), var(--surface) 80%); }

/* the sourced lines */
.pg-search .sx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); counter-reset: sx-fact; }
.pg-search .sx-facts li {
  position: relative; padding: var(--s-4) var(--s-5) var(--s-4) 56px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); line-height: 1.55; font-size: var(--fs-base);
  counter-increment: sx-fact;
}
.pg-search .sx-facts li::before {
  content: counter(sx-fact); position: absolute; left: 16px; top: var(--s-4); width: 26px; height: 26px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--mode-tint); color: var(--mode-primary);
  font: 700 var(--fs-xs)/1 var(--font-label);
}

/* strong at */
.pg-search .sx-strengths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.pg-search .sx-str {
  padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--mode-line);
  background: linear-gradient(160deg, rgba(var(--mode-rgb), .12), rgba(var(--mode-rgb), .02) 70%), var(--surface);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.pg-search .sx-str-k { font: 700 var(--fs-sm)/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--mode-highlight); }
.pg-search .sx-str-v { color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }

/* where they shine */
.pg-search .sx-shine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pg-search .sx-sh {
  position: relative; display: flex; align-items: center; gap: var(--s-4); padding: 14px 16px 14px 20px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); overflow: hidden;
}
.pg-search .sx-sh::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--seat); }
.pg-search .sx-sh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pg-search .sx-sh-k { font: 600 var(--fs-xs)/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--seat); }
.pg-search .sx-sh-v { color: var(--text); font-size: var(--fs-base); line-height: 1.4; }
.pg-search .sx-sh-m { color: var(--text-muted); font: 500 var(--fs-xs)/1.3 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.pg-search .sx-sh-tag {
  flex: 0 0 auto; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--green-line); background: var(--green-bg);
  color: var(--green); font: 700 var(--fs-micro)/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}

.pg-search .sx-credit { margin-top: var(--s-7); color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; overflow-wrap: anywhere; }
.pg-search .sx-credit a { color: var(--text-2); }

/* ---- tablet ----------------------------------------------------------- */
@media (max-width: 820px) {
  .pg-search .sx-strengths { grid-template-columns: 1fr; }
  .pg-search .sx-str { flex-direction: row; align-items: baseline; gap: var(--s-3); }
  .pg-search .sx-str-k { flex: 0 0 120px; }
}

/* ---- phone ------------------------------------------------------------ */
@media (max-width: 600px) {
  .pg-search .sx-top { padding-top: var(--s-5); }
  .pg-search .sx-modes { max-width: none; }
  .pg-search .sx-input { min-height: 56px; font-size: var(--fs-md); padding-left: 48px; padding-right: 16px; }
  .pg-search .sx-bar-ic { left: 16px; }
  .pg-search .sx-kbd { display: none; }
  .pg-search .sx-row { gap: var(--s-3); min-height: 70px; padding: 8px 10px; }
  .pg-search .sx-face { width: 50px; height: 50px; flex-basis: 50px; }
  .pg-search .sx-title { font-size: var(--fs-md); }
  .pg-search .sx-work { display: none; }
  .pg-search .sx-none { padding: var(--s-6) var(--s-4); }
  .pg-search .sx-none-acts { grid-template-columns: 1fr; }

  .pg-search .sx-card { display: flex; flex-direction: column; }
  .pg-search .sx-hface { position: relative; order: -1; width: 100%; height: 220px; }
  .pg-search .sx-hero { min-height: 0; }
  .pg-search .sx-hface::before { inset: -10% 10% -10% 10%; }
  .pg-search .sx-hph {
    -webkit-mask-image: radial-gradient(ellipse 80% 72% at 50% 30%, #000 45%, rgba(0,0,0,.45) 75%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 72% at 50% 30%, #000 45%, rgba(0,0,0,.45) 75%, transparent 100%);
  }
  .pg-search .sx-hph img { filter: grayscale(1) contrast(1.2) brightness(.72); }
  .pg-search .sx-caption { top: 10px; bottom: auto; }
  .pg-search .sx-sec .section-head { flex-wrap: wrap; row-gap: var(--s-1); }
  .pg-search .sx-htxt { max-width: none; padding: 0 var(--s-5) var(--s-4) calc(var(--s-5) + 5px); margin-top: -40px; }
  .pg-search .sx-hface.is-mono { height: 150px; }
  .pg-search .sx-acts { padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 5px); }
  .pg-search .sx-draft { max-width: none; }
  .pg-search .sx-seats { grid-template-columns: 1fr; }
  .pg-search .sx-seat { min-height: 0; }
  .pg-search .sx-facts li { padding: var(--s-4) var(--s-4) var(--s-4) 50px; font-size: var(--fs-sm); }
  .pg-search .sx-facts li::before { left: 12px; }
  .pg-search .sx-str { flex-direction: column; gap: var(--s-2); }
  .pg-search .sx-str-k { flex: none; }
  .pg-search .sx-sh { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-search .sx-row, .pg-search .sx-seat, .pg-search .sx-hph img { transition: none; }
}