/* =============================================================
   THE HANGAR — mcp.lakesideai.dev  (App / "Instrument" surface)
   Static port of the design-system product language: cool canvas,
   white hairline panels, blueprint blue + signal green, all-mono
   data, the status-dot system, and ONE sanctioned dark element —
   the contained Console for code/terminal content.
   Tokens come from ds/tokens.css; fonts from fonts/fonts.css.
   ============================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-relaxed);
  color:var(--ink-700);background:var(--app-canvas);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;border-radius:2px}

/* inline links inside body copy keep an underline (WCAG link-in-text) */
.article p a,.article li a,.contribute-box p a,.panel p a,.auth-note a,.subtitle a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}

.container{max-width:var(--container-site);margin:0 auto;padding:0 40px;position:relative}

/* ---- SKIP LINK ---- */
.skip-link{
  position:absolute;top:-46px;left:8px;z-index:1000;background:var(--green-600);color:#fff;
  padding:10px 16px;font-family:var(--font-mono);font-size:var(--fs-xs);border-radius:var(--radius-sm);text-decoration:none;
}
.skip-link:focus{top:8px;text-decoration:none}

/* ---- BRAND MARK ---- */
.brandmark{display:inline-flex;align-items:center;gap:.55em;color:var(--ink-800);text-decoration:none;font-size:13px}
.brandmark:hover{text-decoration:none}
.brandmark .tri{width:0;height:0;flex:none;border-left:1em solid var(--green-600);border-top:.62em solid transparent;border-bottom:.62em solid transparent}
.brandmark .wm{font-family:var(--font-mono);font-weight:var(--fw-semibold);letter-spacing:.13em;line-height:1;white-space:nowrap}

/* ---- NAV ---- */
nav.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--app-line)}
nav.site .container{display:flex;align-items:center;justify-content:space-between;padding-top:13px;padding-bottom:13px}
nav.site .links{display:flex;gap:24px;font-family:var(--font-mono);font-size:var(--fs-xs)}
nav.site .links a{color:var(--ink-500)}
nav.site .links a:hover{color:var(--ink-800);text-decoration:none}

/* ---- KICKER ---- */
.kicker{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--blue-700);display:block;margin-bottom:16px}

/* ---- STATUS DOT ---- */
.dot{display:inline-block;width:7px;height:7px;border-radius:var(--radius-pill);background:var(--ink-300);transition:background var(--dur-base) var(--ease-standard)}
.dot.ok{background:var(--green-600);box-shadow:0 0 0 3px var(--green-50)}
.dot.err{background:var(--red-600);box-shadow:0 0 0 3px var(--red-50)}

/* ---- STATUS PILL ---- */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);padding:4px 11px;border-radius:var(--radius-pill);border:1px solid var(--green-200);background:var(--green-50);color:var(--green-700)}
.pill .dot{width:6px;height:6px;box-shadow:none}

/* ---- CONSOLE (the one dark element) ---- */
.console{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--radius-md);overflow:hidden}
.console-head{display:flex;align-items:center;gap:9px;padding:9px 14px;background:#0f1720;border-bottom:1px solid var(--ink-700)}
.console-head .dots{display:flex;gap:5px}
.console-head .dots span{width:9px;height:9px;border-radius:50%;background:#3a4754}
.console-head .path{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-300)}
.console-body{margin:0;padding:16px 20px;font-family:var(--font-mono);font-size:12.5px;line-height:1.85;color:#c5cdd6;white-space:pre;overflow-x:auto}
.console-body .prompt{color:var(--green-500);user-select:none}
.console-body .cmd{color:#eef2f6}
.console-body .ok{color:var(--green-500)}
.console-body .err{color:#e8897c}
.console-body .comment{color:#6b7785}
.console-body .key{color:#9fd6ac}
.console-body .str{color:#eef2f6}
.console-body .diff-del{color:#e8897c}
.console-body .diff-add{color:#7fd99b}

/* ---- HERO ---- */
.hero{border-bottom:1px solid var(--app-line);background:var(--app-panel)}
.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.hero h1{font-family:var(--font-sans);font-size:clamp(34px,4vw,48px);font-weight:var(--fw-medium);line-height:1.06;letter-spacing:-.035em;color:var(--ink-800);margin-bottom:22px}
.hero h1 .accent{color:var(--green-700)}
.hero .tagline{font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--ink-500);max-width:480px;margin-bottom:28px}
.hero .status-bar{display:flex;gap:10px;flex-wrap:wrap}

/* ---- SECTIONS ---- */
section{border-bottom:1px solid var(--app-line)}
section .container{padding-top:72px;padding-bottom:72px}
section.panel-band{background:var(--app-panel)}
section h2{font-family:var(--font-sans);font-size:30px;font-weight:var(--fw-semibold);letter-spacing:-.02em;color:var(--ink-800);margin-bottom:10px}
section .subtitle{font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--ink-500);max-width:660px;margin-bottom:36px}

/* ---- TARGET (diff intro) ---- */
.target-lead{font-family:var(--font-sans);font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--ink-600);max-width:800px;margin-bottom:28px}
.target-lead.after{margin-top:28px;margin-bottom:0}
.target-kicker{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--blue-700);letter-spacing:var(--ls-kicker);text-transform:uppercase;margin-bottom:18px;display:block}

/* ---- COMPOSE ---- */
.compose-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:start}
.compose-right{display:flex;flex-direction:column;gap:18px}
.compose-lead{font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--ink-500)}
.compose-features{list-style:none;font-family:var(--font-sans);font-size:var(--fs-base);color:var(--ink-600);line-height:1.6}
.compose-features li{padding:9px 0 9px 22px;position:relative;border-bottom:1px solid var(--app-line)}
.compose-features li:last-child{border-bottom:none}
.compose-features li::before{content:'>';position:absolute;left:0;top:9px;color:var(--green-600);font-family:var(--font-mono);font-weight:var(--fw-semibold)}
.compose-features li strong{color:var(--ink-800);font-family:var(--font-mono);font-size:.86em;font-weight:var(--fw-medium);margin-right:4px}

/* ---- SERVER CARDS ---- */
.servers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.server{background:var(--app-panel);border:1px solid var(--app-line);border-radius:var(--radius-md);padding:22px 24px;transition:box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.server:hover{box-shadow:var(--shadow-sm);border-color:var(--app-line)}
.server-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.server-head .id{font-family:var(--font-mono);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--ink-800)}
.server-head .id .slash{color:var(--green-600)}
.server-head .id .name{color:var(--ink-400);font-weight:var(--fw-regular);margin-left:8px;font-size:13px}
.server-desc{font-family:var(--font-sans);font-size:13.5px;line-height:1.6;color:var(--ink-500);margin-bottom:14px}
.server-spec{display:grid;grid-template-columns:80px 1fr;gap:7px 16px;font-family:var(--font-mono);font-size:11.5px}
.server-spec .k{color:var(--ink-300)}
.server-spec .v{color:var(--ink-600)}
.server-spec .v.endpoint{color:var(--blue-600)}

/* ---- CONNECT TABS ---- */
.tabs{display:flex;border-bottom:1px solid var(--app-line)}
.tab{padding:11px 22px;border:none;background:transparent;cursor:pointer;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-400);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.tab:hover{color:var(--ink-600)}
.tab.active{color:var(--blue-700);border-bottom-color:var(--blue-700)}
.tab-wrap{position:relative}
.tab-wrap .console{border-top-left-radius:0;border-top-right-radius:0}
.panel{display:none}
.panel.active{display:block}
.copy-btn{position:absolute;top:14px;right:14px;background:var(--ink-700);border:1px solid var(--ink-600);color:var(--ink-200);padding:4px 12px;font-size:11px;cursor:pointer;font-family:var(--font-mono);border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-standard)}
.copy-btn:hover{color:var(--green-500)}
.panel.with-text{background:var(--app-panel);border:1px solid var(--ink-700);border-top:none;padding:0}
/* claude.ai panel mixes prose + code: render prose on the dark console body */

/* ---- CALLOUT (auth notes / contribute) ---- */
.callout{border:1px solid var(--blue-200);border-left:var(--bw-accent) solid var(--blue-700);background:var(--blue-50);padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-family:var(--font-sans);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-600);margin-top:16px}
.callout .tag{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--blue-700);margin-right:8px}
.callout code{font-family:var(--font-mono);font-size:.92em;color:var(--blue-700);background:var(--app-panel);padding:1px 5px;border-radius:2px}

/* ---- ARTICLE (about) ---- */
.article{max-width:740px}
.article .meta{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-300);letter-spacing:.08em;text-transform:lowercase;margin-bottom:28px}
.article h3{font-family:var(--font-sans);font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--ink-800);margin:40px 0 14px}
.article h3 .h{color:var(--green-600);font-weight:var(--fw-regular);margin-right:6px;font-family:var(--font-mono)}
.article p{font-family:var(--font-sans);font-size:var(--fs-base);color:var(--ink-600);line-height:var(--lh-relaxed);margin-bottom:14px}
.article ul{list-style:none;font-family:var(--font-sans);font-size:var(--fs-base);color:var(--ink-600);margin-bottom:14px}
.article li{padding:6px 0 6px 20px;position:relative;line-height:1.6}
.article li::before{content:'>';position:absolute;left:0;top:6px;color:var(--green-600);font-family:var(--font-mono);font-weight:var(--fw-semibold)}
.article li strong{color:var(--ink-800);font-family:var(--font-mono);font-size:.87em;font-weight:var(--fw-medium)}
.article code{font-family:var(--font-mono);font-size:.9em;color:var(--blue-700);background:var(--app-subtle);padding:1px 5px;border-radius:2px}

/* ---- PROVENANCE PANEL ---- */
.prov-demo{max-width:600px;margin:40px auto 0;border:1px solid var(--app-line);border-radius:var(--radius-md);overflow:hidden;background:var(--app-panel)}
.prov-head{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--app-line);font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-300)}
.prov-head .path{margin-left:auto;color:var(--ink-500)}
.prov-body{padding:20px}
.prov-body svg{display:block;width:100%;height:auto}
.prov-cap{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-400);text-align:center;margin-top:12px;letter-spacing:.04em}

/* ---- CASE STUDIES ---- */
.studies{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.study{background:var(--app-panel);border:1px solid var(--app-line);border-radius:var(--radius-md);overflow:hidden;display:block;color:inherit;text-decoration:none;transition:box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.study:hover{text-decoration:none;box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.study-thumb{aspect-ratio:16/9;background:#fff;border-bottom:1px solid var(--app-line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.study-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.study-thumb.ascii{background:var(--ink-800);padding:20px;align-items:stretch}
.study-thumb .ascii-art{font-family:var(--font-mono);color:#9aa6b2;text-align:left;line-height:1.35;white-space:pre;font-size:.66rem;margin:auto 0}
.study-thumb .ascii-art .accent{color:var(--green-500)}
.study-body{padding:22px 26px}
.study-body .meta{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--green-700);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:6px}
.study-body h3{font-family:var(--font-sans);font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--ink-800);margin-bottom:8px}
.study-body p{font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--ink-500);line-height:1.6}

/* ---- CITATIONS ---- */
.citations{max-width:880px;display:flex;flex-direction:column;gap:16px}
.citation{background:var(--app-panel);border:1px solid var(--app-line);border-radius:var(--radius-md);padding:20px 24px;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.7;white-space:pre;overflow-x:auto;color:var(--ink-600)}
.citation .bib-tag{color:var(--green-700);font-weight:var(--fw-semibold)}
.citation .bib-key{color:var(--ink-800)}
.citation .bib-field{color:var(--ink-300)}
.citation .bib-val{color:var(--ink-600)}
.citation .bib-str{color:var(--blue-700)}
.citation .links{margin-top:12px;font-size:var(--fs-xs);white-space:normal}
.citation .links a{margin-right:20px}

/* ---- CONTRIBUTE ---- */
.contribute-box{max-width:860px;background:var(--app-panel);border:1px solid var(--green-200);border-left:3px solid var(--green-600);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:26px 30px;font-family:var(--font-sans)}
.contribute-box p{color:var(--ink-600);font-size:var(--fs-base);margin-bottom:12px;line-height:1.65}
.contribute-box p:last-child{margin-bottom:0}
.contribute-cta{text-align:center;margin:22px 0}
.contribute-cta a{display:inline-flex;align-items:center;font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:var(--fs-sm);color:#fff;background:var(--green-600);border:var(--bw-rule) solid var(--green-600);padding:0 22px;height:var(--control-h-md);border-radius:var(--radius-sm);text-decoration:none;transition:background var(--dur-fast) var(--ease-standard)}
.contribute-cta a:hover{background:var(--green-700);text-decoration:none}

/* ---- FOOTER ---- */
footer{border-bottom:none}
footer .container{padding:40px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
footer .meta,footer .legal{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-300);letter-spacing:.04em}
footer a{color:var(--ink-500)}
footer a:hover{color:var(--green-700)}
footer .sep{margin:0 10px;color:var(--green-600)}

/* ---- RESPONSIVE ---- */
@media(max-width:860px){
  .hero .container{grid-template-columns:1fr;gap:32px}
  .compose-grid{grid-template-columns:1fr;gap:24px}
  .servers{grid-template-columns:1fr}
  .studies{grid-template-columns:1fr}
  .server-spec{grid-template-columns:1fr;gap:2px}
  nav.site .links{gap:14px}
}
@media(max-width:540px){
  .container{padding:0 20px}
  section .container{padding-top:56px;padding-bottom:56px}
  nav.site .links a:nth-child(n+5){display:none}
}