/* Application shell — single-column directory.
   One view ("Providers"): a hero with live stat chips over a grid of
   gradient tiles. The tile body opens the details modal; the large
   "Get API" button at the bottom goes straight to the sign-up page.
   Loads last; reuses design tokens from style.css / theme.css. */

/* theme-aware topbar tint (style.css gives the dark default) */
:root{ --bar-bg:rgba(7,11,20,.86); }
:root[data-theme="light"]{ --bar-bg:rgba(255,255,255,.86); }
.topbar{background:var(--bar-bg)}
.topbar-inner{max-width:1228px}

/* ---------- page ---------- */
.hub-main{max-width:1180px;margin:0 auto;padding:0 24px 64px}
.view[hidden]{display:none !important}

/* ---------- touch & mobile polish ---------- */
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
.api-card,.api-card-btn,.api-btn,.prov-signin,.prov-close,.stat-line{-webkit-tap-highlight-color:transparent}
.api-card-btn,.api-btn,.prov-signin,.prov-close{touch-action:manipulation}

/* ---------- hero: copy + floating glass logo band ----------
   Two columns on wide screens: the copy (tag, two-line title, lede and the
   live stat pills) beside a decorative band of staggered, frosted tiles that
   carry the providers' real logos. The band runs past the right edge (clipped
   by .hero) and is masked so it fades into the page bottom. */
.hero{
  --tile:96px; --tile-gap:12px; --dy-scale:1;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:36px;align-items:center;padding:48px 0 34px;overflow:hidden;
}
.hero-copy{max-width:560px}

.hero-tag{margin:0 0 14px;font:700 13px/1 var(--font-body);letter-spacing:.01em;color:var(--accent)}

.hero .view-title{display:block;margin:0 0 18px;color:var(--ink);text-wrap:balance;
  font:700 clamp(32px,4.7vw,50px)/1.07 var(--font-display);letter-spacing:-.04em}
.view-title-alt{display:block;color:var(--faint)}

.hero .view-lede{margin:0;max-width:47ch;text-wrap:pretty;font:400 15px/1.66 var(--font-body);color:var(--muted)}
.hero .view-lede strong{color:var(--ink);font-weight:600;font-family:var(--font-body)}

/* the live counts read as a divided stat line rather than badges — the tone
   lives on the number, the words stay quiet, and because it is a grid the
   hairlines stay aligned (no dangling rule) when the line wraps */
.stat-line{--stat-gap:26px;display:grid;grid-template-columns:repeat(3,max-content);
  row-gap:11px;list-style:none;margin:22px 0 0;padding:0}
.stat-line li{display:flex;align-items:baseline;gap:7px;white-space:nowrap;padding:0 var(--stat-gap);
  font:500 13px/1.1 var(--font-body);color:var(--muted)}
.stat-line li:nth-child(3n+1){padding-left:0}
.stat-line li:last-child{padding-right:0}
.stat-line li:nth-child(3n+2),.stat-line li:nth-child(3n){border-left:1px solid var(--line)}
.stat-line b{font:700 15px/1 var(--font-display);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-line li.green b{color:var(--green)}
.stat-line li.accent b{color:var(--accent)}
.stat-line li.violet b{color:var(--violet)}
.stat-line li.amber b{color:var(--amber)}
.stat-line li.muted b{color:var(--ink-dim)}

/* narrow desktops: the hero copy column no longer fits three stat columns,
   so drop to two (the hairlines below follow the 2-column rhythm) */
@media (max-width:1180px){
  .stat-line{--stat-gap:18px;grid-template-columns:repeat(2,max-content);row-gap:10px}
  .stat-line li:nth-child(3n+1){padding-left:var(--stat-gap)}
  .stat-line li:nth-child(odd){padding-left:0}
  .stat-line li:nth-child(3n+2),.stat-line li:nth-child(3n){border-left:0}
  .stat-line li:nth-child(even){border-left:1px solid var(--line)}
  .stat-line li:nth-child(2){padding-right:0}
}

.hero-stack{
  display:flex;gap:var(--tile-gap);align-items:flex-start;width:max-content;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,#000 16%,#000 66%,rgba(0,0,0,.2) 89%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,#000 16%,#000 66%,rgba(0,0,0,.2) 89%,rgba(0,0,0,0) 100%);
}
.hero-col{display:flex;flex-direction:column;gap:var(--tile-gap);margin-top:calc(var(--dy,0) * var(--dy-scale))}
.hero-tile{
  width:var(--tile);height:var(--tile);border-radius:24px;display:grid;place-items:center;
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 16px 32px rgba(0,0,0,.42);
}
.hero-tile img{display:block;width:54%;height:54%;object-fit:contain}
.hero-tile.is-blank{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);box-shadow:0 14px 28px rgba(0,0,0,.22)}
:root[data-theme="light"] .hero-tile{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);
  box-shadow:0 18px 34px rgba(22,40,80,.1),inset 0 1px 0 rgba(255,255,255,.9)}
:root[data-theme="light"] .hero-tile.is-blank{background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.66);box-shadow:0 14px 26px rgba(22,40,80,.06)}

/* ---------- card grid (gradient tiles) ---------- */
.api-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;list-style:none;margin:0;padding:0}

.api-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  border-radius:22px;padding:20px;color:#fff;min-height:212px;overflow:hidden;
  background:var(--card-blue);
  transition:transform .16s ease,box-shadow .18s ease;
}
.api-card.v--blue{background:var(--card-blue)}
.api-card.v--teal{background:var(--card-teal)}
.api-card.v--violet{background:var(--card-violet)}
.api-card.v--amber{background:var(--card-amber)}
.api-card.v--rose{background:var(--card-rose)}
.api-card.v--green{background:var(--card-green)}
.api-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(10,16,30,.26)}
/* reachable but flagged (restricted / login issue): dimmed a notch, never hidden */
.api-card.is-flagged{filter:saturate(.8)}
.api-card.is-off{filter:grayscale(.85);opacity:.62}
.api-card.is-off:hover{transform:none;box-shadow:none}

/* the whole top of the tile is the "open details" hit area */
.api-card-btn{
  display:flex;flex-direction:column;gap:12px;align-items:stretch;flex:1;
  width:100%;padding:0;text-align:left;background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;
}
.api-card-btn:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:12px}

.api-logo{
  width:46px;height:46px;flex:none;display:grid;place-items:center;padding:7px;
  border-radius:13px;background:rgba(255,255,255,.94);overflow:hidden;
  box-shadow:0 3px 10px rgba(10,16,30,.18);
}
.api-logo img{display:block;width:100%;height:100%;object-fit:contain}

.api-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font:700 17px/1.3 var(--font-display);letter-spacing:-.015em;color:#fff}
.api-chip{flex:none;font:800 9px/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.24);border-radius:999px;padding:4px 8px}
/* the status chip replaces the New chip on a flagged card, so it has to win
   against a saturated gradient: solid amber with dark ink */
.api-chip.is-warn{background:#ffd166;color:#3a2600}

/* the documented model IDs, listed under the provider name (no chips, no counts) */
.api-models{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;margin:0;padding:0;min-width:0}
.api-models li{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:500 11.5px/1.5 var(--font-mono);color:rgba(255,255,255,.92)}
.api-models li + li::before{content:'·';margin:0 8px;color:rgba(255,255,255,.5)}
.api-models li.more{font:italic 600 11.5px/1.5 var(--font-body);color:rgba(255,255,255,.72)}

.api-desc{margin:0;font:500 12.5px/1.55 var(--font-body);color:rgba(255,255,255,.92);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* why a flagged row is not live — a quiet inset strip on the tile */
.api-note{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  padding:8px 11px;border-radius:11px;background:rgba(6,10,20,.34);border:1px solid rgba(255,255,255,.3);
  font:600 11.5px/1.5 var(--font-body);color:#fff}
.api-meta{margin-top:auto;font:700 9.5px var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.82)}

.api-actions{display:flex;gap:10px;align-items:center}
.api-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:50px;padding:8px 20px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.96);color:#101a30;font:800 14px var(--font-body);
  text-decoration:none;transition:transform .12s ease,background .15s ease;
}
.api-btn:hover{background:#fff;transform:translateY(-1px)}
.api-btn svg{width:16px;height:16px}
.api-btn[aria-disabled="true"]{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.9);cursor:not-allowed}
.api-btn[aria-disabled="true"]:hover{transform:none}

/* ---------- provider details modal ----------
   Split card: a gradient hero carrying the provider's real logo, then the
   content column (name → blurb → facts) and a dark pill "Get API" at the
   very bottom. Only the content scrolls; the hero stays pinned to the top. */
body.modal-open{overflow:hidden}
.prov-veil{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  background:rgba(6,10,22,.64);backdrop-filter:blur(4px);overscroll-behavior:contain}
.prov-veil[hidden]{display:none !important}
.prov-card{position:relative;display:flex;flex-direction:column;padding:0;width:min(520px,100%);
  max-height:min(88vh,760px);max-height:min(88dvh,760px);overflow:hidden;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}

.prov-hero{display:grid;place-items:center;padding:44px 24px 34px;
  background:linear-gradient(180deg,rgba(77,201,255,.22) 0%,rgba(77,201,255,.07) 46%,var(--surface) 100%)}
:root[data-theme="light"] .prov-hero{background:linear-gradient(180deg,rgba(22,104,227,.19) 0%,rgba(22,104,227,.06) 46%,var(--surface) 100%)}
.prov-card.is-off .prov-hero{background:linear-gradient(180deg,rgba(126,140,166,.22) 0%,rgba(126,140,166,.06) 46%,var(--surface) 100%)}
.prov-card.is-flagged .prov-hero{background:linear-gradient(180deg,rgba(199,124,4,.2) 0%,rgba(199,124,4,.07) 46%,var(--surface) 100%)}
.prov-hero-logo{display:grid;place-items:center;width:104px;height:104px;padding:14px;border-radius:30px;
  background:var(--logo-tile);border:1px solid var(--line);box-shadow:0 18px 40px rgba(10,16,30,.18)}
.prov-hero-logo img{display:block;width:100%;height:100%;object-fit:contain}

/* only this column scrolls, so the hero and its close control stay put */
.prov-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:24px 26px 26px;padding-bottom:max(26px,env(safe-area-inset-bottom));
  scrollbar-width:none;-ms-overflow-style:none}
/* no visible scrollbar in the dialog: it would be the one piece of chrome
   that made a compact sheet feel cramped. Scrolling still works. */
.prov-body::-webkit-scrollbar{width:0;height:0}
.prov-card h2{font:800 24px/1.2 var(--font-display);letter-spacing:-.025em;color:var(--ink);margin:0 0 10px;text-align:left}
.prov-blurb{font:500 13.5px/1.65 var(--font-body);color:var(--muted);margin:0 0 12px;text-align:left}
.prov-kind{font:600 11px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.prov-kind.is-off{color:var(--red)}
.prov-kind.is-flagged{color:var(--amber)}
/* the plain-language reason a row is restricted / has a login issue */
.prov-notice{margin:0 0 18px;padding:11px 13px;border-radius:13px;border:1px solid var(--amber-line);background:var(--amber-soft);color:var(--amber);font:600 12.5px/1.5 var(--font-body)}
.prov-notice[hidden]{display:none}
.prov-credit{margin:0 0 18px;padding:12px 14px;border-radius:14px;border:1px solid var(--green-line);background:var(--green-soft);color:var(--green);font:600 12.5px/1.5 var(--font-body)}
.prov-credit[hidden]{display:none}
.prov-block{margin:0 0 18px}
.prov-block-title{margin:0 0 10px;font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.prov-models{display:flex;flex-wrap:wrap;gap:6px 8px}
.prov-models code{font:600 11px var(--font-mono);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--ink-dim);max-width:100%;overflow-wrap:anywhere}
.prov-models code.more{color:var(--muted);font-style:italic}
.prov-facts{margin:0;border-top:1px solid var(--line)}
.prov-facts div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font:500 12.5px var(--font-body)}
.prov-facts dt{flex:0 0 104px;color:var(--muted);font-weight:600}
.prov-facts dd{margin:0;color:var(--ink);min-width:0}
.prov-facts a{color:var(--accent);font-weight:600}

/* full-width dark pill — the last thing in the modal */
.prov-act{margin-top:24px}
.prov-signin{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:56px;padding:10px 24px;
  background:#0b1220;color:#fff;border:0;border-radius:999px;text-align:center;text-decoration:none;cursor:pointer;
  font:800 15px var(--font-body);box-shadow:0 12px 28px rgba(10,16,30,.3);transition:transform .12s ease,filter .15s ease}
:root[data-theme="dark"] .prov-signin{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 12px 28px rgba(0,0,0,.55)}
.prov-signin svg{width:18px;height:18px}
.prov-signin:hover{transform:translateY(-1px);filter:brightness(1.18)}
.prov-offline{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:8px 18px;
  color:var(--red);font:600 13px var(--font-body);border:1px dashed var(--line-strong);border-radius:999px}

/* ---------- provider onboarding guide (stacked over the details modal) ---------- */
.prov-guide{margin:16px 0 0}
.prov-guide[hidden]{display:none}
.prov-guide-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;padding:10px 18px;
  border:1px solid var(--accent-line);border-radius:14px;background:var(--accent-soft);color:var(--accent);
  font:800 13px var(--font-body);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.prov-guide-btn:hover{border-color:var(--accent)}
.prov-guide-btn svg{width:17px;height:17px}

.guide-veil{z-index:90}
.guide-card{width:min(560px,100%)}
.guide-card .prov-hero{padding:30px 24px 24px}
.guide-card .prov-hero-logo{width:88px;height:88px;padding:12px;border-radius:26px}
/* the steps scroll, the code + action stay put so the claim never hides below the fold */
.guide-body{display:flex;flex-direction:column;overflow:hidden}
.guide-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.guide-scroll::-webkit-scrollbar{width:0;height:0}
.guide-foot{position:relative;flex:0 0 auto;margin-top:2px;padding-top:12px;border-top:1px solid var(--line)}
/* soft cue that the step list continues behind the pinned code + action */
.guide-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--surface))}
.guide-kicker{margin:0 0 6px;font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.guide-intro{margin:0 0 12px;font:500 13.5px/1.65 var(--font-body);color:var(--muted);text-align:left}
.guide-window{margin:0 0 16px;padding:11px 13px;border-radius:13px;border:1px solid var(--amber-line);
  background:var(--amber-soft);color:var(--amber);font:600 12.5px/1.5 var(--font-body)}
.guide-steps{list-style:none;counter-reset:step;display:grid;gap:8px;margin:0 0 16px;padding:0}
.guide-steps li{counter-increment:step;position:relative;padding:11px 13px 11px 42px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface-2);font:500 12.5px/1.55 var(--font-body);color:var(--ink)}
.guide-steps li::before{content:counter(step);position:absolute;top:11px;left:12px;display:grid;place-items:center;
  width:20px;height:20px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent);font:700 10px var(--font-mono)}
.guide-steps a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.guide-code{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 6px;
  padding:12px 14px;border:1px dashed var(--accent-line);border-radius:16px;background:var(--surface-2)}
.guide-code-label{font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.guide-code-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer}
.guide-code-btn:hover{border-color:var(--accent)}
.guide-code-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.guide-code-btn code{font:700 15px var(--font-mono);letter-spacing:.16em}
.guide-code-btn span{font:700 11px var(--font-body);color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.guide-copied{margin:0 0 10px;min-height:16px;font:600 11.5px var(--font-body);color:var(--green)}
.guide-act{margin-top:8px}

/* small translucent close control floating in the hero corner (44px target) */
.prov-close{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:999px;
  background:rgba(9,14,26,.45);color:#fff;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:background .15s ease}
.prov-close:hover{background:rgba(9,14,26,.7)}
.prov-close:focus-visible{outline:2px solid rgba(255,255,255,.92);outline-offset:2px}
.prov-close svg{width:18px;height:18px}

/* ---------- responsive ---------- */
@media (min-width:901px){
  /* the band bleeds one column past the container edge */
  .hero-col:nth-child(n+8){display:none}
}
@media (max-width:1200px){
  .hero{--tile:84px}
}
@media (max-width:1080px){
  .hero{--tile:74px;--tile-gap:10px;gap:28px}
}
@media (max-width:900px){
  .hub-main{padding:0 18px 48px}
  .hero{grid-template-columns:minmax(0,1fr);gap:26px;padding:34px 0 24px;--tile:78px;--tile-gap:11px;--dy-scale:.5}
  .hero-copy{max-width:none}
  /* keep the band to two rows here so the cards stay close */
  .hero-col{max-height:calc(var(--tile) * 2 + var(--tile-gap));overflow:hidden}
}
/* index has no hamburger panel — keep the theme toggle reachable on phones */
@media (max-width:820px){
  .page-list .topbar-cta{display:inline-flex;margin-left:auto}
}
/* details modal becomes a bottom sheet once the dialog no longer fits;
   everything tightens so a typical provider fits without scrolling */
@media (max-width:640px){
  .prov-veil{padding:0;place-items:end stretch}
  .prov-card{width:100%;max-height:94dvh;border-radius:22px 22px 0 0;border-bottom:0}
  .prov-hero{padding:20px 18px 14px}
  .prov-hero-logo{width:72px;height:72px;padding:11px;border-radius:22px}
  .prov-body{padding:16px 16px 22px;padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .prov-card h2{font-size:19px;margin-bottom:7px}
  /* the blurb is a summary, not the guide: two lines are enough on a phone */
  .prov-blurb{font-size:12.5px;line-height:1.55;margin-bottom:9px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prov-kind{margin-bottom:13px}
  .prov-notice,.prov-credit{margin-bottom:13px;padding:10px 12px}
  .prov-block{margin-bottom:13px}
  .prov-block-title{margin-bottom:7px}
  .prov-models{gap:5px 6px}
  .prov-models code{padding:3px 9px}
  .prov-facts div{gap:10px;padding:6px 0}
  .prov-facts dt{flex:0 0 88px}
  .prov-facts dd{overflow-wrap:anywhere}
  .prov-act{margin-top:16px}
  .prov-signin,.prov-offline{min-height:50px}
  .guide-intro{font-size:12.5px;line-height:1.55}
  .guide-steps li{padding:9px 11px 9px 38px;font-size:12px}
  .guide-steps li::before{top:9px;left:10px;width:19px;height:19px}
  .guide-code{padding:10px 12px}
  .guide-code-btn{min-height:44px}
}
/* compact band: one crisp row of tiles, no stagger, fading off the right edge */
@media (max-width:640px){
  .hero{--tile:58px;--tile-gap:9px;--dy-scale:0;gap:22px;padding:26px 0 18px}
  .hero-col{max-height:var(--tile)}
  .hero-stack{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,0) 100%);
  }
  .hero-tile{border-radius:18px}
}
@media (max-width:560px){
  .page-list .topbar-cta span{display:none}
  .page-list .topbar-cta{padding:8px 12px}
  .hub-main{padding:0 16px 44px}
  .hero-tag{margin-bottom:10px;font-size:12px}
  .hero .view-title{margin-bottom:12px}
  .hero .view-lede{font-size:14.5px}

  .stat-line{--stat-gap:18px;row-gap:9px}
  .stat-line li{font-size:12.5px}

  .api-grid{grid-template-columns:1fr;gap:12px}
  .api-card{min-height:0;padding:18px;border-radius:20px}
}
@media (max-width:380px){
  .hub-main{padding:0 14px 40px}
  .hero{--tile:52px;--tile-gap:8px;padding:22px 0 16px}
  .hero .view-title{font-size:29px}
  .hero .view-lede{font-size:14px}
  .stat-line{--stat-gap:13px}
  .stat-line li{font-size:11.5px}
  .stat-line b{font-size:14px}
  .api-card{padding:16px}
}
/* short viewports (small phones held upright, any landscape phone): spend the
   scarce height on content instead of padding, so the common providers still
   fit whole and the action stays above the fold */
@media (max-height:700px){
  .prov-card{max-height:min(94dvh,760px)}
  .prov-hero{padding:16px 18px 12px}
  .prov-hero-logo{width:60px;height:60px;padding:8px;border-radius:19px}
  .prov-body{padding:14px 18px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .prov-card h2{font-size:18px;margin-bottom:6px}
  .prov-blurb{font-size:12.5px;line-height:1.5;margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prov-kind{margin-bottom:11px}
  .prov-notice,.prov-credit{margin-bottom:11px;padding:9px 11px}
  .prov-block{margin-bottom:11px}
  .prov-block-title{margin-bottom:6px}
  .prov-models{gap:5px 6px}
  .prov-models code{padding:3px 9px}
  .prov-facts div{gap:10px;padding:6px 0}
  .prov-facts dt{flex:0 0 84px}
  /* the kind line above already states the route and the kind */
  .prov-facts div.is-redundant{display:none}
  .prov-act{margin-top:12px}
  .prov-signin,.prov-offline{min-height:46px}
  .prov-guide{margin-top:12px}
  .guide-window{margin-bottom:12px;padding:9px 11px}
  .guide-steps{gap:6px;margin-bottom:12px}
  .guide-steps li{padding:8px 10px 8px 36px}
  .guide-steps li::before{top:8px}
  .guide-card .prov-hero{padding:14px 18px 10px}
  .guide-card .prov-hero-logo{width:54px;height:54px;padding:7px;border-radius:18px}
  .guide-foot{padding-top:9px}
  .guide-code{padding:8px 11px}
  .guide-copied{min-height:14px;margin-bottom:6px}
}
/* short, landscape phones: keep the dialog usable instead of a squashed sheet */
@media (max-height:560px) and (orientation:landscape){
  .prov-veil{place-items:center stretch;padding:10px calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left))}
  .prov-card{max-height:100%;width:min(760px,100%);border-radius:22px;border-bottom:1px solid var(--line)}
  .prov-hero{padding:14px 20px 10px}
  .prov-hero-logo{width:48px;height:48px;padding:6px;border-radius:14px}
  .prov-body{padding:14px 20px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  /* landscape phones have no height to spare: the guide drops the logo band
     and puts the code + action beside the steps instead of under them */
  .guide-card .prov-hero{display:none}
  .guide-card .guide-body{flex-direction:row;gap:18px}
  .guide-card .guide-scroll{flex:1 1 auto}
  .guide-card .guide-foot{flex:0 0 250px;margin:0;padding:0 0 0 18px;
    border-top:0;border-left:1px solid var(--line)}
  .guide-card .guide-foot::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .api-card,.api-card-btn,.api-btn,.prov-signin,.prov-close,.prov-guide-btn{transition:none}
}

/* ---------- model search + grouped grid ----------
   One quiet field above the grid; sections are separated by a small
   uppercase kicker so the curated rows read as part of the same list. */
.prov-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:2px 0 24px}
.prov-search{
  position:relative;display:flex;align-items:center;gap:10px;
  flex:1 1 320px;max-width:460px;min-height:48px;
  padding:0 4px 0 14px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);transition:border-color .18s ease,box-shadow .18s ease;
}
.prov-search:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.prov-search > i{flex:none;width:17px;height:17px;color:var(--ink-dim)}
.prov-search input{
  flex:1;min-width:0;height:46px;border:0;padding:0;background:transparent;
  color:var(--ink);font:500 15px/1.2 var(--font-body);outline:none;appearance:none;
}
.prov-search input::placeholder{color:var(--ink-dim);opacity:.75}
.prov-search input::-webkit-search-cancel-button,
.prov-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.prov-search-clear{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:11px;background:transparent;
  color:var(--ink-dim);cursor:pointer;touch-action:manipulation;
}
.prov-search-clear:hover{background:var(--surface-2);color:var(--ink)}
.prov-search-clear[hidden]{display:none}
.prov-search-clear i{width:16px;height:16px}
.prov-search-meta{margin:0;font:500 12.5px/1.4 var(--font-body);color:var(--ink-dim)}
.prov-section + .prov-section{margin-top:30px}
.prov-section-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.prov-section-title{
  margin:0;font:700 11.5px/1 var(--font-body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
}
.prov-section-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;
  padding:0 6px;border:1px solid var(--line);border-radius:999px;
  font:600 11px/1 var(--font-mono);color:var(--ink-dim);
}
.prov-empty{
  margin:4px 0 0;padding:30px 22px;border:1px dashed var(--line-strong);
  border-radius:18px;text-align:center;background:var(--surface);
}
.prov-empty p{margin:0 0 8px;color:var(--ink-dim);font-size:14px}
.prov-empty p strong{color:var(--ink)}
.prov-empty-clear{
  margin-top:6px;min-height:44px;padding:0 18px;border:1px solid var(--line-strong);
  border-radius:12px;background:transparent;color:var(--ink);
  font:600 13.5px/1 var(--font-body);cursor:pointer;touch-action:manipulation;
}
.prov-empty-clear:hover{border-color:var(--accent-line);color:var(--accent)}

@media (max-width:640px){
  .prov-tools{gap:10px;margin-bottom:20px}
  .prov-search{flex:1 1 100%;max-width:none}
  .prov-search-meta{flex:1 1 100%}
  .prov-search input{font-size:16px} /* keeps iOS from zooming the page */
  .prov-section + .prov-section{margin-top:24px}
  .prov-section-head{margin-bottom:10px}
}