/* editor/signup.css — the first Coastworks-owned screen with a style that lives in one
 * file, and the reason it is not inline is the restyle.
 *
 * WHAT THIS INHERITS AND WHAT IT CANNOT. The token set below is editor/auth.html's,
 * lifted out of its <style> block: a palette, a `prefers-color-scheme` block, and
 * nothing else. That file is the only real candidate in the repo -- editor/lab.html
 * carries a smaller ad-hoc block of its own, and the SITE stylesheets are explicitly
 * unavailable. sites/<site>/src/styles/global.css says so in its own header: "The class
 * names here are this site's. They are not a shared vocabulary and must not become one."
 * Per-site CSS is a DECIDED shape for GENERATED sites; this is a platform screen and a
 * different thing, so there is no precedent to follow and none to contradict.
 *
 * ⚠ THE RESTYLE HAS TO BE THIS FILE AND NOTHING ELSE, which is the whole point. Every
 * colour, radius and font stack is a custom property on :root; no rule below hardcodes
 * a colour. When the marketing site lands and a real palette exists, the change is the
 * token block. A screen styled inline would make that change a sweep through markup,
 * which is the cost this arrangement is buying out.
 *
 * NO WEBFONT and NO IMPORT. Nothing loads from a host we do not control, for the same
 * reason signup-serve.mjs serves supabase-js out of node_modules rather than from a CDN.
 * System stacks until there is a decision about type, which there is not:
 * sites.typography_pairing still has no writer and no reader.
 */

:root {
  --bg:    #fbfaf8;
  --fg:    #1c1b19;
  --dim:   #6b6862;
  --line:  #e3dfd8;
  --card:  #fff;
  --ok:    #1f6f43;
  --warn:  #8a5a00;
  --bad:   #a12b1e;
  --focus: #1c1b19;
  --radius: 10px;
  --radius-sm: 7px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #171614;
    --fg:    #ece9e3;
    --dim:   #9a958c;
    --line:  #2f2d29;
    --card:  #201f1c;
    --ok:    #6bbf8e;
    --warn:  #d9a441;
    --bad:   #e0796b;
    --focus: #ece9e3;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--sans);
}

main { max-width: 30rem; margin: 0 auto; }

h1 { font-size: 1.35rem; margin: 0 0 .2rem; letter-spacing: -.01em; }
p  { margin: .5rem 0; }

.sub  { color: var(--dim); margin-bottom: 1.75rem; }
.note { color: var(--dim); font-size: 13px; }
.ok   { color: var(--ok); }
.warn { color: var(--warn); }
.bad  { color: var(--bad); }
.hidden { display: none; }

/* The two panels. A pair of buttons rather than links: nothing here changes the URL,
 * because the confirmation link has to come back to the origin's root and a fragment or
 * a query on it is one more thing that has to survive GoTrue's redirect. */
.tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.tabs button {
  flex: 1; background: transparent; color: var(--dim);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .5rem; font: inherit; font-weight: 600; cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--fg); border-color: var(--fg); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem;
}

label { display: block; margin: .85rem 0 0; font-size: 13px; color: var(--dim); }
label:first-of-type { margin-top: 0; }

input {
  width: 100%; margin-top: .3rem; padding: .6rem .75rem;
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

button.go {
  width: 100%; margin-top: 1.1rem; padding: .65rem 1.1rem;
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--fg); color: var(--bg);
  border: 1px solid var(--fg); border-radius: var(--radius-sm);
}
button.go[disabled] { opacity: .5; cursor: default; }

button.plain {
  background: transparent; color: var(--fg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .5rem .9rem; font: inherit; cursor: pointer;
}

/* One message region per panel, and it is a live region so a screen reader hears the
 * refusal rather than only seeing it. The colour is carried by a modifier class because
 * a message that is red and says nothing is not an error message. */
.msg {
  margin-top: .9rem; padding: .6rem .7rem; font-size: 14px;
  border-left: 3px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--line) 35%, transparent);
}
.msg.is-bad  { border-color: var(--bad); }
.msg.is-ok   { border-color: var(--ok); }
.msg.is-warn { border-color: var(--warn); }

/* Spacing lives here too. Two `style="margin-top"` attributes had crept into the
 * markup, which is small and is exactly the shape this file exists to prevent: the
 * restyle has to be one file, and an inline declaration is a second place to look. */
.spaced { margin-top: 1rem; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.1rem; margin: 0; }
dt { color: var(--dim); font-size: 13px; }
dd { margin: 0; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

.limits { margin-top: 1.75rem; }
.limits li { color: var(--dim); font-size: 13px; margin: .3rem 0; }