/*
  Laptop-friendly visualisation overrides
  ---------------------------------------
  Emulates the visual density of working at ~80% browser zoom without using
  CSS zoom/transform. The card fills the viewport, the right-hand panel scrolls
  internally, and the visualisation area keeps as much width/height as possible.
*/

:root{
  --viz-sidebar-w: clamp(320px, 25vw, 410px);
  --viz-gap: 8px;
}

@media (max-width: 1800px), (max-height: 1000px){
  html, body{ height:100%; }
  body{ font-size:16px !important; overflow:hidden !important; }

  header.nav .nav-inner,
  .nav .nav-inner{
    height:58px !important;
    min-height:58px !important;
    max-width:none !important;
    padding:8px 14px !important;
    gap:12px !important;
  }
  header.nav .nav-left,
  .nav .nav-left{ gap:10px !important; flex-wrap:nowrap !important; }
  header.nav .nav-right,
  .nav .nav-right{ gap:6px !important; flex-wrap:nowrap !important; }
  header.nav .nav-logo,
  .nav .nav-logo{
    width:30px !important; height:30px !important; min-width:30px !important; border-radius:11px !important;
  }
  header.nav .nav-title a,
  .nav .nav-title a{ font-size:18px !important; }
  header.nav .nav-crumb,
  .nav .nav-crumb{ font-size:13px !important; white-space:nowrap !important; }
  .site-nav{ gap:6px !important; flex-wrap:nowrap !important; }
  .site-nav summary,
  .site-nav > a{
    padding:7px 10px !important;
    border-radius:10px !important;
    font-size:13px !important;
    line-height:1.1 !important;
  }
  .site-nav .menu{ top:calc(100% + 6px) !important; min-width:210px !important; padding:7px !important; }
  .site-nav .menu a,
  .site-nav .menu .menu-label{ padding:7px 9px !important; font-size:12px !important; }

  .page{
    max-width:none !important;
    width:100% !important;
    height:calc(100dvh - 58px) !important;
    padding:8px 10px 10px !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  .card{
    margin-top:0 !important;
    height:100% !important;
    min-height:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }
  .layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) var(--viz-sidebar-w) !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .viz-wrap,
  .viz{
    min-height:0 !important;
    height:100% !important;
    width:100% !important;
  }
  .side{
    min-width:0 !important;
    border-left:1px solid var(--border) !important;
    border-top:0 !important;
    padding:8px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:#fff !important;
  }

  .side-controls,
  .chart-card,
  .linked-wrap{
    padding:8px !important;
    margin:0 0 8px 0 !important;
    border-radius:12px !important;
  }
  .section-heading,
  .controls-title{
    font-size:15px !important;
    line-height:1.15 !important;
    padding-bottom:5px !important;
    margin:0 !important;
  }
  .section-heading-spaced{ margin-top:8px !important; }
  .side-name{ font-size:15px !important; line-height:1.2 !important; padding-bottom:5px !important; }

  .filter-row{ gap:7px !important; }
  .control{ gap:3px !important; font-size:12px !important; }
  .control span,
  .side-controls .control span{ font-size:12px !important; line-height:1.2 !important; }
  .side-controls .control + .control,
  .side-controls > .control{ margin-top:7px !important; }
  .control select,
  .control input,
  .control input[type="range"],
  .search input{
    font-size:12px !important;
    padding:5px 7px !important;
    border-radius:9px !important;
    min-height:30px !important;
  }
  .search{ gap:5px !important; margin-top:4px !important; }
  .search button,
  .toggle-btn,
  .clearBtn{
    font-size:12px !important;
    padding:5px 7px !important;
    border-radius:9px !important;
  }
  #yearSlider{ height:30px !important; max-height:30px !important; margin:0 !important; }
  .control-slider{ padding-bottom:5px !important; overflow:visible !important; }
  .ticks{ margin-top:1px !important; line-height:1.05 !important; height:14px !important; overflow:visible !important; }

  .viz-badge,
  .legend,
  .legend-panel{
    border-radius:11px !important;
    padding:6px 8px !important;
  }
  .viz-badge{ top:8px !important; left:8px !important; }
  .badge-title{ font-size:13px !important; }
  .badge-sub{ font-size:11px !important; }
.legend,
  .legend-panel{
    right:8px !important;
    bottom:8px !important;
    min-width:205px !important;
    max-width:270px !important;
    font-size:11px !important;
  }
  .legend-title,
  .legend-panel .legend-title{ font-size:12px !important; margin-bottom:3px !important; }
  .legend-subtitle,
  .legend-panel .legend-subtitle,
  .legend-note,
  .legend-zoom-text{ font-size:10.5px !important; margin-top:5px !important; }
  .legend-svg{ max-height:70px !important; }

  .chart-block{ padding:5px 7px 5px 36px !important; }
  .chart-title{ font-size:13px !important; }
  .chart{ height:135px !important; margin-top:3px !important; }
  .chart-xlabel,
  .chart-ylabel{ font-size:12px !important; }
  .chart-ylabel{ left:-42px !important; }
  .chart-download-row{ padding:5px 0 5px 30px !important; margin-top:0 !important; gap:8px !important; }
  .download-row{ gap:8px !important; margin-top:7px !important; }
  .download-link{ font-size:12px !important; }
  .clearBtn-under-chart,
  .small-under-chart{ margin-left:30px !important; }
  .clearBtn-under-chart{ margin-top:4px !important; }
  .small{ font-size:11px !important; margin-top:5px !important; }

  .linked-title{ font-size:13px !important; }
  .linked-table{ font-size:11px !important; }
  .linked-table-scroll{ max-height:135px !important; }
  .linked-table thead th,
  .linked-table tbody td{ padding:5px 5px !important; }
  .linked-page-btn,
  .linked-page-info{ font-size:11px !important; }
  .download-card{ min-height:72px !important; }

  .matrix-label{ font-size:12.5px !important; }
  .group-label,
  .group-toggle{ font-size:13px !important; }
  .row-label{ font-size:11px !important; }
  .axis-title,
  .axis-subtitle{ font-size:12.5px !important; }
  .axis-tick-label{ font-size:10.5px !important; }
  .tooltip{ font-size:11px !important; padding:7px 9px !important; border-radius:11px !important; }
  .tooltip-title{ font-size:12px !important; }
}

@media (min-width: 980px) and (max-width: 1300px){
  :root{ --viz-sidebar-w: clamp(292px, 28vw, 340px); }
  .layout{
    grid-template-columns:minmax(0, 1fr) var(--viz-sidebar-w) !important;
    height:100% !important;
    overflow:hidden !important;
  }
  .side{ border-left:1px solid var(--border) !important; border-top:0 !important; overflow-y:auto !important; }
  .viz-wrap,.viz{ height:100% !important; min-height:0 !important; }
}

@media (max-width: 979px){
  body{ overflow-y:auto !important; }
  .page{ height:auto !important; overflow:visible !important; }
  .card{ height:auto !important; }
  .layout{ grid-template-columns:1fr !important; height:auto !important; overflow:visible !important; }
  .side{ border-left:0 !important; border-top:1px solid var(--border) !important; overflow:visible !important; }
  .viz-wrap{ min-height:70vh !important; }
  .viz{ height:70vh !important; }
}

@media (max-width: 760px){
  header.nav .nav-inner,
  .nav .nav-inner{ height:auto !important; min-height:50px !important; flex-wrap:wrap !important; }
  header.nav .nav-right,
  .nav .nav-right,
  .site-nav{ width:100% !important; flex-wrap:wrap !important; justify-content:flex-start !important; }
  header.nav .nav-crumb,
  .nav .nav-crumb{ white-space:normal !important; }
}


/* Second-pass consistency: keep all nav bars and visualisation text readable on laptops */
@media (min-width: 761px){
  header.nav .nav-inner, .nav .nav-inner{ height:58px !important; min-height:58px !important; padding:8px 14px !important; }
  header.nav .nav-title a, .nav .nav-title a{ font-size:18px !important; }
  header.nav .nav-crumb, .nav .nav-crumb{ font-size:13px !important; }
  .site-nav summary, .site-nav > a{ font-size:13px !important; padding:8px 11px !important; }
  .page{ height:calc(100dvh - 58px) !important; }
}
@media (max-width: 1800px), (max-height: 1000px){
  #network text, #matrix text, #heatmap text{ font-size:12px; }
  #network .node-label{ font-size:12.5px !important; }
  #matrix .matrix-label, #matrix .group-label, #matrix .row-label{ font-size:12px !important; }
  #heatmap .row-label{ font-size:11.5px !important; }
  .ticks span{ font-size:12px !important; }
}

/* Third-pass laptop readability and clipping fixes */
@media (max-width: 1800px), (max-height: 1000px){
  :root{
    --viz-sidebar-w: clamp(350px, 28vw, 450px);
  }

  /* Slightly wider, more readable right-hand controls without losing the full-height viz. */
  .side{
    padding:10px !important;
  }
  .side-controls,
  .chart-card,
  .linked-wrap{
    padding:10px !important;
    margin-bottom:10px !important;
  }
  .section-heading,
  .controls-title,
  .side-name{
    font-size:16px !important;
  }
  .control,
  .control span,
  .side-controls .control span,
  .control select,
  .control input,
  .search input,
  .search button,
  .toggle-btn,
  .clearBtn,
  .download-link{
    font-size:13px !important;
  }
  .control select,
  .control input,
  .search input{
    min-height:32px !important;
    padding:6px 8px !important;
  }

  /* Give the D3 year slider its full SVG height so the tick labels stay inside the box. */
  .control-slider{
    padding-bottom:14px !important;
    margin-bottom:4px !important;
    overflow:visible !important;
  }
  .side-controls #yearSlider,
  #yearSlider{
    height:58px !important;
    max-height:none !important;
    min-height:58px !important;
    margin-top:4px !important;
    margin-bottom:2px !important;
    overflow:visible !important;
    display:block !important;
  }

  /* Legends: remove the compact cap that clipped large node circles/edge strokes. */
  .legend,
  .legend-panel{
    padding:10px 12px !important;
    min-width:230px !important;
    max-width:340px !important;
    overflow:visible !important;
    font-size:12.5px !important;
  }
  .legend-title,
  .legend-panel .legend-title{
    font-size:14px !important;
    margin-bottom:6px !important;
  }
  .legend-subtitle,
  .legend-panel .legend-subtitle{
    font-size:12.5px !important;
    margin-bottom:6px !important;
  }
  .legend-section{
    margin-top:10px !important;
  }
  .legend-note,
  .legend-zoom-text{
    font-size:12px !important;
    margin-top:8px !important;
  }
  .legend-svg{
    max-height:none !important;
    min-height:58px !important;
    height:auto !important;
    overflow:visible !important;
    display:block !important;
  }
  #nodeSizeLegend.legend-svg{
    min-height:86px !important;
  }
  #edgeSizeLegend.legend-svg{
    min-height:92px !important;
  }

  /* General visualisation text: a touch larger than v2 for laptop readability. */
  #network text,
  #matrix text,
  #heatmap text{
    font-size:13px !important;
  }
  #network .node-label,
  .node-label{
    font-size:13.5px !important;
  }
  #matrix .matrix-label,
  .matrix-label,
  #matrix .group-label,
  .group-label,
  #matrix .row-label,
  .row-label{
    font-size:13px !important;
  }
  #heatmap .row-label,
  #heatmap .axis-tick-label,
  .axis-tick-label{
    font-size:12.5px !important;
  }
  .chart-title,
  .linked-title{
    font-size:14px !important;
  }
  .chart-xlabel,
  .chart-ylabel,
  .axis-title,
  .axis-subtitle{
    font-size:13px !important;
  }
  .linked-table,
  .linked-page-btn,
  .linked-page-info,
  .small,
  .badge-sub{
    font-size:12px !important;
  }
  .tooltip{
    font-size:12.5px !important;
  }
  .tooltip-title{
    font-size:13.5px !important;
  }
}

@media (min-width: 980px) and (max-width: 1300px){
  :root{ --viz-sidebar-w: clamp(340px, 31vw, 390px); }
}


/* Fourth-pass: restore sidebar content height and keep slider labels inside boxes */
@media (max-width: 1800px), (max-height: 1000px){
  /* Restore the original full-height line chart and Top 20 table areas. The sidebar scrolls
     internally, so these can be full height without pushing the page off-screen. */
  .chart{
    height:240px !important;
    min-height:240px !important;
  }
  .linked-table-scroll{
    max-height:260px !important;
  }
  .linked-wrap{
    min-height:0 !important;
  }

  /* Give D3 year slider labels extra vertical room inside the control card. */
  .control-slider{
    padding-bottom:18px !important;
    margin-bottom:8px !important;
    overflow:visible !important;
  }
  .side-controls #yearSlider,
  #yearSlider{
    height:66px !important;
    min-height:66px !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* Collapsible legend panels --------------------------------------------------
   Default state is expanded. The header remains visible when the user hides the
   legend content, which is useful on laptops where the overlay can otherwise
   cover too much of the network/matrix/heatmap. */
.legend,
.legend-panel{
  transition: max-height 180ms ease, padding 180ms ease, box-shadow 180ms ease;
}

.legend-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.legend-header .legend-title{
  margin:0 !important;
}
.legend-toggle{
  appearance:none;
  border:1px solid rgba(44, 79, 78, 0.22);
  background:rgba(255,255,255,0.84);
  color:#2C4F4E;
  border-radius:999px;
  padding:4px 9px;
  font:inherit;
  font-size:11.5px;
  line-height:1.1;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.legend-toggle:hover,
.legend-toggle:focus-visible{
  background:#F4FAF8;
  border-color:rgba(44, 79, 78, 0.38);
  outline:none;
}
.legend-body{
  display:block;
}
.legend.is-collapsed,
.legend-panel.is-collapsed{
  min-width:0 !important;
  width:auto !important;
  max-width:260px !important;
  padding:8px 10px !important;
  overflow:hidden !important;
}
.legend.is-collapsed .legend-header,
.legend-panel.is-collapsed .legend-header{
  margin-bottom:0;
}
.legend.is-collapsed .legend-body,
.legend-panel.is-collapsed .legend-body{
  display:none !important;
}

@media (max-width: 1800px), (max-height: 1000px){
  .legend-toggle{ font-size:12px !important; padding:4px 9px !important; }
  .legend.is-collapsed,
  .legend-panel.is-collapsed{
    padding:8px 10px !important;
    max-width:250px !important;
  }
}


/* Bottom-left sample-size overlay for network and matrix views */
.sample-size-box{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:20;
  padding:8px 11px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.88);
  box-shadow:0 8px 24px rgba(0,0,0,0.10);
  font-size:13px;
  font-weight:700;
  color:#222;
  pointer-events:none;
  backdrop-filter: blur(4px);
}