/* Zovrel — mock-up cards (the Figma "Artefact/*" and "Mock/*" components).
   Shared by the home hero, inner-page title bands and figure stages.
   Each card is drawn at its Figma pixel size; callers set `--mock-scale` to resize it. */

.art__card, .mock { scale: var(--mock-scale, 1); }

/* ---- artefact scaffolding ---- */

.art {
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  display: flex; align-items: center; justify-content: center;
}
.art__card { position: relative; flex: none; }
.art__card--shadow { box-shadow: 10px 10px 0 0 var(--ink); border: 1.5px solid var(--ink); background: var(--paper-3); }

.art-f { --l: 16.59px;   --t: 100px;    --w: 341.661px; --h: 256.222px; }
.art-s { --l: 36px;      --t: 457.34px; --w: 285.157px; --h: 321.519px; }
.art-p { --l: 1150px;    --t: 43.19px;  --w: 267.108px; --h: 423.83px;  }
.art-a { --l: 1063.96px; --t: 560px;    --w: 315.313px; --h: 250.367px; }

/* ---- 1. forecast dashboard ---- */
.card-forecast { width: 320px; height: 224px; border-radius: 10px; }
.card-forecast .titlebar {
  position: absolute; left: -1.5px; top: -1.5px; width: 320px; height: 34px;
  background: var(--signal); border-radius: 10px 10px 0 0; overflow: hidden;
}
.card-forecast .titlebar span { position: absolute; left: 14px; top: 10px; font: 500 11px/normal var(--font-mono); color: var(--ink); }
.card-forecast .kicker { position: absolute; left: 14.5px; top: 46.5px; font: 600 10px/normal var(--font-body); letter-spacing: .6px; color: var(--ink-3); white-space: nowrap; }
.card-forecast .figure { position: absolute; left: 14.5px; top: 62.5px; font: 700 34px/normal var(--font-display); font-variation-settings: var(--display-axes); color: var(--ink); }
.card-forecast .note   { position: absolute; left: 110.5px; top: 80.5px; font: 500 12px/normal var(--font-body); color: var(--ink-2); white-space: nowrap; }
.card-forecast .chart  { position: absolute; left: 14.5px; top: 114.5px; width: 288px; height: 92px; overflow: hidden; }
.card-forecast .axis   { position: absolute; left: 14.5px; top: 206.5px; width: 288px; height: 1.5px; background: var(--ink); }
.card-forecast .bar    { position: absolute; width: 16px; border-radius: 2px; background: var(--ink); }
.card-forecast .bar--hi { background: var(--signal); }

/* ---- 2. site inspection ---- */
.card-survey { width: 260px; height: 300px; }
.card-survey .photo { position: absolute; left: 12.5px; top: 12.5px; width: 232px; height: 200px; overflow: hidden; }
.card-survey .photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-survey .boundary { position: absolute; left: 0; top: 0; width: 232px; height: 200px; }
.card-survey .vertex { position: absolute; width: 8px; height: 8px; background: var(--paper); border: 2px solid var(--primary); }
.card-survey .areatag {
  position: absolute; left: 112px; top: 118px;
  background: var(--primary); border-radius: 4px; padding: 4px 8px;
  font: 500 11px/normal var(--font-mono); color: var(--paper); white-space: nowrap;
}
.card-survey .cap  { position: absolute; left: 12.5px; top: 226.5px; font: 600 15.04px/normal var(--font-display); font-variation-settings: var(--display-axes); color: var(--ink); white-space: nowrap; }
.card-survey .sub  { position: absolute; left: 12.5px; top: 250.5px; font: 500 12px/normal var(--font-body); color: var(--ink-2); white-space: nowrap; }
.card-survey .stampwrap { position: absolute; left: 177.77px; top: 20.5px; width: 72.07px; height: 43.133px; display: flex; align-items: center; justify-content: center; }
.card-survey .checked {
  flex: none; width: 68px; height: 34px; border-radius: 4px; background: var(--primary); rotate: 8deg; position: relative;
}
.card-survey .checked span { position: absolute; left: 10px; top: 11px; font: 500 10px/normal var(--font-mono); color: var(--paper); }

/* ---- 3. agent phone ---- */
.card-phone { width: 220px; height: 400px; border-radius: 32px; background: var(--ink); box-shadow: 10px 10px 0 0 var(--ink); }
.card-phone .screen { position: absolute; left: 10px; top: 10px; width: 200px; height: 380px; background: var(--paper-3); border-radius: 24px; overflow: hidden; }
.card-phone .appbar { position: absolute; left: 0; top: 0; width: 200px; height: 56px; background: var(--primary); overflow: hidden; }
.card-phone .appbar .n { position: absolute; left: 16px; top: 12px; font: 600 15px/normal var(--font-display); font-variation-settings: var(--display-axes); color: var(--paper); }
.card-phone .appbar .s { position: absolute; left: 16px; top: 32px; font: 500 11px/normal var(--font-body); color: var(--signal); }
.card-phone .msg { position: absolute; left: 14px; width: 172px; background: var(--paper-2); border-radius: 12px; overflow: hidden; }
.card-phone .msg p { position: absolute; left: 12px; top: 10px; width: 150px; font: 400 12px/16px var(--font-body); color: var(--ink); }
.card-phone .msg--1 { top: 72px; height: 64px; }
.card-phone .msg--2 { top: 146px; height: 60px; }
.card-phone .review { position: absolute; left: 14px; top: 218px; width: 172px; height: 92px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.card-phone .review .ref  { position: absolute; left: 11px; top: 11px; font: 500 11px/normal var(--font-mono); color: var(--ink); white-space: nowrap; }
.card-phone .review .diff { position: absolute; left: 11px; top: 29px; font: 400 11px/normal var(--font-body); color: var(--ink-2); white-space: nowrap; }
.card-phone .review .approve { position: absolute; left: 11px; top: 53px; width: 72px; height: 28px; background: var(--primary); border-radius: 6px; overflow: hidden; }
.card-phone .review .approve span { position: absolute; left: 14px; top: 6px; font: 600 12px/normal var(--font-body); color: var(--paper); }
.card-phone .review .secondary { position: absolute; left: 89px; top: 53px; width: 70px; height: 28px; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.card-phone .review .secondary span { position: absolute; left: 13px; top: 5px; font: 600 12px/normal var(--font-body); color: var(--ink); }
.card-phone .typing { position: absolute; left: 14px; top: 324px; width: 52px; height: 26px; background: var(--paper-2); border-radius: 12px; overflow: hidden; }
.card-phone .typing img { position: absolute; top: 10px; width: 6px; height: 6px; }

/* ---- 4. architecture sheet ---- */
.card-arch { width: 300px; height: 230px; }
.card-arch .hdr { position: absolute; left: -1.5px; top: -1.5px; width: 300px; height: 36px; background: var(--primary); overflow: hidden; font: 500 11px/normal var(--font-mono); color: var(--paper); white-space: nowrap; }
.card-arch .hdr .a { position: absolute; left: 14px; top: 11px; }
.card-arch .hdr .b { position: absolute; left: 220px; top: 11px; }
.card-arch .links { position: absolute; left: -1.5px; top: -1.5px; width: 300px; height: 230px; }
.card-arch .box {
  position: absolute; width: 56px; height: 36px;
  background: var(--paper-3); border: 1.5px solid var(--ink); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font: 500 10px/normal var(--font-mono); color: var(--ink);
}
.card-arch .box--api { background: var(--primary); color: var(--paper); }
.card-arch .stickerwrap { position: absolute; left: 212.5px; top: 184.47px; width: 98.401px; height: 37.881px; display: flex; align-items: center; justify-content: center; }
.card-arch .sticker { flex: none; position: relative; width: 96px; height: 28px; border-radius: 14px; background: var(--signal); rotate: -6deg; }
.card-arch .sticker span { position: absolute; left: 14px; top: 6px; font: 600 12px/normal var(--font-body); color: var(--ink); }

/* ---- 5. Z stamp ---- */
.stamp {
  position: absolute; left: 250px; top: 690px;
  width: 124px; height: 124px; border-radius: 62px;
  background: var(--signal);
  filter: drop-shadow(6px 6px 0 var(--ink));
}
.stamp .ring { position: absolute; left: 0; top: 0; width: 124px; height: 124px; }
.stamp .z    { position: absolute; left: 47px; top: 31px; font: 700 52.08px/normal var(--font-display); font-variation-settings: var(--display-axes); color: var(--ink); }
.stamp .est  { position: absolute; left: 38.5px; top: 89.28px; font: 500 8.68px/normal var(--font-mono); color: var(--ink); white-space: nowrap; }


/* same treatment as .art__card--shadow, for mocks outside the home hero */
.mock--sheet {
  background: var(--paper-3);
  border: 1.5px solid var(--ink);
  box-shadow: 10px 10px 0 0 var(--ink);
}

/* ---- stat card (store-alerts / network-twin): forecast card without the chart ---- */
.card-stat { width: 320px; height: 150px; border-radius: 10px; }
.card-stat .titlebar {
  position: absolute; left: -1.5px; top: -1.5px; width: 320px; height: 34px;
  background: var(--signal); border-radius: 10px 10px 0 0; overflow: hidden;
}
.card-stat .titlebar span { position: absolute; left: 14px; top: 10px; font: 500 11px/normal var(--font-mono); color: var(--ink); }
.card-stat .kicker { position: absolute; left: 14.5px; top: 46.5px; font: 600 10px/normal var(--font-body); letter-spacing: .6px; color: var(--ink-3); white-space: nowrap; }
.card-stat .figure { position: absolute; left: 14.5px; top: 62.5px; font: 700 34px/normal var(--font-display); font-variation-settings: var(--display-axes); color: var(--ink); }
.card-stat .note   { position: absolute; left: 14.5px; top: 108px; font: 500 12px/normal var(--font-body); color: var(--ink-2); white-space: nowrap; }

/* ---- staffing simulator (healthcare case) ---- */
.card-staffing { width: 396px; height: 259.6px; border-radius: 11px; border-width: 1.65px; box-shadow: 11px 11px 0 0 var(--ink); }
.card-staffing .titlebar {
  position: absolute; left: -1.65px; top: -1.65px; width: 396px; height: 37.4px;
  background: var(--ink); border-radius: 11px 11px 0 0; overflow: hidden;
}
.card-staffing .titlebar span { position: absolute; left: 15.4px; top: 11px; font: 500 12.1px/normal var(--font-mono); color: var(--paper); }
.card-staffing .k   { position: absolute; top: 53.35px; font: 600 9.9px/normal var(--font-body); color: var(--ink-3); white-space: nowrap; }
.card-staffing .fig { position: absolute; top: 70.95px; font: 700 30.8px/normal var(--font-display); font-variation-settings: var(--display-axes); color: var(--ink); }
.card-staffing .sub { position: absolute; top: 110.55px; font: 500 12.1px/normal var(--font-body); color: var(--ink-2); white-space: nowrap; }
.card-staffing .k--a, .card-staffing .fig--a, .card-staffing .sub--a { left: 15.95px; }
.card-staffing .k--b, .card-staffing .fig--b, .card-staffing .sub--b { left: 205.15px; }
.card-staffing .fig--b { color: var(--primary); }
.card-staffing .track { position: absolute; width: 165px; height: 11px; border-radius: 5.5px; background: var(--paper-2); }
.card-staffing .fill  { position: absolute; height: 11px; border-radius: 5.5px; }
.card-staffing .badge {
  position: absolute; left: 15.95px; top: 213.95px;
  background: var(--signal); color: var(--ink);
  border-radius: 4.4px; padding: 5.5px 8.8px;
  font: 600 12.1px/normal var(--font-body); white-space: nowrap;
}

/* ---- plain note card (About / Insights / Legal band art) ---- */
.card-note { width: 272px; min-height: 108px; border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.card-note .t { font: 600 20px/26px var(--font-display); font-variation-settings: var(--display-axes); letter-spacing: -.4px; color: var(--ink); }
.card-note .s { font: 500 10px/14px var(--font-mono); letter-spacing: .4px; color: var(--ink-3); text-transform: uppercase; }

/* ---- booking card (Contact band art) ---- */
.card-booking { width: 300px; height: 212px; border-radius: 10px; }
.card-booking .titlebar { position: absolute; left: -1.5px; top: -1.5px; width: 300px; height: 32px; background: var(--primary); border-radius: 10px 10px 0 0; overflow: hidden; }
.card-booking .titlebar span { position: absolute; left: 14px; top: 9px; font: 500 11px/normal var(--font-mono); color: var(--paper); }
.card-booking .d { position: absolute; left: 14px; top: 44px; font: 600 18px/24px var(--font-display); font-variation-settings: var(--display-axes); color: var(--ink); }
.card-booking .s { position: absolute; left: 14px; top: 70px; font: 400 11px/normal var(--font-body); color: var(--ink-3); }
.card-booking .slots { position: absolute; left: 14px; top: 96px; display: flex; gap: 8px; }
.card-booking .slot { border: 1px solid var(--rule); border-radius: 6px; padding: 6px 10px; font: 500 11px/normal var(--font-body); color: var(--ink); }
.card-booking .cta { position: absolute; left: 14px; top: 140px; background: var(--signal); color: var(--ink); border-radius: 6px; padding: 9px 14px; font: 600 12px/normal var(--font-body); white-space: pre; }
.card-booking .tz { position: absolute; left: 14px; top: 182px; font: 400 10px/normal var(--font-body); color: var(--ink-3); }

/* ---- Z stamp as a standalone mock (inner page band art) ---- */
.card-stamp {
  position: relative;
  width: var(--s, 96px); height: var(--s, 96px);
  border-radius: 50%;
  background: var(--signal);
  filter: drop-shadow(6px 6px 0 var(--ink));
}
.card-stamp .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 12s linear infinite; }
.card-stamp .z {
  position: absolute; left: 0; right: 0; top: calc(25% * var(--f, 1));
  text-align: center;
  font: 700 calc(40.32px * var(--f, 1))/1 var(--font-display);
  font-variation-settings: var(--display-axes); color: var(--ink);
}
.card-stamp .est {
  position: absolute; left: 0; right: 0; top: calc(72% * var(--f, 1));
  text-align: center;
  font: 500 calc(6.72px * var(--f, 1))/1 var(--font-mono); color: var(--ink); white-space: nowrap;
}