/* Household calculators: hub and calculator pages. Kept separate from the other category styles. */
:root {
  --h-green: #15803d; --h-green-hover: #166534; --h-green-soft: #dcfce7; --h-green-line: #bbf7d0;
  --h-ink: #0f172a; --h-muted: #64748b; --h-line: #e2e8f0; --h-card: #ffffff; --h-page: #f6f8f6;
  --h-field: #f8fafc; --h-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .05);
}
html.dark {
  --h-green: #4ade80; --h-green-hover: #86efac; --h-green-soft: #14291c; --h-green-line: #1f5532;
  --h-ink: #e7edf5; --h-muted: #94a3b8; --h-line: #263247; --h-card: #111827; --h-page: #0b1220;
  --h-field: #0f1a2b; --h-shadow: none;
}
.hh { background: var(--h-page); color: var(--h-ink); min-height: 60vh; }
.hh-wrap { max-width: 1200px; margin: 0 auto; padding: 28px 16px 56px; }
.hh-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hh-tile { width: 64px; height: 64px; border-radius: 18px; background: var(--h-green-soft); color: var(--h-green); display: grid; place-items: center; font-size: 26px; flex: 0 0 64px; }
.hh-title { margin: 0; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.hh-sub { margin: 4px 0 0; color: var(--h-muted); font-size: 17px; }
.hh-search { display: flex; gap: 10px; margin-top: 22px; max-width: 760px; }
.hh-search input { flex: 1 1 auto; min-width: 0; height: 52px; border: 1.5px solid var(--h-green-line); border-radius: 14px; background: var(--h-card); color: var(--h-ink); padding: 0 16px; font: inherit; font-size: 16px; }
.hh-search input:focus { outline: 3px solid var(--h-green-soft); border-color: var(--h-green); }
.hh-btn { appearance: none; border: 0; border-radius: 12px; background: var(--h-green); color: #ffffff; font: inherit; font-weight: 700; font-size: 16px; min-height: 48px; padding: 0 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.hh-btn:hover { background: var(--h-green-hover); }
.hh-btn:focus-visible, .hh-tab:focus-visible, .hh-card:focus-visible, .hh-chip:focus-visible { outline: 3px solid var(--h-green-soft); outline-offset: 2px; }
.hh-btn-ghost { appearance: none; border: 1.5px solid var(--h-line); border-radius: 12px; background: var(--h-card); color: var(--h-ink); font: inherit; font-weight: 700; min-height: 48px; padding: 0 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.hh-popular { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; color: var(--h-muted); font-size: 15px; }
.hh-chip { appearance: none; border: 1.5px solid var(--h-line); background: var(--h-card); color: var(--h-ink); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.hh-chip:hover { border-color: var(--h-green); }
.hh-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.hh-tab { appearance: none; border: 1.5px solid var(--h-line); background: var(--h-card); color: var(--h-ink); border-radius: 14px; padding: 14px 8px; font: inherit; cursor: pointer; display: grid; gap: 4px; justify-items: center; text-align: center; min-height: 92px; box-shadow: var(--h-shadow); }
.hh-tab i { font-size: 20px; color: var(--h-green); }
.hh-tab strong { font-size: 15px; font-weight: 700; }
.hh-tab small { color: var(--h-muted); font-size: 13px; }
.hh-tab[aria-selected="true"] { background: var(--h-green); border-color: var(--h-green); color: #ffffff; }
.hh-tab[aria-selected="true"] i, .hh-tab[aria-selected="true"] small { color: #ffffff; }
.hh-tab:disabled { opacity: .55; cursor: not-allowed; }
.hh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; margin-top: 26px; align-items: start; }
.hh-panel { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 18px; box-shadow: var(--h-shadow); padding: 20px; min-width: 0; }
.hh-panel-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; }
.hh-panel-title i { color: var(--h-green); }
.hh-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.hh-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; gap: 14px; align-items: center; border: 1.5px solid var(--h-line); background: var(--h-card); border-radius: 14px; padding: 14px; color: var(--h-ink); text-decoration: none; min-height: 84px; }
.hh-card:hover { border-color: var(--h-green); text-decoration: none; }
.hh-card-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--h-green-soft); color: var(--h-green); font-size: 22px; }
.hh-card-title { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.25; }
.hh-card-desc { margin: 3px 0 0; color: var(--h-muted); font-size: 14px; line-height: 1.4; }
.hh-card-arrow { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--h-line); color: var(--h-green); }
.hh-empty { color: var(--h-muted); font-size: 15px; margin: 14px 0 0; }
.hh-calc-head { display: flex; align-items: center; gap: 14px; }
.hh-calc-head .hh-card-icon { width: 56px; height: 56px; }
.hh-calc-sub { margin: 2px 0 0; color: var(--h-muted); font-size: 15px; }
.hh-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.hh-field label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.hh-field .opt { color: var(--h-muted); font-weight: 500; font-size: 14px; margin-left: 6px; }
.hh-field input { width: 100%; height: 48px; border: 1.5px solid var(--h-line); border-radius: 12px; background: var(--h-field); color: var(--h-ink); padding: 0 14px; font: inherit; font-size: 16px; box-sizing: border-box; }
.hh-field input:focus { outline: 3px solid var(--h-green-soft); border-color: var(--h-green); }
.hh-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.hh-actions .hh-btn { flex: 1 1 240px; }
.hh-error { margin-top: 14px; border-radius: 12px; border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; padding: 12px 14px; font-size: 15px; }
.hh-error[hidden] { display: none; }
.hh-result { margin-top: 18px; border-radius: 16px; background: var(--h-green-soft); border: 1px solid var(--h-green-line); padding: 18px; }
.hh-result[hidden] { display: none; }
.hh-result-label { margin: 0; font-size: 14px; font-weight: 700; color: var(--h-green); text-transform: uppercase; letter-spacing: .04em; }
.hh-result-value { margin: 4px 0 0; font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.hh-breakdown { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--h-muted); }
.hh-breakdown li { display: flex; justify-content: space-between; gap: 12px; }
.hh-breakdown strong { color: var(--h-ink); font-variant-numeric: tabular-nums; }
.hh-body { margin-top: 26px; display: grid; gap: 14px; max-width: 760px; }
.hh-body h2 { margin: 10px 0 0; font-size: 22px; font-weight: 800; }
.hh-body p, .hh-body li { color: var(--h-muted); font-size: 16px; line-height: 1.65; margin: 0; }
.hh-body ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
@media (max-width: 1000px) { .hh-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hh-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hh-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hh-form { grid-template-columns: 1fr; } .hh-search { flex-direction: column; } .hh-tile { width: 52px; height: 52px; flex-basis: 52px; font-size: 22px; } }
.hh-grid-single { grid-template-columns: minmax(0, 1fr); }
.hh-faq-q { margin: 12px 0 4px; font-size: 17px; font-weight: 800; color: var(--h-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hh-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 16px; align-items: center; }
.hh-hero-art { width: 100%; height: auto; max-width: 360px; justify-self: end; }
@media (max-width: 760px) { .hh-hero { grid-template-columns: 1fr; } .hh-hero-art { max-width: 280px; justify-self: start; } }