/* noble.log — terminal theme */
:root {
  --bg: #0a0d0b;
  --bg-2: #0f1411;
  --panel: #121914;
  --line: #1f2a22;
  --text: #d6e0d8;
  --dim: #7d8c81;
  --accent: #5df29a;      /* phosphor green */
  --accent-2: #f2c45d;    /* amber */
  --link: #8fd8ff;
  --danger: #ff7b72;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 6px;
  --side: 260px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(circle at 80% -10%, rgba(93,242,154,.06), transparent 45%);
  color: var(--text);
  font: 16px/1.7 var(--sans);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--accent); color: var(--bg); }
.dim { color: var(--dim); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--accent); color: var(--bg); padding: .4rem .8rem; z-index: 99; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── layout ───────────────────────── */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.content { max-width: 820px; width: 100%; padding: 3rem 2.5rem 2rem; }
.topbar { display: none; }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 2rem;
  padding: 2rem 1.4rem;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  font-family: var(--mono);
}
.brand { display: flex; gap: .8rem; align-items: flex-start; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand strong { display: block; font-size: 1.05rem; color: var(--accent); }
.brand small { display: block; color: var(--dim); font-size: .72rem; line-height: 1.5; margin-top: .25rem; }
.avatar {
  flex: none; width: 42px; height: 42px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--accent);
  color: var(--accent); font-weight: 700;
}
.nav { display: flex; flex-direction: column; gap: .15rem; }
.nav a {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .45rem .6rem; border-radius: var(--radius);
  color: var(--text); font-size: .9rem;
}
.nav a:hover { background: var(--panel); text-decoration: none; }
.nav a.active { background: var(--panel); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.cmd { color: var(--accent-2); font-family: var(--mono); font-size: .85em; min-width: 3.6em; display: inline-block; }
.nav .cmd { min-width: 3.8em; }
.social { margin-top: auto; display: flex; gap: 1rem; font-size: .8rem; }
.social a { color: var(--dim); }
.social a:hover { color: var(--accent); }

/* ── type ─────────────────────────── */
h1, h2, h3 { font-family: var(--mono); line-height: 1.25; color: #eef4ef; }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 .6rem; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; margin: 2.2rem 0 .8rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.lede { color: var(--dim); font-size: 1.08rem; margin: 0; }
.page-title { margin-bottom: .3rem; }
.page-title .cmd { min-width: 0; margin-right: .5rem; font-size: .7em; }
.section-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.count { font-family: var(--mono); font-size: .75rem; color: var(--dim); background: var(--panel); border: 1px solid var(--line); padding: .05rem .4rem; border-radius: 99px; vertical-align: middle; }
.more { display: inline-block; margin-top: 1rem; font-family: var(--mono); font-size: .85rem; }

/* ── hero ─────────────────────────── */
.hero { padding: 1rem 0 2rem; }
.term { font-family: var(--mono); font-size: .85rem; color: var(--dim); margin: 0 0 .8rem; }
.prompt { color: var(--accent); font-family: var(--mono); }
.cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor, .pulse { animation: none !important; } }

/* ── status cards ─────────────────── */
.status { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.status-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.status-card h2 { margin: 0 0 .7rem; font-size: .85rem; color: var(--dim); font-weight: 600; }
.status-card .cmd { min-width: 0; margin-right: .3rem; }
.status-card ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.status-card li { display: flex; align-items: center; gap: .55rem; padding: .15rem 0; }
.status-card ul.inline { display: flex; flex-wrap: wrap; gap: .4rem; }
.status-card ul.inline li { font-family: var(--mono); font-size: .75rem; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); }
.status-card .more { margin-top: .7rem; font-size: .8rem; }
.pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 0 rgba(242,196,93,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(242,196,93,0); } 100% { box-shadow: 0 0 0 0 rgba(242,196,93,0); } }

/* ── post list ────────────────────── */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: 1.3rem 0; border-bottom: 1px dashed var(--line); }
.post-list time { font-family: var(--mono); font-size: .78rem; color: var(--accent-2); }
.post-list h3 { margin: .25rem 0 .4rem; font-size: 1.12rem; }
.post-list h3 a { color: #eef4ef; }
.post-list h3 a:hover { color: var(--accent); text-decoration: none; }
.post-list p { margin: 0 0 .5rem; color: var(--dim); font-size: .95rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.tag { font-family: var(--mono); font-size: .72rem; color: var(--accent); background: rgba(93,242,154,.07); border: 1px solid rgba(93,242,154,.22); padding: .1rem .5rem; border-radius: 4px; }
.tag::before { content: "#"; opacity: .6; }
.tag:hover { background: rgba(93,242,154,.15); text-decoration: none; }
.tag .count { border: 0; background: none; padding: 0 0 0 .2rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.tag-group { scroll-margin-top: 1.5rem; }
.tag-group h2 { color: var(--accent); }

/* ── archives ─────────────────────── */
.year { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.archive { list-style: none; padding: 0; margin: 0; }
.archive li { display: flex; gap: 1.2rem; padding: .45rem 0; align-items: baseline; }
.archive time { font-family: var(--mono); font-size: .8rem; color: var(--dim); flex: none; min-width: 5.5em; }

/* ── certs ────────────────────────── */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cert { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
.cert h3 { margin: .6rem 0 .2rem; font-size: .95rem; }
.cert p { margin: 0 0 .5rem; font-size: .85rem; }
.cert a { font-family: var(--mono); font-size: .8rem; }
.badge { font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; padding: .1rem .45rem; border-radius: 3px; }
.cert-earned { border-top: 2px solid var(--accent); }
.cert-earned .badge { background: rgba(93,242,154,.12); color: var(--accent); }
.cert-in-progress { border-top: 2px solid var(--accent-2); }
.cert-in-progress .badge { background: rgba(242,196,93,.12); color: var(--accent-2); }
.cert-planned .badge { background: var(--bg-2); color: var(--dim); }

/* ── post ─────────────────────────── */
.post-head { border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; margin-bottom: 1.8rem; }
.meta { font-family: var(--mono); font-size: .8rem; color: var(--dim); margin: 0 0 .6rem; }
.meta time { color: var(--accent-2); }
.meta .dot { margin: 0 .35rem; }
.cat { color: var(--accent); }
.prose > :first-child { margin-top: 0; }
.prose h2 { padding-top: .5rem; }
.prose h2::before { content: "## "; color: var(--accent); opacity: .6; }
.prose h3::before { content: "### "; color: var(--accent); opacity: .5; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.prose blockquote { margin: 1.4rem 0; padding: .8rem 1.1rem; border-left: 3px solid var(--accent-2); background: var(--panel); color: var(--text); border-radius: 0 var(--radius) var(--radius) 0; }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px dashed var(--line); margin: 2rem 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .25rem 0; }
.prose li::marker { color: var(--accent); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1.4rem 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.prose th { background: var(--panel); font-family: var(--mono); font-size: .8rem; color: var(--accent); }

code { font-family: var(--mono); font-size: .86em; background: var(--panel); border: 1px solid var(--line); padding: .1em .35em; border-radius: 4px; color: var(--accent-2); }
pre, div.highlight, figure.highlight { margin: 1.4rem 0; }
pre { background: #070908 !important; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; line-height: 1.55; font-size: .85rem; position: relative; }
pre code { background: none; border: 0; padding: 0; color: var(--text); font-size: inherit; }
.copy-btn { position: absolute; top: .5rem; right: .5rem; font: .7rem var(--mono); color: var(--dim); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: .2rem .5rem; cursor: pointer; opacity: 0; transition: opacity .15s; }
pre:hover .copy-btn, .copy-btn:focus { opacity: 1; }
.copy-btn:hover { color: var(--accent); }

/* rouge syntax */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs { color: #5f7066; font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kt { color: #ff9e64; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sh { color: #a5e07c; }
.highlight .nf, .highlight .nx, .highlight .na { color: #8fd8ff; }
.highlight .mi, .highlight .mf, .highlight .m { color: #f2c45d; }
.highlight .nv, .highlight .vg, .highlight .vi { color: #e0a0ff; }
.highlight .o, .highlight .p { color: #a7b4aa; }
.highlight .nb, .highlight .bp { color: #5df29a; }
.highlight .gp { color: #5df29a; user-select: none; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pager a { display: block; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-size: .92rem; }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager small { display: block; font-family: var(--mono); color: var(--dim); font-size: .72rem; margin-bottom: .2rem; }
.pager .next { text-align: right; }

/* ── search ───────────────────────── */
.search-box { display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1rem; margin: 1.5rem 0 1rem; }
.search-box:focus-within { border-color: var(--accent); }
.search-box .prompt { white-space: nowrap; font-size: .85rem; }
.search-box input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 1rem var(--mono); }
mark { background: rgba(242,196,93,.25); color: inherit; padding: 0 .1em; border-radius: 2px; }

.footer { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .75rem; color: var(--dim); }

/* ── mobile ───────────────────────── */
@media (max-width: 860px) {
  .shell { display: block; }
  .topbar {
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 20;
    padding: .8rem 16px; background: rgba(10,13,11,.92); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line); font-family: var(--mono);
  }
  .topbar-brand { color: var(--accent); font-weight: 600; }
  .menu-btn { background: none; border: 1px solid var(--line); color: var(--text); border-radius: var(--radius); font-size: 1.1rem; padding: .2rem .6rem; cursor: pointer; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 30; width: min(82vw, 300px);
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
  .content { padding: 1.8rem 16px 2rem; }
  .status { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .archive li { gap: .8rem; }
}