/* ============================================================
   ResellerClub — signup/login flow shell.
   Reseller dashboard chrome + just-in-time modal pattern.
   Reused by Flow A (signup) and Flow B (sign-in destination).
   Link AFTER resellerclub-ds/styles.css, site/site.css, site/auth.css.
   ============================================================ */

/* ---- flow stages: only the active one shows ---- */
.stage { display: none; }
.stage.on { display: block; }

/* ============================================================
   Dashboard shell
   ============================================================ */
.dash { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; background: var(--rc-bg-subtle); }

/* left rail */
.dash-rail { background: #fff; border-right: 1px solid var(--rc-line); padding: 18px 14px; display: flex; flex-direction: column; }
.dash-rail .logo { display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px 18px; }
.dash-rail .logo img { width: 28px; height: 28px; }
.dash-rail .logo .name { font-family: var(--rc-font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--rc-text); }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--rc-r-md);
  font-size: 14.5px; font-weight: 500; color: var(--rc-text-2); cursor: pointer; transition: all var(--rc-dur) var(--rc-ease); }
.rail-link i { width: 18px; height: 18px; color: var(--rc-text-3); }
.rail-link:hover { background: var(--rc-bg-subtle); color: var(--rc-text); }
.rail-link.active { background: var(--rc-accent-50); color: var(--rc-accent-700); }
.rail-link.active i { color: var(--rc-accent); }
.rail-spacer { flex: 1; }
.rail-foot { border-top: 1px solid var(--rc-line); padding-top: 12px; }

/* top bar */
.dash-top { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 30px;
  background: #fff; border-bottom: 1px solid var(--rc-line); position: sticky; top: 0; z-index: 20; }
.dash-top .page-title { font-family: var(--rc-font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--rc-text); }
.dash-top .spacer { flex: 1; }
.dash-top .topbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--rc-r-md);
  border: 1px solid var(--rc-line-strong); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--rc-text-2); cursor: pointer; }
.dash-top .topbtn i { width: 15px; height: 15px; }
.dash-top .topbtn:hover { background: var(--rc-bg-subtle); color: var(--rc-text); }
.dash-top .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--rc-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--rc-font-display);
  font-weight: 600; font-size: 14px; }

/* main column */
.dash-main { display: flex; flex-direction: column; min-width: 0; }
.dash-body { padding: 30px; max-width: 1080px; width: 100%; }

/* welcome panel */
.welcome { background: linear-gradient(180deg, #fff, var(--rc-accent-tint)); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-lg); padding: 26px 28px; }
.welcome .eyebrow { font-size: 11.5px; }
.welcome h2 { font-family: var(--rc-font-display); font-weight: 700; font-size: 26px; letter-spacing: -.02em;
  color: var(--rc-text); margin: 9px 0 0; line-height: 1.12; }
.welcome p { font-size: 15px; color: var(--rc-text-2); margin: 8px 0 0; max-width: 560px; }

/* finish-setting-up strip */
.setup { margin-top: 18px; background: #fff; border: 1px solid var(--rc-line); border-radius: var(--rc-r-lg); padding: 18px 20px; }
.setup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.setup-head h3 { font-family: var(--rc-font-display); font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; color: var(--rc-text); margin: 0; }
.setup-head .prog { font-family: var(--rc-font-mono); font-size: 11.5px; color: var(--rc-text-3); }
.setup-head .dismiss { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--rc-text-3);
  padding: 5px; border-radius: var(--rc-r-sm); display: inline-flex; }
.setup-head .dismiss:hover { color: var(--rc-text); background: var(--rc-bg-subtle); }
.setup-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.setup-item { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-md); background: #fff; cursor: pointer; text-align: left; transition: all var(--rc-dur) var(--rc-ease); }
.setup-item:hover { border-color: var(--rc-line-strong); box-shadow: var(--rc-shadow-sm); }
.setup-item .si-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--rc-r-sm); background: var(--rc-accent-50);
  color: var(--rc-accent); display: inline-flex; align-items: center; justify-content: center; }
.setup-item .si-ic i { width: 18px; height: 18px; }
.setup-item .si-t { font-size: 14px; font-weight: 600; color: var(--rc-text); display: block; }
.setup-item .si-d { font-size: 12.5px; color: var(--rc-text-3); margin-top: 2px; display: block; line-height: 1.4; }
.setup-item.done { background: var(--rc-bg-subtle); }
.setup-item.done .si-ic { background: var(--rc-green-soft); color: var(--rc-green); }
.setup-item.done .si-t { color: var(--rc-text-2); }
.setup-item .si-status { display: none; }
.setup-item.done .si-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  color: var(--rc-green); margin-top: 5px; }
.setup-item.done .si-status i { width: 13px; height: 13px; }

/* prototype clarification note */
.prototype-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 13px 16px;
  background: var(--rc-bg-subtle); border: 1px solid var(--rc-line); border-radius: var(--rc-r-md);
  font-size: 13px; line-height: 1.5; color: var(--rc-text-2); }
.prototype-note i { width: 16px; height: 16px; color: var(--rc-accent); flex-shrink: 0; margin-top: 1px; }
.prototype-note a { color: var(--rc-accent-700); font-weight: 600; }
.prototype-note a:hover { color: var(--rc-accent-600); }

/* quiet quick-actions grid below */
.dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.dash-card { background: #fff; border: 1px solid var(--rc-line); border-radius: var(--rc-r-lg); padding: 20px; }
.dash-card .dc-ic { width: 36px; height: 36px; border-radius: var(--rc-r-sm); background: var(--rc-accent-50);
  color: var(--rc-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.dash-card h4 { font-family: var(--rc-font-display); font-weight: 600; font-size: 15px; color: var(--rc-text); margin: 0; }
.dash-card p { font-size: 13px; color: var(--rc-text-3); margin: 5px 0 0; line-height: 1.45; }

/* ============================================================
   Just-in-time modal
   ============================================================ */
.modal-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(16,14,43,.42); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center; padding: 70px 20px 40px; overflow-y: auto; }
.modal-scrim.on { display: flex; }
.modal { position: relative; width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--rc-line);
  border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(16,14,43,.5); padding: 26px 26px 24px; }
@media (prefers-reduced-motion: no-preference) { .modal { animation: modal-in .24s var(--rc-ease); } }
@keyframes modal-in { from { transform: translateY(10px); } to { transform: none; } }
.modal.wide { max-width: 540px; }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: 0; cursor: pointer;
  color: var(--rc-text-3); padding: 6px; border-radius: var(--rc-r-sm); display: inline-flex; }
.modal-close:hover { color: var(--rc-text); background: var(--rc-bg-subtle); }
.modal .eyebrow { font-size: 11.5px; }
.modal h2 { font-family: var(--rc-font-display); font-weight: 700; font-size: 21px; letter-spacing: -.02em;
  color: var(--rc-text); margin: 10px 0 0; line-height: 1.16; }
.modal .reason { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--rc-text-2);
  background: var(--rc-accent-tint); border: 1px solid var(--rc-accent-100); border-radius: var(--rc-r-md);
  padding: 11px 13px; margin: 16px 0 18px; }
.modal .reason i { width: 15px; height: 15px; color: var(--rc-accent); flex-shrink: 0; margin-top: 1px; }

/* form bits reused inside modals */
.fld { margin-bottom: 14px; }
.fld label { display: block; font-size: 13px; font-weight: 600; color: var(--rc-text); margin-bottom: 6px; }
.fld .hint { font-weight: 500; color: var(--rc-text-3); font-size: 12px; margin-left: 6px; }
.fld input, .fld select { width: 100%; font-family: var(--rc-font-body); font-size: 15px; color: var(--rc-text);
  padding: 11px 14px; border: 1px solid var(--rc-line-strong); border-radius: var(--rc-r-md); background: #fff;
  transition: border-color var(--rc-dur) var(--rc-ease), box-shadow var(--rc-dur) var(--rc-ease); }
.fld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B93A2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; cursor: pointer; }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--rc-accent); box-shadow: 0 0 0 3px rgba(109,94,246,.16); }
.fld-2 { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }

/* amount chips */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.amt-chip { font-family: var(--rc-font-body); font-size: 14px; font-weight: 600; color: var(--rc-text-2);
  padding: 9px 15px; border: 1px solid var(--rc-line-strong); border-radius: var(--rc-r-pill); background: #fff; cursor: pointer; }
.amt-chip:hover { border-color: var(--rc-text-3); }
.amt-chip.on { background: var(--rc-accent); color: #fff; border-color: var(--rc-accent); }

.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.modal-actions .grow { flex: 1; }
.modal .secnote { font-size: 12px; color: var(--rc-text-3); margin: 14px 0 0; line-height: 1.5; }
.modal .secnote i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* confirmation state inside a modal */
.modal-confirm { text-align: center; padding: 8px 4px 4px; }
.modal-confirm .cc { width: 52px; height: 52px; border-radius: 50%; background: var(--rc-green-soft); color: var(--rc-green);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.modal-confirm .cc i { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .dash-rail { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; padding: 10px 14px; }
  .dash-rail .logo { padding: 6px 8px; }
  .dash-rail .rail-nav { flex-direction: row; }
  .rail-link .rl-label { display: none; }
  .rail-spacer, .rail-foot { display: none; }
  .setup-items, .dash-cards { grid-template-columns: 1fr; }
}