/* Ported from the prototype. Edit here; the prototype is frozen. */
/* Card illustrations: the same interface panels as the scenes, straight on and
   still. The wrapper carries .fig so every component style already applies. */
/* the photo slot sets line-height:0 for images; text panels need it back, or
   every wrapped line lands on top of the one above it */
.ill-wrap{position:relative;aspect-ratio:16/11;overflow:hidden;padding:0;line-height:1.45;
  background:color-mix(in srgb,var(--u-text-2) 6%,transparent)}
.ill-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 20%,transparent,color-mix(in srgb,var(--u-text-2) 5%,transparent))}
.ill-wrap .ic{position:absolute;border-radius:10px;padding:8px 10px;line-height:1.4;
  transform:rotate(var(--r,0deg)) scale(calc(var(--s,1) * var(--ics,1)));transform-origin:top left;
  background:var(--g-glass);border:1px solid var(--g-edge);
  box-shadow:0 1px 1px rgba(35,31,32,.04),0 6px 14px -8px rgba(35,31,32,.22);
  display:grid;gap:3px;align-content:start}
.ill-wrap .ic.lg{box-shadow:0 1px 2px rgba(35,31,32,.05),0 12px 24px -12px rgba(35,31,32,.28)}
.ill-wrap .ic.sm{padding:6px 8px;gap:3px;border-radius:8px}
[data-ground="ink"] .ill-wrap .ic,:root[data-theme="dark"] .ill-wrap .ic{
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 22px -12px rgba(0,0,0,.6)}
.ill-wrap .ir{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:9.5px;padding:2.5px 0;line-height:1.25;border-top:1px solid var(--g-edge)}
.ill-wrap .ir span{color:var(--u-text-2)}
.ill-wrap .ir b{font-weight:600;text-align:right}
.ill-wrap .ir.ok b{color:var(--g-sage)}
.ill-wrap .ir.warn b{color:var(--g-clay)}
.ill-wrap .ch{margin-bottom:2px;line-height:1.3}
.ill-wrap .ch b{font-size:10.5px}
.ill-wrap .ch span{font-size:8.5px}
.ill-wrap .mini{font-size:9px;align-items:flex-start;line-height:1.4}
.ill-wrap .mini span{line-height:1.35}
.ill-wrap .mini .sd{margin-top:3px}
.ill-wrap .quote{font-size:9.5px;line-height:1.45}
.ill-wrap .stat b{font-size:18px;line-height:1.05}
.ill-wrap .stat span{font-size:8px}
.ill-wrap .chip{font-size:8px;padding:3px 7px;line-height:1.35}
.ill-wrap .btn{font-size:8.5px;padding:4px 8px}
.ill-wrap .cs{font-size:8.5px;padding:3px 6px}
.ill-wrap .pick{font-size:8.5px;padding:2.5px 0;line-height:1.25}
.ill-wrap .bars{height:26px}
.ill-wrap .ring{width:36px;height:36px}
.ill-wrap .spark{height:22px}
/* a scale the composition's own transform multiplies rather than replaces */
@media (max-width:560px){.ill-wrap{--ics:.92}}


/* ---- the other shapes an interface has --------------------------------- */
.ill-wrap .kpi{display:grid;gap:1px}
.ill-wrap .kpi b{font-size:21px;line-height:1;font-weight:600;letter-spacing:-.02em}
.ill-wrap .kpi span{font-size:8px;color:var(--u-text-2)}
.ill-wrap .kpi .dl{font-size:8px;font-style:normal;font-weight:600}
.ill-wrap .kpi .dl.up{color:var(--g-sage)}
.ill-wrap .kpi .dl.dn{color:var(--g-clay)}

.ill-wrap .tl{display:grid;gap:0}
.ill-wrap .tli{display:grid;grid-template-columns:8px 1fr auto;gap:6px;align-items:baseline;
  font-size:9px;padding:3px 0;position:relative}
.ill-wrap .tli i{width:5px;height:5px;border-radius:99px;background:var(--u-text-2);
  opacity:.45;margin-top:3px}
.ill-wrap .tli.ok i{background:var(--g-sage);opacity:1}
.ill-wrap .tli.warn i{background:var(--g-clay);opacity:1}
.ill-wrap .tli em{font-style:normal;font-size:8px;color:var(--u-text-2);font-variant-numeric:tabular-nums}
.ill-wrap .tli::before{content:"";position:absolute;left:2px;top:11px;bottom:-3px;width:1px;
  background:var(--g-edge)}
.ill-wrap .tli:last-child::before{display:none}

.ill-wrap .qt{font-size:10px;line-height:1.45;font-weight:500}
.ill-wrap .qt cite{display:block;font-style:normal;font-size:8px;color:var(--u-text-2);margin-top:3px}

.ill-wrap .pills{display:flex;flex-wrap:wrap;gap:3px}
.ill-wrap .pl{font-size:8px;padding:2.5px 6px;border-radius:99px;border:1px solid var(--g-edge);
  color:var(--u-text-2);line-height:1.3}
.ill-wrap .pl.ok{color:var(--g-sage);border-color:color-mix(in srgb,var(--g-sage) 40%,transparent)}
.ill-wrap .pl.warn{color:var(--g-clay);border-color:color-mix(in srgb,var(--g-clay) 40%,transparent)}
.ill-wrap .pl.on{background:var(--u-text);color:var(--u-bg);border-color:transparent}

.ill-wrap .qu{display:grid;gap:2px}
.ill-wrap .qi{display:flex;justify-content:space-between;gap:8px;font-size:9px;
  padding:3.5px 6px;border-radius:6px;background:color-mix(in srgb,var(--u-text-2) 7%,transparent)}
.ill-wrap .qi b{font-weight:600;font-size:8px}
.ill-wrap .qi.ok b{color:var(--g-sage)}
.ill-wrap .qi.warn b{color:var(--g-clay)}
.ill-wrap .qi.now{background:var(--u-text);color:var(--u-bg)}
.ill-wrap .qi.now b{color:var(--u-bg);opacity:.75}

.ill-wrap .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ill-wrap .cal i{font-style:normal;font-size:7.5px;text-align:center;padding:3px 0;border-radius:4px;
  color:var(--u-text-2);background:color-mix(in srgb,var(--u-text-2) 8%,transparent)}
.ill-wrap .cal i.ok{background:color-mix(in srgb,var(--g-sage) 26%,transparent);color:var(--u-text)}
.ill-wrap .cal i.warn{background:color-mix(in srgb,var(--g-clay) 26%,transparent);color:var(--u-text)}
.ill-wrap .cal i.now{background:var(--u-text);color:var(--u-bg)}

.ill-wrap .mt{height:5px;border-radius:99px;background:color-mix(in srgb,var(--u-text-2) 14%,transparent);
  overflow:hidden}
.ill-wrap .mt i{display:block;height:100%;background:var(--g-sage);border-radius:99px}
.ill-wrap .mtl{font-size:8px;color:var(--u-text-2)}

.ill-wrap .tb{display:flex;gap:2px;padding:2px;border-radius:6px;
  background:color-mix(in srgb,var(--u-text-2) 8%,transparent)}
.ill-wrap .tb span{font-size:8px;padding:2.5px 6px;border-radius:4px;color:var(--u-text-2)}
.ill-wrap .tb span.on{background:var(--u-surface);color:var(--u-text);font-weight:600}

.ill-wrap .tbl{display:grid;gap:1px;font-size:8.5px}
.ill-wrap .tbl .th,.ill-wrap .tbl .tr{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:6px;padding:2.5px 0}
.ill-wrap .tbl .th{font-size:7.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--u-text-2)}
.ill-wrap .tbl .tr{border-top:1px solid var(--g-edge)}
.ill-wrap .tbl .tr span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}

.ill-wrap .cd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;line-height:1.6}
.ill-wrap .cd div{display:grid;grid-template-columns:12px 1fr;gap:4px}
.ill-wrap .cd em{font-style:normal;color:var(--u-text-2);opacity:.6;text-align:right}

.ill-wrap .th-msg{display:grid;gap:3px}
.ill-wrap .th-msg span{font-size:8.5px;line-height:1.4;padding:4px 7px;border-radius:9px;max-width:88%}
.ill-wrap .th-msg .in{background:color-mix(in srgb,var(--u-text-2) 10%,transparent);justify-self:start;
  border-bottom-left-radius:3px}
.ill-wrap .th-msg .out{background:var(--u-text);color:var(--u-bg);justify-self:end;
  border-bottom-right-radius:3px}

.ill-wrap .nm{display:grid;gap:3px;position:relative;padding-left:10px}
.ill-wrap .nm span{font-size:8.5px;padding:3px 7px;border-radius:6px;border:1px solid var(--g-edge);
  position:relative}
.ill-wrap .nm span::before{content:"";position:absolute;left:-10px;top:50%;width:10px;height:1px;
  background:var(--g-edge)}
.ill-wrap .nm .hub{background:var(--u-text);color:var(--u-bg);border-color:transparent;font-weight:600}
.ill-wrap .nm::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--g-edge)}