/* ============================================================
   Mythox - Founder Dashboards
   ============================================================ */

#founder-dash-root,
#founder-dash-root * {
  box-sizing: border-box;
}

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

.fd-gate,
.fd-panel,
.fd-card,
.fd-frame,
.fd-soft,
.fd-pp {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-grad-2));
}

.fd-gate {
  max-width: 560px;
  margin: 42px auto;
  padding: 24px;
}

.fd-gate h1,
.fd-gate h2,
.fd-head h1 {
  margin: 0;
}

/* The gate title moved from h2 to h1 for reading order; it keeps the h2 size. */
.fd-gate h1 {
  font-size: clamp(22px, 3vw, 30px);
}

.fd-gate p,
.fd-head p,
.fd-sub,
.fd-empty,
.fd-src,
.fd-mlbl,
.fd-mini span,
.fd-flow-sub {
  color: var(--muted);
}

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

.fd-head p {
  margin: 7px 0 0;
  font-size: 14px;
}

.fd-actions,
.fd-row-actions,
.fd-exportbar,
.fd-timeframes,
.fd-projectbar,
.fd-lookup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fd-actions {
  justify-content: flex-end;
}

.fd-src,
.fd-projectbar span {
  font-family: var(--mono);
  font-size: 11.5px;
}

.fd-tabbar {
  margin: 0 0 18px;
}

.fd-subtabs {
  margin-top: 0;
}

.fd-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fd-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.fd-metrics.compact {
  margin: 12px 0;
}

.fd-metrics.compact .fd-card {
  background: transparent;
}

.fd-card,
.fd-panel {
  padding: 18px;
}

.fd-metric {
  min-height: 92px;
}

.fd-mnum {
  font-family: var(--mono);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.fd-mnum small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.fd-mlbl {
  margin-top: 8px;
  font-size: 12px;
}

.fd-panel h2,
.fd-panel h3,
.fd-soft h3,
.fd-soft h4 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.fd-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
}

.fd-grid {
  display: grid;
  gap: 18px;
}

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

.fd-chart {
  position: relative;
  height: 300px;
  min-height: 300px;
}

.fd-chart.tall {
  height: 340px;
  min-height: 340px;
}

.fd-list {
  display: flex;
  flex-direction: column;
}

.fd-lrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.fd-lrow:last-child {
  border-bottom: 0;
}

.fd-lrow span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-lrow b {
  flex: 0 0 auto;
  font-family: var(--mono);
  color: var(--accent);
}

.fd-empty {
  padding: 22px 2px;
  font-size: 13.5px;
}

.fd-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
}

.fd-section-title span,
.fd-section-title b {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fd-section-title span {
  color: var(--text);
}

.fd-section-title b {
  color: var(--muted);
  font-weight: 500;
}

.fd-frame {
  overflow: hidden;
}

.fd-framebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

.fd-framebody {
  padding: 18px;
}

.fd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.fd-pill.on,
.fd-pill.live,
.fd-pill.active {
  color: var(--accent);
  border-color: var(--gold-line);
}

.fd-pill.parked,
.fd-pill.finished {
  color: var(--text);
}

.fd-mini-metrics {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fd-mini {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fd-mini b {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--text);
}

.fd-mini span {
  font-size: 11px;
}

.fd-ins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fd-ins {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  padding: 14px;
}

.fd-ins h3,
.fd-ins h4 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}

.fd-ins ul {
  margin: 0;
  padding-left: 16px;
}

.fd-ins li {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 6px;
}

.fd-leads {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}

.fd-leads.open {
  max-height: 1500px;
  overflow: auto;
  margin-top: 12px;
}

.fd-lead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

.fd-lead b,
.fd-lead span {
  display: block;
}

.fd-lead b {
  color: var(--text);
  font-size: 13.5px;
}

.fd-lead span,
.fd-lead em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.fd-lead em {
  flex: 0 0 auto;
  text-align: right;
  font-family: var(--mono);
}

.fd-flow {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  padding: 24px 18px;
  overflow-x: auto;
}

.fd-flow-row {
  display: flex;
  align-items: center;
  min-width: max-content;
}

.fd-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 126px;
  text-align: center;
}

.fd-flow-ico {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

.fd-flow-ico.accent {
  color: var(--ink-on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.fd-flow-name {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 700;
}

.fd-flow-link {
  width: 54px;
  height: 1px;
  background: var(--line);
  flex: 0 0 auto;
  margin-top: -24px;
}

.fd-timeframes {
  margin-bottom: 4px;
}

.fd-timeframes button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 13px;
}

.fd-timeframes button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-on-accent);
}

.fd-timeframes span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.fd-soft {
  padding: 14px;
}

.fd-campaign-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fd-campaign-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.fd-campaign-head b {
  display: block;
  color: var(--text);
  font-size: 15px;
  margin: 4px 0 6px;
}

.fd-campaign-head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.fd-campaign-head strong {
  display: block;
  font-family: var(--mono);
  font-size: 24px;
  color: var(--accent);
  text-align: right;
}

.fd-campaign-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.fd-lookup input,
.fd-pp input,
.fd-pp select,
.fd-pp textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  outline: none;
}

.fd-lookup input:focus,
.fd-pp input:focus,
.fd-pp select:focus,
.fd-pp textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}

.fd-lookup input {
  max-width: 360px;
  font-family: var(--mono);
  font-size: 13px;
}

.fd-projectbar {
  justify-content: space-between;
  margin-bottom: 4px;
}

.fd-pp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fd-pp {
  overflow: hidden;
}

.fd-project-dragging {
  user-select: none;
}

.fd-pp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
}

.fd-pp-grip {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}

.fd-pp-grip:hover,
.fd-pp-grip:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}

.fd-pp-grip:active {
  cursor: grabbing;
}

.fd-pp.dragging,
.fd-pp.drop-before,
.fd-pp.drop-after {
  position: relative;
}

.fd-pp.dragging {
  z-index: 2;
  border-color: var(--accent);
  box-shadow: 0 14px 34px -18px var(--glow);
  transform: translateY(-1px);
}

.fd-pp.drop-before::before,
.fd-pp.drop-after::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 3;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--glow);
}

.fd-pp.drop-before::before {
  top: 0;
}

.fd-pp.drop-after::after {
  bottom: 0;
}

.fd-pp-title {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 750;
}

.fd-pp-chev {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform .2s ease;
}

.fd-pp.open .fd-pp-chev {
  transform: rotate(90deg);
  color: var(--accent);
}

.fd-pp-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}

.fd-pp.open .fd-pp-body {
  max-height: 6000px;
}

.fd-pp-inner {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
}

.fd-pp-inner.edit {
  padding-top: 18px;
  border-top: 0;
}

.fd-pp pre {
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}

.fd-pp form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fd-pp label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fd-pp textarea {
  min-height: 200px;
  max-height: 360px;
  resize: vertical;
  font-family: var(--mono);
  line-height: 1.55;
}

.fd-danger {
  color: var(--muted);
}

.fd-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-family: var(--mono);
  font-size: 12px;
  padding: 11px 18px;
  transition: opacity .2s ease, transform .2s ease;
}

.fd-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
  .fd-head,
  .fd-campaign-head {
    flex-direction: column;
  }
  .fd-actions {
    justify-content: flex-start;
  }
  .fd-grid.two,
  .fd-ins-grid {
    grid-template-columns: 1fr;
  }
  .fd-chart,
  .fd-chart.tall {
    height: 280px;
    min-height: 280px;
  }
}

@media (max-width: 560px) {
  .fd-card,
  .fd-panel,
  .fd-framebody {
    padding: 14px;
  }
  .fd-metrics {
    grid-template-columns: 1fr;
  }
  .fd-flow {
    padding: 18px 12px;
  }
}

/* PE1 money tab (Wave M4-3 part two). The module had no table of its own and money
   needs columns; built from the same tokens as everything above, nothing restyled. */
.fd-mtable {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.fd-mrow {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(84px, 1fr)) minmax(110px, 1.2fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  min-width: 720px;
}

.fd-mrow:last-child {
  border-bottom: 0;
}

.fd-mrow span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
}

.fd-mrow span:first-child {
  font-family: inherit;
}

.fd-mhead span {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A losing build type and an unknown one must never look the same. */
.fd-mrow.bad span:first-child { color: var(--bad); }
.fd-mrow.unknown span:first-child { color: var(--muted); }

/* A count that should be zero and is not. Marked, never hidden. */
.fd-metric.fd-m-bad .fd-mnum { color: var(--bad); }

/* The recheck history has five columns, not seven. Without its own grid the cells
   sit under the wrong headings, which on a money page is a wrong number. */
.fd-mtable.cols5 .fd-mrow {
  grid-template-columns: minmax(140px, 1.3fr) minmax(180px, 1.7fr) repeat(3, minmax(90px, 1fr));
  min-width: 620px;
}

/* Figures kept on screen after a failed refresh must not look current. */
.fd-panel.fd-stale { border-color: var(--bad); }
.fd-panel.fd-stale h2,
.fd-panel.fd-stale h3 { color: var(--bad); }

/* PE1 people tab. Deliberately TINY: sections, cards, tables, number tiles, pills and
   buttons all come from the shared component stylesheet the Systems page uses
   (modules/systems/systems.css, whose rules now name #founder-dash-root alongside
   #systems-root, so both pages read from one definition).
   Reis, 2026-07-27: "when I say same code I mean same code, not look alike."
   What remains here is the ONE thing the app has no component for: a per-day bar chart. */

#founder-dash-root .fd-sec { margin-bottom: 40px; }

/* Six and three across, matching the app's four-across .kpi-row on the same tokens. */
#founder-dash-root .kpi-row.fd-kpi-6 { grid-template-columns: repeat(6, 1fr); }
#founder-dash-root .kpi-row.fd-kpi-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  #founder-dash-root .kpi-row.fd-kpi-6 { grid-template-columns: repeat(3, 1fr); }
  #founder-dash-root .kpi-row.fd-kpi-3 { grid-template-columns: 1fr; }
}

/* Signups per day. Not a chart library on purpose: the shape of a spike is the whole
   message and it must render even if a chart script never loads. A day with nobody on
   it draws NOTHING; a minimum-height bar on every empty day drew a solid line across
   the page that read as a broken chart rather than as thirty quiet days. */
#founder-dash-root .fd-spark {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 96px;
  padding-top: 8px;
  overflow-x: auto;
}
#founder-dash-root .fd-sparkcol {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex: 1 0 26px;
  height: 100%;
}
#founder-dash-root .fd-sparkbar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}
#founder-dash-root .fd-sparkcol span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* Figures kept on screen after a failed refresh must not look current. */
#founder-dash-root .card.fd-stale-card { border-color: var(--bad); }
#founder-dash-root .card.fd-stale-card h4 { color: var(--bad); }
/* That title moved from h4 to h2 for reading order. Everything below restates the
   look it already had as an h4 in a .card, so nothing on screen changes. */
#founder-dash-root .card.fd-stale-card h2 {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--bad);
}

/* 2026-08-02: the panic buttons (Attacks section, "Stop an attack yourself"). */
.fd-panic-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; }
.fd-panic-on  { color:#ff6b6b; letter-spacing:.06em; }
.fd-panic-off { color:#7ee2a8; font-weight:600; letter-spacing:.06em; }
.fd-panic-btns { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.fd-panic-stop { background:#c62f3b; border-color:#c62f3b; color:#fff; font-weight:700; letter-spacing:.05em; }
.fd-panic-stop:hover { background:#e0404d; border-color:#e0404d; }
.fd-panic-open { background:#1e9e5a; border-color:#1e9e5a; color:#fff; font-weight:700; letter-spacing:.05em; }
.fd-panic-open:hover { background:#27bd6c; border-color:#27bd6c; }
.fd-panic-split { display:flex; gap:8px; flex-wrap:wrap; }
.fd-panic-hint { margin-top:10px; opacity:.75; font-size:12px; }
.fd-panic-log { margin:10px 0 0; opacity:.7; font-size:12px; padding-left:18px; }

/* ---- Heading levels only ----------------------------------------------------
   Some headings moved a level so a screen reader reads them in order with no
   gaps. These rules restate the size, weight, spacing and line height each one
   already had at its old level, so nothing on screen changes. */

/* Was h4 inside .fd-soft / .fd-ins: h4 is bold and inherits its line height,
   while h3 is 600 and 1.05. */
.fd-soft h3,
.fd-ins h3 {
  font-weight: bold;
  line-height: inherit;
}

/* Was a bare h4 with no rule of its own, so it used the browser defaults. */
.fd-section-title h3 {
  font-family: inherit;
  font-size: 1em;
  font-weight: bold;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin: 1.33em 0;
}