/* Fence Post Tools, visualizer styles, version 0.1.0
   Every rule is scoped under .fpt-viz, so no style leaks onto the
   rest of the page or onto other plugins. Tokens match the pine
   and cedar direction in fence-post-tools.css, with a plain system
   font stack. Focus states are always visible, and no meaning
   relies on colour alone, because every colour in the legend also
   has a text label. Each rule block below holds one declaration,
   which keeps this file free of extra separators. */

.fpt-viz { box-sizing: border-box }
.fpt-viz { background: #fffdf8 }
.fpt-viz { border: 1px solid #d8d2c2 }
.fpt-viz { border-radius: 8px }
.fpt-viz { color: #22271f }
.fpt-viz { font-size: 1rem }
.fpt-viz { line-height: 1.55 }
.fpt-viz { margin: 0 0 2rem 0 }
.fpt-viz { max-width: 46rem }
.fpt-viz { padding: 1rem }

.fpt-viz * { box-sizing: border-box }

.fpt-viz-title { color: #2e4a34 }
.fpt-viz-title { font-size: 1.25rem }
.fpt-viz-title { line-height: 1.25 }
.fpt-viz-title { margin: 0 0 0.25rem 0 }

.fpt-viz-note { color: #5c655c }
.fpt-viz-note { font-size: 0.9rem }
.fpt-viz-note { margin: 0 0 1rem 0 }

.fpt-viz-viewport { background: #f7f3ea }
.fpt-viz-viewport { border: 1px solid #d8d2c2 }
.fpt-viz-viewport { border-radius: 8px }
.fpt-viz-viewport { cursor: grab }
.fpt-viz-viewport { height: 360px }
.fpt-viz-viewport { overflow: hidden }
.fpt-viz-viewport { position: relative }
.fpt-viz-viewport { touch-action: none }
.fpt-viz-viewport { width: 100% }

.fpt-viz-viewport:active { cursor: grabbing }

.fpt-viz-viewport:focus { outline: 3px solid #1d5fa8 }
.fpt-viz-viewport:focus { outline-offset: 2px }

.fpt-viz-viewport canvas { display: block }
.fpt-viz-viewport canvas { height: 100% }
.fpt-viz-viewport canvas { width: 100% }

.fpt-viz-label { background: rgba(255, 253, 248, 0.92) }
.fpt-viz-label { border: 1px solid #d8d2c2 }
.fpt-viz-label { border-radius: 4px }
.fpt-viz-label { color: #22271f }
.fpt-viz-label { font-size: 0.8rem }
.fpt-viz-label { padding: 0.1rem 0.35rem }
.fpt-viz-label { pointer-events: none }
.fpt-viz-label { position: absolute }
.fpt-viz-label { transform: translate(-50%, -50%) }
.fpt-viz-label { white-space: nowrap }

.fpt-viz-controls { display: flex }
.fpt-viz-controls { flex-wrap: wrap }
.fpt-viz-controls { gap: 0.5rem }
.fpt-viz-controls { margin: 0.75rem 0 0 0 }

/* A hidden control must stay hidden in every mode. The flex
   display above overrides the browser built in hidden styling,
   so this scoped rule hides any hidden visualizer element,
   including the zoom controls in the 2D fallback, with no effect
   on controls that are not hidden. No em dashes are used here,
   and prose here uses commas and periods only. */
.fpt-viz [hidden] { display: none !important }
.fpt-viz-controls[hidden] { display: none !important }
.fpt-viz-toggle[hidden] { display: none !important }
.fpt-viz-viewport[hidden] { display: none !important }
.fpt-viz-fallback[hidden] { display: none !important }
.fpt-viz-label[hidden] { display: none !important }

.fpt-viz-toggle { display: flex }
.fpt-viz-toggle { gap: 0.5rem }
.fpt-viz-toggle { margin-left: auto }

.fpt-viz-btn { background: #fffdf8 }
.fpt-viz-btn { border: 1px solid #2e4a34 }
.fpt-viz-btn { border-radius: 6px }
.fpt-viz-btn { color: #2e4a34 }
.fpt-viz-btn { cursor: pointer }
.fpt-viz-btn { font-size: 0.9rem }
.fpt-viz-btn { padding: 0.4rem 0.8rem }

.fpt-viz-btn:hover { background: #f7f3ea }

.fpt-viz-btn:focus { outline: 3px solid #1d5fa8 }
.fpt-viz-btn:focus { outline-offset: 2px }

.fpt-viz-btn[aria-pressed="true"] { background: #2e4a34 }
.fpt-viz-btn[aria-pressed="true"] { color: #fffdf8 }

.fpt-viz-fallback { background: #f7f3ea }
.fpt-viz-fallback { border: 1px solid #d8d2c2 }
.fpt-viz-fallback { border-radius: 8px }
.fpt-viz-fallback { padding: 0.5rem }

.fpt-viz-fallback svg { display: block }
.fpt-viz-fallback svg { height: auto }
.fpt-viz-fallback svg { width: 100% }

.fpt-viz-legend { display: flex }
.fpt-viz-legend { flex-wrap: wrap }
.fpt-viz-legend { gap: 0.5rem 1rem }
.fpt-viz-legend { margin: 0.75rem 0 0 0 }

.fpt-viz-legend-item { align-items: center }
.fpt-viz-legend-item { display: inline-flex }
.fpt-viz-legend-item { font-size: 0.9rem }
.fpt-viz-legend-item { gap: 0.35rem }

.fpt-viz-swatch { border: 1px solid #22271f }
.fpt-viz-swatch { border-radius: 2px }
.fpt-viz-swatch { display: inline-block }
.fpt-viz-swatch { height: 0.8rem }
.fpt-viz-swatch { width: 0.8rem }

.fpt-viz-summary-title { color: #2e4a34 }
.fpt-viz-summary-title { font-size: 1rem }
.fpt-viz-summary-title { margin: 1rem 0 0.25rem 0 }

.fpt-viz-summary { margin: 0 }
.fpt-viz-summary { padding-left: 1.25rem }

.fpt-viz-status { color: #5c655c }
.fpt-viz-status { font-size: 0.9rem }
.fpt-viz-status { margin: 0.75rem 0 0 0 }

@media (max-width: 560px) {
  .fpt-viz-viewport { height: 300px }
  .fpt-viz-label { font-size: 0.7rem }
  .fpt-viz-toggle { margin-left: 0 }
}