/* A9 Monitor product page. Loaded after style.css and only on monitor.html.
   The page takes the app's own ground and the three bus colours from its icon
   (A teal, B orange, C violet). It stays dark in every theme, like the app.
   One loud element: the A / B / C band. Everything else is quiet. */

body.mon {
  --bg: #11191D; --surface: #162127; --raised: #1D2A31; --line: #26353D;
  --fg: #ECF4F3; --muted: #9AABB0;
  --accent: #42C9BA; --accent-fg: #08201C;
  --copper: #F5B358;
  --bus-a: #42C9BA; --bus-b: #F5B358; --bus-c: #B79CFF;
  --grad-a: #FFFFFF; --grad-b: #A9BDBF;
  --glass: rgba(17, 25, 29, 0.74); --overlay: rgba(10, 16, 19, 0.86);
  color-scheme: dark;
  background: var(--bg); color: var(--fg);
}

/* ---- hero: the app, its promise, the real screen ---- */
.mp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s12); align-items: center; padding-block: 152px var(--s20); }
.mp-hero-copy { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
.mp-hero h1 { font-size: 60px; line-height: 1.04; letter-spacing: -0.03em; max-width: 13ch; padding-bottom: 4px; }
.mp-app { display: flex; align-items: center; gap: var(--s3); }
.mp-icon { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line); flex: none; }
.mp-app-text p { margin: 0; }
.mp-app-name { font-size: 18px; line-height: 24px; font-weight: 600; }
.mp-app-kind { font-size: 14px; line-height: 20px; color: var(--muted); }
.mp-plat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); color: var(--fg); }
.mp-plat li { position: relative; padding-left: var(--s6); }
.mp-plat li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 9999px; background: var(--copper); }
.mp-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.mp-actions .btn { padding-inline: var(--s4); }

.mp-phone { margin: 0; min-width: 0; justify-self: center; width: 100%; max-width: 320px; }
.mp-phone img { width: 100%; border-radius: 36px; border: 8px solid #05090B; box-shadow: 0 0 0 1px var(--line), 0 32px 80px rgba(0, 0, 0, 0.45); background: #0D1316; }
.mp-phone-hero { max-width: 340px; }

/* ---- the A / B / C band, drawn like the app's bus selector ---- */
.mp-abc { border-top: 1px solid var(--line); padding-block: var(--s20) var(--s24); }
.mp-abc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6) var(--s12); align-items: end; margin-bottom: var(--s12); }
.mp-abc-head h2 { font-size: 36px; line-height: 40px; letter-spacing: -0.02em; }
.mp-abc-head p { margin: 0; color: var(--muted); font-size: 18px; line-height: 28px; max-width: 520px; }
.mp-buses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.mp-bus { --c: var(--bus-a); position: relative; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s6) var(--s6); background: var(--surface); border-bottom: 3px solid var(--c); border-radius: 10px 10px 4px 4px; min-width: 0; }
.mp-bus-b { --c: var(--bus-b); }
.mp-bus-c { --c: var(--bus-c); }
.mp-bus-l { font-size: 168px; line-height: 0.8; font-weight: 600; letter-spacing: -0.04em; color: var(--c); }
/* segmented level strip: two lit groups, the rest dim, as in the app */
.mp-bus-m { height: 6px; border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px) 0 0 / 32px 100% no-repeat,
    repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px) 46% 0 / 32px 100% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent) 0 5px, transparent 5px 8px); }
.mp-bus-n { font: 500 14px/20px var(--mono); color: var(--muted); }

/* ---- feature rows: copy beside the real screen ---- */
#funciones { gap: var(--s20); }
.mp-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); align-items: center; }
.mp-feat-copy { display: flex; flex-direction: column; gap: var(--s4); max-width: 460px; min-width: 0; }
.mp-feat-copy h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
.mp-feat-copy p { margin: 0; color: var(--muted); font-size: 18px; line-height: 28px; }
.mp-feat .mp-phone { max-width: 300px; }
.mp-flip .mp-feat-copy { order: 2; }

.mp-h2 { font-size: 36px; line-height: 40px; letter-spacing: -0.02em; }
.mp-head { display: flex; flex-direction: column; gap: var(--s4); max-width: 680px; }

/* ---- details ---- */
.mp-details { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s10) var(--s12); }
.mp-details > div { padding-top: var(--s6); border-top: 1px solid var(--line); min-width: 0; }
.mp-details dt { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: var(--s2); }
.mp-details dd { margin: 0; color: var(--muted); }
.mp-details dd a { white-space: nowrap; }

/* ---- what you need: the signal path, one cable from Sender to each phone ---- */
.mp-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); position: relative; }
.mp-chain::before { content: ""; position: absolute; left: 7px; right: 12%; top: 7px; height: 2px; background: linear-gradient(90deg, var(--bus-a), var(--bus-b) 55%, var(--bus-c)); opacity: 0.7; }
.mp-chain li { position: relative; padding-top: var(--s10); font-size: 18px; line-height: 28px; min-width: 0; }
.mp-chain li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 4px; background: var(--bg); border: 2px solid var(--accent); }
.mp-chain li:last-child::before { background: var(--accent); }

/* ---- availability ---- */
.mp-avail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.mp-av { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); min-width: 0; }
.mp-av h3 { font-size: 24px; line-height: 32px; }
.mp-av p { margin: 0; color: var(--muted); }
.mp-av .pill { color: var(--copper); }
.mp-video { margin: 0; color: var(--muted); max-width: 680px; }

.mon .contact-mail { color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.mon .contact-mail:hover { color: var(--accent); }
.mon .foot .brand { color: var(--muted); }

@media (max-width: 900px) {
  .mp-hero { grid-template-columns: minmax(0, 1fr); padding-block: 120px var(--s16); gap: var(--s12); }
  .mp-hero h1 { font-size: 44px; line-height: 48px; }
  .mp-phone-hero { max-width: 300px; }
  .mp-abc { padding-block: var(--s16); }
  .mp-abc-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s8); }
  .mp-bus-l { font-size: 112px; }
  #funciones { gap: var(--s16); }
  .mp-feat { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .mp-flip .mp-feat-copy { order: 0; }
  .mp-feat .mp-phone { max-width: 260px; }
  .mp-details, .mp-avail { grid-template-columns: minmax(0, 1fr); }
  /* the path turns vertical */
  .mp-chain { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .mp-chain::before { left: 7px; right: auto; top: 8px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--bus-a), var(--bus-b) 55%, var(--bus-c)); }
  .mp-chain li { padding-top: 0; padding-left: var(--s10); }
  .mp-chain li::before { top: 6px; }
}
@media (max-width: 480px) {
  .mp-hero h1 { font-size: 36px; line-height: 40px; }
  .mp-abc-head h2, .mp-h2 { font-size: 30px; line-height: 36px; }
  .mp-feat-copy h3 { font-size: 24px; line-height: 32px; }
  .mp-buses { gap: var(--s1); }
  .mp-bus { padding: var(--s4) var(--s3); gap: var(--s3); }
  .mp-bus-l { font-size: 72px; }
  .mp-bus-n { font-size: 12px; line-height: 16px; }
  .mp-phone img { border-radius: 28px; border-width: 6px; }
}

/* Without JS there are no languages to offer: hide the empty selector. */
html:not(.js) .mon .lang { display: none; }