/*! StiffStruct, (c) 2026 Mohammad Asad. All rights reserved. Proprietary: copying, mirroring or reusing this code is not permitted without written permission (see terms.html#intellectual-property). build 20261018-2109 */
/* How-it-works tutorial: screenshot figures, numbered instructions and the click-to-enlarge lightbox.
 * Loaded after css/tokens.css and css/site.css. All colours are tokens, so light / dark / high / normal contrast just work.
 * Class prefix: t-
 */

.t-toc { margin: 0 0 40px; }
.t-quick { margin-bottom: 8px; }

/* ---- one tutorial section = text column + screenshot column ---- */
.t-section { padding: 52px 0 8px; border-top: 1px solid var(--border); }
.t-section:first-of-type { border-top: 0; padding-top: 24px; }
.t-section > h2 { display: flex; align-items: center; gap: 12px; margin-bottom: .35em; }
.t-num { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font-size: 1.05rem; font-weight: 800; color: var(--accent-fg); background: var(--accent); }
.t-lead { color: var(--fg-muted); max-width: 70ch; margin-bottom: 20px; }
.t-sub { margin: 36px 0 12px; font-size: 1.2rem; }
.t-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; margin: 0 0 12px; }
.t-grid > * { min-width: 0; }
@media (min-width: 980px) {
  .t-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; }
  .t-grid.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .t-grid.is-flip > .t-text { order: 2; }
  .t-grid.is-wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.t-text > :last-child { margin-bottom: 0; }

/* ---- numbered instructions ---- */
.t-ol { counter-reset: t; list-style: none; margin: 0 0 1em; padding: 0; }
.t-ol > li { counter-increment: t; position: relative; margin: 0 0 12px; padding: 2px 0 2px 42px; }
.t-ol > li::before {
  content: counter(t); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px;
  font-size: .85rem; font-weight: 800; color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%;
}
.t-ol b, .t-ol strong { color: var(--fg); }
.t-ol .s-meta { display: block; margin-top: 2px; }
.t-tip { margin: 16px 0; }

/* ---- screenshots ---- */
.t-fig { margin: 0; min-width: 0; }
.t-shot {
  position: relative; display: block; line-height: 0; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-sunken); box-shadow: var(--shadow-2);
}
.t-shot img { display: block; width: 100%; height: auto; max-width: 100%; }
.t-shot:hover { border-color: var(--accent); }
.t-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.t-shot::after {
  content: "Enlarge"; position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; line-height: 1.4; font-size: .78rem; font-weight: 700;
  color: var(--accent-fg); background: var(--accent); border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.t-shot:hover::after, .t-shot:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .t-shot::after { opacity: .92; transform: none; } }
.t-fig figcaption { margin: 10px 2px 0; font-size: .9rem; color: var(--fg-muted); }
.t-fig figcaption strong { color: var(--fg); }
.t-pair { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin: 8px 0 16px; }
@media (min-width: 760px) { .t-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- small helper tables / chips ---- */
.t-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; padding: 0; list-style: none; }
.t-chips li { padding: 4px 12px; font-size: .88rem; font-weight: 600; color: var(--fg); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 999px; }
.t-compare { margin: 12px 0 20px; }
.t-compare .s-table { min-width: 520px; }

/* ---- lightbox (native <dialog>) ---- */
.t-lightbox { width: min(1400px, 96vw); max-width: 96vw; max-height: 96vh; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: visible; }
.t-lightbox::backdrop { background: rgba(6, 8, 14, .84); }
.t-lb { display: grid; gap: 10px; padding: 12px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.t-lb-bar { display: flex; align-items: center; gap: 8px; }
.t-lb-cap { flex: 1; min-width: 0; margin: 0; font-size: .92rem; color: var(--fg); }
.t-lb-count { color: var(--fg-muted); font-size: .85rem; white-space: nowrap; }
.t-lb-btn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; font: inherit; font-weight: 700; color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; }
.t-lb-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.t-lb-btn[disabled] { opacity: .4; cursor: default; }
.t-lb-view { display: grid; place-items: center; min-height: 0; background: var(--bg-sunken); border-radius: var(--radius); overflow: auto; }
.t-lb-view img { display: block; max-width: 100%; max-height: calc(96vh - 110px); width: auto; height: auto; object-fit: contain; }
@media (max-width: 600px) {
  .t-section { padding-top: 40px; }
  .t-lightbox { width: 100vw; max-width: 100vw; }
  .t-lb { padding: 8px; border-radius: 0; }
  .t-lb-view img { max-height: calc(100vh - 120px); }
}
@media print {
  .t-shot { box-shadow: none; }
  .t-shot::after, .t-lightbox { display: none !important; }
  .t-section { break-inside: avoid-page; }
}