/* OrbitFocus site styles (non-Tailwind). Fonts are self-hosted. */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 500;
  src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 600;
  src: url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }

body { font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Space Grotesk', 'Inter Variable', sans-serif; font-weight: 600; }

/* ---- original dashboard styles ---- */
.glass { background: rgb(var(--slate-400) / .1); backdrop-filter: blur(20px); border: 1px solid rgb(var(--slate-400) / .2); }
.section-card { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1); }
.section-card:hover { transform: translateY(-1px); }
.task-item { transition: all .15s cubic-bezier(.4,0,.2,1); }
.task-item:hover { background-color: rgb(var(--slate-400) / .12); }
.task-item.completed { opacity: .6; }
.task-item.completed .task-text { text-decoration: line-through; color: rgb(var(--slate-500)); }
.timer-circle { transition: stroke-dashoffset .3s ease; }
.stat-value { font-variant-numeric: tabular-nums; }
.quote-text { font-size: .95rem; line-height: 1.5; }
.modal { animation: modalPop .2s cubic-bezier(.34,1.56,.64,1); }
@keyframes modalPop { from { opacity: 0; transform: scale(.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.focus-ring:focus { outline: none; box-shadow: 0 0 0 3px rgb(var(--indigo-400) / .35); }
.history-item { transition: background .1s; }
.history-item:hover { background: rgb(var(--slate-400) / .1); }
.nav-tab { position: relative; }
.nav-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: rgb(var(--indigo-400)); }


/* ---- shared chrome ---- */
.skip-link { position: absolute; left: -999px; top: 0; background: rgb(var(--indigo-600)); color: #fff; padding: .5rem 1rem; z-index: 100; border-radius: 0 0 .75rem 0; }
.skip-link:focus { left: 0; }
.site-header { border-bottom: 1px solid rgb(var(--slate-800)); background: rgb(var(--slate-950) / .88); }
.nav-link { padding: .4rem .65rem; border-radius: .75rem; color: rgb(var(--slate-400)); transition: color .15s, background .15s; }
.nav-link:hover { color: rgb(var(--slate-100)); background: rgb(var(--slate-900)); }
.nav-link.is-current { color: rgb(var(--slate-50)); background: rgb(var(--slate-800)); }
.site-footer { border-top: 1px solid rgb(var(--slate-800)); margin-top: 3rem; background: rgb(var(--slate-950)); }
.site-footer a { color: rgb(var(--slate-400)); }
.site-footer a:hover { color: rgb(var(--slate-50)); text-decoration: underline; }
.site-footer ul { margin-top: .75rem; display: grid; gap: .45rem; }
.footer-h { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--slate-500)); font-weight: 600; }
a:focus-visible, button:focus-visible { outline: 2px solid rgb(var(--indigo-400)); outline-offset: 2px; }
.crumbs { font-size: .8rem; color: rgb(var(--slate-500)); margin-bottom: 1.25rem; }
.crumbs a { color: rgb(var(--slate-400)); } .crumbs a:hover { color: rgb(var(--slate-50)); text-decoration: underline; }

/* ---- article typography ---- */
.prose-orbit { font-size: 1.0625rem; line-height: 1.75; color: rgb(var(--slate-300)); }
.prose-orbit h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.65rem; line-height: 1.25; font-weight: 600; color: rgb(var(--slate-100)); margin: 2.5rem 0 .9rem; letter-spacing: -.01em; scroll-margin-top: 1rem; }
.prose-orbit h3 { font-size: 1.15rem; font-weight: 600; color: rgb(var(--slate-200)); margin: 1.75rem 0 .5rem; }
.prose-orbit p { margin: 0 0 1.1rem; }
.prose-orbit .lead { font-size: 1.2rem; color: rgb(var(--slate-200)); }
.prose-orbit a { color: rgb(var(--indigo-300)); text-decoration: underline; text-underline-offset: 3px; }
.prose-orbit a:hover { color: rgb(var(--slate-50)); }
.prose-orbit header a { color: rgb(var(--indigo-300)); }
.prose-orbit ul, .prose-orbit ol { margin: 0 0 1.25rem 1.25rem; padding-left: .5rem; }
.prose-orbit ul { list-style: disc; } .prose-orbit ol { list-style: decimal; }
.prose-orbit li { margin: .4rem 0; padding-left: .25rem; }
.prose-orbit li::marker { color: rgb(var(--indigo-400)); }
.prose-orbit strong { color: rgb(var(--slate-100)); font-weight: 600; }
.prose-orbit code, .prose-orbit kbd { background: rgb(var(--slate-800)); border: 1px solid rgb(var(--slate-700)); border-radius: .375rem; padding: .05rem .4rem; font-size: .88em; color: rgb(var(--slate-200)); }
.prose-orbit .sources ol { font-size: .9rem; line-height: 1.6; }
.prose-orbit .sources h2 { font-size: 1.25rem; margin-top: 2rem; }
.cmp { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.5rem; font-size: .95rem; display: block; overflow-x: auto; }
.cmp th, .cmp td { border: 1px solid rgb(var(--slate-800)); padding: .65rem .8rem; text-align: left; vertical-align: top; min-width: 9rem; }
.cmp thead th { background: rgb(var(--slate-900)); color: rgb(var(--slate-100)); }
.cmp tbody th { background: rgb(var(--slate-900)); color: rgb(var(--slate-200)); font-weight: 600; }
.cta-box { margin: 2.5rem 0 1rem; padding: 1.5rem; border-radius: 1.5rem; border: 1px solid rgb(var(--slate-700)); background: linear-gradient(135deg, rgb(var(--indigo-600) / .2), rgb(var(--slate-900) / .6)); }
.cta-box h2 { margin-top: 0; font-size: 1.35rem; }
.btn-primary, .prose-orbit a.btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 1.5rem; border-radius: 1rem; background: rgb(var(--indigo-600)); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .15s; }
.btn-primary:hover, .prose-orbit a.btn-primary:hover { background: rgb(var(--indigo-500)); color: #fff; }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 1.5rem; border-radius: 1rem; background: rgb(var(--slate-800)); color: rgb(var(--slate-200)); font-weight: 600; font-size: .95rem; margin-left: .5rem; }

/* ---- cards, tools, related ---- */
.guide-cards { list-style: none !important; margin: 1.25rem 0 !important; padding: 0 !important; display: grid; gap: .9rem; grid-template-columns: 1fr; }
.guide-cards li { margin: 0; padding: 0; }
.guide-cards a, .related a { display: block; height: 100%; padding: 1rem 1.15rem; border: 1px solid rgb(var(--slate-800)); border-radius: 1.1rem; background: rgb(var(--slate-900)); text-decoration: none !important; transition: border-color .15s, background .15s; color: rgb(var(--slate-300)); }
.guide-cards a:hover, .related a:hover { border-color: rgb(var(--indigo-600)); background: rgb(var(--slate-900)); }
.guide-cards strong, .related strong { display: block; color: rgb(var(--slate-100)); margin-bottom: .25rem; }
.guide-cards span, .related span { display: block; font-size: .9rem; line-height: 1.5; color: rgb(var(--slate-400)); }
@media (min-width: 640px) { .guide-cards:not(.guide-cards-lg) { grid-template-columns: 1fr 1fr; } }
.tools-box { margin: 3rem 0 1.5rem; padding: 1.5rem; border: 1px solid rgb(var(--slate-800)); border-radius: 1.5rem; background: rgb(var(--slate-900)); line-height: 1.7; }
.tools-box h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 600; color: rgb(var(--slate-100)); margin-bottom: .6rem; }
.tools-box a { color: rgb(var(--indigo-300)); text-decoration: underline; text-underline-offset: 3px; }
.tools-list { list-style: none; margin: 1rem 0; display: grid; gap: .8rem; }
.tools-list li { display: grid; gap: .15rem; }
.tools-list span { color: rgb(var(--slate-400)); font-size: .95rem; }
.related { margin: 2rem 0; }
.related h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 600; color: rgb(var(--slate-100)); margin-bottom: .8rem; }
.related ul { list-style: none; display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .related ul { grid-template-columns: 1fr 1fr; } }

/* ---- home: about section under the timer ---- */
.home-about { margin-top: 3rem; padding: 1.75rem; border: 1px solid rgb(var(--slate-800)); border-radius: 1.5rem; background: rgb(var(--slate-900)); color: rgb(var(--slate-400)); line-height: 1.7; max-width: 60rem; }
.home-about h2 { color: rgb(var(--slate-100)); margin-bottom: .75rem; }
.home-about p { margin-bottom: .9rem; }
.home-about .guide-cards a { background: rgb(var(--slate-950)); }

@media (max-width: 480px) { .prose-orbit { font-size: 1rem; } .prose-orbit h2 { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ================= v2: themes, logo, background, backup, settings ================= */
html { background: rgb(var(--slate-950)); }
body { color: rgb(var(--slate-200)); }
::placeholder { color: rgb(var(--slate-500)); opacity: 1; }
select, input, textarea { color: inherit; }
.timer-track { stroke: rgb(var(--slate-800)); }
.timer-ring { stroke: rgb(var(--indigo-400)); }
.logo-link { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.logo-mark { width: 2.25rem; height: 2.25rem; flex: none; display: block; }
.logo-word { font-family: 'Space Grotesk', 'Inter Variable', sans-serif; font-weight: 600; font-size: 1.75rem; letter-spacing: -.035em; color: rgb(var(--slate-100)); line-height: 1; }
.logo-word em { font-style: normal; color: rgb(var(--indigo-400)); }
.logo-link:hover .logo-word { color: rgb(var(--slate-50)); }
.cog-btn { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 1rem; background: rgb(var(--slate-900)); border: 1px solid rgb(var(--slate-800)); transition: background .15s; }
.cog-btn:hover { background: rgb(var(--slate-800)); }

/* theme picker */
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.theme-chip { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: .9rem; border: 1px solid rgb(var(--slate-700)); background: rgb(var(--slate-950)); font-size: .78rem; font-weight: 500; color: rgb(var(--slate-200)); text-align: left; line-height: 1.15; }
.theme-chip:hover { border-color: rgb(var(--slate-500)); }
.theme-chip[aria-checked="true"] { border-color: rgb(var(--indigo-400)); box-shadow: 0 0 0 2px rgb(var(--indigo-400) / .45); }
.theme-swatch { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid; flex: none; display: grid; place-items: center; }
.theme-swatch i { width: .5rem; height: .5rem; border-radius: 50%; display: block; }
.footer-theme { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; color: rgb(var(--slate-400)); }
.footer-theme select { background: rgb(var(--slate-900)); color: rgb(var(--slate-200)); border: 1px solid rgb(var(--slate-700)); border-radius: .6rem; padding: .3rem .5rem; font-size: .8rem; }

/* settings modal */
#settings-modal > div { max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; }
.set-sec { border-top: 1px solid rgb(var(--slate-800)); padding-top: 1.1rem; }
.set-h { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: rgb(var(--slate-100)); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.btn-s { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.5rem; padding: .35rem 1rem; border-radius: .9rem; font-size: .82rem; font-weight: 600; background: rgb(var(--slate-800)); color: rgb(var(--slate-100)); border: 1px solid rgb(var(--slate-700)); transition: background .15s; }
.btn-s:hover { background: rgb(var(--slate-700)); }
.btn-s[hidden], [hidden] { display: none !important; }
.btn-danger { color: rgb(var(--red-400)); }
.btn-g { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.75rem; padding: .4rem 1.1rem; border-radius: 1rem; font-size: .92rem; font-weight: 600; background: #ffffff; color: #1f1f1f; border: 1px solid #747775; }
.btn-g:hover { background: #f0f4f9; }
.btn-g svg { width: 1.15rem; height: 1.15rem; flex: none; }
input[type=range] { width: 100%; accent-color: rgb(var(--indigo-400)); }
.g-banner { border: 1px solid rgb(var(--indigo-400) / .55); background: linear-gradient(135deg, rgb(var(--indigo-600) / .22), rgb(var(--slate-900) / .9)); border-radius: 1.5rem; padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.g-banner h2 { font-weight: 600; font-size: 1rem; color: rgb(var(--slate-100)); }
.g-banner p { font-size: .85rem; color: rgb(var(--slate-300)); margin-top: .15rem; }

/* custom background layer (home only) */
#bg-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#bg-media { position: absolute; inset: 0; }
#bg-media .bg-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#bg-shade { position: absolute; inset: 0; background: rgb(var(--slate-950)); opacity: .4; }
body.has-bg { background: transparent !important; }
body.has-bg > header, body.has-bg > main, body.has-bg > footer { position: relative; z-index: 1; }
body.has-bg .section-card { background-color: rgb(var(--slate-900) / .78) !important; backdrop-filter: blur(6px); }
body.has-bg .site-header, body.has-bg .site-footer, body.has-bg .home-about { background: rgb(var(--slate-950) / .82); }

/* high contrast: strong borders and underlined links */
:root[data-theme="contrast"] [class*="border-slate-"], :root[data-theme="contrast"] .site-header, :root[data-theme="contrast"] .site-footer { border-color: #fff; }
:root[data-theme="contrast"] a { text-decoration: underline; }
:root[data-theme="contrast"] .btn-g { border-color: #fff; }
:root[data-theme="contrast"] .g-banner, :root[data-theme="contrast"] .cta-box { border-color: #fff; }
@media (max-width: 480px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-word { font-size: 1.5rem; } .logo-mark { width: 2rem; height: 2rem; } }

/* ---- Contact form (v3) ---- */
.cf { max-width: 38rem; margin: 1.5rem 0 0; }
.cf-row { margin: 0 0 1.25rem; }
.cf label { display: block; font-weight: 600; color: rgb(var(--slate-100)); margin: 0 0 .4rem; font-size: .98rem; }
.cf .cf-opt, .cf .cf-req { font-weight: 400; color: rgb(var(--slate-400)); font-size: .85rem; }
.cf input[type=text], .cf input[type=email], .cf textarea { width: 100%; background: rgb(var(--slate-900)); color: rgb(var(--slate-100)); border: 1px solid rgb(var(--slate-600)); border-radius: .75rem; padding: .7rem .9rem; font: inherit; font-size: 1rem; line-height: 1.5; }
.cf textarea { resize: vertical; min-height: 9rem; }
.cf input:focus-visible, .cf textarea:focus-visible { outline: 2px solid rgb(var(--indigo-400)); outline-offset: 1px; border-color: rgb(var(--indigo-400)); }
.cf .cf-help { margin: .35rem 0 0; font-size: .82rem; color: rgb(var(--slate-400)); }
.cf .cf-note, .cf-note { font-size: .88rem; color: rgb(var(--slate-400)); margin: 1rem 0 0; }
.cf .cf-actions { margin: 1.5rem 0 0; }
.cf .btn-primary { cursor: pointer; border: 0; }
.cf .btn-primary:disabled { opacity: .7; cursor: progress; }
.cf-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cf-status { margin: 1.25rem 0 0; outline: none; }
.cf-status:empty { display: none; }
.cf-msg { margin: 0; padding: .85rem 1rem; border-radius: .75rem; border: 1px solid; font-weight: 500; }
.cf-ok { background: rgb(var(--emerald-900)); border-color: rgb(var(--emerald-500)); color: rgb(var(--slate-50)); }
.cf-err { background: rgb(var(--slate-900)); border-color: rgb(var(--red-400)); color: rgb(var(--red-400)); }