/* July war 2006 chronology. Type, colours and rules follow the 1975–1990 chronology pages:
   Verdana 10–11px, #333 text, #880000 dates, dashed #CC6600 separators, #CC6633 navigation, #999966 year band. */
.j06-nav .titre { font: 10px Arial, Helvetica, sans-serif; color: #333; padding: 3px; vertical-align: top }
.j06-nav td { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #333 }
.j06-nav a { color: #333 }
.j06-nav a.on { text-decoration: underline }
.j06-nav .extra { padding-left: 10px; font: 10px Arial, Helvetica, sans-serif; color: #999 }
.lang-switch { font: 10px Verdana, Arial, sans-serif; color: #999; white-space: nowrap }
.restored-site .lang-switch a { color: #999; cursor: pointer }
.restored-site .lang-switch a.on { color: #880000 }

.j06 { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #333; width: 92%; max-width: 1180px; margin: 0 auto; padding: 22px 0 50px }
.j06 a { color: #333 }
.j06 .maintitle { font-size: 12px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 2px }
.j06 .maintitle h1 { font: 12px Verdana, sans-serif; margin: 0 }
.j06 .maintitle .back, .j06 .maintitle .back a { font-size: 10px; color: #880000 }
.j06 .lead { font: 10px/14px Verdana, sans-serif; max-width: 680px; margin: 10px 0 }
.j06 .linea { font: 11px Verdana, Arial, sans-serif; color: #999; white-space: nowrap; margin: 14px 0 6px }
.j06 .linea b { color: #333 }
.j06 .linea .sel { color: #333 }
.j06 .date, .j06 .date a { color: #880000 }
.j06 .extra { font-size: 10px; color: #999 }
.j06 .nav, .j06 .nav a, .j06 .bracket a { font-size: 10px; color: #CC6633 }
.j06 .bracket a.on { color: #880000; font-weight: bold }
.j06 .sep { border-right: 1px dashed #CC6600 }
.j06 .num { font-size: 10px; color: #999 }
.j06 .num b { color: #880000; font-weight: normal }
.j06 table.rows { border-collapse: collapse }
.j06 table.rows td { padding: 6px 10px; vertical-align: top; font-size: 10px; line-height: 13px }
.j06 table.rows td.date { text-align: right; white-space: nowrap; font-size: 11px }
.j06 .tip { position: fixed; pointer-events: none; background: #444; color: #fff; font: 10px Verdana, sans-serif; padding: 3px 6px; z-index: 50; display: none; white-space: nowrap }
.j06 .note { font: 9px Verdana, sans-serif; color: #ccc; background: #444; padding: 3px 6px; margin: 40px 0 0 }
.j06 .note a { color: #ccc }
.j06 .cols2 { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px }
@media (max-width: 900px) { .j06 .cols2 { grid-template-columns: 1fr } }

/* Hour grid */
.j06 .grid { display: grid; grid-template-columns: 34px repeat(var(--days), minmax(12px, 1fr)); gap: 1px; max-width: 980px; margin: 8px 0 6px; user-select: none }
.j06 .grid .h { font: 9px Verdana, sans-serif; color: #999; text-align: right; padding-right: 4px; line-height: 11px }
.j06 .grid .mo { font: 10px Verdana, sans-serif; color: #333; background: #ddd; text-align: center; line-height: 16px }
.j06 .grid .dn { font: 9px Verdana, sans-serif; color: #333; text-align: center; line-height: 13px }
.j06 .grid .dn a { color: inherit; display: block }
.j06 .grid .dn.after { color: #bbb }
.j06 .grid .c { height: 11px; display: block; position: relative }
.j06 .grid .c:hover, .j06 .grid .c:focus-visible { outline: 1px solid #333; z-index: 2 }
.j06 .grid .c.cf { outline: 1px solid #333; outline-offset: -1px }
.j06 .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font: 9px Verdana, sans-serif; color: #999 }
.j06 .legend i { display: inline-block; width: 12px; height: 9px; margin-right: 1px; vertical-align: -1px }
.j06 svg.chart text { font: 9px Verdana, sans-serif; fill: #999 }

/* Day page */
.j06 .daynav { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 2px; flex-wrap: wrap; gap: 6px }
.j06 .meta { font: 10px Verdana, sans-serif; color: #999; margin: 4px 0 12px }
.j06 .meta b { color: #880000; font-weight: normal }
.j06 .strip { display: grid; grid-template-columns: 96px repeat(24, 1fr); gap: 1px; margin: 4px 0 18px; max-width: 760px }
.j06 .strip span { font: 9px/10px Verdana, sans-serif; color: #999; white-space: nowrap; overflow: hidden }
.j06 .strip a { height: 10px; display: block }
.j06 table.day { border-collapse: collapse; width: 100%; table-layout: fixed }
.j06 table.day th { font: 10px Verdana, sans-serif; color: #CC6633; text-align: left; padding: 4px 8px 8px; font-weight: normal; border-bottom: 1px solid #ddd; position: sticky; top: 0; background: #fff; z-index: 1 }
.j06 table.day th .extra { color: #bbb }
.j06 table.day td { vertical-align: top; padding: 6px 8px; border-bottom: 1px dotted #e4e0d6 }
.j06 table.day td.hour { width: 40px; text-align: right; padding-right: 10px; color: #880000; font-size: 11px }
.j06 table.day td.sep { width: 1px; padding: 0 }
.j06 table.day tr:target td, .j06 table.day tr.focus td { background: #f6f1e4 }
.j06 .e { margin: 0 0 7px; font: 10px/13px Verdana, sans-serif; color: #333; overflow-wrap: anywhere }
.j06 .e:target { background: #f3dfb0; outline: 3px solid #f3dfb0 }
.j06 .e .tm { color: #999; margin-right: 4px; text-decoration: none }
.j06 .e .tm:hover { color: #880000 }
.j06 .e .dl { text-transform: uppercase; letter-spacing: .5px; font-size: 9px; color: #880000 }
.j06 .e .cite { color: #999 }
.j06 .e .also { font-size: 9px; color: #bbb; white-space: nowrap }
.j06 .e a.pl { color: inherit; text-decoration: underline dotted #CC6633; text-underline-offset: 2px }
.j06 .e mark { background: #f3dfb0; color: inherit }
.j06 .hide-nob .c-nob, .j06 .hide-bea .c-bea, .j06 .hide-tay .c-tay, .j06 .hide-lbu .c-lbu { display: none }
.j06 .side h2 { font: 10px Verdana, sans-serif; color: #CC6633; margin: 0 0 6px; text-transform: lowercase }
.j06 .side ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: 10px; line-height: 15px }
.j06 .side li .n { color: #999 }
.j06 .minimap { display: block; width: 100%; height: auto; background: #faf8f3; margin-bottom: 4px }
.j06 .minimap .v { fill: #d9d4c6 }
.j06 .minimap .s { fill: #CC6633 }
.j06 .minimap .p { fill: #880000 }
.j06 .protest { font-size: 10px; margin: 0 0 6px }

/* Lists: days, places, search */
.j06 .bars { display: inline-flex; gap: 1px; vertical-align: middle; height: 10px; align-items: flex-end }
.j06 .bars i { display: block; width: 3px; background: #CC6633 }
.j06 .spark { display: inline-grid; grid-template-columns: repeat(44, 4px); gap: 1px; vertical-align: middle }
.j06 .spark i { display: block; height: 9px; background: #eee }
.j06 .spark i.m { background: #ccc2a9 } .j06 .spark i.m2 { background: #cc6633 } .j06 .spark i.s { box-shadow: inset 0 -3px #880000 }
.j06 .filterbox { font: 11px Verdana, sans-serif; width: 220px }
.j06 .search-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 }
.j06 .search-form input[type=search] { width: 260px }
.j06 .pagination { display: flex; gap: 14px; font-size: 10px; margin: 12px 0 }
.j06 dl.facts dt { color: #880000; margin-top: 10px }
.j06 dl.facts dd { margin: 2px 0 0 0; max-width: 680px; line-height: 14px }
.j06 table.fig { border-collapse: collapse; margin: 6px 0 24px }
.j06 table.fig td, .j06 table.fig th { font: 10px Verdana, sans-serif; padding: 3px 10px; text-align: right; border-bottom: 1px dotted #e4e0d6 }
.j06 table.fig th { color: #CC6633; font-weight: normal }
.j06 table.fig td:first-child, .j06 table.fig th:first-child { text-align: left; max-width: 340px }
.j06 h2.sec { font: 11px Verdana, sans-serif; color: #333; margin: 28px 0 4px; border-bottom: 1px dashed #CC6600; padding-bottom: 2px }

/* Map view: black, like the chronology's phases diagram */
body.j06-dark, body.j06-dark .original-main { background: #000 }
.j06.dark { color: #999; width: auto; max-width: none; margin: 0; padding: 14px 22px 0 }
.j06.dark a { color: #ccc }
.j06.dark .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap }
.j06.dark .ttl { color: #fff; font-size: 11px; letter-spacing: .5px }
.j06.dark .ttl span { color: #666 }
.j06.dark .bracket a { color: #888 } .j06.dark .bracket a.on { color: #CC6633 }
.j06.dark .lang-switch a { color: #666 } .j06.dark .lang-switch a.on { color: #CC6633 }
.j06.dark .thread { width: 100%; height: 150px; display: block }
.j06.dark .thread text { font-family: Verdana, sans-serif }
.j06.dark .thread .node { cursor: pointer }
.j06.dark .caption { color: #4f8f8f; font-size: 10px; text-align: right; margin: -6px 0 6px }
.j06.dark .stage { display: grid; grid-template-columns: minmax(300px, 470px) minmax(0, 1fr); gap: 28px }
@media (max-width: 900px) { .j06.dark .stage { grid-template-columns: 1fr } }
.j06.dark .mapbox { position: relative }
.j06.dark .mapbox svg { width: 100%; height: auto; display: block }
.j06.dark .mapbox .city { font: 9px Verdana, sans-serif; fill: #6a6a6a }
.j06.dark .mapbox .country { font: 10px Verdana, sans-serif; fill: #333; letter-spacing: 3px }
.j06.dark .maptip { position: absolute; display: none; max-width: 260px; background: #111; border: 1px solid #333; color: #bbb; font: 10px/13px Verdana, sans-serif; padding: 5px 7px; pointer-events: none; z-index: 5 }
.j06.dark .maptip b { color: #CC6633; font-weight: normal }
.j06.dark .clock { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 8px }
.j06.dark .clock .now { color: #fff; font: 22px Verdana, sans-serif; letter-spacing: 1px; min-width: 72px }
.j06.dark .clock button { background: #000; color: #CC6633; border: 1px solid #333; font: 10px Verdana, sans-serif; padding: 3px 8px }
.j06.dark .clock input[type=range] { flex: 1; min-width: 160px; accent-color: #CC6633; background: transparent; border: 0 }
.j06.dark .counts { color: #666; font-size: 10px; margin-bottom: 8px }
.j06.dark .counts b { color: #fff; font-weight: normal }
.j06.dark .feed { max-height: 50vh; overflow: auto; border-top: 1px solid #222; padding-top: 6px; scrollbar-color: #333 #000 }
.j06.dark .feed .r { margin: 0 0 7px; font: 10px/14px Verdana, sans-serif; color: #aaa }
.j06.dark .feed .r .tm { color: #CC6633; margin-right: 6px; text-decoration: none }
.j06.dark .feed .r .src { color: #555; margin-right: 6px }
.j06.dark .feed .r .dl { color: #777; text-transform: uppercase; font-size: 9px; letter-spacing: .5px; margin-right: 4px }
.j06.dark .feed .r.new { color: #fff }
.j06.dark .feed .r.pl { cursor: pointer }
.j06.dark .elsewhere { border-top: 1px solid #222; margin-top: 14px; padding: 8px 0 12px; display: flex; gap: 30px; flex-wrap: wrap; font-size: 10px; color: #777 }
.j06.dark .elsewhere h3 { color: #4f8f8f; font: 10px Verdana, sans-serif; margin: 0 0 4px }
.j06.dark .elsewhere .city { color: #ddd }
.j06.dark .elsewhere .hrc b { color: #fff; font-weight: normal; font-size: 13px }
.j06.dark .note { margin: 6px -22px 0; background: #222; color: #777 }
.j06.dark noscript p { color: #ccc }

/* Phones: the four source columns become one stream, labelled by source. */
@media (max-width: 760px) {
  .j06 { width: auto; padding: 14px 12px 40px }
  .j06 .maintitle { flex-wrap: wrap }
  .j06 table.day, .j06 table.day tbody, .j06 table.day tr, .j06 table.day td { display: block; width: auto !important }
  .j06 table.day thead, .j06 table.day colgroup, .j06 table.day td.sep { display: none }
  .j06 table.day td { border: 0; padding: 2px 0 }
  .j06 table.day td:empty { display: none }
  .j06 table.day td.hour { text-align: left; border-bottom: 1px dashed #CC6600; margin-top: 10px; padding-bottom: 3px }
  .j06 table.day td[class^="c-"]::before { display: block; font-size: 9px; color: #CC6633; margin: 6px 0 3px }
  .j06 table.day td.c-nob::before { content: 'NouvelObs (fr)' } .j06 table.day td.c-bea::before { content: 'Beawitness' }
  .j06 table.day td.c-tay::before { content: 'Tayyar' } .j06 table.day td.c-lbu::before { content: 'LebanonUpdates' }
  .j06 .strip { grid-template-columns: 70px repeat(24, 1fr) }
  .j06 .grid { grid-template-columns: 26px repeat(var(--days), minmax(5px, 1fr)) }
  .j06 .grid .dn { font-size: 7px }
}