/* Scale stepper + editor (see shared/scale-stepper.js). Unscoped on purpose: the stepper shows up in plan.html's own modals and in the Library tab's scoped modals, and the editor is portaled to . Every property that plan.css's bare `button` / `input` rules would otherwise leak in (padding, radius, margin, width) is set explicitly here. */ /* ── Stepper: [ − ] [ 1.0× ] [ + ] ─────────────────────────────────────── */ .scale-stepper { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; } .scale-stepper__step, .scale-stepper__value { box-sizing: border-box; height: 32px; margin: 0; padding: 0; font-family: "Nunito", sans-serif; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .scale-stepper__step { flex: 0 0 auto; width: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6)); border-radius: 10px; background: #fff; color: var(--text-header, #083463); font-size: 18px; font-weight: 800; box-shadow: 0 1px 2px rgba(8, 52, 99, 0.1); } .scale-stepper__step:hover:not(:disabled) { background: var(--accent, #1b6fd8); border-color: var(--accent, #1b6fd8); color: #fff; } .scale-stepper__step:active:not(:disabled) { transform: scale(0.94); } .scale-stepper__step:disabled, .scale-stepper__value:disabled { opacity: 0.45; cursor: not-allowed; } /* Reads as a field (white, bordered) so it looks typeable, not just a label. */ .scale-stepper__value { flex: 0 1 auto; min-width: 3.9rem; padding: 0 10px; border: 1.5px solid #d7e1ee; border-radius: 10px; background: #fff; color: var(--accent, #1b6fd8); font-size: 14px; font-weight: 900; text-align: center; white-space: nowrap; cursor: text; } .scale-stepper__value:hover:not(:disabled) { border-color: var(--accent, #1b6fd8); background: var(--ice-1, #f4fbff); } .scale-stepper__value[aria-expanded="true"] { border-color: var(--accent, #1b6fd8); box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.14); } .scale-stepper__step:focus-visible, .scale-stepper__value:focus-visible { outline: 2px solid var(--accent, #1b6fd8); outline-offset: 2px; } /* Compact: inside a dish card's control pill and the meal-detail header. */ .scale-stepper--sm { gap: 4px; } .scale-stepper--sm .scale-stepper__step, .scale-stepper--sm .scale-stepper__value { height: 28px; } .scale-stepper--sm .scale-stepper__step { width: 28px; font-size: 16px; border-radius: 8px; } .scale-stepper--sm .scale-stepper__value { min-width: 3.3rem; padding: 0 8px; font-size: 13px; border-radius: 8px; } /* Roomy: the ingredient / portion scaling panels, where it is the whole point. */ .scale-stepper--lg { gap: 10px; } .scale-stepper--lg .scale-stepper__step, .scale-stepper--lg .scale-stepper__value { height: 44px; } .scale-stepper--lg .scale-stepper__step { width: 44px; font-size: 22px; border-radius: 12px; } .scale-stepper--lg .scale-stepper__value { min-width: 6.2rem; font-size: 20px; border-radius: 12px; } /* Fingers, not cursors: bring the compact size up to a comfortable target. */ @media (pointer: coarse) { .scale-stepper--sm .scale-stepper__step, .scale-stepper--sm .scale-stepper__value { height: 36px; } .scale-stepper--sm .scale-stepper__step { width: 36px; } .scale-stepper--sm .scale-stepper__value { min-width: 3.6rem; font-size: 14px; } } /* Panel layout: the stepper centred under the panel title. */ .scale-panel-stepper { display: flex; justify-content: center; margin: 2px 0 12px; } /* ── Editor ──────────────────────────────────────────────────────────────── */ /* The backdrop is a full-screen, transparent catcher for outside taps. On phones it dims the page and centres the card near the top, clear of the on-screen keyboard. */ .scale-editor-backdrop { position: fixed; inset: 0; z-index: 1300; } .scale-editor-backdrop--sheet { display: flex; align-items: flex-start; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 12px 0; padding-top: max(14vh, calc(env(safe-area-inset-top) + 16px)); background: rgba(8, 52, 99, 0.38); } .scale-editor { position: absolute; box-sizing: border-box; width: min(280px, calc(100vw - 24px)); padding: 14px; border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6)); border-radius: 14px; background: #fff; box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.38); font-family: "Nunito", sans-serif; color: var(--text-main, #05223a); } .scale-editor-backdrop--sheet .scale-editor { position: relative; width: min(340px, 100%); } .scale-editor__title { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #6b7c93); } .scale-editor__field { position: relative; } .scale-editor__input { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 10px 34px 10px 14px; border: 1.5px solid #d7e1ee; border-radius: 12px; background: #fff; color: var(--text-header, #083463); font-family: inherit; /* 16px+ keeps iOS from zooming the page when the field takes focus. */ font-size: 24px; font-weight: 900; line-height: 1.2; text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .scale-editor__input:focus { outline: none; border-color: var(--accent, #1b6fd8); box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.14); } .scale-editor__input.is-invalid, .scale-editor__input.is-invalid:focus { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12); } .scale-editor__suffix { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-size: 18px; font-weight: 800; color: var(--muted, #6b7c93); pointer-events: none; } .scale-editor__hint { min-height: 1.4em; margin: 8px 2px 12px; font-size: 12px; line-height: 1.3; font-weight: 700; color: var(--muted, #6b7c93); text-align: center; } .scale-editor__hint.is-error { color: #c62828; } .scale-editor__presets { display: flex; gap: 6px; margin-bottom: 12px; } .scale-editor__preset { flex: 1; box-sizing: border-box; min-height: 38px; margin: 0; padding: 0; border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6)); border-radius: 10px; background: #fff; color: var(--text-main, #05223a); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .scale-editor__preset:hover { background: var(--ice-2, #e6f1ff); border-color: var(--accent, #1b6fd8); color: var(--accent, #1b6fd8); } .scale-editor__preset.is-active { background: var(--accent, #1b6fd8); border-color: var(--accent, #1b6fd8); color: #fff; } .scale-editor__actions { display: flex; gap: 8px; } .scale-editor__btn { flex: 1; box-sizing: border-box; min-height: 40px; margin: 0; padding: 0 14px; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .scale-editor__btn--ghost { border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6)); background: #fff; color: var(--muted, #6b7c93); } .scale-editor__btn--ghost:hover { background: var(--ice-2, #e6f1ff); color: var(--text-main, #05223a); } .scale-editor__btn--primary { border: 1px solid var(--accent, #1b6fd8); background: var(--accent, #1b6fd8); color: #fff; } .scale-editor__btn--primary:hover:not(:disabled) { background: #155bb5; border-color: #155bb5; } .scale-editor__btn--primary:disabled { opacity: 0.45; cursor: not-allowed; } .scale-editor__preset:focus-visible, .scale-editor__btn:focus-visible { outline: 2px solid var(--accent, #1b6fd8); outline-offset: 2px; }