/* ===========================================================================
   Morning Brief — dashboard styles.

   The card system is the Routine Insight widget design: a grey widget shell
   holding white slots, metric cards in a scroll-snap carousel, and a full
   "More" view with tabs, line charts and a searchable grid.

   What is NOT here: the app shell (nav rail, topbar, .content) lives in
   shell.css and is deliberately untouched — only the cards changed.

   Two things to know before editing:

   1. The design ships its own palette (--color-* below) rather than reusing
      tokens.css. That is on purpose: the rules are ported near-verbatim from
      the source design, so keeping its variable names makes them diffable.
      Only --color-primary moved — red to the dashboard's green.
   2. tokens.css resets `ul,ol{list-style:none}` and `*{margin:0;padding:0}`,
      which the source stylesheet did not. The .md block restates its bullets
      and indents for that reason. Thai carries tone marks above and vowel
      signs below, so every rule holding Thai prose runs at >=20px
      line-height — the same trap already hit in css/omni.css.
   =========================================================================== */

/* ===== Page 1 overrides ===== */
body {
  background: #FFFFFF;
  background-image: none;
}

/* ===== Widget design system palette =====
   Brand red became the dashboard green. Status colours did not: --decent-red
   still means "this number is bad", and it is used that way throughout. */
:root {
  --color-primary: #04BE8C;
  --color-primary-dark: #03A77B;

  --color-gray-1: #212121;
  --color-gray-2: #424242;
  --color-gray-3: #616161;
  --color-gray-4: #757575;
  --color-gray-5: #9E9E9E;
  --color-gray-6: #BDBDBD;
  --color-gray-7: #EEEEEE;
  --color-gray-8: #E5E5E5;
  --color-gray-9: #F5F5F5;
  --color-gray-10: #FAFAFA;

  --color-decent-red: #FF5252;
  --color-decent-green: #29CB72;
  --color-decent-yellow: #FFB400;
  --color-decent-blue: #0F86FE;

  --color-light-red: #FEEAEC;
}

/* ===== Greeting header ===== */
.greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px 24px;
  gap: 16px;
}

.greeting__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.greeting__avatar {
  /* see the note on .topbar__avatar — full figure, no circular plate */
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.greeting__avatar img,
.greeting__avatar svg {
  height: 72px;
  width: auto;
  max-width: none;
  display: block;
}

/* The mark is the full Savvy figure, tight-cropped to its alpha bounds and
   transparent. It is sized by height and centred; nothing clips it. */

.greeting__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
}

.greeting__sub {
  font-size: 13px;
  line-height: 20px;
  color: var(--text-2);
  margin-top: 2px;
}

.greeting__updated {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray-5);
  text-align: right;
  white-space: nowrap;
}

/* ===========================================================================
   Bands — Summary / KPI / Highlight

   The brief reads top to bottom in three labelled bands, mirroring the app's
   1-of-3 / 2-of-3 / 3-of-3 structure. Each band owns its own grid, so the
   Summary can run full width while the KPI band packs three across.

   This replaced a three-column layout that needed `.col { display:contents }`
   plus `.w-order-*` to interleave columns on narrow screens. Bands stack in
   source order at every width, so none of that machinery is needed — don't
   reintroduce it.
   =========================================================================== */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0 24px;
  padding-bottom: 24px;
}

.band {
  display: flex;
  flex-direction: column;
}

.band__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.band__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.band__t {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-gray-1);
}

.band__hint {
  font-size: 13px;
  color: var(--color-gray-5);
}

/* right-aligned counter — "checked 17 · 5 need you" lands here in step 4 */
.band__meta {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-5);
  white-space: nowrap;
}

.band__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 24px;
  align-items: start;
}


/* ===========================================================================
   Widget card
   =========================================================================== */
.widget {
  background: var(--color-gray-9);
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
}

/* concentric arcs bleeding out of the top-right corner */
.widget-deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='200' cy='0' r='80' stroke='%23E0E0E0' fill='none' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='0' r='110' stroke='%23E0E0E0' fill='none' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='0' r='140' stroke='%23E0E0E0' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
}

.widget-body {
  position: relative;
  z-index: 1;
}

.widget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.widget-head-l {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.widget-icon {
  margin-top: 2px;
  flex: 0 0 16px;
  color: var(--color-primary);
}

.widget-icon svg {
  width: 16px;
  height: 16px;
}

.widget-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-1);
  line-height: 20px;
  overflow-wrap: break-word;
}

/* the More trigger — carries [data-modal-target] */
.more-btn {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
  flex: 0 0 auto;
  margin-left: 8px;
}

.more-btn span {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-gray-5);
  line-height: 14px;
  white-space: nowrap;
}

.more-btn svg {
  width: 9px;
  height: 12px;
  color: var(--color-gray-5);
}

.more-btn:hover span,
.more-btn:hover svg {
  color: var(--color-gray-3);
}

.widget-sub {
  margin-top: 12px;
}

.widget-sub .t {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-gray-1);
}

.widget-sub .d {
  font-size: 12px;
  font-style: italic;
  color: var(--color-gray-5);
  line-height: 18px;
}

/* the white surface a widget's content sits on */
.slot {
  background: #FFFFFF;
  margin-top: 16px;
  border-radius: 16px;
  width: 100%;
  overflow: hidden;
}

/* ===========================================================================
   Metric card — one carousel slide
   =========================================================================== */
.mcard {
  border-radius: 16px;
  background: #FFFFFF;
  overflow: hidden;
  height: 100%;
}

.mcard-in {
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mcard-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  overflow-wrap: break-word;
}

.mcard-date {
  font-size: 12px;
  font-style: italic;
  color: var(--color-gray-5);
  line-height: 18px;
}

.blk {
  margin-top: 16px;
}

.blk-h {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-1);
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.blk-h .info {
  width: 13px;
  height: 13px;
  color: var(--color-gray-6);
  flex: 0 0 13px;
}

.blk-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
}

/* ===== Gauge =====
   The arc is an SVG stroke-dasharray drawn by js/morning.js; its colour is a
   status band (>=120 blue, >=100 green, >=80 amber, below red), not the brand. */
.gauge {
  position: relative;
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gauge svg {
  position: absolute;
  inset: 0;
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
}

.gauge-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 1;
  max-width: 72px;
}

.gauge-txt .k {
  font-size: 12px;
  color: var(--color-gray-5);
  line-height: 1;
}

.gauge-txt .v {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-gray-1);
}

/* period kicker — MTD / YTD in brand green, AI forecasts in amber */
.gauge-txt .p {
  font-size: 9px;
  font-weight: 600;
  font-style: italic;
  color: var(--color-primary);
  line-height: 1;
}

/* ===== Metric rows ===== */
.metrics {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric .mv {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.metric .mv span {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric .ml {
  font-size: 10px;
  line-height: 14px;
  color: var(--color-gray-5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric svg {
  width: 9px;
  height: 10px;
  flex: 0 0 9px;
}

/* up is good, down is bad — except `badup`, which is a rise in something you
   want falling (churn), so it takes the red too */
.metric.up { color: var(--color-decent-green); }
.metric.down { color: var(--color-decent-red); }
.metric.badup { color: var(--color-decent-red); }

.hr {
  border-top: 1px solid var(--color-gray-7);
  margin: 0;
}

.na {
  font-size: 14px;
  line-height: 21px;
  color: var(--color-gray-5);
  text-align: center;
  padding: 28px 8px;
}

/* ===========================================================================
   Carousel — native scroll-snap, dots synced from the scroll position
   =========================================================================== */
.carousel {
  position: relative;
}

.cviewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cviewport::-webkit-scrollbar {
  display: none;
}

.ctrack {
  display: flex;
  margin-left: -12px;
  align-items: stretch;
}

/* slides stop short of the full width so the next card peeks in — the cue
   that says "there is more here" without a visible scrollbar */
.cslide {
  flex: 0 0 82%;
  min-width: 0;
  padding-left: 12px;
  scroll-snap-align: start;
}

.cdots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 8px;
  margin-top: 16px;
}

.cdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gray-7);
  transition: background .2s, width .2s, border-radius .2s;
}

.cdot.is-active {
  width: 18px;
  border-radius: 9999px;
  background: var(--color-primary);
}

/* ===========================================================================
   High-Level Insight — the AI narrative, authored as markup in brief-data.js
   =========================================================================== */
.md {
  padding: 20px;
}

.md h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 21px;
}

.md p {
  font-size: 14px;
  line-height: 22px;
  margin: 0 0 10px;
  color: var(--color-gray-1);
}

.md strong { font-weight: 700; }
.md em { font-style: italic; }

.md hr {
  border: 0;
  border-top: 1px solid var(--color-gray-7);
  margin: 16px 0;
}

/* tokens.css strips list markers and indents globally — restate both */
.md ul {
  margin: 0 0 10px;
  padding-left: 18px;
  list-style: disc;
}

.md ul ul {
  margin: 2px 0 4px;
  list-style: disc;
}

.md li {
  font-size: 14px;
  line-height: 22px;
  margin: 2px 0;
}

/* ===========================================================================
   Churn widgets
   =========================================================================== */
.simple {
  padding: 16px;
}

.simple .t {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.simple .d {
  font-size: 12px;
  font-style: italic;
  color: var(--color-gray-5);
  line-height: 18px;
}

.simple .h {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin-top: 14px;
}

.pair {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.pair > div {
  flex: 1;
  min-width: 0;
}

/* churn values are long ("152,002 (38.11%)") and there is room to wrap here,
   unlike in the tight metric column of a carousel card */
.pair .metric .mv span,
.pair .metric .ml {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ===========================================================================
   Tables — the Anomalies preview and the full grid inside a More view
   =========================================================================== */
.tbl-wrap {
  width: 100%;
  overflow-x: auto;
}

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.tbl th {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-gray-5);
  text-align: left;
  padding: 12px 16px;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-gray-7);
}

table.tbl th .th-in {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}

table.tbl th button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: space-between;
}

table.tbl td {
  padding: 12px 16px;
  line-height: 20px;
  color: var(--color-gray-1);
  border-bottom: 1px solid var(--color-gray-7);
  white-space: nowrap;
}

table.tbl tbody tr:last-child td {
  border-bottom: 0;
}

table.tbl tbody tr:hover {
  background: var(--color-gray-10);
}

table.tbl tbody tr.clickable {
  cursor: pointer;
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flag svg {
  width: 11px;
  height: 12px;
}

.sort-ico {
  width: 9px;
  height: 12px;
  color: var(--color-gray-6);
  flex: 0 0 9px;
}

/* ===== Grid search + pagination ===== */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-gray-9);
  border-radius: 10px;
  padding: 0 14px;
  height: 44px;
  margin-bottom: 12px;
}

.search svg {
  width: 14px;
  height: 14px;
  color: var(--color-gray-5);
  flex: 0 0 14px;
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--color-gray-1);
}

.search input::placeholder {
  color: var(--color-gray-5);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  flex-wrap: wrap;
}

.pbtn {
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--color-gray-3);
  padding: 0 6px;
}

.pbtn:hover {
  background: var(--color-gray-9);
}

.pbtn.is-active {
  background: var(--color-gray-7);
  color: var(--color-gray-1);
  font-weight: 700;
}

.pbtn[disabled] {
  opacity: .35;
  cursor: default;
}

.pbtn svg {
  width: 9px;
  height: 12px;
}

.psize {
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--color-gray-7);
  background: #FFFFFF;
  font: inherit;
  font-size: 13px;
  color: var(--color-gray-3);
  padding: 0 6px;
  margin-left: 6px;
}

/* ===========================================================================
   Ticketing widget
   =========================================================================== */
.tk {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tk-alert {
  background: var(--color-light-red);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-gray-1);
}

.tk-alert b {
  color: var(--color-decent-red);
  font-weight: 600;
}

.tk-stats {
  display: flex;
  gap: 8px;
}

.tk-stat {
  flex: 1;
  min-width: 0;
}

.tk-stat .v {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.tk-stat .l {
  font-size: 12px;
  color: var(--color-gray-5);
  line-height: 18px;
}

.tk-stat.red .v {
  color: var(--color-decent-red);
}

.tk-sub {
  background: var(--color-gray-9);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tk-grp {
  margin-top: 12px;
}

.tk-grp .g {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 8px;
}

.tk-nums {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.tk-total {
  flex: 0 0 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-gray-7);
  padding-right: 6px;
}

.tk-total .v {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.tk-total .l {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray-5);
}

.tk-sa {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.tk-sa .v {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.tk-sa .l {
  font-size: 12px;
  color: var(--color-gray-5);
  line-height: 18px;
}

.tk-red .v { color: var(--color-decent-red); }
.tk-mute .v { color: var(--color-gray-1); }

/* the "ask Mity about this" prompt at the foot of the widget */
.tk-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px 4px;
}

.tk-ask .emoji {
  font-size: 20px;
  line-height: 1;
}

.tk-ask .txt {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-gray-1);
}

.tk-ask .go {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.tk-ask .go:hover {
  background: var(--color-primary-dark);
}

/* ===========================================================================
   Modal shell — unchanged from the previous dashboard on purpose.

   js/morning.js's initModal, the [data-modal-close] delegation, Esc-to-close
   and the product tour's `.modal__dialog` anchor all depend on this markup.
   Only what renders inside #modal-body was replaced. The dialog is wider than
   before because a More view holds a chart and a 4-column grid.
   =========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-open {
  display: flex;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal.is-open .modal__overlay {
  opacity: 1;
}

.modal__dialog {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 1040px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.20);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.modal.is-open .modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal__header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(4, 190, 140, 0.12);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal__icon svg {
  width: 18px;
  height: 18px;
}

.modal__title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.4;
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.modal__close:hover {
  background: var(--color-gray-9);
  color: var(--text-1);
}

.modal__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.modal__body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
  color: var(--color-gray-1);
}

.modal__footer {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* a More view has no actions to offer — collapse the bar rather than leave a
   14px stripe under the content */
.modal__footer:empty {
  display: none;
}

.modal__btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.modal__btn--ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--border);
}

.modal__btn--ghost:hover {
  background: var(--color-gray-9);
}

.modal__btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
}

.modal__btn--primary:hover {
  background: var(--color-primary-dark);
}

/* ===========================================================================
   Modal contents — toolbar, tabs, charts, grid card
   =========================================================================== */
.mtoolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.chansel {
  position: relative;
  min-width: 190px;
}

.chansel select {
  appearance: none;
  width: 100%;
  height: 38px;
  border: 1px solid var(--color-gray-7);
  border-radius: 8px;
  background: #FFFFFF;
  font: inherit;
  font-size: 14px;
  color: var(--color-gray-1);
  padding: 0 34px 0 12px;
  cursor: pointer;
}

.chansel .caret {
  position: absolute;
  right: 12px;
  top: 13px;
  width: 11px;
  height: 12px;
  color: var(--color-gray-4);
  pointer-events: none;
}

.filter-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--color-gray-9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-2);
  flex: 0 0 38px;
}

.filter-btn:hover {
  background: var(--color-gray-7);
}

.filter-btn svg {
  width: 16px;
  height: 16px;
}

.tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tab {
  height: 34px;
  padding: 0 18px;
  border-radius: 9999px;
  border: 1px solid var(--color-gray-7);
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-1);
  display: flex;
  align-items: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.tab:hover {
  background: var(--color-gray-9);
}

.tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.tab.is-active:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.mpanel { display: none; }
.mpanel.is-active { display: block; }

.chart-card {
  background: var(--color-gray-9);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.chart-card > .t {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.chart-card > .d {
  font-size: 12px;
  font-style: italic;
  color: var(--color-gray-5);
  line-height: 18px;
  margin-bottom: 12px;
}

.chart-box {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 12px;
}

.legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-left: 4px;
}

.legend i {
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 6px;
  vertical-align: 3px;
}

.legend span {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray-3);
}

/* the MTD summary block under a chart — a metric card without the carousel */
.mcard-plain {
  background: #FFFFFF;
  border: 1px solid var(--color-gray-7);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.grid-card {
  background: #FFFFFF;
  border: 1px solid var(--color-gray-7);
  border-radius: 16px;
  overflow: hidden;
}

.mgrid-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 12px;
}

.loading {
  padding: 60px 0;
  text-align: center;
  color: var(--color-gray-5);
  font-size: 14px;
}

.spin {
  width: 22px;
  height: 22px;
  margin: 0 auto 10px;
  border: 2px solid var(--color-gray-7);
  border-top-color: var(--color-gray-5);
  border-radius: 50%;
  animation: sp .8s linear infinite;
}

@keyframes sp {
  to { transform: rotate(360deg); }
}

/* ===========================================================================
   Breakpoints
   =========================================================================== */

/* three columns. Matches the source design's own lg breakpoint, and the width
   at which shell.css stops squeezing .content's padding. */
@media (min-width: 1024px) {
  /* Top row is the scan — Summary beside Highlight. KPI spans both columns
     underneath, three cards across, as the full reference layer. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #band-kpi { grid-column: 1 / -1; }
  #band-kpi .band__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


@media (max-width: 1023px) {
  /* a single column gives the slide more room, but keep the next card peeking:
     with no side-by-side widgets left, that sliver is the only cue that the
     carousel scrolls at all */
  .cslide { flex: 0 0 90%; }
}

@media (max-width: 768px) {
  /* Greeting stacks instead of stretching across a squeezed row */
  .greeting {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0 20px;
  }
  .greeting__updated {
    text-align: left;
  }

  /* Modal uses more of the narrow viewport */
  .modal {
    padding: 12px;
  }
  .modal__dialog {
    max-height: 92vh;
  }
  .modal__header {
    padding: 16px 16px 12px;
  }
  .modal__body {
    padding: 16px;
  }
  .modal__footer {
    padding: 12px 16px 16px;
  }

  .mtoolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .chansel {
    min-width: 0;
  }

  /* the gauge and its metrics stop fitting side by side */
  .blk-row {
    gap: 16px;
  }
  .gauge {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
  }
  .gauge svg {
    width: 88px;
    height: 88px;
  }
}

/* ===========================================================================
   Summary card — headline, context, jump links
   =========================================================================== */
.sum {
  display: flex;
  flex-direction: column;
  background: var(--color-gray-10);
  border-radius: 12px;
  padding: 20px;
}

.sum__head {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-gray-1);
}

.sum__body {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-gray-3);
}

.sum__jumps {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-gray-8);
}

.sum__jt {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-gray-5);
}

.sjump {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 4px;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-8);
  transition: background 0.15s ease;
}
.sjump:last-child { border-bottom: 0; }
.sjump:hover { background: #fff; }

.sjump__l {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--color-gray-2);
}

.sjump__v {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--color-gray-8);
  color: var(--color-gray-3);
}
.sjump__v--bad  { background: var(--color-light-red); color: #C0303C; }
.sjump__v--warn { background: #FFF4DC; color: #8A6400; }
.sjump__v--good { background: #E4F7EE; color: var(--color-primary-dark); }

.sjump__c { flex: none; display: flex; color: var(--color-gray-6); }
.sjump__c svg { width: 8px; height: 11px; }
.sjump:hover .sjump__c { color: var(--color-primary); }

/* the widget a jump link landed on, flashed so the eye can find it */
.widget.is-flash { animation: widgetFlash 1.6s ease; }

@keyframes widgetFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(4, 190, 140, 0); }
  15%      { box-shadow: 0 0 0 3px rgba(4, 190, 140, 0.55); }
  60%      { box-shadow: 0 0 0 3px rgba(4, 190, 140, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .widget.is-flash { animation: none; box-shadow: 0 0 0 3px rgba(4, 190, 140, 0.45); }
}

/* ===========================================================================
   Highlight — the flagged rows

   Compact rows rather than metric cards: the KPI band already shows every
   number in full, so Highlight only has to name what is odd and why.
   =========================================================================== */
.flags {
  display: flex;
  flex-direction: column;
  background: var(--color-gray-10);
  border-radius: 12px;
  padding: 6px 16px;
}

/* The row is a container, not a control: the body jumps to the KPI and the
   action hands the question to Savvy, so it holds two focusable children. */
.nflag {
  border-bottom: 1px solid var(--color-gray-8);
  transition: background 0.15s ease;
}
.nflag:hover { background: #fff; }

.nflag__go {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 13px 2px 8px;
  text-align: left;
}

.nflag__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-decent-yellow);
}
.nflag--high .nflag__dot { background: var(--color-decent-red); }

.nflag__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.nflag__top { display: flex; align-items: baseline; gap: 8px; }

.nflag__kpi {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-gray-1);
}

.nflag__val {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-decent-yellow);
}
.nflag--high .nflag__val { color: var(--color-decent-red); }

.nflag__detail { font-size: 12px; color: var(--color-gray-5); }

.nflag__why { font-size: 12px; line-height: 1.5; color: var(--color-gray-4); }
.nflag__why b { font-weight: 600; color: var(--color-gray-3); }

.nflag__c { flex: none; display: flex; margin-top: 5px; color: var(--color-gray-6); }
.nflag__c svg { width: 8px; height: 11px; }
.nflag__go:hover .nflag__c { color: var(--color-primary); }

/* Indented to sit under .nflag__main — 8px dot + 10px gap — so it reads as
   belonging to the row above it rather than starting a new one. */
.nflag__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 13px 20px;
  padding: 6px 13px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nflag__act:hover,
.nflag__act:focus-visible { background: var(--color-primary); color: #fff; }
.nflag__act svg { flex: none; width: 12px; height: 12px; }

/* ----- "checked, nothing to flag" disclosure ----- */
.flag-clean { margin-top: 4px; }

.flag-clean__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-5);
}
.flag-clean__btn:hover { color: var(--color-primary-dark); }

.flag-clean__n {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-gray-8);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-3);
}

.flag-clean__c { display: flex; transition: transform 0.2s ease; }
.flag-clean__c svg { width: 10px; height: 11px; }
.flag-clean__btn.is-open .flag-clean__c { transform: rotate(180deg); }

/* `display:grid` on a class beats the UA's `[hidden] { display:none }` — same
   specificity, later in the cascade — so the hidden attribute has to be
   restated or the list renders open on load. */
.flag-clean__list[hidden] { display: none; }

.flag-clean__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  padding: 4px 2px 10px;
}
.flag-clean__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-gray-4);
}
.flag-clean__list li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-decent-green);
}