/*
 * The Wondaur look for the template customer's account (squareposh.com/account/), loaded only for a browser with the
 * preview cookie (mu-plugin sqp-wondaur-preview.php). It re-dresses the account's own tokens and a few of its parts;
 * every rule sits under body.acct.wd, so without the class nothing here applies.
 * Source: ~/domains/_static_sites/wondaur/server/platform-preview/look/ on the Buildaur work account.
 */
@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}
@font-face{font-family:"Inter";src:url(Inter-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"WondaurLogo";src:url(NeulisAlt-ExtraBold.woff2) format("woff2"),url(NeulisAlt-ExtraBold.otf) format("opentype");font-weight:800;font-style:normal;font-display:swap}
body.acct.wd{
--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
--bone:#f5f0e8;--bone-2:#ece4d8;--cocoa:#1b1916;--blush:#f6ecd7;--butter:#f6ecd7;
--ink:#26231f;--ink-2:#4b463f;--ink-3:#696258;--line:rgba(38,35,31,.12);--line-2:rgba(38,35,31,.26);--soft:#f1eae0;--page:#f5f0e8;
--black:#1b1916;--black-hover:#3d3832;--on-black:#fdfbf7;--focus:#84715a;--r:16px;--r-lg:24px;
--shadow:0 1px 2px rgba(84,62,30,.07),0 10px 22px -12px rgba(84,62,30,.3);--card:#fdfbf7;--tabbar:rgba(253,251,247,.97);
--wd-glass:linear-gradient(180deg,rgba(255,255,255,.92),rgba(253,251,247,.7));--wd-rim:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5);
--wd-e2:0 2px 5px rgba(84,62,30,.06),0 20px 44px -20px rgba(84,62,30,.34),0 50px 90px -48px rgba(84,62,30,.36);
background:var(--page);font-family:var(--sans)}
body.acct.wd:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 46% at 80% 6%,rgba(255,247,230,.95),rgba(255,247,230,0) 72%),radial-gradient(34% 42% at 14% 30%,rgba(238,228,255,.5),rgba(238,228,255,0) 70%),radial-gradient(40% 40% at 60% 100%,rgba(255,226,206,.4),rgba(255,226,206,0) 70%)}
.acct.wd .it{font-style:italic;color:#84715a}
.acct.wd .h1{letter-spacing:-.015em}
.acct.wd .card,.acct.wd .stat{border:0;background:var(--wd-glass);box-shadow:var(--wd-rim),var(--shadow)}
.acct.wd .btn{font-weight:500}
.acct.wd .btn--primary{border-color:#1b1916;background:linear-gradient(180deg,#34302b,#1b1916);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(38,35,31,.6)}
.acct.wd .btn--primary:hover{background:linear-gradient(180deg,#454039,#2a2622)}
.acct.wd .stat__value{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.acct.wd .peek{border:0;box-shadow:var(--wd-e2)}
.acct.wd .gate__card{border:0;background:var(--wd-glass);box-shadow:var(--wd-rim),var(--wd-e2)}
.acct.wd .brand__mark{background:linear-gradient(160deg,#3a352f,#1b1916)}
.acct.wd .brand__mark img{width:22px;height:auto}
/* no blur on the top bar: a blurred box would become the frame of the phone's bottom menu and pull it to the top */
.acct.wd .top{background:rgba(253,251,247,.96)}
.acct.wd .gate__brand{display:inline-flex;align-items:flex-end;gap:.26em;font:800 1.75rem/1 "WondaurLogo",var(--sans);letter-spacing:-.045em;color:var(--ink);text-decoration:none}
/* the name alone: no door mark beside it (owner 2026-10-08: "remove the icon from the logo just have it say wondaur") */
.acct.wd .gate__brand .wd-mark,.acct.wd .brand__mark{display:none}
/* a wide screen: the menu stands at the side, like the dashboard drawn on the Wondaur site */
@media(min-width:1000px){
body.acct.wd:has(.top){padding-left:264px}
.acct.wd .top{position:fixed;left:0;top:0;bottom:0;z-index:20;width:264px;border:0;border-right:1px solid var(--line);background:var(--wd-glass);box-shadow:20px 0 50px -40px rgba(84,62,30,.4)}
.acct.wd .top__in{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:22px;height:100%;min-height:0;max-width:none;padding:22px 14px}
.acct.wd .top__in:before{content:"Wondaur";display:block;padding:0 10px;font:800 1.45rem/1 "WondaurLogo",var(--sans);letter-spacing:-.045em;color:var(--ink)}
.acct.wd .brand{padding:12px 14px;border-radius:16px;background:var(--soft);border:1px solid var(--line-2);box-shadow:none} /* a quiet outlined card, no drop shadow (owner, 2026-10-11) */
.acct.wd .tabs{flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:0;border:0;border-radius:0;background:none}
.acct.wd .tabs a{justify-content:flex-start;gap:12px;min-height:44px;padding:0 12px;border-radius:14px;font-size:15px}
.acct.wd .tabs a[aria-current="page"]{background:var(--ink);color:#fff;box-shadow:0 10px 22px -14px rgba(38,35,31,.7)} /* dark, so the tab you are on is plain to see (owner, 2026-10-11) */
.acct.wd .tabs a[aria-current="page"] svg{color:#fff;stroke:currentColor}
.acct.wd .main{max-width:1560px;margin-left:0;padding:clamp(26px,3.4vw,48px) clamp(22px,3.6vw,56px) 90px}
}
/* the preview's own helpers: one tap into the demo account, and a Sign out for an account without a website */
.acct.wd .wd-demo{margin:14px 0 0;text-align:center}
.acct.wd .wd-demo .btn{width:100%;justify-content:center}
.acct.wd .wd-out{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 0}
/* Owner, 2026-10-15, after trying a white page ("i think the white is too much.. lets do the hue background again > hue icons
   backgrounds > and a white card"): the page keeps its soft hue, the cards are white, and each card's little icon square
   carries the hue. */
.acct.wd .wd-edit__tile,.acct.wd .wd-edit__way:not(.wd-edit__way--go){background:#fff}
.acct.wd .wd-edit__tile .wd-edit__ic,.acct.wd .wd-edit__way:not(.wd-edit__way--go) .wd-edit__ic{background:radial-gradient(120% 120% at 100% 0%,rgba(255,232,196,1),rgba(255,232,196,0) 62%),radial-gradient(120% 120% at 0% 100%,rgba(226,212,255,.95),rgba(226,212,255,0) 66%),radial-gradient(90% 90% at 80% 100%,rgba(255,214,190,.8),rgba(255,214,190,0) 70%),#fbf6ee;border-color:rgba(255,255,255,.7)}
/* Owner, 2026-10-15: "do a touch lighter on the tan background" (was #f5f0e8) */
body.acct.wd{--page:#f9f6f1;background:#f9f6f1}
/* Owner, 2026-10-15: "when i hover it should be the dark color when i say black i mean the dark charcol color we use in
   branding": a card turns the brand's charcoal on hover, its words white, its icon square a soft see-through white. */
.acct.wd .wd-edit__tile:hover,.acct.wd .wd-edit__way:not(.wd-edit__way--go):hover,.acct.wd .wd-edit__row:hover{background:#26231f;border-color:#26231f;color:#fff}
.acct.wd .wd-edit__tile:hover .wd-edit__ic,.acct.wd .wd-edit__way:not(.wd-edit__way--go):hover .wd-edit__ic{background:rgba(255,255,255,.15);border-color:transparent;color:#fff}

/* Owner, 2026-10-15: "the newpage + is white": on the hue square the New page plus is charcoal, like the other icons (white on hover, on the charcoal tile) */
.acct.wd .wd-edit__tile--new .wd-edit__ic{color:#26231f}.acct.wd .wd-edit__tile--new:hover .wd-edit__ic{color:#fff}
/* Owner, 2026-10-15: "make sure the arrows ahve more spaicing": every drop-down of the account has its arrow well inside the box */
.acct .field select{-webkit-appearance:none;appearance:none;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2326231f%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
/* Owner, 2026-10-15 (everything on a phone): the sign-in page's small links get a finger-sized tap area */
@media (max-width:720px){.gate__out a,.gate__new a{display:inline-block;padding:12px 4px}}

/* Owner, 2026-10-15 (her iPhone): "all my websites should be more in a box it looks like it's just there". On a phone the
   website picker in the top bar is a box of its own, as it is on a computer. The wordmark font now comes as woff2 too
   (the .otf was sent with the wrong file type, which an iPhone may refuse). */
@media (max-width:999px){
  body.acct.wd .wd-pick>summary{border:1px solid rgba(56,44,36,.16);border-radius:16px;background:#fff;padding:7px 40px 7px 8px!important;box-shadow:0 4px 14px -8px rgba(38,35,31,.25)}
  body.acct.wd .wd-pick[open]>summary{border-color:rgba(56,44,36,.32)}
}
/* Owner, 2026-10-15: "why is that below should be to the right": on a phone the website picker stays beside the wordmark
   (it wrapped under it when its words were long, like "All my websites"); it shrinks and its words end in "…" instead. */
@media (max-width:999px){
  body.acct.wd .top__in{flex-wrap:nowrap;gap:12px;align-items:center}
  body.acct.wd .top__in>.wd-wordmark{flex:none}
  body.acct.wd .top__in>.wd-pick{flex:1 1 auto;min-width:0;max-width:300px}
  body.acct.wd .wd-pick>summary .brand__text{min-width:0;overflow:hidden}
  body.acct.wd .wd-pick>summary .brand__text strong,body.acct.wd .wd-pick>summary .brand__text>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:359px){body.acct.wd .top__in>.wd-wordmark{font-size:1.25rem;padding:0 4px}}
/* Owner, 2026-10-15 (her iPhone): "Feel like the floating tool bar can go down a bit more": the bar sits lower in the safe area */
@media (max-width:720px){ body.acct.wd .tabs{bottom:max(6px, calc(env(safe-area-inset-bottom) - 14px))!important} }