/*
  helio.css — page-specific styles for /helio/, /helio/<n> and
  /helio/archive ONLY.

  Standing rule 21a: a stylesheet used by three pages does not belong in
  styles.css, because putting it there would force a ?v= bump on all 37
  pages every time a HELIO layout detail changes. The only HELIO rules
  that legitimately live in styles.css are the statusbar sun state,
  because that genuinely is site-wide.

  Standing rule 20: the COLUMN is the measure. Nothing below sets a
  max-width narrower than its own container.

  Solar palette. Deliberately warm, and deliberately the only warm
  surface on the site — HELIO should feel like a different temperature
  from everything else, not a recolour of it.
*/
:root{
  --helio-core:#FFC24A;
  --helio-flame:#F0761E;
  --helio-ember:#B8340C;
  --helio-ash:#5E1704;
  --helio-line:rgba(255,150,40,0.28);
  --helio-line-strong:rgba(255,164,56,0.55);
  --helio-panel:rgba(48,22,6,0.42);
}

/* Full width, like the other self-contained artifact pages. NOT the
   shared .wide-read class — a local main{} rule cannot outrank
   main.wide-read{} on specificity while the class is still present, so
   the two must never be combined. */
main.helio-main{grid-template-columns:1fr;}
main.helio-main > article{max-width:none;min-width:0;}

/* Standing rule 17: `hidden` only works through the UA stylesheet, and
   ANY author display: rule outranks it. Every element helio-pages.js
   sets .hidden on is listed here explicitly. Removing one of these
   silently breaks the JS with no error anywhere. */
#helio-hub[hidden],
#helio-observation[hidden],
#helio-obs-invalid[hidden],
#helio-obs-pending[hidden],
#helio-meta-pending[hidden],
#helio-claim-btn[hidden],
.helio-meta-row[hidden]{display:none !important;}

/* ===== terminal readout ===== */
.helio-terminal{
  font-family:'IBM Plex Mono', monospace;
  border:1px solid var(--helio-line);
  background:
    linear-gradient(180deg, rgba(255,150,40,0.07), rgba(0,0,0,0)),
    var(--helio-panel);
  padding:20px 22px;
  margin:2em 0;
}
.helio-terminal-title{
  margin:0 0 14px;
  font-size:0.82rem;
  letter-spacing:0.12em;
  color:var(--helio-core);
  text-transform:uppercase;
}
.helio-terminal-fail .helio-terminal-title{color:var(--helio-ember);}
.helio-readout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
}
.helio-readout div{
  border-left:2px solid var(--helio-line);
  padding-left:12px;
}
.helio-readout dt{
  font-size:0.6rem;
  letter-spacing:0.14em;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin:0 0 4px;
}
.helio-readout dd{
  margin:0;
  font-size:0.95rem;
  letter-spacing:0.06em;
  color:var(--helio-core);
}
.helio-terminal-detail{
  margin:0;
  font-size:0.85rem;
  color:var(--ink-soft);
  line-height:1.6;
}
.helio-terminal-origin{
  margin:12px 0 0;
  font-size:0.62rem;
  letter-spacing:0.1em;
  color:rgba(147,170,185,0.62);
  text-transform:uppercase;
}

/* ===== today's observation card (hub) ===== */
.helio-today{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  border:1px solid var(--helio-line);
  background:var(--helio-panel);
  padding:22px 24px;
  margin:2em 0;
}
.helio-today-code{
  font-family:'Big Shoulders Display','IBM Plex Mono',monospace;
  font-weight:900;
  font-size:clamp(2rem,7vw,3.2rem);
  line-height:0.95;
  color:var(--helio-core);
  margin:0;
}
.helio-today-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin:6px 0 0;
}
.helio-chip{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:5px 10px;
  border:1px solid var(--helio-line);
  margin-top:12px;
}
.helio-chip-open{color:var(--helio-core);border-color:var(--helio-line-strong);background:rgba(255,150,40,0.12);}
.helio-chip-held{color:var(--teal);border-color:rgba(70,224,166,0.45);background:rgba(70,224,166,0.08);}
.helio-chip-shut{color:var(--ink-soft);}

.helio-btn{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--bg);
  background:linear-gradient(90deg,var(--helio-core),var(--helio-flame));
  border:0;
  padding:13px 22px;
  cursor:pointer;
  white-space:nowrap;
}
.helio-btn:hover{filter:brightness(1.12);}
.helio-btn:disabled{opacity:0.45;cursor:default;filter:none;}

/* ===== the observation itself ===== */
.helio-obs-head{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--helio-core);
  font-size:0.76rem;
  margin:0 0 6px;
}
.helio-obs-frame{
  position:relative;
  border:1px solid var(--helio-line);
  background:
    repeating-linear-gradient(45deg,rgba(255,150,40,0.035) 0 8px,rgba(0,0,0,0) 8px 16px),
    #0A0705;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.helio-obs-frame img{
  display:block;
  width:100%;
  height:auto;
  opacity:0;
  transition:opacity 0.5s ease;
}
.helio-obs-frame.is-loaded img{opacity:1;}
.helio-obs-pending{
  position:absolute;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.16em;
  color:rgba(255,180,90,0.6);
  text-align:center;
  padding:0 16px;
}
.helio-obs-frame.is-loaded .helio-obs-pending{display:none;}

/* the permanent stamp, rendered by the page as well as burned into the
   image itself by the offline pipeline — this one keeps the page
   readable while the real stamped derivatives do not exist yet */
.helio-stamp{
  position:absolute;
  left:0;bottom:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.58rem;
  letter-spacing:0.14em;
  line-height:1.7;
  color:rgba(255,226,180,0.82);
  background:linear-gradient(90deg,rgba(10,7,5,0.72),rgba(10,7,5,0));
  padding:10px 40px 10px 14px;
  text-transform:uppercase;
  pointer-events:none;
}
.helio-obs-frame.is-sealed .helio-stamp{display:none;}

.helio-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  margin:1.6em 0 0;
  border-top:1px solid var(--helio-line);
}
.helio-meta-row{
  display:grid;
  grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,150,40,0.14);
}
.helio-meta-row dt{
  letter-spacing:0.12em;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin:0;
}
.helio-meta-row dd{margin:0;color:var(--ink);}
.helio-meta-pending{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.12em;
  color:rgba(147,170,185,0.7);
  padding:14px 0;
  margin:0;
  text-transform:uppercase;
}

.helio-claim{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin:2em 0;
  padding:20px 22px;
  border:1px solid var(--helio-line);
  background:var(--helio-panel);
}
.helio-claim-note{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  margin:0;
  flex:1 1 240px;
  min-width:0;
}
.helio-claim-note.is-open{color:var(--helio-core);}
.helio-claim-note.is-held{color:var(--teal);}
.helio-claim-note.is-shut{color:var(--ink-soft);}

/* ===== external observations (Phase 4/5 placeholder) ===== */
.helio-external{
  border:1px solid var(--line);
  background:rgba(19,29,48,0.5);
  padding:20px 22px;
  margin:2em 0;
}
.helio-external-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 10px;
}
.helio-external p{margin:0 0 10px;font-size:0.88rem;color:var(--ink-soft);}
.helio-external a{color:var(--cyan);}

/* ===== locked states =====
   An unrecovered position is an inert div, not an anchor, so it must not
   advertise itself as clickable. The locked hub control keeps the button
   geometry so the panel does not reflow when the window opens. */
.helio-obsnav a.is-locked,
.helio-obsnav .is-locked{color:rgba(147,170,185,0.45);cursor:default;}
.helio-obsnav .is-locked .helio-nav-code{color:rgba(147,170,185,0.45);}
.helio-cell.is-locked{cursor:default;}
.helio-cell.is-locked:hover{border-color:rgba(255,150,40,0.16);transform:none;}
.helio-btn.is-locked{
  background:none;
  color:var(--ink-soft);
  border:1px solid var(--helio-line);
  cursor:default;
}
.helio-btn.is-locked:hover{filter:none;}

/* ===== lore page readout blocks =====
   The spec text used fenced code blocks for these. A <pre> would inherit
   monospace and horizontal scrolling on phones, which is wrong for what
   is really a short stack of label lines, so they are their own thing. */
.helio-readout-block{
  font-family:'IBM Plex Mono', monospace;
  border-left:2px solid var(--helio-line-strong);
  background:linear-gradient(90deg,rgba(255,150,40,0.07),rgba(0,0,0,0));
  padding:16px 18px;
  margin:2em 0;
}
.helio-ro-line{
  display:block;
  font-size:0.76rem;
  letter-spacing:0.1em;
  line-height:1.9;
  color:var(--helio-core);
  overflow-wrap:anywhere;
}
.helio-ro-line + .helio-ro-line{color:var(--ink-soft);}
.helio-ro-line:first-child{color:var(--helio-core);}

/* Lore is long-form: give it a comfortable reading rhythm without
   narrowing the column, per the site's measure rules. */
.helio-lore h2{margin-top:2.2em;}

/* ===== other observers: outbound tag tiles =====
   Deliberately NOT an embed. No Meta script, no iframe, no third-party
   tracking on any of the 365 observation pages, and nothing that can
   break when someone deletes a post. Three doorways to live tags —
   which is honest, since Instagram's own page is the live thing, not
   any copy of it we could hold here. */
.helio-external-intro{margin:0 0 16px;font-size:0.9rem;color:var(--ink-soft);}
.helio-external-foot{
  margin:14px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(147,170,185,0.6);
}
.helio-tags{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:10px;
}
.helio-tag{
  display:block;
  border:1px solid var(--helio-line);
  background:linear-gradient(180deg,rgba(255,150,40,0.06),rgba(0,0,0,0));
  padding:14px 16px;
  text-decoration:none;
  min-width:0;
  transition:border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.helio-tag:hover{
  border-color:var(--helio-line-strong);
  background:linear-gradient(180deg,rgba(255,150,40,0.14),rgba(0,0,0,0));
  transform:translateY(-2px);
}
.helio-tag-name{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.86rem;
  letter-spacing:0.04em;
  color:var(--helio-core);
  margin-bottom:6px;
  overflow-wrap:anywhere;
}
.helio-tag-note{
  display:block;
  font-size:0.76rem;
  line-height:1.5;
  color:var(--ink-soft);
}

/* ===== archive grid ===== */
.helio-archive-head{
  font-family:'IBM Plex Mono', monospace;
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  border:1px solid var(--helio-line);
  background:var(--helio-panel);
  padding:18px 22px;
  margin:2em 0;
}
.helio-archive-head div{min-width:0;}
.helio-archive-head dt{
  font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 4px;
}
.helio-archive-head dd{margin:0;font-size:1.05rem;letter-spacing:0.08em;color:var(--helio-core);}

/* auto-fill, so the grid fills whatever column it is given rather than
   being pinned to a fixed count that strands space at some widths */
.helio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(38px,5.2vw,58px),1fr));
  gap:4px;
  margin:1.6em 0;
}
.helio-cell{
  position:relative;
  aspect-ratio:1/1;
  display:block;
  border:1px solid rgba(255,150,40,0.16);
  background:#0A0705;
  text-decoration:none;
  overflow:hidden;
  transition:border-color 0.18s ease, transform 0.18s ease;
}
.helio-cell:hover{border-color:var(--helio-line-strong);transform:scale(1.08);z-index:1;}
.helio-cell img{width:100%;height:100%;object-fit:cover;display:block;}
.helio-cell.is-held{border-color:rgba(255,164,56,0.4);}
.helio-cell.is-today{border-color:var(--helio-core);box-shadow:0 0 0 1px var(--helio-core) inset;}
.helio-cell-tag{
  position:absolute;
  left:2px;bottom:1px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.5rem;
  letter-spacing:0.04em;
  color:rgba(147,170,185,0.5);
}
.helio-cell.is-held .helio-cell-tag{
  color:rgba(255,232,200,0.9);
  text-shadow:0 1px 3px rgba(0,0,0,0.9);
}
.helio-cell.is-thumbmissing img{display:none;}

.helio-intercalary{
  display:flex;
  align-items:center;
  gap:16px;
  border:1px dashed var(--helio-line);
  padding:16px 18px;
  margin:2em 0;
}
.helio-intercalary .helio-grid,
.helio-intercalary .helio-cell{width:58px;flex:0 0 58px;}
.helio-intercalary p{margin:0;font-size:0.82rem;color:var(--ink-soft);}

.helio-mosaic{
  border:1px solid var(--helio-line);
  background:var(--helio-panel);
  padding:22px;
  margin:2em 0;
  text-align:center;
}
.helio-mosaic-status{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.74rem;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  margin:10px 0 0;
  text-transform:uppercase;
}
.helio-mosaic-frame{margin:0 0 16px;}
.helio-mosaic-stage{position:relative;line-height:0;}
.helio-mosaic-stage > img{display:block;width:100%;height:auto;}

/* The hotspot layer is a plain CSS grid laid over the composite. It holds
   no images: the base picture is one request, and the individual
   photograph for a cell is fetched only when that cell is actually
   pointed at. A grid of 1024 <img> tags would be 365 requests and a
   destroyed mobile experience. */
.helio-mosaic-grid{
  position:absolute;
  inset:0;
  display:grid;
  cursor:crosshair;
}
.helio-mosaic-grid span{
  display:block;
  transition:box-shadow 0.12s ease;
}
.helio-mosaic-grid span.is-active{
  box-shadow:0 0 0 1px var(--helio-core) inset, 0 0 12px rgba(255,180,80,0.55);
}

/* The reveal. Positioned by JS relative to the stage, and deliberately
   NOT following the cursor pixel by pixel: a panel that jitters under a
   moving pointer is unreadable. It snaps to the hovered cell. */
.helio-mosaic-peek{
  position:absolute;
  z-index:3;
  margin:0;
  width:min(46%,300px);
  border:1px solid var(--helio-line-strong);
  background:#0A0705;
  box-shadow:0 12px 40px rgba(0,0,0,0.75);
  pointer-events:none;
  line-height:1.5;
}
.helio-mosaic-peek img{display:block;width:100%;height:auto;}
.helio-mosaic-peek figcaption{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--helio-core);
  padding:7px 9px;
}
#helio-mosaic-peek[hidden]{display:none !important;}
.helio-mosaic-hint{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(147,170,185,0.62);
  margin:10px 0 0;
  line-height:1.6;
}
#helio-mosaic-frame[hidden]{display:none !important;}
.helio-mosaic.is-unlocked{border-color:var(--helio-core);}
.helio-mosaic.is-unlocked .helio-mosaic-status{color:var(--helio-core);}

/* ===== prev / next ===== */
.helio-obsnav{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  border-top:1px solid var(--helio-line);
  padding-top:16px;
  margin:2em 0 0;
}
.helio-obsnav a{color:var(--ink-soft);text-decoration:none;}
.helio-obsnav a:hover{color:var(--helio-core);}
.helio-nav-code{display:block;color:var(--helio-core);}

@media (max-width:760px){
  .helio-today{grid-template-columns:1fr;}
  .helio-readout{grid-template-columns:1fr;gap:10px;}
  .helio-meta-row{grid-template-columns:1fr;gap:2px;}
  .helio-archive-head{gap:16px;}
  .helio-btn{width:100%;text-align:center;}
}