:root{
  --bg:#f5f1ea;
  --paper:#fffdfa;
  --ink:#1f1a16;
  --muted:#6b6258;
  --line:#e6ddd0;
  --accent:#8a4f2a;
  --accent-soft:#f3e4d6;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#f8f5f0 0%,#efe8de 100%);
  color:var(--ink);
}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:72px;
  padding:18px 28px;
  background:#fffdfa;
  border-bottom:1px solid var(--line);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:inherit;
  font-weight:700;
  text-decoration:none;
}
.brand-mark,.login-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  color:#fffdfa;
  background:var(--accent);
  border-radius:8px;
  font-weight:800;
}
.brand-logo{
  display:block;
  width:36px;
  height:36px;
}
.login-logo{
  display:block;
  width:58px;
  height:58px;
  margin-bottom:14px;
}
nav{
  display:flex;
  gap:16px;
}
nav a{
  color:var(--accent);
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 13px;
  font-weight:700;
  text-decoration:none;
}
nav a:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.shell{
  max-width:1280px;
  margin:0 auto;
  height:calc(100vh - 72px);
  padding:24px;
  overflow:hidden;
}
.layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:24px;
  height:100%;
  min-height:0;
}
.sidebar,.main{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 10px 34px rgba(0,0,0,.06);
}
.sidebar{
  padding:18px;
  align-self:start;
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.main{
  height:100%;
  min-height:0;
  overflow:auto;
  padding:26px;
}
h1,h2,h3{margin:0 0 10px}
h1{font-size:2.1rem; letter-spacing:-.02em}
h2{font-size:1.15rem}
.muted{color:var(--muted)}
.sidebar-title{
  display:block;
  width:100%;
  margin:0 0 10px;
  padding:0;
  color:inherit;
  background:transparent;
  border:0;
  font:inherit;
  font-size:1.15rem;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.sidebar-title:hover{
  color:var(--accent);
}
.search{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:.96rem;
  margin:8px 0 14px;
}
.filter-row,.tag-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.filter-row{
  display:grid;
  gap:10px;
}
.all-filter-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:42px;
  padding:10px 12px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.all-filter-btn span{
  color:var(--muted);
  font-weight:700;
}
.all-filter-btn.active,.all-filter-btn:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.filter-control{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:.88rem;
  font-weight:700;
}
.filter-select{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  font:inherit;
  cursor:pointer;
}
.filter-select:focus{
  outline:2px solid var(--accent-soft);
  border-color:var(--accent);
}
.filter-summary{
  color:var(--muted);
  font-size:.9rem;
}
.recipe-list-scroll{
  min-height:0;
  overflow:auto;
  margin-top:14px;
  padding-right:4px;
}
.sidebar-list-heading{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 0 8px;
  background:var(--paper);
  color:var(--muted);
  font-size:.86rem;
  font-weight:800;
  text-transform:uppercase;
}
.sidebar-list-heading strong{
  color:var(--accent);
}
.filter-chip,.tag-chip,.chip,.small-btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:7px 11px;
  font-size:.92rem;
}
.filter-chip,.tag-chip,.small-btn,.recipe-btn{cursor:pointer}
.filter-chip.active,.tag-chip:hover,.filter-chip:hover,.recipe-btn.active{
  background:var(--accent-soft);
  border-color:var(--accent);
}
.recipe-list{
  display:grid;
  gap:8px;
}
.recipe-btn{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  gap:10px;
  text-align:left;
  width:100%;
  min-height:68px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.recipe-list-thumb{
  width:52px;
  height:52px;
  border-radius:10px;
  object-fit:cover;
  background:var(--accent-soft);
}
.empty-thumb{
  display:block;
}
.recipe-title{
  min-width:0;
  overflow:hidden;
  font-weight:700;
  margin-bottom:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recipe-sub{font-size:.84rem; color:var(--muted)}
.hero{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:16px;
}
.browse-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:18px;
}
.browse-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}
.browse-card{
  display:grid;
  grid-template-rows:180px 1fr;
  overflow:hidden;
  padding:0;
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  cursor:pointer;
}
.browse-card:hover{
  border-color:var(--accent);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.browse-card img,.browse-card-empty{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#f4eadf;
}
.browse-card-body{
  display:grid;
  gap:6px;
  padding:12px;
}
.browse-card-title{
  min-width:0;
  overflow:hidden;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.browse-card-meta{
  min-width:0;
  min-height:1.2em;
  overflow:hidden;
  color:var(--muted);
  font-size:.86rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.recipe-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,420px);
  gap:24px;
  align-items:stretch;
  margin-bottom:18px;
}
.recipe-hero-content{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.recipe-hero-content .hero-actions{
  justify-content:flex-end;
  order:-1;
  margin-bottom:24px;
}
.eyebrow{
  margin:0 0 8px;
  color:var(--accent);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
}
.recipe-facts{
  padding-top:4px;
}
.meta-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0;
}
.author{
  color:var(--muted);
  min-height:1.2em;
}
.rating-row{
  display:flex;
  gap:6px;
  margin:12px 0;
}
.star-btn{
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}
.star-icon{
  display:block;
  color:#e6ddd0;
  font-size:28px;
  line-height:1;
}
.star-icon.active{
  color:var(--accent);
}
.servings-box{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  background:#fcf8f2;
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:18px;
}
.servings-controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.servings-controls input{
  width:84px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:1rem;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:20px;
}
.three-col{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:20px;
}
.panel{
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:18px;
}
.panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}
.ingredient-list,.step-list{
  margin:0;
  padding-left:0;
  list-style:none;
}
.ingredient-item{
  padding:10px 0;
  border-bottom:1px solid #f0e8dd;
}
.ingredient-item:last-child{border-bottom:none}
.ingredient-item label{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.ingredient-item.checked span{
  text-decoration:line-through;
  color:var(--muted);
}
.step-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 14px;
}
.step-item{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:12px;
  padding:12px;
  border:1px solid #f0e8dd;
  border-radius:14px;
  margin-bottom:10px;
  cursor:pointer;
}
.step-item.active{
  background:var(--accent-soft);
  border-color:var(--accent);
}
.step-num{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f5efe7;
  font-weight:700;
}
.nutrition-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.nutrition-item{
  border:1px solid #f0e8dd;
  border-radius:14px;
  padding:10px;
  background:#fffcf8;
}
.nutrition-key{
  font-size:.84rem;
  color:var(--muted);
  text-transform:capitalize;
}
.nutrition-val{
  font-weight:700;
  margin-top:4px;
}
.empty{color:var(--muted); font-style:italic}
kbd{
  border:1px solid var(--line);
  background:white;
  padding:2px 6px;
  border-radius:6px;
  font-family:inherit;
  font-size:.85rem;
}
.help{
  margin-top:14px;
  flex:0 0 auto;
  color:var(--muted);
  font-size:.92rem;
}
.recipe-hero-media{
  min-height:300px;
}
.recipe-image{
  display:block;
  width:100%;
  height:100%;
  min-height:300px;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  background:#fff;
  object-fit:cover;
}
.login-page{
  display:grid;
  grid-template-columns:minmax(280px,380px) minmax(0,1fr);
  align-items:center;
  gap:28px;
  min-height:100vh;
}
.login-card{
  padding:28px;
  background:#ffffff;
  border:1px solid #dedbd1;
  border-radius:8px;
}
.login-mark{
  width:52px;
  height:52px;
  margin-bottom:14px;
  font-size:1.4rem;
}
.login-card p{
  color:#667067;
}
.login-form{
  display:grid;
  gap:12px;
  margin-top:20px;
}
.login-form input{
  width:100%;
  margin-top:6px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
}
.login-form button{
  width:100%;
  padding:12px 14px;
  color:#fffdfa;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:8px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.flash{
  margin-top:14px;
  padding:10px 12px;
  background:#fff4e5;
  border:1px solid #e6c89f;
  border-radius:8px;
}
.login-collage{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.collage-tile{
  position:relative;
  overflow:hidden;
  aspect-ratio:1 / 1;
  border:1px solid #dedbd1;
  border-radius:8px;
  background:#ffffff;
}
.collage-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.collage-tile img + img{
  opacity:0;
  transition:opacity 1.4s ease;
}
.collage-tile.show-alt img + img{
  opacity:1;
}

@media (max-width:980px){
  .layout,.two-col,.three-col,.recipe-hero{grid-template-columns:1fr}
  .sidebar{position:static; max-height:none}
  .hero,.servings-box{flex-direction:column; align-items:stretch}
  .recipe-hero-content .hero-actions{justify-content:flex-start}
  .login-page{grid-template-columns:1fr}
  .login-collage{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media print {

  @page {
    size: letter landscape;
	margin: 0.4in;
  }

  body {
    background: #fff !important;
    color: #000;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.4;
  }

  /* hide UI junk */
  .sidebar,
  .hero-actions,
  .servings-box,
  .step-controls,
  .site-header {
    display: none !important;
  }

  /* layout reset */
  .layout { display: block; }
  .shell { max-width: none; margin: 0; padding: 0; }

  .main,
  .panel {
    border: none;
    box-shadow: none;
    padding: 0;
    background: #fff;
  }

  /* title */
  h1 {
    font-size: 22pt;
    margin: 0 0 6px;
  }

  h2 {
    font-size: 14pt;
    margin: 12px 0 8px;
    page-break-after: avoid;
  }

  /* meta */
  .meta-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 8px 0 12px;
  }

  .chip {
    border: 1px solid #ccc;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10pt;
  }

  .tag-row { display: none; }

  /* IMAGE (smaller so it doesn't break layout) */
  .recipe-image {
    max-width: 260px;
    max-height: 160px;
    margin-bottom: 10px;
  }

  .hero {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 16px;
    margin-bottom: 10px;
  }

  /* MAIN LAYOUT */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 24px;
  }

  /* INGREDIENTS */
  .ingredient-item {
    padding: 3px 0;
    border: none;
  }

  .ingredient-item label {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 8px;
  }

  input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: black;
  }

  .step-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .step-item {
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    gap: 10px !important;

    padding: 0 !important;
    margin: 0 0 10px !important;

    border: none !important;
    background: none !important;
    cursor: default !important;

    page-break-inside: avoid;
  }

  .step-num {
    font-weight: bold;
    font-size: 11pt;
  }

  /* remove highlight styling */
  .step-item.active {
    background: none !important;
    border: none !important;
  }

  /* nutrition cleanup */
  .nutrition-item {
    border: none;
    padding: 0;
  }

  /* hide empty junk */
  .empty {
    display: none;
  }
}