/* Website › AI Editor (ws-editor.js): a simulation, our own markup, not the real editor pages.
   One desktop window (Hannah Brooks, the club's website editor) on Sports Club OS's Website page. Inside it, the app
   is drawn at 1450 x 804 and scaled by .585, like the other demos' pages; the club's website inside the editor is drawn
   at 1480 wide and scaled by .78 (the "camera", .ws-cam, moves and zooms it). The club's look is sites/gphc's site.css:
   Oswald and Inter, navy #14275e, blue #204098, gold #f8c808, paper #fbfaf7. */
@font-face { font-family: WsInter; src: url('ws/inter-400.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: WsInter; src: url('ws/inter-600.woff2') format('woff2'); font-weight: 600 700; font-display: block; }
@font-face { font-family: WsOswald; src: url('ws/oswald-700.woff2') format('woff2'); font-weight: 700; font-display: block; }

.ws-win { left: 26px; top: 20px; width: 848px; height: 500px; }
.ws-who { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 5px;
  font: 600 8.5px/1 Geist, Arial, sans-serif; color: #4a463d; white-space: nowrap; }
.ws-who i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 6.5px; letter-spacing: .02em; color: #fff; background: #0f6b5c; }
.ws-loading .ws-app { visibility: hidden; }
.ws-win p { color: inherit; }   /* the marketing site's own p { color } must not reach the window */   /* an empty window until fonts and pictures are ready */

/* ---------- the app (Sports Club OS) ---------- */
.ws-app { position: absolute; left: 0; top: 0; width: 1450px; height: 804px; transform: scale(.585); transform-origin: 0 0; overflow: hidden;
  font: 400 15px/1.45 Geist, Arial, sans-serif; color: #1b1a17; background: #f7f5ef; }
:where(.ws-app) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: default; }
.ws-side { position: absolute; left: 0; top: 0; bottom: 0; width: 248px; background: #fbfaf7; border-right: 1px solid #ebe7dd; padding: 18px 14px; }
.ws-club { display: flex; align-items: center; gap: 11px; padding: 2px 6px 18px; border-bottom: 1px solid #ebe7dd; margin-bottom: 16px; }
.ws-club img { width: 38px; height: 38px; border-radius: 50%; }
.ws-club b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.ws-club span { display: block; font-size: 12.5px; color: #77736a; }
.ws-sec { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a867c; padding: 14px 10px 8px; }
.ws-nav { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 15px; color: #3a3832; }
.ws-nav svg { width: 18px; height: 18px; flex: none; color: #6e6a60; }
.ws-nav.is-on { background: #efe9da; font-weight: 600; color: #1b1a17; }
.ws-nav.is-on svg { color: #1b1a17; }
.ws-sfoot { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; align-items: center; gap: 7px; font-size: 15px; color: #6e6a60; }
.ws-sfoot b { font-size: 10px; font-weight: 700; background: #f7c23b; color: #1b1a17; border-radius: 4px; padding: 2px 4px; }
.ws-sfoot span { margin-left: auto; font-size: 11px; letter-spacing: .12em; color: #9a958a; }

.ws-main { position: absolute; z-index: 0; left: 248px; top: 0; right: 0; bottom: 0; }
.ws-top { height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 26px; border-bottom: 1px solid #ebe7dd; }
.ws-crumb { font-size: 15px; color: #77736a; display: flex; gap: 10px; align-items: center; }
.ws-crumb i { font-style: normal; color: #b4afa3; }
.ws-crumb b { font-weight: 600; color: #1b1a17; }
.ws-search { margin-left: auto; width: 300px; height: 36px; border: 1px solid #e3ded2; border-radius: 9px; background: #fff; display: flex; align-items: center; gap: 9px; padding: 0 10px; font-size: 14px; color: #8a867c; }
.ws-search svg { width: 15px; height: 15px; }
.ws-search kbd { margin-left: auto; font: 500 11px/1 ui-monospace, Consolas, monospace; border: 1px solid #e3ded2; border-radius: 4px; padding: 3px 5px; color: #8a867c; }
.ws-av { width: 36px; height: 36px; border-radius: 50%; background: #0f6b5c; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.ws-body { position: absolute; left: 26px; right: 26px; top: 74px; bottom: 18px; display: flex; flex-direction: column; gap: 11px; }

.ws-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap; }
.ws-btn.ghost { background: #fff !important; box-shadow: inset 0 0 0 1px #d9d4c7; }
.ws-btn.accent { background: #204098 !important; color: #fff !important; }
.ws-btn.sm { height: 32px; padding: 0 11px; font-size: 13.5px !important; }
.ws-draftbar { flex: none; display: flex; align-items: center; gap: 16px; padding: 7px 8px 7px 14px; border-radius: 9px; background: #fff7d1; border: 1px solid #f1d872; color: #5b4700; font-size: 14px; }
.ws-draftbar b { font-weight: 600; }
.ws-draftbar .ws-muted { font-size: 13px; opacity: .8; }
.ws-grow { flex: 1; }
.ws-send { position: relative; transition: box-shadow .5s ease, transform .5s ease; }
.ws-send.is-glow { box-shadow: 0 0 0 4px #fff7d1, 0 0 0 7px #f7c23b, 0 8px 22px rgba(32, 64, 152, .35); }
.ws-modes { flex: none; display: flex; align-items: center; gap: 14px; height: 38px; }
.ws-seg { display: inline-flex; border: 1px solid #c7cfdf; border-radius: 9px; overflow: hidden; background: #fff; }
.ws-seg button { padding: 8px 15px; font-size: 14px; font-weight: 600; color: #374151; transition: background .25s ease, color .25s ease; }
.ws-seg button + button { border-left: 1px solid #c7cfdf; }
.ws-seg button.is-on { background: #204098; color: #fff; }
.ws-hint { font-size: 13.5px; color: #4b5563; opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s ease; }
.ws-hint.is-on { opacity: 1; transform: none; }
.ws-hint b { font-weight: 600; color: #1b1a17; }
.ws-saved { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #6b7280; white-space: nowrap; }
.ws-saved i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ws-saved.is-ok { color: #15803d; }
.ws-saved.is-busy i { animation: ws-pulse 1s ease-in-out infinite; }
@keyframes ws-pulse { 50% { opacity: .3; } }

/* the draft, in a frame */
.ws-frame { position: relative; flex: 1; min-height: 0; border: 1px solid #d5dbe7; border-radius: 10px; background: #fbfaf7; overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 26, 23, .04); }
.ws-vp { position: absolute; inset: 0; overflow: hidden; }
.ws-cam { position: absolute; left: 0; top: 0; width: 1480px; transform-origin: 0 0; transform: translate(0, 26px) scale(.775); }
.ws-fbar { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 26px; display: grid; place-items: center; background: #f8c808; color: #14275e;
  font: 700 11px/1 WsInter, Arial, sans-serif; letter-spacing: .02em; }

/* the opening: the prompt box alone on white; the white lifts on the editor once it is sent */
.ws-cover { position: absolute; inset: 0; background: #fff; transition: opacity .7s ease; }
.ws-cover.is-off { opacity: 0; }
/* the club's own website after Publish: the page as visitors see it, the window's full width */
.ws-live { position: absolute; inset: 0; overflow: hidden; background: #fbfaf7; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.ws-live.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.ws-live { background: #e4e0d6; }
.ws-live > .ws-doc { width: 1480px; transform: scale(.573); transform-origin: 0 0; box-shadow: 0 0 0 1px rgba(27, 26, 23, .06), 0 30px 60px -20px rgba(27, 26, 23, .35); }

/* the request panel: two thirds of the window's width, centred over it; on Send it shrinks into the pill */
.ws-ask { position: absolute; left: 242px; top: 236px; width: 966px; padding: 34px 34px 28px; border-radius: 16px; background: #fff; transform-origin: 0 0;
  box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 40px 90px -30px rgba(10, 18, 40, .6);
  transition: transform .72s cubic-bezier(.65, 0, .35, 1), opacity .5s ease .18s; }
.ws-ask.is-min { transform: translate(740px, 300px) scale(.435, .62); opacity: 0; }
.ws-ask h3 { margin: 0 0 20px; font-size: 34px; line-height: 1.15; letter-spacing: -.03em; font-weight: 600; }
.ws-ask p { margin: 0 0 18px; font-size: 16px; color: #5d5a52; }
.ws-ta { position: relative; min-height: 150px; padding: 16px 18px; border: 1.5px solid #c7cfdf; border-radius: 12px; font-size: 21px; line-height: 1.5; color: #1b1a17;
  white-space: pre-wrap; transition: border-color .3s ease, box-shadow .3s ease; }
.ws-ta.is-focus { border-color: #204098; box-shadow: 0 0 0 4px rgba(32, 64, 152, .12); }
.ws-ph { position: absolute; left: 18px; top: 16px; right: 18px; color: #9a958a; }
.ws-ta.has-text .ws-ph { display: none; }
.ws-caret { display: inline-block; width: 2px; height: 1.15em; margin: 0 -1px; vertical-align: -.2em; background: #204098; animation: ws-blink 1.05s steps(1) infinite; }
@keyframes ws-blink { 50% { opacity: 0; } }
.ws-ask-foot { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.ws-ask-foot small { font-size: 13.5px; color: #77736a; line-height: 1.4; }
.ws-go { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 10px; background: #204098 !important; color: #fff !important;
  font-size: 16px !important; font-weight: 600 !important; white-space: nowrap; opacity: .45; transition: opacity .3s ease; }
.ws-go.is-ready { opacity: 1; }

/* the assistant at work, minimised: a pill at the bottom right of the editor */
.ws-pill { position: absolute; right: 48px; bottom: 40px; width: 420px; padding: 16px 18px 12px; border-radius: 14px; background: #fff; transform-origin: 100% 100%;
  box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 22px 50px -18px rgba(10, 18, 40, .45);
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.65, 0, .35, 1), padding .5s ease; }
.ws-pill.is-on { opacity: 1; transform: none; }
.ws-pill-h { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.ws-pill-h i { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: 12px; background: #eef1fa; color: #204098; }
.ws-pill-h .ws-pill-t2 { display: none; }
.ws-pill.is-done .ws-pill-h i { background: #e5f3ea; color: #15803d; }
.ws-pill.is-done .ws-pill-t1 { display: none; }
.ws-pill.is-done .ws-pill-t2 { display: inline; }
.ws-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; overflow: hidden; max-height: 220px; transition: max-height .5s cubic-bezier(.65, 0, .35, 1), margin .5s ease, opacity .3s ease; }
.ws-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #9a958a; height: 30px; transition: color .3s ease; }
.ws-steps li b { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid #d9d4c7; display: grid; place-items: center; font-size: 11px; color: transparent; transition: all .3s ease; }
.ws-steps li.is-now { color: #1b1a17; }
.ws-steps li.is-now b { border-color: #f7c23b; background: #fff6d6; animation: ws-pulse 1s ease-in-out infinite; }
.ws-steps li.is-done { color: #3a3832; }
.ws-steps li.is-done b { border-color: #15803d; background: #15803d; color: #fff; }
.ws-pill-foot { font-size: 13px; color: #6e6a60; margin-top: 8px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease; }
.ws-pill.is-done .ws-pill-foot { max-height: 40px; opacity: 1; }
.ws-pill.is-small { width: 372px; padding: 11px 16px; }
.ws-pill.is-gone { opacity: 0; transform: translateY(10px); }
.ws-pill.is-small .ws-steps, .ws-pill.is-small .ws-pill-foot { max-height: 0; margin: 0; opacity: 0; }

/* ---------- the club's website (sites/gphc, scaled into the frame) ---------- */
.ws-doc { position: relative; background: #fbfaf7; color: #1a1816; font: 400 17px/1.65 WsInter, Arial, sans-serif; }
.ws-doc h1, .ws-doc h2, .ws-doc h3 { font-family: WsOswald, 'Arial Narrow', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1.08; color: #14275e; margin: 0 0 18px; }
.ws-doc h1 { font-size: 72px; letter-spacing: -1.6px; }
.ws-doc h2 { font-size: 44px; letter-spacing: -.7px; }
.ws-doc h3 { font-size: 26px; }
.ws-doc p { margin: 0 0 18px; }
.ws-doc .wrap { width: calc(100% - 144px); margin: auto; }
.ws-doc .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #204098; margin-bottom: 14px; }
.ws-doc .btn { display: inline-flex; align-items: center; gap: 22px; min-height: 52px; padding: 12px 25px; background: #f8c808; color: #14275e; font-weight: 700; }
.ws-mast { background: #fff; }
.ws-mast .top { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.ws-brand { display: flex; align-items: center; gap: 14px; }
.ws-brand img { width: 66px; height: 66px; }
.ws-brand strong { font-family: WsOswald, sans-serif; font-size: 22px; line-height: 1.12; width: 210px; color: #14275e; text-transform: uppercase; }
.ws-util { display: flex; gap: 28px; align-items: center; font-size: 14px; font-weight: 600; }
.ws-util .btn { min-height: 44px; padding: 8px 20px; font-size: 14px; }
.ws-menu { border-top: 1px solid #e8e9ed; }
.ws-menu .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; font-size: 14px; font-weight: 600; }
.ws-hero { position: relative; display: flex; align-items: center; background: #14275e; color: #fff; overflow: hidden; }
.ws-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-hero:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 22, 48, .84), rgba(7, 22, 48, .2) 75%); }
.ws-hero .wrap { position: relative; z-index: 1; padding: 56px 0; }
.ws-hero .eyebrow { color: #f8c808; }
.ws-hero h1 { color: #fff; max-width: 760px; }
.ws-hero p { max-width: 640px; font-size: 21px; }
.ws-notice { background: #14275e; color: #fff; padding: 16px 0; font-size: 14px; }
.ws-notice .wrap { display: flex; gap: 22px; align-items: center; justify-content: space-between; }
.ws-notice b { color: #f8c808; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; }
.ws-sec2 { padding: 66px 0; }
.ws-white { background: #fff; }
.ws-navy { background: #14275e; color: #fff; }
.ws-navy .eyebrow { color: #f8c808; }
.ws-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ws-fact { border-left: 1px solid #637397; padding-left: 24px; }
.ws-fact strong { font-family: WsOswald, sans-serif; font-weight: 700; font-size: 60px; line-height: 1.1; display: block; color: #fff; }
.ws-fact span { display: block; margin-top: 8px; font-size: 15px; color: #d7ddef; }
.ws-two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.ws-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
.ws-step { border-top: 1px solid #bfc6d9; padding-top: 22px; }
.ws-step em { font-style: normal; font-family: WsOswald, sans-serif; font-weight: 700; font-size: 42px; color: #204098; display: block; line-height: 1; margin-bottom: 18px; }
.ws-step h3 { margin-bottom: 10px; }
.ws-step p { font-size: 16px; }
.ws-split { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.ws-split .pic { min-height: 430px; position: relative; overflow: hidden; }
.ws-split .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-split .copy { padding: 60px 64px; align-self: center; }
.ws-split ul { margin: 0; padding-left: 22px; }
.ws-split li { margin-bottom: 10px; }
.ws-band { padding: 52px 0; background: #14275e; color: #fff; }
.ws-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.ws-band h2 { color: #fff; margin-bottom: 10px; }
.ws-band .eyebrow { color: #f8c808; }
.ws-band p { margin: 0; color: #d7ddef; }
.ws-foot { background: #101e46; color: #d5daea; padding: 44px 0 40px; font-size: 14px; }
.ws-foot .wrap { display: flex; align-items: center; justify-content: space-between; }
.ws-foot .ws-brand img { background: #fff; border-radius: 50%; }
.ws-foot .ws-brand strong { color: #fff; }

/* the two page bodies: the home page, then the new page cross-fades in and its blocks rise in, one after another */
.ws-bodies { position: relative; }
.ws-blk { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .75, .2, 1); }
.ws-blk.is-in { opacity: 1; transform: none; }

/* editing on the page (the real editing kit's look: api/site/editkit.mjs) */
.ws-ce { position: relative; display: inline-block; border-radius: 2px; transition: outline-color .2s ease, background-color .2s ease; outline: 2px solid transparent; outline-offset: 5px; }
.ws-ce.is-edit { outline-color: #4f7cff; background: rgba(248, 200, 8, .16); }
.ws-ce .ws-caret { background: #fff; }
.ws-ce .ws-caret, .ws-hero .ws-caret { display: none; }
.ws-ce.is-edit .ws-caret { display: inline-block; }
.ws-tbar { position: absolute; left: -6px; top: calc(100% + 14px); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 9px; background: #fff; color: #14275e;
  border: 1px solid #c7cfdf; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); font: 600 15px/1 system-ui, 'Segoe UI', Arial, sans-serif; white-space: nowrap;
  opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
.ws-ce.is-edit .ws-tbar { opacity: 1; transform: none; }
.ws-tbar span { padding: 0 10px 0 8px; color: #4b5563; font-size: 14px; }
.ws-tbar i { width: 1px; align-self: stretch; background: #e2e6ee; margin: 3px 3px; }
.ws-tbar b { min-width: 34px; height: 32px; display: grid; place-items: center; border-radius: 6px; padding: 0 8px; }
.ws-tbar b.it { font-style: italic; font-family: Georgia, serif; }
.ws-typed { transition: background-color 1s ease; }

/* ---------- Communications › AI email (ws-email.js): the message editor and a member's mail ---------- */
.wm .ws-av.wm-av, .ws-who i.wm-am { background: #204098; }
.ws-who i.wm-ep { background: #b4532a; }
.wm-pagehead { flex: none; display: flex; align-items: center; gap: 12px; }
.wm-pagehead h2 { margin: 0; font-size: 27px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: #1b1a17; }
.wm-pagehead span:not(.ws-grow) { font-size: 13.5px; color: #77736a; }
.wm-pagehead .ws-btn { height: 40px; padding: 0 16px; }
.wm-steps { flex: none; display: flex; align-items: center; gap: 8px; }
.wm-steps > span:not(.ws-grow):not(.ws-saved) { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e3ded2; font-size: 14px; color: #6e6a60; }
.wm-steps i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; background: #f1eee6; color: #6e6a60; }
.wm-steps .is-done i { background: #e5f3ea; color: #15803d; }
.wm-steps .is-on { box-shadow: inset 0 0 0 2px #204098 !important; color: #1b1a17 !important; font-weight: 600; }
.wm-steps .is-on i { background: #204098; color: #fff; }
.wm-subject { flex: none; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-radius: 9px; background: #fff; border: 1px solid #e3ded2; font-size: 16px; }
.wm-subject b { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a867c; }
.wm-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 10px; background: #f4f1ea; border: 1px solid #e5e1d8; }
.wm-cam { position: absolute; left: 0; top: 0; width: 640px; transform-origin: 0 0; }
/* the email, in mailrender.mjs's look */
.wm-email { width: 640px; background: #fff; border-radius: 8px; color: #1a1816; font: 400 16px/24px WsInter, Arial, sans-serif; overflow: hidden; }
.wm-email p { margin: 0 0 14px; }
.wm-banner img { display: block; width: 100%; height: 230px; object-fit: cover; }
.wm-head { display: flex; align-items: center; gap: 12px; margin: 0 32px 10px; padding: 20px 0 16px; border-bottom: 1px solid #e5e1d8; font-size: 16px; font-weight: 600; }
.wm-head img { width: 40px; height: 40px; border-radius: 50%; }
.wm-eb { padding: 4px 32px; }
.wm-eb h4 { margin: 6px 0 12px; font-size: 22px; line-height: 28px; font-weight: 600; }
.wm-merge { padding: 1px 6px; border-radius: 5px; background: #eef1fa; color: #204098; font-size: 14px; font-weight: 600; }
.wm-panel { margin: 2px 0 14px; padding: 14px 18px; background: #eef2fb; border-left: 4px solid #204098; border-radius: 6px; }
.wm-panel b { display: block; font-weight: 600; }
.wm-panel span { font-size: 15px; color: #4a463f; }
.wm-btn { display: inline-block; margin: 4px 0 14px; padding: 12px 22px; background: #204098; border-radius: 6px; color: #fff; font-weight: 600; }
.wm-foot { margin: 8px 32px 0; padding: 16px 0 26px; border-top: 1px solid #e5e1d8; font-size: 12px; line-height: 18px; color: #7a766f; }
.wm-foot b { color: #4a463f; }
.wm .ws-ce { outline-offset: 4px; }
.wm .ws-ce .ws-caret { background: #204098; }
/* Send: the count first */
.wm-scrim { position: absolute; inset: 0; background: rgba(20, 26, 44, .36); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.wm-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.wm-dlg { position: absolute; left: 425px; top: 210px; width: 600px; padding: 28px 30px 24px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 30px 70px -24px rgba(10, 18, 40, .55); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.wm-dlg.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.wm-dlg h3 { margin: 0 0 8px; font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.wm-dlg p { margin: 0 0 16px; font-size: 15px; color: #5d5a52; }
.wm-dlg-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.wm-dlg-sum div { padding: 12px 14px; border-radius: 10px; background: #f7f5ef; }
.wm-dlg-sum strong { display: block; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.wm-dlg-sum span { font-size: 13.5px; color: #6e6a60; }
.wm-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; }
.wm-dlg-foot .ws-btn { height: 42px; padding: 0 18px; }
/* the window switch (reference.md §3a): the office's window steps back, Ella's rises over it */
.ws-win { transition: transform .6s cubic-bezier(.4, 0, .2, 1), filter .6s cubic-bezier(.4, 0, .2, 1), opacity .6s cubic-bezier(.4, 0, .2, 1); }
.ws-win.wm-back { transform: translateY(-8px) scale(.92); filter: brightness(.82) saturate(.75); opacity: .72; }
.wm-w { left: 46px; top: 34px; width: 828px; height: 492px; z-index: 3; opacity: 0; visibility: hidden; transform: translateY(44px) scale(.96);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .45s ease, visibility 0s .7s; }
.wm-w.is-on { opacity: 1; visibility: visible; transform: none; box-shadow: 0 24px 60px rgba(27, 26, 23, .3); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .45s ease, visibility 0s; }
.wm-mail { position: absolute; left: 0; top: 0; width: 1416px; height: 790px; transform: scale(.585); transform-origin: 0 0; display: flex; background: #fff;
  font: 400 15px/1.45 Geist, Arial, sans-serif; color: #1b1a17; }
.wm-list { width: 380px; flex: none; border-right: 1px solid #ebe7dd; background: #fbfaf7; }
.wm-list-h { padding: 22px 22px 12px; font-size: 20px; font-weight: 600; }
.wm-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 22px; border-bottom: 1px solid #efebe2; }
.wm-row b { font-weight: 500; }
.wm-row span { grid-column: 1; font-size: 14px; color: #6e6a60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-row small { grid-row: 1; grid-column: 2; font-size: 12.5px; color: #8a867c; }
.wm-row.is-on { background: #eef1fa; box-shadow: inset 3px 0 0 #204098; }
.wm-row.is-new b { font-weight: 700; }
.wm-read { flex: 1; min-width: 0; padding: 26px 34px 0; overflow: hidden; background: #f4f1ea; }
.wm-read h3 { margin: 0 0 14px; font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.wm-from { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14.5px; }
.wm-from i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; background: #14275e; color: #fff; }
.wm-from span { color: #6e6a60; }
.wm-readin { transform-origin: 50% 0; }
.wm-readbody .wm-email { margin: 0 auto; box-shadow: 0 1px 2px rgba(27, 26, 23, .06); }

@media (prefers-reduced-motion: reduce) {
  .ws-win *, .ws-win *::before, .ws-win *::after { transition: none !important; animation: none !important; }
  .ws-win, .wm-w, .wm-w.is-on, .wm-w * { transition: none !important; animation: none !important; }
}

/* ---------- AI Reporting › AI Report Assistant (ws-report.js): a report page and the assistant's panel ----------
   web/report.html, the panel of web/assets/reports-ask.js and the widgets' one shape (api/dashboard.mjs). The app's
   transform is the scene's camera (setCam), so it may zoom in on the panel. */
.ws-app.wr { transform-origin: 0 0; }
.wr .ws-nav { padding: 7px 10px; }
.wr-head { position: absolute; left: 26px; right: 26px; top: 76px; display: flex; align-items: flex-start; gap: 14px; }
.wr-hic { width: 42px; height: 42px; flex: none; border-radius: 10px; border: 1px solid #e3ded2; background: #fff; display: grid; place-items: center; color: #4a463d; }
.wr-hic svg { width: 20px; height: 20px; }
.wr-head h2 { margin: 0; font-size: 27px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.wr-head p { margin: 3px 0 2px; font-size: 14.5px; color: #4a463d; }
.wr-head small { font-size: 12.5px; color: #8a867c; }
.wr-head .ws-btn svg { width: 16px; height: 16px; }
.wr-vp { position: absolute; left: 26px; right: 26px; top: 170px; bottom: 0; overflow: hidden; }
.wr-cam { transform-origin: 50% 0; }
.wr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; padding-bottom: 20px; }
.wr-w { --tone: #15803d; --wash: #e7f4ec; position: relative; background: #fff; border: 1px solid #e5e1d8; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 26, 23, .04); transition: box-shadow .6s ease, border-color .6s ease; }
.wr-w[data-tone="blue"] { --tone: #2563eb; --wash: #e8effd; }
.wr-w[data-tone="navy"] { --tone: #204098; --wash: #e9edf8; }
.wr-w.is-new { display: none; }
.wr-w.is-new.is-here { display: block; animation: wr-land .7s cubic-bezier(.2, .8, .2, 1) both; }
.wr-w.is-in { border-color: #f7c23b; box-shadow: 0 0 0 4px #fff3c4, 0 0 0 6px #f7c23b, 0 14px 30px -12px rgba(120, 90, 0, .35); }
@keyframes wr-land { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.wr-w-h { display: flex; align-items: center; gap: 11px; padding: 14px 16px 6px; }
.wr-w-h b { font-size: 15px; font-weight: 600; }
.wr-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--wash); color: var(--tone); flex: none; }
.wr-ic svg { width: 17px; height: 17px; }
.wr-tools { display: flex; gap: 12px; color: #9a958a; }
.wr-tools svg { width: 15px; height: 15px; }
.wr-w-top { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 16px 12px; background: linear-gradient(135deg, transparent 55%, var(--wash)); }
.wr-w-top strong { display: block; font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.wr-w-top span { display: block; font-size: 14px; color: #3a3832; }
.wr-w-top small { display: block; font-size: 12px; color: #8a867c; }
.wr-glance { display: flex; align-items: flex-end; gap: 4px; height: 52px; }
.wr-glance i { width: 13px; background: var(--tone); border-radius: 2px 2px 0 0; min-height: 3px; }
.wr-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px 12px; border-top: 1px solid #efebe2; }
.wr-figs b { display: block; font-size: 17px; font-weight: 600; }
.wr-figs span { display: block; font-size: 12.5px; color: #3a3832; }
.wr-figs small { display: block; font-size: 11.5px; color: #8a867c; }
.wr-sec { padding: 10px 16px 14px; border-top: 1px solid #efebe2; }
.wr-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.wr-sec-h b { font-size: 13px; font-weight: 600; }
.wr-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #6e6a60; white-space: nowrap; }
.wr-leg i { width: 9px; height: 9px; border-radius: 2px; background: var(--tone); }
.wr-leg i.was { margin-left: 6px; background: #cfcabd; }
.wr-bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 4px 0; font-size: 13px; }
.wr-bar span { color: #3a3832; }
.wr-bar em { font-style: normal; color: #3a3832; }
.wr-bar i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(var(--tone), var(--tone)) 0 0 / var(--w) 100% no-repeat, #efebe2; }
.wr-bar i.was { height: 4px; background: linear-gradient(#cfcabd, #cfcabd) 0 0 / var(--w) 100% no-repeat, transparent; }
.wr-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; height: 150px; }
.wr-col { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: #3a3832; }
.wr-col em { font-style: normal; font-weight: 600; font-size: 12.5px; }
.wr-col-b { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1px solid #e3ded2; }
.wr-col-b i { width: 34%; height: var(--h); background: var(--tone); border-radius: 3px 3px 0 0; }
.wr-col-b i.was { background: #cfcabd; }

/* the assistant's panel: from the right, over a dimmed page */
.wr-scrim { position: absolute; inset: 0; background: rgba(40, 38, 32, .28); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
.wr-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.wr-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 700px; background: #fff; display: flex; flex-direction: column;
  box-shadow: -20px 0 50px -20px rgba(27, 26, 23, .35); transform: translateX(104%); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.wr-drawer.is-on { transform: none; }
.wr-dh { flex: none; display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px 14px; border-bottom: 1px solid #ebe7dd; }
.wr-dh b { display: block; font-size: 17px; font-weight: 600; }
.wr-dh span { display: block; font-size: 13px; color: #6e6a60; }
.wr-x { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; font-size: 22px; color: #6e6a60; }
.wr-db { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.wr-dbin { padding: 16px 22px 22px; }
.wr-empty.is-gone { display: none; }
.wr-empty p { margin: 4px 0 12px; font-size: 14.5px; color: #6e6a60; }
.wr-ex { display: block; margin-bottom: 8px; padding: 10px 14px; border: 1px solid #e3ded2; border-radius: 10px; font-size: 14.5px; color: #3a3832; }
.wr-turn { display: none; margin-bottom: 18px; }
.wr-turn.is-on { display: block; }
.wr-q { margin: 0 0 14px auto; width: fit-content; max-width: 86%; padding: 11px 15px; border-radius: 12px; background: #eef1fa; font-size: 15.5px; line-height: 1.45; }
.wr-busy { display: none; align-items: center; gap: 12px; font-size: 14px; color: #6e6a60; }
.wr-busy.is-on { display: flex; }
.wr-prog { width: 120px; height: 4px; border-radius: 2px; background: #eef1fa; overflow: hidden; }
.wr-prog i { display: block; width: 40%; height: 100%; background: #204098; border-radius: 2px; animation: wr-prog 1.1s ease-in-out infinite; }
@keyframes wr-prog { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.wr-a { display: none; padding: 16px 18px; border: 1px solid #e5e1d8; border-radius: 12px; }
.wr-a.is-on { display: block; animation: wr-rise .45s ease both; }
@keyframes wr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wr-a p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
.wr-a p b { font-weight: 600; }
.wr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.wr-chip { padding: 5px 11px; border-radius: 999px; background: #fff6d6; color: #6b5200; font-size: 13px; opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease; }
.wr-add { margin-bottom: 12px; }
.wr-add .ws-btn { opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease, background .3s ease; }
.wr-add .ws-btn.is-added { background: #e5f3ea !important; color: #15803d !important; }
.wr-looked { padding-top: 11px; border-top: 1px solid #efebe2; opacity: 0; transition: opacity .35s ease; }
.wr-chip.is-on, .wr-add .ws-btn.is-on, .wr-looked.is-on { opacity: 1; transform: none; }
.wr-sum { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #204098; }
.wr-sum i { font-style: normal; font-size: 11px; transition: transform .3s ease; }
.wr-looked.is-open .wr-sum i { transform: rotate(90deg); }
.wr-call { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .55s cubic-bezier(.65, 0, .35, 1), opacity .35s ease .1s; }
.wr-looked.is-open .wr-call { max-height: 260px; opacity: 1; }
.wr-call-l { margin: 12px 0 6px; font-size: 13.5px; font-weight: 600; }
.wr-call table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wr-call th { text-align: left; font-weight: 600; font-size: 12.5px; color: #6e6a60; padding: 5px 0; border-bottom: 1px solid #e5e1d8; }
.wr-call td { padding: 6px 0; border-bottom: 1px solid #f0ece3; }
.wr-call th:not(:first-child), .wr-call td:not(:first-child) { text-align: right; }
.wr-call tr.is-tot td { font-weight: 600; border-bottom: 0; }
.wr-df { flex: none; padding: 14px 22px 16px; border-top: 1px solid #ebe7dd; background: #fbfaf7; }
.wr-ta { position: relative; min-height: 84px; padding: 11px 14px; border: 1.5px solid #c7cfdf; border-radius: 10px; background: #fff; font-size: 16px; line-height: 1.5;
  transition: border-color .3s ease, box-shadow .3s ease; }
.wr-ta.is-focus { border-color: #204098; box-shadow: 0 0 0 4px rgba(32, 64, 152, .12); }
.wr-ta .ws-caret { display: none; }
.wr-ta.is-focus .ws-caret { display: inline-block; }
.wr-ph { position: absolute; left: 14px; top: 11px; color: #9a958a; }
.wr-ta.has-text .wr-ph { display: none; }
.wr-dff { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.wr-dff small { font-size: 13px; color: #6e6a60; }
.wr-ask { opacity: .45; transition: opacity .3s ease; }
.wr-ask.is-ready { opacity: 1; }
.wr-toast { position: absolute; left: 500px; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; background: #1b1a17; color: #fff;
  font-size: 14.5px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4); opacity: 0; transform: translate(-50%, 12px); transition: opacity .3s ease, transform .4s ease; }
.wr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.wr-toast i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: #15803d; }