/* Learn hub (spec §7.1). Two columns, sticky rail, one rule per block kind.
 *
 * Logical properties only — no margin-left / padding-right anywhere — so the
 * Arabic build mirrors without a second stylesheet. css_logical.test.mjs and
 * learn_page.test.mjs both enforce that. */

html, body.learn-page { height: auto; min-height: 100%; overflow: auto; }

.learn {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.learn-rail { position: sticky; top: 1rem; align-self: start; }
.learn-rail-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #555); margin: 0 0 .5rem; }
#learn-filter { width: 100%; padding: .45rem .6rem; border: 1px solid rgba(0,0,0,.18); border-radius: 6px; font: inherit; }

.learn-nav { display: flex; flex-direction: column; margin-block-start: .75rem; }
.learn-nav a {
  padding: .35rem .6rem;
  border-inline-start: 3px solid transparent;
  color: var(--muted, #555);
  text-decoration: none;
  font-size: .92rem;
}
.learn-nav a:hover { color: var(--teal-deep, #004d5d); }
.learn-nav a.active { border-inline-start-color: var(--teal, #1ba7a6); color: var(--teal-deep, #004d5d); font-weight: 600; }
.learn-nomatch { margin-block-start: .75rem; font-size: .88rem; color: var(--muted, #555); }

.learn-main { min-width: 0; }
.learn-content { line-height: 1.6; }
.learn-h1 { font-size: 1.5rem; margin: .2rem 0 1.2rem; }
.learn-section { scroll-margin-top: 1rem; margin-block-end: 2.5rem; }
.learn-section > h2 {
  font-size: 1.2rem;
  margin: 0 0 .6rem;
  padding-block-end: .2rem;
  color: var(--teal-deep, #004d5d);
  border-block-end: 2px solid var(--teal, #1ba7a6);
}
.learn-section h3 { font-size: 1rem; margin: 1.2rem 0 .3rem; }
.learn-section p, .learn-section li { font-size: .95rem; }
.learn-section code { background: #f1f5f9; padding: .1rem .35rem; border-radius: 4px; font-size: .88em; }

.learn-tip { border-inline-start: 4px solid var(--teal, #1ba7a6); background: #e6f6f6; padding: .6rem .9rem; border-radius: 6px; margin: .7rem 0; }
.learn-steps { counter-reset: step; list-style: none; padding-inline-start: 0; }
.learn-steps > li { position: relative; padding-inline-start: 2.2rem; margin: .6rem 0; }
.learn-steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; top: 0;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--teal, #1ba7a6); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}

.learn-code { position: relative; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: .8rem 1rem; overflow-x: auto; margin: .7rem 0; }
.learn-code pre { margin: 0; font-size: .85rem; white-space: pre; }
.learn-code .learn-copy { position: absolute; top: .5rem; inset-inline-end: .5rem; }
.learn-tryit { margin: .8rem 0; }

/* Phone: the rail stops being a sidebar and becomes a strip above the
   content, matching what the Settings shell does at the same width. */
@media (max-width: 760px) {
  .learn { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .learn-rail { position: static; }
  .learn-nav { flex-direction: row; flex-wrap: wrap; gap: .25rem; }
  .learn-nav a { border-inline-start: 0; border-block-end: 2px solid transparent; }
  .learn-nav a.active { border-inline-start-color: transparent; border-block-end-color: var(--teal, #1ba7a6); }
}