:root { color:#f8eceb; background:#0a0507; font-family:Inter,ui-sans-serif,system-ui,sans-serif; line-height:1.5; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { min-height:100vh; margin:0; background:radial-gradient(circle at 80% -10%,#651226 0,transparent 34%),radial-gradient(circle at 0 38%,#2a0711 0,transparent 35%),#0a0507; }
body::before { position:fixed; inset:0; z-index:-1; opacity:.32; content:""; background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px); background-size:42px 42px; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; border:1px solid #ee264b; border-radius:5px; padding:.72rem 1rem; color:#fff5f5; background:linear-gradient(135deg,#c90f32,#721025); box-shadow:0 0 20px #c90f3240; font-size:.78rem; font-weight:850; letter-spacing:.02em; text-transform:uppercase; }
button:hover { filter:brightness(1.18); transform:translateY(-1px); }
nav button:hover { transform:none; }
button.secondary,nav button { border-color:#54202b; color:#eecfd3; background:#180d10; box-shadow:none; }
button.active { border-color:#ff5a74; color:#fff; background:#dd1238; box-shadow:0 0 25px #de133a80; }
#app { width:min(100%,980px); margin:auto; padding:max(1.25rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left)); }
#main-view.split-open { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.9fr); gap:1rem; align-items:start; }.split-open #app-header,.split-open #app-nav { grid-column:1 / -1; }.split-open #content { min-width:0; }.split-open .card { min-width:0; }
.split-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }.split-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ffe9ed; }.split-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; }.split-save { border-color:#d93a56; color:#fff0f2; background:#641223; }.split-frame { display:block; width:100%; height:min(68vh,760px); margin:.75rem 0; border:1px solid #683042; border-radius:5px; background:#0b0608; }.split-same-tab { display:inline-flex; align-items:center; justify-content:center; min-height:2.2rem; margin:0; padding:.38rem .65rem; border:1px solid #6a2635; border-radius:999px; color:#ffdfe4; background:#21080eeb; font-size:.68rem; font-weight:850; text-decoration:none; white-space:nowrap; }.split-same-tab:hover { border-color:#ff526d; color:#fff; background:#3d0a15; }.split-open #split-panel { position:sticky; top:1rem; display:grid; gap:.3rem; border:1px solid #6b2638; border-radius:8px; padding:1rem; background:#170a0eee; box-shadow:0 18px 55px #0008; }
.card { border:1px solid #5d1c2b; border-radius:8px; padding:clamp(1rem,3vw,1.3rem); background:linear-gradient(145deg,#1b0b0fdd,#10090bdd); box-shadow:0 18px 55px #0008,inset 0 1px #ffffff0c; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.auth { width:min(100%,450px); margin:12vh auto; }
.eyebrow { margin:0; color:#ff6178; font-size:.72rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
h1 { overflow:visible; margin:.35rem 0 1rem; padding:.08em 0 .03em; font-size:clamp(2rem,6vw,3.5rem); line-height:1.06; letter-spacing:-.05em; text-transform:uppercase; }
h2 { margin:0; color:#fff5f5; font-size:1.5rem; } h3 { color:#ffced5; }
header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; overflow:visible; margin:1rem 0; }
.header-title { position:relative; z-index:1; min-width:0; }.header-art { position:relative; display:flex; flex:0 1 13rem; align-items:center; align-self:stretch; min-width:8.4rem; min-height:5.25rem; overflow:hidden; border:1px solid #7e3144; border-radius:999px; background:radial-gradient(circle at 30% 50%,#63142a,#1d0a10 70%); box-shadow:inset 0 0 30px #d2163b2e,0 10px 26px #0006; pointer-events:none; }.header-art::after { position:absolute; inset:0; content:""; border:1px solid #ffffff14; border-radius:inherit; }.header-art img { position:absolute; display:block; object-fit:contain; filter:drop-shadow(0 7px 10px #090306aa); }.header-phoenix { width:13rem; height:8.6rem; left:-1.65rem; top:-1.45rem; transform:rotate(-9deg); }.header-orbit { width:4.25rem; height:4.25rem; right:.18rem; bottom:.18rem; opacity:.98; }
nav { display:flex; gap:.5rem; overflow-x:auto; margin-bottom:1rem; padding-bottom:.2rem; scrollbar-color:#a4243c #16090d; }
form,label { display:grid; gap:.4rem; color:#edcbd0; font-weight:700; } form { gap:.9rem; }
input:not([type="checkbox"]),textarea,select { width:100%; border:1px solid #61303a; border-radius:4px; padding:.75rem; color:#fff4f5; background:#0c0709; outline-color:#ff3154; }
textarea { min-height:180px; font-family:ui-monospace,SFMono-Regular,monospace; }
input[type="checkbox"] { -webkit-appearance:none; appearance:none; flex:0 0 1.35rem; width:1.35rem; height:1.35rem; margin:.05rem 0 0; border:1px solid #ad3249; border-radius:4px; background:#10080b; cursor:pointer; display:grid; place-content:center; }
input[type="checkbox"]::before { width:.72rem; height:.42rem; content:""; border-bottom:2px solid #fff; border-left:2px solid #fff; transform:rotate(-45deg) scale(0); transform-origin:center; transition:transform .12s ease; }
input[type="checkbox"]:checked { border-color:#ff5871; background:#d6133a; box-shadow:0 0 15px #dc183e80; }
input[type="checkbox"]:checked::before { transform:rotate(-45deg) scale(1); }
input[type="checkbox"]:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.error { min-height:1.2rem; margin:0; color:#ff8295; }.muted { color:#b99ca2; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.recipe-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem; }
.recipe-choice { display:grid; grid-template-columns:minmax(0,1fr) 5.7rem; align-items:stretch; overflow:hidden; border:1px solid #5c1c2b; border-radius:6px; background:linear-gradient(145deg,#230c12,#12090b); }.recipe-selection { display:flex; align-items:flex-start; gap:.65rem; min-width:0; padding:.9rem; color:#ffeef0; cursor:pointer; }.recipe-selection strong { min-width:0; overflow-wrap:anywhere; line-height:1.28; }.recipe-multiplier { display:grid; gap:.2rem; align-content:center; border-left:1px solid #5c1c2b; padding:.5rem .55rem; color:#ffcbd4; font-size:.62rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }.recipe-multiplier input { min-height:2.1rem; padding:.28rem .4rem; font-size:.9rem; text-align:center; }.recipe-multiplier input:disabled { opacity:.38; }
.recipe-card { display:grid; grid-template-columns:minmax(0,1fr) auto; overflow:hidden; border:1px solid #5c1c2b; border-radius:6px; background:linear-gradient(145deg,#230c12,#12090b); }
.recipe { display:grid; gap:.5rem; min-width:0; border:0; border-radius:0; padding:1rem; color:#ffeef0; background:transparent; box-shadow:none; text-align:left; text-transform:none; font-size:1rem; }
.recipe-times { font-size:.82rem; }
.recipe:hover { background:#ffffff08; box-shadow:none; }.recipe-card:has(.recipe:hover) { border-color:#f33857; box-shadow:0 0 22px #d20f343d; }
.icon-danger { align-self:stretch; border:0; border-left:1px solid #5c1c2b; border-radius:0; padding:.5rem .6rem; color:#ffbac5; background:#280b12; box-shadow:none; font-size:.65rem; writing-mode:vertical-rl; }
.icon-danger:hover,.danger { border-color:#ff536b; background:#8d1028; }.tag { display:inline-block; margin-right:.3rem; border-radius:99px; padding:.1rem .5rem; color:#ffbdc8; background:#4b1423; font-size:.78rem; }
.detail { display:grid; gap:1.25rem; }.meta,.actions { display:flex; flex-wrap:wrap; gap:.6rem; }.meta { gap:.8rem; }.split { display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; }.ingredients li,.steps li { margin:.45rem 0; }.star { color:#ff4666; font-size:1.2rem; }
.shopping-item { display:flex; align-items:flex-start; gap:.65rem; padding:.5rem 0; border-bottom:1px solid #3e1720; }.shopping-copy { display:grid; gap:.08rem; min-width:0; }.shopping-copy strong { color:#fff1f2; font-size:.95rem; line-height:1.25; }.shopping-copy small { font-size:.76rem; line-height:1.3; }.need-detail { display:none; }.purchase { color:#ff9cad; font-weight:800; }.aisle-label { color:#ffce7a; font-weight:800; }.s-product { color:#b8f2ca; font-weight:800; }.s-kaupat-link { width:max-content; color:#ff91a1; font-size:.76rem; font-weight:850; }.shopping-item.done { color:#80646a; text-decoration:line-through; }.empty { padding:2rem; text-align:center; }.notice { border-left:4px solid #ff2f54; border-radius:3px; padding:.8rem; color:#ffdce2; background:#4a1020; }.danger-zone { border-top:1px solid #6b1f30; padding-top:1rem; }.source-links { display:flex; flex-wrap:wrap; gap:.7rem; }.source-links a { border-bottom:1px solid #ff536c; color:#ff768c; font-weight:800; text-decoration:none; }.import-card { max-width:760px; }.import-preview { border:1px solid #923044; border-radius:5px; padding:1rem; background:#260c14; }.protein { display:inline-block; margin:.2rem 0; padding:.2rem .5rem; color:#fff; background:#e0183e; font-size:.78rem; font-weight:900; letter-spacing:.08em; }hr { width:100%; margin:1rem 0; border:0; border-top:1px solid #5c1f2b; }
.saved-lists { display:grid; gap:.45rem; }.saved-list { display:grid; grid-template-columns:minmax(0,1fr) auto; overflow:hidden; border:1px solid #5c1c2b; border-radius:6px; background:#190a0e; }.saved-list-open { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.75rem; min-height:0; border:0; border-radius:0; padding:.7rem .8rem; color:#ffeef0; background:transparent; box-shadow:none; text-align:left; text-transform:none; }.saved-list-open:hover { background:#ffffff0a; box-shadow:none; transform:none; }.saved-list-open strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.saved-list-open small { color:#c9a8af; font-size:.72rem; text-align:right; white-space:nowrap; }.list-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.8rem; }.shopping-back { width:max-content; }.s-search-status { margin-top:.25rem; color:#ffd58c; font-weight:800; }
.prisma-map { margin:1.25rem 0; border:1px solid #773046; border-radius:7px; padding:1rem; background:linear-gradient(145deg,#280d16,#15090c); }.map-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.map-heading h3 { margin:.2rem 0; }.map-count { border:1px solid #bd3d55; border-radius:99px; padding:.25rem .55rem; color:#ffd3da; background:#4b1423; font-size:.78rem; font-weight:850; }.store-floor { display:grid; grid-template-columns:repeat(6,minmax(2.4rem,1fr)); gap:.55rem; min-height:9rem; margin:1rem 0; border:2px solid #783246; border-radius:6px; padding:1.5rem .75rem; background:repeating-linear-gradient(90deg,#13080c 0,#13080c 13%,#2f101a 13.5%,#13080c 14.5%); align-content:center; }.store-floor:empty::after { grid-column:1 / -1; content:"Ei aktiivisia hyllyvälejä"; color:#9e7a81; text-align:center; }.aisle { min-height:3rem; border-color:#ff5973; border-radius:4px; padding:.35rem; font-size:1rem; }.aisle-detail { min-height:3.2rem; border-left:3px solid #e61943; padding:.7rem .8rem; color:#f8dce1; background:#390d19; }.aisle-detail strong { display:block; }.aisle-detail ul { margin:.35rem 0 0; padding-left:1.1rem; }.aisle-detail li { margin:.2rem 0; }
.real-floor { position:relative; display:block; min-height:0; overflow:hidden; margin:1rem 0; border:2px solid #783246; border-radius:6px; padding:0; background:#f4f3f1; aspect-ratio:1947 / 665; }.prisma-layout-image { display:block; width:100%; height:100%; object-fit:contain; }.real-floor .aisle { position:absolute; left:var(--x); top:var(--y); z-index:1; display:grid; place-items:center; width:clamp(1.04rem,2.08vw,1.44rem); min-width:0; height:clamp(1.04rem,2.08vw,1.44rem); min-height:0; padding:0; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:99px; background:#d2143c; box-shadow:0 0 0 2px #17070bdd,0 0 11px #ff3157cc; font-size:clamp(.46rem,1vw,.6rem); line-height:1; }.real-floor .aisle:hover { z-index:3; transform:translate(-50%,-50%) scale(1.18); }
.admin-panel { max-width:760px; }.invite-link { display:grid; gap:.35rem; margin:1rem 0; border:1px solid #923044; border-radius:5px; padding:1rem; background:#260c14; overflow-wrap:anywhere; }.invite-link a { color:#ff91a1; }.invite-list { display:grid; gap:.5rem; }.invite-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:.8rem; border-bottom:1px solid #4a1722; padding:.65rem 0; }.auth a { display:inline-block; color:#ff91a1; font-weight:800; }
@media (max-width:650px) { #app { padding:max(.8rem,env(safe-area-inset-top)) max(.8rem,env(safe-area-inset-right)) max(.8rem,env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-left)); } #main-view.split-open { grid-template-columns:1fr; } .split-open #split-panel { position:static; } .split-frame { height:55vh; } input:not([type="checkbox"]),textarea,select { font-size:16px; } header { align-items:center; margin-top:.4rem; } header h1 { font-size:2rem; } .header-art { display:none; } .split { grid-template-columns:1fr; } .recipe-list { grid-template-columns:1fr; } .actions > button { flex:1 1 11rem; } .invite-row { grid-template-columns:1fr auto; } .invite-row .muted:last-child { grid-column:1 / -1; } .store-floor { grid-template-columns:repeat(4,minmax(2.4rem,1fr)); padding:1rem .55rem; } .real-floor { padding:0; } .real-floor .aisle { width:1.04rem; min-width:0; height:1.04rem; min-height:0; font-size:.46rem; } }
.map-stale { margin: .65rem 0; padding: .7rem .8rem; border-left: 3px solid #f2ae4c; background: rgba(242,174,76,.1); color: #ffe0ab; font-size: .88rem; line-height: 1.45; }
.map-editor-panel { margin-top:1.5rem; border-top:1px solid #6b1f30; padding-top:1.25rem; }.map-editor { touch-action:none; user-select:none; }.area-marker { position:absolute; left:var(--x); top:var(--y); z-index:2; display:grid; place-items:center; width:1.72rem; min-width:1.72rem; height:1.72rem; min-height:1.72rem; max-width:none; padding:0; transform:translate(-50%,-50%); border:1px solid #fff0c7; border-radius:99px; color:initial; background:#ffd17c; box-shadow:0 0 0 2px #17070bdd,0 0 13px #ffd17c99; font-size:.9rem; line-height:1; text-transform:none; touch-action:none; }.area-marker.dragging { z-index:3; border-color:#fff; background:#ffe5ad; box-shadow:0 0 0 3px #17070bdd,0 0 22px #ffd17c; cursor:grabbing; }.area-marker:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.aisle-filter { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:.8rem 0; border:1px solid #9a364c; border-radius:5px; padding:.7rem .8rem; color:#ffdae0; background:#321019; }.aisle-filter button { flex:0 0 auto; }
.aisle-editor-marker { position:absolute; left:var(--x); top:var(--y); z-index:1; display:grid; place-items:center; width:1.1rem; height:1.1rem; border:1px solid #ffd17a; border-radius:3px; padding:0; transform:translate(-50%,-50%); color:#fff4db; background:#5b2631; box-shadow:0 0 0 1px #17070baa; font-size:.46rem; touch-action:none; }.aisle-editor-marker.dragging { z-index:4; border-color:#fff; background:#d2143c; box-shadow:0 0 0 3px #17070bdd,0 0 20px #ff3157; cursor:grabbing; }
.area-marker:hover,.area-marker.dragging,.aisle-editor-marker:hover,.aisle-editor-marker.dragging { transform:translate(-50%,-50%); }
.portal { display:grid; gap:1rem; max-width:760px; margin:8vh auto; }.portal-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.portal h2 { font-size:clamp(2rem,6vw,3.3rem); letter-spacing:-.04em; text-transform:uppercase; }.portal-signout { flex:0 0 auto; }.portal-email { margin:0; color:#ffafbb; font-weight:850; }.portal-apps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.8rem; }.portal-app { display:grid; gap:.45rem; border:1px solid #803045; border-radius:6px; padding:1rem; color:#fff3f4; background:linear-gradient(145deg,#2b0d17,#16090d); text-decoration:none; transition:.15s ease; }.portal-app:hover { border-color:#ff4e6d; transform:translateY(-2px); box-shadow:0 0 24px #d20f344d; }.portal-open { color:#ff8b9d; font-size:.82rem; font-weight:900; }
.extension-download { display:grid; gap:.55rem; border:1px solid #8a3046; border-radius:7px; padding:1rem; background:linear-gradient(145deg,#2d0d18,#15090d); }.extension-download h3 { margin:0; }.extension-download p { margin:0; }.download-extension { display:inline-flex; width:max-content; border:1px solid #ee264b; border-radius:5px; padding:.72rem 1rem; color:#fff5f5; background:linear-gradient(135deg,#c90f32,#721025); box-shadow:0 0 20px #c90f3240; font-size:.78rem; font-weight:850; letter-spacing:.02em; text-decoration:none; text-transform:uppercase; }
.mobile-support { display:grid; gap:.55rem; border:1px solid #6a4d7e; border-radius:7px; padding:1rem; background:linear-gradient(145deg,#22132d,#150a1c); }.mobile-support h3,.mobile-support p { margin:0; }
.shopping-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.8rem; margin:1rem 0; border:1px solid #7a3045; border-radius:7px; padding:.85rem; background:linear-gradient(145deg,#2d0d18,#170a0e); }.summary-price,.summary-shelves { display:grid; gap:.3rem; align-content:start; }.summary-price strong { color:#b8f2ca; font-size:1.15rem; }.summary-aisles { display:flex; flex-wrap:wrap; gap:.35rem; }.summary-aisle { min-height:auto; padding:.34rem .48rem; border-color:#a96e26; color:#ffe0a7; background:#462413; box-shadow:none; font-size:.67rem; text-transform:none; }
.s-candidates { display:grid; gap:.35rem; margin-top:.55rem; border-left:2px solid #c98c40; padding:.55rem 0 .1rem .65rem; }.candidate-title { color:#ffd58c; font-weight:900; }.s-candidate { display:flex; align-items:center; justify-content:space-between; gap:.75rem; border:1px solid #663040; border-radius:4px; padding:.55rem .65rem; color:#ffe7eb; background:#240c13; box-shadow:none; font-size:.78rem; font-weight:750; letter-spacing:0; text-align:left; text-decoration:none; text-transform:none; }.s-candidate:hover { border-color:#ff6b82; background:#3d101b; box-shadow:none; transform:none; }.s-candidate strong { color:#a9efc3; white-space:nowrap; }
.s-candidate span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s-product-recheck { width:max-content; min-height:2rem; margin-top:.55rem; border-color:#774052; padding:.35rem .55rem; color:#ffd5dc; background:#281019; box-shadow:none; font-size:.65rem; text-transform:none; }.s-product-recheck:hover { border-color:#ff6b82; background:#42111d; box-shadow:none; transform:none; }
.package-size { color:#b8f2ca; font-weight:800; }
@media (max-width:650px) { .area-marker { width:1.55rem; min-width:1.55rem; height:1.55rem; min-height:1.55rem; max-width:none; padding:0; font-size:.78rem; } .portal { margin:3vh auto; }.portal-heading { align-items:flex-start; }.portal-signout { min-height:2.45rem; padding:.5rem .6rem; font-size:.65rem; } }
@media (max-width:650px) { button,.download-extension { min-height:44px; } .shopping-item { min-height:52px; padding:.65rem 0; } .shopping-copy strong { font-size:1rem; } .map-heading { align-items:flex-start; } .map-count { white-space:nowrap; } .list-actions > button { flex:1 1 12rem; } .shopping-summary { grid-template-columns:1fr; } }

/* Ostoslistan koko rivi on valinta, mutta rasti pysyy selkeästi ennen tekstiä. */
.shopping-item {
  position:relative;
  display:grid;
  grid-template-columns:1.45rem minmax(0,1fr);
  align-items:start;
  gap:.65rem;
  min-height:0;
  margin:.45rem 0;
  border:2px solid #d61d42;
  border-radius:1rem;
  padding:.72rem .85rem;
  color:#ffeef0;
  background:linear-gradient(135deg,#260b13,#15080c);
  box-shadow:inset 0 1px #ffffff0a,0 0 0 1px #5f1225 inset;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:border-color .14s ease,background .14s ease,color .14s ease,opacity .14s ease;
}
.shopping-item > input[type="checkbox"] {
  position:static;
  flex:0 0 auto;
  width:1.3rem;
  height:1.3rem;
  margin:.08rem 0 0;
  opacity:1;
  clip:auto;
  clip-path:none;
  overflow:visible;
  pointer-events:auto;
  border-radius:99px;
}
.shopping-item:hover { border-color:#ff5c78; background:linear-gradient(135deg,#35101b,#1c090e); }
.shopping-item:active { border-color:#ff9aaa; background:#43121e; }
.shopping-item:focus-within { outline:3px solid #ffe3e8; outline-offset:3px; }
.shopping-item .shopping-copy { display:grid; gap:.16rem; width:100%; }
.shopping-item .shopping-copy strong { font-size:1rem; line-height:1.28; }
.shopping-item .shopping-copy small { line-height:1.35; }
.shopping-item.done {
  border-color:#61565a;
  color:#9b8d91;
  background:linear-gradient(135deg,#211d1e,#141112);
  box-shadow:none;
}
.shopping-item.done .shopping-copy { opacity:.58; filter:grayscale(1); }
.shopping-item.done .shopping-copy::before {
  content:"✓ OSTETTU · napauta palauttaaksesi";
  color:#b5aaac;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  text-decoration:none;
}
.shopping-item.done .shopping-copy > strong,
.shopping-item.done .shopping-copy > small,
.shopping-item.done .shopping-copy > a,
.shopping-item.done .shopping-copy .s-candidates {
  color:#a69a9d !important;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.mobile-recipe-save { display:none; }
.s-price-row { display:flex; align-items:center; gap:.55rem; min-width:0; margin-top:.08rem; }
.s-product-price { min-width:0; color:#b8f2ca; font-weight:850; }
.s-product-freshness { color:#b9a0a6; font-size:.7rem !important; }
.s-product-freshness.stale { color:#ffcf85; }
.price-change { font-size:.72rem !important; font-weight:850; }
.price-change.raised { color:#ffb2b2; }
.price-change.lowered { color:#a9efc3; }
.shopping-share { display:grid; gap:.48rem; margin:.75rem 0; border:1px solid #5d2334; border-radius:6px; padding:.65rem .75rem; background:#210b12; }
.shopping-share-controls { display:flex; gap:.45rem; align-items:center; }
.shopping-share-controls :is(input,select) { min-width:0; flex:1; }
.shopping-share-members { display:flex; flex-wrap:wrap; gap:.35rem; }
.shopping-share-member { display:inline-flex; align-items:center; gap:.25rem; border:1px solid #723045; border-radius:99px; padding:.18rem .28rem .18rem .55rem; color:#f7dfe3; font-size:.75rem; }
.shopping-share-member .icon-danger { min-height:1.3rem; min-width:1.3rem; padding:.05rem .28rem; border:0; background:transparent; font-size:1rem; }
.planner { display:grid; gap:1rem; }
.planner-week-controls { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.planner-week-controls strong { text-align:center; }
.planner-palette { display:flex; gap:.45rem; overflow-x:auto; padding:.15rem 0 .45rem; }
.planner-recipe-chip { flex:0 0 auto; min-height:2.2rem; border-color:#723045; padding:.4rem .62rem; color:#ffe0e5; background:#2d0c16; box-shadow:none; font-size:.72rem; text-transform:none; }
.planner-recipe-chip:hover { transform:none; border-color:#ff6b82; background:#46101d; }
.planner-grid { display:grid; grid-template-columns:repeat(7,minmax(9rem,1fr)); gap:.55rem; overflow-x:auto; padding-bottom:.35rem; }
.planner-day { display:grid; align-content:start; gap:.48rem; min-height:11rem; border:1px solid #5d2334; border-radius:7px; padding:.6rem; background:#1b0a0f; transition:border-color .15s ease,background .15s ease; }
.planner-day.drag-target { border-color:#ff5673; background:#390d19; }
.planner-day-heading { display:flex; justify-content:space-between; gap:.45rem; }
.planner-day-recipes { display:grid; gap:.32rem; }
.planner-day-recipe { display:flex; align-items:center; justify-content:space-between; gap:.25rem; border-left:2px solid #e61a46; padding:.3rem .1rem .3rem .42rem; color:#ffe2e7; font-size:.75rem; }
.planner-day-recipe .icon-danger { min-height:1.35rem; min-width:1.35rem; padding:.05rem .24rem; border:0; background:transparent; font-size:1rem; }
.planner-day select { min-width:0; margin-top:auto; font-size:.75rem; }
@media (max-width:650px) { .planner-week-controls button { min-height:2.2rem; padding:.4rem .48rem; font-size:.65rem; } .planner-grid { grid-template-columns:repeat(7,minmax(10.5rem,1fr)); } }
.pantry { display:grid; gap:.85rem; }
.pantry-add { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(9rem,1fr) auto auto; align-items:end; gap:.55rem; }
.pantry-skip { display:flex; align-items:center; gap:.4rem; min-height:2.5rem; color:#f5dbe0; font-size:.78rem; }
.pantry-skip input { width:1.05rem; min-height:1.05rem; }
.pantry-items { display:grid; gap:.45rem; }
.pantry-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.65rem; border:1px solid #5d2334; border-radius:6px; padding:.55rem .65rem; background:#200b11; }
.pantry-item>div { display:grid; gap:.12rem; }
@media (max-width:700px) { .pantry-add { grid-template-columns:1fr 1fr; } .pantry-add button { grid-column:1 / -1; } .pantry-skip { grid-column:1 / -1; } }
.recipe-editor { display:grid; gap:.8rem; max-width:820px; }
.recipe-editor-numbers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.recipe-editor textarea { min-height:9rem; }
.recipe-editor .recipe-editor-steps { min-height:12rem; }
@media (max-width:560px) { .recipe-editor-numbers { grid-template-columns:1fr; } }
.diet-warning { display:inline-block; border-left:2px solid #ffbd57; padding-left:.42rem; color:#ffd58c; font-size:.72rem; font-weight:800; line-height:1.35; }
.detail-diet-warning { margin:.65rem 0 0; }
.diet-filter { display:flex; align-items:center; gap:.45rem; width:max-content; color:#f7d8de; font-size:.8rem; }
.diet-settings { display:grid; gap:.65rem; }
.diet-options { display:flex; flex-wrap:wrap; gap:.4rem; }
.diet-option { display:inline-flex; align-items:center; gap:.35rem; border:1px solid #663044; border-radius:99px; padding:.32rem .55rem; color:#f6dce1; font-size:.75rem; }
.diet-option input { width:1rem; min-height:1rem; }
.route-stop.current-stop { border-color:#ffcc71; color:#fff1c9; background:#4a2b13; }
.route-detail-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; }
.s-kaupat-logo {
  display:grid;
  flex:0 0 2rem;
  place-items:center;
  width:2rem;
  height:2rem;
  border:0;
  border-radius:.52rem;
  color:#fff !important;
  background:#008b52;
  box-shadow:inset 0 0 0 1px #ffffff4d,0 2px 8px #0004;
  text-decoration:none !important;
}
.s-kaupat-logo:hover { background:#00a864; filter:brightness(1.08); }
.s-kaupat-logo:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.s-kaupat-mark { font-family:Arial,sans-serif; font-size:1.18rem; font-weight:950; line-height:1; }
.map-editor-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin:.8rem 0; }
.map-editor-actions button { min-height:2.7rem; }
.aisle-controls { display:grid; gap:.7rem; margin-top:1rem; border-top:1px solid #642234; padding-top:1rem; }
.aisle-controls h4 { margin:0; color:#ffd6dc; }
.aisle-controls p { margin:0; font-size:.82rem; }
.aisle-count-config { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.55rem; max-width:25rem; }.aisle-count-config input { min-height:2.55rem; }.aisle-count-config button { min-height:2.55rem; }
.aisle-control-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr)); gap:.45rem; }
.aisle-control { display:flex; align-items:center; justify-content:space-between; gap:.35rem; border:1px solid #672334; border-radius:.5rem; padding:.35rem .35rem .35rem .55rem; color:#f5dce0; background:#210b12; font-size:.76rem; font-weight:800; }
.aisle-remove { display:grid; flex:0 0 2rem; place-items:center; min-height:2rem; width:2rem; border-color:#7a2638; border-radius:.38rem; padding:0; color:#ffccd4; background:#3a0c16; box-shadow:none; font-size:1.1rem; line-height:1; }
.aisle-remove:hover { border-color:#ff6179; background:#8a122a; transform:none; }
.aisle-restore { display:grid; gap:.55rem; border-top:1px dashed #6c2b3a; padding-top:1rem; }
.aisle-restore-grid { display:flex; flex-wrap:wrap; gap:.4rem; }
.aisle-restore-grid button { min-height:2rem; padding:.35rem .55rem; font-size:.68rem; }
.local-sync-panel { display:grid; gap:.55rem; margin:0 0 1rem; border:1px solid #b44459; border-radius:.8rem; padding:1rem; background:linear-gradient(135deg,#3a101b,#1d0b10); }
.local-sync-panel h3,.local-sync-panel p { margin:0; }
.local-sync-panel h3 { color:#ffe2e7; font-size:1.05rem; }
.local-sync-panel button { width:max-content; }
.legacy-sync-panel { border-color:#9a713a; background:linear-gradient(135deg,#342413,#1b100b); }
.local-only-label { width:max-content; border:1px solid #9b4254; border-radius:99px; padding:.14rem .45rem; color:#ffd6dd; background:#47111e; font-size:.67rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.admin-s-kaupat-refresh { display:grid; gap:.65rem; margin:1.25rem 0 0; border:1px solid #a44258; border-radius:.75rem; padding:1rem; background:linear-gradient(135deg,#35101b,#1c0a10); }.admin-s-kaupat-refresh h3,.admin-s-kaupat-refresh p { margin:0; }.admin-s-kaupat-refresh button { width:max-content; }.admin-s-kaupat-status,.admin-recipe-status { min-height:1.4rem; }
.admin-recipe-library { display:grid; gap:.7rem; }.admin-recipe-library h3,.admin-recipe-library p { margin:0; }.admin-recipe-list { display:grid; gap:.45rem; max-height:44rem; overflow:auto; padding-right:.2rem; }.admin-recipe { border:1px solid #63303d; border-radius:.5rem; background:#1d0a10; }.admin-recipe summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; align-items:center; padding:.65rem .75rem; cursor:pointer; }.admin-recipe summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.admin-recipe summary .muted { font-size:.72rem; text-align:right; }.admin-recipe-body { display:grid; gap:.45rem; border-top:1px solid #4d202b; padding:.7rem .8rem .8rem; }.admin-recipe-body h4 { margin:.35rem 0 0; font-size:.78rem; }.admin-recipe-body ul,.admin-recipe-body ol { display:grid; gap:.15rem; margin:.1rem 0; padding-left:1.25rem; font-size:.8rem; }.admin-recipe-body > button { width:max-content; margin-top:.25rem; }

@media (min-width:651px) {
  #app { width:min(100%,1100px); }
  #content > .card { padding:1.4rem; }
  .shopping-item { padding:1rem 1.1rem; }
}

@media (max-width:650px) {
  #app { width:100%; padding:.65rem max(.65rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.65rem,env(safe-area-inset-left)); }
  header { gap:.65rem; margin:.35rem 0 .75rem; }
  header .eyebrow { font-size:.62rem; }
  header h1 { margin:.18rem 0; font-size:1.65rem; letter-spacing:-.04em; }
  #logout { min-height:2.6rem; padding:.55rem .65rem; font-size:.67rem; }
  nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; overflow:visible; margin-bottom:.75rem; padding:0; }
  nav button { min-height:2.8rem; padding:.55rem .45rem; font-size:.68rem; }
  .card { border-radius:7px; padding:1rem .85rem; }
  h2 { font-size:1.32rem; }
  .list-actions { position:sticky; top:.35rem; z-index:5; margin:-.2rem 0 .8rem; padding:.35rem; border:1px solid #59202e; border-radius:.7rem; background:#13090de8; backdrop-filter:blur(10px); }
  .list-actions > button { min-height:2.8rem; flex:1 1 0; padding:.55rem .5rem; font-size:.65rem; }
  .shopping-item { min-height:0; margin:.45rem 0; border-radius:1rem; padding:.72rem .8rem; }
  .shopping-item .shopping-copy strong { font-size:1rem; }
  .shopping-item .shopping-copy small { font-size:.77rem; }
  .s-price-row { gap:.42rem; }
  .s-product-price { font-size:.74rem !important; }
  .s-kaupat-logo { flex-basis:2.15rem; width:2.15rem; height:2.15rem; }
  .shopping-item.done .shopping-copy::before { font-size:.6rem; }
  .mobile-recipe-save { position:sticky; bottom:max(.6rem,env(safe-area-inset-bottom)); z-index:4; display:block; width:100%; margin-top:.3rem; border-color:#ff6580; background:linear-gradient(135deg,#cc1538,#781027); box-shadow:0 8px 28px #0008; }
  .map-editor-actions { display:grid; grid-template-columns:1fr; }
  .map-editor-actions button { width:100%; }
  .aisle-control-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .aisle-control { min-height:2.65rem; font-size:.78rem; }
  .aisle-remove { flex-basis:2.2rem; width:2.2rem; min-height:2.2rem; }
  .local-sync-panel { padding:.85rem; }
  .admin-s-kaupat-refresh button { width:100%; }
  .admin-recipe summary { grid-template-columns:1fr; gap:.25rem; }.admin-recipe summary .muted { text-align:left; }.admin-recipe-list { max-height:none; }
  .local-sync-panel button { width:100%; }
  .shopping-summary { margin:.8rem 0; padding:.75rem; }
  .prisma-map { margin:1rem 0; padding:.75rem; }
  .map-heading { gap:.55rem; }
  .map-heading h3 { font-size:1.05rem; }
  .map-stale { font-size:.77rem; }
  .real-floor .aisle { min-width:2rem; min-height:2rem; padding:.2rem; font-size:.7rem; }
  .aisle-detail { font-size:.84rem; }
  .notice { padding:.7rem; font-size:.86rem; }
}
.source-catalog { display:grid; gap:.8rem; margin-top:1rem; border:1px solid #6e293c; border-radius:.7rem; padding:.85rem; background:#1d0a10; }.source-catalog summary { cursor:pointer; color:#ffd3da; font-weight:900; }.source-catalog h3 { margin:.35rem 0 0; font-size:.95rem; }.source-catalog p { margin:0; font-size:.84rem; }

/* Hyllyväli on ostoslistan ensisijainen reittitieto, ei huomaamaton alateksti. */
.shopping-item .aisle-label { width:max-content; margin-top:.1rem; border:1px solid #f5b94f; border-radius:99px; padding:.16rem .52rem; color:#251300; background:#ffd17c; font-size:.72rem; font-weight:950; letter-spacing:.025em; line-height:1.2; }
.shopping-item.done .aisle-label { color:#9b8d91 !important; background:#2a2426; }
.real-floor .department-marker { display:grid; place-items:center; width:clamp(1.36rem,2.48vw,1.68rem); min-width:0; height:clamp(1.36rem,2.48vw,1.68rem); min-height:0; max-width:none; border-radius:99px; padding:0; color:initial; background:#ffd17c; box-shadow:0 0 0 2px #17070bdd,0 0 13px #ffd17ccc; font-size:clamp(.66rem,1.44vw,.84rem); line-height:1; text-transform:none; }
.real-floor .department-marker:hover,.real-floor .department-marker:focus-visible { transform:translate(-50%,-50%) scale(1.12); }
.department-label { white-space:normal; }
.area-legend { display:grid; gap:.35rem; margin:.6rem 0 1rem; border-top:1px solid #5b2634; padding-top:.75rem; }.area-legend h4,.area-legend p { margin:0; }.area-legend-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.35rem .55rem; }.area-legend-item { display:grid; grid-template-columns:1.65rem minmax(0,1fr); align-items:center; gap:.45rem; border:1px solid #50212c; border-radius:.38rem; padding:.35rem .45rem; color:#f6dce1; background:#210b11; font-size:.68rem; line-height:1.15; }.area-legend-item strong,.area-legend-item small { display:block; }.area-legend-item small { margin-top:.08rem; color:#b99ca2; font-size:.61rem; }.area-legend-emoji { display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:99px; background:#ffd17c; font-size:.85rem; }
.map-heading-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.45rem; }.map-view-toggle { min-height:2.15rem; padding:.38rem .6rem; font-size:.68rem; white-space:nowrap; }.route-stops { display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.55rem; margin:1rem 0; }.route-stop { display:grid; min-height:4.7rem; place-items:center; gap:.18rem; border:1px solid #f5b94f; border-radius:.6rem; padding:.5rem; color:#291401; background:linear-gradient(145deg,#ffd98e,#e7a943); box-shadow:0 0 0 2px #17070baa; text-align:center; text-transform:none; }.route-stop:hover,.route-stop:focus-visible { border-color:#fff; background:#ffe5ad; box-shadow:0 0 0 3px #17070bdd,0 0 17px #ffd17caa; transform:translateY(-2px); }.route-stop strong { font-size:.78rem; line-height:1.15; }.route-stop small { font-size:.67rem; font-weight:850; opacity:.8; }
@media (max-width:650px) { .map-heading-actions { justify-content:flex-start; }.map-view-toggle { flex:1 1 auto; }.route-stops { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }.route-stop { min-height:4.25rem; } }

/* Future Kitchen System - visual language from the Phoenix brochure. */
:root { color:#f6f7ff; background:#07070d; }
body { overflow-x:hidden; background:radial-gradient(circle at 100% 0,#3d1854 0,transparent 30%),radial-gradient(circle at 0 100%,#0d4264 0,transparent 28%),#07070d; }
body::before { z-index:0; opacity:.4; background-image:linear-gradient(#6f7da61f 1px,transparent 1px),linear-gradient(90deg,#6f7da61f 1px,transparent 1px); background-size:28px 28px; }
#app { position:relative; z-index:1; isolation:isolate; width:min(100%,1100px); }
#app > :not(.phoenix-ambient) { position:relative; z-index:1; }
.phoenix-ambient { position:fixed; top:2vh; right:max(-12rem,calc((100vw - 1220px) / 2 - 8rem)); z-index:0; width:min(53rem,76vw); opacity:.14; pointer-events:none; filter:saturate(1.25) drop-shadow(0 0 42px #ff3f7855); transform:rotate(-9deg); }
.phoenix-ambient::before { position:absolute; inset:8% 6%; border:1px solid #58e9ff; border-radius:50%; content:""; box-shadow:0 0 0 40px #58e9ff08,0 0 80px #ca45ff45; }
.phoenix-ambient img { position:relative; display:block; width:100%; height:auto; }
.phoenix-ambient span { position:absolute; right:7%; bottom:22%; width:4.5rem; height:4.5rem; border:1px solid #74f7c0; border-radius:99px; box-shadow:0 0 0 12px #74f7c011,0 0 50px #74f7c066; }
button { border-color:#ff3f78; border-radius:999px; color:#fff; background:linear-gradient(135deg,#ff3f78,#a933cf); box-shadow:0 8px 22px #ff3f7838,inset 0 1px #ffffff44; transition:transform .16s ease,filter .16s ease,box-shadow .16s ease; }
button:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 12px 28px #ff3f7850,inset 0 1px #ffffff55; }
button.secondary,nav button { border-color:#3a4569; color:#dce2ff; background:#101525e8; box-shadow:inset 0 1px #ffffff12; }
button.secondary:hover,nav button:hover { border-color:#59e7ff; color:#fff; background:#182039; box-shadow:0 0 20px #59e7ff22; }
button.active { border-color:#ff77a0; background:linear-gradient(135deg,#ff3f78,#bc3cdf); box-shadow:0 0 26px #ff3f7877,inset 0 1px #ffffff4d; }
input:not([type="checkbox"]),textarea,select { border-color:#3a4569; border-radius:12px; color:#f6f7ff; background:#0d1120e8; outline-color:#59e7ff; box-shadow:inset 0 1px #ffffff0a; }
input[type="checkbox"] { border-color:#53648e; border-radius:99px; background:#101523; }
input[type="checkbox"]:checked { border-color:#74f7c0; background:#1db983; box-shadow:0 0 15px #74f7c066; }
h1,h2,h3 { text-shadow:0 5px 25px #0008; }
h1 { color:#f9f8ff; } h2 { color:#f7f7ff; } h3 { color:#cfd6ff; }
.eyebrow { color:#59e7ff; }
#app-header { align-items:center; min-height:9rem; overflow:hidden; border:1px solid #3b4568; border-radius:1.5rem; padding:1.25rem 1.4rem; background:linear-gradient(108deg,#101524f2 0%,#101424e8 55%,#24162ee6 100%); box-shadow:0 22px 55px #0008,inset 0 1px #ffffff16; }
#app-header::after { position:absolute; right:-9rem; bottom:-9rem; width:26rem; height:26rem; border:1px solid #59e7ff66; border-radius:50%; content:""; box-shadow:0 0 0 2rem #59e7ff05,0 0 0 4rem #ca45ff08; pointer-events:none; }
.header-title { max-width:min(100%,41rem); }
#app-header h1 { margin-bottom:0; font-size:clamp(2.1rem,5vw,3.85rem); background:linear-gradient(100deg,#fff 3%,#dbe6ff 52%,#74f7c0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.header-art { z-index:1; flex:0 0 18rem; min-width:18rem; min-height:7.3rem; border-color:#5a6b98; background:radial-gradient(circle at 35% 50%,#3e1853,#101525 68%); box-shadow:inset 0 0 42px #59e7ff1f,0 16px 34px #0008; }
.header-phoenix { width:18.5rem; height:12rem; left:-2.2rem; top:-2.2rem; transform:rotate(-12deg); }.header-orbit { width:4.9rem; height:4.9rem; right:.25rem; bottom:.18rem; }
#logout { z-index:2; flex:0 0 auto; }
#app-nav { gap:.6rem; margin:1rem 0 1.25rem; padding:.55rem; border:1px solid #303957; border-radius:999px; background:#0d1120d9; box-shadow:0 14px 28px #0006; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
#app-nav button { flex:1 1 auto; min-height:2.75rem; }
.card { border-color:#333c5d; border-radius:1.25rem; background:linear-gradient(145deg,#121726f2,#0c101ce8); box-shadow:0 22px 60px #0009,inset 0 1px #ffffff15; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.auth { overflow:hidden; border-color:#52628f; background:linear-gradient(135deg,#151b2ce8,#101120f2); }.auth::before { position:absolute; top:-6rem; right:-7rem; width:17rem; height:17rem; border:1px solid #59e7ff77; border-radius:50%; content:""; box-shadow:0 0 0 2rem #59e7ff08,0 0 6rem #ca45ff44; }.auth > * { position:relative; z-index:1; }.auth h1 { font-size:clamp(2.2rem,7vw,3.6rem); }
.recipe-card,.recipe-choice,.saved-list { border-color:#354060; border-radius:1rem; background:linear-gradient(145deg,#171c2c,#0e1220); box-shadow:inset 0 1px #ffffff0d; }.recipe-card:hover,.recipe-choice:hover,.saved-list:hover { border-color:#59e7ff; box-shadow:0 12px 28px #0008,0 0 20px #59e7ff1f; }
.recipe-card:has(.recipe:hover) { border-color:#59e7ff; box-shadow:0 0 25px #59e7ff29; }.recipe:hover,.saved-list-open:hover { background:#ffffff08; }.icon-danger { color:#ffb4c9; background:#251126; border-color:#423a60; }.icon-danger:hover,.danger { background:#8e1d45; }
.shopping-item { border-color:#303954; }.shopping-item:not(.done) { margin:.42rem 0; border:1px solid #354060; border-radius:1rem; padding:.8rem .9rem; background:#101523db; box-shadow:inset 0 1px #ffffff0a; }.shopping-item.done { background:#0d101b88; }.shopping-item .aisle-label { border-color:#59e7ff; color:#07121c; background:#59e7ff; box-shadow:0 0 12px #59e7ff55; }.purchase { color:#ffb4c9; }.s-product,.package-size { color:#74f7c0; }.s-kaupat-link { color:#7eefff; }
.notice { border-left-color:#59e7ff; color:#deefff; background:#11243a; }.map-stale { border-left-color:#ffc66d; background:#2a2118; color:#ffe0aa; }
.shopping-summary,.prisma-map { border-color:#3c496e; border-radius:1.1rem; background:linear-gradient(145deg,#141b2bf2,#0c111ee8); box-shadow:inset 0 1px #ffffff12; }.summary-price strong { color:#74f7c0; }.summary-aisle { border-color:#59e7ff; color:#baf8ff; background:#14293b; }.real-floor { border-color:#59e7ff; box-shadow:0 0 0 1px #ffffff18,0 18px 38px #0008; }.real-floor .aisle { border-color:#fff; background:linear-gradient(135deg,#ff3f78,#a933cf); box-shadow:0 0 0 4px #07070de0,0 0 22px #ff3f78bb; }.real-floor .department-marker { background:#74f7c0; box-shadow:0 0 0 3px #07070de0,0 0 22px #74f7c0bb; }
.route-stop { border-color:#59e7ff; color:#eafeff; background:linear-gradient(145deg,#19334b,#101b2d); box-shadow:inset 0 1px #ffffff22; }.route-stop:hover,.route-stop:focus-visible { border-color:#74f7c0; background:#1e4454; box-shadow:0 0 20px #59e7ff55; }
.local-sync-panel,.admin-s-kaupat-refresh,.source-catalog,.extension-download,.mobile-support { border-color:#465685; background:linear-gradient(135deg,#151a2b,#0d111e); }.local-only-label { border-color:#a054d5; color:#ebcaff; background:#2b1640; }.area-legend,.aisle-controls { border-color:#34405e; }.area-legend-item,.aisle-control,.admin-recipe { border-color:#36405f; color:#e8edff; background:#111727; }
.portal-app { border-color:#405080; background:linear-gradient(145deg,#171d31,#0d1220); }.portal-app:hover { border-color:#59e7ff; box-shadow:0 0 25px #59e7ff26; }.portal-open { color:#74f7c0; }
@media (max-width:650px) { body::before { background-size:22px 22px; }.phoenix-ambient { top:10vh; right:-42vw; width:125vw; opacity:.10; }.phoenix-ambient span { width:3rem; height:3rem; }.header-art { display:flex; position:absolute; right:.8rem; bottom:.65rem; flex-basis:5.8rem; min-width:5.8rem; min-height:3.2rem; opacity:.82; }.header-phoenix { width:8.2rem; height:5.6rem; left:-1.1rem; top:-1.15rem; }.header-orbit { width:2.15rem; height:2.15rem; right:.1rem; bottom:.1rem; } #app-header { min-height:7.4rem; align-items:flex-start; padding:.9rem; }.header-title { padding-right:5rem; } #app-header h1 { font-size:clamp(1.72rem,8vw,2.18rem); line-height:1.04; } #logout { position:absolute; top:.85rem; right:.8rem; min-height:2.15rem; padding:.42rem .55rem; font-size:.55rem; } #app-nav { display:flex; gap:.42rem; overflow-x:auto; padding:.45rem; border-radius:1rem; } #app-nav button { flex:0 0 auto; min-height:2.45rem; padding:.48rem .7rem; font-size:.63rem; } .card { border-radius:1rem; } .shopping-item:not(.done) { padding:.7rem .75rem; }.auth { margin:9vh auto; } }

/* Hyväksyntää vaativa reseptijako. */
.recipe-shares { display:grid; gap:.55rem; margin:0 0 1rem; border:1px solid #3c9d9f; border-radius:1rem; padding:1rem; background:linear-gradient(135deg,#09282dcb,#100f21d9); }.recipe-shares h3 { margin:.05rem 0; }.sent-shares { border-color:#655ea8; background:linear-gradient(135deg,#17132dce,#180d1bd9); }.recipe-share-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid #74d9d633; padding-top:.55rem; }.recipe-share-row strong,.recipe-share-row small { display:block; }.recipe-share-actions { justify-content:flex-end; }.recipe-share-actions button { flex:0 0 auto; }.recipe-share-form { display:grid; gap:.7rem; border-color:#32aeb0; background:linear-gradient(135deg,#092a30c9,#120e1bd9); }.recipe-share-form h3 { margin:0; }
@media (max-width:650px) { .recipe-share-row { align-items:flex-start; flex-direction:column; }.recipe-share-row > button,.recipe-share-actions { width:100%; }.recipe-share-actions button { flex:1 1 8rem; } }

/* Blood ember palette: deep crimson is the visual primary, cyan is retired. */
:root { color:#fff1f3; background:#090204; }
body { background:radial-gradient(circle at 93% 2%,#5b071a 0,transparent 32%),radial-gradient(circle at 3% 100%,#2c050d 0,transparent 36%),#090204; }
body::before { opacity:.46; background-image:linear-gradient(#ff63751a 1px,transparent 1px),linear-gradient(90deg,#ff63751a 1px,transparent 1px); }
.phoenix-ambient { filter:saturate(1.52) hue-rotate(325deg) drop-shadow(0 0 48px #f21c4d66); }.phoenix-ambient::before { border-color:#e42243; box-shadow:0 0 0 40px #e4224310,0 0 82px #8a092c66; }.phoenix-ambient span { border-color:#ffacb6; box-shadow:0 0 0 12px #ff304e13,0 0 50px #f31b4d88; }
button { border-color:#f23a59; background:linear-gradient(135deg,#e51d42,#790719); box-shadow:0 8px 22px #dc123d4a,inset 0 1px #ffffff4d; } button:hover { box-shadow:0 12px 30px #e7194f66,inset 0 1px #ffffff5c; }
button.secondary,nav button { border-color:#6a2635; color:#ffdfe4; background:#21080eeb; } button.secondary:hover,nav button:hover { border-color:#ff526d; color:#fff; background:#3d0a15; box-shadow:0 0 20px #ed1b483d; } button.active { border-color:#ff9dab; background:linear-gradient(135deg,#f1264a,#8e0a20); box-shadow:0 0 28px #f1264a80,inset 0 1px #ffffff5c; }
input:not([type="checkbox"]),textarea,select { border-color:#702333; color:#fff4f5; background:#17070be8; outline-color:#ff5169; } input[type="checkbox"] { border-color:#8f3647; background:#1a080d; } input[type="checkbox"]:checked { border-color:#ff8998; background:#bc1535; box-shadow:0 0 16px #f4254e88; }
h1 { color:#fff7f7; } h2 { color:#fff1f2; } h3 { color:#ffc4cd; }.eyebrow { color:#ff687e; }
#app-header { border-color:#7c2638; background:linear-gradient(108deg,#21070eeb 0%,#16060ae8 55%,#420915e6 100%); }.header-art { border-color:#983447; background:radial-gradient(circle at 35% 50%,#681027,#1b050a 68%); box-shadow:inset 0 0 42px #ff2c5633,0 16px 34px #0009; } #app-header::after { border-color:#ef294e77; box-shadow:0 0 0 2rem #ff2d5210,0 0 0 4rem #a4092c13; } #app-header h1 { background:linear-gradient(100deg,#fffafa 3%,#ffd8dd 52%,#ff6b80 100%); -webkit-background-clip:text; background-clip:text; }
#app-nav { border-color:#5e2030; background:#16070bd9; }.card { border-color:#5e2030; background:linear-gradient(145deg,#21090feF,#100406ed); }.auth { border-color:#913446; background:linear-gradient(135deg,#2c0811e8,#150508f2); }.auth::before { border-color:#f22c5277; box-shadow:0 0 0 2rem #ff2e500d,0 0 6rem #9a092f66; }
.recipe-card,.recipe-choice,.saved-list { border-color:#642132; background:linear-gradient(145deg,#260a11,#130507); }.recipe-card:hover,.recipe-choice:hover,.saved-list:hover,.recipe-card:has(.recipe:hover) { border-color:#ff3f5c; box-shadow:0 12px 30px #0009,0 0 22px #ed184342; }.icon-danger { color:#ffc0ca; background:#310913; border-color:#72253a; }.icon-danger:hover,.danger { background:#a50f2b; }
.shopping-item { border-color:#57202d; }.shopping-item:not(.done) { border-color:#692436; background:#18070dde; }.shopping-item.done { background:#12060988; }.shopping-item .aisle-label { border-color:#ff8393; color:#31040a; background:#ff93a1; box-shadow:0 0 13px #ff3b5788; }.purchase { color:#ff9fae; }.s-product,.package-size { color:#ffc5cc; }.s-kaupat-link { color:#ff8fa0; }
.notice { border-left-color:#ff405e; color:#ffe9eb; background:#4a0c19; }.shopping-summary,.prisma-map { border-color:#702537; background:linear-gradient(145deg,#250a11f2,#100406ed); }.summary-price strong { color:#ffc4cc; }.summary-aisle { border-color:#ff5a73; color:#ffe4e8; background:#4a0d19; }.real-floor { border-color:#ec264c; }.real-floor .aisle { background:linear-gradient(135deg,#fa294c,#770414); box-shadow:0 0 0 4px #110306e0,0 0 23px #f21e4bcc; }.real-floor .department-marker { background:#ffbd71; box-shadow:0 0 0 3px #110306e0,0 0 22px #ff9e3977; }
.route-stop { border-color:#f34a63; color:#ffe9ec; background:linear-gradient(145deg,#4a0d1b,#21070d); }.route-stop:hover,.route-stop:focus-visible { border-color:#ffc1c9; background:#651226; box-shadow:0 0 20px #f3274f66; }.local-sync-panel,.admin-s-kaupat-refresh,.source-catalog,.extension-download,.mobile-support { border-color:#76273a; background:linear-gradient(135deg,#260a12,#120508); }.local-only-label { border-color:#cf3753; color:#ffccd3; background:#470d1c; }.area-legend,.aisle-controls { border-color:#612234; }.area-legend-item,.aisle-control,.admin-recipe { border-color:#692438; color:#ffe8eb; background:#210811; }.portal-app { border-color:#6c2638; background:linear-gradient(145deg,#270a12,#110408); }.portal-app:hover { border-color:#ff526c; box-shadow:0 0 25px #ef1f4b40; }.portal-open { color:#ffafba; }
.recipe-shares { border-color:#d42d4b; background:linear-gradient(135deg,#3c0915df,#150507e9); }.sent-shares { border-color:#8e2740; background:linear-gradient(135deg,#2d0914df,#130508e9); }.recipe-share-row { border-top-color:#ff839533; }.recipe-share-form { border-color:#d62f4e; background:linear-gradient(135deg,#3b0916df,#150507e9); }

/* Ravintoarvot kuuluvat reseptiin eivätkä katoa, vaikka ne lisätään vasta myöhemmin. */
.nutrition-panel,.nutrition-editor { border:1px solid #7a293b; border-radius:1rem; padding:1rem; background:linear-gradient(145deg,#310913,#150507); }.nutrition-heading { display:flex; align-items:baseline; justify-content:space-between; gap:.7rem; }.nutrition-heading h3,.nutrition-editor h3 { margin:0; }.nutrition-editor { display:grid; gap:.75rem; }.nutrition-editor p { margin:0; }.nutrition-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(7.4rem,1fr)); gap:.55rem; margin-top:.75rem; }.nutrition-value { display:grid; gap:.16rem; border:1px solid #6c2536; border-radius:.75rem; padding:.65rem; background:#1c070c; }.nutrition-value small { color:#ffb8c2; font-weight:900; font-size:.65rem; letter-spacing:.04em; text-transform:uppercase; }.nutrition-value strong { color:#fff1f2; font-size:1.04rem; }.nutrition-empty { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.65rem; }.nutrition-empty p { margin:0; }.nutrition-editor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.4rem,1fr)); gap:.7rem; }.nutrition-editor-grid label { min-width:0; }
@media (max-width:650px) { .nutrition-panel,.nutrition-editor { padding:.8rem; }.nutrition-empty { align-items:stretch; flex-direction:column; }.nutrition-empty button { width:100%; }.nutrition-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.nutrition-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; } }

/* Ateriatyypit pitävät reseptikirjan nopeana myös silloin, kun reseptejä on paljon. */
.meal-filter { display:flex; flex-wrap:wrap; gap:.45rem; margin:.15rem 0 .9rem; }.meal-filter button { min-height:2.2rem; padding:.4rem .72rem; font-size:.72rem; }.meal-recipe-groups { display:grid; gap:1rem; }.meal-recipe-group { display:grid; gap:.55rem; border-top:1px solid #6d2537; padding-top:.9rem; }.meal-recipe-group:first-child { border-top:0; padding-top:0; }.meal-recipe-heading { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }.meal-recipe-heading h3 { margin:0; }.meal-type-badge { width:max-content; border:1px solid #ff778a; border-radius:99px; padding:.14rem .48rem; color:#ffdce1; background:#560d1d; font-size:.64rem; font-weight:900; letter-spacing:.035em; text-transform:uppercase; }
@media (max-width:650px) { .meal-filter { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.38rem; }.meal-filter button { min-height:2.45rem; padding:.36rem .3rem; font-size:.63rem; }.meal-recipe-groups { gap:.8rem; }.meal-recipe-group { padding-top:.75rem; } }

/* Työkalut kasvavaan reseptikirjaan: tiiviit, kosketettavat ja ilman leikkautuvia hover-animaatioita. */
.recipe-search-controls { display:grid; grid-template-columns:minmax(13rem,2fr) repeat(2,minmax(7rem,1fr)) auto auto; gap:.55rem; align-items:end; margin:.15rem 0 1rem; }
.recipe-search-controls label { display:grid; gap:.3rem; min-width:0; color:#ffd5dc; font-size:.73rem; font-weight:800; }
.recipe-search-controls input { min-width:0; }
.planner-palette.meal-planner-palette { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.7rem; align-items:stretch; }
.planner-meal-group { min-width:0; border:1px solid #71243a; border-radius:.85rem; padding:.6rem; background:#18070cbd; }
.planner-meal-group h3 { margin:0 0 .45rem; color:#ffa0ae; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.planner-meal-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.pantry-quantity,.pantry-expiry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.pantry-quantity label,.pantry-expiry label { display:grid; gap:.3rem; min-width:0; }
.cooking-mode { display:grid; gap:1rem; max-width:52rem; margin:0 auto; }
.cooking-progress { color:#ff9eaf; font-size:.75rem; font-weight:950; letter-spacing:.07em; text-transform:uppercase; }
.cooking-step-text { min-height:9rem; display:grid; place-items:center; border:1px solid #96334a; border-radius:1.1rem; padding:1.3rem; color:#fff2f4; background:radial-gradient(circle at 50% 0,#631024,#1b060b 68%); font-size:clamp(1.25rem,3vw,2rem); font-weight:850; line-height:1.32; text-align:center; box-shadow:inset 0 1px #ffffff24,0 16px 32px #0008; }
.cooking-actions,.cooking-timer-controls { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:space-between; }
.cooking-actions button,.cooking-timer-controls button { flex:1 1 8rem; }
.cooking-timer-card { display:grid; gap:.65rem; border:1px solid #812a40; border-radius:1rem; padding:1rem; background:#280912; }
.cooking-timer-card h3,.cooking-timer-card p { margin:0; }
.cooking-timer-card strong { color:#fff0bb; font-size:2rem; font-variant-numeric:tabular-nums; }
.recipe-comments,.recipe-versions,.price-history,.backup-settings { display:grid; gap:.7rem; margin-top:1rem; border:1px solid #71253a; border-radius:1rem; padding:1rem; background:linear-gradient(145deg,#260911,#120407); }
.recipe-comments h3,.recipe-versions h3,.price-history h3,.backup-settings h3 { margin:0; }
.recipe-comment-list,.recipe-version-list,.price-history-list { display:grid; gap:.48rem; }
.recipe-comment,.recipe-version,.price-history-row { display:grid; gap:.22rem; border:1px solid #5f2132; border-radius:.7rem; padding:.65rem .75rem; background:#16060a; }
.recipe-comment p { margin:.25rem 0 0; white-space:pre-wrap; }
.recipe-comment small,.recipe-version small { color:#e8a4af; }
.recipe-version { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.recipe-version button { min-height:2.1rem; padding:.38rem .65rem; font-size:.68rem; }
.price-history-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.price-history-row strong,.price-history-row small { display:block; }
.price-history-row strong { color:#ffd7a3; font-size:.78rem; }
.price-history-row small { color:#ffc6cf; font-size:.67rem; text-align:right; }
@media (max-width:760px) { .recipe-search-controls { grid-template-columns:1fr 1fr; }.recipe-search-controls label:first-child { grid-column:1 / -1; }.recipe-search-controls button { min-height:2.6rem; }.planner-palette.meal-planner-palette { grid-template-columns:1fr; }.pantry-quantity,.pantry-expiry { grid-template-columns:1fr; }.cooking-step-text { min-height:12rem; padding:1rem; }.recipe-version,.price-history-row { grid-template-columns:1fr; }.price-history-row small { text-align:left; } }

/* Päivittäinen käyttö: resepteistä aterioiksi, kaapista kulutukseksi ja takaisin suunnitelmaksi. */
.cook-later-badge { width:max-content; border:1px solid #ffc46f; border-radius:99px; padding:.12rem .45rem; color:#2a1000; background:#ffd083; font-size:.61rem; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }
.recipe-workflow { display:grid; gap:.65rem; margin:1rem 0; border:1px solid #8c3043; border-radius:1rem; padding:1rem; background:linear-gradient(145deg,#350b16,#160509); }.recipe-workflow h3,.recipe-workflow p { margin:0; }
.diary,.alerts { display:grid; gap:1rem; }.diary-controls,.diary-add { display:flex; flex-wrap:wrap; gap:.6rem; align-items:end; }.diary-controls input,.diary-add select { flex:1 1 13rem; }.diary-add input { flex:0 1 7rem; }.diary-controls button,.diary-add button { flex:0 1 auto; }
.meal-log-entries,.alert-list { display:grid; gap:.6rem; }.diary-totals,.meal-log-entry,.alert-row { display:grid; gap:.45rem; border:1px solid #79283a; border-radius:.85rem; padding:.8rem; background:#19070c; }.diary-totals strong { color:#ffd3a2; }.meal-log-entry { grid-template-columns:minmax(0,1fr) auto; align-items:start; }.meal-log-entry strong,.meal-log-entry small { display:block; }
.diary-nutrition { display:flex; flex-wrap:wrap; gap:.35rem .55rem; margin-top:.3rem; color:#ffc9d1; font-size:.76rem; font-weight:800; }.diary-nutrition span { border-left:2px solid #f03c5d; padding-left:.35rem; }.alert-row strong { color:#ffbdc8; }.alert-row span { color:#ffecef; font-size:.86rem; }
.manual-import { display:grid; gap:.7rem; margin-top:1rem; border:1px solid #812b40; border-radius:1rem; padding:1rem; background:linear-gradient(145deg,#2b0912,#120407); }.manual-import h2,.manual-import p { margin:0; }.manual-import label { display:grid; gap:.35rem; }
.product-confidence { width:max-content; border-radius:99px; padding:.13rem .45rem; font-size:.65rem; font-weight:900; }.product-confidence.high { color:#d9ffeb; background:#17653e; }.product-confidence.medium { color:#fff0c7; background:#744310; }.product-confidence.low { color:#ffe3e8; background:#7a1329; }
.admin-reliability { display:grid; gap:.7rem; }.admin-reliability h3,.admin-reliability p { margin:0; }.admin-reliability-issues { display:grid; gap:.4rem; max-height:22rem; overflow:auto; }.admin-reliability-issue { display:grid; gap:.12rem; border-left:3px solid #ff506c; padding:.45rem .6rem; background:#260912; }.admin-reliability-issue strong { color:#ffe3e7; }.admin-reliability-issue span { color:#ffb1be; font-size:.76rem; }
@media (max-width:650px) { .diary-controls,.diary-add { display:grid; grid-template-columns:1fr; }.diary-controls input,.diary-add select,.diary-add input,.diary-controls button,.diary-add button { width:100%; }.meal-log-entry { grid-template-columns:1fr auto; }.recipe-workflow .actions { display:grid; grid-template-columns:1fr; }.recipe-workflow .actions button { width:100%; } }

/* Ostoslistan reseptit tarvitsevat enemmän nimelle varattua tilaa kuin tavalliset reseptikortit. */
.recipe-list:has(.recipe-choice) { grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:1rem; }
.recipe-choice { grid-template-columns:minmax(0,1fr) 7.1rem; min-height:6.1rem; }
.recipe-selection { align-items:center; padding:.85rem .95rem; }
.recipe-selection strong { overflow-wrap:break-word; word-break:normal; hyphens:auto; line-height:1.34; }
.recipe-multiplier { min-width:0; padding:.6rem; }
.recipe-multiplier input { width:100%; }
@media (max-width:650px) { .recipe-list:has(.recipe-choice) { grid-template-columns:1fr; gap:.6rem; }.recipe-choice { grid-template-columns:minmax(0,1fr) 6.4rem; min-height:4.9rem; }.recipe-selection { padding:.72rem .78rem; }.recipe-multiplier { padding:.5rem; } }

/* Reseptikortti on itsessään painike. Yleinen painike-hover ei saa siirtää
   sitä kortin rajojen ulkopuolelle, sillä silloin otsikon yläreuna leikkautui. */
.recipe-list:not(:has(.recipe-choice)) { grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); align-items:stretch; }
.recipe-card { grid-template-columns:minmax(0,1fr) 2.35rem; min-width:0; }
.recipe,.recipe:hover,.recipe:focus-visible { min-height:100%; transform:none; }
.recipe strong { display:block; max-width:100%; overflow-wrap:anywhere; word-break:normal; hyphens:auto; line-height:1.3; }
.recipe-card .icon-danger { position:relative; z-index:1; width:2.35rem; min-width:2.35rem; padding:.5rem .32rem; font-size:.6rem; }

@media (max-width:650px) {
  .recipe-list:not(:has(.recipe-choice)) { grid-template-columns:1fr; gap:.65rem; }
  .recipe { padding:.85rem .9rem; }
}

/* Viikkosuunnitelma: jokainen resepti pysyy omassa ateriaryhmässään ja koko
   viikon näkymä mahtuu leveällä näytöllä yhdelle riville. */
.planner-week-controls { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.planner-week-controls > :last-child { justify-self:end; }
.planner-palette.meal-planner-palette { grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
.planner-meal-chips { display:grid; grid-template-columns:minmax(0,1fr); gap:.4rem; }
.planner-recipe-chip { width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:left; line-height:1.28; }
.planner-day { min-width:0; }
.planner-day-recipe > div { display:grid; grid-template-columns:minmax(0,1fr); flex:1 1 auto; min-width:0; gap:.34rem; }
.planner-day-recipe > div > span { display:block; overflow-wrap:anywhere; line-height:1.32; }
.planner-day-recipe .meal-type-badge { display:block; justify-self:start; margin:0; }
.planner-day select { width:100%; }

@media (min-width:980px) {
  .planner-grid { grid-template-columns:repeat(7,minmax(0,1fr)); overflow:visible; }
}

@media (max-width:650px) {
  .planner-week-controls { grid-template-columns:1fr auto; }
  .planner-week-controls strong { grid-column:1 / -1; grid-row:1; text-align:center; }
  .planner-week-controls > :last-child { justify-self:end; }
  .planner-palette.meal-planner-palette { grid-template-columns:1fr; }
}

/* Päiväkortissa poistoraksi ei saa kaventaa reseptinimeä flex-rivillä.
   Se on oma painikkeensa oikeassa reunassa, jolloin yhdyssanat rivittyvät
   luettavasti yhdysmerkin kohdalta. */
.planner-day-recipe { position:relative; display:block; padding-right:1.9rem; }
.planner-day-recipe > div { width:100%; }
.planner-day-recipe > div > span { overflow-wrap:break-word; word-break:normal; hyphens:auto; }
.planner-day-recipe > .icon-danger { position:absolute; top:.24rem; right:.08rem; min-width:1.45rem; min-height:1.45rem; padding:.05rem; writing-mode:horizontal-tb; line-height:1; }

/* Kutsun tila ja vanheneminen ovat yksi metatietoryhmä, joten ne eivät voi
   koskaan piirtyä toistensa päälle kapeammassakaan ylläpitonäkymässä. */
.invite-row { grid-template-columns:minmax(0,1fr) auto; gap:1rem; }
.invite-meta { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.4rem .7rem; color:#d7b7be; font-size:.82rem; }
.invite-status,.invite-expiry { white-space:nowrap; }
.invite-status { border:1px solid #884052; border-radius:99px; padding:.16rem .48rem; font-size:.68rem; font-weight:900; letter-spacing:.035em; text-transform:uppercase; }
.invite-status.open { border-color:#ff8999; color:#ffe9b0; background:#5b2310; }
.invite-status.used { color:#c8a8af; background:#220a10; }
@media (max-width:650px) { .invite-row { grid-template-columns:1fr; gap:.45rem; }.invite-meta { justify-content:flex-start; } }

/* Kutsun luontipainike on oma rivinsä — se ei koskaan kosketa nimikenttää. */
.admin-panel > label + .invite-create { justify-self:start; margin-top:.8rem; margin-bottom:1.1rem; }

/* Yläpalkin välilehtiä on yhdeksän. Työpöydällä ne jaetaan kahdelle
   riville tarvittaessa, eivätkä ne voi enää jatkua näkymän oikean reunan yli. */
@media (min-width:651px) {
  #app-nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(6.7rem,1fr)); overflow:visible; border-radius:1.15rem; }
  #app-nav button { min-width:0; min-height:2.55rem; padding:.48rem .42rem; font-size:.68rem; }
}

/* Lähteiden tuontitila on lyhyt, näkyvä selite — ei virheeksi tulkittava
   reseptin sisältö eikä sivun yli leviävä pitkä ilmoitus. */
.source-import-status { margin:.55rem 0; border-left:3px solid #ffbd71; border-radius:.35rem; padding:.55rem .65rem; color:#ffe0b1; background:#3a180d; font-size:.8rem; line-height:1.4; }

/* Tuontiosoitteen kenttä ja sitä seuraava tunnistus ovat aina erilliset
   ruudukon rivit. Näin nappi ei voi mennä kentän päälle jaetussakaan näkymässä. */
.import-card { display:grid; gap:.75rem; }
.import-card > * { min-width:0; }
.import-card > label { display:grid; gap:.4rem; width:100%; }
.import-card > label > input { width:100%; min-width:0; box-sizing:border-box; }
.import-card > label + button { justify-self:start; width:max-content; margin:0; }
@media (max-width:650px) { .import-card > label + button { width:100%; } }

/* Pidä sovellus kapeassa näkymässä aidosti näkymäleveyden sisällä. Paikalliset
   vaakalistat (navigaatio ja suunnittelija) hoitavat oman vierityksensä. */
html,body { max-width:100%; overflow-x:clip; }
#app,#main-view,#content,#content > * { min-width:0; max-width:100%; }
.shopping-item,.shopping-item .shopping-copy,.s-candidate { min-width:0; }
.s-product-manual-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.42rem; width:min(100%,32rem); margin-top:.48rem; }
.s-product-manual-search input { min-width:0; min-height:2.15rem; padding:.38rem .58rem; font-size:.76rem; }
.s-product-manual-search button { min-height:2.15rem; padding:.38rem .62rem; font-size:.66rem; white-space:nowrap; }
@media (max-width:650px) {
  #app,#main-view,#content { width:100%; max-width:100%; overflow-x:clip; }
  /* Aiempi 125 vw / -42 vw -koriste venytti osassa mobiiliselaimia
     dokumentin vieritysaluetta oikealle. Pidä sama henki, mutta näkymän sisällä. */
  /* Koriste ei saa peittää ostoslistaa kapeassa mobiilinäkymässä. */
  .phoenix-ambient { display:none; }
  .shopping-copy { overflow-wrap:anywhere; }
  .s-product-manual-search { grid-template-columns:minmax(0,1fr) auto; width:100%; }
  .s-product-manual-search button { min-width:5.5rem; }
}

/* Tallennettu lista on mobiilissa aina kolmirivinen: nimi, etenemä ja oma
   poistopainike. Näin avaus- ja poistotoiminto eivät koskaan asetu tekstin
   päälle, vaikka listan nimi olisi pitkä. */
.saved-list { grid-template-columns:minmax(0,1fr) 5.25rem; align-items:stretch; }
.saved-list-open { grid-template-columns:minmax(0,1fr); align-content:center; gap:.22rem; min-width:0; padding:.75rem .85rem; }
.saved-list-open strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saved-list-open small { overflow:hidden; color:#d9b7bf; font-size:.72rem; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.saved-list-delete { align-self:stretch; min-width:5.25rem; margin:0; border:0; border-left:1px solid #72253a; border-radius:0; padding:.45rem .4rem; color:#ffc4cd; background:#310913; box-shadow:none; font-size:.65rem; line-height:1.1; text-transform:uppercase; }
.saved-list-delete:hover { border-color:#ff6479; background:#a50f2b; box-shadow:none; transform:none; }
@media (max-width:650px) {
  .saved-lists { gap:.58rem; }
  .saved-list { grid-template-columns:minmax(0,1fr) 4.65rem; }
  .saved-list-open { min-height:4.7rem; padding:.72rem .78rem; }
  .saved-list-open strong { white-space:normal; overflow-wrap:anywhere; line-height:1.28; }
  .saved-list-open small { white-space:normal; line-height:1.3; }
  .saved-list-delete { min-width:4.65rem; font-size:.64rem; writing-mode:horizontal-tb; }
}

/* Yksittäinen S-kaupat-tuote lisätään ilman selaimen sivun vaihtoa. */
.shopping-product-search { display:grid; gap:.7rem; margin:.9rem 0; border:1px solid #8b2d40; border-radius:1rem; padding:1rem; background:linear-gradient(145deg,#320a14,#160509); }
.shopping-product-search h3,.shopping-product-search p { margin:0; }
.catalog-search-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.55rem; }
.catalog-search-controls input { min-width:0; }
.catalog-candidates { display:grid; gap:.45rem; }
.catalog-candidate { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name price" "hint price"; align-items:center; gap:.14rem .7rem; width:100%; border:1px solid #7e293b; border-radius:.75rem; padding:.65rem .75rem; color:#fff0f2; background:#1a060b; box-shadow:none; text-align:left; text-transform:none; }
.catalog-candidate:hover { border-color:#ff6379; background:#3b0b17; box-shadow:0 0 18px #f3294b32; transform:none; }
.catalog-candidate span { grid-area:name; min-width:0; overflow:hidden; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.catalog-candidate strong { grid-area:price; color:#ffd88d; font-size:.82rem; text-align:right; }
.catalog-candidate small { grid-area:hint; color:#ffb7c2; font-size:.68rem; }
.purchase-quantity { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-top:.42rem; color:#ffcad2; font-size:.72rem; font-weight:850; }
.purchase-quantity > span { margin-right:.12rem; color:#ffb1bf; text-transform:uppercase; letter-spacing:.045em; }
.purchase-quantity button { flex:0 0 2rem; min-width:2rem; min-height:2rem; padding:.2rem; font-size:1.08rem; line-height:1; }
.purchase-quantity strong { display:grid; place-items:center; min-width:2rem; color:#fff5f5; font-size:1rem; font-variant-numeric:tabular-nums; }
.purchase-quantity small { color:#eab3be; font-size:.72rem; }
@media (max-width:650px) {
  .shopping-product-search { margin:.75rem 0; padding:.8rem; }
  .catalog-search-controls { grid-template-columns:1fr; }
  .catalog-search-controls button { width:100%; }
  .catalog-candidate { grid-template-columns:minmax(0,1fr) auto; padding:.68rem; }
  .catalog-candidate span { white-space:normal; overflow-wrap:anywhere; }
  .purchase-quantity { gap:.3rem; }
}

/* Valittu keräyspiste säilyy näkyvänä myös, kun sen alapuoliset tuotteet
   päivittyvät taustalla. */
.real-floor .aisle.selected-location { z-index:2; outline:2px solid #fff2bf; outline-offset:2px; filter:saturate(1.2) brightness(1.16); }
.route-stop.selected-location { border-color:#fff4c8; background:linear-gradient(145deg,#ffedb4,#ef9a38); box-shadow:0 0 0 3px #17070bdd,0 0 20px #ffce6a; }