/*
Theme Name: Excelavon Worksheet
Description: Theme for excelavon.com. Worksheet motif: column ruler, active-cell selection, formula bar hero.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: excelavon
*/
@font-face{font-family:"Plex Sans";src:url(assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#f5f7f9;--surface:#fff;--surface-2:#eef2f5;--ink:#141a21;--muted:#566170;--line:#d9dfe6;--grid:#e9edf1;
  --primary:#0f5e9c;--primary-ink:#fff;--primary-soft:#e3eef8;--sel:#f2b705;--sel-soft:#fff6d6;
  --ok:#17693a;--ok-soft:#e3f4e9;--bad:#a4231f;--bad-soft:#fbe9e7;--code-bg:#0f1720;--code-ink:#e6edf3;
  --shadow:0 1px 2px rgba(20,26,33,.06),0 4px 16px rgba(20,26,33,.06);
  --sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1180px;--r:10px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1116;--surface:#151b22;--surface-2:#1b232c;--ink:#e6ebf0;--muted:#9ba6b2;--line:#2a333d;--grid:#1e262f;
  --primary:#6cb4f0;--primary-ink:#06121d;--primary-soft:#14283a;--sel:#f2c14e;--sel-soft:#2e2814;
  --ok:#6fd39a;--ok-soft:#12291c;--bad:#ff8f86;--bad-soft:#331512;--code-bg:#0a0e13;--code-ink:#e6edf3;--shadow:none;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1116;--surface:#151b22;--surface-2:#1b232c;--ink:#e6ebf0;--muted:#9ba6b2;--line:#2a333d;--grid:#1e262f;
  --primary:#6cb4f0;--primary-ink:#06121d;--primary-soft:#14283a;--sel:#f2c14e;--sel-soft:#2e2814;
  --ok:#6fd39a;--ok-soft:#12291c;--bad:#ff8f86;--bad-soft:#331512;--code-bg:#0a0e13;--code-ink:#e6edf3;--shadow:none;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);overflow-x:hidden}
a{color:var(--primary);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}
code,kbd,pre{font-family:var(--mono);font-size:.92em}
:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:50}.skip:focus{left:8px}

/* header */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.hdr{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:21px;letter-spacing:-.01em;flex:none}
.brand-mark{width:30px;height:30px;flex:none}
.brand b{color:var(--primary);font-weight:700}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{display:block;padding:9px 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.nav a:hover{background:var(--surface-2)}
.nav a[aria-current="page"],.nav a.is-active{box-shadow:inset 0 -3px 0 var(--sel)}
.hdr-actions{display:flex;gap:6px;align-items:center}
.icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:20px;height:20px}
.menu-btn{display:none}
.ruler{display:flex;border-top:1px solid var(--grid);height:22px;overflow:hidden;font:500 11px/21px var(--mono);color:var(--muted);background:var(--surface-2)}
.ruler span{flex:1 0 64px;text-align:center;border-right:1px solid var(--grid)}
.ruler span:first-child{flex:0 0 44px;background:var(--surface)}
.search-panel{display:none;border-top:1px solid var(--line);background:var(--surface);padding:12px 0}
.search-panel.open{display:block}
.search-box{position:relative;max-width:680px}
.search-box input{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.search-box input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
.sugg{list-style:none;margin:6px 0 0;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow);position:absolute;left:0;right:0;z-index:40}
.sugg:empty{display:none}
.sugg li a{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:6px;color:var(--ink);text-decoration:none}
.sugg li a small{color:var(--muted);flex:none}
.sugg li[aria-selected="true"] a,.sugg li a:hover{background:var(--primary-soft)}
.sugg .none{padding:9px 10px;color:var(--muted)}
@media (max-width:980px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 16px 16px;box-shadow:var(--shadow)}
  .nav.open{display:flex}.nav a{padding:13px 10px;font-size:17px}
  .menu-btn{display:inline-grid}.hdr-actions{margin-left:auto}.ruler{display:none}}

/* breadcrumbs */
.crumbs{font-size:14px;color:var(--muted);margin:20px 0 8px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"\203A";margin-right:6px;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* buttons */
.ea-btn,.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:8px;border:0;background:var(--primary);color:var(--primary-ink);font:600 16px var(--sans);text-decoration:none;cursor:pointer}
.ea-btn:hover,.btn:hover{filter:brightness(1.08)}
.ea-btn-ghost,.btn-ghost{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}

/* home hero */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:40px 0 36px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:100% 32px,96px 100%;background-position:0 -1px,-1px 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:start}
.hero h1{font-size:44px;line-height:1.1;letter-spacing:-.02em;margin:0 0 10px;max-width:16ch}
.hero .lede{font-size:19px;color:var(--muted);margin:0 0 22px;max-width:52ch}
.hero .ea-tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.hero .ea-out{max-height:none}
.hero-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.hero-side h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.qt{list-style:none;margin:0;padding:0}
.qt li{border-top:1px solid var(--grid)}
.qt li:first-child{border-top:0}
.qt a{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:11px 4px;text-decoration:none;color:var(--ink)}
.qt a:hover strong{color:var(--primary)}
.qt small{display:block;color:var(--muted);font-size:14px;line-height:1.35}
.glyph{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font:600 13px var(--mono)}
.proof{display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0;padding:0;list-style:none;color:var(--muted);font-size:15px}
.proof b{color:var(--ink);font-size:18px;margin-right:4px}

/* sections */
.section{padding:44px 0}
.section h2{font-size:28px;letter-spacing:-.01em;margin:0 0 6px}
.section .sub{color:var(--muted);margin:0 0 22px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);min-width:0}
.card:hover{border-color:var(--primary)}
.card h3{margin:0;font-size:19px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .cta{margin-top:auto;color:var(--primary);font-weight:600;font-size:15px}
.card .count{font:500 13px var(--mono);color:var(--muted)}
.prev{border-radius:8px;min-height:92px;overflow:hidden}
.prev-code{background:var(--code-bg);color:var(--code-ink);font:13px/1.55 var(--mono);padding:12px;white-space:pre;overflow:hidden}
.prev-code .k{color:#7cc4ff}.prev-code .s{color:#f2c14e}.prev-code .c{color:#8b98a5}
.prev-chart{background:var(--surface-2);display:flex;align-items:flex-end;gap:8px;padding:12px 14px}
.prev-chart i{flex:1;background:var(--primary);border-radius:3px 3px 0 0;opacity:.85}
.prev-chart i:nth-child(3){background:var(--sel)}
.prev-err{background:var(--surface-2);display:flex;flex-wrap:wrap;gap:8px;align-content:center;padding:12px}
.prev-err span{font:500 14px var(--mono);padding:4px 9px;border-radius:5px;background:var(--bad-soft);color:var(--bad)}
.prev-keys{background:var(--surface-2);display:flex;gap:6px;align-items:center;justify-content:center;padding:12px;font-weight:600}
kbd{display:inline-block;min-width:30px;padding:4px 8px;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;background:var(--surface);text-align:center;font-size:14px}
.prev-cells{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line)}
.prev-cells span{border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);padding:6px 8px;font:13px var(--mono);color:var(--muted)}
.prev-cells span.on{outline:2px solid var(--primary);outline-offset:-2px;color:var(--ink);background:var(--primary-soft)}
.list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.list li{border-top:1px solid var(--grid)}
.list li:first-child{border-top:0}
.list a{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.list a:hover{background:var(--surface-2)}
.list .meta{color:var(--muted);font-size:14px;flex:none}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 18px 58px;position:relative}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;width:30px;height:30px;border:2px solid var(--primary);border-radius:3px;display:grid;place-items:center;font:600 14px var(--mono);color:var(--primary)}
.steps h3{margin:0 0 4px;font-size:17px}.steps p{margin:0;color:var(--muted);font-size:15px}
.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:900px){.hero-grid,.cards,.steps{grid-template-columns:minmax(0,1fr)}.hero h1{font-size:34px}.hero{padding:26px 0}}
@media (min-width:600px) and (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* tools */
.ea-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:end}
.ea-field{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:var(--muted);min-width:0}
.ea-field input,.ea-field select,.ea-field textarea{font:16px var(--sans);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px;width:100%}
.ea-field input:focus,.ea-field select:focus,.ea-field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ea-field small{font-weight:400}
.ea-wide,.ea-contact .ea-wide{grid-column:1/-1}
.ea-formula-bar{flex-direction:row;align-items:stretch;gap:0;grid-column:1/-1}
.ea-formula-bar .ea-fxmark{display:grid;place-items:center;width:46px;border:1.5px solid var(--line);border-right:0;border-radius:8px 0 0 8px;background:var(--surface-2);font:italic 600 16px var(--mono);color:var(--ink)}
.ea-formula-bar input{border-radius:0 8px 8px 0;font:15px var(--mono)}
.ea-tool-explain .ea-form{grid-template-columns:1fr auto}
.ea-tool-explain .ea-formula-bar{grid-column:1}
.ea-out{margin-top:16px}
.ea-out:empty{display:none}
.ea-answer{font:600 clamp(35px,9vw,46px)/1.12 var(--sans);letter-spacing:-.02em;margin:0 0 14px}
.ea-answer-s{font-size:clamp(19px,2.4vw,22px);line-height:1.35;letter-spacing:0}
.ea-split{margin:0 0 14px}.ea-split-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--surface-2)}.ea-split-bar .p,.ea-years .p{background:var(--primary);fill:var(--primary)}.ea-split-bar .i,.ea-years .i{background:var(--sel);fill:var(--sel)}
.ea-split figcaption,.ea-years figcaption{font-size:14px;color:var(--muted);margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.ea-split .k{display:inline-block;width:12px;height:12px;border-radius:3px}.ea-split .k.p{background:var(--primary)}.ea-split .k.i{background:var(--sel);margin-left:10px}
.ea-years{margin:0 0 14px}.ea-years svg{width:100%;height:120px;display:block;background:var(--surface-2);border-radius:8px}
.ea-opts{grid-column:1/-1;border:1px solid var(--line);border-radius:8px;padding:0 12px}.ea-opts summary{cursor:pointer;padding:10px 0;font-weight:600;color:var(--muted);min-height:44px;display:flex;align-items:center}.ea-opts[open]{padding-bottom:12px}.ea-opts .ea-optgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.src-line{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:22px}
.list .ex{display:block;color:var(--muted);font-size:14px;margin-top:2px}
@media (max-width:980px){.side-hide-m{display:none}}
@media (max-width:640px){.ea-opts .ea-optgrid{grid-template-columns:minmax(0,1fr)}}
.ea-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 14px}
.ea-tile{background:var(--surface-2);border-radius:8px;padding:10px 12px}
.ea-tile-v{display:block;font:600 22px var(--mono)}
.ea-tile-l{display:block;font-size:13px;color:var(--muted);line-height:1.3}
.ea-fx{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;border:1px solid var(--line);border-left:4px solid var(--sel);border-radius:8px;padding:10px 12px;margin:0 0 10px;background:var(--surface)}
.ea-fx-label{grid-column:1/-1;font-size:13px;color:var(--muted);font-weight:600}
.ea-fx code{overflow-wrap:anywhere;font-size:15px}
.ea-copy{font:600 14px var(--sans);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:6px;padding:8px 12px;min-height:40px;cursor:pointer}
.ea-steps{margin:0 0 10px;padding-left:22px}
.ea-steps>li{margin:0 0 12px}
.ea-steps code{background:var(--surface-2);padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
.ea-steps p{margin:4px 0}
.ea-steps ul{margin:4px 0 0;padding-left:18px;font-size:15px}
.ea-muted{color:var(--muted);font-size:15px}
.ea-note{background:var(--sel-soft);border-radius:8px;padding:10px 12px;font-size:15px}
.ea-err{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:10px 12px;font-weight:600}
.ea-ok{background:var(--ok-soft);color:var(--ok);border-radius:8px;padding:10px 12px;font-weight:600}
.ea-scroll{overflow-x:auto;margin:6px 0 12px}
.ea-table,.entry table{border-collapse:collapse;width:100%;font-size:15px;background:var(--surface)}
.ea-table caption{text-align:left;font-weight:600;padding:6px 0}
.ea-table th,.ea-table td,.entry th,.entry td{border:1px solid var(--line);padding:7px 10px;text-align:right}
.ea-table th,.entry th{background:var(--surface-2);text-align:left}
.entry td{text-align:left}
.ea-hp{position:absolute;left:-9999px}
.ea-contact{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.ea-form,.ea-contact{grid-template-columns:1fr}.ea-tool-explain .ea-form{grid-template-columns:1fr}}

/* tool page / article */
.page-head{padding:6px 0 18px}
.page-head h1{font-size:38px;line-height:1.15;letter-spacing:-.015em;margin:0 0 8px}
.page-head .lede{color:var(--muted);font-size:18px;margin:0;max-width:62ch}
.meta-line{color:var(--muted);font-size:14px;margin:8px 0 0}
.tool-shell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin:0 0 28px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-bottom:56px}
.entry{max-width:72ch}
.entry h2{font-size:26px;margin:36px 0 10px;letter-spacing:-.01em}
.entry h3{font-size:20px;margin:26px 0 8px}
.entry pre{background:var(--code-bg);color:var(--code-ink);padding:14px;border-radius:8px;overflow-x:auto;font-size:14px}
.entry :not(pre)>code{background:var(--surface-2);padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
.entry blockquote{margin:16px 0;padding:10px 16px;border-left:4px solid var(--sel);background:var(--sel-soft);border-radius:0 8px 8px 0}
.entry .table-wrap,.entry .wp-block-table{overflow-x:auto}
.aside-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px}
.aside-box h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.aside-box ul{list-style:none;margin:0;padding:0}
.aside-box li{border-top:1px solid var(--grid)}
.aside-box li:first-child{border-top:0}
.aside-box li a{display:block;padding:9px 0;text-decoration:none;font-size:15px}
.try{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-left:4px solid var(--primary);background:var(--surface);border-radius:8px;padding:14px;margin:18px 0}
.try p{margin:0;font-size:15px}
.sticky{position:sticky;top:96px}
@media (max-width:980px){.layout{grid-template-columns:minmax(0,1fr)}.sticky{position:static}.page-head h1{font-size:26px}}
.pager{display:flex;gap:10px;margin:24px 0;flex-wrap:wrap}
.pager a,.pager span{padding:8px 14px;border:1px solid var(--line);border-radius:6px;text-decoration:none;background:var(--surface)}
.pager .current{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}

/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);margin-top:24px;padding:40px 0 24px;font-size:15px}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.ft h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin:0 0 4px}
.ft li a{display:inline-block;padding:4px 0;color:var(--ink);text-decoration:none}
.ft li a:hover{color:var(--primary);text-decoration:underline}
.ft p{color:var(--muted);margin:10px 0 0}
.fine{border-top:1px solid var(--line);margin-top:28px;padding-top:16px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:820px){.ft{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ft{grid-template-columns:1fr}}

.proof li{white-space:nowrap}
@media (min-width:901px){.proof{flex-wrap:nowrap;gap:10px 22px}}
.ea-answer-s{font-weight:600;margin:0 0 12px}
@media (max-width:640px){.page-head.has-tool .lede{display:none}}
.brand{min-height:44px}
.ea-fx-main{border-left-color:var(--primary)}
@media (max-width:640px){.ea-tool-lookup .ea-form{grid-template-columns:repeat(2,minmax(0,1fr))}.ea-tool-lookup .ea-form>.ea-field:nth-child(1),.ea-tool-lookup .ea-form>.ea-field:nth-child(2){grid-column:1/-1}.ea-tool-lookup .ea-btn{grid-column:1/-1}}

.search-row{display:flex;gap:8px}.search-row input{flex:1;min-width:0;width:auto}.search-submit{font:inherit;font-weight:600;padding:0 18px;min-height:44px;border:0;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer}.search-submit:hover{filter:brightness(1.1)}.search-submit:focus-visible{outline:3px solid var(--primary-soft);outline-offset:2px}
