*{box-sizing:border-box}
body{margin:0;background:#272b2a;color:#242821;font:16px/1.45 system-ui,sans-serif}
main{max-width:820px;margin:auto;padding:14px}
header{color:#f7f5ed;background:#181e1b;padding:16px;border-bottom:3px solid #f4c342;border-radius:7px}
header span,footer{font-size:13px}
h1,h2,h3,p{margin:0 0 .55rem}
h1{font-size:1.55rem}h2{font-size:1.15rem}h3{font-size:1rem}
section{margin:12px 0;padding:14px;background:#f6f3e9;border-radius:7px}
#status{padding:.65rem;color:#fff8e8}
#offline-ready{color:#fff8e8;padding:0 .65rem;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
label{display:grid;gap:3px;min-width:0}
input,select,textarea{font:inherit;width:100%;color:inherit;border:1px solid #969b8c;border-radius:4px;background:white;padding:8px}
textarea{min-height:62px;resize:vertical}
.pills,.actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pills label{display:flex;align-items:center;gap:6px;border:1px solid #b0b3a5;border-radius:5px;padding:8px 12px;min-height:44px}
input[type=checkbox]{width:auto}
button{font:inherit;border:1px solid #866b25;border-radius:5px;background:#f4c342;color:#1e231d;min-height:44px;padding:.35rem .65rem}
button.secondary{background:#fffefa;border-color:#9a9d8e}
.field-section,.crack-row,#attachments,#cracks,#patches,.patch-row{margin-top:12px;padding-top:10px;border-top:1px solid #c5c7b9}
#photo-list p{overflow-wrap:anywhere;margin-top:8px}
footer{color:#f7f5ed;padding:10px 0}
[hidden]{display:none!important}
@page{
 margin:15mm 12mm 18mm;
 @bottom-left{content:"Tillinghast Hub Job Cards";font-size:8pt}
 @bottom-center{content:"Version 7 — Revised 2026-11-12";font-size:8pt}
 @bottom-right{content:"Page " counter(page) " of " counter(pages);font-size:8pt}
}
@media print{
 body,header,section{background:#fff;color:#111}
 body{font-size:10pt}
 main,section,header{padding:0}
 header{border-bottom:1px solid #333}
 h1{font-size:16pt}
 #status,#offline-ready,#connection,#finish,#paper,#add-crack,#add-patch,#attachments input,button,footer{display:none!important}
 .grid{grid-template-columns:1fr 1fr}
 input,textarea,select{border:1px solid #777;min-height:22pt}
 textarea{min-height:40pt}
 .field-section,.crack-lead,.crack-row,.patch-lead,.patch-row,label{break-inside:avoid}
 #cracks:has(#first-crack-group:empty),#patches:has(#first-patch-row:empty){display:none}
}

/* Prominent operational status; text carries meaning in addition to color. */
#status,#microsoft-status,#receipt{display:block;padding:14px 16px;margin:12px 0;border:2px solid #bd901d;border-left-width:7px;border-radius:7px;background:#fff0bd;color:#493600;font-size:18px;font-weight:750;line-height:1.5;overflow-wrap:anywhere}
#status:empty,#microsoft-status:empty,#receipt:empty{display:none}
[data-kind="success"]#status,[data-kind="success"]#microsoft-status,[data-kind="success"]#receipt{background:#e7f4e6;color:#174824;border-color:#307642}
[data-kind="error"]#status,[data-kind="error"]#microsoft-status,[data-kind="error"]#receipt{background:#fff0ec;color:#7d241b;border-color:#aa3829}
@media(max-width:600px){main{padding:12px}#status,#microsoft-status,#receipt{font-size:18px}button{font-weight:700}section{padding:16px}}