/* Customer 360 — per-screen layout (scoped under .ds-view, tokens only).
   Components come from the kit (.card, .view-tabs, .data-table, .empty-state, badges);
   this file only owns the screen's grid/scroll/spacing chrome. Namespaced ds-c360-*.
   Loaded after the other *-layout.scoped.css files in index.html. */

/* The design-system .btn sets its own display, which overrides the UA [hidden]
   style — force hidden to win for the controls/hints/store/menus that toggle it. */
.ds-view [hidden] { display: none !important; }

.ds-view .ds-c360-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-7) var(--space-8);
}

.ds-view .ds-c360-back {
  margin-bottom: var(--space-4);
}

/* Header */
.ds-view .ds-c360-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ds-view .ds-c360-header .avatar {
  width: 48px;
  height: 48px;
  font-size: var(--fs-4);
  flex-shrink: 0;
}
.ds-view .ds-c360-header-text { flex: 1; min-width: 0; }
.ds-view .ds-c360-title {
  font-size: var(--fs-6);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  line-height: var(--lh-tight);
}
.ds-view .ds-c360-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fs-3);
  color: var(--text-2);
  margin-top: var(--space-2);
}
.ds-view .ds-c360-meta-pill {
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2);
  padding: 1px var(--space-3);
  border-radius: var(--radius-pill);
}
.ds-view .ds-c360-owner { display: inline-flex; align-items: center; gap: var(--space-2); }
.ds-view .ds-c360-owner .avatar { width: 22px; height: 22px; font-size: var(--fs-1); }
.ds-view .ds-c360-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Tabs sit flush; give the pane breathing room below the strip */
.ds-view .ds-c360-tabs { margin-bottom: var(--space-5); }
.ds-view .ds-c360-pane { display: none; }
.ds-view .ds-c360-pane.is-active { display: block; }

/* 12-column dashboard grid on a uniform 160px row unit: tiles snap to the same
   heights (short = 1 unit, tall = 2 units) and content scrolls inside, so rows
   line up with no ragged gaps. (Chunk 3 reorder/resize; gap fix 2026-07-14.) */
.ds-view .ds-c360-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 160px;
  gap: var(--space-5);
  align-items: stretch;
}
.ds-view .ds-c360-grid > [data-w="quarter"]    { grid-column: span 3; }
.ds-view .ds-c360-grid > [data-w="third"]      { grid-column: span 4; }
.ds-view .ds-c360-grid > [data-w="half"]       { grid-column: span 6; }
.ds-view .ds-c360-grid > [data-w="two-thirds"] { grid-column: span 8; }
.ds-view .ds-c360-grid > [data-w="full"]       { grid-column: span 12; }
.ds-view .ds-c360-grid > [data-h="short"]      { grid-row: span 1; }
.ds-view .ds-c360-grid > [data-h="tall"]       { grid-row: span 2; }

@media (max-width: 980px) {
  .ds-view .ds-c360-grid > * { grid-column: 1 / -1; }
}

/* Tile chrome */
.ds-view .ds-c360-tile { min-width: 0; display: flex; flex-direction: column; }
.ds-view .ds-c360-tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.ds-view .ds-c360-tile-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ds-view .ds-c360-tile-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.ds-view .ds-c360-tile-body { min-width: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ds-view .ds-c360-ring-metric { display: flex; align-items: center; gap: var(--space-4); }

/* Edit-mode affordances on each tile (hidden until Customize) */
.ds-view .ds-c360-tile .widget-grip,
.ds-view .ds-c360-tile .tile-move,
.ds-view .ds-c360-tile .size-btn { display: none; }
/* F18: on-tile move arrows — edit mode only (mirrors grip/size-btn). */
.ds-view .ds-c360-tile .tile-move {
  border: none; background: transparent; color: var(--text-3); cursor: pointer;
  border-radius: var(--radius-sm); padding: 0 var(--space-1); font-size: var(--fs-2); line-height: 1;
}
.ds-view .ds-c360-pane.is-editing .tile-move { display: inline-flex; align-items: center; }
.ds-view .ds-c360-pane.is-editing .tile-move:hover { color: var(--text-1); background: var(--bg-hover); }
.ds-view .ds-c360-tile .size-btn {
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  font-size: var(--fs-4);
  line-height: 1;
}
.ds-view .ds-c360-tile .widget-grip { color: var(--text-3); }

/* Per-tile "✎ Correct" button (read mode; hidden while customizing) */
.ds-view .ds-c360-correct-btn {
  border: none; background: transparent; color: var(--text-3); cursor: pointer;
  border-radius: var(--radius-sm); padding: 0 var(--space-2); font-size: var(--fs-3); line-height: 1;
}
.ds-view .ds-c360-correct-btn:hover { color: var(--accent); background: var(--bg-hover); }
.ds-view .ds-c360-pane.is-editing .ds-c360-correct-btn { display: none; }

/* Correction entry popover */
.ds-view .ds-c360-correct-card {
  position: fixed; z-index: var(--z-popover); width: 320px; max-width: calc(100vw - 16px);
  background: var(--bg-raised); border: 1px solid var(--border-2); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
}
.ds-view .ds-c360-correct-title { font-size: var(--fs-3); font-weight: var(--fw-semibold); color: var(--text-1); }
.ds-view .ds-c360-correct-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

.ds-view .ds-c360-pane.is-editing .widget-grip { display: inline; cursor: grab; user-select: none; touch-action: none; }
.ds-view .ds-c360-pane.is-editing .widget-grip:active { cursor: grabbing; }
.ds-view .ds-c360-pane.is-editing .size-btn { display: inline-flex; align-items: center; }
.ds-view .ds-c360-pane.is-editing .size-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.ds-view .ds-c360-pane.is-editing .widget { outline: 1px dashed var(--border-2); outline-offset: 2px; }
.ds-view .ds-c360-pane.is-editing .widget:hover { box-shadow: var(--shadow-2); }

/* Dragging */
.ds-view .widget.is-dragging {
  position: fixed;
  z-index: var(--z-modal);
  margin: 0;
  pointer-events: none;
  box-shadow: var(--shadow-3);
  opacity: 0.95;
}
.ds-view .ds-c360-pane.is-drag-active { cursor: grabbing; user-select: none; }
.ds-view .drop-slot {
  border: 1px dashed var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-muted);
  min-height: 60px;
}
.ds-view .ds-c360-grid > .drop-slot[data-w="quarter"]    { grid-column: span 3; }
.ds-view .ds-c360-grid > .drop-slot[data-w="third"]      { grid-column: span 4; }
.ds-view .ds-c360-grid > .drop-slot[data-w="half"]       { grid-column: span 6; }
.ds-view .ds-c360-grid > .drop-slot[data-w="two-thirds"] { grid-column: span 8; }
.ds-view .ds-c360-grid > .drop-slot[data-w="full"]       { grid-column: span 12; }
.ds-view .ds-c360-grid > .drop-slot[data-h="short"]      { grid-row: span 1; }
.ds-view .ds-c360-grid > .drop-slot[data-h="tall"]       { grid-row: span 2; }

/* Controls row */
.ds-view .ds-c360-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.ds-view .ds-c360-controls-hint { flex: 1; min-width: 0; font-size: var(--fs-2); color: var(--text-3); }
.ds-view .ds-c360-controls-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Board = grid + chooser (chooser appears in edit mode) */
.ds-view .ds-c360-board { display: flex; gap: var(--space-5); align-items: flex-start; }
.ds-view .ds-c360-board .ds-c360-grid { flex: 1; min-width: 0; }
.ds-view .ds-c360-store { display: none; }

/* Tile chooser (edit-mode side panel) */
.ds-view .ds-c360-chooser {
  flex: 0 0 260px;
  align-self: stretch;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
}
.ds-view .ds-c360-chooser-head { padding: var(--space-2) var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-1); }
.ds-view .ds-c360-chooser-title { font-size: var(--fs-3); font-weight: var(--fw-bold); color: var(--text-1); }
.ds-view .ds-c360-chooser-sub { font-size: var(--fs-1); color: var(--text-3); margin-top: var(--space-1); }
.ds-view .ds-c360-chooser-group { padding: var(--space-2) 0; }
.ds-view .ds-c360-chooser-group + .ds-c360-chooser-group { border-top: 1px solid var(--border-1); }
.ds-view .ds-c360-chooser-group-label { font-size: var(--fs-1); font-weight: var(--fw-semibold); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-2); }
.ds-view .ds-c360-chooser-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ds-view .ds-c360-chooser-row:hover { background: var(--bg-hover); }
.ds-view .ds-c360-chooser-row > span:first-child { flex: 1; min-width: 0; }
.ds-view .ds-c360-c-name { display: block; font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--text-1); }
.ds-view .ds-c360-c-note { display: block; font-size: var(--fs-1); color: var(--text-3); }
.ds-view .ds-c360-chooser-row input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 0; }

/* Size (⋯) menu — floating, body-appended */
.ds-view .ds-c360-size-menu {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 160px;
  padding: var(--space-2);
}
.ds-view .ds-c360-size-label { font-size: var(--fs-1); font-weight: var(--fw-semibold); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-2) var(--space-3) var(--space-1); }
.ds-view .ds-c360-size-menu .menu-item.is-selected { color: var(--accent); font-weight: var(--fw-semibold); }

@media (max-width: 980px) {
  .ds-view .ds-c360-board { flex-direction: column; }
  .ds-view .ds-c360-chooser { flex-basis: auto; width: 100%; position: static; max-height: none; }
}

/* Metric tiles */
.ds-view .ds-c360-metric-value {
  font-size: var(--fs-6);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  line-height: var(--lh-tight);
}
.ds-view .ds-c360-metric-sub {
  font-size: var(--fs-2);
  color: var(--text-3);
  margin-top: var(--space-1);
}
.ds-view .ds-c360-metric-value--accent { color: var(--accent); }
.ds-view .ds-c360-metric-value--red { color: var(--red); }
.ds-view .ds-c360-bar {
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-active);
  overflow: hidden;
  margin: var(--space-2) 0;
}
.ds-view .ds-c360-bar-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }

/* F17 3a — goal-completion breakdown (design: docs/feedback/Goal Completion design).
   DISPLAY: clean filled bar, no handle. EDIT (click bar or %): handle + framed bar
   + a "Set %" number field appear; click out saves. */
.ds-view .ds-c360-goals { display: flex; flex-direction: column; gap: var(--space-3); }
.ds-view .ds-c360-goal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ds-view .ds-c360-goal-title { font-weight: var(--fw-semibold); color: var(--text-1); }
.ds-view .ds-c360-goal-done { font-size: var(--fs-1); font-weight: var(--fw-medium); color: var(--status-done); margin-left: var(--space-1); }
.ds-view .ds-c360-goal-pct { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: var(--fs-2); }
.ds-view .ds-c360-goal-note { color: var(--text-3); font-size: var(--fs-2); margin: var(--space-1) 0; }

/* Bar: relative so the edit handle can sit on it; fill rounded within. */
.ds-view .ds-c360-goal .ds-c360-bar { position: relative; overflow: visible; }
.ds-view .ds-c360-goal .ds-c360-bar-fill { position: absolute; inset: 0 auto 0 0; }
.ds-view .ds-c360-goal.is-complete .ds-c360-bar-fill { background: var(--status-done); }

/* Editable affordances (only inside .is-editable). */
.ds-view .ds-c360-goals.is-editable .ds-c360-bar { cursor: pointer; }
.ds-view .ds-c360-goals.is-editable .ds-c360-goal-pct { cursor: pointer; }
.ds-view .ds-c360-goal-edit { display: none; align-items: center; gap: var(--space-2); }
.ds-view .ds-c360-goal-edit label { color: var(--text-3); font-size: var(--fs-1); }
.ds-view .ds-c360-goal-num { width: 56px; background: var(--bg-raised); border: 1px solid var(--border-2);
  color: var(--text-1); border-radius: var(--radius-sm); padding: 2px 6px; font-size: var(--fs-2); text-align: right; }

/* The draggable handle — hidden until edit mode. */
.ds-view .ds-c360-bar-handle { position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--bg-surface); border: 2px solid var(--accent);
  box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.35)); display: none; cursor: grab; }
.ds-view .ds-c360-goal.is-complete .ds-c360-bar-handle { border-color: var(--status-done); }

/* Edit mode: reveal handle + number field, hide the plain %, frame the bar. */
.ds-view .ds-c360-goal.is-editing .ds-c360-bar-handle { display: block; }
.ds-view .ds-c360-goal.is-editing .ds-c360-goal-pct { display: none; }
.ds-view .ds-c360-goal.is-editing .ds-c360-goal-edit { display: inline-flex; }
.ds-view .ds-c360-goal.is-editing .ds-c360-bar { box-shadow: 0 0 0 3px var(--accent-muted); }

/* F17 3c — Customer View framed cards (Direction B: tinted header strip). The outer
   doc becomes a plain container; each section is its own card. Frames fully expand —
   no internal scrolling (the page scrolls as a whole). */
.ds-view .ds-c360-cv-doc { background: transparent; border: none; padding: 0; gap: var(--space-4); }
.ds-view .ds-c360-cv-pagehead { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-1); }
.ds-view .ds-c360-cv-cust { font-size: var(--fs-5); font-weight: var(--fw-bold); color: var(--text-1); }
.ds-view .ds-c360-cv-by { font-size: var(--fs-2); color: var(--text-3); }
.ds-view .ds-c360-cv-brand { display: inline-flex; align-items: center; gap: var(--space-1);
  font-weight: var(--fw-semibold); color: var(--accent); }
.ds-view .ds-c360-cv-brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ds-view .ds-c360-cv-card { background: var(--bg-surface); border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: visible; }
.ds-view .ds-c360-cv-card-head { display: flex; align-items: center; gap: var(--space-2);
  background: var(--accent-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-size: var(--fs-4); font-weight: var(--fw-bold); color: var(--text-1); }
.ds-view .ds-c360-cv-card-body { padding: var(--space-4); max-height: none; overflow: visible; }
/* Optional control pinned to the right of a card header strip (Tasks → Closed switch). */
.ds-view .ds-c360-cv-card-action { margin-left: auto; font-weight: var(--fw-regular); }

/* Timeline (This quarter / synthesized milestones) */
.ds-view .ds-c360-tl { position: relative; padding-left: var(--space-6); }
.ds-view .ds-c360-tl::before {
  content: ""; position: absolute; left: var(--space-3); top: var(--space-2); bottom: var(--space-2);
  width: var(--space-1); background: var(--border-2); border-radius: var(--radius-pill);
}
.ds-view .ds-c360-tl-item { position: relative; padding-bottom: var(--space-4); }
.ds-view .ds-c360-tl-item:last-child { padding-bottom: 0; }
.ds-view .ds-c360-tl-item::before {
  content: ""; position: absolute; left: calc(var(--space-2) - var(--space-6)); top: var(--space-1);
  width: var(--space-4); height: var(--space-4); border-radius: var(--radius-pill);
  background: var(--bg-surface); border: var(--space-1) solid var(--accent); box-sizing: border-box;
}
.ds-view .ds-c360-tl-date { font-size: var(--fs-1); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.ds-view .ds-c360-tl-title { font-size: var(--fs-3); font-weight: var(--fw-semibold); color: var(--text-1); margin-top: var(--space-1); }
.ds-view .ds-c360-tl-desc { font-size: var(--fs-2); color: var(--text-2); margin-top: var(--space-1); }

/* Risk / competition tinted cards */
.ds-view .ds-c360-risk {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--red-tint); border: 1px solid var(--red-ring);
  margin-bottom: var(--space-2); font-size: var(--fs-3); color: var(--text-1); line-height: var(--lh-body);
}
.ds-view .ds-c360-risk:last-child { margin-bottom: 0; }
.ds-view .ds-c360-risk--comp { background: var(--status-inproc-tint); border-color: var(--status-inproc-tint); }
.ds-view .ds-c360-risk-icon {
  flex-shrink: 0; width: var(--space-5); height: var(--space-5); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--red-ring); color: var(--red); font-weight: var(--fw-bold); font-size: var(--fs-2);
}
.ds-view .ds-c360-risk--comp .ds-c360-risk-icon { background: var(--status-inproc-tint); color: var(--status-inproc); }

/* Rendered intelligence content */
.ds-view .ds-c360-text {
  font-size: var(--fs-3);
  color: var(--text-1);
  line-height: var(--lh-body);
  margin: 0;
}
.ds-view .ds-c360-muted { color: var(--text-3); }
.ds-view .ds-c360-subhead {
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 var(--space-2);
}
.ds-view .ds-c360-list {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-3);
  color: var(--text-1);
  line-height: var(--lh-body);
}
.ds-view .ds-c360-recaps { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-view .ds-c360-recap-head { font-size: var(--fs-3); color: var(--text-1); margin-bottom: var(--space-1); }
.ds-view .ds-c360-recap-body { font-size: var(--fs-3); color: var(--text-2); line-height: var(--lh-body); }

/* Refresh / generate panel */
.ds-view .ds-c360-gen-body { display: flex; flex-direction: column; gap: var(--space-5); }
.ds-view .ds-c360-gen-search { width: 100%; margin-bottom: var(--space-2); }
.ds-view .ds-c360-gen-corrections { display: flex; flex-direction: column; gap: var(--space-2); max-height: 160px; overflow-y: auto; }
.ds-view .ds-c360-corr-empty { padding: var(--space-2) 0; font-size: var(--fs-2); }
.ds-view .ds-c360-corr-row { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-2); }
.ds-view .ds-c360-corr-sec { flex-shrink: 0; font-weight: var(--fw-semibold); color: var(--accent); background: var(--accent-muted); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: var(--fs-1); white-space: nowrap; }
.ds-view .ds-c360-corr-text { flex: 1; min-width: 0; color: var(--text-1); }
.ds-view .ds-c360-gen-calls {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.ds-view .ds-c360-gen-call {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-1);
  cursor: pointer;
  font-size: var(--fs-3);
}
.ds-view .ds-c360-gen-call:last-child { border-bottom: none; }
.ds-view .ds-c360-gen-call:hover { background: var(--bg-hover); }
/* Keep the bare checkbox its natural size — a legacy global stretches inputs to 100%. */
.ds-view .ds-c360-gen-call input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 0; }
.ds-view .ds-c360-gen-call-title { flex: 1 1 auto; min-width: 0; color: var(--text-1); }
.ds-view .ds-c360-gen-call .ds-c360-muted { flex: 0 0 auto; white-space: nowrap; }
/* F17 2b — Analyze impact preview block. */
.ds-view .ds-c360-impact { border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-3); background: var(--bg-raised); }
.ds-view .ds-c360-impact-head { font-weight: var(--fw-semibold); color: var(--text-1); margin-bottom: var(--space-2); }
.ds-view .ds-c360-impact-list { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.ds-view .ds-c360-impact-list li { color: var(--text-2); font-size: var(--fs-2); }

/* F17 2a — already-included calls: grayed out, not selectable. */
.ds-view .ds-c360-gen-call--added { opacity: 0.55; cursor: default; }
.ds-view .ds-c360-gen-call--added:hover { background: none; }
.ds-view .ds-c360-gen-call-added {
  flex: 0 0 auto;
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
}
.ds-view .ds-c360-gen-status {
  font-size: var(--fs-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.ds-view .ds-c360-gen-status--info { color: var(--text-2); background: var(--bg-hover); }
.ds-view .ds-c360-gen-status--error { color: var(--red); background: var(--status-cancelled-tint); }

/* Customer History timeline */
.ds-view .ds-c360-history { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-view .ds-c360-history-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.ds-view .ds-c360-history-date {
  font-size: var(--fs-2);
  color: var(--text-3);
  padding-top: var(--space-3);
  white-space: nowrap;
}
.ds-view .ds-c360-history-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
@media (max-width: 720px) {
  .ds-view .ds-c360-history-item { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Customer View — curated document */
.ds-view .ds-c360-cv-doc {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ds-view .ds-c360-cv-h {
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 0;
}
.ds-view .ds-c360-cv-doc > .ds-c360-cv-h:first-child { margin-top: 0; }

/* Today's call summary control + callout */
.ds-view .ds-c360-today-ctl { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: var(--space-4) 0; }
.ds-view .ds-c360-today-ctl .select { max-width: 380px; }
.ds-view .ds-c360-today-callout {
  background: var(--accent-muted);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* Customer picker (nav-item landing) */
.ds-view .ds-c360-picker-search {
  width: 100%;
  max-width: 420px;
  margin: var(--space-4) 0 var(--space-5);
}
.ds-view .ds-c360-picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ds-view .ds-c360-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.ds-view .ds-c360-picker-row:hover {
  background: var(--bg-hover);
  border-color: var(--border-2);
}
.ds-view .ds-c360-picker-name {
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  flex-shrink: 0;
}
.ds-view .ds-c360-picker-meta {
  font-size: var(--fs-2);
  color: var(--text-3);
  margin-left: auto;
  text-align: right;
}

/* Customer View export bar */
.ds-view .ds-c360-cv-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.ds-view .ds-c360-cv-note {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-2);
  color: var(--text-2);
}
.ds-view .ds-c360-cv-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* F18: Organize dashboard modal — reorder + show/hide tiles in one place. */
.ds-view .ds-c360-organize { max-width: 420px; width: 100%; }
.ds-view .ds-c360-org-sub { font-size: var(--fs-2); color: var(--text-3); margin: var(--space-1) 0 var(--space-2); }
.ds-view .ds-c360-org-hidden-label { margin-top: var(--space-4); }
.ds-view .ds-c360-org-list { display: flex; flex-direction: column; gap: var(--space-1); }
.ds-view .ds-c360-org-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-raised); }
.ds-view .ds-c360-org-row.is-hidden { opacity: 0.7; }
.ds-view .ds-c360-org-name { color: var(--text-1); font-size: var(--fs-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-view .ds-c360-org-actions { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }

/* ── Account analytics tiles (Mixpanel usage + Ternary config) ──────────────
   New atoms lifted from the approved mockup usage-tile-proposals.html; tokens
   only (except brand-logo white backing). Flagged for kit promotion in §8. */

/* Product usage stat tile */
.ds-view .u-stat { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
.ds-view .u-stat__row { display: flex; align-items: baseline; gap: var(--space-3); }
.ds-view .usage-band { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start;
  font-size: var(--fs-1); font-weight: var(--fw-semibold); letter-spacing: .02em;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.ds-view .usage-band::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; }
.ds-view .usage-band[data-band="strong"]   { color: var(--status-done); background: var(--status-done-tint); }
.ds-view .usage-band[data-band="moderate"] { color: var(--prio-med);    background: var(--prio-med-tint); }
.ds-view .usage-band[data-band="quiet"]    { color: var(--red);         background: var(--red-tint); }
.ds-view .usage-trend { font-size: var(--fs-2); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.ds-view .usage-trend--up   { color: var(--status-done); }
.ds-view .usage-trend--down { color: var(--red); }

/* Configuration footprint tile */
.ds-view .cfg { display: flex; flex-direction: column; gap: var(--space-6); height: 100%; }
.ds-view .cfg-sec__label { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: var(--space-3); }
.ds-view .cfg-spend { display: flex; align-items: baseline; gap: var(--space-3); }
.ds-view .cfg-spend__v { font-size: var(--fs-6); font-weight: var(--fw-bold); color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1; }
.ds-view .cfg-spend__u { font-size: var(--fs-2); color: var(--text-3); }
/* Stale spend stamp: the figure is the last one we could actually fetch, not today's.
   Muted while recent, amber caution once past the staleness threshold. */
.ds-view .cfg-spend__stale { cursor: help; border-bottom: 1px dotted currentColor; }
.ds-view .cfg-spend__stale[data-age="old"] { color: var(--prio-med); }
.ds-view .cfg-integ { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 700px) { .ds-view .cfg-integ { grid-template-columns: 1fr; gap: var(--space-5); } }
.ds-view .cfg-logos { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.ds-view .logo-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 54px; }
.ds-view .logo-sq { width: 32px; height: 32px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--fw-bold); color: var(--on-solid); letter-spacing: -.02em; overflow: hidden; }
.ds-view .logo-sq--img { background: #fff; padding: 3px; border: 1px solid var(--border-1); }
.ds-view .logo-sq img { width: 100%; height: 100%; object-fit: contain; }
.ds-view .logo-item__nm { font-size: var(--fs-1); color: var(--text-2); text-align: center; line-height: 1.2; }
.ds-view .logo-item__nm b { color: var(--text-1); font-weight: var(--fw-semibold); }
.ds-view .cfg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.ds-view .cfg-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-view .cfg-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-2); }
.ds-view .cfg-row__k { color: var(--text-2); }
.ds-view .cfg-row__v { font-weight: var(--fw-semibold); color: var(--text-1); font-variant-numeric: tabular-nums; }
.ds-view .cfg-row[data-flag="attention"] .cfg-row__v { color: var(--prio-med); }
.ds-view .cfg-row[data-flag="muted"] .cfg-row__v { color: var(--text-3); }

/* ── Product usage detail tile (stacked bar + tooltip + ranked table) ──────── */
.ds-view .u-detail { display: grid; grid-template-columns: 1.35fr 1px 1fr; gap: var(--space-6); height: 100%; }
@media (max-width: 900px) { .ds-view .u-detail { grid-template-columns: 1fr; } .ds-view .u-detail__rule { display: none; } }
.ds-view .u-detail__rule { background: var(--border-1); }
.ds-view .u-detail__col { display: flex; flex-direction: column; min-width: 0; }
.ds-view .u-colhead { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: var(--space-4); }

.ds-view .u-stackwrap { position: relative; display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; min-height: 0; }
.ds-view .u-stack { flex: 1 1 auto; min-height: 120px; width: 100%; }
.ds-view .u-stack rect.seg { transition: opacity var(--dur-fast) var(--ease); }
.ds-view .u-stack rect.hit { fill: transparent; cursor: pointer; }
.ds-view .u-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.ds-view .u-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-1); color: var(--text-2); }
.ds-view .u-legend__sw { width: 10px; height: 10px; border-radius: 3px; }

.ds-view .u-tip { position: absolute; z-index: var(--z-tooltip); pointer-events: none; top: 0; left: 0;
  background: var(--bg-raised); color: var(--text-1); border: 1px solid var(--border-2);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: var(--space-3) var(--space-4);
  min-width: 168px; opacity: 0; transform: translateY(2px); transition: opacity var(--dur-fast) var(--ease); }
.ds-view .u-tip.is-on { opacity: 1; transform: none; }
.ds-view .u-tip__hd { font-size: var(--fs-1); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.ds-view .u-tip__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-1); line-height: 1.7; }
.ds-view .u-tip__nm { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); }
.ds-view .u-tip__sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ds-view .u-tip__v { font-variant-numeric: tabular-nums; color: var(--text-1); }
.ds-view .u-tip__tot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-1);
  font-size: var(--fs-1); font-weight: var(--fw-semibold); }

/* ranked table (shared look with the config KPI rows) */
.ds-view .usage-bars { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-view .usage-bar { display: grid; grid-template-columns: 108px 1fr 32px; align-items: center; gap: var(--space-3); font-size: var(--fs-2); }
.ds-view .usage-bar__label { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-view .usage-bar__track { height: 8px; border-radius: var(--radius-pill); background: var(--bg-hover); overflow: hidden; }
.ds-view .usage-bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
.ds-view .usage-bar__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }