/*
 * "Where and when" pages (BB_Where): home, makers, towns, a town, years, a
 * book, a scanned page, search. Look A: white, ink #16181c, one blue
 * #2346c8, grey #6b7280; IBM Plex Sans, IBM Plex Mono for printed lines.
 * Follows docs/site-options/2026-09-25-option-2-where-and-when.html.
 */
.bbw { max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.5; color: #16181c; }
.bbw * { box-sizing: border-box; }
.bbw a { color: #2346c8; text-decoration: none; }
.bbw a:hover { text-decoration: underline; }
.bbw h1, .bbw h2, .bbw h3 { font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: 0; text-transform: none; color: #16181c; }
body .bbw h1 { font-size: 28px; margin: 12px 0 0; }
body .bbw h2 { font-size: 20px; margin: 36px 0 8px; }
.bbw p { margin: 8px 0; }
.bbw ul, .bbw ol { margin: 6px 0 6px 20px; padding: 0; }
.bbw li { margin: 3px 0; }
.bbw .grey { color: #6b7280; }
.bbw .small { font-size: 14px; }
.bbw .mono, .bbw-ts { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.55; }

.bbw-crumbs { font-size: 14px; color: #6b7280; margin: 12px 0 4px; }
.bbw-lead { font-size: 18px; color: #6b7280; margin: 4px 0 0; }

.bbw-search { display: flex; gap: 8px; margin: 16px 0; }
.bbw-search input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid #16181c; border-radius: 0; background: #fff; color: inherit; }
.bbw-search button, .bbw-span button { font: inherit; padding: 8px 14px; border: 1px solid #16181c; border-radius: 0; background: #16181c; color: #fff; cursor: pointer; }

.bbw-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 16px; }
.bbw-cols div { padding: 3px 0; border-bottom: 1px solid #f0f1f3; display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.bbw-cols div a { overflow-wrap: anywhere; }
.bbw .n { color: #6b7280; font-variant-numeric: tabular-nums; }
.bbw-az { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0; }
.bbw-az a { min-width: 16px; }
.bbw-az a.on { color: #16181c; }
.bbw-az .n { font-size: 12px; }
.bbw-stats { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 20px 0 0; color: #6b7280; font-size: 14px; }
.bbw-stats--top { margin-top: 8px; }
.bbw-stats b { color: #16181c; font-weight: 500; }

.bbw-list { list-style: none; margin: 8px 0 !important; padding: 0; }
.bbw-list li { padding: 8px 0; border-bottom: 1px solid #f0f1f3; margin: 0; }
.bbw-list .meta { color: #6b7280; font-size: 14px; overflow-wrap: anywhere; }
.bbw-list .meta .mono { color: #16181c; }
.bbw-list .meta .how { color: #6b7280; }
.bbw-list .yr { display: inline-block; min-width: 108px; color: #6b7280; font-variant-numeric: tabular-nums; }

.bbw-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 16px; }
.bbw-bar a { font-variant-numeric: tabular-nums; }
.bbw-bar .n { font-size: 13px; margin-left: 4px; }

.bbw-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.bbw-table th, .bbw-table td { text-align: left; padding: 6px 8px 6px 0; border: 0; border-bottom: 1px solid #f0f1f3; vertical-align: top; }
.bbw-table th { font-weight: 500; color: #6b7280; }
.bbw-table td.num, .bbw-table th.num { text-align: right; padding-right: 12px; font-variant-numeric: tabular-nums; }
.bbw-table td.mono { overflow-wrap: anywhere; }

.bbw-span { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 16px 0; font-size: 14px; }
.bbw-span label { display: flex; flex-direction: column; gap: 2px; color: #6b7280; }
.bbw-span select, .bbw-span input { font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid #16181c; border-radius: 0; background: #fff; color: #16181c; }
.bbw-span input { width: 6.5em; }
.bbw-span select { max-width: 14em; }

.bbw-ts { margin: 16px 0; }
.bbw-ts .row { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 1px 0; }
.bbw-ts .row > span:last-child { overflow-wrap: anywhere; min-width: 0; }
.bbw-ts .ln { color: #6b7280; text-align: right; font-size: 12px; padding-top: 3px; user-select: none; }
.bbw-ts .head { font-weight: 600; }
.bbw-ts .hit { background: #eef1fb; box-shadow: 0 0 0 4px #eef1fb; }
.bbw-ts .two { font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 12px; color: #6b7280; }
.bbw-ts .row:target > span:last-child { background: #eef1fb; box-shadow: 0 0 0 4px #eef1fb; }
.bbw-pn { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; font-size: 15px; }

@media (max-width: 480px) {
	.bbw-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bbw-list .yr { min-width: 0; display: block; }
	.bbw-table th, .bbw-table td { padding-right: 6px; }
	.bbw-table td.num, .bbw-table th.num { padding-right: 8px; }
}

/* The maker page (BB_Maker_View, Option 2). */
.bbw-maker { margin-top: 4px; }
.bbw-maker .bb-mv-lead p { margin: 4px 0; }
.bbw-maker .bb-mv-era, .bbw-maker .bb-mv-count { font-size: 14px; color: #6b7280; }
.bbw-printed { margin: 20px 0; padding-left: 12px; border-left: 2px solid #e5e7eb; }
.bbw-printed .from { font-size: 14px; margin-bottom: 6px; }
.bbw-printed .from b { font-weight: 500; }
.bbw-printed pre { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin: 0; padding: 0; background: none; border: 0; }
.bbw-printed .links { font-size: 14px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bbw-printed .note { font-size: 14px; color: #6b7280; margin-top: 6px; }
.bbw-maker .bb-mv-notes { list-style: none; margin: 8px 0; font-size: 14px; color: #6b7280; }
.bbw-maker .bb-mv-labels ul { margin-left: 20px; }
/* Inside post content the theme's catalogue-card rules (small grey capital
   h2s, underlined links in lists) would win; the Option 2 page does not use them. */
body .entry-content .bbw h2 { font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #16181c; margin: 36px 0 8px; line-height: 1.25; }
body .entry-content .bbw li a, body .entry-content .bbw p a { text-decoration: none; }
body .entry-content .bbw li a:hover, body .entry-content .bbw p a:hover { text-decoration: underline; }
body .entry-content .bbw-maker { max-width: 720px; margin-left: auto; margin-right: auto; }