/* ==========================================================================
   dashboard.css — the internal campaign index at /?dashboard

   Same tokens as the landing pages, denser layout. Nothing here ships to a
   visitor, so it stays plain.
   ========================================================================== */

.dash { background: var(--base-ultra-light); min-block-size: 100vh; }

/* The gate and the list are toggled with the `hidden` attribute, and both
   carry a display rule that would otherwise outrank it. Without this the
   password card stays on screen after unlocking. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Password curtain
   -------------------------------------------------------------------------- */

.dash__gate {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.dash__gateform {
  inline-size: 100%;
  max-inline-size: 22rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l) var(--space-m);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xxl);
  background: var(--white);
  box-shadow: 0 14px 44px color-mix(in oklch, var(--base) 12%, transparent);
}

.dash__gatetitle { margin: 0 0 var(--space-xs); font-size: var(--text-l); }

.dash__gateform label {
  font-family: var(--heading-font-family);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
}

.dash__gateform input {
  inline-size: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  background: var(--base-ultra-light);
  font-family: var(--text-font-family);
  /* 1rem minimum or iOS zooms the page on focus. */
  font-size: max(1rem, var(--text-s));
  color: var(--text-dark);

  &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
}

.dash__gateerr { font-size: var(--text-s); color: var(--danger-readable); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.dash__head {
  padding-block: var(--space-l);
  border-block-end: 1px solid var(--hairline);
  background: var(--white);
}

.dash__title { margin: 0.2em 0 0; }
.dash__sub { font-size: var(--text-s); color: var(--text-dark-muted); margin-block-start: 0.3em; }

.dash__warn {
  margin-block-start: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border: 1px dashed color-mix(in oklch, var(--danger) 45%, transparent);
  border-radius: var(--radius-l);
  font-size: var(--text-s);
  color: var(--danger-readable);
}

/* --------------------------------------------------------------------------
   Campaign cards
   -------------------------------------------------------------------------- */

.dash__list {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 0;
  display: grid;
  grid-template-columns: var(--grid-1);
  gap: var(--grid-gap);

  @media (min-width: 900px) { grid-template-columns: var(--grid-3); }
}

.dash__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.dash__cardhead { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-s); align-items: start; }

.dash__id {
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: var(--text-l);
  line-height: 1;
  color: color-mix(in oklch, var(--primary) 45%, transparent);
  font-variant-numeric: tabular-nums;
}

.dash__name { margin: 0; font-size: var(--text-m); }
.dash__meta { font-size: var(--text-xs); color: var(--text-dark-muted); margin-block-start: 0.2em; }
.dash__unit { color: var(--text-dark-muted); }

.dash__status {
  padding: 0.2em 0.6em;
  border-radius: 99px;
  font-family: var(--heading-font-family);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  background: var(--text-dark-muted);
}

.dash__status[data-status="live"] { background: var(--success-readable); }
.dash__status[data-status="paused"] { background: var(--accent-readable); }

.dash__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding-block: var(--space-s);
  border-block: 1px solid var(--hairline);
}

.dash__facts div { display: flex; flex-direction: column; gap: 0.1em; }
.dash__facts dt { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dark-muted); }
.dash__facts dd { margin: 0; font-size: var(--text-s); font-family: var(--heading-font-family); word-break: break-word; }

.dash__audience { font-size: var(--text-s); color: var(--text-dark-muted); line-height: 1.5; flex-grow: 1; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.dash__section { margin-block-start: var(--space-xl); }
.dash__h2 { margin: 0 0 var(--space-xs); font-size: var(--text-l); }
.dash__note { font-size: var(--text-s); color: var(--text-dark-muted); margin-block-end: var(--space-s); max-inline-size: 60ch; }

.dash__links {
  display: grid;
  grid-template-columns: var(--grid-1);
  gap: var(--space-s);

  @media (min-width: 700px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 1100px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dash__link {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;

  &:hover { border-color: color-mix(in oklch, var(--primary) 45%, transparent); transform: translateY(-2px); }
  & strong { font-family: var(--heading-font-family); color: var(--text-dark); }
  & span { font-size: var(--text-xs); color: var(--text-dark-muted); }
}

.dash__todo {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}

.dash__todo li { padding-inline-start: 1.1em; position: relative; }
.dash__todo li::before { content: "•"; position: absolute; inset-inline-start: 0; color: var(--accent-readable); }

.dash__foot {
  margin-block-start: var(--space-xl);
  padding-block: var(--space-m);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--text-dark-muted);
}