/* ================= THEME TOKENS (Auto by default) ================= */
:root{
  --bg:#0b0f14; --fg:#e7edf3; --muted:#9aa4b2; --line:#4b5563; --link:#86e1ff;
  --page-w: 92ch; --sidebar: 26ch; --pad: 14px; --linew: 1px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#fafafa; --fg:#0b1220; --muted:#475569; --line:#cbd5e1; --link:#0369a1; }
}
/* Radios flip variables without JS */
body:has(#t-dark:checked){
  --bg:#0a0a0a; --fg:#e5e7eb; --muted:#9ca3af; --line:#52525b; --link:#7dd3fc;
}
body:has(#t-light:checked){
  --bg:#f7f7f7; --fg:#0b1220; --muted:#475569; --line:#cbd5e1; --link:#0369a1;
}
body:has(#t-amber:checked){
  --bg:#0b0900; --fg:#ffefc3; --muted:#d7c68e; --line:#9a7d39; --link:#f6c453;
}
body:has(#t-green:checked){
  --bg:#020a04; --fg:#c1ffbf; --muted:#8adf90; --line:#267a2f; --link:#7ffa9d;
}

/* ================= BASE ================= */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-text-size-adjust:100%;
}
a{ color:var(--link); text-decoration:none; }
a:hover,a:focus{ text-decoration:underline; }
.page{
  max-width: min(var(--page-w), 100vw - 2rem);
  margin: 1rem auto 2rem;
}

/* ================= ASCII SKIN (copy-friendly) ================= */
.ascii-box{
  position:relative; padding: var(--pad);
  border: var(--linew) solid var(--line); background: transparent;
}
.stack > .ascii-box{ margin:0; }
.stack > .ascii-box + .ascii-box{ margin-top: calc(-1 * var(--linew)); }

/* ASCII corners as glyphs that don't affect selection */
.ascii-box::before, .ascii-box::after{
  content:""; position:absolute; width:1ch; height:1em; line-height:1;
  pointer-events:none; user-select:none; color:var(--fg);
  z-index: 1;
}
.ascii-box::before{ content:"┌"; left:-0.55ch; top:-1.2em; }
.ascii-box::after { content:"┐"; right: -0.55ch; top:-1.2em; }
.corners{ position:absolute; inset:auto 0 0 0; height:0; pointer-events:none; user-select:none; z-index: 1; }
.corners::before, .corners::after{
  content:"└"; position:absolute; bottom:-1.3em; left:-0.55ch; color:var(--fg);
  width:1ch; height:1em; line-height:1;
}
.corners::after{ content:"┘"; left:auto; right:-0.55ch; }

.hr{ height:1px; background:var(--line); margin:.75rem 0; }
.muted{ color:var(--muted); }

/* ================= HEADER ================= */
.header .theme{
  display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.5rem;
}
.theme label{ display:inline-flex; gap:.35rem; align-items:center; cursor:pointer; }
.theme input{ inline-size: 1rem; block-size: 1rem; }

/* ================= CONTENT GRID ================= */
.pane{
  padding:0;
}
.grid{
  display:grid; grid-template-columns: var(--sidebar) 1px 1fr;
  align-items:start;
}
.divider{ background:var(--line); align-self:stretch; }
aside{ padding: var(--pad); position:sticky; top: 1rem; }
main { padding: var(--pad); }

/* ================= FOOTER ================= */
footer p{ margin:.25rem 0; }

/* ================= MOBILE ================= */
@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; }
  .divider{ display:none; }
  aside{ position:static; }
}

/* ================= CONTENT STYLES ================= */
article h1, article h2, article h3 { font-size: 1rem; margin: 1rem 0 0.5rem 0; }
article p { margin: 0.75rem 0; line-height: 1.4; }
article ul, article ol { margin: 0.75rem 0; padding-left: 1.5rem; }
article li { margin: 0.25rem 0; }
article pre { background: var(--bg); border: var(--linew) solid var(--line); padding: 0.75rem; margin: 0.75rem 0; overflow-x: auto; }
article code { background: var(--bg); border: var(--linew) solid var(--line); padding: 0.125rem 0.25rem; }
article pre code { background: none; border: none; padding: 0; }

/* ================= ENHANCED FOOTER ================= */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.theme-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.theme-picker select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: inherit;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
}

.theme-picker select:focus {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Theme data attribute approach for JS persistence */
html[data-theme="dark"]{
  --bg:#0a0a0a; --fg:#e5e7eb; --muted:#9ca3af; --line:#52525b; --link:#7dd3fc;
}
html[data-theme="light"]{
  --bg:#f7f7f7; --fg:#0b1220; --muted:#475569; --line:#cbd5e1; --link:#0369a1;
}
html[data-theme="amber"]{
  --bg:#0b0900; --fg:#ffefc3; --muted:#d7c68e; --line:#9a7d39; --link:#f6c453;
}
html[data-theme="green"]{
  --bg:#020a04; --fg:#c1ffbf; --muted:#8adf90; --line:#267a2f; --link:#7ffa9d;
}

/* ================= DIGEST ENHANCEMENTS ================= */
.link-section {
  margin-bottom: 1.5rem;
}

.tag-header {
  color: var(--link);
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.digest-link {
  margin-bottom: 0.5rem;
}

.digest-link p {
  margin: 0.25rem 0 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.topic-tag {
  color: var(--link);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}