/* Building principles (round 30, MKT-2, r.200–202): marketing.partials.principles. Layout from the prototype
   (feedback/Siteclick-bouwprincipes.html), colours and type from tokens; the block follows the theme, the
   illustration stays dark (content, like --sc-color-sample-*). principles.js sets --bp-pin-height,
   --bp-distance and --bp-scroll-tail. Round 31 (MKT-2): no live mesh in the scene (r.17/r.18), the pill trail
   (r.191) uses the level colours --np-lvl-* from tokens.css, the block pins under the shrunken head (r.192).
   Fix31 (A106): the artboard is a dark example website (content), so it paints --sc-color-sample-dark in both
   themes with sample-light ink for its caption.
   Round 32 (MKF-2, r.38/r.39): the live camera is a CSS transform on .bp-cam (principles.js), a compositor layer only
   while the scene plays; --bp-svh (100svh) is the height the pin is sized against; the outlines take the level
   colour of their step (--np-lvl-*, same as the pill dots; the property beats the group's stroke attribute). */

@property --bp-svh { syntax: '<length>'; inherits: false; initial-value: 0px; }

.sc-principles {
    --bp-sticky-top: calc(var(--mk-head-min, var(--sc-bar-h)) + 16px);
    --bp-svh: 100svh;
    color: var(--sc-color-text-strong);
    background: var(--sc-color-bg);
    font-family: var(--sc-font-sans);
    line-height: 1.6;
    padding: clamp(36px, 7vw, 96px) 24px 64px;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
}
.sc-principles * { box-sizing: border-box; }
.sc-principles [hidden] { display: none !important; }
.sc-principles h2, .sc-principles h3, .sc-principles p { margin: 0; }
.sc-principles button { touch-action: manipulation; }
.sc-principles button:focus-visible { outline: none; box-shadow: var(--sc-ring); }
.sc-principles svg { display: block; }
.sc-principles svg text { font-family: var(--sc-font-sans); }

/* app.css gives every header 33px (A105): the intro keeps its own height, so the pin never covers its text. */
.sc-principles .bp-intro { max-width: 1152px; margin: 0 auto 36px; height: auto; }
.sc-principles .bp-intro h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; max-width: 900px; }
.sc-principles .bp-intro > p { color: var(--sc-color-text-muted); font-size: 17px; line-height: 1.65; max-width: 660px; margin-top: 20px; text-wrap: pretty; }

.sc-principles .bp-track { max-width: 1152px; margin: 0 auto; position: relative; }
.sc-principles .bp-pin { position: relative; }
.sc-principles .bp-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; flex-wrap: nowrap; }
.sc-principles .bp-state { display: flex; align-items: center; flex: 1; min-width: 0; font-size: 12px; color: var(--sc-color-text-muted); }
.sc-principles .bp-mode { flex: 0 0 auto; }
.sc-principles .bp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* Pill trail (r.191): the editor breadcrumb's shape (visual-editor.css .siteclick-ve-crumb), not clickable. */
.sc-principles .bp-trail { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sc-principles .bp-trail::-webkit-scrollbar { display: none; }
.sc-principles .bp-pill { position: relative; display: none; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 8px; border-radius: 11px; line-height: 22px; white-space: nowrap; color: var(--sc-color-text-muted); transition: opacity var(--sc-dur-fast) var(--sc-ease-out), transform var(--sc-dur-fast) var(--sc-ease-out); }
.sc-principles .bp-pill + .bp-pill { margin-left: 12px; }
.sc-principles .bp-pill + .bp-pill::before { content: '›'; position: absolute; left: -10px; color: var(--sc-color-text-muted); }
.sc-principles .bp-pill.is-shown { display: inline-flex; }
.sc-principles .bp-pill.is-current { background: var(--sc-color-surface-alt); color: var(--sc-color-text); font-weight: 600; }
@starting-style {
    .sc-principles .bp-pill.is-shown { opacity: 0; transform: translateX(-6px); }
}
.sc-principles .bp-pill-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.sc-principles .bp-pill-caret { flex: 0 0 auto; width: 4px; height: 4px; margin: -2px 0 0 -1px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .45; transform: rotate(45deg); }
.sc-principles .bp-lvl-site { background: var(--np-lvl-site); }
.sc-principles .bp-lvl-page { background: var(--np-lvl-page); }
.sc-principles .bp-lvl-section { background: var(--np-lvl-section); }
.sc-principles .bp-lvl-row { background: var(--np-lvl-row); }
.sc-principles .bp-lvl-column { background: var(--np-lvl-column); }
.sc-principles .bp-lvl-component { background: var(--np-lvl-component); }

.sc-principles .bp-display { display: grid; grid-template-columns: minmax(0, 1fr) 340px; border: 1px solid var(--sc-color-hairline); border-radius: 10px; background: var(--sc-color-bg); overflow: hidden; }
.sc-principles .bp-artboard { position: relative; min-width: 0; overflow: hidden; background: var(--sc-color-sample-dark); aspect-ratio: 1.4; display: flex; align-items: center; justify-content: center; }
.sc-principles .bp-visual { width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 1; }
.sc-principles .bp-cam { position: absolute; inset: 0; z-index: 1; transform-origin: 0 0; }
.sc-principles .bp-cam .bp-visual { overflow: visible; }
.sc-principles.bp-enhanced .bp-cam { will-change: transform; }
.sc-principles .bp-visual [data-bp-outline="0"] { stroke: var(--np-lvl-site); }
.sc-principles .bp-visual [data-bp-outline="1"] { stroke: var(--np-lvl-page); }
.sc-principles .bp-visual [data-bp-outline="2"] { stroke: var(--np-lvl-section); }
.sc-principles .bp-visual [data-bp-outline="3"] { stroke: var(--np-lvl-row); }
.sc-principles .bp-visual [data-bp-outline="4"] { stroke: var(--np-lvl-column); }
.sc-principles .bp-visual [data-bp-outline="5"] { stroke: var(--np-lvl-component); }
.sc-principles .bp-scene-note { position: absolute; left: 16px; bottom: 12px; font-size: 10px; color: var(--sc-color-sample-light); opacity: .7; z-index: 2; pointer-events: none; }

.sc-principles .bp-copy { min-width: 0; border-left: 1px solid var(--sc-color-hairline); padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; background: var(--sc-color-surface); }
.sc-principles .bp-copy h3 { font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.17; text-wrap: balance; overflow-wrap: break-word; }
.sc-principles .bp-copy p { font-size: 16px; line-height: 1.65; color: var(--sc-color-text-muted); margin-top: 16px; text-wrap: pretty; }

.sc-principles .bp-nav-wrap { display: flex; gap: 20px; align-items: center; padding: 16px 0; }
.sc-principles .bp-nav { display: flex; gap: 7px; flex: 1; min-width: 0; }
.sc-principles .bp-nav button { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; padding: 6px 0; text-align: left; font: inherit; font-size: 12px; color: var(--sc-color-text-muted); white-space: nowrap; position: relative; cursor: pointer; }
.sc-principles .bp-nav button::before { content: ''; display: block; width: 100%; height: 2px; background: var(--sc-color-hairline); border-radius: 3px; margin-bottom: 9px; transition: background var(--sc-dur-fast) var(--sc-ease-out); }
.sc-principles .bp-nav button[aria-current=step], .sc-principles .bp-nav button:hover { color: var(--sc-color-text-strong); }
.sc-principles .bp-nav button[aria-current=step]::before { background: var(--sc-color-blue); }
.sc-principles .bp-nav button.bp-passed::before { background: var(--sc-color-border-strong); }
.sc-principles .bp-step-buttons { display: flex; gap: 8px; }
.sc-principles .bp-step-buttons button:disabled { opacity: .3; cursor: default; }

.sc-principles .bp-step { border-top: 1px solid var(--sc-color-hairline); padding: 32px 0; max-width: 1152px; margin: 0 auto; scroll-margin-top: calc(var(--bp-sticky-top) + 20px); }
.sc-principles .bp-step h3 { font-size: 28px; line-height: 1.2; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
.sc-principles .bp-step p { font-size: 16px; line-height: 1.65; color: var(--sc-color-text-muted); margin-top: 12px; max-width: 650px; text-wrap: pretty; }
.sc-principles .bp-static-scene { margin: 20px 0 0; border: 1px solid var(--sc-color-hairline); border-radius: 10px; background: var(--sc-color-sample-dark); overflow: hidden; aspect-ratio: 12 / 7; max-width: 760px; }
.sc-principles .bp-static-scene svg { width: 100%; height: 100%; }

.sc-principles.bp-enhanced .bp-track { height: calc(var(--bp-pin-height) + var(--bp-distance) + var(--bp-scroll-tail, 0px)); }
.sc-principles.bp-enhanced .bp-pin { position: sticky; top: var(--bp-sticky-top); height: var(--bp-pin-height); display: flex; flex-direction: column; justify-content: center; }
.sc-principles.bp-enhanced .bp-reading { display: none; }
.sc-principles.bp-enhanced .bp-artboard { max-height: 560px; }
.sc-principles.bp-reading-mode .bp-copy, .sc-principles.bp-reading-mode .bp-nav-wrap { display: none; }
.sc-principles.bp-reading-mode .bp-display { grid-template-columns: 1fr; }
.sc-principles.bp-reading-mode .bp-artboard { aspect-ratio: 2; max-height: 370px; }
.sc-principles.bp-reading-mode.bp-static-ready .bp-display, .sc-principles.bp-reading-mode.bp-static-ready .bp-state { display: none; }
.sc-principles.bp-reading-mode .bp-topline { justify-content: flex-end; }

@media (max-width: 1000px) {
    .sc-principles .bp-display { grid-template-columns: minmax(0, 1fr) 300px; }
    .sc-principles .bp-copy { padding: 24px; }
    .sc-principles .bp-copy h3 { font-size: 27px; }
    .sc-principles .bp-artboard { aspect-ratio: 1; }
}
@media (max-width: 760px) {
    .sc-principles { padding: 40px 20px; }
    .sc-principles .bp-intro { margin-bottom: 26px; }
    .sc-principles .bp-intro h2 { font-size: clamp(30px, 7.8vw, 44px); }
    .sc-principles .bp-intro > p { font-size: 16px; margin-top: 16px; }
    .sc-principles .bp-display { display: flex; flex-direction: column; }
    .sc-principles .bp-artboard { height: clamp(230px, 34svh, 310px); aspect-ratio: auto; flex-shrink: 0; }
    .sc-principles .bp-copy { border-left: 0; border-top: 1px solid var(--sc-color-hairline); padding: 22px; justify-content: flex-start; }
    .sc-principles .bp-copy h3 { font-size: 26px; line-height: 1.2; }
    .sc-principles .bp-copy p { font-size: 16px; line-height: 1.6; margin-top: 12px; }
    .sc-principles .bp-nav-wrap { gap: 12px; padding: 12px 0; }
    .sc-principles .bp-nav { gap: 6px; }
    .sc-principles .bp-nav button { padding: 0; display: flex; align-items: center; }
    .sc-principles .bp-nav button::before { margin: 0; height: 3px; }
    .sc-principles .bp-nav button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .sc-principles .bp-mode, .sc-principles .bp-step-buttons .button { min-height: 44px; }
    .sc-principles .bp-step-buttons .button { min-width: 44px; }
    .sc-principles .bp-step { padding: 26px 0; }
    .sc-principles .bp-step h3 { font-size: 26px; }
    .sc-principles .bp-static-scene { aspect-ratio: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-principles * { animation: none !important; transition: none !important; }
}