/* ===== THEME STUDIO ===== */
.studio { display:grid; grid-template-columns:340px 1fr; gap:var(--cr-space-6); align-items:start; }
.studio .panel { padding:var(--cr-space-6); position:sticky; top:88px; }
.ctrl { margin-bottom:var(--cr-space-5); }
.ctrl > label { display:block; font-size:.8rem; font-weight:700; margin-bottom:8px; }
.colorrow { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.colorrow input[type="color"] { width:38px; height:38px; padding:0; border:1px solid var(--cr-color-border-divider); border-radius:var(--cr-radius-field); background:none; cursor:pointer; overflow:hidden; }
/* CR-D-081. The browser paints a native swatch inside the rounded input host;
   it does not inherit the host's radius, so both layers need the field role. */
.colorrow input[type="color"]::-webkit-color-swatch-wrapper { padding:var(--cr-border-width-normal); }
.colorrow input[type="color"]::-webkit-color-swatch { border:0; border-radius:var(--cr-radius-field); }
.colorrow input[type="color"]::-moz-color-swatch { border:0; border-radius:var(--cr-radius-field); }
.colorrow .cn { font-size:.82rem; font-weight:600; flex:1; }
.colorrow .cv { font-family:var(--cr-font-mono); font-size:.72rem; color:var(--cr-color-text-secondary); }
.pillrow { display:flex; gap:6px; flex-wrap:wrap; }

/* Live system axes. Separated from the draft-theme controls above by a rule and
   a note, because they differ in scope: the controls above compose a draft that
   only the preview shows, these restyle the whole page. */
.ctrl-system { border-block-start:1px solid var(--cr-site-hairline); padding-block-start:var(--cr-space-5); }
.ctrl-note { margin:0 0 var(--cr-space-4); font-size:.76rem; line-height:1.45; color:var(--cr-color-text-secondary); }
.ctrl-sub { margin-block-end:var(--cr-space-4); }
.ctrl-sublabel { display:block; font-size:.76rem; font-weight:600; margin-block-end:6px; color:var(--cr-color-text-secondary); }
.ctrl-readout { margin:6px 0 0; font-size:.72rem; line-height:1.45; color:var(--cr-color-text-secondary); font-family:var(--cr-font-mono); }
.pill { padding:7px 12px; border-radius:var(--cr-radius-pill); border:1.5px solid var(--cr-color-border-divider); font-size:.8rem; font-weight:600; background:var(--cr-color-surface-default); }
.pill[aria-pressed="true"] { border-color:var(--cr-color-action-tertiary-fill); background:var(--cr-color-action-tertiary-state-hover); color:var(--cr-color-action-tertiary-text); }
.cr[data-theme="dark"] .pill[aria-pressed="true"] { color:var(--cr-color-text-primary); }
.preview { border-radius:var(--cr-radius-surface); border:1px solid var(--cr-site-hairline); overflow:hidden; box-shadow:var(--cr-shadow-elevation-1); }
.preview .pv-head { padding:var(--cr-space-5) var(--cr-space-6); border-bottom:1px solid var(--cr-site-hairline);
  display:flex; align-items:center; justify-content:space-between; background:var(--cr-site-surface-tint-1); }
.preview .pv-body { padding:var(--cr-space-6); display:grid; gap:var(--cr-space-4); background:var(--cr-tp-surface,var(--cr-color-surface-default)); color:var(--cr-tp-surface-on,var(--cr-color-text-primary)); }
.preview .surface,.preview .surface .muted { color:var(--cr-tp-surface2-on,var(--cr-color-text-primary)); }
.tp { --scope:1; }
.tp-contrast-status { padding:10px 12px; border:1px solid var(--cr-color-action-warning-text); border-radius:var(--cr-radius-field); color:var(--cr-color-action-warning-text); background:var(--cr-color-feedback-warning-surface); font-size:.78rem; line-height:1.45; }
.tp-contrast-status[data-status="pass"] { border-color:var(--cr-color-action-success-text); color:var(--cr-color-action-success-text); background:var(--cr-color-feedback-success-surface); }
.tp-contrast-status:empty { display:none; }
.themeshelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--cr-space-3); margin-top:var(--cr-space-4); }
.themecard { padding:var(--cr-space-4); border-radius:var(--cr-radius-control); border:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default); text-align:left; transition:all var(--cr-motion-duration-short); }
.themecard:hover { transform:translateY(-2px); box-shadow:var(--cr-shadow-elevation-2); }
.themecard .dots { display:flex; gap:5px; margin-bottom:10px; }
.themecard .dots i { width:20px; height:20px; border-radius:var(--cr-radius-circle); display:block; box-shadow:inset 0 0 0 1px rgb(0 0 0/.08); }
.themecard .tn { font-weight:700; font-size:.9rem; }
.themecard .tm { font-size:.74rem; color:var(--cr-color-text-secondary); margin-top:3px; }
/* CR-D-079. Direction is set explicitly here, which the logical-properties rule
   otherwise forbids, because this is the documented exception: the content is
   source code, and code is left-to-right whatever language surrounds it. Left
   to inherit, the block took RTL from `#cr` and the bidi algorithm moved every
   `//`, `{` and `,` to the wrong end of its line — on a block the adopt steps
   beside it tell the visitor to paste. `isolate` keeps it from disturbing the
   Hebrew around it. */
.codeblock { direction:ltr; unicode-bidi:isolate; text-align:start;
  font-family:var(--cr-font-mono); font-size:.76rem; line-height:1.7; background:var(--cr-color-surface-default);
  color:var(--cr-color-text-primary); border:1px solid var(--cr-site-hairline); border-radius:var(--cr-radius-surface); padding:16px 18px; overflow:auto; white-space:pre; }
.cr[data-theme="dark"] .codeblock { background:#1b1c26; }
.codeblock .k { color:var(--cr-color-action-tertiary-fill); } .codeblock .v { color:var(--cr-color-action-secondary-text); }
.cr[data-theme="dark"] .codeblock .v { color:var(--cr-color-action-secondary-fill); }

/* One rendered set per pack, only the selected one shown. The site ships no
   React runtime, so the alternative to show/hide is no icons at all — which is
   what CR-D-075 recorded. */
.tp-iconslabel { margin:14px 0 6px; font-size:.72rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--cr-color-text-secondary); }
.tp-icons { display:flex; align-items:center; min-block-size:var(--cr-size-icon-md); }
.tp-iconset { display:none; gap:var(--cr-space-3); align-items:center; color:var(--cr-tp-primary); }
[data-icon-pack="lucide"] .tp-iconset[data-pack="lucide"],
[data-icon-pack="phosphor"] .tp-iconset[data-pack="phosphor"],
[data-icon-pack="material"] .tp-iconset[data-pack="material"] { display:flex; }

/* How the generated definition is adopted. CR-D-047: the block used to be CSS
   that nothing could consume, so there was nothing to instruct. */
.adoptsteps { margin:var(--cr-space-4) 0 0; padding-inline-start:1.25rem; font-size:.82rem; line-height:1.6; color:var(--cr-color-text-secondary); }
.adoptsteps code { display:block; margin-block-start:4px; font-family:var(--cr-font-mono); font-size:.78rem; color:var(--cr-color-text-primary); }
.adoptnote { margin:var(--cr-space-3) 0 0; font-size:.76rem; line-height:1.5; color:var(--cr-color-text-secondary); }