/* Grocery budget (tools/grocery-budget.html). Frame: tool-frame.css + tools/kit.css + core.css. */
.gb-summary { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.gb-figure { font-size: clamp(64px, 8vw, 112px); letter-spacing: -0.04em; margin-top: 14px; }
.gb-subs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .gb-figure { font-size: clamp(56px, 18vw, 96px); } .gb-subs { grid-template-columns: 1fr 1fr; } }
/* ---------- Hero chart: the survey distribution, your week, the four plans ---------- */
.gb-chart { margin: clamp(48px, 6vw, 72px) 0 0; padding: clamp(24px, 3vw, 40px); background: var(--stage-2); border: 1px solid var(--hair-stage); border-radius: var(--r-panel); }
.gb-chart-head { display: grid; gap: 8px; margin-bottom: 44px; }
.gb-chart-title { font: 400 clamp(22px, 2vw, 28px)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--parchment); }
.gb-chart-sub { font: 400 14px/1.5 var(--font-sans); color: var(--parchment-2); max-width: 52em; }
.gb-dist { position: relative; height: 180px; margin-left: 150px; border-bottom: 1px solid rgba(236, 230, 216, .3); }
.gb-bin { position: absolute; bottom: 0; height: calc(var(--d) * 100%); padding: 0 1px; box-sizing: border-box; }
.gb-bin::before { content: ""; position: absolute; inset: 0 1px; border-radius: 4px 4px 0 0; background: rgba(236, 230, 216, .26); }
.gb-bin.is-mine::before { background: rgba(236, 230, 216, .5); }
.gb-bin i { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; text-align: center; font: 400 12px/1 var(--font-sans); font-style: normal; font-variant-numeric: tabular-nums; color: var(--parchment-3); }
.gb-you { position: absolute; top: -26px; bottom: -1px; width: 0; border-left: 2px solid var(--kesef); }
.gb-you b { position: absolute; top: 0; left: 8px; white-space: nowrap; font: 500 13px/1 var(--font-sans); color: var(--kesef); font-variant-numeric: tabular-nums; }
.gb-axis { position: relative; height: 26px; margin-left: 150px; }
.gb-axis span { position: absolute; top: 8px; transform: translateX(-50%); font: 400 11.5px/1 var(--font-mono); color: var(--parchment-3); }
.gb-axis span:first-child { transform: none; }
.gb-axis span:last-child { transform: translateX(-100%); }
.gb-levels { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hair-stage); display: grid; gap: 10px; }
.gb-levels li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; align-items: center; }
.gb-lv-name { font: 400 15px/1.2 var(--font-sans); color: var(--parchment-2); }
.gb-lv-track { position: relative; height: 10px; }
.gb-lv-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 5px 5px 0; background: rgba(236, 230, 216, .3); }
.gb-lv-fig { text-align: right; font: 400 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--parchment-2); }
.gb-lv-fig small { font-size: 12px; color: var(--parchment-3); margin-left: 1px; }
.gb-levels li.is-on .gb-lv-name, .gb-levels li.is-on .gb-lv-fig { color: var(--parchment); font-weight: 500; }
.gb-levels li.is-on .gb-lv-bar { background: var(--parchment); }
.gb-chart-note { margin: 22px 0 0; font: 400 13.5px/1.5 var(--font-sans); color: var(--parchment-2); max-width: 60em; }
@media (prefers-reduced-motion: no-preference) {
.gb-bin::before { transition: background .3s var(--ease); }
.gb-you { transition: left .5s var(--ease); }
.gb-lv-bar { transition: width .5s var(--ease); }
}
@media (max-width: 760px) {
.gb-chart { padding: 20px 16px; }
.gb-dist, .gb-axis { margin-left: 0; }
.gb-dist { height: 140px; margin-top: 8px; }
.gb-bin i { font-size: 10px; }
.gb-levels li { grid-template-columns: 104px minmax(0, 1fr) 76px; }
.gb-lv-name, .gb-lv-fig { font-size: 13.5px; }
}
/* ---------- Work area ---------- */
.gb-intro { margin: -12px 0 12px; font: 400 15px/1.6 var(--font-sans); color: var(--ink-2); }
.gb-people { list-style: none; margin: 0; padding: 0; }
.gb-person { display: grid; grid-template-columns: minmax(0, 200px) auto 44px; align-items: end; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.gb-person-age { display: grid; gap: 6px; }
.gb-person-age label { font: 500 12.5px/1.2 var(--font-sans); color: var(--ink-2); }
.gb-sex { align-self: end; }
.gb-sex[hidden] { display: inline-flex !important; visibility: hidden; }
.gb-x { width: 44px; height: 44px; display: grid; place-items: center; justify-self: end; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); cursor: pointer; }
.gb-x svg { width: 14px; height: 14px; }
.gb-x:hover { background: var(--paper-3); color: var(--ink); }
.gb-person-note { grid-column: 1 / -1; margin: 0; font: 400 13px/1.45 var(--font-sans); color: var(--ink-2); }
.gb-add { margin-top: 16px; }
.gb-add svg { width: 14px; height: 14px; }
.gb-size { margin-top: 14px; }
.gb-size:empty { display: none; }
.gb-plans-l { margin: 32px 0 12px; font: 500 13px/1.3 var(--font-sans); color: var(--ink-2); }
.gb-plans .tk-choice { min-height: 108px; }
@media (max-width: 520px) {
.gb-person { grid-template-columns: minmax(0, 1fr) 44px; }
.gb-sex { grid-column: 1; grid-row: 2; }
.gb-sex[hidden] { display: none !important; }
.gb-x { grid-column: 2; grid-row: 1; }
.gb-person-note { grid-row: 3; }
}
.gb-rows dt { display: grid; }
.gb-dt-sub { font-size: 12.5px; color: var(--ink-3); }
.gb-sources a, .tk-field small a { color: var(--ink); text-underline-offset: 3px; }
.gb-status:empty { display: none; }
.gb-status { margin-top: 12px; }
[hidden] { display: none !important; }
.gb-sex[hidden] { display: inline-flex !important; visibility: hidden; }
@media print {
#site-header, footer, .tf-related, .tk-guide, .tf-actions, .ks-reassure, .tk-actions, .kc-verdict__save, .kc-verdict__next, .gb-add, .gb-x, .kc-more, [data-kc-banner] { display: none !important; }
.tf-hero { padding: 24px 0 !important; }
.tf-work { padding: 0 !important; }
.tk-grid { display: block !important; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 520px) { .gb-sex[hidden] { display: none !important; } }