/* The project desk (estimate-ai.js showPreview; customer retest 08/10/2026, desktop scroll).
   One compact workspace on the takeoff sheet: the project state, what blocks a purchase list and the next step in
   the first screen; the material list as one breakdown; the details as tabs with their counts. National Lumber
   identity: navy ink, gold accents, paper surfaces, mono figures. One radius (6px), borders instead of shadows. */
.tw-ws{--ws-ink:#102441;--ws-muted:#55606f;--ws-line:#ddd6c8;--ws-soft:#f4f1ea;--ws-gold:#a2782b;color:var(--ws-ink);padding:14px 22px 22px}
.tw-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Header row: kind of project, honest state, facts; exports on the right. */
.tw-ws-head{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-start;justify-content:space-between;padding:2px 0 14px;border-bottom:1px solid var(--ws-line)}
.tw-ws-id{min-width:0;flex:1 1 520px}
.tw-ws-kicker{font:600 12px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ws-muted);margin:0 0 7px}
.tw-ws-status{margin:0;font-size:15px;line-height:1.5;max-width:78ch}
.tw-ws-facts{margin:5px 0 0;font-size:13px;line-height:1.45;color:var(--ws-muted)}
.tw-chip{display:inline-block;font:600 12px/1.2 var(--font-body);padding:4px 8px;border-radius:4px;border:1px solid;margin-right:6px;white-space:nowrap;vertical-align:1px}
.tw-chip.is-prelim{color:#6b4a12;background:#fbf1dc;border-color:#e2c88d}
.tw-chip.is-paused{color:#7c2d0c;background:#fbe9de;border-color:#e6b496}
.tw-chip.is-team{color:#1f4a2f;background:#e6f2e8;border-color:#a8ccb0}
.tw-chip.is-run{color:#102441;background:#e8edf5;border-color:#b7c4d9}
.tw-ws-tools{flex:0 1 auto;display:flex;justify-content:flex-end}
#ai-actions.tw-docked{display:flex;flex-wrap:wrap;gap:8px;margin:0;justify-content:flex-end}
#ai-actions.tw-docked[hidden]{display:none}
#ai-actions.tw-docked .btn{min-height:40px;padding:8px 14px;font-size:14px;margin:0}
#ai-actions.tw-docked #ai-mail{display:none}

/* Grid: details on the left, status rail on the right. */
.tw-ws-grid{display:grid;gap:16px 22px;margin-top:16px;grid-template-areas:"top" "main" "end" "proj"}
/* The project actions (confirmations, drawings, trade) sit under the list on a desktop, so the right rail holds the
   next step, what is open, the totals and the decision only (final version 08/10: a long rail made the page taller). */
.tw-ws-proj{grid-area:proj;min-width:0;display:grid;align-content:start}
.tw-ws-main{grid-area:main;min-width:0}
.tw-ws-rail{display:grid;gap:12px;align-content:start;min-width:0}
.tw-ws-rail-top{grid-area:top}
.tw-ws-rail-end{grid-area:end}
@media (min-width:1100px){
  .tw-ws-grid{grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto 1fr auto;grid-template-areas:"main top" "main end" "proj end";align-items:start}
}
@media (min-width:1600px){.tw-ws-grid{grid-template-columns:minmax(0,1fr) 380px}}
.tw-rail-block{border:1px solid var(--ws-line);border-radius:6px;background:#fff;padding:13px 15px}
.tw-rail-block h4,.tw-ws-overview h4{margin:0 0 7px;font:700 12px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ws-muted)}
.tw-rail-block p{margin:0 0 8px;font-size:14px;line-height:1.5}
.tw-rail-block .btn{min-height:44px}
.tw-next{border-color:#c9a45c;background:#fffaf0}
.tw-next .btn{width:100%;justify-content:center;margin-top:2px}
.tw-blockers ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tw-blockers li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:9px;font-size:13.5px;line-height:1.45;align-items:start}
.tw-sev{font:600 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 0;text-align:center;border-radius:3px;margin-top:1px}
.tw-blockers .is-high .tw-sev{background:#f6dfd3;color:#7c2d0c}
.tw-blockers .is-medium .tw-sev{background:#f6ebcf;color:#6b4a12}
.tw-blockers .is-low .tw-sev{background:#e9ecef;color:#3d4a5c}
.tw-link{font-size:14px;font-weight:600;color:var(--ws-ink);text-decoration:underline;text-underline-offset:3px}
.tw-project{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tw-project h4{flex:1 0 100%}
.tw-project>p{flex:1 0 100%;margin:0;font-size:13.5px;line-height:1.45;color:var(--ws-muted)}
.tw-project .btn{min-height:40px;padding:8px 12px;font-size:13.5px;margin:0}
.tw-project .btn[disabled]{opacity:.75}
.tw-project p[role=status]:empty{display:none}
.tw-project .tw-fallback{flex:1 0 100%;display:grid;gap:6px;margin-top:4px;padding-top:10px;border-top:1px solid var(--ws-line)}
.tw-project .tw-fallback .btn{justify-self:start}
.tw-project .tw-fallback .ai-note-sm{margin:0;font-size:12.5px;color:var(--ws-muted)}

/* Material list in parts: a bar and a legend that closes on the total. */
.tw-ws-overview{border:1px solid var(--ws-line);border-radius:6px;background:#fff;padding:13px 16px 14px}
.tw-bd-head{margin:0;font-size:15px}
.tw-bd-head strong{font-size:22px;margin-right:4px}
.tw-bd-bar{display:flex;height:12px;border-radius:3px;overflow:hidden;gap:2px;margin:9px 0 10px;background:var(--ws-soft)}
.tw-bd-seg{display:block;min-width:3px;flex-basis:0}
.tw-bd-seg.is-drawing,.tw-bd-row.is-drawing dt::before{background:#102441}
.tw-bd-seg.is-derived,.tw-bd-row.is-derived dt::before{background:#55739c}
.tw-bd-seg.is-answer,.tw-bd-row.is-answer dt::before{background:#c9a45c}
.tw-bd-seg.is-team,.tw-bd-row.is-team dt::before{background:#6f8f63}
.tw-bd-seg.is-assumed,.tw-bd-row.is-assumed dt::before{background:repeating-linear-gradient(135deg,#ece5d6 0 3px,#cbbd9f 3px 6px)}
.tw-bd-seg.is-allowance,.tw-bd-row.is-allowance dt::before{background:#a99f8c}
.tw-bd-seg.is-pending,.tw-bd-row.is-pending dt::before{background:#d99a6c}
.tw-bd-seg.is-missing,.tw-bd-row.is-missing dt::before{background:#a8321e}
.tw-bd-seg.is-by_others,.tw-bd-row.is-by_others dt::before{background:#c9d0d9}
.tw-bd-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0}
.tw-bd-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;line-height:1.4;padding:4px 0;border-bottom:1px dotted var(--ws-line)}
.tw-bd-row dt::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px}
.tw-bd-row dd{margin:0;font-weight:600}
.tw-bd-foot{margin:8px 0 0;font-size:13px;color:var(--ws-muted)}
.tw-ws-notes{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--ws-muted)}
.tw-ws-notes li{margin:2px 0}

/* Tabs with their counts. */
.tw-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ws-line);margin:16px 0 0;overflow-x:auto;scrollbar-width:thin}
.tw-tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;padding:9px 12px 8px;font:600 14px/1.2 var(--font-body);color:var(--ws-muted);display:flex;align-items:center;gap:7px;min-height:44px;white-space:nowrap;cursor:pointer;border-radius:0}
.tw-tab:hover{color:var(--ws-ink)}
.tw-tab[aria-selected=true]{color:var(--ws-ink);border-bottom-color:var(--ws-gold)}
.tw-tab:focus-visible{outline:3px solid #af883e;outline-offset:-3px}
.tw-tab-count{font:600 12px/1 var(--font-mono);background:#eceff3;color:var(--ws-ink);border-radius:9px;padding:4px 7px}
.tw-tab-hint{font-size:12px;font-weight:600;color:#7c2d0c}
.tw-panel{padding-top:12px}
.tw-panel:focus{outline:none}
.tw-ws .tw-flash{margin:0 0 12px;font-size:14.5px}
.tw-ws .tw-flash.is-warn{background:#fbe9de;color:#7c2d0c}
.tw-ws .tw-flash:focus{outline:3px solid #af883e;outline-offset:2px}

/* Takeoff questions in the desk: a short title with priority and how the answer applies; facts beside the form. */
.tw-ws .tw-mq,.tw-ws .tw-corrections{max-width:none}
.tw-ws .tw-mq-intro{font-size:14px;margin:0 0 10px;max-width:none}
.tw-ws .tw-mq-card{border-radius:6px;margin:0 0 8px}
.tw-ws .tw-mq-card summary{grid-template-columns:1.6rem minmax(0,1fr);padding:10px 14px;min-height:52px;gap:.7rem;align-items:start}
.tw-ws .tw-mq-number{width:1.6rem;height:1.6rem;margin-top:1px}
.tw-mq-title{display:flex;flex-direction:column;gap:6px;min-width:0}
.tw-mq-title strong{font-weight:600;font-size:14.5px;line-height:1.4}
.tw-mq-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tw-mq-meta .tw-chip{font-size:11.5px;padding:3px 7px;margin:0}
.tw-chip.is-high{color:#7c2d0c;background:#f8e4da;border-color:#e8b8a1}
.tw-chip.is-medium{color:#6b4a12;background:#f8eed6;border-color:#e0c995}
.tw-chip.is-low{color:#3d4a5c;background:#eef0f3;border-color:#cbd2da}
.tw-chip.is-auto{color:#102441;background:#e8edf5;border-color:#b7c4d9}
.tw-chip.is-team{color:#1f4a2f;background:#e6f2e8;border-color:#a8ccb0}
.tw-mq-reach{font-size:12.5px;color:var(--ws-muted)}
.tw-mq-body{display:grid;gap:12px;padding:12px 14px 14px;border-top:1px solid #eae3d5}
.tw-ws .tw-mq-card>p{display:none}
.tw-mq-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 14px;margin:0;font-size:13.5px;line-height:1.45}
.tw-mq-facts dt{color:var(--ws-muted);font-weight:600}
.tw-mq-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tw-ws .tw-mq-form{margin:0;padding:12px;border:1px solid #eadfca;border-radius:6px;background:#fffdf8;gap:.65rem}
.tw-ws .tw-mq-options{gap:.4rem}
.tw-ws .tw-mq-option{min-height:44px;padding:.35rem .65rem;font-size:14px}
.tw-mq-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tw-mq-actions .btn{min-height:44px;margin:0}
.tw-mq-attach{display:grid;gap:5px;font-size:13.5px;font-weight:600}
.tw-mq-attach input[type=file]{font-size:13.5px;max-width:100%}
.tw-mq-attach .tw-mq-scope{font-weight:400}
.tw-mq-history{font-size:13px}
.tw-mq-history summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.tw-mq-history ol{margin:4px 0 0;padding-left:18px;color:var(--ws-muted);display:grid;gap:3px}
@media (min-width:1100px){
  .tw-mq-body{grid-template-columns:minmax(0,1fr) minmax(300px,.95fr);align-items:start}
  .tw-mq-body>.tw-mq-facts,.tw-mq-body>.tw-mq-history{grid-column:1}
  .tw-mq-body>.tw-mq-form{grid-column:2;grid-row:1 / span 3}
  .tw-ws .tw-mq-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.tw-ws .tw-mq-minor{margin-top:8px}

/* Answered questions: answer, note, who, when, version, effect and status; change or reopen. */
.tw-mq-answer{border:1px solid var(--ws-line);border-radius:6px;padding:12px 14px;margin:0 0 10px;background:#fff;display:grid;gap:10px}
.tw-mq-answer h4{margin:0;font:600 14.5px/1.4 var(--font-body);color:var(--ws-ink)}
.tw-mq-slot:empty{display:none}

/* Drawing requests, checks and corrections inside their tabs. */
.tw-ws .tw-conversation-intro{display:none}
.tw-ws .tw-drawings>.tw-mq-intro{margin-bottom:8px}
.tw-ws .tw-questions{margin:0;padding:0;border:0;max-width:none}
.tw-ws .tw-pending-review{margin:0;max-width:none}
.tw-ws .ai-block{margin:0}

/* Page chrome while a project is open: the workspace starts higher. */
@media (min-width:701px){
  .takeoff-workspace[data-takeoff-state=review] .tk-workspace-intro{padding:10px 0 2px}
  .takeoff-workspace[data-takeoff-state=review] .tk-workspace-intro h1{font-size:24px}
  .takeoff-workspace[data-takeoff-state=review] .tk-workspace-intro .tk-watch{font-size:13px}
  .takeoff-workspace[data-takeoff-state=review] #takeoff-progress{padding:6px 0}
  .takeoff-workspace[data-takeoff-state=review] .est-tool.sec-tight{padding-top:10px}
  .takeoff-workspace[data-takeoff-state=review] .ai-sheet .ts-head{padding-top:11px;padding-bottom:11px}
}

/* Phone: one column in the order a customer works; figures and tabs stay readable. */
@media (max-width:700px){
  .tw-ws{padding:12px 12px 16px}
  .tw-ws-head{flex-direction:column;gap:12px}
  .tw-ws-id{flex:none}
  .tw-ws-tools{width:100%;justify-content:stretch}
  #ai-actions.tw-docked{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));width:100%;gap:8px}
  #ai-actions.tw-docked .btn{flex:none;width:auto;height:auto;min-height:44px;padding:8px 10px;margin:0}
  .tw-bd-legend{grid-template-columns:minmax(0,1fr)}
  .tw-blockers li{grid-template-columns:52px minmax(0,1fr)}
  .tw-mq-facts{grid-template-columns:minmax(0,1fr);gap:1px}
  .tw-mq-facts dd{margin-bottom:6px}
  .tw-ws .tw-mq-card summary{padding:10px}
  .tw-mq-body{padding:10px}
  .tw-project .btn{flex:1 1 100%}
}
.tw-mq-more{font-size:13.5px}
.tw-mq-more>summary{cursor:pointer;font-weight:600;min-height:36px;display:flex;align-items:center;color:var(--ws-ink)}
.tw-mq-more>.tw-mq-facts{margin-top:4px}
@media (min-width:1100px){.tw-mq-body>.tw-mq-more{grid-column:1}}
.tw-ws .tw-mq-options.is-short{grid-template-columns:repeat(2,minmax(0,1fr))}
.tw-project>p.tw-confirmed{color:var(--ws-ink);font-weight:600}

/* The owner's priced list in the desk (final version 08/10/2026, stream D; material-list.css styles the list itself).
   The header carries the estimated total next to the state; the tabs wrap instead of scrolling sideways, so the table
   container is the only scroll area of the desk; the totals and the decision sit at the top of the second rail. */
.tw-ws-kpi{flex:0 1 auto;min-width:220px;max-width:340px}
/* Desktop header: project and state on the left; the estimated total over the exports on the right (one band). */
@media (min-width:1100px){
  .tw-ws-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id kpi" "id tools";gap:10px 28px;align-items:start}
  .tw-ws-head>.tw-ws-id{grid-area:id}
  .tw-ws-head>.tw-ws-kpi{grid-area:kpi;justify-self:end;max-width:440px}
  .tw-ws-head>.tw-ws-tools{grid-area:tools;justify-self:end}
}
.tw-ws-kpi:empty{display:none}
.tw-tabs{flex-wrap:wrap;overflow-x:visible}
.ml-rail{display:grid;gap:12px;min-width:0}
.ml-rail:empty{display:none}
.tw-panel>.ml{margin-top:2px}
.ml-legend{margin:0 0 6px;font-size:13.5px;line-height:1.45;color:var(--ws-muted)}
.ml-legend>summary{cursor:pointer;padding:2px 0;color:var(--ws-ink)}
.ml-legend>summary:focus-visible{outline:3px solid #af883e;outline-offset:2px}
.ml-legend[open]>summary{margin-bottom:4px}
/* Phone and 200% zoom: the exports stay right under the state (as before the list existed); the estimated total follows. */
@media (max-width:700px){.tw-ws-head>.tw-ws-tools{order:1}.tw-ws-head>.tw-ws-kpi{order:2}.ml-kpi-go{display:none}#ai-actions.tw-docked{grid-template-columns:repeat(3,minmax(0,1fr))}#ai-actions.tw-docked .btn{font-size:13.5px;padding:8px 6px;white-space:normal;line-height:1.2}}
.ml-legend .tw-ws-notes{margin:0}
@media (max-width:700px){.tw-ws-kpi{max-width:none;width:100%}}
/* The list's next step keeps the questions one click away (final version 08/10). */
.tw-next-alt{appearance:none;display:inline-block;background:none;border:0;margin:6px 0 0;padding:4px 0;min-height:40px;font:600 14px/1.3 var(--font-body);color:var(--ws-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tw-next-alt:focus-visible{outline:3px solid #af883e;outline-offset:2px}
/* Desktop: the next step stays compact so what is still open starts in the first screen at 1366x768 (final version
   08/10); targets stay at least 24 px (WCAG 2.2 target size), phone targets 40–44 px. */
@media (min-width:1100px){
  .tw-ws-head{padding-bottom:10px}
  .tw-ws-grid{margin-top:12px}
  .tw-ws-rail .tw-next .btn{min-height:46px;padding-top:9px;padding-bottom:9px}
  .tw-next-alt{min-height:28px;margin:4px 0 0;padding:2px 0}
}
/* Phone (review 09/10/2026, R8.01/R8.03): the total entered the head and pushed the next step's button below the first
   screen (0 -> 72 px). Tighter spacing, single-line export buttons and a one-line status bring it back; no fact is
   hidden (the version, pending prices and supplier quotes stay in the head's note, the totals and the blockers). */
@media (max-width:700px){
  .tw-ws{padding-top:10px}
  .tw-ws-head{gap:8px;padding-bottom:8px}
  .tw-ws-kicker{margin-bottom:4px}
  .tw-ws-grid{margin-top:8px;gap:12px}
  .tw-ws .ml-kpi-figure strong{font-size:22px}
  #ai-actions.tw-docked{gap:6px}
  #ai-actions.tw-docked .btn{min-height:40px;padding:6px 4px;white-space:nowrap;font-size:13px;gap:4px}
  #ai-actions.tw-docked .btn .nl-icon,#ai-actions.tw-docked .btn svg{display:none}
  .tw-rail-block.tw-next{padding:10px 12px}
  .tw-next h4{margin-bottom:3px}
  .tw-next p{margin-bottom:6px}
  .tw-next .btn{min-height:44px}
}
@media (max-width:700px){.tw-rail-block.tw-next .btn{min-height:44px;padding-top:9px;padding-bottom:9px}
  /* estimate.css gives the undocked action row a 16px top margin on a phone (!important); docked in the head it has the head's gap */
  #ai-actions.tw-docked{margin-top:0!important}}
/* 200% zoom of a laptop (about 640 CSS px wide): the exports and the estimated total share one row. */
@media (min-width:521px) and (max-width:700px){
  .tw-ws-head{flex-direction:row;flex-wrap:wrap;align-items:center}
  .tw-ws-head>.tw-ws-id{flex:1 1 100%}
  .tw-ws-head>.tw-ws-kpi{flex:1 1 240px;width:auto;order:1}
  .tw-ws-head>.tw-ws-tools{flex:0 1 auto;width:auto;order:2}
  #ai-actions.tw-docked{grid-template-columns:repeat(3,auto)}
}