/* raise.css — Batch 3 Raise-a-Work-Order surface (raiseWO.js). Full-screen on the workshop background.
 * Locked-viewport: Intent + Detail | Lane + Mode + no-scroll 7-zone mission timeline. sfr- namespace.
 * Mirrors mocks/starforge-b3-raise-wo-mock.html; uses tokens.css vars. */

.sfr { position: relative; z-index: 3; height: 100vh; overflow: hidden; }
/* NB: CSS url() resolves relative to THIS stylesheet (/starforge/styles/), not the page <base> — so the
   path must climb out of styles/ to reach public/assets/. (The page <base> only affects HTML, not CSS.) */
.sfr__plate { position: absolute; inset: 0; z-index: 0; background-image: url('../assets/plate-workshop.png'); background-size: cover; background-position: center; opacity: .9; }
.sfr__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4,5,12,.62) 0%, rgba(4,5,12,.34) 30%, rgba(4,5,12,.6) 70%, rgba(4,5,12,.9) 100%); }
.sfr__bloom { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(207,224,255,.5), rgba(139,139,255,.2) 26%, transparent 56%); }
.sfr__bloom.run { animation: sfrBloom .8s ease forwards; }
@keyframes sfrBloom { 0% { opacity: 0; } 38% { opacity: .85; } 100% { opacity: 0; } }

.sfr-screen { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; }
.sfr-screen.on { display: flex; animation: sfrIn .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes sfrIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

.sfr__top { display: flex; align-items: center; gap: 14px; padding: 13px 24px; flex: 0 0 auto; }
.sfr__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; }
.sfr__back:hover { border-color: var(--violet-line); color: var(--ink); }
.sfr__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; }
.sfr__who .av { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); }
.sfr__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; }
.sfr__eyebrow b { color: var(--ink); }
.sfr__h { padding: 0 26px; font-size: 21px; font-weight: 200; margin: 1px 0 9px; flex: 0 0 auto; }
.sfr__h b { font-weight: 700; }

.sfr__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 352px; gap: 16px; padding: 0 26px 14px; overflow: hidden; }
.sfr__col { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.sfr__lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 0 0 8px; }
.sfr__intent { width: 100%; border: 1px solid var(--violet-line); background: linear-gradient(180deg, rgba(139,139,255,.1), rgba(10,14,30,.5)); color: var(--ink); border-radius: 13px; padding: 14px 16px; font: 400 16px var(--sans); resize: none; outline: none; box-shadow: 0 0 22px -10px rgba(139,139,255,.5); }
.sfr__intent::placeholder { color: var(--ink3); }
.sfr__detail { width: 100%; border: 1px solid var(--panel-line); background: rgba(10,14,30,.5); color: var(--ink); border-radius: 11px; padding: 11px 14px; font: 400 13px var(--sans); resize: none; outline: none; margin-top: 6px; }
.sfr__detail::placeholder { color: var(--ink3); }
.sfr__group { margin-top: 14px; }
.sfr__opts { display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; }
.sfr-opt { border: 1px solid var(--panel-line); border-radius: 11px; background: rgba(10,14,30,.5); padding: 11px 13px; cursor: pointer; transition: .14s; }
.sfr-opt:hover { border-color: var(--violet-line); }
.sfr-opt.sel { border-color: var(--cyan); background: rgba(54,214,224,.1); box-shadow: 0 0 0 1px var(--cyan) inset, 0 0 16px -6px var(--cyan); }
.sfr-opt__n { font-size: 13.5px; font-weight: 650; }
.sfr-opt__d { font-size: 10.5px; color: var(--ink3); margin-top: 3px; line-height: 1.4; }
.sfr-opt__t { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan); margin-top: 5px; }
.sfr__minor { font-family: var(--mono); font-size: 9px; color: var(--ink3); margin-top: 8px; }
.sfr__place { align-self: center; width: 340px; max-width: 100%; margin-top: 18px; flex: 0 0 auto; border: 1px solid rgba(95,208,160,.5); background: linear-gradient(135deg, rgba(95,208,160,.32), rgba(54,214,224,.16)); color: var(--ink); border-radius: 13px; padding: 13px; font: 700 14px var(--sans); cursor: pointer; text-align: center; }
.sfr__place:hover { filter: brightness(1.06); box-shadow: 0 0 26px rgba(95,208,160,.35); }
.sfr__place:disabled { opacity: .5; cursor: default; filter: none; box-shadow: none; }
.sfr__err { align-self: center; color: #ff8a8a; font-size: 11.5px; margin: 8px 0 0; min-height: 14px; }

/* mission preview — no scroll */
.sfr__preview { border: 1px solid var(--panel-line); border-radius: 16px; background: rgba(10,14,30,.62); backdrop-filter: blur(10px); padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sfr-preview__lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 0 0 4px; display: flex; justify-content: space-between; flex: 0 0 auto; }
.sfr-preview__lbl b { color: var(--cyan); }
.sfr-tl { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; margin: 6px 0 0; }
.sfr-tlz { display: flex; align-items: center; gap: 7px; margin: 5px 0 2px; }
.sfr-tlz__g { width: 15px; text-align: center; font-size: 10px; color: var(--zc); }
.sfr-tlz__n { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--zc); }
.sfr-tlz__ln { flex: 1; height: 1px; background: var(--zc); opacity: .28; }
.sfr-tls { display: flex; align-items: center; gap: 8px; padding: 1.5px 0 1.5px 21px; position: relative; }
.sfr-tls::before { content: ''; position: absolute; left: 6.5px; top: 0; bottom: 0; width: 1.5px; background: var(--zc); opacity: .22; }
.sfr-tls__d { width: 8px; height: 8px; border-radius: 50%; border: 1.4px solid var(--zc); background: rgba(10,14,30,.7); flex: 0 0 auto; }
.sfr-tls.head .sfr-tls__d { background: radial-gradient(circle at 38% 34%, #fff, var(--heat) 55%); border-color: var(--heat); box-shadow: 0 0 9px var(--heat); }
.sfr-tls.off { opacity: .32; }
.sfr-tls__n { font-size: 11.5px; color: var(--ink2); }
.sfr-tls.head .sfr-tls__n { color: var(--ink); font-weight: 650; }
.sfr-tls__head { font-family: var(--mono); font-size: 8px; color: var(--heat); text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.sfr-tls__m { margin-left: auto; display: flex; gap: 2.5px; align-items: flex-end; height: 13px; }
.sfr-tls__m i { width: 4px; border-radius: 1px; background: var(--zc); }
.sfr-tls__m i.e { background: rgba(150,160,220,.16); }
.sfr-tls__off { margin-left: auto; font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); }

/* ceremony (Kernel · plasma) */
.sfr-cere { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.sfr-kernel { width: 210px; height: 210px; position: relative; margin-bottom: 18px; }
.sfr-kernel__plasma { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #ffb24d, #ff7a3c, #b380ff, #36d6e0, #8b8bff, #ffb24d); filter: blur(18px); opacity: .55; animation: sfrSpin 6s linear infinite; }
.sfr-kernel__plasma.b { inset: 18px; animation: sfrSpin 4s linear infinite reverse; opacity: .5; filter: blur(13px); }
@keyframes sfrSpin { to { transform: rotate(360deg); } }
.sfr-kernel__core { position: absolute; inset: 62px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fff, #ffe6b0 30%, #ffb24d 55%, rgba(255,140,60,.3) 80%, transparent); box-shadow: 0 0 40px rgba(255,178,77,.7); animation: sfrPulse 1.8s ease-in-out infinite; }
@keyframes sfrPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.sfr-kernel__ring { position: absolute; inset: 30px; border-radius: 50%; border: 1px solid rgba(255,178,77,.45); animation: sfrRing 2.6s ease-out infinite; }
.sfr-kernel__ring.b { animation-delay: 1.3s; }
@keyframes sfrRing { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
.sfr-kernel__arc { position: absolute; inset: 8px; border-radius: 50%; border: 1.5px dashed rgba(139,139,255,.5); animation: sfrSpin 9s linear infinite; }
.sfr-kernel__arc.b { inset: 24px; border-color: rgba(54,214,224,.4); animation: sfrSpin 7s linear infinite reverse; }
.sfr-cere__cap { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--heat); }
.sfr-cere__name { font-size: 30px; font-weight: 200; }

/* landed (lean + nav) */
.sfr-landed { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 9px; padding: 0 24px; }
.sfr-landed__cap { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--built); }
.sfr-landed__id { font-family: var(--mono); font-size: 13px; color: var(--cyan); letter-spacing: .06em; }
.sfr-landed__t { font-size: 25px; font-weight: 200; max-width: 580px; }
.sfr-landed__sub { color: var(--ink2); font-size: 13px; max-width: 500px; line-height: 1.55; }
.sfr-landed__sub b { color: var(--heat); }
.sfr-landed__cta { display: flex; gap: 12px; margin-top: 14px; }
.sfr-btn { border-radius: 12px; padding: 13px 22px; font: 700 13.5px var(--sans); cursor: pointer; border: 1px solid var(--panel-line); background: rgba(10,14,30,.6); color: var(--ink2); }
.sfr-btn:hover { border-color: var(--violet-line); color: var(--ink); }
.sfr-btn--go { border-color: rgba(95,208,160,.5); background: linear-gradient(135deg, rgba(95,208,160,.3), rgba(54,214,224,.16)); color: var(--ink); }
.sfr-btn--go:hover { filter: brightness(1.06); box-shadow: 0 0 24px rgba(95,208,160,.34); }

@media (prefers-reduced-motion: reduce) {
  .sfr-kernel__plasma, .sfr-kernel__core, .sfr-kernel__ring, .sfr-kernel__arc, .sfr__bloom.run, .sfr-screen.on { animation: none !important; }
}