/* Strategy guides and puzzle pages: breadcrumb, guide list, example boards. Board look comes from reversi.css. */
.learn { padding-bottom: 40px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 18px 0 8px; font-size: 12.5px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--rule-2); }
.crumbs a { color: var(--ink-2); }
.page-h { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; margin: 6px 0 10px; letter-spacing: .02em; }
.page-h small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.learn .lead { font-size: 15.5px; color: var(--ink-2); max-width: 46em; }
.guide.prose { max-width: 46em; }

/* guide list on the index */
.guides { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.guides a { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 2px 12px; padding: 14px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.guides a:hover { background: var(--paper-2); }
.guides .no { grid-row: span 3; font-family: var(--mono); font-size: 18px; color: var(--muted); }
.guides b { font-size: 17px; }
.guides .lead { font-size: 13.5px; color: var(--ink-2); }
.guides .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* example board */
.ex { margin: 18px 0 26px; padding: 12px; border: 2px solid var(--ink); background: var(--surface); max-width: 460px; }
.ex-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.ex-head b { background: var(--hl); color: var(--hl-ink); padding: 0 6px; }
.ex-head span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ex .board .sq, .pz-static .board .sq { position: relative; display: block; border: 0; padding: 0; margin: 0; border-radius: 0; background: var(--felt); min-width: 0; font: inherit; }
.ex .board .sq:nth-child(odd), .pz-static .board .sq:nth-child(odd) { background: var(--felt-2); }
.ex .board button.sq { cursor: pointer; }
.ex .board button.sq:focus-visible { outline: 3px solid var(--hl); outline-offset: -3px; }
.ex .board .sq.picked::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--hl); z-index: 6; }
.ex figcaption { margin-top: 10px; font-size: 14px; }
.ex figcaption p, .ex figcaption ul { margin: 4px 0; color: var(--ink-2); }
.ex figcaption ul { padding-left: 1.2em; font-size: 13px; }
.ex-line { font-size: 12.5px; }
.ex-line span { font-family: var(--mono); }
.ex-out { margin: 8px 0 0; padding: 8px 10px; background: var(--paper-2); border-left: 4px solid var(--ink); font-size: 13.5px; min-height: 3.2em; }

/* puzzle links */
.plinks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plinks li { display: grid; border: 1px solid var(--rule-2); padding: 6px 10px; font-size: 13px; }
.plinks span { font-size: 11.5px; color: var(--muted); }

/* opening pages */
.oline { margin-top: 30px; }
.oline h2 small { display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: .04em; }
.oseq span, .otable .mono { font-family: var(--mono); }
.octl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.octl button { font-size: 12.5px; padding: 4px 10px; }
.opos { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 6.5em; text-align: center; }
.otable { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 4px; }
.otable th, .otable td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--rule); }
.otable thead th { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--muted); font-weight: 400; border-bottom: 2px solid var(--ink); }
.otable tbody th { font-family: var(--mono); }
.otable td.num { font-family: var(--mono); }
.learn .note { font-size: 13px; color: var(--muted); }
.ex .board .sq .mk { border-width: 3px; }
/* data article (parity-data): wide table scrolls inside its box, never the page */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll .otable { min-width: 560px; }
.ex-moves { margin: 6px 0 0; padding-left: 1.2em; font-size: 13px; }