/* ============================================================================
   GetWheelSpinner — Household Utilities shared stylesheet (v7.1.2)
   Loaded ONLY on the six upgraded household/saving pages:
     /grocery-saving-wheel/      /bill-review-wheel/
     /energy-saving-task-wheel/  /subscription-cancel-wheel/
     /no-spend-challenge-wheel/  /money-saving-decision-wheel/
   Ordinary wheel pages never download this file.

   Everything is namespaced .hh-* so it cannot collide with the wheel core,
   new-tools.css, multi-wheel.css, daily-challenge.css or embed styling.
   Colours come from the existing style.css tokens, so light/dark themes and
   the theme toggle work with no extra JavaScript.
   ============================================================================ */

/* ── shell ────────────────────────────────────────────────────────────────── */
.hh-tool{
  max-width:1200px;margin:0 auto 30px;padding:0 20px;
}
.hh-panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.hh-panel + .hh-panel{margin-top:16px}
.hh-panel-title{
  font-size:17px;font-weight:800;letter-spacing:-.2px;margin-bottom:4px;color:var(--text);
}
.hh-panel-sub{font-size:13px;color:var(--muted2);line-height:1.55;margin-bottom:16px}

/* ── section headings inside the tool ─────────────────────────────────────── */
.hh-legend{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted2);margin:0 0 10px;padding:0;
}
.hh-fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.hh-fieldset:last-of-type{margin-bottom:0}

/* ── inputs ───────────────────────────────────────────────────────────────── */
.hh-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.hh-label{
  font-size:12px;font-weight:600;color:var(--muted);line-height:1.35;
}
.hh-label .hh-opt{font-weight:400;color:var(--muted2)}
.hh-input,.hh-select{
  width:100%;min-height:44px;padding:10px 12px;font-family:var(--font);font-size:15px;
  color:var(--text);background:var(--card2);
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  transition:border-color .15s,box-shadow .15s;
}
.hh-select{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.hh-input:focus-visible,.hh-select:focus-visible,
.hh-btn:focus-visible,.hh-daybtn:focus-visible,.hh-check input:focus-visible{
  outline:3px solid var(--amber);outline-offset:2px;
}
.hh-input:focus,.hh-select:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.16)}
.hh-input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.hh-input::placeholder{color:var(--muted2);opacity:.75}

/* number inputs: keep the spinner from squashing narrow phone columns */
.hh-input[type="number"]{-moz-appearance:textfield}
.hh-input[type="number"]::-webkit-outer-spin-button,
.hh-input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── repeatable rows ──────────────────────────────────────────────────────── */
.hh-rows{display:flex;flex-direction:column;gap:14px}
.hh-row{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;position:relative;
}
.hh-row-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;
}
.hh-row-num{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted2);
}
.hh-row-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hh-row-grid.hh-2{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.hh-span-2{grid-column:span 2}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.hh-btn{
  min-height:44px;padding:11px 18px;font-family:var(--font);font-size:14.5px;font-weight:700;
  border-radius:var(--radius-sm);border:1px solid var(--border2);cursor:pointer;
  background:var(--card2);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .12s,background .15s,border-color .15s;
}
.hh-btn:hover{background:var(--card);border-color:var(--amber)}
.hh-btn:active{transform:translateY(1px)}
.hh-btn-primary{
  background:linear-gradient(135deg,#F59E0B 0%,#F97316 50%,#EF4444 100%);
  color:#fff;border-color:transparent;min-height:48px;font-size:15.5px;font-weight:800;
}
.hh-btn-primary:hover{filter:brightness(1.06);border-color:transparent}
.hh-btn-danger{color:var(--red)}
.hh-btn-danger:hover{border-color:var(--red);background:rgba(239,68,68,.08)}
.hh-btn-sm{min-height:44px;min-width:44px;padding:8px 12px;font-size:13px}
.hh-btn[disabled]{opacity:.5;cursor:not-allowed}
.hh-btn[disabled]:hover{background:var(--card2);border-color:var(--border2);filter:none}
.hh-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.hh-actions-sep{flex:1 1 auto}

/* Light mode: the bright brand gradient measures 2.15:1 against white text.
   Same darkened gradient adopted in v7.1.1 for the four primary families —
   worst measured point 5.02:1, clearing AA 4.5:1. Dark mode is untouched. */
html[data-theme="light"] .hh-btn-primary{
  background:linear-gradient(135deg,#B45309 0%,#A83812 50%,#B01C1C 100%);
}

/* ── results ──────────────────────────────────────────────────────────────── */
.hh-results{margin-top:18px}
.hh-results[hidden]{display:none}
.hh-summary{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px;
}
.hh-stat{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 14px;min-width:0;
}
.hh-stat-k{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted2);margin-bottom:5px;line-height:1.3;
}
.hh-stat-v{
  font-size:21px;font-weight:900;letter-spacing:-.5px;color:var(--text);
  line-height:1.2;overflow-wrap:anywhere;
}
.hh-stat-note{font-size:11.5px;color:var(--muted2);margin-top:4px;line-height:1.4}
.hh-stat-good .hh-stat-v{color:#16A34A}
html[data-theme="light"] .hh-stat-good .hh-stat-v{color:#15803D}
.hh-stat-warn .hh-stat-v{color:var(--red)}

/* ── tables that become cards on narrow screens ───────────────────────────── */
.hh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hh-table{width:100%;border-collapse:collapse;font-size:14px}
.hh-table caption{
  text-align:left;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted2);padding-bottom:8px;
}
.hh-table th,.hh-table td{
  padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);
  vertical-align:top;
}
.hh-table th{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted2);white-space:nowrap;
}
.hh-table td{color:var(--text);overflow-wrap:anywhere}
.hh-table tbody tr:last-child td{border-bottom:0}
.hh-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hh-table th.hh-num{text-align:right}
.hh-best td{background:rgba(22,163,74,.10)}
.hh-tag{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;
  padding:2px 7px;border-radius:999px;border:1px solid var(--border2);
  color:var(--muted);white-space:nowrap;
}
.hh-tag-best{color:#16A34A;border-color:rgba(22,163,74,.5);background:rgba(22,163,74,.10)}
html[data-theme="light"] .hh-tag-best{color:#15803D}
.hh-tag-up{color:var(--red);border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.10)}

@media(max-width:700px){
  .hh-table,.hh-table tbody,.hh-table tr,.hh-table td{display:block;width:100%}
  .hh-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hh-table tr{
    background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:12px;margin-bottom:10px;
  }
  .hh-table td{
    border-bottom:0;padding:5px 0;display:flex;gap:12px;align-items:baseline;
    justify-content:space-between;text-align:right;
  }
  .hh-table td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
    color:var(--muted2);
  }
  .hh-table td:empty{display:none}
  .hh-num{text-align:right}
  .hh-best td{background:transparent}
  .hh-best{border-color:rgba(22,163,74,.55)}
}

/* ── messages ─────────────────────────────────────────────────────────────── */
.hh-msg{
  font-size:13.5px;line-height:1.55;padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border2);background:var(--card2);color:var(--muted);margin-top:14px;
}
.hh-msg[hidden]{display:none}
.hh-msg-error{
  border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.09);color:var(--text);
}
.hh-msg-error strong{color:var(--red)}
.hh-msg-ok{border-color:rgba(22,163,74,.5);background:rgba(22,163,74,.09)}
.hh-err{color:var(--red)}
.hh-note{font-size:12.5px;color:var(--muted2);line-height:1.6;margin-top:12px}
.hh-note strong{color:var(--muted)}
.hh-privacy{
  font-size:12.5px;color:var(--muted2);line-height:1.6;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--border);
}
.hh-disclaimer{
  font-size:12px;color:var(--muted2);line-height:1.6;margin-top:10px;
}

/* ── checklist (purchase impact) ──────────────────────────────────────────── */
.hh-check-list{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.hh-check{
  display:flex;align-items:center;gap:11px;min-height:44px;padding:6px 8px;
  border-radius:var(--radius-sm);cursor:pointer;font-size:14.5px;color:var(--text);
  line-height:1.45;
}
.hh-check:hover{background:var(--card2)}
.hh-check input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--amber);cursor:pointer}
.hh-check span{min-width:0}

/* ── no-spend day grid ────────────────────────────────────────────────────── */
.hh-daygrid{
  display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));margin-top:4px;
}
.hh-day{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;
}
.hh-day-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;
}
.hh-day-n{font-size:11.5px;font-weight:800;letter-spacing:.5px;color:var(--muted2);text-transform:uppercase}
.hh-day-date{font-size:11.5px;color:var(--muted2);white-space:nowrap}
.hh-day-today{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.hh-day-today .hh-day-n{color:var(--amber)}
.hh-daybtns{display:flex;gap:5px;margin-bottom:8px}
.hh-daybtn{
  flex:1 1 0;min-height:44px;padding:5px 2px;border-radius:var(--radius-sm);cursor:pointer;
  border:1px solid var(--border2);background:var(--card);color:var(--muted);
  font-family:var(--font);font-size:11px;font-weight:700;line-height:1.25;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.hh-daybtn:hover{border-color:var(--amber)}
.hh-daybtn-ico{font-size:14px;line-height:1}
/* Status is never conveyed by colour alone — the icon and the pressed state
   both change, and aria-pressed exposes it to assistive technology. */
.hh-daybtn[aria-pressed="true"]{color:var(--text);border-color:var(--amber);background:rgba(245,158,11,.14)}
.hh-daybtn-no[aria-pressed="true"]{border-color:#16A34A;background:rgba(22,163,74,.16)}
html[data-theme="light"] .hh-daybtn-no[aria-pressed="true"]{background:rgba(22,163,74,.12)}
.hh-day-amt{display:flex;flex-direction:column;gap:4px}
.hh-day-amt .hh-label{font-size:11px}
.hh-day-amt .hh-input{min-height:44px;font-size:14px;padding:8px 10px}

/* ── the secondary wheel introduction ─────────────────────────────────────── */
.hh-wheel-intro{
  max-width:1200px;margin:0 auto 6px;padding:0 20px;
}
.hh-wheel-intro h2{font-size:20px;font-weight:800;letter-spacing:-.3px;margin-bottom:6px}
.hh-wheel-intro p{font-size:13.5px;color:var(--muted2);line-height:1.6;max-width:760px}

/* ── worked example ───────────────────────────────────────────────────────── */
.hh-example{
  background:var(--card2);border:1px solid var(--border);border-left:3px solid var(--amber);
  border-radius:var(--radius-sm);padding:14px 16px;margin-top:12px;
}
.hh-example p{font-size:13.5px;color:var(--muted);line-height:1.65}
.hh-example p + p{margin-top:8px}
.hh-example strong{color:var(--text)}

/* ── methodology list ─────────────────────────────────────────────────────── */
.hh-method{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:10px}
.hh-method li{
  font-size:13.5px;color:var(--muted);line-height:1.6;padding-left:16px;position:relative;
}
.hh-method li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--amber);
}
.hh-method code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--card);border:1px solid var(--border);border-radius:5px;padding:1px 5px;
  color:var(--text);overflow-wrap:anywhere;
}

/* ── narrow phones ────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .hh-tool,.hh-wheel-intro{padding:0 14px}
  .hh-panel{padding:16px 14px}
  .hh-row-grid,.hh-row-grid.hh-2{grid-template-columns:1fr}
  .hh-span-2{grid-column:auto}
  .hh-summary{grid-template-columns:1fr 1fr;gap:10px}
  .hh-stat-v{font-size:18px}
  .hh-daygrid{grid-template-columns:1fr}
  /* Reset must not sit flush against the primary action on a phone. */
  .hh-actions{flex-direction:column;align-items:stretch;gap:12px}
  .hh-actions .hh-btn{width:100%}
  .hh-actions-sep{display:none}
  .hh-actions .hh-btn-danger{margin-top:6px}
}
@media(max-width:360px){
  .hh-summary{grid-template-columns:1fr}
  .hh-panel-title{font-size:16px}
}

/* ── motion ───────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hh-btn,.hh-input,.hh-select{transition:none}
  .hh-btn:active{transform:none}
}

/* ── print ────────────────────────────────────────────────────────────────── */
@media print{
  .hh-actions,.hh-btn{display:none !important}
  .hh-panel{box-shadow:none;border-color:#999}
}

/* ══════════════════════════════════════════════════════════════════════════
   v7.1.3 ADDITIONS — savings goal planner, weekend activity finder,
   household task prioritiser.

   Purely additive. No selector above this line was changed, so the six
   v7.1.2 utilities render exactly as they did; their suites are re-run to
   prove it. Same .hh-* namespace, same tokens, same light/dark behaviour.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── progress bar (savings goal) ─────────────────────────────────────────── */
.hh-progress{
  height:14px;border-radius:999px;background:var(--card2);
  border:1px solid var(--border);overflow:hidden;margin-top:4px;
}
.hh-progress-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,#B45309,#16A34A);
  transition:width .25s ease;
}
html[data-theme="light"] .hh-progress-fill{background:linear-gradient(90deg,#B45309,#15803D)}
@media(prefers-reduced-motion:reduce){.hh-progress-fill{transition:none}}

/* ── chip-style multi-select filters (activity finder) ───────────────────── */
.hh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.hh-chip{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border2);background:var(--card2);color:var(--muted);
  font-size:13.5px;font-weight:600;line-height:1.3;
}
.hh-chip:hover{border-color:var(--amber);color:var(--text)}
.hh-chip input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--amber);cursor:pointer}
/* selection is shown by the checkbox, the weight AND the border — never colour alone */
.hh-chip:has(input:checked){
  border-color:var(--amber);background:rgba(245,158,11,.14);color:var(--text);font-weight:800;
}
.hh-chip input:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ── activity result cards ───────────────────────────────────────────────── */
.hh-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:4px}
.hh-card{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0;
}
.hh-card-title{font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--text);line-height:1.3}
.hh-card-why{font-size:13px;color:var(--muted2);line-height:1.55;flex:1 1 auto}
.hh-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.hh-card-prep{
  font-size:12px;color:var(--muted2);line-height:1.5;
  padding-top:8px;border-top:1px solid var(--border);
}
.hh-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.hh-cost{font-weight:800;letter-spacing:.3px}
.hh-cost-free{color:#16A34A;border-color:rgba(22,163,74,.5);background:rgba(22,163,74,.10)}
html[data-theme="light"] .hh-cost-free{color:#15803D}

/* ── shortlist and weekend slots ─────────────────────────────────────────── */
.hh-slots{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:4px}
.hh-slot{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;
}
.hh-slot-name{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted2);margin-bottom:8px;
}
.hh-slot-item{font-size:13.5px;color:var(--text);line-height:1.45;overflow-wrap:anywhere}
.hh-slot-empty{font-size:12.5px;color:var(--muted2);font-style:italic}
.hh-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.hh-list-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;
}
.hh-list-row .hh-select{max-width:210px}
.hh-list-name{flex:1 1 150px;font-size:14px;color:var(--text);min-width:0;overflow-wrap:anywhere}

/* ── priority tiers (task prioritiser) ───────────────────────────────────── */
.hh-tier{margin-top:16px}
.hh-tier-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;
}
.hh-tier-name{font-size:14px;font-weight:900;letter-spacing:.4px;text-transform:uppercase}
.hh-tier-sub{font-size:12px;color:var(--muted2)}
/* each tier is named in text and carries its own icon — colour is never the
   only signal that a task is urgent */
.hh-tier-first .hh-tier-name{color:var(--red)}
.hh-tier-next .hh-tier-name{color:var(--amber)}
.hh-tier-wait .hh-tier-name{color:var(--muted2)}
.hh-task{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;
}
.hh-task-main{flex:1 1 180px;min-width:0}
.hh-task-name{font-size:14.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.hh-task-meta{font-size:12px;color:var(--muted2);margin-top:3px;line-height:1.45}
.hh-task-moves{display:flex;gap:6px;flex:0 0 auto}
.hh-task-moves .hh-btn{min-width:44px;padding:8px 10px}
.hh-unassigned{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.08)}

/* ── member load bars (chore splitter) ───────────────────────────────────── */
.hh-loads{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:4px}
.hh-load{
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;
}
.hh-load-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}
.hh-load-name{font-size:14px;font-weight:800;color:var(--text);overflow-wrap:anywhere;min-width:0}
.hh-load-mins{font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}
.hh-load-tasks{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:5px}
.hh-load-tasks li{font-size:12.5px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}

/* ── narrow phones ───────────────────────────────────────────────────────── */
@media(max-width:600px){
  .hh-cards{grid-template-columns:1fr}
  .hh-slots,.hh-loads{grid-template-columns:1fr}
  .hh-list-row{flex-direction:column;align-items:stretch}
  .hh-list-row .hh-select{max-width:none}
  .hh-task{flex-direction:column;align-items:stretch}
  .hh-task-moves{justify-content:flex-start}
  .hh-task-moves .hh-btn{flex:1 1 0}
}

/* ── print (task plan) ───────────────────────────────────────────────────── */
@media print{
  .hh-chips,.hh-card-actions,.hh-task-moves{display:none !important}
  .hh-card,.hh-load,.hh-task{break-inside:avoid}
}