/* site.css — shared additions for every page of The Archeio (loaded after each page's own styles). */
/* Ad placeholders stay hidden until AdSense is switched on in /cookie-banner.js (adds html.ads-on). */
html:not(.ads-on) .ad-slot, html:not(.ads-on) .ad-bar, html:not(.ads-on) .ad-mid { display: none !important; }
.ad-slot > span, .ad-leaderboard > span, .ad-rectangle > span { display: none; }

.skip-link { position: absolute; left: -9999px; top: 0; background: #1a1a18; color: #fff; padding: .5rem 1rem; z-index: 100000; }
.skip-link:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 2px solid var(--accent-mid, #4a8c66); outline-offset: 2px; }
[hidden] { display: none !important; }
img, svg, canvas { max-width: 100%; }

/* Header nav: keep it on one line on phones */
.header-nav { flex-wrap: wrap; gap: .25rem 1.1rem !important; }
@media (max-width: 520px) { .header-nav a.hide-sm { display: none; } .header-inner { gap: .75rem; } }
.header-nav a[aria-current="page"] { color: var(--ink, #1a1a18); font-weight: 600; }

/* Footer */
.site-footer, .footer-links { font-size: .8125rem; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.1rem; margin: 0 auto .75rem; max-width: 860px; }
.footer-nav a, .footer-legal a { color: var(--ink-mid, #4a4a46); }
.footer-legal { color: var(--ink-faint, #8a8a84); }
footer .footer-copy a { color: inherit; text-decoration: underline; }

/* Content helpers */
.content-section ul, .content-section ol { color: var(--ink-mid, #4a4a46); padding-left: 1.4rem; margin: .5rem 0 1rem; line-height: 1.7; }
.content-section li { margin-bottom: .3rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 420px; }
.limits-table caption { text-align: left; font-size: .8125rem; color: var(--ink-faint, #8a8a84); padding: .25rem 0; caption-side: bottom; }
.note-small { font-size: .8125rem !important; color: var(--ink-faint, #8a8a84) !important; }
.updated { font-size: .8125rem; color: var(--ink-faint, #8a8a84); margin: -1.25rem 0 1.5rem; }
.limit-bar-header .over, #limit-label.over { color: #b03a2e; font-weight: 600; }
.status-warn { color: #8a5a00; }
.status-dot.warn { background: #b86e14 !important; }

/* Word counter modules */
.tool-module { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--rule, #e2e0d8); border-radius: var(--radius-lg, 10px); background: var(--paper, #f7f6f2); }
.tool-module h2 { font-family: var(--serif, Georgia, serif); font-size: 1.15rem; margin-bottom: .75rem; }
.mod-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; font-size: .875rem; margin-bottom: .75rem; color: var(--ink-mid, #4a4a46); }
.mod-controls select, .goal-grid input, .goal-grid select, .speed-row select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--rule, #e2e0d8); border-radius: 6px; background: #fff; color: inherit; }
.mod-note { font-size: .8125rem; color: var(--ink-faint, #8a8a84); margin-top: .5rem; }
.mini-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.mini-stats > div { background: #fff; border: 1px solid var(--rule, #e2e0d8); border-radius: 8px; padding: .5rem .75rem; display: flex; flex-direction: column; }
.mini-stats b { font-family: var(--mono, monospace); font-size: 1.25rem; }
.letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: .35rem; }
.lt-cell { background: #fff; border: 1px solid var(--rule, #e2e0d8); border-radius: 6px; text-align: center; padding: .3rem 0; font-family: var(--mono, monospace); font-size: .8125rem; }
.lt-cell span { display: block; color: var(--ink-faint, #8a8a84); }
.lt-cell.zero b { color: var(--ink-faint, #8a8a84); font-weight: 400; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.goal-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .8125rem; color: var(--ink-mid, #4a4a46); font-weight: 600; }
.goal-result { font-size: .95rem; color: var(--ink, #1a1a18); margin-top: .75rem; line-height: 1.6; }
.speed-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: .875rem; color: var(--ink-mid, #4a4a46); margin: 1rem 0 0; align-items: center; }
.info-line { font-size: .875rem; color: var(--ink-mid, #4a4a46); margin-top: .75rem; line-height: 1.6; }
.info-line code, .culprits code { background: #fff; border: 1px solid var(--rule, #e2e0d8); border-radius: 4px; padding: 0 .3rem; }
.limit-bar-wrap { margin-top: 1rem; }
.limit-bar-track { height: 8px; background: var(--rule-light, #eeece6); border-radius: 4px; overflow: hidden; }
.limit-bar-fill { height: 100%; transition: width .2s; }
.limit-bar-header { display: flex; justify-content: space-between; margin-bottom: .35rem; }

/* Essay length facts */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1rem 0 1.5rem; }
.fact { background: var(--paper, #f7f6f2); border: 1px solid var(--rule, #e2e0d8); border-radius: 10px; padding: .75rem 1rem; }
.fact b { display: block; font-family: var(--mono, monospace); font-size: 1.2rem; color: var(--accent, #2b5c3f); }
.fact span { font-size: .8125rem; color: var(--ink-mid, #4a4a46); }

/* Percentage calculators */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin: .75rem 0 1rem; }
.pc-field { display: flex; flex-direction: column; gap: .3rem; font-size: .8125rem; font-weight: 600; color: var(--ink-mid, #4a4a46); }
.pc-input { display: flex; align-items: center; border: 1.5px solid var(--rule, #e2e0d8); border-radius: 8px; background: #fff; overflow: hidden; }
.pc-input:focus-within { border-color: var(--accent-mid, #4a8c66); }
.pc-input i { font-style: normal; padding: 0 .6rem; color: var(--ink-faint, #8a8a84); font-weight: 400; }
.pc-input input { border: 0; outline: 0; padding: .6rem .7rem; font: inherit; font-size: 1rem; font-weight: 400; width: 100%; min-width: 0; background: transparent; color: var(--ink, #1a1a18); }
.pc-field select { font: inherit; font-weight: 400; font-size: .95rem; padding: .55rem .6rem; border: 1.5px solid var(--rule, #e2e0d8); border-radius: 8px; background: #fff; }
.pc-input input[aria-invalid="true"] { color: #b03a2e; }
.calc-card h2.calc-title { font-size: 1.1rem; margin: 0 0 .25rem; border: 0; padding: 0; }
.result-steps { display: block; margin-top: .4rem; font-family: var(--mono, monospace); font-size: .8125rem; color: var(--ink-mid, #4a4a46); word-break: break-word; }
.result-label { display: block; }

/* QR */
.qr-warning { font-size: .8125rem; color: #8a5a00; margin-top: .5rem; min-height: 1em; }
.qr-meta { font-size: .75rem; color: var(--ink-faint, #8a8a84); text-align: center; margin-top: .25rem; }
#qr-output canvas { width: 100%; height: auto; max-width: 260px; image-rendering: pixelated; display: block; margin: 0 auto; }
.qr-fields { display: grid; gap: .75rem; }
.qr-fields label { display: flex; flex-direction: column; gap: .3rem; font-size: .8125rem; font-weight: 600; color: var(--ink-mid, #4a4a46); }
.qr-fields input[type=text], .qr-fields input[type=email], .qr-fields input[type=tel], .qr-fields input[type=password], .qr-fields textarea, .qr-fields select { font: inherit; font-weight: 400; padding: .6rem .75rem; border: 1.5px solid var(--rule, #e2e0d8); border-radius: 8px; background: #fff; }
.qr-fields .check { flex-direction: row; align-items: center; font-weight: 400; }

/* Sleep */
.mode-switch { display: inline-flex; border: 1px solid var(--ink-faint, #ccc); border-radius: 999px; overflow: hidden; margin-bottom: 1.25rem; }
.mode-switch button { font: inherit; font-size: .8rem; padding: .45rem 1rem; background: transparent; border: 0; cursor: pointer; color: inherit; }
.mode-switch button[aria-pressed="true"] { background: var(--accent, #2a4a3a); color: #fff; }

/* Affiliate recommendations */
.aff-slot { margin: 2.5rem 0 0; padding: 1.25rem; border: 1px solid var(--rule, #e2e0d8); border-radius: 10px; background: var(--paper, #f7f6f2); }
.aff-title { font-family: var(--mono, monospace); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint, #8a8a84); margin-bottom: .75rem; }
.aff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.aff-card { background: #fff; border: 1px solid var(--rule, #e2e0d8); border-radius: 8px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .4rem; }
.aff-name { font-weight: 600; color: var(--ink, #1a1a18); }
.aff-blurb { font-size: .875rem; color: var(--ink-mid, #4a4a46); flex: 1; line-height: 1.5; }
.aff-btn { align-self: flex-start; font-size: .8125rem; font-weight: 600; padding: .4rem .8rem; border-radius: 6px; background: var(--accent, #2b5c3f); color: #fff !important; text-decoration: none !important; }
.aff-disc { font-size: .75rem; color: var(--ink-faint, #8a8a84); margin-top: .75rem; }

/* Guides / articles */
.article { max-width: 720px; }
.article h2 { font-family: var(--serif, Georgia, serif); font-size: 1.375rem; margin: 2.25rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--rule-light, #eeece6); }
.article h3 { font-family: var(--serif, Georgia, serif); font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.article p, .article li { color: var(--ink-mid, #4a4a46); font-size: 1rem; line-height: 1.75; }
.article p { margin-bottom: 1rem; }
.article ul, .article ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.article li { margin-bottom: .35rem; }
.article .lead { font-size: 1.1rem; color: var(--ink, #1a1a18); }
.article .callout { background: var(--accent-light, #e8f2ec); border-left: 3px solid var(--accent-mid, #4a8c66); padding: .9rem 1.1rem; border-radius: 0 8px 8px 0; margin: 1.25rem 0; }
.article .callout p:last-child { margin-bottom: 0; }
.article code { font-family: var(--mono, monospace); font-size: .875em; background: var(--paper, #f7f6f2); border: 1px solid var(--rule, #e2e0d8); border-radius: 4px; padding: 0 .3rem; }
.article pre { font-family: var(--mono, monospace); font-size: .8125rem; background: var(--paper, #f7f6f2); border: 1px solid var(--rule, #e2e0d8); border-radius: 8px; padding: .9rem 1rem; overflow-x: auto; margin: 0 0 1rem; line-height: 1.55; }
.article table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .5rem 0 1.25rem; }
.article th, .article td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--rule-light, #eeece6); vertical-align: top; }
.article th { font-family: var(--mono, monospace); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint, #8a8a84); border-bottom-color: var(--rule, #e2e0d8); }
.article td { color: var(--ink-mid, #4a4a46); }
.toc { background: var(--paper, #f7f6f2); border: 1px solid var(--rule, #e2e0d8); border-radius: 10px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.toc p { font-family: var(--mono, monospace); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint, #8a8a84); margin-bottom: .4rem !important; }
.toc ol { margin: 0 !important; }
.tool-cta { display: inline-block; margin: .25rem 0 1rem; padding: .6rem 1rem; border-radius: 8px; background: var(--accent, #2b5c3f); color: #fff !important; font-weight: 600; text-decoration: none !important; }
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; margin: 1rem 0 2rem; padding: 0 !important; list-style: none; }
.card-list li { margin: 0; }
.card-list a { display: block; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--rule, #e2e0d8); border-radius: 10px; background: var(--paper, #f7f6f2); color: var(--ink, #1a1a18); text-decoration: none; }
.card-list a:hover { border-color: var(--accent-mid, #4a8c66); background: var(--accent-light, #e8f2ec); }
.card-list b { display: block; font-family: var(--serif, Georgia, serif); font-size: 1.05rem; margin-bottom: .25rem; }
.card-list span { font-size: .875rem; color: var(--ink-mid, #4a4a46); line-height: 1.5; }

/* Home page extras */
.home-section { padding: 2rem 0; border-bottom: 1px solid #d4d0c8; }
.home-section h2 { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #9a9690; margin-bottom: 1rem; font-weight: 400; }
.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.pill-list a { display: inline-block; padding: .35rem .75rem; border: 1px solid #d4d0c8; border-radius: 999px; color: #4a4740; text-decoration: none; font-size: .8rem; }
.pill-list a:hover { border-color: #2a4a3a; color: #2a4a3a; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* live mini summary (phones/tablets only) */
.live-mini { display: none; margin-right: auto; align-self: center; font-family: var(--sans); font-size: .85rem; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .live-mini { display: inline; } }