/* Industry pages (/industries/*) and the switching page (/switch).
   Builds on site.css: same tokens, the same white art cards on the grey
   stage as the home hero. Drawn shapes only, never the real interface. */

/* ---------- Opening ---------- */
.ind-hero { padding: 80px 0 40px; }
.ind-hero h1 { font-size: var(--fs-2xl); max-width: 24ch; text-wrap: balance; }
.ind-hero .lede { margin-top: 20px; }
.ind-hero .actions { margin-top: 32px; }

.ind-stage { background: var(--stage); border-radius: var(--radius-stage); padding: 56px; }
.ind-art {
  display: grid; max-width: 1060px; margin: 0 auto; gap: 24px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
}
.ind-art > .art-card { min-width: 0; }
.ind-art .ind-main { padding: 32px; }

@media (max-width: 900px) {
  .ind-stage { padding: 32px; }
  .ind-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .ind-art .ind-main { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 560px) {
  .ind-hero { padding: 48px 0 28px; }
  .ind-stage { padding: 16px; border-radius: 14px; }
  .ind-art { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ind-art .art-card { padding: 18px; border-radius: 14px; }
  .ind-art .ind-main { padding: 20px; }
}

/* Rows inside a drawn card: label left, value right. */
.art-rows { margin-top: 18px; display: grid; gap: 10px; }
.art-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.art-rows li > span:first-child { color: var(--graphite); min-width: 0; }
.art-rows li > span:last-child { font-weight: 500; white-space: nowrap; }
.art-rows .art-total-row { padding-top: 10px; border-top: 1px solid var(--hair); }
.art-rows .art-total-row > span { color: var(--ink); font-weight: 600; }
.art-rows .art-deal > span:first-child { color: #1E6B3F; }
.art-rows .art-deal > span:last-child { color: #1E6B3F; }

.art-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  background: var(--stage); font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.art-tag--ok { background: #E3F2E8; color: #1E6B3F; }
.art-tag--wait { background: #FBF0D9; color: #7A5410; }

/* Tank and level gauges */
.gauge-list { margin-top: 18px; display: grid; gap: 14px; }
.gauge-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.gauge-top span:first-child { font-weight: 500; }
.gauge-top span:last-child { color: var(--graphite); }
.gauge { margin-top: 6px; height: 8px; border-radius: 4px; background: var(--stage-deep); overflow: hidden; }
.gauge span { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.gauge--low span { background: #B26B00; }

/* Pump tiles */
.pump-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pump { border: 1px solid var(--hair); border-radius: 12px; padding: 12px; min-width: 0; }
.pump-n { font-weight: 600; }
.pump-s { margin-top: 2px; font-size: 13px; color: var(--graphite); }
.pump-v { margin-top: 8px; font-weight: 600; font-size: 17px; }
.pump--active { border-color: var(--ink); }
.pump--ready { background: var(--stage); border-color: var(--stage); }

/* Price sign */
.sign { margin-top: 16px; border-radius: 12px; background: var(--ink); color: var(--white); padding: 14px 16px; display: grid; gap: 8px; }
.sign li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.sign li span:last-child { font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.sign sup { font-size: 12px; margin-left: 1px; }

/* Shelf label */
.shelf-label { margin-top: 16px; border: 1.5px solid var(--ink); border-radius: 6px; padding: 12px 14px; }
.shelf-label .sl-name { font-weight: 600; }
.shelf-label .sl-price { margin-top: 4px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.shelf-label .sl-price small { font-size: 14px; font-weight: 500; color: var(--graphite); margin-left: 2px; }
.barcode-lines { margin-top: 10px; height: 28px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); }

/* Mini floor plan */
.floor { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.table-t { border: 1px solid var(--hair); border-radius: 10px; padding: 10px 8px; text-align: center; font-size: 13px; min-width: 0; }
.table-t strong { display: block; font-size: 15px; }
.table-t span { color: var(--graphite); font-size: 12px; }
.table-t--busy { background: var(--ink); border-color: var(--ink); color: var(--white); }
.table-t--busy span { color: #C9CDD3; }
.table-t--due { border-color: #B26B00; }

/* ---------- Features ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.feat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; padding: 32px 32px 32px 0; border-bottom: 1px solid var(--hair); }
.feat:nth-child(2n) { padding-left: 32px; padding-right: 0; border-left: 1px solid var(--hair); }
.feat h3 { font-size: var(--fs-md); }
.feat p { margin-top: 8px; color: var(--graphite); }
.feat-plan { margin-top: 10px; font-size: 13px; color: var(--ink); }
.feat-plan:empty { display: none; }
.feat .text-link { display: inline-block; margin-top: 14px; }
@media (max-width: 820px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat, .feat:nth-child(2n) { padding: 28px 0; border-left: 0; }
}
@media (max-width: 480px) { .feat { gap: 16px; } }

/* ---------- Works with ---------- */
.works-note { margin-top: 16px; font-size: var(--fs-sm); }

/* ---------- Switching page ---------- */
.move-steps { border-top: 1px solid var(--hair); counter-reset: move; }
.move-steps > li {
  counter-increment: move; display: grid; grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--hair);
}
.move-steps > li::before {
  content: counter(move); width: 32px; height: 32px; border-radius: 50%; border: 1px solid #CDD0D6;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.move-steps h3 { font-size: var(--fs-md); }
.move-steps p { color: var(--graphite); }
.move-steps h3 + p { margin-top: 6px; }
.move-steps p + p { margin-top: 10px; }
@media (max-width: 760px) {
  .move-steps > li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
}

.check-list { display: grid; gap: 10px; margin-top: 16px; }
.check-list li { position: relative; padding-left: 26px; color: var(--ink); }
.check-list li::before {
  content: ""; position: absolute; left: 3px; top: .5em; width: 11px; height: 6px;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg);
}
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
.two-col > div { padding: 32px 32px 36px 0; }
.two-col > div + div { padding-left: 32px; padding-right: 0; border-left: 1px solid var(--hair); }
.two-col h3 { display: flex; align-items: center; gap: 14px; font-size: var(--fs-md); }
.two-col p { margin-top: 12px; color: var(--graphite); }
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col > div, .two-col > div + div { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--hair); }
}
.note-box { margin-top: 32px; background: var(--stage); border-radius: 16px; padding: 28px 32px; }
.note-box h3 { font-size: var(--fs-md); }
.note-box p { margin-top: 8px; color: var(--graphite); }
@media (max-width: 480px) { .note-box { padding: 22px 20px; } }