/* Logo Lab module: clean, touch-friendly tool panels in the host theme's visual language. */
.lab { --lab-ink: var(--c-text, #16181d); --lab-line: var(--c-border, #d9d4c9); --lab-accent: var(--c-accent, #3b2fc9); --lab-surface: var(--c-surface, #ffffff);
  display: grid; gap: clamp(28px, 5vw, 64px); min-width: 0; }
.lab *, .lab-embed * { min-width: 0; }
.lab h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; }
.lab-eyebrow { margin: 0 0 8px; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lab-accent); }
.lab-tool, .lab-intro, .lab-files { padding: clamp(16px, 3vw, 28px); background: var(--lab-surface); border: 1px solid var(--lab-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(22, 24, 29, .06), 0 14px 30px -18px rgba(22, 24, 29, .22); overflow-wrap: anywhere; }
.lab-tool h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }
.lab-tool h4 { margin-block: 18px 10px; font-size: 1rem; }
.lab-head p { color: var(--c-muted, #565b63); }
.lab-honest { display: grid; gap: 6px; margin: 0 0 16px; padding: 12px 16px; list-style: none; border-inline-start: 4px solid var(--lab-accent); background: rgba(59, 47, 201, .06); border-radius: 0 12px 12px 0; font-size: .95rem; }
.lab-promises { display: grid; gap: 6px; padding-inline-start: 1.2em; }
.lab-local { font-size: .9rem; color: var(--c-muted, #565b63); }
.lab-local::before { content: "\1F512  "; }
.lab-msg { min-height: 1.4em; margin: 8px 0; font-weight: 600; }
.lab-msg.is-error { color: #b3261e; }
.lab-hint { font-size: .9rem; color: var(--c-muted, #565b63); }
.lab-offscreen { position: fixed; inset-inline-start: -9999px; top: 0; }

/* controls: large, clear, touch friendly */
.lab-btn, .lab-chip, .lab-tool button, .lab-file { font: inherit; }
.lab-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px; border: 2px solid var(--lab-ink); border-radius: 999px;
  background: var(--lab-ink); color: #ffffff; font-weight: 700; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.lab-btn:hover:not(:disabled) { transform: translateY(-1px); }
.lab-btn:disabled { opacity: .45; cursor: not-allowed; }
.lab-btn-quiet { background: transparent; color: var(--lab-ink); }
.lab-chip { min-height: 44px; padding: 8px 16px; border: 1px solid var(--lab-line); border-radius: 999px; background: var(--lab-surface); color: var(--lab-ink); font-weight: 600; cursor: pointer; }
.lab-chip[aria-pressed="true"] { background: var(--lab-accent); border-color: var(--lab-accent); color: #ffffff; }
.lab-actions, .lab-seg, .ba-pairs, .ed-bar, .ed-align { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.lab-field { display: grid; gap: 6px; margin-block-end: 12px; font-weight: 600; font-size: .95rem; }
.lab-field input:not([type="range"]):not([type="color"]), .lab-field select, .lab-field textarea { width: 100%; min-height: 48px; padding: 8px 14px; border: 1px solid var(--lab-line);
  border-radius: 12px; background: #ffffff; color: var(--lab-ink); font: inherit; font-weight: 400; }
.lab-field textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.lab-field input[type="range"] { width: 100%; min-height: 40px; accent-color: var(--lab-accent); }
.lab-tool input[type="color"] { width: 64px; height: 48px; padding: 2px; border: 1px solid var(--lab-line); border-radius: 12px; background: #ffffff; }
.lab-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-block-end: 8px; }
.lab-check input, .rs-sizes input { width: 22px; height: 22px; accent-color: var(--lab-accent); }
.lab-file { display: grid; gap: 8px; padding: 18px; border: 2px dashed var(--lab-line); border-radius: 14px; font-weight: 600; cursor: pointer; }
.lab-file input { max-width: 100%; min-height: 44px; }
.lab-tool [aria-invalid="true"] { border-color: #b3261e; }

/* stepper: all steps on wide screens, one step at a time on phones */
.lab-progress { display: none; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: .78rem; font-weight: 700; counter-reset: lp; }
.lab-progress li { flex: 1; padding-block-start: 8px; border-block-start: 4px solid var(--lab-line); color: var(--c-muted, #565b63); }
.lab-progress li.is-done, .lab-progress li[aria-current] { border-color: var(--lab-accent); color: var(--lab-ink); }
.lab-stepnav { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 16px; }
@media (max-width: 719px) {
  .lab-js [data-stepper] .lab-progress, .lab-js [data-stepper] .lab-stepnav { display: flex; }
  .lab-js [data-stepper] .lab-step:not(.is-current) { display: none; }
}

/* before / after */
.lab-ba-section { display: grid; gap: 20px; align-items: center; }
.ba { --ba-pos: 50%; }
.ba-stage { position: relative; aspect-ratio: 400 / 240; overflow: hidden; border: 1px solid var(--lab-line); border-radius: 16px; touch-action: none; cursor: ew-resize; user-select: none; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer svg { display: block; width: 100%; height: 100%; }
.ba-layer svg[hidden] { display: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 3px; margin-left: -1.5px; background: #ffffff; box-shadow: 0 0 0 1px rgba(22, 24, 29, .35); pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: var(--ba-pos); display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: var(--lab-ink); color: #ffffff; font-size: 1.3rem; box-shadow: 0 6px 16px rgba(22, 24, 29, .3); }
.ba-handle:focus-visible { outline: 3px solid var(--lab-accent); outline-offset: 3px; }
.ba-label { position: absolute; top: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(22, 24, 29, .82); color: #ffffff; font-size: .8rem; font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.ba-label-before { left: 12px; } .ba-label-after { right: 12px; }
.ba-caption { margin: 12px 0 0; font-size: .95rem; color: var(--c-muted, #565b63); }
.lab-demo { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--lab-ink); color: #ffffff; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* tool index */
.lab-intro { display: grid; gap: 20px; }
.lab-index { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.lab-index a { display: grid; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--lab-line); border-radius: 14px; color: var(--lab-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.lab-index a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(22, 24, 29, .4); }
.lab-index span:last-child { color: var(--c-muted, #565b63); font-size: .9rem; }
.li-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--lab-accent); }
.li-mockup { background: linear-gradient(135deg, #16181d 50%, #efece5 50%); } .li-palette { background: linear-gradient(90deg, #c4320a 33%, #a3127a 33% 66%, #1d5fd1 66%); }
.li-contrast { background: linear-gradient(90deg, #16181d 50%, #ffffff 50%); border: 1px solid var(--lab-line); } .li-resize { background: #0f7a4a; border-radius: 4px 18px 4px 4px; }
.li-favicon { background: #3b2fc9; border-radius: 50%; } .li-editor { background: conic-gradient(#c4320a 0 25%, #1d5fd1 0 50%, #0f7a4a 0 75%, #a3127a 0); }
.lab-tools { display: grid; gap: clamp(20px, 3vw, 32px); }

/* mockup */
.mk-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; border: 1px solid var(--lab-line); touch-action: none; }
.mk-scene svg { display: block; width: 100%; height: 100%; }
.mk-logo { position: absolute; transform: translate(-50%, -50%); max-width: none; height: auto; cursor: grab; touch-action: none; user-select: none; }
.mk-logo:focus-visible { outline: 3px dashed var(--lab-accent); outline-offset: 4px; }

/* palette */
.pl-swatches { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.pl-swatch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--lab-line); border-radius: 12px; }
.pl-chip { width: 48px; height: 48px; border-radius: 10px; border: 1px solid rgba(22, 24, 29, .15); flex: none; }
.pl-value { min-height: 40px; padding: 6px 10px; border: 1px solid var(--lab-line); border-radius: 8px; background: #ffffff; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; cursor: copy; }
.pl-share { margin-inline-start: auto; font-size: .85rem; color: var(--c-muted, #565b63); }
.pl-pair { display: grid; gap: 4px; }

/* contrast */
.ct-inputs { display: grid; gap: 12px; align-items: end; }
.ct-color { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.ct-color .lab-field { flex: 1 1 140px; margin: 0; }
.ct-pick { display: grid; gap: 4px; font-size: .8rem; }
.ct-ratio { font-size: 1.2rem; } .ct-ratio strong { font-size: 2rem; }
.ct-checks { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.ct-checks li { padding: 10px 12px; border: 1px solid var(--lab-line); border-radius: 12px; font-weight: 600; }
.ct-checks span { display: block; font-size: 1.1rem; }
.ct-checks [data-pass="true"] span { color: #0f7a4a; } .ct-checks [data-pass="false"] span { color: #b3261e; }
.ct-sample { padding: 20px; border-radius: 14px; border: 1px solid var(--lab-line); }
.ct-sample p { margin: 0 0 8px; } .ct-large { font-size: 24px; font-weight: 700; }

/* resize, favicon */
.rs-sizes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--lab-line); border-radius: 12px; }
.rs-sizes label { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.rs-custom { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.rs-preview { max-width: 100%; max-height: 260px; width: auto; margin-block-end: 12px; border: 1px dashed var(--lab-line); border-radius: 8px;
  background: repeating-conic-gradient(#eeeeee 0 25%, #ffffff 0 50%) 0 0 / 16px 16px; }
.rs-outputs, .fv-previews { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.fv-previews li { display: flex; align-items: center; gap: 10px; }
.fv-previews img { image-rendering: pixelated; border: 1px solid var(--lab-line); }

/* editor */
.ed-main { display: grid; gap: 16px; }
.ed-canvas-wrap { border: 1px solid var(--lab-line); border-radius: 12px; overflow: hidden; background: repeating-conic-gradient(#f1efe9 0 25%, #ffffff 0 50%) 0 0 / 20px 20px; }
.ed-canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; touch-action: none; }
.ed-canvas [data-id] { cursor: move; }
.ed-sides { margin: 0; } .ed-sides input { max-width: 90px; }
.ed-props { margin: 0 0 12px; padding: 12px; border: 1px solid var(--lab-line); border-radius: 12px; }
.ed-layers { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.ed-layers li { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--lab-line); border-radius: 10px; }
.ed-layers li.is-selected { border-color: var(--lab-accent); box-shadow: inset 4px 0 0 var(--lab-accent); }
.ed-layer-name { flex: 1 1 120px; min-height: 44px; text-align: start; border: 0; background: transparent; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.ed-layer-act { min-width: 44px; min-height: 44px; border: 1px solid var(--lab-line); border-radius: 8px; background: #ffffff; cursor: pointer; }

/* wide screens: asymmetric journal grid */
@media (min-width: 960px) {
  .lab-ba-section { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lab-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .lab-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .lab-tools > #lab-editor { grid-column: 1 / -1; }
  .ed-main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .ct-inputs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
/* outside the home page the sidebar keeps a compact Logo Lab index */
body:not(.family-home) .site-module-sidebar .lab-tools, body:not(.family-home) .site-module-sidebar .lab-ba-section, body:not(.family-home) .site-module-sidebar .lab-files { display: none; }
body:not(.family-home) .site-module-sidebar .lab-intro { grid-template-columns: minmax(0, 1fr); }
body:not(.family-home) .site-module-sidebar .lab-index a { padding: 12px; }
.lab-embed { margin-block: 24px; }
@media (prefers-reduced-motion: reduce) {
  .lab *, .lab-embed * { animation: none !important; transition: none !important; }
}