/* String Art 1.6 mechanics in the existing Studio shell; no global theme. */
.stringart-weave { color: var(--navy); min-width: 0; }
.stringart-weave-toolbar, .stringart-weave .weave-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.stringart-weave-toolbar { justify-content: space-between; }
.stringart-weave .stringart-pin-pair { font-size: 2.5rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stringart-guide-status { max-width: 72ch; overflow-wrap: anywhere; }
.stringart-guide-status[role="alert"] { border: 1px solid var(--navy); padding: 12px; background: var(--paper); }
.stringart-weave-diagram { width: min(100%, 620px); margin: 20px auto; }
.stringart-weave-diagram svg { display: block; width: 100%; height: auto; }
.stringart-ring { fill: var(--surface); stroke: var(--line); stroke-width: .4; }
.stringart-active-edge { fill: none; stroke: var(--orange); stroke-width: 1; }
.stringart-pin { fill: var(--navy); }
.stringart-weave details { margin-top: 24px; }
.stringart-weave summary { cursor: pointer; padding-block: 12px; }
.stringart-weave :is(button,input,summary):focus-visible, .stringart-examples button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.stringart-weave input { accent-color: var(--orange); }
.stringart-examples img { display: block; width: 100%; height: 130px; object-fit: contain; background: var(--surface); }
.stringart-examples h3 { margin: 24px 0 12px; }
.stringart-examples p { max-width: 72ch; }
.stringart-route-controls > button { margin: 0 8px 12px 0; }
.stringart-route-controls p { overflow-wrap: anywhere; }
/* Applied by the host only while the existing weave tab is active. Navigation remains visible. */
.stringart-weave-focus .studio-workspace { grid-template-columns: minmax(0, 1fr); }
.stringart-weave-focus .studio-workspace > :is(.presets-panel,.settings-panel) { display: none; }
.stringart-weave-focus .stringart-weave { max-width: 900px; margin-inline: auto; }
.stringart-weave-focus .stringart-pin-pair { font-size: 3.5rem; }
@media (max-width: 640px) {
    .stringart-weave .weave-buttons > button { flex: 1 1 150px; min-height: 44px; }
    .stringart-weave-toolbar > button { width: 100%; }
    .stringart-weave .stringart-pin-pair { font-size: 2.5rem; }
    .stringart-weave-diagram { margin-block: 16px; }
}