/* nativepast.com — tutorial page styles. Layered on main.css (site tokens: --paper,
   --paper-deep, --ink, --ink-soft, --ink-faint, --saddle, --ember, --gold, --hairline,
   --font-display Fraunces, --font-ui Inter). Ported from the Focara Kitchen / KotaDex
   tutorial pipeline; the site header is sticky (64px), so anchors stop below it. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.tutorial-content section[id],
.tutorial-content [id] { scroll-margin-top: 84px; }

.tutorial .search-hero { padding-bottom: .4rem; }

.tutorial-layout {
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  padding-block: 1.2rem 3.5rem;
}

/* ---------- controls ---------- */
.tutorial-controls-mobile {
  display: none; width: 100%;
  padding: .9rem 1rem;
  background: #FFFDF8; border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.control-row { display: flex; align-items: center; gap: .8rem; }
.control-row + .control-row { margin-top: .7rem; }
.tutorial-controls-mobile label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); min-width: 5.2rem;
}
.tutorial-controls-mobile select, .language-selector select {
  flex: 1; width: 100%; min-width: 0;
  padding: .6rem .8rem; font: inherit; font-size: var(--t-small);
  color: var(--ink); background: #fff;
  border: 1.5px solid var(--hairline-strong); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.tutorial-controls-mobile select:focus, .language-selector select:focus {
  outline: none; border-color: var(--saddle);
  box-shadow: 0 0 0 3px rgba(139, 69, 19, .15);
}

/* ---------- sidebar ---------- */
.tutorial-sidebar {
  position: sticky; top: 84px;
  width: 270px; flex-shrink: 0; height: fit-content;
  max-height: calc(100vh - 104px); overflow-y: auto;
  padding: 1.3rem 1.25rem;
  background: #FFFDF8; border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.language-selector, .platform-selector {
  margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--hairline);
}
.language-selector label {
  display: block; margin-bottom: .45rem;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* platform toggle */
.platform-toggle {
  display: flex; width: 100%; padding: 3px; gap: 3px;
  background: var(--paper-deep); border-radius: 10px;
}
.platform-btn {
  flex: 1; padding: .5rem .7rem;
  font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.platform-btn:hover { color: var(--saddle-deep); }
.platform-btn:focus-visible { outline: 3px solid rgba(139, 69, 19, .45); outline-offset: 1px; }
.platform-btn[aria-pressed="true"] {
  background: var(--saddle); color: #FFF8EE;
  box-shadow: 0 2px 8px rgba(110, 50, 8, .28);
}
body.platform-ios .shot-android, body.platform-android .shot-ios { display: none; }
.screenshot.single-platform .shot-ios, .screenshot.single-platform .shot-android { display: inline-block !important; }
.platform-badge {
  display: inline-block; margin-top: .5rem; padding: .1rem .7rem;
  font-size: var(--t-micro); font-weight: 600; color: var(--ink-soft);
  background: var(--paper-deep); border-radius: 999px;
}
body.platform-ios .only-android, body.platform-android .only-ios { display: none; }

/* ---------- table of contents ---------- */
.tutorial-toc h3 {
  margin: 0 0 .6rem; font-family: var(--font-ui);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.tutorial-toc ul, .toc-inline ul { list-style: none; margin: 0; padding: 0; }
.tutorial-toc li { margin: 0; }
.toc-group {
  margin: .9rem 0 .3rem; padding-inline-start: .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
}
.toc-link {
  display: block; padding: .38rem .6rem;
  font-size: var(--t-small); color: var(--ink-soft); text-decoration: none;
  border-radius: 7px; transition: background .2s, color .2s;
}
.toc-link:hover { color: var(--saddle-deep); background: var(--paper-deep); }
.toc-link.active { color: #FFF8EE; background: var(--saddle); font-weight: 600; }

/* ---------- content ---------- */
.tutorial-content { flex: 1; min-width: 0; }
.tutorial-content section { margin-bottom: 2.6rem; padding-top: .4rem; }
.tutorial-content h2 {
  margin: 0 0 .9rem; padding-bottom: .5rem;
  font-size: var(--t-2); border-bottom: 2px solid var(--ember);
}
.tutorial-content h3 { margin: 1.4rem 0 .6rem; font-size: var(--t-3); }
.tutorial-content p, .tutorial-content li { max-width: 68ch; }
.tutorial-content code {
  font-family: 'SF Mono', Menlo, monospace; font-size: .88em;
  padding: .1em .4em; background: var(--paper-deep); border-radius: 4px; color: var(--ink);
}

/* screenshots */
.screenshot { margin: 1.3rem 0 1.6rem; text-align: center; }
.screenshot img {
  display: block; margin-inline: auto;   /* main.css makes img a block — center it explicitly */
  max-width: 300px; width: 100%; height: auto;
  border-radius: 26px; box-shadow: var(--shadow-2); border: 1px solid var(--hairline);
}
.screenshot-row { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin: 1.3rem 0; }
.screenshot-row .screenshot { margin: 0; }
.screenshot-row .screenshot img { max-width: 220px; }
.platform-badge { display: table; margin-inline: auto; }

/* callouts */
.tutorial-content .tip, .tutorial-content .note {
  padding: .9rem 1.1rem; margin: 1rem 0; max-width: none;
  border-radius: var(--radius-sm); font-size: var(--t-small); line-height: 1.6;
}
.tutorial-content .tip { background: #EEF2E3; border-inline-start: 4px solid #6E8C4E; color: #3C4A2E; }
.tutorial-content .note { background: var(--paper-deep); border-inline-start: 4px solid var(--gold); color: var(--ink-soft); }

/* tables */
.format-table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-1);
}
.format-table th, .format-table td { padding: .7rem .9rem; text-align: start; font-size: var(--t-small); }
.format-table th { background: var(--night); color: var(--on-night); font-weight: 600; }
.format-table td { background: #FFFDF8; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); }
.format-table tr:last-child td { border-bottom: 0; }

.tutorial-footer { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); text-align: center; }
.tutorial-footer p { color: var(--ink-faint); font-size: var(--t-small); margin-inline: auto; }

/* in-page grouped ToC — mobile/tablet only (the sidebar takes over on desktop) */
.toc-inline {
  margin: .4rem 0 1.8rem; padding: 1rem 1.1rem .8rem;
  background: #FFFDF8; border: 1px solid var(--hairline); border-radius: var(--radius); outline: none;
}
.toc-inline-title {
  margin: 0 0 .4rem !important; padding: 0 !important; border: 0 !important;
  font-family: var(--font-ui); font-size: var(--t-micro) !important; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.toc-inline .toc-group { margin: .8rem 0 .15rem; padding: 0; }
.toc-inline .toc-group:first-child { margin-top: .1rem; }
.toc-inline li a.toc-link { padding: .4rem .1rem; font-size: var(--t-body); color: var(--ink); border-radius: 6px; }
.toc-inline li a.toc-link:active { background: rgba(139, 69, 19, .1); }
@media (min-width: 992px) { .toc-inline { display: none; } }

/* floating back-to-top */
.back-to-top {
  position: fixed; bottom: 18px; inset-inline-end: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem; border: 0; border-radius: 999px;
  background: rgba(24, 18, 16, .8); color: var(--on-night);
  font: inherit; font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em;
  cursor: pointer; box-shadow: var(--shadow-2); backdrop-filter: blur(6px);
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: rgba(24, 18, 16, .95); }
.back-to-top:focus-visible { outline: 3px solid rgba(200, 112, 42, .6); outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .tutorial-layout { flex-direction: column; gap: 1.2rem; }
  .tutorial-controls-mobile { display: block; }
  .tutorial-sidebar { display: none; }
}
@media (max-width: 600px) {
  .screenshot img { max-width: 240px; border-radius: 22px; }
  .screenshot-row .screenshot img { max-width: 160px; }
  .format-table th, .format-table td { padding: .55rem .7rem; font-size: .8rem; }
}