/* Sitewide search: header icon trigger + command-palette overlay.
   Loaded on every page (see the <link>/<script> pair spliced next to the
   Cloudflare beacon tag). Uses the page's own existing CSS custom
   properties (--ink, --paper-raised, --line, etc.) so it automatically
   matches whatever theme/contrast state that page is already in --
   nothing here redefines a token, it only reads them. */

.tnp-search-trigger{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:none; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
  order:-2; padding:0; font:inherit; -webkit-appearance:none; appearance:none;
}
.tnp-search-trigger:hover{background:var(--paper-sunk); color:var(--ink);}
.tnp-search-trigger svg{width:16px; height:16px; flex:none;}
.tnp-search-kbd{display:none;}
@media (min-width:640px){
  .tnp-search-trigger{width:auto; padding:0 10px 0 9px; gap:7px;}
  .tnp-search-kbd{
    display:inline-flex; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint);
    border:1px solid var(--line-soft); border-radius:4px; padding:1px 5px; line-height:1.5;
  }
}

.tnp-search-overlay{
  position:fixed; inset:0; background:rgba(8,10,9,.62); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center; padding:12vh 20px 20px; z-index:9999;
  opacity:0; pointer-events:none; transition:opacity .14s ease;
}
:root[data-theme="light"] .tnp-search-overlay{background:rgba(23,33,43,.4);}
.tnp-search-overlay.tnp-open{opacity:1; pointer-events:auto;}
.tnp-search-modal{
  width:100%; max-width:640px; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden;
  transform:translateY(-8px); transition:transform .16s ease;
}
.tnp-search-overlay.tnp-open .tnp-search-modal{transform:translateY(0);}
.tnp-search-field-row{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line);}
.tnp-search-field-row svg{width:20px; height:20px; color:var(--ink-faint); flex:none;}
.tnp-search-input{flex:1; min-width:0; border:none; outline:none; background:none; color:var(--ink); font-family:var(--font-body); font-size:17px;}
.tnp-search-input::placeholder{color:var(--ink-faint);}
.tnp-search-esc{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); background:none; border:1px solid var(--line-soft); border-radius:5px; padding:2px 6px; flex:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.tnp-search-esc:hover, .tnp-search-esc:active{color:var(--ink-soft); border-color:var(--line);}
.tnp-search-body{max-height:min(56vh,460px); overflow-y:auto;}
.tnp-search-section-label{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding:14px 20px 6px;}
.tnp-search-chips{display:flex; flex-wrap:wrap; gap:8px; padding:4px 20px 18px;}
.tnp-search-chip{
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink-soft);
  background:var(--paper-sunk); border:1px solid var(--line); border-radius:999px; padding:7px 13px; cursor:pointer;
}
.tnp-search-chip:hover{border-color:var(--accent); color:var(--accent);}
.tnp-result-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 20px; cursor:pointer; border-left:3px solid transparent;
}
.tnp-result-row .tnp-r-name{font-weight:600; color:var(--ink);}
.tnp-result-row .tnp-r-name .tnp-r-state{color:var(--ink-faint); font-weight:500; font-size:12.5px; margin-left:5px;}
.tnp-result-row .tnp-r-sub{font-size:12.5px; color:var(--ink-faint); flex:none;}
.tnp-result-row.tnp-active{background:var(--info-soft); border-left-color:var(--info);}
.tnp-result-row.tnp-active .tnp-r-name{color:var(--info);}
.tnp-search-empty{padding:34px 20px; text-align:center; color:var(--ink-faint); font-size:13.5px;}
.tnp-search-footer{
  display:flex; align-items:center; gap:16px; padding:10px 20px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-faint);
}
.tnp-search-footer .tnp-fk{display:flex; align-items:center; gap:5px;}
.tnp-search-footer kbd{font-family:var(--font-mono); font-size:10.5px; border:1px solid var(--line-soft); border-radius:4px; padding:1px 5px;}
.tnp-search-footer .tnp-stat{margin-left:auto; font-family:var(--font-mono);}

@media (max-width:480px){
  .tnp-search-overlay{padding:0;}
  .tnp-search-modal{max-width:none; width:100%; height:100%; border-radius:0; display:flex; flex-direction:column;}
  .tnp-search-body{max-height:none; flex:1 1 auto;}
  /* Full-screen takeover leaves no backdrop to tap and there's no physical
     Escape key on a touch keyboard, so this button is the only way to close
     the overlay here -- give it a real tap target. */
  .tnp-search-esc{padding:8px 12px; font-size:12px;}
}

@media (prefers-reduced-motion: reduce){
  .tnp-search-overlay, .tnp-search-modal{transition:none;}
}