/**
 * Styles for the accounts UI. Every colour is a variable from src/styles.css, so the
 * sign-in sheet follows the app's theme instead of carrying a second palette that
 * drifts out of step the first time the app's own is retuned.
 */

/**
 * Desktop-only controls, hidden by web-ui.js. See the header of that file for why they
 * are hidden rather than removed - in short, renderer.js must still be able to find
 * and bind every one of them, or main() dies partway through.
 *
 * !important because renderer.js sets inline `display` on the [data-engine] blocks
 * when the speech engine changes, and an inline style would otherwise reopen one.
 */
.rc-gone { display: none !important; }

.rc-account.rc-in {
  border-color: rgba(var(--ember-rgb), 0.55);
  color: var(--ember-soft);
}

/* `display: grid` below outranks the browser's own [hidden] { display: none }, so
   without this the sheet is permanently open. Any rule that sets display on an element
   you also toggle with .hidden needs this pair. */
.rc-modal[hidden] { display: none !important; }

.rc-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 7, 12, 0.72);
  backdrop-filter: blur(6px);
}

.rc-panel {
  position: relative;
  width: min(420px, 100%);
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.rc-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--dim);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.rc-x:hover { color: var(--text); background: var(--panel-2); }

/**
 * Let the burn book be copied out of.
 *
 * styles.css sets `user-select: none` on html/body - right for a desktop app where
 * dragging across the video should not select anything, wrong for a list of jokes
 * whose entire point is being sent to someone else. On a phone the symptom is that
 * long-pressing a roast does nothing at all.
 *
 * `-webkit-touch-callout: default` is the second half on iOS: without it Safari
 * suppresses the selection handles even when user-select allows the selection.
 */
.rc-history,
.rc-history *,
.rc-roast,
.rc-when,
#history,
#history * {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  cursor: text;
}
/* Buttons inside those regions keep behaving like buttons. */
.rc-history button,
#history button {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.rc-form { display: flex; flex-direction: column; gap: 12px; }

.rc-h { margin: 0 24px 0 0; font-size: 19px; letter-spacing: 0.2px; color: var(--text); }
.rc-h3 { margin: 10px 0 0; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); }
.rc-p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); }

/* `input.rc-input`, not `.rc-input`: styles.css:512 sets a `font:` shorthand on
   input[type="password"], and an attribute selector outranks a bare class - so the
   password field rendered two sizes smaller than the email field above it. */
input.rc-input {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
input.rc-input:focus {
  outline: none;
  border-color: rgba(var(--ember-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--ember-rgb), 0.14);
}

.rc-primary {
  padding: 11px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--ember);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.rc-primary:hover { background: var(--ember-soft); }
.rc-primary:disabled { opacity: 0.6; cursor: default; }

.rc-ghost {
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rc-ghost:hover { color: var(--bad); border-color: rgba(248, 113, 113, 0.4); }

.rc-link {
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rc-link:hover { color: var(--text); }

/**
 * Settings, web build. Four controls in three sections, so the panel can breathe
 * instead of being packed like the desktop one it came from. Only spacing and weight
 * are touched here - the colours stay the app's.
 */
#settings .panel-body > section {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
#settings .panel-body > section:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
}
#settings .panel-body h4 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
#settings .field { margin-bottom: 0; }
#settings .field + .field { margin-top: 18px; }
#settings .field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--text);
}
#settings .hint {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
}

/* --- camera zoom ---------------------------------------------------------- */

.rc-zoom-reset {
  position: absolute;
  top: 62px;
  right: 12px;
  z-index: 7;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
  color: var(--ember-soft);
  font: 600 12px/1 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  /* #stage sets touch-action:none so the camera can claim pinches; this control has
     to take its taps back. */
  touch-action: manipulation;
}
.rc-zoom-reset:hover { border-color: var(--ember); background: rgba(var(--ember-rgb), 0.2); }
.rc-zoom-reset[hidden] { display: none !important; }

/* --- share the clip ------------------------------------------------------- */

/* The mirror image of the X that closes the photo (src/styles.css .close-shot): same top,
   same 44px circle, same distance from the edge - on the right. It used to sit low on the
   right edge, which is where the roast text runs. Lives in #stage like the X does, so the
   two are positioned by the same box. */
.rc-share {
  position: absolute;
  top: 62px;
  right: 12px;
  z-index: 7;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rc-share[hidden] { display: none !important; }

/* Zoomed in with a photo up, the readout and the share button would be the same spot.
   Nothing to reset while the picture is frozen anyway. */
body.shot .rc-zoom-reset { display: none !important; }

/* The flip button, in the share button's place for the live camera (never both at once). */
.rc-flip {
  position: absolute;
  top: 62px;
  right: 12px;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.rc-flip:hover { border-color: var(--ember); background: rgba(var(--ember-rgb), 0.22); }
.rc-flip:active { transform: scale(0.92); }
.rc-flip:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: 2px; }
.rc-flip[hidden], body.shot .rc-flip { display: none !important; }

.rc-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Same circle as .close-shot: 44px, same border and glass. */
.rc-share-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.rc-share-btn:hover .rc-share-icon { border-color: var(--ember); background: rgba(var(--ember-rgb), 0.22); }
.rc-share-btn:active .rc-share-icon { transform: scale(0.9); }
.rc-share-btn:focus-visible { outline: none; }
.rc-share-btn:focus-visible .rc-share-icon { outline: 2px solid var(--ember-soft); outline-offset: 2px; }
.rc-share-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.rc-share-note {
  max-width: 220px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(18, 16, 23, 0.94);
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.4;
}

/* --- social sign-in ------------------------------------------------------- */


.rc-oauth { display: flex; flex-direction: column; gap: 9px; }

.rc-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.rc-oauth-btn:hover { border-color: #4a4358; background: #201c29; }
.rc-oauth-btn svg { flex: none; }

/* Apple's mark is monochrome and inherits currentColor, so it needs the text to be
   near-white to read correctly. Google's is full colour and must not be tinted. */
.rc-apple { color: #fff; }

.rc-or {
  position: relative;
  margin: 3px 0 1px;
  text-align: center;
}
.rc-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.rc-or span {
  position: relative;
  padding: 0 10px;
  background: var(--panel);
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- password requirements ------------------------------------------------ */

.rc-reqs {
  margin: -2px 0 0;
  padding: 10px 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
}
.rc-reqs[hidden] { display: none !important; }

.rc-reqs li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-size: 12.5px;
  transition: color 0.15s;
}
.rc-reqs li.ok { color: var(--good); }

.rc-req-mark {
  flex: none;
  width: 14px;
  text-align: center;
  font-size: 12px;
}

.rc-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.rc-primary:disabled:hover { background: var(--ember); }

/* --- buy roasts ----------------------------------------------------------- */

.rc-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rc-pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rc-pack:hover { border-color: var(--ember); background: rgba(var(--ember-rgb), 0.12); }
.rc-pack:disabled { opacity: 0.5; cursor: default; }
.rc-pack-busy { border-color: var(--ember); }

.rc-pack-price { font-size: 17px; font-weight: 700; color: var(--ember-soft); }
.rc-pack-credits { font-size: 12px; }
.rc-pack-each { font-size: 11px; color: var(--dim); }

@media (max-width: 380px) {
  .rc-packs { grid-template-columns: 1fr; }
  .rc-pack { flex-direction: row; justify-content: space-between; padding: 14px 16px; }
}

/* --- terms ---------------------------------------------------------------- */

.rc-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 6px;
}

.rc-terms-link { margin-top: -2px; opacity: 0.75; font-size: 12px; }

.rc-terms .rc-h3 { margin-top: 14px; }
.rc-terms .rc-h3:first-of-type { margin-top: 4px; }
.rc-terms .rc-p { color: var(--dim); }
.rc-terms .rc-primary { margin-top: 18px; }

.rc-err {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.09);
  color: var(--bad);
  font-size: 12.5px;
  line-height: 1.45;
}

.rc-quota {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(var(--ember-rgb), 0.28);
  border-radius: 9px;
  background: rgba(var(--ember-rgb), 0.08);
  color: var(--ember-soft);
  font-size: 13px;
  font-weight: 600;
}

/* --- promo code ----------------------------------------------------------- */

.rc-promo-wrap { display: flex; flex-direction: column; gap: 8px; }
.rc-promo { display: flex; gap: 8px; }
.rc-promo input.rc-input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.rc-promo .rc-primary { flex: none; }

.rc-ok {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 8px;
  background: rgba(74, 222, 128, 0.09);
  color: var(--good);
  font-size: 12.5px;
  line-height: 1.45;
}

.rc-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.rc-history li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.rc-history li:last-child { border-bottom: 0; padding-bottom: 0; }
.rc-when { color: var(--dim); font-size: 11px; padding-top: 2px; }
.rc-roast { color: var(--text); font-size: 13px; line-height: 1.45; }

/* The sheet is the whole screen on a phone; a centred card with margins wastes the
   only dimension a phone has. */
@media (max-width: 480px) {
  .rc-modal { padding: 0; }
  .rc-panel { width: 100%; max-height: 100vh; height: 100vh; border: 0; border-radius: 0; }
}

/* Manage/cancel subscription. Deliberately quiet — it sits under the plan buttons and
 * should not compete with them — but a real, obvious control, because a recurring
 * charge you cannot find the exit for becomes a chargeback. */
.rc-link-btn {
  display: block;
  margin: 12px auto 0;
  padding: 6px 4px;
  background: none;
  border: 0;
  color: var(--muted, #9aa0aa);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rc-link-btn:hover { color: var(--text, #f1efea); }
.rc-link-btn:focus-visible { outline: 2px solid var(--ember, #ff5630); outline-offset: 2px; }
.rc-link-btn[disabled] { opacity: 0.5; cursor: default; }