/* Quiet, fixed wallpaper: no full-screen animated blur or remote assets. */
#wallpaper{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:var(--page);background-position:center;background-size:cover}
#wallpaper::after{content:"";position:absolute;inset:0;pointer-events:none}
.ambient{z-index:1}.app-shell{position:relative;z-index:2}
html:not([data-background="sage"]) .ambient{display:none}
html[data-background="sage"] #wallpaper{background-image:radial-gradient(ellipse at 85% 5%,#dce8d1 0,transparent 60%),radial-gradient(ellipse at 0 90%,#eee3d5 0,transparent 55%)}
html[data-background="peach"] #wallpaper{background-image:radial-gradient(ellipse at 15% 5%,#f4cfc3 0,transparent 65%),radial-gradient(ellipse at 90% 70%,#eee1be 0,transparent 60%);background-color:#faf1ec}
html[data-background="sky"] #wallpaper{background-image:radial-gradient(ellipse at 85% 10%,#c2dfe9 0,transparent 65%),radial-gradient(ellipse at 10% 85%,#d5e3cf 0,transparent 60%);background-color:#eff5f7}
html[data-background="lilac"] #wallpaper{background-image:radial-gradient(ellipse at 10% 10%,#d6c9eb 0,transparent 65%),radial-gradient(ellipse at 90% 80%,#efd7d9 0,transparent 60%);background-color:#f3eff8}
html[data-background="custom"] #wallpaper::after{background:#f3f5ef73}
html[data-theme="dark"] #wallpaper::after{background:#142019d9}
html[data-theme="dark"][data-background="custom"] #wallpaper::after{background:#142019a6}

/* A shared, interruptible selection pill, behind all five controls. */
.dock-indicator{position:absolute;left:0;opacity:0;border-radius:21px;background:#7f9a6b16;pointer-events:none;will-change:transform}
.dock .nav-button,.dock .add-button{position:relative;z-index:1}
.dock .nav-button.active{background:transparent}
.nav-button.active [data-icon]{animation:tab-arrive .26s ease-out}
@keyframes tab-arrive{0%{transform:scale(.91)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

.appearance-options{margin-top:22px}.settings-label{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
.material-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.material-choice{min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:13px;border-radius:20px;background:#90a17b09;border:1px solid var(--line)}
.material-choice strong{font-size:13px;font-weight:550}.material-choice small{font-size:10px;color:var(--muted)}
.material-choice.selected{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.material-sample{display:block;width:100%;height:48px;border-radius:12px;margin-bottom:4px;background:radial-gradient(ellipse at 85% 20%,#b6cda7,transparent 65%),linear-gradient(130deg,#e3eada,#e7d8c8);position:relative;overflow:hidden}
.material-sample::after{content:"";position:absolute;inset:8px 12px;border-radius:16px}
.soft-sample::after{background:#ffffffbd;box-shadow:0 3px 8px #334d3310}
.clear-sample::after{background:linear-gradient(140deg,#ffffff70,#ffffff0a 45%,#ffffff40);border:1px solid #ffffffda;box-shadow:inset 1px 1px 2px #fff,inset -1px -1px 2px #fff8,0 4px 10px #334d3320;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.background-label{margin-top:22px}.background-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.background-choice{padding:3px 0;background:transparent;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;border-radius:10px}
.background-choice small{font-size:10px;color:var(--muted)}
.background-swatch{width:100%;aspect-ratio:1;border-radius:12px;border:2px solid transparent;box-shadow:inset 0 0 0 1px #30453612;display:grid;place-items:center;font-size:22px;color:var(--green);background-position:center;background-size:cover}
.background-choice.selected .background-swatch{border-color:var(--green);outline:2px solid var(--solid);outline-offset:-4px}
.background-choice.selected small{color:var(--green)}
.swatch-sage{background:linear-gradient(140deg,#d0e2bc,#efe4d6)}.swatch-peach{background:linear-gradient(140deg,#f0c2b6,#f2e3b9)}.swatch-sky{background:linear-gradient(140deg,#b8d9ed,#dce6d0)}.swatch-lilac{background:linear-gradient(140deg,#cdbce5,#f0d5d9)}.swatch-plain{background:#f3f5ef}.swatch-custom{background-color:#92a58216}
.wallpaper-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px}.material-about a{display:block;margin-top:6px}.settings-card #wallpaper-status{margin:4px 0 0}
.material-choice[data-material-choice="optics"]{grid-column:1/-1;display:grid;grid-template-columns:74px 1fr;column-gap:13px}
.material-choice[data-material-choice="optics"] .material-sample{grid-row:1/3;margin:0;height:48px}
.material-choice[data-material-choice="optics"] strong{align-self:end}
.optics-sample::after{background:#ffffff0d;border:1px solid #ffffff80;box-shadow:inset 1px 1px 1px #ffffffb8,inset -1px -1px 1px #284a3326;transform:skew(-5deg)}
.optics-wallpaper{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
html[data-optics="on"] .ambient{display:none}
html[data-optics="on"] #wallpaper.optics-source-ready::after{display:none}
.optics-lens{display:none;position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none;z-index:0;border-radius:inherit}
html[data-optics="on"][data-material="hyalite"] .energy-card.optics-ready{isolation:isolate;background:transparent;border-color:transparent;box-shadow:0 7px 24px #2448320b;backdrop-filter:none;-webkit-backdrop-filter:none}
.energy-card.optics-ready>.optics-lens{display:block}
.energy-card.optics-ready>:not(.optics-lens){position:relative;z-index:1}

/* Safari gets the complete CSS material; Hyalite adds supported refraction. */
html[data-material="hyalite"]{--surface:#ffffff29;--solid:#ffffffc9;--glass:#ffffff14;--shadow:0 12px 34px #2448320d;--muted:#496351}
html[data-material="hyalite"] .card,html[data-material="hyalite"] .meal-content{background:linear-gradient(135deg,#ffffff14,transparent 48%),var(--surface);border-color:#ffffff80;box-shadow:inset 0 1px 0 #ffffffa6,var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-material="hyalite"] .glass,html[data-material="hyalite"] .sheet{background:linear-gradient(145deg,#ffffff1f,transparent 35%,#ffffff08),var(--glass);border:1px solid #ffffffa8;box-shadow:inset 1px 1px 1px #ffffffdb,inset -1px -1px 1px #ffffff70,0 14px 38px #273d3221;backdrop-filter:var(--hyalite,blur(5px) saturate(135%));-webkit-backdrop-filter:var(--hyalite,blur(5px) saturate(135%))}
html[data-material="hyalite"] .sheet{--glass:#f3f5efd9}
html[data-material="hyalite"] .dock-indicator{background:linear-gradient(140deg,#ffffff38,#ffffff10);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px #fff8,0 2px 7px #284a3310;border:1px solid #ffffff90}
html[data-material="hyalite"] .pending-card,html[data-material="hyalite"] .source-note{background:#ffffff1f;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-background="custom"]{--muted:#5c7164}
/* Avoid stacking a white wallpaper wash under already translucent glass. */
html[data-material="hyalite"][data-background="custom"] #wallpaper::after{background:#f3f5ef14}
html[data-material="hyalite"][data-background="custom"]{--ink:#203b2d;--muted:#405c49}
html[data-material="hyalite"] .nav-button{color:#526b58}
html[data-background="custom"] .intro,html[data-background="custom"] .masthead,html[data-background="custom"] .meal-head,html[data-background="custom"] .section-title{text-shadow:0 1px 12px #ffffffcc}
html[data-theme="dark"][data-material="hyalite"]{--surface:#22362a57;--solid:#2c3f32ed;--glass:#233b2b38;--muted:#b1c1b0;--shadow:0 12px 34px #0002}
html[data-theme="dark"][data-material="hyalite"] .card,html[data-theme="dark"][data-material="hyalite"] .meal-content{background:linear-gradient(135deg,#ffffff0a,transparent 55%),var(--surface);border-color:#ffffff1f;box-shadow:inset 0 1px 0 #ffffff18,var(--shadow)}
html[data-theme="dark"][data-material="hyalite"] .glass,html[data-theme="dark"][data-material="hyalite"] .sheet{background:linear-gradient(145deg,#ffffff10,transparent 50%),var(--glass);border-color:#ffffff38;box-shadow:inset 1px 1px 1px #ffffff35,inset -1px -1px 1px #ffffff12,0 14px 38px #0003}
html[data-theme="dark"][data-material="hyalite"] .sheet{--glass:#203027eb}
html[data-theme="dark"][data-material="hyalite"] .dock-indicator{background:#ffffff14;border-color:#ffffff28;box-shadow:inset 0 1px 0 #ffffff35,0 2px 7px #0001}
html[data-theme="dark"][data-material="hyalite"] .pending-card,html[data-theme="dark"][data-material="hyalite"] .source-note{background:#24352a47}
html[data-theme="dark"][data-background="custom"]{--muted:#c0cebe}
html[data-theme="dark"][data-material="hyalite"][data-background="custom"]{--ink:#e4ebdf;--muted:#c0cebe}
html[data-theme="dark"][data-material="hyalite"][data-background="custom"] #wallpaper::after{background:#14201966}
html[data-theme="dark"][data-material="hyalite"] .nav-button{color:#c0cebe}
html[data-material="hyalite"] .nav-button.active{color:var(--green)}
html[data-theme="dark"][data-background="custom"] .intro,html[data-theme="dark"][data-background="custom"] .masthead,html[data-theme="dark"][data-background="custom"] .meal-head,html[data-theme="dark"][data-background="custom"] .section-title{text-shadow:0 1px 12px #102017}
@media(prefers-reduced-motion:reduce){.nav-button.active [data-icon]{animation:none}.dock-indicator{will-change:auto}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html[data-material][data-theme] :is(.glass,.sheet,.card,.meal-content,.pending-card,.source-note){background:var(--page);backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-material] .dock-indicator{background:#90a17b2b;box-shadow:none;border:1px solid var(--green)}
  .clear-sample::after{backdrop-filter:none;-webkit-backdrop-filter:none;background:#ffffffc9}
}
@media(prefers-contrast:more){html[data-material],html[data-material][data-background]{--muted:#405c49;--line:#53614d66}html[data-theme="dark"][data-material],html[data-theme="dark"][data-material][data-background]{--muted:#d1dece}.background-choice small,.material-choice small{color:var(--ink)}html[data-material] .card,html[data-material] .glass,html[data-material] .meal-content{border-color:var(--muted)}}