/**
 * FYSH — Room Itemiser layout + import
 * Page creation: 19/10/2026 15:20
 * Page modified: 19/10/2026 15:20
 *
 * Shared by the listing editor (import card + preview) and the public listing
 * page (read-only layout). No inline styles anywhere, to satisfy the site CSP.
 */

/* ── Rendered layout (editor preview + public listing) ────────────────────── */
.ri-layout{margin-top:8px}
.ri-layout__meta{
  font-size:13px;color:#6B7A8D;margin:0 0 14px;
}
.ri-layout .ri-dot{color:#B8C2CF;margin:0 2px}

.ri-layout__floors{display:flex;flex-direction:column;gap:12px}
/* Enable height animation to intrinsic size where supported (progressive). */
.ri-layout{interpolate-size:allow-keywords}

/* Each floor is a drawer accordion (native <details>), closed by default. */
.ri-floor{
  border:1px solid #E3E8EF;border-radius:4px;background:#FBFCFE;overflow:hidden;
}
.ri-floor__head{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;background:#F2F5FA;
  cursor:pointer;list-style:none;user-select:none;transition:background .15s;
}
.ri-floor__head::-webkit-details-marker{display:none}
.ri-floor__head:hover{background:#EAF0F8}
.ri-floor__head:focus-visible{outline:2px solid #1E5BA8;outline-offset:-2px}
.ri-floor[open] .ri-floor__head{border-bottom:1px solid #E3E8EF}
.ri-floor__name{font-size:14px;font-weight:700;color:#0F2340;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ri-floor__count{font-size:12px;font-weight:600;color:#6B7A8D;flex:none}
.ri-floor__chev{width:16px;height:16px;color:#6B7A8D;flex:none;transition:transform .25s ease}
.ri-floor[open] .ri-floor__chev{transform:rotate(180deg)}
/* Smooth open/close in browsers that support ::details-content. Elsewhere the
   drawer still opens and closes instantly, closed on load either way. */
.ri-floor::details-content{
  block-size:0;overflow:hidden;content-visibility:hidden;
  transition:block-size .28s ease,content-visibility .28s allow-discrete;
}
.ri-floor[open]::details-content{block-size:auto;content-visibility:visible}

.ri-rooms{list-style:none;margin:0;padding:0}
.ri-room{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 14px;
  padding:11px 14px;border-bottom:1px solid #EEF1F6;
}
.ri-room:last-child{border-bottom:none}
.ri-room__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:4px;background:#EDF1F7;color:#1E5BA8;
}
.ri-room__icon .fysh-ico{width:18px;height:18px;vertical-align:0}
.ri-room__name{font-size:14px;font-weight:600;color:#1B2634;min-width:0;overflow-wrap:anywhere}
.ri-room__dim{font-size:13px;color:#44536A;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ri-floor__empty{font-size:13px;color:#8A96A8;padding:12px 14px;margin:0}

@media (max-width:560px){
  .ri-room{grid-template-columns:auto 1fr;grid-template-areas:"icon name" "dim dim"}
  .ri-room__icon{grid-area:icon}
  .ri-room__name{grid-area:name}
  .ri-room__dim{grid-area:dim;text-align:left;padding-left:40px}
}

/* ── Import card (editor only) ────────────────────────────────────────────── */
.ri-import{
  border:1px dashed #C7D0DD;border-radius:4px;background:#FBFCFE;
  padding:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.ri-import__file{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ri-import__btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13px;font-weight:600;color:#0F2340;
  background:#fff;border:1px solid #C7D0DD;border-radius:4px;padding:9px 14px;transition:.15s;
}
.ri-import__btn:hover{border-color:#0F2340;background:#F2F5FA}
.ri-import__file:focus-visible + .ri-import__btn{outline:2px solid #1E5BA8;outline-offset:2px}
.ri-import__remove{
  font-size:13px;font-weight:600;color:#9A3434;background:transparent;
  border:1px solid transparent;border-radius:4px;padding:9px 12px;cursor:pointer;transition:.15s;
}
.ri-import__remove:hover{background:#FBEDED}
.ri-import__msg{width:100%;font-size:12.5px;margin:2px 0 0;min-height:1em}
.ri-import__msg--ok{color:#1F7A4D}
.ri-import__msg--err{color:#C0392B}

.ri-preview{margin-top:14px}
.ri-preview:empty{margin-top:0}

/* Prefill suggestion (vendor confirms before it fills the spec fields) */
.ri-suggest{
  width:100%;margin-top:4px;padding:12px 14px;
  border:1px solid #D7E3F2;border-left:3px solid #1E5BA8;border-radius:4px;background:#F3F8FE;
}
.ri-suggest__text{font-size:13px;color:#2A3B52;margin:0 0 10px}
.ri-suggest__text strong{color:#0F2340}
.ri-suggest__actions{display:flex;flex-wrap:wrap;gap:8px}