/* ============================================================
   Floor plans & remediation pins
   Level cards, the pan/zoom viewer, status-coloured pins, the
   detail drawer, level switcher, Parts/Versions dropdowns,
   version reconcile (side-by-side) and the multi-view tile grid.
   ============================================================ */
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.level-card {
    display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: .15s;
}
.level-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,32,56,.12); }
.level-thumb {
    position: relative; height: 150px; background: #f4f1ea; display: grid; place-items: center; overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.level-thumb img { width: 100%; height: 100%; object-fit: cover; }
.level-thumb .file-ico { font-size: 22px; color: var(--ink); font-weight: 700; }
.level-thumb .level-num {
    position: absolute; top: 8px; left: 8px; background: var(--hd-navy); color: #fff; font-weight: 700;
    padding: 3px 8px; border-radius: 6px; font-size: 12px; line-height: 1.2; white-space: nowrap;
}
.level-b { padding: 12px 14px; }
.level-b .t { font-weight: 700; color: var(--ink); margin-bottom: 8px; }

/* ---- "Floor" drill-down gallery: a card per plan showing a rendered preview of the actual drawing ---- */
.fp-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fp-plan-card {
    display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    text-decoration: none; color: inherit; transition: .15s;
}
.fp-plan-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,32,56,.12); }
.fp-plan-preview {
    position: relative; height: 200px; background: #e9edf3; overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.fp-plan-preview .fp-rotate { position: absolute; top: 0; left: 0; }
.fp-plan-preview .fp-multi-img { display: block; width: 100%; height: auto; background: #fff; }
.fp-plan-spinner, .fp-plan-error {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 12px; color: var(--ink-soft); text-align: center; padding: 0 10px;
}
.fp-plan-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fp-plan-title { font-weight: 700; color: var(--ink); }
.fp-plan-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Viewer layout ---- */
.fp-toolbar { display: flex; gap: 8px; align-items: center; }
.fp-toolbar #addPinBtn.active { outline: 2px solid var(--ink); }
.fp-layout { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.fp-layout.no-panel { grid-template-columns: 1fr; }
.fp-stage-wrap {
    background: #e9edf3; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
    height: calc(100vh - 360px); min-height: 320px; max-height: 560px;
    cursor: grab; touch-action: none;
}
.fp-stage-wrap.is-panning { cursor: grabbing; }
.fp-stage-wrap.is-panning .fp-scale { transition: none; }
.fp-stage { position: relative; width: 100%; height: 100%; }
.fp-stage.is-adding, .fp-stage-wrap.is-adding { cursor: crosshair; }
.fp-scale { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: 100%; will-change: transform; }
/* Rotation wrapper: the drawing and its pins turn together here (whole 90° steps), so pins stay on their
   features. Pan/zoom stays on .fp-scale above; rotation is presentation-only (pin coordinates are untouched). */
.fp-rotate { position: relative; width: 100%; will-change: transform; }
.fp-media { display: block; width: 100%; height: auto; background: #fff; }
.fp-pins { position: absolute; inset: 0; pointer-events: none; }

/* ---- Pins ---- */
.fp-pin {
    position: absolute; pointer-events: auto; cursor: pointer;
    /* Counter-rotate by --fp-pin-rot (the negative of the drawing's rotation) about the pin tip so the marker
       stays upright and anchored to its point while the plan turns beneath it. */
    transform: translate(-50%, -100%) rotate(var(--fp-pin-rot, 0deg));
    transform-origin: 50% 100%;
    background: transparent; border: none; padding: 0; display: flex; flex-direction: column; align-items: center;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.fp-pin .fp-pin-dot { width: 30px; height: 30px; display: block; color: var(--hd-navy); }
.fp-pin .fp-pin-ref {
    font-size: 10px; font-weight: 700; color: #fff; background: var(--hd-navy); border-radius: 4px;
    padding: 1px 5px; margin-top: -4px; white-space: nowrap;
}
.fp-pin.sel .fp-pin-ref { background: var(--hd-gold); color: var(--ink); }
.fp-pin.sel { z-index: 5; }
/* Pin status colour key under the plan. Dots reuse the exact marker colours below. */
.fp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px;
    padding: 8px 12px; background: #f7f9fc; border: 1px solid var(--line, #e6e9ef); border-radius: 8px;
    font-size: 12.5px; color: #475467; }
.fp-legend-title { font-weight: 700; color: #344054; }
.fp-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.fp-legend-note { color: #98a2b3; }
.fp-legend-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.fp-legend-dot.st-draft { background: #94a3b8; }
.fp-legend-dot.st-open { background: var(--danger); }
.fp-legend-dot.st-progress { background: var(--warn); }
.fp-legend-dot.st-done { background: var(--ok); }
.fp-legend-dot.st-rejected { background: #b5392b; }
.fp-legend-dot.st-cancelled { background: #6a4fa3; }
.fp-legend-dot.st-info { background: #2563eb; }

/* Optional "Add decision detail" section in the drop-pin modal. */
.fp-pin-detail { margin-top: 2px; border-top: 1px solid var(--line, #e6e9ef); padding-top: 8px; }
.fp-pin-detail > summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 2px 0; list-style: revert; }
.fp-pin-detail[open] > summary { margin-bottom: 8px; }

/* Draft = a placed marker with no decision record yet: muted slate, clearly not a live (red) issue. */
.fp-pin.st-draft .fp-pin-ref { background: #94a3b8; }
.fp-pin.st-open .fp-pin-ref { background: var(--danger); }
.fp-pin.st-progress .fp-pin-ref { background: var(--warn); }
.fp-pin.st-done .fp-pin-ref { background: var(--ok); }
.fp-pin.st-rejected .fp-pin-ref { background: #b5392b; }
.fp-pin.st-cancelled .fp-pin-ref { background: #6a4fa3; }
/* The marker itself takes the same status colour as its label (selected = gold). */
.fp-pin.sel .fp-pin-dot { color: var(--hd-gold); }
.fp-pin.st-draft .fp-pin-dot { color: #94a3b8; }
.fp-pin.st-open .fp-pin-dot { color: var(--danger); }
.fp-pin.st-progress .fp-pin-dot { color: var(--warn); }
.fp-pin.st-done .fp-pin-dot { color: var(--ok); }
.fp-pin.st-rejected .fp-pin-dot { color: #b5392b; }
.fp-pin.st-cancelled .fp-pin-dot { color: #6a4fa3; }
/* Information (document-holder) pins — a distinct blue, separate from the remediation status palette. */
.fp-pin.fp-pin-info .fp-pin-ref { background: #2563eb; }
.fp-pin.fp-pin-info .fp-pin-dot { color: #2563eb; }
.fp-pin.fp-pin-info.sel .fp-pin-ref { background: var(--hd-gold); color: var(--ink); }
.fp-pin.fp-pin-info.sel .fp-pin-dot { color: var(--hd-gold); }
/* Info badge in the pin panel head. */
.badge.st-info { background: #e0ebff; color: #1d4ed8; }

/* The single pin currently being repositioned (via the panel's "Move pin"): highlighted gold and grabbable,
   while every other pin stays fixed. */
.fp-pin.moving { z-index: 6; cursor: grab; }
.fp-pin.moving:active { cursor: grabbing; }
.fp-pin.moving .fp-pin-dot { color: var(--hd-gold); filter: drop-shadow(0 0 4px var(--hd-gold)); }
.fp-pin.moving .fp-pin-ref { background: var(--hd-gold); color: var(--ink); }

/* Action row inside a pin panel (e.g. the "Move pin" button). */
.fp-panel-actions { margin: 8px 0 4px; }

/* A pin shown on a past (read-only) version. */
.fp-pin.ro { opacity: .72; cursor: default; }

/* ---- Detail panel (slide-in drawer; the plan keeps full width) ---- */
.fp-panel-backdrop {
    position: fixed; inset: 0; background: rgba(16,32,56,.28); opacity: 0; visibility: hidden;
    transition: opacity .2s ease; z-index: 60;
}
.fp-panel-backdrop.open { opacity: 1; visibility: visible; }
.fp-panel {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 92vw);
    background: var(--card); border-left: 1px solid var(--line); box-shadow: -6px 0 24px rgba(16,32,56,.18);
    display: flex; flex-direction: column; z-index: 61;
    transform: translateX(100%); transition: transform .22s ease;
}
.fp-panel.open { transform: none; }
.fp-panel-empty { padding: 40px 24px; text-align: center; color: var(--ink-soft); }
.fp-panel-empty .big { font-size: 36px; margin-bottom: 10px; }
.fp-panel-head {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
    border-bottom: 1px solid var(--line); background: var(--hd-navy); color: #fff;
}
.fp-panel-head .ref { font-weight: 700; margin-right: 8px; }
.fp-panel-head .x { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }
.fp-panel-body { padding: 16px; overflow-y: auto; }
.fp-panel-body h3 { margin: 0 0 4px; color: var(--ink); }
.fp-panel-body .m { font-size: 13px; margin-bottom: 4px; }
.fp-status-form { display: flex; gap: 8px; align-items: center; margin: 14px 0; }
.fp-sec {
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--ink-soft);
    margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
}
.fp-upload { margin-top: 12px; }
.fp-upload .form-row { margin-bottom: 8px; }

/* Level stepper in the upload modal: − [ N ] + with a live "Level N" / "Ground" / "Basement N" preview. */
.fp-stepper { display: flex; align-items: center; gap: 8px; }
.fp-stepper input[type="number"] {
    width: 72px; text-align: center; padding: 6px 8px;
    border: 1px solid var(--line, #e6e9ef); border-radius: 8px;
}
.fp-stepper-preview { color: var(--ink-soft); font-weight: 600; }
[data-fp-new-level][hidden], [data-fp-existing][hidden] { display: none; }
.fp-dr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* Each decision record is a clickable card-button with an explicit call-to-action. */
.fp-dr-list a.fp-dr-row {
    display: flex; flex-direction: column; gap: 8px;
    text-decoration: none; color: var(--ink, #16243a);
    padding: 10px 12px;
    background: #fff; border: 1px solid var(--line, #e6e9ef); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 32, 56, .04);
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, transform .06s ease;
}
.fp-dr-list a.fp-dr-row:hover,
.fp-dr-list a.fp-dr-row:focus-visible {
    border-color: var(--hd-blue, #2a557f); background: #fbfdff;
    box-shadow: 0 3px 10px rgba(16, 32, 56, .10); outline: none;
}
.fp-dr-list a.fp-dr-row:active { transform: translateY(1px); }
.fp-dr-main { display: flex; align-items: center; gap: 8px; }
.fp-dr-list a.fp-dr-row .ref { color: var(--hd-blue, #2a557f); font-weight: 700; flex: none; }
.fp-dr-list a.fp-dr-row .fp-dr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-dr-list a.fp-dr-row .badge { flex: none; }
/* The CTA reads like a button label. */
.fp-dr-cta {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    font-size: 12.5px; font-weight: 700; color: var(--hd-blue, #2a557f);
}
.fp-dr-go { font-size: 16px; line-height: 1; transition: transform .12s ease; }
.fp-dr-list a.fp-dr-row:hover .fp-dr-go { transform: translateX(3px); }
/* auto-fill (not auto-fit): a lone photo keeps a proper thumbnail size instead of stretching full-width into a
   thin, unreadable letterbox; the empty tracks hold their place. Bumped from 90px so the caption has room. */
.gallery.sm { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.gallery.sm .thumb { height: 100px; position: relative; }

/* A photo thumbnail rendered as a <button> (opens the lightbox) must look identical to the <a> thumbnails. */
button.thumb { border: 0; padding: 0; width: 100%; font: inherit; color: inherit; cursor: pointer; }
.ev .thumb { position: relative; }
/* Zoom affordance, bottom-right of a photo thumb — hints it pops out. */
.thumb-zoom {
    position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 6px;
    display: grid; place-items: center; font-size: 13px; color: #fff; background: rgba(8,15,28,.55);
    opacity: 0; transition: opacity .12s;
}
.ev .thumb:hover .thumb-zoom, .ev .thumb:focus-visible .thumb-zoom { opacity: 1; }

/* ---------- Evidence lightbox (pop a photo out full-size, framed in a card with its caption) ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
    padding: 40px 28px; background: rgba(8,15,28,.88); opacity: 0; visibility: hidden; transition: opacity .18s;
}
.lightbox.open { opacity: 1; visibility: visible; }
/* The card: photo on top, caption in a padded footer — the whole thing floats on the dimmed backdrop. */
.lightbox-card {
    display: flex; flex-direction: column; width: min(92vw, 780px); max-height: 90vh;
    background: var(--card, #fff); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.lightbox-img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #0f1b2d; }
.lightbox-cap { padding: 15px 18px; }
.lightbox-cap .t { color: var(--ink); font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.lightbox-cap .d { color: var(--ink); font-size: 13.5px; line-height: 1.6; }
.lightbox-close {
    position: absolute; top: 14px; right: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.5); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(0,0,0,.72); }
/* Keep captions tidy under the small thumbnail: type on one line, description clamped to two (full text on the
   title tooltip, whole image via the thumb) so a long caption can't blow the tile height out. */
.gallery.sm .ev-b .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery.sm .ev-b .d {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.4;
}
.badge360 {
    position: absolute; top: 4px; right: 4px; background: #8e44ad; color: #fff; font-size: 10px;
    font-weight: 700; border-radius: 4px; padding: 1px 4px;
}
.thread.tight .tl-item { padding-bottom: 10px; }
@media (max-width: 1000px) { .fp-switcher-tools { margin-left: 0; } }

/* ---- Floor switcher (cycle levels) ---- */
.fp-workspace { margin-bottom: 8px; }
.fp-switcher {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
    box-shadow: var(--shadow);
}
/* Level stepper: [▲▼ ◀ ▶]  FP-001 Ground — Ward E. One arrow cluster, then the plan name alongside it. */
/* The level stepper sits at a fixed left position (flex:none) so it never shifts as the toolbar width
   changes between levels (Parts/Versions dropdowns appear on some levels but not others) — and so it can't
   collide with the right-hand tools. With the arrows grouped ahead of the name, the name can grow to the
   right without ever moving a control the user is aiming at. */
.fp-level-nav { display: flex; align-items: center; gap: 14px; flex: none; }
/* D-pad: ◀ [▲/▼] ▶. A tight gap INSIDE the cluster (vs 14px out to the name) so the four arrows read as one
   control, and the flanks are centred against the taller stacked pair to keep the cross symmetrical. */
.fp-nav-arrows { display: flex; align-items: center; gap: 4px; flex: none; }
/* All four D-pad keys share this footprint. The icons are 1em, so font-size sizes the glyph with the key. */
.fp-step {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    background: var(--card); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft);
    font-size: 11px; cursor: pointer; transition: .12s; flex: none;
}
.fp-step:hover { border-color: var(--ink-soft); color: var(--ink); }

/* Storey jump (▲ ▼): the centre column of the D-pad. Identical footprint and radius to the flanking ◀ ▶ so
   all four keys are one size. Disabled — not hidden — at the top and bottom floor: the control keeps its
   place instead of the row reflowing as you change floor. */
.fp-floor-nav { display: flex; flex-direction: column; gap: 3px; flex: none; }
.fp-floor-step {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    background: var(--card); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft);
    font-size: 11px; cursor: pointer; transition: .12s; padding: 0;
}
.fp-floor-step:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); }
.fp-floor-step:disabled { opacity: .35; cursor: default; }
.fp-level-display {
    display: inline-flex; align-items: center; justify-content: flex-start;
    /* Grow to fit the whole plan name (no mid-name truncation that reads like a different plan); the max only
       ellipsises pathologically long ones. No min-width any more: the name sits AFTER the arrows rather than
       between them, so short names no longer need padding out to hold the controls steady — reserving that
       space would only leave a gap before the right-hand tools. */
    max-width: 560px; overflow: hidden;
}
.fp-level-name {
    font-size: 17px; font-weight: 650; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-level-input {
    font-size: 16px; font-weight: 600; text-align: center; padding: 4px 8px;
    border: 1px solid var(--ink); border-radius: 8px; width: 340px; max-width: 60vw;
}
/* The canonical "Level N —" shown locked (non-editable) before the rename input on a level's main plan. */
.fp-level-lock { font-size: 16px; font-weight: 650; color: var(--ink-soft); white-space: nowrap; }
.fp-switcher-tools { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* ---- Toolbar dropdowns (Parts / Versions) ---- */
.fp-dd { position: relative; }
.fp-dd-btn { display: inline-flex; align-items: center; gap: 6px; }
.fp-dd-caret { opacity: .55; font-size: 11px; }
.fp-dd-menu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; max-width: 380px; z-index: 60;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
    padding: 6px; display: none;
}
.fp-dd.open .fp-dd-menu { display: block; }
.fp-dd-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
    background: transparent; border: none; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 500;
    color: var(--ink); cursor: pointer;
}
.fp-dd-item:hover { background: var(--bg); }
.fp-dd-item.active { background: var(--hd-blue-soft); font-weight: 700; }
/* Wrap long plan names onto a second line rather than clipping them — the dropdown is where the user
   confirms which plan they're switching to, so the full name must be readable. */
.fp-dd-text { white-space: normal; overflow-wrap: anywhere; }
.fp-dd-count {
    flex: none; font-size: 11px; font-weight: 700; color: var(--ink-soft); background: rgba(0,0,0,.08);
    border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center;
}
.fp-dd-divider { height: 1px; background: var(--line); margin: 6px 4px; }
.vt-head { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.vt-title { font-size: 14.5px; }
.vt-range { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---- Version reconcile (side-by-side compare) ---- */
.fp-reconcile { margin-top: 8px; }
.recon-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
    box-shadow: var(--shadow);
}
.recon-spacer { flex: 1; }
.recon-status { font-size: 12.5px; color: var(--ink-soft); margin-right: 6px; }
#lockSync.active { background: #fff; color: var(--ink); border-color: var(--ink); }
.recon-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .recon-stages { grid-template-columns: 1fr; } }
.recon-pane { display: flex; flex-direction: column; min-width: 0; }
.recon-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 13px; color: var(--ink-soft); padding: 0 2px 6px;
}
.recon-wrap {
    background: #e9edf3; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
    height: calc(100vh - 320px); min-height: 380px;
    cursor: grab; touch-action: none;
}
.recon-wrap.is-panning { cursor: grabbing; }
.recon-wrap.is-panning .recon-scale { transition: none; }
.recon-stage { position: relative; width: 100%; height: 100%; }
.recon-scale { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: 100%; will-change: transform; }
.recon-img { display: block; width: 100%; height: auto; background: #fff; }
.recon-pins { position: absolute; inset: 0; pointer-events: none; }

/* ---- Multi-view: all parts of a level tiled together ---- */
.fp-multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.fp-multi-tile {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
}
.fp-multi-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
    padding: 8px 12px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px;
}
.fp-multi-head:hover { background: var(--bg); }
.fp-multi-name { color: var(--ink); }
.fp-multi-count {
    font-size: 11px; font-weight: 700; color: var(--ink-soft); background: rgba(0,0,0,.06);
    border-radius: 999px; padding: 1px 8px;
}
.fp-multi-body { position: relative; background: #e9edf3; }
.fp-multi-img { display: block; width: 100%; height: auto; background: #fff; }
.fp-multi-pins { position: absolute; inset: 0; pointer-events: none; }
.fp-multi-pins .fp-pin .fp-pin-dot { width: 22px; height: 22px; }
.fp-multi-pins .fp-pin .fp-pin-ref { font-size: 9px; padding: 0 4px; }
.fp-media-mount { display: block; width: 100%; min-height: 120px; }
.fp-media-mount img, .fp-media-mount canvas { display: block; width: 100%; height: auto; background: #fff; }

/* ---- Information requests (RFI / IRS) ---- */
.fp-sec-link { float: right; font-weight: 600; font-size: 12px; color: var(--hd-navy); text-decoration: none; }
.fp-sec-link:hover { text-decoration: underline; }

/* RFI and IRS are shown as separate groups; the heading carries the kind badge + full name. */
.ir-group + .ir-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ir-group-h { display: flex; align-items: center; gap: 7px; }
.ir-group-name { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
/* "See more" link into the full register when an instrument has more rows than the panel shows. */
.ir-more { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--hd-navy); text-decoration: none; }
.ir-more:hover { text-decoration: underline; }
.ir-more .svg-icon { width: 15px; height: 15px; }
.ir-list { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ir-row {
    width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left;
    padding: 8px 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.ir-row:hover { border-color: var(--hd-navy); }
.ir-subject { flex: 1 1 120px; min-width: 0; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-due { font-size: 11px; color: var(--ink-soft); }
.ir-kind {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #fff;
    padding: 1px 6px; border-radius: 4px;
}
.ir-kind-rfi { background: var(--hd-navy); }
.ir-kind-irs { background: var(--hd-gold); color: var(--ink); }
.ir-kind-inf { background: #2563eb; }   /* matches the information-pin blue */

/* An INF (information-pin) row in the register links to the pin, not a thread — show it as clickable. */
.ir-register-table tr[data-ir-nav] { cursor: pointer; }

/* Filters + register on one row, with a divider line beneath, then the RFI/IRS groups. */
.ir-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.ir-toolbar .ir-chips { margin: 0; }
.ir-register-link { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--hd-navy);
    text-decoration: none; white-space: nowrap; }
.ir-register-link:hover { text-decoration: underline; }

/* Per-pin section quick filters (client-side chips over the priority-sorted list). */
.ir-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.ir-chip {
    font: inherit; font-size: 11.5px; line-height: 1; padding: 4px 10px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-soft);
}
.ir-chip:hover { border-color: var(--hd-navy); }
.ir-chip.active { background: var(--hd-navy); color: #fff; border-color: transparent; }

/* The raise form now opens in a modal (see _InformationRequestsSection); this is just the trigger button. */
.ir-raise-btn { margin-top: 8px; align-self: flex-start; }
/* In the decision-page Information-requests card (which stretches to match its neighbour), pin the Raise
   button to the bottom-left so the empty space sits above it, not below. */
.ir-card { display: flex; flex-direction: column; }
.ir-card > .card-b { flex: 1; display: flex; flex-direction: column; }
.ir-card .ir-raise-btn { margin-top: auto; }
/* The RFI/IRS lists scroll inside a capped region (roughly 7 rows) rather than growing the card without
   bound — the filter chips stay above and the Raise button stays visible below. */
.ir-scroll { max-height: 340px; overflow-y: auto; min-height: 0; }

/* Thread modal */
.ir-thread-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.ir-thread-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ir-thread-subject { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.ir-thread-meta { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.ir-messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ir-msg { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
/* Email-style attribution: the contractor side reads from the left, the thread holder is tinted + inset. */
.ir-msg-contractor { border-left: 3px solid var(--hd-navy); }
.ir-msg-holder { border-left: 3px solid var(--hd-gold); background: #fffdf6; margin-left: 18px; }
.ir-msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ir-msg-org { color: var(--ink-soft); font-size: 12px; }
.ir-msg-time { margin-left: auto; color: var(--ink-soft); font-size: 11px; }
.ir-msg-body { margin-top: 6px; white-space: pre-wrap; color: var(--ink); }
.ir-msg-files { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ir-file {
    display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 3px 8px;
    background: #eef2f8; border: 1px solid var(--line); border-radius: 6px; font-size: 12px;
    color: var(--hd-navy); text-decoration: none;
}
.ir-file:hover { border-color: var(--hd-navy); }
.ir-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ir-composer { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.ir-composer textarea { width: 100%; resize: vertical; }
.ir-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ir-thread-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Register page */
.ir-register-table { width: 100%; border-collapse: collapse; }
.ir-register-table th, .ir-register-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.ir-register-table tbody tr { cursor: pointer; }
.ir-register-table tbody tr:hover { background: #f7f9fc; }
.ir-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.ir-filters .form-row.grow { flex: 1 1 220px; }
/* Search box + its button sit on one control row (under the label), so they share a baseline with the selects. */
.ir-filters .filter-search { display: flex; gap: 8px; align-items: stretch; }
.ir-filters .filter-search input { flex: 1 1 auto; }
.ir-filters .filter-search .btn { flex: 0 0 auto; }

/* Remediation register — reuses .ir-register-table, but rows aren't whole-row links (each cell links itself)
   and the Status cell carries an inline auto-submitting <select> that must stay compact. */
.rmd-register tbody tr { cursor: default; }
.rmd-register .rmd-status, .rmd-register .rmd-raise { margin: 0; }
.rmd-register .rmd-status select.form-control { width: auto; min-width: 132px; padding: 4px 8px; font-size: 12px; }
.rmd-register td .muted { color: var(--ink-soft); }

/* "RFI / IRS" column in the decision register: compact pills, kept on one line, linking to the pin's register. */
.ir-count { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; text-decoration: none; }
.ir-count:hover { text-decoration: none; }
.ir-count .pill { font-size: 11px; }

/* Banner shown when the RFI/IRS register is scoped to a single pin (opened from a decision-register row). */
.filter-banner {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 9px 13px; margin-bottom: 14px; font-size: 13px;
    background: #f2f6fc; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft);
}

/* One-line acronym key under a table (RMD / RFI / IRS), so the codes never need explaining out loud. */
.tbl-legend { margin-top: 10px; font-size: 12px; text-align: center; }

/* ---- On-brand date picker (replaces the native date control) ---- */
.gt-date { position: relative; }
.gt-date-ico {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    display: inline-flex; color: var(--hd-navy); pointer-events: none; opacity: .8;
}
.gt-date-ico svg, .gt-date-ico .svg-icon { width: 16px; height: 16px; display: block; }
/* Specificity must beat the base `input[type=text]` rule in components.css, or the left padding is lost. */
.gt-date input.gt-date-display {
    width: 100%; padding: 8px 12px 8px 38px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
    color: var(--ink); font: inherit;
}
.gt-date-display:focus, .gt-date-display:hover { border-color: var(--hd-navy); outline: none; }
.gt-date-display::placeholder { color: var(--ink-soft); }

.gt-cal {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 280px; padding: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16,32,56,.18);
}
.gt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gt-cal-title { font-weight: 700; color: var(--ink); }
.gt-cal-nav {
    width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc;
    color: var(--hd-navy); font-size: 18px; line-height: 1; cursor: pointer;
}
.gt-cal-nav:hover { background: var(--hd-navy); color: #fff; border-color: var(--hd-navy); }
.gt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gt-cal-dow { margin-bottom: 4px; }
.gt-cal-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-soft); padding: 2px 0; }
.gt-cal-day {
    aspect-ratio: 1 / 1; border: 0; background: transparent; border-radius: 8px; cursor: pointer;
    color: var(--ink); font: inherit; font-size: 13px;
}
.gt-cal-day:hover { background: #eef2f8; }
.gt-cal-out { color: var(--ink-soft); opacity: .5; }
.gt-cal-today { box-shadow: inset 0 0 0 1px var(--hd-gold); font-weight: 700; }
.gt-cal-sel, .gt-cal-sel:hover { background: var(--hd-navy); color: #fff; font-weight: 700; }
.gt-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.gt-cal-link { border: 0; background: transparent; color: var(--hd-navy); font-weight: 600; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.gt-cal-link:hover { text-decoration: underline; }

/* Floor-plan reference shown in the viewer level display, next to the level name. */
.fp-level-display { gap: 8px; }
.fp-level-ref { font-size: 12px; flex: none; }