/**
 * mock.css — a PLANT template's app preview (js/app-mock.js): a small
 * MES screen set into the card's frame, rising from its bottom edge like
 * a tablet seen at the station. Every colour is a token.
 */

.card-thumb > .app-mock {
  position: absolute; left: 16px; right: 16px; top: 42px; bottom: -1px;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 8px 12px 0 0; background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0;
  box-shadow: 0 -2px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -18px rgba(var(--fw-s70-rgb), .35);
  font-family: var(--font); color: var(--text); text-align: left;
}
/* the frame behind it: the blue wash with a faint grid, like a drawing */
.card-thumb:has(> .app-mock) {
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 15px, color-mix(in srgb, var(--blue) 7%, transparent) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, color-mix(in srgb, var(--blue) 7%, transparent) 15px 16px),
    linear-gradient(135deg, var(--tile), var(--tile-2));
}

/* the device bar */
.am-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--chrome); color: var(--fw-t90);
}
.am-dots { display: flex; gap: 4px; }
.am-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--fw-t90-rgb), .28); }
.am-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-step { font-size: 9px; letter-spacing: .08em; color: rgba(var(--fw-t90-rgb), .6); }

.am-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; padding: 12px; }

/* the template's three capabilities, as the app's steps */
.am-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.am-steps li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
  background: var(--tile); font-size: 10px; line-height: 1.25; color: var(--text-muted);
}
.am-steps li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-steps li i {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--text-faint); font-style: normal; font-size: 8.5px; font-weight: 800; color: var(--text-faint);
}
.am-steps li i svg { width: 10px; height: 10px; }
.am-steps li.is-done i { border-color: var(--accent); background: var(--accent); color: #fff; }
.am-steps li.is-now { background: var(--surface); color: var(--navy-deep); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--blue); }
.am-steps li.is-now i { border-color: var(--blue); color: var(--blue); }

/* the panel: one per category */
.am-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 6px; background: color-mix(in srgb, var(--tile) 55%, var(--surface)); border: 1px solid var(--border); padding: 8px;
}
.am-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px;
  background: var(--accent-dim); color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.am-chip svg { width: 10px; height: 10px; }

.am-gauge svg { width: 78%; max-width: 120px; overflow: visible; }
.am-gauge .am-arc { fill: none; stroke: var(--tile-2); stroke-width: 7; stroke-linecap: round; }
.am-gauge .am-band { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.am-gauge .am-needle { stroke: var(--navy-deep); stroke-width: 2.5; stroke-linecap: round; }
.am-gauge circle { fill: var(--navy-deep); }

.am-checks { align-items: stretch; gap: 5px; }
.am-check { display: flex; align-items: center; gap: 6px; }
.am-check i {
  flex: none; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 4px;
  border: 1.5px solid var(--text-faint); font-style: normal; font-size: 9px; font-weight: 900; color: #fff;
}
.am-check i svg { width: 9px; height: 9px; }
.am-check b { flex: 1; height: 5px; border-radius: 3px; background: var(--tile-2); }
.am-check.is-ok i { border-color: var(--accent); background: var(--accent); }
.am-check.is-flag i { border-color: var(--red); background: var(--red); }
.am-check.is-flag b { background: var(--red-dim); }
.am-check:nth-child(2) b { margin-right: 18%; }
.am-check:nth-child(4) b { margin-right: 32%; }

.am-sign svg { width: 88%; fill: none; stroke: var(--navy-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.am-sign::before { content: ""; position: absolute; left: 12%; right: 12%; top: 58%; border-top: 1px dashed var(--text-faint); }

.am-bars { flex-direction: row; align-items: flex-end; gap: 5px; padding: 12px 10px 10px; }
.am-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background: linear-gradient(var(--accent), var(--blue)); opacity: calc(.55 + var(--h) * .45); }

.am-foot {
  display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px 7px;
  border-top: 1px solid var(--border); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.am-foot span:last-child { color: var(--warn); }

/* the play badge sits on the screen's corner: lift it off the footer */
.card-thumb:has(> .app-mock) .play-badge { bottom: 30px; right: 26px; }