/* NAMCHE modes page: the few rules modes.html needs on top of manual.css. DS tokens only. */
.chap code{font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-code)}
.modelinks{list-style:none;margin:0;padding:0;display:grid}
.modelinks a{display:flex;align-items:center;min-height:calc(var(--space-8) * 6);border-bottom:var(--rule);text-decoration:none;font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-mono-meta);text-transform:uppercase}
.modelinks a:hover,.modelinks a:focus-visible{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset)}

/* Chapter 02: one row per token, two chips (day, night) and the verdict */
.tk{display:grid;gap:var(--space-8) var(--gutter);padding:var(--space-16) 0;border-top:var(--rule);align-items:center}
.tk:last-child{border-bottom:var(--rule)}
@media (min-width:900px){.tk{grid-template-columns:repeat(12,minmax(0,1fr))}.tk__k{grid-column:span 4}.tk__d,.tk__n{grid-column:span 3}.tk__s{grid-column:span 2;text-align:right}}
.tk__k{display:grid;gap:0}
.tk__d,.tk__n{display:flex;align-items:center;gap:var(--space-16);margin:0}
.tk__chip{flex:none;width:calc(var(--space-32) * 2);height:var(--space-32);background:var(--c);border:var(--rule)}
.tk__s{margin:0}
.tk__s.is-flip{color:var(--hook)}

/* Chapter 03: one field per state */
.gd{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.gd__field{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-32);min-height:calc(var(--space-64) * 3);padding:var(--space-16);background:var(--f);color:var(--k);border:var(--rule)}
.gd__sample{margin:0;font:var(--role-headline-title);line-height:var(--leading-hero);letter-spacing:var(--tracking-display)}
.gd__nav{display:flex;align-items:center;gap:var(--space-16);margin:0}
.gd__mark{flex:none;width:var(--space-32);height:var(--space-32);background:var(--m);-webkit-mask:var(--shape-logo) center/contain no-repeat;mask:var(--shape-logo) center/contain no-repeat}
.gd__rule{display:block;height:0;border-top:var(--hairline) solid var(--k)}
.gd__facts{margin:0;display:flex;flex-wrap:wrap;gap:0 var(--space-16)}
.gd__facts .is-low{color:var(--hook)}