/* ── Summary editor (inline in content editor) ───────────────── */

.fph-editor__summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.fph-editor__thumb {
    position: relative;
    display: inline-block;
    max-width: 400px;
    border-radius: 8px;
    overflow: hidden;
}

.fph-editor__thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.fph-editor__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #1b264f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
}

.fph-editor__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fph-editor__chip {
    display: inline-block;
    padding: 3px 10px;
    background: #f4f3f2;
    border-radius: 12px;
    font-size: 12px;
    color: #333;
}

.fph-editor__empty {
    text-align: center;
    padding: 24px;
    color: #999;
}

.fph-editor__empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

/* ── Dialog (full-screen editor) ─────────────────────────────── */

.fph-dialog__body {
    padding: 0 !important;
    overflow: hidden !important;
}

.fph-dialog__pick-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    gap: 16px;
    color: #666;
}

.fph-dialog__workspace {
    display: flex;
    height: calc(100vh - 130px);
    overflow: hidden;
}

.fph-dialog__canvas-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Toolbar */
.fph-dialog__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: #f4f3f2;
    border-bottom: 1px solid #e9e7e5;
    flex-shrink: 0;
}

.fph-dialog__toolbar-group {
    display: flex;
    gap: 4px;
}

.fph-dialog__tool-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d7d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    transition: background 0.15s, border-color 0.15s;
}

.fph-dialog__tool-btn:hover {
    background: #e9e7e5;
}

.fph-dialog__tool-btn.is-active {
    background: #1b264f;
    color: #fff;
    border-color: #1b264f;
}

.fph-dialog__tool-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.fph-dialog__toolbar-hint {
    font-size: 12px;
    color: #666;
    margin-left: auto;
}

/* Magnet threshold picker — sits next to the magnet toolbar button. */
.fph-dialog__threshold-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d8d7d5;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.fph-dialog__threshold-select:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Viewport & pan layer */
.fph-dialog__viewport {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    background: #e0ddd8;
    cursor: default;
}

.fph-dialog__pan-layer {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* No will-change here: it would promote this element to a GPU compositor
       layer, causing the SVG to be rasterized once at 1× and bitmap-stretched
       on every zoom — vectors would never re-render at the new scale. */
}

/* Container's width/height are set inline by JS to baseWidth*scale /
   baseHeight*scale. This makes zoom a *layout* change so the SVG repaints
   crisp at every zoom step (instead of being GPU-stretched). */
.fph-dialog__image-container {
    position: relative;
    display: inline-block;
    line-height: 0;
    /* The pan-layer is a flex container, so by default it would shrink
       us along the main (horizontal) axis whenever our specified width
       exceeds the viewport — squashing width while height stays at the
       full JS-computed value. Locking flex-shrink to 0 lets us overflow
       freely; the viewport has `overflow: hidden` and panning handles
       the rest. */
    flex-shrink: 0;
}

.fph-dialog__floor-image {
    /* Absolute-fill the container so the image and SVG overlay share an
       identical box. `object-fit: contain` would letterbox on any
       sub-pixel aspect drift at higher zoom levels, causing top-edge
       polygons to appear offset from the image as scale grows. The
       container is sized in JS to match the image's natural aspect, so
       stretching here is mathematically zero. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.fph-dialog__svg-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    shape-rendering: geometricPrecision;
    image-rendering: -webkit-optimize-contrast;
}

/* SVG elements
 *
 * `vector-effect: non-scaling-stroke` makes `stroke-width` interpret in
 * SCREEN pixels (not user-space units), so the values below are literal
 * pixel widths. Sub-pixel values (the previous 0.3-0.6) rendered as
 * invisible/hazy anti-aliased ghosts; 1.5-2px renders crisp at every zoom.
 *
 * Circle radii (`r`) on `.fph-dialog__vertex` and `.fph-dialog__close-target`
 * are set inline via JS (vertexR/closeR) so they stay constant in screen
 * pixels regardless of zoom — they cannot use non-scaling-stroke for that.
 */
.fph-dialog__polygon {
    pointer-events: auto;
    cursor: pointer;
    fill: rgba(27, 38, 79, 0.15);
    stroke: rgba(27, 38, 79, 0.6);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    transition: fill 0.15s;
    /* Kill the browser's default focus outline (the "rounded border" that
       wraps the polygon's bounding box on click). Selection state is
       conveyed via fill/stroke colour change below. */
    outline: none;
}

.fph-dialog__polygon:focus,
.fph-dialog__polygon:focus-visible {
    outline: none;
}

.fph-dialog__polygon:hover {
    fill: rgba(27, 38, 79, 0.3);
}

.fph-dialog__polygon.is-selected {
    fill: rgba(244, 119, 33, 0.3);
    stroke: #f47721;
    stroke-width: 2;
}

.fph-dialog__polygon.is-selected:hover {
    fill: rgba(244, 119, 33, 0.4);
}

.fph-dialog__vertex {
    pointer-events: auto;
    cursor: grab;
    fill: #fff;
    stroke: #f47721;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.fph-dialog__vertex:hover {
    fill: #f47721;
}

.fph-dialog__drawing-line {
    fill: none;
    stroke: #2b5df0;
    stroke-width: 2;
    stroke-dasharray: 6, 4;
    vector-effect: non-scaling-stroke;
}

.fph-dialog__drawing-preview {
    stroke: #2b5df0;
    stroke-width: 2;
    stroke-dasharray: 6, 4;
    vector-effect: non-scaling-stroke;
    opacity: 0.7;
}

.fph-dialog__close-target {
    pointer-events: auto;
    cursor: pointer;
    fill: #2b5df0;
    stroke: #fff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    opacity: 0.8;
}

.fph-dialog__close-target:hover {
    opacity: 1;
}

/* Hotspot chips row */
.fph-dialog__hotspot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: #f4f3f2;
    border-top: 1px solid #e9e7e5;
    flex-shrink: 0;
}

.fph-dialog__chip {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #d8d7d5;
    border-radius: 14px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.fph-dialog__chip:hover {
    background: #e9e7e5;
}

.fph-dialog__chip.is-active {
    background: #1b264f;
    color: #fff;
    border-color: #1b264f;
}

/* Metadata panel (right side) */
.fph-dialog__meta-panel {
    width: 320px;
    flex-shrink: 0;
    padding: 20px;
    overflow-y: auto;
    border-left: 1px solid #e9e7e5;
    background: #fff;
}

.fph-dialog__meta-panel--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    text-align: center;
}

.fph-dialog__meta-heading {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
}

.fph-dialog__meta-subheading {
    margin: 20px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fph-dialog__field {
    margin-bottom: 12px;
}

.fph-dialog__field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.fph-dialog__field input,
.fph-dialog__field textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d8d7d5;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
    font-family: inherit;
}

.fph-dialog__field input:focus,
.fph-dialog__field textarea:focus {
    outline: none;
    border-color: #2b5df0;
    box-shadow: 0 0 0 1px rgba(43, 93, 240, 0.15);
}

/* Spec rows */
.fph-dialog__spec-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}

.fph-dialog__spec-label {
    flex: 1 1 auto;
    padding: 5px 8px;
    border: 1px solid #d8d7d5;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.fph-dialog__spec-value {
    flex: 1 1 auto;
    padding: 5px 8px;
    border: 1px solid #d8d7d5;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.fph-dialog__spec-icon-btn {
    flex-shrink: 0;
    height: 26px;
    padding: 0 10px;
    border: 1px dashed #d8d7d5;
    border-radius: 4px;
    background: #fff;
    color: #666;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fph-dialog__spec-icon-btn.is-set {
    border-style: solid;
    border-color: #1b264f;
    color: #1b264f;
    font-weight: 600;
}

.fph-dialog__spec-icon-btn:hover {
    background: #f4f3f2;
}

.fph-dialog__spec-icon-clear {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.fph-dialog__spec-icon-clear:hover {
    color: #c00;
}

.fph-dialog__spec-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.fph-dialog__spec-remove:hover {
    background: #fee;
    color: #c00;
}