/* New deck's style step and its "See all" gallery. Colours come from the dashboard's theme tokens only,
   so Dark, Light, Mountain and Lake all dress it. The gallery follows the microsite's theme picker:
   styles down the left, a large preview, Cancel and "Use this style" below. */

.ds-step{max-width:760px}
.ds-step h3{margin:0 0 6px;font:600 22px/1.25 Georgia,serif}
.ds-step>p{margin:0 0 18px;font-size:13px;color:var(--ink-2)}
.ds-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:20px}
.ds-chip{display:grid;gap:8px;padding:8px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer}
.ds-chip:hover{border-color:var(--line-2);background:var(--card-2)}
.ds-chip[aria-checked=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ds-chip:focus-visible,.ds-look:focus-visible,.ds-gal button:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.ds-chip__name{font-size:12.5px;font-weight:560;padding:0 2px 2px}
.ds-thumb{position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:var(--ds-art) center/cover no-repeat,var(--card-2)}
.ds-thumb::before{content:'';position:absolute;left:0;right:0;top:0;height:22%;background:var(--ds-a)}
.ds-thumb i{position:absolute;left:12%;top:42%;width:46%;height:7%;border-radius:3px;background:var(--ds-a);opacity:.85}
.ds-thumb b{position:absolute;left:12%;top:58%;width:28%;height:7%;border-radius:3px;background:var(--ds-b)}
.ds-chip--all{place-content:center;justify-items:center;text-align:center;background:var(--card-2);border-style:dashed}
.ds-all{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);font-size:15px;font-weight:600;color:var(--ink-2);background:var(--card)}
.ds-step-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.ds-gal{position:fixed;inset:0;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);
  display:none;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"rail head" "rail stage" "rail foot"}
dialog.ds-gal[open]{display:grid;width:auto!important;height:auto!important;max-width:none;max-height:none!important;overflow:hidden;padding:0!important;border-radius:0!important}
.ds-gal::backdrop{background:rgba(0,0,0,.45)}
.ds-gal__rail{grid-area:rail;overflow-y:auto;padding:20px 14px 24px;background:var(--card);border-right:1px solid var(--line-2)}
.ds-gal__rail>h2{margin:0 10px 10px;font-size:20px;font-weight:700}
.ds-gal__group{display:grid;gap:6px;margin-bottom:14px}
.ds-gal__group h3{margin:6px 10px 2px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.ds-look{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px;text-align:left;border:1px solid transparent;border-radius:12px;background:none;color:var(--ink);cursor:pointer}
.ds-look:hover{background:var(--card-2);border-color:var(--line)}
.ds-look[aria-pressed=true]{background:var(--card-2);border-color:var(--ink)}
.ds-look .ds-thumb{border-radius:6px}
.ds-look__name{font-size:14px;font-weight:560}
.ds-look__cur{font-size:11px;color:var(--ink-3)}
.ds-gal__head{grid-area:head;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:18px 24px 10px}
.ds-gal__title h2{margin:0;font:600 22px/1.2 Georgia,serif}
.ds-gal__title p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}
.ds-gal__tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ds-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.ds-seg button{padding:8px 14px;min-height:36px;font-size:13px;background:var(--card);color:var(--ink-2);border:0;cursor:pointer}
.ds-seg button+button{border-left:1px solid var(--line-2)}
.ds-seg button[aria-pressed=true]{background:var(--ink);color:var(--card)}
.ds-gal__stage{grid-area:stage;position:relative;min-height:0;display:grid;place-items:start center;padding:12px;overflow:hidden;background:var(--card-2);border-block:1px solid var(--line)}
.ds-gal__frame{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:10px;background:var(--card);box-shadow:0 8px 28px rgba(0,0,0,.14)}
.ds-gal__frame iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:var(--card)}
.ds-gal.is-loading .ds-gal__frame{opacity:.55}
.ds-gal__msg{position:absolute;left:0;right:0;bottom:14px;margin:0;text-align:center;font-size:13px;color:var(--ink-2)}
.ds-gal__foot{grid-area:foot;display:flex;justify-content:flex-end;gap:10px;padding:12px 24px;background:var(--paper)}

@media (max-width:719px){
  .ds-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ds-chip{min-height:44px}
  .ds-gal{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"rail" "head" "stage" "foot"}
  .ds-gal__rail{display:flex;gap:8px;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line-2)}
  .ds-gal__rail>h2,.ds-gal__group h3{display:none}
  .ds-gal__group{display:flex;gap:8px;margin:0}
  .ds-look{grid-template-columns:44px auto;min-height:48px;white-space:nowrap}
  .ds-look__cur{display:none}
  .ds-gal__head{padding:10px 14px 8px}
  .ds-gal__title h2{font-size:18px}
  .ds-gal__title p{display:none}
  .ds-gal__stage{padding:8px}
  .ds-gal__foot{padding:10px 14px}
  .ds-gal__foot button{flex:1;min-height:44px}
}
@media (prefers-reduced-motion:no-preference){.ds-gal__frame{transition:opacity .15s}}