/* components.css: reusable pieces. Single-class selectors. */

/* Lockup parts (the inline SVG wordmark) */
.lk-mark { fill: none; stroke: var(--mark); stroke-linecap: round; }
.lk-dot { fill: var(--yellow); }
.lk-m { fill: none; stroke: var(--mark); stroke-linecap: round; stroke-linejoin: round; }
.lk-name { fill: var(--text); font-family: var(--font-display); font-weight: 700; }
.lk-sub { fill: var(--text-2); font-family: var(--font-body); font-weight: 600; }
.lk-pixel { fill: var(--mark); opacity: 0; }

/* The one-time M morph: pixels resolve into the smooth rounded M (BRAND.md 6, under 900 ms).
   The head script adds .m-morph to <html> on the first visit only, never under reduced motion. */
.m-morph .lk-m {
  stroke-dasharray: 110;
  animation: m-draw 500ms var(--ease-out) 380ms both;
}
.m-morph .lk-pixel { animation: m-pixels 700ms var(--ease-out) both; }

@keyframes m-draw {
  from { stroke-dashoffset: 110; }
  to { stroke-dashoffset: 0; }
}

@keyframes m-pixels {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .m-morph .lk-m, .m-morph .lk-pixel { animation: none; }
}

/* Mini triskele (endorsement, footer) */
.tk-arm { fill: none; stroke: var(--mark); stroke-linecap: round; }
.tk-dot { fill: var(--yellow); }

/* Buttons: pills. The label says what happens. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--s-5);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--ui-size);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.button:hover { background: var(--link-press); color: var(--on-accent); }
.button[aria-disabled="true"] { cursor: progress; opacity: 0.75; }

.button-quiet {
  background: transparent;
  border-color: var(--rule);
  color: var(--text);
}
.button-quiet:hover { background: var(--surface); border-color: var(--text-2); color: var(--text); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* A standalone text link with a 44 px target */
.text-link { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* Kicker: a short label above a heading, in the endorsement's voice (sentence case, never tracked caps) */
.kicker { margin-bottom: var(--s-3); color: var(--text-2); font-weight: 600; font-size: var(--ui-size); line-height: 1.4; }

/* Text roles */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-size);
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
}

.lead {
  font-size: var(--lead-size);
  line-height: var(--lead-lh);
  color: var(--text-2);
}

.small { font-size: var(--small-size); line-height: var(--small-lh); }
.muted { color: var(--text-2); }

/* Pills: status labels */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--text);
  font-weight: 600;
  font-size: var(--small-size);
  line-height: 1.3;
}

/* Chips: platforms */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  border: 1.5px solid currentColor;
  font-weight: 600;
  font-size: var(--small-size);
  line-height: 1;
}

.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; list-style: none; }

/* Prose (legal pages, long text) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h1 { margin-bottom: var(--s-7); }
.prose h2 { margin-top: var(--s-7); font-family: var(--font-body); font-weight: 800; font-size: var(--h3-size); }
.prose ul { padding-left: 1.2em; }

/* Endorsement lockup: app name, then "by McCallon Technologies" with a mini triskele (BRAND.md 2) */
.endorse {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8em;
}
.endorse-mark { width: 1.25em; height: 1.25em; flex: none; }

/* Media frames (BRAND.md 10): a plain browser window, a plain phone (no notch, camera or buttons), rounded video. */
.browser-frame {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--rule);
  border-top: 14px solid var(--navy);
  background: var(--canvas);
}
.browser-frame img, .browser-frame video { width: 100%; height: auto; }

.phone-frame {
  overflow: hidden;
  max-width: 360px;
  border: 10px solid var(--navy);
  border-radius: 44px;
  background: var(--canvas);
}
.phone-frame img, .phone-frame video { width: 100%; height: auto; border-radius: 34px; }

.video-frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--navy); }
.video-frame video { width: 100%; height: auto; }

[data-theme="dark"] .browser-frame { border-color: #26356F; }
[data-theme="dark"] .phone-frame { border-color: #26356F; }

/* Theme and width variants of the same media: only the visible one is ever requested (lazy images, lazy video). */
:root[data-theme="dark"] .only-light,
:root[data-theme="light"] .only-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .only-light { display: none; } }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .only-dark { display: none; } }
@media (max-width: 720px) { .only-wide { display: none; } }
@media (min-width: 721px) { .only-narrow { display: none; } }

/* Phone screenshots side by side (product pages) */
.phone-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: var(--s-7);
  padding: 0;
  list-style: none;
}
.phone-pair figcaption { margin-top: var(--s-4); font-weight: 600; }
.phone-note { margin-top: var(--s-6); color: var(--text-2); font-size: var(--small-size); }
@media (max-width: 720px) {
  .phone-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .phone-pair .phone-frame { border-width: 6px; border-radius: 28px; }
  .phone-pair .phone-frame img { border-radius: 22px; }
  .phone-pair figcaption { font-size: var(--small-size); }
}

/* Showcase clips: the site's own pill pause/play button in blue, caption below. */
.clip-frame { position: relative; }
.clip-video { background: var(--navy); }
.clip figcaption { margin-top: var(--s-3); color: var(--text-2); font-weight: 600; }
.video-toggle {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  font: 600 15px/1 var(--font-body);
  cursor: pointer;
}
.video-toggle:hover { background: var(--link-press); }
.video-toggle[hidden] { display: none; }
.clip-wide .video-toggle { right: auto; left: var(--s-3); }
.clip-phone .video-toggle { right: 50%; transform: translateX(50%); }