/* Organic — the pre-event pair.
 *
 * `/overseer/start` (design turn 13) and `/overseer/templates` (turn 14) are
 * one surface family: both are reached when there may be no Open Event at all,
 * so neither carries a Role Workspace shell or the role nav, and both open on
 * the same setup-access gate. They share this stylesheet because they share
 * that chrome — header, gate card, panels, primary commit — and drift apart
 * the moment each keeps its own copy.
 *
 * Geometry is measured off the artboards: 32px section radii, 24px rows,
 * 999px commits, 52px controls on the two surfaces an Overseer types a
 * passphrase into. Values come from `organic-tokens.css`; note `--space-5`
 * does not exist.
 */

[hidden] {
  display: none !important;
}

.pre-event {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Soft blobs, behind content and never over it. */
.pre-event .atmosphere,
.pre-event .atmosphere::after {
  position: fixed;
  z-index: 0;
  content: "";
  pointer-events: none;
  filter: blur(18px);
}

.pre-event .atmosphere {
  top: -200px;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 52% 48% 42% 58%;
  background: radial-gradient(
    circle at 40% 35%,
    var(--color-accent-2-300),
    var(--color-accent-2-200) 55%,
    transparent 75%
  );
  opacity: 0.55;
}

.pre-event .atmosphere::after {
  top: auto;
  right: auto;
  bottom: -190px;
  left: -120px;
  width: 420px;
  height: 420px;
  border-radius: 46% 54% 58% 42%;
  background: radial-gradient(
    circle at 55% 50%,
    var(--color-accent-200),
    transparent 72%
  );
  opacity: 0.6;
}

/*
 * A full-bleed header and main, stated in full. `organic-system.css` styles
 * bare elements, and a surface that leaves any of these to inheritance takes
 * whatever a global rule set for somebody else (docs/design-reference/latest/docs/agents/design.md).
 */
.pre-event > header,
.pre-event > main {
  position: relative;
  z-index: 1;
  width: min(calc(100% - (var(--space-6) * 2)), 1240px);
  margin-inline: auto;
}

.pre-event > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-3);
}

.pre-event .brand {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
}

.pre-event .surface-name {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 13px;
}

.pre-event .header-end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.pre-event .header-end a {
  color: var(--color-accent-700);
  font-size: 13px;
}

.pre-event > main {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-8);
}

/* — the live region both surfaces answer through — */

.pre-event .status {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-accent-2-800);
  font-size: 14px;
  opacity: 0;
  transition:
    opacity 120ms ease,
    padding 120ms ease;
}

.pre-event .status.visible {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-width: 1px;
  border-color: var(--color-accent-2-300);
  background: var(--color-accent-2-100);
  opacity: 1;
}

.pre-event .status.error {
  border-color: var(--color-accent-300);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

.pre-event .status:empty {
  display: none;
}

/* — setup access (13a) — */

.pre-event .gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
}

.pre-event .gate-copy {
  max-width: 46ch;
}

.pre-event .gate-copy > * {
  margin: 0;
}

.pre-event .eyebrow {
  color: var(--color-accent-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pre-event .gate-copy h1 {
  margin-top: var(--space-2);
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1.05;
}

.pre-event .lede {
  margin-top: var(--space-4);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.pre-event .step-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: 12.5px;
}

.pre-event .gate-card {
  display: block;
  padding: var(--space-6);
  border-radius: 32px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.pre-event .gate-card h2 {
  margin: 0;
  font-size: 23px;
}

.pre-event .gate-card .hint {
  margin: var(--space-3) 0 0;
  color: var(--color-accent-800);
  font-size: 13.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.pre-event .gate-card .field {
  margin-top: var(--space-6);
}

.pre-event .gate-card .btn {
  margin-top: var(--space-4);
}

.pre-event .gate-card .foot {
  margin: var(--space-4) 0 0;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 12.5px;
  line-height: 1.55;
}

/* The refusal states what happened, in the panel that asked. */
.pre-event .refusal {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 20px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-size: 13px;
  line-height: 1.55;
}

/* — form controls, at the size a passphrase is typed at — */

.pre-event .field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
}

.pre-event .field > span {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-size: 12.5px;
}

.pre-event .input {
  min-height: 52px;
  font-size: 16px;
}

.pre-event .btn {
  min-height: 52px;
  border-radius: 999px;
  padding-inline: var(--space-6);
}

.pre-event .btn-ghost {
  min-height: 44px;
  padding-inline: var(--space-3);
}

.pre-event .commit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.pre-event .commit-row span {
  font-size: 12.5px;
}

/* — panels (13b, 14a–c) — */

.pre-event .page-title h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 38px);
  line-height: 1.1;
}

.pre-event .page-title p {
  max-width: 74ch;
  margin: var(--space-2) 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.pre-event .panel {
  min-width: 0;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-radius: 32px;
  background: var(--color-surface);
}

.pre-event .panel h2 {
  margin: 0;
  font-size: 21px;
}

.pre-event .rail h2 {
  margin: 0;
  font-size: 19px;
}

.pre-event .detail h2 {
  margin: 0;
  font-size: 23px;
}

.pre-event .panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.pre-event .panel-head h2,
.pre-event .panel-head h3 {
  margin: 0;
}

.pre-event .panel-head a {
  color: var(--color-accent-700);
  font-size: 13px;
}

.pre-event .panel .hint,
.pre-event .detail .hint,
.pre-event .rail .hint {
  margin: var(--space-2) 0 0;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  font-size: 12.5px;
  line-height: 1.55;
}

.pre-event .panel .consequence {
  max-width: 70ch;
  margin: var(--space-2) 0 0;
  color: var(--color-accent-800);
  font-size: 13px;
  line-height: 1.6;
}

.pre-event .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pre-event .field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pre-event .note {
  align-self: end;
  padding: var(--space-3) var(--space-4);
  border-radius: 20px;
  background: var(--color-bg);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
}

.pre-event .note.unmet {
  color: var(--color-accent-800);
}

/* — the Event Template choice (13b) — */

.pre-event .choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pre-event .choice {
  display: block;
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: 24px;
  background: var(--color-bg);
  cursor: pointer;
}

.pre-event .choice:has(input:checked) {
  border-color: var(--color-accent-2-400);
  background: var(--color-accent-2-100);
}

.pre-event .choice:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pre-event .choice-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.pre-event .choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-accent-600);
}

.pre-event .choice-name {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.pre-event .choice-name strong {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
}

.pre-event .choice-name span {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 12px;
}

.pre-event .carries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

/* — an empty state that routes somewhere rather than dead-ending — */

.pre-event .empty-note {
  margin-top: var(--space-4);
  padding: var(--space-6);
  border: 1px dashed var(--color-accent-300);
  border-radius: 24px;
  background: var(--color-accent-100);
}

.pre-event .empty-note h3,
.pre-event .empty-note h4 {
  margin: 0;
  font-size: 18px;
}

.pre-event .empty-note p {
  max-width: 62ch;
  margin: var(--space-2) 0 0;
  color: var(--color-accent-800);
  font-size: 13px;
  line-height: 1.55;
}

.pre-event .empty-note .btn {
  margin-top: var(--space-4);
}

/* — the panel that states the consequence before the act (13b, 14b) — */

.pre-event .commit-panel {
  padding: var(--space-6);
  border: 1px solid var(--color-accent-300);
  border-radius: 32px;
  background: var(--color-accent-100);
}

.pre-event .commit-panel.ready {
  border-color: var(--color-accent-2-300);
  background: var(--color-accent-2-100);
}

.pre-event .commit-panel h2 {
  margin: 0;
  font-size: 23px;
}

.pre-event .commit-panel p {
  max-width: 74ch;
  margin: var(--space-3) 0 0;
  color: var(--color-accent-800);
  font-size: 13.5px;
  line-height: 1.6;
}

.pre-event .commit-panel ul {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding-left: 18px;
  color: var(--color-accent-800);
  font-size: 13.5px;
  line-height: 1.55;
}

/* — the Event Template editor (14a) — */

.pre-event .switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.pre-event .switch button {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.pre-event .switch button[aria-pressed="true"] {
  border-color: var(--color-accent-600);
  background: var(--color-accent-600);
  color: var(--color-bg);
}

.pre-event .title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-6);
  align-items: end;
}

.pre-event .title-row.source-view {
  grid-template-columns: minmax(0, 1fr);
}

.pre-event .two-pane {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.pre-event .two-pane.wide-rail {
  grid-template-columns: 400px minmax(0, 1fr);
}

.pre-event .rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border-radius: 32px;
  background: var(--color-surface);
}

.pre-event .rail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Each row carries its own counts, so an empty stall is visible without
   opening it. */
.pre-event .rail-row {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: 24px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pre-event .rail-row[aria-current="true"] {
  border-color: var(--color-accent-2-400);
  background: var(--color-accent-2-100);
}

.pre-event .rail-row strong {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
}

.pre-event .stall-rail-row {
  gap: var(--space-2);
  padding: var(--space-4);
}

.pre-event .stall-rail-row strong {
  font-size: 19px;
  line-height: 1.15;
}

.pre-event .stall-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.pre-event .rail-row .meta {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 12px;
}

.pre-event .rail-row .meta.wants-attention {
  color: var(--color-accent-700);
}

.pre-event .rail-foot {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 12px;
  line-height: 1.5;
}

.pre-event .detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-radius: 32px;
  background: var(--color-surface);
}

.pre-event .detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.pre-event .detail-head .field {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.pre-event .detail-head .tag {
  margin-top: 26px;
}

.pre-event .detail h3 {
  margin: 0;
  font-size: 18px;
}

.pre-event .menu-item {
  padding: var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
}

.pre-event .menu-item .field-row {
  grid-template-columns: minmax(0, 1fr) 150px;
  margin-top: 0;
}

.pre-event .recipe-label {
  margin: var(--space-3) 0 0;
  color: var(--color-accent-700);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pre-event .recipe-rows {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.pre-event .recipe-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: var(--space-2);
  align-items: center;
}

.pre-event .menu-item .input,
.pre-event .threshold-row .input {
  min-height: 46px;
  font-size: 15px;
}

.pre-event .no-recipe {
  margin: 0;
  color: var(--color-accent-800);
  font-size: 12.5px;
  line-height: 1.5;
}

.pre-event .threshold-rows {
  display: grid;
  gap: var(--space-2);
}

.pre-event .threshold-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: var(--space-2);
  align-items: center;
}

.pre-event .self-start {
  align-self: flex-start;
}

/* — Ready Boards (14b) — */

.pre-event .tray {
  padding: var(--space-4) var(--space-6) var(--space-6);
  border: 1px solid var(--color-accent-300);
  border-radius: 32px;
  background: var(--color-accent-100);
}

.pre-event .tray.settled {
  border-color: var(--color-accent-2-300);
  background: var(--color-accent-2-100);
}

.pre-event .tray h2 {
  margin: 0;
  font-size: 19px;
}

/* On a tinted tray, `.tag-accent`'s own tint is the tray's: one step down the
   ramp keeps the chip a chip. */
.pre-event .tray-tags .tag {
  background: var(--color-accent-200);
}

.pre-event .tray p {
  max-width: 66ch;
  margin: var(--space-2) 0 0;
  color: var(--color-accent-800);
  font-size: 13px;
  line-height: 1.55;
}

.pre-event .tray-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pre-event .board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
}

.pre-event .board-count {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.pre-event .board-count.full {
  color: var(--color-accent-700);
}

.pre-event .board-rows {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* An unavailable row says why on the row itself, rather than being a
   tick-box that has silently gone unavailable. */
.pre-event .board-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: 20px;
  background: var(--color-bg);
  cursor: pointer;
}

.pre-event .board-row:has(input:checked) {
  background: var(--color-accent-2-100);
}

.pre-event .board-row:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.pre-event .board-row:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pre-event .board-row input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-accent-600);
}

.pre-event .board-row .name {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
}

.pre-event .board-row .why {
  color: var(--color-accent-700);
  font-size: 12px;
}

/* — converting a past Event (14c) — */

.pre-event .copy-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.pre-event .copy-column {
  padding: var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
}

.pre-event .copy-column.carried {
  background: var(--color-accent-2-100);
}

.pre-event .copy-column h3 {
  margin: 0;
  font-size: 16px;
}

.pre-event .copy-column ul {
  display: grid;
  gap: 6px;
  margin: var(--space-3) 0 0;
  padding-left: 17px;
  font-size: 13px;
  line-height: 1.5;
}

.pre-event .copy-column.left-behind ul {
  color: var(--color-neutral-700);
}

.pre-event .warning {
  padding: var(--space-4) var(--space-6) var(--space-6);
  border: 1px solid var(--color-accent-300);
  border-radius: 24px;
  background: var(--color-accent-100);
}

.pre-event .warning h3 {
  margin: 0;
  font-size: 17px;
}

.pre-event .warning p {
  max-width: 64ch;
  margin: var(--space-2) 0 0;
  color: var(--color-accent-800);
  font-size: 13px;
  line-height: 1.55;
}

.pre-event .table {
  margin: var(--space-3) 0 0;
  font-variant-numeric: tabular-nums;
}

.pre-event .table th {
  text-align: left;
}

.pre-event .source-name {
  margin: var(--space-1) 0 0;
  font-size: 26px;
}

.pre-event .saved-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.pre-event .saved-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
  font-size: 14px;
}

.pre-event .saved-list li span {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 12.5px;
}

/* — narrower than the artboard — */

@media (max-width: 1080px) {
  .pre-event .gate,
  .pre-event .title-row,
  .pre-event .two-pane,
  .pre-event .two-pane.wide-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .pre-event .gate {
    gap: var(--space-4);
  }
}

@media (max-width: 640px) {
  .pre-event > header,
  .pre-event > main {
    width: min(calc(100% - (var(--space-4) * 2)), 1240px);
  }

  .pre-event .field-row,
  .pre-event .field-pair,
  .pre-event .menu-item .field-row,
  .pre-event .recipe-row,
  .pre-event .threshold-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pre-event .note {
    align-self: stretch;
  }

  .pre-event .gate-card,
  .pre-event .panel,
  .pre-event .commit-panel,
  .pre-event .detail,
  .pre-event .tray {
    padding: var(--space-4);
  }

  .pre-event .commit-row .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pre-event .status {
    transition: none;
  }
}