/* Softpaw enrichment proportions: 24 × 76 margins, 88 × 34 corners,
   136 × 44 transitions. Wedding-owned art; never drawn inside guest designs. */
:root { --wedding-branch: url('../images/branch.svg'); }
.dash-pane { --wedding-motif: url('../images/letter.svg'); position: relative; }
.dash-pane[data-pane="home"] { --wedding-motif: url('../images/rings.svg'); }
.dash-pane[data-pane="intro"] { --wedding-motif: url('../images/bow.svg'); }
.dash-pane[data-pane="website"] { --wedding-motif: url('../images/bouquet.svg'); }
.dash-pane[data-pane="card"] { --wedding-motif: url('../images/date.svg'); }
.dash-pane[data-pane="rsvp"], .dash-pane[data-pane="guests"] { --wedding-motif: url('../images/doves.svg'); }
.dash-pane[data-pane="settings"] { --wedding-motif: url('../images/crest.svg'); }
.wedding-margin-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.dash-editor > .wedding-margin-art { display: none; }
.wedding-margin-art::before, .wedding-margin-art::after {
  content: ''; position: absolute; width: 24px; height: 76px;
  background: url('../images/sprig.svg') center / contain no-repeat;
  opacity: .6; pointer-events: none;
}
.wedding-margin-art::before { left: 2px; top: 24%;  }
.wedding-margin-art::after { right: 2px; top: 72%; transform: scaleX(-1); }
/* Motifs have their own line; no text, hit target or preview overlaps. */
.dash-hero-copy::after, .ws-choice-head::after, .dash-pane[data-pane="settings"] > h1::after,
.ws-head > div:first-child::after, .legal-card > h1::after, .auth-brand::after,
.lib-head h2::after, .band-know h2::after, .band-notes h2::after, .ml-story h2::after, .price-head h2::after,
.wedding-price-art, .wedding-editor-art {
  content: ''; display: block; width: 136px; height: 44px; flex: 0 0 auto;
  margin: 6px 0; background: var(--wedding-motif, url('../images/bouquet.svg')) center / contain no-repeat;
  pointer-events: none;
}
.wedding-editor-art { margin: 8px auto 4px; }
.dash-hero-copy::after { margin-top: 14px; }
.dash-card-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dash-card-head h2::after { content: ''; display: block; width: 88px; height: 34px; background: url('../images/letter.svg') center / contain no-repeat; pointer-events: none; }
.dash-card:nth-child(2) .dash-card-head h2::after { background-image: url('../images/doves.svg'); }
.dash-checklist-list > li::before { content: ''; display: block; width: 72px; height: 34px; margin-bottom: 6px; background: url('../images/letter.svg') left center / contain no-repeat; pointer-events: none; }
.dash-checklist-list > li[data-check="intro"]::before { background-image: url('../images/bow.svg'); }
.dash-checklist-list > li[data-check="guests"]::before { background-image: url('../images/doves.svg'); }
.dash-checklist-list > li[data-check="send"]::before { background-image: url('../images/branch.svg'); }
.legal-card > h1::after { background-image: url('../images/crest.svg'); }
.auth-brand { flex-wrap: wrap; }
.auth-brand::after { background-image: url('../images/letter.svg'); }
.lib-head h2::after, .band-know h2::after, .band-notes h2::after, .ml-story h2::after, .price-head h2::after { margin-inline: auto; }
.wedding-price-art { margin: 0 auto 12px; background-image: url('../images/rings.svg'); }
/* Keep ornaments proportional on small screens, as in Softpaw. */
@media (max-width: 719px) {
  .wedding-margin-art::before, .wedding-margin-art::after { opacity: .45; }
  .dash-card-head h2::after { width: 72px; height: 28px; }
  .dash-checklist-list > li::before { width: 60px; height: 28px; }
  .auth-brand::after { width: 88px; height: 34px; }
}
@media (forced-colors: active) {
  .wedding-margin-art, .wedding-editor-art, .wedding-price-art { display: none; }
}

.price-head h2::after { background-image: url('../images/rings.svg'); }
.dash-pane[data-pane="preview"] .ed-bar > .kicker::after { content: ""; display: inline-block; width: 72px; height: 28px; margin-left: 12px; vertical-align: middle; background: url('../images/letter.svg') center / contain no-repeat; pointer-events: none; }

/* A distinct, calm wedding wash follows each section without losing contrast. */
#view-dashboard::before,
body[data-dash-pane="home"] #view-dashboard::before,
body[data-dash-pane="privacy"] #view-dashboard::before,
body[data-dash-pane="terms"] #view-dashboard::before,
body[data-dash-pane="changelog"] #view-dashboard::before,
body[data-dash-pane="account"] #view-dashboard::before {
  background-image: url('../images/wedding-abstract-bg-v1.webp');
  background-position: center;
}
body[data-dash-pane="letter"] #view-dashboard::before,
body[data-dash-pane="website"] #view-dashboard::before,
body[data-dash-pane="card"] #view-dashboard::before { background-image: url('../images/wedding-invitation-bg-v1.webp'); }
body[data-dash-pane="intro"] #view-dashboard::before { background-image: url('../images/wedding-intro-bg-v1.webp'); }
body[data-dash-pane="guests"] #view-dashboard::before,
body[data-dash-pane="emails"] #view-dashboard::before,
body[data-dash-pane="rsvp"] #view-dashboard::before { background-image: url('../images/wedding-guests-bg-v1.webp'); }
body[data-dash-pane="settings"] #view-dashboard::before,
body[data-dash-pane="events"] #view-dashboard::before,
body[data-dash-pane="save"] #view-dashboard::before,
body[data-dash-pane="preview"] #view-dashboard::before { background-image: url('../images/wedding-settings-bg-v1.webp'); }

/* Sidebar stationery: a small bouquet, illustrated navigation, leafy sign-off. */
.dash-brand { padding-bottom: 10px; }
.dash-brand::after {
  content: ''; display: block; width: 136px; height: 44px; margin: 8px 0 0;
  background: url('../images/bouquet.svg') center / contain no-repeat;
  pointer-events: none;
}
.dash-nav-list a { gap: 8px; }
.dash-nav-list a > i[data-ico] {
  width: 36px; height: 30px; flex: 0 0 36px; opacity: .9;
  -webkit-mask: none; mask: none;
  background: url('../images/letter.svg') center / 64px 30px no-repeat;
  pointer-events: none;
}
.dash-nav-list a[data-pane="home"] > i { background-image: url('../images/rings.svg'); }
.dash-nav-list a[data-pane="intro"] > i { background-image: url('../images/bow.svg'); }
.dash-nav-list a[data-pane="guests"] > i { background-image: url('../images/doves.svg'); }
.dash-nav-list a[data-pane="settings"] > i { background-image: url('../images/crest.svg'); }
/* Gift illustrations use a compact viewBox instead of the wide stationery art. */
.dash-nav-list a:is([data-pane="gifts"], [data-pane="giftsMine"], [data-pane="giftsBouquets"]) > i {
  background-size: contain;
}
.dash-nav-list a[data-pane="gifts"] > i { background-image: url('../images/gift-compose.svg'); }
.dash-nav-list a[data-pane="giftsMine"] > i { background-image: url('../images/gift-mine.svg'); }
.dash-nav-list a[data-pane="giftsBouquets"] > i { background-image: url('../images/gift-bouquets.svg'); }
.dash-nav-list a[aria-current="page"] > i { opacity: 1; }
/* Where the branch used to be. Owner asked for the sprig and the ceremony arch
   out of the rail; the break between the nav groups and the footer links still
   has to read, so it is a hairline now and nothing else. The footer links do
   not move: .dash-nav-foot is bottom-anchored with margin-top:auto, so losing
   the ornament above them shortens the block upward. */
.dash-nav-foot::before {
  content: ''; display: block; height: 1px; margin: 0 12px 20px;
  background: var(--dash-hair);
  pointer-events: none;
}
/* Ornament yields to navigation before the rail starts hiding rows.
   At 820px — an iPad in landscape — the three Digital gifts rows did not fit
   and Bouquets sat under the list's "more below" fade. The bouquet shrinks,
   the divider tightens and the house badge stands down, which is 75px back:
   enough for the row. A taller screen keeps all three. */
@media (max-height: 880px) {
  .dash-brand::after { height: 22px; margin-top: 4px; }
  .dash-nav-foot::before { margin-bottom: 10px; }
  .dash-nav-foot .fw-house { display: none; }
}
@media (max-height: 700px) {
  .dash-brand::after { height: 28px; margin-top: 4px; }
  .dash-nav-foot::before { margin-bottom: 10px; }
}
@media (forced-colors: active) {
  .dash-brand::after { display: none; }
}

.dash-utility { align-self: start; align-content: start; }
.dash-utility-copy, .dash-utility-list { max-width: 60ch; margin: 8px 0 0; color: var(--ink); font: 1rem/1.65 var(--sans); }
.dash-utility-copy p { margin: 0 0 16px; }
.dash-utility-list { display: grid; gap: 10px; padding-left: 20px; }

.ws-surface-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ws-surface-heading img { object-fit: contain; pointer-events: none; }
.ws-invitation-surfaces .ws-surface-options { gap: 8px; margin-top: 8px; }
.ws-surface-options .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; min-height: 40px; background: #fffaf080; border-color: #fffdf2; box-shadow: inset 0 1px 0 #ffffff80; transition: background 160ms ease, box-shadow 160ms ease; }
.ws-surface-options .btn:hover { background: #fffaf0d9; }
#view-dashboard .ws-surface-options .btn[aria-pressed="true"] { background: #344c38; color: #fff9ed; border-color: #344c38; box-shadow: 0 3px 10px #344c3826; }
.ws-template-swatch { width: 16px; height: 20px; flex: 0 0 16px; border-radius: 5px 5px 2px 2px; background: var(--swatch); border: 1px solid #ffffffb3; box-shadow: inset 0 0 0 3px #ffffff38; }
.ws-surface-options .btn:focus-visible { outline: 2px solid #344c38; outline-offset: 3px; }
.ed-preview[data-kind="letter"] > .ed-bar { gap: 10px; overflow: visible; }
.ed-preview[data-kind="letter"] > .ed-bar > .fw-pager { position: relative; top: auto; left: auto; transform: none; animation: none; flex: 0 1 auto; min-width: 0; max-width: none; margin-inline: auto; box-shadow: inset 0 1px 0 #ffffff99; }
.ed-preview[data-kind="letter"] > .ed-bar > .fw-pager button { padding: 0 10px; font-size: 11px; letter-spacing: .025em; gap: 6px; }
.ed-preview[data-kind="letter"] .ed-bar-actions { margin-left: 0; }
#view-dashboard .ed-preview[data-kind="letter"] .ed-bar-actions .js-ws-send { min-width: 100px; min-height: 44px; padding-inline: 22px; }
@media (max-width: 1199px) {
  .ed-preview[data-kind="letter"] > .ed-bar { overflow-x: auto; padding-bottom: 4px; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager { flex-shrink: 0; }
}
@media (forced-colors: active) { .ws-surface-heading img { display: none; } }

/* One line: stage tabs, page pills and Unlock & send side by side (owner,
   2026-09-24: never wrap onto a second line). Each group is tightened just
   enough to fit the preview column at desktop widths; when the column is
   narrower still, the pills scroll sideways inside their own pill instead of
   pushing the button onto a new row. */
@media (min-width: 720px) {
  .ed-preview[data-kind="letter"] > .ed-bar { flex-wrap: nowrap; gap: 8px; align-items: center; overflow: visible; padding-bottom: 0; }
  .ed-preview[data-kind="letter"] > .ed-bar > .ed-devices { flex: 0 0 auto; }
  .ed-preview[data-kind="letter"] > .ed-bar > .ed-devices button { padding: 0 10px; font-size: 12.5px; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager {
    flex: 0 1 auto; min-width: 0; margin-inline: 0; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager::-webkit-scrollbar { display: none; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager button { flex: 0 0 auto; padding: 0 8px; font-size: 10.5px; letter-spacing: .02em; gap: 5px; white-space: nowrap; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager button i { width: 5px; height: 5px; }
  .ed-preview[data-kind="letter"] .ed-bar-actions { flex: 0 0 auto; margin-left: auto; flex-wrap: nowrap; }
  #view-dashboard .ed-preview[data-kind="letter"] .ed-bar-actions .js-ws-send { min-width: 0; padding-inline: 14px; font-size: 12.5px; white-space: nowrap; }
}
/* Narrower desktops (the preview column is ~660 px at 1280): tighter still,
   and the pill dots go — the current page keeps its own highlighted pill.
   Up to 1499: at 1440 the dotted pills needed 367 px in a 343 px pager, so
   RSVP slid under "Unlock & send · $29" (QA 2026-09-24, B17). */
@media (min-width: 720px) and (max-width: 1499px) {
  .ed-preview[data-kind="letter"] > .ed-bar { gap: 6px; }
  .ed-preview[data-kind="letter"] > .ed-bar > .ed-devices button { padding: 0 8px; font-size: 12px; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager button { padding: 0 6px; font-size: 10px; letter-spacing: .01em; gap: 0; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager button i { display: none; }
  #view-dashboard .ed-preview[data-kind="letter"] .ed-bar-actions .js-ws-send { padding-inline: 12px; font-size: 12px; }
}

/* Tablet landscape and narrow desktops (QA B26/B27, 2026-09-25): the card and
   letter toolbars stay one line. Sized by the preview column itself, not the
   window, because the rail may be open or folded: 1024 with the rail folded
   leaves ~630 px, 1280 with it open ~660 px, 1024 with it open ~410 px. */
@media (min-width: 720px) {
  .ed-preview[data-kind="letter"],
  .ed-preview[data-kind="card"] { container: edpreview / inline-size; }
  .ed-preview[data-kind="card"] > .ed-bar { flex-wrap: nowrap; gap: 8px; align-items: center; }
  .ed-preview[data-kind="card"] > .ed-bar > .ed-devices { flex: 0 1 auto; min-width: 0; }
  .ed-preview[data-kind="card"] .ed-bar-actions { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }
  #view-dashboard .ed-preview[data-kind="card"] .ed-bar-actions .btn { white-space: nowrap; }
  #view-dashboard .ed-preview[data-kind="card"] .ed-bar-actions .js-ws-send { padding-inline: 20px; }
}
@container edpreview (max-width: 700px) {
  .ed-preview[data-kind="card"] > .ed-bar { gap: 6px; }
  .ed-preview[data-kind="card"] > .ed-bar > .ed-devices button { padding: 0 9px; font-size: 13px; }
  #view-dashboard .ed-preview[data-kind="card"] .ed-bar-actions { gap: 6px; }
  #view-dashboard .ed-preview[data-kind="card"] .ed-bar-actions .btn { padding-inline: 12px; font-size: 12px; }
  .ed-preview[data-kind="letter"] > .ed-bar { gap: 6px; }
  .ed-preview[data-kind="letter"] > .ed-bar > .ed-devices button { padding: 0 7px; font-size: 11.5px; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager button { padding: 0 5px; font-size: 9.5px; letter-spacing: 0; gap: 0; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager button i { display: none; }
  #view-dashboard .ed-preview[data-kind="letter"] .ed-bar-actions .js-ws-send { padding-inline: 11px; font-size: 11.5px; }
}
/* A tablet with the rail opened by hand leaves too little for three groups:
   the view-size switch steps aside (it returns as soon as there is room)
   rather than covering the pages or the Send button. */
@container edpreview (max-width: 600px) {
  .ed-preview[data-kind="letter"] > .ed-bar > .ed-devices { display: none; }
}
@container edpreview (max-width: 480px) {
  .ed-preview[data-kind="card"] > .ed-bar > .ed-devices { display: none; }
  .ed-preview[data-kind="letter"] > .ed-bar > .fw-pager button { padding: 0 4px; }
}