/* KARHUTLA.ID — Desktop readability & proportion layer
   Scope: public UI only. No data/API/functional changes.
   Target: 1366x768 through 1600x900 and wider desktop screens.
*/

@media (min-width:901px){
  :root{
    --shell:min(1760px,calc(100vw - 32px));
    --fs-body:clamp(16px,.32vw + 12px,17px);
    --fs-meta:clamp(14px,.22vw + 11px,15px);
    --fs-panel:clamp(18px,.28vw + 14px,20px);
    --fs-section:clamp(24px,.5vw + 17px,28px);
    --fs-page:clamp(31px,.7vw + 21px,34px);
    --fs-kpi:clamp(32px,.9vw + 21px,36px);
  }

  body{font-size:var(--fs-body);line-height:1.5}
  .shell{padding-top:24px}
  .cmd-nav a{font-size:15.5px;padding:12px 11px}
  .global-freshness{font-size:14.5px}
  .eyebrow{font-size:14px}
  .page-intro h1{font-size:var(--fs-page)}
  .page-intro p{font-size:17px;line-height:1.48;max-width:1050px}
  .snapshot{font-size:14.5px}
  .small{font-size:var(--fs-meta)}
  .muted,.small.muted,.panel-head .small,.page-intro p,.section-title p{color:#56665d}
  .term-inline,.term-mini{font-size:.9em;opacity:.82}
  .term-help{font-size:.82em;opacity:.82}

  .btn,.chip,.map-toolbar button{min-height:40px;padding:9px 13px;font-size:15px}
  .filterbar{gap:11px;padding:12px 13px}
  .filterbar label{font-size:14.5px}
  .filterbar input,.filterbar select{min-height:42px;font-size:15.5px}

  .panel-head{padding:15px 17px}
  .panel-head h2,.panel-head h3{font-size:var(--fs-panel)}
  .panel-body{padding:17px}
  .section-title{margin:29px 0 13px}
  .section-title h2{font-size:var(--fs-section)}
  .section-title p{font-size:16px;line-height:1.45}

  .feature{padding:17px}
  .feature h3{font-size:20px;line-height:1.28}
  .feature p{font-size:16.5px;line-height:1.5}
  .badge{font-size:14px;padding:5px 9px}

  /* Dynamic track count removes empty KPI columns on pages with only 4 cards. */
  .kpi-grid,.metric-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .kpi,.metric-card{min-height:118px;padding:15px 72px 13px 15px}
  .kpi .label,.metric-label{font-size:15px;line-height:1.3;min-height:38px}
  .kpi .value,.metric-value-row{font-size:var(--fs-kpi)}
  .kpi .note,.metric-note{font-size:14.5px;line-height:1.35}

  .compact-facts{gap:11px}
  .compact-fact{padding:12px 13px}
  .compact-fact-label{font-size:14.5px}
  .compact-fact-value{font-size:22px}
  .compact-fact-meta{font-size:14.5px}
  .progress-big{height:12px}

  .region-table,.verifier-table{font-size:15.5px;line-height:1.42}
  .region-table th,.verifier-table th{font-size:14.5px;padding:12px 13px}
  .region-table td,.verifier-table td{padding:12px 13px}

  .activity-body{padding:17px}
  .activity-body h3{font-size:21px;line-height:1.32}
  .activity-body p{font-size:16px;line-height:1.48}
  .fact b,.mobile-data-grid b{font-size:20px}
  .fact-row-line{font-size:16.5px}
  .fact-row-line .small{font-size:15px}

  .source-note,.callout,.report-completeness-banner,.data-freshness{font-size:15px;line-height:1.48}
  details summary{font-size:15px;cursor:pointer}
  details code{font-size:14px;overflow-wrap:anywhere}

  .timeline-day{grid-template-columns:145px minmax(0,1fr) minmax(0,1fr);gap:14px}
  .timeline-date{padding:15px 10px;font-size:16px;line-height:1.35}
  .timeline-lane{padding:15px}
  .timeline-lane h3{font-size:19px;margin-bottom:10px}

  .gallery-card figcaption{font-size:16px;line-height:1.48}
  .media-meta{font-size:14.5px}
  .media-title{font-size:17px;line-height:1.35}
  .media-desc,.media-feed-sub,.media-feed-foot{font-size:14.5px;line-height:1.4}

  .verifier-region-type{font-size:14px}
  .verifier-gap-box span{font-size:13px}
  .verifier-gap-value span{font-size:12px}
  .verifier-gap-metrics,.verifier-note,.verifier-privacy{font-size:15px}
  .verifier-progress{height:12px}
  .verifier-gap-progress{height:9px}

  .region-breadcrumb{font-size:15px}
  .region-type-chip{font-size:13px}
  .region-province{font-size:18px}
  .region-title-block p{font-size:15.5px}
  .region-meta-card span{font-size:14px}
  .region-meta-card b{font-size:22px}

  .quick-link span{font-size:14.5px}
  .query-answer pre{font-size:14.5px;line-height:1.5}

  /* Situasi: reverse earlier compact 11.5–13 px desktop overrides. */
  .situasi-heading p{font-size:16.5px;line-height:1.48}
  .situasi-filter label{font-size:14.5px}
  .situasi-filter select{font-size:15px}
  .situasi-update-note{font-size:14px;line-height:1.4}
  .situasi-kpi-grid .kpi,.situasi-kpi-grid .metric-card{min-height:116px;padding:13px 50px 12px 13px}
  .situasi-kpi-grid .kpi .label,.situasi-kpi-grid .metric-label{font-size:14px;line-height:1.25;min-height:34px}
  .situasi-kpi-grid .kpi .note,.situasi-kpi-grid .metric-note{font-size:14px;line-height:1.3}
  .situasi-dashboard .panel-head h2{font-size:20px}
  .situasi-hotspot-panel .sit-bar-row{font-size:15.5px;grid-template-columns:minmax(150px,.95fr) minmax(180px,2.4fr) 54px}
  .situasi-hotspot-panel .sit-bar{height:11px}
  .module-heading h3{font-size:18px}
  .environment-summary{font-size:15.5px;line-height:1.45}
  .environment-rainfall{font-size:14.5px;line-height:1.4}
  .situasi-environment-panel .compact-fact-value{font-size:21px}
  .situasi-ispu-table{font-size:15px}
  .situasi-ispu-table th,.situasi-ispu-table td{padding:8px 10px}
  .ispu-status{font-size:13.5px;min-height:27px}
  .tactical-card-head h3{font-size:18px}
  .tactical-card .compact-fact{padding:8px 9px}
  .tactical-card .compact-fact-label{font-size:14px}
  .tactical-card .compact-fact-value{font-size:20px}
  .tactical-card .compact-fact-meta{font-size:14px}
  .tactical-card .small{font-size:14px}
  .tactical-card-warning .callout{font-size:14px;line-height:1.4}
  .situasi-dashboard .region-table th,.situasi-dashboard .region-table td,.situasi-dashboard .compact-table th,.situasi-dashboard .compact-table td{padding:8px 10px}
}

@media (min-width:1500px){
  .shell{width:min(1760px,calc(100vw - 48px))}
  main.shell:has(.map-panel){width:min(1840px,calc(100vw - 28px))}
}

/* Tablet keeps readable values without inheriting phone abbreviations. */
@media (min-width:601px) and (max-width:900px){
  .region-table,.verifier-table{font-size:15px}
  .compact-fact-label{font-size:14px}
  .compact-fact-value{font-size:20px}
  .compact-fact-meta{font-size:14px}
}