/* Sticky Create page — sidebar + form panel + preview panel layout.
   Base grid has 2 tracks (form + preview). When the sidebar is present
   (logged in, not .sidebar--hidden) a fixed 56px rail track is added ahead
   of them. Its 220px hover state overlays the form instead of resizing both
   content columns and pushing the fixed-size preview out of its panel.
   Without this :has() rule, hiding the sidebar via
   display:none still leaves 3 explicit column tracks with nothing placed
   in the 3rd one: form and preview shift into columns 1-2, column 1 sizes
   to form's content instead of an even 1fr split, and column 3 sits empty
   but still eats width — the two panels end up unevenly sized with dead
   space next to the preview. minmax(0,1fr) (not bare 1fr) keeps a long
   ingredient input from blowing either column out past its fair share. */
.create-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);isolation:isolate}
.create-grid:has(> .sidebar:not(.sidebar--hidden)){grid-template-columns:56px minmax(0,1fr) minmax(0,1fr)}
.create-grid[hidden]{display:none}

.form-panel{background:var(--paper);padding:3rem 2.5rem;border-right:1px solid var(--rule)}
@media (min-width:901px){
  .form-panel{padding-right:clamp(2.5rem,6vw,7rem)}
}
.form-panel h1,
.form-panel .form-subtitle,
.form-panel .draft-banner,
.form-panel > form{width:100%;max-width:34rem;margin-left:auto}
.form-panel h1{font-family:var(--font-display);font-size:2rem;line-height:1;letter-spacing:-.02em;margin-bottom:.5rem;font-weight:400}
.form-panel .form-subtitle{font-size:.85rem;color:var(--muted-strong);margin-bottom:2rem;line-height:1.5}

.section-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-strong);font-weight:500;margin:0 0 .5rem;display:block}
/* Section separation lives on the FIELDSET, not the heading. Reason: <legend>
   ignores margin-top in browsers (it's anchored to the fieldset's top edge), so
   a top gap set on the heading renders as nothing for the legend sections
   (Glass & Method, Ingredients, Garnish). Spacing consecutive fieldsets is
   reliable and keeps every heading bound tight to its own field below it. The
   first fieldset gets no top gap, so it sits tight under the intro subtitle. */
fieldset + fieldset{margin-top:2.25rem}

fieldset{border:none;padding:0;margin:0}

/* base.css zeroes border-radius on every control site-wide (the print-plate
   look). Sticky Create softens just its own form fields — checkboxes keep the
   native square box, and the visually hidden file input is untouched. Scoped
   to .form-panel so the nav, sidebar and other pages are unaffected. */
.form-panel input:not([type="checkbox"]):not([type="file"]),
.form-panel select{border-radius:6px}

.row-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

.ig-row{display:grid;grid-template-columns:1fr 80px 32px;gap:.5rem;margin-bottom:.5rem;align-items:start}
.ig-name{position:relative}
.ig-name input{width:100%;padding-right:1.8rem}
/* Suppress the browser's native dropdown affordance for the datalist
   (list="ingredient-options") — it was rendering right on top of the
   freshness toggle. Typing suggestions still work; this only hides the icon.
   Needs !important — this pseudo-element ignores a plain override. */
.ig-name input::-webkit-calendar-picker-indicator{
  display:none !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  pointer-events:none !important;
}
.ig-amount{position:relative}
.ig-amount input{width:100%;padding-right:2rem}
.ig-amount input::-webkit-outer-spin-button,
.ig-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ig-amount input[type="number"]{-moz-appearance:textfield}
.ig-amount .ig-unit{position:absolute;top:0;right:.6rem;bottom:0;display:flex;align-items:center;font-size:.75rem;color:var(--muted-strong);pointer-events:none}
.g-row{display:grid;grid-template-columns:1fr 32px;gap:.5rem;margin-bottom:.5rem}

/* Freshness toggle — sits inside the name input. Plain boolean: click flips
   pre-batched <-> perishable. Plain drop (amber) = pre-batched; drop with a
   slash (muted grey) = perishable (added fresh, not batched). Both states sit
   at the same weight so the colour — not the opacity — carries the meaning,
   and the hover/focus lift is left as the only affordance cue. Keep the
   hover rule last: it ties on specificity with the [data-state] rule, so
   source order is what keeps hover winning if that rule ever takes an
   opacity of its own again. */
.ig-fresh-btn{position:absolute;top:0;bottom:0;right:.3rem;width:1.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--amber);opacity:.85;transition:opacity .15s ease,color .15s ease}
.ig-fresh-btn svg{width:14px;height:14px}
.ig-fresh-drop{fill:none}
.ig-fresh-slash{display:none}
.ig-fresh-btn[data-state="fresh"]{color:var(--muted)}
.ig-fresh-btn[data-state="fresh"] .ig-fresh-slash{display:block}
.ig-name:hover .ig-fresh-btn,.ig-fresh-btn:hover,.ig-fresh-btn:focus-visible{opacity:1}

.ig-tag{grid-column:1 / -1;font-size:.68rem;color:var(--muted-strong);margin:-.15rem 0 .5rem .1rem;padding-left:.5rem;border-left:2px solid var(--rule);font-weight:400}

.x-btn{width:32px;height:36px;border:1px solid var(--rule);background:var(--card);color:var(--muted-strong);font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}
.x-btn:hover{border-color:var(--danger);color:var(--danger)}

.add-btn{width:100%;padding:.65rem;border:1px dashed var(--rule);background:transparent;color:var(--muted-strong);font-family:var(--font-ui);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:all .15s ease;margin-top:.25rem}
.add-btn:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-light)}
.add-btn:disabled{opacity:.5;cursor:not-allowed}
.add-btn:disabled:hover{border-color:var(--rule);color:var(--muted-strong);background:transparent}

.form-warn{font-size:.75rem;color:var(--amber);margin:.5rem 0;line-height:1.4}

.check-row{display:flex;align-items:center;gap:.65rem;color:var(--ink);font-family:var(--font-ui);font-size:.85rem;line-height:1.4;cursor:pointer}
.check-row + .check-row{margin-top:.65rem}
.check-row input{width:16px;height:16px;accent-color:var(--amber);flex:0 0 auto}
.check-row:has(input:disabled){opacity:.5}
.layout-sub-title{margin-top:1.25rem}

.generate-btn{width:100%;background:var(--ink);color:var(--paper);padding:1rem;font-family:var(--font-ui);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;margin-top:2rem;border:none;transition:background .15s ease}
.generate-btn:hover{background:#2a2924}

.new-btn{width:100%;background:transparent;color:var(--muted-strong);padding:.75rem 1rem;font-family:var(--font-ui);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;margin-top:.75rem;border:1px solid var(--rule);transition:all .15s ease}
.new-btn:hover{border-color:var(--ink);color:var(--ink)}

.save-btn{width:100%;background:transparent;color:var(--amber);padding:.9rem 1rem;font-family:var(--font-ui);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;margin-top:.75rem;border:2px solid var(--amber);transition:background .15s ease,color .15s ease}
.save-btn:hover{background:var(--amber);color:var(--ink)}
.save-btn:disabled{opacity:.5;cursor:wait}

.download-btn{width:100%;max-width:var(--label-preview-width);margin-top:1.5rem;background:var(--amber);color:var(--ink);padding:.9rem 1rem;font-family:var(--font-ui);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;border:none;transition:background .15s ease}
.download-btn:hover{background:#b07f1f}
.download-btn:disabled{opacity:.6;cursor:wait}

/* Visually hidden but still keyboard-focusable (Tab + Space opens the picker). */
.logo-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.logo-upload{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.85rem 1rem;border:1px dashed var(--rule);background:transparent;color:var(--muted-strong);font-family:var(--font-ui);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all .15s ease}
.logo-upload:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-light)}
.logo-input:focus-visible + .logo-upload{border-color:var(--amber);color:var(--amber);outline:2px solid var(--amber-mid);outline-offset:2px}
.logo-upload-icon{font-size:1rem;line-height:1}
.logo-preview{display:flex;align-items:center;gap:.75rem;margin-top:.6rem}
.logo-thumb{max-height:44px;max-width:130px;object-fit:contain;border:1px solid var(--rule);background:#fff;padding:3px}
.logo-clear-btn{font-family:var(--font-ui);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--ink);padding:0 0 1px;cursor:pointer}
.logo-clear-btn:hover{color:var(--danger);border-color:var(--danger)}
.logo-sub-title{margin-top:1.25rem}
.logo-hint{font-size:.72rem;color:var(--muted);margin:.45rem 0 0;line-height:1.4}

.draft-banner{background:var(--amber-light);border:1px solid var(--amber-mid);padding:.75rem 1rem;margin-bottom:1.5rem;font-size:.8rem;color:#5a4010;display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.draft-banner button{font-family:var(--font-ui);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--ink);padding:0;cursor:pointer}
.draft-banner button:hover{color:var(--amber)}

.preview-panel{background:var(--paper);padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;position:sticky;top:calc(var(--nav-height,65px) + env(safe-area-inset-top));align-self:start;overflow:clip}
.preview-content{width:100%;max-width:44rem;display:flex;flex-direction:column;align-items:center;overflow:visible}

.empty-state{margin:auto;text-align:center;color:var(--muted-strong);max-width:240px}
.empty-state .icon{margin-bottom:1rem;opacity:.35}
.empty-state .icon svg{width:48px;height:48px}
.empty-state p{font-size:.85rem;line-height:1.5}

.create-grid.no-preview{grid-template-columns:1fr}
.create-grid.no-preview .preview-panel{display:none}
.create-grid.no-preview .generate-btn{display:none}

.mobile-jump{display:none}

/* In the one-column layout the preview must participate in normal document
   flow. Keeping the desktop sticky rule here can pin it underneath the nav
   after a jump, resize, or orientation change. The viewport-height floor
   gives the jump enough trailing space to align its top reliably. */
@media (max-width:900px){
  .create-grid:has(> .sidebar:not(.sidebar--hidden)){grid-template-columns:1fr}
  .form-panel h1,
  .form-panel .form-subtitle,
  .form-panel .draft-banner,
  .form-panel > form{margin-right:auto}
  .preview-panel{
    position:static;
    top:auto;
    align-self:stretch;
    align-items:center;
    min-height:calc(100vh - var(--nav-height,65px) - env(safe-area-inset-top));
    min-height:calc(100dvh - var(--nav-height,65px) - env(safe-area-inset-top));
    scroll-margin-top:calc(var(--nav-height,65px) + env(safe-area-inset-top));
  }
}