/* finesse · register=product · A=existing-Workloop-green · B=existing-Jakarta-type · C=persistent-admin-sidebar
 * D=content-only-route-transition · E=existing-Stitch-surfaces · SOUL=5 SPECTACLE=2 DENSITY=7 */
:root {
  --wl-ink: #101a16;
  --wl-muted: #617268;
  --wl-primary: #00c979;
  --wl-primary-dark: #006d41;
  --wl-surface: #f8f9ff;
  --wl-card: #ffffff;
  --wl-line: #dce5df;
  --wl-shadow: 0 18px 50px rgba(16, 26, 22, .10);
  color-scheme: light;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--wl-surface); color: var(--wl-ink); }
body { min-height: 100dvh; }
button, select { font: inherit; }

.wl-app { min-height: 100dvh; display: grid; grid-template-columns: 286px minmax(0, 1fr); }
.wl-sidebar {
  position: sticky; top: 0; height: 100dvh; padding: 24px 16px; overflow-y: auto;
  background: #fff; border-right: 1px solid var(--wl-line);
}
.wl-brand { display: flex; align-items: center; height: 44px; padding: 0 8px; margin-bottom: 24px; }
.wl-brand img { display: block; width: 160px; height: auto; }
.wl-meta { margin: 0 8px 18px; color: var(--wl-muted); font-size: 12px; line-height: 1.55; }
.wl-nav { display: grid; gap: 4px; }
.wl-nav button {
  width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; color: #395045;
  background: transparent; text-align: left; font-size: 13px; font-weight: 700; cursor: pointer;
}
.wl-nav button:hover, .wl-nav button[aria-current="page"] { color: #004d2e; background: #e8faf1; }
.wl-nav button[aria-current="page"] { box-shadow: inset 3px 0 0 var(--wl-primary); }
.wl-library-toggle {
  width: 100%; min-height: 44px; margin-top: 22px; border: 1px solid var(--wl-line); border-radius: 10px;
  color: #264338; background: #fff; font-weight: 800; cursor: pointer;
}
.wl-library { display: none; margin-top: 10px; }
.wl-library.is-open { display: block; }
.wl-library label, .wl-controls label { display: grid; gap: 6px; color: var(--wl-muted); font-size: 11px; font-weight: 800; }
.wl-library select, .wl-controls select {
  width: 100%; height: 40px; padding: 0 10px; color: var(--wl-ink); border: 1px solid var(--wl-line);
  border-radius: 9px; background: #fff; outline: none;
}

.wl-stage { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.wl-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px;
  padding: 12px 28px; border-bottom: 1px solid var(--wl-line); background: rgba(255,255,255,.9);
}
.wl-current { min-width: 0; }
.wl-eyebrow { margin: 0 0 3px; color: var(--wl-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.wl-title { margin: 0; overflow: hidden; color: var(--wl-ink); font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.wl-controls { display: flex; align-items: end; gap: 8px; flex: 0 0 auto; }
.wl-controls label { width: 106px; }
.wl-controls select { height: 40px; font-size: 12px; font-weight: 700; }
.wl-canvas { min-height: 0; padding: 26px; overflow: auto; background: radial-gradient(circle at 10% 5%, #e5fbf1 0, transparent 28rem), #eef3f1; }
.wl-frame-wrap { width: 100%; min-width: 0; display: flex; justify-content: center; position: relative; isolation: isolate; }
.wl-shared-admin-sidebar {
  position: absolute;
  z-index: 4;
  top: 64px;
  left: max(0px, calc(50% - 720px));
  height: calc(100% - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 0 18px;
}
.wl-shared-admin-sidebar[hidden] { display: none !important; }
.wl-shared-admin-footer {
  flex: 0 0 auto;
  padding: 15px 14px;
  border-top: 1px solid rgba(238, 240, 255, .15);
  color: #d6dced;
  font-size: 11px;
  line-height: 1.5;
}
.wl-frame-wrap::after {
  content: ""; position: absolute; z-index: 5; top: 0; left: 50%; width: min(74%, 320px); height: 2px;
  border-radius: 999px; background: linear-gradient(90deg, #006b43, #19a76f); opacity: 0;
  transform: translateX(-50%) scaleX(.12); transform-origin: left; pointer-events: none;
}
.wl-frame-wrap.is-route-slow::after { opacity: .9; animation: wlRouteProgress 1.1s cubic-bezier(.22,.8,.24,1) forwards; }
@keyframes wlRouteProgress { from { transform: translateX(-50%) scaleX(.12); } to { transform: translateX(-50%) scaleX(.88); } }
.wl-frame {
  display: block; width: min(100%, 1440px); height: max(760px, calc(100dvh - 152px)); border: 0; border-radius: 18px;
  background: #fff; box-shadow: var(--wl-shadow);
}
.wl-frame[data-device="MOBILE"] { width: 430px; height: min(884px, calc(100dvh - 124px)); border-radius: 28px; }
.wl-frame--staging {
  position: absolute; z-index: 2; top: 0; left: 50%; transform: translate(-50%, 6px);
  opacity: 0; pointer-events: none; transition: opacity 200ms cubic-bezier(.22,.8,.24,1), transform 200ms cubic-bezier(.22,.8,.24,1);
}
.wl-frame--staging.is-ready { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .wl-frame--staging { transition: none; transform: translate(-50%, 0); } }
.wl-canvas:has(> .wl-frame-wrap > #workloop-screen[data-device="MOBILE"]) { overflow: hidden; }
.wl-version-note { margin: 12px auto 0; max-width: 720px; color: var(--wl-muted); font-size: 11px; line-height: 1.5; text-align: center; }

/* The product owns a full viewport. The developer shell remains opt-in. */
.wl-product .wl-sidebar, .wl-product .wl-toolbar, .wl-product .wl-version-note { display: none !important; }
.wl-product .wl-app { display: block; min-height: 100dvh; }
.wl-product .wl-stage { display: block; height: 100dvh; min-height: 0; }
.wl-product .wl-canvas { height: 100dvh; min-height: 0; padding: 0; overflow: hidden; background: #fff; }
.wl-product .wl-frame-wrap { height: 100dvh; }
.wl-product .wl-frame, .wl-product .wl-frame[data-device="MOBILE"] { height: 100dvh; max-width: 100%; border-radius: 0; box-shadow: none; }
.wl-product .wl-frame[data-device="MOBILE"] { width: min(100%, 430px); }
.wl-product .wl-shared-admin-sidebar { border-radius: 0; }

@media (max-width: 860px) {
  .wl-app { display: block; min-height:100dvh; }
  .wl-sidebar, .wl-toolbar { display:none !important; }
  .wl-stage { display:block; height:100dvh; min-height:100dvh; }
  .wl-canvas { height:100dvh; min-height:100dvh; padding:0; overflow:hidden; background:#fff; }
  .wl-frame-wrap { display: block; }
  .wl-shared-admin-sidebar { left: 0; border-radius: 0; }
  .wl-frame-wrap::after { position: fixed; top: 0; }
  .wl-frame, .wl-frame[data-device="MOBILE"] { width:100%; height:100dvh; border-radius:0; box-shadow:none; }
  .wl-frame--staging { left:0; transform:translateY(6px); }
  .wl-frame--staging.is-ready { transform:translateY(0); }
  .wl-version-note { display: none; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .wl-frame--staging { transform:translateY(0); }
}
/* An explicit developer switch also exposes the controls at narrow widths. */
@media (max-width: 860px) {
  .wl-developer .wl-sidebar { display: block !important; }
  .wl-developer .wl-toolbar { display: flex !important; flex-wrap: wrap; padding: 12px; }
  .wl-developer .wl-version-note { display: block; }
  .wl-developer .wl-app { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
  .wl-developer .wl-stage { display: grid; height: auto; grid-template-rows: auto minmax(0, 1fr); }
}

/* Preparation changes painting only; preserve each authored document's boxes. */
.wl-frame--preparing { opacity: 0 !important; pointer-events: none !important; }
.wl-frame-wrap.is-first-loading { background: #f4f7f6; }

/* Before the shell script arrives, paint the initial product loading surface
   in its final viewport geometry. The initialized shell restores dev/offline
   preview geometry while its board is still concealed. */
:root:not([data-wl-shell-initialized="true"]) .wl-sidebar,
:root:not([data-wl-shell-initialized="true"]) .wl-toolbar,
:root:not([data-wl-shell-initialized="true"]) .wl-version-note { display: none !important; }
:root:not([data-wl-shell-initialized="true"]) .wl-app { display: block; min-height: 100dvh; }
:root:not([data-wl-shell-initialized="true"]) .wl-stage { display: block; height: 100dvh; min-height: 0; }
:root:not([data-wl-shell-initialized="true"]) .wl-canvas { height: 100dvh; padding: 0; overflow: hidden; }
:root:not([data-wl-shell-initialized="true"]) .wl-frame-wrap { height: 100dvh; }
:root:not([data-wl-shell-initialized="true"]) .wl-frame { width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; }
#workloop-screen:not([data-wl-presented="true"]) { opacity: 0 !important; pointer-events: none !important; }
.wl-frame-wrap:has(> #workloop-screen:not([data-wl-presented="true"])) { background: #f4f7f6; }