/* The account portal's chrome and page layout (pkg/portal/v2/templates/partials/header.html,
   topnav.html, sidebar.html, footer.html). Tokens and components come from duet-ui.css.

   Loaded after static/css/main.css, which stays: it is Bulma plus the portal's old SASS,
   compiled with a toolchain a rebuild no longer reproduces, and the pages this redesign
   leaves alone (plans.html, enterprise-setup.html) and the DataTables theme still lean on
   it. Every override here is one class more specific than the Bulma rule it replaces, so
   nothing depends on stylesheet order and nothing needs !important — except Bulma's own
   !important text helpers, which page scripts still toggle.

   Layout contract with the plan upgrader (plan-upgrade-page.html), which renders inside this
   shell without a sidebar: .main-content is the page's scroller, a fixed height under the
   top bar, so the upgrader's .pu-page-wrap {min-height: 100%} fills the screen; and
   .page-content-full > .main-content drops width and padding, mirroring the rule the
   upgrader carries itself. */

html.dp-root {
  height: 100%;
  overflow: hidden;
  background: var(--duet-bg);

  /* Portal-only tokens; the shared ones live in duet-ui.css. */
  --dp-sidebar-bg: rgba(255, 255, 255, .38);
  --dp-nav-hover: rgba(255, 255, 255, .75);
  --dp-nav-current: #fff;
  --dp-overlay: rgba(22, 27, 38, .32);
  --dp-busy: rgba(251, 249, 245, .7);
  /* The team bubble (.dp-tip): one deep blue in both themes, which keeps white type above
     AA; --duet-blue-ink can't serve, because the dark theme lightens it. */
  --dp-tip-bg: #2f6fbf;
  --dp-tip-shadow: 0 14px 30px -14px rgba(47, 111, 191, .75);
}

/* The dark theme: the plans page's dark palette, so /plans and the portal look alike in either
   theme. It follows the OS until someone uses the switch in the top bar (topnav.html), which
   sets data-theme on <html> and remembers it under the key /plans uses, so a choice made on one
   holds on the other. The plan upgrader pins data-theme="light" (header.html): its own styles
   are light-only. */
@media (prefers-color-scheme: dark) {
  html.dp-root:not([data-theme="light"]) {
    --duet-bg: #070a12;
    --duet-bg-glow: radial-gradient(1150px 640px at 50% -12%, rgba(92, 152, 222, .26), transparent 70%);
    --duet-surface: rgba(255, 255, 255, .035);
    --duet-surface-solid: #0e1320;
    --duet-surface-2: rgba(255, 255, 255, .055);
    --duet-stroke: rgba(255, 255, 255, .1);
    --duet-stroke-strong: rgba(255, 255, 255, .2);
    --duet-stroke-hover: rgba(255, 255, 255, .32);
    --duet-hover: rgba(255, 255, 255, .07);
    --duet-row-hover: rgba(255, 255, 255, .03);
    --duet-switch-off: rgba(255, 255, 255, .22);
    --duet-text: #edf1f7;
    --duet-muted: #97a2b6;
    --duet-faint: #6e7b92;
    --duet-blue-ink: #7fb3ec;
    --duet-blue-ink-strong: #9cc8f7;
    --duet-blue-soft: rgba(92, 152, 222, .16);
    --duet-blue-line: linear-gradient(135deg, rgba(156, 200, 247, .9), rgba(92, 152, 222, .8), rgba(156, 200, 247, .9));
    --duet-success: #3fbf86;
    --duet-success-ink: #6fd3a3;
    --duet-success-soft: rgba(63, 191, 134, .16);
    --duet-warning: #e0a43a;
    --duet-warning-ink: #f0c06b;
    --duet-warning-soft: rgba(224, 164, 58, .16);
    --duet-danger: #ef6b6b;
    --duet-danger-ink: #ff8a80;
    --duet-danger-soft: rgba(239, 107, 107, .12);
    --duet-shadow: 0 20px 60px -28px rgba(0, 0, 0, .9);
    --duet-shadow-pop: 0 30px 80px -24px rgba(92, 152, 222, .45);
    --duet-shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -26px rgba(0, 0, 0, .85);
    --duet-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px -8px rgba(0, 0, 0, .6);
    --duet-seg-track: rgba(255, 255, 255, .05);
    --duet-seg-border: rgba(255, 255, 255, .16);
    --duet-seg-active: rgba(255, 255, 255, .17);
    --duet-seg-ring: rgba(255, 255, 255, .28);
    --dp-sidebar-bg: rgba(255, 255, 255, .02);
    --dp-nav-hover: rgba(255, 255, 255, .05);
    --dp-nav-current: rgba(255, 255, 255, .08);
    --dp-overlay: rgba(3, 5, 10, .6);
    --dp-busy: rgba(7, 10, 18, .7);
    --dp-tip-shadow: 0 0 0 1px rgba(156, 200, 247, .3), 0 16px 34px -16px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}

html.dp-root[data-theme="dark"] {
  --duet-bg: #070a12;
  --duet-bg-glow: radial-gradient(1150px 640px at 50% -12%, rgba(92, 152, 222, .26), transparent 70%);
  --duet-surface: rgba(255, 255, 255, .035);
  --duet-surface-solid: #0e1320;
  --duet-surface-2: rgba(255, 255, 255, .055);
  --duet-stroke: rgba(255, 255, 255, .1);
  --duet-stroke-strong: rgba(255, 255, 255, .2);
  --duet-stroke-hover: rgba(255, 255, 255, .32);
  --duet-hover: rgba(255, 255, 255, .07);
  --duet-row-hover: rgba(255, 255, 255, .03);
  --duet-switch-off: rgba(255, 255, 255, .22);
  --duet-text: #edf1f7;
  --duet-muted: #97a2b6;
  --duet-faint: #6e7b92;
  --duet-blue-ink: #7fb3ec;
  --duet-blue-ink-strong: #9cc8f7;
  --duet-blue-soft: rgba(92, 152, 222, .16);
  --duet-blue-line: linear-gradient(135deg, rgba(156, 200, 247, .9), rgba(92, 152, 222, .8), rgba(156, 200, 247, .9));
  --duet-success: #3fbf86;
  --duet-success-ink: #6fd3a3;
  --duet-success-soft: rgba(63, 191, 134, .16);
  --duet-warning: #e0a43a;
  --duet-warning-ink: #f0c06b;
  --duet-warning-soft: rgba(224, 164, 58, .16);
  --duet-danger: #ef6b6b;
  --duet-danger-ink: #ff8a80;
  --duet-danger-soft: rgba(239, 107, 107, .12);
  --duet-shadow: 0 20px 60px -28px rgba(0, 0, 0, .9);
  --duet-shadow-pop: 0 30px 80px -24px rgba(92, 152, 222, .45);
  --duet-shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -26px rgba(0, 0, 0, .85);
  --duet-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px -8px rgba(0, 0, 0, .6);
  --duet-seg-track: rgba(255, 255, 255, .05);
  --duet-seg-border: rgba(255, 255, 255, .16);
  --duet-seg-active: rgba(255, 255, 255, .17);
  --duet-seg-ring: rgba(255, 255, 255, .28);
  --dp-sidebar-bg: rgba(255, 255, 255, .02);
  --dp-nav-hover: rgba(255, 255, 255, .05);
  --dp-nav-current: rgba(255, 255, 255, .08);
  --dp-overlay: rgba(3, 5, 10, .6);
  --dp-busy: rgba(7, 10, 18, .7);
  --dp-tip-shadow: 0 0 0 1px rgba(156, 200, 247, .3), 0 16px 34px -16px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

body.duet-portal {
  max-width: none;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--duet-bg) var(--duet-bg-glow) no-repeat;
  color: var(--duet-text);
  font-family: var(--duet-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.duet-portal :is(button, input, optgroup, select, textarea) {
  font-family: inherit;
}

:where(.dp-shell, .dp-page) a {
  color: var(--duet-blue-ink);
  text-underline-offset: 3px;
}

:where(.dp-shell, .dp-page) a:hover {
  color: var(--duet-blue-ink-strong);
}

:where(.dp-shell, .dp-page) strong {
  color: inherit;
}

:where(.dp-shell, .dp-page) :is(h1, h2, h3, p, ul, ol, dl, figure) {
  margin: 0;
}

:where(.dp-shell, .dp-page) :is(ul, ol) {
  padding: 0;
  list-style: none;
}

.dp-ic {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.dp-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 70;
  padding: 8px 14px;
  border-radius: var(--duet-r-pill);
  background: var(--duet-surface-solid);
  box-shadow: var(--duet-shadow);
  font-weight: 700;
  transform: translateY(-160%);
}

.dp-skip:focus {
  transform: none;
}

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

/* The plans page's header: ivory glass, a hairline, the live-text wordmark. */
.dp-topbar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 20px 0 24px;
  border-bottom: 1px solid var(--duet-stroke);
  background: var(--duet-bg);
  background: color-mix(in srgb, var(--duet-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.dp-topbar__left,
.dp-topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dp-topbar .dp-wordmark {
  color: var(--duet-accent);
}

.dp-iconbtn {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--duet-text);
  cursor: pointer;
}

.dp-iconbtn:hover {
  background: var(--duet-hover);
}

.dp-menu-btn {
  display: none;
  margin-left: -8px;
}

.duet-portal .dp-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--duet-r-pill);
  color: var(--duet-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.duet-portal .dp-topbar__link:hover {
  background: var(--duet-hover);
  color: var(--duet-text);
}

.dp-account {
  position: relative;
}

.dp-account__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  height: 40px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--duet-stroke);
  border-radius: var(--duet-r-pill);
  background: var(--duet-surface-solid);
  color: var(--duet-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dp-account__trigger:hover,
.dp-account__trigger[aria-expanded="true"] {
  border-color: var(--duet-stroke-strong);
  box-shadow: var(--duet-shadow-sm);
}

.dp-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--duet-blue-grad);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.dp-account__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-account__caret {
  width: 16px;
  height: 16px;
  color: var(--duet-muted);
  transition: transform .18s ease;
}

.dp-account__trigger[aria-expanded="true"] .dp-account__caret {
  transform: rotate(180deg);
}

.dp-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 248px;
  padding: 6px;
  border: 1px solid var(--duet-stroke-strong);
  border-radius: var(--duet-r-md);
  background: var(--duet-surface-solid);
  box-shadow: var(--duet-shadow);
  animation: dp-pop .16s ease both;
}

.dp-menu[hidden] {
  display: none;
}

@keyframes dp-pop {
  from { opacity: 0; transform: translateY(-4px); }
}

.dp-menu__head {
  margin-bottom: 6px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--duet-stroke);
}

.dp-menu__label {
  display: block;
  color: var(--duet-muted);
  font-size: 12px;
  font-weight: 600;
}

.dp-menu__email {
  display: block;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.duet-portal .dp-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--duet-text);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.duet-portal .dp-menu a:hover,
.duet-portal .dp-menu a:focus-visible {
  background: var(--duet-surface-2);
  color: var(--duet-text);
}

.dp-menu .dp-ic {
  width: 18px;
  height: 18px;
  color: var(--duet-muted);
}

/* The light/dark switch: the plans page's own control (views/plans-feature.html .theme-switch). */
.dp-theme-switch {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--duet-seg-border);
  border-radius: var(--duet-r-pill);
  background: var(--duet-seg-track);
}

.dp-theme-switch button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--duet-r-pill);
  background: transparent;
  color: var(--duet-muted);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}

.dp-theme-switch button:hover {
  color: var(--duet-text);
}

.dp-theme-switch button[aria-pressed="true"] {
  background: var(--duet-seg-active);
  color: var(--duet-blue-ink);
  box-shadow: inset 0 0 0 1px var(--duet-seg-ring), 0 1px 3px rgba(0, 0, 0, .18);
}

.dp-theme-switch svg {
  width: 16px;
  height: 16px;
}

/* -------------------------------------------------------------- layout */

.duet-portal .page-content {
  display: flex;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

.duet-portal .main-content {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 100%;
  padding: 36px clamp(20px, 4vw, 56px) 40px;
  overflow-y: auto;
  background: transparent;
}

.duet-portal .page-content-full > .main-content {
  width: 100%;
  padding: 0;
}

/* ------------------------------------------------------------- sidebar */

.dp-sidebar {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 248px;
  height: 100%;
  padding: 18px 14px 18px;
  overflow-y: auto;
  border-right: 1px solid var(--duet-stroke);
  background: var(--dp-sidebar-bg);
}

.dp-sidebar__head {
  display: none;
}

.dp-nav {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.dp-nav__label {
  margin: 20px 10px 6px;
  color: var(--duet-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dp-nav__label:first-child {
  margin-top: 4px;
}

.dp-nav ul {
  display: grid;
  gap: 2px;
}

.duet-portal .dp-nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--duet-text);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.dp-nav__item .dp-ic {
  width: 19px;
  height: 19px;
  color: var(--duet-muted);
  transition: color .15s ease;
}

.duet-portal .dp-nav__item:hover {
  background: var(--dp-nav-hover);
  color: var(--duet-text);
}

.duet-portal .dp-nav__item[aria-current="page"] {
  background: var(--dp-nav-current);
  color: var(--duet-text);
  font-weight: 700;
  box-shadow: var(--duet-shadow-sm);
}

.dp-nav__item[aria-current="page"] .dp-ic {
  color: var(--duet-blue-ink);
}

.duet-portal .dp-nav__item--upsell,
.duet-portal .dp-nav__item--upsell:hover {
  color: var(--duet-blue-ink-strong);
}

.dp-nav__item--upsell .dp-ic {
  color: var(--duet-blue-ink);
}

/* The annual-default cohort's "Upgrade to Lifetime" (sidebar_upgrade.go): the one item in
   the menu that is an offer rather than a place, so it is the one that is tinted. */
.duet-portal .dp-nav__item--lifetime {
  background: var(--duet-blue-soft);
}

.duet-portal .dp-nav__item--lifetime:hover {
  background: rgba(92, 152, 222, .18);
}

.dp-nav__ext {
  width: 14px !important;
  height: 14px !important;
  margin-left: auto;
  opacity: .7;
}

.dp-nav__foot {
  margin-top: auto;
  padding-top: 20px;
}

.duet-portal .dp-nav__item--quiet {
  color: var(--duet-muted);
}

/* "Your team is here": under a Team section someone has only just got (sidebar.html; the
   shell script in footer.html shows and dismisses it). The arrow points up at the section. */
.dp-tip {
  position: relative;
  margin: 12px 2px 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--dp-tip-bg);
  box-shadow: var(--dp-tip-shadow);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  animation: dp-tip-in .35s var(--duet-ease) both;
}

.dp-tip[hidden] {
  display: none;
}

.dp-tip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 20px;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--dp-tip-bg);
  transform: rotate(45deg);
}

.dp-tip__title {
  font-size: 13.5px;
  font-weight: 800;
}

.dp-tip__text {
  margin-top: 2px;
  color: rgba(255, 255, 255, .9);
}

.dp-tip__close {
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--duet-r-pill);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease;
}

.dp-tip__close:hover {
  background: rgba(255, 255, 255, .24);
}

/* The shared focus ring is Duet blue, which would vanish against the bubble. */
.dp-tip__close:focus-visible {
  outline-color: #fff;
}

@keyframes dp-tip-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Below 1024px the section is inside the closed drawer, so the menu button carries a dot
   while the bubble is waiting. */
html.dp-team-tip .dp-menu-btn {
  position: relative;
}

html.dp-team-tip .dp-menu-btn::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dp-tip-bg);
  box-shadow: 0 0 0 2px var(--duet-bg);
}

/* ------------------------------------------------------- mobile drawer */

.dp-scrim {
  display: none;
}

@media (max-width: 1023px) {
  .dp-menu-btn {
    display: grid;
  }

  .dp-topbar {
    padding: 0 12px 0 16px;
  }

  .dp-account__email,
  .dp-account__caret,
  .dp-topbar__link span {
    display: none;
  }

  .dp-account__trigger {
    padding: 0 4px;
  }

  .duet-portal .dp-topbar__link {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .dp-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(86vw, 320px);
    height: auto;
    padding-top: 12px;
    border-right: 0;
    background: var(--duet-surface-solid);
    box-shadow: var(--duet-shadow-pop);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform .25s var(--duet-ease), visibility 0s linear .25s;
  }

  html.dp-nav-open .dp-sidebar {
    transform: none;
    visibility: visible;
    transition: transform .25s var(--duet-ease);
  }

  .dp-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -4px 6px 6px;
  }

  .dp-scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: block;
    background: var(--dp-overlay);
  }

  .dp-scrim[hidden] {
    display: none;
  }

  .duet-portal .main-content {
    padding: 24px 16px 32px;
  }
}

/* ---------------------------------------------------------------- page */

.dp-page {
  max-width: 1080px;
  margin: 0 auto;
}

/* Narrower, but on the same left edge as the full-width pages, so moving between pages in
   the sidebar doesn't make the content jump sideways. */
.dp-page--narrow {
  max-width: 780px;
  margin-left: max(0px, calc((100% - 1080px) / 2));
}

.dp-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 26px;
}

.dp-page-head__text {
  min-width: 0;
}

.dp-page-sub {
  max-width: 640px;
  margin-top: 6px !important;
  color: var(--duet-muted);
  font-size: 15.5px;
  line-height: 1.5;
}

.duet-portal .dp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--duet-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.duet-portal .dp-back:hover {
  color: var(--duet-text);
}

.dp-back .dp-ic {
  width: 16px;
  height: 16px;
}

.dp-stack {
  display: grid;
  gap: 20px;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  align-items: start;
}

.dp-split {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .dp-split {
    grid-template-columns: 1fr;
  }
}

.dp-section-title {
  margin-bottom: 12px !important;
  color: var(--duet-muted);
  font-family: var(--duet-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Rows inside a card: label and help on the left, the control on the right. */
.dp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--duet-stroke);
}

.dp-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.dp-row:last-child {
  padding-bottom: 0;
}

.dp-row__text {
  min-width: 0;
}

.dp-row__title {
  font-weight: 700;
  line-height: 1.35;
}

.dp-row__sub {
  margin-top: 2px !important;
  color: var(--duet-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .dp-row {
    flex-wrap: wrap;
  }
}

/* A square tile holding an icon, as on the plans page's feature tiles. */
.dp-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--duet-blue-soft);
  color: var(--duet-blue-ink);
}

.dp-tile .dp-ic {
  width: 24px;
  height: 24px;
}

.dp-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 12px;
  text-align: center;
}

.dp-empty .dp-tile {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.dp-empty .dp-tile .dp-ic {
  width: 30px;
  height: 30px;
}

.dp-empty__title {
  margin-top: 6px !important;
  font-family: var(--duet-heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.dp-empty p {
  max-width: 420px;
  color: var(--duet-muted);
}

.dp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.dp-legal {
  max-width: 1080px;
  margin: 48px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--duet-stroke);
  text-align: center;
}

.page-content-full .dp-legal {
  margin: 0 auto;
  padding: 14px 0 18px;
  border-top: 0;
}

.dp-legal .termly-display-preferences {
  padding: 0;
  border: 0;
  background: none;
  color: var(--duet-muted);
  font-size: 12.5px;
  cursor: pointer;
}

.dp-legal .termly-display-preferences:hover {
  color: var(--duet-text);
  text-decoration: underline;
}

/* Disabled means Termly has not switched the button on for this visitor's region, and a click
   would do nothing (footer.html). The second selector is for browsers without :has(). */
.dp-legal:has(.termly-display-preferences:disabled),
.dp-legal .termly-display-preferences:disabled {
  display: none;
}

/* The busy overlay (#spinner) the team pages show around their requests. */
.duet-portal #spinner {
  display: grid;
  place-items: center;
  background: var(--dp-busy);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.duet-portal #spinner .dp-spinner {
  width: 36px;
  height: 36px;
}

/* ----------------------------------------------------------- Bulma bridge

   Scripts on the team pages still toggle Bulma's helpers (is-hidden, is-loading, the
   has-text-* colours, a dropdown's is-active); those keep working and take the palette. */

.duet-portal .has-text-danger {
  color: var(--duet-danger-ink) !important;
}

.duet-portal .has-text-success {
  color: var(--duet-success-ink) !important;
}

.duet-portal .has-text-warning {
  color: var(--duet-warning-ink) !important;
}

.duet-portal .dp-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.duet-portal .dp-btn.is-loading::after {
  content: "";
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border: 2px solid var(--duet-blue-ink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: dp-spin .7s linear infinite;
}

.duet-portal .dropdown-content {
  padding: 6px;
  background-color: var(--duet-surface-solid);
  border: 1px solid var(--duet-stroke-strong);
  border-radius: var(--duet-r-md);
  box-shadow: var(--duet-shadow);
}

/* The members table's row menu (enterprise-members.html) sits in a DataTables cell. That cell
   sets box-sizing: content-box, which everything inside inherits through Bulma's reset, so
   Bulma's width: 100% items came out wider than the menu by their padding; and as a .dp-num
   cell it right-aligns, which Bulma's items inherit. Together they pushed the labels past the
   menu's right edge. */
.duet-portal .dropdown-menu {
  text-align: left;
}

.duet-portal .dropdown-menu,
.duet-portal .dropdown-menu * {
  box-sizing: border-box;
}

/* The account menu's items (.dp-menu a), in place of Bulma's padding, which leaves 3rem empty
   on the right. */
.duet-portal .dropdown-item {
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--duet-text);
  font-size: 14px;
  font-weight: 600;
}

.duet-portal a.dropdown-item:hover {
  background: var(--duet-surface-2);
  color: var(--duet-text);
}

.duet-portal a.dropdown-item.has-text-danger:hover {
  background: var(--duet-danger-soft);
}

.duet-portal .dropdown-divider {
  margin: 6px 0;
  background: var(--duet-stroke);
}

/* Out-of-scope pages that still use Bulma's type and boxes get the family resemblance. */
.duet-portal .title {
  color: var(--duet-text);
  font-family: var(--duet-heading);
  letter-spacing: -.02em;
}

.duet-portal .subtitle {
  color: var(--duet-muted);
}

.duet-portal .box {
  border: 1px solid var(--duet-stroke);
  border-radius: var(--duet-r-lg);
  box-shadow: var(--duet-shadow-card);
}

.duet-portal .button.is-primary {
  border-color: transparent;
  background-image: var(--duet-cta-grad);
  color: #fff;
}

/* ---------------------------------------------------------- DataTables */

.duet-portal .dataTables_wrapper {
  font-size: 14.5px;
}

.duet-portal .dataTables_wrapper .dataTables_filter input,
.duet-portal .dataTables_wrapper .dataTables_length select {
  height: 38px;
  border: 1px solid var(--duet-stroke-strong);
  border-radius: 10px;
  background: var(--duet-surface-solid);
  box-shadow: none;
  color: var(--duet-text);
  font-size: 14px;
}

.duet-portal .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--duet-accent);
  box-shadow: 0 0 0 3px rgba(92, 152, 222, .28);
}

/* DataTables' Bulma layout gives the length menu and the search box half the row each (and the
   info line and the pages below the table). In a narrow card, like the pending list in the side
   column of enterprise-invitations.html, half is less than the search box needs and it ran out
   of the card. Each now takes the width it needs and the second drops to a line of its own when
   the two don't fit; the search field shrinks if even that line is too narrow. */
.duet-portal .dataTables_wrapper > .columns > .column.is-half {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.duet-portal .dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.duet-portal .dataTables_wrapper .dataTables_filter input {
  min-width: 0;
}

/* The space between the length menu and the search box once they are on separate lines; on
   one line the row's negative margin cancels it. */
.duet-portal .dataTables_wrapper > .columns {
  margin-top: -8px;
}

.duet-portal .dataTables_wrapper .dataTables_length,
.duet-portal .dataTables_wrapper .dataTables_filter {
  margin-top: 8px;
}

.duet-portal .dataTables_wrapper .dataTables_info {
  color: var(--duet-muted);
  font-size: 13.5px;
}

.duet-portal .dataTables_wrapper .pagination-link,
.duet-portal .dataTables_wrapper .pagination-previous,
.duet-portal .dataTables_wrapper .pagination-next {
  border-color: var(--duet-stroke);
  border-radius: 10px;
  background-color: var(--duet-surface-solid);
  color: var(--duet-text);
  font-size: 14px;
  font-weight: 700;
}

.duet-portal .dataTables_wrapper :is(.pagination-link, .pagination-previous, .pagination-next):is([disabled], .is-disabled) {
  border-color: var(--duet-stroke);
  background-color: transparent;
  box-shadow: none;
  color: var(--duet-faint);
  opacity: 1;
}

.duet-portal .dataTables_wrapper .pagination-link.is-current {
  border-color: var(--duet-blue-ink);
  background: var(--duet-blue-ink);
  color: var(--duet-surface-solid);
}

.duet-portal table.dataTable thead th,
.duet-portal table.dataTable thead td {
  border-bottom: 1px solid var(--duet-stroke);
}

.duet-portal table.dataTable.no-footer {
  border-bottom: 0;
}

/* --------------------------------------------------------------- pages */

.dp-thanks {
  margin-bottom: 24px;
}

.dp-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.duet-portal .dp-dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 22px 22px 20px;
  border: 1px solid var(--duet-stroke);
  border-radius: var(--duet-r-lg);
  background: var(--duet-surface);
  box-shadow: var(--duet-shadow-card);
  color: var(--duet-text);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.duet-portal .dp-dl-card:hover {
  border-color: var(--duet-stroke-strong);
  box-shadow: var(--duet-shadow);
  color: var(--duet-text);
}

.dp-dl-card .dp-tile {
  margin-bottom: 16px;
}

.dp-dl-card__name {
  font-family: var(--duet-heading);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.dp-dl-card__meta {
  color: var(--duet-muted);
  font-size: 14px;
}

.dp-dl-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--duet-blue-ink);
  font-size: 14.5px;
  font-weight: 800;
}

.dp-dl-card__cta .dp-ic {
  width: 17px;
  height: 17px;
}

/* The plans page's "popular" card: a gradient hairline and the blue shadow. */
.duet-portal .dp-dl-card.is-recommended {
  padding: 21px 21px 19px;
  border: 2px solid transparent;
  background: linear-gradient(var(--duet-surface-solid), var(--duet-surface-solid)) padding-box, var(--duet-blue-line) border-box;
  box-shadow: var(--duet-shadow-pop);
}

.dp-dl-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
}

.dp-dl-card__badge[hidden] {
  display: none;
}

.dp-download-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  margin-top: 16px;
}

.dp-qr-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dp-qr-card img {
  flex: none;
  width: 112px;
  height: 112px;
  padding: 8px;
  border: 1px solid var(--duet-stroke);
  border-radius: 14px;
  background: #fff;
  image-rendering: pixelated;
}

.dp-legacy {
  display: flex;
  align-items: center;
  gap: 16px;
  border-style: dashed;
}

.dp-legacy .dp-tile {
  background: var(--duet-surface-2);
  color: var(--duet-muted);
}

@media (max-width: 720px) {
  .dp-qr-card {
    display: none;
  }
}

.dp-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.dp-device {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

.dp-device__text {
  flex: 1;
  min-width: 0;
}

.dp-device__name {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-device__meta {
  overflow: hidden;
  color: var(--duet-muted);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-account-tabs {
  margin-bottom: 20px;
}

.dp-card__body {
  margin-top: 14px;
}

.dp-card__note {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--duet-stroke);
  color: var(--duet-muted);
  font-size: 14px;
}

.dp-card__status {
  margin-top: 14px;
}

.dp-card__status[hidden] {
  display: none;
}

.dp-notice--flash {
  margin-bottom: 16px;
}

.dp-dl > dd .dp-badge {
  margin-left: 8px;
}

.dp-row__text > span {
  display: block;
}

label.dp-row__text {
  cursor: pointer;
}

/* The danger zone: closed until asked for. */
.dp-danger {
  padding: 0;
}

.dp-danger > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  list-style: none;
  cursor: pointer;
}

.dp-danger > summary::-webkit-details-marker {
  display: none;
}

.dp-danger__text {
  display: grid;
  gap: 2px;
}

.dp-danger__caret {
  color: var(--duet-muted);
  transition: transform .2s ease;
}

.dp-danger[open] {
  border-color: rgba(179, 38, 30, .25);
}

.dp-danger[open] .dp-danger__caret {
  transform: rotate(180deg);
}

.dp-danger__body {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 0 24px 22px;
  font-size: 14.5px;
}

.dp-danger__body p {
  color: var(--duet-muted);
}

.dp-page-notice {
  margin-bottom: 20px;
}

.dp-nowrap {
  white-space: nowrap;
}

/* Text with no spaces, like an email address, wraps instead of running out of its box. It has
   to be anywhere, not break-word: only anywhere lets a table column narrower than the text. */
.dp-break {
  overflow-wrap: anywhere;
}

/* A plan or license: what it is, its state, the dates that matter, what you can do. */
.dp-plan__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.dp-plan__title {
  flex: 1;
  min-width: 0;
}

.dp-plan__name {
  font-family: var(--duet-heading);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.dp-plan .dp-dl {
  margin-top: 10px;
}

.dp-plan__discount {
  margin-top: 14px;
}

.dp-plan__note {
  flex: 1 1 260px;
  color: var(--duet-muted);
  font-size: 14px;
}

.dp-price {
  font-variant-numeric: tabular-nums;
}

.dp-plan .pu-quiet-link,
.dp-quiet-action .pu-quiet-link {
  margin-top: 0;
}

/* billing-upgrade-cta colours this link with its own light-only grey. */
.dp-plan .pu-quiet-link,
.dp-plan .pu-quiet-link:hover {
  color: var(--duet-muted);
}

.dp-plan__cancel {
  margin-left: auto;
  font-size: 14px;
}

.dp-receipts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.dp-quiet-action {
  color: var(--duet-muted);
  font-size: 14px;
}

.duet-portal .dp-quiet-action a {
  color: var(--duet-muted);
  text-decoration: underline;
}

.dp-help-card {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.dp-help-card .dp-tile {
  margin-bottom: 4px;
}

.dp-help-card .dp-btn {
  margin-top: 8px;
}

.dp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dp-checklist {
  display: grid;
  gap: 10px;
  font-size: 14.5px;
}

.dp-checklist li {
  position: relative;
  padding-left: 28px;
}

.dp-checklist li::before,
.dp-checklist li::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
}

.dp-checklist li::before {
  border-radius: 50%;
  background: var(--duet-blue-soft);
}

/* The tick is a mask over the ink colour, so it follows the theme. */
.dp-checklist li::after {
  background: var(--duet-blue-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.dp-license__actions {
  margin-top: 16px;
}

.dp-team-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.dp-request-status:empty {
  display: none;
}

.dp-request-status {
  font-size: 14px;
  font-weight: 600;
}

.dp-linklist {
  display: grid;
}

.duet-portal .dp-linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--duet-stroke);
  color: var(--duet-text);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.dp-linklist li:first-child a {
  border-top: 0;
}

.duet-portal .dp-linklist a:hover {
  color: var(--duet-blue-ink);
}

.dp-linklist .dp-ic {
  width: 16px;
  height: 16px;
  color: var(--duet-muted);
}

/* A card that is mostly a table: the table runs to the card's edges. */
.dp-card--table {
  padding: 20px 0 8px;
}

.dp-card--table > .dp-card__title {
  padding: 0 24px 12px;
}

.dp-card--table > .dp-card__sub {
  padding: 0 24px 16px;
}

.dp-card--table .dataTables_wrapper {
  padding: 0 20px;
}

.dp-card--table > .dp-table,
.dp-card--table .dataTables_wrapper .dp-table {
  margin: 4px 0 8px;
}

.dp-card--table .dp-table th:first-child,
.dp-card--table .dp-table td:first-child {
  padding-left: 24px;
}

.dp-card--table .dataTables_wrapper .dp-table th:first-child,
.dp-card--table .dataTables_wrapper .dp-table td:first-child {
  padding-left: 4px;
}

.dp-you {
  margin-left: 6px;
}

.dp-row-menu {
  width: 34px;
  height: 34px;
  font-size: 18px;
  line-height: 1;
  color: var(--duet-muted);
}

.dp-invite-status:empty,
.dp-invite-status > div:empty {
  display: none;
}

.dp-invite-status {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* One line per address after a send (enterprise-invitations.html): done, a note, or a
   problem. */
.dp-invite-results {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.dp-invite-results .is-ok {
  color: var(--duet-success-ink);
}

.dp-invite-results .is-note {
  color: var(--duet-text);
}

.dp-invite-results .is-problem {
  color: var(--duet-danger-ink);
}

/* Exact timestamps sit in a tooltip; the browser's dotted underline would make every date
   look like a link. */
.dp-table abbr[title] {
  border-bottom: 0;
  text-decoration: none;
  cursor: help;
}

/* ---------------------------------------------------- navigation in flight

   Portal pages are rendered on the server, and some wait on Stripe, so a click can take a
   moment to land. While one is loading (html.dp-navigating, set by the shell script in
   footer.html): a bar runs under the top bar, the clicked link shows a spinner, and the rest of
   the menus are disabled so a second click can't start a second load. */
html.dp-navigating .dp-topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--duet-accent) 35%, var(--duet-blue-ink) 65%, transparent) no-repeat;
  background-size: 35% 100%;
  animation: dp-progress 1.1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dp-progress {
  from { background-position: -45% 0; }
  to { background-position: 145% 0; }
}

html.dp-navigating :is(.dp-nav__item, .dp-menu a, .dp-seg > a):not(.is-pending) {
  opacity: .45;
  pointer-events: none;
}

html.dp-navigating,
html.dp-navigating a {
  cursor: progress;
}

/* The clicked item takes the selected look at once, so the click visibly registered. */
.duet-portal .dp-nav__item.is-pending {
  background: var(--dp-nav-current);
  color: var(--duet-text);
}

.dp-seg > a.is-pending {
  background: var(--duet-seg-active);
  color: var(--duet-text);
}

.dp-nav__item.is-pending::after,
.dp-menu a.is-pending::after,
.dp-btn.is-pending::before,
.pu-upgrade-cta.is-pending::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dp-spin .7s linear infinite;
}

.dp-nav__item.is-pending::after,
.dp-menu a.is-pending::after {
  margin-left: auto;
}

.dp-btn.is-pending > svg {
  display: none;
}

.pu-upgrade-cta.is-pending::before {
  margin-right: 8px;
}

@media (prefers-reduced-motion: reduce) {
  html.dp-navigating .dp-topbar::after {
    background: var(--duet-accent);
    opacity: .6;
    animation: none;
  }
}