/* ==========================================================================
   MENTILUS — design system + theme-override layer
   --------------------------------------------------------------------------
   Loaded LAST in the document head (after bootstrap + the structural CSS
   bundle), so its rules win. Two jobs:
     1. THEME OVERRIDE — restyle the site-wide visual language (colour, type,
        buttons, inputs, cards, links, alerts) so every page — even ones not
        yet bespoke-reskinned — adopts the Mentilus look.
     2. COMPONENT LIBRARY — `mn-*` classes that mirror the design system
        (mentilus-design-system.html) for pages we hand-reskin.

   Visual language: chunky, playful. Bright fills, ink outlines, solid offset
   shadows, cream page. Tilt/wiggle are decorative accents only — anything
   holding content or data stays straight and aligned.
   Fonts (Fredoka display, Nunito body) are loaded by the layout.
   ========================================================================== */

:root{
  /* brand */
  --mn-ink:#2E2640;
  --mn-cream:#FFF6E4;
  --mn-surface:#FFFFFF;
  --mn-grape:#7C5CFF;     --mn-grape-d:#6A4DEB;
  --mn-sunny:#FFC83D;
  --mn-bubble:#FF6B9D;
  --mn-mint:#3FD6B0;
  --mn-sky:#56B4F0;
  --mn-orange:#FF8A3D;
  --mn-lime:#9DDB52;
  --mn-error:#FF5470;
  /* neutrals */
  --mn-muted:#8A82A0;
  --mn-faint:#EFEAF7;
  --mn-faint-2:#F6F2FC;
  /* type */
  --mn-display:"Fredoka","Ubuntu",sans-serif;
  --mn-body:"Nunito","Ubuntu",sans-serif;
  /* radius */
  --mn-r-sm:12px; --mn-r-md:18px; --mn-r-lg:26px; --mn-r-pill:50px;
  /* outline + shadow */
  --mn-bd:3px;
  --mn-sh-sm:4px 4px 0 var(--mn-ink);
  --mn-sh:6px 6px 0 var(--mn-ink);
  --mn-sh-lg:8px 8px 0 var(--mn-ink);
}

/* ==========================================================================
   1. BASE / ELEMENT OVERRIDES
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; }
/* Mobile guard: prevent a stray few-px horizontal bleed from any section from
   stretching fixed bars to the scroll width (mobile Chrome quirk).
   Use `clip` (not `hidden`) so it doesn't create a scroll container — `hidden`
   would break `position:sticky` on every descendant. */
html,body{ overflow-x:clip; max-width:100%; }

body{
  font-family:var(--mn-body);
  color:var(--mn-ink);
  background-color:var(--mn-cream);
  /* playful sunny dot field on cream — replaces the old grey diagonal tiles */
  background-image:radial-gradient(var(--mn-sunny) 1.3px, transparent 1.4px);
  background-size:30px 30px;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--mn-display);
  color:var(--mn-ink);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
}
h1,.h1{ letter-spacing:-.02em; }

a{ color:var(--mn-grape-d); }
a:hover,a:focus{ color:var(--mn-grape); }

hr{ border-color:#E7DFF2; }

::selection{ background:var(--mn-grape); color:#fff; }

/* keep tilt off content; reduced-motion friendly */
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } html{ scroll-behavior:auto; } }

/* ==========================================================================
   2. BOOTSTRAP BRAND OVERRIDES
   The old theme was indigo (#4F46E5) with flat orange (#F4940B) buttons.
   Re-point those surfaces at the Mentilus palette + chunky pill language.
   ========================================================================== */

/* ---- buttons ---------------------------------------------------------- */
.btn{
  font-family:var(--mn-display);
  font-weight:600;
  border:var(--mn-bd) solid var(--mn-ink);
  border-radius:var(--mn-r-pill);
  box-shadow:var(--mn-sh-sm);
  transition:transform .1s, box-shadow .1s, background-color .12s;
}
.btn:hover,.btn:focus{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--mn-ink); outline:none; }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--mn-ink); }

.btn-primary,
.btn-primary:active,
.btn-primary:focus{
  background:var(--mn-grape);
  color:#fff;
  border:var(--mn-bd) solid var(--mn-ink);
  border-radius:var(--mn-r-pill);
  box-shadow:var(--mn-sh-sm);
  font-size:1.15em;
  padding:11px 26px;
  text-shadow:none;
}
.btn-primary:hover{ background:var(--mn-grape-d); color:#fff; border:var(--mn-bd) solid var(--mn-ink); }

.btn-primary-small{
  background:var(--mn-grape); color:#fff;
  border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-pill);
  box-shadow:var(--mn-sh-sm); padding:7px 20px;
}

.btn-default{
  background:var(--mn-surface); color:var(--mn-ink);
  border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-pill);
  box-shadow:var(--mn-sh-sm);
}
.btn-default:hover,.btn-default:focus{ background:var(--mn-faint); color:var(--mn-ink); }

.btn-success{ background:var(--mn-mint) !important; color:#fff !important; border:var(--mn-bd) solid var(--mn-ink) !important; }
.btn-warning{ background:var(--mn-sunny) !important; color:var(--mn-ink) !important; border:var(--mn-bd) solid var(--mn-ink) !important; }
.btn-danger{ background:var(--mn-error) !important; color:#fff !important; border:var(--mn-bd) solid var(--mn-ink) !important; }
.btn-info{ background:var(--mn-sky) !important; color:#fff !important; border:var(--mn-bd) solid var(--mn-ink) !important; }

.btn-ghost{
  background:var(--mn-surface); color:var(--mn-ink);
  border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-pill); box-shadow:none;
}
.btn-ghost:hover,.btn-ghost:active,.btn-ghost:focus{ background:var(--mn-faint); color:var(--mn-ink); }

/* ---- links/text brand colours ---------------------------------------- */
.primary-color,
.text-primary{ color:var(--mn-grape) !important; }
.primary-color-bg{ background:var(--mn-grape) !important; }
.primary-color-bg h2{ color:#fff; }
#popup h2{ color:var(--mn-grape); }
.flash-message{ color:var(--mn-grape); }

/* ---- forms ------------------------------------------------------------ */
.form-control{
  font-family:var(--mn-body);
  font-weight:700;
  color:var(--mn-ink);
  background:var(--mn-surface);
  border:var(--mn-bd) solid var(--mn-ink);
  border-radius:var(--mn-r-md);
  box-shadow:var(--mn-sh-sm);
  height:auto;
  padding:11px 15px;
}
.form-control:focus{
  border-color:var(--mn-ink);
  box-shadow:var(--mn-sh-sm), 0 0 0 4px rgba(124,92,255,.25);
}
.form-control::-moz-placeholder{ color:#bdb6cc; }
.form-control:-ms-input-placeholder{ color:#bdb6cc; }
.form-control::-webkit-input-placeholder{ color:#bdb6cc; }
label,.control-label,.form-label{ font-family:var(--mn-display); font-weight:600; color:var(--mn-ink); }

/* ---- alerts ----------------------------------------------------------- */
.alert{
  border:var(--mn-bd) solid var(--mn-ink);
  border-radius:var(--mn-r-md);
  box-shadow:var(--mn-sh-sm);
  font-weight:700;
}
.alert-success{ background:#E6FAF2; color:var(--mn-ink); }
.alert-info{ background:#E7F3FE; color:var(--mn-ink); }
.alert-warning{ background:#FFF6DF; color:var(--mn-ink); }
.alert-danger{ background:#FFE9EE; color:var(--mn-ink); }

/* ---- labels / badges (bootstrap) ------------------------------------- */
.label,.badge{
  font-family:var(--mn-display); font-weight:600;
  border:2.5px solid var(--mn-ink); border-radius:var(--mn-r-pill);
}
.label-primary,.badge{ background:var(--mn-grape); color:#fff; }
.label-success{ background:var(--mn-mint); color:#fff; }
.label-warning{ background:var(--mn-sunny); color:var(--mn-ink); }
.label-danger{ background:var(--mn-error); color:#fff; }

/* ---- panels / wells / generic card surfaces -------------------------- */
.panel,.well,.thumbnail{
  background:var(--mn-surface);
  border:var(--mn-bd) solid var(--mn-ink);
  border-radius:var(--mn-r-lg);
  box-shadow:var(--mn-sh);
}
.panel-heading{ font-family:var(--mn-display); border-bottom:var(--mn-bd) solid var(--mn-ink); }
.breynocontent>.container{
  background:var(--mn-surface);
  border:var(--mn-bd) solid var(--mn-ink);
  border-radius:var(--mn-r-lg);
  box-shadow:var(--mn-sh);
}

/* ---- progress bars ---------------------------------------------------- */
.progress{
  height:20px; border:var(--mn-bd) solid var(--mn-ink); border-radius:20px;
  background:var(--mn-faint); box-shadow:var(--mn-sh-sm); overflow:hidden;
}
.progress-bar{ background:var(--mn-grape); }

/* ---- tables ----------------------------------------------------------- */
.table>thead>tr>th{ font-family:var(--mn-display); border-bottom:var(--mn-bd) solid var(--mn-ink); color:var(--mn-ink); }

/* ==========================================================================
   3. MENTILUS COMPONENT LIBRARY  (mn-* — used in bespoke-reskinned views)
   ========================================================================== */

/* layout helpers */
.mn-wrap{ max-width:1080px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.mn-grid{ display:grid; gap:18px; }
.mn-g2{ grid-template-columns:repeat(2,1fr); }
.mn-g3{ grid-template-columns:repeat(3,1fr); }
.mn-g4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:880px){ .mn-g2,.mn-g3,.mn-g4{ grid-template-columns:1fr; } }
.mn-stack{ display:flex; flex-direction:column; gap:16px; }
.mn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.mn-center{ text-align:center; }
.mn-muted{ color:var(--mn-muted); }
.mn-display{ font-family:var(--mn-display); }

/* headings */
.mn-h1{ font-family:var(--mn-display); font-weight:700; font-size:clamp(34px,5vw,54px); letter-spacing:-.02em; line-height:1; }
.mn-h2{ font-family:var(--mn-display); font-weight:700; font-size:27px; letter-spacing:-.01em; }
.mn-h3{ font-family:var(--mn-display); font-weight:600; font-size:20px; }
.mn-lbl{ font-family:var(--mn-body); font-weight:800; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--mn-muted); margin-bottom:10px; }
.mn-lead{ font-weight:700; font-size:17px; color:var(--mn-muted); }

/* cards / tiles */
.mn-card{ background:var(--mn-surface); border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-lg); box-shadow:var(--mn-sh); padding:24px; }
.mn-card.mn-flat{ box-shadow:var(--mn-sh-sm); }
.mn-tile{ background:var(--mn-surface); border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-lg); padding:22px 18px; box-shadow:var(--mn-sh); text-align:center; display:block; text-decoration:none; color:inherit; transition:transform .1s, box-shadow .1s; }
a.mn-tile:hover{ transform:translate(2px,2px); box-shadow:var(--mn-sh-sm); text-decoration:none; color:inherit; }
.mn-tile .mn-ic{ width:70px; height:70px; margin:0 auto 12px; border-radius:50%; border:var(--mn-bd) solid var(--mn-ink); display:flex; align-items:center; justify-content:center; box-shadow:var(--mn-sh-sm); }
.mn-tile h4{ font-family:var(--mn-display); font-weight:600; font-size:18px; margin:0; }
.mn-tile p{ font-weight:700; font-size:12px; color:var(--mn-muted); margin-top:2px; }
.mn-ic-mem{ background:var(--mn-sky); } .mn-ic-foc{ background:var(--mn-bubble); }
.mn-ic-log{ background:var(--mn-mint); } .mn-ic-spd{ background:var(--mn-sunny); }
.mn-ic-grape{ background:var(--mn-grape); } .mn-ic-lime{ background:var(--mn-lime); } .mn-ic-orange{ background:var(--mn-orange); }

/* buttons (explicit, for non-bootstrap markup) */
.mn-btn{ font-family:var(--mn-display); font-weight:600; font-size:16px; border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-pill); padding:12px 24px; box-shadow:var(--mn-sh-sm); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .1s, box-shadow .1s; background:var(--mn-surface); color:var(--mn-ink); text-decoration:none; }
.mn-btn:hover,.mn-btn:focus{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--mn-ink); text-decoration:none; color:var(--mn-ink); }
.mn-btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--mn-ink); }
.mn-btn.mn-primary{ background:var(--mn-grape); color:#fff; } .mn-btn.mn-primary:hover{ color:#fff; }
.mn-btn.mn-sunny{ background:var(--mn-sunny); } .mn-btn.mn-bubble{ background:var(--mn-bubble); color:#fff; }
.mn-btn.mn-mint{ background:var(--mn-mint); color:#fff; }
.mn-btn.mn-lg{ font-size:19px; padding:16px 32px; box-shadow:var(--mn-sh); }
.mn-btn.mn-lg:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--mn-ink); }
.mn-btn.mn-sm{ font-size:14px; padding:8px 16px; }
.mn-btn.mn-block{ display:flex; width:100%; justify-content:center; }

/* chips / tags */
.mn-tag{ font-family:var(--mn-display); font-weight:600; font-size:13px; border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-pill); padding:6px 14px; background:var(--mn-surface); box-shadow:var(--mn-sh-sm); display:inline-flex; align-items:center; gap:6px; }
.mn-tag.mn-grape{ background:var(--mn-grape); color:#fff; } .mn-tag.mn-sunny{ background:var(--mn-sunny); }
.mn-tag.mn-bubble{ background:var(--mn-bubble); color:#fff; } .mn-tag.mn-mint{ background:var(--mn-mint); color:#fff; }
.mn-tag.mn-sky{ background:var(--mn-sky); color:#fff; } .mn-tag.mn-lime{ background:var(--mn-lime); } .mn-tag.mn-orange{ background:var(--mn-orange); color:#fff; }

/* achievement badge (scalloped sticker) */
.mn-badge{ text-align:center; width:108px; display:inline-block; transition:transform .14s; }
.mn-badge:hover{ transform:translateY(-5px) rotate(-3deg); }
.mn-badge .mn-disc{ position:relative; width:88px; height:88px; margin:0 auto 8px; filter:drop-shadow(4px 5px 0 var(--mn-ink)); }
.mn-badge .mn-disc svg{ width:100%; height:100%; }
.mn-badge .mn-disc .mn-bic{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mn-badge .mn-nm{ font-family:var(--mn-display); font-weight:600; font-size:13px; line-height:1.1; }
.mn-badge .mn-meta{ font-weight:800; font-size:10px; color:var(--mn-muted); margin-top:1px; }
.mn-badge.mn-locked{ opacity:.65; }

/* alerts (explicit) */
.mn-alert{ display:flex; gap:12px; align-items:flex-start; border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-md); padding:14px 16px; box-shadow:var(--mn-sh-sm); font-weight:700; background:var(--mn-surface); }
.mn-alert .mn-ai{ width:30px; height:30px; border-radius:50%; border:2.5px solid var(--mn-ink); display:flex; align-items:center; justify-content:center; flex:none; }
.mn-alert.mn-success{ background:#E6FAF2; } .mn-alert.mn-success .mn-ai{ background:var(--mn-mint); color:#fff; }
.mn-alert.mn-warn{ background:#FFF6DF; } .mn-alert.mn-warn .mn-ai{ background:var(--mn-sunny); }
.mn-alert.mn-error{ background:#FFE9EE; } .mn-alert.mn-error .mn-ai{ background:var(--mn-error); color:#fff; }
.mn-alert.mn-info{ background:#E7F3FE; } .mn-alert.mn-info .mn-ai{ background:var(--mn-sky); color:#fff; }
.mn-alert b{ font-family:var(--mn-display); font-weight:600; font-size:15px; display:block; }
.mn-alert span{ font-size:13px; color:var(--mn-muted); font-weight:700; }

/* progress (explicit) */
.mn-pbar{ height:20px; border:var(--mn-bd) solid var(--mn-ink); border-radius:20px; background:var(--mn-faint); overflow:hidden; box-shadow:var(--mn-sh-sm); }
.mn-pbar > i{ display:block; height:100%; border-radius:20px; background:var(--mn-grape); }
.mn-pbar.mn-seg > i{ background:repeating-linear-gradient(45deg,var(--mn-mint),var(--mn-mint) 10px,#5fe0c0 10px,#5fe0c0 20px); }

/* stat card */
.mn-stat{ position:relative; }
.mn-stat .mn-big{ font-family:var(--mn-display); font-weight:700; font-size:40px; line-height:1; letter-spacing:-.02em; }
.mn-stat .mn-statlab{ font-weight:800; font-size:12px; color:var(--mn-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }
.mn-delta{ position:absolute; top:0; right:0; font-family:var(--mn-display); font-weight:600; font-size:13px; color:#fff; background:var(--mn-mint); border:2.5px solid var(--mn-ink); border-radius:20px; padding:2px 10px; box-shadow:var(--mn-sh-sm); }
.mn-delta.mn-down{ background:var(--mn-error); }

/* skill bars */
.mn-skill{ margin-bottom:14px; }
.mn-skill .mn-sr{ display:flex; justify-content:space-between; font-weight:700; font-size:13px; margin-bottom:5px; }
.mn-skill .mn-track{ height:16px; border:var(--mn-bd) solid var(--mn-ink); border-radius:20px; background:var(--mn-faint); overflow:hidden; box-shadow:var(--mn-sh-sm); }
.mn-skill .mn-track > i{ display:block; height:100%; }

/* leaderboard rows */
.mn-lb{ list-style:none; padding:0; margin:0; }
.mn-lb li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:2px dashed var(--mn-faint); }
.mn-lb li:last-child{ border-bottom:none; }
.mn-lb .mn-rank{ width:30px; height:30px; border-radius:50%; border:var(--mn-bd) solid var(--mn-ink); display:flex; align-items:center; justify-content:center; font-family:var(--mn-display); font-weight:700; font-size:14px; flex:none; background:var(--mn-surface); }
.mn-lb .mn-rank.mn-r1{ background:var(--mn-sunny); } .mn-lb .mn-rank.mn-r2{ background:#D8D2E4; } .mn-lb .mn-rank.mn-r3{ background:var(--mn-orange); }
.mn-lb .mn-av{ width:34px; height:34px; border-radius:50%; border:var(--mn-bd) solid var(--mn-ink); flex:none; }
.mn-lb .mn-lname{ font-family:var(--mn-display); font-weight:600; font-size:15px; }
.mn-lb .mn-sc{ margin-left:auto; font-family:var(--mn-display); font-weight:700; font-size:15px; color:var(--mn-grape); }

/* segmented control */
.mn-segmented{ display:inline-flex; border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-pill); overflow:hidden; box-shadow:var(--mn-sh-sm); font-family:var(--mn-display); font-weight:600; font-size:14px; }
.mn-segmented a,.mn-segmented button{ border:none; background:var(--mn-surface); padding:9px 18px; cursor:pointer; font:inherit; color:var(--mn-ink); text-decoration:none; }
.mn-segmented a.mn-on,.mn-segmented button.mn-on{ background:var(--mn-grape); color:#fff; }
.mn-segmented a+a,.mn-segmented button+button{ border-left:var(--mn-bd) solid var(--mn-ink); }

/* note / callout */
.mn-note{ font-weight:700; font-size:13px; color:var(--mn-muted); background:var(--mn-faint-2); border:2.5px dashed #d6cdeb; border-radius:14px; padding:10px 14px; }

/* hero band */
.mn-hero{ background:var(--mn-surface); border:var(--mn-bd) solid var(--mn-ink); border-radius:var(--mn-r-lg); box-shadow:var(--mn-sh-lg); padding:clamp(28px,5vw,56px); }

/* inline icon helper (Lucide-style line icons via currentColor) */
.mn-isvg{ width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-.16em; }
.mn-isvg.mn-fill{ fill:currentColor; stroke:none; }

/* decorative tilt — accents ONLY (badges/stickers), never content/data */
.mn-tilt-l{ transform:rotate(-3deg); }
.mn-tilt-r{ transform:rotate(3deg); }

/* ==========================================================================
   4. LEGACY CTA / WIDGET CLASS OVERRIDES
   Custom button classes used across older views (home.css etc.) that bypass
   .btn-primary — re-point them at the chunky grape pill so every CTA is on-brand.
   ========================================================================== */
.btn-orange,
.btn-orange:link,
.btn-orange:visited{
  background:var(--mn-grape) !important; color:#fff !important;
  border:var(--mn-bd) solid var(--mn-ink) !important; border-radius:var(--mn-r-pill) !important;
  box-shadow:var(--mn-sh-sm) !important; font-family:var(--mn-display); font-weight:600;
  text-shadow:none !important; transition:transform .1s, box-shadow .1s, background-color .12s;
}
.btn-orange:hover,.btn-orange:active,.btn-orange:focus{
  background:var(--mn-grape-d) !important; color:#fff !important;
  transform:translate(2px,2px); box-shadow:2px 2px 0 var(--mn-ink) !important; text-decoration:none;
}
.btn-lg{ border-radius:var(--mn-r-pill) !important; font-family:var(--mn-display); }

/* old indigo/orange brand bg blocks → grape */
.bg-primary,.bg-purple{ background:var(--mn-grape) !important; color:#fff; }
.text-orange,.orange{ color:var(--mn-orange) !important; }

/* generic "card"/"box" surfaces some views use */
.card,.box,.well-white,.content-box{
  background:var(--mn-surface); border:var(--mn-bd) solid var(--mn-ink);
  border-radius:var(--mn-r-lg); box-shadow:var(--mn-sh);
}