/* My RJ (/my): black and gold, phone first. style.css is loaded only for
   the tier plates (.rj-badge); everything else here is the page's own. */
:root { --my-bg: #070605; --my-card: #12100b; --my-edge: rgba(212, 160, 23, 0.4); --my-gold: #d4a017;
  --my-gold-hi: #f4cf62; --my-text: #f3e6c0; --my-muted: #a99a72; --my-bad: #ff9f8a; }
html, body.my-body { background: var(--my-bg); color: var(--my-text); margin: 0; min-height: 100%; }
body.my-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif;
  background: radial-gradient(120% 70% at 50% 0%, #241b09 0%, var(--my-bg) 60%); background-attachment: fixed; }
.my-app { max-width: 720px; margin: 0 auto; padding: 12px 16px 48px; box-sizing: border-box; }
.my-head { display: flex; align-items: center; gap: 10px; padding: 8px 0 18px; }
.my-brand { flex: 1; display: flex; align-items: center; gap: 0.3em; margin: 0; font-size: 1.7rem; line-height: 1; }
.my-brand-my { font-family: -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif; font-weight: 300;
  letter-spacing: 0.14em; color: var(--my-gold-hi); }
/* The RJ letters of the logo, filled with the page's gold. */
.my-brand-rj { display: inline-block; width: 2.3em; height: 1.8em; margin: -0.2em 0; background: linear-gradient(180deg, var(--my-gold-hi), var(--my-gold));
  -webkit-mask: url("/rj-letters.svg") center / contain no-repeat; mask: url("/rj-letters.svg") center / contain no-repeat; }
.my-lang { background: transparent; color: var(--my-text); border: 1px solid var(--my-edge); border-radius: 999px; padding: 6px 10px; }
.my-card { background: var(--my-card); border-radius: 18px; padding: 20px; box-shadow: inset 0 0 0 1px var(--my-edge); }
.my-narrow { max-width: 420px; margin: 0 auto; }
.my-center { text-align: center; }
.my-app h1 { font-size: 1.35rem; margin: 0 0 14px; color: var(--my-gold-hi); font-family: Georgia, "Times New Roman", serif; }
.my-app h2 { margin: 26px 0 10px; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--my-gold); }
.my-app label { display: block; margin: 0 0 12px; font-size: 0.85rem; color: var(--my-muted); }
.my-app input[type=email], .my-app input[type=password], .my-app input[type=text] { display: block; width: 100%; box-sizing: border-box;
  margin-top: 6px; padding: 12px 14px; font-size: 1.05rem; color: var(--my-text); background: #0a0907;
  border: 1px solid var(--my-edge); border-radius: 12px; }
.my-app input:focus { outline: 2px solid var(--my-gold); outline-offset: 1px; }
.my-kind { border: 0; padding: 0; margin: 0 0 12px; }
.my-kind legend { font-size: 0.85rem; color: var(--my-muted); margin-bottom: 6px; }
.my-kind label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; color: var(--my-text); }
.my-primary, .my-ghost { display: block; width: 100%; padding: 14px 18px; border-radius: 999px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.my-primary { border: 0; color: #1a1205; background: linear-gradient(180deg, #f4d77a, #c99a1e); }
/* style.css's button:hover outranks the class and dropped the gold on a
   mouse (2026-10-27); hovering keeps it, a disabled one waits greyed. */
.my-primary:hover { background: linear-gradient(180deg, #f4d77a, #c99a1e); }
.my-ghost:hover { background: transparent; }
.my-primary:disabled { opacity: 0.6; cursor: wait; }
.my-ghost { margin-top: 10px; background: transparent; color: var(--my-gold-hi); border: 1px solid var(--my-edge); }
.my-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.my-link { background: none; border: 0; color: var(--my-gold-hi); text-decoration: underline; cursor: pointer; padding: 6px 0; font-size: 0.92rem; }
.my-msg { min-height: 1.2em; margin: 4px 0 12px; font-size: 0.9rem; }
.my-msg.bad { color: var(--my-bad); }
.my-help { color: var(--my-muted); font-size: 0.9rem; line-height: 1.5; }
.my-hello { font-size: 1.15rem; margin: 0 0 14px; color: var(--my-text); }
.my-code { font-family: ui-monospace, Menlo, monospace; color: var(--my-muted); font-size: 0.9rem; }
.my-qr { display: block; margin: 8px auto 12px; width: 240px; height: 240px; background: #fff; border-radius: 14px; padding: 10px; image-rendering: pixelated; }
.my-video { width: 100%; max-width: 360px; border-radius: 14px; background: #000; }
.my-top { display: grid; grid-template-columns: 1fr; gap: 18px; text-align: center; padding: 20px; border-radius: 18px;
  background: radial-gradient(120% 90% at 0% 0%, #2a2210 0%, #0d0c0a 55%, #050505 100%); box-shadow: inset 0 0 0 1px var(--my-edge); }
@media (min-width: 620px) { .my-top { grid-template-columns: repeat(3, 1fr); align-items: center; } }
.my-shield .rj-badge { transform: scale(1.15); }
.my-sub { margin: 8px 0 0; color: var(--my-muted); font-size: 0.85rem; }
.my-ring { width: 120px; height: 120px; }
.my-ring-track { fill: none; stroke: rgba(212, 160, 23, 0.18); stroke-width: 8; }
.my-ring-fill { fill: none; stroke: url(#g); stroke-width: 8; stroke-linecap: round; }
.my-ring-lv { fill: var(--my-muted); font-size: 11px; letter-spacing: 0.2em; text-anchor: middle; }
.my-ring-n { fill: var(--my-gold-hi); font-size: 34px; font-weight: 700; text-anchor: middle; font-family: Georgia, serif; }
.my-nums > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(212, 160, 23, 0.25); }
.my-nums span { color: var(--my-muted); font-size: 0.82rem; }
.my-nums b { color: var(--my-gold-hi); font-size: 1.6rem; font-family: Georgia, serif; }
.my-safe { margin: 8px 0 0; color: var(--my-muted); font-size: 0.8rem; text-align: left; }
.my-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 0.82rem; color: #ffd9a8; text-align: left;
  background: rgba(200, 90, 20, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 160, 80, 0.45); }
.my-actions { margin-top: 16px; }
.my-rewards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.my-rewards li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(212, 160, 23, 0.25); }
.my-rewards b { color: var(--my-gold-hi); }
.my-rewards small { grid-column: 1 / -1; color: var(--my-muted); }
.my-rewards li.can { box-shadow: inset 0 0 0 1.5px var(--my-gold); }
.my-rewards li.can small { color: var(--my-gold-hi); font-weight: 600; }
.my-hist { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.my-hist th { text-align: left; color: var(--my-gold); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--my-edge); }
.my-hist td { padding: 7px 4px; border-bottom: 1px solid rgba(212, 160, 23, 0.12); }
.my-hist .num { text-align: right; font-variant-numeric: tabular-nums; }
.my-hist tr.neg td.num:nth-child(3) { color: var(--my-bad); }
.my-out { display: block; margin: 26px auto 0; }
.my-fold { margin-top: 26px; }
.my-fold summary { cursor: pointer; padding: 10px 0; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--my-gold); }
.my-agree { display: flex !important; align-items: flex-start; gap: 10px; color: var(--my-text) !important; }
.my-agree .my-link { padding: 0; }
.my-agree input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--my-gold); }
.my-agree span { flex: 1; line-height: 1.4; }
.my-agree a.my-link { padding: 0; }
.my-app .my-codebox { text-align: center; font-size: 1.6rem; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }
.my-foot { margin-top: 28px; text-align: center; font-size: 0.82rem; }
.my-foot a { color: var(--my-muted); text-decoration: underline; }
/* "Add My RJ to your Home Screen" (2026-10-27): a small note pinned to the
   bottom, dismissible. The portal is black and gold in every theme, so the
   three theme blocks carry the same values. */
:root { --my-hint-bg: rgba(18, 16, 11, 0.97); --my-hint-edge: rgba(212, 160, 23, 0.55); --my-hint-shadow: rgba(0, 0, 0, 0.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --my-hint-bg: rgba(18, 16, 11, 0.97); --my-hint-edge: rgba(212, 160, 23, 0.55); --my-hint-shadow: rgba(0, 0, 0, 0.6); } }
:root[data-theme="dark"] { --my-hint-bg: rgba(18, 16, 11, 0.97); --my-hint-edge: rgba(212, 160, 23, 0.55); --my-hint-shadow: rgba(0, 0, 0, 0.6); }
.my-hint { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  max-width: 520px; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: var(--my-hint-bg); color: var(--my-text);
  box-shadow: inset 0 0 0 1px var(--my-hint-edge), 0 10px 30px var(--my-hint-shadow); }
.my-hint-icon { width: 44px; height: 44px; border-radius: 11px; }
.my-hint-text { display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem; line-height: 1.4; color: var(--my-muted); }
.my-hint-text b { color: var(--my-gold-hi); font-size: 0.95rem; }
.my-hint-share { width: 1.15em; height: 1.15em; vertical-align: -0.2em; color: var(--my-gold-hi); }
.my-hint-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.my-hint-go, .my-hint-x { padding: 8px 16px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.my-hint-go, .my-hint-go:hover { border: 0; color: #1a1205; background: linear-gradient(180deg, #f4d77a, #c99a1e); }
.my-hint-x, .my-hint-x:hover { background: transparent; color: var(--my-gold-hi); border: 1px solid var(--my-edge); }
/* Room under the last card so the note never covers it. */
body:has(.my-hint) .my-app { padding-bottom: 160px; }
/* "Emails from RJ" (2026-10-28): the member's own news switch. */
.my-app label.my-switch { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; color: var(--my-text); font-size: 1rem; cursor: pointer; position: relative; }
.my-switch-text { flex: 1; }
.my-switch input { position: absolute; opacity: 0; width: 52px; height: 30px; right: 0; margin: 0; cursor: pointer; }
.my-switch-ui { flex: none; width: 52px; height: 30px; border-radius: 999px; background: #2a251a; box-shadow: inset 0 0 0 1px var(--my-edge); position: relative; transition: background 0.15s; }
.my-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--my-muted); transition: transform 0.15s, background 0.15s; }
.my-switch input:checked + .my-switch-ui { background: linear-gradient(180deg, #f4d77a, #c99a1e); }
.my-switch input:checked + .my-switch-ui::after { transform: translateX(22px); background: #1a1205; }
.my-switch input:focus-visible + .my-switch-ui { outline: 2px solid var(--my-gold); outline-offset: 2px; }
.my-switch input:disabled + .my-switch-ui { opacity: 0.6; }
.my-news .my-help { margin: 4px 0 0; }