/*
@CODE-LABEL v1
id: wic-web-styles
parent: wic-web
scope: module
name: Work order builder styles + printed work-instruction format
does: Minimal screen styling (request form, ordered work-instruction list, document preview) and the print format: letter pages, header repeated per page, numbered operations, OPERATOR/DATE/VERIFIED/DATE lines with stamp room, "Page x (of y)" footer.
for: Change the look of the page or the printed work-order layout.
stack: CSS3 (@page margin boxes need Chromium 131+; other browsers omit the page numbers)
reuse: Sign-line height (17mm) leaves room for a rubber stamp on the line.
tags: ui, css, print, work-order
updated: 2026-11-09
@END-LABEL
*/
* { box-sizing: border-box; }
body { margin: 0; background: #f3f4f6; color: #111; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

.bar { display: flex; align-items: baseline; gap: 14px; padding: 14px 24px; background: #fff; border-bottom: 1px solid #ddd; }
.bar h1 { font-size: 18px; margin: 0; }
.bar .note { font-size: 12px; color: #8a4b00; }
.bar .user { margin-left: auto; font-size: 13px; color: #555; }
.bar .user a { color: #1f5fbf; }
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 28px; width: min(360px, calc(100vw - 32px)); display: grid; gap: 14px; }
.login h1 { font-size: 18px; margin: 0 0 4px; }
.login label { display: grid; gap: 4px; font-size: 13px; color: #444; }
.login input { font: inherit; padding: 9px 10px; border: 1px solid #bbb; border-radius: 6px; }
.login button { background: #1f5fbf; color: #fff; border: 0; border-radius: 6px; padding: 10px; font-weight: 600; }
.login-err { margin: 0; padding: 8px 10px; border-radius: 6px; background: #fdecec; color: #9b1c1c; font-size: 13px; }

.ask { display: flex; gap: 12px; align-items: flex-end; padding: 16px 24px; background: #fff; border-bottom: 1px solid #ddd; flex-wrap: wrap; }
.ask label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.ask .grow { flex: 1; min-width: 260px; }
.ask select, .ask input { font: inherit; padding: 9px 10px; border: 1px solid #bbb; border-radius: 6px; background: #fff; }
.ask button, .doc-bar button { background: #1f5fbf; color: #fff; border: 0; border-radius: 6px; padding: 10px 18px; font-weight: 600; }
.ask button:disabled { opacity: 0.6; }

.message { padding: 0 24px; }
.message .q, .message .err { margin-top: 14px; padding: 12px 14px; border-radius: 6px; }
.message .q { background: #fff4e5; }
.message .err { background: #fdecec; color: #9b1c1c; }
.message .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.message .opts button { border: 1px solid #bbb; background: #fff; border-radius: 6px; padding: 6px 12px; }

.result { display: grid; grid-template-columns: 340px 1fr; gap: 20px; padding: 20px 24px; align-items: start; }
.found { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 14px 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.found h2 { font-size: 15px; margin: 0 0 6px; }
.found h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #555; margin: 14px 0 4px; }
.found ol { list-style: none; margin: 0; padding: 0; }
.found li { font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eee; }
.found .op { font-weight: 700; margin-right: 4px; }
.found .ref { display: block; font: 11px ui-monospace, Menlo, Consolas, monospace; color: #777; }
.doc-bar { margin-bottom: 10px; }

/* ---------------------------------------------------------------- the work order (screen preview + print) */
.wo { background: #fff; max-width: 8.5in; padding: 0.35in 0.45in; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  font: 10.5pt/1.35 Arial, "Liberation Sans", Helvetica, sans-serif; }
table.frame { width: 100%; border-collapse: collapse; }
table.frame > thead { display: table-header-group; }
table.frame td { padding: 0; vertical-align: top; }
.hd { border-bottom: 1.5px solid #333; padding-bottom: 6px; margin-bottom: 10px; }
.hd-title { text-align: center; font-weight: 700; font-size: 9pt; border-bottom: 1px solid #999; padding-bottom: 4px; margin-bottom: 6px; }
.hd-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0 18px; }
.f { display: grid; grid-template-columns: 30mm auto 1fr; align-items: center; gap: 6px; font-size: 7.5pt; min-height: 4.2mm; }
.f .k { font-weight: 600; color: #333; }
.f .v.big { font-size: 10pt; letter-spacing: 0.04em; white-space: nowrap; }
.hd-cols > div { min-width: 0; }
.f svg { height: 9mm; width: auto; max-width: 100%; }
.ops-title { font-weight: 700; text-decoration: underline; margin: 4px 0 6px; }
.op-title { font-weight: 700; margin-top: 12px; break-after: avoid; }
.step { break-inside: avoid; padding: 6px 0 0 4mm; }
.step p { margin: 6px 0 2px; }
.step p.sub { margin: 2px 0 2px 6mm; }
.crit { font-weight: 700; }
.warning { font-weight: 700; font-size: 9pt; margin: 4px 0; }
.caution { font-weight: 600; font-size: 9pt; margin: 4px 0; }
.note { font-size: 9pt; margin: 4px 0; }
.rec, .sn { margin: 3px 0 2px 6mm; }
.rec i, .sn i { display: inline-block; border-bottom: 1px solid #000; width: 40mm; }
.sign { display: flex; align-items: flex-end; gap: 4px; height: 17mm; margin: 2px 0 10px; }
.sign span { line-height: 1; padding-bottom: 1px; }
.sign i { flex: 0 0 38mm; border-bottom: 1px solid #000; align-self: stretch; }
.sign i.d { flex-basis: 30mm; }

@media (max-width: 900px) {
  .result { grid-template-columns: 1fr; }
  .found { position: static; max-height: none; }
  .wo { padding: 16px; }
}

@media print {
  @page { size: letter portrait; margin: 12mm 11mm 14mm 11mm;
    @bottom-right { content: "Page " counter(page) " (of " counter(pages) ")"; font: 8pt Arial, sans-serif; }
    @bottom-left { content: "Demo data — not for use on aircraft"; font: 7pt Arial, sans-serif; } }
  body { background: #fff; }
  .no-print { display: none !important; }
  .result { display: block; padding: 0; }
  .wo { box-shadow: none; max-width: none; padding: 0; }
}