/* LinkedIn profile review (/linkedin-profile-review).
   The widget and result card reuse the public ATS check's .atsc-* styles from
   public.css; this file adds the review-only blocks. Tokens only — no raw
   colours, so dark mode follows public.css. */

/* ─── What we check ────────────────────────────────────────────────────────── */

.lir-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 30px;
  text-align: left;
}

.lir-check-card {
  padding: 21px;
  border: 1px solid var(--mk-line);
  border-radius: 6px;
  background: var(--color-bg-surface);
}

.lir-check-card h3 { margin: 0 0 9px; font-size: 15.75px; }
.lir-check-card p { margin: 0; color: var(--mk-muted); font-size: 13.5px; line-height: 1.45; }

/* ─── Manual checklist (page section + result) ─────────────────────────────── */

.lir-manual {
  display: grid;
  gap: 9px;
  max-width: 540px;
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.lir-manual li { display: flex; gap: 10.5px; align-items: flex-start; font-size: 13.5px; color: var(--mk-muted); }

.lir-disclaimer { margin: 24px 0 0; color: var(--mk-soft); font-size: 12px; }

.lir-role-input { min-height: 0; resize: none; }

/* ─── Result ───────────────────────────────────────────────────────────────── */

.lir-copy-row { display: flex; justify-content: center; margin: 0 0 15px; }

.lir-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13.5px;
  border: 1px solid var(--mk-line);
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--mk-ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.lir-copy-btn:hover { background: var(--color-neutral-bg); }

/* data-lir-copy-text is never unhidden — it only holds the plain-text
   serialisation the copy button reads via .textContent. */
.lir-copy-text { display: none; }

.lir-filtered-note { margin: 0; color: var(--mk-muted); font-size: 12px; line-height: 1.45; }

.lir-sections { display: grid; gap: 12px; margin-top: 16.5px; }
.lir-feedback { margin: 4.5px 0 0; color: var(--mk-muted); font-size: 12px; line-height: 1.45; }

.lir-block {
  margin-top: 19.5px;
  padding-top: 16.5px;
  border-top: 1px solid var(--mk-line);
}

.lir-block h4 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16.5px;
  color: var(--mk-ink);
}

.lir-block-sub { margin: 9px 0 6px; color: var(--mk-soft); font-size: 12px; }

.lir-chips { display: flex; flex-wrap: wrap; gap: 6.75px; }

.lir-issues { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lir-issue strong { display: block; margin-top: 4.5px; font-size: 13.5px; color: var(--mk-ink); }
.lir-issue p { margin: 3px 0 0; color: var(--mk-muted); font-size: 12px; line-height: 1.45; }
.lir-issue-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lir-issue-section { color: var(--mk-soft); font-size: 12px; }

.lir-sev {
  display: inline-flex;
  padding: 1.5px 7.5px;
  border-radius: 749.25px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}

.lir-sev-high { color: var(--mk-red); background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.lir-sev-medium { color: var(--mk-orange); background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.lir-sev-low { color: var(--mk-muted); background: var(--color-neutral-bg); border-color: var(--color-neutral-border); }

.lir-headlines { display: grid; gap: 7.5px; margin: 0; padding: 0; list-style: none; }

.lir-headlines li,
.lir-rewrite-before,
.lir-rewrite-after {
  padding: 9px 10.5px;
  border: 1px solid var(--mk-line);
  border-radius: 4.5px;
  background: var(--color-neutral-bg);
  color: var(--mk-ink);
  font-size: 12.75px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lir-rewrite { display: grid; gap: 6px; margin-top: 9px; }
.lir-rewrite-before { margin: 0; color: var(--mk-muted); }
.lir-rewrite-after { margin: 0; background: var(--color-success-bg); border-color: var(--color-success-border); }

.lir-rewrite-before span,
.lir-rewrite-after span {
  display: block;
  margin-bottom: 3px;
  color: var(--mk-soft);
  font-size: 12px;
  font-weight: 700;
}

.lir-block .lir-manual { margin: 0; max-width: none; }
.lir-block .lir-manual li { font-size: 12px; }

.lir-next {
  margin-top: 21px;
  padding: 16.5px;
  border: 1px solid var(--color-brand-mid);
  border-radius: 6px;
  background: var(--color-brand-light);
  text-align: center;
}

.lir-next h4 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 16.5px; }
.lir-next p { margin: 0 0 12px; color: var(--mk-muted); font-size: 12px; }
.lir-next-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }

/* ─── Analyzing state ──────────────────────────────────────────────────────── */
/* :not([hidden]) keeps this from overriding the [hidden] attribute's
   display:none while the submit button is idle — the span only gets this
   layout once its own hidden attribute is removed. */
[data-lir-analyzing]:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 7.5px;
}

[data-lir-analyzing]:not([hidden])::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .6;
  animation: lir-spin 700ms linear infinite;
}

@keyframes lir-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-lir-analyzing]:not([hidden])::before { animation: none; }
}

@media (max-width: 1100px) {
  .lir-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .lir-checks { grid-template-columns: 1fr; }
  .lir-next-actions .mk-btn { width: 100%; }
}