/* LUX posture: quiet, dense, borders not shadows, token colours only (all four modes via data-lux-mode). */
@font-face { font-family: "Inter"; src: url("/lux/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/lux/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

html { background: var(--lux-base-background); color: var(--lux-base-foreground); }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--lux-font-font-sans, Inter, system-ui, sans-serif); font-size: 14px; line-height: 1.5; }
.mono { font-family: var(--lux-font-font-mono, "JetBrains Mono", ui-monospace, monospace); }

.page { max-width: 760px; margin: 0 auto; padding: var(--lux-spacing-12, 48px) var(--lux-spacing-6, 24px); display: grid; gap: var(--lux-spacing-6, 24px); }
.page > *, .details dd { min-width: 0; } /* long snippet lines scroll inside their box instead of widening the page */
.masthead h1 { text-wrap: balance; font-weight: var(--lux-font-weight-light, 300); font-size: 30px; letter-spacing: -0.01em; margin: 0 0 var(--lux-spacing-1, 4px); }
.lede, .meta { color: var(--lux-base-muted-foreground); margin: 0; }

.form { display: grid; gap: var(--lux-spacing-4, 16px); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lux-spacing-4, 16px); }
.field { display: grid; gap: var(--lux-spacing-1, 4px); }
.field-label { font-size: 14px; font-weight: var(--lux-font-weight-medium, 500); color: var(--lux-input-label-foreground, var(--lux-base-foreground)); }
.actions { display: flex; justify-content: flex-end; gap: var(--lux-spacing-2, 8px); margin-top: var(--lux-spacing-2, 8px); }

.warning { margin: 0 0 var(--lux-spacing-3, 12px); color: var(--lux-semantic-warning-foreground); }
.url-row { display: flex; gap: var(--lux-spacing-2, 8px); align-items: center; }
.url { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: var(--lux-spacing-2, 8px) var(--lux-spacing-3, 12px);
       border: 1px solid var(--lux-base-border); border-radius: var(--lux-border-radius-rounded-md, 6px); font-size: 12px; }
.meta { margin: var(--lux-spacing-2, 8px) 0 var(--lux-spacing-4, 16px); font-size: 12px; }
.snippet { margin: var(--lux-spacing-3, 12px) 0 0; padding: var(--lux-spacing-3, 12px); overflow-x: auto; font-size: 12px; white-space: pre;
           font-family: var(--lux-font-font-mono, "JetBrains Mono", monospace);
           border: 1px solid var(--lux-base-border); border-radius: var(--lux-border-radius-rounded-md, 6px); background: var(--lux-base-muted); }

.details { display: grid; gap: var(--lux-spacing-2, 8px); margin: 0; }
.details dd { margin: 0 0 var(--lux-spacing-4, 16px); }
.details dd:last-child { margin-bottom: 0; }
.details .meta { margin: var(--lux-spacing-2, 8px) 0 0; }

/* lux-card clips its content (overflow: hidden on its card part), which cut the lifetime menu off at the card's edge. */
#environment::part(card) { overflow: visible; }
.field-note { margin: var(--lux-spacing-1, 4px) 0 0; }

.build { display: flex; gap: var(--lux-spacing-4, 16px); align-items: center; justify-content: space-between;
         padding: var(--lux-spacing-3, 12px) 0 var(--lux-spacing-4, 16px); border-top: 1px solid var(--lux-base-border); }
.build-text { min-width: 0; }
.build lux-button { flex: none; }
.build .meta { margin: var(--lux-spacing-1, 4px) 0 0; }

[hidden] { display: none !important; }

@media (max-width: 640px) { .row { grid-template-columns: 1fr; } .build { flex-direction: column; align-items: stretch; } .page { padding: var(--lux-spacing-8, 32px) var(--lux-spacing-4, 16px); } }