/* ============================================================
   Index Pages — user area (app) styles
   Loads AFTER /styles.css (shared base + UI kit from Hugo).
   Only app-specific plumbing lives here; anything generic
   belongs in hugo/static/styles.css.
   ============================================================ */

/* ── App shell ───────────────────────────────────────────── */
.app-main { position: relative; z-index: 2; }

/* ── App nav additions ───────────────────────────────────── */
/* The header itself – row height, links, active underline, the dropdown trigger
   and its panel – is shared with the landing and lives in styles.css. What is
   left here is the parts the landing has no equivalent for. */
.nav-right {
  display: flex; align-items: center; gap: 20px;
  /* Whole pixels, and stated rather than inherited: Tailwind's preflight sets
     html { line-height: 1.5 } in this document and nothing overrides it, so
     every box in this row would otherwise be 21px instead of 18px – and
     align-items centres boxes, not glyphs, so unequal boxes put the balance and
     the user name on different lines. Same 18px as the rest of the header
     (ui-conventions.md §4). */
  line-height: 18px;
}
/* An ordinary link in the row, the same size and colour as the user name beside
   it. It used to be 600-weight, white and led by a green dot, which read as a
   system indicator; it is a link to the top-up page, so it now behaves like the
   other links up here – dim, white on hover. */
.nav-balance {
  font-size: 14px;
  color: var(--text-dim);
  transition: color .15s ease;
}
.nav-balance:hover { color: var(--text); }
/* Only the hook for hiding it below 1100px – everything the button looks like
   comes from .dropdown-trigger in styles.css. */
.nav-user { display: inline-flex; }
/* The user button is an inline-flex element inside the shared x-dropdown
   component's trigger div. A block wrapper puts it in a line box whose strut is
   taller than the 18px button and sits asymmetrically around it, so centring
   that wrapper left the name half a pixel below the balance. Flex on the
   trigger removes the line box.
   Only the trigger: the outer .relative must stay a block, because the dropdown
   panel is absolutely positioned inside it and a flex container would hand its
   static position to align-items, sending the panel to the top of the header. */
.nav-right > div > div:first-child { display: flex; align-items: center; }

/* Burger + mobile panel */
.nav-burger {
  display: none;
  /* 36, the height of a header button (§4). This is the tallest thing in the
     row between 1100px and 768px, where the nav links are already hidden – at
     38 the app header measured 74px against the landing's 72 in exactly that
     window. */
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--text-dim);
  transition: color .15s ease, border-color .15s ease;
}
.nav-burger:hover { color: var(--text); border-color: #4a5260; }
.nav-mobile {
  background: color-mix(in oklab, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 12px var(--pad-x) 20px;
}
.nav-mobile-link {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  font-size: 14px;
  color: var(--text-dim);
  transition: background .15s ease, color .15s ease;
}
.nav-mobile-link:hover { background: var(--bg-3); color: var(--text); }
.nav-mobile-link.active { color: var(--text); border-left-color: var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.nav-mobile-user { border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent); margin-top: 12px; padding: 14px 12px 6px; }
.nav-mobile-user .name { display: block; font-size: 14px; font-weight: 500; color: var(--text); }
.nav-mobile-user .email { display: block; font-size: 12.5px; color: var(--text-dimmer); margin-top: 2px; }
/* Sized by its neighbours in this panel (.name 14, .email 12.5), not by the
   desktop header. No mono and no green, for the same reason as .nav-balance
   above – otherwise the same figure changes typeface and colour depending on
   how wide the window is. */
.nav-mobile-user .balance { display: block; font-size: 13px; color: var(--text-dim); margin-top: 8px; }

/* ── Order detail ────────────────────────────────────────── */
.od-status-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.od-label { color: var(--text-dimmer); }
.od-note { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 20px 0 0; text-wrap: pretty; }
.od-note + .od-note { margin-top: 12px; }
.od-kv { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.od-kv > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.od-kv dt { color: var(--text-dimmer); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.od-kv dd { margin: 0; font-family: var(--mono); font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.od-divider { height: 1px; background: color-mix(in oklab, var(--line) 60%, transparent); margin: 24px 0; }
.od-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.url-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.url-list li {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
  font-family: var(--mono); font-size: 13.5px;
  align-items: center;
}
.url-list li:last-child { border-bottom: none; }
.url-list .n { color: var(--text-dimmer); }
.url-list a { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url-list a:hover { color: color-mix(in oklab, var(--accent) 80%, white); }

/* ── Top up ──────────────────────────────────────────────── */
.cur-balance { color: var(--text-dim); font-size: 15px; margin: 0 0 22px; }
.cur-balance b { color: var(--text); font-family: var(--mono); font-size: 15px; font-weight: 500; }
.amount-row { display: flex; gap: 12px; margin-bottom: 22px; }
.amount-opt {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 20px 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.02em;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.amount-opt:hover { border-color: #4a5260; }
.amount-opt.active {
  border-color: var(--accent);
  background: radial-gradient(200px 90px at 50% 0%, var(--accent-soft), transparent 70%), var(--bg-3);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

/* ── Referral ────────────────────────────────────────────── */
.ref-link-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.ref-link-input {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0 16px;
  display: flex; align-items: center;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Ticket thread ───────────────────────────────────────── */
.msg-list { display: flex; flex-direction: column; gap: 14px; }
.msg-row { display: flex; }
.msg-row.own { justify-content: flex-end; }
.msg-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.55;
}
.msg-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-row.own .msg-bubble {
  background: color-mix(in oklab, var(--accent) 8%, var(--bg-3));
  border-color: color-mix(in oklab, var(--accent) 25%, var(--line));
  color: var(--text);
}
.msg-meta { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dimmer); margin-bottom: 6px; white-space: normal; }

/* ── Pagination ──────────────────────────────────────────── */
.pager-wrap { margin-top: 8px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pager-link, .pager-current, .pager-gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
a.pager-link:hover { color: var(--text); border-color: var(--line-2); background: var(--bg-2); }
.pager-current { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, transparent); background: var(--accent-soft); }
.pager-gap, .pager-disabled { color: var(--text-dimmer); }
.pager-disabled { opacity: .5; }
.pager-info { text-align: center; margin-top: 10px; color: var(--text-dimmer); }

/* ── App footer social row ───────────────────────────────── */
/* Everything else about .foot-social comes free from the shared styles.css.
   Only the 20px top margin does not: it spaces the icons below the landing's
   brand column, whereas here they sit inside .foot-bottom, a centred flex row
   where the same margin pushes them off the line. */
.foot .foot-bottom .foot-social { margin-top: 0; }

/* ── App footer status dot ───────────────────────────────── */
.foot-status { color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; }
.foot-status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px color-mix(in oklab, var(--success) 50%, transparent);
}

/* ── Form section headings (profile etc.) ────────────────── */
.form-section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 4px;
}
.form-section-sub { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 0 0 24px; text-wrap: pretty; }

/* ── Payment status card ─────────────────────────────────── */
.status-card { max-width: 480px; margin: 32px auto 0; text-align: center; }
.status-ico {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.status-ico svg { width: 26px; height: 26px; }
.status-ico.success { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
.status-ico.error { background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); }
.status-ico.pending { background: color-mix(in oklab, var(--warn) 15%, transparent); color: var(--warn); }
.status-title { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; color: var(--text); margin: 0 0 10px; }
.status-sub { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; text-wrap: pretty; }

/* ── Guest (auth) shell ──────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  padding: 48px 24px;
  position: relative; z-index: 2;
}
.auth-card { width: 100%; max-width: 440px; }
.auth-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* ── Page header actions / Breeze modal skin ─────────────── */
.page-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.modal-wrap {
  position: fixed; inset: 0; z-index: 200;
  overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-panel {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85);
}
.modal-panel h2, .modal-panel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.modal-panel p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; }
.modal-panel b { color: var(--text); font-family: var(--mono); font-size: 13.5px; font-weight: 500; }

/* ── Progress bar motion (app only) ──────────────────────────
   Base .progress lives in the shared styles.css; only the app has a bar that
   moves on its own, so the motion stays here and the landing keeps its static
   one. The transition has to outlast the 1s tick, otherwise the bar arrives
   early and waits – which is exactly the stutter it is meant to hide. */
.progress > span { transition: width 1400ms cubic-bezier(0.25, 0.8, 0.35, 1); }
.progress.running > span { position: relative; overflow: hidden; }
.progress.running > span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, #fff 20%, transparent), transparent);
  transform: translateX(-100%);
  animation: progress-sheen 3.2s ease-in-out infinite;
}
@keyframes progress-sheen {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .progress > span { transition: none; }
  .progress.running > span::after { animation: none; content: none; }
}

/* ── App responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-burger { display: inline-flex; }
  /* The user menu moves into the mobile panel. The hiding hangs on .nav-user
     and not on the shared .dropdown-trigger: the landing dresses its language
     switch in that same class, and there it has to survive on tablets. */
  .nav-user { display: none; }
  .od-kv { grid-template-columns: repeat(2, 1fr); }
  .amount-row { flex-direction: column; }
  .ref-link-row { grid-template-columns: 1fr; }
  .msg-bubble { max-width: 100%; }
}