:root {
  /* ─── Base palette (the five roles) ───────────────────────────── */
  --bone:           #EDE8E0;  /* light warm background */
  --refinery-glow:  #D48555;  /* bright accent */
  --rust:           #A04A28;  /* primary alarm / hero color */
  --dusk-slate:     #4A5060;  /* neutral mid-tone */
  --smokestack:     #1C1F26;  /* near-black */

  /* Optional supporting tones (derived, useful for hover/borders) */
  --bone-shade:     #DCD5C7;  /* slightly darker bone, for dividers */
  --rust-deep:      #6B2F18;  /* darker rust, for text on bone */
  --slate-light:    #7B8090;  /* lighter slate, for muted text */
  --slate-deep:     #2C313D;  /* darker slate, for nested dark bg */

  /* ─── Background colors ───────────────────────────────────────── */
  --bg-color-primary:    var(--bone);          /* main page bg */
  --bg-color-secondary:  var(--bone-shade);    /* cards, subtle surfaces */
  --bg-color-inverse:    var(--smokestack);    /* dark mode panels, hero blocks */
  --bg-color-inverse-2:  var(--slate-deep);    /* nested inside inverse */
  --bg-color-accent:     var(--refinery-glow); /* CTA buttons, highlights */
  --bg-color-alarm:      var(--rust);          /* alarm/emphasis blocks */
  --bg-color-muted:      var(--dusk-slate);    /* neutral chips, pills */

  /* ─── Text colors ─────────────────────────────────────────────── */
  --text-color-primary:    var(--smokestack);     /* body text on light bg */
  --text-color-secondary:  var(--dusk-slate);     /* secondary text on light */
  --text-color-tertiary:   var(--slate-light);    /* hints, captions */
  --text-color-accent:     var(--rust);           /* hero numbers, links */
  --text-color-accent-2:   var(--refinery-glow);  /* accent on dark bg */
  --text-color-alarm:      var(--rust-deep);      /* alarm text on light bg */
  --text-color-inverse:    var(--bone);           /* body text on dark bg */
  --text-color-inverse-2:  var(--refinery-glow);  /* labels/eyebrows on dark */

  /* ─── Borders & dividers ──────────────────────────────────────── */
  --border-color-subtle:   var(--bone-shade);
  --border-color-default:  var(--dusk-slate);
  --border-color-strong:   var(--smokestack);
  --border-color-accent:   var(--rust);
}

.panel-light {
  background-color: var(--bg-color-primary);
  color: var(--text-color-primary);
}
.panel-light .panel-eyebrow { color: var(--text-color-alarm); }
.panel-light .panel-number  { color: var(--text-color-accent); }
.panel-light .panel-muted   { color: var(--text-color-secondary); }
.panel-light .panel-hint    { color: var(--text-color-tertiary); }

.panel-surface {
  background: var(--bg-color-secondary);
  color: var(--text-color-primary);
}
.panel-surface .panel-eyebrow { color: var(--text-color-alarm); }
.panel-surface .panel-number  { color: var(--text-color-accent); }
.panel-surface .panel-muted   { color: var(--text-color-secondary); }
.panel-surface .panel-hint    { color: var(--text-color-tertiary); }


.panel-dark {
  background: var(--bg-color-inverse);
  color: var(--text-color-inverse);
}
.panel-dark .panel-eyebrow { color: var(--text-color-inverse-2); }
.panel-dark .panel-number  { color: var(--text-color-accent-2); }
.panel-dark .panel-muted   { color: var(--bone-shade); }
.panel-dark .panel-hint    { color: var(--slate-light); }


.panel-deep {
  background-color: var(--bg-color-inverse-2);
  color: var(--text-color-inverse);
}
.panel-deep .panel-eyebrow { color: var(--text-color-inverse-2); }
.panel-deep .panel-number  { color: var(--text-color-accent-2); }
.panel-deep .panel-muted   { color: var(--bone-shade); }
.panel-deep .panel-hint    { color: var(--slate-light); }


.panel-alarm {
  background: var(--bg-color-alarm);
  color: var(--text-color-inverse);
}
.panel-alarm .panel-eyebrow { color: var(--bone); }
.panel-alarm .panel-number  { color: var(--bone); }
.panel-alarm .panel-muted   { color: var(--bone-shade); }
.panel-alarm .panel-hint    { color: var(--bone-shade); }

.panel-accent {
  background: var(--bg-color-accent);
  color: var(--smokestack);
}
.panel-accent .panel-eyebrow { color: var(--rust-deep); }
.panel-accent .panel-number  { color: var(--smokestack); }
.panel-accent .panel-muted   { color: var(--slate-deep); }
.panel-accent .panel-hint    { color: var(--dusk-slate); }


.panel-muted {
  background: var(--bg-color-muted);
  color: var(--text-color-inverse);
}
.text-rd-primary    { color: var(--text-color-primary); }
.text-rd-secondary  { color: var(--text-color-secondary); }
.text-rd-tertiary   { color: var(--text-color-tertiary); }
.text-rd-accent     { color: var(--text-color-accent); }
.text-rd-accent-2   { color: var(--text-color-accent-2); }
.text-rd-alarm      { color: var(--text-color-alarm); }
.text-rd-inverse    { color: var(--text-color-inverse); }
.text-rd-inverse-2  { color: var(--text-color-inverse-2); }


/* Collapsed (default) state */
.accordion-button {
  background-color: var(--rust-deep);
  color: var(--bone);
  font-weight: 500;
  box-shadow: none;
}

/* Expanded state */
.accordion-button:not(.collapsed) {
  background-color: var(--refinery-glow);
  color: #fff;
  box-shadow: none;
}

/* Focus state (removes the default blue glow) */
.accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

.accordion-button::after {
  filter: brightness(0) invert(1);
}

.lcd-wrap {
    position: relative;
    font-family: 'DSEG7 Classic', 'Courier New', monospace;
    border: 2px inset rgba(0, 0, 0, .15);
    background: rgba(0, 0, 0, .1);
}

.lcd-ghost {
    color: #ffb80015;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    /* match the real span's right-alignment so digits stack */
    text-align: right;
    padding-right: inherit;
}
.hh-gas-sign
{
    border: 3px outset rgba(0, 0, 0, 0.1);
    border-top:0px;
    border-collapse: collapse;
    background-image: var(--bs-gradient) !important;    
}
.hh-type-label
{
  line-height: .8rem;
  font-size: 1rem;
  font-weight: bold;
  padding-bottom: 2px !important;
  margin-left: -11px;
  
}