/*
 * The Wondaur look for the template builder (squareposh.com/start/), loaded only for a browser with the preview
 * cookie (mu-plugin sqp-wondaur-preview.php adds this file and the class "wd" to <body>). It re-dresses the builder's
 * own tokens; every rule sits under body.wd, so without the class nothing here applies.
 */
@font-face{font-family:"Instrument Serif";src:url(InstrumentSerif-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(InstrumentSerif-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
body.wd{--ink:#26231f;--ink-2:#4b463f;--ink-3:#696258;--line:#e6ddd0;--line-2:#cfc5b6;--soft:#f6f1e9;--soft-2:#efe8de;--stage:#ece4d8;--black:#1b1916;--focus:#84715a;--info-soft:#f6ecd7;--r:14px;--r-lg:20px;
--shadow:0 1px 2px rgba(84,62,30,.07),0 10px 22px -12px rgba(84,62,30,.3);--shadow-lg:0 34px 64px -26px rgba(84,62,30,.4),0 8px 20px -10px rgba(84,62,30,.2)}
body.wd.ob,body.wd.gs{background:#fdfbf7}

/* The top of the builder. On squareposh the twelve steps sit in one row beside the name and the save sign; a little
   over 1520 wide (the owner's window, 2026-10-07: "i cant see everything things arre overlapping no save the navigation
   is messy") their labels pushed the bar wider than the window, so the row ran over the name and the save sign and the
   right edge of everything was cut off. Here: the name and the save sign on one row, the steps on their own row
   under it (it scrolls sideways when it has to, never over anything), and the save sign is a clear pill. */
body.wd .ob-app{grid-template-columns:minmax(0,1fr)}
body.wd .ob-top{min-width:0;background:#fdfbf7}
body.wd .ob-brand__mark{background:linear-gradient(160deg,#3a352f,#1b1916)}
body.wd .ob-brand__mark img{width:20px;height:auto}
/* the name alone: no door mark beside it (owner 2026-10-08) */
body.wd .ob-brand__mark{display:none}
body.wd .ob-save{padding:7px 13px 7px 11px;border-radius:99px;background:#efe8de;color:#4b463f;font-size:13px;font-weight:500}
body.wd .ob-save[data-state="saved"]{background:#e3f1e7;color:#235237}
body.wd .ob-save[data-state="saving"],body.wd .ob-save[data-state="pending"]{background:#f6ecd2;color:#6b4300}
body.wd .ob-save[data-state="error"]{background:#f7e3df;color:#7c2219}
@media (min-width:900px){
body.wd .ob-app{grid-template-rows:auto minmax(0,1fr)}
body.wd .ob-top{flex-wrap:wrap;row-gap:0;padding:10px 18px 0}
body.wd .ob-top__right{margin-left:auto}
body.wd .ob-steps{order:3;flex:0 0 100%;justify-content:flex-start;overflow-x:auto;padding:8px 0 10px;scrollbar-width:thin}
body.wd .ob-steps ol{margin:0 auto;gap:4px}
body.wd .ob-steps .ob-step__label{display:inline}
body.wd .ob-step{white-space:nowrap}
body.wd .ob-step.is-current{background:#fff;box-shadow:0 1px 2px rgba(84,62,30,.07),0 10px 22px -12px rgba(84,62,30,.3)}
}

/* Owner, 2026-10-15: "comb through the account login area and editor etc everything on mobile". On a phone the editor's
   bar ran off the side (Guide me, Undo, Settings and Publish could not be seen): two rows there instead. Row one: Home,
   which page, Publish. Row two: Set me up, Guide me, Undo, Settings, sharing the width. */
@media (max-width: 599px) {
	body.wd .is-wd2 { --top: 104px; }
	body.wd .is-wd2 .wd2-top { flex-wrap: wrap; align-content: center; row-gap: 4px; column-gap: 6px; overflow: visible !important; height: var(--top) !important; min-height: var(--top) !important; padding: 8px 10px !important; }
	body.wd .is-wd2 .wd2-top > * { order: 5; }
	body.wd .is-wd2 .wd2-top > a.wd2-btn:first-child { order: 1; flex: none; padding: 0 12px !important; }
	body.wd .is-wd2 .wd2-top > [data-wd2="pages"] { order: 2; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; justify-content: flex-start; padding: 0 12px !important; }
	body.wd .is-wd2 .wd2-top > [data-wd2="pages"] b { overflow: hidden; text-overflow: ellipsis; }
	body.wd .is-wd2 .wd2-top > [data-wd2="publish"] { order: 3; flex: none; padding: 0 14px !important; }
	body.wd .is-wd2 .wd2-top::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
	body.wd .is-wd2 .wd2-top > .wd2-sp, body.wd .is-wd2 .wd2-top > [data-wd2-saved], body.wd .is-wd2 .wd2-top > [data-wd2-dev] { display: none !important; }
	body.wd .is-wd2 .wd2-top > [data-su="start"], body.wd .is-wd2 .wd2-top > .wd2-guide--bar, body.wd .is-wd2 .wd2-top > [data-wd2="undo"], body.wd .is-wd2 .wd2-top > [data-wd2="settings"] {
		flex: 1 1 0; min-width: 0; height: 40px !important; min-height: 40px !important; padding: 0 6px !important; justify-content: center; gap: 5px; font-size: 13px; white-space: nowrap; box-shadow: none;
	}
	body.wd .is-wd2 .wd2-top > .wd2-guide--bar { position: static; border-radius: 99px; }
	body.wd .is-wd2 .wd2-top > [data-wd2="undo"] svg, body.wd .is-wd2 .wd2-top > [data-wd2="settings"] svg { flex: none; }
}

/* Owner, 2026-10-15 (her iPhone): "ai bubble looks funky on mobile". Safari did not crop the bubble's blurred colours to its
   circle, so a square showed: the mask makes it crop them. */
body.wd .wd2-orb span{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);isolation:isolate;transform:translateZ(0)}

/* Owner, 2026-10-15 (her iPhone, the icon window): "If I click edit icon on mobile this is how it opens large and no way to
   exit" / "Or save". Safari counts the space behind its own bars as screen (100vh), so the editor's windows came out taller
   than what shows, their top and their Done/Save cut off. They now fit what is visible (100dvh); their middle scrolls. */
@supports (height: 100dvh) {
	body.wd dialog[open],
	body.wd .wd-cr, body.wd .wd-gal, body.wd .wd-ico, body.wd .wd-lg, body.wd .wd-rb, body.wd .wd-soc, body.wd .wd2-menu,
	body.wd .wd-cr > form, body.wd .wd-gal > form, body.wd .wd-ico > form, body.wd .wd-lg > form, body.wd .wd-rb > form, body.wd .wd-soc > form {
		max-height: calc(100dvh - 24px) !important;
	}
}
body.wd .wd-ico__body, body.wd .wd-soc__body { min-height: 0; overscroll-behavior: contain; }