.document-templates{max-width:1060px;margin:auto;overflow-wrap:anywhere}
.document-templates .template-back{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--charcoal)}
.template-intro{max-width:720px;color:var(--mid);line-height:1.6;margin-bottom:24px}
.template-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin:20px 0}
.template-card h2{font:400 28px/1.15 var(--serif);margin:0 0 12px}
.template-card h3{font:500 16px/1.4 var(--sans);margin:12px 0 8px}
.template-card p{line-height:1.6;margin:8px 0 14px}
.template-card label:not(.template-check){display:grid;gap:7px;margin:16px 0;font-size:14px}
.template-card input:not([type=checkbox]),.template-card select,.template-card textarea{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:var(--field);border:1px solid var(--field-border);border-radius:6px;background:var(--white);padding:12px;font:16px/1.4 var(--sans);color:var(--charcoal)}
.template-card input[type=file]{padding:10px 6px}
.template-check{display:flex;gap:12px;align-items:center;min-height:var(--tap);font-size:14px;line-height:1.5;margin:14px 0;cursor:pointer}
.template-check input{flex:none;width:20px;height:20px;accent-color:var(--forest)}
.template-card .btn{min-height:var(--tap);white-space:normal;text-align:center;margin:6px 0}
.template-heading,.template-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.template-heading.pagehead{display:flex;align-items:flex-start;flex-wrap:nowrap}
.template-heading.pagehead h1{flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.template-heading.pagehead>.btn{flex:none;width:auto;min-height:var(--tap);padding:10px 14px}
.template-list-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--tap);padding:15px 0;border-top:1px solid var(--border);color:var(--charcoal);text-decoration:none}
.template-list-row .hint{display:block;margin-top:6px}
.template-warning{padding:16px;border-left:4px solid var(--warn);background:var(--cream);line-height:1.6;margin:16px 0}
.template-error,.template-message{color:var(--warn);line-height:1.5}
.template-message:empty{display:none}
.template-message:not(:empty){padding:14px;background:var(--white);border:1px solid var(--warn);border-radius:var(--radius)}
.template-known{color:var(--good);font-size:13px}
.template-steps{list-style:none;display:flex;gap:8px;padding:0;margin:20px 0;counter-reset:template-step}
.template-steps li{flex:1;padding:12px 8px;border-bottom:3px solid var(--border);font-size:14px;text-align:center}
.template-steps li[aria-current=step]{border-color:var(--copper);font-weight:500}
.template-review-question,.template-coverage{border-top:1px solid var(--border);margin:12px 0}
.template-card summary{min-height:var(--tap);padding:12px 0;cursor:pointer;font-weight:500;line-height:1.5}
.template-card summary .hint{display:block;font-weight:400}
.template-card blockquote{margin:12px 0;border-left:3px solid var(--border);padding:0 16px;line-height:1.5}
.template-edit-grid{max-width:740px}
/* Wording or help held as too long: the field's edge and its note beside it
   say so together, so the note never reads as belonging to the next field. */
.template-edit-grid :is(input,textarea)[aria-invalid="true"]{border-color:var(--warn)}
.template-edit-grid [data-long-note]{margin:-8px 0 16px;font-size:14px}
.template-correction,.template-issue{border-top:1px solid var(--border);margin:16px 0}
.template-consent{max-width:740px}
.template-consent .template-consent-copy{flex:1;min-width:0}
.template-region{border:1px solid var(--border);border-radius:6px;padding:12px;min-width:0}
.template-region legend{padding:0 6px;font-size:14px}
.template-issue blockquote{background:var(--white);padding:12px}
.template-question{padding:14px 0;border-bottom:1px solid var(--border)}
/* A long answer (the TRR's repair list) starts eight lines tall on both screens
   that fill a template, outranking their one-field-high box rules, and grows
   with what is typed (growTemplateAnswers) until it scrolls. */
textarea.template-answer-long[data-answer]{min-height:13em;max-height:70vh;overflow-y:auto;resize:vertical;line-height:1.5}
.template-pdf{overflow:auto;background:var(--cream);padding:12px;max-height:75vh}
.template-pdf .pdfpage{position:relative;width:100%!important;max-width:820px;margin:0 auto 16px;background:var(--white)}
.template-pdf canvas{display:block;width:100%!important;height:auto!important}
.template-pdf-highlight{position:absolute;border:2px solid var(--copper);background:rgba(168,80,26,.10);pointer-events:none}
.document-templates :focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.document-templates [hidden]{display:none!important}
.template-year-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin:20px 0}
.template-year-tile{display:grid;gap:8px;min-height:120px;text-align:left;padding:18px;border:1px solid var(--border);border-radius:8px;background:var(--cream);color:var(--charcoal);cursor:pointer;font:16px/1.4 var(--sans)}
.template-year-tile strong{font-size:20px}
.template-year-tile:hover{border-color:var(--copper)}
.template-year-open{color:var(--copper);font-size:14px;font-weight:500}
.template-step-label{font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}
.template-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:12px;margin:20px 0}
.template-type-choice{display:grid;gap:8px;text-align:left;padding:20px;min-height:100px;border:1px solid var(--border);border-radius:8px;background:var(--cream);color:var(--charcoal);font:16px/1.5 var(--sans);cursor:pointer}
.template-type-choice:hover{border-color:var(--copper)}
.template-type-choice span{font-size:14px;color:var(--mid)}
.template-type-group{margin:24px 0}
.template-next{padding:16px;border-left:3px solid var(--copper);background:var(--cream)}
.template-year-create{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin:16px 0}
.template-year-create label{flex:1;min-width:140px;max-width:220px}
.template-year-create .btn{margin-bottom:16px}
.template-year-document{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border)}
.template-year-document .template-list-row{border:0;flex:1;min-width:0}
.template-year-document .template-list-row>span:last-child{flex:none;white-space:nowrap}
.template-year-select{flex:none;justify-content:center;min-width:44px;margin:0}
.template-year-selection{border:1px solid var(--border);border-radius:8px;padding:16px;background:var(--cream);margin:16px 0}
.document-templates .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.template-card{padding:16px}.template-card h2{font-size:25px}.template-heading{display:block}.template-heading .btn,.template-actions .btn{width:100%}.template-steps{gap:0;flex-wrap:wrap}.template-steps li{flex:1 0 28%;font-size:12px;padding:10px 3px}.template-pdf{padding:4px}.template-card input[type=file]{font-size:14px}}

/* A reading in progress. The bar counts the seconds this read has taken
   against the window the provider is given, and says nothing about how far
   through the document it is, because nothing here knows that. Before this,
   one motionless sentence stood for as long as the read took, so a read on
   its fifth minute looked exactly like one that had died. */
.template-run{display:grid;gap:8px;margin:0 0 12px;padding:12px 14px;
  background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-lg)}
.template-run__head{margin:0;font-size:14px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.template-run__head [data-analysis-elapsed]{font-variant-numeric:tabular-nums;color:var(--stone)}
.template-run__track{height:6px;border-radius:999px;background:var(--stone-light);overflow:hidden}
.template-run__fill{display:block;height:100%;width:0;border-radius:999px;background:var(--forest);
  transition:width 1s linear}
.template-run p.hint{margin:0}
@media(prefers-reduced-motion:reduce){.template-run__fill{transition:none}}

/* Every place an answer will be written, numbered against the printed form.
   This replaced filling a sample with fictional answers: what goes wrong on a
   pre-printed page is WHERE an answer lands, and invented text hides that
   while an outline sitting off the line does not. */

/* The flagged items. Every item used to repeat the same two blocks of page
   coverage underneath it, which on a one-page form meant five identical
   echoes; the item's own words and the original PDF are what a person reads. */
.template-issues .template-issue{border-top:1px solid var(--border);padding:10px 0 12px}
.template-issues .template-issue summary{display:flex;gap:8px;align-items:baseline;
  cursor:pointer;line-height:1.5}
.template-issue__page{flex:none;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--stone);border:1px solid var(--border);
  border-radius:999px;padding:1px 7px;background:var(--white)}
.template-issues .template-issue form{display:grid;gap:8px;margin-top:8px}
.template-issues .template-issue .btn{min-height:var(--tap)}

/* A marked place, light enough to read the form through. It used to be a solid
   slab: on his own one-page form that meant fifty-two dark blocks, two of them
   the width of a text line, sitting over printed company names. The number
   moved into a corner badge so a wide place is not a wide number. */
.template-pdf-highlight--numbered{background:rgba(41,60,52,.08);border:1.5px solid var(--forest);
  border-radius:2px;display:block;position:absolute}
.template-pdf-highlight__n{position:absolute;top:-7px;left:-7px;min-width:15px;height:15px;
  padding:0 3px;border-radius:999px;background:var(--forest);color:var(--white);
  font-size:9.5px;font-weight:700;line-height:15px;text-align:center;white-space:nowrap}
/* The base outline lets presses pass through it. A marked place is the thing
   being pressed: chosen to see its question, or dragged if its position was
   estimated. With pointer-events off, selecting and dragging did nothing in a
   real browser while every test passed, because the test DOM has no CSS. */
.template-pdf-highlight--numbered{pointer-events:auto;cursor:pointer}
/* A signing area on the map: dashed, because it stays blank for real ink, and
   labelled with who signs it. Presses pass through it to the page. */
.template-pdf-highlight--signing{border:1.5px dashed var(--copper);background:rgba(168,80,26,.06);
  border-radius:2px;display:block;position:absolute;pointer-events:none}
.template-pdf-highlight__who{position:absolute;bottom:100%;left:0;white-space:nowrap;padding:0 4px;
  border-radius:3px;background:var(--copper);color:var(--white);font-size:9.5px;font-weight:700;
  line-height:14px}
/* A finger on a mark that is not chosen belongs to the browser, so the page
   scrolls and pinches. A chosen mark takes the finger, so it can be dragged. */
.template-pdf-highlight.template-pdf-highlight--movable{pointer-events:auto;cursor:grab;
  touch-action:pan-x pan-y pinch-zoom}
.template-pdf-highlight.template-pdf-highlight--movable.is-armed{touch-action:none;
  border-color:var(--copper);box-shadow:0 0 0 2px rgba(168,80,26,.35)}
.template-pdf-highlight.template-pdf-highlight--movable.is-moving{cursor:grabbing;background:rgba(168,80,26,.14);
  border-color:var(--copper);z-index:5}
/* A place the reading guessed and nobody has confirmed yet: a heavier dashed
   outline, and its one badge (its question's number, or who signs it) turned
   amber, the number square, so it is told apart by shape as well as colour.
   It had a second, square badge with its line number in the list of places
   to check, so a guessed place showed two numbers that seldom agreed; the
   list now shows the badge's own number. Only the outline and the badge
   change; what a press on it does is decided by the rules above, pinned by
   tests/document-view-layout.test.mjs. A chosen or moving place keeps its
   copper edge, whose rules are more specific. */
.template-pdf-highlight.template-pdf-highlight--guessed{border-style:dashed;border-width:2px;
  border-color:var(--caution)}
.template-pdf-highlight--guessed .template-pdf-highlight__n{border-radius:3px;background:var(--caution)}
.template-pdf-highlight--guessed .template-pdf-highlight__who{background:var(--caution)}

/* The document is the editor. It leads the page; the list of every question is
   folded under it for anyone who wants one. */
.template-docview__pages{display:grid;gap:14px;margin-top:10px}
.template-pdf.template-docview__pages{max-height:none;overflow:visible}
.template-docview__pages canvas{max-width:100%;height:auto}
.template-question-list > summary{font-size:13px;cursor:pointer;padding:6px 0}
.template-review-question.is-selected{outline:2px solid var(--forest);outline-offset:4px;border-radius:4px}


/* Compact review action cards. Fix leads, because it is the next thing to do;
   Confirm resolved follows, since it refuses until the item is fixed. */
.template-review-status{font-weight:500;margin:0 0 8px}
.template-analysis-notes{margin:12px 0;border-top:1px solid var(--border);padding-top:8px}
.template-issue-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin:10px 0;background:var(--cream)}
.template-issue-card__head{display:flex;gap:8px;align-items:baseline;margin:0 0 10px}
.template-issue-card__head h4{margin:0;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.35}
.template-issue-card__actions{display:flex;flex-wrap:wrap;gap:8px}
.template-issue-card__actions .btn{min-height:var(--tap)}
.template-issue-card .template-issue{border-top:1px solid var(--border);margin-top:10px;padding-top:8px}

/* The marks Agent Hero worked out by reading the page, rather than from a
   fillable field. They are checked by their own step, because one sentence
   covering every mark treated a rectangle taken out of the PDF and a
   coordinate chosen by looking as the same thing: listed here with the number
   each has on the map, and confirmed together once looked at. */
.template-estimates{border:1px solid var(--caution);border-left-width:3px;
  border-radius:var(--radius);background:var(--white);padding:16px 18px;margin:0 0 14px}
.template-estimates h3{margin:0 0 6px;font-family:var(--serif);font-weight:400;font-size:18px}
.template-estimatelist{list-style:none;margin:12px 0;padding:0;display:grid;gap:4px}
.template-estimatelist li{border-top:1px solid var(--border);padding-top:4px}
.template-estimatelist li:first-child{border-top:0;padding-top:0}
.template-estimatelist b{display:block;font-weight:500}
.template-estimatelist .hint{font-size:12px}
/* Each line takes you to its place on the map: the whole line is the target. */
.template-estimate-jump{display:flex;gap:10px;align-items:center;width:100%;min-height:var(--tap);
  padding:4px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
/* The same number, in the same square amber badge, as the place on the map. */
.template-estimate-n{display:inline-block;flex:none;min-width:22px;height:22px;padding:0 4px;
  border-radius:3px;background:var(--caution);color:var(--white);font-size:12px;font-weight:700;
  line-height:22px;text-align:center;white-space:nowrap}
.template-estimates [data-confirm-placements]{min-height:var(--tap)}

/* What still stands between the review and Approve, read beside the button.
   The same size as the hints around it, so it reads as guidance, not a heading. */
.template-blockers-head{margin:12px 0 2px}
.template-blockers{margin:0 0 12px;padding-left:18px;font-size:13.5px;color:var(--charcoal);line-height:1.45}
.template-blockers li+li{margin-top:2px}

/* Templates for agents (TPL-09): the system desk and its hand tools. Every
   control is a full tap target on his phone, and the position fields wrap to
   two columns there rather than squeezing four across 320px. */
.system-desk-switch{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.system-desk-switch .btn,.system-desk .btn,.system-desk-tools .btn,.system-desk-entry .btn,
.system-desk-setup .btn{min-height:var(--tap);white-space:normal;text-align:center}
.system-desk input:not([type=checkbox]):not([type=radio]),.system-desk select,.system-desk textarea,
.system-desk-tools input:not([type=checkbox]),.system-desk-tools select,.system-desk-tools textarea{min-height:var(--field)}
.system-desk .template-check,.system-desk-tools .template-check{min-height:var(--tap)}
.system-desk-drafts,.system-desk-offers,.system-desk-history,.system-desk-pages,.system-desk-boxes{list-style:none;margin:0;padding:0}
.system-desk-row,.system-desk-offers li,.system-desk-pages li,.system-desk-boxes li{display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--border)}
.system-desk-history li{padding:6px 0;font-size:14px}
/* A sheet opens in the row or entry whose button opened it (review HS-8), on
   its own full-width line under that row's buttons. */
.system-desk-row>.system-desk-sheet-card,.system-desk-offers li>.system-desk-sheet-card,
.system-desk-row>.system-desk-confirm{flex:1 1 100%;margin:4px 0 0}
.system-desk-sheet{margin:10px 0}
.system-desk-sheet summary{list-style:none;cursor:pointer;display:inline-flex}
.system-desk-sheet summary::-webkit-details-marker{display:none}
.system-desk-sheet form{display:grid;gap:10px;margin-top:10px}
.system-desk-position{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0}
.system-desk-choice{margin:10px 0}
.system-desk-phone-hint{display:none}
@media(max-width:767px){
  .system-desk-phone-hint{display:block}
  .system-desk-position{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Agent Hero's templates for an agent's state (TPL-09 B5). The card sits
   after the agent's own year folders and Upload, at every width, and folds
   to one line when nothing is flagged. Every control is a full tap target. */
.system-template-folded-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.system-template-folded{margin:0;font-weight:500}
.system-template-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.system-template-filters{display:flex;flex-wrap:wrap;gap:8px}
.system-template-filter{min-height:var(--tap);padding:8px 14px;border:1px solid var(--field-border);
  border-radius:999px;background:var(--white);color:var(--charcoal);font:500 14px/1.2 var(--sans)}
.system-template-filter[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
.system-template-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.system-template-row{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.system-template-row[data-flag="new"],.system-template-row[data-flag="update"]{border-color:var(--copper)}
.system-template-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.system-template-row p{margin:6px 0}
.system-template-chip{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--cream);
  color:var(--charcoal);font:500 13px/1.6 var(--sans)}
.system-template-row[data-flag="new"] .system-template-chip,
.system-template-row[data-flag="update"] .system-template-chip{background:var(--copper-light);color:var(--forest)}
.system-template-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.system-template-card .btn,.system-template-add select{min-height:var(--tap);white-space:normal;text-align:center}
.system-template-add{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.system-template-mark{margin:0 0 8px}
.system-template-card [data-system-template-status],.system-template-card [data-system-template-error]{margin:6px 0 0}