:root { --ink:#1a202c; --soft:#64748b; --line:#e2e8f0; --accent:#2563eb;
        --ok:#16a34a; --warn:#d97706; --bad:#dc2626; }
* { box-sizing:border-box; }
/* 16px base: anything smaller in an input makes iOS Safari auto-zoom on focus. */
body { margin:0; font:16px/1.5 system-ui, sans-serif; color:var(--ink);
       -webkit-text-size-adjust:100%; }

header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
         gap:.4rem 1rem; padding:.6rem max(1rem, env(safe-area-inset-right))
         .6rem max(1rem, env(safe-area-inset-left)); border-bottom:1px solid var(--line); }
nav { display:flex; flex-wrap:wrap; gap:.2rem .4rem; align-items:center; }
/* 44px touch targets for nav links and all buttons (Apple HIG minimum). */
nav a { color:var(--accent); text-decoration:none; padding:.6rem .5rem;
        min-height:44px; display:inline-flex; align-items:center; border-radius:.35rem; }
nav a:active { background:#eff6ff; }
form.inline { display:inline; }

main { max-width:60rem; margin:0 auto;
       padding:1rem max(1rem, env(safe-area-inset-right))
       max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }

button, input, select, textarea { font:inherit; }   /* keeps inputs at 16px — no iOS zoom */
button { min-height:44px; padding:.5rem 1rem; border:1px solid var(--line);
         border-radius:.45rem; background:#f8fafc; color:var(--ink);
         cursor:pointer; touch-action:manipulation; }
button:active { background:#e2e8f0; }
button[type="submit"] { background:var(--accent); border-color:var(--accent); color:#fff; }
button[type="submit"]:active { background:#1d4ed8; }
button[disabled] { opacity:.5; cursor:not-allowed; }
input:not([type="checkbox"]) { min-height:44px; padding:.45rem .6rem; width:100%;
        max-width:22rem; border:1px solid var(--line); border-radius:.35rem; }
input[type="checkbox"] { width:1.2rem; height:1.2rem; }
label { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.4rem;
        padding:.25rem 0; }

/* Tables scroll inside their wrapper instead of stretching the page sideways. */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line);
         overflow-wrap:break-word; }
td:first-child { white-space:nowrap; }

.badge { padding:.1rem .5rem; border-radius:.6rem; font-size:.8rem; color:#fff;
         white-space:nowrap; }
.badge.generated { background:var(--soft); } .badge.approved { background:var(--ok); }
.badge.approved_stale { background:var(--bad); } .badge.posted { background:var(--accent); }
.badge.missing { background:var(--warn); }
.chip-pass { color:var(--ok); } .chip-fail { color:var(--bad); font-weight:600; }
.mention { color:var(--accent); font-weight:600; }
.error, li.error { color:var(--bad); }
.messages { list-style:none; padding:0; } .messages li { padding:.4rem .6rem; }

.editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
textarea { width:100%; border:1px solid var(--line); border-radius:.35rem; }
textarea#editor { min-height:30rem; font:16px/1.5 ui-monospace, monospace; }
.preview { border:1px solid var(--line); border-radius:.4rem; padding:0 1rem;
           overflow:auto; overflow-wrap:break-word; word-break:break-word; }
.preview a { overflow-wrap:anywhere; }
pre.joblog { background:#0f172a; color:#e2e8f0; padding:1rem; border-radius:.4rem;
             max-height:28rem; overflow:auto; font-size:13px; }
.stale-banner { background:#fef2f2; border:1px solid var(--bad); color:var(--bad);
                padding:.6rem 1rem; border-radius:.4rem; margin:.6rem 0; }
li.nested { margin-left:1.4rem; list-style:circle; }
ul li { padding:.15rem 0; }

form.login { max-width:22rem; display:grid; gap:.8rem; }
form.login label { display:grid; gap:.25rem; }

/* Phones + small tablets: stack the side-by-side grids, shrink the editor. */
@media (max-width: 900px) {
  .editor-grid { grid-template-columns:1fr; }
  textarea#editor { min-height:18rem; }
  .preview { max-height:24rem; }
  main { padding-top:.75rem; }
  h1 { font-size:1.4rem; }
}