/* Views in an answer: KPI summaries, tables, charts (app/javascript/surfaces.js).
   Plain CSS, not Tailwind, because the same file is inlined into the MCP App
   resource (Mcp::ViewResource) for other hosts. It reads the app's
   --color-paper-* tokens where they exist -- so it follows the light and dark
   themes -- and falls back to Claude's light values where they don't. */

.surface {
  --sv-ink: var(--color-paper-ink, #0b0b0b);
  --sv-body: var(--color-paper-body, #52514e);
  --sv-muted: var(--color-paper-muted, #898781);
  --sv-line: var(--color-paper-line, rgb(11 11 11 / 10%));
  --sv-line-strong: var(--color-paper-line-strong, rgb(11 11 11 / 20%));
  --sv-cell: var(--color-paper-bubble, rgb(11 11 11 / 5%));
  --sv-head: var(--color-paper-selected, rgb(11 11 11 / 10%));
  --sv-hover: var(--color-paper-hover, rgb(11 11 11 / 5%));
  --sv-popover: var(--color-paper-popover, #ffffff);
  --sv-good: var(--color-paper-success, #006300);
  --sv-bad: var(--color-paper-danger, #8e2626);
  /* One colour: a single series, sparklines, heatmap shading, ungrouped
     scatter dots. Negative heatmap cells are clay, warm against Iris. A
     heatmap mixes its shades from the ground, the page behind the view. */
  --sv-accent: var(--color-paper-brand-ink, #5862d6);
  --sv-negative: var(--color-paper-clay, #d97757);
  --sv-ground: var(--color-paper, #ffffff);
  /* Good and bad as fills (the --sv-good/--sv-bad above are text): the
     waterfall's steps, Paul Tol's mint and red. */
  --sv-good-fill: var(--color-paper-good, #44bb99);
  --sv-bad-fill: var(--color-paper-bad, #ee6677);
  /* Table highlights, by name (Artifact::Spec::CELL_COLORS): ggplot2's hues,
     with plasma's orange and amber. A chip is the hue darkened just enough to
     carry white text (4.6:1, the same in both themes) -- except amber, which
     darkened turns olive, so it stays bright with dark text. A whole cell is
     the soft shade, which the page's tokens make pale in light and deep in
     dark. */
  --sv-tone-ink: #141413;
  --sv-tone-light: #ffffff;
  --sv-tone-red: #c84b45;
  --sv-tone-orange: #b05f0b;
  --sv-tone-amber: #fcce25;
  --sv-tone-green: #058828;
  --sv-tone-teal: #158185;
  --sv-tone-blue: #3972d1;
  --sv-tone-purple: #9c51d1;
  --sv-tone-gray: #767571;
  --sv-tone-red-soft: var(--color-paper-tone-red, #ffdad4);
  --sv-tone-orange-soft: var(--color-paper-tone-orange, #ffe0c6);
  --sv-tone-amber-soft: var(--color-paper-tone-amber, #f6e7bb);
  --sv-tone-green-soft: var(--color-paper-tone-green, #c9f6ca);
  --sv-tone-teal-soft: var(--color-paper-tone-teal, #c7f1f2);
  --sv-tone-blue-soft: var(--color-paper-tone-blue, #d3e9ff);
  --sv-tone-purple-soft: var(--color-paper-tone-purple, #f5dcff);
  --sv-tone-gray-soft: var(--color-paper-tone-gray, #e8e8e6);
  /* Several series: ggplot2's hues, which surfaces.js sets on each chart for
     its number of series (paintSeries). These are its eight, the fallback. */
  --sv-c0: #f8766d;
  --sv-c1: #cd9600;
  --sv-c2: #7cae00;
  --sv-c3: #00be67;
  --sv-c4: #00bfc4;
  --sv-c5: #00a9ff;
  --sv-c6: #c77cff;
  --sv-c7: #ff61cc;

  margin: 4px 0;
  padding: 14px 16px 16px;
  border: 0.5px solid var(--sv-line-strong);
  border-radius: 12px;
  color: var(--sv-ink);
  font-family: var(--font-chat, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 360;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

@media (max-width: 640px) { .surface { padding: 12px; } }

.surface .sv-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.surface .sv-title { font-weight: 500; flex: 1; min-width: 0; }
.surface .sv-version { flex: none; color: var(--sv-muted); font-size: 0.75rem; line-height: 1.25rem; }

/* The download menu: an icon at the title's right, shown on hover (always,
   on a touch screen), opening a small list. */
.sv-download { position: relative; flex: none; margin: -4px -6px 0 0; }
.sv-download-button {
  list-style: none; cursor: pointer; display: flex; padding: 4px; border-radius: 6px; color: var(--sv-muted);
  opacity: 0; transition: opacity 0.15s;
}
.sv-download-button::-webkit-details-marker { display: none; }
.surface:hover .sv-download-button, .sv-download[open] .sv-download-button,
.sv-download-button:focus-visible { opacity: 1; }
@media (hover: none) { .sv-download-button { opacity: 1; } }
.sv-download-button:hover { background: var(--sv-hover); color: var(--sv-ink); }
.sv-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 3; min-width: 140px; padding: 4px;
  background: var(--sv-popover); border: 0.5px solid var(--sv-line-strong); border-radius: 8px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%); display: flex; flex-direction: column;
}
.sv-menu-item {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 8px; border-radius: 5px; color: var(--sv-ink);
  font-size: 0.8125rem; line-height: 1.125rem;
}
.sv-menu-item:hover, .sv-menu-item:focus-visible { background: var(--sv-hover); }
.surface .sv-empty { color: var(--sv-muted); }

.sv-c0 { color: var(--sv-c0); } .sv-c1 { color: var(--sv-c1); }
.sv-c2 { color: var(--sv-c2); } .sv-c3 { color: var(--sv-c3); }
.sv-c4 { color: var(--sv-c4); } .sv-c5 { color: var(--sv-c5); }
.sv-c6 { color: var(--sv-c6); } .sv-c7 { color: var(--sv-c7); }
.sv-accent { color: var(--sv-accent); } .sv-negative { color: var(--sv-negative); }

/* ── KPI summary ── */
/* Square where cards meet; the group's outer corners are rounded by clipping,
   so they stay right whether the cards sit in a row or stack on a phone. */
.sv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px;
           border-radius: 8px; overflow: hidden; }
.sv-kpi { background: var(--sv-cell); padding: 10px 12px; }
.sv-kpi-label { color: var(--sv-body); font-size: 0.8125rem; }
.sv-kpi-value { font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; margin-top: 2px; letter-spacing: -0.01em; }
.sv-kpi-change { font-size: 0.75rem; line-height: 1rem; margin-top: 4px; color: var(--sv-muted); }
.sv-kpi-delta { font-weight: 500; margin-right: 4px; }
.sv-kpi-change[data-tone="good"] .sv-kpi-delta { color: var(--sv-good); }
.sv-kpi-change[data-tone="bad"] .sv-kpi-delta { color: var(--sv-bad); }

/* ── Table: the answer's own table look, plus sorting ── */
.sv-table-wrap { overflow-x: auto; }
.sv-table { width: 100%; border-collapse: separate; border-spacing: 2px; margin: -2px; }
.sv-table th, .sv-table td { padding: 8px; text-align: left; vertical-align: top; }
/* Square where cells meet; only the table's four outer corners are rounded. */
.sv-table > :first-child > tr:first-child > :first-child { border-top-left-radius: 6px; }
.sv-table > :first-child > tr:first-child > :last-child { border-top-right-radius: 6px; }
.sv-table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: 6px; }
.sv-table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: 6px; }
.sv-table th { background: var(--sv-head); font-weight: 500; white-space: nowrap; padding: 0; }
.sv-table td { background: var(--sv-cell); }
/* A cell its column's highlight rule flagged, in the colour it named. */
.sv-table [data-tone="red"] { --sv-tone: var(--sv-tone-red); --sv-tone-soft: var(--sv-tone-red-soft); }
.sv-table [data-tone="orange"] { --sv-tone: var(--sv-tone-orange); --sv-tone-soft: var(--sv-tone-orange-soft); }
.sv-table [data-tone="amber"] { --sv-tone: var(--sv-tone-amber); --sv-tone-soft: var(--sv-tone-amber-soft); }
.sv-table [data-tone="green"] { --sv-tone: var(--sv-tone-green); --sv-tone-soft: var(--sv-tone-green-soft); }
.sv-table [data-tone="teal"] { --sv-tone: var(--sv-tone-teal); --sv-tone-soft: var(--sv-tone-teal-soft); }
.sv-table [data-tone="blue"] { --sv-tone: var(--sv-tone-blue); --sv-tone-soft: var(--sv-tone-blue-soft); }
.sv-table [data-tone="purple"] { --sv-tone: var(--sv-tone-purple); --sv-tone-soft: var(--sv-tone-purple-soft); }
.sv-table [data-tone="gray"] { --sv-tone: var(--sv-tone-gray); --sv-tone-soft: var(--sv-tone-gray-soft); }
.sv-table td[data-tone] { background: var(--sv-tone-soft); }
/* Or a chip around the value, when the column asks for it. */
.sv-chip[data-tone] {
  /* Pulled out on the right only, by its padding, so its number lines up with
     the unshaded ones in the column; nothing pulls on the side a note sits. */
  display: inline-block; padding: 1px 6px; margin: -1px -6px -1px 0; border-radius: 5px;
  background: var(--sv-tone); color: var(--sv-tone-light);
}
.sv-chip[data-tone="amber"] { color: var(--sv-tone-ink); }
/* A number's note: "40.0% 2/5". */
.sv-cell-pair { display: inline-flex; align-items: baseline; gap: 8px; }
.sv-cell-pair > .sv-chip:not(:last-child) { margin-right: 0; }
.sv-cell-note { color: var(--sv-muted); font-size: 0.92em; }
.sv-table tfoot td { background: var(--sv-head); font-weight: 500; }
.sv-table .num { text-align: end; white-space: nowrap; }
.sv-table .nowrap { white-space: nowrap; }
.sv-table td:not(.num):not(.nowrap) { min-width: 14rem; }
.sv-sort { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 8px; cursor: pointer;
           text-align: inherit; border-radius: inherit; }
.sv-sort:hover { background: var(--sv-hover); }
.sv-sort:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: -2px; }
.sv-table th[aria-sort="ascending"] .sv-sort::after { content: " ↑"; color: var(--sv-muted); }
.sv-table th[aria-sort="descending"] .sv-sort::after { content: " ↓"; color: var(--sv-muted); }
/* A trend column: a sparkline in the accent, its end marked, and how far it moved. */
.sv-table td.trend { padding: 4px 8px; vertical-align: middle; white-space: nowrap; }
.sv-spark-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.sv-spark { display: block; flex: none; overflow: visible; }
.sv-spark-line { fill: none; stroke: var(--sv-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sv-spark-end { fill: var(--sv-accent); }
.sv-spark-change { color: var(--sv-body); font-size: 0.75rem; min-width: 3.25rem; text-align: right; }
.sv-spark-change.is-reading { color: var(--sv-ink); }
.sv-more { all: unset; cursor: pointer; margin-top: 8px; color: var(--sv-body); font-size: 0.8125rem; }
.sv-more:hover { color: var(--sv-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Charts ── */
.sv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; color: var(--sv-body); font-size: 0.75rem; }
.sv-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.sv-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex: none; }
/* A series drawn as a line over columns is keyed by a short line. */
.sv-swatch-line { width: 12px; height: 2px; border-radius: 1px; }
.sv-axis-title { color: var(--sv-muted); font-size: 0.6875rem; margin-bottom: 4px; }
.sv-axis-title-x { text-align: center; margin: 2px 0 0; }
.sv-plot { position: relative; width: 100%; min-height: 20px; }
.sv-plot svg { display: block; overflow: visible; }
.sv-plot text { font-family: inherit; font-size: 11px; font-weight: 400; }
.sv-tick { fill: var(--sv-muted); }
.sv-grid { stroke: var(--sv-line); stroke-width: 1; shape-rendering: crispEdges; }
.sv-zero { stroke: var(--sv-line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.sv-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sv-dot, .sv-bar { fill: currentColor; }
.sv-marker { fill: currentColor; stroke: var(--sv-popover); stroke-width: 2; }
.sv-guide { stroke: var(--sv-line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.sv-band { fill: var(--sv-hover); }
.sv-bar-label { fill: var(--sv-body); }
.sv-value { fill: var(--sv-ink); font-weight: 500; }
.sv-bar-row:hover .sv-bar { opacity: 0.85; }

/* Waterfall: totals a light grey (the theme's strong line, so it stays quiet
   on either ground), a step green when it moved the measure the good way and
   red when not, a dashed link carrying the running total. Paul Tol's red
   (#EE6677) and mint (#44BB99), of equal weight so a gain and a loss of the
   same size look it -- a pastel vermillion read as orange. Tol built them for
   red-green colour-blind readers, who still tell them apart. */
.sv-wf-total { fill: var(--sv-line-strong); }
.sv-wf-good { fill: var(--sv-good-fill); }
.sv-wf-bad { fill: var(--sv-bad-fill); }
.sv-wf-link { stroke: var(--sv-line-strong); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; }

/* Scatter: flat dots, the accent or their group's colour; a grey line joins
   points that share a link. */
.sv-point { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.sv-point-link { fill: none; stroke: var(--sv-line-strong); stroke-width: 1.5; stroke-linejoin: round; }
/* Hovered: a soft halo in the dot's own colour, not an ink ring. */
.sv-point.is-hover { stroke-width: 7; stroke-opacity: 0.35; }
.sv-point-label { fill: var(--sv-ink); font-weight: 500; }
.sv-avg { stroke: var(--sv-line-strong); stroke-width: 1; stroke-dasharray: 4 3; shape-rendering: crispEdges; }

/* Small multiples: a panel per technician or unit, two or three across,
   one on a phone. */
.sv-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 20px; }
.sv-panel { min-width: 0; }
/* A long name fades out at the edge, as the sidebar's titles do. */
.sv-panel-title { font-weight: 500; font-size: 0.8125rem; line-height: 1.125rem; margin-bottom: 4px;
                  overflow: hidden; white-space: nowrap;
                  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }

/* Heatmap cells: a bare tinted square, shaded over by value. */
.sv-cell-bare { fill: var(--sv-cell); }
.sv-cell.is-hover rect:last-of-type { stroke: var(--sv-ink); stroke-width: 1.5; }
.sv-cell-value { fill: var(--sv-body); font-size: 10px !important; pointer-events: none; }
.sv-cell-value.on { fill: var(--sv-popover); }
.sv-cell-day { font-size: 9px !important; }
.sv-shade-legend { display: flex; align-items: center; gap: 3px; margin-bottom: 8px; color: var(--sv-muted);
                   font-size: 0.6875rem; }
.sv-shade-legend > span:first-child { margin-right: 4px; }
.sv-shade-legend > span:last-child { margin-left: 4px; }
.sv-by-day { display: flex; }
.sv-by-day > svg { flex: none; }
.sv-scroll { overflow-x: auto; min-width: 0; }
.sv-shade { width: 10px; height: 10px; background: var(--sv-cell); }

.sv-tip {
  position: absolute; z-index: 2; pointer-events: none; min-width: 140px; padding: 8px 10px;
  background: var(--sv-popover); border: 0.5px solid var(--sv-line-strong); border-radius: 8px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%); font-size: 0.75rem; line-height: 1.125rem;
}
.sv-tip-title { font-weight: 500; margin-bottom: 4px; }
.sv-tip-row { display: flex; align-items: center; gap: 6px; }
.sv-tip-name { color: var(--sv-body); flex: 1; white-space: nowrap; }
.sv-tip-value { font-weight: 500; white-space: nowrap; margin-left: 12px; }

/* ── Follow-up questions ── */
.sv-follow-ups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sv-follow-up {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 4px 10px; border-radius: 14px;
  border: 0.5px solid var(--sv-line-strong); color: var(--sv-body); font-size: 0.8125rem; line-height: 1.25rem;
}
.sv-follow-up:hover { background: var(--sv-hover); color: var(--sv-ink); }
.sv-follow-up:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: 1px; }
.sv-follow-up:disabled { opacity: 0.5; cursor: default; }

/* Views the model didn't place in its text follow the answer. */
.views { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.views:empty { display: none; }