/* neurokirurgi.fi — figure plates ("muste ja vesiväri").
   The plate keeps its warm paper colour in both themes, like a printed plate. */

.illo {
    --paper: #fbf7ee;
    --plate-line: rgba(84, 70, 40, 0.14);
    margin: 44px 0;
}
.illo-stage {
    position: relative;
    aspect-ratio: var(--ratio, 800 / 560);
    background: var(--paper);
    border: 1px solid var(--plate-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(60, 48, 20, 0.05), 0 16px 40px -24px rgba(60, 48, 20, 0.28);
    cursor: pointer;
}
.illo-stage > svg { display: block; width: 100%; height: 100%; }
.illo-stage > svg.no-anim * { transition: none !important; }
html:not(.illo-js) .illo-stage { display: none; }
.illo-noscript { border-radius: 18px; border: 1px solid var(--plate-line); background: var(--paper); }

/* Loading shimmer until the SVG arrives */
.illo:not(.is-ready) .illo-stage::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%) var(--paper);
    background-size: 220% 100%;
    animation: illo-shimmer 1.6s ease-in-out infinite;
}
@keyframes illo-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Step controls */
.illo-ui {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
}
.illo-play {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.illo-play:hover { border-color: var(--forest); }
.illo-play svg { width: 14px; height: 14px; fill: currentColor; }
.illo-play:focus-visible, .illo-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.illo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
}
.illo-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font: 500 0.88rem/1.2 var(--font-sans);
    cursor: pointer;
    overflow: hidden;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.illo-tab .n {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink-faint);
    font-size: 0.8rem;
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
}
.illo-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.illo-tab.is-done .n { background: var(--forest-tint-2); color: var(--forest); }
.illo-tab.is-active { border-color: var(--forest); color: var(--ink); background: var(--forest-tint); }
.illo-tab.is-active .n { background: var(--forest); color: #fff; }
body.dark .illo-tab.is-active .n { color: #0e1512; }
.illo-tab .bar {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: var(--forest);
    transform: scaleX(0); transform-origin: left;
    opacity: 0.55;
}
.illo-tab.is-timing .bar { animation: illo-dwell var(--dwell, 4s) linear forwards; }
@keyframes illo-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.illo-caption {
    margin: 14px 0 0;
    min-height: 3.5em;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.65;
}
.illo-caption strong { color: var(--ink); font-weight: 600; }
html.illo-js .illo.has-steps .illo-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.illo-steps { margin: 16px 0 0 1.2em; color: var(--ink-soft); }
.illo figcaption {
    margin-top: 10px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--ink-faint);
}

/* Pause ambient loops when the figure is off screen */
.illo.is-paused svg *, .illo:not(.is-ready) svg * { animation-play-state: paused !important; }

/* Wider plates on large screens */
@media (min-width: 900px) {
    .illo--wide { margin-left: -80px; margin-right: -80px; }
}

/* Phones: plate goes edge to edge; SVG labels get larger via the SVG's own CSS */
@media (max-width: 600px) {
    .illo { margin: 34px -28px; }
    .illo-stage { border-radius: 0; border-left: 0; border-right: 0; }
    .illo-ui, .illo-caption, .illo figcaption { padding: 0 20px; }
    .illo-tab .t { display: none; }
    .illo-tab.is-active .t { display: inline; }
    .illo-tab { padding-right: 6px; }
    .illo-tab.is-active { padding-right: 14px; }
}
@media (max-width: 480px) {
    .illo { margin-left: -20px; margin-right: -20px; }
}

@media (prefers-reduced-motion: reduce) {
    .illo-stage svg * { transition: none !important; animation: none !important; }
}

/* Print: keep the current plate frame, print all step captions as a list */
@media print {
    .illo-ui, .illo-caption { display: none !important; }
    html.illo-js .illo.has-steps .illo-steps { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
    .illo { break-inside: avoid; margin: 16px 0; }
    .illo-stage { box-shadow: none; }
}

/* Tall plates (e.g. the whole spine) stay within one screen height on desktop */
@media (min-width: 601px) {
    .illo--tall { max-width: 520px; margin-left: auto; margin-right: auto; }
}