/* Shared look & feel for every page except the home page (which has its own Customize panel).
   Loaded AFTER each page's own <style>, so these rules win. Settings come from assets/js/prefs.js. */

/* ---------- themes (same palettes as the home page) ---------- */
html.theme-dark{
  --teal-900:#7fe0e0;--teal-700:#4fc3c3;--teal-500:#0e8a8a;--teal-300:#0a5c5c;--teal-100:#0a3a3a;--teal-50:#072e2e;
  --amber-500:#f5a623;--amber-400:#ffb84d;--amber-100:#3a2a10;
  --ink-900:#eef3f6;--ink-700:#cfd9e1;--ink-500:#a3b3c0;--ink-300:#7a8c9b;--ink-100:#2c3d4b;--ink-50:#1c2a35;
  --paper:#0f1a22;--white:#16232e;--red-100:#3a1a18;--green-100:#0f2e20;--ad-bg:#1a2530;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 16px rgba(0,0,0,.4);--shadow-lg:0 12px 32px rgba(0,0,0,.5);
  color-scheme:dark;
}
html.theme-sepia{
  --teal-900:#4a2f1a;--teal-700:#7a4a2a;--teal-500:#a06a3a;--teal-300:#c9a878;--teal-100:#f0e2cc;--teal-50:#f8f0e0;
  --amber-500:#c8832a;--amber-400:#e0a052;--amber-100:#f5e6cc;
  --ink-900:#3a2a1a;--ink-700:#5a4030;--ink-500:#8a6a4a;--ink-300:#b8a080;--ink-100:#e0d0b8;--ink-50:#f0e6d4;
  --paper:#faf3e6;--white:#fdf8ee;--ad-bg:#f5e6cc;
}
html.theme-dark .topbar{background:rgba(15,26,34,.88)}
html.theme-sepia .topbar{background:rgba(253,248,238,.9)}
/* surfaces that some pages hard-code as white */
html.theme-dark body,html.theme-sepia body{background:var(--paper)!important;color:var(--ink-700)}
html.theme-dark :is(.card,.panel,.seo-section,.io-area,textarea,input,select,.btn-ghost,.action-bar,.action-btn,.input-grid,.diff-body,.toolbar-row,.side-tool,.stat-pill,.nav-links,.tool-card,.tab:not(.active),.style-tab:not(.active),.word-chip:not(.picked),.editor-wrap,#editor,.modal-dialog,.tbtn-menu,.floating-bar,.gly-question button,.kwd-x,.input,.select,.textarea),
html.theme-sepia :is(.card,.panel,.seo-section,.io-area,textarea,input,select,.btn-ghost,.action-bar,.action-btn,.input-grid,.diff-body,.toolbar-row,.side-tool,.stat-pill,.nav-links,.tool-card,.tab:not(.active),.style-tab:not(.active),.word-chip:not(.picked),.editor-wrap,#editor,.modal-dialog,.tbtn-menu,.floating-bar,.gly-question button,.kwd-x,.input,.select,.textarea){
  background-color:var(--white)!important;color:var(--ink-900)
}
html.theme-dark .io-area.out{background-color:var(--ink-50)!important}

/* dark theme: components that put white text on a teal background */
html.theme-dark .footer{background:#0a1319;color:rgba(255,255,255,.78);border-top:1px solid var(--ink-100)}
html.theme-dark .footer h4{color:#fff}
html.theme-dark .footer a{color:rgba(255,255,255,.78)}
html.theme-dark .footer a:hover{color:var(--amber-400)}
html.theme-dark .footer-bottom{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.14)}
html.theme-dark :is(.brand-mark,.counter-chip,.stat-chip,.result-card,.mark){background:linear-gradient(135deg,#0e8a8a,#0a5c5c)!important;color:#fff}
html.theme-dark :is(.btn-primary:hover,.cta-email:hover){background:#0a5c5c}
html.theme-dark #toast{background:#0a5c5c}
html.theme-dark .progress-bar,html.theme-dark .progress-item .bar>span{background:linear-gradient(90deg,#0e8a8a,#4fc3c3)}
html.theme-dark ::placeholder{color:var(--ink-300);opacity:1}

/* ---------- writing boxes: clearer outline ---------- */
.card,.panel,.seo-section,.tool-card,.io-box{border:2px solid var(--ink-300)}
html.outline-bold :is(.card,.panel,.seo-section,.tool-card,.io-box){border-width:3px;border-color:var(--ink-500)}

/* ---------- Customize button + drawer ---------- */
.pf-row{display:flex;justify-content:center;margin:0 0 16px}
.pf-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border:2px solid var(--teal-500);border-radius:999px;background:var(--white);color:var(--teal-700);font:600 .9rem/1.2 inherit;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.pf-btn:hover{background:var(--teal-500);color:#fff}
.pf-shade{position:fixed;inset:0;z-index:900;background:rgba(6,61,61,.5);display:none;justify-content:flex-end;backdrop-filter:blur(3px)}
.pf-shade.open{display:flex}
.pf-drawer{width:100%;max-width:400px;height:100%;background:var(--white);color:var(--ink-700);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:pfIn .22s ease-out}
@keyframes pfIn{from{transform:translateX(36px);opacity:0}}
@media (prefers-reduced-motion:reduce){.pf-drawer{animation:none}}
.pf-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--ink-50);border-bottom:1px solid var(--ink-100)}
.pf-head h2{font-size:1.1rem;font-weight:700;color:var(--teal-900);margin:0}
.pf-x{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink-500);cursor:pointer;padding:0 4px}
.pf-body{padding:20px;overflow-y:auto;flex:1}
.pf-body p.lbl{font-size:.85rem;font-weight:600;color:var(--ink-700);margin:0 0 8px}
.pf-presets{display:flex;gap:8px;margin-bottom:18px}
.pf-presets button{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 8px;border:2px solid var(--ink-100);border-radius:8px;background:var(--white);color:var(--ink-900);font:700 .88rem/1.3 inherit;font-family:inherit;cursor:pointer;text-align:left}
.pf-presets button small{font-weight:400;font-size:.72rem;color:var(--ink-500)}
.pf-presets button:hover,.pf-presets button.active{border-color:var(--teal-500);background:var(--teal-50)}
.pf-field{margin-bottom:14px}
.pf-field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink-700);margin-bottom:6px}
.pf-field select,.pf-field input{width:100%;padding:9px 11px;border:1.5px solid var(--ink-300);border-radius:8px;background:var(--white);color:var(--ink-900);font:.9rem inherit;font-family:inherit}
.pf-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--ink-100);background:var(--ink-50)}
.pf-foot button{padding:8px 18px;border-radius:999px;font:600 .85rem inherit;font-family:inherit;cursor:pointer;border:1px solid var(--ink-300);background:var(--white);color:var(--ink-700)}
.pf-foot .pf-apply{background:var(--teal-500);border-color:var(--teal-500);color:#fff}
.pf-note{font-size:.8rem;color:var(--ink-500);margin-top:4px}
@media print{.pf-row,.pf-shade{display:none!important}}

/* ---------- focused counters: one main number, the rest on request ---------- */
[hidden]{display:none!important}
.strip-row{margin-bottom:14px}
.strip-row>.stat-strip.stat-strip,.strip-row>.counter-strip.counter-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0}
.strip-row>.stat-strip>*,.strip-row>.counter-strip>*{flex:1 1 150px;min-width:0}
.strip-row>.stat-strip>:first-child,.strip-row>.counter-strip>:first-child{flex:0 0 100%}
.strip-row.collapsed .extra{display:none}
.strip-toggle{display:inline-block;margin-top:10px;padding:6px 14px;border:1.5px solid var(--ink-300);border-radius:999px;background:transparent;color:var(--ink-500);font:600 .8rem/1.2 inherit;font-family:inherit;cursor:pointer}
.strip-toggle:hover{border-color:var(--teal-500);color:var(--teal-700);background:var(--teal-50)}

/* ---------- Customize button lives in the top bar, far right ---------- */
.pf-btn.pf-top{margin-left:auto;padding:7px 14px;font-size:.85rem;flex:none}
.pf-btn.pf-top svg{flex:none}
@media (max-width:520px){.pf-btn.pf-top .pf-label{display:none}.pf-btn.pf-top{padding:8px 10px}}

/* ---------- counter boxes: number and label side by side, SAME font size ---------- */
html .counter-chip,html .stat-chip{--chip-size:1.7rem;flex-direction:row;align-items:baseline;flex-wrap:wrap;column-gap:12px;row-gap:2px}
html .counter-chip .value,html .stat-chip .value,
html .counter-chip .label,html .stat-chip .label{font-size:var(--chip-size);line-height:1.15}
html .counter-chip .label,html .stat-chip .label{font-weight:600;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.92)}
@media (max-width:520px){
  html .counter-chip,html .stat-chip{--chip-size:1.45rem;padding:12px 14px;column-gap:10px}
}