/* ════════════════════════════════════════════════════════════════════════════
   ENHANCEMENTS — the 8 design suggestions from "Suggestion Mockups.html".
   Styling is ported verbatim from the design's mockups/mockup-skin.css so the
   pixel-mosaic aesthetic is matched exactly (2px ink borders, hard offset
   shadows, notched selected tiles, DM Mono). Class names (mk-*, sum-bar,
   mosaic-grid, …) don't collide with the existing app classes.
   ════════════════════════════════════════════════════════════════════════════ */

/* Section accent + mood-scale tokens the mockups rely on (the skin only
   defines --ink/--accent/--muted). Scoped to body so all mk-* inherit. */
body {
  --rating:#d97706; --mental:#6d28d9; --sleep:#1d4ed8; --movement:#047857;
  --health:#0e7490; --habits:#c2410c; --selfcare:#be185d; --nutrition:#a16207;
  --social:#0369a1; --work:#4f46e5; --notes:#334155; --hormonal:#be185d;
  --crisis:#d1495b;
}

/* ── Shared card / note / button primitives (from mockup-skin) ─────────────── */
.mk-card{border:2px solid var(--ink);border-radius:6px;background:#fbfaf5;box-shadow:5px 5px 0 rgba(26,28,36,.12);overflow:hidden;margin-bottom:14px;}
.mk-card-head{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:2px solid var(--ink);background:var(--sc-bg,#f1eee4);}
.mk-card-head .ic{font-size:20px;}
.mk-card-head .tt{flex:1;font-weight:500;text-transform:uppercase;font-size:13px;letter-spacing:.04em;}
.mk-card-body{padding:15px;font-family:var(--mono);}
.mk-eyebrow{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:0 0 10px;font-family:var(--mono);}
.mk-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin:18px 0 9px;font-family:var(--mono);}
.mk-label:first-child{margin-top:0;}
.mk-sm{font-size:11px;}
.mk-mut{color:var(--muted);}
.mk-stack{display:flex;flex-direction:column;gap:11px;}
.mk-divider{height:2px;background:var(--ink);margin:15px 0;opacity:.12;}

.mk-note{border:2px solid var(--ink);border-radius:6px;padding:13px 15px;font-size:12px;line-height:1.55;font-family:var(--mono);}
.mk-note.calm{background:#e9f6ee;}
.mk-note.warn{background:#fff6e6;}
.mk-note.info{background:#eaf1ff;}
.mk-note.soft{background:#f1eee4;font-style:italic;}
.mk-note .nh{font-weight:500;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;font-size:11px;}

.mk-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:2px solid var(--ink);border-radius:6px;background:#fff;padding:13px;font-family:var(--mono);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);cursor:pointer;}
.mk-btn.accent{background:var(--accent);color:#fff;box-shadow:4px 4px 0 rgba(26,28,36,.22);}
.mk-btn.ghost{background:#efedff;}
.mk-btn:active{transform:translate(1px,1px);}
.mk-btn-row{display:flex;gap:9px;}
.mk-exit{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:2px solid var(--ink);border-radius:6px;background:#fff;padding:10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:9px;cursor:pointer;}

.mk-pills{display:flex;flex-wrap:wrap;gap:7px;}
.mk-pill{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);border-radius:4px;background:#fff;padding:8px 11px;font-size:12px;font-family:var(--mono);position:relative;cursor:pointer;}
.mk-pill .gl{font-size:15px;line-height:1;}
.mk-pill.sel{background:var(--sc,var(--accent));color:#fff;box-shadow:3px 3px 0 rgba(26,28,36,.18);}
.mk-pill.sel::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 13px 13px 0;border-color:transparent var(--ink) transparent transparent;}

/* glyph-dot system (suggestion 7) */
.gdot{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid var(--ink);flex-shrink:0;vertical-align:middle;}
.gdot.sq{border-radius:2px;}
.gdot.ring{background:#fff;}

/* ── 1 · YEAR-IN-PIXELS + 6 · FORGIVING STREAK overlay ────────────────────── */
.lp-overlay{position:fixed;inset:0;z-index:9000;background:#f5f4fc;background-image:linear-gradient(rgba(40,36,80,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(40,36,80,.05) 1px,transparent 1px);background-size:24px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;font-family:var(--mono);color:var(--ink);}
.lp-overlay.open{display:block;}
.lp-overlay-inner{max-width:480px;margin:0 auto;padding:18px 16px 40px;}
.lp-ov-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:13px;border-bottom:2px solid var(--ink);margin-bottom:16px;}
.lp-ov-brand{display:flex;align-items:center;gap:9px;font-weight:500;text-transform:uppercase;font-size:15px;letter-spacing:.02em;}
.lp-ov-meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.lp-ov-close{border:2px solid var(--ink);border-radius:5px;background:#fff;width:34px;height:34px;font-size:16px;cursor:pointer;line-height:1;flex-shrink:0;}

.mosaic-grid{display:grid;gap:4px;grid-template-columns:repeat(7,1fr);}
.mcell{aspect-ratio:1;border:2px solid var(--ink);border-radius:3px;background:#fff;box-shadow:1.5px 1.5px 0 rgba(33,31,56,.12);position:relative;cursor:pointer;}
.mcell.empty{background:#fff;box-shadow:none;border-color:rgba(33,31,56,.25);border-style:dashed;cursor:default;}
.mcell.today{outline:2.5px solid var(--ink);outline-offset:2px;}
.mcell:active:not(.empty){transform:translate(1px,1px);}
.dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;}
.dow-row span{text-align:center;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}

.year-strip{display:grid;grid-template-columns:repeat(28,1fr);gap:2.5px;}
.year-strip i{aspect-ratio:1;border-radius:1.5px;border:1px solid rgba(33,31,56,.35);}

.mk-legend{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:13px;}
.mk-legend span{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);}
.mk-legend i{width:12px;height:12px;border:1.5px solid var(--ink);border-radius:2px;}

.mk-streakgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.mk-streakgrid i{aspect-ratio:1;border:2px solid var(--ink);border-radius:3px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;}

/* ── 2 · PATTERN SURFACING ────────────────────────────────────────────────── */
.pat-row{display:flex;gap:11px;align-items:flex-start;}
.pat-ico{width:30px;height:30px;border:2px solid var(--ink);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:#fff;}
.pat-txt{font-size:12px;line-height:1.5;}
.pat-txt b{font-weight:500;}
.pat-bars{display:flex;gap:3px;align-items:flex-end;height:24px;margin-top:7px;}
.pat-bars i{width:7px;background:var(--accent);border:1.5px solid var(--ink);border-bottom:none;border-radius:2px 2px 0 0;}

/* ── 3 · DISTORTION → REFRAME ─────────────────────────────────────────────── */
#reframeMount{margin-top:14px;}
.reframe-ta{border:2px solid var(--ink);border-radius:4px;background:#fff;padding:11px;font-size:13px;line-height:1.5;min-height:64px;color:var(--ink);width:100%;font-family:var(--mono);resize:vertical;}
.reframe-saved-list{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.reframe-chip{border:2px solid var(--ink);border-radius:5px;background:#f5f3ff;padding:9px 11px;font-size:11.5px;line-height:1.5;}
.reframe-chip .rc-d{font-weight:500;color:var(--mental);}

/* ── 4 · SAME AS YESTERDAY ────────────────────────────────────────────────── */
.sum-bar{border:2px solid var(--ink);border-radius:6px;background:#fff;padding:11px 13px;display:flex;align-items:center;gap:11px;box-shadow:4px 4px 0 rgba(26,28,36,.14);}
.sum-tiles{display:flex;gap:3px;flex-shrink:0;flex-wrap:wrap;}
.sum-tiles i{width:13px;height:13px;border:1.5px solid var(--ink);border-radius:2px;background:#fff;}
.sum-tiles i.empty{border-style:dashed;border-color:rgba(33,31,56,.4);}
.sum-txt{font-size:11px;line-height:1.5;color:var(--muted);}
.sum-txt b{color:var(--ink);font-weight:500;}

/* ── 5 · ADAPTIVE RAMP ────────────────────────────────────────────────────── */
.sense{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:5px;background:#fff;padding:9px 12px;font-size:12px;font-family:var(--mono);}
.sense .n{width:22px;height:22px;border:2px solid var(--ink);border-radius:3px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:11px;flex-shrink:0;background:#fde8e8;}
body.adaptive-ramp .card[data-ramp-heavy] .card-content{display:none;}
body.adaptive-ramp .card[data-ramp-heavy]{opacity:.55;}

/* ── 8 · SAVE SUMMARY BAR ─────────────────────────────────────────────────── */
#saveSummaryMount{margin:0 16px;}

/* Brand mark is now a tappable affordance into the Year view. */
.header-title{cursor:pointer;}

@media (prefers-reduced-motion: reduce){
  .mk-btn:active,.mcell:active:not(.empty){transform:none;}
}