/* Shared pieces for the Connections, Connect and Why mial screens: the one
   button system from DESIGN.md, the 52x32 switch, the inline wordmark, the
   code field, the toast and the state cards. Prefixed v1c- so they never
   collide with the shell's classes. Colors come only from tokens.css. */

.v1c-root, .v1c-root * { box-sizing: border-box; }
.v1c-root {
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* Base rules sit in :where() so they weigh nothing: every class below
   (buttons, tiles, links) wins over them without extra specificity. */
:where(.v1c-root) :where(button, input) { font: inherit; margin: 0; }
:where(.v1c-root) :where(button) { cursor: pointer; -webkit-appearance: none; appearance: none; }
:where(.v1c-root) :where(a) { color: var(--ink); }
:where(.v1c-root) :where(a:hover) { color: var(--gold-text); }
.v1c-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.v1c-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* "mial" in running copy: Nunito 600 plus the gold dot (margin-left 0.12em). */
.v1c-wm {
  font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; color: var(--ink);
}
.v1c-wm-dot {
  display: inline-block; width: 0.22em; height: 0.22em; background: var(--gold);
  border-radius: 50%; margin-left: 0.12em; vertical-align: middle;
}

/* Buttons: one system. Every button is inline-flex, centered, nowrap,
   line-height 1. */
.v1c-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 18px; border-radius: 999px; border: 0;
  font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none;
}
.v1c-btn--primary { background: var(--ink); color: var(--on-ink); }
.v1c-root a.v1c-btn--primary, .v1c-root a.v1c-btn--primary:hover { color: var(--on-ink); }
.v1c-btn--secondary { background: var(--card); color: var(--ink); border: 1px solid var(--btn-border); }
.v1c-btn--accent { background: var(--gold); color: var(--on-gold); }
.v1c-root a.v1c-btn--accent, .v1c-root a.v1c-btn--accent:hover { color: var(--on-gold); }
.v1c-btn--soft { background: var(--gold-tint); color: var(--gold-text-2); }
.v1c-btn--small { height: 34px; padding: 0 13px; font-size: 13.5px; }
.v1c-btn[disabled], .v1c-btn[aria-disabled="true"] { cursor: default; opacity: .6; }

/* A small control sits inside a 44px row: the hit area grows to 44px
   without changing what is drawn. */
.v1c-hit::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}

/* Switch: 52x32. */
.v1c-switch {
  position: relative; width: 52px; height: 32px; flex-shrink: 0;
  border-radius: 16px; border: 0; padding: 0; background: var(--switch-off);
  transition: background-color .25s ease;
}
.v1c-switch::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.v1c-switch[aria-checked="true"] { background: var(--switch-on); }
.v1c-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--knob); box-shadow: var(--shadow-knob);
  transform: translateX(0); transition: transform .25s ease;
}
.v1c-switch[aria-checked="true"] .v1c-switch-knob { transform: translateX(20px); }
.v1c-switch[aria-busy="true"] { cursor: progress; }

.v1c-label {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--secondary-2);
}

/* A copyable value is always readable in full: at the design's 40px it
   fits on one line; a longer one wraps (anywhere, it has no spaces) and the
   box grows. Copy always copies the whole value. */
.v1c-code {
  flex: 1; min-width: 0; min-height: 40px; padding: 9px 12px; border-radius: 10px;
  background: var(--field); border: 1px solid var(--field-border);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; line-height: 20px; color: var(--ink);
  display: flex; align-items: center; white-space: normal; overflow-wrap: anywhere; word-break: break-all;
  user-select: all; -webkit-user-select: all;
}

/* The status dot is still: nothing runs forever (Delivery Lead,
   2026-11-05: animate only on state changes, 0.25 to 0.45s). */
.v1c-pulse { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--gold); }
@keyframes v1c-rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Toast: the one in Main.dc.html (ink, 50px, fully round). */
.v1c-toast {
  position: fixed; left: 20px; right: 20px; bottom: 24px; z-index: 60;
  max-width: 520px; margin: 0 auto; min-height: 50px; border-radius: 25px;
  background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-toast);
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
  font-size: 14.5px; font-weight: 500; animation: v1c-rise .28s ease-out both;
}
.v1c-toast[hidden] { display: none; }
.v1c-toast-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--gold); }
.v1c-toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* State cards: loading, empty, offline, error. */
.v1c-state {
  border-radius: 22px; background: var(--card); border: 1px solid var(--card-border);
  padding: 20px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.v1c-state-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body-2); }
.v1c-skel { display: block; height: 14px; border-radius: 7px; background: var(--fill); }

/* Source mark tones */
.v1c-tone-ai { background: var(--mark-ai-bg); color: var(--mark-ai-fg); }
.v1c-tone-tg { background: var(--mark-tg-bg); color: var(--mark-tg-fg); }
.v1c-tone-mail { background: var(--gold-tint); color: var(--gold-text); }
.v1c-tone-you { background: var(--mark-you-bg); color: var(--mark-you-fg); }
.v1c-tone-slack { background: var(--mark-slack-bg); color: var(--mark-slack-fg); }
.v1c-tone-discord { background: var(--mark-discord-bg); color: var(--mark-discord-fg); }
.v1c-tone-whatsapp { background: var(--mark-whatsapp-bg); color: var(--mark-whatsapp-fg); }
.v1c-tone-zapier { background: var(--mark-zapier-bg); color: var(--mark-zapier-fg); }
.v1c-tone-make { background: var(--mark-make-bg); color: var(--mark-make-fg); }
.v1c-tone-n8n { background: var(--mark-n8n-bg); color: var(--mark-n8n-fg); }

/* Confirm dialog */
.v1c-confirm { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; }
.v1c-confirm-scrim { position: absolute; inset: 0; background: var(--scrim); }
.v1c-confirm-box {
  position: relative; width: 100%; max-width: 360px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow-sheet);
  padding: 20px; display: flex; flex-direction: column; gap: 18px; animation: v1c-rise .25s ease-out both;
}
.v1c-confirm-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.v1c-confirm-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .v1c-root *, .v1c-root *::before, .v1c-root *::after, .v1c-toast {
    animation: none !important; transition: none !important;
  }
}