/* =====================================================================
   Layout + sidebar (hand-written, replaces Shiny/Bootstrap structure).
   The timeline item classes (.vis-*, .cardinal, .pope_time, …) are
   appended below verbatim from the original stylesheet.
   ===================================================================== */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  color: #2a2a2a;
  background: #fff;
}

#app { display: flex; align-items: flex-start; gap: 16px; padding: 16px; }

/* ------------------------------ sidebar ------------------------------ */
#sidebar { flex: 0 0 300px; max-width: 300px; }
.sidebar-title { margin: 0 0 12px; font-weight: 500; color: #333; }

.tl-panel {
  background: #f6f6f6;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}
.tl-panel > h4 { margin: 2px 0 8px; font-size: 15px; font-weight: 500; color: #444; }

/* buttons share a tight, uniform footprint */
.btn-action, .btn-filter, .btn-mini {
  display: block; width: 100%;
  margin: 3px 0; padding: 8px 10px;
  border: none; border-radius: 5px;
  font-family: inherit; font-size: 14px; color: #fff;
  cursor: pointer; text-align: center;
  transition: background-color .12s ease;
}
.btn-action { background: #333; }
.btn-action:hover { background: #1a1a1a; }
.btn-inert { background: #a6a6a6; cursor: default; opacity: .85; }
.btn-inert:hover { background: #a6a6a6; }

.btn-mini {
  width: auto; display: inline-block;
  margin: 4px 0 6px; padding: 4px 10px;
  font-size: 12px; background: #888;
}
.btn-mini:hover { background: #6f6f6f; }

/* filter buttons: grey when off, coloured when active */
.btn-filter { background: #a6a6a6; }
.btn-filter[data-color="prefect"]:hover   { background: #ffc299; }
.btn-filter[data-color="prefect"].active   { background: #ff8533; }
.btn-filter[data-color="secretary"]:hover  { background: #d699ff; }
.btn-filter[data-color="secretary"].active  { background: #ad33ff; }
.btn-filter[data-color="pope"]:hover        { background: #ffbb33; }
.btn-filter[data-color="pope"].active        { background: #b38600; }
.btn-filter[data-color="history"]:hover     { background: #b66b43; }
.btn-filter[data-color="history"].active     { background: #874a40; }

/* collapsibles (replace bsCollapsePanel) */
.tl-collapse { margin: 6px 0; }
.tl-collapse-head {
  padding: 11px 10px; margin-top: 4px;
  color: #fff; text-align: center; font-size: 15px;
  border-radius: 5px; cursor: pointer; user-select: none;
  background: #802000;
}
.tl-collapse-head:hover { filter: brightness(1.12); }
.tl-collapse-head.head-offices { background: #602020; }
.tl-collapse-head.head-tribunals { background: #ff4000; }
.tl-collapse-head.head-congregations { background: #5c5c3d; }
.tl-collapse-body { display: none; padding: 6px 2px 2px; }
.tl-collapse-body.open { display: block; }

/* checkbox lists */
.check-list { display: flex; flex-direction: column; gap: 2px; }
/* Bootstrap 3 (sandstone) declares `label { font-weight: bold }`, and these
   rows are <label> elements, so the weight and margin must be reset here —
   exactly as .switch-label does for the Time reckoning switches. */
.check {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 14px; font-weight: 400; color: #333; margin-bottom: 0;
}
.check input { transform: scale(.9); }

/* entity search — per-group dropdowns (matches old Shiny layout) */
#entity-search-wrap { margin-bottom: 6px; }
.search-group-title { margin: 8px 0 2px; font-size: 14px; font-weight: 400; color: #333; }
.entity-select {
  width: 100%; padding: 6px 8px; margin: 0 0 2px;
  border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 14px;
  background: #fff;
}

/* -------------------------------- main ------------------------------- */
#main { flex: 1 1 auto; min-width: 0; }
.slider-wrap { padding: 4px 8px 14px; }
.slider-wrap h4 { margin: 0 0 14px; font-weight: 500; }
#year-slider { margin: 0 6px; }
.slider-readout { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-top: 8px; }
.noUi-connect { background: #cc3429; }

#timeline { border: 1px solid #e0e0e0; border-radius: 6px; }

.zoom-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-top: 4px;
}
.zoom-label { font-size: 18px; color: #888; user-select: none; }
#zoom-slider { flex: 1; cursor: pointer; accent-color: #cc3429; }

/* details panel (replaces wellPanel) */
.well-panel {
  margin-top: 16px; padding: 14px;
  background: #f7f7f7; border: 1px solid #e3e3e3; border-radius: 8px;
  max-height: 600px; overflow-y: auto;
}
.well-panel h2 { margin: 4px 0 10px; font-weight: 500; }
.well-panel h3 { margin: 6px 0; font-weight: 500; }
.well-panel h4 { margin: 12px 0 4px; font-weight: 500; font-size: 15px; }
.well-panel h5 { margin: 8px 0 4px; font-weight: 500; }
.well-panel img { max-width: 300px; max-height: 350px; height: auto; display: block; margin: 8px auto; }
.panel-inner { background: #fff; border: 1px solid #eaeaea; border-radius: 6px; padding: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.center { text-align: center; }
.muted { color: #999; }
.scroll-panel { max-height: 520px; overflow-y: auto; }

#loading {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); font-size: 16px; color: #555; z-index: 1000;
}

@media (max-width: 820px) {
  #app { flex-direction: column; }
  #sidebar { flex-basis: auto; max-width: none; width: 100%; }
  .row2 { grid-template-columns: 1fr; }
}

/* =====================================================================
   ↓↓↓  Original timeline item styles (ported unchanged)  ↓↓↓
   ===================================================================== */

.meetings_range {background: linear-gradient(to right, rgba(235, 64, 52, 0.1), rgba(235, 64, 52, 1), rgba(235, 64, 52, 0.1)) !important;border-color: rgba(235, 64, 52, 0.6) !important; color: white !important;}








.vis-item.vis-selected {
  border-color: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
  filter: brightness(1.25);
}




.vis-center .vis-background .vis-group,
.vis-labelset .vis-label {
  background-color: rgba(68,68,68, 0.5) !important;
  color: white !important;
}

    
.vis-foreground .vis-range {
  height: 37.5px;
  color: white !important;
  }
    

    .vis-point .vis-item.vis-dot {
      border-radius: 10px;
 }

.vis-item {
  font-size: 15px;
}


.thead,
.tfoot {
    background-color: #333 !important;
    color: #fff !important;
}

.vis-item-content {
  bottom: 10px;
  text-align: center;
}

/* Range labels: black, left-aligned with a small offset (near-centred but
   not strict), nudged a bit lower; clipped to the bar so they never overlap */
.vis-item.vis-range .vis-item-content {
  color: #000 !important;
  text-align: left;
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 37.5px !important;
  top: 0 !important;
  transform: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.vis-item.vis-range .vis-item-overflow {
  overflow: hidden !important;
}


.cardinal {
  max-height: 14px;
  font-size: 15px !important;
   background-color: rgba(128, 8, 0, 1) !important; 
   border-color: transparent !important; 
   color: white !important;

}

.cardinal:hover {
background: linear-gradient(-45deg, #A1374A, #E1081E, #580A12, #92353F) !important;
	background-size: 400% 400%;
}
   

.cardinal_background {
  max-height: 12px;
   background: rgba(128, 8, 0, 0.3) !important; 
   border-color: transparent !important; 
   color: transparent !important;}
   
.cardinal_background: hover {
  max-height: 12px !important;
   background: rgba(128, 8, 0, 0.3) !important; 
   border-color: transparent !important; 
   color: transparent !important;  }


.AC_point, .SC_point, .CongCons_point, .CP_point, .CR_point, .CEcc_point, .BGpoint, .IndexCong_point, .CRel_point, .CRites_point, .Inq_point, .RR_point, .AP_point, .SI_point{
overflow: hidden !important;
width: 10px !important;
}

.AC_point:hover, .SC_point:hover, .CongCons_point:hover, .CP_point:hover, .CR_point:hover, .BGpoint:hover, .CEcc_point:hover, .IndexCong_point:hover, .CRel_point:hover, .CRites_point:hover, .Inq_point:hover, .RR_point:hover, .AP_point:hover, .SI_point:hover{

overflow: hidden !important;
width: auto !important;
background-color: transparent !important;
}




.pope_time {background: #f1c232 !important;
   border-color: white !important;
 }
.pope_empty{background: rgba(255, 215, 0, 0.2) !important;
border-color: white !important;}

.CP_background{background: linear-gradient(to right, rgba(95, 145, 73, .3), rgba(95, 145, 73, .4), rgba(95, 145, 73, .2)) !important;color: white !important; border-color: transparent !important; color: white !important; }

.BG_background{background: linear-gradient(to right, rgba(95, 145, 73, .3), rgba(95, 145, 73, .4), rgba(95, 145, 73, .2)) !important;color: white !important; border-color: transparent !important; color: white !important; }
.IndexCong_background{background: linear-gradient(to right, rgba(95, 145, 73, .3), rgba(95, 145, 73, .4), rgba(95, 145, 73, .2)) !important;color: white !important; border-color: transparent !important; color: white !important; }
.Inq_range{background: linear-gradient(to right, rgba(95, 145, 73, .3), rgba(95, 145, 73, .4), rgba(95, 145, 73, .2)) !important;color: white !important; border-color: transparent !important; color: white !important; }


.full_trans_CEp_range{background: linear-gradient(to right, rgba(95, 145, 73, .3), rgba(95, 145, 73, .4), rgba(95, 145, 73, .2)) !important;color: white !important; border-color: transparent !important; color: white !important; }


.second_trans_CC{background: linear-gradient(to right, rgba(95, 145, 73, .3), rgba(95, 145, 73, .4), rgba(95, 145, 73, .2)) !important;color: white !important; border-color: transparent !important; color: white !important;}

.second_trans_Inq{background: linear-gradient(to right, rgba(95, 145, 73, .3), rgba(95, 145, 73, .4), rgba(95, 145, 73, .2)) !important;color: white !important; border-color: transparent !important; color: white !important;}




.AP_background{background: linear-gradient(to right, rgba(255, 0, 0, .3), rgba(255, 0, 0, .4), rgba(255, 0, 0, .2)) !important;color: white !important; border-color: transparent !important; color: white !important; }
.RR_background{background: linear-gradient(to right, rgba(139, 0, 0, .3), rgba(139, 0, 0, .3), rgba(139, 0, 0, .3)) !important;color: white !important; border-color: transparent !important; color: white !important; }


.first_trans_IndexCong{background: linear-gradient(to right, rgba(175, 225, 175, .3), rgba(175, 225, 175, .6), rgba(175, 225, 175, 1)) !important;color: white !important; border-color: transparent !important; color: white !important;}

.CRites_range{background: linear-gradient(to right, rgba(175, 225, 175, .3), rgba(175, 225, 175, .4), rgba(175, 225, 175, .2)) !important;color: white !important; border-color: transparent !important; color: white !important;}

.first_trans_CR{background: linear-gradient(to right, rgba(175, 225, 175, .3), rgba(175, 225, 175, .4), rgba(175, 225, 175, .2)) !important;color: white !important; border-color: transparent !important; color: white !important;}

.BGpoint{ border-color: #38761d !important; color: black !important;}
.CEcc_point{ border-color: #70df3f !important; color: black !important;}
.IndexCong_point{ border-color: #205907 !important;color: black !important;}
.Inq_point{ border-color: #076132 !important;color: black !important;}
.RR_point{ border-color: #a75b0b !important;color: black !important;}
.CRel_point{ border-color: #a3d78c !important; color: black !important; }
.CRites_point{ border-color: #6d8b60 !important; color: black !important;}
.AC_point{ border-color: #2e1300 !important; color: black !important;}


.AC_background{background: linear-gradient(to right, rgba(165, 42, 42, .3), rgba(165, 42, 42, .4), rgba(165, 42, 42, .2)) !important;color: white !important; border-color: transparent !important; color: white !important; }

 .prefect_full  {background-color: #f28407 !important; border-color: transparent !important; color: white !important;}
 .prefect_trans_start {background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(242,132,7, 0.2), rgba(242,132,7, 0.3), rgba(242,132,7, 0.5), rgba(242,132,7, 0.7),rgba(242,132,7, 1)) !important;border-color: transparent !important; color: white !important;}

 .prefect_trans_end {background: linear-gradient(to right, rgba(242,132,7, 1),  rgba(242,132,7, 0.3)) !important; border-color: transparent !important; color: white !important;}
 
.prefect_trans_full {background: linear-gradient(to right, rgba(242,132,7, 0.3), rgba(242,132,7, 1), rgba(242,132,7, 0.3)) !important;border-color: transparent !important; color: white !important;}


.red_point{background: #d668de !important; border-color: #d668de !important; color: white !important;}
.trans_red_point_end {background: linear-gradient(90deg, rgba(162,4,173,1) 0%, rgba(214,104,222,0.7973564425770308) 59%, rgba(216,145,227,0.39959733893557425) 100%) !important;border-color: transparent !important; color: white !important;}
.trans_red_point  {background: linear-gradient(90deg, rgba(216,145,227,0.39959733893557425) 0%, rgba(214,104,222,0.7973564425770308) 25%, rgba(162,4,173,1) 50%, rgba(214,104,222,0.7973564425770308) 71%, rgba(226,178,246,0.396796218487395) 100%) !important;border-color: transparent !important; color: white !important;border-color: transparent !important; color: white !important;}

.prefect_full_B  {
   height: 25px !important;
   background-color: #f28407 !important; border-color: transparent !important; color: white !important;}
 .prefect_trans_start_B {
   height: 25px !important;
   background: linear-gradient(to right, rgba(242,132,7, 0.2), rgba(242,132,7, 0.5), rgba(242,132,7, 0.6), rgba(242,132,7, 0.7),rgba(242,132,7, 1)) !important;border-color: transparent !important; color: white !important;}

 .prefect_trans_end_B {
   height: 25px !important;
   background: linear-gradient(to right, rgba(242,132,7, 1),  rgba(242,132,7, 0.3)) !important; border-color: transparent !important; color: white !important;}
 
.prefect_trans_full_B {height: 25px !important;
background: linear-gradient(to right, rgba(242,132,7, 0.3), rgba(242,132,7, 1), rgba(242,132,7, 0.3)) !important;border-color: transparent !important; color: white !important;}
    
.WH_range{
   height: 37.5px !important;
   background-color: #a45a41 !important; border-color: transparent !important; color: white !important;}

    
.LH_point {
  font-size: 13px;
  border-color: #54353d !important; color: transparent !important;
  background-color: transparent !important;
}
.LH_point:hover {
  font-size: 13px;
  border-color: #54353d !important; color: white !important;
   background-color: transparent !important;
}


.CH_range{
   height: 37.5px !important;
   background-color: #a45a41 !important; border-color: transparent !important; color: white !important;}

    
    
    .cardinal_pope{
    color: transparent !important;
    border-color: #f1c232 !important;
    background-color: transparent !important;

}

.cardinal_pope:hover{
    color: white !important;
    border-color: yellow !important;
    background-color: transparent !important;
}

.cardinal_pope:active{
    color:white !important;
    border-color: yellow !important;
    background-color: transparent !important;
}

.cardinal_point:active{
    color:white !important;
    border-color: yellow !important;
    background-color: transparent !important;
}
.cardinal_point {
  font-size: 13px;
  border-color: red !important; color: transparent !important;
   background-color: transparent !important;
}
.cardinal_point:hover {
  font-size: 13px;
  border-color: red !important; color: white !important;
   background-color: transparent !important;
}


.meetings:active{
    color:white !important;
    border-color: yellow !important;
    background-color: transparent !important;
}
.meetings {
  font-size: 13px;
  border-color: red !important; color: transparent !important;
   background-color: transparent !important;
}
.meetings:hover {
  font-size: 13px;
  border-color: red !important; color: white !important;
   background-color: transparent !important;
}
    .vis-background {
          background-color: transparent !important;
          background-size: contain;
          background-position: center;
          opacity: 0.3;
          }
    .vis-item .vis-item-overflow {
    overflow: visible;
    }

/* ===== Sidebar (selection column): uniform tight spacing + no coloured outlines ===== */
.col-sm-3 .well .btn,
.col-sm-3 .well .btn-group,
.col-sm-3 .well .form-group,
.col-sm-3 .well .panel,
.col-sm-3 .well .shiny-input-container {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
.col-sm-3 .well .panel-body { padding: 6px !important; }
.col-sm-3 .well br { display: none; }

#cardinals_collapse { padding-top: 2px !important; }
#RC { padding-top: 2px !important; margin-bottom: 2px !important; }

/* Remove the red/coloured "shell" border around the collapse panels */
#cardinals_collapse .panel,
#cardinals_collapse .panel-heading,
#RC .panel,
#RC .panel-heading {
  border-color: transparent !important;
}

/* ============================================================
   ALL point items (whole timeline): compact dot + name-on-hover,
   stable position, brighten (not drop) on select.
   ============================================================ */

/* By default every point is just its dot. Collapsing the label to zero
   width gives all point items a uniform footprint, so the dots line up
   consistently instead of sitting high/low at random. The fixed height
   (matching the range height) makes the centred dot land at the vertical
   middle of the row, aligned with any range in the same group. */
.vis-item.vis-point {
  height: 14px !important;
  /* the dot is 12px across (border-width 6) and is centred with a negative
     translate, so it reaches past the 14px box; without this it is clipped
     and renders as a partial circle */
  overflow: visible !important;
}
.vis-item.vis-point .vis-item-overflow { overflow: visible !important; }
.vis-item.vis-point .vis-item-content {
  color: transparent !important;
  background: transparent !important;
  font-size: 0 !important;
  padding: 0 !important;
}

/* The dot: larger, no doubling artifacts */
.vis-item.vis-point .vis-dot {
  border-width: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
/* Hide the vertical line that vis-timeline draws next to points */
.vis-item.vis-point .vis-line {
  display: none !important;
}

/* No custom hover label on points — vis-timeline's built-in tooltip
   already shows the item title on hover, so a second label is redundant. */

/* Selected point: no yellow border/glow on the container, just brighten the dot */
.vis-item.vis-point.vis-selected {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.vis-item.vis-point.vis-selected .vis-dot {
  border-width: 6px !important;              /* same size as unselected: no jump */
  border-color: #ff8c00 !important;
  background-color: #ff8c00 !important;
  filter: none;
  box-shadow: 0 0 6px 2px rgba(255, 140, 0, .85) !important;
}

/* Hover on point: subtle brighten, no container artifacts */
.vis-item.vis-point:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.vis-item.vis-point:hover .vis-dot {
  filter: brightness(1.3);
}

.cardinal .vis-dot,
.cardinal_point .vis-dot,
.cardinal_pope .vis-dot,
.cardinal_background .vis-dot {
  border-color: #800800 !important;
  background-color: #800800 !important;
}

/* Cardinal rows: reduce the point item height to tighten vertical spacing
   between subgroup rows. General points are 37.5px (matching non-cardinal
   ranges); cardinal ranges are only 16px, so 20px here halves the gap. */
.vis-item.vis-point.cardinal,
.vis-item.vis-point.cardinal_point,
.vis-item.vis-point.cardinal_pope,
.vis-item.vis-point.cardinal_background {
  height: 20px !important;
}

/* --- RANGE cardinals: title inside the bar, clipped, compact --- */
.vis-range.cardinal .vis-item-content,
.vis-range.cardinal_background .vis-item-content {
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16px !important;
  top: 0 !important;
  transform: none !important;
}
.vis-range.cardinal .vis-item-overflow,
.vis-range.cardinal_background .vis-item-overflow {
  overflow: hidden !important;
}
.vis-range.cardinal,
.vis-range.cardinal_background {
  height: 16px !important;
  max-height: 16px !important;
}

/* --- classNames present in the data but unstyled in the original ---
   Mapped to their sibling family so they don't render as default-blue. */
.full_trans_CR, .second_trans_CR {
  background: linear-gradient(to right, rgba(175,225,175,.3), rgba(175,225,175,.4), rgba(175,225,175,.2)) !important;
  color: white !important; border-color: transparent !important;
}
.full_trans_IndexCong, .full_trans_Inq {
  background: linear-gradient(to right, rgba(95,145,73,.3), rgba(95,145,73,.4), rgba(95,145,73,.2)) !important;
  color: white !important; border-color: transparent !important;
}
.SI_background {
  background: linear-gradient(to right, rgba(255,0,0,.3), rgba(255,0,0,.4), rgba(255,0,0,.2)) !important;
  color: white !important; border-color: transparent !important;
}
.SG_point { border-color: #6d4c0b !important; color: black !important; overflow: hidden !important; width: 10px !important; }
.SG_point:hover { overflow: hidden !important; width: auto !important; background-color: transparent !important; }

/* =====================================================================
   NEW FEATURES (2026): time-reckoning toggles, dual-calendar badges,
   papal calendar, Easter lines, sede-vacante stripes, entity cross-links
   ===================================================================== */
/* --------------------- historic time (Julian) toggle ------------------ */
.switch-row { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  flex: 0 0 36px; width: 36px; height: 20px; border-radius: 10px;
  background: #c4c4c4; position: relative; transition: background-color .15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: left .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.switch-row input:checked + .switch { background: #8e44ad; }
.switch-row input:checked + .switch::after { left: 18px; }
.switch-row input:focus-visible + .switch { outline: 2px solid #8e44ad; outline-offset: 2px; }
.switch-label { font-size: 14px; color: #333; font-weight: 400; }
.switch-row { margin-bottom: 0; }      /* neutralise Bootstrap 3 label defaults */
.hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #777; }

/* calendar badges in the details panel */
.cal-badge {
  display: inline-block; padding: 1px 6px; margin-left: 4px;
  border-radius: 4px; font-size: 11px; font-weight: 500; vertical-align: middle;
}
.cal-jul  { background: #f0e1f7; color: #6d2f8c; border: 1px solid #d9b8e8; }
.cal-greg { background: #e8e8e8; color: #555;    border: 1px solid #d4d4d4; }
.cal-papal { background: #f7edd6; color: #8a6d00; border: 1px solid #e2ce9a; }
.cal-src  { display: block; margin-top: 2px; font-size: 11px; color: #999; }

.switch-row + .switch-row { margin-top: 6px; }

/* Easter: bright vertical line across all rows (cf. the reform marker).
   NB: the legacy stylesheet below declares
   `.vis-background { background-color: transparent !important }` for the
   project's own background items — it also matches these lines, so the
   colour must be re-asserted with !important at higher specificity. */
.vis-item.vis-background.easter_line {
  background-color: #9b2fc4 !important;
  opacity: .85 !important;
  min-width: 3px; max-width: 4px;
  pointer-events: auto; cursor: help;
  z-index: 2;
}
.vis-item.vis-background.easter_line:hover {
  opacity: 1 !important; box-shadow: 0 0 4px rgba(155, 47, 196, .8);
}
#easter-tip {
  position: fixed; z-index: 10000; pointer-events: none;
  background: #2d1436; color: #fff; border-radius: 6px;
  padding: 6px 10px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); max-width: 300px;
}
#easter-tip strong { display: block; font-weight: 500; }
#easter-tip span { color: #d9b8e8; font-size: 11px; }

/* clickable names inside detail cards */
.entity-link {
  color: #7a2fa8; cursor: pointer; border-bottom: 1px dotted #b98ad4;
}
.entity-link:hover { color: #4d1a6e; border-bottom-style: solid; }
.entity-link a { pointer-events: auto; }           /* external ↗ links still work */
.ext-link {
  font-size: 10px; text-decoration: none; color: #9a7fb5;
  margin-left: 1px; vertical-align: super;
}
.ext-link:hover { color: #4d1a6e; }
.entity-link-miss { color: #b03030; border-bottom-color: #b03030; }

/* disambiguation popup */
#entity-chooser {
  position: fixed; z-index: 10001; min-width: 260px; max-width: 360px;
  background: #fff; border: 1px solid #d4c2e2; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(40, 10, 60, .25); padding: 6px;
}
#entity-chooser .chooser-title {
  font-size: 12px; color: #777; padding: 4px 8px 6px;
}
#entity-chooser .chooser-item {
  display: block; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 7px 10px; border-radius: 6px;
  cursor: pointer; font: inherit;
}
#entity-chooser .chooser-item:hover { background: #f3ebf9; }
#entity-chooser .chooser-name { display: block; font-weight: 500; color: #333; }
#entity-chooser .chooser-meta { display: block; font-size: 11px; color: #8a6aa5; }

/* validated coat of arms in person cards */
.pope-arms-wrap { margin: 8px 0; }
.pope-arms { max-height: 140px; max-width: 160px; }
.pope-arms-src { font-size: 10px; color: #999; margin-top: 2px; }
.cal-viaf { background: #e3f0e3; color: #2f6e2f; border: 1px solid #bcd9bc; }

/* slightly stronger papal band / major axis labels */
.vis-time-axis .vis-text.vis-major { font-weight: 500; color: #444; }
/* Sede vacante: hatched full-height stripe (papal calendar mode).
   The gradient is background-image, so the legacy transparent
   background-color rule does not affect it — but its opacity: 0.3 does. */
.vis-item.vis-background.sv_background {
  background: repeating-linear-gradient(135deg,
    rgba(110,110,110,.22) 0 6px, rgba(110,110,110,.06) 6px 12px);
  border-left: 1px solid rgba(110,110,110,.45);
  border-right: 1px solid rgba(110,110,110,.45);
  min-width: 3px;
  opacity: 1 !important;
  z-index: 1;
}

/* Gregorian reform marker on the timeline (historic mode only) */
.vis-custom-time.reform { background-color: #8e44ad; width: 2px; pointer-events: none; }
.vis-custom-time.reform > .vis-custom-time-marker {
  background: #8e44ad; color: #fff; font-size: 11px;
  padding: 2px 6px; border-radius: 0 4px 4px 0; white-space: nowrap;
}

/* Institutional lifespans in Offices / Tribunals / Congregations.
   They keep their normal range appearance but carry `selectable: false`
   (set in visItemOf), so only the cursor needs to stop advertising a
   click. Converting them to background items is NOT an option: the
   legacy `.vis-background { background-color: transparent !important }`
   rule further down would render them invisible. */
.vis-item.institution_span { cursor: default !important; }
.vis-item.institution_span:hover { box-shadow: none !important; }

/* Their events share one subgroup with the band (see visItemOf), so the
   point box is given the band's height: the dot then centres on the band
   instead of sitting near its top edge. The marker class is added in JS,
   which avoids listing every per-institution className by hand. */
.vis-item.vis-point.institution_event {
  height: 37.5px !important;
  z-index: 3;
}

/* ------------------------------------------------------------------ phones
   The Controllers panel folds under its heading (timeline.html adds the
   toggle), so the timeline itself is on the first screen; row labels wrap
   into a narrower column to leave the width to the timeline. */
@media (max-width: 820px) {
  #app { align-items: stretch; padding: 12px; gap: 10px; }
  #main { width: 100%; }

  #sidebar .sidebar-title {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 46px; margin: 0; padding: 10px 14px;
    background: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 8px;
    font-size: 18px; cursor: pointer; user-select: none;
  }
  #sidebar .sidebar-title::after {
    content: ""; width: 9px; height: 9px; margin-left: 12px;
    border-right: 2px solid #666; border-bottom: 2px solid #666;
    transform: rotate(-135deg) translate(-2px, -2px); transition: transform .15s;
  }
  #sidebar.tl-folded .sidebar-title::after { transform: rotate(45deg); }
  #sidebar.tl-folded > .tl-panel { display: none; }
  #sidebar:not(.tl-folded) .sidebar-title { margin-bottom: 10px; }

  #tl-app .btn-action, #tl-app .btn-filter, #tl-app .btn-mini { min-height: 40px; }
  #tl-app .entity-select { min-height: 40px; font-size: 16px; }
  #tl-app .switch-row { min-height: 36px; }

  .slider-wrap { padding: 4px 4px 12px; }
  .vis-labelset .vis-label .vis-inner {
    max-width: 104px; white-space: normal; overflow-wrap: anywhere;
    font-size: 12px; line-height: 1.2; padding: 4px 6px;
  }
  .well-panel { margin-top: 12px; padding: 12px; max-height: none; }
}