/*
  skin-original.css
  Version: 2.0.18.0.0

  The "original" skin — Menlo monospace, strict monochrome, zero emoji.
  All rules are scoped to body[data-skin="original"] so they never
  bleed into the emoji skin or any future skin.

  Activated by setting activeSkin = SKINS.original in prayer-timetable.js.
  No user-facing toggle yet.

  Palette
  ───────
  Page bg       #f2f1ed   warm off-white
  Card bg       #ffffff
  Card border   #d6d5d0
  Header bg     #1a1a1a   near-black
  Header text   #e8e8e2
  Active card   #eceae4 + left rule #1a1a1a
  Passed text   #aaa
  Primary text  #111
  Secondary     #666
  Muted         #bbb
  Bar filled    #1a1a1a
  Bar empty     #dcdbd6
  Bar pulse     #555
*/

/* ── Reset / base ─────────────────────────────────────────────────────────── */

body[data-skin="original"],
body[data-skin="original"] * {
  font-family: Menlo, "Menlo Regular", "Courier New", Courier, monospace !important;
}

body[data-skin="original"] {
  background: #f2f1ed;
  color: #111;
}

/* ── Kaaba logo image + word (header line 4) ────────────────────────────── */

body[data-skin="original"] .kabaLogo {
  height: 30px;
  width: auto;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: -2px;
}

body[data-skin="original"] .kabaWord {
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

body[data-skin="original"] #hdr {
  background: #1a1a1a !important;
  color: #e8e8e2 !important;
  border-bottom: none;
  padding: 14px 16px 12px;
}

body[data-skin="original"] #hdrLine1,
body[data-skin="original"] #hdrLine2,
body[data-skin="original"] #hdrLine3,
body[data-skin="original"] #hdrLine4 {
  color: #e8e8e2;
  letter-spacing: 0.02em;
}

body[data-skin="original"] #hdrLine4 {
  color: #aaa;
  font-size: 12px;
}

/* Colon blink in header — keep subtle, no colour */
body[data-skin="original"] .hdrClockColon {
  animation: colonBlink 1s step-start infinite;
  opacity: 1;
}

/* ── Prayer list container ────────────────────────────────────────────────── */

body[data-skin="original"] #list {
  background: #f2f1ed;
  padding: 10px 12px;
  gap: 6px;
  display: flex;
  flex-direction: column;
}

/* ── Prayer row base ──────────────────────────────────────────────────────── */

body[data-skin="original"] .pRow {
  background: #ffffff;
  border: 1px solid #d6d5d0;
  border-radius: 6px;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}

/* Neutralise ALL per-prayer colour backgrounds */
body[data-skin="original"] .pBg {
  display: none;
}

/* ── States ───────────────────────────────────────────────────────────────── */

body[data-skin="original"] .pRow.active {
  background: #eceae4;
  border: 1px solid #bbb;
  border-left: 3px solid #1a1a1a;
  animation: origCardPulse 3s ease-in-out infinite;
}

@keyframes origCardPulse {
  0%, 100% { border-left-color: #1a1a1a; }
  50%       { border-left-color: #888;   }
}

body[data-skin="original"] .pRow.passed {
  background: #f7f6f2;
  border-color: #e0dfd9;
}

body[data-skin="original"] .pRow.passed .pName,
body[data-skin="original"] .pRow.passed .pTime,
body[data-skin="original"] .pRow.passed .pTimeNum,
body[data-skin="original"] .pRow.passed .pTimeMeridiem {
  color: #aaa;
}

/* ── Prayer name + time ───────────────────────────────────────────────────── */

body[data-skin="original"] .pName {
  color: #111;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-skin="original"] .pRow.active .pName {
  color: #111;
}

body[data-skin="original"] .pTimeNum {
  color: #111;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

body[data-skin="original"] .pTimeMeridiem {
  color: #555;
  font-size: 18px;    /* match pTimeNum so AM/PM is the same height as the digits */
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-left: 2px;
}

/* Inline time on active card */
body[data-skin="original"] .pNameTime {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #333;
}

/* ── Qasr — [QASR] plain monospace label ─────────────────────────────────── */

body[data-skin="original"] .qasrLabel {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #ccc;           /* light grey — not travelling */
  vertical-align: middle;
  margin-left: 8px;
}

body[data-skin="original"] .qasrLabel--active {
  color: #111;           /* near-black — actively travelling ≥ 81 km */
  font-weight: 700;
  animation: qasrPulse 1.2s step-start infinite;
}

@keyframes qasrPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Fasting chips — wrap in [...] brackets ───────────────────────────────── */

body[data-skin="original"] .fastChip::before {
  content: '[';
}

body[data-skin="original"] .fastChip::after {
  content: ']';
}

/* ── Countdown display ───────────────────────────────────────────────────── */

body[data-skin="original"] .pTimeSub {
  color: #333;
  font-size: 13px;
}

body[data-skin="original"] .pTimeSubLabel {
  color: #777;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-skin="original"] .pTimeSubValue {
  color: #111;
}

body[data-skin="original"] .pTimeSubExpire .pTimeSubLabel {
  color: #555;
}

/* LCD countdown digits */
body[data-skin="original"] .pTimeSubValueHour,
body[data-skin="original"] .pTimeSubValueMin,
body[data-skin="original"] .pTimeSubValueSec {
  color: #111;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

body[data-skin="original"] .pTimeSubValueColon {
  color: #888;
  animation: colonBlink 1s step-start infinite;
}

/* ── Bolt ⚡ ─────────────────────────────────────────────────────────────── */

body[data-skin="original"] .cdBolt {
  display: none; /* replaced by plain indicator below */
}

/* Show a plain "!" when bolt would normally activate */
body[data-skin="original"] .cdBolt.is-active::after {
  content: "!";
  display: inline-block;
  color: #111;
  font-size: 14px;
  font-weight: 700;
}

body[data-skin="original"] .cdBolt.is-active {
  display: inline;
  font-size: 0; /* hide the emoji, show the ::after only */
}

/* ── Vertical progress bar ───────────────────────────────────────────────── */

/*
  Terminal block aesthetic — tight rectangular segments,
  no rounded corners, no glow. Filled segments are near-black.
  The top-most lit segment pulses gently to show "live".
*/

body[data-skin="original"] .vProgress {
  gap: 3px;
  width: 14px;
}

body[data-skin="original"] .vSeg {
  width: 14px;
  height: 3px;
  border-radius: 0;
  background: #dcdbd6;
  box-shadow: none;
  animation: none;
  transition: background 0.15s ease;
}

body[data-skin="original"] .vSeg.is-on {
  background: #1a1a1a;
  animation: none;
}

body[data-skin="original"] .vSeg.is-off {
  background: #dcdbd6;
  animation: none;
}

body[data-skin="original"] .vSeg.is-complete {
  background: #555;
  animation: none;
}

/* Pulse segment — topmost lit bar ticks visibly.
   Use the compound selector (.is-on.is-pulse) to guarantee this wins over
   the plain .is-on { animation: none } rule of equal specificity. */
body[data-skin="original"] .vSeg.is-on.is-pulse {
  background: #1a1a1a;
  animation: origPulse 1.8s ease-in-out infinite !important;
  box-shadow: none;
}

/* Ghost-pulse at 0% illumination — bottom segment breathes dimly so the
   bar always looks alive even when nothing is lit. */
body[data-skin="original"] .vSeg.is-off.is-pulse {
  background: #bbb;
  animation: origPulseGhost 1.8s ease-in-out infinite !important;
}

@keyframes origPulse {
  0%, 100% { background: #1a1a1a; }
  50%       { background: #999;   }
}

@keyframes origPulseGhost {
  0%, 100% { background: #ccc; }
  50%       { background: #555; }
}

/* Percentage label */
body[data-skin="original"] .countdownPct {
  color: #888;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 3px;
}

/* ── Moon card ───────────────────────────────────────────────────────────── */

body[data-skin="original"] .moonCard {
  background: #ffffff;
  border: 1px solid #d6d5d0;
  border-radius: 6px;
  box-shadow: none;
}

body[data-skin="original"] .moonName {
  color: #111;
  font-size: 15px;
  font-weight: 700;
}

body[data-skin="original"] .moonSub {
  color: #777;
  font-size: 11px;
  font-weight: 400;
}

body[data-skin="original"] .moonPct {
  color: #888;
  font-size: 9px;
}

body[data-skin="original"] .weatherMetricLine {
  color: #444;
  font-size: 12px;
}

/* ── Fasting card ────────────────────────────────────────────────────────── */

body[data-skin="original"] .fastingCard {
  background: #ffffff;
  border: 1px solid #d6d5d0;
  border-radius: 6px;
  box-shadow: none;
}

body[data-skin="original"] .fastingCardHeading {
  color: #777;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* All fasting chips — no box, just [label] text via ::before/::after */
body[data-skin="original"] .fastChip {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #999;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

body[data-skin="original"] .fastChip--on {
  color: #111;
  font-weight: 700;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

body[data-skin="original"] #footer,
body[data-skin="original"] #footerTitle,
body[data-skin="original"] #footerStatus,
body[data-skin="original"] #footerSrv {
  color: #888;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* △ / ▽ triangle at 2.0× raised — approved in symbol-preview */
body[data-skin="original"] .footerTriangle {
  font-size: 2.0em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  position: relative;
  top: -3px;
}

/* ── Section divider ──────────────────────────────────────────────────────── */

body[data-skin="original"] .sectionDivider {
  display: none;
}

/* ── Fajr card: override greenish LCD gradient → match all other prayer cards ── */

body[data-skin="original"] .pRow:has(.pBg.bg-fajr) {
  background: #ffffff;
  border: 1px solid #d6d5d0;
  border-radius: 6px;
  box-shadow: none;
}

body[data-skin="original"] .pRow:has(.pBg.bg-fajr)::after {
  display: none;
}

body[data-skin="original"] .pRow.active:has(.pBg.bg-fajr) {
  background: #eceae4;
  border: 1px solid #bbb;
  border-left: 3px solid #1a1a1a;
  filter: none;
  box-shadow: none;
}

body[data-skin="original"] .pRow.passed:has(.pBg.bg-fajr) {
  background: #f7f6f2;
  border-color: #e0dfd9;
  filter: none;
}

/* Restore normal text colours for Fajr (prayer-effects sets dark green) */
body[data-skin="original"] .pRow:has(.pBg.bg-fajr) .pNameTop,
body[data-skin="original"] .pRow:has(.pBg.bg-fajr) .pTime,
body[data-skin="original"] .pRow:has(.pBg.bg-fajr) .pTimeSub,
body[data-skin="original"] .pRow:has(.pBg.bg-fajr) .countdownPct {
  color: #111;
}

body[data-skin="original"] .pRow.passed:has(.pBg.bg-fajr) .pNameTop,
body[data-skin="original"] .pRow.passed:has(.pBg.bg-fajr) .pTime,
body[data-skin="original"] .pRow.passed:has(.pBg.bg-fajr) .pTimeSub,
body[data-skin="original"] .pRow.passed:has(.pBg.bg-fajr) .countdownPct {
  color: #aaa;
}

/* ── Fasting card: override greenish LCD gradient → plain white ── */

body[data-skin="original"] .fastingCard {
  background: #ffffff;
  border: 1px solid #d6d5d0;
  border-radius: 6px;
  box-shadow: none;
  margin: 4px 0;
}

body[data-skin="original"] .fastingCardHeading {
  color: #777;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}