/* Hallmark · macrostructure: Map / Diagram · tone: technical modern-minimal · anchor hue: cobalt */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 */
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; }
body { color: var(--color-text); background: var(--color-background); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; }
button, input, select { font: inherit; }
button, select, summary, a { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button, select { color: var(--color-text); }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--color-accent-line); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; min-width: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; }
h2 { font-size: var(--text-lg); font-weight: 600; }
h3 { font-size: var(--text-md); font-weight: 600; }
.icon-library { position: absolute; width: 0; height: 0; overflow: clip; }
.icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: 50; padding: var(--space-sm) var(--space-lg); background: var(--color-paper); border: var(--rule-width) solid var(--color-rule); }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 66px; padding: var(--space-md) var(--space-xl); background: var(--color-paper); border-bottom: var(--rule-width) solid var(--color-rule); }
.header-identity { display: flex; align-items: center; gap: var(--space-lg); min-width: 0; }
.site-header h1 { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lg); font-weight: 600; white-space: nowrap; }
.site-header h1 .icon { color: var(--color-accent); }
.private-label { color: var(--color-muted); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); font-size: var(--text-xs); padding: 1px 7px; white-space: nowrap; }
.button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 44px; min-width: 44px; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); text-decoration: none; white-space: nowrap; font-weight: 500; }
.button { padding: var(--space-sm) var(--space-md); font-size: var(--text-md); }
.button:hover, .icon-button:hover { background: var(--color-accent-soft); border-color: var(--color-accent-line); text-decoration: none; }
.button-primary { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
.button-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.button-small { min-height: 44px; padding: 5px 10px; }
.icon-button { width: 44px; min-height: 44px; padding: var(--space-xs); font-size: var(--text-xl); }
.text-button { min-height: 44px; border: 0; background: transparent; padding: var(--space-xs); font-size: var(--text-sm); color: var(--color-accent); text-decoration: underline; white-space: nowrap; }
select { min-width: 44px; max-width: 100%; min-height: 44px; padding: 5px 30px 5px 10px; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background-color: var(--color-paper); font-size: var(--text-md); }
.drawing-desk { display: grid; grid-template-columns: 226px minmax(0, 1fr) 270px; height: calc(100dvh - 106px); min-height: 650px; max-width: 1920px; margin: 0 auto; }
.sheet-sidebar { background: var(--color-paper); border-right: var(--rule-width) solid var(--color-rule); min-width: 0; overflow-y: auto; }
.sheet-index > summary { display: none; }
.sidebar-content { padding: var(--space-xl) var(--space-md); }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.sidebar-heading h2 { font-size: var(--text-base); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 1px 6px; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.filter-label { display: block; margin-bottom: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
#categoryFilter { width: 100%; margin-bottom: var(--space-lg); }
.sheet-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.sheet-item { display: flex; align-items: flex-start; gap: var(--space-sm); width: 100%; min-height: 54px; border: var(--rule-width) solid transparent; border-radius: var(--radius-sm); padding: var(--space-sm); text-align: left; color: var(--color-text); background: transparent; }
.sheet-item:hover { background: var(--color-background); }
.sheet-item[aria-current="true"] { background: var(--color-accent-soft); border-color: var(--color-accent-line); }
.sheet-index-number { width: 24px; flex: 0 0 24px; font-size: var(--text-md); color: var(--color-muted); font-variant-numeric: tabular-nums; line-height: 1.8; }
.sheet-item[aria-current="true"] .sheet-index-number { color: var(--color-accent); }
.sheet-item > span:last-child { min-width: 0; flex: 1; }
.sheet-item-title { display: block; font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
.sheet-item-category { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; }
.sidebar-footnote { border-top: var(--rule-width) solid var(--color-rule-soft); padding-top: var(--space-lg); margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-xs); }
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--space-lg); }
.view-toolbar { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-lg); }
.view-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; padding: 3px; gap: 2px; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); }
.segmented button { padding: 5px 10px; min-height: 44px; min-width: 44px; border: 0; border-radius: 3px; background: transparent; font-size: var(--text-md); white-space: nowrap; }
.segmented button:hover { background: var(--color-background); }
.segmented button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-paper); }
.sheet-control { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.sheet-control label { color: var(--color-muted); font-size: var(--text-sm); }
.sheet-control select { flex: 1; width: 0; }
.details-trigger { display: none; }
.drawing-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.drawing-title { display: flex; align-items: baseline; gap: var(--space-sm); min-width: 0; }
.drawing-title h2 { font-size: var(--text-base); font-weight: 600; }
.sheet-number { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.mode-label { font-size: var(--text-xs); white-space: nowrap; color: var(--color-muted); padding-top: 3px; }
.accuracy-note, .source-note { font-size: var(--text-xs); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); border-radius: var(--radius-sm); }
.accuracy-note { color: var(--color-warning); background: var(--color-warning-soft); border: var(--rule-width) solid var(--color-warning-rule); }
.source-note { color: var(--color-muted); padding-left: 0; padding-right: 0; }
.drawing-shell { position: relative; flex: 1; min-height: 250px; border: var(--rule-width) solid var(--color-rule); background: var(--color-canvas); border-radius: var(--radius-sm); overflow: clip; }
.drawing-shell[data-mode="cad"] { background: var(--color-paper); }
.drawing-area { position: absolute; inset: 0; touch-action: none; cursor: grab; overflow: clip; user-select: none; -webkit-user-select: none; }
.drawing-area[data-interaction="pan"], .drawing-area[data-interaction="pinch"] { cursor: grabbing; }
.drawing-area[data-measuring="true"] { cursor: crosshair; }
.drawing-area:focus-visible { outline-offset: -4px; }
#drawingSvg { display: block; width: 100%; height: 100%; }
.drawing-paper { fill: var(--color-paper); }
.cad-entities [data-layer] { fill: none; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.cad-entities [data-layer="walls"] { stroke: var(--color-walls); stroke-width: 1.7; }
.cad-entities [data-layer="doors"] { stroke: var(--color-doors); stroke-width: 1.4; }
.cad-entities [data-layer="windows"] { stroke: var(--color-windows); stroke-width: 1.8; }
.cad-entities [data-layer="stairs"] { stroke: var(--color-stairs); stroke-width: 1.3; }
.cad-entities [data-layer="columns"] { stroke: var(--color-columns); stroke-width: 1.5; }
.cad-grid line { stroke: var(--color-grid-soft); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.cad-grid text { fill: var(--color-grid); font-family: var(--font-data); font-size: 12px; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--color-label-halo); stroke-width: 4px; stroke-linejoin: round; }
.room-hotspots [data-room] { fill: transparent; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.room-hotspots [data-room]:hover { fill: var(--color-room-hover); stroke: var(--color-accent-line); }
.room-hotspots [data-room][data-selected="true"] { fill: var(--color-selected-room); stroke: var(--color-accent); }
.room-hotspots [data-room]:focus-visible { outline: none; fill: var(--color-selected-room); stroke: var(--color-accent); stroke-width: 3; }
.room-label { fill: var(--color-text); font-family: var(--font-body); font-size: 13px; text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: var(--color-label-halo); stroke-width: 4px; stroke-linejoin: round; }
.drawing-area[data-mode="source"] .room-label { display: none; }
.drawing-area[data-measuring="true"] .room-hotspots { pointer-events: none; }
.measure-cursor { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); fill: var(--color-paper); stroke: var(--color-accent); stroke-width: 2; pointer-events: none; }
.drawing-area[data-mode="compare"] .cad-entities [data-layer="walls"] { stroke: var(--color-accent); stroke-width: 2; }
.drawing-area[data-mode="compare"] .drawing-paper { fill: var(--color-paper); }
.measure-drawing line { stroke: var(--color-accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 5 3; }
.measure-drawing circle { fill: var(--color-paper); stroke: var(--color-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.measure-panel { position: absolute; bottom: var(--space-md); left: var(--space-md); right: var(--space-md); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-sm); border: var(--rule-width) solid var(--color-accent-line); border-radius: var(--radius-sm); background: var(--color-paper); padding: var(--space-sm) var(--space-md); pointer-events: auto; }
.measure-panel strong { font-size: var(--text-md); color: var(--color-accent); }
.measure-panel span { grid-row: 2; font-size: var(--text-xs); color: var(--color-muted); }
.measure-panel button { grid-column: 2; grid-row: 1 / 3; }
.canvas-state { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); background: var(--color-canvas); padding: var(--space-xl); text-align: center; }
.canvas-state p { max-width: 38ch; font-size: var(--text-md); color: var(--color-muted); }
.error-state h3 { color: var(--color-danger); }
.loading-mark { width: 40px; height: 4px; background: var(--color-accent); border-radius: var(--radius-sm); }
.image-error { position: absolute; left: var(--space-md); right: var(--space-md); top: var(--space-md); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: var(--rule-width) solid var(--color-warning-rule); background: var(--color-warning-soft); font-size: var(--text-sm); }
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); }
.zoom-controls, .drawing-tools { display: flex; align-items: center; gap: var(--space-xs); }
.drawing-tools { position: relative; }
.zoom-controls output { min-width: 50px; text-align: center; color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.zoom-controls .icon-button { background: transparent; border-color: transparent; }
.zoom-controls .icon-button:hover { background: var(--color-paper); border-color: var(--color-rule); }
.drawing-help { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.layers-menu { position: static; }
.layers-menu summary { list-style: none; cursor: pointer; }
.layers-menu summary::-webkit-details-marker { display: none; }
.layers-menu[open] summary { background: var(--color-accent-soft); border-color: var(--color-accent-line); }
.layers-popover { position: absolute; z-index: 5; bottom: calc(100% + 8px); right: 0; width: 225px; padding: var(--space-md); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: 0 5px 18px var(--color-shadow); }
.popover-title { display: block; color: var(--color-muted); font-size: var(--text-xs); margin-bottom: var(--space-sm); }
.layers-popover label { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; font-size: var(--text-md); cursor: pointer; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--color-accent); }
.layer-swatch { width: 16px; height: 2px; }
.layer-swatch.walls { background: var(--color-walls); }
.layer-swatch.doors { background: var(--color-doors); }
.layer-swatch.windows { background: var(--color-windows); }
.layer-swatch.stairs { background: var(--color-stairs); }
.layer-swatch.columns { background: var(--color-columns); }
.layers-popover p { font-size: var(--text-xs); color: var(--color-muted); border-top: var(--rule-width) solid var(--color-rule-soft); padding-top: var(--space-sm); margin-top: var(--space-sm); }
.detail-panel { min-width: 0; overflow-y: auto; background: var(--color-paper); border-left: var(--rule-width) solid var(--color-rule); padding: var(--space-xl) var(--space-lg); }
.detail-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.details-close { display: none; }
.detail-panel > h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.detail-description { font-size: var(--text-sm); color: var(--color-muted); }
.detail-notes p { font-size: var(--text-sm); margin-top: var(--space-sm); }
.detail-section { border-top: var(--rule-width) solid var(--color-rule-soft); margin-top: var(--space-lg); padding-top: var(--space-lg); }
.detail-section h3 { margin-bottom: var(--space-sm); }
.muted { color: var(--color-muted); font-size: var(--text-xs); }
.dimension-explanation { margin-bottom: var(--space-sm); }
.dimension-list, .issue-list { margin: 0; padding-left: var(--space-lg); font-size: var(--text-sm); }
.dimension-list { list-style: none; padding-left: 0; }
.dimension-list li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 5px 0; border-bottom: var(--rule-width) solid var(--color-rule-soft); }
.dimension-list li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.issue-list li + li { margin-top: var(--space-sm); }
.issue-list { color: var(--color-warning); }
.related-sheets { display: flex; flex-direction: column; gap: var(--space-xs); }
.related-sheet { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 44px; padding: 6px var(--space-sm); font-size: var(--text-sm); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); text-align: left; }
.related-sheet:hover { border-color: var(--color-accent-line); background: var(--color-accent-soft); }
.related-sheet .sheet-index-number { width: 20px; flex-basis: 20px; }
.download-link { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; font-size: var(--text-sm); overflow-wrap: anywhere; }
.download-link .icon { width: 17px; height: 17px; flex-basis: 17px; }
.file-type { margin-left: auto; color: var(--color-muted); font-size: var(--text-xs); }
.source-provenance { border-top: var(--rule-width) solid var(--color-rule-soft); margin-top: var(--space-lg); padding-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
.source-provenance summary { min-height: 44px; cursor: pointer; }
.source-provenance dl { margin: var(--space-md) 0; }
.source-provenance dt { margin-top: var(--space-sm); }
.source-provenance dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.source-hash { font-variant-numeric: tabular-nums; }
.site-footer { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-xl); border-top: var(--rule-width) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); background: var(--color-paper); }
.detail-backdrop { position: fixed; inset: 0; background: var(--color-backdrop); z-index: 20; }
@media (min-width: 1600px) { .drawing-desk { grid-template-columns: 260px minmax(0, 1fr) 310px; } .view-toolbar { flex-direction: row; justify-content: space-between; } .sheet-control { flex: 1; max-width: 350px; } }
@media (max-width: 1179px) {
  .drawing-desk { grid-template-columns: 210px minmax(0, 1fr); }
  .details-trigger, .details-close { display: inline-flex; }
  .detail-panel { display: none; position: fixed; z-index: 21; top: 0; bottom: 0; right: 0; width: min(360px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-lg); box-shadow: -8px 0 28px var(--color-shadow); }
  body[data-details-open="true"] .detail-panel { display: block; }
  body[data-details-open="true"] { overflow-y: hidden; }
}
@media (max-width: 767px) {
  .site-header { min-height: 58px; padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
  .header-identity { gap: var(--space-sm); }
  .site-header h1 { font-size: var(--text-base); gap: var(--space-xs); }
  .site-header h1 .icon { display: none; }
  .private-label { display: none; }
  #archiveDownload { min-height: 44px; font-size: var(--text-xs); padding: 5px var(--space-sm); gap: var(--space-xs); }
  #archiveDownload .icon { width: 16px; height: 16px; flex-basis: 16px; }
  .drawing-desk { display: flex; flex-direction: column; height: auto; min-height: calc(100dvh - 98px); }
  .sheet-sidebar { border-right: 0; border-bottom: var(--rule-width) solid var(--color-rule); overflow-y: visible; }
  .sheet-index > summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); cursor: pointer; list-style: none; }
  .sheet-index > summary::-webkit-details-marker { display: none; }
  .sheet-index > summary::before { content: '+'; margin-right: var(--space-sm); font-size: var(--text-lg); }
  .sheet-index[open] > summary::before { content: '−'; }
  .sheet-index > summary .count { margin-left: auto; }
  .sidebar-content { padding: 0 var(--space-md) var(--space-md); max-height: 330px; overflow-y: auto; }
  .sidebar-heading { display: none; }
  .sheet-list { display: flex; flex-direction: column; }
  .sheet-item { min-height: 60px; padding: var(--space-sm) var(--space-xs); }
  .sheet-item-title { font-size: var(--text-xs); }
  .sheet-item-category { display: none; }
  .sidebar-footnote { margin-top: var(--space-md); padding-top: var(--space-md); }
  .workspace { padding: var(--space-md); }
  .view-toolbar { margin-bottom: var(--space-md); gap: var(--space-sm); }
  .view-controls { gap: var(--space-sm); }
  .segmented { padding: 2px; }
  .segmented button { font-size: var(--text-sm); padding: 4px 8px; min-height: 44px; }
  .sheet-control select { min-height: 44px; font-size: max(16px, var(--text-sm)); }
  #categoryFilter { font-size: max(16px, var(--text-md)); }
  .drawing-heading { gap: var(--space-sm); }
  .drawing-title h2 { font-size: var(--text-md); }
  .mode-label { font-size: var(--text-xs); }
  .accuracy-note { padding: 6px var(--space-sm); }
  .source-note { padding-top: 0; padding-bottom: 0; }
  .drawing-shell { min-height: 330px; height: 57dvh; flex: none; }
  .canvas-toolbar { gap: var(--space-xs); flex-wrap: wrap; }
  .drawing-tools { margin-left: auto; gap: var(--space-xs); }
  .zoom-controls { gap: 0; }
  .zoom-controls .icon-button { width: 44px; min-height: 44px; }
  .zoom-controls output { min-width: 42px; font-size: var(--text-xs); }
  .button-small { font-size: var(--text-xs); padding: 5px 7px; gap: var(--space-xs); }
  .button-small .icon { width: 17px; height: 17px; flex-basis: 17px; }
  .drawing-help { font-size: var(--text-xs); line-height: 1.65; }
  .layers-popover { right: 0; width: min(228px, calc(100vw - 24px)); }
  .site-footer { flex-direction: column; gap: 2px; padding: var(--space-sm) var(--space-md); }
  .detail-panel { width: min(360px, calc(100% - 16px)); }
  .measure-panel { left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); padding: var(--space-sm); }
}
@media (max-width: 359px) { .view-controls { gap: var(--space-xs); } .segmented button { font-size: var(--text-xs); padding: 4px 7px; } .canvas-toolbar { row-gap: var(--space-sm); } .drawing-tools { width: 100%; justify-content: flex-end; } .layers-popover { right: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }