/* Content components added 2026-09-30 with the repositioning: the sample work order report, the quality control
   list, the two column comparison, and the blog list and post. Linked from the head of the home page, posts and any page
   whose blocks include one of these (sitegen.render, needs_components). Restyled in the UI lift the same day: the report reads as a printed job
   document, ink rule under the head, the job number in mono, photo slots as ruled frames. Tokens live in site.css. */

/* The sample work order report */

/* Homepage quality control: the copy beside the compact report */
.qc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.qc-copy h2{margin:0}
.qc-lede{margin:14px 0 26px;color:var(--steel);font-size:17px;line-height:1.55;max-width:48ch}
.qc-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-bottom:1px solid var(--line)}
.qc-list li{position:relative;border-top:1px solid var(--line);padding:14px 0 14px 26px}
.qc-list li::before{content:"";position:absolute;left:0;top:19px;width:14px;height:14px;border-radius:4px;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.8 7.2l2.1 2.1 4.3-4.6' fill='none' stroke='%230E1116' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.qc-list b{display:block;font-family:var(--head);font-size:19px;font-weight:700;letter-spacing:-.008em}
.qc-list span{display:block;margin-top:2px;color:var(--steel);font-size:16px;line-height:1.5}
.qc-claim{margin:20px 0 0;font-size:15px;color:var(--steel);max-width:52ch}
.qc-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px}

/* Two column comparison: separate trades against Roundhouse */
.vs.vs-2 .vs-row{grid-template-columns:minmax(0,1.9fr) repeat(2,minmax(0,1fr))}
.feature-trades{margin:0 0 18px;font-size:16px;color:var(--steel);max-width:80ch}

/* Blog */
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-bottom:1px solid var(--line)}
.post-list li{border-top:1px solid var(--line);padding:20px 0}
.post-list a{font-family:var(--head);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink);transition:color .15s}
.post-list a:hover{color:var(--orange-ink)}
.post-list p{margin:6px 0 0;color:var(--steel);max-width:68ch}
.post-meta{color:var(--steel);font-size:14px;margin:12px 0 0;font-variant-numeric:tabular-nums}
.post-body{margin-bottom:clamp(32px,5vw,64px)}
.post-body > *{max-width:720px}
.post-body h2{margin:44px 0 12px;font-size:clamp(24px,2.2vw,30px);line-height:1.18}
.post-body p,.post-body ul,.post-body ol{margin:0 0 16px}

@media (max-width:760px){
  .qc{grid-template-columns:1fr}
  .vs.vs-2 .vs-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-pair{grid-template-columns:1fr 1fr}
  .rs-timeline li{grid-template-columns:1fr;gap:0}
}

/* The sample work order report, rebuilt 2026-10-01: a printed job document on a stacked sheet, real photo pairs with
   camera stamps, green closed and signed off flags, sign off and warranty in a footer band. */
.rs{position:relative;margin:0;max-width:780px;padding:0 0 10px 10px}
.rs::before{content:"";position:absolute;left:0;right:10px;top:12px;bottom:0;border-radius:14px;background:var(--mist);border:1px solid var(--line);transform:rotate(-1.4deg)}
.rs-sheet{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -28px rgba(14,17,22,.35),0 2px 6px rgba(14,17,22,.06);padding:clamp(18px,2.4vw,28px);overflow:hidden}
.rs-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--orange) 0 30%,var(--ink) 30%)}
.rs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.rs-brand{display:flex;align-items:center;gap:12px}
.rs-brand img{width:40px;height:auto}
.rs-title{margin:0;font:700 19px/1.1 var(--head);letter-spacing:-.01em}
.rs-id{margin:3px 0 0;font:600 12.5px/1 var(--mono);color:var(--steel);letter-spacing:.04em}
.rs-flags{display:flex;gap:6px;flex-wrap:wrap}
.rs-ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--go);background:var(--go-tint);border-radius:999px;padding:4px 10px 4px 8px}
.rs-ok::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.2l1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.rs-ex{font-size:12px;font-weight:600;color:var(--wait);background:var(--wait-tint);border:1px solid var(--wait-line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.rs-note{margin:12px 0 0;color:var(--steel);font-size:14px}
/* The key facts: three across then two across (six tracks), so the fifth fact never leaves an empty grey cell */
.rs-meta{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:16px 0 0;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rs-meta > div{grid-column:span 2}
.rs-meta > div:nth-child(4):nth-last-child(2),.rs-meta > div:nth-child(5):last-child{grid-column:span 3}
.rs-compact .rs-meta > div{grid-column:span 3}
.rs-meta > div{background:var(--paper);padding:10px 12px}
.rs-meta dt{font:600 13px/1.2 var(--head);color:var(--steel-2)}
.rs-meta dd{margin:4px 0 0;font-size:14.5px;font-weight:500;font-variant-numeric:tabular-nums}
.rs-sec{margin-top:16px}
.rs-sec h3,.rs-foot h3{margin:0 0 6px;font:600 13px/1.2 var(--head);color:var(--steel-2)}
.rs-sec p,.rs-sec ul,.rs-foot p{margin:0;font-size:15px;line-height:1.55}
.rs-sec ul{padding-left:18px}
.rs-sec ul li::marker{color:var(--orange)}
.rs-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.rs-ph{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--mist)}
.rs-ph img{width:100%;height:100%;object-fit:cover}
.rs-stamp{position:absolute;left:8px;bottom:8px;font:600 11.5px/1 var(--mono);color:#fff;background:rgba(14,17,22,.78);padding:5px 7px;border-radius:5px;backdrop-filter:blur(4px)}
.rs-stamp::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.rs-b::before{background:#FF8A5C}
.rs-a::before{background:#4ADE80}
.rs-cap{grid-column:1/-1;margin:0;font-size:13px;color:var(--steel)}
.rs-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rs-two .rs-sec{margin-top:4px}
.rs-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--mist)}
.rs-timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2)}
.rs-timeline li{position:relative;display:grid;grid-template-columns:82px 1fr;gap:10px;padding:5px 0 5px 14px;font-size:15px}
.rs-timeline li::before{content:"";position:absolute;left:-4px;top:13px;width:7px;height:7px;border-radius:2px;background:var(--line-2)}
.rs-timeline li:last-child::before{background:var(--orange)}
.rs-timeline time{font-family:var(--mono);font-size:13px;color:var(--steel);padding-top:2px}
.rs-compact{max-width:none}
.rs-foot-one{grid-template-columns:1fr}
.rs-more{margin:16px 0 0;font-size:15px}
/* The way into the full report reads as a control, not a footnote: outlined, ink, a 44 px target */
.rs-more .link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r-btn);color:var(--ink);text-decoration:none;background:var(--paper)}
.rs-more .link:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:560px){
  .rs-two,.rs-foot{grid-template-columns:1fr}.rs{padding:0}.rs::before{display:none}
  .rs-meta{grid-template-columns:1fr 1fr}
  .rs-meta > div,.rs-meta > div:nth-child(4):nth-last-child(2){grid-column:span 1}
  .rs-meta > div:nth-child(5):last-child{grid-column:1/-1}
  .rs-compact .rs-meta > div{grid-column:span 1}
}

/* The full sample report: the sheet at full width with its four numbered notes beside it, outside the document.
   The small numbered marks on the sheet point to the notes. */
.rs-layout{display:grid;grid-template-columns:minmax(0,860px) minmax(240px,320px);gap:clamp(28px,4vw,56px);align-items:start}
.rs-layout .rs{max-width:none}
.rs-mark{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:8px;border-radius:50%;background:var(--orange);color:var(--ink);font:700 11px/1 var(--head);font-style:normal;vertical-align:1px}
.rs-notes{position:sticky;top:96px}
.rs-notes-intro{margin:0 0 16px;font-size:15px;color:var(--steel)}
.rs-notes ol{list-style:none;margin:0;padding:0;counter-reset:rn;border-top:1px solid var(--line)}
.rs-notes li{counter-increment:rn;position:relative;padding:16px 0 16px 38px;border-bottom:1px solid var(--line)}
.rs-notes li::before{content:counter(rn);position:absolute;left:0;top:16px;width:24px;height:24px;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-items:center;font:700 13px/1 var(--head)}
.rs-notes b{display:block;font:700 17px/1.25 var(--head);letter-spacing:-.005em}
.rs-notes span{display:block;margin-top:4px;color:var(--steel);font-size:15px;line-height:1.5}
@media (max-width:1000px){.rs-layout{grid-template-columns:1fr}.rs-notes{position:static}}