/* Pod View, and what Churn and Performance share with it (pages/pods.js): the tiles, the cards, the tables, the
   tones and the "Not connected" mark. Every pods- class of the three pages is defined here. */
.pods-body { --pods-orange: #d9620f; --pods-violet: #6d4fd8; --pods-magenta: #a83bb0; display: grid; gap: 16px; min-width: 0; }
:root[data-theme="dark"] .pods-body { --pods-orange: #ff8a3d; --pods-violet: #a78bfa; --pods-magenta: #d46ad8; }
.pods-body > * { min-width: 0; margin: 0; }
.pods-wait { color: var(--text3); }

/* tones: a figure, a bar or a heated cell */
.pods-ok { color: var(--ok); } .pods-warn { color: var(--warn); } .pods-bad { color: var(--bad); } .pods-up { color: var(--pods-magenta); }
.pods-body i.pods-ok { background: var(--ok); } .pods-body i.pods-warn { background: var(--warn); } .pods-body i.pods-bad { background: var(--bad); }

/* the head's select */
.pods-month { display: inline-flex; align-items: center; gap: 10px; color: var(--text3); font-size: 13px; }
.pods-month select { height: 34px; padding: 0 30px 0 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--raise); color: var(--text); font: inherit; min-width: 0; }

/* a card, a tile */
.pods-card { background: var(--raise); border: 1px solid var(--line); border-radius: 12px; min-width: 0; color: var(--text); text-decoration: none; }
.pods-go { transition: border-color var(--t-fast) var(--ease); cursor: pointer; }
.pods-go:hover, .pods-go:focus-visible { border-color: var(--red); }
.pods-kpi { display: grid; gap: 2px; align-content: start; text-align: left; font: inherit; }
.pods-v { line-height: 1.25; min-height: 33px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.pods-v.pods-ok { color: var(--ok); } .pods-v.pods-warn { color: var(--warn); } .pods-v.pods-bad { color: var(--bad); } .pods-v.pods-up { color: var(--pods-magenta); }
.pods-d.up { color: var(--ok); } .pods-d.down { color: var(--bad); }
.pods-hint { color: var(--text3); font-size: 12px; } .pods-hint b { color: var(--text); }
.pods-off { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px dashed var(--line2); color: var(--text3); font-size: 11.5px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.pods-eyebrow { margin: 10px 0 -6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pods-foot { color: var(--text3); font-size: 13px; max-width: 110ch; } .pods-foot b { color: var(--text2); font-weight: 600; }
.pods-foot + .pods-foot { margin-top: -8px; }
.pods-foot a { color: var(--text); }

/* a section card with its heading row */
.pods-sec > header { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 700; }
.pods-sec > header .i { color: var(--red); width: 16px; height: 16px; }
.pods-sec > header small { margin-left: auto; font-weight: 500; color: var(--text3); font-size: 12px; }
.pods-sec > div { padding: 14px 16px; overflow-x: auto; }

/* rows and avatars */
.pods-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pods-row.between { justify-content: space-between; } .pods-row.base { align-items: baseline; }
.pods-av.none { background: var(--chip); color: var(--faint); }
.pods-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 6px; color: #fff; background: #2a76c9; white-space: nowrap; }

/* a pod's card */
.pods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.pods-pod { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.pods-who { font-size: 17px; font-weight: 700; color: var(--head); }
.pods-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; align-items: stretch; }
.pods-block, .pods-strip { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.pods-block { display: flex; align-items: center; gap: 12px; }
.pods-block .pods-l, .pods-strip .pods-l { font-weight: 700; margin-bottom: 6px; }
.pods-gauge { flex: none; }
.pods-big { font-size: 34px; font-weight: 800; letter-spacing: -.03em; min-width: 72px; text-align: center; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pods-hbar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; gap: 2px; width: 120px; max-width: 100%; margin-bottom: 6px; background: var(--line); }
.pods-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.pods-dots i { width: 10px; height: 10px; border-radius: 3px; background: var(--line2); } .pods-dots i.on { background: var(--pods-magenta); }
.pods-strip { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.pods-strip .pods-l { margin-bottom: 2px; }
.pods-strip .pods-big { font-size: 28px; min-width: 0; text-align: left; }
.pods-mini { display: flex; align-items: flex-end; gap: 6px; height: 58px; flex: none; }
.pods-mini > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; width: 19px; }
.pods-mini i { display: block; width: 12px; border-radius: 3px; background: var(--line2); }
.pods-mini span { font-size: 9.5px; color: var(--faint); line-height: 1; }
.pods-mini .sel span { color: var(--text); font-weight: 700; }
.pods-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.pods-stats span:first-child { display: block; color: var(--text3); font-size: 11.5px; margin-bottom: 2px; }
.pods-stats b { font: 600 18px var(--mono); }

/* a table */
.pods-tw table { font-size: 13.5px; }
.pods-tw td { padding-inline: 8px; }
.pods-tw th { padding: 10px 8px; font: 600 11px var(--mono); letter-spacing: .08em; }
.pods-tw :is(td, th).num { font-size: inherit; font-variant-numeric: tabular-nums; } .pods-tw th.num { font-size: 11px; }
.pods-tw td.wrap { white-space: normal; min-width: 220px; color: var(--text3); }
.pods-tw td.heat.pods-ok { background: var(--ok-bg); } .pods-tw td.heat.pods-warn { background: var(--warn-bg); } .pods-tw td.heat.pods-bad { background: var(--bad-bg); }
.pods-none { border: 1px dashed var(--line2); border-radius: 10px; padding: 18px; text-align: center; color: var(--text3); font-size: 13px; }

/* Pod View's cards share their five rows (tag, person, tiles, churn, stats), so each section lines up across the cards.
   Churn's cards hold their own two or three rows. */
@media (min-width: 761px) {
  .pods-grid > .pods-pod:not(.churn-pod) { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 16px; }
}
@media (max-width: 760px) {
  .pods-pod { padding: 14px; }
  .pods-strip { flex-wrap: wrap; }
  /* the head's select gives the tour's icon room on its row */
  .pods-month, .pods-month select { flex: 1 1 0; min-width: 0; }
  .pods-month { gap: 6px; } .pods-month select { padding: 0 24px 0 8px; }
}