/* Change log page (founder 2026-10-18: "Build a change log standalone page like the status page", then
   "Design it like this page https://status.tanimawoai.com" and "Make sure it's the full container width").
   The values here are READ OFF the live status board, not guessed: nav #071A40 at 100px tall over a #F7F7FC
   canvas, Space Grotesk headings (h1 56px), JetBrains Mono for the small-caps labels, accent #5B45FF, a soft
   violet glow behind the hero, and its tab strip (mono 11px with a 2px accent underline on the active tab).
   Self-contained on purpose: the main site forces data-theme="dark" and this page reads light like status.
   Square corners throughout: nginx injects square.css on every page (border-radius: 0 !important). */

.cl-body {
  --canvas: #f7f7fc; --panel: #fff; --panel-2: #f0f0fb;
  --rule: rgba(10,14,26,.09); --rule-2: rgba(10,14,26,.16);
  --ink: #0d1126; --ink-2: #4d5372; --ink-3: #7a7f9a;
  --accent: #5b45ff; --accent-2: #0091c9; --gold: #c98a00;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --head: "Space Grotesk", Inter, "Segoe UI", sans-serif;
  --hero-glow: radial-gradient(60% 70% at 50% 0%, rgba(91,69,255,.12), transparent 70%);
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--head); -webkit-font-smoothing: antialiased;
  /* Belt and braces only. NOTE: overflow-x on <body> is propagated to the viewport instead of clipping
     here, so it does NOT contain an over-wide child - the hero glow is sized to 100% below for that. */
  overflow-x: hidden;
}
/* The status board's own container: full width with a gutter, not a narrow centred column
   (founder 2026-10-18: "Make sure it's the full container width"). */
.cl-wrap { width: calc(100% - 64px); margin: 0 auto; padding: 34px 0 0; }
.cl-mono { font-family: var(--mono); }
.cl-micro { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

/* --- top bar --- */
.cl-nav { background: #071a40; border-bottom: 1px solid var(--rule); }
/* flex-wrap keeps the last button from running off a 320px screen and scrolling the page sideways. */
.cl-nav-in { width: calc(100% - 64px); margin: 0 auto; min-height: 100px; flex-wrap: wrap;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cl-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.cl-brand img { width: 62px; height: 62px; display: block; }
.cl-brand-sub { font: 600 12px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #a6b8db;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.16); }
.cl-nav-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-pill { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: #a6b8db; padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); }
.cl-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.cl-nav-btn { font-size: .9rem; font-weight: 600; color: #e8eefb; text-decoration: none;
  padding: 10px 15px; border: 1px solid rgba(255,255,255,.18); }
.cl-nav-btn:hover { color: #7fd8f5; border-color: var(--accent-2); }

/* --- hero --- */
.cl-hero { text-align: center; padding: 56px 0 8px; position: relative; }
.cl-hero::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1100px, 100%); height: 520px;
  transform: translateX(-50%); background: var(--hero-glow); pointer-events: none; z-index: 0; }
.cl-hero > * { position: relative; z-index: 1; }
.cl-hero h1 { margin: 0 0 14px; font-size: clamp(2.2rem, 5.2vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.cl-lede { margin: 0 auto; max-width: 640px; font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }
.cl-stamp { margin: 22px 0 0; }
.cl-stamp b { color: var(--gold); font-weight: 600; }

/* --- stat row, like the status board's cards --- */
.cl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 34px 0 0;
  background: var(--panel); border: 1px solid var(--rule); }
.cl-stats div { padding: 20px 24px; border-left: 1px solid var(--rule); }
.cl-stats div:first-child { border-left: 0; }
.cl-stats b { display: block; font: 700 2rem/1.1 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.cl-stats span { display: block; margin-top: 7px; }

/* --- tab strip --- */
.cl-tabs { display: flex; gap: 4px; margin: 46px 0 22px; border-bottom: 1px solid var(--rule-2); overflow-x: auto; scrollbar-width: none; }
.cl-tabs::-webkit-scrollbar { display: none; }
.cl-tabs button { flex-shrink: 0; padding: 14px 16px; background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; }
.cl-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.cl-tabs button:hover { color: var(--ink); }
.cl-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* --- releases --- */
.cl-rel { background: var(--panel); border: 1px solid var(--rule); margin: 0 0 20px; }
.cl-rel[hidden] { display: none; }
.cl-rel-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 18px 24px; border-bottom: 1px solid var(--rule); background: var(--panel-2); }
.cl-date { font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.cl-rel-t { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--ink-2); }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 15px 24px; border-top: 1px solid var(--rule); }
.cl-list li:first-child { border-top: 0; }
.cl-list li[hidden] { display: none; }
.cl-list p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.cl-list p small { display: block; margin-top: 4px; font-size: .9rem; line-height: 1.5; color: var(--ink-3); }

.cl-tag { justify-self: start; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 10px; border: 1px solid; white-space: nowrap; }
.cl-new   { color: #15803d; background: #eaf6ee; border-color: #b7dfc4; }
.cl-better{ color: #0091c9; background: #e6f6fd; border-color: #a9ddf2; }
.cl-fix   { color: #b26b00; background: #fff4e0; border-color: #f1d19b; }
.cl-gone  { color: #b3261e; background: #fdeceb; border-color: #f3c2bf; }

/* --- foot --- */
.cl-foot { border-top: 1px solid var(--rule); background: var(--panel); margin-top: 54px; }
.cl-foot-in { width: calc(100% - 64px); margin: 0 auto; padding: 28px 0; display: flex; gap: 16px;
  flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: .92rem; color: var(--ink-2); }
.cl-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.cl-foot a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .cl-wrap, .cl-nav-in, .cl-foot-in { width: calc(100% - 32px); }
  .cl-nav-in { min-height: 76px; }
  .cl-brand img { width: 46px; height: 46px; }
  .cl-brand-sub, .cl-pill { display: none; }
  .cl-hero { padding-top: 38px; }
  .cl-stats { grid-template-columns: minmax(0, 1fr); }
  .cl-stats div { border-left: 0; border-top: 1px solid var(--rule); }
  .cl-stats div:first-child { border-top: 0; }
  .cl-list li { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 15px 16px; }
  .cl-rel-h { padding: 16px; }
}