/* Estate surfaces — shared stylesheet.  D-101, D-104.
 *
 * THESE ARE WRITTEN VALUES, NOT AN EXTRACTED ARTIFACT, AND THAT IS THE POINT.
 * D-101 adopts the platform's visual language by declaring its design tokens
 * here rather than by forking the dashboard or copying its generated
 * stylesheet. A copied stylesheet is a tracked file whose provenance is
 * "extracted from an image once, by someone", with a manual re-copy on every
 * upgrade that nothing asserts; extracting at build time would make the content
 * depend on which image happened to be present, and the estate has no build step
 * anywhere by deliberate choice (D-088). Written values are an ordinary managed
 * path — delivered byte for byte, diffed by the drift check, and reproduced
 * identically from bare metal.
 *
 * PROVENANCE. Read from netbirdio/dashboard:v2.90.9 on 2026-08-11, by frequency
 * analysis of the served stylesheet. #f68330 is the platform's brand colour and
 * the most frequent literal in it; #f46d1b is its darker companion; the surface
 * and grey ramps are the values that stylesheet actually uses. A later session
 * re-checks these deliberately against a named version rather than discovering
 * that they came from somewhere.
 *
 * THE ACCEPTED COST is that appearance drifts if the platform restyles. That is
 * cosmetic and visible, where both rejected alternatives fail silently.
 */

:root {
  color-scheme: light dark;

  /* brand */
  --accent:        #f68330;
  --accent-hover:  #f46d1b;
  --accent-ink:    #ffffff;
  --danger:        #b91c1c;
  --info:          #0ea5e9;

  /* surfaces — light */
  --bg:            #ffffff;
  --surface:       #f8f8f8;
  --surface-sunk:  #f1f1f2;
  --ink:           #141414;
  --ink-muted:     #535d67;
  --border:        #cbd2d6;
  --border-soft:   #e2e2e2;

  /* type */
  --font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* geometry */
  --radius:    6px;
  --radius-lg: 8px;
  --gap:       .5rem;
  --pad:       1rem;
  --measure:   46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #141414;
    --surface:      #181a1d;
    --surface-sunk: #1e1e1e;
    --ink:          #f8f8f8;
    --ink-muted:    #a3adb5;
    --border:       #3e3e3e;
    --border-soft:  #2b2b2b;
  }
}

body {
  font: var(--font);
  margin: 0;
  padding: 2rem;
  max-width: var(--measure);
  background: var(--bg);
  color: var(--ink);
}

h1        { font-size: 1.2rem; margin: 0 0 .25rem }
p.sub     { margin: 0 0 1.5rem; color: var(--ink-muted) }
.note     { color: var(--ink-muted); font-size: .92rem }

fieldset  { border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
            padding: var(--pad) 1.25rem; margin: 0 0 1.25rem }
legend    { padding: 0 .4rem; font-weight: 600 }
label     { display: block; margin: .6rem 0 .2rem; font-weight: 500 }

input[type=text], input[type=email], select {
  width: 100%; padding: .5rem; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: inherit; font: inherit;
}
input[type=text]:focus, input[type=email]:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

.caps label { display: flex; align-items: center; gap: var(--gap); font-weight: 400; margin: .35rem 0 }

button {
  padding: .55rem 1.1rem; border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font: inherit; cursor: pointer;
}
button:hover        { background: var(--accent-hover) }
button:disabled     { opacity: .55; cursor: default }
button.danger       { background: var(--danger) }

#out {
  margin-top: 1.25rem; padding: var(--pad); border-radius: var(--radius-lg);
  background: var(--surface); white-space: pre-wrap; word-break: break-all;
}

table     { width: 100%; border-collapse: collapse; margin-top: var(--gap) }
td, th    { text-align: left; padding: .35rem .5rem;
            border-bottom: 1px solid var(--border-soft); font-size: .92rem }

pre       { background: var(--surface); padding: .75rem .9rem; border-radius: var(--radius-lg);
            overflow-x: auto; font-size: .86rem; margin: .4rem 0 }
code      { font-family: var(--mono); background: var(--surface-sunk);
            padding: .1rem .3rem; border-radius: 4px }
pre code  { background: none; padding: 0 }

ol        { padding-left: 1.2rem }
li        { margin: 0 0 1.4rem }