@layer components {
/* UI/UX Pro Max review: navy navigation, porcelain surfaces, semantic evidence.
   Shared by the client workspace, internal desk, maps, flyers and readers. */
body{background:var(--paper)}button,input,select,textarea{background:var(--surface);border-color:var(--line)}
select{appearance:none;height:44px;min-height:44px;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23626b64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
button:hover{background:var(--surface-hover);border-color:var(--atlas-accent)}button:active{background:var(--surface-hover)}
.primary{background:var(--action);border-color:var(--action);color:var(--white)}.primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--white)}
.masthead{background:var(--header-bg);border-color:var(--header-line)}.masthead nav button:hover{background:var(--header-hover)}.masthead nav .primary{background:var(--action);border-color:var(--action)}
.masthead nav .nav-short{display:none}.masthead nav b{font:inherit}
.header-context,.brand small,.private-badge,.header-context span{color:#e2dfd2}.header-context,.private-badge{border-color:#526050}
.demo-banner{background:#eae5d8;color:#5c584d;border-color:var(--line)}
.review-desk,.research-toolbar,.desk-journal,.map-stage,.geographic-map{background:var(--surface-soft)}
.site-card,.work-row,.map-title,.map-heading,.map-brief,.cluster-menu,.review-grid,.workspace-settings,.research-provenance,.staged-model,.unmapped-sites{background:var(--surface);border-color:var(--line)}
dialog{border-color:var(--line);box-shadow:0 28px 90px var(--shadow-strong)}
.detail,.detail-header,.detail-tabs,.detail .actions,.review-fact,.comparison article,.comparison-scroll,.overlap-section,.model-source,.packet-sheet{background:var(--surface);border-color:var(--line)}
.detail{box-shadow:0 18px 60px var(--shadow-strong)}.detail-tabs button[aria-selected=true]{background:var(--conflict-soft);color:var(--red)}
.detail-header{position:sticky;top:-24px;z-index:4;padding:10px 0}.detail-tabs{top:calc(var(--detail-header-height,80px) - 24px)}.detail{scroll-padding-top:calc(var(--detail-header-height,80px) + 65px)}
.comparison thead th{background:var(--surface-soft)}.comparison tbody th{background:#f5f2ea}.comparison th,.comparison td{border-color:var(--line)}
.model-warning,.packet-context{background:var(--warning-soft);border-color:var(--gold)}.model-empty{background:var(--surface-soft);border-color:#a9b3a4}
.private-panel,.draft-warning,.disclosure-warning{background:var(--conflict-soft);border-color:var(--red)}
.workflow-editor{background:var(--surface-soft);color:var(--ink);border:1px solid var(--line);gap:12px;padding:16px}.workflow-editor label{color:var(--muted)}.workflow-editor h3{font-size:27px}.workflow-editor textarea{min-height:72px}
.geographic-fallback,.geographic-map{background:var(--map-paper)}.geographic-status,.geographic-label{background:var(--surface);border-color:var(--line)}
.geographic-key:before{background:color-mix(in srgb,var(--action) 13%,transparent);border-color:var(--red)}.geographic-key.area-1:before{background:color-mix(in srgb,var(--sage) 13%,transparent);border-color:var(--sage)}.geographic-key.area-shared:before{background:repeating-linear-gradient(45deg,#b88a4633 0 2px,var(--surface) 2px 5px);border-color:var(--gold)}
.age-0{--age:var(--ink)}.age-1{--age:var(--sage)}.age-2{--age:var(--red)}.age-3{--age:var(--gold)}
.hero-scrim{background:linear-gradient(90deg,rgba(32,47,67,.95),rgba(32,47,67,.65) 52%,rgba(32,47,67,.08))}.packet-hero:before{background:linear-gradient(90deg,rgba(32,47,67,.96),rgba(32,47,67,.7) 50%,rgba(32,47,67,.08))}
.mobile-switch{background:var(--surface-soft)}.mobile-switch button[aria-pressed=true]{background:var(--surface)}
.work-site:hover{background:var(--surface-soft)}.work-site .address{font-weight:500}.work-site>.muted{font-weight:500}
.desk-metrics button{background:var(--surface)}.desk-metrics span{font-weight:600}.desk-metrics button:hover{background:var(--surface-hover)}
.work-row{box-shadow:0 1px 1px rgba(32,47,67,.02)}.work-site strong{font-weight:700}.work-row .queue-label{font-weight:600}
.queue-action{background:var(--surface-soft)}.site-card.selected,.work-row.selected{border-color:var(--red)}
.site-number,.pin{background:var(--ink);color:#fffdf8}.pin{border-color:#fffdf8;box-shadow:0 2px 10px var(--shadow-strong)}
.pin[data-evidence=conflict]{background:var(--conflict)}.pin[data-evidence=discreet]{background:var(--warning)}
.pin-cluster{border-color:var(--accent-on-dark)}.pin-label{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 5px 20px var(--shadow)}
.chip,.unknown{background:var(--warning-soft);border-color:#ddcdad;color:var(--warning)}
.conflicting,.flyer-warning{background:var(--conflict-soft);color:var(--conflict);border-color:var(--conflict)}
.confirmed{background:var(--confirmed-soft);color:var(--sage)}.chip.presence-proof{background:var(--confirmed-soft);border-color:var(--confirmed-border);color:var(--sage)}
.map-heading,.map-key,.research-map-legend,.map-status,.map-brief{background:var(--surface);border-color:var(--line)}.map-brief{color:var(--ink)}.map-brief p{color:var(--muted)}
.map-legend-item.conflict:before{background:var(--conflict)}.map-legend-item.discreet:before{background:var(--warning)}
.atlas-town{color:var(--map-label);text-shadow:0 0 5px var(--map-paper),0 0 5px var(--map-paper)}
.flyer-stage{background:radial-gradient(ellipse at 50% 34%,var(--surface) 0%,var(--surface-soft) 65%,var(--line) 100%);box-shadow:inset 0 0 0 1px var(--line),0 24px 55px var(--shadow)}
.flyer-library-heading h1,.flyer-detail h2,.flyer-reader-heading h2,.flyer-missing strong{font-family:var(--display);font-weight:600}
.flyer-card{background:var(--surface);box-shadow:0 18px 35px var(--shadow)}.flyer-card[aria-current=true]{box-shadow:0 18px 45px var(--shadow-strong)}
.flyer-missing{background:linear-gradient(150deg,var(--header-bg),var(--atlas-accent));color:var(--surface)}.flyer-missing .eyebrow{color:var(--accent-on-dark)}
.flyer-reader{background:var(--surface-soft)}.flyer-reader::backdrop,dialog::backdrop{background:rgba(32,47,67,.72)}
.flyer-reader-heading,.flyer-reader-tools,.flyer-reader-source{background:var(--paper)}
.flyer-mode .nav-current{background:transparent;color:var(--surface)}
.flyer-peek{position:fixed;z-index:80;max-height:calc(100dvh - 24px);overflow:auto;width:300px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 65px var(--shadow-strong);animation:peek-in 180ms ease-out}
.flyer-peek-heading{display:flex;gap:10px;align-items:start;margin-bottom:12px}.flyer-peek-heading h2{font:600 25px/1.1 var(--display);flex:1}.flyer-peek-heading button{padding:0;min-width:44px;flex-shrink:0}
.flyer-peek-cover{height:240px;background:var(--surface-soft);display:grid;place-items:center;border:1px solid var(--line);margin-bottom:14px}.flyer-peek img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain}.flyer-peek p{font-size:12px;line-height:1.6}.flyer-peek>.primary{width:100%}.flyer-peek-missing{font:600 26px var(--display)!important}
.record-flyer{display:flex;align-items:center;gap:20px;background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 22px}.record-flyer-thumbnail{padding:0;width:155px;flex-shrink:0;overflow:hidden;box-shadow:0 5px 15px var(--shadow)}.record-flyer-thumbnail img{display:block;width:100%;height:170px;object-fit:contain;background:white}.record-flyer-thumbnail span{display:block;font-size:12px;padding:10px}.record-flyer p{font-size:12px;line-height:1.7;max-width:320px}
#reviewForm>.record-flyer{padding:10px 14px;gap:16px;margin-bottom:14px}#reviewForm>.record-flyer .record-flyer-thumbnail{width:64px}#reviewForm>.record-flyer img{height:76px}#reviewForm>.record-flyer .record-flyer-thumbnail span{display:none}#reviewForm>.record-flyer p{max-width:640px;margin:0}
.detail .record-flyer{margin:12px 0 0;padding:7px 10px;gap:14px;min-height:64px}.detail .record-flyer-thumbnail{width:44px;border-radius:3px}.detail .record-flyer-thumbnail img{height:54px}.detail .record-flyer-thumbnail span{display:none}.detail .record-flyer p{font-size:11px;margin:0}
.work-actions{gap:5px}.work-actions button{padding-inline:7px;min-width:44px}
.work-actions button{white-space:nowrap}
.flyer-mode .research-toolbar{display:none!important}
.flyer-library{height:calc(100dvh - var(--flyer-top,108px))}
.workspace-settings .dialog-heading{position:sticky;top:-30px;z-index:3;background:var(--paper);padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:20px}
.geographic-map[data-status=unavailable],#compareDialog .geographic-main[data-status=unavailable]{height:auto;min-height:72px}.geographic-map[data-status=unavailable] .geographic-canvas{visibility:hidden}.geographic-map[data-status=unavailable] .geographic-fallback{position:relative;padding:18px}
.queue-label{color:var(--muted)}.work-blocker:has(p) .queue-label{color:var(--conflict)}
.site-area-context{display:block;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);text-align:left}.area-model-label{font-size:10px!important;color:var(--warning);font-weight:600}.area-model-metrics{display:flex;gap:18px;margin-top:5px}.area-model-metrics>span{display:block}.area-model-metrics b{display:block;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}.area-model-metrics small,.area-model-source{display:block;font-size:9px;line-height:1.5;color:var(--muted);font-weight:500}.area-model-source{margin-top:5px}.site-card>.site-area-context{padding:10px 18px;margin:0}.map-brief>.site-area-context{width:100%;margin-top:0;border-top:1px solid var(--line)}
.work-site .area-model-metrics{display:flex}
.work-site .area-summary-compact{margin-top:6px;padding-top:6px}
.work-site .area-summary-compact .area-model-label{margin:0;font-size:11px!important;line-height:1.5}
.work-site .area-summary-compact .area-model-metrics{display:block;margin:3px 0 0}
.work-site .area-summary-compact .area-model-metrics>span{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;margin:0;line-height:1.5}
.work-site .area-summary-compact .area-model-metrics b{display:inline;font-size:13px}
.work-site .area-summary-compact .area-model-metrics small{display:inline;font-size:11px}
@media(max-width:760px){.workspace-settings .dialog-heading{top:-24px;padding:12px 0}.workspace-settings .dialog-heading h2{font-size:29px}.detail-header{top:-22px}.detail-tabs{top:calc(var(--detail-header-height,80px) - 22px)}.workflow-editor{grid-template-columns:1fr 1fr}.workflow-editor h3,.workflow-editor label:has(textarea){grid-column:1/-1}}
@keyframes peek-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.flyer-peek{animation:none}}
@media(max-width:760px){.record-flyer{gap:12px;padding:12px}.record-flyer-thumbnail{width:125px}.record-flyer-thumbnail img{height:140px}.record-flyer p{font-size:11px}.flyer-peek-cover{height:210px}}
@media(max-width:760px){body[data-mode=internal] .masthead nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:2px}body[data-mode=internal] .masthead nav button{padding:8px 3px;min-height:44px;font-size:11px}body[data-mode=internal] .masthead nav .nav-long{display:none}body[data-mode=internal] .masthead nav .nav-short{display:inline}}
@media print{.flyer-peek,.record-flyer{display:none!important}}

/* Internal location desk: porcelain surfaces and restrained blue navigation.
   action color. Source documents, property names and geography carry the identity;
   labeled evidence states retain separate brick, amber and green roles. */
body[data-mode=internal]{background:var(--paper);color:var(--ink);}
body[data-mode=internal] .masthead{background:var(--header-bg);color:var(--header-text);border-color:var(--header-line);box-shadow:none}
body[data-mode=internal] .brand,body[data-mode=internal] .brand strong{color:var(--header-text)}
body[data-mode=internal] .brand small,body[data-mode=internal] .header-context,body[data-mode=internal] .header-context span,body[data-mode=internal] .private-badge{color:var(--header-muted);border-color:var(--header-line)}
body[data-mode=internal] .private-badge:before{background:var(--header-focus)}
body[data-mode=internal] .masthead nav button{color:var(--header-text);background:transparent}
body[data-mode=internal] .masthead nav button:not(.nav-current){border-color:transparent}
body[data-mode=internal] .masthead nav button:hover{background:var(--header-hover)}
body[data-mode=internal] .masthead nav button.nav-current{color:var(--action);background:var(--white);border-color:var(--white)}
body[data-mode=internal] .masthead nav span{background:var(--surface-soft);color:var(--muted)}
body[data-mode=internal] .masthead nav .nav-long,body[data-mode=internal] .masthead nav .nav-short{background:transparent;color:inherit}
body[data-mode=internal] .masthead nav .primary,body[data-mode=internal] .primary{background:var(--action);border-color:var(--action);color:var(--white)}
body[data-mode=internal] .masthead nav .primary:hover,body[data-mode=internal] .primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--white)}
body[data-mode=internal] button:hover{border-color:var(--atlas-accent)}
body[data-mode=internal] button:active{background:var(--surface-hover)}
body[data-mode=internal] .primary:active{background:var(--action-hover)}
body[data-mode=internal] :focus-visible{outline-color:var(--action)}body[data-mode=internal] .masthead :focus-visible{outline-color:var(--header-focus)}
body[data-mode=internal] .demo-banner{background:var(--surface-soft);color:var(--muted);border-color:var(--line)}
body[data-mode=internal] .desk-metrics button{background:transparent;border-color:transparent;box-shadow:none}
body[data-mode=internal] .desk-metrics button:hover{background:var(--surface-hover)}
body[data-mode=internal] .desk-metrics strong{color:var(--ink)}
body[data-mode=internal] .queue-formats button[aria-pressed=true],body[data-mode=internal] .band-control button[aria-pressed=true]{background:var(--action);border-color:var(--action);color:var(--white)}
body[data-mode=internal] .site-number,body[data-mode=internal] .pin{background:var(--ink);color:var(--white);border-color:var(--white)}
body[data-mode=internal] .pin[data-evidence=conflict]{background:var(--conflict)}
body[data-mode=internal] .pin[data-evidence=discreet]{background:var(--warning)}
body[data-mode=internal] .pin.active{outline-color:var(--action)}
body[data-mode=internal] .queue-action{background:var(--surface-soft)}
body[data-mode=internal] .site-card.selected,body[data-mode=internal] .work-row.selected{border-color:var(--atlas-accent);background:var(--atlas-highlight)}
body[data-mode=internal] .card-actions button:hover{background:var(--action-soft)}
body[data-mode=internal] .chip{background:var(--warning-soft);border-color:var(--warning-border);color:var(--warning)}
body[data-mode=internal] .unknown{background:transparent;border-color:transparent;color:var(--warning)}
body[data-mode=internal] .chip.unknown{background:var(--warning-soft);border-color:var(--warning-border)}
body[data-mode=internal] .confirmed,body[data-mode=internal] .chip.presence-proof{background:var(--confirmed-soft);border-color:var(--confirmed-border);color:var(--sage)}
body[data-mode=internal] .conflicting,body[data-mode=internal] .flyer-warning{background:var(--conflict-soft);border-color:var(--conflict);color:var(--conflict)}
body[data-mode=internal] .overdue,body[data-mode=internal] .due-label,body[data-mode=internal] .work-blocker:has(p) .queue-label,body[data-mode=internal] .draft-notice,body[data-mode=internal] .flyer-error,body[data-mode=internal] #reviewError,body[data-mode=internal] #publishError,body[data-mode=internal] #followupError{color:var(--conflict)}
body[data-mode=internal] .private-panel,body[data-mode=internal] .draft-warning,body[data-mode=internal] .disclosure-warning{border-color:var(--conflict)}
body[data-mode=internal] .comparison tbody th{background:var(--surface-soft)}
body[data-mode=internal] .model-empty{border-color:var(--line)}
body[data-mode=internal] .geographic-key:before{background:color-mix(in srgb,var(--action) 13%,transparent);border-color:var(--action)}
body[data-mode=internal] .geographic-key.area-1:before{background:color-mix(in srgb,var(--sage) 13%,transparent);border-color:var(--sage)}
body[data-mode=internal] .geographic-key.area-shared:before{background:repeating-linear-gradient(45deg,#8b691d22 0 2px,var(--surface) 2px 5px);border-color:var(--gold)}
body[data-mode=internal] .flyer-stage{background:var(--surface-soft);box-shadow:none;border:1px solid var(--line);border-radius:12px}
body[data-mode=internal] .flyer-missing{background:var(--action)}
body[data-mode=internal] .flyer-missing .eyebrow{color:var(--accent-on-dark)}
/* Preserve readable adjacent document text without exposing distant cards. */
body[data-mode=internal] .flyer-card{opacity:clamp(0,calc(2 - max(var(--offset),calc(var(--offset) * -1))),1)!important}
body[data-mode=internal] .flyer-reader{background:var(--surface-soft)}
body[data-mode=internal] .flyer-reader::backdrop,body[data-mode=internal] dialog::backdrop{background:rgba(32,47,67,.32);backdrop-filter:none}
body[data-mode=internal] .detail-tabs button[aria-selected=true]{background:var(--action-soft);color:var(--action)}
body[data-mode=internal] button,body[data-mode=internal] input,body[data-mode=internal] select,body[data-mode=internal] textarea{border-radius:8px}
body[data-mode=internal] .site-card,body[data-mode=internal] .work-row{border-radius:10px;box-shadow:none}
body[data-mode=internal] .work-row{border-color:transparent;border-bottom-color:var(--line);margin-bottom:4px}
body[data-mode=internal] .work-row.selected{border-color:var(--atlas-accent)}
body[data-mode=internal] .map-heading,body[data-mode=internal] .map-brief,body[data-mode=internal] .cluster-menu,body[data-mode=internal] .unmapped-sites,body[data-mode=internal] .record-flyer,body[data-mode=internal] .workflow-editor{border-radius:10px}
body[data-mode=internal] dialog,body[data-mode=internal] .flyer-peek,body[data-mode=internal] .detail{border-radius:12px}
body[data-mode=internal] .eyebrow{color:var(--muted)}
body[data-mode=internal] .pin{border-radius:50%}
body[data-mode=internal] .age-2{--age:var(--conflict)}

}