/* stage-68-top-dock-add-polish */
.app-shell {
  --focus-composition-top-date: minmax(252px, 280px);
  --focus-topdock-height: clamp(74px, 5.55vw, 88px);
  --focus-topdock-radius: 28px;
  --focus-topdock-gap: clamp(14px, 1.2vw, 20px);
  --focus-topdock-add-width: minmax(160px, 184px);
  --focus-topdock-quote-min: 380px;
  --focus-topdock-control: 42px;
  --focus-topdock-icon-size: 42px;
}

.top-actions {
  gap: var(--focus-topdock-gap) !important;
  align-items: stretch !important;
  grid-template-columns:
    var(--focus-composition-top-date, minmax(204px, 238px))
    minmax(var(--focus-topdock-quote-min), 1fr)
    var(--focus-composition-top-add, var(--focus-topdock-add-width)) !important;
}

.top-actions :where(.current-date, .quote-dock, .add-menu-wrap) {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--focus-topdock-height) !important;
  border-radius: var(--focus-topdock-radius) !important;
}

.current-date {
  display: grid !important;
  align-content: center;
  min-height: var(--focus-topdock-height) !important;
  padding:
    clamp(14px, 1.1vw, 18px)
    clamp(16px, 1.25vw, 20px)
    clamp(14px, 1.1vw, 18px)
    calc(var(--focus-topdock-icon-size) + clamp(22px, 1.65vw, 28px)) !important;
  color: color-mix(in srgb, var(--text-primary, #2f2a26) 92%, var(--primary, #5678f5) 8%) !important;
  font-size: clamp(0.92rem, 0.36vw + 0.84rem, 1rem) !important;
  font-weight: 660 !important;
  line-height: 1.24 !important;
}

.current-date::before {
  left: clamp(12px, 1.05vw, 16px) !important;
  width: var(--focus-topdock-icon-size) !important;
  height: var(--focus-topdock-icon-size) !important;
  border-radius: 16px !important;
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--primary, #5678f5) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent) !important;
}

.quote-dock {
  position: relative;
  display: grid !important;
  align-items: center;
  min-height: var(--focus-topdock-height) !important;
  grid-template-columns: var(--focus-topdock-control) minmax(0, 1fr) var(--focus-topdock-control) !important;
  gap: clamp(10px, 0.9vw, 14px) !important;
  padding: clamp(12px, 1vw, 16px) clamp(14px, 1.1vw, 18px) !important;
  overflow: hidden;
}

.quote-dock::after {
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary, #5678f5) 12%, transparent), transparent 12rem),
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 9%, transparent), transparent 11rem);
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.quote-body {
  display: grid !important;
  grid-template-rows: minmax(30px, auto) auto !important;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 5px !important;
  text-align: center;
}

.quote-body > strong {
  display: none !important;
}

.quote-window {
  display: grid;
  width: min(100%, 760px) !important;
  min-height: 36px;
  place-items: center;
}

.quote-window p {
  max-width: 100%;
  margin: 0 !important;
  overflow: hidden;
  color: var(--text-primary, #2f2a26) !important;
  font-size: clamp(0.9rem, 0.32vw + 0.86rem, 1rem) !important;
  font-weight: 610 !important;
  line-height: 1.28 !important;
  text-align: center;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quote-nav {
  width: var(--focus-topdock-control) !important;
  height: var(--focus-topdock-control) !important;
  min-width: var(--focus-topdock-control) !important;
  border-radius: 999px !important;
}

.quote-nav span {
  display: grid;
  place-items: center;
  transform: translateY(-1px);
}

.quote-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 8px;
  gap: 5px !important;
}

.top-add-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--focus-topdock-height) !important;
  height: auto !important;
  border-radius: var(--focus-topdock-radius) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.38), transparent 7.2rem),
    linear-gradient(135deg,
      color-mix(in srgb, var(--focus-accent-terracotta, #c56a4b) 66%, #fff 16%),
      color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 48%, var(--primary, #5678f5) 14%)) !important;
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--focus-accent-terracotta, #c56a4b) 21%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent) !important;
}

.top-add-button > span:first-child {
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  place-items: center;
  border-radius: 999px !important;
  background: color-mix(in srgb, #fff 28%, transparent) !important;
}

.top-add-button > span:last-child {
  white-space: nowrap;
}

.add-menu-wrap {
  position: relative;
  display: grid !important;
  align-items: stretch !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.add-menu {
  top: calc(100% + 12px);
  border-radius: 24px !important;
}

.dashboard-mobile-date {
  display: none !important;
}

@media (max-width: 1180px) {
  .app-shell {
    --focus-topdock-height: clamp(70px, 6vw, 84px);
    --focus-topdock-quote-min: 300px;
  }
}

@media (max-width: 900px) {
  .app-shell {
    --focus-topdock-quote-min: 0px;
  }

  .top-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 760px) {
  .app-shell {
    --focus-topdock-height: auto;
    --focus-topdock-radius: 24px;
    --focus-topdock-control: 36px;
    --focus-topdock-icon-size: 38px;
  }

  .top-actions {
    gap: 11px !important;
  }

  .top-actions :where(.current-date, .quote-dock, .add-menu-wrap) {
    min-height: auto !important;
  }

  .current-date {
    min-height: 3.65rem !important;
    padding-left: calc(var(--focus-topdock-icon-size) + 20px) !important;
  }

  .quote-dock {
    min-height: 5.15rem !important;
    grid-template-columns: var(--focus-topdock-control) minmax(0, 1fr) var(--focus-topdock-control) !important;
    padding: 0.78rem !important;
  }

  .quote-window {
    min-height: 32px;
  }

  .quote-window p {
    font-size: 0.86rem !important;
    line-height: 1.24 !important;
  }

  .top-add-button {
    min-height: 3.5rem !important;
    border-radius: 22px !important;
  }

  .dashboard-main {
    margin-top: calc(var(--focus-mobile-nav-height, 74px) + 32px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-actions,
  .current-date,
  .quote-dock,
  .quote-nav,
  .quote-dot,
  .top-add-button,
  .add-menu {
    transition: none !important;
  }

  .quote-nav:hover,
  .quote-nav:focus-visible,
  .top-add-button:hover,
  .top-add-button:focus-visible {
    transform: none !important;
  }
}