/* ============================================================
   NEXORA · Screen / Build — Creation Command Center
   Premium workspace. Tokens only.
   ============================================================ */
.build-screen{ gap:clamp(1rem,1vw,1.4rem); animation: build-enter .42s var(--ease-out) both }
@keyframes build-enter{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
html.nx-reduced-motion .build-screen{ animation:none }
.build-offline{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-radius:var(--radius-md); background:var(--warning-soft); color:var(--warning-text); border:1px solid var(--warning-border); font-family:var(--font-mono); font-size:.75rem; font-weight:600 }
[data-theme="dark"] .build-offline{ background:var(--warning-soft); color:var(--warning-text); border-color:var(--warning-border) }
.build-offline .icon{ width:16px; height:16px; flex:none }
.build-head{ align-items:center }
.build-head-copy{ min-width:0; flex:1 1 420px }
.build-head-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; margin-top:.85rem }
.build-head-meta .w-meta{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.72rem; color:var(--text-2) }
.build-head-meta .w-meta .icon{ width:14px; height:14px; color:var(--text-3); flex:none }

/* search */
.build-search-wrap{ display:grid; gap:.5rem }
.build-search{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1.1rem; border-radius:var(--radius-md); background:var(--surface-inset); border:1px solid var(--border); box-shadow:var(--inset-well) }
.build-search:focus-within{ border-color:var(--accent-border); box-shadow:var(--focus-ring) }
.build-search > .icon{ color:var(--text-3); flex:none }
.build-search input{ flex:1; min-width:0; background:none; border:0; outline:none; font-size:.98rem; color:var(--text-1) }
.build-search input::placeholder{ color:var(--text-3) }
.build-search kbd{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-3); padding:.15rem .45rem; border-radius:5px; background:var(--surface-2); border:1px solid var(--border) }

/* continue */
.build-continue{ padding:1.2rem 1.3rem; display:grid; gap:.9rem }
.build-continue-main{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.build-continue .icon-tile{ width:48px; height:48px; flex:none; display:grid; place-items:center; background:var(--surface-2); border-radius:var(--radius-sm); color:var(--text-2) }
.build-continue h3{ font-size:1.15rem; color:var(--text-1) }
.build-continue p{ font-size:.85rem; color:var(--text-3) }
.build-continue .eyebrow{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }

/* quick */
.build-quick-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.7rem }
@media (max-width:640px){ .build-quick-grid{ grid-template-columns: repeat(2,1fr) } }
.build-quick{ display:grid; place-items:center; gap:.5rem; padding:1rem .6rem; border-radius:var(--radius-md); background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well); text-decoration:none; color:var(--text-2); cursor:pointer; transition: transform .16s, border-color .16s, background .16s, box-shadow .16s }
.build-quick:hover{ transform:translateY(-1px); border-color:var(--border-strong); color:var(--text-1); background:var(--bg-elevated); box-shadow:var(--hi-top), var(--elev-1) }
html.nx-reduced-motion .build-quick:hover{ transform:none }
.build-quick .icon{ width:22px; height:22px }
.build-quick span{ font-family:var(--font-mono); font-size:.68rem; font-weight:600; text-align:center }

/* AI */
.build-ai{ display:grid; gap:.9rem }
.build-ai-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }
.build-ai h3{ font-size:1.05rem; color:var(--text-1) }
.build-ai-input{ display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap }
.build-ai-input textarea{ flex:1; min-width:220px; padding:.7rem .9rem; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface-2); color:var(--text-1); outline:none; resize:vertical }
.build-ai-input textarea:focus{ border-color:var(--accent-border); box-shadow:var(--focus-ring) }
.build-ai-plan{ padding:.9rem 1rem; border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--border); display:grid; gap:.6rem }
.build-ai-plan h4{ font-size:.95rem; color:var(--text-1) }
.build-ai-plan p{ font-size:.82rem; color:var(--text-2); line-height:1.5 }

/* templates */
.build-templates{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.8rem }
@media (max-width:900px){ .build-templates{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:560px){ .build-templates{ grid-template-columns:1fr } }
.build-template{ padding:1rem; border-radius:var(--radius-md); background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well); display:grid; gap:.6rem; cursor:pointer; transition:border-color .16s, background .16s, box-shadow .16s, transform .16s }
.build-template:hover{ transform:translateY(-1px); border-color:var(--border-strong); background:var(--bg-elevated); box-shadow:var(--hi-top), var(--elev-1) }
html.nx-reduced-motion .build-template:hover{ transform:none }
.build-template h4{ font-size:.95rem; color:var(--text-1) }
.build-template p{ font-size:.78rem; color:var(--text-3); line-height:1.5 }
.build-template .meta{ font-family:var(--font-mono); font-size:.66rem; color:var(--text-3) }

/* project cards — preserve .room-tile but enhance */
.room-tile{ display:grid; gap:.85rem; align-content:start; cursor:pointer; transition: transform .16s, border-color .16s }
/* Completed milestone — success family (check icon carries the meaning too) */
.icon-tile.is-done{ color:var(--success); background:var(--success-soft); box-shadow:inset 0 0 0 1px var(--success-border) }
.room-tile:hover{ transform:translateY(-1px); border-color:var(--border-strong) }
html.nx-reduced-motion .room-tile:hover{ transform:none }
.room-head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem }
.room-activity{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--text-3) }
.room-activity .status-dot{ width:6px; height:6px; flex:none; border-radius:50%; background:var(--text-3) }
.room-mile{ display:grid; gap:.45rem }
.room-mile .mile-top{ display:flex; align-items:center; justify-content:space-between; gap:.8rem }
.room-mile .mile-top b{ font-size:.85rem; color:var(--text-1); font-weight:600 }
.room-mile .mile-top .mono{ color:var(--text-2); font-size:.72rem }
.room-actions{ display:flex; gap:.6rem; flex-wrap:wrap }

/* view toggle */
.view-toggle{ display:flex; gap:.25rem; padding:.25rem; border-radius:var(--radius-full); background:var(--surface-2); border:1px solid var(--border) }
.view-toggle .btn.is-active{ background:var(--text-1); color:var(--bg-elevated) }
.build-screen.is-list #b-active{ display:grid; gap:.6rem }
.build-screen.is-list .room-tile{ grid-template-columns: 1fr auto; align-items:center; gap:.9rem; padding:.9rem 1rem }

/* drawer — floating dock + sheet — portal to body, above shell */
.build-drawer-backdrop, .build-sheet-backdrop{ position:fixed; inset:0; z-index:300; background:color-mix(in srgb, var(--n-1000) 42%, transparent); backdrop-filter:none; -webkit-backdrop-filter:none; opacity:0; visibility:hidden; transition:opacity .18s var(--ease-out), visibility .18s }
.build-drawer-backdrop:not([hidden]), .build-sheet-backdrop:not([hidden]){ opacity:1; visibility:visible }
.build-drawer-backdrop[hidden], .build-sheet-backdrop[hidden]{ display:block !important; pointer-events:none }
[data-theme="dark"] .build-drawer-backdrop, [data-theme="dark"] .build-sheet-backdrop{ background:rgba(0,0,0,.58) }
[data-theme="dark"] .build-drawer-backdrop:not([hidden]), [data-theme="dark"] .build-sheet-backdrop:not([hidden]){ background:rgba(0,0,0,.66) }
.build-drawer{ position:fixed; top:calc(var(--tb-top) + var(--tb-h) + 16px); right:20px; width:min(480px, calc(100vw - 32px)); height:min(640px, calc(100dvh - var(--tb-top) - var(--tb-h) - 32px)); min-height:420px; max-height:calc(100dvh - var(--tb-top) - var(--tb-h) - 32px); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:20px; box-shadow:var(--hi-top), var(--elev-3); z-index:301; display:flex; flex-direction:column; overflow:hidden; transform:translate3d(10px,-8px,0) scale(.97); opacity:0; visibility:hidden; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s var(--ease-out), visibility .24s; will-change:transform, opacity }
.build-drawer:not([hidden]){ transform:none; opacity:1; visibility:visible }
.build-drawer[hidden]{ display:flex !important; pointer-events:none }
[data-theme="light"] .build-drawer{ background:var(--bg-elevated); border-color:var(--border-strong) }
[data-theme="dark"] .build-drawer{ background:var(--bg-elevated); border-color:rgba(255,255,255,.10) }
html.nx-reduced-motion .build-drawer{ transition:none }
.build-sheet{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px) scale(.98); width:min(560px, calc(100vw - 32px)); max-height:78vh; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:20px; box-shadow:var(--hi-top), var(--elev-3); z-index:301; display:flex; flex-direction:column; overflow:hidden; opacity:0; visibility:hidden; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s var(--ease-out), visibility .24s }
.build-sheet:not([hidden]){ transform:translateX(-50%) none; opacity:1; visibility:visible }
.build-sheet[hidden]{ display:flex !important; pointer-events:none }
html.nx-reduced-motion .build-sheet{ transition:none }
@media (max-width:767px){ .build-drawer{ top:auto; right:10px; left:10px; bottom:10px; width:auto; height:min(78dvh,640px); min-height:0; transform:translate3d(0,16px,0) scale(.985) } .build-drawer:not([hidden]){ transform:none } .build-sheet{ left:10px; right:10px; bottom:10px; width:auto; transform:translateY(8px) scale(.98); max-height:78dvh } .build-sheet:not([hidden]){ transform:none } }
@media (max-width:420px){ .build-drawer{ right:6px; left:6px; bottom:6px; height:min(84dvh,640px) } .build-sheet{ left:6px; right:6px; bottom:6px } }
.build-drawer-head, .build-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid var(--border) }
.build-drawer-body, .build-sheet-body{ flex:1; overflow:auto; padding:1rem 1.1rem; display:grid; gap:.9rem; align-content:start }

/* discovery */
.build-discovery{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.8rem }
@media (max-width:900px){ .build-discovery{ grid-template-columns:1fr } }

/* skeleton */
.feed-skeleton{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem }
@media (max-width:700px){ .feed-skeleton{ grid-template-columns:1fr } }
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--radius-md); min-height:18px }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: translateX(-100%); animation: shimmer 1.15s infinite }
[data-theme="dark"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) }
@keyframes shimmer{ 100%{ transform: translateX(100%) } }
html.nx-reduced-motion .skeleton::after{ animation:none }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }

/* preserve create-panel */
.create-panel{ animation: refresh-item .4s var(--ease-out) both }
.create-form{ display:grid; gap:.9rem }
.create-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.create-hint{ font-size:.68rem; color:var(--text-3) }
.join-btn.is-requested{ color:var(--text-1) !important; background:var(--surface-2) !important; pointer-events:none }