/* ZAR Learn Documentation portal. All rules stay inside the Learn shell. */
.learn-country-search { padding: 12px 0 10px; border-bottom: 1px solid var(--gb-learn-border, #dbe3ec); }
.learn-country-search > label { display: block; margin: 0 0 6px; color: #475569; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.learn-country-search-row { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 11px; background: #f5f7fa; border: 1px solid #dbe3ec; border-radius: 5px; color: #64748b; }
.learn-country-search-row:focus-within { border-color: #6366f1; outline: 2px solid rgba(79,70,229,.14); }
.learn-country-search-row input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #172033; font: 500 13px/1.3 Inter,system-ui,sans-serif; }
.learn-country-search-clear { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #64748b; cursor: pointer; }
.learn-country-search-clear:hover,.learn-country-search-clear:focus-visible { background: #e8edf4; color: #172033; outline: 0; }
.learn-country-search-clear[hidden] { display: none !important; }

.learn-search-results { margin-top: 8px; max-height: min(430px, 48vh); overflow: auto; background: #fff; border: 1px solid #dbe3ec; border-radius: 5px; }
.learn-search-results ol { margin: 0; padding: 0; list-style: none; }
.learn-search-results li + li { border-top: 1px solid #e7ebf0; }
.learn-search-results li button { width: 100%; padding: 10px; border: 0; border-radius: 0; background: #fff; color: #172033; text-align: left; cursor: pointer; }
.learn-search-results li button:hover { background: #f6f8fc; }
.learn-search-results strong,.learn-search-results span,.learn-search-results em,.learn-search-results p { display: block; }
.learn-search-results strong { font-size: 12.5px; }
.learn-search-results span { margin-top: 3px; color: #53657e; font-size: 10.5px; }
.learn-search-results em { margin-top: 5px; color: #3346b8; font-size: 11px; font-style: normal; }
.learn-search-results p { margin: 5px 0 0; color: #64748b; font-size: 11px; line-height: 1.4; }
.learn-search-results [data-learn-visible-results] + [data-learn-category-results] { border-top: 1px solid #dbe3ec; }
.learn-search-results [data-learn-index-result].is-selected,
.learn-search-results [data-learn-index-result][aria-selected="true"] { background: #eef2ff; box-shadow: inset 3px 0 0 #6366f1; }
.learn-search-status,.learn-search-summary { margin: 0; padding: 10px; color: #64748b; font-size: 11px; }
.learn-search-status.is-error { color: #8a3440; background: #fff6f7; }
.learn-search-results.is-document-filter-status { max-height: none; overflow: visible; background: #f8fafc; }
#learn-md-content > .learn-md-section[hidden] { display: none !important; }
.learn-search-match-summary { padding: 9px 10px; }
.learn-search-match-summary > p { margin: 0; color: #53657e; font-size: 11px; line-height: 1.4; }
.learn-search-match-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 8px; }
.learn-search-match-navigation button { min-height: 30px; padding: 4px 8px; border: 1px solid #dbe3ec; border-radius: 4px; background: #fff; color: #334155; font: 600 10.5px/1 Inter,system-ui,sans-serif; cursor: pointer; }
.learn-search-match-navigation button:disabled { opacity: .45; cursor: default; }
.learn-search-match-navigation span { color: #475569; font-size: 10.5px; white-space: nowrap; }
.learn-search-match-context { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid #e7ebf0; }
#learn-md-content mark.learn-search-match { padding: 0 .08em; border-radius: 2px; background: #fff0a8; color: inherit; box-shadow: inset 0 -1px 0 #e3bd36; }
#learn-md-content mark.learn-search-match.is-active { background: #ffbf69; box-shadow: 0 0 0 2px rgba(217,119,6,.34); }
.learn-search-pagination { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 6px; border-top: 1px solid #e7ebf0; font-size: 10px; }
.learn-search-pagination button { min-height: 32px; padding: 5px 8px; border: 1px solid #dbe3ec; border-radius: 4px; background: #fff; }

.learn-documentation-tools { padding-top: 10px; }
.learn-list.is-documentation-hidden { display: none !important; }
.learn-documentation-filter-toggle { display: none; width: 100%; min-height: 44px; border: 1px solid #dbe3ec; border-radius: 5px; background: #fff; color: #334155; font-weight: 650; }
.learn-documentation-filters { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0 0 11px; }
.learn-documentation-filters label { display: grid; gap: 3px; color: #64748b; font-size: 10px; font-weight: 650; }
.learn-documentation-filters select { width: 100%; min-height: 36px; padding: 5px 8px; border: 1px solid #dbe3ec; border-radius: 4px; background: #fff; color: #253248; font: 500 11px/1.2 Inter,system-ui,sans-serif; }

.learn-documentation-nav { border-top: 1px solid #dbe3ec; }
.learn-documentation-group { margin: 0; border-bottom: 1px solid #dbe3ec; background: transparent; }
.learn-documentation-group > summary { position: relative; min-height: 44px; display: flex; align-items: center; padding: 9px 25px 9px 4px; color: #334155; font-size: 12px; font-weight: 720; cursor: pointer; list-style: none; }
.learn-documentation-group > summary::-webkit-details-marker { display: none; }
.learn-documentation-group > summary span::before { content: ''; position: absolute; right: 8px; top: 17px; width: 7px; height: 7px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(45deg); }
.learn-documentation-group[open] > summary span::before { top: 20px; transform: rotate(225deg); }
.learn-documentation-group-items { padding: 0 0 7px; }
.learn-documentation-group-items button { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px 7px 13px; border: 0; border-left: 2px solid transparent; background: transparent; color: #374151; text-align: left; font-size: 11.5px; cursor: pointer; }
.learn-documentation-group-items button:hover,.learn-documentation-group-items button.is-active { background: #f1f5ff; border-left-color: #4f46e5; color: #283aaf; }
.learn-documentation-group-items small { flex: 0 0 auto; color: #64748b; font-size: 9px; }
.learn-documentation-collection > summary { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 38px; padding: 7px 8px 7px 13px; color: #374151; font-size: 11.5px; cursor: pointer; }
.learn-documentation-collection > div { padding-left: 9px; }
.learn-documentation-collection > div button { font-size: 10.5px; }
.learn-documentation-empty,.learn-documentation-access { margin: 0; padding: 9px; color: #64748b; font-size: 11px; }

.learn-document-metadata { margin: 0 0 10px; padding: 11px; border: 1px solid #dbe3ec; border-radius: 5px; background: #f8fafc; color: #263247; }
.learn-document-metadata-label { margin: 0 0 5px; color: #596b83; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.learn-document-metadata > strong { display: block; font-size: 12px; line-height: 1.35; }
.learn-document-metadata dl { margin: 8px 0 0; }
.learn-document-metadata dl div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid #e3e8ef; font-size: 9.5px; }
.learn-document-metadata dt { color: #64748b; }
.learn-document-metadata dd { margin: 0; color: #273449; font-weight: 650; text-align: right; }

.learn-documentation-search-match { padding: 0 .08em; border-radius: 2px; background: #fde68a; color: inherit; box-shadow: 0 0 0 2px rgba(245,158,11,.18); }
.zar-release-entry.is-documentation-active { scroll-margin-top: calc(var(--nav-height, 72px) + 18px); }

.zar-documentation-home-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0 26px; }
.zar-documentation-home-card { display: block; padding: 13px; border: 1px solid #dce3eb; border-radius: 5px; background: #fff; color: inherit; text-decoration: none; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease; }
.zar-documentation-home-card:hover,.zar-documentation-home-card:focus-visible { border-color: #818cf8; background: #f8faff; outline: 2px solid rgba(79,70,229,.14); outline-offset: 1px; }
.zar-documentation-home-grid h3 { margin: 0 0 6px !important; color: #18233a; font-size: 14px !important; }
.zar-documentation-home-grid p { margin: 0 !important; color: #5c6d84; font-size: 12.5px; line-height: 1.5; }

@media (max-width: 1100px) {
  .learn-documentation-filter-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; }
  .learn-documentation-filters { display: none; margin-top: 8px; }
  .learn-documentation-filters.is-open { display: grid; }
}
@media (max-width: 600px) {
  .zar-documentation-home-grid { grid-template-columns: 1fr; }
  .learn-country-search { padding-top: 6px; }
  .learn-search-results { max-height: 42vh; }
}
@media (prefers-reduced-motion: reduce) { .learn-documentation-group > summary span::before { transition: none !important; } }
@media print { .learn-country-search,.learn-documentation-tools,.learn-document-metadata { display: none !important; } }

/* =========================================================
   Learn target reveal
   Instant navigation with restrained visual orientation.
========================================================= */

.learn-target-reveal {
  animation: learn-target-reveal 700ms ease-out;
}

@keyframes learn-target-reveal {
  0% {
    opacity: 0.38;
    background-color: rgba(79, 70, 229, 0.14);
  }

  40% {
    opacity: 1;
    background-color: rgba(79, 70, 229, 0.09);
  }

  100% {
    opacity: 1;
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-target-reveal {
    animation: none;
    outline: 2px solid rgba(79, 70, 229, 0.3);
    outline-offset: 4px;
  }
}

/* =========================================================
   PATCH 2026-08-10 | DOCUMENTATION LOADING CONTRAST
   Keeps the release-loading state readable independently of
   normal article typography.
========================================================= */

.learn-documentation-loading {
  color: #334155;
}

.learn-documentation-loading__icon,
.learn-documentation-loading__kicker {
  color: #4f46e5;
}

.learn-documentation-loading h2 {
  color: #172033;
}

.learn-documentation-loading > p:not(.learn-documentation-loading__kicker) {
  color: #475569;
}
/* =========================================================
   Learn search match reveal
   Instant jump followed by a restrained orientation cue.
========================================================= */

.learn-search-match.is-revealing {
  animation: learn-search-match-reveal 650ms ease-out;
}

@keyframes learn-search-match-reveal {
  0% {
    background-color: rgba(79, 70, 229, 0.2);
    outline: 2px solid rgba(79, 70, 229, 0.38);
    outline-offset: 3px;
  }

  45% {
    background-color: rgba(79, 70, 229, 0.12);
    outline-color: rgba(79, 70, 229, 0.2);
  }

  100% {
    background-color: transparent;
    outline-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-search-match.is-revealing {
    animation: none;
    background-color: rgba(79, 70, 229, 0.12);
    outline: 2px solid rgba(79, 70, 229, 0.32);
    outline-offset: 3px;
  }
}