/* Keep this tool close to its heading and make drawing the first mobile task. */
.irregular-area-page main {max-width:1180px;margin:auto}
.irregular-area-page .search-guide:first-child {padding:18px 0 8px!important;margin:0 auto!important}
.irregular-area-page .search-guide:first-child h1 {font-size:clamp(30px,4vw,48px)!important;margin:8px 0!important}
.irregular-area-page .search-guide:first-child p {margin:6px 0!important;max-width:800px}
.irregular-area-page #area {padding:20px!important;margin:12px auto 24px!important}
.irregular-area-page #area .section-artifacts,.irregular-area-page #area .area-heading {display:none}
.irregular-area-page #area .area-intro {margin:0 0 12px;font-size:15px}
.irregular-units {max-width:320px;margin-bottom:14px}
.irregular-units label {display:grid;grid-template-columns:1fr 150px;align-items:center;gap:12px}
.irregular-units select {margin:0;min-height:44px}
.irregular-units .hint:empty {display:none}
.irregular-area-page #area .area-sheet {order:-1}
.irregular-area-page #area .area-controls:empty {display:none}
.irregular-area-page #area .area-coordinates {min-height:140px}
.irregular-area-page #area .area-result {margin-top:12px;padding-top:12px}
.irregular-area-page .irregular-guide {line-height:1.65}
.irregular-examples {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.irregular-examples section {padding:18px;background:#fffaf0;border:1px solid #d5bd94;border-radius:4px}
.irregular-examples h3 {margin-top:0}
.irregular-examples pre {padding:12px;background:#edf5f3;border-radius:4px;color:#102445;overflow:auto;font-size:14px;line-height:1.5}
@media(max-width:800px) {
 .irregular-area-page main {padding:0 16px!important}
 .irregular-area-page #area {width:100%!important;padding:12px!important}
 .irregular-area-page .search-guide {width:100%!important}
 .irregular-area-page #area .area-layout {gap:18px}
 .irregular-area-page #area .area-sheet {padding:8px}
 .irregular-area-page #area .area-draw-tools {margin:8px 0}
 .irregular-area-page #area .area-draw-tools button {min-height:44px}
 .irregular-area-page #area .area-snap {margin:6px 0}
 .irregular-examples {grid-template-columns:1fr}
}
/* Keep the introductory card compact so the drawing is visible on arrival. */
.irregular-area-page .search-guide:first-child {padding:16px 20px!important}
.irregular-area-page .search-guide:first-child p {line-height:1.45}
@media(max-width:800px) {
 .irregular-area-page .search-guide:first-child {padding:12px!important}
 .irregular-area-page .search-guide:first-child p {font-size:16px!important}
 .irregular-area-page .search-guide:first-child .eyebrow {font-size:9px!important}
}

/* Brass outline, teal handles and navy labels, limited to this calculator. */
.irregular-area-page #area-diagram{background:#FBF7ED}
.irregular-area-page #area-diagram polygon,.irregular-area-page #area-diagram polyline{stroke:#9B7045;fill:#9b704520}
.irregular-area-page #area-diagram circle[data-corner]{fill:#006B79;stroke:#FBF7ED;stroke-width:2}
.irregular-area-page #area-diagram text{fill:#102A4A}
.irregular-area-page #area-diagram text:not([text-anchor]){paint-order:stroke;stroke:#FBF7ED;stroke-width:2}
.irregular-area-page #area-diagram line{stroke:#9B7045}
.irregular-area-page #area-diagram .boundary-selected-line{stroke:#006B79!important;stroke-width:4}
.boundary-panel{margin:12px 0;padding:12px;background:#FBF7ED;border:1px solid #b9aa8c;border-radius:4px;color:#102A4A}
.boundary-panel p{font-size:14px;line-height:1.45;margin:8px 0}
.boundary-panel #boundary-selected{font-weight:bold;overflow-wrap:anywhere}
.boundary-panel button{min-height:44px;padding:9px 10px;font-size:13px;white-space:normal}
.boundary-panel button[aria-pressed=true]{background:#006B79!important;color:white!important}
.boundary-panel button:focus-visible,.boundary-panel summary:focus-visible{outline:3px solid #006B79;outline-offset:3px}
.boundary-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px;max-height:300px;overflow:auto}
.boundary-panel summary{cursor:pointer;min-height:36px;line-height:1.5;padding:6px 0}
/* Drawing-led workspace; exact coordinates are an optional advanced task. */
.irregular-area-page #area .area-layout{grid-template-columns:minmax(0,3fr) minmax(230px,1fr);grid-template-areas:"drawing results" "boundaries results" "advanced advanced";gap:18px 22px;align-items:start}
.irregular-area-page #area .area-sheet{grid-area:drawing;order:0;min-width:0}
.irregular-area-page #area .area-results-panel{grid-area:results;padding:18px;border:1px solid #c5b38e;border-radius:4px;background:#FBF7ED;min-width:0}
.irregular-area-page #area #area-results{margin:0;padding:0;border:0!important}
.irregular-area-page #area #area-answer{font-size:clamp(32px,3vw,44px)!important}
.irregular-area-page #area #area-results>dl{display:block;margin:18px 0;font-size:16px}
.irregular-area-page #area #area-results>dl dd{text-align:left;font:bold 27px/1.4 Georgia,serif;color:#006B79;margin-top:4px}
.irregular-area-page #area .area-extra-results{font-size:14px;line-height:1.5;border-top:1px solid #cfbea3;padding-top:12px}
.irregular-area-page #area summary{cursor:pointer}
.irregular-area-page #area .area-boundary-host{grid-area:boundaries;min-width:0}
.irregular-area-page #area .area-boundary-host .boundary-panel{margin:0}
.irregular-area-page #area .area-advanced{grid-area:advanced;padding:15px 18px;border:1px solid #c5b38e;border-radius:4px;background:#fffaf0;min-width:0}
.irregular-area-page #area .area-advanced>summary{min-height:30px;font-weight:bold;color:#102A4A;line-height:1.5}
.irregular-area-page #area .area-advanced form{padding-top:15px}
.irregular-area-page #area .area-advanced .area-coordinates{min-height:140px;max-height:260px}
.irregular-area-page #area .area-sheet .area-draw-tools{margin:10px 0}
.irregular-area-page #area .area-sheet .area-status:empty{display:none}
.irregular-area-page #area .area-advanced summary:focus-visible,.irregular-area-page #area .area-extra-results summary:focus-visible{outline:3px solid #006B79;outline-offset:3px}
@media(max-width:800px){.irregular-area-page #area .area-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"drawing" "results" "boundaries" "advanced";gap:14px}.irregular-area-page #area .area-results-panel{padding:15px}.irregular-area-page #area .area-advanced{padding:12px}.irregular-area-page #area .area-sheet .area-detail{margin-top:12px}}
/* Exact lengths and visual examples share the existing coastal palette. */
.irregular-area-page #area-diagram .boundary-affected-line{stroke:#006B79!important;stroke-width:3;stroke-dasharray:5 3}
.boundary-panel #boundary-length-form{margin:12px 0;padding:12px;border-left:3px solid #006B79;background:#eef4f0}
.boundary-panel #boundary-length-form[hidden]{display:none}
.boundary-panel #boundary-length-form label{display:block;font-weight:bold;font-size:15px;margin-bottom:6px}
.boundary-length-actions{display:flex;gap:8px;max-width:380px}
.boundary-length-actions input{min-width:0;width:100%;box-sizing:border-box;padding:10px;border:1px solid #9B7045;background:#fff;color:#102A4A;font:inherit}
.boundary-panel input:focus-visible{outline:3px solid #006B79;outline-offset:3px}
.boundary-panel #boundary-edit-status:empty{display:none}
.irregular-examples svg{display:block;width:100%;height:auto;background:#FBF7ED;margin:12px 0}
.irregular-examples .example-result{font-size:15px;margin:8px 0}
.irregular-examples button{min-height:44px;margin:8px 0}
.irregular-examples details,.area-technical{margin-top:16px;line-height:1.6}
.irregular-examples summary,.area-technical>summary{cursor:pointer;min-height:44px;color:#102A4A;font-weight:bold}
.irregular-examples summary:focus-visible,.area-technical>summary:focus-visible{outline:3px solid #006B79;outline-offset:3px}
.irregular-examples .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.irregular-area-page #area-undo:disabled{opacity:.55;cursor:default}