/* FEATURE-007 step 4: the minimal development studio (scoped to .studio). The desktop/mobile preview toggle is CSS
   only: two radio inputs and the general sibling combinator; no JavaScript. */
.studio { font-family: system-ui, sans-serif; max-width: 1500px; margin: 0 auto; padding: 16px 24px 48px; color: #1d232a; line-height: 1.45; }
.studio h1 { font-size: 1.6rem; margin: 0.4em 0; }
.studio h2 { font-size: 1.15rem; margin: 0 0 0.6em; }
.studio-lead, .studio-hint { color: #4a5560; }
.studio-hint { font-size: 0.9em; }
.studio-req { color: #9a2b16; font-size: 0.85em; }
.studio-button, .studio button:not(.sx-btn):not(.sx-mv) { background: #1f5f8b; color: #fff; border: 0; border-radius: 6px; padding: 7px 14px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
.studio-actions button { background: #e7edf2; color: #1d232a; padding: 3px 9px; font-size: 0.9em; }
.studio button:focus-visible, .studio a:focus-visible, .studio input:focus-visible, .studio textarea:focus-visible { outline: 3px solid #f0a020; outline-offset: 2px; }
.studio-inline { display: inline; }
.studio-panel { border: 1px solid #d5dde3; border-radius: 8px; padding: 14px 16px; margin: 16px 0; background: #fff; }
.studio-notice { background: #fff6dd; border: 1px solid #e8c770; border-radius: 8px; padding: 10px 14px; }
.studio-errors { background: #fdecea; border: 1px solid #e4a59b; border-radius: 8px; padding: 8px 14px; margin: 10px 0; }
.studio-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px; background: #e7edf2; vertical-align: middle; }
.studio-status--ready { background: #dff3e4; } .studio-status--generating { background: #fff0c2; } .studio-status--failed { background: #fbd9d3; }
.studio-table { border-collapse: collapse; width: 100%; font-size: 0.92em; }
.studio-table th, .studio-table td { border-bottom: 1px solid #e3e8ec; padding: 6px 8px; text-align: left; vertical-align: top; }
.studio-current { background: #f1f7fb; }
.studio-form fieldset { border: 1px solid #d5dde3; border-radius: 8px; margin: 14px 0; padding: 10px 14px; }
.studio-form label { display: block; margin: 8px 0 3px; font-weight: 600; font-size: 0.92em; }
.studio-form input, .studio-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border: 1px solid #aab6bf; border-radius: 5px; font-weight: 400; }
.studio-grid, .studio-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.studio-row--3 { grid-template-columns: 2fr 1fr 1fr; } .studio-row--4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.studio-brief dt { font-weight: 600; margin-top: 6px; } .studio-brief dd { margin: 0 0 0 0; white-space: pre-wrap; }
.studio-sections { padding-left: 1.4em; } .studio-sections li { padding: 5px 0; border-bottom: 1px solid #eef1f3; }
.studio-key { font-family: ui-monospace, monospace; font-size: 0.9em; }
.studio-warning { display: block; color: #7a4b00; font-size: 0.85em; margin-top: 2px; }
.studio-tag { font-size: 0.75em; background: #eef1f3; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.studio-summary { color: #4a5560; margin: 0 8px; }
.studio-actions { white-space: nowrap; }
.studio-width { position: absolute; opacity: 0; width: 1px; height: 1px; }
.studio-preview > label { display: inline-block; padding: 5px 14px; border: 1px solid #aab6bf; border-radius: 6px; cursor: pointer; margin-right: 4px; }
.studio-width:checked + label { background: #1f5f8b; color: #fff; border-color: #1f5f8b; }
.studio-width:focus-visible + label { outline: 3px solid #f0a020; outline-offset: 2px; }
.studio-frame-wrap { margin-top: 10px; background: #e9eef2; border-radius: 8px; padding: 12px; overflow-x: auto; }
.studio-frame { display: block; margin: 0 auto; width: 1440px; max-width: none; height: 900px; border: 1px solid #c3ccd3; background: #fff; transition: width .2s; }
#studio-width-mobile:checked ~ .studio-frame-wrap .studio-frame { width: 390px; height: 844px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1500px) { .studio-frame { width: 100%; } }
/* FEATURE-007 step 6: images panel and the image picker. */
.studio-assets { list-style: none; padding: 0; display: grid; gap: 10px; }
.studio-assets li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #eef1f3; padding-bottom: 8px; }
.studio-assets img, .studio-pick img { border: 1px solid #d5dde3; border-radius: 4px; background: #f6f8f9; object-fit: contain; }
.studio-form .studio-pick, .studio-form .studio-check { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 6px 0; }
.studio-form .studio-pick input, .studio-form .studio-check input { width: auto; }
.studio-upload select { font: inherit; padding: 6px 8px; border: 1px solid #aab6bf; border-radius: 5px; }
/* FEATURE-007 step 6b: stock photo search, results with attribution, the «стоковое фото» label. */
.studio-stock-honesty { border-left: 4px solid #c07a00; padding: 6px 10px; background: #fff8ea; }
.studio-stock-search select { font: inherit; padding: 6px 8px; border: 1px solid #aab6bf; border-radius: 5px; }
.studio-stock-providers { border: 1px solid #d5dde3; border-radius: 6px; margin: 8px 0; }
.studio-stock-credit { font-weight: 600; }
.studio-stock-results { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.studio-stock-results li { border: 1px solid #e1e6ea; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.studio-stock-results figure { margin: 0; }
.studio-stock-results img { display: block; max-width: 100%; height: auto; background: #f6f8f9; border-radius: 4px; }
.studio-stock-results figcaption { font-size: .9em; margin-top: 6px; overflow-wrap: anywhere; }
.studio-stock-label { display: inline-block; padding: 1px 7px; border-radius: 10px; background: #fff0cc; color: #6b4500; font-size: .85em; font-weight: 600; }
.studio-provenance { overflow-wrap: anywhere; }
/* FEATURE-007 step 6c: «Заменить» options of an automatically picked stock photo. */
.studio-replace { border-left: 4px solid #e0b040; }
.studio-replace-options li { margin: 6px 0; }
/* FEATURE-007 step 8: «Перегенерировать» / «Добавить секцию сюда» (native disclosure, no JavaScript). */
.studio-ai-op { margin: 4px 0 0; }
.studio-ai-op > summary { cursor: pointer; color: #1f5f8b; font-size: 0.9em; display: inline-block; }
.studio-ai-op > summary:focus-visible { outline: 3px solid #f0a020; outline-offset: 2px; }
.studio-ai-form { max-width: 640px; padding: 4px 0 8px; }
.studio-ai-form select { font: inherit; padding: 6px 8px; border: 1px solid #aab6bf; border-radius: 5px; max-width: 100%; }
/* FEATURE-007 step 7 (spike): AI page check findings. */
.studio-findings { padding-left: 1.4em; }
.studio-finding { margin: 8px 0; padding: 6px 10px; border-left: 4px solid #c8cdd2; }
.studio-finding p { margin: 4px 0; }
.studio-finding--high { border-left-color: #b3261e; }
.studio-finding--medium { border-left-color: #c77700; }
.studio-finding--low { border-left-color: #8a939b; }
/* FEATURE-007 step 9: services and price rows, to-do list, list-item editing */
.studio-row--price { grid-template-columns: 1fr 2fr 1fr 0.8fr 1fr auto 2fr; align-items: end; }
@media (max-width: 900px) { .studio-row--price { grid-template-columns: 1fr 1fr; } }
/* FEATURE-030: an offer row (title, amount, terms, fine print, expiry date). */
.studio-row--offer { grid-template-columns: 2fr 1fr 2fr 2fr 1fr; align-items: end; }
@media (max-width: 900px) { .studio-row--offer { grid-template-columns: 1fr 1fr; } }
.studio-todo__list { margin: 0.5rem 0; padding-left: 1.25rem; }
.studio-todo__list li { margin: 0.25rem 0; }
.studio-items { list-style: none; padding: 0; margin: 0.5rem 0; }
.studio-items > li { border: 1px solid #d7d7d7; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.4rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.studio-items .studio-state { font-size: 0.8rem; padding: 0 0.4rem; border-radius: 999px; border: 1px solid currentColor; }
.studio-state--sample { color: #6b4e00; background: #fff4c2; }
.studio-state--user { color: #0b5a2a; }
.studio-state--fact { color: #0b3d91; }