/* /apps page — apps.html links doc.css directly first, then this file. No
   @import here on purpose: nested @import delays applying doc.css rules and
   bites pages that depend on its tokens / #ascii-bg styles during first paint. */

:root{
  /* font-size scale — only what /apps actually consumes; doc.css already provides --bg/--fg/--muted/--line/--dim */
  --fs-meta: 13px;     /* small mono notes under CTAs */
  --fs-body: 15px;     /* feature list, paragraph */
  --fs-sub: 16px;      /* section sub */
  /* space scale */
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
}

/* utilities — for the one-off "style=…" lines that would otherwise sprout */
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mt-5{margin-top:var(--space-5)}
.mt-6{margin-top:var(--space-6)}
.mt-7{margin-top:var(--space-7)}
.mt-8{margin-top:var(--space-8)}
.ml-3{margin-left:var(--space-3)}

.meta-note{font-size:var(--fs-meta);margin-top:var(--space-5);color:var(--muted)}
.meta-note a{color:var(--fg);border-bottom:1px solid var(--dim)}
.meta-note a:hover{border-color:var(--fg)}

.link-inline{color:var(--fg);border-bottom:1px solid var(--dim)}
.link-inline:hover{border-color:var(--fg)}

section{padding:96px 0;position:relative;z-index:2}
section + section{border-top:1px solid var(--line)}

.eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow:before{content:"";width:24px;height:1px;background:var(--muted)}

h1{
  font-weight:700;font-size:clamp(44px,7vw,88px);line-height:.98;
  letter-spacing:-0.04em;margin-bottom:24px;text-wrap:balance;
}
h1 .slash{color:var(--muted);font-weight:500}
h2{font-weight:700;font-size:clamp(32px,4vw,56px);line-height:1.05;letter-spacing:-0.03em;margin-bottom:20px;max-width:720px;text-wrap:balance}
p.lead{font-size:clamp(17px,1.6vw,20px);max-width:680px;color:var(--fg);line-height:1.5;margin-bottom:36px;text-wrap:pretty}
p.lead em{color:var(--muted);font-style:normal}
p.sub{font-size:16px;color:var(--muted);max-width:620px;line-height:1.6;text-wrap:pretty}

/* Hero */
.apps-hero{padding:96px 0 64px}
.apps-hero .kicker{
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:10px;margin-bottom:24px;
}
.apps-hero .kicker .dot{width:6px;height:6px;background:#7fb069;border-radius:50%}

.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",monospace;font-size:13px;
  padding:12px 20px;border-radius:3px;text-decoration:none;
  border:0;cursor:pointer;transition:all .18s;
}
.btn-primary{background:var(--fg);color:var(--bg);border:1px solid var(--fg)}
.btn-primary:hover{background:transparent;color:var(--fg)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--fg)}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}
.btn-store{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--line)}
.btn-disabled{cursor:default;opacity:.7}
.btn-disabled:hover{border-color:var(--line);background:rgba(255,255,255,.04)}

/* App block layout — copy left, art right; flip alternates */
.app-block{padding:88px 0}
.app-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:64px;align-items:start;
}
.app-grid-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.app-grid-flip .app-art{order:1}
.app-grid-flip .app-copy{order:2}
@media(max-width:900px){
  .app-grid,.app-grid-flip{grid-template-columns:1fr;gap:48px}
  .app-grid-flip .app-art{order:0}
  .app-grid-flip .app-copy{order:0}
}

.feature-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.feature-list li{
  font-size:15px;color:var(--muted);line-height:1.55;
  padding-left:22px;position:relative;text-wrap:pretty;
}
.feature-list li:before{
  content:"";position:absolute;left:0;top:.65em;
  width:10px;height:1px;background:var(--muted);
}
.feature-list strong{color:var(--fg);font-weight:600}
.feature-list a{color:var(--fg);border-bottom:1px solid var(--dim)}
.feature-list a:hover{border-color:var(--fg)}

.app-footer-note{border-top:1px solid var(--line);padding:80px 0 120px}

/* ── Faux desktop window (inline mock, not the overlay) ─────────────────── */
.art-window{
  border:1px solid var(--line);
  border-radius:10px;overflow:hidden;
  background:#0e0e0e;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
}
:root[data-theme="light"] .art-window{background:#fafaf6}
.art-titlebar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.tl{width:11px;height:11px;border-radius:50%;background:#3a3a37;display:inline-block}
.tl:nth-child(1){background:#ff5f56}
.tl:nth-child(2){background:#ffbd2e}
.tl:nth-child(3){background:#27c93f}
.art-title{margin-left:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:var(--muted)}

.art-body{display:grid;grid-template-columns:220px 1fr;min-height:420px}
.art-sidebar{
  border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:4px;
  font-family:"Space Grotesk",sans-serif;font-size:13px;
}
.art-pill{
  align-self:stretch;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.06em;padding:8px 10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;color:var(--muted);
  margin-bottom:10px;
}
.art-row,.art-row-sub{
  padding:8px 10px;border-radius:5px;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.art-row-active{background:rgba(255,255,255,.06);color:var(--fg)}
.art-row-sub{font-size:12px;color:var(--dim)}
.art-mark{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--muted);flex-shrink:0}
.art-mark-doc{background:#3d7ea6}
.art-mark-pantry{background:#d97757}
.art-mark-builder{background:#c14545}
.art-mark-vera{background:#9d4dc6}
.art-mark-wg{background:#3fb37a;border-radius:1px}
.art-meta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;color:var(--dim);margin-left:auto}
.art-divider{height:1px;background:var(--line);margin:8px 4px}

.art-main{
  display:flex;flex-direction:column;
  font-family:"Space Grotesk",sans-serif;font-size:13px;
  min-width:0;
}
.art-main-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.art-main-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.art-hash{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--muted);font-size:14px}
.art-profile{font-size:15px;font-weight:600;color:var(--fg)}
.art-meta-inline{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-main-actions{display:flex;gap:4px;color:var(--muted)}
.art-action{
  width:24px;height:24px;border:1px solid var(--line);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
}

.art-stream{
  flex:1;padding:18px;display:flex;flex-direction:column;gap:18px;min-height:0;
}
.art-msg{display:flex;flex-direction:column;gap:8px;max-width:82%}
.art-msg-user{align-self:flex-end;align-items:flex-end}
.art-msg-user span{
  background:rgba(255,255,255,.06);border-radius:14px 14px 4px 14px;
  padding:8px 12px;color:var(--fg);
}
.art-msg-bot{align-self:flex-start;width:100%}
.art-msg-bot span{color:var(--muted);line-height:1.5;display:block}
.art-tool{
  display:inline-flex !important;align-items:center;gap:8px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;color:var(--muted) !important;
  padding:6px 10px;border:1px solid var(--line);border-radius:6px;
  align-self:flex-start;background:rgba(255,255,255,.02);
  max-width:100%;
}
.art-tool-icon{font-size:8px;color:var(--muted)}
.art-tool-icon-on{color:#c8a24e;animation:art-pulse 1.4s ease-in-out infinite}
.art-tool-arg{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-tool-running{border-color:rgba(200,162,78,.4) !important;background:rgba(200,162,78,.05) !important}
.art-tool-spin{margin-left:auto;color:#c8a24e;animation:art-spin 1.2s linear infinite;display:inline-block}
@keyframes art-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes art-spin{to{transform:rotate(360deg)}}

.art-composer{
  display:flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;color:var(--dim);
  border-top:1px solid var(--line);padding:14px 18px;
}
.art-composer-hash{color:var(--dim)}
.art-composer-text{flex:1}
.art-kbd{
  font-size:10px;color:var(--muted);padding:2px 6px;
  border:1px solid var(--line);border-radius:3px;
}

/* ── Faux phone art (iPhone-ish proportions: 9:19.5 aspect) ──────────────── */
.art-phone{
  width:300px;aspect-ratio:9/19.5;max-width:100%;margin:0 auto;
  border-radius:40px;border:1px solid var(--line);
  background:#0a0a0a;padding:7px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
  position:relative;
}
:root[data-theme="light"] .art-phone{background:#1a1a18}
.art-phone-screen{
  border-radius:34px;background:#0e0e0e;
  display:flex;flex-direction:column;overflow:hidden;
  height:100%;
  position:relative;
}
:root[data-theme="light"] .art-phone-screen{background:#f8f7f3}

.art-phone-statusbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px 6px;height:42px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;color:var(--fg);
  position:relative;
}
.art-phone-time{font-weight:600;font-feature-settings:"tnum"}
/* Dynamic island — centered black pill instead of an inset notch */
.art-phone-island{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:88px;height:26px;background:#000;border-radius:999px;
}
.art-phone-icons{display:flex;gap:5px;align-items:center}
.art-phone-sig,.art-phone-wifi,.art-phone-bat{
  width:14px;height:10px;background:var(--fg);border-radius:1px;display:inline-block;opacity:.85;
}
.art-phone-bat{width:22px;border:1px solid var(--fg);background:transparent;position:relative}
.art-phone-bat:after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:60%;background:var(--fg);border-radius:1px}

.art-phone-header{
  display:flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;
  font-size:15px;color:var(--fg);padding:10px 18px 12px;border-bottom:1px solid var(--line);
}
.art-phone-name{font-weight:600}
.art-phone-pill{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;
  color:var(--muted);padding:3px 8px;border:1px solid var(--line);border-radius:999px;
}
.art-phone-body{
  flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden;
}
.art-composer-phone{
  display:flex;align-items:center;gap:8px;
  padding:12px 18px;border-top:1px solid var(--line);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--dim);
}
.art-composer-phone .art-composer-text{flex:1}
.art-composer-send{
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
}
.art-phone-home{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:38%;height:4px;background:var(--fg);border-radius:2px;opacity:.4;
}

/* ── Preview overlay ────────────────────────────────────────────────────── */
.preview-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s ease;
}
/* Without this, display:flex overrides the browser's [hidden]{display:none} default and the (invisible) overlay swallows every click on the page. */
.preview-overlay[hidden]{display:none}
.preview-overlay.preview-open{opacity:1}
.preview-backdrop{
  position:absolute;inset:0;cursor:pointer;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
:root[data-theme="light"] .preview-backdrop{background:rgba(20,20,20,.55)}

.preview-frame{
  position:relative;z-index:1;
  /* Simulate the desktop app's natural starting size (1280x800) whenever it fits — leave margins on every side. The prototype provides its own rounded chrome, so no border / border-radius / shadow / background here — the iframe corners are transparent and the backdrop shows through. */
  width:min(1280px, calc(100vw - 64px));
  height:min(800px, calc(100vh - 64px));
  display:flex;flex-direction:column;
  background:transparent;
  transform:translateY(8px) scale(.985);
  transition:transform .22s ease;
}
.preview-overlay.preview-open .preview-frame{transform:translateY(0) scale(1)}

/* Floating close pill — lives ON the backdrop, NOT on the preview frame, so we don't double-chrome the prototype (which already has its own macOS-style titlebar). */
.preview-close-float{
  position:absolute;top:20px;right:20px;z-index:2;
  appearance:none;background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.15);
  color:#e8e8e6;font-family:"JetBrains Mono",monospace;font-size:11px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .15s,border-color .15s;
}
.preview-close-float:hover{background:rgba(0,0,0,.8);border-color:rgba(255,255,255,.4)}

.preview-body{flex:1;overflow:hidden;min-height:0;position:relative;background:transparent}
#preview-iframe{
  width:100%;height:100%;
  border:0;display:block;background:transparent;
}
.preview-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#7a7a76;font-family:"JetBrains Mono",monospace;font-size:12px;
  pointer-events:none;
}
.preview-sidebar{
  border-right:1px solid #1c1c1a;padding:14px 10px;
  display:flex;flex-direction:column;gap:4px;
  font-family:"Space Grotesk",sans-serif;
  background:rgba(255,255,255,.015);
  overflow-y:auto;
}
.preview-conn-cell{
  padding:10px 12px;margin-bottom:8px;
  border:1px solid #1c1c1a;border-radius:6px;
  background:rgba(255,255,255,.02);
}
.preview-conn-name{font-size:13px;color:#e8e8e6;font-weight:500}
.preview-conn-meta{font-family:"JetBrains Mono",monospace;font-size:10px;color:#7a7a76;margin-top:3px}
.preview-section-title{
  font-family:"JetBrains Mono",monospace;font-size:10px;color:#7a7a76;
  letter-spacing:.1em;padding:14px 10px 6px;
}
.preview-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:5px;
  font-size:13px;color:#a8a8a4;cursor:default;
  transition:background .12s;
}
.preview-row:hover{background:rgba(255,255,255,.04)}
.preview-row-active{background:rgba(255,255,255,.06);color:#e8e8e6}
.preview-row-mark{font-size:9px;color:#7fb069}
.preview-row-mark-dim{color:#3a3a37}
.preview-row-mark-wg{color:#c8a24e}
.preview-row-name{flex:1;font-weight:500}
.preview-row-meta{font-family:"JetBrains Mono",monospace;font-size:10px;color:#5a5a55}
.preview-sidebar-footer{
  margin-top:auto;padding-top:10px;border-top:1px solid #1c1c1a;
  display:flex;flex-direction:column;gap:4px;
}
.preview-sidebar-btn{
  appearance:none;background:transparent;border:1px solid #1c1c1a;
  color:#a8a8a4;font-family:"JetBrains Mono",monospace;font-size:11px;
  padding:8px 12px;border-radius:4px;cursor:pointer;text-align:left;
  transition:.15s;
}
.preview-sidebar-btn:hover{color:#e8e8e6;border-color:#3a3a37}

.preview-main{
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
}
.preview-main-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:1px solid #1c1c1a;
}
.preview-main-title{display:flex;align-items:baseline;gap:10px;font-family:"Space Grotesk",sans-serif}
.preview-hash{font-family:"JetBrains Mono",monospace;color:#7a7a76;font-size:16px}
.preview-main-title span:nth-child(2){font-size:16px;font-weight:600;color:#e8e8e6}
.preview-meta{font-family:"JetBrains Mono",monospace;font-size:11px;color:#7a7a76;margin-left:6px}
.preview-main-actions{display:flex;gap:6px}
.preview-action{
  appearance:none;background:transparent;border:1px solid #1c1c1a;
  width:28px;height:28px;border-radius:4px;color:#7a7a76;cursor:pointer;
  font-size:14px;line-height:1;
}
.preview-action:hover{color:#e8e8e6;border-color:#3a3a37}

.preview-stream{
  flex:1;overflow-y:auto;padding:28px 24px;
  display:flex;flex-direction:column;gap:24px;
}
.preview-msg{display:flex;flex-direction:column;gap:10px;max-width:680px}
.preview-msg-user{align-self:flex-end;align-items:flex-end}
.preview-msg-bot{align-self:flex-start;width:100%}
.preview-bubble{
  background:rgba(255,255,255,.06);
  padding:10px 14px;border-radius:14px 14px 4px 14px;
  color:#e8e8e6;font-size:14px;line-height:1.45;
}
.preview-text{color:#d8d8d4;font-size:14px;line-height:1.55;text-wrap:pretty}
.preview-tool{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:11px;
  padding:7px 12px;border:1px solid #1c1c1a;border-radius:6px;
  background:rgba(255,255,255,.02);color:#a8a8a4;
  align-self:flex-start;max-width:100%;
}
.preview-tool-icon{font-size:9px;color:#a8a8a4}
.preview-tool-icon-running{color:#c8a24e;animation:preview-pulse 1.4s ease-in-out infinite}
@keyframes preview-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.preview-tool-name{color:#e8e8e6;font-weight:500}
.preview-tool-badge{
  padding:1px 6px;background:rgba(255,255,255,.06);border-radius:3px;
  font-size:10px;color:#a8a8a4;
}
.preview-tool-args{color:#7a7a76;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.preview-tool-spinner{margin-left:auto;color:#c8a24e;animation:preview-spin 1.2s linear infinite}
@keyframes preview-spin{to{transform:rotate(360deg)}}
.preview-tool-running{border-color:rgba(200,162,78,.4);background:rgba(200,162,78,.05)}

.preview-composer{
  display:flex;align-items:center;gap:10px;
  padding:16px 24px;border-top:1px solid #1c1c1a;
  font-family:"JetBrains Mono",monospace;font-size:13px;color:#7a7a76;
}
.preview-composer-hash{color:#5a5a55}
.preview-composer-placeholder{flex:1}
.preview-composer-send{
  width:28px;height:28px;border-radius:4px;
  background:rgba(255,255,255,.06);color:#7a7a76;
  display:inline-flex;align-items:center;justify-content:center;
}

@media(max-width:760px){
  .preview-frame{width:calc(100vw - 24px);height:calc(100vh - 24px);max-width:none;max-height:none}
  /* See-it-live needs ~1000px to feel useful — hide its CTAs on phones, the desktop block keeps the download CTA visible. */
  #open-preview, [data-open-preview]{display:none}
}

/* .bg-ctrl styling lives in doc.css (single source of truth across landing/docs/apps). */