/* Grid — component styles. Every colour, length and glow is a token from tokens.css.
   Fills are dark and glossy; light is only ever text, edges and glow. */

html { min-height: 100%; }
body { margin: 0; min-height: 100%; font-family: var(--font-sans); font-size: 15px; line-height: 24px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Opaline ground: three soft blooms over a fine grid. Fills any empty space larger than a panel. */
.gd-opal {
  background-color: var(--surface);
  background-image:
    radial-gradient(ellipse 55% 45% at 18% 12%, var(--opal-cyan), transparent 70%),
    radial-gradient(ellipse 50% 55% at 82% 88%, var(--opal-pearl), transparent 70%),
    radial-gradient(ellipse 40% 40% at 62% 42%, var(--opal-mint), transparent 70%),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px var(--space-8)),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--space-8));
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}

/* Gloss: a dark fill with a specular sheen from the top and a rim highlight. Every control and panel carries it. */
.gd-gloss { background-image: linear-gradient(180deg, var(--gloss-high) 0%, var(--gloss-low) 48%, transparent 52%); box-shadow: var(--gloss); }

/* Floor: a flat band of ground with a lit horizon at its top. Reflections live here, so the fade can be the ground colour. */
.gd-floor { position: relative; background: var(--surface); border-top: 1px solid var(--line-lit); box-shadow: var(--glow-line); }

/* Reflection, portable: the element, then a flipped copy, blurred and at reflection-opacity, under a gradient rectangle in the
   ground colour that is opaque at the far end and clear at the floor. Flip + opacity + blur + gradient rectangle: every renderer has those. */
.gd-reflection { display: inline-flex; flex-direction: column; align-items: stretch; }
.gd-reflection-copy { position: relative; transform: scaleY(-1); margin-top: var(--reflection-gap); opacity: var(--reflection-opacity); filter: blur(var(--reflection-blur)); pointer-events: none; user-select: none; }
.gd-reflection-copy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface) 0%, transparent var(--reflection-fade)); }

/* Lit hairline: a 1px rule that glows. */
.gd-rule { height: 1px; border: 0; margin: 0; background: var(--line-lit); box-shadow: var(--glow-line); }

/* Button: dark glossy fill, light text, lit edge. */
.gd-btn { position: relative; font: inherit; font-family: var(--font-sans); font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; height: 36px; padding: 0 20px; border-radius: var(--radius-full); border: 1px solid var(--line-strong); background-color: var(--surface-raised); background-image: linear-gradient(180deg, var(--gloss-high) 0%, var(--gloss-low) 48%, transparent 52%); box-shadow: var(--gloss); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: box-shadow 160ms ease, border-color 160ms ease, color 160ms ease; }
.gd-btn:hover { border-color: var(--line-lit); box-shadow: var(--gloss), var(--glow-line); }
.gd-btn-primary { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--gloss), var(--glow-cyan); }
.gd-btn-primary:hover, .gd-btn-primary:active { color: var(--white-light); box-shadow: var(--gloss), var(--glow-cyan-strong); }
.gd-btn-primary:active { background-color: var(--cyan-soft); }
.gd-btn-primary.gd-tone-amber { border-color: var(--amber); color: var(--amber); box-shadow: var(--gloss), var(--glow-amber); }
.gd-btn-primary.gd-tone-amber:hover { color: var(--amber); box-shadow: var(--gloss), var(--glow-amber); }
.gd-btn-primary.gd-tone-amber:active { background-color: var(--amber-soft); }
.gd-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--cyan); }
.gd-btn-ghost.gd-tone-amber { color: var(--amber); }
.gd-btn-ghost:hover { border-color: var(--line-lit); box-shadow: var(--glow-line); }
.gd-btn-danger { border-color: var(--ember); color: var(--ember); }
.gd-btn-danger:hover { border-color: var(--ember); box-shadow: var(--gloss), var(--glow-ember); }
.gd-btn:disabled { opacity: var(--opacity-disabled); cursor: default; box-shadow: none;  }
.gd-btn:focus-visible, .gd-input:focus-visible, .gd-toggle:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }

/* Badge: a pip and a word on a tinted ground. */
.gd-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line); }
.gd-badge .gd-pip { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.gd-badge-cyan { background: var(--cyan-soft); color: var(--cyan); border-color: transparent; }
.gd-badge-amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.gd-badge-ember { background: var(--ember-soft); color: var(--ember); border-color: transparent; }
.gd-badge-lit.gd-badge-cyan .gd-pip { box-shadow: var(--glow-cyan); }
.gd-badge-lit.gd-badge-amber .gd-pip { box-shadow: var(--glow-amber); }
.gd-badge-lit.gd-badge-ember .gd-pip { box-shadow: var(--glow-ember); }

/* Panel: a glossy dark slab with large round corners, a hairline edge and opaline fill. */
.gd-panel { position: relative; background-color: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); color: var(--ink); box-shadow: var(--gloss); background-image: linear-gradient(180deg, var(--gloss-high) 0%, var(--gloss-low) 30%, transparent 60%); }
.gd-panel-opal { background-image:
    linear-gradient(180deg, var(--gloss-high) 0%, var(--gloss-low) 30%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 0%, var(--opal-cyan), transparent 70%),
    radial-gradient(ellipse 50% 60% at 95% 100%, var(--opal-pearl), transparent 70%); }
.gd-panel .gd-panel-rule { height: 1px; margin: 0 0 var(--space-4); background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--cyan) 70%, transparent); box-shadow: var(--glow-line); border-radius: var(--radius-full); }
.gd-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.gd-panel-title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: 0.06em; color: var(--ink); }
.gd-panel-meta { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* Label */
.gd-label { display: block; padding-left: var(--space-4); font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); }

/* Input: a sunken glossy field whose edge lights on focus. */
.gd-field { display: inline-flex; flex-direction: column; min-width: 240px; }
.gd-input { font: inherit; font-family: var(--font-sans); font-size: 15px; line-height: 24px; height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--line-strong); background-color: var(--surface-sunken); background-image: linear-gradient(180deg, var(--gloss-low) 0%, transparent 50%); color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease; }
.gd-input::placeholder { color: var(--ink-muted); }
.gd-input:hover { border-color: var(--line-lit); }
.gd-input:focus-visible { border-color: var(--cyan); }
.gd-input[aria-invalid="true"] { border-color: var(--ember); }
.gd-hint { margin: var(--space-1) 0 0 var(--space-4); font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.gd-hint-error { color: var(--ember); }

/* Readout: a label, a mono figure, a unit. The figure glows and reflects. */
.gd-readout { display: inline-flex; flex-direction: column; gap: var(--space-1); min-width: 120px; }
.gd-readout .gd-label { padding-left: 0; }
.gd-readout-value { font-family: var(--font-mono); font-weight: 300; font-size: 28px; line-height: 32px; letter-spacing: 0.02em; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--space-1); }
.gd-readout-unit { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); letter-spacing: 0.06em; }
.gd-readout-cyan .gd-readout-value { color: var(--cyan); text-shadow: 0 0 10px var(--opal-cyan), 0 0 20px var(--opal-cyan); }
.gd-readout-amber .gd-readout-value { color: var(--amber); }
.gd-readout-ember .gd-readout-value { color: var(--ember); }

/* Toggle: a glossy dark track; the edge and knob light when on. */
.gd-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; color: var(--ink); font-size: 15px; line-height: 24px; }
.gd-toggle { position: relative; width: 40px; height: 20px; padding: 0; border-radius: var(--radius-full); border: 1px solid var(--line-strong); background-color: var(--surface-sunken); background-image: linear-gradient(180deg, var(--gloss-low) 0%, transparent 50%); box-shadow: var(--gloss); cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease; flex: none; }
.gd-toggle .gd-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--ink-muted); transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.gd-toggle[aria-checked="true"] { border-color: var(--cyan); box-shadow: var(--gloss), var(--glow-cyan); }
.gd-toggle[aria-checked="true"] .gd-knob { transform: translateX(20px); background: var(--white-light); box-shadow: 0 0 6px var(--cyan), 0 0 12px var(--cyan); }
.gd-toggle:disabled { opacity: var(--opacity-disabled); cursor: default; box-shadow: none; }

/* Preview scaffolding */
.gd-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-6); flex-wrap: wrap; }
.gd-row-top { align-items: flex-start; }