/* ============================================================
   Concept mockups — NocTel Desk language, THREE distinct layers:
     1 BACKGROUND (.sm-stage) = dot-grid panel in brand cream #ECEAE4 (--bg-card,
       so it separates from the ivory #F0EFE9 page) + 28px dot grid; fills the column.
     2 CARD (.sm-card) = solid white, radius 18, floats centered IN the panel
       (the dots show around all four edges); soft whisper shadow only.
     3 CONTENT (.sm-row/.sm-field/.sm-band) = soft-white sub-cards, faint 1px
       border, radius 12, NO shadow. Plus the label/title.
     • icon = 36px / r10 / rgba(9,21,36,0.06) pill, MUTED icon rgba(9,21,36,0.44)
   Real text only for the point; the rest = bars. Static (no anim).
   ============================================================ */
.sm-stage{
  --sm-panel:#ECEAE4;                     /* brand --bg-card cream: the dot panel (separates from the ivory page) */
  --sm-tile:#F9F9F7;                      /* soft-white tile (lifts off canvas)  */
  --sm-dot:rgba(218,218,208,0.78);        /* Action Editor canvas dot color      */
  --sm-navy:#091524; --sm-ink:#091524; --sm-ink2:#4D4F47;
  --sm-muted:rgba(9,21,36,0.42); --sm-icon-ink:rgba(9,21,36,0.44);
  --sm-icon-bg:rgba(9,21,36,0.06); --sm-bar:rgba(9,21,36,0.09);
  --sm-card-bg:#FFFFFF;                   /* the solid content card (front)      */
  --sm-blue:#2A528E; --sm-blue-dark:#1E3F6E; --sm-ok:#0F7D5D;
  /* soft, gentle lift — a whisper, not the heavy 5-layer */
  --sm-shadow: 0 1px 2px rgba(9,21,36,0.05), 0 6px 16px -6px rgba(9,21,36,0.10);
  /* LAYER 1 — the dot-grid background panel: fills the visual column, card floats in it */
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:clamp(36px,6%,72px); min-height:360px;
  background-color:var(--sm-panel);
  background-image:radial-gradient(circle, var(--sm-dot) 1px, transparent 1px);
  background-size:28px 28px;
  border-radius:24px; border:1px solid rgba(9,21,36,0.05); overflow:hidden;
}

/* Hero wrapper (.ph-visual) used to be a plain cream panel; the dot-grid stage now
   IS that panel, so neutralize the redundant outer one — but only where the mockup
   actually sits inside it (so non-mockup .ph-visual uses are untouched). */
.ph-visual:has(.sm-stage){ background:transparent; padding:0; border-radius:0; }

/* LAYER 2 — the white content card, floating centered on the dotted panel */
.sm-card{ position:relative; z-index:1; width:100%; max-width:360px; overflow:hidden;
  background:var(--sm-card-bg); border-radius:18px;
  box-shadow:0 1px 3px rgba(9,21,36,0.04), 0 6px 16px -8px rgba(9,21,36,0.08);
  font-family:var(--sans,'Geist',system-ui,sans-serif); color:var(--sm-ink); }

/* navy header strip (sidebar/topbar navy) */
.sm-strip{ background:var(--sm-navy); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.sm-strip .lg{ height:17px; width:auto; display:block; }
.sm-strip .lines{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.sm-strip .sm-bar{ background:rgba(255,255,255,0.22); }

.sm-pad{ padding:16px; }
.sm-bar{ height:8px; border-radius:999px; background:var(--sm-bar); display:block; }
.sm-label{ font-size:12px; font-weight:500; color:var(--sm-muted); margin-bottom:12px; padding:2px 4px 0; }
.sm-value{ font-size:13.5px; font-weight:500; color:var(--sm-ink); letter-spacing:-0.005em; }
.sm-num{ font-size:28px; font-weight:700; letter-spacing:-0.02em; color:var(--sm-ink); }

/* fields → ivory Desk tiles */
.sm-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sm-field{ background:var(--sm-tile); border:1px solid rgba(9,21,36,0.08); border-radius:12px; padding:14px 16px; box-shadow:none; }
.sm-field .sm-bar{ margin-top:11px; width:70%; }

/* band → ivory Desk tile */
.sm-band{ margin-top:10px; background:var(--sm-tile); border:1px solid rgba(9,21,36,0.08); border-radius:12px; padding:15px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:none; }
.sm-band .sm-bar{ width:44%; }

.sm-big{ text-align:center; padding:30px 20px; }
.sm-big .sm-value{ font-size:22px; font-weight:600; }

/* primary action — brand-blue launcher (real Desk launcher color) */
.sm-btn{ margin:4px 16px 16px; background:var(--sm-blue); color:#fff; border-radius:12px; padding:14px; text-align:center;
  font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; }
.sm-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* rows → ivory Desk tiles with the muted icon pill (matches .desk-item-body) */
.sm-rows{ display:flex; flex-direction:column; gap:10px; }
.sm-row{ display:flex; align-items:center; gap:13px; background:var(--sm-tile); border:1px solid rgba(9,21,36,0.08); border-radius:12px; padding:14px 16px; box-shadow:none; }
.sm-row .ic{ width:36px; height:36px; border-radius:10px; background:var(--sm-icon-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sm-row .ic svg{ width:18px; height:18px; stroke:var(--sm-icon-ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sm-row .rmid{ flex:1; min-width:0; }
.sm-row .rmid .sm-value{ font-size:13.5px; font-weight:500; }
.sm-row .rmid .sm-bar{ width:58%; margin-top:8px; }

/* status pills (Desk wash tones: info / success) */
.sm-pill{ font-size:12px; font-weight:500; color:rgba(9,21,36,0.5); background:var(--sm-icon-bg); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.sm-pill.ok{ color:var(--sm-ok); background:rgba(15,125,93,0.10); }
.sm-pill.blue{ color:var(--sm-blue); background:rgba(42,82,142,0.10); }

/* sparkline (the real Desk spark gradient) */
.sm-chart{ display:flex; align-items:flex-end; gap:6px; height:60px; margin-top:16px; }
.sm-cbar{ flex:1; background:rgba(9,21,36,0.08); border-radius:2px 2px 0 0; min-height:4px; }
.sm-cbar.on{ background:linear-gradient(180deg, var(--sm-blue) 0%, rgba(42,82,142,0.4) 100%); }
.sm-cap{ font-size:11px; color:var(--sm-muted); margin-top:11px; }