/* Structural only. Every decision worth arguing about is a custom property,
   so committing to a look later means editing this block and nothing else.

   Components import this into their shadow roots; the properties inherit
   through shadow boundaries, which is exactly why they're properties. */

:root {
    color-scheme: light dark;

    --bg:        #ffffff;
    --surface:   #f5f6f8;
    --line:      #e3e5ea;
    --fg:        #14161a;
    --muted:     #6b7280;
    --accent:    #b3122b;
    --accent-fg: #ffffff;
    --good:      #157f3d;

    --radius:    14px;
    --gap:       1rem;
    --pad:       1.15rem;
    /* 34rem was a phone held up to a monitor. Wide enough that a fullscreen
       window does not read as one, narrow enough that a line of prose or a
       rider row is not a trek for the eye. */
    --measure:   56rem;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Three states, not two. A media query alone cannot say "light, even though my
   phone is dark", so an explicit choice is stamped on the root element and the
   query stands aside when it sees one. `system` stamps nothing, which is what
   lets the device keep deciding.

   No token is ever defined *only* in a dark block — the light values above are
   always the base, so a missed override degrades to light rather than to
   nothing. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:      #0f1114;
        --surface: #171a1f;
        --line:    #262a31;
        --fg:      #e9eaee;
        --muted:   #9aa1ad;
        --accent:  #e8405c;
        --good:    #35c46a;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
        --bg:      #0f1114;
        --surface: #171a1f;
        --line:    #262a31;
        --fg:      #e9eaee;
        --muted:   #9aa1ad;
        --accent:  #e8405c;
        --good:    #35c46a;
    color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

/* The shell fills the window. `100dvh` on the shadow host is the nice answer on
   a phone, but it is one unit to bet every screen on — this gives it a plain
   percentage chain to fall back to. */
html, body, #app { height: 100%; }

/* Any `display` rule beats the user-agent's `[hidden] { display: none }`, so a
   flex or grid container with the hidden attribute stays visible. This is the
   single most common way a "hidden" panel isn't. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* Phones first: one column, thumb-reachable, never wider than a comfortable
   measure even on a laptop. */
.wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--pad);
}

/* Confirm sheet scrim. Lives in the global sheet because the sheet is appended
   to the document, not into a shadow root — it has to sit above everything. */
.g-confirm {
    position: fixed; inset: 0; z-index: 40;
    background: rgb(0 0 0 / 0.35);
}

/* Feedback. In the global sheet because it is appended to the document rather
   than into a shadow root — it has to cover the whole screen, including
   whatever app is in an iframe. */
.g-feedback {
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-items: center;
    padding: var(--pad);
    background: rgb(0 0 0 / 0.4);
}

.g-feedback .sheet {
    width: min(100%, 30rem);
    display: grid; gap: 0.6rem;
    padding: var(--pad);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.3);
}

.g-feedback h2 { margin: 0; font-size: 1.05rem; }
.g-feedback .hint { margin: 0; color: var(--muted); font-size: 0.9rem; }

.g-feedback .ctx { margin: 0; color: var(--muted); font-size: 0.78rem; }
.g-feedback .ctx code { font-family: var(--mono); font-size: 0.75rem; }

.g-feedback textarea {
    font: inherit; resize: vertical;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg); color: var(--fg);
}

.g-feedback .row { display: flex; gap: 0.5rem; justify-content: flex-end; }

.g-feedback button {
    font: inherit; font-weight: 600;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--fg); cursor: pointer;
}

.g-feedback .go { background: var(--accent); border-color: var(--accent);
                  color: var(--accent-fg); }
.g-feedback .go[disabled] { opacity: 0.6; cursor: default; }