/* Myota Tabletop: styles shared by the Myota side-site (landing, scoreboard) and INJECT's patched
   exercise list. ONE copy of the left rail, tables, status pills and buttons, used in two places:

   - The side-site links it as /myota/shared.css (site/myota/shared.css is a symlink to this file;
     the deploy copies the file itself with rsync -L).
   - apply-branding.sh copies it into the INJECT frontend as core/src/styles/_myota-shared.scss and
     imports it from global.scss (plain CSS is valid SCSS), so the rail around INJECT's exercise list is
     drawn by exactly the same rules as the rail on the Myota pages.

   Because this file is loaded globally inside INJECT, every selector is prefixed `mt-` (Myota Tabletop)
   and there are NO bare element selectors (no body, h1, a, table...). Anything unprefixed here would
   restyle INJECT's own screens.

   Tokens are the Cortex console's (myota/topics/use-case-demo/DESIGN_SYSTEM.md), the same values as
   branding/_myota-brand-post.scss and the approved mockups in mockups/console/console.css: teal for
   every action, burnt orange only for the logo and the current rail item, navy text, Raleway headings,
   Open Sans body. The CSS variables are scoped to .mt-app / .mt-page so they cannot leak into INJECT. */

/* .mt-vars: the tokens alone, for small pieces placed inside INJECT's own screens (the Pause control). */
.mt-app, .mt-page, .mt-vars {
  --mt-teal: #6c969d; --mt-teal-dark: #567f86; --mt-teal-tint: #e9eff0;
  --mt-orange: #cb4100; --mt-navy: #171f38; --mt-muted: #707070; --mt-faint: #a8a8a8;
  --mt-rule: #e6e6e6; --mt-alt: #f8f8f8; --mt-ok: #289f04; --mt-err: #cb0000;
  --mt-rail-top: #000410; --mt-rail-bottom: #182039; --mt-rail-text: #dbdbdb; --mt-rail-dim: #8a93a8;
  color: var(--mt-navy);
  font-family: 'Open Sans', Arial, sans-serif;
}

/* ---- Layout: dark rail on the left, white content on the right ---- */
.mt-app { display: flex; min-height: 100%; align-items: stretch; }
.mt-content { flex: 1; padding: 40px 48px 56px; min-width: 0; }

/* ---- The rail: console gradient, curved top-right corner, current item black with orange text ---- */
.mt-rail {
  width: 232px; flex: none; display: flex; flex-direction: column; padding: 28px 0 24px;
  background: linear-gradient(180deg, var(--mt-rail-top), var(--mt-rail-bottom));
  border-top-right-radius: 56px; color: var(--mt-rail-text);
}
.mt-rail-logo { display: block; padding: 0 28px 28px; }
.mt-rail-logo img, .mt-rail-logo svg { height: 30px; width: auto; display: block; }
.mt-rail-group {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mt-rail-dim);
  padding: 16px 28px 6px;
}
.mt-rail a.mt-item {
  display: flex; align-items: center; gap: 14px; padding: 11px 28px; font-size: 15px;
  color: var(--mt-rail-text); text-decoration: none;
}
.mt-rail a.mt-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.mt-rail a.mt-item svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.mt-rail a.mt-item .mt-n { margin-left: auto; font-size: 12px; color: var(--mt-rail-dim); }
.mt-rail a.mt-item.mt-current {
  background: #000; color: var(--mt-orange); border-radius: 0 28px 28px 0; margin-right: -18px;
}
.mt-rail a.mt-item:focus-visible { outline: 2px solid var(--mt-teal); outline-offset: -2px; }
.mt-who { margin-top: auto; padding: 18px 28px 0; font-size: 12px; color: var(--mt-rail-dim); }
.mt-who b { display: block; color: var(--mt-rail-text); font-size: 14px; }
.mt-who button, .mt-who a {
  background: none; border: 0; padding: 0; margin-top: 8px; font: inherit; font-size: 12px;
  color: var(--mt-rail-text); text-decoration: underline; cursor: pointer;
}

/* ---- Page text ---- */
.mt-h1 {
  font-family: 'Raleway', Arial, sans-serif; font-weight: 700; font-size: 34px; line-height: 1.2;
  color: var(--mt-navy); margin: 0 0 6px;
}
.mt-sub { color: var(--mt-muted); margin: 0 0 24px; font-size: 14px; }
.mt-empty { color: var(--mt-muted); padding: 28px 0; border-top: 1px solid var(--mt-rule); }

/* ---- Buttons: console pills; teal filled for the main action, teal outline for the rest ---- */
.mt-btn {
  display: inline-block; background: var(--mt-teal); color: #fff; text-transform: uppercase;
  font-weight: 600; letter-spacing: .04em; font-size: 13px; padding: 9px 22px; border-radius: 999px;
  border: 1.5px solid var(--mt-teal); text-decoration: none; cursor: pointer; white-space: nowrap;
  font-family: 'Open Sans', Arial, sans-serif;
}
.mt-btn:hover { background: var(--mt-teal-dark); border-color: var(--mt-teal-dark); color: #fff; text-decoration: none; }
.mt-btn.mt-ghost { background: transparent; color: var(--mt-teal); }
.mt-btn.mt-ghost:hover { background: var(--mt-teal-tint); color: var(--mt-teal-dark); }
.mt-btn:focus-visible, .mt-pill:focus-visible { outline: 2px solid var(--mt-navy); outline-offset: 2px; }

/* ---- Filter pills above a table ---- */
.mt-toolbar { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.mt-pill {
  border: 1.5px solid #c9c9c9; border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 13px;
  color: var(--mt-navy); background: #fff; cursor: pointer;
}
.mt-pill[aria-pressed="true"] { border-color: var(--mt-teal); background: var(--mt-teal-tint); }

/* ---- Console-style tables ---- */
table.mt-list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.mt-list th {
  text-align: left; font-size: 12px; text-transform: uppercase; font-weight: 600; color: var(--mt-navy);
  padding: 12px 14px; border-bottom: 1px solid var(--mt-rule); letter-spacing: .02em;
}
table.mt-list td { padding: 16px 14px; border-bottom: 1px solid var(--mt-rule); vertical-align: top; }
table.mt-list tr:hover td { background: var(--mt-alt); }
table.mt-list td.mt-num, table.mt-list th.mt-num { text-align: right; font-variant-numeric: tabular-nums; }
table.mt-list tr.mt-me td { background: var(--mt-teal-tint); }
.mt-title { font-weight: 600; font-size: 15px; }
.mt-desc { color: var(--mt-muted); font-size: 13px; max-width: 540px; margin-top: 2px; }
.mt-gain { color: var(--mt-ok); font-weight: 600; }
.mt-dim { color: var(--mt-faint); }

/* ---- Status pills (a run's state for this player) ---- */
.mt-status { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.mt-status.mt-new  { background: var(--mt-teal-tint); color: var(--mt-teal-dark); }
.mt-status.mt-done { background: #e6f4e0; color: var(--mt-ok); }
.mt-status.mt-prog { background: #fff4d6; color: #8a6400; }
.mt-status.mt-up   { background: #fde7e7; color: var(--mt-err); }
.mt-cell-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* ---- Narrow screens: the rail collapses to icons ---- */
@media (max-width: 900px) {
  .mt-rail { width: 72px; }
  .mt-rail-logo, .mt-rail-group, .mt-who, .mt-rail a.mt-item span { display: none; }
  .mt-rail a.mt-item { justify-content: center; padding: 14px 0; }
  .mt-rail a.mt-item.mt-current { margin-right: 0; border-radius: 0; }
  .mt-content { padding: 32px 28px 48px; }
}

/* ---- Phone width: the rail becomes a bottom tab bar, tables stack into labelled rows ---- */
@media (max-width: 700px) {
  .mt-app { flex-direction: column; }
  .mt-rail {
    position: fixed; bottom: 0; left: 0; right: 0; width: auto; height: 62px; z-index: 20;
    flex-direction: row; justify-content: space-around; align-items: center; padding: 0; border-radius: 0;
  }
  .mt-rail a.mt-item { padding: 12px 14px; }
  .mt-rail a.mt-item.mt-current { margin: 0; border-radius: 12px; }
  .mt-content { padding: 24px 16px 96px; }
  .mt-h1 { font-size: 26px; }
  table.mt-list thead { display: none; }
  table.mt-list tr { display: block; border-bottom: 1px solid var(--mt-rule); padding: 10px 0; }
  table.mt-list td { display: block; border: 0; padding: 4px 0; text-align: left !important; }
  /* Each cell says what it is once the header row is hidden (data-label set by the page). */
  table.mt-list td[data-label]::before {
    content: attr(data-label); color: var(--mt-muted); font-size: 12px; font-weight: 400; margin-right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-app *, .mt-page * { transition: none !important; }
}