/* construct.css — Batch 2 CONSTRUCT surface (constructShip.js). Locked-viewport: rail | ship + posture
 * | stat bars + summary. Sits on the shared cosmic backdrop (#sf-cosmos). Mirrors the approved mock
 * starforge-b2-construct-mock.html. sfc- namespace to avoid collisions. Uses tokens.css vars. */

.sfc { position: relative; z-index: 3; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.sfc__top { display: flex; align-items: center; gap: 14px; padding: 13px 24px; flex: 0 0 auto; }
.sfc__back { font: 600 11px var(--sans); color: var(--ink2); border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .5); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.sfc__back:hover { border-color: var(--violet-line); color: var(--ink); }
.sfc__who { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--panel-line); border-radius: 999px; padding: 5px 12px; }
.sfc__who .av { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); }

.sfc__eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--heat); padding: 2px 26px 0; flex: 0 0 auto; }
.sfc__h { padding: 0 26px; font-size: 20px; font-weight: 200; margin: 1px 0 7px; flex: 0 0 auto; }
.sfc__h b { font-weight: 700; }
.sfc__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr 286px; gap: 16px; padding: 0 26px 12px; overflow: hidden; }

/* rail — prominent name + class list */
.sfc__rail { display: flex; flex-direction: column; min-height: 0; }
.sfc__namebox { flex: 0 0 auto; border: 1px solid var(--violet-line); border-radius: 13px; background: linear-gradient(180deg, rgba(139, 139, 255, .1), rgba(10, 14, 30, .5)); padding: 11px 13px 12px; margin-bottom: 14px; box-shadow: 0 0 22px -8px rgba(139, 139, 255, .5); }
.sfc__namelbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--violet); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.sfc__namefield { display: flex; align-items: center; gap: 8px; border-bottom: 1.5px solid var(--violet-line); padding-bottom: 5px; }
.sfc__namefield:focus-within { border-color: var(--violet); }
.sfc__namefield input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 700 21px var(--sans); outline: none; padding: 0; }
.sfc__namefield input::placeholder { color: var(--ink3); font-weight: 400; }
.sfc__pencil { color: var(--violet); font-size: 13px; opacity: .8; }
.sfc__raillbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 0 0 8px; flex: 0 0 auto; }
.sfc__classes { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.sfc-klass { display: flex; align-items: center; gap: 11px; border: 1px solid var(--panel-line); border-radius: 11px; background: rgba(10, 14, 30, .5); padding: 8px 12px 8px 8px; cursor: pointer; transition: .14s; }
.sfc-klass:hover { border-color: var(--violet-line); }
.sfc-klass.sel { border-color: var(--kc, var(--violet)); background: rgba(139, 139, 255, .08); box-shadow: 0 0 0 1px var(--kc, var(--violet)) inset, 0 0 18px -6px var(--kc, var(--violet)); }
/* portrait thumbnail (generated art fades in over the class silhouette; missing art → silhouette) */
.sfc-klass__pv { width: 56px; height: 38px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, rgba(20, 26, 52, .9), rgba(7, 10, 22, .95)); border: 1px solid var(--panel-line); }
.sfc-klass.sel .sfc-klass__pv { border-color: var(--kc, var(--violet)); }
.sfc-klass__txt { min-width: 0; }
.sfc-klass__n { font-size: 14px; font-weight: 650; line-height: 1.1; }
.sfc-klass__p { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--kc); margin-top: 2px; }

/* centre — ship + posture */
.sfc__stage { border: 1px solid var(--panel-line); border-radius: 16px; background: linear-gradient(rgba(150, 160, 220, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 160, 220, .045) 1px, transparent 1px), rgba(8, 11, 24, .55); background-size: 28px 28px, 28px 28px, auto; backdrop-filter: blur(8px); display: flex; flex-direction: column; min-height: 0; padding: 14px 18px; overflow: hidden; }
.sfc-stage__head { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; }
.sfc-stage__name { font-size: 23px; font-weight: 300; }
.sfc-stage__pillar { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--kc, var(--violet)); }
.sfc-stage__bp { flex: 1 1 auto; min-height: 110px; display: flex; align-items: center; justify-content: center; }
.sfc-stage__bp svg { width: 100%; height: 100%; max-height: 262px; display: block; }
.sfc-stage__tag { flex: 0 0 auto; text-align: center; margin-bottom: 8px; }
.sfc-stage__tl { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.sfc-stage__sub { font-size: 11px; color: var(--ink2); line-height: 1.45; max-width: 600px; margin: 0 auto; }

/* posture strip */
.sfc-posture { flex: 0 0 auto; border-top: 1px solid var(--panel-line); padding-top: 10px; }
.sfc-posture__lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 9px; }
.sfc-posture__lbl b { color: var(--cyan); font-weight: 600; }
.sfc-posture__row { display: flex; gap: 9px; }
.sfc-cap { flex: 1 1 0; min-width: 0; border: 1px solid var(--panel-line); border-radius: 10px; background: rgba(10, 14, 30, .4); padding: 8px 8px 9px; }
.sfc-cap__h { font-size: 10.5px; font-weight: 650; color: var(--ink2); margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfc-cap__h i { font-style: normal; color: var(--cyan); margin-right: 4px; }
.sfc-cap__segs { display: flex; flex-direction: column; gap: 4px; }
.sfc-seg { font: 600 8.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--panel-line); border-radius: 6px; padding: 5px 6px; background: transparent; color: var(--ink3); cursor: pointer; text-align: left; transition: .12s; display: flex; align-items: center; gap: 5px; }
.sfc-seg:not(.sel):not(.locked):hover { border-color: var(--violet-line); color: var(--ink2); }
.sfc-seg.sel { border-color: var(--cyan); background: rgba(54, 214, 224, .16); color: var(--ink); box-shadow: 0 0 12px -3px var(--cyan); }
.sfc-seg.locked { opacity: .32; cursor: not-allowed; }
.sfc-lk { font-size: 8px; }

/* right — stat bars + summary + begin */
.sfc__panel { border: 1px solid var(--panel-line); border-radius: 16px; background: rgba(10, 14, 30, .6); backdrop-filter: blur(10px); padding: 18px 22px 18px; display: flex; flex-direction: column; min-height: 0; }
.sfc-panel__lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 0 0 6px; flex: 0 0 auto; }
.sfc-stats { display: flex; flex-direction: column; justify-content: space-evenly; gap: 14px; flex: 1 1 auto; min-height: 0; }
.sfc-stat__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sfc-stat__l { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.sfc-stat__v { font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.sfc-stat__v s { text-decoration: none; color: var(--ink3); font-weight: 400; font-size: 10px; }
.sfc-bar { position: relative; display: block; height: 11px; border-radius: 6px; background: rgba(150, 160, 220, .1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); overflow: hidden; }
.sfc-bar i { display: block; height: 100%; border-radius: 6px; transition: width .55s cubic-bezier(.4, 0, .2, 1); }
.sfc-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1.5px), rgba(4, 5, 12, .6) calc(20% - 1.5px), rgba(4, 5, 12, .6) 20%); }
.sfc-summary { flex: 0 0 auto; border: 1px solid var(--panel-line); border-radius: 11px; background: rgba(10, 14, 30, .45); padding: 10px 13px; margin: 14px 0 12px; }
.sfc-summary__r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; }
.sfc-summary__r span { color: var(--ink3); font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
.sfc-summary__r b { color: var(--ink); font-weight: 650; font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfc-begin { flex: 0 0 auto; border: 1px solid rgba(95, 208, 160, .5); background: linear-gradient(135deg, rgba(95, 208, 160, .3), rgba(54, 214, 224, .16)); color: var(--ink); border-radius: 13px; padding: 14px; font: 700 14px var(--sans); cursor: pointer; }
.sfc-begin:hover { filter: brightness(1.05); box-shadow: 0 0 26px rgba(95, 208, 160, .35); }
.sfc-begin:disabled { opacity: .6; cursor: default; filter: none; box-shadow: none; }

.sfc__hint { flex: 0 0 auto; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: 0 0 8px; }
.sfc__toast { position: fixed; left: 50%; top: 64px; transform: translateX(-50%) translateY(-12px); z-index: 40; opacity: 0; pointer-events: none; border: 1px solid var(--violet-line); background: rgba(10, 14, 30, .92); backdrop-filter: blur(8px); border-radius: 12px; padding: 11px 16px; font-size: 12.5px; color: var(--ink2); transition: .3s; max-width: 520px; text-align: center; }
.sfc__toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* commissioning ceremony */
.sfc-cere { position: relative; z-index: 3; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.sfc-cere__core { width: 160px; height: 160px; border-radius: 50%; position: relative; margin-bottom: 16px; }
.sfc-cere__core::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fff, var(--kc, #ffd98a) 36%, rgba(255, 140, 60, .2) 72%, transparent); animation: sfcCerePulse 2.4s ease-in-out infinite; }
.sfc-cere__core::after { content: ''; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid var(--kc, var(--heat)); opacity: .5; animation: sfcCereRing 3s ease-out infinite; }
@keyframes sfcCerePulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes sfcCereRing { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }
.sfc-cere__cap { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); }
.sfc-cere__name { font-size: 34px; font-weight: 200; }
.sfc-cere__cls { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--kc, var(--violet)); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .sfc-cere__core::before, .sfc-cere__core::after { animation: none; }
  .sfc-bar i { transition: none; }
}