/* ---------- Manual ----------
   /manual only, loaded after styles.css. Built from the document components
   there; only what those cannot cover lives here. It is its own file so the
   shared styles.css?v= line in every other page stays untouched.

   Prose rules use direct-child selectors for the same reason styles.css does:
   a bare `.m-copy p` would outrank the single-class utilities. */

/* The header's MANUAL link, lit while you are on the manual. */
.nav a[aria-current="page"]{color:var(--ink)}

/* Contents: a hairline grid of chapter links, seven-segment number first. */
.toc{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);
}
.toc > a{
  display:flex;align-items:baseline;gap:14px;
  min-height:44px;padding:14px 18px;background:var(--cell);
  font:500 15px/1.35 var(--sans);color:var(--ink-2);
}
.toc > a > b{flex:none;width:26px;font:700 13px/1 var(--seg);color:var(--red-2)}
.toc > a:hover{color:var(--ink)}
.toc > a:hover > b{color:var(--red-hover)}

/* A screenshot in a drawn bezel. The Simulator's alpha mask already rounds
   the screen; the radius here is the case around it, in percent of each axis
   so it stays circular at any width (the shot is 1206 × 2622). */
.shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.shot > img{
  display:block;width:100%;height:auto;
  padding:6px;border-radius:15.5% / 7.2%;
  background:#151413;border:1px solid var(--hair-3);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.shot > figcaption{
  max-width:26ch;text-align:center;
  font:400 7px/1.6 var(--pixel);letter-spacing:.12em;color:var(--meta);
}

/* A feature: the screen beside what it does. Stacks on phones. */
.m-item{
  display:grid;grid-template-columns:248px minmax(0,1fr);
  gap:44px;align-items:start;
}
.m-item > .shot{width:248px}
.m-item + .m-item,
.m-item + .m-strip,
.m-strip + .m-item,
.m-strip + .m-strip,
.doc-block + .m-item,
.doc-block + .m-strip,
.m-item + .doc-block,
.m-strip + .doc-block,
.m-table-wrap + .doc-block,
.doc-block + .m-table-wrap,
.m-table-wrap + .m-item,
.doc-block + .m-pair,
.m-pair + .doc-block{margin-top:56px}
.toc + .doc-block{margin-top:28px}

.m-copy{display:flex;flex-direction:column;gap:14px;min-width:0;padding-top:6px}
.m-copy > h3{
  margin:0;font:700 19px/1.3 var(--sans);
  letter-spacing:-.015em;color:var(--ink);
}
.m-copy > p{margin:0;font:400 16px/1.65 var(--sans);color:var(--body);text-wrap:pretty}
.m-copy > ul,.m-copy > ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.m-copy > ul > li,.m-copy > ol > li{font:400 15.5px/1.55 var(--sans);color:var(--ink-2)}
.m-copy > ul > li::marker,.m-copy > ol > li::marker{color:var(--red-2)}
.m-copy > ul > li > b,.m-copy > ol > li > b,.m-copy > p > b{font-weight:600;color:var(--ink)}
.m-copy a,.m-table a{color:var(--red-hover);text-decoration:underline;text-underline-offset:3px}
.m-copy a:hover,.m-table a:hover{color:var(--ink)}
.m-copy > .callout{margin-top:4px}

/* UI words in running text, set the way the LCD sets them. */
.ui{
  font:400 .74em/1 var(--pixel);letter-spacing:.04em;color:var(--ink);
  white-space:nowrap;
}

/* Several states of one screen: a row that scrolls sideways on narrow
   screens, each shot snapping into place. */
.m-strip{display:flex;flex-direction:column;gap:18px;min-width:0}
.m-strip > .strip-head{margin:0}
.m-strip-row{
  display:flex;gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
  padding:4px 2px 18px;
}
.m-strip-row > .shot{flex:none;width:188px;scroll-snap-align:start}

/* Two crops side by side, for the speaker. */
.m-pair{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.m-pair > .shot{width:180px}
.m-pair > .shot > img{padding:0;border-radius:50%;background:none;border:0;box-shadow:none}

/* Settings and notices. Below 640px each row becomes a small card. */
.m-table-wrap{border:1px solid var(--hair-2)}
.m-table{width:100%;border-collapse:collapse}
.m-table th{
  padding:12px 16px;text-align:left;vertical-align:bottom;
  font:400 7px/1.4 var(--pixel);letter-spacing:.12em;color:var(--meta);
  border-bottom:1px solid var(--hair-2);
}
.m-table td{
  padding:13px 16px;vertical-align:top;
  font:400 14.5px/1.5 var(--sans);color:var(--body);
  border-top:1px solid var(--hair);
}
.m-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
/* Three columns: key, values, notes. Two: key, meaning. */
.m-table td:nth-child(2):not(:last-child){width:32%}
.m-table td:first-child{
  width:26%;
  font:400 8px/1.7 var(--pixel);letter-spacing:.08em;color:var(--ink);
}
.m-table td > b{font-weight:600;color:var(--ink-2)}
.m-table .grp td{
  padding-top:18px;background:none;
  font:400 7px/1 var(--pixel);letter-spacing:.14em;color:var(--red-2);
}

@media (max-width:820px){
  .m-item{grid-template-columns:200px minmax(0,1fr);gap:30px}
  .m-item > .shot{width:200px}
}

@media (max-width:640px){
  .toc{grid-template-columns:1fr}

  .m-item{grid-template-columns:1fr;gap:24px}
  .m-item > .shot{width:min(240px,72vw);justify-self:center}
  .m-item + .m-item,.m-item + .m-strip,.m-strip + .m-item,.m-strip + .m-strip,
  .doc-block + .m-item,.doc-block + .m-strip,.m-item + .doc-block,.m-strip + .doc-block,
  .m-table-wrap + .doc-block,.doc-block + .m-table-wrap,.m-table-wrap + .m-item,
  .doc-block + .m-pair,.m-pair + .doc-block{margin-top:48px}
  .m-strip-row > .shot{width:164px}

  .m-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .m-table,.m-table tbody,.m-table tr,.m-table td{display:block;width:auto}
  .m-table tr{padding:12px 14px;border-top:1px solid var(--hair)}
  .m-table tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
  .m-table tbody tr:nth-child(even) td{background:none}
  .m-table td{padding:0;border:0}
  .m-table td + td{margin-top:6px}
  .m-table td:first-child{width:auto}
  .m-table .grp{padding-top:20px;background:none}
}