/* How We Use AI only. Loaded from the page body after pages.css. Every colour is a token variable.
   Drawings: Slate line on Bone, Bronze on the person and the builder's mark, lettering live in HTML. */
.drw-art > img { display: block; width: 100%; height: auto; }
.drw svg { display: block; width: 100%; height: auto; color: var(--slate); }
.drw .b { color: var(--bronze); stroke: var(--bronze); }
.drw .f-bone { fill: var(--bone); }
.drw .f-raised { fill: var(--bone-raised); }
.ill { display: inline-block; margin-right: 10px; padding: 2px 8px; border: 1px solid var(--bronze); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); vertical-align: 1px; }

/* The split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: var(--space-8); border-top: 1px solid var(--bone-line); padding-top: var(--space-6); }
.split-rule { background: var(--bronze); }
.split h3 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); font-size: clamp(22px, 2vw, 28px); }
.split h3 svg { width: 28px; height: 28px; flex: none; color: var(--bronze); }
.split ul li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--bone-line); align-items: baseline; }
.split ul b { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.split-col--people ul b { color: var(--bronze-deep); }
.split ul span { color: var(--slate-soft); }
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .split-rule { height: 1px; } }

/* The building section, with live lettering laid over the blank tags */
.drw--section { margin: 0; }
.drw-art { position: relative; container-type: inline-size; background: var(--bone); border: 1px solid var(--bone-line); }
.drw-key { position: absolute; inset: 0; pointer-events: none; }
.drw-key li { position: absolute; left: var(--x); top: var(--y); width: var(--w); font-family: var(--sans); font-size: clamp(9px, 1.15cqw, 14px); line-height: 1.35; color: var(--slate); }
.drw-key .k-lvl { transform: translateY(-50%); background: var(--bone); padding: 2px 4px 2px 0; font-size: clamp(8px, .95cqw, 12px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-soft); }
.drw-key .k-room { color: var(--slate-soft); }
.drw-key .k-room b { display: block; font-weight: 600; color: var(--slate); }
.drw-key li:nth-child(2) b { color: var(--bronze-deep); }
.drw-key .k-stamp { transform: translateY(-50%); font-size: clamp(9px, 1.3cqw, 16px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.drw-key .k-tag { height: 4.06%; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.drw-key .k-src { font-size: clamp(8px, 1cqw, 12.5px); font-style: italic; color: var(--slate-soft); }
.drw-key .k-sub { text-align: center; color: var(--slate-soft); font-size: clamp(8px, 1cqw, 12.5px); }
.drw figcaption { margin-top: var(--space-3); font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--slate-soft); max-width: 80ch; }
@media (max-width: 699px) {
  .drw-key { position: static; padding: var(--space-4); border-top: 1px solid var(--bone-line); }
  .drw-key li, .drw-key .k-lvl, .drw-key .k-room, .drw-key .k-stamp, .drw-key .k-tag, .drw-key .k-sub, .drw-key .k-src { position: static; width: auto; height: auto; transform: none; display: block; text-align: left; font-size: 14px; }
  .drw-key .k-lvl { margin-top: var(--space-4); font-size: 11px; }
  .drw-key .k-lvl:first-child { margin-top: 0; }
  .drw-key .k-stamp { display: inline-block; margin-right: 12px; font-size: 12px; }
  .drw-key .k-tag { display: inline-block; margin-right: 8px; }
  .drw-key .k-sub { font-size: 13px; }
}

/* Five workflow rows, each with a thumbnail and a reads, drafts, checked-by strip */
.wf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--bone-line); border-left: 1px solid var(--bone-line); }
.wf-grid > li { display: flex; flex-direction: column; padding: var(--space-5); border-right: 1px solid var(--bone-line); border-bottom: 1px solid var(--bone-line); }
.wf-grid .drw--thumb { margin: 0 0 var(--space-4); background: var(--bone-raised); border: 1px solid var(--bone-line); padding: 6px; }
.wf-grid .num { display: block; margin-bottom: var(--space-2); }
.wf-grid h3 { margin: 0 0 var(--space-2); }
.wf-grid > li > p { color: var(--slate-soft); font-size: 16px; line-height: 1.5; }
.spec-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; padding-top: var(--space-4); }
.spec-strip > div { border: 1px solid var(--slate); padding: 8px 10px; min-width: 0; }
.spec-strip > div + div { border-left: 0; }
.spec-strip dt { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-soft); margin-bottom: 4px; }
.spec-strip dd { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--slate); }
.spec-strip .is-check { background: var(--bronze-tint); border-color: var(--bronze); }
.spec-strip .is-check dt { color: var(--bronze-deep); }
.wf-close { margin-top: var(--space-6); max-width: 62ch; font-size: 19px; line-height: 1.45; }
@media (max-width: 1099px) { .wf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .wf-grid { grid-template-columns: minmax(0, 1fr); } .spec-strip { grid-template-columns: minmax(0, 1fr); } .spec-strip > div + div { border-left: 1px solid var(--slate); border-top: 0; } }
.wf-grid .spec-strip .is-check { border-left: 1px solid var(--bronze); }

/* Ask it yourself */
.read-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); font-family: var(--sans); font-size: 11.5px; }
.read-chips li { padding: 3px 9px; border: 1px solid var(--bone-line); background: var(--bone); color: var(--slate-soft); }
.read-chips .lbl { border: 0; background: none; padding-left: 0; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.chat-a .src-tag { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--bone-line); font-family: var(--sans); font-size: 12.5px; color: var(--slate-soft); }
.chat-a .src-tag span { margin-right: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.chat-a .ask-back { margin-top: var(--space-2); font-style: italic; color: var(--bronze-deep); }
.chat-more details > .read-chips { margin-top: 0; }
.chat-more details > .chat-a { margin: var(--space-2) 0 var(--space-4); }
.stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; margin: var(--space-6) auto 0; }
.stations li { position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 0; border-top: 2px solid var(--slate); }
.stations li + li { padding-left: var(--space-4); border-left: 1px solid var(--bone-line); }
.stations b { display: block; margin: 4px 0; font-weight: 400; font-size: 21px; font-variation-settings: "opsz" 72; }
.stations li > span:last-child { font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: var(--slate-soft); }
.stations .num { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--bronze-deep); }
.stations .is-check { border-top-color: var(--bronze); }
.stations .is-check b { color: var(--bronze-deep); }
@media (max-width: 699px) { .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stations li:nth-child(3) { padding-left: 0; border-left: 0; } }

/* Examples: the situation, what the system drafted, what the person decided */
.ill-note { margin-bottom: var(--space-5); font-family: var(--sans); font-size: 14px; color: var(--slate-soft); max-width: 70ch; }
.ex-lines { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.ex-lines dt { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-soft); padding-top: 4px; }
.ex-lines dt:nth-of-type(3) { color: var(--bronze-deep); }
.ex-lines dd { font-size: 16px; line-height: 1.5; }
@media (max-width: 599px) { .ex-lines { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ex-lines dd { margin-bottom: var(--space-3); } }

/* v2 (Luke 2026-10-07, A2 pick A): the section drawing framed as a sheet on the desk. Bone ground kept inside, rim and shadow
   around it, the caption in the sheet's foot with the Illustrative mark it already carries. The drawing itself does not change. */
.drw--section { background: var(--bone-raised); border: 1px solid rgba(31, 35, 40, .08); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(31,35,40,.06), 0 8px 24px rgba(31,35,40,.10), 0 28px 56px -16px rgba(31,35,40,.14); }
.drw--section .drw-art { border: 0; }
.drw--section figcaption { margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--bone-line-soft); max-width: none; }