/* NEXXO Workspace — PREM-01D / VIS-03.
   Presentation of EXISTING charts, curves, Gantt and timelines.
   Preserve all source data, chart series, labels, interactions and routes.
   Loaded after VIS-01 + VIS-02: no external assets. */

/* Gradual graphic palette: meaningful opacity, not decorative surfaces. */
html[data-theme="light"]{
  --nx-chart-grid:rgba(68,101,128,.16);
  --nx-chart-track:#F0F4F7;
  --nx-chart-ring:#FFFFFF;
  --nx-chart-hover:rgba(20,119,108,.08);
}
html[data-theme="dark"]{
  --nx-chart-grid:rgba(180,208,225,.13);
  --nx-chart-track:#1C3040;
  --nx-chart-ring:#101F2C;
  --nx-chart-hover:rgba(50,212,188,.11);
}

/* Project curve: same sampled dates and accepted/planned values. */
.curve-shell{
  margin-top:15px;
  min-width:0;
}
.curve-scroll{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent;
  border-radius:10px;
}
.curve-scroll:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
}
.curve-shell .plot{
  display:block;
  width:100%;
  max-height:300px;
  margin:0 auto;
  overflow:visible;
}
.curve-shell .plot text{
  font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  font-size:11px;
  font-weight:500;
  fill:var(--sub);
  font-variant-numeric:tabular-nums;
}
.curve-shell .curve-grid{
  stroke:var(--nx-chart-grid);
  stroke-width:1;
  stroke-dasharray:3 6;
}
.curve-shell .curve-area{
  pointer-events:none;
}
.curve-shell .curve-plan,
.curve-shell .curve-accepted{
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.curve-shell .curve-accepted{
  stroke-width:3.2px;
  filter:drop-shadow(0 2px 3px var(--nx-chart-hover));
}
.curve-shell .curve-point{
  stroke:var(--card);
  stroke-width:1.8px;
  paint-order:stroke;
  vector-effect:non-scaling-stroke;
}
.curve-hint{
  display:none;
  margin-top:8px;
  font-size:12px;
  text-align:center;
  color:var(--sub);
}
.card:has(.curve-shell) .chartkey{
  display:flex;
  gap:18px;
  margin-top:3px;
  font-size:12.5px;
}
.card:has(.curve-shell) .chartkey span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.card:has(.curve-shell) .chartkey span:nth-child(1) .swatch{
  width:18px;
  height:0;
  border-top:2px dashed var(--blue);
  background:none!important;
  border-radius:0;
}
.card:has(.curve-shell) .chartkey span:nth-child(2) .swatch{
  width:18px;
  height:0;
  border-top:3px solid var(--mint);
  background:none!important;
  border-radius:0;
}
.card:has(.curve-shell) .c-head h2{
  letter-spacing:-.018em;
}

/* Donuts throughout existing dashboard/reports:
   types, counts and conic gradient stops remain as generated in app.js. */
.donut{
  filter:drop-shadow(0 5px 10px rgba(12,34,49,.065));
}
html[data-theme="dark"] .donut{
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.14));
}
.donut:before{
  inset:26px;
  background:var(--card);
}
.donut-inner strong{
  font-weight:740;
  font-variant-numeric:tabular-nums;
}
.legendrow{
  line-height:1.5;
}
.legendrow .swatch{
  flex:none;
  width:9px;
  height:9px;
  border-radius:3px;
}
.legendrow strong{
  font-variant-numeric:tabular-nums;
}
.legend-action{
  border-radius:8px;
  padding:6px 5px;
  margin:-6px -5px;
}

/* Participation bars: improve chart reading without altering percentages. */
.bars{
  position:relative;
  border-bottom-color:var(--line2);
}
.bgroup{
  border-radius:9px 9px 0 0;
  transition:background .16s ease;
}
.bgroup-action:hover,
.bgroup-action:focus-visible{
  background:var(--nx-chart-hover);
}
.b{
  border-radius:5px 5px 0 0;
  transition:filter .16s ease;
}
.bgroup:hover .b{
  filter:saturate(1.13);
}
.xlabel{
  font-size:11px;
  line-height:1.3;
  color:var(--sub);
}

/* Existing Gantt, same flow dates/start/end and proportional positioning. */
.gantt-head{
  margin-top:20px;
  margin-bottom:14px;
  color:var(--sub);
  font-size:11px;
  font-weight:600;
  gap:8px;
}
.gantt-row{
  margin:13px 0;
  gap:10px;
  align-items:center;
}
.gantt-row label{
  color:var(--text);
  font-weight:550;
  font-size:12px;
  line-height:1.35;
}
.gantt-track{
  height:22px;
  border-radius:7px;
  background:
    repeating-linear-gradient(
      to right,transparent 0 calc(16.66% - 1px),
      var(--nx-chart-grid) calc(16.66% - 1px) 16.66%
    ),
    var(--nx-chart-track);
}
.gantt-bar{
  top:5px;
  height:12px;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(5,25,38,.10);
}
.gantt-row:hover .gantt-track{
  outline:1px solid var(--line2);
}

/* Milestone timeline remains chronological and non-interactive where original. */
.timeline{
  margin-top:20px;
  padding-bottom:10px;
}
.timeline:before{
  background:var(--line2);
}
.tm{
  padding-inline:7px;
}
.tm .dot{
  width:29px;
  height:29px;
  border:1.5px solid var(--line2);
  background:var(--card);
  font-weight:750;
}
.tm .dot.done{
  background:var(--green);
  border-color:var(--green);
  color:#033B33;
}
.tm strong{
  font-size:12px;
  line-height:1.4;
  font-weight:650;
}
.tm small{
  font-size:11px;
  line-height:1.4;
}

/* Small screens: internal SVG scrolling instead of unreadable micro-labels.
   No horizontal overflow for document itself. */
@media(max-width:720px){
  .curve-shell .plot{
    width:690px;
    min-width:690px;
    max-height:none;
  }
  .curve-scroll{
    padding-bottom:7px;
    background:
      linear-gradient(to right,var(--card) 42%,transparent) 0 0 / 26px 100% no-repeat local,
      linear-gradient(to left,var(--card) 42%,transparent) 100% 0 / 26px 100% no-repeat local,
      linear-gradient(to right,var(--nx-chart-grid),transparent) 0 0 / 12px 100% no-repeat scroll,
      linear-gradient(to left,var(--nx-chart-grid),transparent) 100% 0 / 12px 100% no-repeat scroll;
  }
  .curve-hint{display:block}
  .gantt-head{font-size:10px}
  .gantt-row label{font-size:11px}
  .tm{min-width:126px}
}
@media(max-width:390px){
  .gantt-head{font-size:9px}
  .gantt-row{gap:6px}
  .gantt-row label{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .bgroup,.b{transition:none}
}
@media print{
  .curve-scroll{overflow:visible}
  .curve-shell .plot{width:100%;min-width:0}
  .curve-hint{display:none}
  .donut{filter:none}
}