/*
 * The PLATFORM's storefront stylesheet (DW-798, DW-828): what the storefront
 * shell (`templates/storefront/base.html`) and the platform's own storefront
 * pages are drawn with, linked by the shell on every storefront page. It holds
 * the `--sp-*` token defaults the shell's header and footer read, the `.sp-page`
 * container, column and store buttons, the theme's logo-figure strokes
 * (`.sp-motif`), and the membership pages' rules (`mb-`: the join
 * confirmation, the member page, the leave confirmation and the consent block,
 * Story 21.7'). The store site's own pages add `static/store_site/site.css`
 * through the shell's `page_styles` block, linked AFTER this file so the
 * cascade is the one the single stylesheet had. A feature's page-only rules
 * never live here; the hex-literal sweep reads this file: no colour here is a
 * literal.
 */
/*
 * THE TOKENS (Story 21.10, the storefront theme layer). Every colour and face
 * below is a `--sp-*` token, and the VALUES are the store THEME's: these are the
 * DEFAULT theme's, Cardboarded's look (the root DESIGN.md) expressed through
 * DaisyUI's own variables, so `neon-dark` paints them; a theme overrides any of
 * them in its `@plugin "daisyui/theme"` block in static/css/styles.css, which
 * DaisyUI emits under `[data-theme="<name>"]` inside `@layer base`.
 * THAT IS WHY THEY SIT HERE, IN `@layer base` ON `:where(:root)`, AND NOT ON
 * `.sp-page`: a declaration on `.sp-page` would shadow the theme's value on
 * `<html>` for everything inside it, and an UNLAYERED one would beat the
 * layered theme block whatever its specificity; in the same layer on the same
 * element, the theme's `[data-theme]` (0,1,0) beats `:where(:root)` (0,0,0).
 * On `<html>`, the shell's header and footer - outside `.sp-page` - read them
 * too. The hex-literal sweep reads this file: no colour here is a literal.
 */
@layer base {
  :where(:root) {
    --sp-white: var(--color-base-content); --sp-muted: var(--color-neutral-content);
    --sp-rule: var(--color-base-300); --sp-edge: var(--color-neutral-content);
    --sp-cyan: var(--color-primary); --sp-cyan-deep: var(--color-primary);
    --sp-black: var(--color-base-100);
    /* the darker edge of a grid day outside the month (DESIGN.md, The calendar) */
    --sp-rule-faint: var(--color-base-200);
    --sp-display: Rajdhani, system-ui, sans-serif;
    --sp-body: 'IBM Plex Sans', sans-serif;
    /* a refusal: its sentence, its icon, the invalid field's edge, the summary's rule */
    --sp-alert: var(--color-error);
  }
}
.sp-main { padding-bottom: 56px; }
.sp-page {
  container-type: inline-size;
  font: 400 16px/1.55 var(--sp-body);
  color: var(--sp-white);
}
.sp-page a { color: var(--sp-white); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sp-page a:hover { text-decoration-thickness: 2px; }
.sp-page :focus-visible { outline: 2px solid var(--sp-cyan); outline-offset: 2px; }
.sp-page p { margin: 0; }
.sp-col { max-width: 768px; margin-inline: auto; padding-inline: 16px; width: 100%; }

/* ---- the theme's logo figure, large and faint: the store page's hero and the membership pages' */
/* (the hero's wide variant, `.sp-motif` inside the 720px container query, is the store page's: site.css) */
.sp-motif { position: absolute; z-index: 0; pointer-events: none; width: 520px; right: -190px; top: -30px; }
.sp-motif .sp-mark-outer { stroke: var(--sp-white); stroke-opacity: .075; stroke-width: 7; }
.sp-motif .sp-mark-inner { stroke-opacity: .2; stroke-width: 7; }

/* ---- store buttons (DESIGN.md Store buttons): 48px, square; at most one primary a page */
.sp-page .sp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  font: 600 1rem/1.2 var(--sp-body); border: 1px solid var(--sp-white); border-radius: 0;
  background: transparent; color: var(--sp-white); text-decoration: none; text-align: center; cursor: pointer;
}
.sp-page .sp-btn:hover { background: var(--sp-white); color: var(--sp-black); }
.sp-page .sp-btn-primary { background: var(--sp-cyan); border-color: var(--sp-cyan); color: var(--sp-black); }
.sp-page .sp-btn-primary:hover { background: var(--sp-white); border-color: var(--sp-white); }
.sp-btn-block { width: 100%; }

/* ---- the membership pages (Story 21.7'): a form page's hero over the theme's figure,
   then a 440px column inside the 768px one */
.mb-page { position: relative; overflow: hidden; isolation: isolate; }
.mb-page > .sp-col { position: relative; z-index: 1; }
.sp-motif.mb-motif { width: 340px; right: -170px; top: -40px; }
.mb-top { padding-block: 20px 16px; }
.mb-col { max-width: 440px; }
.sp-page .mb-h1 {
  font: 900 1.5rem/1.08 var(--sp-display); letter-spacing: .03em; text-transform: uppercase;
  margin: 0 0 10px; max-width: 16ch; overflow-wrap: anywhere;
}
/* a sentence as the page's heading: the body voice, as the storefront's 404 says one */
.sp-page .mb-sentence {
  font: 600 1.5rem/1.3 var(--sp-body); letter-spacing: 0; text-transform: none;
  margin: 0; max-width: 32ch; overflow-wrap: anywhere;
}
.mb-intro { line-height: 1.5; max-width: 40ch; overflow-wrap: anywhere; }
.mb-intro strong { font-weight: 600; }
.sp-page .mb-welcome { color: var(--sp-cyan); font-weight: 600; margin-bottom: 8px; }
.mb-since { color: var(--sp-muted); }
.mb-field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 4px; }
.sp-page .mb-hint { color: var(--sp-muted); font-size: .875rem; line-height: 1.35; margin: 0 0 6px; }
.mb-field input {
  display: block; width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--sp-edge); border-radius: 0;
  background: var(--sp-black); color: var(--sp-white); font: 400 1rem/1 var(--sp-body);
}
.mb-field input:focus-visible { border-color: var(--sp-white); }
.mb-field.is-refused input { border: 2px solid var(--sp-alert); }
.sp-page .mb-refusal {
  display: flex; gap: 8px; align-items: flex-start; color: var(--sp-alert);
  font-size: .9375rem; font-weight: 500; margin-top: 8px;
}
.mb-refusal svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.mb-summary { border-top: 2px solid var(--sp-alert); border-bottom: 1px solid var(--sp-rule); padding: 12px 0; margin: 0 0 18px; }
.mb-summary p { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--sp-alert); }
.mb-summary svg { width: 16px; height: 16px; flex: none; }
.mb-summary ul { margin: 6px 0 0; padding-left: 24px; }
.mb-summary li { padding: 4px 0; }
.sp-page .mb-summary a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
/* the consent block: ONE include - the gist, then the whole wording in a disclosure */
.mb-consent { margin: 18px 0 14px; padding-top: 12px; border-top: 1px solid var(--sp-rule); }
.sp-page .mb-consent-h {
  font: 700 .875rem/1.25 var(--sp-display); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px;
}
.mb-gist, .mb-list { list-style: none; margin: 0; padding: 0; }
.mb-gist li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; padding: 2px 0; font-size: .875rem; line-height: 1.4; font-weight: 500; }
.mb-list li { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; margin-bottom: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.mb-gist svg { width: 16px; height: 16px; margin-top: 1px; }
.mb-list svg { width: 16px; height: 16px; margin-top: 3px; }
.mb-no svg { color: var(--sp-muted); }
.mb-more { margin-top: 8px; border-top: 1px solid var(--sp-rule); border-bottom: 1px solid var(--sp-rule); }
.mb-more > summary {
  list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  font-weight: 600; font-size: .9375rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.mb-more > summary::-webkit-details-marker { display: none; }
.mb-more > summary:hover { text-decoration-thickness: 2px; }
.mb-tri { width: 11px; height: 11px; flex: none; }
.mb-more[open] .mb-tri { transform: rotate(90deg); }
.mb-more-body { padding: 6px 0 14px; }
.sp-page .mb-grp { color: var(--sp-muted); font-size: .875rem; font-weight: 600; margin: 12px 0 6px; }
.sp-page .mb-grp:first-child { margin-top: 4px; }
.sp-page .mb-plain { margin-top: 10px; }
.sp-page .mb-plain.is-load { font-weight: 600; }
.sp-page .mb-small { color: var(--sp-muted); font-size: .875rem; line-height: 1.45; margin-top: 10px; }
.sp-page .mb-note { margin-top: 14px; }
.mb-decline { margin-top: 12px; }
.mb-confirm { margin-top: 26px; }
/* the link rows: the season record, sign out - a link and a POST button, one look */
.mb-rows { display: flex; flex-direction: column; border-top: 1px solid var(--sp-rule); margin-top: 24px; }
.sp-page .mb-row {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%;
  min-height: 60px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--sp-rule); border-radius: 0;
  background: transparent; color: var(--sp-white); font: 600 1rem/1.55 var(--sp-body);
  text-align: left; text-decoration: none; cursor: pointer;
}
.mb-row .sp-k { color: var(--sp-muted); font-weight: 400; font-size: .875rem; line-height: 1.35; }
.sp-page .mb-row:hover .mb-row-t { text-decoration: underline; text-underline-offset: 4px; }
.sp-page .mb-leave { margin-top: 32px; }
.sp-page .mb-after { margin-top: 18px; font-size: .9375rem; }
.sp-page .mb-after a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; }
/* what the store will see, said before the tap: the two names in the sentence, then the
   way to change them (a link out to the profile, its note close under it) or the one
   field that asks. After `.mb-after` and `.mb-small`, whose margins these replace. */
.sp-page .mb-names { margin: 0 0 12px; }
.mb-name-rows { margin: 0 0 12px; border-top: 1px solid var(--sp-rule); }
.mb-name-rows > div {
  display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--sp-rule); line-height: 1.4;
}
.mb-name-rows dt { color: var(--sp-muted); font-size: .875rem; }
.mb-name-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sp-page .mb-change { margin-top: 0; }
/* Phase C: the line that says the store sees a short form of the full name (no
   display name chosen) — under the two rows on the confirmation, under the
   filled block on the member page. */
.sp-page .mb-not-chosen { margin: 0 0 12px; }
.sp-page .mb-change-note { margin-top: 0; }

@container (min-width: 720px) {
  /* the membership pages: the form h1 at its wide size, the figure further in */
  .mb-top { padding-block: 48px 34px; }
  .sp-motif.mb-motif { width: 620px; right: -60px; top: -60px; }
  .sp-page .mb-h1 { font-size: 2.5rem; max-width: 18ch; }
  .mb-intro { font-size: 1.0625rem; }
}