@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700;800&family=Mulish:wght@400;500;600;700;800&display=swap");

* { box-sizing: border-box; }

:root {
  --ink: #16273F;
  --body: #33404F;
  --muted: #8791A0;
  --muted2: #5B6675;
  --muted3: #98A2B0;
  --ink-soft: #5F6A79;
  --card-border: #EAEDF3;
  --panel-border: #E7EBF1;
  --red: #E8402A;
  /* Links on the grey page background, not on a white card: 14px #2F6FE0 measures 4.31:1 there,
     under the 4.5:1 floor, so this app uses the darker paired ink — the same swap as
     #98A2B0 → #5F6A79 elsewhere in the suite. */
  --link-on-grey: #1E56C0;
}

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: "Mulish", system-ui, sans-serif;
  color: var(--body);
  background: linear-gradient(180deg, #F5F3FB 0%, #F1F6F6 100%);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
body.auth-pending .app-shell { display: none; }

.app-shell .rm-header-inner,
.app-shell .rm-footer-inner { max-width: 90%; }

@keyframes seoFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ------------------------------- Hero ------------------------------- */
.seo-hero-inner { max-width: 90%; margin: 0 auto; padding: 34px 32px 26px; }
.seo-title {
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 38px;
  line-height: 1.05; letter-spacing: -0.5px; color: var(--ink); margin: 0 0 6px;
}
.seo-url { font-size: 15.5px; color: var(--link-on-grey); font-weight: 600; text-decoration: none; }
.seo-url:hover { text-decoration: underline; }
.seo-url[hidden] { display: none; }

/* ------------------------------- Tabs ------------------------------- */
.seo-tabs {
  background: #fff;
  border-top: 1px solid #EFF2F7;
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 1px 2px rgba(18, 38, 63, 0.03);
}
.seo-tabs[hidden] { display: none; }
.seo-tabs-inner { max-width: 90%; margin: 0 auto; padding: 0 32px; display: flex; gap: 30px; flex-wrap: wrap; }
.seo-tab {
  appearance: none; background: none; border: none;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 16px;
  color: var(--ink-soft); padding: 16px 2px; border-bottom: 3px solid transparent;
}
.seo-tab.active { font-weight: 700; color: var(--ink); border-bottom-color: var(--red); }
.seo-tab:hover { color: var(--ink); }

/* ------------------------------- Main ------------------------------- */
.seo-main { flex: 1; max-width: 90%; width: 100%; margin: 0 auto; padding: 26px 32px 56px; }
.seo-view { animation: seoFadeUp 0.32s ease both; }
.seo-view[hidden], #seoGate[hidden] { display: none; }

.seo-notice {
  background: #fff; border: 1px solid var(--card-border); border-radius: 18px;
  box-shadow: 0 4px 16px rgba(18, 38, 63, 0.05); padding: 56px 20px; text-align: center;
  color: var(--muted); font-size: 15px; line-height: 1.6;
}
.seo-notice strong { display: block; margin-bottom: 6px; font-size: 17px; color: var(--ink); }
.seo-notice a { color: var(--red); font-weight: 700; }

/* ------------------------------- Cards ------------------------------- */
.seo-card {
  background: #fff; border: 1px solid var(--card-border); border-radius: 18px;
  box-shadow: 0 4px 16px rgba(18, 38, 63, 0.05); overflow: hidden;
}
.seo-card.pad { padding: 24px; }
.seo-card-head { padding: 20px 22px 16px; }
.seo-card-title { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 4px; }
.seo-card-note { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.seo-card-note.pad-below { margin-bottom: 18px; }
.seo-empty { padding: 44px 22px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }
.seo-empty strong { display: block; font-family: "Lexend", sans-serif; font-size: 16px; color: var(--ink); margin-bottom: 5px; }

/* ------------------------------- Pills ------------------------------- */
.seo-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 11.5px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.seo-pill.caps { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; background: #fff; }
.seo-pill.critical { color: #C0392B; background: #FCECEC; border: 1px solid #F5D5D5; }
.seo-pill.warning { color: #95530D; background: #FCF3E8; border: 1px solid #F1E2C8; }
.seo-pill.notice { color: #5B6675; background: #F1F4FA; border: 1px solid #E4E9F1; }
.seo-pill.pass { color: #14795A; background: #E7F7F1; border: 1px solid #CDEDE1; }
.seo-pill.partial { color: #95530D; background: #FCF3E8; border: 1px solid #F1E2C8; }
.seo-pill.bad { color: #C0392B; background: #FCECEC; border: 1px solid #F5D5D5; }
.seo-pill.count { color: #33404F; background: #F1F4FA; border: 1px solid #E4E9F1; }

.seo-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.seo-dot.critical { background: #D14545; }
.seo-dot.warning { background: #E0A21E; }
.seo-dot.notice { background: #98A2B0; }

/* ------------------------------- Summary ------------------------------- */
.seo-summary { display: flex; flex-direction: column; gap: 20px; }
.seo-sum-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: center; }
.seo-intro { font-size: 16px; color: #43525F; line-height: 1.55; margin: 0; }

.seo-verdict {
  display: flex; align-items: center; gap: 16px;
  background: #FBFCFE; border: 1px solid #EFF2F7; border-radius: 16px; padding: 18px 20px;
}
.seo-ring {
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; padding: 3px;
  display: flex; align-items: center; justify-content: center;
}
.seo-ring.sm { width: 56px; height: 56px; }
.seo-ring-inner {
  width: 100%; height: 100%; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Lexend", sans-serif; font-weight: 800; font-size: 19px;
}
.seo-ring.sm .seo-ring-inner { font-size: 17px; }
.seo-verdict-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.seo-verdict-title { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.25; }
.seo-verdict-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

/* Tiles — each navigates into Pages with its filter applied. */
.seo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.seo-tile {
  display: block; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--card-border); border-radius: 16px;
  padding: 19px 21px; box-shadow: 0 2px 10px rgba(18, 38, 63, 0.04);
}
.seo-tile:hover { border-color: #C9D3E0; }
.seo-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.seo-tile-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.seo-tile-label { font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.seo-tile-value { display: block; font-family: "Lexend", sans-serif; font-weight: 800; font-size: 29px; line-height: 1; }
.seo-tile-note { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.seo-tile-value.info { color: #1E56C0; }  .seo-tile-icon.info { background: #EAF1FC; color: #1E56C0; }
.seo-tile-value.ok { color: #14795A; }    .seo-tile-icon.ok { background: #E7F7F1; color: #14795A; }
.seo-tile-value.warn { color: #95530D; }  .seo-tile-icon.warn { background: #FCF3E8; color: #95530D; }
.seo-tile-value.bad { color: #C0392B; }   .seo-tile-icon.bad { background: #FCECEC; color: #C0392B; }

.seo-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }

/* Fix these first */
.seo-fix-row {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 22px; border: none; border-top: 1px solid #F4F6FA; background: #fff; text-align: left;
}
.seo-fix-row:hover { background: #F7F9FC; }
.seo-fix-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.seo-fix-title { font-family: "Lexend", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-fix-scope { font-size: 12px; color: var(--ink-soft); }

/* Category bars */
.seo-bars { display: flex; flex-direction: column; gap: 13px; }
.seo-bar-row { display: flex; align-items: center; gap: 12px; }
.seo-bar-name { flex: 1 1 150px; min-width: 90px; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-track { flex: 1 1 70px; min-width: 44px; height: 9px; border-radius: 999px; background: #EDF0F5; overflow: hidden; }
.seo-fill { display: block; height: 100%; border-radius: 999px; }
.seo-bar-value { flex: 0 0 42px; text-align: right; font-family: "Lexend", sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); }

/* Site-wide checks */
.seo-site-row { display: flex; align-items: flex-start; gap: 13px; padding: 15px 22px; border-top: 1px solid #F4F6FA; }
.seo-site-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.seo-site-icon.ok { background: #E7F7F1; color: #14795A; }
.seo-site-icon.warn { background: #FCF3E8; color: #95530D; }
.seo-site-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.seo-site-name { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.seo-site-detail { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* The fix, in green — the actionable half of any finding. */
.seo-fix-line { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: #14795A; line-height: 1.5; }
.seo-fix-line svg { flex: 0 0 auto; margin-top: 3px; }

/* ------------------------------- Pages toolbar ------------------------------- */
.seo-toolbar {
  background: #fff; border: 1px solid var(--card-border); border-radius: 18px;
  box-shadow: 0 4px 16px rgba(18, 38, 63, 0.05); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px;
}
.seo-toolbar-top { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.seo-toolbar-label {
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
}
.seo-search {
  flex: 1; min-width: 230px; display: flex; align-items: center; gap: 9px;
  background: #F7F9FC; border: 1.5px solid #E4E9F1; border-radius: 12px; padding: 10px 14px;
}
.seo-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 14.5px; color: var(--ink); }
.seo-sort { display: flex; flex-direction: column; gap: 5px; }
.seo-sort select {
  min-width: 190px; background: #fff; border: 1.5px solid #E4E9F1; border-radius: 11px;
  padding: 9px 12px; font-family: "Lexend", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink);
}
.seo-toolbar-bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid #EFF2F7; }
.seo-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.seo-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #E4E9F1; border-radius: 999px; padding: 8px 14px;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13px; color: var(--muted2);
}
.seo-chip.sm { padding: 7px 13px; font-size: 12.5px; }
.seo-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.seo-chip-count { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 11px; color: var(--ink-soft); }
.seo-chip.active .seo-chip-count { color: rgba(255, 255, 255, 0.75); }
.seo-active-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #EAF1FC; border: 1px solid #D6E4FB; border-radius: 999px; padding: 7px 8px 7px 13px;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 12.5px; color: #1E56C0;
}
.seo-active-chip button { background: none; border: none; color: inherit; font-size: 13px; line-height: 1; padding: 2px 4px; }
.seo-clear { background: none; border: none; font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13px; color: var(--ink-soft); padding: 8px 6px; }
.seo-clear:hover { color: #C0392B; }

/* ------------------------------- Pages table ------------------------------- */
.seo-table {
  background: #fff; border: 1px solid var(--card-border); border-radius: 18px;
  box-shadow: 0 4px 16px rgba(18, 38, 63, 0.05); overflow: hidden;
}
/* Pure `fr`, matching the Content Pages table. NO minmax() floors: floors totalling 800px plus
   80px of gaps against a measured 816px card pinned every track at its floor, left the fr units
   with no surplus to divide, and pushed the View button outside the card. Proportional tracks
   cannot overflow at any width. If a column is added, keep them proportional. */
.seo-row {
  display: grid;
  grid-template-columns: 2.2fr 0.6fr 1.5fr 0.7fr 1.1fr 0.9fr;
  gap: 16px;
  align-items: center;
  padding: 18px 26px;
}
.seo-head { padding: 16px 26px; background: #F4F6FA; border-bottom: 1px solid var(--card-border); }
.seo-th { font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13.5px; color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-th.right { text-align: right; }
.seo-body-row { border-bottom: 1px solid #F1F4F8; }
.seo-body-row:last-child { border-bottom: none; }
.seo-body-row:hover { background: #FBFCFE; }

/* min-width: 0 lets these three ellipsise. It must NOT go on the actions cell — that track's
   content-based auto minimum is what keeps the View button inside its column. */
.seo-cell-page, .seo-cell-issues, .seo-cell-scanned { min-width: 0; }
.seo-row-title { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-row-url { font-size: 13px; color: var(--ink-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-row-score { font-family: "Lexend", sans-serif; font-weight: 800; font-size: 18px; }
.seo-cell-issues { display: flex; gap: 6px; flex-wrap: wrap; }
.seo-row-status { font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.seo-pill.status { justify-self: start; }
.seo-cell-scanned { font-size: 13.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-cell-actions { text-align: right; }
.seo-view-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--ink); color: var(--ink);
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13.5px;
  padding: 9px 16px; border-radius: 10px;
}
.seo-view-btn:hover { background: var(--ink); color: #fff; }
.seo-count-line { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; margin: 16px 0 0; }

/* ------------------------------- Page detail ------------------------------- */
.seo-detail { display: flex; flex-direction: column; gap: 20px; }
.seo-back {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink-soft);
}
.seo-back:hover { color: var(--ink); }
.seo-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.seo-detail-id { min-width: 0; flex: 1; }
.seo-detail-title { font-family: "Lexend", sans-serif; font-weight: 800; font-size: 26px; line-height: 1.15; color: var(--ink); margin: 0 0 5px; }
.seo-detail-url { font-size: 14px; color: var(--link-on-grey); text-decoration: none; overflow-wrap: anywhere; }
.seo-detail-url:hover { text-decoration: underline; }
.seo-score-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 16px;
  padding: 16px 20px; box-shadow: 0 2px 10px rgba(18, 38, 63, 0.04);
}

.seo-facts-label {
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px;
}
.seo-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.seo-fact {
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 11.5px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.seo-fact.ok { color: #14795A; background: #E7F7F1; border: 1px solid #CDEDE1; }
.seo-fact.bad { color: #95530D; background: #FCF3E8; border: 1px solid #F1E2C8; }
.seo-fact.neutral { color: #5B6675; background: #F1F4FA; border: 1px solid #E4E9F1; }
/* Same red as the table's status pill: a crawl failure is one finding, not two shades of it. */
.seo-fact.error { color: #C0392B; background: #FCECEC; border: 1px solid #F5D5D5; }

.seo-issues-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #EFF2F7; flex-wrap: wrap; }
.seo-issues-head .seo-card-title { margin: 0; font-size: 17px; }
.seo-issues { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 11px; }
.seo-issue { display: flex; align-items: flex-start; gap: 13px; border-radius: 14px; padding: 14px 16px; }
.seo-issue.critical { background: #FCECEC; border: 1px solid #F5D5D5; }
.seo-issue.warning { background: #FCF3E8; border: 1px solid #F1E2C8; }
.seo-issue.notice { background: #FBFCFE; border: 1px solid #EFF2F7; }
.seo-issue-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.seo-issue-title { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.seo-issue-code {
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); margin-left: 9px;
}
.seo-issue-detail { font-size: 13.5px; color: #43525F; line-height: 1.5; }
.seo-issue-value {
  align-self: flex-start; background: #F1F4FA; border: 1px solid #E4E9F1; border-radius: 6px;
  padding: 2px 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--body);
  overflow-wrap: anywhere;
}
.seo-issues-foot {
  display: flex; align-items: center; gap: 9px; padding: 14px 22px;
  border-top: 1px solid #F4F6FA; background: #FBFCFE;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 13px; color: #14795A;
}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 1100px) {
  /* Below this the six proportional tracks are too narrow to read, so the row becomes two rows
     of three rather than shrinking every cell past legibility. */
  .seo-row { grid-template-columns: 2.2fr 0.7fr 1.2fr; row-gap: 12px; }
  .seo-th:nth-child(4), .seo-th:nth-child(5), .seo-th:nth-child(6) { display: none; }
  .seo-cell-actions { grid-column: 3; text-align: right; }
}
@media (max-width: 860px) {
  .seo-sum-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .seo-hero-inner, .seo-main, .seo-tabs-inner { padding-left: 20px; padding-right: 20px; }
  .seo-row { grid-template-columns: 1fr auto; padding: 16px 18px; }
  .seo-cell-issues, .seo-cell-scanned, .seo-row-status, .seo-pill.status { display: none; }
  .seo-th { display: none; }
  .seo-head { display: none; }
  .seo-cell-actions { grid-column: auto; }
}