/* signal-charts.css - Visual's two charts on a signal's Data tab (boards
   Data tab 8.1 to 11.0, F63): each titled by a sentence of menus with its
   dots at the right, the drawing (columns, rows of bars, a grid of
   squares, a line, a pie or a table; too many periods scroll sideways),
   the Statistics chart's threshold (the rule's dashed; one typed navy and
   bold with the undo icon), the box of a pressed bar's cases, the dots'
   menu with Show as beside it, and the Copy note. */

@layer components {
  .signal-charts { display: flex; flex-direction: column; gap: var(--space-8); }
  .signal-charts-chart { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
  .signal-charts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
  .signal-charts-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink); }
  .signal-charts-lead { font-weight: var(--weight-strong); }
  .signal-charts-pick { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-strong); }
  .signal-charts-pick .icon, .signal-charts-pick .icon svg,
  .signal-charts-add .icon, .signal-charts-add .icon svg,
  .signal-charts-undo .icon, .signal-charts-undo .icon svg,
  .signal-charts-more .icon, .signal-charts-more .icon svg { display: block; width: var(--icon-sm); height: var(--icon-sm); }
  .signal-charts-number { width: var(--chart-number-width); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); text-align: center; }

  /* ---- the drawings ---- */
  .signal-charts-drawing { overflow-x: auto; }
  .signal-charts-svg { display: block; min-width: 100%; }
  .signal-charts-axis, .signal-charts-label { fill: var(--ink-faint); font-size: var(--text-tag); }
  .signal-charts-label { text-anchor: middle; }
  .signal-charts-base { stroke: var(--line); stroke-width: 1; }
  .signal-charts-bar { fill: var(--accent); cursor: pointer; }
  .signal-charts-bar:hover, .signal-charts-bar:focus-visible { fill: var(--blue); outline: none; }
  .signal-charts-line { fill: none; stroke: var(--accent); stroke-width: 2; }
  .signal-charts-dot { fill: var(--accent); }
  .signal-charts-threshold-line { stroke: var(--chart-threshold); stroke-width: 1.5; stroke-dasharray: 4 3; }
  .signal-charts-threshold-line[data-state="changed"] { stroke: var(--accent); }

  .signal-charts-rows { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
  .signal-charts-rows li { display: grid; grid-template-columns: 40% 1fr auto; align-items: center; gap: var(--space-3); }
  .signal-charts-row-label { color: var(--ink-soft); }
  .signal-charts-track { display: block; height: var(--space-5); padding: 0; border: 0; background: transparent; cursor: pointer; }
  .signal-charts-fill { display: block; height: 100%; width: calc(var(--share, 0) * 100%); background: var(--accent); }
  .signal-charts-track:hover .signal-charts-fill, .signal-charts-track:focus-visible .signal-charts-fill { background: var(--blue); }
  .signal-charts-count { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

  .signal-charts-grid { border-collapse: separate; border-spacing: var(--space-1); font-size: var(--text-tag); }
  .signal-charts-grid th { color: var(--ink-soft); font-weight: var(--weight-regular); text-align: left; }
  .signal-charts-grid thead th { text-align: center; }
  .signal-charts-square {
    min-width: var(--chart-bar-min);
    height: var(--chart-bar-min);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) calc(var(--share, 0) * 85% + 10%), var(--panel));
    color: var(--panel);
    font-size: var(--text-tag);
    cursor: pointer;
  }
  .signal-charts-square[data-state="none"] { background: var(--mist); cursor: default; }
  .signal-charts-square:focus-visible { outline: var(--focus-ring); }

  .signal-charts-pie { display: flex; align-items: center; gap: var(--space-5); }
  .signal-charts-slice[data-shade="0"], .signal-charts-key[data-shade="0"] { fill: var(--accent); background: var(--accent); }
  .signal-charts-slice[data-shade="1"], .signal-charts-key[data-shade="1"] { fill: var(--blue); background: var(--blue); }
  .signal-charts-slice[data-shade="2"], .signal-charts-key[data-shade="2"] { fill: color-mix(in srgb, var(--blue) 55%, var(--panel)); background: color-mix(in srgb, var(--blue) 55%, var(--panel)); }
  .signal-charts-slice[data-shade="3"], .signal-charts-key[data-shade="3"] { fill: var(--ink-faint); background: var(--ink-faint); }
  .signal-charts-legend { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--ink-soft); }
  .signal-charts-key { display: inline-block; width: var(--space-4); height: var(--space-4); margin-right: var(--space-2); vertical-align: middle; }

  .signal-charts-table { border-collapse: collapse; font-size: var(--text-sm); }
  .signal-charts-table th, .signal-charts-table td { padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--line); text-align: right; white-space: nowrap; }
  .signal-charts-table th[scope="row"], .signal-charts-table thead th:first-child { text-align: left; font-weight: var(--weight-regular); }
  .signal-charts-table thead th { color: var(--ink-faint); font-weight: var(--weight-regular); }

  /* ---- the Statistics chart's threshold (9.2, 9.3) ---- */
  .signal-charts-threshold { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-soft); }
  .signal-charts-dash { display: block; width: var(--space-6); border-top: var(--chart-threshold-weight) dashed var(--chart-threshold); }
  .signal-charts-threshold[data-state="changed"] .signal-charts-number { color: var(--accent); font-weight: var(--weight-strong); }
  .signal-charts-threshold[data-state="changed"] .signal-charts-dash { border-top-color: var(--accent); }
  .signal-charts-undo { min-width: 0; min-height: 0; padding: 0; }

  /* ---- the box of a pressed bar's cases (8.7b) ---- */
  .signal-charts-box { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); }
  .signal-charts-box-head { display: flex; align-items: center; gap: var(--space-3); }
  .signal-charts-box-head h4 { margin: 0 auto 0 0; font-size: var(--text-sm); font-weight: var(--weight-strong); }
  .signal-charts-box-scroll { overflow-x: auto; }

  /* ---- the dots' menu, Show as beside it (10.1, 10.2) ---- */
  .signal-charts-menu { overflow: visible; }
  .signal-charts-more .icon { margin-left: auto; }
  .signal-charts-submenu {
    position: absolute;
    right: calc(100% + var(--space-2));
    bottom: 0;
    display: flex;
    flex-direction: column;
    min-width: var(--menu-min-width);
    padding: var(--space-2);
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow);
  }
  .signal-charts-submenu[hidden] { display: none; }
  .signal-charts-submenu .menu-item[aria-disabled="true"] { color: var(--ink-pale); cursor: not-allowed; }

  .signal-charts-note { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
  .signal-charts-note[hidden] { display: none; }
}