/* How We Use AI, V2 (/how-we-use-ai/v2/) only. Loaded from pages_c.how_we_use_ai_v2 after pages.css and ai.css; raise AI_V2_CSS there after edits.
   Follows the 2026-10-07 surface ruling: the three sample views are tiles, everything the company says stays editorial and hairline.
   Palette, type and spacing come from the shared tokens. Nothing here touches another page. */

/* Labeled slot for a picture still to come (round four: only the example 02 video uses it) */
.ai2-slot { margin: 0; display: grid; align-content: center; gap: var(--space-3); padding: var(--space-6); border: 1px dashed var(--bronze); background: var(--bone-raised); text-align: center; }
.ai2-slot .label { color: var(--bronze-deep); }
.ai2-slot p:not(.label) { margin: 0 auto; max-width: 30ch; font-size: 15px; line-height: 1.45; color: var(--slate-soft); }
.ai2-slot--video { aspect-ratio: 864 / 758; border-radius: var(--v2-r); }

/* Three rows: copy beside a sample view */
.ai2-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: var(--space-7) 0; border-top: 1px solid var(--bone-line); }
.ai2-row:first-child { border-top: 0; padding-top: 0; }
.ai2-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ai2-row--flip .ai2-copy { order: 2; }
.ai2-copy .label { color: var(--bronze-deep); margin-bottom: var(--space-3); }
.ai2-copy h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; margin: 0 0 var(--space-4); }
.ai2-copy p:not(.label) { margin: 0; }
.ai2-for { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--bone-line); font-family: var(--sans); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-soft); }
.ai2-for .lbl { font-weight: 600; color: var(--slate); }
.ai2-view { min-width: 0; }
@media (max-width: 899px) { .ai2-row, .ai2-row--flip { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) 0; } .ai2-row--flip .ai2-copy { order: 0; } }

/* Shared tile parts */
.ai2-tile { margin: 0; overflow: hidden; }
.ai2-tile, .ai2-tile:hover { transform: none; }
.ai2-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0; padding: 12px 18px; border-top: 1px solid var(--bone-line-soft); font-family: var(--sans); font-size: 11.5px; letter-spacing: .04em; color: var(--slate-soft); max-width: none; }
.v2-tile--ink .ai2-foot { border-top-color: var(--v2-rim-dark); color: var(--bone-a60); }

/* The monthly update, Ink tile */
.ai2-upd { margin: 0; padding: 8px 18px 14px; }
.ai2-upd dt { margin-top: 14px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-light); }
.ai2-upd dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: rgba(231,229,223,.86); }
.ai2-upd dd b { font-weight: 400; color: var(--bone); }

/* Ask about your project: the chat tile with a head and a foot */
.ai2-chat { padding: 0; max-width: none; }
.ai2-chat .chat-log { padding: 18px 20px 20px; }
.ai2-chat .chat-a p:not(.src-tag) { font-size: 15.5px; }
.ai2-chat .chat-a .src-tag { font-size: 12px; }


/* Round two (2026-10-08): ai.css is no longer loaded, so the source tag styles the chat answer needs live here */
.ai2-chat .chat-a .src-tag { margin-top: 12px; font-family: var(--sans); font-size: 12px; color: var(--slate-soft); }
.ai2-chat .chat-a .src-tag span { margin-right: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }

/* The decision in the owner meeting: a white tile, the question as its title line, three short entries */
.ai2-dec { padding: 16px 18px 14px; }
.ai2-dec-q { margin: 0 0 6px; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.2; font-variation-settings: "opsz" 72; color: var(--ink); max-width: none; }
.ai2-dec dl { margin: 0; }
.ai2-dec dt { margin-top: 12px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); }
.ai2-dec dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--slate); }
.ai2-dec dd b { font-weight: 400; color: var(--ink); }

/* Round four: the look-ahead video inside its tile, and the seven stages of a subcontract */
.ai2-video video { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 1066; background: #FCFBF8; }
.ai2-copy .ex-lines { margin-top: var(--space-4); grid-template-columns: 150px minmax(0, 1fr); }
.ai2-copy .ex-lines dd { font-size: 15.5px; }
.ai2-life { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 2px solid var(--slate); }
.ai2-life li { padding: var(--space-4) var(--space-3) 0 0; }
.ai2-life li + li { padding-left: var(--space-3); border-left: 1px solid var(--bone-line); }
.ai2-life .num { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--bronze-deep); }
.ai2-life b { display: block; margin: 6px 0 4px; font-weight: 400; font-size: 18px; line-height: 1.2; font-variation-settings: "opsz" 72; }
.ai2-life li > span:last-child { display: block; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--slate-soft); }
.ai2-life li:last-child { border-top: 2px solid var(--bronze); margin-top: -2px; }
.ai2-life li:last-child b { color: var(--bronze-deep); }
@media (max-width: 1099px) { .ai2-life { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-5); } .ai2-life li:nth-child(5) { padding-left: 0; border-left: 0; } }
@media (max-width: 599px) { .ai2-life { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai2-life li:nth-child(n) { padding-left: 0; border-left: 0; } .ai2-copy .ex-lines { grid-template-columns: minmax(0, 1fr); } }

/* Round five: the specialty trade playbook as a folder, one folder per stage, one file open beside the tree */
.pb-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 0; }
.pb-tree { list-style: none; margin: 0; padding: 12px 10px 14px; border-right: 1px solid var(--bone-line-soft); background: var(--bone-raised); }
.pb-tree li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 5px; font-family: var(--sans); font-size: 12.5px; line-height: 1.3; color: var(--slate); }
.pb-tree li.pb-in { padding-left: 26px; color: var(--slate-soft); }
.pb-tree li.pb-on { background: var(--v2-white); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--bone-line); }
.pb-tree i { flex: none; position: relative; width: 14px; height: 11px; }
.pb-folder i { border: 1.5px solid var(--slate-soft); border-radius: 2px; }
.pb-folder i::before { content: ""; position: absolute; left: -1.5px; top: -4px; width: 6px; height: 3px; border: 1.5px solid var(--slate-soft); border-bottom: 0; border-radius: 2px 2px 0 0; }
.pb-folder.pb-open i { border-color: var(--bronze-deep); background: var(--bronze-wash); }
.pb-folder.pb-open i::before { border-color: var(--bronze-deep); }
.pb-file i { width: 10px; height: 13px; border: 1.5px solid var(--bone-line); border-radius: 1px; }
.pb-file.pb-on i { border-color: var(--bronze-deep); }
.pb-doc { padding: 16px 20px 18px; min-width: 0; }
.pb-crumb { margin: 0; max-width: none; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-soft); }
.pb-doc h4 { margin: 8px 0 2px; font-weight: 400; font-size: 21px; line-height: 1.2; font-variation-settings: "opsz" 72; color: var(--ink); }
.pb-sub { margin: 0 0 10px; font-family: var(--sans); font-size: 12px; color: var(--slate-soft); }
.pb-doc ol { list-style: none; margin: 0; padding: 0; counter-reset: gap; }
.pb-doc ol li { counter-increment: gap; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; padding: 7px 0; border-top: 1px solid var(--bone-line-soft); font-size: 14.5px; line-height: 1.4; color: var(--slate); }
.pb-doc ol li::before { content: counter(gap, decimal-leading-zero); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--bronze-deep); padding-top: 3px; }
.pb-use { margin: 10px 0 0; max-width: none; padding: 10px 12px; border-radius: 6px; background: var(--bronze-wash); font-size: 14px; line-height: 1.45; color: var(--slate); }
.pb-use b { display: block; margin-bottom: 2px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); }
@media (max-width: 599px) { .pb-body { grid-template-columns: minmax(0, 1fr); } .pb-tree { border-right: 0; border-bottom: 1px solid var(--bone-line-soft); } }

/* Round seven (Luke 2026-10-08): the seven stages are the project life cycle, so an arrow runs from each stage to the next */
.ai2-life li { position: relative; }
.ai2-life li:not(:last-child)::after { content: ""; position: absolute; top: -7px; right: -7px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--bone-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 3l3 3-3 3' fill='none' stroke='%236F5636' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 12px 12px; }
@media (max-width: 1099px) { .ai2-life li:nth-child(4)::after { display: none; } }
@media (max-width: 599px) { .ai2-life li:nth-child(2n)::after { display: none; } }

/* Round eight: folders by what the playbook knows, files named under a folder, the open file as question and what we check now */
.pb-tree li > span { min-width: 0; }
.pb-tree li small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--slate-soft); }
.pb-tree li.pb-folder { align-items: flex-start; }
.pb-tree li.pb-folder i { margin-top: 3px; }
.pb-rfis li { grid-template-columns: 24px minmax(0, 1fr); }
.pb-rfis b { display: block; font-family: var(--serif); font-weight: 400; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.pb-rfis span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--slate-soft); }
.pb-rfis em { margin-right: 6px; font-style: normal; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); }

/* Round ten: the playbook as flat files, one open; each drawing gap with when it shows up, who resolves it and how the bid handles it */
.pb-files li { font-family: var(--sans); }
.pb-files li.pb-on i { border-color: var(--bronze-deep); background: var(--bronze-wash); }
.pb-gaps { list-style: none; margin: 0; padding: 0; counter-reset: gap; }
.pb-gaps > li { counter-increment: gap; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; padding: 10px 0; border-top: 1px solid var(--bone-line-soft); }
.pb-gaps > li::before { content: counter(gap, decimal-leading-zero); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--bronze-deep); padding-top: 3px; }
.pb-gaps b { display: block; font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.25; color: var(--ink); }
.pb-gaps p { margin: 4px 0 0; max-width: none; font-size: 13.5px; line-height: 1.45; color: var(--slate); }
.pb-gaps dl { margin: 8px 0 0; display: grid; gap: 3px; }
.pb-gaps dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.pb-gaps dt { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-deep); }
.pb-gaps dd { margin: 0; font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--slate-soft); }
.pb-files li i { border-color: var(--slate-soft); }
.pb-files li.pb-on i { border-color: var(--bronze-deep); }