/* Maker Quote mobile workspace R1. Same inputs and engine across layouts. */
:root { --bg:#f5f7fb; --ink:#102339; --r-l:18px; }
.col-in { box-shadow: 0 4px 22px #10233905; }
.tabs [role=tab] { margin-bottom:0; }
.tabs [role=tab]:focus-visible { outline-offset:-4px; }
.edit-facets { display:none; }
.edit-part + .edit-part { margin-top:20px; }
.edit-part > .more + .more { margin-top:12px; }
.unit-guide { margin:0 0 18px; border:1px solid #d7e0ef; border-radius:14px; padding:14px; background:#f1f5fc; }
.unit-guide figcaption { font-size:.8125rem; color:#3e4a66; font-weight:600; line-height:1.5; margin-bottom:12px; }
.unit-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.unit-step { display:grid; justify-items:start; gap:4px; min-width:0; }
.unit-icon { width:28px; height:28px; flex:none; color:#3247d1; }
.unit-step strong { font-size:1rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.unit-step > span { color:var(--muted); font-size:.8125rem; line-height:1.5; }
.fields.core { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fields.core .wide { grid-column:1/-1; }
.edit-part > .basis-row { margin:0 0 18px; }
.basis-row .flabel { font-size:.8125rem; }
.version-history { margin:0 0 14px; background:#fff; }
.version-history summary { font-size:.875rem; }
.version-explorer { min-width:0; max-width:100%; padding-bottom:4px; }
.version-explorer > .hint { margin-bottom:10px; }
.version-rail { position:relative; display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; touch-action:pan-x pan-y pinch-zoom; padding:4px; cursor:grab; }
.version-rail::-webkit-scrollbar { display:none; }
.version-rail.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.version-card { appearance:none; text-align:left; display:grid; align-content:start; gap:8px; flex:0 0 min(78%,300px); min-width:0; min-height:150px; padding:16px; background:#f4f6fc; border:1px solid #ccd7ea; border-radius:13px; scroll-snap-align:start; color:var(--ink); cursor:pointer; }
.version-card:hover { background:#eaf0fc; border-color:#6475ca; }
.version-ref { color:var(--muted); font-size:.8125rem; }
.version-card strong { font-size:1rem; overflow-wrap:anywhere; }
.version-value { font-size:1rem; font-variant-numeric:tabular-nums; }
.version-action { color:var(--action-ink); font-size:.8125rem; font-weight:650; }
.rail-controls { display:flex; flex-wrap:wrap; min-width:0; align-items:center; gap:8px; margin-top:10px; }
.rail-controls .btn { min-height:44px; min-width:44px; padding:8px; }
.rail-controls .link { margin-left:auto; font-size:.8125rem; }
.rail-position { font-size:.8125rem; color:var(--muted); min-width:44px; text-align:center; }
.live-summary { display:none; }
.studio-jumps { gap:6px; }
.studio-jumps [aria-pressed=true] { background:var(--action-soft); color:var(--action-ink); border-color:var(--action); }
@media (max-width:1000px) {
  .edit-facets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:16px; }
  .edit-facets button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:46px; border:1px solid #d4ddeb; border-radius:10px; padding:8px 4px; background:#f7f9fd; font-size:.875rem; font-weight:650; cursor:pointer; }
  .edit-facets .unit-icon { width:20px; height:20px; }
  .edit-facets [aria-pressed=true] { color:var(--action-ink); border-color:var(--action); background:var(--action-soft); }
  .input-editor .edit-part { display:none; margin:0; }
  .input-editor[data-edit=job] [data-facet=job], .input-editor[data-edit=price] [data-facet=price], .input-editor[data-edit=costs] [data-facet=costs] { display:block; }
  .input-editor .price-box { border-top:0; padding-top:0; margin:0; background:transparent; }
  .live-summary { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; padding:14px 16px; background:#eaf1f8; border:1px solid #cfdbeb; border-radius:14px; margin-bottom:14px; }
  .live-summary > div { display:grid; gap:4px; min-width:0; }
  .live-summary .lbl { font-size:.8125rem; color:var(--muted); }
  .live-summary strong { font-size:1.125rem; line-height:1.4; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
}
@media (min-width:761px) and (max-width:1000px) {
  .work { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .col-doc { grid-column:1/-1; }
}
@media (max-width:760px) {
  .demo-band { display:none; } /* Example chip, title and unsaved meta stay visible; avoid repeating the same note. */
  .qhead { display:grid; grid-template-columns:1fr; gap:8px; }
  .qtitle h1 { font-size:1.125rem; line-height:1.4; }
  .qhead-acts { gap:6px; }
  .qhead-acts .btn { font-size:.875rem; padding:9px 10px; min-height:44px; }
  .edit-facets button { flex-direction:column; gap:3px; padding:7px 3px; min-height:58px; }
  .edit-facets .unit-icon { width:18px; height:18px; }
  .meta { font-size:.8125rem; }
  .studio-heading { margin:16px 0; }
  .studio-heading h2 { font-size:1.375rem; }
  .studio-heading > .muted { font-size:.875rem; line-height:1.6; }
  .studio-jumps { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .studio-jumps .btn { font-size:.8125rem; padding:8px 3px; }
  .studio-grid > [data-studio] { display:none; }
  .studio-grid[data-stage=negotiate] > [data-studio=negotiate], .studio-grid[data-stage=stress] > [data-studio=stress], .studio-grid[data-stage=batch] > [data-studio=batch], .studio-grid[data-stage=mix] > [data-studio=mix] { display:block; }
  .studio-note { font-size:.8125rem; margin-top:16px; }
  .unit-guide { padding:12px; }
  .unit-steps { gap:8px; }
  .fields.core .mat-field { grid-column:1/-1; }
  .unit-step { grid-template-columns:18px minmax(0,1fr); align-items:center; gap:5px; }
  .unit-step .unit-icon { width:18px; height:18px; }
  .unit-step > strong { font-size:.9375rem; }
  .unit-step > span { display:none; } /* Full unit meaning remains in guide caption and exact input labels. */
  .unit-guide figcaption { margin-bottom:10px; }
  .edit-part > .basis-row { margin-top:18px; margin-bottom:0; }
  .mbar { padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  .sitefoot { font-size:.8125rem; }
}
@media (max-width:400px) {
  .unit-step { grid-template-columns:minmax(0,1fr); gap:4px; }
  .unit-step > strong { word-break:keep-all; }
}
@media (prefers-reduced-motion:reduce) { .version-rail { scroll-behavior:auto; } }

/* Keep each comparison item and all three amounts together on small screens.
   Native column headers remain available; wide and print tables keep their layout. */
@media screen and (max-width:760px) {
  .cmp-table, .cmp-table tbody, .cmp-table tfoot { display:block; width:100%; }
  .cmp-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .cmp-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; padding:14px 16px; border-bottom:1px solid var(--line); }
  .cmp-table tr:last-child { border-bottom:0; }
  .cmp-table th[scope=row] { grid-column:1/-1; padding:0; border:0; text-align:left; word-break:keep-all; overflow-wrap:anywhere; }
  .cmp-table td.num { min-width:0; padding:0; border:0; text-align:left; white-space:normal; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
  .cmp-table td.num::before { content:attr(data-label); display:block; margin-bottom:3px; font-size:.8125rem; font-weight:500; color:var(--muted); }
  .cmp-table td.delta { grid-column:1/-1; display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:8px; border-top:1px solid var(--line); text-align:right; }
  .cmp-table td.delta::before { margin:0; flex-shrink:0; text-align:left; }
  .cmp-table tfoot { background:var(--sunken); border-top:1px solid var(--line); }
}

/* Candidate snap inset matches the existing4px rail padding. Actual Home focus,
   key routing and settling must be observed before attributing the prior FAIL. */
@media screen { .version-rail { scroll-padding-inline:4px; } }
@media screen and (max-width:760px) {
  .tabs [role=tab] { white-space:normal; overflow-wrap:normal; word-break:keep-all; hyphens:none; font-size:.9375rem; line-height:1.35; }
}
/* Five named tasks remain visible. Small screens use two rows rather than
   compressing words into five narrow columns or hiding tasks in a slider. */
@media screen and (max-width:600px) {
  .tabs { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; border-bottom:0; }
  .tabs [role=tab] { grid-column:span 2; min-height:48px; padding:8px 6px; border:1px solid var(--line); border-bottom-width:3px; border-radius:9px; background:var(--surface); }
  .tabs [role=tab]:nth-child(n+4) { grid-column:span 3; }
  .tabs [role=tab][aria-selected=true] { border-color:var(--action); background:var(--action-soft); }
}

/* The persistent bottom context already shows the quote result. Let the active
   task reach its real fields before optional help and secondary panel choices. */
@media screen {
  .panel-switch { display:none; }
  .unit-help { margin-top:14px; }
  .unit-help > summary { min-height:44px; cursor:pointer; }
  .unit-help .unit-guide { margin:12px 0 0; }
}
@media screen and (max-width:760px) {
  .live-summary { display:none; }
  .panel-switch { display:block; margin:0 0 12px; border:1px solid var(--line); border-radius:10px; padding:0 12px; background:var(--surface); }
  .panel-switch > summary { min-height:44px; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:12px; }
  .panel-switch > summary .sum-val { margin-left:auto; color:var(--action-ink); }
  .panel-switch .disclosure-mark { color:var(--action-ink); }
  .panel-switch[open] .disclosure-mark { transform:rotate(180deg); }
  .panel-switch .msteps { position:static; margin:0 0 10px; }
  .edit-facets { margin-bottom:12px; }
  .edit-facets button { flex-direction:row; min-height:44px; padding:8px 6px; word-break:keep-all; overflow-wrap:normal; }
  .edit-facets .unit-icon { display:none; }
}

/* One quote context: keep editing first, management available on demand. */
@media screen {
  .quote-topbar .topbar-in { flex-wrap:nowrap; justify-content:space-between; }
  details.site-menu { margin:0 0 0 auto; padding:0; border:0; }
  details.site-menu[open] { padding-bottom:0; }
  details.site-menu > summary { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; min-height:44px; padding:10px 12px; cursor:pointer; list-style:none; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--action-ink); font-size:.9375rem; }
  details.site-menu[open] > summary { margin-bottom:0; }
  details.site-menu > summary::-webkit-details-marker { display:none; }
  details.site-menu > summary::after { content:'⌄'; }
  .site-menu-body { position:absolute; top:calc(100% + 6px); right:24px; width:min(400px,calc(100vw - 48px)); display:grid; gap:16px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 12px 32px #10244b24; }
  .site-menu-body .nav { display:flex; flex-wrap:wrap; }
  .site-menu-body .nav button { min-height:44px; }
  .site-menu-body .lang { justify-self:stretch; }
  .site-menu-body .lang select { width:100%; min-height:44px; }
  .qhead.quote-context-head { display:block; position:relative; margin-bottom:12px; }
  details.quote-context { padding:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
  details.quote-context[open] { padding-bottom:0; }
  details.quote-context > summary { display:block; min-height:72px; padding:10px 88px 10px 12px; cursor:pointer; list-style:none; }
  details.quote-context[open] > summary { margin-bottom:0; }
  details.quote-context > summary::-webkit-details-marker { display:none; }
  details.quote-context > summary h1 { font-size:1.25rem; line-height:1.3; margin:0; min-width:0; }
  #quote-title-text { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  details.quote-context[open] #quote-title-text { white-space:normal; overflow-wrap:anywhere; }
  .quote-context-caption { display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:4px; font-size:.875rem; line-height:1.4; font-weight:400; }
  #quote-state { color:var(--muted); }
  .quote-management-label { white-space:nowrap; color:var(--action-ink); }
  .quote-management { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:12px; padding:12px; border-top:1px solid var(--line); }
  .quote-management > * { min-width:0; max-width:100%; }
  .quote-management > .meta { margin:0; }
  .quote-management .qhead-acts { width:auto; }
  .quote-management .version-history { margin:0; }
  .quote-management .panel-switch { margin:0; }
  .quote-context-head .context-primary { position:absolute; top:12px; right:12px; min-height:44px; max-width:72px; }
  .quote-context-head.is-demo details.quote-context > summary { padding-right:152px; }
  .quote-context-head.is-demo .context-primary { max-width:136px; }
}
@media screen and (max-width:760px) {
  .quote-topbar .topbar-in { min-height:52px; }
  .quote-topbar .brand { min-height:44px; }
  .site-menu-body { left:12px; right:12px; width:auto; }
  .quote-context-head + .tabs { margin-top:0; }
}

/* Remove redundant context/task gaps on phones without shrinking content or targets. */
@media screen and (max-width:760px) {
  .qhead.quote-context-head { margin-bottom:4px; }
  .quote-context-head + .tabs { margin-bottom:6px; }
}

/* Constrain the nested history track, not the page scroll or card typography. */
details.quote-context, details.version-history { min-width:0; max-width:100%; }
.version-rail { min-width:0; max-width:100%; }
.version-ref, .version-value, .version-action, .version-explorer > .hint { overflow-wrap:anywhere; }
@media screen and (max-width:760px) {
  .rail-controls .link { flex-basis:100%; margin-left:0; text-align:left; white-space:normal; overflow-wrap:anywhere; }
}

/* Disjoint disclosure and primary action hit areas; demo copy keeps its full label. */
@media screen and (max-width:1000px) {
  details.quote-context > summary { margin-right:84px; padding-right:4px; }
  .quote-context-head.is-demo details.quote-context > summary { margin-right:0; padding-right:12px; }
  .quote-context-head.is-demo .context-primary { position:static; width:100%; max-width:none; margin-top:8px; }
  .quote-management-label { white-space:normal; }
}

/* Financial values are indivisible; metric groups fit their column, not the viewport. */
@media screen {
  .outcomes { display:flex; flex-wrap:wrap; container-name:outcome-metrics; container-type:inline-size; }
  .outcomes > .outcome { flex:1 1 8rem; min-inline-size:min-content; max-inline-size:100%; }
  .outcomes .v { white-space:nowrap; overflow-wrap:normal; word-break:normal; }
  @container outcome-metrics (max-width:17rem) {
    .outcomes > .outcome { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:2px; }
    .outcomes .l { flex:1 1 6rem; }
    .outcomes .v { flex:0 0 auto; margin-top:0; margin-left:auto; }
    .outcomes .x { flex-basis:100%; }
  }
}

@media screen {
  .outcomes > .outcome:last-child { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
  .outcomes > .outcome:last-child .l { flex:1 1 auto; }
  .outcomes > .outcome:last-child .v { flex:0 1 auto; min-inline-size:0; max-inline-size:100%; margin:0; white-space:normal; }
  .outcomes > .outcome:last-child .x { flex-basis:auto; margin:0; }
}