/* =========================================
   KitchenAid Espresso Machine UI
   KitchenAid Empire Red theme
   ========================================= */


/* ----- Variables ---------------------------------------- */

:root {
  /* KitchenAid Empire Red */
  --ka-red-1: #7b0f17;
  --ka-red-2: #b1121b;
  --ka-red-3: #d11a24;

  /* Brushed steel */
  --steel-1: #9aa3ad;
  --steel-2: #d3d9df;
  --steel-3: #f2f5f7;

  /* LED indicator colors */
  --led-red:    #ff4b4b;
  --led-green:  #38e07b;
  --led-amber:  #ffb020;
  --led-yellow: #ffd84a;
  --led-blue:   #4bb6ff;
  --led-steam:  #7fd8ff;

  /* Typography */
  --text:  #f6f7fb;
  --muted: rgba(255, 255, 255, .72);
}


/* ----- Reset -------------------------------------------- */

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


/* ----- Body --------------------------------------------- */

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255,255,255,.08), transparent),
    radial-gradient(1200px 700px at 80% 10%, rgba(255,0,60,.10), transparent),
    #0b0c0f;
  color: var(--text);
  padding: 40px 20px;
  line-height: 1.5;
}


/* =========================================
   PAGE HEADER
   ========================================= */

header {
  max-width: 960px;
  margin: 0 auto 22px;
}

h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .1px;
  margin-bottom: 6px;
}

header p {
  color: var(--muted);
  font-size: 13px;
  max-width: 68ch;
}


/* =========================================
   MACHINE PANEL  (KitchenAid red body)
   ========================================= */

.machine {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,.60);
  position: relative;
  display: grid;
  gap: 12px;

  background:
    radial-gradient(800px 220px at 18% 0%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(600px 180px at 75% 5%,  rgba(255,255,255,.09), transparent 50%),
    linear-gradient(175deg, var(--ka-red-3) 0%, var(--ka-red-2) 30%, var(--ka-red-1) 100%);
  box-shadow:
    0 30px 70px rgba(0,0,0,.60),
    0  6px 16px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -20px 28px rgba(0,0,0,.30);
}

/* Top-edge gloss shine */
.machine::before {
  content: "";
  position: absolute;
  left: 20px; right: 20px; top: 0;
  height: 1px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(255,255,255,.30) 30%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.30) 70%,
    transparent 95%
  );
  pointer-events: none;
}

/* 3-column layout on wide screens */
@media (min-width: 860px) {
  .machine {
    grid-template-columns: 1fr 1.35fr 1fr;
    align-items: start;
  }
  .brand        { grid-column: 1 / -1; }
  #group-setup  { grid-column: 1; }
  #group-modes  { grid-column: 2; }
  #group-exec   { grid-column: 3; }
}


/* =========================================
   BRAND STRIP  (chrome nameplate pill)
   ========================================= */

.brand {
  position: relative;
  text-align: center;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 10px 0;
  border-radius: 999px;
  color: #1a1f27;

  background:
    linear-gradient(90deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.40) 20%,
      rgba(0,0,0,.15)       45%,
      rgba(255,255,255,.30) 70%,
      rgba(255,255,255,.10) 100%
    ),
    linear-gradient(180deg, var(--steel-3), var(--steel-1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -2px 0 rgba(0,0,0,.30),
    0 4px 12px rgba(0,0,0,.40),
    0 1px  3px rgba(0,0,0,.30);
}

/* Inner bevel ring */
.brand::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.25);
  pointer-events: none;
}


/* =========================================
   CONTROL GROUPS  (dark recessed panels)
   ========================================= */

.group {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.50);
  padding: 14px 12px 12px;
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    linear-gradient(180deg, #18191e, #111215);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.50),
    0 2px 8px rgba(0,0,0,.35);
}

/* Inner edge bevel */
.group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.40);
  pointer-events: none;
}

.group h2 {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 12px;
}


/* =========================================
   BAR BUTTONS  (polished steel keys)
   ========================================= */

.barbtn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  text-align: left;
  transition: transform .07s ease, filter .10s ease, box-shadow .10s ease;

  /* Polished metal face — smooth highlight from upper-left */
  background:
    linear-gradient(158deg,
      rgba(255,255,255,.34)  0%,
      rgba(255,255,255,.10) 40%,
      rgba(255,255,255,.04) 65%,
      rgba(0,0,0,.12)       100%
    ),
    linear-gradient(180deg, var(--steel-2), var(--steel-1));
  color: #0e1116;

  /* Top rim highlight + bottom ledge depth */
  border: 1px solid rgba(0,0,0,.30);
  border-top-color: rgba(255,255,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 2px 0 rgba(0,0,0,.50),
    0 4px 10px rgba(0,0,0,.22);
}

.barbtn .label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #10141b;
}

.barbtn:hover {
  filter: brightness(1.04);
}

/* Pressed: key travels down, bottom ledge collapses */
.barbtn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.18),
    0 1px 0 rgba(0,0,0,.40),
    0 1px 4px rgba(0,0,0,.18);
}

/* Selected mode: green backlight ring */
.barbtn.is-selected {
  border-color: rgba(56,224,123,.50);
  border-top-color: rgba(56,224,123,.60);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 2px 0 rgba(0,0,0,.50),
    0 0 0 2px rgba(56,224,123,.16),
    0 0 18px rgba(56,224,123,.20);
}

.barbtn.is-selected .label {
  text-shadow:
    0 0 10px rgba(56,224,123,.38),
    0 0 20px rgba(56,224,123,.18);
}

/* Locked: dimmed like a disabled appliance control */
.barbtn[data-locked="true"] {
  opacity: .46;
}


/* =========================================
   BUTTON ICONS  (SVG)
   ========================================= */

.barbtn .icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.barbtn .icon svg {
  width: 18px;
  height: 18px;
  stroke: rgba(16,20,27,.80);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

.barbtn.is-selected .icon svg {
  stroke: #38e07b;
}

.barbtn[data-locked="true"] .icon svg {
  stroke: rgba(16,20,27,.38);
}


/* =========================================
   POWER BUTTON  (gunmetal — distinct from steel mode keys)
   ========================================= */

#btnPower {
  /* Gunmetal/charcoal — same diagonal sheen, different base color */
  background:
    linear-gradient(158deg,
      rgba(255,255,255,.14)  0%,
      rgba(255,255,255,.04) 45%,
      rgba(255,255,255,.01) 65%,
      rgba(0,0,0,.20)       100%
    ),
    linear-gradient(180deg, #44484f, #28292e);

  border: 1px solid rgba(0,0,0,.65);
  border-top-color: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 0 rgba(0,0,0,.65),
    0 6px 14px rgba(0,0,0,.32);
}

/* Light label on dark surface */
#btnPower .label {
  color: rgba(255,255,255,.82);
}

#btnPower .icon svg {
  stroke: var(--ka-red-2);
  stroke-width: 2.2;
}

#btnPower:hover {
  filter: brightness(1.10);
}

/* Power-ON: red glow ring */
body.power-on #btnPower {
  border-color: rgba(177,18,27,.65);
  border-top-color: rgba(220,55,55,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 0 rgba(0,0,0,.65),
    0 0 0 2px rgba(177,18,27,.28),
    0 0 20px rgba(177,18,27,.38);
}

body.power-on #btnPower .label {
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 10px rgba(177,18,27,.40);
}


/* =========================================
   START / STOP BUTTON ICON
   ========================================= */

#btnStartStop .icon svg {
  width: 20px;
  height: 20px;
}

#btnStartStop .icon polygon,
#btnStartStop .icon rect {
  fill: rgba(0,0,0,.68);
}

#btnStartStop .icon line {
  stroke: rgba(0,0,0,.45);
  stroke-width: 1.5;
}

#btnStartStop .icon {
  opacity: .90;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.22));
}


/* =========================================
   LED INDICATOR GROUPS
   ========================================= */

.led-group {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 8px;
}

#temp-leds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* LED pill */
.led {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.40);
  color: rgba(255,255,255,.60);
  font-size: 11px;
  letter-spacing: .3px;
}

/* Lamp dot */
.led::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a3d48;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(0,0,0,.35);
}

.led.active {
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.30);
}

.led.active::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 8px rgba(255,255,255,.20),
    0 0 0 1px rgba(255,255,255,.06);
}

/* --- Status LED active colors --- */

#ledPreheat.active::before  { background: var(--led-red); }
#ledReady.active::before    { background: var(--led-green); }
#ledBrewing.active::before  { background: #fff; }
#ledSteam.active::before    { background: var(--led-steam); }
#ledCleaning.active::before { background: var(--led-amber); }
#ledLowWater.active::before { background: var(--led-yellow); }

/* --- Temperature LED active colors & glows --- */

#ledTempLow.active::before {
  background: var(--led-blue);
  box-shadow:
    0 0 10px rgba(75,182,255,.60),
    0 0 0 1px rgba(255,255,255,.06);
}

#ledTempMed.active::before {
  background: #fff;
  box-shadow:
    0 0 10px rgba(255,255,255,.70),
    0 0 0 1px rgba(255,255,255,.06);
}

#ledTempHigh.active::before {
  background: var(--led-red);
  box-shadow:
    0 0 10px rgba(255,75,75,.60),
    0 0 0 1px rgba(255,255,255,.06);
}

/* --- Enhanced glows for key status LEDs --- */

#ledReady.active::before {
  width: 10px;
  height: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 14px rgba(56,224,123,.80),
    0 0 28px rgba(56,224,123,.35),
    0 0 0 1px rgba(255,255,255,.08);
}

#ledBrewing.active::before {
  box-shadow:
    0 0 14px rgba(255,255,255,.85),
    0 0 28px rgba(255,255,255,.35),
    0 0 0 1px rgba(255,255,255,.08);
  animation: breathe 1.1s ease-in-out infinite;
}

/* --- Temperature LEDs: absolutely-positioned lamp dot --- */

#temp-leds .led {
  position: relative;
  padding-left: 28px;
}

#temp-leds .led::before {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Status LED container --- */

#status-leds .led {
  position: relative;
}


/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes breathe {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(.90); opacity: .60; }
}

@keyframes blinkLamp {
  0%, 49%   { opacity: 1;   }
  50%, 100% { opacity: .20; }
}

#ledLowWater.blink::before {
  animation: blinkLamp .55s steps(2, end) infinite;
  box-shadow:
    0 0 14px rgba(255,216,74,.65),
    0 0 0 1px rgba(255,255,255,.08);
}


/* =========================================
   POWER-OFF DIMMING
   ========================================= */

/* Dim the whole panel when OFF */
body:not(.power-on) .machine {
  filter: brightness(.58) saturate(.70);
  transition: filter .45s ease;
}

/* Keep Power button fully visible when OFF */
body:not(.power-on) #btnPower {
  filter: none !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 0 rgba(0,0,0,.65),
    0 0 0 2px rgba(177,18,27,.16);
}

/* Suppress LED glow when OFF */
body:not(.power-on) .led::before {
  box-shadow: none !important;
}

/* Buttons look flat/inactive when OFF */
body:not(.power-on) .barbtn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 0 rgba(0,0,0,.45);
}


/* =========================================
   HOW-TO & ANNOTATIONS SECTIONS
   ========================================= */

.howto,
.annotations {
  max-width: 960px;
  margin: 16px auto 0;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(0,0,0,.45);
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.howto h3,
.annotations h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: rgba(255,255,255,.88);
  margin-bottom: 10px;
}

.howto ol {
  margin-left: 18px;
  color: rgba(220,226,238,.85);
  font-size: 13px;
  line-height: 1.6;
}

.howto li {
  margin-bottom: 8px;
}

.howto strong {
  color: #fff;
}

.annotations ul {
  margin-left: 18px;
  color: rgba(210,218,232,.82);
  font-size: 13px;
  line-height: 1.6;
}

.annotations li {
  margin-bottom: 6px;
}