/* mise — Recept-IDE.
   Designtokens + layout efter pivot till "tunn utilitär mono" (IBM Plex Mono,
   linjer istället för boxar, petrol-accent som härleder rail/statusrad).
   Källa: design_handoff_recept_ide 2/Recept-IDE.html. */

:root{
  /* sval-neutral, en aning värme i mitttonerna — inte iskallt */
  --paper: oklch(0.994 0.002 250);
  --bg:    oklch(0.966 0.0035 248);
  --panel: oklch(0.978 0.003 248);
  /* rail/statusrad härleds ur accenten på .ide (se nedan) */
  --rail:  color-mix(in oklab, var(--accent) 52%, oklch(0.205 0.03 216));
  --rail-fg: color-mix(in oklab, var(--accent) 36%, oklch(0.86 0.02 210));
  --ink:   oklch(0.305 0.021 256);
  --ink2:  oklch(0.462 0.018 254);
  --ink3:  oklch(0.620 0.014 252);
  --line:  oklch(0.906 0.004 248);
  --line2: oklch(0.822 0.006 248);
  /* cyan-teal accent enligt design handoff */
  --accent: #1f9ab4;
  --add-bg: oklch(0.957 0.024 158);
  --add-fg: oklch(0.46 0.075 158);
  --del-bg: oklch(0.957 0.024 26);
  --del-fg: oklch(0.52 0.115 26);
  --chg-bg: oklch(0.957 0.022 226);
  --chg-fg: oklch(0.47 0.075 228);
  /* en enda mono-familj för allt */
  --serif: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-sm: 0px; --r-md: 0px; --r-lg: 0px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; color:inherit; }
::selection{ background: color-mix(in oklab, var(--accent) 28%, transparent); }
a{ color:inherit; text-decoration:none; }

.dens-kompakt{ --fs:15px; --u:6px; --lh:1.5; --tab-h:33px; --uifs:12px; }
.dens-normal{  --fs:17px; --u:8px; --lh:1.62; --tab-h:38px; --uifs:12.5px; }
.dens-luftig{  --fs:19px; --u:11px; --lh:1.78; --tab-h:42px; --uifs:13px; }

.ide{ display:grid; grid-template-columns:56px clamp(220px,22vw,300px) 1fr;
  height:100dvh; min-height:100vh; overflow:hidden;
  --rail: color-mix(in oklab, var(--accent) 52%, oklch(0.205 0.03 216));
  --rail-fg: color-mix(in oklab, var(--accent) 36%, oklch(0.86 0.02 210)); }

/* ---- aktivitetsrad ---- */
.rail{ background:var(--rail); color:var(--rail-fg); display:flex; flex-direction:column;
  align-items:center; padding:10px 0; gap:14px;
  padding-top:max(10px, env(safe-area-inset-top));
  padding-bottom:max(10px, env(safe-area-inset-bottom));
  padding-left:env(safe-area-inset-left); }
.rail-items{ display:flex; flex-direction:column; gap:6px; margin-top:6px; width:100%; align-items:center; }
.rail-btn{ width:42px; height:42px; display:grid; place-items:center;
  color:var(--rail-fg); position:relative; opacity:.72; transition:.15s; }
.rail-btn:hover{ opacity:1; background:color-mix(in oklab, var(--paper) 10%, transparent); }
.rail-btn.active{ opacity:1; color:var(--paper); background:color-mix(in oklab, var(--paper) 14%, transparent); }
.rail-btn.active::before{ content:""; position:absolute; left:-10px; top:9px; bottom:9px; width:3px;
  background:var(--paper); }
.rail-tip{ position:absolute; left:52px; white-space:nowrap; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:11px; padding:4px 8px; opacity:0; pointer-events:none;
  transform:translateX(-4px); transition:.13s; z-index:30; }
.rail-btn:hover .rail-tip{ opacity:1; transform:none; }

/* ---- utforskare ---- */
.explorer{ background:var(--panel); display:flex; flex-direction:column;
  min-width:0; overflow:hidden; }
.exp-head{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px 8px; }
.exp-title{ font-family:var(--serif); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink3); font-weight:500; }
.group-sel{ font-family:var(--serif); font-size:12px; color:var(--ink2); background:transparent;
  border:none; padding:3px 6px; }
.group-sel:hover{ color:var(--ink); }
.exp-mini{ display:flex; gap:4px; }
.exp-mini button, .exp-mini a, .exp-mini-btn{ font-family:var(--serif); font-size:11.5px;
  color:var(--ink3); padding:2px 2px; border:none; background:none;
  text-decoration:none; }
.exp-mini button:hover, .exp-mini a:hover, .exp-mini-btn:hover{
  color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.exp-search{ display:flex; align-items:center; gap:7px; margin:0 12px 10px; padding:5px 2px;
  background:none; border:none; border-bottom:1px solid var(--line2); color:var(--ink3); }
.exp-search:focus-within{ border-bottom-color:var(--accent); }
.exp-search input{ border:none; background:none; outline:none; width:100%; font-size:13px; color:var(--ink); }
.exp-sub{ display:flex; align-items:center; justify-content:space-between; padding:0 12px 8px; }
.exp-count{ font-family:var(--mono); font-size:10.5px; color:var(--ink3); }
.exp-scroll{ flex:1; overflow-y:auto; padding:4px 8px 16px; }

.tree-group{ margin-bottom:2px; }
.tree-group-h{ display:flex; align-items:center; gap:7px; width:100%; text-align:left; cursor:pointer;
  padding:6px 8px 3px; color:var(--ink3); background:none;
  font-family:var(--serif); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.tree-group-h:hover{ color:var(--ink); }
.tg-chev{ display:inline-flex; color:var(--ink3); transform:rotate(90deg); transition:transform .15s; }
.tree-group.collapsed .tg-chev{ transform:rotate(0deg); }
.tree-group.collapsed .tree-group-h{ opacity:.78; }
.tg-count, .cat-count, .tr-ver{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink3); }
.tree-row{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  font-family:var(--serif); padding:4px 9px 4px 24px; color:var(--ink2); font-size:10.5px;
  border-bottom:1px solid color-mix(in oklab, var(--line) 55%, transparent); }
.tree-row:hover{ background:color-mix(in oklab, var(--accent) 8%, transparent); color:var(--ink); cursor:pointer; }
.tree-row.active{ background:color-mix(in oklab, var(--accent) 13%, transparent); color:var(--ink);
  box-shadow:inset 2px 0 0 var(--accent); }
.tree-row.active .tr-name{ color:var(--accent); font-weight:500; }
.tr-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-ver{ background:transparent; color:var(--ink3); border:1px solid var(--line2);
  padding:0 4px; font-weight:500; letter-spacing:.02em; }

.cat-row, .pick-row{ display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  font-family:var(--serif); padding:4px 10px; color:var(--ink2); font-size:12px; cursor:pointer; }
.cat-row:hover, .pick-row:hover{ background:color-mix(in oklab, var(--accent) 8%, transparent); color:var(--ink); }
.cat-row.active{ background:color-mix(in oklab, var(--accent) 13%, transparent); color:var(--accent);
  font-weight:500; box-shadow:inset 2px 0 0 var(--accent); }
.pick-row.on{ color:var(--ink); }
.pick-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--serif); font-size:12px; }
.pi-box{ flex:none; width:18px; height:18px; border:1.5px solid var(--line2);
  display:grid; place-items:center; color:var(--paper); }
.pi-box.sm{ width:16px; height:16px; }
.pi-box.on{ background:var(--accent); border-color:var(--accent); }

/* ---- editor ---- */
.editor{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--paper); }
.tabstrip{ display:flex; align-items:stretch; background:var(--bg);
  height:var(--tab-h); overflow-x:auto; flex:none; }
.tab{ display:flex; align-items:center; gap:8px; padding:0 12px; min-width:0; cursor:pointer;
  color:var(--ink2); font-family:var(--serif); font-size:12.5px;
  background:var(--bg); position:relative; }
.tab:hover{ color:var(--ink); }
.tab.active{ background:var(--paper); color:var(--ink); }
.tab.active::after{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); }
.tab-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
.tab-close{ display:grid; place-items:center; width:18px; height:18px; color:var(--ink3); }
.tab-close:hover{ background:var(--line); color:var(--ink); }
.editor-body{ flex:1; overflow-y:auto; min-height:0; position:relative; }
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

.statusbar{ flex:none; min-height:26px; display:flex; align-items:center; gap:16px; padding:0 14px;
  padding-bottom:env(safe-area-inset-bottom);
  padding-right:max(14px, env(safe-area-inset-right));
  background:var(--rail); color:var(--rail-fg); font-family:var(--mono); font-size:11px; }
.sb-mode{ color:var(--paper); text-transform:uppercase; letter-spacing:.04em; font-weight:500; }
.sb-item{ display:inline-flex; align-items:center; gap:5px; opacity:.85; }
.sb-item.dim{ opacity:.55; }
.sb-spacer{ flex:1; }

/* welcome */
.welcome{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:var(--ink3); }
.welcome-mark{ font-family:var(--serif); font-size:64px; color:var(--line2); letter-spacing:-2px; font-weight:500; }
.welcome p{ font-family:var(--serif); font-size:var(--fs); }
kbd{ font-family:var(--mono); font-size:.85em; background:var(--bg); border:1px solid var(--line2);
  padding:1px 6px; }

/* ---- receptdokument ---- */
.doc{ max-width:760px; margin:0 auto; padding:calc(var(--u)*4.5) calc(var(--u)*5) calc(var(--u)*8); }
.breadcrumb{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px;
  color:var(--ink3); margin-bottom:calc(var(--u)*2.5); }
.bc-ver{ margin-left:4px; color:var(--accent); font-weight:500; }
.doc-head h1{ font-family:var(--serif); font-weight:500; font-size:calc(var(--fs)*1.55); line-height:1.18;
  margin:0 0 calc(var(--u)*1.5); letter-spacing:-0.01em; text-transform:none; }
.doc-desc{ font-family:var(--serif); font-size:calc(var(--fs)*1.0); line-height:var(--lh); color:var(--ink2);
  margin:0 0 calc(var(--u)*2); max-width:62ch; text-wrap:pretty; }
.doc-meta{ display:flex; flex-wrap:wrap; gap:16px; }
.chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--serif); font-size:12.5px;
  color:var(--ink2); background:none; border:none; padding:0; }

.doc-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:calc(var(--u)*3) 0 calc(var(--u)*1.5); padding:calc(var(--u)*0.5) 0; }
.doc-bar-l{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.vpick{ display:inline-flex; align-items:center; gap:7px; color:var(--ink2); background:none;
  border:none; border-bottom:1px solid var(--line2); padding:4px 2px; }
.vpick:focus-within{ border-bottom-color:var(--accent); }
.vpick select{ border:none; background:none; outline:none; font-family:var(--mono); font-size:12px; color:var(--ink); }
.vpick-c{ padding:3px 7px; }
.btn-ghost{ display:inline-flex; align-items:center; gap:7px; font-family:var(--serif); font-size:12.5px;
  color:var(--ink2); border:none; border-bottom:1px solid var(--line2); background:none; padding:4px 2px; }
.btn-ghost:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.btn-ghost:disabled{ opacity:.4; cursor:not-allowed; }
.stepper{ display:inline-flex; align-items:center; gap:10px; font-family:var(--serif); font-size:12.5px;
  color:var(--ink2); }
.stepper button{ width:24px; height:24px; border:none; background:none;
  font-size:16px; line-height:1; color:var(--ink3); }
.stepper button:hover{ color:var(--accent); }
.stepper b{ color:var(--ink); font-weight:500; }

.ver-note{ font-family:var(--serif); font-size:calc(var(--fs)*0.94); font-style:italic; color:var(--ink2);
  background:color-mix(in oklab, var(--accent) 6%, var(--paper)); border-left:2px solid var(--accent);
  padding:calc(var(--u)*1.2) calc(var(--u)*1.8); margin:calc(var(--u)*1.5) 0 calc(var(--u)*3); }
.ver-note-tag{ font-family:var(--mono); font-style:normal; font-size:10.5px; color:var(--paper);
  background:var(--accent); padding:1px 5px; margin-right:9px; font-weight:500; letter-spacing:.02em; }

.block{ margin-top:calc(var(--u)*3); }
.block-h{ font-family:var(--serif); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); margin:0 0 calc(var(--u)*1.2); font-weight:500; }

.ing-list{ list-style:none; margin:0; padding:0; }
.ing-row{ position:relative; display:grid; grid-template-columns:62px 50px 1fr auto; align-items:baseline;
  padding:calc(var(--u)*0.85) 0; border-bottom:1px solid color-mix(in oklab, var(--line) 55%, transparent); }
.anno-add{ justify-self:end; align-self:baseline; white-space:nowrap;
  font-family:var(--serif); font-size:11px; color:var(--ink3);
  border:none; background:none; padding:0 0 0 16px;
  opacity:.8; transition:color .12s, opacity .12s; }
.anno-add:hover{ color:var(--accent); opacity:1; text-decoration:underline; text-underline-offset:2px; }
.anno-add.has{ color:var(--ink2); }
.ing-anno, .step-anno{ padding:2px 0 2px 11px; border-left:2px solid var(--accent);
  font-family:var(--serif); font-size:calc(var(--fs)*0.82); line-height:1.5; color:var(--ink2);
  max-width:62ch; cursor:text; text-wrap:pretty; }
.ing-anno{ margin:0 0 calc(var(--u)*0.7) 112px; }
.step-anno{ margin:5px 0 0; }
.ing-item > .anno-edit{ margin:1px 0 calc(var(--u)*0.7) 112px; }
.step-main .anno-edit{ margin:5px 0 0; }
.anno-edit input{ width:min(62ch,100%); font-family:var(--serif); font-size:calc(var(--fs)*0.8);
  color:var(--ink); background:var(--bg); border:none; border-left:2px solid var(--accent);
  padding:5px 9px; outline:none; }
.anno-edit input:focus{ background:color-mix(in oklab, var(--accent) 6%, var(--bg)); }
.ing-q{ font-family:var(--mono); font-size:calc(var(--fs)*0.82); text-align:right; padding-right:12px;
  color:var(--ink2); font-weight:500; }
.ing-u{ font-family:var(--mono); font-size:calc(var(--fs)*0.74); color:var(--ink3); }
.ing-n{ font-family:var(--serif); font-size:var(--fs); color:var(--ink); }
.ing-note{ color:var(--ink3); font-style:italic; }
.pantry-dot{ font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink3); border:1px solid var(--line2); background:none; padding:0 4px; margin-left:8px;
  vertical-align:baseline; }

.step-list{ list-style:none; margin:0; padding:0; counter-reset:s; }
.step-row{ position:relative; display:flex; gap:calc(var(--u)*1.8); padding:calc(var(--u)*1) 0; }
.step-main{ flex:1; min-width:0; }
.step-row .anno-add{ align-self:flex-start; margin-top:calc(var(--u)*0.2); }
.step-num{ font-family:var(--mono); font-size:calc(var(--fs)*0.8); color:var(--ink3); font-weight:500;
  padding-top:.25em; flex:none; opacity:1; }
.step-txt{ font-family:var(--serif); font-size:var(--fs); line-height:var(--lh); color:var(--ink);
  text-wrap:pretty; }

/* ---- diff ---- */
.diff{ display:flex; flex-direction:column; min-height:100%; }
.diff-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:calc(var(--u)*1.6) calc(var(--u)*2.5); background:var(--bg); }
.diff-title{ display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:calc(var(--fs)*1.05);
  font-weight:500; text-transform:none; letter-spacing:-0.01em; }
.diff-sub{ font-family:var(--serif); font-size:11px; color:var(--ink3); text-transform:uppercase;
  letter-spacing:.04em; font-weight:500; }
.diff-counts{ display:flex; gap:14px; font-family:var(--mono); font-size:11.5px; }
.dc{ padding:0; font-weight:500; color:var(--ink2); background:none; }
.dc-add, .dc-del, .dc-chg{ background:none; }
.diff-cols-h{ display:grid; grid-template-columns:1fr 1fr; background:var(--bg);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.diff-col-h{ display:flex; align-items:center; gap:10px; padding:calc(var(--u)*1) calc(var(--u)*2.5); }
.diff-col-hr{ border-left:1px solid var(--line); }
.col-side{ font-family:var(--serif); font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink3); font-weight:500; }
.col-date{ font-family:var(--mono); font-size:11px; color:var(--ink3); margin-left:auto; }
.diff-body{ flex:1; }
.df-sec-h{ font-family:var(--serif); font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink3); padding:calc(var(--u)*1.6) calc(var(--u)*2.5) calc(var(--u)*0.6);
  background:var(--paper); font-weight:500; }
.df-pair{ display:grid; grid-template-columns:1fr 1fr; }
.df-line{ display:flex; gap:10px; padding:calc(var(--u)*0.7) calc(var(--u)*2.5); min-height:1.6em;
  border-bottom:1px solid color-mix(in oklab,var(--line) 32%, transparent);
  font-family:var(--serif); font-size:calc(var(--fs)*0.95); line-height:1.5; }
.df-pair > .df-line:first-child{ border-right:1px solid var(--line); }
.df-mark{ font-family:var(--mono); font-size:.85em; width:.9em; flex:none; opacity:.8; }
.df-add{ background:var(--add-bg); } .df-add .df-mark{ color:var(--add-fg); }
.df-del{ background:var(--del-bg); } .df-del .df-mark{ color:var(--del-fg); }
.df-del .df-text{ text-decoration:line-through; text-decoration-color:var(--ink3); color:var(--ink2); }
.df-chg{ background:var(--chg-bg); } .df-chg .df-mark{ color:var(--chg-fg); }
.df-empty{ background:transparent; }
.df-notes{ border-bottom:1px solid var(--line); }
.df-note-cell{ padding:calc(var(--u)*1.2) calc(var(--u)*2.5); font-family:var(--serif); font-style:italic;
  font-size:calc(var(--fs)*0.9); color:var(--ink2); }
.df-note-cell:first-child{ border-right:1px solid var(--line); }

/* ---- ingrediensbibliotek ---- */
.lib{ padding:calc(var(--u)*3) calc(var(--u)*4) calc(var(--u)*6); }
.lib-head h1{ font-family:var(--serif); font-weight:500; font-size:calc(var(--fs)*1.45); margin:0 0 calc(var(--u)*1);
  text-transform:none; letter-spacing:-0.01em; }
.lib-sub{ font-family:var(--serif); font-size:calc(var(--fs)*0.95); color:var(--ink2); max-width:80ch;
  margin:0 0 calc(var(--u)*2.5); line-height:1.5; }
.lib-table-wrap{ border:none; overflow:hidden; background:var(--paper); }
.lib-table{ width:100%; border-collapse:collapse; font-size:13px; }
.lib-table th{ text-align:left; font-family:var(--serif); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink3); padding:11px 14px; background:var(--bg); font-weight:500; }
.lib-table td{ padding:8px 14px; vertical-align:middle; }
.lib-table tbody tr:nth-child(even) td{ background:color-mix(in oklab, var(--ink) 2.5%, transparent); }
.lib-table tr:hover td{ background:color-mix(in oklab, var(--accent) 6%, transparent); }
.ing-name{ font-family:var(--serif); font-size:15px; }
.lib-table select, .lib-table input{ width:100%; background:transparent; border:none;
  padding:5px 2px; font-size:12.5px; outline:none; transition:box-shadow .12s; }
.lib-table select{ font-family:var(--serif); font-size:12.5px; }
.lib-table input:hover, .lib-table select:hover{ box-shadow:inset 0 -1px 0 var(--line2); }
.lib-table input:focus, .lib-table select:focus{ box-shadow:inset 0 -1px 0 var(--accent); }
.c-ids{ width:185px; } .c-pan{ width:74px; text-align:center; }
.recipe-links{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.recipe-link{ display:inline-block; max-width:100%; font-family:var(--serif); font-size:12px;
  color:var(--ink2); text-align:left; line-height:1.3; border:none; background:none; padding:1px 0;
  text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:2px; transition:.12s; }
.recipe-link:hover{ color:var(--accent); text-decoration-color:var(--accent); }
.id-none{ color:var(--ink3); }
.pan-toggle{ width:22px; height:22px; border:1.5px solid var(--line2); display:inline-grid;
  place-items:center; color:var(--paper); }
.pan-toggle.on{ background:var(--accent); border-color:var(--accent); }
.empty{ padding:24px; text-align:center; color:var(--ink3); font-family:var(--serif); font-size:13px; }

/* ---- planering ---- */
.plan{ padding:calc(var(--u)*3) calc(var(--u)*4) calc(var(--u)*6); max-width:900px; }
.plan-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.plan-head h1{ font-family:var(--serif); font-weight:500; font-size:calc(var(--fs)*1.45); margin:0;
  text-transform:none; letter-spacing:-0.01em; }
.plan-sub{ font-family:var(--serif); font-size:13px; color:var(--ink3); margin:6px 0 0; }
.plan-steps{ display:flex; align-items:center; gap:14px; margin:calc(var(--u)*2) 0 calc(var(--u)*1.5); }
.plan-step{ display:flex; align-items:center; gap:8px; font-family:var(--serif); font-size:12.5px;
  color:var(--ink3); transition:.12s; }
.plan-step .ps-n{ width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--line);
  font-size:11px; color:var(--ink3); }
.plan-step:not(:disabled):hover{ color:var(--ink2); }
.plan-step.active{ color:var(--ink); }
.plan-step.active .ps-n{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.plan-step:disabled{ opacity:.45; cursor:not-allowed; }
.ps-sep{ flex:0 0 30px; height:1px; background:var(--line); }
.plan-instr{ font-family:var(--serif); font-size:calc(var(--fs)*0.96); color:var(--ink2);
  margin:0 0 calc(var(--u)*1.8); max-width:72ch; line-height:1.5; }
.plan-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:calc(var(--u)*2.5); padding-top:calc(var(--u)*0.5); }
.foot-note{ font-family:var(--serif); font-size:12.5px; color:var(--ink3); }
.btn-primary{ font-family:var(--serif); font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--paper);
  background:var(--accent); border:1px solid var(--accent); padding:9px 18px; transition:.12s; }
.btn-primary:hover{ background:color-mix(in oklab, var(--accent) 88%, black);
  border-color:color-mix(in oklab, var(--accent) 88%, black); }
.btn-primary:disabled{ opacity:1; cursor:not-allowed; background:var(--ink3); border-color:var(--ink3); }
.plan-item.have .pi-name, .plan-item.have .pi-qty{ color:var(--ink3); }
.plan-actions{ display:flex; align-items:center; gap:14px; }
.mini-toggle{ display:inline-flex; align-items:center; gap:7px; font-family:var(--serif); font-size:12.5px;
  color:var(--ink2); cursor:pointer; }
.mini-toggle input{ accent-color:var(--accent); width:15px; height:15px; }
.plan-chips{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:calc(var(--u)*2) 0; }
.plan-chip{ font-family:var(--serif); font-size:12.5px; color:var(--ink2); background:none;
  border:none; padding:1px 0; text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:2px; }
.plan-chip:hover{ color:var(--accent); text-decoration-color:var(--accent); }
.plan-empty{ display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--ink3);
  padding:calc(var(--u)*8) 0; text-align:center; }
.plan-empty p{ font-family:var(--serif); font-size:var(--fs); line-height:1.5; }
.plan-list{ column-width:280px; column-gap:calc(var(--u)*4); margin-top:calc(var(--u)*1); }
.plan-cat{ break-inside:avoid; margin-bottom:calc(var(--u)*2.5); }
.plan-cat-h{ font-family:var(--serif); font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink3); font-weight:500; margin:0 0 calc(var(--u)*1); }
.plan-cat ul{ list-style:none; margin:0; padding:0; }
.plan-item{ display:flex; align-items:baseline; gap:10px; padding:calc(var(--u)*0.8) 0; cursor:pointer;
  break-inside:avoid; }
.plan-item .pi-box{ position:relative; top:3px; }
.pi-qty{ font-family:var(--mono); font-size:12px; color:var(--ink2); min-width:56px; white-space:nowrap; }
.pi-name{ font-family:var(--serif); font-size:calc(var(--fs)*0.98); }
.pi-pantry{ font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink3); border:1px solid var(--line2); background:none; padding:0 4px; margin-left:auto; }
.plan-item.done .pi-name, .plan-item.done .pi-qty{ text-decoration:line-through; color:var(--ink3); }
.plan-item.is-pantry .pi-qty, .plan-item.is-pantry .pi-name{ color:var(--ink3); }

/* ---- kommandopalett ---- */
.cmd-overlay{ position:fixed; inset:0; background:color-mix(in oklab, var(--ink) 35%, transparent);
  display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; z-index:200;
  backdrop-filter:blur(2px); }
.cmd-overlay[hidden]{ display:none; }
.cmd-box{ width:min(560px,90vw); background:var(--paper); border:none;
  box-shadow:0 18px 48px -20px color-mix(in oklab,var(--ink) 55%, transparent); overflow:hidden; }
.cmd-input{ display:flex; align-items:center; gap:11px; padding:14px 16px; color:var(--ink3);
  border-bottom:1px solid var(--line); }
.cmd-input input{ flex:1; border:none; background:none; outline:none; font-family:var(--serif); font-size:18px;
  color:var(--ink); }
.cmd-esc{ font-family:var(--mono); font-size:10px; color:var(--ink3); border:none; background:var(--bg);
  padding:2px 6px; }
.cmd-res{ padding:6px; max-height:340px; overflow-y:auto; }
.cmd-row{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px;
  color:var(--ink2); }
.cmd-row:hover{ background:color-mix(in oklab, var(--accent) 10%, transparent); color:var(--ink); }
.cmd-title{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.cmd-meta{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink3); }
.cmd-none{ padding:18px; text-align:center; color:var(--ink3); font-family:var(--mono); font-size:12px; }

/* explorer-toggle (mobil) */
.explorer-toggle{ position:fixed; top:8px; left:8px; z-index:100; width:34px; height:34px;
  background:var(--paper); border:1px solid var(--line2); display:none; place-items:center;
  font-size:18px; color:var(--ink2); }
@media (max-width:720px){
  .ide{ grid-template-columns:56px 0 1fr; }
  .explorer{ position:fixed; top:0; left:56px; bottom:0; width:260px; z-index:50;
    transform:translateX(-110%); transition:transform .18s; border-right:1px solid var(--line2); }
  .ide.show-explorer .explorer{ transform:none; }
  .explorer-toggle{ display:grid; left:62px; }
}

/* scrollbars */
.exp-scroll::-webkit-scrollbar, .editor-body::-webkit-scrollbar, .cmd-res::-webkit-scrollbar{ width:10px; }
.exp-scroll::-webkit-scrollbar-thumb, .editor-body::-webkit-scrollbar-thumb, .cmd-res::-webkit-scrollbar-thumb{
  background:var(--line2); border:3px solid var(--panel); }
.editor-body::-webkit-scrollbar-thumb{ border-color:var(--paper); }

/* ===========================================================
   Responsiv pivot — touch, iPad, telefon.
   Lägg till längst ner så att tidigare regler står oförändrade
   ovanför och kan överrideras kontrollerat här.
   =========================================================== */

/* Touch-enheter: neutralisera "fastnande" hover-bakgrunder. */
@media (hover:none){
  .rail-btn:hover, .tab:hover, .tree-group-h:hover, .tree-row:hover,
  .cat-row:hover, .pick-row:hover, .cmd-row:hover, .recipe-link:hover,
  .lib-table tr:hover td, .plan-chip:hover, .btn-ghost:hover, .anno-add:hover,
  .exp-mini button:hover, .exp-mini a:hover, .exp-mini-btn:hover{
    background:inherit;
  }
  .rail-btn:hover{ opacity:.72; }
  .tab:hover{ color:var(--ink2); }
}

/* Förhindra iOS auto-zoom på fokus: alla textinputs ≥16px. */
@media (max-width:1024px){
  .exp-search input, .cmd-input input,
  .anno-edit input, .lib-table input, .lib-table select,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], textarea{
    font-size:16px;
  }
}

/* Stapla diff-vyn under 900px — sida-vid-sida blir oläsbart. */
@media (max-width:900px){
  .diff-cols-h{ grid-template-columns:1fr; }
  .diff-col-hr{ border-left:none; border-top:1px solid var(--line); }
  .df-pair{ grid-template-columns:1fr; }
  .df-pair > .df-line:first-child{
    border-right:none;
    border-bottom:1px dashed color-mix(in oklab, var(--line) 60%, transparent);
  }
  .df-note-cell:first-child{ border-right:none; border-bottom:1px solid var(--line); }
  .df-empty{ display:none; }
}

/* iPad-portrait / mellanbredd: smalna explorer, släpp doc max-width. */
@media (min-width:721px) and (max-width:1024px){
  .ide{ grid-template-columns:56px 200px 1fr; }
  .doc{ max-width:none; padding:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*8); }
  .lib{ padding:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*6); }
}

/* Telefon: större träffytor på tree-rader och tabs. */
@media (max-width:720px){
  .tree-row{ padding:10px 12px 10px 26px; font-size:13px; min-height:40px; }
  .cat-row, .pick-row{ padding:10px 12px; font-size:13.5px; min-height:40px; }
  .tree-group-h{ padding:10px 8px 6px; }
  .tab{ padding:0 14px; min-height:38px; }
  .tab-close{ width:24px; height:24px; }
  .doc{ padding:calc(var(--u)*3) calc(var(--u)*2.5) calc(var(--u)*6); }
  .doc-head h1{ font-size:calc(var(--fs)*1.4); }
  .welcome-mark{ font-size:48px; letter-spacing:-1px; }
  .lib{ padding:calc(var(--u)*2) calc(var(--u)*1.5) calc(var(--u)*6); }
  /* ing-row: kompaktare kolumner, annotation drar in helt vänster. */
  .ing-row{ grid-template-columns:auto auto 1fr auto; gap:6px; }
  .ing-q{ padding-right:6px; }
  .ing-anno, .ing-item > .anno-edit{ margin-left:0; }
}

/* ===== Riktig telefonlayout: göm rail, bottom-tab-bar ===== */
@media (max-width:480px){
  /* En enda kolumn — rail är display:none och explorer är position:fixed,
     så editorn är ensam kvar i normalflödet och ska få full bredd. */
  .ide{ grid-template-columns:1fr; padding-bottom:56px; }
  .rail{ display:none; }
  .explorer{ position:fixed; top:0; left:0; bottom:56px; width:min(86vw,320px); z-index:50;
    transform:translateX(-110%); transition:transform .2s;
    box-shadow:0 0 0 1px var(--line2); padding-top:env(safe-area-inset-top); }
  .ide.show-explorer .explorer{ transform:none; }
  .explorer-toggle{ display:grid; top:10px; left:10px; width:40px; height:40px;
    top:calc(10px + env(safe-area-inset-top)); }

  /* statusbar göms till förmån för bottom-tab-bar */
  .statusbar{ display:none; }

  /* bottom-tab-bar — renderas alltid (CSS::before-knep funkar inte med navigation;
     vi förlitar oss på .mobile-tabbar i HTML — se nedan) */
  .mobile-tabbar{ position:fixed; left:0; right:0; bottom:0; height:56px;
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--rail); color:var(--rail-fg); display:flex; z-index:60;
    box-shadow:0 -1px 0 color-mix(in oklab, var(--ink) 20%, transparent); }
  .mobile-tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px; padding:6px 0; color:var(--rail-fg);
    font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
    opacity:.72; }
  .mobile-tabbar a.active{ opacity:1; color:var(--paper);
    background:color-mix(in oklab, var(--paper) 8%, transparent); }
  .mobile-tabbar a svg{ width:22px; height:22px; }

  /* doc/lib får full bredd */
  .doc{ max-width:none; }
  .lib-table-wrap{ overflow-x:auto; }
  .lib-table{ min-width:560px; }
}
/* Bottom-tab-bar visas bara på telefon. */
.mobile-tabbar{ display:none; }
@media (max-width:480px){ .mobile-tabbar{ display:flex; } }

/* print: bara inköpslistan */
@media print{
  .rail,.explorer,.tabstrip,.statusbar,.plan-head,.plan-chips,.explorer-toggle{ display:none !important; }
  .ide{ display:block; height:auto; }
  .editor,.editor-body{ overflow:visible; }
  .plan{ padding:0; max-width:none; }
  .plan-list{ column-width:320px; }
  body,html{ background:#fff; }
}