/* TinkrkniT user guide styles. Linked from manual_template.html (and the generated manual.html). */

:root { --bg:#fdfbf5; --ink:#222; --soft:#665f55; --rule:#b9b0a0; --link:#8a3a22; --box:#f3eee0; --code:#ebe5d6; --logo:invert(1);
  /* Note colors: caution (take care), info (worth knowing), tip (useful extra) */
  --caution-head:#ecd3b4; --caution-bg:#fbf3e7; --caution-edge:#b9783e;
  --info-head:#cfdbe8;    --info-bg:#f0f4f8;    --info-edge:#5f7fa3;
  --tip-head:#d3e2c9;     --tip-bg:#f1f6ed;     --tip-edge:#6e8f5c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#1c1b19; --ink:#e8e4da; --soft:#a8a296; --rule:#524e46; --link:#e39a7e; --box:#262522; --code:#2f2d29; --logo:none;
    --caution-head:#4b3725; --caution-bg:#2a221a; --caution-edge:#a8713f;
    --info-head:#2d3b4b;    --info-bg:#1f252d;    --info-edge:#5d7d9f;
    --tip-head:#33422c;     --tip-bg:#212820;     --tip-edge:#6c8c5a;
  }
}
:root[data-theme="dark"] { --bg:#1c1b19; --ink:#e8e4da; --soft:#a8a296; --rule:#524e46; --link:#e39a7e; --box:#262522; --code:#2f2d29; --logo:none;
  --caution-head:#4b3725; --caution-bg:#2a221a; --caution-edge:#a8713f;
  --info-head:#2d3b4b;    --info-bg:#1f252d;    --info-edge:#5d7d9f;
  --tip-head:#33422c;     --tip-bg:#212820;     --tip-edge:#6c8c5a;
}

* { box-sizing: border-box; }
html, nav.side, .table-wrap { scrollbar-width:thin; scrollbar-color:var(--rule) var(--bg); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--rule); border:2px solid var(--bg); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--soft); }
::-webkit-scrollbar-corner { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font:16.5px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.layout { display:grid; grid-template-columns:270px minmax(0,1fr); max-width:1140px; margin:0 auto; }
.page { max-width:800px; width:100%; padding:48px 32px 96px; }
nav.side { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; padding:28px 16px 28px 20px; border-right:1px solid var(--rule); font-size:15px; }
.logo { display:block; flex:none; height:auto; filter:var(--logo); }
.wordmark { font-family:Sora, system-ui, sans-serif; font-weight:700; letter-spacing:-.01em; }
nav.side a.back { display:inline-block; margin:0 0 10px; padding:5px 12px; border:1px solid var(--rule); border-radius:999px; color:var(--soft); font-weight:600; font-size:14px; }
nav.side a.back:hover { color:var(--ink); border-color:var(--soft); }
nav.side .grp { display:flex; align-items:center; gap:6px; width:100%; margin:18px 0 4px; padding:2px 8px; border:0; background:none; cursor:pointer; text-align:left; font:bold 12px/1.4 system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
nav.side .grp:hover { color:var(--ink); }
nav.side .grp::before { content:""; width:0; height:0; border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; transform:rotate(90deg); transition:transform .15s; }
nav.side .closed .grp::before { transform:none; }
nav.side .closed .grp-links { display:none; }
nav.side a { display:block; padding:3px 8px; border-radius:4px; color:var(--ink); text-decoration:none; line-height:1.4; }
nav.side a:hover { background:var(--box); }
nav.side a.on { background:var(--box); color:var(--link); font-weight:600; }
nav.side a.sub { padding-left:22px; color:var(--soft); font-size:14px; }

header.title { margin-bottom:24px; }
.stitches { display:none; }
header.title { border-bottom:1px solid var(--rule); padding-bottom:20px; }
/* Logo and wordmark share the first row, so the logo centers on the wordmark alone */
header.title .masthead { display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; margin:0 0 12px; }
header.title .masthead .logo { grid-row:1; width:52px; }
header.title .masthead > :not(.logo) { grid-column:2; }
header.title h1 { font-size:40px; line-height:1.15; margin:0; }
header.title .sub { margin:4px 0 0; font-size:19px; font-weight:600; line-height:1.3; color:var(--soft); }
header.title .crumb { margin:6px 0 0; font-size:14px; font-weight:600; line-height:1.4; }
p.updated { margin:-14px 0 24px; font-size:14px; color:var(--soft); }
header.title p.lede { margin:0; color:var(--soft); }

.part { margin:72px 0 0; padding-top:14px; border-top:3px double var(--rule); font-size:13px; font-weight:bold; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.part + section h2 { margin-top:10px; }
h2 { font-size:27px; line-height:1.25; margin:56px 0 12px; scroll-margin-top:16px; }
h2 .num { display:none; }
h3 { font-size:19px; margin:28px 0 6px; scroll-margin-top:16px; }
p { margin:0 0 14px; }
a { color:var(--link); }
ul, ol { padding-left:1.4em; margin:0 0 16px; }
li { margin-bottom:5px; }
code, kbd { font:15px Consolas, "Courier New", monospace; background:var(--code); padding:1px 5px; }
kbd { border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px; white-space:nowrap; }
pre { margin:0 0 16px; padding:14px 16px; background:var(--code); border-radius:6px; overflow-x:auto; font:14px/1.55 Consolas, "Courier New", monospace; }
.soft { color:var(--soft); }
ol.steps { list-style:decimal; padding-left:1.4em; }

/* Notes: add .caution, .info or .tip; colors come from the tokens in :root */
.note { --note-head:var(--rule); --note-bg:var(--box); --note-edge:var(--rule);
  border:1px solid var(--note-edge); border-left-width:4px; background:var(--note-bg); padding:0 16px 2px; margin:24px 0; overflow:hidden; }
.note .tag { display:block; margin:0 -16px 12px; padding:8px 16px; background:var(--note-head); border-bottom:1px solid var(--note-edge); font-size:20px; font-weight:bold; line-height:1.3; }
.note.caution { --note-head:var(--caution-head); --note-bg:var(--caution-bg); --note-edge:var(--caution-edge); }
.note.info    { --note-head:var(--info-head);    --note-bg:var(--info-bg);    --note-edge:var(--info-edge); }
.note.tip     { --note-head:var(--tip-head);     --note-bg:var(--tip-bg);     --note-edge:var(--tip-edge); }
.note ul { padding-left:1.2em; }

.table-wrap { overflow-x:auto; margin:14px 0 22px; }
table { border-collapse:collapse; width:100%; font-size:16px; line-height:1.45; }
th, td { border:1px solid var(--rule); padding:6px 10px; text-align:left; vertical-align:top; }
th { background:var(--box); }
.swatch { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; border:1px solid rgba(0,0,0,.3); }

.oled img { display:block; width:100%; height:auto; }
.diagram { border:1px solid var(--rule); padding:10px; margin:18px 0; }
.diagram svg { width:100%; height:auto; display:block; }
.diagram text { fill:var(--ink); font:15px system-ui, sans-serif; }
.diagram .sub { fill:var(--soft); font-size:13px; }
.diagram .box { fill:var(--bg); stroke:var(--ink); stroke-width:1.5; }
.diagram .hl { stroke:var(--link); stroke-width:2.5; }
.diagram .wire { stroke:var(--soft); stroke-width:2; fill:none; }
.diagram .arrowhead { fill:var(--soft); }

.figure { margin:18px 0; }
.figure .oled { max-width:540px; margin:0 auto 14px; }
ol.legend { list-style:none; padding:0; counter-reset:c; }
ol.legend li { counter-increment:c; position:relative; padding-left:34px; margin-bottom:8px; font-size:16px; line-height:1.45; }
ol.legend li::before { content:counter(c); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:#a3412f; color:#fff; font:bold 14px/24px sans-serif; text-align:center; }
ol.legend b { display:block; }

.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin:14px 0; }
.gallery figure { margin:0; }
.gallery figcaption { font-size:15px; line-height:1.4; color:var(--soft); margin-top:4px; }
.gallery figcaption b { color:var(--ink); display:block; }

/* TinkrkniT screenshots (click to open full size) */
.shot { margin:18px 0; }
.shot a { display:inline-block; max-width:100%; }
.shot img { display:block; max-width:100%; height:auto; border:1px solid var(--rule); border-radius:6px; background:#1e1e1e; }
.shot figcaption { font-size:15px; line-height:1.4; color:var(--soft); margin-top:6px; }
.shot figcaption b { color:var(--ink); }
.shots { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; align-items:start; margin:14px 0; }
.shots .shot { margin:0; }
.beside { display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:22px; align-items:start; margin:18px 0; }
.beside .shot { margin:0; }
.beside > div > :first-child { margin-top:0; }
.schematic img { background:#fff; }

.lights { margin:0 0 16px; }
.light { margin-bottom:8px; }
.light .dot { display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:8px; vertical-align:-1px; }
.light .dot.alt { background:linear-gradient(90deg,#dc2626 50%,#2563eb 50%); }
.light h3, .light p { display:inline; font-size:17px; margin:0; font-weight:normal; }
.light h3 { font-weight:bold; }
.light h3::after { content:" - "; font-weight:normal; }

footer { margin-top:56px; color:var(--soft); }
footer .credit { border-top:1px solid var(--rule); padding-top:16px; }
footer .credit b { color:var(--ink); }
@media (max-width:860px) {
  .layout { display:block; }
  nav.side { position:static; height:auto; border-right:0; border-bottom:1px solid var(--rule); padding:16px; }
  .page { padding:28px 16px 64px; }
  header.title h1 { font-size:30px; }
  header.title .masthead .logo { width:40px; }
  .beside { grid-template-columns:minmax(0,1fr); }
}
@media print { nav.side { display:none; } .layout { display:block; } }

/* "For tinkerers" label, and the technical part set apart in the sidebar */
.pill { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--info-head); color:var(--ink); font:600 11px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing:.02em; text-transform:none; vertical-align:middle; white-space:nowrap; }
.pill.ok { margin-left:0; background:var(--tip-head); }
nav.side .grp-block.tinker { margin-top:22px; padding-top:4px; border-top:1px solid var(--rule); }