/* The public bot catalog — the bot page and the bot window over the catalog (modules/public_catalog.py document_bot,
   catalog-public.next.js). Loaded after landing.css, which keeps the list pages, the cards (.wc/.wv), the ad slot (.cad),
   the charts (.ct-chart/.ct-hb/.ct-stack/.ct-donut) and the window frame (.ctm); this file styles the .cb-* parts only and
   adjusts the window. Same ground as the catalog (body.ct tokens --c0..--c3, --ink..--ink3): surfaces by lightness, no
   outlines; gold = prices, green = growth, white = the action.
   Desktop (≥1024): the key block (who · price · audience · growth · whole base · ads accepted · order), then two columns —
   the ad slot, growth and audience | the calculator and the description (sticky). Phones (≤720): one column in the order
   of importance, the order bar fixed at the bottom. */

.cb-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- the key block ---- */
body.ct .cb{padding:22px 0 0}
.cb__in{display:grid;gap:18px;min-width:0}
.cb-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ava id acts";column-gap:22px;align-items:center;min-width:0}
.cb-ava{grid-area:ava;display:grid;place-items:center;width:88px;height:88px;border-radius:24px;overflow:hidden;background:var(--c2);color:var(--ink2)}
.cb-ava img{width:100%;height:100%;object-fit:cover}
.cb-ava>b{font-size:34px;font-weight:700}
.cb-id{grid-area:id;min-width:0}
body.ct .cb-id h1{margin:0;font-size:clamp(28px,2.7vw,40px);line-height:1.08;letter-spacing:-.034em;color:var(--ink);text-wrap:balance;word-break:break-word}
.cb-vip{display:inline-block;margin-left:10px;padding:4px 8px;border-radius:8px;background:var(--accent);color:#000;font-size:12px;font-weight:800;font-style:normal;letter-spacing:.04em;vertical-align:.38em;line-height:1}
.cb-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin:10px 0 0;font-size:15px;line-height:1.4;color:var(--ink2);overflow-x:clip}
.cb-sub>*{position:relative}
.cb-sub>*+*:before{content:"";position:absolute;left:-14px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#45454a}
.cb-sub a{padding:10px 0;margin:-10px 0;color:var(--ink);font-weight:600;transition:color .15s}
.cb-sub a:hover{color:var(--accent)}
.cb-sub .ct-stars{margin-right:4px}
.cb-acts{grid-area:acts;display:flex;align-items:center;gap:10px}
body.ct .cb-order{gap:14px;min-height:54px;margin:0;padding:0 18px 0 22px;border-radius:15px}
body.ct .cb-order b{margin:0;font-size:15px;font-weight:700;white-space:nowrap}
body.ct .cb-order svg{flex:none}
.cb-tg{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:15px;background:var(--c2);color:var(--ink);transition:background .15s}
.cb-tg:hover{background:var(--c3)}
.cb-tg svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.cb-tg span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* four figures in one surface, the growth ones with their charts */
.cb-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 32px;margin:4px 0 0;padding:22px 28px 22px;border-radius:24px;background:var(--c1)}
.cb-fig{display:flex;flex-direction:column;min-width:0}
.cb-fig dt{order:0;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-v{order:1;display:flex;align-items:flex-end;gap:12px;min-height:40px;margin:8px 0 0}
.cb-v>b{flex:none;font-size:clamp(26px,2.3vw,34px);font-weight:700;line-height:1;letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.cb-v>svg{flex:1 1 auto;min-width:48px;max-width:116px;height:32px;margin:0 0 2px auto}
.cb-s{order:2;margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--ink3)}
.cb-fig.is-money .cb-v>b{color:var(--accent)}
.cb-fig.is-up .cb-v>b{color:var(--pos)}

/* what the bot accepts */
.cb-acc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
body.ct .cb-acc h2{margin:0;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--ink3)}
.cb-acc ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cb-acc li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border-radius:999px;background:var(--c1);font-size:14px;font-weight:600;line-height:1.2;color:var(--ink)}
.cb-acc li svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6}
.cb-acc li.is-yes svg{color:var(--pos)}
.cb-acc li.is-no{color:var(--ink3)}
.cb-acc li.is-no span:not(.cb-sr){text-decoration:line-through;text-decoration-color:rgba(142,142,148,.55);text-decoration-thickness:1.5px}
.cb-acc li.is-info{color:var(--ink2);font-weight:500}
.cb-acc li.is-info i{flex:none;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--ink3)}

/* ---- the body: the ad, growth and audience | calculator and description ---- */
.cb-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start;padding:30px 0 8px}
.cb-main{container:cbmain/inline-size;display:grid;gap:40px;min-width:0}
.cb-ad{container-type:inline-size;min-width:0}
.cb-rail{position:sticky;top:88px;display:grid;gap:16px;min-width:0}
html.hd-hidden .cb-rail{top:24px}
body.ct .cb-sec h2,body.ct .cb-calc h2,body.ct .cb-desc h2{margin:0 0 14px;font-size:22px;line-height:1.2;letter-spacing:-.022em;color:var(--ink)}
.cb-charts{display:grid;gap:14px}
@container cbmain (min-width:760px){.cb-charts{grid-template-columns:1fr 1fr}}
.cb-chart{margin:0;padding:20px 22px 16px;border-radius:22px;background:var(--c1);min-width:0}
.cb-chart figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;font-size:14px;font-weight:600;color:var(--ink)}
.cb-chart figcaption em{font-size:13px;font-weight:600;font-style:normal;color:var(--ink3);font-variant-numeric:tabular-nums}
.cb-chart figcaption em.is-up{color:var(--pos)}
body.ct .cb-chart .ct-chart{margin-top:10px}

.cb-aud__grid{display:grid;gap:28px;padding:22px 24px;border-radius:22px;background:var(--c1)}
@container cbmain (min-width:600px){
  .cb-aud__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:40px}
  .cb-aud__geo{grid-row:span 2}
}
body.ct .cb-aud h3{margin:0 0 2px;font-size:14px;font-weight:600;color:var(--ink)}
body.ct .cb-aud .ct-hb{margin-top:12px}
body.ct .cb-aud .ct-stack__bar{margin-top:14px}
body.ct .cb-aud .ct-stack__lg{margin-top:14px;gap:10px}
.cb-aud__share{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;justify-items:center;text-align:center}
body.ct .cb-aud__share .ct-donut{align-content:start}
body.ct .cb-aud__share .ct-ring{width:96px;height:96px}
body.ct .cb-aud__share .ct-ring b{font-size:20px}
.cb-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ink3)}

.cb-calc{padding:22px 22px 20px;border-radius:22px;background:var(--c1)}
body.ct .cb-calc h2{font-size:17px;margin-bottom:12px}
.cb-calc__f{display:flex;align-items:center;gap:12px;height:54px;padding:0 16px;border-radius:15px;background:var(--c2);transition:box-shadow .15s}
.cb-calc__f:focus-within{box-shadow:0 0 0 2px rgba(242,201,76,.7)}
.cb-calc__f span{font-size:13px;font-weight:600;color:var(--ink3)}
.cb-calc__f input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:700 20px var(--font);text-align:right;outline:none;-moz-appearance:textfield}
.cb-calc__f input::-webkit-inner-spin-button,.cb-calc__f input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cb-calc__p{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cb-calc__p button{flex:1 1 auto;min-height:38px;padding:0 12px;border:0;border-radius:11px;background:var(--c2);color:var(--ink);font:600 13px var(--font);cursor:pointer;transition:background .15s}
.cb-calc__p button:hover{background:var(--c3)}
.cb-calc__p button:focus-visible,.cb-tg:focus-visible,.cb-sub a:focus-visible{outline:2px solid rgba(242,201,76,.8);outline-offset:2px}
.cb-calc__r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:18px}
.cb-calc__r small{font-size:13px;color:var(--ink2)}
.cb-calc__r b{font-size:32px;font-weight:700;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-calc .cb-note{margin-top:10px}

.cb-desc{padding:4px 4px 0}
body.ct .cb-desc h2{font-size:17px;margin-bottom:8px}
.cb-desc p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink2);white-space:pre-line;word-break:break-word}

body.ct .cb-rev{padding-top:40px}
.cb-bar{display:none}

/* ---- the window over the catalog (desktop) ---- */
.ctm__box{width:min(1100px,100%);background:var(--c0,#09090a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 120px rgba(0,0,0,.7)}
.ctm__tools{position:absolute;top:16px;right:16px;z-index:5;display:flex;align-items:center;gap:8px}
.ctm__tools .ctm__x{position:static;width:42px;height:42px;background:var(--c2,#18181b)}
.ctm__tools .ctm__x:hover{background:var(--c3,#232327)}
.ctm__open{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px 0 16px;border-radius:999px;background:var(--c2,#18181b);color:var(--ink2,#b0b0b6);font-size:13.5px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.ctm__open:hover{background:var(--c3,#232327);color:var(--ink,#f5f5f7)}
.ctm__open svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.ctm__open:focus-visible,.ctm__tools .ctm__x:focus-visible{outline:2px solid rgba(242,201,76,.8);outline-offset:2px}
.ctm__body{padding:0 0 32px}
.ctm__body .cb{padding-top:28px}
.ctm__body .cb-head{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ava id" "ava acts";row-gap:16px;align-items:start;padding-right:230px}
.ctm__body .cb-ava{width:84px;height:84px;border-radius:23px}
body.ct .ctm__body .cb-id h1{font-size:32px}
.ctm__body .cb-id{align-self:center}
.ctm__body .cb-head:has(.cb-acts) .cb-id{align-self:end}
.ctm__body .cb-acts{align-self:start}
body.ct .ctm__body .cb-order,.ctm__body .cb-tg{min-height:48px;height:48px}
.ctm__body .cb-tg{width:48px}
.ctm__body .cb-figs{gap:16px 26px;padding:20px 24px}
.ctm__body .cb-v>b{font-size:30px}
.ctm__body .cb-body{grid-template-columns:minmax(0,1fr) 330px;gap:28px;padding-top:26px}
.ctm__body .cb-main{gap:32px}
.ctm__body .cb-rail{top:72px}
.ctm__body .lp-sec{padding:28px 0 0}
.ctm__body .cb-rev h2{font-size:22px}
/* the first look while the page loads: the card's picture and name, the figures as placeholders */
.cb.is-first .cb-figs.is-first{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0;background:none}
.cb.is-first .cb-figs.is-first i{display:block;height:104px;border-radius:18px;background:var(--c1);animation:ctmPulse 1.2s ease-in-out infinite}
.cb.is-first+.ctm__load{padding-top:24px}
.ctm__body .cb.is-first .cb-head{grid-template-areas:"ava id"}

/* ---- tablets: one column, the rail after the main column ---- */
@media (max-width:1060px){
  .cb-body{grid-template-columns:minmax(0,1fr);gap:36px}
  .cb-rail{position:static;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
}
@media (max-width:900px){
  .cb-head{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ava id" "acts acts";row-gap:18px}
  .cb-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
}

/* ---- phones: one column in the order of importance; the order bar is always at the bottom ---- */
@media (max-width:720px){
  body.ct .cb{padding-top:14px}
  .cb__in{gap:14px}
  .cb-head{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ava id acts";column-gap:14px;row-gap:0;align-items:start}
  .cb-ava{width:60px;height:60px;border-radius:18px}
  .cb-ava>b{font-size:24px}
  body.ct .cb-id h1{font-size:23px;line-height:1.14;letter-spacing:-.028em}
  .cb-vip{margin-left:8px;padding:3px 7px;font-size:11px;vertical-align:.25em}
  .cb-sub{gap:4px 20px;margin-top:6px;font-size:13.5px}
  .cb-sub>*+*:before{left:-12px}
  .cb-acts{align-self:start}
  body.ct .cb-order{display:none}
  .cb-tg{width:44px;height:44px;border-radius:13px}
  .cb-tg svg{width:19px;height:19px}
  .cb-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;margin:2px 0 0;padding:16px 18px 18px;border-radius:22px}
  .cb-fig dt{font-size:12.5px;white-space:normal}
  .cb-fig.is-aud .cb-s{display:none}
  .cb-v{flex-wrap:wrap;gap:8px;min-height:0;margin-top:6px}
  .cb-v>b{font-size:23px;letter-spacing:-.03em}
  .cb-v>svg{flex:0 0 100%;max-width:132px;height:24px;margin:2px 0 0}
  .cb-s{margin-top:6px;font-size:12px;line-height:1.35}
  .cb-acc{gap:8px}
  body.ct .cb-acc h2{flex:0 0 100%;font-size:12.5px}
  .cb-acc ul{gap:6px}
  .cb-acc li{min-height:34px;padding:0 12px 0 10px;font-size:13px}
  .cb-acc li svg{width:15px;height:15px}
  /* main and rail dissolve into one list: ad, description, growth, audience, calculator */
  .cb-body{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-top:24px}
  .cb-main,.cb-rail{display:contents}
  .cb-ad{order:1}
  .cb-desc{order:2;padding:0}
  .cb-growth{order:3}
  .cb-aud{order:4}
  .cb-calc{order:5}
  body.ct .cb-sec h2,body.ct .cb-calc h2,body.ct .cb-desc h2{font-size:20px;margin-bottom:12px}
  body.ct .cb-desc h2{font-size:17px;margin-bottom:6px}
  .cb-desc p{font-size:14.5px}
  .cb-charts{gap:10px}
  .cb-chart{padding:16px 16px 12px;border-radius:20px}
  .cb-chart figcaption{font-size:13.5px}
  .cb-aud__grid{gap:24px;padding:18px;border-radius:20px}
  .cb-aud__share{gap:10px}
  body.ct .cb-aud__share .ct-ring{width:84px;height:84px}
  body.ct .cb-aud__share .ct-ring b{font-size:17px}
  .cb-calc{padding:18px;border-radius:20px}
  .cb-calc__r b{font-size:28px}
  body.ct .cb-rev{padding-top:32px}
  body.ct main:has(.cb-bar){padding-bottom:88px}
  body.ct:has(.cb-bar) .ft{padding-bottom:84px}
  .cb-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:20px;
    background:#1a1a1d;box-shadow:0 18px 40px -8px rgba(0,0,0,.75),0 2px 10px rgba(0,0,0,.45)}
  .cb-bar>div{flex:1;min-width:0}
  .cb-bar>div b{display:block;font-size:17px;font-weight:700;line-height:1.2;color:var(--accent)}
  .cb-bar>div small{display:block;font-size:12px;line-height:1.3;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.ct .cb-bar .cta{flex:none;gap:10px;min-height:48px;margin:0;padding:0 14px 0 18px;width:auto;border-radius:14px}
  body.ct .cb-bar .cta b{margin:0;font-size:15px;font-weight:700;color:#000;white-space:nowrap}
  body.ct .cb-bar .cta svg{color:rgba(0,0,0,.55)}
}
@media (max-width:360px){
  .cb-figs{padding:14px 14px 16px;column-gap:12px}
  .cb-v>b{font-size:20px}
  body.ct .cb-bar .cta{padding:0 12px 0 14px}
  body.ct .cb-bar .cta svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cb.is-first .cb-figs.is-first i{animation:none}
}

/* one system (DESIGN-SYSTEM.md): the main action is gold everywhere — no white buttons in the catalog */
body.ct .cta--primary,body.ct .cad__btn,body.ct .cx-search button,body.ct .cad__s--house .cad__btn,body.ct .ct-owner .cta--primary{background:var(--accent,#f2c94c);color:#111}
body.ct .cta--primary:hover,body.ct .cad__btn:hover,body.ct .cx-search button:hover,body.ct .cad__s--house .cad__btn:hover,body.ct .ct-owner .cta--primary:hover{background:var(--accent-hi,#ffd866)}