.fs-page { max-width: 1180px; }
.fs-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.fs-input, .fs-result, .fs-properties { padding: clamp(1.25rem, 3vw, 2rem); }
.fs-page h2 { font-family: Georgia, serif; font-size: 1.65rem; margin-bottom: 1.4rem; color: #203b32; }
.fs-page h3 { font-size: 1.4rem; font-weight: 600; }
.fs-page h3 small { font: 500 .8rem system-ui; color: #596d62; }
.fs-input .field { margin-bottom: 1.4rem; }
.fs-input .input { background: #fffdf8; color: #203b32; border-color: #d5dcd3; }
.fs-input select.input { appearance: auto; padding-right: .75rem; }
.fs-muted, .fs-help, .fs-footnote, .fs-empty, .fs-page .help { color: #58665e; }
.fs-input .label span { font-weight: 400; font-size: .85rem; }
.fs-help { font-size: .9rem; line-height: 1.65; margin: 1rem 0 1.5rem; }
.fs-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: .75rem; }
.fs-primary { background: #284f40; color: #fff; border-color: #284f40; }
.fs-primary:hover { background: #18392c; color: #fff; }
.fs-compass { display: block; width: 100%; max-width: 440px; margin: 0 auto 1rem; }
.fs-sector { fill: #f2eee4; stroke: #cfc9bc; stroke-width: 1; }
.fs-facing { fill: #284f40; }
.fs-sitting { fill: #d4dfd6; stroke: #74897a; }
.fs-mountain { fill: #354d40; font: 18px Georgia, serif; }
.fs-facing-label { fill: white; font-weight: bold; }
.fs-cardinal { fill: #536358; font: 11px system-ui; }
.fs-axis { stroke: #517460; stroke-width: 2; }
.fs-arrow, .fs-back { fill: #284f40; }
.fs-center { fill: #fffdf8; stroke: #e4ded1; }
.fs-bearing { fill: #284f40; font: 32px Georgia, serif; }
.fs-caption { fill: #687568; font: 9px system-ui; letter-spacing: 1px; }
.fs-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid #e4ded1; padding-top: 1rem; }
.fs-readings small { color: #58665e; }
.fs-traditional { text-align: center; color: #284f40; font-size: 1.5rem; margin-top: 1rem; letter-spacing: .2em; }
.fs-caution { padding: 1rem; border-left: 3px solid #b08332; background: #fff6df; color: #70511d; margin-top: 1.25rem; font-size: .9rem; }
.fs-properties { margin-top: 1.5rem; }
.fs-property { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid #e4ded1; }
.fs-property > div { min-width: 0; overflow-wrap: anywhere; }
.fs-property a { font-weight: 600; color: #284f40; text-decoration: underline; }
.fs-property p { font-size: .85rem; color: #58665e; }
.fs-new { display: inline-block; margin-top: 1.5rem; }
.fs-footnote { margin: 1.5rem 0; font-size: .85rem; line-height: 1.7; }
.fs-empty { text-align: center; }
.fs-page .errorlist { color: #a32e25; font-size: .9rem; margin-top: .4rem; }
.fs-apartment-details { border: 1px solid #d5dcd3; padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; min-width: 0; }
.fs-apartment-details > .help { margin-bottom: 1rem; }
.fs-scope { padding: .85rem; background: #edf3ed; border-radius: 6px; margin-bottom: 1rem; color: #284f40; font-size: .9rem; }
.fs-extra-orientation { padding: .8rem 0; border-top: 1px solid #e4ded1; }
.fs-extra-orientation small { color: #58665e; }
.fs-location { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.fs-search-controls { display: flex; gap: .5rem; }
.fs-search-controls .input { min-width: 0; }
.fs-search-results { margin: .75rem 0; padding: 0; list-style: none; }
.fs-search-results button { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; padding: 1rem; background: #edf3ed; color: #284f40; border: 1px solid #a6bcae; border-radius: 8px; cursor: pointer; margin-top: .5rem; box-shadow: 0 2px 4px #284f4010; }
.fs-search-results button:hover, .fs-search-results button:focus-visible { background: #dceade; outline: 2px solid #284f40; outline-offset: 2px; }
.fs-result-copy { flex: 1; min-width: 0; }
.fs-result-copy strong, .fs-result-copy small { display: block; }
.fs-result-copy strong { font-size: 1.05rem; margin-bottom: .3rem; }
.fs-result-copy small { color: #526458; line-height: 1.5; }
.fs-result-action { flex: 0 0 auto; padding: .5rem .65rem; border-radius: 5px; background: #284f40; color: white; font-size: .85rem; font-weight: 600; }
#fs-search-status { margin-top: .8rem; font-weight: 600; }
.fs-search-selection { display: flex; align-items: center; gap: .75rem; justify-content: space-between; background: #edf3ed; border-left: 3px solid #284f40; padding: .85rem; margin: .75rem 0; color: #284f40; }
.fs-search-selection p { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
@media (max-width: 560px) { .fs-search-results button { align-items: flex-start; flex-direction: column; gap: .65rem; } .fs-search-selection { align-items: flex-start; flex-direction: column; } }
.fs-map { height: 340px; width: 100%; border: 1px solid #d5dcd3; border-radius: 6px; background: #e9eee6; }
.fs-coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.fs-coordinates .input { min-width: 0; }
.fs-pin { width: 70px; height: 100px; cursor: grab; }
.fs-pin svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 3px #fff); }
.fs-map .maplibregl-ctrl-attrib { font-size: 10px; }
.fs-map .maplibregl-canvas:focus-visible { outline: 3px solid #284f40; outline-offset: -3px; }
[hidden] { display: none !important; }
@media (max-width: 800px) { .fs-workspace { grid-template-columns: 1fr; } }