/* The account control: a fixed button in the page's top-right corner. A "Sign in" pill for
   guests; after signing in, a circle with the account's avatar (or initial) and name, which opens
   the account menu. It is one copy for every page (app, Privacy, Terms) and hides itself while
   repoBI's Presentation Mode fills the screen (`body.repobi-presenting`). Colours come from
   variables so the app page's chosen look (data-look on <html>) and the OS setting on the policy
   pages both apply. */

/* The button shape system: repoBI's folded corner. Every page button carries one sharp
   (top-left) corner beside three soft ones — a folded page corner, plain in any size. Three
   tiers: 4px 18px 18px 18px on tall CTAs, 4px 12px 12px 12px on compact controls, 4px 10px 10px
   10px on menu rows and icon closes. (index.html's coffee buttons and subscription.html's plan
   buttons share the same shape.) Buttons without a surface (bare text actions, the ad strip's
   transparent ×) and non-buttons (badges, avatar circles) keep no fill to fold. */
#repo-account, .repo-dialog, #repo-data-note {
  --a-ink: #17231e;
  --a-muted: #68716c;
  --a-card: #fff;
  --a-card-opaque: #fff;
  --a-dialog: #fbfaf7;
  --a-trig: transparent;
  --a-border: rgba(18, 34, 29, 0.14);
  --a-trig-border: rgba(18, 34, 29, 0.13);
  --a-hover: rgba(18, 34, 29, 0.07);
  --a-sep: rgba(18, 34, 29, 0.10);
  --a-green: #14583f;
  --a-green-bright: #176044;
  --a-green-soft: rgba(31, 111, 92, 0.10);
  --a-grad-bright: #4cc28c;
  --a-danger: #8b2b24;
  --a-danger-2: #a12622;
  --a-danger-soft: rgba(180, 35, 24, 0.09);
  --a-avatar-bg: #fff;
  --a-input-bg: #fff;
  --a-input-border: #ccd4ce;
  --a-shadow: 0 14px 38px rgba(18, 34, 29, 0.18);
  --a-shadow-big: 0 24px 80px rgba(0, 0, 0, 0.28);
  --a-ring: linear-gradient(135deg, #34b879, #176044 60%, #0f4d38);
}

:root[data-look="dark"] #repo-account, :root[data-look="dark"] .repo-dialog,
:root[data-look="dark"] #repo-data-note {
  --a-ink: #e6ece8;
  --a-muted: #aab8b0;
  --a-card: #1b2520;
  --a-card-opaque: #1b2520;
  --a-dialog: #19241e;
  --a-trig: transparent;
  --a-border: rgba(255, 255, 255, 0.13);
  --a-trig-border: rgba(255, 255, 255, 0.16);
  --a-hover: rgba(255, 255, 255, 0.08);
  --a-sep: rgba(255, 255, 255, 0.12);
  --a-green: #82d1ab;
  --a-green-bright: #82d1ab;
  --a-green-soft: rgba(76, 194, 140, 0.14);
  --a-grad-bright: #4cc28c;
  --a-danger: #f97066;
  --a-danger-2: #f97066;
  --a-danger-soft: rgba(249, 112, 102, 0.12);
  --a-avatar-bg: #101914;
  --a-input-bg: #101914;
  --a-input-border: #43564b;
  --a-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
  --a-shadow-big: 0 24px 80px rgba(0, 0, 0, 0.6);
  --a-ring: linear-gradient(135deg, #4cc28c, #1d6b4c 60%, #14583f);
}
/* The policy pages have no data-look marker; the OS setting answers there. */
@media (prefers-color-scheme: dark) {
  :root:not([data-look="light"]) #repo-account, :root:not([data-look="light"]) .repo-dialog,
  :root:not([data-look="light"]) #repo-data-note {
    --a-ink: #e6ece8;
    --a-muted: #aab8b0;
    --a-card: #1b2520;
    --a-card-opaque: #1b2520;
    --a-dialog: #19241e;
    --a-trig: transparent;
    --a-border: rgba(255, 255, 255, 0.13);
    --a-trig-border: rgba(255, 255, 255, 0.16);
    --a-hover: rgba(255, 255, 255, 0.08);
    --a-sep: rgba(255, 255, 255, 0.12);
    --a-green: #82d1ab;
    --a-green-bright: #82d1ab;
    --a-green-soft: rgba(76, 194, 140, 0.14);
    --a-grad-bright: #4cc28c;
    --a-danger: #f97066;
    --a-danger-2: #f97066;
    --a-danger-soft: rgba(249, 112, 102, 0.12);
    --a-avatar-bg: #101914;
    --a-input-bg: #101914;
    --a-input-border: #43564b;
    --a-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
    --a-shadow-big: 0 24px 80px rgba(0, 0, 0, 0.6);
    --a-ring: linear-gradient(135deg, #4cc28c, #1d6b4c 60%, #14583f);
  }
}

body.repobi-presenting #repo-account,
body.repobi-booting #repo-account { display: none; }

#repo-account {
  position: fixed;
  display: flex;
  align-items: center;
  /* Flex gap carries every space in the row: children can never touch. Everything in the
     cluster is drawn 15% larger than its first size (text, buttons, icons, gaps grow with
     it), and the wasm app's reserved slot (see shell.rs) counts this rhythm in step with
     the row: 370px of slot where the coffee link shows, 200px where it hides. */
  gap: 11px;
  z-index: 5;
  /* env() measures 0 off phones and inside normal browser tabs; on a notched screen (or the
     installed-with-chrome-hidden phone window) the row keeps clear of the corner hardware. */
  top: max(4px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  color: var(--a-ink);
  font: 600 15px/1.4 "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

/* ---------- the look switch: the row's first control, before the coffee link ---------- */
#repo-account-look {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  flex: none;
  padding: 0;
  border: 1px solid var(--a-trig-border);
  border-radius: 4px 12px 12px 12px;
  background: var(--a-trig);
  color: var(--a-ink);
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
#repo-account-look svg { width: 17px; height: 17px; }
#repo-account-look:hover { background: var(--a-hover); border-color: var(--a-border); }
#repo-account-look[aria-pressed="true"] { background: var(--a-green-soft); border-color: var(--a-border); color: var(--a-green); }

/* The app page runs the application as its own canvas, and the start ribbon already carries
   a dark-mode control; this row's switch would sit beside it as a second one. The switch is
   kept for the pages without the canvas — the subscription page — and hidden here. */
body.repo-app-page #repo-account-look { display: none !important; }

/* ---------- the trigger: "Sign in" pill by default, the account circle after sign-in ---------- */
#repo-account-trigger,
#repo-account-trigger * { box-sizing: border-box; }
#repo-account-trigger {
  display: flex !important;
  align-items: center;
  gap: 7px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 11px !important;
  border: 1px solid var(--a-trig-border) !important;
  border-radius: 4px 12px 12px 12px !important;
  background: var(--a-trig) !important;
  color: var(--a-ink) !important;
  font: inherit;
  font-weight: 650 !important;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
#repo-account-trigger:hover {
  background: var(--a-hover) !important;
  border-color: var(--a-border) !important;
}
body.repobi-signed-in #repo-account-trigger { padding: 0 11px 0 3px !important; }

/* ---------- the "Remove ads" pill, right beside the sign-in pill ---------- */
.repo-remove-ads {
  display: inline-flex;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid var(--a-trig-border);
  border-radius: 4px 12px 12px 12px;
  background: var(--a-green-soft);
  color: var(--a-green) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.repo-remove-ads:hover { background: var(--a-card); border-color: var(--a-green); }
.repo-remove-ads[hidden] { display: none; }

/* ---------- the coffee row: the second control on the right side, sharing the row's one line ---------- */
.repo-row-coffee {
  display: none;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid rgba(18, 34, 29, 0.18);
  border-radius: 4px 12px 12px 12px;
  background: #ffdd00;
  color: #1d2422;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.repo-row-coffee:hover { filter: brightness(.95); }
#repo-account-coffee:not([hidden]) { display: inline-flex; }
@media (max-width: 900px) { #repo-account-coffee { display: none !important; } }

/* ---------- the data-safety note: every export repeats repoBI's promise ---------- */
#repo-data-note {
  position: fixed;
  z-index: 6;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(30em, calc(100% - 36px));
  margin: 0;
  padding: 11px 18px;
  border: 1px solid var(--a-border);
  border-radius: 12px;
  background: var(--a-card-opaque);
  color: var(--a-ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: var(--a-shadow);
}
#repo-data-note[hidden] { display: none; }
#repo-data-note.repo-data-note-in { animation: repo-data-note-in 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes repo-data-note-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.repo-avatar {
  width: 23px;
  height: 23px;
  flex: none;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 50%;
  background: var(--a-ring);
}
.repo-avatar-inner {
  width: 100%;
  height: 100%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--a-avatar-bg);
  color: var(--a-green-bright);
  font-size: 15px;
  font-weight: 750;
}
.repo-avatar-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.repo-avatar-big { width: 64px; height: 64px; }
.repo-avatar-big .repo-avatar-inner { font-size: 24px; }

.repo-account-names {
  display: flex;
  align-items: center;
  text-align: left;
  line-height: 1.15;
  max-width: 96px;
}
.repo-account-names strong {
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repo-account-names small {
  display: none;
}

/* ---------- the menu under the circle ---------- */
#repo-account-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 304px;
  padding: 7px;
  border: 1px solid var(--a-border);
  border-radius: 14px;
  background: var(--a-card);
  box-shadow: var(--a-shadow);
  transform-origin: top right;
}
#repo-account-menu[hidden] { display: none; }
#repo-account-menu:not([hidden]) { animation: repo-menu-in 140ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes repo-menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
}
#repo-account-menu > button,
#repo-account-menu > a {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 41px;
  box-sizing: border-box;
  padding: 8px 11px;
  border: 0;
  border-radius: 4px 10px 10px 10px;
  background: transparent;
  color: var(--a-ink);
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
#repo-account-menu > button:hover,
#repo-account-menu > a:hover { background: var(--a-hover); }
#repo-account-menu svg { width: 17px; height: 17px; flex: none; color: var(--a-muted); }
#repo-account-menu > button:hover svg { color: var(--a-ink); }
.repo-account-badge {
  margin-left: auto;
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--a-green-soft);
  color: var(--a-green);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.repo-account-sep { height: 2px; margin: 5px 8px; background: var(--a-sep); }
.repo-account-danger { color: var(--a-danger) !important; }
.repo-account-danger svg { color: var(--a-danger-2) !important; }
.repo-account-danger:hover { background: var(--a-danger-soft) !important; }

/* ---------- the account dialogs (sign in, and Profile / Subscription / Help / Feedback / About) ---------- */
.repo-dialog {
  width: min(470px, calc(100vw - 32px));
  max-width: none;
  /* Border-box keeps the promise literal: the box IS min(470px, 100vw − 32). In default
     content-box the 32px padding and border rode outside it — at a 390-wide phone that
     bagged the box to 424px and the centered dialog ran 34px off the screen. */
  box-sizing: border-box;
  padding: 32px;
  border: 1px solid var(--a-border);
  border-radius: 18px;
  background: var(--a-dialog);
  color: var(--a-ink);
  box-shadow: var(--a-shadow-big);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.repo-dialog::backdrop {
  background: radial-gradient(ellipse at 50% 42%, rgba(76, 194, 140, .17), transparent 58%), rgba(10, 21, 17, .48);
  background-size: 150% 150%; backdrop-filter: blur(7px); animation: repo-breathe 9s ease-in-out infinite alternate;
}
@keyframes repo-breathe { to { background-size: 185% 185%; } }
#repo-auth-form { position: relative; display: grid; gap: 9px; padding: 0; }
#repo-info-body { display: grid; gap: 11px; margin-top: 6px; }
.repo-dialog h1 { margin: 0 0 6px; font: 700 29px/1.15 "Outfit", -apple-system, sans-serif; letter-spacing: -0.025em; }
.repo-auth-kicker { margin: 0 0 2px; color: var(--a-green-bright); font-size: 13px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.repo-dialog-close {
  position: absolute;
  top: 14px;
  right: 15px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 4px 10px 10px 10px;
  background: transparent;
  color: var(--a-muted);
  font-size: 27px;
  cursor: pointer;
}
.repo-dialog-close:hover { color: var(--a-ink); background: var(--a-hover); }
#repo-auth-copy { margin: 0 0 10px; color: var(--a-muted); }

/* shared field styling for the sign-in form and the account views */
.repo-dialog label { margin-top: 4px; font-size: 14px; font-weight: 650; }
.repo-dialog input:not([type="checkbox"]), .repo-dialog textarea {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--a-input-border);
  border-radius: 10px;
  padding: 10px 13px;
  background: var(--a-input-bg);
  color: var(--a-ink);
  font: inherit;
  resize: vertical;
}
.repo-dialog textarea { min-height: 110px; line-height: 1.45; }
.repo-dialog input:focus, .repo-dialog textarea:focus { outline: 3px solid rgba(31, 111, 92, 0.2); border-color: var(--a-green); }
.repo-dialog input[hidden], .repo-dialog label[hidden], .repo-dialog div[hidden],
#repo-auth-password-checks[hidden], #repo-auth-divider[hidden], #repo-auth-google[hidden] { display: none; }

.repo-auth-primary {
  min-height: 48px;
  margin-top: 8px;
  border: 0;
  border-radius: 4px 18px 18px 18px;
  background: var(--a-green);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.repo-auth-primary:hover { filter: brightness(1.08); }
.repo-auth-primary:disabled { opacity: 0.65; cursor: wait; }
.repo-auth-ghost {
  border: 1px solid var(--a-border);
  background: transparent;
  color: var(--a-ink);
}
.repo-auth-ghost:hover { background: var(--a-hover); }
.repo-auth-ghost:disabled { cursor: wait; opacity: 0.65; }
.repo-auth-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; }
.repo-auth-actions button { border: 0; background: none; color: var(--a-green); font: inherit; font-size: 14px; cursor: pointer; }
.repo-auth-google {
  min-height: 48px; border: 1px solid var(--a-border); border-radius: 4px 18px 18px 18px; background: var(--a-card);
  box-shadow: 5px 5px 12px rgba(18, 34, 29, 0.06), -5px -5px 12px #fff; color: var(--a-ink);
  font: inherit; font-weight: 650; cursor: pointer;
}
.repo-auth-google:hover { background: var(--a-dialog); }
.repo-auth-google:disabled { opacity: .6; cursor: not-allowed; }
.repo-auth-divider { display: flex; align-items: center; gap: 10px; color: var(--a-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.repo-auth-divider::before, .repo-auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--a-sep); }
.repo-password-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; color: var(--a-muted); font-size: 13px; }
.repo-password-checks span[data-passed="true"] { color: var(--a-green-bright); }
.repo-auth-consent { display: flex; gap: 8px; align-items: flex-start; color: var(--a-muted); font-size: 13px; font-weight: 450 !important; line-height: 1.45; margin-top: 2px; }
.repo-auth-consent input { width: auto !important; min-height: 0 !important; margin: 2px 0 0; accent-color: var(--a-green); }
.repo-auth-consent a { display: inline; width: auto; padding: 0; color: var(--a-green); text-decoration: underline; }
.repo-auth-remember span { color: var(--a-ink); font-weight: 600; font-size: 14px; }
#repo-auth-message { min-height: 23px; color: var(--a-green-bright); font-size: 14px; }
#repo-auth-message[data-error="true"] { color: var(--a-danger-2); }

/* ---------- the account views inside the dialog ---------- */
.repo-profile-head { display: flex; align-items: center; gap: 15px; padding: 2px 0 4px; }
.repo-profile-head strong { display: block; font-size: 18px; letter-spacing: -0.01em; }
.repo-profile-mail { color: var(--a-muted); font-size: 14px; overflow-wrap: anywhere; }
.repo-field { display: grid; gap: 5px; }
.repo-field input { min-height: 44px; }
.repo-profile-extra { display: grid; gap: 9px; margin-top: 6px; }
.repo-profile-extra[hidden] { display: none; }
.repo-account-status { min-height: 21px; color: var(--a-green-bright); font-size: 14px; }
.repo-account-status:not(:empty) { margin-top: 2px; }
.repo-account-cloud {
  display: flex; gap: 9px; align-items: flex-start; width: 100%;
  padding: 11px 13px; border-radius: 4px 12px 12px 12px;
  border: 1px solid var(--a-border);
  background: var(--a-card);
  cursor: pointer;
}
.repo-account-cloud[hidden] { display: none; }
.repo-account-cloud input { margin: 3px 0 0; accent-color: var(--a-green); }
.repo-account-cloud small { display: block; margin-top: 3px; color: var(--a-muted); font-size: 13px; line-height: 1.4; font-weight: 450; }
.repo-account-cloud strong { font-size: 14.5px; }

.repo-plan {
  display: grid; gap: 10px;
  padding: 15px 16px;
  border: 1px solid var(--a-border);
  border-radius: 12px;
  background: var(--a-card);
}
.repo-plan-name { display: inline-flex; width: fit-content; align-items: center; gap: 7px;
  padding: 3px 11px; border-radius: 999px; background: var(--a-green-soft); color: var(--a-green);
  font-size: 14px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.repo-plan small { color: var(--a-muted); font-size: 14px; line-height: 1.5; }
.repo-plan-updates { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--a-muted); line-height: 1.45; cursor: pointer; }
.repo-plan-updates input { width: auto !important; min-height: 0 !important; margin: 2px 0 0; accent-color: var(--a-green); }

.repo-mail-row {
  display: grid; gap: 3px; width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--a-border);
  border-radius: 4px 12px 12px 12px;
  background: var(--a-card);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--a-ink);
  box-sizing: border-box;
}
.repo-mail-row:hover { background: var(--a-hover); }
.repo-mail-row strong { font-size: 15px; color: var(--a-green); font-weight: 650; }
.repo-mail-row small { color: var(--a-muted); font-size: 13px; line-height: 1.4; }
.repo-info-note { margin: 0; color: var(--a-muted); font-size: 14px; line-height: 1.5; }
.repo-info-note.repo-info-trademark { font-size: 13px; }
.repo-info-link { display: block; color: var(--a-green); font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
.repo-about-mark { margin: 2px 0 4px; font: 700 34px/1 "Outfit", -apple-system, sans-serif; letter-spacing: -0.01em; color: var(--a-ink); }
.repo-about-mark b { color: var(--a-green-bright); }

@media (prefers-reduced-motion: reduce) {
  #repo-account-menu:not([hidden]) { animation: none; }
  #repo-data-note.repo-data-note-in { animation: none; }
  .repo-dialog::backdrop { backdrop-filter: none; animation: none; }
}

@media (max-width: 719px) {
  /* Same anchors as the desktop row, but pushed out to phone margins — the max() keeps the
     env() wins too, so a notched screen's hardware never sits under the row. */
  #repo-account { top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); }
  .repo-account-names { display: none; }
  #repo-auth-form { padding: 31px 25px 25px; }
  .repo-password-checks { grid-template-columns: 1fr; }
}