/* PlaneCharts shared interface layer.
   Tool-specific styles own layout and data ink. This file standardizes the
   typography, surface finish, controls, and defensive responsive behavior. */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:block;
  src:url('/assets/fonts/inter-latin.woff2?v=20260821a') format('woff2');
}

:root{
  --pc-font:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pc-radius-sm:9px;
  --pc-radius-md:14px;
  --pc-radius-lg:18px;
  --pc-focus:#4C8DE8;
}

html{-webkit-text-size-adjust:100%}
body{font-family:var(--pc-font)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
button,select,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--pc-focus);outline-offset:2px}
img,svg,canvas{max-width:100%}

/* Long labels and generated values must shrink or wrap inside layout cells. */
.card,.panel,.tile,.kpi,.metric,.widget,.section,.card-head,.panel-head,.toolbar,.controls,
.row,.item,.content,.main,.wrap,.container{min-width:0}
.card-title,.panel-title,.title,.subtitle,.hint,.note,.description,.label,.value{overflow-wrap:anywhere}

/* Shared surface language. Existing tool colors remain authoritative. */
.card,.panel,.tile,.kpi,.metric,.widget{border-radius:var(--pc-radius-md)}
button,.button,.btn,select,input,textarea{border-radius:var(--pc-radius-sm)}
.badge,.pill,.chip,.status-pill{border-radius:999px}
.card,.panel,.tile,.kpi,.metric,.widget,.button,.btn,button,select,input,textarea{transition:border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}

.tablebox,.table-wrap,.table-container,.heatmap-wrap,.chart-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}

@media(max-width:760px){
  .card-head,.panel-head,.section-head,.toolbar{gap:10px}
  .controls{max-width:100%;flex-wrap:wrap}
  select,input,textarea{max-width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}