/* ============================================================
   SPIN CYCLE — 24-hour team laundromat
   A task inbox shaped like a coin-op laundromat floor.
   ============================================================ */

/* ---------- fonts (local only) ---------- */
@font-face {
  font-family: 'Oswald';
  src: url('assets/oswald.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('assets/work-sans.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('assets/ibm-plex-mono.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --sign:  'Oswald', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --body:  'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --night:   #070d16;
  --wall:    #11263a;
  --wall-2:  #0d1e2f;
  --tilegap: rgba(190, 232, 245, .07);
  --floor:   #16202e;

  --enamel:   #f4efe3;
  --enamel-2: #ddd4c2;
  --enamel-ink: #17202c;
  --chrome:   #c9d4dc;

  --suds:      #74e6f3;
  --detergent: #ff8a3d;
  --neon:      #ff5fa2;
  --lemon:     #ffd451;
  --mint:      #68f0b4;
  --violet:    #b48bff;
  --amber:     #ffb340;
  --jam:       #ff5f56;

  --paper: #f6f1e6;
  --ink:   #111a26;

  --st-todo:        #a8c2d8;
  --st-in-progress: var(--suds);
  --st-blocked:     var(--jam);
  --st-done:        var(--mint);

  --ring: var(--lemon);
  --rad: 14px;
  --shadow-deep: 0 24px 50px -22px rgba(0, 0, 0, .85);
}

* { box-sizing: border-box; }

/* `hidden` must beat the layout rules below (.banks is a grid, .btn a flexbox) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: #e9f1f7;
  background-color: var(--wall-2);
  /* glazed subway tile wall of the laundromat */
  background-image:
    radial-gradient(130% 70% at 50% -8%, rgba(116, 230, 243, .20), transparent 62%),
    radial-gradient(90% 60% at 100% 100%, rgba(255, 95, 162, .10), transparent 70%),
    repeating-linear-gradient(0deg, var(--tilegap) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, var(--tilegap) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 70%, var(--night) 100%);
  background-attachment: fixed, fixed, scroll, scroll, fixed;
}

h1, h2, h3 {
  font-family: var(--sign);
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0;
  line-height: 1.08;
}

a { color: var(--suds); }

::selection { background: var(--lemon); color: var(--ink); }

/* ---------- focus + skip ---------- */
/* Element selectors (not classes) so the ring survives every component rule.
   Lemon core + dark halo stays visible on both the steel console and the
   dark tiled wall. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(7, 13, 22, .85) !important;
}

.skiplink {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 90;
  transform: translateY(-160%);
  background: var(--lemon);
  color: var(--ink);
  font-family: var(--sign);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  padding: .6rem 1rem;
  border-radius: 8px;
  transition: transform .15s ease;
}
.skiplink:focus { transform: translateY(0); }

/* ============================================================
   STOREFRONT
   ============================================================ */
.storefront {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 2.1rem clamp(1rem, 3vw, 2.6rem) 1.6rem;
  border-bottom: 3px solid rgba(201, 212, 220, .22);
  background:
    linear-gradient(180deg, rgba(7, 13, 22, .72), rgba(7, 13, 22, .1));
}
.storefront::after {
  /* chrome signage rail */
  content: "";
  position: absolute;
  inset: auto 0 -3px 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--chrome), transparent);
  opacity: .55;
  pointer-events: none;
}

.storefront__sign { position: relative; }

/* the neon ghost behind the wordmark */
.neon {
  position: absolute;
  inset: -6px auto auto -2px;
  margin: 0;
  font-family: var(--sign);
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: transparent;
  filter: blur(9px);
  pointer-events: none;
}
.neon__word { color: var(--neon); }
.neon__word--alt { color: var(--suds); margin-left: .28em; }

.storefront__name {
  position: relative;
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  text-shadow:
    0 0 2px #fff,
    0 0 14px rgba(255, 95, 162, .95),
    0 0 34px rgba(116, 230, 243, .75),
    0 6px 0 rgba(0, 0, 0, .35);
}
.storefront__tag {
  margin: .55rem 0 0;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #a9c4d6;
}

.storefront__meters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}
.meter {
  min-width: 112px;
  padding: .55rem .8rem .6rem;
  border: 1px solid rgba(201, 212, 220, .26);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(7, 13, 22, .8), rgba(22, 46, 68, .55));
}
.meter--wide { min-width: 220px; flex: 1 1 220px; }
.meter__k {
  display: block;
  font-family: var(--sign);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #8fb0c6;
}
.meter__v {
  display: block;
  font-family: var(--mono);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--lemon);
}
.meter__v--sm { font-size: .72rem; letter-spacing: .06em; color: #cfe3ef; }

.soap {
  height: 10px;
  margin: .4rem 0 .3rem;
  border-radius: 99px;
  background: rgba(7, 13, 22, .8);
  box-shadow: inset 0 0 0 1px rgba(201, 212, 220, .3);
  overflow: hidden;
}
.soap__fill {
  position: relative;
  height: 100%;
  width: calc(var(--pct) * 1%);
  min-width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--suds), var(--mint));
  transition: width .5s cubic-bezier(.3, 1.3, .5, 1);
}
.soap__bubbles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 60%, rgba(255, 255, 255, .85) 1.4px, transparent 2px),
    radial-gradient(circle at 55% 30%, rgba(255, 255, 255, .7) 1.1px, transparent 1.8px),
    radial-gradient(circle at 85% 70%, rgba(255, 255, 255, .8) 1.3px, transparent 2px);
  background-size: 22px 10px;
  animation: suds-drift 3.2s linear infinite;
}

.openlamp {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--sign);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--neon);
  text-shadow: 0 0 12px rgba(255, 95, 162, .8);
  animation: flicker 7s steps(1, end) infinite;
}
.openlamp__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 10px var(--neon);
}

/* ============================================================
   CONTROL CONSOLE (stainless panel)
   ============================================================ */
.console {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(2, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: .85rem 1rem;
  padding: 1rem clamp(1rem, 3vw, 2.6rem) 1.05rem;
  border-bottom: 2px solid rgba(7, 13, 22, .7);
  background:
    linear-gradient(180deg, #e7ebee 0%, #cfd8de 42%, #b9c5cd 100%);
  box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .95), inset 0 1px 0 #fff;
  color: var(--ink);
}
.console::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, transparent 1px 4px);
  opacity: .35;
  mix-blend-mode: overlay;
}
.console__screws { position: absolute; inset: 0; pointer-events: none; }
.console__screws i {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #8c9aa4 60%, #5e6b74);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.console__screws i:nth-child(1) { top: 8px; left: 10px; }
.console__screws i:nth-child(2) { top: 8px; right: 10px; }
.console__screws i:nth-child(3) { bottom: 8px; left: 10px; }
.console__screws i:nth-child(4) { bottom: 8px; right: 10px; }

.field { position: relative; z-index: 1; min-width: 0; }
.field__label {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--sign);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #27333f;
}
.field__hint {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: none;
  color: #47555f;
}
.field__hint::before { content: "— "; }

/* coin-slot search */
.slot {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .1rem .65rem;
  border-radius: 99px;
  background: #16202e;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .8), 0 1px 0 #fff;
}
.slot__icon svg {
  display: block;
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--suds);
  stroke-width: 2;
  stroke-linecap: round;
}
.slot input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .62rem 0;
  border: 0;
  background: transparent;
  color: #eaf6fb;
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .01em;
}
.slot input::placeholder { color: #86a7bd; }
/* the whole coin slot carries the focus ring, not the bare input */
.slot input:focus { outline: none; box-shadow: none !important; }
.slot:focus-within {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .8), 0 0 0 6px rgba(7, 13, 22, .85);
}
.slot input::-webkit-search-cancel-button { filter: invert(1) hue-rotate(160deg); }

/* program dials (native selects) */
.dial { position: relative; }
.dial select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: .62rem 2.1rem .62rem .7rem;
  border: 2px solid #46545f;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdfbf6, #e6dfd0);
  color: var(--ink);
  font-family: var(--sign);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.dial__arrow {
  position: absolute;
  top: 50%; right: .7rem;
  width: 0; height: 0;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-top-color: #46545f;
  pointer-events: none;
}
.dial--big select {
  padding: .8rem 2.4rem .8rem .9rem;
  font-size: 1.02rem;
  border-color: var(--ink);
  box-shadow: 0 4px 0 rgba(17, 26, 38, .35);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .62rem 1rem;
  border: 2px solid #46545f;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdfbf6, #e2dbcb);
  color: var(--ink);
  font-family: var(--sign);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(17, 26, 38, .4);
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.btn:hover { background: linear-gradient(180deg, #fff, var(--lemon)); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, .4); }
.btn--primary {
  background: linear-gradient(180deg, var(--lemon), #f2b61f);
  border-color: #6b5208;
}
.btn--lever .btn__lever {
  width: 10px; height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--jam), #a32b25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn--ghost {
  background: transparent;
  border-color: rgba(201, 212, 220, .45);
  color: #dcebf4;
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(116, 230, 243, .14); color: #fff; }
/* "are you sure?" state, strong enough to beat .btn--ghost */
.btn.is-armed {
  background: linear-gradient(180deg, var(--lemon), #f2b61f);
  border-color: #6b5208;
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 212, 81, .3);
}

.console__readout {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #3a4854;
}
.console__readout b { color: #0f3b47; }

/* ============================================================
   FLOOR
   ============================================================ */
.floor {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 266px;
  grid-template-areas: "stations banks attendant";
  align-items: start;
  gap: clamp(1rem, 2vw, 1.8rem);
  padding: clamp(1.2rem, 2.6vw, 2.2rem) clamp(1rem, 3vw, 2.6rem) 3rem;
}
/* speckled terrazzo underfoot */
.terrazzo {
  position: relative;
  background-color: var(--floor);
  background-image:
    radial-gradient(circle at 11% 18%, rgba(255, 212, 81, .20) 0 2.5px, transparent 3px),
    radial-gradient(circle at 42% 61%, rgba(255, 95, 162, .18) 0 2px, transparent 2.6px),
    radial-gradient(circle at 73% 27%, rgba(116, 230, 243, .2) 0 3px, transparent 3.6px),
    radial-gradient(circle at 88% 82%, rgba(255, 255, 255, .16) 0 2px, transparent 2.6px),
    radial-gradient(circle at 24% 88%, rgba(104, 240, 180, .16) 0 2.2px, transparent 2.8px),
    radial-gradient(circle at 60% 8%, rgba(255, 255, 255, .1) 0 1.6px, transparent 2.2px);
  background-size: 190px 190px;
}
.terrazzo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .07), transparent 70%);
}

/* ---------- stations / floor plan ---------- */
.stations { grid-area: stations; position: sticky; top: 128px; }
.stations__h, .attendant__h {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #8fb0c6;
  margin-bottom: .6rem;
}
.stations__list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .45rem; }

.station {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid rgba(201, 212, 220, .2);
  border-left: 4px solid rgba(201, 212, 220, .28);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(23, 44, 64, .85), rgba(11, 23, 35, .9));
  color: #e6f1f8;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.station:hover { background: rgba(116, 230, 243, .12); transform: translateX(2px); }
.station[aria-current="true"] {
  border-left-color: var(--lemon);
  background: linear-gradient(90deg, rgba(255, 212, 81, .22), rgba(11, 23, 35, .9));
}
.station__text { flex: 1 1 auto; min-width: 0; }
.station__name {
  display: block;
  font-family: var(--sign);
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.station__sub {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: #9dbbd0;
}
.station__count {
  font-family: var(--mono);
  font-size: .82rem;
  min-width: 2.1em;
  padding: .1rem .35rem;
  text-align: center;
  border-radius: 5px;
  background: rgba(7, 13, 22, .8);
  box-shadow: inset 0 0 0 1px rgba(201, 212, 220, .22);
  color: var(--lemon);
}

/* status lamps */
.station__lamp, .lamp, .program__lamp {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #41535f;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7);
}
[data-status="todo"].station__lamp, .lamp[data-status="todo"], .program__lamp[data-status="todo"] { background: var(--st-todo); box-shadow: 0 0 8px rgba(168, 194, 216, .7); }
[data-status="in-progress"].station__lamp, .lamp[data-status="in-progress"], .program__lamp[data-status="in-progress"] { background: var(--st-in-progress); box-shadow: 0 0 9px var(--st-in-progress); }
[data-status="blocked"].station__lamp, .lamp[data-status="blocked"], .program__lamp[data-status="blocked"] { background: var(--st-blocked); box-shadow: 0 0 9px var(--st-blocked); animation: pulse 1.6s ease-in-out infinite; }
[data-status="done"].station__lamp, .lamp[data-status="done"], .program__lamp[data-status="done"] { background: var(--st-done); box-shadow: 0 0 9px var(--st-done); }
.station__lamp--all {
  background: conic-gradient(var(--st-todo), var(--st-in-progress), var(--st-blocked), var(--st-done), var(--st-todo));
  box-shadow: 0 0 8px rgba(255, 255, 255, .45);
}

/* price list card */
.pricelist {
  padding: .75rem .85rem .85rem;
  border: 1px dashed rgba(201, 212, 220, .3);
  border-radius: 9px;
  background: rgba(7, 13, 22, .45);
}
.pricelist__h {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--detergent);
  margin-bottom: .4rem;
}
.pricelist dl { margin: 0; font-family: var(--mono); font-size: .74rem; line-height: 1.6; color: #c5dae7; }
.pricelist dl > div { display: flex; justify-content: space-between; gap: .5rem; }
.pricelist dt, .pricelist dd { margin: 0; }
.pricelist dd { color: var(--lemon); }

/* ---------- banks of machines ---------- */
.banks { grid-area: banks; display: grid; gap: 1.6rem; min-width: 0; }

.bank { min-width: 0; }
.bank__sign {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  margin-bottom: .8rem;
  padding: .45rem .8rem;
  border-radius: 8px;
  border-left: 5px solid var(--bank-hue, var(--chrome));
  background: linear-gradient(90deg, rgba(7, 13, 22, .85), rgba(7, 13, 22, .25));
}
.bank__name {
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 0 14px color-mix(in srgb, var(--bank-hue, #fff) 70%, transparent);
}
.bank__sub {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ab8cc;
}
.bank__tally {
  margin: 0 0 0 auto;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--bank-hue, var(--chrome));
  white-space: nowrap;
}

.machines {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}

/* ---------- the machine ---------- */
.machine {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 12px 12px;
  background: linear-gradient(180deg, var(--enamel) 0%, #ece5d6 62%, var(--enamel-2) 100%);
  color: var(--enamel-ink);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -4px 0 rgba(0, 0, 0, .12),
    0 14px 26px -16px rgba(0, 0, 0, .9);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.machine::after {
  /* plinth the machine stands on */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .34), rgba(0, 0, 0, .1));
  pointer-events: none;
}
.machine:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 20px 30px -16px rgba(0, 0, 0, .95); }
.machine.is-open {
  outline: 3px solid var(--lemon);
  outline-offset: 2px;
}
.machine.is-flash { animation: machine-flash .9s ease-out 1; }

.machine__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  padding: .5rem .7rem;
  background: linear-gradient(180deg, #2b3a47, #1b2733);
  color: #dceaf3;
  border-bottom: 2px solid rgba(0, 0, 0, .5);
}
.machine__no {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--lemon);
}
.machine__state {
  font-family: var(--sign);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.temp {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .72rem;
  padding: .1rem .4rem;
  border-radius: 99px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.temp[data-p="high"]   { color: #ff9a8e; }
.temp[data-p="medium"] { color: var(--lemon); }
.temp[data-p="low"]    { color: #9fdcff; }

.machine__face {
  display: flex;
  gap: .8rem;
  padding: .85rem .8rem .5rem;
  align-items: flex-start;
  perspective: 520px;
}
.machine__info { min-width: 0; flex: 1 1 auto; }
.machine__title {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.25;
  color: #111a26;
}
.machine__title mark {
  background: linear-gradient(180deg, transparent 52%, var(--lemon) 52%);
  color: inherit;
  border-radius: 2px;
  padding: 0 .08em;
}
.machine__dye {
  margin: .3rem 0 0;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.45;
  color: #45535f;
  letter-spacing: .02em;
}
.machine__dye .swatch {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: .35rem;
  border-radius: 2px;
  background: var(--dye);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  vertical-align: baseline;
}

.taglist, .symbols { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 0; padding: 0; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .08rem .42rem;
  border-radius: 4px;
  background: rgba(17, 26, 38, .08);
  box-shadow: inset 0 0 0 1px rgba(17, 26, 38, .18);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .02em;
  color: #2a3845;
}
.tag__sym { font-size: .78rem; line-height: 1; color: #11525e; }

.machine__panel {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  padding: .55rem .8rem .8rem;
}
.lcd {
  flex: 1 1 auto;
  min-width: 0;
  padding: .3rem .5rem;
  border-radius: 5px;
  background: #0d2b21;
  color: #7dffc0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(125, 255, 192, .25);
}
.machine__open {
  padding: .5rem .72rem;
  font-size: .74rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* ---------- the porthole ---------- */
.porthole {
  --size: 104px;
  position: relative;
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  padding: 7px;
  background:
    conic-gradient(from 210deg, #fdfefe, #9eadb7 22%, #e9eff3 42%, #7d8d98 62%, #dde6ec 82%, #fdfefe);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .8);
  transition: transform .35s cubic-bezier(.4, 1.4, .5, 1);
}
.machine.is-open .porthole { transform: rotateY(-26deg) scale(1.02); }
.porthole__glass {
  display: block;
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, #2b3b48 0%, #111c26 70%, #060b11 100%);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .95);
}
.porthole__drum {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .13) 0 1.4px, transparent 1.9px);
  background-size: 13px 13px;
}
.porthole__garment {
  position: absolute;
  inset: 20%;
  display: grid;
  place-items: center;
  color: var(--dye, #fff);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--dye, #fff) 55%, transparent));
}
.porthole__garment svg { width: 100%; height: 100%; fill: currentColor; }
.porthole__water {
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: linear-gradient(180deg, rgba(116, 230, 243, .5), rgba(26, 120, 150, .72));
  border-top: 2px solid rgba(220, 255, 255, .65);
  transition: height .4s ease;
}
.porthole__suds { position: absolute; inset: 0; opacity: 0; }
.porthole__suds i {
  position: absolute;
  bottom: 6%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .35));
}
.porthole__glare {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .06) 34%, transparent 52%);
  pointer-events: none;
}
.porthole__jam {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}
.porthole__jam span {
  font-family: var(--sign);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--jam);
  padding: .1rem .4rem;
  border-radius: 3px;
  transform: rotate(-11deg);
  box-shadow: 0 0 12px rgba(255, 95, 86, .9);
}

/* per-status porthole behaviour */
.porthole[data-status="todo"] .porthole__garment { transform: translateY(8%) rotate(-4deg); }
.porthole[data-status="in-progress"] .porthole__water { height: 46%; }
.porthole[data-status="in-progress"] .porthole__suds { opacity: 1; }
.porthole[data-status="in-progress"] .porthole__garment { animation: tumble 5.5s linear infinite; }
.porthole[data-status="in-progress"] .porthole__suds i { animation: bubble-up 3.4s ease-in infinite; }
.porthole[data-status="in-progress"] .porthole__suds i:nth-child(1) { left: 18%; animation-delay: .1s; }
.porthole[data-status="in-progress"] .porthole__suds i:nth-child(2) { left: 42%; animation-delay: 1.1s; width: 5px; height: 5px; }
.porthole[data-status="in-progress"] .porthole__suds i:nth-child(3) { left: 63%; animation-delay: 2s; }
.porthole[data-status="in-progress"] .porthole__suds i:nth-child(4) { left: 80%; animation-delay: .7s; width: 4px; height: 4px; }

.porthole[data-status="blocked"] .porthole__water { height: 72%; background: linear-gradient(180deg, rgba(255, 95, 86, .4), rgba(120, 20, 20, .8)); border-top-color: rgba(255, 190, 180, .7); }
.porthole[data-status="blocked"] .porthole__garment { transform: rotate(31deg) translateY(10%); filter: none; opacity: .75; }
.porthole[data-status="blocked"] .porthole__jam { opacity: 1; }

.porthole[data-status="done"] .porthole__glass { background: radial-gradient(circle at 50% 40%, #e9fff6 0%, #b6e8d4 55%, #6fb49c 100%); }
.porthole[data-status="done"] .porthole__drum { background-image: radial-gradient(circle, rgba(0, 60, 40, .16) 0 1.4px, transparent 1.9px); }
.porthole[data-status="done"] .porthole__garment {
  inset: 32% 16%;
  border-radius: 3px;
  background: var(--dye);
  box-shadow: 0 -5px 0 -1px color-mix(in srgb, var(--dye) 72%, #fff), 0 -10px 0 -2px color-mix(in srgb, var(--dye) 50%, #fff);
  filter: none;
}
.porthole[data-status="done"] .porthole__garment svg { display: none; }

/* ---------- empty shop ---------- */
.emptyshop {
  grid-area: banks;
  align-self: start;
  text-align: center;
  padding: 2.6rem 1.4rem 2.8rem;
  border: 2px dashed rgba(201, 212, 220, .35);
  border-radius: 16px;
  background: rgba(7, 13, 22, .55);
}
.emptyshop__sock svg {
  width: 72px; height: 72px;
  fill: var(--detergent);
  filter: drop-shadow(0 0 18px rgba(255, 138, 61, .6));
  animation: sway 4.5s ease-in-out infinite;
  transform-origin: 50% 10%;
}
.emptyshop__h { margin-top: .6rem; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .08em; }
.emptyshop__p { margin: .5rem auto 1.2rem; max-width: 42ch; color: #b9d2e2; font-family: var(--mono); font-size: .78rem; }
.emptyshop__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ---------- attendant column ---------- */
.attendant { grid-area: attendant; position: sticky; top: 128px; display: grid; gap: .9rem; }

.logroll {
  list-style: none;
  margin: 0; padding: .55rem .6rem;
  display: grid; gap: .4rem;
  max-height: 232px;
  overflow: auto;
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .9);
  /* torn receipt edge */
  -webkit-mask-image: radial-gradient(circle at 5px 100%, transparent 0 4px, #000 4.5px);
  mask-image: radial-gradient(circle at 5px 100%, transparent 0 4px, #000 4.5px);
  -webkit-mask-size: 10px 100%;
  mask-size: 10px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.logroll li {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .01em;
  padding-bottom: .35rem;
  border-bottom: 1px dotted rgba(17, 26, 38, .28);
}
.logroll li:last-child { border-bottom: 0; }
.logroll__empty { color: #6b7883; font-style: italic; }
.logroll time { color: #a1511a; }
.logroll b { font-weight: 600; }
.logroll .to { color: #0c5f42; }

.window { margin: 0; }
.window__glass {
  position: relative;
  border-radius: 9px 9px 4px 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 0 4px #2b3a47, 0 10px 22px -14px #000;
}
.window__glass img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.7) brightness(.6) contrast(1.1);
}
.window__blinds {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(7, 13, 22, .55) 0 3px, transparent 3px 11px);
}
.window__frame {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 48.4%, #2b3a47 48.4% 51.6%, transparent 51.6%),
    radial-gradient(70% 50% at 50% 0%, rgba(255, 212, 81, .22), transparent 70%);
}
.window figcaption {
  margin-top: .45rem;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.5;
  color: #9dbbd0;
}

.wetfloor {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-family: var(--sign);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--lemon);
}
.wetfloor__sign svg { width: 26px; height: 26px; fill: var(--lemon); stroke: #1b2733; stroke-width: 1.5; }
.wetfloor__sign circle { fill: #1b2733; stroke: none; }
.wetfloor__sign path:nth-child(2) { stroke: #1b2733; }

/* ---------- footer ---------- */
.shopfoot {
  padding: 1.4rem clamp(1rem, 3vw, 2.6rem) 2.4rem;
  border-top: 2px solid rgba(201, 212, 220, .18);
  background: linear-gradient(180deg, rgba(7, 13, 22, .55), var(--night));
}
.shopfoot__line { margin: 0 0 .5rem; font-family: var(--mono); font-size: .74rem; line-height: 1.6; letter-spacing: .02em; color: #a5c2d4; }
.shopfoot__line--fine { color: #83a2b7; font-size: .7rem; }
.shopfoot strong { color: var(--neon); font-family: var(--sign); letter-spacing: .1em; text-transform: uppercase; }

/* ============================================================
   IRONING BOARD — the detail dialog
   ============================================================ */
.board {
  width: min(1020px, calc(100% - 2.5rem));
  max-height: min(880px, calc(100dvh - 3rem));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  overflow: visible;
  color: var(--ink);
}
/* hold the floor still while the ironing board is out */
body:has(dialog[open]) { overflow: hidden; }

.board::backdrop {
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 212, 81, .18), transparent 70%), rgba(4, 8, 14, .82);
  backdrop-filter: blur(3px);
}
.board__inner {
  max-height: min(880px, calc(100dvh - 3rem));
  overflow: auto;
  border-radius: 18px;
  /* stretched ironing-board cover */
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #fbf7ec, #e8e0cf);
  box-shadow: var(--shadow-deep), inset 0 0 0 3px #fff, 0 0 0 4px #2b3a47;
}
.board__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.1rem;
  background: linear-gradient(180deg, #2b3a47, #1b2733);
  color: #e6f1f8;
}
.board__eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lemon);
}
.btn--close { padding: .5rem .75rem; font-size: .76rem; }
.btn__x svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

.board__grid {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  gap: 1.4rem;
  padding: 1.3rem 1.3rem 1.6rem;
}

/* garment laid out under the lamp */
.laidout {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background:
    radial-gradient(60% 55% at 50% 18%, rgba(255, 244, 198, .95), rgba(236, 229, 212, .4) 60%, transparent 75%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #e7e0cf, #cfc7b4);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), inset 0 -14px 22px -12px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.laidout__garment { width: 62%; color: var(--dye, #333); display: grid; place-items: center; }
.laidout__garment svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); }
.laidout__lamp {
  position: absolute;
  inset: -40% 10% auto 10%;
  height: 70%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 220, 120, .55), transparent 72%);
  pointer-events: none;
}
.laidout__shadow {
  position: absolute;
  inset: auto 18% 12% 18%;
  height: 10%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  filter: blur(7px);
}

/* the sewn-in care label */
.carelabel {
  position: relative;
  margin-top: 1rem;
  padding: 1rem .95rem 1.1rem;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .022) 0 1px, transparent 1px 3px),
    #fdfbf4;
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(17, 26, 38, .14);
}
.carelabel__stitch {
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(17, 26, 38, .32);
  border-radius: 2px;
  pointer-events: none;
}
.carelabel__h {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: #16616f;
  margin-bottom: .6rem;
}
.carelabel__k {
  font-family: var(--sign);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #57646f;
}
.carelabel__owner { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; }
.carelabel__owner-name { font-family: var(--body); font-weight: 650; font-size: .96rem; color: var(--ink); }
.monogram {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #16616f;
  color: #eafdff;
  font-family: var(--sign);
  font-size: .86rem;
  letter-spacing: .04em;
  box-shadow: 0 0 0 2px #fdfbf4, 0 0 0 3.5px #16616f;
}
.carelabel__dl { margin: 0; display: grid; gap: .3rem; }
.carelabel__dl > div {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  padding-bottom: .28rem;
  border-bottom: 1px dotted rgba(17, 26, 38, .22);
}
.carelabel__dl dt {
  font-family: var(--sign);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #57646f;
  white-space: nowrap;
}
.carelabel__dl dd {
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  text-align: right;
  color: #1c2733;
}
.carelabel__symbols { margin-top: .75rem; }
.symbols { margin-top: .3rem; }
.symbols .tag { background: #eef4f5; box-shadow: inset 0 0 0 1px rgba(22, 97, 111, .35); font-size: .72rem; }

/* title band across the board */
.board__titlebar {
  padding: 1.2rem 1.3rem 0;
  border-bottom: 3px double rgba(17, 26, 38, .28);
  margin: 0 1.3rem;
  padding-left: 0; padding-right: 0;
}
.board__title {
  font-family: var(--body);
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.16;
  color: #101924;
  padding-bottom: .75rem;
  max-width: 34ch;
}

/* instructions */
.instructions { margin-top: .2rem; }
.instructions__h, .program__h {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: #16616f;
  padding-bottom: .35rem;
  border-bottom: 2px solid rgba(22, 97, 111, .3);
  margin-bottom: .7rem;
}
.instructions__body p {
  margin: 0 0 .85rem;
  font-size: 1rem;
  line-height: 1.68;
  color: #22303d;
  max-width: 62ch;
}
.instructions__body p:last-child { margin-bottom: 0; }
.instructions__body p + p {
  padding-left: .85rem;
  border-left: 3px solid var(--dye, #16616f);
  font-size: .95rem;
  color: #2f3d4a;
}

/* program selector */
.program {
  margin-top: 1.4rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #dfe6ea, #c6d1d8);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(0, 0, 0, .14);
}
.program__row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.program__row .field { flex: 1 1 230px; }
.program__lamps {
  display: flex;
  gap: .45rem;
  margin: 0 0 .6rem;
  padding: .45rem .55rem;
  border-radius: 99px;
  background: #1b2733;
}
.program__lamp { opacity: .22; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.program__lamp.is-lit { opacity: 1; filter: none; }

.program__feedback {
  min-height: 1.4em;
  margin: .85rem 0 0;
  padding: .5rem .7rem;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.5;
  color: #0d2b21;
  background: #c9f3dd;
  box-shadow: inset 0 0 0 1px rgba(13, 43, 33, .3);
}
.program__feedback.is-idle { background: #e8eef1; color: #38454f; box-shadow: inset 0 0 0 1px rgba(56, 69, 79, .35); }
.program__feedback.is-warn { background: #ffe0ae; color: #52330a; box-shadow: inset 0 0 0 1px rgba(82, 51, 10, .3); }
.program__feedback strong { font-weight: 600; }
#d-goto { margin-top: .7rem; border-color: #46545f; color: var(--ink); }
#d-goto:hover { background: rgba(22, 97, 111, .14); color: var(--ink); }

/* ============================================================
   RECEIPTS (printed feedback slips)
   ============================================================ */
.receipts {
  position: fixed;
  right: clamp(.6rem, 2vw, 1.4rem);
  bottom: clamp(.6rem, 2vw, 1.4rem);
  z-index: 70;
  display: grid;
  gap: .5rem;
  justify-items: end;
  pointer-events: none;
  max-width: min(330px, calc(100vw - 1.6rem));
}
.receipt {
  padding: .6rem .75rem .7rem;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.55;
  letter-spacing: .01em;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .95);
  -webkit-mask-image: radial-gradient(circle at 5px 100%, transparent 0 4px, #000 4.5px);
  mask-image: radial-gradient(circle at 5px 100%, transparent 0 4px, #000 4.5px);
  -webkit-mask-size: 10px 100%;
  mask-size: 10px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  animation: print-out .45s cubic-bezier(.2, 1.2, .4, 1) 1;
  transform-origin: 100% 0;
}
.receipt__ding {
  display: block;
  font-family: var(--sign);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: #a1511a;
}
.receipt__line { display: block; }
.receipt b { color: #0c5f42; }
.receipt hr { border: 0; border-top: 1px dashed rgba(17, 26, 38, .4); margin: .35rem 0; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes tumble { to { transform: rotate(360deg); } }
@keyframes bubble-up {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: .95; }
  100% { transform: translateY(-62px) scale(1.15); opacity: 0; }
}
@keyframes suds-drift { to { background-position-x: 22px; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes print-out {
  from { transform: translateY(-14px) scaleY(.4); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes machine-flash {
  0%   { box-shadow: inset 0 1px 0 #fff, 0 0 0 4px var(--lemon), 0 0 42px 6px rgba(255, 212, 81, .85); }
  100% { box-shadow: inset 0 1px 0 #fff, 0 0 0 0 rgba(255, 212, 81, 0), 0 14px 26px -16px rgba(0, 0, 0, .9); }
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  96.5% { opacity: .35; }
  97.2% { opacity: 1; }
  97.9% { opacity: .2; }
  98.6% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .porthole[data-status="in-progress"] .porthole__suds i { opacity: .9; transform: none; }
  .openlamp, .emptyshop__sock svg { opacity: 1; }
  .machine:hover { transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .floor {
    grid-template-columns: 228px minmax(0, 1fr);
    grid-template-areas:
      "stations banks"
      "attendant banks";
  }
  .attendant { position: static; }
  .porthole { --size: 88px; }
}

@media (max-width: 860px) {
  .console {
    grid-template-columns: 1fr 1fr;
    position: relative;
    top: auto;
  }
  .field--search { grid-column: 1 / -1; }
  .field--action { grid-column: 1 / -1; }
  .field--action .btn { width: 100%; }

  .floor {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stations" "banks" "attendant";
  }
  .stations { position: static; }
  .stations__list {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .stations__list > li { flex: 0 0 auto; scroll-snap-align: start; }
  .station { width: auto; min-width: 190px; }
  .pricelist { display: none; }

  .board {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .board__inner {
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .board__titlebar { margin: 0 1rem; padding-top: 1rem; }
  .board__grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 1rem 1rem 2.4rem; }
  .laidout { aspect-ratio: 16 / 9; }
  .laidout__garment { width: 32%; }
  .board__left { display: grid; gap: 0; }

  .storefront { padding-top: 1.5rem; }
  .storefront__meters { width: 100%; }
  .meter { flex: 1 1 110px; min-width: 0; }
  .openlamp { width: 100%; }
}

@media (max-width: 460px) {
  .machines { grid-template-columns: minmax(0, 1fr); }
  .porthole { --size: 96px; }
  .machine__panel { flex-wrap: wrap; }
  .machine__open { width: 100%; }
  .receipts { max-width: calc(100vw - 1.2rem); }
  .meter--wide { flex: 1 1 100%; }
}

/* High-contrast / forced colors: keep the hooks usable */
@media (forced-colors: active) {
  .machine, .board__inner, .carelabel, .logroll, .receipt { border: 1px solid CanvasText; }
  .btn, .dial select, .slot { border: 1px solid CanvasText; }
}