/* The chronology search, 2026 (chronology_search.php): A, the 2003 search at /facts/history/chronology/search.html,
   and B, /facts/history/chronologies/search/. The palette of chrono_search.swf: cells #fff on #333, roll-over
   #99b3a4, selection #c99f57, weekday bar #414d46, fields #663300, button #bcd0ca edged #41504b; the 2003 results:
   dates #880000 11px, text 10px/13px, the dashed #CC6600 rule. Scoped under #content: A sits inside the 2003
   results page, whose own rules name its id. */
#content .csa, #content .csb-band, #content .csb-results { font: 10px/13px Verdana, Arial, Helvetica, sans-serif; color: #333 }
#content .csa a, #content .csb-band a { text-decoration: none }
#content .csa a:hover, #content .csb-band a:hover { text-decoration: underline }
#content .csa mark, #content .csb-results mark { background: #f6d9bf; color: inherit; padding: 0 1px }
#content .csa-stage, #content .csb-inner { font-family: Tahoma, Verdana, Geneva, sans-serif }

/* ---- the panel's parts, shared by A and B ---------------------------------------------------------------- */
#content .csa-prompt { position: absolute; left: 3px; top: 3px; font-size: 13px; color: #333 }
#content .csa-form, #content .csb-form { margin: 0; border: 1px solid #000; box-sizing: border-box; background: #fff }
#content .csa-form input[type=text], #content .csb-form input[type=text] { width: 100%; height: 100%; box-sizing: border-box; margin: 0; border: 0; border-radius: 0; padding: 0 3px 0 13px; font: 13px Tahoma, Verdana, sans-serif; color: #333; background: transparent; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none }
#content .csa-form:focus-within, #content .csb-form:focus-within { outline: 2px solid #c99f57; outline-offset: 1px }
#content .csa-pill { width: 70px; height: 18px; margin: 0; padding: 0; border: 1px solid #41504b; border-radius: 6px; background: #bcd0ca; color: #333; font: 12px/16px Tahoma, Verdana, sans-serif; cursor: pointer; -webkit-appearance: none; appearance: none }
#content .csa-pill:hover, #content .csa-pill:focus-visible { background: #c99f57; outline: none }
#content .csa-pill:active { background: #c33 }
#content .csa-grid { display: grid; gap: 1px; padding: 1px 1px 8px; background: #333 }
#content .csa-cell { display: block; padding: 0; background: #fff; color: #333; font-size: 10px; line-height: 19px; text-align: center; white-space: nowrap; overflow: hidden; text-decoration: none }
#content a.csa-cell.has { color: #880000 }
#content a.csa-cell.none { color: #bbb }
#content a.csa-cell:hover, #content a.csa-cell:focus-visible { background: #99b3a4; color: #fff; text-decoration: none; outline: none }
#content .csa-cell.on { background: #c99f57; color: #333 }
#content .csa-any { text-align: left; padding-left: 4px }
#content a.csa-any { color: #333 }
#content .csa-wd { background: #414d46; color: #fff; font-size: 9px; line-height: 15px; text-align: center }
#content .csa-wd.off { color: #414d46 }
#content .csa-blank { background: #333 }

/* ---- A: the band and the 610x137 panel, every part at its 2003 place --------------------------------------- */
#content .csa-band { width: 96%; margin-left: auto; border-bottom: 2px solid #333; display: flex; justify-content: center; padding-top: 2px; background: #fff }
#content .csa-stage { position: relative; width: 610px; height: 146px }
#content .csa-controls { position: absolute; left: 0; top: 0; width: 208px; height: 137px }
#content .csa-controls > * { position: absolute }
#content .csa-field { top: 30px; width: 52px; color: #663300; font-size: 11px; line-height: 14px; text-align: center; white-space: nowrap; overflow: hidden }
/* 52px for "12 months" (several chosen, October 2026), on the movie's centres */
#content .csa-fy { left: 19px } #content .csa-fm { left: 72px } #content .csa-fd { left: 126px }
#content .csa-step { top: 50px; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid #333; background: #fff; color: #333; font-size: 9px; line-height: 7px; text-align: center; text-decoration: none }
#content a.csa-step:hover, #content a.csa-step:focus-visible { background: #f93; outline: none; text-decoration: none }
#content a.csa-step:active { background: #c30 }
#content .csa-step.off { border-color: #bbb; color: #bbb }
#content .csa-ym { left: 30px } #content .csa-yp { left: 47px } #content .csa-mm { left: 84px } #content .csa-mp { left: 101px } #content .csa-dm { left: 137px } #content .csa-dp { left: 154px }
#content .csa-form { left: 2px; top: 76px; width: 203px; height: 24px }
#content .csa-controls .csa-pill { left: 43px; top: 110px }
#content .csa-modes { left: 118px; top: 112px; color: #663300; font-size: 9px; white-space: nowrap }
#content .csa-modes input { margin: 0 1px 0 0; vertical-align: -2px; accent-color: #663300 }
#content .csa-stage .csa-grid { position: absolute }
#content .csa-years { left: 210px; top: 17px; grid-template-columns: repeat(3, 39px); grid-auto-rows: 19px }
#content .csa-years .csa-cell { font-size: 11px }
#content .csa-months { left: 339px; top: 17px; grid-template-columns: repeat(3, 39px); grid-auto-rows: 19px }
#content .csa-days { left: 467px; top: 1px; grid-template-columns: repeat(7, 19px); grid-template-rows: 15px; grid-auto-rows: 19px; padding-bottom: 4px }
#content .csa-years .csa-any { grid-column: span 2 }
#content .csa-months .csa-void, #content .csa-months .csa-any { grid-column: span 3 }
#content .csa-days .csa-any { grid-column: span 5 }

/* ---- A: the results, in the 2003 page's own type ------------------------------------------------------- */
#content .csa-results { width: 85%; max-width: 780px; margin: 0 auto; padding-bottom: 60px }
#content .csa-intro { margin: 40px 0; text-align: center; color: #999 }
#content .csa-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 22px; padding: 12px 0 18px }
#content .csa-head p { margin: 0 }
#content .csa-bk { color: #cc6600 }
#content .csa-nav { display: flex; gap: 14px }
#content .csa-nav a, #content .csa-none a, #content .csa-pages a { color: #CC6633 }
#content .csa-books, #content .csb-switch { color: #663300; white-space: nowrap }
#content .csa-books i, #content .csb-switch i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 0; border: 1px solid #663300; vertical-align: -1px; background: #fff }
#content .csa-books.on i, #content .csb-switch.on i { background: #cc6600; box-shadow: inset 0 0 0 2px #fff }
#content .csa-none { text-align: center; color: #880000 }
#content .csa-pages { text-align: center; color: #CC6633; margin: 0 0 10px }
#content .csa-row { display: grid; grid-template-columns: 169px 1px minmax(0, 1fr); gap: 0 24px; padding: 12px 0; scroll-margin-top: 10px }
#content .csa-when { text-align: right; align-self: center; color: #880000; font-size: 11px; line-height: 14px }
#content .csa-when span { display: block }
#content .csa-w2 { color: #333; font-size: 10px }
#content .csa-tag { color: #cc6600; font-size: 9px; letter-spacing: .03em }
#content .csa-sep { border-right: 1px dashed #CC6600 }
#content .csa-what { align-self: center }
#content .csa-row.book .csa-when { color: #cc6600 }
#content .csa-row.book .csa-text { color: #555 }
#content .csa-more { margin: 4px 0 0; font-size: 9px; color: #999; display: flex; flex-wrap: wrap; gap: 0 12px }
#content .csa-more a, #content .csa-add summary { color: #880000 }
#content .csa-differ { color: #cc6600; cursor: default }
#content .csa-add { margin-top: 2px; font-size: 9px }
#content .csa-add summary { cursor: pointer; list-style: none; display: inline }
#content .csa-add summary::-webkit-details-marker { display: none }
#content .csa-note { margin: 4px 0 0; padding: 3px 0 3px 8px; border-left: 2px solid #c99f57; color: #555; font-size: 10px }

/* ---- B: one instrument for every chronology -------------------------------------------------------------- */
#content .csb-band { margin: 0 0 6px; padding: 12px 0 14px; border-bottom: 2px solid #333 }
#content .csb-inner { max-width: 900px }
#content .csb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px }
#content .csb-form { position: relative; width: 300px; height: 24px }
#content .csb-modes, #content .csb-kinds { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #663300; font-size: 10px }
#content .csb-modes input { margin: 0 3px 0 0; vertical-align: -2px; accent-color: #663300 }
#content .csb-chrs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 10px }
#content .csb-label { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #999; margin-right: 6px }
#content .csb-chr { border: 1px solid #333; background: #fff; color: #333; padding: 2px 7px; font-size: 10px }
#content .csb-chr span { color: #999 }
#content a.csb-chr:hover, #content a.csb-chr:focus-visible { background: #99b3a4; text-decoration: none; outline: none }
#content .csb-chr.on { background: #c99f57 }
#content .csb-chr.on span { color: #663300 }
/* the years, first to last, sharing the width; the chronologies' spans below on the same columns */
#content .csb-ruler, #content .csb-spans { display: grid; grid-template-columns: repeat(var(--years), minmax(0, 1fr)) 72px; align-items: end }
#content .csb-year { min-width: 0; height: 52px; border-left: 1px solid #f0ece4; background: #fff; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-decoration: none }
#content .csb-year.dec { border-left-color: #999 }
#content .csb-year i { display: block; width: 70%; max-width: 8px; background: #880000 }
#content .csb-year span { font-size: 8px; line-height: 13px; color: #666; letter-spacing: -.02em }
#content .csb-year .yyyy { display: none }
#content .csb-year.dec span { color: #333 }
#content .csb-year.none span { color: #ccc }
#content a.csb-year:hover, #content a.csb-year:focus-visible { background: #99b3a4; text-decoration: none; outline: none }
#content a.csb-year:hover i { background: #333 }
#content .csb-year.on { background: #c99f57 }
#content .csb-year.on i { background: #333 }
#content .csb-year.on span { color: #333; font-weight: bold }
#content .csb-anyyear { margin-left: 8px; align-self: end; height: 20px; padding: 0 7px; border: 1px solid #333; background: #fff; color: #333; font-size: 10px; line-height: 18px; white-space: nowrap; text-align: center }
#content .csb-anyyear.on { background: #c99f57 }
#content a.csb-anyyear:hover { background: #99b3a4; text-decoration: none }
#content .csb-spans { align-items: start; row-gap: 1px }
#content .csb-spans span { margin: 3px 3px 0 0; border-top: 2px solid #ddd; font-size: 9px; line-height: 12px; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#content .csb-spans span.in { border-color: #c99f57; color: #663300 }
#content .csb-cal { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 22px; margin-top: 10px }
#content .csb-when { flex: 1 1 230px; min-width: 0 }
#content .csb-when p { margin: 0 0 6px }
#content .csb-date { font-size: 16px; line-height: 20px; color: #333 }
#content .csb-steps, #content .csb-links { display: flex; flex-wrap: wrap; gap: 4px 16px }
#content .csb-steps a { color: #CC6633 }
#content .csb-steps .off { color: #ccc }
#content .csb-links a { color: #880000 }
#content .csb-months { grid-template-columns: repeat(6, 39px); grid-auto-rows: 19px }
#content .csb-months .csa-any { grid-column: span 6 }
#content .csb-days { grid-template-columns: repeat(7, 19px); grid-template-rows: 15px; grid-auto-rows: 19px; padding-bottom: 4px }
#content .csb-days .csa-any { grid-column: span 5 }
/* B: the results, as the year pages show them, with a month band of the 2003 results */
#content .csb-count { margin: 16px 0 6px; text-align: center; color: #666 }
#content .csb-count b { color: #333 }
#content .csb-dis { color: #cc6600 }
#content .csb-month { margin: 22px 0 0; padding: 1px 6px; background: #999966; color: #333; font: bold 10px/13px Verdana, Arial, sans-serif }
#content .csb-of { color: #880000; text-transform: none; letter-spacing: 0 }
#content .en.add .csb-of { color: #666633 }
#content .csb-full { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 0; font-size: 9.5px }
#content .csb-full a { color: #880000 }

/* ---- phones: the panels' parts stack; cells grow to finger size ---------------------------------------- */
@media (max-width: 640px) {
  #content .csa-band { width: auto; display: block; padding: 12px 16px 14px }
  #content .csa-stage { width: auto; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px }
  #content .csa-controls { position: static; width: auto; height: auto; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 6px; align-items: center }
  #content .csa-controls > * { position: static; left: auto; top: auto }
  #content .csa-form { grid-column: 1 / 5; grid-row: 1; width: auto; height: 34px; position: relative }
  #content .csa-form input[type=text], #content .csb-form input[type=text] { font-size: 16px }
  #content .csa-prompt { top: 7px; font-size: 15px }
  #content .csa-controls .csa-pill { grid-column: 5 / 7; grid-row: 1; width: auto; height: 34px; font-size: 14px; line-height: 32px }
  #content .csa-modes { grid-column: 1 / -1; grid-row: 2; font-size: 12px }
  #content .csa-field { grid-row: 3; width: auto; font-size: 13px; line-height: 18px }
  #content .csa-fy { grid-column: 1 / 3 } #content .csa-fm { grid-column: 3 / 5 } #content .csa-fd { grid-column: 5 / 7 }
  #content .csa-step { grid-row: 4; width: 34px; height: 30px; font-size: 16px; line-height: 28px }
  #content .csa-ym, #content .csa-mm, #content .csa-dm { justify-self: end }
  #content .csa-yp, #content .csa-mp, #content .csa-dp { justify-self: start }
  #content .csa-ym { grid-column: 1 } #content .csa-yp { grid-column: 2 } #content .csa-mm { grid-column: 3 } #content .csa-mp { grid-column: 4 } #content .csa-dm { grid-column: 5 } #content .csa-dp { grid-column: 6 }
  #content .csa-stage .csa-grid { position: static; padding-bottom: 1px }
  #content .csa-years, #content .csa-months { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 32px }
  #content .csa-days { grid-column: 1 / -1; grid-template-columns: repeat(7, 1fr); grid-template-rows: 22px; grid-auto-rows: 36px }
  #content .csa-cell, #content .csa-years .csa-cell { font-size: 13px; line-height: 32px }
  #content .csa-days .csa-cell, #content .csb-days .csa-cell { line-height: 36px }
  #content .csa-wd { font-size: 11px; line-height: 22px }
  #content .csa-results { width: auto; padding: 0 16px 40px }
  #content .csa-row { grid-template-columns: 86px 1px minmax(0, 1fr); gap: 0 12px }
  #content .csa-what { font-size: 12px; line-height: 16px }
  #content .csa-more, #content .csa-add { font-size: 11px; line-height: 18px }
  #content .csb-form { flex: 1 1 60%; width: auto; height: 34px }
  #content .csb-top .csa-pill { width: 80px; height: 34px; font-size: 14px; line-height: 32px }
  #content .csb-modes, #content .csb-kinds { font-size: 12px; gap: 8px 14px }
  #content .csb-chr { font-size: 12px; padding: 5px 8px }
  #content .csb-ruler { grid-template-columns: repeat(10, minmax(0, 1fr)) }
  #content .csb-year { grid-column: var(--col); height: 40px }
  #content .csb-year span { font-size: 10px }
  #content .csb-year .yy { display: none }
  #content .csb-year .yyyy { display: block }
  #content .csb-anyyear { grid-column: 1 / -1; margin: 6px 0 0; height: 32px; line-height: 30px; font-size: 12px }
  #content .csb-spans { display: none }
  #content .csb-cal { display: block }
  #content .csb-when { margin-bottom: 10px }
  #content .csb-months { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 32px; margin-bottom: 10px }
  #content .csb-days { grid-template-columns: repeat(7, 1fr); grid-template-rows: 22px; grid-auto-rows: 36px }
  #content .csb-cal .csa-cell { font-size: 13px; line-height: 32px }
  #content .csb-full { font-size: 11px; line-height: 18px }
}