/* Manual page. Builds on /styles.css: the same navigation, panels, type, and
   square buttons as the home page. */
.manual-hero { padding-block: 150px 60px; }
.manual-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; margin-top: 26px; }
.manual-heading .intro { max-width: 420px; padding-bottom: 6px; }
.manual-toc { list-style: none; margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.manual-toc a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; background: #f4f5f7; border-radius: 2px; font-size: 14px; transition: background .2s, color .2s; }
.manual-toc a:hover { background: #edf2ff; color: var(--blue); }
.manual-toc span { font: 11px monospace; color: var(--muted); }

.manual-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 80px; align-items: start; }
.manual-split > * { min-width: 0; }
.manual-split h2 + .intro { margin-top: 26px; }
.manual-text > * + * { margin-top: 18px; }
.manual-text h3 { font-size: 18px; letter-spacing: -.3px; margin-top: 28px; }
.manual-text h3:first-child { margin-top: 0; }
.manual-text p, .manual-list dd, .manual-notes p { font-size: 15px; line-height: 1.65; }
.manual-text a, .manual-list a { text-decoration: underline; text-underline-offset: 3px; }
.panel code { font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; padding: 1px 5px; background: rgb(16 17 18 / 6%); border-radius: 2px; overflow-wrap: anywhere; }
.panel-black code, .panel-blue code { background: #ffffff21; }
pre { margin: 10px 0 0; padding: 16px 18px; background: #1c1d20; border-radius: 2px; overflow-x: auto; }
pre code, .panel-black pre code { padding: 0; background: none; color: #e9eaee; white-space: pre; overflow-wrap: normal; }

.manual-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.manual-steps li { counter-increment: step; position: relative; padding: 0 0 28px 56px; }
.manual-steps li::before { content: "0" counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 2px; background: var(--blue); color: #fff; font: 12px monospace; }
.manual-steps h3 { font-size: 20px; letter-spacing: -.4px; }
.manual-steps p { margin-top: 8px; color: #3d4046; }

/* Store buttons for the Wi-Fi setup app: square like every button on the site. */
.store-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.manual-text a.store { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 14px; background: var(--ink); color: #fff; border-radius: 2px; text-decoration: none; transition: background .2s, transform .2s; }
.manual-text a.store:hover { background: #2a2c31; transform: translateY(-2px); }
.store svg { flex: none; width: 24px; height: 24px; }
.store span { display: grid; font-size: 16px; font-weight: 600; line-height: 1.15; letter-spacing: -.2px; }
.store small { font-size: 10px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; color: #c3c5ca; }
@media (prefers-reduced-motion: reduce) { .manual-text a.store:hover { transform: none; } }

.manual-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.manual-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.manual-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.manual-table td:first-child { white-space: nowrap; }

.manual-list { margin: 0; display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 0 28px; }
.manual-list dt { font-weight: 600; padding-block: 16px; border-top: 1px solid var(--line); }
.manual-list dd { margin: 0; padding-block: 14px; border-top: 1px solid var(--line); }
.panel-blue .manual-list dt, .panel-blue .manual-list dd { border-color: #ffffff4a; }

.manual-notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 50px; }
.manual-notes p { color: var(--muted); }
.manual-notes p > strong:first-child { display: block; color: var(--ink); margin-bottom: 6px; }
.manual-notes p > strong:not(:first-child) { color: var(--ink); }

/* Device screens: the frame from the board's screenshot command, shown as
   pixels on a dark bezel. */
.screens { display: grid; gap: 22px; margin-top: 60px; }
.screens-3 { grid-template-columns: repeat(3, 1fr); }
.screens-2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.screen { margin: 0; padding: 12px; background: #0b0b0c; border: 1px solid #2a2b2e; border-radius: 10px; box-shadow: 0 18px 40px rgb(16 17 18 / 18%); }
.screen img { width: 100%; height: auto; image-rendering: pixelated; border-radius: 3px; }
.panel-black .screen { border-color: #3a3b3f; box-shadow: none; }
/* The firmware's own screens (task T-20261030-site-refresh): the D1 square, the RLCD 4:3 in its grey ink and paper. */
.screens-4 { grid-template-columns: repeat(4, 1fr); align-items: start; }
.screen img { image-rendering: auto; }
.screen.is-mono { background: #d7dbe0; border-color: #c4c9cf; }
/* A long page is shown from its top. */
.browser.is-tall img { max-height: 880px; object-fit: cover; object-position: top; }
.browser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }

/* Browser screenshots of the board's own pages. */
.browser-shots { display: grid; gap: 26px; margin-top: 60px; }
.browser { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 18px 40px rgb(16 17 18 / 10%); }
.browser::before { content: ""; display: block; height: 26px; background: radial-gradient(circle at 16px 13px, #d4d6db 4px, transparent 5px), radial-gradient(circle at 32px 13px, #d4d6db 4px, transparent 5px), radial-gradient(circle at 48px 13px, #d4d6db 4px, transparent 5px), #eceef1; border-bottom: 1px solid #dfe1e5; }
.browser img { width: 100%; height: auto; }
.browser-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 26px; align-items: start; }
.browser-phone { max-width: 320px; justify-self: center; width: 100%; border-radius: 22px; }
.browser-phone::before { height: 18px; }
.panel-blue .browser { border-color: #ffffff4a; box-shadow: 0 18px 40px rgb(0 0 0 / 18%); }
#settings .browser-pair { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

@media (max-width: 1050px) {
  .manual-heading, .manual-split { grid-template-columns: 1fr; gap: 34px; }
  .manual-toc { grid-template-columns: repeat(3, 1fr); }
  .screens-4 { grid-template-columns: repeat(2, 1fr); }
  .manual-notes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .manual-hero { padding-block: 120px 40px; }
  .manual-toc { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .screens-3, .screens-2, .browser-pair, #settings .browser-pair, .browser-grid { grid-template-columns: 1fr; }
  .screens-4 { grid-template-columns: repeat(2, 1fr); }
  .screens { margin-top: 40px; }
  .manual-notes { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
  .manual-list { grid-template-columns: 1fr; }
  .manual-list dd { border-top: 0; padding-top: 0; }
  .manual-table { font-size: 13px; }
  .manual-table td:first-child { white-space: normal; }
}
@media (max-width: 420px) {
  .manual-toc { grid-template-columns: 1fr; }
}