/* Hallmark · engineering art tool · pre-emit critique: P5 H5 E5 S5 R5 V4 */
.art-panel[hidden],.art-panel [hidden] { display: none !important; }
.art-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin: var(--space-xl) 0 var(--space-lg); }
.art-intro > div > p { color: var(--color-accent); font-size: 12px; margin-bottom: var(--space-xs); }
.art-intro h2 { font-size: clamp(25px,3vw,34px); line-height: 1.25; letter-spacing: -.035em; }
.art-intro > p { font-size: 13px; color: var(--color-muted); max-width: 26ch; line-height: 1.8; }
.art-workspace { display: grid; grid-template-columns: 292px minmax(0,1fr); gap: var(--space-lg); align-items: start; }
.art-controls,.art-result { min-width: 0; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: 20px; padding: var(--space-lg); }
.art-controls h3 { font-size: 18px; margin-bottom: var(--space-lg); }
.art-controls label { display: block; font-size: 12px; font-weight: 500; }
.art-field { margin-top: var(--space-md); }
.art-controls h3 + .art-field { margin-top: 0; }
.art-controls select,.art-controls input[type="text"] { display: block; width: 100%; min-width: 0; margin-top: var(--space-xs); background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); border-radius: 8px; padding: 11px 9px; font: 400 13px/1.5 var(--font-body); }
.art-controls select:focus-visible,.art-controls input:focus-visible,.art-export-bar button:focus-visible,.art-view-switch button:focus-visible,.art-reset:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.art-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-sm); }
.art-number { display: flex; align-items: center; min-width: 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); border-radius: 8px; margin-top: var(--space-xs); }
.art-number:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.art-number input { width: 100%; min-width: 0; padding: 10px 0 10px 10px; font: 500 15px/1.5 var(--font-body); border: 0; border-radius: inherit; outline: 0; background: var(--color-transparent); color: var(--color-ink); }
.art-number > span { font-size: 10px; color: var(--color-muted); padding: 0 var(--space-xs); }
.art-controls .art-check { display: flex; gap: var(--space-xs); align-items: center; font-weight: 400; font-size: 11px; line-height: 1.7; margin-block: var(--space-sm); }
.art-check input { accent-color: var(--color-link); flex-shrink: 0; width: 14px; height: 14px; }
.art-hint { font-size: 10px; color: var(--color-muted); line-height: 1.8; margin-top: var(--space-xs); }
.art-upload { margin-top: var(--space-sm); border: var(--rule-hair) dashed var(--color-rule); padding: var(--space-sm); border-radius: 8px; }
.art-upload input { display: block; width: 100%; min-width: 0; font-size: 11px; margin-top: var(--space-xs); color: var(--color-muted); }
.art-upload input::file-selector-button { border: 0; border-radius: 6px; padding: 7px 9px; background: var(--color-soft); color: var(--color-ink); font: inherit; margin-right: var(--space-xs); cursor: pointer; }
.art-upload p { font-size: 10px; color: var(--color-muted); line-height: 1.8; margin-top: var(--space-xs); overflow-wrap: anywhere; }
.art-advanced { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-lg); padding-top: var(--space-md); }
.art-advanced summary,.art-distribution summary { font-size: 12px; line-height: 1.7; cursor: pointer; padding-block: var(--space-xs); }
.art-reset { font-size: 11px; color: var(--color-link); padding: 12px 0 0; min-height: 40px; text-align: left; white-space: nowrap; }
.art-error { font-size: 11px; line-height: 1.8; padding: var(--space-sm); color: var(--color-accent); background: var(--color-accent-soft); border-radius: 8px; margin-top: var(--space-md); }
.art-result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.art-result-heading p { color: var(--color-muted); font-size: 12px; margin-bottom: var(--space-xs); }
.art-main-number { display: flex; gap: var(--space-xs); align-items: baseline; font-variant-numeric: tabular-nums; }
.art-main-number output { font-size: clamp(38px,4.5vw,58px); line-height: 1.2; font-weight: 600; letter-spacing: -.045em; min-width: 0; overflow-wrap: anywhere; }
.art-main-number > span { color: var(--color-muted); font-size: 17px; }
.art-hole-total { padding-top: var(--space-xs); text-align: right; min-width: 0; }
.art-hole-total strong { font-size: 24px; font-weight: 550; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.art-hole-total strong span { color: var(--color-muted); font-size: 11px; font-weight: 400; margin-left: 4px; }
.art-result-note { color: var(--color-muted); font-size: 11px; line-height: 1.8; margin-top: var(--space-md); min-height: 20px; }
.art-import-notice { padding: 16px; margin-bottom: 24px; border: var(--rule-hair) solid var(--color-rule); border-left: 3px solid var(--color-link); border-radius: 0 10px 10px 0; background: var(--color-paper); scroll-margin-top: 110px; }
.art-import-notice h3 { font-size: 17px; line-height: 1.5; margin-top: 4px; }
.art-import-notice p { color: var(--color-muted); font-size: 11px; line-height: 1.9; margin-top: 7px; overflow-wrap: anywhere; }
.art-import-notice .art-import-eyebrow { color: var(--color-link); font-size: 10px; margin-top: 0; }
.art-import-notice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.art-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-lg); }
.art-preview-toolbar h3 { font-size: 13px; }
.art-view-switch { display: flex; padding: 3px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.art-view-switch button { font-size: 10px; border-radius: var(--radius-pill); padding: 7px 11px; min-height: 30px; white-space: nowrap; }
.art-view-switch button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-dark); }
.art-view-switch button:hover { opacity: .8; }
.art-preview { margin-top: var(--space-sm); }
.art-preview canvas { width: 100%; height: 420px; display: block; border-radius: 8px; background: var(--color-paper); }
.art-preview figcaption { text-align: center; font-size: 10px; color: var(--color-muted); line-height: 1.8; margin-top: var(--space-xs); min-height: 18px; }
.art-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-lg) var(--space-md); padding-top: var(--space-lg); margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.art-stat-grid div { min-width: 0; }
.art-stat-grid dt { color: var(--color-muted); font-size: 10px; }
.art-stat-grid dd { margin: var(--space-xs) 0 0; font-size: 20px; line-height: 1.3; font-weight: 550; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.art-stat-grid dd > span { font-size: 10px; color: var(--color-muted); font-weight: 400; margin-left: 4px; }
.art-target-result { color: var(--color-link); font-size: 12px; line-height: 1.9; padding: var(--space-sm); margin-top: var(--space-lg); background: var(--color-soft); border-radius: 8px; }
.art-target-result[data-reachable="false"] { color: var(--color-accent); background: var(--color-accent-soft); }
.art-warnings { margin: var(--space-md) 0 0; padding-left: var(--space-md); color: var(--color-accent); font-size: 11px; line-height: 1.9; }
.art-export-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-lg); padding-top: var(--space-lg); }
.art-export-bar > p { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.art-export-bar > div { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.art-export-bar button { min-height: 34px; padding: 7px 10px; border: var(--rule-hair) solid var(--color-rule); border-radius: 7px; font-size: 10px; white-space: nowrap; }
.art-export-bar button:hover:not(:disabled) { color: var(--color-link); border-color: var(--color-link); }
.art-export-bar button:disabled { opacity: .4; cursor: not-allowed; }
.art-export-bar button:active:not(:disabled),.art-reset:active { opacity: .6; }
.art-distribution { margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
.art-distribution summary { display: flex; align-items: center; justify-content: space-between; }
.art-distribution summary span { font-size: 10px; color: var(--color-muted); }
.art-table-wrap { width: 100%; overflow-x: auto; }
.art-distribution table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; font-variant-numeric: tabular-nums; }
.art-distribution caption { text-align: left; color: var(--color-muted); padding-block: var(--space-xs); font-size: 10px; }
.art-distribution th,.art-distribution td { border-bottom: var(--rule-hair) solid var(--color-rule); padding: 9px 0; }
.art-distribution th:last-child,.art-distribution td:last-child { text-align: right; }
.art-footnote { color: var(--color-muted); font-size: 11px; line-height: 1.9; margin-top: var(--space-lg); max-width: 92ch; }
@media (max-width:1050px) { .art-workspace { grid-template-columns: 260px minmax(0,1fr); gap: var(--space-md); } .art-controls,.art-result { padding: var(--space-md); } .art-export-bar { align-items: flex-start; flex-direction: column; } .art-preview-toolbar { align-items: flex-start; flex-direction: column; } }
@media (max-width:760px) { .art-intro { align-items: flex-start; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); } .art-intro > p { max-width: none; } .art-workspace { grid-template-columns: minmax(0,1fr); } .art-controls { padding: var(--space-lg); } .art-preview canvas { height: 340px; } .art-preview-toolbar { align-items: center; flex-direction: row; } }
@media (max-width:360px) { .art-controls,.art-result { padding: var(--space-md); } .art-preview-toolbar { align-items: flex-start; flex-direction: column; } .art-preview canvas { height: 300px; } .art-hole-total strong { font-size: 20px; } .art-main-number output { font-size: 36px; } .art-stat-grid { column-gap: var(--space-xs); } .art-stat-grid dd { font-size: 18px; } }

.art-delivery-note { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.art-delivery-note h3 { font-size: 16px; margin-bottom: var(--space-xs); }
.art-delivery-note p { color: var(--color-muted); font-size: 11px; line-height: 1.9; }
.art-plan-reference strong { color: var(--color-ink); font-family: var(--font-mono); font-size: 12px; margin-left: 6px; }
.art-plan-reference span { display: block; }
.art-export-bar { flex-wrap: wrap; margin-top: var(--space-md); padding-top: 0; border-top: 0; }
.art-export-bar > #art-preview-sheet { color: var(--color-link); }
.art-sheet-dialog { width: min(1100px,96vw); max-width: 96vw; max-height: 92vh; overflow: auto; padding: 24px; border: var(--rule-hair) solid var(--color-rule); border-radius: 16px; background: var(--color-surface); color: var(--color-ink); }
.art-sheet-dialog::backdrop { background: rgba(0,0,0,.4); }
.art-sheet-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.art-sheet-dialog-heading h2 { font-size: 21px; }
.art-sheet-dialog-heading p { font-size: 12px; font-family: var(--font-mono); margin-top: 5px; color: var(--color-muted); }
.art-sheet-dialog-heading button { padding: 10px 16px; border-radius: 8px; border: var(--rule-hair) solid var(--color-rule); }
.art-sheet-preview-help { font-size: 12px; color: var(--color-muted); line-height: 1.8; margin-block: 16px; }
.art-sheet-dialog > img { display: block; width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule); }
@media (max-width: 760px) { .art-sheet-dialog { padding: 14px; } }