/* motif/families/sc/family.css — the sc voice
 *
 * Sc: "Editorial-Academic — Cream, Sage, & a Little Decoration."
 * Used by the stonecamp.us umbrella (trellis, grove, future
 * apps; lithica likely diverges further if it leans gamification).
 *
 * Loading order:
 *   tokens.css → components.css → utilities.css → responsive.css
 *   → auth.css (and any future motif aspect)
 *   → families/sc/family.css     (overrides everything above)
 *
 * Like pi, it overrides core tokens (--color-bg, surface tones)
 * AND auth-aspect tokens (--auth-bg, --auth-card-bg, …) AND
 * adds selector rules for sc-specific component flourishes.
 *
 * Sc embraces motif's defaults (sage navbar, sage gradient hero
 * band, standard shadows) where pi rejected them — that's the
 * single biggest visual difference between the two families,
 * legible from the first frame.
 */

[data-family="sc"] {
    /* ── Core token overrides ───────────────────────────────
     * Body type stays Plex Sans like pi (family resemblance).
     * Mono is Plex Mono (same as pi). Display headlines lean
     * Plex Sans 600 in sc — pi's serif-display is its
     * differentiator; sc keeps serif for editorial moments
     * (kicker italics, section headings) but not for the
     * primary headline. */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: var(--motif-font-mono);

    /* Surface — warmer cream than pi's #fbf9f4 (an ivory that
       feels printed-on, not laid-on), card near-white for
       higher-contrast depth. */
    --color-bg: #faf6ed;
    --color-card-bg: #fffefa;
    --color-fg: var(--color-neutral-900);
    --color-fg-muted: var(--color-neutral-600);
    --color-border: #e8dfc8;     /* warm hairline, slightly darker than pi's neutral-200 */

    /* Sc's accent voices — these become tokens in motif/tokens.css
       at distillation (shared across families that want them).
       Coral for warmth callouts, violet for academic variety,
       deep navy-violet for occasional contrast headings. */
    --color-sc-coral-100: #fbe0d6;
    --color-sc-coral-500: #e07a5f;
    --color-sc-coral-700: #b85c34;
    --color-sc-violet-100: #ebe1f1;
    --color-sc-violet-500: #8a5e9c;
    --color-sc-violet-700: #5e3e6e;
    --color-sc-deep: #3b3a4e;    /* deep navy-violet — for editorial headers */

    /* Shadows stay motif-default (--shadow-md / -lg / -xl) — sc
       doesn't soften them like pi does. Cards visibly elevate. */

    /* ── Auth aspect overrides ──────────────────────────────

       Sc auth uses a sage gradient header band on top of a
       white card. Inputs are boxed (motif default) — pi's
       bottom-rule style would feel underdressed for the
       editorial voice. */

    --auth-bg: #faf6ed;
    --auth-card-bg: #fffefa;
    --auth-card-shadow: var(--shadow-lg);
    --auth-card-radius: var(--radius-xl);
    --auth-card-width: 460px;
    --auth-card-padding-y: var(--space-10);
    --auth-card-padding-x: var(--space-10);

    /* Title — Plex Sans 600 uppercase + small-caps tracking.
       This is sc's deliberate move away from pi's display
       serif; it reads as "academic poster" rather than
       "editorial magazine cover." The Plex Serif italic kicker
       sits above the title and carries the decorative voice.
       Sized smaller than pi's display title (3.25rem) since
       it's a poster heading inside a colored band, not a
       page hero — but big enough to land as the surface's
       primary element. */
    --auth-title-font: var(--font-sans);
    --auth-title-color: var(--color-sc-deep);
    --auth-title-size: 2rem;
    --auth-title-weight: 600;
    --auth-title-tracking: 0.04em;

    /* Inputs — boxed (motif default), hairline border, focus
       ring uses sage primary. Larger font like pi (form fields
       deserve readable typing surface). */
    --auth-input-bottom-only: 0;
    --auth-input-rest-color: var(--color-border);
    --auth-input-focus-color: var(--color-primary-600);

    /* Primary CTA — sage-700 solid (same as pi); but sc's CTA
       is positioned alongside a coral-secondary CTA in marketing
       contexts. */
    --auth-action-bg: var(--color-primary-700);
    --auth-action-color: #ffffff;
    --auth-action-radius: var(--radius-md);

    --auth-text-color: var(--color-neutral-700);

    --auth-link-color: var(--color-primary-700);
    --auth-link-decoration: none;
    --auth-link-underline-offset: 0.2em;

    --auth-site-link-color: var(--color-neutral-500);
    --auth-site-link-hover: var(--color-sc-deep);
}

/* ════════════════════════════════════════════════════════════
 * Auth shell — sc voice
 * Card sits on warm cream, has a sage gradient header band at
 * the top instead of a logo-area background. The "page-grain"
 * pattern (pi's signature) is omitted — sc has color depth, not
 * texture depth.
 * ════════════════════════════════════════════════════════════ */

[data-family="sc"] .auth-shell {
    font-family: var(--font-sans);
    background: var(--auth-bg);
}

/* The card grows a sage gradient header band at top — the
   logo + auth-step + amber accent live there in white. */
[data-family="sc"] .auth-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
[data-family="sc"] .auth-card > .auth-logo {
    background: linear-gradient(135deg,
        var(--color-primary-600) 0%,
        var(--color-primary-700) 70%,
        var(--color-sc-deep) 100%);
    color: #fff;
    margin: 0;
    padding: var(--space-8) var(--space-8) var(--space-6) var(--space-8);
    text-align: center;
    border-bottom: 4px solid var(--color-secondary-500);  /* amber rule */
}
[data-family="sc"] .auth-card > .auth-logo h1 {
    font-family: var(--auth-title-font);
    font-size: var(--auth-title-size);
    font-weight: var(--auth-title-weight);
    letter-spacing: var(--auth-title-tracking);
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
[data-family="sc"] .auth-card > .auth-logo img {
    filter: brightness(0) invert(1);   /* white logo on sage band */
}

/* Everything below the gradient band gets a normal white pad. */
[data-family="sc"] .auth-card > :not(.auth-logo) {
    padding-left: var(--auth-card-padding-x);
    padding-right: var(--auth-card-padding-x);
}
[data-family="sc"] .auth-card > .auth-step {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}
[data-family="sc"] .auth-card > .auth-description {
    margin-bottom: var(--space-6);
}
[data-family="sc"] .auth-card > form,
[data-family="sc"] .auth-card > .alert {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}
[data-family="sc"] .auth-card > .auth-links,
[data-family="sc"] .auth-card > .lang-switcher {
    padding-bottom: var(--space-6);
}
[data-family="sc"] .auth-card > .lang-switcher {
    padding-bottom: var(--space-8);
}

/* The "one perfect detail" for sc — a section ornament glyph
   (§) sits above the form, in italic Plex Serif, amber. Both
   decorative and functional (it visually separates header
   band from content). */
[data-family="sc"] .auth-ornament {
    text-align: center;
    margin: var(--space-6) 0 var(--space-4) 0;
    font-family: var(--motif-font-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--color-secondary-700);
    line-height: 1;
}

/* Editorial kicker — Plex Serif italic, sits above titles in
   marketing/auth descriptions. Sc's substitute for pi's
   Plex Mono small-caps amber kicker. */
[data-family="sc"] .sc-kicker {
    display: inline-block;
    font-family: var(--motif-font-display);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--color-sc-coral-700);
    letter-spacing: 0.01em;
    margin-bottom: var(--space-3);
}

/* Auth-step — Roman numerals + section sign, italic serif.
   Italic compensation: 1rem (16px) to match the form-label
   size and read at parity with the body. */
[data-family="sc"] .auth-step {
    display: inline-block;
    font-family: var(--motif-font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-sc-violet-700);
    letter-spacing: 0.01em;
}

/* Form fields — motif default boxed style with sage focus.
   Plex Sans at --text-lg (18px) for readable typing surface
   — matches pi. Italic-serif labels above already carry
   editorial voice; the input itself stays utilitarian. */
[data-family="sc"] .form-group .input,
[data-family="sc"] .form-group input,
[data-family="sc"] .form-group select {
    border: 1px solid var(--auth-input-rest-color);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-lg);
    transition: border-color var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}
[data-family="sc"] .form-group .input:focus,
[data-family="sc"] .form-group input:focus,
[data-family="sc"] .form-group select:focus {
    outline: none;
    border-color: var(--auth-input-focus-color);
    box-shadow: 0 0 0 3px rgba(123, 163, 90, 0.18);
}

/* Form labels — Plex Serif italic (different from pi's
   Plex Mono small-caps). Carries the editorial voice into
   functional UI. Bumped to 1rem since italic optically reads
   ~1pt smaller than non-italic at the same nominal size. */
[data-family="sc"] .form-label {
    font-family: var(--motif-font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-fg-muted);
    font-weight: 400;
    margin-bottom: var(--space-2);
    letter-spacing: 0;
    text-transform: none;
}

[data-family="sc"] .form-group {
    margin-bottom: var(--space-4);
}

/* Submit button — sage solid + decorative arrow glyph after
   the label. Sized at --text-lg (18px) to match pi's CTA scale
   — primary action should feel primary. Padding bumped to
   match the larger label. */
[data-family="sc"] .auth-submit,
[data-family="sc"] .auth-action {
    background: var(--auth-action-bg);
    color: var(--auth-action-color);
    border: none;
    border-radius: var(--auth-action-radius);
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
    width: 100%;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default);
}
[data-family="sc"] .auth-action {
    width: auto;
    display: inline-block;
    text-decoration: none;
    padding: var(--space-3) var(--space-8);
}
[data-family="sc"] .auth-submit:hover,
[data-family="sc"] .auth-action:hover {
    background: var(--color-primary-800);
}

/* Links — sage with hover underline. */
[data-family="sc"] .auth-links a,
[data-family="sc"] .auth-site-link a {
    color: var(--auth-link-color);
    text-decoration: var(--auth-link-decoration);
    text-underline-offset: var(--auth-link-underline-offset);
}
[data-family="sc"] .auth-links a:hover,
[data-family="sc"] .auth-site-link a:hover {
    text-decoration: underline;
}

/* Lang switcher — Plex Serif italic small. */
[data-family="sc"] .lang-switcher {
    font-family: var(--motif-font-display);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--color-fg-muted);
}
[data-family="sc"] .lang-switcher a { text-decoration: none; }
[data-family="sc"] .lang-switcher a:hover {
    color: var(--color-sc-deep);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
 * Navbar — sc voice
 * Embrace motif's default sage primary fill (vs pi's paper-
 * cream + hairline). Brand in Plex Serif italic. Nav links in
 * Plex Sans medium with bottom border on active.
 * ════════════════════════════════════════════════════════════ */

[data-family="sc"] .navbar {
    background: var(--color-primary-700);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-sans);
    border-bottom: 4px solid var(--color-secondary-500);
}

[data-family="sc"] .navbar-brand {
    font-family: var(--motif-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--text-xl);
    color: #ffffff;
    letter-spacing: 0.01em;
}

[data-family="sc"] .navbar nav a,
[data-family="sc"] .navbar-nav a,
[data-family="sc"] .navbar-collapse > a {
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-3) var(--space-3);
    font-size: 0.9375rem;
    font-weight: var(--font-medium);
}
[data-family="sc"] .navbar nav a:hover,
[data-family="sc"] .navbar-nav a:hover,
[data-family="sc"] .navbar-collapse > a:hover {
    color: #ffffff;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.4);
}
[data-family="sc"] .navbar nav a.active,
[data-family="sc"] .navbar-nav a.active,
[data-family="sc"] .navbar-collapse > a.active {
    color: #ffffff;
    background: transparent;
    border-bottom-color: var(--color-secondary-400);
    font-weight: var(--font-semibold);
}

[data-family="sc"] .nav-avatar {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
[data-family="sc"] .nav-avatar:hover {
    background: rgba(255, 255, 255, 0.28);
}

[data-family="sc"] .dropdown-menu {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
[data-family="sc"] .dropdown-menu .dropdown-item {
    color: var(--color-fg);
    font-size: var(--text-sm);
}
[data-family="sc"] .dropdown-menu .dropdown-item:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-800);
}
[data-family="sc"] .dropdown-menu-header .name {
    font-weight: var(--font-semibold);
    color: var(--color-sc-deep);
}
[data-family="sc"] .dropdown-menu-header .email {
    color: var(--color-fg-muted);
    font-style: italic;
    font-family: var(--motif-font-display);
    font-size: 0.8125rem;
    word-break: normal;
}

/* Mobile collapse — sc's navbar IS dark, so the existing motif
   rgba-white fallback is correct (no fg/bg bug). Just use the
   amber underline for the active state on mobile too. */
@media (max-width: 767px) {
    [data-family="sc"] .navbar-collapse {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    [data-family="sc"] .navbar-collapse > nav > a.active {
        background: rgba(255, 255, 255, 0.12);
        border-left: 2px solid var(--color-secondary-400);
        border-bottom: none;
    }
}

/* ════════════════════════════════════════════════════════════
 * Hero — sc voice
 * Embrace motif's default colored fill band (vs pi's
 * transparent paper). Sage gradient + amber bottom rule. Title
 * in bold Plex Sans, kicker in italic Plex Serif.
 * ════════════════════════════════════════════════════════════ */

[data-family="sc"] .hero {
    background: linear-gradient(135deg,
        var(--color-primary-600) 0%,
        var(--color-primary-700) 60%,
        var(--color-sc-deep) 100%);
    color: #ffffff;
    border-radius: var(--radius-xl);
    border-bottom: 4px solid var(--color-secondary-500);
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

[data-family="sc"] .hero-kicker {
    display: inline-block;
    font-family: var(--motif-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-secondary-300);
    letter-spacing: 0.01em;
    margin-bottom: var(--space-4);
    text-transform: none;     /* override pi's uppercase */
}

[data-family="sc"] .hero h1 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 auto var(--space-4) auto;
    max-width: 22ch;
}

[data-family="sc"] .hero h2 {
    font-family: var(--motif-font-display);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto var(--space-8) auto;
    max-width: 52ch;
}

/* Hero body copy — paragraphs, ledes, subs, CTA notes. Sc's
   hero IS a colored band so white-translucent inheritance is
   the right read. The 0,3,1 specificity beats inline
   `.hero p.sub` color rules in legacy templates. */
[data-family="sc"] .hero p,
[data-family="sc"] .hero .sub,
[data-family="sc"] .hero .lede,
[data-family="sc"] .hero p.sub,
[data-family="sc"] .hero p.lede {
    color: rgba(255, 255, 255, 0.88);
}
[data-family="sc"] .hero .cta-note,
[data-family="sc"] .hero p.cta-note,
[data-family="sc"] .hero .sign-in {
    color: rgba(255, 255, 255, 0.75);
}
[data-family="sc"] .hero a {
    color: inherit;
}

/* Hero CTA layout — flex row centered, gap consistent across
   .hero-actions and .cta-row containers (pouch + trellis use
   different conventions). */
[data-family="sc"] .hero-actions,
[data-family="sc"] .hero .cta-row {
    display: inline-flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}
[data-family="sc"] .hero-actions .btn {
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
}
/* Hero primary CTA — darker amber + white label.
   On a dark sage slab the button mirrors the slab's logic
   (light text on chromatic fill). amber-500 + dark label was
   muddy against the colored background; amber-700 (#9a6200)
   keeps family-resemblance with pi's amber accent without
   competing with the sage fill. Reserve "amber bg + dark
   label" for use on light/cream surfaces. */
/* Hero primary CTA — amber-700 + white label. Cover both new
   (.hero-actions .btn-primary) and legacy (.hero .btn-primary
   / .hero .btn-large.primary — pouch + trellis spakit) markup. */
[data-family="sc"] .hero-actions .btn-primary,
[data-family="sc"] .hero .btn-primary,
[data-family="sc"] .hero .btn-large.primary {
    background: var(--color-secondary-700);
    color: #ffffff;
    border: none;
}
[data-family="sc"] .hero-actions .btn-primary:hover,
[data-family="sc"] .hero .btn-primary:hover,
[data-family="sc"] .hero .btn-large.primary:hover {
    background: var(--color-secondary-600);
}

/* Hero outline / secondary CTA — transparent + white border +
   white label (the inverse-on-band pattern). Covers both
   .btn-outline and undecorated .btn-large (trellis's third CTA
   that has class `btn-large` without `primary`). */
[data-family="sc"] .hero-actions .btn-outline,
[data-family="sc"] .hero .btn-outline,
[data-family="sc"] .hero .btn-large:not(.primary) {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
[data-family="sc"] .hero-actions .btn-outline:hover,
[data-family="sc"] .hero .btn-outline:hover,
[data-family="sc"] .hero .btn-large:not(.primary):hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

/* Sc has its own hero ornament — § glyph in italic Plex Serif
   sits above the kicker, same role as pi's 32px amber line
   but a typographic move not a geometric one. */
[data-family="sc"] .hero::before {
    content: "§";
    display: block;
    font-family: var(--motif-font-display);
    font-style: italic;
    font-size: 1.75rem;
    color: var(--color-secondary-300);
    margin: 0 auto var(--space-4) auto;
    line-height: 1;
}

/* Page-enter motion — keep pi's vocabulary (motion is family-
   agnostic), just declare locally so sc surfaces don't have
   to import pi's keyframes. Same names, defined under sc
   selectors. */
[data-family="sc"] .auth-card,
[data-family="sc"] .navbar,
[data-family="sc"] .hero {
    animation: sc-fade-in var(--motif-motion-page-enter) ease-out both;
}
[data-family="sc"] .form-group,
[data-family="sc"] .auth-links,
[data-family="sc"] .lang-switcher {
    animation: sc-rise-in var(--motif-motion-page-enter) ease-out both;
    animation-delay: calc(var(--motif-motion-stagger-step) * var(--sc-stagger-i, 0));
}

@keyframes sc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sc-rise-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}