/* ════════════════════════════════════════════════════════════════════
   PIXEL MOSAIC — theme skin (override layer, loaded AFTER the base css)
   Restyles the existing Life in Pixels markup. No DOM changes.
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root{
  --bg:#f4f2ea;
  --surface:#ffffff;
  --surface2:#eceaf6;
  --border:#211f38;
  --text:#211f38;
  --muted:#6c6a82;
  --accent:#7c6af5;
  --ink:#211f38;
  --mono:'DM Mono',monospace;
}

/* ── Pixel-grid ground (cool lavender) + monospace everywhere ──────── */
body{
  font-family:var(--mono);
  background-color:#f5f4fc;
  background-image:
    linear-gradient(rgba(40,36,80,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,36,80,.045) 1px,transparent 1px);
  background-size:24px 24px;
  background-position:-1px -1px;
}

/* ── Brand pixel-grid mark (replaces the painter emoji) ────────────── */
.header-title{display:flex;align-items:center;gap:9px}
.px-mark{width:21px;height:21px;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--accent);padding:2.5px;border-radius:4px;flex-shrink:0;box-shadow:2px 2px 0 rgba(33,31,56,.18)}
.px-mark i{display:block;border-radius:1px}
.px-mark i:nth-child(1){background:#fbbf24}
.px-mark i:nth-child(2){background:#34d399}
.px-mark i:nth-child(3){background:#60a5fa}
.px-mark i:nth-child(4){background:#f472b6}
.group-title,label,.field-label,.header-title,.collapse-icon,
.date-toggle-btn,.step-btn,.step-val,.water-oz,.water-btn,.save-btn,
.fasttrack-btn,.smartdefault-btn,.quickfill-toggle,.survival-btn,
.quickfill-yesterday-btn,.low-mood-btn,.draft-pill,.header-dow,
input,textarea,.ev-input,.pill-label,.bool-label,.btn-log-event,
.event-act-btn,.btn-cancel-event,.no-events-msg,.ctx-headline{
  font-family:var(--mono) !important;
}
.group-title{letter-spacing:.05em}
label,.field-label{letter-spacing:.11em}

/* ── Header ─────────────────────────────────────────────────────────── */
.app-header{
  background:#f5f4fc;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:2px solid var(--ink);
}
.header-title{font-weight:500;text-transform:uppercase;font-size:18px;letter-spacing:.02em}
.header-dow{border-radius:0;background:#efedff;color:#5a48d6}
.date-toggle{border:2px solid var(--ink);border-radius:0;background:#fff;padding:0;overflow:hidden}
.date-toggle-btn{border-radius:0;text-transform:uppercase}
.date-toggle-btn.active{background:var(--ink);color:#fff}
.low-mood-btn{border-radius:0;border-color:var(--ink)}
.draft-pill{border-radius:0}
.journal-link{border-radius:0;border-color:var(--ink);background:#efedff}

/* ── Cards as bordered tiles with hard offset shadow ───────────────── */
.card{
  border:2px solid var(--ink);
  border-radius:6px;
  background:#fbfaf5;
  box-shadow:5px 5px 0 rgba(26,28,36,.12);
}
.card-header{
  border-left:none;
  border-bottom:2px solid var(--ink);
  border-radius:0;
  background:var(--sc-bg,#f1eee4);
}
.card-content{border-top:none}
.card-content.collapsed + .card-header,.card-header.just-collapsed{animation:none}
.section-dot{border-radius:0;width:9px;height:9px}

/* ── Pills + bool buttons → short square selectable tiles ──────────── */
.pill,.bool-btn{
  border:2px solid var(--ink);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
  min-height:0 !important;
  padding:8px 6px 7px !important;
  gap:4px !important;
}
.pill-icon,.bool-btn .bool-icon{font-size:1.7rem !important;line-height:1}
.pill-label,.bool-label{font-size:11px !important;line-height:1.15}
.pill-group{grid-template-columns:repeat(auto-fill,minmax(74px,1fr)) !important;gap:7px !important}
.bool-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr)) !important;gap:7px !important}
.pill.compact{border-radius:3px;padding:7px 8px !important}
.pill:active,.bool-btn:active{transform:translate(1px,1px)}
.pill,.bool-btn{position:relative;overflow:hidden}
.pill.selected,.bool-btn.on{
  background:var(--sc,var(--accent));
  border-color:var(--ink);
  border-width:2px;
  box-shadow:3px 3px 0 rgba(26,28,36,.18);
}
/* corner notch on selected tiles (original-mosaic detail) */
.pill.selected::after,.bool-btn.on::after{
  content:"";position:absolute;top:0;right:0;
  width:0;height:0;border-style:solid;
  border-width:0 14px 14px 0;
  border-color:transparent var(--ink) transparent transparent;
}
.pill.compact.selected::after{border-width:0 10px 10px 0}
.pill.selected .pill-label,.bool-btn.on .bool-label{color:#fff !important}
.pill.selected .pill-label span{color:rgba(255,255,255,.82) !important}
.pill.selected .pill-icon{filter:none}

/* ── Header mosaic strip ───────────────────────────────────────────── */
.px-strip-row{flex-basis:100%;order:5;display:flex;flex-direction:column;gap:7px;margin-top:2px}
.px-meta{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.px-meta .px-dot{opacity:.45}
.px-meta .px-meta-label{font-weight:500}
#pxCount{color:var(--ink);font-weight:500}
.px-strip{display:flex;gap:4px;flex-wrap:wrap}
.px-strip i{width:18px;height:18px;border:2px solid var(--ink);border-radius:3px;background:#fff;box-shadow:1.5px 1.5px 0 rgba(33,31,56,.12);transition:background .18s ease}
.px-strip i.on{background:var(--cell,var(--accent))}

/* ── Stars → pixel cells ───────────────────────────────────────────── */
.star{
  width:46px;height:46px;
  border:2px solid var(--ink);border-radius:5px;
  background:#fff;color:transparent;font-size:0;opacity:1;
  display:flex;align-items:center;justify-content:center;
}
.star.lit{background:#efa92c}
.survival-stars .star{width:40px;height:40px}

/* ── Compact tiles also on mobile widths ───────────────────────────── */
@media (max-width:768px){
  .pill,.bool-btn{min-height:0 !important;padding:8px 6px 7px !important}
  .pill-icon,.bool-btn .bool-icon{font-size:1.7rem !important}
  .pill-label,.bool-label{font-size:11px !important}
  .pill-group,.bool-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr)) !important;gap:7px !important}
}

/* ── Stepper ───────────────────────────────────────────────────────── */
.stepper{border:2px solid var(--ink);border-radius:6px;background:#fff}
.step-btn{background:#fff}
.step-val{
  background:var(--sc,var(--accent));color:#fff;
  border-left:2px solid var(--ink);border-right:2px solid var(--ink);
  letter-spacing:.03em;
}

/* ── Water tracker ─────────────────────────────────────────────────── */
.water-tracker{border:2px solid var(--ink);border-radius:6px;background:var(--sc-bg,#daf0f5)}
.water-btn{border:2px solid var(--ink);border-radius:4px}
.water-fill-bar{border-radius:0}

/* ── Inputs ────────────────────────────────────────────────────────── */
input[type="text"],input[type="number"],textarea,.ev-input{
  border:2px solid var(--ink);border-radius:4px;background:#fff;
}

/* ── Banners / chrome squared ──────────────────────────────────────── */
.status-banner,.context-banner,.yesterday-banner,
.draft-restore-banner,.done-enough-banner,.survival-entry,
.regulate-card,.event-item,.new-event-form{border-radius:6px}
.ctx-event-chip,.event-badge{border-radius:0}

/* ── Fast-track strip + save ───────────────────────────────────────── */
.fasttrack-strip .survival-btn,.quickfill-toggle,
.fasttrack-btn,.smartdefault-btn,.quickfill-yesterday-btn{
  border-radius:6px;border-color:var(--ink);border-width:2px;
}
.btn-footer{border-top:2px solid var(--ink)}
.save-btn{
  background:var(--accent);
  border:2px solid var(--ink);border-radius:6px;
  text-transform:uppercase;letter-spacing:.05em;
  box-shadow:4px 4px 0 rgba(26,28,36,.22);
}
.scroll-top-fab,.quick-fill-fab{border-radius:6px;border:2px solid var(--ink)}
.btn-log-event,.btn-cancel-event,.event-act-btn{border-radius:5px}