/* ============================================================
   Prelude Hub — VA QA Inbox (Slice ⑤a)
   The cockpit's twin in a quieter key: where the calling cockpit is
   lime / "on fire", the QA inbox is a clinical reading room — calm,
   precise, CYAN-forward (trust/verification). One lead at a time.
   Reuses tokens.css; adds only QA-scoped accents.
   ============================================================ */

/* [hidden] must always win — several shells set display:flex (an author rule
   that would otherwise beat the UA [hidden] style and leak through). */
[hidden] { display: none !important; }

.qa {
  /* verdict semantics — distinct colors build one-tap muscle memory */
  --qa-approve: var(--ph-lime);          /* ✅ good → send it */
  --qa-approve-rgb: var(--ph-lime-rgb);
  --qa-fix: #f2c14e;                      /* ✏️ correct, then approve */
  --qa-fix-rgb: 242,193,78;
  --qa-flag: #f2667e;                     /* 🚩 reject */
  --qa-flag-rgb: 242,102,126;
  --qa-accent: var(--ph-cyan);           /* the trust accent / linchpin */
  --qa-accent-rgb: var(--ph-cyan-rgb);

  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* a faint cyan wash from the top — the calm reading-room light */
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(var(--ph-cyan-rgb), .10), transparent 60%),
    var(--ph-canvas);
}

/* ---- header ---- */
.qa__header {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: clamp(14px, 3vw, 22px) clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(var(--ph-white-rgb), .06);
}
.qa__brand b { color: var(--ph-cyan); }            /* QA wears cyan, not lime */
.qa__status { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.qa__status .ph-dot { background: var(--qa-accent); box-shadow: 0 0 10px var(--qa-accent); }

/* ---- main stage ---- */
.qa__main {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(18px, 4vw, 48px);
  position: relative;
}
.qa__main :where(*) { min-width: 0; }

/* ---- login gate ---- */
.qa-login {
  width: 100%; max-width: 420px; text-align: center;
  padding: clamp(24px, 5vw, 40px);
}
.qa-login h1 {
  font-family: var(--ph-font-display); font-weight: 400;
  font-size: clamp(30px, 6vw, 44px); line-height: 1.05; margin-bottom: 10px;
}
.qa-login p { color: var(--ph-muted); font-size: 14px; margin-bottom: 22px; }
.qa-login__row { display: flex; gap: 10px; }
.qa-input {
  flex: 1; width: 100%;
  background: rgba(var(--ph-white-rgb), .05);
  border: 1px solid rgba(var(--ph-white-rgb), .12);
  border-radius: var(--ph-radius-sm);
  color: var(--ph-ink); font-family: var(--ph-font-mono); font-size: 14px;
  padding: 13px 14px;
}
.qa-input:focus-visible { border-color: var(--qa-accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--qa-accent-rgb), .25); }
.qa-login__err { color: var(--qa-flag); font-size: 12.5px; margin-top: 12px; min-height: 1em; }

/* the cyan "trust" action button (login enter + open-listing share its look) */
.qa-btn--accent {
  border: none; border-radius: var(--ph-radius-sm);
  background: var(--qa-accent); color: #0c0d14; font-weight: 800;
  padding: 13px 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 0 30px rgba(var(--qa-accent-rgb), .3);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .qa-btn--accent:hover { box-shadow: 0 0 46px rgba(var(--qa-accent-rgb), .5); transform: translateY(-1px); }
}

/* ---- the lead card ---- */
.qa-card {
  width: 100%; max-width: 720px;
  padding: clamp(22px, 4vw, 38px);
  border-radius: var(--ph-radius);
  background: rgba(var(--ph-white-rgb), .04);
  border: 1px solid rgba(var(--ph-white-rgb), .09);
}
.qa-card__kicker {
  font-family: var(--ph-font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--qa-accent); margin-bottom: 8px;
}
.qa-card__name {
  font-family: var(--ph-font-display); font-weight: 400;
  font-size: clamp(28px, 5vw, 40px); line-height: 1.05; margin-bottom: 20px;
}

/* robot fields — the machine output being audited */
.qa-robot { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.qa-robot__cell {
  background: rgba(var(--ph-white-rgb), .03);
  border: 1px solid rgba(var(--ph-white-rgb), .07);
  border-radius: var(--ph-radius-sm); padding: 12px 14px;
}
.qa-robot__cell--wide { grid-column: 1 / -1; }
.qa-robot__k { font-family: var(--ph-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--ph-faint); margin-bottom: 4px; }
.qa-robot__v { font-size: 15px; color: var(--ph-ink); overflow-wrap: anywhere; }
.qa-robot__v--none { color: var(--qa-fix); font-family: var(--ph-font-mono); font-size: 13px; }

/* the linchpin: confirm the Google listing */
.qa-linchpin { text-align: center; margin: 4px 0 24px; }
.qa-linchpin .qa-btn--accent { width: 100%; max-width: 360px; padding: 15px 20px; font-size: 15px; }
.qa-linchpin__ask { margin-top: 10px; font-size: 13px; color: var(--ph-muted); }

/* the 3 verdict keys */
.qa-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qa-verdict {
  border: 1.5px solid; border-radius: var(--ph-radius-sm);
  background: transparent; padding: 16px 10px; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-weight: 800; font-size: 15px; letter-spacing: .02em;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.qa-verdict small { font-family: var(--ph-font-mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; opacity: .7; }
.qa-verdict--approve { color: var(--qa-approve); border-color: rgba(var(--qa-approve-rgb), .5); }
.qa-verdict--fix     { color: var(--qa-fix);     border-color: rgba(var(--qa-fix-rgb), .5); }
.qa-verdict--flag    { color: var(--qa-flag);    border-color: rgba(var(--qa-flag-rgb), .5); }
@media (hover: hover) and (pointer: fine) {
  .qa-verdict--approve:hover { background: rgba(var(--qa-approve-rgb), .12); box-shadow: 0 0 28px rgba(var(--qa-approve-rgb), .25); }
  .qa-verdict--fix:hover     { background: rgba(var(--qa-fix-rgb), .12);     box-shadow: 0 0 28px rgba(var(--qa-fix-rgb), .25); }
  .qa-verdict--flag:hover    { background: rgba(var(--qa-flag-rgb), .12);    box-shadow: 0 0 28px rgba(var(--qa-flag-rgb), .25); }
}
.qa-verdict:active { transform: scale(.97); }

/* ---- fix panel ---- */
.qa-panel { margin-top: 22px; border-top: 1px solid rgba(var(--ph-white-rgb), .08); padding-top: 20px; }
.qa-panel[hidden] { display: none; }
.qa-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.qa-panel__title { font-family: var(--ph-font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ph-muted); }

.qa-fix__field { margin-bottom: 14px; }
.qa-fix__name { font-family: var(--ph-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--ph-faint); margin-bottom: 6px; text-transform: uppercase; }
.qa-fix__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.qa-fix__robot {
  font-size: 13px; color: var(--ph-muted);
  background: rgba(var(--ph-white-rgb), .03); border: 1px dashed rgba(var(--ph-white-rgb), .12);
  border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere;
}
.qa-fix__nowebsite { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--ph-muted); }
.qa-fix__note, .qa-flag__note {
  width: 100%; min-height: 56px; resize: vertical;
  background: rgba(var(--ph-white-rgb), .05); border: 1px solid rgba(var(--ph-white-rgb), .12);
  border-radius: var(--ph-radius-sm); color: var(--ph-ink);
  font-family: var(--ph-font-ui); font-size: 13.5px; padding: 10px 12px; margin-top: 4px;
}
.qa-fix__note:focus-visible, .qa-flag__note:focus-visible { border-color: var(--qa-accent); outline: none; }

.qa-panel__actions { display: flex; gap: 10px; margin-top: 16px; }
.qa-btn--save { background: var(--qa-approve); color: #13131c; }
.qa-btn--ghost {
  background: transparent; color: var(--ph-muted);
  border: 1px solid rgba(var(--ph-white-rgb), .14);
}
.qa-btn { border: none; border-radius: var(--ph-radius-sm); font-weight: 800; padding: 13px 18px; }

/* ---- flag panel ---- */
.qa-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-reason {
  border: 1px solid rgba(var(--qa-flag-rgb), .4); color: var(--qa-flag);
  background: rgba(var(--qa-flag-rgb), .06);
  border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .qa-reason:hover { background: rgba(var(--qa-flag-rgb), .16); } }
.qa-reason.is-picked { background: var(--qa-flag); color: #1a0a0e; }

/* ---- footer (progress + submit) ---- */
.qa__footer {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: clamp(14px, 3vw, 20px) clamp(16px, 4vw, 40px);
  border-top: 1px solid rgba(var(--ph-white-rgb), .06);
}
.qa-progress { flex: 1; min-width: 160px; }
.qa-progress__bar { height: 6px; border-radius: 999px; background: rgba(var(--ph-white-rgb), .08); overflow: hidden; }
.qa-progress__fill { height: 100%; width: 0%; background: var(--qa-accent); box-shadow: 0 0 14px rgba(var(--qa-accent-rgb), .5); transition: width .3s ease; }
.qa-progress__txt { font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-faint); margin-top: 6px; letter-spacing: .06em; }
.qa-submit { background: var(--qa-accent); color: #0c0d14; font-weight: 800; border: none; border-radius: var(--ph-radius-sm); padding: 14px 24px; }
.qa-submit:disabled { opacity: .4; cursor: not-allowed; }

/* ---- empty / summary states ---- */
.qa-state { text-align: center; max-width: 520px; }
.qa-state h2 { font-family: var(--ph-font-display); font-weight: 400; font-size: clamp(28px, 5vw, 42px); margin-bottom: 12px; }
.qa-state p { color: var(--ph-muted); margin-bottom: 22px; }
.qa-summary__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.qa-summary__cell { background: rgba(var(--ph-white-rgb), .04); border: 1px solid rgba(var(--ph-white-rgb), .09); border-radius: var(--ph-radius-sm); padding: 16px 8px; }
.qa-summary__n { font-family: var(--ph-font-display); font-size: 34px; line-height: 1; }
.qa-summary__l { font-family: var(--ph-font-mono); font-size: 10px; letter-spacing: .1em; color: var(--ph-faint); margin-top: 6px; }

/* the small "saved offline" flash */
.qa-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ph-chrome); border: 1px solid rgba(var(--qa-fix-rgb), .4);
  color: var(--qa-fix); border-radius: 999px; padding: 9px 16px;
  font-family: var(--ph-font-mono); font-size: 12px; z-index: 30;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.qa-toast.is-show { opacity: 1; }

/* ---- responsive ---- */
@media (max-width: 560px) {
  .qa-robot { grid-template-columns: 1fr; }
  .qa-verdicts { grid-template-columns: 1fr; }
  .qa-fix__cols { grid-template-columns: 1fr; }
  .qa-summary__grid { grid-template-columns: repeat(2, 1fr); }
}