/* ============================================================
   mifu-pastel.css — Mifuyu OS "Soft Pastel" skin (v1, 2026-09-02)
   Loaded LAST in index.html (after style.css + mifu-gold.css).
   Sister of the Eggie OS Soft Pastel skin (2026-09-01): airier +
   rounder surfaces, periwinkle/sakura-tinted layered depth, a clean
   Outfit hierarchy for section titles + numbers (Fredoka stays on the
   brand/hero so the snowfox personality survives), colour-coded
   weekly-focus tiles, frosted header, refined sidebar active state.
   CSS ONLY — zero JS / markup touched (visual-redesign Sacred rule).
   Both themes handled (light default + :root[data-theme="dark"]);
   body.calm, prefers-contrast:more and prefers-reduced-motion strip
   the decoration like the rest of the app. Hover lift is gated to
   hover-capable pointers so iPad taps never get a stuck lift.
   Remove the one <link> in index.html to revert everything.
   ============================================================ */

/* ── 1. tokens — aesthetic-only softening (radii + shadow tints; colours untouched) ── */
:root{
  --sp-r-panel:22px; --sp-r-card:18px; --sp-r-ctl:13px;
  --sp-shadow-sm:0 3px 12px rgba(117,138,198,.10);
  --sp-shadow:0 10px 30px rgba(117,138,198,.14), 0 2px 8px rgba(236,116,191,.06);
  --sp-lift:0 16px 40px rgba(117,138,198,.18), 0 4px 12px rgba(236,116,191,.10);
  --sp-border:rgba(222,226,245,.85);
  --sp-border-hover:rgba(236,116,191,.32);
  --sp-mint-deep:#3a9d83;
  --shadow:var(--sp-shadow); --shadow-sm:var(--sp-shadow-sm); --r:var(--sp-r-panel);
}
:root[data-theme="dark"]{
  --sp-shadow-sm:0 3px 14px rgba(0,0,0,.42);
  --sp-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 22px rgba(255,126,182,.05);
  --sp-lift:0 18px 44px rgba(0,0,0,.6), 0 0 26px rgba(255,147,198,.08);
  --sp-border:rgba(255,147,198,.14);
  --sp-border-hover:rgba(255,147,198,.38);
  --sp-mint-deep:#7ee2d8;
}

/* ── 2. atmosphere — airy pastel ground wash (adds a mint/ice corner to the winter glows) ── */
html:not([data-theme="dark"]) body:not(.calm){
  background-image:
    radial-gradient(80% 50% at 100% 0%, #f7e0f3 0%, transparent 60%),
    radial-gradient(70% 50% at 0% 0%, #e2e9fb 0%, transparent 55%),
    radial-gradient(46% 42% at 0% 100%, rgba(226,246,240,.9) 0%, transparent 58%),
    radial-gradient(55% 42% at 88% 100%, rgba(159,195,232,.30) 0%, transparent 62%),
    radial-gradient(140% 90% at 50% 42%, transparent 64%, rgba(120,130,200,.05) 100%);
}
:root[data-theme="dark"] body:not(.calm){
  background-image:
    radial-gradient(80% 50% at 100% 0%, rgba(255,147,198,.10) 0%, transparent 60%),
    radial-gradient(70% 50% at 0% 0%, rgba(139,147,224,.12) 0%, transparent 55%),
    radial-gradient(46% 42% at 0% 100%, rgba(126,226,216,.05) 0%, transparent 58%),
    radial-gradient(140% 90% at 50% 42%, transparent 60%, rgba(0,0,0,.28) 100%);
}

/* ── 3. typography — Outfit for section titles + numbers; Fredoka stays on brand/hero/header name ── */
html body h2, html body h3, html body h4{
  font-family:"Outfit",var(--display); font-weight:600; letter-spacing:-.018em; text-wrap:balance;
}
html body .hero-title h1, html body .gh-title-name, html body .brand{ font-family:var(--display); }
html body .card-head>.label{
  font-family:"Outfit",var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.07em;
}
html body .stat-value, html body .bignum, html body .hcount>span{
  font-family:"Outfit",var(--display); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
html body .hero-clock{ letter-spacing:-.01em; }

/* ── 4. surfaces — rounder, softer, gentle depth ── */
html body .panel{
  border-radius:var(--sp-r-panel);
  border:1px solid var(--sp-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--sp-shadow-sm);
  transition:box-shadow var(--dur-3,.34s) var(--ease-spring,cubic-bezier(.2,.8,.3,1)), border-color var(--dur-2,.2s) var(--ease,ease);
}
html[data-theme="dark"] body .panel{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--sp-shadow-sm); }
html body .soft-card{
  border-radius:var(--sp-r-card);
  border:1px solid var(--sp-border);
  padding:15px 17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(117,138,198,.07);
  transition:transform var(--dur-3,.34s) var(--ease-spring,cubic-bezier(.2,.8,.3,1)), box-shadow var(--dur-3,.34s) var(--ease-spring,cubic-bezier(.2,.8,.3,1)), border-color var(--dur-2,.2s) var(--ease,ease);
}
html[data-theme="dark"] body .soft-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.28); }
html body .citem{ border-radius:16px; border:1px solid var(--sp-border); box-shadow:0 4px 16px rgba(117,138,198,.08); }
html body .focus-row{ border-radius:14px; }
html body details.acc{ border-radius:var(--sp-r-card); }
html body .modal{ border-radius:24px; box-shadow:0 24px 60px rgba(90,80,140,.28), 0 4px 14px rgba(117,138,198,.12); }
html[data-theme="dark"] body .modal{ box-shadow:0 24px 60px rgba(0,0,0,.6); }
html body .vault-item, html body .md-tile, html body .jr-glance{ border-radius:14px; }
html body .jr-asset-card{ border-radius:var(--sp-r-card); }

/* hover — panels bloom (no transform: they host draggable widgets + popovers), cards lift a hair */
@media (hover:hover) and (pointer:fine){
  html body:not(.calm) .panel:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--sp-shadow); }
  html[data-theme="dark"] body:not(.calm) .panel:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--sp-shadow); }
  html body:not(.calm) .soft-card:hover{ transform:translateY(-2px); box-shadow:var(--sp-lift); border-color:var(--sp-border-hover); }
}

/* ── 5. controls — rounder + softer premium feel ── */
html body .btn{ border-radius:var(--sp-r-ctl); }
html body .btn-grad{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(117,138,198,.26); }
html body .inp{ border-radius:var(--sp-r-ctl); }
html body .inp:focus{ border-color:var(--peri); box-shadow:0 0 0 4px rgba(117,138,198,.16); }
html[data-theme="dark"] body .inp:focus{ box-shadow:0 0 0 4px rgba(139,147,224,.22); }
html body .sitebtn, html body .step, html body .scale button{ border-radius:11px; }
html body .ci-btn{ border-radius:16px; border-color:var(--sp-border); }
html body .ci-btn.on{ box-shadow:0 6px 18px rgba(255,158,216,.28); }
@media (hover:hover) and (pointer:fine){
  html body:not(.calm) .btn:hover{ transform:translateY(-1px); border-color:var(--peri); }
  html body:not(.calm) .btn-grad:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px rgba(117,138,198,.34); }
  html body:not(.calm) .ci-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(159,195,232,.30); border-color:var(--ice); }
  html[data-theme="dark"] body:not(.calm) .ci-btn:hover{ box-shadow:0 8px 20px rgba(0,0,0,.4); }
}

/* ── 6. chrome — frosted header + refined sidebar ── */
html body #global-header{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--sp-border);
  box-shadow:0 6px 24px rgba(117,138,198,.08);
}
html[data-theme="dark"] body #global-header{ background:rgba(25,16,32,.78); box-shadow:0 6px 24px rgba(0,0,0,.35); }
@media (pointer:coarse){ html body #global-header{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } }
html body #sidebar .tab{ border-radius:13px; }
html body .tab-emoji{ border-radius:10px; }
html body #sidebar .tab.active{ background:rgba(255,255,255,.82); box-shadow:0 4px 14px rgba(236,116,191,.14); }
html[data-theme="dark"] body #sidebar .tab.active{ background:rgba(255,255,255,.07); box-shadow:0 4px 14px rgba(0,0,0,.3); }
html body #sb-mode, html body #themeSeg{ border-radius:999px; }
html body .sb-group-label{ font-family:"Outfit",var(--sans); letter-spacing:.12em; }

/* ── 7. weekly-focus stat tiles — colour-coded pastel corner wash + big Outfit number ──
   Hook: the 4 tiles are .soft-card inside the ONE auto-fit minmax(150px) grid that carries
   margin-top:12px (view-kikocare.js kcCadenceHTML). The other minmax(150px) grids in the app
   use different gap/margin, so this never touches them. Number div carries inline font styles
   → !important is required to win. */
html body div[style*="minmax(150px"][style*="margin-top:12px"]{ gap:14px; }
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card{ position:relative; overflow:hidden; padding:16px 18px; }
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card::after{
  content:""; position:absolute; top:0; right:0; width:66px; height:66px;
  border-radius:0 var(--sp-r-card) 0 66%; opacity:.55; pointer-events:none;
}
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+1)::after{ background:#e4f0fb; }
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+2)::after{ background:#fde6f3; }
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+3)::after{ background:#ece6fb; }
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+4)::after{ background:#e3f6f0; }
html[data-theme="dark"] body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+1)::after{ background:rgba(147,201,242,.14); }
html[data-theme="dark"] body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+2)::after{ background:rgba(255,147,198,.14); }
html[data-theme="dark"] body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+3)::after{ background:rgba(179,154,242,.14); }
html[data-theme="dark"] body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+4)::after{ background:rgba(126,226,216,.12); }
/* the number is the middle child: a div that is neither .label nor .soft */
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card > div:not(.label):not(.soft){
  font-family:"Outfit",var(--display) !important; font-weight:700 !important; font-size:34px !important;
  line-height:1.02; letter-spacing:-.025em; margin-top:8px !important; position:relative; font-variant-numeric:tabular-nums;
}
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+1) > div:not(.label):not(.soft){ color:var(--peri-deep); }
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+2) > div:not(.label):not(.soft){ color:var(--sakura-deep); }
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+3) > div:not(.label):not(.soft){ color:var(--lav-deep); }
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card:nth-child(4n+4) > div:not(.label):not(.soft){ color:var(--sp-mint-deep); }
/* keep the unit ("day streak", "this week") small + neutral */
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card > div:not(.label):not(.soft) > .soft{
  font-family:var(--sans) !important; font-size:12.5px !important; font-weight:600 !important;
  color:var(--ink-soft) !important; letter-spacing:0; margin-left:2px;
}
html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card > .label{ position:relative; }

/* ── 8. quiet modes — calm / high-contrast / print strip the decoration ── */
body.calm .panel, body.calm .soft-card, body.calm .citem, body.calm .modal{ box-shadow:none !important; transform:none !important; }
body.calm #global-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--panel); box-shadow:none; }
body.calm div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card::after{ content:none; }
@media (prefers-contrast:more){
  html body .panel, html body .soft-card, html body .citem{ box-shadow:none !important; border-color:var(--ink-soft); }
  html body div[style*="minmax(150px"][style*="margin-top:12px"] > .soft-card::after{ content:none; }
  html body #global-header{ background:var(--panel); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media print{ html body .panel, html body .soft-card{ box-shadow:none !important; } }