/* ============ WEB APP DEVELOPMENT — "workspace / IDE" concept ============ */
/* Page-scoped. Relies on styles.css for tokens, .container, .btn, .dock, .footer. */

:root{
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --wire: rgba(255,255,255,.12);
  --term: #080b16;
  --ok: #6ee7b7;
  --cy: #7dd3fc;
}

body.wa{background:var(--bg);color:var(--ink)}
.wa main{position:relative}
.wa main::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(rgba(255,255,255,.045) 1px,transparent 0) 0 0/22px 22px,
    radial-gradient(ellipse at 50% -10%,rgba(67,104,250,.22),transparent 55%);
  -webkit-mask-image:linear-gradient(#000,#000);
}

/* ---- workspace bar ---- */
.ws-bar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:16px;
  padding:10px 20px;
  background:rgba(7,10,24,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.8rem;
}
.ws-bar__brand{display:flex;align-items:center;gap:8px;font-weight:700;font-family:Inter,system-ui,sans-serif;color:var(--ink)}
.ws-bar__brand .brand__mark{color:var(--accent-2)}
.ws-bar__dots{display:flex;gap:7px}
.ws-bar__dots i{width:11px;height:11px;border-radius:50%;display:block}
.ws-bar__dots i:nth-child(1){background:#ff5f57}
.ws-bar__dots i:nth-child(2){background:#febc2e}
.ws-bar__dots i:nth-child(3){background:#28c840}
.ws-bar__crumb{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-bar__crumb b{color:var(--ink);font-weight:400}
.ws-bar__spacer{margin-left:auto}
.ws-bar__cta{color:var(--accent-2);white-space:nowrap}
.ws-bar__cta:hover{color:var(--ink)}

/* ---- generic panel ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.panel__bar{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.02em;
}
.panel__bar::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--accent);flex:none}
.panel__body{padding:28px}

/* ---- section scaffold ---- */
.wa-section{padding:52px 0}
.wa-eyebrow{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-bottom:14px}
.wa-eyebrow::before{content:"// ";color:var(--accent-2)}
.wa-section h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.wa-section > .container > p{max-width:600px;margin:14px 0 0;color:var(--muted)}

/* ---- hero ---- */
.wa-hero{padding:44px 0 20px}
.wa-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.wa-hero h1{font-size:clamp(2.3rem,5.4vw,3.7rem);letter-spacing:-.02em}
.wa-hero__sub{max-width:46ch;margin:18px 0 0;color:var(--muted);font-size:1.03rem}
.wa-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.wa-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;font-family:var(--mono);font-size:.74rem}
.wa-chips span{padding:5px 10px;border:1px solid var(--wire);border-radius:7px;color:var(--muted)}
.wa-chips span b{color:var(--ok);font-weight:400}

/* fake browser preview */
.wa-preview{display:flex;flex-direction:column}
.wa-preview .panel__body{flex:1;display:flex;flex-direction:column;gap:12px;background:var(--term)}
.wa-url{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.78rem;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--wire);border-radius:8px;padding:8px 12px;
}
.wa-url .lock{color:var(--ok)}
.wa-url .caret{width:1px;height:1em;background:var(--accent-2);animation:wa-blink 1.1s steps(1) infinite}
@keyframes wa-blink{50%{opacity:0}}
.wa-skeleton{flex:1;display:grid;gap:10px;align-content:start;padding-top:4px}
.wa-skeleton i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.04));}
.wa-skeleton i:nth-child(1){width:70%}
.wa-skeleton i:nth-child(2){width:92%}
.wa-skeleton i:nth-child(3){width:84%}
.wa-skeleton i:nth-child(4){width:55%;background:linear-gradient(90deg,rgba(67,104,250,.5),rgba(67,104,250,.15))}
.wa-skeleton i:nth-child(5){width:96%}
.wa-skeleton i:nth-child(6){width:63%}

/* ---- tree (what's included) ---- */
.tree{list-style:none;font-family:var(--mono);font-size:.9rem}
.tree > li:first-child{color:var(--accent-2);padding:6px 0 14px;border-bottom:1px solid var(--line)}
.tree__node{position:relative;padding:14px 0 14px 40px;border-bottom:1px solid var(--wire)}
.tree__node:last-child{border-bottom:0}
.tree__node::before{
  content:"";position:absolute;left:12px;top:0;height:50%;width:20px;
  border-left:1px solid var(--wire);border-bottom:1px solid var(--wire);
  border-bottom-left-radius:6px;
}
.tree__node::after{content:"";position:absolute;left:12px;top:50%;bottom:0;border-left:1px solid var(--wire)}
.tree__node:last-child::after{display:none}
.tree__name{color:var(--accent-2)}
.tree__desc{display:block;margin-top:5px;color:var(--muted);font-family:Inter,system-ui,sans-serif;font-size:.86rem;line-height:1.5}
.tree__node:hover{background:rgba(255,255,255,.03)}

/* ---- terminal (approach) ---- */
.term{background:var(--term);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.term__bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.term__bar i{width:10px;height:10px;border-radius:50%}
.term__bar i:nth-child(1){background:#ff5f57}.term__bar i:nth-child(2){background:#febc2e}.term__bar i:nth-child(3){background:#28c840}
.term__bar span{margin-left:8px}
.term__body{padding:22px 24px;font-family:var(--mono);font-size:.88rem;line-height:1.85;overflow-x:auto}
.term__line{white-space:pre;color:var(--ink)}
.term__line .p{color:var(--ok)}                 /* $ prompt */
.term__line .c{color:var(--cy)}                 /* command */
.term__out{white-space:pre;color:var(--muted)}
.term__out .ok{color:var(--ok)}
.term__gap{height:14px}

/* ---- repo listing + deps (what you get) ---- */
.wa-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:24px}
.filelist{list-style:none;font-family:var(--mono);font-size:.86rem}
.filelist li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--wire)}
.filelist li:last-child{border-bottom:0}
.filelist .f{color:var(--ink);min-width:14ch}
.filelist .d{color:var(--muted)}
.deps{font-family:var(--mono);font-size:.85rem;line-height:1.9;color:var(--muted);white-space:pre-wrap}
.deps .k{color:var(--cy)}
.deps .v{color:var(--ok)}

/* ---- packages (related) ---- */
.pkgs{list-style:none;font-family:var(--mono);margin-top:20px}
.pkgs li{border-bottom:1px solid var(--wire)}
.pkgs li:last-child{border-bottom:0}
.pkgs a{display:flex;align-items:center;gap:12px;padding:16px 8px;color:var(--ink);font-size:.92rem;transition:background .15s ease,padding .15s ease}
.pkgs a:hover{background:rgba(255,255,255,.04);padding-left:16px}
.pkgs .scope{color:var(--muted)}
.pkgs .arrow{margin-left:auto;color:var(--accent-2)}
.pkgs .note{font-family:Inter,system-ui,sans-serif;font-size:.82rem;color:var(--muted)}

/* ---- cta ---- */
.wa-cta{padding:80px 0 96px;text-align:center}
.wa-cta h2{font-size:clamp(2rem,4.5vw,3rem)}
.wa-cta p{color:var(--muted);max-width:44ch;margin:14px auto 26px}

@media(max-width:900px){
  .wa-hero__grid{grid-template-columns:1fr}
  .wa-preview{min-height:280px}
  .wa-cols{grid-template-columns:1fr}
  .ws-bar__crumb{display:none}
}
@media(prefers-reduced-motion:reduce){
  .wa-url .caret{animation:none}
}