/* Edge design system 1.0: content pages (every page tools/stamp_chrome.py renders in DS1 mode).
   Loads after edge-kit-tokens.css and edge-kit-bridge.css (the bridge re-points the legacy token
   families at the kit). This layer adds the homepage's chrome and art world, calmer:
     - header and footer exactly as the homepage (home-v13a6): arch + lowercase edge, three links,
       one small blue key; the footer stands on the engraved hills over the meadow green;
     - a clean sky gradient behind the top of the page with one halftone cloud, fading into paper;
     - display type at weight 450, closely set; plain white panels on a 1px line, no glass, no glow;
     - the old dark promo band becomes a sky panel with clouds, ink type.
   Colours: kit tokens, plus the homepage's sky stops and meadow green (assets/edge-kit-home-v13.css,
   edge-kit-home-v2.css), which live only in the artwork. */

:root {
  --ds1-sky-1: #8dbbdd; --ds1-sky-2: #b2d3e8; --ds1-sky-3: #d9e7ea;
  --ds1-meadow: #334626; --ds1-meadow-ink: #e6ecdf; --ds1-meadow-muted: #b9c6ad;
  --ds1-gutter: max(20px, min(5vw, 72px));
  --ds1-radius: var(--edge-radius-media);
}

/* ---- ground -------------------------------------------------------------------------------- */
/* background A (Federico 10-22): the homepage's warm paper, one colour under every page */
html:root:not(#kit) { --edge-paper: #f5f3eb; --paper: #f5f3eb; }
html:root:not(#kit) { background: var(--edge-paper) !important; }
html:root:not(#kit) body { position: relative; min-height: 100vh; margin: 0; background: transparent !important; overflow-x: clip; }
html:root:not(#kit) body::before {
  content: "" !important; position: absolute !important; inset: 0 0 auto 0 !important; z-index: -10 !important;
  height: clamp(520px, 62vh, 720px) !important; pointer-events: none;
  background: linear-gradient(180deg, var(--ds1-sky-1) 0%, var(--ds1-sky-2) 34%, var(--ds1-sky-3) 64%, var(--edge-paper) 100%) !important;
}
/* one halftone cloud, top right, behind everything; replaces the bridge's half-moon */
html:root:not(#kit) body::after {
  content: "" !important; position: absolute !important; z-index: -9 !important; pointer-events: none;
  --ds1-cloud: min(30vw, 430px);
  top: 96px !important; right: 0 !important; left: auto !important;
  width: calc(var(--ds1-cloud) * .86) !important; height: calc(var(--ds1-cloud) * .59) !important;
  background: url("/assets/kit/v11/cloud-puff.webp") left center / var(--ds1-cloud) auto no-repeat !important; opacity: .8 !important;
}
@media (max-width: 700px) {
  html:root:not(#kit) body::before { height: 460px !important; }
  html:root:not(#kit) body::after { --ds1-cloud: 200px; top: 58px !important; opacity: .7 !important; }
}

/* ---- header: the homepage nav ---------------------------------------------------------------- */
html:root:not(#kit) .ds1-nav {
  position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1440px; height: 64px; margin: 0 auto; padding: 0 var(--ds1-gutter); box-sizing: border-box;
  font-family: var(--edge-font-ui); color: var(--edge-ink); background: transparent; border: 0;
}
html:root:not(#kit) .ds1-brand {
  display: inline-flex; align-items: center; gap: 7px; font: 500 19px/1.5 var(--edge-font-ui); letter-spacing: -.03em;
  color: var(--edge-ink); text-decoration: none;
}
html:root:not(#kit) .ds1-brand img { width: 21px; height: auto; display: block; }
html:root:not(#kit) .ds1-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
html:root:not(#kit) .ds1-links a { font: 400 14px/1.5 var(--edge-font-ui); color: var(--edge-ink); text-decoration: none; }
html:root:not(#kit) .ds1-links a:hover, html:root:not(#kit) .ds1-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
html:root:not(#kit) .ds1-get {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 34px; padding: 0 14px;
  font: 500 13.5px/1.5 var(--edge-font-ui); color: var(--edge-white) !important; text-decoration: none; white-space: nowrap;
  background: var(--edge-blue); border: 1px solid var(--edge-blue-base); border-radius: var(--edge-radius-control);
  box-shadow: var(--edge-shadow-key); transition: transform var(--edge-motion-press) var(--edge-motion-ease), box-shadow var(--edge-motion-press) var(--edge-motion-ease);
}
html:root:not(#kit) .ds1-get:hover { background: var(--edge-blue-hover); box-shadow: var(--edge-shadow-key-hover); transform: translateY(-1px); }
html:root:not(#kit) .ds1-get:active { box-shadow: var(--edge-shadow-key-pressed); transform: translateY(2px); }
html:root:not(#kit) .ds1-get.is-copied { background: var(--edge-ink); border-color: #0b1510; box-shadow: 0 6px 16px #16251e26; }
html:root:not(#kit) .ds1-get:focus-visible { outline: 2px solid var(--edge-blue); outline-offset: 3px; }
@media (max-width: 700px) {
  html:root:not(#kit) .ds1-nav { height: 56px; }
  html:root:not(#kit) .ds1-brand { font-size: 18px; }
  html:root:not(#kit) .ds1-brand img { width: 20px; }
  html:root:not(#kit) .ds1-links { display: none; }
}
@media (prefers-reduced-motion: reduce) { html:root:not(#kit) .ds1-get { transition: none; transform: none !important; } }

/* ---- footer: engraved hills over the meadow ---------------------------------------------------- */
html:root:not(#kit) .ds1-footer { position: relative; margin-top: clamp(64px, 8vw, 128px); font-family: var(--edge-font-ui); background: transparent; border: 0; }
html:root:not(#kit) .ds1-footer-hills {
  height: clamp(120px, 14vw, 210px); margin-bottom: -1px;
  background: url("/assets/kit/hills-band.webp") center top / max(100%, 1100px) auto no-repeat;
}
html:root:not(#kit) .ds1-footer-ground { background: var(--ds1-meadow); color: var(--ds1-meadow-ink); box-shadow: 0 60vh 0 0 var(--ds1-meadow); }
html:root:not(#kit) .ds1-footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px;
  max-width: 1440px; margin: 0 auto; padding: 24px var(--ds1-gutter) 40px; box-sizing: border-box;
}
html:root:not(#kit) .ds1-footer .ds1-brand { color: var(--ds1-meadow-ink); font-size: 19px; }
html:root:not(#kit) .ds1-footer .ds1-brand img { filter: brightness(0) invert(.94) sepia(.15); }
html:root:not(#kit) .ds1-footer-line { margin: 10px 0 6px; font-size: 14px; color: var(--ds1-meadow-ink); }
html:root:not(#kit) .ds1-footer-setup { font-size: 13px; color: var(--ds1-meadow-muted); text-decoration: none; }
html:root:not(#kit) .ds1-footer-nav { display: flex; flex-wrap: wrap; gap: 24px 56px; }
html:root:not(#kit) .ds1-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 96px; }
html:root:not(#kit) .ds1-footer-col h2 { margin: 0 0 4px; font: 500 12px/1.4 var(--edge-font-ui); letter-spacing: 0; color: var(--ds1-meadow-muted); }
html:root:not(#kit) .ds1-footer-col :is(a, button) {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 400 14px/1.5 var(--edge-font-ui); color: var(--ds1-meadow-ink); text-decoration: none;
}
html:root:not(#kit) .ds1-footer :is(a, button):hover { text-decoration: underline; text-underline-offset: 4px; }
html:root:not(#kit) .ds1-footer :is(a, button):focus-visible { outline: 2px solid var(--ds1-meadow-ink); outline-offset: 3px; }
@media (max-width: 700px) {
  html:root:not(#kit) .ds1-footer-hills { background-image: url("/assets/kit/hills-band-mobile.webp"); background-size: 100% auto; height: 34vw; }
  html:root:not(#kit) .ds1-footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; width: 100%; }
}

/* ---- type ------------------------------------------------------------------------------------- */
html:root:not(#kit) body { font-family: var(--edge-font-ui) !important; color: var(--edge-ink); }
html:root:not(#kit) main :is(h1, h2, h3), html:root:not(#kit) :is(.sv3, .ov) :is(h1, h2, h3) { color: var(--edge-ink) !important; }
html:root:not(#kit) main h1, html:root:not(#kit) :is(.sv3, .ov) h1 { font-weight: var(--edge-type-weight-display) !important; letter-spacing: -.045em !important; }
html:root:not(#kit) main h2, html:root:not(#kit) :is(.sv3, .ov) h2 { font-weight: 500 !important; letter-spacing: -.035em !important; }
html:root:not(#kit) main h3 { font-weight: 500 !important; letter-spacing: -.015em !important; }

/* ---- surfaces: plain panels, no glass ---------------------------------------------------------- */
html:root:not(#kit) :is(.edge-glass, .sky-glass, .card, .tile, .panel, .plan, .stat, .setup-copy, .prompt-box, .goal, .filters, .quick,
  .skill-group, .metric-card, .study-chart, .benchmark-board, .note, .callout, .search-form, .detail-panel, .detail-card,
  .legal-document, .task-card, .output-card, .bench-pending, .scenario-card) {
  background: var(--edge-surface) !important; border: 1px solid var(--edge-line) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* layout wrappers that the glass adapter painted: they carry panels, they are not one */
html:root:not(#kit) .detail-panel { background: transparent !important; border: 0 !important; }
html:root:not(#kit) ::selection { background: var(--edge-blue-soft); color: var(--edge-ink); }

/* ---- closing band: a sky panel with clouds (was the dark promo) --------------------------------- */
html:root:not(#kit) :is(.v7-end, .ov-promo) {
  background: url("/assets/kit/v11/cloud-bank.webp") right -40px bottom -30px / min(70%, 760px) auto no-repeat,
              linear-gradient(180deg, var(--ds1-sky-1) 0%, var(--ds1-sky-2) 55%, var(--ds1-sky-3) 100%) !important;
  border: 0 !important; border-radius: var(--ds1-radius) !important; box-shadow: none !important; color: var(--edge-ink) !important;
}
html:root:not(#kit) .ov-promo :is(h2, p, a:not(.edge-key):not(.ov-btn)) { color: var(--edge-ink) !important; }
@media (max-width: 700px) { html:root:not(#kit) :is(.v7-end, .ov-promo) { background-size: 120% auto, auto !important; background-position: center bottom -20px, 0 0 !important; } }

/* ---- icon tiles: the line icon on a soft blue tile (the bridge's sky swatches read as broken images) */
html:root:not(#kit) :is(.v3-use > span, .v3-how .hi > span, .pr-plan-ic) {
  background: var(--edge-blue-soft) !important; border: 0 !important; border-radius: var(--edge-radius-control) !important; color: var(--edge-blue) !important;
}
html:root:not(#kit) :is(.v3-use > span, .v3-how .hi > span, .pr-plan-ic) > svg { visibility: visible !important; }

/* ---- the pixel accent line becomes the kit's display line in Edge blue (as on the homepage) ---- */
html:root:not(#kit) { --font-pixel: var(--edge-font-ui); --ov-pixel: var(--edge-font-ui); }
/* colour stays the page's own (blue accents stay blue; the docs' .pix is already Inter in ink) */
html:root:not(#kit) :is(.pixel, .ov-pixel, .pixel-heading, .hero .pixel, .compare-hero .pixel) {
  font-family: var(--edge-font-ui) !important; font-weight: var(--edge-type-weight-display) !important;
  letter-spacing: -.045em !important; -webkit-font-smoothing: antialiased;
}
html:root:not(#kit) :is(.docs-main .stage .tag, .docs-main .step .n, .step .n) { font-family: var(--edge-font-ui) !important; font-weight: 500 !important; letter-spacing: 0 !important; }

/* ---- pricing: same plans, no glow, display-weight prices ------------------------------------- */
html:root:not(#kit) .pr-plan { box-shadow: none !important; background: var(--edge-surface) !important; border: 1px solid var(--edge-line) !important; border-radius: var(--ds1-radius) !important; }
html:root:not(#kit) .pr-plan#pro { border-color: var(--edge-blue) !important; }
html:root:not(#kit) .pr-price b { font-weight: var(--edge-type-weight-display) !important; letter-spacing: -.045em !important; }

/* ---- keys: the kit keycap face is flat (no lit gradient); edge and press motion stay from edge-key.css */
html:root:not(#kit) :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn,
  .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy]) {
  background: var(--k) !important; background-blend-mode: normal !important; --k-glow: #152b4414;
}

/* layout-scan fixes (10-22). A creator hero whose logo the app leaves empty (garry-tan, mengto: no mark on file) drops the
   empty 88px box and its column instead of showing a blank tile. A run card's repo header wraps on phones instead of running
   the repo name under "pinned <sha>" (anthropics/claude-plugins-official at 390). */
.creator-hero .skill-heading:has(> .creator-logo:empty){grid-template-columns:minmax(0,1fr)!important}
.creator-hero .skill-heading:has(> .creator-logo:empty) > *{grid-column:1/-1!important}
.creator-hero .creator-logo:empty{display:none!important}
.c5 .wh{flex-wrap:wrap;row-gap:4px}
.c5 .wh>span{min-width:0;overflow-wrap:anywhere}