/* ---------- Templates, simplified (index card + Cytiva "Show value first") ----------
   A small, non-interactive version of the Platforms prototype in the Cytiva UI
   style. Everything is sized in em, and the em follows the container width. */

.tpl-host { container-type: inline-size; }
.tpl-host > .tpl-mini { width: 100%; }
.tpl-mini {
  --cy-text: #18181b; --cy-text-3: #747476; --cy-border: #e8e8e8; --cy-tint: #f7f7f7;
  --cy-focus: #429dff; --cy-topic: #00755f; --cy-primary-dark: #004e3f;
  display: grid; height: 100%; font: 400 calc(100cqw / 30) / 1.3 Inter, system-ui, sans-serif;
  color: var(--cy-text); text-align: left; letter-spacing: 0;
}
.tpl-mini.with-chart { grid-template-columns: 43% 57%; font-size: calc(100cqw / 52); }
.tpl-list { position: relative; display: grid; align-content: center; gap: .8em; padding: 1.2em; background: var(--cy-tint); }
.with-chart .tpl-list { align-content: start; overflow: hidden; border-right: 1px solid var(--cy-border); }
.tpl-card {
  position: relative; display: block; min-height: 5.6em; padding: .85em 1em .8em 5.6em;
  border: 1px solid var(--cy-border); background: #fff; overflow: hidden;
  transition: border-color .35s, box-shadow .35s;
}
.tpl-card.on { border-color: var(--cy-focus); box-shadow: 0 0 0 1px var(--cy-focus); }
.tpl-mol {
  position: absolute; top: 50%; left: -.9em; width: 6em; height: 6em;
  opacity: 0; transform: translate(-2em, -50%);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.tpl-mol.in { opacity: 1; transform: translate(0, -50%); }
.tpl-mol video { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.tpl-sub { display: block; font-size: .78em; font-weight: 600; color: var(--cy-topic); }
.tpl-title { display: block; margin-top: .15em; font-size: 1.08em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-by { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .45em; font-size: .72em; color: var(--cy-text-3); }
.tpl-by > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-tag { flex: none; padding: 0 .55em; font-weight: 700; font-size: .92em; line-height: 1.75; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #66b8a9; }
.tpl-tag.capture { background: var(--cy-focus); }
.tpl-detail { display: flex; flex-direction: column; min-width: 0; padding: 1.4em 1.5em; background: #fff; }
.tpl-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.tpl-head b { font-size: 1.3em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-meta { margin-top: .4em; font-size: .78em; color: var(--cy-text-3); }
.tpl-chart { margin-top: 1em; }
.tpl-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tpl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; margin-top: 1em; }
.tpl-stats span { padding: .5em .7em; border: 1px solid var(--cy-border); font-size: .72em; color: var(--cy-text-3); }
.tpl-stats b { display: block; margin-top: .1em; font-size: 1.6em; color: var(--cy-text); }
.tpl-tag.none { color: #5d5d5f; background: var(--cy-border); }
.tpl-detail { overflow: hidden; }
.tpl-empty { display: grid; place-items: center; aspect-ratio: 300 / 120; margin-top: 1em; border: 1px dashed #d1d1d3; font-size: .8em; color: var(--cy-text-3); }
.tpl-skel { margin-top: 1.2em; }
.tpl-row { display: grid; grid-template-columns: 7.5em 1fr; gap: 1em; padding: .8em 0; border-top: 1px solid var(--cy-border); }
.tpl-row > span:first-child { font-size: .78em; color: #5d5d5f; }
.tpl-row i { display: block; height: .55em; margin: .2em 0 .55em; background: #ececed; }
.tpl-row i:last-child { margin-bottom: .2em; }
.tpl-detail.swap > * { animation: tpl-in .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes tpl-in { from { opacity: 0; transform: translateY(.4em); } }
.tpl-mini.compact { grid-template-columns: 40% 60%; font-size: calc(100cqw / 30); }
.compact .tpl-list { gap: .6em; padding: .8em; }
.compact .tpl-card { min-height: 3.6em; padding: .55em .6em .55em 3.6em; }
.compact .tpl-mol { left: -.7em; width: 4em; height: 4em; }
.compact .tpl-sub { font-size: .62em; }
.compact .tpl-title { font-size: .82em; }
.compact .tpl-detail { padding: .9em .9em; }
.compact .tpl-head b { font-size: .95em; }
.compact .tpl-chart { margin-top: .6em; }
.tpl-lines { margin-top: .8em; }
.tpl-lines i { display: block; height: .45em; margin-top: .55em; background: #ececed; }
@media (prefers-reduced-motion: reduce) { .tpl-mol, .tpl-card { transition: none; } .tpl-detail.swap > * { animation: none; } }

/* ---------- Setup wizard, simplified (Cytiva "Show feedback along the way") ---------- */
.wiz-host { container-type: inline-size; padding: 0; border: 0; overflow: hidden; }
.wiz {
  display: grid; grid-template-rows: auto 1fr auto; aspect-ratio: 4 / 3;
  font: 400 calc(100cqw / 34) / 1.3 Inter, system-ui, sans-serif; color: #18181b; background: #fff; text-align: left;
}
.wiz-top { display: flex; justify-content: space-between; align-items: center; padding: .8em 1em; font-size: .9em; }
.wiz-top i { font-style: normal; color: #464649; }
.wiz-body { display: grid; grid-template-columns: 36% 64%; min-height: 0; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.wiz-steps { margin: 0; padding: .4em .7em; list-style: none; background: #f7f7f7; counter-reset: s; }
.wiz-steps li { counter-increment: s; display: flex; align-items: center; justify-content: space-between; gap: .3em; padding: .42em 0; border-bottom: 1px solid #e8e8e8; font-size: .72em; color: #5d5d5f; }
.wiz-steps li:last-child { border: 0; }
.wiz-steps li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-steps li span::before { content: counter(s) ". "; }
.wiz-steps li i { flex: none; width: 1.1em; height: 1.1em; border: 1px solid #d1d1d3; border-radius: 50%; transition: background .3s, border-color .3s; }
.wiz-steps li.done { color: #00755f; }
.wiz-steps li.done i { border-color: #00886f; background: #00886f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 80% no-repeat; }
.wiz-steps li.on { color: #18181b; font-weight: 700; }
.wiz-main { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: #f7f7f7; }
.wiz-review { padding: .6em .8em; }
.wiz-review b, .wiz-chart b { font-size: .75em; }
.wiz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; margin-top: .4em; }
.wiz-grid i { height: 1.1em; border: 1px solid #e0e0e0; background: #fff; }
.wiz-chart { padding: .5em .8em .4em; background: #fff; border-top: 1px solid #e8e8e8; }
.wiz-chart svg { display: block; width: 100%; height: auto; margin-top: .3em; }
.wl { opacity: 0; transition: opacity .5s; }
.wl.on { opacity: 1; }
.wl .ln { stroke-dashoffset: 0; }
.wl:not(.on) .ln:not([stroke-dasharray]) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.wl.on .ln:not([stroke-dasharray]) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1); }
.wiz-foot { display: flex; justify-content: space-between; padding: .6em 1em; }
.wiz-foot i { font-style: normal; font-size: .72em; font-weight: 600; padding: .45em .9em; border: 1px solid #464649; }
.wiz-foot .wiz-next { color: #fff; background: #004e3f; border-color: #004e3f; }
@media (prefers-reduced-motion: reduce) { .wl, .wl .ln, .wiz-steps li i { transition: none !important; } }

/* ---------- Sidebar concept, simplified (Cytiva "Explain each step") ---------- */
.side-host { container-type: inline-size; padding: 0; border: 0; overflow: hidden; }
.sm {
  position: relative; display: grid; grid-template-columns: 47% 53%; aspect-ratio: 4 / 3;
  font: 400 calc(100cqw / 34) / 1.3 Inter, system-ui, sans-serif; color: #111827; background: #e5e5e5; text-align: left;
}
.sm-side { display: flex; flex-direction: column; min-width: 0; background: #fff; border-right: 1px solid #e5e7eb; }
.sm-prog { display: flex; justify-content: space-between; padding: .8em .8em .35em; font-size: .72em; color: #4b5563; }
.sm-prog b { font-weight: 500; color: #111827; }
.sm-bar { height: .35em; margin: 0 .8em; background: #e5e7eb; }
.sm-bar i { display: block; width: 0; height: 100%; background: #00a63e; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.sm-done { display: none; align-items: center; gap: .35em; margin: .5em .8em 0; font-size: .7em; color: #008236; }
.sm-done::before { content: ""; width: 1.1em; height: 1.1em; border-radius: 50%; background: #00c950 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 80% no-repeat; }
.sm-gs { margin: .6em .8em .5em; padding: .5em .6em; background: #eff6ff; }
.sm-gs b { display: block; font-size: .7em; font-weight: 500; color: #1c398e; }
.sm-gs i { display: block; height: .38em; margin-top: .4em; background: #bfdbfe; }
.sm-gs i + i { width: 70%; }
.sm .sm-menu { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e5e7eb; }
.sm .sm-menu li { margin: 0; display: flex; align-items: center; gap: .5em; height: 2em; padding: 0 .8em; border-left: .22em solid transparent; font-size: .72em; transition: background .35s, color .35s, border-color .35s; }
.sm-menu li svg { flex: none; width: 1.05em; height: 1.05em; }
.sm-menu li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-menu li.sm-todo { color: #e7670f; background: #fff7ed; }
.sm-menu li.sm-cur { color: #7c2d12; background: #fed7aa; border-left-color: #ff6900; }
.sm-menu li.sm-sel { color: #1447e6; background: #dbeafe; border-left-color: #2b7fff; }
.sm.finished .sm-done { display: flex; }
.sm.finished .sm-gs, .sm.finished .sm-bar { display: none; }
.sm-main { display: flex; flex-direction: column; gap: .6em; min-width: 0; padding: .8em; }
.sm-head { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; }
.sm-title { font-size: .95em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sm-btn { max-width: 100%; padding: .45em .7em; font-style: normal; font-size: .64em; font-weight: 500; color: #fff; background: #007a5e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .15s, background .15s; }
.sm-btn.press { transform: scale(.94); background: #005a45; }
.sm-hint { height: 1.8em; background: #ecfdf3; border: 1px solid #d1fae5; }
.sm.setup .sm-hint { background: #fff7ed; border-color: #ffd6a7; }
.sm-card { padding: .5em; background: #fff; }
.sm-card i { display: block; height: .45em; width: 45%; background: #d1d5dc; }
.sm-card i + i { width: 100%; height: 1.4em; margin-top: .45em; background: #f3f4f6; }
.sm-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sm-bar i, .sm-menu li, .sm-btn { transition: none; } }

/* ---------- Optimization results, three versions (Cytiva "What went wrong") ---------- */
.opt-frame { container-type: inline-size; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 6px 18px -10px #6b2a1c40; }
.opt { display: flex; flex-direction: column; gap: .55em; height: 100%; padding: .9em; font: 400 calc(100cqw / 30) / 1.25 Inter, system-ui, sans-serif; color: #18181b; text-align: left; }
/* Marching ants: dashes that travel around the box, like a lasso selection. */
.ants {
  --ac: #7b68ee; --al: 7px; --aw: 1px; --as: 28px;
  background:
    linear-gradient(90deg, var(--ac) 60%, transparent 0) 0 0 / var(--al) var(--aw) repeat-x,
    linear-gradient(90deg, var(--ac) 60%, transparent 0) var(--as) 100% / var(--al) var(--aw) repeat-x,
    linear-gradient(0deg, var(--ac) 60%, transparent 0) 0 var(--as) / var(--aw) var(--al) repeat-y,
    linear-gradient(0deg, var(--ac) 60%, transparent 0) 100% 0 / var(--aw) var(--al) repeat-y;
  animation: ants 2.5s linear infinite;
}
@keyframes ants { to { background-position: var(--as) 0, 0 100%, 0 0, 100% var(--as); } }
.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.opt-card { padding: .5em .6em; border: 1px solid #e3e3e3; background: #fafafa; }
.opt-card.red { background: #fdeeee; border-color: #f3d3d3; }
.opt-card.green { background: #edf6ef; border-color: #d3e8d8; }
.opt-card b { display: block; font-size: .8em; font-weight: 700; }
.opt-card small { display: block; font-size: .62em; color: #5d5d5f; }
.opt-row { display: flex; align-items: stretch; gap: .3em; margin-top: .35em; }
.opt-row > span { flex: 1; display: flex; justify-content: center; align-items: center; gap: .25em; min-width: 0; padding: .2em .3em; font-size: .78em; white-space: nowrap; }
.opt-row em { align-self: center; font-style: normal; font-size: .7em; color: #999; }
.opt .o { background: #0000000d; }
.opt .a { background: #b3d8ff; font-weight: 700; }
.opt-legend { display: flex; gap: .3em; font-size: .62em; }
.opt-legend span { padding: .25em .5em; }
.ic { flex: none; display: inline-block; width: 1em; height: 1em; border-radius: 50%; }
.ic.bad { background: #b03060 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 4l4 4M8 4l-4 4' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center / 100%; }
.ic.up { background: #0b8831 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 6.5L6 4l2.5 2.5M3.5 9L6 6.5 8.5 9' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") center / 100%; }
.opt-t { display: flex; flex-direction: column; font-size: .66em; }
.opt-t > div { display: grid; align-items: center; padding: .4em .6em; border-bottom: 1px solid #ececec; }
.opt-t.v12 > div { grid-template-columns: 4.6em 2em 1fr 1fr 1fr; }
.opt-t.v3 { font-size: .64em; }
.opt-t.v3 > div { grid-template-columns: 1.4em 6em 1fr 1fr 1fr 1fr; align-items: start; }
.opt-t .h { font-weight: 700; color: #3f3f46; }
.opt-t.v3 .h { font-weight: 500; color: #5d5d5f; }
.opt-t small { display: block; font-size: .85em; color: #8a8a8d; }
.opt-t small.bad { color: #9a2a2a; }
.opt-t .sel { background: #b3d8ff; }
.opt-t.v3 .sel { background: #d6e8fb; }
.opt-t .btn { justify-self: start; padding: .15em .4em; font-weight: 700; font-size: .9em; }
.opt-t .btn.on { color: #fff; background: #429dff; }
.opt-t .fail { color: #9a9a9d; background: #ececec; }
.opt-t .btn.fail { color: #b03060; background: #f3dede; }
.opt-t .tag { display: block; width: max-content; margin-top: .2em; padding: .05em .4em; font-style: normal; font-size: .82em; color: #1c4f86; background: #fff; border-radius: 3px; }
.opt-t .tag.rec { color: #1f6b35; background: #d9efdd; }
.opt-t .grp { display: block; padding: .3em .4em; font-size: .85em; color: #8a8a8d; }
.opt-cmp { display: flex; align-items: center; gap: .5em; font-size: .64em; color: #5d5d5f; }
.opt-cmp em { padding: .3em .7em; font-style: normal; color: #18181b; border: 1px solid #e3e3e3; border-radius: 4px; }
.opt-cmp small { margin-left: auto; font-size: .9em; color: #9a9a9d; }
.opt-t .chk { width: 1em; height: 1em; border: 1px solid #b8b8bb; border-radius: 2px; }
.opt-t .chk.on { border-color: #2b7fff; background: #2b7fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 90%; }
@media (prefers-reduced-motion: reduce) { .ants { animation: none; } }

/* ---------- Clario documentation page, simplified (index card) ---------- */
.docs-host { container-type: inline-size; }
.docs-host > .docs-mini { width: 100%; }
.docs-mini { display: grid; grid-template-columns: 28% 72%; height: 100%; font: 400 calc(100cqw / 38) / 1.3 Inter, system-ui, sans-serif; color: #3b3440; text-align: left; }
.dm-side { padding: 1.2em .8em; background: #faf9fb; border-right: 1px solid #ece9ee; }
.dm-side b { display: flex; align-items: center; gap: .45em; margin: 0 0 .6em .3em; font-size: .95em; font-weight: 600; }
.dm-side b::before { content: ""; width: .95em; height: .95em; background: #a12a6f; clip-path: polygon(25% 0, 75% 0, 100% 40%, 50% 100%, 0 40%); }
.dm-side small { display: block; margin: 1.1em 0 .3em .3em; font-size: .62em; letter-spacing: .05em; text-transform: uppercase; color: #9a93a0; }
.dm-side i { display: block; width: 70%; height: .5em; margin: .7em .3em; border-radius: .25em; background: #e6e2ea; }
.dm-side i.on { width: auto; height: 1.7em; margin: .35em 0; border-radius: .4em; background: #f6eef3; box-shadow: inset .2em 0 #a12a6f; }
.dm-main { min-width: 0; padding: 1.3em 1.6em; }
.dm-crumb { font-size: .72em; color: #a12a6f; }
.dm-title { display: block; margin-top: .15em; font-size: 1.4em; font-weight: 500; color: #222; }
.dm-canvas { display: flex; justify-content: center; gap: .6em; margin: .9em 0 .8em; padding: 1.9em 1em; border-radius: .6em; background: #f8f7f9; }
.dm-canvas span { padding: .45em 1.1em; border-radius: .35em; background: #fff; box-shadow: 0 1px 3px #0000001f; font-size: .8em; font-weight: 500; }
.dm-canvas span.p { background: #a12a6f; color: #fff; box-shadow: none; }
.dm-links { display: flex; gap: .45em; }
.dm-links span { width: 6em; height: 1.6em; border: 1px solid #ece9ee; border-radius: .35em; }
.dm-tabs { display: flex; gap: 1.3em; margin-top: 1em; border-bottom: 1px solid #ece9ee; font-size: .72em; color: #8b8490; }
.dm-tabs span { padding-bottom: .5em; }
.dm-tabs .on { color: #a12a6f; box-shadow: inset 0 -2px #a12a6f; }
.dm-lines i { display: block; height: .45em; margin-top: .8em; border-radius: .25em; background: #efedf1; }
.dm-lines i:nth-child(2) { width: 82%; }
.dm-lines i:nth-child(3) { width: 64%; }