/* Device mockups: one dashboard, three screens. Built in HTML so it stays crisp and matches the brand.
   Each screen is laid out at its real pixel size, then scaled to fit by js/devices.js. */

.cluster { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.dev { position: absolute; margin: 0; }
.dev-desktop { left: 0; top: 0; width: 70%; }
.dev-tablet  { right: 0; top: 0; width: 29%; }
.dev-phone   { right: 24%; bottom: 0; width: 14%; }
.dev-fit { position: relative; overflow: hidden; background: #0b0b0b; }
.dev-fit > .dv { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* frames */
.frame-desktop { border: 1px solid var(--steel); background: var(--carbon); box-shadow: 0 40px 80px rgba(0,0,0,.6); }
.frame-desktop .fbar { display: flex; align-items: center; gap: 7px; height: 3.2%; min-height: 22px; padding: 0 12px; border-bottom: 1px solid var(--rule); background: var(--ink); }
.frame-desktop .fbar i { width: 8px; height: 8px; border: 1px solid var(--ash); display: block; }
.frame-desktop .fbar span { margin-left: 10px; font: 500 10px var(--mono); color: var(--smoke); letter-spacing: .06em; }
.frame-tablet { background: #1a1a1a; padding: 2.4%; border-radius: 4.6% / 3.4%; border: 1px solid var(--steel); box-shadow: 0 30px 60px rgba(0,0,0,.65); }
.frame-tablet .dev-fit { border-radius: 2.6% / 2%; }
.frame-phone { position: relative; background: #1a1a1a; padding: 3.4%; border-radius: 17% / 7.8%; border: 1px solid var(--steel); box-shadow: 0 30px 60px rgba(0,0,0,.7); }
.frame-phone .dev-fit { border-radius: 13% / 6%; }
.frame-phone .island { position: absolute; z-index: 3; left: 50%; top: 2.6%; width: 28%; height: 3.2%; background: #000; border-radius: 99px; transform: translateX(-50%); }
.dev-cap { margin-top: 12px; font: 500 .6875rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); display: flex; gap: 12px; align-items: center; }
.dev-cap b { color: var(--void); background: var(--chalk); padding: 3px 7px; font-weight: 500; letter-spacing: .12em; }

/* ---------- the dashboard (pixel-sized; scaled by JS) ---------- */
.dv { color: var(--fog); font: 400 13px/1.4 var(--sans); background: #0b0b0b; }
.dv * { box-sizing: border-box; }
.dv h5, .dv h6 { margin: 0; font-weight: 500; }
.dv .mono { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.dv .serif { font-family: var(--serif); letter-spacing: -.02em; color: var(--white); }
.dv .num { font-variant-numeric: tabular-nums; }
.dv-card { border: 1px solid var(--rule); background: var(--carbon); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dv-card > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dv-card > header h6 { color: var(--chalk); font: 500 13px var(--sans); }

.dv-seg { display: inline-flex; border: 1px solid var(--steel); }
.dv-seg span { padding: 6px 12px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); border-right: 1px solid var(--steel); }
.dv-seg span:last-child { border-right: 0; }
.dv-seg span.on { background: var(--white); color: var(--void); }
.dv-av { width: 30px; height: 30px; background: var(--white); color: var(--void); display: grid; place-items: center; font: 500 11px var(--mono); }
.dv-search { width: 190px; height: 30px; border: 1px solid var(--steel); padding: 0 10px; display: flex; align-items: center; font: 400 12px var(--sans); color: var(--smoke); }

.dv-kpi { border: 1px solid var(--rule); background: var(--carbon); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.dv-kpi .v { font: 400 34px/1 var(--serif); letter-spacing: -.02em; color: var(--white); }
.dv-kpi .d { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--fog); }
.dv-kpi .spark { position: absolute; right: 14px; top: 16px; width: 74px; height: 26px; }
.dv-kpi.hi { background: var(--white); border-color: var(--white); }
.dv-kpi.hi .mono, .dv-kpi.hi .d { color: #4a4a4a; }
.dv-kpi.hi .v { color: var(--void); }

.dv-row { display: grid; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.dv-row:last-child { border-bottom: 0; }
.dv-chip { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border: 1px solid var(--ash); color: var(--fog); white-space: nowrap; }
.dv-chip.solid { background: var(--white); color: var(--void); border-color: var(--white); }
.dv-chip.hatch { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--steel) 3px 4px); border-color: var(--smoke); color: var(--white); }
.dv-bar { height: 6px; background: var(--ink); display: block; }
.dv-bar i { display: block; height: 100%; background: var(--white); }
.dv-bar.low i { background: var(--smoke); }
.dv-btn { font: 600 11.5px/1 var(--sans); padding: 8px 12px; border: 1px solid var(--white); background: var(--white); color: var(--void); }
.dv-btn.ghost { background: transparent; color: var(--white); border-color: var(--ash); }
.dv-appr { padding: 11px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; }
.dv-appr:last-child { border-bottom: 0; }
.dv-appr p { margin: 0; color: var(--chalk); font-size: 12.5px; line-height: 1.45; }
.dv-appr .a { display: flex; gap: 6px; }
.dv-redact { display: inline-block; width: 38px; height: 11px; background: var(--white); vertical-align: -1px; }

/* desktop */
.dv-d { width: 1280px; height: 840px; display: grid; grid-template-columns: 208px 1fr; }
.dv-d .side { background: var(--void); border-right: 1px solid var(--rule); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.dv-d .brand { display: flex; align-items: center; gap: 10px; color: var(--white); font: 400 20px var(--serif); padding: 0 8px 18px; }
.dv-d .brand svg { width: 20px; height: 20px; }
.dv-d .nav { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; color: var(--smoke); font: 500 13px var(--sans); border: 1px solid transparent; }
.dv-d .nav.on { background: var(--white); color: var(--void); }
.dv-d .nav b { font: 500 10px var(--mono); background: var(--white); color: var(--void); padding: 2px 5px; }
.dv-d .nav.on b { background: var(--void); color: var(--white); }
.dv-d .side .foot { margin-top: auto; border-top: 1px solid var(--rule); padding: 14px 8px 0; display: grid; gap: 4px; }
.dv-d .main { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow: hidden; }
.dv-d .top { display: flex; align-items: center; gap: 14px; }
.dv-d .top .t { flex: 1; }
.dv-d .top h5 { font: 400 28px/1 var(--serif); color: var(--white); letter-spacing: -.02em; }
.dv-d .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dv-d .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; flex: 1; min-height: 0; }
.dv-d .c-chart { grid-column: span 8; } .dv-d .c-appr { grid-column: span 4; }
.dv-d .c-stock { grid-column: span 5; } .dv-d .c-ship { grid-column: span 4; } .dv-d .c-pl { grid-column: span 3; }
.dv-d .grid > .dv-card { overflow: hidden; }

/* tablet */
.dv-t { width: 820px; height: 1100px; display: grid; grid-template-columns: 76px 1fr; }
.dv-t .rail { background: var(--void); border-right: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 0; }
.dv-t .rail svg { width: 24px; height: 24px; margin-bottom: 14px; }
.dv-t .rail i { width: 38px; height: 38px; border: 1px solid var(--rule); display: block; position: relative; }
.dv-t .rail i.on { background: var(--white); border-color: var(--white); }
.dv-t .rail i::after { content: ""; position: absolute; left: 11px; right: 11px; top: 18px; height: 2px; background: var(--ash); }
.dv-t .rail i.on::after { background: var(--void); }
.dv-t .main { padding: 26px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dv-t .top { display: flex; align-items: center; gap: 12px; }
.dv-t .top .t { flex: 1; }
.dv-t .top h5 { font: 400 40px/1 var(--serif); color: var(--white); letter-spacing: -.02em; }
.dv-t .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-t .kpi .v { font-size: 40px; }
.dv-t .two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }

/* phone */
.dv-p { width: 390px; height: 844px; display: flex; flex-direction: column; position: relative; }
.dv-p .status { height: 52px; flex: none; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 28px 6px; font: 600 14px var(--sans); color: var(--white); }
.dv-p .scroll { flex: 1; padding: 6px 16px 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.dv-p h5 { font: 400 34px/1 var(--serif); color: var(--white); letter-spacing: -.02em; }
.dv-p .kp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dv-p .kpi { padding: 12px; }
.dv-p .kpi .v { font-size: 30px; }
.dv-p .kpi .spark { display: none; }
.dv-p .tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); background: var(--void); padding: 10px 0 30px; }
.dv-p .tabs span { display: grid; justify-items: center; gap: 5px; font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.dv-p .tabs span i { width: 22px; height: 22px; border: 1px solid var(--ash); display: block; }
.dv-p .tabs span.on { color: var(--white); }
.dv-p .tabs span.on i { background: var(--white); border-color: var(--white); }
.dv-p .home { position: absolute; left: 50%; bottom: 9px; width: 130px; height: 5px; background: var(--white); border-radius: 3px; transform: translateX(-50%); }

@media (max-width: 960px) {
  .cluster { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dev { position: static; width: 100%; margin-inline: auto; }
  .dev-tablet { max-width: 420px; }
  .dev-phone { max-width: 250px; }
  .dev-photo { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; order: 9; }
}

/* ---------- interactive layer ---------- */
.dv button { appearance: none; font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
.dv-seg button { background: none; border: 0; border-right: 1px solid var(--steel); padding: 6px 12px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); transition: background .15s, color .15s; }
.dv-seg button:last-child { border-right: 0; }
.dv-seg button:hover { color: var(--white); background: var(--ink); }
.dv-seg button.on { background: var(--white); color: var(--void); }
.dv-btn { cursor: pointer; transition: background .15s, color .15s; }
.dv-btn:hover { background: var(--void); color: var(--white); }
.dv-btn.ghost:hover { background: var(--ink); }
button.dv-chip { cursor: pointer; background: transparent; }
button.dv-chip.solid { background: var(--white); color: var(--void); }
button.dv-chip:hover { outline: 1px solid var(--white); outline-offset: 2px; }
button.dv-chip.hatch { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--steel) 3px 4px); }
.dv-redact.big { width: 90px; height: 30px; vertical-align: baseline; }
.dv-lock { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; border: 1px dashed var(--ash);
  background: repeating-linear-gradient(135deg, var(--carbon) 0 8px, var(--ink) 8px 16px); }
.dv-empty { display: grid; gap: 8px; padding: 22px 0; justify-items: start; }
.dv-d .grid > .dv-lockc { overflow: hidden; }

/* controls above the cluster (real, keyboard-operable buttons) */
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--rule); background: var(--carbon); }
.ctl-g { display: flex; align-items: center; gap: 12px; }
.ctl .seg { display: inline-flex; border: 1px solid var(--steel); }
.ctl .seg button { appearance: none; background: none; border: 0; border-right: 1px solid var(--steel); color: var(--smoke); font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 14px 18px; min-height: 44px; cursor: pointer; transition: background .15s, color .15s; }
.ctl .seg button:last-child { border-right: 0; }
.ctl .seg button:hover { color: var(--white); background: var(--ink); }
.ctl .seg button[aria-pressed="true"] { background: var(--white); color: var(--void); }
.ctl .reset { margin-left: auto; appearance: none; background: none; border: 0; color: var(--smoke); font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 14px 4px; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.ctl .reset:hover { color: var(--white); }
.dev-status { margin: 14px 0 0; min-height: 1.4em; color: var(--fog); }
@media (max-width: 960px) { .ctl .reset { margin-left: 0; } .ctl-g { flex-wrap: wrap; } }