/* miris.dev — engineering frostpane
   japanese-minimal × frosted laboratory · translucent-frost palette */

:root {
  --frostbase: #F4F8FB;   /* page background */
  --mist:      #E6EEF5;   /* large frostpane fill */
  --glaze:     #CFDDE9;   /* frostpane stroke / telemetry strip */
  --steel:     #6F8AA6;   /* primary text, labels, katakana */
  --deeppane:  #21344A;   /* display heading, hero phrase, contrast */
  --indicator: #9FBED6;   /* live values, ticking numbers, passes */
  --ember:     #C97A5F;   /* single warm accent — failures only */
  --hairline:  #4A6B8A;   /* sub-labels, timestamps, gutter labels */
  --gutter: 1.6vw;
  --ma: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 350;
  font-size: 15px;
  line-height: 1.55;
  color: var(--steel);
  background: var(--frostbase);
  background-image: linear-gradient(to bottom, #F4F8FB 0%, #EFF5FA 50%, #E6EEF5 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

code, .frametime-caption, .build-status time, .log-hash, .barcode-tip,
.fps-value, .hash-body code, .heat-caption, .thermal-readout,
.telemetry-char, .pane-id, .gantt-now span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* ----------------------------------------------------------------
   TIER 0 — background frost field
   ---------------------------------------------------------------- */
.tier0 {
  position: fixed;
  inset: -6vw;
  z-index: 0;
  filter: blur(18px);
  pointer-events: none;
  will-change: transform;
}
.conic-field {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg at 60% 40%,
    #E6EEF5, #CFDDE9, #9FBED6, #CFDDE9, #E6EEF5);
  opacity: 0.06;
  animation: slowSpin 220s linear infinite;
}
@keyframes slowSpin { to { transform: rotate(360deg); } }
.isobars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.isobars path {
  fill: none;
  stroke: var(--indicator);
  stroke-width: 1.4;
  opacity: 0.22;
}

/* ----------------------------------------------------------------
   DASHBOARD — the frostpane grid
   ---------------------------------------------------------------- */
.dashboard {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: var(--ma);
  padding: var(--ma) 8vw;
}

/* Frostpane base */
.pane {
  position: relative;
  background: rgba(230, 238, 245, 0.78);
  border: 1.5px solid var(--glaze);
  border-radius: 2px;
  padding: 18px 20px;
  overflow: hidden;
  transition: border-color 240ms ease-out, filter 360ms ease-out;
  /* one-time frost-in clip-path animation, set by JS class .frosted */
}
.pane::before {
  /* frost-crystal dendrite stroke pattern, ~8% opacity */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(63deg, transparent 0 5px, rgba(159,190,214,0.6) 5px 6px, transparent 6px 12px),
    repeating-linear-gradient(-21deg, transparent 0 9px, rgba(207,221,233,0.7) 9px 10px, transparent 10px 18px);
  -webkit-mask-image:
    linear-gradient(to right, #000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px) 100%),
    linear-gradient(to bottom, #000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px) 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  opacity: 0.08;
  transition: transform 320ms ease-out, opacity 320ms ease-out;
  transform-origin: center;
}
.pane:hover { border-color: var(--indicator); filter: saturate(1.03); }
.pane:hover::before { transform: scale(1.06); opacity: 0.1; }
.pane:hover .pane-title { font-variation-settings: "wght" 520; }

/* clip-path frost-in: panes start collapsed to center, expand outward */
.pane {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
.pane.frosted {
  clip-path: polygon(50% -40%, 140% 28%, 140% 72%, 50% 140%, -40% 72%, -40% 28%);
  transition: clip-path 900ms cubic-bezier(.22,.61,.36,1);
}

/* Pane headers */
.pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pane-title {
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--deeppane);
  font-variation-settings: "wght" 500;
  transition: font-variation-settings 240ms cubic-bezier(.33,1,.68,1);
}
.pane-id {
  font-size: 10.5px;
  color: var(--hairline);
  letter-spacing: 0.04em;
}

/* katakana stamp — exactly once, upper-left of LIVE BUILD */
.katakana {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--steel);
  opacity: 0.7;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   GRID PLACEMENT — irregular fukinsei, sized by data weight
   ---------------------------------------------------------------- */
.pane--build   { grid-column: 1 / 8;  grid-row: 1 / 5;  }   /* largest 7x4 */
.pane--log     { grid-column: 8 / 11; grid-row: 1 / 6;  }   /* 3x5 */
.pane--thermal { grid-column: 11 / 13; grid-row: 1 / 11; }  /* narrow 2-col full height */
.pane--roadmap { grid-column: 1 / 6;  grid-row: 5 / 9;  }   /* 5x4 */
.pane--heatmap { grid-column: 6 / 9;  grid-row: 6 / 11; }   /* 3x5 */
.pane--circle  { grid-column: 9 / 11; grid-row: 6 / 11; }   /* 2x5 */
.pane--fps     { grid-column: 1 / 3;  grid-row: 9 / 11; }   /* 2x2 */
.pane--hash    { grid-column: 3 / 5;  grid-row: 9 / 11; }   /* 2x2 */
.pane--members { grid-column: 5 / 6;  grid-row: 9 / 11; }   /* 1x2 narrow strip */

/* ----------------------------------------------------------------
   LIVE BUILD pane
   ---------------------------------------------------------------- */
.build-body { display: flex; flex-direction: column; height: calc(100% - 25px); gap: 16px; }
.frametime {
  position: relative;
  flex: 1;
  min-height: 120px;
}
.frametime-graph {
  position: absolute;
  inset: 0 0 18px 0;
  width: 100%;
  height: calc(100% - 18px);
  display: block;
}
.frametime-graph .bar { fill: var(--indicator); }
.frametime-graph .bar.spike { fill: var(--ember); }
.frametime-axis { position: absolute; inset: 0 0 18px 0; pointer-events: none; }
.axis-line {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px dashed rgba(74,107,138,0.4);
}
.axis-line em {
  position: absolute;
  right: 2px;
  top: -13px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-style: normal;
  color: var(--hairline);
  background: rgba(244,248,251,0.7);
  padding: 0 3px;
}
.axis-60 { top: 47%; border-top-color: rgba(201,122,95,0.55); }   /* 16.67ms */
.axis-30 { top: 0%;  border-top-color: rgba(74,107,138,0.45); }   /* 33.33ms (top of 16ms*2 scale)? amber */
.axis-30 { top: 8%;  border-top-color: rgba(201,122,95,0.3); }
.frametime-caption {
  position: absolute;
  left: 0; bottom: 0;
  font-size: 9.5px;
  color: var(--hairline);
}
.build-status {
  list-style: none;
  font-size: 13px;
  line-height: 1.85;
  color: var(--steel);
}
.build-status b { color: var(--indicator); font-weight: 500; }
.build-status time {
  font-size: 11px;
  color: var(--hairline);
  margin-left: 6px;
}
.ind { display: inline-block; width: 1.1em; font-size: 11px; }
.ind-pass { color: var(--indicator); }
.ind-prog { color: var(--steel); }
.ind-last { color: var(--hairline); }
.ind-idle { color: var(--glaze); }

/* ----------------------------------------------------------------
   CIRCLE LOG pane — commit barcode
   ---------------------------------------------------------------- */
.log-body { position: relative; display: flex; flex-direction: column; height: calc(100% - 25px); gap: 14px; }
.barcode {
  width: 100%;
  height: 86px;
  display: block;
  flex: none;
}
.barcode line { stroke: var(--steel); stroke-width: 1; vector-effect: non-scaling-stroke; }
.barcode line:hover { stroke: var(--indicator); }
.barcode-tip {
  position: absolute;
  z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--deeppane);
  background: rgba(244,248,251,0.97);
  border: 1px solid var(--glaze);
  border-radius: 2px;
  padding: 6px 8px;
  pointer-events: none;
  max-width: 220px;
  white-space: pre-line;
}
.log-list {
  list-style: none;
  font-size: 12.5px;
  line-height: 1.7;
  flex: 1;
  overflow: hidden;
}
.log-list a {
  color: var(--steel);
  text-decoration: none;
  display: block;
  position: relative;
  padding-bottom: 2px;
}
.log-list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--indicator);
  transition: width 120ms ease-out;
}
.log-list a:hover::after { width: 100%; }
.log-hash {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--hairline);
  margin-right: 6px;
}
.ember { color: var(--ember); }

/* ----------------------------------------------------------------
   ROADMAP pane — gantt stripe
   ---------------------------------------------------------------- */
.roadmap-body { position: relative; height: calc(100% - 25px); padding-top: 4px; }
.gantt { list-style: none; display: flex; flex-direction: column; gap: 9px; height: 100%; justify-content: center; }
.gantt li {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  height: 22px;
}
.gantt .task {
  position: absolute;
  left: 0; top: -1px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--hairline);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}
.gantt .bar {
  position: absolute;
  top: 11px;
  height: 6px;
  left: var(--s);
  width: var(--w);
  border-radius: 1px;
}
.gantt .t1 .bar { background: #4A6B8A; }
.gantt .t2 .bar { background: #6F8AA6; }
.gantt .t3 .bar { background: #9FBED6; }
.gantt .t4 .bar { background: #6F8AA6; opacity: 0.75; }
.gantt .t5 .bar { background: #4A6B8A; opacity: 0.8; }
.gantt-now {
  position: absolute;
  top: 0; bottom: 0;
  left: 38%;
  width: 1.5px;
  background: var(--ember);
  z-index: 3;
}
.gantt-now span {
  position: absolute;
  top: -2px;
  left: 4px;
  font-size: 9px;
  color: var(--ember);
}

/* ----------------------------------------------------------------
   INPUT HEATMAP pane — 9x16 grid
   ---------------------------------------------------------------- */
.heatmap-body { position: relative; height: calc(100% - 25px); display: flex; flex-direction: column; gap: 10px; }
.heatgrid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 2px;
  min-height: 96px;
}
.heatgrid span {
  border-radius: 1px;
  background: rgba(159,190,214,0.12);
}
.heat-caption { font-size: 9.5px; color: var(--hairline); }

/* ----------------------------------------------------------------
   FPS / HASH / MEMBERS small panes
   ---------------------------------------------------------------- */
.fps-body, .hash-body { display: flex; flex-direction: column; justify-content: center; height: calc(100% - 25px); gap: 4px; }
.fps-value {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 500;
  color: var(--indicator);
  line-height: 1;
}
.fps-sub, .hash-sub { font-size: 9.5px; color: var(--hairline); font-family: 'JetBrains Mono', monospace; }
.hash-body code {
  font-size: 13px;
  color: var(--steel);
}
.member-list {
  list-style: none;
  font-size: 11px;
  line-height: 1.65;
  height: calc(100% - 25px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.member-list .ind { font-size: 8px; width: 1.4em; }
.member-list .m-task { display: block; font-size: 9px; color: var(--hairline); padding-left: 1.4em; margin-top: -2px; }

/* ----------------------------------------------------------------
   THERMAL pane — narrow vertical
   ---------------------------------------------------------------- */
.thermal-body { display: flex; flex-direction: column; height: calc(100% - 25px); gap: 8px; }
.thermal-col {
  flex: 1;
  position: relative;
  background: rgba(159,190,214,0.1);
  border-radius: 1px;
  overflow: hidden;
}
.thermal-col::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--fill, 50%);
  background: linear-gradient(to top, #9FBED6, #6F8AA6);
  transition: height 1.4s ease-in-out;
}
#thermalGpu::after { background: linear-gradient(to top, #9FBED6, #4A6B8A); }
.thermal-readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.thermal-readout span { display: flex; justify-content: space-between; }
.thermal-readout i { font-style: normal; color: var(--hairline); }
.thermal-readout b { color: var(--indicator); font-weight: 500; }

/* ----------------------------------------------------------------
   CIRCLE pane — frost photo + line
   ---------------------------------------------------------------- */
.circle-body { display: flex; flex-direction: column; gap: 12px; height: calc(100% - 25px); }
.frost-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 160px;
  border-radius: 1px;
  opacity: 0.35;
  filter: grayscale(1) contrast(1.1);
  background:
    radial-gradient(circle at 50% 50%, rgba(33,52,74,0.1) 0 8%, transparent 9%),
    repeating-conic-gradient(from 0deg at 50% 50%, #21344A 0deg 4deg, transparent 4deg 12deg),
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.5), transparent 40%),
    radial-gradient(circle at 70% 72%, rgba(159,190,214,0.4), transparent 45%),
    #cfdde9;
  background-blend-mode: normal, screen, screen, screen, normal;
}
.circle-line { font-size: 11.5px; line-height: 1.6; color: var(--steel); }

/* ----------------------------------------------------------------
   TELEMETRY STRIP — 1px hairline at 61.8% vertical
   ---------------------------------------------------------------- */
.telemetry-strip {
  position: fixed;
  left: 0; right: 0;
  top: 61.8%;
  height: 1px;
  background: var(--glaze);
  z-index: 50;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}
.telemetry-strip.drawn { transform: scaleX(1); transition: transform 800ms cubic-bezier(.22,.61,.36,1); }
.telemetry-char {
  position: absolute;
  top: -14px;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--steel);
  white-space: nowrap;
  opacity: 0;
}

/* ----------------------------------------------------------------
   BREATH-FOG OVERLAY — topmost, pointer-events none
   ---------------------------------------------------------------- */
.breath-fog {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.06;
}
.breath-fog svg { width: 100%; height: 100%; }
#fogHole { transition: cx 600ms ease-out, cy 600ms ease-out; }

/* ----------------------------------------------------------------
   CIRCLE PROSE — below the fold, one section, drop-cap only
   ---------------------------------------------------------------- */
.circle-prose {
  position: relative;
  z-index: 3;
  max-width: 64ch;
  margin: 14vh auto 16vh;
  padding: 0 8vw;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--deeppane);
}
.circle-prose p { margin-bottom: 1.4em; }
.circle-prose .ember { color: var(--ember); }
.dropcap {
  float: left;
  font-size: 3.1em;
  line-height: 0.86;
  font-weight: 600;
  padding: 0.06em 0.08em 0 0;
  color: var(--steel);
}

/* ----------------------------------------------------------------
   RESPONSIVE — collapse to single vertical column, ma non-negotiable
   ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .dashboard {
    display: flex;
    flex-direction: column;
    padding: var(--ma) 5vw;
    gap: var(--ma);
    min-height: auto;
  }
  .pane { min-height: 200px; }
  .pane--build { min-height: 360px; }
  .pane--thermal { min-height: 220px; }
  .pane--thermal .thermal-body { flex-direction: row; }
  .pane--thermal .thermal-col { min-height: 120px; }
  .pane--thermal .thermal-readout { flex: none; justify-content: center; }
  .telemetry-strip { display: none; }
  .breath-fog { display: none; }
}
@media (max-width: 640px) {
  .dashboard { padding: var(--ma) 24px; }
  .circle-prose { padding: 0 24px; font-size: 16px; }
  .pane { padding: 16px; }
}