:root { --fg:#111; --muted:#666; --bg:#fff; --ok:#0a0; --warn:#b8860b; --err:#b00; --border:#ddd; }

/* -------- Base / Layout -------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.45;
  margin:2rem auto;
  padding:0 1rem;
  max-width:980px;
}
header{display:flex;justify-content:space-between;align-items:center}
nav a{margin-right:1rem}
hr{margin:1rem 0}

/* Utilities you already use in markup */
.left{text-align:left}
.right{text-align:right}
.center{text-align:center}
.small{font-size:.9rem;color:var(--muted)}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* inline → class replacements */
.inline { display:inline; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.row-end { display:flex; gap:.5rem; align-items:center; }
.col { display:flex; flex-direction:column; min-width:10rem; }
.col-grow { flex:1 1 auto; }
.gap-sm { gap:.5rem; }
.mt-4 { margin-top:.5rem; }
.mt-6 { margin-top:.75rem; }
.mt-8 { margin-top:1rem; }
.nowrap { white-space:nowrap; }
.center { text-align:center; }
.right { text-align:right; }
.left { text-align:left; }
.muted { color:#777; }
.small { font-size:.9em; }


/* Badges & state colors */
.badge{
  display:inline-block;padding:.15rem .4rem;border-radius:.25rem;
  background:#eee;color:#333;font-size:.8rem;margin-left:.4rem
}
.warn{color:var(--warn)} .ok{color:var(--ok)} .err{color:var(--err)}

/* -------- Tables -------- */
table{border-collapse:collapse;width:100%;margin:1rem 0}
th,td{border:1px solid var(--border);padding:.5rem .6rem;vertical-align:top}
th{background:var(--bg-soft)}
/* Keep “Actions” column compact & on one line */
th.actions, td.actions{white-space:nowrap;width:1%}
.icon-row{display:inline-flex;align-items:center;gap:.25rem;flex-wrap:nowrap}
.icon-row form{display:inline-flex;margin:0}

/* Optional: horizontal scrolling wrapper for very wide tables */
.table-scroll{overflow-x:auto}
.table-scroll>table{min-width:720px}

/* -------- Forms -------- */
label{display:block;margin:.25rem 0}
form.inline label{display:inline-block;margin-right:.5rem}
input,select,button,textarea{font:inherit;padding:.4rem .5rem}
fieldset{border:1px solid var(--border);padding:1rem;margin:1rem 0}
legend{padding:0 .5rem;color:#333}

/* Simple form grid for admin forms */
.form-grid{
  display:grid;grid-template-columns:1fr;gap:12px;align-items:start;
}
.form-grid label{display:flex;flex-direction:column;gap:6px}
.form-grid input,.form-grid select{width:100%}
@media (min-width:720px){
  .form-grid.form-2{grid-template-columns:repeat(2, minmax(0,1fr))}
  .form-grid.form-3{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.form-actions{
  grid-column:1 / -1;display:flex;justify-content:flex-end;margin-top:4px
}

/* Buttons / links that look like buttons */
a.btn, .btn, button.btn{
  display:inline-block;padding:.4rem .7rem;border:1px solid #888;border-radius:.5rem;
  background:#fff;color:inherit;text-decoration:none;cursor:pointer
}
a.btn:hover, .btn:hover, button.btn:hover{background:#f6f6f6}

/* Alignment helpers (used in tables) */
.left{ text-align:left }
.right{ text-align:right }
.center{ text-align:center }

/* -------- Icon system -------- */
svg.icon{
  width:18px;height:18px;display:inline-block;
  stroke:currentColor;fill:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-2px;
}
a.icon-btn, button.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.25rem;
  padding:.25rem;border:1px solid transparent;background:transparent;color:#111;text-decoration:none;
  line-height:1;cursor:pointer;
}
a.icon-btn:hover, button.icon-btn:hover{background:#f5f5f5;border-color:var(--border);color:#000}
/* Compact icons inside the Actions column (prevents wrapping) */
td.actions .icon-btn{padding:0;border:0}

/* Optional tints per action */
.icon-btn.view{color:#1f6feb}
.icon-btn.edit{color:#8b5cf6}
.icon-btn.adjust{color:#9a6b00}
.icon-btn.danger{color:#b00020}

/* A11y */
.icon-btn .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.icon-btn:focus-visible{outline:2px solid #0a7;outline-offset:2px;border-radius:.5rem}

/* -------- Responsive helpers -------- */
.row{display:flex;gap:1rem;flex-wrap:wrap}
.col{flex:1 1 280px}
@media (max-width:640px){
  .row{gap:.5rem}
  .row .col{flex:1 1 100%;min-width:240px}
  /* Touch target sizing for loose icons (not the compact Actions cell) */
  a.icon-btn:not(td.actions .icon-btn),
  button.icon-btn:not(td.actions .icon-btn){min-width:40px;min-height:40px}
  /* Slightly tighter table padding on small screens */
  th,td{padding:.45rem .5rem}
}

/* --- “Card” tables for small screens (opt-in: add class="rtable") --- */
.rtable{width:100%;border-collapse:collapse}
@media (max-width:700px){
  .rtable thead{display:none}
  .rtable>tbody>tr:first-child{display:none} /* your headers are the first row */
  .rtable, .rtable tbody, .rtable tr, .rtable td{display:block;width:100%}
  .rtable tr{
    border:1px solid var(--border);border-radius:10px;padding:.35rem .6rem;margin:.5rem 0
  }
  .rtable td{
    display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.25rem 0
  }
  .rtable td::before{content:attr(data-label);font-weight:600}
  .rtable td .actions, .rtable td .nowrap{white-space:nowrap}
}

/* -------- Print -------- */
@media print{
  header, nav, .pager, .btn, .icon-btn{display:none !important}
  table{font-size:12pt}
  h1, h2{margin:.25in 0 .1in}
}


/* ---------- Audit coverage: neutral utilities used in markup ---------- */
/* Base tokens often combined with .icon-btn (colors stay on .icon-btn.*) */
.edit, .danger, .view, .adjust, .new { /* audit: noop base */ }
.icon { display:inline-block; line-height:1; } /* non-SVG use stays neutral; svg.icon above styles icons */
.form-3 { /* audit: token exists; rules live in .form-grid.form-3 */ }
.link { color:#1f6feb; text-decoration:underline; cursor:pointer }
.ext, .meas, .wac { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.rq { color: var(--err); font-weight:600 }
.usechk { display:inline-flex; align-items:center; gap:.35rem }
.altpick { opacity:.85 }
.x { text-decoration:line-through; opacity:.65 }
.hclass { font-weight:600 }

  .menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
    align-items:start;
  }
  .menu-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
    padding:12px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .menu-card img{
    width:100%;
    height:auto;
    display:block;
    border-radius:8px;
    margin-bottom:.5rem;   /* keeps buttons off the image */
    object-fit:cover;
  }
  .menu-card h3{ margin:.25rem 0 .25rem; }
  .menu-card .flavor-story{ margin:.25rem 0; color:#555; }
  .menu-card .actions{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin-top:.5rem;      /* spacing above the buttons */
  }

/* ===== Print helpers ===== */
@media print {
  .page-break {
    break-after: page;
    page-break-after: always; /* legacy */
  }
}