/* Circuit -- electronic components and a winding PCB trace, with an
   animated 7-segment LCD clock fed by "data packets" travelling the
   board. See templates/partials/circuit-board.html and static/js/circuit.js
   for the animated scene; everything below it is a normal TTB v2
   area/widget page skinned to look like the rest of the board. */

:root {
  --board: #0a2016;
  --board-deep: #061510;
  --copper: #d9a75c;
  --copper-bright: #f0c483;
  --led: #4dff9e;
  --led-dim: #12331f;
  /* The LCD's lit segments/colon use this instead of --led for as long
     as they're only showing the frozen 00:00:00 placeholder rather
     than a real reading -- see .cb-unset below and circuit.js's
     markClockLive(). */
  --led-unset: #ff4d4d;
  --text: #d8ecdf;
  --muted: #85a596;
  --panel-bg: rgba(10, 32, 22, 0.78);
  --panel-border: rgba(217, 167, 92, 0.35);
  --panel-shadow: rgba(0, 0, 0, 0.55);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --radius: 10px;
  /* Banner (the IC/track/LCD scene) height, as a fraction of the
     theme's original 1000:260 design ratio -- change this one number
     to make the banner taller/shorter; everything inside it (the SVG
     viewBox, the IC/LCD's percentage-based positions) scales with it
     since it's still driven by the same aspect-ratio. */
  --cb-banner-scale: 0.5;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--board-deep);
  line-height: 1.6;
}
a { color: var(--copper-bright); }
a:hover { color: var(--led); }

.page { min-height: 100vh; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ---------------------------------------------------------- the scene --- */

.cb-root { width: 100%; }
.cb-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / calc(260 * var(--cb-banner-scale));
  min-height: calc(130px * var(--cb-banner-scale));
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(6, 18, 12, 0.35), rgba(6, 18, 12, 0.65)),
    url("../img/circuit-bg.png");
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--copper);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.cb-track-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cb-track-path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cb-track-path-base { stroke: var(--board); stroke-width: 11; }
.cb-track-path-core {
  stroke: var(--copper);
  stroke-width: 4.5;
  filter: drop-shadow(0 0 3px rgba(217, 167, 92, 0.85));
}
.cb-packet {
  fill: #ffd873;
  filter: drop-shadow(0 0 4px rgba(255, 216, 115, 0.9));
}

.cb-ic {
  /* Vertically centered (rather than a fixed top:%) so it's always
     fully inside the scene regardless of the scene's actual height --
     see --cb-banner-scale and its responsive overrides below, which
     change that height at narrower widths. */
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  /* No ceiling on purpose: the track's start point is a fixed 17% from
     the left (see templates/partials/circuit-board.html's path `d`),
     so the IC has to keep growing at the same 11%-of-width rate to
     stay under it at every width, not just the ones a fixed max-width
     happens to have been tuned against. */
  width: max(40px, 11%);
  aspect-ratio: 9 / 7;
  background: linear-gradient(180deg, #2c2c30, #121214);
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cb-ic::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  width: 8%;
  height: 8%;
  min-width: 4px;
  min-height: 4px;
  border-radius: 50%;
  background: #8c8c86;
}
.cb-ic-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #86867f;
  font: 700 clamp(9px, 1.4vw, 13px) var(--mono);
  letter-spacing: 1px;
}

.cb-lcd {
  /* Same reasoning as .cb-ic above -- vertically centered so the LCD
     (and the track end it sits on) never overflows a shorter scene. */
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  /* No ceiling, same reasoning as .cb-ic above -- the track ends at a
     fixed 83% from the left, which is this box's own horizontal center
     (right:3% and this width both being percentages keeps "right-edge
     minus half the width" landing on 83% at every width), so the LCD
     has to keep growing at the same 28%-of-width rate to stay centered
     on it. */
  width: max(128px, 28%);
}
.cb-lcd-glass {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.6vw, 6px);
  padding: clamp(8px, 1.6vw, 14px) clamp(6px, 1.2vw, 12px);
  background: linear-gradient(180deg, #1c1c1c, #0a0a0a);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.15s ease;
}
.cb-lcd-glass::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, #163326, #0d2118);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.65);
  z-index: 0;
}
.cb-lcd-glass.cb-pulse::before {
  box-shadow: inset 0 0 20px rgba(77, 255, 158, 0.55);
}
.cb-lcd-glass.cb-pulse {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 18px rgba(77, 255, 158, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cb-digit {
  position: relative;
  z-index: 1;
  width: clamp(12px, 2.6vw, 24px);
  aspect-ratio: 11 / 21;
}
.cb-colon {
  position: relative;
  z-index: 1;
  width: clamp(4px, 0.8vw, 8px);
  aspect-ratio: 4 / 21;
}
.cb-colon i {
  position: absolute;
  left: 25%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--led-dim);
}
.cb-colon i:first-child { top: 28%; }
.cb-colon i:last-child { top: 58%; }
.cb-colon i { background: var(--led); box-shadow: 0 0 5px var(--led); }
/* Frozen 00:00:00 placeholder (see .cb-unset below): the colon dots
   still light up (it's not blank), just red instead of green, so it's
   visually obvious this isn't a real reading yet. */
.cb-lcd-glass.cb-unset .cb-colon i { background: var(--led-unset); box-shadow: 0 0 5px var(--led-unset); }

.cb-seg {
  position: absolute;
  background: var(--led-dim);
  transition: background 0.12s, box-shadow 0.12s;
}
.cb-seg.on { background: var(--led); box-shadow: 0 0 5px var(--led), 0 0 11px rgba(77, 255, 158, 0.6); }
/* Same "not a real reading yet" red as the colon above -- removed the
   instant the clock actually starts (circuit.js markClockLive()), so
   the whole display jumps to its normal green in one step rather than
   fading, matching how the colon and every other segment change. */
.cb-lcd-glass.cb-unset .cb-seg.on {
  background: var(--led-unset);
  box-shadow: 0 0 5px var(--led-unset), 0 0 11px rgba(255, 77, 77, 0.6);
}
.cb-seg-a, .cb-seg-d, .cb-seg-g {
  left: 14%; width: 72%; height: 9%;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}
.cb-seg-a { top: 0; }
.cb-seg-g { top: 45.5%; }
.cb-seg-d { top: 91%; }
.cb-seg-b, .cb-seg-c, .cb-seg-e, .cb-seg-f {
  width: 18%; height: 40%;
  clip-path: polygon(0 10%, 50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%);
}
.cb-seg-f { left: 0; top: 5%; }
.cb-seg-b { left: 82%; top: 5%; }
.cb-seg-e { left: 0; top: 51%; }
.cb-seg-c { left: 82%; top: 51%; }

/* The scene's own width:100% means it (and the IC/LCD/track inside it,
   all positioned proportionally) scale down together at any width --
   nothing here repositions or hides them. The one thing that doesn't
   scale for free is *height*: aspect-ratio ties it to width alone, so
   on a narrow phone the banner would otherwise get too short for the
   IC and LCD to stay legible. These breakpoints only ever override
   --cb-banner-scale (taller relative to width, the narrower it gets)
   to keep enough vertical room -- see the variable's own comment. */
@media (max-width: 900px) {
  .cb-root { --cb-banner-scale: 0.75; }
}
@media (max-width: 600px) {
  .cb-root { --cb-banner-scale: 1.3; }
}
@media (max-width: 380px) {
  .cb-root { --cb-banner-scale: 1.6; }
}

/* ------------------------------------------------------- areas/widgets --- */

.area-header { margin: 1.75rem 0 1.25rem; }
.area-header .tb-header-inner {
  display: flex; align-items: center; justify-content: center;
  min-height: 90px; text-align: center;
}
.area-header h1, .area-header h2 {
  margin: 0; letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(77, 255, 158, 0.35);
}

.page-columns {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  margin-top: 1rem;
}
.area-main, .area-main-view { flex: 1 1 auto; min-width: var(--tb-main-min-w, 0); }
.area-sidebar.sidebar-left { flex: 0 0 var(--tb-sidebar-left-w, 280px); min-width: 0; }
.area-sidebar.sidebar-right { flex: 0 0 var(--tb-sidebar-right-w, 280px); min-width: 0; }

.area-main, .area-main-view, .area-sidebar, .area-footer {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}
.area-main, .area-main-view { padding: 0.25rem; }
.area-sidebar { padding: 1.1rem 1.25rem; }
.area-footer { margin-top: 1.5rem; padding: 0.9rem 1.25rem; text-align: center; font-size: 0.85rem; color: var(--muted); }

.tb-widget { padding: 1.25rem 1.4rem; margin-bottom: 1rem; border-radius: 8px; }
.area-main > .tb-widget:last-child,
.area-main-view > .tb-widget:last-child,
.area-sidebar > .tb-widget:last-child { margin-bottom: 0; }

.tb-widget-title {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--copper-bright);
}

.tb-filter-banner {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.75rem 1.4rem;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 0.5rem;
}
.tb-filter-banner select, .tb-filter-banner input {
  background: var(--board-deep); color: var(--text);
  border: 1px solid var(--panel-border); border-radius: 6px;
  padding: 0.35rem 0.55rem; font-size: 0.85rem;
}
.tb-filter-banner button {
  background: var(--copper); color: #16150f; border: none;
  border-radius: 6px; padding: 0.4rem 0.9rem; font-weight: 600; cursor: pointer;
}
.tb-filter-banner button:hover { background: var(--copper-bright); }

.tb-post-card, .tb-post-full {
  padding: 1.4rem 1.5rem;
  margin: 0.75rem;
  background: rgba(6, 20, 13, 0.55);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.area-main > .tb-post-card:first-child,
.area-main > .tb-post-full:first-child,
.area-main > article:first-child,
.area-main-view > .tb-post-card:first-child,
.area-main-view > .tb-post-full:first-child,
.area-main-view > article:first-child { margin-top: 1rem; }
.tb-post-card:hover { border-color: var(--copper); transform: translateY(-2px); }
.tb-post-card h3 a, .tb-post-full h1 { color: var(--text); text-decoration: none; }
.tb-post-card h3 a:hover { color: var(--led); }
.tb-post-date { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.6rem; font-family: var(--mono); }
.tb-post-excerpt { color: var(--text); opacity: 0.88; }
.tb-read-more { color: var(--copper-bright); font-weight: 600; text-decoration: none; font-size: 0.88rem; }
.tb-read-more:hover { color: var(--led); }
.tb-empty { text-align: center; color: var(--muted); font-style: italic; padding: 2.5rem 1rem; }

.tb-page-matrix { display: grid; gap: 1rem; padding: 0.75rem; }
.tb-matrix-box {
  display: flex; align-items: flex-end; padding: 1rem;
  border-radius: 8px; background: rgba(6, 20, 13, 0.6);
  border: 1px solid var(--panel-border);
  text-decoration: none; color: var(--text);
  min-height: 120px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tb-matrix-box:hover { border-color: var(--copper); box-shadow: 0 0 14px rgba(217, 167, 92, 0.25); }
.tb-matrix-square { aspect-ratio: 1; }
.tb-matrix-title { font-weight: 600; }

.tb-post-content { margin-top: 1.25rem; }
.tb-post-content img { max-width: 100%; border-radius: 8px; }
.tb-post-content pre {
  background: rgba(0, 0, 0, 0.4); padding: 1rem; border-radius: 8px; overflow-x: auto;
  border: 1px solid var(--panel-border);
}
.tb-post-content blockquote {
  border-left: 3px solid var(--copper); margin-left: 0; padding-left: 1rem; color: var(--muted);
}
.tb-post-content a { color: var(--copper-bright); }

/* archive: year > month roll-up, see widgets.py render_blog_archive */
.tb-archive-year { margin-bottom: 1rem; }
.tb-archive-year:last-child { margin-bottom: 0; }
.tb-archive-year > summary {
  cursor: pointer; list-style: none; font-weight: 700; color: var(--copper-bright);
}
.tb-archive-year > summary::-webkit-details-marker { display: none; }
.tb-archive-month { margin: 0.5rem 0 0.5rem 1rem; }
.tb-archive-month summary { cursor: pointer; list-style: none; color: var(--muted); }
.tb-archive-month summary::-webkit-details-marker { display: none; }
.tb-archive-month ul, .tb-archive-group ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.tb-archive-month li, .tb-archive-group li { margin-bottom: 0.4rem; }
.tb-archive-month a, .tb-archive-group a { color: var(--text); text-decoration: none; font-size: 0.9rem; }
.tb-archive-month a:hover, .tb-archive-group a:hover { color: var(--led); }
.tb-archive-group > summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--copper-bright); }
.tb-archive-group > summary::-webkit-details-marker { display: none; }

.tb-tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tb-tag-chip {
  padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem;
  background: rgba(217, 167, 92, 0.12); border: 1px solid var(--panel-border);
  color: var(--copper-bright); text-decoration: none;
}
.tb-tag-chip:hover { background: rgba(77, 255, 158, 0.15); color: var(--led); border-color: var(--led); }

.tb-more {
  display: block; text-align: center; margin: 1rem;
  padding: 0.6rem; border-radius: 6px;
  background: rgba(217, 167, 92, 0.1); border: 1px solid var(--panel-border);
  color: var(--copper-bright); text-decoration: none; font-weight: 600;
}
.tb-more:hover { color: var(--led); border-color: var(--led); }

.back-link { display: inline-block; margin-top: 1.5rem; color: var(--copper-bright); text-decoration: none; }
.back-link:hover { color: var(--led); }