/* The new look (owner, 1405/08/03: «مشابه طرحی که برات اپلود میکنم»): soft panels on a light wash, round icon
   buttons, bold coloured tiles, every page but the manager's dashboard, which keeps style.css as it is. Only a page
   whose body has the class «ui» takes it. The page is RTL; every rule is a logical property. The business's own
   colour is --brand (installation.json); the tiles' colours are the system's. */

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-33.0.3.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* the colours, on a page in the new look, and on a part of an old page that has it (the board, on the manager's page and
   the visitor's: .u-scope) */
body.ui,
.u-scope {
  --u-bg: #e7eaf5;
  --u-bg-2: #eef2ec;
  --u-bg-3: #f2f4e2;
  --u-panel: rgb(255 255 255 / 0.58);
  --u-panel-solid: #ffffff;
  --u-panel-line: rgb(255 255 255 / 0.75);
  --u-text: #16181d;
  --u-muted: #6b7080;
  --u-faint: #9a9fac;
  --u-line: rgb(22 24 29 / 0.08);
  --u-soft: rgb(22 24 29 / 0.05);
  --u-soft-2: rgb(22 24 29 / 0.09);
  --u-ink: #111215;
  --u-on-ink: #ffffff;
  --u-blue: #2f5af5;
  --u-blue-soft: #e2e8ff;
  --u-teal: #4a8ea2;
  --u-yellow: #f1e04a;
  --u-on-yellow: #2b2700;
  --u-ok: #18864b;
  --u-ok-fill: #2fb36b;
  --u-ok-soft: #d9f2e4;
  --u-warn: #9a6200;
  --u-warn-soft: #fbefd2;
  --u-bad: #c8302f;
  --u-bad-soft: #fde3e2;
  --u-r-xl: 28px;
  --u-r-lg: 22px;
  --u-r-md: 16px;
  --u-r-sm: 12px;
  color: var(--u-text);
}

body.ui {
  margin: 0;
  min-height: 100vh;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background: linear-gradient(115deg, var(--u-bg) 0%, var(--u-bg-2) 55%, var(--u-bg-3) 100%) fixed;
}

:root[data-theme="dark"] body.ui,
:root[data-theme="dark"] .u-scope {
  --u-bg: #12141b;
  --u-bg-2: #14181d;
  --u-bg-3: #171b15;
  --u-panel: rgb(34 37 45 / 0.62);
  --u-panel-solid: #22252d;
  --u-panel-line: rgb(255 255 255 / 0.06);
  --u-text: #eceef3;
  --u-muted: #a0a6b3;
  --u-faint: #747a87;
  --u-line: rgb(255 255 255 / 0.08);
  --u-soft: rgb(255 255 255 / 0.06);
  --u-soft-2: rgb(255 255 255 / 0.11);
  --u-ink: #f1f2f5;
  --u-on-ink: #111215;
  --u-blue: #3d66ff;
  --u-blue-soft: #1d2a4d;
  --u-teal: #3f8396;
  --u-yellow: #e6d544;
  --u-on-yellow: #221f00;
  --u-ok: #63d395;
  --u-ok-fill: #2a9c5c;
  --u-ok-soft: #173326;
  --u-warn: #f0bd5b;
  --u-warn-soft: #33270f;
  --u-bad: #ff8178;
  --u-bad-soft: #3a1b1b;
}

body.ui *,
body.ui *::before,
body.ui *::after,
.u-scope *,
.u-scope *::before,
.u-scope *::after {
  box-sizing: border-box;
}

body.ui button,
body.ui input,
body.ui select,
body.ui textarea {
  font: inherit;
  color: inherit;
}

body.ui button {
  cursor: pointer;
}

body.ui h1,
body.ui h2,
body.ui h3,
body.ui p {
  margin: 0;
}

body.ui :focus-visible,
.u-scope :focus-visible {
  outline: 2px solid var(--u-blue);
  outline-offset: 2px;
}

body.ui .icon,
.u-scope .icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---- the frame ---------------------------------------------------------------------------------------------- */

.u-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 28px 48px;
}

.u-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block-end: 22px;
}

.u-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
}

.u-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--u-ink);
  color: var(--u-on-ink);
}

.u-nav {
  display: flex;
  gap: 4px;
  margin-inline: auto;
  padding: 4px;
  border-radius: 999px;
  background: var(--u-panel);
  border: 1px solid var(--u-panel-line);
  backdrop-filter: blur(16px);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}

.u-nav a,
.u-nav button {
  border: 0;
  background: none;
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--u-muted);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}

.u-nav a:hover,
.u-nav button:hover {
  color: var(--u-text);
}

.u-nav .is-on {
  background: var(--u-ink);
  color: var(--u-on-ink);
}

.u-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* a round button holding an icon, light or on a tile */
.u-ibtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--u-panel-line);
  background: var(--u-panel);
  backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  color: var(--u-text);
  flex: none;
  text-decoration: none;
}

.u-ibtn:hover {
  background: var(--u-panel-solid);
}

.u-ibtn.small {
  width: 32px;
  height: 32px;
}

.u-ibtn.ghost {
  background: var(--u-soft);
  border-color: transparent;
  backdrop-filter: none;
}

.u-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--u-soft-2);
  color: var(--u-text);
  font-weight: 700;
  flex: none;
}

.u-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- the page's head: its name, the period, and the customer one is speaking with ------------------------------ */

.u-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-block-end: 20px;
}

.u-title {
  margin-inline-end: auto;
}

.u-title h1 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
}

.u-title p {
  color: var(--u-muted);
  margin-block-start: 4px;
}

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

/* one choice of a few, as a pill: the period */
.u-seg {
  display: flex;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: var(--u-soft-2);
}

.u-seg button {
  border: 0;
  background: none;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--u-muted);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.u-seg button[aria-pressed="true"] {
  background: var(--u-panel-solid);
  color: var(--u-text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.u-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 300px;
  padding: 0 16px;
  height: 46px;
  border-radius: 999px;
  background: var(--u-panel-solid);
  border: 1px solid var(--u-line);
  color: var(--u-muted);
}

.u-search input {
  border: 0;
  outline: 0;
  background: none;
  flex: 1;
  min-width: 0;
  height: 100%;
  color: var(--u-text);
}

/* ---- the layout: the person on the side, the tiles, the month below ---------------------------------------------- */

.u-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "person main"
    "aside main";
  gap: 18px;
  align-items: start;
}

.u-layout > .u-main {
  grid-area: main;
  min-width: 0;
  display: grid;
  gap: 18px;
}

.u-layout > .u-person {
  grid-area: person;
}

.u-layout > .u-aside {
  grid-area: aside;
}

.u-card {
  background: var(--u-panel);
  border: 1px solid var(--u-panel-line);
  backdrop-filter: blur(18px);
  border-radius: var(--u-r-xl);
  padding: 18px;
}

.u-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 14px;
}

.u-card-head h2 {
  font-size: 15px;
  font-weight: 700;
  margin-inline-end: auto;
}

.u-card-head .u-sub {
  color: var(--u-muted);
  font-size: 12.5px;
  font-weight: 400;
}

/* ---- the person ---------------------------------------------------------------------------------------------------- */

.u-profile {
  text-align: center;
}

.u-growth {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-block-end: 16px;
}

.u-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--u-soft-2);
  color: var(--u-muted);
  white-space: nowrap;
}

.u-chip.up {
  background: var(--u-ok-soft);
  color: var(--u-ok);
}

.u-chip.down {
  background: var(--u-bad-soft);
  color: var(--u-bad);
}

.u-chip.warn {
  background: var(--u-warn-soft);
  color: var(--u-warn);
}

.u-chip .u-chip-label {
  font-weight: 500;
  color: inherit;
  opacity: 0.85;
}

.u-photo {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--u-yellow);
  color: var(--u-on-yellow);
  font-size: 38px;
  font-weight: 800;
  border: 4px solid var(--u-panel-solid);
}

.u-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-profile h3 {
  font-size: 18px;
  font-weight: 800;
}

.u-profile .u-job {
  color: var(--u-muted);
  font-size: 13px;
  margin-block: 2px 14px;
}

.u-profile .u-acts {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* a list of facts, each with its icon: the messenger's state */
.u-facts {
  display: grid;
  gap: 4px;
}

.u-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}

.u-fact + .u-fact {
  border-block-start: 1px solid var(--u-line);
}

.u-fact .u-fact-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--u-soft);
  color: var(--u-muted);
  flex: none;
}

.u-fact .u-fact-body {
  flex: 1;
  min-width: 0;
}

.u-fact small {
  display: block;
  color: var(--u-muted);
  font-size: 12px;
}

.u-fact strong {
  font-size: 15px;
  font-weight: 700;
}

.u-state {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

.u-state.on {
  background: var(--u-ok-soft);
  color: var(--u-ok);
}

.u-state.off {
  background: var(--u-bad-soft);
  color: var(--u-bad);
}

.u-state.wait {
  background: var(--u-warn-soft);
  color: var(--u-warn);
}

/* ---- the tiles ----------------------------------------------------------------------------------------------------- */

.u-group {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--u-muted);
  font-weight: 700;
  font-size: 13px;
  margin-block: 4px -6px;
}

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

.u-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 186px;
  padding: 16px;
  border-radius: var(--u-r-lg);
  background: var(--u-panel);
  border: 1px solid var(--u-panel-line);
  backdrop-filter: blur(18px);
  color: var(--u-text);
  --t-text: var(--u-text);
  --t-muted: var(--u-muted);
  --t-line: var(--u-line);
  --t-track: var(--u-soft-2);
  --t-fill: var(--u-ink);
  --t-btn: var(--u-soft);
  text-align: start;
}

.u-tile.wide {
  grid-column: span 2;
}

.u-tile.ink {
  background: var(--u-ink);
  border-color: transparent;
  color: var(--u-on-ink);
  --t-text: var(--u-on-ink);
  --t-muted: color-mix(in srgb, var(--u-on-ink) 62%, transparent);
  --t-line: color-mix(in srgb, var(--u-on-ink) 14%, transparent);
  --t-track: color-mix(in srgb, var(--u-on-ink) 18%, transparent);
  --t-fill: var(--u-ok-fill);
  --t-btn: color-mix(in srgb, var(--u-on-ink) 12%, transparent);
}

.u-tile.blue,
.u-tile.teal {
  border-color: transparent;
  color: #ffffff;
  --t-text: #ffffff;
  --t-muted: rgb(255 255 255 / 0.72);
  --t-line: rgb(255 255 255 / 0.18);
  --t-track: rgb(255 255 255 / 0.22);
  --t-fill: #ffffff;
  --t-btn: rgb(255 255 255 / 0.16);
}

.u-tile.blue {
  background: var(--u-blue);
}

.u-tile.teal {
  background: var(--u-teal);
}

.u-tile.yellow {
  background: var(--u-yellow);
  border-color: transparent;
  color: var(--u-on-yellow);
  --t-text: var(--u-on-yellow);
  --t-muted: color-mix(in srgb, var(--u-on-yellow) 65%, transparent);
  --t-line: color-mix(in srgb, var(--u-on-yellow) 14%, transparent);
  --t-track: color-mix(in srgb, var(--u-on-yellow) 14%, transparent);
  --t-fill: var(--u-on-yellow);
  --t-btn: color-mix(in srgb, var(--u-on-yellow) 10%, transparent);
}

.u-tile-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.u-tile-label {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
}

.u-tile-label small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--t-muted);
}

.u-tile .u-ibtn {
  width: 32px;
  height: 32px;
  background: var(--t-btn);
  border-color: transparent;
  backdrop-filter: none;
  color: inherit;
}

.u-num {
  margin-block-start: auto;
  padding-block-start: 14px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.u-num small {
  font-size: 13px;
  font-weight: 500;
  color: var(--t-muted);
  margin-inline-start: 4px;
}

.u-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--t-track);
  margin-block: 10px 4px;
}

.u-bar > i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: 999px;
  background: var(--t-fill);
}

/* where the bar should be by today */
.u-bar > b {
  position: absolute;
  inset-block: -4px;
  width: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}

.u-note {
  font-size: 12px;
  color: var(--t-muted);
}

.u-tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-block-start: 12px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--t-line);
}

.u-tri > div {
  font-size: 11.5px;
  color: var(--t-muted);
  min-width: 0;
}

.u-tri > div strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* what is not measured yet: the tile is there, its figure is not */
.u-tile.soon .u-num {
  color: var(--t-muted);
}

.u-soon {
  font-size: 12px;
  color: var(--t-muted);
  margin-block-start: 6px;
}

/* the queue of calls, the widest tile: who is waiting, as chips */
.u-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 10px;
}

.u-queue span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--t-btn);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- the month ----------------------------------------------------------------------------------------------------- */

.u-cal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 14px;
}

.u-cal-head h2 {
  font-size: 15px;
  font-weight: 700;
}

.u-cal-head .u-month {
  font-size: 20px;
  font-weight: 800;
  margin-inline: 8px auto;
}

.u-legend {
  display: flex;
  gap: 12px;
  color: var(--u-muted);
  font-size: 12px;
  flex-wrap: wrap;
}

.u-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.u-legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--u-soft-2);
}

.u-legend i.paid {
  background: var(--u-ok-fill);
}

.u-legend i.expected {
  background: var(--u-ok-soft);
  box-shadow: inset 0 0 0 1px var(--u-ok);
}

.u-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.u-wd .short {
  display: none;
}

@media (max-width: 640px) {
  .u-wd .short {
    display: inline;
  }
}

.u-wd {
  text-align: center;
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 600;
  padding-block-end: 2px;
}

.u-day {
  position: relative;
  min-height: 84px;
  padding: 8px 10px;
  border-radius: var(--u-r-md);
  background: var(--u-soft);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: start;
  color: var(--u-text);
}

.u-day.out {
  background: none;
  color: var(--u-faint);
}

.u-day .u-dn {
  font-weight: 700;
  font-size: 14px;
}

.u-day .u-tasks {
  margin-block-start: auto;
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--u-panel-solid);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.u-day .u-money {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* money came in that day */
.u-day.paid {
  background: var(--u-ok-fill);
  color: #ffffff;
}

.u-day.paid .u-tasks {
  background: rgb(255 255 255 / 0.22);
  color: #ffffff;
}

/* money due to come in that day: a cheque or a promise */
.u-day.expected {
  background: var(--u-ok-soft);
  border-color: color-mix(in srgb, var(--u-ok) 45%, transparent);
  color: var(--u-ok);
}

.u-day.today {
  border-color: var(--u-ink);
  border-width: 2px;
}

/* ---- narrower screens ---------------------------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .u-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .u-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .u-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "person aside"
      "main main";
  }

  .u-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .u-shell {
    padding: 12px 14px 32px;
  }

  .u-top {
    flex-wrap: wrap;
    gap: 10px;
    margin-block-end: 14px;
  }

  .u-top .u-brand {
    margin-inline-end: auto;
  }

  .u-nav {
    order: 3;
    width: 100%;
    margin-inline: 0;
  }

  .u-title h1 {
    font-size: 23px;
  }

  .u-tools,
  .u-search {
    width: 100%;
    min-width: 0;
  }

  .u-seg {
    width: 100%;
    justify-content: space-between;
  }

  .u-seg button {
    flex: 1;
    padding-inline: 6px;
  }

  /* a phone: the person in a line, the tiles, then the messenger */
  .u-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "person"
      "main"
      "aside";
  }

  .u-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "photo name"
      "photo job"
      "growth growth"
      "acts acts";
    column-gap: 14px;
    text-align: start;
  }

  .u-profile .u-photo {
    grid-area: photo;
    width: 64px;
    height: 64px;
    font-size: 24px;
    border-width: 3px;
    margin: 0;
  }

  .u-profile h3 {
    grid-area: name;
    align-self: end;
  }

  .u-profile .u-job {
    grid-area: job;
    margin: 0;
  }

  .u-profile .u-job + .u-job {
    display: none;
  }

  .u-profile .u-growth {
    grid-area: growth;
    justify-content: flex-start;
    margin: 12px 0 10px;
  }

  .u-profile .u-acts {
    grid-area: acts;
    justify-content: flex-start;
  }

  .u-tri > div strong {
    white-space: normal;
    font-size: 12.5px;
  }

  .u-cal-head {
    flex-wrap: wrap;
  }

  .u-cal-head .u-legend {
    order: 3;
    width: 100%;
  }

  .u-wd .long {
    display: none;
  }

  .u-tile {
    min-height: 168px;
    padding: 14px;
  }

  .u-num {
    font-size: 23px;
  }

  .u-cal {
    gap: 4px;
  }

  .u-day {
    min-height: 58px;
    padding: 5px;
    border-radius: 10px;
  }

  .u-day .u-money {
    display: none;
  }

  .u-day .u-tasks {
    padding: 0 6px;
    font-size: 10.5px;
  }

  .u-wd {
    font-size: 11px;
  }
}

/* ---- inside the old frame: the page's own main takes the whole width; the parts not redone yet keep their look ---- */

body.ui .view {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.ui .u-part {
  max-width: 1180px;
  margin-inline: auto;
  padding-block-end: 48px;
}

.u-loading,
.u-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 60px 16px;
  color: var(--u-muted);
  text-align: center;
}

.u-btn {
  border: 1px solid var(--u-line);
  background: var(--u-panel-solid);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
}

.u-flip .icon {
  transform: scaleX(-1);
}

/* the customer one is speaking with: what a search found, under it */
.u-search-wrap {
  position: relative;
}

.u-results {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 6px);
  z-index: 20;
  display: grid;
  padding: 6px;
  border-radius: 18px;
  background: var(--u-panel-solid);
  border: 1px solid var(--u-line);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
}

.u-result {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--u-text);
  text-decoration: none;
}

.u-result:hover,
.u-result:focus-visible {
  background: var(--u-soft);
}

.u-result small {
  color: var(--u-muted);
  white-space: nowrap;
}

.u-result-none {
  padding: 10px 12px;
  color: var(--u-muted);
}

/* the width of a bar and its mark, by whole percents: CSP allows no inline style */
.u-bar > i.w0 { width: 0%; }
.u-bar > i.w1 { width: 1%; }
.u-bar > i.w2 { width: 2%; }
.u-bar > i.w3 { width: 3%; }
.u-bar > i.w4 { width: 4%; }
.u-bar > i.w5 { width: 5%; }
.u-bar > i.w6 { width: 6%; }
.u-bar > i.w7 { width: 7%; }
.u-bar > i.w8 { width: 8%; }
.u-bar > i.w9 { width: 9%; }
.u-bar > i.w10 { width: 10%; }
.u-bar > i.w11 { width: 11%; }
.u-bar > i.w12 { width: 12%; }
.u-bar > i.w13 { width: 13%; }
.u-bar > i.w14 { width: 14%; }
.u-bar > i.w15 { width: 15%; }
.u-bar > i.w16 { width: 16%; }
.u-bar > i.w17 { width: 17%; }
.u-bar > i.w18 { width: 18%; }
.u-bar > i.w19 { width: 19%; }
.u-bar > i.w20 { width: 20%; }
.u-bar > i.w21 { width: 21%; }
.u-bar > i.w22 { width: 22%; }
.u-bar > i.w23 { width: 23%; }
.u-bar > i.w24 { width: 24%; }
.u-bar > i.w25 { width: 25%; }
.u-bar > i.w26 { width: 26%; }
.u-bar > i.w27 { width: 27%; }
.u-bar > i.w28 { width: 28%; }
.u-bar > i.w29 { width: 29%; }
.u-bar > i.w30 { width: 30%; }
.u-bar > i.w31 { width: 31%; }
.u-bar > i.w32 { width: 32%; }
.u-bar > i.w33 { width: 33%; }
.u-bar > i.w34 { width: 34%; }
.u-bar > i.w35 { width: 35%; }
.u-bar > i.w36 { width: 36%; }
.u-bar > i.w37 { width: 37%; }
.u-bar > i.w38 { width: 38%; }
.u-bar > i.w39 { width: 39%; }
.u-bar > i.w40 { width: 40%; }
.u-bar > i.w41 { width: 41%; }
.u-bar > i.w42 { width: 42%; }
.u-bar > i.w43 { width: 43%; }
.u-bar > i.w44 { width: 44%; }
.u-bar > i.w45 { width: 45%; }
.u-bar > i.w46 { width: 46%; }
.u-bar > i.w47 { width: 47%; }
.u-bar > i.w48 { width: 48%; }
.u-bar > i.w49 { width: 49%; }
.u-bar > i.w50 { width: 50%; }
.u-bar > i.w51 { width: 51%; }
.u-bar > i.w52 { width: 52%; }
.u-bar > i.w53 { width: 53%; }
.u-bar > i.w54 { width: 54%; }
.u-bar > i.w55 { width: 55%; }
.u-bar > i.w56 { width: 56%; }
.u-bar > i.w57 { width: 57%; }
.u-bar > i.w58 { width: 58%; }
.u-bar > i.w59 { width: 59%; }
.u-bar > i.w60 { width: 60%; }
.u-bar > i.w61 { width: 61%; }
.u-bar > i.w62 { width: 62%; }
.u-bar > i.w63 { width: 63%; }
.u-bar > i.w64 { width: 64%; }
.u-bar > i.w65 { width: 65%; }
.u-bar > i.w66 { width: 66%; }
.u-bar > i.w67 { width: 67%; }
.u-bar > i.w68 { width: 68%; }
.u-bar > i.w69 { width: 69%; }
.u-bar > i.w70 { width: 70%; }
.u-bar > i.w71 { width: 71%; }
.u-bar > i.w72 { width: 72%; }
.u-bar > i.w73 { width: 73%; }
.u-bar > i.w74 { width: 74%; }
.u-bar > i.w75 { width: 75%; }
.u-bar > i.w76 { width: 76%; }
.u-bar > i.w77 { width: 77%; }
.u-bar > i.w78 { width: 78%; }
.u-bar > i.w79 { width: 79%; }
.u-bar > i.w80 { width: 80%; }
.u-bar > i.w81 { width: 81%; }
.u-bar > i.w82 { width: 82%; }
.u-bar > i.w83 { width: 83%; }
.u-bar > i.w84 { width: 84%; }
.u-bar > i.w85 { width: 85%; }
.u-bar > i.w86 { width: 86%; }
.u-bar > i.w87 { width: 87%; }
.u-bar > i.w88 { width: 88%; }
.u-bar > i.w89 { width: 89%; }
.u-bar > i.w90 { width: 90%; }
.u-bar > i.w91 { width: 91%; }
.u-bar > i.w92 { width: 92%; }
.u-bar > i.w93 { width: 93%; }
.u-bar > i.w94 { width: 94%; }
.u-bar > i.w95 { width: 95%; }
.u-bar > i.w96 { width: 96%; }
.u-bar > i.w97 { width: 97%; }
.u-bar > i.w98 { width: 98%; }
.u-bar > i.w99 { width: 99%; }
.u-bar > i.w100 { width: 100%; }
.u-bar > b.p0 { inset-inline-start: 0%; }
.u-bar > b.p1 { inset-inline-start: 1%; }
.u-bar > b.p2 { inset-inline-start: 2%; }
.u-bar > b.p3 { inset-inline-start: 3%; }
.u-bar > b.p4 { inset-inline-start: 4%; }
.u-bar > b.p5 { inset-inline-start: 5%; }
.u-bar > b.p6 { inset-inline-start: 6%; }
.u-bar > b.p7 { inset-inline-start: 7%; }
.u-bar > b.p8 { inset-inline-start: 8%; }
.u-bar > b.p9 { inset-inline-start: 9%; }
.u-bar > b.p10 { inset-inline-start: 10%; }
.u-bar > b.p11 { inset-inline-start: 11%; }
.u-bar > b.p12 { inset-inline-start: 12%; }
.u-bar > b.p13 { inset-inline-start: 13%; }
.u-bar > b.p14 { inset-inline-start: 14%; }
.u-bar > b.p15 { inset-inline-start: 15%; }
.u-bar > b.p16 { inset-inline-start: 16%; }
.u-bar > b.p17 { inset-inline-start: 17%; }
.u-bar > b.p18 { inset-inline-start: 18%; }
.u-bar > b.p19 { inset-inline-start: 19%; }
.u-bar > b.p20 { inset-inline-start: 20%; }
.u-bar > b.p21 { inset-inline-start: 21%; }
.u-bar > b.p22 { inset-inline-start: 22%; }
.u-bar > b.p23 { inset-inline-start: 23%; }
.u-bar > b.p24 { inset-inline-start: 24%; }
.u-bar > b.p25 { inset-inline-start: 25%; }
.u-bar > b.p26 { inset-inline-start: 26%; }
.u-bar > b.p27 { inset-inline-start: 27%; }
.u-bar > b.p28 { inset-inline-start: 28%; }
.u-bar > b.p29 { inset-inline-start: 29%; }
.u-bar > b.p30 { inset-inline-start: 30%; }
.u-bar > b.p31 { inset-inline-start: 31%; }
.u-bar > b.p32 { inset-inline-start: 32%; }
.u-bar > b.p33 { inset-inline-start: 33%; }
.u-bar > b.p34 { inset-inline-start: 34%; }
.u-bar > b.p35 { inset-inline-start: 35%; }
.u-bar > b.p36 { inset-inline-start: 36%; }
.u-bar > b.p37 { inset-inline-start: 37%; }
.u-bar > b.p38 { inset-inline-start: 38%; }
.u-bar > b.p39 { inset-inline-start: 39%; }
.u-bar > b.p40 { inset-inline-start: 40%; }
.u-bar > b.p41 { inset-inline-start: 41%; }
.u-bar > b.p42 { inset-inline-start: 42%; }
.u-bar > b.p43 { inset-inline-start: 43%; }
.u-bar > b.p44 { inset-inline-start: 44%; }
.u-bar > b.p45 { inset-inline-start: 45%; }
.u-bar > b.p46 { inset-inline-start: 46%; }
.u-bar > b.p47 { inset-inline-start: 47%; }
.u-bar > b.p48 { inset-inline-start: 48%; }
.u-bar > b.p49 { inset-inline-start: 49%; }
.u-bar > b.p50 { inset-inline-start: 50%; }
.u-bar > b.p51 { inset-inline-start: 51%; }
.u-bar > b.p52 { inset-inline-start: 52%; }
.u-bar > b.p53 { inset-inline-start: 53%; }
.u-bar > b.p54 { inset-inline-start: 54%; }
.u-bar > b.p55 { inset-inline-start: 55%; }
.u-bar > b.p56 { inset-inline-start: 56%; }
.u-bar > b.p57 { inset-inline-start: 57%; }
.u-bar > b.p58 { inset-inline-start: 58%; }
.u-bar > b.p59 { inset-inline-start: 59%; }
.u-bar > b.p60 { inset-inline-start: 60%; }
.u-bar > b.p61 { inset-inline-start: 61%; }
.u-bar > b.p62 { inset-inline-start: 62%; }
.u-bar > b.p63 { inset-inline-start: 63%; }
.u-bar > b.p64 { inset-inline-start: 64%; }
.u-bar > b.p65 { inset-inline-start: 65%; }
.u-bar > b.p66 { inset-inline-start: 66%; }
.u-bar > b.p67 { inset-inline-start: 67%; }
.u-bar > b.p68 { inset-inline-start: 68%; }
.u-bar > b.p69 { inset-inline-start: 69%; }
.u-bar > b.p70 { inset-inline-start: 70%; }
.u-bar > b.p71 { inset-inline-start: 71%; }
.u-bar > b.p72 { inset-inline-start: 72%; }
.u-bar > b.p73 { inset-inline-start: 73%; }
.u-bar > b.p74 { inset-inline-start: 74%; }
.u-bar > b.p75 { inset-inline-start: 75%; }
.u-bar > b.p76 { inset-inline-start: 76%; }
.u-bar > b.p77 { inset-inline-start: 77%; }
.u-bar > b.p78 { inset-inline-start: 78%; }
.u-bar > b.p79 { inset-inline-start: 79%; }
.u-bar > b.p80 { inset-inline-start: 80%; }
.u-bar > b.p81 { inset-inline-start: 81%; }
.u-bar > b.p82 { inset-inline-start: 82%; }
.u-bar > b.p83 { inset-inline-start: 83%; }
.u-bar > b.p84 { inset-inline-start: 84%; }
.u-bar > b.p85 { inset-inline-start: 85%; }
.u-bar > b.p86 { inset-inline-start: 86%; }
.u-bar > b.p87 { inset-inline-start: 87%; }
.u-bar > b.p88 { inset-inline-start: 88%; }
.u-bar > b.p89 { inset-inline-start: 89%; }
.u-bar > b.p90 { inset-inline-start: 90%; }
.u-bar > b.p91 { inset-inline-start: 91%; }
.u-bar > b.p92 { inset-inline-start: 92%; }
.u-bar > b.p93 { inset-inline-start: 93%; }
.u-bar > b.p94 { inset-inline-start: 94%; }
.u-bar > b.p95 { inset-inline-start: 95%; }
.u-bar > b.p96 { inset-inline-start: 96%; }
.u-bar > b.p97 { inset-inline-start: 97%; }
.u-bar > b.p98 { inset-inline-start: 98%; }
.u-bar > b.p99 { inset-inline-start: 99%; }
.u-bar > b.p100 { inset-inline-start: 100%; }

.u-month-card {
  margin-block-start: 18px;
}

/* ---- the follow-ups' board as Trello's (owner, 1405/08/04: «شبیه به ترلو شه با همون امکانات»، «بکگراند رنگی نیاز
   نیست»): columns of white cards on the page's own wash, a card's window, a timeline and a month (board.js) ---------- */

.tb {
  display: grid;
  gap: 16px;
  color: var(--u-text);
}

.tb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.tb-title {
  margin-inline-end: auto;
}

.tb-title h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  line-height: 1.3;
}

.tb-title p {
  color: var(--u-muted);
  font-size: 13px;
  margin: 4px 0 0;
  max-width: 75ch;
}

.tb-acts,
.tb-tools,
.tb-chips,
.tb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tb-tools {
  gap: 10px;
}

.tb-chips {
  gap: 6px;
}

.tb-views button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  max-width: 420px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--u-panel-solid);
  border: 1px solid var(--u-line);
  color: var(--u-muted);
}

.tb-search input {
  border: 0;
  outline: 0;
  background: none;
  flex: 1;
  min-width: 0;
  height: 100%;
  font: inherit;
  color: var(--u-text);
}

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--u-line);
  background: var(--u-panel-solid);
  color: var(--u-text);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.tb-btn.small {
  padding: 6px 12px;
  font-size: 13px;
}

.tb-btn.primary {
  background: var(--u-ink);
  color: var(--u-on-ink);
  border-color: transparent;
}

.tb-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--u-muted);
}

.tb-btn.ghost:hover {
  background: var(--u-soft);
}

.tb-btn.danger {
  color: var(--u-bad);
}

.tb-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.u-link {
  border: 0;
  background: none;
  padding: 0 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--u-blue);
  cursor: pointer;
}

.tb-chip {
  border: 1px solid var(--u-line);
  background: var(--u-panel-solid);
  color: var(--u-muted);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tb-chip[aria-pressed="true"] {
  background: var(--u-ink);
  color: var(--u-on-ink);
  border-color: transparent;
}

/* a label's chip keeps its colour, pressed or not */
.tb-chip.lb {
  border-color: transparent;
}

.tb-chip.lb[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px currentColor;
}

.tb-problem {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--u-warn-soft);
  color: var(--u-warn);
  font-size: 13px;
}

.tb-empty {
  margin: 0;
  padding: 14px 6px;
  color: var(--u-faint);
  font-size: 13px;
  text-align: center;
}

/* the form fields of the board and of a card's window */
.tb textarea,
.tb-modal textarea,
.tb-modal input:not([type="checkbox"]):not([type="file"]),
.tb-modal select,
.tb-label-rows input,
.tb-label-rows select,
.tb-maker input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--u-line);
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--u-panel-solid);
  color: var(--u-text);
  font: inherit;
  font-size: 13.5px;
}

.tb textarea,
.tb-modal textarea {
  resize: vertical;
}

/* ---- the columns ---- */

.tb-board {
  display: grid;
  gap: 10px;
}

.tb-tabs {
  display: none;
}

.tb-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.tb-col {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border-radius: 20px;
  background: var(--u-soft);
}

.tb-col.drop-here {
  outline: 2px dashed var(--u-blue);
  outline-offset: -2px;
}

.tb-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}

.tb-col-head h3 {
  margin: 0;
  margin-inline-end: auto;
  font-size: 14px;
  font-weight: 700;
}

.tb-count {
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--u-panel-solid);
  color: var(--u-muted);
  font-size: 12px;
  font-weight: 700;
}

.tb-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.dot-todo {
  background: var(--u-blue);
}

.dot-doing {
  background: #e0a21b;
}

.dot-done {
  background: var(--u-ok-fill);
}

.dot-manager {
  background: var(--u-bad);
}

.tb-dot.late {
  box-shadow: inset 0 0 0 2px var(--u-bad);
}

/* each column scrolls on its own, as Trello's do */
.tb-list {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  padding: 2px;
}

.tb-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--u-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tb-add:hover {
  background: var(--u-soft-2);
  color: var(--u-text);
}

.tb-composer {
  display: grid;
  gap: 8px;
}

.tb-composer-acts {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- a card ---- */

.tb-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--u-panel-solid);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.07),
    0 0 0 1px var(--u-line);
  cursor: pointer;
  text-align: start;
}

.tb-card:hover {
  box-shadow:
    0 4px 14px rgb(0 0 0 / 0.1),
    0 0 0 1px var(--u-line);
}

/* one only watches: theirs to see and to add to, not to move */
.tb-card.watch {
  background: var(--u-panel);
  box-shadow: none;
  outline: 1px dashed var(--u-faint);
  outline-offset: -1px;
}

/* its turn is today, or gone */
.tb-card.due::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--u-warn);
}

.tb-card.dragging {
  opacity: 0.5;
}

.tb-card[draggable="true"] {
  cursor: grab;
}

.tb-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tb-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tb-card-line,
.tb .card-visitor,
.tb-day-list .card-visitor {
  font-size: 12.5px;
  color: var(--u-muted);
}

.tb .card-visitor,
.tb-day-list .card-visitor,
.tb-holder {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tb-holder {
  font-size: 12px;
  color: var(--u-faint);
}

.tb-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--u-muted);
}

.tb-when,
.tb-ic {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tb-when {
  padding: 1px 6px;
  border-radius: 6px;
}

.tb-when.late {
  background: var(--u-bad-soft);
  color: var(--u-bad);
  font-weight: 700;
}

.tb-when.done,
.tb-ic.complete {
  color: var(--u-ok);
}

.tb-when.done {
  background: var(--u-ok-soft);
}

.tb-ic.complete {
  font-weight: 700;
}

.tb-people {
  display: flex;
  margin-inline-start: auto;
}

.tb-av {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.tb-people .tb-av {
  width: 24px;
  height: 24px;
  font-size: 11px;
  border: 2px solid var(--u-panel-solid);
  margin-inline-start: -6px;
}

.tb-people .tb-av:first-child {
  margin-inline-start: 0;
}

.tb-av.more {
  font-size: 10px;
}

.tb-av-none {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--u-soft-2);
  color: var(--u-muted);
  flex: none;
}

.tb-kind,
.tb-prio,
.tb-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--u-soft-2);
  color: var(--u-muted);
  white-space: nowrap;
}

.tb-badge {
  justify-self: start;
  font-size: 11.5px;
  padding: 2px 9px;
  white-space: normal;
}

.tb-kind.kind-debt,
.tb-prio.high,
.tb-badge.bad {
  background: var(--u-bad-soft);
  color: var(--u-bad);
}

.tb-kind.kind-cheque {
  background: var(--u-blue-soft);
  color: var(--u-blue);
}

.tb-kind.kind-order,
.tb-badge.warn {
  background: var(--u-warn-soft);
  color: var(--u-warn);
}

.tb-prio.low {
  background: var(--u-soft);
  color: var(--u-faint);
}

/* ---- the manager's labels, in their colours ---- */

.tb-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tb-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
}

.tb-label.pick {
  border: 0;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tb-label.pick[aria-pressed="false"] {
  opacity: 0.6;
}

.lb-green { background: #d3f1df; color: #146c3b; }
.lb-yellow { background: #f8ecb8; color: #6f5400; }
.lb-orange { background: #fde0c5; color: #943f00; }
.lb-red { background: #fbd5d3; color: #a32320; }
.lb-purple { background: #e7dcfa; color: #5b2aa8; }
.lb-blue { background: #d6e2ff; color: #1f47c4; }
.lb-teal { background: #cdeef0; color: #0d636b; }
.lb-gray { background: #e4e6eb; color: #464c5a; }

:root[data-theme="dark"] .lb-green { background: #1b3b2a; color: #7fdba6; }
:root[data-theme="dark"] .lb-yellow { background: #3b3416; color: #f0d36a; }
:root[data-theme="dark"] .lb-orange { background: #40291a; color: #f6ae72; }
:root[data-theme="dark"] .lb-red { background: #43201f; color: #ff9a93; }
:root[data-theme="dark"] .lb-purple { background: #2f2547; color: #c4a8ff; }
:root[data-theme="dark"] .lb-blue { background: #1d2a4d; color: #9fb8ff; }
:root[data-theme="dark"] .lb-teal { background: #173a3d; color: #7fd6dc; }
:root[data-theme="dark"] .lb-gray { background: #2b2f37; color: #b7bcc6; }

/* a colour to choose: the label's own, full */
.tb-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tb-swatch {
  width: 32px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.tb-swatch.lb-green { background: #2fa565; }
.tb-swatch.lb-yellow { background: #d9b416; }
.tb-swatch.lb-orange { background: #ef8a2c; }
.tb-swatch.lb-red { background: #db3b36; }
.tb-swatch.lb-purple { background: #8a5ad6; }
.tb-swatch.lb-blue { background: #3d66ff; }
.tb-swatch.lb-teal { background: #1f9aa3; }
.tb-swatch.lb-gray { background: #7d8392; }

.tb-swatch[aria-checked="true"] {
  outline: 2px solid var(--u-text);
  outline-offset: 2px;
}

.tb-maker {
  display: grid;
  gap: 8px;
  padding-block-start: 10px;
  border-block-start: 1px dashed var(--u-line);
}

.tb-maker .tb-btn {
  justify-self: start;
}

.tb-label-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tb-label-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tb-label-rows li input {
  flex: 1 1 140px;
  width: auto;
}

.tb-label-rows li select {
  width: auto;
}

/* ---- a card's window ---- */

dialog.sheet.tb-modal {
  max-width: 1040px;
  background: var(--u-panel-solid);
  color: var(--u-text);
}

dialog.sheet.tb-day-list,
dialog.sheet.u-scope {
  background: var(--u-panel-solid);
  color: var(--u-text);
}

.tb-modal-body {
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
}

.tb-modal-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tb-close {
  margin-inline-start: auto;
}

.tb-modal-title {
  margin: 10px 0 14px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tb-colpick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--u-muted);
}

.tb-modal .tb-colpick select {
  width: auto;
  padding: 5px 10px;
  border-radius: 10px;
}

.tb-modal-grid {
  display: grid;
  gap: 22px;
}

.tb-main,
.tb-side,
.tb-section,
.tb-editor,
.tb-comment,
.tb-day {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.tb-main {
  gap: 20px;
}

.tb-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tb-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  padding: 7px 12px;
  background: var(--u-soft-2);
  color: var(--u-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tb-tool:hover {
  background: var(--u-line);
}

.tb-editor {
  padding: 14px;
  border: 1px solid var(--u-line);
  border-radius: 16px;
  background: var(--u-panel-solid);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
}

.tb-editor-head,
.tb-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tb-editor-head h3,
.tb-section-head h3 {
  margin: 0;
  margin-inline-end: auto;
  font-size: 15px;
  font-weight: 700;
}

.tb-sub {
  color: var(--u-muted);
  font-size: 12.5px;
}

.tb-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 18px;
}

.tb-block h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--u-muted);
}

.tb-block-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 13.5px;
}

.tb-member,
.tb-remind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 2px;
  padding-inline: 2px 10px;
  border-radius: 999px;
  background: var(--u-soft);
  font-size: 13px;
}

.tb-remind {
  padding-inline: 10px 2px;
}

.tb-none {
  color: var(--u-faint);
}

.tb-late {
  color: var(--u-bad);
  font-weight: 700;
}

.tb-desc {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--u-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tb-desc.empty {
  width: 100%;
  min-height: 56px;
  border: 0;
  color: var(--u-muted);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.tb-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--u-muted);
  --t-track: var(--u-soft-2);
  --t-fill: var(--u-ok-fill);
}

.tb-progress .u-bar {
  flex: 1;
  margin: 0;
}

.tb-items,
.tb-files,
.tb-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.tb-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 10px;
}

.tb-items li:hover {
  background: var(--u-soft);
}

.tb-items label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.tb-items input,
.tb-pick input {
  width: 18px;
  height: 18px;
  accent-color: var(--u-ok-fill);
  flex: none;
}

.tb-items li.done span {
  color: var(--u-muted);
  text-decoration: line-through;
}

.tb-items small {
  color: var(--u-faint);
  font-size: 11.5px;
}

.tb-row > input {
  flex: 1;
  width: auto;
}

.tb-files {
  gap: 10px;
}

.tb-files li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tb-file-thumb {
  width: 88px;
  height: 64px;
  padding: 0;
  border: 0;
  color: var(--u-muted);
  cursor: pointer;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--u-soft-2);
}

.tb-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-file-kind {
  font-weight: 800;
  color: var(--u-bad);
}

.tb-file-about {
  display: grid;
  flex: 1;
  min-width: 0;
}

.tb-file-about strong {
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.tb-file-about small {
  color: var(--u-muted);
}

.tb-facts {
  margin: 0;
  display: grid;
  gap: 6px;
}

.tb-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block-end: 6px;
  border-block-end: 1px dashed var(--u-line);
}

.tb-facts dt {
  color: var(--u-muted);
}

.tb-facts dd {
  margin: 0;
  font-weight: 700;
  text-align: end;
}

.tb-picks {
  display: grid;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.tb-picks.labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: none;
}

.tb-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.tb-pick:hover {
  background: var(--u-soft);
}

.tb-field {
  display: grid;
  gap: 4px;
  flex: 1 1 140px;
  font-size: 12.5px;
  color: var(--u-muted);
}

.tb-feed {
  gap: 14px;
}

.tb-feed li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tb-feed li > div {
  flex: 1;
  min-width: 0;
}

.tb-feed-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.tb-feed-who strong {
  font-size: 13px;
}

.tb-feed-who small {
  color: var(--u-faint);
  font-size: 11.5px;
}

.tb-bubble {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--u-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tb-did {
  color: var(--u-muted);
  font-size: 13px;
}

@media (min-width: 900px) {
  .tb-modal-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .tb-side {
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--u-line);
  }
}

/* ---- the timeline: a row for each person, a bar for each card ---- */

.tl,
.cal {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--u-r-lg);
}

.tl-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tl-nav strong {
  margin-inline: 4px;
  font-size: 14px;
}

.tl-scroll {
  overflow-x: auto;
}

.tl-grid {
  display: grid;
}

.tl-cols {
  display: grid;
  align-items: center;
}

.tl-d14 {
  grid-template-columns: minmax(150px, 220px) repeat(14, minmax(38px, 1fr));
  min-width: 700px;
}

.tl-d28 {
  grid-template-columns: minmax(150px, 220px) repeat(28, minmax(30px, 1fr));
  min-width: 1000px;
}

.tl-row {
  min-height: 34px;
}

.tl-row > * {
  grid-row: 1;
}

.tl-header {
  position: sticky;
  inset-block-start: 0;
}

.tl-day {
  display: grid;
  padding-block: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.tl-day small {
  color: var(--u-faint);
  font-weight: 500;
}

.tl-day.today {
  color: var(--u-blue);
}

.tl-day.off {
  color: var(--u-faint);
}

.tl-name {
  grid-column: 1;
  display: block;
  min-width: 0;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--u-text);
  font: inherit;
  font-size: 13px;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

div.tl-name {
  color: var(--u-muted);
  font-weight: 600;
  cursor: default;
}

.tl-name .tb-dot {
  margin-inline-end: 6px;
  vertical-align: middle;
}

/* the days' lines, under the bars: each day an equal share of the row */
.tl-track {
  grid-column: 2 / -1;
  align-self: stretch;
  background-image: linear-gradient(to left, var(--u-line) 1px, transparent 1px);
}

.tl-d14 .tl-track {
  background-size: calc(100% / 14) 100%;
}

.tl-d28 .tl-track {
  background-size: calc(100% / 28) 100%;
}

.tl-now {
  align-self: stretch;
  background: var(--u-blue-soft);
}

.tl-bar {
  display: block;
  align-self: center;
  min-width: 0;
  height: 24px;
  margin-inline: 2px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.tl-bar.st-todo,
.cal-chip.st-todo {
  background: var(--u-blue-soft);
  color: var(--u-blue);
}

.tl-bar.st-doing,
.cal-chip.st-doing {
  background: var(--u-warn-soft);
  color: var(--u-warn);
}

.tl-bar.st-done,
.cal-chip.st-done {
  background: var(--u-ok-soft);
  color: var(--u-ok);
}

.tl-bar.st-manager,
.cal-chip.st-manager {
  background: var(--u-bad-soft);
  color: var(--u-bad);
}

.tl-bar.late,
.cal-chip.late {
  box-shadow: inset 0 0 0 2px var(--u-bad);
}

/* a bar that goes on before or after the days shown */
.tl-bar.cut-s {
  margin-inline-start: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.tl-bar.cut-e {
  margin-inline-end: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.tl-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 4px;
  border-block-start: 1px solid var(--u-line);
}

.tl-group strong {
  font-size: 13.5px;
}

.tl-group small {
  color: var(--u-muted);
}

.tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--u-muted);
}

.tl-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* a day's column, by its place in the days shown (CSP: no style attribute) */
.tl-row > .gs-0 { grid-column-start: 2; }
.tl-row > .gs-1 { grid-column-start: 3; }
.tl-row > .gs-2 { grid-column-start: 4; }
.tl-row > .gs-3 { grid-column-start: 5; }
.tl-row > .gs-4 { grid-column-start: 6; }
.tl-row > .gs-5 { grid-column-start: 7; }
.tl-row > .gs-6 { grid-column-start: 8; }
.tl-row > .gs-7 { grid-column-start: 9; }
.tl-row > .gs-8 { grid-column-start: 10; }
.tl-row > .gs-9 { grid-column-start: 11; }
.tl-row > .gs-10 { grid-column-start: 12; }
.tl-row > .gs-11 { grid-column-start: 13; }
.tl-row > .gs-12 { grid-column-start: 14; }
.tl-row > .gs-13 { grid-column-start: 15; }
.tl-row > .gs-14 { grid-column-start: 16; }
.tl-row > .gs-15 { grid-column-start: 17; }
.tl-row > .gs-16 { grid-column-start: 18; }
.tl-row > .gs-17 { grid-column-start: 19; }
.tl-row > .gs-18 { grid-column-start: 20; }
.tl-row > .gs-19 { grid-column-start: 21; }
.tl-row > .gs-20 { grid-column-start: 22; }
.tl-row > .gs-21 { grid-column-start: 23; }
.tl-row > .gs-22 { grid-column-start: 24; }
.tl-row > .gs-23 { grid-column-start: 25; }
.tl-row > .gs-24 { grid-column-start: 26; }
.tl-row > .gs-25 { grid-column-start: 27; }
.tl-row > .gs-26 { grid-column-start: 28; }
.tl-row > .gs-27 { grid-column-start: 29; }
.tl-row > .ge-0 { grid-column-end: 3; }
.tl-row > .ge-1 { grid-column-end: 4; }
.tl-row > .ge-2 { grid-column-end: 5; }
.tl-row > .ge-3 { grid-column-end: 6; }
.tl-row > .ge-4 { grid-column-end: 7; }
.tl-row > .ge-5 { grid-column-end: 8; }
.tl-row > .ge-6 { grid-column-end: 9; }
.tl-row > .ge-7 { grid-column-end: 10; }
.tl-row > .ge-8 { grid-column-end: 11; }
.tl-row > .ge-9 { grid-column-end: 12; }
.tl-row > .ge-10 { grid-column-end: 13; }
.tl-row > .ge-11 { grid-column-end: 14; }
.tl-row > .ge-12 { grid-column-end: 15; }
.tl-row > .ge-13 { grid-column-end: 16; }
.tl-row > .ge-14 { grid-column-end: 17; }
.tl-row > .ge-15 { grid-column-end: 18; }
.tl-row > .ge-16 { grid-column-end: 19; }
.tl-row > .ge-17 { grid-column-end: 20; }
.tl-row > .ge-18 { grid-column-end: 21; }
.tl-row > .ge-19 { grid-column-end: 22; }
.tl-row > .ge-20 { grid-column-end: 23; }
.tl-row > .ge-21 { grid-column-end: 24; }
.tl-row > .ge-22 { grid-column-end: 25; }
.tl-row > .ge-23 { grid-column-end: 26; }
.tl-row > .ge-24 { grid-column-end: 27; }
.tl-row > .ge-25 { grid-column-end: 28; }
.tl-row > .ge-26 { grid-column-end: 29; }
.tl-row > .ge-27 { grid-column-end: 30; }

/* ---- the month: each card on the day it is due again ---- */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal-wd {
  padding-block: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--u-muted);
}

.cal-wd .short,
.cal-count {
  display: none;
}

.cal-day {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 112px;
  padding: 6px;
  border-radius: 12px;
  background: var(--u-panel-solid);
  box-shadow: 0 0 0 1px var(--u-line);
}

.cal-day.out {
  background: transparent;
  box-shadow: none;
}

.cal-day.off {
  background: var(--u-soft);
}

.cal-day.today {
  box-shadow: 0 0 0 2px var(--u-blue);
}

.cal-day.busy {
  cursor: pointer;
}

.cal-dn {
  font-size: 12px;
  font-weight: 700;
  color: var(--u-muted);
}

.cal-day.today .cal-dn {
  color: var(--u-blue);
}

.cal-chip {
  display: block;
  width: 100%;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.cal-more {
  padding-inline: 4px;
  font-size: 11px;
  color: var(--u-muted);
}

/* ---- the bell ---- */

.u-bell-wrap {
  position: relative;
}

.u-bell {
  position: relative;
}

.u-bell-count {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--u-bad);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}

.u-pop {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--u-line);
  border-radius: 18px;
  background: var(--u-panel-solid);
  color: var(--u-text);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.18);
  font-size: 13.5px;
  text-align: start;
}

.u-pop h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.u-pop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.u-pop-list button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--u-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.u-pop-list button:hover:not(:disabled) {
  background: var(--u-soft);
}

.u-pop-list button.unseen {
  background: var(--u-blue-soft);
}

.u-pop-list button:disabled {
  cursor: default;
}

.u-pop-text {
  display: grid;
  gap: 2px;
}

.u-pop-text small {
  color: var(--u-faint);
  font-size: 11.5px;
}

.u-pop-bale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--u-line);
  color: var(--u-muted);
  font-size: 13px;
}

.u-pop-bale span {
  flex: 1 1 160px;
}

.u-pop-bale.waiting {
  display: grid;
}

.u-pop-bale p {
  margin: 0;
}

.u-code {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 4px;
  text-align: center;
  color: var(--u-text);
}

/* ---- on a phone: one column at a time, the month as counts ---- */

@media (max-width: 899px) {
  .tb-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tb-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--u-line);
    border-radius: 999px;
    background: var(--u-panel-solid);
    color: var(--u-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }

  .tb-tabs button[aria-selected="true"] {
    background: var(--u-ink);
    color: var(--u-on-ink);
    border-color: transparent;
  }

  .tb-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .tb-col:not(.current) {
    display: none;
  }

  .tb-list {
    max-height: none;
  }

  .tb-title h2 {
    font-size: 22px;
  }

  .tb-search {
    max-width: none;
  }

  .tb-modal-body {
    padding-inline: 16px;
  }
}

@media (max-width: 700px) {
  .cal-grid {
    gap: 4px;
  }

  .cal-wd .long,
  .cal-chip,
  .cal-more {
    display: none;
  }

  .cal-wd .short {
    display: inline;
  }

  .cal-day {
    align-items: center;
    min-height: 54px;
    padding: 4px;
  }

  .cal-count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--u-ink);
    color: var(--u-on-ink);
    font-size: 11px;
    font-weight: 700;
  }
}

/* ---- the customers as cards (owner, 1405/08/04: like the picture the owner sent, in the look of the rest; a card's
   colour how they pay: خوش‌حساب a little green, قابل قبول white, بدحساب red, a prospect gray; customers.js) ---------- */

.cg {
  --cg-new: #e3e5e9;
}

:root[data-theme="dark"] .cg {
  --cg-new: #30333b;
}

.cg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.cg-card {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 168px;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--u-panel-solid);
  box-shadow: 0 0 0 1px var(--u-line);
  /* style.css colours a «tone-bad» text red; the card's colour is its background alone */
  color: var(--u-text);
  cursor: pointer;
  text-align: start;
}

.cg-card:hover {
  box-shadow:
    0 6px 18px rgb(0 0 0 / 0.08),
    0 0 0 1px var(--u-line);
}

.cg-card.tone-good {
  background: var(--u-ok-soft);
}

.cg-card.tone-bad {
  background: var(--u-bad-soft);
}

.cg-card.tone-new {
  background: var(--cg-new);
}

.cg-top,
.cg-foot,
.cg-score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cg-top {
  align-items: flex-start;
  gap: 8px;
}

.cg-who {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cg-who strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.cg-who small,
.cg-figure small {
  overflow: hidden;
  color: var(--u-muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cg-flags {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.cg-doing {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--u-ink);
  color: var(--u-on-ink);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.cg-mine {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--u-blue);
  color: #ffffff;
}

.cg-score small {
  color: var(--u-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

/* the score out of 100, as the picture's bars */
.cg-bar.u-bar {
  flex: 1;
  height: 5px;
  margin: 0;
  --t-track: rgb(0 0 0 / 0.08);
  --t-fill: var(--u-ink);
}

:root[data-theme="dark"] .cg-bar.u-bar {
  --t-track: rgb(255 255 255 / 0.12);
}

.cg-outcome {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--u-panel-solid);
  color: var(--u-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cg-outcome.o-interested,
.cg-outcome.o-became_customer {
  background: var(--u-ok-soft);
  color: var(--u-ok);
}

.cg-outcome.o-not_interested,
.cg-outcome.o-wrong_number {
  background: var(--u-bad-soft);
  color: var(--u-bad);
}

.cg-outcome.o-call_later,
.cg-outcome.o-no_answer {
  background: var(--u-warn-soft);
  color: var(--u-warn);
}

.cg-photo {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--u-panel-solid);
  color: var(--u-text);
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--u-panel-solid);
}

.cg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cg-figure {
  display: grid;
  flex: 1;
  min-width: 0;
}

.cg-figure strong {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cg-call {
  flex: none;
}

/* the order and the kind, chosen as a pill */
.cg-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: var(--u-panel-solid);
  color: var(--u-muted);
}

.cg-select select {
  border: 0;
  outline: 0;
  background: none;
  color: var(--u-text);
  font: inherit;
  font-size: 13px;
}

.cg-check,
.cg-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cg-key small {
  opacity: 0.7;
}

.cg-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--u-line);
}

.cg-dot.tone-good {
  background: var(--u-ok-soft);
}

.cg-dot.tone-fair {
  background: var(--u-panel-solid);
}

.cg-dot.tone-bad {
  background: var(--u-bad-soft);
}

.cg-dot.tone-new {
  background: var(--cg-new);
}

/* a colour shown, or hidden */
.tb-chip.cg-tone[aria-pressed="true"] {
  background: var(--u-panel-solid);
  color: var(--u-text);
  border-color: var(--u-text);
}

.tb-chip.cg-tone[aria-pressed="false"] {
  opacity: 0.55;
}

.cg-count {
  color: var(--u-muted);
  font-size: 12.5px;
}

.cg-more {
  display: flex;
  justify-content: center;
  padding: 16px;
}

.cg-settings {
  padding: 14px;
  border-radius: 20px;
  background: var(--u-panel-solid);
}

/* a prospect's window: its pictures, then what it is */
.cg-gallery {
  display: flex;
  gap: 8px;
  margin-block-end: 14px;
  padding-block-end: 4px;
  overflow-x: auto;
}

.cg-gallery img {
  flex: none;
  height: 140px;
  max-width: 240px;
  border-radius: 14px;
  object-fit: cover;
}

.cg-modal .tb-feed .cg-outcome {
  display: inline-block;
  margin-block-start: 4px;
  background: var(--u-soft-2);
}

.tb-chip.o-ok[aria-pressed="true"] {
  background: var(--u-ok-fill);
  color: #ffffff;
}

.tb-chip.o-bad[aria-pressed="true"] {
  background: var(--u-bad);
  color: #ffffff;
}

.tb-chip.o-warn[aria-pressed="true"] {
  background: var(--u-warn);
  color: #ffffff;
}

@media (max-width: 899px) {
  .cg-card {
    min-height: 0;
  }
}

/* ---- one who became a customer on a call, and the catalog, a sample and an order (deal.js, 1405/08/04) ---- */

.dl-who {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.dl-who small {
  color: var(--u-muted);
}

.dl-actions {
  display: grid;
  gap: 8px;
}

.dl-sample {
  padding: 10px;
  border-radius: 12px;
  background: var(--u-soft);
}

.dl-status {
  margin: 0;
}

/* on a customer's own page, below their phones */
.cust-deal {
  flex: 1 1 100%;
  color: var(--u-text);
}