:root {
  --bg: #e4efe4;
  --panel: #f7fbf6;
  --ink: #1c2820;
  --muted: #5c6b62;
  --line: #c5d6c6;
  --accent: #2f6b45;
  --header: #2c5538;
  --danger: #8d2218;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Tahoma, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.35;
}
button, input, select, textarea { font: inherit; color: inherit; }
button, .file-btn {
  background: #e7efe8;
  border: 1px solid #b7c9b8;
  border-radius: 6px;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
}
button.danger { background: #f8e8e6; border-color: #e3b4ae; color: var(--danger); }
button:disabled { opacity: 0.55; cursor: default; }
a { color: #1d6b38; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.top {
  background: var(--header);
  color: #fff;
  padding: 0.4rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.brand { font-weight: 700; }
.brand a, .site-home, .top nav a, .who { color: #e7f3ea; text-decoration: none; }
.top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: center; }
.top nav a:hover, .site-home:hover, .brand a:hover { color: #fff; }
.who { font-weight: 650; }

.wrap { padding: 0.55rem; }
.screen {
  display: grid;
  grid-template-columns: minmax(340px, 0.44fr) minmax(0, 1fr);
  gap: 0.55rem;
  height: calc(100vh - 3.3rem);
}
.list-panel, .detail-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 0;
  overflow: auto;
}
.list-panel { padding: 0.55rem; display: flex; flex-direction: column; }
.detail-panel { padding: 0.8rem 0.95rem 1.2rem; }
.new-recipe input, #recipe-search, .field-grid input, .field-grid select, .block input, .block select, .block textarea, .card input, .card select, .card textarea {
  width: 100%;
  border: 1px solid #b7c9b8;
  border-radius: 6px;
  padding: 0.35rem 0.45rem;
  background: #fff;
}
#recipe-search { margin-top: 0.4rem; }
.hf-drop {
  margin: 0.7rem 0 0.4rem;
  padding: 1.15rem 0.8rem;
  text-align: center;
  border: 2px dashed #b7c9b8;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}
.hf-drop.is-over {
  border-color: var(--accent);
  background: #e7f3e6;
  color: var(--ink);
}
#hf-results {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0.2rem 0.35rem;
  max-height: 28rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
#hf-results:empty { display: none; }
#hf-results li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.35rem 0.7rem;
  align-items: start;
  margin: 0.15rem 0;
  padding: 0.22rem 0.3rem;
  border-radius: 6px;
}
#hf-results li.is-imported { background: #d5ead4; }
#hf-results label { display: contents; cursor: pointer; }
#hf-results li.is-imported label { cursor: default; }
.hf-name, .hf-state {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hf-state { color: var(--muted); font-size: 0.78rem; }
.hf-state.is-new { color: var(--accent); }
.hf-state.is-done { color: var(--ink); font-weight: 650; }
.count { margin: 0.35rem 0; color: var(--muted); font-size: 0.85rem; }
.recipe-list { display: flex; flex-direction: column; gap: 0.12rem; }
.recipe-row {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.28rem 0.35rem;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.recipe-row:hover { background: #e7f3e6; }
.recipe-row.is-open { background: #d5ead4; }
.recipe-date { color: var(--muted); font-size: 0.82rem; }
.recipe-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-flags { display: flex; gap: 0.35rem; align-items: baseline; justify-content: flex-end; }
.recipe-made { font-size: 0.72rem; color: var(--accent); font-weight: 700; }
.recipe-made.is-hidden { visibility: hidden; }
.recipe-hf {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--header);
  background: #e7f3e6;
  border: 1px solid #b7c9b8;
  border-radius: 999px;
  padding: 0.02rem 0.38rem;
  white-space: nowrap;
}

.detail-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.detail-title-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.45rem; min-width: 0; }
.detail-title-line h1 { min-width: 0; }
.recipe-row.is-open .recipe-hf { background: #fff; }
h1 { font-size: 1.35rem; margin: 0 0 0.35rem; }
h2 { font-size: 1rem; margin: 0; }
.save-state { margin: 0; color: var(--muted); font-size: 0.85rem; }
.save-state.is-bad { color: var(--danger); }
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.7rem;
  margin: 0.4rem 0 0.2rem;
}
.field-grid .span-2 { grid-column: 1 / -1; }
label { display: block; font-size: 0.86rem; color: #314038; }
.check-line { display: flex; align-items: center; gap: 0.4rem; padding-top: 1.15rem; }
.check-line input { width: auto; }
.block { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.block-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.actions, .row-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.actions { margin: 0; }
.sheets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.sheet-head { display: flex; justify-content: space-between; gap: 0.4rem; align-items: baseline; margin-bottom: 0.3rem; }
.sheet-head h2 { font-size: 0.95rem; }
.grid {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
}
.grid th, .grid td {
  border: 1px solid var(--line);
  padding: 0.08rem 0.28rem;
  vertical-align: top;
}
.grid th { background: #eef6ee; font-size: 0.78rem; font-weight: 650; text-align: left; }
.grid input, .grid select, .grid textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.22rem 0.05rem;
  font: inherit;
  box-shadow: none;
}
.grid textarea { resize: vertical; min-height: 2.5rem; }
.grid .num { width: 2rem; text-align: right; color: var(--muted); padding-top: 0.32rem; }
.grid .qty-col { width: 3.3rem; text-align: right; }
.grid .measure-col { width: calc(6.4rem + 1cm); }
.grid .act-col { width: 16rem; }
.grid .row-btns { white-space: nowrap; padding-top: 0.18rem; }
.grid .row-btns button { padding: 0.1rem 0.32rem; font-size: 0.74rem; margin: 0 0.12rem 0.12rem 0; }
.print-grid { margin: 0.2rem 0 0.8rem; }
.print-grid td, .print-grid th { font-size: 0.95rem; padding: 0.25rem 0.4rem; }
.print-grid col.p-tick { width: 1.4rem; }
.print-grid col.p-num { width: 1.5rem; }
.print-grid col.p-qty { width: 2.5rem; }
.print-grid col.p-measure { width: 4.6rem; }
.print-grid .p-tick { text-align: center; padding-left: 0.1rem; padding-right: 0.1rem; }
.print-grid .p-num, .print-grid .p-qty { text-align: right; padding-left: 0.15rem; padding-right: 0.2rem; }
.print-grid .p-measure { text-align: left; padding-left: 0.25rem; padding-right: 0.25rem; }
.print-grid .tick-box {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid #314038;
  vertical-align: middle;
}
.hint, .muted { color: var(--muted); }
.hint { margin: 0.25rem 0 0.4rem; font-size: 0.86rem; }
.doc-name { margin: 0.2rem 0; font-weight: 650; }
.file-btn input { display: none; }
.photo {
  margin-top: 0.35rem;
  min-height: 9rem;
  border: 1px dashed #9db5a0;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
}
.photo:focus { outline: 2px solid var(--accent); }
.photo img { max-width: 100%; max-height: 420px; }
.photo p { margin: 0; color: var(--muted); text-align: center; }
.delete-row { margin-top: 1.2rem; display: flex; gap: 0.45rem; }
.empty { padding: 1rem 0.2rem; }
.notice, .error { margin: 0 0 0.5rem; padding: 0.45rem 0.6rem; border-radius: 6px; }
.notice { background: #e5f4e6; }
.error { background: #fdeceb; color: var(--danger); }

.login-wrap { max-width: 28rem; margin: 1.5rem auto; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; }
.card.narrow, .login-card { max-width: 36rem; }
.edit-row { display: flex; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
.edit-row form { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.edit-row form.edit-main { flex: 1; }
.edit-row input, .add-row input { width: auto; flex: 1; margin: 0; }
.edit-row button, .add-row button { margin-top: 0; }
.add-row { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.7rem; }
.card.sheet { max-width: 46rem; }
body:has(.card.narrow) > .wrap { max-width: 40rem; margin: 0.4rem auto 1.5rem; }
body:has(.card.sheet) > .wrap { max-width: 50rem; margin: 0.4rem auto 1.5rem; }
.card.narrow, .card.sheet { margin-left: auto; margin-right: auto; }
.card + .card { margin-top: 0.7rem; }
.card label { margin: 0.45rem 0; }
.card button, .inline-form { margin-top: 0.45rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.45rem; }
.button-row button { margin-top: 0; }
.person { border-top: 1px solid var(--line); padding: 0.55rem 0; }
.stack-form label { margin-top: 0.35rem; }

.print-page { background: #fff; }
.print-sheet { max-width: 42rem; margin: 0 auto; padding: 1.2rem; }
.print-kicker { color: var(--muted); margin: 0; letter-spacing: 0.02em; }
.print-meta { color: #314038; }
.print-copy { white-space: normal; }
.print-url { word-break: break-all; font-size: 1.05rem; }
.noprint { display: flex; gap: 0.7rem; align-items: center; }

@media (max-width: 800px) {
  .screen { grid-template-columns: 1fr; height: auto; }
  .list-panel { max-height: 42vh; }
  .field-grid { grid-template-columns: 1fr; }
  .sheets { grid-template-columns: 1fr; }
  .check-line { padding-top: 0; }
}

@media print {
  .noprint, .top { display: none !important; }
  body, .print-page { background: #fff; }
  .print-sheet { max-width: none; padding: 0; }
}