@appsforgood/next-supabase-kit 0.1.1 → 0.1.4

package/dist/studio/wizard/assets/wizard.css

@@ -0,0 +1,525 @@
+:root {
+  color-scheme: light;
+  --ink: #1f2933;
+  --muted: #52606d;
+  --line: #d9e2ec;
+  --panel: #ffffff;
+  --bg: #f0f4f8;
+  --accent: #0f766e;
+  --accent-soft: #ccfbf1;
+  --accent-dark: #115e59;
+  --warn: #b45309;
+  --ok: #166534;
+  --header: #0b1f24;
+  --shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: var(--ink);
+  background: var(--bg);
+  line-height: 1.55;
+  min-height: 100vh;
+}
+
+.office-banner {
+  background: linear-gradient(90deg, #0f766e, #115e59);
+  border-bottom: 1px solid #0d9488;
+  padding: 0;
+  text-align: center;
+}
+
+.office-banner-link {
+  display: block;
+  padding: 14px 20px;
+  color: #fff;
+  text-decoration: none;
+}
+
+.office-banner-link:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.office-banner-title {
+  display: block;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.office-banner-sub {
+  display: block;
+  font-size: 13px;
+  opacity: 0.9;
+  margin-top: 2px;
+}
+
+.office-cta-card {
+  display: block;
+  margin: 0 0 16px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: rgba(153, 246, 228, 0.12);
+  border: 2px solid #99f6e4;
+  color: #f8fafc;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.office-cta-card:hover {
+  background: rgba(153, 246, 228, 0.22);
+}
+
+.office-cta-label {
+  display: block;
+  font-weight: 700;
+  font-size: 15px;
+  color: #99f6e4;
+}
+
+.office-cta-desc {
+  display: block;
+  font-size: 12px;
+  color: #cbd5e1;
+  margin: 4px 0 8px;
+}
+
+.office-cta-action {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #5eead4;
+}
+
+.office-footer-btn {
+  background: #115e59 !important;
+  color: #fff !important;
+  text-decoration: none;
+  border: 2px solid #99f6e4;
+}
+
+.office-footer-btn:hover {
+  background: #0f766e !important;
+}
+
+.office-promo {
+  margin: 0 0 20px;
+  padding: 16px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ecfdf5, #ccfbf1);
+  border: 2px solid #99f6e4;
+}
+
+.office-promo h3 {
+  margin: 0 0 6px;
+  font-size: 17px;
+  color: var(--accent-dark);
+}
+
+.office-promo p {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.office-promo .btn {
+  display: inline-block;
+  background: var(--accent);
+  color: #fff;
+  padding: 10px 16px;
+  border-radius: 10px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.office-promo .btn:hover {
+  background: var(--accent-dark);
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  min-height: calc(100vh - 72px);
+}
+
+@media (max-width: 860px) {
+  .shell { grid-template-columns: 1fr; }
+  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
+}
+
+.rail {
+  background: var(--header);
+  color: #e2e8f0;
+  padding: 24px 18px;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.rail h1 {
+  margin: 0 0 4px;
+  font-size: 20px;
+  color: #f8fafc;
+}
+
+.rail .project {
+  color: #99f6e4;
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 18px;
+  word-break: break-word;
+}
+
+.ring-wrap {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.ring {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), rgba(255,255,255,0.12) 0);
+  display: grid;
+  place-items: center;
+  position: relative;
+}
+
+.ring::after {
+  content: "";
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--header);
+  position: absolute;
+}
+
+.ring span {
+  position: relative;
+  z-index: 1;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.section-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.section-nav button {
+  width: 100%;
+  text-align: left;
+  border: 1px solid transparent;
+  background: transparent;
+  color: #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-nav button[aria-current="step"] {
+  background: rgba(15, 118, 110, 0.25);
+  border-color: rgba(94, 234, 212, 0.35);
+  color: #f0fdfa;
+}
+
+.section-nav button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.chip {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 7px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,0.15);
+}
+
+.chip.done { background: rgba(22, 101, 52, 0.35); color: #bbf7d0; }
+.chip.progress { background: rgba(180, 83, 9, 0.35); color: #fde68a; }
+.chip.optional { background: rgba(100, 116, 139, 0.35); color: #e2e8f0; }
+
+.main {
+  padding: clamp(20px, 4vw, 40px);
+  display: flex;
+  flex-direction: column;
+}
+
+.status {
+  display: none;
+  border-radius: 10px;
+  padding: 12px 14px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.status.ok { display: block; background: #ecfdf5; border: 1px solid #86efac; color: var(--ok); }
+.status.error { display: block; background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  box-shadow: var(--shadow);
+  padding: clamp(22px, 4vw, 36px);
+  flex: 1;
+  max-width: 720px;
+}
+
+.eyebrow {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 8px;
+}
+
+.card h2 {
+  margin: 0 0 10px;
+  font-size: clamp(24px, 4vw, 32px);
+  line-height: 1.2;
+}
+
+.why {
+  color: var(--muted);
+  margin: 0 0 22px;
+  font-size: 15px;
+}
+
+label {
+  display: block;
+  font-weight: 600;
+  margin: 16px 0 8px;
+}
+
+label span {
+  display: block;
+  font-weight: 400;
+  color: var(--muted);
+  font-size: 13px;
+  margin-top: 3px;
+}
+
+input, select, textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 12px 14px;
+  font: inherit;
+  color: var(--ink);
+  background: #fff;
+}
+
+input:focus, select:focus, textarea:focus {
+  outline: 2px solid var(--accent-soft);
+  border-color: var(--accent);
+}
+
+textarea { min-height: 120px; resize: vertical; }
+
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
+
+.hint {
+  background: #f0fdfa;
+  border: 1px solid #99f6e4;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-size: 14px;
+  color: var(--accent-dark);
+  margin: 14px 0;
+}
+
+.hint button {
+  margin-top: 8px;
+  border: 0;
+  border-radius: 8px;
+  padding: 8px 12px;
+  background: var(--accent-dark);
+  color: #fff;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.field-error {
+  color: #b91c1c;
+  font-size: 13px;
+  margin-top: 6px;
+  display: none;
+}
+
+.field-error.show { display: block; }
+
+.depth-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.depth-card {
+  border: 2px solid var(--line);
+  border-radius: 12px;
+  padding: 16px;
+  background: #fff;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+
+.depth-card.selected {
+  border-color: var(--accent);
+  background: #f0fdfa;
+}
+
+.depth-card strong { display: block; margin-bottom: 6px; }
+.depth-card p { margin: 0; font-size: 13px; color: var(--muted); }
+
+.stack-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 12px 0 0;
+}
+
+.pill {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: #edf2f7;
+  color: var(--muted);
+  border: 1px solid var(--line);
+}
+
+.review dl { margin: 0; display: grid; gap: 14px; }
+.review dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
+.review dd { margin: 4px 0 0; white-space: pre-wrap; }
+
+.preview {
+  background: #f8fafc;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 14px;
+  font-size: 13px;
+  white-space: pre-wrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 24px;
+  max-width: 720px;
+}
+
+.footer-actions {
+  display: flex;
+  gap: 10px;
+  margin-left: auto;
+}
+
+button.btn {
+  border: 0;
+  border-radius: 10px;
+  padding: 12px 18px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button.btn.primary { background: var(--accent); color: #fff; }
+button.btn.secondary { background: #edf2f7; color: var(--ink); }
+button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.complete-icon {
+  font-size: 48px;
+  color: var(--ok);
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.next-steps {
+  margin: 16px 0 0;
+  padding-left: 20px;
+  color: var(--muted);
+}
+
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  background: #edf2f7;
+  padding: 2px 5px;
+  border-radius: 4px;
+}
+
+.hidden { display: none !important; }
+
+.agent-roster {
+  list-style: none;
+  margin: 20px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.agent-card {
+  background: #f8fafc;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 12px 14px;
+}
+
+.agent-card strong {
+  display: block;
+  color: var(--accent-dark);
+  margin-bottom: 4px;
+}
+
+.agent-card p,
+.agent-role {
+  margin: 0;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.agent-brief textarea {
+  min-height: 140px;
+}
+
+button.link-btn {
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--accent-dark);
+  text-decoration: underline;
+  cursor: pointer;
+}