.mc-calc *, .mc-calc *::before, .mc-calc *::after { box-sizing: border-box; } .mc-calc { font-family: var(--mc-font-sans); font-size: var(--mc-text-md); line-height: var(--mc-leading-body); color: var(--mc-text); background: var(--mc-surface-raised); border: var(--mc-card-border); border-radius: var(--mc-radius-xl); box-shadow: var(--mc-shadow-lg); overflow: hidden; container-type: inline-size; container-name: mccalc; } .mc-calc :where(input, select, button, textarea) { font-family: inherit; } .mc-calc :where(h1,h2,h3,p,span,label) { margin: 0; } .mc-label { display: block; font-size: var(--mc-text-2xs); font-weight: var(--mc-weight-semibold); letter-spacing: var(--mc-tracking-label); text-transform: uppercase; color: var(--mc-text-muted); margin-bottom: var(--mc-space-2); } .mc-field { width: 100%; height: var(--mc-control-height); padding: 0 var(--mc-control-padding-x); font-size: var(--mc-text-md); color: var(--mc-text); background: var(--mc-control-bg); border: var(--mc-control-border); border-radius: var(--mc-control-radius); outline: none; font-variant-numeric: tabular-nums; transition: border-color var(--mc-duration) var(--mc-ease), box-shadow var(--mc-duration) var(--mc-ease); } .mc-field:hover { border-color: var(--mc-border-control); } .mc-field:focus-visible { border-color: var(--mc-control-border-focus); box-shadow: var(--mc-focus-ring); } .mc-field[aria-invalid="true"] { border-color: var(--mc-status-alert-fg); } .mc-group { display: flex; align-items: stretch; min-width: 0; } .mc-group > .mc-field { border-radius: 0; flex: 1 1 0; min-width: 2.75rem; } .mc-group > :first-child { border-top-left-radius: var(--mc-radius-sm); border-bottom-left-radius: var(--mc-radius-sm); } .mc-group > :last-child { border-top-right-radius: var(--mc-radius-sm); border-bottom-right-radius: var(--mc-radius-sm); } .mc-affix { display: grid; place-items: center; padding: 0 var(--mc-space-1); min-width: 1.875rem; font-size: var(--mc-text-xs); color: var(--mc-text-muted); background: var(--mc-surface-sunken); border: 1px solid var(--mc-border); white-space: nowrap; } .mc-affix--lead { border-right: 0; } .mc-affix--tail { border-left: 0; } .mc-unit { flex: 0 1 4.125rem; width: 4.125rem; min-width: 3.25rem; height: var(--mc-control-height-sm); padding: 0 var(--mc-space-1); font-size: var(--mc-text-xs); color: var(--mc-text); background: var(--mc-surface-sunken); border: 1px solid var(--mc-border); border-left: 0; cursor: pointer; outline: none; } .mc-unit:focus-visible { border-color: var(--mc-control-border-focus); box-shadow: var(--mc-focus-ring); } .mc-calc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mc-space-6); flex-wrap: wrap; padding: var(--mc-space-6) var(--mc-space-8); border-bottom: 1px solid var(--mc-c-oat); background: var(--mc-surface); } .mc-calc__head-fields { display: flex; gap: var(--mc-space-5); align-items: flex-end; flex-wrap: wrap; } .mc-calc__recipe { width: min(17.5rem, 60vw); font-size: var(--mc-text-lg); font-weight: var(--mc-weight-medium); } .mc-calc__servings { width: 5.625rem; } .mc-calc__meta { display: flex; align-items: center; gap: var(--mc-space-2); font-size: var(--mc-text-xs); color: var(--mc-text-subtle); } .mc-calc__meta svg { flex: none; } .mc-calc__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.7fr); } .mc-calc__form { padding: var(--mc-space-6) var(--mc-space-8) var(--mc-space-8); border-right: 1px solid var(--mc-c-oat); min-width: 0; container-type: inline-size; container-name: mcform; } .mc-rows { display: block; } .mc-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.75fr) minmax(0, 1.15fr) 4.5rem 4.75rem 2.25rem; gap: var(--mc-space-2); align-items: center; } .mc-row--head { padding-bottom: var(--mc-space-3); border-bottom: 1px solid var(--mc-c-oat); } .mc-row--head span { font-size: var(--mc-text-2xs); font-weight: var(--mc-weight-semibold); letter-spacing: var(--mc-tracking-label); text-transform: uppercase; color: var(--mc-text-muted); } .mc-row--item { padding: var(--mc-space-3) 0; border-bottom: 1px solid var(--mc-c-linen); } .mc-row .mc-field { height: var(--mc-control-height-sm); padding: 0 var(--mc-space-1); font-size: var(--mc-text-sm); border-color: var(--mc-border); } .mc-row .mc-affix, .mc-row .mc-unit { height: var(--mc-control-height-sm); } .mc-num--right { text-align: right; } .mc-row__yield .mc-affix { min-width: 1.75rem; padding: 0 var(--mc-space-1); } .mc-row__cost { font-family: var(--mc-font-display); font-size: var(--mc-text-figure-sm); font-weight: var(--mc-weight-medium); text-align: right; font-variant-numeric: tabular-nums; } .mc-row__cost--pending { color: var(--mc-text-subtle); font-size: var(--mc-text-sm); font-family: var(--mc-font-sans); } .mc-iconbtn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: transparent; border: 1px solid transparent; border-radius: var(--mc-radius-sm); color: var(--mc-c-stone); cursor: pointer; transition: background var(--mc-duration) var(--mc-ease), color var(--mc-duration) var(--mc-ease); position: relative; } .mc-iconbtn::after { content: ""; position: absolute; inset: -2px; min-width: 44px; min-height: 44px; } .mc-iconbtn:hover { background: var(--mc-status-alert-bg); color: var(--mc-status-alert-fg); } .mc-iconbtn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); } .mc-rowprompt { display: flex; align-items: center; gap: var(--mc-space-3); flex-wrap: wrap; margin: 0 0 var(--mc-space-3); padding: var(--mc-space-3) var(--mc-space-4); background: var(--mc-status-info-bg); color: var(--mc-status-info-fg); border-radius: var(--mc-radius-md); font-size: var(--mc-text-sm); } .mc-rowprompt svg { flex: none; } .mc-rowprompt .mc-field { height: var(--mc-control-height-sm); width: 5rem; font-size: var(--mc-text-sm); } .mc-rowprompt .mc-affix { height: var(--mc-control-height-sm); background: var(--mc-surface-raised); } .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-space-2); min-height: 2.75rem; padding: 0 var(--mc-space-4); font-size: var(--mc-text-sm); font-weight: var(--mc-weight-semibold); border-radius: var(--mc-radius-md); cursor: pointer; transition: background var(--mc-duration) var(--mc-ease), color var(--mc-duration) var(--mc-ease), border-color var(--mc-duration) var(--mc-ease); } .mc-btn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); } .mc-btn:active { transform: translateY(1px); } .mc-btn--add { background: transparent; color: var(--mc-text-brand); border: 1px dashed var(--mc-border-control); } .mc-btn--add:hover { background: var(--mc-surface-brand-soft); border-color: var(--mc-border-brand); } .mc-total { text-align: right; } .mc-total__value { font-family: var(--mc-font-display); font-size: var(--mc-text-xl); font-weight: var(--mc-weight-semibold); font-variant-numeric: tabular-nums; } .mc-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-space-5); flex-wrap: wrap; padding-top: var(--mc-space-5); } .mc-disclosure { margin-top: var(--mc-space-6); border-top: 1px solid var(--mc-c-oat); padding-top: var(--mc-space-5); } .mc-disclosure__btn { display: flex; align-items: center; gap: var(--mc-space-2); width: 100%; min-height: 2.75rem; background: transparent; border: 0; padding: 0; font-size: var(--mc-text-md); font-weight: var(--mc-weight-semibold); color: var(--mc-text); cursor: pointer; text-align: left; border-radius: var(--mc-radius-sm); } .mc-disclosure__btn:hover { color: var(--mc-text-brand); } .mc-disclosure__btn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); } .mc-disclosure__hint { font-weight: var(--mc-weight-regular); color: var(--mc-text-subtle); font-size: var(--mc-text-sm); } .mc-disclosure__chev { transition: transform var(--mc-duration) var(--mc-ease); flex: none; } .mc-disclosure__btn[aria-expanded="true"] .mc-disclosure__chev { transform: rotate(180deg); } .mc-disclosure__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mc-duration-slow) var(--mc-ease); } .mc-disclosure__panel > div { overflow: hidden; } .mc-disclosure[data-open="true"] .mc-disclosure__panel { grid-template-rows: 1fr; } .mc-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mc-space-4); padding-top: var(--mc-space-4); } .mc-extras label { display: block; font-size: var(--mc-text-xs); font-weight: var(--mc-weight-medium); margin-bottom: var(--mc-space-2); } .mc-note { font-size: var(--mc-text-xs); color: var(--mc-text-muted); margin-top: var(--mc-space-3); } .mc-quick { display: flex; flex-direction: column; gap: var(--mc-space-5); justify-content: flex-start; } .mc-quick .mc-field { height: var(--mc-control-height); font-size: var(--mc-text-xl); font-family: var(--mc-font-display); } .mc-quick .mc-affix { font-size: var(--mc-text-lg); } .mc-quick__hint { margin-top: auto; border-top: 1px solid var(--mc-border); padding-top: var(--mc-space-4); } .mc-quick .mc-eyebrow { color: var(--mc-text-accent); } .mc-quick .mc-eyebrow::before { background: var(--mc-c-clay-600); } .mc-results { padding: var(--mc-space-6) var(--mc-space-8) var(--mc-space-8); background: var(--mc-surface-brand); color: var(--mc-text-on-brand); align-self: stretch; container-type: inline-size; container-name: mcres; } .mc-results .mc-field { background: var(--mc-on-brand-field-bg); border-color: var(--mc-on-brand-border); color: var(--mc-text-on-brand); } .mc-results .mc-field:focus-visible { border-color: var(--mc-c-green-300); box-shadow: var(--mc-focus-ring-inverse); } .mc-results .mc-affix { background: var(--mc-on-brand-field-bg); border-color: var(--mc-on-brand-border); color: var(--mc-c-green-200); } .mc-eyebrow { display: flex; align-items: center; gap: var(--mc-space-2); margin-bottom: var(--mc-space-6); font-size: var(--mc-text-2xs); font-weight: var(--mc-weight-semibold); letter-spacing: var(--mc-tracking-wide); text-transform: uppercase; color: var(--mc-c-green-200); } .mc-eyebrow::before { content: ""; display: block; width: 1.5rem; height: 1px; background: var(--mc-c-green-300); } .mc-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-space-6) var(--mc-space-5); } .mc-figure__label { display: block; font-size: var(--mc-text-2xs); font-weight: var(--mc-weight-semibold); letter-spacing: var(--mc-tracking-label); text-transform: uppercase; color: var(--mc-c-green-200); margin-bottom: var(--mc-space-1); } .mc-figure__value { display: block; font-family: var(--mc-font-display); font-size: min(var(--mc-text-figure), 13cqi); line-height: var(--mc-leading-tight); font-weight: var(--mc-weight-semibold); letter-spacing: var(--mc-tracking-tight); font-variant-numeric: tabular-nums; } .mc-figure__value--empty { font-family: var(--mc-font-sans); font-size: var(--mc-text-sm); font-weight: var(--mc-weight-regular); color: var(--mc-c-green-200); line-height: var(--mc-leading-snug); } .mc-subline { display: flex; justify-content: space-between; gap: var(--mc-space-4); font-size: var(--mc-text-sm); color: var(--mc-text-on-brand-muted); margin: var(--mc-space-6) 0 var(--mc-space-5); padding-top: var(--mc-space-4); border-top: 1px solid var(--mc-on-brand-rule); } .mc-subline strong { font-weight: var(--mc-weight-semibold); color: var(--mc-c-paper); font-variant-numeric: tabular-nums; } .mc-badge { display: inline-flex; align-items: center; gap: var(--mc-space-2); padding: var(--mc-space-2) var(--mc-space-4); border-radius: var(--mc-radius-pill); border: 1px solid transparent; font-size: var(--mc-text-sm); font-weight: var(--mc-weight-semibold); } .mc-badge[data-tone="good"] { background: var(--mc-status-good-bg); color: var(--mc-status-good-fg); border-color: var(--mc-status-good-bg); } .mc-badge[data-tone="watch"] { background: var(--mc-status-watch-bg); color: var(--mc-status-watch-fg); border-color: var(--mc-status-watch-bg); } .mc-badge[data-tone="alert"] { background: var(--mc-status-alert-bg); color: var(--mc-status-alert-fg); border-color: var(--mc-status-alert-bg); } .mc-badge[data-tone="none"] { background: var(--mc-on-brand-field-bg); color: var(--mc-c-green-200); border-color: var(--mc-on-brand-border); } @container mcres (max-width: 22rem) { .mc-figures { grid-template-columns: 1fr; gap: var(--mc-space-4); } } .mc-method { margin-top: var(--mc-space-6); padding-top: var(--mc-space-6); border-top: 1px solid var(--mc-on-brand-rule); } .mc-segmented { display: flex; gap: var(--mc-space-1); padding: var(--mc-space-1); background: var(--mc-on-brand-field-bg); border-radius: var(--mc-radius-md); margin-bottom: var(--mc-space-4); } .mc-segmented button { flex: 1 1 0; min-width: 0; min-height: 2.5rem; padding: var(--mc-space-1); line-height: 1.2; background: transparent; color: var(--mc-text-on-brand-muted); border: 0; border-radius: var(--mc-radius-sm); font-size: var(--mc-text-xs); font-weight: var(--mc-weight-semibold); cursor: pointer; transition: background var(--mc-duration) var(--mc-ease), color var(--mc-duration) var(--mc-ease); } .mc-segmented button[aria-pressed="true"] { background: var(--mc-c-paper); color: var(--mc-c-green-800); } .mc-segmented button:focus-visible { outline: none; box-shadow: var(--mc-focus-ring-inverse); } .mc-method label { display: block; font-size: var(--mc-text-xs); font-weight: var(--mc-weight-medium); color: var(--mc-text-on-brand-muted); margin-bottom: var(--mc-space-2); } .mc-method .mc-field { height: var(--mc-control-height); font-size: var(--mc-text-md); } .mc-suggest { display: flex; flex-wrap: wrap; gap: var(--mc-space-2); margin-top: var(--mc-space-3); } .mc-suggest button { min-height: 2.25rem; padding: 0 var(--mc-space-3); background: transparent; color: var(--mc-c-green-200); border: 1px solid var(--mc-on-brand-border); border-radius: var(--mc-radius-pill); font-size: var(--mc-text-xs); cursor: pointer; font-variant-numeric: tabular-nums; } .mc-suggest button:hover { background: var(--mc-on-brand-field-bg); color: var(--mc-c-paper); } .mc-suggest button:focus-visible { outline: none; box-shadow: var(--mc-focus-ring-inverse); } .mc-toggle { display: flex; align-items: center; gap: var(--mc-space-2); margin-top: var(--mc-space-4); font-size: var(--mc-text-xs); color: var(--mc-text-on-brand-muted); cursor: pointer; } .mc-toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--mc-c-green-300); cursor: pointer; } .mc-disclaimer { font-size: var(--mc-text-2xs); line-height: var(--mc-leading-snug); color: var(--mc-c-green-200); margin-top: var(--mc-space-6); } .mc-excluded { margin-top: var(--mc-space-4); font-size: var(--mc-text-xs); } .mc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @container mccalc (max-width: 62rem) { .mc-calc__grid { grid-template-columns: 1fr; } .mc-calc__form { border-right: 0; border-bottom: 1px solid var(--mc-c-oat); } } @container mcform (max-width: 39rem) { .mc-row--head { display: none; } .mc-row--item { grid-template-columns: repeat(3, minmax(0, 1fr)) 2.75rem; gap: var(--mc-space-2); padding: var(--mc-space-4) 0; } .mc-row__name { grid-column: 1 / 4; grid-row: 1; } .mc-row__remove { grid-column: 4 / -1; grid-row: 1; justify-self: end; } .mc-row__purchase { grid-column: 1 / -1; grid-row: 2; } .mc-row__used { grid-column: 1 / 3; grid-row: 3; } .mc-row__yield { grid-column: 3 / -1; grid-row: 3; } .mc-row__cost { grid-column: 1 / -1; grid-row: 4; text-align: right; } .mc-extras { grid-template-columns: 1fr; } .mc-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-space-5) var(--mc-space-4); } } @container mccalc (max-width: 26rem) { .mc-calc__head, .mc-calc__form, .mc-results { padding-left: var(--mc-space-4); padding-right: var(--mc-space-4); } .mc-segmented { flex-direction: column; } .mc-figures { grid-template-columns: 1fr; gap: var(--mc-space-4); } } .mc-sticky { display: none; } @media (max-width: 56.25rem) { .mc-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--mc-surface-brand); color: var(--mc-text-on-brand); box-shadow: var(--mc-shadow-raised); padding-bottom: env(safe-area-inset-bottom, 0); } .mc-sticky__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-space-4); width: 100%; min-height: 4rem; padding: var(--mc-space-3) var(--mc-space-5); background: transparent; border: 0; color: inherit; cursor: pointer; text-align: left; } .mc-sticky__btn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring-inverse); } .mc-sticky__cell { display: flex; flex-direction: column; gap: 2px; } .mc-sticky__label { font-size: var(--mc-text-2xs); letter-spacing: var(--mc-tracking-label); text-transform: uppercase; color: var(--mc-c-green-200); } .mc-sticky__value { font-family: var(--mc-font-display); font-size: var(--mc-text-figure-sm); font-weight: var(--mc-weight-semibold); font-variant-numeric: tabular-nums; } .mc-sticky__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mc-duration-slow) var(--mc-ease); } .mc-sticky__panel > div { overflow: hidden; } .mc-sticky[data-open="true"] .mc-sticky__panel { grid-template-rows: 1fr; } .mc-sticky__inner { padding: 0 var(--mc-space-5) var(--mc-space-5); border-top: 1px solid var(--mc-on-brand-rule); } .mc-calc { margin-bottom: 5rem; } } @media (forced-colors: active) { .mc-calc { border: 1px solid CanvasText; } .mc-badge { border: 1px solid CanvasText; } .mc-segmented button[aria-pressed="true"] { outline: 2px solid CanvasText; } }