/* FDS extension: spatial catalog rooms and read-only model inspection. */
:root { color: var(--fds-gray-900); background: var(--fds-gray-50); }
* { box-sizing: border-box; }
.sw-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 32px; background:var(--fds-white); border-bottom:1px solid var(--fds-gray-200); flex-wrap:wrap; }
.sw-header img { display:block; width:176px; height:auto; }
.sw-main { max-width:1700px; padding:28px 32px 48px; margin:auto; }
.sw-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.sw-heading h1 { font-size:28px; margin:4px 0 8px; }
.sw-heading p { margin:0; color:var(--fds-gray-600); max-width:850px; }
.sw-eyebrow { font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.sw-notice { padding:12px 16px; border:1px solid var(--fds-gray-200); background:var(--fds-white); border-radius:var(--fds-radius-md,8px); color:var(--fds-gray-600); font-size:13px; line-height:1.6; }
.sw-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:20px 0; }
.sw-modes { display:flex; gap:6px; padding:4px; background:var(--fds-gray-100); border-radius:var(--fds-radius-lg,12px); }
.sw-actions button, .sw-rooms button, .sw-dialog-head button { min-height:44px; white-space:normal; }
.sw-modes [aria-pressed=true], .sw-rooms [aria-pressed=true] { background:var(--fds-gray-900); color:var(--fds-white); border-color:var(--fds-gray-900); }
.sw-unit { display:flex; align-items:center; gap:8px; font-size:13px; }
.sw-unit select { width:95px; min-height:44px; }
.sw-version { margin-inline-start:auto; color:var(--fds-gray-600); font-size:13px; }
.sw-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:start; }
.sw-rooms { display:flex; flex-direction:column; gap:8px; }
.sw-rooms button { justify-content:space-between; text-align:start; padding:12px; }
.sw-content { min-width:0; }
.sw-stage { height:clamp(420px,65vh,780px); overflow:hidden; background:var(--fds-gray-100); border:1px solid var(--fds-gray-200); border-radius:var(--fds-radius-lg,12px); touch-action:none; direction:ltr; }
.sw-stage canvas, .sw-detail-stage canvas { display:block; width:100%; height:100%; }
.sw-stage[hidden] { display:none; }
.sw-hint { color:var(--fds-gray-600); font-size:12px; line-height:1.6; }
.sw-search { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:24px 0 16px; }
.sw-search label { font-weight:600; font-size:14px; }
.sw-search input { width:min(320px,100%); min-height:44px; }
.sw-search span { color:var(--fds-gray-600); font-size:13px; }
.sw-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.sw-card { min-width:0; overflow-wrap:anywhere; background:var(--fds-white); border:1px solid var(--fds-gray-200); border-radius:var(--fds-radius-lg,12px); padding:12px 16px 16px; }
.sw-card-open { display:flex; flex-direction:column; align-items:stretch; width:100%; border:0; background:transparent; padding:0 0 10px; text-align:start; color:inherit; cursor:pointer; font:inherit; }
.sw-card-open svg { display:block; width:100%; height:140px; }
.sw-card-open strong { font-size:15px; line-height:1.5; }
.sw-card code { font-size:11px; color:var(--fds-gray-600); }
.sw-card p { font-size:12px; margin:8px 0 12px; font-variant-numeric:tabular-nums; }
.sw-badge { display:inline-block; background:var(--fds-gray-100); padding:4px 8px; border-radius:var(--fds-radius-sm,4px); font-size:12px; }
.sw-empty { grid-column:1/-1; padding:24px; color:var(--fds-gray-600); }
.sw-unavailable { padding:24px; line-height:1.7; }
.sw-dialog { width:min(860px,calc(100vw - 32px)); max-width:100%; max-height:90dvh; overflow:auto; padding:24px; border:1px solid var(--fds-gray-200); border-radius:var(--fds-radius-lg,12px); color:var(--fds-gray-900); background:var(--fds-white); }
.sw-dialog::backdrop { background:rgb(17 24 39 / .5); }
body:has(.sw-dialog[open]) { overflow:hidden; }
.sw-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.sw-dialog-head h2 { margin:0; font-size:22px; overflow-wrap:anywhere; }
.sw-detail-stage { height:360px; overflow:hidden; border-radius:var(--fds-radius-md,8px); touch-action:none; direction:ltr; }
.sw-details dl { margin:0; }
.sw-details dl>div { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; border-bottom:1px solid var(--fds-gray-100); padding:10px 0; font-size:13px; }
.sw-details dt { color:var(--fds-gray-600); }
.sw-details dd { margin:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.sw-skip { position:absolute; inset-inline-start:16px; top:-100px; padding:12px; background:var(--fds-white); z-index:10; }
.sw-skip:focus { top:12px; }
:focus-visible { outline:3px solid var(--fds-primary-500,#2563eb); outline-offset:3px; }
@media(max-width:768px) {
  .sw-header { padding:12px 16px; }
  .sw-main { padding:20px 16px 32px; }
  .sw-heading { align-items:flex-start; flex-direction:column; }
  .sw-heading h1 { font-size:24px; }
  .sw-layout { grid-template-columns:1fr; gap:12px; }
  .sw-rooms { flex-direction:row; flex-wrap:wrap; gap:8px; }
  .sw-rooms button { font-size:12px; padding:8px 10px; }
  .sw-stage { height:420px; }
  .sw-version { margin-inline-start:0; }
  .sw-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sw-card { padding:10px; }
  .sw-card-open svg { height:110px; }
  .sw-dialog { padding:16px; }
  .sw-detail-stage { height:280px; }
  .sw-details dl>div { grid-template-columns:1fr; gap:4px; }
  .sw-search input { font-size:16px; }
}
@media(max-width:359px) { .sw-cards { grid-template-columns:1fr; } }