/* ===================================================================== PKCasino Guide — "Pakistan App Field Guide" design system Plain CSS, no build step. Light theme is the default on every visit; dark theme only applies when is set by the user's explicit choice (see assets/app.js). Never via prefers-color-scheme. ===================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* colour — light (default) */ --paper:#FBF8F2; /* page ground, warm off-white */ --paper-2:#F3EEE4; /* recessed surfaces */ --card:#FFFFFF; /* raised surfaces */ --line:#E2DACB; /* hairlines */ --line-strong:#C9BEA9; --ink:#151F38; /* deep navy text */ --ink-2:#3C4763; /* secondary text */ --ink-3:#5B657F; /* tertiary / labels (≥5:1 on paper-2) */ --emerald:#0B6E52; /* trust accent, AA on paper */ --emerald-ink:#075039; --emerald-soft:#DDF0E7; --saffron:#D8901E; /* decorative accent only */ --saffron-ink:#7A4E07; /* saffron text (AA) */ --saffron-soft:#FBEFD8; --danger-ink:#9A2F22; --danger-soft:#F9E3DF; --focus:#1D5BD6; /* type */ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Nastaliq Urdu",sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --fs-0:.75rem; --fs-1:.875rem; --fs-2:1rem; --fs-3:1.125rem; --fs-4:1.375rem; --fs-5:1.75rem; --fs-6:2.25rem; --fs-7:2.75rem; --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.6; /* space */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; /* shape / elevation */ --r-1:4px; --r-2:8px; --r-3:12px; --shadow-1:0 1px 2px rgba(21,31,56,.06); --shadow-2:0 8px 24px -12px rgba(21,31,56,.22); /* layout */ --wrap:1180px; --wrap-narrow:780px; --gutter:clamp(1rem,4vw,2rem); --hdr-h:60px; --touch:44px; /* motion */ --ease:cubic-bezier(.2,.7,.2,1); --dur:160ms; color-scheme:light; } :root[data-theme="dark"]{ --paper:#0F1420; --paper-2:#151C2C; --card:#1A2234; --line:#2A3448; --line-strong:#3C4A64; --ink:#ECEFF6; --ink-2:#B9C1D3; --ink-3:#8E98AF; --emerald:#4FC79B; --emerald-ink:#7FDBB8; --emerald-soft:#153A31; --saffron:#E8B25B; --saffron-ink:#F1C77E; --saffron-soft:#3A2C13; --danger-ink:#F09A8C; --danger-soft:#3E1F1B; --focus:#8AB4FF; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px -12px rgba(0,0,0,.6); color-scheme:dark; } /* ---------- 2. Reset & base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px)} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-2);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden} :root[dir="rtl"] body{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Segoe UI",Tahoma,Arial,sans-serif;line-height:1.9} :root[dir="rtl"] h1,:root[dir="rtl"] h2,:root[dir="rtl"] h3{line-height:1.5} img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--emerald);text-underline-offset:.15em} a:hover{color:var(--emerald-ink)} h1,h2,h3,h4{margin:0 0 var(--s-3);line-height:var(--lh-snug);font-weight:800;letter-spacing:-.01em;text-wrap:balance;color:var(--ink)} h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem);line-height:var(--lh-tight)} h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem)} h3{font-size:var(--fs-3)} p{margin:0 0 var(--s-4)} ul,ol{margin:0 0 var(--s-4);padding-inline-start:1.25rem} table{border-collapse:collapse;width:100%} button,input,select{font:inherit;color:inherit} button{cursor:pointer} hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0} :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-1)} [hidden]{display:none!important} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} body.is-locked{overflow:hidden} /* ---------- 3. Layout ---------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .wrap--narrow{max-width:var(--wrap-narrow)} .section{padding-block:clamp(2rem,5vw,3.5rem)} .section--tight{padding-block:var(--s-6)} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5);padding-bottom:var(--s-3);border-bottom:2px solid var(--ink)} .section-head h2{margin:0} .section-head .more{font-weight:700;font-size:var(--fs-1);white-space:nowrap} .grid{display:grid;gap:var(--s-4)} .grid--cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .skip{position:absolute;inset-inline-start:var(--s-3);top:-100px;z-index:200;background:var(--ink);color:var(--paper);padding:var(--s-2) var(--s-4);border-radius:var(--r-2);font-weight:700} .skip:focus{top:var(--s-3)} /* ---------- 4. Field-guide motifs ---------- */ .idx{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:inline;line-height:1.6} .idx::before{content:"";display:inline-block;vertical-align:middle;width:1.25em;height:1px;background:var(--saffron);margin-inline-end:.5em} .idx--plain::before{display:none} .eyebrow{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--emerald);font-weight:600} .rule{border:0;border-top:1px solid var(--line);margin:var(--s-5) 0} .rule--strong{border-top:2px solid var(--ink)} .lined{background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 2rem;background-position:0 1rem} .chip{display:inline-flex;align-items:center;gap:.35em;padding:.2em .6em;border:1px solid var(--line-strong);border-radius:var(--r-1);font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.02em;color:var(--ink-2);background:var(--card);white-space:nowrap} .chip--ok{border-color:var(--emerald);color:var(--emerald-ink);background:var(--emerald-soft)} .chip--warn{border-color:var(--saffron);color:var(--saffron-ink);background:var(--saffron-soft)} .chip--muted{color:var(--ink-3);background:var(--paper-2)} .chips{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0;margin:0 0 var(--s-4);list-style:none} .tag{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-ink);background:var(--emerald-soft);padding:.15em .5em;border-radius:var(--r-1)} /* ---------- 5. Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--touch);min-width:0;padding:.6em 1.1em;border-radius:var(--r-2);border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none;text-align:center;line-height:1.2;overflow-wrap:anywhere;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)} .btn:hover{background:var(--emerald-ink);border-color:var(--emerald-ink);color:#fff} .btn:active{transform:translateY(1px)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn--ghost:hover{background:var(--paper-2);color:var(--ink);border-color:var(--ink)} .btn--accent{background:var(--emerald);border-color:var(--emerald);color:#fff} .btn--accent:hover{background:var(--emerald-ink)} .btn--sm{min-height:36px;padding:.35em .8em;font-size:var(--fs-1)} .btn--full{width:100%} .btn .ext{font-size:.85em;opacity:.8} :root[data-theme="dark"] .btn{color:var(--paper)} :root[data-theme="dark"] .btn--ghost{color:var(--ink)} :root[data-theme="dark"] .btn--accent{color:#0F1420} :root[data-theme="dark"] .btn--accent:hover{color:#0F1420;background:var(--emerald-ink)} /* ---------- 6. Header ---------- */ .hdr{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line)} .hdr__row{display:flex;align-items:center;gap:var(--s-3);min-height:var(--hdr-h)} .brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;min-height:var(--touch)} .brand__mark{width:30px;height:30px;flex:0 0 auto} .brand__name{font-weight:900;letter-spacing:-.02em;font-size:1.05rem;line-height:1;white-space:nowrap} .brand__name em{font-style:normal;color:var(--emerald)} .brand__tag{display:none;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-inline-start:1px solid var(--line-strong);padding-inline-start:.6rem;white-space:nowrap} .nav{margin-inline-start:var(--s-4)} .nav ul{display:flex;gap:.25rem;margin:0;padding:0;list-style:none} .nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 .7rem;border-radius:var(--r-2);color:var(--ink-2);font-weight:600;text-decoration:none;font-size:var(--fs-1)} .nav a:hover{background:var(--paper-2);color:var(--ink)} .nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--saffron)} .hdr__tools{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-1)} .tool{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-width:var(--touch);min-height:40px;padding:0 .6rem;border:1px solid transparent;border-radius:var(--r-2);background:transparent;color:var(--ink-2);font-weight:600;font-size:var(--fs-1)} .tool:hover{background:var(--paper-2);color:var(--ink)} .tool svg{width:18px;height:18px;flex:0 0 auto} .tool .lbl{display:none} .lang{position:relative} .lang__menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:150px;margin:0;padding:var(--s-1);list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-2);z-index:120} .lang__menu button{display:flex;width:100%;min-height:var(--touch);align-items:center;gap:.5em;padding:0 var(--s-3);background:none;border:0;border-radius:var(--r-1);text-align:start} .lang__menu button:hover{background:var(--paper-2)} .lang__menu button[aria-checked="true"]::after{content:"✓";margin-inline-start:auto;color:var(--emerald)} .burger{display:inline-flex} .mmenu{border-top:1px solid var(--line);background:var(--paper);padding:var(--s-3) var(--gutter) var(--s-5)} .mmenu ul{list-style:none;margin:0 0 var(--s-3);padding:0} .mmenu a{display:flex;align-items:center;min-height:var(--touch);padding:0 var(--s-2);color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)} .mmenu a[aria-current="page"]{color:var(--emerald-ink)} .mmenu__row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)} .mmenu__row .btn{flex:1 1 auto} .mmenu__row .btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} @media (min-width:900px){ .brand__tag{display:inline-block} .tool .lbl{display:inline} .burger{display:none} .mmenu{display:none} } @media (max-width:559.98px){ .hdr__tools .lang,.hdr__tools [data-theme-toggle]{display:none} .brand__name{font-size:1rem} } @media (max-width:899.98px){ .nav{display:none} .no-js .nav{display:block;width:100%;order:10;margin:0;padding-bottom:var(--s-2)} .no-js .nav ul{flex-wrap:wrap} .no-js .hdr__row{flex-wrap:wrap} .no-js .burger,.no-js #searchBtn{display:none} } .no-js #searchBtn{display:none} /* ---------- 7. Search dialog ---------- */ .sdlg{border:0;padding:0;background:transparent;max-width:min(680px,calc(100vw - 2rem));width:100%;margin:8vh auto auto} .sdlg::backdrop{background:rgba(15,20,32,.55);backdrop-filter:none} .sdlg__panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-2);overflow:hidden} .sdlg__bar{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3);border-bottom:1px solid var(--line)} .sdlg__bar input{flex:1;min-height:var(--touch);padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--paper);color:var(--ink)} .sdlg__list{list-style:none;margin:0;padding:var(--s-2);max-height:60vh;overflow:auto} .sdlg__list li a{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start;padding:var(--s-3);border-radius:var(--r-2);color:var(--ink);text-decoration:none} .sdlg__list li a:hover,.sdlg__list li a:focus-visible{background:var(--paper-2)} .sdlg__list b{display:block;font-size:var(--fs-2)} .sdlg__list small{color:var(--ink-3)} .sdlg__hint{padding:var(--s-3) var(--s-4);color:var(--ink-3);font-size:var(--fs-1);border-top:1px solid var(--line)} .sdlg__empty{padding:var(--s-5) var(--s-4);color:var(--ink-2)} /* ---------- 8. Hero ---------- */ .hero{padding-block:clamp(1.5rem,4vw,3rem) clamp(1.5rem,4vw,2.5rem);border-bottom:1px solid var(--line)} .hero__grid{display:grid;gap:var(--s-6);align-items:start} .hero__grid>*,.feat>*,.grid>*,.entry__grid>*{min-width:0} @media (min-width:900px){.hero__grid{grid-template-columns:7fr 5fr}} .hero h1{margin:.35rem 0 var(--s-4)} .hero .lede{font-size:var(--fs-3);color:var(--ink-2);max-width:56ch} .hero__note{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-1);color:var(--ink-2);padding:var(--s-3) var(--s-4);border-inline-start:3px solid var(--saffron);background:var(--paper-2);border-radius:0 var(--r-2) var(--r-2) 0;margin-top:var(--s-4)} :root[dir="rtl"] .hero__note{border-radius:var(--r-2) 0 0 var(--r-2)} .fieldcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-5);box-shadow:var(--shadow-1);position:relative} .fieldcard::before{content:"";position:absolute;inset-inline-start:0;top:var(--s-5);bottom:var(--s-5);width:3px;background:var(--emerald);border-radius:2px} .fieldcard h2{font-size:var(--fs-3);margin-bottom:var(--s-3)} .searchform{display:flex;gap:var(--s-2)} .searchform input{flex:1;min-width:0;min-height:var(--touch);padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--paper);color:var(--ink)} .shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);list-style:none;padding:0;margin:var(--s-4) 0 0} .shortcuts a{display:flex;flex-direction:column;gap:.15rem;min-height:var(--touch);padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-2);color:var(--ink);text-decoration:none;font-weight:700;font-size:var(--fs-1)} .shortcuts a small{font-family:var(--font-mono);font-weight:400;color:var(--ink-3);font-size:var(--fs-0)} .shortcuts a:hover{border-color:var(--emerald);background:var(--emerald-soft)} @media (max-width:420px){ .searchform{flex-wrap:wrap} .searchform .btn{flex:1 1 100%} .shortcuts{grid-template-columns:1fr} } /* ---------- 9. Featured composition ---------- */ .feat{display:grid;gap:var(--s-4)} @media (min-width:900px){.feat{grid-template-columns:3fr 2fr}} .story{display:grid;gap:var(--s-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-5);box-shadow:var(--shadow-1)} @media (min-width:640px){.story{grid-template-columns:2fr 3fr;align-items:start}} .story h3 a{color:inherit;text-decoration:none} .story h3 a:hover{text-decoration:underline} .story__art{border-radius:var(--r-2);overflow:hidden;border:1px solid var(--line)} .story h3{font-size:var(--fs-4)} .story .chips{margin-top:var(--s-2)} .story__actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)} .picks{display:flex;flex-direction:column;gap:var(--s-2)} .picks h3{font-size:var(--fs-1);margin:0 0 var(--s-1)} /* ---------- 10. Game cards (premium) ---------- */ .gcard{display:flex;flex-direction:column;gap:var(--s-3);min-width:0;padding:var(--s-4);background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;position:relative;overflow:hidden;box-shadow:var(--shadow-1);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .gcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--spec,var(--emerald)),transparent 70%);opacity:.9} .gcard:hover{border-color:var(--line-strong);box-shadow:0 14px 30px -18px rgba(21,31,56,.35);transform:translateY(-2px);color:var(--ink)} .gcard:focus-visible{outline-offset:3px} .gcard__top{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s-3);align-items:center} .gcard__title{min-width:0;display:flex;flex-direction:column;gap:.15rem} .gcard__name{display:block;font-weight:800;font-size:var(--fs-3);line-height:1.2;overflow-wrap:anywhere} .gcard__cat{display:block;font-family:var(--font-mono);font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.06em;color:var(--emerald-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gcard__idx{align-self:start;font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-3);white-space:nowrap} .gcard__sum{margin:0;color:var(--ink-2);font-size:var(--fs-1);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .gcard__specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border:1px solid var(--line);border-radius:var(--r-2);background:var(--paper-2);overflow:hidden} .gcard__specs>div{min-width:0;padding:.45rem .6rem;border-inline-start:1px solid var(--line)} .gcard__specs>div:first-child{border-inline-start:0} .gcard__specs dt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .gcard__specs dd{margin:0;font-weight:700;font-size:var(--fs-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gcard__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:auto} .gcard__cta{font-weight:700;font-size:var(--fs-1);color:var(--emerald-ink);white-space:nowrap} .gcard:hover .gcard__cta{text-decoration:underline} .status{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:var(--fs-0);padding:.2em .6em;border-radius:999px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .status::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:0 0 auto} .status--ok{color:var(--emerald-ink);background:var(--emerald-soft)} .status--unv{color:var(--saffron-ink);background:var(--saffron-soft)} /* ---------- Trend radar ---------- */ .radar-home{background:var(--paper-2);border-block:1px solid var(--line)} .radar-home__lede{max-width:72ch;margin-bottom:var(--s-5);color:var(--ink-2)} .radar-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin:0 0 var(--s-6)} .radar-summary>div{display:flex;flex-direction:column;padding:var(--s-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-2)} .radar-summary strong{font-size:var(--fs-4);line-height:1.2}.radar-summary span{font-size:var(--fs-0);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em} .radar-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-6)} .radar-list--home{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0} .radar-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-3);min-width:0;padding:var(--s-5) var(--s-4) var(--s-4);color:var(--ink);text-align:center;text-decoration:none;background:var(--card);border:2px solid var(--line);border-radius:20px;box-shadow:0 10px 28px -18px rgba(21,31,56,.45);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)} .radar-card:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(21,31,56,.55)} .radar-card--trending{border-color:#f59e0b;background:linear-gradient(180deg,#fff8e8 0,var(--card) 48%)} .radar-card--new{background:linear-gradient(180deg,var(--paper-2) 0,var(--card) 48%)} .radar-card__rank{position:absolute;inset:12px auto auto 12px;display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;font:900 var(--fs-1)/1 var(--font-mono);color:#fff;background:#172033;border-radius:999px;box-shadow:var(--shadow-1);z-index:2} .radar-card__visual{position:relative;margin-top:var(--s-2)}.radar-card__visual .spec{width:104px;height:104px;font-size:1.45rem;border-radius:24px} .radar-card__badge{position:absolute;inset:auto 50% -12px auto;transform:translateX(50%);display:flex;align-items:center;gap:.3rem;padding:.45rem .7rem;font:900 .72rem/1 var(--font-mono);letter-spacing:.04em;color:#fff;background:#566074;border:3px solid var(--card);border-radius:999px;white-space:nowrap} .radar-card--trending .radar-card__badge{background:#e65300} .radar-card__body{width:100%;min-width:0;padding-top:var(--s-2)}.radar-card__body h3{margin:.2rem 0;font-size:var(--fs-3);overflow-wrap:anywhere} .radar-card__count{margin:0;color:var(--ink-2);font-size:var(--fs-1)}.radar-card__count strong{display:inline-block;font-size:var(--fs-3);color:var(--ink)} .radar-card__meter{height:10px;margin:var(--s-3) 0 var(--s-2);background:#e4e8ef;border-radius:999px;overflow:hidden}.radar-card__meter span{display:block;height:100%;background:#8a94a6;border-radius:inherit}.radar-card--trending .radar-card__meter span{background:linear-gradient(90deg,#ff9f0a,#e65300)} .radar-card__meter--25 span{width:25%}.radar-card__meter--50 span{width:50%}.radar-card__meter--75 span{width:75%}.radar-card__meter--100 span{width:100%} .radar-card__hint{margin:0!important;font-size:var(--fs-1)!important;font-weight:800;color:var(--emerald-ink)!important} @media(max-width:980px){.radar-list,.radar-list--home{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.radar-list,.radar-list--home{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}.radar-card{padding:var(--s-4) var(--s-2) var(--s-3);border-radius:16px}.radar-card__rank{inset:8px auto auto 8px;min-width:32px;height:32px;font-size:.72rem}.radar-card__visual .spec{width:72px;height:72px;font-size:1rem;border-radius:16px}.radar-card__badge{font-size:.58rem;padding:.35rem .5rem}.radar-card__body h3{font-size:var(--fs-2)}.radar-card__count{font-size:.72rem}.radar-card__count strong{font-size:var(--fs-2)}.radar-summary{grid-template-columns:1fr}.radar-summary strong{font-size:var(--fs-3)}} /* compact row variant (rails, picks) */ .gcard--row{flex-direction:row;align-items:center;gap:var(--s-3);padding:var(--s-3)} .gcard--row::before{display:none} .gcard--row .gcard__title{flex:1 1 auto} .gcard--row .gcard__name{font-size:var(--fs-2)} .gcard__ver{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-1);padding:.2em .5em;white-space:nowrap;flex:0 0 auto} @media (max-width:420px){.gcard__specs{grid-template-columns:repeat(2,minmax(0,1fr))}.gcard__specs>div:nth-child(3){display:none}} /* specimen tile: deterministic monogram, no third-party artwork */ .spec{width:56px;height:56px;border-radius:var(--r-2);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);background: linear-gradient(135deg,color-mix(in oklab,var(--spec,#0B6E52) 18%,var(--card)),color-mix(in oklab,var(--spec,#0B6E52) 6%,var(--card))); border:1px solid color-mix(in oklab,var(--spec,#0B6E52) 45%,var(--line));position:relative;overflow:hidden} .spec::after{content:"";position:absolute;inset:auto 6px 6px auto;width:8px;height:8px;border-radius:50%;background:var(--spec,#0B6E52);opacity:.85} .spec--sm{width:44px;height:44px;font-size:.8rem} .spec--md{width:64px;height:64px;font-size:1.05rem;border-radius:14px} .spec--lg{width:96px;height:96px;font-size:1.5rem;border-radius:var(--r-3)} .spec--img{padding:0;background:var(--paper-2)} .spec--img{border-color:var(--line)} .spec--img img{width:100%;height:100%;object-fit:cover} .spec--img::after{display:none} /* ---------- 11. Filters & catalog ---------- */ .filters{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-bottom:var(--s-5)} .filters input[type="search"]{flex:1 1 220px;min-height:var(--touch);padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--card);color:var(--ink)} .filters__group{display:flex;flex-wrap:wrap;gap:var(--s-1)} .fbtn{min-height:36px;padding:0 .8rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink-2);font-size:var(--fs-1);font-weight:600} .fbtn:hover{border-color:var(--ink);color:var(--ink)} .fbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)} :root[data-theme="dark"] .fbtn[aria-pressed="true"]{color:var(--paper)} .filters__count{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-3);margin-inline-start:auto} .empty{padding:var(--s-6) var(--s-4);border:1px dashed var(--line-strong);border-radius:var(--r-3);text-align:center;color:var(--ink-2)} .empty a{font-weight:700} .no-js .filters{display:none} /* ---------- 12. Rails / category groups ---------- */ .rail{padding-block:var(--s-5);border-top:1px solid var(--line)} .rail__head{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-3)} .rail__head h3{margin:0;font-size:var(--fs-4)} .rail__head .idx{margin-inline-start:auto} .rail p.blurb{color:var(--ink-2);max-width:70ch;margin-bottom:var(--s-4)} .rail__list{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .rail__more{margin-top:var(--s-3);font-weight:700} /* ---------- 13. Strips, callouts ---------- */ .strip{background:var(--paper-2);border-block:1px solid var(--line)} .strip__grid{display:grid;gap:var(--s-4);padding-block:var(--s-5)} @media (min-width:768px){.strip__grid{grid-template-columns:auto repeat(4,1fr);align-items:start}} .strip__title{max-width:14ch} .strip__title h2{font-size:var(--fs-4);margin-bottom:.25rem} .strip__item{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2);font-size:var(--fs-1);color:var(--ink-2)} .strip__item b{display:block;color:var(--ink);margin-bottom:.15rem} .strip__item .n{font-family:var(--font-mono);color:var(--saffron-ink);font-weight:700} .callout{padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-inline-start:4px solid var(--emerald);background:var(--card);border-radius:var(--r-2);margin:var(--s-5) 0} .callout--risk{border-inline-start-color:var(--saffron)} .callout--danger{border-inline-start-color:var(--danger-ink);background:var(--danger-soft)} .callout--note{border-inline-start-color:var(--line-strong);background:var(--paper-2)} .callout h2,.callout h3{font-size:var(--fs-3);margin-bottom:var(--s-2)} .callout p:last-child{margin-bottom:0} .disclose{font-size:var(--fs-1);color:var(--ink-2)} /* ---------- 14. Guide rows ---------- */ .grows{display:grid;gap:var(--s-2)} .grow{display:grid;grid-template-columns:1fr auto;gap:var(--s-3);align-items:start;padding:var(--s-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);color:var(--ink);text-decoration:none;transition:border-color var(--dur) var(--ease)} .grow:hover{border-color:var(--ink);color:var(--ink)} .grow b{display:block;font-size:var(--fs-3);line-height:1.25;margin:.2rem 0 .3rem} .grow p{margin:0;color:var(--ink-2);font-size:var(--fs-1)} .grow__meta{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-3);white-space:nowrap;text-align:end} .grows--compact .grow p{display:none} .gcat{margin-top:var(--s-6)} .gcat h2{font-size:var(--fs-4);display:flex;align-items:baseline;gap:var(--s-3)} .gcat h2 .idx{font-weight:400} /* ---------- 15. Entry / article ---------- */ .crumbs{margin:var(--s-4) 0 var(--s-5);font-size:var(--fs-1);color:var(--ink-3)} .crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0} .crumbs li+li::before{content:"/";margin-inline-end:.35rem;color:var(--line-strong)} .crumbs a{color:var(--ink-2)} .entry__head{display:grid;gap:var(--s-4);padding-bottom:var(--s-5);border-bottom:2px solid var(--ink);margin-bottom:var(--s-5)} @media (min-width:640px){.entry__head--art{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}.entry__head--art:has(.entry__art--icon){grid-template-columns:200px minmax(0,1fr)}} .entry__art{width:100%;border-radius:var(--r-2);overflow:hidden;border:1px solid var(--line)} .entry__art img{width:100%} .entry__art--spec{border:0;width:auto} .entry__art--icon{max-width:200px;border:0} .entry__art--icon img{border:1px solid var(--line);border-radius:var(--r-3)} .entry__credit{margin:.5rem 0 0;font-size:var(--fs-0)} .btn--full{flex-wrap:wrap} .entry__head .lede{font-size:var(--fs-3);color:var(--ink-2);max-width:62ch} .entry__meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-3);margin-top:var(--s-2)} .entry__grid{display:grid;gap:var(--s-6)} @media (min-width:960px){.entry__grid{grid-template-columns:minmax(0,1fr) 300px}} .entry__body{max-width:var(--wrap-narrow);min-width:0} .entry__body>section{min-width:0;margin-bottom:var(--s-6)} .entry__body h2{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr-h) + 16px)} .entry__body>section:first-child h2,.entry__body h2:first-child{margin-top:0;padding-top:0;border-top:0} .entry__body h3{margin-top:var(--s-5)} .entry__body p,.entry__body li{color:var(--ink-2)} .entry__body img{border:1px solid var(--line);border-radius:var(--r-2)} .side{display:flex;flex-direction:column;gap:var(--s-4)} @media (min-width:960px){.side{position:sticky;top:calc(var(--hdr-h) + 16px)}} .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-4)} .panel h2,.panel h3{font-size:var(--fs-1);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;margin-bottom:var(--s-3)} .panel ul{list-style:none;padding:0;margin:0} .panel li{border-top:1px solid var(--line)} .panel li:first-child{border-top:0} .panel li a{display:block;padding:.55rem 0;color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--fs-1)} .panel li a:hover{color:var(--emerald-ink)} .panel .btn{width:100%} .panel .fine{font-size:var(--fs-0);color:var(--ink-3);margin:var(--s-2) 0 0} .toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-4);margin:0 0 var(--s-5)} .toc summary{cursor:pointer;font-weight:700;font-family:var(--font-mono);font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)} .toc ol{margin:var(--s-3) 0 0;padding-inline-start:1.25rem;columns:2;column-gap:var(--s-5)} @media (max-width:560px){.toc ol{columns:1}} .toc li{break-inside:avoid;font-size:var(--fs-1);padding:.2rem 0} .toc a{color:var(--ink)} .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-2);margin:var(--s-4) 0} .table-wrap .meta-table{min-width:520px;margin:0;border:0;border-radius:0} .meta-table{margin:var(--s-4) 0;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden} .meta-table th,.meta-table td{padding:.6rem .8rem;text-align:start;vertical-align:top;border-top:1px solid var(--line);font-size:var(--fs-1)} .meta-table tr:first-child th,.meta-table tr:first-child td{border-top:0} .meta-table th{width:34%;font-family:var(--font-mono);font-weight:600;font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);background:var(--paper-2)} .meta-table td{color:var(--ink)} .meta-table .unv{color:var(--saffron-ink);font-weight:600} .checks{list-style:none;padding:0} .checks li{position:relative;padding-inline-start:1.6rem;margin-bottom:.5rem} .checks li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:.9rem;height:.9rem;border:2px solid var(--emerald);border-radius:3px} .steps{list-style:none;padding:0;counter-reset:step;margin:var(--s-4) 0} .steps li{position:relative;padding:var(--s-3) var(--s-4) var(--s-3) 3.2rem;margin-bottom:var(--s-2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);counter-increment:step} :root[dir="rtl"] .steps li{padding:var(--s-3) 3.2rem var(--s-3) var(--s-4)} .steps li::before{content:counter(step,decimal-leading-zero);position:absolute;inset-inline-start:var(--s-3);top:var(--s-3);font-family:var(--font-mono);font-weight:700;color:var(--emerald)} .steps li p{margin:0} .faq details{border:1px solid var(--line);border-radius:var(--r-2);background:var(--card);margin-bottom:var(--s-2)} .faq summary{padding:var(--s-3) var(--s-4);font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-3);min-height:var(--touch);align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--font-mono);color:var(--emerald);font-size:1.2em} .faq details[open] summary::after{content:"–"} .faq .ans{padding:0 var(--s-4) var(--s-4);color:var(--ink-2)} .shot{margin:var(--s-4) 0;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--paper-2)} .shot figcaption{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-3);padding:.4rem .7rem;border-top:1px solid var(--line)} .shot img{border:0;border-radius:0;width:100%} .gallery{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .gallery .shot{margin:0} .pros{display:grid;gap:var(--s-3)} @media (min-width:640px){.pros{grid-template-columns:1fr 1fr}} .pros>div{padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-2);background:var(--card)} .pros h3{margin:0 0 var(--s-2);font-size:var(--fs-2)} .pros ul{margin:0;padding-inline-start:1.1rem} .sources li{margin-bottom:.4rem} .related{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(230px,1fr));list-style:none;padding:0;margin:0} .facts{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:var(--s-4) 0} .facts div{padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-2);background:var(--card)} .facts b{display:block;font-family:var(--font-mono);font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:600} .facts span{font-weight:700} .article-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-3);background:var(--paper-2);margin:var(--s-6) 0} .article-cta p{margin:0;max-width:52ch;color:var(--ink-2);font-size:var(--fs-1)} .prose-note{font-size:var(--fs-1);color:var(--ink-3)} /* ---------- 16. Mobile bottom CTA (compact, dismissible, never covers content) ---------- */ .mcta{position:fixed;inset-inline:0;bottom:0;z-index:90;display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--gutter);background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px -12px rgba(0,0,0,.3)} .mcta .btn{flex:1} .mcta__close{min-width:var(--touch);min-height:var(--touch);border:1px solid var(--line-strong);border-radius:var(--r-2);background:transparent} body.has-mcta{padding-bottom:calc(var(--touch) + 1.25rem)} body.is-locked .mcta{display:none} @media (min-width:900px){.mcta{display:none}body.has-mcta{padding-bottom:0}} .no-js .mcta{position:static;box-shadow:none;margin-top:var(--s-6)} .no-js .mcta__close{display:none} /* ---------- 17. Footer ---------- */ .ftr{margin-top:var(--s-8);border-top:2px solid var(--ink);background:var(--paper-2)} .ftr__grid{display:grid;gap:var(--s-5);padding-block:var(--s-6)} @media (min-width:768px){.ftr__grid{grid-template-columns:1.3fr 1fr 1fr 1fr}} .ftr h2{font-family:var(--font-mono);font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600;margin-bottom:var(--s-3)} .ftr ul{list-style:none;margin:0;padding:0} .ftr li a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink-2);text-decoration:none;font-size:var(--fs-1)} .ftr li a:hover{color:var(--ink);text-decoration:underline} .ftr__about p{font-size:var(--fs-1);color:var(--ink-2)} .ftr__legal{border-top:1px solid var(--line);padding-block:var(--s-4);font-size:var(--fs-0);color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)} .ftr__legal p{margin:0} /* ---------- 18. 404 ---------- */ .nf{padding-block:var(--s-8)} .nf h1{font-size:clamp(2.5rem,8vw,5rem);font-family:var(--font-mono);letter-spacing:-.04em} .nf ul{columns:2;column-gap:var(--s-5)} @media (max-width:560px){.nf ul{columns:1}} /* ---------- 19. Category hub ---------- */ .cathub{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .catcard{display:block;padding:var(--s-5);background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);color:var(--ink);text-decoration:none} .catcard:hover{border-color:var(--ink);color:var(--ink)} .catcard h2{font-size:var(--fs-4);margin:var(--s-2) 0} .catcard p{color:var(--ink-2);font-size:var(--fs-1)} .catcard .count{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-3)} /* ---------- 20. Common searches ---------- */ .variants{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0 0 var(--s-4)} .variants li{font-family:var(--font-mono);font-size:var(--fs-1);padding:.25rem .6rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-1);color:var(--ink-2)} /* ---------- 21. Touch ergonomics ---------- */ @media (pointer:coarse){ .fbtn,.btn--sm,.tool,.mcta__close,.lang__menu button{min-height:var(--touch)} .crumbs a,.toc a,.panel li a,.variants li{display:inline-block;padding-block:.35rem} .panel li a{padding-block:.6rem} } /* ---------- 22. Direct referral CTA (top of profile) ---------- */ .direct{margin:0 0 var(--s-5);padding:var(--s-4) var(--s-5);border:1px solid var(--emerald);border-radius:14px;background:linear-gradient(135deg,var(--emerald-soft),var(--card) 70%);box-shadow:var(--shadow-1)} .direct__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)} .direct__icon{width:56px;height:56px;border-radius:12px;border:1px solid var(--line);flex:0 0 auto} .direct__txt{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:.2rem} .direct__txt b{font-size:var(--fs-3)} .direct__txt span{font-size:var(--fs-1);color:var(--ink-2)} .btn--lg{min-height:52px;padding:.8em 1.4em;font-size:var(--fs-3);flex:1 1 260px} @media (min-width:900px){.btn--lg{flex:0 0 auto}} @media (max-width:420px){ .direct{padding:var(--s-4)} .direct__row{gap:var(--s-3)} .direct__icon{width:48px;height:48px} .btn--lg{flex-basis:100%;font-size:var(--fs-2)} .mcta .btn{font-size:var(--fs-1);padding-inline:.7rem} } /* ---------- 23. Guides: by-app filter + app tag ---------- */ .filters--app{margin-top:calc(-1 * var(--s-3));gap:var(--s-3)} .tag--app{color:var(--saffron-ink);background:var(--saffron-soft)}