/* =============================================================================
   Dashboard shell and widgets.

   The dashboards are built as one floating app window on a neutral ground,
   holding a bento of large widget cards. Every chart here is drawn with CSS or
   inline SVG, so there is no charting library and nothing to load.
   ============================================================================= */

.dash-body {
  --shell: #f1f1f2;
  --card: #fafafa;
  --hair: rgba(17, 17, 17, 0.06);
  /* 0.6 keeps gray text at 4.5:1 or more on the shell, the cards and white. */
  --muted: rgba(17, 17, 17, 0.6);
  --soft: rgba(17, 17, 17, 0.08);

  --c-blue: #1668ff;
  --c-green: #2fb56a;
  --c-pink: #f0328c;

  /* One height for everything in the filter row: pills and the action button. */
  --pill-h: 39px;

  background: var(--shell);
  min-height: 100vh;
}

/* ---------- The frame ----------
   Full bleed: the shell runs edge to edge and carries no shadow, so the widget
   cards are the only raised surface on the page. */

.app-shell {
  background: var(--shell);
  padding: 0 0 48px;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 34px 22px;
}

.app-brand { display: flex; align-items: center; gap: 9px; }
.app-brand img { width: 26px; height: auto; }
.app-brand span { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }

/* Pill nav: the current page is the only solid item, everything else is plain
   text, so the eye lands on where you are without any extra chrome. */
.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  flex-wrap: wrap;
}
.app-nav a {
  padding: 9px 15px;
  border-radius: 8px;
  color: rgba(17, 17, 17, 0.72);
  transition: background 0.15s ease, color 0.15s ease;
}
.app-nav a:hover { background: rgba(17, 17, 17, 0.05); color: var(--ink); }
.app-nav a[aria-current="page"] {
  background: #1a1a1a;
  color: #fff;
  font-weight: 500;
}
.app-nav a[aria-current="page"]:hover { background: #1a1a1a; color: #fff; }

.app-tools { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(17, 17, 17, 0.6);
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.icon-btn:hover { color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); }

.app-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, #6ea8ff, #1668ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--hair);
}

.chat-demo-tag {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1f8a4c;
  background: rgba(68, 220, 134, 0.18);
  border-radius: 4px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* ---------- Page head ---------- */

.dash-canvas { padding: 0 34px; }

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.dash-head h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}
.dash-head-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 10px 0 0;
}

.dash-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The action button sits in the filter row, so it shares the pills' height. */
.dash-filters .btn {
  padding: 0 18px;
  height: var(--pill-h);
  font-size: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  height: var(--pill-h);
  padding: 0 14px;
  font-size: 13.5px;
  color: rgba(17, 17, 17, 0.78);
  white-space: nowrap;
  transition: box-shadow 0.15s ease;
}
.pill:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.pill--plain { background: none; border-color: transparent; color: var(--muted); }
.pill--plain:hover { box-shadow: none; }
.pill svg { opacity: 0.45; }

/* ---------- Bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.w {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 22px 24px 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.w--wide { grid-column: span 2; }
.w--tall { grid-row: span 2; }

/* Explicit placement for the six-widget layout. Auto-flow cannot express it:
   two of the cards are two rows tall and sit either side of a stacked pair. */
.pos-a { grid-column: 1 / 3; grid-row: 1; }
.pos-b { grid-column: 3; grid-row: 1; }
.pos-c { grid-column: 1; grid-row: 2 / span 2; }
.pos-d { grid-column: 2; grid-row: 2; }
.pos-e { grid-column: 2; grid-row: 3; }
.pos-f { grid-column: 3; grid-row: 2 / span 2; }
.pos-g { grid-column: 1 / 4; grid-row: 4; }

/* The presale widget reads left to right: what it is, how far along each
   phase is, and when the sales team can start selling. */
.w--presale {
  flex-direction: row;
  align-items: center;
  gap: 40px;
}
.ps-id {
  flex: 1.1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ps-id .w-title, .ps-id .w-sub { margin: 0; }
.ps-cta { margin-top: 8px; }
.ps-phases {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ps-ready {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.w-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.w-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.w-sub { font-size: 13px; color: var(--muted); margin: 5px 0 0; }

.w-menu {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--hair);
  color: rgba(17, 17, 17, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.08em;
  font-size: 15px;
  line-height: 1;
  padding-bottom: 4px;
}
.w-menu:hover { color: var(--ink); }
.w-menu { transition: color 0.15s ease, rotate 0.35s var(--spring); }
@media (hover: hover) {
  .w-menu:hover { rotate: 90deg; }
}

/* ---------- Staged bar chart ---------- */

.chart {
  display: grid;
  grid-template-columns: 38px repeat(var(--cols, 5), minmax(0, 1fr));
  flex: 1;
  min-height: 250px;
}

/* Y axis sits in its own track so the bars keep equal widths. */
.chart-axis {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(17, 17, 17, 0.3);
  padding-bottom: 24px;
  padding-top: 66px;
}

.bar-col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}

.bar-label {
  font-size: 12.5px;
  color: rgba(17, 17, 17, 0.35);
  padding-top: 4px;
}
.bar-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(17, 17, 17, 0.28);
  margin: 2px 0 14px;
}

/* The slot takes the leftover height of the column, which is what gives the
   bar a definite box to be a percentage of. Gridlines live here so they cover
   the plot area only and stop below the labels. */
.bar-slot {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: repeating-linear-gradient(
    to top,
    rgba(17, 17, 17, 0.08) 0 1px,
    transparent 1px 25%
  );
}

/* A thin cap floats above each bar, the way a slider handle would, which gives
   the column a top edge even when the bar itself is short. */
.bar-cap {
  width: 22px;
  height: 4px;
  border-radius: 4px;
  background: rgba(22, 104, 255, 0.35);
  margin: 0 auto 8px;
}

.bar {
  height: calc(var(--h) * 1%);
  min-height: 6px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #cfe0ff, #7ba8ff);
  position: relative;
  overflow: hidden;
}
/* Diagonal hatching, so bars read as a material rather than a flat fill. */
.bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.5) 0 1.5px,
    transparent 1.5px 6px
  );
}

/* The column under the cursor, or the one the card is making a point about. */
.bar-col.is-active .bar-slot { background-image: none; }
.bar-col.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}
.bar-col.is-active > * { position: relative; }
.bar-col.is-active .bar-label { color: rgba(17, 17, 17, 0.55); }
.bar-col.is-active .bar-value { color: var(--ink); }
.bar-col.is-active .bar { background: linear-gradient(180deg, #4d8bff, #0b53e0); }
.bar-col.is-active .bar-cap { background: #1668ff; }

.bar-col:hover .bar-value { color: rgba(17, 17, 17, 0.6); }
.bar-col.is-active:hover .bar-value { color: var(--ink); }

/* Anchored inside the slot, so the offset is measured against the same box the
   bar height is a percentage of. The min() caps how high it can ride: past a
   certain bar height it overlaps the bar top rather than climbing into the
   value above the chart. */
.bar-tip {
  position: absolute;
  left: 50%;
  bottom: min(calc(var(--h) * 1% + 14px), calc(100% - 48px));
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  z-index: 2;
  pointer-events: none;
  /* Tooltip behaviour: hidden until the column is hovered, then it rises in. */
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.15s ease, translate 0.15s ease;
}
.bar-col:hover .bar-tip {
  opacity: 1;
  translate: 0 0;
}
.bar-tip strong { color: var(--ink); font-weight: 600; }
.bar-tip em { font-style: normal; color: var(--c-pink); font-weight: 600; }

/* ---------- Ask strip inside a widget ---------- */

.ask {
  margin-top: 18px;
  border-radius: 8px;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgba(190, 214, 255, 0.75), rgba(232, 240, 255, 0.4));
  border: 1px solid rgba(22, 104, 255, 0.1);
}
.ask-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.75);
  margin-bottom: 10px;
}
.ask-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 8px;
  padding: 13px 15px;
  font-size: 14px;
  color: rgba(17, 17, 17, 0.7);
}
.ask-chip {
  background: rgba(255, 176, 32, 0.16);
  border: 1px solid rgba(255, 176, 32, 0.4);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 13px;
  color: #a86a00;
}
/* A blinking caret is enough to say "this is where you would type". */
.ask-caret {
  width: 1.5px;
  height: 17px;
  background: var(--ink);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- Big figure and breakdown ---------- */

.figure-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.big-num {
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}
.trend-up { color: var(--c-green); }
.trend-down { color: var(--c-pink); }

.w-rule { border: 0; border-top: 1px solid var(--soft); margin: 22px 0; }

/* Spread over whatever height the card ends up with, so a tall card does not
   leave a block of dead space under the last bar. */
.breakdown {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  flex: 1;
}
.bd-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  margin-bottom: 9px;
}
.bd-name { color: rgba(17, 17, 17, 0.7); }
.bd-amount { font-weight: 600; }

.bd-track {
  height: 9px;
  border-radius: 4px;
  background: rgba(17, 17, 17, 0.07);
  overflow: hidden;
}
/* Dashed fills, so two bars of similar length still read apart at a glance. */
.bd-fill {
  height: 100%;
  width: calc(var(--p) * 1%);
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--c, var(--c-blue)) 0 4px,
    rgba(255, 255, 255, 0.65) 4px 6px
  );
}
.bd--green { --c: var(--c-green); }
.bd--blue { --c: var(--c-blue); }
.bd--pink { --c: var(--c-pink); }

/* ---------- Step line chart ---------- */

.spark { flex: 1; display: flex; flex-direction: column; position: relative; }

/* The plot stretches to fill the card rather than keeping the viewBox ratio.
   The stroke and the peak dot opt out of that scaling so neither goes oval. */
.spark svg {
  width: 100%;
  flex: 1;
  min-height: 90px;
  display: block;
}

.spark-chip {
  align-self: center;
  margin-top: auto;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  margin-bottom: 8px;
}

.spark-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: rgba(17, 17, 17, 0.35);
  margin-top: 10px;
}

/* ---------- Dot matrix ---------- */

/* Number and its comparison stack on the left, chart on the right. Putting the
   comparison on its own side made the row wrap once the number ran to three
   characters at this card width. */
.dot-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: auto;
}
.dot-figure { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dot-note { font-size: 12.5px; color: var(--muted); }
.dot-note strong { font-weight: 600; color: var(--ink); }

.dots { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin-left: auto; }
.dot-col { display: flex; flex-direction: column-reverse; gap: 4px; }
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--c-blue));
  opacity: 0.28;
}
.dot--on { opacity: 1; }
.dots--green { --dot: var(--c-green); }
.dots--blue { --dot: var(--c-blue); }

.peak-chip {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.peak-chip strong { color: var(--ink); font-weight: 600; }

/* ---------- Gradient insight card ---------- */

.w--glow {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  color: #fff;
  background:
    radial-gradient(120% 80% at 100% 0%, #ffb26b 0%, rgba(255, 178, 107, 0) 55%),
    radial-gradient(90% 70% at 108% 42%, #ffe08a 0%, rgba(255, 224, 138, 0) 60%),
    radial-gradient(120% 90% at 0% 100%, #0b3ea8 0%, rgba(11, 62, 168, 0) 60%),
    linear-gradient(160deg, #7fb0e6 0%, #3f7fd4 42%, #123c8f 100%);
}
/* A soft sheen across the top keeps the mesh from looking like a flat ramp. */
.w--glow::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 70%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: rotate(-18deg);
  pointer-events: none;
}
.w--glow > * { position: relative; }

.glow-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 500;
}
.glow-num {
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: auto 0 20px;
}
.glow-lead {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.32;
  margin: 0 0 14px;
}
.glow-body {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.glow-steps { display: flex; gap: 6px; margin-top: 24px; }
.glow-steps span {
  flex: 1;
  height: 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
}
.glow-steps span.is-on { background: #fff; }

/* ---------- Bonus slide deck (Talent dashboard) ----------
   A one-at-a-time carousel on the gradient card: arrows and dots page through
   the slides, a horizontal swipe does the same, and the track glides on the
   spring curve. */

.glow-deck {
  overflow: hidden;
  margin-top: auto;
  touch-action: pan-y;
}
.glow-track {
  display: flex;
  transition: transform 0.5s var(--spring, ease);
}
.glow-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.glow-slide .glow-num { margin: 12px 0 18px; }

.glow-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.glow-arrow {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.glow-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.32); }
.glow-arrow:disabled { opacity: 0.35; cursor: default; }
.glow-arrow svg { transition: translate 0.18s var(--spring); }
@media (hover: hover) {
  #bonusPrev:hover:not(:disabled) svg { translate: -2px 0; }
  #bonusNext:hover:not(:disabled) svg { translate: 2px 0; }
}

.glow-dots { display: flex; align-items: center; gap: 7px; }
.glow-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.3s var(--spring, ease), background 0.2s ease;
}
/* The active dot stretches into a pill, the way iOS pagers do. */
.glow-dot.is-on { width: 18px; background: #fff; }

.glow-btn {
  align-self: flex-start;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
  transition: background 0.15s ease;
}
.glow-btn:hover { background: rgba(255, 255, 255, 0.32); }

/* ---------- Lists below the bento ---------- */

.dash-section { margin-top: 34px; }

.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.dash-h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
}
.dash-section-note { font-size: 13.5px; color: var(--muted); margin: 0; }

.row-list { display: flex; flex-direction: column; gap: 12px; }

.row-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.row-card:hover {
  border-color: rgba(17, 17, 17, 0.14);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.row-main { flex: 1 1 260px; min-width: 0; }
.row-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 5px; }
.row-meta { font-size: 13.5px; color: var(--muted); }

.row-progress { flex: 0 0 160px; }
.row-progress-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(17, 17, 17, 0.08);
  overflow: hidden;
}
.row-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--c-green) 0 4px,
    rgba(255, 255, 255, 0.65) 4px 6px
  );
}
.row-progress-label { font-size: 12.5px; color: var(--muted); margin-top: 7px; }

.row-people { display: flex; align-items: center; }
.row-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 2px solid var(--card);
  margin-left: -9px;
}
.row-avatar:first-child { margin-left: 0; }
.row-avatar--pm { background: #1f8a4c; }

.row-actions { display: flex; align-items: center; gap: 12px; }
.row-actions .btn { padding: 11px 20px; font-size: 14px; }
.row-link { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.row-link:hover { color: var(--ink); text-decoration: underline; }

.row-due { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.row-due strong { font-weight: 600; color: var(--ink); }

/* Offers carry a green edge, since they are the one row that needs an answer. */
.offer-card { border-color: rgba(47, 181, 106, 0.4); }
.offer-price { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.offer-price span { font-size: 12.5px; font-weight: 400; color: var(--muted); display: block; margin-top: 3px; }
.offer-locked { font-size: 12.5px; color: var(--muted); margin-top: 7px; }

.dash-empty {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 34px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w--wide { grid-column: span 2; }
  .w--tall { grid-row: auto; }

  /* Two columns: the wide card keeps the full width, the rest flow normally. */
  .pos-a { grid-column: 1 / 3; grid-row: auto; }
  .pos-b, .pos-c, .pos-d, .pos-e, .pos-f { grid-column: auto; grid-row: auto; }
  .pos-g { grid-column: 1 / 3; grid-row: auto; }
  .w--presale { flex-direction: column; align-items: stretch; }
  .ps-ready { flex-direction: row; align-items: baseline; gap: 14px; }
}

@media (max-width: 760px) {
  .app-shell { padding-bottom: 28px; }

  /* Phone topbar: brand and tools share the first row, and the nav becomes a
     single scrollable strip beneath them. Two short rows instead of a stack
     that eats a quarter of the screen. */
  .app-topbar { padding: 10px 16px 12px; flex-wrap: wrap; row-gap: 6px; column-gap: 12px; }
  .app-brand { order: 0; }
  .app-tools { order: 1; margin-left: auto; }
  .app-nav {
    order: 2;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    font-size: 13px;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav a { padding: 7px 11px; white-space: nowrap; }
  .app-cta { padding: 8px 14px; font-size: 13px; }
  .dash-canvas { padding: 0 16px; }
  .dash-filters { width: 100%; }

  .bento { grid-template-columns: minmax(0, 1fr); }
  .w--wide, .pos-a, .pos-g { grid-column: auto; }
  .w { padding: 18px 18px 20px; border-radius: 8px; }

  /* Five columns in 300-odd pixels: the value has to come down to 12px and the
     column padding has to go, or neighbouring amounts run into each other. */
  .chart { grid-template-columns: 26px repeat(var(--cols, 5), minmax(0, 1fr)); min-height: 210px; }
  .chart-axis { padding-top: 52px; font-size: 10px; }
  .bar-col { padding: 0 2px; }
  .bar-value { font-size: 12px; letter-spacing: -0.03em; margin-bottom: 10px; }
  .bar-label { font-size: 10px; }
  .bar-cap { width: 14px; }
  /* Tooltips have nowhere to go at this width, so the active value carries it. */
  .bar-tip { display: none; }

  .row-card { flex-direction: column; align-items: stretch; gap: 16px; }
  .row-progress { flex: 1 1 auto; }
  .row-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ask-caret { animation: none; }
  .bar-tip { transition: none; translate: 0 0; }
}

/* Canonical topbar tools, shared by every page. */
.app-signin { font-size: 14px; color: rgba(17, 17, 17, 0.65); }
.app-signin:hover { color: var(--ink); }
.app-cta { padding: 10px 18px; font-size: 14px; }

/* =============================================================================
   Dark theme. The shell tokens map onto the palette in gridma-theme.css, so
   every sheet that reads --shell, --card, --hair, --muted or --soft follows.
   The rules after them catch the colors written in place above.
   ============================================================================= */

/* Screen only: a printout keeps the light colors on white paper. */
@media screen {
  :root[data-theme="dark"] .dash-body {
    --shell: var(--dk-page);
    --card: var(--dk-surface);
    --hair: var(--dk-line);
    --muted: var(--dk-muted);
    --soft: var(--dk-line);
  }

  /* ---------- Top bar ---------- */

  :root[data-theme="dark"] .app-nav a { color: var(--dk-ink-2); }
  :root[data-theme="dark"] .app-nav a:hover { background: var(--dk-tint-2); color: var(--dk-ink); }
  /* The current page inverts like the primary button. */
  :root[data-theme="dark"] .app-nav a[aria-current="page"],
  :root[data-theme="dark"] .app-nav a[aria-current="page"]:hover {
    background: var(--dk-ink);
    color: var(--dk-on-ink);
  }

  :root[data-theme="dark"] .icon-btn {
    background: var(--dk-surface-2);
    border-color: var(--dk-line-2);
    color: var(--dk-muted);
  }
  :root[data-theme="dark"] .icon-btn:hover { color: var(--dk-ink); box-shadow: 0 2px 8px var(--dk-shadow); }

  /* The ring around the avatar is the bar's color, not white. */
  :root[data-theme="dark"] .app-avatar { border-color: var(--dk-page); }

  :root[data-theme="dark"] .chat-demo-tag { color: var(--dk-success); background: var(--dk-success-bg); }

  :root[data-theme="dark"] .app-signin { color: var(--dk-muted); }
  :root[data-theme="dark"] .app-signin:hover { color: var(--dk-ink); }

  /* ---------- Pills, menus, chips ---------- */

  :root[data-theme="dark"] .pill { background: var(--dk-surface-2); color: var(--dk-ink-2); }
  :root[data-theme="dark"] .pill:hover { box-shadow: 0 2px 8px var(--dk-shadow); }
  /* The plain pill stays plain. */
  :root[data-theme="dark"] .pill--plain { background: none; color: var(--muted); }
  :root[data-theme="dark"] .pill--plain:hover { box-shadow: none; }

  :root[data-theme="dark"] .w-menu { background: var(--dk-surface-2); color: var(--dk-muted); }
  :root[data-theme="dark"] .w-menu:hover { color: var(--dk-ink); }

  :root[data-theme="dark"] :is(.trend, .spark-chip, .peak-chip) { background: var(--dk-surface-2); }
  :root[data-theme="dark"] .spark-chip { box-shadow: 0 4px 14px var(--dk-shadow); }
  /* The pink is too dim for small text on the dark card. */
  :root[data-theme="dark"] .trend-down { color: var(--dk-danger); }

  /* ---------- Bar chart ---------- */

  :root[data-theme="dark"] :is(.chart-axis, .bar-label, .bar-value, .spark-axis) { color: var(--dk-muted); }
  :root[data-theme="dark"] .bar-slot {
    background-image: repeating-linear-gradient(to top, var(--dk-line) 0 1px, transparent 1px 25%);
  }
  :root[data-theme="dark"] .bar-col.is-active .bar-slot { background-image: none; }
  :root[data-theme="dark"] .bar-col.is-active::before {
    background: linear-gradient(180deg, var(--dk-tint-2), transparent);
  }
  :root[data-theme="dark"] .bar-col.is-active .bar-label,
  :root[data-theme="dark"] .bar-col:hover .bar-value { color: var(--dk-ink-2); }
  :root[data-theme="dark"] .bar-col.is-active .bar-value,
  :root[data-theme="dark"] .bar-col.is-active:hover .bar-value { color: var(--dk-ink); }

  :root[data-theme="dark"] .bar-tip {
    background: var(--dk-surface-2);
    border-color: var(--dk-line-2);
    box-shadow: 0 6px 20px var(--dk-shadow);
  }
  /* Pink small text falls under 4.5:1 on the dark tip. */
  :root[data-theme="dark"] .bar-tip em { color: var(--dk-danger); }

  /* ---------- Ask strip ---------- */

  :root[data-theme="dark"] .ask { background: var(--dk-surface-2); border-color: var(--dk-line); }
  :root[data-theme="dark"] .ask-head { color: var(--dk-ink-2); }
  :root[data-theme="dark"] .ask-field { background: var(--dk-surface-3); color: var(--dk-ink-2); }
  :root[data-theme="dark"] .ask-chip {
    background: var(--dk-warn-bg);
    border-color: transparent;
    color: var(--dk-warn);
  }

  /* ---------- Breakdown and progress ---------- */

  :root[data-theme="dark"] .bd-name { color: var(--dk-ink-2); }
  :root[data-theme="dark"] :is(.bd-track, .row-progress-bar) { background: var(--dk-line); }
  /* The gaps in the dashed fills let the track show through instead of white. */
  :root[data-theme="dark"] .bd-fill {
    background: repeating-linear-gradient(90deg, var(--c, var(--c-blue)) 0 4px, transparent 4px 6px);
  }
  :root[data-theme="dark"] .row-progress-fill {
    background: repeating-linear-gradient(90deg, var(--c-green) 0 4px, transparent 4px 6px);
  }

  /* ---------- Lists ---------- */

  :root[data-theme="dark"] .row-card:hover {
    border-color: var(--dk-line-2);
    box-shadow: 0 4px 16px var(--dk-shadow);
  }
  /* The black initials avatar inverts; the green one keeps its color. */
  :root[data-theme="dark"] .row-avatar:not(.row-avatar--pm) { background: var(--dk-ink); color: var(--dk-on-ink); }
}