/* Nutrition tab and setup (2026-10-31). Tokens from design-tokens.css; bones from the setup wizard.
   taste-gate: allow T7 because docs/design/FRANK-DESIGN.md mandates Frank's paper canvas and serif headings. */
.nt-page { display: grid; gap: 28px; max-width: 900px; }
.nt-summary .details > div { grid-template-columns: 150px minmax(0, 1fr); }
.nt-lede { margin: 0; }
.nt-empty { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: center; }
.nt-empty svg { width: 96px; height: 96px; color: var(--green); }
.nt-empty h1 { margin-bottom: 8px; }
.nt-empty p { margin: 0 0 16px; }
.nt-empty .nt-start { display: inline-flex; }
.nt-start { align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--button-radius); background: var(--green); color: var(--white); text-decoration: none; font-weight: 600; font-size: 14px; }
.nt-start:hover { background: var(--green-hover); }
.nt-page > .nt-start { display: inline-flex; justify-self: start; }
.nt-summary .details dd, .nt-review dd { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; overflow-wrap: anywhere; }
.nt-summary .details dd > span, .nt-review dd > span { min-width: 0; }
.nt-summary .details .text-button, .nt-review .text-button { flex: none; min-height: 44px; padding: 8px 10px; margin: -10px -10px -10px 0; }
.nt-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nt-modes li { background: var(--sage); border-radius: var(--button-radius); padding: 10px 14px; font-size: 14px; }
.nt-week { display: grid; gap: 0; }
.nt-week .nt-day { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.nt-week .nt-day dt { color: var(--muted); }
.nt-week .nt-day dd { margin: 0; }
.nt-week .nt-day .nt-line { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.nt-source { font-size: 13px; color: var(--muted); max-width: 680px; }
.nt-form { gap: 18px; }
.nt-group { display: grid; gap: 10px; }
.nt-group legend { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-chip { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); font: inherit; font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; }
.nt-chip:hover { border-color: var(--green); }
.nt-chip[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); font-weight: 600; }
.nt-chip[aria-pressed="true"]::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--nt-tick) no-repeat center; }
.nt-chip.nt-more { border-style: dashed; color: var(--green); }
.nt-other { margin-top: 4px; }
.nt-why { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.nt-why li { padding-left: 14px; position: relative; color: var(--ink); }
.nt-why li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 2px; background: var(--green); border-radius: 1px; }
.nt-why strong { font-weight: 600; }
.nt-footer { font-size: 13px; color: var(--muted); margin: 0; }
.nt-seg { display: flex; width: max-content; max-width: 100%; padding: 2px; border: 1px solid var(--line); border-radius: var(--button-radius); background: transparent; margin: 0; }
.nt-seg label { display: flex; margin: 0; cursor: pointer; position: relative; font-weight: 400; }
.nt-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.nt-seg span { display: grid; place-items: center; min-height: 44px; padding: 8px 16px; border-radius: 7px; color: var(--ink); font-size: 15px; }
.nt-seg input:checked + span { background: var(--green); color: var(--white); font-weight: 600; }
.nt-seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.nt-help-button { background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-align: left; }
.nt-help-button:hover { color: var(--green); }
.nt-help-button[aria-expanded="true"] { color: var(--green); }
.nt-help { font-size: 15px; line-height: 1.55; max-width: 640px; display: grid; gap: 10px; }
.nt-help p { margin: 0; }
.nt-help a { color: var(--green); }
.nt-rows { display: grid; gap: 0; }
.nt-rows label.check { min-height: 48px; padding: 4px 10px; border-radius: var(--button-radius); font-size: 15px; gap: 12px; cursor: pointer; }
.nt-rows label.check:hover { background: var(--sage); }
.nt-rows label.check:has(input:checked) { background: var(--sage); font-weight: 600; }
.nt-rows .check input { width: 18px; height: 18px; }
.nt-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.nt-numbers input { font-size: 16px; }
.nt-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; }
.nt-actions .text-button { margin-right: auto; }
.nt-skip { min-height: 46px; padding: 12px 18px; border-radius: var(--button-radius); border: 1px solid #e4b385; background: #f1c9a3; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nt-skip:hover { background: #ecb98a; }
.nt-actions .primary { min-width: 140px; }
.nt-note { width: 100%; min-height: 110px; font-size: 16px; resize: none; overflow: hidden; }
.nt-count { font-size: 12px; color: var(--muted); text-align: right; margin: 0; }
.nt-status { font-size: 13px; color: var(--muted); }
.nt-article { max-width: 680px; display: grid; gap: 14px; }
.nt-article p { margin: 0; line-height: 1.6; }
.nt-article h2 { font-size: 22px; margin: 10px 0 0; }
.nt-article .inline-actions { margin-top: 10px; }
.nt-article-signoff { color: var(--muted); font-size: 14px; }
@media (max-width: 700px) {
  .nt-empty { grid-template-columns: 1fr; }
  .nt-empty svg { width: 72px; height: 72px; }
  .nt-week .nt-day { grid-template-columns: 1fr; gap: 4px; }
  .nt-actions { flex-direction: column-reverse; align-items: stretch; }
  .nt-actions .text-button { margin: 0; align-self: flex-start; }
  .nt-actions .primary, .nt-skip { width: 100%; }
  .nt-seg { width: 100%; }
  .nt-seg label { flex: 1; }
  .nt-seg span { width: 100%; }
}
:root { --nt-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23203e33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6 L6.4 12 M6.2 11.8 L13 4.6'/%3E%3C/svg%3E"); }

/* Keep the person explicit without another panel around the form. */
.nt-person { display: grid; gap: 6px; width: min(100%, 360px); margin-bottom: 20px; }
.nt-person > label { margin: 0; font-size: 14px; font-weight: 600; }
.nt-progress { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 24px; }
.nt-progress span { white-space: nowrap; color: var(--muted); }
.nt-progress strong { font-weight: 600; }
.nt-invitation { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 0; font-size: 14px; }
.nt-invitation .nt-start { padding: 8px 12px; }
.nt-member { max-width: 720px; }
.nt-member .nt-person { margin-bottom: 0; }
.nt-member [name=name] { max-width: 360px; }
.nt-member textarea, .nt-form [name=preferences] { min-height: 100px; font-size: 16px; resize: vertical; }
.nt-allergies { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 16px; }
.nt-allergies .check { min-height: 44px; margin: 0; padding: 6px 0; }
.nt-member .nt-actions { justify-content: flex-start; }
.nt-member .nt-actions .text-button { margin: 0; }
.nt-remove-confirm { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.nt-remove-confirm p { width: 100%; margin: 0; }
.nt-wizard .wizard-intro { min-width: 0; }
.nt-person .picker-trigger, .nt-form .picker-trigger { min-height: 44px; }
.nt-chip:focus-visible, .nt-start:focus-visible, .nt-skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media(max-width:700px){
 .nt-wizard .wizard-intro { grid-template-columns: 52px minmax(0,1fr); gap: 12px; }
 .nt-wizard .wizard-intro > svg { width: 52px; height: 52px; }
 .nt-wizard .wizard-intro h1 { overflow-wrap: anywhere; }
 .nt-summary .details > div, .nt-review > div { grid-template-columns: 1fr; gap: 6px; }
 .nt-member input, .nt-member textarea, .nt-form input { font-size: 16px; }
 .nt-member .nt-actions { flex-direction: column; align-items: stretch; }
}
@media(forced-colors:active){
 .nt-chip[aria-pressed=true] { border: 2px solid Highlight; }
 .nt-chip[aria-pressed=true]::before { background: none; width: 10px; height: 10px; border: 5px solid Highlight; border-radius: 50%; forced-color-adjust: none; }
 .nt-seg input:checked + span { border: 2px solid Highlight; }
}

/* Purposeful pencil colour, on the same paper as Plan. */
.nt-heading,.nt-wizard .wizard-intro { display:grid; grid-template-columns:minmax(0,1fr) 108px; align-items:center; gap:24px; }
.nt-heading > .nt-art,.nt-wizard .wizard-intro > .nt-art { grid-column:2; grid-row:1; }
.nt-heading > .page-heading,.nt-wizard .wizard-intro > .page-heading { grid-column:1; grid-row:1; margin:0; }
.nt-art { display:grid; place-items:center; width:108px; height:108px; background:var(--blue); border-radius:44% 50% 40% 48%; }
.nt-art img { width:90px; height:90px; object-fit:contain; }
.nt-art-plate,.nt-art-review { background:var(--ochre); }
.nt-art-cook { background:var(--wheat); }
.nt-art-about { background:var(--blue); }
#app .nt-wizard h1,#app .nt-heading h1,#app .nt-empty h1 { font-size:clamp(36px,4vw,44px); line-height:1.08; }
.nt-wizard { max-width:760px; }
.nt-wizard .panel { background:transparent; border:0; padding:0; box-shadow:none; }
.nt-progress { border-bottom:2px solid var(--line); }
.nt-progress strong { color:var(--red); }
.nt-chip[aria-pressed="true"] { background:var(--wheat); border-color:var(--ink); }
.nt-known-food { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; display:grid; gap:12px; }
.nt-known-food h2 { font-size:24px; margin:0; }
.nt-known-food p { margin:0; overflow-wrap:anywhere; }
.nt-known-household { border-left:4px solid var(--blue); padding-left:14px; display:grid; gap:8px; }
.nt-known-food a { display:inline-flex; align-items:center; min-height:44px; justify-self:start; }
.nt-known-person { border-left:4px solid var(--ochre); padding-left:14px; }
.nt-summary .details dt { color:var(--ink); font-weight:600; }
.nt-summary .details > div:first-child dt { text-decoration:underline; text-decoration-color:var(--ochre); text-decoration-thickness:5px; text-underline-offset:4px; }
@media(max-width:700px){
 .nt-heading,.nt-wizard .wizard-intro { grid-template-columns:minmax(0,1fr) 76px; gap:12px; }
 .nt-art { width:76px; height:82px; }
 .nt-art img { width:66px; height:70px; }
 .nt-empty { grid-template-columns:minmax(0,1fr) 76px; gap:12px; }
 .nt-empty > .nt-art { grid-column:2; grid-row:1; align-self:start; }
 .nt-empty > div { grid-column:1; grid-row:1; }
 .nt-empty .nt-start { grid-column:1/-1; }
 .nt-numbers { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Keep every person's selector comfortably tappable on tablets too. */
#app .nt-person .picker-trigger,#app .nt-form .picker-trigger{min-height:44px;font-size:16px;}
.nt-week .nt-dish{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;min-width:0;}
.nt-week .nt-dish+.nt-dish{margin-top:12px;}
.nt-week .nt-dish .meal-art{width:72px;height:72px;min-width:0;margin:0;padding:0;}
.nt-week .nt-dish .meal-art img{width:72px;height:72px;object-fit:contain;}
@media(max-width:500px){.nt-week .nt-day{grid-template-columns:1fr;gap:4px}.nt-week .nt-day dt{color:var(--green);font-weight:600}.nt-week .nt-dish{grid-template-columns:64px minmax(0,1fr)}.nt-week .nt-dish .meal-art,.nt-week .nt-dish .meal-art img{width:64px;height:64px}}