/* =====================================================================
   Warm Bento reskin — FAMILY VIEWS (To-Do · Calendar · Shopping · Finances)
   Owned by the family-views build agent (Jul 2 2026). Loads AFTER
   css/styles.css; every selector is scoped to #view-todo / #view-calendar /
   #view-shopping / #view-finances so nothing leaks into Home/Health/
   Business/Skippy (concurrently owned by another agent).
   All styled class names verified against js/app.js template strings +
   index.html — zero markup hooks renamed, CSS-only reskin per
   RESKIN-CONTRACT.md. !important appears ONLY where an app.js inline
   style must be overridden (documented at each site).
   ===================================================================== */

/* ---------------------------------------------------------------------
   SHARED (all four views): card headers as eyebrow labels
   (11px/700/ls1.1/uppercase/muted — DESIGN-SPEC eyebrow recipe). The
   Fraunces-italic plum view title is already handled by .topbar h1.
   --------------------------------------------------------------------- */
#view-calendar .card-head h2,
#view-finances .card-head h2{
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);
  font-style:normal;
}
#view-calendar .card-head,
#view-finances .card-head{margin-bottom:12px;align-items:center;}
/* hc-lbl suffixes inside those h2s ride along at the same size */
#view-calendar .card-head .hc-lbl,
#view-finances .card-head .hc-lbl{font-size:10px;letter-spacing:0.6px;}

/* =====================================================================
   TO-DO — JS rows (renderTodoPanel: .dc-prio.td-prio > .chk + .pt/.pw
   + .lv.td-lv) become individual white cards; the wrapping .td-card
   container goes transparent so each task floats on the cream page.
   ===================================================================== */
#view-todo .td-card{
  background:transparent;border:none;box-shadow:none;
  padding:0;margin-top:12px;border-radius:0;
}
#view-todo .td-list{gap:10px;}
#view-todo .td-prio{
  background:var(--card);border:none;border-radius:20px;
  padding:14px 16px;margin-bottom:0;
  box-shadow:var(--shadow-card);
  align-items:center;
}
/* Priority accent: soft dot instead of the heavy red bar (::before joins
   the flex row ahead of the checkbox). Urgency classes from todoUrgency(). */
#view-todo .td-prio::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--line);
}
#view-todo .td-prio.td-overdue::before{background:var(--clay);}
#view-todo .td-prio.td-today::before{background:var(--gold);}
#view-todo .td-prio.td-week::before{background:var(--sage);}
/* 26px circle checkbox (existing .chk hook — tap target unchanged) */
#view-todo .chk{
  width:26px;height:26px;border-radius:50%;
  border:2px solid #c9b99f;background:var(--card);
  color:transparent;margin-top:0;
}
#view-todo .chk:hover{border-color:var(--sage);}
#view-todo .td-prio.chk-done .chk{
  background:var(--sage);border-color:var(--sage);color:#fdf9f1;
}
#view-todo .td-prio .pt{font-size:13px;font-weight:600;color:var(--text);}
#view-todo .td-prio .pw{font-size:11px;font-weight:600;color:var(--muted);}
/* Urgency tag → tiny pill (colors still driven by the global urgency rules) */
#view-todo .td-lv{border-radius:999px;padding:3px 9px;letter-spacing:0.05em;}
/* Empty-state line ("Nothing open here") on the transparent wrapper */
#view-todo .td-card .hc-empty{color:var(--muted);}

/* =====================================================================
   CALENDAR
   ===================================================================== */
/* Week strip: 7 rounded white cells, active day = ink with cream text,
   .has-ev = 4px gold dot (all existing JS hooks: .day-cell/.today/.has-ev) */
#view-calendar .day-cell{
  background:var(--card);border:none;border-radius:14px;
  box-shadow:var(--shadow-card);
}
#view-calendar .day-cell .dow{font-size:10px;font-weight:700;letter-spacing:0.6px;}
#view-calendar .day-cell .dnum{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--text);}
#view-calendar .day-cell.today{background:var(--ink);box-shadow:var(--shadow-card);}
#view-calendar .day-cell.today .dow,
#view-calendar .day-cell.today .dnum{color:#f6efe3;}
#view-calendar .day-cell.has-ev::after{width:4px;height:4px;background:var(--gold);}
#view-calendar .day-cell.today.has-ev::after{background:var(--gold);}

/* All-day chips → chip recipe */
#view-calendar .cal-allday-chip{
  background:var(--chip-bg);color:var(--chip-ink);
  font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;
}

/* Timeline: quiet cream canvas, 10px/600 muted hour labels, clay now-line
   (already clay in styles.css) */
#view-calendar .cal-timeline{border:none;background:var(--cream-2);}
#view-calendar .cal-hour{border-top-color:rgba(236,226,210,0.9);}
#view-calendar .cal-hour-label{font-size:10px;font-weight:600;color:var(--muted);}

/* Event blocks: white cards, radius 16, 3px clay INSET bar via ::before
   (no straight border edge on a rounded card — spec rule), soft card shadow.
   Overrides the cal-c1..c4 tinted variants app.js assigns. */
#view-calendar .cal-block,
#view-calendar .cal-block.cal-c1,
#view-calendar .cal-block.cal-c2,
#view-calendar .cal-block.cal-c3,
#view-calendar .cal-block.cal-c4{
  background:var(--card);border-left:none;border-radius:16px;
  box-shadow:var(--shadow-card);outline:none;
  padding-left:18px;
}
#view-calendar .cal-block::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:3px;
  border-radius:2px;background:var(--clay);
}
#view-calendar .cal-block .cal-block-title{color:var(--text);font-weight:600;}
#view-calendar .cal-block .cal-block-time{color:var(--muted);font-weight:600;}
#view-calendar .cal-block.cal-compact{padding-left:18px;}
#view-calendar .cal-block.cal-block-tight{padding-left:14px;}
#view-calendar .cal-block.cal-block-tight::before{left:5px;top:4px;bottom:4px;}
/* Past events fade out, bar goes quiet */
#view-calendar .cal-block-past{
  background:var(--cream-2);box-shadow:none;opacity:0.45;
}
#view-calendar .cal-block-past::before{background:var(--line);}

/* Upcoming agenda: day groups get eyebrow date headers; event dots pick up
   the cal-c1..c4 rotation app.js assigns (previously unstyled on .dot). */
#view-calendar .cal-upcoming-day{
  font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--muted);
}
#view-calendar .dot.cal-c1{background:var(--plum);}
#view-calendar .dot.cal-c2{background:var(--clay);}
#view-calendar .dot.cal-c3{background:var(--gold);}
#view-calendar .dot.cal-c4{background:var(--sage);}
#view-calendar .glance-item{font-size:14px;}
#view-calendar .g-time{font-size:12px;color:var(--clay);}

/* =====================================================================
   SHOPPING
   ===================================================================== */
/* Add-item form: white card, pill inputs, gold pill button (all hooks kept:
   #shopAddForm/#shopAddName/#shopAddQty/#shopAddBtn/#shopAddError) */
#view-shopping .shop-add-card{
  background:var(--card);border:none;border-radius:20px;
  padding:12px 14px;box-shadow:var(--shadow-card);margin-top:16px;
}
#view-shopping .shop-add-form .fin-num-input{
  border-radius:999px;background:var(--card);border:1px solid var(--line);
  padding:10px 16px;font-size:13px;color:var(--text);
}
#view-shopping .shop-add-form .fin-num-input::placeholder{color:var(--muted);}
#view-shopping .shop-add-form .fin-num-input:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,154,58,0.15);
}
#view-shopping .shop-add-btn{
  background:var(--gold);color:#4a3208;font-size:12px;font-weight:700;
  border:none;border-radius:999px;padding:10px 18px;box-shadow:none;
}
#view-shopping .shop-add-btn:active{transform:scale(0.96);}

/* Item list: blush list-group card (outer radius 20, pad 4), rows divided by
   blush-ink hairlines — restyles the JS-generated .shop-prio rows in place. */
#view-shopping .td-card{
  background:var(--tile-blush);border:none;box-shadow:none;
  border-radius:20px;padding:4px;margin-top:12px;
}
#view-shopping .shop-list{gap:0;}
#view-shopping .td-prio{
  background:transparent;border:none;border-radius:0;box-shadow:none;
  margin-bottom:0;padding:12px 12px;align-items:center;
}
#view-shopping .td-prio + .td-prio{border-top:1px solid rgba(110,48,24,0.15);}
#view-shopping .chk{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(110,48,24,0.35);background:var(--card);
  color:transparent;margin-top:0;
}
#view-shopping .chk:hover{border-color:var(--tile-blush-ink);}
#view-shopping .td-prio.chk-done .chk{
  background:var(--sage);border-color:var(--sage);color:#fdf9f1;
}
#view-shopping .td-prio .pt{font-size:13px;font-weight:600;color:var(--tile-blush-ink);}
#view-shopping .td-prio .pw{font-size:11px;font-weight:600;color:var(--tile-blush-mut);}
#view-shopping .td-card .hc-empty{color:var(--tile-blush-mut);}
#view-shopping .placeholder-note{margin-left:6px;}

/* =====================================================================
   FINANCES — snapshot cards + Target Planner (all app.js-generated;
   hooks fin-plan-*, fin-target-cap, .fin-plan-row, .fin-planned-input,
   .fin-num-input untouched — CSS targeting only).
   ===================================================================== */
/* app.js writes inline `border-left:3px solid #22d3ee` (Era/Insights) and
   `var(--gold)` (levers) on these cards — a straight cyan border on a
   rounded warm card breaks the palette AND the no-rounded-single-border
   rule. Inline style ⇒ !important is genuinely required here; the accent
   returns as a rounded inset gold bar. */
#view-finances .card[style*="border-left"]{
  border-left:none !important;position:relative;
}
#view-finances .card[style*="border-left"]::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;
  border-radius:2px;background:var(--gold);
}

/* Summary / totals: bigger tabular figures on the right-hand values
   (font-size isn't in app.js's inline style, so no !important needed). */
#view-finances .glance-item{font-size:14px;}
#view-finances .glance-item > span[style*="margin-left:auto"]{
  font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;
}
#view-finances .glance-item .g-label{font-weight:600;}

/* Category list + planner rows → list-group card language: hairline
   dividers instead of floating gapped rows. */
#view-finances .card .todo-list{gap:0;}
#view-finances .card .todo-list li{padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;}
#view-finances .card .todo-list li:first-child{border-top:none;}
#view-finances .fin-group-h{
  font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--muted);
  margin:18px 0 4px;
}
#view-finances .fin-group-h:first-child{margin-top:0;}

/* Inputs (target cap + per-category planned): radius 12, cream-2 fill */
#view-finances .fin-num-input{
  border-radius:12px;background:var(--cream-2);border:1px solid var(--line);
  color:var(--text);
}
#view-finances .fin-num-input:focus{
  border-color:var(--plum-soft);box-shadow:0 0 0 3px rgba(90,38,96,0.10);
}
#view-finances .card-link{font-weight:700;font-size:12px;}

/* =====================================================================
   DESKTOP ≥900px — these four views read as a centered ~760px column
   (bento content column), title + chips aligned with it. Global rail/
   layout rules untouched.
   ===================================================================== */
@media (min-width:900px){
  #view-todo .page,#view-calendar .page,#view-shopping .page,#view-finances .page{
    max-width:760px;margin-left:auto;margin-right:auto;
  }
  #view-todo .topbar,#view-calendar .topbar,#view-shopping .topbar,#view-finances .topbar{
    max-width:760px;margin-left:auto;margin-right:auto;
  }
  #view-todo .segmented,#view-shopping .segmented,#view-finances .segmented{
    max-width:760px;margin-left:auto;margin-right:auto;padding:0 36px;
  }
  /* Calendar: week strip uses the full column width */
  #view-calendar .week-strip{max-width:none;}
}