/* Myota Tabletop side-site: page-level styles for the landing page and the scoreboard.
   The rail, tables, buttons and status pills come from shared.css (one copy, also built into INJECT).
   This file adds only what INJECT never shows: the page body, the public landing page's header, hero
   and sections, and the footer. Tokens are the Cortex console's; see the header of shared.css. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body.mt-page {
  margin: 0; background: #fff; font-size: 14px; line-height: 1.55;
}
/* Plain links are teal; buttons are links too, so they are excluded or the label would turn teal. */
:where(.mt-page) a:not(:where(.mt-btn)) { color: var(--mt-teal); } /* :where keeps this at element weight */
/* session.js toggles [hidden]; keep it winning over display:flex on the CTA rows. */
[hidden] { display: none !important; }
.mt-page h2, .mt-page h3 { font-family: 'Raleway', Arial, sans-serif; font-weight: 700; color: var(--mt-navy); }
.mt-page :focus-visible { outline: 2px solid var(--mt-teal); outline-offset: 2px; }
.mt-skip { position: absolute; left: -9999px; }
.mt-skip:focus { left: 12px; top: 12px; background: #fff; padding: 6px 10px; z-index: 50; }

/* ---- Landing: dark header bar, navy hero with the sample result, white sections ---- */
.lp-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 48px; background: var(--mt-rail-top);
}
.lp-top img { height: 28px; display: block; }
.lp-top nav { display: flex; gap: 24px; align-items: center; }
.lp-top nav a { color: var(--mt-rail-text); text-decoration: none; font-size: 14px; }
.lp-top nav a:hover { color: #fff; }

.lp-hero {
  background: linear-gradient(180deg, var(--mt-rail-top), var(--mt-rail-bottom)); color: #fff;
  padding: 72px 48px 80px;
}
.lp-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; max-width: 1200px; }
.lp-hero h1 {
  font-family: 'Raleway', Arial, sans-serif; font-weight: 700; color: #fff; font-size: 40px;
  line-height: 1.18; margin: 0 0 18px; max-width: 760px;
}
.lp-hero p { color: var(--mt-rail-text); font-size: 18px; max-width: 620px; margin: 0; }
.lp-ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.lp-hero .mt-btn.mt-ghost { color: #fff; border-color: #fff; }
.lp-hero .mt-btn.mt-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* The sample result card: the product's thesis (same incident, two outcomes) as the hero's object. */
.lp-result { background: #fff; color: var(--mt-navy); border-radius: 16px; padding: 24px 26px; }
.lp-result .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-muted); }
.lp-result h3 { margin: 4px 0 14px; font-size: 20px; }
.lp-rrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--mt-rule); }
.lp-rrow b { font-family: 'Raleway', Arial, sans-serif; font-size: 26px; white-space: nowrap; }
.lp-rrow.myota b { color: var(--mt-ok); }
.lp-result .fine { color: var(--mt-muted); font-size: 12px; margin-top: 8px; }

.lp-section { padding: 48px; border-bottom: 1px solid var(--mt-rule); }
.lp-section > * { max-width: 1200px; }
.lp-section h2 { font-size: 26px; margin: 0 0 20px; }
.lp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-card { border: 1px solid var(--mt-rule); border-radius: 12px; padding: 20px; }
.lp-card h3 { margin: 6px 0; font-size: 18px; }
.lp-card p { color: var(--mt-muted); margin: 0; }
.lp-num { font-family: 'Raleway', Arial, sans-serif; font-weight: 700; font-size: 28px; color: var(--mt-teal); }
.lp-soon { color: var(--mt-faint); font-style: italic; }
.lp-rules { margin: 0; padding-left: 20px; max-width: 760px; }
.lp-rules li { margin: 6px 0; }

.mt-foot { padding: 20px 48px; color: var(--mt-muted); font-size: 13px; }
.mt-content .mt-foot { padding: 32px 0 0; }

/* ---- Scoreboard extras ---- */
.sb-updated { color: var(--mt-muted); font-size: 12px; margin-top: 14px; }
.sb-rules { color: var(--mt-muted); font-size: 13px; max-width: 760px; margin-top: 28px; }
.sb-rules b { color: var(--mt-navy); }

@media (max-width: 900px) {
  .lp-grid3 { grid-template-columns: 1fr; }
  .lp-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lp-top { padding: 14px 16px; }
  .lp-top nav { gap: 14px; }
  .lp-top nav .lp-ext { display: none; }
  .lp-hero, .lp-section { padding: 40px 16px; }
  .lp-hero h1 { font-size: 28px; }
  .lp-hero p { font-size: 16px; }
  .mt-foot { padding: 20px 16px; }
}

/* The rank line under the player name in the rail, on its own line above Log out. (A class rule, not an
   inline style: the side-site CSP allows stylesheets from this site only.) */
.mt-who [data-who-rank] { display: block; }

/* ---- Results screen (results.html). From the approved mockup (mockups/console/console.css, round 2):
   the story's outcome in two cards (the with-Myota card gets the green border), the player's own
   numbers underneath, the teal "Talk to us" band, and the share preview. ---- */
.rs-head { margin-bottom: 28px; }
.rs-head .mt-h1 { font-size: 30px; max-width: 860px; }
.rs-eyebrow { color: var(--mt-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.rs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; max-width: 1100px; }
.rs-card { border: 1px solid var(--mt-rule); border-radius: 12px; padding: 20px 22px; }
.rs-card h3 { margin: 2px 0 12px; font-size: 18px; }
.rs-card.rs-myota { border: 2px solid var(--mt-ok); }
.rs-label { color: var(--mt-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.rs-big { font-family: 'Raleway', Arial, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; color: var(--mt-navy); }
.rs-myota .rs-big { color: var(--mt-ok); }
.rs-detail { color: var(--mt-muted); margin-top: 4px; }
.rs-stats { display: flex; gap: 24px; flex-wrap: wrap; color: var(--mt-muted); font-size: 13px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mt-rule); }
.rs-stats b { color: var(--mt-navy); display: block; font-size: 16px; }
.rs-note { color: var(--mt-muted); margin: 0 0 24px; max-width: 900px; }
.rs-next { background: var(--mt-teal-tint); border-radius: 16px; padding: 24px 26px; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; max-width: 1100px; }
.rs-next h3 { margin: 0 0 4px; font-size: 18px; }
.rs-next p { margin: 0; }
.rs-h2 { font-size: 20px; margin: 0 0 14px; }
.rs-share { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; max-width: 1100px; }
.rs-share-img { aspect-ratio: 1.91 / 1; border-radius: 12px; background: linear-gradient(135deg, var(--mt-rail-top), var(--mt-rail-bottom));
  color: #fff; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.rs-share-img img { height: 22px; align-self: flex-start; }
.rs-s1 { font-family: 'Raleway', Arial, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; }
.rs-s1 em { color: #7fd1a0; font-style: normal; }
.rs-s2 { font-size: 12px; color: var(--mt-rail-text); }
.rs-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.rs-pick { padding-left: 20px; font-size: 16px; }
.rs-pick li { margin: 8px 0; }
@media (max-width: 900px) {
  .rs-duo, .rs-share { grid-template-columns: 1fr; }
  .rs-next { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .rs-head .mt-h1 { font-size: 24px; }
  .rs-big { font-size: 32px; }
}
.rs-stats:empty { display: none; } /* logged out: no player numbers, no divider line */

/* ---- Help page (help.html): one readable column, console section heads ---- */
.hp section { max-width: 760px; margin-bottom: 26px; }
.hp h2 { font-size: 20px; margin: 0 0 6px; }
.hp p { margin: 0; }
.hp-channels { display: grid; grid-template-columns: 110px 1fr; gap: 10px 18px; margin: 12px 0 0;
  padding: 14px 18px; background: var(--mt-alt); border-radius: 12px; }
.hp-channels dt { font-weight: 600; }
.hp-channels dd { margin: 0; color: var(--mt-navy); }
@media (max-width: 700px) { .hp-channels { grid-template-columns: 1fr; gap: 2px; } .hp-channels dd { margin-bottom: 10px; } }
.hp .mt-sub { margin-bottom: 28px; } /* .hp p resets margins; keep the gap under the intro */

/* ---- Sign-up page (signup.html): the form on the left, "what you get" on the right ---- */
.su { padding: 48px; }
.su-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 360px); gap: 56px; align-items: start; max-width: 1000px; }
.su-form { display: grid; gap: 16px; }
.su-form label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: var(--mt-navy); }
.su-form input:not([type="checkbox"]) {
  font: inherit; font-weight: 400; font-size: 15px; color: var(--mt-navy);
  padding: 10px 12px; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; width: 100%;
}
.su-form input:focus-visible { outline: 2px solid var(--mt-teal); outline-offset: 1px; border-color: var(--mt-teal); }
.su-form input[name="code"] { letter-spacing: .08em; text-transform: uppercase; font-family: 'Open Sans', monospace; }
.su-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.su-hint { font-weight: 400; font-size: 12px; color: var(--mt-muted); }
.su-form label.su-check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: -6px; }
.su-form .mt-btn { justify-self: start; }
.su-form .mt-btn:disabled { opacity: .6; cursor: wait; }
.su-error { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fde7e7; color: var(--mt-err); }
.su-fine { margin: 0; font-size: 12px; color: var(--mt-muted); }
.su-note { font-size: 15px; }
/* The side card echoes the landing page's sample-result card, on white with a hairline. */
.su-side { border: 1px solid var(--mt-rule); border-radius: 16px; padding: 22px 24px; margin-top: 8px; }
.su-side .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-muted); }
.su-side h3 { margin: 4px 0 10px; font-size: 18px; }
.su-side ul { margin: 0; padding-left: 18px; color: var(--mt-navy); }
.su-side li { margin: 6px 0; }
@media (max-width: 900px) {
  .su { padding: 28px 16px; }
  .su-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) { .su-pair { grid-template-columns: 1fr; } }
/* Landing: the "No code?" line under the hero buttons. */
.lp-hero p.lp-nocode { font-size: 14px; margin-top: 14px; }
.lp-hero p.lp-nocode a { color: #fff; }