:root { --fg:#1a1a1a; --muted:#777; --line:#e2e2e2; --accent:#2b6cb0; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       color: var(--fg); background:#fafafa; line-height:1.4;
       display:flex; flex-direction:column; min-height:100vh; }
main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1rem; width:100%; flex:1; }
.site-foot { display:flex; align-items:center; justify-content:center; gap:.5rem;
             border-top:1px solid var(--line); background:#fff; padding:.75rem 1rem;
             color:var(--muted); font-size:.85rem; }
.site-foot .foot-mark { height:1.4rem; width:auto; opacity:.85; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; }

.topbar { display:flex; align-items:center; justify-content:space-between;
          background:#fff; border-bottom:1px solid var(--line); padding:.75rem 1.25rem; }
.topbar .brand { font-weight:700; font-size:1.1rem; display:inline-flex; align-items:center; gap:.45rem; }
.topbar .brand-logo { height:1.6rem; width:auto; display:block; }
.topbar nav a { margin-left:1rem; }

.muted { color: var(--muted); font-size:.9em; }
.badge { padding:.1rem .5rem; border-radius:1rem; font-size:.75rem; font-weight:600; }
.badge.ok { background:#e6f4ea; color:#1e7e34; }
.badge.dirty { background:#fff3cd; color:#8a6d00; }
.badge.over { background:#fbe3e4; color:#a11; }
.ok-msg { color:#1e7e34; font-weight:600; }

table.sheets { width:100%; border-collapse:collapse; background:#fff; margin:1rem 0; }
table.sheets th, table.sheets td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.actions a, .actions form { display:inline-block; margin-right:.6rem; }

.cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem; }
.cols section { background:#fff; border:1px solid var(--line); border-radius:.4rem; padding:1rem; }
.activity li { margin-bottom:.35rem; }

form label { display:block; margin:.6rem 0 .2rem; font-weight:600; font-size:.9rem; }
form input, form textarea { width:100%; padding:.4rem; border:1px solid #ccc; border-radius:.3rem; font:inherit; }
form.inline { display:inline-flex; gap:.3rem; align-items:center; }
form.inline input { width:auto; }
button { background:var(--accent); color:#fff; border:0; padding:.45rem .9rem; border-radius:.3rem; font:inherit; cursor:pointer; }
button:hover { filter:brightness(1.08); }

/* Editing controls take the room; the preview is just a small layout sketch.
   minmax(0,…) lets the columns shrink below the iframe's intrinsic 816px width
   — without it the preview blows out the grid and the page's right edge (the
   footer QR) gets clipped (issue #14). */
.editor .grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,260px);
                gap:1.5rem; align-items:start; }
@media (max-width:760px) {
  .editor .grid { grid-template-columns:1fr; }
  .preview-pane { position:static; }
}
.save-row { display:flex; gap:1rem; align-items:flex-end; margin-top:1rem; flex-wrap:wrap; }
.save-row label { margin:0; }
.log { max-width: 32rem; }

/* --- Editor live preview (issue #4) --- */
.preview-pane { position:sticky; top:1rem; }
.preview-cap { margin:.2rem 0 .4rem; }
/* The preview is the real print template in an iframe, rendered at true page
   size and scaled to fit by JS (transform), so the overflow check reflects the
   printed page, not the device viewport (issue #14). .pp-scale clips the
   overflow and JS sets its height to the scaled page height. */
.pp-scale { overflow:hidden; max-width:260px; }
.page-preview { display:block; border:0; transform-origin:top left;
                background:#fff; box-shadow:0 1px 4px #0001; }
.page-preview.overflowing { box-shadow:0 0 0 2px #f8d4cf; }
.overflow-warn { display:none; background:#fbe3e4; color:#a11; border:1px solid #e9b3b3;
                 padding:.3rem .5rem; border-radius:.3rem; font-size:.85rem; font-weight:600; margin-bottom:.3rem; }
.overflow-banner { background:#fbe3e4; color:#a11; border:1px solid #e9b3b3; border-radius:.4rem;
                   padding:.6rem .8rem; margin:.6rem 0; }

section { margin-bottom: 2rem; }
.template-editor .grid { display:grid; grid-template-columns: 2fr 1fr; gap:1.5rem; align-items:start; }
.template-editor textarea { width:100%; }
.help { background:#fff; border:1px solid var(--line); border-radius:.4rem; padding:1rem; font-size:.85rem; }
.help dt { margin-top:.5rem; } .help dd { margin:0 0 .2rem; }
.template-pick table.sheets td { vertical-align:middle; }
.inline-radio { display:inline-flex; align-items:center; gap:.35rem; font-weight:normal; margin:0; }
.inline-radio input { width:auto; }
.settings-form select { width:auto; min-width:16rem; padding:.4rem; }
.settings-form .label { text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-size:.7rem; margin-bottom:.25rem; }
.logo-settings { display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; }
.logo-current img, #logo-preview { max-height:80px; max-width:180px; border:1px solid var(--line);
                                   background:#fff; padding:6px; border-radius:.3rem; display:block; }
.logo-pick input[type=file] { width:auto; }
.logo-preview-wrap { margin-top:.6rem; }
/* Body grid editor */
.body-section { border:1px solid var(--line); border-radius:.4rem; padding:.5rem .75rem; margin:.6rem 0; }
.body-section legend { font-weight:600; font-size:.85rem; padding:0 .3rem; }
.body-row { border:1px solid var(--line); border-radius:.4rem; padding:.5rem; margin-bottom:.5rem; background:#fff; }
.body-row textarea { width:100%; font:inherit; }
.brow-right { display:flex; gap:.5rem; align-items:center; margin-top:.4rem; flex-wrap:wrap; }
.brow-right .row-kind { width:auto; }
.brow-right .row-value { flex:1; min-width:8rem; }
.row-image-ctl { display:inline-flex; gap:.5rem; align-items:center; }
/* The hidden attribute must win over the display above (author rules beat the
   UA [hidden]{display:none}), so the file picker actually hides for none/qr. */
.row-image-ctl[hidden] { display:none; }
.row-image-thumb { height:2.4rem; border:1px solid var(--line); border-radius:.2rem; background:#fff; }
.remove-row { background:none; color:#a11; border:1px solid #e9b3b3; padding:.1rem .55rem; line-height:1; }
.add-body-row { background:none; color:var(--accent); border:1px dashed var(--accent); padding:.2rem .6rem; font-size:.85rem; }

.start-from { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:.4rem 0 1rem; }
.start-from .label { text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-size:.7rem; }
.start-from .chip { border:1px solid var(--line); border-radius:1rem; padding:.15rem .7rem; font-size:.85rem; background:#fff; }
.start-from .chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.warn-bar { background:#fff3cd; color:#8a6d00; border-bottom:1px solid #f0d98c;
            padding:.5rem 1.25rem; font-size:.9rem; text-align:center; }
.warn-bar code { background:#0001; padding:0 .25rem; border-radius:3px; }