/* Design studio controls for the concept window: tabs, looks, cards, segmented controls, swatches, and saved looks.
   Scoped under .dp-studio. The sample site those controls restyle is in planner-mock.css. */

.dp-studio__block{display:grid;gap:14px;align-content:start;min-width:0}
.dp-studio__label{font-weight:800;font-size:1rem;margin:0}
.dp-studio__inline{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.dp-studio__inline label{font-weight:700;font-size:.9375rem}
.dp-studio__word{display:grid;gap:4px}
.dp-studio__word label{font-weight:700;font-size:.9375rem}
.dp-studio__actions{display:flex;flex-wrap:wrap;gap:8px}
.dp-basics{display:grid;gap:18px}
.dp-looks-step{display:grid;gap:10px}
.dp-looks-step__actions{display:flex;flex-wrap:wrap;gap:8px}
.dp-saved{display:grid;gap:12px}
.dp-advanced{display:grid;gap:10px}
.dp-spec{margin:6px 0 8px;padding-left:20px;display:grid;gap:3px;font-size:.9375rem;line-height:1.5}
.dp-contrast{margin:0;font-size:.875rem}
.dp-planner input[type=color]{width:64px;min-height:44px;height:44px;padding:3px;border:1px solid #b9b1a6;border-radius:2px;background:#fff;cursor:pointer}
/* Saved looks */
.dp-looks{display:flex;flex-wrap:wrap;gap:8px}
.dp-looks[hidden]{display:none}
.dp-look{display:inline-flex;border:1px solid var(--wine);background:#fff}
.dp-look button{border:0;background:transparent;font:inherit;font-weight:700;font-size:.875rem;color:var(--wine);cursor:pointer;min-height:40px;padding:6px 12px}
.dp-look button:hover{background:var(--wine);color:var(--paper)}
.dp-look__remove{border-left:1px solid var(--line)!important;font-size:1.125rem!important;padding-inline:10px!important}

/* Tabs */
.dp-tablist{display:flex;flex-wrap:wrap;gap:2px;border-bottom:2px solid var(--wine)}
.dp-tab{border:1px solid transparent;border-bottom:0;background:transparent;font:inherit;font-weight:800;font-size:.9375rem;color:var(--ink);min-height:44px;padding:8px 18px;cursor:pointer;margin-bottom:-2px}
.dp-tab:hover{color:var(--wine)}
.dp-tab[aria-selected="true"]{background:var(--wine);color:var(--paper)}
.dp-tab:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.dp-tabpanel{display:grid;gap:20px;padding-top:6px;min-width:0}
.dp-tabpanel[hidden]{display:none}
.dp-tabpanel:focus-visible{outline:3px solid var(--blue);outline-offset:4px}


/* Looks (presets) */
.dp-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));gap:8px}
.dp-preset{position:relative;display:grid;gap:4px;align-content:start;text-align:left;padding:14px 16px;border:1px solid #b9b1a6;background:#fff;color:var(--ink);font:inherit;cursor:pointer;min-height:96px;transition:border-color .15s,transform .15s}
.dp-preset:hover{border-color:var(--wine);transform:translateY(-2px)}
.dp-preset.is-on{border-color:var(--wine);box-shadow:inset 0 0 0 2px var(--wine)}
.dp-preset.is-on .dp-preset__name::after{content:" ✓"}
.dp-preset:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.dp-preset__dots{display:flex;gap:5px;margin-bottom:4px}
.dp-preset__dots i{width:18px;height:18px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #8b837a}
.dp-preset__name{font-weight:800;font-size:1.0625rem}
.dp-preset__blurb{font-size:.875rem;line-height:1.4;color:var(--muted)}
.dp-preset__badge{justify-self:start;margin-top:4px;font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--wine);color:var(--wine);padding:2px 8px;border-radius:999px}

/* Option cards */
.dp-choices--tight{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.dp-fontaa{font-size:1.75rem;line-height:1;margin-bottom:2px}
.dp-fontaa[data-font="clean"]{font-family:var(--f-clean);font-weight:800}
.dp-fontaa[data-font="classic"]{font-family:var(--f-classic);font-weight:700}
.dp-fontaa[data-font="modernserif"]{font-family:var(--f-modernserif);font-weight:700}
.dp-fontaa[data-font="soft"]{font-family:var(--f-soft);font-weight:700}
.dp-fontaa[data-font="humanist"]{font-family:var(--f-humanist);font-weight:700}
.dp-fontaa[data-font="mono"]{font-family:var(--f-mono);font-weight:700}
.dp-fontaa[data-font="condensed"]{font-family:var(--f-condensed);font-weight:700;text-transform:uppercase}

/* Swatches */
.dp-swatches{display:flex;flex-wrap:wrap;gap:10px}
.dp-swatch{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #8b837a;cursor:pointer;display:grid;place-items:center;padding:0}
.dp-swatch:hover{box-shadow:0 0 0 2px var(--wine)}
.dp-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--wine)}
.dp-swatch__check{opacity:0;color:#fff;font-weight:800;text-shadow:0 0 3px #000,0 0 3px #000}
.dp-swatch[aria-pressed="true"] .dp-swatch__check{opacity:1}
.dp-harmony{display:flex;align-items:center;gap:10px}
.dp-harmony-chip{flex:none;width:22px;height:22px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #8b837a}
.dp-harmony-chip[hidden]{display:none}

/* Segmented controls */
.dp-seg{border:0;margin:0;padding:0;min-width:0}
.dp-seg legend{font-weight:700;font-size:.9375rem;padding:0;margin-bottom:6px}
.dp-seg__row{display:inline-flex;flex-wrap:wrap;border:1px solid #b9b1a6;background:#fff;max-width:100%}
.dp-seg__row--wrap{display:flex}
.dp-seg__item{position:relative;cursor:pointer}
.dp-seg__item+.dp-seg__item{border-left:1px solid #b9b1a6}
.dp-planner .dp-seg__item input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.dp-seg__item span{display:flex;align-items:center;min-height:44px;padding:8px 14px;font-weight:700;font-size:.9375rem}
.dp-seg__item.is-checked{background:var(--wine);color:var(--paper)}
.dp-seg__item.is-checked span::before{content:"✓";margin-right:6px}
.dp-seg__item:focus-within{outline:3px solid var(--blue);outline-offset:2px;z-index:1}

@media(max-width:760px){
  .dp-tab{padding:8px 12px;font-size:.875rem}
  .dp-seg__row{display:flex}
  .dp-seg__item{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .dp-preset{transition:none}
}

/* ---------- Touch screens ---------- */
@media(pointer:coarse){
  .dp-link-button{min-height:44px;display:inline-flex;align-items:center}
  .dp-swatch{width:48px;height:48px}
  .dp-look button{min-height:44px}
  .dp-tab{min-height:48px}
}
@media(hover:none){
  .dp-preset:hover{transform:none}
}