/* telemetry (the room formerly "a dark room") — in the site's own
   palette, in the manner of the game.
   scoped: every rule lives under .room. tokens come from /css/colors.css:
   flat warm charcoal, one mono face, text and hairlines, nothing
   decorative. monarch amber is the single thing allowed to feel alive;
   sage draws the traces; burgundy only ever appears on hover. */

.room {
  --room:   var(--cream-900);
  --panel:  var(--cream-800);
  --ink:    var(--cream-100);
  --dim:    var(--cream-400);
  --signal: var(--monarch);
  --line:   var(--cream-800);
  --trace:  var(--sage);

  margin: 0;
  background: var(--room);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
}

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

.room .room-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ------------------------------------------------------------ header */

.room .room-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.room .room-name {
  color: var(--dim);
  font-size: 0.85em;
}

.room .room-vitals {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}

.room .tx {
  color: var(--dim);
  font-size: 0.85em;
}

.room .tx.live {
  color: var(--signal);
}

.room .clock {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.room .beat {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.5;
  flex-shrink: 0;
}

.room .beat.on {
  animation: bb-breathe 4s ease-in-out infinite;
}

@keyframes bb-breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* ------------------------------------------------------------- main */

.room .room-main {
  flex: 1;
  padding: 2rem 0;
}

.room .reading {
  color: var(--ink);
  margin-bottom: 1rem;
}

.room .days[data-ts] {
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.room .spark {
  display: inline-block;
  vertical-align: -0.2em;
  margin-left: 0.5rem;
  color: var(--trace);
}

.room .spark svg {
  height: 1.1em;
  width: 5.5em;
  display: inline-block;
}

.room .counter {
  margin-bottom: 2.5rem;
}

.room .counter-line {
  color: var(--ink);
}

.room .counter-note {
  color: var(--dim);
  font-size: 0.85em;
}

.room .spark-wide {
  color: var(--trace);
  margin-top: 0.5rem;
  max-width: 30rem;
}

.room .spark-wide svg {
  width: 100%;
  height: 40px;
  display: block;
}

/* -------------------------------------------------- transmission log */

.room .log {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0;
}

.room .log-list {
  list-style: none;
  height: calc(12 * 1.7em);
  overflow: hidden;
}

.room .log-list li {
  height: 1.7em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
  transition: color 2s ease;
}

.room .log-list li:nth-child(n+5) {
  color: var(--dim);
}

.room .log-list li.fresh {
  color: var(--signal);
}

.room .log-list li.pause {
  color: var(--dim);
}

.room .log-ts {
  color: var(--dim);
  font-size: 0.85em;
  margin-right: 0.5em;
}

.room .log-list li.fresh .log-ts {
  color: inherit;
}

/* ------------------------------------------------------------ footer */

.room .room-foot {
  color: var(--dim);
  font-size: 0.85em;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.room .room-foot a {
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.room .room-foot a:hover {
  color: var(--burgundy-300);
}

.room .room-foot a:focus-visible {
  outline: 1px solid var(--dim);
  outline-offset: 2px;
}

/* ------------------------------------------- room nav (the game's
   location tabs: dim underlined text, thin pipes, the place you are
   standing rendered plain) */

.room .room-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  font-size: 0.85em;
}

.room .room-nav a {
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.room .room-nav a + a::before {
  content: "|";
  color: var(--line);
  text-decoration: none;
  display: inline-block;
  margin: 0 0.75em;
}

.room .room-nav a:hover {
  color: var(--burgundy-300);
}

.room .room-nav a.here {
  color: var(--ink);
  text-decoration: none;
  pointer-events: none;
}

/* ---------------------------------------------------------- faults */

.room .fault {
  margin-bottom: 0.75rem;
}

.room .fault.active {
  color: var(--signal);
}

.room .fault.acknowledged {
  color: var(--ink);
}

.room .fault.acknowledged .fault-code {
  color: var(--ink);
}

.room .fault-note {
  display: block;
  color: var(--dim);
  font-size: 0.85em;
}

.room .fault.cleared {
  color: var(--dim);
  margin-bottom: 0.25rem;
}

.room .faults-history {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------- trips */

.room .trip {
  margin-bottom: 2.25rem;
}

.room .trip-name {
  color: var(--ink);
  font-weight: 500;
}

.room .trip-ongoing {
  color: var(--signal);
  font-size: 0.8em;
  letter-spacing: 0.08em;
}

.room .trip-range {
  color: var(--dim);
  font-size: 0.85em;
}

.room .trip-profile {
  color: var(--ink);
}

.room .trip.implicit,
.room .trip.implicit .trip-name,
.room .trip.implicit .trip-profile {
  color: var(--dim);
}

/* ---------------------------------------------------------- ledger */

.room .ledger {
  list-style: none;
}

.room .ledger-line {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.room .ledger-date {
  color: var(--dim);
  font-size: 0.85em;
  flex-shrink: 0;
  width: 6.5em;
  line-height: inherit;
}

.room .ledger-line .ledger-text {
  color: var(--dim);
}

.room .ledger-line.note .ledger-text {
  color: var(--ink);
}

/* ------------------------------------------------- rest (year grid) */

.room .year-grid {
  margin-top: 0.5rem;
  max-width: 30rem;
}

.room .year-grid svg {
  width: 100%;
  height: auto;
  display: block;
}

.room .year-grid rect.day-quiet {
  fill: var(--panel);
  opacity: 0.45;
}

.room .year-grid rect.day-signal {
  fill: var(--trace);
  opacity: 0.85;
}

.room .year-grid rect.day-today {
  stroke: var(--signal);
  stroke-width: 1.5;
}

/* contribution intensity: the same sage, deepening with the day */
.room .year-grid rect.day-l0 {
  fill: var(--panel);
  opacity: 0.45;
}

.room .year-grid rect.day-l1 { fill: var(--trace); opacity: 0.3; }
.room .year-grid rect.day-l2 { fill: var(--trace); opacity: 0.55; }
.room .year-grid rect.day-l3 { fill: var(--trace); opacity: 0.8; }
.room .year-grid rect.day-l4 { fill: var(--trace); opacity: 1; }

.room .year-grid rect.day-future {
  fill: none;
}

/* ------------------------------------------------------------- echo */

.room .echo-status {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.room .echo-intro {
  color: var(--dim);
  margin-bottom: 2rem;
}

.room .echo-year {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.room .echo-head {
  color: var(--ink);
}

.room .echo-range {
  color: var(--dim);
  font-size: 0.85em;
}

.room .echo-lines {
  list-style: none;
  color: var(--ink);
}

.room .echo-empty {
  color: var(--dim);
}

.room .log-list li.echo,
.room .log-list li.echo .log-ts {
  color: var(--dim);
  font-style: italic;
}

/* ------------------------------------------------------------ index */

.room .idx-line {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.room .idx-page {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  width: 6.5em;
  flex-shrink: 0;
}

.room .idx-page:hover {
  color: var(--burgundy-300);
}

.room .idx-page:focus-visible {
  outline: 1px solid var(--dim);
  outline-offset: 2px;
}

.room .idx-datum {
  color: var(--dim);
}

/* ------------------------------------------------------------ trips */

.room .trip-quiet {
  color: var(--dim);
}

/* --------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .room .beat,
  .room .beat.on {
    animation: none;
    opacity: 0.7;
    box-shadow: none;
  }
  .room .log-list li {
    transition: none;
  }
}