/*
 * Designer views (wave 2). Loaded only by the Designer home, Studio editor, public Studio page,
 * add-a-design form and the Designer sign-up door. Every rule is scoped under .dz so Maker, Buyer
 * and the rest of the site are untouched. Tokens follow the Direct Create design system v3 (Stone default;
 * the Charcoal option is [data-theme="charcoal"] on .dz and is not switched on automatically).
 * Status is always an icon plus a word, never colour alone. Focus rings are 2px. Targets are 44px or more.
 */
.dz, .dz[data-theme="stone"] {
  --dz-canvas: #d6d6d6; --dz-card: #fff; --dz-field: #fff; --dz-rule: #b4b4b4; --dz-edge: #5c5c5c;
  --dz-ink: #1a1a1a; --dz-ink-2: #333; --dz-btn: #000; --dz-btn-fg: #fff; --dz-focus: #000;
  --dz-ok: #12704a; --dz-bad: #b3123a;
}
.dz[data-theme="charcoal"] {
  --dz-canvas: #1a1a1a; --dz-card: #242424; --dz-field: #202020; --dz-rule: #3a3a3a; --dz-edge: #8a8a8a;
  --dz-ink: #fff; --dz-ink-2: #d0d0d0; --dz-btn: #fff; --dz-btn-fg: #1a1a1a; --dz-focus: #fff;
  --dz-ok: #4fcb93; --dz-bad: #ff6f8e;
}
.dz { background: var(--dz-canvas); color: var(--dz-ink); font: 400 17px/27px 'Libre Baskerville', Georgia, serif; padding-bottom: 48px; -webkit-text-size-adjust: 100%; }
.dz *, .dz *::before, .dz *::after { box-sizing: border-box; }
.dz a { color: inherit; text-decoration: none; }
.dz img { display: block; max-width: 100%; }
.dz :focus-visible { outline: 2px solid var(--dz-focus); outline-offset: 2px; }
.dz .dz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dz-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 992px) { .dz-wrap { padding: 0 24px; } .dz { font-size: 18px; line-height: 29px; } }

/* type */
.dz .dz-eyebrow { font: 700 13px/1 Montserrat, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dz-ink-2); margin: 0; }
.dz .dz-title { font: 400 26px/34px 'Libre Baskerville', Georgia, serif; margin: 8px 0 14px; color: var(--dz-ink); }
.dz h2.dz-sec { font: 400 22px/30px 'Libre Baskerville', Georgia, serif; margin: 32px 0 12px; color: var(--dz-ink); }
.dz .dz-sans, .dz .dz-meta { font-family: Montserrat, Arial, sans-serif; }
.dz .dz-meta { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--dz-ink-2); }
.dz .dz-lead { font-size: 17px; line-height: 27px; color: var(--dz-ink-2); margin: 0 0 14px; }
@media (min-width: 992px) { .dz .dz-title { font-size: 38px; line-height: 46px; } .dz h2.dz-sec { font-size: 30px; line-height: 38px; } }

/* controls */
.dz .dz-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 4px; background: var(--dz-btn); color: var(--dz-btn-fg); border: 1px solid var(--dz-btn); font: 700 15px 'Libre Baskerville', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; width: 100%; cursor: pointer; text-align: center; }
.dz .dz-btn--sec { background: transparent; color: var(--dz-ink); border: 1px solid var(--dz-ink); }
.dz .dz-btn--inline { width: auto; display: inline-flex; }
.dz .dz-btn[disabled], .dz .dz-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dz .dz-link { font: 600 14px Montserrat, Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.dz .dz-field { margin-top: 18px; }
.dz .dz-field > label, .dz .dz-label { display: block; font: 600 14px/20px Montserrat, Arial, sans-serif; margin-bottom: 6px; color: var(--dz-ink); }
.dz .dz-field input[type=text], .dz .dz-field input[type=email], .dz .dz-field input[type=url], .dz .dz-field input[type=number], .dz .dz-field input[type=tel], .dz .dz-field input[type=password], .dz .dz-field select, .dz .dz-field textarea {
  display: block; width: 100%; min-height: 52px; padding: 8px 14px; font: 500 17px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink);
  border: 1px solid var(--dz-edge); border-radius: 4px; background: var(--dz-field); box-shadow: none; height: auto; }
.dz .dz-field textarea { min-height: 112px; padding-top: 12px; resize: vertical; }
.dz .dz-field input[type=file] { display: block; width: 100%; min-height: 52px; padding: 12px 10px; font: 500 15px Montserrat, Arial, sans-serif; border: 1px dashed var(--dz-edge); border-radius: 4px; background: var(--dz-field); }
.dz .dz-hint { display: block; margin-top: 6px; font: 500 14px/20px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); }
.dz .dz-field.has-error input, .dz .dz-field.has-error select, .dz .dz-field.has-error textarea { border-left: 6px solid var(--dz-bad); border-color: var(--dz-ink); }
.dz .dz-err { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font: 700 14px/20px Montserrat, Arial, sans-serif; color: var(--dz-ink); }
.dz .dz-err svg { color: var(--dz-bad); flex: none; margin-top: 2px; }
.dz .dz-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.dz .dz-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--dz-edge); border-radius: 999px; font: 600 14px Montserrat, Arial, sans-serif; background: var(--dz-card); cursor: pointer; }
.dz .dz-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dz .dz-chip .dz-chip-tick { display: none; }
.dz .dz-chip:has(input:checked) { border-color: var(--dz-ink); box-shadow: inset 0 0 0 1px var(--dz-ink); }
.dz .dz-chip:has(input:checked) .dz-chip-tick { display: inline-flex; }
.dz .dz-chip:has(input:focus-visible) { outline: 2px solid var(--dz-focus); outline-offset: 2px; }
.dz .dz-status { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--dz-ink); border-radius: 16px; font: 600 13px Montserrat, Arial, sans-serif; background: transparent; color: var(--dz-ink); }
.dz .dz-status svg { flex: none; }
.dz .dz-status--ok svg { color: var(--dz-ok); }
.dz .dz-status--bad svg { color: var(--dz-bad); }

/* surfaces */
.dz .dz-panel { margin: 16px 0; padding: 16px; background: var(--dz-card); border: 1px solid var(--dz-rule); border-radius: 4px; }
.dz .dz-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--dz-rule); border-radius: 4px; background: var(--dz-card); font: 500 15px/22px Montserrat, Arial, sans-serif; margin: 16px 0; }
.dz .dz-note svg { flex: none; margin-top: 1px; }
.dz .dz-alert { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--dz-ink); border-left-width: 8px; border-radius: 4px; background: var(--dz-card); display: flex; gap: 12px; font: 500 15px/22px Montserrat, Arial, sans-serif; }
.dz .dz-alert b { display: block; }
.dz .dz-alert--bad { border-left-color: var(--dz-bad); }
.dz .dz-alert--ok { border-left-color: var(--dz-ok); }
.dz .dz-progress { display: flex; align-items: center; gap: 12px; font: 600 14px Montserrat, Arial, sans-serif; }
.dz .dz-progress i { flex: 1; height: 8px; border-radius: 4px; background: var(--dz-rule); position: relative; overflow: hidden; }
.dz .dz-progress i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dz-ink); border-radius: 4px; }

/* checklist (Designer home) */
.dz .dz-ck { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--dz-rule); align-items: flex-start; }
.dz .dz-ck .dz-mk { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--dz-edge); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.dz .dz-ck.is-done .dz-mk { background: var(--dz-ink); border-color: var(--dz-ink); color: var(--dz-canvas); }
.dz .dz-ck.is-review .dz-mk { border-color: var(--dz-ink); }
.dz .dz-ck b { font: 700 16px/22px Montserrat, Arial, sans-serif; display: block; }
.dz .dz-ck p { font: 500 14px/20px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); margin: 2px 0 8px; }
.dz .dz-ck .dz-go { margin-left: auto; align-self: center; flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.dz .dz-ck--next { display: block; border: 1px solid var(--dz-ink); border-radius: 4px; padding: 16px 14px; margin: 14px 0 8px; }
.dz .dz-ck--next .dz-btn { margin-top: 14px; }

/* numbers */
.dz .dz-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dz .dz-num { padding: 16px 14px 14px; background: var(--dz-card); border: 1px solid var(--dz-rule); border-radius: 4px; }
.dz .dz-num .dz-l { font: 600 14px/18px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); display: block; }
.dz .dz-num .dz-v { font: 700 29px/36px Montserrat, Arial, sans-serif; margin: 4px 0 2px; display: block; }
.dz .dz-num .dz-s { font: 500 13px/18px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); display: block; }

/* design cards (public Studio, lists) */
.dz .dz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
@media (min-width: 768px) { .dz .dz-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .dz .dz-grid { grid-template-columns: repeat(4, 1fr); gap: 36px 24px; } }
.dz .dz-dc { display: block; background: var(--dz-card); border: 1px solid var(--dz-rule); border-radius: 4px; overflow: hidden; padding-bottom: 12px; }
.dz .dz-dc .dz-ph { aspect-ratio: 1; background: var(--dz-card); overflow: hidden; }
.dz .dz-dc .dz-ph img { width: 100%; height: 100%; object-fit: cover; }
.dz .dz-dc .dz-c { font: 600 14px/18px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); margin: 9px 10px 0; }
.dz .dz-dc .dz-n { font: 400 16px/22px 'Libre Baskerville', Georgia, serif; margin: 2px 10px 0; min-height: 44px; }
.dz .dz-dc .dz-p { font: 700 17px/24px Montserrat, Arial, sans-serif; margin: 6px 10px 0; }

/* studio header (editor preview and public page) */
.dz .dz-hero { position: relative; margin: 0 -16px; background: var(--dz-rule); }
.dz .dz-hero img.dz-banner { width: 100%; height: 190px; object-fit: cover; }
.dz .dz-hero .dz-banner-empty { height: 120px; background: var(--dz-ink); opacity: .85; }
.dz .dz-logo { width: 72px; height: 72px; border-radius: 50%; background: var(--dz-ink); color: var(--dz-canvas); font: 700 22px Montserrat, Arial, sans-serif; display: flex; align-items: center; justify-content: center; border: 3px solid var(--dz-canvas); overflow: hidden; position: relative; margin-top: -36px; margin-left: 16px; }
.dz .dz-logo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) { .dz .dz-hero { margin: 0; } .dz .dz-hero img.dz-banner { height: 280px; } .dz .dz-logo { width: 96px; height: 96px; margin-top: -48px; } }
.dz .dz-tabs { display: flex; border-bottom: 1px solid var(--dz-rule); gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 20px 0 0; }
.dz .dz-tabs a { flex: none; min-height: 48px; padding: 0 14px; display: flex; align-items: center; font: 700 14px Montserrat, Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--dz-ink-2); }
.dz .dz-tabs a[aria-current="page"] { color: var(--dz-ink); box-shadow: inset 0 -3px 0 var(--dz-ink); }

/* sticky action bar (phone) */
.dz .dz-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; padding: 10px 16px; margin: 24px -16px 0; background: var(--dz-card); border-top: 1px solid var(--dz-rule); }
.dz .dz-bar .dz-btn { flex: 1; letter-spacing: .04em; font-size: 14px; padding: 0 6px; }
@media (min-width: 992px) { .dz .dz-bar { position: static; margin: 24px 0 0; padding: 0; background: none; border: 0; } .dz .dz-bar .dz-btn { flex: none; width: auto; padding: 0 28px; } }
@media (max-width: 991px) { .dz { padding-bottom: 0; } }

/* link rows (Designer home "Manage" list) */
.dz .dz-rows { background: var(--dz-card); border: 1px solid var(--dz-rule); border-radius: 4px; }
.dz .dz-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 16px; border-top: 1px solid var(--dz-rule); font: 600 16px Montserrat, Arial, sans-serif; color: var(--dz-ink); }
.dz .dz-row:first-child { border-top: 0; }
.dz .dz-row .dz-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.dz .dz-badge { min-width: 24px; height: 24px; border-radius: 12px; padding: 0 7px; background: var(--dz-ink); color: var(--dz-canvas); font: 700 13px/24px Montserrat, Arial, sans-serif; text-align: center; }
.dz .dz-cols { display: block; }
@media (min-width: 992px) { .dz .dz-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; } }