/* Project workspace: navigation, views and the new modules. The original
   estimator styles (styles.css) are unchanged; without body[data-view] the page
   shows the original layout. */
:root { --ink: #16191d; --charcoal: #23272d; --line: #dfe3e8; --accent: #1b1b1b; --focus: #1f6feb; --ok: #1a6b43; --warn: #8a5300; --error: #b42318; }
body { font-size: 15px; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; }

/* Header */
.top { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); padding: .7rem clamp(16px, 3vw, 32px); }
.brand { display: flex; align-items: center; gap: 1rem; }
.brand img { height: 46px; width: auto; display: block; }
.top h1 { font-size: 1.1rem; letter-spacing: -.01em; }
.top .sub { color: #5b6673; font-size: .82rem; }
.badge { background: #f4ecd8; color: #4a3200; }
.project-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .6rem clamp(16px, 3vw, 32px); background: var(--charcoal); color: #fff; }
.project-bar:empty { display: none; }
.project-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.project-name strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #aab3bd; }
.card .eyebrow { color: #5b6673; }
.save-state { font-size: .8rem; color: #c9d1d9; }
.save-state.dirty { color: #ffd27a; font-weight: 600; }
.project-bar button, .project-bar .filebtn { background: #333a42; color: #fff; border-color: #4a525c; }
.project-bar button.primary { background: #fff; color: #111; border-color: #fff; }
.filebtn { display: inline-flex; align-items: center; font-size: .88rem; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: .45rem .75rem; min-height: 36px; cursor: pointer; }
.filebtn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.platform-nav { display: flex; gap: .15rem; overflow-x: auto; padding: 0 clamp(12px, 3vw, 28px); background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.platform-nav a { padding: .8rem .85rem; font-size: .9rem; color: #3d4650; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.platform-nav a:hover { color: #000; }
.platform-nav a[aria-current=page] { color: #000; font-weight: 650; border-bottom-color: #111; }
.platform-nav .classic-link { margin-left: auto; color: #5b6673; font-size: .82rem; }
main:focus, main:focus-visible { outline: none !important; }

/* Views */
.pview { display: none; padding: 16px clamp(16px, 3vw, 32px); gap: 16px; flex-direction: column; }
body[data-view=overview] #view-overview, body[data-view=property] #view-property, body[data-view=history] #view-history { display: flex; }
body:where([data-view]:not([data-view=classic])) .layout > .card { display: none; }
body[data-view=overview] .layout, body[data-view=property] .layout, body[data-view=history] .layout { display: none; }
body[data-view=takeoff] .layout { grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); grid-template-areas: "viewer details" "summary summary"; }
body[data-view=takeoff] .layout > .viewer-card, body[data-view=takeoff] .layout > .details-card, body[data-view=takeoff] .layout > .summary-card { display: block; }
body[data-view=takeoff] .viewer { height: clamp(380px, 62vh, 720px); }
body[data-view=estimate] .layout { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); grid-template-areas: "summary summary" "estimate inputs" "method method"; }
body[data-view=estimate] .layout > .summary-card, body[data-view=estimate] .layout > .estimate-card, body[data-view=estimate] .layout > .inputs-card, body[data-view=estimate] .layout > .method-card { display: block; }
body[data-view=proposal] .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "proposal"; max-width: 1100px; }
body[data-view=proposal] .layout > .proposal-card { display: block; }
@media (max-width: 900px) {
  body[data-view=takeoff] .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "viewer" "details" "summary"; }
  body[data-view=estimate] .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "estimate" "inputs" "method"; }
  .brand img { height: 36px; }
}

/* Shared pieces */
.card h3 { font-size: .98rem; }
.btn { display: inline-flex; align-items: center; font-size: .88rem; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .8rem; min-height: 36px; color: var(--ink); text-decoration: none; background: #fff; }
.btn.primary, button.primary { background: #161616; color: #fff; border-color: #161616; }
button.danger, .link.danger { color: var(--error); }
.toolbar.end { justify-content: flex-end; margin-top: 12px; }
.notice { margin: .45rem 0; padding: .5rem .7rem; border-radius: 8px; font-size: .86rem; border: 1px solid var(--line); background: #f7f8fa; color: #2c333b; }
.notice.ok { border-color: #b7dcc7; background: #f1f9f4; color: #14532d; }
.notice.warn { border-color: #ecd9a6; background: #fdf8e9; color: #5c4300; }
.notice.error { border-color: #f0b8b1; background: #fdf3f2; color: #8a1c12; font-weight: 550; }
.notice.info { border-color: #c5d7f2; background: #f3f7fd; color: #173b6b; }
.notice.muted { color: #5b6673; }
.notice:empty { display: none; }
.empty { border: 1px dashed #c3ccd6; border-radius: 10px; padding: 20px; text-align: center; color: #48525d; background: #fafbfc; }
.empty h3 { margin: 0 0 .3rem; }
.row-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .4rem 0; }
.row-form .pfield { flex: 1 1 160px; }
.pfield { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; margin-bottom: .5rem; }
.pfield-label { color: #48525d; font-weight: 550; }
.pfield-hint { color: #6a7480; font-size: .76rem; }
.pfield input, .pfield select, .pfield textarea, .section-panel input, .section-panel select { font: inherit; font-size: .9rem; border: 1px solid #cfd6de; border-radius: 8px; padding: .42rem .55rem; min-height: 36px; background: #fff; width: 100%; color: var(--ink); }
.pfield input[type=checkbox], .section-panel input[type=checkbox] { width: auto; min-height: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 640px) { .two-col, .three-col { grid-template-columns: 1fr; } }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.result-list, .project-list { list-style: none; padding: 0; margin: .3rem 0; }
.result-list li, .project-list li { padding: .35rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.result-list button { text-align: left; }
.dialog { border: 1px solid var(--line); border-radius: 12px; padding: 20px; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.dialog::backdrop { background: rgba(10, 14, 20, .5); }
.dialog h2 { margin-bottom: .6rem; }
.toasts { pointer-events: none; position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: #111; color: #fff; padding: .65rem .9rem; border-radius: 10px; font-size: .88rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.toast.error { background: #8a1c12; }
.seg[role=group] { display: inline-flex; border: 1px solid #cfd6de; border-radius: 8px; overflow: hidden; margin: .5rem 0; }
.card .seg button { border: 0; border-radius: 0; background: #fff; color: #333; }
.card .seg button[aria-pressed=true] { background: #111; color: #fff; }
.estimate td.num, .estimate th.num { text-align: right; }

/* Overview */
.ov-hero { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.ov-hero h2 { font-size: 1.35rem; margin: .1rem 0 .2rem; }
.ov-hero p { margin: 0; }
.ov-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ov-card { display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.ov-card:hover { border-color: #9aa5b1; }
.ov-card strong { font-size: 1.25rem; }

/* Property */
.pgrid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.map-host { height: clamp(340px, 56vh, 620px); border-radius: 10px; overflow: hidden; background: #e9edf1; position: relative; z-index: 0; }
.map-host.small-map { height: 420px; margin-top: .5rem; }
.map-loading { padding: 1rem; color: #5b6673; }
.leaflet-container { font: inherit; }
.leaflet-container .leaflet-control-attribution { font-size: 11px; }
.mode-bar:empty { display: none; }
/* Active tool: what is on, what to do, and Finish / Undo / Cancel in one place. */
.tool-banner { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin: .5rem 0; padding: .65rem .8rem; border: 2px solid #ff7a00; border-radius: 10px; background: #fff6ec; }
.tool-banner[hidden] { display: none; }
.tool-banner .tool-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 300px; min-width: 0; font-size: .9rem; }
.tool-banner .tool-text strong { font-size: 1rem; }
.tool-banner .tool-count { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-banner .toolbar { flex: 0 0 auto; }
.tool-banner button { min-height: 40px; }
.tool-banner button:disabled { opacity: .5; cursor: not-allowed; }
button[aria-pressed="true"] { background: #ff7a00; border-color: #ff7a00; color: #111; font-weight: 700; }
.map-host.tracing, .map-host.tracing .leaflet-grab, .map-host.tracing .leaflet-interactive { cursor: crosshair; }
.map-host.tracing, .plan-host.tool-on { outline: 3px solid #ff7a00; outline-offset: 1px; }
svg.plan-editor .trace-fill { fill: rgba(255, 122, 0, .14); stroke: none; }
.plan-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .plan-layout { grid-template-columns: minmax(0, 1fr); } }
.plan-host { border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; height: clamp(320px, 54vh, 600px); overflow: hidden; touch-action: none; }
svg.plan-editor { width: 100%; height: 100%; display: block; cursor: crosshair; }
svg.plan-editor .grid line { stroke: #e6eaee; }
svg.plan-editor .sec { fill: rgba(31, 111, 235, .06); stroke: #8aa0b8; cursor: pointer; }
svg.plan-editor .sec.active { fill: rgba(255, 122, 0, .1); }
svg.plan-editor .edge { cursor: pointer; }
svg.plan-editor .handle { fill: #fff; stroke: #111; cursor: move; }
svg.plan-editor .handle.on { fill: #ff7a00; }
svg.plan-editor .len { fill: #222; font-family: inherit; paint-order: stroke; stroke: #fff; stroke-width: .25em; }
svg.plan-editor .secname { fill: #333; font-weight: 700; pointer-events: none; }
svg.plan-editor .trace { fill: none; stroke: #ff7a00; stroke-dasharray: 2 2; }
svg.plan-editor .trace-pt { fill: #fff; stroke: #ff7a00; pointer-events: none; }
.section-panel { font-size: .88rem; }
.section-panel .estimate select, .section-panel .estimate input { min-height: 30px; padding: .2rem .35rem; font-size: .82rem; }
.apply-bar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* History */
.source-block { border-top: 1px solid var(--line); padding: .5rem 0; }
.source-block h4 { margin: 0 0 .2rem; text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--ink); }
.source-block p { margin: .15rem 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: .6rem 0; }
.photo-card { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; }
.photo-annot { position: relative; line-height: 0; cursor: crosshair; }
.photo-annot img { width: 100%; height: auto; border-radius: 6px; }
.pin { position: absolute; transform: translate(-50%, -50%); background: #111; color: #fff; border: 2px solid #fff; border-radius: 50%; width: 22px; height: 22px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.finding { border: 1px solid var(--line); border-left: 4px solid #9aa5b1; border-radius: 8px; padding: 10px 12px; margin: .5rem 0; }
.finding.status-suspected { border-left-color: #c28a00; }
.finding.status-confirmed { border-left-color: #1a6b43; }
.finding.status-unresolved { border-left-color: #b42318; }
.photo-picks { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.appendix-options { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; margin: .6rem 0; }
.appendix-options legend { font-weight: 600; font-size: .85rem; padding: 0 .3rem; }
.privacy { background: #f6f7f9; }
.flat-note { margin: .5rem 0 0; padding: .5rem .7rem; border-radius: 8px; font-size: .86rem; border: 1px solid #ecd9a6; background: #fdf8e9; color: #5c4300; }

/* Linked mode (?estimate=<id>): only applies when the shell sets body[data-linked]. */
body[data-linked] .link-blocked { margin: 24px clamp(16px, 3vw, 32px); padding: 1rem 1.2rem; max-width: 640px; border: 1px solid var(--line); border-left: 4px solid var(--error); border-radius: 8px; background: #fff; color: var(--ink); }
body[data-linked] .link-blocked h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
body[data-linked] .link-blocked h2:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
body[data-linked] .link-blocked .btn { display: inline-flex; align-items: center; min-height: 40px; }
body[data-linked=blocked] .project-bar, body[data-linked=blocked] .platform-nav, body[data-linked=blocked] [data-testid=storage-note],
body[data-linked=blocked] main, body[data-linked=blocked] #preview, body[data-linked=blocked] dialog { display: none !important; }
/* Linked mode, step 5 E7: while the estimate loads, the estimator (with the default roof) stays hidden as for blocked. */
body[data-linked=loading] .project-bar, body[data-linked=loading] .platform-nav, body[data-linked=loading] [data-testid=storage-note],
body[data-linked=loading] main, body[data-linked=loading] #preview, body[data-linked=loading] dialog { display: none !important; }
body[data-linked] .link-loading { display: none; }
body[data-linked=loading] .link-loading { display: block; margin: 24px clamp(16px, 3vw, 32px); color: var(--ink); font-weight: 600; }
/* Linked mode, step 5 E3: context line, way back, save problems, header without a logo, staging banner. */
body[data-linked] .link-context { padding: .55rem clamp(16px, 3vw, 32px); background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); font-size: .9rem; }
body[data-linked] .link-context p { margin: .2rem 0; overflow-wrap: anywhere; }
body[data-linked] .link-context-line { display: flex; flex-wrap: wrap; gap: .15rem .5rem; font-weight: 550; }
body[data-linked] .link-context-line span + span::before { content: "·"; margin-right: .5rem; color: #4a5562; }
body[data-linked] .link-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; }
body[data-linked] .link-back { display: inline-flex; align-items: center; min-height: 40px; color: #174ea6; font-weight: 600; text-decoration: underline; }
body[data-linked] .link-back:focus-visible, body[data-linked] .link-save-problem a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
body[data-linked] .link-nav-note, body[data-linked] .link-property-note { color: #4a5562; font-size: .84rem; }
body[data-linked] .link-save-problem { padding: 0 clamp(16px, 3vw, 32px); }
body[data-linked] .link-save-problem:empty { display: none; }
body[data-linked] .link-save-problem p { margin: .25rem 0; overflow-wrap: anywhere; }
body[data-linked] .link-save-problem button, body[data-linked] .link-save-problem a { min-height: 40px; display: inline-flex; align-items: center; }
body[data-linked] .brand img[hidden] { display: none !important; }
body[data-linked] .link-company-name { font-weight: 700; font-size: 1.1rem; color: var(--ink); overflow-wrap: anywhere; }
body[data-linked] .link-env-banner { margin: 0; padding: .5rem clamp(16px, 3vw, 32px); background: #5c4300; color: #fff; font-weight: 700; text-align: center; }

/* Fix F1: roof size from the applied measurements; measurements not yet in the estimate; linked proposal state. */
.field-input input:disabled { background: #eef0f3; color: #4a5562; cursor: not-allowed; }
.field-input:has(input:disabled) { background: #eef0f3; }
.roof-dims-note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; padding: .5rem .7rem; border: 1px solid #ecd9a6; border-radius: 8px; background: #fdf8e9; color: #5c4300; font-size: .86rem; }
.roof-dims-note p { margin: 0; flex: 1 1 240px; overflow-wrap: anywhere; }
.roof-dims-note button { min-height: 36px; }
.notice.unapplied { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-weight: 600; border-width: 2px; }
.notice.unapplied p { margin: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.notice.unapplied button { min-height: 40px; }
.dims-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: .3rem 0 .5rem; }
.dims-row button { min-height: 36px; }
body[data-linked] .link-proposal-state { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
body[data-linked] .link-proposal-state p { margin: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
body[data-linked] .link-proposal-state button, body[data-linked] .link-proposal-state a { min-height: 40px; display: inline-flex; align-items: center; }
body[data-linked] .preview-unsaved { order: 10; flex-basis: 100%; margin: 0; padding: .35rem .6rem; border-radius: 6px; background: #fff3cd; color: #5c4300; font-size: .85rem; font-weight: 600; }
body[data-linked] .preview-unsaved[hidden] { display: none; }

@media print { .project-bar, .platform-nav, .pview, .toasts, .skip, dialog { display: none !important; } .brand img { height: 40px; } }