/*
  Site-level additions to the Synchrotech design system.

  Generated from the export's artboards.css, with two deliberate removals:
    - the components.css @import, because the layout links that file directly;
    - the canvas chrome (.ab-canvas/.ab-label/.ab-frame/.ab-sheet-*), which the
      handoff says only the artboard board needs.

  Everything else is verbatim: phone menu, logo background boxes, the .ab-viz
  schematic miniatures, page grids, and the screenshot frames.
*/

/*
  Synchrotech website: the two things the design system does not cover.
  1. The phone menu panel behind the header menu button (header component, phone widths only).
  2. Canvas chrome: artboard labels and frames. Prefix ab-, so it is obvious these are not
     design-system classes. No colour, type or spacing value here that a token does not already carry.
*/

/* ---------- Phone menu ---------- */
.ab-menu { display: none; }

.ab-menu > summary { list-style: none; }
.ab-menu > summary::-webkit-details-marker { display: none; }

.ab-menu__panel {
  position: absolute;
  top: calc(100% + 9px);
  right: calc(var(--pad) * -1);
  z-index: 30;
  width: 390px;
  max-width: 100vw;
  padding: var(--s-6) var(--pad) var(--s-7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  text-align: left;
}

.st-header--dark .ab-menu__panel {
  border-color: var(--line-dark);
  background: var(--black);
  color: var(--white);
}

.ab-menu__nav {
  display: grid;
  gap: 2px;
  margin-bottom: var(--s-5);
}

.ab-menu__nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: var(--weight-label);
  text-decoration: none;
}

.st-header--dark .ab-menu__nav a { border-color: var(--line-dark); }

.ab-menu__meta {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
  font-size: var(--fs-small);
}

.ab-menu__meta a { text-decoration: none; }

@media (max-width: 1080px) {
  .ab-menu {
    display: block;
    position: relative;
  }
}

/* ---------- Logo boxes ----------
   The supplied logo artwork, drawn as a background box rather than an <img>, so the one file
   is referenced once in CSS and shared by every header and footer. Aspect ratios are the
   files' own, so the artwork is never stretched. Never typeset the wordmark. */
.ab-logo {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ab-logo--wordmark-light {
  background-image: url("assets/logos/synchrotech-wordmark-light-surface.webp");
  aspect-ratio: 1200 / 189;
}

.ab-logo--wordmark-dark {
  background-image: url("assets/logos/synchrotech-wordmark-dark-surface.webp");
  aspect-ratio: 2149 / 294;
}

.ab-logo--lockup-black {
  background-image: url("assets/logos/synchrotech-lockup-on-black.webp");
  aspect-ratio: 1200 / 409;
}

.st-header__logo .ab-logo { width: var(--logo-header); }
.st-footer__lockup.ab-logo { width: var(--lockup-min); }
.st-footer__wordmark.ab-logo { display: none; width: var(--logo-min); }

@media (max-width: 1080px) {
  .st-header__logo .ab-logo { width: var(--logo-min); }
}

@media (max-width: 760px) {
  .st-footer__lockup.ab-logo { display: none; }
  .st-footer__wordmark.ab-logo { display: block; }
}

/* ---------- Schematic visuals ----------
   Flat, brand-coloured miniatures of the real interfaces, used where a screenshot would
   otherwise sit. They carry no client data and no client marks, and every one is labelled
   illustrative. Functional colour still means a system state: amber queued, green settled. */
.ab-viz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: var(--paper);
  overflow: hidden;
}

.ab-viz--ink { background: var(--ink); }

.ab-viz__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.ab-viz__card--amber { border-left: 4px solid var(--amber); }
.ab-viz__card--green { border-left: 4px solid var(--green); }
.ab-viz__card--purple { border-left: 4px solid var(--purple); }

.ab-viz__grow { flex: 1; min-width: 0; display: grid; gap: 5px; }

.ab-viz__tag {
  font-size: var(--fs-caption);
  font-weight: var(--weight-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ab-viz__val {
  font-size: 14px;
  font-weight: var(--weight-heading);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ab-viz__line {
  height: 7px;
  border-radius: 4px;
  background: var(--line);
}

.ab-viz__chip {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--fs-caption);
  font-weight: var(--weight-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ab-viz__chip--amber { background: var(--amber-tint); color: var(--amber-text); }
.ab-viz__chip--green { background: var(--green-tint); color: var(--green-text); }
.ab-viz__chip--purple { background: var(--purple-tint); color: var(--purple); }

.ab-viz__bubble {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

.ab-viz__bubble--them {
  align-self: flex-end;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
}

.ab-viz__bubble--us {
  align-self: flex-start;
  border-left: 4px solid var(--purple);
  background: var(--white);
  color: var(--ink);
}

.ab-viz__bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 54px;
}

.ab-viz__bars span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--purple);
}

.ab-viz__note {
  margin-top: 2px;
  font-size: var(--fs-caption);
  font-weight: var(--weight-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* ---------- Page grids the system does not carry a class for ----------
   Every track is minmax(0, 1fr) so a column can shrink below its content's min-content
   width, and every grid collapses on the system's own breakpoints (1000 px, 760 px).
   Never set grid-template-columns inline on a design-system class: an inline value beats
   the class's own breakpoint and the layout stops collapsing on phones. */
.ab-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-split-wide { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.ab-routes { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.ab-wide-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.ab-doc { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.ab-facts > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); }

@media (max-width: 1000px) {
  .ab-cols-3,
  .ab-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ab-routes,
  .ab-split-wide,
  .ab-doc { grid-template-columns: minmax(0, 1fr); }

  .ab-doc > nav { position: static; }
}

@media (max-width: 760px) {
  .ab-cols-2,
  .ab-cols-3,
  .ab-cols-4,
  .ab-wide-card { grid-template-columns: minmax(0, 1fr); }

  .ab-facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }

  .ab-diagram { overflow-x: auto; }
}

.ab-founder { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

@media (max-width: 760px) {
  .ab-founder { grid-template-columns: minmax(0, 1fr); }
  .ab-founder > .st-placeholder { border-right: 0; border-bottom: 1.5px solid var(--line); }
}

/* ---------- Product screenshots ----------
   Real screens from Sophia, our own product, so nothing here identifies a client.
   Framed and top-aligned: a console screen reads from its top edge. */
.ab-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  background: var(--paper);
}

.ab-shot-frame {
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.ab-shot-cap {
  margin-top: 8px;
  font-size: var(--fs-caption);
  font-weight: var(--weight-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}