/* Layout changes deliberately reuse the active account's color palette. */
#open-layouts{font-size:.8rem;white-space:nowrap;padding:.6rem .8rem;gap:.45rem}#layout-preview-label{color:var(--muted);font-weight:400}#layout-picker{max-width:1100px}#layout-picker>.dialog-heading{margin-bottom:1rem}#layout-picker>p{max-width:780px}.layout-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0}.layout-choice{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;padding:0;overflow:hidden;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;line-height:1.5;font-weight:400}.layout-choice[aria-pressed=true]{outline:2px solid var(--green);outline-offset:2px}.layout-choice-body{display:flex;flex-direction:column;gap:.7rem;padding:1.3rem;flex:1}.layout-choice-body .eyebrow{margin:0}.layout-choice-body strong{font:1.8rem Georgia,serif}.layout-choice-body>span:not(.eyebrow):not(.layout-try){font-size:.86rem;color:var(--muted)}.layout-choice-body em{font-size:.8rem;font-style:normal}.layout-try{color:var(--green);font-size:.85rem;font-weight:700;margin-top:auto;padding-top:.6rem}.layout-picker-footer{display:flex;gap:1rem;align-items:center;justify-content:space-between}.layout-picker-footer p{margin:0}
.layout-mini{height:165px;background:var(--paper);display:grid;grid-template-columns:1fr;grid-template-rows:20px 14px 1fr;gap:7px;padding:12px;border-bottom:1px solid var(--line)}.mini-top{border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--green) 0 24%,transparent 24%);background-size:100% 5px;background-repeat:no-repeat;background-position:left center}.mini-nav{background:linear-gradient(90deg,var(--muted) 0 14%,transparent 14% 20%,var(--muted) 20% 36%,transparent 36% 42%,var(--muted) 42% 57%,transparent 57%);opacity:.45;background-size:100% 3px;background-repeat:no-repeat;background-position:left center}.mini-content{display:flex;flex-direction:column;gap:10px;min-height:0}.mini-heading{width:48%;height:8px;background:var(--green);opacity:.65}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:7px;flex:1}.mini-grid i{border:1px solid var(--line);border-radius:3px;background:linear-gradient(var(--soft) 70%,var(--card) 70%)}.layout-mini-workspace{grid-template-columns:49px 1fr;grid-template-rows:20px 1fr}.layout-mini-workspace .mini-top{grid-column:1/-1}.layout-mini-workspace .mini-nav{height:100%;background:repeating-linear-gradient(180deg,var(--muted) 0 3px,transparent 3px 16px);background-size:75% 75%;background-repeat:no-repeat}.layout-mini-workspace .mini-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}.layout-mini-workspace .mini-grid i{background:linear-gradient(90deg,var(--soft) 35%,var(--card) 35%)}.layout-mini-notebook .mini-heading{align-self:center;width:60%}.layout-mini-notebook .mini-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:4px;margin:0 25px}.layout-mini-notebook .mini-grid i{border:0;border-bottom:1px solid var(--line);border-radius:0;background:linear-gradient(90deg,var(--soft) 12%,transparent 12% 17%,var(--line) 17% 75%,transparent 75%)}.layout-mini-notebook .mini-grid i:nth-child(n+5){display:none}

.layout-examples{max-width:1500px}.layout-examples>p{max-width:900px}.layout-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:2.5rem 0}.layout-example-grid article{min-width:0}.layout-example-grid article>p.muted{min-height:3.4em}.layout-example-grid img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:1rem}.layout-example-grid h2{margin-bottom:.6rem}
@media(max-width:700px){.layout-example-grid{grid-template-columns:1fr;gap:3rem}.layout-example-grid article>p.muted{min-height:0}}

/* Workspace: compact horizontal cards; sidebar on desktop, usable top navigation on phones. */
:root[data-layout=workspace] #main{padding-top:2rem}
:root[data-layout=workspace] .page-head{gap:1.3rem;margin-bottom:1.8rem}
:root[data-layout=workspace] .page-head h1{font-size:clamp(2rem,3vw,2.8rem)}
:root[data-layout=workspace] .recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
:root[data-layout=workspace] .recipe-card{display:grid;grid-template-columns:105px minmax(0,1fr)}
:root[data-layout=workspace] .card-image{height:100%;min-height:175px}
:root[data-layout=workspace] .placeholder>span{font-size:3rem}
:root[data-layout=workspace] .card-body{padding:1rem}
:root[data-layout=workspace] .card-body h2{font-size:1.3rem}
:root[data-layout=workspace] .card-body .eyebrow{font-size:.58rem}
:root[data-layout=workspace] .card-body .small{padding-top:.6rem}
:root[data-layout=workspace] .week-grid{gap:.7rem}
:root[data-layout=workspace] .day-card{padding:.9rem;min-height:180px}
@media(min-width:1080px){
  :root[data-layout=workspace] body:not(.cooking) #shell{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100vh}
  :root[data-layout=workspace] body:not(.cooking) .topbar{grid-column:1/-1;position:sticky;top:0;background:var(--paper);z-index:20;margin:0;max-width:none;padding:1.3rem 2rem}
  :root[data-layout=workspace] body:not(.cooking) nav{grid-column:1;grid-row:2/4;position:sticky;top:82px;align-self:start;display:flex;flex-direction:column;gap:.5rem;padding:1.8rem 1rem;margin:0;border-bottom:0;border-right:1px solid var(--line);height:calc(100vh - 82px);background:var(--card)}
  :root[data-layout=workspace] body:not(.cooking) nav a{padding:1rem .8rem;border:0;border-radius:8px;white-space:normal}
  :root[data-layout=workspace] body:not(.cooking) nav a.active{background:var(--soft)}
  :root[data-layout=workspace] body:not(.cooking) #main{grid-column:2;grid-row:2;width:100%;min-width:0;margin:0;max-width:none;padding:2rem}
  :root[data-layout=workspace] body:not(.cooking) footer{grid-column:2;grid-row:3}
  :root[data-layout=workspace] .page-head{align-items:flex-start;flex-direction:column}
  :root[data-layout=workspace] .recipe-columns{gap:2rem}
}

/* Notebook: a centered index with concise rows instead of large photo tiles. */
:root[data-layout=notebook] #main{max-width:1000px;padding-top:2.6rem}
:root[data-layout=notebook] nav{justify-content:center}
:root[data-layout=notebook] .page-head{display:block;text-align:center;margin:0 auto 2rem}
:root[data-layout=notebook] .page-head p:last-child{margin-left:auto;margin-right:auto}
:root[data-layout=notebook] .page-head>.actions{justify-content:center;margin-top:1.5rem}
:root[data-layout=notebook] .page-head h1{font-size:clamp(2rem,3.5vw,3.2rem)}
:root[data-layout=notebook] .filters{background:var(--card);padding:1rem;border:1px solid var(--line);border-radius:9px;margin-bottom:1rem}
:root[data-layout=notebook] .filters input{max-width:none}
:root[data-layout=notebook] .recipe-grid{display:flex;flex-direction:column;gap:0}
:root[data-layout=notebook] .recipe-card{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:1.3rem;padding:1.2rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
:root[data-layout=notebook] .recipe-card:hover{transform:none;box-shadow:none;background:var(--card)}
:root[data-layout=notebook] .card-image{width:86px;height:86px;border-radius:8px;overflow:hidden}
:root[data-layout=notebook] .placeholder>span{font-size:2.5rem}
:root[data-layout=notebook] .heart{right:.3rem;top:.3rem;font-size:.7rem;padding:.15rem .35rem}
:root[data-layout=notebook] .card-body{padding:0}
:root[data-layout=notebook] .card-body h2{font-size:1.5rem;margin-bottom:.35rem}
:root[data-layout=notebook] .card-body .eyebrow{margin-bottom:.3rem;font-size:.6rem}
:root[data-layout=notebook] .card-body p.muted{display:none}
:root[data-layout=notebook] .card-body .small{border:0;padding:0}
:root[data-layout=notebook] .week-grid{grid-template-columns:1fr;gap:.8rem}
:root[data-layout=notebook] .day-card{min-height:0;padding:1.2rem}
:root[data-layout=notebook] .planned{margin-bottom:.5rem}
:root[data-layout=notebook] .settings-grid{grid-template-columns:1fr}
:root[data-layout=notebook] .recipe-columns{gap:2rem}

@media(max-width:1079px){.topbar{flex-wrap:wrap;gap:.8rem}.private-label{display:none}#open-layouts{margin-left:auto}.topbar #account-label{margin-left:auto}.topbar .quiet{margin-left:0}}
@media(max-width:700px){.layout-choices{grid-template-columns:1fr}.layout-mini{height:140px}.layout-choice-body{padding:1rem}.layout-picker-footer{align-items:flex-start;flex-direction:column}#layout-preview-label{display:none}:root[data-layout=workspace] .recipe-grid{grid-template-columns:1fr}:root[data-layout=notebook] nav{justify-content:flex-start}:root[data-layout=notebook] .recipe-card{grid-template-columns:70px minmax(0,1fr);gap:1rem}:root[data-layout=notebook] .card-image{width:70px;height:70px}:root[data-layout=notebook] .card-body h2{font-size:1.25rem}}
@media(max-width:420px){.topbar .wordmark{flex-basis:calc(100% - 95px)}.topbar #account-label{max-width:80px}#open-layouts{margin-left:0}.topbar [data-action=logout]{margin-left:auto}}
/* Cooking mode never inherits the desktop navigation gutter. */
:root[data-layout] .cooking #main{max-width:1200px;margin:auto;padding:2rem}
@media print{:root[data-layout] #shell{display:block!important}:root[data-layout] #main{max-width:none!important;margin:0!important;padding:0!important}#layout-picker,#open-layouts{display:none!important}}