/* ============================================================
   shared/components.css — reusable visual components.
   ============================================================
   Loaded after chrome.css and before page-specific style.css /
   admin.css so pages can still override component defaults.

   What's here:
     - .panel — universal card with a coloured top border. Both
       style.css and admin.css previously declared this rule with
       slight differences; canonicalised here.
     - .panel-* variants — purple / teal / green / mag.

   What's NOT here yet:
     - Buttons (.btn-*) — play and admin use different vocabularies
       (.btn-launch / .nav-btn vs .btn-primary / .btn-teal etc.),
       so unifying needs a naming pass first. Tracked as future
       work.
     - Badges (.badge-*) — admin-side only at the moment.
     - Modal patterns — admin-side only at the moment.
   ============================================================ */

:root {
    /* Component design tokens. Pages may override per-instance. */
    --panel-bg:        #fff;
    --panel-radius:    var(--radius, 12px);
    --panel-padding:   18px 20px;
    --panel-shadow:    0 6px 24px rgba(45,27,78,0.10);
    --panel-accent:    var(--accent-teal, #0097a7);
}

/* Universal card with a coloured top-border accent. */
.panel {
    background: var(--panel-bg);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    padding: var(--panel-padding);
    border-top: 4px solid var(--panel-accent);
    margin-bottom: 16px;
    width: 100%;
    overflow-x: auto;
}

/* Brand-accent variants — change just the top-border colour. */
.panel-purple { border-top-color: var(--primary-purple, #4a148c); }
.panel-teal   { border-top-color: var(--accent-teal,    #0097a7); }
.panel-green  { border-top-color: var(--accent-green,   #00873c); }
.panel-mag    { border-top-color: var(--accent-magenta, #c2185b); }