/* Two live recreations of the product's own screens for /plataforma/: the
   Panel and the sales board, rebuilt from screenshots of the running
   application with every identifying value replaced (see
   scripts/app-screens.mjs for the dataset and the rule it follows).

   Same contract as plataforma-demos.css: each mock is laid out once at a
   fixed design size and the frame scales that finished layout as a transform,
   so a narrow viewport shrinks the screenshot instead of reflowing a fake UI
   into a shape the real product never has. Both are decorative — aria-hidden,
   described by a visually-hidden paragraph, nothing focusable — and type may
   run below the page's body-text floor because these illustrate a UI rather
   than being one.

   Prefixes: ac- is the application chrome (navy rail, fly-out, top bar), pn-
   is the Panel, sb- is the sales board. Nothing here reuses a class from
   site.css, plataforma.css or plataforma-demos.css. */

/* The mock's description for a screen reader. This stylesheet carries its own
   copy because it travels: the utility lives in plataforma.css, and the first
   page to use these screens without that stylesheet printed the description
   across the top of the homepage hero as ordinary text. A stylesheet that
   needs a second stylesheet to not leak content is not self-contained. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.pn-frame,
.sb-frame {
  container-type: inline-size;
  overflow: hidden;
  background: #fbfbfd;
}

.pn-frame { aspect-ratio: 1180 / 2100; }
/* The homepage crop: greeting band, timeline and the two figure rows. Set
   from the measured height of the compact body at the 1180px design width —
   if that body grows a row, this number moves with it. */
.pn-frame.is-hero { aspect-ratio: 1180 / 680; }
/* /soluciones/: three panoramic crops, one per audience section. Shorter than
   the hero because each shows a single answer — the commercial half, the money
   half, the work — rather than a whole working day. */
/* Each of the three carries its own height, measured from its content at the
   1180px design width and passed in as --h. One shared number either clipped
   the tallest screen or left the other two with a band of empty canvas. */
.pn-frame.is-panorama { aspect-ratio: 1180 / var(--h); }
.pn-frame.is-panorama .ac-app { height: calc(var(--h) * 1px); }
.pn-status-row.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-browser { margin-top: var(--space-10, 28px); }
.sb-frame { aspect-ratio: 1180 / 690; }

.ac-app {
  --ac-navy: #101a3d;
  --ac-navy-2: #16224b;
  --ac-active: #2f3f86;
  --ac-ink: #16162a;
  --ac-mut: #64647a;
  --ac-dim: #9494a6;
  --ac-line: #e9e9f1;
  --ac-faint: #f4f4f8;
  --ac-canvas: #fbfbfd;
  --ac-blue: #2f5fd0;
  --ac-good: #16a34a;
  --ac-warn: #b8730c;
  --ac-bad: #cf3355;
  position: relative;
  display: flex;
  width: 1180px;
  overflow: hidden;
  transform-origin: top left;
  scale: tan(atan2(100cqw, 1180px));
  background: var(--ac-canvas);
  color: var(--ac-ink);
  font-size: 13px;
  line-height: 1.35;
  cursor: default;
  user-select: none;
}

.pn-frame .ac-app { height: 2100px; }
.pn-frame.is-hero .ac-app { height: 680px; }
.sb-frame .ac-app { height: 690px; }

.ac-app * { min-width: 0; }
.ac-app :where(p) { margin: 0; }

.ac-i { width: 17px; height: 17px; }
.ac-fi { width: 15px; height: 15px; }
.ac-ti { width: 15px; height: 15px; }

/* ---------- the navy rail ---------- */

/* The rail declares its own colours as well as inheriting them. It is the one
   piece of this chrome that travels: the older mocks on /plataforma/,
   /como-funciona/, /seguridad/ and /precios/ drop it in beside their own
   layouts, where there is no .ac-app above it to inherit from. */
.ac-rail {
  --ac-navy: #101a3d;
  --ac-active: #2f3f86;
  display: flex;
  flex: 0 0 56px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0 0 12px;
  background: var(--ac-navy);
  color: #93a0c4;
}

.ac-rail-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 52px;
  background: #fff;
}

/* The mark only — the rail is 56px wide and the wordmark would be four
   letters of mush at that size. */
.ac-rail-brand img {
  width: auto;
  height: 20px;
  object-fit: cover;
  object-position: left center;
  max-width: 26px;
}

.ac-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.ac-rail-item.is-active {
  background: var(--ac-active);
  color: #fff;
}

.ac-rail-item.is-foot {
  margin-top: auto;
}

.ac-rail-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--ac-blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.ac-rail-ava {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 10px;
  border-radius: 50%;
  background: #3a4a86;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* ---------- the fly-out ---------- */

.ac-flyout {
  position: absolute;
  top: var(--top);
  left: 62px;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  width: 218px;
  padding: 12px 10px;
  border-radius: 14px;
  background: var(--ac-navy-2);
  box-shadow: 0 18px 40px rgb(6 10 28 / 34%);
  color: #c7cee4;
}

.ac-flyout.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* The rail item under the pointer lights with its fly-out. */
.ac-rail-item.is-hover {
  background: var(--ac-navy-2);
  color: #fff;
}

.ac-flyout-head {
  margin: 0 6px 6px;
  color: #7f8cb4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ac-flyout-head.is-second {
  margin-top: 12px;
}

.ac-flyout-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border-radius: 8px;
  color: #edf0f8;
  font-size: 12.5px;
}

.ac-flyout-recent {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  padding: 5px 6px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-flyout-recent i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* ---------- the top bar ---------- */

.ac-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ac-top {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--ac-line);
  background: #fff;
}

.ac-top-title {
  padding-right: 12px;
  border-right: 1px solid var(--ac-line);
  font-size: 14px;
  font-weight: 700;
}

.ac-top-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 300px;
  padding: 5px 9px;
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  color: var(--ac-dim);
  font-size: 12px;
}

.ac-top-search svg { color: var(--ac-dim); }

.ac-top-search kbd {
  margin-left: auto;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ac-faint);
  color: var(--ac-dim);
  font: inherit;
  font-size: 9.5px;
}

.ac-top-plus,
.ac-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.ac-top-plus {
  background: var(--ac-blue);
  color: #fff;
}

.ac-top-btn {
  border: 1px solid var(--ac-line);
  color: var(--ac-mut);
}

.ac-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  color: var(--ac-mut);
}

.ac-top-bell {
  position: relative;
  display: flex;
}

.ac-top-bell b {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 13px;
  border-radius: 999px;
  background: var(--ac-bad);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

/* =====================================================================
   The Panel
   ===================================================================== */

.pn-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* ---------- the day, addressed to a person ---------- */

.pn-hello {
  position: relative;
  padding: 22px 34px 16px;
  overflow: hidden;
  background: linear-gradient(178deg, #cfe3fb 0%, #dcebfd 46%, #eef5fe 100%);
}

/* Daylight, not a photograph: the band's whole job is to say what time of day
   it is before the reader has read a word. */
.pn-sun {
  position: absolute;
  top: 34px;
  right: 96px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff6cf 0%, #ffd96b 52%, #ffc93d 100%);
  box-shadow: 0 0 0 22px rgb(255 231 150 / 34%), 0 0 0 48px rgb(255 236 176 / 20%);
}

.pn-when {
  color: #3d4d72;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pn-greet {
  margin-top: 6px;
  color: #0f1c3c;
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.pn-brief {
  max-width: 640px;
  margin-top: 10px;
  color: #23324f;
  font-size: 12.5px;
  line-height: 1.55;
}

.pn-beats {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.pn-beat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 11px;
  background: rgb(255 255 255 / 82%);
  color: #3d4d72;
  font-size: 11.5px;
}

.pn-beat b {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pn-beat b.is-bad { color: var(--ac-bad); }
.pn-beat b.is-warn { color: var(--ac-warn); }

.pn-next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 9px 14px;
  border-radius: 11px;
  background: rgb(255 255 255 / 88%);
  font-size: 11px;
}

.pn-next b {
  color: var(--ac-good);
  font-size: 15px;
  font-weight: 700;
}

.pn-next span {
  display: flex;
  flex-direction: column;
  color: #3d4d72;
}

.pn-next i {
  color: #6a7797;
  font-size: 10px;
  font-style: normal;
}

.pn-brief-foot {
  margin-top: 11px;
  color: #52618a;
  font-size: 10.5px;
}

.pn-brief-foot b {
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
  font-variant-numeric: tabular-nums;
}

/* ---------- what lies ahead ---------- */

.pn-tl {
  padding: 13px 34px 15px;
  border-bottom: 1px solid var(--ac-line);
  background: #fff;
}

.pn-cap {
  color: var(--ac-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pn-cap + .pn-mosaic {
  margin-top: 7px;
}

.pn-tl-line {
  position: relative;
  height: 1px;
  margin: 11px 0 8px;
  background: var(--ac-line);
}

/* The marker sits where "now" sits in the row below it — second of five. */
.pn-tl-line i {
  position: absolute;
  top: -3.5px;
  left: 30%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac-blue);
}

.pn-tl-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.pn-tl-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
}

.pn-tl-item b {
  color: var(--ac-mut);
  font-size: 10px;
  font-weight: 600;
}

.pn-tl-item span {
  color: var(--ac-mut);
  line-height: 1.35;
}

.pn-tl-item.is-now b { color: var(--ac-blue); }
.pn-tl-item.is-now span { color: var(--ac-ink); font-weight: 500; }
.pn-tl-item.is-past { opacity: 0.5; }

/* ---------- the organization ---------- */

.pn-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 16px 34px 0;
}

.pn-org {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ac-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pn-org span {
  color: var(--ac-mut);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.pn-pulse-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.pn-pulse {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--ac-line);
  border-radius: 12px;
  background: #fff;
}

.pn-pulse-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pn-pi {
  width: 14px;
  height: 14px;
  color: var(--ac-dim);
}

.pn-pulse-value {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.pn-week {
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--ac-faint);
  color: var(--ac-mut);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.pn-week.is-up { background: #e9f7ee; color: var(--ac-good); }
.pn-week.is-down { background: #fdecf0; color: var(--ac-bad); }

.pn-pulse-label {
  overflow: hidden;
  color: var(--ac-mut);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- the month's money ---------- */

.pn-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pn-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--ac-line);
  border-radius: 13px;
  background: #fff;
}

.pn-kpi-label {
  color: var(--ac-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pn-kpi-value {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.pn-cur {
  margin-right: 4px;
  color: var(--ac-dim);
  font-size: 0.62em;
  font-weight: 600;
}

.pn-fig {
  font-variant-numeric: tabular-nums;
}

.pn-spark {
  width: 100%;
  height: 24px;
  transition: clip-path 900ms ease;
}

.pn-spark.is-priming {
  clip-path: inset(0 100% 0 0);
}

.pn-spark polyline {
  fill: none;
  stroke: var(--ac-blue);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Keeps a card without a sparkline the same height as one with it, so the row
   of four reads as a row and not as a staircase. */
.pn-spark-gap { height: 24px; }

.pn-delta {
  color: var(--ac-mut);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.pn-delta.is-up { color: var(--ac-good); }
.pn-delta.is-down { color: var(--ac-bad); }

/* ---------- proposals: money is width, count is fill ---------- */

.pn-mosaic {
  display: flex;
  gap: 3px;
  height: 26px;
}

.pn-tile {
  position: relative;
  flex: 0 0 var(--w);
  overflow: hidden;
  border-radius: 5px;
  background: var(--ac-faint);
}

.pn-tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: var(--fill);
  background: var(--ac-dim);
}

.pn-tile.is-info::after { background: var(--ac-blue); }
.pn-tile.is-good::after { background: var(--ac-good); }
.pn-tile.is-bad::after { background: var(--ac-bad); }
.pn-tile.is-warn::after { background: var(--ac-warn); }

.pn-status-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.pn-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--ac-line);
  border-radius: 11px;
  background: #fff;
}

.pn-status-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pn-status-top b {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pn-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac-dim);
}

.pn-dot.is-good { background: var(--ac-good); }
.pn-dot.is-info { background: var(--ac-blue); }
.pn-dot.is-warn { background: var(--ac-warn); }
.pn-dot.is-bad { background: var(--ac-bad); }

.pn-status-name {
  overflow: hidden;
  color: var(--ac-mut);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-status-total {
  color: var(--ac-mut);
  font-size: 10.5px;
}

/* =====================================================================
   The half of the organization that does the work
   ===================================================================== */

.pn-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pn-grid-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 12px;
}

.pn-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pn-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 15px;
  border: 1px solid var(--ac-line);
  border-radius: 13px;
  background: #fff;
}

.pn-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
}

.pn-card-head.is-row {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
}

.pn-card-head span {
  color: var(--ac-mut);
  font-size: 10.5px;
  font-weight: 400;
}

.pn-count {
  color: var(--ac-mut);
  font-weight: 400;
}

.pn-card-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--ac-faint);
  color: var(--ac-dim);
  font-size: 10px;
}

.pn-sub {
  color: var(--ac-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- money in against money out ---------- */

.pn-cash-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 0;
}

.pn-cash {
  width: 100%;
  flex: 0 0 auto;
  height: 148px;
}

.pn-axis {
  stroke: var(--ac-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pn-bar.is-in { fill: var(--ac-good); }
.pn-bar.is-out { fill: #d8d8e4; }

.pn-net {
  fill: none;
  stroke: var(--ac-blue);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pn-net-dot {
  fill: var(--ac-blue);
  /* The chart is stretched horizontally by preserveAspectRatio="none", so a
     plain r would draw ellipses. Scaling the stroke instead keeps them round. */
  stroke: var(--ac-blue);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  r: 0;
}

.pn-cash-x {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  color: var(--ac-dim);
  font-size: 9.5px;
  text-align: center;
}

.pn-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--ac-mut);
  font-size: 10px;
}

.pn-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pn-key {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ac-dim);
}

.pn-key.is-in { background: var(--ac-good); }
.pn-key.is-out { background: #d8d8e4; }
.pn-key.is-net { border-radius: 999px; background: var(--ac-blue); }

/* ---------- rings ---------- */

.pn-ring-row {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 16px;
}

.pn-donut {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
}

.pn-arc-track {
  fill: none;
  stroke: var(--ac-faint);
  stroke-width: 7;
}

/* Arcs start at twelve o'clock and run clockwise, which is how a reader
   expects a share to accumulate. */
.pn-arc {
  fill: none;
  stroke: var(--ac-dim);
  stroke-width: 7;
  stroke-linecap: butt;
  transform: rotate(-90deg);
  transform-origin: 34px 34px;
}

.pn-arc.is-good { stroke: var(--ac-good); }
.pn-arc.is-info { stroke: var(--ac-blue); }
.pn-arc.is-warn { stroke: var(--ac-warn); }
.pn-arc.is-bad { stroke: var(--ac-bad); }

.pn-donut-n {
  fill: var(--ac-ink);
  font-size: 19px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.pn-counters {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}

.pn-counter {
  display: flex;
  align-items: baseline;
  gap: 7px;
  overflow: hidden;
  color: var(--ac-mut);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-counter b {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pn-counter b.is-good { color: var(--ac-good); }
.pn-counter b.is-warn { color: var(--ac-warn); }
.pn-counter b.is-bad { color: var(--ac-bad); }
.pn-counter b.is-info { color: var(--ac-blue); }
.pn-counter b.is-neutral { color: var(--ac-ink); }

/* ---------- what is due, and who is carrying it ---------- */

.pn-due,
.pn-load,
.pn-mini,
.pn-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pn-due { gap: 9px; }
.pn-load { gap: 8px; }

.pn-due-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  font-size: 11px;
}

.pn-due-top b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-due-top i {
  overflow: hidden;
  color: var(--ac-mut);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-due-top em {
  margin-left: auto;
  color: var(--ac-dim);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.pn-meter {
  display: block;
  height: 5px;
  margin: 4px 0 3px;
  border-radius: 999px;
  background: var(--ac-faint);
  overflow: hidden;
}

.pn-meter.is-slim { height: 4px; margin: 0; }

.pn-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ac-dim);
}

.pn-meter i.is-good { background: var(--ac-good); }
.pn-meter i.is-warn { background: var(--ac-warn); }
.pn-meter i.is-bad { background: var(--ac-bad); }
.pn-meter i.is-info { background: var(--ac-blue); }

.pn-due-foot {
  display: flex;
  justify-content: space-between;
  color: var(--ac-dim);
  font-size: 9.5px;
}

.pn-due-foot b {
  color: var(--ac-mut);
  font-variant-numeric: tabular-nums;
}

.pn-load li {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.pn-load-who {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-load .pn-meter { margin: 0; }

.pn-load-n {
  display: flex;
  gap: 7px;
  color: var(--ac-mut);
  font-size: 10px;
  white-space: nowrap;
}

.pn-load-n em {
  color: var(--ac-bad);
  font-style: normal;
}

.pn-ava {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e6e6ee;
  color: var(--ac-mut);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

/* ---------- needs attention ---------- */

.pn-rows {
  border: 1px solid var(--ac-faint);
  border-radius: 10px;
  overflow: hidden;
}

.pn-row {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--ac-faint);
  font-size: 11px;
}

.pn-row:last-child { border-bottom: 0; }

.pn-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ac-faint);
  color: var(--ac-mut);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.pn-badge.is-bad { background: #fdecf0; color: var(--ac-bad); }
.pn-badge.is-warn { background: #fdf6e8; color: var(--ac-warn); }

.pn-row-title {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-row-meta {
  overflow: hidden;
  color: var(--ac-mut);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-row-right {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pn-row-right.is-money { color: var(--ac-ink); font-weight: 600; }
.pn-row-right.is-money.is-bad { color: var(--ac-bad); }
.pn-row-right.is-date { color: var(--ac-mut); }
.pn-row-right.is-none { color: var(--ac-dim); }

.pn-row-right.is-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #e6e6ee;
  color: var(--ac-mut);
  font-size: 8.5px;
  font-weight: 700;
}

/* ---------- recent invoices and payments ---------- */

.pn-mini li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--ac-faint);
  font-size: 10.5px;
}

.pn-mini li:last-child { border-bottom: 0; }

.pn-mini b {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.pn-mini span {
  overflow: hidden;
  color: var(--ac-mut);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-mini u {
  margin-left: auto;
  color: var(--ac-dim);
  font-size: 9.5px;
  text-decoration: none;
  white-space: nowrap;
}

.pn-mini em {
  margin-left: auto;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pn-mini u + em { margin-left: 0; }
.pn-mini em.is-good { color: var(--ac-good); }

.pn-pill {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ac-faint);
  color: var(--ac-mut);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.pn-pill.is-good { background: #e9f7ee; color: var(--ac-good); }
.pn-pill.is-info { background: #eaf0fd; color: var(--ac-blue); }
.pn-pill.is-warn { background: #fdf6e8; color: var(--ac-warn); }

/* ---------- top clients ---------- */

.pn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.pn-table th {
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--ac-line);
  color: var(--ac-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.pn-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--ac-faint);
}

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

.pn-table .is-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pn-table td.is-num { color: var(--ac-mut); }

.pn-table .pn-pill { margin-left: 0; }

.pn-table td:last-child { width: 84px; }

.pn-who {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================================================
   The sales board
   ===================================================================== */

.sb-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 11px;
  min-height: 0;
  padding: 18px 24px 0;
}

.sb-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 14px;
  border: 1px solid var(--ac-line);
  border-radius: 12px;
  background: #fff;
}

.sb-strip > span {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.sb-strip i {
  color: var(--ac-mut);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
}

.sb-strip em {
  color: var(--ac-dim);
  font-size: 10.5px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.sb-strip .is-won { color: var(--ac-good); }

.sb-forecast {
  margin-left: auto;
  color: var(--ac-mut);
  font-size: 11px;
  font-weight: 400;
}

.sb-card-frame {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 13px;
  border: 1px solid var(--ac-line);
  border-radius: 14px;
  background: #fff;
}

.sb-tools {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sb-tools-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
}

.sb-tools-title b {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ac-faint);
  color: var(--ac-mut);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.sb-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 230px;
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  color: var(--ac-dim);
  font-size: 11.5px;
}

.sb-tool {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  color: var(--ac-mut);
  font-size: 11px;
}

.sb-tool.is-warn {
  border-color: #f0dcb8;
  background: #fdf8ef;
  color: var(--ac-warn);
}

.sb-tray {
  padding: 9px 11px;
  border: 1px solid var(--ac-line);
  border-radius: 11px;
  background: var(--ac-faint);
}

.sb-tray-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
}

.sb-tray-head b {
  padding: 0 6px;
  border-radius: 999px;
  background: #e6e6ee;
  color: var(--ac-mut);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.sb-tray-head span {
  margin-left: auto;
  color: var(--ac-dim);
  font-size: 10.5px;
  font-weight: 400;
}

.sb-tray-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.sb-board {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  min-height: 0;
}

.sb-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--ac-line);
  border-radius: 11px;
  background: var(--ac-faint);
  transition: border-color 160ms ease, background 160ms ease;
}

/* The column a card is being dragged over. Toggled by the demo script. */
.sb-col.is-over {
  border-color: var(--ac-blue);
  background: #eef2fd;
}

.sb-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
}

.sb-col-head b {
  margin-left: auto;
  color: var(--ac-dim);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.sb-col-sum {
  margin-top: -3px;
  color: var(--ac-mut);
  font-size: 10px;
}

.sb-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 9px;
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  background: #fff;
}

.sb-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.sb-card-top b {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-card-top i {
  flex: 0 0 auto;
  color: var(--ac-dim);
  font-size: 9px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.sb-who {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--ac-mut);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-ava {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e6e6ee;
  color: var(--ac-mut);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.sb-card-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sb-owner {
  overflow: hidden;
  color: var(--ac-mut);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A deal that belongs to nobody is the one that stops moving, so it is marked
   rather than left to read as an empty field. */
.sb-owner.is-none { color: var(--ac-warn); }

.sb-prob {
  flex: 0 0 auto;
  color: var(--ac-mut);
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.sb-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  row-gap: 4px;
}

.sb-val {
  color: var(--ac-mut);
  font-size: 10px;
}

.sb-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  background: #e9f7ee;
  color: var(--ac-good);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.sb-chip.is-late { background: #fdecf0; color: var(--ac-bad); }
.sb-chip.is-none { background: #fdf3e3; color: var(--ac-warn); }