{% extends "base.j2" -%}

{% block append_to_head_tag_section %}
<title>Style Guide — Make Post Sell Design System</title>
<style>
  /* Styleguide chrome */
  .sg-toc { margin: 0 0 40px; }
  .sg-toc a { font-weight: 500; font-size: 15px; display: inline-block; margin: 4px 12px 4px 0; }
  .sg-section { margin-bottom: 56px; }
  .sg-section-title {
    font-size: 1.6em;
    font-weight: 700;
    border-bottom: 2px solid var(--border-default, #e0e0e0);
    padding-bottom: 8px;
    margin-bottom: 24px;
  }
  .sg-subsection { margin-bottom: 28px; }
  .sg-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    opacity: 0.7;
  }
  .sg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }
  .sg-swatch {
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--input-border, #e0e0e0);
  }
  .sg-swatch-color { height: 60px; }
  .sg-swatch-info {
    padding: 8px;
    font-size: 12px;
    line-height: 1.4;
  }
  .sg-swatch-name { font-weight: 600; }
  .sg-swatch-hex { opacity: 0.6; }
  .sg-code {
    border: 1px solid var(--input-border, #ccc);
    border-radius: var(--radius-sm, 4px);
    padding: 12px 16px;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    overflow-x: auto;
    white-space: pre;
    margin-top: 8px;
    line-height: 1.6;
  }
  .sg-demo {
    padding: 24px;
    border: 1px solid var(--input-border, #ccc);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 8px;
  }
  .sg-demo-alt { background: var(--surface-dim, #f9f9fa); }
  .sg-inline-demo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    align-items: center;
  }
  .sg-elevation-box {
    height: 80px;
    border-radius: var(--radius-lg, 12px);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
  }
  .sg-motion-box {
    width: 80px;
    height: 80px;
    background: var(--color-navy, #5871ad);
    border-radius: var(--radius-lg, 12px);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .sg-spacing-bar {
    background: var(--color-navy-light, #82A8FF);
    opacity: 0.5;
    height: 24px;
    border-radius: var(--radius-sm, 4px);
    display: grid;
    align-items: center;
    padding-left: 6px;
    font-size: 11px;
    font-weight: 600;
  }
  .sg-radius-box {
    width: 80px;
    height: 80px;
    background: var(--surface-container, #f4f4f5);
    border: 2px solid var(--input-border, #e0e0e0);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.7;
  }
  .sg-state-box {
    width: 140px;
    height: 60px;
    border-radius: var(--radius-md, 8px);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--input-border, #e0e0e0);
  }
  .sg-note {
    font-size: 13px;
    opacity: 0.6;
    margin-top: 8px;
    line-height: 1.5;
  }
  .sg-token-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .sg-token-table th {
    text-align: left;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 2px solid var(--input-border, #e0e0e0);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .sg-token-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light, #eee);
    vertical-align: middle;
  }
  .sg-token-table code {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    background: var(--surface-container, #f4f4f5);
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
  }
  .sg-demo .mps-button { min-width: 180px; }
  .sg-button-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
    gap: 8px;
    align-items: center;
  }
</style>
{% endblock %}

{% block content -%}

<section class="one-column">

  <h1>Design System</h1>
  <p style="max-width: 600px; line-height: 1.6;">
    Design tokens, components, and patterns for Make Post Sell. Built on CSS custom properties. Mobile-first. Accessible. Respects reduced motion. Toggle dark/light mode to see both themes.
  </p>

  <p style="margin-bottom: 8px;">
    <button onclick="window.setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark')" class="mps-button mps-button-blue" style="min-width: 160px; max-width: 200px;">Toggle Theme</button>
  </p>

  <div class="sg-toc">
    <a href="#tokens">Tokens</a>
    <a href="#colors">Colors</a>
    <a href="#typography">Typography</a>
    <a href="#elevation">Elevation</a>
    <a href="#motion">Motion</a>
    <a href="#spacing">Spacing</a>
    <a href="#shape">Shape</a>
    <a href="#states">States</a>
    <a href="#loading">Loading</a>
    <a href="#buttons">Buttons</a>
    <a href="#forms">Forms</a>
    <a href="#wells">Wells</a>
    <a href="#alerts">Alerts</a>
    <a href="#status">Status</a>
    <a href="#cards">Product Cards</a>
    <a href="#cart">Cart</a>
    <a href="#comments">Comments</a>
    <a href="#toggle">Toggle</a>
    <a href="#ribbon">Ribbon</a>
    <a href="#taskbar">Task Bar</a>
    <a href="#layout">Layout</a>
    <a href="#theme">Theme System</a>
    <a href="#footer">Footer</a>
    <a href="#landing">Landing Page</a>
    <a href="#class-act">Class Act</a>
  </div>

  <hr/>

  <!-- ======== TOKENS ======== -->
  <div class="sg-section" id="tokens">
    <div class="sg-section-title">Design Tokens</div>

    <p>All shared values live in <code>tokens.css</code> as CSS custom properties. Every component references tokens, never raw values. Change a token, change everything.</p>

    <div class="sg-code">&lt;!-- Include order --&gt;
&lt;link rel="stylesheet" href="/static/css/tokens.css"&gt;   /* tokens first */
&lt;link rel="stylesheet" href="/static/css/common.css"&gt;   /* app styles */

tokens.css provides: base resets, color/spacing/shape/motion/elevation tokens,
typography scale, animation utilities, skeleton/spinner, scroll-reveal,
prefers-reduced-motion support.</div>

    <div class="sg-note">tokens.css is the foundation. common.css layers app-specific components on top and overrides dark mode via <code>[data-theme="dark"]</code> selectors.</div>
  </div>


  <!-- ======== COLORS ======== -->
  <div class="sg-section" id="colors">
    <div class="sg-section-title">Colors</div>

    <div class="sg-subsection">
      <div class="sg-label">Brand (tokens.css)</div>
      <div class="sg-swatches">
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-green, #a3c765);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Green CTA</div><div class="sg-swatch-hex">#a3c765</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-green-dark, #8ab34e);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Green Dark</div><div class="sg-swatch-hex">#8ab34e</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-blue, #98b6fa);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Blue</div><div class="sg-swatch-hex">#98b6fa</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-navy, #5871ad);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Navy</div><div class="sg-swatch-hex">#5871ad</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-navy-light, #82A8FF);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Navy Light</div><div class="sg-swatch-hex">#82A8FF</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-purple, #9B59B6);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Purple</div><div class="sg-swatch-hex">#9B59B6</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-danger, #CC6958);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Danger</div><div class="sg-swatch-hex">#CC6958</div></div></div>
      </div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Surfaces</div>
      <div class="sg-swatches">
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--surface-base, #fff); border-bottom: 1px solid #e0e0e0;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Base</div><div class="sg-swatch-hex">#FFFFFF</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--surface-dim, #F9F9FA); border-bottom: 1px solid #e0e0e0;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Dim</div><div class="sg-swatch-hex">#F9F9FA</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--surface-container, #F4F4F5);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Container</div><div class="sg-swatch-hex">#F4F4F5</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--surface-container-high, #EEEEEF);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Container High</div><div class="sg-swatch-hex">#EEEEEF</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--surface-inverse, #0b0b0b);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Inverse</div><div class="sg-swatch-hex">#0b0b0b</div></div></div>
      </div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Text</div>
      <div class="sg-swatches">
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--text-primary, #0b0b0b);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Primary</div><div class="sg-swatch-hex">#0b0b0b</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--text-body, #515151);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Body</div><div class="sg-swatch-hex">#515151</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--text-secondary, #666);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Secondary</div><div class="sg-swatch-hex">#666666</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--text-muted, #777);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Muted</div><div class="sg-swatch-hex">#777777</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--text-faint, #999);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Faint</div><div class="sg-swatch-hex">#999999</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--text-disabled, #bbb);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Disabled</div><div class="sg-swatch-hex">#BBBBBB</div></div></div>
      </div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Status &amp; Feedback</div>
      <div class="sg-swatches">
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-check, #678731);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Check Green</div><div class="sg-swatch-hex">#678731</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-cross, #c77765);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Cross Red</div><div class="sg-swatch-hex">#c77765</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--color-gold, #d4a843);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Gold</div><div class="sg-swatch-hex">#d4a843</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--alert-warning-bg, #fff3cd);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Warning BG</div><div class="sg-swatch-hex">#fff3cd</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--alert-danger-bg, #f8d7da);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Danger BG</div><div class="sg-swatch-hex">#f8d7da</div></div></div>
      </div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Borders</div>
      <div class="sg-swatches">
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--border-default, #e0e0e0);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Default</div><div class="sg-swatch-hex">#e0e0e0</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--border-light, #eee);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Light</div><div class="sg-swatch-hex">#eeeeee</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--border-focus, #5871ad);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Focus</div><div class="sg-swatch-hex">#5871ad</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: var(--border-error, #CC6958);"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Error</div><div class="sg-swatch-hex">#CC6958</div></div></div>
      </div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Dark Mode (common.css overrides)</div>
      <div class="sg-swatches">
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: #7ab9ff;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Blue</div><div class="sg-swatch-hex">#7ab9ff</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: #08e700;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Green</div><div class="sg-swatch-hex">#08e700</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: #F34C31;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Red</div><div class="sg-swatch-hex">#F34C31</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: #0d1117;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">BG Primary</div><div class="sg-swatch-hex">#0d1117</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: #161b22;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">BG Secondary</div><div class="sg-swatch-hex">#161b22</div></div></div>
        <div class="sg-swatch"><div class="sg-swatch-color" style="background: #2d3748;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Button BG</div><div class="sg-swatch-hex">#2d3748</div></div></div>
      </div>
    </div>
  </div>


  <!-- ======== TYPOGRAPHY ======== -->
  <div class="sg-section" id="typography">
    <div class="sg-section-title">Typography</div>

    <div class="sg-subsection">
      <div class="sg-label">Type scale (tokens.css &mdash; major third 1.250)</div>
      <div class="sg-demo">
        <div class="type-display" style="margin-bottom: 12px;">Display</div>
        <div class="type-headline-1" style="margin-bottom: 12px;">Headline 1</div>
        <div class="type-headline-2" style="margin-bottom: 12px;">Headline 2</div>
        <div class="type-headline-3" style="margin-bottom: 12px;">Headline 3</div>
        <div class="type-title-lg" style="margin-bottom: 12px;">Title Large</div>
        <div class="type-title" style="margin-bottom: 12px;">Title</div>
        <div class="type-title-sm" style="margin-bottom: 12px;">Title Small</div>
        <div class="type-body-lg" style="margin-bottom: 12px;">Body Large &mdash; ideal for landing pages and long reads.</div>
        <div class="type-body" style="margin-bottom: 12px;">Body &mdash; default for app interfaces and dashboard text.</div>
        <div class="type-body-sm" style="margin-bottom: 12px;">Body Small &mdash; secondary information, metadata, timestamps.</div>
        <div class="type-label-lg" style="margin-bottom: 12px;">Label Large</div>
        <div class="type-label" style="margin-bottom: 12px;">LABEL &mdash; SECTION HEADERS, GROUP TITLES</div>
        <div class="type-caption" style="margin-bottom: 12px;">Caption &mdash; smallest text, footnotes</div>
        <div class="type-overline" style="margin-bottom: 12px;">OVERLINE &mdash; CATEGORY TAGS</div>
      </div>
      <div class="sg-code">.type-display     clamp(2.25rem, 5vw, 3.75rem)  700  tight
.type-headline-1  3rem (48px)                     700  tight
.type-headline-2  2.25rem (36px)                  700  tight
.type-headline-3  1.875rem (30px)                 700  snug
.type-title-lg    1.5rem (24px)                   600  snug
.type-title        1.25rem (20px)                  600  snug
.type-title-sm    1rem (16px)                     600  normal
.type-body-lg     1.125rem (18px)                 400  relaxed
.type-body        1rem (16px)                     400  relaxed
.type-body-sm     0.875rem (14px)                 400  relaxed
.type-label-lg    0.875rem (14px)                 600  wide
.type-label       0.75rem (12px)                  600  UPPERCASE wider
.type-caption     0.75rem (12px)                  400  normal
.type-overline    11px                            700  UPPERCASE widest
.type-code        monospace 0.9em                 inline code</div>
      <div class="sg-note">New code should prefer .type-* classes from tokens.css over raw heading tags.</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Legacy app typography (common.css)</div>
      <div class="sg-demo">
        <h1>Heading 1 (1.25em)</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <p>Body text. Helvetica, system default sizing. Color adapts to theme via CSS variables.</p>
        <p><a href="#">Link style</a> &mdash; inherits theme link color</p>
        <p><b>Bold text</b> &mdash; <em>Italic text</em></p>
      </div>
      <div class="sg-code">font-family: helvetica
Headings: h1 = 1.25em, margin-top: 0
Links: var(--link-color)
Body: var(--text-primary)</div>
    </div>
  </div>


  <!-- ======== ELEVATION ======== -->
  <div class="sg-section" id="elevation">
    <div class="sg-section-title">Elevation</div>

    <p>Five shadow levels from tokens.css. Higher = more prominent = closer to the viewer.</p>

    <div class="sg-demo sg-demo-alt">
      <div class="sg-inline-demo">
        <div class="sg-elevation-box elevation-0">0</div>
        <div class="sg-elevation-box elevation-1">1</div>
        <div class="sg-elevation-box elevation-2">2</div>
        <div class="sg-elevation-box elevation-3">3</div>
        <div class="sg-elevation-box elevation-4">4</div>
        <div class="sg-elevation-box elevation-5">5</div>
      </div>
    </div>
    <div class="sg-code">--elevation-0: none
--elevation-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)     /* cards at rest */
--elevation-2: 0 2px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04)     /* cards hovered */
--elevation-3: 0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04)    /* dropdown, popover */
--elevation-4: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04)    /* modal, dialog */
--elevation-5: 0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05)  /* toast, overlay */

Usage: element rests at N, hovers at N+1 or N+2
Cards: rest 1, hover 3  |  Buttons: rest 1, hover 2  |  Modals: 4  |  Toasts: 5</div>
  </div>


  <!-- ======== MOTION ======== -->
  <div class="sg-section" id="motion">
    <div class="sg-section-title">Motion</div>

    <div class="sg-subsection">
      <div class="sg-label">Easing curves</div>
      <div class="sg-demo">
        <div class="sg-inline-demo">
          <div class="sg-motion-box" style="transition: transform var(--duration-slow) var(--ease-standard);" onmouseenter="this.style.transform='scale(1.15)'" onmouseleave="this.style.transform='scale(1)'">Standard</div>
          <div class="sg-motion-box" style="transition: transform var(--duration-slow) var(--ease-decelerate);" onmouseenter="this.style.transform='scale(1.15)'" onmouseleave="this.style.transform='scale(1)'">Decel</div>
          <div class="sg-motion-box" style="transition: transform var(--duration-slow) var(--ease-accelerate);" onmouseenter="this.style.transform='scale(1.15)'" onmouseleave="this.style.transform='scale(1)'">Accel</div>
          <div class="sg-motion-box" style="transition: transform var(--duration-slow) var(--ease-spring);" onmouseenter="this.style.transform='scale(1.15)'" onmouseleave="this.style.transform='scale(1)'">Spring</div>
        </div>
      </div>
      <div class="sg-code">--ease-standard:   cubic-bezier(0.2, 0, 0, 1)       /* default for most transitions */
--ease-decelerate: cubic-bezier(0, 0, 0, 1)         /* entering elements (fade in, slide in) */
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1)       /* exiting elements (fade out) */
--ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275)  /* playful overshoot */

Hover each box above to feel the curve difference.</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Durations</div>
      <div class="sg-code">--duration-instant:   50ms    /* micro-feedback (opacity toggle) */
--duration-fast:     100ms    /* state layer opacity changes */
--duration-normal:   200ms    /* color, shadow, border transitions */
--duration-slow:     300ms    /* transform transitions (scale, translate) */
--duration-slower:   400ms    /* complex animations (ripple) */
--duration-entrance: 250ms    /* element enters viewport */
--duration-exit:     200ms    /* element leaves (shorter = snappier) */</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Entrance animations</div>
      <div class="sg-demo">
        <div class="sg-inline-demo">
          <div class="sg-motion-box animate-fade-in">fade-in</div>
          <div class="sg-motion-box animate-fade-in-up stagger-1">fade-up</div>
          <div class="sg-motion-box animate-fade-in-scale stagger-2">scale</div>
          <div class="sg-motion-box animate-slide-in-right stagger-3">slide-R</div>
        </div>
      </div>
      <div class="sg-code">.animate-fade-in         .animate-fade-in-up      .animate-fade-in-down
.animate-fade-in-scale   .animate-slide-in-right  .animate-slide-in-left
.animate-pulse           .animate-spin
.stagger-1 through .stagger-6 (50ms increments)

@media (prefers-reduced-motion: reduce) — all animations collapse to instant.</div>
    </div>
  </div>


  <!-- ======== SPACING ======== -->
  <div class="sg-section" id="spacing">
    <div class="sg-section-title">Spacing</div>

    <p>4px base unit. Consistent spacing prevents the "off by 3px" disease.</p>

    <div class="sg-demo sg-demo-alt">
      <div style="display: grid; gap: 6px; max-width: 500px;">
        <div class="sg-spacing-bar" style="width: 4px;">&nbsp;</div>
        <div class="sg-spacing-bar" style="width: 8px;">2</div>
        <div class="sg-spacing-bar" style="width: 12px;">3</div>
        <div class="sg-spacing-bar" style="width: 16px;">4</div>
        <div class="sg-spacing-bar" style="width: 20px;">5</div>
        <div class="sg-spacing-bar" style="width: 24px;">6</div>
        <div class="sg-spacing-bar" style="width: 32px;">8</div>
        <div class="sg-spacing-bar" style="width: 40px;">10</div>
        <div class="sg-spacing-bar" style="width: 48px;">12</div>
        <div class="sg-spacing-bar" style="width: 64px;">16</div>
        <div class="sg-spacing-bar" style="width: 80px;">20</div>
        <div class="sg-spacing-bar" style="width: 96px;">24</div>
      </div>
    </div>
    <div class="sg-code">--space-1:  4px      --space-8:  32px
--space-2:  8px      --space-10: 40px
--space-3:  12px     --space-12: 48px
--space-4:  16px     --space-16: 64px
--space-5:  20px     --space-20: 80px
--space-6:  24px     --space-24: 96px

Utilities: .mt-{n} .mb-{n} .p-{n} .gap-{n}</div>
  </div>


  <!-- ======== SHAPE ======== -->
  <div class="sg-section" id="shape">
    <div class="sg-section-title">Shape</div>

    <div class="sg-demo">
      <div class="sg-inline-demo">
        <div class="sg-radius-box" style="border-radius: var(--radius-none, 0);">none</div>
        <div class="sg-radius-box" style="border-radius: var(--radius-sm, 4px);">sm 4px</div>
        <div class="sg-radius-box" style="border-radius: var(--radius-md, 8px);">md 8px</div>
        <div class="sg-radius-box" style="border-radius: var(--radius-lg, 12px);">lg 12px</div>
        <div class="sg-radius-box" style="border-radius: var(--radius-xl, 16px);">xl 16px</div>
        <div class="sg-radius-box" style="border-radius: var(--radius-2xl, 24px);">2xl 24px</div>
        <div class="sg-radius-box" style="border-radius: var(--radius-full, 9999px); width: 80px;">full</div>
      </div>
    </div>
    <div class="sg-code">--radius-none: 0        /* hard edges */
--radius-sm:   4px      /* inputs, code blocks, app buttons */
--radius-md:   8px      /* small cards, wells */
--radius-lg:   12px     /* feature cards */
--radius-xl:   16px     /* pricing cards */
--radius-2xl:  24px     /* large containers */
--radius-full: 9999px   /* pills, avatars, badges */

Rule of thumb: bigger element = bigger radius.</div>
  </div>


  <!-- ======== STATES ======== -->
  <div class="sg-section" id="states">
    <div class="sg-section-title">Interactive States</div>

    <p>State layer: a semi-transparent overlay that responds to interaction. Apply <code>.state-layer</code> to any interactive element.</p>

    <div class="sg-demo">
      <div class="sg-inline-demo">
        <div class="sg-state-box state-layer">Hover me</div>
        <button class="sg-state-box state-layer" tabindex="0" style="background: inherit; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;">Focus me (Tab)</button>
      </div>
    </div>
    <div class="sg-code">.state-layer::after {
  content: '';  position: absolute;  inset: 0;
  background: currentColor;  opacity: 0;
  transition: opacity 100ms ease;  pointer-events: none;
}
:hover::after    { opacity: 0.04; }
:focus-visible   { opacity: 0.08; }
:active::after   { opacity: 0.10; }

Focus ring: :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
Disabled:   [disabled], .disabled { opacity: 0.38; pointer-events: none; }</div>
  </div>


  <!-- ======== LOADING ======== -->
  <div class="sg-section" id="loading">
    <div class="sg-section-title">Loading States</div>

    <div class="sg-subsection">
      <div class="sg-label">Skeleton</div>
      <div class="sg-demo">
        <div style="max-width: 300px;">
          <div class="skeleton skeleton-text" style="width: 80%; height: 24px; margin-bottom: 12px;"></div>
          <div class="skeleton skeleton-text" style="width: 100%;"></div>
          <div class="skeleton skeleton-text" style="width: 60%;"></div>
          <br/>
          <div style="display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;">
            <div class="skeleton skeleton-circle" style="width: 40px; height: 40px;"></div>
            <div>
              <div class="skeleton skeleton-text" style="width: 50%;"></div>
              <div class="skeleton skeleton-text" style="width: 30%;"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="sg-code">.skeleton           shimmer gradient animation (1.5s loop)
.skeleton-text      height: 1em, small radius
.skeleton-circle    border-radius: full</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Spinner</div>
      <div class="sg-demo">
        <div style="display: grid; grid-template-columns: repeat(3, auto); gap: 16px; align-items: center; justify-content: start;">
          <span class="spinner spinner-sm"></span>
          <span class="spinner"></span>
          <span class="spinner spinner-lg"></span>
        </div>
      </div>
      <div class="sg-code">.spinner      20px, 2px border, navy top, 0.6s spin
.spinner-sm   14px
.spinner-lg   32px, 3px border</div>
    </div>
  </div>


  <!-- ======== BUTTONS ======== -->
  <div class="sg-section" id="buttons">
    <div class="sg-section-title">Buttons</div>

    <div class="sg-subsection">
      <div class="sg-label">Core Button Classes</div>
      <div class="sg-demo">
        <div class="sg-button-row">
          <a href="#" class="mps-button">Default</a>
          <a href="#" class="mps-button mps-button-blue">Blue</a>
          <a href="#" class="mps-button mps-button-green">Green</a>
          <a href="#" class="mps-button mps-button-red">Red</a>
        </div>
      </div>
      <div class="sg-code">.mps-button              — gray default (#D4D0C8)
.mps-button-blue         — blue action (#98b6fa)
.mps-button-green        — green success (#a3c765)
.mps-button-red          — red danger (#bc2131)

Dark mode: background-image patterns, colored borders</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Semantic Button Classes</div>
      <div class="sg-demo">
        <div class="sg-button-row">
          <a href="#" class="mps-button shop-new-button">&#65291; New Shop</a>
          <a href="#" class="mps-button product-edit-button">&#9998; Edit</a>
          <a href="#" class="mps-button product-download-button">&#11015; Download</a>
          <a href="#" class="mps-button product-new-button">&#65291; New Product</a>
        </div>
      </div>
      <div class="sg-code">.shop-new-button          — green CTA
.product-edit-button      — blue
.product-download-button  — green
.product-new-button       — blue</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Small Buttons, Cancel &amp; Disabled</div>
      <div class="sg-demo">
        <div class="sg-button-row">
          <a href="#" class="mps-button mps-button-small mps-button-green">&#65291; New</a>
          <a href="#" class="mps-button mps-button-small mps-button-blue">&#9776; Actions</a>
          <button class="mps-cancel-button">Cancel</button>
          <button class="mps-cancel-button-red">Delete</button>
          <a href="#" class="mps-button mps-button-blue disabled">Disabled</a>
        </div>
      </div>
      <div class="sg-code">.mps-button-small         — compact (140px min-width at desktop)
.mps-cancel-button        — inline cancel link
.mps-cancel-button-red    — inline danger link
.disabled / [disabled]    — opacity 0.38, pointer-events none</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Cart Action Buttons</div>
      <div class="sg-demo">
        <div class="sg-button-row">
          <button class="cart-checkout-button mps-button">Checkout</button>
          <button class="cart-save-button mps-button">Save Cart</button>
          <button class="cart-activate-button mps-button">Activate</button>
          <button class="cart-delete-button mps-button">Delete Cart</button>
          <button class="cart-remove-link">remove</button>
        </div>
      </div>
      <div class="sg-code">.cart-checkout-button  — green (#a3c765)
.cart-save-button      — blue (#98b6fa)
.cart-activate-button  — navy (#5871ad)
.cart-delete-button    — danger (#CC6958, white text)
.cart-remove-link      — bare link, no button chrome</div>
    </div>
  </div>


  <!-- ======== FORMS ======== -->
  <div class="sg-section" id="forms">
    <div class="sg-section-title">Form Elements</div>
    <div class="sg-demo">
      <label>Text Input</label>
      <input type="text" class="mps-product-title" placeholder="Product title" style="max-width: 400px; width: 100%;">
      <br/><br/>
      <label>Price Input</label>
      <input type="text" class="mps-product-price" placeholder="9.99" style="max-width: 200px;">
      <br/><br/>
      <label>Textarea</label>
      <textarea class="mps-product-description" placeholder="Description..." style="max-width: 400px; width: 100%; height: 80px;"></textarea>
      <br/><br/>
      <label>File Input</label>
      <input type="file" class="file-input" style="max-width: 400px;">
      <br/><br/>
      <label>Submit Button</label><br/>
      <input type="submit" class="mps-submit" value="Save" style="max-width: 200px;">
    </div>
    <div class="sg-code">input[type="text"]  — padding: 8px, border-radius: 4px, 1px solid #ccc
textarea            — same styling, box-sizing: border-box
.mps-submit         — submit button
Dark mode: var(--input-bg), var(--input-border), var(--input-text)</div>

    <div class="sg-subsection">
      <div class="sg-label">Settings form (stacked field + hint, two-up grid)</div>
      <form class="settings-form well" onsubmit="return false;">
        <label class="settings-field settings-field--inline settings-field--full">
          <input type="checkbox" checked />
          <span>Enable this feature (section-wide default)</span>
        </label>
        <div class="settings-form-grid">
          <div class="settings-field">
            <label>Threshold (%)</label>
            <input type="number" value="95" min="0" max="100" />
          </div>
          <div class="settings-field">
            <label>Expiration (hours)</label>
            <input type="number" value="168" min="1" />
            <small class="settings-field-hint">Short hint explaining the field.</small>
          </div>
          <div class="settings-field">
            <label>Minimum amount ($)</label>
            <input type="number" placeholder="No floor" />
            <small class="settings-field-hint">Another hint — wraps below the control, never beside it.</small>
          </div>
          <div class="settings-field">
            <label>Max rounds</label>
            <input type="number" value="3" min="1" />
          </div>
        </div>
        <div class="settings-form-actions">
          <input type="submit" class="mps-submit" value="Save Settings" />
        </div>
      </form>
      <div class="sg-code">.settings-form         — grid, gap var(--space-4)
.settings-form-grid    — 1 col, 2 cols @640px (repeat(2, minmax(0,1fr)))
.settings-field        — grid: label / control / .settings-field-hint stacked
.settings-field--inline — auto 1fr (checkbox + label)
.settings-field--full  — grid-column: 1 / -1 (span both columns)
.settings-field-hint   — var(--text-muted), var(--text-sm)
.settings-form-actions — 1fr auto; submit pinned right
Grid only — no flex.</div>
    </div>
  </div>


  <!-- ======== WELLS ======== -->
  <div class="sg-section" id="wells">
    <div class="sg-section-title">Wells &amp; Containers</div>

    <div class="sg-subsection">
      <div class="sg-label">Well (gray background)</div>
      <div class="well" style="margin-bottom: 12px;">
        Content inside a well. Background: #F9F9FA, border-radius: 10px, padding: 10px.
      </div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Well Green (success)</div>
      <div class="well-green" style="background-color: #e8f5d4; border-radius: 10px; padding: 10px; margin-bottom: 12px;">
        Success container with green background.
      </div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Coupon (dotted border)</div>
      <div class="coupon" style="margin-bottom: 12px;">
        Coupon container with dotted border. border: 3px dotted #bbb, border-radius: 4px, padding: 20px.
      </div>
    </div>
  </div>


  <!-- ======== ALERTS ======== -->
  <div class="sg-section" id="alerts">
    <div class="sg-section-title">Alerts</div>
    <div class="sg-demo">
      <div class="alert alert-success" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
        <div class="alert-message">Success alert &mdash; --alert-success-bg</div>
      </div>
      <div class="alert alert-info" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
        <div class="alert-message">Info alert &mdash; --alert-info-bg</div>
      </div>
      <div class="alert alert-warning" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
        <div class="alert-message">Warning alert &mdash; --alert-warning-bg</div>
      </div>
      <div class="alert alert-danger" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
        <div class="alert-message">Danger alert &mdash; --alert-danger-bg</div>
      </div>
    </div>
    <div class="sg-code">Variants: .alert-success, .alert-info, .alert-warning, .alert-danger
Token pairs: --alert-{variant}-bg, --alert-{variant}-text, --alert-{variant}-border</div>
  </div>


  <!-- ======== STATUS ======== -->
  <div class="sg-section" id="status">
    <div class="sg-section-title">Status Text &amp; Notices</div>

    <div class="sg-subsection">
      <div class="sg-label">Inline Status Colors</div>
      <div class="sg-demo">
        <p class="status-success"><strong>&#10003; Payment Confirmed</strong></p>
        <p class="status-warning"><strong>&#9203; Awaiting Confirmations</strong></p>
        <p class="status-info"><strong>&#9203; Waiting for Payment</strong></p>
        <p class="status-error"><strong>&#10005; Payment Expired</strong></p>
      </div>
      <div class="sg-code">.status-success  #28a745
.status-warning  #ffc107
.status-info     #6c757d
.status-error    #dc3545</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Status Notice Boxes</div>
      <div class="sg-demo">
        <div class="status-warning-notice" style="padding: 10px; margin-bottom: 8px;">Warning notice &mdash; yellow background</div>
        <div class="status-error-notice" style="padding: 10px; margin-bottom: 8px;">Error notice &mdash; red background</div>
        <div class="status-info-notice" style="padding: 10px; margin-bottom: 8px;">Info notice &mdash; blue background</div>
      </div>
      <div class="sg-code">.status-warning-notice  bg: #fff3cd, border: #ffeaa7
.status-error-notice    bg: #f8d7da, border: #f5c6cb
.status-info-notice     bg: #d1ecf1, border: #bee5eb
Dark mode overrides via --notice-*-bg and --notice-*-border tokens.</div>
    </div>
  </div>


  <!-- ======== PRODUCT CARDS ======== -->
  <div class="sg-section" id="cards">
    <div class="sg-section-title">Product Cards (SERP)</div>
    <div class="sg-demo">
      <section class="serp" style="max-width: 500px;">
        <div class="serp-item">
          <div style="background: var(--input-border, #ddd); border-radius: 4px; width: 100%; height: 120px; display: grid; place-items: center; opacity: 0.5;">Image</div>
          <b><a href="#">Product Title</a></b>
          <br>
          <a href="#">$19.99</a>
          <br/>
          <a href="#">Shop Name</a>
        </div>
        <div class="serp-item">
          <div style="background: var(--input-border, #ddd); border-radius: 4px; width: 100%; height: 120px; display: grid; place-items: center; opacity: 0.5;">Image</div>
          <b><a href="#">Another Product</a></b>
          <br>
          <a href="#">$7.50</a>
          <br/>
          <a href="#">Shop Name</a>
        </div>
      </section>
    </div>
    <div class="sg-code">.serp          — auto-fit grid, minmax(160px, 1fr)
.serp-item     — hover: brightness change, transition 700ms
.serp-thumbnail — border-radius: 4px, width: 100%</div>

    <div class="sg-subsection">
      <div class="sg-label">Profile card (profile.j2)</div>
      <section class="profile-page" style="max-width: 480px;">
        <div class="profile-card well">
          <div class="profile-card-header">
            <img class="profile-avatar" src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&s=160&f=y" alt="" width="80" height="80" />
            <div class="profile-identity">
              <h1 class="type-title">jane-doe</h1>
              <p class="profile-handle">@jane-doe</p>
              <p class="profile-meta">Member since May 2026</p>
              <p class="profile-meta">2 shops</p>
            </div>
          </div>
          <details class="profile-email-reveal">
            <summary>Show email address</summary>
            <p class="profile-email"><a href="#">jane@example.com</a></p>
            <p class="profile-meta">Visible to you as an operator of Example Shop.</p>
          </details>
        </div>
        <div class="profile-shops well">
          <h2 class="type-title">Shops</h2>
          <ul class="profile-shop-list"><li><a href="#">Example Shop</a></li><li><a href="#">Side Project</a></li></ul>
        </div>
      </section>
      <div class="sg-code">.profile-page        — grid, gap var(--space-4)
.profile-card-header — auto 1fr; avatar + identity
.profile-avatar      — 80×80, var(--radius-md)
.profile-handle / .profile-meta — var(--text-muted), var(--text-sm)
.profile-email-reveal — &lt;details&gt;; email never shown by default (works no-JS)
.profile-shop-list   — grid list, var(--space-1) gap
Email is server-gated: only sent when viewer is self, or a shop operator
viewing in that shop's context with prior transaction history.</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Action button grid (actions_view.j2)</div>
      <section class="action-columns well" style="max-width: 720px;">
        <div class="action-button-grid">
          <a href="#" class="mps-button product-edit-button">View Shop</a>
          <a href="#" class="mps-button product-edit-button">View Products</a>
          <a href="#" class="mps-button product-edit-button">🤝&nbsp; Offers</a>
          <a href="#" class="mps-button product-edit-button">💰&nbsp; Shop Sales</a>
          <a href="#" class="mps-button product-edit-button">💬&nbsp; Shop Comments</a>
          <a href="#" class="mps-button product-edit-button">⚙&nbsp; Shop Settings</a>
        </div>
      </section>
      <div class="sg-code">.action-columns      — well wrapper, max-width 1100px, centered, padded
.action-button-grid  — grid, repeat(auto-fit, minmax(15rem, 1fr)), gap var(--space-3)
One flat grid of .mps-button links — balances and wraps responsively.
15rem track is wider than the widest label so nowrap buttons never
overflow the well. Grid only — no flex, no &lt;br&gt; spacers.</div>
    </div>
  </div>


  <!-- ======== CART ======== -->
  <div class="sg-section" id="cart">
    <div class="sg-section-title">Cart &amp; Checkout Layout</div>
    <div class="sg-code">Cart page:
  section.cart-grid            — stacked mobile, 4-col grid desktop (1fr 1fr 1fr 1fr)
  section.cart-left            — spans 3 columns
  section.cart-left-grid       — inner grid: 1fr 4fr 1fr (thumbnail | info | price)
  section.cart-right           — column 4, action buttons
  .cart-shop-grid-span         — spans 3 cols, shop name header
  .cart-total-grid-span        — spans 3 cols, right-aligned total
  .cart-inline-form            — display: inline (quantity + remove forms)
  input.mps-quantity           — narrow quantity input (60px)
  img.product-cart-thumbnail   — 60x60, border-radius 4px

Checkout page:
  section.checkout-page        — grid, 1-col default, 2-col with :has(.checkout-left)
  section.checkout-left        — payment form
  section.checkout-right       — order summary
  Mobile: collapses to single column at 768px</div>
  </div>


  <!-- ======== COMMENTS ======== -->
  <div class="sg-section" id="comments">
    <div class="sg-section-title">Comment Actions</div>
    <div class="sg-demo">
      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; max-width: 400px;">
        <a href="#" class="reply-link" style="display: inline-block; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; font-size: 13px;">Reply</a>
        <a href="#" class="edit-link" style="display: inline-block; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; font-size: 13px;">Edit</a>
        <a href="#" class="delete-link" style="display: inline-block; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; font-size: 13px;">Delete</a>
        <a href="#" class="moderate-link" style="display: inline-block; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; font-size: 13px;">Moderate</a>
      </div>
    </div>
    <div class="sg-code">.reply-link      — blue text, blue border on hover
.edit-link       — same pattern
.delete-link     — red text, red border on hover
.moderate-link   — same as reply
Dark mode: uses theme background images on hover</div>
  </div>


  <!-- ======== TOGGLE ======== -->
  <div class="sg-section" id="toggle">
    <div class="sg-section-title">Toggle / Details</div>
    <div class="sg-demo">
      <details>
        <summary class="toggle-summary">Show API Keys</summary>
        <div class="api-key-details" style="margin-top: 10px;">
          Hidden content revealed on click. Pure CSS using &lt;details&gt; element.
        </div>
      </details>
    </div>
    <div class="sg-code">.toggle-summary     — cursor: pointer, list-style: none, underline link
.api-key-details    — margin-top: 10px
Uses native &lt;details&gt; element — no JS required.</div>
  </div>


  <!-- ======== RIBBON ======== -->
  <div class="sg-section" id="ribbon">
    <div class="sg-section-title">Message Ribbon</div>
    <div class="sg-demo">
      <div class="message-ribbon" style="display: block;">
        Ribbon message here &mdash; gradient #5871ad to #82A8FF
      </div>
    </div>
    <div class="sg-code">.message-ribbon — gradient banner, hidden on mobile, shown at 800px+
Customizable per shop: ribbon_color_1, ribbon_color_2, ribbon_text_color</div>
  </div>


  <!-- ======== TASK BAR ======== -->
  <div class="sg-section" id="taskbar">
    <div class="sg-section-title">Windows 95 Task Bar</div>
    <div class="sg-demo">
      <section class="windows-95-task-bar" style="display: grid; grid-template-columns: 1fr 1fr; gap: 4px;">
        <section class="windows-95-start-button">
          <a href="#" class="windows-95-start-button mps-button mps-button-blue"><span class="start-button-icon">&#9776; &nbsp;</span> Shop Name</a>
        </section>
        <section class="call-to-action" style="text-align: right;">
          <a href="#" class="mps-button mps-button-small mps-button-green">&#65291; New</a>
        </section>
      </section>
    </div>
    <div class="sg-code">.windows-95-task-bar       — grid, 1 col mobile / 2 col desktop
.windows-95-start-button   — blue action menu button
.call-to-action            — right-aligned new button</div>
  </div>


  <!-- ======== LAYOUT ======== -->
  <div class="sg-section" id="layout">
    <div class="sg-section-title">Layout</div>

    <div class="sg-subsection">
      <div class="sg-label">Containers</div>
      <div class="sg-code">Legacy (common.css):
  .one-column       — max-width: 600px, centered
  .one-column-thin  — max-width: 400px, centered
  .action-columns   — 2-column grid (50/50)

Token-based (tokens.css):
  .container        — max-width: var(--content-width) 800px, auto padding
  .container-narrow — max-width: var(--content-narrow) 400px
  .container-wide   — max-width: var(--content-wide) 1200px</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Breakpoints</div>
      <div class="sg-code">Mobile first (no media query)
@media (max-width: 640px)  — phone portrait adjustments
@media (max-width: 768px)  — tablet
@media (min-width: 800px)  — desktop nav, 2-col layouts
@media (min-width: 960px)  — wider product grids
@media (min-width: 1200px) — large desktop padding

Tokens: --bp-tablet: 800px, --bp-desktop: 1200px</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">Z-index scale</div>
      <div class="sg-code">--z-base:     0     /* default */
--z-dropdown: 100   /* dropdown menus */
--z-sticky:   200   /* sticky headers */
--z-overlay:  300   /* backdrop overlays */
--z-modal:    400   /* modal dialogs */
--z-toast:    500   /* toast notifications */
--z-ribbon:   600   /* top ribbon banner */</div>
    </div>

    <div class="sg-subsection">
      <div class="sg-label">CSS files</div>
      <div class="sg-code">tokens.css   — design tokens, base resets, utilities, animations
common.css   — shared app styles (layout, buttons, nav, wells, footer, cards, dark mode)</div>
    </div>
  </div>


  <!-- ======== THEME SYSTEM ======== -->
  <div class="sg-section" id="theme">
    <div class="sg-section-title">Theme System</div>
    <div class="sg-code">CSS Variables (common.css :root / [data-theme="dark"]):

Light:                          Dark:
--bg-primary: #ffffff           --bg-primary: #0d1117
--bg-secondary: #f8f9fa         --bg-secondary: #161b22
--text-primary: #333333         --text-primary: #ffffff
--link-color: #5f6368           --link-color: #7ab9ff
--blue-color: #98b6fa           --blue-color: #7ab9ff
--green-color: #a3c765          --green-color: #08e700
--red-color: #bc2131            --red-color: #F34C31
--input-bg: #ffffff             --input-bg: #161b22
--input-border: #cccccc         --input-border: #7ab9ff

Priority: localStorage > user pref > shop default > light
Toggle: window.setTheme('dark') / window.setTheme('light')
Attribute: html[data-theme="dark"] or html[data-theme="light"]

Dark buttons use background-image patterns:
  /static/img/trans-blue.png  (normal) / trans-blue2.png  (hover)
  /static/img/trans-green.png (normal) / trans-green2.png (hover)
  /static/img/trans-red.png   (normal) / trans-red2.png   (hover)</div>
  </div>


  <!-- ======== FOOTER ======== -->
  <div class="sg-section" id="footer">
    <div class="sg-section-title">Footer</div>
    <div class="sg-code">.mps-footer             — border-top, padding, bg
.mps-footer-grid        — 1 col mobile, 4 col desktop (2fr 1fr 1fr 1fr)
.mps-footer-brand       — logo + tagline
.mps-footer-group       — title + links column
.mps-footer-group-title — uppercase, small, bold
.mps-footer-links a     — muted color, green on hover
.mps-footer-ctas        — button row with borders
.mps-footer-bottom      — centered copyright text

SaaS domain: full footer with Get Started, Resources, Account
Shop domain: shop-specific footer with feeds + account</div>
  </div>


  <!-- ======== LANDING PAGE ======== -->
  <div class="sg-section" id="landing">
    <div class="sg-section-title">Landing Page</div>

    <p>The SaaS homepage for unauthenticated visitors. Uses design tokens throughout. Grid-based feature cards. Responsive: 3 columns &rarr; 2 &rarr; 1.</p>

    <div class="sg-code">.landing-hero           — centered hero, max-width: content-width, generous vertical margin
.landing-hero-sub       — subtitle, constrained width, secondary text color
.landing-hero-ctas      — inline grid of CTA buttons, stacks on mobile
.landing-features       — 3-col grid of feature cards, responsive breakpoints
.landing-feature-card   — well with icon + title + description, centered
.landing-feature-icon   — large emoji, text-4xl
.landing-cta-bottom     — bottom call-to-action well, centered</div>

    <div class="sg-subsection">
      <div class="sg-label">Login Card</div>
      <p>The unified login/signup form. Centered card with elevation, styled input, and hint block.</p>
      <div class="sg-code">.login-card              — max-width 440px, centered, elevation-3, surface-base bg
.login-card-title       — type-headline-3, centered
.login-card-subtitle    — type-body, secondary color
.login-form             — grid layout, gap-4
.login-form-label       — type-label, uppercase
.login-form-input       — full-width, md radius, focus border animation
.login-form-submit      — full-width mps-button-green
.login-card-hint        — surface-dim background, explains what happens next</div>
    </div>
  </div>


  <!-- ======== CLASS ACT ======== -->
  <div class="sg-section" id="class-act">
    <div class="sg-section-title">Class Act</div>

    <p>Patterns that are thoughtfully designed and worth preserving. If something is a <em>class act</em>, it earned its place here through deliberate UX decisions, not accident.</p>

    <div class="sg-subsection">
      <div class="sg-label">Passwordless Unified Auth Flow</div>

      <p>The sign-up and login flow is the same flow. There is no separate registration page. Every entry point &mdash; "Create a Shop," "Log In," "My Account" &mdash; routes to <code>/join-or-log-in</code>, which asks for one thing: your email.</p>

      <div class="sg-demo">
        <div style="max-width: 400px; margin: 0 auto;">
          <div class="well elevation-2" style="padding: 32px 24px; text-align: center;">
            <h3 class="type-headline-3" style="margin-bottom: 4px;">Welcome</h3>
            <p class="type-body" style="color: var(--text-secondary); margin-bottom: 24px;">New and existing users &mdash; one step to get in.</p>
            <div style="text-align: left;">
              <div class="type-label" style="margin-bottom: 8px;">Email address</div>
              <input type="email" class="login-form-input" placeholder="you@example.com" disabled style="margin-bottom: 16px;" />
              <div class="mps-button mps-button-green" style="width: 100%; text-align: center; font-size: 16px; padding: 12px;">Send verification code</div>
            </div>
            <div style="margin-top: 20px; padding: 12px; background: var(--surface-dim); border-radius: 8px; text-align: left;">
              <span class="type-body-sm"><strong>What happens next?</strong> We email you a one-time code. Click it to log in &mdash; no password needed.</span>
            </div>
          </div>
        </div>
      </div>

      <div class="sg-subsection" style="margin-top: 24px;">
        <div class="sg-label">Why this is a class act</div>
        <div class="sg-code">DESIGN DECISIONS:

1. One flow for new + existing users
   No "Sign up" vs "Log in" split. The system figures it out.
   New email? Account created. Known email? Welcome back.
   Zero cognitive load for the visitor.

2. Email-first, passwordless
   No passwords to forget, leak, or brute-force.
   A one-time verification code is emailed to the user.
   Click the link or enter the code — done.

3. Every CTA leads here
   "Create a Shop," "My Account," "Log In," "Get Started"
   — they ALL route to /join-or-log-in.
   One URL. One form. No dead ends.

4. Honeypot spam protection
   A hidden email2 field catches bots.
   No CAPTCHA friction for real humans.

FLOW DIAGRAM:

  Visitor clicks any CTA
         |
         v
  /join-or-log-in
  [Enter email address]
         |
         v
  Server checks email
         |
    +----+----+
    |         |
  New user  Existing user
    |         |
  Create     Look up
  account    account
    |         |
    +----+----+
         |
         v
  Email one-time code
         |
         v
  User clicks link in email
         |
         v
  Authenticated session
  (redirect to ?next= or /)

TEMPLATE: join-or-log-in.j2
VIEW:     views/user.py (join_or_log_in)
CSS:      .login-card, .login-form-*</div>
      </div>
    </div>

  </div>

  <br/>

  {# Edit-page patterns #}
  <h2>Edit page patterns</h2>

  <p>Material-design-inspired patterns to make the product / content edit form epic. Each section reads as a discrete step the owner can act on.</p>

  <h3>Status bar (top of edit page)</h3>
  <p>At-a-glance state: visibility, ready-to-sell flag, current price. Visibility colors: blue=public, gray=private, purple=unlisted. Ready uses success-green; missing files uses gold warning.</p>
  <section class="edit-status-bar" style="margin-bottom: var(--space-4);">
    <span class="edit-status-pill edit-status-pill-public">Public</span>
    <span class="edit-status-pill edit-status-pill-ready">&#10003; Ready to sell</span>
    <span class="edit-status-pill" style="background: var(--color-text-muted, #888);">$42.00</span>
  </section>

  <section class="edit-status-bar" style="margin-bottom: var(--space-4);">
    <span class="edit-status-pill edit-status-pill-private">Private</span>
    <span class="edit-status-pill edit-status-pill-incomplete">&#9888; Missing required files</span>
  </section>

  <h3>Section card (well + leading icon)</h3>
  <p>Each card has a 36px circular icon badge in its <code>&lt;h3&gt;</code> header, separated from content by a thin border. Cards lift on hover via elevation token. Wrap the icon glyph in <code>&lt;span class="edit-card-icon"&gt;</code>.</p>

  <div class="edit-page" style="grid-template-columns: 1fr; max-width: 100%; padding: 0; margin: var(--space-3) 0 var(--space-5);">
    <section class="well2">
      <h3>
        <span class="edit-card-icon">&#128193;</span>
        Upload or Replace Product File
      </h3>
      <p>People may download this file after making a purchase.</p>
      <p class="file-meta total-capacity">
        <span class="file-meta-item">Total capacity: 1.3MiB</span>
      </p>
    </section>

    <section class="well2">
      <h3>
        <span class="edit-card-icon">&#127912;</span>
        Upload or Replace Thumbnail Files
      </h3>
      <p>Your cover (<code>thumbnail1</code>) shows up on search pages.</p>
    </section>

    <section class="well2">
      <h3>
        <span class="edit-card-icon">&#9998;</span>
        Edit Title, Description, or Visibility
      </h3>
      <p>Title, description, price, pricing mode.</p>
    </section>
  </div>

  <h3>Primary save action</h3>
  <p>The Save Settings button on the edit page is rendered as a filled, prominent CTA — navy background, bold weight, elevation shadow that lifts on hover. Class <code>mps-button-primary</code>.</p>
  <button class="mps-button-primary" style="margin-bottom: var(--space-4);">Save Settings</button>

  <h3>Full-width card (spans both columns)</h3>
  <p>For sections that need extra horizontal room (thumbnail grid, bundle list), add <code>edit-card-full</code> to the well's class list. It spans the entire row in the 2-column edit grid.</p>
  <div class="edit-page" style="grid-template-columns: 1fr 1fr; max-width: 100%; padding: 0; margin: var(--space-3) 0 var(--space-5);">
    <section class="well2">
      <h3><span class="edit-card-icon">&#128193;</span> Half-width card</h3>
      <p>This is a single-column card.</p>
    </section>
    <section class="well2">
      <h3><span class="edit-card-icon">&#9998;</span> Half-width card</h3>
      <p>This is a single-column card.</p>
    </section>
    <section class="well2 edit-card-full">
      <h3><span class="edit-card-icon">&#127912;</span> Full-width card</h3>
      <p>This card spans both columns — useful for thumbnail grids and other content that needs room to breathe.</p>
    </section>
  </div>

  <h3>File metadata line</h3>
  <p>Stack file type and size on a single line with a · separator. Use class <code>file-meta</code> on the wrapping <code>&lt;p&gt;</code> and <code>file-meta-item</code> on each child span.</p>
  <div class="well" style="margin-bottom: var(--space-4);">
    <p class="bold-text">Current File: example.pdf</p>
    <p class="file-meta">
      <span class="file-meta-item">File Type: pdf</span>
      <span class="file-meta-item">File Size: 1.1MiB</span>
    </p>
  </div>

  <h3>Thumbnail label</h3>
  <p>Monospace label that identifies which thumbnail slot is which (thumbnail1 = cover, thumbnail2-4 = additional). Use <code>&lt;h4 class="thumbnail-label"&gt;thumbnail1&lt;/h4&gt;</code> above each upload widget.</p>
  <div class="upload-thumbnail-item well" style="margin-bottom: var(--space-4);">
    <h4 class="thumbnail-label">thumbnail1</h4>
    <p class="bold-text">Current File: cover.jpg</p>
    <p class="file-meta">
      <span class="file-meta-item">File Type: jpg</span>
      <span class="file-meta-item">File Size: 32.6KiB</span>
    </p>
  </div>

  <h3>Form helper text</h3>
  <p>Small, muted line below a label that gives extra context without breaking the form layout. Class <code>form-help</code>.</p>
  <div class="well" style="margin-bottom: var(--space-4);">
    <label for="sg-help-input">Description</label>
    <small class="form-help">Supports Markdown and some HTML.</small>
    <textarea id="sg-help-input" rows="2" style="width:100%;" placeholder="Type here..."></textarea>
  </div>

  <br/>

  {# MPS-20 + MPS-21: Auction & Offer components #}
  <h2>Auction (MPS-20) and Offer (MPS-21)</h2>

  <p>Pricing-mode components for shops that run auctions or accept offers.</p>

  <h3>Auction state badges</h3>
  <p>Distinct color per state — Draft, Scheduled, Active, Ended, Settled, Cancelled.</p>
  <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4);">
    <span class="auction-state-badge auction-state-0">Draft</span>
    <span class="auction-state-badge auction-state-1">Scheduled</span>
    <span class="auction-state-badge auction-state-2">Active</span>
    <span class="auction-state-badge auction-state-3">Ended</span>
    <span class="auction-state-badge auction-state-4">Settled</span>
    <span class="auction-state-badge auction-state-5">Cancelled</span>
  </div>

  <h3>Auction countdown</h3>
  <p>Live countdown clock that ticks every second via auction.js. Pre-rendered as static text so the page works without JS.</p>
  <div class="auction-stats well" style="margin-bottom: var(--space-4);">
    <div class="auction-stat">
      <span class="auction-stat-label">Current high</span>
      <span class="auction-stat-value">$42.50</span>
    </div>
    <div class="auction-stat">
      <span class="auction-stat-label">Time remaining</span>
      <span class="auction-stat-value">2h 14m 38s</span>
    </div>
  </div>

  <h3>Bid form</h3>
  <p>Number input with <code>min</code> bound to the next-bid floor. Optional <code>max_proxy</code> ceiling for proxy bidding.</p>
  <form class="auction-bid-form well" style="margin-bottom: var(--space-4);" onsubmit="return false;">
    <label for="sg-bid-amount">Your bid (USD)</label>
    <input type="number" step="0.01" min="42.50" id="sg-bid-amount" value="42.50" />
    <small>Minimum next bid: $42.50</small>

    <label for="sg-max-proxy">Max proxy ceiling (optional)</label>
    <input type="number" step="0.01" min="42.50" id="sg-max-proxy"
           placeholder="Auto-bid up to this amount" />
    <small>The system will outbid others up to your ceiling.</small>

    <input type="submit" class="mps-submit" value="Place Bid" />
  </form>

  <h3>Offer state badges</h3>
  <p>Pending, Accepted, Countered, Declined, Expired, Withdrawn, Paid.</p>
  <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4);">
    <span class="offer-state-badge offer-state-0">Pending</span>
    <span class="offer-state-badge offer-state-1">Accepted</span>
    <span class="offer-state-badge offer-state-2">Countered</span>
    <span class="offer-state-badge offer-state-3">Declined</span>
    <span class="offer-state-badge offer-state-4">Expired</span>
    <span class="offer-state-badge offer-state-5">Withdrawn</span>
    <span class="offer-state-badge offer-state-6">Paid</span>
  </div>

  <h3>Make Offer entry point</h3>
  <p>Collapsed by default; expands to a number input on click. Hidden for anon users (replaced with login CTA) and for shop owners.</p>
  <details style="margin-bottom: var(--space-4);">
    <summary class="mps-button">Make an offer</summary>
    <form style="margin-top: var(--space-2)" onsubmit="return false;">
      <label for="sg-offer-amount">Your offer (USD)</label>
      <input type="number" step="0.01" min="0.01" id="sg-offer-amount" />
      <input type="text" placeholder="Optional message" />
      <input type="submit" class="mps-submit" value="Submit Offer" />
    </form>
  </details>

  <br/>

</section>

{%- endblock -%}
