/* Stop Slop Studio · THE PRODUCT LINE, v1 (Lil Durk, 2026-09-30)
   One look for every author tool: the Cockpit, the Slop Detector, the Voice Profile, the Row, Six Laps, the Book Studio.
   The page contract: <body class="ss-line">, link this file first, then map the tool's own variables to these tokens.
   Dark is the default; [data-theme="light"] on <html> gives the paper version. No web fonts: every tool must work offline. */

:root{
  /* surfaces, darkest to lightest */
  --ss-void:#07040b; --ss-bg:#0d0813; --ss-panel:#17101f; --ss-panel-2:#20162a; --ss-glass:rgba(28,19,40,.72);
  /* ink */
  --ss-ink:#fff8e8; --ss-muted:#b8adc5; --ss-faint:#9388a0;
  --ss-line:rgba(155,120,210,.22); --ss-line-soft:rgba(155,120,210,.12);
  /* the two brand colours: gold acts, violet glows */
  --ss-gold:#efbd4a; --ss-gold-bright:#ffd978; --ss-gold-soft:rgba(239,189,74,.14); --ss-on-gold:#1a1206;
  --ss-violet:#9b5cff; --ss-violet-deep:#7440cf; --ss-violet-soft:rgba(155,92,255,.16);
  /* verdicts */
  --ss-good:#60d394; --ss-warn:#f5b041; --ss-bad:#f06a6a;
  /* type */
  --ss-serif:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --ss-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ss-mono:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
  /* shape and space */
  --ss-r-sm:10px; --ss-r:14px; --ss-r-lg:18px; --ss-pill:999px;
  --ss-1:4px; --ss-2:8px; --ss-3:12px; --ss-4:16px; --ss-5:24px; --ss-6:32px; --ss-7:48px;
  --ss-shadow:0 30px 70px -44px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.04);
  --ss-glow:radial-gradient(900px 520px at 72% -8%,rgba(155,92,255,.22),transparent 62%),radial-gradient(700px 420px at 8% 102%,rgba(239,189,74,.08),transparent 60%);
}
:root[data-theme="light"]{
  --ss-void:#f4eee3; --ss-bg:#faf6ee; --ss-panel:#ffffff; --ss-panel-2:#f3ecdf; --ss-glass:rgba(255,255,255,.86);
  --ss-ink:#1d1424; --ss-muted:#554a60; --ss-faint:#6f6379;
  --ss-line:rgba(90,60,130,.2); --ss-line-soft:rgba(90,60,130,.1);
  --ss-gold:#8f6212; --ss-gold-bright:#a8741a; --ss-gold-soft:rgba(168,116,26,.12); --ss-on-gold:#fffaf0;
  --ss-violet:#6b34d6; --ss-violet-deep:#5a2ab8; --ss-violet-soft:rgba(107,52,214,.1);
  --ss-good:#1b7f45; --ss-warn:#9a5b00; --ss-bad:#b3261e;
  --ss-shadow:0 20px 50px -34px rgba(40,20,60,.35);
  --ss-glow:radial-gradient(900px 520px at 72% -8%,rgba(107,52,214,.08),transparent 62%);
}

/* the page */
body.ss-line{background:var(--ss-void);background-image:var(--ss-glow);background-attachment:fixed;color:var(--ss-ink);font-family:var(--ss-sans)}
.ss-line ::selection{background:rgba(155,92,255,.45)}
.ss-line :focus-visible{outline:2px solid var(--ss-gold-bright);outline-offset:2px}

/* the bar: the same brand lockup and product-line links on every tool */
.ss-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--ss-5);min-height:64px;padding:10px clamp(16px,3vw,32px);background:color-mix(in srgb,var(--ss-bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--ss-line-soft)}
.ss-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
.ss-brand img{width:36px;height:36px;filter:drop-shadow(0 4px 14px rgba(155,92,255,.4))}
.ss-brand span{display:grid;line-height:1.15}
.ss-brand b{font-family:var(--ss-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ss-gold);font-weight:600}
.ss-brand i{font-family:var(--ss-serif);font-style:normal;font-weight:700;font-size:1.06rem;color:var(--ss-ink)}
.ss-nav{display:flex;align-items:center;gap:var(--ss-5);flex:1;min-width:0}
.ss-nav a{color:var(--ss-muted);text-decoration:none;font-size:.88rem;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
.ss-nav a:hover{color:var(--ss-ink)}
.ss-nav a[aria-current="page"]{color:var(--ss-ink);border-bottom-color:var(--ss-gold)}
.ss-bar .ss-end{display:flex;align-items:center;gap:var(--ss-2);flex:none}

/* type */
.ss-kicker{font-family:var(--ss-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ss-violet)}
.ss-h1{font-family:var(--ss-serif);font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-.02em;margin:0}
.ss-h1 em{font-style:normal;background:linear-gradient(135deg,var(--ss-gold-bright),var(--ss-gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-lede{color:var(--ss-muted);font-size:1.05rem;line-height:1.55;max-width:66ch}
.ss-fine{color:var(--ss-faint);font-size:.8rem;line-height:1.5}

/* surfaces */
.ss-card{background:var(--ss-glass);border:1px solid var(--ss-line);border-radius:var(--ss-r-lg);padding:var(--ss-5);box-shadow:var(--ss-shadow);backdrop-filter:blur(14px)}
.ss-card h3{font-family:var(--ss-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ss-gold);font-weight:600;margin:0 0 var(--ss-3)}

/* controls: gold acts; outline is the quieter second choice */
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--ss-pill);border:0;cursor:pointer;font:600 .9rem var(--ss-sans);text-decoration:none;color:var(--ss-on-gold);background:linear-gradient(135deg,var(--ss-gold-bright),var(--ss-gold));box-shadow:0 8px 22px -10px rgba(239,189,74,.7);transition:transform .15s,filter .15s}
.ss-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.ss-btn.ghost{background:transparent;color:var(--ss-ink);border:1px solid var(--ss-line);box-shadow:none;font-weight:500}
.ss-btn.ghost:hover{border-color:var(--ss-gold);color:var(--ss-gold-bright)}
/* the outline gold pill: Classroom in the bar, so the tool's own action stays the one filled gold button on the screen */
.ss-btn.line{background:transparent;color:var(--ss-gold);border:1px solid var(--ss-gold);box-shadow:none;font-weight:600}
.ss-btn.line:hover{background:var(--ss-gold-soft);color:var(--ss-gold-bright)}
.ss-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--ss-pill);border:1px solid var(--ss-line);font-size:.8rem;color:var(--ss-muted);background:transparent}
.ss-input{width:100%;padding:10px 14px;border-radius:var(--ss-r);border:1px solid var(--ss-line);background:color-mix(in srgb,var(--ss-void) 60%,transparent);color:var(--ss-ink);font:inherit}

/* the foot: the whole line, on every page */
.ss-foot{margin-top:var(--ss-7);padding:var(--ss-6) clamp(16px,3vw,32px) var(--ss-7);border-top:1px solid var(--ss-line-soft);display:flex;flex-wrap:wrap;gap:var(--ss-3) var(--ss-5);align-items:center;color:var(--ss-faint);font-size:.84rem}
.ss-foot a{color:var(--ss-muted);text-decoration:none}
.ss-foot a:hover{color:var(--ss-gold-bright)}
.ss-foot .ss-fine{flex-basis:100%}

/* guards: tools style bare nav, header and footer elements (sticky, fixed heights, grids, margins); the line's pieces win */
.ss-line .ss-bar{margin:0;height:auto;flex-wrap:nowrap;align-items:center}
.ss-line .ss-nav{position:static;height:auto;margin:0;padding:0;border:0;background:none;display:flex;grid-template-columns:none}
.ss-line .ss-foot{height:auto;justify-content:flex-start}

@media(max-width:760px){
  .ss-line .ss-bar{flex-wrap:wrap}
  .ss-bar{flex-wrap:wrap;gap:var(--ss-2) var(--ss-4);padding:10px 16px}
  .ss-nav{order:3;flex-basis:100%;overflow-x:auto;gap:var(--ss-4);scrollbar-width:none;padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .ss-brand i{font-size:.98rem}
}
@media (prefers-reduced-motion:reduce){.ss-btn,.ss-nav a{transition:none}}


/* ===== Palette A layer (Boosie 2026-10-18). Loaded after v1 so its tokens and rules win; v1 above keeps the structure (Rozay merge). ===== */
/* Stop Slop Studio — product-line chrome v2 (Boosie, 2026-10-18)
   PALETTE A: Luminous Lavender (#B794F4) + Electric Teal (#2DD4BF) + Brushed Silver (#E2E8F0) on Obsidian (#0B0D14).
   Very limited trophy micro-accent (--ss-trophy: #F59E0B) reserved strictly for #1 / star / founding badges. */

:root,
:root[data-theme="dark"],
:root[data-sh-theme="studio-v1"]{
  --ss-void: #07090e;
  --ss-bg: #0b0d14;
  --ss-panel: #121624;
  --ss-panel-2: #181e30;
  --ss-glass: rgba(18, 22, 36, .78);
  --ss-ink: #f8fafc;
  --ss-muted: #cbd5e1;
  --ss-faint: #94a3b8;
  --ss-silver: #e2e8f0;
  --ss-line: rgba(183, 148, 244, .22);
  --ss-line-soft: rgba(45, 212, 191, .14);

  /* Co-Primary 1: Luminous Lavender (lightened purple) */
  --ss-violet: #b794f4;
  --ss-violet-bright: #d6bcfa;
  --ss-violet-deep: #9f7aea;
  --ss-violet-soft: rgba(183, 148, 244, .16);

  /* Co-Primary 2: Electric Teal (primary action & CTA color) */
  --ss-teal: #2dd4bf;
  --ss-teal-bright: #5eead4;
  --ss-teal-deep: #0d9488;
  --ss-teal-soft: rgba(45, 212, 191, .14);
  --ss-on-teal: #041f1c;

  /* Legacy --ss-gold aliases map cleanly to Electric Teal so all buttons/CTAs are Teal */
  --ss-gold: var(--ss-teal);
  --ss-gold-bright: var(--ss-teal-bright);
  --ss-gold-soft: var(--ss-teal-soft);
  --ss-on-gold: var(--ss-on-teal);

  /* Very limited Trophy / #1 micro-accent (used strictly on #1 / star / founding badges) */
  --ss-trophy: #f59e0b;
  --ss-trophy-bright: #fde68a;
  --ss-trophy-soft: rgba(245, 158, 11, .18);
  --ss-trophy-grad: linear-gradient(135deg, #fde68a 0%, #f59e0b 52%, #d97706 100%);

  /* Semantic status */
  --ss-good: #34d399;
  --ss-warn: #fbbf24;
  --ss-bad: #fb7185;

  --ss-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --ss-sans: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ss-mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;

  --ss-glow:
    radial-gradient(1100px 560px at 14% -8%, rgba(183, 148, 244, .22), transparent 60%),
    radial-gradient(880px 460px at 96% 4%, rgba(45, 212, 191, .13), transparent 55%),
    radial-gradient(760px 640px at 78% 108%, rgba(159, 122, 234, .14), transparent 60%);
}

:root[data-theme="light"]{
  --ss-void: #f8fafc;
  --ss-bg: #f1f5f9;
  --ss-panel: #ffffff;
  --ss-panel-2: #e2e8f0;
  --ss-glass: rgba(248, 250, 252, .88);
  --ss-ink: #0f172a;
  --ss-muted: #475569;
  --ss-faint: #64748b;
  --ss-line: rgba(159, 122, 234, .24);
  --ss-line-soft: rgba(15, 23, 42, .08);
  --ss-violet: #7c3aed;
  --ss-violet-deep: #6d28d9;
  --ss-violet-soft: rgba(124, 58, 237, .12);
  --ss-teal: #0d9488;
  --ss-teal-bright: #14b8a6;
  --ss-teal-soft: rgba(13, 148, 136, .12);
  --ss-on-teal: #ffffff;
  --ss-gold: var(--ss-teal);
  --ss-gold-bright: var(--ss-teal-bright);
  --ss-gold-soft: var(--ss-teal-soft);
  --ss-on-gold: var(--ss-on-teal);
  --ss-good: #059669;
  --ss-warn: #d97706;
  --ss-bad: #e11d48;
  --ss-glow:
    radial-gradient(1000px 500px at 14% -8%, rgba(183, 148, 244, .16), transparent 60%),
    radial-gradient(800px 420px at 96% 4%, rgba(45, 212, 191, .12), transparent 55%);
}

/* Shared top bar */
.ss-bar{
  position: sticky; top: 0; z-index: 50;
  min-height: 68px;
  padding: 10px clamp(18px, 4.5vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--ss-glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ss-line);
  font-family: var(--ss-sans);
}
.ss-brand{
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ss-ink);
}
.ss-brand img{
  width: 38px; height: 38px; object-fit: cover;
  border-radius: 9px;
  border: 1px solid rgba(183, 148, 244, .55);
  box-shadow: 0 0 18px rgba(45, 212, 191, .18);
}
.ss-brand span{ line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.ss-brand b{ display: block; font-size: .82rem; font-weight: 700; color: var(--ss-ink); }
.ss-brand i{ display: block; margin-top: 5px; font-style: normal; font-size: .62rem; letter-spacing: .24em; color: var(--ss-teal); }

.ss-nav{
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap;
  font-size: .73rem; letter-spacing: .13em; text-transform: uppercase;
}
.ss-nav a{
  color: var(--ss-muted); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ss-nav a:hover{ color: var(--ss-ink); }
.ss-nav a[aria-current="page"]{ color: var(--ss-ink); border-bottom-color: var(--ss-teal); }

.ss-end{ display: inline-flex; align-items: center; gap: 10px; }
.ss-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  font: 600 .73rem/1 var(--ss-sans); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--ss-teal);
  background: linear-gradient(135deg, var(--ss-teal-bright), var(--ss-teal));
  color: var(--ss-on-teal);
  box-shadow: 0 10px 28px -10px rgba(45, 212, 191, .55);
  transition: filter .15s, transform .12s, background .15s, color .15s;
}
.ss-btn:hover{ filter: brightness(1.07); }
.ss-btn:active{ transform: translateY(1px); }
.ss-btn.ghost{
  background: transparent; color: var(--ss-ink);
  border-color: var(--ss-line);
  box-shadow: none;
  font-weight: 500;
}
.ss-btn.ghost:hover{ border-color: var(--ss-violet); color: var(--ss-violet-bright); }
.ss-btn.line{
  background: transparent; color: var(--ss-teal-bright);
  border-color: var(--ss-teal);
  box-shadow: none;
}
.ss-btn.line:hover{ background: var(--ss-teal); color: var(--ss-on-teal); }

/* Eyebrow kicker: Lavender introduces, Electric Teal acts */
.ss-kicker{
  font-family: var(--ss-mono); font-size: .7rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ss-violet);
}

/* Shared footer */
.ss-foot{
  margin-top: 64px;
  padding: 32px clamp(18px, 4.5vw, 64px) 48px;
  border-top: 1px solid var(--ss-line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap;
  font-family: var(--ss-sans); font-size: .78rem; color: var(--ss-muted);
}
.ss-foot a{ color: var(--ss-ink); text-decoration: none; }
.ss-foot a:hover{ color: var(--ss-teal-bright); }
.ss-foot .ss-fine{ color: var(--ss-faint); font-size: .73rem; max-width: 72ch; line-height: 1.55; }

/* Card surface helper */
.ss-card{
  background: linear-gradient(180deg, rgba(24, 30, 48, .82), rgba(11, 13, 20, .9));
  border: 1px solid var(--ss-line-soft);
  border-radius: 16px;
}

@media (max-width: 780px){
  .ss-nav{ order: 3; width: 100%; justify-content: flex-start; gap: 14px; padding-top: 4px; border-top: 1px solid var(--ss-line-soft); }
}