/* The shared bar renders the wordmark with the brand faces that live in
   logo.css (PulsPlexMono + PulsJakarta, base64, CSP-safe). Three public pages
   (biblioteka, instalacija, welcome.mobile) never linked it, so on those the
   wordmark fell back to a system font and the logo sat up to 9px off.

   The first fix was `@import url('/brand/logo.css')` here. Measured on the
   live site it was a mistake: the pages' own <link> is content-stamped to
   /brand/logo.css?v=<hash> by server.py, the @import URL was not, so the two
   never shared a cache entry — every page fetched logo.css TWICE, and the
   @import copy was fetched only after this file had arrived: one extra,
   serial, render-blocking round trip on every page (597 ms of a 2,372 ms
   first paint at a 562 ms RTT). The three pages now carry the <link>
   themselves and nothing is imported here. Do not reintroduce @import for
   anything on the first-paint path. */

/* ===========================================================================
   public.css — the puls PUBLIC SITE theme layer.
   Shopfront Three, 2026-09-02.

   THE RULE THIS FILE EXISTS TO ENFORCE
   ------------------------------------
   The public/marketing surface is LOCKED to light. Not defaulted to light —
   locked. It does not follow the operating system, it does not follow the
   clock, it does not read a stored preference, and it offers no toggle. A
   prospect who lands at 23:00 on a phone set to dark mode sees exactly the
   page a prospect who lands at noon sees. First impression has to be identical
   for everyone; that is the one place brand consistency outranks respecting a
   device preference, and it applies HERE ONLY — never to the application.

   The application follows a different rule and is not touched by this file.
   Its theme lives in src/dashboard.css ([data-theme="light"], toggled from
   src/dashboard.main.js). The two surfaces share no stylesheet, which is why
   locking one does not constrain the other.

   WHAT THE LOCK ACTUALLY CONSISTS OF
   ----------------------------------
   A Phase-0 scan of all 14 public pages found NO theme system to override:
   no prefers-color-scheme rule, no data-theme attribute, no stored preference,
   no toggle. So "neutralize every override" reduces to three things:

     1. color-scheme: light below. This is the only real override, and it is
        easy to miss because it is invisible until you look for it: without it,
        a browser on a dark OS renders native <input>, <select>, <textarea>,
        scrollbars and form autofill in ITS dark colours on top of our light
        page. The contact form on /o-nama and the billing toggle on /cijene are
        where that would show. This declaration is load-bearing.
     2. No prefers-color-scheme block is ever written in this file, or in any
        public page. If one appears later, the lock is broken.
     3. theme-color is set light per page, so the browser chrome agrees.

   There is deliberately no flash-of-dark guard script, because there is no
   flash to guard against: this stylesheet is a render-blocking <link> placed
   before each page's inline <style>, so nothing paints until the light palette
   is in force.

   WHERE THE PALETTE COMES FROM
   ----------------------------
   Not invented. It is the app's own shipped light theme (src/dashboard.css's
   [data-theme="light"] block) — the same #F7F8FA / #FFFFFF / #F0F2F5 /
   #1A1A1C / #64656B / #E2E4E9 — so the marketing site and the product read as
   the same hand. Four accent tokens could NOT be carried over: on a light
   ground #9a9aa0, #2ecc71, #e6a020 and #e74c3c all fail WCAG AA while still
   looking perfectly fine, which is precisely how a naive dark-to-light
   inversion ships an accessibility failure. Their measured ratios and their
   replacements are in the table below.

   TWO VOCABULARIES, ONE PALETTE
   -----------------------------
   The 14 pages use two incompatible sets of variable names: 12 subpages say
   --bg/--panel/--panel2/--border/--text/--muted, while welcome.html and
   welcome.mobile.html say --ink/--panel/--panel-2/--line/--paper/--muted.
   Both are aliased onto one palette here rather than unified across the pages,
   because unifying would mean editing ~1,400 var() references for no
   user-visible gain. That is a deliberate choice, not an oversight.

   REGISTER
   --------
   Light here means institutional and credible — the register of a vendor a
   public body can procure from. Clean surfaces, real whitespace, restrained
   accent, typography doing the work. Not a gallery. The .shock red stays an
   accent and nothing else.
   =========================================================================== */

:root {
  /* ---- THE LOCK. Do not remove; see note 1 above. ---- */
  color-scheme: light;

  /* ---- grounds and surfaces ---- */
  --bg:        #F7F8FA;   /* page ground   (vocabulary A) */
  --ink:       #F7F8FA;   /* page ground   (vocabulary B) */
  --panel:     #FFFFFF;   /* card surface  (both)         */
  --panel2:    #F0F2F5;   /* deeper surface (A)           */
  --panel-2:   #F0F2F5;   /* deeper surface (B)           */
  --border:    #E2E4E9;   /* hairline (A)                 */
  --line:      #E2E4E9;   /* hairline (B)                 */

  /* ---- type ----
     --muted was #9a9aa0 / #8B929C. On #F7F8FA that measures 2.65:1 and fails
     AA outright while looking entirely normal. #64656B measures 5.5:1. */
  --text:      #1A1A1C;   /* 16.3:1 on --bg  (A) */
  --paper:     #1A1A1C;   /* 16.3:1 on --bg  (B) */
  --muted:     #64656B;   /* 5.5:1 on --bg — was 2.65:1, FAILED */

  /* ---- accents ----
     --red is unchanged: #C8070A measures 5.7:1 as text on --bg, and white on
     #C8070A measures 6.0:1, so both the link colour and the filled button
     pass. It reads confident rather than alarming at this weight because it is
     used as accent only — fills and rules, never large flat areas.

     The other four are remapped. Their dark-theme values all fail on light:
       #2ecc71 -> 1.99:1   #e6a020 -> ~1.9:1   #e74c3c -> 3.62:1 (body fail)
     Replacements are the same hues, darkened until they pass. */
  --red:       #C8070A;   /* 5.7:1 text · 6.0:1 white-on-red — unchanged */
  --red-dim:   #9B1114;   /* 8.0:1 — was #7A1013 */
  --pos:       #137A45;   /* 5.1:1 — was #2ecc71 at 1.99:1, FAILED */
  --green:     #137A45;   /* alias of --pos */
  --ok:        #137A45;   /* alias of --pos (vocabulary B) */
  --neg:       #B3261E;   /* 6.2:1 — was #e74c3c at 3.62:1, body FAILED */
  --amber:     #8A5A00;   /* 5.6:1 — was #E8A317/#e6a020, FAILED */
  --cold:      #2C5B96;   /* 6.6:1 — was #5B87C4 */

  /* ---- alpha grounds ----
     The pages carry ~25 scrims written as rgba(11,12,14,a) / rgba(14,14,16,a)
     — the dark ground with an alpha. Those become rgba(var(--ink-rgb),a) so
     one edit here moves all of them, instead of 25 hand-edits that drift. */
  --ink-rgb:   247,248,250;
  --panel-rgb: 255,255,255;
  --red-rgb:   200,7,10;

  /* ---- shared metrics ---- */
  --w:         1160px;
  --topbar-h:  60px;
}

/* The page ground itself. Set on both html and body so that an overscroll
   bounce, a short page, and a page whose own stylesheet forgets to paint the
   body all land on light rather than on the browser's default. */
html {
  background: var(--bg);
  /* Reserve the scrollbar's width whether or not the page needs one. Without
     it a short page (e.g. /uslovi) is 15px wider than a long one, which moved
     the centred top bar — and therefore the logo — by 7px from page to page.
     "Identical page to page" has to survive that too. */
  scrollbar-gutter: stable;
}
body { background: var(--bg); color: var(--text); }

/* Native controls, spelled out.
   color-scheme above handles the browser's own rendering; these make the
   result deliberate rather than inherited, and stop a dark-OS autofill
   from painting a near-black field on a white card. */
input, select, textarea, button { color-scheme: light; font-family: inherit; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--panel) inset;
}

/* Selection and focus, once, for the whole public surface. */
::selection { background: rgba(var(--red-rgb), .16); color: var(--text); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Images never outgrow their column. Cheap insurance against the horizontal
   overflow measured on /cijene at 375px. */
img { max-width: 100%; }

/* ---------------------------------------------------------------------------
   The logo mark on a light ground.

   brand/mark.webp is drawn in near-white strokes with a red core — artwork
   made for a dark page. Dropped onto #F7F8FA it all but disappears. The
   application already solved this in src/dashboard.css with
   `filter: invert(1) hue-rotate(180deg)`: invert flips the lightness so the
   strokes go dark, and the 180° hue rotation pulls the inverted cyan core back
   to red. Reused here rather than shipping a second, light-specific mark file
   — same trick, same result, one asset.
   --------------------------------------------------------------------------- */
img.plogo-mark { filter: invert(1) hue-rotate(180deg); }

/* logo.css hardcodes .pw-dim to the dark theme's grey. Public pages get the
   light one. */
.pw-dim { color: var(--muted); }

/* ===========================================================================
   THE TOP BAR — one component, every public page.
   Shopfront Three, job 10 (one bar) + job 5 (two icons).

   Phase 0 counted NINE distinct top-bar implementations across the public
   surface: the welcome page's full <header>, the mobile welcome page's
   .topbar, four variants of a fixed corner logo (three of which were not even
   a link, so those pages had no way home), a sticky flex bar in two flavours,
   the docs shell's own, and the auth pages'. They differed in height,
   composition, logo asset and language-toggle shape.

   Editing nine copies until they happen to match is not the fix; having one
   is. The markup lives in server.py as PULS_PUBLIC_TOPBAR and is injected
   through the same <!--PULS_INJECT_*--> hook pattern _load_page already uses
   for the footer and the boot loader. A page cannot have its own variant
   because a page does not own the bar.

   THE TWO ICONS (job 5)
   ---------------------
   Left: hamburger — all public navigation.
   Right: user icon — sign-in, create account, language, everything else.
   Nothing else floats outside those two on a phone.

   ONE DELIBERATE EXCEPTION, recorded rather than assumed: the primary call to
   action stays VISIBLE and outside the icon menu at phone width. The
   two-icon rule exists so chrome stops competing with content — but on a
   marketing page the CTA *is* the content, and burying the one thing the page
   exists to make people click costs more than the tidiness is worth. On a
   phone it gets its own full-width row under the bar, which is more prominent
   than cramming it between the icons, not less.

   Class prefix `pt-` so nothing here collides with the per-page .top / .brand
   / .lang rules the pages still carry.
   =========================================================================== */

/* The chrome carries its own box-sizing. Two of the inline server-rendered
   pages have no `*{box-sizing:border-box}` reset, so .pt-in's max-width plus
   its padding measured 1200px instead of 1160 there and the logo sat 20px off
   from where it sits everywhere else. The bar cannot assume the page's reset. */
.pt-bar, .pt-bar *, .pt-ctarow, .pt-ctarow *,
.pt-drawer, .pt-drawer *, .pt-menu, .pt-menu * { box-sizing: border-box; }

/* Defensive: a page whose <body> is itself a flex or grid container would
   otherwise shrink the bar into a row item beside the content — which is
   exactly what /volontiraj, /dogadjaj and /potvrda-emaila did, collapsing a
   1265px bar to 723px. Those three pages were restructured, but state the
   invariant here too so the next page that tries it cannot break the bar. */
.pt-bar{
  flex:0 0 auto; align-self:stretch; grid-column:1 / -1; width:100%;
  position:sticky; top:0; z-index:400;
  background:rgba(var(--panel-rgb),.88);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.pt-in{
  max-width:var(--w); margin:0 auto; padding:0 20px;
  height:var(--topbar-h); display:flex; align-items:center; gap:12px;
  /* The chrome states its own line-height. It used to inherit it, and the
     bar then measured differently from page to page: the module template's
     body sets line-height:1.6 and the docs/404 shell sets none, so the same
     markup rendered nav links 38px tall on /modul/regije and 34px on the 404,
     the CTA 41 vs 37, the wordmark 24 vs 19. Bar HEIGHT was identical (.pt-in
     fixes it), which is why the earlier geometry sweep passed and this did
     not show up. Same class of bug as the .lang position regression: a shared
     component cannot rely on the host page declaring nothing. */
  line-height:1.4;
}
.pt-logo{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--text); white-space:nowrap; flex:0 0 auto;
  min-height:40px;   /* measured 22px tall on a phone — below the 40px tap minimum */
  line-height:1.6;
  font-family:'PulsPlexMono','IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-weight:500; font-size:15px; letter-spacing:-.03em;
}
.pt-logo img{ height:30px; width:auto; display:block; flex:none; margin:-6px 0;
              filter:invert(1) hue-rotate(180deg); }
.pt-nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.pt-nav a{
  color:var(--text); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:8px 11px; border-radius:4px; white-space:nowrap; line-height:1.5;
}
.pt-nav a:hover{ background:var(--panel2); color:var(--red); }
.pt-nav a[aria-current="page"]{ color:var(--red); font-weight:600; }
.pt-right{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto; }
.pt-nav + .pt-right{ margin-left:12px; }

.pt-cta{
  background:var(--red); color:#fff; text-decoration:none; font-weight:600;
  font-size:13px; padding:9px 15px; border-radius:4px; white-space:nowrap;
  border:1px solid var(--red); line-height:1.6;
}
.pt-cta:hover{ background:var(--red-dim); border-color:var(--red-dim); color:#fff; }

.pt-icon{
  width:40px; height:40px; flex:none; display:inline-flex;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); border-radius:6px;
  color:var(--text); cursor:pointer; padding:0;
}
.pt-icon:hover{ border-color:var(--red); color:var(--red); }
.pt-icon svg{ width:19px; height:19px; }
.pt-burger{ display:none; order:-1; margin-right:2px; }

/* ---- the drawer (left icon) and the account menu (right icon) ---- */
.pt-scrim{
  position:fixed; inset:0; background:rgba(20,22,26,.42); z-index:401;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.pt-scrim.open{ opacity:1; pointer-events:auto; }
.pt-drawer{
  position:fixed; top:0; bottom:0; left:0; width:min(320px,86vw); z-index:402;
  background:var(--panel); border-right:1px solid var(--border);
  /* A closed drawer that is only translated off-screen is still in the tab
     order and still read by innerText — every page's text began with the
     drawer's fourteen links before its own <h1>. That is fixed with the
     `inert` ATTRIBUTE, set from the component's own script, not with CSS.

     visibility:hidden was tried first and is a trap here: transitioning
     visibility alongside transform leaves a visibility transition stuck in
     playState "running" at currentTime 0, and the transform transition then
     never runs at all — measured, the drawer simply stopped opening. `inert`
     removes the subtree from the tab order AND from assistive tech in one
     declaration, with no interaction with the animation at all. */
  transform:translateX(-101%);
  transition:transform .22s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 16px calc(28px + env(safe-area-inset-bottom));
}
.pt-drawer.open{ transform:translateX(0); }

.pt-drawer h4{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:20px 0 6px; font-weight:600;
}
.pt-drawer a, .pt-drawer button.pt-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 8px; color:var(--text); text-decoration:none; font-size:15px;
  border-bottom:1px solid var(--border); width:100%; background:none;
  border-left:0; border-right:0; border-top:0; font:inherit; cursor:pointer;
  text-align:left; min-height:44px;
}
.pt-drawer a:hover, .pt-drawer button.pt-link:hover{ color:var(--red); }
.pt-drawer .pt-m{ color:var(--muted); font-size:13px; }
.pt-dtop{ display:flex; align-items:center; justify-content:space-between; gap:10px;
          padding-bottom:10px; border-bottom:1px solid var(--border); }

.pt-menu{
  position:fixed; top:calc(var(--topbar-h) + 4px); right:20px; z-index:403;
  min-width:230px; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 12px 34px rgba(20,22,26,.14);
  padding:8px; display:none;
}
.pt-menu.open{ display:block; }
.pt-menu a{
  display:block; padding:10px; color:var(--text); text-decoration:none;
  font-size:14px; border-radius:5px; min-height:44px; line-height:24px;
  box-sizing:border-box;
}
.pt-menu a:hover, .pt-menu .pt-mbtn:hover{ background:var(--panel2); color:var(--red); }
.pt-menu .pt-mbtn{
  display:block; width:100%; text-align:left; padding:10px; color:var(--text);
  font:inherit; font-size:14px; background:none; border:0; border-radius:5px;
  min-height:44px; cursor:pointer; box-sizing:border-box;
}
.pt-menu .pt-mbtn[hidden]{ display:none; }
.pt-menu hr{ border:0; border-top:1px solid var(--border); margin:7px 2px; }
.pt-menu .pt-mh{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:6px 10px 3px; font-weight:600;
}
/* The language control keeps the class name and attributes the page scripts
   already bind to (`.lang button`, data-set / data-setlang), so the bar drops
   in without editing a single page script. That reuse has a sharp edge, and it
   drew blood: eight pages still carried the `.lang{position:fixed;top:14px;
   right:16px}` rule that used to position their own, now-deleted toggle. It
   captured the bar's switcher and pinned it over the header, on top of the
   CTA, while the account menu showed a "JEZIK" heading with nothing under it.
   Those rules are gone, and the chrome now states its own layout outright
   rather than relying on no page ever declaring these again. */
.pt-menu .lang{
  display:flex; gap:6px; padding:4px 8px 8px;
  position:static; top:auto; right:auto; left:auto; bottom:auto;
  z-index:auto; margin:0; width:auto;
}
.pt-menu .lang button{
  flex:1; min-height:40px; background:var(--panel2); border:1px solid var(--border);
  color:var(--text); border-radius:5px; font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:inherit; padding:0; margin:0; letter-spacing:normal;
  text-transform:none; line-height:1; box-shadow:none; opacity:1;
}
.pt-menu .lang button.on{ background:var(--red); border-color:var(--red); color:#fff; }

/* ---- phone ---- */
.pt-ctarow{ display:none; }
@media(max-width:820px){
  .pt-nav{ display:none; }
  .pt-burger{ display:inline-flex; }
  .pt-in{ padding:0 12px; gap:8px; }
  .pt-logo{ font-size:14px; margin:0 auto; }
  .pt-logo img{ height:26px; }
  .pt-right{ margin-left:0; }
  /* The CTA leaves the bar and takes a full-width row of its own — the
     recorded job-5 decision. More prominent on a phone, not less, and the
     two corners stay clean. */
  .pt-cta{ display:none; }
  .pt-ctarow{
    display:block; background:var(--panel); border-bottom:1px solid var(--border);
    padding:8px 12px; position:sticky; top:var(--topbar-h); z-index:399;
  }
  .pt-ctarow a{
    display:flex; align-items:center; justify-content:center; min-height:46px;
    background:var(--red); color:#fff; border-radius:6px; text-decoration:none;
    font-weight:600; font-size:14.5px;
  }
  .pt-menu{ right:8px; left:8px; min-width:0; }
}
@media(prefers-reduced-motion:reduce){
  .pt-drawer,.pt-scrim{ transition:none; }
}

/* Inline links inside body copy. These used to be written as
   style="color:#ff8a8c" on each anchor - a colour chosen against a dark card,
   which measures 2.13:1 on the light ground. One class, one place. */
a.u { color: var(--red); text-decoration: underline; }

/* The three single-card pages (/volontiraj, /dogadjaj/<id>, /potvrda-emaila).
   Their <body> used to BE the centring flexbox, which shrank the shared bar to
   a row item beside the card; it is now a column, and the card centres itself.
   The width rule lives here rather than in the page, because two of those
   shells are %-formatted Python strings where a literal 100% is read as a
   format spec and 500s the page. */
body > .box {
  margin: auto;
  max-width: 440px;
  width: calc(100% - 32px);
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ SEARCH
   Site-wide search overlay. These rules used to live in a <style id="srch-css">
   inside pages/welcome.html, which is why search worked on exactly one public
   route. The engine is brand/search.js and it builds the dialog itself, so no
   page carries the markup. */
.srch-scrim{position:fixed;inset:0;background:rgba(var(--ink-rgb),.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  z-index:9998;opacity:0;pointer-events:none;transition:opacity .18s}
.srch-scrim.on{opacity:1;pointer-events:auto}
.srch-modal{position:fixed;left:50%;top:60px;transform:translateX(-50%) translateY(-8px);
  width:min(680px,94vw);max-height:80vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;z-index:9999;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.18)}
.srch-modal.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.srch-modal *{box-sizing:border-box}
.srch-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.srch-head>svg{width:18px;height:18px;color:var(--muted);flex:none}
#srchInput{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);
  font-size:16px;font-family:inherit;line-height:1.4}
.srch-esc{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;padding:4px 7px;background:none;cursor:pointer;flex:none}
.srch-results{overflow-y:auto;padding:6px}
.srch-gh{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:12px 12px 6px}
.srch-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  cursor:pointer;text-decoration:none;color:var(--text);min-height:44px}
.srch-item.sel,.srch-item:hover{background:var(--panel2)}
.srch-item .si-ic{width:24px;height:24px;flex:none;display:grid;place-items:center;font-size:14px;
  color:var(--red);background:var(--bg);border:1px solid var(--line);border-radius:6px}
.srch-item .si-t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:40%}
.srch-item .si-d{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;min-width:0}
.srch-item .si-tag{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:3px 8px;flex:none}
.srch-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:14px}
.srch-foot{border-top:1px solid var(--line);padding:9px 14px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--muted)}
@media(max-width:720px){
  .srch-modal{top:12px;max-height:calc(100vh - 24px)}
  .srch-item .si-t{max-width:55%}
  .srch-item .si-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .srch-scrim,.srch-modal{transition:none}
}

/* the drawer's search row — the left icon owns all navigation, search included */
.pt-search{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 14px;
  padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  color:var(--muted);font-size:14px;font-family:inherit;line-height:1.5;
  cursor:pointer;text-align:left;min-height:44px;transition:border-color .15s,color .15s}
.pt-search:hover{border-color:var(--red);color:var(--text)}
.pt-search svg{width:16px;height:16px;flex:none}
.pt-search span{flex:1;min-width:0}
.pt-search kbd{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--muted);flex:none}
@media(max-width:820px){ .pt-search kbd{display:none} }