/* BitFire Error Log guide — page-specific components.
   Shared documentation structure, typography, navigation, callouts,
   FAQ, author, and CTA styles come from enterprise-docs.css. */

.error-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(232, 157, 52, 0.12), transparent 28%),
    radial-gradient(circle at 15% 68%, rgba(33, 139, 201, 0.12), transparent 30%),
    linear-gradient(180deg, #071322 0%, #0a1a2b 100%);
}

.error-hero h1 { max-width: 940px; }
.error-summary { border-color: rgba(232, 174, 91, 0.24); }
.error-summary .recommendation-label { color: #efbd76; }

.log-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  padding: 8px;
  border: 1px solid rgba(167, 210, 233, 0.18);
  border-radius: 20px;
  background: rgba(10, 28, 45, 0.8);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28);
}

.log-facts > div {
  min-height: 126px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px;
  border-right: 1px solid rgba(167, 210, 233, 0.12);
}

.log-facts > div:last-child { border-right: 0; }
.log-facts .icon { width: 28px; color: #67bbe3; }
.log-facts small,
.log-facts strong,
.log-facts em { display: block; }
.log-facts small { color: #668294; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.log-facts strong { margin: 3px 0 1px; color: #e4f1f7; }
.log-facts em { color: #849aa8; font-style: normal; }

.error-overview-preview { margin-top: 30px; }
.error-overview-preview > a { display: block; }
.error-overview-preview img { width: 100%; height: auto; }
.error-overview-preview figcaption { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.error-overview-preview figcaption a { flex: 0 0 auto; color: #87c9e9; font-weight: 800; }
.error-overview-preview figcaption a:hover { color: #bce8fb; }

.error-intro { scroll-margin-top: var(--nav-height); }
.error-intro .intro-grid { align-items: center; margin-bottom: 0; }
.error-checklist { margin: 0; }
.scope-note {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 13px;
  margin-top: 27px;
  padding: 20px;
  border: 1px solid #cfe1ea;
  border-radius: 15px;
  background: #f7fbfd;
}
.scope-note > .icon { width: 22px; color: #218bc9; }
.scope-note strong { color: #24475d; }
.scope-note p { margin: 4px 0 0; color: #657b89; }
.error-body { border-top: 1px solid #e1e8ed; }

.subsection-title { margin: 38px 0 15px; color: #1e394c; letter-spacing: -0.02em; }
.compact-steps > article { padding-block: 22px; }

.step-list { overflow: hidden; border: 1px solid #dbe4ea; border-radius: 18px; }
.step-list > article { display: grid; grid-template-columns: 46px 1fr; gap: 20px; padding: 27px 28px; border-bottom: 1px solid #e1e8ed; }
.step-list > article:last-child { border-bottom: 0; }
.step-number { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #cfe0e9; border-radius: 12px; color: #197bad; background: #f1f8fb; font-weight: 800; font-family: ui-monospace, monospace; }
.step-list h3 { margin-bottom: 7px; color: #183246; }
.step-list p { margin: 0; color: #5d7180; }
.step-list strong { color: #29485b; }

.entry-fields {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  border: 1px solid #dbe4ea;
  border-radius: 17px;
}
.entry-fields article { min-height: 185px; padding: 22px 18px; border-right: 1px solid #e1e8ed; }
.entry-fields article:last-child { border-right: 0; background: #f4f9fc; }
.entry-fields small { display: block; margin-bottom: 35px; color: #218bc9; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.entry-fields strong { display: block; margin-bottom: 6px; color: #263f51; }
.entry-fields p { margin: 0; color: #657986; }

.severity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.severity-grid article { min-height: 310px; display: flex; flex-direction: column; padding: 24px; border: 1px solid #dbe4ea; border-radius: 17px; }
.severity-grid article > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 42px; }
.severity-grid .icon { width: 23px; }
.severity-grid small { font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.severity-grid h3 { margin-bottom: 8px; color: #233e50; }
.severity-grid p { margin: 0 0 24px; color: #637784; }
.severity-grid article > strong { margin-top: auto; letter-spacing: 0.06em; text-transform: uppercase; }
.level-info { color: #1977a9; background: #f4f9fc; }
.level-warning { color: #9b641c; background: #fffaf1; }
.level-error { color: #a34842; background: #fff8f6; }
.level-fatal { color: #e5eff5; border-color: #244259 !important; background: #0c2134; }
.level-fatal h3 { color: #f0f7fa; }
.level-fatal p { color: #98adb9; }
.level-fatal small,
.level-fatal > strong { color: #ff9d96; }

.path-grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid #dbe4ea; border-radius: 18px; }
.path-grid article { min-height: 220px; padding: 25px; border-right: 1px solid #e1e8ed; border-bottom: 1px solid #e1e8ed; }
.path-grid article:nth-child(2n) { border-right: 0; }
.path-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
.path-grid code { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; margin-bottom: 6px; padding: 5px 8px; border-radius: 7px; color: #176f9e; background: #eef6fa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.path-grid strong { display: block; margin: 25px 0 7px; color: #263f51; }
.path-grid p { margin: 0; color: #637784; }

.source-actions { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 13px; align-items: center; margin-top: 18px; padding: 8px; border-radius: 17px; color: #dcebf3; background: #0b2033; }
.source-actions > div { min-height: 130px; padding: 19px; border: 1px solid rgba(167, 210, 233, 0.1); border-radius: 12px; }
.source-actions span { display: block; margin-bottom: 16px; color: #5eb9e5; font-family: ui-monospace, monospace; }
.source-actions p { margin: 0; color: #90a7b5; }
.source-actions p strong { color: #deebf2; }
.source-actions i { color: #587386; font-style: normal; }

.search-panel { margin-bottom: 17px; padding: 25px; border-radius: 18px; color: #e2eef5; background: #0b1d2f; box-shadow: 0 23px 55px rgba(7, 19, 34, 0.12); }
.search-panel-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.search-panel-head .icon { width: 24px; color: #63bce6; }
.search-panel-head small,
.search-panel-head strong { display: block; }
.search-panel-head small { color: #6f899a; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mock-search { display: grid; grid-template-columns: 1fr auto; overflow: hidden; border: 1px solid #365063; border-radius: 11px; background: #f9fbfc; }
.mock-search code { padding: 14px 17px; color: #21384a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mock-search > span { display: grid; place-items: center; padding: 0 23px; color: #071b2b; background: #ef9b4a; font-weight: 850; }
.search-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.search-examples span { padding: 6px 9px; border: 1px solid rgba(167, 210, 233, 0.13); border-radius: 999px; color: #8199a8; }
.search-examples code { color: #a5d8ef; font-family: ui-monospace, monospace; }

.ignore-demo { display: grid; grid-template-columns: 70px 1fr auto; gap: 22px; align-items: center; padding: 30px; border: 1px solid #e4d5b9; border-radius: 18px; background: #fffaf1; }
.ignore-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; color: #9a641e; background: #f8e9cc; }
.ignore-icon .icon { width: 28px; }
.ignore-demo small { color: #9a641e; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.ignore-demo h3 { margin: 3px 0 7px; color: #443921; }
.ignore-demo p { margin: 0; color: #75664a; }
.ignore-demo > span { align-self: start; padding: 5px 9px; border-radius: 999px; color: #81551c; background: #f8e7c7; font-weight: 800; }
.restore-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.restore-flow > div { min-height: 92px; display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid #dbe4ea; border-radius: 14px; }
.restore-flow span { color: #218bc9; font-family: ui-monospace, monospace; }
.restore-flow strong { color: #294458; }
.restore-flow i { color: #8ca0ad; font-style: normal; }

.troubleshoot-list { overflow: hidden; margin: 0; padding: 0; border: 1px solid #dbe4ea; border-radius: 18px; list-style: none; }
.troubleshoot-list li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px 26px; border-bottom: 1px solid #e1e8ed; }
.troubleshoot-list li:last-child { border-bottom: 0; }
.troubleshoot-list li > span { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid #cbdfe8; border-radius: 50%; color: #197bad; background: #f2f8fb; font-family: ui-monospace, monospace; font-weight: 800; }
.troubleshoot-list strong { color: #243e50; }
.troubleshoot-list p { margin: 4px 0 0; color: #617583; }

.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #dbe4ea; border-radius: 17px; }
.scenario-grid article { min-height: 240px; padding: 24px; border-right: 1px solid #e1e8ed; }
.scenario-grid article:last-child { border-right: 0; }
.scenario-grid .icon { width: 24px; margin-bottom: 34px; color: #218bc9; }
.scenario-grid strong { display: block; margin-bottom: 7px; color: #263f51; }
.scenario-grid p { margin: 0; color: #647885; }

.security-principle { display: grid; grid-template-columns: 57px 1fr; gap: 22px; padding: 30px; border-radius: 19px; color: #e6f2f8; background: #0b2033; }
.security-principle > .icon { width: 38px; height: 38px; color: #64bfe9; }
.security-principle small { display: block; color: #63bde7; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.security-principle h3 { margin: 5px 0 7px; }
.security-principle p { margin: 0; color: #92a9b6; }
.security-signs { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid #dbe4ea; border-radius: 16px; }
.security-signs span { position: relative; min-height: 72px; display: flex; align-items: center; padding: 14px 16px 14px 45px; border-right: 1px solid #e1e8ed; border-bottom: 1px solid #e1e8ed; color: #536b79; }
.security-signs span:nth-child(2n) { border-right: 0; }
.security-signs span:nth-last-child(-n + 2) { border-bottom: 0; }
.security-signs span::before { position: absolute; left: 18px; content: "!"; color: #a64b45; font-weight: 900; }
.security-warning { border-color: #efc4bd; background: #fff7f5; }
.security-warning .inline-link { display: inline-block; margin-top: 10px; color: #a34742; font-weight: 850; }

.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.support-grid article { min-height: 215px; padding: 24px; border: 1px solid #dbe4ea; border-radius: 16px; }
.support-grid article:last-child { color: #e6f2f8; border-color: #173c57; background: #0b2033; }
.support-grid small { display: block; margin-bottom: 36px; color: #218bc9; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.support-grid article:last-child small { color: #65bce5; }
.support-grid h3 { margin-bottom: 7px; color: #243e50; }
.support-grid article:last-child h3 { color: #e6f2f8; }
.support-grid p { margin: 0; color: #627684; }
.support-grid article:last-child p { color: #91a8b6; }
.support-checklist { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; margin-top: 16px; border: 1px solid #dbe4ea; border-radius: 16px; }
.support-checklist > div { min-height: 64px; display: flex; align-items: center; gap: 11px; padding: 13px 17px; border-right: 1px solid #e1e8ed; border-bottom: 1px solid #e1e8ed; color: #536b79; }
.support-checklist > div:nth-child(2n) { border-right: 0; }
.support-checklist > div:nth-last-child(-n + 2) { border-bottom: 0; }
.support-checklist .icon { width: 17px; color: #15915e; }
.privacy-note { display: grid; grid-template-columns: 34px 1fr; gap: 15px; margin-top: 18px; padding: 22px; border: 1px solid #e2d3b5; border-radius: 15px; background: #fffaf1; }
.privacy-note > .icon { width: 24px; color: #9a641e; }
.privacy-note strong { color: #5f4927; }
.privacy-note p { margin: 4px 0 0; color: #75664a; }
.error-faq details > div { line-height: 1.7; }

@media (max-width: 1050px) {
  .entry-fields { grid-template-columns: repeat(3, 1fr); }
  .entry-fields article { border-bottom: 1px solid #e1e8ed; }
  .entry-fields article:nth-child(3) { border-right: 0; }
  .entry-fields article:nth-last-child(-n + 2) { border-bottom: 0; }
  .severity-grid { grid-template-columns: repeat(2, 1fr); }
  .severity-grid article { min-height: 275px; }
  .support-grid article { min-height: 235px; }
}

@media (max-width: 820px) {
  .log-facts { grid-template-columns: 1fr; }
  .log-facts > div { min-height: 100px; border-right: 0; border-bottom: 1px solid rgba(167, 210, 233, 0.12); }
  .log-facts > div:last-child { border-bottom: 0; }
  .entry-fields { grid-template-columns: repeat(2, 1fr); }
  .entry-fields article,
  .entry-fields article:nth-child(3) { border-right: 1px solid #e1e8ed; }
  .entry-fields article:nth-child(2n) { border-right: 0; }
  .entry-fields article:nth-last-child(-n + 2) { border-bottom: 1px solid #e1e8ed; }
  .entry-fields article:last-child { grid-column: 1 / -1; min-height: 150px; border-right: 0; border-bottom: 0; }
  .source-actions { grid-template-columns: 1fr; }
  .source-actions i { text-align: center; transform: rotate(90deg); }
  .restore-flow { grid-template-columns: 1fr; }
  .restore-flow i { text-align: center; transform: rotate(90deg); }
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid #e1e8ed; }
  .scenario-grid article:last-child { border-bottom: 0; }
  .support-grid { grid-template-columns: 1fr; }
  .support-grid article { min-height: 0; }
  .support-grid small { margin-bottom: 24px; }
}

@media (max-width: 560px) {
  .error-overview-preview { margin-top: 20px; }
  .error-overview-preview figcaption { display: none; }
  .scope-note { grid-template-columns: 1fr; }
  .error-checklist { padding: 25px; }
  .step-list > article { grid-template-columns: 1fr; padding: 22px 20px; }
  .entry-fields,
  .severity-grid,
  .path-grid { grid-template-columns: 1fr; }
  .entry-fields article,
  .entry-fields article:nth-child(2n),
  .entry-fields article:nth-child(3),
  .entry-fields article:nth-last-child(-n + 2),
  .path-grid article,
  .path-grid article:nth-child(2n),
  .path-grid article:nth-last-child(-n + 2) { min-height: auto; border-right: 0; border-bottom: 1px solid #e1e8ed; }
  .entry-fields article:last-child,
  .path-grid article:last-child { grid-column: auto; border-bottom: 0; }
  .entry-fields small { margin-bottom: 20px; }
  .severity-grid article { min-height: 0; }
  .severity-grid article > div { margin-bottom: 28px; }
  .mock-search { grid-template-columns: 1fr; }
  .mock-search > span { min-height: 45px; }
  .ignore-demo { grid-template-columns: 1fr; padding: 24px; }
  .ignore-demo > span { width: fit-content; }
  .troubleshoot-list li { grid-template-columns: 43px 1fr; gap: 13px; padding: 21px 16px; }
  .troubleshoot-list li > span { width: 39px; height: 39px; }
  .security-principle { grid-template-columns: 1fr; padding: 25px; }
  .security-signs,
  .support-checklist { grid-template-columns: 1fr; }
  .security-signs span,
  .security-signs span:nth-child(2n),
  .security-signs span:nth-last-child(-n + 2),
  .support-checklist > div,
  .support-checklist > div:nth-child(2n),
  .support-checklist > div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid #e1e8ed; }
  .security-signs span:last-child,
  .support-checklist > div:last-child { border-bottom: 0; }
  .privacy-note { grid-template-columns: 1fr; }
}