/* Light, calm, phone-first (operator D1, 6 Oct: light only). Hand-written like the
   Daily Production Sheet app: no build step, no design system, thin enough to run
   untouched. The palette is the one MC's comparison page uses, so section 1 and
   the app read as one thing. Every surface is a token. */
:root{
  --bg:#f7f5f1; --surface:#ffffff; --ink:#1f1d1a; --muted:#6b665e; --line:#e3ded5;
  --well:#fbfaf7; --accent:#b85c2c; --accent-ink:#ffffff; --on-bg:#fbeee6; --on-line:#b85c2c;
  --focus:#2d5a8a; --ok:#2f6f4f; --ok-bg:#e7f2ec; --warn:#7a5a12; --warn-bg:#f6efdc;
  --bad:#9a3b2e; --bad-bg:#f7e9e6; --toast:#2d5a8a; --toast-bg:#e6eef7; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:0 0 env(safe-area-inset-bottom); -webkit-text-size-adjust:100%}
main{padding:16px; max-width:760px; margin:0 auto}
a{color:var(--focus)}

.top{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:5}
.brand{text-decoration:none; color:var(--ink); font-weight:700; font-size:16px; letter-spacing:-.01em; display:flex; gap:8px; align-items:baseline; min-width:0}
.brand .cf{color:var(--accent)}
.brand .dot{color:var(--muted); font-weight:400}
.brand .cust{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topnav{display:flex; gap:6px; flex:0 0 auto}
.navlink{color:var(--muted); text-decoration:none; font-size:14px; padding:8px 10px; border-radius:8px}
.navlink:hover{background:var(--well)}

.h1{font-size:24px; line-height:1.2; margin:14px 0 8px; letter-spacing:-.01em}
.h2{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:26px 0 10px; font-weight:700}
.h3{font-size:15px; margin:18px 0 6px}
.lede{color:var(--muted); margin:0 0 10px; font-size:16px}
.sticky-title{display:none}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 16px;
  border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; font-family:inherit}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.big{width:100%; min-height:54px; font-size:16px}
.btn.small{min-height:38px; font-size:14px; padding:0 12px}
.actions{display:flex; gap:10px; margin:18px 0 8px}
.actions .btn{flex:1}
.exports{display:flex; gap:10px; margin:12px 0}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin:12px 0}
.card.focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--on-bg)}
.login{max-width:440px; margin:24px auto}
.qtext{margin:0 0 6px; font-size:17px; line-height:1.45}
.who{color:var(--muted); font-size:13.5px; margin:0 0 10px}
.badge{display:inline-block; font-size:12px; font-weight:700; color:var(--warn); background:var(--warn-bg);
  padding:3px 9px; border-radius:999px; margin:0 0 8px; letter-spacing:.01em}

/* Fields: the label is read, the control is tapped (MOBILE_CAPTURE_FORM_PATTERN 2). */
.field{margin:12px 0 4px}
.flabel{display:block; font-size:15px; color:var(--ink); margin-bottom:6px; font-weight:600}
input,select,textarea{display:block; width:100%; padding:11px 12px; min-height:46px; border-radius:10px;
  border:1px solid var(--line); background:var(--well); color:var(--ink); font-size:16px; font-family:inherit}
input:focus,select:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus)}
.num{max-width:160px}
.money{display:flex; align-items:center; gap:6px}
.money .cur{color:var(--muted); font-weight:600}
.range{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.range input{width:auto; flex:1 1 140px}
.range .to{color:var(--muted)}
label.stack{display:block; font-size:15px; margin:8px 0}
label.stack input{margin-top:5px}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px}
.hint{font-size:13px; color:var(--muted); margin:6px 0 0; line-height:1.45}
.err{font-size:13px; color:var(--bad); margin:6px 0 0}

/* Choices: large tap buttons, blank until chosen, never pre-selected. */
.choices{display:flex; flex-wrap:wrap; gap:8px}
.choices input{position:absolute; opacity:0; width:0; height:0}
.choices label{flex:1 1 auto; min-width:44%; text-align:center; font-size:15px; color:var(--ink); padding:11px 12px;
  min-height:46px; line-height:22px; border:1px solid var(--line); border-radius:10px; background:var(--well); cursor:pointer; user-select:none}
.choices input:checked + label{background:var(--on-bg); border-color:var(--on-line); color:var(--ink); font-weight:600}
.choices input:focus-visible + label{outline:2px solid var(--focus); outline-offset:2px}
@media (min-width:520px){ .choices label{min-width:0; flex:0 1 auto} }

/* Three-state yes/no, blank first. */
.seg{display:flex; gap:6px}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg label{flex:1; margin:0; text-align:center; font-size:15px; color:var(--muted); padding:11px 4px; min-height:44px;
  line-height:22px; border:1px solid var(--line); border-radius:10px; background:var(--well); cursor:pointer; user-select:none}
.seg input:checked + label{background:var(--on-bg); border-color:var(--on-line); color:var(--ink); font-weight:600}
.seg input:focus-visible + label{outline:2px solid var(--focus); outline-offset:2px}
.seg{max-width:300px}

/* Tables: a card per row on a phone, a grid on a wide screen. */
.rows{display:flex; flex-direction:column; gap:8px}
.rowcard{border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface); display:grid; gap:6px}
.cell{display:grid; gap:3px}
.clabel{font-size:12.5px; color:var(--muted)}
.cfixed{font-weight:600; padding:6px 0}
.cell input, .cell select{min-height:40px; padding:8px 10px; font-size:15px}
.cell .seg{max-width:240px}
.cell.toast .clabel::after{content:" · from Toast"; color:var(--toast)}
.was{display:block; font-size:12px; color:var(--warn)}
.toastbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 4px}
.fromtoast{font-size:12px; font-weight:700; color:var(--toast); background:var(--toast-bg); padding:3px 9px; border-radius:999px}
.confirmed{font-size:13px; color:var(--ok); font-weight:600}
.changed{font-size:13px; color:var(--warn); font-weight:600}
.addrow{font-size:14px; align-self:flex-start; padding:6px 0}
@media (min-width:640px){
  .rowcard{grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); align-items:end}
  .rows[data-fixed] .rowcard{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
}

.qfoot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap}
.savestate{font-size:13px; color:var(--ok); min-height:18px}
.savestate.bad{color:var(--bad); cursor:pointer}
.quiet{display:flex; gap:14px; font-size:14px}
.quiet a{color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--muted); padding:6px 0}
.askbox,.notebox{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}

.note{border-radius:10px; padding:11px 13px; margin:12px 0; font-size:14px; line-height:1.5}
.note.ok{background:var(--ok-bg); color:var(--ok); border:1px solid #c5e0d1}
.note.warn{background:var(--warn-bg); color:var(--warn); border:1px solid #e9d9a8}

/* Welcome lists. */
.needed,.sections,.qlist,.newlist{list-style:none; margin:0; padding:0}
.needed li,.sections li,.qlist li,.newlist li{margin:8px 0}
.needed a,.sections a,.qlist a,.newlist a{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; min-height:54px; flex-wrap:wrap}
.needed .badge{margin:0; flex:0 0 auto}
.ntext{flex:1 1 200px; font-size:15px}
.stitle{flex:1 1 200px; font-size:16px; font-weight:600}
.meta{font-size:12.5px; color:var(--muted)}
.status{margin-left:auto; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.status.s-done{color:var(--ok); border-color:#c5e0d1; background:var(--ok-bg)}
.status.s-in-progress{color:var(--warn); border-color:#e9d9a8; background:var(--warn-bg)}
.status.s-not-sure,.status.s-ask-someone-else{color:var(--toast); border-color:#c6d6ea; background:var(--toast-bg)}
.newlist a{display:block}
.row1{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.row2{margin-top:3px; font-size:13px; color:var(--muted)}
.empty{color:var(--muted); font-size:14px}

/* The comparison page. */
.pagecard{padding:10px 12px}
.pagehead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; font-size:14px; color:var(--muted)}
.pageframe{width:100%; height:70vh; border:1px solid var(--line); border-radius:8px; background:var(--surface)}

/* Staff history. */
.version .vvalue{margin:8px 0; font-size:15px}
.vrow{padding:4px 0; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; gap:4px 14px}
.vrow:first-child{border-top:0}
.vrow i,.vvalue i{color:var(--muted); font-style:normal; font-size:12.5px}
.shown summary{font-size:13px; color:var(--muted); cursor:pointer}
.shown p{font-size:14px; color:var(--muted)}

.foot{text-align:center; color:var(--muted); font-size:12px; padding:22px 16px 28px}
.foot a{color:var(--muted)}
.crumb{display:none}

/* Section navigation (operator, 7 Oct). One list, two shapes: a scrolling tab
   strip under the header on a phone, a sticky sidebar beside the page on a
   computer. Each item carries the section number, its name and a status dot. */
.secnav{display:flex; gap:6px; overflow-x:auto; padding:8px 16px; background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:53px; z-index:4; scrollbar-width:none}
.secnav::-webkit-scrollbar{display:none}
.navitem{display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; text-decoration:none; color:var(--muted);
  font-size:14px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:var(--well); white-space:nowrap}
.navitem.current{color:var(--ink); background:var(--on-bg); border-color:var(--on-line); font-weight:600}
.navnum{font-weight:700; font-size:12.5px; color:var(--accent)}
.navitem.current .navnum{color:var(--accent)}
.navdot{width:8px; height:8px; border-radius:50%; background:var(--line); flex:0 0 auto}
.navdot.s-done{background:var(--ok)}
.navdot.s-in-progress{background:var(--warn)}
.navdot.s-to-read{background:var(--toast)}
@media (min-width:900px){
  .layout.with-nav{display:flex; align-items:flex-start; max-width:1080px; margin:0 auto; gap:8px}
  .secnav{flex:0 0 250px; flex-direction:column; overflow:visible; position:sticky; top:69px;
    margin:16px 0 0 16px; padding:8px; border:1px solid var(--line); border-radius:var(--radius); gap:2px}
  .navitem{border:0; background:transparent; border-radius:10px; padding:10px 12px; white-space:normal; width:100%}
  .navitem:hover{background:var(--well)}
  .navitem.current{background:var(--on-bg)}
  .navlabel{flex:1 1 auto}
  .layout main{flex:1 1 auto; min-width:0}
}

/* The "changes" badge (MC4-B): names the customer's own form or tool the answer
   changes. Never a date, so it is not the dated colour. */
.badge.changes{color:var(--toast); background:var(--toast-bg); margin-left:6px}