/*
 * NUVIO 27 — the final visual contract.
 * This file intentionally loads last: it unifies the accumulated screens
 * without changing their data, markup, navigation or business logic.
 */
:root{
  color-scheme:light;
  --n-bg:#f4f5f1;
  --n-bg-tint:#eef3ec;
  --n-group:rgba(255,255,255,.58);
  --n-surface:rgba(255,255,255,.82);
  --n-surface-solid:#fbfcf9;
  --n-raised:#fff;
  --n-ink:#142018;
  --n-ink-2:#536158;
  --n-ink-3:#7d8981;
  --n-line:rgba(38,58,44,.10);
  --n-line-strong:rgba(38,58,44,.16);
  --n-accent:#2f8d55;
  --n-accent-strong:#17683a;
  --n-accent-soft:#e3f1e7;
  --n-warm:#e5b95d;
  --n-warm-soft:#f7eedb;
  --n-danger:#c34a4a;
  --n-danger-soft:#fae8e7;
  --n-info:#3c7f98;
  --n-info-soft:#e5f1f5;
  --n-r-xs:12px;
  --n-r-control:16px;
  --n-r-card:24px;
  --n-r-card-lg:28px;
  --n-r-sheet:30px;
  --n-shadow-card:0 1px 1px rgba(25,36,28,.025),0 10px 30px rgba(25,36,28,.055);
  --n-shadow-raised:0 18px 54px rgba(25,36,28,.14),inset 0 1px 0 rgba(255,255,255,.72);
  --n-shadow-focus:0 0 0 4px rgba(47,141,85,.13);
  --n-blur:blur(24px) saturate(1.18);
  --n-fast:160ms;
  --n-normal:280ms;
  --n-ease:cubic-bezier(.22,.8,.22,1);

  --color-bg:var(--n-bg);--color-surface:var(--n-raised);--color-surface-soft:var(--n-surface-solid);
  --color-text:var(--n-ink);--color-muted:var(--n-ink-2);--color-line:var(--n-line);
  --color-accent:var(--n-accent);--color-accent-strong:var(--n-accent-strong);--color-accent-soft:var(--n-accent-soft);
  --bg:var(--n-bg);--card:var(--n-raised);--ink:var(--n-ink);--muted:var(--n-ink-2);--line:var(--n-line);
  --brand:var(--n-accent);--brand-d:var(--n-accent-strong);--brand-l:var(--n-accent-soft);
  --radius-control:var(--n-r-control);--radius-card:var(--n-r-card);--radius-sheet:var(--n-r-sheet);
  --shadow-card:var(--n-shadow-card);--shadow-float:var(--n-shadow-raised);
}

[data-theme="dark"]{
  color-scheme:dark;
  --n-bg:#101512;--n-bg-tint:#172019;
  --n-group:rgba(31,40,34,.62);--n-surface:rgba(32,42,35,.82);
  --n-surface-solid:#1a221d;--n-raised:#202a23;
  --n-ink:#f2f6f2;--n-ink-2:#b0bbb2;--n-ink-3:#818d84;
  --n-line:rgba(232,241,234,.10);--n-line-strong:rgba(232,241,234,.17);
  --n-accent:#62bb7d;--n-accent-strong:#91d5a5;--n-accent-soft:#243d2c;
  --n-warm:#efc86f;--n-warm-soft:#3c3420;--n-danger:#ff7770;--n-danger-soft:#402523;
  --n-info:#72b4ca;--n-info-soft:#20373e;
  --n-shadow-card:0 1px 1px rgba(0,0,0,.16),0 12px 34px rgba(0,0,0,.18);
  --n-shadow-raised:0 22px 60px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .ios26-profile-card,
[data-theme="dark"] .ios26-cloud-card,
[data-theme="dark"] .ios26-more-links,
[data-theme="dark"] .household-setup,
[data-theme="dark"] .household-active,
[data-theme="dark"] .household-member,
[data-theme="dark"] .household-code,
[data-theme="dark"] .editorial-extra,
[data-theme="dark"] .recipe-view-ingredients,
[data-theme="dark"] .quick-create-grid>button{
  background:var(--n-surface)!important;border-color:var(--n-line)!important;color:var(--n-ink)!important;
}
[data-theme="dark"] .app-back-button.visible,
[data-theme="dark"] .sheet-modal>.close,
[data-theme="dark"] .more-sheet-close,
[data-theme="dark"] .nuvio-picker-close{background:var(--n-surface)!important;border-color:var(--n-line)!important}
[data-theme="dark"] .ios26-more-link,[data-theme="dark"] .recipe-view-ingredient{border-color:var(--n-line)!important}
[data-theme="dark"] .ios26-profile-card small,[data-theme="dark"] .ios26-cloud-copy,[data-theme="dark"] .ios26-more-link{color:var(--n-ink-2)!important}

html{background:var(--n-bg);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{
  background:
    radial-gradient(900px 500px at 88% -8%,color-mix(in srgb,var(--n-accent-soft) 68%,transparent),transparent 70%),
    radial-gradient(680px 420px at -8% 10%,color-mix(in srgb,var(--n-warm-soft) 45%,transparent),transparent 72%),
    var(--n-bg);
  color:var(--n-ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",sans-serif;
  font-size:15px;line-height:1.45;letter-spacing:-.008em;
}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,.head h2,.plan-head h2{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif!important;
  color:var(--n-ink);font-weight:720;letter-spacing:-.035em;
}
.head h2,.plan-head h2{font-size:clamp(30px,4vw,40px);line-height:1.04;margin:0}
.head .hint,.sub,.meta,p.hint{color:var(--n-ink-2);line-height:1.5}
small,.muted{color:var(--n-ink-2)}

/* One component language */
.card,.day,.tbl-wrap,.rcard,.ios26-stat-card,.ios26-more-card,.ios26-daily-card,
.ios26-home-water,.ios26-home-progress,.ios26-cloud-card,.household-setup,.household-active{
  border:1px solid var(--n-line)!important;
  border-radius:var(--n-r-card)!important;
  background:var(--n-surface)!important;
  box-shadow:var(--n-shadow-card)!important;
  backdrop-filter:var(--n-blur);-webkit-backdrop-filter:var(--n-blur);
}
.card{padding:20px}
.grid{gap:16px}.grid.cols{gap:16px}
.note{padding:14px 16px;border:1px solid var(--n-line);border-radius:var(--n-r-control);background:var(--n-group);color:var(--n-ink-2)}
hr{border:0;border-top:1px solid var(--n-line)}

.btn,.tinybtn,.plan-week-btn,.composer-plus,.ios26-home-primary{
  min-height:44px;border:1px solid transparent;border-radius:var(--n-r-control)!important;
  padding:10px 16px;font-weight:650;letter-spacing:-.01em;
  transition:transform var(--n-fast) var(--n-ease),background var(--n-fast),border-color var(--n-fast),box-shadow var(--n-fast),opacity var(--n-fast);
}
.btn:not(.ghost):not(.danger),.plan-week-btn,.composer-plus{
  color:#fff!important;background:linear-gradient(180deg,color-mix(in srgb,var(--n-accent) 92%,white),var(--n-accent))!important;
  box-shadow:0 8px 20px rgba(37,119,66,.16),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.btn.ghost,.tinybtn,.plan-advanced-toggle{
  color:var(--n-accent-strong)!important;background:var(--n-group)!important;border-color:var(--n-line)!important;box-shadow:none!important;
}
.btn.danger,.danger,.delete-recipe{color:var(--n-danger)!important;background:var(--n-danger-soft)!important;border-color:color-mix(in srgb,var(--n-danger) 20%,transparent)!important}
.btn:hover,.tinybtn:hover,.plan-week-btn:hover{transform:translateY(-1px);filter:none}
.btn:active,.tinybtn:active,.plan-week-btn:active,.composer-plus:active{transform:scale(.975)}
.btn:disabled,.tinybtn:disabled,button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none!important;transform:none!important}

input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.nuvio-picker-button{
  min-height:48px;border:1px solid var(--n-line)!important;border-radius:var(--n-r-control)!important;
  background:color-mix(in srgb,var(--n-raised) 76%,transparent)!important;color:var(--n-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24)!important;padding:11px 14px!important;
  transition:border-color var(--n-fast),box-shadow var(--n-fast),background var(--n-fast);
}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--n-ink-3);opacity:1}
input:focus,select:focus,textarea:focus,.nuvio-picker-button:focus-visible{outline:0!important;border-color:color-mix(in srgb,var(--n-accent) 54%,transparent)!important;box-shadow:var(--n-shadow-focus)!important;background:var(--n-raised)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--n-accent);min-width:20px;min-height:20px}
label,.fld{color:var(--n-ink-2)}

.chip,.idea-chip,.composer-mode,.subtab,.favchip,.dietary-tag{
  min-height:34px;border:1px solid var(--n-line)!important;border-radius:12px!important;
  background:var(--n-group)!important;color:var(--n-ink-2)!important;font-weight:620;
}
.idea-chip.active,.composer-mode.active,.subtab.active,.chip.active{
  border-color:transparent!important;background:var(--n-accent-soft)!important;color:var(--n-accent-strong)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--n-accent) 12%,transparent);
}
.dietary-tag{min-height:26px!important;padding:4px 9px!important;font-size:11px!important}

/* Shell and navigation */
header.top,nav.tabs,.botnav,.more-sheet,.quick-create-panel,.nuvio-picker-sheet{
  background:color-mix(in srgb,var(--n-surface-solid) 78%,transparent)!important;
  border-color:color-mix(in srgb,var(--n-line-strong) 78%,transparent)!important;
  backdrop-filter:blur(28px) saturate(1.28)!important;-webkit-backdrop-filter:blur(28px) saturate(1.28)!important;
}
nav.tabs button,.botnav .bn{transition:color var(--n-fast),background var(--n-fast),transform var(--n-fast)}
nav.tabs button:active,.botnav .bn:active{transform:scale(.96)}
nav.tabs button.active{background:var(--n-accent-soft)!important;color:var(--n-accent-strong)!important}
.botnav{box-shadow:0 14px 40px rgba(26,37,29,.14),inset 0 1px 0 rgba(255,255,255,.42)!important}
.botnav-indicator{border-radius:999px!important;background:color-mix(in srgb,var(--n-raised) 72%,transparent)!important;border:1px solid var(--n-line);box-shadow:0 4px 14px rgba(26,37,29,.08)!important}
.botnav .bn{min-width:44px;min-height:52px;color:var(--n-ink-3)!important}
.botnav .bn.active{border-radius:999px!important;color:var(--n-accent-strong)!important}
.app-back-button.visible{min-width:44px;min-height:44px;border:1px solid var(--n-line)!important;border-radius:16px!important;background:color-mix(in srgb,var(--n-surface-solid) 78%,transparent)!important;color:var(--n-accent-strong)!important;box-shadow:var(--n-shadow-card)!important;backdrop-filter:var(--n-blur)}

/* Sheets, dialogs, pickers and notices */
.overlay,.more-overlay,.ob-overlay,.nuvio-picker-overlay{background:rgba(9,16,11,.30)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
.overlay>.modal,.overlay.sheet-overlay>.sheet-modal,.more-sheet,.ob-card,.nuvio-picker-sheet{
  border:1px solid color-mix(in srgb,var(--n-line-strong) 82%,transparent)!important;
  border-radius:var(--n-r-sheet)!important;background:color-mix(in srgb,var(--n-surface-solid) 91%,transparent)!important;
  color:var(--n-ink);box-shadow:var(--n-shadow-raised)!important;
}
.nuvio-sheet-handle span,.nuvio-picker-handle,.more-sheet-handle{background:color-mix(in srgb,var(--n-ink-3) 42%,transparent)!important}
.sheet-modal>.close,.more-sheet-close,.nuvio-picker-close{width:44px!important;height:44px!important;background:var(--n-group)!important;border:1px solid var(--n-line)!important;color:var(--n-ink-2)!important}
.sheet-modal>.modal-actions{background:color-mix(in srgb,var(--n-surface-solid) 88%,transparent)!important;border-color:var(--n-line)!important}
.nuvio-picker-options{background:var(--n-group)!important;border-color:var(--n-line)!important}
.nuvio-picker-option{min-height:50px;color:var(--n-ink)!important;border-color:var(--n-line)!important}
.nuvio-picker-option[aria-selected=true]{background:var(--n-accent-soft)!important;color:var(--n-accent-strong)!important}
#toast,#undobar{border:1px solid rgba(255,255,255,.12)!important;border-radius:18px!important;background:rgba(20,29,23,.88)!important;color:#fff!important;box-shadow:var(--n-shadow-raised)!important;backdrop-filter:blur(20px)!important}

/* States */
.empty{padding:32px 20px!important;border:1px dashed var(--n-line-strong)!important;border-radius:var(--n-r-card)!important;background:var(--n-group)!important;color:var(--n-ink-2)!important;text-align:center}
.empty .big{display:block;margin-bottom:8px;font-size:30px}.empty-title{color:var(--n-ink)!important;font-size:17px;font-weight:680}
.cloud-auth-status.error,.error{color:var(--n-danger)}
.cloud-auth-status:not(.error),.success{color:var(--n-accent-strong)}
.ios26-cloud-state::before{box-shadow:0 0 0 4px color-mix(in srgb,currentColor 10%,transparent)}
.ios26-cloud-state.error::before{background:var(--n-danger)!important}.ios26-cloud-state.synced::before{background:var(--n-accent)!important}
.nuvio-skeleton,.skeleton{position:relative;overflow:hidden;background:color-mix(in srgb,var(--n-line) 65%,transparent)!important;color:transparent!important;border-color:transparent!important}
.nuvio-skeleton::after,.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.50),transparent);animation:nuvio-shimmer 1.25s infinite}
@keyframes nuvio-shimmer{to{transform:translateX(100%)}}

/* Screen-specific visual rhythm */
.view{animation:nuvio-view-in 300ms var(--n-ease) both}.view:not(.active){animation:none}
@keyframes nuvio-view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.head,.plan-head{margin-bottom:20px}.head p,.plan-head p{max-width:62ch}
.ios26-home-hero{border-radius:0 0 var(--n-r-card-lg) var(--n-r-card-lg);box-shadow:0 14px 38px rgba(27,41,31,.10)}
.ios26-home-primary{border-radius:18px!important}
.ios26-meal-row{min-height:60px;border-color:var(--n-line)!important;transition:background var(--n-fast),transform var(--n-fast)}
.ios26-meal-row:hover{background:color-mix(in srgb,var(--n-accent-soft) 46%,transparent)}.ios26-meal-row:active{transform:scale(.992)}
.ios26-meal-icon{border-radius:12px!important}.ios26-meal-title{font-size:14px!important}.ios26-meal-meta,.ios26-meal-kcal{font-size:12px!important}
.today-v2-intro,.ritual-intro{border-radius:var(--n-r-card-lg)!important;box-shadow:var(--n-shadow-card)}
.today-v2-water{border-radius:var(--n-r-card)!important}
.diary-composer,.plan-command-card,.plan-add-card,.plan-shopping{border-radius:var(--n-r-card-lg)!important}
.daily-date{border-radius:18px!important}.diary-summary-card{top:96px}
.recipe-filter-panel{border:1px solid var(--n-line)!important;border-radius:var(--n-r-card)!important;background:var(--n-group)!important}
.rcard.discovery-card{border-radius:var(--n-r-card)!important;transition:transform var(--n-normal) var(--n-ease),box-shadow var(--n-normal)}
.rcard.discovery-card:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(25,36,28,.10)!important}
.discovery-card .recipe-art{min-height:170px}.discovery-card .recipe-body{padding:18px!important}.discovery-card h3{font-size:19px!important}
.recipe-view-hero{border-radius:var(--n-r-sheet) var(--n-r-sheet) 0 0!important}.recipe-view-ingredients{border-color:var(--n-line)!important;border-radius:18px!important;background:var(--n-group)!important}
.recipe-view-ingredient{min-height:48px;align-items:center;border-color:var(--n-line)!important;font-size:14px!important}
.plan-command-card{background:linear-gradient(145deg,var(--n-raised),color-mix(in srgb,var(--n-accent-soft) 62%,var(--n-raised)))!important}
.plan-days-v2 .day{border-radius:20px!important}.ios26-plan-row{min-height:58px;border-color:var(--n-line)!important;border-radius:16px!important}
.family-card::before{height:3px!important;background:linear-gradient(90deg,var(--n-accent),color-mix(in srgb,var(--n-warm) 55%,var(--n-accent)))!important}
.shop-item{min-height:52px;border-radius:14px!important}.shop-item:hover{background:var(--n-group)!important}
.quick-create-fab{border-radius:22px!important;background:linear-gradient(180deg,#45a667,var(--n-accent))!important;box-shadow:0 14px 34px rgba(30,111,58,.24),inset 0 1px 0 rgba(255,255,255,.30)!important}
.quick-create-grid>button{border-color:var(--n-line)!important;border-radius:20px!important;background:var(--n-group)!important;color:var(--n-ink)!important}
.quick-create-grid>button:hover{background:var(--n-accent-soft)!important}.quick-create-icon{border-radius:14px!important;background:var(--n-accent-soft)!important;color:var(--n-accent-strong)!important}

/* Desktop: calm workspace, never a stretched phone. */
@media(min-width:900px){
  body{padding-left:236px}
  header.top{margin-left:-236px;padding-left:260px;min-height:68px;border-bottom:1px solid var(--n-line)}
  nav.tabs{width:236px;padding:24px 16px;border-right:1px solid var(--n-line)!important}
  nav.tabs button{min-height:46px;border-radius:14px!important;padding:11px 13px!important}
  main{width:min(100%,1500px);padding:32px clamp(28px,4.5vw,72px) 72px}
  .view{max-width:1180px;margin-inline:auto}
  #view-today,#view-more,#view-norm{max-width:1060px}
  #view-recipes #recipeList{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  #view-family .grid,#view-pantry .grid{gap:20px}
  .overlay.sheet-overlay{align-items:center!important;padding:32px!important}
  .overlay.sheet-overlay>.sheet-modal{max-height:min(calc(100dvh - 64px),920px)!important;border-radius:var(--n-r-sheet)!important}
  .quick-create-panel{right:28px;bottom:108px}
}

/* Phone: safe areas, thumb reach and stable content width. */
@media(max-width:640px){
  body{background:
    radial-gradient(560px 320px at 90% -4%,color-mix(in srgb,var(--n-accent-soft) 72%,transparent),transparent 72%),
    var(--n-bg)!important}
  main{padding:16px 16px calc(116px + env(safe-area-inset-bottom));overflow:clip}
  .view{width:100%;min-width:0}
  .head{margin:2px 0 18px}.head h2,.plan-head h2{font-size:31px!important;line-height:1.06}
  .card{padding:16px}.grid{gap:12px}
  .ios26-home{margin:-16px -16px 0}.ios26-home-content{margin:0 12px!important}
  .ios26-home-hero{min-height:306px;padding-left:20px;padding-right:20px}
  .ios26-home-copy h2{font-size:31px!important;max-width:9ch}.ios26-home-primary{left:16px;right:16px;width:calc(100% - 32px)}
  .ios26-daily-card{border-radius:22px!important}.ios26-meal-row{grid-template-columns:38px minmax(0,1fr) auto;padding:12px}
  .botnav{left:12px!important;right:84px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;border-radius:999px!important;padding:6px!important}
  .botnav .bn{font-size:10px!important}.botnav .bn .ic svg{width:21px!important;height:21px!important}
  .quick-create-fab{right:12px;bottom:calc(10px + env(safe-area-inset-bottom));width:64px;height:64px}
  .quick-create-panel{left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));padding:18px}
  .quick-create-grid>button{min-height:76px}.quick-create-grid b{font-size:13px!important}.quick-create-grid small{font-size:11px!important}
  .overlay.sheet-overlay>.sheet-modal,.overlay>.modal{border-radius:var(--n-r-sheet) var(--n-r-sheet) 0 0!important}
  .overlay.sheet-overlay{padding:6px 6px 0!important}.overlay.sheet-overlay>.sheet-modal{border-radius:var(--n-r-sheet)!important}
  .recipe-filter-grid{grid-template-columns:1fr!important}.recipe-filter-grid label{font-size:13px!important}
  .recipe-quick{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .discovery-card .recipe-art{min-height:154px}
  .plan-days-v2{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .plan-command-card,.plan-add-card,.plan-shopping{padding:18px!important}
  .plan-command-controls,.plan-add-controls,.row{gap:10px}
  .household-setup-grid{gap:12px!important}
}

@media(max-width:370px){
  main{padding-inline:12px}.ios26-home{margin-inline:-12px}.ios26-home-content{margin-inline:9px!important}
  .quick-create-grid{grid-template-columns:1fr}.quick-create-grid>button{min-height:66px}
  .botnav{left:8px!important;right:76px!important}.quick-create-fab{right:8px;width:60px;height:60px}
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){color-scheme:dark;--n-bg:#101512;--n-bg-tint:#172019;--n-group:rgba(31,40,34,.62);--n-surface:rgba(32,42,35,.82);--n-surface-solid:#1a221d;--n-raised:#202a23;--n-ink:#f2f6f2;--n-ink-2:#b0bbb2;--n-ink-3:#818d84;--n-line:rgba(232,241,234,.10);--n-line-strong:rgba(232,241,234,.17);--n-accent:#62bb7d;--n-accent-strong:#91d5a5;--n-accent-soft:#243d2c;--n-warm-soft:#3c3420;--n-danger:#ff7770;--n-danger-soft:#402523}
}
@media(prefers-reduced-motion:reduce){.view{animation:none!important}.nuvio-skeleton::after,.skeleton::after{animation:none!important}}
@media(prefers-reduced-transparency:reduce){.card,.day,.tbl-wrap,.rcard,header.top,nav.tabs,.botnav,.quick-create-panel,.overlay>.modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--n-surface-solid)!important}}
@media(forced-colors:active){.card,.btn,input,select,textarea,.botnav{border:1px solid CanvasText!important}}
