/* ==========================================================================
   INTERACTIVE DEMO  ("Try it live")
   A working miniature of the Claritask app, sat inside a browser-chrome
   device frame. The laptop shell is Claritick's .clk-section-demo; the app
   inside uses the real values out of a/assets/styles/global.css, so this is
   the product's own design system rather than an impression of it:

     sidebar        230px, #fff, item 12/16 pad, r12, hover #f4f6fa,
                    active #eef4ff, text #4A5A6E, muted #9aa3af
     topbar         64px, #fdfdfd            right rail  40px
     column         #FAFAFA on #EBEBEB       col name 12/700 ls .6 #6b7280
     col count      24x24, #6b7280 on #eceef1, r5
     card           #fff, r2, 14px/390, content margin 10 10 4 38
     tags           5px pad, r5, 12/600, the app's own 12-colour palette
     due chip       #F1F1F1 r3, date #2684FF, overdue #d90000

   Everything is namespaced .ctd-* and the shell resets inherited type, so
   nothing in style.css leaks in and nothing here leaks out.
   ========================================================================== */

.ctd-section {
  padding: clamp(38px, 3.8vw, 50px) 0;
  position: relative;
}

/* --------------------------------------------------------------------------
   Device: the same laptop shell Claritick uses, so the two sites match.
   -------------------------------------------------------------------------- */
.ctd-wrap {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
.ctd-device {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2b2b2e 0%, #1d1d1f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 16px 40px rgba(15, 23, 42, 0.14);
}
.ctd-device__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 0 2px;
}
.ctd-device__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.ctd-device__bar i:nth-child(1) {
  background: #ff5f57;
}
.ctd-device__bar i:nth-child(2) {
  background: #febc2e;
}
.ctd-device__bar i:nth-child(3) {
  background: #28c840;
}
.ctd-device__url {
  flex: 1;
  min-width: 0;
  margin-left: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--ct-font-body);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctd-device__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  background: #fdfdfd;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   App shell. The app's own tokens, lifted from global.css.
   -------------------------------------------------------------------------- */
.ctd-app {
  --ctd-text: #103254;
  --ctd-body: #4a5a6e;
  --ctd-muted: #9aa3af;
  --ctd-line: rgba(0, 0, 0, 0.05);
  --ctd-hover: #f4f6fa;
  --ctd-active: #eef4ff;
  --ctd-pill: #00b4e5;
  --ctd-navy: #001a66;
  --ctd-colbg: #fafafa;
  --ctd-colline: #ebebeb;
  --ctd-chip: #eceef1;
  --ctd-chipink: #6b7280;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 40px;
  /* row 1 is the topbar band, which runs over the rail as the app's does */
  grid-template-rows: 64px minmax(0, 1fr);
  font-family: var(--ct-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ctd-text);
  background: #fdfdfd;
  text-align: left;
}
.ctd-app *,
.ctd-app *::before,
.ctd-app *::after {
  box-sizing: border-box;
}
/* :where() so this reset carries no specificity and every component rule
   below still wins on colour. */
.ctd-app :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
/* Most of this app is scenery. Only the controls that actually respond get a
   pointer, so the cursor never promises something the demo cannot do. */
.ctd-app,
.ctd-app :where(button) {
  cursor: default;
}
.ctd-app [data-proj],
.ctd-app [data-view],
.ctd-app [data-task],
.ctd-app [data-done],
.ctd-app [data-close],
.ctd-app [data-toggle] {
  cursor: pointer;
}

.ctd-side {
  grid-column: 1;
  grid-row: 1 / -1;
}
.ctd-topbar {
  grid-column: 2 / -1;
  grid-row: 1;
}
.ctd-main {
  grid-column: 2;
  grid-row: 2;
}
.ctd-rail {
  grid-column: 3;
  grid-row: 2;
}

/* ---------- sidebar ----------
   Values below are the app's own, from a/assets/styles/global.css:
   #mainSidebar.sidebar 230px / #fff / border-right rgba(0,0,0,.05)
   .sidebar-brand 54px, .logo-img 110px, .collapse-btn 22px #f0f0f0/#a6b2cd
   .current-workspace 56px min, 8/10 pad, #F7F8FA on #EBEBEB, r6
   .menu-item 40px min, 12/16 pad; .menu-label 400 13/16 #3A4E62
   hover #EDF2FA; .submenu-item.active #132d4f; expandable.active-open gradient */
.ctd-side {
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
}
.ctd-side__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  flex: none;
  padding: 0 14px;
}
.ctd-side__logo {
  width: 110px;
  height: auto;
  display: block;
}
.ctd-side__collapse {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #a6b2cd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex: none;
}

/* workspace card */
.ctd-ws {
  padding: 0 14px 12px;
  flex: none;
}
.ctd-ws__btn {
  position: relative;
  width: 100%;
  min-height: 56px;
  padding: 25px 10px 8px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #f7f8fa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background 0.15s ease;
}
/* the app's .ws-top-bar: a 17px strip with three window dots */
.ctd-ws__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 17px;
  background: #dfdfdf;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 9px;
}
.ctd-ws__bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.ctd-ws__bar .is-red {
  background: #fc6f58;
}
.ctd-ws__bar .is-blue {
  background: #49c3e8;
}
.ctd-ws__bar .is-yellow {
  background: #ffd160;
}
.ctd-ws__btn:hover {
  background: #eff2f6;
}
.ctd-ws__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ctd-ws__name {
  font: 500 13px/16px var(--ct-font-body);
  color: #1a2c3e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctd-ws__role {
  font: 400 11px/13px var(--ct-font-body);
  color: #7a8a9a;
}
.ctd-ws__arrow {
  color: #9aa3af;
  font-size: 11px;
  flex: none;
}

.ctd-side__label {
  padding: 6px 14px 8px;
  font: 700 10px/12px var(--ct-font-body);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6b7a8a;
  flex: none;
}
.ctd-side__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.ctd-side__scroll::-webkit-scrollbar {
  display: none;
}

/* the app's .menu-item */
.ctd-nav {
  width: 100%;
  min-height: 40px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
}
.ctd-nav__l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ctd-nav__lbl {
  font: 400 13px/16px var(--ct-font-body);
  color: #3a4e62;
  white-space: nowrap;
}
.ctd-nav__ico {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: none;
  color: #6b7a8a;
  display: block;
}
/* My Tasks is its own row in the app: 56px, a 32px avatar, gap 16 */
.ctd-nav--me {
  height: 56px;
  min-height: 56px;
  padding: 0 20px;
}
.ctd-nav--me .ctd-nav__l {
  gap: 16px;
}
.ctd-nav--me .ctd-nav__lbl {
  font-size: 14px;
}
.ctd-nav--me:hover {
  background: linear-gradient(90deg, #e6ebf5 0%, rgba(230, 235, 245, 0) 100%);
}
.ctd-nav--me.is-on {
  background: linear-gradient(90deg, #dae6f8 0%, rgba(218, 230, 248, 0) 100%);
}
.ctd-me__av {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  flex: none;
}
.ctd-me__av img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.ctd-me__count {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #34516d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ctd-nav:hover {
  background: #edf2fa;
}
.ctd-nav.is-on {
  background: #edf2fa;
}
/* the app draws this as a thin chevron that flips, not a filled triangle */
.ctd-nav__arrow {
  color: #9aa3af;
  flex: none;
  display: inline-flex;
  transition: transform 0.18s ease;
}
.ctd-nav__arrow svg {
  width: 14px;
  height: 14px;
  display: block;
}
.ctd-nav__arrow.is-up {
  transform: rotate(180deg);
}
.ctd-nav__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #001a66;
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* the app's sidebar icons are image files, not inline glyphs */
.ctd-nav__img {
  width: 16px;
  height: 16px;
  min-width: 16px;
  object-fit: contain;
  display: block;
  flex: none;
}

/* the app's .submenu-item */
.ctd-sub__i {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 0 16px 0 40px;
  display: flex;
  align-items: center;
  /* body:not(.dark-mode) #mainSidebar .sidebar-menu
     #projectsMenu.submenu > a.submenu-item — a gradient, not a flat fill */
  background: linear-gradient(-259deg, #e7ecf5 28%, rgba(218, 230, 248, 0) 100%);
  font: 400 12px/16px var(--ct-font-body);
  color: #3a4e62;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctd-sub__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctd-sub__i:hover,
.ctd-sub__i.is-on {
  background: #132d4f;
  color: #fff;
}

.ctd-side__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-top: auto;
  padding: 10px 14px;
  border-top: 1px solid #ebebeb;
  background: #fff;
}
.ctd-side__foot b {
  display: block;
  font: 500 13px/16px var(--ct-font-body);
  color: #1a2c3e;
}
.ctd-side__foot i {
  font-style: normal;
  display: block;
  font: 400 10px/13px var(--ct-font-body);
  color: #7a8a9a;
}
.ctd-side__foot span:last-child {
  margin-left: auto;
  color: #7a8a9a;
  letter-spacing: 0.1em;
}

/* ---------- right icon rail (the app's .utility / .right-toolbar) ----------
   The twelve Kore platforms, in the app's order, with the app's own icon files.
   Each rests mono and colours in on hover, over that platform's tint, with the
   label in a matching badge — same as .tool-item::after in global.css. */
/* not overflow:hidden — the hover labels sit to the left of the rail */
.ctd-rail {
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.ctd-tool {
  position: relative;
  width: 40px;
  height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(166, 178, 205, 0.35);
  border-radius: 4px;
  background: transparent;
  transition: background 0.2s ease;
  flex: none;
}
.ctd-tool__i {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
/* the colour copy sits exactly on top of the mono one and fades in */
.ctd-tool__i--on {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.ctd-tool:hover .ctd-tool__i--on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.03);
}
.ctd-tool:hover .ctd-tool__i:not(.ctd-tool__i--on) {
  opacity: 0;
}
/* the app spins the Kore mark on hover */
.ctd-tool--kore:hover .ctd-tool__i--on {
  animation: ctdKoreSpin 3.3s linear infinite;
}
@keyframes ctdKoreSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* tooltip */
.ctd-tool::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 6px 12px;
  min-height: 26px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  font: 600 12px/12px var(--ct-font-body);
  color: #2d2d2d;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 5;
}
.ctd-tool::before {
  content: "";
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 5;
}
.ctd-tool:hover::after,
.ctd-tool:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(-2px);
}
/* Claritask is the platform you are already in: tinted, no label */
.ctd-tool--claritask,
.ctd-tool--claritask:hover {
  background: #ede9fe;
}
.ctd-tool--claritask::after,
.ctd-tool--claritask::before {
  display: none;
}

.ctd-tool--kore:hover {
  background: #ffe5a3;
}
.ctd-tool--kore::after {
  background: #f6ebcf;
}
.ctd-tool--kore::before {
  border-left-color: #f6ebcf;
}
.ctd-tool--customer:hover {
  background: #f7d9a4;
}
.ctd-tool--customer::after {
  background: #f4e5c6;
}
.ctd-tool--customer::before {
  border-left-color: #f4e5c6;
}
.ctd-tool--design:hover {
  background: #e5d4ff;
}
.ctd-tool--design::after {
  background: #eadcf8;
}
.ctd-tool--design::before {
  border-left-color: #eadcf8;
}
.ctd-tool--website:hover {
  background: #d6e4ff;
}
.ctd-tool--website::after {
  background: #dfe9fb;
}
.ctd-tool--website::before {
  border-left-color: #dfe9fb;
}
.ctd-tool--reputation:hover {
  background: #d6f5e3;
}
.ctd-tool--reputation::after {
  background: #dff3e7;
}
.ctd-tool--reputation::before {
  border-left-color: #dff3e7;
}
.ctd-tool--banking:hover {
  background: #cff5f2;
}
.ctd-tool--banking::after {
  background: #dff6f4;
}
.ctd-tool--banking::before {
  border-left-color: #dff6f4;
}
.ctd-tool--ticket:hover {
  background: #e3d7ff;
}
.ctd-tool--ticket::after {
  background: #e8dff6;
}
.ctd-tool--ticket::before {
  border-left-color: #e8dff6;
}
.ctd-tool--chat:hover {
  background: #e9f5c8;
}
.ctd-tool--chat::after {
  background: #eef4cf;
}
.ctd-tool--chat::before {
  border-left-color: #eef4cf;
}
.ctd-tool--email:hover {
  background: #fad4d4;
}
.ctd-tool--email::after {
  background: #f6dede;
}
.ctd-tool--email::before {
  border-left-color: #f6dede;
}
.ctd-tool--warehouse:hover {
  background: #e5e5e5;
}
.ctd-tool--warehouse::after {
  background: #ececec;
}
.ctd-tool--warehouse::before {
  border-left-color: #ececec;
}
.ctd-tool--key:hover {
  background: #d6e6f7;
}
.ctd-tool--key::after {
  background: #dce8f3;
}
.ctd-tool--key::before {
  border-left-color: #dce8f3;
}

/* ---------- avatars ---------- */
.ctd-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  flex: none;
  border: 2px solid #fff;
  background: var(--a, #00b4e5);
}
/* one avatar file for everyone, rotated per person so a card with two
   assignees does not show the same face twice */
.ctd-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: hue-rotate(var(--h, 0deg));
}
.ctd-avs {
  display: inline-flex;
}
.ctd-avs .ctd-av + .ctd-av {
  margin-left: -7px;
}

/* ---------- main column ---------- */
.ctd-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}
/* the app's .app-topbar: 64px, #FDFDFD, borderless search, 0 18px */
.ctd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  background: #fdfdfd;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.ctd-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  color: #9aa3af;
  font: 400 14px/14px var(--ct-font-body);
}
.ctd-search svg {
  width: 15px;
  height: 15px;
  flex: none;
}
/* one line, clipped — the way the real input's placeholder behaves */
.ctd-search__t {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ctd-topbar__ico {
  display: flex;
  align-items: center;
  gap: 12px;
  /* cancel the topbar's 18px so the trailing bell can line up with the rail */
  margin-right: -18px;
  color: #7a8a9a;
  flex: none;
}
.ctd-topbar__ico img,
.ctd-topbar__ico svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
/* .ctj-nc-bell .fa-bell { color: #103254 }. The 40px box, with the topbar's
   right padding cancelled below, lands the bell dead centre over the rail. */
.ctd-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: #103254;
}
.ctd-bell svg {
  width: 17px;
  height: 17px;
}

/* ---------- project header (.project-top-holder) ---------- */
.ctd-head {
  min-height: 60px;
  padding: 8px 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
}
/* the app lets this wrap; at this window width it does */
.ctd-head__left {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  min-width: 0;
}
.ctd-head__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.35;
  color: #103254;
  white-space: nowrap;
}
/* .sgoal, .project-kind-badge and the late chip share one box in the app */
.ctd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 5px;
  background: #f1f1f1;
  color: #103254;
  white-space: nowrap;
}
/* the app spaces these with margins, but only inside .project-top-holder */
.ctd-head .ctd-chip {
  margin-left: 11px;
}
.ctd-chip svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.ctd-chip--late {
  background: #e3555654;
  color: #e35556;
}
.ctd-head .ctd-chip--late {
  margin-left: 10px;
}
.ctd-chip--goal {
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}
.ctd-chip--goal:hover {
  background: #00b4e5;
  color: #fff;
}
/* the app narrows the Sprint Goal gap */
.ctd-head .ctd-chip--goal {
  margin-left: 5px;
}

/* .pn-sprint-times */
.ctd-times {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-left: 11px;
}
.ctd-times span {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: #8a99a8;
  white-space: nowrap;
}
.ctd-times b {
  font-weight: 600;
  color: #103254;
  margin-left: 4px;
}
.ctd-times .is-over b {
  color: #e5484d;
}
.ctd-head__end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
/* .more-button.project-controls-js > i — three real dots, so they sit on the
   optical centre instead of on the text baseline like an ellipsis does */
.ctd-more {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: #e5e9ec;
  color: #707070;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.ctd-more i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.ctd-more:hover {
  background: #00b4e5;
  color: #fff;
}
/* .sprints a / .sprints a.current */
.ctd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 3px;
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  background: #f1f1f1;
  color: #103254;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.ctd-btn:hover {
  filter: brightness(0.96);
}
.ctd-btn--cyan {
  background: #00b4e5;
  color: #fff;
}
.ctd-btn--green {
  background: #eaf7ef;
  color: #1a7f43;
}
.ctd-btn--ghost {
  background: #00b4e5;
  color: #fff;
}

/* ---------- Favorite Tasks / My Tasks page ----------
   .my-tasks-menu a { padding 8/10, r5, 14px, #103254 on #F1F1F1 }
   .my-tasks-menu a.current { #fff on #00B4E5, shadow 10px 4px 15px #0000001d } */
.ctd-mtmenu {
  display: flex;
  align-items: center;
  flex: none;
}
.ctd-mtmenu__a {
  margin: 0 3px;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 14px;
  color: #103254;
  background: #f1f1f1;
  white-space: nowrap;
}
.ctd-mtmenu__a.is-on {
  color: #fff;
  background: #00b4e5;
  box-shadow: 10px 4px 15px #0000001d;
}
/* the count that rides each tab on this page */
.ctd-tab__n {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 5px;
  background: #eceef1;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ctd-favs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ctd-fav {
  padding: 14px 16px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.16s ease;
}
.ctd-fav:hover {
  border-color: #999;
}
.ctd-fav__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.ctd-fav__title {
  font-size: 14px;
  font-weight: 600;
  color: #103254;
  line-height: 1.45;
}
.ctd-fav__due {
  margin-top: 12px;
}
.ctd-fav__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-top: 14px;
  font-size: 12.5px;
  color: #8a99a8;
}
.ctd-fav__meta b {
  font-weight: 600;
  color: #103254;
}
.ctd-fav__who {
  margin-left: auto;
}
.ctd-empty {
  padding: 28px 4px;
  color: #8a99a8;
}

/* ---------- toolbar ---------- */
.ctd-tools {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 9px;
  padding: 10px 18px;
  flex: none;
}
.ctd-tools__left {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.ctd-tools .ctd-search {
  max-width: 108px;
  flex: none;
  padding: 6px 11px;
  border: 1px solid #ebebeb;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
}
.ctd-tools__end {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
/* the app has ~2x this width for the toolbar; its controls step down here so
   the row still reads as one line rather than clipping at the rail. */
.ctd-tools {
  padding-left: 12px;
  padding-right: 12px;
}
.ctd-tools .ctd-chip,
.ctd-tools .ctd-btn {
  font-size: 13px;
  padding: 4px 10px;
  margin: 0;
}
.ctd-hours {
  color: var(--ctd-muted);
  font-size: 12px;
  white-space: nowrap;
}
.ctd-hours b {
  color: var(--ctd-text);
  font-weight: 700;
}

/* ---------- tabs ---------- */
.ctd-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  border-bottom: 1px solid var(--ctd-line);
  flex: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.ctd-tabs::-webkit-scrollbar {
  display: none;
}
.ctd-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ctd-body);
  white-space: nowrap;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.ctd-tab svg {
  width: 15px;
  height: 15px;
}
.ctd-tab:hover {
  color: var(--ctd-text);
}
.ctd-tab.is-on {
  color: #2684ff;
  border-bottom-color: #2684ff;
  font-weight: 600;
}

/* ---------- view area ---------- */
.ctd-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: #c7ccd4 transparent;
}
.ctd-view::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.ctd-view::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c7ccd4;
  border: 2px solid transparent;
  background-clip: content-box;
}
.ctd-view::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- board ---------- */
.ctd-board {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}
.ctd-col {
  /* the app fixes columns at 385px; scaled here for a laptop-width window */
  flex: 0 0 300px;
  width: 300px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 6px;
  background: var(--ctd-colbg);
  border: 1px solid var(--ctd-colline);
  overflow: hidden;
}
.ctd-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 12px 14px 10px;
}
.ctd-col__grip {
  color: #c9cfda;
  flex: none;
  line-height: 0;
}
.ctd-col__grip svg {
  width: 13px;
  height: 13px;
}
.ctd-col__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ctd-chipink);
}
.ctd-col__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--ctd-chip);
  color: var(--ctd-chipink);
  font-size: 11px;
  font-weight: 600;
}
.ctd-col__pts {
  color: var(--ctd-chipink);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ctd-col__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 10px;
  scrollbar-width: none;
}
.ctd-col__body::-webkit-scrollbar {
  display: none;
}
/* the app reveals "+ Create" on column hover rather than parking it there */
.ctd-col__add {
  display: block;
  padding: 8px 4px 2px;
  color: var(--ctd-muted);
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ctd-col:hover .ctd-col__add,
.ctd-col__add:focus-visible {
  opacity: 1;
}
.ctd-col__add:hover {
  color: #2684ff;
}

/* ---------- card ---------- */
/* :is(.scrum-board .board-column, .kanban-board .board-column) .single-task-wrap
   — 28px of left padding for the grip, a real #e6e8eb border at radius 8, a
   140px floor, and no shadow (the app keeps its lift commented out). */
.ctd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 140px;
  margin: 0 0 10px;
  padding: 10px 10px 10px 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e6e8eb;
  font-size: 14px;
  font-weight: 390;
  transition: border-color 0.15s ease;
}
.ctd-card:hover {
  border-color: #999;
}
/* the app's vertical divider between the drag grip and the content */
.ctd-card::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e6e8eb;
}
.ctd-card__grip {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #d6dbe3;
  line-height: 0;
}
.ctd-card__grip svg {
  width: 13px;
  height: 13px;
}
.ctd-card__body {
  display: block;
}
.ctd-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.ctd-tag {
  padding: 5px;
  border-radius: 5px;
  background: var(--t, #4c9aff);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
}
.ctd-card__title {
  display: block;
  font-size: 14px;
  font-weight: 390;
  line-height: 1.4;
  color: var(--ctd-text);
}
.ctd-card.is-done .ctd-card__title {
  color: var(--ctd-muted);
  text-decoration: line-through;
}
.ctd-due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 9px;
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: #f1f1f1;
  color: #2684ff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.ctd-due svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.ctd-due.is-late {
  background: #fff;
  border-color: #d90000;
  color: #d90000;
  font-weight: 600;
}
.ctd-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
.ctd-box {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 1.5px solid #c9cfda;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 9px;
  font-weight: 900;
  flex: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.ctd-box:hover {
  border-color: #36b37e;
}
.ctd-box.is-on {
  background: #36b37e;
  border-color: #36b37e;
  color: #fff;
}
.ctd-card__id {
  font-size: 12px;
  font-weight: 500;
  color: var(--ctd-body);
}
.ctd-card__cmt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #cfe4f7;
  color: #2684ff;
  font-size: 11px;
  font-weight: 600;
}
.ctd-card__cmt svg {
  width: 10px;
  height: 10px;
}
.ctd-card__foot .ctd-avs {
  margin-left: auto;
}

/* ---------- list view ---------- */
.ctd-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ctd-list th {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ctd-colline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ctd-chipink);
  white-space: nowrap;
}
.ctd-list td {
  padding: 12px;
  border-bottom: 1px solid #f2f3f6;
  vertical-align: middle;
  line-height: 1.5;
}
.ctd-list tr:hover td {
  background: var(--ctd-hover);
}
/* WORK cell: the id in link blue, then the title, wrapping under it */
.ctd-list__work {
  width: 46%;
}
.ctd-list__id {
  color: #2684ff;
  font-weight: 700;
  margin-right: 8px;
}
.ctd-list__title {
  color: var(--ctd-text);
}
.ctd-list tr[data-task] {
  cursor: pointer;
}
.ctd-list__who,
.ctd-list__proj {
  color: #5b7290;
}
/* wide enough that a single name never stacks onto two lines */
.ctd-list__who {
  min-width: 118px;
}
.ctd-list__date {
  color: var(--ctd-body);
  white-space: nowrap;
}
.ctd-list__none {
  color: #b6bec9;
}
.ctd-status-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  background: #eceef1;
  color: #5b6b7c;
  font-size: 12px;
  white-space: nowrap;
}

/* ---------- summary view ---------- */
.ctd-sum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.ctd-stat {
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid var(--ctd-colline);
  background: #fff;
}
.ctd-stat b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.ctd-stat span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ctd-muted);
}
.ctd-bars {
  border: 1px solid var(--ctd-colline);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
}
.ctd-bars__h {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.ctd-bar {
  display: grid;
  grid-template-columns: 130px 1fr 62px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 12px;
}
.ctd-bar__t {
  color: var(--ctd-muted);
}
.ctd-bar__track {
  height: 8px;
  border-radius: 999px;
  background: #f1f2f5;
  overflow: hidden;
}
.ctd-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--c, #2684ff);
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ctd-bar__v {
  text-align: right;
  font-weight: 600;
  font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   Task modal. The app opens a task as a centred three-column dialog, not a
   side panel: activity on the left, the task in the middle, its properties
   stacked on the right.
   -------------------------------------------------------------------------- */
.ctd-modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(16, 50, 84, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.ctd-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ctd-modal__panel {
  width: 100%;
  max-width: 1040px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  transform: translateY(8px) scale(0.99);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ctd-modal.is-open .ctd-modal__panel {
  transform: none;
}
.ctd-modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ctd-line);
  font-size: 12.5px;
}
/* one line that truncates; it was collapsing into a narrow wrapping column
   once the icon row took the width */
.ctd-modal__crumb {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ctd-modal__crumb b {
  font-weight: 600;
}
.ctd-modal__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--ctd-muted);
}
.ctd-modal__tools svg {
  width: 15px;
  height: 15px;
}
.ctd-modal__eye {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #cfe4f7;
  color: #2684ff;
  font-size: 11px;
  font-weight: 600;
}
.ctd-modal__x {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.ctd-modal__x:hover {
  background: var(--ctd-hover);
  color: var(--ctd-text);
}
.ctd-modal__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 290px;
}
.ctd-mcol {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ctd-mcol--left {
  border-right: 1px solid var(--ctd-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ctd-mcol--mid {
  background: #f7f8fa;
  padding: 14px;
}
.ctd-mcol--right {
  border-left: 1px solid var(--ctd-line);
  padding: 12px;
}

/* activity column */
.ctd-actabs {
  display: flex;
  gap: 4px;
  flex: none;
  padding: 12px 12px 10px;
}
.ctd-actab {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ctd-body);
  background: #f4f5f7;
}
.ctd-actab.is-on {
  background: #fff;
  border: 1px solid var(--ctd-colline);
  font-weight: 600;
  color: var(--ctd-text);
}
.ctd-acts {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 12px;
  scrollbar-width: none;
}
.ctd-acts::-webkit-scrollbar {
  display: none;
}
.ctd-act {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.ctd-act__b {
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
}
.ctd-act__who {
  font-weight: 600;
  font-size: 12px;
}
.ctd-act__when {
  color: var(--ctd-muted);
  font-size: 11px;
  font-weight: 400;
  margin-left: 4px;
}
.ctd-act__t {
  margin-top: 3px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #f4f5f7;
}
.ctd-act__t em {
  font-style: normal;
  color: #2684ff;
  font-weight: 600;
}
.ctd-act__t b {
  font-weight: 600;
}
.ctd-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 12px;
  border-top: 1px solid var(--ctd-line);
}
.ctd-compose span:last-child {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--ctd-colline);
  color: var(--ctd-muted);
  font-size: 12px;
}

/* middle column */
.ctd-mtitle {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  padding: 12px 14px;
  border-radius: 6px 6px 0 0;
  background: #fff;
  border: 1px solid var(--ctd-colline);
}
.ctd-mdesc {
  padding: 11px 14px;
  border-radius: 0 0 6px 6px;
  background: #fff;
  border: 1px solid var(--ctd-colline);
  border-top: 0;
  color: var(--ctd-body);
  font-size: 13px;
  line-height: 1.55;
}
.ctd-panel {
  margin-top: 12px;
  border-radius: 6px;
  border: 1px solid var(--ctd-colline);
  background: #fff;
  overflow: hidden;
}
.ctd-panel__h {
  display: flex;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid var(--ctd-line);
  font-size: 13px;
  font-weight: 600;
}
.ctd-panel__h span {
  margin-left: auto;
  color: var(--ctd-muted);
  font-size: 15px;
  line-height: 1;
}
.ctd-panel__b {
  padding: 4px 13px 10px;
}
.ctd-panel__empty {
  padding: 8px 0;
  color: var(--ctd-muted);
  font-size: 12.5px;
}
.ctd-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f3f6;
  font-size: 12.5px;
}
.ctd-sub:last-child {
  border-bottom: 0;
}
.ctd-sub.is-done span:last-child {
  color: var(--ctd-muted);
  text-decoration: line-through;
}
.ctd-sub__box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid #c9cfda;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
  color: transparent;
}
.ctd-sub.is-done .ctd-sub__box {
  background: #36b37e;
  border-color: #36b37e;
  color: #fff;
}

/* right column */
.ctd-status {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--ctd-colline);
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ctd-chipink);
}
.ctd-status span {
  margin-left: auto;
  color: var(--ctd-muted);
  font-size: 10px;
}
.ctd-meta {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 7px 10px;
  padding: 11px 13px;
  font-size: 12px;
}
.ctd-meta dt {
  color: var(--ctd-muted);
}
.ctd-meta dd {
  margin: 0;
  font-weight: 500;
}
.ctd-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 13px;
}
.ctd-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: #f1f4f9;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.ctd-person .ctd-av {
  width: 20px;
  height: 20px;
  font-size: 9px;
  border-width: 0;
}
.ctd-person i {
  font-style: normal;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #36b37e;
}
.ctd-request {
  display: block;
  margin: 2px 13px 12px;
  padding: 7px 0;
  border-radius: 6px;
  border: 1px solid var(--ctd-colline);
  color: var(--ctd-body);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.ctd-request:hover {
  background: var(--ctd-hover);
}
.ctd-worklog {
  padding: 11px 13px;
  font-size: 12px;
  color: var(--ctd-body);
}

/* --------------------------------------------------------------------------
   Hint
   -------------------------------------------------------------------------- */
.ctd-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 36px auto 0;
  color: var(--ct-muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: opacity 0.4s ease;
}
.ctd-hint svg {
  width: 14px;
  height: 14px;
  color: var(--ct-viz);
}
.ctd-wrap.is-touched .ctd-hint {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* The demo window is ~890px of app where the real one has close to twice that,
   so below 1280 the header and toolbar shed what the app itself sheds when its
   window narrows: the kind badge, the sprint totals and the secondary buttons. */
@media (max-width: 1279px) {
  .ctd-chip--kind,
  .ctd-times,
  .ctd-tools .ctd-avs,
  .ctd-tools__end .ctd-hours,
  .ctd-tools__end .ctd-btn--ghost,
  .ctd-head__end .ctd-more {
    display: none;
  }
}
@media (max-width: 1023px) {
  .ctd-app {
    grid-template-columns: 206px minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr);
    font-size: 12.5px;
  }
  .ctd-rail {
    display: none;
  }
  .ctd-col {
    flex-basis: 264px;
    width: 264px;
  }
  .ctd-modal__body {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
  .ctd-mcol--left {
    display: none;
  }
  .ctd-sum {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .ctd-device__screen {
    aspect-ratio: 4 / 3;
  }
  .ctd-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .ctd-topbar {
    grid-column: 1 / -1;
  }
  .ctd-main {
    grid-column: 1;
  }
  .ctd-side {
    display: none;
  }
  .ctd-head__end .ctd-btn--green,
  .ctd-tools__end .ctd-btn--green,
  .ctd-chip--goal,
  /* the third page button does not fit beside the title on a phone */
  .ctd-mtmenu__a:last-child {
    display: none;
  }
  .ctd-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .ctd-modal {
    padding: 10px;
  }
  .ctd-modal__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ctd-mcol--right,
  /* the decorative header actions do nothing here and cost the crumb its
     width, so a phone keeps the crumb, the task id and the close button */
  .ctd-modal__tools > svg,
  .ctd-modal__eye {
    display: none;
  }
  .ctd-modal__head {
    gap: 8px;
    padding: 10px 12px;
  }
}
@media (max-width: 560px) {
  .ctd-device {
    padding: 7px 7px 6px;
    border-radius: 11px;
  }
  .ctd-device__screen {
    aspect-ratio: auto;
    height: 440px;
  }
  .ctd-app {
    font-size: 12px;
  }
  .ctd-topbar,
  .ctd-side__top {
    height: 52px;
  }
  .ctd-col {
    flex-basis: 232px;
    width: 232px;
  }
  .ctd-head,
  .ctd-tools,
  .ctd-tabs,
  .ctd-view {
    padding-inline: 12px;
  }
  .ctd-tools .ctd-search {
    display: none;
  }
  .ctd-sum {
    grid-template-columns: 1fr 1fr;
  }
  .ctd-bar {
    grid-template-columns: 92px 1fr 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctd-modal,
  .ctd-modal__panel,
  .ctd-card,
  .ctd-bar__fill {
    transition: none;
  }
}