/* Kimon direction checker (#123) */
.container--kimon { max-width: 74rem; }
.kimon-panel { overflow: hidden; }
.kimon-heading, .kimon-result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.kimon-heading h2, .kimon-result-heading h2 { margin: 0; }
.kimon-step { margin: 0 0 .2rem; color: var(--color-primary, #146b63); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.kimon-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.kimon-form-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; align-items: stretch; }
.kimon-field, .kimon-modes { min-width: 0; padding: 1rem; border: 1px solid #cddbd7; border-radius: .8rem; background: #fff; }
.kimon-field { font-weight: 750; }
.kimon-input-wrap { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.kimon-input-wrap input { width: 100%; min-width: 0; }
.kimon-input-wrap span { font-size: 1.15rem; font-weight: 800; }
.kimon-modes { margin: 0; }
.kimon-modes legend { padding: 0 .2rem; font-weight: 750; }
.kimon-mode-options { display: grid; gap: .55rem; margin-top: .45rem; }
.kimon-mode-options label { display: flex; align-items: flex-start; gap: .5rem; padding: .7rem .8rem; border: 1px solid #cddbd7; border-radius: .65rem; cursor: pointer; }
.kimon-mode-options input { flex: 0 0 auto; margin-top: .2rem; }
.kimon-presets { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .45rem; margin: 1rem 0; }
.kimon-presets button { min-width: 0; padding: .55rem .25rem; border: 1px solid #b9ceca; border-radius: .6rem; background: #f7fbfa; color: #173f39; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
.kimon-presets button:hover { border-color: #146b63; background: #eaf5f2; }
.kimon-presets button:focus-visible { outline: .2rem solid #f0a51a; outline-offset: .15rem; }
.kimon-help, .kimon-notice, .kimon-boundary-note, .kimon-mode-difference { overflow-wrap: anywhere; }
.kimon-help { margin: .75rem 0; color: #4f625e; }
.kimon-magnetic-note { padding: .85rem 1rem; border-left: .25rem solid #397b72; border-radius: .35rem; background: #f0f7f5; }
.kimon-error { min-height: 1.5em; }
.kimon-calculate { margin-top: .3rem; }
.kimon-results { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #dce7e4; }
.kimon-result-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(17rem, .95fr); gap: 1.25rem; align-items: start; }
.kimon-summary { margin: 0 0 1rem; padding: 1rem; border: 1px solid #9fc6bb; border-radius: .8rem; background: #edf8f4; font-size: clamp(1.08rem, 2vw, 1.35rem); font-weight: 850; overflow-wrap: anywhere; }
.kimon-summary[data-status$="boundary"] { border-color: #d2aa32; background: #fff8da; }
.kimon-summary[data-status="outside"] { border-color: #cbd4d1; background: #f5f7f6; }
.kimon-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.kimon-facts div { min-width: 0; padding: .75rem; border-radius: .7rem; background: #f3f8f7; }
.kimon-facts dt { color: #526460; font-size: .78rem; }
.kimon-facts dd { margin: .25rem 0 0; font-weight: 800; overflow-wrap: anywhere; }
.kimon-nearest { padding: .75rem; border-left: .25rem solid #146b63; background: #f7faf9; font-weight: 750; }
.kimon-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.kimon-comparison article { min-width: 0; padding: .85rem; border: 1px solid #d4e1de; border-radius: .75rem; }
.kimon-comparison h3 { margin: 0 0 .5rem; font-size: .95rem; }
.kimon-comparison p { margin: 0; font-weight: 850; overflow-wrap: anywhere; }
.kimon-comparison p[data-status="kimon"], .kimon-comparison p[data-status="urakimon"] { color: #0b6a4b; }
.kimon-comparison p[data-status$="boundary"] { color: #866400; }
.kimon-mode-difference { padding: .8rem; border: 1px solid #d2aa32; border-radius: .7rem; background: #fff8da; }
.kimon-boundary-note { padding: .8rem; border-radius: .7rem; background: #f4f1fa; }
.kimon-compass-card { min-width: 0; margin: 0; padding: .8rem; border: 1px solid #d4e1de; border-radius: 1rem; background: #fbfdfc; }
.kimon-compass { display: block; width: min(100%, 27rem); height: auto; margin: 0 auto; }
.kimon-compass__grid { fill: none; stroke: #b7c8c4; stroke-width: 1; }
.kimon-compass__axis { stroke: #d5dfdc; stroke-width: 1; }
.kimon-compass__sector--kimon { fill: #dff3e9; stroke: #438f72; stroke-width: 1.2; }
.kimon-compass__sector--urakimon { fill: #f4e8d8; stroke: #a2713d; stroke-width: 1.2; }
.kimon-compass__direction { fill: #213b36; font-size: 13px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.kimon-compass__kind { fill: #173f39; font-size: 12px; font-weight: 900; text-anchor: middle; }
.kimon-compass__arrow { stroke: #c13e42; stroke-width: 4; stroke-linecap: round; }
.kimon-compass__arrow-head { fill: #c13e42; }
.kimon-compass__center { fill: #fff; stroke: #c13e42; stroke-width: 3; }
.kimon-compass-card figcaption { margin-top: .45rem; color: #526460; font-size: .85rem; text-align: center; }
.kimon-notice { margin-top: 1rem; padding: .9rem 1rem; border-radius: .75rem; background: #f5f7f6; }

@media (max-width: 760px) {
  .kimon-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kimon-result-layout { grid-template-columns: 1fr; }
  .kimon-compass-card { max-width: 31rem; margin-inline: auto; }
}

@media (max-width: 520px) {
  .kimon-heading, .kimon-result-heading { display: grid; }
  .kimon-actions { width: 100%; }
  .kimon-actions .button { flex: 1 1 8rem; }
  .kimon-form-grid, .kimon-facts, .kimon-comparison { grid-template-columns: 1fr; }
  .kimon-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kimon-field, .kimon-modes, .kimon-compass-card { padding: .7rem; }
}