/* =========================================================================
   AdSense Readiness Checker — dashboard styles
   -------------------------------------------------------------------------
   Kept in its own file rather than added to style.css so the shared design
   system is not disturbed, and so this page can be removed cleanly.

   Direction-aware: everything uses logical properties (margin-inline,
   padding-inline, text-align: start) so the whole layout mirrors correctly
   when the document switches to RTL for Arabic. The [dir="rtl"] rules below
   only fix the handful of places where a physical property is unavoidable
   (gradient direction, a progress bar that fills from the left).
   ========================================================================= */

.ars-page { --ars-max: 1000px; }

.ars-langbar { display: flex; justify-content: flex-end; margin: 14px 0 0; }
.ars-langbtn {
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--white, #fff);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit; font-size: .875rem; color: var(--navy, #0B1220);
  cursor: pointer; min-height: 40px;
}
.ars-langbtn:hover { border-color: var(--blue-600, #2563EB); color: var(--blue-600, #2563EB); }
.ars-langbtn:focus-visible { outline: 2px solid var(--blue-600, #2563EB); outline-offset: 2px; }
.ars-langbtn[aria-pressed="true"] { background: var(--blue-600, #2563EB); border-color: var(--blue-600, #2563EB); color: #fff; }

/* --- Progress ----------------------------------------------------------- */
.ars-progress { margin-top: 18px; }
.ars-progress[hidden] { display: none; }
.ars-bar {
  height: 8px; border-radius: 999px; background: var(--g100, #F1F5F9);
  overflow: hidden; margin: 10px 0 8px;
}
.ars-bar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue-600, #2563EB), var(--cyan, #06B6D4));
  border-radius: 999px; transition: width .35s ease;
}
[dir="rtl"] .ars-bar > i { margin-inline-start: auto; }
.ars-progress-text { font-size: .875rem; color: var(--muted, #5A6B7D); }
.ars-spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -3px;
  border: 2px solid var(--border, #E2E8F0); border-top-color: var(--blue-600, #2563EB);
  border-radius: 50%; animation: ars-spin .8s linear infinite; margin-inline-end: 8px;
}
@keyframes ars-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ars-spinner { animation-duration: 2.4s; } .ars-bar > i { transition: none; } }

/* --- Error notice ------------------------------------------------------- */
.ars-error {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid #FECACA; background: #FEF2F2; color: #991B1B;
}
.ars-error[hidden] { display: none; }
.ars-error strong { display: block; margin-bottom: 4px; }

/* --- Report shell ------------------------------------------------------- */
.ars-report { margin-top: 26px; }
.ars-report[hidden] { display: none; }

.ars-summary {
  display: grid; gap: 22px; padding: 26px;
  border: 1px solid var(--border, #E2E8F0); border-radius: 18px;
  background: var(--white, #fff);
}
@media (min-width: 760px) { .ars-summary { grid-template-columns: 220px 1fr; align-items: start; } }

.ars-score { text-align: center; }
.ars-score-ring {
  position: relative;
  width: 150px; height: 150px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-content: center; gap: 2px;
  background: conic-gradient(var(--blue-600, #2563EB) calc(var(--pct) * 1%), var(--g100, #F1F5F9) 0);
}
/* A white disc behind the number. Without it the number straddles the edge
   between the filled and unfilled parts of the ring, and no single text
   colour stays readable at every score. */
.ars-score-ring::before {
  content: '';
  position: absolute;
  inset: 13px;
  background: var(--white, #fff);
  border-radius: 50%;
}
.ars-score-ring > b {
  position: relative;
  display: block; font-size: 2.4rem; line-height: 1;
  color: var(--navy, #0B1220);
}
.ars-score-ring > span {
  position: relative;
  font-size: .8rem; color: var(--muted, #5A6B7D);
}
.ars-score-cap { font-size: .8rem; color: var(--muted, #5A6B7D); margin: 0; }
.ars-score-label { font-weight: 600; font-size: .95rem; margin: 0 0 4px; color: var(--navy, #0B1220); }

.ars-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .85rem; color: var(--muted, #5A6B7D); margin: 0 0 14px; }
.ars-meta b { color: var(--navy, #0B1220); font-weight: 600; }

.ars-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.ars-counts button {
  font: inherit; font-size: .8rem; cursor: pointer;
  border: 1px solid var(--border, #E2E8F0); background: var(--white, #fff);
  border-radius: 999px; padding: 6px 13px; color: var(--navy, #0B1220);
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
}
.ars-counts button:hover { border-color: var(--blue-600, #2563EB); }
.ars-counts button[aria-pressed="true"] { background: var(--navy, #0B1220); border-color: var(--navy, #0B1220); color: #fff; }
.ars-counts .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ars-counts .n { font-variant-numeric: tabular-nums; font-weight: 600; }

.c-pass   .dot, .dot.pass   { background: #16A34A; }
.c-warn   .dot, .dot.warn   { background: #D97706; }
.c-fail   .dot, .dot.fail   { background: #DC2626; }
.c-manual .dot, .dot.manual_review { background: #7C3AED; }
.c-nt     .dot, .dot.not_tested    { background: #64748B; }
.c-inc    .dot, .dot.inconclusive { background: #0891B2; }

/* --- Category bars ------------------------------------------------------ */
.ars-cats { display: grid; gap: 12px; margin: 0; padding: 0; }
.ars-cat { display: grid; gap: 5px; }
.ars-cat-top { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; }
.ars-cat-top b { font-weight: 600; color: var(--navy, #0B1220); }
/* Scores are numbers: keep them in reading order even inside an RTL document,
   where "25.5 / 30" would otherwise appear as "30 / 25.5". */
.ars-cat-top span {
  color: var(--muted, #5A6B7D); font-variant-numeric: tabular-nums; white-space: nowrap;
  direction: ltr; unicode-bidi: isolate;
}
.ars-cat-track { height: 7px; border-radius: 999px; background: var(--g100, #F1F5F9); overflow: hidden; }
.ars-cat-track > i { display: block; height: 100%; width: 0; background: var(--blue-600, #2563EB); border-radius: 999px; }
.ars-cat-track > i.warn { background: #D97706; }
.ars-cat-track > i.fail { background: #DC2626; }
.ars-cat-track > i.full { background: #16A34A; }

/* --- Disclaimer --------------------------------------------------------- */
.ars-disclaimer {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; font-size: .875rem;
}

/* --- Toolbar ------------------------------------------------------------ */
.ars-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 26px 0 16px; padding: 16px;
  border: 1px solid var(--border, #E2E8F0); border-radius: 14px; background: var(--white, #fff);
  position: sticky; top: 0; z-index: 20;
}
.ars-toolbar label { font-size: .8rem; color: var(--muted, #5A6B7D); display: block; margin-bottom: 3px; }
.ars-toolbar .grow { flex: 1 1 200px; min-width: 160px; }
.ars-toolbar select, .ars-toolbar input {
  width: 100%; font: inherit; font-size: .9rem; padding: 9px 11px; min-height: 40px;
  border: 1px solid var(--border, #E2E8F0); border-radius: 10px; background: var(--white, #fff); color: var(--navy, #0B1220);
}
.ars-toolbar select:focus, .ars-toolbar input:focus { outline: 2px solid var(--blue-600, #2563EB); outline-offset: 1px; border-color: var(--blue-600, #2563EB); }
.ars-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.ars-btn {
  font: inherit; font-size: .85rem; cursor: pointer; min-height: 40px;
  padding: 9px 15px; border-radius: 10px;
  border: 1px solid var(--border, #E2E8F0); background: var(--white, #fff); color: var(--navy, #0B1220);
  display: inline-flex; align-items: center; gap: 7px;
}
.ars-btn:hover { border-color: var(--blue-600, #2563EB); color: var(--blue-600, #2563EB); }
.ars-btn:focus-visible { outline: 2px solid var(--blue-600, #2563EB); outline-offset: 2px; }
.ars-btn.primary { background: var(--blue-600, #2563EB); border-color: var(--blue-600, #2563EB); color: #fff; }
.ars-btn.primary:hover { background: #1D4ED8; border-color: #1D4ED8; color: #fff; }

/* --- Issue cards -------------------------------------------------------- */
.ars-issues { display: grid; gap: 14px; margin: 0; padding: 0; }

.ars-issue {
  border: 1px solid var(--border, #E2E8F0); border-radius: 14px; background: var(--white, #fff);
  overflow: hidden;
}
.ars-issue.sev-critical { border-inline-start: 4px solid #DC2626; }
.ars-issue.sev-high     { border-inline-start: 4px solid #EA580C; }
.ars-issue.sev-medium   { border-inline-start: 4px solid #D97706; }
.ars-issue.sev-low      { border-inline-start: 4px solid #64748B; }
.ars-issue.sev-info     { border-inline-start: 4px solid #7C3AED; }

.ars-issue-head {
  width: 100%; font: inherit; text-align: start; cursor: pointer;
  padding: 15px 18px; background: none; border: 0; color: inherit;
  display: grid; gap: 8px;
}
.ars-issue-head:hover { background: var(--g50, #F8FAFC); }
.ars-issue-head:focus-visible { outline: 2px solid var(--blue-600, #2563EB); outline-offset: -2px; }
.ars-issue-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-weight: 600; font-size: 1rem; color: var(--navy, #0B1220); }
.ars-issue-chevron { margin-inline-start: auto; transition: transform .2s ease; color: var(--muted, #5A6B7D); }
.ars-issue[open] .ars-issue-chevron, .ars-issue.is-open .ars-issue-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ars-issue-chevron { transition: none; } }

.ars-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ars-tag {
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  border-radius: 999px; padding: 3px 10px; border: 1px solid;
  white-space: nowrap;
}
.ars-tag.outcome-pass          { color: #166534; border-color: #BBF7D0; background: #F0FDF4; }
.ars-tag.outcome-warn          { color: #92400E; border-color: #FDE68A; background: #FFFBEB; }
.ars-tag.outcome-fail          { color: #991B1B; border-color: #FECACA; background: #FEF2F2; }
.ars-tag.outcome-not_tested    { color: #334155; border-color: #CBD5E1; background: #F8FAFC; }
.ars-tag.outcome-inconclusive  { color: #155E75; border-color: #A5F3FC; background: #ECFEFF; }
.ars-tag.outcome-manual_review { color: #5B21B6; border-color: #DDD6FE; background: #F5F3FF; }
.ars-tag.meta { color: var(--muted, #5A6B7D); border-color: var(--border, #E2E8F0); background: var(--white, #fff); font-weight: 500; }
.ars-tag.deduct { color: #991B1B; border-color: #FECACA; background: #FEF2F2; }
.ars-tag.nodeduct { color: #166534; border-color: #BBF7D0; background: #F0FDF4; }

.ars-issue-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; color: var(--blue-700, #1D4ED8); word-break: break-all;
  /* URLs and check ids stay left-to-right even in an Arabic document. */
  direction: ltr; unicode-bidi: embed; text-align: start;
}

.ars-issue-body { padding: 0 18px 18px; display: grid; gap: 16px; }
.ars-issue-body[hidden] { display: none; }
.ars-field { display: grid; gap: 5px; }
.ars-field > h4 { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #5A6B7D); font-weight: 700; }
.ars-field p { margin: 0; font-size: .9rem; line-height: 1.6; color: #1E293B; }
.ars-field pre {
  margin: 0; padding: 11px 13px; border-radius: 9px; overflow-x: auto;
  background: var(--g50, #F8FAFC); border: 1px solid var(--border, #E2E8F0);
  font-size: .8rem; line-height: 1.55; color: #0F172A; white-space: pre-wrap; word-break: break-word;
  direction: ltr; text-align: start;
}
.ars-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.6; color: #1E293B; }
[dir="rtl"] .ars-steps { padding-inline-start: 0; padding-inline-end: 20px; }

/* --- Pages table -------------------------------------------------------- */
.ars-tablewrap { overflow-x: auto; border: 1px solid var(--border, #E2E8F0); border-radius: 12px; background: var(--white, #fff); }
.ars-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ars-table th, .ars-table td { padding: 10px 13px; text-align: start; border-bottom: 1px solid var(--border, #E2E8F0); vertical-align: top; }
.ars-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #5A6B7D); font-weight: 700; background: var(--g50, #F8FAFC); white-space: nowrap; }
.ars-table tr:last-child td { border-bottom: 0; }
.ars-table td.url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; word-break: break-all; direction: ltr; text-align: start; }
.ars-status { font-variant-numeric: tabular-nums; font-weight: 600; }
.ars-status.ok { color: #166534; }
.ars-status.warn { color: #92400E; }
.ars-status.bad { color: #991B1B; }

/* --- Panels (methodology / sources / limitations) ------------------------ */
.ars-panels { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 820px) { .ars-panels { grid-template-columns: 1fr 1fr; } }
.ars-panel { border: 1px solid var(--border, #E2E8F0); border-radius: 14px; background: var(--white, #fff); padding: 20px; }
.ars-panel h3 { margin: 0 0 12px; font-size: 1.02rem; color: var(--navy, #0B1220); }
.ars-panel ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; font-size: .875rem; line-height: 1.6; color: #1E293B; }
[dir="rtl"] .ars-panel ul { padding-inline-start: 0; padding-inline-end: 20px; }
.ars-panel a { word-break: break-word; }

/* --- Empty / loading states -------------------------------------------- */
.ars-empty { padding: 30px; text-align: center; color: var(--muted, #5A6B7D); font-size: .9rem; }
.ars-skeleton { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #F1F5F9, #E2E8F0, #F1F5F9); background-size: 200% 100%; animation: ars-shimmer 1.2s linear infinite; }
@keyframes ars-shimmer { to { background-position: -200% 0; } }

/* --- Print / PDF -------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .ars-toolbar, .ars-langbar, .breadcrumb,
  .ars-actions, .ars-counts button[aria-pressed], .bottom-nav, .install-chip,
  .ars-skip, #arsFormCard { display: none !important; }

  body { background: #fff !important; }
  main.container { padding: 0 !important; max-width: none !important; }

  .ars-summary, .ars-issue, .ars-panel, .ars-tablewrap, .ars-disclaimer {
    box-shadow: none !important; break-inside: avoid; page-break-inside: avoid;
  }
  .ars-issue-body[hidden] { display: grid !important; }   /* print everything expanded */
  .ars-issue { break-inside: avoid; }
  .ars-issue + .ars-issue { break-before: auto; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; color: #555; word-break: break-all; }
  .ars-url::after, .ars-issue-url::after, .ars-table td.url a::after { content: ""; }

  .ars-page-title { font-size: 1.4rem; }
}