/* Shared styles for the public tutorials pages (/tutorials and its per-app
   deep dives). Loaded by tutorials.html and every tutorials-<app>.html; sits
   on top of design-tokens.css + drawer.css like the other app pages. */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 15px/1.6 Inter, ui-sans-serif, system-ui, sans-serif;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.015em; }
a { color: inherit; }

.tu-shell { max-width: 1060px; margin: 0 auto; padding: 40px 28px 90px; }
/* The shared drawer floats its menu button at the top-left corner below 900px,
   so the page starts below it rather than underneath it. */
@media (max-width: 900px) {
  .tu-shell { padding-top: 66px; }
}

.tu-crumb { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.tu-crumb a { text-decoration: none; }
.tu-crumb a:hover { color: var(--text); }
.tu-crumb b { color: var(--text); font-weight: 600; }

.tu-hero { padding: 10px 0; }
.tu-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.tu-hero h1 { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 14px; }
.tu-hero p { max-width: 640px; margin: 0; color: var(--muted); font-size: 16px; }

.tu-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 10px; }
.tu-toc a {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 550; text-decoration: none; color: var(--text);
  background: var(--panel);
}
.tu-toc a:hover { border-color: var(--accent); }

/* --- index: category headers + the app tree ----------------------------- */
.tu-cat { margin-top: 70px; scroll-margin-top: 24px; }
.tu-cat > h2 { font-size: 26px; }
.tu-cat > p { max-width: 700px; color: var(--muted); margin: 10px 0 0; }

.tu-basics { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-top: 26px; }
.tu-basic {
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  padding: 18px 18px 16px;
}
.tu-basic h3 { font-size: 15.5px; margin-bottom: 8px; }
.tu-basic p { margin: 0; color: var(--muted); font-size: 13.5px; }

.tu-tree { display: grid; gap: 18px; margin-top: 26px; }
.tu-node {
  display: grid; grid-template-columns: 300px 1fr; gap: 22px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
  padding: 20px; align-items: start;
}
@media (max-width: 760px) { .tu-node { grid-template-columns: 1fr; } }
.tu-node-media img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); background: #0b0c10;
}
.tu-node h3 { font-size: 19px; }
.tu-node h3 a { text-decoration: none; }
.tu-node h3 a:hover { text-decoration: underline; }
.tu-node > div > p { color: var(--muted); margin: 8px 0 12px; font-size: 14px; }
.tu-leaves { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.tu-leaves li { margin: 0; }
.tu-leaves a {
  font-size: 13px; color: var(--muted); text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
.tu-leaves a:hover { color: var(--text); border-bottom-color: var(--accent); }
.tu-node-open {
  display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px;
}
.tu-node-open:hover { border-color: var(--accent); }

.tu-toolgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; }
.tu-tool {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 14px;
  background: var(--panel); text-decoration: none; display: block;
}
.tu-tool:hover { border-color: var(--accent); }
.tu-tool img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--line); background: #0b0c10; margin-bottom: 10px;
}
.tu-tool b { display: block; font-size: 14px; margin-bottom: 4px; padding: 0 4px; }
.tu-tool span { color: var(--muted); font-size: 12.5px; padding: 0 4px; display: block; }

/* --- per-app pages: walkthrough steps + deep-dive sections --------------- */
.tu-app-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tu-app-head h1 { font-size: clamp(26px, 4vw, 36px); }
.tu-open {
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--accent, #aeb7c2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
}
.tu-open:hover { border-color: var(--accent); }
.tu-lede { max-width: 720px; color: var(--muted); margin: 12px 0 0; font-size: 16px; }

.tu-section { margin-top: 58px; scroll-margin-top: 24px; }
.tu-section > h2 { font-size: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

.tu-step { margin-top: 34px; scroll-margin-top: 24px; }
.tu-step-head { display: flex; align-items: baseline; gap: 12px; }
.tu-num {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 650; color: var(--on-accent, #0f1318);
  background: var(--accent, #aeb7c2); transform: translateY(4px);
}
.tu-step h3 { font-size: 17px; }
.tu-step p { max-width: 720px; color: var(--muted); margin: 8px 0 14px 38px; }
.tu-step figure { margin: 0 0 0 38px; }
.tu-step img, .tu-sub img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); background: #0b0c10;
}
@media (max-width: 640px) {
  .tu-step p, .tu-step figure { margin-left: 0; }
}

.tu-sub { margin-top: 34px; scroll-margin-top: 24px; }
.tu-sub h3 { font-size: 17.5px; }
.tu-sub p, .tu-sub li { max-width: 740px; color: var(--muted); }
.tu-sub p { margin: 8px 0 0; }
.tu-sub ul { margin: 8px 0 0; padding-left: 22px; }
.tu-sub li { margin: 4px 0; }
.tu-sub li b, .tu-sub p b { color: var(--text); font-weight: 600; }
.tu-sub figure { margin: 14px 0 0; }

.tu-next {
  margin-top: 70px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 14px;
}
.tu-next a { text-decoration: none; font-weight: 600; }
.tu-next a:hover { text-decoration: underline; }
.tu-next span { color: var(--muted); }

.tu-foot {
  margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
}