/* The rail-injected chrome, and only the rail-injected chrome (ADR 0062).
 *
 * Every value here is copied by value from docs/design/DESIGN-SYSTEM.md: colour from 2.1, type
 * from 2.2, spacing from 2.3, radii from 2.4. Where the design system gives a token a name, that
 * name is used with the `--rails-` prefix section 5.2 sets. Nothing is invented; if a value here
 * disagrees with that document, that document wins and this file is the bug.
 *
 * THE BOUNDARY, which is Alex's call and not a matter of taste:
 *
 *   Everything in this file is scoped under `.rails-chrome`. It styles the sign-in affordance,
 *   History, the pricing block, the return-message component and the generated dashboard. It
 *   styles NOTHING an app wrote. There is no bare element selector, no `:root`, no `body`, and
 *   no reset -- an app's own pages keep their own design system, and a stylesheet that leaks one
 *   `h1 { }` into a package's page has broken that on every app at once.
 *
 * CR-1 is the seam: --rails-accent, --rails-font-sans and --rails-font-mono are the three tokens
 * an app may set, through its manifest. The structure, spacing, radii and grey ramp are ours.
 */

.rails-chrome {
  /* 2.2 web stack. An app that names its own face through CR-1 overrides the first entry only;
     the fallback chain stays, so a font that fails to load degrades to the system stack rather
     than to a serif nobody chose. */
  --rails-font-sans: -apple-system;
  --rails-font-stack: var(--rails-font-sans), BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, sans-serif;

  /* 2.1, light. */
  --rails-ground: #FFFFFF;
  --rails-surface: #F5F5F7;
  --rails-raised: #FFFFFF;
  --rails-ink: #1D1D1F;
  --rails-muted: #636368;
  --rails-hairline: #E3E3E8;
  --rails-control: #C7C7CC;
  --rails-fill-2: rgb(29 29 31 / .08);
  --rails-fill-3: rgb(29 29 31 / .14);
  --rails-accent: #0071E3;
  --rails-accent-ink: #0066CC;
  --rails-accent-soft: #E8F2FE;
  --rails-focus: #0071E3;
  --rails-danger: #C20013;
  --rails-success: #1B7431;

  /* 2.3 spacing, 2.4 radii. */
  --rails-space-1: 4px;
  --rails-space-2: 8px;
  --rails-space-3: 12px;
  --rails-space-4: 16px;
  --rails-space-6: 24px;
  --rails-space-8: 32px;
  --rails-radius-panel: 16px;
  --rails-radius-small: 8px;
  --rails-radius-pill: 999px;

  color: var(--rails-ink);
  font-family: var(--rails-font-stack);
  font-size: 17px;
  line-height: 22px;
}

/* 2.1, dark. Both the media query and the explicit attribute, so a page that offers its own
   theme switch can drive the chrome with it instead of fighting it. */
@media (prefers-color-scheme: dark) {
  .rails-chrome:not([data-rails-theme="light"]) {
    --rails-ground: #101012;
    --rails-surface: #161618;
    --rails-raised: #1E1E21;
    --rails-ink: #F5F5F7;
    --rails-muted: #A1A1A8;
    --rails-hairline: #2C2C31;
    --rails-control: #48484E;
    --rails-fill-2: rgb(245 245 247 / .10);
    --rails-fill-3: rgb(245 245 247 / .16);
    --rails-accent-ink: #4DA3FF;
    --rails-accent-soft: #12283F;
    --rails-focus: #4DA3FF;
    --rails-danger: #FF6B63;
    --rails-success: #3DD16A;
  }
}

.rails-chrome[data-rails-theme="dark"] {
  --rails-ground: #101012;
  --rails-surface: #161618;
  --rails-raised: #1E1E21;
  --rails-ink: #F5F5F7;
  --rails-muted: #A1A1A8;
  --rails-hairline: #2C2C31;
  --rails-control: #48484E;
  --rails-fill-2: rgb(245 245 247 / .10);
  --rails-fill-3: rgb(245 245 247 / .16);
  --rails-accent-ink: #4DA3FF;
  --rails-accent-soft: #12283F;
  --rails-focus: #4DA3FF;
  --rails-danger: #FF6B63;
  --rails-success: #3DD16A;
}

/* -- the return-message component ------------------------------------------------------------ */

.rails-chrome .rails-return {
  display: flex;
  flex-direction: column;
  gap: var(--rails-space-3);
  margin: var(--rails-space-6) 0 0;
  padding: var(--rails-space-4);
  background: var(--rails-raised);
  border: 1px solid var(--rails-hairline);
  border-radius: var(--rails-radius-panel);
}

/* Body, 17/22 (2.2). The sentence is the thing a person is about to send, so it is read at body
   size and not shrunk into a caption. */
.rails-chrome .rails-return-text {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
}

.rails-chrome .rails-return-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rails-space-2);
}

/* -- controls: capsules, 44 minimum touch target (2.3, 2.4) ---------------------------------- */

.rails-chrome .rails-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--rails-space-4);
  border: 0;
  border-radius: var(--rails-radius-pill);
  background: var(--rails-fill-2);
  color: var(--rails-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.rails-chrome .rails-button:hover { background: var(--rails-fill-3); }

.rails-chrome .rails-button-primary {
  background: var(--rails-accent);
  color: #FFFFFF;
}

/* White on #0071E3 measures 4.7:1 (2.1). Keeping the primary label white on the app's own accent
   is the one place CR-1 can cost contrast, so the check names it: an app that sets a pale accent
   fails `a11y` in scripts/check_web_pages.py rather than shipping an unreadable button. */
.rails-chrome .rails-button-primary:hover { filter: brightness(0.94); }

.rails-chrome .rails-button:focus-visible,
.rails-chrome a:focus-visible {
  outline: 2px solid var(--rails-focus);
  outline-offset: 2px;
}

.rails-chrome .rails-said {
  font-size: 13px;
  line-height: 18px;
  color: var(--rails-muted);
}

/* -- the sign-in, History and pricing affordances -------------------------------------------- */

.rails-chrome .rails-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rails-space-4);
  padding: var(--rails-space-3) var(--rails-space-4);
  border-bottom: 1px solid var(--rails-hairline);
  font-size: 15px;
  line-height: 20px;
}

.rails-chrome .rails-bar a { color: var(--rails-accent-ink); }

.rails-chrome .rails-price {
  display: flex;
  flex-direction: column;
  gap: var(--rails-space-2);
  padding: var(--rails-space-4);
  background: var(--rails-surface);
  border-radius: var(--rails-radius-panel);
}

/* Prices and counts line up (2.2). */
.rails-chrome .rails-price-amount {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.rails-chrome .rails-term {
  font-size: 13px;
  line-height: 18px;
  color: var(--rails-muted);
}

/* -- the generated dashboard ------------------------------------------------------------------ */

.rails-chrome .rails-page {
  max-width: 640px; /* reading measure, 2.3 */
  margin: 0 auto;
  padding: var(--rails-space-4);
}

.rails-chrome .rails-card {
  padding: var(--rails-space-4);
  margin-bottom: var(--rails-space-4);
  background: var(--rails-raised);
  border: 1px solid var(--rails-hairline);
  border-radius: var(--rails-radius-panel);
}

.rails-chrome .rails-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rails-space-4);
  min-height: 52px; /* 2.3: a 44 control sits inside with 4 above and below */
  padding: var(--rails-space-3) 0;
  border-bottom: 1px solid var(--rails-hairline);
}

.rails-chrome .rails-row:last-child { border-bottom: 0; }

.rails-chrome .rails-when {
  font-size: 13px;
  line-height: 18px;
  color: var(--rails-muted);
  font-variant-numeric: tabular-nums;
}

/* Reduce Motion has a designed answer, not a degraded one (principle 5 / section 6). Nothing in
   the chrome animates today; the rule is here so that adding one cannot forget it. */
@media (prefers-reduced-motion: reduce) {
  .rails-chrome *,
  .rails-chrome *::before,
  .rails-chrome *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}