/* Site-wide system layer, loaded last on every page.
   One set of rules for the small things that repeat from page to page: labels and meta text, corner
   radii, buttons and switches, touch targets on phones, the footer and the mobile menu.
   Maps, diagrams, the simulator read-outs and the LED signs keep their own technical lettering. */

:root {
  --r-tag: 6px;          /* small tags and badges */
  --r-card: 14px;        /* panels, cards, viewers */
  --r-media: 16px;       /* images and scenes */
  --r-pill: 999px;       /* buttons, switches, filters */
  --tap: 44px;           /* smallest touch target on phones */
  --meta: 13.5px;        /* labels, dates, captions */
}

p, li, dd, figcaption { text-wrap: pretty; }

/* ---------- labels, meta lines and captions: the site's sans, sentence case, readable ---------- */
.label, .eyebrow, .caption, .footer-grid h4, .kit-list .where, .thesis__facts, .grids .facts, .roadmap__tag,
.hero__hint, .legend, .index__meta, .status__sign-label, .wire__meta, .news-item__meta, .news-item__type,
.pr-meta__line, .pr-kicker, .pr-back, .pr-body .pr-dateline, .pr-card h2, .pr-card dt, .pr-figure figcaption,
.company-origin figcaption, .company-origin__meta, .sim__noscript {
  font-family: var(--font-sans); font-size: var(--meta); font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.45;
}
.label { color: var(--fg-3); }
.footer-grid h4 { color: var(--fg-3); font-weight: 600; }
.pr-card dt, .pr-card h2 { color: var(--fg-3); }
.pr-body .pr-dateline { color: var(--fg); font-weight: 600; }
.news-item__meta time, .wire__meta time, .pr-meta__line time { font-weight: 600; }
.caption, .pr-figure figcaption, .company-origin figcaption { font-weight: 400; color: var(--fg-3); }
.ugo-viewer__bar .label, .ugo-viewer__info-top .label { font-size: 12.5px; }

/* the label above each page title: a stop on the line */
.page-head span.label, .sus-hero__head > div > .label {
  display: flex !important; align-items: center; gap: 9px; width: max-content; color: var(--fg-2); font-weight: 600;
}
.page-head span.label::before, .sus-hero__head > div > .label::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--accent); box-sizing: border-box;
}

/* buttons, switches and small controls in the same sans */
.seg button, .ugo-viewer__views button, .company-origin__tabs button, .news-filter button, .copy-btn, .footer-socials a {
  font-family: var(--font-sans); letter-spacing: 0; text-transform: none;
}
.seg button, .ugo-viewer__views button { font-size: 14px; font-weight: 600; }
.company-origin__tabs button { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.news-filter button { font-size: 14px; font-weight: 500; }
.copy-btn { font-size: 13px; font-weight: 600; }
.footer-socials a { font-size: 14px; color: var(--fg-2); }
.footer-location__tag { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; border-radius: var(--r-tag); }

/* two-tone headlines read as one sentence */
.statement__line span { color: inherit !important; }

/* ---------- corners: pills for controls, one radius for panels, one for pictures ---------- */
.btn, .header-cta, .copy-btn { border-radius: var(--r-pill); }
.btn { padding: 0 22px; }
.seg, .ugo-viewer__views { border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.seg button, .ugo-viewer__views button { border-radius: var(--r-pill); }
.ugo-viewer__views button[aria-pressed="true"] { box-shadow: none; background: var(--fg); color: var(--bg); }
.ugo-viewer__views button:not([aria-pressed="true"]):hover { background: transparent; color: var(--fg); }
.seg button { padding: 0 16px; }
.menu-btn { width: var(--tap); height: var(--tap); border-radius: 12px; }
.roadmap__button { border-radius: 50%; }
.hud-chip, .ugo-viewer__category, .tag--reject, .roadmap__tag--now, .roadmap__tag--soon { border-radius: var(--r-tag); }
.status__sign, .company-origin, .ugo-viewer, .grid-card, .press-update, .pr-card, .drawing, .led-sign, .dots-table table {
  border-radius: var(--r-card);
}
.grid-card .grid-diagram { border-radius: 10px; }
.ugo-viewer, .drawing, .company-origin { overflow: hidden; }
.news-card__media, .news-mini__media, .news-row__media, .pr-figure__frame { border-radius: var(--r-media); }
.news-mini__media, .news-row__media { border-radius: 10px; }

/* ---------- the header and the mobile menu ---------- */
.mobile-menu { overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--fg); }
.mobile-menu nav a[aria-current="page"] { color: var(--accent-2); }
.mobile-menu nav a[aria-current="page"]::after { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(217, 166, 208, .6); }
.mobile-menu .label { color: var(--fg-3); }
@media (max-height: 700px) { .mobile-menu nav a { font-size: clamp(1.6rem, 7.5vw, 2.2rem); padding-block: 6px; } }

/* ---------- footer ---------- */
@media (max-width: 599px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1 / -1; }
}

/* ---------- touch targets on phones and tablets ---------- */
.sus-ref, .saf-ref { position: relative; }
.sus-ref::after, .saf-ref::after { content: ""; position: absolute; inset: -12px -9px; }
@media (max-width: 959px), (pointer: coarse) {
  .footer-grid li + li { margin-top: 0; }
  .footer-grid li a, .footer-socials a, .footer-email { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-socials { margin-top: 8px; gap: 0 20px; }
  .link { min-height: var(--tap); }
  .copy-btn { height: 40px; padding: 0 16px; }
  .seg button, .net-ctrl button, .company-origin__tabs button { min-height: 40px; }
  .news-filter button { min-height: var(--tap); }
  .page-head .pr-back { min-height: var(--tap); margin-bottom: 14px; }
  .dots-table summary { padding-block: 12px; }
  .index__row, .wire__list a { min-height: var(--tap); }
}

/* ---------- small text never below 12px ---------- */
.hero__hud, .tag { font-size: 11px; }
.grid-card__head, .route-motif__top, .route-motif__bottom { font-size: 11px; }
@media (max-width: 599px) {
  .route-motif__caption, .grid-card__head { font-size: 12px; }
}

/* ---------- desktop header: a larger click area, same look ---------- */
.nav a { padding-block: 10px; }
.nav a[aria-current="page"] { box-shadow: none; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.email-row a { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-location__tag { font-size: 11px; }
.status__sign-header { font-family: var(--font-sans); font-size: var(--meta); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Ugo viewer: the sensor index and tags in the same sans; numbers stay tabular */
.ugo-viewer__index button { font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; letter-spacing: 0; }
.ugo-viewer__index button span { font-family: var(--font-sans); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ugo-viewer__category { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ugo-viewer__pin::after { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: var(--r-tag); }
.ugo-viewer figcaption { font-size: 12.5px; }
@media (max-width: 520px) { .ugo-viewer__index button { font-size: 14px; } .ugo-viewer__index button span { font-size: 12px; } }

/* rows of label + text (contact, operators, company, technology): the label reads as a small heading */
.rows .label { color: var(--fg); font-size: 15px; font-weight: 600; padding-top: 1px; }
.page-head .pr-back { display: flex; width: max-content; }

/* technology simulator on phones: fewer read-outs, so they do not cover the road users */
@media (max-width: 599px) {
  .sim__hud { gap: 6px; }
  .sim__hud .hud-chip--wide, .sim__hud #sim-speed { display: none; }
}