/* Load after the screen styles. Desktop and print intentionally remain untouched. */
@media screen and (max-width: 767px) {
  :root { --sidebar-width: min(232px, 85vw); }
  body { font-size: 13px; }
  .main-column { min-width: 0; margin-left: 0; }
  .sidebar {
    width: var(--sidebar-width);
    max-height: 100dvh;
    padding: 18px 12px 12px;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    box-shadow: 10px 0 30px #1e35551a;
  }
  body.menu-open .sidebar { transform: translateX(0); }
  .brand { gap: 9px; padding: 0 6px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
  .brand-mark svg { width: 19px; height: 19px; }
  .brand-copy strong { font-size: 13px; }
  .nav-caption { margin: 22px 8px 9px; }
  .main-nav { gap: 3px; min-height: 0; overflow-y: auto; }
  .nav-item { min-height: 36px; gap: 9px; padding: 6px 10px; }
  .nav-item span { font-size: 12px; }
  .nav-item svg { width: 17px; height: 17px; }
  .sidebar-footer { gap: 6px; padding: 10px 6px 0; font-size: 10px; }
  .topbar { height: 54px; gap: 9px; padding: 0 12px; justify-content: flex-start; }
  .menu-toggle { display: grid; width: 36px; height: 36px; flex: 0 0 auto; }
  .breadcrumb { min-width: 0; gap: 5px; font-size: 11px; }
  .breadcrumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-team { margin-left: auto; }
  .topbar-team > span:last-child { display: none; }
  .team-avatar { width: 28px; height: 28px; border-radius: 8px; }
  .content,
  .activities-active .content,
  .productivity-active .content,
  .insights-active .content { width: 100%; min-width: 0; padding: 18px 12px 24px; }
  .planning-active .content { padding: 0; }
  .planning-view { min-height: calc(100dvh - 54px); }
  .planning-frame { height: calc(100dvh - 54px); min-height: 0; }
  .page-heading, .trend-page-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
  }
  .page-heading > div, .trend-page-heading > div { min-width: 0; }
  .eyebrow { margin-bottom: 7px; font-size: 9px; letter-spacing: 1px; }
  h1, .trend-page-heading h1 { font-size: 23px; margin-bottom: 6px; }
  h2 { font-size: 18px; }
  .page-description, .trend-page-heading .page-description { font-size: 12px; line-height: 1.5; }
  .workspace-badge { display: none; }
  .welcome-card { min-height: 210px; padding: 22px 18px; border-radius: 12px; }
  .welcome-copy { width: 100%; }
  .welcome-copy p { font-size: 12px; line-height: 1.5; }
  .welcome-tag { margin-bottom: 9px; }
  .welcome-art { top: auto; right: 0; bottom: -36px; transform: scale(.55); transform-origin: bottom right; opacity: .2; }
  .bottom-note { gap: 8px; margin-top: 14px; }
  .page-footer { padding: 12px; font-size: 10px; }
  .auth-screen { padding: 20px 12px; }
  .auth-brand { margin-bottom: 18px; }
  .auth-card { padding: 22px 20px; border-radius: 12px; }
  .auth-card h1 { font-size: 22px; }
  .auth-description { margin-bottom: 16px; line-height: 1.5; }
  .auth-tabs { margin-bottom: 15px; }

  /* A readable input size also avoids focus-triggered zoom in mobile Safari. */
  .auth-form input,
  .month-picker input,
  .indicator-toolbar input,
  #card-lookup-query,
  .timeline-toolbar input,
  .timeline-toolbar select,
  .flow-area-filter select { font-size: 16px; }
  .report-month-tabs, .activities-tabs { gap: 6px; margin-bottom: 12px; }
  .report-month-tab, .activities-tabs button { min-height: 36px; padding: 7px 10px; font-size: 12px; }
  .productivity-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px; }
  .month-picker { min-width: 0; gap: 5px; grid-column: 1 / -1; }
  .month-picker input { min-width: 0; min-height: 38px; padding: 6px 8px; }
  .productivity-submit { min-width: 0; min-height: 38px; padding: 8px 10px; grid-column: 1 / -1; font-size: 12px; }
  .productivity-load-saved { min-width: 0; min-height: 38px; padding: 6px 8px; }
  .report-results { gap: 12px; margin-top: 12px; }
  .report-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .report-source { max-width: 100%; font-size: 10px; }
  .metrics-grid, .trend-kpis, .visualization-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .metric-card { min-height: 92px; gap: 6px; padding: 11px; border-radius: 10px; }
  .metric-value { font-size: 19px; overflow-wrap: anywhere; }
  .metric-detail { font-size: 10px; }
  .executive-summary { padding: 12px; }
  .executive-summary p { line-height: 1.5; }
  .section-heading { padding: 12px; gap: 6px; }
  .recommendation-list li { padding: 12px 12px 12px 42px; gap: 4px; }
  .recommendation-list li::before { top: 12px; left: 12px; }
  .stage-table { min-width: 620px; }
  .stage-table th, .stage-table td { padding: 8px 10px; }
  .report-caveat { padding: 10px 12px; }
  .privacy-note { margin-top: 9px; }

  .indicator-toolbar, #indicator-results { margin: 12px 0; padding: 12px; border-radius: 10px; }
  .indicator-toolbar { gap: 8px; }
  .indicator-toolbar label { min-width: 0; flex: 1 1 140px; }
  .indicator-toolbar input { width: 100%; padding: 6px 8px; min-height: 36px; }
  #indicators-view button { min-height: 36px; padding: 7px 10px; font-size: 12px; }
  .indicator-method, #indicator-coverage, #indicator-snapshot { font-size: 12px; line-height: 1.5; }
  .indicator-table { font-size: 11px; }
  .indicator-table caption { padding: 9px; }
  .indicator-table th, .indicator-table td { padding: 9px; }
  .indicator-table td { min-width: 112px; }
  .indicator-table tbody th { min-width: 110px; max-width: 150px; white-space: normal; overflow-wrap: anywhere; }
  .indicator-cell-track { margin-top: 6px; }

  #activities-view .page-heading { flex-direction: row; }
  #activities-refresh { min-height: 36px; padding: 8px 10px; font-size: 12px; }
  #activities-status { margin: 12px 0; }
  .activities-table { border-spacing: 0 7px; font-size: 12px; }
  .activities-table th:first-child { width: clamp(85px, 24vw, 130px); }
  .activities-table thead th { padding: 8px; }
  .activities-table tbody th, .activities-table td { padding: 8px; font-size: 12px; }
  .activities-table small { margin-top: 5px; font-size: 10px; }
  .activities-cards { grid-template-columns: repeat(auto-fill, minmax(min(145px, 100%), 1fr)); gap: 7px; }
  .activity-card { min-width: 0; gap: 6px; padding: 9px; font-size: 12px; border-radius: 7px; }
  .activity-card span { font-size: 10px; }

  .trend-kpi { min-height: 94px; padding: 12px; border-radius: 10px; }
  .trend-kpi > span { font-size: 9px; margin-bottom: 7px; }
  .trend-kpi > strong { font-size: 20px; }
  .trend-kpi > small { font-size: 10px; }
  .trend-chart-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .trend-chart-card, .trend-history { padding: 12px; border-radius: 10px; }
  .trend-card-heading { gap: 8px; }
  .trend-index { width: 28px; height: 28px; border-radius: 8px; }
  .trend-chart { min-height: 0; margin-top: 9px; }
  .trend-no-chart { padding: 28px 8px; }
  .trend-reading { grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 12px; margin: 9px 0; }
  .trend-reading > a { grid-column: 2; }
  .trend-reading-mark { width: 30px; height: 30px; }
  .trend-open-productivity { min-height: 36px; padding: 7px 10px; font-size: 11px; }
  .trend-table th, .trend-table td { padding: 8px; font-size: 10px; }
  .trend-table th { font-size: 9px; }
  .trend-empty { padding: 22px 18px; margin: 18px auto; border-radius: 12px; }
  .flow-radar-panel { padding: 12px; margin-top: 10px; border-radius: 10px; }
  .flow-radar-panel-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .flow-area-filter { width: 100%; }
  .flow-area-filter select { width: 100%; max-width: 100%; min-height: 36px; padding: 6px 8px; }
  .flow-filter-row { gap: 6px; margin: 12px 0 8px; }
  .flow-filter { min-height: 32px; padding: 5px 9px; font-size: 10px; }
  .flow-more { min-height: 36px; font-size: 11px; }
  .flow-table-wrap { max-height: 60dvh; }

  .management-summary { gap: 8px 16px; margin: 12px 0; padding: 12px; border-radius: 10px; }
  .management-groups { gap: 12px; }
  .management-group { border-radius: 10px; }
  .management-group > header { padding: 12px; gap: 8px; flex-wrap: wrap; }
  .management-group h2 { font-size: 16px; }
  .management-members { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .management-person { gap: 9px; padding: 12px; }
  .management-person > div { gap: 4px; }
  .management-person h3 { font-size: 13px; }
  .management-person a { font-size: 12px; }
  .management-avatar { flex-basis: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
  #management-vacation { margin-top: 14px; }
  #card-lookup-form { gap: 8px; margin: 14px 0 9px; }
  #card-lookup-form label { width: auto; min-width: 0; flex: 1 1 180px; gap: 5px; font-size: 12px; }
  #card-lookup-query { width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; }
  #card-lookup-form button { min-height: 38px; padding: 8px 14px; font-size: 12px; }
  .card-lookup-card { padding: 14px; margin: 12px 0; border-radius: 10px; }
  .card-lookup-card h2 { font-size: 17px; margin: 6px 0 12px; }
  .card-lookup-card h3 { font-size: 14px; margin-top: 16px; }
  .card-lookup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
  .card-lookup-grid > div { min-width: 0; }
  .card-lookup-grid dt, .card-lookup-note { font-size: 11px; }
  .card-lookup-grid dd { margin-top: 4px; font-size: 12px; }
  .card-lookup-text { font-size: 12px; line-height: 1.5; }
  .card-lookup-comment, .card-lookup-attachment { padding: 10px 0; }

  .visualization-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .visualization-header { gap: 10px; padding: 12px; }
  .visualization-header > div { min-width: 0; }
  .visualization-header h2 { font-size: 20px; }
  .visualization-header p:last-child { font-size: 11px; }
  .visualization-close { width: 36px; height: 36px; border-radius: 9px; }
  .visualization-content { padding: 12px 10px 20px; scrollbar-gutter: auto; }
  .visualization-intro { margin-bottom: 12px; font-size: 11px; }
  .visualization-metric { gap: 5px; padding: 10px; border-radius: 10px; }
  .visualization-metric strong { font-size: 18px; }
  .visualization-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .visualization-card, .visualization-stage-cards { padding: 12px; border-radius: 10px; }
  .visualization-card-heading { gap: 8px; margin-bottom: 12px; }
  .visualization-stage-bars, .visualization-recurrence { gap: 10px; }
  .visualization-mix { grid-template-columns: minmax(90px, 120px) minmax(0, 1fr); min-height: 160px; gap: 12px; }
  .visualization-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vacation-dialog, #timeline-detail { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 14px; border-radius: 10px; }
  .vacation-dialog label { margin: 9px 0; }
  .timeline-toolbar { padding: 10px 12px; min-width: 0; max-height: 42dvh; overflow: auto; }
  .vacation-dialog .timeline-toolbar { max-height: none; overflow: visible; }
  .timeline-toolbar label { font-size: 12px; flex-wrap: wrap; max-width: 100%; }
  .timeline-toolbar input, .timeline-toolbar select { max-width: 100%; min-width: 0; padding: 6px 8px; min-height: 36px; }
  .timeline-toolbar button { min-height: 36px; padding: 7px 9px; font-size: 12px; }
  .timeline-toolbar #timeline-refresh { margin: 6px 0; }
  .timeline-legend { gap: 5px; margin-top: 6px; font-size: 10px; }
  .timeline-legend i { width: 12px; height: 12px; }
  .timeline-note, #timeline-status, #timeline-warnings, #timeline-settings { font-size: 11px; line-height: 1.45; }
  #timeline-absence-form { gap: 7px; margin: 9px 0; }
  #timeline-absences > div { flex-wrap: wrap; gap: 6px; }
  .timeline-scroll { min-width: 0; overscroll-behavior: contain; }
  #timeline-table { font-size: 10px; }
  #timeline-table caption { padding: 7px 10px; }
  #timeline-table th, #timeline-table td { height: 30px; min-width: 30px; }
  #timeline-table th:first-child { min-width: 120px; width: 120px; max-width: 120px; padding: 6px 8px; }
  #timeline-table small { font-size: 9px; }
  .table-scroll, .indicator-table-wrap, .trend-table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
}