/* ============================================================
   Beacon Solar — precision-instrument UI
   Display: Space Grotesk · Body: Inter · Data: JetBrains Mono
   ============================================================ */

:root{
  --ink:#12181f;          /* rail / darkest slate */
  --ink-2:#1b232c;        /* raised dark panels    */
  --line-dark:#2b3641;    /* borders on dark       */

  --stage:#eef1f5;        /* app background (cool)  */
  --paper:#ffffff;        /* cards                  */
  --line:#e3e8ee;         /* hairline on light      */
  --line-2:#d3dae2;

  --text:#19212a;         /* primary text           */
  --muted:#64717f;        /* secondary text         */
  --faint:#8a95a1;

  --solar:#f2a100;        /* primary — solar amber  */
  --solar-d:#d98f00;
  --solar-ink:#1c1400;    /* text on amber          */
  --solar-soft:#fdf1d6;

  --volt:#0ea5a5;         /* technical / data teal  */
  --volt-d:#0b8080;
  --volt-soft:#d9f2f1;

  --danger:#e5484d;
  --danger-soft:#fbe4e4;
  --ok:#2e9e5b;
  --ok-soft:#dcf1e4;

  --r:12px; --r-sm:9px; --r-xs:6px;
  --sh-1:0 1px 2px rgba(16,24,32,.06);
  --sh-2:0 10px 30px -16px rgba(16,24,32,.28);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text); background:var(--stage);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--volt-d); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; font-weight:600; margin:0}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* brand -------------------------------------------------- */
.brand-mark{color:var(--solar)}
.brand-name em,.auth-brand em,.brand em,.rep-brand em{font-style:normal; color:var(--solar)}

/* buttons ------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:"Inter",sans-serif; font-weight:600; font-size:14px;
  padding:10px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  transition:transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s;
  white-space:nowrap; line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn-solar{background:var(--solar); color:var(--solar-ink); box-shadow:var(--sh-1)}
.btn-solar:hover{background:var(--solar-d); text-decoration:none}
.btn-ghost{background:var(--paper); color:var(--text); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--faint); text-decoration:none; background:#fafbfc}
.btn-sm{padding:7px 12px; font-size:13px}

/* ============================================================
   STAFF SHELL
   ============================================================ */
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.rail{
  background:var(--ink); color:#cdd6df; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:20px 14px; gap:22px;
  border-right:1px solid var(--line-dark);
}
.brand{display:flex; align-items:center; gap:9px; font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-size:19px; color:#fff; padding:4px 6px}
.brand-mark{font-size:20px}
.nav{display:flex; flex-direction:column; gap:3px}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm);
  color:#aab6c2; font-weight:500; font-size:14.5px;
}
.nav-item:hover{background:#212b35; color:#eaf0f5; text-decoration:none}
.nav-item.is-active{background:#222c37; color:#fff; box-shadow:inset 3px 0 0 var(--solar)}
.ni-ico{width:18px; text-align:center; opacity:.9; font-size:15px}
.rail-foot{margin-top:auto; border-top:1px solid var(--line-dark); padding-top:14px;
  display:flex; flex-direction:column; gap:8px}
.who-name{font-weight:600; color:#eaf0f5; font-size:14px}
.who-role{font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em}
.logout{color:#9fb0bd; font-size:13px}
.logout:hover{color:var(--solar); text-decoration:none}

.stage{padding:34px 40px 60px; max-width:1160px; width:100%}
.stage-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px}
.stage-title{font-size:26px; letter-spacing:-.01em; display:flex; align-items:center; gap:12px}
.stage-sub{color:var(--muted); margin:6px 0 0; font-size:14.5px}
.head-actions{display:flex; gap:10px; flex-shrink:0}
.crumb{font-size:13px; color:var(--muted); margin-bottom:8px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--text)}

/* stat line ---------------------------------------------- */
.statline{display:flex; gap:14px; margin-bottom:22px; flex-wrap:wrap}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 20px; min-width:150px; box-shadow:var(--sh-1)}
.stat-n{display:block; font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.02em}
.stat-l{color:var(--muted); font-size:13px}

/* search ------------------------------------------------- */
.searchbar{display:flex; gap:10px; margin-bottom:16px}
.searchbar input{flex:1; padding:11px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-size:14.5px; background:var(--paper)}
.searchbar input:focus{outline:none; border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-soft)}

/* table -------------------------------------------------- */
.table-wrap{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1)}
table.grid{width:100%; border-collapse:collapse; font-size:14px}
table.grid th{
  text-align:left; padding:13px 16px; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--faint); font-weight:600; border-bottom:1px solid var(--line);
  background:#f7f9fb;
}
table.grid td{padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
table.grid tbody tr{cursor:pointer; transition:background .12s}
table.grid tbody tr:hover{background:#f6f9fb}
table.grid tr:last-child td{border-bottom:none}
.grid .num{text-align:right}
.grid .cust{font-weight:600}
.grid .cust-sub{font-size:12.5px; color:var(--muted)}
.grid .go{color:var(--faint); text-align:right; width:30px}
.grid tbody tr:hover .go{color:var(--solar)}
.empty{text-align:center; color:var(--muted); padding:38px 16px !important}

/* segment + status chips --------------------------------- */
.seg{font-family:var(--mono); font-size:10.5px; font-weight:600; padding:3px 7px; border-radius:5px;
  letter-spacing:.04em; vertical-align:middle}
.seg-b2c{background:var(--volt-soft); color:var(--volt-d)}
.seg-b2b{background:var(--solar-soft); color:var(--solar-d)}
.chip{display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px}
.chip-new{background:#e7edf3; color:#5b6b7a}
.chip-sized{background:var(--volt-soft); color:var(--volt-d)}
.chip-designed{background:var(--solar-soft); color:var(--solar-d)}
.chip-reported{background:var(--ok-soft); color:var(--ok)}

/* ============================================================
   PROJECT VIEW
   ============================================================ */
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
.kpi{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh-1)}
.kpi-lead{box-shadow:inset 3px 0 0 var(--solar), var(--sh-1)}
.kpi-l{color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.kpi-v{font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-.03em; margin:8px 0 4px; line-height:1}
.kpi-v small{font-size:15px; color:var(--muted); font-weight:500; margin-left:4px; letter-spacing:0}
.kpi-x{color:var(--faint); font-size:12.5px}

.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; box-shadow:var(--sh-1)}
.card-h{font-size:16px; margin-bottom:6px}
.card-h-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.card-h-row .card-h{margin-bottom:0}
.card-note{color:var(--muted); font-size:14px; margin:0 0 16px; line-height:1.55}
.link-solar{color:var(--solar-d); font-weight:600; font-size:14px}
.link-solar:hover{color:var(--solar); text-decoration:none}
.link-quiet{color:var(--muted); font-size:14px}

/* reconciliation ceilings (signature element) ------------ */
.ceil-list{display:flex; flex-direction:column; gap:14px}
.ceil-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.ceil-lbl{font-size:13.5px; color:var(--text); font-weight:500}
.ceil-lbl em{font-style:normal; color:var(--solar-d); font-weight:600}
.ceil-kw{font-size:13.5px; color:var(--muted)}
.ceil-bar{height:9px; background:#eef2f6; border-radius:999px; overflow:hidden}
.ceil-bar span{display:block; height:100%; background:var(--volt); border-radius:999px;
  transition:width .5s cubic-bezier(.2,.7,.2,1)}
.ceil.is-bind .ceil-bar span{background:var(--solar)}
.ceil.is-bind .ceil-lbl{font-weight:600}
.ceil.is-bind .ceil-kw{color:var(--solar-d); font-weight:600}
.ceil-result{border-top:1px dashed var(--line-2); padding-top:12px; margin-top:2px}
.ceil-result .ceil-lbl{font-weight:600}
.ceil-result .ceil-kw{color:var(--text); font-weight:700; font-size:15px}

/* spec list ---------------------------------------------- */
.spec{margin:0; display:flex; flex-direction:column}
.spec > div{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line)}
.spec > div:last-child{border-bottom:none}
.spec dt{color:var(--muted); font-size:13.5px; margin:0}
.spec dd{margin:0; font-size:13.5px; text-align:right}
.warn-inline{color:var(--danger); font-weight:600}

/* ============================================================
   WIZARD
   ============================================================ */
.wiz-body{background:var(--stage)}
.wiz{max-width:760px; margin:0 auto; padding:26px 22px 70px}
.wiz-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px}
.wiz-top .brand{color:var(--text); font-size:19px; padding:0}
.wiz-top .brand em{color:var(--solar)}

/* stepper */
.stepper{list-style:none; display:flex; gap:6px; padding:0; margin:0 0 26px; counter-reset:s}
.stepper li{
  flex:1; font-size:12px; color:var(--faint); padding-top:26px; position:relative;
  text-align:center; font-weight:500; letter-spacing:.01em;
}
.stepper li::before{
  counter-increment:s; content:counter(s);
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:999px; background:var(--paper);
  border:1.5px solid var(--line-2); color:var(--faint);
  font-family:var(--mono); font-size:12px; font-weight:600;
  display:grid; place-items:center;
}
.stepper li::after{content:""; position:absolute; top:13px; left:-50%; width:100%; height:1.5px; background:var(--line-2); z-index:-1}
.stepper li:first-child::after{display:none}
.stepper li.is-current{color:var(--text)}
.stepper li.is-current::before{border-color:var(--solar); color:var(--solar-ink); background:var(--solar)}
.stepper li.is-done{color:var(--muted)}
.stepper li.is-done::before{border-color:var(--volt); background:var(--volt); color:#fff; content:"✓"}
.stepper li.is-done::after{background:var(--volt)}

/* steps */
.wiz-form{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-2)}
.step{display:none; padding:30px 32px}
.step.is-active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.step-h{font-size:21px; letter-spacing:-.01em}
.step-sub{color:var(--muted); margin:6px 0 22px; font-size:14.5px}

/* segment picker */
.pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px}
.pick{position:relative; border:1.5px solid var(--line-2); border-radius:var(--r); padding:18px 18px 18px 46px;
  cursor:pointer; transition:border-color .15s, background .15s; display:block}
.pick input{position:absolute; left:16px; top:20px; accent-color:var(--solar); width:16px; height:16px}
.pick:hover{border-color:var(--faint)}
.pick:has(input:checked){border-color:var(--solar); background:var(--solar-soft)}
.pick-title{display:block; font-weight:600; font-size:15.5px; font-family:"Space Grotesk",sans-serif}
.pick-note{display:block; color:var(--muted); font-size:13px; margin-top:4px; line-height:1.45}

/* field grid */
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px}
.fld{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--text)}
.fld-wide{grid-column:1 / -1}
.fld input,.fld select,.side-input input,.side-input select{
  font-family:"Inter",sans-serif; font-weight:400; font-size:14.5px;
  padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--paper); color:var(--text); width:100%;
}
.fld input:focus,.fld select:focus{outline:none; border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-soft)}
.chk{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--text)}
.chk input{accent-color:var(--solar); width:16px; height:16px}

.step-nav{display:flex; justify-content:space-between; gap:12px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line)}

/* live sizing preview */
.sizing-preview{margin-top:24px; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:#fbfcfd}
.sp-hint{padding:22px; color:var(--muted); font-size:14px; text-align:center}
.sp-head{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; background:var(--ink); color:#fff; flex-wrap:wrap}
.sp-size{display:flex; align-items:baseline; gap:8px}
.sp-size .mono{font-size:32px; font-weight:600; letter-spacing:-.03em; color:var(--solar)}
.sp-size small{color:#aab6c2; font-size:13px}
.sp-side{display:flex; gap:20px; flex-wrap:wrap}
.sp-side > div{font-size:12.5px; color:#aab6c2}
.sp-side .mono{color:#fff; font-size:16px; font-weight:600; display:block}
.sp-note{padding:14px 22px; color:var(--muted); font-size:13.5px; border-bottom:1px solid var(--line); line-height:1.5}
.sp-ceils{padding:18px 22px; display:flex; flex-direction:column; gap:13px}
.sp-ceil .sp-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; color:var(--text)}
.sp-bar{height:8px; background:#eef2f6; border-radius:999px; overflow:hidden}
.sp-bar span{display:block; height:100%; background:var(--volt); border-radius:999px; transition:width .4s ease}
.sp-ceil.is-bind .sp-bar span{background:var(--solar)}
.sp-ceil.is-bind .sp-top{color:var(--solar-d); font-weight:600}

/* ============================================================
   AUTH + THANK YOU
   ============================================================ */
.auth-body{background:radial-gradient(120% 120% at 50% -10%, #1c2732 0%, var(--ink) 60%);
  min-height:100vh; display:grid; place-items:center; padding:24px}
.auth-card{background:var(--paper); border-radius:16px; padding:38px 36px; width:100%; max-width:400px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.auth-brand{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:23px; display:flex;
  align-items:center; gap:9px; color:var(--text)}
.auth-tag{color:var(--muted); font-size:14px; margin:6px 0 24px}
.auth-error{background:var(--danger-soft); color:#b3373b; font-size:13.5px; padding:11px 14px;
  border-radius:var(--r-sm); margin-bottom:18px}
.auth-form{display:flex; flex-direction:column; gap:16px}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600}
.auth-form input{padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:15px}
.auth-form input:focus{outline:none; border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-soft)}
.auth-form .btn{margin-top:6px; justify-content:center}
.thanks{max-width:460px; text-align:center}
.thanks .auth-brand{justify-content:center}
.thanks-h{font-size:24px; margin:20px 0 12px}
.thanks-sub{color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:14px}
.ref-chip{font-family:var(--mono); background:var(--ink); color:var(--solar); padding:3px 9px;
  border-radius:6px; font-size:14px; font-weight:600}

/* ============================================================
   ROOF DESIGNER
   ============================================================ */
.designer{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1)}
.toolbar{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line);
  background:#f7f9fb; flex-wrap:wrap}
.tool-sep{width:1px; height:22px; background:var(--line-2); margin:0 2px}
.tool-upload{position:relative; overflow:hidden}
.tool{font-family:"Inter",sans-serif; font-weight:600; font-size:13px; padding:8px 13px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--text); border-radius:var(--r-sm);
  cursor:pointer; transition:all .12s}
.tool:hover{border-color:var(--faint); background:#fff}
.tool.is-on{border-color:var(--solar); background:var(--solar-soft); color:var(--solar-d); box-shadow:0 0 0 2px var(--solar-soft)}
.tool-go{border-color:var(--solar); color:var(--solar-d)}
.tool-go:hover{background:var(--solar); color:var(--solar-ink)}
.tool-sat{border-color:var(--volt); color:var(--volt-d)}
.tool-sat:hover{background:var(--volt); color:#fff}
.tool-sat:disabled{opacity:.5; cursor:not-allowed}
.tool-danger{color:var(--danger); border-color:transparent}
.tool-danger:hover{background:var(--danger-soft); border-color:var(--danger-soft)}

.designer-body{display:grid; grid-template-columns:1fr 288px}
.canvas-wrap{position:relative; background:#0e141b; min-height:500px; display:grid; place-items:center}
#roof{width:100%; height:auto; display:block; touch-action:none}
.canvas-empty{position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  color:#8fa1b1; padding:30px; pointer-events:none}
.canvas-empty b{color:#dbe4ec}
.ce-sub{font-size:13px; color:#6f8090; margin-top:8px; max-width:320px}
.mode-hint{position:absolute; left:14px; bottom:14px; right:14px; background:rgba(18,24,31,.9);
  color:#e7eef4; font-size:12.5px; padding:9px 13px; border-radius:8px; display:none;
  border:1px solid var(--line-dark); backdrop-filter:blur(4px)}

.side{border-left:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:14px;
  background:#fbfcfd; overflow-y:auto}
.side-block{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px}
.side-h{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:13px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-bottom:10px}
.side-row{display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--text)}
.side-row span:first-child{color:var(--muted)}
.side-tip{font-size:12px; color:var(--faint); line-height:1.5; margin:8px 0 0}
.side-input{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600;
  color:var(--text); margin-bottom:10px}
.side-input:last-child{margin-bottom:0}
.side-stats .stat-big{display:flex; align-items:baseline; gap:8px; margin-bottom:10px;
  padding-bottom:10px; border-bottom:1px solid var(--line)}
.stat-big .mono{font-size:30px; font-weight:600; letter-spacing:-.03em; color:var(--volt-d)}
.stat-big span:last-child{color:var(--muted); font-size:12.5px}
.fill-msg{margin-top:10px; font-size:12.5px; line-height:1.45}
.fill-msg .ok{color:var(--ok); font-weight:600}
.fill-msg .warn{color:var(--danger); font-weight:600}
.ai-hook{background:linear-gradient(180deg,#fbfcfd,#f4f7fa); border-style:dashed}
.ai-hook .btn{margin-top:10px; width:100%; justify-content:center; opacity:.7; cursor:not-allowed}

/* toast */
.toast{position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px); opacity:0;
  background:var(--ink); color:#fff; font-size:14px; font-weight:500; padding:12px 20px;
  border-radius:10px; box-shadow:var(--sh-2); transition:all .3s ease; z-index:100;
  border:1px solid var(--line-dark)}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ============================================================
   REPORT
   ============================================================ */
.report-body{background:var(--stage)}
.report{max-width:880px; margin:0 auto; padding:30px 30px 70px; background:var(--paper); min-height:100vh}
.rep-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:2px solid var(--ink)}
.rep-brand{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:20px; display:flex; align-items:center; gap:8px}
.rep-meta{text-align:right; font-size:13px; color:var(--muted)}
.rep-ref{font-weight:600; color:var(--text); font-size:14px}
.rep-title{padding:22px 0 6px}
.rep-title h1{font-size:26px; letter-spacing:-.01em}
.rep-title p{color:var(--muted); font-size:14px; margin:8px 0 0}

.rep-tabs{display:flex; gap:8px; align-items:center; margin:20px 0 26px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.rtab{font-family:"Inter",sans-serif; font-weight:600; font-size:13.5px; padding:8px 16px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--muted); border-radius:999px; cursor:pointer}
.rtab.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}
.rep-print{margin-left:auto}

.rep-view.is-hidden{display:none}
.rep-sec{font-size:19px; margin-bottom:18px; padding-left:12px; border-left:3px solid var(--solar)}
.rep-sub{font-size:15px; margin:26px 0 12px; color:var(--text)}
.rep-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px}
.rk{border:1px solid var(--line); border-radius:var(--r-sm); padding:15px 16px; background:#fbfcfd}
.rk-v{font-family:var(--mono); font-size:24px; font-weight:600; letter-spacing:-.02em}
.rk-v small{font-size:13px; color:var(--muted); font-weight:500}
.rk-l{color:var(--muted); font-size:12px; margin-top:4px; text-transform:uppercase; letter-spacing:.04em}

.rep-table{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:8px}
.rep-table td,.rep-table th{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left}
.rep-table th{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:600; background:#f7f9fb}
.rep-table td:first-child{color:var(--muted)}
.rep-table td.mono,.rep-table td.num{color:var(--text)}
.rep-table .num{text-align:right}
.rep-total td{border-top:2px solid var(--line-2); border-bottom:none; font-weight:700; color:var(--text)}
.rep-total td:first-child{color:var(--text)}
.rep-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.rep-fine{font-size:12px; color:var(--faint); line-height:1.55; margin-top:12px; border-top:1px dashed var(--line-2); padding-top:12px}
.rep-check{margin:0; padding-left:18px; color:var(--text); font-size:14px; line-height:1.7}
.rep-check li{margin-bottom:4px}
.rep-img{width:100%; border:1px solid var(--line); border-radius:var(--r-sm); margin-top:6px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 16px}
  .rail .nav{flex-direction:row}
  .rail-foot{margin:0 0 0 auto; border:none; padding:0; flex-direction:row; align-items:center; gap:14px}
  .stage{padding:22px 18px 50px}
  .kpi-row,.rep-kpis{grid-template-columns:1fr 1fr}
  .cols,.field-grid,.pick-grid,.rep-grid2{grid-template-columns:1fr}
  .designer-body{grid-template-columns:1fr}
  .side{border-left:none; border-top:1px solid var(--line)}
  .stage-head{flex-direction:column}
  .stepper li{font-size:0}           /* collapse labels, keep number dots */
  .stepper li::before{font-size:12px}
}

/* focus + motion ---------------------------------------- */
:focus-visible{outline:2px solid var(--volt); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* print -------------------------------------------------- */
@media print{
  body{background:#fff}
  .no-print{display:none !important}
  .report{max-width:none; margin:0; padding:0 8mm; box-shadow:none}
  .rep-view.is-hidden{display:block !important}     /* print all sections */
  .rep-view{page-break-inside:avoid; margin-bottom:26px}
  .rep-sec{page-break-after:avoid}
  .rep-table{page-break-inside:avoid}
}