/* Chronologies of Lebanon, day by day (/facts/history/chronologies/). Type, colours and rules follow the 1975–1990
   chronology pages and the July 2006 section: Verdana 10–11px, #333 text, #880000 dates, dashed #CC6600 separators,
   #CC6633 navigation, #999966 band (here: entries added from the books). Secondary text #6c6c6c (4.5:1 on white). */
.chr-nav .titre { font: 10px Arial, Helvetica, sans-serif; color: #333; padding: 3px; vertical-align: top }
.chr-nav td { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #333 }
.chr-nav a { color: #333 }
.chr-nav a.on { text-decoration: underline }
.chr-nav .extra { padding-left: 10px; font: 10px Arial, Helvetica, sans-serif; color: #6c6c6c }

.chr { font: 11px/1.55 Verdana, Arial, Helvetica, sans-serif; color: #333; width: 92%; max-width: 880px; margin: 0 auto; padding: 22px 0 50px }
.chr a { color: #333 }
.chr .maintitle { border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 2px }
.chr .maintitle h1 { font: 12px Verdana, sans-serif; margin: 0 }
.chr .maintitle .back, .chr .maintitle .back a { font-size: 10px; color: #880000 }
.chr .lead { font-size: 11px; max-width: 680px; margin: 10px 0 }
.chr .date, .chr .date a { color: #880000 }
.chr .num, .chr .when { font-size: 10px; color: #6c6c6c }
.chr h2.date { font: 11px Verdana, sans-serif; margin: 26px 0 6px; padding-bottom: 3px; border-bottom: 1px dashed #CC6600; scroll-margin-top: 10px }

.chr .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 16px 0 }
.chr .card { display: flex; flex-direction: column; gap: 4px; border: 1px solid #ddd; border-top: 3px solid #880000; padding: 10px 12px; text-decoration: none }
.chr .card:hover, .chr .card:focus { border-color: #880000 }
.chr .card b { font-size: 12px; color: #880000 }

.chr .years, .chr .bracket { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 }
.chr .years a { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 5px 6px; border: 1px solid #ddd; text-decoration: none }
.chr .years a:hover, .chr .years a:focus { border-color: #880000 }
.chr .bracket a { font-size: 10px; color: #CC6633; padding: 1px 3px }
.chr .bracket a.on { color: #880000; font-weight: bold }

.chr .legend { font-size: 10px; color: #6c6c6c }
.chr .legend i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 10px; vertical-align: -1px }
.chr .legend i:first-child { margin-left: 0 }
.chr .legend i.o, .chr .grid a.o { background: #880000 }
.chr .legend i.a, .chr .grid a.a { background: #6b6b3a }  /* #999966 darkened under white figures: 5.5:1 */
.chr .cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; margin: 8px 0 20px }
.chr .mname { font-size: 10px; color: #6c6c6c; text-transform: uppercase; letter-spacing: .05em }
.chr .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 3px }
.chr .grid span, .chr .grid a { font-size: 9px; line-height: 1; text-align: center; padding: 4px 0; color: #aaa; border: 1px solid #eee; text-decoration: none }
.chr .grid a { color: #fff; border-color: transparent }
.chr .grid a.oa { background: linear-gradient(135deg, #880000 50%, #6b6b3a 50%) }

.chr .en { border: 1px solid #e4e1da; border-left: 3px solid #880000; padding: 8px 12px; margin: 8px 0 }
.chr .en.add { border-left-color: #999966; background: #f8f7f2 }
.chr .en .tag, .chr .otd-item .tag { font-size: 9.5px; color: #6c6c6c; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 3px }
.chr .en .tag a { color: #6c6c6c; text-transform: none; letter-spacing: 0 }
.chr .en .prec { text-transform: none; letter-spacing: 0 }
.chr .titre { font-size: 11px }
.chr .note { margin: 8px 0 4px; padding: 6px 9px; background: #f3f1ec; border-left: 2px solid #CC6600 }
.chr .lab { display: block; font-size: 9.5px; color: #6c6c6c; text-transform: uppercase; letter-spacing: .05em }
.chr .conf, .chr .arch { font-size: 10.5px; margin: 6px 0 0 }
.chr .arch a { color: #880000 }
.chr .mem { margin-top: 6px; font-size: 10.5px }
.chr .mem ul { margin: 2px 0; padding-left: 16px }
.chr .mem .kind { font-size: 9px; color: #6c6c6c; text-transform: uppercase }
.chr .mem .by { color: #6c6c6c }
.chr details.src { margin-top: 6px; font-size: 10.5px }
.chr details.src summary { cursor: pointer; color: #CC6633 }
.chr details.src ul { margin: 4px 0; padding-left: 16px }
.chr details.src li { margin: 4px 0 }
.chr .given { color: #880000; font-size: 10px }

.chr form.otd { margin: 12px 0; font-size: 11px }
.chr form.otd select, .chr form.otd button { font: 11px Verdana, sans-serif }
.chr .otd-item { border-left: 3px solid #880000; padding: 3px 0 3px 9px; margin: 6px 0 }
.chr .otd-item.add { border-left-color: #999966 }
.chr ul.books li { margin: 5px 0 }

@media (max-width: 600px) {
  .chr { width: auto; padding: 16px 16px 40px; font-size: 12px }
  .chr .titre, .chr .lead { font-size: 12px }
  .chr .cards { grid-template-columns: 1fr }
}

/* The dates matrix (…/dates/): the view of 111101's "chronology by dates" (chrono_dates_all, 2003): the news field
   on top (Verdana 11 #333, a black hairline frame), the dark #333 table, bold month and year titles, the day numbers
   in Arial 9 #ccc, five to a line in each month, and the orange ring (#f60) on the day shown. Refined for 2026: the
   panel stays in view while the grid scrolls, entries from the books are told apart, the row and column of the day
   shown are lit. */
.chr .views { margin: 14px 0 }
.chr .view-dates { display: flex; flex-direction: column; gap: 3px; max-width: 520px; padding: 9px 12px; border: 1px solid #333; background: #333; color: #ccc; text-decoration: none }
.chr .view-dates b { color: #fff; font-size: 12px }
.chr .view-dates span { font-size: 10.5px }
.chr .view-dates:hover, .chr .view-dates:focus { outline: 1px solid #f60; outline-offset: 2px }
/* one fixed height whatever the day holds, so the grid below never moves; a long day scrolls inside the panel */
.chr .mx-news { position: sticky; top: 0; z-index: 3; background: #fff; border: 1px solid #000; padding: 8px 12px 10px; margin: 14px 0 4px; box-sizing: border-box; height: clamp(150px, 30vh, 260px); overflow: auto; overscroll-behavior: contain; box-shadow: 0 6px 10px -8px rgba(0,0,0,.35) }
.chr .mx-ready { margin: 0; color: #333 }
.chr .mx-when { margin: 0 0 6px; font-weight: bold; color: #880000 }
.chr .mx-ev { margin: 0 0 7px; padding-left: 8px; border-left: 2px solid #880000 }
.chr .mx-ev.a { border-left-color: #b9a75e }
.chr .mx-tag { display: block; font-size: 9px; color: #6c6c6c; text-transform: uppercase; letter-spacing: .05em }
.chr .mx-more { display: inline-block; margin: 2px 14px 0 0; font-size: 10.5px; color: #880000 }
.chr .mx-legend { font-size: 10px; color: #6c6c6c; margin: 4px 0 8px }
.chr .mx-legend i { display: inline-block; width: 14px; height: 11px; margin: 0 4px 0 12px; vertical-align: -1px; background: #333; position: relative }
.chr .mx-legend i:first-child { margin-left: 0 }
.chr .mx-legend i::after { content: '9'; position: absolute; inset: 0; font: 9px/11px Arial, sans-serif; text-align: center }
.chr .mx-legend i.o::after { color: #ccc } .chr .mx-legend i.a::after { color: #e2cf86 } .chr .mx-legend i.oa::after { color: #fff; text-decoration: underline #e2cf86 }
.chr .mx-legend i.ring { background: #fff; border-radius: 50%; width: 11px; box-shadow: inset 0 0 0 1.5px #f60 }
.chr .mx-legend i.ring::after { content: none }
.chr .mx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
.chr .mx-table { border-collapse: collapse; width: 100%; min-width: 760px; table-layout: fixed }
.chr .mx-caption { caption-side: bottom; text-align: left; font-size: 10px; color: #6c6c6c; padding-top: 6px }
.chr .mx-table th { font: bold 11px Verdana, sans-serif; color: #333; padding: 2px 0 3px; text-align: center }
.chr .mx-table thead th.is-col { color: #f60 }
.chr .mx-table .mx-corner { width: 42px }
.chr .mx-table tbody th { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; padding: 3px 6px 3px 0; vertical-align: top; width: 42px }
.chr .mx-table tbody tr.is-row th { color: #f60 }
.chr .mx-table td { background: #333; border: 1px solid #666; vertical-align: top; padding: 3px 2px 4px; line-height: 0 }
.chr .mx-table tbody tr:hover td, .chr .mx-table tbody tr.is-row td { background: #3b3b3b }
.chr .mx-d { display: inline-block; width: 20%; min-width: 11px; box-sizing: border-box; padding: 2px 0; text-align: center; font: 9px/1 Arial, Helvetica, sans-serif; color: #ccc; text-decoration: none; border-radius: 50%; cursor: pointer }
.chr .mx-d.a { color: #e2cf86 }
.chr .mx-d.oa { color: #fff; text-decoration: underline #e2cf86; text-underline-offset: 2px }
.chr .mx-d:hover { color: #fff }
.chr .mx-d.on { color: #fff; box-shadow: inset 0 0 0 1.5px #f60 }
.chr .mx-d:focus-visible { outline: 1px dotted #f60; outline-offset: 0 }
@media (max-width: 760px) {
  .chr .mx-news { height: clamp(160px, 38vh, 300px) }
  .chr .mx-d { font-size: 10px; padding: 4px 0; min-width: 16px }
}
.chr.chr-wide { max-width: 1180px }
.chr .mx-d { scroll-margin-top: var(--mx-panel, 160px); scroll-margin-bottom: 10px }

/* ---------------------------------------------------------------- years of the chronology, in the left menu */
.chr-nav .chr-years { display: grid; gap: 1px; margin: 5px 0 2px 10px; width: 100px }
.chr-nav .chr-years a { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 4px; padding: 0 2px; font: 10px/14px Arial, Helvetica, sans-serif; color: #333; text-decoration: none }
.chr-nav .chr-years.on-timeline a { grid-template-columns: 27px 1fr 15px }
.chr-nav .chr-years a:hover { background: #eee }
.chr-nav .chr-years a.on { background: #eee }
.chr-nav .chr-years a.on .y { color: #880000; font-weight: bold }
.chr-nav .chr-years .bar { display: block; height: 4px; background: #eee }
.chr-nav .chr-years .bar i { display: block; height: 100%; background: #b9a75e }
.chr-nav .chr-years .dis { font-size: 9px; line-height: 11px; color: #fff; text-align: center; border-radius: 6px }
.chr-nav .chr-years .dis:not(:empty) { background: #e05a00 }
.chr-nav .chr-years a:focus-visible { outline: 2px solid #f60; outline-offset: 0 }
.chr .chr-views b { color: #880000; font-weight: normal; text-decoration: underline }
.chr .views .view-timeline { margin-top: 8px }

/* ---------------------------------------------------------------- the timeline (…/<slug>/timeline/)
   Dates on a central line, the event on its left, the books' accounts on its right; the site's orange where the books
   disagree. The options bar stays at the top while the timeline scrolls. */
.chr .tl-legend { font-size: 10px; color: #6c6c6c; margin: 8px 0 4px }
.chr .tl-legend i { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 12px; vertical-align: -1px; border: 2px solid #b9a75e; box-sizing: border-box }
.chr .tl-legend i:first-child { margin-left: 0 }
.chr .tl-legend i.o { border-color: #880000 } .chr .tl-legend i.d { border-color: #f60; background: #fff5ec }
.chr .tl-bar { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; background: #fff;
  border-top: 1px solid #333; border-bottom: 1px solid #ddd; padding: 7px 0; margin: 4px 0 0; font-size: 11px }
.chr .tl-seg { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; align-items: center }
.chr .tl-seg legend { float: left; margin-right: 6px; color: #6c6c6c; padding: 0 }
.chr .tl-switch { display: inline-flex; gap: 4px; align-items: center; cursor: pointer }
.chr .tl-count { margin-left: auto; color: #6c6c6c; font-size: 10px }
.chr .tl-bar input:focus-visible, .chr .tl-more:focus-visible { outline: 2px solid #f60; outline-offset: 1px }
.chr .tl-list { list-style: none; margin: 0; padding: 0; position: relative }
.chr .tl-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; background: #333 }
.chr .tl .lab { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: #6c6c6c; margin-bottom: 2px }
.chr .tl-year { position: relative; text-align: center; margin: 22px 0 6px; z-index: 1 }
.chr .tl-year span { display: inline-block; background: #333; color: #fff; font: bold 14px Verdana, sans-serif; padding: 3px 14px; letter-spacing: .05em }
.chr .tl-month { position: relative; text-align: center; margin: 10px 0 6px; z-index: 1 }
.chr .tl-month span { display: inline-block; background: #fff; border: 1px solid #333; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; padding: 1px 8px }
.chr .tl-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 0 12px; align-items: start; margin: 0 0 12px; position: relative }
.chr .tl-event { grid-column: 1; background: #fff; border: 1px solid #ddd; border-right: 3px solid #b9a75e; padding: 7px 10px 8px }
.chr .k-o .tl-event { border-right-color: #880000 }
.chr .tl-date { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline }
.chr .tl-date time { font-weight: bold; color: #5c5c30 }
.chr .k-o .tl-date time { color: #880000 }
.chr .tl-kind { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: #6c6c6c }
.chr .tl-title { font: bold 11px/1.5 Verdana, sans-serif; margin: 0 0 3px; color: #222 }
.chr .k-o .tl-title { font-weight: normal }
.chr .tl-text { margin: 0 0 4px }
.chr .tl-note, .chr .tl-mem { margin: 6px 0 0; padding: 5px 8px; font-size: 10.5px }
.chr .tl-note { background: #f4f4ee }
.chr .tl-mem { background: #f7f5ef }
.chr .tl-mem .kind { font-size: 9px; text-transform: uppercase; color: #6b6b3a }
.chr .tl-mem ul { margin: 0; padding-left: 14px }
.chr .tl-arch { margin: 5px 0 0; font-size: 10.5px }
.chr .tl-open { display: inline-block; margin-top: 5px; font-size: 10px; color: #880000 }
.chr .tl-node { grid-column: 2; position: relative; z-index: 1; justify-self: center; width: 46px; text-align: center; background: #fff; border: 2px solid #b9a75e; padding: 3px 0; line-height: 1.05 }
.chr .k-o .tl-node { border-color: #880000 }
.chr .tl-dd { display: block; font: bold 15px Verdana, sans-serif; color: #333 }
.chr .tl-mm { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: #6c6c6c }
.chr .tl-mm.wide { font: bold 11px Verdana, sans-serif; color: #333; padding: 2px 0 }
.chr .tl-span { display: block; font-size: 8px; color: #8a8a8a; text-transform: uppercase }
.chr .is-disputed .tl-node { border-color: #f60; background: linear-gradient(to right, #fff 50%, #fff5ec 50%) }
.chr .tl-side { grid-column: 3; min-width: 0 }
.chr .tl-differ, .chr .tl-src { padding: 5px 8px; font-size: 10.5px }
.chr .tl-differ { background: #fff5ec; border-left: 3px solid #f60 }
.chr .tl-differ .lab { color: #c45200 }
.chr .tl-why { margin: 0 0 4px }
/* the books' accounts of events they agree on: only when the reader shows the sources */
.chr .tl-src { display: none; background: #f6f6f6; border-left: 3px solid #b9a75e }
.chr .tl.show-src .tl-src { display: block }
.chr .tl-cmp { list-style: none; margin: 4px 0 0; padding: 0 }
.chr .tl-cmp li { background: #fff; border-top: 1px solid #ecdccd; padding: 4px 6px }
.chr .tl-cmp .who { margin: 0 0 1px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline }
.chr .tl-cmp .g { color: #6c6c6c; font-size: 10px }
.chr .tl-cmp li.differs .g { color: #c45200; font-weight: bold }
.chr .tl-cmp li.differs .g::before { content: "≠ " }
.chr .tl-cmp .ref { display: none; color: #8a8a8a; font-size: 9.5px; overflow-wrap: anywhere }
.chr .tl.show-src .tl-cmp .ref { display: inline }
.chr .tl-cmp p { margin: 0 }
.chr .tl.only-o .k-a, .chr .tl.only-a .k-o { display: none }
.chr .tl.only-dis .tl-row:not(.is-disputed), .chr .tl.only-dis .tl-month { display: none }
.chr .tl-more { display: block; margin: 18px auto 6px; font: bold 11px Verdana, sans-serif; color: #fff; background: #333; border: 0; padding: 8px 22px; cursor: pointer }
.chr .tl-more:hover { background: #880000 }
.chr .tl-more[disabled] { opacity: .5; cursor: progress }
.chr .tl-earlier { background: #fff; color: #333; border: 1px solid #333; font-weight: normal }
.chr .tl-end { text-align: center; color: #6c6c6c; font-size: 10px; margin: 18px 0 }
@media (max-width: 760px) {
  .chr .tl-bar { position: static }
  .chr .tl-count { margin-left: 0; width: 100% }
  .chr .tl-list::before { left: 23px }
  .chr .tl-year, .chr .tl-month { text-align: left }
  .chr .tl-row { grid-template-columns: 50px minmax(0, 1fr); gap: 6px 10px }
  .chr .tl-node { grid-column: 1; grid-row: 1 / span 2 }
  .chr .tl-event { grid-column: 2; grid-row: 1 }
  .chr .tl-side { grid-column: 2; grid-row: 2 }
}
@media (prefers-reduced-motion: no-preference) { .chr .tl-new { animation: tl-in .35s ease-out } }
@keyframes tl-in { from { opacity: .3 } to { opacity: 1 } }