:root{
  --bg:#f4f4f4;
  --panel:#ffffff;
  --text:#111111;
  --muted:#6d6d6d;
  --line:#dddddd;
  --soft:#eeeeee;
  --sidebar:320px;
  --header-h:58px;
}
*{box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}
button,.button,input,textarea{font:inherit}
button,.button{
  min-height:36px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  color:var(--text);
}
button:hover,.button:hover{background:var(--soft)}
.primary{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
}

header{
  height:var(--header-h);
  padding:8px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  overflow:hidden;
}
header strong{
  flex:0 0 auto;
  font-size:20px;
  white-space:nowrap;
}
.actions{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}
.actions span{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

main{
  width:100%;
  height:calc(100dvh - var(--header-h));
  min-height:0;
  display:grid;
  grid-template-columns:minmax(240px,var(--sidebar)) minmax(0,1fr);
  overflow:hidden;
}

aside{
  min-width:0;
  height:100%;
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:12px;
  overflow:auto;
}
#search{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg);
}
.filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:10px 0;
}
.filter{
  border-radius:999px;
  padding:6px 9px;
}
.filter.active{
  background:#111;
  color:#fff;
}
.card{
  padding:10px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
}
.card:hover,.card.active{background:var(--soft)}
.card.active{border-color:#777}
.cardTitle{font-weight:650}
.preview,.meta{
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.preview{font-size:13px;margin-top:3px}
.meta{font-size:11px;margin-top:5px}

#editor{
  min-width:0;
  min-height:0;
  height:100%;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  overflow:hidden;
}
#welcome{
  flex:1;
  width:100%;
  min-height:0;
  display:grid;
  place-content:center;
  padding:24px;
  text-align:center;
  color:var(--muted);
}
#welcome[hidden]{display:none!important}
#notePanel{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}
#notePanel[hidden]{display:none!important}
.toolbar{
  flex:0 0 auto;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
}
#saved{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.title{
  flex:0 0 auto;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  padding:16px 20px 12px;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.2;
  font-weight:700;
  outline:none;
}
textarea{
  flex:1 1 auto;
  width:100%;
  min-height:0;
  border:0;
  resize:none;
  padding:18px 20px;
  font-size:clamp(16px,1.35vw,18px);
  line-height:1.55;
  outline:none;
}
.tags{
  flex:0 0 auto;
  width:100%;
  border:0;
  border-top:1px solid var(--line);
  padding:12px 20px;
  outline:none;
}
.mobile{display:none}

dialog{
  border:0;
  border-radius:14px;
  padding:0;
  box-shadow:0 20px 60px #0005;
  max-width:calc(100vw - 24px);
}
dialog::backdrop{background:#0007}
dialog form{
  width:min(420px,calc(100vw - 24px));
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:13px;
}
dialog h2,dialog p{margin:0}
dialog label{
  display:flex;
  flex-direction:column;
  gap:5px;
}
dialog input{
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
}
.dialogActions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
}
.error{
  min-height:1.2em;
  color:#a00;
}

/* Medium laptops / small desktops */
@media (min-width:761px) and (max-width:1100px){
  :root{
    --sidebar:280px;
  }
  header{
    padding-left:10px;
    padding-right:10px;
  }
  .actions{
    gap:4px;
  }
  .actions button,.actions .button{
    padding:7px 8px;
  }
  .actions span{
    display:none;
  }
  .title{
    padding-left:16px;
    padding-right:16px;
  }
  textarea{
    padding-left:16px;
    padding-right:16px;
  }
}

/* Phones and very narrow windows */
@media (max-width:760px){
  :root{
    --header-h:64px;
  }

  html,body{
    overflow:hidden;
  }

  header{
    width:100%;
    height:var(--header-h);
    min-height:var(--header-h);
    padding:8px 10px;
  }
  header strong{
    font-size:18px;
  }
  .actions{
    gap:4px;
  }
  .actions span{
    display:none;
  }
  .actions button,.actions .button{
    min-height:38px;
    padding:8px 9px;
  }
  #exportBtn,
  .actions .button{
    display:none;
  }

  main{
    display:block;
    height:calc(100dvh - var(--header-h));
  }

  aside{
    width:100%;
    height:100%;
    padding:10px;
    border-right:0;
    overflow:auto;
  }

  #search{
    min-height:42px;
    font-size:16px;
  }

  .filters{
    gap:5px;
    margin:9px 0;
  }

  .card{
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    border-radius:6px;
  }
  .cardTitle{
    font-size:16px;
  }
  .preview{
    font-size:14px;
  }

  #editor{
    display:none;
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    z-index:10;
    background:var(--panel);
  }
  #editor.open{
    display:flex;
  }

  body.editing header{
    display:none;
  }

  #notePanel{
    height:100dvh;
    min-height:0;
  }
  #welcome[hidden],#notePanel[hidden],#groceriesPanel[hidden]{display:none!important}

  .toolbar{
    min-height:56px;
    padding:8px;
    gap:5px;
  }
  .toolbar button{
    min-height:40px;
    padding:8px 9px;
  }
  .mobile{
    display:inline-block;
  }
  #saved{
    font-size:11px;
  }

  .title{
    padding:14px 14px 10px;
    font-size:24px;
  }
  textarea{
    padding:14px;
    font-size:17px;
    line-height:1.5;
  }
  .tags{
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    font-size:15px;
  }
}

/* Very small phones */
@media (max-width:420px){
  header strong{
    font-size:17px;
  }
  #syncBtn{
    display:none!important;
  }
  .toolbar{
    overflow-x:auto;
  }
  .toolbar button{
    white-space:nowrap;
  }
}

/* Wide desktop screens */
@media (min-width:1400px){
  :root{
    --sidebar:360px;
  }
  .title{
    padding-left:28px;
    padding-right:28px;
  }
  textarea{
    padding:22px 28px;
    font-size:18px;
  }
  .tags{
    padding-left:28px;
    padding-right:28px;
  }
}


/* v6 account UI */
button:disabled{opacity:.45;cursor:not-allowed}
.authSwitch{min-height:30px;display:flex;align-items:center}
.linkBtn{border:0;background:transparent;padding:4px 0;min-height:auto;text-decoration:underline;color:inherit}
.accountCard{width:min(480px,calc(100vw - 24px));padding:22px;display:flex;flex-direction:column;gap:14px}
.accountCard h2,.accountCard h3,.accountCard p{margin:0}
.accountCard hr{width:100%;border:0;border-top:1px solid var(--line);margin:2px 0}
.inviteResult{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px}
.inviteResult code{font-size:15px;overflow-wrap:anywhere;flex:1}

/* Shared grocery list */
#groceriesPanel{width:100%;height:100%;min-height:0;display:flex;flex-direction:column}
#groceriesPanel[hidden]{display:none!important}
#groceriesPanel .toolbar strong{font-size:17px}
#groceryState{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.groceryBody{width:100%;max-width:760px;margin:0 auto;padding:20px;overflow:auto}
.odaSearchBox{margin-bottom:13px;padding:13px;border:1px solid #f3c4b7;border-radius:13px;background:#fff8f5}
.odaSearchHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.odaSearchHeading>div{display:flex;flex-direction:column;gap:2px}.odaSearchHeading strong{font-size:15px}.odaSearchHeading span{font-size:12px;color:var(--muted)}
.odaSearchHeading a{color:#c94c2b;font-size:12px;font-weight:700;white-space:nowrap;text-decoration:none;padding-top:2px}
.odaSearchInput{position:relative}.odaSearchInput input{box-sizing:border-box;width:100%;min-height:43px;border:1px solid #e8ad9a;border-radius:9px;background:#fff;padding:10px 38px 10px 11px;font:inherit;font-size:16px}
.odaSearchInput button{position:absolute;right:5px;top:4px;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#87594e;font-size:24px;line-height:1}
.odaResults{display:flex;flex-direction:column;gap:7px;margin-top:9px}.odaResults:empty{display:none}.odaSearchNote{margin:1px 1px 0;color:var(--muted);font-size:12px;line-height:1.4}
.odaResult{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:1px solid #f0d4cb;border-radius:9px;background:#fff;text-align:left;cursor:pointer}.odaResult:hover{border-color:#df8d73}.odaResultImage{width:48px;height:48px;flex:0 0 48px;object-fit:contain;border-radius:7px;background:#f7f7f7}.odaResultText{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px;text-decoration:none;color:inherit}.odaResultText strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.odaResultText span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.odaResultText .odaResultPrice{color:#b94528;font-weight:700}.odaResultAdd{flex:0 0 auto;border:0;border-radius:7px;background:#f15f38;color:#fff;padding:7px 9px;font:inherit;font-size:12px;font-weight:700}.odaResultAdd:disabled{opacity:.7}
.odaFallback{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:9px;background:#fff;color:#5a4d49;font-size:13px}.odaFallback button{border:0;border-radius:7px;background:#f15f38;color:#fff;padding:7px 9px;font:inherit;font-size:12px;font-weight:700}
.groceryForm{display:grid;grid-template-columns:minmax(0,1fr) 100px 145px auto;gap:8px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--bg)}
.groceryForm input,.groceryForm select{min-width:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:9px 10px}
.groceryActions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 5px;font-size:14px;font-weight:650}
.oda{background:#f15f38!important;border-color:#f15f38!important;color:#fff!important}
.groceryHelp{margin:0 0 16px;color:var(--muted);font-size:12px;line-height:1.45}
.groceryGroup{overflow:hidden;border:1px solid var(--line);border-radius:13px;margin:12px 0;background:#fff}
.groceryGroup h3{margin:0;padding:10px 13px;background:#fafafa;border-bottom:1px solid var(--line);font-size:13px;color:#555}
.groceryItem{position:relative;display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid #eee;touch-action:pan-y;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.groceryItem.swiping{transition:none}
.groceryItem.swipeReady{background:#e6f6eb;box-shadow:inset 4px 0 #1c7c47}
.groceryItem.done.swipeReady{background:#fff2e9;box-shadow:inset -4px 0 #d35d25}
.groceryItem:last-child{border-bottom:0}
.groceryItem input{width:19px;height:19px;accent-color:#1c7c47;flex:0 0 auto}
.groceryText{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px}
.groceryText strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.groceryText span{color:var(--muted);font-size:12px}
.groceryQuantity{display:flex;align-items:center;gap:2px;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}.groceryQuantity button{width:30px;min-height:30px;padding:0;border:0;background:#f7f7f7;color:#222;font:inherit;font-size:19px;line-height:1}.groceryQuantity button:disabled{color:#aaa}.groceryQuantity span{min-width:21px;text-align:center;font-size:13px;font-weight:700}.groceryOdaLink{padding:6px 7px;border:1px solid #f3c4b7;border-radius:7px;color:#c94c2b;background:#fff8f5;font-size:12px;font-weight:700;text-decoration:none}
.groceryItem.done .groceryText strong{text-decoration:line-through;color:var(--muted)}
.groceryRemove{border:0;background:transparent;min-height:30px;padding:2px 7px;font-size:22px;color:#888;line-height:1}
.groceryRemove:hover{background:#fee;color:#a22}
.groceryEmpty{text-align:center;color:var(--muted);padding:32px 12px}
@media (max-width:760px){
  .groceryBody{padding:12px 10px calc(20px + env(safe-area-inset-bottom))}
  .odaSearchBox{padding:11px;margin-bottom:10px}
  .groceryForm{grid-template-columns:minmax(0,1fr) 84px;gap:7px}
  .groceryForm input:first-child{grid-column:1/-1;min-height:43px;font-size:16px}
  .groceryForm select,.groceryForm button{min-height:42px}
  .groceryQuantity button{width:32px;min-height:32px}
  #groceryState{display:none}
}