/* Responsive refinements loaded after each page's own stylesheet. */
.nav-label-short { display: none; }
.nav-label-full { display: inline; }

.strip-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
  color: var(--on-dark-2);
}
.strip-legend .lg { flex: 0 0 auto; }
.strip-legend .sw { flex: 0 0 14px; }

/* The HTML label follows its SVG interval's actual rendered width. */
.label-layer .segment-label {
  display: flex;
  align-items: center;
  justify-content: center;
  container-name: timeline-segment;
  container-type: inline-size;
}
.segment-label-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
@container timeline-segment (max-width: 39.99px) {
  .segment-label-text { display: none; }
}

.table-scroll,
.runway-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.table-scroll--tracker .trk-table { width: 100%; min-width: 1000px; }
.table-scroll--screen-time .screen-time-table { min-width: 420px; }
.table-scroll--kintore .kintore-recent { min-width: 580px; }

@media (max-width: 640px) {
  .table-scroll--tracker .trk-table { min-width: 0; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }

  .nav .wrap {
    min-width: 0;
    justify-content: flex-start;
    gap: 4px;
  }
  .nav .brand { flex: 0 0 auto; }
  .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-left: 0;
    overflow: visible;
    white-space: nowrap;
  }
  .nav-links > li { flex: 0 0 auto; }
  .nav-links a {
    padding: 8px 2px;
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }

  /* Seven private links fit at 320px without a horizontal scroller. */
  .nav-private .wrap { flex-direction: column; align-items: stretch; padding-block: 4px; }
  .nav-private .nav-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; white-space: normal; }
  .nav-private .nav-links > li { min-width: 0; }
  .nav-private .nav-links a { display: block; padding: 7px 0; text-align: center; font-size: 11px; }

  .strip-legend {
    flex-wrap: nowrap;
    gap: 8px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    font-size: 16px;
  }
  .strip-legend .sw { width: 14px; height: 14px; }

  .roadmap-page,
  .dash-roadmap.roadmap-page {
    min-width: 0;
    overflow-x: visible;
  }
  .roadmap-chart {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
  }
  .roadmap-view {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .roadmap-svg-horizontal { min-width: 900px; }
  .roadmap-svg-vertical { min-width: 640px; }
  .dash-roadmap .roadmap-view-vertical { min-width: 0; max-width: 100%; }

  .app p:not(.eyebrow),
  .app li,
  .app dd,
  .app dt,
  .app .screen-time-source,
  .app .screen-time-total,
  .app .screen-time-empty,
  .app .trk-table .sub,
  .app .dash-note,
  .app .board-row,
  .app .runway-table th,
  .app .runway-table td,
  .app .trk-table th,
  .app .trk-table td,
  .app .trk-table td[data-k]::before,
  .app .screen-time-table th,
  .app .screen-time-table td,
  .app .kintore-recent th,
  .app .kintore-recent td,
  .markdown-body,
  .markdown-body table,
  .markdown-body th,
  .markdown-body td {
    font-size: max(16px, 1em);
  }

  .app p:not(.eyebrow),
  .app li,
  .app dd,
  .app dt,
  .app td,
  .app th,
  .markdown-body,
  .runway-lede {
    overflow-wrap: anywhere;
  }

  .table-scroll--tracker .trk-table { width: 100%; min-width: 0; }
  .table-scroll--screen-time .screen-time-table { min-width: 420px; }
  .table-scroll--kintore .kintore-recent { min-width: 580px; }
  .runway-table-wrap { width: 100%; }
}