/* BlueComm site styles.
 *
 * No @import, no CDN, no webfont URL: the build must produce pages that make
 * zero third-party requests (tests/test_build.py enforces it). That is not
 * only about speed -- the privacy policy tells Apple there are no third-party
 * trackers, and a font CDN request is a third-party request.
 *
 * Type is set in system stacks for now. A licensed display face is pending,
 * together with the outlined wordmark (see log/handover.md).
 *
 * Colour is defined once as tokens and never written literally in a rule, so
 * the dark palette is a token swap rather than a second stylesheet. Inline
 * SVG reads the same tokens, which is why the icons are inlined rather than
 * loaded as <img> -- an external SVG cannot follow the page into dark mode.
 */

/* ── tokens: light ── */
:root {
  --deep: #17458f;
  --bright: #1c7fd6;
  --sky: #4cc2f1;
  --amber: #ffc00a;

  --ink: #0d1f33;
  --ink-2: #42596f;
  --muted: #7a8fa6;
  --line: #d7e2ee;
  --line-strong: #b9cbdf;
  --bg: #ffffff;
  --bg-alt: #f2f6fb;
  --bg-hero: #f6fafe;
  --card: #ffffff;

  --brand-text: #17458f;
  --btn-bg: #17458f;
  --btn-bg-hover: #1c7fd6;
  --btn-fg: #ffffff;

  --status-dev-fg: #6b4e05;
  --status-dev-bg: #fdf3d8;
  --status-dev-line: #e8ce84;
  --status-test-fg: #14507e;
  --status-test-bg: #e4f1fb;
  --status-test-line: #9ccbec;
  --status-avail-fg: #14563a;
  --status-avail-bg: #e2f4ea;
  --status-avail-line: #93cdae;

  --wrap: 1080px;
  --step: clamp(1.75rem, 4.5vw, 4rem);
}

/* ── tokens: dark ──
 * Only the tokens change. Nothing below this block knows which theme it is in.
 * The blues lighten and the deep navy becomes the ground it was named after. */
@media (prefers-color-scheme: dark) {
  :root {
    --deep: #4c7fd8;
    --bright: #3d9bee;
    --sky: #5fcdf6;
    --amber: #ffc61f;

    --ink: #e6eff8;
    --ink-2: #a6bcd1;
    --muted: #6e869e;
    --line: #1f374f;
    --line-strong: #2c4a67;
    --bg: #091320;
    --bg-alt: #0f1e2e;
    --bg-hero: #0d1c2c;
    --card: #0f1e2e;

    --brand-text: #7fd0fa;
    --btn-bg: #2f7fd0;
    --btn-bg-hover: #4c9ce6;
    --btn-fg: #ffffff;

    --status-dev-fg: #f0d492;
    --status-dev-bg: #2a2007;
    --status-dev-line: #5b4712;
    --status-test-fg: #a9d4f5;
    --status-test-bg: #10283f;
    --status-test-line: #2c5c8a;
    --status-avail-fg: #9bd9ba;
    --status-avail-bg: #0d2a1c;
    --status-avail-line: #24583d;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    400 17px/1.75 -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "PingFang TC",
    "Hiragino Sans",
    "Noto Sans TC",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  line-height: 1.22;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.005em;
}
h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.45rem, 2.9vw, 2rem);
}
h3 {
  font-size: 1.1rem;
}
p {
  margin: 0;
}

a {
  color: var(--bright);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
/* Narrow measure without losing the site's left edge. Shrinking .wrap itself
   would re-centre it, indenting body copy relative to the header and footer --
   which reads as a mistake rather than a decision. */
.wrap.narrow > *,
.narrow-p {
  max-width: 68ch;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  background: var(--bg);
  padding: 10px 14px;
  z-index: 10;
}

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

/* ── header ── */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.head-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
}
/* The outlined wordmark (templates/_logo.html, generated by
 * tools/make_wordmark.py). Inline SVG coloured by tokens, so it switches with
 * the theme. Height 32px puts the letters at about the old 1.22rem text. */
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
}
.site-nav {
  display: flex;
  flex-wrap: wrap; /* the English nav is wider than a 390px phone */
  gap: 6px 18px;
  font-size: 0.95rem;
}
.site-nav a,
.lang-nav a {
  color: var(--ink-2);
  text-decoration: none;
}
.site-nav a:hover,
.lang-nav a:hover {
  color: var(--bright);
}

/* Language menu: a globe and the current language, the rest drop down.
 * A <details>, so it works without script; it closes when a language is
 * picked because that navigates away. */
.lang-menu {
  position: relative;
  font-size: 0.85rem;
}
.lang-menu summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none; /* hide the disclosure triangle (Firefox) */
  user-select: none;
}
.lang-menu summary::-webkit-details-marker {
  display: none; /* and in Safari */
}
.lang-menu summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 2px 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.lang-menu[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.lang-menu summary:hover,
.lang-menu[open] summary {
  color: var(--bright);
  border-color: var(--line-strong);
}
.globe {
  width: 18px;
  height: 18px;
  display: block;
}
.lang-nav {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: 6px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(13 31 51 / 0.12);
}
.lang-nav a {
  padding: 8px 16px;
}
.lang-nav a:hover {
  background: var(--bg-alt);
}
.lang-nav a[aria-current] {
  color: var(--brand-text);
  font-weight: 600;
}
/* On a phone the page links wrap under the logo; keep the language menu on
 * the logo's row, at the right edge, so its list never opens off-screen. */
@media (max-width: 800px) {
  .lang-menu {
    order: 1;
  }
  .site-nav {
    order: 2;
    width: 100%;
  }
}

/* ── hero ── */
.hero {
  padding: calc(var(--step) * 1.35) 0;
  background: linear-gradient(180deg, var(--bg-hero), var(--bg));
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
/* The headline is set as two deliberate lines (see hero.headline_1/2), so it
   needs no width cap. `ch` in particular must not be used to measure CJK: it
   is derived from the "0" glyph, so 18ch is roughly nine Han characters and
   the break landed mid-phrase. */
.hero h1 span {
  display: block;
}
.hero-glyph {
  width: clamp(180px, 22vw, 260px);
  height: auto;
  display: block;
}
@media (max-width: 800px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  /* The glyph is atmosphere, not information: at narrow widths it costs more
     vertical space than it earns, so it goes rather than shrinking. */
  .hero-glyph {
    display: none;
  }
}

.lede {
  margin-top: 18px;
  max-width: 60ch;
  font-size: 1.16rem;
  color: var(--ink-2);
}
.body-lg {
  margin-top: 14px;
  color: var(--ink-2);
}

.band {
  padding: var(--step) 0;
}
.band-alt {
  background: var(--bg-alt);
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.btn {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  transition: background-color 0.15s ease;
}
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.btn-primary:hover {
  background: var(--btn-bg-hover);
}
.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--brand-text);
}
.btn-ghost:hover {
  border-color: var(--bright);
}

.grid-3,
.grid-2 {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card p {
  color: var(--ink-2);
  font-size: 0.97rem;
}

.icon {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--bright);
  margin-bottom: 6px;
}

/* Status is encoded in shape and colour, not colour alone. */
.status {
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 5px 11px;
  border: 1px solid;
}
.status-development {
  color: var(--status-dev-fg);
  background: var(--status-dev-bg);
  border-color: var(--status-dev-line);
}
.status-testing {
  color: var(--status-test-fg);
  background: var(--status-test-bg);
  border-color: var(--status-test-line);
}
.status-available {
  color: var(--status-avail-fg);
  background: var(--status-avail-bg);
  border-color: var(--status-avail-line);
}

/* ── how it works ── */
.flow {
  display: block;
  width: 100%;
  height: auto;
  /* No max-width: it must track the .steps grid exactly, or the glyphs stop
     sitting above the steps they illustrate. */
  margin: 26px 0 0;
  color: var(--ink-2);
}
/* Below the width where .steps is three across, the diagram no longer sits
   above the steps it illustrates and is too small to read anyway. It is an
   explanation, not decoration -- so it goes rather than shrinking. */
@media (max-width: 800px) {
  .flow {
    display: none;
  }
}

.steps {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.steps li {
  counter-increment: step;
  padding-left: 44px;
  position: relative;
  color: var(--ink-2);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.ticks {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.ticks li {
  padding-left: 26px;
  position: relative;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
}

/* ── detail pages ── */
.crumb {
  margin-bottom: 18px;
  font-size: 0.9rem;
}
.crumb a {
  color: var(--muted);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--bright);
}

.sub-head:first-child {
  margin-top: 0;
}
.sub-head {
  margin-top: 34px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--brand-text);
}

.card h2 {
  font-size: 1.12rem;
}
.card h2 a {
  text-decoration: none;
  color: var(--brand-text);
}
.card h2 a:hover {
  color: var(--bright);
}

/* Required-products list on a scenario page: name plus its live status. */
.requires {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.requires li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.requires a {
  font-weight: 600;
  text-decoration: none;
}
.requires a:hover {
  text-decoration: underline;
}

/* Video links on a scenario page: a play triangle, then the title. */
.videos {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.videos li {
  padding-left: 26px;
  position: relative;
}
.videos li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  border-left: 10px solid var(--amber);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.videos a {
  font-weight: 600;
  text-decoration: none;
}
.videos a:hover {
  text-decoration: underline;
}
.video-note {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

.contact-email {
  margin-top: 24px;
  font-size: 1.25rem;
  font-weight: 600;
}

.product .status {
  margin-bottom: 2px;
}

.product-note {
  margin-top: 28px;
  color: var(--muted);
}

/* ── BlueAIoT band (home) ──
 * Full-bleed picture; on a narrow screen it keeps a usable height and crops
 * from the centre instead of shrinking to a strip. */
.aiot {
  padding-bottom: var(--step);
  border-bottom: 1px solid var(--line);
}
.aiot-art {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  object-fit: cover;
  object-position: center;
}
.aiot-kicker {
  margin-top: var(--step);
  color: var(--bright);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.aiot h2 {
  margin-top: 4px;
}
.aiot-points h3 {
  color: var(--brand-text);
  margin-bottom: 6px;
}
.aiot-points p {
  color: var(--ink-2);
}
.aiot-foot {
  margin-top: 22px;
  color: var(--muted);
}

/* ── support / privacy (App Review pages) ──
 * The markup is BlueComm_Core's vetted HTML, inserted verbatim, so it is styled
 * here by its own element and class names rather than edited to fit. */
.legal h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin-bottom: 6px;
}
.legal .updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 28px;
}
.legal h2 {
  font-size: 1.2rem;
  margin: 34px 0 10px;
  color: var(--brand-text);
}
.legal h3 {
  font-size: 1.02rem;
  margin: 22px 0 6px;
}
.legal p,
.legal li {
  color: var(--ink-2);
  margin-bottom: 8px;
}
.legal ul {
  margin: 0 0 12px 1.3em;
  padding: 0;
}
.legal code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.legal .contact {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0 8px;
}
.legal .contact p {
  margin-bottom: 4px;
}
.legal .en {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 20px;
  font-size: 0.94rem;
}
.legal .en p {
  color: var(--muted);
}

.company-title {
  margin-top: 40px;
  font-size: 1.15rem;
}
.company-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.company-facts dt {
  color: var(--muted);
}
.company-facts dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ── footer ── */
.site-foot {
  border-top: 1px solid var(--line);
  padding: var(--step) 0;
  background: var(--bg-alt);
}
.foot-inner {
  display: grid;
  gap: 12px;
}
.foot-tagline {
  color: var(--ink-2);
  max-width: 60ch;
}
.foot-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.94rem;
}
.foot-links a {
  color: var(--ink-2);
  text-decoration: none;
}
.foot-links a:hover {
  color: var(--bright);
  text-decoration: underline;
}
.foot-rights {
  color: var(--muted);
  font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}