/* ptable-inner.css v1 — 4AB look for periodic-table element pages.
   Loaded by one <link> after the page's own inline <style>, so equal-specificity rules win by order.
   Scope: every rule sits under html:has(#profileView), which only the periodic-table generator emits.
   Palette = site house style: cream paper, white rounded cards, navy #0A2B63, blue #0862F9,
   Playfair Display/Georgia headings, Roboto body. Light theme only. Text >= 12px, taps >= 24px.
   Element category colours (--c on tiles) are data and are left alone. Rollback: remove the <link>. */

/* ---------- tokens (forced light, whatever data-theme says) ---------- */
html:has(#profileView),
html[data-theme]:has(#profileView){
  color-scheme:light;
  --bg:#FAF7F0; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F3F6FB;
  --line:#E3E9F2; --line2:#C7DDFB;
  --text:#0F2039; --muted:#56657A; --soft:#33435C;
  --gold:#0862F9; --gold2:#0A2B63; --gold-ink:#FFFFFF;
  --cyan:#0A50C7; --violet:#6D3BBF; --green:#15803D; --amber:#B45309; --red:#C2362F;
  --shadow:0 4px 18px rgba(10,43,99,.07);
  --r:20px; --r2:16px;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --pt-navy:#0A2B63; --pt-blue:#0862F9; --pt-blue-ink:#0A50C7; --pt-sky:#EAF3FE; --pt-sky2:#D6E8FD;
  --pt-lift:0 14px 34px rgba(10,43,99,.12);
}
html:has(#profileView) body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px}
html:has(#profileView) body::before{background:
  radial-gradient(55% 35% at 90% -5%,rgba(8,98,249,.07),transparent 60%),
  radial-gradient(45% 30% at 0% 8%,rgba(10,43,99,.05),transparent 60%)}
html:has(#profileView) h1,
html:has(#profileView) h2,
html:has(#profileView) h3,
html:has(#profileView) h4{font-family:var(--display);color:var(--pt-navy)}
html:has(#profileView) a{color:var(--pt-blue-ink)}
html:has(#profileView) :focus-visible{outline:2px solid var(--pt-blue);outline-offset:2px}
/* light only: the dark toggle has nothing to do here */
html:has(#profileView) #themeBtn{display:none}

/* ---------- header, sidebar, drawer ---------- */
html:has(#profileView) .site-head{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(10,43,99,.05)}
html:has(#profileView) .brand-mark,
html:has(#profileView) .foot-brand .mark,
html:has(#profileView) footer .mark{background:var(--pt-navy);color:#fff;border-color:var(--pt-navy);box-shadow:0 0 0 3px var(--pt-sky)}
html:has(#profileView) .brand-text b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--pt-navy);font-family:var(--display)}
html:has(#profileView) .brand-text small,
html:has(#profileView) .head-title small{color:var(--pt-blue-ink);font-size:12px}
html:has(#profileView) .head-title b{color:var(--pt-navy)}
html:has(#profileView) .main-nav a{color:var(--soft)}
html:has(#profileView) .main-nav a:hover,
html:has(#profileView) .main-nav a.on{background:var(--pt-sky);color:var(--pt-navy)}
html:has(#profileView) .menu-btn,
html:has(#profileView) .side-btn{min-width:40px;min-height:40px;color:var(--pt-navy);border-color:var(--line)}
html:has(#profileView) .sidebar{background:#fff;border-right:1px solid var(--line)}
html:has(#profileView) .sb-sec{font-size:12px;color:var(--pt-blue-ink);border-left-color:var(--pt-blue)}
html:has(#profileView) .sidebar a{color:var(--soft);min-height:36px}
html:has(#profileView) .sidebar a span{font-size:12px}
html:has(#profileView) .sidebar a:hover,
html:has(#profileView) .sidebar a.on{background:var(--pt-sky);border-color:var(--pt-sky2);color:var(--pt-navy)}
html:has(#profileView) .drawer{background:#fff;border-bottom:1px solid var(--line)}
html:has(#profileView) .drawer a{min-height:40px;color:var(--pt-navy)}
html:has(#profileView) .drawer a span{font-size:12px}

/* ---------- hero ---------- */
html:has(#profileView) .kicker{font-size:12px;color:var(--muted);letter-spacing:.08em}
html:has(#profileView) .kicker a{color:var(--pt-blue-ink);display:inline-flex;align-items:center;min-height:24px;padding:0 2px}
html:has(#profileView) .hero h1{color:var(--pt-navy);font-family:var(--display);letter-spacing:.01em}
html:has(#profileView) .hero p{color:var(--soft)}
html:has(#profileView) .byline{color:var(--muted)}
html:has(#profileView) .byline b{color:var(--pt-navy)}
html:has(#profileView) .meta li{background:#fff;border:1px solid var(--line);color:var(--soft);box-shadow:var(--shadow)}
html:has(#profileView) .meta li b{color:var(--pt-navy)}
html:has(#profileView) .btn,
html:has(#profileView) .btn-ghost,
html:has(#profileView) .btn-line{min-height:44px}
html:has(#profileView) .btn-gold,
html[data-theme]:has(#profileView) .btn-gold{background:var(--pt-blue) !important;color:#fff !important;border-color:var(--pt-blue) !important;box-shadow:0 8px 22px rgba(8,98,249,.25) !important}
html:has(#profileView) .btn-gold:hover{background:var(--pt-blue-ink) !important}
html:has(#profileView) .btn-line,
html:has(#profileView) .btn-ghost{background:#fff;color:var(--pt-navy);border:1.5px solid var(--pt-navy)}
html:has(#profileView) .btn-line:hover,
html:has(#profileView) .btn-ghost:hover{background:var(--pt-sky)}
html:has(#profileView) .atom::before{background:radial-gradient(circle,rgba(8,98,249,.12),transparent 62%)}
html:has(#profileView) .tile{background:#fff;box-shadow:var(--pt-lift)}
html:has(#profileView) .tile .corner{font-size:12px}
html:has(#profileView) .tile.el-hero .corner b{color:color-mix(in srgb,var(--c) 70%,#000)}
html:has(#profileView) .tile .nm{flex-wrap:wrap;column-gap:8px;row-gap:2px}
html:has(#profileView) .tile .nm b{color:var(--pt-navy)}
html:has(#profileView) .callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--pt-blue);border-radius:var(--r2);box-shadow:var(--shadow)}
html:has(#profileView) .callout strong{color:var(--pt-blue-ink);font-size:12px}
html:has(#profileView) .atom-x .olabel{font-size:12px}

/* ---------- chapter strip ---------- */
html:has(#profileView) .chapters{background:rgba(255,255,255,.96);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(10,43,99,.05)}
html:has(#profileView) .chapters .progress{background:var(--pt-blue)}
html:has(#profileView) .chapters a{font-size:12px;color:var(--soft);min-height:32px;display:inline-flex;align-items:center;border-radius:999px}
html:has(#profileView) .chapters a em{color:var(--pt-blue-ink)}
html:has(#profileView) .chapters a:hover{background:var(--pt-sky)}
html:has(#profileView) .chapters a.on,
html[data-theme]:has(#profileView) .chapters a.on{background:var(--pt-navy) !important;color:#fff !important;box-shadow:none !important}
html:has(#profileView) .chapters a.on em{color:#C7DDFB !important;opacity:1}
html:has(#profileView) .chapters a.done{color:var(--pt-navy)}
html:has(#profileView) .chapters a.done em{color:var(--pt-blue)}

/* ---------- sections, cards, panels ---------- */
html:has(#profileView) .block{border-bottom-color:var(--line)}
html:has(#profileView) .eyebrow{font-size:12px;color:var(--pt-blue-ink);letter-spacing:.12em}
html:has(#profileView) .sec-head h2{color:var(--pt-navy)}
html:has(#profileView) .lead{color:var(--soft)}
html:has(#profileView) .card,
html:has(#profileView) .panel,
html:has(#profileView) .metric{background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow)}
html:has(#profileView) .card:hover,
html:has(#profileView) .panel:hover{box-shadow:var(--pt-lift)}
html:has(#profileView) .panel.gold{background:linear-gradient(160deg,var(--pt-sky),#fff 55%)}
html:has(#profileView) .label{font-size:12px;color:var(--muted);letter-spacing:.06em;overflow-wrap:break-word}
html:has(#profileView) .metrics .label{text-transform:none;letter-spacing:.01em;font-size:12.5px;font-weight:600}
html:has(#profileView) .metrics .card{min-width:0;padding-left:14px;padding-right:12px}
html:has(#profileView) .value{color:var(--pt-navy)}
html:has(#profileView) .metric small{font-size:12px}
html:has(#profileView) .note{color:var(--muted)}
html:has(#profileView) .mono,
html:has(#profileView) .eq{background:var(--panel2);border:1px solid var(--line);color:var(--pt-navy);border-radius:12px}
html:has(#profileView) .swipe{font-size:12px;color:var(--muted)}

html:has(#profileView) sup,
html:has(#profileView) sub{font-size:max(12px,.72em)}

/* ---------- tables ---------- */
html:has(#profileView) .table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow)}
html:has(#profileView) th{background:var(--pt-sky);color:var(--pt-navy);font-size:12px;letter-spacing:.06em}
html:has(#profileView) td{border-color:var(--line)}
html:has(#profileView) tbody tr:nth-child(even) td{background:#FBFCFE}
html:has(#profileView) tbody tr:hover td{background:var(--pt-sky)}

/* ---------- diagrams (labels only; drawings untouched) ---------- */
html:has(#profileView) .shell-label{font-size:12px}
html:has(#profileView) .obox small,
html:has(#profileView) .osub small{font-size:12px}
html:has(#profileView) .nuc{background:radial-gradient(circle at 40% 35%,rgba(8,98,249,.16),transparent 65%)}
html:has(#profileView) .nuc-x .p,
html:has(#profileView) .nuc-x .n,
html:has(#profileView) .p,
html:has(#profileView) .n{font-size:12px}
html:has(#profileView) .iso{background:#fff;border:1px solid var(--line);border-radius:var(--r2)}
html:has(#profileView) .iso .tag{font-size:12px;background:var(--pt-sky);color:var(--pt-navy)}
html:has(#profileView) .spec .line i,
html:has(#profileView) .spec-label span,
html:has(#profileView) .ticks{font-size:12px}
html:has(#profileView) .safety-note{background:#FFF8EC;border:1px solid #F5D9A8;border-radius:var(--r2);color:#5B3A06}
html:has(#profileView) .step .when{font-size:12px;color:var(--pt-blue-ink)}
html:has(#profileView) .timeline .step{background:#fff;border:1px solid var(--line);border-radius:var(--r2)}

/* ---------- data sheet tools ---------- */
html:has(#profileView) .data-tools input{background:#fff;border:1px solid var(--line);color:var(--text);min-height:44px;font-size:16px}
html:has(#profileView) .data-tools input:focus{border-color:var(--pt-blue);box-shadow:0 0 0 3px rgba(8,98,249,.18)}
html:has(#profileView) #dataCount,
html:has(#profileView) .cat{font-size:12px}
html:has(#profileView) .chip{background:#fff;border:1px solid var(--line);color:var(--soft);min-height:32px}
html:has(#profileView) .chip:hover{background:var(--pt-sky)}
html:has(#profileView) .filters .chip.on,
html:has(#profileView) .pt-modes .chip.on{background:var(--pt-navy);border-color:var(--pt-navy);color:#fff;box-shadow:none}
html:has(#profileView) .cite{background:var(--pt-sky);border-color:var(--pt-sky2)}
html:has(#profileView) .cite b{font-size:12px;color:var(--pt-navy)}
html:has(#profileView) .res .ic{background:var(--pt-sky)}

/* ---------- neighbours, prev/next, related, FAQ ---------- */
html:has(#profileView) .nb{background:#fff;border:1px solid var(--line);border-radius:14px;min-height:44px}
html:has(#profileView) .nb.me{background:var(--pt-navy);color:#fff;border-color:var(--pt-navy)}
html:has(#profileView) .nb.me b,
html:has(#profileView) .nb.me small{color:#fff}
html:has(#profileView) .nb small,
html:has(#profileView) .nb span{font-size:12px}
html:has(#profileView) .pnav a{background:#fff;border:1px solid var(--line);border-radius:var(--r2);min-height:44px;box-shadow:var(--shadow)}
html:has(#profileView) .pnav a:hover{border-color:var(--pt-blue)}
html:has(#profileView) .pnav .dir{font-size:12px;color:var(--pt-blue-ink)}
html:has(#profileView) .pnav .nm{color:var(--pt-navy);font-family:var(--display)}
html:has(#profileView) .related-chips a{background:#fff;border:1px solid var(--line);color:var(--pt-navy);border-radius:999px;min-height:32px;display:inline-flex;align-items:center}
html:has(#profileView) .related-chips a:hover{background:var(--pt-sky);border-color:var(--pt-sky2)}
html:has(#profileView) .faq details{background:#fff;border:1px solid var(--line);border-radius:14px}
html:has(#profileView) .faq summary{color:var(--pt-navy);min-height:44px;display:flex;align-items:center}
html:has(#profileView) summary::after{color:var(--pt-blue)}

/* ---------- quick view, footer, mobile bar ---------- */
html:has(#profileView) .qv-box{background:#fff;border:1px solid var(--line)}
html:has(#profileView) .qv-close:hover{background:var(--pt-sky)}
html:has(#profileView) .el-badge,
html:has(#profileView) .fblock-label{font-size:12px}
html:has(#profileView) footer{background:#fff;border-top:1px solid var(--line)}
html:has(#profileView) .foot-brand b{color:var(--pt-navy)}
html:has(#profileView) .foot-brand small,
html:has(#profileView) footer .fine,
html:has(#profileView) footer .fine2,
html:has(#profileView) footer .fine .ver{font-size:12px}
html:has(#profileView) footer .fine b{color:var(--pt-navy)}
html:has(#profileView) footer .fine .ver{color:var(--pt-blue-ink);background:var(--pt-sky);border-color:var(--pt-sky2)}
html:has(#profileView) footer .contact a,
html:has(#profileView) footer .social a{min-height:32px;display:inline-flex;align-items:center}
html:has(#profileView) .qab{background:#fff;border-top:2px solid var(--pt-navy);box-shadow:0 -6px 20px rgba(10,43,99,.1)}
html:has(#profileView) .qab a{font-size:13px;min-height:44px}
html:has(#profileView) .qab-call{background:var(--pt-blue);color:#fff}
html:has(#profileView) .qab-web{background:var(--pt-sky);border-color:var(--pt-sky2);color:var(--pt-navy)}

/* four metric cards in a ~520px hero column cut words like "Electronegativity": use 2 x 2 there */
@media (min-width:761px) and (max-width:1599px){
  html:has(#profileView) .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- small screens ---------- */
@media (max-width:760px){
  html:has(#profileView) body{font-size:15px}
  html:has(#profileView) .hero h1{font-size:clamp(34px,11vw,54px)}
  html:has(#profileView) .card,
  html:has(#profileView) .panel{border-radius:14px}
  html:has(#profileView) .tile{height:auto;min-height:176px}
  html:has(#profileView) .tile .nm{flex-direction:column;align-items:center;text-align:center}
}
@media print{
  html:has(#profileView) body{background:#fff}
  html:has(#profileView) body::before{display:none}
}