/* =========================================================
   Event Studio — design system
   Plain CSS, no build step.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --bg-sidebar: #f6f6f4;
  --bg-subtle: #fafafa;
  --bg-hover: #f0f0ee;

  --border: #e6e6e2;
  --border-strong: #d5d5cf;

  --text: #16181a;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;

  --accent: #8fb3ef;
  --accent-hover: #7ba4ea;
  --accent-soft: #eef3fd;
  --accent-ink: #16181a;

  --success-bg: #e7f7ec;
  --success-ink: #1a7f45;
  --warn-bg: #fff3e0;
  --warn-ink: #a35a00;
  --info-bg: #f1ecfb;
  --info-ink: #5a3fb5;
  --danger-bg: #fdeaea;
  --danger-ink: #b42222;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 18, 20, 0.05);
  --shadow: 0 4px 16px rgba(16, 18, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 18, 20, 0.12);

  --sidebar-w: 232px;
  --content-max: 880px;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

img,
svg {
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Layout ---------- */
.app {
  display: flex;
  min-height: 100vh;
}

.main {
  flex: 1;
  min-width: 0;
  background: var(--bg);
}

.page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.page--wide {
  max-width: 1180px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.page-title {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-subtitle {
  margin-top: 8px;
  color: var(--text-muted);
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 16px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 18px;
}

.breadcrumb span[aria-hidden] {
  color: var(--text-faint);
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 14px 18px;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 22px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand sup {
  font-size: 13px;
  color: var(--text);
}

.brand__mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent);
  display: grid;
  place-items: center;
  margin-right: 8px;
  align-self: center;
}

.icon-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
}

.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* Which side of the app you are on: organising, or speaking. Two destinations shown at
   once, because the point is to see that the other one exists. */
.segmented {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.segmented__option {
  flex: 1;
  padding: 5px 8px;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segmented__option:hover {
  color: var(--text);
}

.segmented__option.is-active {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* Event switcher. Built on <details>, so it opens without JavaScript. */
.switcher {
  position: relative;
  margin-bottom: 10px;
}

.switcher__button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  list-style: none;
}

.switcher__button::-webkit-details-marker {
  display: none;
}

.switcher__button:hover {
  border-color: var(--border-strong);
}

.switcher__button svg {
  color: var(--text-faint);
  flex: 0 0 14px;
  transition: transform 0.15s ease;
}

.switcher[open] .switcher__button svg {
  transform: rotate(180deg);
}

.switcher__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.switcher__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.switcher__name {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher__menu {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}

.switcher__option {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher__option:hover {
  background: var(--bg-hover);
}

.switcher__option.is-active {
  background: #e9e9e5;
  font-weight: 600;
}

.switcher__sep {
  height: 1px;
  background: var(--border);
  margin: 6px 2px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
}

.nav__item:hover {
  background: var(--bg-hover);
}

.nav__item.is-active {
  background: #e9e9e5;
  font-weight: 600;
}

/* A module we have named but not built. Inert: no hover, no pointer, muted. */
.nav__item.is-soon {
  color: var(--text-faint);
  cursor: default;
}

.nav__item.is-soon:hover {
  background: transparent;
}

.nav__item.is-soon svg {
  color: var(--text-faint);
}

.nav__item svg {
  flex: 0 0 16px;
  color: var(--text-muted);
}

.nav__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__chevron {
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.nav__group.is-open > .nav__item .nav__chevron {
  transform: rotate(180deg);
}

.nav__sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px;
}

.nav__group.is-open .nav__sub {
  display: flex;
}

.nav__sublink {
  display: block;
  padding: 7px 10px 7px 36px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text);
}

.nav__sublink:hover {
  background: var(--bg-hover);
}

.nav__sublink.is-active {
  background: #e9e9e5;
  font-weight: 600;
}

/* A page inside a group we have named but not built. Same rule as .nav__item.is-soon:
   inert, muted, and never a link. */
.nav__sublink.is-soon {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  cursor: default;
}

.nav__sublink.is-soon:hover {
  background: transparent;
}

.sidebar__foot {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: #d9d9d3;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #40423f;
  flex: 0 0 22px;
}

.avatar--lg {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  font-size: 14px;
}

.avatar--sm {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  font-size: 8px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--text);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  background: #2b2e31;
}

.btn--ghost {
  background: #fff;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  background: var(--bg-subtle);
}

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--accent:hover {
  background: var(--accent-hover);
}

.btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.btn--link {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.btn--link:hover {
  background: none;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: var(--text);
}

.btn--link:disabled:hover,
.btn--ghost:disabled:hover {
  background: none;
}

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--text-muted);
}

.badge--success {
  background: var(--success-bg);
  color: var(--success-ink);
}

.badge--warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.badge--info {
  background: var(--info-bg);
  color: var(--info-ink);
}

.badge--danger {
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.badge--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 22px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.chip:hover {
  background: var(--bg-subtle);
}

.chip.is-active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

.chip__count {
  color: var(--text-faint);
  font-weight: 600;
}

/* ---------- Forms ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.input,
.select {
  height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  color: var(--text);
}

.input::placeholder {
  color: var(--text-faint);
}

.input:focus,
.select:focus {
  outline: 2px solid rgba(22, 24, 26, 0.12);
  outline-offset: 1px;
  border-color: var(--text);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Controls that sit in a sentence rather than in a column: a number and its unit, read
   left to right. Width comes from the content, not from the grid. */
.input--num {
  width: 84px;
  flex: none;
}

.select--auto {
  width: auto;
  flex: none;
}

/* Same skin as .input, but it has to be able to grow. */
.textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  color: var(--text);
  resize: vertical;
}

.textarea::placeholder {
  color: var(--text-faint);
}

.textarea:focus {
  outline: 2px solid rgba(22, 24, 26, 0.12);
  outline-offset: 1px;
  border-color: var(--text);
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group svg {
  position: absolute;
  left: 12px;
  color: var(--text-faint);
  pointer-events: none;
}

.input-group .input {
  padding-left: 36px;
}

.search {
  max-width: 100%;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
}

.radio,
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}

.radio input,
.checkbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--text);
  margin: 0;
}

.field__error {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--danger-ink);
}

/* One box per digit. The value is mirrored into a hidden input by app.js. */
.code-input {
  display: flex;
  gap: 8px;
}

.code-input__box {
  width: 46px;
  height: 54px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}

.code-input__box:focus {
  outline: 2px solid rgba(22, 24, 26, 0.12);
  outline-offset: 1px;
  border-color: var(--text);
}

.code-input--error .code-input__box {
  border-color: var(--danger-ink);
}

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.card__title {
  font-size: 15px;
  font-weight: 700;
}

.card__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--sidebar {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

/* Stat card */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.stat__value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.stat__delta {
  font-size: 12.5px;
  color: var(--text-muted);
}

.stat__delta--up {
  color: var(--success-ink);
}

.stat__delta--down {
  color: var(--danger-ink);
}

/* Definition list (profile blocks) */
.dl {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  row-gap: 14px;
  column-gap: 16px;
  font-size: 13.5px;
}

.dl dt {
  color: var(--text-muted);
}

.dl dd {
  margin: 0;
  font-weight: 500;
}

.dl dd.is-empty {
  color: var(--text-faint);
  font-weight: 400;
}

/* Checklist (profile completeness) */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  width: 100%;
}

.checklist__item:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.checklist__item.is-done {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

/* The tick is the only thing on a done row that should still be loud. The label goes
   muted because it is finished with; the mark is what you are scanning for. */
.checklist__item.is-done > svg {
  color: var(--success-ink);
}

.checklist__item .checklist__end {
  margin-left: auto;
  color: var(--text-faint);
  display: flex;
}

.checklist__item.is-done .checklist__end {
  color: var(--success-ink);
}

/* A task row: a tick you can hit without thinking, and the rest of the task
   behind a disclosure so the list stays a list. */
.checklist__item--task {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.task {
  flex: 1;
  min-width: 0;
}

.task__tick {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}

.task__tick:hover {
  color: var(--text);
}

.is-done .task__tick {
  color: var(--success-ink);
}

.task__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}

.task__summary::-webkit-details-marker {
  display: none;
}

.task__title {
  font-weight: 500;
}

.is-done .task__title {
  text-decoration: line-through;
}

.task__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.task__panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Progress ring */
.ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 8px 0 18px;
}

.ring__value {
  font-size: 13px;
  font-weight: 700;
}

/* ---------- Hero / search panel ---------- */
.hero {
  text-align: center;
  padding: 26px 0 8px;
}

.hero__title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hero__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
}

.tabs-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  margin: 20px auto 22px;
}

.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.tab-pill:hover {
  color: var(--text);
}

.tab-pill.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

.center {
  display: flex;
  justify-content: center;
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: #fff;
}

/* ---------- Tabs (underline) ---------- */
.tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab {
  padding: 10px 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  border: 0;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--text);
}

.tab.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* How many are behind the tab. Faint, because it is the label you are reading. */
.tab__count {
  margin-left: 6px;
  color: var(--text-faint);
  font-weight: 600;
}

/* ---------- Table ---------- */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  white-space: nowrap;
}

.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: var(--bg-subtle);
}

.table .col-check {
  width: 44px;
}

.table .col-end {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

/* Shrinks a column to its content so the wordy column keeps the leftover width. */
.table .col-tight {
  width: 1%;
  white-space: nowrap;
}

.cell-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cell-user__name {
  font-weight: 600;
}

.cell-user__meta {
  color: var(--text-muted);
  font-size: 12.5px;
}

.sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* ---------- List cards (events / bookings) ---------- */
.list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.list-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 18px 20px;
}

.list-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.list-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.list-card__title {
  font-size: 16px;
  font-weight: 700;
}

.list-card__meta {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.list-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}

.list-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.list-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Pushes a trailing action to the right of a flex row. */
.list-card__end {
  margin-left: auto;
}

/* ---------- Map ---------- */
.map {
  position: relative;
  height: 280px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-subtle);
}

.map--tall {
  height: 380px;
}

/* Shown until the map loads, and left in place if it never does. */
.map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* The search results for an address lookup, over the field that produced them. */
.map-search {
  position: relative;
}

.map-search__results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow-y: auto;
}

.map-search__results:empty {
  display: none;
}

.map-search__result {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.map-search__result:hover,
.map-search__result:focus-visible {
  background: var(--bg-hover);
}

.map-search__result span {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---------- Stage indicator ----------
   Where something has got to along a path it walks once: draft, open, closed, decided.
   Not a wizard — nothing here is clickable, and it never asks for the next step. It answers
   "where are we" at a glance, which is the question a long-running thing keeps provoking. */
.steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Labels never break mid-word, so in a column too narrow for the path it scrolls rather
     than clipping a step out of existence. A stage nobody can see is worse than a scrollbar. */
  overflow-x: auto;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-faint);
}

/* The rule between steps, drawn rather than marked up: it is a picture of the gap, not an
   item on the list. Growing the item is what lets the row span its container however many
   steps there are. */
.steps__item:not(:last-child) {
  flex: 1;
}

.steps__item:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--border);
}

.steps__dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg);
}

.steps__item.is-current {
  color: var(--text);
  font-weight: 600;
}

.steps__item.is-current .steps__dot {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Last, so that a step which is both finished and where you are reads as finished. Arriving
   at the end of the path is the good news, and it should not look like work in progress. */
.steps__item.is-done {
  color: var(--success-ink);
}

.steps__item.is-done .steps__dot {
  border-color: var(--success-ink);
  background: var(--success-bg);
  color: var(--success-ink);
}

/* ---------- Empty state ---------- */
.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.empty__title {
  font-size: 16px;
  font-weight: 700;
}

.empty__text {
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 6px 0 18px;
  max-width: 44ch;
}

.mini-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: #fff;
}

.mini-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 14.5px;
}

.mini-card__head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mini-card__body {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mini-card__body strong {
  color: var(--text);
  font-weight: 600;
}

/* Banner (replaces map hero) */
.banner {
  position: relative;
  height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(120deg, #eaf0fb 0%, #dfe8f7 55%, #f4f1ea 100%);
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  margin-bottom: 26px;
}

.banner__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(22, 24, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 24, 26, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.banner__content {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.banner__stat {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.banner__stat b {
  display: block;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.banner__stat span {
  font-size: 12px;
  color: var(--text-muted);
}

.banner__stats {
  display: flex;
  gap: 10px;
}

/* Agenda */
.agenda {
  display: flex;
  flex-direction: column;
}

.agenda__item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.agenda__item:last-child {
  border-bottom: 0;
}

.agenda__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
}

.agenda__title {
  font-weight: 600;
}

.agenda__meta {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Bar chart */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 180px;
  padding-top: 12px;
}

.bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.bars__bar {
  width: 100%;
  max-width: 42px;
  border-radius: 6px 6px 0 0;
  background: var(--accent);
}

.bars__bar--muted {
  background: #e7e7e3;
}

.bars__label {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Misc */
.notice {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  background: var(--bg-sidebar);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-top: 22px;
}

/* It has to stand off what follows as much as what it follows — a flash message pressed
   against the first card reads as part of it. The last one needs nothing: there is nothing
   to separate from, and the container has its own padding. */
.notice:not(:last-child) {
  margin-bottom: 22px;
}

.notice__text strong {
  display: block;
  font-size: 13.5px;
}

.notice__text span {
  font-size: 13px;
  color: var(--text-muted);
}

.notice__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Tone modifiers. The default notice is neutral; these carry an outcome. */
.notice--success {
  background: var(--success-bg);
}

.notice--success .notice__text span {
  color: var(--success-ink);
}

.notice--warn {
  background: var(--warn-bg);
}

.notice--warn .notice__text span {
  color: var(--warn-ink);
}

.notice--danger {
  background: var(--danger-bg);
}

.notice--danger .notice__text span {
  color: var(--danger-ink);
}

/* Price — the one place in the app that shows money. */
.price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price__amount {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.price__was {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-faint);
  text-decoration: line-through;
}

.price__note {
  font-size: 12.5px;
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
}

.faint {
  color: var(--text-faint);
}

.small {
  font-size: 12.5px;
}

.strong {
  font-weight: 700;
}

/* Something a person typed into a textarea, shown back the way they wrote it. Keeps their
   paragraph breaks without letting their markup through: the value is still HTML-encoded,
   only the whitespace handling changes. */
.prose {
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.7;
}

/* Markdown that has been rendered: real headings, lists and links rather than the marks
   somebody typed. The same measure and rhythm as .prose, without the pre-wrap — the line
   breaks live in the tags now, so honouring them twice would double every gap. */
.prose--rich {
  white-space: normal;
}

.prose--rich > :first-child {
  margin-top: 0;
}

.prose--rich > :last-child {
  margin-bottom: 0;
}

.prose--rich p {
  margin: 0 0 12px;
}

.prose--rich h2 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 22px 0 8px;
}

.prose--rich h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 18px 0 6px;
}

.prose--rich ul,
.prose--rich ol {
  margin: 0 0 12px;
  padding-left: 22px;
  list-style: revert;
}

.prose--rich li {
  margin-bottom: 4px;
}

.prose--rich a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose--rich blockquote {
  margin: 0 0 12px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-muted);
}

.prose--rich code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  font-size: 13px;
}

.prose--rich hr {
  height: 1px;
  border: 0;
  margin: 20px 0;
  background: var(--border);
}

/* ---------- Markdown editor ----------
   Writes markdown, shows the outcome. The textarea is the field; everything above it is an
   enhancement that only appears once the script has run, so a page with no JavaScript is a
   plain textarea and still works. */
.editor {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

.editor:focus-within {
  outline: 2px solid rgba(22, 24, 26, 0.12);
  outline-offset: 1px;
  border-color: var(--text);
}

.editor__bar {
  display: none;
}

.editor.is-live .editor__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

.editor__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  padding: 0 5px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
}

.editor__tool:hover {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* What the cursor is standing in. Read from the selection, so it follows the caret rather
   than only the last button pressed. */
.editor__tool.is-active {
  background: var(--text);
  color: #fff;
}

.editor__tool--text {
  padding: 0 9px;
  font-size: 12.5px;
  font-weight: 700;
}

.editor__split {
  width: 1px;
  height: 18px;
  margin: 0 5px;
  background: var(--border);
}

.editor__gap {
  flex: 1;
}

.editor__surface {
  display: none;
}

.editor.is-live .editor__surface {
  display: block;
  padding: 12px 14px;
  min-height: calc(var(--editor-lines, 8) * 1.7em);
  outline: 0;
}

/* Nothing typed yet. A real placeholder cannot be given to a contenteditable, so the
   prompt is drawn and the script says when there is nothing behind it. */
.editor__surface.is-empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
}

.editor.is-live .editor__source {
  display: none;
}

/* The marks themselves, for the once a fortnight somebody wants to see them. */
.editor.is-live.is-source .editor__surface {
  display: none;
}

.editor.is-live.is-source .editor__source {
  display: block;
  border: 0;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.editor.is-live.is-source .editor__source:focus {
  outline: 0;
}

.right {
  text-align: right;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.row--between {
  justify-content: space-between;
}

.row--wrap {
  flex-wrap: wrap;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* ---------- Auth ---------- */
/* Centred shell for signed-out pages. Replaces .app — there is no sidebar yet. */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--bg-sidebar);
}

.auth__card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

.auth__brand {
  margin-bottom: 24px;
}

.auth__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.auth__sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.auth__foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Public ---------- */
/* Shell for the pages strangers reach, such as a call for speakers. Like .auth it has no
   sidebar, but the content is a document rather than a single form, so it runs the full
   height of the page with a plain bar above it instead of a floating card. */
.public {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.public__bar {
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  background: #fff;
}

.public__body {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 72px;
}

.public__foot {
  border-top: 1px solid var(--border);
  padding: 20px 32px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 860px) {
  .public__bar,
  .public__body,
  .public__foot {
    padding-left: 20px;
    padding-right: 20px;
  }

  .public__body {
    padding-top: 32px;
  }
}

/* ---------- Style guide ---------- */
.sg-section {
  scroll-margin-top: 24px;
  padding-top: 8px;
}

.sg-section + .sg-section {
  margin-top: 56px;
}

.sg-section__head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 22px;
}

.sg-section__head h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sg-section__head p {
  color: var(--text-muted);
  font-size: 13.5px;
  margin-top: 4px;
}

.sg-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}

.sg-block + .sg-block {
  margin-top: 16px;
}

.sg-block__demo {
  padding: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #fff;
}

.sg-block__demo--stack {
  flex-direction: column;
  align-items: stretch;
}

.sg-block__demo--tint {
  background: var(--bg-subtle);
}

.sg-block__code {
  border-top: 1px solid var(--border);
  background: #fbfbfa;
  margin: 0;
  padding: 14px 18px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #45484b;
  overflow-x: auto;
  white-space: pre;
}

.sg-caption {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 22px 0 10px;
}

.sg-swatch {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.sg-swatch__chip {
  height: 62px;
  border-bottom: 1px solid var(--border);
}

.sg-swatch__meta {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
}

.sg-swatch__meta b {
  display: block;
  font-size: 12.5px;
}

.sg-swatch__meta code {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sg-type {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.sg-type:last-child {
  border-bottom: 0;
}

.sg-type__meta {
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sg-toc {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sg-toc a {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-muted);
}

.sg-toc a:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.sg-do {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  align-items: flex-start;
}

.sg-do__mark {
  font-weight: 800;
  flex: 0 0 auto;
}

.sg-do--yes .sg-do__mark {
  color: var(--success-ink);
}

.sg-do--no .sg-do__mark {
  color: var(--danger-ink);
}

.sg-space {
  background: var(--accent);
  height: 14px;
  border-radius: 3px;
}

.sg-radius {
  height: 60px;
  border: 1px solid var(--border-strong);
  background: var(--bg-subtle);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

.sg-shadow {
  height: 70px;
  border-radius: var(--radius);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid--sidebar,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The content column has just halved, and a 180px label column would leave the
     values reading one word per line. */
  .dl {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
  .dl dd {
    margin-bottom: 10px;
  }
}

@media (max-width: 860px) {
  .sidebar {
    display: none;
  }
  .page {
    padding: 24px 18px 60px;
  }
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-title {
    font-size: 30px;
  }
  .sg-type {
    grid-template-columns: minmax(0, 1fr);
  }
  .sg-toc {
    position: static;
  }
}