/* WOQUE Hub member screens. Everything is scoped to .woque, the wrapper printed by templates/layout.php.
   Layout uses Tailwind utilities with the "tw-" prefix; the pieces with a look live here.
   Selectors start with .woque.woque-scope so they outrank a theme's own rules for p, h1, a and so on. */

body.woque-page { margin: 0; padding: 0; background: #FAF6FB; }

/* The screen is a full page of its own. Anything the theme prints around it
   (mobile menus, pop-ups, footers added through wp_footer) is hidden here. */
body.woque-page > *:not(.woque):not(#wpadminbar):not(.woque-ask):not(script):not(style):not(link):not(noscript) { display: none !important; }
/* The same again without relying on the body class, so it also holds for a copy of the page that a
   cache saved before that class existed, or where a theme or plugin has changed the body classes:
   whatever is printed after the WOQUE screen, and (in browsers that support :has) before it. */
.woque ~ *:not(#wpadminbar):not(.woque-ask):not(script):not(style):not(link):not(noscript) { display: none !important; }
body:has(> .woque) > *:not(.woque):not(#wpadminbar):not(.woque-ask):not(script):not(style):not(link):not(noscript) { display: none !important; }
body:has(> .woque) { margin: 0; padding: 0; background: #FAF6FB; }
/* And once more in the plainest form, in case a tool that shrinks CSS on the server mishandles the rules above. */
.woque ~ nav, .woque ~ div, .woque ~ header, .woque ~ footer, .woque ~ aside, .woque ~ section, .woque ~ main,
.woque ~ ul, .woque ~ form, .woque ~ a, .woque ~ button, .woque ~ p, .woque ~ span, .woque ~ iframe { display: none !important; }
#wpadminbar { display: block !important; }

.woque {
  --plum: #2E0F38; --plum-2: #431955; --magenta: #A3155F; --magenta-dark: #7C0F48; --gold: #F2B632;
  --ink: #24102B; --muted: #66546D; --line: #E6DAEA; --line-soft: #F0E8F2; --lilac: #F1E7F4; --paper: #FAF6FB;
  min-height: 100vh; background: var(--paper); color: var(--ink);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.woque, .woque.woque-scope *, .woque.woque-scope *::before, .woque.woque-scope *::after { box-sizing: border-box; }
.woque.woque-scope h1, .woque.woque-scope h2, .woque.woque-scope h3, .woque.woque-scope p, .woque.woque-scope ul, .woque.woque-scope ol, .woque.woque-scope figure { margin: 0; padding: 0; }
/* Some sites set "p, h1 ... blockquote { margin: 20px 0 !important }" for their own pages. Inside the hub
   that margin is taken off again, one side at a time, and only where no tw- margin class asks for one. */
.woque :is(p, h1, h2, h3, h4, h5, h6, blockquote):not([class*="tw-mt-"], [class*="tw-my-"], [class*="tw-m-"]) { margin-top: 0 !important; }
.woque :is(p, h1, h2, h3, h4, h5, h6, blockquote):not([class*="tw-mb-"], [class*="tw-my-"], [class*="tw-m-"]) { margin-bottom: 0 !important; }
.woque :is(p, h1, h2, h3, h4, h5, h6, blockquote):not([class*="tw-ml-"], [class*="tw-mx-"], [class*="tw-m-"]) { margin-left: 0 !important; }
.woque :is(p, h1, h2, h3, h4, h5, h6, blockquote):not([class*="tw-mr-"], [class*="tw-mx-"], [class*="tw-m-"]) { margin-right: 0 !important; }
.woque.woque-scope ul { list-style: none; }
.woque.woque-scope p, .woque.woque-scope li, .woque.woque-scope label, .woque.woque-scope span, .woque.woque-scope a, .woque.woque-scope strong,
.woque.woque-scope input, .woque.woque-scope select, .woque.woque-scope textarea, .woque.woque-scope button { font-family: inherit; letter-spacing: normal; text-transform: none; }
.woque.woque-scope p, .woque.woque-scope li, .woque.woque-scope label { font-size: inherit; line-height: inherit; color: inherit; }
.woque.woque-scope h1, .woque.woque-scope h2 { text-transform: none; }
.woque.woque-scope h1 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 34px; line-height: 1.08; letter-spacing: -0.01em; color: inherit; }
.woque.woque-scope h2 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; color: inherit; }
.woque.woque-scope a { color: var(--magenta); }
.woque.woque-scope a:hover, .woque.woque-scope a:focus { color: var(--magenta-dark); }
.woque.woque-scope :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.woque.woque-scope .woque-muted { color: var(--muted); }
.woque.woque-scope .woque-small { font-size: 14px; }
.woque.woque-scope .woque-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-hide { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Page column: one comfortable column on a phone, centred on a PC */
.woque.woque-scope .woque-col { width: 100%; max-width: 560px; margin: 0 auto; padding: 24px 24px 48px; }
.woque.woque-scope .woque-col--wide { max-width: 720px; }

/* Top bar for logged-in screens */
.woque.woque-scope .woque-top { background: #fff; border-bottom: 1px solid var(--line); }
.woque.woque-scope .woque-top__in { max-width: 1160px; margin: 0 auto; min-height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.woque.woque-scope .woque-brand { display: inline-flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; color: var(--plum); text-decoration: none; }
.woque.woque-scope .woque-brand svg { width: 24px; height: 24px; fill: var(--gold); stroke: var(--plum); stroke-width: 1.4; stroke-linejoin: round; }
.woque.woque-scope .woque-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--plum); color: var(--gold); font-weight: 700; font-size: 15px; text-decoration: none; }

/* Buttons */
.woque.woque-scope .woque-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 22px;
  border: 2px solid var(--magenta); border-radius: 14px; background: #fff; color: var(--magenta);
  font: 700 17px/1.2 'Figtree', sans-serif; text-align: center; text-decoration: none; cursor: pointer;
}
.woque.woque-scope .woque-btn:hover { background: #FBF5F9; color: var(--magenta-dark); border-color: var(--magenta-dark); }
.woque.woque-scope .woque-btn--primary { background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-btn--primary:hover { background: var(--magenta-dark); color: #fff; }
.woque.woque-scope .woque-btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.woque.woque-scope .woque-btn--gold:hover { background: #E0A526; border-color: #E0A526; color: var(--ink); }
.woque.woque-scope .woque-btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.woque.woque-scope .woque-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }
.woque.woque-scope .woque-btn[disabled], .woque.woque-scope .woque-btn[aria-disabled="true"] { background: var(--lilac); border-color: var(--lilac); color: #8C7A93; cursor: not-allowed; }
.woque.woque-scope .woque-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--magenta); font: 600 15px 'Figtree', sans-serif; text-decoration: none; cursor: pointer; }
.woque.woque-scope .woque-link--center { display: flex; justify-content: center; }

/* Forms */
.woque.woque-scope .woque-field { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-label { font-weight: 700; font-size: 15px; }
.woque.woque-scope .woque-input {
  width: 100%; height: 52px; padding: 0 14px; border: 1px solid #CDBDD3; border-radius: 12px; background: #fff; color: var(--ink);
  font: 400 16px/1.3 'Figtree', sans-serif; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.woque.woque-scope select.woque-input { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.woque.woque-scope .woque-input:focus { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); outline: 0; }
.woque.woque-scope .woque-hint { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-weight: 600; cursor: pointer; }
.woque.woque-scope .woque-check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--magenta); }

/* Messages */
.woque.woque-scope .woque-alert { padding: 14px 16px; border-radius: 12px; background: #FBE9E4; color: #7A2A0E; font-weight: 600; }
.woque.woque-scope .woque-alert--ok { background: #E3F3EC; color: #14553B; }

/* Cards */
.woque.woque-scope .woque-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.woque.woque-scope .woque-card--plum { background: var(--plum); border: 0; color: #fff; }
.woque.woque-scope .woque-card--plum .woque-eyebrow { color: var(--gold); }
.woque.woque-scope .woque-card--plum p { color: #E4D3E9; }
.woque.woque-scope .woque-card--note { display: flex; gap: 12px; align-items: flex-start; background: var(--lilac); border: 0; color: #3E2A45; }
.woque.woque-scope .woque-card--note svg { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--plum); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-bar { display: block; height: 10px; border-radius: 5px; background: #4D2260; overflow: hidden; }
.woque.woque-scope .woque-bar > span { display: block; height: 10px; border-radius: 5px; background: var(--gold); }
.woque.woque-scope .woque-tick { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--gold); }
.woque.woque-scope .woque-tick svg { width: 36px; height: 36px; fill: none; stroke: var(--plum); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-bullets { list-style: disc; padding-left: 22px; }
.woque.woque-scope .woque-bullets li { margin: 4px 0; }

/* Front door */
.woque.woque-scope .woque-door { position: relative; overflow: hidden; min-height: 100vh; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-door__ring { position: absolute; right: -150px; top: 150px; width: 420px; height: 420px; border-radius: 50%; border: 56px solid var(--plum-2); }
.woque.woque-scope .woque-door__sun { position: absolute; right: -40px; top: 260px; width: 200px; height: 200px; border-radius: 50%; background: var(--gold); }
.woque.woque-scope .woque-door__in { position: relative; max-width: 1040px; min-height: 100vh; margin: 0 auto; padding: 36px 24px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.woque.woque-scope .woque-door .woque-brand { color: #fff; letter-spacing: 0.06em; }
.woque.woque-scope .woque-door .woque-brand svg { stroke: none; width: 26px; height: 26px; }
.woque.woque-scope .woque-door__body { display: flex; flex-direction: column; gap: 28px; max-width: 420px; }
.woque.woque-scope .woque-door h1 { font-size: 46px; line-height: 1.02; letter-spacing: -0.02em; }
.woque.woque-scope .woque-door__lead { font-size: 18px; color: #E4D3E9; max-width: 320px; }
.woque.woque-scope .woque-door__url { font-size: 14px; color: #CDB8D4; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-door__in { justify-content: flex-start; gap: 96px; padding: 48px 40px; }
  .woque.woque-scope .woque-door h1 { font-size: 72px; }
  .woque.woque-scope .woque-door__lead { font-size: 20px; max-width: 400px; }
  .woque.woque-scope .woque-door__ring { right: 4%; top: 120px; width: 560px; height: 560px; border-width: 72px; }
  .woque.woque-scope .woque-door__sun { right: 14%; top: 270px; width: 260px; height: 260px; }
  .woque.woque-scope h1 { font-size: 40px; }
}

/* Onboarding */
.woque.woque-scope .woque-steps { display: flex; gap: 6px; }
.woque.woque-scope .woque-steps > span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.woque.woque-scope .woque-steps > span.is-done { background: var(--magenta); }
.woque.woque-scope .woque-steps > span.is-now { background: var(--gold); }
.woque.woque-scope .woque-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #14553B; }
.woque.woque-scope .woque-saved svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-saved.is-saving { color: var(--muted); }
.woque.woque-scope .woque-saved.is-error { color: #7A2A0E; }
.woque.woque-scope .woque-content { font-size: 17px; }
.woque.woque-scope .woque-content > * + * { margin-top: 14px; }
.woque.woque-scope .woque-content iframe, .woque.woque-scope .woque-content img, .woque.woque-scope .woque-content video { max-width: 100%; border-radius: 14px; }
.woque.woque-scope .woque-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.woque.woque-scope .woque-content ul { list-style: disc; padding-left: 22px; }
.woque.woque-scope .woque-content ol { padding-left: 22px; }
.woque.woque-scope .woque-sections { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.woque.woque-scope .woque-sections__title { padding: 14px 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.woque.woque-scope .woque-section { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px; border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.woque.woque-scope a.woque-section:hover { background: var(--paper); color: var(--ink); }
.woque.woque-scope .woque-section__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lilac); color: var(--plum); font-size: 13px; font-weight: 700; }
.woque.woque-scope .woque-section.is-done .woque-section__mark { background: #E3F3EC; color: #14553B; }
.woque.woque-scope .woque-section.is-now .woque-section__mark { background: var(--gold); color: var(--ink); }
.woque.woque-scope .woque-section__title { flex: 1; font-weight: 600; }
.woque.woque-scope .woque-section.is-locked .woque-section__title { color: #8C7A93; }
.woque.woque-scope .woque-section__state { font-size: 13px; color: var(--muted); }


/* Wider column for list pages */
.woque.woque-scope .woque-col--page { max-width: 1040px; }
.woque.woque-scope .woque-btn--fit { width: auto; align-self: flex-start; }
.woque.woque-scope .woque-input--area { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }

/* Pill tabs and filters */
.woque.woque-scope .woque-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.woque.woque-scope .woque-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--plum); border-radius: 999px; background: #fff; color: var(--plum); font-weight: 600; font-size: 15px; text-decoration: none; }
.woque.woque-scope .woque-pill:hover { background: var(--lilac); color: var(--plum); }
.woque.woque-scope .woque-pill.is-active { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-pills--small .woque-pill { min-height: 40px; padding: 0 14px; border-color: var(--line); font-size: 14px; }
.woque.woque-scope .woque-pills--small .woque-pill.is-active { border-color: var(--plum); }

/* Library and Stories */
.woque.woque-scope .woque-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.woque.woque-scope .woque-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; overflow: hidden; }
.woque.woque-scope .woque-tile:hover { border-color: var(--magenta); color: var(--ink); }
.woque.woque-scope .woque-tile__cover { display: block; width: 100%; height: 170px; object-fit: cover; }
.woque.woque-scope .woque-tile__cover--none { display: flex; align-items: center; justify-content: center; background: var(--lilac); }
.woque.woque-scope .woque-tile__cover--none svg { width: 44px; height: 44px; fill: var(--gold); stroke: var(--plum); stroke-width: 1.2; stroke-linejoin: round; }
.woque.woque-scope .woque-tile__body { display: flex; flex-direction: column; gap: 6px; padding: 18px; flex: 1; }
.woque.woque-scope .woque-tile__body strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 20px; line-height: 1.2; }
.woque.woque-scope .woque-tile__by { margin-top: auto; padding-top: 10px; color: var(--magenta); font-weight: 600; }
.woque.woque-scope .woque-hero { display: block; width: 100%; max-height: 380px; object-fit: cover; border-radius: 18px; }
.woque.woque-scope .woque-story-title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--lilac); color: var(--plum); font-size: 13px; font-weight: 700; }
.woque.woque-scope .woque-tag--ok { background: #E3F3EC; color: #14553B; }

/* Profile */
.woque.woque-scope .woque-avatar { overflow: hidden; }
.woque.woque-scope .woque-avatar img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-me { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.woque.woque-scope .woque-me__photo { flex: none; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.woque.woque-scope .woque-me__photo--none { display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--plum); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 36px; }
.woque.woque-scope .woque-card--plum .woque-label { color: #fff; }
.woque.woque-scope .woque-card--plum .woque-hint { color: #CDB8D4; }
.woque.woque-scope .woque-file { max-width: 100%; min-height: 44px; color: #fff; font-size: 15px; }
.woque.woque-scope .woque-pair { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .woque.woque-scope .woque-pair { grid-template-columns: 1fr 1fr; } }
.woque.woque-scope .woque-input[disabled] { background: var(--lilac); color: var(--muted); }
.woque.woque-scope fieldset.woque-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.woque.woque-scope .woque-choices legend { padding: 0; margin-bottom: 8px; }
.woque.woque-scope .woque-choice { position: relative; display: inline-flex; cursor: pointer; }
.woque.woque-scope .woque-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.woque.woque-scope .woque-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #CDBDD3; border-radius: 999px; background: #fff; font-weight: 600; font-size: 15px; }
.woque.woque-scope .woque-choice input:checked + span { background: var(--plum); border-color: var(--plum); color: #fff; }
.woque.woque-scope .woque-choice input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ==========================================================================
   Member shell and hub, matching the design canvas.
   Phone values first; the PC layout starts at 900px.
   ========================================================================== */

/* Top bar */
.woque.woque-scope .woque-top__in { max-width: none; min-height: 60px; padding: 0 12px 0 16px; gap: 12px; }
.woque.woque-scope .woque-brand { font-size: 20px; }
.woque.woque-scope .woque-brand svg { width: 22px; height: 22px; }
.woque.woque-scope .woque-brand--inner { display: none; }
.woque.woque-scope .woque-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 10px; background: var(--lilac); color: var(--plum); font-weight: 600; font-size: 15px; text-decoration: none; }
.woque.woque-scope .woque-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-nav { display: none; }
.woque.woque-scope .woque-top .woque-avatar { flex: none; margin-left: auto; }
.woque.woque-scope .woque-top .woque-link + .woque-avatar { margin-left: 0; }
.woque.woque-scope .woque-top .woque-link { margin-left: auto; }

/* Bottom bar on a phone */
.woque.woque-scope .woque-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 68px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: #fff; border-top: 1px solid var(--line); }
.woque.woque-scope .woque-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 12px; text-decoration: none; }
.woque.woque-scope .woque-tabbar a.is-active { color: var(--magenta); }
.woque.woque-scope .woque-tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.woque-page .woque.woque-scope:has(.woque-tabbar) { padding-bottom: 68px; }
/* More (⋮): the last button of the phone bar opens a sheet with every other section. */
.woque.woque-scope .woque-tabbar__more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; }
.woque.woque-scope .woque-tabbar__more svg { fill: currentColor; stroke: none; }
.woque.woque-scope .woque-tabbar__more.is-active, .woque.woque-scope .woque-tabbar__more[aria-expanded="true"] { color: var(--magenta); }
.woque.woque-scope .woque-more { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; }
.woque.woque-scope .woque-more[hidden] { display: none; }
.woque.woque-scope .woque-more__back { position: absolute; inset: 0; background: rgba(46, 15, 56, 0.45); animation: woque-more-fade 0.2s ease both; }
.woque.woque-scope .woque-more__panel { position: relative; width: 100%; max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(46, 15, 56, 0.25); animation: woque-more-up 0.26s cubic-bezier(.2, .9, .3, 1) both; }
.woque.woque-scope .woque-more__panel:focus { outline: none; }
.woque.woque-scope .woque-more__grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 8px; }
.woque.woque-scope .woque-more__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.woque.woque-scope .woque-more__head h2 { font-size: 18px; color: var(--plum); }
.woque.woque-scope .woque-more__x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #F5EEF6; color: var(--plum); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.woque.woque-scope .woque-more__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.woque.woque-scope .woque-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.woque.woque-scope .woque-more__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; background: #FBF7FC; border: 1px solid var(--line); color: var(--plum); text-decoration: none; font-weight: 600; font-size: 13px; text-align: center; line-height: 1.25; min-height: 96px; justify-content: center; }
.woque.woque-scope .woque-more__item:active { transform: scale(0.97); }
.woque.woque-scope .woque-more__item.is-active { border-color: var(--magenta); color: var(--magenta); background: #FDF0F6; }
.woque.woque-scope .woque-more__icon { width: 44px; height: 44px; border-radius: 14px; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(46, 15, 56, 0.08); }
.woque.woque-scope .woque-more__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-more__label { overflow-wrap: anywhere; }
@keyframes woque-more-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes woque-more-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .woque.woque-scope .woque-more__panel, .woque.woque-scope .woque-more__back { animation: none; } }

.woque.woque-scope .woque-only-pc { display: none; }
.woque.woque-scope .woque-seclabel, .woque.woque-scope .woque-sechead h2 { font-family: 'Figtree', system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }

/* Hub */
.woque.woque-scope .woque-hub { padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 22px; }
.woque.woque-scope .woque-hub__head { display: flex; flex-direction: column; gap: 4px; }
.woque.woque-scope .woque-hub__head h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-hub__head p { color: var(--muted); }
.woque.woque-scope .woque-hubtabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; }
.woque.woque-scope .woque-hubtabs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--plum); background: #fff; color: var(--plum); font-weight: 600; font-size: 15px; white-space: nowrap; text-decoration: none; }
.woque.woque-scope .woque-hubtabs a[aria-selected="true"] { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-hub__grid { display: flex; flex-direction: column; gap: 22px; }
.woque.woque-scope .woque-hub__main { min-width: 0; }
.woque.woque-scope .woque-hubpanel { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-hubpanel[hidden] { display: none; }

.woque.woque-scope .woque-continue { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; background: var(--plum); color: #fff; text-decoration: none; }
.woque.woque-scope a.woque-continue:hover { color: #fff; }
.woque.woque-scope .woque-continue__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.woque.woque-scope .woque-continue__title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.1; }
.woque.woque-scope .woque-continue__line { font-size: 15px; color: #E4D3E9; }
.woque.woque-scope .woque-continue__bar { display: block; height: 8px; border-radius: 4px; background: #4D2260; overflow: hidden; }
.woque.woque-scope .woque-continue__bar > span { display: block; height: 8px; border-radius: 4px; background: var(--gold); }
.woque.woque-scope .woque-continue__cta { display: none; }
.woque.woque-scope .woque-continue--pic { flex-direction: row; align-items: flex-start; gap: 16px; }
.woque.woque-scope .woque-continue .woque-continue__img { flex: none; width: 76px; height: 76px; aspect-ratio: auto; border-radius: 14px; }
.woque.woque-scope .woque-continue__body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
/* WOQUE's current focus, or a course moved up to start: not one link, so the button shows on every screen. */
.woque.woque-scope .woque-continue--focus { box-shadow: inset 0 0 0 2px var(--gold); }
.woque.woque-scope .woque-continue__imglink { display: block; flex: none; }
.woque.woque-scope .woque-continue--focus a.woque-continue__title { color: #fff; text-decoration: none; }
.woque.woque-scope .woque-continue--focus a.woque-continue__title:hover { text-decoration: underline; }
.woque.woque-scope .woque-continue--focus form { margin: 0; }
.woque.woque-scope .woque-continue--focus .woque-continue__cta { align-self: flex-start; display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--gold); color: var(--ink); font: 700 16px 'Figtree', sans-serif; text-decoration: none; cursor: pointer; }

.woque.woque-scope .woque-rowcard { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-rowcard__text { display: flex; flex-direction: column; gap: 2px; }
.woque.woque-scope .woque-rowcard__text strong { font-size: 17px; }
.woque.woque-scope .woque-rowcard__text span { font-size: 14px; color: var(--muted); }
/* A row with the course picture on the left. Phone: picture, then title and badge stacked. PC: one line. */
.woque.woque-scope .woque-rowcard--pic { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 12px; }
.woque.woque-scope .woque-rowcard--pic .woque-rowcard__img { grid-row: 1 / span 2; align-self: start; width: 64px; height: 64px; aspect-ratio: auto; border-radius: 12px; }
.woque.woque-scope .woque-rowcard--pic .woque-rowcard__img.is-empty svg { width: 28px; }
.woque.woque-scope .woque-rowcard--pic .woque-rowcard__text { grid-column: 2; min-width: 0; }
.woque.woque-scope .woque-rowcard--pic .woque-pillbadge { grid-column: 2; justify-self: start; }
.woque.woque-scope .woque-rowcard--empty { background: transparent; border-style: dashed; }
.woque.woque-scope .woque-pillbadge { padding: 4px 12px; border-radius: 999px; background: #FCEFCB; color: #5A3E00; font-size: 13px; font-weight: 700; white-space: nowrap; }

.woque.woque-scope .woque-sechead { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 -8px; }
.woque.woque-scope .woque-sechead a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--magenta); font-weight: 700; font-size: 15px; text-decoration: none; }
.woque.woque-scope .woque-foryou { display: flex; flex-direction: column; gap: 10px; }
/* The big "See all courses" button under For you. */
.woque.woque-scope .woque-allcourses { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 24px; border-radius: 14px; background: var(--magenta); color: #fff; font: 700 17px 'Figtree', sans-serif; text-decoration: none; }
.woque.woque-scope .woque-allcourses:hover { background: var(--magenta-dark); color: #fff; }
.woque.woque-scope .woque-allcourses svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-reco { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-reco__why { font-size: 13px; font-weight: 600; color: var(--magenta); }
.woque.woque-scope .woque-reco__title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.15; }
.woque.woque-scope .woque-reco__meta { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-outline { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--magenta); background: #fff; color: var(--magenta); font: 700 15px 'Figtree', sans-serif; text-decoration: none; cursor: pointer; }
.woque.woque-scope .woque-outline:hover { background: #FBF5F9; color: var(--magenta-dark); }
.woque.woque-scope .woque-outline[disabled], .woque.woque-scope .woque-outline.is-off { background: var(--lilac); cursor: default; }

.woque.woque-scope .woque-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-note__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; }
.woque.woque-scope .woque-note__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-note__body { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: center; }
.woque.woque-scope .woque-note__kind { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.woque.woque-scope .woque-note__when { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-note__title { grid-column: 1 / -1; font-weight: 500; }
.woque.woque-scope .woque-note.is-unread .woque-note__title { font-weight: 700; }
.woque.woque-scope .woque-note__text { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-note--alert .woque-note__icon { background: #FBE4D8; color: #8A3B12; }
.woque.woque-scope .woque-note--alert .woque-note__kind { color: #8A3B12; }
.woque.woque-scope .woque-note--success .woque-note__icon { background: #E3F3EC; color: #14553B; }
.woque.woque-scope .woque-note--success .woque-note__kind { color: #14553B; }
.woque.woque-scope .woque-note--info .woque-note__icon { background: #E4E9F7; color: #27407A; }
.woque.woque-scope .woque-note--info .woque-note__kind { color: #27407A; }
.woque.woque-scope .woque-link--still { cursor: default; }

.woque.woque-scope .woque-pinned { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: #FCEFCB; color: #3F2B00; font-size: 14px; }
.woque.woque-scope .woque-pinned__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.woque.woque-scope .woque-pinned strong { font-size: 16px; }
.woque.woque-scope .woque-newsgrid { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-news { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-news__date { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-news strong { font-size: 17px; }
.woque.woque-scope .woque-news__text { font-size: 14px; color: var(--muted); }

.woque.woque-scope .woque-journey { display: flex; flex-direction: column; padding: 6px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-journey__row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.woque.woque-scope .woque-journey__row:last-child { border-bottom: 0; }
.woque.woque-scope .woque-journey__dot { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; border: 3px solid var(--magenta); background: #fff; }
.woque.woque-scope .woque-journey__row.is-done .woque-journey__dot { border-color: #1B6E4D; background: #1B6E4D; }
.woque.woque-scope .woque-journey__text { display: flex; flex-direction: column; gap: 2px; }
.woque.woque-scope .woque-journey__text span { font-size: 14px; color: var(--muted); }

.woque.woque-scope .woque-hub__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.woque.woque-scope .woque-explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.woque.woque-scope .woque-explore a { display: flex; flex-direction: column; gap: 10px; min-height: 124px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-explore__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lilac); color: var(--magenta); }
.woque.woque-scope .woque-explore__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-explore__text { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-explore__text strong { font-size: 17px; }
.woque.woque-scope .woque-explore__text span { font-size: 14px; color: var(--muted); line-height: 1.3; }

@media (min-width: 900px) {
  .woque.woque-scope .woque-top__in { max-width: 1160px; min-height: 68px; padding: 0 32px; gap: 24px; }
  .woque.woque-scope .woque-brand { font-size: 22px; }
  .woque.woque-scope .woque-brand svg { width: 24px; height: 24px; }
  .woque.woque-scope .woque-brand--inner { display: inline-flex; }
  .woque.woque-scope .woque-back { display: none; }
  .woque.woque-scope .woque-nav { display: flex; gap: 4px; flex-wrap: wrap; }
  .woque.woque-scope .woque-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--plum); font-weight: 600; font-size: 15px; text-decoration: none; }
  .woque.woque-scope .woque-nav a:hover { color: var(--magenta); }
  .woque.woque-scope .woque-nav a.is-active { background: var(--lilac); }
  .woque.woque-scope .woque-top .woque-avatar { margin-left: 0; }
  .woque.woque-scope .woque-tabbar { display: none; }
  .woque.woque-scope .woque-more { display: none; }
  body.woque-page .woque.woque-scope:has(.woque-tabbar) { padding-bottom: 0; }
  .woque.woque-scope .woque-only-pc { display: inline; }
  .woque.woque-scope .woque-only-phone { display: none; }

  .woque.woque-scope .woque-hub { max-width: 1160px; margin: 0 auto; padding: 36px 32px 48px; gap: 24px; }
  .woque.woque-scope .woque-hub__head h1 { font-size: 40px; line-height: 1.05; }
  .woque.woque-scope .woque-hub__head p { font-size: 17px; }
  .woque.woque-scope .woque-hubtabs { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
  .woque.woque-scope .woque-hubtabs a { padding: 0 18px; }
  .woque.woque-scope .woque-hub__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .woque.woque-scope .woque-hubpanel { gap: 14px; }
  .woque.woque-scope .woque-continue { padding: 28px; gap: 14px; }
  .woque.woque-scope .woque-continue--pic { align-items: stretch; gap: 24px; }
  .woque.woque-scope .woque-continue .woque-continue__img { width: 200px; height: auto; min-height: 150px; border-radius: 16px; }
  .woque.woque-scope .woque-continue__imglink { display: flex; }
  .woque.woque-scope .woque-continue--focus .woque-continue__cta { min-height: 50px; padding: 0 24px; font-size: 17px; }
  .woque.woque-scope .woque-continue__body { gap: 14px; justify-content: center; }
  .woque.woque-scope .woque-continue__title { font-size: 32px; }
  .woque.woque-scope .woque-continue__line { font-size: 16px; }
  .woque.woque-scope .woque-continue__cta { align-self: flex-start; display: flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 12px; background: var(--gold); color: var(--ink); font-weight: 700; }
  .woque.woque-scope .woque-rowcard { padding: 20px 22px; }
  .woque.woque-scope .woque-rowcard--pic { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; padding: 14px 20px 14px 14px; }
  .woque.woque-scope .woque-rowcard--pic .woque-rowcard__img { grid-row: auto; align-self: center; width: 84px; height: 84px; }
  .woque.woque-scope .woque-rowcard--pic .woque-pillbadge { grid-column: 3; }
  .woque.woque-scope .woque-sechead { margin: 10px 0 0; }
  .woque.woque-scope .woque-foryou { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
  .woque.woque-scope .woque-reco { padding: 20px 22px; }
  .woque.woque-scope .woque-reco__title { font-size: 22px; }
  .woque.woque-scope .woque-reco__meta { font-size: 15px; }
  .woque.woque-scope .woque-note { padding: 16px 18px; gap: 14px; }
  .woque.woque-scope .woque-note__icon { width: 44px; height: 44px; }
  .woque.woque-scope .woque-note__body { grid-template-columns: 1fr auto; }
  .woque.woque-scope .woque-note__when { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-size: 14px; }
  .woque.woque-scope .woque-note__title { grid-column: 1; font-size: 17px; }
  .woque.woque-scope .woque-note__text { grid-column: 1; font-size: 15px; }
  .woque.woque-scope .woque-pinned { padding: 20px 22px; font-size: 16px; }
  .woque.woque-scope .woque-pinned strong { font-size: 18px; }
  .woque.woque-scope .woque-newsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
  .woque.woque-scope .woque-news { padding: 20px 22px; gap: 6px; }
  .woque.woque-scope .woque-news strong { font-size: 18px; }
  .woque.woque-scope .woque-news__text { font-size: 15px; }
  .woque.woque-scope .woque-journey { padding: 8px 24px; }
  .woque.woque-scope .woque-journey__row { gap: 16px; padding: 16px 0; }
  .woque.woque-scope .woque-journey__dot { margin-top: 5px; }
  .woque.woque-scope .woque-journey__text strong { font-size: 17px; }
  .woque.woque-scope .woque-journey__text span { font-size: 15px; }
  .woque.woque-scope .woque-hub__side { gap: 10px; }
  .woque.woque-scope .woque-explore { display: flex; flex-direction: column; gap: 10px; }
  .woque.woque-scope .woque-explore a { flex-direction: row; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; }
  .woque.woque-scope .woque-explore__icon { flex: none; }
  .woque.woque-scope .woque-explore__text { gap: 0; }
  .woque.woque-scope .woque-explore__text strong { font-size: 16px; }
  .woque.woque-scope .woque-explore__text span { line-height: 1.5; }
}

/* ==========================================================================
   Courses: catalogue, one course, and the focus-area assessment.
   ========================================================================== */

.woque.woque-scope .woque-only-pc-block, .woque.woque-scope .woque-only-pc-flex { display: none; }
.woque.woque-scope .woque-only-phone-block { display: block; }
.woque.woque-scope button.woque-link { min-height: 44px; padding: 0; border: 0; background: transparent; font: 700 15px 'Figtree', sans-serif; cursor: pointer; }

/* Catalogue */
.woque.woque-scope .woque-cat { padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 24px; }
.woque.woque-scope .woque-cat__title { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-cat__title h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-cat__title p { color: var(--muted); }
.woque.woque-scope .woque-cat__search { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #CDBDD3; border-radius: 12px; background: #fff; font: 400 16px 'Figtree', sans-serif; color: var(--ink); }
.woque.woque-scope .woque-mine { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-minecard { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-minecard strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.15; }
.woque.woque-scope .woque-minecard > span { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-minecard__bar { display: block; height: 8px; border-radius: 4px; background: var(--lilac); overflow: hidden; }
.woque.woque-scope .woque-minecard__bar > span { display: block; height: 8px; border-radius: 4px; background: var(--magenta); }
.woque.woque-scope .woque-cat__body { display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-filters { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.woque.woque-scope .woque-filters__group { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-filters__group h2 { font-family: 'Figtree', system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--muted); }
.woque.woque-scope .woque-filters__row { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 2px; }
.woque.woque-scope .woque-filter { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--plum); background: #fff; color: var(--plum); font: 600 14px 'Figtree', sans-serif; white-space: nowrap; cursor: pointer; }
.woque.woque-scope .woque-filter[aria-pressed="true"] { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-filter__count { display: none; }
.woque.woque-scope .woque-cat__list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.woque.woque-scope .woque-cat__count { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-cat__cards { display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-course { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-course[hidden] { display: none; }
.woque.woque-scope .woque-course__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.woque.woque-scope .woque-course__cat { font-size: 13px; font-weight: 700; color: var(--magenta); }
.woque.woque-scope .woque-course .woque-pillbadge { padding: 4px 10px; }
.woque.woque-scope .woque-course__title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.15; }
.woque.woque-scope .woque-course__desc { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-course__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.woque.woque-scope .woque-course__facts > div { padding: 4px 10px; border-radius: 8px; background: var(--lilac); }
.woque.woque-scope .woque-course__facts span { display: none; }
.woque.woque-scope .woque-course__facts strong { font-size: 13px; font-weight: 600; }
.woque.woque-scope .woque-course__form { display: flex; flex-direction: column; margin: 0; }
.woque.woque-scope .woque-course .woque-outline { width: 100%; }
.woque.woque-scope .woque-cat__none { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; border: 1px dashed #B79FBF; border-radius: 16px; }
.woque.woque-scope .woque-cat__none[hidden] { display: none; }

/* One course */
.woque.woque-scope .woque-crs { padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 20px; }
.woque.woque-scope .woque-crs > .woque-link, .woque.woque-scope .woque-as__back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; }
.woque.woque-scope .woque-crs__head { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-crs__head h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-crs__head p { color: var(--muted); }
.woque.woque-scope .woque-begin { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-begin__title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.15; }
.woque.woque-scope .woque-begin p { color: #E4D3E9; font-size: 15px; }
.woque.woque-scope .woque-begin__cta { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 14px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.woque.woque-scope .woque-crs__grid { display: flex; flex-direction: column; gap: 20px; }
.woque.woque-scope .woque-crs__side { display: contents; }
.woque.woque-scope .woque-focus { order: 1; display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-focus__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.woque.woque-scope .woque-focus__chips span { padding: 6px 12px; border-radius: 999px; background: var(--lilac); color: var(--plum); font-size: 14px; font-weight: 600; }
.woque.woque-scope .woque-module { order: 2; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.woque.woque-scope .woque-module__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.woque.woque-scope .woque-module__title { font-weight: 700; font-size: 18px; line-height: 1.25; }
.woque.woque-scope .woque-module .woque-pillbadge { padding: 4px 10px; }
.woque.woque-scope .woque-pillbadge--done { background: #E3F3EC; color: #14553B; }
.woque.woque-scope .woque-module__body { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px; }
.woque.woque-scope .woque-module__body .woque-content { color: var(--muted); }
.woque.woque-scope .woque-task { display: flex; flex-direction: column; gap: 8px; margin: 0; scroll-margin-top: 16px; }
.woque.woque-scope .woque-task__text { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-task__title { font-weight: 600; }
.woque.woque-scope .woque-task__area { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-task__buttons { display: flex; gap: 8px; }
.woque.woque-scope .woque-task__buttons button { flex: 1 1 0; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; font: 700 14px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-task__buttons button[disabled] { cursor: default; opacity: 0.75; }
.woque.woque-scope .woque-task__done { border: 2px solid #1B6E4D; color: #1B6E4D; }
.woque.woque-scope .woque-task__done[aria-pressed="true"] { background: #1B6E4D; color: #fff; }
.woque.woque-scope .woque-task__fail { border: 2px solid #8A3B12; color: #8A3B12; }
.woque.woque-scope .woque-task__fail[aria-pressed="true"] { background: #8A3B12; color: #fff; }
.woque.woque-scope .woque-module__note { padding: 14px; border-radius: 12px; background: #F6F0F8; color: var(--muted); font-size: 14px; }
.woque.woque-scope .woque-module__done { padding: 14px; border-radius: 12px; background: #E3F3EC; color: #14553B; font-size: 15px; font-weight: 600; }
.woque.woque-scope .woque-reflect { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; border-radius: 12px; background: #F6F0F8; }
.woque.woque-scope fieldset.woque-rating { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.woque.woque-scope .woque-rating legend { padding: 0; margin-bottom: 12px; font-weight: 700; }
.woque.woque-scope .woque-rating label { position: relative; display: flex; cursor: pointer; }
.woque.woque-scope .woque-rating input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.woque.woque-scope .woque-rating span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; border: 1px solid var(--plum); background: #fff; color: var(--plum); font-weight: 600; font-size: 13px; }
.woque.woque-scope .woque-rating input:checked + span { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-rating input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.woque.woque-scope .woque-reflect__label { font-weight: 700; }
.woque.woque-scope .woque-reflect textarea, .woque.woque-scope .woque-as__area textarea { width: 100%; padding: 12px; border: 1px solid #CDBDD3; border-radius: 12px; background: #fff; font: 400 16px 'Figtree', sans-serif; color: var(--ink); resize: vertical; }
.woque.woque-scope .woque-reflect__submit { min-height: 50px; border: 0; border-radius: 12px; background: var(--magenta); color: #fff; font: 700 16px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-mods { order: 3; display: flex; flex-direction: column; }
.woque.woque-scope .woque-mod { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-mod strong { font-weight: 600; }
.woque.woque-scope .woque-mod span { font-size: 14px; text-align: right; }
.woque.woque-scope .woque-mod.is-locked { color: #8C7A93; }
.woque.woque-scope .woque-mod.is-current { color: var(--magenta); }

/* Assessment */
.woque.woque-scope .woque-as { margin: 0; padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-as__back { margin-bottom: -10px; }
.woque.woque-scope .woque-as__head { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-as__head h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-as__kicker + h1 { font-size: 28px; }
.woque.woque-scope .woque-as__head p { color: var(--muted); }
.woque.woque-scope .woque-as__kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-as__choices { display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-as__choice { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-as__choicetitle { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 20px; }
.woque.woque-scope .woque-as__choice p { color: var(--muted); font-size: 15px; }
.woque.woque-scope .woque-as__primary, .woque.woque-scope .woque-as__secondary { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 12px; font: 700 16px 'Figtree', sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.woque.woque-scope .woque-as__primary { border: 0; background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-as__secondary { border: 2px solid var(--magenta); background: #fff; color: var(--magenta); }
.woque.woque-scope .woque-as__secondary--big { min-height: 52px; border-radius: 14px; }
.woque.woque-scope .woque-as__waiting { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-as__waiting[hidden] { display: none; }
.woque.woque-scope .woque-as__wait { padding: 12px 14px; border-radius: 12px; background: #FCEFCB; color: #5A3E00; font-size: 14px; font-weight: 600; }
.woque.woque-scope .woque-as__text { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--magenta); font-weight: 600; font-size: 15px; text-decoration: none; }
.woque.woque-scope .woque-as__areas { display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-as__area { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-as__arearow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.woque.woque-scope .woque-as__arearow label { font-weight: 700; }
.woque.woque-scope .woque-as__score { flex: none; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 20px; }
.woque.woque-scope .woque-as__score small { font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); }
.woque.woque-scope .woque-as__area input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--magenta); }
.woque.woque-scope .woque-as__submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 28px; border: 0; border-radius: 14px; background: var(--magenta); color: #fff; font: 700 17px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-as__submit[disabled] { background: #CDBDD3; cursor: default; }
.woque.woque-scope .woque-as__low { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-as__low span { font-weight: 700; font-size: 17px; }
.woque.woque-scope .woque-as__low strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 22px; color: var(--gold); }
.woque.woque-scope .woque-as__comment { margin-top: -10px !important; padding: 0 4px; font-size: 14px; color: var(--muted); }
.woque.woque-scope fieldset.woque-as__tie { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.woque.woque-scope .woque-as__tie legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.woque.woque-scope .woque-as__pick { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; border: 2px solid var(--plum); border-radius: 16px; background: #fff; cursor: pointer; }
.woque.woque-scope .woque-as__pick input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--magenta); }
.woque.woque-scope .woque-as__pick span { flex: 1; font-weight: 700; }
.woque.woque-scope .woque-as__pick strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 20px; }
.woque.woque-scope .woque-as--thanks { min-height: calc(100vh - 60px); padding: 48px 24px 32px; }
.woque.woque-scope .woque-as--thanks h1 { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-as--thanks p { color: #3E2A45; }
.woque.woque-scope .woque-as__tick { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #E3F3EC; color: #1B6E4D; }
.woque.woque-scope .woque-as__tick svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-as__actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.woque.woque-scope .woque-as__actions form { margin: 0; }

/* Simple list pages (Programs, Events) */
.woque.woque-scope .woque-list { padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-list__head { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-list__head h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-list__head p { color: var(--muted); }
.woque.woque-scope .woque-list__empty { padding: 18px; border: 1px dashed #B79FBF; border-radius: 16px; color: #3E2A45; }

@media (min-width: 900px) {
  .woque.woque-scope .woque-only-pc-block { display: block; }
  .woque.woque-scope .woque-only-pc-flex { display: flex; }
  .woque.woque-scope .woque-only-phone-block { display: none; }

  .woque.woque-scope .woque-cat { max-width: 1160px; margin: 0 auto; padding: 36px 32px 48px; }
  .woque.woque-scope .woque-cat__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
  .woque.woque-scope .woque-cat__title { gap: 4px; }
  .woque.woque-scope .woque-cat__title h1 { font-size: 40px; line-height: 1.05; }
  .woque.woque-scope .woque-cat__title p { font-size: 17px; }
  .woque.woque-scope .woque-cat__search { width: 300px; max-width: 100%; height: 48px; }
  .woque.woque-scope .woque-cat__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 28px; align-items: start; }
  .woque.woque-scope .woque-filters { gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  .woque.woque-scope .woque-filters__group h2 { margin-bottom: 2px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .woque.woque-scope .woque-filters__row { flex-direction: column; gap: 6px; overflow: visible; margin: 0; padding: 0; }
  .woque.woque-scope .woque-filter { justify-content: space-between; padding: 0 12px; border-radius: 10px; border-color: var(--line); color: var(--ink); font-size: 15px; text-align: left; white-space: normal; }
  .woque.woque-scope .woque-filter[aria-pressed="true"] { border-color: var(--plum); }
  .woque.woque-scope .woque-filter__count { display: inline; font-weight: 500; }
  .woque.woque-scope .woque-filters > .woque-link { align-self: flex-start; }
  .woque.woque-scope .woque-cat__list { gap: 16px; }
  .woque.woque-scope .woque-cat__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .woque.woque-scope .woque-cat__count { font-size: 16px; }
  .woque.woque-scope .woque-cat__sort { align-items: center; gap: 8px; }
  .woque.woque-scope .woque-cat__sort label { font-size: 14px; color: var(--muted); }
  .woque.woque-scope .woque-cat__sort select { height: 44px; padding: 0 10px; border: 1px solid #CDBDD3; border-radius: 10px; background: #fff; font: 400 15px 'Figtree', sans-serif; color: var(--ink); }
  .woque.woque-scope .woque-cat__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
  .woque.woque-scope .woque-course { padding: 22px; gap: 12px; }
  .woque.woque-scope .woque-course__top { min-height: 28px; }
  .woque.woque-scope .woque-course__title { font-size: 24px; }
  .woque.woque-scope .woque-course__desc { font-size: 15px; }
  .woque.woque-scope .woque-course__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .woque.woque-scope .woque-course__facts > div { display: flex; flex-direction: column; padding: 0; border-radius: 0; background: transparent; }
  .woque.woque-scope .woque-course__facts span { display: inline; font-size: 13px; color: var(--muted); }
  .woque.woque-scope .woque-course__facts strong { font-size: 15px; font-weight: 700; }
  .woque.woque-scope .woque-course > .woque-outline, .woque.woque-scope .woque-course__form { margin-top: auto; }
  .woque.woque-scope .woque-course .woque-outline { min-height: 48px; }
  .woque.woque-scope .woque-cat__none { padding: 24px; }

  .woque.woque-scope .woque-crs { max-width: 1160px; margin: 0 auto; padding: 40px 32px 56px; gap: 24px; }
  .woque.woque-scope .woque-crs__head { gap: 4px; }
  .woque.woque-scope .woque-crs__head h1 { font-size: 40px; line-height: 1.05; }
  .woque.woque-scope .woque-crs__head p { font-size: 17px; }
  .woque.woque-scope .woque-begin { max-width: 640px; padding: 28px; border-radius: 20px; gap: 14px; }
  .woque.woque-scope .woque-begin__title { font-size: 28px; }
  .woque.woque-scope .woque-begin p { font-size: 16px; }
  .woque.woque-scope .woque-begin__cta { align-self: flex-start; }
  .woque.woque-scope .woque-crs__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
  .woque.woque-scope .woque-crs__side { display: flex; flex-direction: column; gap: 10px; }
  .woque.woque-scope .woque-focus { gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
  .woque.woque-scope .woque-focus__chips { gap: 6px; }
  .woque.woque-scope .woque-focus__chips span { padding: 4px 12px; font-size: 13px; font-weight: 700; }
  .woque.woque-scope .woque-mods { gap: 10px; }
  .woque.woque-scope .woque-mod { padding: 6px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .woque.woque-scope .woque-mod strong { font-weight: 700; }
  .woque.woque-scope .woque-mod span { font-size: 13px; }
  .woque.woque-scope .woque-mod.is-current { border-color: var(--plum); background: var(--plum); color: #fff; }
  .woque.woque-scope .woque-mod.is-locked { color: var(--ink); }
  .woque.woque-scope .woque-module { padding: 24px; border-radius: 18px; overflow: visible; }
  .woque.woque-scope .woque-module__head { padding: 0 0 6px; border-bottom: 0; }
  .woque.woque-scope .woque-module__title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 22px; line-height: 1.2; }
  .woque.woque-scope .woque-module .woque-pillbadge { padding: 4px 12px; }
  .woque.woque-scope .woque-module__body { padding: 0; gap: 0; }
  .woque.woque-scope .woque-module__body .woque-content { padding-bottom: 14px; }
  .woque.woque-scope .woque-task { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
  .woque.woque-scope .woque-task__text { gap: 0; }
  .woque.woque-scope .woque-task__title { font-weight: 700; }
  .woque.woque-scope .woque-task__buttons { flex: none; }
  .woque.woque-scope .woque-task__buttons button { flex: none; }
  .woque.woque-scope .woque-module__note { margin-top: 10px; padding: 16px; background: var(--lilac); color: #3E2A45; font-size: 16px; }
  .woque.woque-scope .woque-module__done { margin-top: 10px; padding: 16px; font-size: 16px; }
  .woque.woque-scope .woque-reflect { margin-top: 10px; padding: 20px; }
  .woque.woque-scope fieldset.woque-rating { grid-template-columns: repeat(4, minmax(0, 140px)); gap: 8px; }
  .woque.woque-scope .woque-rating span { font-size: 15px; }
  .woque.woque-scope .woque-reflect__submit { align-self: flex-start; padding: 0 24px; }

  .woque.woque-scope .woque-as { max-width: 1040px; margin: 0 auto; padding: 40px 32px 56px; gap: 24px; }
  .woque.woque-scope .woque-as--narrow { max-width: 640px; }
  .woque.woque-scope .woque-as__back { margin-bottom: 0; }
  .woque.woque-scope .woque-as__head { gap: 6px; }
  .woque.woque-scope .woque-as__head h1, .woque.woque-scope .woque-as__kicker + h1 { font-size: 40px; line-height: 1.05; }
  .woque.woque-scope .woque-as__head p { font-size: 17px; }
  .woque.woque-scope .woque-as__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .woque.woque-scope .woque-as__choice { padding: 24px; border-radius: 18px; }
  .woque.woque-scope .woque-as__choicetitle { font-size: 22px; }
  .woque.woque-scope .woque-as__areas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .woque.woque-scope .woque-as__area { padding: 18px 20px; border-radius: 18px; gap: 8px; }
  .woque.woque-scope .woque-as__score { font-size: 22px; }
  .woque.woque-scope .woque-as__score small { font-size: 14px; font-weight: 700; }
  .woque.woque-scope .woque-as__area input[type="range"] { height: auto; min-height: 24px; }
  .woque.woque-scope .woque-as__area textarea { padding: 10px 14px; }
  .woque.woque-scope .woque-as__submit { width: auto; align-self: flex-start; }
  .woque.woque-scope .woque-as--narrow .woque-as__text { align-self: flex-start; }
  .woque.woque-scope .woque-as--thanks { min-height: 0; padding-top: 64px; }
  .woque.woque-scope .woque-as--thanks h1 { font-size: 40px; }
  .woque.woque-scope .woque-as__actions { flex-direction: row; gap: 12px; margin-top: 8px; }
  .woque.woque-scope .woque-as__secondary--big { min-height: 56px; padding: 0 28px; font-size: 17px; }

  .woque.woque-scope .woque-list { max-width: 1160px; margin: 0 auto; padding: 40px 32px 56px; gap: 24px; }
  .woque.woque-scope .woque-list__head { gap: 4px; }
  .woque.woque-scope .woque-list__head h1 { font-size: 40px; line-height: 1.05; }
  .woque.woque-scope .woque-list__head p { font-size: 17px; }
  .woque.woque-scope .woque-list__empty { padding: 24px; }
}

/* Small corrections */
.woque.woque-scope .woque-mods .woque-mod.is-current { display: none; }
.woque.woque-scope .woque-as__primary:hover, .woque.woque-scope .woque-as__submit:hover, .woque.woque-scope .woque-reflect__submit:hover { background: var(--magenta-dark); color: #fff; }
.woque.woque-scope .woque-as__secondary:hover { background: #FBF5F9; color: var(--magenta-dark); }
.woque.woque-scope .woque-begin__cta:hover, .woque.woque-scope .woque-continue__cta:hover { color: var(--ink); }
.woque.woque-scope .woque-minecard:hover, .woque.woque-scope .woque-mod:hover { color: var(--ink); }
@media (min-width: 900px) {
  .woque.woque-scope .woque-mods .woque-mod.is-current { display: flex; }
  .woque.woque-scope .woque-mods .woque-mod.is-current:hover { color: #fff; }
  .woque.woque-scope span.woque-pillbadge.woque-only-phone { display: none; }
}

/* ==========================================================================
   My profile
   ========================================================================== */

.woque.woque-scope .woque-mod strong { flex: none; white-space: nowrap; }

/* ==========================================================================
   Course on one page (approved design "11 Course on one page").
   ========================================================================== */
.woque.woque-scope .woque-cp { display: flex; flex-direction: column; gap: 16px; padding: 20px 16px 28px; }
.woque.woque-scope .woque-cp__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.woque.woque-scope .woque-cp__hero { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-cp__all { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 -10px; color: #E4D3E9; font-weight: 600; font-size: 14px; text-decoration: none; }
.woque.woque-scope .woque-cp__all:hover { color: #fff; }
.woque.woque-scope .woque-cp__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.woque.woque-scope .woque-cp__hero h1 { font-size: 26px; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.woque.woque-scope .woque-cp__line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font-size: 15px; color: #E4D3E9; }
.woque.woque-scope .woque-cp__bar { display: block; height: 8px; border-radius: 4px; background: #4D2260; overflow: hidden; }
.woque.woque-scope .woque-cp__bar > span { display: block; height: 8px; border-radius: 4px; background: var(--gold); }
.woque.woque-scope .woque-cp__focus { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-cp__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.woque.woque-scope .woque-cp__chips button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--plum); background: #fff; color: var(--plum); font: 600 14px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-cp__focus.is-live .woque-cp__chips button[aria-pressed="true"] { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-cp__about { font-size: 14px; color: #3E2A45; }
.woque.woque-scope .woque-cp__focus.is-live .woque-cp__about[hidden] { display: none; }
.woque.woque-scope .woque-cp__focus.is-live .woque-cp__aboutname { display: none; }
.woque.woque-scope .woque-cp__nav { display: none; }
.woque.woque-scope .woque-cp__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.woque.woque-scope .woque-cp__main .woque-alert { margin: 0; }
.woque.woque-scope .woque-cp__wait { padding: 14px 16px; border-radius: 12px; background: #FCEFCB; color: #5A3E00; font-weight: 600; }

.woque.woque-scope .woque-st { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; scroll-margin-top: 16px; }
.woque.woque-scope .woque-st.is-now { border: 2px solid var(--magenta); }
.woque.woque-scope .woque-st__head { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; list-style: none; cursor: pointer; }
.woque.woque-scope .woque-st__head::-webkit-details-marker { display: none; }
.woque.woque-scope .woque-st.is-shut .woque-st__head { cursor: default; }
.woque.woque-scope summary.woque-st__head:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.woque.woque-scope .woque-st__badge { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lilac); color: var(--muted); font-weight: 700; font-size: 15px; }
.woque.woque-scope .woque-st__badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-st.is-done .woque-st__badge { background: #E3F3EC; color: #14553B; }
.woque.woque-scope .woque-st.is-done .woque-st__badge svg { width: 20px; height: 20px; stroke-width: 2.6; }
.woque.woque-scope .woque-st.is-now .woque-st__badge { background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-st__names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.woque.woque-scope .woque-st__kick { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.woque.woque-scope .woque-st.is-done .woque-st__kick { color: #14553B; }
.woque.woque-scope .woque-st.is-now .woque-st__kick { color: var(--magenta); }
.woque.woque-scope .woque-st__title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; }
.woque.woque-scope .woque-st__chev { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.woque.woque-scope .woque-st[open] .woque-st__chev { transform: rotate(180deg); }
.woque.woque-scope .woque-st__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-top: 1px solid var(--line-soft); }
.woque.woque-scope .woque-st__ahead { padding: 12px 14px; border-radius: 12px; background: #FCEFCB; color: #5A3E00; font-size: 14px; font-weight: 600; }
.woque.woque-scope .woque-st__lesson { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-st__lesson .woque-content { color: #3E2A45; }
.woque.woque-scope .woque-st__tasks { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-st__taskhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.woque.woque-scope .woque-st__count { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-st__quote { display: block; margin-top: 4px; font-weight: 400; }
.woque.woque-scope .woque-st .woque-module__done { font-weight: 400; }

.woque.woque-scope .woque-tk { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; scroll-margin-top: 16px; }
.woque.woque-scope .woque-tk.is-done { border-color: #1B6E4D; background: #F3FAF6; }
.woque.woque-scope .woque-tk.is-failed { border-color: #8A3B12; background: #FDF5F0; }
.woque.woque-scope .woque-tk__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.woque.woque-scope .woque-tk__tag { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--lilac); color: var(--plum); font-size: 12px; font-weight: 700; }
.woque.woque-scope .woque-tk__tag--area { background: #FCEFCB; color: #5A3E00; }
.woque.woque-scope .woque-tk__title { font-weight: 700; font-size: 17px; line-height: 1.3; }
.woque.woque-scope .woque-tk__content { font-size: 15px; color: #3E2A45; }
.woque.woque-scope .woque-tk__content.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.woque.woque-scope .woque-tk__more { align-self: flex-start; min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: transparent; color: var(--magenta); font: 700 14px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-tk__more[hidden] { display: none; }
.woque.woque-scope .woque-tk__buttons { display: flex; gap: 8px; margin: 0; }
.woque.woque-scope .woque-tk__buttons button { flex: 1 1 0; min-height: 46px; padding: 0 20px; border-radius: 10px; background: #fff; font: 700 14px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-tk__answer { font-size: 14px; font-weight: 700; color: var(--muted); }
.woque.woque-scope .woque-tk.is-done .woque-tk__answer { color: #14553B; }
.woque.woque-scope .woque-tk.is-failed .woque-tk__answer { color: #8A3B12; }
.woque.woque-scope .woque-reflect__title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 19px; }
.woque.woque-scope .woque-st .woque-reflect { padding: 18px; border-radius: 14px; }
.woque.woque-scope .woque-st .woque-module__note { font-size: 15px; color: #3E2A45; }

@media (min-width: 900px) {
  .woque.woque-scope .woque-cp { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; max-width: 1160px; margin: 0 auto; padding: 36px 32px 56px; }
  .woque.woque-scope .woque-cp__side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
  .woque.woque-scope .woque-cp__hero { padding: 26px; }
  .woque.woque-scope .woque-cp__hero h1 { font-size: 30px; }
  .woque.woque-scope .woque-cp__nav { display: flex; flex-direction: column; padding: 8px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  .woque.woque-scope .woque-cp__nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--line-soft); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
  .woque.woque-scope .woque-cp__nav a:first-child { border-top: 0; }
  .woque.woque-scope .woque-cp__nav a.is-open { color: var(--magenta); }
  .woque.woque-scope .woque-cp__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #B79FBF; background: #fff; }
  .woque.woque-scope .woque-cp__nav a.is-done .woque-cp__dot { border-color: #1B6E4D; background: #1B6E4D; }
  .woque.woque-scope .woque-cp__nav a.is-open .woque-cp__dot { border-color: var(--magenta); background: var(--magenta); }
  .woque.woque-scope .woque-cp__navname { flex: 1; }
  .woque.woque-scope .woque-cp__navstate { font-size: 13px; font-weight: 500; color: var(--muted); }
  .woque.woque-scope .woque-st__head { padding: 14px 22px; }
  .woque.woque-scope .woque-st__title { font-size: 21px; }
  .woque.woque-scope .woque-st__body { padding: 20px 22px 22px; }
  .woque.woque-scope .woque-tk { padding: 16px 18px; }
  .woque.woque-scope .woque-tk__buttons { justify-content: flex-start; }
  .woque.woque-scope .woque-tk__buttons button { flex: 0 0 auto; }
  .woque.woque-scope .woque-st .woque-reflect__submit { align-self: flex-start; padding: 0 26px; min-height: 52px; }
  .woque.woque-scope .woque-st .woque-module__note, .woque.woque-scope .woque-st .woque-module__done, .woque.woque-scope .woque-st .woque-reflect { margin-top: 0; }
}

/* Programs list (same layout as the Events design) */
.woque.woque-scope .woque-list__empty .woque-link { display: flex; min-height: 44px; align-items: center; }
.woque.woque-scope .woque-progs { display: flex; flex-direction: column; gap: 12px; }
.woque.woque-scope .woque-prog { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-prog__top { display: flex; align-items: center; gap: 14px; }
.woque.woque-scope .woque-prog__date { flex: none; width: 64px; padding: 8px 0; border-radius: 12px; background: var(--plum); color: #fff; text-align: center; }
.woque.woque-scope .woque-prog__date strong { display: block; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 24px; line-height: 1; }
.woque.woque-scope .woque-prog__date span { font-size: 13px; font-weight: 700; color: var(--gold); text-transform: uppercase; }
.woque.woque-scope .woque-prog__names { display: flex; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-prog__names strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 20px; line-height: 1.2; }
.woque.woque-scope .woque-prog__names span, .woque.woque-scope .woque-prog__meta { font-size: 14px; color: var(--muted); }
@media (min-width: 900px) {
  .woque.woque-scope .woque-progs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .woque.woque-scope .woque-prog { padding: 24px; border-radius: 18px; }
  .woque.woque-scope .woque-prog .woque-outline { margin-top: auto; }
}
.woque.woque-scope .woque-as__about { margin-top: -6px; font-size: 14px; color: var(--muted); }

/* One event */
.woque.woque-scope .woque-list__back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px; font-weight: 600; font-size: 15px; }
.woque.woque-scope .woque-event { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.woque.woque-scope .woque-event h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.woque.woque-scope .woque-event__facts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.woque.woque-scope .woque-event__facts > div { display: flex; flex-direction: column; }
.woque.woque-scope .woque-event__facts dt { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-event__facts dd { margin: 0; font-weight: 700; }
.woque.woque-scope .woque-prog__names strong { overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-list--narrow { max-width: 760px; }
  .woque.woque-scope .woque-list__back { margin-bottom: 0; }
  .woque.woque-scope .woque-event { padding: 28px; gap: 20px; }
  .woque.woque-scope .woque-event h1 { font-size: 34px; }
  .woque.woque-scope .woque-event__cta { align-self: flex-start; padding: 0 28px; }
}

/* Library and Stories (same list layout as Events) */
.woque.woque-scope .woque-pills--scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 2px; }
.woque.woque-scope .woque-pills--scroll .woque-pill { flex: none; white-space: nowrap; }
.woque.woque-scope .woque-list__bar { display: flex; flex-direction: column; gap: 12px; }
.woque.woque-scope .woque-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.woque.woque-scope a.woque-item:hover { border-color: var(--magenta); color: var(--ink); }
.woque.woque-scope .woque-item__thumb { flex: none; width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }
.woque.woque-scope .woque-item__thumb--none { display: flex; align-items: center; justify-content: center; background: var(--lilac); color: var(--plum); font-size: 15px; font-weight: 700; }
.woque.woque-scope .woque-item__thumb--none svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woque.woque-scope .woque-item__text > strong, .woque.woque-scope .woque-item__title { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.woque.woque-scope a.woque-item__title:hover { color: var(--magenta); }
.woque.woque-scope .woque-item__text > span { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-item__text form { margin: 0; }
.woque.woque-scope .woque-pager { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-pager .woque-outline { padding: 0 18px; }
.woque.woque-scope .woque-event > h2 { font-size: 22px; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-pills--scroll { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .woque.woque-scope .woque-list__bar { flex-direction: row; justify-content: space-between; align-items: center; }
  .woque.woque-scope .woque-list__cta { padding: 0 24px; }
  .woque.woque-scope .woque-item { padding: 20px; border-radius: 18px; }
  .woque.woque-scope .woque-event .woque-as__submit { align-self: flex-start; }
}

/* ==========================================================================
   First screens and onboarding, matching the design canvas.
   Phone values first; the PC layout starts at 900px.
   ========================================================================== */

/* Top bar before onboarding is finished */
.woque.woque-scope .woque-top--pc { display: none; }
.woque.woque-scope .woque-top .woque-top__out { display: none; }
.woque.woque-scope .woque-out { align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--magenta); font-weight: 600; font-size: 15px; text-decoration: none; }

/* Registration Complete */
.woque.woque-scope .woque-reg { box-sizing: border-box; min-height: 100vh; line-height: 1.45; max-width: 560px; margin: 0 auto; padding: 40px 24px 32px; display: flex; flex-direction: column; gap: 12px; color: #3E2A45; }
.woque.woque-scope .woque-reg__head { order: 1; display: flex; flex-direction: column; gap: 12px; }
.woque.woque-scope .woque-reg__head h1 { margin: 10px 0 !important; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.woque.woque-scope .woque-reg__thanks { font-weight: 600; color: var(--ink); }
.woque.woque-scope .woque-reg__card { display: contents; }
.woque.woque-scope .woque-reg__will { order: 2; display: flex; flex-direction: column; gap: 12px; }
.woque.woque-scope .woque-reg__will h2 { font: 400 16px/1.5 'Figtree', sans-serif; letter-spacing: normal; color: inherit; }
.woque.woque-scope .woque-reg .woque-bullets { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-reg .woque-bullets li { margin: 0; }
.woque.woque-scope .woque-reg__more { order: 3; display: flex; flex-direction: column; gap: 12px; }
.woque.woque-scope .woque-reg__go { order: 4; margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-tick--reg { width: 60px; height: 60px; background: #E3F3EC; }
.woque.woque-scope .woque-tick--reg svg { width: 30px; height: 30px; stroke: #1B6E4D; stroke-width: 2.4; }
.woque.woque-scope .woque-btn--start { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.woque.woque-scope .woque-btn--start:hover { background: var(--magenta-dark); border-color: var(--magenta-dark); color: #fff; }

/* My WOQUE before onboarding is finished */
.woque.woque-scope .woque-first { max-width: 560px; margin: 0 auto; padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 20px; }
.woque.woque-scope .woque-first > h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-next { padding: 24px; border-radius: 20px; background: var(--plum); color: #fff; display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-next__text { display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-next .woque-eyebrow { color: var(--gold); }
.woque.woque-scope .woque-next h2 { font-size: 26px; line-height: 1.1; }
.woque.woque-scope .woque-next p { color: #E4D3E9; }
.woque.woque-scope .woque-next .woque-btn { min-height: 54px; }
.woque.woque-scope .woque-next--back { gap: 16px; }
.woque.woque-scope .woque-next--back .woque-next__text { gap: 16px; }
.woque.woque-scope .woque-next--back h1 { font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.woque.woque-scope .woque-next--back .woque-next__go { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-next__count { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; font-weight: 600; }
.woque.woque-scope .woque-next__count strong { font-weight: 600; color: var(--gold); }
.woque.woque-scope .woque-next .woque-bar, .woque.woque-scope .woque-next .woque-bar > span { height: 8px; border-radius: 4px; }
.woque.woque-scope .woque-next .woque-next__then { font-size: 14px; }
.woque.woque-scope .woque-next--back .woque-btn { margin-top: 8px; }
.woque.woque-scope .woque-locked { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-locked svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-locked p { font-size: 15px; color: var(--muted); }

/* Onboarding */
.woque.woque-scope .woque-onb { max-width: 560px; margin: 0 auto; padding: 20px 20px 32px; display: flex; flex-direction: column; gap: 24px; }
.woque.woque-scope .woque-onb__main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-onb__bar { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-onb__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.woque.woque-scope .woque-onb__step { font-size: 14px; font-weight: 600; }
.woque.woque-scope .woque-onb .woque-saved { color: #1B6E4D; }
.woque.woque-scope .woque-onb .woque-saved.is-saving { color: var(--muted); }
.woque.woque-scope .woque-onb .woque-saved.is-error { color: #7A2A0E; }
.woque.woque-scope .woque-onb .woque-steps > span { height: 8px; border-radius: 4px; }
.woque.woque-scope .woque-onb .woque-steps > span.is-now { background: #E3A9C9; }
.woque.woque-scope .woque-onb__main > h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-onb__form { display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-onb__lead { color: #3E2A45; }
.woque.woque-scope .woque-onb .woque-content { font-size: 16px; color: #3E2A45; }
.woque.woque-scope .woque-act { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.woque.woque-scope .woque-act__title { font-weight: 700; }
.woque.woque-scope .woque-act p { font-size: 15px; color: var(--muted); }
.woque.woque-scope .woque-act .woque-check { align-items: center; }
.woque.woque-scope .woque-act .woque-check input { margin: 0; }
.woque.woque-scope .woque-onb .woque-sections { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.woque.woque-scope .woque-onb .woque-sections__title { padding: 0 0 8px; }
.woque.woque-scope .woque-onb .woque-section { padding: 8px 4px; border-top-color: var(--line); }
.woque.woque-scope .woque-onb a.woque-section:hover { background: transparent; }
.woque.woque-scope .woque-onb .woque-section__title { font-weight: 500; }
.woque.woque-scope .woque-onb .woque-section.is-locked .woque-section__title { color: #8A7A90; }
.woque.woque-scope .woque-onb .woque-section__mark { background: var(--line); color: var(--muted); }
.woque.woque-scope .woque-onb .woque-section__mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-onb .woque-section.is-done .woque-section__mark { background: #1B6E4D; color: #fff; }
.woque.woque-scope .woque-onb .woque-section.is-now .woque-section__mark { background: var(--plum); color: #fff; }

/* Onboarding completed */
.woque.woque-scope .woque-done { position: relative; overflow: hidden; box-sizing: border-box; min-height: calc(100vh - 61px); padding: 40px 24px 32px; display: flex; flex-direction: column; gap: 20px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-done__sun { position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: var(--gold); }
.woque.woque-scope .woque-done__mark { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.woque.woque-scope .woque-done__crown { width: 34px; height: 34px; fill: var(--gold); stroke: var(--plum); stroke-width: 1.2; stroke-linejoin: round; }
.woque.woque-scope .woque-done__tick { display: none; width: 40px; height: 40px; fill: none; stroke: var(--plum); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-done h1 { position: relative; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; }
.woque.woque-scope .woque-done__text { position: relative; display: flex; flex-direction: column; gap: 12px; font-size: 17px; color: #E4D3E9; }
.woque.woque-scope .woque-done__text p:first-child { font-weight: 700; color: #fff; }
.woque.woque-scope .woque-done__go { position: relative; margin-top: auto; }
.woque.woque-scope .woque-done .woque-btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.woque.woque-scope .woque-done .woque-btn:hover { background: #E0A526; border-color: #E0A526; color: var(--ink); }

@media (min-width: 900px) {
  .woque.woque-scope .woque-top--pc { display: block; }
  .woque.woque-scope .woque-top .woque-top__out { display: inline-flex; }
  .woque.woque-scope .woque-out { display: none; }

  .woque.woque-scope .woque-reg { min-height: 0; max-width: 1040px; padding: 40px 32px 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; row-gap: 20px; align-items: start; color: var(--ink); }
  .woque.woque-scope .woque-reg__head { grid-column: 1; grid-row: 1; gap: 20px; }
  .woque.woque-scope .woque-reg__head h1 { margin: 0 !important; font-size: 40px; }
  .woque.woque-scope .woque-reg__thanks { font-weight: 400; }
  .woque.woque-scope .woque-reg__thanks, .woque.woque-scope .woque-reg__next { font-size: 18px; }
  .woque.woque-scope .woque-reg__more { grid-column: 1; grid-row: 2; gap: 20px; }
  .woque.woque-scope .woque-reg__card { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
  .woque.woque-scope .woque-reg__will { gap: 14px; }
  .woque.woque-scope .woque-reg__will h2 { font: 700 22px/1.2 'Bricolage Grotesque', 'Figtree', sans-serif; }
  .woque.woque-scope .woque-reg__go { margin-top: 8px; padding-top: 0; }
  .woque.woque-scope .woque-tick--reg { width: 80px; height: 80px; background: var(--gold); }
  .woque.woque-scope .woque-tick--reg svg { width: 40px; height: 40px; stroke: var(--plum); stroke-width: 2.6; }
  .woque.woque-scope .woque-btn--start, .woque.woque-scope .woque-btn--start:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
  .woque.woque-scope .woque-btn--start:hover { background: #E0A526; border-color: #E0A526; }

  .woque.woque-scope .woque-first { max-width: 960px; padding: 40px 32px 56px; gap: 24px; }
  .woque.woque-scope .woque-first > h1 { font-size: 40px; line-height: 1.05; }
  .woque.woque-scope .woque-next { padding: 32px; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .woque.woque-scope .woque-next__text { gap: 10px; max-width: 560px; }
  .woque.woque-scope .woque-next h2 { font-size: 28px; line-height: 1.2; }
  .woque.woque-scope .woque-next__go { flex: none; }
  .woque.woque-scope .woque-next .woque-btn { min-height: 60px; width: auto; padding: 0 28px; }
  .woque.woque-scope .woque-reg .woque-btn, .woque.woque-scope .woque-onb__form > .woque-btn, .woque.woque-scope .woque-done .woque-btn { min-height: 60px; }
  .woque.woque-scope .woque-next--back { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
  .woque.woque-scope .woque-next--back .woque-next__text { gap: 12px; max-width: none; }
  .woque.woque-scope .woque-next--back h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; }
  .woque.woque-scope .woque-next--back .woque-next__text p { font-size: 18px; }
  .woque.woque-scope .woque-next--back .woque-next__go { gap: 10px; }
  .woque.woque-scope .woque-next__count { font-size: 16px; font-weight: 400; }
  .woque.woque-scope .woque-next__count strong { font-weight: 700; color: #fff; }
  .woque.woque-scope .woque-next .woque-bar, .woque.woque-scope .woque-next .woque-bar > span { height: 10px; border-radius: 5px; }
  .woque.woque-scope .woque-next .woque-next__then { font-size: 16px; }
  .woque.woque-scope .woque-next--back .woque-btn { width: 100%; margin-top: 6px; }
  .woque.woque-scope .woque-locked { gap: 12px; padding: 20px 24px; border: 0; border-radius: 18px; background: var(--lilac); }
  .woque.woque-scope .woque-locked svg { width: 22px; height: 22px; margin-top: 1px; stroke: var(--plum); }
  .woque.woque-scope .woque-locked p { font-size: 16px; color: #3E2A45; }

  .woque.woque-scope .woque-onb { max-width: 1160px; padding: 40px 32px 56px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
  .woque.woque-scope .woque-onb__main { grid-column: 2; grid-row: 1; gap: 20px; }
  .woque.woque-scope .woque-onb__step { font-weight: 400; color: var(--muted); }
  .woque.woque-scope .woque-onb .woque-saved { color: #14553B; }
  .woque.woque-scope .woque-onb .woque-steps > span { height: 6px; border-radius: 3px; }
  .woque.woque-scope .woque-onb .woque-steps > span.is-now { background: var(--gold); }
  .woque.woque-scope .woque-onb__main > h1 { font-size: 40px; line-height: 1.05; }
  .woque.woque-scope .woque-onb__form { gap: 20px; }
  .woque.woque-scope .woque-onb__form .woque-field { max-width: 560px; }
  .woque.woque-scope .woque-onb__lead, .woque.woque-scope .woque-onb .woque-content { color: var(--ink); }
  .woque.woque-scope .woque-onb .woque-content { font-size: 17px; }
  .woque.woque-scope .woque-act { padding: 24px; border-radius: 18px; }
  .woque.woque-scope .woque-act__title { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); }
  .woque.woque-scope .woque-act p { font-size: 16px; color: var(--ink); }
  .woque.woque-scope .woque-onb__form > .woque-btn { width: auto; align-self: flex-start; padding: 0 28px; }
  .woque.woque-scope .woque-onb .woque-sections { grid-column: 1; grid-row: 1; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
  .woque.woque-scope .woque-onb .woque-sections__title { padding: 14px 18px; }
  .woque.woque-scope .woque-onb .woque-section { min-height: 68px; padding: 8px 18px; border-top-color: var(--line-soft); }
  .woque.woque-scope .woque-onb a.woque-section:hover { background: var(--paper); }
  .woque.woque-scope .woque-onb .woque-section__title { font-weight: 600; }
  .woque.woque-scope .woque-onb .woque-section.is-locked .woque-section__title { color: #8C7A93; }
  .woque.woque-scope .woque-onb .woque-section__mark { background: var(--lilac); color: var(--plum); }
  .woque.woque-scope .woque-onb .woque-section.is-done .woque-section__mark { background: #E3F3EC; color: #14553B; }
  .woque.woque-scope .woque-onb .woque-section.is-now .woque-section__mark { background: var(--gold); color: var(--ink); }

  .woque.woque-scope .woque-done { overflow: visible; min-height: 0; max-width: 960px; margin: 0 auto; padding: 80px 32px 96px; align-items: center; text-align: center; gap: 22px; background: transparent; color: var(--ink); }
  .woque.woque-scope .woque-done__sun, .woque.woque-scope .woque-done__crown { display: none; }
  .woque.woque-scope .woque-done__mark { width: 80px; height: 80px; background: var(--gold); }
  .woque.woque-scope .woque-done__tick { display: block; }
  .woque.woque-scope .woque-done h1 { max-width: 640px; font-size: 48px; }
  .woque.woque-scope .woque-done__text { max-width: 560px; gap: 10px; font-size: 18px; color: var(--ink); }
  .woque.woque-scope .woque-done__text p:first-child { font-weight: 400; color: var(--ink); }
  .woque.woque-scope .woque-done__go { margin-top: 0; }
  .woque.woque-scope .woque-done .woque-btn, .woque.woque-scope .woque-done .woque-btn:hover { width: auto; padding: 0 28px; background: var(--magenta); border-color: var(--magenta); color: #fff; }
  .woque.woque-scope .woque-done .woque-btn:hover { background: var(--magenta-dark); border-color: var(--magenta-dark); }
}

/* Stories: her own story stands out, and each card can carry tags and actions */
.woque.woque-scope .woque-item.is-mine { border: 2px solid var(--magenta); background: #FDF3F8; padding: 15px; }
.woque.woque-scope .woque-item.is-mine .woque-item__thumb { background: var(--plum); color: var(--gold); }
.woque.woque-scope .woque-tag--mine { background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-item__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.woque.woque-scope .woque-item__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.woque.woque-scope .woque-item__acts form { margin: 0; }
.woque.woque-scope .woque-pills--sub .woque-pill { min-height: 40px; padding: 0 14px; border-color: var(--line); font-size: 14px; }
.woque.woque-scope .woque-pills--sub .woque-pill.is-active { border-color: var(--plum); }
.woque.woque-scope .woque-event > .woque-outline { align-self: flex-start; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-item.is-mine { padding: 19px; }
}

/* Text written in the editor (focus area descriptions): paragraphs, lists and links inside a small block */
.woque.woque-scope .woque-rich > * + * { margin-top: 8px; }
.woque.woque-scope .woque-rich ul { list-style: disc; padding-left: 20px; }
.woque.woque-scope .woque-rich ol { list-style: decimal; padding-left: 20px; }
.woque.woque-scope .woque-rich li { margin: 2px 0; }
.woque.woque-scope .woque-rich img { max-width: 100%; height: auto; border-radius: 10px; }
.woque.woque-scope .woque-cp__aboutname { display: block; }

/* Front door: always exactly one screen, on any device, with nothing to scroll.
   "svh" is the height of the screen with the browser's own bars showing, so the buttons are never under them.
   The gold circle sits in the top-right corner and shrinks on short screens, so the words always sit on plum. */
.woque.woque-scope:has(> .woque-door) { min-height: 100vh; min-height: 100svh; }
.woque.woque-scope .woque-door { --sun: clamp(96px, 26vh, 200px); min-height: 100vh; min-height: 100svh; }
.woque.woque-scope .woque-door__in { min-height: 100vh; min-height: 100svh; padding: clamp(18px, 4vh, 36px) 24px clamp(18px, 4vh, 32px); gap: 16px; }
.woque.woque-scope .woque-door__sun { width: var(--sun); height: var(--sun); top: calc(var(--sun) * -0.22); right: calc(var(--sun) * -0.2); }
.woque.woque-scope .woque-door__ring { width: calc(var(--sun) * 2.1); height: calc(var(--sun) * 2.1); top: calc(var(--sun) * -0.77); right: calc(var(--sun) * -0.75); border-width: calc(var(--sun) * 0.28); }
.woque.woque-scope .woque-door__body { position: relative; z-index: 1; gap: clamp(14px, 3.2vh, 28px); }
.woque.woque-scope .woque-door h1 { font-size: clamp(30px, 6.4vh, 46px); }
.woque.woque-scope .woque-door__lead { font-size: clamp(15px, 2.6vh, 18px); }
.woque.woque-scope .woque-door .woque-btn { min-height: clamp(46px, 7.4vh, 56px); }
/* A very short screen (a phone held sideways): the two buttons go side by side. */
@media (max-height: 480px) {
  .woque.woque-scope .woque-door__body { max-width: none; }
  .woque.woque-scope .woque-door__lead { max-width: 60%; }
  .woque.woque-scope .woque-door__body > div:last-child { flex-direction: row !important; }
  .woque.woque-scope .woque-door__body > div:last-child > * { flex: 1 1 0; }
}
@media (min-width: 900px) {
  .woque.woque-scope .woque-door { --sun: clamp(150px, 34vh, 260px); }
  .woque.woque-scope .woque-door__in { padding: clamp(24px, 5vh, 48px) 40px; gap: clamp(28px, 11vh, 96px); }
  .woque.woque-scope .woque-door__sun { top: clamp(90px, 30vh, 270px); right: 14%; }
  .woque.woque-scope .woque-door__ring { top: calc(clamp(90px, 30vh, 270px) - var(--sun) * 0.58); right: calc(14% - var(--sun) * 0.58); width: calc(var(--sun) * 2.16); height: calc(var(--sun) * 2.16); border-width: calc(var(--sun) * 0.28); }
  .woque.woque-scope .woque-door__body { max-width: 420px; }
  .woque.woque-scope .woque-door__lead { max-width: 400px; }
  .woque.woque-scope .woque-door h1 { font-size: clamp(40px, 9vh, 72px); }
  .woque.woque-scope .woque-door__lead { font-size: clamp(16px, 2.8vh, 20px); }
  /* The words and buttons sit in the middle of the screen, level with the gold circle; the logo stays at the top.
     The empty block after them is as tall as the logo, so "the middle" is the middle of the whole screen. */
  .woque.woque-scope .woque-door .woque-brand { min-height: 44px; }
  .woque.woque-scope .woque-door__body { margin-block: auto; }
  .woque.woque-scope .woque-door__in::after { content: ''; flex: none; height: 44px; }
  .woque.woque-scope .woque-door__sun { top: calc(50% - var(--sun) / 2); }
  .woque.woque-scope .woque-door__ring { top: calc(50% - var(--sun) * 1.08); }
}

/* A member form being saved without a page reload */
.woque.woque-scope.is-busy { cursor: progress; }
.woque.woque-scope.is-busy form, .woque.woque-scope.is-busy a { pointer-events: none; }
.woque.woque-scope.is-busy form { opacity: 0.6; }

/* News: each label has its own colour. The pinned item comes first and spans the row. */
.woque.woque-scope .woque-news { border-left-width: 5px; }
.woque.woque-scope .woque-news__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 4px; }
.woque.woque-scope .woque-news__label { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.woque.woque-scope .woque-news.is-pinned { grid-column: 1 / -1; }
.woque.woque-scope .woque-news--info { border-left-color: #B79FBF; }
.woque.woque-scope .woque-news--info .woque-news__label { background: #F1E7F4; color: #2E0F38; }
.woque.woque-scope .woque-news--info.is-pinned { background: #F1E7F4; border-color: #B79FBF; }
.woque.woque-scope .woque-news--info.is-pinned .woque-news__label { background: #2E0F38; color: #FFFFFF; }
.woque.woque-scope .woque-news--announce { border-left-color: #2E0F38; }
.woque.woque-scope .woque-news--announce .woque-news__label { background: #2E0F38; color: #FFFFFF; }
.woque.woque-scope .woque-news--announce.is-pinned { background: #F1E7F4; border-color: #2E0F38; }
.woque.woque-scope .woque-news--announce.is-pinned .woque-news__label { background: #2E0F38; color: #FFFFFF; }
.woque.woque-scope .woque-news--event { border-left-color: #F2B632; }
.woque.woque-scope .woque-news--event .woque-news__label { background: #FCEFCB; color: #3F2B00; }
.woque.woque-scope .woque-news--event.is-pinned { background: #FCEFCB; border-color: #F2B632; }
.woque.woque-scope .woque-news--event.is-pinned .woque-news__label { background: #F2B632; color: #24102B; }
.woque.woque-scope .woque-news--reminder { border-left-color: #E08A2E; }
.woque.woque-scope .woque-news--reminder .woque-news__label { background: #FFE9D6; color: #6B3200; }
.woque.woque-scope .woque-news--reminder.is-pinned { background: #FFE9D6; border-color: #E08A2E; }
.woque.woque-scope .woque-news--reminder.is-pinned .woque-news__label { background: #E08A2E; color: #FFFFFF; }
.woque.woque-scope .woque-news--urgent { border-left-color: #C8452F; }
.woque.woque-scope .woque-news--urgent .woque-news__label { background: #FBE0DA; color: #7A1B0E; }
.woque.woque-scope .woque-news--urgent.is-pinned { background: #FBE0DA; border-color: #C8452F; }
.woque.woque-scope .woque-news--urgent.is-pinned .woque-news__label { background: #C8452F; color: #FFFFFF; }
.woque.woque-scope .woque-news--praise { border-left-color: #1B6E4D; }
.woque.woque-scope .woque-news--praise .woque-news__label { background: #E3F3EC; color: #14553B; }
.woque.woque-scope .woque-news--praise.is-pinned { background: #E3F3EC; border-color: #1B6E4D; }
.woque.woque-scope .woque-news--praise.is-pinned .woque-news__label { background: #1B6E4D; color: #FFFFFF; }
.woque.woque-scope .woque-news.is-pinned .woque-news__text, .woque.woque-scope .woque-news.is-pinned .woque-news__date { color: #3E2A45; }

/* Course suggestions: why a course is suggested, the archive button, the course overview */
.woque.woque-scope .woque-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.woque.woque-scope .woque-iconbtn:hover { background: var(--lilac); color: var(--plum); }
.woque.woque-scope .woque-iconbtn svg, .woque.woque-scope .woque-suggestlink svg, .woque.woque-scope .woque-sechead__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-reco__top, .woque.woque-scope .woque-course__why { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px -8px -4px 0; }
.woque.woque-scope .woque-reco__top form, .woque.woque-scope .woque-course__why form { margin: 0; }
.woque.woque-scope .woque-course__why > span { padding: 4px 10px; border-radius: 999px; background: var(--plum); color: #fff; font-size: 12px; font-weight: 700; }
.woque.woque-scope .woque-suggestlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--magenta); font-weight: 700; font-size: 15px; text-decoration: none; }
.woque.woque-scope .woque-course__why > span.is-archived { background: var(--lilac); color: var(--plum); }
.woque.woque-scope .woque-course[hidden] { display: none; }
.woque.woque-scope .woque-sechead h2 { display: flex; align-items: center; gap: 4px; }
.woque.woque-scope .woque-sechead .woque-sechead__icon { min-height: 40px; width: 40px; padding: 0; justify-content: center; color: var(--muted); border-radius: 10px; }
.woque.woque-scope .woque-sechead .woque-sechead__icon:hover { background: var(--lilac); color: var(--plum); }
.woque.woque-scope .woque-over { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 20px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-over__head { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-over__kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.woque.woque-scope .woque-over__head h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.woque.woque-scope .woque-over__head p { color: #E4D3E9; }
.woque.woque-scope .woque-over__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 14px 0; border-top: 1px solid #4D2260; border-bottom: 1px solid #4D2260; }
.woque.woque-scope .woque-over__facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woque.woque-scope .woque-over__facts dt { font-size: 13px; color: #CDB8D4; }
.woque.woque-scope .woque-over__facts dd { margin: 0; font-weight: 700; font-size: 15px; }
.woque.woque-scope .woque-over .woque-as__submit { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.woque.woque-scope .woque-over__note { padding: 14px 16px; border-radius: 12px; background: #431955; color: #E4D3E9; font-size: 15px; }
.woque.woque-scope .woque-over__part { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-over__steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.woque.woque-scope .woque-over__steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.woque.woque-scope .woque-over__steps li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-over__steps small { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-over__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lilac); color: var(--plum); font-weight: 700; font-size: 14px; }
.woque.woque-scope .woque-over__areas { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-over { padding: 32px; gap: 22px; }
  .woque.woque-scope .woque-over__head h1 { font-size: 40px; }
  .woque.woque-scope .woque-over .woque-as__submit { width: auto; align-self: flex-start; padding: 0 32px; }
}

/* ---- Must-reads: shaped like onboarding; one step is a single centred page ---- */
.woque.woque-scope .woque-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.woque.woque-scope .woque-must__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-must .woque-onb__row { flex-wrap: wrap; gap: 4px 16px; }
.woque.woque-scope .woque-must .woque-onb__main > h1 { overflow-wrap: anywhere; }
.woque.woque-scope .woque-must span.woque-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.woque.woque-scope .woque-must__out { align-self: center; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-must--single { display: flex; flex-direction: column; max-width: 760px; }
  .woque.woque-scope .woque-must--single .woque-onb__main { grid-column: auto; grid-row: auto; }
}

/* ---- News and info: the tab counts what is new and pulses until she has opened it ---- */
.woque.woque-scope .woque-hubtabs a { gap: 8px; }
/* Three tabs on a phone: a little tighter so they fit side by side; the row still scrolls if they cannot. */
@media (max-width: 899px) {
  .woque.woque-scope .woque-hubtabs { gap: 6px; }
  .woque.woque-scope .woque-hubtabs a { flex: 1 0 auto; justify-content: center; gap: 6px; padding: 0 10px; font-size: 14px; }
}
@media (max-width: 380px) {
  .woque.woque-scope .woque-hubtabs { gap: 4px; }
  .woque.woque-scope .woque-hubtabs a { gap: 4px; padding: 0 8px; font-size: 13px; }
  .woque.woque-scope .woque-hubtabs__count { min-width: 20px; height: 20px; padding: 0 5px; }
}
/* The tab row scrolls sideways on a phone. Its scrollbar stays hidden until she uses the row (hover, focus,
   touch or scroll; woque-hub.js adds .is-engaged while she scrolls). The 10px under the tabs is shared with the
   6px bar: padding drops to 4px when it shows, so the row never changes height. Wide screens wrap instead. */
@media (max-width: 899px) {
  .woque.woque-scope .woque-hubtabs { padding-bottom: 10px; scrollbar-width: none; }
  .woque.woque-scope .woque-hubtabs::-webkit-scrollbar { height: 0; background: transparent; }
  .woque.woque-scope .woque-hubtabs:hover,
  .woque.woque-scope .woque-hubtabs:focus-within,
  .woque.woque-scope .woque-hubtabs.is-engaged { padding-bottom: 4px; scrollbar-width: auto; }
  .woque.woque-scope .woque-hubtabs:hover::-webkit-scrollbar,
  .woque.woque-scope .woque-hubtabs:focus-within::-webkit-scrollbar,
  .woque.woque-scope .woque-hubtabs.is-engaged::-webkit-scrollbar { height: 6px; }
  .woque.woque-scope .woque-hubtabs::-webkit-scrollbar-track { background: transparent; }
  .woque.woque-scope .woque-hubtabs::-webkit-scrollbar-thumb { background: rgba(46, 15, 56, 0.25); border-radius: 3px; }
  @supports (-moz-appearance: none) {
    .woque.woque-scope .woque-hubtabs:hover,
    .woque.woque-scope .woque-hubtabs:focus-within,
    .woque.woque-scope .woque-hubtabs.is-engaged { scrollbar-width: thin; scrollbar-color: rgba(46, 15, 56, 0.25) transparent; padding-bottom: 2px; }
  }
}
.woque.woque-scope .woque-hubtabs__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.woque.woque-scope .woque-hubtabs__count[hidden] { display: none; }
.woque.woque-scope .woque-hubtabs a[aria-selected="true"] .woque-hubtabs__count { background: var(--gold); color: var(--ink); }
.woque.woque-scope .woque-hubtabs a.has-new .woque-hubtabs__count { animation: woque-blink 1.4s ease-in-out infinite; }
@keyframes woque-blink {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(176, 30, 110, 0.55); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(176, 30, 110, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .woque.woque-scope .woque-hubtabs a.has-new .woque-hubtabs__count { animation: none; }
}
.woque.woque-scope .woque-news.is-new { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
.woque.woque-scope .woque-news__new { padding: 3px 9px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.woque.woque-scope .woque-news__top .woque-news__date { margin-left: auto; }
.woque.woque-scope .woque-news__act { margin-top: 10px; }
.woque.woque-scope .woque-news__btn { width: 100%; }
.woque.woque-scope .woque-news__done { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; color: #14553B; }
.woque.woque-scope .woque-news__done svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-news__btn { width: auto; display: inline-flex; padding: 0 22px; }
}

/* ---- Notifications now sit at the top of News and info: colour and icon only, no label word ---- */
.woque.woque-scope .woque-notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.woque.woque-scope .woque-note__when { order: 3; grid-column: 1 / -1; }
.woque.woque-scope .woque-note.is-unread { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
@media (min-width: 900px) {
  .woque.woque-scope .woque-note__when { grid-column: 2; }
}

/* ---- Text written in the editor (onboarding, must-reads, course steps, tasks, library, focus areas) ----
   One set of spacing and sizes, whatever was pasted in. !important is used on purpose here: pasted text and
   the theme both bring their own margins, fonts and sizes, and none of them may win inside WOQUE. */
.woque.woque-scope .woque-content, .woque.woque-scope .woque-rich { line-height: 1.55; overflow-wrap: anywhere; }
.woque.woque-scope :is(.woque-content, .woque-rich) :is(p, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, figure, div, span, b, strong, em, i, u, a) {
  margin: 0 !important; font-family: inherit !important; line-height: inherit !important; letter-spacing: normal !important; text-indent: 0 !important; background: none !important; white-space: normal !important;
}
.woque.woque-scope :is(.woque-content, .woque-rich) :is(p, li, span, div, b, strong, em, i, u, a) { font-size: inherit !important; color: inherit !important; padding: 0 !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) a { color: var(--magenta) !important; text-decoration: underline; }
/* Named elements, so these outrank the margin reset above. */
.woque.woque-scope .woque-content > * + :is(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, figure, div, table, pre, hr) { margin-top: 14px !important; }
.woque.woque-scope .woque-rich > * + :is(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, figure, div, table, pre, hr) { margin-top: 8px !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) :is(h1, h2, h3, h4, h5, h6) { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--ink) !important; padding: 0 !important; text-transform: none; }
.woque.woque-scope :is(.woque-content, .woque-rich) :is(h1, h2, h3, h4, h5, h6) * { font-weight: inherit !important; font-family: inherit !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) :is(h1, h2) { font-size: 22px !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) h3 { font-size: 19px !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) :is(h4, h5, h6) { font-size: 17px !important; }
.woque.woque-scope .woque-content > * + :is(h1, h2, h3, h4, h5, h6) { margin-top: 26px !important; }
.woque.woque-scope .woque-content > :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, figure, div, table, pre, hr) { margin-top: 8px !important; }
.woque.woque-scope .woque-rich :is(h1, h2, h3, h4, h5, h6) { font-size: 16px !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) :is(ul, ol) { padding: 0 0 0 22px !important; list-style-position: outside !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) ul { list-style-type: disc !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) ol { list-style-type: decimal !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) li { display: list-item !important; padding: 0 0 0 4px !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) li + li { margin-top: 6px !important; }
.woque.woque-scope .woque-rich li + li { margin-top: 3px !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) li > :is(p, div) + :is(p, div) { margin-top: 6px !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) li > :is(ul, ol) { margin-top: 6px !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) blockquote { padding: 2px 0 2px 16px !important; border-left: 3px solid var(--line); color: var(--muted); }
.woque.woque-scope :is(.woque-content, .woque-rich) :is(b, strong) { font-weight: 700; }
.woque.woque-scope :is(.woque-content, .woque-rich) p:empty { display: none; }
.woque.woque-scope :is(.woque-content, .woque-rich) img { height: auto; }

/* Emoji: WordPress may swap an emoji for a small picture. It must sit in the line like a letter,
   never as a full-width image. The theme's own rule for this is not loaded on WOQUE screens. */
.woque.woque-scope img.emoji, .woque.woque-scope img.wp-smiley {
  display: inline !important; width: 1em !important; height: 1em !important; max-width: none !important; margin: 0 0.07em !important; padding: 0 !important;
  vertical-align: -0.1em !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important;
}
.woque.woque-scope :is(.woque-content, .woque-rich) hr { height: 0; border: 0; border-top: 1px solid var(--line); margin: 22px 0 !important; }
.woque.woque-scope :is(.woque-content, .woque-rich) :is(del, s) { text-decoration: line-through; }

/* ---- Questions on an onboarding section or a must-read step ---- */
.woque.woque-scope .woque-quiz { display: flex; flex-direction: column; gap: 16px; }
.woque.woque-scope .woque-quiz .woque-alert { margin: 0; }
.woque.woque-scope .woque-quiz__q { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.woque.woque-scope .woque-quiz__q legend { float: left; width: 100%; padding: 0; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ink); }
.woque.woque-scope .woque-quiz__how { clear: both; font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-quiz__o { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1px solid #CDBDD3; border-radius: 12px; background: #fff; cursor: pointer; }
.woque.woque-scope .woque-quiz__o input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--magenta); cursor: pointer; }
.woque.woque-scope .woque-quiz__o span { flex: 1 1 0; min-width: 0; font-size: 16px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.woque.woque-scope .woque-quiz__o:has(input:checked) { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
.woque.woque-scope .woque-quiz__o:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.woque.woque-scope .woque-quiz__o:has(input:disabled) { cursor: default; opacity: 0.75; }
.woque.woque-scope .woque-quiz__q.is-right { border-color: #1B6E4D; background: #F1FAF5; }
.woque.woque-scope .woque-quiz__q.is-wrong { border-color: #C8452F; background: #FDF3F0; }
.woque.woque-scope .woque-quiz .woque-quiz__note { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0 !important; font-size: 15px; font-weight: 600; }
.woque.woque-scope .woque-quiz .woque-quiz__note--right { color: #14553B; }
.woque.woque-scope .woque-quiz .woque-quiz__note--wrong { display: block; color: #7A1B0E; }
.woque.woque-scope .woque-quiz__note--wrong a { color: inherit; text-decoration: underline; }
.woque.woque-scope .woque-quiz__note svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Course cards with a picture ---- */
.woque.woque-scope .woque-cimg { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lilac); }
.woque.woque-scope .woque-cimg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
/* No picture chosen: a WOQUE-coloured panel with the crown, one of four so a page of cards is not all the same. */
.woque.woque-scope .woque-cimg.is-empty { display: flex; align-items: center; justify-content: center; }
.woque.woque-scope .woque-cimg.is-empty svg { width: 30%; max-width: 96px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; opacity: 0.55; }
.woque.woque-scope .woque-cimg--1.is-empty { background: linear-gradient(135deg, #2E0F38 0%, #6B1F5C 100%); color: #F2B632; }
.woque.woque-scope .woque-cimg--2.is-empty { background: linear-gradient(135deg, #A3155F 0%, #D4558F 100%); color: #FFFFFF; }
.woque.woque-scope .woque-cimg--3.is-empty { background: linear-gradient(135deg, #F2B632 0%, #F7D37A 100%); color: #2E0F38; }
.woque.woque-scope .woque-cimg--4.is-empty { background: linear-gradient(135deg, #431955 0%, #A3155F 100%); color: #F7D37A; }

.woque.woque-scope .woque-course { padding: 0; gap: 0; overflow: hidden; }
.woque.woque-scope .woque-course__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; min-width: 0; }
.woque.woque-scope .woque-course__body .woque-course__why { margin: -2px -8px -4px 0; }

.woque.woque-scope .woque-reco--pic { padding: 0; gap: 0; overflow: hidden; }
.woque.woque-scope .woque-reco__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; min-width: 0; }
.woque.woque-scope .woque-reco--pic .woque-outline { margin-top: auto; }
/* On a phone the For you cards are a list: a small picture beside the text keeps them short. */
@media (max-width: 899px) {
  .woque.woque-scope .woque-reco--pic { flex-direction: row; align-items: stretch; }
  .woque.woque-scope .woque-reco--pic .woque-cimg { flex: none; width: 104px; aspect-ratio: auto; min-height: 100%; }
  .woque.woque-scope .woque-reco--pic .woque-reco__body { padding: 12px 14px 14px; gap: 8px; }
}

.woque.woque-scope .woque-over { overflow: hidden; }
.woque.woque-scope .woque-over__img { width: auto; margin: -22px -22px 0; aspect-ratio: 21 / 9; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-course__body { gap: 12px; padding: 20px 22px 22px; }
  .woque.woque-scope .woque-course__body > .woque-outline { margin-top: auto; }
  .woque.woque-scope .woque-reco__body { padding: 16px 20px 20px; }
  .woque.woque-scope .woque-over__img { margin: -32px -32px 0; }
}

/* Cards no longer list pace, length and how you join: those are filters, and on the course page. */
.woque.woque-scope .woque-course__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.woque.woque-scope .woque-course__body > .woque-outline { margin-top: auto; }
.woque.woque-scope .woque-reco__meta--about { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Courses on a phone: search and one Filters button; the filters open as a sheet from the bottom ---- */
.woque.woque-scope .woque-catbar { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-catbar__row { display: flex; gap: 8px; }
.woque.woque-scope .woque-catbar__row .woque-cat__search { flex: 1 1 0; min-width: 0; width: auto; }
.woque.woque-scope .woque-filterbtn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 14px; border: 1px solid var(--plum); border-radius: 12px; background: #fff; color: var(--plum); font: 600 15px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-filterbtn[hidden] { display: none; }
.woque.woque-scope .woque-filterbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.woque.woque-scope .woque-filterbtn__n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 12px; font-weight: 700; }
.woque.woque-scope .woque-filterbtn__n[hidden] { display: none; }
.woque.woque-scope .woque-sheet__head, .woque.woque-scope .woque-sheet__foot, .woque.woque-scope .woque-sheetback { display: none; }
html.woque-noscroll, html.woque-noscroll body { overflow: hidden; }
@media (max-width: 899px) {
  .woque.woque-scope .woque-cat.has-sheet .woque-filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 86vh; max-height: 86svh; gap: 16px; padding: 0 20px;
    overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(36, 16, 43, 0.25);
    transform: translateY(105%); visibility: hidden;
  }
  /* The slide is only switched on once the page has settled, so the sheet is never seen sliding away as the page loads. */
  .woque.woque-scope .woque-cat.has-sheet.is-ready .woque-filters { transition: transform 0.22s ease, visibility 0s linear 0.22s; }
  .woque.woque-scope .woque-cat.has-sheet .woque-filters.is-open { transform: none; visibility: visible; }
  .woque.woque-scope .woque-cat.has-sheet.is-ready .woque-filters.is-open { transition: transform 0.22s ease; }
  .woque.woque-scope .woque-cat.has-sheet .woque-sheetback { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(36, 16, 43, 0.45); }
  .woque.woque-scope .woque-cat.has-sheet .woque-sheetback[hidden] { display: none; }
  .woque.woque-scope .woque-cat.has-sheet .woque-sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -20px; padding: 14px 12px 10px 20px; background: #fff; border-bottom: 1px solid var(--line-soft); }
  .woque.woque-scope .woque-cat.has-sheet .woque-sheet__head strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 20px; }
  .woque.woque-scope .woque-cat.has-sheet .woque-sheet__foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 16px; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line-soft); }
  .woque.woque-scope .woque-cat.has-sheet .woque-sheet__foot .woque-btn { flex: 1 1 0; min-height: 50px; }
  /* In the sheet there is room: the choices wrap instead of scrolling sideways. */
  .woque.woque-scope .woque-cat.has-sheet .woque-filters__row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .woque.woque-scope .woque-cat.has-sheet .woque-filter__count { display: inline; font-weight: 500; opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .woque.woque-scope .woque-cat.has-sheet.is-ready .woque-filters, .woque.woque-scope .woque-cat.has-sheet.is-ready .woque-filters.is-open { transition: none; }
}
@media (min-width: 900px) {
  .woque.woque-scope .woque-catbar { display: none; }
}

/* ---- A question before something is done: a centred box on a PC, a sheet from the bottom on a phone ---- */
.woque.woque-scope .woque-dialog { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.woque.woque-scope .woque-dialog[hidden] { display: none; }
.woque.woque-scope .woque-dialog__back { position: absolute; inset: 0; background: rgba(36, 16, 43, 0.5); }
.woque.woque-scope .woque-dialog__box { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; max-height: 90vh; max-height: 90svh; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -12px 40px rgba(36, 16, 43, 0.25); animation: woque-rise 0.2s ease; }
.woque.woque-scope .woque-dialog__box h2 { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.woque.woque-scope .woque-dialog__box h3 { margin: 6px 0 0 !important; font-family: 'Figtree', system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.woque.woque-scope .woque-dialog__box p, .woque.woque-scope .woque-dialog__box li { font-size: 16px; line-height: 1.45; }
.woque.woque-scope .woque-dialog__box ul { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; list-style: disc; }
.woque.woque-scope .woque-dialog__go { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
@keyframes woque-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
  .woque.woque-scope .woque-dialog { align-items: center; padding: 24px; }
  .woque.woque-scope .woque-dialog__box { max-width: 520px; padding: 28px; border-radius: 20px; box-shadow: 0 24px 60px rgba(36, 16, 43, 0.3); }
  .woque.woque-scope .woque-dialog__go { flex-direction: row-reverse; justify-content: flex-start; }
  .woque.woque-scope .woque-dialog__go .woque-btn { width: auto; padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .woque.woque-scope .woque-dialog__box { animation: none; }
}

/* ---- Sign in with Google ---- */
.woque.woque-scope .woque-door__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; color: #E4D3E9; }
.woque.woque-scope .woque-door__alt a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.woque.woque-scope .woque-door__alt a:hover { color: var(--gold); }
@media (max-height: 480px) {
  .woque.woque-scope .woque-door__body > .woque-door__go > .woque-door__alt { flex: 1 1 0; }
}
.woque.woque-scope .woque-btn--google { background: #fff; border-color: var(--plum); color: var(--plum); }
.woque.woque-scope .woque-btn--google:hover { background: var(--lilac); border-color: var(--plum); color: var(--plum); }
.woque.woque-scope .woque-or { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-or::before, .woque.woque-scope .woque-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.woque.woque-scope .woque-choicecard { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-choicecard h2 { font-size: 19px; line-height: 1.2; color: var(--ink); }
.woque.woque-scope .woque-choicecard p { font-size: 15px; color: var(--muted); }
.woque.woque-scope .woque-choicecard .woque-btn, .woque.woque-scope .woque-choicecard .woque-outline { margin-top: 4px; min-height: 50px; text-decoration: none; }

/* ---- Follow-up after onboarding: the WhatsApp button, and "Enter the WOQUE Hub" under it ---- */
.woque.woque-scope .woque-done__go { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-done__later { display: flex; align-items: center; justify-content: center; min-height: 48px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.woque.woque-scope .woque-fucard { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid #F0D48A; border-radius: 16px; background: #FFF8E3; }
.woque.woque-scope .woque-fucard p { font-size: 15px; color: var(--ink); }
.woque.woque-scope .woque-fucard .woque-outline { align-self: flex-start; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-done__go { align-items: center; }
  .woque.woque-scope .woque-done__later { color: var(--magenta); }
  .woque.woque-scope .woque-fucard { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .woque.woque-scope .woque-fucard .woque-outline { flex: none; align-self: center; }
}

/* ---- Onboarding in motion ----
   Each step arrives piece by piece, the progress bar fills to where she is, the tick box and the
   button answer her, and completion is a small celebration. All of it is decoration: nothing is
   hidden if an animation does not run, and it is all switched off for anyone who has asked their
   device for less motion. */
@keyframes woque-rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes woque-slide-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes woque-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes woque-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); } }
@keyframes woque-ring { 0% { box-shadow: 0 0 0 0 rgba(163, 21, 95, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(163, 21, 95, 0); } }
@keyframes woque-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes woque-sun-in { from { transform: translate(60px, -60px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes woque-fall { 0% { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate3d(var(--drift, 0), 105vh, 0) rotate(var(--spin, 540deg)); opacity: 0.9; } }

/* Moving from one hub page to the next is a soft cross-fade where the browser can do it. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* A step arriving: the heading slides in, then each part of the step rises into place. */
  .woque.woque-scope .woque-onb__main { overflow-x: clip; }
  .woque.woque-scope .woque-onb__row { animation: woque-rise-in 0.35s ease-out both; }
  .woque.woque-scope .woque-onb__main > h1 { animation: woque-slide-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both; }
  .woque.woque-scope .woque-onb__form > * { animation: woque-rise-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .woque.woque-scope .woque-onb__form > *:nth-child(1), .woque.woque-scope .woque-onb__form > *:nth-child(2), .woque.woque-scope .woque-onb__form > *:nth-child(3) { animation-delay: 0.16s; }
  .woque.woque-scope .woque-onb__form > *:nth-child(4) { animation-delay: 0.24s; }
  .woque.woque-scope .woque-onb__form > *:nth-child(5) { animation-delay: 0.32s; }
  .woque.woque-scope .woque-onb__form > *:nth-child(6) { animation-delay: 0.4s; }
  .woque.woque-scope .woque-onb__form > *:nth-child(n+7) { animation-delay: 0.48s; }
  /* The fields of Step 1 follow one another. */
  .woque.woque-scope .woque-onb__form > .woque-field:nth-of-type(2) { animation-delay: 0.3s; }
  .woque.woque-scope .woque-onb__form > .woque-field:nth-of-type(3) { animation-delay: 0.38s; }
  .woque.woque-scope .woque-onb__form > .woque-field:nth-of-type(4) { animation-delay: 0.46s; }

  /* The progress bar: finished parts draw in one after another, and the part she is on fills last. */
  .woque.woque-scope .woque-onb .woque-steps > span.is-done, .woque.woque-scope .woque-onb .woque-steps > span.is-now { transform-origin: left center; animation: woque-fill 0.45s ease-out both; }
  .woque.woque-scope .woque-onb .woque-steps > span:nth-child(2) { animation-delay: 0.05s; }
  .woque.woque-scope .woque-onb .woque-steps > span:nth-child(3) { animation-delay: 0.1s; }
  .woque.woque-scope .woque-onb .woque-steps > span:nth-child(4) { animation-delay: 0.15s; }
  .woque.woque-scope .woque-onb .woque-steps > span:nth-child(5) { animation-delay: 0.2s; }
  .woque.woque-scope .woque-onb .woque-steps > span:nth-child(6) { animation-delay: 0.25s; }
  .woque.woque-scope .woque-onb .woque-steps > span:nth-child(n+7) { animation-delay: 0.3s; }
  .woque.woque-scope .woque-onb .woque-steps > span.is-now { animation-duration: 0.7s; animation-delay: 0.4s; }

  /* The list of sections: the one she is on calls for attention once, finished ones pop their tick. */
  .woque.woque-scope .woque-onb .woque-section.is-now .woque-section__mark { animation: woque-pop 0.5s ease-out 0.3s both, woque-ring 1.1s ease-out 0.8s 2; }
  .woque.woque-scope .woque-onb .woque-section.is-done .woque-section__mark svg { animation: woque-pop 0.4s ease-out 0.2s both; }

  /* The tick box and the button answer her. */
  .woque.woque-scope .woque-onb .woque-check input:checked { animation: woque-pop 0.3s ease-out; }
  .woque.woque-scope .woque-onb__form > .woque-btn { transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease; }
  .woque.woque-scope .woque-onb__form > .woque-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(163, 21, 95, 0.25); }
  .woque.woque-scope .woque-onb__form > .woque-btn:not(:disabled):active { transform: translateY(0) scale(0.98); box-shadow: none; }
  /* Once she has ticked "I have read and understood", the button shows it is ready. */
  .woque.woque-scope .woque-onb__form:has(input[name="ack"]:checked) > .woque-btn:not(:disabled) { animation: woque-ring 1.2s ease-out 2; }

  /* Questions: a wrong answer gives a small shake, a right one a small lift. */
  .woque.woque-scope .woque-quiz__q.is-wrong { animation: woque-nudge 0.45s ease-in-out 0.3s; }
  .woque.woque-scope .woque-quiz__q.is-right { animation: woque-rise-in 0.4s ease-out 0.2s both; }

  /* Completed: the sun swings in, the crown pops, the words rise, and confetti falls once. */
  .woque.woque-scope .woque-done__sun { animation: woque-sun-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .woque.woque-scope .woque-done__mark { animation: woque-pop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
  .woque.woque-scope .woque-done h1 { animation: woque-rise-in 0.6s ease-out 0.45s both; }
  .woque.woque-scope .woque-done__text > * { animation: woque-rise-in 0.5s ease-out 0.7s both; }
  .woque.woque-scope .woque-done__text > *:nth-child(2) { animation-delay: 0.85s; }
  .woque.woque-scope .woque-done__text > *:nth-child(3) { animation-delay: 1s; }
  .woque.woque-scope .woque-done__go { animation: woque-rise-in 0.5s ease-out 1.2s both; }
}

/* Confetti: eighteen small pieces, each with its own place, colour, drift and timing. */
.woque.woque-scope .woque-confetti { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .woque.woque-scope .woque-confetti { display: block; position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
  .woque.woque-scope .woque-confetti span { position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px; background: var(--gold); opacity: 0; animation: woque-fall 2.8s cubic-bezier(0.3, 0.2, 0.6, 1) 0.5s 1 both; }
  .woque.woque-scope .woque-confetti span:nth-child(3n) { background: var(--magenta); }
  .woque.woque-scope .woque-confetti span:nth-child(3n+1) { background: #fff; box-shadow: 0 0 0 1px rgba(46, 15, 56, 0.12); }
  .woque.woque-scope .woque-confetti span:nth-child(4n) { width: 8px; height: 8px; border-radius: 50%; }
  .woque.woque-scope .woque-confetti span:nth-child(1) { left: 4%; --drift: 30px; --spin: 480deg; animation-delay: 0.5s; }
  .woque.woque-scope .woque-confetti span:nth-child(2) { left: 10%; --drift: -20px; --spin: -620deg; animation-delay: 0.75s; }
  .woque.woque-scope .woque-confetti span:nth-child(3) { left: 16%; --drift: 44px; --spin: 700deg; animation-delay: 0.6s; }
  .woque.woque-scope .woque-confetti span:nth-child(4) { left: 22%; --drift: -36px; --spin: 400deg; animation-delay: 0.95s; }
  .woque.woque-scope .woque-confetti span:nth-child(5) { left: 28%; --drift: 18px; --spin: -520deg; animation-delay: 0.55s; }
  .woque.woque-scope .woque-confetti span:nth-child(6) { left: 34%; --drift: -48px; --spin: 660deg; animation-delay: 0.85s; }
  .woque.woque-scope .woque-confetti span:nth-child(7) { left: 40%; --drift: 26px; --spin: 560deg; animation-delay: 0.65s; }
  .woque.woque-scope .woque-confetti span:nth-child(8) { left: 46%; --drift: -14px; --spin: -440deg; animation-delay: 1.05s; }
  .woque.woque-scope .woque-confetti span:nth-child(9) { left: 52%; --drift: 40px; --spin: 740deg; animation-delay: 0.5s; }
  .woque.woque-scope .woque-confetti span:nth-child(10) { left: 58%; --drift: -30px; --spin: 500deg; animation-delay: 0.9s; }
  .woque.woque-scope .woque-confetti span:nth-child(11) { left: 64%; --drift: 12px; --spin: -680deg; animation-delay: 0.7s; }
  .woque.woque-scope .woque-confetti span:nth-child(12) { left: 70%; --drift: -42px; --spin: 600deg; animation-delay: 1.1s; }
  .woque.woque-scope .woque-confetti span:nth-child(13) { left: 76%; --drift: 34px; --spin: 460deg; animation-delay: 0.58s; }
  .woque.woque-scope .woque-confetti span:nth-child(14) { left: 82%; --drift: -22px; --spin: -560deg; animation-delay: 0.8s; }
  .woque.woque-scope .woque-confetti span:nth-child(15) { left: 88%; --drift: 16px; --spin: 720deg; animation-delay: 0.68s; }
  .woque.woque-scope .woque-confetti span:nth-child(16) { left: 94%; --drift: -38px; --spin: 420deg; animation-delay: 1s; }
  .woque.woque-scope .woque-confetti span:nth-child(17) { left: 31%; --drift: 50px; --spin: -600deg; animation-delay: 1.2s; }
  .woque.woque-scope .woque-confetti span:nth-child(18) { left: 67%; --drift: -50px; --spin: 640deg; animation-delay: 1.25s; }
}

/* ---- My profile: member card, sections read as text, Edit per section, sticky save bar. ---- */
.woque.woque-scope .woque-pf { display: flex; flex-direction: column; padding: 16px 16px 40px; }
.woque.woque-scope .woque-pf__back { display: none; }
.woque.woque-scope .woque-pf__grid { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.woque.woque-scope .woque-pf__side { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-pf__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.woque.woque-scope .woque-pf .woque-alert { margin: 0; }

/* The member card */
.woque.woque-scope .woque-pf__card { display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 22px; background: var(--plum); color: #fff; box-shadow: 0 0 0 2px var(--gold), 0 14px 30px rgba(46, 15, 56, 0.22); }
.woque.woque-scope .woque-pf__cardtop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.woque.woque-scope .woque-pf__brand { display: inline-flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); }
.woque.woque-scope .woque-pf__brand svg { width: 24px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.woque.woque-scope .woque-pf__cardkind { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #E4D3E9; }
.woque.woque-scope .woque-pf__me { display: flex; align-items: center; gap: 16px; }
.woque.woque-scope .woque-pf__photo { flex: none; width: 92px; height: 92px; border-radius: 18px; border: 2px solid var(--gold); object-fit: cover; }
.woque.woque-scope .woque-pf__photo--none { display: flex; align-items: center; justify-content: center; background: var(--magenta); color: #fff; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 34px; }
.woque.woque-scope .woque-pf__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.woque.woque-scope .woque-pf__title { font-size: 14px; font-weight: 700; color: var(--gold); }
.woque.woque-scope .woque-pf__title[hidden] { display: none; }
.woque.woque-scope .woque-pf__who h1 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.05; color: #fff; overflow-wrap: anywhere; }
.woque.woque-scope .woque-pf__who p { font-size: 14px; color: #E4D3E9; }
.woque.woque-scope .woque-pf__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 14px; border-top: 1px dashed rgba(242, 182, 50, 0.45); }
.woque.woque-scope .woque-pf__stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woque.woque-scope .woque-pf__stats dt { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #CDB8D4; }
.woque.woque-scope .woque-pf__stats dd { margin: 0; font-size: 16px; font-weight: 700; }

/* Photo buttons under the card */

/* A section: purple header bar, then the details as text */
.woque.woque-scope .woque-pf__sec { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.woque.woque-scope .woque-pf__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px 8px 18px; background: var(--lilac); }
.woque.woque-scope .woque-pf__head h2 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--plum); }
.woque.woque-scope .woque-pf__editbtn { display: none; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--magenta); border-radius: 10px; background: #fff; color: var(--magenta); font: 700 14px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-pf__editbtn:hover { background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-pf__sec.is-editing .woque-pf__editbtn { border-color: var(--plum); background: var(--plum); color: #fff; }
.woque.woque-scope .woque-pf__list, .woque.woque-scope .woque-pf__body { display: none; flex-direction: column; margin: 0; padding: 4px 18px; }
.woque.woque-scope .woque-pf__body { display: flex; }
.woque.woque-scope .woque-pf__row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; }
.woque.woque-scope .woque-pf__row + .woque-pf__row { border-top: 1px solid var(--line-soft); }
.woque.woque-scope .woque-pf__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: #FBEAF2; color: var(--magenta); }
.woque.woque-scope .woque-pf__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-pf__rowtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.woque.woque-scope .woque-pf__rowtext dt, .woque.woque-scope .woque-pf__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.woque.woque-scope .woque-pf__rowtext dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.woque.woque-scope .woque-pf .is-empty { font-weight: 400; font-style: italic; color: #8C7A93; }
.woque.woque-scope .woque-pf__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.woque.woque-scope .woque-pf__chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: #FCEFCB; color: #5A3E00; font-weight: 600; font-size: 14px; }
.woque.woque-scope .woque-pf__note { font-size: 15px; color: var(--ink); }
.woque.woque-scope .woque-pf__gbtn { align-self: flex-start; margin-top: 8px; }

/* The fields, shown only while a section is being edited (always, without the script) */
.woque.woque-scope .woque-pf__fields { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.woque.woque-scope .woque-pf__fields .woque-input { height: 50px; border-radius: 12px; }
.woque.woque-scope .woque-pf__fields .woque-input--area { height: auto; }
.woque.woque-scope .woque-pf__fields .woque-choices legend { margin-bottom: 8px; }
.woque.woque-scope .woque-pf.is-js .woque-pf__editbtn { display: inline-flex; align-items: center; }
.woque.woque-scope .woque-pf.is-js .woque-pf__list { display: flex; }
.woque.woque-scope .woque-pf.is-js .woque-pf__fields { display: none; }
.woque.woque-scope .woque-pf.is-js .woque-pf__sec.is-editing { border-color: var(--magenta); box-shadow: 0 8px 24px rgba(163, 21, 95, 0.12); }
.woque.woque-scope .woque-pf.is-js .woque-pf__sec.is-editing .woque-pf__list { display: none; }
.woque.woque-scope .woque-pf.is-js .woque-pf__sec.is-editing .woque-pf__fields { display: flex; }

/* Save: an ordinary button without the script; with it, a bar fixed to the bottom once something changes */
.woque.woque-scope .woque-pf__bar { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-pf__barmsg { display: none; }
.woque.woque-scope .woque-pf__barbtns { display: flex; gap: 10px; }
.woque.woque-scope .woque-pf__discard { display: none; }
.woque.woque-scope .woque-pf__save { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 0; border-radius: 14px; background: var(--magenta); color: #fff; font: 700 17px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-pf__save:hover { background: var(--magenta-dark); }
.woque.woque-scope .woque-pf.is-js .woque-pf__bar { position: fixed; left: 0; right: 0; bottom: 68px; z-index: 30; padding: 12px 16px 14px; border-radius: 18px 18px 0 0; background: var(--plum); color: #fff; box-shadow: 0 -8px 24px rgba(46, 15, 56, 0.25); transform: translateY(calc(100% + 80px)); transition: transform 0.2s ease; }
.woque.woque-scope .woque-pf.is-js.is-dirty .woque-pf__bar { transform: none; }
.woque.woque-scope .woque-pf.is-js .woque-pf__barmsg { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #E4D3E9; }
.woque.woque-scope .woque-pf.is-js .woque-pf__barmsg::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.woque.woque-scope .woque-pf.is-js .woque-pf__discard { display: inline-flex; align-items: center; flex: none; min-height: 50px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 12px; background: transparent; color: #fff; font: 600 15px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-pf.is-js .woque-pf__save { min-height: 50px; border-radius: 12px; background: var(--gold); color: var(--ink); }
.woque.woque-scope .woque-pf.is-js .woque-pf__save:hover { background: #F7C95A; }
.woque.woque-scope .woque-pf.is-js { padding-bottom: 150px; }
@media (prefers-reduced-motion: reduce) { .woque.woque-scope .woque-pf.is-js .woque-pf__bar { transition: none; } }

@media (min-width: 900px) {
  .woque.woque-scope .woque-pf { max-width: 1160px; margin: 0 auto; padding: 40px 32px 56px; gap: 20px; }
  .woque.woque-scope .woque-pf__back { display: inline-flex; align-self: flex-start; font-weight: 600; font-size: 15px; }
  .woque.woque-scope .woque-pf__grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; }
  .woque.woque-scope .woque-pf__side { position: sticky; top: 24px; }
  .woque.woque-scope .woque-pf__card { padding: 24px; }
  .woque.woque-scope .woque-pf__photo { width: 104px; height: 104px; }
  .woque.woque-scope .woque-pf__who h1 { font-size: 28px; }
  .woque.woque-scope .woque-pf__head { padding: 10px 14px 10px 22px; }
  .woque.woque-scope .woque-pf__head h2 { font-size: 20px; }
  .woque.woque-scope .woque-pf__list { display: none; padding: 6px 22px; }
  .woque.woque-scope .woque-pf.is-js .woque-pf__list:not(.woque-pf__list--chips) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .woque.woque-scope .woque-pf.is-js .woque-pf__sec.is-editing .woque-pf__list { display: none; }
  .woque.woque-scope .woque-pf__list .woque-pf__row + .woque-pf__row { border-top: 0; }
  .woque.woque-scope .woque-pf__list .woque-pf__row { border-bottom: 1px solid var(--line-soft); }
  .woque.woque-scope .woque-pf__fields { padding: 22px; }
  .woque.woque-scope .woque-pf__body { padding: 6px 22px; }
  .woque.woque-scope .woque-pf.is-js .woque-pf__bar { bottom: 0; left: 50%; right: auto; width: min(720px, calc(100% - 48px)); flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 22px; border-radius: 18px 18px 0 0; transform: translate(-50%, calc(100% + 20px)); }
  .woque.woque-scope .woque-pf.is-js.is-dirty .woque-pf__bar { transform: translate(-50%, 0); }
  .woque.woque-scope .woque-pf.is-js .woque-pf__barbtns { flex: none; }
  .woque.woque-scope .woque-pf.is-js .woque-pf__save { flex: none; }
  .woque.woque-scope .woque-pf.is-js { padding-bottom: 120px; }
  .woque.woque-scope .woque-pf__save { flex: none; align-self: flex-start; }
}

/* My profile: the photo is a button (gold camera badge; "Change photo" on hover) that opens the photo dialog. */
.woque.woque-scope .woque-pf__photobtn { position: relative; flex: none; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer; }
.woque.woque-scope .woque-pf__photobtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.woque.woque-scope .woque-pf__photobtn .woque-pf__photo { display: flex; }
.woque.woque-scope .woque-pf__badge { position: absolute; right: -8px; bottom: -8px; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); border: 3px solid var(--plum); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.woque.woque-scope .woque-pf__badge svg, .woque.woque-scope .woque-pf__photohover svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.woque.woque-scope .woque-pf__photohover { position: absolute; inset: 2px; border-radius: 16px; background: rgba(46, 15, 56, 0.66); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 700 13px 'Figtree', sans-serif; opacity: 0; transition: opacity 0.15s; }
.woque.woque-scope .woque-pf__photohover svg { width: 22px; height: 22px; }
@media (hover: hover) { .woque.woque-scope .woque-pf__photobtn:hover .woque-pf__photohover { opacity: 1; } }

/* The photo dialog: a sheet from the bottom on a phone, a two-part dialog on a PC. */
.woque.woque-scope .woque-pfd { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -10px 30px rgba(46, 15, 56, 0.3); overflow: auto; }
.woque.woque-scope .woque-pfd::backdrop { background: rgba(36, 16, 43, 0.55); }
.woque.woque-scope .woque-pfd__in { display: flex; flex-direction: column; }
.woque.woque-scope .woque-pfd__preview { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 20px 18px; background: var(--plum); }
.woque.woque-scope .woque-pfd__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.woque.woque-scope .woque-pfd__pics { display: flex; align-items: center; gap: 14px; }
.woque.woque-scope .woque-pfd__pics [hidden] { display: none; }
.woque.woque-scope .woque-pfd__pic { position: relative; display: flex; width: 112px; height: 112px; border-radius: 20px; border: 3px solid var(--gold); background: var(--magenta); overflow: hidden; }
.woque.woque-scope .woque-pfd__pic img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-pfd__initials { margin: auto; color: #fff; font: 700 38px 'Bricolage Grotesque', 'Figtree', sans-serif; }
.woque.woque-scope .woque-pfd__tag { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(36, 16, 43, 0.75); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.woque.woque-scope .woque-pfd.has-new .woque-pfd__pic--now { width: 76px; height: 76px; border-width: 2px; opacity: 0.6; }
.woque.woque-scope .woque-pfd.has-new .woque-pfd__pic--now .woque-pfd__initials { font-size: 26px; }
.woque.woque-scope .woque-pfd__pic--new { width: 132px; height: 132px; }
.woque.woque-scope .woque-pfd__arrow svg { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-pfd__body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 22px; }
.woque.woque-scope .woque-pfd__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.woque.woque-scope .woque-pfd__head h2 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 22px; color: var(--plum); }
.woque.woque-scope .woque-pfd__close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--lilac); color: var(--plum); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.woque.woque-scope .woque-pfd__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.woque.woque-scope .woque-pfd__lead { margin-top: -8px; font-size: 15px; color: var(--muted); }
.woque.woque-scope .woque-pfd__drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 104px; padding: 14px; border: 2px dashed #CDBDD3; border-radius: 16px; background: var(--paper); text-align: center; cursor: pointer; }
.woque.woque-scope .woque-pfd__drop:hover, .woque.woque-scope .woque-pfd__drop.is-over { border-color: var(--magenta); background: #FBEAF2; }
.woque.woque-scope .woque-pfd__drop:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.woque.woque-scope .woque-pfd__drop svg { width: 26px; height: 26px; fill: none; stroke: var(--magenta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-pfd__drop strong { color: var(--magenta); }
.woque.woque-scope .woque-pfd__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.woque.woque-scope .woque-pfd__droptext { font-size: 15px; overflow-wrap: anywhere; }
.woque.woque-scope .woque-pfd__note { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-pfd__error { padding: 10px 14px; border-radius: 10px; background: #FDECEC; color: #9B1C1C; font-size: 14px; font-weight: 600; }
.woque.woque-scope .woque-pfd__error[hidden] { display: none; }
.woque.woque-scope .woque-pfd__alt { min-height: 48px; border: 1.5px solid #CDBDD3; border-radius: 12px; background: #fff; color: var(--ink); font: 600 15px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-pfd__alt:hover { border-color: var(--plum); }
.woque.woque-scope .woque-pfd__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.woque.woque-scope .woque-pfd__remove { min-height: 44px; padding: 0; border: 0; background: none; color: #9B1C1C; font: 600 15px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-pfd__use { min-height: 50px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--magenta); color: #fff; font: 700 16px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-pfd__use:hover { background: var(--magenta-dark); }
.woque.woque-scope .woque-pfd__use[disabled] { background: #CDBDD3; cursor: default; }
/* Without the script the dialog cannot open: it shows as a panel under the card instead. */
.woque.woque-scope .woque-pf:not(.is-js) .woque-pfd { display: block; position: static; margin: 0; border-radius: 18px; box-shadow: none; border: 1px solid var(--line); }
.woque.woque-scope .woque-pf:not(.is-js) .woque-pf__badge, .woque.woque-scope .woque-pf:not(.is-js) .woque-pf__photohover { display: none; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-pf__photobtn .woque-pf__photo { width: 104px; height: 104px; }
  .woque.woque-scope .woque-pf.is-js .woque-pfd { width: min(680px, calc(100% - 48px)); max-height: 90vh; margin: auto; border-radius: 24px; box-shadow: 0 30px 60px rgba(36, 16, 43, 0.35); }
  .woque.woque-scope .woque-pf.is-js .woque-pfd__in { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  .woque.woque-scope .woque-pf.is-js .woque-pfd__preview { justify-content: center; padding: 28px; }
  .woque.woque-scope .woque-pf.is-js .woque-pfd__pics { flex-direction: column; }
  .woque.woque-scope .woque-pf.is-js .woque-pfd__arrow { transform: rotate(90deg); }
  .woque.woque-scope .woque-pf.is-js .woque-pfd__pic { width: 150px; height: 150px; }
  .woque.woque-scope .woque-pf.is-js .woque-pfd.has-new .woque-pfd__pic--now { width: 64px; height: 64px; }
  .woque.woque-scope .woque-pf.is-js .woque-pfd__pic--new { width: 168px; height: 168px; }
  .woque.woque-scope .woque-pfd__body { padding: 24px 28px 26px; }
  .woque.woque-scope .woque-pfd__head h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .woque.woque-scope .woque-pf__photohover { transition: none; } }

/* "Are you sure?" sheets (Log out, Disconnect Google): from the bottom on a phone, centred on a PC. */
.woque.woque-scope .woque-cfm { width: 100%; max-width: none; margin: auto 0 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -10px 30px rgba(46, 15, 56, 0.3); }
.woque.woque-scope .woque-cfm::backdrop { background: rgba(36, 16, 43, 0.55); }
.woque.woque-scope .woque-cfm__in { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 20px 24px; text-align: center; }
.woque.woque-scope .woque-cfm__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lilac); color: var(--plum); }
.woque.woque-scope .woque-cfm__icon--warn { background: #FCEFCB; color: #8A5A00; }
.woque.woque-scope .woque-cfm__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-cfm h2 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 22px; color: var(--plum); }
.woque.woque-scope .woque-cfm p { font-size: 15px; color: var(--muted); }
.woque.woque-scope .woque-cfm__warn { display: flex; flex-direction: column; gap: 6px; align-self: stretch; padding: 14px 16px; border-radius: 12px; background: #FCEFCB; color: #5A3E00 !important; font-size: 14px; text-align: left; }
.woque.woque-scope .woque-cfm__warn[hidden] { display: none; }
.woque.woque-scope .woque-cfm__warn strong { font-size: 15px; }
.woque.woque-scope .woque-cfm__warn a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 36px; color: #7C0F48; font-weight: 700; }
.woque.woque-scope .woque-cfm__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-self: stretch; margin-top: 6px; }
.woque.woque-scope .woque-cfm__cancel, .woque.woque-scope .woque-cfm__go { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; font: 700 16px 'Figtree', sans-serif; text-decoration: none; cursor: pointer; }
.woque.woque-scope .woque-cfm__cancel { border: 1.5px solid #CDBDD3; background: #fff; color: var(--ink); }
.woque.woque-scope .woque-cfm__cancel:hover { border-color: var(--plum); }
.woque.woque-scope .woque-cfm__go { border: 0; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-cfm__go:hover { background: var(--plum-2); color: #fff; }
.woque.woque-scope .woque-cfm__go--danger { background: #9B1C1C; }
.woque.woque-scope .woque-cfm__go--danger:hover { background: #7A1414; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-cfm { width: min(440px, calc(100% - 48px)); margin: auto; border-radius: 24px; box-shadow: 0 30px 60px rgba(36, 16, 43, 0.35); }
  .woque.woque-scope .woque-cfm__in { padding: 30px 28px 26px; }
}

/* Recommend a course: Share buttons, the share sheet, and the shared course on the front door. */
.woque.woque-scope .woque-sharebtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--gold); color: var(--ink); font: 700 16px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-sharebtn:hover { background: #F7C95A; }
.woque.woque-scope .woque-sharebtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-sharebtn--icon { flex: none; width: 52px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--magenta); }
.woque.woque-scope .woque-sharebtn--icon:hover { background: #FBEAF2; }
.woque.woque-scope .woque-sharebtn--icon svg { width: 22px; height: 22px; }
.woque.woque-scope .woque-sharerow { display: flex; align-items: stretch; gap: 10px; }
.woque.woque-scope .woque-sharerow > .woque-rowcard { flex: 1 1 auto; min-width: 0; }
.woque.woque-scope .woque-cp__share { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px dashed rgba(242, 182, 50, 0.45); font-size: 15px; color: #E4D3E9; }

.woque.woque-scope .woque-share { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -10px 30px rgba(46, 15, 56, 0.3); overflow: auto; }
.woque.woque-scope .woque-share::backdrop { background: rgba(36, 16, 43, 0.55); }
.woque.woque-scope .woque-share__in { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 22px; }
.woque.woque-scope .woque-share__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.woque.woque-scope .woque-share__head h2 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 22px; color: var(--plum); }
.woque.woque-scope .woque-share__close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--lilac); color: var(--plum); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.woque.woque-scope .woque-share__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.woque.woque-scope .woque-share__lead { margin-top: -8px; font-size: 15px; color: var(--muted); }
.woque.woque-scope .woque-share__card { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.woque.woque-scope .woque-share__pic { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 72px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #2E0F38 0%, #6B1F5C 100%); color: var(--gold); }
.woque.woque-scope .woque-share__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-share__pic img[hidden] { display: none; }
.woque.woque-scope .woque-share__nopic { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.woque.woque-scope .woque-share__cardtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woque.woque-scope .woque-share__cardtext strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 17px; line-height: 1.2; color: var(--plum); }
.woque.woque-scope .woque-share__cardtext span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woque.woque-scope .woque-share__label { font-weight: 700; font-size: 15px; margin-bottom: -6px; }
.woque.woque-scope .woque-share__text { min-height: 112px; font-size: 16px; }
.woque.woque-scope .woque-share__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.woque.woque-scope .woque-share__btns > * { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 12px; font: 700 16px 'Figtree', sans-serif; text-decoration: none; cursor: pointer; }
.woque.woque-scope .woque-share__btns > [hidden] { display: none; }
.woque.woque-scope .woque-share__btns svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-share__go { grid-column: 1 / -1; border: 0; background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-share__go:hover { background: var(--magenta-dark); }
.woque.woque-scope .woque-share__wa { border: 0; background: #1F7A4D; color: #fff; }
.woque.woque-scope .woque-share__wa:hover { background: #14553B; color: #fff; }
.woque.woque-scope .woque-share__copy { border: 1.5px solid #CDBDD3; background: #fff; color: var(--ink); }
.woque.woque-scope .woque-share__copy:hover { border-color: var(--plum); }
.woque.woque-scope .woque-share__status { min-height: 20px; margin-top: -4px; font-size: 14px; color: #14553B; text-align: center; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-share { width: min(520px, calc(100% - 48px)); margin: auto; border-radius: 24px; box-shadow: 0 30px 60px rgba(36, 16, 43, 0.35); }
  .woque.woque-scope .woque-share__in { padding: 26px 28px; }
  .woque.woque-scope .woque-cp__share { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}

.woque.woque-scope .woque-door__shared { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 182, 50, 0.45); }
.woque.woque-scope .woque-door__shared img { flex: none; width: 84px; height: 64px; border-radius: 10px; object-fit: cover; }
.woque.woque-scope .woque-door__sharedtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; color: #E4D3E9; }
.woque.woque-scope .woque-door__sharedtext strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 18px; line-height: 1.2; color: #fff; }
.woque.woque-scope .woque-door__sharedtext span:first-child { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }

/* ---- Library: picture cards, a sidebar on the right (search, topics or kinds, Stories), Resources tab, item page. ---- */
.woque.woque-scope .woque-lib { display: flex; flex-direction: column; gap: 18px; padding: 24px 16px 32px; }
.woque.woque-scope .woque-lib__head { display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-lib__title h1 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 32px; line-height: 1.05; color: var(--plum); }
.woque.woque-scope .woque-lib__title p { margin-top: 4px; font-size: 15px; color: var(--muted); }
.woque.woque-scope .woque-lib__body { display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-lib__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.woque.woque-scope .woque-lib__search { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 4px 0 0; border: 1px solid #CDBDD3; border-radius: 12px; background: #fff; color: var(--muted); }
.woque.woque-scope .woque-lib__search:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
.woque.woque-scope .woque-lib__search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.woque.woque-scope .woque-lib__search input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0; border: 0; background: none; color: var(--ink); font: 400 16px 'Figtree', sans-serif; outline: 0; }
.woque.woque-scope .woque-lib__group h2 { display: none; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.woque.woque-scope .woque-lib__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.woque.woque-scope .woque-lib__chips::-webkit-scrollbar { display: none; }
.woque.woque-scope .woque-lib__chips a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid #CDBDD3; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.woque.woque-scope .woque-lib__chips a span { color: var(--muted); font-weight: 500; }
.woque.woque-scope .woque-lib__chips a.is-active { border-color: var(--plum); background: var(--plum); color: #fff; }
.woque.woque-scope .woque-lib__chips a.is-active span { color: #E4D3E9; }
.woque.woque-scope .woque-lib__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.woque.woque-scope .woque-lib__stories { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--plum); color: #fff; text-decoration: none; }
.woque.woque-scope .woque-lib__stories:hover { color: #fff; background: var(--plum-2); }
.woque.woque-scope .woque-lib__stories > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.woque.woque-scope .woque-lib__stories strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 18px; }
.woque.woque-scope .woque-lib__stories span span { font-size: 14px; color: #E4D3E9; }
.woque.woque-scope .woque-lib__storiesicon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold); color: var(--plum); }
.woque.woque-scope .woque-lib__storiesicon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

.woque.woque-scope .woque-libcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-libcard:hover { border-color: #CDBDD3; box-shadow: 0 8px 20px rgba(46, 15, 56, 0.08); color: var(--ink); }
.woque.woque-scope .woque-libcard .woque-libcard__img { aspect-ratio: 4 / 3; }
.woque.woque-scope .woque-libcard__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 14px; }
.woque.woque-scope .woque-libcard__topic { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-libcard__topic:empty { display: none; }
.woque.woque-scope .woque-libcard strong { font-size: 15px; line-height: 1.25; }
.woque.woque-scope .woque-libcard__files { font-size: 12px; color: var(--muted); }
.woque.woque-scope .woque-libcard__more { display: none; }
.woque.woque-scope .woque-libgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.woque.woque-scope .woque-libcard--big { border: 0; border-radius: 20px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-libcard--big:hover { color: #fff; }
.woque.woque-scope .woque-libcard--big .woque-libcard__img { aspect-ratio: 16 / 9; }
.woque.woque-scope .woque-libcard--big .woque-libcard__body { gap: 6px; padding: 16px 18px 18px; }
.woque.woque-scope .woque-libcard--big .woque-libcard__topic { color: var(--gold); }
.woque.woque-scope .woque-libcard--big strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 22px; line-height: 1.15; }
.woque.woque-scope .woque-libcard--big .woque-libcard__more { display: block; font-size: 15px; line-height: 1.45; color: #E4D3E9; }
.woque.woque-scope .woque-libcard--big .woque-libcard__files { align-self: flex-start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 13px; font-weight: 600; }

/* A file or link, on an item and on the Resources tab */
.woque.woque-scope .woque-libfiles { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.woque.woque-scope .woque-libfiles__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 8px 18px; background: var(--lilac); }
.woque.woque-scope .woque-libfiles__head h2 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 18px; color: var(--plum); }
.woque.woque-scope .woque-libfiles__head span { font-size: 13px; font-weight: 700; color: var(--muted); }
.woque.woque-scope .woque-libfiles__list { display: flex; flex-direction: column; padding: 2px 14px; }
.woque.woque-scope .woque-libfiles__list--all { gap: 10px; padding: 0; }
.woque.woque-scope .woque-res { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.woque.woque-scope .woque-libfiles__list:not(.woque-libfiles__list--all) .woque-res + .woque-res { border-top: 1px solid var(--line-soft); }
.woque.woque-scope .woque-libfiles__list--all .woque-res { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-res__kind { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 48px; height: 54px; border-radius: 10px; background: var(--lilac); color: var(--plum); font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.woque.woque-scope .woque-res__kind svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-res__kind--video svg { fill: currentColor; stroke: none; }
.woque.woque-scope .woque-res__kind--pdf { background: #FDECEC; color: #9B1C1C; }
.woque.woque-scope .woque-res__kind--video { background: var(--plum); color: var(--gold); }
.woque.woque-scope .woque-res__kind--audio { background: #FCEFCB; color: #8A5A00; }
.woque.woque-scope .woque-res__kind--doc, .woque.woque-scope .woque-res__kind--slides { background: #E5EEF9; color: #1D4F91; }
.woque.woque-scope .woque-res__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woque.woque-scope .woque-res__text strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.woque.woque-scope .woque-res__text span { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-res__text a { color: var(--magenta); font-weight: 600; }
.woque.woque-scope .woque-res__go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--magenta); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.woque.woque-scope .woque-res__go:hover { background: var(--magenta-dark); color: #fff; }
.woque.woque-scope .woque-res__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-res__go--watch { border: 1.5px solid var(--plum); background: #fff; color: var(--plum); }
.woque.woque-scope .woque-res__go--watch:hover { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-res__go--watch svg { fill: currentColor; stroke: none; width: 14px; height: 14px; }
.woque.woque-scope .woque-res__go span { display: none; }
.woque.woque-scope .woque-res__go--watch span { display: inline; }

/* One library item */
.woque.woque-scope .woque-libitem { display: flex; flex-direction: column; }
.woque.woque-scope .woque-libitem__hero { position: relative; }
.woque.woque-scope .woque-libitem .woque-libitem__img { aspect-ratio: 16 / 10; }
.woque.woque-scope .woque-libitem__back { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(36, 16, 43, 0.6); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.woque.woque-scope .woque-libitem__back:hover { color: #fff; background: rgba(36, 16, 43, 0.8); }
.woque.woque-scope .woque-libitem__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-libitem__body { position: relative; display: flex; flex-direction: column; gap: 16px; margin-top: -24px; padding: 22px 16px 32px; border-radius: 24px 24px 0 0; background: var(--paper); }
.woque.woque-scope .woque-libitem__head { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-libitem__topic { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-libitem__head h1 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 30px; line-height: 1.1; color: var(--plum); }

@media (min-width: 900px) {
  .woque.woque-scope .woque-lib { max-width: 1160px; margin: 0 auto; padding: 36px 32px 48px; gap: 24px; }
  .woque.woque-scope .woque-lib__head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; }
  .woque.woque-scope .woque-lib__title h1 { font-size: 40px; }
  .woque.woque-scope .woque-lib__title p { font-size: 17px; }
  .woque.woque-scope .woque-lib__body { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px 28px; align-items: start; }
  .woque.woque-scope .woque-lib__main { grid-column: 2; grid-row: 1 / span 2; gap: 18px; }
  .woque.woque-scope .woque-lib__side { grid-column: 1; grid-row: 1; gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  .woque.woque-scope .woque-lib__stories { grid-column: 1; grid-row: 2; }
  .woque.woque-scope .woque-lib__group { display: flex; flex-direction: column; gap: 10px; }
  .woque.woque-scope .woque-lib__group h2 { display: block; }
  .woque.woque-scope .woque-lib__chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .woque.woque-scope .woque-libgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .woque.woque-scope .woque-libcard__body { padding: 14px 16px 16px; }
  .woque.woque-scope .woque-libcard strong { font-size: 17px; }
  .woque.woque-scope .woque-libcard__files { font-size: 13px; }
  .woque.woque-scope .woque-libcard--big { display: grid; grid-template-columns: 1.15fr 1fr; }
  .woque.woque-scope .woque-libcard--big .woque-libcard__img { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .woque.woque-scope .woque-libcard--big .woque-libcard__body { justify-content: center; padding: 28px 32px; }
  .woque.woque-scope .woque-libcard--big strong { font-size: 30px; }
  .woque.woque-scope .woque-libcard--big .woque-libcard__more { font-size: 16px; }
  .woque.woque-scope .woque-res__go span { display: inline; }
  .woque.woque-scope .woque-res__go { padding: 0 16px; }
  .woque.woque-scope .woque-libitem { max-width: 880px; margin: 0 auto; padding: 32px 32px 48px; }
  .woque.woque-scope .woque-libitem .woque-libitem__img { aspect-ratio: 21 / 9; border-radius: 24px; }
  .woque.woque-scope .woque-libitem__body { margin-top: 0; padding: 26px 0 0; background: none; }
  .woque.woque-scope .woque-libitem__head h1 { font-size: 40px; }
}
/* Library item, for admins: Edit in the top-right corner of the picture. */
.woque.woque-scope .woque-libitem__edit { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 4px 12px rgba(36, 16, 43, 0.25); }
.woque.woque-scope .woque-libitem__edit:hover { background: #F7C95A; color: var(--ink); }
.woque.woque-scope .woque-libitem__edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
/* Library header: the topics as tabs, scrolling sideways on a phone. */
.woque.woque-scope .woque-lib__topics { display: flex; gap: 4px; margin: -4px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.woque.woque-scope .woque-lib__topics::-webkit-scrollbar { display: none; }
.woque.woque-scope .woque-lib__topics a { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.woque.woque-scope .woque-lib__topics a:hover { color: var(--plum); }
.woque.woque-scope .woque-lib__topics a.is-active { border-bottom-color: var(--magenta); color: var(--plum); font-weight: 700; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-lib__topics { margin: -8px 0 0; padding: 0; gap: 8px; }
  .woque.woque-scope .woque-lib__topics a { min-height: 52px; padding: 0 16px; font-size: 16px; }
}

/* Topics in the Library sidebar: a PC only. A phone has them as tabs under the heading. */
.woque.woque-scope .woque-lib__group--topics { display: none; }
.woque.woque-scope .woque-lib__topiclist { display: flex; flex-direction: column; gap: 2px; margin: 0 -10px; }
.woque.woque-scope .woque-lib__topiclist a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.woque.woque-scope .woque-lib__topiclist a span { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #F1E7F4; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.woque.woque-scope .woque-lib__topiclist a:hover { background: #FAF6FB; color: var(--plum); }
.woque.woque-scope .woque-lib__topiclist a.is-active { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-lib__topiclist a.is-active span { background: rgba(255, 255, 255, 0.16); color: #fff; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-lib__topics { display: none; }
  .woque.woque-scope .woque-lib__group--topics { display: flex; }
}

/* Library cards: what an item holds, as count chips coloured by kind (the same as the admin cards). */
.woque.woque-scope .woque-kchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.woque.woque-scope .woque-kchips__chip { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--lilac); color: var(--plum); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.woque.woque-scope .woque-kchips__chip strong, .woque.woque-scope .woque-libcard .woque-kchips__chip strong, .woque.woque-scope .woque-libcard--big .woque-kchips__chip strong { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; font-weight: 800; }
.woque.woque-scope .woque-kchips__chip[data-kind="pdf"] { background: #FDECEC; color: #9B1C1C; }
.woque.woque-scope .woque-kchips__chip[data-kind="video"] { background: var(--plum); color: var(--gold); }
.woque.woque-scope .woque-kchips__chip[data-kind="audio"] { background: #FCEFCB; color: #8A5A00; }
.woque.woque-scope .woque-kchips__chip[data-kind="doc"], .woque.woque-scope .woque-kchips__chip[data-kind="slides"] { background: #E5EEF9; color: #1D4F91; }
/* On the big plum card the video chip is gold, so it does not vanish into the card. */
.woque.woque-scope .woque-libcard--big .woque-kchips { margin-top: 8px; }
.woque.woque-scope .woque-libcard--big .woque-kchips__chip[data-kind="video"] { background: var(--gold); color: var(--plum); }
@media (min-width: 900px) {
  .woque.woque-scope .woque-kchips__chip { min-height: 28px; font-size: 13px; }
}

/* Library search box: Teachings / Resources picker on the left, then the words, then the search button. */
.woque.woque-scope .woque-lib__pick { position: relative; flex: none; display: flex; align-items: center; align-self: stretch; border-right: 1px solid var(--line); border-radius: 12px 0 0 12px; background: var(--lilac); }
.woque.woque-scope .woque-lib__pick select { appearance: none; -webkit-appearance: none; height: 100%; min-height: 48px; margin: 0; padding: 0 30px 0 14px; border: 0; border-radius: 12px 0 0 12px; background: none; color: var(--plum); font: 700 14px 'Figtree', sans-serif; cursor: pointer; outline: 0; }
.woque.woque-scope .woque-lib__pick select:focus-visible { box-shadow: inset 0 0 0 2px var(--magenta); }
.woque.woque-scope .woque-lib__pick svg { position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; fill: none; stroke: var(--plum); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-lib__search input[type="search"] { padding-left: 4px; }
.woque.woque-scope .woque-lib__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.woque.woque-scope .woque-lib__go:hover { background: var(--lilac); color: var(--plum); }
/* In the PC sidebar the box is narrow: the picker is the top row of the box, the search under it. */
@media (min-width: 900px) {
  .woque.woque-scope .woque-lib__search { flex-wrap: wrap; gap: 0 8px; padding: 0 4px 0 0; }
  .woque.woque-scope .woque-lib__pick { flex: 1 0 100%; align-self: auto; border-right: 0; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
  .woque.woque-scope .woque-lib__pick select { width: 100%; min-height: 44px; padding-left: 14px; border-radius: 12px 12px 0 0; }
  .woque.woque-scope .woque-lib__pick svg { right: 14px; }
  .woque.woque-scope .woque-lib__search input[type="search"] { flex: 1 1 0; width: 0; padding-left: 14px; }
}

/* Questions at the end of a Library item. */
.woque.woque-scope .woque-libquiz { margin-top: 8px; scroll-margin-top: 80px; }
.woque.woque-scope .woque-libquiz__done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.woque.woque-scope .woque-libquiz__done svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 999px; background: #E3F4EA; fill: none; stroke: #1F7A4A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-libquiz__done div { flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; }
.woque.woque-scope .woque-libquiz__done strong { color: var(--plum); font-size: 16px; }
.woque.woque-scope .woque-libquiz__done span { color: var(--muted); font-size: 14px; }
.woque.woque-scope .woque-libquiz__done .woque-btn { width: auto; min-height: 44px; padding: 0 16px; font-size: 15px; }

/* The questions result sheet on a Library item (built on the confirm sheet, .woque-cfm). */
.woque.woque-scope .woque-qsheet__icon--right { background: #E3F4EA; color: #1F7A4A; }
.woque.woque-scope .woque-qsheet__icon--right svg { stroke-width: 2.6; }
.woque.woque-scope .woque-qsheet__list { display: flex; flex-direction: column; gap: 8px; align-self: stretch; max-height: 40vh; margin: 4px 0 0; padding: 0; overflow-y: auto; list-style: none; text-align: left; }
.woque.woque-scope .woque-qsheet__list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: #F1FAF5; }
.woque.woque-scope .woque-qsheet__list li.is-wrong { background: #FDF1EE; }
.woque.woque-scope .woque-qsheet__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #1F7A4A; color: #fff; }
.woque.woque-scope .woque-qsheet__list li.is-wrong .woque-qsheet__mark { background: #B4321F; }
.woque.woque-scope .woque-qsheet__mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-qsheet__q { display: flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
.woque.woque-scope .woque-qsheet__q small { color: #1F7A4A; font-size: 13px; font-weight: 700; }
.woque.woque-scope .woque-qsheet__list li.is-wrong .woque-qsheet__q small { color: #B4321F; }
@media (prefers-reduced-motion: no-preference) {
  .woque.woque-scope .woque-qsheet[open] { animation: woque-qsheet-up 0.28s ease-out; }
  @keyframes woque-qsheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.woque.woque-scope .woque-libquiz .woque-quiz__q, .woque.woque-scope .woque-libitem__body .woque-content { scroll-margin-top: 90px; }

/* Home: "Recommended for you" and "WoQue's Current Focus": the picture fills the left side top to bottom (design B). */
.woque.woque-scope .woque-continue--side { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; border: 1.5px solid var(--gold); box-shadow: none; }
.woque.woque-scope .woque-continue--side .woque-continue__imglink { display: flex; min-height: 100%; }
.woque.woque-scope .woque-continue--side .woque-continue__img { width: 100%; height: 100%; min-height: 100%; aspect-ratio: auto; border-radius: 0; }
.woque.woque-scope .woque-continue--side .woque-continue__body { gap: 8px; padding: 18px; justify-content: center; }
.woque.woque-scope .woque-continue--side .woque-continue__eyebrow { font-size: 12px; }
.woque.woque-scope .woque-continue--side .woque-continue__title { font-size: 21px; line-height: 1.15; }
.woque.woque-scope .woque-continue--side .woque-continue__line { font-size: 14px; line-height: 1.45; }
.woque.woque-scope .woque-continue--side form { margin: 6px 0 0; }
.woque.woque-scope .woque-continue--side .woque-continue__cta { gap: 8px; min-height: 46px; padding: 0 18px; }
.woque.woque-scope .woque-continue--side > .woque-continue__body > a.woque-continue__cta { margin-top: 6px; }
.woque.woque-scope .woque-continue__arrow { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Home: "Continue your course": the picture across the top with her progress along its bottom edge (design A). */
.woque.woque-scope .woque-continue--banner { gap: 0; padding: 0; overflow: hidden; }
.woque.woque-scope .woque-continue__top { position: relative; display: block; }
.woque.woque-scope .woque-continue--banner .woque-continue__img { width: 100%; height: 132px; aspect-ratio: auto; border-radius: 0; }
.woque.woque-scope .woque-continue__edge { position: absolute; left: 0; right: 0; bottom: 0; display: block; height: 6px; background: rgba(255, 255, 255, 0.22); }
.woque.woque-scope .woque-continue__edge > span { display: block; height: 100%; background: var(--gold); }
.woque.woque-scope .woque-continue--banner .woque-continue__body { gap: 6px; padding: 16px 20px 20px; }
.woque.woque-scope .woque-continue--banner .woque-continue__eyebrow { font-size: 12px; }
.woque.woque-scope .woque-continue--banner .woque-continue__title { font-size: 22px; line-height: 1.15; }
.woque.woque-scope .woque-continue--banner .woque-continue__line { font-size: 14px; }
.woque.woque-scope .woque-continue--banner .woque-continue__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; min-height: 50px; border-radius: 14px; background: var(--gold); color: var(--ink); font-size: 16px; font-weight: 700; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-continue--side { grid-template-columns: 240px minmax(0, 1fr); padding: 0; }
  .woque.woque-scope .woque-continue--side .woque-continue__img { width: 100%; min-height: 100%; height: 100%; border-radius: 0; }
  .woque.woque-scope .woque-continue--side .woque-continue__body { gap: 12px; padding: 26px 28px; }
  .woque.woque-scope .woque-continue--side .woque-continue__title { font-size: 28px; }
  .woque.woque-scope .woque-continue--side .woque-continue__line { font-size: 16px; }
  .woque.woque-scope .woque-continue--banner { padding: 0; }
  .woque.woque-scope .woque-continue--banner .woque-continue__img { width: 100%; height: 190px; min-height: 0; border-radius: 0; }
  .woque.woque-scope .woque-continue--banner .woque-continue__body { gap: 10px; padding: 22px 28px 26px; }
  .woque.woque-scope .woque-continue--banner .woque-continue__title { font-size: 28px; }
  .woque.woque-scope .woque-continue--banner .woque-continue__cta { align-self: flex-start; padding: 0 24px; }
}

/* A News item's message comes from the full editor: keep it compact inside the card. */
.woque.woque-scope .woque-news__text > * { margin: 0 0 8px; }
.woque.woque-scope .woque-news__text > *:last-child { margin-bottom: 0; }
.woque.woque-scope .woque-news__text ul, .woque.woque-scope .woque-news__text ol { padding-left: 20px; }
.woque.woque-scope .woque-news__text li { margin: 2px 0; }
.woque.woque-scope .woque-news__text a { color: var(--magenta); font-weight: 600; }
.woque.woque-scope .woque-news__text img { max-width: 100%; height: auto; border-radius: 12px; }
.woque.woque-scope .woque-news__text h2, .woque.woque-scope .woque-news__text h3, .woque.woque-scope .woque-news__text h4 { font-size: 16px; color: var(--plum); }
.woque.woque-scope .woque-news__text blockquote { padding-left: 12px; border-left: 3px solid var(--line); }
.woque.woque-scope .woque-news__text iframe { max-width: 100%; border-radius: 12px; }

/* News: the "after the button" sheet (built on the confirm sheet, .woque-cfm). */
.woque.woque-scope .woque-nsheet__in { display: flex; flex-direction: column; gap: 14px; padding: 10px 22px 24px; max-height: 88vh; overflow-y: auto; }
.woque.woque-scope .woque-nsheet__grip { align-self: center; width: 44px; height: 5px; border-radius: 999px; background: var(--line); }
.woque.woque-scope .woque-nsheet__body { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.55; color: #3E2A45; }
.woque.woque-scope .woque-nsheet__body > * { margin: 0; }
.woque.woque-scope .woque-nsheet__body img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 16px; }
.woque.woque-scope .woque-nsheet__body p:has(> img:only-child) { margin: 0; }
.woque.woque-scope .woque-nsheet__body h2, .woque.woque-scope .woque-nsheet__body h3, .woque.woque-scope .woque-nsheet__body h4 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 24px; line-height: 1.15; color: var(--plum); }
.woque.woque-scope .woque-nsheet__body strong { color: var(--plum); }
.woque.woque-scope .woque-nsheet__body a { color: var(--magenta); font-weight: 700; }
.woque.woque-scope .woque-nsheet__body ul, .woque.woque-scope .woque-nsheet__body ol { padding-left: 20px; }
.woque.woque-scope .woque-nsheet__body iframe { width: 100%; border-radius: 16px; }
.woque.woque-scope .woque-nsheet__big { align-self: center; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-top: 6px !important; border-radius: 50%; background: #FCEFCB; font-size: 52px !important; line-height: 1 !important; }
.woque.woque-scope .woque-nsheet__body:has(> .woque-nsheet__big) { text-align: center; }
.woque.woque-scope .woque-nsheet__done { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #F1FAF5; color: #1F7A4A; font-size: 14px; font-weight: 700; }
.woque.woque-scope .woque-nsheet__done svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-nsheet__close { min-height: 52px; border: 0; border-radius: 14px; background: var(--plum); color: #fff; font: 700 17px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-nsheet__close:hover { background: var(--plum-2); }
.woque.woque-scope .woque-news__done--open { border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.woque.woque-scope .woque-news__done--open:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .woque.woque-scope .woque-nsheet { width: min(460px, calc(100% - 48px)); }
  .woque.woque-scope .woque-nsheet__in { padding: 22px 28px 26px; }
  .woque.woque-scope .woque-nsheet__grip { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .woque.woque-scope .woque-nsheet[open] { animation: woque-qsheet-up 0.3s ease-out; }
}

/* ---- Push notifications: the invitation on the home screen ---- */
.woque.woque-scope .woque-pushask { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: start; overflow: hidden; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, #2E0F38 0%, #5B1A55 100%); color: #fff; box-shadow: 0 12px 28px rgba(46, 15, 56, 0.22); }
.woque.woque-scope .woque-pushask[hidden] { display: none; }
.woque.woque-scope .woque-pushask::after { content: ''; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 182, 50, 0.28) 0%, rgba(242, 182, 50, 0) 70%); pointer-events: none; }
.woque.woque-scope .woque-pushask__bell { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gold); color: var(--plum); }
.woque.woque-scope .woque-pushask__bell svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; }
@media (prefers-reduced-motion: no-preference) { .woque.woque-scope .woque-pushask__bell svg { animation: woque-ring 2.6s ease-in-out 0.6s 2; } }
@keyframes woque-ring { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 40% { transform: rotate(-4deg); } }
.woque.woque-scope .woque-pushask__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.woque.woque-scope .woque-pushask__text h2 { font-size: 19px; line-height: 1.2; color: #fff; }
.woque.woque-scope .woque-pushask__text p { font-size: 15px; color: #E4D3E9; }
.woque.woque-scope .woque-pushask__text p[hidden], .woque.woque-scope .woque-pushask__btns [hidden] { display: none; }
.woque.woque-scope .woque-pushask__btns { grid-column: 1 / -1; display: flex; gap: 10px; }
.woque.woque-scope .woque-pushask__go { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--gold); color: var(--ink); font: 700 16px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-pushask__go:hover { background: #F7C95A; }
.woque.woque-scope .woque-pushask__go:disabled { opacity: 0.6; cursor: progress; }
.woque.woque-scope .woque-pushask__later { flex: none; min-height: 48px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 12px; background: transparent; color: #fff; font: 600 15px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-pushask__later:hover { background: rgba(255, 255, 255, 0.1); }
.woque.woque-scope .woque-pushask__error { grid-column: 1 / -1; padding: 10px 12px; border-radius: 10px; background: #FBE0DA; color: #7A1B0E; font-size: 14px; }
.woque.woque-scope .woque-pushask__error[hidden] { display: none; }
@media (min-width: 700px) {
  .woque.woque-scope .woque-pushask { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 18px 20px; }
  .woque.woque-scope .woque-pushask__btns { grid-column: auto; }
  .woque.woque-scope .woque-pushask__go { flex: none; }
}

/* ---- Push notifications: the section on My profile ---- */
.woque.woque-scope .woque-push { scroll-margin-top: 80px; }
.woque.woque-scope .woque-push [data-push-show][hidden] { display: none; }
.woque.woque-scope .woque-push__ico { background: #FCEFCB; color: #8A5A00; }
.woque.woque-scope .woque-push[data-state="on"] .woque-push__ico { background: #E3F3EC; color: #14553B; }
.woque.woque-scope .woque-push__pill { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; vertical-align: 1px; }
.woque.woque-scope .woque-push__pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.woque.woque-scope .woque-push__pill--on { background: #E3F3EC; color: #14553B; }
.woque.woque-scope .woque-push__pill--off { background: var(--lilac); color: var(--plum); }
.woque.woque-scope .woque-push__pill--blocked { background: #FCEFCB; color: #5A3E00; }
.woque.woque-scope .woque-push__btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 10px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--magenta); color: #fff; font: 700 16px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-push__btn:hover { background: var(--magenta-dark); }
.woque.woque-scope .woque-push__btn:disabled, .woque.woque-scope .woque-push__small:disabled { opacity: 0.6; cursor: progress; }
.woque.woque-scope .woque-push__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; }
.woque.woque-scope .woque-push__small { min-height: 44px; padding: 0 16px; font-size: 15px; }
.woque.woque-scope .woque-push__textbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--magenta); font: 600 15px 'Figtree', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.woque.woque-scope .woque-push__textbtn:hover { color: var(--magenta-dark); }
.woque.woque-scope .woque-push__hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-push__hint--top { margin: 0 0 4px; }
.woque.woque-scope .woque-push__said { margin-top: 6px; font-size: 14px; font-weight: 600; color: #14553B; }
.woque.woque-scope .woque-push__said[hidden], .woque.woque-scope .woque-push__error[hidden] { display: none; }
.woque.woque-scope .woque-push__error { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #FBE0DA; color: #7A1B0E; font-size: 14px; }
.woque.woque-scope .woque-push__how { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; padding: 0; }
.woque.woque-scope .woque-push__how li { position: relative; padding-left: 16px; font-size: 14px; color: var(--ink); }
.woque.woque-scope .woque-push__how li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.woque.woque-scope .woque-push__list { display: flex; flex-direction: column; margin: 0; padding: 0; }
.woque.woque-scope .woque-push__cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.woque.woque-scope .woque-push__cat + .woque-push__cat { border-top: 1px solid var(--line-soft); }
.woque.woque-scope .woque-push__catlabel { display: flex; flex-direction: column; gap: 1px; min-width: 0; cursor: pointer; }
.woque.woque-scope .woque-push__catlabel strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.woque.woque-scope .woque-push__catlabel span { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-push__chip { background: var(--lilac); color: var(--plum); }

/* An on/off switch: a real checkbox laid over a drawn track, so it works with touch, keyboard and screen readers. */
.woque.woque-scope .woque-switch { position: relative; flex: none; display: inline-flex; width: 52px; height: 32px; }
.woque.woque-scope .woque-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.woque.woque-scope .woque-switch input:disabled { cursor: default; }
.woque.woque-scope .woque-switch__track { position: relative; width: 52px; height: 32px; border-radius: 999px; background: #D9CBDF; transition: background 0.15s; }
.woque.woque-scope .woque-switch__track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(36, 16, 43, 0.3); transition: transform 0.15s; }
.woque.woque-scope .woque-switch input:checked + .woque-switch__track { background: var(--magenta); }
.woque.woque-scope .woque-switch input:checked + .woque-switch__track::after { transform: translateX(20px); }
.woque.woque-scope .woque-switch input:disabled + .woque-switch__track { opacity: 0.55; }
.woque.woque-scope .woque-switch input:focus-visible + .woque-switch__track { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .woque.woque-scope .woque-switch__track, .woque.woque-scope .woque-switch__track::after { transition: none; } }

/* ---- Push notifications: how to add WOQUE to an iPhone's Home Screen ---- */
.woque.woque-scope .woque-iosguide__app img { display: block; width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 6px 16px rgba(46, 15, 56, 0.25); }
.woque.woque-scope .woque-iosguide__steps { display: flex; flex-direction: column; gap: 10px; align-self: stretch; margin: 4px 0 0; padding: 0; list-style: none; text-align: left; }
.woque.woque-scope .woque-iosguide__steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #FBF8FC; border: 1px solid var(--line-soft); }
.woque.woque-scope .woque-iosguide__num { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--plum); color: var(--gold); font-weight: 700; font-size: 14px; }
.woque.woque-scope .woque-iosguide__text { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.woque.woque-scope .woque-iosguide__text small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
.woque.woque-scope .woque-iosguide__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 6px; border-radius: 8px; background: #E5EEF9; color: #1D6FD8; vertical-align: middle; }
.woque.woque-scope .woque-iosguide__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-iosguide__note { font-size: 13px !important; }
.woque.woque-scope .woque-cfm__btns--one { grid-template-columns: minmax(0, 1fr); }

/* My profile > Notifications > Edit: one tick box per kind, with what it covers under it. */
.woque.woque-scope .woque-push__choices { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-push__choice span { display: flex; flex-direction: column; gap: 1px; }
.woque.woque-scope .woque-push__choice strong { font-weight: 600; }
.woque.woque-scope .woque-push__choice small { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-push__choice.is-fixed { opacity: 0.7; cursor: default; }
.woque.woque-scope .woque-push__chip--off { background: #F3EEF4; color: var(--muted); text-decoration: line-through; }
.woque.woque-scope .woque-push__view dd.woque-pf__chips { white-space: normal; }
.woque.woque-scope .woque-push__choice { display: flex; width: 100%; }
.woque.woque-scope .woque-push__choice span { position: relative; width: 100%; min-height: 56px; align-items: flex-start; justify-content: center; padding: 10px 16px 10px 50px; border-radius: 14px; }
.woque.woque-scope .woque-push__choice span::before { content: ''; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border: 2px solid #CDBDD3; border-radius: 6px; background: #fff; }
.woque.woque-scope .woque-push__choice input:checked + span::before { border-color: var(--magenta); background: var(--magenta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.woque.woque-scope .woque-push__choice input:checked + span { border-color: var(--magenta); background: #FBF5F9; color: var(--ink); }
.woque.woque-scope .woque-push__choice input:disabled + span { cursor: default; }

/* Onboarding: every answer right. A sheet with a green tick, confetti, the score, and Continue. */
.woque.woque-scope .woque-well { overflow: hidden; }
.woque.woque-scope .woque-well[open]:not(:modal) { position: fixed; inset: auto 0 0 0; z-index: 90; }
.woque.woque-scope .woque-well__in { position: relative; z-index: 1; gap: 10px; padding-top: 30px; }
.woque.woque-scope .woque-well__badge { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #1F7A4A; box-shadow: 0 0 0 8px #E3F3EC, 0 0 0 11px var(--gold); color: #fff; }
.woque.woque-scope .woque-well__badge svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-well h2 { margin-top: 8px; font-size: 26px; }
.woque.woque-scope .woque-well .woque-well__score { font-size: 17px; font-weight: 700; color: #14553B; }
.woque.woque-scope .woque-well__progress { display: flex; gap: 6px; justify-content: center; margin: 4px 0; }
.woque.woque-scope .woque-well__progress span { width: 22px; height: 6px; border-radius: 3px; background: var(--lilac); }
.woque.woque-scope .woque-well__progress span.is-done { background: var(--magenta); }
.woque.woque-scope .woque-well .woque-well__next { font-size: 14px; font-weight: 600; color: var(--plum); }
.woque.woque-scope .woque-well__go { background: var(--magenta); }
.woque.woque-scope .woque-well__go:hover { background: var(--magenta-dark); }
.woque.woque-scope .woque-well__confetti { position: absolute; inset: 0 0 auto 0; height: 200px; pointer-events: none; }
.woque.woque-scope .woque-well__confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; opacity: 0; }
.woque.woque-scope .woque-well__confetti i:nth-child(3n) { background: var(--gold); }
.woque.woque-scope .woque-well__confetti i:nth-child(3n+1) { background: var(--magenta); }
.woque.woque-scope .woque-well__confetti i:nth-child(3n+2) { background: #1F7A4A; width: 6px; height: 6px; border-radius: 50%; }
.woque.woque-scope .woque-well__confetti i:nth-child(1) { left: 6%; animation-delay: 0.05s; }
.woque.woque-scope .woque-well__confetti i:nth-child(2) { left: 12%; animation-delay: 0.3s; }
.woque.woque-scope .woque-well__confetti i:nth-child(3) { left: 18%; animation-delay: 0.15s; }
.woque.woque-scope .woque-well__confetti i:nth-child(4) { left: 24%; animation-delay: 0.45s; }
.woque.woque-scope .woque-well__confetti i:nth-child(5) { left: 30%; animation-delay: 0.1s; }
.woque.woque-scope .woque-well__confetti i:nth-child(6) { left: 36%; animation-delay: 0.35s; }
.woque.woque-scope .woque-well__confetti i:nth-child(7) { left: 42%; animation-delay: 0.2s; }
.woque.woque-scope .woque-well__confetti i:nth-child(8) { left: 48%; animation-delay: 0.5s; }
.woque.woque-scope .woque-well__confetti i:nth-child(9) { left: 54%; animation-delay: 0.08s; }
.woque.woque-scope .woque-well__confetti i:nth-child(10) { left: 60%; animation-delay: 0.4s; }
.woque.woque-scope .woque-well__confetti i:nth-child(11) { left: 66%; animation-delay: 0.25s; }
.woque.woque-scope .woque-well__confetti i:nth-child(12) { left: 72%; animation-delay: 0.55s; }
.woque.woque-scope .woque-well__confetti i:nth-child(13) { left: 78%; animation-delay: 0.12s; }
.woque.woque-scope .woque-well__confetti i:nth-child(14) { left: 84%; animation-delay: 0.38s; }
.woque.woque-scope .woque-well__confetti i:nth-child(15) { left: 90%; animation-delay: 0.22s; }
.woque.woque-scope .woque-well__confetti i:nth-child(16) { left: 95%; animation-delay: 0.6s; }
.woque.woque-scope .woque-well__confetti i:nth-child(17) { left: 3%; animation-delay: 0.65s; }
.woque.woque-scope .woque-well__confetti i:nth-child(18) { left: 50%; animation-delay: 0.7s; }
@media (prefers-reduced-motion: no-preference) {
  .woque.woque-scope .woque-well[open] .woque-well__confetti i { animation: woque-confetti 1.6s ease-in forwards; }
  .woque.woque-scope .woque-well[open] .woque-well__badge { animation: woque-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  .woque.woque-scope .woque-well[open] { animation: woque-qsheet-up 0.3s ease-out; }
}
@keyframes woque-confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(200px) rotate(320deg); } }
@keyframes woque-pop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.woque.woque-scope .woque-well a.woque-well__go, .woque.woque-scope .woque-well a.woque-well__go:hover, .woque.woque-scope .woque-well a.woque-well__go:focus { color: #fff; }

/* ==== Preview (an admin going through as a member) ==== */
.woque.woque-scope .woque-try { position: relative; z-index: 60; background: #2E0F38; color: #fff; border-bottom: 3px solid var(--gold); }
.woque.woque-scope .woque-try__in { display: flex; align-items: center; gap: 10px; max-width: 1160px; margin: 0 auto; padding: 8px 12px 8px 16px; }
.woque.woque-scope .woque-try__tag { flex: none; padding: 4px 9px; border-radius: 6px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.woque.woque-scope .woque-try__what { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.woque.woque-scope .woque-try__what strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.woque.woque-scope .woque-try__what small { font-size: 12px; color: #CDB8D4; }
.woque.woque-scope .woque-try__menu { position: relative; flex: none; }
.woque.woque-scope .woque-try__menu > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px 0 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
.woque.woque-scope .woque-try__menu > summary::-webkit-details-marker { display: none; }
.woque.woque-scope .woque-try__menu > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-try__menu[open] > summary { background: rgba(255, 255, 255, 0.12); }
.woque.woque-scope .woque-try__list { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 24px)); padding: 8px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 16px 40px rgba(36, 16, 43, 0.35); }
.woque.woque-scope .woque-try__list form { margin: 0; }
.woque.woque-scope .woque-try__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.woque.woque-scope .woque-try__item:hover { background: var(--lilac); }
.woque.woque-scope .woque-try__item > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--plum); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-try__item span { display: flex; flex-direction: column; gap: 1px; }
.woque.woque-scope .woque-try__item strong { font-size: 15px; }
.woque.woque-scope .woque-try__item small { font-size: 12px; color: var(--muted); }
.woque.woque-scope .woque-try__switch { position: relative; flex: none; width: 40px !important; height: 24px; border-radius: 999px; background: #D9CBDF; }
.woque.woque-scope .woque-try__switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.woque.woque-scope .woque-try__switch.is-on { background: #1F7A4A; }
.woque.woque-scope .woque-try__switch.is-on::after { left: 19px; }
.woque.woque-scope .woque-try__jump { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 !important; padding: 10px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.woque.woque-scope .woque-try__jump label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.woque.woque-scope .woque-try__jumprow { display: flex; gap: 6px; }
.woque.woque-scope .woque-try__jumprow select { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid #CDBDD3; border-radius: 10px; background: #fff; color: var(--ink); font: 400 14px 'Figtree', sans-serif; }
.woque.woque-scope .woque-try__jumprow button { flex: none; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--plum); color: #fff; font: 700 14px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-try__exit { flex: none; margin: 0; }
.woque.woque-scope .woque-try__exit button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--gold); color: var(--ink); font: 700 14px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-try__exit button:hover { background: #F7C95A; }
@media (max-width: 480px) {
  .woque.woque-scope .woque-try__what small { display: none; }
  .woque.woque-scope .woque-try__menu > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .woque.woque-scope .woque-try__menu > summary { padding: 0 10px; }
}

/* The guide card on each screen while previewing. */
.woque.woque-scope .woque-guide { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; padding: 14px 16px 14px 18px; border-left: 4px solid var(--gold); border-radius: 12px; background: #FFF8E3; color: #3F2B00; }
.woque.woque-scope .woque-guide__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8A5A00; }
.woque.woque-scope .woque-guide__title { font-size: 16px; color: var(--ink); }
.woque.woque-scope .woque-guide ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
.woque.woque-scope .woque-guide li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; }
.woque.woque-scope .woque-guide li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.woque.woque-scope .woque-cp + .woque-guide, .woque.woque-scope .woque > .woque-guide { max-width: 1160px; }
.woque.woque-scope > .woque-guide { margin: 16px auto 0; width: calc(100% - 40px); }

/* Answer key: right answers green with a tick, wrong ones faded and crossed. */
.woque.woque-scope .woque-key-note { margin: 2px 0 8px; padding: 8px 12px; border-radius: 10px; background: #E3F3EC; color: #14553B; font-size: 13px; font-weight: 600; }
.woque.woque-scope .woque-quiz__o.is-key-right { border-color: #1F7A4A; background: #F1FAF5; box-shadow: inset 4px 0 0 #1F7A4A; }
.woque.woque-scope .woque-quiz__o.is-key-wrong { border-style: dashed; background: #FFFBFA; }
.woque.woque-scope .woque-quiz__o.is-key-wrong span { color: #7D6B83; }
.woque.woque-scope .woque-key-tag { flex: none; align-self: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.woque.woque-scope .is-key-right .woque-key-tag { background: #1F7A4A; color: #fff; }
.woque.woque-scope .is-key-right .woque-key-tag::before { content: '✓ '; }
.woque.woque-scope .is-key-wrong .woque-key-tag { background: #FBE0DA; color: #7A1B0E; }
.woque.woque-scope .is-key-wrong .woque-key-tag::before { content: '✕ '; }

/* Stories: a card per story, with the writer's photo and a Read button. */
.woque.woque-scope .woque-scards { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .woque.woque-scope .woque-scards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .woque.woque-scope .woque-scards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.woque.woque-scope .woque-scard { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 20px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.woque.woque-scope .woque-scard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--plum), var(--magenta)); }
.woque.woque-scope .woque-scard--love::before { background: linear-gradient(90deg, var(--magenta), #E8739E, var(--gold)); }
.woque.woque-scope .woque-scard::after { content: "\201C"; position: absolute; top: 2px; right: 16px; font: 700 84px/1 'Bricolage Grotesque', Georgia, serif; color: var(--lilac); pointer-events: none; }
.woque.woque-scope .woque-scard > * { position: relative; z-index: 1; }
.woque.woque-scope .woque-scard:hover { border-color: #D9C3E0; box-shadow: 0 10px 28px rgba(46, 15, 56, 0.09); transform: translateY(-2px); }
.woque.woque-scope .woque-scard.is-mine { border-color: #EBC3D7; background: linear-gradient(180deg, #FFF7FB, #fff 60%); }
.woque.woque-scope .woque-scard__top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-right: 44px; }
.woque.woque-scope .woque-scard__kind { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--lilac); color: var(--plum); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.woque.woque-scope .woque-scard__kind.is-love { background: #FBE3EF; color: var(--magenta-dark); }
.woque.woque-scope .woque-scard__time { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-scard__title { margin: 2px 0 0; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.woque.woque-scope .woque-scard__title a { color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-scard__title a:hover { color: var(--magenta); }
.woque.woque-scope .woque-scard__more { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.woque.woque-scope .woque-scard__foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.woque.woque-scope .woque-scard__by { display: flex; gap: 10px; align-items: center; min-width: 0; }
.woque.woque-scope .woque-scard__face { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); color: var(--plum); font-size: 14px; font-weight: 700; text-transform: uppercase; }
.woque.woque-scope .woque-scard__face img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-scard__face--lg { width: 52px; height: 52px; font-size: 17px; }
.woque.woque-scope .woque-scard__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.woque.woque-scope .woque-scard__who strong { font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woque.woque-scope .woque-scard__who span { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-scard__read { display: inline-flex; flex: none; gap: 6px; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--plum); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: background 0.15s ease; }
.woque.woque-scope .woque-scard__read:hover, .woque.woque-scope .woque-scard__read:focus { background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-scard--love .woque-scard__read { background: var(--magenta); }
.woque.woque-scope .woque-scard--love .woque-scard__read:hover, .woque.woque-scope .woque-scard--love .woque-scard__read:focus { background: var(--magenta-dark); }
.woque.woque-scope .woque-scard__read svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.woque.woque-scope .woque-scard__read:hover svg { transform: translateX(3px); }
.woque.woque-scope .woque-scard__mine { display: flex; gap: 4px 20px; align-items: center; margin-top: -4px; }
.woque.woque-scope .woque-scard__mine form { margin: 0; }
.woque.woque-scope .woque-scard__mine .woque-link { min-height: 36px; font-size: 14px; }
.woque.woque-scope .woque-scard__mine .woque-link--danger { color: #9B1C1C; }
.woque.woque-scope .woque-story__head { gap: 12px; }
.woque.woque-scope .woque-story__head .woque-scard__kind { align-self: flex-start; }
.woque.woque-scope .woque-story__by { padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .woque.woque-scope .woque-scard, .woque.woque-scope .woque-scard__read svg { transition: none; } .woque.woque-scope .woque-scard:hover { transform: none; } }

/* My WOQUE › Info: her to-do list. */
.woque.woque-scope .woque-todo { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, #FFF7FB 0%, #fff 55%); }
.woque.woque-scope .woque-todo.is-all-done { background: linear-gradient(160deg, #EEF8F2 0%, #fff 60%); }
.woque.woque-scope .woque-todo__top { display: flex; gap: 16px; align-items: center; }
.woque.woque-scope .woque-todo__ring { --pct: 0; position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--magenta) calc(var(--pct) * 1%), var(--lilac) 0); }
.woque.woque-scope .woque-todo.is-all-done .woque-todo__ring { background: conic-gradient(#1F7A4A calc(var(--pct) * 1%), #DDEFE5 0); }
.woque.woque-scope .woque-todo__ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.woque.woque-scope .woque-todo__ring span { position: relative; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 17px; font-weight: 700; color: var(--plum); }
.woque.woque-scope .woque-todo__intro { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woque.woque-scope .woque-todo__intro h2 { font-size: 22px; line-height: 1.2; }
.woque.woque-scope .woque-todo__intro p { margin: 0; font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-todo__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.woque.woque-scope .woque-todo__item { display: grid; grid-template-columns: 26px 1fr; gap: 6px 12px; align-items: start; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-todo__mark { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 1px; border: 2px solid #D3BEDB; border-radius: 50%; background: #fff; }
.woque.woque-scope .woque-todo__item.is-done .woque-todo__mark { border-color: #1F7A4A; background: #1F7A4A; color: #fff; }
.woque.woque-scope .woque-todo__mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-todo__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.woque.woque-scope .woque-todo__text strong { font-size: 16px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.woque.woque-scope .woque-todo__text > span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.woque.woque-scope .woque-todo__text .woque-todo__note { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 8px; background: #FFF3D6; color: #6B4600; font-size: 13px; font-weight: 600; }
.woque.woque-scope .woque-todo__go { grid-column: 2; justify-self: start; display: inline-flex; gap: 6px; align-items: center; min-height: 42px; margin-top: 6px; padding: 0 16px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.woque.woque-scope .woque-todo__go:hover, .woque.woque-scope .woque-todo__go:focus { background: var(--magenta-dark); color: #fff; }
.woque.woque-scope .woque-todo__go svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-todo__item.is-done { grid-template-columns: 26px 1fr; align-items: center; padding: 10px 14px; background: transparent; border-style: dashed; }
.woque.woque-scope .woque-todo__item.is-done strong { font-weight: 600; color: var(--muted); }
.woque.woque-scope .woque-todo__done summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--plum); font-weight: 700; font-size: 15px; cursor: pointer; }
.woque.woque-scope .woque-todo__done[open] summary { margin-bottom: 8px; }
.woque.woque-scope .woque-todo__h { margin: 4px 0 12px; font-size: 18px; }
@media (min-width: 700px) {
  .woque.woque-scope .woque-todo { padding: 24px; }
  .woque.woque-scope .woque-todo__item:not(.is-done) { grid-template-columns: 26px 1fr auto; align-items: center; }
  .woque.woque-scope .woque-todo__go { grid-column: 3; grid-row: 1; margin-top: 0; justify-self: end; white-space: nowrap; }
}

/* ==========================================================================
   Cool Seat: her celebration, the date picker, the desk, the guide and the tour.
   ========================================================================== */
.woque.woque-scope .woque-cs { display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-cs__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 12px; font-weight: 700; }
.woque.woque-scope .woque-pill.is-active .woque-cs__count { background: var(--gold); color: var(--ink); }
.woque.woque-scope .woque-cs__card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.woque.woque-scope .woque-cs__card h2 { font-size: 22px; line-height: 1.2; }
.woque.woque-scope .woque-cs__card h3 { font-size: 18px; line-height: 1.3; }
.woque.woque-scope .woque-cs__card p { margin: 0; }
.woque.woque-scope .woque-cs__card--soft { align-items: flex-start; background: linear-gradient(160deg, #FFF7FB, #fff 60%); }
.woque.woque-scope .woque-cs__card--wait { border-color: #F2D48A; background: #FFFBF0; }
.woque.woque-scope .woque-cs__card--done { align-items: flex-start; background: linear-gradient(160deg, #EEF8F2, #fff 60%); }
.woque.woque-scope .woque-cs__icon { font-size: 34px; line-height: 1; }
.woque.woque-scope .woque-cs__hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.woque.woque-scope .woque-cs__btn { align-self: flex-start; padding: 0 22px; }
.woque.woque-scope .woque-cs__hero { position: relative; display: flex; gap: 16px; align-items: center; padding: 20px; overflow: hidden; border-radius: 22px; background: linear-gradient(135deg, var(--plum) 0%, #5B1E6E 55%, var(--magenta) 100%); color: #fff; }
.woque.woque-scope .woque-cs__hero::after { content: "💍"; position: absolute; right: -6px; bottom: -18px; font-size: 96px; opacity: 0.16; transform: rotate(-12deg); pointer-events: none; }
.woque.woque-scope .woque-cs__date { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 78px; border-radius: 16px; background: #fff; color: var(--plum); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.woque.woque-scope .woque-cs__date strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 32px; line-height: 1; }
.woque.woque-scope .woque-cs__date span { color: var(--magenta); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.woque.woque-scope .woque-cs__herotext { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.woque.woque-scope .woque-cs__kicker { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.woque.woque-scope .woque-cs__herotext strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 22px; line-height: 1.2; }
.woque.woque-scope .woque-cs__herotext > span:last-child { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.woque.woque-scope .woque-cs__booked { border-width: 2px; border-color: #F2D48A; background: linear-gradient(160deg, #FFFBF0, #fff 60%); }
.woque.woque-scope .woque-cs__booked.is-confirmed { border-color: #A9D8BE; background: linear-gradient(160deg, #EEF8F2, #fff 60%); }
.woque.woque-scope .woque-cs__status { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: #FCEFCB; color: #5A3E00; font-size: 13px; font-weight: 700; }
.woque.woque-scope .woque-cs__booked.is-confirmed .woque-cs__status { background: #DDEFE5; color: #14553B; }
.woque.woque-scope .woque-cs__booked h2 { font-size: 26px; }
.woque.woque-scope .woque-cs__time-big { font-size: 18px; font-weight: 700; color: var(--plum); }
.woque.woque-scope .woque-cs__acts { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.woque.woque-scope .woque-cs__acts form { margin: 0; }
.woque.woque-scope .woque-cs__change { padding: 4px 0; }
.woque.woque-scope .woque-cs__change > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--magenta); font-weight: 700; cursor: pointer; }
.woque.woque-scope .woque-cs__change[open] > summary { margin-bottom: 8px; }
.woque.woque-scope .woque-cs__change .woque-cs__picker { margin-top: 12px; }
.woque.woque-scope .woque-cs__skip { margin: -6px 0 0; text-align: center; }
.woque.woque-scope .woque-cs__skip .woque-link { color: var(--muted); }
.woque.woque-scope .woque-cs__empty { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px dashed var(--line); border-radius: 16px; background: var(--paper); }
.woque.woque-scope .woque-cs__empty span { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-cs__empty--ok { border-style: solid; border-color: #CFE8DA; background: #F3FAF6; }

/* The date picker. */
.woque.woque-scope .woque-cs__picker { display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-cs__picker fieldset { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.woque.woque-scope .woque-cs__day { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.woque.woque-scope .woque-cs__day.is-anniv { border-color: var(--magenta); background: #FFF4F9; }
.woque.woque-scope .woque-cs__dayname { display: flex; flex: 1 1 140px; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-cs__dayname strong { font-size: 16px; }
.woque.woque-scope .woque-cs__rel { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-cs__tag { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 12px; font-weight: 700; }
.woque.woque-scope .woque-cs__times { display: flex; flex-wrap: wrap; gap: 8px; }
.woque.woque-scope .woque-cs__time { position: relative; display: inline-flex; cursor: pointer; }
.woque.woque-scope .woque-cs__time input { position: absolute; opacity: 0; pointer-events: none; }
.woque.woque-scope .woque-cs__time span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--plum); font-weight: 700; font-size: 15px; transition: border-color 0.15s ease, background 0.15s ease; }
.woque.woque-scope .woque-cs__time:hover span { border-color: var(--magenta); }
.woque.woque-scope .woque-cs__time input:checked + span { border-color: var(--magenta); background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-cs__time input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.woque.woque-scope .woque-cs__go { align-self: stretch; }
@media (min-width: 700px) { .woque.woque-scope .woque-cs__go { align-self: flex-start; padding: 0 28px; } }

/* The desk. */
.woque.woque-scope .woque-cs__desk { display: flex; flex-direction: column; gap: 16px; }
.woque.woque-scope .woque-cs__deskbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.woque.woque-scope .woque-cs__tabs { display: flex; flex: 1 1 auto; gap: 4px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 14px; background: var(--lilac); }
.woque.woque-scope .woque-cs__tabs::-webkit-scrollbar { display: none; }
.woque.woque-scope .woque-cs__tab { display: inline-flex; flex: none; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; color: var(--plum); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.woque.woque-scope .woque-cs__tab:hover { background: rgba(255, 255, 255, 0.6); color: var(--plum); }
.woque.woque-scope .woque-cs__tab.is-active { background: #fff; color: var(--magenta); box-shadow: 0 1px 4px rgba(36, 16, 43, 0.12); }
.woque.woque-scope .woque-cs__tourbtn { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--plum); font: 600 14px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-cs__tourbtn:hover { border-color: var(--magenta); color: var(--magenta); }
.woque.woque-scope .woque-cs__tourbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-cs__pane { display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-cs__pane[hidden] { display: none; }
.woque.woque-scope .woque-cs__h { margin: 6px 0 0; font-size: 17px; }
.woque.woque-scope .woque-cs__items { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-cs__item { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-cs__item--change { border-color: #F2D48A; background: #FFFBF0; }
@media (min-width: 900px) { .woque.woque-scope .woque-cs__item { grid-template-columns: minmax(200px, 1.1fr) minmax(200px, 1.2fr) auto; align-items: center; } }
.woque.woque-scope .woque-cs__who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.woque.woque-scope .woque-cs__who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-cs__who strong { font-size: 16px; overflow-wrap: anywhere; }
.woque.woque-scope .woque-cs__who > span:last-child > span { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-cs__face { display: flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--lilac); color: var(--plum); font-size: 14px; font-weight: 700; }
.woque.woque-scope .woque-cs__face img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-cs__mini { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; border-radius: 12px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-cs__mini strong { font-size: 18px; line-height: 1; }
.woque.woque-scope .woque-cs__mini span { color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.woque.woque-scope .woque-cs__move { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 15px; }
.woque.woque-scope .woque-cs__from { color: var(--muted); text-decoration: line-through; }
.woque.woque-scope .woque-cs__arrow { color: var(--magenta); font-weight: 700; }
.woque.woque-scope .woque-cs__to { font-weight: 700; color: var(--plum); }
.woque.woque-scope .woque-cs__ago { width: 100%; font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-cs__act { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--plum); font: 700 14px 'Figtree', sans-serif; text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.woque.woque-scope .woque-cs__act::-webkit-details-marker { display: none; }
.woque.woque-scope .woque-cs__act:hover { border-color: var(--plum); color: var(--plum); }
.woque.woque-scope .woque-cs__act--yes { border-color: #1F7A4A; background: #1F7A4A; color: #fff; }
.woque.woque-scope .woque-cs__act--yes:hover { border-color: #14553B; background: #14553B; color: #fff; }
.woque.woque-scope .woque-cs__act--no { border-color: #9B1C1C; background: #9B1C1C; color: #fff; }
.woque.woque-scope .woque-cs__act--no:hover { border-color: #7A1414; background: #7A1414; color: #fff; }
.woque.woque-scope .woque-cs__why { position: relative; }
.woque.woque-scope .woque-cs__why[open] { flex-basis: 100%; }
.woque.woque-scope .woque-cs__why form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 14px; border-radius: 12px; background: var(--paper); }
.woque.woque-scope .woque-cs__why form .woque-cs__act { align-self: flex-start; }
.woque.woque-scope .woque-cs__bookfor[open] .woque-cs__picker { margin-top: 10px; }
.woque.woque-scope .woque-cs__badge { padding: 3px 10px; border-radius: 999px; background: var(--lilac); color: var(--plum); font-size: 13px; font-weight: 700; }
.woque.woque-scope .woque-cs__badge.is-open { background: #FCEFCB; color: #5A3E00; }
.woque.woque-scope .woque-cs__badge.is-booked { background: #FCEFCB; color: #5A3E00; }
.woque.woque-scope .woque-cs__badge.is-confirmed, .woque.woque-scope .woque-cs__badge.is-held { background: #DDEFE5; color: #14553B; }
.woque.woque-scope .woque-cs__badge.is-skipped { background: #EEE; color: #555; }
.woque.woque-scope .woque-cs__heldlist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.woque.woque-scope .woque-cs__heldlist li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); }
.woque.woque-scope .woque-cs__heldlist span { color: var(--muted); }

/* The calendar. */
.woque.woque-scope .woque-cs__calhead { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.woque.woque-scope .woque-cs__calhead h2 { font-size: 22px; }
.woque.woque-scope .woque-cs__nav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--plum); font-size: 26px; line-height: 1; text-decoration: none; }
.woque.woque-scope .woque-cs__nav:hover { border-color: var(--plum); color: var(--plum); }
.woque.woque-scope .woque-cs__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.woque.woque-scope .woque-cs__wd { padding: 4px 0; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; }
.woque.woque-scope .woque-cs__cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 64px; padding: 5px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; }
.woque.woque-scope .woque-cs__cell.is-blank { border: 0; background: transparent; }
.woque.woque-scope .woque-cs__cell.is-past { background: var(--paper); opacity: 0.6; }
.woque.woque-scope .woque-cs__cell.is-today { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); }
.woque.woque-scope .woque-cs__cell[data-cs-day] { cursor: pointer; }
.woque.woque-scope .woque-cs__cell[data-cs-day]:hover, .woque.woque-scope .woque-cs__cell[data-cs-day]:focus-visible { border-color: var(--magenta); outline: 0; }
.woque.woque-scope .woque-cs__cell.is-picked { border-color: var(--magenta); background: #FFF4F9; }
.woque.woque-scope .woque-cs__num { display: flex; gap: 2px; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--plum); }
.woque.woque-scope .woque-cs__ring { font-size: 12px; }
.woque.woque-scope .woque-cs__chip { display: flex; flex-direction: column; min-width: 0; padding: 2px 5px; border-radius: 6px; background: #E3F3EC; color: #14553B; font-size: 11px; line-height: 1.25; }
.woque.woque-scope .woque-cs__chip span { font-weight: 700; }
.woque.woque-scope .woque-cs__chip em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.woque.woque-scope .woque-cs__chip.is-booked { background: #FCEFCB; color: #5A3E00; }
.woque.woque-scope .woque-cs__chip.is-confirmed { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-cs__chip.is-held { background: #F1E7F4; color: var(--plum); outline: 1px dashed var(--plum); }
.woque.woque-scope .woque-cs__legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; }
.woque.woque-scope .woque-cs__legend .woque-cs__chip { display: inline-flex; padding: 3px 8px; font-size: 12px; }
@media (max-width: 599px) {
  .woque.woque-scope .woque-cs__cell { min-height: 54px; padding: 3px; }
  .woque.woque-scope .woque-cs__chip em { display: none; }
  .woque.woque-scope .woque-cs__chip { padding: 1px 3px; font-size: 10px; }
}
.woque.woque-scope .woque-cs__add { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: box-shadow 0.3s ease; }
.woque.woque-scope .woque-cs__add.is-flash { box-shadow: 0 0 0 4px rgba(163, 21, 95, 0.25); }
.woque.woque-scope .woque-cs__add h3 { font-size: 18px; }
.woque.woque-scope .woque-cs__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.woque.woque-scope .woque-cs__fields .woque-field { min-width: 0; margin: 0; }
.woque.woque-scope .woque-cs__wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .woque.woque-scope .woque-cs__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.woque.woque-scope .woque-cs__freelist summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--plum); font-weight: 700; cursor: pointer; }
.woque.woque-scope .woque-cs__freelist ul { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.woque.woque-scope .woque-cs__freelist li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 6px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line-soft); }
.woque.woque-scope .woque-cs__freelist form { margin: 0; }
.woque.woque-scope .woque-link--danger { color: #9B1C1C; }

/* The Guide tab. */
.woque.woque-scope .woque-cs__guide { display: flex; flex-direction: column; gap: 18px; }
.woque.woque-scope .woque-cs__gintro { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, #FFF7FB, var(--lilac)); }
.woque.woque-scope .woque-cs__gintro h2 { font-size: 24px; }
.woque.woque-scope .woque-cs__gintro p { margin: 0; color: var(--muted); }
.woque.woque-scope .woque-cs__timeline { display: flex; flex-direction: column; gap: 10px; padding: 26px 18px 16px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.woque.woque-scope .woque-cs__track { position: relative; height: 10px; margin: 18px 14px 6px; border-radius: 999px; background: var(--line-soft); }
.woque.woque-scope .woque-cs__win { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #E8739E, var(--magenta), #E8739E); }
.woque.woque-scope .woque-cs__pt { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: #fff; color: var(--plum); font-size: 16px; line-height: 1; cursor: pointer; transform: translate(-50%, -50%); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.woque.woque-scope .woque-cs__pt:hover { transform: translate(-50%, -50%) scale(1.1); }
.woque.woque-scope .woque-cs__pt.is-on { border-color: var(--magenta); box-shadow: 0 0 0 5px rgba(163, 21, 95, 0.18); transform: translate(-50%, -50%) scale(1.12); }
.woque.woque-scope .woque-cs__pt.is-anniv { width: 46px; height: 46px; font-size: 20px; }
.woque.woque-scope .woque-cs__scale { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.woque.woque-scope .woque-cs__explain > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--paper); animation: woque-cs-in 0.2s ease; }
.woque.woque-scope .woque-cs__explain > div[hidden] { display: none; }
.woque.woque-scope .woque-cs__explain span { font-size: 15px; color: var(--muted); }
@keyframes woque-cs-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.woque.woque-scope .woque-cs__stages { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.woque.woque-scope .woque-cs__stage { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.woque.woque-scope .woque-cs__stage.is-open { border-color: var(--magenta); box-shadow: 0 8px 22px rgba(46, 15, 56, 0.08); }
.woque.woque-scope .woque-cs__stagehead { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; background: none; color: var(--ink); font: 700 16px 'Figtree', sans-serif; text-align: left; cursor: pointer; }
.woque.woque-scope .woque-cs__stagenum { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lilac); color: var(--plum); font-size: 14px; }
.woque.woque-scope .woque-cs__stage.is-open .woque-cs__stagenum { background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-cs__stagebody { display: none; grid-template-columns: 1fr; gap: 10px; padding: 0 16px 16px; }
.woque.woque-scope .woque-cs__stage.is-open .woque-cs__stagebody { display: grid; animation: woque-cs-in 0.2s ease; }
@media (min-width: 700px) { .woque.woque-scope .woque-cs__stagebody { grid-template-columns: 1fr 1fr; } }
.woque.woque-scope .woque-cs__side { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; }
.woque.woque-scope .woque-cs__side p { margin: 0; font-size: 15px; line-height: 1.5; }
.woque.woque-scope .woque-cs__side--her { background: #FFF4F9; }
.woque.woque-scope .woque-cs__side--you { background: #F3FAF6; }
.woque.woque-scope .woque-cs__side .woque-cs__act { align-self: flex-start; margin-top: 4px; }
.woque.woque-scope .woque-cs__sidelabel { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.woque.woque-scope .woque-cs__rules { padding: 18px; border-radius: 18px; background: var(--paper); }
.woque.woque-scope .woque-cs__rules h3 { margin-bottom: 8px; font-size: 17px; }
.woque.woque-scope .woque-cs__rules ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; list-style: disc; }

/* On My WOQUE's Cool Seat tab. */
.woque.woque-scope .woque-cs--hub { gap: 14px; }
.woque.woque-scope .woque-cs__hubhead { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, var(--plum), #5B1E6E); color: #fff; }
.woque.woque-scope .woque-cs__hubhead h2 { font-size: 22px; color: #fff; }
.woque.woque-scope .woque-cs__hubhead p { margin: 2px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.woque.woque-scope .woque-cs__hubbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.woque.woque-scope .woque-cs__hubbtns .woque-outline { border-color: #fff; background: transparent; color: #fff; }

/* The guided tour. */
html.woque-cs-touring { scroll-behavior: auto; }
.woque.woque-scope .woque-cs-tour { position: fixed; inset: 0; z-index: 9990; }
.woque.woque-scope .woque-cs-tour[hidden] { display: none; }
.woque.woque-scope .woque-cs-tour__spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(36, 16, 43, 0.62), 0 0 0 3px var(--gold); pointer-events: none; transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.2s ease; }
.woque.woque-scope .woque-cs-tour__card { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); animation: woque-cs-in 0.2s ease; }
.woque.woque-scope .woque-cs-tour__card h2 { padding-right: 30px; font-size: 20px; line-height: 1.25; }
.woque.woque-scope .woque-cs-tour__card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.woque.woque-scope .woque-cs-tour__step { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-cs-tour__x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--lilac); color: var(--plum); font-size: 22px; line-height: 1; cursor: pointer; }
.woque.woque-scope .woque-cs-tour__dots { display: flex; gap: 5px; }
.woque.woque-scope .woque-cs-tour__dots span { width: 18px; height: 5px; border-radius: 3px; background: var(--lilac); }
.woque.woque-scope .woque-cs-tour__dots span.is-on { background: var(--magenta); }
.woque.woque-scope .woque-cs-tour__btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.woque.woque-scope .woque-cs-tour__btns button { min-height: 44px; padding: 0 18px; border-radius: 12px; font: 700 15px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-cs-tour__back { border: 1px solid var(--line); background: #fff; color: var(--plum); }
.woque.woque-scope .woque-cs-tour__next { border: 0; background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-cs-tour__next:focus-visible, .woque.woque-scope .woque-cs-tour__back:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (min-width: 700px) {
  .woque.woque-scope .woque-cs-tour__card { right: auto; bottom: auto; width: 380px; transition: top 0.25s ease, left 0.25s ease; }
  .woque.woque-scope .woque-cs-tour__card.is-center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .woque.woque-scope .woque-cs-tour__spot, .woque.woque-scope .woque-cs-tour__card, .woque.woque-scope .woque-cs__pt { transition: none; animation: none; }
}
.woque.woque-scope .woque-cs__chip span { overflow: hidden; white-space: nowrap; }
.woque.woque-scope .woque-cs__later[open] .woque-cs__items { margin-top: 8px; }
@media (max-width: 599px) { .woque.woque-scope .woque-cs__chip span { font-size: 9px; letter-spacing: -0.02em; } }
.woque.woque-scope .woque-cs__duty { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid #CFE8DA; border-radius: 16px; background: #F3FAF6; }
.woque.woque-scope .woque-cs__dutytext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woque.woque-scope .woque-cs__dutytext strong { font-size: 16px; color: #14553B; }
.woque.woque-scope .woque-cs__dutytext > span:last-child:not(.woque-cs__sidelabel) { font-size: 13px; color: #8A5A00; }
.woque.woque-scope .woque-cs__awayform { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; font-size: 14px; color: #8A5A00; font-weight: 600; }
.woque.woque-scope .woque-cs__awaybox[open] { flex-basis: 100%; }

/* Guide: "See it through their eyes", a walk-through of each person's screens in a phone. */
.woque.woque-scope .woque-gs { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: #fff; scroll-margin-top: 16px; }
.woque.woque-scope .woque-gs__head h2 { font-size: 22px; }
.woque.woque-scope .woque-gs__head p { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.woque.woque-scope .woque-gs__h { margin: 6px 0 -6px; font-size: 20px; }
.woque.woque-scope .woque-gs__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.woque.woque-scope .woque-gs__role { display: flex; gap: 10px; align-items: center; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.woque.woque-scope .woque-gs__role:hover { border-color: #D6BFDD; }
.woque.woque-scope .woque-gs__role.is-on { border-color: var(--magenta); background: #FFF4F9; box-shadow: 0 0 0 3px rgba(163, 21, 95, 0.14); }
.woque.woque-scope .woque-gs__role:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.woque.woque-scope .woque-gs__roleicon { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #fff; font-size: 20px; }
.woque.woque-scope .woque-gs__roletext { display: flex; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-gs__roletext strong { font-size: 15px; line-height: 1.25; }
.woque.woque-scope .woque-gs__roletext span { font-size: 12px; line-height: 1.3; color: var(--muted); }
.woque.woque-scope .woque-gs__pane { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; animation: woque-cs-in 0.2s ease; }
.woque.woque-scope .woque-gs__pane[hidden] { display: none; }
@media (min-width: 760px) {
  .woque.woque-scope .woque-gs__roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .woque.woque-scope .woque-gs__pane { grid-template-columns: 340px minmax(0, 1fr); gap: 26px; }
  .woque.woque-scope .woque-gs__pane:has(.is-desk) { grid-template-columns: 400px minmax(0, 1fr); }
  .woque.woque-scope .woque-gs__side { position: sticky; top: 16px; }
}

/* The phone (and, for the site admin, a browser window). */
.woque.woque-scope .woque-gs__frame { display: flex; justify-content: center; padding: 18px 0; border-radius: 20px; background: radial-gradient(circle at 50% 30%, #F7EAF2, var(--lilac)); }
.woque.woque-scope .woque-gs-phone { display: flex; flex-direction: column; width: min(300px, 100%); padding: 10px; border-radius: 38px; background: #1E0B25; box-shadow: 0 20px 40px rgba(46, 15, 56, 0.25); }
.woque.woque-scope .woque-gs-phone__bar { align-self: center; width: 90px; height: 22px; margin-bottom: -26px; border-radius: 0 0 14px 14px; background: #1E0B25; position: relative; z-index: 2; }
.woque.woque-scope .woque-gs-phone__screen { position: relative; height: 540px; overflow-x: hidden; overflow-y: auto; border-radius: 30px; background: #fff; overscroll-behavior: contain; scrollbar-width: thin; }
.woque.woque-scope .woque-gs__frame.is-desk { padding: 18px 12px; }
.woque.woque-scope .woque-gs__frame.is-desk .woque-gs-phone { width: 100%; max-width: 400px; padding: 0; border-radius: 14px; background: #fff; border: 1px solid #D9CCE0; box-shadow: 0 16px 34px rgba(46, 15, 56, 0.18); overflow: hidden; }
.woque.woque-scope .woque-gs__frame.is-desk .woque-gs-phone__bar { display: flex; gap: 6px; align-items: center; align-self: stretch; width: auto; height: 28px; margin: 0; padding: 0 12px; border-radius: 0; background: #F0E8F2; }
.woque.woque-scope .woque-gs__frame.is-desk .woque-gs-phone__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D3C2DA; }
.woque.woque-scope .woque-gs__frame.is-desk .woque-gs-phone__screen { height: 380px; border-radius: 0; background: #F6F7F7; }
.woque.woque-scope .woque-gs-screen { display: flex; flex-direction: column; gap: 0; min-height: 100%; font-size: 14px; user-select: none; animation: woque-cs-in 0.25s ease; }
.woque.woque-scope .woque-gs-screen[hidden] { display: none; }
.woque.woque-scope .woque-gs-screen > * { flex-shrink: 0; }

/* Inside the phone the page is narrow, whatever the width of the real screen. */
.woque.woque-scope .woque-gs-pad { display: flex; flex-direction: column; gap: 10px; padding: 34px 12px 16px; }
.woque.woque-scope .woque-gs-phone h2 { font-size: 17px; line-height: 1.25; }
.woque.woque-scope .woque-gs-phone h3 { font-size: 15px; }
.woque.woque-scope .woque-gs-phone p { font-size: 13px; }
.woque.woque-scope .woque-gs-phone .woque-cs__hero { gap: 12px; padding: 14px; border-radius: 16px; }
.woque.woque-scope .woque-gs-phone .woque-cs__herotext strong { font-size: 16px; }
.woque.woque-scope .woque-gs-phone .woque-cs__herotext span { font-size: 12px; }
.woque.woque-scope .woque-gs-phone .woque-cs__card { gap: 8px; padding: 14px; border-radius: 16px; }
.woque.woque-scope .woque-gs-phone .woque-cs__item { grid-template-columns: 1fr; gap: 8px; padding: 12px; border-radius: 14px; }
.woque.woque-scope .woque-gs-phone .woque-cs__acts { flex-wrap: wrap; gap: 6px; }
.woque.woque-scope .woque-gs-phone .woque-cs__act { min-height: 34px; padding: 0 12px; font-size: 13px; }
.woque.woque-scope .woque-gs-phone .woque-cs__btn, .woque.woque-scope .woque-gs-phone .woque-cs__go { min-height: 40px; padding: 0 14px; font-size: 14px; align-self: stretch; justify-content: center; }
.woque.woque-scope .woque-gs-phone .woque-cs__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.woque.woque-scope .woque-gs-phone .woque-cs__wide { grid-column: 1 / -1; }
.woque.woque-scope .woque-gs-phone .woque-cs__cell { min-height: 54px; padding: 3px; }
.woque.woque-scope .woque-gs-phone .woque-cs__chip { padding: 1px 3px; font-size: 10px; }
.woque.woque-scope .woque-gs-phone .woque-cs__chip em { display: none; }
.woque.woque-scope .woque-gs-phone .woque-cs__add { padding: 12px; gap: 8px; }
.woque.woque-scope .woque-gs-phone .woque-cs__hubhead { padding: 12px; border-radius: 14px; }
.woque.woque-scope .woque-gs-phone .woque-cs__hubhead h2 { font-size: 17px; }
.woque.woque-scope .woque-gs-phone .woque-cs__duty { padding: 10px 12px; }
.woque.woque-scope .woque-gs-phone .woque-cs__awaybox { flex-basis: 100%; }
.woque.woque-scope .woque-gs-phone .woque-todo { margin: 0; padding: 14px; gap: 10px; }
.woque.woque-scope .woque-gs-phone .woque-todo__item:not(.is-done) { grid-template-columns: 26px 1fr; }
.woque.woque-scope .woque-gs-phone .woque-todo__go { grid-column: 2; grid-row: auto; justify-self: start; min-height: 34px; margin-top: 4px; font-size: 13px; }
.woque.woque-scope .woque-gs-phone .woque-note { padding: 12px; }
.woque.woque-scope .woque-gs-phone input[type="radio"] { pointer-events: none; }
.woque.woque-scope .woque-gs-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--paper); }
.woque.woque-scope .woque-gs-form .woque-cs__act { align-self: flex-start; }
.woque.woque-scope .woque-gs-input { display: flex; align-items: center; min-height: 38px; padding: 0 10px; overflow: hidden; font-size: 13px; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }

/* Her lock screen with one notification. */
.woque.woque-scope .woque-gs-lock { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; gap: 22px; padding: 64px 12px 20px; background: linear-gradient(170deg, #5B1E6E 0%, #A3155F 60%, #E8739E 100%); color: #fff; }
.woque.woque-scope .woque-gs-lock__time { font: 300 58px/1 'Figtree', sans-serif; letter-spacing: -0.02em; }
.woque.woque-scope .woque-gs-push { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); animation: woque-gs-drop 0.45s cubic-bezier(.2, .9, .3, 1.2); }
.woque.woque-scope .woque-gs-push strong { font-size: 14px; line-height: 1.3; }
.woque.woque-scope .woque-gs-push > span:last-child { font-size: 13px; line-height: 1.4; color: #3F2A47; }
.woque.woque-scope .woque-gs-push__app { display: flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.woque.woque-scope .woque-gs-push__icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--plum); font-size: 11px; }
@keyframes woque-gs-drop { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: none; } }
.woque.woque-scope .woque-gs-lock + .woque-gs-pad { padding-top: 14px; }
.woque.woque-scope .woque-gs-screen:has(.woque-gs-lock + .woque-gs-pad) .woque-gs-lock { flex: none; padding: 40px 12px 16px; gap: 12px; }
.woque.woque-scope .woque-gs-screen:has(.woque-gs-lock + .woque-gs-pad) .woque-gs-lock__time { font-size: 32px; }

/* My WOQUE's tabs and the desk's tabs, in small. */
.woque.woque-scope .woque-gs-tabs, .woque.woque-scope .woque-gs-desk { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--lilac); font-size: 12px; font-weight: 700; color: var(--muted); }
.woque.woque-scope .woque-gs-tabs span, .woque.woque-scope .woque-gs-desk span { display: flex; flex: 1; gap: 4px; align-items: center; justify-content: center; min-height: 30px; padding: 0 6px; border-radius: 9px; white-space: nowrap; }
.woque.woque-scope .woque-gs-tabs span.is-on, .woque.woque-scope .woque-gs-desk span.is-on { background: #fff; color: var(--plum); box-shadow: 0 2px 6px rgba(46, 15, 56, 0.1); }
.woque.woque-scope .woque-gs-tabs b, .woque.woque-scope .woque-gs-desk b { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--magenta); color: #fff; font-size: 10px; }

/* The "are you sure" sheet rising over a dimmed page. */
.woque.woque-scope .woque-gs-dim { filter: brightness(0.55) saturate(0.8); }
.woque.woque-scope .woque-gs-screen:has(.woque-gs-sheet) { position: relative; background: #8C8090; }
.woque.woque-scope .woque-gs-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 16px 22px; border-radius: 22px 22px 0 0; background: #fff; text-align: center; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2); animation: woque-gs-rise 0.4s cubic-bezier(.2, .9, .3, 1.1); }
.woque.woque-scope .woque-gs-sheet strong { font-size: 16px; line-height: 1.3; }
.woque.woque-scope .woque-gs-sheet > span:not([class]) { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-gs-sheet__grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
.woque.woque-scope .woque-gs-sheet__icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-top: 4px; border-radius: 50%; background: var(--lilac); color: var(--plum); font-size: 20px; font-weight: 800; }
.woque.woque-scope .woque-gs-sheet__yes, .woque.woque-scope .woque-gs-sheet__no { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 44px; border-radius: 14px; font-size: 15px; font-weight: 700; }
.woque.woque-scope .woque-gs-sheet__yes { margin-top: 6px; background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-gs-sheet__no { border: 1px solid var(--line); color: var(--plum); }
@keyframes woque-gs-rise { from { transform: translateY(100%); } to { transform: none; } }

/* wp-admin screens, in small. */
.woque.woque-scope .woque-gs-admin { padding-top: 14px; background: #F6F7F7; }
.woque.woque-scope .woque-gs-crumb { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #50575E; }
.woque.woque-scope .woque-gs-list { display: flex; flex-direction: column; margin: 0; padding: 0; border: 1px solid #DCDCDE; border-radius: 10px; background: #fff; list-style: none; }
.woque.woque-scope .woque-gs-list li { display: flex; gap: 10px; justify-content: space-between; padding: 10px 12px; border-top: 1px solid #F0F0F1; font-size: 13px; }
.woque.woque-scope .woque-gs-list li:first-child { border-top: 0; }
.woque.woque-scope .woque-gs-list b { color: var(--plum); white-space: nowrap; }
.woque.woque-scope .woque-gs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.woque.woque-scope .woque-gs-stats span { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid #DCDCDE; border-radius: 10px; background: #fff; }
.woque.woque-scope .woque-gs-stats em { font-size: 12px; font-style: normal; color: #50575E; }
.woque.woque-scope .woque-gs-stats b { font-size: 26px; line-height: 1; color: var(--plum); }
.woque.woque-scope .woque-gs-stats span.is-hot { border-color: var(--magenta); background: #FFF4F9; }
.woque.woque-scope .woque-gs-stats span.is-hot b { color: var(--magenta); }

/* Beside the phone: what this screen is, the buttons, and every step. */
.woque.woque-scope .woque-gs__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.woque.woque-scope .woque-gs__caption > div { display: flex; flex-direction: column; gap: 6px; min-height: 132px; animation: woque-cs-in 0.2s ease; }
.woque.woque-scope .woque-gs__caption > div[hidden] { display: none; }
.woque.woque-scope .woque-gs__count { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-gs__caption h3 { font-size: 21px; line-height: 1.25; }
.woque.woque-scope .woque-gs__caption p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.woque.woque-scope .woque-gs__caption .woque-gs__tip { padding: 10px 12px; border-radius: 12px; background: #FFF8E6; font-size: 14px; color: #6B4A00; }
.woque.woque-scope .woque-gs__ctrl { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.woque.woque-scope .woque-gs__btn { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--plum); font: 700 15px 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-gs__btn:disabled { opacity: 0.4; cursor: default; }
.woque.woque-scope .woque-gs__btn--next { border-color: var(--magenta); background: var(--magenta); color: #fff; }
.woque.woque-scope .woque-gs__btn--next.is-onward { border-color: var(--plum); background: var(--plum); }
.woque.woque-scope .woque-gs__btn:focus-visible, .woque.woque-scope .woque-gs__steps button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.woque.woque-scope .woque-gs__dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-width: 0; }
.woque.woque-scope .woque-gs__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: width 0.2s ease, background 0.2s ease; }
.woque.woque-scope .woque-gs__dots span.is-on { width: 20px; border-radius: 4px; background: var(--magenta); }
.woque.woque-scope .woque-gs__steps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.woque.woque-scope .woque-gs__steps button { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 42px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 600 15px 'Figtree', sans-serif; text-align: left; cursor: pointer; }
.woque.woque-scope .woque-gs__steps button:hover { background: var(--paper); color: var(--ink); }
.woque.woque-scope .woque-gs__steps button.is-on { background: #FFF4F9; color: var(--ink); font-weight: 700; }
.woque.woque-scope .woque-gs__num { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lilac); color: var(--plum); font-size: 13px; font-weight: 700; }
.woque.woque-scope .woque-gs__steps button.is-done .woque-gs__num { background: #DDF1E6; color: #14553B; }
.woque.woque-scope .woque-gs__steps button.is-on .woque-gs__num { background: var(--magenta); color: #fff; }
@media (max-width: 759px) {
  .woque.woque-scope .woque-gs { padding: 16px 14px; }
  .woque.woque-scope .woque-gs-phone__screen { height: 500px; }
  .woque.woque-scope .woque-gs__side { display: contents; }
  .woque.woque-scope .woque-gs__caption { order: -2; }
  .woque.woque-scope .woque-gs__caption > div { min-height: 0; }
  .woque.woque-scope .woque-gs__steps { display: none; }
  .woque.woque-scope .woque-gs__ctrl { order: -1; }
  .woque.woque-scope .woque-gs__dots { flex-wrap: nowrap; gap: 3px; }
  .woque.woque-scope .woque-gs__dots span { width: 6px; height: 6px; }
  .woque.woque-scope .woque-gs__dots span.is-on { width: 14px; }
  .woque.woque-scope .woque-gs__role { gap: 8px; padding: 8px 10px; }
  .woque.woque-scope .woque-gs__roleicon { width: 30px; height: 30px; font-size: 17px; border-radius: 10px; }
  .woque.woque-scope .woque-gs__pane { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .woque.woque-scope .woque-gs-push, .woque.woque-scope .woque-gs-sheet, .woque.woque-scope .woque-gs-screen, .woque.woque-scope .woque-gs__pane { animation: none; }
}

/* ---------- Cool Seat 0.77.0: seats per date, the room, questions ---------- */
.woque.woque-scope .woque-cs__times { align-items: center; }
.woque.woque-scope .woque-cs__seatnote { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-cs__roombtn { gap: 8px; box-shadow: 0 10px 24px -12px rgba(163, 21, 95, 0.7); animation: woque-cs-glow 2.6s ease-in-out infinite; }
@keyframes woque-cs-glow { 0%, 100% { box-shadow: 0 10px 24px -12px rgba(163, 21, 95, 0.7); } 50% { box-shadow: 0 10px 30px -8px rgba(242, 182, 50, 0.9); } }
.woque.woque-scope .woque-cs__act--room { background: var(--plum); color: #fff; border-color: var(--plum); }
.woque.woque-scope .woque-cs__qs { gap: 14px; background: linear-gradient(160deg, #FFF7FB, #fff 55%); }
.woque.woque-scope .woque-cs__qs.is-done { background: linear-gradient(160deg, #EEF8F2, #fff 55%); }
.woque.woque-scope .woque-cs__qshead { display: flex; gap: 14px; align-items: center; }
.woque.woque-scope .woque-cs__qshead h2 { font-size: 20px; }
.woque.woque-scope .woque-cs__progress { --p: 0; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(var(--magenta) calc(var(--p) * 1%), #F1E6F4 0); }
.woque.woque-scope .woque-cs__progress > span { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--plum); font-size: 15px; }
.woque.woque-scope .woque-cs__qs.is-done .woque-cs__progress { background: #2E9E5B; }
.woque.woque-scope .woque-cs__qs.is-done .woque-cs__progress > span { color: #2E9E5B; font-size: 24px; }
.woque.woque-scope .woque-cs__qdetails > summary { cursor: pointer; font-weight: 700; color: var(--magenta); padding: 6px 0; }
.woque.woque-scope .woque-cs__answerform { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.woque.woque-scope .woque-cs__answer { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color 0.2s ease; }
.woque.woque-scope .woque-cs__answer.is-answered { border-color: rgba(46, 158, 91, 0.45); }
.woque.woque-scope .woque-cs__answer .woque-label { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.woque.woque-scope .woque-cs__qnum { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lilac); color: var(--plum); font-size: 12px; font-weight: 800; }
.woque.woque-scope .woque-cs__answer.is-answered .woque-cs__qnum { background: #2E9E5B; color: #fff; }
.woque.woque-scope .woque-cs__qa { margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.woque.woque-scope .woque-cs__qa dt { font-weight: 700; color: var(--plum); margin-top: 8px; }
.woque.woque-scope .woque-cs__qa dd { margin: 0; white-space: pre-wrap; }
.woque.woque-scope .woque-cs__qa dd.is-open { color: var(--muted); font-style: italic; }
.woque.woque-scope .woque-cs__earlier { font-weight: 600; font-size: 12px; color: var(--muted); }
.woque.woque-scope .woque-cs__answers { flex-basis: 100%; }
.woque.woque-scope .woque-cs__qlist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-cs__qlist .is-off { color: var(--muted); text-decoration: line-through; }
.woque.woque-scope .woque-cs__qform { display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-cs__qedit { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-cs__qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: transform 0.25s ease, opacity 0.2s ease; }
.woque.woque-scope .woque-cs__qrow .woque-input { flex: 1 1 240px; min-width: 0; }
.woque.woque-scope .woque-cs__qrow.is-off { opacity: 0.6; }
.woque.woque-scope .woque-cs__qrow.is-moved { animation: woque-cs-moved 0.5s ease; }
@keyframes woque-cs-moved { 0% { background: #FFF3D6; } 100% { background: #fff; } }
.woque.woque-scope .woque-cs__qtools { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.woque.woque-scope .woque-cs__qtools label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; cursor: pointer; }
.woque.woque-scope .woque-cs__qmove { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--plum); cursor: pointer; font-weight: 800; }
.woque.woque-scope .woque-cs__qdel { color: #b0123f; }
.woque.woque-scope .woque-pf__seats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.woque.woque-scope .woque-pf__seat { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #FFF6DA, #F2B632); color: #2E0F38; font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px -6px rgba(217, 154, 18, 0.8); animation: woque-cs-seat-in 0.6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes woque-cs-seat-in { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ Library series (0.78.0) */
@keyframes woque-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes woque-pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 36, 94, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(224, 36, 94, 0); } }
@keyframes woque-ringfill { from { --p0: 0; } }
@property --p0 { syntax: '<number>'; inherits: false; initial-value: 0; }

/* A card's place in its series */
.woque.woque-scope .woque-libcard__series { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; margin: 2px 0 4px; padding: 3px 10px 3px 3px; border-radius: 999px; background: linear-gradient(90deg, #F6E6EF, #FBF2DC); color: var(--plum); font-size: 12px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.woque.woque-scope .woque-libcard__series b { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 10px; }
.woque.woque-scope .woque-libcard--big .woque-libcard__series { background: rgba(255, 255, 255, .14); color: #fff; }
.woque.woque-scope .woque-libcard--big .woque-libcard__series b { background: var(--gold); color: var(--plum); }

/* Sidebar on a PC: a few series */
.woque.woque-scope .woque-lib__group--series { display: none; }
.woque.woque-scope .woque-lib__serieslist { display: flex; flex-direction: column; gap: 4px; }
.woque.woque-scope .woque-lib__serieslist a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.25; text-decoration: none; }
.woque.woque-scope .woque-lib__serieslist a:hover { background: var(--lilac); }
.woque.woque-scope .woque-lib__seriesimg { flex: none; width: 40px; height: 40px; border-radius: 9px; overflow: hidden; box-shadow: 3px -3px 0 -1px #EBDDF0; }
.woque.woque-scope .woque-lib__seriesimg img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-lib__seriesimg svg { width: 18px; height: 18px; }
.woque.woque-scope .woque-lib__serieslist .woque-lib__seriesall { color: var(--magenta); font-weight: 700; padding-left: 8px; }
@media (min-width: 900px) { .woque.woque-scope .woque-lib__group--series { display: flex; } }

/* The Series view: cards with a fanned cover */
.woque.woque-scope .woque-sgrid-m { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 18px; padding-top: 8px; }
@media (min-width: 620px) { .woque.woque-scope .woque-sgrid-m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.woque.woque-scope .woque-sc { display: flex; flex-direction: column; gap: 14px; color: var(--ink); text-decoration: none; animation: woque-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.woque.woque-scope .woque-sc__stack { position: relative; display: block; margin: 10px 8px 0; }
.woque.woque-scope .woque-sc__stack::before, .woque.woque-scope .woque-sc__stack::after { content: ''; position: absolute; inset: -8px 14px 10px; border-radius: 18px; background: #E7D6EC; transform: rotate(-2.5deg); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.woque.woque-scope .woque-sc__stack::after { inset: -15px 26px 18px; background: #F3E9F5; transform: rotate(2deg); z-index: -1; }
.woque.woque-scope .woque-sc:hover .woque-sc__stack::before { transform: rotate(-5deg) translateX(-6px); }
.woque.woque-scope .woque-sc:hover .woque-sc__stack::after { transform: rotate(4.5deg) translateX(6px); }
.woque.woque-scope .woque-sc__img { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 34px -20px rgba(46, 15, 56, .55); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.woque.woque-scope .woque-sc:hover .woque-sc__img { transform: translateY(-4px); }
.woque.woque-scope .woque-sc__img img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-sc__count { position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(36, 16, 43, .72); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.woque.woque-scope .woque-sc__live { position: absolute; z-index: 2; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: #fff; color: #9B1C1C; font-size: 12px; font-weight: 700; box-shadow: 0 6px 16px rgba(36, 16, 43, .2); }
.woque.woque-scope .woque-sc__live i, .woque.woque-scope .woque-series__live i { width: 8px; height: 8px; border-radius: 50%; background: #E0245E; animation: woque-pulse 1.8s ease-out infinite; }
.woque.woque-scope .woque-sc__live.is-now { background: #E0245E; color: #fff; }
.woque.woque-scope .woque-sc__live.is-now i { background: #fff; }
.woque.woque-scope .woque-sc__body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.woque.woque-scope .woque-sc__body strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 22px; line-height: 1.15; color: var(--plum); }
.woque.woque-scope .woque-sc__about { color: var(--muted); font-size: 14px; line-height: 1.45; }
.woque.woque-scope .woque-sc__prog { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.woque.woque-scope .woque-sc__bar { flex: 1; display: flex; gap: 4px; }
.woque.woque-scope .woque-sc__bar span { flex: 1; height: 6px; border-radius: 3px; background: #E6DAEA; }
.woque.woque-scope .woque-sc__bar span.is-room { background: #F3D3E2; }
.woque.woque-scope .woque-sc__bar span.is-done { background: linear-gradient(90deg, var(--magenta), #D9467F); }
.woque.woque-scope .woque-sc__state { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }

/* On a Library item: the series ribbon */
.woque.woque-scope .woque-sribbon { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, var(--plum) 0%, #4A1A5C 60%, #6B1B55 100%); color: #fff; box-shadow: 0 18px 34px -24px rgba(46, 15, 56, .8); }
.woque.woque-scope .woque-sribbon__head { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.woque.woque-scope .woque-sribbon__head:hover { color: #fff; }
.woque.woque-scope .woque-sribbon__img { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; box-shadow: 4px -4px 0 -1px rgba(255, 255, 255, .22), 8px -8px 0 -2px rgba(255, 255, 255, .1); }
.woque.woque-scope .woque-sribbon__img img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-sribbon__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.woque.woque-scope .woque-sribbon__text small { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.woque.woque-scope .woque-sribbon__text strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 18px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woque.woque-scope .woque-sribbon__all { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 7px 10px 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 700; }
.woque.woque-scope .woque-sribbon__all svg, .woque.woque-scope .woque-sribbon__step svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-sribbon__strip { display: flex; gap: 4px; }
.woque.woque-scope .woque-sribbon__strip span { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.woque.woque-scope .woque-sribbon__strip span.is-done { background: rgba(242, 182, 50, .6); }
.woque.woque-scope .woque-sribbon__strip span.is-here { background: var(--gold); box-shadow: 0 0 10px rgba(242, 182, 50, .8); }
.woque.woque-scope .woque-sribbon__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.woque.woque-scope .woque-sribbon__step { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.woque.woque-scope .woque-sribbon__step:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.woque.woque-scope .woque-sribbon__step--next { flex-direction: row-reverse; text-align: right; }
.woque.woque-scope .woque-sribbon__step span { min-width: 0; display: flex; flex-direction: column; }
.woque.woque-scope .woque-sribbon__step small { color: #E4D3E9; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.woque.woque-scope .woque-sribbon__step strong { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* One series: hero and parts */
.woque.woque-scope .woque-series { display: flex; flex-direction: column; gap: 22px; padding: 0 0 40px; }
.woque.woque-scope .woque-series__hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 64px 18px 22px; background: var(--plum); color: #fff; isolation: isolate; }
.woque.woque-scope .woque-series__glow { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(38px) saturate(1.3); opacity: .55; transform: scale(1.1); }
.woque.woque-scope .woque-series__hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, rgba(46, 15, 56, .25), rgba(46, 15, 56, .92) 70%); }
.woque.woque-scope .woque-series__back { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; backdrop-filter: blur(8px); }
.woque.woque-scope .woque-series__back:hover { color: #fff; background: rgba(255, 255, 255, .24); }
.woque.woque-scope .woque-series__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-series__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 18px; align-items: start; }
.woque.woque-scope .woque-series__cover { grid-column: 1 / -1; position: relative; margin: 6px 10px 4px; }
.woque.woque-scope .woque-series__cover::before, .woque.woque-scope .woque-series__cover::after { content: ''; position: absolute; inset: -8px 14px 10px; border-radius: 18px; background: rgba(255, 255, 255, .16); transform: rotate(-3deg); }
.woque.woque-scope .woque-series__cover::after { inset: -15px 26px 18px; background: rgba(255, 255, 255, .08); transform: rotate(2.4deg); }
.woque.woque-scope .woque-series__img { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .55); }
.woque.woque-scope .woque-series__img img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-series__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.woque.woque-scope .woque-series__eyebrow { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.woque.woque-scope .woque-series__text h1 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 32px; line-height: 1.05; color: #fff; }
.woque.woque-scope .woque-series__text p { color: #E9DDEE; font-size: 15px; line-height: 1.55; }
.woque.woque-scope .woque-series__ring { --p0: var(--p); width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p0) * 1%), rgba(255, 255, 255, .14) 0); animation: woque-ringfill 1.2s cubic-bezier(.2, .7, .2, 1) .2s both; }
.woque.woque-scope .woque-series__ring > span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: var(--plum); line-height: 1; }
.woque.woque-scope .woque-series__ring strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 24px; }
.woque.woque-scope .woque-series__ring small { font-size: 13px; color: #CDB9D4; }
.woque.woque-scope .woque-series__ring em { margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #CDB9D4; }
.woque.woque-scope .woque-series__acts { display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-series__go, .woque.woque-scope .woque-series__live { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px 10px 12px; border-radius: 16px; text-decoration: none; }
.woque.woque-scope .woque-series__go { background: var(--gold); color: var(--plum); box-shadow: 0 14px 30px -16px rgba(242, 182, 50, .9); transition: transform .15s ease; }
.woque.woque-scope .woque-series__go:hover { color: var(--plum); transform: translateY(-2px); }
.woque.woque-scope .woque-series__go > svg { flex: none; width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: var(--plum); fill: var(--gold); stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.woque.woque-scope .woque-series__go span, .woque.woque-scope .woque-series__live span { display: flex; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-series__go small, .woque.woque-scope .woque-series__live small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.woque.woque-scope .woque-series__go strong, .woque.woque-scope .woque-series__live strong { font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woque.woque-scope .woque-series__live { min-height: 56px; padding-left: 18px; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.woque.woque-scope .woque-series__live:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.woque.woque-scope .woque-series__live.is-now { background: #E0245E; border-color: #E0245E; }
.woque.woque-scope .woque-series__live.is-now i { background: #fff; }
.woque.woque-scope .woque-series__live small { color: #F6B3CB; }
.woque.woque-scope .woque-series__live.is-now small { color: #fff; }
.woque.woque-scope .woque-series__all { padding: 14px 16px; border-radius: 16px; background: rgba(242, 182, 50, .16); color: #FCE7B2; font-weight: 700; }

.woque.woque-scope .woque-series__parts { list-style: none; display: flex; flex-direction: column; gap: 0; margin: 0 16px; padding: 0; }
.woque.woque-scope .woque-spt { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; animation: woque-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
.woque.woque-scope .woque-spt::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: -2px; width: 2px; background: repeating-linear-gradient(to bottom, #DCCBE2 0 6px, transparent 6px 11px); }
.woque.woque-scope .woque-spt:last-child::before { display: none; }
.woque.woque-scope .woque-spt--done::before { background: linear-gradient(var(--magenta), #D9467F); }
.woque.woque-scope .woque-spt__node { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin-top: 14px; border-radius: 50%; background: #fff; border: 2px solid #DCCBE2; color: var(--plum); font-weight: 800; font-size: 14px; }
.woque.woque-scope .woque-spt__node svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-spt--done .woque-spt__node { background: var(--magenta); border-color: var(--magenta); }
.woque.woque-scope .woque-spt--next .woque-spt__node { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(242, 182, 50, .25); }
.woque.woque-scope .woque-spt--live .woque-spt__node, .woque.woque-scope .woque-spt--soon .woque-spt__node { border-color: #E0245E; color: #E0245E; }
.woque.woque-scope .woque-spt--live .woque-spt__node { background: #E0245E; color: #fff; animation: woque-pulse 1.8s ease-out infinite; }
.woque.woque-scope .woque-spt__card { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.woque.woque-scope .woque-spt__card:hover { border-color: #CDBDD3; box-shadow: 0 12px 26px -18px rgba(46, 15, 56, .5); transform: translateX(2px); color: var(--ink); }
.woque.woque-scope .woque-spt--next .woque-spt__card { border-color: #F0D58E; box-shadow: 0 0 0 3px rgba(242, 182, 50, .18); }
.woque.woque-scope .woque-spt--live .woque-spt__card { border-color: #F4A9C3; }
.woque.woque-scope .woque-spt__img { grid-row: 1; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; }
.woque.woque-scope .woque-spt__img img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-spt--done .woque-spt__img { filter: saturate(.75); opacity: .9; }
.woque.woque-scope .woque-spt__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.woque.woque-scope .woque-spt__kind { display: inline-flex; align-items: center; gap: 5px; color: var(--magenta); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.woque.woque-scope .woque-spt__kind svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-spt__kind--play svg { fill: currentColor; }
.woque.woque-scope .woque-spt__kind--live { color: #C81E55; }
.woque.woque-scope .woque-spt__now { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #E0245E; color: #fff; letter-spacing: .04em; }
.woque.woque-scope .woque-spt__body strong { font-size: 16px; line-height: 1.25; }
.woque.woque-scope .woque-spt__when { color: var(--muted); font-size: 13px; }
.woque.woque-scope .woque-spt__done { align-self: flex-start; color: #14553B; font-size: 12px; font-weight: 700; }
.woque.woque-scope .woque-spt__go { grid-column: 1 / -1; justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: 12px; background: var(--lilac); color: var(--plum); font-size: 14px; font-weight: 700; }
.woque.woque-scope .woque-spt__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-spt--next .woque-spt__go { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-spt--live .woque-spt__go { background: #E0245E; color: #fff; }
.woque.woque-scope .woque-spt--done .woque-spt__go { background: transparent; color: var(--muted); }

@media (min-width: 900px) {
  .woque.woque-scope .woque-series { max-width: 1000px; margin: 0 auto; padding: 32px 32px 56px; gap: 28px; }
  .woque.woque-scope .woque-series__hero { padding: 72px 36px 30px; border-radius: 28px; }
  .woque.woque-scope .woque-series__in { grid-template-columns: 300px minmax(0, 1fr) auto; gap: 28px; align-items: center; }
  .woque.woque-scope .woque-series__cover { grid-column: auto; margin: 10px 0 0; }
  .woque.woque-scope .woque-series__text h1 { font-size: 44px; }
  .woque.woque-scope .woque-series__ring { width: 112px; height: 112px; }
  .woque.woque-scope .woque-series__ring > span { width: 92px; height: 92px; }
  .woque.woque-scope .woque-series__ring strong { font-size: 32px; }
  .woque.woque-scope .woque-series__acts { flex-direction: row; }
  .woque.woque-scope .woque-series__go, .woque.woque-scope .woque-series__live { flex: 1 1 0; min-width: 0; }
  .woque.woque-scope .woque-series__parts { margin: 0; }
  .woque.woque-scope .woque-spt { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 16px; }
  .woque.woque-scope .woque-spt::before { left: 21px; top: 44px; }
  .woque.woque-scope .woque-spt__node { width: 44px; height: 44px; margin-top: 22px; font-size: 16px; }
  .woque.woque-scope .woque-spt__card { grid-template-columns: 120px minmax(0, 1fr) auto; grid-template-rows: auto; gap: 18px; padding: 14px 18px 14px 14px; }
  .woque.woque-scope .woque-spt__img { width: 120px; height: 80px; }
  .woque.woque-scope .woque-spt__body strong { font-size: 18px; }
  .woque.woque-scope .woque-spt__go { grid-column: auto; min-width: 104px; }
  .woque.woque-scope .woque-sgrid-m { gap: 34px 26px; }
  .woque.woque-scope .woque-sribbon { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .woque.woque-scope .woque-sc, .woque.woque-scope .woque-spt, .woque.woque-scope .woque-series__ring { animation: none; }
  .woque.woque-scope .woque-sc__live i, .woque.woque-scope .woque-series__live i, .woque.woque-scope .woque-spt--live .woque-spt__node { animation: none; }
}

/* ------------------------------------------------------------------ My notes, Was this helpful?, certificate (0.78.0) */
.woque.woque-scope .woque-mynote { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: #FFFBF0; border: 1px solid #F3E2B3; box-shadow: 0 1px 0 #fff inset; }
.woque.woque-scope .woque-mynote__head { display: flex; align-items: center; gap: 12px; }
.woque.woque-scope .woque-mynote__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gold); color: var(--plum); }
.woque.woque-scope .woque-mynote__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.woque.woque-scope .woque-mynote h2 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 20px; color: var(--plum); }
.woque.woque-scope .woque-mynote__head p { display: inline-flex; align-items: center; gap: 5px; color: #7A6A2E; font-size: 13px; font-weight: 600; }
.woque.woque-scope .woque-mynote__head p svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-mynote textarea { width: 100%; min-height: 84px; padding: 14px 16px; border: 1px solid #EAD9A4; border-radius: 14px; background: #fff repeating-linear-gradient(transparent 0 27px, #F6EDD2 27px 28px); background-position: 0 12px; color: var(--ink); font: 400 16px/28px 'Figtree', sans-serif; resize: vertical; }
.woque.woque-scope .woque-mynote textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 182, 50, .25); }
.woque.woque-scope .woque-mynote__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.woque.woque-scope .woque-mynote__foot > span { color: #7A6A2E; font-size: 13px; }

.woque.woque-scope .woque-helpful { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-align: center; }
.woque.woque-scope .woque-helpful h2 { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 20px; color: var(--plum); }
.woque.woque-scope .woque-helpful__ask { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.woque.woque-scope .woque-helpful__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #CDBDD3; background: #fff; color: var(--plum); font: 700 15px 'Figtree', sans-serif; cursor: pointer; transition: transform .12s, background .15s, border-color .15s; }
.woque.woque-scope .woque-helpful__btn span { font-size: 20px; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1); }
.woque.woque-scope .woque-helpful__btn:hover span { transform: scale(1.25) rotate(-8deg); }
.woque.woque-scope .woque-helpful__btn--yes:hover, .woque.woque-scope .woque-helpful__btn--yes.is-on { border-color: #2E9E6F; background: #E9F7F0; }
.woque.woque-scope .woque-helpful__btn--no:hover, .woque.woque-scope .woque-helpful__btn--no.is-on { border-color: var(--magenta); background: #FBEFF5; }
.woque.woque-scope .woque-helpful__btn:active { transform: scale(.96); }
.woque.woque-scope .woque-helpful__done { display: flex; align-items: center; gap: 12px; text-align: left; }
.woque.woque-scope .woque-helpful__face { font-size: 30px; animation: woque-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes woque-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.woque.woque-scope .woque-helpful__done strong { display: block; color: var(--plum); }
.woque.woque-scope .woque-helpful__done a { font-size: 14px; color: var(--magenta); font-weight: 600; }
.woque.woque-scope .woque-helpful__say { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.woque.woque-scope .woque-helpful__say label { font-weight: 700; color: var(--plum); }
.woque.woque-scope .woque-helpful__say textarea { width: 100%; padding: 12px 14px; border: 1px solid #CDBDD3; border-radius: 12px; font: 400 16px 'Figtree', sans-serif; }
.woque.woque-scope .woque-helpful__say .woque-btn { align-self: flex-end; }

/* Library: My notes */
.woque.woque-scope .woque-lib__notes { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #FFFBF0; border: 1px solid #F3E2B3; color: var(--plum); font-weight: 700; text-decoration: none; }
.woque.woque-scope .woque-lib__notes svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.woque.woque-scope .woque-lib__notes span { flex: 1; }
.woque.woque-scope .woque-lib__notes b { padding: 1px 9px; border-radius: 999px; background: var(--gold); font-size: 13px; }
.woque.woque-scope .woque-notes__intro { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.woque.woque-scope .woque-notes__intro svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .woque.woque-scope .woque-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.woque.woque-scope .woque-notecard { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 18px; background: #FFFBF0; border: 1px solid #F3E2B3; color: var(--ink); text-decoration: none; animation: woque-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.woque.woque-scope .woque-notecard:hover { color: var(--ink); box-shadow: 0 12px 26px -18px rgba(122, 106, 46, .6); }
.woque.woque-scope .woque-notecard__img { width: 88px; height: 88px; border-radius: 12px; overflow: hidden; }
.woque.woque-scope .woque-notecard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.woque.woque-scope .woque-notecard__topic { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-notecard__topic:empty { display: none; }
.woque.woque-scope .woque-notecard strong { font-size: 16px; line-height: 1.25; color: var(--plum); }
.woque.woque-scope .woque-notecard__text { color: #5A4A2A; font-size: 14px; line-height: 1.45; font-style: italic; }
.woque.woque-scope .woque-notecard small { color: #9A8A5A; font-size: 12px; }

/* Series: the certificate */
.woque.woque-scope .woque-series__cert { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 18px; border-radius: 16px; background: linear-gradient(135deg, #F2B632, #F7D37A); color: var(--plum); text-decoration: none; box-shadow: 0 14px 30px -16px rgba(242, 182, 50, .9); animation: woque-pop .6s cubic-bezier(.2, 1.4, .4, 1) .3s both; }
.woque.woque-scope .woque-series__cert:hover { color: var(--plum); }
.woque.woque-scope .woque-series__cert > span:first-child { font-size: 30px; }
.woque.woque-scope .woque-series__cert > span:last-child { display: flex; flex-direction: column; }
.woque.woque-scope .woque-series__cert small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.woque.woque-scope .woque-series__cert strong { font-size: 17px; }
.woque.woque-scope .woque-scert-page { display: flex; flex-direction: column; gap: 16px; padding: 20px 16px 40px; max-width: 900px; margin: 0 auto; }
.woque.woque-scope .woque-scert-page__back a { color: var(--magenta); font-weight: 700; text-decoration: none; }
.woque.woque-scope .woque-scert-page__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.woque.woque-scope .woque-scert-page__acts span { color: var(--muted); font-size: 14px; }
.woque.woque-scope .woque-scert { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 28px 36px; background: #FFFDF7; color: var(--plum); border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(46, 15, 56, .45); overflow: hidden; }
.woque.woque-scope .woque-scert__frame { position: absolute; inset: 12px; border: 2px solid var(--gold); border-radius: 4px; pointer-events: none; }
.woque.woque-scope .woque-scert__frame::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(163, 21, 95, .35); }
.woque.woque-scope .woque-scert__crown svg, .woque.woque-scope .woque-scert__seal svg { width: 44px; height: 44px; fill: var(--gold); stroke: var(--plum); stroke-width: 1.1; stroke-linejoin: round; }
.woque.woque-scope .woque-scert__brand { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-scert h1 { margin-top: 14px; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 34px; line-height: 1.05; color: var(--plum); }
.woque.woque-scope .woque-scert__this, .woque.woque-scope .woque-scert__did { margin-top: 16px; color: #6A5A70; font-size: 15px; font-style: italic; }
.woque.woque-scope .woque-scert__name { margin-top: 6px; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 40px; line-height: 1.1; color: var(--magenta); border-bottom: 2px solid var(--gold); padding: 0 18px 6px; }
.woque.woque-scope .woque-scert__series { margin-top: 6px; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 26px; font-weight: 700; color: var(--plum); }
.woque.woque-scope .woque-scert__parts { list-style: decimal; margin: 18px auto 0; padding: 0 0 0 22px; max-width: 520px; text-align: left; columns: 2; column-gap: 32px; color: #4A3A50; font-size: 13px; line-height: 1.7; }
.woque.woque-scope .woque-scert__foot { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 26px; }
.woque.woque-scope .woque-scert__foot > span:not(.woque-scert__seal) { display: flex; flex-direction: column; min-width: 140px; padding-top: 8px; border-top: 1px solid #CDBDD3; }
.woque.woque-scope .woque-scert__foot small { color: #6A5A70; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.woque.woque-scope .woque-scert__seal { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--plum); box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px var(--plum); }
@media (min-width: 900px) { .woque.woque-scope .woque-scert { aspect-ratio: 297 / 210; padding: 56px 64px 44px; justify-content: center; } .woque.woque-scope .woque-scert h1 { font-size: 44px; } .woque.woque-scope .woque-scert__name { font-size: 52px; } }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body * { visibility: hidden !important; }
  .woque.woque-scope .woque-scert, .woque.woque-scope .woque-scert * { visibility: visible !important; }
  .woque.woque-scope .woque-scert { position: fixed; inset: 0; width: 297mm; height: 210mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; justify-content: center; padding: 18mm 24mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Cool Seat: a full date a Team Lead can still choose (last minute, adds an extra seat) */
.woque.woque-scope .woque-cs__time.is-full span { border-style: dashed; border-color: #E5A93B; background: #FFF8E8; color: #7a4b00; }
.woque.woque-scope .woque-cs__time.is-full input:checked + span, .woque.woque-scope .woque-cs__time.is-full.is-on span { border-style: solid; border-color: #D98A00; background: #FFE9B8; }
.woque.woque-scope .woque-cs__seatnote.is-full { color: #9a5b00; font-weight: 700; }

/* ---------- Cool Seat to-do guide (her guide, and the team's checklist per date) ---------- */
.woque.woque-scope .woque-csg-card h2 { margin-bottom: 4px; }
.woque.woque-scope .woque-csg { margin-top: 14px; }
.woque.woque-scope .woque-csg__head { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #2E0F38, #5b1a4a 70%, #7a2150); color: #fff; box-shadow: 0 14px 30px -20px rgba(46, 15, 56, 0.9); }
.woque.woque-scope .woque-csg.is-complete .woque-csg__head { background: linear-gradient(135deg, #1d6b3c, #2E9E5B); }
.woque.woque-scope .woque-csg__ring { --p: 0; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, 0.18) 0); position: relative; transition: background 0.6s ease; }
.woque.woque-scope .woque-csg__ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #3a1446; }
.woque.woque-scope .woque-csg.is-complete .woque-csg__ring::before { background: #22804a; }
.woque.woque-scope .woque-csg__ring b, .woque.woque-scope .woque-csg__ring small { position: relative; z-index: 1; }
.woque.woque-scope .woque-csg__ring b { font-size: 20px; line-height: 1; font-weight: 800; }
.woque.woque-scope .woque-csg__ring small { font-size: 10px; margin-left: 2px; opacity: 0.8; align-self: flex-end; margin-bottom: 18px; }
.woque.woque-scope .woque-csg__ring--sm { flex-basis: 40px; width: 40px; height: 40px; background: conic-gradient(var(--magenta) calc(var(--p) * 1%), #F1E6F4 0); }
.woque.woque-scope .woque-csg__ring--sm::before { inset: 4px; background: #fff; }
.woque.woque-scope .woque-csg__ring--sm b { font-size: 14px; color: var(--plum); }
.woque.woque-scope .woque-csg__headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.woque.woque-scope .woque-csg__headtext strong { font-size: 17px; line-height: 1.3; color: #fff; }
.woque.woque-scope .woque-csg__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.woque.woque-scope .woque-csg__head .woque-csg__due { align-self: flex-start; margin-top: 4px; background: rgba(255, 255, 255, 0.14); color: #fff; }
.woque.woque-scope .woque-csg__list { list-style: none; margin: 14px 0 0; padding: 0 0 0 0; position: relative; }
.woque.woque-scope .woque-csg__list::before { content: ''; position: absolute; left: 19px; top: 30px; bottom: 26px; width: 2px; background: var(--line); }
.woque.woque-scope .woque-csg__phase { position: relative; margin: 16px 0 6px 46px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-csg__phase:first-child { margin-top: 4px; }
.woque.woque-scope .woque-csg__step { position: relative; margin: 0 0 8px; }
.woque.woque-scope .woque-csg__step details { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.2s ease, background 0.2s ease; margin-left: 0; }
.woque.woque-scope .woque-csg__step details[open] { box-shadow: 0 0 0 1px var(--line), 0 10px 24px -18px rgba(46, 15, 56, 0.6); }
.woque.woque-scope .woque-csg__step summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 6px; cursor: pointer; }
.woque.woque-scope .woque-csg__step summary::-webkit-details-marker { display: none; }
.woque.woque-scope .woque-csg__dot { position: relative; z-index: 1; flex: 0 0 28px; width: 28px; height: 28px; margin-left: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: #fff; color: var(--plum); box-shadow: inset 0 0 0 2px var(--line); }
.woque.woque-scope .woque-csg__step.is-done .woque-csg__dot { background: #2E9E5B; color: #fff; box-shadow: none; }
.woque.woque-scope .woque-csg__step.is-next .woque-csg__dot { background: var(--magenta); color: #fff; box-shadow: 0 0 0 4px rgba(163, 21, 95, 0.15); }
.woque.woque-scope .woque-csg__step.is-late:not(.is-done) .woque-csg__dot { box-shadow: inset 0 0 0 2px #E5A93B; color: #9a5b00; }
.woque.woque-scope .woque-csg__step.is-next details { box-shadow: 0 0 0 2px var(--magenta), 0 10px 24px -18px rgba(163, 21, 95, 0.7); }
.woque.woque-scope .woque-csg__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.woque.woque-scope .woque-csg__title strong { font-size: 15px; line-height: 1.35; color: var(--ink); }
.woque.woque-scope .woque-csg__step.is-done .woque-csg__title strong { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(102, 84, 109, 0.4); }
.woque.woque-scope .woque-csg__due { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--muted); padding: 1px 8px; border-radius: 999px; background: var(--paper); }
.woque.woque-scope .woque-csg__due.is-today { background: #FFF3D6; color: #7a4b00; }
.woque.woque-scope .woque-csg__due.is-late { background: #FDE3E3; color: #a11d1d; }
.woque.woque-scope .woque-csg__chev { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.woque.woque-scope details[open] > summary .woque-csg__chev { transform: rotate(180deg); }
.woque.woque-scope .woque-csg__body { padding: 0 14px 14px 46px; animation: woque-csg-in 0.25s ease both; }
@keyframes woque-csg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.woque.woque-scope .woque-csg__body p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.woque.woque-scope .woque-csg__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.woque.woque-scope .woque-csg__tickform { margin: 0; }
.woque.woque-scope .woque-csg__go { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--magenta); color: #fff !important; font-weight: 800; font-size: 14px; text-decoration: none; }
.woque.woque-scope .woque-csg__go:hover { background: var(--magenta-dark); }
.woque.woque-scope .woque-csg__tick { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #E8F6EE; color: #1d6b3c; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: inset 0 0 0 1.5px #9fd8b6; }
.woque.woque-scope .woque-csg__tick:hover { background: #d8f0e2; }
.woque.woque-scope .woque-csg__undo { border: 0; background: none; padding: 8px 4px; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.woque.woque-scope .woque-csg__auto { font-size: 13px; font-weight: 700; color: var(--muted); }
.woque.woque-scope .woque-csg__step.is-done .woque-csg__auto { color: #1d6b3c; }
.woque.woque-scope .woque-csg__by { margin: 8px 0 0 !important; font-size: 12px !important; }
.woque.woque-scope .woque-csg__step.is-just .woque-csg__dot { animation: woque-csg-pop 0.7s cubic-bezier(.2, 1.8, .4, 1); }
.woque.woque-scope .woque-csg__step.is-just details { animation: woque-csg-glow 1.6s ease; }
@keyframes woque-csg-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes woque-csg-glow { 0% { box-shadow: 0 0 0 2px #2E9E5B, 0 0 24px 4px rgba(46, 158, 91, 0.4); } 100% { box-shadow: 0 0 0 1px var(--line); } }
.woque.woque-scope .woque-csg__spark { position: fixed; z-index: 9999; pointer-events: none; font-size: 20px; animation: woque-csg-spark 1.1s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes woque-csg-spark { 0% { transform: translate(0, 0) scale(0.6); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.1) rotate(var(--r)); opacity: 0; } }

/* The team's checklist: one card per Cool Seat date */
.woque.woque-scope .woque-csd-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.woque.woque-scope .woque-csd { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 28px -24px rgba(46, 15, 56, 0.7); overflow: hidden; }
.woque.woque-scope .woque-csd.is-today { box-shadow: 0 0 0 2px var(--gold), 0 12px 28px -20px rgba(217, 154, 18, 0.7); }
.woque.woque-scope .woque-csd.is-past { opacity: 0.8; }
.woque.woque-scope .woque-csd__head { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
.woque.woque-scope .woque-csd__head::-webkit-details-marker { display: none; }
.woque.woque-scope .woque-csd__cal { flex: 0 0 54px; height: 58px; border-radius: 14px; background: var(--plum); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.woque.woque-scope .woque-csd__cal strong { font-size: 22px; line-height: 1; }
.woque.woque-scope .woque-csd__cal span { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.woque.woque-scope .woque-csd__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.woque.woque-scope .woque-csd__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.woque.woque-scope .woque-csd__top strong { font-size: 15px; color: var(--ink); }
.woque.woque-scope .woque-csd__when { flex: 0 0 auto; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--lilac); color: var(--plum); }
.woque.woque-scope .woque-csd.is-today .woque-csd__when { background: var(--gold); }
.woque.woque-scope .woque-csd__brides { display: flex; align-items: center; gap: 4px; min-width: 0; }
.woque.woque-scope .woque-csd__brides .woque-cs__face { width: 24px; height: 24px; font-size: 10px; margin-right: -8px; box-shadow: 0 0 0 2px #fff; }
.woque.woque-scope .woque-csd__names { margin-left: 12px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woque.woque-scope .woque-csd__bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.woque.woque-scope .woque-csd__bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--magenta), var(--gold)); transition: width 0.6s ease; }
.woque.woque-scope .woque-csd__count { font-size: 12px; font-weight: 700; color: var(--muted); }
.woque.woque-scope .woque-csd__body { padding: 0 14px 16px; }
.woque.woque-scope .woque-csd__body .woque-csg { margin-top: 0; }
.woque.woque-scope .woque-csd__body .woque-csg__head { display: none; }
.woque.woque-scope .woque-csd__add { margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-csd__addtitle { margin: 0; font-weight: 800; color: var(--plum); font-size: 14px; }
.woque.woque-scope .woque-csd__addrow { display: flex; gap: 8px; flex-wrap: wrap; }
.woque.woque-scope .woque-csd__addrow select { flex: 1; min-width: 140px; }
.woque.woque-scope .woque-csd__addbtn { min-height: 44px; padding: 0 18px; }
.woque.woque-scope .woque-csd-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); }
.woque.woque-scope .woque-csd-banner > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.woque.woque-scope .woque-csd-banner strong { font-size: 14px; color: var(--plum); }
.woque.woque-scope .woque-csd-banner em { font-style: normal; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woque.woque-scope .woque-csd-banner__go { font-size: 20px; color: var(--magenta); }
@media (prefers-reduced-motion: reduce) {
  .woque.woque-scope .woque-csg__step.is-just .woque-csg__dot, .woque.woque-scope .woque-csg__step.is-just details, .woque.woque-scope .woque-csg__body { animation: none; }
}
.woque.woque-scope .woque-csg__step.is-next:not(.is-done) .woque-csg__dot { background: var(--magenta); color: #fff; box-shadow: 0 0 0 4px rgba(163, 21, 95, 0.15); }

/* Year in Woque card on My WOQUE (0.82.0) */
.woque.woque-scope .woque-yrcard { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 4px 0 2px; border-radius: 20px; text-decoration: none; color: #fff; background: radial-gradient(90% 140% at 100% 0%, #E0428A 0%, transparent 60%), radial-gradient(80% 120% at 0% 100%, #6B1E6E, transparent 70%), #2E0F38; box-shadow: 0 16px 34px -20px rgba(124, 15, 72, .8); isolation: isolate; }
.woque.woque-scope .woque-yrcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .2) 45%, transparent 60%); background-size: 250% 100%; animation: woque-yrsheen 4.5s ease-in-out infinite; }
.woque.woque-scope .woque-yrcard:hover, .woque.woque-scope .woque-yrcard:focus { color: #fff; }
.woque.woque-scope .woque-yrcard--soon { background: radial-gradient(90% 140% at 100% 0%, #F2B632 0%, transparent 55%), #431955; }
.woque.woque-scope .woque-yrcard__spark { font-size: 34px; flex-shrink: 0; animation: woque-yrfloat 3s ease-in-out infinite; }
.woque.woque-scope .woque-yrcard__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.woque.woque-scope .woque-yrcard__body strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; line-height: 1.15; }
.woque.woque-scope .woque-yrcard__body span { font-size: 14px; color: rgba(255, 255, 255, .85); }
.woque.woque-scope .woque-yrcard__eyebrow { font-size: 12px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F2B632 !important; }
.woque.woque-scope .woque-yrcard__go { flex-shrink: 0; padding: 9px 14px; border-radius: 999px; background: #F2B632; color: #2E0F38; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.woque.woque-scope .woque-yrcard__go:empty { display: none; }
@keyframes woque-yrsheen { 0%, 55% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes woque-yrfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .woque.woque-scope .woque-yrcard::before, .woque.woque-scope .woque-yrcard__spark { animation: none; } }

/* After the Cool Seat (0.88.0): the desk's After tab, and her "After your Cool Seat" card. */
.woque.woque-scope .woque-csa__list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.woque.woque-scope .woque-csa__none { color: var(--muted); font-size: 14px; }
.woque.woque-scope .woque-csa__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--paper); }
.woque.woque-scope .woque-csa__row.is-done { background: #EEF8F2; }
.woque.woque-scope .woque-csa__icon { font-size: 18px; flex: 0 0 auto; }
.woque.woque-scope .woque-csa__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.woque.woque-scope .woque-csa__text strong { font-size: 14px; overflow-wrap: anywhere; }
.woque.woque-scope .woque-csa__text small { color: var(--muted); font-size: 12px; }
.woque.woque-scope .woque-csa__x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.woque.woque-scope .woque-csa__x:hover { background: #fff; color: var(--magenta); }
.woque.woque-scope .woque-csa__auto { font-size: 12px; color: var(--muted); }
.woque.woque-scope .woque-csa__kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.woque.woque-scope .woque-csa__kinds legend { margin-bottom: 6px; }
.woque.woque-scope .woque-csa__kind { position: relative; cursor: pointer; }
.woque.woque-scope .woque-csa__kind input { position: absolute; opacity: 0; pointer-events: none; }
.woque.woque-scope .woque-csa__kind span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; }
.woque.woque-scope .woque-csa__kind input:checked + span { border-color: var(--plum); background: var(--plum); color: #fff; }
.woque.woque-scope .woque-csa__kind input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }
.woque.woque-scope .woque-csa__add[open] form { min-width: min(100%, 360px); }
.woque.woque-scope [data-csa-show][hidden] { display: none; }

.woque.woque-scope .woque-csa-mine { gap: 12px; background: linear-gradient(160deg, #FFF8E6, #fff 55%); }
.woque.woque-scope .woque-csa-mine__list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.woque.woque-scope .woque-csa-mine__item { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.woque.woque-scope .woque-csa-mine__item.is-done { opacity: 0.75; }
.woque.woque-scope .woque-csa-mine__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.woque.woque-scope .woque-csa-mine__item.is-done .woque-csa-mine__icon { background: #EEF8F2; color: #1F7A4A; font-weight: 800; }
.woque.woque-scope .woque-csa-mine__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.woque.woque-scope .woque-csa-mine__text strong { font-size: 16px; overflow-wrap: anywhere; }
.woque.woque-scope .woque-csa-mine__text span { color: var(--ink); font-size: 14px; }
.woque.woque-scope .woque-csa-mine__text small { color: var(--muted); font-size: 12px; }
.woque.woque-scope .woque-csa-mine__acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.woque.woque-scope .woque-csa-mine__acts form { margin: 0; }
.woque.woque-scope .woque-csa-mine__acts:empty { display: none; }
.woque.woque-scope .woque-csa-mine__tick { color: #1F7A4A; font-weight: 700; font-size: 14px; }
.woque.woque-scope .woque-todo__acts { grid-column: 2; justify-self: start; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.woque.woque-scope .woque-todo__doneform { margin: 0; }
.woque.woque-scope .woque-todo__acts .woque-todo__go { margin: 0; }
.woque.woque-scope .woque-todo__go.is-quiet { background: #fff; color: var(--magenta); box-shadow: inset 0 0 0 2px var(--magenta); }
.woque.woque-scope .woque-todo__go.is-quiet:hover, .woque.woque-scope .woque-todo__go.is-quiet:focus { background: #FBF5F9; color: var(--magenta-dark); }
@media (min-width: 700px) { .woque.woque-scope .woque-todo__acts { grid-column: 3; grid-row: 1; margin-top: 0; justify-self: end; flex-wrap: nowrap; } }
.woque.woque-scope .woque-todo__doneform .woque-todo__go { border: 0; cursor: pointer; font-family: inherit; }

/* ---------- Leaderboard (0.90.0) ---------- */
.woque.woque-scope .woque-lb-seg { display: flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.woque.woque-scope .woque-lb-seg a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; white-space: nowrap; border-radius: 999px; color: var(--muted); font-weight: 700; font-size: 15px; text-decoration: none; text-align: center; }
.woque.woque-scope .woque-lb-seg a:hover { color: var(--plum); background: var(--lilac); }
.woque.woque-scope .woque-lb-seg a.is-on { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-lb-me { background: var(--plum); color: #fff; border-radius: 22px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.woque.woque-scope .woque-lb-me__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.woque.woque-scope .woque-lb-me__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; color: rgba(255, 255, 255, .9); }
.woque.woque-scope .woque-lb-me__place { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 48px; line-height: 1; color: #fff; }
.woque.woque-scope .woque-lb-me__big { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 24px; line-height: 1.15; }
.woque.woque-scope .woque-lb-me__up { color: #8EE0B4; font-weight: 800; }
.woque.woque-scope .woque-lb-me__bar { display: block; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.woque.woque-scope .woque-lb-me__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.woque.woque-scope .woque-lb-me__line { font-size: 15px; color: rgba(255, 255, 255, .92); }
.woque.woque-scope .woque-lb-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-lb-card h2 { font-size: 20px; padding-bottom: 6px; }
.woque.woque-scope .woque-lb-card > p { padding-bottom: 10px; }
.woque.woque-scope .woque-lb-list li { display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--line-soft); }
.woque.woque-scope .woque-lb-list li.is-me { background: var(--lilac); margin: 0 -10px; padding: 0 10px; border-radius: 12px; }
.woque.woque-scope .woque-lb-list__place { flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-lb-list__place.is-gold { background: var(--gold); color: var(--plum); }
.woque.woque-scope .woque-lb-list__place.is-silver { background: #E3D6EA; color: var(--plum); }
.woque.woque-scope .woque-lb-list__place.is-rose { background: #F2CFE0; color: var(--plum); }
.woque.woque-scope .woque-lb-list__name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.woque.woque-scope .woque-lb-list__name em { font-style: normal; font-weight: 600; color: var(--magenta); }
.woque.woque-scope .woque-lb-ava { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 800; font-size: 13px; }
.woque.woque-scope .woque-lb-ava img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-lb-how li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--line-soft); font-size: 15px; }
.woque.woque-scope .woque-lb-how li strong { color: var(--magenta); white-space: nowrap; }
.woque.woque-scope .woque-lb-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 6px 0 10px; }
.woque.woque-scope .woque-lb-badges li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.woque.woque-scope .woque-lb-badges__icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #EFE8F2; }
.woque.woque-scope .woque-lb-badges__icon svg { width: 24px; height: 24px; fill: none; stroke: #B8A6C0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-lb-badges li.is-won { color: var(--ink); }
.woque.woque-scope .woque-lb-badges li.is-won .woque-lb-badges__icon { background: #FFF3D6; box-shadow: 0 0 0 2px var(--gold); }
.woque.woque-scope .woque-lb-badges li.is-won svg { stroke: #8A5A00; }
.woque.woque-scope .woque-lb-won { font-weight: 700; padding-bottom: 10px; }
.woque.woque-scope .woque-lb-anon { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.woque.woque-scope .woque-lb-anon label { flex: 1 1 240px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.woque.woque-scope .woque-lb-anon input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--magenta); }
.woque.woque-scope .woque-lb-anon label > span { display: flex; flex-direction: column; }
.woque.woque-scope .woque-lb-anon label > span > span { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-lb-anon__save { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--plum); background: #fff; color: var(--plum); font-weight: 700; font-size: 15px; cursor: pointer; }
.woque.woque-scope .woque-lb-anon__save:hover { background: var(--lilac); }
.woque.woque-scope .woque-lb-anon__ok { flex-basis: 100%; font-size: 14px; color: #1F7A50; font-weight: 700; }

/* Her win, on her home (0.91.0 look) */
.woque.woque-scope .woque-lbwin { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px 22px; margin: 4px 0 2px; border-radius: 24px; text-align: center; color: #fff; background: radial-gradient(90% 120% at 100% 100%, #7C0F48 0%, transparent 60%), radial-gradient(80% 100% at 0% 0%, #431955, transparent 70%), #2E0F38; box-shadow: 0 18px 38px -22px rgba(124, 15, 72, .9); isolation: isolate; }
.woque.woque-scope .woque-lbwin__medal { width: 92px; height: 92px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); box-shadow: 0 0 0 8px rgba(242, 182, 50, .22); animation: woque-yrfloat 3s ease-in-out infinite; }
.woque.woque-scope .woque-lbwin__medal svg { width: 44px; height: 44px; fill: var(--plum); }
.woque.woque-scope .woque-lbwin__eyebrow { margin-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.woque.woque-scope .woque-lbwin__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; line-height: 1.1; }
.woque.woque-scope .woque-lbwin__line { font-size: 15px; color: rgba(255, 255, 255, .9); max-width: 34ch; }
.woque.woque-scope .woque-lbwin__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.woque.woque-scope .woque-lbwin__acts form { margin: 0; }
.woque.woque-scope .woque-lbwin__go { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--gold); color: var(--plum); font-weight: 800; font-size: 15px; cursor: pointer; }
.woque.woque-scope .woque-lbwin__share { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; }
.woque.woque-scope .woque-lbwin__share:hover, .woque.woque-scope .woque-lbwin__share:focus { color: #fff; background: rgba(255, 255, 255, .1); }
.woque.woque-scope .woque-lbwin__close { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 2; }
.woque.woque-scope .woque-lbwin__x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 16px; cursor: pointer; }
.woque.woque-scope .woque-lbwin__confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.woque.woque-scope .woque-lbwin__confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: .8; animation: woque-lbfall 4.2s linear infinite; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(3n)   { background: #F2B632; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(3n+1) { background: #E8B4D0; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(3n+2) { background: #A3155F; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(1)  { left: 6%;  animation-delay: 0s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(2)  { left: 14%; animation-delay: 1.1s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(3)  { left: 22%; animation-delay: .5s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(4)  { left: 31%; animation-delay: 2s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(5)  { left: 40%; animation-delay: .2s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(6)  { left: 49%; animation-delay: 1.6s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(7)  { left: 58%; animation-delay: .8s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(8)  { left: 66%; animation-delay: 2.4s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(9)  { left: 74%; animation-delay: .3s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(10) { left: 82%; animation-delay: 1.3s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(11) { left: 90%; animation-delay: 2.7s; }
.woque.woque-scope .woque-lbwin__confetti i:nth-child(12) { left: 96%; animation-delay: .9s; }
@keyframes woque-lbfall { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(420px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .woque.woque-scope .woque-lbwin__confetti { display: none; } .woque.woque-scope .woque-lbwin__medal { animation: none; } }

/* My month so far (home) */
.woque.woque-scope .woque-mmcard { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px; margin: 4px 0 2px; }
.woque.woque-scope .woque-mmcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.woque.woque-scope .woque-mmcard__head h2 { font-size: 19px; }
.woque.woque-scope .woque-mmcard__head a { font-weight: 800; font-size: 15px; text-decoration: none; }
.woque.woque-scope .woque-mmcard__tiles { display: flex; gap: 8px; }
.woque.woque-scope .woque-mmcard__tiles li { flex: 1 1 0; min-width: 0; background: var(--paper); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; }
.woque.woque-scope .woque-mmcard__tiles strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; line-height: 1.1; }
.woque.woque-scope .woque-mmcard__tiles span { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-mmcard__streak { font-weight: 800; font-size: 15px; }

/* My insights */
.woque.woque-scope .woque-mi-months { display: flex; justify-content: space-between; gap: 12px; }
.woque.woque-scope .woque-mi-months a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.woque.woque-scope .woque-mi-months a.is-next { margin-left: auto; }
.woque.woque-scope .woque-mi-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.woque.woque-scope .woque-mi-tiles li { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.woque.woque-scope .woque-mi-tiles__label { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-mi-tiles strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; line-height: 1.1; }
.woque.woque-scope .woque-mi-tiles__up { font-size: 13px; font-weight: 800; color: #1F7A50; }
.woque.woque-scope .woque-mi-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.woque.woque-scope .woque-mi-card h2 { font-size: 19px; }
.woque.woque-scope .woque-mi-empty { flex-direction: row; align-items: center; }
.woque.woque-scope .woque-mi-empty > span { font-size: 28px; }
.woque.woque-scope .woque-mi-streak { background: var(--plum); color: #fff; border-radius: 22px; padding: 18px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px 14px; align-items: center; }
.woque.woque-scope .woque-mi-streak__flame { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(242, 182, 50, .18); }
.woque.woque-scope .woque-mi-streak__flame svg { width: 30px; height: 30px; fill: var(--gold); }
.woque.woque-scope .woque-mi-streak__text h2 { color: #fff; font-size: 22px; }
.woque.woque-scope .woque-mi-streak__text p { font-size: 14px; color: rgba(255, 255, 255, .8); }
.woque.woque-scope .woque-mi-streak__weeks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.woque.woque-scope .woque-mi-streak__weeks span { height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .14); }
.woque.woque-scope .woque-mi-streak__weeks span.is-on { background: #D9A23A; }
.woque.woque-scope .woque-mi-streak__weeks span.is-on.is-now { background: var(--gold); box-shadow: 0 0 0 2px rgba(242, 182, 50, .45); }
.woque.woque-scope .woque-mi-streak__line { grid-column: 1 / -1; font-size: 15px; }
.woque.woque-scope .woque-mi-shine li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; border-radius: 14px; background: #FFF6DE; margin-top: 8px; }
.woque.woque-scope .woque-mi-shine li:first-child { margin-top: 0; }
.woque.woque-scope .woque-mi-shine strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; color: #8A5A00; }
.woque.woque-scope .woque-mi-shine span { font-size: 15px; }
.woque.woque-scope .woque-mi-course { display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-mi-course + .woque-mi-course { padding-top: 6px; }
.woque.woque-scope .woque-mi-course__top { display: flex; justify-content: space-between; gap: 12px; }
.woque.woque-scope .woque-mi-course__top span { color: var(--muted); font-size: 15px; white-space: nowrap; }
.woque.woque-scope .woque-mi-course a { font-weight: 700; min-height: 32px; display: inline-flex; align-items: center; }
.woque.woque-scope .woque-mi-bar { display: block; height: 10px; border-radius: 99px; background: var(--lilac); overflow: hidden; }
.woque.woque-scope .woque-mi-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--magenta); }
.woque.woque-scope .woque-mi-small { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-mi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.woque.woque-scope .woque-mi-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--lilac); color: var(--plum); font-weight: 700; font-size: 14px; text-decoration: none; }
.woque.woque-scope .woque-mi-chips li.is-top a { background: var(--plum); color: #fff; }
.woque.woque-scope .woque-mi-more, .woque.woque-scope .woque-mi-next a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-mi-more > span, .woque.woque-scope .woque-mi-next a > span { display: flex; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-mi-more svg, .woque.woque-scope .woque-mi-next svg, .woque.woque-scope .woque-mi-board svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-mi-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); }
.woque.woque-scope .woque-mi-next { display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-mi-next a:hover, .woque.woque-scope .woque-mi-more:hover { background: var(--lilac); color: var(--ink); }
.woque.woque-scope .woque-mi-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.woque.woque-scope .woque-mi-big { font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; line-height: 1; }
.woque.woque-scope .woque-mi-half a { font-weight: 700; font-size: 15px; }
.woque.woque-scope .woque-mi-gave { background: #FCE9F2; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.woque.woque-scope .woque-mi-gave h2 { font-size: 19px; }
.woque.woque-scope .woque-mi-board { flex-direction: row; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-mi-board:hover { border-color: var(--magenta); color: var(--ink); }
.woque.woque-scope .woque-mi-board__place { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; color: var(--magenta); }
.woque.woque-scope .woque-mi-board > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-mi-board > span > span { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-mi-private { text-align: center; }
@media (min-width: 700px) { .woque.woque-scope .woque-mi-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .woque.woque-scope .woque-lb-me__place { font-size: 56px; } }

/* Cool Seat desk › Insights (Hub 0.95.0, proposal E3). */
.woque.woque-scope .woque-csi__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .woque.woque-scope .woque-csi__nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.woque.woque-scope .woque-csi__num { display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.woque.woque-scope .woque-csi__num strong { font: 700 30px/1.1 'Bricolage Grotesque', 'Figtree', sans-serif; color: var(--ink); }
.woque.woque-scope .woque-csi__num span { font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-csi__box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.woque.woque-scope .woque-csi__box h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.woque.woque-scope .woque-csi__box--warm { background: #FFF8E6; border-color: #F3DC9B; }
.woque.woque-scope .woque-csi__none { margin: 0; font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-csi__brides { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.woque.woque-scope .woque-csi__bride { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 14px; background: #fff; }
.woque.woque-scope .woque-csi__av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; }
.woque.woque-scope .woque-csi__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.woque.woque-scope .woque-csi__who strong { font-size: 15px; }
.woque.woque-scope .woque-csi__who span, .woque.woque-scope .woque-csi__who small { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.woque.woque-scope .woque-csi__bride form { margin: 0; flex: none; }
.woque.woque-scope .woque-csi__btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--plum); color: #fff; font: 700 14px/1 'Figtree', sans-serif; cursor: pointer; }
.woque.woque-scope .woque-csi__btn:hover { background: var(--plum-2); }
.woque.woque-scope .woque-csi__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.woque.woque-scope .woque-csi__done { flex: none; font-size: 13px; font-weight: 700; color: #14553B; }
.woque.woque-scope .woque-csi__lines, .woque.woque-scope .woque-csi__team { list-style: none; margin: 0; padding: 0; }
.woque.woque-scope .woque-csi__lines li, .woque.woque-scope .woque-csi__team li { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.woque.woque-scope .woque-csi__lines a { color: var(--ink); text-decoration: none; }
.woque.woque-scope .woque-csi__lines a:hover { color: var(--magenta); text-decoration: underline; }
.woque.woque-scope .woque-csi__team li > span:first-child { display: flex; flex-direction: column; }
.woque.woque-scope .woque-csi__team small { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-csi__what { font-size: 14px; text-align: right; color: var(--ink); }

/* My goal (C11, 0.96.0). */
.woque.woque-scope .woque-mi-goal { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.woque.woque-scope .woque-mi-goal__said { margin: 0; padding: 10px 14px; border-radius: 12px; background: #EEF8F2; color: #14553B; font-weight: 600; font-size: 14px; }
.woque.woque-scope .woque-mi-goal__win { margin: 0; font-weight: 700; color: var(--magenta); }
.woque.woque-scope .woque-mi-goal__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.woque.woque-scope .woque-mi-goal__rows li { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-mi-goal__label { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.woque.woque-scope .woque-mi-goal__label span { color: var(--muted); }
.woque.woque-scope .woque-mi-goal__bar { position: relative; display: block; height: 12px; border-radius: 999px; background: var(--lilac); }
.woque.woque-scope .woque-mi-goal__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--magenta); transition: width .6s ease; }
.woque.woque-scope .woque-mi-goal__bar > span.is-done { background: #1F7A4A; }
.woque.woque-scope .woque-mi-goal__bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--plum); opacity: .5; }
.woque.woque-scope .woque-mi-goal__edit > summary { cursor: pointer; font-weight: 700; color: var(--magenta); list-style: none; }
.woque.woque-scope .woque-mi-goal__edit > summary::-webkit-details-marker { display: none; }
.woque.woque-scope .woque-mi-goal__edit form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.woque.woque-scope .woque-mi-goal__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.woque.woque-scope .woque-mi-goal__fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.woque.woque-scope .woque-mi-goal__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.woque.woque-scope .woque-goalcard, .woque.woque-scope .woque-leadcard { display: flex; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.woque.woque-scope .woque-goalcard { flex-direction: column; gap: 8px; padding: 14px 16px; }
.woque.woque-scope .woque-goalcard__head { display: flex; justify-content: space-between; font-size: 15px; }
.woque.woque-scope .woque-goalcard__head span { color: var(--magenta); font-weight: 700; }
.woque.woque-scope .woque-goalcard__row { display: grid; grid-template-columns: minmax(0, 1fr) 40%; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-goalcard__bar { display: block; height: 8px; border-radius: 999px; background: var(--lilac); }
.woque.woque-scope .woque-goalcard__bar span { display: block; height: 100%; border-radius: 999px; background: var(--magenta); }
.woque.woque-scope .woque-leadcard { align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(120deg, #fff, #F7F0FA); }
.woque.woque-scope .woque-leadcard__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-leadcard__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woque.woque-scope .woque-leadcard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-leadcard__text strong { color: var(--ink); font-size: 15px; }
.woque.woque-scope .woque-leadcard__go { color: var(--magenta); font-size: 22px; font-weight: 700; }

/* My program group (E4, 0.96.0). */
.woque.woque-scope .woque-mg { display: flex; flex-direction: column; gap: 14px; }
.woque.woque-scope .woque-mg__groups { display: flex; flex-wrap: wrap; gap: 6px; }
.woque.woque-scope .woque-mg__groups a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--plum); font-weight: 700; font-size: 14px; text-decoration: none; }
.woque.woque-scope .woque-mg__groups a.is-on { background: var(--plum); color: #fff; border-color: var(--plum); }
.woque.woque-scope .woque-mg__hero { padding: 18px; border-radius: 20px; background: var(--plum); color: #fff; }
.woque.woque-scope .woque-mg__kicker { margin: 0; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.woque.woque-scope .woque-mg__hero h2 { margin: 2px 0 4px; color: #fff; font: 700 26px/1.15 'Bricolage Grotesque', 'Figtree', sans-serif; }
.woque.woque-scope .woque-mg__hero p { margin: 0; color: #E8D7EE; font-size: 14px; }
.woque.woque-scope .woque-mg__nums { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.woque.woque-scope .woque-mg__nums li { margin: 0; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .1); display: flex; flex-direction: column; }
.woque.woque-scope .woque-mg__nums strong { font: 700 24px/1 'Bricolage Grotesque', 'Figtree', sans-serif; color: #fff; }
.woque.woque-scope .woque-mg__nums span { font-size: 12px; color: #E8D7EE; }
.woque.woque-scope .woque-mg__nums .is-behind strong { color: var(--gold); }
.woque.woque-scope .woque-mg__form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.woque.woque-scope .woque-mg__box { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.woque.woque-scope .woque-mg__box.is-behind { background: #FFF8E6; border-color: #F3DC9B; }
.woque.woque-scope .woque-mg__box h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.woque.woque-scope .woque-mg__lead { margin: 0; font-size: 14px; color: var(--muted); }
.woque.woque-scope .woque-mg__people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.woque.woque-scope .woque-mg__people li { margin: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; }
.woque.woque-scope .woque-mg__box:not(.is-behind) .woque-mg__people li { background: var(--paper); }
.woque.woque-scope .woque-mg__tick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.woque.woque-scope .woque-mg__tick input { width: 20px; height: 20px; accent-color: var(--magenta); flex: none; }
.woque.woque-scope .woque-mg__who { display: flex; flex-direction: column; min-width: 0; }
.woque.woque-scope .woque-mg__who strong { font-size: 15px; }
.woque.woque-scope .woque-mg__who span { font-size: 13px; color: var(--muted); }
.woque.woque-scope .woque-mg__wa { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #1B6E4D; color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; }
.woque.woque-scope .woque-mg__wa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.woque.woque-scope .woque-mg__to { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.woque.woque-scope .woque-mg__send .woque-btn { align-self: flex-start; }
@media (max-width: 520px) { .woque.woque-scope .woque-mg__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woque.woque-scope .woque-mi-goal__fields { grid-template-columns: 1fr; } }

/* ---- Stories: hearts (card F) and comments ---- */
.woque.woque-scope .woque-scard[data-woque-open] { cursor: pointer; }
.woque.woque-scope .woque-scard__talk { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; min-height: 32px; font-size: 13px; font-weight: 700; color: #4A3651; text-decoration: none; }
.woque.woque-scope .woque-scard__talk:hover { color: var(--magenta); }
.woque.woque-scope .woque-scard__talk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
/* The heart pill: up to two faces, a heart and the count. Not given yet: white with a magenta outline. */
.woque.woque-scope .woque-heart { position: relative; z-index: 2; display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 7px; border: 1.5px solid #E9C6D8; border-radius: 999px; background: #fff; color: var(--magenta); font: inherit; font-weight: 800; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.woque.woque-scope .woque-heart.is-empty { padding-left: 14px; }
.woque.woque-scope .woque-heart:hover { border-color: var(--magenta); }
.woque.woque-scope .woque-heart:active { transform: scale(0.95); }
.woque.woque-scope .woque-heart.is-on { background: var(--magenta); border-color: var(--magenta); color: #fff; box-shadow: 0 10px 20px -10px rgba(163, 21, 95, 0.9); }
.woque.woque-scope .woque-heart.is-own { cursor: default; }
.woque.woque-scope .woque-heart.is-own:active { transform: none; }
.woque.woque-scope .woque-heart__faces { display: flex; }
.woque.woque-scope .woque-heart__face { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box; overflow: hidden; border-radius: 50%; border: 2px solid #fff; background: var(--lilac); color: var(--plum); font-size: 11px; font-weight: 800; }
.woque.woque-scope .woque-heart__face + .woque-heart__face { margin-left: -10px; }
.woque.woque-scope .woque-heart.is-on .woque-heart__face { border-color: var(--magenta); }
.woque.woque-scope .woque-heart__face img { width: 100%; height: 100%; object-fit: cover; }
.woque.woque-scope .woque-heart__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.woque.woque-scope .woque-heart.is-on .woque-heart__icon { fill: currentColor; }
.woque.woque-scope .woque-heart__n { font-size: 16px; font-variant-numeric: tabular-nums; }
.woque.woque-scope .woque-heart.is-pop .woque-heart__icon { animation: woque-heart-pop 0.45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes woque-heart-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.woque.woque-scope .woque-heart--big { min-height: 54px; padding-right: 20px; }
.woque.woque-scope .woque-heart--big .woque-heart__icon { width: 24px; height: 24px; }
.woque.woque-scope .woque-heart--big .woque-heart__n { font-size: 18px; }
/* The end of a story: did it bless you? */
.woque.woque-scope .woque-love { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(140deg, #FFF6FA, #FDE7F1); border: 1px solid #F5CFE0; }
.woque.woque-scope .woque-love__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 180px; }
.woque.woque-scope .woque-love__text strong { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 18px; color: var(--plum); }
.woque.woque-scope .woque-love__text span { font-size: 14px; line-height: 1.4; color: #7C4A63; }
/* Comments. */
.woque.woque-scope .woque-comments { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); scroll-margin-top: 20px; }
.woque.woque-scope .woque-comments h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 20px; }
.woque.woque-scope .woque-comments h2 span { font-size: 15px; font-weight: 700; color: var(--muted); }
.woque.woque-scope .woque-comments__none { margin: 0; font-size: 15px; color: var(--muted); }
.woque.woque-scope .woque-comment { display: flex; gap: 10px; align-items: flex-start; }
.woque.woque-scope .woque-comment__face { width: 36px; height: 36px; font-size: 12px; }
.woque.woque-scope .woque-comment__bubble { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--paper); }
.woque.woque-scope .woque-comment.is-writer .woque-comment__bubble { background: #FFF4DC; border: 1px solid #F2DFAE; }
.woque.woque-scope .woque-comment__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.woque.woque-scope .woque-comment__who strong { font-size: 14px; color: var(--ink); }
.woque.woque-scope .woque-comment__tag { padding: 1px 8px; border-radius: 999px; background: var(--plum); color: var(--gold); font-size: 11px; font-weight: 800; }
.woque.woque-scope .woque-comment__when { margin-left: auto; font-size: 12px; color: var(--muted); }
.woque.woque-scope .woque-comment__bubble p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #3A2A40; overflow-wrap: anywhere; }
.woque.woque-scope .woque-comments__form { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.woque.woque-scope .woque-comments__send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.woque.woque-scope .woque-comments__send span { font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .woque.woque-scope .woque-heart { transition: none; } .woque.woque-scope .woque-heart.is-pop .woque-heart__icon { animation: none; } }