/* NXT DEV - product stylesheet. Loaded only on NXT DEV pages (layout.ts adds /assets/p/dev.css after
   the shared layers). Personality: technical, precise, fast. Code-inspired type (JetBrains Mono for
   labels, paths and numbers), terminal accents ($ prompts, LEDs, tick bars, pane title bars) without
   turning the app into a terminal. Black and white only: states are drawn with shape, fill and
   hatching, never hue. Tokens only. */

@layer product {
  /* ---------- Identity ---------- */
  .p-dev { --dv-mono: var(--font-mono); --dv-ink: var(--c-text); --dv-hatch: repeating-linear-gradient(-45deg, var(--c-text) 0 1.5px, transparent 1.5px 4px); }
  .p-dev .page-head h1::after { content: '_'; margin-left: 0.08em; font: 500 0.8em/1 var(--dv-mono); color: var(--c-muted); animation: dv-blink 1.1s steps(1) infinite; }
  .p-dev .page-head .eyebrow { font-family: var(--dv-mono); }
  @keyframes dv-blink { 50% { opacity: 0; } }

  /* LEDs: shape carries the state (ok = disc, bad = square, warn = triangle, info = ring, off = dashed ring). */
  .dv-led { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c-text); vertical-align: middle; }
  .dv-led.is-bad { border-radius: 1px; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-text); }
  .dv-led.is-warn { border-radius: 0; width: 11px; height: 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .dv-led.is-info { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-text); }
  .dv-led.is-off, .dv-led:not([class*='is-']) { background: transparent; border: 1.5px dashed var(--c-muted); }

  .dv-method { display: inline-flex; align-items: center; justify-content: center; min-width: 4.4em; padding: 1px 6px; border: 1px solid var(--c-text); border-radius: var(--r-xs); font: 600 0.6875rem/18px var(--dv-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); background: var(--c-surface); white-space: nowrap; }
  .dv-m-post, .dv-m-fatal, .dv-m-error { background: var(--c-text); color: var(--c-surface); }
  .dv-m-put, .dv-m-patch, .dv-m-warning { background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-text) 22%, transparent) 0 1.5px, transparent 1.5px 4px); }
  .dv-m-delete { border-width: 2px; border-radius: 0; }
  .dv-m-head, .dv-m-options, .dv-m-info, .dv-m-debug { border-style: dashed; color: var(--c-muted); }

  .dv-sub { margin: var(--s-6) 0 var(--s-3); font: 600 var(--t-overline)/1.4 var(--dv-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
  .dv-sub::before { content: '// '; }

  /* ---------- Status line ($ nxt status) ---------- */
  .dv-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); padding: 10px var(--s-4); border-radius: var(--r-md); background: var(--c-text); color: var(--c-surface); font: 500 0.8125rem/1.5 var(--dv-mono); }
  .dv-status .dv-led { background: var(--c-surface); }
  .dv-status .dv-led.is-bad { box-shadow: 0 0 0 2px var(--c-text), 0 0 0 3px var(--c-surface); }
  .dv-status .dv-led.is-info { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-surface); }
  .dv-status .dv-led.is-off, .dv-status .dv-led:not([class*='is-']) { background: transparent; border-color: color-mix(in srgb, var(--c-surface) 60%, transparent); }
  .dv-prompt { color: color-mix(in srgb, var(--c-surface) 70%, transparent); }
  .dv-seg { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  .dv-seg b { font-weight: 700; }

  /* ---------- Overview grid & panes ---------- */
  .dv-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1100px) {
    .dv-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .dv-span-7 { grid-column: span 7; } .dv-span-5 { grid-column: span 5; } .dv-span-12 { grid-column: 1 / -1; }
  }
  .dv-pane { min-width: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); padding: 0 var(--s-4) var(--s-4); overflow: hidden; }
  .app-content > .dv-pane + .dv-pane { margin-top: var(--s-4); }
  .dv-pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 calc(-1 * var(--s-4)) var(--s-4); padding: 10px var(--s-4); border-bottom: 1px solid var(--c-border); background: var(--c-surface2); }
  .dv-pane-head h2 { margin: 0; font: 600 0.75rem/1.4 var(--dv-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .dv-pane-head h2::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 2px; background: var(--c-text); }
  .dv-pane-tag { font: 500 var(--t-caption)/1.4 var(--dv-mono); color: var(--c-muted); min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
  a.dv-pane-tag:hover { color: var(--c-text); text-decoration: underline; }

  .dv-attention { list-style: none; margin: 0; padding: 0; display: grid; }
  .dv-attention > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) 0; }
  .dv-attention > li + li { border-top: 1px dashed var(--c-border-strong); }
  .dv-attention a:not(.btn) { color: var(--c-text); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
  .dv-attention a:not(.btn):hover { text-decoration: underline; }
  .dv-attention p { margin: 2px 0 0; font: 400 var(--t-caption)/1.5 var(--dv-mono); color: var(--c-muted); overflow-wrap: anywhere; }
  .dv-att-dot { width: 10px; height: 10px; margin-top: 6px; background: var(--c-text); }
  .is-warn > .dv-att-dot { background: var(--dv-hatch); box-shadow: inset 0 0 0 1px var(--c-text); }
  .dv-clear { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-2) 0; }
  .dv-clear p { margin: 0; }

  .dv-board { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .dv-board a { display: grid; gap: 6px; padding: 10px var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast); }
  .dv-board a:hover { border-color: var(--c-text); }
  .dv-board-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
  .dv-board-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dv-board-up { font: 600 var(--t-small)/1 var(--dv-mono); }
  .dv-board-meta { font: 400 var(--t-caption)/1.4 var(--dv-mono); color: var(--c-muted); }

  /* Tick bar: one tick per check. Pass = short grey tick; failure = full-height black tick. */
  .dv-ticks { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
  .dv-ticks i { flex: 1 1 0; max-width: 14px; height: 55%; border-radius: 1px; background: color-mix(in srgb, var(--c-text) 30%, var(--c-surface)); }
  .dv-ticks i.bad { height: 100%; background: var(--c-text); }
  .dv-ticks.is-wide { height: 24px; }

  .dv-issues { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; }
  .dv-issues li + li { border-top: 1px solid var(--c-border); }
  .dv-issues a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: baseline; padding: 9px 0 9px 14px; position: relative; color: var(--c-text); text-decoration: none; }
  .dv-issues a::before, .dv-issue-list a::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; background: var(--c-text); }
  .dv-issues .lv-warning a::before, .dv-issue-list .lv-warning a::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-text); transform: rotate(45deg); }
  .dv-issues .lv-info a::before, .dv-issues .lv-debug a::before, .dv-issue-list .lv-info a::before, .dv-issue-list .lv-debug a::before { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-muted); }
  .dv-issues a:hover .dv-issue-msg { text-decoration: underline; }
  .dv-issue-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-small); }
  .dv-issue-msg b { font-family: var(--dv-mono); font-weight: 600; margin-right: 6px; }
  .dv-issue-meta { font: 500 var(--t-caption)/1 var(--dv-mono); color: var(--c-muted); white-space: nowrap; }

  .dv-log { list-style: none; margin: 0; padding: 0; display: grid; font: 400 0.75rem/1.4 var(--dv-mono); }
  .dv-log li + li { border-top: 1px solid var(--c-border); }
  .dv-log a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 't m p s' '. . b b'; gap: 2px var(--s-2); align-items: center; padding: 8px 0; color: var(--c-text); text-decoration: none; }
  .dv-log a:hover .dv-log-path { text-decoration: underline; }
  .dv-log-t { grid-area: t; color: var(--c-muted); }
  .dv-log .dv-method { grid-area: m; min-width: 3.8em; }
  .dv-log-path { grid-area: p; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .dv-log-size { grid-area: s; color: var(--c-muted); text-align: right; }
  .dv-log-bin { grid-area: b; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .dv-launch { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
  .dv-launch-item { display: grid; gap: 6px; align-content: start; padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast), transform var(--d-fast) var(--ease-out); }
  .dv-launch-item:hover { border-color: var(--c-text); transform: translateY(-1px); }
  .dv-launch-cmd { display: block; padding: 6px 10px; border-radius: var(--r-sm); background: var(--c-text); color: var(--c-surface); font: 500 0.75rem/1.5 var(--dv-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dv-launch-cmd span { opacity: 0.6; }
  .dv-launch-name { font-weight: 650; display: flex; gap: 6px; align-items: center; }
  .dv-pane .chart-fig .chart { height: 120px; }
  .dv-pane .chart-axis { height: 120px; }
  .dv-meters > * { margin: 0 !important; }
  .dv-meters { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .p-dev .onboarding { margin-bottom: var(--s-5); }

  /* ---------- Side rails (forms beside lists) ---------- */
  .dv-side-form { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
  .dv-side-form h2 { margin: 0; font: 600 0.75rem/1.4 var(--dv-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .dv-side-form .form { display: grid; gap: var(--s-3); }
  .dv-side-form > p { margin: 0; }
  .dv-2col { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
  .dv-curl { font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  .dv-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s-3); margin: 0; font-size: var(--t-small); }
  .dv-kv dt { color: var(--c-muted); font: 500 var(--t-caption)/1.6 var(--dv-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .dv-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .dv-details > summary { cursor: pointer; padding: 6px 0; color: var(--c-muted); }
  .dv-details[open] > summary { color: var(--c-text); }
  .dv-details .stack { margin-top: var(--s-2); }
  .dv-copy { display: flex; gap: var(--s-2); align-items: center; padding: 8px 8px 8px 12px !important; margin: 0; min-width: 0; }
  .dv-copy-val { flex: 1; min-width: 0; font-size: 0.75rem; overflow-wrap: anywhere; background: none; padding: 0; border: 0; }
  .dv-locked { max-width: 640px; }

  /* ---------- Webhook inbox ---------- */
  .dv-bins { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
  .dv-bin { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast); }
  .dv-bin:hover { border-color: var(--c-text); }
  .dv-bin-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
  .dv-bin-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--c-text); color: var(--c-surface); flex: none; }
  .dv-bin-name { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dv-bin-count { font: 600 var(--t-caption)/1 var(--dv-mono); padding: 4px 8px; border: 1px solid var(--c-border-strong); border-radius: var(--r-xs); white-space: nowrap; }
  .dv-bin-url { display: block; padding: 8px 10px; border-radius: var(--r-sm); background: var(--c-surface2); font-size: 0.75rem; overflow-wrap: anywhere; color: var(--c-muted); }

  .dv-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .dv-req { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
  .dv-req[open] { border-color: var(--c-border-strong); }
  .dv-req > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: 10px var(--s-3); cursor: pointer; list-style: none; min-height: 44px; }
  .dv-req > summary::-webkit-details-marker { display: none; }
  .dv-req > summary:hover { background: var(--c-surface2); }
  .dv-req-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.8125rem/1.4 var(--dv-mono); background: none; padding: 0; border: 0; }
  .dv-req-meta { font: 500 var(--t-caption)/1 var(--dv-mono); color: var(--c-muted); white-space: nowrap; }
  .dv-req-body { display: grid; gap: var(--s-2); padding: var(--s-3); border-top: 1px dashed var(--c-border-strong); background: var(--c-surface2); }
  .dv-req-body pre { margin: 0; max-height: 360px; overflow: auto; font-size: 0.75rem; }
  .dv-req-sub { margin: 0; font: 600 var(--t-caption)/1.4 var(--dv-mono); letter-spacing: 0.08em; text-transform: uppercase; }
  @media (max-width: 639px) {
    .dv-req > summary { grid-template-columns: auto minmax(0, 1fr); }
    .dv-req > summary .dv-req-meta { grid-column: 2; }
  }

  /* ---------- Monitors ---------- */
  .dv-monitors { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); container-type: inline-size; }
  .dv-monitors a { display: grid; gap: var(--s-2) var(--s-4); grid-template-columns: minmax(0, 1fr); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast); }
  .dv-monitors a:hover { border-color: var(--c-text); }
  .dv-monitors .is-down a { border: 2px solid var(--c-text); padding: calc(var(--s-4) - 1px); }
  .dv-mon-state { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--t-caption)/1 var(--dv-mono); letter-spacing: 0.08em; text-transform: uppercase; }
  .dv-mon-name { font: 650 1.0625rem/1.3 var(--font-sans); }
  .dv-mon-url { font-size: 0.75rem; color: var(--c-muted); background: none; padding: 0; border: 0; overflow-wrap: anywhere; }
  .dv-mon-stats { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-size: var(--t-caption); color: var(--c-muted); }
  .dv-mon-stats b { font: 600 var(--t-small)/1 var(--dv-mono); color: var(--c-text); margin-right: 4px; }
  @container (min-width: 720px) {
    .dv-monitors a { grid-template-columns: 150px minmax(0, 1fr) minmax(180px, 280px); grid-template-areas: 'st name ticks' 'st url stats'; align-items: center; }
    .dv-mon-state { grid-area: st; } .dv-mon-name { grid-area: name; } .dv-mon-url { grid-area: url; } .dv-ticks.is-wide { grid-area: ticks; } .dv-mon-stats { grid-area: stats; justify-content: flex-end; }
  }
  .dv-mon-hero { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--c-border); background: var(--c-surface); }
  .dv-mon-hero.is-down { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
  .dv-mon-hero.is-down .dv-led { background: var(--c-surface); box-shadow: 0 0 0 2px var(--c-text), 0 0 0 3px var(--c-surface); }
  .dv-mon-hero.is-down .dv-facts dt { color: color-mix(in srgb, var(--c-surface) 72%, transparent); }
  .dv-mon-big { display: inline-flex; align-items: center; gap: var(--s-3); font: 640 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
  .dv-mon-big .dv-led { width: 14px; height: 14px; }
  .dv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--s-3) var(--s-5); margin: 0; }
  .dv-facts dt { font: 500 var(--t-caption)/1.4 var(--dv-mono); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .dv-facts dd { margin: 4px 0 0; font: 600 1.25rem/1.2 var(--dv-mono); }
  .dv-facts dd.small, .dv-facts dd .badge { font-size: var(--t-small); }

  /* ---------- Errors ---------- */
  .dv-issue-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; container-type: inline-size; }
  .dv-issue-list li + li { border-top: 1px solid var(--c-border); }
  .dv-issue-list a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 14px); color: var(--c-text); text-decoration: none; }
  .dv-issue-list a::before { left: var(--s-4); top: 20px; }
  .dv-issue-list a:hover { background: var(--c-surface2); }
  .dv-il-main { display: grid; gap: 4px; min-width: 0; }
  .dv-il-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dv-il-title b { font-family: var(--dv-mono); margin-right: 8px; }
  .dv-il-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--t-caption); color: var(--c-muted); }
  .dv-il-trend { display: none; width: 120px; }
  .dv-il-trend .chart-fig { gap: 0; }
  .dv-il-count { display: grid; justify-items: end; font: 650 1.125rem/1 var(--dv-mono); }
  .dv-il-count small { font: 500 0.6875rem/1.4 var(--dv-mono); color: var(--c-muted); }
  @container (min-width: 680px) { .dv-issue-list a { grid-template-columns: minmax(0, 1fr) 120px 72px; } .dv-il-trend { display: block; } }
  .dv-issue-head { display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--c-border); border-left: 6px solid var(--c-text); border-radius: var(--r-lg); background: var(--c-surface); }
  .dv-issue-head.lv-warning { border-left-style: dashed; }
  .dv-issue-msgline { margin: 0; font: 500 1rem/1.5 var(--dv-mono); overflow-wrap: anywhere; }

  /* ---------- HTTP client ---------- */
  .dv-request { display: grid; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  .dv-reqbar { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); align-items: end; }
  .dv-reqbar input, .dv-reqbar select { font-family: var(--dv-mono); }
  @media (min-width: 720px) { .dv-reqbar { grid-template-columns: 130px minmax(0, 1fr) auto; } }
  .dv-reqparts { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .dv-reqparts textarea { font: 400 0.8125rem/1.5 var(--dv-mono); }
  .dv-request > p { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
  .dv-response { margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-surface); display: grid; gap: var(--s-3); min-width: 0; }
  .dv-response.is-empty { border-style: dashed; background: transparent; }
  .dv-response h2, .dv-review-out > h2 { margin: 0; font: 600 0.75rem/1.4 var(--dv-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .dv-response p { margin: 0; }
  .dv-res-line { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
  .dv-res-status { font: 650 0.875rem/22px var(--dv-mono); padding-inline: 10px; }
  .dv-res-meta { font: 500 var(--t-caption)/1.4 var(--dv-mono); color: var(--c-muted); overflow-wrap: anywhere; }
  .dv-body { max-height: 520px; overflow: auto; font-size: 0.75rem; }

  /* ---------- Utilities ---------- */
  .dv-chipnav { position: sticky; top: calc(var(--layout-header) + 8px); z-index: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s-4); padding: 6px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: blur(10px); }
  .dv-chipnav a { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: var(--r-sm); font: 600 0.75rem/1 var(--dv-mono); color: var(--c-text); text-decoration: none; }
  .dv-chipnav a:hover, .dv-chipnav a:focus-visible { background: var(--c-text); color: var(--c-surface); }
  .dv-tools { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
  .dv-tool { scroll-margin-top: calc(var(--layout-header) + 70px); margin: 0; }
  .dv-tool h2 { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: var(--t-h4); }
  .dv-tool-id { padding: 2px 8px; border-radius: var(--r-xs); background: var(--c-text); color: var(--c-surface); font: 600 0.6875rem/18px var(--dv-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .dv-tool textarea, .dv-tool input[type='text'] { font-family: var(--dv-mono); font-size: 0.8125rem; }
  .dv-tool pre[data-out]:empty { display: none; }
  .dv-tool pre[data-out] { margin: 0; max-height: 320px; overflow: auto; font-size: 0.75rem; }

  /* ---------- AI code review ---------- */
  .dv-review { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1180px) { .dv-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .dv-review-form { margin: 0; max-width: none; }
  .dv-review-form textarea { font: 400 0.8125rem/1.5 var(--dv-mono); min-height: 18rem; }
  .dv-review-out { min-width: 0; padding: var(--s-5); border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-surface); }
  .dv-review-out.is-empty { border-style: dashed; background: transparent; }
  .dv-review-out pre { overflow: auto; }

  /* ---------- Outgoing webhooks ---------- */
  .dv-endpoint { padding: var(--s-3) 0; }
  .dv-endpoint + .dv-endpoint { border-top: 1px dashed var(--c-border-strong); }
  .dv-ep-url { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
  .dv-ep-url code { overflow-wrap: anywhere; }
  .dv-events { border: 0; padding: 0; margin: 0; }
  .dv-events legend { font-weight: 600; margin-bottom: var(--s-2); }
  .dv-events code { font-size: 0.75rem; }

  /* ---------- GitHub insights ---------- */
  .dv-ghsearch .inline-form { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); align-items: end; }
  .dv-ghsearch input { font-family: var(--dv-mono); }
  @media (min-width: 640px) { .dv-ghsearch .inline-form { grid-template-columns: minmax(0, 1fr) auto; } }
  .dv-gh-hero { display: grid; gap: var(--s-4); margin: var(--s-4) 0; padding: var(--s-5); border-radius: var(--r-lg); background: var(--c-text); color: var(--c-surface); }
  .dv-gh-hero p { margin: 0; max-width: 70ch; }
  .dv-gh-hero a { color: inherit; }
  .dv-gh-hero .dv-facts dt { color: color-mix(in srgb, var(--c-surface) 70%, transparent); }
  .dv-gh-meta { font: 500 var(--t-caption)/1.6 var(--dv-mono); color: color-mix(in srgb, var(--c-surface) 75%, transparent); }
  .dv-gh-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); margin-bottom: var(--s-4); }
  .dv-lang { display: grid; gap: 4px; }
  .dv-lang .spread span:first-child { font-family: var(--dv-mono); }
  .dv-lang meter { width: 100%; height: 8px; }
  .dv-commits { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--t-small); }
  .dv-commits li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s-3); padding: 8px 0; }
  .dv-commits li + li { border-top: 1px solid var(--c-border); }
  .dv-commits code { font-size: 0.75rem; }
  .dv-commits .small { grid-column: 2; }
  .dv-commit-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* =========================== Landing page (dvl-*) =========================== */
  .dvl-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 6vw, 96px);
    --c-bg: #050505; --c-surface: #111111; --c-surface2: #000000; --c-elevated: #1A1A1A; --c-border: #262626; --c-border-strong: #3D3D3D;
    --c-text: #F5F5F5; --c-muted: #A3A3A3; --c-subtle: #6B6B6B; --c-link: #FFFFFF; --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-primary: #FFFFFF; --c-primary-hover: #D6D6D6; --c-primary-soft: #262626; --c-on-primary: #000000; --c-accent: #FFFFFF; --p: #FFFFFF; --pa: #FFFFFF; --pon: #000000;
    --c-error: #FFFFFF; --c-on-error: #000000; --c-error-soft: #2B2B2B;
    background: var(--c-bg); color: var(--c-text); color-scheme: dark; }
  .dvl-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
  .dvl-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 55% at 75% 30%, rgb(255 255 255 / 0.10), transparent 70%), repeating-linear-gradient(180deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px); }
  .dvl-hero .btn-secondary { --b-bg: transparent; --b-fg: #fff; --b-bd: rgb(255 255 255 / 0.35); --b-hover: rgb(255 255 255 / 0.08); }
  .dvl-hero .btn:not(.btn-secondary) { --b-bg: #fff; --b-fg: #0A0A0A; --b-hover: #E3E3E3; }
  .dvl-hero-grid { display: grid; gap: clamp(var(--s-8), 4vw, var(--s-12)); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 1180px) { .dvl-hero-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
  .dvl-hero-copy { display: grid; gap: var(--s-5); align-content: start; }
  .dvl-hero-copy .lede { margin: 0; color: var(--c-muted); }
  .dvl-id { display: flex; gap: var(--s-3); align-items: center; margin: 0; }
  .dvl-name { font: 600 1.125rem/1 var(--font-mono); letter-spacing: 0.06em; }
  .dvl-hero h1 { margin: 0; color: #fff; font-size: clamp(2.375rem, 1.4rem + 3.6vw, 4.5rem); }
  .dvl-cursor::after { content: '_'; margin-left: 0.04em; font-family: var(--font-mono); font-weight: 400; color: #A3A3A3; animation: dv-blink 1.1s steps(1) infinite; }
  .dvl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: var(--s-2) 0 0; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-border); overflow: hidden; }
  .dvl-facts div { padding: 10px 12px; background: var(--c-bg); }
  .dvl-facts dt { font: 600 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
  .dvl-facts dd { margin: 2px 0 0; font: 500 0.8125rem/1.4 var(--font-mono); }
  @media (max-width: 480px) { .dvl-facts { grid-template-columns: 1fr; } }
  .dvl-hero .preview { background: rgb(10 10 10 / 0.85); border-color: rgb(255 255 255 / 0.16); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.04); }
  .dvl-hero-preview { min-width: 0; }
  .dvl-h { margin: 0; font: 600 0.75rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .dvl-h::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 2px; background: currentColor; }
  .dvl-strong { font-weight: 600; font-size: var(--t-small); overflow-wrap: anywhere; }
  .dvl-static { pointer-events: none; }
  .dvl-pv-grid { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 760px) { .dvl-pv-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .dvl-pv-grid.is-wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
  .dvl-board, .dvl-mon, .dvl-issue, .dvl-log-row { display: grid; color: var(--c-text); }
  .dvl-board { gap: 6px; padding: 10px var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); }
  .dvl-mon { gap: var(--s-2) var(--s-4); grid-template-columns: minmax(0, 1fr); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  .dv-monitors .is-down .dvl-mon { border: 2px solid var(--c-text); }
  @container (min-width: 640px) {
    .dvl-mon { grid-template-columns: 110px minmax(0, 1fr) minmax(160px, 240px); grid-template-areas: 'st name ticks' 'st url stats'; align-items: center; }
    .dvl-mon .dv-mon-state { grid-area: st; } .dvl-mon .dv-mon-name { grid-area: name; } .dvl-mon .dv-mon-url { grid-area: url; } .dvl-mon .dv-ticks { grid-area: ticks; } .dvl-mon .dv-mon-stats { grid-area: stats; justify-content: flex-end; }
  }
  .dvl-issues { margin: 0; }
  .dvl-issue { position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 14px); }
  .dvl-issue::before { content: ''; position: absolute; left: var(--s-4); top: 20px; width: 6px; height: 6px; background: var(--c-text); }
  .lv-warning > .dvl-issue::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-text); transform: rotate(45deg); }
  .dvl-log-row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 't m p s' '. . b b'; gap: 2px var(--s-2); align-items: center; padding: 8px 0; }
  .dvl-stream li { animation: dvl-in var(--d-slow) var(--ease-out) both; }
  .dvl-stream .dvl-l1 { animation-delay: 0.25s; } .dvl-stream .dvl-l2 { animation-delay: 0.5s; } .dvl-stream .dvl-l3 { animation-delay: 0.75s; } .dvl-stream .dvl-l4 { animation-delay: 1s; }
  @keyframes dvl-in { from { opacity: 0; transform: translateY(-6px); } }

  .dvl-loop { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
  .dvl-loop li { position: relative; display: grid; gap: var(--s-2); align-content: start; margin: 0; padding: var(--s-6) var(--s-5); border-left: 1px solid var(--c-border); }
  .dvl-loop li:first-child { border-left: 0; }
  @media (max-width: 1100px) { .dvl-loop li { border-left: 0; border-top: 1px solid var(--c-border); } .dvl-loop li:first-child { border-top: 0; } }
  .dvl-loop-n { font: 600 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .dvl-loop-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-text); color: var(--c-surface); }
  .dvl-loop h3 { margin: var(--s-2) 0 0; font: 600 1.125rem/1.3 var(--font-mono); }
  .dvl-loop p { margin: 0; color: var(--c-muted); font-size: var(--t-small); }
  .dvl-loop code { margin-top: var(--s-2); padding: 6px 8px; border-radius: var(--r-xs); background: var(--c-surface2); font-size: 0.6875rem; overflow-wrap: anywhere; }

  .dvl-duo { display: grid; gap: clamp(var(--s-8), 5vw, var(--s-16)); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 1024px) { .dvl-duo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .dvl-duo.is-reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .dvl-duo.is-reverse .dvl-duo-copy { order: 2; } .dvl-duo { align-items: start; } .dvl-duo-copy { position: sticky; top: calc(var(--layout-header) + var(--s-8)); } }
  .dvl-duo-copy { display: grid; gap: var(--s-5); }
  .dvl-duo-visual { min-width: 0; }
  .dvl-stack { display: grid; gap: var(--s-4); }
  .dvl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
  .dvl-list li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; }
  .dvl-list .i { flex: none; margin-top: 3px; }

  .dvl-bench { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  .dvl-bench li { display: grid; gap: var(--s-3); align-content: start; margin: 0; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); }
  .dvl-bench h3 { display: flex; gap: 8px; align-items: center; margin: 0; font: 600 var(--t-h4)/1.3 var(--font-sans); }
  .dvl-bench p { margin: 0; color: var(--c-muted); font-size: var(--t-small); }

  .dvl-api .h-section { color: #fff; }
  .dvl-code { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--s-8); }
  @media (min-width: 1024px) { .dvl-code { grid-template-columns: 1fr 1fr; } }
  .dvl-code figure { margin: 0; min-width: 0; display: grid; gap: var(--s-2); }
  .dvl-code figcaption { font: 600 var(--t-caption)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
  .dvl-code pre { margin: 0; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface2); color: var(--c-text); font-size: 0.8125rem; line-height: 1.7; overflow-x: auto; }
  .dvl-note { display: flex; gap: 6px; align-items: center; margin: var(--s-4) 0 0; color: var(--c-muted); flex-wrap: wrap; }

  .dvl-spec { margin-top: var(--s-8); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  .dvl-spec table { width: 100%; }
  .dvl-spec td:first-child { font: 600 var(--t-caption)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); white-space: nowrap; }
  .dvl-spec code { background: none; padding: 0; border: 0; font-size: 0.8125rem; overflow-wrap: anywhere; }
  @media (max-width: 639px) { .dvl-spec td:first-child { white-space: normal; } }
  .dvl-honest { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
  .dvl-honest li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; color: var(--c-muted); font-size: var(--t-small); }
  .dvl-honest .i { flex: none; margin-top: 2px; color: var(--c-text); }

  @media (prefers-reduced-motion: reduce) { .dvl-cursor::after, .dvl-stream li { animation: none; } }

  @media (prefers-reduced-motion: reduce) { .p-dev .page-head h1::after { animation: none; } }
}