/**
 * myLogbook sidebar components — Zone 2.
 */

.ml-sidebar-card {
  background-color: var(--ml-bg-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-md);
}

.ml-sidebar-card-title {
  font-size: var(--ml-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ml-text-muted);
  margin: 0 0 var(--ml-space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ml-space-xs);
}

/* ---- Mobile-collapsible root of a sidebar tree (Browse / Tutorial
   Series) ----
   Checkbox + label, not <details>/<summary>: a closed <details>'s
   content gets hidden by the browser via an internal mechanism CSS
   `display` overrides can't reach, which silently broke "closed on
   phones, forced open on desktop". A checkbox's checked state has no
   such native side effect, so forcing it open above the grid's 992px
   stacking breakpoint (see grid.css) actually works — desktop keeps the
   original always-expanded look, closed by default only below it so a
   long link list doesn't fill the whole first screen ahead of real page
   content on phones. The input is visually hidden but still focusable
   (not display:none) so tab+space still works. */
.ml-browse-tree-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ml-browse-tree-toggle-label {
  cursor: pointer;
  user-select: none;
}

.ml-browse-tree-toggle-label::before {
  content: '☰';
  display: inline-block;
  width: 1.2em;
  color: var(--ml-text-muted);
}

.ml-browse-tree-toggle-input:checked + .ml-browse-tree-toggle-label::before {
  content: '✕';
}

.ml-browse-tree-toggle-input:focus-visible + .ml-browse-tree-toggle-label {
  outline: none;
  box-shadow: var(--ml-focus-ring);
  border-radius: var(--ml-radius-sm);
}

/* Unmistakable full-width tappable button on phones — not just a small
   triangle, per explicit request, so it reads as an obvious "menu"
   control rather than something easy to miss. */
@media (max-width: 992px) {
  .ml-browse-tree-list {
    display: none;
  }

  .ml-browse-tree-toggle-input:checked ~ .ml-browse-tree-list {
    display: block;
  }

  .ml-browse-tree-toggle-label {
    margin: 0 0 var(--ml-space-md);
    padding: var(--ml-space-sm) var(--ml-space-md);
    background-color: var(--ml-bg-surface);
    border: 1px solid var(--ml-border-strong);
    border-radius: var(--ml-radius-md);
    font-size: var(--ml-text-base);
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ml-text-primary);
    display: flex;
    align-items: center;
  }

  .ml-browse-tree-toggle-label::before {
    font-size: 1.2em;
    margin-inline-end: var(--ml-space-xs);
  }
}

@media (min-width: 993px) {
  html:not([data-force-mobile]) .ml-browse-tree-toggle-label {
    cursor: default;
    pointer-events: none;
  }

  html:not([data-force-mobile]) .ml-browse-tree-toggle-label::before {
    display: none;
  }
}

/* Same rules as the @media (max-width: 992px) block above, forced on
   regardless of actual viewport width — see grid.css for the toggle
   mechanism. */
html[data-force-mobile] .ml-browse-tree-list {
  display: none;
}

html[data-force-mobile] .ml-browse-tree-toggle-input:checked ~ .ml-browse-tree-list {
  display: block;
}

html[data-force-mobile] .ml-browse-tree-toggle-label {
  margin: 0 0 var(--ml-space-md);
  padding: var(--ml-space-sm) var(--ml-space-md);
  background-color: var(--ml-bg-surface);
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-md);
  font-size: var(--ml-text-base);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ml-text-primary);
  display: flex;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
}

html[data-force-mobile] .ml-browse-tree-toggle-label::before {
  display: inline-block;
  font-size: 1.2em;
  margin-inline-end: var(--ml-space-xs);
}

.ml-sample-flag {
  font-size: var(--ml-text-xs);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  color: var(--ml-accent-text);
  background-color: var(--ml-accent-bg);
  border-radius: var(--ml-radius-pill);
  padding: 2px 8px;
}

/* ---- Browse tree (left sidebar) ---- */

.ml-browse-tree-list,
.ml-browse-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ml-browse-tree ul {
  padding-inline-start: var(--ml-space-md);
  margin-top: var(--ml-space-3xs);
}

.ml-browse-tree-list > li {
  margin-bottom: 0;
}

.ml-browse-tree a {
  display: block;
  font-size: var(--ml-text-sm);
  color: var(--ml-text-secondary);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--ml-radius-sm);
}

.ml-browse-tree a:hover {
  color: var(--ml-accent);
  background-color: var(--ml-bg-muted);
}

.ml-browse-tree-branch summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--ml-radius-sm);
  list-style: none;
}

.ml-browse-tree-branch summary:hover {
  background-color: var(--ml-bg-muted);
}

.ml-browse-tree-branch-label {
  font-size: var(--ml-text-sm);
  font-weight: 600;
  color: var(--ml-text-primary);
  text-decoration: none;
  padding: 0;
}

.ml-browse-tree-branch-label:hover {
  color: var(--ml-accent);
}

.ml-browse-tree-branch summary::-webkit-details-marker {
  display: none;
}

.ml-browse-tree-branch summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: var(--ml-text-muted);
  transition: transform var(--ml-dur-fast) var(--ml-ease);
}

.ml-browse-tree-branch[open] > summary::before {
  transform: rotate(90deg);
}

/* RTL: collapsed arrow points toward the start of RTL reading flow (left,
   not right), and rotates the opposite way on open so "expanded" still
   visually ends up pointing down in both directions, not up. */
[dir="rtl"] .ml-browse-tree-branch summary::before {
  content: '◂';
}

[dir="rtl"] .ml-browse-tree-branch[open] > summary::before {
  transform: rotate(-90deg);
}

/* ---- TOC (right sidebar) ---- */

/* Chrome, not content — explicitly pinned to the sitewide RTL toggle,
   same as everything else in the toolbar/sidebar/menu system. Without
   this, an Arabic article's heading text (which the TOC displays
   verbatim) left direction ambiguous, and browsers can visually skew
   toward RTL based on the text's own script even with no dir="rtl"
   anywhere — exactly the "reversed" behavior reported. text-align:start
   resolves automatically once direction is explicitly set below, so it
   only needs to be declared once rather than as separate left/right
   rules for each state. */
.ml-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ml-toc-nav a {
  display: block;
  font-size: var(--ml-text-sm);
  color: var(--ml-text-secondary);
  text-decoration: none;
  padding: 2px var(--ml-space-xs);
  border-radius: var(--ml-radius-sm);
  border-inline-start: 2px solid transparent;
}

.ml-toc-nav a:hover {
  color: var(--ml-text-primary);
  background-color: var(--ml-bg-muted);
}

.ml-toc-nav a.is-active {
  color: var(--ml-accent);
  border-inline-start-color: var(--ml-accent);
  font-weight: 600;
  background-color: var(--ml-accent-bg);
}

.ml-toc-nav a.ml-toc-sub {
  padding-inline-start: var(--ml-space-lg);
  font-size: var(--ml-text-xs);
  color: var(--ml-text-muted);
}

/* ---- Metadata card ---- */

.ml-metadata-list {
  margin: 0;
}

.ml-metadata-row {
  display: flex;
  justify-content: space-between;
  gap: var(--ml-space-sm);
  font-size: var(--ml-text-sm);
  padding: var(--ml-space-2xs) 0;
  border-bottom: 1px solid var(--ml-border);
}

.ml-metadata-row:last-child {
  border-bottom: none;
}

.ml-metadata-row dt {
  color: var(--ml-text-muted);
  font-weight: 500;
}

.ml-metadata-row dd {
  margin: 0;
  color: var(--ml-text-primary);
  font-weight: 600;
  text-align: end;
}

/* ---- Related content ---- */

.ml-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ml-space-2xs);
}

.ml-related-list a {
  display: block;
  font-size: var(--ml-text-sm);
  color: var(--ml-text-secondary);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--ml-radius-sm);
}

.ml-related-list a:hover {
  color: var(--ml-accent);
  background-color: var(--ml-bg-muted);
}