/* ==========================================================================
   SellUp Client Portal · SEO module — product-specific styles only.
   Foundation: design/_kit/mockup-base.css (linked first in index.html),
   which is SellUp's OWN kit copy (teal --primary, skeleton tokens §0b).

   Sections
     0. Portal shell — no icon rail, 260px sidebar, connected-site switcher
     1. SellUp lockup (re-derived type spec, 96×50 slot)
     2. Content skeleton rows — the signature juxtaposition
     3. The SEO card — shared component on every content-type screen
        3a. snippet preview + length meters
        3b. focus keyphrase + analysis checklist
        3c. readability panel
        3d. score dial + chips
     4. SEO Analysis screen (01) — workouts, fix-first list, type cards
     5. JSON-LD code block
     6. System notes helpers (09)
     7. Responsive
   ========================================================================== */

/* ==========================================================================
   0. PORTAL SHELL
   SellUp client portal: navbar (72px) + sidebar (260px) + main. NO icon rail.
   .body-row is a flex row, so omitting .rail needs no structural override.
   ========================================================================== */
:root{--sb-w:260px}
.shell{--rail-w:0px;min-width:1180px}

/* connected-site switcher — the portal's identity sits between lockup and search */
.site-switch{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-xs);
  font-size:12.5px;color:var(--ink-2);white-space:nowrap;transition:background .15s}
.site-switch:hover{background:var(--accent)}
.site-switch .gl{width:8px;height:8px;border-radius:var(--r-full);background:var(--brand);flex:0 0 auto}
.site-switch .dm{color:var(--muted)}
.site-switch svg{color:var(--muted-2)}
.nav-left .vr{width:1px;height:24px;background:var(--line);flex:0 0 auto;display:inline-block}

/* sidebar group labels carry live/placeholder state */
.sb-nav a .ph{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-2);white-space:nowrap}
.sb-nav a.is-ph{color:var(--muted-2)}
.sb-nav a.is-ph svg{color:var(--muted-2)}
.sb-nav a.is-ph:hover{color:var(--muted)}
.sb-nav .sk{width:72px;height:9px;margin-left:auto}
.sb-nav .ph-note{padding:2px 18px 10px;font-size:11.5px;color:var(--muted-2);line-height:1.5}

/* focus ring restated as outline — later kit box-shadows win the cascade */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ==========================================================================
   1. SELLUP LOCKUP — 96×50 slot, wordmark+dot width === tagline width.
   Re-derived type spec (measured on the kit --font stack):
     .tg  "BUY. SELL. TRADE IN."  6.200px/700/+1.1783px → 95.859
     .wm  "SELLUP"               25.541px/800/-.2386px → 93.703
     .dot  cx 91.9 r 3.95        → right edge 95.850  ✅ flush
   The dot overhangs the final P — the mark's right edge is the dot's.
   ========================================================================== */
.brand-svg .wm{font-size:25.541px;font-weight:800;letter-spacing:-.2386px}
.brand-svg .tg{letter-spacing:1.1783px}
.brand-svg .dot{fill:var(--brand)}

/* ==========================================================================
   2. CONTENT SKELETON ROWS — the deck's signature.
   Every content list renders the existing structure (rows, cards, table
   chrome) with skeleton title bars, BUT the SEO columns are real:
   dot+chip SEO score, readability, indexed dot, cornerstone star.
   Skeleton greys carry zero meaning; all signal lives in the real columns.
   ========================================================================== */
.cellname .sk{width:210px}
.cellsub .sk{width:140px;height:8px}
/* title cell: skeleton bars + a real slug underneath */
.slug{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* rows that open a detail view — the whole title cell is one link */
a.celllink{display:block;color:inherit;text-decoration:none;border-radius:var(--r-sm);min-width:0}
a.celllink:hover .sk{background:var(--skel-strong)}
a.iconbtn{display:inline-flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}

/* product card grid — skeleton image/price slots, real SEO chip */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);
  padding:12px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .18s,border-color .18s}
.pcard:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.pcard .sk-img{height:96px}
.pcard .pmeta{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* category card grid */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);
  padding:14px;display:flex;gap:12px;align-items:flex-start;transition:box-shadow .18s,border-color .18s}
.ccard:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}

/* FAQ rows — skeleton Q + skeleton A */
.faqrow{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.faqrow:last-child{border-bottom:0}
.faqrow .sk-q{width:62%}
.faqrow .sk-a{width:80%;height:8px;margin-top:8px}

/* skeleton strip inside analysis type cards */
.skstrip{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.skstrip .sk{width:100%}
.skstrip .sk:nth-child(2){width:84%}
.skstrip .sk:nth-child(3){width:68%}

/* ==========================================================================
   3. THE SEO CARD — one shared component, lower half of every content screen.
   Anatomy: card-head (title + score chip + schema badge) → type-level
   settings strip → 2-col body: snippet preview | analysis + readability.
   ========================================================================== */
.seo-card{border-color:var(--line)}
.seo-card .card-head{align-items:center}
.seo-score{display:inline-flex;align-items:center;gap:8px}
.seo-chip{font-family:var(--mono);font-size:12px;font-weight:600}
.schema-badge{font-family:var(--mono);font-size:11px}

/* type-level settings strip */
.seo-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;
  border-bottom:1px solid var(--line-soft)}
.seo-settings>div{padding:12px 18px;border-right:1px solid var(--line-soft);min-width:0}
.seo-settings>div:last-child{border-right:0}
.seo-settings .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:6px}
.tpl{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 8px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl b{color:var(--brand);font-weight:600}

/* toggles (Switch anatomy: track + knob) */
.sw{position:relative;width:34px;height:20px;border-radius:var(--r-full);background:var(--line-strong);
  transition:background .15s;flex:0 0 auto;display:inline-block}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--r-full);
  background:var(--card);box-shadow:var(--shadow-xs);transition:transform .15s}
.sw[aria-checked=true]{background:var(--primary)}
.sw[aria-checked=true]::after{transform:translateX(14px)}
.swrow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}

/* two-column SEO body */
.seo-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:0}
.seo-body>div{min-width:0;padding:18px}
.seo-body>div:first-child{border-right:1px solid var(--line-soft)}
.seo-body h3{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* --- 3a. snippet preview ------------------------------------------------- */
.snip{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:#fff}
.snip .site{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.snip .site .crumb{color:var(--muted);font-size:12px}
.snip-title{margin:4px 0 2px;font-size:17px;font-weight:520;letter-spacing:-.005em;color:#1a4fa0;line-height:1.4}
.snip-slug{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-bottom:6px}
.snip-desc{font-size:13px;color:var(--ink-3);line-height:1.55}
.snip .edit{margin-left:auto}
/* editable affordance row under each snippet field */
.snip-edit{display:flex;align-items:center;gap:10px;margin-top:8px}
.snip-edit label{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);flex:0 0 96px}
.snip-edit .inp{height:32px;font-size:12.5px;font-family:var(--mono)}

/* length meters — 4px bars; the fill carries semantic hue (documented deviation D3) */
.meterrow{display:flex;align-items:center;gap:10px;margin-top:8px}
.meterrow .mlab{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto}
.meter{height:4px;border-radius:var(--r-full);background:var(--skel);overflow:hidden;flex:1 1 auto;max-width:220px}
.meter>i{display:block;height:100%;border-radius:var(--r-full);animation:growW .8s cubic-bezier(.22,.8,.28,1) both}
.m-ok>i,.meter.m-ok>i{background:var(--ok)}
.m-warn>i,.meter.m-warn>i{background:var(--warn)}
.m-bad>i,.meter.m-bad>i{background:var(--danger)}

/* --- 3b. analysis checklist ---------------------------------------------- */
.keyrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.keyrow label{font-size:12.5px;color:var(--ink-2);flex:0 0 auto;font-weight:500}
.keyrow .inp{max-width:280px}
.checklist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.checklist li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.checklist .dot{margin-top:7px}
.checklist b{color:var(--ink);font-weight:600}
.checklist .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;padding-left:12px}

/* --- 3c. readability panel ----------------------------------------------- */
.read-panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:#fff}
.read-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.read-head .score{font-family:var(--mono);font-size:20px;font-weight:640;letter-spacing:-.02em;color:var(--ink)}
.read-head .lab{font-size:12px;color:var(--muted);line-height:1.4}
.read-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.read-list li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-3)}
.read-list .v{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.read-list .dot{transform:translateY(-1px)}

/* --- 3d. score chips + dial ---------------------------------------------- */
.scorechip{display:inline-flex;align-items:center;gap:6px;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-md);padding:3px 9px;font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}

/* ==========================================================================
   4. SEO ANALYSIS (screen 01) — reads like Yoast workouts, not a KPI grid.
   ========================================================================== */
.an-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px;align-items:stretch}
.dial-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 16px}
.dial{position:relative;width:168px;height:168px}
.dial svg{display:block;transform:rotate(-90deg)}
.dial .track{stroke:var(--skel);fill:none}
.dial .fill{stroke:var(--brand);fill:none;stroke-linecap:round;
  stroke-dasharray:452.4;stroke-dashoffset:452.4;animation:dialIn 1s cubic-bezier(.22,.8,.28,1) .15s both}
@keyframes dialIn{to{stroke-dashoffset:99.5}} /* 78/100 → offset = 452.4 × (1−0.78) */
.dial .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial .num b{font-family:var(--mono);font-size:40px;font-weight:640;letter-spacing:-.03em;color:var(--ink);line-height:1}
.dial .num span{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:4px}
.dial-foot{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}

/* workout / fix-first list */
.fixlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.fixlist li{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
.fixlist li:last-child{border-bottom:0}
.fixlist .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--primary-fg);background:var(--primary);
  border-radius:var(--r-sm);padding:3px 7px;flex:0 0 auto}
.fixlist .t{min-width:0;flex:1 1 auto}
.fixlist .t .a{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.4}
.fixlist .t .s{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.fixlist .go{color:var(--muted-2);flex:0 0 auto}

/* content-type breakdown cards */
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:14px}
.typecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.typecard .top{display:flex;align-items:center;gap:10px}
.typecard .nm{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.typecard .ct{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:1px}
.typecard .metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* indexing snapshot + readability summary */
.duplex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kv{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:8px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);text-align:right}

/* ==========================================================================
   5. JSON-LD CODE BLOCK (FAQ schema)
   ========================================================================== */
.codeblock{background:#1c1c1e;color:#d6d6d8;border-radius:var(--r-lg);padding:14px 16px;overflow-x:auto;
  font-family:var(--mono);font-size:11.5px;line-height:1.65;white-space:pre}
.codeblock .k{color:#8ab8e8}
.codeblock .s{color:#a8d0a0}
.codeblock .p{color:#8f8f95}
.codeblock .tag-open{color:#d0a8a0}

/* ==========================================================================
   6. SYSTEM NOTES (09)
   ========================================================================== */
.spec{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.devtbl td:first-child{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink)}

/* sync explainer banner — reads intent, not absence */
.sync-note{display:flex;align-items:flex-start;gap:10px;border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);padding:10px 14px;font-size:12.5px;color:var(--muted);line-height:1.5;
  background:var(--skel-soft)}
.sync-note svg{flex:0 0 auto;margin-top:1px;color:var(--muted-2)}
.sync-note b{color:var(--ink-2);font-weight:600}

/* FAQ rows: real SEO status column pinned right */
.faqrow .st{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* detail screens (10–12) — the skeleton document that the SEO panel follows */
.doc{padding:24px 28px}
.docmeta{display:flex;align-items:center;gap:10px}
.docbar{max-width:720px}
.doclist{display:flex;flex-direction:column;gap:9px;margin-top:14px;max-width:520px;
  padding-left:18px;border-left:2px solid var(--skel)}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
@media (max-width:1279px){
  .an-grid,.duplex{grid-template-columns:1fr}
  .seo-body{grid-template-columns:1fr}
  .seo-body>div:first-child{border-right:0;border-bottom:1px solid var(--line-soft)}
}