/* Potluck design system.
 *
 * Two worlds, one spine. Jadeite dresses the welcome (landing, activation);
 * Blueprint dresses the product (admin views). They share type, spacing, and
 * the orbital mark, so they read as one identity.
 *
 * Set the world with a class on <body>: "t-jadeite" or "t-blueprint".
 */

/* ---------------------------------------------------------------- spine */
:root {
  --font-display: Jost, "Futura", ui-sans-serif, system-ui, sans-serif;
  --font-body: Karla, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step-0: 1rem;
  --step-1: 1.15rem;
  --step-2: 1.45rem;
  --step-3: 1.9rem;
  --step-4: clamp(2.2rem, 5.5vw, 3.4rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --measure: 60ch;
}

/* --------------------------------------------------------- jadeite world */
.t-jadeite {
  --ground: #DCE8DD;
  --surface: #F7F9F5;
  --surface-sunk: #EAF1E9;
  --ink: #1E2E26;
  --ink-soft: #52685C;
  --rule: #B7CCBC;
  --accent: #E2553C;
  --accent-ink: #FFF6F2;
  --accent-quiet: #F6DDD6;
  --support: #F0B93B;
  --code-bg: #1E2E26;
  --code-ink: #DCEBDD;
  --radius: 999px;
  --radius-box: 6px;
}

/* ------------------------------------------------------- blueprint world */
.t-blueprint {
  --ground: #E8EAE4;
  --surface: #F4F5F1;
  --surface-sunk: #DFE3DC;
  --ink: #14212B;
  --ink-soft: #4B5C69;
  --rule: #B4C2CB;
  --accent: #D94F1E;
  --accent-ink: #FFF7F3;
  --accent-quiet: #F3DED4;
  --support: #2E6F8E;
  --code-bg: #14212B;
  --code-ink: #9FD3E8;
  --radius: 3px;
  --radius-box: 3px;
}

/* ------------------------------------------------------------- elements */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.page {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.page--narrow { max-width: 34rem; }

/* ---------------------------------------------------------------- brand */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
}
.brand svg { display: block; }

/* The orbital mark is the architecture: independent paths, one shared centre.
   It turns slowly, because the system is always running. */
@media (prefers-reduced-motion: no-preference) {
  .orbit-spin { transform-origin: 50% 50%; animation: orbit 30s linear infinite; }
  @keyframes orbit { to { transform: rotate(360deg); } }
}

/* ----------------------------------------------------------------- hero */
.hero { display: flex; flex-direction: column; gap: var(--space-3); }
.hero h1 {
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.02;
  max-width: 18ch;
}
.hero h1 .turn { color: var(--accent); display: block; }
.hero p { font-size: var(--step-1); color: var(--ink-soft); max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- controls */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.2;
}
.btn:hover { filter: brightness(0.94); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: var(--surface-sunk); filter: none; }

.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* command block with a copy affordance */
.cmd {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--code-bg);
  border-radius: var(--radius-box);
  overflow: hidden;
  max-width: 100%;
}
.cmd code {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--code-ink);
  padding: 0.85rem 1rem;
  overflow-x: auto;
  white-space: nowrap;
  flex: 1;
}
.cmd button {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--code-ink);
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.16);
  padding: 0 1rem;
  cursor: pointer;
}
.cmd button:hover { background: rgba(255,255,255,0.09); }

/* ---------------------------------------------------------------- cards */
/* Compartments, not floating cards: one tray, divided. */
.tray {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /* The ground is the surface, not the rule: an incomplete last row leaves
     empty grid cells, and colouring the ground with the divider colour turned
     those into visible blocks. Each compartment draws its own hairline
     instead, so any number of items lands cleanly at any width. */
  background: var(--surface);
  gap: 1px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-box);
  overflow: hidden;
}
.tray > * {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tray h3 { font-size: var(--step-1); font-weight: 600; }
.tray p { color: var(--ink-soft); font-size: 0.94rem; }
.tray .step {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* A plain list, for content that does not divide into equal compartments.
   The tray wants a full grid; four items in a three-column tray leaves gaps
   that read as missing rather than deliberate. */
.list { display: flex; flex-direction: column; gap: var(--space-3);
        margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.list li { display: grid; grid-template-columns: auto 1fr; gap: 0 0.85rem;
           align-items: baseline; }
.list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
                   background: var(--accent); transform: translateY(-0.15em); }
.list strong { font-family: var(--font-display); font-size: var(--step-1);
               font-weight: 600; color: var(--ink); }
.list p { grid-column: 2; color: var(--ink-soft); margin-top: 0.3rem; }

/* ----------------------------------------------------------- form panel */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-box);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.panel h2 { font-size: var(--step-2); font-weight: 600; }
.panel > p { color: var(--ink-soft); font-size: 0.94rem; }

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.field .hint { font-size: 0.8rem; color: var(--ink-soft); }
.field input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-box);
  background: var(--surface);
  color: var(--ink);
}
.field input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.field textarea {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-box);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
  min-height: 8.5rem;
}
.field textarea::placeholder { color: var(--ink-soft); opacity: 0.7; }

/* One stored prompt, shown as an editable card. */
.prompt { border: 1px solid var(--rule); border-radius: var(--radius-box);
          background: var(--surface); padding: var(--space-2);
          display: flex; flex-direction: column; gap: var(--space-2); }
.prompt-head { display: flex; align-items: baseline; justify-content: space-between;
               gap: var(--space-2); flex-wrap: wrap; }
.prompt-head h3 { font-family: var(--font-display); font-size: var(--step-1);
                  font-weight: 600; margin: 0; }
.prompt-meta { font-size: 0.78rem; color: var(--ink-soft); }
.prompt-meta code { font-family: var(--font-mono); }
.prompt-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Skill library: one card per shared skill. */
.skill-grid { display: grid; gap: var(--space-2);
              grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.skill { border: 1px solid var(--rule); border-radius: var(--radius-box);
         background: var(--surface); padding: var(--space-2);
         display: flex; flex-direction: column; gap: 0.6rem; }
.skill--on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.skill h3 { font-family: var(--font-display); font-size: var(--step-1);
            font-weight: 600; margin: 0; display: flex; align-items: center;
            gap: 0.5rem; flex-wrap: wrap; }
.skill p.desc { font-size: 0.9rem; line-height: 1.5; margin: 0; color: var(--ink); }
.skill .by { font-size: 0.78rem; color: var(--ink-soft); }
.skill .by code { font-family: var(--font-mono); }
.skill .foot { display: flex; gap: 0.5rem; align-items: center;
               justify-content: space-between; margin-top: auto;
               padding-top: 0.6rem; border-top: 1px solid var(--rule);
               /* Wrap the row rather than letting the label squeeze the
                  button until its own text breaks across two lines. */
               flex-wrap: wrap; }
.skill .foot form { flex: 0 0 auto; }
.skill .foot .btn { white-space: nowrap; }
.skill .warn { font-size: 0.78rem; color: var(--accent); font-weight: 700;
               flex: 1 1 auto; min-width: 0; }

/* Product shots on the welcome page. Blueprint screenshots sit on a Jadeite
   ground, so the window chrome does the mediating — it lifts the shot off the
   ground and says "running software" without needing a caption to say it. */
.shot { display: flex; flex-direction: column; gap: var(--space-2); }
.shot + .shot { margin-top: var(--space-4); }
.shot h3 { font-family: var(--font-display); font-size: var(--step-2);
           font-weight: 600; margin: 0; }
.shot p { margin: 0; max-width: 58ch; color: var(--ink-soft); }
.window { border-radius: 8px; overflow: hidden;
          border: 1px solid rgba(30, 46, 38, 0.18);
          box-shadow: 0 18px 40px -22px rgba(30, 46, 38, 0.5); }
.window .chrome { background: var(--surface); display: flex; align-items: center;
                  gap: 0.5rem; padding: 0.6rem 0.85rem;
                  border-bottom: 1px solid rgba(30, 46, 38, 0.12); }
.window .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.window .url { font-family: var(--font-mono); font-size: 0.72rem;
               color: var(--ink); opacity: 0.6; margin-left: 0.4rem;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window img { display: block; width: 100%; height: auto; }



.field input.code {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 1.1rem;
}

form.stack { display: flex; flex-direction: column; gap: var(--space-2); }

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.notice {
  border-left: 3px solid var(--accent);
  background: var(--accent-quiet);
  color: var(--ink);
  padding: var(--space-2);
  border-radius: 0 var(--radius-box) var(--radius-box) 0;
  font-size: 0.92rem;
}

.footnote { color: var(--ink-soft); font-size: 0.88rem; max-width: var(--measure); }

/* ------------------------------------------------- admin (blueprint world)
 * Scanned and operated, not read. State reads at a glance as shape and colour
 * before anyone parses a word of it. */

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.admin-who { font-size: 0.86rem; color: var(--ink-soft); }

.section { display: flex; flex-direction: column; gap: var(--space-3); }
.section-head { display: flex; flex-direction: column; gap: 0.35rem; }
.section-head h2 { font-size: var(--step-2); font-weight: 600; display: flex; align-items: center; gap: 0.6rem; }
.section-head p { color: var(--ink-soft); font-size: 0.94rem; max-width: var(--measure); }
.count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
}

.grid-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--radius-box);
  background: var(--surface);
  overflow-x: auto;
}
table.grid { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.grid th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.7rem var(--space-2);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.grid td { padding: 0.85rem var(--space-2); border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid tr:last-child td { border-bottom: none; }
table.grid td.num { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
table.grid td.act { text-align: right; }

.who { display: block; font-weight: 700; }
.mail { display: block; font-size: 0.82rem; color: var(--ink-soft); }

.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pill--on { color: #2F6B45; background: #E2EFE5; }
.pill--off { color: var(--ink-soft); background: var(--surface-sunk); }
.pill--admin { color: var(--accent); background: var(--accent-quiet); margin-left: 0.3rem; }

ul.devs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
ul.devs li { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.dev { font-family: var(--font-mono); font-size: 0.82rem; }
.dev-seen { font-size: 0.76rem; color: var(--ink-soft); }
.dev-none { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; }

.btn--danger { background: transparent; color: var(--accent); border-color: var(--accent); font-size: 0.82rem; padding: 0.4rem 0.8rem; }
.btn--danger:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
table.grid .btn { font-size: 0.82rem; padding: 0.4rem 0.8rem; }

.empty { color: var(--ink-soft); font-size: 0.92rem; padding: var(--space-2); }
.grid-wrap > .empty { padding: var(--space-3); }

.opts { display: flex; flex-direction: column; gap: var(--space-1); }
.opt {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: var(--space-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-box);
  cursor: pointer;
  background: var(--surface);
}
.opt--on { border-color: var(--accent); background: var(--accent-quiet); }
.opt input { margin-top: 0.3rem; accent-color: var(--accent); }
.opt strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.opt span span, .opt > span { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }

ul.invites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
ul.invites li { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.btn--tiny { font-size: 0.72rem; padding: 0.2rem 0.6rem; font-weight: 700; }

ul.invites code {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  background: var(--surface-sunk);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  user-select: all;
}

footer.site {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 0.86rem;
}