/* ============================================================
   Inline-extracted styles for apps/tg/public/index.html
   (ITER4-CSP-tg): originally lived in <style> blocks in the
   HTML; pulled out so we can drop 'unsafe-inline' from CSP.
   Loaded via <link rel="stylesheet" href="/assets/inline-index.css">.
   ============================================================ */

/* Telegram Mini App header — slightly different chrome from LIFF */
.tg-header {
  flex-shrink: 0;
  height: 44px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  background: var(--bg-card);
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.tg-header .icon-btn {
  height: 44px;
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1;
}
.tg-header .title {
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.tg-header .title small {
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 4px;
}

/* Font-scale moved below TG header */
.screen-05b .font-scale { top: 104px; }

.screen-05b .hero {
  flex: 1; min-height: 0;
  padding: 14px 18px 96px;
  display: flex; flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.greeting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-right: 150px;     /* clear font-scale below header */
}
.greeting-row h1 {
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.status-pill:active { transform: translateY(2px); }
.status-pill .txt { white-space: nowrap; }
.status-pill .dot {
  width: 9px; height: 9px;
  border-radius: 9999px;
  background: var(--status-online);
  transition: background 0.15s ease;
}
.status-pill .dot.off { background: var(--text-tertiary, #999); }
.status-pill.off { color: var(--text-secondary); background: var(--bg-page, #FAFAFA); }
.status-pill.off .dot { background: var(--text-tertiary, #999); }

/* Section header */
.section-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Gig cards */
.gig-list { display: flex; flex-direction: column; gap: 10px; }
.gig-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  text-align: left;
  transition: transform 0.12s ease;
  /* ITER4-LM-perf: contain: layout style paint isolates each card so a
     skeleton→loaded swap or a single apply-state change doesn't trigger
     full-list reflow. Critical for the gig feed where 20-50 cards render
     simultaneously. */
  contain: layout style paint;
}
.gig-card:active { transform: translateY(2px); }
.gig-card .body { flex: 1; min-width: 0; }
.gig-card .head {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gig-card .head .time { color: var(--cta-bg); margin-right: 4px; }
.gig-card .meta {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gig-card .meta .price {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 15px;
  margin-right: 4px;
}
.gig-card .meta .sep { margin: 0 6px; opacity: 0.6; }
.gig-card .apply {
  font-size: 13px;
  color: var(--cta-bg);
  font-weight: 700;
  margin-top: 6px;
  display: inline-block;
  white-space: nowrap;
}
.gig-card .right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar {
  width: 44px; height: 44px;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.avatar.a1 { background: radial-gradient(at 30% 30%, #FFE4B0, transparent 60%), linear-gradient(135deg, #C9A961, #8BB4A0); }
.avatar.a2 { background: radial-gradient(at 60% 40%, #DFF0E3, transparent 70%), linear-gradient(135deg, #6BA08C, #2E7D32); }
.avatar.a3 { background: radial-gradient(at 20% 70%, #FFD9C9, transparent 60%), linear-gradient(135deg, #F9A825, #C9A961); }

.more-hint {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 15px;
  padding: 12px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.more-hint::before { content: '↓'; font-size: 16px; }

/* gig-card apply button (was a second inline <style> block inside body) */
.gig-card .apply-btn {
  margin-top: 8px; padding: 8px 16px; border-radius: 9999px; border: 0;
  background: var(--cta-bg); color: var(--cta-text, #fff); font-size: 14px; font-weight: 600; cursor: pointer;
}
.gig-card .apply-btn:disabled { opacity: 0.55; cursor: default; }

/* ITER4-L2-tg — Skeleton loading state for gig-list (3 placeholder cards
   while /api/gigs is in flight). Subtle gradient pulse @ 1.6s; the same
   pulse-on-fade rhythm as .status-pill .dot.pulse so the page feels alive
   but not noisy. Respects prefers-reduced-motion — falls back to a flat
   tint so users with vestibular sensitivity don't see motion. */
.gig-card.skeleton {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--hairline, #EEE);
  pointer-events: none;
}
.gig-card.skeleton .body { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.gig-card .sk-line {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.09) 50%,
    rgba(0,0,0,0.04) 100%
  );
  background-size: 200% 100%;
  animation: fj-sk-pulse 1.6s ease-in-out infinite;
}
.gig-card .sk-head { width: 60%; height: 17px; }
.gig-card .sk-meta { width: 40%; height: 13px; }
.gig-card .sk-btn  { width: 100px; height: 28px; border-radius: 9999px; margin-top: 4px; }

@keyframes fj-sk-pulse {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .gig-card .sk-line {
    animation: none;
    background: rgba(0,0,0,0.06);
  }
}

/* ITER4-L2-tg — Empty/error gig-card variant.
   Shown when /api/gigs returns 0 rows OR fetch fails. Honest copy +
   retry button — explicitly avoids "100% 有單" white promises. */
.gig-card.empty {
  background: var(--bg-card, #FFFFFF);
  border: 1px dashed var(--hairline, #DDD);
  min-height: auto;
  padding: 18px 16px;
}
.gig-card.empty .head {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-secondary, #555);
  white-space: normal;
}
.gig-card.empty .meta {
  font-size: 13.5px;
  color: var(--text-tertiary, #999);
  white-space: normal;
  margin-bottom: 4px;
}

/* Production overrides — hide design preview chrome */
.doc-head, .tier-label, .screen-wrap > .tier-label { display: none !important; }
body {
  padding: 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: var(--bg-page, #FAFAFA) !important;
  min-height: 100dvh !important;
  -webkit-font-smoothing: antialiased;
}