/* NutriZaika pocket calculator (brief of 10 Nov 2026): one device in the middle of the page, at most 400 px wide.
   Light: brushed aluminium with white keys; dark mode (assets/dark.css) swaps the --pc-* colours for graphite.
   Keys have min-heights, never fixed heights, so 200% text makes them taller instead of cutting words. */
.calc-lede{margin-top:16px;max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.5;color:var(--ink-2)}
.calc-sec{padding-top:clamp(8px,1.5vw,16px);padding-bottom:clamp(36px,5vw,64px)}
.calc-nojs{margin:16px auto 0;max-width:400px;text-align:center;color:var(--ink-2)}
.calc-cta-in{display:grid;justify-items:start;gap:20px;padding:clamp(24px,4vw,44px);border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.calc-cta-in .h2{max-width:18em}

.pc{--pc-body:#D8DBDF;--pc-edge:#BFC3C8;--pc-top:#ECEEF0;--pc-print:#4B5560;
  --pc-num:#FCFCFB;--pc-num-lip:#C3C7CC;--pc-fn:#EDEFF1;--pc-fn-lip:#BABFC5;--pc-ink:#1B2523;--pc-quiet:#5A6663;
  --pc-eq:var(--gold);--pc-eq-lip:#A8851F;--pc-eq-ink:#14201E;--pc-clr:#A25B44;--pc-clr-lip:#7C4433;--pc-clr-ink:#FFFFFF;
  --pc-off:#C9CDD2;--pc-on:#0E8A54;--pc-solar:#3A2E2B;--pc-solar-line:#5A4A45;
  --pc-lcd:#C7D0BE;--pc-lcd-edge:#A9B3A1;--pc-lcd-top:#B9C3B0;--pc-lcd-ink:#1A241E;
  display:grid;gap:10px;width:100%;max-width:400px;margin-inline:auto;padding:14px;border-radius:28px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.012) 1px 3px),var(--pc-body);
  border:1px solid var(--pc-edge);border-top-color:var(--pc-top);color:var(--pc-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 30px 50px -30px rgba(19,32,30,.55),0 10px 18px -12px rgba(19,32,30,.35)}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.pc-brand{font:600 13px/1.2 var(--f-body);letter-spacing:.01em;color:var(--pc-print)}
.pc-solar{display:flex;justify-content:space-evenly;width:64px;height:16px;border-radius:3px;background:var(--pc-solar);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.pc-solar i{width:1px;background:var(--pc-solar-line)}

.pc-lcd{min-width:0;padding:12px;border-radius:12px;background:var(--pc-lcd);border:1px solid var(--pc-lcd-edge);border-top-color:var(--pc-lcd-top);
  color:var(--pc-lcd-ink);box-shadow:inset 0 2px 5px rgba(0,0,0,.14)}
.pc-lcd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:2.6em;font:500 13px/1.3 var(--f-body)}
.pc-line{min-width:0}
.pc-unit{flex:none;font-weight:600;white-space:nowrap}
.pc-digits{display:flex;justify-content:flex-end;margin-top:6px}
.pc-digits svg{display:block;width:100%;max-width:243px;height:auto}
.pc-digits polygon,.pc-digits circle{fill:var(--pc-lcd-ink);opacity:.07}
.pc-digits .on{opacity:1}

/* key rows wrap when the text is large (200%), so keys grow and words are never cut */
.pc-calcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,4.6em),1fr));gap:8px;font-size:12px}
.pc-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 16px 8px;scroll-padding-inline:16px;overscroll-behavior-x:contain}
.pc-chips::-webkit-scrollbar{display:none}
.pc-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,3.6em),1fr));gap:8px;font-size:16px}
.pc-pad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}

/* every key: a face raised 3 px over a darker lip; pressed, the face goes down 2 px; a key that is on stays down */
.pk{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;margin:0;padding:8px 6px;
  border:0;border-radius:11px;background:var(--pc-num);color:var(--pc-ink);font:600 14px/1.15 var(--f-body);text-align:center;cursor:pointer;
  --lip:var(--pc-num-lip);box-shadow:0 3px 0 var(--lip),0 5px 8px -5px rgba(0,0,0,.4);transform:translateY(0);
  transition:transform .12s ease-out,box-shadow .12s ease-out;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.pk:active,.pk.down,.pk[aria-pressed="true"]{transform:translateY(2px);box-shadow:0 1px 0 var(--lip),0 2px 4px -3px rgba(0,0,0,.4)}
.pk:focus-visible{outline:3px solid var(--pc-on);outline-offset:3px}
.pk-fn,.pk-calc,.pk-chip{background:var(--pc-fn);--lip:var(--pc-fn-lip)}
.pk-calc,.pk-chip,.pk-num{padding-top:14px}
.pk-calc::before,.pk-chip::before,.pk-num::before{content:"";position:absolute;top:6px;left:6px;width:6px;height:6px;border-radius:50%;background:var(--pc-off);transition:background .15s,box-shadow .15s}
.pk[aria-pressed="true"]::before{background:var(--pc-on);box-shadow:0 0 6px var(--pc-on)}
.pk-calc{min-height:52px;font-size:1em;line-height:1.2;padding-inline:8px}
.pk-chip{flex:none;padding:12px 16px 10px 20px;white-space:nowrap}
.pk-gap{margin-left:8px}
.pk-num{min-height:52px}
.pk-n{font-size:16px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.pk-u{font-size:12px;font-weight:500;line-height:1.1;color:var(--pc-quiet)}
.pk-d{min-height:52px;font:700 20px/1 var(--f-tape)}
.pk-del,.pk-clr{min-height:52px;font-size:13px}
.pk-clr{background:var(--pc-clr);color:var(--pc-clr-ink);--lip:var(--pc-clr-lip)}
.pk-eq{grid-column:4;grid-row:3/span 2;background:var(--pc-eq);color:var(--pc-eq-ink);--lip:var(--pc-eq-lip);font:700 24px/1 var(--f-tape)}
.pk-zero{grid-column:1/span 2}

.pc-notes{display:grid;gap:6px;max-width:400px;margin:18px auto 0;text-align:center;font-size:.84rem;line-height:1.45;color:var(--ink-3)}
.pc-notes [hidden]{display:none}
@media(prefers-reduced-motion:reduce){.pk{transition:none}}
@media(forced-colors:active){.pk{border:1px solid ButtonText}.pk[aria-pressed="true"]{outline:2px solid Highlight}}
