/* ==========================================================
   THE MIDNIGHT LARDER — design tokens
   ========================================================== */
:root{
  /* shell (dark gothic) */
  --shell-bg:#151020; --shell-bg-deep:#0f0b18; --shell-raised:#211a30;
  --shell-text:#d9d2e4; --shell-text-muted:#8f86a3; --shell-border:#332a48;
  /* reading surface (candlelit parchment) */
  --page-bg:#f4ecdc; --page-text:#2b2230; --page-text-muted:#6f6378;
  --page-border:#d9cdb4; --page-heading:#3a2436;
  /* card */
  --card-bg:#faf4e7; --card-border:#ddd1b8; --card-hover:#fffaef;
  /* accents */
  --oxblood:#8f2d3c; --oxblood-deep:#6d1f2c; --rose:#c98a94; --rose-dim:rgba(201,138,148,.35);
  --moon:#b9b4c7; --candle:#e8b34b;
  --accent-muted:rgba(143,45,60,.09);
  /* type */
  --font-display:'Grenze Gotisch',serif;
  --font-body:'Lora',Georgia,serif;
  --font-ui:'Cormorant Garamond',serif;
  --ok:#4d6b45; --warn:#9a6b25;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--shell-bg);color:var(--shell-text);font-family:var(--font-body);
  font-size:17px;line-height:1.6;min-height:100vh}

/* ============ MASTHEAD ============ */
.masthead{position:relative;text-align:center;padding:44px 16px 24px;overflow:hidden;
  background:radial-gradient(ellipse at 50% -30%,#2a2140 0%,var(--shell-bg-deep) 68%)}
.masthead h1{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,7vw,68px);
  color:var(--page-bg);letter-spacing:1px;line-height:1.05;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.masthead h1 .amp{color:var(--rose)}
.masthead .dedication{font-family:var(--font-ui);font-size:17px;letter-spacing:3px;
  text-transform:uppercase;color:var(--rose);margin-top:8px}
.masthead .motto{font-style:italic;color:var(--shell-text-muted);font-size:15.5px;margin-top:6px}
.bat{position:absolute;font-size:15px;color:var(--moon);opacity:.55;pointer-events:none;
  animation:flit 9s ease-in-out infinite}
.bat.b2{animation-duration:12s;animation-delay:-4s;font-size:11px}
.bat.b3{animation-duration:15s;animation-delay:-8s;font-size:13px}
@keyframes flit{
  0%{transform:translate(0,0) rotate(-8deg)} 25%{transform:translate(38px,-14px) rotate(6deg)}
  50%{transform:translate(-6px,-30px) rotate(-5deg)} 75%{transform:translate(-42px,-10px) rotate(7deg)}
  100%{transform:translate(0,0) rotate(-8deg)}}
/* candle-wax divider */
.drip{display:block;width:100%;height:26px;color:var(--page-bg);margin-top:-1px}

/* ============ SEARCH BAR (sticky) ============ */
.searchwrap{position:sticky;top:0;z-index:40;background:var(--shell-bg-deep);
  border-bottom:1px solid var(--shell-border);padding:12px 16px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.searchinner{max-width:980px;margin:0 auto;display:flex;gap:10px;align-items:center}
.searchbox{flex:1;position:relative}
.searchbox .glyph{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--rose);font-size:16px;pointer-events:none}
#searchInput{width:100%;font-family:var(--font-body);font-size:16.5px;padding:11px 40px 11px 40px;
  background:var(--shell-raised);color:var(--shell-text);border:1px solid var(--shell-border);
  border-radius:24px}
#searchInput::placeholder{color:var(--shell-text-muted);font-style:italic}
#searchInput:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-dim)}
#searchClear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;
  border:none;color:var(--shell-text-muted);font-size:16px;cursor:pointer;padding:4px 8px}
#searchClear:hover{color:var(--rose)}
.navlinks{display:flex;gap:4px}
.navlinks a{font-family:var(--font-ui);font-size:14.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--shell-text-muted);text-decoration:none;padding:9px 13px;border-radius:6px;white-space:nowrap}
.navlinks a:hover{color:var(--page-bg);background:var(--shell-raised)}
.navlinks a.active{color:var(--rose);background:var(--shell-raised)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--rose);outline-offset:2px}

/* ============ CHIPS ============ */
.chiprow{max-width:980px;margin:14px auto 0;padding:0 16px;display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--font-ui);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  background:transparent;color:var(--shell-text-muted);border:1px solid var(--shell-border);
  border-radius:16px;padding:5px 14px;cursor:pointer}
.chip:hover{color:var(--shell-text);border-color:var(--rose)}
.chip.on{background:var(--oxblood);border-color:var(--oxblood);color:#f6e9e4}

/* ============ MAIN / GRID ============ */
main{max-width:980px;margin:0 auto;padding:22px 16px 80px}
.resultmeta{font-family:var(--font-ui);letter-spacing:2px;text-transform:uppercase;
  font-size:13.5px;color:var(--shell-text-muted);margin:6px 2px 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.rcard{position:relative;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:10px;padding:18px 18px 14px;color:var(--page-text);cursor:pointer;
  transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;text-decoration:none}
.rcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.45);background:var(--card-hover)}
.rcard .cat{font-family:var(--font-ui);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--oxblood)}
.rcard h3{font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.12;
  color:var(--page-heading);margin:4px 0 2px}
.rcard .sub{font-style:italic;color:var(--page-text-muted);font-size:14.5px;flex:1}
.rcard .meta{display:flex;gap:12px;margin-top:12px;font-family:var(--font-ui);font-size:13.5px;
  letter-spacing:1px;color:var(--page-text-muted)}
.rcard .meta span b{color:var(--page-text);font-weight:600}
.fav{position:absolute;top:12px;right:12px;background:none;border:none;font-size:19px;
  cursor:pointer;color:var(--page-border);line-height:1}
.fav.on{color:var(--oxblood)}
.fav:hover{transform:scale(1.15)}
.userbadge{position:absolute;top:16px;right:42px;font-family:var(--font-ui);font-size:10.5px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--warn)}
.empty{background:var(--shell-raised);border:1px dashed var(--shell-border);border-radius:10px;
  text-align:center;padding:46px 20px;color:var(--shell-text-muted);font-style:italic}
.empty .g{font-size:30px;display:block;margin-bottom:10px;color:var(--moon)}

/* ============ RECIPE READING VIEW ============ */
.sheet{background:var(--page-bg);color:var(--page-text);border:1px solid var(--card-border);
  border-radius:12px;padding:34px clamp(20px,5vw,52px) 42px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.backlink{display:inline-block;font-family:var(--font-ui);font-size:14.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--shell-text-muted);text-decoration:none;margin-bottom:14px}
.backlink:hover{color:var(--rose)}
.sheet .cat{font-family:var(--font-ui);font-size:14px;letter-spacing:3px;text-transform:uppercase;
  color:var(--oxblood)}
.sheet h2{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5.5vw,50px);
  line-height:1.05;color:var(--page-heading);margin:6px 0 2px}
.sheet .sub{font-style:italic;font-size:19px;color:var(--page-text-muted)}
.sheet .metarow{display:flex;gap:22px;flex-wrap:wrap;margin:18px 0 6px;
  font-family:var(--font-ui);font-size:15.5px;letter-spacing:1px;color:var(--page-text-muted)}
.sheet .metarow b{color:var(--page-text);font-weight:600}
.ornament{text-align:center;color:var(--oxblood);font-size:15px;letter-spacing:8px;margin:16px 0}
.cols{display:grid;grid-template-columns:290px 1fr;gap:34px;margin-top:8px}
.ingblock h4,.stepblock h4{font-family:var(--font-ui);font-size:16px;letter-spacing:3px;
  text-transform:uppercase;color:var(--page-heading);border-bottom:2px solid var(--oxblood);
  padding-bottom:6px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline}
.scaler{display:flex;gap:4px}
.scaler button{font-family:var(--font-ui);font-size:13px;background:none;color:var(--page-text-muted);
  border:1px solid var(--page-border);border-radius:4px;padding:1px 8px;cursor:pointer;letter-spacing:0}
.scaler button.on{background:var(--oxblood);border-color:var(--oxblood);color:#f6e9e4}
ul.ings{list-style:none}
ul.ings li{padding:6px 0;border-bottom:1px dotted var(--page-border);font-size:16px;
  display:flex;gap:9px;align-items:baseline;cursor:pointer}
ul.ings li .amt{font-weight:700;color:var(--oxblood-deep);white-space:nowrap;min-width:74px}
ul.ings li.got{opacity:.45}
ul.ings li.got .it{text-decoration:line-through}
ol.steps{list-style:none;counter-reset:step}
ol.steps li{counter-increment:step;position:relative;padding:0 0 18px 52px;font-size:17px}
ol.steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border:2px solid var(--oxblood);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:19px;color:var(--oxblood)}
ol.steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:36px;bottom:2px;
  width:1px;background:var(--page-border)}
.sheet .note{background:var(--accent-muted);border-left:3px solid var(--oxblood);
  border-radius:0 8px 8px 0;padding:14px 18px;font-style:italic;font-size:15.5px;margin-top:18px}
.note b{font-style:normal;font-family:var(--font-ui);letter-spacing:2px;text-transform:uppercase;
  font-size:13.5px;color:var(--oxblood)}
.sheetactions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.tagrow{margin-top:16px;display:flex;gap:7px;flex-wrap:wrap}
.tagrow .tg{font-family:var(--font-ui);font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--page-text-muted);border:1px solid var(--page-border);border-radius:12px;padding:2px 11px}

/* ============ BUTTONS ============ */
.btn{font-family:var(--font-ui);font-size:14.5px;letter-spacing:2px;text-transform:uppercase;
  background:var(--oxblood);color:#f6e9e4;border:1px solid var(--oxblood);border-radius:6px;
  padding:9px 18px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--oxblood-deep)}
.btn.ghost{background:transparent;color:var(--page-text);border-color:var(--page-border)}
.btn.ghost:hover{border-color:var(--oxblood);color:var(--oxblood)}
.btn.shellghost{background:transparent;color:var(--shell-text);border-color:var(--shell-border)}
.btn.shellghost:hover{border-color:var(--rose);color:var(--rose)}
.btn.sm{padding:5px 12px;font-size:12.5px}

/* ============ INDEX VIEW ============ */
.alpha{columns:3;column-gap:36px}
.alpha section{break-inside:avoid;margin-bottom:20px}
.alpha h3{font-family:var(--font-display);font-size:30px;color:var(--rose);border-bottom:1px solid var(--shell-border);margin-bottom:6px}
.alpha a{display:block;color:var(--shell-text);text-decoration:none;padding:3px 0;font-size:15.5px}
.alpha a:hover{color:var(--rose)}
.alpha a .s{color:var(--shell-text-muted);font-style:italic;font-size:13.5px}
.idxhead{font-family:var(--font-ui);letter-spacing:3px;text-transform:uppercase;
  color:var(--shell-text-muted);font-size:15px;margin:26px 0 12px}

/* ============ ADD RECIPE FORM ============ */
.formsheet label{display:block;font-family:var(--font-ui);font-size:14px;letter-spacing:2px;
  text-transform:uppercase;color:var(--page-text-muted);margin:16px 0 5px}
.formsheet input[type=text],.formsheet input[type=number],.formsheet select,.formsheet textarea{
  width:100%;font-family:var(--font-body);font-size:16px;background:#fffdf6;color:var(--page-text);
  border:1px solid var(--page-border);border-radius:6px;padding:9px 12px}
.formsheet input:focus,.formsheet select:focus,.formsheet textarea:focus{outline:none;
  border-color:var(--oxblood);box-shadow:0 0 0 3px var(--accent-muted)}
.formrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ingrow{display:grid;grid-template-columns:90px 110px 1fr 36px;gap:8px;margin-bottom:8px}
.steprow{display:grid;grid-template-columns:1fr 36px;gap:8px;margin-bottom:8px}
.rowdel{background:none;border:1px solid var(--page-border);border-radius:6px;color:var(--page-text-muted);
  cursor:pointer;font-size:15px}
.rowdel:hover{color:var(--oxblood);border-color:var(--oxblood)}
.formhint{font-style:italic;font-size:14px;color:var(--page-text-muted);margin-top:4px}

/* ============ TOAST / FOOTER ============ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--shell-raised);color:var(--shell-text);border:1px solid var(--rose);
  border-radius:8px;padding:11px 22px;font-family:var(--font-ui);letter-spacing:1.5px;
  font-size:14.5px;opacity:0;transition:all .3s;z-index:80;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{text-align:center;padding:34px 16px 44px;color:var(--shell-text-muted);
  font-family:var(--font-ui);letter-spacing:2px;font-size:14px}
footer .heart{color:var(--oxblood)}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .cols{grid-template-columns:1fr}
  .alpha{columns:2}
  .formrow{grid-template-columns:1fr 1fr}
  .searchinner{flex-wrap:wrap}
  .navlinks{width:100%;justify-content:space-between}
}
@media (max-width:520px){
  .alpha{columns:1}
  .ingrow{grid-template-columns:70px 90px 1fr 34px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ PRINT (recipe sheet only) ============ */
@media print{
  body{background:#fff}
  .masthead,.searchwrap,.chiprow,.sheetactions,.backlink,.fav,footer,.toast{display:none!important}
  main{max-width:100%;padding:0}
  .sheet{border:none;box-shadow:none;border-radius:0;padding:0;background:#fff;color:#000}
  .cols{grid-template-columns:250px 1fr}
}