/*
  phanosha.com — site styles
  Colors come from Flexoki (MIT, github.com/kepano/flexoki), mapped to the
  semantic tokens documented at stephango.com/flexoki: bg, bg-2, ui, ui-2,
  ui-3, tx-3, tx-2, tx. Layout and components are original to this site.
*/

/* ── Semantic tokens ──────────────────────────── */
:root,
.theme-light {
  --bg:      var(--flexoki-paper);
  --bg-2:    var(--flexoki-50);
  --ui:      var(--flexoki-100);
  --ui-2:    var(--flexoki-150);
  --ui-3:    var(--flexoki-200);
  --tx-3:    var(--flexoki-300);
  --tx-2:    var(--flexoki-600);
  --tx:      var(--flexoki-black);

  --action:  var(--flexoki-blue-600);
  --accent:  var(--flexoki-orange-600);
  --mark:    var(--flexoki-yellow-100);
  --select:  rgba(146, 191, 219, 0.35);
  --live:    var(--flexoki-green-600);
}

.theme-dark {
  --bg:      var(--flexoki-black);
  --bg-2:    var(--flexoki-950);
  --ui:      var(--flexoki-900);
  --ui-2:    var(--flexoki-850);
  --ui-3:    var(--flexoki-800);
  --tx-3:    var(--flexoki-700);
  --tx-2:    var(--flexoki-500);
  --tx:      var(--flexoki-200);

  --action:  var(--flexoki-blue-400);
  --accent:  var(--flexoki-orange-400);
  --mark:    var(--flexoki-yellow-900);
  --select:  rgba(22, 59, 102, 0.55);
  --live:    var(--flexoki-green-400);
}

:root {
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica,
          Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 37em;
  --small: 0.875em;
  --smaller: 0.8em;
}

/* ── Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  padding: 2rem 1.5rem 12rem;
  max-width: var(--wrap);
  background-color: var(--bg);
  color: var(--tx);
  color-scheme: light dark;
  font-family: var(--font);
  font-size: calc(1.5rem + 0.25vw);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--select); }

small, .small { font-size: var(--small); line-height: 1.4; }
.smaller      { font-size: var(--smaller); line-height: 1.4; }
.muted        { color: var(--tx-2); }
.faint        { color: var(--tx-3); }
.nowrap       { white-space: nowrap; }
.tabular      { font-variant-numeric: tabular-nums; }

p { margin: 0 0 1em; }

a {
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: var(--ui-3);
  text-underline-offset: 2px;
}
a:hover { color: var(--action); text-decoration-color: var(--action); }
a.plain, a.muted { text-decoration: none; }
a.muted { color: var(--tx-2); }
a.muted:hover, a.plain:hover { color: var(--action); }

hr {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 3.5rem 0;
  background: var(--ui);
}

h1, h2, h3 { line-height: 1.3; }

h1 {
  font-weight: 500;
  font-size: calc(1.35em + 0.55vw);
  letter-spacing: -0.02em;
  margin: 0 0 0.25em;
}

h2 {
  font-weight: 500;
  font-size: calc(1em + 0.2vw);
  letter-spacing: -0.015em;
  margin: 0 0 0.25em;
}

/* Section label — small, uppercase, spaced */
.label {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tx-2);
  margin: 0 0 1.25em;
}

/* Collapsible section. The summary keeps .label's type and gains a +/-
   affordance on the right; the native disclosure triangle is removed. */
details.section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}

details.section > summary::-webkit-details-marker { display: none; }

details.section > summary::after {
  content: '+';
  font-weight: 400;
  color: var(--tx-3);
}

details.section[open] > summary::after { content: '\2212'; }

details.section > summary:hover,
details.section > summary:focus-visible { color: var(--tx); }

/* Collapsed, the summary's own bottom margin is the only spacing needed. */
details.section[open] > summary { margin-bottom: 1.25em; }

/* ── Nav ──────────────────────────────────────── */
nav {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 3em;
}

nav .site-name { flex-grow: 1; font-weight: 500; }
nav .nav-links { display: flex; gap: 1.25em; font-size: var(--small); }

/* ── Theme toggle ─────────────────────────────── */
#theme-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--ui-2);
  border-radius: 999px;
  background: transparent;
  position: relative;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#theme-toggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tx-2);
  transition: left 0.12s ease-out, background-color 0.12s ease-out;
}

.theme-dark #theme-toggle::after { left: 15px; }
#theme-toggle:hover::after { background: var(--action); }
#theme-toggle:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* ── Bio ──────────────────────────────────────── */
.bio { max-width: 34em; }
.bio + .bio { margin-top: -0.35em; }


/* ── Featured ─────────────────────────────────── */
.feature { display: block; }
.feature h2 { color: var(--tx); }
.feature:hover h2 { color: var(--action); }
.feature .metadata { margin-bottom: 0.5em; }

/* ── Lists ────────────────────────────────────── */
ul.list-plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.list-plain > li {
  padding: 0.4em 0;
  line-height: 1.45;
}

/* Project status dot: live / coming soon / retired */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.6em;
  vertical-align: middle;
  position: relative;
  top: -0.08em;
}

.dot--live    { background: var(--live); }
.dot--soon    { background: var(--tx-3); }
.dot--retired { background: transparent; border: 1px solid var(--tx-3); }

.i-tags {
  color: var(--tx-3);
  font-size: var(--smaller);
  white-space: nowrap;
}

/* Horizontal link row (About > Elsewhere) */
.inline-list { display: flex; flex-wrap: wrap; gap: 1.5em; }
.inline-list li { margin: 0; }

/* Status legend on the projects page */
.legend { margin-top: -0.35em; }
.legend .dot { margin-left: 1.25em; }
.legend .dot:first-child { margin-left: 0; }

/* Year-grouped rows: year gutter + title */
.year {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 0 1em;
  align-items: baseline;
  padding: 0.4em 0;
}

.year-label {
  font-size: var(--small);
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

.entry-source {
  color: var(--tx-3);
  font-size: var(--smaller);
}

/* ── Footer ───────────────────────────────────── */
footer {
  margin-top: 4em;
  padding-top: 1.5em;
  border-top: 1px solid var(--ui);
  color: var(--tx-3);
  font-size: var(--small);
}

/* ── Article (post.html) ──────────────────────── */
article { padding-bottom: 2em; }
article h1 { margin-top: 0; }
article h2 { margin: 1.75em 0 0.5em; }
article h3 { font-size: 1em; font-weight: 600; margin: 1.5em 0 0.5em; }
article p, article li { color: var(--tx); }

article ul, article ol { padding-left: 1.25em; margin: 0 0 1.25em; }
article li { padding: 0.15em 0; }
article li::marker { color: var(--tx-3); }

article blockquote {
  margin: 1.5em 0;
  padding-left: 1.25em;
  border-left: 2px solid var(--ui-3);
  color: var(--tx-2);
}
article blockquote p:last-child { margin-bottom: 0; }

/* Photos in posts: full column width, never taller than the viewport, so a
   portrait shot doesn't push the whole article off the screen. */
article img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  margin: 1.75em auto;
  border-radius: 6px;
  background: var(--bg-2);
}

code, kbd {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border-radius: 4px;
  padding: 0.1em 0.3em;
  font-size: 90%;
}

pre {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--ui);
  border-radius: 4px;
  padding: 1em;
  font-size: 90%;
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

mark { background: var(--mark); color: var(--tx); }

.post-meta { color: var(--tx-2); font-size: var(--small); margin-bottom: 2.5em; }
.status { color: var(--tx-2); }

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 600px) {
  body { padding: 1.5rem 1.25rem 8rem; }
  .year { grid-template-columns: 3.5em 1fr; }
  nav { gap: 0.75em; }
  nav .nav-links { gap: 1em; }
}