/* Be NutriSavvy / Se NutriSavvy Calculators — shared styles (both sites)
   Colors: WHO = pink (#d879a1), FOOD = orange (#f27405), NUTRITION = green (#7faf42) — the 500 values. */
.bns-calc{
  --food-900:#8a3f00; --food-700:#c95d00; --food-500:#f27405; --food-300:#f9b67f; --food-100:#fde6d2; --food-50:#fff6ee; --food-line:#f7d3b3; --food-field:#e06a03;
  --who-900:#7a2e4f;  --who-700:#b4527c;  --who-500:#d879a1;  --who-300:#ecb8ce;  --who-100:#f9e6ee;  --who-50:#fdf4f8;  --who-line:#f0d3df; --who-field:#cc6c95;
  --nut-900:#3d5a1a;  --nut-700:#5e8a2c;  --nut-500:#7faf42;  --nut-300:#bfd89e;  --nut-100:#edf5e1;  --nut-50:#f7fbf1;  --nut-line:#dbe8c8; --nut-field:#6c9a35; --nut-tab:#578028;

  --c900:var(--nut-900); --c700:var(--nut-700); --c500:var(--nut-500); --c300:var(--nut-300); --c100:var(--nut-100); --c50:var(--nut-50); --line:var(--nut-line); --field:var(--nut-field);
  --ink:#2a2a2a; --muted:#666; --card:#ffffff;
  font-family:inherit; color:var(--ink); max-width:1400px; margin:0 auto; line-height:1.45;
  container-type:inline-size; container-name:bnscalc;   /* layout responds to the calculator's own width */
  color-scheme:light;   /* keep dropdown lists and number arrows light, even when the device is in dark mode */
}
/* Each section re-points the working tokens at its own color family */
.bns-calc .bns-food, .bns-calc .bns-food-tone{--c900:var(--food-900);--c700:var(--food-700);--c500:var(--food-500);--c300:var(--food-300);--c100:var(--food-100);--c50:var(--food-50);--line:var(--food-line);--field:var(--food-field)}
.bns-calc .bns-who,  .bns-calc .bns-who-tone {--c900:var(--who-900); --c700:var(--who-700); --c500:var(--who-500); --c300:var(--who-300); --c100:var(--who-100); --c50:var(--who-50); --line:var(--who-line); --field:var(--who-field)}
.bns-calc .bns-nutr {--c900:var(--nut-900);--c700:var(--nut-700);--c500:var(--nut-500);--c300:var(--nut-300);--c100:var(--nut-100);--c50:var(--nut-50);--line:var(--nut-line);--field:var(--nut-field)}
.bns-calc .bns-panel{background:var(--c50);border:1px solid var(--line);border-left:5px solid var(--c500);border-radius:14px;padding:16px 18px}
.bns-calc *{box-sizing:border-box}
.bns-calc .bns-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 2px 10px rgba(61,90,26,.06)}
.bns-calc .bns-sub{margin:0 0 20px;color:#000}   /* no font-size: uses the page's own paragraph size */
.bns-calc .bns-step{margin:0 0 22px}
.bns-calc .bns-step-title{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--c900);margin:0 0 10px;font-size:1.02rem}
.bns-calc .bns-num{width:26px;height:26px;border-radius:50%;background:var(--c500);color:#000;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;flex:none}
.bns-calc label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em}
.bns-calc select,.bns-calc input[type=number],.bns-calc input[type=text],.bns-calc input[type=search]{
  width:100%;padding:10px 12px;border:1px solid var(--field);border-radius:10px;background:#fff;font:inherit;color:var(--ink);min-height:42px;height:auto;line-height:1.3;margin:0;box-shadow:none;vertical-align:middle}
/* Our own dropdown arrow, since some themes remove the browser's */
.bns-calc select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:36px;cursor:pointer;text-overflow:ellipsis;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;background-size:12px 8px}
/* Neutralize theme button styles (letter-spacing, uppercase, shadows) */
.bns-calc button{letter-spacing:normal;text-transform:none;line-height:1.2;box-shadow:none;text-shadow:none;min-height:0;width:auto;margin:0}
.bns-calc select:focus,.bns-calc input:focus{outline:2px solid var(--c700);outline-offset:1px;border-color:var(--c700)}
.bns-calc button:focus-visible,.bns-calc a:focus-visible{outline:3px solid var(--c700);outline-offset:2px}
.bns-calc .bns-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.bns-calc .bns-member{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;position:relative;
  container-type:inline-size;container-name:bnsmember}   /* each person's row adapts to its own width */
.bns-calc .bns-member-in{display:grid;gap:10px;align-items:end;
  grid-template-columns:minmax(80px,1fr) minmax(150px,1.1fr) minmax(138px,.9fr) minmax(180px,1.2fr) auto}
.bns-calc .bns-member .bns-hide{visibility:hidden}
.bns-calc .bns-lbl-who::before{content:attr(data-label)}   /* label text comes from the language file */
.bns-calc input[type=search]{-webkit-appearance:none;appearance:none}
.bns-calc input[type=search]::-webkit-search-cancel-button,.bns-calc input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none}
.bns-calc .bns-x{border:0;background:transparent;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:8px;border-radius:8px;min-height:42px}
.bns-calc .bns-x:hover{background:var(--c100);color:#b23b3b}
.bns-calc .bns-btn{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;background:#fff;color:var(--c700);border:1.5px dashed var(--c500)}
.bns-calc .bns-btn:hover{background:var(--c100)}
.bns-calc .bns-btn[disabled]{opacity:.55;cursor:default}
.bns-calc .bns-portions-head{margin:16px 0 8px}
.bns-calc .bns-portions-title{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}   /* same style as the field labels */
.bns-calc .bns-portion{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.bns-calc .bns-portion-who{font-weight:700}
.bns-calc .bns-portion-meta{display:block;font-size:.82rem;color:var(--muted);font-weight:400}
.bns-calc .bns-portion-amt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bns-calc .bns-portion-amt input{width:90px}
.bns-calc .bns-portion-amt span{font-size:.85rem;color:var(--muted);white-space:nowrap}
.bns-calc .bns-portion-amt .bns-g{min-width:64px}
.bns-calc .bns-hint{font-size:.82rem;color:var(--muted);margin:2px 0 0}
.bns-calc .bns-toolbar{margin-bottom:12px}
.bns-calc .bns-tabs{display:flex;flex-wrap:wrap;gap:6px}
.bns-calc .bns-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:.88rem;cursor:pointer;color:var(--ink)}
.bns-calc .bns-tab[aria-selected=true]{background:var(--nut-tab);border-color:var(--nut-tab);color:#fff}
.bns-calc .bns-summary{background:var(--c100);border-radius:12px;padding:12px 14px;font-size:.92rem;margin:12px 0 16px;color:#000}
.bns-calc .bns-summary strong{color:#000}
.bns-calc .bns-group{margin:0 0 16px}
.bns-calc .bns-group h4{margin:0 0 8px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bns-calc .bns-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.bns-calc a.bns-nut{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:border-color .15s,transform .15s,box-shadow .15s}
.bns-calc a.bns-nut:hover,.bns-calc a.bns-nut:focus{border-color:var(--c500);transform:translateY(-1px);box-shadow:0 3px 10px rgba(61,90,26,.12)}
.bns-calc .bns-nut-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
.bns-calc .bns-nut-name{font-weight:700;font-size:.92rem}
.bns-calc .bns-nut-name::after{content:" ›";color:var(--c500)}
.bns-calc .bns-nut-val{font-weight:800;font-size:1.05rem;color:var(--c900);white-space:nowrap}
.bns-calc .bns-bar{height:7px;background:var(--c100);border-radius:999px;margin:8px 0 5px;overflow:hidden}
.bns-calc .bns-bar span{display:block;height:100%;border-radius:999px;background:var(--c500)}
.bns-calc .bns-hi .bns-bar span{background:var(--c700)}
.bns-calc .bns-lo .bns-bar span{background:var(--c300)}
.bns-calc .bns-neutral .bns-bar span{background:#bcaaa4}
.bns-calc .bns-nodri .bns-bar{background:repeating-linear-gradient(90deg,var(--c100) 0 6px,transparent 6px 10px)}
.bns-calc .bns-nut-note{font-size:.78rem;color:var(--muted)}
.bns-calc .bns-foot a{color:var(--nut-900);text-decoration:underline}   /* 7.9:1 on white */
.bns-calc .bns-foot{font-size:.78rem;color:var(--muted);margin:16px 0 0}
/* ===== RESPONSIVE (by the calculator's own width) =====
   Results columns: phone 1 · large phone 2 · tablet portrait 3 · tablet landscape 4 · laptop 5 · desktop 6 */
@container bnscalc (max-width:479px){ .bns-calc .bns-grid{grid-template-columns:1fr} }
@container bnscalc (min-width:480px) and (max-width:659px){ .bns-calc .bns-grid{grid-template-columns:repeat(2,1fr)} }
@container bnscalc (min-width:660px) and (max-width:859px){ .bns-calc .bns-grid{grid-template-columns:repeat(3,1fr)} }
@container bnscalc (min-width:860px) and (max-width:1079px){ .bns-calc .bns-grid{grid-template-columns:repeat(4,1fr)} }
@container bnscalc (min-width:1080px) and (max-width:1299px){ .bns-calc .bns-grid{grid-template-columns:repeat(5,1fr)} }
@container bnscalc (min-width:1300px){ .bns-calc .bns-grid{grid-template-columns:repeat(6,1fr)} }

@container bnscalc (max-width:519px){
  .bns-calc .bns-card{padding:14px}
  .bns-calc .bns-panel{padding:14px 12px 14px 14px}
  /* Portions: person on top, amount underneath — nothing runs off the edge */
  .bns-calc .bns-portion{grid-template-columns:1fr;gap:8px}
  .bns-calc .bns-portion-amt input{width:100px}
}
.bns-calc .bns-controls{container-type:inline-size;container-name:bnsctl}
/* Type + measure dropdowns stack when there isn't room for both side by side (long options like "tallos (medianos)") */
@container bnsctl (max-width:499px){ .bns-calc .bns-row{grid-template-columns:1fr} }
/* Very narrow phones: a little less padding so long type names ("Red/orange/yellow, cooked") fit */
@container bnsctl (max-width:330px){ .bns-calc .bns-row select{padding-left:10px;padding-right:28px;background-position:right 9px center;font-size:.92em} }

/* Who's eating rows: one line when there's room, 2 fields per line on tablets, one per line on phones */
@container bnsmember (max-width:629px){
  .bns-calc .bns-member-in{grid-template-columns:1fr 1fr;padding-right:32px}
  .bns-calc .bns-member .bns-x{position:absolute;top:4px;right:4px}
  .bns-calc .bns-member .bns-hide{display:none}
}
@container bnsmember (max-width:379px){ .bns-calc .bns-member-in{grid-template-columns:1fr} }

/* ===== SECTIONS 1 + 2 SIDE BY SIDE (wide screens) =====
   Each person's row in "Who's eating?" lines up with their row in "Their portions". */
.bns-calc .bns-who-hint{display:none}
@container bnscalc (min-width:1180px){
  .bns-calc .bns-pair{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:16px;row-gap:10px;margin:0 0 22px}
  .bns-calc .bns-pair > .bns-panel{margin:0;display:grid;grid-template-rows:subgrid;row-gap:10px}
  .bns-calc .bns-pair .bns-members,.bns-calc .bns-pair .bns-portions{display:contents}
  .bns-calc .bns-pair .bns-step-title{margin:0}
  .bns-calc .bns-pair .bns-member,.bns-calc .bns-pair .bns-portion{margin:0}
  .bns-calc .bns-pair .bns-who-hint{display:block;margin:0;font-size:.82rem;color:var(--muted)}
  .bns-calc .bns-pair .bns-portions-head{margin:0}
  /* type + measure move to the bottom row, beside "Add a family member" */
  .bns-calc .bns-pair .bns-controls{grid-row:-2 / -1;margin:0}
  .bns-calc .bns-pair .bns-addrow{margin:0;align-self:start}
}
/* Browsers without subgrid: still side by side, just without row alignment */
@supports not (grid-template-rows:subgrid){
  @container bnscalc (min-width:1180px){
    .bns-calc .bns-pair{align-items:start}
    .bns-calc .bns-pair > .bns-panel{display:block;grid-row:auto !important}
    .bns-calc .bns-pair .bns-members,.bns-calc .bns-pair .bns-portions{display:block}
    .bns-calc .bns-pair .bns-member,.bns-calc .bns-pair .bns-portion{margin-bottom:10px}
    .bns-calc .bns-pair .bns-controls{margin-top:12px}
  }
}

/* Older browsers without container queries fall back to screen-width rules */
@supports not (container-type:inline-size){
  @media (max-width:700px){
    .bns-calc .bns-member-in{grid-template-columns:1fr 1fr;padding-right:32px}
    .bns-calc .bns-member .bns-x{position:absolute;top:4px;right:4px}
    .bns-calc .bns-member .bns-hide{display:none}
    .bns-calc .bns-portion{grid-template-columns:1fr}
  }
  @media (max-width:480px){ .bns-calc .bns-grid,.bns-calc .bns-row{grid-template-columns:1fr} }
}
.bns-calc .bns-missing{padding:16px;border:1px dashed #ccc;border-radius:12px;color:#666}

/* Screen-reader-only text, and calmer motion for people who ask their device for it */
.bns-calc .bns-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){ .bns-calc a.bns-nut{transition:none} .bns-calc a.bns-nut:hover,.bns-calc a.bns-nut:focus{transform:none} }

/* ===== NUTRIENT CALCULATORS (one nutrient per page, and the all-nutrients members calculator) ===== */
.bns-calc .bns-nut-hint{margin:0 0 12px;font-size:.9rem;color:var(--muted)}
.bns-calc .bns-addrow{margin-top:4px}
.bns-calc .bns-need{display:grid;grid-template-columns:minmax(140px,.7fr) 3fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.bns-calc .bns-need-who{font-weight:700}
.bns-calc .bns-tiles{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.bns-calc .bns-tile{background:var(--c100);border-radius:10px;padding:10px 12px;color:var(--c900)}
.bns-calc .bns-tile-label{font-size:.78rem;font-weight:600;line-height:1.3;color:var(--muted)}
.bns-calc .bns-tile-val{font-weight:800;font-size:1.25rem;line-height:1.25;margin-top:2px;color:var(--c900)}
.bns-calc .bns-tile-note{font-size:.78rem;color:var(--muted);margin-top:2px}
/* The upper limit uses the orange "food" tones so it stands apart from the daily need */
.bns-calc .bns-tile-ul{--c100:var(--who-100);--c900:var(--who-900)}
.bns-calc .bns-tile-none{background:#f5f5f5;color:#555}
.bns-calc .bns-tile-none .bns-tile-val{color:#777}
.bns-calc .bns-ul-note{margin:0 0 16px;padding:12px 14px;border-left:4px solid var(--who-500);background:var(--who-50);border-radius:0 10px 10px 0;font-size:.9rem;color:#000}
.bns-calc .bns-terms-box{margin:0 0 6px}
.bns-calc .bns-terms-title{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 6px}
.bns-calc .bns-terms{margin:0;font-size:.88rem}
.bns-calc .bns-terms dt{font-weight:700;margin-top:8px;color:#000}
.bns-calc .bns-terms dd{margin:2px 0 0;color:var(--ink)}
.bns-calc .bns-login{padding:16px;border:1px dashed var(--nut-500);border-radius:12px;background:var(--nut-50)}
/* All-nutrients table: a real table on wide screens, stacked rows on narrow ones */
.bns-calc .bns-mtable{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bns-calc .bns-mrow{display:grid;grid-template-columns:1.3fr 1fr 1.1fr 1.2fr;gap:8px 12px;padding:10px 14px;border-top:1px solid var(--line);align-items:baseline}
.bns-calc .bns-mrow:first-child{border-top:0}
.bns-calc .bns-mhead{background:var(--c100);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c900)}
.bns-calc .bns-mname{font-weight:700}
.bns-calc .bns-mname a{color:var(--nut-900);text-decoration:underline}
.bns-calc .bns-mul{color:var(--who-900)}
.bns-calc .bns-tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px;margin-left:2px}
.bns-calc .bns-dash{color:#777}
@container bnscalc (max-width:699px){
  .bns-calc .bns-need{grid-template-columns:1fr}
  .bns-calc .bns-tiles{grid-template-columns:1fr}
  .bns-calc .bns-mhead{display:none}
  .bns-calc .bns-mrow{grid-template-columns:1fr 1fr}
  .bns-calc .bns-mrow .bns-mname{grid-column:1 / -1;font-size:1rem}
  .bns-calc .bns-mcell[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
  .bns-calc .bns-mrow .bns-mul{grid-column:1 / -1}
}
@supports not (container-type:inline-size){
  @media (max-width:700px){
    .bns-calc .bns-need,.bns-calc .bns-tiles{grid-template-columns:1fr}
    .bns-calc .bns-mhead{display:none}
    .bns-calc .bns-mrow{grid-template-columns:1fr 1fr}
    .bns-calc .bns-mrow .bns-mname{grid-column:1 / -1}
    .bns-calc .bns-mcell[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:600;color:var(--muted)}
  }
}
.bns-calc .bns-ul-note p{margin:0}
.bns-calc .bns-ul-note p + p{margin-top:8px}
.bns-calc .bns-ul-note a{color:var(--who-900);text-decoration:underline}

/* protein: weight row under each person, and a fourth tile */
.bns-calc .bns-member-extra{display:grid;gap:10px;align-items:end;margin-top:10px;grid-template-columns:minmax(110px,1fr) minmax(90px,.6fr) minmax(150px,1fr) 1fr}
.bns-calc .bns-member-extra input,.bns-calc .bns-member-extra select{width:100%;box-sizing:border-box}
.bns-calc .bns-tiles.bns-tiles-4{grid-template-columns:repeat(4,1fr)}
.bns-calc .bns-tile sup{font-size:.6em;margin-left:2px}
.bns-calc .bns-foot-x{margin-bottom:6px}
.bns-calc .bns-foot-x a{color:inherit;text-decoration:underline}
@container bnscalc (max-width:979px){ .bns-calc .bns-tiles.bns-tiles-4{grid-template-columns:1fr 1fr} }
@container bnscalc (max-width:699px){ .bns-calc .bns-tiles.bns-tiles-4{grid-template-columns:1fr} }
@container bnsmember (max-width:479px){ .bns-calc .bns-member-extra{grid-template-columns:1.3fr 1fr} .bns-calc .bns-member-extra > :nth-child(3){grid-column:1 / -1} }

/* B12: the intake source dropdown lines up with the Name field above it */
.bns-calc .bns-member-extra:has([data-f=src]){grid-template-columns:minmax(80px,1fr) minmax(150px,1.1fr) minmax(138px,.9fr) minmax(180px,1.2fr) var(--bns-x-w,32px)}
.bns-calc .bns-member-extra:has([data-f=src]) > div{grid-column:1 / span 2}   /* as wide as Name + Age */
@container bnsmember (max-width:629px){ .bns-calc .bns-member-extra:has([data-f=src]){grid-template-columns:1fr 1fr;padding-right:32px} }
@container bnsmember (max-width:379px){ .bns-calc .bns-member-extra:has([data-f=src]){grid-template-columns:1fr} .bns-calc .bns-member-extra:has([data-f=src]) > div{grid-column:1 / -1} }
/* result tiles: labels may wrap, but the numbers always line up across a row */
.bns-calc .bns-tiles{row-gap:0}
.bns-calc .bns-tile{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;margin-bottom:10px;align-content:start}
.bns-calc .bns-tiles{margin-bottom:-10px}