/* NUVIO interface foundation. This layer owns shared tokens, layout, themes
   and common component behavior. Screen-specific styling stays elsewhere. */
:root{
  color-scheme:light;
  --color-bg:#F5F3EE;--color-surface:#FFFFFF;--color-surface-soft:#FAF9F6;
  --color-text:#152018;--color-muted:#69736B;--color-line:rgba(38,66,47,.11);
  --color-accent:#3E9D61;--color-accent-strong:#24663D;--color-accent-soft:#EAF4EA;
  --color-danger:#A74747;--color-warning:#806326;
  --radius-control:14px;--radius-card:20px;--radius-sheet:28px;--radius-pill:999px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.055);
  --shadow-float:0 18px 46px rgba(15,23,42,.18);
  --z-content:0;--z-sticky:20;--z-navigation:30;--z-quick-action:33;
  --z-overlay:40;--z-dialog:50;--z-toast:80;
  --motion-fast:160ms;--motion-normal:280ms;--ease-spring:cubic-bezier(.2,.8,.2,1);
  --bg:var(--color-bg);--card:var(--color-surface);--ink:var(--color-text);
  --muted:var(--color-muted);--line:var(--color-line);--brand:var(--color-accent);
  --brand-d:var(--color-accent-strong);--brand-l:var(--color-accent-soft);
}
[data-theme="dark"]{
  color-scheme:dark;--color-bg:#121713;--color-surface:#1B221D;--color-surface-soft:#171D19;
  --color-text:#F1F5F1;--color-muted:#AAB4AC;--color-line:rgba(229,240,231,.11);
  --color-accent:#63B77C;--color-accent-strong:#8ED1A1;--color-accent-soft:#22392A;
  --shadow-card:0 1px 2px rgba(0,0,0,.20),0 8px 22px rgba(0,0,0,.18);
  --shadow-float:0 18px 50px rgba(0,0,0,.42);--ios-surface:rgba(27,34,29,.90);
  --ios-glass:rgba(26,33,28,.72);--ios-glass-strong:rgba(28,35,30,.88);
}
*,*::before,*::after{box-sizing:border-box}
html,body{min-width:0;min-height:100%;background:var(--color-bg);color:var(--color-text)}
body{min-height:100dvh}
button,a,input,select,textarea{min-width:0}
button,[role="button"],a{touch-action:manipulation}
:focus-visible{outline:3px solid color-mix(in srgb,var(--color-accent) 38%,transparent);outline-offset:2px}
.card,.day,.tbl-wrap{background:var(--color-surface);border-color:var(--color-line);box-shadow:var(--shadow-card)}
.btn,.tinybtn,.idea-chip,.composer-mode,.subtab{min-height:44px}
.btn.sm{min-height:38px}
.empty{color:var(--color-muted)}
#toast{z-index:var(--z-toast)}

/* Quick create: one-tap actions, separate from destination navigation. */
.quick-create-backdrop{position:fixed;z-index:calc(var(--z-quick-action) - 1);inset:0;background:rgba(14,23,17,.18);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity var(--motion-fast) ease,visibility var(--motion-fast) ease}
.quick-create-backdrop.open{opacity:1;visibility:visible}
.quick-create-panel{position:fixed;z-index:calc(var(--z-quick-action) + 1);right:24px;bottom:104px;width:min(440px,calc(100vw - 32px));padding:20px;border:1px solid color-mix(in srgb,var(--color-surface) 76%,transparent);border-radius:28px;background:color-mix(in srgb,var(--color-surface) 91%,transparent);box-shadow:var(--shadow-float);backdrop-filter:blur(28px) saturate(1.2);-webkit-backdrop-filter:blur(28px) saturate(1.2);opacity:0;visibility:hidden;transform:translateY(18px) scale(.96);transform-origin:bottom right;transition:transform 260ms var(--ease-spring),opacity var(--motion-fast) ease,visibility var(--motion-fast) ease}
.quick-create-panel.open{opacity:1;visibility:visible;transform:none}
.quick-create-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 16px}.quick-create-head h3{margin:0;font-size:22px}.quick-create-head span{color:var(--color-muted);font-size:12px}
.quick-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quick-create-grid>button{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:11px;min-height:82px;padding:12px;border:1px solid var(--color-line);border-radius:20px;background:color-mix(in srgb,var(--color-surface-soft) 82%,transparent);color:var(--color-text);text-align:left;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-surface) 72%,transparent)}
.quick-create-grid>button:hover{border-color:color-mix(in srgb,var(--color-accent) 30%,var(--color-line));background:var(--color-accent-soft)}.quick-create-grid>button:active{transform:scale(.975)}
.quick-create-grid b{display:block;font-size:14px}.quick-create-grid small{display:block;margin-top:3px;color:var(--color-muted);font-size:10.5px}
.quick-create-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--color-accent-soft);color:var(--color-accent-strong)}.quick-create-icon.warm{background:#F7EED8;color:#8A6720}.quick-create-icon svg{width:23px;height:23px}
.quick-create-fab{position:fixed;z-index:calc(var(--z-quick-action) + 2);right:24px;bottom:24px;display:grid;place-items:center;width:64px;height:64px;border:1px solid color-mix(in srgb,var(--color-surface) 58%,transparent);border-radius:22px;background:linear-gradient(180deg,#51AA70,#318952);color:#fff;box-shadow:0 15px 34px rgba(37,116,65,.28),inset 0 1px 0 rgba(255,255,255,.28);font-size:35px;font-weight:300;line-height:1;transition:transform 280ms var(--ease-spring),background var(--motion-fast) ease}
.quick-create-fab span{display:block;transition:transform 280ms var(--ease-spring)}.quick-create-fab[aria-expanded="true"] span{transform:rotate(45deg)}.quick-create-fab[aria-expanded="true"]{background:linear-gradient(180deg,#3A8F59,#246B40);transform:scale(.96)}

/* The secondary navigation uses the same focus, depth and motion contract. */
.more-overlay{z-index:var(--z-overlay)!important;background:rgba(15,23,18,.28)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.more-sheet{z-index:var(--z-dialog)!important;background:color-mix(in srgb,var(--color-surface) 92%,transparent)!important;border:1px solid color-mix(in srgb,var(--color-surface) 78%,transparent)!important;box-shadow:var(--shadow-float)!important}
.more-sheet-handle{width:38px;height:4px;margin:0 auto 8px;border-radius:99px;background:color-mix(in srgb,var(--color-muted) 28%,transparent)}
.more-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 4px}
.more-sheet-head h3{margin:0;font-size:22px}
.more-sheet-close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--color-surface-soft);color:var(--color-muted);font-size:24px}
.more-sheet button{color:var(--color-text)!important}
.ob-overlay{background:rgba(15,23,18,.28)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ob-card{max-height:min(calc(var(--dialog-viewport-height,100dvh) - 32px),820px);overflow:auto;background:color-mix(in srgb,var(--color-surface) 94%,transparent)!important;border:1px solid color-mix(in srgb,var(--color-surface) 82%,transparent)!important;border-radius:var(--radius-sheet)!important;box-shadow:var(--shadow-float)!important}

/* One dialog contract: sheet on phone, centered dialog on larger screens. */
html.nuvio-dialog-open,body.nuvio-dialog-open{overflow:hidden;overscroll-behavior:none}
.nuvio-dialog-open .app-back-button{opacity:0!important;pointer-events:none!important}
.overlay{z-index:var(--z-overlay);padding:clamp(12px,3vw,32px);background:rgba(15,23,18,.28);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity var(--motion-fast) ease,visibility var(--motion-fast) ease}
.overlay.open{opacity:1;visibility:visible}
.overlay>.modal{z-index:var(--z-dialog);display:flex;flex-direction:column;max-height:min(calc(var(--dialog-viewport-height,100dvh) - 48px),820px);overflow:hidden;border:1px solid color-mix(in srgb,var(--color-surface) 82%,transparent);border-radius:var(--radius-sheet);background:color-mix(in srgb,var(--color-surface) 94%,transparent);box-shadow:var(--shadow-float);transform:translateY(8px) scale(.985);opacity:0;transition:transform 220ms var(--ease-spring),opacity var(--motion-fast) ease}
.overlay.open>.modal{transform:none;opacity:1}
.overlay>.modal>.dialog-scroll,.overlay>.modal>.recipe-view-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.overlay>.modal>.modal-actions{flex:0 0 auto;margin-top:auto;padding-bottom:env(safe-area-inset-bottom)}
.overlay>.modal>.close{min-width:44px;min-height:44px}

/* Tall bottom sheets: contextual tasks stay visually connected to the page. */
.overlay.sheet-overlay{align-items:flex-end!important;justify-content:center!important;padding:clamp(6px,1.4vw,16px)!important}
.overlay.sheet-overlay>.sheet-modal{
  width:min(100%,760px)!important;max-width:760px;max-height:min(calc(var(--dialog-viewport-height,100dvh) - 28px),900px)!important;
  margin:0!important;padding:0 22px 22px!important;border-radius:32px!important;
  transform:translateY(calc(100% + 28px)) scale(.992)!important;transform-origin:bottom center;
  opacity:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  transition:transform 360ms var(--ease-spring),box-shadow var(--motion-fast) ease!important;
  will-change:transform;
}
.overlay.sheet-overlay.open>.sheet-modal{transform:translateY(0) scale(1)!important}
.overlay.sheet-overlay.dragging{transition:none!important}.overlay.sheet-overlay.dragging>.sheet-modal{transition:none!important}
.nuvio-sheet-handle{position:sticky;z-index:12;top:0;display:grid;place-items:center;width:100%;height:34px;margin:0 0 2px;background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface) 98%,transparent) 70%,transparent);cursor:grab;touch-action:none}
.nuvio-sheet-handle:active{cursor:grabbing}.nuvio-sheet-handle span{width:48px;height:5px;border-radius:999px;background:color-mix(in srgb,var(--color-muted) 40%,transparent);transition:width var(--motion-fast) ease,background var(--motion-fast) ease}
.nuvio-sheet-handle:hover span,.nuvio-sheet-handle:focus-visible span{width:56px;background:color-mix(in srgb,var(--color-muted) 58%,transparent)}
.sheet-modal>.close{position:sticky!important;z-index:14!important;top:36px!important;float:none!important;margin-left:auto!important;margin-bottom:-44px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:color-mix(in srgb,var(--color-surface-soft) 84%,transparent)!important;backdrop-filter:blur(14px)}
.sheet-modal>.modal-actions{position:sticky;z-index:10;bottom:-22px;margin:20px -22px -22px!important;padding:12px 22px calc(12px + env(safe-area-inset-bottom))!important;background:color-mix(in srgb,var(--color-surface) 91%,transparent);border-top:1px solid var(--color-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#viewModal>.recipe-view-modal{overflow:hidden!important;height:min(calc(var(--dialog-viewport-height,100dvh) - 28px),900px)}
#viewModal #viewBody{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -22px -22px;padding:0 22px calc(22px + env(safe-area-inset-bottom));scrollbar-width:thin}
#viewModal .recipe-view-hero{margin-top:0!important}

/* Desktop is a product workspace, not a stretched phone. */
@media(min-width:900px){
  body{padding-left:224px}
  header.top{position:sticky;top:0;z-index:var(--z-sticky);margin-left:-224px;padding-left:244px}
  nav.tabs{position:fixed;z-index:var(--z-navigation);inset:0 auto 0 0;width:224px;overflow-y:auto;padding:22px 14px;background:color-mix(in srgb,var(--color-surface) 86%,transparent);border-right:1px solid var(--color-line);border-bottom:0}
  nav.tabs .in{display:grid!important;align-content:start;gap:22px;width:100%!important;max-width:none!important;padding:0!important}
  nav.tabs .tabgroup{display:grid!important;gap:5px!important;min-width:0!important}
  nav.tabs .tabgroup-lbl{padding:0 10px 5px;font-size:10px!important;letter-spacing:.14em!important}
  nav.tabs button{display:flex!important;align-items:center;width:100%;min-height:44px;padding:10px 12px!important;border:0!important;border-radius:13px!important;text-align:left;white-space:normal!important}
  nav.tabs button.active{background:var(--color-accent-soft)!important;color:var(--color-accent-strong)!important}
  main{width:min(100%,1440px);margin:0 auto;padding:var(--space-5) clamp(24px,4vw,64px) 64px}
  .view>.head{max-width:1120px}
  .app-back-button.visible{left:242px!important;top:82px!important}
  .more-overlay{display:none!important}
}

/* Mobile shell and the moving navigation pill. */
@media(max-width:640px){
  main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .botnav{z-index:var(--z-navigation)!important;isolation:isolate;overflow:hidden;right:82px!important}
  .botnav-indicator{position:absolute;z-index:-1;left:7px;top:7px;width:calc((100% - 14px)/5);height:50px;border-radius:18px;background:rgba(255,255,255,.70);box-shadow:0 3px 12px rgba(31,45,35,.09);transform:translateX(calc(var(--nav-index,0)*100%));transition:transform 340ms var(--ease-spring)}
  .botnav .bn.active{background:transparent!important;box-shadow:none!important}
  .overlay{align-items:flex-end!important;padding:0!important}
  .overlay>.modal{width:100%!important;max-width:none!important;max-height:min(92dvh,calc(100dvh - env(safe-area-inset-top) - 12px));margin:0!important;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0!important;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}
  .overlay.open>.modal{transform:none}
  .quick-create-fab{right:12px;bottom:calc(10px + env(safe-area-inset-bottom));width:62px;height:62px;border-radius:23px}
  .quick-create-panel{left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));width:auto;padding:17px;border-radius:26px;transform-origin:bottom right}
  .quick-create-head{margin-bottom:13px}.quick-create-head h3{font-size:20px}
  .quick-create-grid{gap:8px}.quick-create-grid>button{grid-template-columns:40px minmax(0,1fr);min-height:72px;padding:10px;border-radius:18px}.quick-create-icon{width:40px;height:40px;border-radius:13px}.quick-create-icon svg{width:21px;height:21px}.quick-create-grid b{font-size:12.5px}
  .overlay.sheet-overlay{padding:6px!important}
  .overlay.sheet-overlay>.sheet-modal{width:100%!important;max-width:none!important;max-height:calc(var(--dialog-viewport-height,100dvh) - 12px)!important;border-radius:30px!important;padding:0 16px 16px!important}
  .sheet-modal>.modal-actions{bottom:-16px;margin:18px -16px -16px!important;padding:11px 16px calc(11px + env(safe-area-inset-bottom))!important}
  #viewModal>.recipe-view-modal{height:calc(var(--dialog-viewport-height,100dvh) - 12px)}
  #viewModal #viewBody{margin:0 -16px -16px;padding:0 16px calc(20px + env(safe-area-inset-bottom))}
  #viewModal .recipe-view-hero{height:210px!important;margin-left:-16px!important;margin-right:-16px!important;border-radius:0!important}
}

[data-theme="dark"] body{background:radial-gradient(circle at 10% 0%,rgba(70,100,76,.16),transparent 35%),var(--color-bg)}
[data-theme="dark"] header.top,[data-theme="dark"] nav.tabs{background:color-mix(in srgb,var(--color-surface) 82%,transparent)!important}
[data-theme="dark"] .card,[data-theme="dark"] .day,[data-theme="dark"] .tbl-wrap,[data-theme="dark"] .ios26-more-card,[data-theme="dark"] .ios26-stat-card{background:var(--color-surface)!important;border-color:var(--color-line)!important}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .nuvio-picker-button{background:var(--color-surface-soft)!important;border-color:var(--color-line)!important;color:var(--color-text)!important}
[data-theme="dark"] .ios26-plan-row,[data-theme="dark"] .ios26-diary-row,[data-theme="dark"] .more-sheet button{border-color:var(--color-line)!important}

/* Pilot journey: the selected week and day lead; generation and manual edits follow. */
#view-plan{display:flex;flex-direction:column}
#view-plan>.plan-head{order:0}#view-plan>.plan-overview{order:1}#view-plan>.plan-week-section{order:2!important}
#view-plan>.plan-command-card{order:3!important}#view-plan>.plan-add-card{order:4!important}#view-plan>.plan-shopping{order:5!important}
.ios26-plan-row{cursor:pointer}.ios26-plan-row:focus-within{box-shadow:inset 3px 0 0 var(--color-accent)}
.ios26-plan-personal{flex-wrap:wrap}.ios26-plan-personal button{min-height:32px!important}
.shop-item{min-height:48px}.shop-item input[type="checkbox"]{width:22px!important;height:22px!important}

@media(min-width:900px){
  #view-today,#view-more,#view-norm{max-width:1040px;margin-inline:auto}
  #view-recipes #recipeList{grid-template-columns:repeat(3,minmax(0,1fr))}
  #view-family .grid,#view-pantry .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-diary>.grid.split{grid-template-columns:minmax(420px,1.25fr) minmax(300px,.75fr)!important;gap:24px}
  #view-plan>.plan-command-card,#view-plan>.plan-add-card,#view-plan>.plan-shopping{width:min(100%,980px);margin-inline:auto}
}

@media(min-width:641px) and (max-width:899px){
  main{padding-inline:clamp(18px,4vw,34px)}
  #view-recipes #recipeList{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .more-sheet-head+h4{margin-top:2px}
  .ob-overlay{padding:8px!important;align-items:flex-end!important}
  .ob-card{max-height:calc(var(--dialog-viewport-height,100dvh) - 8px);margin:0!important;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0!important;padding:20px 16px calc(20px + env(safe-area-inset-bottom))!important}
  .ob-card .row2{grid-template-columns:1fr 1fr!important;gap:8px}
  .ob-card .goalbtns{display:grid;grid-template-columns:1fr;gap:7px}
  .ob-card .goalbtns button{width:100%;min-width:0;text-align:left}
  #view-plan>.plan-overview{margin-bottom:8px}
  #view-plan>.plan-shopping{scroll-margin-top:14px}
  .ios26-plan-personal button{font-size:10px!important;padding:6px 9px!important}
}

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--color-bg:#121713;--color-surface:#1B221D;--color-surface-soft:#171D19;--color-text:#F1F5F1;--color-muted:#AAB4AC;--color-line:rgba(229,240,231,.11);--color-accent:#63B77C;--color-accent-strong:#8ED1A1;--color-accent-soft:#22392A;--ios-surface:rgba(27,34,29,.90);--ios-glass:rgba(26,33,28,.72)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(prefers-reduced-transparency:reduce){.overlay,nav.tabs,.botnav,header.top{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--color-surface)!important}}