:root{
  --bg:#FAF6EE;
  --paper:#FFFEFB;
  --ink:#2B241D;
  --muted:#8A7E6C;
  --hair:#E1D7BE;
  --gold:#B4712E;
  --gold-deep:#8A551F;
  --brick:#A6432F;
  --brick-bg:#F5E7E1;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.5;
}
a{color:var(--gold-deep);}

/* ---------- layout shell ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 24px;
  border-bottom:1px solid var(--hair);
  background:var(--paper);
}
.topbar .brand{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:19px;
  color:var(--ink);
  text-decoration:none;
}
.topbar nav a{
  margin-left:18px;
  font-size:13.5px;
  color:var(--muted);
  text-decoration:none;
}
.topbar nav a:hover, .topbar nav a.active{color:var(--gold-deep);}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:36px 20px 80px;
}
.wrap.wide{max-width:980px;}

h1.page-title{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:32px;
  margin:0 0 24px;
}
h2.section-title{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:19px;
  margin:0 0 12px;
}

/* ---------- forms ---------- */
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}
input[type=text], input[type=number], input[type=date], input[type=password], select, textarea{
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:4px;
  padding:8px 10px;
  outline:none;
  width:100%;
}
input:focus, select:focus, textarea:focus{border-color:var(--gold);}
textarea{resize:vertical; min-height:60px;}

.field{margin-bottom:16px;}
.field-row{display:flex; gap:16px; flex-wrap:wrap;}
.field-row .field{flex:1; min-width:160px;}

button, .btn{
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  border-radius:4px;
  padding:9px 16px;
  border:1px solid var(--hair);
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  display:inline-block;
}
button:hover, .btn:hover{border-color:var(--gold);}
.btn-primary{
  background:var(--gold-deep);
  border-color:var(--gold-deep);
  color:#fff;
}
.btn-primary:hover{background:var(--gold);}
.btn-danger{color:var(--brick); border-color:var(--brick-bg);}
.btn-danger:hover{border-color:var(--brick);}
.btn-small{padding:5px 10px; font-size:12.5px;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}

/* ---------- tables ---------- */
table.rows{width:100%; border-collapse:collapse; margin-bottom:10px;}
table.rows th{
  text-align:left;
  font-size:11.5px;
  font-weight:500;
  color:var(--muted);
  padding:0 8px 8px 2px;
  border-bottom:1px solid var(--hair);
}
table.rows td{
  padding:7px 8px 7px 2px;
  border-bottom:1px solid var(--hair);
  vertical-align:middle;
}
table.rows input{padding:6px 8px;}

/* ---------- cards / lists ---------- */
.card{
  border:1px solid var(--hair);
  background:var(--paper);
  border-radius:4px;
  padding:18px 20px;
  margin-bottom:14px;
}
.card a.card-link{
  text-decoration:none;
  color:inherit;
  display:block;
}
.card-title{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:18px;
  margin:0 0 4px;
}
.card-meta{font-size:12.5px; color:var(--muted);}

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--muted);
}

/* ---------- misc ---------- */
.notice{
  background:var(--brick-bg);
  color:var(--brick);
  border-radius:4px;
  padding:10px 14px;
  font-size:13.5px;
  margin-bottom:18px;
}
.sum-line{font-size:13px; color:var(--muted); padding:4px 2px;}
.sum-line.ok{color:var(--gold-deep);}
.sum-line.bad{color:var(--brick);}

/* ---------- numbered, draggable steps ---------- */
.step-row{align-items:flex-start; gap:8px; margin-bottom:6px;}
.step-row .drag-handle{
  cursor:grab; color:var(--muted); font-size:15px; line-height:1;
  padding:10px 2px 0; user-select:none; flex:0 0 auto;
}
.step-row .drag-handle:active{cursor:grabbing;}
.step-row .step-num{
  flex:0 0 auto; padding-top:10px; min-width:20px;
  font-family:'Fraunces',serif; color:var(--muted); font-size:14px;
}
.step-row.dragging{opacity:0.4;}
.step-row.drag-over-above{border-top:2px solid var(--gold);}
.step-row.drag-over-below{border-bottom:2px solid var(--gold);}

/* ---------- °F/°C companion text ---------- */
.temp-c{font-size:12.5px; color:var(--muted); margin-left:6px; white-space:nowrap;}
.temp-input-row{display:flex; align-items:center; gap:4px;}

.login-shell{
  max-width:360px;
  margin:80px auto;
  padding:0 20px;
}

@media print{
  .topbar, .no-print{display:none !important;}
  body{background:#fff;}
}