:root{
  --ink:#151515;
  --muted:#5a5a5a;
  --line:#b8b8b8;
  --soft:#eeeeee;
  --head:#111111;
  --headText:#ffffff;
  --input:#fbfbfb;
  --paper:#ffffff;
  --page:#d8d8d8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  overflow:hidden;
}

.app-shell{
  width:100vw;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}

.paper{
  width:min(1120px,100%);
  height:min(760px,calc(100dvh - 20px));
  background:var(--paper);
  box-shadow:0 2px 18px rgba(0,0,0,.18);
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.topline{
  font-size:9px;
  letter-spacing:.08em;
  color:#555;
  text-align:center;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand{
  font-size:11px;
  font-weight:800;
  letter-spacing:.045em;
  border-bottom:2px solid #111;
  padding-bottom:5px;
}

.title-row{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin:7px 0 6px;
}

.title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.035em;
  line-height:1;
}

.subtitle{
  font-size:11px;
  margin-top:2px;
}

.status-pill{
  min-width:110px;
  text-align:center;
  font-size:10px;
  font-weight:800;
  color:#444;
  background:#f3f3f3;
  border:1px solid #d0d0d0;
  padding:5px 7px;
  white-space:nowrap;
}
.status-pill.saving{color:#725a00;background:#fff6d9;border-color:#e7d284}
.status-pill.saved{color:#156326;background:#eaf7ee;border-color:#b7d8c1}
.status-pill.error{color:#9b1c1c;background:#fff0f0;border-color:#e4b5b5}

.report-app{
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  gap:7px;
  flex:1;
}

.meta-grid,.submit-strip{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  align-items:end;
  border:1px solid var(--line);
  padding:6px 7px;
}

.meta-grid label,.submit-strip label{
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.025em;
}

.meta-grid input,.submit-strip input{
  display:block;
  width:100%;
  height:24px;
  border:0;
  border-bottom:1px solid #111;
  background:var(--input);
  padding:2px 5px;
  font-size:12px;
  font-family:Arial,Helvetica,sans-serif;
}

.section-tabs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}

.section-tab{
  border:1px solid #111;
  background:#f2f2f2;
  color:#111;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:7px 4px;
  cursor:pointer;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.section-tab.active{
  background:#111;
  color:#fff;
}

.sections-stage{
  min-height:0;
  overflow:hidden;
  border:1px solid var(--line);
}

.report-section{
  display:none;
  height:100%;
  min-height:0;
}
.report-section.active{display:grid;grid-template-rows:auto minmax(0,1fr)}

.section-header{
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  padding:5px 7px;
}

.grid{
  display:grid;
  grid-template-columns:minmax(130px,.64fr) 104px minmax(260px,1.7fr);
  overflow:auto;
}

.grid.header{
  background:#efefef;
  font-weight:900;
  font-size:10px;
  overflow:hidden;
}

.grid>div{
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:3px 5px;
  font-size:10.5px;
  min-height:25px;
  line-height:1.15;
}
.grid>div:last-child{border-right:0}

.field input,.field select,.field textarea{
  width:100%;
  border:1px solid #d0d0d0;
  background:#fff;
  padding:3px 5px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
}
.field input,.field select{height:22px}
.field textarea{height:22px;min-height:22px;resize:none;line-height:1.15}

.issues-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:auto;
}
.issues-grid label{
  font-size:10.5px;
  font-weight:900;
  padding:5px 6px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
}
.issues-grid label:nth-child(even){border-right:0}
.issues-grid textarea,.issues-grid select{
  display:block;
  width:100%;
  margin-top:4px;
  border:1px solid #d0d0d0;
  padding:4px 5px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
}
.issues-grid textarea{height:70px;resize:none}

.submit-strip{
  grid-template-columns:1fr 1fr auto;
}
.submit-strip button{
  height:34px;
  border:0;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:0 14px;
  cursor:pointer;
  white-space:nowrap;
}
.submit-strip button:disabled{opacity:.55;cursor:not-allowed}
.email-status{
  min-height:15px;
  font-size:11px;
  color:#333;
  text-align:right;
}
.email-status.error{color:#a40000;font-weight:800}
.email-status.success{color:#126b2f;font-weight:800}

@media (min-width:900px) and (max-height:720px){
  .paper{height:calc(100dvh - 10px);padding:10px 14px}
  .title{font-size:16px}
  .brand{font-size:10px;padding-bottom:4px}
  .report-app{gap:5px}
  .meta-grid,.submit-strip{padding:5px 6px}
  .section-tab{padding:5px 4px;font-size:9px}
  .section-header{padding:4px 7px}
  .grid>div{min-height:22px;font-size:10px;padding:2px 4px}
  .field input,.field select,.field textarea{height:20px;font-size:10px;padding:2px 4px}
}

@media(max-width:760px){
  .app-shell{padding:0;align-items:stretch}
  .paper{
    width:100%;
    height:100dvh;
    max-height:none;
    padding:8px;
    box-shadow:none;
  }
  .topline{font-size:8px;margin-bottom:3px}
  .brand{font-size:9.5px;padding-bottom:4px}
  .title-row{margin:5px 0;align-items:center}
  .title{font-size:15px}
  .subtitle{font-size:10px}
  .status-pill{min-width:72px;font-size:9px;padding:4px 5px}
  .report-app{gap:5px}
  .meta-grid{grid-template-columns:1fr 72px 90px;gap:5px;padding:5px}
  .meta-grid label,.submit-strip label{font-size:9px}
  .meta-grid input,.submit-strip input{height:23px;font-size:11px;padding:2px 4px}
  .section-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .section-tab{font-size:8.5px;padding:6px 2px;letter-spacing:0}
  .section-header{font-size:10px;padding:5px 6px}
  .grid{grid-template-columns:minmax(115px,.72fr) 86px minmax(135px,1fr)}
  .grid>div{font-size:9.5px;min-height:24px;padding:3px 4px}
  .field input,.field select,.field textarea{height:21px;font-size:10px;padding:2px 3px}
  .issues-grid{grid-template-columns:1fr}
  .issues-grid label{border-right:0;font-size:10px;padding:4px 5px}
  .issues-grid textarea{height:54px}
  .submit-strip{grid-template-columns:1fr 82px;gap:5px;padding:5px}
  .submit-strip button{grid-column:1/-1;height:32px;font-size:10px}
  .email-status{text-align:center;font-size:10px}
}

@media(max-width:420px){
  .grid{grid-template-columns:minmax(104px,.68fr) 70px minmax(108px,1fr)}
  .grid>div{font-size:8.8px;padding:2px 3px}
  .section-tab{font-size:7.8px}
}

body.pdf-mode{overflow:auto;background:#fff}
body.pdf-mode .app-shell{height:auto;display:block;padding:0;background:#fff}
body.pdf-mode .paper{width:210mm;height:auto;min-height:297mm;box-shadow:none;padding:10mm;margin:0 auto;overflow:visible}
body.pdf-mode .report-app{display:block}
body.pdf-mode .section-tabs{display:none}
body.pdf-mode .sections-stage{border:0;overflow:visible}
body.pdf-mode .report-section{display:block;height:auto;margin:5px 0;border:1px solid var(--line)}
body.pdf-mode .grid{overflow:visible}
body.pdf-mode .submit-strip{margin-top:6px}
body.pdf-mode .email-status{display:none}
body.pdf-mode .status-pill{display:none}
body.pdf-mode .submit-strip button{display:none}

@media print{
  body{background:#fff;overflow:visible}
  .app-shell{height:auto;display:block;padding:0}
  .paper{box-shadow:none;width:210mm;min-height:297mm;height:auto;padding:10mm;overflow:visible}
  .section-tabs{display:none}
  .sections-stage{border:0;overflow:visible}
  .report-section{display:block;height:auto;margin:5px 0;border:1px solid var(--line)}
  .status-pill,.submit-strip button,.email-status{display:none}
}