/* File: src/styles/styles.css */

/* M3: aligned host-relative selection rail. The actual nested DayEditor is
   still mounted directly under every Group header; only its horizontal inset
   changes. Each level adds left indentation, never loses the right endpoint. */
.day-editor .de-checklist { padding-right: 0 !important; margin-right: 0 !important; }
.de-checklist-body--native-editor {
  padding-left: 16px !important;
  padding-right: 0 !important;
  margin-right: -1px !important; /* compensate only the containing border, never nesting depth */
  min-width: 0;
  overflow: visible !important;
}

/* =========================================================
   SEARCH MODE — native app-state projection
   ========================================================= */

.kronikal-search-highlight,
.de-search-highlight,
.taskrow-search-highlight {
  display: inline;
  margin: 0;
  padding: 0 1px;
  border: 0;
  border-radius: 2px;
  background: rgba(247, 220, 114, 0.55);
  color: inherit;
  font: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.de-search-input-hidden,
.taskrow-search-input-hidden,
.bd-search-input-hidden {
  color: transparent !important;
  caret-color: transparent !important;
  text-shadow: none !important;
}

/* A matching row uses the highlighted preview until the user edits it.
   On focus, reveal the native text/caret so insertion position is obvious. */
.de-search-input-hidden:focus,
.taskrow-search-input-hidden:focus,
.bd-search-input-hidden:focus {
  color: inherit !important;
  caret-color: currentColor !important;
}

/* Search contextual reveal: parents with matching descendants expose one
   ephemeral “Show all” affordance without touching saved collapse state. */
.search-show-all-parent,
.task-row > .row-content {
  position: relative;
}

.search-show-all-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 120;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(89, 98, 113, 0.13);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(247, 248, 251, 0.96);
  box-shadow: 0 2px 8px rgba(30, 41, 59, 0.08);
  color: #687386;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 110ms ease, background-color 110ms ease;
}

.search-show-all-btn:hover {
  background: rgba(239, 242, 248, 0.99);
}

@media (hover: hover) and (pointer: fine) {
  .search-show-all-parent:hover > .search-show-all-btn,
  .search-show-all-parent:hover .search-show-all-btn--timeline-section,
  .task-row > .row-content:hover > .search-show-all-btn,
  .backlog-drawer .bd-row:hover > .search-show-all-btn,
  .backlog-drawer .bd-group-header:hover > .search-show-all-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

.search-show-all-mobile-row {
  display: none;
}

@media (max-width: 820px) {
  .search-show-all-btn {
    display: none !important;
  }

  .search-show-all-mobile-row {
    display: flex;
    width: 100%;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 3px 8px 5px;
  }

  .search-show-all-mobile-row > button {
    border: 1px solid rgba(89, 98, 113, 0.13);
    border-radius: 999px;
    padding: 5px 12px;
    background: rgba(247, 248, 251, 0.98);
    color: #687386;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
  }
}

.de-line-editor-shell:focus-within .de-search-line-preview,
.de-table-cell-shell:focus-within .de-search-cell-preview,
.taskrow-title-input-wrap:focus-within .taskrow-search-title-preview,
.bd-task-input-holder:focus-within .bd-search-row-preview,
.backlog-drawer .bd-task-editor-slot:focus-within .bd-search-row-preview,
.bd-group-title-wrap:focus-within .bd-search-group-title-preview {
  opacity: 0;
}

.de-divider-title-shell {
  position: relative;
  width: calc(100% - 168px);
  min-width: 0;
  height: 24px;
}

.de-divider-title-shell > .de-divider-title {
  width: 100% !important;
  height: 24px !important;
  line-height: 24px !important;
}

.de-divider-search-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  padding: 4px 8px 4px 4px;
  overflow: hidden;
  color: #a7a7a7;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  height: 26px;
}

.de-divider-title-shell:focus-within .de-divider-search-preview {
  opacity: 0;
}

.de-line-editor-shell {
  position: relative;
}

.de-search-line-preview {
  position: absolute;
  z-index: 2;
  inset: 0;
  min-width: 0;
  padding: 2px 0 0 0;
  overflow: hidden;
  color: #000;
  font-size: 14px;
  line-height: 1.15;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.de-line-editor-shell--hanging-taskee .de-search-line-preview {
  text-indent: var(--de-line-taskee-indent, 0px);
}

.de-search-cell-preview {
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  min-width: 0;
  padding: 3px;
  overflow: hidden;
  color: #000;
  font-size: 13px;
  line-height: 1.4;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.de-table-cell-shell.has-taskee-pill > .de-search-cell-preview {
  text-indent: var(--de-table-taskee-indent, 0px);
}

.de-table-cell-shell.has-table-time-pill > .de-search-cell-preview {
  width: min(100%, calc(var(--de-table-time-pill-width) + var(--de-table-taskee-indent, 0px)));
  max-width: 100%;
  padding: 3px 22px 3px 6px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.taskrow-title-input-wrap {
  position: relative;
}

.taskrow-search-title-preview {
  position: absolute;
  z-index: 2;
  inset: -2px 0;
  box-sizing: border-box;
  min-width: 0;
  padding: 4px 8px 4px 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  font: inherit;
  color: inherit;
}

.taskrow-title-input-wrap:has(.input.title-input.has-taskee)
.taskrow-search-title-preview {
  padding: 14px 8px 2px 7px;
}

.avail-bar.extended.lane.compress-thin
.taskrow-title-input-wrap:has(.input.title-input.has-taskee)
.taskrow-search-title-preview,
.avail-bar.emergency.lane.compress-thin
.taskrow-title-input-wrap:has(.input.title-input.has-taskee)
.taskrow-search-title-preview,
.stack-4.compress-thin
.taskrow-title-input-wrap:has(.input.title-input.has-taskee)
.taskrow-search-title-preview {
  padding-top: 12px;
}

@media (max-width: 820px) {
  .taskrow-title-input-wrap:has(.input.title-input.has-taskee)
  .taskrow-search-title-preview {
    padding-left: 20px;
  }
}

.bd-task-input-holder,
.backlog-drawer .bd-task-editor-slot,
.bd-group-title-wrap {
  position: relative;
}

.bd-search-row-preview {
  position: absolute;
  z-index: 2;
  inset: -2px 0 0 0;
  min-width: 0;
  min-height: 24px;
  padding: 7px 5px 6px 5px;
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.05;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-sizing: border-box;
}

.bd-search-group-title-preview {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  font: inherit;
  color: inherit;
}

.de-search-media-match-label {
  position: relative;
  z-index: 3;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.94);
  color: #111827;
  font-size: 12px;
  line-height: 1.25;
  pointer-events: none;
}

/* Search field shared by desktop header, mobile footer, and displaced MS state. */
.tw-search-mode-control {
  width: 100%;
  min-width: 0;
  height: 54px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  color: #fff;
}

.tw-search-mode-control.is-desktop {
  height: 50px;
}

.tw-search-mode-mode-btn {
  flex: 0 0 auto;
}

.tw-search-mode-view-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

.tw-search-mode-form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.tw-search-mode-input-shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.tw-search-mode-input-shell.has-results .tw-search-mode-input {
  padding-right: 126px;
}

.tw-search-mode-input {
  width: 100%;
  height: 36px;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 34px 0 15px;
  border: 0;
  border-radius: 999px;
  outline: none;
  box-shadow: none;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font: inherit;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  transition: background 120ms ease;
}

.tw-search-mode-input::-webkit-search-cancel-button {
  display: none;
}

.tw-search-mode-input::placeholder {
  color: rgba(255,255,255,0.62);
}

.tw-search-mode-input:hover {
  background: rgba(255,255,255,0.15);
}

.tw-search-mode-input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
  background: rgba(255,255,255,0.20);
}

.tw-search-mode-result-count {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.88);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.tw-search-mode-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  padding: 0px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 20px;
  line-height: 22px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.tw-search-mode-control.is-desktop .tw-search-mode-clear {
  width: auto;
  min-width: 44px;
  height: 22px;
  padding: 0 3px;
  font-size: 11px;
  font-weight: 650;
  line-height: 22px;
}

.tw-search-mode-control.is-desktop .tw-search-mode-result-count {
  right: 57px;
}

.tw-search-mode-clear:hover {
  background: #fff;
  color: #2f74f5;
}

.tw-search-mode-submit {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  display: inline-flex;
  margin-right: 8px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.13);
  color: #fff;
  cursor: pointer;
}

.tw-search-mode-submit:hover:not(:disabled) {
  background: rgba(255,255,255,0.2);
}

.tw-search-mode-submit:disabled {
  opacity: 0.38;
  cursor: default;
}

.tw-search-mode-submit.is-exit {
  width: 34px;
  min-width: 34px;
  height: 34px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.15);
  border: 0px solid transparent;
}

.tw-search-mode-exit-glyph {
  display: inline-block;
  transform: translateY(-1px);
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.search-hit-count-circle,
.bdmp-search-hit-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  box-sizing: border-box;
  border: 1px solid rgba(92, 75, 0, 0.12);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7dc72;
  color: #4b3b00;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  bottom: 0px!important;
}

.bdmp-launcher-search-count {
  position: absolute;
  z-index: 4;
  bottom: -5px;
  left: -5px;
  border: 2px solid #fff;
}

.bdmp-desktop-launcher.is-reverse .bdmp-launcher-search-count,
.bdmp-mobile-launcher .bdmp-launcher-search-count {
  left: auto;
  right: -5px;
}

.bdmp-mobile-launcher:has(.bdmp-launcher-search-count) {
  overflow: visible;
}

.timeline-search-boundary-jump {
  display: block;
  width: min(420px, calc(100% - 32px));
  margin: 10px auto;
  padding: 7px 12px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 999px;
  background: rgba(37,99,235,0.07);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.timeline-search-boundary-jump:hover {
  background: rgba(37,99,235,0.12);
}

.timeline-year-separator {
  width: 100%;
  box-sizing: border-box;
  padding: 32px 32px 12px 16px;
  background: transparent;
  margin-bottom: 30px;
}

.timeline-year-separator-line {
  width: 100%;
  height: 1px;
  background: rgba(100,116,139,0.28);
}

.timeline-year-separator-label {
  margin-top: 5px;
  color: rgba(71,85,105,0.62);
  font-size: 28px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.calendar-search-hit-icons {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}

.calendar-search-hit-icon {
  min-width: 23px;
  height: 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calendar-search-hit-icon .search-hit-count-circle {
  min-width: 17px;
  width: 17px;
  height: 17px;
  padding: 0;
  font-size: 9px;
}

.calendar-search-summary-popup {
  position: fixed;
  z-index: 12050;
  box-sizing: border-box;
  padding: 14px 16px 15px;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.98);
  color: #111827;
  box-shadow: 0 12px 34px rgba(15,23,42,0.22);
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
}

.calendar-search-summary-title {
  display: grid;
  gap: 2px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid lightgray;
}

.calendar-search-summary-kicker {
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.calendar-search-summary-title strong {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.calendar-search-summary-counts {
  display: grid;
  gap: 6px;
  width: min(220px, 100%);
  margin: 12px auto 11px;
}

.calendar-search-summary-row {
  display: flex;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
}

.timeline-search-load-more-pill {
  background: white;
  border-radius:999px;
  overflow: hidden;
  box-shadow: 0 8px 14px rgba(0,0,0,0.24); 
  padding: 10px 20px;
  opacity: .8;
}

.timeline-search-load-more-pill:hover {
  opacity: 1;
}

.mobile-whitebar-top-of-timeline {
  display: none;
}

@media (max-width: 820px) {
    .mobile-whitebar-top-of-timeline {
      display: block;
      height: 37px;
      width: 100%;
      background: #fff;
    }
}

.calendar-search-summary-popup > em {
  display: block;
  white-space: nowrap;
  text-align: center;
  color: #475569;
  font-size: 10px;
  line-height: 1.25;
}

@media (min-width: 821px) {
  .edward-productivity-tool.search-mode-active .headnav .left,
  .edward-productivity-tool.search-mode-active .headnav .right,
  .edward-productivity-tool.search-mode-active .projects-btn-header-desktop {
    display: none !important;
  }

  .edward-productivity-tool.search-mode-active .headnav .center {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .edward-productivity-tool.search-mode-active .desktop-control-center-anchor {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 100%;
  }

  .edward-productivity-tool.search-mode-active
  .desktop-control-center-anchor
  .adaptive-control-center.tw-search-desktop-header {
    display: flex !important;
    width: 100%;
    min-width: 0;
  }

  .tw-search-desktop-header .tw-search-mode-control {
    width: 100%;
  }

  /* Root-level ACC is intentionally desktop-hidden; suppress its duplicate displaced bar too. */
  .edward-productivity-tool > .tw-search-displaced.is-desktop {
    display: none !important;
  }

  .desktop-control-center-anchor .tw-search-displaced.is-desktop {
    position: absolute;
    top: 115%;
    left: 0;
    right: 0;
    z-index: 9100;
    display: flex;
    min-width: 0;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6f3ff2, #3374ff);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  }

  .desktop-control-center-anchor .tw-search-displaced.is-desktop
  .tw-search-mode-control {
    width: 100%;
  }
}

@media (max-width: 820px) {
  html body .edward-productivity-tool.search-mode-active.ms-mode
  .adaptive-control-center.ms-bar {
    display: flex !important;
  }

  html body .edward-productivity-tool.search-mode-active
  .adaptive-control-center.tw-search-mobile-footer {
    display: flex !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 14px 0 0 !important;
    padding: 0 6px !important;
    border-radius: 18px !important;
    background: linear-gradient(90deg, #6f3ff2, #3374ff) !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.30);
  }

  .tw-search-mobile-footer .tw-search-mode-control {
    height: 54px;
  }

  .tw-search-mode-input-shell.has-results .tw-search-mode-input {
    padding-right: 96px;
  }

  .tw-search-mode-result-count {
    right: 40px;
    font-size: 10px;
  }

  .tw-search-mobile-footer .tw-search-mode-control .tw-mode-placeholder-btn,
  .tw-search-displaced.is-mobile .tw-search-mode-control .tw-mode-placeholder-btn {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  .tw-search-displaced.is-mobile {
    position: fixed;
    left: 54px;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom) + 78px);
    z-index: 9490;
    display: flex;
    min-width: 0;
    padding: 0 6px;
    border-radius: 18px;
    background: linear-gradient(90deg, #6f3ff2, #3374ff);
    box-shadow: 0 0 20px rgba(0,0,0,0.26);
  }

  .tw-search-displaced.is-mobile .tw-search-mode-control {
    height: 54px;
  }

  .tw-search-displaced.is-mobile.has-brain-dump {
    left: 70px;
    right: 15px;
    bottom: calc(env(safe-area-inset-bottom) + 65px);
  }

  .calendar-search-hit-icons {
    left: 4px;
    right: 4px;
    bottom: 5px;
    gap: 2px;
  }

  .calendar-search-hit-icon {
    min-width: 20px;
    height: 18px;
    padding: 0 3px;
    font-size: 9px;
  }
}
.de-checklist-body--native-editor > .day-editor {
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
  box-sizing: border-box;
  overflow: visible !important;
  transform: none !important; /* the root may scale; do not scale again at every level */
}
/* The Group ring sits ON the top border, not outside its rounded right corner. */
.day-editor .de-checklist > .de-ms-toggle,
.day-editor--day-notes .de-checklist > .de-ms-toggle {
  top: 0 !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  right: var(--de-selection-rail-right) !important;
  z-index: 24 !important;
}
@media (max-width:820px) {
  .day-editor.is-mobile .de-checklist > .de-ms-toggle {
    right: calc(var(--de-selection-rail-right) - 11px) !important;
  }
}
/* Only the native table's cell contents scroll. Its select circle and burger
   stay in the row's host-relative right rail, outside this scroll container. */
.de-checklist-body--native-editor .de-row--cols { overflow: visible !important; }
.de-checklist-body--native-editor .de-row--cols .de-colC,
.de-checklist-body--native-editor .de-row--cols .de-colBC {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.de-checklist-body--native-editor .de-row--cols .de-cells {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 375px !important;
  width: max(100%, 375px) !important;
}
.de-checklist-body--native-editor .de-row--cols .de-cell {
  overflow-wrap: normal;
  word-break: normal;
}
.de-checklist-body--native-editor .de-row--cols .de-cell--col1 {
  flex: 0 0 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
}
.de-checklist-body--native-editor .de-row--cols .de-cell--col2 {
  flex: 0 0 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
}
.de-checklist-body--native-editor .de-row--cols .de-cell--col3 {
  flex: 1 0 145px !important;
  min-width: 145px !important;
}



/* Post-M3: a dedicated, HOST-relative selection rail, distinct from the burger.
   The Group's right corner remains visible beyond its top-border circle. */
.day-editor { --de-selection-rail-right: 18px; }
.day-editor .de-row > .de-ms-toggle,
.day-editor .de-divider > .de-ms-toggle,
.day-editor .de-checklist > .de-ms-toggle,
.day-editor .de-taskrow > .de-ms-toggle,
.day-editor .de-ms-toggle {
  left: auto !important;
  right: var(--de-selection-rail-right) !important;
}

/* Align media multi-select circles with ordinary deRow circles.
   Media rows use a narrower layout, so compensate without moving
   the media cards or changing the existing vertical positioning. */
.day-editor .de-row.de-row--image > .de-ms-toggle {
  translate: 14px 0;
}
.day-editor .de-checklist > .de-ms-toggle {
  top: 0 !important;
  transform: translateY(-50%) !important;
}
@media (max-width: 820px) {
  .day-editor.is-mobile .de-ms-toggle {
    right: calc(var(--de-selection-rail-right) - 11px) !important;
  }
}
/* Never show burgers anywhere below an active MS root—even for focused
   but unselected rows. Hiding (rather than opacity alone) also blocks clicks
   and tab focus without disabling the full selected-row drag surface. */
.day-editor.de-multi-select-active :is(
  .de-row-utility, .de-row-menu-anchor--handle, .de-colA-handle,
  .de-checklist-header-handle, .de-checklist-menu-anchor,
  .de-checklist-handle, .de-divider-menu-anchor,
  .de-colA-btn:not(.de-empty-row-plus)
) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* ONE visible parent shadow. The native nested DayEditor is still mounted,
   so pending content publication and prior expanded/collapsed preference survive.
   It becomes visible again when this Group is deselected. */
.day-editor.de-multi-select-active .de-checklist.selected {
  box-shadow: 0 2px 10px rgba(15,23,42,.12);
}
.day-editor .de-checklist.de-checklist--ms-temporary-collapse
  > .de-checklist-body--native-editor {
  display: none !important;
}
.day-editor .de-checklist.de-checklist--ms-temporary-collapse
  > .de-checklist-header .de-checklist-toggle {
  opacity: .45 !important;
  pointer-events: none !important;
}
/* The hidden body includes the inherited child circles and all secondary
   shadows. Explicit descendant IDs remain untouched in root MS state. */
/* Selected text is not directly editable/clickable until deselected; the
   surrounding selected row and its top-level rail remain available for DnD. */
.day-editor.de-multi-select-active .selected :is(input, textarea, [contenteditable="true"]) {
  pointer-events: none !important;
}
.day-editor.de-multi-select-active .de-ms-toggle-ring { box-shadow: none !important; }
/* The first and ONLY empty starter stays legible even without focus;
   another substantive item removes its React marker immediately. */
.day-editor .de-row.de-first-only-empty-prompt { opacity: 1 !important; }
.day-editor .de-row.de-first-only-empty-prompt .de-empty-row-prompt {
  opacity: 1 !important;
}
/* Keep native table overflow LOCAL to the table, not the Group or its MS rail. */
.de-checklist-body--native-editor .de-row--cols > .de-colC,
.de-checklist-body--native-editor .de-row--cols > .de-colBC {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.de-totals-discovery-toast {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 8px;
  z-index: 12;
  max-width: min(370px, 92%);
  padding: 7px 10px;
  border-radius: 8px;
  background: #202b40;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  box-shadow: 0 3px 11px rgba(0,0,0,.14);
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms ease;
}
.de-totals-discovery-toast.is-fading {
  opacity: 0;
}
/* Only one active line: while the native Notes editor displays its internal
   indicator, suppress the competing Queue row-insertion paint. */
.bd-scroll:has(.de-external-queue-drop-indicator) .bd-queue-insertion-line--row {
  opacity: 0 !important;
}
/* Adaptive MS collision always docks to bottom-RIGHT, including mobile. */
@media (max-width: 820px) {
  .timeline-view-switcher-shell.is-ms-docked {
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: 12px !important;
  }
}

/* Final native nested-editor utility geometry: the focused burger occupies
   the same INSIDE edge position as its MS circle, but never at the same time.
   The clock moves left with it; every Group header orders its controls as
   clock > chevron > burger. When the burger is absent, chevron stays right. */
.day-editor .de-row--utility-right .de-row-utility {
  right: 18px !important;
}
.day-editor .de-row--utility-right .de-line-time-slot {
  margin-right: 29px !important;
}
.day-editor .de-checklist-header-utilities {
  margin-right: 16px !important;
  gap: 3px;
}
.day-editor .de-checklist-header-utilities > .de-checklist-time-slot {
  order: 0;
}
.day-editor .de-checklist-header-utilities > .de-checklist-toggle {
  order: 1;
}
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor {
  order: 2;
}
/* Group header circles were below the actual title/chevron center. */
.day-editor .de-checklist > .de-ms-toggle {
  top: 12px !important;
  transform: translateY(-50%) !important;
}
/* Unlike ordinary table rows, the Totals row has a distinct top rule and
   different vertical padding. Use its actual height to center its MS ring. */
.day-editor .de-row--totals > .de-ms-toggle {
  top: 50% !important;
  transform: translateY(-50%) !important;
}
@media (max-width: 820px) {
  /* Existing mobile selection rail is 11px nearer the right border. Match it
     for the burger, instead of forcing the desktop position on narrow panes. */
  .day-editor.is-mobile .de-row--utility-right .de-row-utility {
    right: 7px !important;
  }
  .day-editor.is-mobile .de-row--utility-right .de-line-time-slot {
    margin-right: 18px !important;
  }
  .day-editor.is-mobile .de-checklist-header-utilities {
    margin-right: 5px !important;
  }
}

/* The Group uses the SAME grip DOM as native text rows. A global button
   rule colors buttons white, so explicitly give this transparent button the
   native row-utility gray; otherwise the dots are white on white. */
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor {
  display: none;
  width: 7px;
  flex: 0 0 7px;
  justify-items: end;
  transition: width 140ms ease, flex-basis 140ms ease;
}
/* Hovering a header only reveals the quiet three-dot discovery target. */
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor.is-active,
.day-editor.is-desktop .de-checklist-header:hover > .de-checklist-header-utilities > .de-checklist-menu-anchor,
.day-editor .de-checklist.de-checklist--menu-open > .de-checklist-header > .de-checklist-header-utilities > .de-checklist-menu-anchor {
  display: grid;
}
/* Directly hovering those dots expands the slot LEFTWARD and moves the
   preceding chevron; a focused title gets the expanded slot immediately. */
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor:is(:hover, .is-active),
.day-editor .de-checklist.de-checklist--menu-open > .de-checklist-header > .de-checklist-header-utilities > .de-checklist-menu-anchor {
  width: 22px;
  flex: 0 0 22px;
}
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor > .de-checklist-header-handle {
  width: 100%;
  min-width: 0;
  height: 21px;
  padding: 0;
  color: #555 !important;
  opacity: .28 !important;
  pointer-events: auto;
}
/* Hovering the dots does NOT brighten them; title focus (is-active) or an
   open menu produces the full-opacity active burger. */
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor.is-active > .de-checklist-header-handle,
.day-editor .de-checklist.de-checklist--menu-open > .de-checklist-header > .de-checklist-header-utilities > .de-checklist-menu-anchor > .de-checklist-header-handle {
  opacity: 1 !important;
}
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor .de-row-utility-grip {
  width: 100%;
  height: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor .de-row-utility-grip-line {
  width: 3px;
  height: 2px;
  flex: 0 0 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 1;
  transition: width 140ms ease, border-radius 140ms ease;
}
/* Expand only on DIRECT handle hover/focus or title focus—not on the
   surrounding Group header hover. Expansion keeps its right edge fixed. */
.day-editor .de-checklist-header-utilities > .de-checklist-menu-anchor:is(:hover, .is-active) .de-row-utility-grip-line,
.day-editor .de-checklist.de-checklist--menu-open > .de-checklist-header > .de-checklist-header-utilities > .de-checklist-menu-anchor .de-row-utility-grip-line {
  width: 13px;
}
/* Preserve MS's original full 22px reservation (not the new 7px dot slot). */
.day-editor.de-multi-select-active .de-checklist:not(.selected) > .de-checklist-header > .de-checklist-header-utilities > .de-checklist-menu-anchor {
  display: grid !important;
  width: 22px !important;
  flex: 0 0 22px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.day-editor.de-multi-select-active .de-checklist.selected > .de-checklist-header > .de-checklist-header-utilities > .de-checklist-menu-anchor {
  display: none !important;
}
.day-editor.de-multi-select-active .de-checklist .de-checklist-menu-anchor > .de-checklist-header-handle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* The selected Group's single circle occupies the old chevron spot. Its body
   is visually collapsed during MS; don't let its disabled chevron overlap. */
.day-editor.de-multi-select-active .de-checklist.selected > .de-checklist-header > .de-checklist-header-utilities > .de-checklist-toggle {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* M2: native recursive DayEditor selection is root-owned. A selected Group
   checks descendants visually without touching their explicit selection. */
.day-editor .de-ms-toggle.is-inherited-selection,
.day-editor .de-ms-toggle.is-inherited-selection:disabled {
  display: none !important;
  cursor: not-allowed;
  pointer-events: none;
}
.day-editor .de-checklist-body--native-editor > .day-editor {
  min-width: 0;
  width: 100%;
}


:root {
  --app-brightness: 1; /* default */
}

/* apply to whole app; swap 'body' for your app container if you prefer */
body {
  transition: filter 120ms ease;
}

/* (optional) quick styles for the control */
.brightness-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.05);
}


.logo {
	height: 30px;
	}

.gdrive-container{
	border: solid 1px gray;
  	border-radius: 6px;
  	display: flex;
  	padding: 4px;
  	flex-direction: row;
  	align-items: center;
  	justify-content: space-between;
	}

.gdrive-container 
 .button {
	padding: 2px 3px;
	margin: 0px 3px;
	}

.gdrive-icons{
	height: 18px;
	margin: 0px 2px;
	}


.brightness-control .sun {
  font-size: 14px;
  line-height: 1;
  opacity: .8;
}

.brightness-control input[type="range"] {
  width: 120px;
  margin: 0 4px;
}

.brightness-control .val {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  opacity: .8;
  min-width: 36px;
  text-align: right;
}




/* ===== Reset / Base ===== */
html, body {
  margin: 0;
  Font-size: 15px;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #b7c2c6; /* your preference */
  color: #111827;
}

.version-banner {
	width: 100%;
	color: white;
	text-align: center;
	}

.version-banner.dev {
	background: #1d4ed8;
	}

.version-banner.live {
	background: green;
	}


/* Fixed column widths (tweak as you like) */
:root {
  --tr-time-w: 95px;   /* time input width */
  --tr-pill-w: 110px;   /* pill width next to time */
  --tr-right-w: 115px;  /* done + actions area */
  Background: white;
}


/* root & toolbar stretch full width */



.page-root {
  --tw-keyboard-underlay-height: 60px;
  position: relative;
  height: var(--tw-vvh, 100dvh);
  min-height: var(--tw-vvh, 100dvh);
  max-height: var(--tw-vvh, 100dvh);
  display: flex;
  flex-direction: column;
  width: auto;
  overflow: hidden;
}

.tw-keyboard-bottom-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--tw-keyboard-underlay-height, 60px);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  pointer-events: none;
  z-index: 40;
}

@media (max-width: 820px) {
  html:has(.edward-productivity-tool.tw-software-keyboard-open),
  body:has(.edward-productivity-tool.tw-software-keyboard-open) {
    background-color: #fff !important;
  }

  html body .page-root:has(
    .edward-productivity-tool.tw-software-keyboard-open
  ) {
    height: calc(
      var(--tw-vvh, 100dvh) +
      var(--tw-keyboard-underlay-height, 60px)
    ) !important;
    min-height: calc(
      var(--tw-vvh, 100dvh) +
      var(--tw-keyboard-underlay-height, 60px)
    ) !important;
    max-height: calc(
      var(--tw-vvh, 100dvh) +
      var(--tw-keyboard-underlay-height, 60px)
    ) !important;
  }
}

/* Queue → Day Notes uses the same visual system as DayEditor's move picker. */
.bd-daynotes-move-dialog {
  width: min(360px, calc(100vw - 24px));
  max-height: 82vh;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  padding: 16px;
}

.bd-daynotes-move-dialog.is-separate {
  width: min(760px, calc(100vw - 24px));
}

.bd-daynotes-move-dialog .de-ms-boot-title {
  flex: 0 0 auto;
  color: #222;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

.bd-daynotes-move-dialog .de-ms-boot-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #f1f1f1;
}

.bd-daynotes-move-dialog .de-ms-boot-tab {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #666;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}

.bd-daynotes-move-dialog .de-ms-boot-tab.is-active {
  background: #fff;
  color: #222;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.bd-daynotes-move-dialog .de-ms-boot-tab:hover {
  background: transparent;
  color: #666;
}

.bd-daynotes-move-dialog .de-ms-boot-tab.is-active:hover {
  background: #fff;
  color: #222;
}

.bd-daynotes-move-dialog .de-ms-boot-same-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bd-daynotes-move-dialog .de-ms-picker-btn {
  width: 100%;
  flex: 0 0 auto;
  white-space: nowrap;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #d7d7d7;
  background: #f7f7f7;
  padding: 0 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: #222;
}

.bd-daynotes-move-dialog .de-ms-picker-btn:hover {
  background: #eaeaea;
}

.bd-daynotes-move-dialog .de-ms-picker-btn--dark {
  border: 0;
  background: #222;
  color: #fff;
}

.bd-daynotes-move-dialog .de-ms-picker-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.bd-daynotes-move-dialog .de-ms-boot-field-label {
  margin-bottom: 5px;
  color: #777;
  font-size: 11px;
}

.bd-daynotes-move-dialog .de-ms-boot-date-input {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid #a0a0a0;
  border-radius: 10px;
  background: #fff;
  color: #222;
  font-size: 14px;
  font-family: inherit;
  font-variant-numeric: normal;
}

.bd-daynotes-move-dialog .de-ms-boot-date-input.is-missing {
  border-color: transparent;
  background: #eee;
  color: #8a8a8a;
}

.bd-daynotes-move-dialog .de-ms-boot-separate-panel {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.bd-daynotes-move-dialog .de-ms-boot-detection-summary {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  padding: 0 2px 9px;
  color: #555;
  font-size: 11px;
}

.bd-daynotes-move-dialog .de-ms-boot-detection-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.bd-daynotes-move-dialog .de-ms-boot-separate-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fafafa;
}

.bd-daynotes-move-dialog .de-ms-boot-separate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 174px;
  align-items: center;
  gap: 42px;
  padding: 10px 11px;
}

.bd-daynotes-move-dialog .de-ms-boot-separate-row + .de-ms-boot-separate-row {
  border-top: 1px solid #e8e8e8;
}

.bd-daynotes-move-dialog .de-ms-boot-row-copy {
  min-width: 0;
}

.bd-daynotes-move-dialog .de-ms-boot-row-text {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #292929;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bd-daynotes-move-dialog .de-ms-boot-row-detected-label {
  display: block;
  padding: 3px 2px 0;
  color: #45825c;
  font-size: 9px;
  line-height: 1.2;
}

.bd-daynotes-move-dialog .de-ms-boot-row-date {
  width: 174px;
  max-width: 100%;
  min-width: 0;
  justify-self: start;
}

.bd-daynotes-move-dialog .de-ms-boot-row-status {
  display: block;
  min-height: 13px;
  padding: 3px 2px 0;
  color: #8a8a8a;
  font-size: 9px;
  line-height: 1.2;
}

.bd-daynotes-move-dialog .de-ms-boot-row-status.is-detected {
  color: #45825c;
}

.bd-daynotes-move-dialog .de-ms-boot-row-status.is-multiple,
.bd-daynotes-move-dialog .de-ms-boot-row-status.is-weekday-conflict,
.bd-daynotes-move-dialog .de-ms-boot-row-status.is-cleared {
  color: #9a6a19;
}

.bd-daynotes-move-dialog .de-ms-boot-separate-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
}

.bd-daynotes-move-dialog .de-ms-boot-cancel-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  background: #fff;
  color: #444;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.bd-daynotes-move-dialog .de-ms-boot-cancel-btn:hover {
  border-color: #cfcfcf;
  background: #f4f4f4;
  color: #444;
  box-shadow: none;
}

.bd-daynotes-move-dialog .de-ms-picker-btn.de-ms-boot-all-btn {
  width: auto;
  min-width: 112px;
  height: 34px;
  padding: 0 14px;
}

.bd-daynotes-move-dialog .de-ms-picker-btn.de-ms-boot-all-btn:hover,
.bd-daynotes-move-dialog .de-ms-picker-btn--dark:not(:disabled):hover {
  background: #111;
  color: #fff;
}

.bd-daynotes-move-dialog .de-ms-picker-btn--dark:disabled:hover {
  background: #111;
  color: #fff;
  cursor: not-allowed !important;
}

@media (max-width: 620px) {
  .bd-daynotes-move-dialog.is-separate {
    height: min(82dvh, 700px);
  }

  .bd-daynotes-move-dialog .de-ms-boot-separate-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .bd-daynotes-move-dialog .de-ms-boot-row-text {
    -webkit-line-clamp: 3;
  }
}

.toolbar {
	width: auto;
	margin: 10px 10px 0px 10px;
	padding: 0px;
	overflow: hidden;
  border-radius: 10px;
	}


.split-pane {
	width: auto;
	overflow: clip;
	margin: 0px 10px 10px 10px;
  padding-top: 10px;
	}


.card { width: auto; }





/* ===== Headings ===== */
h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }


.check-update-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.check-for-update {
  position: absolute;
  width: 130px;
  left: auto;
  right: auto;
  top: auto;
  bottom: 90px;
  pointer-events: auto;
}


/* ===== Buttons (base + variants) ===== */

button {
  padding: 0.5rem .75rem;
  margin-right: 0.02rem;
  margin-left: 0.02rem;
  background-color: #2563eb;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
button:hover { 
  cursor: pointer; 
}

button:disabled,
button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Solid variants you already use */
button.secondary { background-color: #334155; }
button.secondary:hover { background-color: #1f2937; }
button.quiet { background-color: #eef2f7; color: #0f172a; border-color: #e2e8f0; }
button.quiet:hover { background-color: #e9eef6; }

/* High-contrast outline (readable even before hover) */
.btn-outline {
  background: #804dd1;
  color: #fff;
  border-color: #cbd5e1; /* slate-300 */
}
.btn-outline:hover {
  background: #f8fafc;
  border-color: #94a3b8; /* slate-400 */
}

/* Pills you’re using for client badges */
.pill {
  display:inline-block;	
  Position: relative;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.85rem;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}





/* ======= Inputs / small bits ====== */
.input { border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; font-size:11px; background:#fff; }
.badge { background:#eef2ff; color:#3730a3; padding:4px 8px; border-radius:999px; font-size:11px; }




/* ===== Cards ===== */
.card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 6px 14px -8px rgba(2, 6, 23, 0.2);
  padding: 1rem;
}
.card .card-day { 
	padding: 16px 10px; 
	margin-bottom: 24px; 
	background: #eee;
	box-shadow: 0 6px 34px -8px rgba(2, 6, 23, 0.2);
}



/* ===== Timeline container (scrolling region) ===== */
.scroll-container {
  height: calc( 100dvh - 130px );
  overflow-y: auto;
  padding: 10px 5px 10px 15px;
  background: transparent; /* container itself is not a card */
  background: #0000000f;
}

/* Small, invisible markers we observe */
.sentinel { height: 1px; width: 100%; }

/* Loading banners while adding older/newer days */
.loading-banner {
  position: sticky;
  top: 0;
  background: rgba(248,250,252,.9);
  color: #64748b;
  text-align: center;
  font-size: 11px;
  padding: 6px 0;
  margin-bottom: 8px;
  border-bottom: 1px dashed #e5e7eb;
  backdrop-filter: blur(4px);
}

/* ===== Tasks ===== */
.task { margin: 0.3rem 0; padding: 0.5rem; border: 1px solid #ddd; border-radius: 6px; background: #f3f4f6; }
.task.completed { text-decoration: line-through; background: #d1fae5; }

/* ===== Availability line ===== */
.availability { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.5rem; }

/* ===== Simple reveal animation helpers (optional) ===== */
.day.hidden { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s ease, max-height 0.4s ease; }
.day.revealed { opacity: 1; max-height: 500px; transition: opacity 0.4s ease, max-height 0.4s ease; }

/* ===== Layout utilities ===== */
.row { display:flex; align-items:center; gap:6px; }
.row.between { justify-content: space-between; }
.mb-8 { margin-bottom: 16px; }
.stack-4 > * + * { margin-top: 8px; position: relative; z-index: 1; }
.h2 { font-size: 20px; font-weight: 600; color:#0f172a; }
.text-muted { color:#64748b; }



/* ===== Past fading (two levels) ===== */
.faded { opacity: 1; }          /* last 7 days */
.faded-strong { opacity: 1; }   /* older than last week */


.card.card-day.faded-strong h2,
.card.card-day.faded h2 {
  opacity: .33;
  font-style: italic;
} 

.card.card-day.faded-strong .mmmdd-header,
.card.card-day.faded .mmmdd-header {
  margin-left: -3px;
} 



/* ===== Thin scrollbar ===== */
.thin-scrollbar::-webkit-scrollbar { width: 8px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: rgba(100,116,139,.5); border-radius: 999px; }
/* FIXED: needed a second color & proper rgba */
.thin-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.5) transparent; }



/* ===== Drawer (footer) for New Project ===== */
.drawer {
  position: fixed; left:0; right:0; bottom:0;
  max-height: 70vh; background:#fff; border-top:1px solid #e5e7eb;
  box-shadow: 0 -12px 30px -12px rgba(2,6,23,.25);
  border-top-left-radius: 18px; border-top-right-radius: 18px; z-index: 60;
}
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e5e7eb; }
.drawer-body { overflow-y:auto; padding:16px; max-height: calc(70vh - 56px); }




/* ===== Modal for Snapshot ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(2,6,23,.45); display:flex; align-items:center; justify-content:center; z-index:70; }
.modal { background:#fff; border:1px solid #e5e7eb; border-radius:18px;  max-height:80vh; overflow:auto; box-shadow:0 6px 24px -8px rgba(2,6,23,.08); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e5e7eb; }
.modal-body { padding:16px; }

/* ===== Tooltip + mobile project drawer (TaskRow) ===== */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:125%; white-space:nowrap; background:#111827; color:#fff;
  font-size:11px; padding:4px 8px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .15s;
}
.tooltip-wrap:hover .tooltip { opacity: 1; }

.project-inline { background:#f8fafc; border:1px dashed #e5e7eb; border-radius:11px; padding:8px 10px; margin-top:8px; }
.hide-link { font-size:11px; color:#2563eb; cursor:pointer; margin-left:8px; }


/* --- Available work block bar --- */
.avail-bar {
  padding: 8px 11px;
  background: rgba(22,163,74,0.08);
  color: #065f46;
  border-radius: 10px;
  font-size: 11px;
}

/* Stronger fade for >1 week past */
.faded-strong { opacity: 1; }

.card.card-day.faded h2 {
  opacity: .33;
  font-style: italic;
} 

.card.card-day.faded .mmmdd-header {
  margin-left: -3px;
} 


/* Loading banners */
.loading-banner {
  text-align: center;
  font-size: 11px;
  color: #64748b;
  padding: 4px 0 8px;
}

/* Modal (centered) + backdrop */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal {
  width: min(720px, 95vw);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(2,6,23,.18);
  padding: 16px 18px;
}

/* Inputs & table niceties already exist; add a light table */
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td {
  border: 1px solid #e5e7eb; padding: 8px 10px; font-size: 11px;
}
.simple-table th { background: #f8fafc; text-align: left; }

/* --- small UI helpers for TaskRow --- */

.pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 11px; border-radius: 999px;
  background:#e8efff; color:#1e40af; font-weight:600; font-size:11px;
  border:1px solid #cfe0ff;
}
.pill-personal { background:#f5eaff; color:#6b21a8; border-color:#ead8ff; }

.project-inline { display:inline-flex; align-items:center; gap:6px; color:#334155; }
.info-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:#e2e8f0; color:#111; font-style:italic; font-weight:700; font-size:11px;
  cursor:default;
}

/* mini popover used by +client */
.popover {
  position: absolute;
  z-index: 30;
  margin-top: 8px;
  padding: 11px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  box-shadow: 0 10px 30px rgba(2,6,23,.1);
}

/* --- Task row layout (no bullets) --- */
.task-row {
  display: grid;
  grid-template-columns: 20px 120px 110px 1fr auto auto;
  gap: 0px;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  padding: 10px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.time-input {
	width: 85px; 
	border: 1px solid #e5e7eb; 
	border-radius: 10px 10px 10px 10px; 
	font-size: 11px;
	padding: 8px 8px; 
	}

.title-input { 
	border: 1px solid #e5e7eb; 
	border-radius: 6px; 
	font-size: 14px;
	padding: 8px 8px 8px 7px;
	}

/* pills */
.pill {
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  border: 1px solid #e5e7eb;
}
.pill-personal { background: #f1e9ff; color:#5b21b6; border-color:#e9d5ff; }
.pill-client { background: #e9f1ff; color:#1d4ed8; }
.pill-client:hover { background:#dbeafe; }

/* project label + info */
.project-label { color:#475569; font-size:9px; }
.info-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width: 18px; height: 18px; margin-left: 6px;
  border-radius: 999px; background:#e5e7eb; color:#111; font-style: italic;
}


.input.choose-proj {
	margin-top: 0px!important;
	max-width: 100px;
	}


/* actions */
.actions { display:flex; gap:8px; justify-content:flex-end; }
.btn-danger { 
	background:#ef4444; 
	color:#fff; 
	width: 22px;
	max-width: 22px;
	min-width: 22px;
	border-radius: 4px!important;
	}
.btn-danger:hover { background:#dc2626; }

/* free time bar + deadline */
.avail-bar {
  background: #ecfdf5;
  color: #065f46;
  padding: 10px 11px;
  border-radius: 11px;
}
.deadline-bar {
  background: #fff1f2;
  border: 2px dotted #ef4444;
  color: #991b1b;
  padding: 10px 11px;
  border-radius: 11px;
}

/* Drawer (bottom sheet) */
.drawer { position: fixed; left:0; right:0; bottom:0; top:0;
  background: rgba(2,6,23,.4); display:flex; align-items:flex-end; z-index: 50; }
.drawer-inner { background:#fff; width:100%; max-height:80vh; border-radius: 16px 16px 0 0; padding: 16px; overflow:auto; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.drawer h3 { margin:0; }

/* small utilities used above */
.row { display:flex; align-items:center; }
.row.wrap { flex-wrap: wrap; }
.row.gap > * + * { margin-left: 8px; }
.row.end { justify-content:flex-end; }
.ml-auto { margin-left:auto; }
.space-y-4 > * + * { margin-top: 1rem; }
.input.small { width: 70px; }
.flex1 { flex:1 1 0; } .flex2 { flex:2 1 0; } .flex3 { flex:3 1 0; }

/* =========================
   PATCH (append at end only)
   ========================= */

/* 1) Make time boxes a bit smaller (keeps your current look) */
.time-input {
  width: 150px;           /* was 180px */
  padding-right: 6px;     /* reduce extra empty space on right */
}
.title-input {
  min-width: 160px;       /* gives a little flex room without overflowing */
}

/* 2) Kill bullets everywhere we render task lists (sometimes browser defaults sneak in) */
ul.stack-4,
ul.list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 3) Inline client picker (for the “+ client” pill on ad-hoc work rows) */
.client-picker {
  position: absolute;
  left: 12px;
  right: 12px;
  top: -255px;
  height: 260px;
  z-index: 40;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  padding: 12px;
}
.client-picker .picker-head {
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 8px;
  color: #0f172a;
}
.client-picker .picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.client-picker .search {
  width: 280px;
}

.client-picker .stack-4 {
  width: 280px;
  background:rgb(255, 255, 255);
}

.pill-client,
.pill.pill-add { cursor: pointer; color: white; background-color: #1d4ed8;}

.pill-add.pill-add-work { cursor: pointer; color: #1d4ed8; background-color: #1d4ed8;}
.pill-add.pill-add-work:hover { cursor: pointer; color: #1d4ed8; background-color: #dbeafe;}

.pill-add.pill-add-meeting { cursor: pointer; color: white; background-color: #1d4ed8;}
.pill-add.pill-add-meeting:hover { cursor: pointer; color: white; background-color: #1d4ed8;}

/* 4) New Project drawer layout helpers (clean grid; keeps your drawer visuals) */
.np-grid {
  display: grid;
  grid-template-columns: 220px 1fr 220px; /* client chooser | project | hard date */
  gap: 10px;
  align-items: center;
}
.np-row {
  display: grid;
  grid-template-columns: 1fr 220px 80px 100px;  /* title | soft date | hours | actions */
  gap: 10px;
  align-items: center;
}
.np-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* 5) Availability + deadline bars (make sure our styles win if duplicates exist) */
.avail-bar {
  background: #E3F6E2;
  color: #065f46 ;
  padding: 10px 11px ;
  border-radius: 11px ;
}
.deadline-bar {
  background: #fff1f2 ;
  border: 2px dotted #ef4444 ;
  color: #991b1b ;
  padding: 10px 11px ;
  border-radius: 11px ;
}

/* ==== TASK ROW LAYOUT & INPUTS (override) ==== */
.task-row {
  display: grid;
  grid-template-columns: 120px minmax(120px, auto) 1fr max-content max-content; /* time | pill | title | resched | delete */
  gap: 0px;
  align-items: center;
}

/* Make sure both class spellings are covered */
.input-time, .time-input {
  width: 80px;
  border: 1px solid transparent;
  border-radius: 8px 0px 0px 8px; 
  font-size: 11px;
  padding: 8px 4px 8px 8px;
}

.input-time, .time-input:focus {
  outline: none; /* Removes the default outline */
  border: 1px solid transparent; /* Adds a custom border instead */
}

/* Keep buttons from stretching weirdly */
.btn { white-space: nowrap; }

/* ==== BACKDROP & DRAWER (override any earlier rules) ==== */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.35);
  z-index: 50;
}

/* The actual white sheet panel */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 70vh;
  background: #fff ;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -12px 30px -12px rgba(2,6,23,.25);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  z-index: 60;
}

/* Keep your NP grid helpers */
.np-grid {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 10px; align-items: center;
}
.np-row {
  display: grid;
  grid-template-columns: 1fr 220px 80px 100px;
  gap: 10px; align-items: center;
}

/* ==== Bottom sheet & content ==== */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 360px;                    /* target height */
  background: #fff ;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -12px 30px -12px rgba(2,6,23,.25);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  z-index: 60;
  overflow: hidden; /* keep children contained */
}
.drawer-content {
  height: 100%;
  max-width: 920px;                 /* keep UI contained on narrow windows */
  margin: 0 auto;
  padding: 14px 16px;
  overflow-y: auto;
  box-sizing: border-box;
}
.drawer-titlebar { padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }

/* ==== Responsive project grid ==== */
.np-grid {
  display: grid;
  grid-template-columns: minmax(180px,220px) 1fr minmax(180px,220px);
  gap: 10px; align-items: center;
}
.np-row {
  display: grid;
  grid-template-columns: 1fr minmax(160px,220px) 84px 100px;
  gap: 10px; align-items: center;
}
@media (max-width: 880px) {
  .np-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .np-row { grid-template-columns: 1fr 1fr; }
  .np-row > :nth-child(3), .np-row > :nth-child(4) { justify-self: end; }
}

/* Prevent horizontal bleed */
.drawer-content * { max-width: 100%; box-sizing: border-box; }


/* === New Project bottom-sheet: keep timeline scrollable underneath === */

/* 1) Make the scrim purely visual so wheel/touch scroll passes through */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.35);
            /* <-- lets the page scroll under the scrim */
  z-index: 50;
}

/* 2) Bottom sheet panel (pinned to bottom, contained, mobile-first) */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff ;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -12px 30px -12px rgba(2,6,23,.25);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  max-height: 60vh;               /* ~360–400px on most laptops */
  overflow-y: auto;               /* scroll within the sheet if content is tall */
  z-index: 60;
  padding: 14px 16px;
}

/* 3) Contain the grid and make it responsive */
.np-grid {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0,1fr) minmax(0, 220px);
  gap: 10px;
  align-items: center;
}
.np-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 180px 90px 110px;  /* title | date | hours | actions */
  gap: 10px; align-items: center;
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; }
  .np-row  { grid-template-columns: 1fr; }
}

/* 4) Prevent any form/input from overflowing horizontally */
.drawer .input, .drawer select, .drawer input[type="date"], .drawer input[type="number"] {
  min-width: 0; width: 100%;
}

/* === clean tabs for PersonalScheduleModal (not buttons) === */
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab {
  appearance: none; border: 1px solid #e5e7eb; background:#fff;
  border-radius: 10px; padding: 8px 12px; font-size: 11px;
  color:#0f172a; cursor:pointer;
}
.tab:hover { background:#f8fafc; }
.tab-active {
  background:#2563eb; color:#fff; border-color:#2563eb;
}

/* Softer action buttons */
.btn-resched {
  background: #f1f5f9; color: #0f172a; border: 1px solid #e2e8f0;
}
.btn-resched:hover { background: #e2e8f0; }

.btn-danger {
  background: #fee2e2; padding-bottom: 8px; color: #991b1b; border: 1px solid #fecaca;
}
.btn-danger:hover { background: #fecaca; }

.btn-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; line-height: 1; font-size: 16px;
}

/* Completed state visuals */
.task-row.completed .title-input { color: #6b72809c; background: #ddd; border: 1px solid transparent }
.task-row.completed .title-input:focus { border: 1px solid #6b7280c7 }
.task-row.completed .btn-resched,
.task-row.completed .btn-danger { opacity: 0.5; pointer-events: none; }
.task-row.completed .input.time-input { background: #ddd; }
.task-row.completed .taskeeCatEmojiTaskrow { filter: saturate(0); opacity: .6; }
.task-row.completed .pill { border: 1px solid #aaa }
.task-row.completed { background: #ddd; border: 1px solid #aaa }

/* Deadline row visuals */
.task-row.deadline-row {
  background: #fff1f2;
  border: 2px dotted #ef4444;
  color: #991b1b;
}
.deadline-time-cell { opacity: 0.65; }

/* Purple variant for personal actions */
.btn-personal {
  background: #804dd1; color: #fff; border: 1px solid transparent;
}
.btn-personal:hover { background: #48129c; }



.card { background: #ddd; }

.timeline-card { background: #bbb; }



/* 

========================

Halfway Point

========================

*/



/* === Task row: add separate client + project columns === */
.task-row {
  display: grid;
  grid-template-columns:
    120px                  /* time or red deadline pill */
    minmax(110px, auto)    /* client pill column (or "Personal") */
    minmax(80px, auto)    /* project pill column */
    1fr                    /* title */
    max-content            /* action 1 */
    max-content;           /* action 2 */
  gap: 0px;
  align-items: center;
}

/* Client pill styles */
.pill-client {
  background: #eef2ff;     /* soft indigo */
  color: #3730a3;
  border: 1px solid #e0e7ff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  text-align: left;
}
.pill-client-outline {
  background: #fff;
  color: #334155;
  border: 1px dashed #94a3b8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
}

/* Project pill (if you don’t already have one) */
.pill-project {
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #cffafe;
  border-radius: 999px;
  padding: 6px 6px;
  font-size: 11px;
  text-align: center;
  width: 70px;
}

/* Hide a control but keep it programmatically clickable */
.visually-hidden {
  position: absolute ;
  opacity: 0 ;
  width: 0 ;
  height: 0 ;
  pointer-events: none ;
}

/* (Keep the calmer buttons + completed/deadline styles you already added) */


/* =========================
   APPEND-ONLY PATCH (safe)
   ========================= */

/* New pill for Events (distinct from Personal) */
.pill-event {
  background: #804dd1;      /* amber-100 */
  color: #92400e;           /* amber-800 */
  border: 1px solid #fde68a;/* amber-300 */
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  text-align: left;
}

.pill .pill-personal .pill-personal-event {
	text-align: left;
}


/* Optional: Milestone row background (similar to deadline but amber) */
.task-row.milestone-row {
  background: #fff7ed;        /* amber-50/100 */
  border: 2px dotted #f59e0b; /* amber-500 */
  color: #92400e;             /* amber-800 */
}

/* Project spacer so the title column doesn’t “jump” when no project pill */
.project-spacer {
  display: inline-block;
  width: 70px;                /* matches .pill-project width */
}

/* Keep buttons from stretching oddly in grid cells */
.btn { white-space: nowrap; }

/* Slightly softer, neutral reschedule styling (in case not defined above) */
.btn-resched {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
.btn-resched:hover { background: #e2e8f0; }

/* Icon-sized danger button (matches the TaskRow delete “×” use) */
.btn-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1; font-size: 16px;
}

/* Tabs for PersonalScheduleModal (button-free look) */
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab {
  appearance: none;
  border: 1px solid #e5e7eb;
  background:#fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  color:#0f172a; cursor:pointer;
}
.tab:hover { background:#f8fafc; }
.tab-active { background:#2563eb; color:#fff; border-color:#2563eb; }

/* Hidden input (used for native date-picker trigger on deadlines/milestones) */
.visually-hidden {
  position: absolute ;
  opacity: 0 ;
  width: 0 ;
  height: 0 ;
  pointer-events: none ;
}

/* Base tier */
.avail-bar.base { background: #eef7ff; }

/* Extended: 10pm–12am + 12am–1am */
.avail-bar.extended { background: #f5f0ff; }

/* Emergency: 1am–5am */
.avail-bar.emergency { background: #fff0f0; border: 1px dashed #e11; }


/* === Tiered time blocks (visuals) ======================================= */
/* Base (green) already looks right for you; keep it roomy. */
.avail-bar.base {
  /* keep your existing green styles; override minimal bits: */
  opacity: 1;
}

/* Extended (orange theme, ~66% opacity) — slimmer */
.avail-bar.extended {
  background: #EFE7DC;   /* very light orange fill */
  border: 1px dashed rgba(112, 71, 0, 0.66);
  color: #704700;                         /* muted orange-brown text */
  padding-top: 6px;
  padding-bottom: 6px;
  opacity: 1;                          /* requested overall ~33% */
}

/* Emergency (orange theme, ~33% opacity) — slim but a bit louder */
.avail-bar.emergency {
  background: #efe0dc;
  border: 1px dashed rgba(112, 71, 0, 0.33);
  color: #b87e6c;
  padding-top: 6px;
  padding-bottom: 6px;
  opacity: 1;                          /* requested overall ~66% */
}

/* If you need even tighter rows on non-base tiers, you can also shrink font: */
.avail-bar.extended, .avail-bar.emergency {
  font-size: 10px;                        /* smaller than base block text */
  line-height: 1;
}

.avail-bar {   
  line-height: 2;
}

/* Meeting & Event pills */
.pill.solid { color: #fff; }
.pill-meeting { background:#0f2a5f;}         /* navy */
.pill-event { background:#804dd1; }      /* purple */

/* Red outline when a row overlaps something else */
.task-row.overlap {
  box-shadow: 0 0 0 2px rgba(220,38,38,0.7) inset; /* red */
}

/* Final deadline badge (time field replacement) */
.pill-deadline {
  background: rgba(220,38,38,0.08);
  color: #7f1d1d;
  width: 140px;
  border: 1px dashed rgba(220,38,38,0.6);
}

/* make personal (non-event) readable */
.pill.pill-personal { color:#5b21b6; background:#ede9fe; border-color:#ddd6fe; }

/* meeting pill stays navy/white; event stays purple/white */
.pill.solid { color:#fff; }
.pill-meeting { background:#1d4ed8 ; }
.pill-event { background:#804dd1 ; }

/* overlap outline */
.task-row.overlap { box-shadow: 0 0 0 2px rgba(220,38,38,0.7) inset; }

/* inline client picker (small popover) */
.client-popover{
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% + 8px);
  z-index: 40;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 12px;
}
.client-popover .picker-head{ font-weight:700; }
.client-popover .picker-actions{ gap:8px; align-items:center; margin-top:6px; }
.client-popover .w-100{ width:100%; }

/* compact client picker */
.client-popover{
  position:absolute;
  left:16px; right:auto; top:calc(100% + 8px);
  width:min(360px, 90vw);
  z-index:40; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12); padding:12px;
}
.client-popover .picker-head{ font-weight:700; }
.client-popover .picker-actions{ gap:8px; align-items:center; margin-top:6px; }
.client-popover .btn{ width:100%; text-align:left; } /* list buttons fill popover width */

/* pills */
.pill.pill-personal{ color:#5b21b6; background:#ede9fe; border-color:#ddd6fe; }
.pill.solid{ color:#fff; }
.pill-meeting{ background:#0f2a5f ; }
.pill-event{ background:#804dd1 ; }

/* milestone look (shares red outline family but separate label) */
.milestone-row{ border-color:#f9caca; }
.pill-milestone{
  background:#fde2e2; color:#7f1d1d; border:1px dashed #ef4444;
}

.pill-add.pill-add-work { font-size: 11px; cursor: pointer; color: #3730a3; background-color: #eef2ff;}
.pill-add.pill-add-work:hover { cursor: pointer; color: #3730a3; background-color: #eef2ff;}


.pill-add.pill-add-meeting { border-radius: 0; font-size: 11px; cursor: pointer; color: white; background-color: #1d4ed8;}
.pill-add.pill-add-meeting:hover { cursor: pointer; color: white; background-color: #1d4ed8;}

.pill-meeting { font-size: 11px; cursor: auto; color: white; background-color: #1d4ed8; }

.pill.pill-personal.pill-personal-event {font-size: 11px; color: white; background-color: #7F4ED1; border:1px solid #7F4ED1; border-radius: 0;}

/* ==== Responsive title field stretch (append-only) ==== */

/* Make the grid’s 4th column (title) elastic and guarantee it can shrink */
.task-row {
  grid-template-columns:
    120px                  /* time or deadline pill */
    minmax(110px, auto)    /* client/personal pill */
    minmax(70px, auto)     /* project pill (or spacer) */
    minmax(auto, 1fr)     /* TITLE ← stretches/shrinks */
    max-content            /* Done + actions (column 1) */
    max-content;           /* extra actions (column 2, if used) */
}

/* Ensure the input actually fills its grid cell */
.title-input {
  width: 100%;
  min-width: 0;            /* allow shrinking inside grid */
}

/* Keep the Done label compact so it doesn’t push the title too early */
.actions .done-wrap {
  white-space: nowrap;
}



/* ===== TaskRow three-column layout ===== */
.task-row.threecols {
  display: flex ;           /* override older grid if present */
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  width: auto;
  position: relative;
}


.pill.pill-milestone,
.pill-deadline {width:108px;}

.pill.pill-milestone {background-color:#e86c00; color:white;}
.pill-deadline {background-color:#cc0000; color:white;}

.task-row .row-left {
  display: flex;
  position: relative;
  width: 162px;
}

.task-row .time-input { width: var(--tr-time-w); min-width: var(--tr-time-w); }
.task-row .pill { min-width: var(--tr-pill-w); justify-content: center; }

/* Middle flex column: title grows; project mark sticks to the right */
.task-row .row-mid {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 0px;
}

.task-row .title-input {
  flex: 1 1 auto;
  min-width: 0;    /* allow shrink within flex */
  width: 100%;
}

/* Project "i" badge lives on the right inside the middle column */
.project-mark {
  display: flex;
  background-color: transparent;
  border: 1px solid transparent;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  font-size: 9px;
  border-radius: 6px;
  padding: 0px;
  Line-height: 8px;
  position: relative;
  opacity: .5;
}
.project-mark:hover {
  color: white;
  background-color: transparent;
  border: 1px solid transparent;
  opacity: 1;
}


.pm-label { color: #475569;}
.pm-i {
  width: 19px; height: 19px;
  transform: rotateZ(15deg);
  color: #475569;
}

.pm-i.taskrow-notes {
  width: 20px; height: 20px;
  transform: rotateZ(0deg);
  color: #475569;
}

/* Right column fixed */
.task-row .row-right {
  display: flex;
  align-items: center;
  justify-content:center;
}

/* Right column fixed */
.marker-lane .task-row .row-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: auto;
}

.task-row .done-wrap { 
	display: flex; 
	flex-direction: column;
	align-items: center; 
	gap: 0px; 
	white-space: nowrap; 
	font-size: 9px;
	line-height: 8px;
	}

/* Hide the inline date input; open via button */
.hide-date-input {
  position: absolute;
  opacity: 0;

  width: 0; height: 0;
}


/* Pill variants (keeps your existing theme, adds event) */
.pill-personal-event {height: 12px; width: 80px; min-width: 80px; max-width: 80px; border-radius: 99px; background: #6c2bd9; color: #fff; } /* deep purple */
.pill-spacer { visibility: hidden; }

.pill.pill-personal { width: 100px; min-width: 100px; max-width: 100px; }

/* +client pill color distinctions (work vs meeting) */
.pill-add.pill-work { 
	color: #0f172a; 
	background: #e2e8f0; 
	width: 125px;
	font-weight: 400;
	margin-bottom: 0px;
	}     

 /* light #1d4ed8-like work look */

.pill-add.pill-meeting { 
	color: #fff; 
	background: #1d4ed8; 
	width: 125px;  
	}     
	 /* navy for meetings */

/* Keep overlap outline you already use */
.task-row.overlap {
  outline: 2px solid rgba(220, 38, 38, 0.7);
}

.pill {width: 120px;}
.pill.pill-personal.pill-personal-event {min-width: 100px; max-width: 100px; width: 100px;}


.btn.btn-resched{ width: 100%; font-size: 9px; margin-top: 0px; padding: 8px 0px; margin-bottom: 0px;}

.task-row {padding-top: 4px; padding-bottom: 4px; }

.btn.btn-danger.btn-icon {margin-bottom: 0px; padding-bottom: 8px;}
 
/* ===== DnD slot preview (append-only) =============================== */
.task-wrap {
  position: relative;
  transition: margin .12s ease;
}

/* When the cursor is in the TOP half of a row, show a slot ABOVE it */
.task-wrap.slot-before {
  margin-top: 60px;          /* space above this row */
}

/* When the cursor is in the BOTTOM half of a row, show a slot BELOW it */
.task-wrap.slot-after {
  margin-bottom: 60px;       /* space below this row */
}

/* Optional: subtle dashed separator line inside the slot (purely visual) */
.task-wrap.slot-before::before,
.task-wrap.slot-after::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  border-top: 2px dashed rgba(99,102,241,.25); /* indigo-ish, low alpha */

}
.task-wrap.slot-before::before { top: -12px; }
.task-wrap.slot-after::after   { bottom: -12px; }

/* === Locked pill icon (append-only) ================================= */
.pill-lock {
  height: 14px;           /* ~8–10px per your spec */
  width: auto;
  font-size: 10.5px;
  margin-left: 0px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.95;
  position: absolute;
  right: 5px;

}

/* Ensure the affected pills and the +client button align icon & text cleanly */
.pill-client.pill-meeting,
.pill-personal.pill-personal-event,
.pill.pill-add.pill-meeting {
  display: inline-flex;
  font-size: 10.5px;
  text-align: left;
  justify-content: left;
  align-items: left;
  width: 100px;
  min-width: 100px;
  max-width: 10px;
  gap: 9px;               /* keeps icon nicely spaced */
}

.pill.pill-add.pill-meeting {
  	width: 125px;
	min-width: 125px;
	max-width: 125px;
	border-radius: 2px;
	height: auto;
	color: white;
	font-weight: 300;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 11px;
  border: 1px solid #1d4ed8;
	position: relative;
	text-align: left;
	justify-content: left;
}


.pill-client.pill-meeting {
	border-radius: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 10px;
	text-align: left;
	justify-content: left;
}


.pill-personal,
.pill-event,
.pill-client,
.pill-meeting,
.pill-work {
	width: 88px!important;
	min-width: 88px!important;
	max-width: 88px!important;
	margin-right: 0px!important;
	padding-right: 6px!important;
	padding-left: 6px!important;
	font-size: 10px!important;
}

.pill-add.pill-meeting,
.pill-add.pill-work {
	width: 100px!important;
	min-width: 100px!important;
	max-width: 100px!important;
	margin-right: 0px!important;
	padding-right: 6px!important;
	padding-left: 6px!important;
	font-size: 10px!important;
}

.pill-personal-event {
  height: auto!important;
  border-radius: 2px!important;
}



/* ===== Milestone row styling (append-only) ========================== */


.marker-lane {
  margin-top: 6px;
  padding: .5px 5px!important;
  border-radius: 15px;
  background: rgb(255, 255, 255);
  box-shadow: 0 0px 15px -2px rgba(255, 0, 0, .5);
}

/* Distinguish from .deadline-row (which you already use for final) */
.task-row.threecols.milestone-row {
  background: #ffe29e;   /* soft amber wash */
  border: 2px dotted orange;
  padding: 5px 4px;
  margin: 0px!important;
  width: auto;
  border-radius: 90px;
  --tr-time-w: 100px!important;
  --tr-pill-w: 120px!important;
  --tr-right-w: 104px!important;
}

.marker-lane .input.title-input {
  padding: 5px 8px;
  color: black;
  opacity: .75;
}

.task-row.threecols.deadline-row {
  background: #ffdbdb;   /* soft amber wash */
  border: 2px solid red;
  border-radius: 90px;
  padding: 5px 4px;
  margin: 0px!important;
  width: auto;
  --tr-time-w: 100px!important;
  --tr-pill-w: 120px!important;
  --tr-right-w: 104px!important;
}
 
.task-row.threecols.deadline-row
 .row-left,
.task-row.threecols.milestone-row
 .row-left {
 	width: 105px!important;
	}

.task-row.threecols.deadline-row
 .input.title-input.deadline,
.task-row.threecols.milestone-row
 .input.title-input.deadline {
	color: rgba(186, 68, 0, .9);
	border: 2px solid rgba(186, 68, 0, 0.05)!important; 
	background-color: rgba(186, 68, 0, 0.05)!important;
	}


.task-row.threecols.deadline-row
 .pill.pill-client.pill-work,
.task-row.threecols.milestone-row
 .pill.pill-client.pill-work {
	color: rgba(186, 68, 0, .9);
	border: 2px solid rgba(186, 68, 0, 0.1)!important; 
	background-color: rgba(186, 68, 0, 0.15)!important;
	}

/* Final deadline pill (replaces time input in that row) */
.pill-deadline {
  background: #ef4444;     /* red */
  color: #fff;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 6px 2px;
  font-weight: 700;
  font-size: 8px;
  max-Width: 105px!important;
  min-Width: 105px!important;
  Width: 105px!important;
  margin-right: 0px!important;
  text-align: center;
}

/* Optional: Milestone pill (for when we render milestone rows) */
.pill-milestone {
  background: #fffbeb;      /* amber-50 */
  color: #92400e;           /* amber-800 */
  border: 1px solid #fed7aa;/* amber-200 */
  border-radius: 999px;
  padding: 6px 2px;
  max-Width: 105px!important;
  min-Width: 105px!important;
  Width: 105px!important;
  margin-right: 0px!important;
  font-size: 8px;
  text-align: center;
}


.new-deadline { 
	margin-left: 0px!important; 
	text-align: right; 
	width: auto!important; 
	padding: 6px 6px!important; 
	border-radius: 100px; 
	border: 2px solid rgba(256, 256, 256, 1)!important; 
	background-color: rgba(256, 256, 256, 0.6)!important;
	}

/* ===== Overlap outline (append-only) =============================== */
.task-row.overlap {
  outline: 2px solid #ef4444;        /* red */
  outline-offset: 2px;
}

/* If a parent sets overflow hidden, this ensures the outline is visible */
.task-row.threecols {
  overflow: visible;
}


.modal-body li span + span {
  opacity: 0.9; /* the “ — done” tail */
}



/* --- Import/Export modal hard-centering + overlay z-index --- */
.backdrop {
  position: fixed ;
  inset: 0 ;
  z-index: 999 ;
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;               /* above backdrop */
  display: flex;
  align-items: center;
  justify-content: center;
         /* allow click-through except modal */
}

.modal-layer .modal {
  pointer-events: auto;
  max-height: 90vh;
  overflow: auto;
  width: min(1100px, calc(100vw - 64px)); /* respect your .xl sizing */
  margin: 0;
}



/* ===== DnD tween-row layout (overrides) ===== */
.card-day .task-wrap {      /* structural wrapper around each TaskRow */
  margin: 0 ;
  padding: 0 ;
}

.card-day .task-wrap {       /* remove legacy spacing; rows sit flush */
  margin-top: 5px ;
  margin-bottom: 5px ;
  position: relative;
  z-index: 2;
}

.card-day .task-wrap.is-active {
  z-index: 3;
}

.card-day .avail-bar {      /* availability bars also flush */
  margin-top: 8px ;
  margin-bottom: 8px ;
  position: relative;
  z-index: 1;
}



/* Label that appears when a task is dragged over the tween row */
.card-day .tween-row .tween-label {
  opacity: 0;
  transition: opacity 250ms ease;
  font-weight: 600;
  color: #475569;
}

/* Optional: subtle hover aid when using mouse (non-drag) */
@media (hover:hover) {
  .card-day .tween-row:hover .tween-label {
    opacity: 0.33;
  }
}

/* While dragging, keep tween rows above the now-higher task-wrap stack. */
.card-day.dragging .tween-row {
  z-index: 4;
}

/* Overlap highlight (kept here so it can’t be overridden upstream) */
.card-day .task-row.overlap {
  outline: 2px solid #e11d48;     /* red */
  outline-offset: -2px;
  border-radius: 12px;
}

/* === DnD visual polish (append) === */
.task-wrap { margin-top: 0; margin-bottom: 0; } /* task rows themselves have no outside spacing */
.task-row { position: relative; z-index: 1; }
.task-row.is-dragging { opacity: 0.5; } /* ~65% transparent while dragging */

.drag-active .tween-row { z-index: 2; } /* tween targets float above rows while dragging */

.tween-row .tween-label {
  /* baseline styles are set inline; keep text unselectable just in case */
  user-select: none;
}

/* Ensure modals/drawers sit above the backdrop */
.modal-overlay, .overlay, .backdrop { z-index: 1000 ; }
.modal, .drawer, .project-modal, .modal-drawer, .new-project-drawer { z-index: 1001 ; }



/* ====== DnD: tween rows (invisible gap targets) ====== */
/* Parent hover target — controls expansion only */
.tween-row {
  position: relative;
  height: auto;                 /* collapsed by default */
  margin-top: -20px;         /* overlap above task by 20px */
  margin-bottom: -20px;      /* overlap below task by 20px */
  padding-top: 20px;         /* creates a 10px visible gap total when collapsed */
  padding-bottom: 20px;
  z-index: 0;                /* sits under tasks until a drag begins */
    transition: height 250ms ease;
}

/* During a drag, tween rows float above task rows so only THEY catch drops */
.scroll-container.drag-active .tween-row {
  z-index: 2;
}



/* Ensure task rows render above base content, under tween when dragging */
.task-wrap {
  position: relative;
  z-index: 1;
}

/* The row being dragged becomes ~65% transparent */
.task-row.dragging {
  opacity: 0.5;    /* 65% transparent */
}

/* ====== New Project drawer above its backdrop ====== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;    /* scrim */
}

.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;    /* above backdrop */
}

/* Optional: if your drawer already handles its own layout, keep this light */
.drawer .drawer-content {
  position: relative;
}

/* (If you have a different naming for the bottom drawer, keep the z-index rule) */


/* Drag ghost visual */
.drag-ghost {
  opacity: 0.5;               /* ghost is 50% */
  border-radius: 10px;
  background: inherit;        /* keep whatever the row shows */
}

/* Already present, but just to be explicit for the left-behind row */
.task-row.dragging {
  opacity: 0.5;              /* ~35% */
}




/* --- DnD authoritative overrides (append) --- */
.task-row.is-dragging { opacity: .5 ; }

.drag-ghost {
  background: #fff ;   /* stop inheriting gray */
  opacity: .5 ;         /* the “floating” copy */
  border-radius: 14px;

}


/* When any drag is active, tween rows float above tasks and accept events */
.scroll-container.drag-active .tween-row {
  z-index: 2;
  pointer-events: auto;
}


/* ====== DnD tween rows (append-only) ====== */

/* During a drag, lift all tween rows above task rows */
.dragging-active .tween-row { z-index: 2 ; }

/* Ghost (the element following the cursor) */
.drag-ghost {
  opacity: 0.5 ;
  background: transparent ;
  box-shadow: none ;
}

/* Origin row fades while dragging */
.task-row.dragging { opacity: 0.75; }

/* Tween base — note: we set inline styles for height/margins/padding,
   but these keep a consistent baseline if any inline style is reset. */
.tween-row {
  position: relative;
  height: auto;
  margin-top: -20px;
  margin-bottom: -20px;
  padding-top: 20px;
  padding-bottom: 20px;
   transition: height 250ms ease;
  pointer-events: auto; /* accept dragenter/leaves */
}

/* ==== DnD tween rows (refactor to class-based expansion) ==== */
.tween-row {
  position: relative;
  height: auto;                  /* collapsed by default */
  overflow: visible;
  z-index: 1;                   /* below tasks unless dragging */
}

.scroll-container.drag-active .tween-row {
  /* active only during an actual drag */
  pointer-events: auto;
}



/* Lift tween rows slightly above tasks while dragging */
.scroll-container.drag-active .tween-row { z-index: 2; }


/* Drag visuals:
   - the row left behind fades to ~35%
   - the floating ghost is 50% and transparent background */
.task-row.dragging { opacity: 0.75; }
.drag-ghost { opacity: 0.75; background: transparent; }

/* Make sure task rows are above tweens when not dragging */
.card-day .task-row { position: relative; z-index: 1; }

/* Ensure the scroll-container toggles .drag-active (Timeline already does) */

/* ==== DnD tween rows (insert at end of styles.css) ==== */
.tween-row {
  position: relative;
  height: auto;                    /* collapsed by default */
  overflow: visible;
  z-index: 1;                   /* below tasks unless dragging */
}

.dragging-active .tween-row {
  /* only becomes interactive while a drag is happening */
  pointer-events: auto;
}


/* Lift tween rows *slightly* over normal task rows during drag */
.dragging-active .tween-row { z-index: 2; }

/* ==== FINAL: simple tween DnD behavior (parent is drop target) ==== */

/* Baseline tween row (collapsed, invisible hit area, no pointer events) */
.card-day .tween-row {
  position: relative;
  background: transparent ;
  height: auto;
  padding: 20px 0 ;     /* creates the overlap window */
  margin: -20px 0 ;     /* so the tween sits between rows */
  z-index: 0;
  pointer-events: auto;
}

/* While dragging, tween rows are interactive and layered above tasks */
.dragging-active .tween-row {
  pointer-events: auto ;
  z-index: 2;
}

/* Dark overlay + label lives inside the tween (parent handles drop) */
.card-day .tween-row .tween-label {
  color: black;
  inset: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
              /* parent is the drop target */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 300;
  Font-size: 18px;
  user-select: none;
  transition: opacity 250ms ease;
}

/* Show the label only when the row is active during a drag */
.dragging-active .tween-row.active .tween-label {
  display: flex;
  opacity: 1;
}

/* Task layering (dragging origin fades and sits above tweens visually) */
.task-row { position: relative; z-index: 1; }
.task-row.dragging { opacity: 0.75; z-index: 3 ; }

/* ==== KILL SWITCH: make all tween rows droppable ==== */
.card-day.card-day .tween-row,
.card-day .tween-row,
.tween-row {
  pointer-events: auto;
}


/* ==== KILL SWITCH: make all tween labels po-none ==== */
.tween-row .tween-label {
  pointer-events: none!important;
}


/* === DnD tween-row: child-driven expansion (FINAL, append-only) === */

/* Keep stacking sane: tasks above base, tween rows above tasks only while dragging */
.card-day { position: relative; isolation: isolate; }
.task-row { position: relative; z-index: 1; }
.task-row.dragging { opacity: .5; pointer-events: none; z-index: 3; }

/* Parent tween: auto height, overlap window via padding + negative margin
   Net height is 0 when the label is 0px tall; becomes label's height when expanded. */
.tween-row {
  position: relative;
  z-index: 0;
  height: auto;          /* override any earlier height:0 */
  margin: -20px 0;       /* overlap the adjacent task rows by 20px */
  padding: 20px 0;       /* the overlap window */
  pointer-events: auto;  /* parent is the drop target */
}

/* During a task drag, all tween rows float above tasks and can receive drops */
.scroll-container.dragging-active .tween-row { z-index: 2; }

/* Child overlay that grows/collapses; parent remains the drop target */
.tween-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0px;             /* collapsed by default */
  overflow: hidden;      /* prevents text from changing height when collapsed */
  opacity: 0;
  border-radius: 10px;
  background: red; /* subtle, not too dark */
  user-select: none;
  pointer-events: none;  /* the child never steals dragover/drop */
  transition: height 250ms ease, opacity 250ms ease;
}

/* Only the hovered tween expands while dragging */
.scroll-container.dragging-active .tween-row.active .tween-label {
  height: 50px;          /* visual gap target */
  opacity: 1;
}

.task-row.dragging { opacity: .5; pointer-events: none; z-index: 3; }

/* Prevent child images from hijacking drags in Chrome/Edge */
.task-row img { -webkit-user-drag: none; user-drag: none; }

/* === DnD: parent stays auto; only the label grows === */
.tween-row {
  height: auto;                 /* parent never clamps height */
}

.scroll-container.dragging-active .tween-row { z-index: 2; }

.tween-row .tween-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0px;                    /* collapsed by default */
  overflow: hidden;             /* text never affects height */
  opacity: 0;
  pointer-events: none;         /* parent handles drop */
  transition: height 250ms ease, opacity 250ms ease;
}

/* Only the active tween shows an actual gap */
.scroll-container.dragging-active .tween-row.active .tween-label {
  height: 50px;                 /* visual gap */
  opacity: 1;
}

/* When a client picker/popover is present, lift that row above neighbors */
.task-wrap:has(.client-picker),
.task-wrap:has(.client-popover) {
  z-index: 10;   /* higher than other task-wraps (1) and tween-rows (2) */
}

/* Keep the popover itself high, just in case */
.client-picker,
.client-popover {
  z-index: 100;
}

.btn.btn-personal-task,
.btn.btn-work-task,
.btn.btn-meeting,
.btn.btn-event {
	 height: 28px;
	 font-weight: 400!important;
 	 padding: 0px;
	 padding-right: 8px;
	 padding-left: 6px;
	 }

.btn.btn-personal-task {
	color: #5b21b6;
 	background: #EDE9FE;
 	border: 2px solid #ddd6fe;
	border-radius: 60px;
	}


.btn.btn-work-task {
	color: #3730a3;
	background: #eef2ff;
 	border: 2px solid #e0e7ff;
	border-radius: 60px;
	}

.btn.btn-meeting {
	 color: #fff;
 	 background: #1d4ed8;
 	 border: 2px solid #1d4ed8;
	 border-radius: 2px;
	height: 28px;
	}

.btn.btn-event {
	color: #fff;
 	 background: #7F4ED1;
 	 border: 2px solid #7F4ED1;
	 border-radius: 2px;
	height: 28px;
	}


/* === Availability bars: expand on drag hover (250ms) ================== */
.avail-bar {
  transition: padding 250ms ease, background-color 250ms ease, opacity 250ms ease;
}

/* Available (green) — default 10px → 30px + color shift while hovering a drag */
/* NEW – only show the fat green hover while *any* drag is active */
/* Let the available lane grow like extended/emergency when hovered */
.avail-bar.available.is-drag-hover,
.avail-bar.avail.is-drag-hover {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  background: #cfeadd !important; /* or whatever green you want */
}

/* Emergency — 4px/3px → 30px/30px and opacity 0.33 → 1.0 */
.avail-bar.emergency.is-drag-hover {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  opacity: 1 !important;
}

/* Extended — opacity 0.66 → 1.0 and 30px/30px padding */
.avail-bar.extended {
  opacity: 0.66; /* ensure default */
}
.avail-bar.extended.is-drag-hover {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  opacity: 1 !important;
}


/* One daycard-header divider is always present, including while section headers stick. */
.card.card-day > header[data-planner-daycard-header="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #fff 0%, #d4d7df 35%, #bcc1ca 50%, #d4d7df 65%, #fff 100%);
  pointer-events: none;
  z-index: 1;
}
/* First visible row uses the header divider instead of duplicating it. */
.card.card-day [data-top-daysection="true"] > .timeline-section-top-border-gradient,
.card.card-day [data-top-daysection="true"] > .day-notes-day-schedule-sticky-bar::before {
  display: none !important;
}

.timeline-section-top-border-gradient {
  top: 0px;
  bottom: auto;
  position: absolute;
  min-height: 1px;
  width: 100%;
  background: linear-gradient(90deg, white, lightgray, white) !important;
  z-index: 50000;
}

/* Journal's bottom counterpart stays dormant unless it replaces the two
   separate Notes/Schedule top gradients in extra-wide Journal Above. */
.timeline-journal-section-bottom-border-gradient {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, white, lightgray, white);
  pointer-events: none;
  z-index: 50000;
}

@media screen and (min-width: 821px) {
  /* Notes and Schedule are both enabled and the split is wide. Journal is
     either hidden or above them; Journal Below keeps its existing padding. */
  .card.card-day:is(.daynotes-is-open, .daynotes-is-collapsed):is(.daysched-is-open, .daysched-is-collapsed):has(> .timeline-day-sections.is-wide):not(:has(> .timeline-day-journal-parent[data-top-daysection="false"])) {
    padding-bottom: 0px !important;
  }

  /* Journal Above: one full-width gradient on Journal's bottom edge. */
  .card.card-day:is(.daynotes-is-open, .daynotes-is-collapsed):is(.daysched-is-open, .daysched-is-collapsed):has(> .timeline-day-sections.is-wide):has(> .timeline-day-journal-parent[data-top-daysection="true"])
    > .timeline-day-journal-parent > .timeline-journal-section-bottom-border-gradient {
    display: block;
  }

  /* Suppress both old top-gradient elements AND the sticky-header gradients
     that actually paint the lines on desktop. */
  .card.card-day:is(.daynotes-is-open, .daynotes-is-collapsed):is(.daysched-is-open, .daysched-is-collapsed):has(> .timeline-day-journal-parent[data-top-daysection="true"])
    > .timeline-day-sections.is-wide > :is(.timeline-day-notes-parent, .timeline-day-schedule-parent)
    > .timeline-section-top-border-gradient,
  .card.card-day:is(.daynotes-is-open, .daynotes-is-collapsed):is(.daysched-is-open, .daysched-is-collapsed):has(> .timeline-day-journal-parent[data-top-daysection="true"])
    > .timeline-day-sections.is-wide > :is(.timeline-day-notes-parent, .timeline-day-schedule-parent)
    > .day-notes-day-schedule-sticky-bar::before {
    opacity: 0 !important;
  }
}

/* On desktop, paint separators inside the sticky header's own layer.
   This avoids Safari compositing the independent 1px sibling underneath
   the header's opaque background/backdrop-filter. */
@media screen and (min-width: 821px) {
  .timeline-section-top-border-gradient {
    display: none !important;
  }

  .timeline-day-notes-parent > .day-notes-day-schedule-sticky-bar::before,
  .timeline-day-schedule-parent > .day-notes-day-schedule-sticky-bar::before,
  .timeline-day-journal-parent > .day-notes-day-schedule-sticky-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, white, lightgray, white);
    pointer-events: none;
    z-index: 1;
  }
}

/* iOS Safari can paint the absolute 1px gradient beneath the sticky white
   section header. Keep this 2px separator in flow on touch-size screens. */
@media screen and (pointer: coarse) and (max-width: 1024px) {
  .timeline-section-top-border-gradient {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    display: block !important;
    height: 2px !important;
    min-height: 2px !important;
    flex: 0 0 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #d2d4da 18%,
      #c5c8cf 50%,
      #d2d4da 82%,
      transparent 100%
    ) !important;
    pointer-events: none;
  }
}

.card-day > header {
  position: sticky;
  border-radius: 10px 10px 0px 0px;
  top: -12px;
  width: auto;
  background: #eee;
  padding-right: 10px;
  padding-left: 15px;
  padding-bottom: 0px;
  z-index: 5;
}

.card.card-day.faded > header {
    padding-left: 17px;
}




/* Middle strip fills space between h2 (left) and .row (right) */
.compression-view-btns {
  flex: 1 1 auto;              /* <-- makes it expand */
  display: flex;
  align-items: center;
  gap: 0px;
  min-width: 0;
}

/* Buttons + icon bars */
.cvb-btn {
  appearance: none;
  padding: 0px;
  border-radius: 4px;
  background-color: transparent;
  border: 0px solid transparent;
  margin-right: -6px;
  margin-bottom: -3px;
  width: 34px;
  height: auto; 
  cursor: pointer;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  color: black;  
  opacity: .5;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.cvb-btn.btn24hr {
  margin-right: -1px!important;
}

.day-add-btns {
  position: relative;
}

.cvb-btn.btn24hr.timeline-24hr-pulse {
  animation: tw24hrHeaderPulse 520ms ease;
  opacity: 1 !important;
}

@keyframes tw24hrHeaderPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
  35% {
    transform: scale(1.18);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.18);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.timeline-24hr-menu {
  position: absolute;
  top: calc(100% - 32px);
  right: 0;
  z-index: 45;
  width: min(292px, calc(100vw - 24px));
  padding: 20px 20px 20px 20px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
}

.timeline-24hr-menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-24hr-icon-top-right{
  position: absolute;
  top: 3px;
  right: 3px;
  cursor: pointer;
}

.timeline-24hr-menu-heading {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  color: #0f172a;
}

.timeline-24hr-menu-helper {
  margin-top: -4px;
  font-size: 10px;
  line-height: 1.1;
  color: #64748b;
}

.timeline-24hr-menu-divider {
  height: 1px;
  margin: 10px 0;
  background: rgba(148, 163, 184, 0.35);
}

.timeline-24hr-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  min-height: 36px;
  max-height: 36px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  gap: 3px;
}

.timeline-24hr-segment {
  min-height: 30px;
  max-height: 30px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
}

.timeline-24hr-segment:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.timeline-24hr-segment.is-selected {
  background: #804dd1;
  color: #fff;
  box-shadow: 0 6px 16px rgba(128, 77, 209, 0.28);
}

.timeline-24hr-choice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.timeline-24hr-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  text-align: left;
  box-shadow: none;
}

.timeline-24hr-choice:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.timeline-24hr-choice.is-selected {
  background: #f5f3ff;
  border-color: #804dd1;
  box-shadow: 0 0 0 1px rgba(128, 77, 209, 0.22) inset;
}

.timeline-24hr-choice.is-custom.is-selected {
  background: #eefdf6;
  border-color: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.22) inset;
}

.timeline-24hr-choice-main {
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
}

.timeline-24hr-choice-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.timeline-24hr-choice.is-selected .timeline-24hr-choice-badge {
  background: #804dd1;
  color: #fff;
}

.timeline-24hr-choice.is-custom.is-selected .timeline-24hr-choice-badge {
  background: #16a34a;
  color: #fff;
}

.empty-full-day-lane-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: -5px 0px;
  flex: 0 0 auto;
}

.empty-full-day-lane-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.empty-full-day-add-pill {
  background: #ffffff51;
  color: #065f46;
  border: 1px solid rgba(6, 95, 70, 0.22);
}

.empty-full-day-add-pill:hover {
  background: #ffffff;
  color: #065f46;
}

.empty-full-day-hide-pill {
  background: #ffffff51;
  color: #065f46;
  border: 1px solid rgba(6, 95, 70, 0.22);
}

.empty-full-day-hide-pill:hover {
  background: #f8fafc;
  color: #334155;
}

.empty-full-day-24-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.empty-full-day-plus {
  font-weight: 700;
  letter-spacing: -0.04em;
}

.cvb-btn:hover {
  opacity: 1.0;
  background-color: transparent;
}

/* Bars inside each icon */
.cvb-icon {
  display: flex;
  width: 36px;
  padding: 0px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 8px;
}

.cvb-icon.cvb-thin {

}

.cvb-icon.cvb-medium {

}

.cvb-icon.cvb-thick {

}


.cvb-icon em {
  display: block;
  height: 100%;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
}

/* Padding rules scoped to THIS day's stack only (header's next sibling) */
.stack-4 .task-row {           /* default */
  padding-top: 6px;
  padding-bottom: 6px;
  Padding-left: 8px;
  Padding-right: 0px;
}



/* THINNEST VERSION */

.avail-bar.extended.lane.compress-thin .btn.btn-resched,
.avail-bar.emergency.lane.compress-thin .btn.btn-resched,
.stack-4.compress-thin .btn.btn-resched {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.avail-bar.extended.lane.compress-thin .task-row,
.avail-bar.emergency.lane.compress-thin .task-row,
.stack-4.compress-thin .task-row {
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 8px;
}

.avail-bar.extended.lane.compress-thin .pill,
.avail-bar.extended.lane.compress-thin .input,
.avail-bar.emergency.lane.compress-thin .pill,
.avail-bar.emergency.lane.compress-thin .input,
.stack-4.compress-thin .pill,
.stack-4.compress-thin .input {
  padding-top: 3px;
  padding-bottom: 3px;
}


.avail-bar.extended.lane.compress-thin .task-row .done-wrap,
.avail-bar.extended.lane.compress-thin .task-row .done-wrap,
.avail-bar.emergency.lane.compress-thin .task-row .done-wrap,
.avail-bar.emergency.lane.compress-thin .task-row .done-wrap,
.stack-4.compress-thin .task-row .done-wrap { 
  font-size: 8.5px;
  line-height: 3px;
  Margin-top: -1px;
  Margin-bottom: 3px;
}

.avail-bar.extended.lane.compress-thin .btn.btn-danger.btn-icon,
.avail-bar.emergency.lane.compress-thin .btn.btn-danger.btn-icon,
.stack-4.compress-thin .btn.btn-danger.btn-icon {
  padding-top: 2px;
  padding-bottom: 3px;
  height: 22px;
}

.avail-bar.extended.lane.compress-thin .pm-label,
.avail-bar.emergency.lane.compress-thin .pm-label,
.stack-4.compress-thin .pm-label {
  display: none;
} 

.avail-bar.extended.lane.compress-thin .pm-i,
.avail-bar.emergency.lane.compress-thin .pm-i,
.stack-4.compress-thin .pm-i {
  padding-bottom: 2px!important;
} 

.stack-4.compress-thin .task-row.threecols {

}

.avail-bar.extended.lane.compress-thin .timespan-line,
.avail-bar.emergency.lane.compress-thin .timespan-line,
.stack-4.compress-thin .timespan-line {
  font-size: 9px;
  margin-top: -2px;
}

.avail-bar.extended.lane.compress-thin .timespan-separator-mob,
.avail-bar.emergency.lane.compress-thin .timespan-separator-mob,
.stack-4.compress-thin .timespan-separator-mob {
  font-size: 6.5px;
  margin:  0px 1px 2px 1px!important;
}

.avail-bar.extended.lane.compress-thin .taskee-in-taskrow,
.avail-bar.emergency.lane.compress-thin .taskee-in-taskrow,
.stack-4.compress-thin .taskee-in-taskrow {
  top: -2px!important;
  height: 12px!important;
}

.avail-bar.extended.lane.compress-thin .taskeeLabel-in-taskrow,
.avail-bar.emergency.lane.compress-thin .taskeeLabel-in-taskrow,
.stack-4.compress-thin .taskeeLabel-in-taskrow {
  font-size: 8px!important;
}

.avail-bar.extended.lane.compress-thin .taskeeCatEmojiTaskrow,
.avail-bar.emergency.lane.compress-thin .taskeeCatEmojiTaskrow,
.stack-4.compress-thin .taskeeCatEmojiTaskrow {
  font-size: 11px!important;
}
  @media only screen and (max-width: 819px) {
      .avail-bar.extended.lane.compress-thin .taskeeCatEmojiTaskrow,
      .avail-bar.emergency.lane.compress-thin .taskeeCatEmojiTaskrow,
      .stack-4.compress-thin .taskeeCatEmojiTaskrow {
        font-size: 9px!important;
      }
  }

.avail-bar.extended.lane.compress-thin .title-input,
.avail-bar.emergency.lane.compress-thin .title-input,
.stack-4.compress-thin .title-input {
 font-size: 14px;
}
 
.avail-bar.extended.lane.compress-thin .title-input.has-taskee,
.avail-bar.emergency.lane.compress-thin .title-input.has-taskee,
.stack-4.compress-thin .title-input.has-taskee {
 padding-top: 10px;
 font-size: 14px;
}

.task-row.threecols{
    margin: 0px 6px 0px 12px!important;
}

/* DEFAULT/NORMAL VERSION */

.avail-bar.extended.lane.compress-normal .task-row,
.avail-bar.emergency.lane.compress-normal .task-row,
.stack-4.compress-normal .task-row {
  padding-top: 6px;
  padding-bottom: 6px;
}



/* THICK VERSION */

.avail-bar.extended.lane.compress-thick .task-row,
.avail-bar.emergency.lane.compress-thick .task-row,
.stack-4.compress-thick .task-row {
  padding-top: 14px;
  padding-bottom: 14px;
}




/* If you have more specific padding rules elsewhere, add !important:
   e.g., .stack-4.compress-thin .task-row { padding-top:0 !important; ... } */

.pill.pill-client.pill-meeting {
	border-radius: 2px;
	}





/* Let lane bars act as containers with a header and items inside */
.avail-bar.lane {
  padding: 10px 12px;          /* ensure interior spacing */
  box-sizing: border-box;
}

.avail-bar.lane .lane-label {
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
  pointer-events: none;        /* header isn’t a drop target */
}

.avail-bar.lane .lane-body > .task-wrap {
  margin-top: 8px;             /* space tasks from header */
}


.input.title-input.deadline {
    padding: 6px 10px;
  }





/* NOW MARKER SECTION */
/* NOW MARKER SECTION */
/* NOW MARKER SECTION */
/* NOW MARKER SECTION */

/* Now marker */
.now-marker {
  position: absolute;
  left: 8px;                 /* place at left (over the #1d4ed8 circle in your mock) */
  z-index: 0;                    /* sit above task rows */
  pointer-events: none;
  transform: translateY();
  transition: transform 250ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 7px;
}

/* #1d4ed8 circle */
.now-circle {
  margin-left: 22px;
  margin-top: 0px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #ED7D31; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* red state for overlaps */
.now-circle.overlap {
  background: #e04444;
  box-shadow: 0 2px 10px rgba(224,68,68,0.25);
}

/* label pill */
.now-label {
  background: rgba(255,255,255,0.92);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  pointer-events: none;
}

/* subtle overlay highlight (optional) */
.now-highlight {
  z-index: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -75px;
  height: 75px;
  background: linear-gradient(0deg, rgba(255, 108, 0, 0.25),rgba(255, 120, 0, 0));
  border-bottom: 2.5px solid #ff9500;
  pointer-events: none;
}

.pull-loader {
  user-select: none;
  -webkit-user-select: none;
  width: calc(100% - 16px);
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  color: #111;
  font-weight: 600;
  font-size: 18px;
  border-radius: 12px;
  margin-bottom: 35px;
  position: relative;
  z-index: 2;
  padding-top: 75px;
  padding-bottom: 20px;
}

@media (display-mode: standalone) {
  .split-pane.timeline,
  .split-pane.timeline .scroll-container.thin-scrollbar {
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }
}


/* make generic helpers safe inside flex/grid containers */
.row { min-width: 0; }


@media only screen and (max-width: 820px) {
  
  .action-bar-drawer {
      height: 45px!important;
      top: -12.5px!important;
      right: 2px!important;
   }

  .btn.actionbar-btns {
    padding: 6px 2.5px!important;
    margin: 0px;
    min-width: 41px!important;

  }

  .btn.actionbar-btns.reschedule-actionbar{
   padding-right: 0px!important; 
   padding-left: 0px!important; 
  }

  .task-row .row-left {
        z-index: 30;
  }
  .row-right {
    z-index: 31;
  }
  
  .close-action-bar {
    padding: 0px;
    margin: 0px;
    min-width: 0px!important;
    width: 30px!important;   
    max-width: 30px!important;
    min-width: 30px!important;
  }

  .card {
    padding-left: 8px!important;
    padding-right: 8px!important;
    margin-left: 8px!important;
    margin-right: 8px!important;
    Width: auto;
	}

  .btn,
  .button {
    padding: 8px 4px!important;
    margin: 3px;
    font-size: 12px;
	}


    .container {
        padding: 0px;
        margin: 0px!important;
      }

    .pill {
      width: 100px!important;
    }

}


/* Split layout */
.split-root {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.split-root.horizontal {
  display: grid;
  grid-template-columns: var(--pane-a, 1fr) var(--splitter, 8px) var(--pane-b, 1fr);
  grid-template-rows: 1fr;
}

.split-root.vertical {
  display: grid;
  grid-template-rows: var(--pane-a, 1fr) var(--splitter, 10px) var(--pane-b, 1fr);
  grid-template-columns: 1fr;
}

.split-pane {
  min-width: 0; min-height: 0; /* enable scrolling inside */
  overflow: hidden;
}

.split-panes.horizontal {
	gap:0px;
	}


/* Splitter + handle */
.splitter {
  background: white;
  position: relative;
  cursor: col-resize;
}

.split-resizer {
	background: rgba(0,0,0,.1)!important;
	position: relative;
	width: 6px!important;
	}

.split-resizer .handle {
 	background: #eee!important;
	min-width: 16px;
	min-width: 18px;
	}

.split-root.vertical .splitter { cursor: row-resize; }

.splitter .handle {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
}


.split-root.horizontal .splitter .handle { 
	width: 100%!important; 
	}

.split-root.vertical .splitter .handle { 
	height: 100%!important; 
	}

/* Desktop/tablet thin bar */
.split-root.horizontal .splitter::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 4px; height: 100%; border-radius: 2px; background: #e5e7eb;
}

/* Mobile — big circular grab target on the right edge */
.split-root.vertical .splitter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 6px; width: 100%!important; background: #e5e7eb; border-radius: 3px;
}
.split-root.vertical .splitter .nub {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: #f1f5f9; box-shadow: 0 2px 6px rgba(0,0,0,.1);
  display: grid; place-items: center; font-size: 16px; user-select: none;
}

/* DnD scroll zones inside the active (80%) pane */
.pane-scroll-zone-top,
.pane-scroll-zone-bottom {
  position: absolute; left: 0; right: 0; height: 20%;
  pointer-events: none;
}
.pane-scroll-zone-top { top: 0; }
.pane-scroll-zone-bottom { bottom: 0; }

.dur-field { position: relative; display: inline-block; }
.dur-field .dur-ghost {
  background: white;
  Padding: 5px;
  position: absolute;
  Left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none; user-select: none;
  font-variant-numeric: tabular-nums;
}


.todo-row {
	display: flex;
	width: 100%;	
	text-align: right;
	}

.todo-time-title {
	display: flex;
	width: 100%;
	}

.todo-sched-delete {
	width: 140px;
	}


.pill.pill-add.pill--personal { 
		background: transparent;
		color: #7F4ED1;  
		border: #7F4ED1 solid 1px; 
		padding: 2px 6px;
		width: 44px
		}

.pill.pill-add.pill--work { 
		background: transparent;
		color: #1d4ed8; 
		border: #1d4ed8 solid 1px; 
		padding: 2px 6px;
		width: 26px
		}


/* Add this to your CSS */
.dragging-native {
  opacity: 0.5;
  background: #eef2ff;
}
.task-wrap.dragging {
  opacity: 0.5 !important;
}

.input.time-input { 
	font-size: 10.5px; 
	border-radius: 6px; 
	}

.pill.pill-duration {
	padding-left: 0px;
	padding-right: 0px;
	width: 55px;
	max-width: 55px;
	min-width: 55px;
	border-radius: 6px; 
	font-size: 10px;
	background: transparent;
	font-weight: 400;
	color: #222;

	}

.move-deliverable-btns {
	height:24px;	
	}

.btn.btn-icon-only.top {
	max-height: 12px!important;
	padding:0px 6px;
	font-size: 6px;
	display: block;
	margin: .5px 0px;
	background: #aaa;
	}

.btn.btn-icon-only.bottom {
	max-height: 12px!important;
	padding:0px 6px;
	font-size: 6px;
	display: block;
	margin: .5px 0px;
	background: #aaa;
	}

.btn.btn-danger.deleteproj { min-width: 110px;}


.task-row.is-selected {
  background-color: #e0e7ff!important; /* A light #1d4ed8 or purple */
  box-shadow: 0 0 0 2px #4f46e5!important; /* A darker border */
}

.card.daycard .row.between { padding-left: 5px; }

.card.row.between { 
	background: #fff!important;
	overflow: hidden;
	border: 0px;
  	border-radius: 10px;
	background: #fff;
	}

/* Headnav & dropdown fixes */
.toolbar, .headnav, .headnav .left, .headnav .right { overflow: visible; }
.headnav { position: sticky; top: 0; z-index: 2000; }

/* Generic icon button (matches your IconButton) */
.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}
.icon-button:hover { background: #f5f7fb; }

/* Details-based dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }

/* Menu panel */
.dropdown .dropdown-menu {
  position: absolute;
  min-width: 260px;
  max-width: 92vw;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  z-index: 3000;
  margin-top: 8px;
  transform-origin: top right;
  display: none;
}

/* Open state */
.dropdown[open] .dropdown-menu { display: block; }

/* Alignment */
.dropdown[data-align="right"] .dropdown-menu { right: 0; }
.dropdown[data-align="left"]  .dropdown-menu { left: 0; }

/* Small helpers */
.group-title { font-weight: 600; margin: 4px 0 8px; font-size: 13px; color: #444; }
.muted { color: #6b7280; font-size: 12px; }
.headnav .spacer { flex: 1 1 auto; }

/* Make sure menus aren’t hidden by parents */
.headnav .right, .headnav .left { position: relative; }















/* ===== Sub-timeline expanded gap ===== */
/* ===== Sub-timeline expanded gap ===== */
/* ===== Sub-timeline expanded gap ===== */
/* ===== Sub-timeline expanded gap ===== */
/* ===== Sub-timeline (final, unified) ===== */
.avail-bar.gap-expanded {
  overflow: visible;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, .25) inset,
    /* cyan dotted border illusion base */
    0 0 18px 0 rgba(16, 185, 129, .18);
  /* inner cyan glow */
}

/* dotted cyan ring (matches avail lane aesthetic) */
.avail-bar.gap-expanded::before {
  opacity: .9;
}

/* hide the big inline label while expanded */
.avail-bar.gap-expanded .lane-label {
  display: none !important;
}

/* ruler container (RIGHT-side ruler) */
.gap-ruler {
  width: 100%;
  transition: height 180ms cubic-bezier(.2, .8, .2, 1);
  padding-right: 15%;
  /* reserves room for cancel area column */
}

/* each 5-min band wrapper */
.gap-ruler .tick-band {
  position: relative;
}

/* ----- Lines (drawn full width, labels right-aligned) ----- */
.gap-ruler .ruler-line {
  position: absolute;
  left: 0;
  right: 15%;
  /* stop before cancel column */
  height: 100%;
  border-top: 1px solid currentColor;
  transform: translateY(-0.5px);
  color: #000;
  /* base for currentColor */
  /* default minor */
}

.gap-ruler .hour-line {
  height: 2px;
  /* 2px for :00 */
  opacity: 1;
}

.gap-ruler .half-line {
  opacity: .55;
}

.gap-ruler .quarter-line {
  opacity: .40;
  border-bottom: 1px dotted currentColor;
  background: transparent;
}

/* Bookend (cyan) overrides */
.gap-ruler .bookend {
  color: #10b981;
}

.gap-ruler .bookend.ruler-line {
  background: #10b981;
  height: 2px;
  opacity: 1;
}

/* ----- Labels (RIGHT-side, time-of-day, AM/PM small) ----- */
.gap-ruler .tick-label {
  position: absolute;
  right: calc(15% + 4px);
  /* 4px left padding before text */
  top: -11px;
  /* vertically centered to line block sizes below */
  text-align: right;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  color: #000;
}

/* weight/size by type (no opacity juggling here—keep solid; we only fade by scale) */
.gap-ruler .tick-label.hour {
  font-weight: 500;
  font-size: 16px;
  color: #000;
}

.gap-ruler .tick-label.half {
  font-weight: 300;
  font-size: 13px;
  color: #7F7F7F;
}

.gap-ruler .tick-label.quarter {
  font-weight: 300;
  font-size: 9px;
  color: #A6A6A6;
}

/* AM/PM superscript style */
.gap-ruler .tick-label sup {
  font-size: .66em;
  font-weight: 300;
  text-transform: uppercase;
  position: relative;
  top: -0.35em;
  margin-left: 1 px;
}

/* Fading when compressed (applied by inline style from JS) */
.gap-ruler .fade-out {
  opacity: 0;
}


/* ----- Highlighted drop proxy (outer) + label pill ----- */
.gap-expanded .drop-proxy {
  background: transparent;
  /* gradient is drawn via :before */
  z-index: 2;
  min-height: 0;
  /* allow tiny spans; label may exceed */
}
.gap-expanded .drop-proxy::before {
  position: absolute;
  inset: 0;
  border-radius: 8 px;
  /* default = personal violet; work row will override with .work */
}

/* label pill sits over the proxy; full-opacity, solid color */
.gap-expanded .drop-label {
  left: 15px;
  /* aligns with content padding */
  transform: translateY(-50%);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  z-index: 3;
  backdrop-filter: saturate(120%);
}

/* dim outside the proxy range */
.gap-expanded .outside-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(#000, #000);
  opacity: .12;
  z-index: 1;
}

/* keep expanded height flexible */
.stack-4 .avail-bar.gap-expanded,
.avail-bar.lane.gap-expanded {
  height: auto !important;
}

/* tiny “too small” flash */
.avail-bar.gap-too-small {
  animation: gapflash .35s ease;
}
@keyframes gapflash {
  0% {
    box-shadow: 0 0 0 rgba(255, 99, 71, 0);
  }

  50% {
    box-shadow: 0 0 0 3px rgba(255, 99, 71, .25);
  }

  100% {
    box-shadow: 0 0 0 rgba(255, 99, 71, 0);
  }
}

/* bookend line placement (top/bottom full width minus cancel col) */
.gap-ruler .book-start {
  position: absolute;
  top: 0;
  left: 0;
  right: 15%;
}
.gap-ruler .book-end {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 15%;
}

/* bookend sticky labels at right, slightly outside line end */
.gap-ruler .book-label {
  position: sticky;
  display: flex;
  justify-content: flex-end;
  right: 0;
  transform: translateX(8px);
  font-weight: 300;
  font-size: 14 px;
  color: #065f46;
  /* emerald-900-ish */
  z-index: 1;
}
.gap-ruler .book-label.book-start {
  position: absolute;
  top: 0;
}
.gap-ruler .book-label.book-end {
  position: absolute;
  bottom: 0;
}

.gap-ruler {
  position: relative;
}

/* Bookend labels (cyan), positioned above/below their 0px rows */
.gap-ruler .row.book-start .ruler-line {
  border-top: 2px solid #10b981;
  background: transparent;
}

.gap-ruler .row .ruler-text.book.top {
  position: absolute;
  bottom: auto;
  top: 0;
}
.gap-ruler .row .ruler-text.book.bottom {
  position: absolute;
  bottom: -1.1em;
}

/* sits under the ruler-line */
/* Hour / Half / Quarter styles */
.gap-ruler .row.quarter.ruler-line,
/* Typography colors/sizes */
.gap-ruler .row.quarter.ruler-text,
/* Small AM/PM caps aligned to top of numbers */
/* Cancel column is already a sibling (.gap-grid); keep your look */
/* each timeline row: fixed 22px; content bottom-aligned */
.gap-ruler .row {
  display: flex;
  align-items: flex-end;
  /* puts the line at the bottom */
  justify-content: flex-end;
  /* pushes label to the right */
  gap: 5px;
  /* 5px gap between line end and label */
  overflow: visible;
}

/* line runs to label gap; thickness by type */
.gap-ruler .row .ruler-line {
  flex: 1 1 auto;
}
.gap-ruler .row.hour .ruler-line {
  border-top-width: 2 px;
  border-top-color: #000;
}
.gap-ruler .row.half .ruler-line {
  border-top-width: 1px;
  border-top-color: #7F7F7F;
}
.gap-ruler .row.quarter.ruler-line-dotted {
  border-top-style: dashed;
}

/* label typography & colors */
/* bookends: cyan lines; labels above/below */
.gap-ruler .row.book-start .ruler-text,
.gap-ruler .row.book-end .ruler-text {
  color: #10b981;
  font-weight: 500;
  font-size: 14px;
}

.gap-ruler .row.book-start .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  border-top: 2px solid #10b981!important;
  opacity: 1.0!important;
  background: transparent!important;
}

.gap-ruler .row.book-start {
  height: 0;
}
.gap-ruler .row.book-start .ruler-text {
  position: absolute;
}

/* above ruler-line */
.gap-ruler .row.book-end .ruler-text {
  position: absolute;
  font-weight: 500;
}

/* below ruler-line */
/* collapse animation target (height + opacity) */
.gap-ruler .row.fade {
  transition: height .18s linear, opacity .18s linear;
}

/* drop proxy + label pill */
.gap-expanded .drop-proxy {
  position: absolute;
  left: 0;
  right: 0;
  /* stops at ruler’s right edge */
  border-radius: 0;
  /* squared per spec */
  pointer-events: none;
  z-index: 2;
}
.gap-expanded .drop-proxy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(178, 76, 255, .50), rgba(178, 76, 255, 0));
}
.gap-expanded .drop-proxy.work::before {
  background: linear-gradient(90deg, rgba(68, 114, 196, .50), rgba(68, 114, 196, 0));
}
.gap-expanded .drop-label {
  position: absolute;
  transform: translateY(-50%);
  margin-left: 50px;
  /* push into the track */
  padding: 2px 15px;
  border-radius: 60px;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  z-index: 3;
  left: 0;
  background: #B24CFF;
}
.gap-expanded .drop-label.work {
  background: #4472C4;
}

/* card visuals: white with inner green glow & dotted ring tight to edge */
/* hide the original drag ghost while expanded */
html.dnd-active .drag-ghost,
html.dnd-active .bd-task.dragging {
  opacity: 0 !important;
}

.gap-ruler .row.quarter.line-dotted .ruler-line {
  border-top: 1px dotted #BFBFBF;
}

.gap-ruler .row.quarter.ruler-text {
  font-weight: 300;
  font-size: 9px;
  color: #A6A6A6;
}

/* Bookends: cyan, ruler-line on bottom; top label above, bottom label below */

.gap-ruler .row.book-start .ruler-text {
  bottom: auto;
  left: 0px;
  top: -16px;
  color: #10b981;
  font-size: 14px;
}
.gap-ruler .row.book-end .ruler-text {
  bottom: -16px!important;
  top: auto;
  left: 0px;
  color: #10b981;
  font-size: 14px;
  font-weight: 500;
}

/* Make the dotted green border flush with the card edge (no gap) */
/* Kill the draggable ghost while sub-timeline is open */
.gap-expanded .drag-ghost,
.gap-expanded .drag-shadow,
.gap-expanded .bd-task.dragging {
  display: none !important;
}

.bd-placeholder {
  margin: 2px 0;
  border-radius: 8px;
  outline: 1px dashed rgba(59,130,246,.45);
  background: rgba(59,130,246,.08);
}























/* ===== GEMINI'S FIXES ===== */
/* ===== GEMINI'S FIXES ===== */
/* ===== GEMINI'S FIXES ===== */
/* ===== GEMINI'S FIXES ===== */
/* ===== GEMINI'S FIXES ===== */


/* ===== START REPLACEMENT: Fix #1 ===== */
.gap-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 25%; /* Use 1fr for the ruler to fill remaining space */
  gap: 0;
  padding: 30px;
}

/* Also remove the conflicting padding from the ruler column itself */
.gap-grid .gap-ruler {
  position: relative;
  padding-right: 0; /* REMOVE conflicting padding */
}
/* ===== END REPLACEMENT: Fix #1 ===== */

/* ===== START ADDITION: Fix #2 (Part 2 of 2) ===== */
.gap-ruler .row.book-start .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  border-top: 1px solid #10b981;
}

.gap-ruler .row .ruler-text.book {
  color: #065f46;
  font-weight: 300;
  font-size: 14px;
  position: absolute;
}

/* Position bookend labels outside the flow */
.gap-ruler .row.book-start .ruler-textwrap {
  /* Place label ABOVE the 0px top line */
  bottom: 5px; 
  position: absolute;
  right: auto;
  left: 0px;
}

.gap-ruler .row.book-end .ruler-textwrap {
  /* Place label BELOW the bottom line */
  top: 100%;
  bottom: auto;
  padding-top: 2px;
  position: absolute;
  right: auto;
  left: 0px;
}
/* ===== END ADDITION: Fix #2 (Part 2 of 2) ===== */

/* ===== START REPLACEMENT: Fix #3 ===== */
/* Base row container */
.gap-ruler .row {
  position: absolute;
  left: 0;
  right: 0;
  display: grid!important; 
  grid-template-columns: 1fr max-content!important; 
  align-items: center!important;
   /* All rows start at a 22px height for calculations */
}

/* Line element, positioned at the bottom of its parent row */
.gap-ruler .row .ruler-line {
  min-width: 0!important;
  height: 100%!important;
}

/* Wrapper for ruler-text, aligned to the right edge */
.gap-ruler .row .ruler-textwrap {
  justify-self: end!important;
  height: 100%!important;
  padding-left: 5px;

}

/* Wrapper for ruler-text, aligned to the right edge */
.gap-ruler .row .ruler-textwrap {
  position: absolute;
  right: 0;
  bottom: 0;                 /* anchor to the line (bottom of row) */
  height: auto;
  justify-self: end!important;
  padding-left: 5px;
}

/* The actual ruler-text element */
.gap-ruler .row .ruler-text {
  padding-left: 5px;
  margin: 0;
  padding: 0;
  position: absolute;
  height: auto;
  bottom: calc(0px - 0.4em)!important;
  right: 0;
  line-height: 1;
  white-space: nowrap;
}
/* ===== END REPLACEMENT: Fix #3 ===== */

/* ===== START ADDITION: Fix #4 ===== */
/* Hour Marker Styles */
.gap-ruler .row.hour .ruler-line {
  border-top: 2px solid #000;
}
.gap-ruler .row.hour .ruler-text {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.gap-ruler .row.hour { --ruler-text-width: 100px; } /* Approx width for line calc */

/* Half-Hour Marker Styles */
.gap-ruler .row.half .ruler-line {
  border-top: 1px solid #7F7F7F;
}
.gap-ruler .row.half .ruler-text {
  font-size: 12px;
  font-weight: 300;
  color: #7F7F7F;
}
.gap-ruler .row.half { --ruler-text-width: 70px; }

/* Quarter-Hour Marker Styles */
.gap-ruler .row.quarter .ruler-line {
  border-top: 1px dashed #BFBFBF;
}
.gap-ruler .row.quarter .ruler-text {
  font-size: 9px;
  font-weight: 300;
  color: #A6A6A6;
}
.gap-ruler .row.quarter { --ruler-text-width: 60px; }


.gap-ruler .row.quarter .ruler-line {
  width: calc(100% - 35px)!important;
}

.gap-ruler .row.half .ruler-line {
  width: calc(100% - 45px)!important;
}

.gap-ruler .row.hour .ruler-line {
  width: calc(100% - 56px)!important;
}

.gap-ruler .row.book-start .ruler-line {
  width: calc(100% - 100px)!important;
}

.gap-ruler .row.book-end .ruler-line {
  width: calc(100% - 100px)!important;
}

/* ===== END ADDITION: Fix #4 ===== */


/* ===== START ADDITION: Fix #5 ===== */
.gap-ruler .row .ruler-text sup {
  font-size: 0.5em; /* Half height of the number */
  vertical-align: top; /* Aligns to the top of the number */
  font-weight: 300;
  text-transform: uppercase;
  position: relative;
  top: 0.1em; /* Minor adjustment for perfect visual alignment */
}
/* ===== END ADDITION: Fix #5 ===== */

/* ===== START ADDITION: Fix #6 (Part 2 of 2) ===== */
.drop-proxy {
  position: absolute;
  left: 0;
  right: 0; /* Stretches across the entire ruler column */
  border-radius: 0; /* No border radius */
  pointer-events: none;
  z-index: 10;
}

.drop-proxy::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Default violet for personal tasks */
  background: linear-gradient(90deg, rgba(178,76,255,.50) 0%, rgba(178,76,255,0) 100%);
}

.drop-proxy.work::before {
  /* #1d4ed8 for work tasks */
  background: linear-gradient(90deg, rgba(68,114,196,.50) 0%, rgba(68,114,196,0) 100%);
}

.drop-proxy .drop-label {
  position: absolute;
  left: -20px; /* Offset 20px left into the timeline area */
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 999px; /* Pill shape */
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  background: #B24CFF; /* Default violet */
}

.drop-proxy.work .drop-label {
  background: #1d4ed8; /* #1d4ed8 */
}

.ampm-superscript {
  font-size: 9px;
  display: inline-block;
  position:relative;
  font-weight: 700;
  top: -5px;
  left: -3.5px;
  margin-right: -3px;
}

.drop-proxy .drop-label sup {
  font-size: 5px!important;
  vertical-align: top;
  margin-left: 2px;
}
/* ===== END ADDITION: Fix #6 (Part 2 of 2) ===== */

/* ===== START ADDITION: Fix #7 ===== */
.task-row.dragging {
  opacity: 0 !important;
}
/* ===== END ADDITION: Fix #7 ===== */




/* ===== START REPLACEMENT: Fix #9 ===== */
.avail-bar.gap-expanded {
  position: relative; /* Needed for pseudo-element */
  background: #ffffff;
  border-radius: 14px;
  padding: 60px 0px; /* Padding is vertical only; grid handles horizontal */
  /* Inner green glow */
  box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2);
  border: none; /* Remove any previous border */
}

/* Dotted green line flush with the outer edge */
.avail-bar.gap-expanded::before {
  content: "";
  position: absolute;
  inset: 0; /* Flush with the edges */
  border-radius: 14px; /* Match parent's border-radius */
  border: 2px dotted #10b981;
  pointer-events: none;
}
/* ===== END REPLACEMENT: Fix #9 ===== */



/* ===== START ADDITION: Fix #10 ===== */

.gap-expanded {
    cursor: grabbing!important; /* or 'grab' */
}

/* The 20% sibling column */
.ruler-canceldrop-area {
  position: relative;
  height: calc(100% + 55px);
  margin: -20px 0px 0px 15px;
  transition: background-color 150ms ease, opacity 150ms ease, border-color 150ms ease;
  border-radius: 10px;
  border: 1px solid #ef4444; /* Red outline */
  background: rgba(254, 226, 226, .05); /* Light red background */
  color: #b91c1c; /* Darker red text */
  padding: 40px 0px; /* Vertical padding to match ruler, horizontal for box inset */
  box-sizing: border-box;
  opacity: 0.5;
}


@keyframes blink-opacity {
  0% { opacity: 1; }
  15% { opacity: 0.6; }
  30% { opacity: 1; }
  45% { opacity: 0.6; }
  60% { opacity: 1; }
  75% { opacity: 0.6; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes cancel-grow {
  from { transform: scale(1); }
  to   { transform: scale(1.5); }
}

/* The visible text box */
.ruler-canceldrop-text {
  position: sticky;
  pointer-events: none;
  top: 75px; /* Aligns with top padding */
  text-align: center;
  padding: 0px 4px;
  line-height: 1.15;
  font-weight: 500;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* This class is now toggled by JavaScript on drag enter/leave */
.ruler-canceldrop-area.is-cancel-hover {
  background: rgba(254, 226, 226, 1);
  border-color: #ef4444;
  animation: blink-opacity 150ms linear;
}

.ruler-canceldrop-area.is-cancel-hover .ruler-canceldrop-text {
  animation: cancel-grow 2150ms ease-out forwards;
  transform-origin: 50% 35%;
}


/* ===== END ADDITION: Fix #10 ===== */

/* ===== START: Drop Proxy Highlight and Pill Styles ===== */
.drop-proxy-highlight {
  position: absolute;
  left: 0px; /* Aligns with content padding */
  right: 15px; /* Aligns with content padding */
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center; /* This will vertically center the pill */
  justify-content: flex-start;
}

.drop-proxy-highlight.personal {
  background: linear-gradient(90deg, rgba(126, 5, 248, 0.4) 0%, rgba(126, 5, 248, 0) 100%);
}

.drop-proxy-highlight.work {
  background: linear-gradient(90deg, rgba(5, 93, 248, 0.4) 0%, rgba(5, 93, 248, 0) 100%);
}

.drop-proxy-pill {
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  margin-left: 45px;
  color: #fff;
  white-space: nowrap;
}

/* Keep the desktop timespan pill physically above the native drag ghost. */
@media (min-width: 821px) {
  .gap-grid:not(.gap-grid-mobile-reversed) .drop-proxy-pill {
    transform: translateY(-75px) !important;
  }
}
  
@media (max-width: 820px) {
  .drop-proxy-pill {
    margin-top: -200px!important;
  }
}

.drop-proxy-pill.personal {
  background-color: #7E05F8;
}

.drop-proxy-pill.work {
  background-color: #055DF8;
}

.ampm-superscript-pills {
  font-size: 8px;
  display: inline-block;
  position: relative;
  font-weight: 700;
  top: -1px;   /* top-align to numbers */
  left: 0px;
  margin-right: -3px;
}

/* ===== END: Drop Proxy Highlight and Pill Styles ===== */

/* default “grab” for draggable items (optional) */
.draggable { cursor: grab!important; }

/* while dragging, force “grabbing” app-wide */
html.is-dragging, html.is-dragging * {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}



/*
=========================
FIX: DnD Ghost Management
=========================
*/

/* 1. Restore the faded look for the original task row being dragged.
      This overrides the previous fix that made it fully invisible. */
.task-row.dragging {
  opacity: 0.5 !important;
  background: transparent;
  box-shadow: inset 0 0 0px rgba(16, 185, 129, 0.0);
}

/* 2. When the sub-timeline is active, find the globally-managed
      drag ghost and hide it completely. */
html.sub-timeline-active .drag-ghost {
  display: none !important;
  background: transparent;
  box-shadow: inset 0 0 0px rgba(16, 185, 129, 0.0);
}



/* Sub-timeline zoom (lanes with small available windows) */
.gap-ruler {
  transform-origin: top left;
  transform: scaleY(var(--stScale, 1));
}

/* --- Base scaffolding that matches your previous layout tricks --- */
.gap-ruler {
  position: relative;
  /* height is driven by JS: var(--st-total, Npx) */
}

.gap-ruler .row {
  position: absolute;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  overflow: visible;
  pointer-events: none; /* lines/labels never block DnD */
}

.gap-ruler .ruler-line {
  position: relative;         /* so ::after accents can anchor */
  min-width: 0;
  height: 0;
  border: 0;   
  transform: none;               /* each kind sets its own border-top */
}

.gap-ruler .ruler-textwrap {
  position: absolute;
  right: 0;
  bottom: 0;                  /* anchor text to the line baseline */
  height: auto;
  padding-left: 5px;
}

.gap-ruler .ruler-text {
  position: absolute;
  right: 0;
  top: calc(-0.4em) !important;  /* your “perfect middle” trick */
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Hour (:00) — 2px solid black; big label                            */
/* ------------------------------------------------------------------ */
.gap-ruler .row[data-kind="hour"] .ruler-line,
.gap-ruler .row.hour .ruler-line {
  border-top: 1px solid #000;
  width: calc(100% - 52px) !important;
}
.gap-ruler .row[data-kind="hour"] .ruler-text,
.gap-ruler .row.hour .ruler-text {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}

/* ------------------------------------------------------------------ */
/* Half (:30) — 1px solid #7F7F7F; medium label                       */
/* ------------------------------------------------------------------ */
.gap-ruler .row[data-kind="half"] .ruler-line,
.gap-ruler .row.half .ruler-line {
  border-top: 1px solid #7F7F7F;
  width: calc(100% - 45px) !important;
}
.gap-ruler .row[data-kind="half"] .ruler-text,
.gap-ruler .row.half .ruler-text {
  font-size: 13px;            /* you said 13px earlier; keeping that */
  font-weight: 300;
  color: #7F7F7F;
}

/* ------------------------------------------------------------------ */
/* Quarter (:15/:45) — 1px dashed #BFBFBF; small label                */
/* ------------------------------------------------------------------ */
.gap-ruler .row[data-kind="quarter"] .ruler-line,
.gap-ruler .row.quarter .ruler-line {
  border-top: 1px dashed #BFBFBF;
  width: calc(100% - 33px) !important;
}
.gap-ruler .row[data-kind="quarter"] .ruler-text,
.gap-ruler .row.quarter .ruler-text {
  font-size: 10px;
  font-weight: 300;
  color: #A6A6A6;
}

/* ------------------------------------------------------------------ */
/* Bookends — 2px solid #10b981, label 16px/500                       */
/* Book-start label sits ABOVE the line; book-end BELOW               */
/* Line spans only 75% of the ruler width                             */
/* ------------------------------------------------------------------ */
.gap-ruler .row[data-kind="book-start"] .ruler-line,
.gap-ruler .row.book-start .ruler-line,
.gap-ruler .row[data-kind="book-end"] .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  border-top: 3px solid #10b981!important;
  width: 70% !important;      /* your 65% rule */
}

.gap-ruler .row[data-kind="book-end"] .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  margin-top: 0px;
}

.gap-ruler .row[data-kind="book-start"] .ruler-line,
.gap-ruler .row.book-start .ruler-line {
  margin-top: 0px;
}

/* Book-start label just above the line */
.gap-ruler .row[data-kind="book-start"] .ruler-text,
.gap-ruler .row.book-start .ruler-text {
  bottom: calc(2px + 0.2em) !important; /* nudge above the line */
  font-size: 16px;
  font-weight: 500;
  color: #10b981;
  right: auto;                 /* align left if you prefer */
  left: 3;
  top: -14px!important;
  padding-left: 0;
}

/* Book-end label just below the line (default bottom:-0.4em already does that) */
.gap-ruler .row[data-kind="book-end"] .ruler-text,
.gap-ruler .row.book-end .ruler-text {
  font-size: 16px;
  font-weight: 500;
  color: #10b981;
  right: auto;
  left: 3;
  padding-left: 0;
  top: 2px!important;
  /* keep bottom: -0.4em from base */
}

/* Optional: make bookend green line sit on top of any base line beneath */
.gap-ruler .row[data-kind="book-start"] .ruler-line,
.gap-ruler .row.book-start .ruler-line,
.gap-ruler .row[data-kind="book-end"] .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  z-index: 1;
}

.gap-ruler .row[data-kind="book-start"] .ruler-textwrap,
.gap-ruler .row[data-kind="book-end"] .ruler-textwrap {
width: 100%;
}

.avail-resizer-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 10;
    cursor: ns-resize;
}
.avail-bar.available.hover-top {
    box-shadow: 0px -33px 33px -16px #83ffe8;
}
.avail-bar.available.hover-bottom {
    box-shadow: 0px 33px 33px -16px #83ffe8;
}
.is-resizing .avail-bar.available.active-resize-handle.resize-handle-top {
    box-shadow: 0px -33px 33px -16px #00d3ac;
}
.is-resizing .avail-bar.available.active-resize-handle.resize-handle-bottom {
    box-shadow: 0px 33px 33px -16px #00d3ac;
}


.logo-holder {
  cursor: pointer; 
  user-select: none; 
  -webkit-tap-highlight-color: transparent;
}

.backup-load {
  background: rgb(0, 148, 86);
  margin-bottom: 20px;
  margin-right: 10px;
  margin-top: 10px;
  padding: 12px 16px;
}

.relinkjson {
  padding: 14px 20px;
}


.backup-load:hover {
  background: rgb(0, 116, 67);
}



.card.card-day {
  margin: 0px 0px 34px 0px !important;
  background: #eee!important;
  padding: 0px;
}

.avail-bar.extended.lane {
  margin-bottom: 12px;
  margin-top: 12px;
  padding-left: 0px;
  padding-right: 3px;
}

.avail-bar.extended.lane .lane-label {
margin-left: 15px;
}

.avail-bar.extended.lane .task-row.threecols {
   padding-left: 5px;
}

.avail-bar.emergency.lane {
  margin-bottom: 12px;
  padding-left: 0px;
  padding-right: 3px;
}

.avail-bar.emergency.lane .lane-label {
margin-left: 15px;
}

.avail-bar.emergency.lane .task-row.threecols {
   padding-left: 5px;
}


.avail-bar {
 margin: 0px 6px 0px 12px;
}

.marker-lane {
  margin: 6px 6px 6px 6px;
  padding: 0px!important;
}

.marker-lane .task-wrap {
margin: 0px!important;
padding: 5px 5px 5px 5px!important;
}

.task-row.threecols.milestone-row,
.task-row.threecols.deadline-row {
margin: 0px!important;
}



/* Mobile: keep Undo/Redo visible */

/* START MOBILE */ 
/* START MOBILE */
/* START MOBILE */ 
/* START MOBILE */ 
@media (max-width: 820px) {
/* START MOBILE */ 
/* START MOBILE */ 
/* START MOBILE */ 
/* START MOBILE */

 .routine-chip-in-the-drawer {
    top: -2px!important;
    left: 5px!important;
  }

.split-panes.vertical .split-resizer {
  padding-top: 5px!important;
  background-color: transparent!important;
  padding-bottom: 5px!important;
}

.scroll-container {
  height: 100%;
  min-height: 0;
}


.card.card-day.card-today {
  position: relative!important;
}

.split-panes.vertical .split-resizer .handle {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

.now-circle {
  margin-left: 28px;
  margin-top: 2px;
  height: 9px;
  width: 9px;
  border-radius: 200px;
  border: 3px solid #ff9500;
  background: white;
  justify-content: normal;
  font-weight: 500!important;
  text-align: center!important;
  font-size: 0px!important;
  padding: 0px!important;
  color: transparent!important;
}

.now-marker {
color: transparent!important;
}




.card-day > header {
  top: 0px;
}

.card.card-day {
  margin: 0px 0px 20px 0px !important;
  background: #eee!important;
  padding: 0px;
  width: auto!important;
}

.card-today { 
  position: relative; 
  z-index: 1;
 }

.task-row.threecols{
    margin: 0px 0px 0px 10px!important;
}

.marker-lane {
   margin: 0px 0px 0px 0px;
}

.avail-bar {
 margin: 0px 0px 0px 12px;
}

.marker-lane {
  margin-bottom: 6px;
}



.split-pane.timeline {
  padding: 0px;
  margin: 0px;
  background: transparent;
}



.split-pane.timeline .card {
  padding: 0px;
  margin: 10px 0px;
  background: transparent;
}

.card.card-day {
  margin-left: 0;
  margin-right: 0;
  background: #eee!important;
}

.scroll-container.thin-scrollbar {
 margin: 0px;
 padding: 0px;
 background: transparent;
 overflow-x: hidden !important;
}

.toolbar {
  margin: 0px;
  border-radius: 0px;
}

.logo-holder {
  height: 30px;
  width: 27px;
  overflow: clip;
}

  .hide-on-mobile { 
        display: none!important; 
      }

  /* BUT keep icon-buttons in the left cluster visible (undo/redo/show/hide) */
  .headnav .left .icon-button { 
      display: inline-flex !important; 
      }

  .split-panes.vertical .split-resizer {
    width: 100% !important;
  }

  .split-panes.vertical
  .split-resizer
  .handle.splitter-drag-handle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 24px !important;

    background: transparent !important;
    border: 1px solid #fff !important;
    border-radius: 30px;
  }

    .row.day-add-btns {
      gap: 0px;
    }

    button {
      margin-right: 0.005rem;
      margin-left: 0.005rem;
      padding-left: 1px;
      padding-right: 1px; 
      font-size: 9px; 
  }

.input.duration-input.pill.pill-duration,
.input.time-input {
  font-size: 9px;
  padding-left: 3px;
  padding-right: 3px;
}

.input.duration-input.pill.pill-duration {
width: 65px!important;
min-width: 65px!important;
max-width: 65px!important;
}

.btn.btn-resched {
  width: 42px!important;
  font-size: 8px;
}

:root {
  --tr-time-w: 65px;
  --tr-pill-w: 20px;
  --tr-right-w: 96px;
}


button.pill.pill-add.pill-work,
button.pill.pill-add.pill-meeting {
    font-size: 9px!important;
    width: 78px!important;
    min-width: 78px!important;
    max-width: 78px!important;
}

.version-banner {
  position: fixed!important;
  top: 0px!important;
  z-index: 30000!important;
}

.toolbar {
  position: fixed!important;
  top: 14px!important;
  z-index: 40000!important;
  width: 100%!important;
}

.page-main {
  margin-top: 50px!important;
  height: calc(100dvh - 50px)!important;
  min-height: calc(100dvh - 50px)!important;
  max-height: calc(100dvh - 50px)!important;
}

/* Keep scroll inside the app; reduce iOS rubber-band refresh triggers */
html, body { overscroll-behavior-y: none; }  /* iOS 16+/modern browsers */
.scroll-container { overscroll-behavior-y: contain; }

.btn.actionbar-btns {
  opacity: 0.85;
}

.pill.pill-personal {
  display: none;
}

.pill.pill-client.pill-work,
.pill.pill-client.pill-meeting {
position: absolute;
pointer-events: none;
background: rgb(41, 55, 105);
color: white;
top: -9px;
left: 4px;
border: 0px solid #fff;
display: inline;
width: auto!important;
padding: 2px 6px;
border-radius: 30px;
font-size: 8px!important;
min-width: 0px!important;
max-width: 300px!important;
}

.task-row.threecols.deadline-row 
 .pill.pill-client.pill-work,
.task-row.threecols.milestone-row 
 .pill.pill-client.pill-work {
position: absolute;
pointer-events: none;
background: rgb(81, 21, 18)!important;
color: white;
top: -12px;
z-index: 5;
left: 4px;
border: 0px solid #fff;
display: inline;
width: auto!important;
padding: 1px 6px;
border-radius: 30px;
font-size: 8px!important;
min-width: 0px!important;
max-width: 300px!important;
}


/* maybe figure out how to know if client chosen */
.input.title-input {
padding: 8x 8px 8px 4px;
}

.title-input {
border: 1px solid transparent!important;
}

.task-row .row-left {
  display: flex;
  width: 100px;
}

.pull-loader {
    margin: 60px auto 50px 5%!important;
    width: 90%;

}

.taskeeCatEmojiTaskrow {
  font-size: 11px!important;
}

.input.title-input.has-taskee{
padding: 16px 8px 0px 20px;
}

.avail-bar.available .btn.btn-addtask-trigger {
  right: -4px!important;
}


.vertical-gradient-divider.desktop-hide-divider {
  display: block!important;
}

.task-row .time-input {
  width: 90px;
  text-align: center;
}


/* END MOBILE */ 
/* END MOBILE */ 
/* END MOBILE */ 
/* END MOBILE */ 
}
/* END MOBILE */ 
/* END MOBILE */ 
/* END MOBILE */ 
/* END MOBILE */ 



.taskeeCatEmojiTaskrow {
  font-size: 15px;
}

.stack-label.routines-header {
  font-size: 10px!important;
}

.input.duration-input.pill.pill-duration,
.pill-duration:focus {
  border: 1px solid transparent!important;
  outline: none!important;
}

.title-input {
border: 1px solid transparent!important;
}

.input.title-input.has-taskee{
padding: 16px 8px 0px 7px;
}

.btn.btn-event {
  margin-right: 8px;
}

.modal.routines-modal 
.tabs .tab { 
  background: lightgray; 
  color: inherit; 
  border: 0px solid #7F7F7F;
  opacity: .7;
}

.modal.routines-modal 
.tabs .tab:hover { 
  background: lightgray; 
  color: inherit; 
  border: 0px solid #7F7F7F;
  opacity: 1;
}

.modal.routines-modal 
.tabs .tab-active {
  background: black;
  color: white;
  pointer-events: none;
  border: 0px solid #7F7F7F;
  opacity: 1;
}


/* PWMA chips and add task chips START */ 

.kind-chip {
  display:inline-flex;
  position: absolute;
  align-items:center;
  justify-content:center;
  width: 16px!important;
  max-width: 16px!important;
  min-width: 16px!important;
  height: 16px!important;
  min-height: 16px!important;
  max-height: 16px!important;
  left: -18px;
  top: 50%;
  padding-right: 1px;
  bottom: auto;
  margin-top: -9px;
  border-radius:50%;
  font: 600 8.5px/1 Inter,sans-serif;
  background:#eef;
  border: 2px solid #ccd;
  border-width: 2px!important;
  margin-right:6px;
  cursor: pointer;
  z-index: 5000;
  color: white;
}

.row.day-add-btns {
  position:relative;
}



.btn.btn-addtask-trigger {
    color:#000;
    background-color: transparent;
    padding: 0px!important;
    border-radius: 100px;
    border: 1.5px solid black;
    font-size: 24px;
    font-weight: 100;
    max-width: 26px;
    min-width: 26px;
    max-height: 26px;
    min-height: 26px;
    padding: 0px;
    opacity: .4;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
}





.btn.btn-addtask-trigger:hover {
    opacity: 1.0;
}

.plus-icon-line {
    background: black!important;
}

.avail-bar.available .btn.btn-addtask-trigger {
    border: 1.5px solid #008755;
    position: absolute;
    right: 10px;
}
.avail-bar.available .plus-icon-line {
    background:#008755!important;
}





.addtaskbtn-pluschild {
    font-size: 18px;
    line-height: 100%;
}




.kind-chip.chip-w { background:#DEEBF7; border-color:#9CC3E7; color:#245DD6}
.kind-chip.chip-p { background: #F0EAFF; border-color: #C7B9E6; color:#785ABF }
.kind-chip.chip-m { background: #1d4ed8; border-color: #1d4ed8; }
.kind-chip.chip-e { background: #785ABF; border-color: #785ABF; }
.kind-chip.chip-d { background: #e7e7e7; border-color: #a3a3a3; color:#727274}
.kind-chip.chip-c { background: #efe9cc; border-color: #d3c878; color:#948c51 }

/* Split context/type chip system */
.kind-chip.tw-type-chip--personal-light {
  background: #F0EAFF !important;
  border-color: #C7B9E6 !important;
  color: #785ABF !important;
}

.kind-chip.tw-type-chip--work-light {
  background: #DEEBF7 !important;
  border-color: #9CC3E7 !important;
  color: #245DD6 !important;
}

.kind-chip.tw-type-chip--personal-dark {
  background: #785ABF !important;
  border-color: #785ABF !important;
  color: #FFFFFF !important;
}

.kind-chip.tw-type-chip--work-dark {
  background: #245DD6 !important;
  border-color: #245DD6 !important;
  color: #FFFFFF !important;
}

.kind-chip.tw-type-chip--achievement {
  background: #FFF9DF !important;
  border-color: #D6B833 !important;
  color: #785ABF !important;
  font-style: normal !important;
}

.kind-chip.tw-type-chip--achievement-work {
  color: #245DD6 !important;
}

.kind-chip.tw-type-chip--achievement-personal {
  color: #785ABF !important;
}


/* =========================================================
   Deadline taskrows — Achievement-row clone
   Keep the three palette blocks separate for future styling.
   ========================================================= */

.task-wrap.is-taskrow-deadline .tw-deadline-pill-expanded,
.task-row.is-taskrow-deadline .tw-deadline-pill-expanded {
  background: #FFF9DF !important;
  border-color: #D6B833 !important;
  color: #8A6F00 !important;
}

.task-wrap.is-proj-milestone-deadline .tw-deadline-pill-expanded,
.task-row.is-proj-milestone-deadline .tw-deadline-pill-expanded {
  background: #FFF9DF !important;
  border-color: #D6B833 !important;
  color: #8A6F00 !important;
}

.task-wrap.is-proj-final-deadline .tw-deadline-pill-expanded,
.task-row.is-proj-final-deadline .tw-deadline-pill-expanded {
  background: #FFF9DF !important;
  border-color: #D6B833 !important;
  color: #8A6F00 !important;
}

.kind-chip.tw-deadline-pill-expanded {
  position: relative !important;
  width: calc(var(--tr-time-w, 132px) + 10px) !important;
  max-width: calc(var(--tr-time-w, 132px) + 10px) !important;
  min-width: 110px !important;
  height: 25px !important;
  max-height: 25px !important;
  min-height: 25px !important;
  top: -2px;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 14px 0 9px !important;
  font-size: 11.5px !important;
  font-style: normal !important;
  letter-spacing: 0.01em;
  box-sizing: border-box;
  margin-top: -10px !important;
  margin-right: -8px !important;
  overflow: visible !important;
  cursor: default !important;
  pointer-events: none !important;
}

.tw-deadline-calendar-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff;
}

.tw-deadline-calendar-icon svg {
  width: 10px;
  height: 10px;
  display: block;
}

.tw-deadline-text {
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}

.tw-deadline-variant-badge {
  position: absolute;
  top: -10px;
  left: 8px;
  z-index: 2;
  min-width: 36px;
  height: 13px;
  padding: 0 5px;
  border: 1px solid #D6B833;
  border-radius: 999px;
  background: #FFF9DF;
  color: #8A6F00;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.task-row.taskrow-deadline > .row-content > .row-left {
  overflow: visible !important;
}

.action-bar-drawer.is-deadline-actionbar .taskrow-to-queue-action,
.action-bar-drawer.is-deadline-actionbar .taskrow-to-queue-action + .vertical-gradient-divider,
.action-bar-drawer.is-deadline-actionbar .taskrow-duplicate-action,
.action-bar-drawer.is-deadline-actionbar .taskrow-duplicate-action + .vertical-gradient-divider,
.action-bar-drawer.is-deadline-actionbar .taskrow-reschedule-action,
.action-bar-drawer.is-deadline-actionbar .taskrow-reschedule-action + .vertical-gradient-divider,
.action-bar-drawer.is-project-deadline-actionbar .delete-taskrow,
.action-bar-drawer.is-project-deadline-actionbar .delete-taskrow + .vertical-gradient-divider {
  display: none !important;
}

.btn.actionbar-btns.taskrow-go-to-task-action {
  min-width: 58px !important;
  max-width: 58px !important;
}

.btn.actionbar-btns.taskrow-move-deadline-action {
  min-width: 76px !important;
  max-width: 76px !important;
}

@media (max-width: 820px) {
  body .task-row.threecols.taskrow-deadline > .row-content > .row-left {
    flex: 0 0 98px !important;
    width: 98px !important;
    min-width: 98px !important;
  }

  body .task-row.threecols.taskrow-deadline .kind-chip.tw-deadline-pill-expanded {
    left: -6px !important;
    margin-left: -24px !important;
  }
}

@media (display-mode: standalone) {
  html body .task-row.threecols.taskrow-deadline .kind-chip.tw-deadline-pill-expanded {
    font-size: 11.5px !important;
    line-height: 0.25 !important;
    gap: 4px !important;
  }

  html body .task-row.threecols.taskrow-deadline .tw-deadline-calendar-icon {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }
}


/* PWMA chips END */ 


/* ACTION BAR START */ 

.tr-actions { 
  position: relative;
  z-index: 3000;
  height: 100%;
  display: flex;

}

.btn.showactionbar { 
  position: relative;
  padding: 0px!important;
  margin: 0px!important;
  z-index: 1;
  padding: 0px;
  background-color: transparent;
  min-height: 100%!important;
  display: flex;
  align-items: center;
  justify-content: center;

}

.action-bar-drawer {
  background-color: white;
  display: flex;
  flex-direction: row;
  position: absolute;
  height: 42px;
  right: 3px;
  top: -11px;
  z-index: 500;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.vertical-gradient-divider {
  min-height: 100%;
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0) );
}

.vertical-gradient-divider.desktop-hide-divider {
  display: none;
}

.avail-bar.available .vertical-gradient-divider {
  background: linear-gradient(to bottom, #01583f00, #01583f50, #01583f00 );
}

.avail-bar.available .vertical-gradient-divider.taskrow-row-divider.post-context-divider,
.vertical-gradient-divider.taskrow-row-divider.post-context-divider {
  background: linear-gradient(to right, #00000022, #00000015, #00000008, #00000004, white )!important;
  width:15px!important;
  max-width:15px!important;
  min-width:15px!important;
  margin-right: -10px!important;
}

.btn.actionbar-btns {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  color: black;
  height: 100%;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 8px;
  min-width: 50px;
  width: auto;
  opacity: 0.7;
}

.btn.actionbar-btns:hover {
  opacity: 1.0;
}
 
.btn.actionbar-btns.close-action-bar {
   min-width: 45px;
   width: 45px;
   font-size: 16px;
}


.action-icon-spacer { height: 2px;}

/* ACTION BAR END */ 

.go2today {
  position: absolute;
  font-size: 14px;
  top: auto;
  left: 15px;
  right: auto; 
  bottom: 15px!important;
  padding: 6px 12px!important;
  border-radius: 100px;
  z-index: 5;
  width: auto;
  color: #ED7D31;
  background: white;
  opacity: .85;
  box-shadow: 0px 4px 20px 0px rgba(2, 6, 23, 0.4);
  @media (max-width: 820px) {
      top: auto;
      left: 8px;
      right: auto; 
      bottom: 38px!important;
      padding: 6px 12px;
  }
}

.go2today:hover {
  background: #ED7D31;
  color: white;
  opacity: 1.0;
}




/* Full-screen modal shell that sits above header */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 300000; /* above header */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop > .modal {
  width: calc(100vw - 100px);
  height: calc(100dvh - 100px);
  margin: 50px;
  background: #fff;
  border-radius: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}



/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* ------------- START ----------------- */
/* ------------- START ----------------- */
/* ------------- START ----------------- */

/* --- Global Adaptive Control Center Positioning --- */

.adaptive-control-center {
    /* Base style: Hidden by default and ready for fixed positioning */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px; /* Base padding */
    gap: 12px;
    z-index: 5000;
    font-size: 12px;

    /* NEW: Set desktop defaults here */
    position: relative; /* Default/Desktop position */
    width: auto;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    color: white; /* Default/Desktop text color */
}

.view-toggle {
    cursor: pointer;
    display: flex!important;
    justify-content: center;
    font-size: 12px;
    width: 90px;
  }

/* --- DESKTOP HEADER STYLES (Above Mobile Breakpoint) --- */

@media (min-width: 820px) { 
    /* 1. Ensure the placeholder div is visible */
    .headnav .center {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%; /* Important for centering child */
    }
     .headnav {
        min-height: 50px!important;
      }

    /* 2. Position the AdaptiveControlCenter inside the header */
    .adaptive-control-center {
        /* OVERRIDE mobile fixed positioning */
        position: relative; 
        bottom: auto;
        left: auto;
        right: auto;
        width: auto;
        height: auto;
        
        /* HEADER AESTHETICS (from image analysis) */
        background-color: transparent;
        box-shadow: none; /* Remove footer shadow */
        
        /* ENSURE WHITE TEXT/ICONS ON DESKTOP */
        color: white; /* White text for all children */
    }

    /* 3. Hide the component at the root level (where it sits for the fixed mobile footer) */
    .edward-productivity-tool > .adaptive-control-center {
      /* Re-applying display: none to the root-level component only
         The one nested in the header will remain visible via the cascade */
      display: none; 
    }
    
    /* 4. EXPLICITLY SHOW the one inside the desktop anchor */
    .desktop-control-center-anchor .adaptive-control-center {
        display: flex; /* Make it visible and use flex layout */
    }
    
    /* Target all buttons/icons within the header */
    .adaptive-control-center .icon-btn {
        color: white; /* White icon color */
    }

          .drive-status-wrapper {
              display: flex;
              flex-direction: row;
          }

          .drive-status-border-line {
              background: linear-gradient(90deg, white, black, white);
              height: 100%;
              width: 1px;
          }
  }


/* --- MOBILE FOOTER STYLES (Default / Below Desktop Breakpoint) --- */

@media (max-width: 820px) { /* Adjust breakpoint as needed */
    .adaptive-control-center {
        /* FIXED FOOTER POSITIONING */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 20px;
        color: white;
        margin: 10px 15px;
        width: auto;
        height: 50px; /* Set a height for the footer */
        padding: 8px 16px; /* Increased padding for mobile touch targets */
        background: linear-gradient(90deg, #6f3ff2, #3374ff);
        /* FOOTER AESTHETICS (from image analysis) */
        box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3); /* Shadow for lift */

        
        /* ENSURE DARK TEXT/ICONS ON MOBILE */
        color: white; /* Dark text for all children */
    }

    /* Target all buttons/icons within the footer */
    .adaptive-control-center .icon-btn {
        
    }
    
    /* Ensure the adaptive center doesn't show in the header on mobile */
    .headnav .center {
        display: none;
    }

    /* The new logic for scrolling behavior: */
    
    /* 1. Hide the toolbar/header when scrolling down */
    .edward-productivity-tool.is-footer-visible .toolbar {
        display: none;
    }
    
    /* 2. Show the adaptive component when scrolling down */
    .edward-productivity-tool.is-footer-visible .adaptive-control-center {
        /* No change needed here, it's already position: fixed */
    }

    /* 3. Hide the adaptive component when scrolling up (header visible) */
    .edward-productivity-tool:not(.is-footer-visible) .adaptive-control-center {
        display: none !important; /* HIDE the component when header is visible */
    }
    
}

/* --- View Toggle Button Specifics (Color Switch) --- */
/* You will need to make sure the pill-btn's text and icon colors inherit */

.view-toggle-text {
  /* Inherits color */
}

/* Placeholder for your Timeline/Queue icons */
/* Assuming the SVG is set to currentColor, only the CSS `color` property is needed on the parent */
.view-toggle-timeline-icon[data-active="true"],
.view-toggle-queue-icon[data-active="true"] {

  /* You may want to define a specific active color here, 
     e.g., a bright purple, which will override the black/white parent color. */
}

.view-toggle-queue-icon {
  padding-top: 1px;
}


/* -------------- END ------------------ */
/* -------------- END ------------------ */
/* -------------- END ------------------ */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */




/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* ------------- START ----------------- */
/* ------------- START ----------------- */
/* ------------- START ----------------- */


.avail-bar {
  position: relative;
}

/* label stays left, leave room for + and add-bar
.avail-bar .avail-label {
  padding-right: 120px; 
*/

/* the little (+) pill */
.gap-add-trigger {
  position: absolute;
  background: transparent;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #10b981;
  font-weight: 100;
  color: #10b981;
  cursor: pointer;
  font-size: 22px;
  line-height: 0;
  padding: 0px 0px 3px 0px;
}

.gap-add-trigger:hover {
  border: 1px solid #10b981;
  background: white;
  color: #10b981;
}

/* the P/W/M/A row */
.gap-addbar {
  position: absolute;
  top: 50%;
  right: 6px;
  max-height: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 2px 6px 15px 6px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  gap: 4px;
  z-index: 5;
}

/* -------------- END ------------------ */
/* -------------- END ------------------ */
/* -------------- END ------------------ */
/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* --- NEW CSS FOR THE GAP (+) BAR --- */



.actionbar-svg-icons {
min-height: 19px;
 padding: 1px;
 margin-bottom: 3px; 
}

.actionbar-svg-icons.move-icon-taskrow {
  min-height: 21px;
  min-width: 21px;
  padding: 1px;
  margin-bottom: 1px;
}

/* same padding-right on both buttons so label stays visually centered */
.privacy-toggle-btn {
  position: relative;
}

.privacy-label-and-tick {
 display: flex;
 flex-direction: row;
}

/* small space between word and tick */
.privacy-tick {
  position: absolute;
  top: 3px; right: 9px;
  background: black;
  color: white;
  padding: 0px 2px 2px 1px;
  width: 9px; min-width: 9px;
  height: 9px; min-height: 9px;
  border-radius: 50%;
}
.privacy-label {
  display: inline;
}


  .avail-bar  {
		z-index: 1;
		}

  .day-header-date {
      margin-left: 6px;
      text-align: left;
      margin-top: -3px;
      padding: 4px 0px;
      position: relative;
      top: -6px;
    }

/* ——— timeline on mobile ——— */
/* ———       START      ——— */
/* ——— timeline on mobile ——— */
@media (max-width: 820px) {

  .split-pane {
    border-radius: 0px!important;
  }


  .split-pane.timeline .card {
    padding: 0px !important;
    margin: 0px !important;
    border-radius: 0px !important;
    padding-bottom: 40px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.0);
	}

    .card-day > header {
		border-radius: 0px;
		padding-left: 10px !important;
	}

  .day-header-date {
      text-align: left;
      margin-top: 0px;
      margin-left: 5px;
      padding: 4px 0px 1px 0px;
    }

  .mmmdd-header { font-size: 16px!important;}

    .dayofweek-header { 
    display: inline-block; 
    margin-bottom: 0px; 
    font-size: 10px!important; 
    width: 100%;
    position: relative;
    bottom: -3px;
  }

	.card-day::before {
		width: 0px;
		}

  .avail-bar.extended,
  .avail-bar.emergency,
  .avail-bar.available,
	.avail-bar  {
		margin-left: 16px !important;
		margin-right: 6px !important;
		}

    .task-wrap  {
		margin-left: 10px !important;
		margin-right: 6px !important;
		}

   .split-pane.timeline .card {
  		background: #fff;
		}

   .toolbar {
      margin: 0px 0px 0px 0px!important;
      padding: 14px 15px 0px 10px!important;
      top: 0px!important;
      width: auto!important;
   }

    .taskwand-version-number p {
      font-size: 11px;
    }

   .scroll-container.thin-scrollbar {
      background: white;
    }
  }
  /* ——— timeline on mobile ——— */
  /* ———     END.     ——— */ 
/* ——— timeline on mobile ——— */


  .avail-bar.extended,
  .avail-bar.emergency,
  .avail-bar.available,
	.avail-bar  {
		margin-left: 16px !important;
		}

    .task-wrap  {
		margin-left: 4px !important;
		}

    .card.card-day {
      padding-right: 4px;
      margin-right: 0px!important;
      width: calc(100% - 20px);
    }

    .handle {
      left: 1px;
      position: absolute;
    }

/* Make sure the day card is a positioning context for the pill + line.
   (You may already have this.) */


  .card-day {
    position: relative;
  }

  .split-resizer {
    justify-content: left;
  }
  .split-panes.horizontal .split-resizer {
    width: 12px !important;
  }



    .toolbar {
      margin: 0px 8px 0px 17px;
      padding: 14px 15px 0px 10px!important;
      top: 0px!important;
      width: auto!important;
    }

    .taskwand-version-number p {
      white-space: nowrap;
    }

     .search {
      margin-left: -2px!important;
      margin-right: -8px!important;
    }


/* Remaining-time pill on the right */
.now-remaining-pill {
  z-index: 5;
  margin-right: 36px;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  background: #ED7D31;      /* same as TODAY_COLOR */
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 4px 10px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

/* Outer "now" task row (gradient border is set inline) */
.task-row.threecols.taskrow-now {
  padding: 2px!important;
  position: relative;
}

/* Inner white container wrapping .row-left / .row-mid / .row-right */
.taskrow-now-white-container {
  background: #fff;
  display: flex;
  flex-direction: row;
  border-radius: 11px;
  width: 100%;
  padding: 8px 10px; /* adjust to match your original .threecols padding */
}

.taskrow-now-white-container .row-left,
.taskrow-now-white-container .row-mid,
.taskrow-now-white-container .row-right {
}


.modal.routines-modal {
  position: relative;        /* you already had this inline */
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.routine-header {
  flex: 0 0 auto;
}

.routine-tabs {
  flex: 0 0 auto;
}

.modal.routines-modal .tabs {

}

/* The section that contains scroll area + footer */
.routines-scroll-and-buttons {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;            /* fill remaining space in modal */
  min-height: 0;             /* critical so inner flex child can scroll */
}

/* This is the scrollable region */
.routines-scroll-window-wrapper {
  flex: 1 1 auto;            /* take all space above footer */
  min-height: 0;             /* allows it to shrink and scroll */
  overflow-y: auto;          /* scroll here */
  align-self: stretch;       /* full width */
}

.routines-scroll-window {
  display: flex;
  flex-direction: column;
  gap: 12px;                 /* or your stack-4 spacing */
  padding-right: 4px;        /* small buffer for scrollbar if you want */
}

.routines-footer-buttons {
  flex: 0 0 30px;            /* reserves ~30px of height */
  margin-top: 8px; 
  padding-top: 10px;          /* small gap above */
  justify-content: center;
  gap: 8px;
  border-top: 1px solid lightgray;
}

 .save-routine {
  width: 136px;
  font-size: 11px;
  margin: 0px;
  background: #555;
 }

 .apply-routine{
  width: 200px;
  font-size: 11px;
  margin: 0px;
  background: black;
 }
 
  .routines-scroll-window 
  .text-muted {
    margin-top: -12px;
    font-size: 11px!important;
  }

   .routines-scroll-window 
   .row.wrap {
    padding: 16px 0px;
    
    border-top: 1px solid lightgray;
  }

    .btn.btn-danger.delete-routine-row {
      min-width: 40px;
     }

  @media (max-width: 820px) {
 
              .modal.routines-modal .tabs {
                  gap: 2px;
                }

              .modal.routines-modal .tabs .tab {
                font-size: 18px!important;
                padding: 6px 9px; 
                border-radius: 5px;
              }

              .btn.close-routines-modal {
                width: 30px;
              }

              .modal.routines-modal {
                  margin: 15px!important;
                  }

          }


/* ===== Holidays launcher + modal ===== */

.routine-header {
  align-items: flex-start;
  gap: 12px;
}

.routine-header-actions {
  flex: 0 0 auto;
}

.routine-holidays-button {
  min-width: 84px;
  border: 1px solid #d9ccf7 !important;
  border-radius: 8px !important;
  background: #f7f3ff !important;
  padding: 6px 11px !important;
  color: #6842a8 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.routine-holidays-button:hover,
.routine-holidays-button:focus-visible {
  border-color: #c7b6ee !important;
  background: #efe8ff !important;
  color: #56358d !important;
}

.modal-overlay.holiday-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000300;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 18px;
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(1.5px);
}

.card.holiday-modal-card {
  width: min(780px, calc(100vw - 36px));
  max-width: 780px;
  max-height: min(90dvh, 860px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 !important;
  border: 1px solid #dedede !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 0 !important;
  color: #222;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.27) !important;
}

.holiday-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}

.holiday-modal-heading-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.holiday-modal-title {
  margin: 0;
  color: #222;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.15;
}

.holiday-modal-subtitle {
  max-width: 610px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
}

.btn.holiday-modal-close {
  flex: 0 0 auto;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px;
  margin: 0 !important;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 0 !important;
  color: #777;
  font-size: 20px;
  line-height: 1;
}

.btn.holiday-modal-close:hover,
.btn.holiday-modal-close:focus-visible {
  border-color: #e1e1e1;
  background: #f3f3f3;
  color: #222;
}

.holiday-modal-body {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 15px 18px 18px;
  background: #fff;
}

.holiday-modal-section {
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  background: #fff;
  padding: 13px 14px 14px;
}

.holiday-modal-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.holiday-modal-section-title {
  color: #303030;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.25;
}

.holiday-modal-section-help {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
}

.holiday-country-add-row {
  display: flex;
  align-items: center;
  margin-top: 11px;
}

select.input.holiday-country-select {
  width: min(360px, 100%);
  height: 34px;
  box-sizing: border-box;
  border-color: #d7d7d7;
  padding-right: 28px;
  color: #333;
  font-size: 11px;
}

select.input.holiday-country-select:focus {
  border-color: #9d7de2;
  outline: none;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.10);
}

.holiday-selected-pills {
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.holiday-selected-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 26px;
  box-sizing: border-box;
  border: 1px solid #d9ccf7;
  border-radius: 999px;
  background: #f7f3ff;
  padding: 2px 4px 2px 9px;
  color: #60408f;
  font-size: 10px;
  font-weight: 680;
  line-height: 1;
}

.holiday-selected-pill-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holiday-selected-pill-remove {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  color: #7657a8;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  line-height: 1;
}

.holiday-selected-pill-remove:hover,
.holiday-selected-pill-remove:focus-visible {
  background: #e9defe;
  color: #4e2f7d;
  outline: none;
}

.holiday-empty-selection {
  padding: 4px 0;
  font-size: 10px;
}

.holiday-religion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.holiday-calendar-choice {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-radius: 10px;
  background: #fafafa;
  padding: 9px 10px;
  color: #383838;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.holiday-calendar-choice:hover,
.holiday-calendar-choice:focus-visible {
  border-color: #c9bbe9;
  background: #f8f5ff;
  outline: none;
}

.holiday-calendar-choice.is-selected {
  border-color: #9d7de2;
  background: #f6f1ff;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.06);
}

.holiday-calendar-choice-check {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.holiday-calendar-choice.is-selected .holiday-calendar-choice-check {
  border-color: #7c3aed;
  background: #7c3aed;
}

.holiday-calendar-choice-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holiday-calendar-choice-label {
  overflow: hidden;
  color: #303030;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holiday-calendar-choice-scope {
  color: #858585;
  font-size: 9px;
  line-height: 1.25;
}

.holiday-modal-summary {
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  background: #fafafa;
  padding: 13px 14px;
}

.holiday-modal-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.holiday-modal-summary-stat {
  min-width: 0;
  padding: 0 12px;
  text-align: center;
}

.holiday-modal-summary-stat:first-child {
  padding-left: 0;
}

.holiday-modal-summary-stat:last-child {
  padding-right: 0;
}

.holiday-modal-summary-stat:not(:last-child) {
  border-right: 1px solid #e3e3e3;
}

.holiday-modal-summary-value {
  color: #5b3b91;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.holiday-modal-summary-label {
  margin-top: 4px;
  color: #747474;
  font-size: 9.5px;
  font-weight: 620;
  line-height: 1.25;
}

.holiday-modal-range-copy {
  margin-top: 11px;
  text-align: center;
  font-size: 9px;
  line-height: 1.3;
}

.holiday-modal-diff-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: #5e5e5e;
  font-size: 10px;
  font-weight: 620;
  line-height: 1.3;
  text-align: center;
}

.holiday-modal-diff-copy.text-muted {
  font-weight: 500;
}

.holiday-modal-clear-warning,
.holiday-modal-warning {
  border: 1px solid #efd79b;
  border-radius: 9px;
  background: #fff9eb;
  color: #765615;
  font-size: 10px;
  line-height: 1.4;
}

.holiday-modal-clear-warning {
  margin-top: 10px;
  padding: 8px 10px;
  text-align: center;
}

.holiday-modal-warnings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.holiday-modal-warning {
  padding: 8px 10px;
}

.holiday-modal-notes {
  border-top: 1px solid #ececec;
  padding: 10px 2px 0;
}

.holiday-modal-notes-title {
  margin-bottom: 5px;
  color: #666;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.holiday-modal-note {
  color: #777;
  font-size: 9.5px;
  line-height: 1.45;
}

.holiday-modal-note + .holiday-modal-note {
  margin-top: 4px;
}

.holiday-modal-note strong {
  color: #555;
}

.holiday-modal-error {
  border: 1px solid #e7b5b5;
  border-radius: 9px;
  background: #fff1f1;
  padding: 9px 10px;
  color: #9f2727;
  font-size: 10px;
  line-height: 1.4;
}

.holiday-modal-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 18px 12px;
  border-top: 1px solid #e7e7e7;
  background: #fafafa;
}

.holiday-modal-footer-status {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 9.5px;
  line-height: 1.3;
}

.holiday-modal-footer-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.holiday-modal-footer-actions .btn {
  min-width: 96px;
  margin: 0 !important;
  padding: 7px 12px !important;
  font-size: 11px;
}

.btn.holiday-modal-apply {
  min-width: 132px;
  border-color: #7c3aed !important;
  background: #7c3aed !important;
  color: #fff !important;
  font-weight: 750;
}

.btn.holiday-modal-apply:hover,
.btn.holiday-modal-apply:focus-visible {
  border-color: #6d28d9 !important;
  background: #6d28d9 !important;
  color: #fff !important;
}

@media (max-width: 820px) {
  .routine-header {
    gap: 8px;
  }

  .routine-header-actions {
    gap: 5px !important;
  }

  .routine-holidays-button {
    min-width: 0;
    padding: 6px 9px !important;
  }

  .modal-overlay.holiday-modal-backdrop {
    padding: 12px;
  }

  .card.holiday-modal-card {
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - 24px);
    border-radius: 14px !important;
  }

  .holiday-modal-header {
    padding: 13px 14px 11px;
  }

  .holiday-modal-body {
    padding: 13px 14px 15px;
  }

  .holiday-modal-section {
    padding: 12px;
  }

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

  .holiday-modal-footer {
    padding: 10px 14px;
  }
}

@media (max-width: 540px) {
  .routine-header > div:first-child {
    min-width: 0;
  }

  .routine-holidays-button {
    font-size: 10px !important;
  }

  .holiday-modal-subtitle {
    font-size: 10px;
  }

  .holiday-modal-summary-stat {
    padding: 0 8px;
  }

  .holiday-modal-summary-value {
    font-size: 18px;
  }

  .holiday-modal-summary-label {
    font-size: 9px;
  }

  .holiday-modal-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .holiday-modal-footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }

  .holiday-modal-footer-actions .btn,
  .btn.holiday-modal-apply {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 390px) {
  .holiday-religion-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Holidays & Birthdays tabs + Birthday editor ===== */

.routine-holidays-button {
  white-space: nowrap;
}

.holiday-modal-tabs {
  justify-content: center;
  flex: 0 0 auto;
}

.holiday-modal-tab {
  min-width: 116px;
  text-align: center;
}

.holiday-birthdays-section {
  overflow: visible;
}

.birthday-entry-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.9fr)
    minmax(210px, 1.2fr)
    auto
    auto;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.birthday-name-input,
.birthday-date-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.birthday-date-input-wrap {
  min-width: 0;
}

.birthday-date-input-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: stretch;
  min-width: 0;
}

.birthday-date-input-shell .birthday-date-input {
  height: 34px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn.birthday-calendar-button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0 !important;
  border: 1px solid #d7d7d7 !important;
  border-left: 0 !important;
  border-radius: 0 7px 7px 0 !important;
  background: #fafafa !important;
  padding: 0 !important;
  color: #6b7280 !important;
}

.btn.birthday-calendar-button:hover,
.btn.birthday-calendar-button:focus-visible {
  background: #f4f0ff !important;
  color: #6546a2 !important;
}

.birthday-save-draft,
.birthday-cancel-edit {
  min-height: 34px;
  margin: 0 !important;
  white-space: nowrap;
}

.birthday-input-help {
  margin-top: 8px;
  font-size: 9.5px;
  line-height: 1.4;
}

.birthday-entry-error {
  margin-top: 9px;
}

.birthday-picker-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 1000400;
  width: min(338px, calc(100vw - 52px));
  box-sizing: border-box;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.20);
}

.birthday-picker-heading {
  margin-bottom: 9px;
  color: #4a4a4a;
  font-size: 11px;
  font-weight: 780;
  text-align: center;
}

.birthday-picker-month-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.birthday-picker-month,
.birthday-picker-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-radius: 7px;
  background: #fafafa;
  color: #525252;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  text-align: center;
}

.birthday-picker-month {
  min-height: 31px;
  padding: 0 4px;
}

.birthday-picker-day {
  width: 100%;
  min-width: 0;
  min-height: 29px;
  padding: 0;
}

.birthday-picker-month:hover,
.birthday-picker-month:focus-visible,
.birthday-picker-day:hover,
.birthday-picker-day:focus-visible {
  border-color: #c8b9eb;
  background: #f5f1ff;
  color: #56358d;
  outline: none;
}

.birthday-picker-month.is-selected,
.birthday-picker-day.is-selected {
  border-color: #7c3aed;
  background: #7c3aed;
  color: #fff;
}

.birthday-picker-toolbar {
  min-height: 31px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.birthday-picker-toolbar > strong {
  grid-column: 2;
  text-align: center;
  color: #3f3f3f;
  font-size: 11px;
}

.btn.birthday-picker-back {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
  margin: 0 !important;
  padding: 5px 8px !important;
  font-size: 9.5px;
}

.birthday-picker-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.birthday-picker-year-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #ededed;
}

.birthday-picker-year-row > label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #555;
  font-size: 10px;
  font-weight: 750;
}

.birthday-picker-year-row > label span {
  color: #969696;
  font-size: 8.5px;
  font-weight: 500;
}

.birthday-picker-year-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.input.birthday-picker-year-input {
  width: 76px;
  height: 31px;
  box-sizing: border-box;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.btn.birthday-picker-clear-year {
  min-width: 0;
  height: 31px;
  margin: 0 !important;
  padding: 4px 8px !important;
  font-size: 9px;
}

.birthday-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 12px;
}

.birthday-picker-actions .btn {
  min-width: 82px;
  margin: 0 !important;
  font-size: 10px;
}

.birthday-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 14px;
}

.birthday-list-row {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  border-radius: 9px;
  background: #fafafa;
  padding: 6px 7px 6px 11px;
}

.birthday-list-row.is-editing {
  border-color: #cbbbea;
  background: #f8f5ff;
}

.birthday-list-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 auto;
}

.birthday-list-name {
  min-width: 0;
  overflow: hidden;
  color: #373737;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.birthday-list-date {
  flex: 0 0 auto;
  color: #777;
  font-size: 10px;
  white-space: nowrap;
}

.birthday-list-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn.birthday-list-edit,
.btn.birthday-list-delete {
  min-width: 0;
  height: 27px;
  margin: 0 !important;
  padding: 3px 8px !important;
  font-size: 9.5px;
}

.btn.birthday-list-delete {
  width: 27px !important;
  min-width: 27px !important;
  padding: 0 !important;
  color: #666;
  font-size: 15px;
}

.birthday-empty-list {
  padding: 15px 4px 7px;
  text-align: center;
  font-size: 10px;
}

@media (max-width: 760px) {
  .birthday-entry-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .birthday-name-input {
    grid-column: 1;
  }

  .birthday-date-input-wrap {
    grid-column: 2;
  }

  .birthday-save-draft {
    grid-column: 1;
  }

  .birthday-cancel-edit {
    grid-column: 2;
  }

  .birthday-save-draft:not(:has(+ .birthday-cancel-edit)) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .holiday-modal-tabs {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .holiday-modal-tab {
    min-width: 0;
    flex: 1 1 50%;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 16px !important;
  }

  .birthday-entry-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .birthday-name-input,
  .birthday-date-input-wrap,
  .birthday-save-draft,
  .birthday-cancel-edit,
  .birthday-save-draft:not(:has(+ .birthday-cancel-edit)) {
    grid-column: 1;
  }

  .birthday-picker-popover {
    right: auto;
    left: 0;
    width: min(338px, calc(100vw - 54px));
  }

  .birthday-list-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* ===== Routine date controls + Custom Rules V2 ===== */

.routine-create-date-panel {
  padding: 12px 14px;
  border-bottom: 1px solid #ececec;
  background: #fafafa;
}

.routine-date-mode-row,
.routine-custom-date-choice-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.routine-date-radio-option {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  color: #333;
  font-size: 11px;
  line-height: 1.35;
  cursor: pointer;
}

.routine-date-radio-option input[type="radio"] {
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: #6f42c1;
}

.routine-date-fields,
.routine-custom-date-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.routine-date-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.routine-date-field-label {
  color: #777;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.routine-date-field input[type="date"] {
  width: 100%;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fff;
  padding: 0 8px;
  color: #222;
  font: inherit;
  font-size: 11px;
}

.routine-date-end-field {
  align-content: flex-start;
}

.routine-date-radio-option--stacked {
  width: 100%;
  align-items: center;
}

.routine-date-radio-option--stacked input[type="date"] {
  flex: 1 1 auto;
}

.routine-date-today-hint {
  margin-top: -3px;
  color: #8b5cf6;
  font-size: 9px;
  font-weight: 650;
}

.routine-date-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000200;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(1px);
}

.routine-date-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 1000201;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
}

.routine-date-modal-card {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  max-height: min(86dvh, 620px);
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
  padding: 18px;
  color: #222;
  pointer-events: auto;
}

.routine-date-modal-close {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #777;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.routine-date-modal-close:hover {
  background: #f0f0f0;
  color: #222;
}

.routine-date-modal-title {
  margin-bottom: 15px;
  padding-right: 30px;
  color: #222;
  font-size: 16px;
  font-weight: 750;
}

.routine-date-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #ededed;
}

.routine-date-button.routine-compact-action-button {
  min-width: 58px;
}

.routine-date-calendar-icon {
  width: 16px;
  height: 16px;
}

.routine-date-button-label,
.de-routine-date-menu-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

.routine-date-end-word,
.de-routine-date-menu-label .is-inactive {
  color: #aaa;
}

.routine-date-end-word.is-active,
.de-routine-date-menu-label .is-active {
  color: inherit;
}

.routine-date-future-dot,
.de-routine-date-future-dot {
  color: #7c3aed;
  font-size: 14px;
  line-height: 0;
}

.de-routine-date-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  color: #7c3aed;
  vertical-align: middle;
}

.de-routine-date-badge svg,
.de-routine-date-menu-icon {
  width: 13px;
  height: 13px;
}

.de-routine-date-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Custom tab summary cards */
.routine-unified-tab-content.routine-custom-rules-tab {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.routine-custom-add-rule {
  align-self: flex-start;
  min-height: 31px;
  border: 1px solid #7c3aed !important;
  border-radius: 999px !important;
  background: #7c3aed !important;
  padding: 5px 14px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.routine-custom-add-rule:hover {
  background: #6d28d9 !important;
}

.routine-custom-rule-grid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.routine-custom-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  background: #fff;
  padding: 11px 12px 11px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025);
}

.routine-custom-summary-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.routine-custom-summary-title {
  min-width: 0;
  color: #252525;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.routine-custom-summary-label {
  max-width: 260px;
  overflow: hidden;
  color: #666;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-custom-summary-label::before {
  content: "·";
  margin-right: 9px;
  color: #b5b5b5;
}

.routine-custom-summary-date {
  flex-basis: 100%;
  color: #8a8a8a;
  font-size: 9px;
  line-height: 1.3;
}

.routine-custom-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.routine-custom-card-action {
  min-width: 30px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-radius: 7px;
  background: #f8f8f8;
  padding: 0 8px;
  color: #555;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}

.routine-custom-card-action:hover {
  border-color: #c8c8c8;
  background: #f0f0f0;
  color: #333;
}

.routine-custom-card-edit {
  border-color: #d9ccf7!important;
  background: #f6f1ff!important;
  color: #6842a8!important;
}

.routine-custom-card-edit:hover {
  border-color: #c8b4f1!important;
  background: #eee6ff!important;
  color: #56358d!important;
}

.routine-custom-card-duplicate,
.routine-custom-card-delete {
  color: #5f6368;
}

.routine-custom-card-icon {
  width: 15px;
  height: 15px;
  color: currentColor;
}

.routine-custom-edit-label-mobile,
.routine-custom-duplicate-label-mobile {
  display: none;
}

.routine-custom-empty-state {
  border: 1px dashed #d6d6d6;
  border-radius: 10px;
  background: #fafafa;
  padding: 18px;
  color: #8a8a8a;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.routine-unified-footer.routine-custom-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e2e2e2;
}

.routine-unified-footer.routine-custom-footer > button,
.routine-custom-footer .routine-apply-tooltip-wrap > button {
  min-width: 136px;
  min-height: 30px;
  font-size: 11px;
}

.routine-apply-tooltip-wrap {
  display: inline-flex;
}

/* Shared nested modal shell */
.routine-submodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(1px);
}

.routine-submodal-card {
  box-sizing: border-box;
  border: 1px solid #dfdfdf;
  border-radius: 16px;
  background: #fff;
  color: #222;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.25);
}

/* Custom Rule editor */
.routine-custom-editor-card {
  width: min(760px, calc(100vw - 36px));
  max-height: min(90dvh, 880px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.routine-custom-editor-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid #e9e9e9;
}

.routine-custom-editor-header .h3 {
  margin: 0;
}

.routine-custom-editor-summary {
  margin-top: 3px;
  font-size: 10px;
}

.routine-custom-editor-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 15px 18px 18px;
}

.routine-custom-label-field {
  margin-bottom: 13px;
}

.routine-custom-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: #777;
  font-size: 10px;
  font-weight: 650;
}

.routine-mini-control {
  min-width: 0;
  height: 33px;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  background: #fff;
  padding: 0 9px;
  color: #262626;
  font: inherit;
  font-size: 11px;
  outline: none;
}

.routine-mini-control:focus {
  border-color: #9d7de2;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.10);
}

.routine-custom-label-field .routine-mini-control {
  width: min(390px, 100%);
}

.routine-custom-description-wrap {
  margin-bottom: 14px;
}

.routine-custom-description-label {
  margin-bottom: 5px;
  color: #555;
  font-size: 10px;
  font-weight: 700;
}

.routine-custom-description-label span {
  color: #999;
  font-weight: 500;
}

.routine-custom-description-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.routine-custom-description-input {
  width: 100%;
}

.routine-custom-description-enter {
  min-width: 62px;
  border-color: #7c3aed;
  background: #7c3aed;
  color: #fff;
  cursor: pointer;
  font-weight: 750;
}

.routine-custom-description-enter:hover {
  background: #6d28d9;
}

.routine-custom-description-error {
  margin-top: 5px;
  color: #b42318;
  font-size: 10px;
  line-height: 1.35;
}

.routine-custom-editor-group {
  margin-top: 12px;
  border-top: 1px solid #ececec;
  padding-top: 12px;
}

.routine-custom-editor-group-title {
  margin-bottom: 8px;
  color: #686868;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.routine-custom-pattern-options {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.routine-custom-pattern-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #333;
  font-size: 11px;
  cursor: pointer;
}

.routine-custom-pattern-option input[type="radio"] {
  margin: 0;
  accent-color: #7c3aed;
}

.routine-custom-control-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.routine-custom-repeat-row .routine-mini-control[type="number"],
.routine-custom-cycle-row .routine-mini-control[type="number"],
.routine-custom-number-input {
  width: 64px;
}

.routine-custom-repeat-row select.routine-mini-control {
  width: 118px;
}

.routine-custom-inline-label {
  color: #4d4d4d;
  font-size: 11px;
  white-space: nowrap;
}

.routine-custom-weekday-block {
  margin-top: 12px;
}

.routine-custom-weekdays {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.routine-custom-weekday {
  width: 38px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #dadada;
  border-radius: 7px;
  background: #f8f8f8;
  padding: 0;
  color: #5d5d5d;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  text-align: center;
}

.routine-custom-weekday:hover {
  background: #f0ecf9;
  border-color: #c9bbe9;
}

.routine-custom-weekday.is-active {
  border-color: #7c3aed;
  background: #7c3aed;
  color: #fff;
}

.routine-custom-month-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routine-custom-month-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: #333;
  font-size: 11px;
  cursor: pointer;
}

.routine-custom-month-option > input[type="radio"] {
  margin: 0;
  accent-color: #7c3aed;
}

.routine-custom-month-option-ordinal select.routine-mini-control {
  width: 130px;
}

.routine-custom-date-group {
  margin-top: 16px;
}

.routine-custom-editor-sections {
  margin-top: 16px;
}

.routine-custom-editor-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #e7e7e7;
  background: #fafafa;
}

.routine-custom-editor-footer > button {
  min-width: 112px;
}

/* Custom delete confirmation */
.routine-custom-delete-confirm {
  width: min(390px, calc(100vw - 36px));
  padding: 18px;
}

.routine-custom-delete-message {
  margin-top: 7px;
  line-height: 1.45;
}

.routine-custom-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.routine-custom-delete-actions .danger {
  border-color: #c94343;
  background: #c94343;
  color: #fff;
}

.routine-custom-delete-actions .danger:hover {
  background: #b73737;
}

@media (max-width: 820px) {
  .routine-date-mode-row,
  .routine-custom-date-choice-row {
    flex-direction: column;
    gap: 8px;
  }

  .routine-date-fields,
  .routine-custom-date-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .routine-date-modal-shell,
  .routine-submodal-backdrop {
    padding: 12px;
  }

  .routine-custom-summary-card {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 43%);
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }

  .routine-custom-summary-copy {
    align-content: center;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }

  .routine-custom-summary-label {
    max-width: 100%;
    white-space: normal;
  }

  .routine-custom-summary-label::before {
    display: none;
  }

  .routine-custom-summary-date {
    flex-basis: auto;
  }

  .routine-custom-summary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-areas:
      "edit edit"
      "duplicate delete";
    align-content: center;
    gap: 5px;
  }

  .routine-custom-card-edit {
    grid-area: edit;
    width: 100%;
  }

  .routine-custom-card-duplicate {
    grid-area: duplicate;
    width: 100%;
  }

  .routine-custom-card-delete {
    grid-area: delete;
    width: 34px;
    padding: 0;
  }

  .routine-custom-edit-label-desktop,
  .routine-custom-duplicate-icon {
    display: none;
  }

  .routine-custom-edit-label-mobile,
  .routine-custom-duplicate-label-mobile {
    display: inline;
  }

  .routine-custom-card-action {
    height: 31px;
    min-width: 0;
    padding: 0 7px;
  }

  .routine-custom-card-edit {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff;
  }

  .routine-custom-card-edit:hover {
    border-color: #6d28d9;
    background: #6d28d9;
    color: #fff;
  }

  .routine-custom-card-duplicate,
  .routine-custom-card-delete {
    border-color: #d8d8d8;
    background: #f6f6f6;
    color: #555;
  }

  .routine-custom-editor-card {
    width: min(100%, 720px);
    max-height: calc(100dvh - 24px);
    border-radius: 14px;
  }

  .routine-custom-editor-header {
    padding: 13px 14px 11px;
  }

  .routine-custom-editor-scroll {
    padding: 13px 14px 16px;
  }

  .routine-custom-editor-footer {
    padding: 10px 14px;
  }

  .routine-custom-pattern-options {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .routine-custom-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .routine-custom-weekday {
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  .routine-custom-cycle-row {
    display: grid;
    grid-template-columns: 64px auto 64px auto;
  }

  .routine-custom-month-option-ordinal {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .routine-custom-month-option-ordinal select.routine-mini-control {
    width: auto;
    min-width: 110px;
    flex: 1 1 120px;
  }

  .routine-unified-footer.routine-custom-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .routine-unified-footer.routine-custom-footer > button,
  .routine-custom-footer .routine-apply-tooltip-wrap,
  .routine-custom-footer .routine-apply-tooltip-wrap > button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .routine-custom-summary-card {
    grid-template-columns: minmax(0, 1fr) 148px;
  }

  .routine-custom-cycle-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .routine-custom-cycle-row .routine-custom-inline-label:nth-of-type(1)::after {
    content: "";
  }

  .routine-custom-editor-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .routine-custom-editor-footer > button {
    min-width: 0;
  }
}

    .drive-account-label {
      margin-top: 10px;
      font-size: 11px;
      color: gray;
      }
    
    .drive-logout-btn {
    margin-top: 5px;
    margin-left: 0px;
    font-size: 12px;
    padding: 4px 16px!important; 
    }



        
/* gdrive login process -- */
/* gdrive login process -- */
/* START START START -- */

.headnav {
   padding: 0px 5px!important;
}

.adaptive-control-center {
  padding: 0px 5px !important;
  display: flex;
  gap: 0px;
  flex-direction: row;
  align-items: stretch !important; /* children (incl. drive-status-wrapper) match row height */
}

  @media (max-width: 820px) {
    .adaptive-control-center {
      padding: 0px 0px !important;
    }
   }

.history-control {
  display: flex;
  flex-direction: row;
}


.icon-btn.stack.undo-redo {
  font-size: 10px;
  gap:0px;
  padding: 4px 2px 4px 6px!important;
}

.view-toggle {
  width: 80px!important;
}

.view-toggle {
  width: 80px!important;
}

.tw-footer-grid 
.view-toggle {
  min-width: calc((100vw - 30px) / 5 )!important;
  max-width: calc((100vw - 30px) / 5 )!important;
}

.burger-icon-footer {
  font-size: 21px; 
  line-height: 1;
  margin-top: -3px;
}

.tw-mobile-top-logo-wrap {
      background: linear-gradient(90deg, #fff0 20%, #fff 40%, #fff 60%, #fff0 80%);
}

@media (max-width: 820px) {
  .edward-productivity-tool.tw-software-keyboard-open .tw-mobile-top-logo-btn,
  .edward-productivity-tool.tw-software-keyboard-open .go2today,
  .edward-productivity-tool.tw-software-keyboard-open .bd-header {
    touch-action: none;
  }

  /* Keep Timeline-hosted DayEditor move controls close to the splitter. */
  .split-pane.timeline .de-move-controls {
    bottom: 40px !important;
    right: 20px !important;
    box-shadow: 0px 8px 15px 0px rgba(2, 6, 23, 0.3);
  }
}


.tw-footer-grid 
.icon-btn.stack {
  min-width: calc((100vw - 30px) / 8 )!important;
  max-width: calc((100vw - 30px) / 8 )!important;
  padding-left: 0px!important;
  padding-right: 0px!important;
  margin-left: 0px!important;
  margin-right: 0px!important;
  height: 100%;
  font-size: 10px;
  font-weight: 300;

}

.tw-footer-card.is-mode2 
.tw-footer-grid 
.icon-btn.stack {
  min-width: calc((100vw - 60px) / 6 )!important;
  max-width: calc((100vw - 60px) / 6 )!important;
}

.icon-btn.stack.tw-footer-flip-btn {
  min-width: calc((100vw - 0px) / 6 )!important;
  max-width: calc((100vw - 0px) / 6 )!important;
}
.icon-btn.stack.scheduling-mode-footer{
  margin-right: 30px!important;
}

.view-toggle-inner {
  gap: 0px!important;
}


.edward-productivity-tool.is-footer-visible 
.adaptive-control-center {
   padding: 0px 0px;
  }

.edward-productivity-tool.is-footer-visible
.view-toggle-text {
  font-size: 10px;
}

.edward-productivity-tool.is-footer-visible
.icon-btn.stack.undo-redo {
  font-size: 10px;
}

.edward-productivity-tool.is-footer-visible 
.icon-btn.stack.tw-footer-scroll-btn.tw-mobile-projects-btn {
  gap: 4px;
  margin-bottom: -1px;
  margin-left: 2px;
}

.edward-productivity-tool.is-footer-visible 
.icon-btn.stack.tw-footer-scroll-btn.tw-mobile-projects-btn {
  gap: 4px;
  margin-bottom: -1px;
  margin-left: 2px;
}

.edward-productivity-tool.is-footer-visible
.adaptive-control-center.tw-mobile-scroll-footer .icon-btn {
  font-size: 10px;
}

.desktop-control-center-anchor .adaptive-control-center {
  display: flex;
  flex-direction: row;
  align-items: stretch !important;
}


.headnav .left {
  margin: 5px 0px 5px 10px;
  }

  .headnav .right {
  margin: 0px 10px 0px 0px;
 }


.headnav .center {
  align-items: stretch!important;
  }

.drive-status-wrapper {
  padding: 0px 10px 0px 10px;
  width: 190px;

  /* KEY CHANGES */
  display: flex;
  flex-direction: row;      /* was column – this blocked vertical stretch */
  align-items: stretch;     /* make children (drive-status) fill this band */
  align-self: stretch;      /* let THIS wrapper fill the header row height */

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05)
  );
}

.drive-status-subsubtitle {
  font-size: 8px;
  opacity: 0.5;
  text-transform: uppercase;
  font-weight: 500;
}

.drive-status-svg-connected, 
.drive-status-svg-basic {
  max-height: 15px;
  min-height: 15px;
  height: 15px;
}

.drive-status {
  display: flex;
  flex-direction: row;
  flex: 1;                  /* let it use the horizontal space in the wrapper */
  justify-content: space-between;
  align-items: center;      /* vertical centering inside this band */
}

.tw-footer-drive .drive-status { height: 100%; }

.drive-status-text {
  display: flex;
  margin-left: 4px;
  flex-direction: column;
  justify-content: center;  /* actually centers the two lines vertically */
}

@media (min-width: 820px) {
    .drive-status-wrapper {
      min-height: 50px!important;
    }
}

.edward-productivity-tool.is-footer-visible 
.drive-status-wrapper {
  width: 200px;
  padding: 0px 5px 0px 3px;
}
.edward-productivity-tool.is-footer-visible 
.drive-status-subsubtitle {
  font-size: 7px;
  opacity: 0.5;
}

.drive-status-title {
font-weight: 600;
font-size: 12px;
}


.edward-productivity-tool.is-footer-visible 
.drive-status-title {
font-size: 10px;
}


.drive-status-subtitle {
  font-size: 9px;
  opacity: .5;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-subtitle {
font-size: 9px;
}


.drive-status-icon-section {
 width: 20px;
 display: flex;
 align-items: center;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-icon-section {
 width: 18px;
}

.drive-status-pill {
  display: flex;
  flex-direction: row;
  justify-content: left;
  background: transparent;
  margin: 0px!important;
  padding-right: 0px!important; 
  text-align: left!important;
  border: 0px solid transparent;
}

.drive-status-pill:hover {
  background: transparent;
}

.tw-footer-drive .drive-status-pill {
  height: 100%;
  min-width: calc( (100vw - 30px) / 3 )!important;
  max-width: calc( (100vw - 30px) / 3 )!important;
}

.view-toggle-inner {
 gap: 0px;
 }

.drive-status-action {
  padding: 0px 4px 0px 3px;
  margin: 0px;
  height: 30px;
  max-width: 160px;
  display: flex;
  flex-direction: row;
  align-content: center!important;
  background: #ffffff24;
  -webkit-appearance: none;       /* kill iOS default button styling */
  appearance: none;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-action {
  -webkit-appearance: none;       /* kill iOS default button styling */
  appearance: none;
  align-content: center!important;
  justify-content: center!important;
  border-radius: 12px;
}

.actionbar-svg-icons.gdrive-login-icons {
 max-height: 12px;
 min-height: 12px;
 padding: 0px;
 margin: 9px 5px 0px 2px;
}

.edward-productivity-tool.is-footer-visible 
.actionbar-svg-icons.gdrive-login-icons {
 max-height: 10px;
 min-height: 10px;
 margin: 10px 3px 0px 2px;
}


.actionbar-svg-icons.gdrive-login-icons.sync-btn-icon {
 max-height: 10px!important;
 min-height: 10px!important;
 margin: 10px 4px 0px 2px;
}

.edward-productivity-tool.is-footer-visible 
.actionbar-svg-icons.gdrive-login-icons.sync-btn-icon {
 max-height: 8px!important;
 min-height: 8px!important;
 margin: 11px 3px 0px 2px;
}

.drive-status-action-text {
text-align: left;
display: flex;
-webkit-appearance: none;       /* kill iOS default button styling */
appearance: none;
flex-direction: column;
align-content: center!important;
align-self: center!important;
justify-content: center;
}

.drive-status-action-main {
  font-size: 10px;
  align-self: center!important;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-action-main {
  font-size: 9px;
  align-self: center!important;
}

.drive-status-action-sub {
  font-size: 8px;
  opacity: .65;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-action-sub {
  font-size: 7px;
}


/* === DriveStatus: Busy button animation ============================ */

.drive-status-action--busy {
  position: relative;
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: none;
  margin-left: 5px;
}

.drive-status.drive-status--footer.drive-ui.drive-ui--executing 
.drive-status-action-btn-container {
  width: calc(100% - 5px)!important;
  min-width: calc(100% - 5px)!important;
  max-width: calc(100% - 5px)!important;
}

/* rotating gradient border ring */
.drive-status-action--busy::after {
  --tw-rotate-angle: 0deg;   /* animated custom property */

  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  padding: 2px;               /* thickness of border */

  /* Gradient whose ANGLE rotates, not the element */
  background: conic-gradient(
    from var(--tw-rotate-angle),
    #9f7fff,
    #00e5ff,
    #9f7fff
  );

  animation: tw-rotate-border 5s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
  z-index: 3;
}


/* rotation animation */
@keyframes tw-rotate-border {
  0%   { --tw-rotate-angle: 0deg; }
  100% { --tw-rotate-angle: 360deg; }
}


/* --- DriveStatusControl 3-state (footer) --- */

 

.drive-status.drive-status--footer{
  position: relative;
  overflow: hidden!important;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 0px);
  border-radius: 16px;
  background: transparent;
  transition: width 260ms ease, background 260ms ease;

  /* iOS Safari: make overflow clipping reliable (prevents ghost action button bleed) */
  clip-path: inset(0 round 16px);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
  box-shadow: inset 0 0 0px rgba(16, 185, 129, 0.0);
  background: transparent;
}


/* Expanded + executing keep the #181818 background */
.drive-status--footer.drive-ui--expanded,
.drive-status--footer.drive-ui--executing{
  background: #181818;
}

.drive-status--footer.drive-ui--expanded{
  width: calc(200% - 4px);
  --twDriveActionW: calc((200vw - 44px) / 3);
}

.drive-status--footer.drive-ui--executing{
  width: calc(100% - 0px);
}

.drive-status--footer .drive-status-pill{
  position: relative;
  z-index: 1;
  height: 100%;
  width:  calc( (100vw -66px) / 3 ) !important;
  min-width: calc( (100vw - 66px) / 3 ) !important;
  max-width: calc( (100vw - 66px) / 3 ) !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  padding: 0px 0px 0px 6px;
}

.drive-status--footer.drive-ui--expanded .drive-status-pill{
  background: transparent;
  z-index: 4; /* keep pill clickable/visible above the big action button */
}

.drive-status--footer.drive-ui--executing .drive-status-pill{
  opacity: 0;
}

.tw-footer-drive  .drive-status-action-btn-container{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
  background: transparent;
}

.tw-footer-grid
.drive-status-action-btn-container{
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: baseline;
  justify-content: left;
  padding-left: 5px;
  width: calc((100vw - 30px) / 3 )!important;
  background: transparent;
}

.drive-status--footer.drive-ui--executing  
.drive-status-action-btn-container {
  margin-left: -100%; 
}

.drive-status--footer.drive-ui--executing  
.drive-status-action {
  width: calc(100% - 6px)!important; 
  max-width: calc(100% - 6px)!important;
  min-width: calc(100% - 6px)!important;
}

.drive-status-icon-and-text{
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.drive-status--footer .drive-status-icon-and-text{
  justify-content: flex-start;
}

.drive-status--footer .drive-status-action{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  opacity: 0;
  z-index: 2;
  min-width: calc((99vw - 120px) / 3 )!important;
  max-width: calc((99vw - 120px) / 3 )!important;
  width: calc((99vw - 120px) / 3 )!important;
  transition: opacity 180ms ease, left 260ms ease, width 260ms ease, background 260ms ease;
}

.drive-status--footer.drive-ui--expanded .drive-status-action{
  opacity: 1;
  left: 0px;
  padding-left: 5px;
  justify-content: flex-start;
}

.drive-status--footer.drive-ui--executing .drive-status-action{
  left: 0px;
  opacity: 1;
  background: #181818;
}


/* iOS/touch: prevent text selection + ensure the pill behaves like a button */
.drive-status--footer .drive-status-pill,
.drive-status--footer .drive-status-pill *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.drive-status--footer .drive-status-pill{
  touch-action: manipulation;
  cursor: pointer;
}

/* State 1: hidden action button should never intercept taps and should be fully invisible */
.drive-status--footer.drive-ui--status .drive-status-action-btn-container,
.drive-status--footer.drive-ui--status .drive-status-action{
  pointer-events: none;
}

.drive-status--footer.drive-ui--status .drive-status-action{
  opacity: 0 !important;
  visibility: hidden;
}


/* ================= iOS SAFARI DRIVE STATUS FIX ================= */

/* In State 1 (status), the action button must be physically non-interactive */
.drive-status--footer.drive-ui--status .drive-status-action-btn-container,
.drive-status--footer.drive-ui--status .drive-status-action{
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Re-enable only when expanded/executing */
.drive-status--footer.drive-ui--expanded .drive-status-action-btn-container,
.drive-status--footer.drive-ui--expanded .drive-status-action,
.drive-status--footer.drive-ui--executing .drive-status-action-btn-container,
.drive-status--footer.drive-ui--executing .drive-status-action{
  pointer-events: auto !important;
  visibility: visible !important;
}

.drive-status--footer mn{
  /* iOS Safari containment fix */
  contain: layout paint style;
  isolation: isolate;
  will-change: transform;
}

.drive-status--footer,
.drive-status--footer *{
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}


@media (max-width: 819px){
      .kind-chip {
        width: 22px!important;
        max-width: 22px!important;
        min-width: 22px!important;
        height: 22px!important;
        max-height: 22px!important;
        min-height: 22px!important; 
        margin-left: -12px!important;
        margin-top: -13px!important;
        margin-bottom: auto!important;
      }

    }

/* ================= Desktop: DriveStatus should NOT feel clickable ================= */
@media (min-width: 820px){

  .kind-chip {
        margin-left: -16px!important;
        margin-top: -10px!important;
        margin-bottom: auto!important;
      }

.drive-status-pill {
    cursor: default!important;        
    padding-left: 0px!important; 
    }

  button.drive-status--footer .drive-status-pill {
    cursor: default!important;                 /* text-like cursor */        /* no accidental interactions */
  }

  /* in case any child elements override */
  button.drive-status--footer .drive-status-pill *{
    cursor: default!important;
  }

  .drive-status-subtitle {
    font-size: 9px;
  }
}


/* END END END END -- */
/* gdrive login process -- */
/* gdrive login process -- */


.burger-drawer-contents {
   overflow-y: auto;
   padding-bottom: 28px;
  }

/* PWA Download in Burger Menu */
/* PWA Download in Burger Menu */
/* PWA Download in Burger Menu */
/* START START START START */

/* --- Burger footer section --- */

.download-app-section {
  margin-top: 8px;
  padding: 24px 10px 0px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-app-headline-top {
  font-size: 16px;
  font-weight: 300;
  line-height: .8;
  opacity: 0.8;
  margin-bottom: 8px;
  text-align: center;
}

.download-app-headline {
  font-size: 8px!important;
  line-height: 1.0;
  font-weight: 300;
  opacity: 0.5;
  margin-bottom: 8px;
  text-align: center;
}

.download-app-btn {
  width: auto!important;
  font-size: 13px;
  margin-top: 8px!important;
  padding: 6px 16px!important;
  text-align: center!important;
  display: block!important;
}

/* --- Modal shell --- */

.download-app-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-app-modal {
  width: calc(100% - 32px);
  max-width: 420px;
  background: #ffffff;
  color: #111111;
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  margin: 50px;
}

.download-app-modal-header {
  margin-bottom: 8px;
}

.download-app-modal-title {
  font-size: 16px;
  margin: 0;
}

.download-app-modal-body {
  font-size: 13px;
  line-height: 1.5;
}

.download-app-modal-body p {
  margin: 6px 0;
}

.download-app-steps {
  padding-left: 18px;
  margin: 8px 0;
}

.download-app-steps li {
  margin-bottom: 6px;
}

.download-app-list {
  padding-left: 18px;
  margin: 6px 0;
}

.download-app-list li {
  margin-bottom: 4px;
}

.download-app-modal-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.download-app-close-btn {
  font-size: 13px;
}

/* --- Icon row --- */

.download-app-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.download-app-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.inline-icon-label {
  font-weight: 500;
}

.download-app-note {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.85;
}

/* --- Fake "Add to Home Screen [ + ]" row --- */

.ios-add-to-home-wrapper {
  width: 100%;
  background: #f5f5f5;
  margin-top: 6px;
}

.ios-add-to-home-spacer {
  height: 10px;
}

.ios-add-to-home-row {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #c7c7c7;
  border-bottom: 1px solid #c7c7c7;
  padding: 0 12px;
  font-size: 14px;
  color: #111111;
}

.ios-add-to-home-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #555555;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-add-to-home-plus {
  font-size: 18px;
  line-height: 1;
  color: #444444;
}

/* END END END END */
/* PWA Download in Burger Menu */
/* PWA Download in Burger Menu */
/* PWA Download in Burger Menu */


.card-header-spacer {
  position: absolute;
  height: 65px;
  width: calc(100% + 4px);
  border-radius: 10px 10px 0px 0px;
  border: 1px solid lightgray;
  left: -1px;
  right: 0;
  bottom: 0;          /* grows upward FROM the bottom */
  height: 0px;        /* JS-controlled */
  background: white;   /* match header BG */
  z-index: 1;        /* BEHIND the header content */
  pointer-events: none;
  border-bottom: 0px solid transparent;
}

/* Content stays in normal flow */
.card-header-content {
  position: relative;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0px!important;
}

  .card-header-spacer {
      border-top-width: 1px;
      border-top-color: lightgray;
      border: 1px solid lightgray;
      border-bottom: 0px solid transparent;
    }

 .card.card-day.card-today {
      border-bottom-width: 1px;
      border-bottom-color: lightgray;
  }

@media (max-width: 820px) {

      .burger-backdrop { 
          z-index: 9250!important; 
        }

      .burger-drawer-contents {
      padding-bottom: 100px!important;
      }

      .card.card-day.card-today {
        padding-bottom: 20px!important;
        margin-bottom: 0px!important;
        border-bottom: 0!important;
      }

      .card-header-spacer {
        border: 0;
        border-radius: 0px;
        width: 100%;
      }
    }

    

.download-app-headline {
  font-size: 13px !important;
  width: 100%;
  max-width: none;
}

.pill-btn.download-app-btn {
  background: linear-gradient(90deg, #6f3ff2, #3374ff) !important;
  color: white !important;
  text-align: center !important;
  width: 100%;
  padding-left: 0;
}


/* =========================================================
   TIMELINE MULTI-SELECT MODE (header/footer bar + circles)
   ========================================================= */


    .ms-bar {
      background: transparent; /* let header/footer gradient show through */
    }
    /* Multi-select actionbar layout */

    .ms-actionbar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      gap: 2px;
      background: transparent;
      border-radius: 15px;
      padding: 3px 12px 0px 12px;
    }

    .edward-productivity-tool.is-footer-visible 
    .ms-actionbar {
      background: transparent;
      position: static;
      height: auto;
      border: 0px;
      margin-bottom: 0px;
      padding: 3px 0px 0px 0px;
    }

    .edward-productivity-tool.is-footer-visible 
    .adaptive-control-center.ms-bar {
    background: #007872;
    }

                  /* =========================================================
                    DESKTOP HEADER TAKEOVER WHILE IN MULTI-SELECT MODE
                    ========================================================= */

                  .edward-productivity-tool.ms-mode .headnav {
                    background: #007872; /* match ms-actionbar */
                    border-radius: 20px;
                    padding: 3px 0px;
                  }

                  .edward-productivity-tool.ms-mode .headnav .left,
                  .edward-productivity-tool.ms-mode .headnav .right {
                    display: none !important; /* logo/time/projects/search/burger */
                  }

                  .edward-productivity-tool.ms-mode .headnav .center {
                    flex: 1;
                  }

                  .edward-productivity-tool.ms-mode .desktop-control-center-anchor {
                    width: 100%;
                  }


.ms-count {
  min-width: 44px;
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  margin-right: 5px;
}
.edward-productivity-tool.is-footer-visible 
.ms-count {
  margin-right: 0px;
}

.edward-productivity-tool.is-footer-visible 
.ms-action-btn.cancel-multi-select {
  margin-left: 0px;
}

.ms-count-top { font-size: 12px; }
.ms-count-bottom { font-weight: 300; font-size: 8px; opacity: 0.9; }

.ms-action-bar-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 3px;
  }

/* Buttons: icon above label, all white */
.ms-action-btn {
  appearance: none;
  border: 0;
  background: #ffffff25;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 5px;
  margin: 1px 0px;
  min-width: 44px;
  opacity: 0.85;
}

.ms-action-btn:hover { 
  opacity: 1; 
  background: #ffffff30;
}

.ms-action-btn:active { transform: translateY(1px); }

.ms-action-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.ms-action-label {
  font-size: 9px;
  line-height: 1;
  font-weight: 300;
  white-space: nowrap;
}

.ms-action-btn.cancel-multi-select {
  background: transparent;
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 5px;
}

/* ---- Selection circle + badge ---- */
.ms-circle-btn {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(120,120,120,0.55);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff; /* check uses currentColor */
  margin-left: 12px;
  margin-right: 13px;
  align-self: center;
}

.ms-circle-btn:hover {
  background: white;
  border-color: #007872;
}  

.ms-circle-btn.is-selected {
  border: 0px;
  border-radius: 999px;
  min-width: 20x;
  min-height: 20x;
  width: 20x;
  height: 20px;
  background: #007872;;
}

.ms-circle-check {
  color: #fff;
  position: relative;
  top: -1px;
  left: -1.5px;
}

.ms-circle-badge {
  position: absolute;
  top: -4px;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #007872;;
  color: #007872;;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   OUTLINE PRECEDENCE: BLUE MUST WIN over overlap + now
   overlap uses box-shadow inset; now uses special wrapper.
   We enforce both outline + inset shadow, with !important.
   ========================================================= */

.task-row.ms-selected {
  outline: 2px solid #007872!important;
  outline-offset: -2px !important;
  background: #00787240!important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 0 2px #007872 inset !important;
}

/* ensure override even if overlap applied */
.task-row.overlap.ms-selected {
  outline: 2px solid #007872 !important;
  outline-offset: -2px !important;
  background: #00787240!important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 0 2px #007872 inset !important;
}

/* now-row wrapper case */
.task-row.taskrow-now.ms-selected,
.task-row.threecols.taskrow-now.ms-selected {
  outline: 2px solid #007872 !important;
  outline-offset: -2px !important;
  background: #00787240!important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 0 2px #007872 inset !important;
}



/* =======================================================================
   PRODUCTION OVERRIDE — DriveStatusControl footer clipping + layout lock
   Paste at VERY BOTTOM of styles.css
   ======================================================================= */

/* Scope hard to the footer slot so we don't disturb other variants */
.tw-footer-drive .drive-status--footer {
  /* hard clipping contract */
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;

  /* keep your reliable iOS/paint clamps even if other rules win */
  border-radius: 16px !important;
  clip-path: inset(0 round 16px) !important;
 
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;

  /* unify sizing math so prod/dev can't "flip" widths */
  --twPillW: calc((100vw - 66px) / 3);
  --twActionW: calc((100vw - (45% + (25px))) / 3);
}

/* Force pill width to a single truth (prevents prod ordering flips) */
.tw-footer-drive .drive-status--footer .drive-status-pill {
  width: var(--twPillW) !important;
  min-width: var(--twPillW) !important;
  max-width: var(--twPillW) !important;
  position: relative !important;
  z-index: 4 !important; /* stays above the action button when expanded */
}

/* Make the action region an absolute layer INSIDE the root (no layout bleed) */
.tw-footer-drive .drive-status--footer .drive-status-action-btn-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;

  /* starts immediately to the right of the pill */
  left: var(--twPillW) !important;
  right: 0 !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  margin: 0 !important;
  padding: 0 0 0 6px !important;
  background: transparent !important;

  z-index: 2 !important;
  overflow: hidden !important; /* extra safety */
}

/* Re-author the slide logic using transform (robust) instead of left:100% */
.tw-footer-drive .drive-status--footer .drive-status-action {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;

  /* OFFSCREEN by default */
  transform: translateY(-50%) translateX(110%) !important;
  opacity: 0 !important;

  width: var(--twActionW) !important;
  min-width: var(--twActionW) !important;
  max-width: var(--twActionW) !important;

  transition:
    transform 260ms ease,
    opacity 180ms ease,
    width 260ms ease,
    background 260ms ease !important;

  z-index: 2 !important;
}

/* State 2: expanded — slide in */
.tw-footer-drive .drive-status--footer.drive-ui--expanded .drive-status-action {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* State 3: executing — action slides over pill as the control shrinks */
.tw-footer-drive .drive-status--footer.drive-ui--executing .drive-status-action-btn-container {
  left: 0 !important;          /* action layer now starts at far left */
  padding-left: 0 !important;
}

.tw-footer-drive .drive-status--footer.drive-ui--executing .drive-status-action {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;

  width: calc(100% - 6px) !important;
  min-width: calc(100% - 6px) !important;
  max-width: calc(100% - 6px) !important;

  background: #181818 !important;
}

/* State 1: status — absolutely guarantee it can't show or intercept */
.tw-footer-drive .drive-status--footer.drive-ui--status .drive-status-action-btn-container,
.tw-footer-drive .drive-status--footer.drive-ui--status .drive-status-action {
  pointer-events: none !important;
  visibility: hidden !important;
}


/* Desktop: show (?) icon, hide text below checkbox */
@media (hover: hover) and (pointer: fine) {
  .custom-rates-help-text { display: none; }
}
/* Mobile: hide (?) icon, show text */
@media (pointer: coarse) {
  .custom-rates-help-icon { display: none; }
}

.card.card-day.blackout-collapsed-card {
  width: calc(100% - 60px)!important;
  margin-top: -20px !important;
  padding: 18px 22px 20px !important;
  min-height: 0;
  border: 1px solid #fecdd3 !important;
  background: linear-gradient(180deg, #fff7f9 0%, #ffffff 100%) !important;
  box-shadow:
    0 16px 36px -24px rgba(190, 18, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Baseline desktop widths: Firefox and space-reserving scrollbars. */
.timeline-blackout-header-expanded {
  width: calc(100% - 70px);
}

.blackout-end-bar-expanded {
  width: calc(100% - 60px);
}

/* Desktop overlay-scrollbar widths, including Firefox when measured. */
@media (min-width: 821px) {
  .scroll-container.thin-scrollbar.timeline-overlay-scrollbar .card.card-day {
    width: calc(100% - 30px);
  }

  .scroll-container.thin-scrollbar.timeline-overlay-scrollbar .pull-loader {
    width: calc(100% - 26px);
  }

  .scroll-container.thin-scrollbar.timeline-overlay-scrollbar
    .card.card-day.blackout-collapsed-card {
    width: calc(100% - 70px) !important;
  }

  .scroll-container.thin-scrollbar.timeline-overlay-scrollbar
    .timeline-blackout-header-expanded {
    width: calc(100% - 80px);
  }

  .scroll-container.thin-scrollbar.timeline-overlay-scrollbar
    .blackout-end-bar-expanded {
    width: calc(100% - 70px);
  }
}

.card.card-day.blackout-collapsed-card .card-header-spacer,
.card.card-day.blackout-collapsed-card .blackout-collapsed-card__spacer {
  border-color: transparent;
}

.blackout-collapsed-card__header {
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(190, 18, 60, 0.10);
}

.blackout-collapsed-card__header-content {
  margin-bottom: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 100%;
  flex: 1 1 auto;
}

.blackout-collapsed-card__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

.blackout-collapsed-card__lock-btn,
.blackout-collapsed-card__edit-btn {
  appearance: none;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f9 100%);
  border: 1px solid rgba(190, 18, 60, 0.18);
  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.45);
  color: #be123c;
}

.blackout-collapsed-card__edit-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}

.blackout-collapsed-card__summary {
  display: grid;
  gap: 12px;
}

.card-header-spacer.blackout-collapsed-card__spacer {
width: 100%;  

}

.blackout-collapsed-card__reason {
  text-align: center;
  padding-top: 4px;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

.blackout-details-toggle,
.blackout-mobile-editor-launch {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(190, 18, 60, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #fff8fa 100%);
  color: #475569;
  font-weight: 700;
  margin-top: 0px!important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.blackout-mobile-editor-launch {
  padding: 14px 16px;
  text-align: left;
}

.blackout-notes-shell {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fffafb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 12px 24px -22px rgba(15, 23, 42, 0.45);
  padding: 0px;
}

.blackout-notes-shell .day-editor {
  background: transparent;
  padding: 14px 14px 160px 0px !important;
}

.card.card-day.blackout-collapsed-card {
  background: transparent!important;
  border: 1px solid transparent!important;
}

@media (max-width: 820px) {
  .card.card-day.blackout-collapsed-card {
    padding: 14px 14px 32px 0px !important;
    margin-top: 0px!important;
    width: calc(100% - 0px)!important;
    margin-left: 0px;
    min-height: 147px;
    border-radius: 0px!important;
    background: white!important;
  }

  .blackout-header-collapsed {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .card.card-day.blackout-collapsed-card {
    border-top: 3.5px solid black!important;
    border-bottom: 6px solid black!important; 
  }
  .blackout-outer-container {
    border-top: 4px solid black!important;
  }

  .timeline-blackout-header-expanded {
    padding: 8px 15px 12px 15px !important;
    width: calc(100% - 82px)!important;
    margin: 20px 20px 46px 20px!important;
  }

  .blackout-tristack {
    border-radius: 0px!important;
    background: white!important;
    opacity: 1.0!important;
  }

  .blackout-end-bar-expanded {
    border-top: 4px solid black!important;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10;
    width: calc(100% - 0px)!important;
    margin: 0px 20px 45px 0px!important;
    height: 50px;
    pointer-events: none;
  }

  .blackout-notes-shell .day-editor {
  background: transparent;
  padding: 14px 14px 160px 0px !important;
}


  .blackout-collapsed-card__summary{
    padding: 0px 10px 40px 10px;

  }

    .card.card-day.blackout-collapsed-car > header {
        padding-left: 0px;
        margin-left: 0px;
        left: 0px;
    }


  .blackout-collapsed-card__header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    
  }

  .blackout-collapsed-card__reason {
    font-size: 19px;
  }
}


button.taskee-shortcut-match-btn:hover {
  background: #cecece!important;
}

.stack-4.compress-thin 
button.taskee-shortcut-match-btn {
  font-size: 12px!important;
  padding: 3px 6px 3.5px 6px!important;
}

.calendarview-timeline-dayeditor-popup {
  overflow: hidden;
}

.calendarview-daycard-editor-overlay-card {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.calendarview-daycard-editor-shell {
  width: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.calendarview-daycard-editor-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 9px;
  border-bottom: 1px solid rgba(209, 213, 219, 0.95);
  background: #fff;
}

.calendarview-daycard-editor-title {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 20px;
  color: #596273;
  font-weight: 700;
}

.calendarview-daycard-editor-hide-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
  color: #7b8598;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.calendarview-daycard-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px 12px;
  box-sizing: border-box;
  background: #fff;
}

.calendarview-daycard-editor-body
.day-editor.day-editor--calendar-daycard-popup {
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent;
}

.calendarview-daycard-editor-body
.day-editor.day-editor--calendar-daycard-popup.de-multi-select-active {
  padding: 0 !important;
  overscroll-x: clip !important;
}

.calendarview-daycard-ms-host:empty,
.calendarview-daycard-move-host:empty {
  display: none;
}

.calendarview-daycard-ms-host,
.calendarview-daycard-move-host {
  flex: 0 0 auto;
  box-sizing: border-box;
  background: #fff;
  border-top: 1px solid rgba(229, 231, 235, 0.9);
}

.calendarview-daycard-ms-host {
  padding: 10px 14px 14px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.96) 14px,
    #fff 32px
  );
}

.calendarview-daycard-ms-host .de-ms-toolbar {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  border-top: 1px solid lightgray;
  border-radius: 14px;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  z-index: 30 !important;
}

.calendarview-daycard-move-host {
  padding: 8px 12px 12px;
}

.calendarview-daycard-move-host .de-move-controls {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: 1 !important;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.calendarview-pick-task-time-input::placeholder {
  font-style: italic;
  font-weight: 500;
}

@media (min-width: 821px) {
  .calendarview-daycard-editor-overlay-card {
    margin-top: 60px;
    max-height: calc(100% - 60px) !important;
  }

  .calendarview-daycard-ms-host {
    padding: 10px 16px 16px;
  }

  .calendarview-daycard-move-host {
    padding: 8px 16px 14px;
  }
}

@media (max-width: 821px) {
  .calendarview-daycard-editor-header {
    padding: 9px 10px 8px;
  }

  .calendarview-daycard-editor-body {
    padding: 9px 10px 10px;
  }

  .calendarview-daycard-ms-host {
    padding: 8px 12px calc(env(safe-area-inset-bottom) + 18px);
  }

  .calendarview-daycard-move-host {
    padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px);
  }
}

.daycard-month-button:hover {
    opacity: .5!important;
}  



@media (max-width: 820px) {
    .calendarview-timeline-dayeditor-popup {
        height: calc(100% - 86px);  
        max-height: calc(100% - 86px);
        overflow: hidden;
    }

    .daycard-popout-parent {
        height: 100%;
        overflow: hidden;
        display: flex!important;
        flex-direction: column;
        position: relative;
    }

    .calendar-header-row {
      width: 100%;
    }

    .calview-months-scroll-parent {
    position: absolute;
    width: 100%;
    height: 100%;
    }


    .blackout-button-with-info {
      max-height: 30px;
      padding: 2px 32px 2px 8px!important;
      border-radius: 999px!important;
      
    }

    .blackout-button-with-info.is-without-help {
      padding: 2px 8px!important;
    }

    .blackout-more-info-btn-wrap{
      margin-left: -36px!important;
    }

    .calendar-daycard-popout-header {
      max-height: 40px;
      min-height: 40px;
      height: 40px;
    }

    .first-outer-container-of-dayeditor {
        min-height: calc(100% - 40px)!important;
        max-height: calc(100% - 40px)!important;
        height: calc(100% - 40px)!important;
        overflow-y: clip;
    }

    .daycard-popout-parent 
    .day-editor.is-desktop {
      overflow-y: auto;
      overscroll-behavior: contain;
      max-height: none!important;
    }

    .daycard-popout-parent 
    .calendarview-dayeditor-ms-host {
      position: absolute!important;
      bottom: 0px!important;
      width: calc(100% - 0px)!important;
      border-top: 1px solid lightgray;
    }

    .daycard-popout-parent 
    .de-move-controls {
        right: 36px;
        bottom: 120px!important;
    }

    .de-move-btn {
      padding: 8px 12px 8px 12px!important;
    }

    .daycard-popout-parent 
    .de-ms-toolbar-btn {
      height: 34px!important;
    }

    .daycard-popout-parent 
    .de-ms-toolbar-more-btn {
      height: 100%!important;
      border-radius: 10px;
      margin: 0px!important;
    }

   .daycard-popout-parent 
   .de-ms-toolbar-strip {
      padding-right: 100px!important;
    }
  }



@media (min-width: 821px) {
    .calendarview-timeline-dayeditor-popup {
        height: calc(100% - 120px);  
        max-height: calc(100% - 120px);
        margin: 100px 20px 20px 20px;
        overflow: hidden;
    }

    .daycard-popout-parent {
        height: 100%;
        overflow: hidden;
        display: flex!important;
        flex-direction: column;
        position: relative;
    }

    .calendar-daycard-popout-header {
      max-height: 40px;
      min-height: 40px;
      height: 40px;
    }

    .first-outer-container-of-dayeditor {
        min-height: calc(100% - 40px)!important;
        max-height: calc(100% - 40px)!important;
        height: calc(100% - 40px)!important;
        overflow-y: clip;
    }

    .daycard-popout-parent 
    .day-editor.is-desktop {
      overflow-y: auto;
      overscroll-behavior: contain;
      max-height: none!important;
    }

    .daycard-popout-parent 
    .calendarview-dayeditor-ms-host {
      position: absolute!important;
      bottom: 0px!important;
      width: calc(100% - 0px)!important;
      border-top: 1px solid lightgray;
    }

    .daycard-popout-parent 
    .de-move-controls {
        right: 36px;
        bottom: 120px!important;
    }

    .de-move-btn {
      padding: 8px 10px 8px 10px;
    }

    .daycard-popout-parent 
    .de-ms-toolbar-btn {
      height: 34px!important;
    }

    .daycard-popout-parent 
    .de-ms-toolbar-more-btn {
      height: 100%!important;
      border-radius: 10px;
      margin: 0px!important;
    }

   .daycard-popout-parent 
   .de-ms-toolbar-strip {
      padding-right: 100px!important;
    } 

  }

  /* =========================================================
   Taskwand context/type chip polish — final hard overrides
   ========================================================= */

/* Use neutral dividers inside the now-white avail-lane AddBar */
body .avail-bar.available .vertical-gradient-divider {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0)
  ) !important;
}

/* =========================================================
   Timeline AddBar / Avail lane polish — May 13 pass
   ========================================================= */

/* 1) Mobile: keep availability label in normal flow so lanes retain height.
   Only compensate full-day lanes where the Add task pill sits in-flow on the right. */
@media (max-width: 820px) {
  .avail-bar.available > .row.between {
    position: relative !important;
  }

  .avail-bar.available > .row.between > span:first-child {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    z-index: auto !important;
    pointer-events: auto !important;
    margin-right: 0 !important;
  }

  .avail-bar.available > .row.between:has(.empty-full-day-lane-actions) > span:first-child {
    margin-right: -90px !important;
  }

  .avail-bar.available .empty-full-day-lane-actions {
    position: relative !important;
    z-index: 2 !important;
    margin-left: auto !important;
  }
}




/* 6) Type drawer layering:
   chip trigger above drawer; drawer above row-right/draghandle */
body .task-row.type-drawer-open .row-left {
  position: relative !important;
  z-index: 7000 !important;
}

body .task-row.type-drawer-open .row-left > .kind-chip {
  position: absolute !important;
  z-index: 8000 !important;
}


body .task-row.type-drawer-open .row-right {
  position: relative !important;
  z-index: 40 !important;
}

/* 7) Action bar layering:
   when actionbar is open, it beats row-left/chips */
body .task-row.actionbar-open .tr-actions,
body .task-row.actionbar-open .action-bar-drawer {
  z-index: 9000 !important;
}

/* Mobile: achievement chip needs a wider left column so it does not overlap the title */
@media (max-width: 820px) {
  body .task-row.threecols.taskrow-achievement > .row-content > .row-left {
    flex: 0 0 98px !important;
    width: 98px !important;
    min-width: 98px !important;
  }

  body .task-row.threecols.taskrow-achievement .kind-chip.tw-achievement-pill-expanded {
    left: -6px !important;
  }
}

@media (min-width: 820px) {

  .btn.actionbar-btns.delete-taskrow{
  min-width: 40px;
  max-width: 40px;
  }

  .btn.actionbar-btns.taskrow-notes-btn{
  min-width: 40px;
  max-width: 40px;
  }
}



/* ---------------------------------------------------------
   2) Narrow/mobile AddBars:
   - stop dayHeader AddBar border from clipping
   - lower dayHeader AddBar slightly
   - compact availability-lane AddBar so it does not create the huge blank gap

   Scope:
   - real mobile browsers/PWAs via pointer:coarse
   - desktop PWA narrow via display-mode:standalone
   - avoids normal desktop browser narrow
   --------------------------------------------------------- */

@media (max-width: 820px) and (pointer: coarse),
       (max-width: 820px) and (display-mode: standalone) {
  html body .card-day > header,
  html body .card-header-content {
    overflow: visible !important;
  }


  html body .avail-bar.available {
    overflow: visible !important;
  }




  html body .avail-bar.available > .row.between {
    min-height: 34px !important;
  }

}


/* ---------------------------------------------------------
   3) Mobile Day Notes / Day Schedule sticky divider optical centering.
   These are intentionally tolerant/no-op if the active Timeline file uses
   different class names.
   --------------------------------------------------------- */

@media (max-width: 820px) and (pointer: coarse),
       (max-width: 820px) and (display-mode: standalone) {
  html body .timeline-section-sticky-header,
  html body .timeline-sticky-section-header,
  html body .timeline-section-divider-header,
  html body .day-notes-sticky-header,
  html body .day-schedule-sticky-header {
    min-height: 20px !important;
    height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body .timeline-section-sticky-header *,
  html body .timeline-sticky-section-header *,
  html body .timeline-section-divider-header *,
  html body .day-notes-sticky-header *,
  html body .day-schedule-sticky-header * {
    line-height: 18px !important;
  }
}


/* ---------------------------------------------------------
   5) Mobile PWA footer only:
   lower the footer closer to the bottom. Mobile browser keeps its
   existing offset.
   --------------------------------------------------------- */

@media (display-mode: standalone) and (max-width: 820px) and (pointer: coarse) {
  html body .adaptive-control-center,
  html body .edward-productivity-tool.is-footer-visible .adaptive-control-center {
    bottom: 0 !important;
    margin-bottom: 2px !important;
  }
}

/* =========================================================
   Device follow-up polish — append-only
   Fixes:
   A1 achievement circle position/size
   A2/B1/C1/D1 availability AddBar chip-label gap
   B2/C1 availability AddBar white background
   B3 neutralize old desktop-PWA fake purple bar
   C2 mobile PWA footer back up 10px
   ========================================================= */


/* Safety neutralizer in case the old fake desktop-PWA purple bar block
   was not fully deleted. */
@media (display-mode: standalone) and (max-width: 820px) and (hover: hover) and (pointer: fine) {
  html body .page-root::before {
    content: none !important;
    display: none !important;
  }

  html body .toolbar {
    top: 0 !important;
  }

  html body .page-main {
    margin-top: 50px !important;
    height: calc(100dvh - 50px) !important;
    min-height: calc(100dvh - 50px) !important;
    max-height: calc(100dvh - 50px) !important;
  }
}




/* C2 — Mobile PWA footer: previous patch moved it too low.
   Bring it back up 10px. */
@media (display-mode: standalone) and (max-width: 820px) and (pointer: coarse) {
  html body .adaptive-control-center,
  html body .edward-productivity-tool.is-footer-visible .adaptive-control-center {
    bottom: 20px !important;
  }
}






/* =========================================================
   Taskwand Kind Picker System
   AddBar + TaskRow chip drawer
   ========================================================= */

.row.day-add-btns {
  position: relative;
}

.row.day-add-btns .twKindBar--dayHeader {
  position: absolute;
  bottom: -25px;
  top: auto;
}

.availgap-add-bar-buffer {
  display: none;
}

.twKindBar,
.twKindDrawer {
  --tw-kind-chip-size: 18px;
  --tw-kind-glyph-size: 10px;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.twKindBar {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.twKindBar--availability {
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: max-content;
  max-width: calc(100vw - 30px);
  background: #fff;
  background-color: #fff;
  background-image: none;
  z-index: 3;
}

.twKindDrawer--taskRow {
  --tw-kind-chip-size: 19px;
  --tw-kind-glyph-size: 10px;
  position: absolute;
  left: -22px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7000;
  width: max-content;
  max-width: calc(100vw - 16px);
  min-height: 45px;
  overflow-x: auto;
  padding-left: 15px;
  padding-right: 2px;
}

.twKindBar > .vertical-gradient-divider,
.twKindDrawer > .vertical-gradient-divider {
  align-self: stretch;
  margin-top: 0;
  margin-bottom: 0;
  flex: 0 0 1px;
}

.twKindOption {
  position: relative;
  height: 100%;
  min-width: 30px;
  margin: 0;
  padding: 0 3px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #111;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.twKindOption:hover {
  background: rgba(15, 23, 42, 0.04);
}

.twKindOption.is-active {
  background: rgba(15, 23, 42, 0.04);
}

.twKindOption--context {
  padding-left: 4px;
  padding-right: 4px;
}

.twKindOption--context.is-work-context-btn {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}

.twKindOption--context.is-personal-context-btn {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}

.twKindBar--context.is-work-context-btn {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
}

.twKindBar--context.is-personal-context-btn {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
}


.twKindOption--achievement {
  min-width: 56px;
}

.twKindOption--close {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  color: rgba(0, 0, 0, 0.52);
  font-size: 14px;
  font-weight: 700;
}

.twKindOption--close:hover {
  color: rgba(0, 0, 0, 0.78);
}

.twKindDrawer .twKindOption {
  min-width: 36px;
  padding-left: 3px;
  padding-right: 3px;
  opacity: 0.75;
  height: 45px;
}

.twKindDrawer .twKindOption:hover,
.twKindDrawer .twKindOption.is-active {
  opacity: 1;
  background: transparent;
}

.twKindChip {
  width: var(--tw-kind-chip-size);
  min-width: var(--tw-kind-chip-size);
  max-width: var(--tw-kind-chip-size);
  height: var(--tw-kind-chip-size);
  min-height: var(--tw-kind-chip-size);
  max-height: var(--tw-kind-chip-size);
  padding: 0;
  margin: 0;
  border: 2px solid #ccd;
  border-radius: 999px;
  background: #eef;
  color: #111;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--tw-kind-chip-size);
  line-height: 1;
}

.twKindGlyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--tw-kind-glyph-size);
  font-weight: 800;
  line-height: 1;
  font-style: normal;
  text-align: center;
  pointer-events: none;
}


.twKindLabel {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 8px;
  line-height: 9px;
  font-weight: 500;
  color: #686868;
  white-space: nowrap;
  pointer-events: none;
}

.twKindBar .twKindLabel {
  color: #111;
}

.twKindOption--context .twKindLabel {
  color: #8a8a8a;
}

.twKindOption--context.is-active .twKindLabel {
  color: #111;
}

/* Context colors */
.twKindChip--personal {
  background: #F0EAFF;
  border-color: #C7B9E6;
  color: #785ABF;
}

.twKindChip--work {
  background: #DEEBF7;
  border-color: #9CC3E7;
  color: #245DD6;
}

/* Context picker active states */
.twKindOption--context .twKindChip--personal,
.twKindOption--context .twKindChip--work {
  background: #fff;
}

.twKindOption--context.is-active .twKindChip--personal {
  background: #785ABF;
  border-color: #785ABF;
  color: #fff;
}

.twKindOption--context.is-active .twKindChip--work {
  background: #245DD6;
  border-color: #245DD6;
  color: #fff;
}

/* Type colors */

/* Personal: light purple chips */
.twKindChip--task.twKindChip--personal,
.twKindChip--event.twKindChip--personal {
  background: #F0EAFF;
  border-color: #C7B9E6;
  color: #785ABF;
}

/* Work: light blue chips */
.twKindChip--task.twKindChip--work,
.twKindChip--event.twKindChip--work {
  background: #DEEBF7;
  border-color: #9CC3E7;
  color: #245DD6;
}

/* Personal: dark purple chips */
.twKindChip--meeting.twKindChip--personal,
.twKindChip--appointment.twKindChip--personal {
  background: #785ABF;
  border-color: #785ABF;
  color: #fff;
}

/* Work: dark blue chips */
.twKindChip--meeting.twKindChip--work,
.twKindChip--appointment.twKindChip--work {
  background: #245DD6;
  border-color: #245DD6;
  color: #fff;
}

/* Achievement: light gold circle, context-colored star */
.twKindChip--achievement {
  background: #FFF9DF;
  border-color: #D6B833;
}

.twKindChip--achievement.twKindChip--personal {
  color: #785ABF;
}

.twKindChip--achievement.twKindChip--work {
  color: #245DD6;
}

.twKindChip--achievement .twKindGlyph {
  font-size: 14px;
  line-height: 0;
}

.twKindLabel--achievement,
.twKindOption--achievement .twKindLabel {
  color: #8A6F00;
  font-weight: 700;
}

body .task-row.type-drawer-open .twKindDrawer--taskRow {
  z-index: 7000 !important;
}

  .twKindOption--meeting {
    width: 42px;
  }

  .twKindBar--appointment, 
  .twKindOption--appointment {
    width: 32px;
  }  

  .twKindBar--leisure, 
  .twKindOption--leisure {
    width: 38px;
  }  


@media (max-width: 820px) {
  .twKindBar--availability {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    right: 0;
  }

  .twKindBar--availability .twKindOption--availability {
    min-width: 32px;
    max-width: 44px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .twKindBar--achievement .twKindOption--achievement {
      width: 56px;
  }

  .twKindBar--close .twKindOption--close {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
  }

  .avail-bar.available {
    overflow: visible !important;
  }

  .avail-bar.available > .row.between {
    position: relative !important;
    min-height: 34px !important;
  }

  .avail-bar.available > .row.between > span:first-child {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    z-index: auto !important;
    pointer-events: auto !important;
    margin-right: 0 !important;
  }

  .avail-bar.available:has(.twKindBar--availability) > .row.between > span:first-child {
    padding-right: 214px !important;
    margin-right: 0 !important;
  }

  .avail-bar.available > .row.between:has(.empty-full-day-lane-actions) > span:first-child {
    margin-right: -90px !important;
  }

  .avail-bar.available .empty-full-day-lane-actions {
    position: relative !important;
    z-index: 2 !important;
    margin-left: auto !important;
  }

  .twKindDrawer--taskRow {
    max-width: calc(100vw - 16px);
    padding-left: 16px;
    padding-right: 1px;
  }
}

@media (max-width: 820px) {
  body.tw-hide-mobile-top-logo-for-header-addbar .tw-mobile-top-logo-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ===== Taskwand Focus View + sticky note-context headers ===== */
.timeline-section-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 16px;
  min-height: 16px;
  border-radius: 999px;
  margin-top: 1px;
  flex: 0 0 auto;
}

.timeline-section-count-badge.is-circle {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  padding: 0;
}

.timeline-section-count-badge.is-pill {
  width: auto;
  min-width: 16px;
  padding: 0 5px;
}

.timeline-section-count-badge.is-empty {
  border: 1px solid #F2F2F2;
  background: #F2F2F2;
  color: #C6C5CC;
}

.timeline-section-count-badge.has-items {
  border: 1px solid #C6C5CC;
  background: #C6C5CC;
  color: #FFFFFF;
}

.timeline-section-count-badge-number {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.tw-section-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

/* Desktop-only: hide controls until their parent is hovered or focused. */
@media (min-width: 821px) {
  /* Section-header icons retain their existing hover/focus behavior. */
  :is(.timeline-day-notes-parent, .timeline-day-schedule-parent, .timeline-day-journal-parent)
    .tw-section-header-actions {
    opacity: 0;
    pointer-events: none;
  }
  :is(.timeline-day-notes-parent, .timeline-day-schedule-parent, .timeline-day-journal-parent):is(:hover, :focus-within)
    .tw-section-header-actions {
    opacity: 1;
    pointer-events: auto;
  }

  /* Never fade the whole right rail: it also contains MS checkcircles. */
  .task-row.threecols .row-right {
    opacity: 1;
    pointer-events: auto;
  }

  /* Expanded TaskRow Notes controls retain their existing hover behavior. */
  .task-row.threecols .taskrow-notes-for-de-instance-inner
    > button:not([aria-label="Select all task notes rows"]) {
    opacity: 0 !important;
    pointer-events: none;
  }
  .task-row.threecols:is(:hover, :focus-within)
    .taskrow-notes-for-de-instance-inner
    > button:not([aria-label="Select all task notes rows"]) {
    opacity: 0.5 !important;
    pointer-events: auto;
  }
  .task-row.threecols .taskrow-notes-for-de-instance-inner
    > button:not([aria-label="Select all task notes rows"]):is(:hover, :focus-visible) {
    opacity: 1 !important;
  }

  /* Checked and unchecked MS circles are always fully visible. */
  .task-row.threecols.ms-mode .row-right .ms-circle-btn {
    opacity: 1 !important;
    pointer-events: auto;
  }
}

/* Desktop TaskRow rail clipping and movement are handled by TaskRow.jsx. */

/* Desktop: 60% idle opacity, 100% on individual hover. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  .task-row.threecols .row-right .tr-actions > button.project-mark,
  .task-row.threecols .row-right .tr-actions > button.taskrow-drag-hitbox {
    opacity: 0.6 !important;
  }

  .task-row.threecols .row-right .tr-actions > button.project-mark:hover,
  .task-row.threecols .row-right .tr-actions > button.taskrow-drag-hitbox:hover {
    opacity: 1 !important;
  }
}

.tw-section-header-icon-btn {
  appearance: none;
  width: 28px;
  height: 20px;
  min-width: 28px;
  border-radius: 999px;
  background: #fff;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  opacity: .4;
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
}

.tw-section-header-icon-btn:hover {
  opacity: 1.0;
}

.tw-section-header-icon-btn.tw-section-header-plus-btn {
  width: 18px!important;
  max-width: 18px!important;
  min-width: 18px!important;
  height: 18px!important;
  max-height: 18px!important;
  min-height: 18px!important;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 1px;
  border: 1.5px solid #64748b!important;
}

.timeline-day-schedule-parent.is-collapsed 
.tw-section-header-plus-btn {
 display: none;
}


.tw-section-header-actions .de-menu.de-menu-plus.tw-day-notes-header-plus-drawer {
    left: -30px;
    max-width: 30px;
}


.tw-section-header-actions .de-menu.de-menu-plus-close {
    max-width: 24px;
    height: 64px;
}


.tw-section-header-actions .de-menu.de-menu-all-plus-buttons.de-atip-plus-menu {
    top: 40px!important;
    right: -80px !important;
    left: auto !important;
    bottom: auto;
}

@media (max-width: 820px) {
    .tw-section-header-actions .de-menu.de-menu-all-plus-buttons.de-atip-plus-menu {
        top: 40px!important;
        right: -60px !important;
        min-width: 0!important;
        left: auto !important;
        bottom: auto;
    }
}


.tw-section-header-icon-btn:hover {
  background: transparent;
  color: #64748b;
}

.tw-focus-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(2, 6, 23, 0.46);
  box-sizing: border-box;
}

.tw-focus-view-overlay.is-desktop {
  padding: 30px;
}

.tw-focus-view-overlay.is-mobile {
  padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
}

.tw-focus-view-panel {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tw-focus-view-header {
  flex: 0 0 auto;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 12px 9px 14px;
  border-bottom: 1px solid rgba(17,24,39,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.96);
}

.tw-focus-view-titleblock {
  flex: 1 1 auto;
  min-width: 0;
}

.tw-focus-view-kicker {
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7b8494;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.tw-focus-view-title {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 650;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-focus-view-close {
  appearance: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: rgba(17,24,39,0.07);
  color: #596273;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px 0;
  margin: 0;
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
}

.tw-focus-view-close:hover {
  background: rgba(17,24,39,0.12);
}

.tw-focus-view-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 8px 18px;
  box-sizing: border-box;
}

.task-row.task-notes-open > .row-content {
  position: sticky !important;
  top: var(--tw-taskrow-notes-sticky-top, calc(var(--day-header-sticky-top, 60px) + 38px));
  z-index: 65 !important;
  background: #fff;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.task-row.completed.task-notes-open > .row-content {
  background: #ddd;
}

.task-row.task-notes-open > .row-content + * {
  position: relative;
  z-index: 1;
}

.backlog-drawer .bd-row.bd-row-notes-open {
  position: sticky !important;
  top: var(--tw-bd-row-notes-sticky-top, 76px);
  z-index: 80 !important;
  background: #fff;
  border-radius: 12px;
}

@media (max-width: 820px) {

   .timeline-dayEditor-placeholder-btn {
       padding: 16px 5px 26.25px 18px !important
   }

  .tw-focus-view-panel {
    border-radius: 18px;
  }

  .tw-focus-view-body {
    padding: 8px 4px 14px;
  }

  /* DN / TRN / BDRN Focus Views stay near-full-height on mobile.
     The existing --tw-vvh coordinator shrinks this whole overlay when the
     software keyboard opens; the panel simply fills the remaining padded area. */
  .tw-focus-view-overlay.is-mobile.is-content-hug {
    top: var(--tw-vvtop, 0px);
    left: 0;
    right: 0;
    bottom: auto;
    width: 100dvw;
    height: var(--tw-vvh, 100dvh);
    min-height: var(--tw-vvh, 100dvh);
    max-height: var(--tw-vvh, 100dvh);

    align-items: stretch;
    justify-content: stretch;

    padding:
      max(12px, env(safe-area-inset-top, 0px))
      12px
      max(12px, env(safe-area-inset-bottom, 0px));

    background: rgba(15, 23, 42, 0.18);
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Only Timeline DN/TRN Focus Views receive a fully opaque, isolated page layer.
     Preserve the existing --tw-vvh size and --tw-vvtop position coordinates. */
  .tw-focus-view-overlay.is-mobile.is-timeline-notes-focus {
    background: #f8fafc;
    overscroll-behavior: none;
  }

  .tw-focus-view-overlay.is-mobile.is-content-hug
  .tw-focus-view-panel {
    width: 100%;
    max-width: 100%;

    height: 100%;
    min-height: 0;
    max-height: 100%;

    flex: 1 1 auto;
    overflow: hidden;
  }

  .tw-focus-view-overlay.is-mobile.is-content-hug
  .tw-focus-view-header {
    flex: 0 0 auto;
  }

  /* The body owns scrolling. It receives every pixel left below the header,
     regardless of whether the editor currently has one row or fifty. */
  .tw-focus-view-overlay.is-mobile.is-content-hug
  .tw-focus-view-body {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  /* Give the hosted DayEditor a real pane equal to the body height.
     It fills unused space when short, but remains free to grow taller when
     rows / menus require it; the BODY above then becomes the only scroller. */
  .tw-focus-view-overlay.is-mobile.is-content-hug
  .tw-focus-view-dayeditor-wrap {
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .tw-focus-view-overlay.is-mobile.is-content-hug
  .tw-focus-view-dayeditor-wrap
  > .day-editor.is-mobile {
    flex: 1 0 auto;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .task-row.task-notes-open > .row-content {
    top: var(--tw-taskrow-notes-sticky-top-mobile, calc(var(--day-header-sticky-top, 40px) + 36px));
  }

  .backlog-drawer .bd-row.bd-row-notes-open {
    top: var(--tw-bd-row-notes-sticky-top-mobile, 58px);
  }
}

:root {
  /* Desktop sticky positions */
  --tw-taskrow-notes-sticky-top: 132px;
  --tw-bd-row-notes-sticky-top: 30px!important;
}

@media (max-width: 820px) {
  :root {
    /* Mobile sticky positions */
    --tw-taskrow-notes-sticky-top-mobile: 70px;
    --tw-bd-row-notes-sticky-top-mobile: 30px;
  }
}









/* ===== Edward's Private 1910 Motivation Widget ===== */

.tw-private-motivation {
  position: fixed;
  right: 19px;
  bottom: 68px;
  /* == prev. bottom: 92px; === */
  z-index: 20030;
  pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.edward-productivity-tool.is-mobile .tw-private-motivation {
  right: 18px;
  bottom: calc(80px + env(safe-area-inset-bottom));
}

.tw-private-motivation-fab,
.tw-private-motivation-panel {
  pointer-events: auto;
}

.tw-private-motivation-fab {
  width: 45px;
  height: 45px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.38);
  background: linear-gradient(135deg, #6f3ff2, #3374ff);
  color: #fff;
  box-shadow: 0 16px 38px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  margin: 0;
}

.tw-private-motivation-fab:hover {
  background: linear-gradient(135deg, #7c4dff, #3b82ff);
}

.tw-private-motivation-fab-symbol {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.tw-private-motivation-fab-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
}

.tw-private-motivation-fab.is-pulsing,
.tw-private-motivation-panel.is-pulsing {
  animation: tw-private-motivation-pop 700ms ease-out 0s 2;
}

@keyframes tw-private-motivation-pop {
  0% { transform: scale(1); box-shadow: 0 16px 38px rgba(0,0,0,0.28); }
  35% { transform: scale(1.035); box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.16), 0 18px 46px rgba(0,0,0,0.34); }
  100% { transform: scale(1); box-shadow: 0 16px 38px rgba(0,0,0,0.28); }
}

.tw-private-motivation-panel {
  width: min(392px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 122px));
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,0.96);
  color: #111827;
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 22px 70px rgba(15,23,42,0.34);
  backdrop-filter: blur(14px);
}

.edward-productivity-tool.is-mobile .tw-private-motivation-panel {
  width: calc(100vw - 24px);
  max-height: calc(100dvh - 148px);
}

.tw-private-motivation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  background: linear-gradient(135deg, rgba(111,63,242,0.12), rgba(51,116,255,0.12));
  border-bottom: 1px solid rgba(148,163,184,0.24);
}

.tw-private-motivation-eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d28d9;
}

.tw-private-motivation-title {
  margin-top: 2px;
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: #111827;
}

.tw-private-motivation-close {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  padding: 0;
  margin: 0;
  background: rgba(15,23,42,0.08);
  color: #111827;
  border: 1px solid rgba(15,23,42,0.08);
  font-size: 22px;
  line-height: 1;
}

.tw-private-motivation-close:hover {
  background: rgba(15,23,42,0.14);
}

.tw-private-motivation-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}

.tw-private-motivation-date,
.tw-private-motivation-rate {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tw-private-motivation-date span,
.tw-private-motivation-rate span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.tw-private-motivation-date input {
  height: 34px;
  border-radius: 10px;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #111827;
  padding: 0 10px;
  font-size: 14px;
}

.tw-private-motivation-rate {
  min-width: 86px;
  align-items: flex-end;
}

.tw-private-motivation-rate strong {
  font-size: 16px;
  line-height: 34px;
  white-space: nowrap;
}

.tw-private-motivation-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 16px 8px;
}

.tw-private-motivation-stats > div {
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 14px;
  background: rgba(248,250,252,0.92);
  padding: 9px 10px;
  min-width: 0;
}

.tw-private-motivation-stats span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

.tw-private-motivation-stats strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.tw-private-motivation-last {
  margin: 0 16px 10px;
  border-radius: 13px;
  background: rgba(34,197,94,0.10);
  color: #14532d;
  border: 1px solid rgba(34,197,94,0.18);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.25;
}

.tw-private-motivation-last strong {
  font-weight: 800;
}

.tw-private-motivation-last span {
  float: right;
  font-weight: 900;
  color: #15803d;
}

.tw-private-motivation-body {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding: 0 16px 16px;
}

.tw-private-motivation-thermo {
  position: relative;
  width: 16px;
  min-height: 320px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  align-self: stretch;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);
}

.tw-private-motivation-thermo-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #3374ff, #6f3ff2);
  transition: height 280ms ease;
}

.tw-private-motivation-lists {
  min-width: 0;
}

.tw-private-motivation-section-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 8px;
}

.tw-private-motivation-cost-list,
.tw-private-motivation-reward-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
}

.tw-private-motivation-reward-list {
  max-height: 155px;
}

.tw-private-motivation-row {
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 12px;
  background: #fff;
  padding: 7px 8px;
}

.tw-private-motivation-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: #111827;
}

.tw-private-motivation-row-main span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-private-motivation-row-main span:last-child {
  color: #64748b;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tw-private-motivation-mini-bar {
  position: relative;
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: #edf2f7;
  overflow: hidden;
}


.tw-private-motivation-mini-bar > div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6f3ff2, #3374ff);
  transition: width 280ms ease;
}

.tw-private-motivation-reward-title {
  margin-top: 14px;
  margin-bottom: 3px;
}

.tw-private-motivation-reward-sub {
  margin-bottom: 8px;
  font-size: 11px;
  color: #64748b;
}

@media (max-width: 420px) {
  .tw-private-motivation-stats {
    grid-template-columns: 1fr;
  }

  .tw-private-motivation-body {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .tw-private-motivation-thermo {
    width: 14px;
  }
}

/* === Priority tags: light/medium/deep pink === */
.tw-priority-chip {
  appearance: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  box-sizing: border-box;
}

.tw-priority-chip--1 {
  background: #ffe8f2;
  color: #d54983;
}

.tw-priority-chip--1:hover {
  background: #ffe8f2;
  color: #d54983;
  filter: saturate(1.4) contrast(1.1) brightness(.95);
}

.tw-priority-chip--2 {
  background: #ffbbe3;
  color: #850d3e;
}

.tw-priority-chip--2:hover {
  background: #ffbbe3;
  color: #850d3e;
  filter: saturate(1.4) contrast(1.1) brightness(.95);
}

.tw-priority-chip--3 {
  background: #db2777;
  color: #ffffff;
}

.tw-priority-chip--3:hover {
  background: #db2777;
  color: #ffffff;
  filter: saturate(1.4) contrast(1.1) brightness(.95);
}


.tw-priority-chip--drawer {
  max-width: 19px;
  width: 19px;
  min-width: 19px;
  height: 19px;
  height: 19px;
  height: 19px;
  padding: 0;
  font-size: 11px;
  letter-spacing: -.05em;
}

.tw-priority-chip--drawer.is-empty {
  opacity: 0.85;
  background: #fff;
  border-color: #d4d4d8;
  color: #71717a;
}

.tw-priority-chip--taskrow {
  position: absolute;
  left: -3px;
  top: 50%;
  letter-spacing: -.05em;
  transform: translate(-50%, -50%);
  z-index: 30;
  min-width: 15px;
  max-width: 15px;
  height: 15px;
  pointer-events: none;
  padding: 0 0px;
  font-size: 9px;

}

.tw-priority-chip--bdrow {
  flex: 0 0 auto;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  padding: 0 0px;
  margin: 4px 0px 0 4px;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: -.05em;
}

.tw-priority-chip--bdrow:hover {
filter: hue-rotate(0, 0, 0);
background: auto; 
}

@media (min-width: 820px) {
  .tw-priority-chip--bdrow {
    pointer-events: auto;
  }
}

.taskrow-priority-drawer-btn {
  min-width: 40px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.bd-priority-action-btn {
  font-weight: 600 !important;
  width: 25px;
  min-height: 34px!important;
  height: 34px!important;
  letter-spacing: -.05em;
  font-size: 15px!important;
  padding-top: 0px!important;
  padding-bottom: 0px!important;
  line-height: 14px!important;
}

.tw-priority-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 1000010;
}

.tw-priority-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 1000011;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
}

.tw-priority-modal-card {
  width: min(380px, calc(100vw - 24px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
  padding: 16px 16px 14px;
  position: relative;
  pointer-events: auto;
  box-sizing: border-box;
}

.tw-priority-modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: #e7e7e7;
  border-radius: 999px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 0 2px 0;
  margin: 0;
  color: #999;
  font-size: 18px;
  line-height: .25;
}

.tw-priority-modal-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #222;
}

.tw-priority-option {
  width: 100%;
  appearance: none;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  background: #fff;
  color: #222;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin: 0 0 8px;
  text-align: left;
}

.tw-priority-option:hover {
  background: #fafafa;
}

.tw-priority-option.is-active {
  border-color: #ec4899;
  background: #fff0f7;
}

.tw-priority-option-chip {
  min-width: 30px;
  height: 30px;
  font-size: 12px;
  flex: 0 0 auto;
}

.tw-priority-standard-chip {
  border: 1px solid #d4d4d8;
  background: white;
  color: #71717a;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
  min-width: 30px;
  height: 30px;
  box-sizing: border-box;
}

.tw-priority-option-label {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 650;
  color: #222;
}

.tw-priority-option-check {
  color: #be185d;
  font-weight: 900;
  font-size: 15px;
}




/* === Leisure / Break task type === */

/* AddBar + type drawer: Leisure/Break uses the same light context family as Task/Event */
.twKindChip--leisure.twKindChip--personal {
  background: #F0EAFF;
  border-color: #C7B9E6;
  color: #785ABF;
}

.twKindChip--leisure.twKindChip--work {
  background: #DEEBF7;
  border-color: #9CC3E7;
  color: #245DD6;
}

.twKindOption--leisure {
  min-width: 38px;
}

.twKindOption--leisure .twKindLabel {
  font-weight: 600;
}

@media (max-width: 820px) {
}



/* =========================================================
   Final AddBar / ChipDrawer context toggle + small polish
   Fixes:
   1) desktop PWA achievement star oversizing
   2) wide desktop priority chip room
   3) single Personal/Work context toggle
   ========================================================= */


/* -------------------------------
   Fix 1: Desktop PWA achievement star sizing
   Browser sizing is the visual truth; this only normalizes standalone desktop.
   ------------------------------- */

@media (display-mode: standalone) {

  html body .task-row.threecols.taskrow-achievement .kind-chip.tw-type-chip--achievement {
    font-size: 11.5px !important;
    line-height: .25 !important;
    padding: 0 0 2px 1px !important;
  }

  html body .task-row.threecols.taskrow-achievement .tw-achievement-star {
    font-size: 16px!important;
    line-height: 0 !important;
    margin-top: 1px !important;
    position: relative !important;
    left: -2px !important;
    padding-top: 1px!important;
  }

  html body .task-row.threecols.taskrow-achievement .kind-chip.tw-achievement-pill-expanded {
    gap: 4px !important;
  }

  .tw-achievement-text {
    position: relative !important;
    bottom: -1px !important;
    left: -1px !important;
  }

  .kind-chip.tw-type-chip--achievement,  .kind-chip.tw-type-chip.tw-type-chip--achievement {
    font-size: 30px!important;
    line-height: 0px!important;
    padding: 0px!important;
  }
}


/* -------------------------------
   Fix 2: Wide desktop priority chip reserve
   Adds room on the left side only; leaves the dynamic title/input right edge alone.
   ------------------------------- */

@media (min-width: 821px) {
  html body .task-row.threecols.has-priority-chip > .row-content > .row-mid {
    padding-left: 16px !important;
    box-sizing: border-box !important;
  }

  .tw-priority-chip--taskrow {
    left: 8px;
  }
}


/* -------------------------------
   Fix 3: Single Personal / Work context toggle
   Used in Timeline AddBars and TaskRow chipDrawer.
   ------------------------------- */

/* AddBars need visible overflow so the taller context module can rise above the bar. */
html body .twKindBar {
  overflow: visible !important;
}

html body .twContextToggle {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  background-color: #fff;
  color: #9ca3af;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 120ms ease, background-color 120ms ease;
}

html body .twContextToggle:hover {
  background: #fff;
  background-color: #fff;
}

html body .twContextToggle--addbar {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  align-self: center;
  margin-top: -2px;
  margin-bottom: -6px;
  padding: 5px 7px 6px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 8px 0 0 8px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  z-index: 5;
}

html body .twContextToggle--drawer {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 4px 6px 2px 6px;
}

html body .twContextToggle__label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  color: #b8b8bf;
  pointer-events: none;
}

html body .twContextToggle--addbar .twContextToggle__label {
  font-size: 8px;
  font-weight: 700;
}

html body .twContextToggle.is-work .twContextToggle__label--work {
  color: #245DD6;
}

html body .twContextToggle.is-work .twContextToggle__label--personal {
  color: #999;
}

html body .twContextToggle.is-personal .twContextToggle__label--work {
  color: #999;
}

html body .twContextToggle.is-personal .twContextToggle__label--personal {
  color: #785ABF;
}

html body .twContextToggle__track {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 10px;
  min-height: 10px;
  border: 2px solid #d7d7dc;
  border-radius: 999px;
  background: #fff;
  box-sizing: border-box;
  pointer-events: none;
}

html body .twContextToggle--addbar .twContextToggle__track {
  width: 40px;
  min-width: 40px;
  height: 10px;
  min-height: 10px;
}

html body .twContextToggle__thumb {
  position: absolute;
  top: 50%;
  left: -2px;
  width: 24px;
  height: 12px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #785ABF;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  transition: left 140ms ease, background-color 140ms ease;
}

html body .twContextToggle--addbar .twContextToggle__thumb {
  width:30px;
  height: 12px;
  min-height: 12px;
  max-height: 12px;
}

html body .twContextToggle.is-work .twContextToggle__thumb {
  left: -2px;
  background: #245DD6;
}

html body .twContextToggle.is-personal .twContextToggle__thumb {
  left: calc(100% - 22px);
  background: #785ABF;
}

html body .twContextToggle--addbar.is-personal .twContextToggle__thumb {
  left: calc(100% - 26px);
}

.calendarview-timeline-dayeditor-popup .twContextToggle__thumb {
  height: 20px;
  width: 36px;
}

.calendarview-timeline-dayeditor-popup .twContextToggle.twContextToggle--drawer.is-personal.is-personal-context-btn .twContextToggle__thumb {
  left: 12px;
}

.calendarview-timeline-dayeditor-popup .twContextToggle.twContextToggle--drawer.is-work.is-work-context-btn .twContextToggle__thumb {
  left: -2px;
}

/* Mobile/narrow AddBars: keep the same design, but compact the module. */
@media (max-width: 820px) {

  .day-notes-day-schedule-sticky-bar {
    width: calc(100% - 30px) !important;
  }

  html body .twContextToggle--addbar {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    margin-top: -3px;
    margin-bottom: -3px;
    margin-left: -2px;
    padding: 4px 5px 5px;
  }

  html body .twContextToggle--addbar .twContextToggle__label {
    font-size: 8px;
  }

  html body .twContextToggle--addbar .twContextToggle__track {
    width: 38px;
    min-width: 38px;
    height: 8px;
    min-height: 8px;
    max-height: 8px;
    margin: 2px 0;
  }

  html body .twContextToggle--addbar .twContextToggle__thumb {
  height: 12px;
  min-height: 12px;
  max-height: 12px;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  }

  html body .twContextToggle--addbar.is-personal .twContextToggle__thumb {
    left: calc(100% - 20px);
  }
}
/* ===== DayEditor Drive-backed image add modal + lightbox ===== */
.tw-image-add-backdrop,
.tw-image-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(15, 23, 42, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px));
}

/* Image, audio, and video Add modals must appear above BrainDump. */
body:has(.bdmp-overlay) > .tw-image-add-backdrop {
  z-index: 1000001;
}

.tw-image-add-modal {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(105, 96, 138, 0.18);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
}

.tw-image-add-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.tw-image-add-eyebrow {
  font-size: 11px;
  color: #69608a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.tw-image-add-title {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  line-height: 1.15;
}

.tw-image-add-close,
.tw-image-lightbox-close {
  width: 32px;
  height: 32px;
  padding: 0 0 2px 0;
  margin: -5px -5px 0 0;
  border: 0;
  line-height: 0px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
}

.tw-image-add-close:hover,
.tw-image-lightbox-close:hover {
  background: rgba(15, 23, 42, 0.13);
}

.tw-image-add-body {
  padding: 14px 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tw-image-add-file-input {
  display: none;
}

.tw-image-add-mobile-picker,
.tw-image-add-submit {
  background: #6d4fc2;
  color: #fff;
}

.tw-image-add-mobile-picker:hover,
.tw-image-add-submit:hover {
  background: #593ab4;
}

.tw-image-add-dropzone {
  border: 1.5px dashed rgba(105, 96, 138, 0.42);
  background: #fbfaff;
  border-radius: 16px;
  min-height: 150px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #3d355a;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.tw-image-add-dropzone:hover,
.tw-image-add-dropzone.is-active {
  background: #f3f0ff;
  border-color: rgba(105, 96, 138, 0.72);
  transform: translateY(-1px);
}

.tw-image-add-drop-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(105, 96, 138, 0.11);
  color: #69608a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}

.tw-image-add-drop-title {
  font-size: 14px;
  font-weight: 800;
}

.tw-image-add-drop-sub {
  font-size: 12px;
  color: #706b7d;
}

.tw-image-add-file-pill {
  align-self: flex-start;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1effb;
  color: #3d355a;
  border: 1px solid rgba(105, 96, 138, 0.18);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-image-add-file-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 100%;
}
.tw-image-add-file-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.tw-image-add-file-thumb {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid rgba(105,96,138,.18);
  border-radius: 9px;
  background: #f8f7fd;
}
.tw-image-add-file-row .tw-image-add-file-pill {
  min-width: 0;
  flex: 0 1 auto;
  align-self: center;
}
.tw-image-add-remove-file {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  background: #efedf7;
  color: #544d69;
  cursor: pointer;
}

.tw-image-add-section-label,
.tw-image-add-label span {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.tw-image-add-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tw-image-add-toggle-row button {
  flex: 1 1 120px;
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.tw-image-add-toggle-row button:hover {
  background: #f1f5f9;
}

.tw-image-add-toggle-row button.is-active {
  background: #6d4fc2;
  color: #fff;
  border-color: #6d4fc2;
}

.tw-image-add-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tw-image-add-label input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d7dce5;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px;
  color: #111827;
}

.tw-image-add-note {
  font-size: 11px;
  color: #706b7d;
  line-height: 1.35;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 9px;
}

.tw-image-add-error {
  font-size: 12px;
  color: #a23a3a;
  background: #fff1f1;
  border: 1px solid #ffd0d0;
  border-radius: 10px;
  padding: 8px 9px;
}

.tw-image-add-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 16px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.tw-image-add-cancel {
  background: #eef2f7;
  color: #334155;
  border-color: #e2e8f0;
}

@media (max-width: 820px) {
  .tw-image-add-footer > button {
    min-height: 40px;
    min-width: 90px;
    padding: 9px 16px;
    font-size: 13px;
    line-height: 1.2;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.tw-image-add-cancel:hover {
  background: #e5ebf3;
}

.tw-image-lightbox {
  width: min(980px, calc(100vw - 28px));
  height: min(820px, calc(100dvh - 28px));
  background: #0f172a;
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tw-image-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.tw-image-lightbox-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 750;
}

.tw-image-lightbox-close {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.tw-image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.tw-image-lightbox-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.tw-image-lightbox-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* Pan/zoom viewport transplanted from the existing Coparentally viewer.
   The containing DayEditor lightbox, thumbnails and label controls are unchanged. */
.tw-image-lightbox-body .tw-image-pan-zoom {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #0f172a;
}
.tw-image-pan-zoom-viewport {
  position: absolute;
  inset: 0;
  overflow: scroll;
  overscroll-behavior: contain;
  touch-action: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.tw-image-pan-zoom-viewport.is-dragging,
.tw-image-pan-zoom[data-dragging="true"] .tw-image-pan-zoom-viewport {
  cursor: grabbing;
}
.tw-image-pan-zoom-viewport:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: -2px;
}
.tw-image-pan-zoom-stage {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
.tw-image-lightbox-body .tw-image-pan-zoom-image {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  object-fit: fill;
  border-radius: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.tw-image-pan-zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tw-image-pan-zoom-controls button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(15,23,42,.88);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.tw-image-pan-zoom-controls button:disabled {
  opacity: .35;
  cursor: default;
}
.tw-image-pan-zoom-error {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #e5e7eb;
  background: #0f172a;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
@media (hover: none), (pointer: coarse) {
  .tw-image-pan-zoom-viewport { scrollbar-width: none; }
  .tw-image-pan-zoom-viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  .tw-image-pan-zoom-controls { display: none; }
}

.tw-image-lightbox-fallback {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 14px;
  text-align: center;
}

.tw-image-lightbox-header-actions { display: flex; align-items: center; gap: 8px; }
.tw-image-lightbox-nav {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  font-size: 25px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  cursor: pointer;
}
.tw-image-lightbox-nav:disabled { opacity: .28; cursor: default; }
.tw-image-lightbox-body { position: relative; }
.tw-image-lightbox-delete {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(154,25,43,.85);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  cursor: pointer;
}
.tw-image-lightbox-thumbnails {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 67px;
  overflow-x: auto;
  padding: 7px 14px;
  background: rgba(255,255,255,.06);
}
.tw-image-lightbox-thumb {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  color: #c8c2df;
  background: rgba(255,255,255,.1);
  cursor: pointer;
}
.tw-image-lightbox-thumb.is-current { border-color: #a78bfa; box-shadow: 0 0 0 1px #fff; }
.tw-image-lightbox-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.tw-image-lightbox-add {
  flex: 0 0 50px;
  min-width: 50px;
  height: 50px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #eae6ff;
  border: 1px dashed rgba(255,255,255,.55);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: width .16s ease, flex-basis .16s ease;
}
.tw-image-lightbox-add > span:first-child { font-size: 23px; }
.tw-image-lightbox-add .tw-image-lightbox-drop-text { display: none; font-size: 12px; }
.tw-image-lightbox-add.is-drag-over { flex-basis: 160px; }
.tw-image-lightbox-add.is-drag-over .tw-image-lightbox-drop-text { display: inline; }
.tw-image-lightbox-add:disabled { opacity:.4; cursor:default; }

.tw-video-add-modal {
  width: min(620px, calc(100vw - 24px));
}

.tw-video-add-source-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.tw-video-add-source-option {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid #dcdde4;
  border-radius: 10px;
  background: #f8f8fb;
  color: #4b4756;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.tw-video-add-source-option.is-active {
  border-color: #9d91c6;
  background: #f1edff;
  color: #413865;
}

.tw-video-add-source-option.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.tw-video-add-source-option input {
  margin: 0;
  flex: 0 0 auto;
}

.tw-video-record-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tw-video-record-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  object-fit: contain;
  border-radius: 12px;
  background: #111827;
}

.tw-video-record-actions {
  justify-content: center;
}

.tw-video-draft-preview-shell {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background: #111827;
  overflow: hidden;
}

.tw-video-draft-preview {
  width: 100%;
  display: block;
}

.tw-video-draft-tap-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.tw-video-draft-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.tw-video-record-actions > button,
.tw-video-draft-actions > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  white-space: normal;
  line-height: 1.2;
  cursor: pointer;
}

.tw-video-draft-actions > button {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}

.tw-video-draft-actions > button:hover {
  background: #f1f5f9;
}

.tw-video-record-actions > button:disabled,
.tw-video-draft-actions > button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.tw-video-record-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #3d355a;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.tw-video-record-active-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  background: #ef343e;
  box-shadow: 0 0 0 2px rgba(239, 52, 62, 0.15);
}

.tw-video-live-shell {
  position: relative;
  width: 100%;
}

.tw-video-live-shell > .tw-video-record-preview.is-mirrored {
  transform: scaleX(-1);
}

.tw-video-mirror-toggle {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: white;
  background: rgba(25, 27, 38, 0.7);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.tw-video-mirror-toggle:hover,
.tw-video-mirror-toggle:focus-visible {
  background: rgba(39, 42, 62, 0.92);
}

.tw-video-camera-loading {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #fff;
  background: rgba(25, 27, 38, 0.74);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
}

.tw-video-record-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.tw-video-record-actions > button svg {
  flex: 0 0 17px;
}

.tw-video-thumbnail-file-row {
  margin-top: 8px;
}

.tw-video-thumbnail-file-row .tw-image-add-file-thumb {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  object-fit: cover;
}

.tw-video-add-source-option:only-child {
  grid-column: 1 / -1;
}

.tw-video-record-finalizing {
  color: #6d6878;
  font-size: 12px;
  text-align: center;
}

.tw-video-thumbnail-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ececf1;
}

.tw-video-thumbnail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #55515e;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.tw-video-thumbnail-toggle input {
  margin: 0;
}

.tw-video-thumbnail-dropzone {
  margin-top: 9px;
  min-height: 82px;
}

.tw-video-youtube-source {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tw-video-youtube-preview {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid #e4e4ea;
  border-radius: 10px;
  background: #fafafe;
}

.tw-video-youtube-preview img {
  display: block;
  width: 120px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
  background: #111;
}

.tw-video-youtube-preview strong,
.tw-video-youtube-preview span {
  display: block;
  min-width: 0;
}

.tw-video-youtube-preview strong {
  overflow: hidden;
  color: #403a55;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-video-youtube-preview span {
  margin-top: 3px;
  color: #777281;
  font-size: 9px;
}

.tw-video-lightbox-body {
  min-height: 180px;
}

.tw-video-lightbox-player {
  display: block;
  width: min(800px, calc(100vw - 96px));
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  border: 0;
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

.tw-media-lightbox-disconnected-card {
  width: min(560px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}

.tw-audio-lightbox-body {
  min-height: 120px;
}

.tw-media-lightbox-controls {
  flex: 0 0 auto;
  max-height: 44dvh;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 16px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
}

.tw-media-lightbox-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tw-media-lightbox-field > span {
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tw-media-lightbox-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid #d7dce5;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 13px;
}

.tw-media-transcript-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.tw-media-transcript-toggle,
.tw-media-transcript-write {
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #d7dce5;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

.tw-media-transcript-toggle {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.tw-media-transcript-chevron {
  flex: none;
}

.tw-media-transcript-chevron.is-expanded {
  transform: translateY(3px) rotate(180deg);
}

.tw-media-transcript-toggle:hover,
.tw-media-transcript-write:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.tw-media-transcript-empty-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 12px;
}

.tw-media-transcript-help {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
}

.tw-media-transcript-help:hover {
  background: #f8fafc;
  color: #334155;
}

.tw-media-transcript-textarea {
  width: 100%;
  min-height: 170px;
  max-height: 34dvh;
  box-sizing: border-box;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid #d7dce5;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.tw-media-transcript-info-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.52);
}

.tw-media-transcript-info-modal {
  width: min(520px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
}

.tw-media-transcript-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tw-media-transcript-info-header button {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #d7dce5;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
}

.tw-media-transcript-info-header button:hover {
  background: #eef2f7;
}

.tw-media-transcript-info-modal p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
}

.tw-media-transcript-info-modal a {
  color: #2563eb;
  font-weight: 650;
}

@media (max-width: 820px) {
  .tw-video-add-source-options {
    grid-template-columns: 1fr;
  }

  .tw-video-youtube-preview {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .tw-video-youtube-preview img {
    width: 96px;
  }

  .tw-video-lightbox-player {
    width: min(800px, calc(100vw - 48px));
  }

  .tw-media-lightbox-controls {
    max-height: 48dvh;
    padding: 12px 12px 14px;
  }

  .tw-media-transcript-textarea {
    min-height: 150px;
    max-height: 30dvh;
  }
}


/* ============================================================== */
/* === DAY NOTES, SCHEDULE, & JOURNAL COLLAPSE/EXPAND STYLING === */
/* ============================================================== */

.timeline-day-schedule-parent 
.day-notes-day-schedule-sticky-bar {
    margin: 0px -20px 0px 0px;
    border-radius: 0 0 10px 10px;
}

.timeline-day-notes-parent 
.day-notes-day-schedule-sticky-bar {
    margin: 0px -20px 0px 0px;
    border-radius: 0 0 10px 10px;
}

.timeline-day-journal-parent 
.day-notes-day-schedule-sticky-bar {
    margin: 0px -20px 0px 0px;
    border-radius: 0 0 10px 10px;
}

.timeline-day-schedule-parent 
.stack-4 {
  padding-top: 5px;
  padding-bottom: 5px;
}



/* =========================================================
   Achievement picker cleanup
   - Hide the "Achievement" word in TaskRow drawer + Timeline addbars
   - Compact Achievement back to normal picker width
   - Nudge star down into visual center
   ========================================================= */

html body .twKindOption--achievement {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0px 3px 0 3px !important;
  gap: 0 !important;
  justify-content: center !important;
}

html body .twKindDrawer--taskRow .twKindOption--achievement {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}

.twKindDrawer--taskRow .twKindChip--achievement .twKindGlyph {
font-size: 12px;
}

html body .twKindOption--achievement .twKindChip {
  margin-top: 0 !important;
}

html body .twKindOption--achievement .twKindGlyph {
  line-height: 1 !important;
  transform: translateY(0px);
}

/* Safety net: if any old Achievement label survives in any picker surface, hide it. */
html body .twKindOption--achievement .twKindLabel,
html body .twKindOption--achievement .twKindLabel--achievement {
  display: none !important;
}



/* ===== Swap toast (shown when dragging a task over a direct touching neighbor) ===== */
.task-wrap {
  position: relative; /* needed for absolute toast positioning */
}

.task-wrap .swap-toast {
  display: none;
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--tw-swap-row-height, 100%);
  z-index: 10;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: 12px;
  background: transparent;
  border: 0;
  box-sizing: border-box;
}

.task-wrap.swap-neighbor-hover .swap-toast {
  display: flex;
}

.swap-toast-label {
  background: rgba(79, 70, 229, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 16px;
  border-radius: 999px;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* ===== Mobile ExpandedGapRuler: cancel | timestamps | tracks ===== */
.gap-grid.gap-grid-mobile-reversed .gap-ruler .row {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  column-gap: 5px !important;
}

.gap-grid.gap-grid-mobile-reversed .ruler-canceldrop-area {
  margin: -20px 15px 0 -10px;
}

.gap-grid.gap-grid-mobile-reversed .gap-ruler .row .ruler-textwrap {
  position: relative !important;
  grid-column: 1;
  grid-row: 1;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 54px !important;
  height: 100% !important;
  padding-left: 0 !important;
  justify-self: stretch !important;
}

.gap-grid.gap-grid-mobile-reversed .gap-ruler .row .ruler-text {
  left: auto !important;
  right: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

.gap-grid.gap-grid-mobile-reversed .gap-ruler .row .ruler-line {
  position: relative !important;
  grid-column: 2;
  grid-row: 1;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  justify-self: stretch !important;
}

/* Preserve the intentionally shorter green bookend lines. */
.gap-grid.gap-grid-mobile-reversed .gap-ruler .row.book-start .ruler-line {
  width: 70% !important;
  justify-self: end !important;
}

.gap-grid.gap-grid-mobile-reversed .gap-ruler .row.book-end .ruler-line {
  width: 70% !important;
  justify-self: end !important;
}

.gap-grid.gap-grid-mobile-reversed .gap-ruler .row.book-end .ruler-textwrap {
  grid-column: 2;
  width: 70% !important;
  justify-self: end !important;
}

.gap-grid.gap-grid-mobile-reversed .gap-ruler .row.book-end .ruler-text {
  left: auto !important;
  right: 0 !important;
  text-align: right !important;
}

.gap-grid.gap-grid-mobile-reversed .gap-ruler .row.book-start .ruler-textwrap {
  grid-column: 2;
  width: 70% !important;
  top: -5px !important;
  justify-self: end !important;
}

.gap-grid.gap-grid-mobile-reversed .gap-ruler .row.book-start .ruler-text {
  left: auto !important;
  right: 0 !important;
  text-align: right !important;
}

/* Desktop: keep the timespan pill above the pointer and native drag image. */
.gap-grid:not(.gap-grid-mobile-reversed) .drop-proxy-pill {
  transform: translateY(-42px);
}

/* Keep the expanded lane and its pill above the sticky Day Schedule header. */
.avail-bar.gap-expanded {
  position: relative;
  z-index: 10020 !important;
  overflow: visible !important;
}

/* The DayCard body retains its header; stacked sections are orderable presentation
   boxes, never rewritten entries or draggable content. */
.card.card-day { display: flex; flex-direction: column; }
.timeline-day-sections.is-stacked { display: contents; }
.timeline-day-sections.is-stacked > .timeline-day-notes-parent,
.timeline-day-sections.is-stacked > .timeline-day-schedule-parent,
.timeline-day-journal-parent { width: 100%; min-width: 0; }
.timeline-day-sections.is-stacked > .timeline-day-section-splitter { display: none !important; }
/* Extra-wide collapse uses the original single-column Day Notes / Day Schedule
   grid below; the narrow-screen section-ordering rules above remain unchanged. */

/* ===== Timeline day: shared Day Notes / Day Schedule wide split ===== */
.timeline-day-sections {
  display: block;
  width: 100%;
  min-width: 0;
}

.timeline-day-sections > .timeline-day-notes-parent,
.timeline-day-sections > .timeline-day-schedule-parent {
  min-width: 0;
  max-width: 100%;
}

.timeline-day-sections.is-wide {
  display: grid;
  align-items: stretch;
}

.timeline-day-sections.is-wide.has-two-open-sections.is-notes-first {
  grid-template-columns:
    minmax(0, var(--tw-day-notes-track, 0.4fr))
    8px
    minmax(0, var(--tw-day-schedule-track, 0.6fr));
  grid-template-areas: "dayNotesSection daySectionSplitter dayScheduleSection";
}

.timeline-day-sections.is-wide.has-two-open-sections.is-schedule-first {
  grid-template-columns:
    minmax(0, var(--tw-day-schedule-track, 0.6fr))
    8px
    minmax(0, var(--tw-day-notes-track, 0.4fr));
  grid-template-areas: "dayScheduleSection daySectionSplitter dayNotesSection";
}

.timeline-day-sections.is-wide.has-single-column {
  grid-template-columns: minmax(0, 1fr);
}

.timeline-day-sections.is-wide.has-single-column.is-notes-first {
  grid-template-areas:
    "dayNotesSection"
    "dayScheduleSection";
}

.timeline-day-sections.is-wide.has-single-column.is-schedule-first {
  grid-template-areas:
    "dayNotesSection"
    "dayScheduleSection";
}

.timeline-day-notes-parent {
  grid-area: dayNotesSection;
}

.timeline-day-schedule-parent {
  grid-area: dayScheduleSection;
}

.timeline-day-notes-dropzone,
.timeline-day-journal-dropzone {
  position: absolute;
  inset: 0;
  z-index: 100080;
  min-height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 2px solid #2563eb;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  color: #1d4ed8;
}

.timeline-day-notes-dropzone-copy {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  text-align: center;
  box-shadow: 0 8px 24px rgba(29, 78, 216, 0.14);
}

.timeline-day-notes-dropzone-copy strong {
  font-size: 14px;
}

.timeline-day-notes-dropzone-copy span {
  font-size: 10px;
  font-weight: 600;
}

.timeline-day-schedule-dropzone {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  border: 2px solid #2563eb;
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
  font-size: 10px;
  text-align: center;
}

.timeline-day-schedule-dropzone strong {
  font-size: 12px;
}

@keyframes planner-notes-dwell-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Activation remains immediate for timer ownership, but nothing is painted
   until 400ms. The existing gradient then begins at 500ms. */
@keyframes planner-notes-dwell-outline {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A lifted DayEditor block or checkitem must not inherit textarea's I-beam. */
body.planner-dnd-carrying-dayeditor,
body.planner-dnd-carrying-dayeditor .edward-productivity-tool,
body.planner-dnd-carrying-dayeditor :is(.day-editor, .timeline, .backlog-drawer),
body.planner-dnd-carrying-dayeditor :is(.day-editor, .timeline, .backlog-drawer) * {
  cursor: grabbing !important;
}

.task-row.planner-dnd-notes-hover > .row-content {
  position: relative;
  isolation: isolate;
}

.task-row.planner-dnd-notes-hover > .row-content::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 60;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.17));
  transform: scaleX(0);
  transform-origin: left center;
  animation: planner-notes-dwell-fill 1100ms linear 500ms both;
}

.task-row.planner-dnd-notes-hover > .row-content::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 61;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid rgba(37, 99, 235, 0.45);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  animation: planner-notes-dwell-outline 1ms steps(1, end) 400ms both;
}

.timeline-daycard-header-dnd-choices {
  position: absolute;
  inset: 0;
  z-index: 100090;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  padding: 2px 4px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.92);
}

.timeline-daycard-header-dnd-choice {
  min-width: 0;
  display: grid;
  place-items: center;
  border: 2px solid #2563eb;
  border-radius: 9px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  cursor: default;
}

.timeline-structural-drop-boundary {
  position: relative;
  height: 14px;
  margin: -7px 0;
  z-index: 0;
  pointer-events: none;
}

.timeline-structural-drop-line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #2563eb;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease, height 100ms ease, box-shadow 100ms ease;
}

.scroll-container.timeline-structural-dnd-active .timeline-structural-drop-boundary {
  z-index: 10030;
  pointer-events: auto;
}

.scroll-container.timeline-structural-dnd-active .timeline-structural-drop-line {
  opacity: 0;
}

.scroll-container.timeline-structural-dnd-active
.timeline-structural-drop-boundary.is-active
.timeline-structural-drop-line {
  height: 3px;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.timeline-day-sections.is-wide .day-notes-day-schedule-sticky-bar {

  box-sizing: border-box;
  width: 100% !important;
  margin-right: 0 !important;
  margin-top: 0px!important;
}

.timeline-day-sections.is-wide  
.timeline-daycard-top-dayeditor-wrap {
    position: sticky!important;
    top: 145px!important;
  }

.timeline-day-sections.is-wide   
.stack-4 {
    position: sticky!important;
    top: 145px!important;
    margin-bottom: 10px!important;
  }


  header.row.between {
    z-index: 10050!important;
  }  

.timeline-day-section-splitter {
  grid-area: daySectionSplitter;
  position: relative;
  z-index: 10040;
  display: none;
  align-self: stretch;
  width: 8px;
  min-width: 8px;
  max-width: 8px;
  padding: 0;
  margin: 0;
  border: 1px solid lightgray;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  border-radius: 0;
  background: #fff;
  cursor: col-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: visible;
  isolation: isolate;
}

.timeline-day-sections.is-wide.has-two-open-sections
  > .timeline-day-section-splitter {
  display: block;
}

.timeline-day-section-splitter:hover,
.timeline-day-section-splitter:focus-visible {
  background: #f1f3f5;
}

.timeline-day-section-splitter:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.55);
  outline-offset: -2px;
}

.timeline-day-section-swap {
  position: sticky;
  left: 50%;
  top: 150px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 6px;
  padding: 0px 6px 6px 6px;
  margin: 50px 0 0 0;
  border: 1px solid #d7dbe2;
  border-radius: 6px;
  transform: translate(-50%, -50%);
  background: #eff2f6;
  color: #596273;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    visibility 120ms ease,
    background-color 120ms ease;
}

.timeline-day-section-splitter:hover > .timeline-day-section-swap,
.timeline-day-section-splitter:focus-within > .timeline-day-section-swap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.timeline-day-section-swap:hover,
.timeline-day-section-swap:focus-visible {
  background: #fff;
}

html.tw-day-section-resizing,
html.tw-day-section-resizing * {
  cursor: col-resize !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.timeline-dayeditor-ms-host.is-day-schedule-first > .de-ms-toolbar {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}
.timeline-dayeditor-ms-host {
  top: -6px;
}

.timeline-dayeditor-ms-host .de-ms-toolbar {
    margin-left: 120px!important;
    margin-bottom: 7px!important;
  }

/* Day Notes multiselect uses the SAME header row as the date.
   The existing portal host remains mounted, but takes the place of the
   regular header actions. Do not alter .card-header-spacer or its JS sizing. */
html body .card-day > header.timeline-day-header--notes-multiselect {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}
html body .card-day > header.timeline-day-header--notes-multiselect > .card-header-content {
  width: auto !important;
  min-width: 0 !important; /* overrides the JSX minWidth:100% */
  flex: 1 1 auto !important;
  margin: 0 !important;
}
html body .card-day > header.timeline-day-header--notes-multiselect .day-add-btns {
  display: none !important;
}
html body .card-day > header.timeline-day-header--notes-multiselect > .timeline-dayeditor-ms-host {
  position: relative !important;
  inset: auto !important; /* overrides the DayEditor absolute-position rule */
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important; /* override the old mobile second-row reserve */
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  justify-content: flex-end !important;
  overflow: visible !important;
  z-index: 3 !important;
}
html body .card-day > header.timeline-day-header--notes-multiselect
  > .timeline-dayeditor-ms-host > .kronikal-bulk-toolbar {
  width: auto !important;
  max-width: 100% !important;
}

/* Mobile: retain the SAME row. Compact only this header's MS controls
   so they fit beside the date; other Queue/TaskRow MS bars are unchanged. */
@media (max-width: 820px) {
  html body .card-day > header.timeline-day-header--notes-multiselect {
    gap: 4px !important;
    padding-right: 7px !important;
  }
  html body .card-day > header.timeline-day-header--notes-multiselect
    > .card-header-content {
    gap: 2px !important;
  }
  html body .card-day > header.timeline-day-header--notes-multiselect
    .kronikal-bulk-toolbar {
    gap: 3px !important;
  }
  html body .card-day > header.timeline-day-header--notes-multiselect
    .kronikal-bulk-buttons {
    gap: 3px !important;
  }
}
@media (max-width: 480px) {
  html body .card-day > header.timeline-day-header--notes-multiselect
    .kronikal-bulk-count { gap: 3px !important; }
  html body .card-day > header.timeline-day-header--notes-multiselect
    .kronikal-bulk-count-number { font-size: 19px !important; }
  html body .card-day > header.timeline-day-header--notes-multiselect
    .kronikal-bulk-count-descriptor { font-size: 8px !important; }
  html body .card-day > header.timeline-day-header--notes-multiselect
    .kronikal-bulk-main,
  html body .card-day > header.timeline-day-header--notes-multiselect
    .kronikal-bulk-exit {
    padding: 5px 5px !important;
    font-size: 10px !important;
  }
  html body .card-day > header.timeline-day-header--notes-multiselect
    .kronikal-bulk-chevron { width: 8px !important; }
}

/* ===== Timeline TaskRow title input: taller control without taller rows ===== */
html body
  .task-row[data-pane-reveal-id^="timeline-task:"]
  .taskrow-title-input-wrap {
  display: flex;
  align-items: center;
}

html body
  .task-row[data-pane-reveal-id^="timeline-task:"]
  .taskrow-title-input-wrap
  .input.title-input {
  --tw-taskrow-title-grow-y: 2px;
  box-sizing: border-box;
  padding-top: calc(2px + var(--tw-taskrow-title-grow-y));
  padding-bottom: calc(2px + var(--tw-taskrow-title-grow-y));
  margin-top: calc(0px - var(--tw-taskrow-title-grow-y));
  margin-bottom: calc(0px - var(--tw-taskrow-title-grow-y));
}

html body
  .task-row[data-pane-reveal-id^="timeline-task:"]
  .taskrow-title-input-wrap
  .input.title-input.has-taskee {
  padding-top: calc(12px + var(--tw-taskrow-title-grow-y));
  padding-bottom: var(--tw-taskrow-title-grow-y);
}

html body
  .avail-bar.extended.lane.compress-thin
  .task-row[data-pane-reveal-id^="timeline-task:"]
  .input.title-input.has-taskee,
html body
  .avail-bar.emergency.lane.compress-thin
  .task-row[data-pane-reveal-id^="timeline-task:"]
  .input.title-input.has-taskee,
html body
  .stack-4.compress-thin
  .task-row[data-pane-reveal-id^="timeline-task:"]
  .input.title-input.has-taskee {
  padding-top: calc(10px + var(--tw-taskrow-title-grow-y));
  padding-bottom: var(--tw-taskrow-title-grow-y);
}

html body
  .task-row[data-pane-reveal-id^="timeline-task:"]:has(.input.title-input.has-taskee)
  > .row-content {
  padding-top: 3.25px;
  padding-bottom: 3.25px;
}

/* ===== TaskRow surface state hierarchy ===== */
html body .task-row.taskrow-context-personal {
  --tw-taskrow-active-border: #c7b9e680;
}

html body .task-row.taskrow-context-work {
  --tw-taskrow-active-border: #9cc3e780;
}

html body
  .task-row.threecols:not(.deadline-row):not(.milestone-row):not(.taskrow-now):not(.is-selected) {
  border: 1px solid transparent;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

html body
  .task-row.threecols:not(.deadline-row):not(.milestone-row):not(.taskrow-now):not(.is-selected):hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.11) !important;
}

html body
  .task-row.threecols.task-notes-open:not(.deadline-row):not(.milestone-row):not(.taskrow-now):not(.is-selected) {
  border-color: #dfe1e7 !important;
}

html body
  .task-row.threecols:not(.deadline-row):not(.milestone-row):not(.taskrow-now):not(.is-selected):not(.completed):is(:has(input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus), .type-drawer-open, .actionbar-open) {
  border-color: var(--tw-taskrow-active-border, #dfe1e7) !important;
}

html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected),
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .row-content,
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .taskrow-now-white-container,
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .row-content .input,
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .taskrow-notes-panel-shell,
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .taskrow-notes-panel-shell-inner,
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .taskrow-notes-for-de-instance,
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .taskrow-day-editor-instance,
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .taskrow-day-editor-instance .day-editor,
html body .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.is-selected) .taskrow-day-editor-instance :is(.de-line-input, .de-cell, .de-divider-title, .de-website-input, .de-image-edge-input, .de-checklist-title, .de-checklist-time, .de-checklist-input) {
  background-color: #ebebef !important;
}

html body
  .task-row.threecols.completed:not(.deadline-row):not(.milestone-row):not(.taskrow-now):not(.is-selected):is(:has(input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus), .type-drawer-open, .actionbar-open) {
  border-color: #cdd0d9 !important;
}

html body .task-row.threecols.overlap:not(.is-selected):not(.ms-selected) {
  border: 1px solid #fb9a9a !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

html body .task-row.threecols.overlap:not(.is-selected):not(.ms-selected):hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.11) !important;
}

html body
  .task-row.threecols.task-notes-open.overlap:not(.deadline-row):not(.milestone-row):not(.taskrow-now):not(.is-selected):not(.ms-selected) {
  border: 1px solid #fb9a9a !important;
  outline: none !important;
}

.tw-task-context-mode-menu {
    overflow: hidden;
    }

.clear-redactions-x-btn:hover {
  opacity: 1!important;
}    

/* ===== color edits for done/ms taskrow selections ===== */

.task-row.completed .de-ms-toolbar-more-btn {
  background: #EBEBEF;
  box-shadow: 0 0 0 6px #EBEBEF;
  }

.task-row.ms-selected .de-ms-toolbar-more-btn,
.task-row.completed.ms-selected .de-ms-toolbar-more-btn {
  background: #BFDDDC;
  box-shadow: 0 0 0 6px #BFDDDC;
  border-color: #90B6AF;
  }

.task-row.ms-selected .de-ms-toolbar,
.task-row.completed.ms-selected .de-ms-toolbar {
  background: #BFDDDC!important;
  border-top: 1px solid #90B6AF;
  }

.task-row.ms-selected .row-content {
  background: #BFDDDC!important;
  width: calc(100% - 24px) !important;
  }  

.task-row.ms-selected .tr-actions {
  width: calc(100% + 10px) !important;
  margin-right: -4px;
  }

.task-row.completed.ms-selected .row-content {
  background: transparent!important;
  }    

.task-row.ms-selected .input.title-input,
.task-row.completed.ms-selected .input.title-input {
  background: #BFDDDC!important;
  }    

.task-row.ms-selected .time-input,
.task-row.completed.ms-selected .time-input {
  background: transparent!important;
  }   

.task-row.ms-selected .de-divider-toggle,
.task-row.completed.ms-selected .de-divider-toggle {
  background: #BFDDDC!important;
  }  



.task-row.completed .de-ms-toolbar-left-fade {
  background:linear-gradient(to right, #EBEBEF 0%, #EBEBEF00 100%);
}

.task-row.ms-selected .de-ms-toolbar-left-fade, 
.task-row.ms-selected.completed .de-ms-toolbar-left-fade {
  background:linear-gradient(to right, #BFDDDC 0%, #BFDDDC00 100%);
}

.task-row.completed .de-ms-toolbar-btn {
  background: #EBEBEF;
}

.task-row.ms-selected .de-ms-toolbar-btn, 
.task-row.ms-selected.completed .de-ms-toolbar-btn {
  background: #d4ebea!important;
  border: 1px solid transparent;
}




/* ===== Taskrow Notes DayEditor multi-select bar at the Timeline pane edge ===== */


.split-pane.timeline > .taskrow-notes-ms-host--pane {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0;
  left: 0 !important;
  z-index: 2147482000;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 10px 8px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.96) 6px,
    #fff 18px
  );
  pointer-events: none;
}

.split-pane.timeline > .taskrow-notes-ms-host--pane:empty {
  display: none;
  padding: 0;
  background: transparent;
}

.split-pane.timeline
  > .taskrow-notes-ms-host--pane
  .de-ms-toolbar {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  pointer-events: auto;
}

@media (max-width: 820px) {
  .taskrow-notes-ms-host{
      bottom: 30px!important;
      contain: inline-size;
    }
}


.de-atip-plus-pill.de-atip-plus-pill--quiz {
  display:none;
}


/* ===== C5 universal Planner drag ghost ===== */
.planner-dnd-ghost-shell {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.planner-dnd-ghost {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 9px 34px 9px 12px;
  border: 1px solid rgba(15, 23, 42, 0.20);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  color: #111827;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.20), 0 2px 7px rgba(15, 23, 42, 0.12);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
  opacity: 0.96;
  overflow: hidden;
}

.planner-dnd-native-ghost.planner-dnd-ghost {
  min-height: 42px;
  max-height: 86px;
}

.planner-dnd-ghost__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.25;
}

.planner-dnd-ghost__secondary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.planner-dnd-ghost__count {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.planner-dnd-ghost__finger-pad {
  flex: 0 0 auto;
  width: 100%;
  pointer-events: none;
}
/* When Day Notes MS physically collides with the normal pill location,
   anchor to the visible Timeline pane's bottom-right, not the viewport. */
.timeline-view-switcher-shell.is-ms-docked {
  position: sticky !important;
  top: max(36px, calc(var(--m3-timeline-pane-height, 500px) - 68px)) !important;
  bottom: auto !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: 12px !important;
  transform: none !important;
  z-index: 9898;
}
@media (max-width: 820px) {
  .timeline-view-switcher-shell.is-ms-docked {
    width: 100% !important;
    margin-right: 0 !important;
  }
  /* The only hide exception is mobile Reorder while actually docked. */
  .scroll-container:has(.de-move-controls) .timeline-view-switcher-shell.is-ms-docked .timeline-view-switcher {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ===== Timeline Days / Months cross-view switcher ===== */
.timeline-view-switcher-shell {
  position: sticky;
  top: 60px;
  z-index: 9898;
  width: fit-content;
  height: 0;
  margin: 0 auto;
  pointer-events: none;
}

.timeline-view-switcher {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.timeline-view-switcher-tab {
  min-width: 64px;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #98a1ae;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.timeline-view-switcher-tab.is-active {
  background: #604df5;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.timeline-view-switcher-tab.is-dwell:not(.is-active) {
  background: #eef2ff;
  color: #4338ca;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.22), 0 0 0 3px rgba(79, 70, 229, 0.08);
  transform: translateY(-1px);
}

.timeline-day-blackout-button {
  width: 24px;
  height: 38px;
  min-width: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #fecdd3;
  border-radius: 999px;
  background: #ffffff;
  color: #be123c;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  position: relative;
  left: -2px;
  top: -3px;
}

/* ===== Calendar planner DnD routing popup ===== */
.calendar-planner-dnd-choice {
  display: grid;
  gap: 12px;
}

.calendar-planner-dnd-choice-heading {
  text-align: center;
}

.calendar-planner-dnd-choice-date {
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.calendar-planner-dnd-choice-help {
  margin-top: 5px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.calendar-planner-dnd-choice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.calendar-planner-dnd-choice-btn,
.calendar-planner-dnd-choice-scroll {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.calendar-planner-dnd-choice-btn:hover,
.calendar-planner-dnd-choice-scroll:hover {
  background: #dbeafe;
}

.calendar-planner-dnd-choice-scroll {
  width: min(190px, 80%);
  justify-self: center;
  border-color: #e2e8f0;
  background: #ffffff;
  color: #475569;
}

.calendar-planner-dnd-choice-scroll.is-dwell {
  border-color: #818cf8;
  background: #eef2ff;
  color: #4338ca;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
  transform: translateY(-1px);
}

.scroll-container.thin-scrollbar{
    min-height: 100%;
}

@media (max-width: 820px) {


  .day-density-fade-wrap {
    display:none!important;
  }

  .timeline-view-switcher-shell {
    position: sticky;
    top: 5px;
    z-index: 19898;
    width: 100%;
    height: 0;
    margin: 0 auto;
    pointer-events: none;
    }

    .timeline-view-switcher {
      right: 6px;
      position: absolute;
      left: auto;
      height: 24px;
      opacity: var(--tw-timeline-density-controls-opacity, 1);
      visibility: var(--tw-timeline-density-controls-visibility, visible);
      pointer-events: var(--tw-timeline-density-controls-pointer-events, auto);
      transition: opacity 120ms linear;
      will-change: opacity;
    }

  .timeline-view-switcher-tab {
    min-width: 55px;
    max-width: none;
    height: 28px;
    padding: 0 8px;
    font-size: 10px;
  }

  .calendar-planner-dnd-choice-row {
    gap: 6px;
  }

  .calendar-planner-dnd-choice-btn,
  .calendar-planner-dnd-choice-scroll {
    min-height: 40px;
    font-size: 10px;
  }
}

.card.card-day {
  padding-bottom: 10px!important;
}

/* October 2 follow-up: mobile Timeline separation (iOS Safari safe).
   Section lines belong to their sticky headers, not separately composited
   siblings. Card boundaries are independent, full-bleed bands. This pass
   deliberately does not touch the >=821px desktop Safari/Chrome/Firefox fix. */
@media screen and (max-width: 820px) {
  /* Reset the layered legacy outer borders. The absolute, JS-sized header
     spacer is a backdrop only; it must not paint its own outline. */
  .split-pane.timeline .scroll-container > .card.card-day,
  .split-pane.timeline .scroll-container > .blackout-outer-container > .card.card-day {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
  }

  .split-pane.timeline .scroll-container .card-header-spacer {
    border: 0 !important;
    border-radius: 0 !important;
  }

  .split-pane.timeline .card {
    margin-bottom: 35px!important;
    padding-bottom: 10px!important;
  }

.split-pane.timeline .scroll-container .card-header-spacer {
    overflow: clip!important;
    border-radius: 14px 14px 0px 0px!important;
  }

.split-pane.timeline .scroll-container > .card.card-day, .split-pane.timeline .scroll-container > .blackout-outer-container > .card.card-day {
      border-radius: 14px!important;
}  

.scroll-container.thin-scrollbar{
    background: #e8e8f0;
}

  /* ONE card-to-card boundary, owned by the incoming day node. The 4px
     neutral band is intentionally more legible than the former near-white
     hairline, without reviving the black 5px/6px today/blackout borders.
     The first normal card in the scroll pane has no outer top border. */
  .split-pane.timeline .scroll-container > .card.card-day ~ .card.card-day,
  .split-pane.timeline .scroll-container > .blackout-outer-container ~ .card.card-day {
    border-top: 4px solid #e9ebef !important;
  }

  /* Expanded blackout wrappers are peers of ordinary daycards; neither
     their first occurrence nor their last decorative bar gets a boundary. */
  .split-pane.timeline .scroll-container > .blackout-outer-container {
    border-top: 0 !important;
  }

  .split-pane.timeline .scroll-container > .card.card-day ~ .blackout-outer-container,
  .split-pane.timeline .scroll-container > .blackout-outer-container ~ .blackout-outer-container {
    border-top: 4px solid #e9ebef !important;
  }

  /* Daycards nested inside one expanded blackout have one line only between
     consecutive nested daycards, never around the expanded range's outside. */
  .split-pane.timeline .scroll-container > .blackout-outer-container > .card.card-day ~ .card.card-day {
    border-top: 4px solid #e9ebef !important;
  }

  .split-pane.timeline .blackout-end-bar-expanded {
    border-top: 0 !important;
  }

  /* The three divider elements already exist before their respective
     headers in Timeline.jsx. Hide just their mobile paint: iOS Safari may
     composite a separate 1px sibling underneath an opaque sticky header. */
  .split-pane.timeline .timeline-section-top-border-gradient {
    display: none !important;
  }

  /* Each sticky section header now owns its complete-width, white-ended
     gradient. Preserve its inline top/marginTop, padding and sticky z-index;
     only normalize the old calc(100% - 30px) / -20px right-edge workaround. */
  .split-pane.timeline .timeline-day-notes-parent > .day-notes-day-schedule-sticky-bar,
  .split-pane.timeline .timeline-day-schedule-parent > .day-notes-day-schedule-sticky-bar,
  .split-pane.timeline .timeline-day-journal-parent > .day-notes-day-schedule-sticky-bar {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Painting *inside* the sticky header avoids the Safari stacking problem
     while retaining the desktop-style white / gray / white optical fade.
     No side gutters, extra DOM element, outer top edge or doubled lines. */
  .split-pane.timeline .timeline-day-notes-parent > .day-notes-day-schedule-sticky-bar::before,
  .split-pane.timeline .timeline-day-schedule-parent > .day-notes-day-schedule-sticky-bar::before,
  .split-pane.timeline .timeline-day-journal-parent > .day-notes-day-schedule-sticky-bar::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: .5px!important;
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #d4d7df 35%,
      #bcc1ca 50%,
      #d4d7df 65%,
      #ffffff 100%
    );
    pointer-events: none;
    z-index: 1;
  }
}

/* Phone typography and schedule density — desktop rules are unchanged.
   Input/display text only: retain small metadata, badges, and action icons. */
@media screen and (max-width: 820px) {
  /* DayEditor text rows, table cells, URL labels and checklist text/titles.
     Also covers DayEditor instances inside TaskRows, Queue notes and popouts. */
  html body .day-editor :is(
    .de-line-input,
    .de-divider-title,
    .de-website-input,
    .de-website-label,
    .de-checklist-title,
    .de-checklist-input,
    .de-image-edge-input
  ),
  html body .task-row .input.title-input,
  html body .task-row .input.title-input.has-taskee {
    font-size: 14px !important;
  }

  /* Table rows step down 2px from ordinary deRows on phones. */
  html body .day-editor .de-cell {
    font-size: 12px !important;
  }

  /* Inline table metadata steps down another 2px. */
  html body .day-editor :is(
    .de-table-cell-taskee-pill,
    .de-table-cell-shell.has-table-time-pill > .de-cell,
    .de-table-time-measure
  ) {
    font-size: 10px !important;
  }

  /* First-paint safeguard: even before Timeline's compression effect runs,
     a schedule row uses Thin vertical padding on a phone-width viewport. */
  html body .split-pane.timeline .card-day :is(
    .stack-4,
    .marker-lane,
    .avail-bar.extended.lane,
    .avail-bar.emergency.lane
  ) .task-row {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
}
/* Contextual temporal dock (not part of the scrolling day/month content). */
/* .split-pane.timeline is already positioned absolute by the EPT layout. */
.temporal-dock { position: absolute; bottom: 10px; left: 12px; right: 12px; z-index: 12000;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none; gap: 8px;
  opacity: var(--tw-calendar-blackout-controls-opacity, 1);
  transition: opacity 120ms linear;
}
.temporal-dock > * { pointer-events: auto; }
.temporal-dock-left { position: relative; flex: 0 0 auto; }
.temporal-dock .timeline-view-switcher { display:flex; align-items:center; border:1px solid #cbd5e1;
  border-radius:99px; background:white; box-shadow:0 3px 12px #00000014; padding:2px; }
.temporal-view-segment { display:flex; align-items:center; border-radius:99px; padding: 0 5px; gap:1px; }
.temporal-view-segment.is-active { background:#edf2f8; }
.temporal-view-segment.is-dwell { box-shadow:inset 0 0 0 2px #60a5fa; }
.temporal-view-segment button { border:0; border-radius:99px; background:transparent; cursor:pointer;
  color:#26384a; font-size:12px; line-height:1; height:29px; padding:0 7px; font-weight:650; }
.temporal-view-segment .temporal-view-options { font-size:15px; padding:0 4px 0 7px; }
.temporal-view-segment .temporal-view-options:hover { background:#dbe6f3; }
.temporal-context-menu { position:absolute; left:0; bottom:calc(100% + 8px); width:min(305px,calc(100vw - 24px));
  max-height:min(70vh,520px); overflow:auto; display:grid; gap:5px; padding:12px; color:#182637;
  background:white; border:1px solid #cad5e1; border-radius:12px; box-shadow:0 8px 32px #0003; font-size:12px; }
.temporal-context-menu button { background:white; border:1px solid #e2e8f0; border-radius:999px; padding:5px 7px;
  text-align:left; cursor:pointer; color:inherit; font-size:12px; }
.temporal-context-menu button:disabled { opacity:.24; cursor:default; }
.temporal-context-menu hr { height:1px; width:100%; border:0; background:#e2e8f0; margin:6px 0; }
.temporal-menu-heading { letter-spacing:.075em; font-size:10px; font-weight:750; color:#64748b; }
.temporal-menu-check { display:flex; gap:8px; align-items:center; padding:5px 0; cursor:pointer; }
.temporal-menu-check input,.temporal-setting-row input { accent-color:#475569; }
.temporal-setting-row { display:flex; align-items:center; gap:5px; }
.temporal-setting-row label { display:flex; align-items:center; gap:7px; flex:1; cursor:pointer; }
.temporal-setting-row button { min-width:26px; text-align:center; }
.temporal-month-picker { display:flex; gap:5px;  }
.temporal-month-picker select { min-width:0; width:80px; min-height:37px; }
.temporal-month-picker input { width:65px; min-width:0; }
.temporal-feature { position:absolute; left:55%; transform:translateX(-50%); white-space:nowrap; }
.temporal-feature-pill { border:1px solid #d9e1e8; border-radius:99px; background:white;
  box-shadow:0 3px 12px #00000012; display:flex; align-items:center; padding:3px 8px 3px 4px; }
.temporal-feature-pill button,.temporal-feature-main { color:#26384a; cursor:pointer; border:0;
  background:transparent; font-size:12px; height:28px; font-weight:650; }
.temporal-feature-pill .temporal-retract { width:24px; height:24px; border-radius:50%; color:#64748b; font-size:17px; }
.temporal-feature-pill .temporal-retract:hover { background:#e2e8f0; }
.temporal-today {
  position: absolute !important;
  left: auto !important;
  right: 15px !important;
  bottom: 2px !important;
  transform: none !important;
  margin-left: auto;
  white-space: nowrap;
  max-width: 120px;
  height: 36px;
}
/* No extra-wide collapsed-tab overrides: use .has-single-column above. */
@media (max-width:820px) { 
.temporal-today {
  right: 18px !important;
  bottom: -4px !important;
  max-width: 110px;
  height: 32px;
}

 .temporal-dock { 
    bottom: 45px!important;
    left: 0px;
    right: 0px;
    min-width: 100vw !important;
    position: relative;
    max-width: 100vw !important;
    padding: 0px;
  }
 .temporal-dock.is-days { opacity:var(--tw-timeline-density-controls-opacity,1); }
 .temporal-dock.is-months { opacity:var(--tw-calendar-blackout-controls-opacity,1); }
 .temporal-feature-pill .temporal-feature-main { font-size:11px; }
 .temporal-today { font-size:11px; padding:5px 7px; }
}
@media (prefers-reduced-motion:reduce) { .temporal-dock, .temporal-feature-pill { transition:none !important; } }

@media (max-width: 820px) {
  .temporal-dock.is-days {
    visibility:var(--tw-timeline-density-controls-visibility,visible);
    pointer-events:var(--tw-timeline-density-controls-pointer-events,auto);
  }
  .temporal-dock > * { 
    pointer-events: var(--tw-timeline-density-controls-pointer-events,auto);
    position: absolute;
    bottom: 33px;
    left: 10px;
    right: auto;
    top: auto;
    width: 180px;
  }
  .temporal-dock.is-months {
    visibility:var(--tw-calendar-blackout-controls-visibility,visible);
    pointer-events:var(--tw-calendar-blackout-controls-pointer-events,auto);
  }
  .temporal-dock.is-months > * { pointer-events:var(--tw-calendar-blackout-controls-pointer-events,auto); }
  .split-pane.timeline:has(.de-move-controls) .temporal-dock {
    visibility:hidden; pointer-events:none;
  }
}
.calendar-day-direct-actions button { min-width:20px; height:21px; padding:0 3px; background:white;
  border:1px solid #cbd5e1; border-radius:5px; color:#475569; cursor:pointer; font-size:12px; }

/* Retraction deliberately converges on the active view-options icon to teach retrieval. */
.temporal-feature-pill { transform-origin:left center; opacity:1;
  transition: transform 210ms ease-out,opacity 190ms ease-out; }
.temporal-feature-pill.is-retracted {
  transform:translateX(calc(-1 * min(37vw, 400px))) scale(.36);
  opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion:reduce) {
  .temporal-feature-pill,.temporal-feature-pill.is-retracted { transition:none !important; }
}

@media (max-width:375px) {
 .temporal-dock { left:5px; right:5px; }
 .temporal-dock .temporal-view-segment { min-width:0; padding:0 2px; }
 .temporal-dock .temporal-view-segment button { padding-left:4px; padding-right:4px; font-size:11px; }
 .temporal-feature-pill { padding-right:4px; }
 .temporal-feature-pill .temporal-feature-main { font-size:10px; }
 .temporal-today { font-size:10px; padding:4px 5px !important; }
}

/* Consolidated temporal / EPT follow-up: flat, borderless Days / Months.
   The entire inactive segment (burger AND label) receives both effects. */
.temporal-dock .timeline-view-switcher {
  --temporal-active-purple: #6f3ff2;
  --temporal-active-icon-purple: #8f66ff;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px;
  /* Solid backing: masks date/grid lines behind the faded inactive segment,
     including at the curved joint between the two segments. */
  background: #f1eafb !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}
.temporal-dock .temporal-view-segment {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border: 0 !important;
  position: relative;
  border-radius: 999px;
  background: var(--temporal-active-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden;
  opacity: 1;
  filter: none;
  transition: opacity 140ms ease, filter 140ms ease;
}
/* The two segments occupy adjoining (nonoverlapping) layout slots.
   The opaque switcher beneath them fills the corners of the rounded caps. */
.temporal-dock .temporal-view-segment + .temporal-view-segment {
  margin-left: 0;
  padding-left: 0;
  background: var(--temporal-active-purple) !important;
}
/* Only the active tab receives the higher stack level; neither covers
   the other tab's burger or label. */
.temporal-dock .temporal-view-segment.is-active {
  z-index: 2;
}
.temporal-dock .temporal-view-segment:not(.is-active) {
  z-index: 1;
  opacity: .33;
  filter: saturate(.9);
}

.timeline-view-switcher-tab {
  min-height: 40px;
}

.temporal-dock.is-days 
.timeline-view-switcher-tab.is-active {
  width: 92px;
  margin-right: -40px;
  border: 0px solid white!important;
}

.temporal-dock.is-days 
.timeline-view-switcher-tab:not(.is-active) {
  width: 108px;
  margin-right: 0px;
  padding-left: 30px;
}

.temporal-dock.is-months  
.timeline-view-switcher-tab.is-active {
  width: 108px;
  margin-right: 0px;
  border: 0px solid white!important;
}

.temporal-dock.is-months  
.timeline-view-switcher-tab:not(.is-active) {
  width: 130px;
  margin-right: -48px;
}



.temporal-dock .temporal-view-segment.is-dwell:not(.is-active) {
  box-shadow: none !important;
  filter: saturate(.5) brightness(1.15);
}
.temporal-dock .temporal-view-segment button {
  height: 41px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  opacity: 1;
  cursor: pointer;
  transition: filter 120ms ease;
}
.temporal-dock .temporal-view-segment .temporal-view-options {
  position: relative;
  flex: 0 0 36px;
  padding: 0 8px !important;
  font-size: 16px;
  background: var(--temporal-active-icon-purple) !important;
  background-image: none !important;
}
.temporal-dock .temporal-view-segment .temporal-view-label {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 0 18px 0 10px !important;
  white-space: nowrap;
  background: var(--temporal-active-purple) !important;
  background-image: none !important;
}
/* Remove the old gradient divider overlay between burger and label. */
.temporal-dock .temporal-view-segment .temporal-view-options::after {
  content: none !important;
  display: none !important;
}
.temporal-dock .temporal-view-segment .temporal-view-options:disabled {
  cursor:default; filter:none;
}
.temporal-dock .temporal-view-segment .temporal-view-options:not(:disabled):hover { filter:brightness(1.08); }
.temporal-dock .temporal-context-menu {
  background:#151a28; border:1px solid rgba(255,255,255,.12); color:#eef0fc;
  width:min(335px,calc(100vw - 24px)); max-height:min(74vh,610px);
  box-shadow:0 18px 55px #0007; padding:14px;
}
.temporal-context-title { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:17px; margin-bottom:7px; }
.temporal-dock .temporal-context-menu .temporal-context-title button.temporal-context-close { flex:0 0 30px; padding: 0 1px 2px 0px !important; height:30px; text-align:center;
  font-size:20px; color:#fff; background:rgba(255,255,255,.12); border-radius:50%; }
.temporal-dock .temporal-context-menu hr { background:rgba(255,255,255,.14); }
.temporal-dock .temporal-menu-heading { color:rgba(255,255,255,.54); margin:5px 0 2px; }
.temporal-dock .temporal-setting-row { min-height:31px; gap:5px; }
.temporal-dock .temporal-setting-label { flex:1 1 auto; min-width:0; font-size:11px; }
.temporal-dock .temporal-context-menu button.temporal-order-button { min-width:25px; width:25px; height:26px; padding:0;
  flex:0 0 auto; text-align:center; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.15); }
.temporal-dock .temporal-context-menu button.temporal-order-button:disabled { opacity:.22; }
.temporal-choice-switch { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  flex:0 0 82px; height:27px; padding:2px !important; border:2px solid #353946 !important;
  border-radius:99px !important; overflow:hidden; background:#353946 !important; cursor:pointer;
}
.temporal-choice-indicator { position:absolute; inset:0 auto 0 0; width:50%; border-radius:99px;
  background:linear-gradient(135deg,#bd72ff 0%,#7d8dff 48%,#28c9f4 100%);
  transform:translateX(0); transition:transform 180ms ease; z-index:0;
}
.temporal-choice-switch.is-off .temporal-choice-indicator { background:rgba(255,255,255,.43); transform:translateX(100%); }
.temporal-choice-switch > span:not(.temporal-choice-indicator) { position:relative; z-index:1; font-size:9px;
  display:grid; place-items:center; color:rgba(255,255,255,.45); font-weight:800;
}
.temporal-choice-switch > span.is-selected { color:#fff !important; }
.temporal-compression-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.temporal-dock .temporal-context-menu button.temporal-compression-choice {
  min-width:0; text-align:center; padding:8px 3px; border-radius:24px;
  border:1px solid rgba(255,255,255,.16); background:#353946; color:#b9bdcb;
  font-size:11px; font-weight:750;
}
.temporal-dock .temporal-context-menu button.temporal-compression-choice.is-selected {
  color:#fff; border-color:transparent;
  background:linear-gradient(100deg,#6f3ff2,#3374ff);
}
.temporal-setting-hint { margin-top: 10px; font-size:12px; line-height:1.35; color:rgba(255,255,255,.58); }
.temporal-dock .temporal-context-menu button.temporal-primary-action { display:flex; align-items:center; justify-content:center; gap:7px;
  border:0; background:linear-gradient(100deg,#6f3ff2,#3374ff); color:#fff;
  text-align:center; padding:8px 11px; font-weight:650; margin-top: 2px;}
.temporal-routine-icon { width:15px; height:15px; flex:0 0 15px; }
.temporal-dock .temporal-month-picker select,.temporal-dock .temporal-month-picker input {
  border:1px solid rgba(255,255,255,.18); border-radius:6px; color:#fff; background:#292e3e;
  height:29px; font-size:12px; padding:3px 5px;
}
.temporal-dock .temporal-context-menu .temporal-month-picker button.temporal-primary-action { padding:4px 22px; }
.temporal-feature-pill { background:#191e29 !important; color:#fff !important; border:1px solid rgba(255,255,255,.16) !important;
  padding:2px 7px 2px 3px !important; box-shadow:0 3px 10px #0003;
}
.temporal-feature-pill .temporal-feature-main { font-size:11px !important; height:23px !important; padding:0 5px;
  color:#fff !important; font-weight:650; }
.temporal-feature-pill .temporal-retract { display:grid; place-items:center; width:23px !important;
  height:23px !important; padding:3px; background:rgba(255,255,255,.15) !important;
  color:#fff !important; }
.temporal-feature-pill .temporal-retract:hover { background:rgba(255,255,255,.26) !important; }
.temporal-feature-main.temporal-blackouts-exit { background:#191e29 !important; color:#fff !important;
  padding:6px 13px !important; border-radius:99px; border:1px solid rgba(255,255,255,.15); }
.temporal-today-placeholder { width:0; height:0; pointer-events:none; }
/* =========================================================
   CalendarView Add Item
   Schedule and Notes are two tabs of one fixed-size window.
   ========================================================= */

/* Both desktop destinations use exactly the same outer shell. */
.calendarview-timeline-dayeditor-popup:has(.calendar-add-item-composer-shell),
.calendarview-timeline-dayeditor-popup:has(.calendar-add-item-notes-editor) {
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: min(360px, calc(100vw - 32px)) !important;

  height: min(520px, calc(100dvh - 32px)) !important;
  min-height: min(520px, calc(100dvh - 32px)) !important;
  max-height: min(520px, calc(100dvh - 32px)) !important;

  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* ---------- shared header ---------- */

.calendar-add-item-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  color: #111827;
  border-bottom: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-sizing: border-box;
}

/* You moved the date underneath the tabs. Give the date its own breathing room. */
.calendar-add-item-date {
  width: 100%;
  padding: 11px 16px 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.calendar-add-item-single-title {
  width: 100%;
  padding: 14px 16px 12px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
}

/* ---------- full-width destination tabs ---------- */

.calendar-add-item-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;

  width: 100%;
  max-width: none;
  height: 36px;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
  overflow: hidden;

  border: 0;
  border-bottom: 1px solid rgba(100,116,139,.20);
  border-radius: 0;

  background: #eef1f6;
  box-shadow: inset 0 -1px 2px rgba(15,23,42,.035);
}

.calendar-add-item-tabs button {
  width: 100%;
  min-width: 0;
  height: 35px;
  min-height: 35px;

  padding: 0 12px;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: #596273;

  font-size: 12px;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;
  box-sizing: border-box;
}

.calendar-add-item-tabs button + button {
  border-left: 1px solid rgba(100,116,139,.16);
}

.calendar-add-item-tabs button.is-active {
  background: linear-gradient(
    100deg,
    #6f3ff2 0%,
    #5b4df6 48%,
    #3374ff 100%
  );
  color: #fff;
  box-shadow: none;
}

/* ---------- Schedule body ---------- */

.calendar-add-item-composer-shell {
  width: 100%;
  height: 100%;
  min-height: 0;

  display: flex !important;
  flex-direction: column;

  overflow: hidden;
}

.calendar-add-item-composer-shell > .calendar-add-item-heading {
  flex: 0 0 auto;
}

.calendar-add-item-composer-shell > .calendar-add-item-heading + div {
  flex: 1 1 auto;
  min-height: 0;

  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;

  padding: 16px;
  box-sizing: border-box;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.calendar-add-item-composer-shell
  > .calendar-add-item-heading
  + div
  > :last-child {
  margin-top: auto;
}

/* ---------- Notes body ---------- */

.calendar-add-item-heading--dayeditor {
  border-bottom: 1px solid rgba(15,23,42,.10);
  padding: 0;
  gap: 0;
}

.calendar-add-item-notes-editor {
  width: 100%;
  height: 100%;
  min-height: 0;

  display: flex !important;
  flex-direction: column;

  overflow: hidden;
}

.calendar-add-item-notes-editor .calendar-daycard-popout-header {
  position: relative !important;

  display: block !important;

  width: 100%;
  padding: 0 !important;
  margin: 0 !important;

  border-bottom: 0 !important;
  box-sizing: border-box;
}

/* Same padded content region as Schedule, with extra breathing room
   between the date and the first DayEditor item. */
.calendar-add-item-notes-editor .first-outer-container-of-dayeditor {
  flex: 1 1 auto !important;

  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 40px 16px 16px !important;
  box-sizing: border-box;

  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.calendar-add-item-notes-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 12px 16px 16px;
  box-sizing: border-box;
  border-top: 1px solid rgba(15,23,42,.08);
  background: #fff;
}

.calendar-add-item-notes-confirm {
  flex: 1 1 auto;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #7f4ed1;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  font-size: 12px;
}

.calendar-add-item-notes-cancel {
  flex: 0 0 92px;
  width: 92px;
  height: 36px;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
    font-size: 12px;
}

/* Empty Notes is visibly editable even before focus. */
.calendar-add-item-notes-editor .de-row--placeholder,
.calendar-add-item-notes-editor .de-row--atip {
  opacity: 1 !important;
}

.calendar-add-item-notes-editor .de-empty-row-prompt {
  opacity: 1 !important;
}

/* ---------- mobile shared Add Item header ---------- */

.mobile-calendar-add-item-title {
  display: grid;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.mobile-calendar-add-item-date {
  width: 100%;
  padding: 7px 8px 5px;
  box-sizing: border-box;

  font-size: 11px;
  font-weight: 750;
  color: #596273;
  text-align: center;
}

.mobile-calendar-add-item-tabs {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;

  width: 100%;
  height: 32px;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
  overflow: hidden;

  border: 1px solid rgba(100,116,139,.22);
  border-radius: 8px;

  background: #eef1f6;
}

.mobile-calendar-add-item-tabs button {
  width: 100%;
  min-width: 0;
  height: 30px;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: #596273;

  padding: 0 6px;

  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.mobile-calendar-add-item-tabs button + button {
  border-left: 1px solid rgba(100,116,139,.16);
}

.mobile-calendar-add-item-tabs button.is-active {
  background: linear-gradient(
    100deg,
    #6f3ff2 0%,
    #5b4df6 48%,
    #3374ff 100%
  );
  color: white;
  box-shadow: none;
}

/* On an actual phone the Notes popout already uses the full mobile shell.
   Make the Schedule side occupy that same footprint. */
@media (max-width:820px) {
  /* Schedule keeps its fixed composer footprint. */
  .calendarview-timeline-dayeditor-popup:has(.calendar-add-item-composer-shell) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    height: min(520px, calc(var(--tw-vvh, 100dvh) - 24px)) !important;
    min-height: min(520px, calc(var(--tw-vvh, 100dvh) - 24px)) !important;
    max-height: min(520px, calc(var(--tw-vvh, 100dvh) - 24px)) !important;
  }

  /* Notes hugs its real DayEditor content and grows only as needed. */
  .mobile-dayeditor-popout-panel.is-calendar-add-item {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: min(520px, calc(var(--tw-vvh, 100dvh) - 24px)) !important;
  }

  /* DayEditor menus are absolutely positioned, so while one is open give
     the Notes shell the full available footprint instead of clipping it
     inside an otherwise content-hugging one-row editor. */
  .mobile-dayeditor-popout-panel.is-calendar-add-item:has(.de-menu-outer-shell) {
    height: min(520px, calc(var(--tw-vvh, 100dvh) - 24px)) !important;
  }

  .mobile-dayeditor-popout-panel.is-calendar-add-item
    .mobile-dayeditor-popout-header {
    flex: 0 0 auto !important;
    display: block !important;
    width: 100%;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box;
  }

  .mobile-dayeditor-popout-panel.is-calendar-add-item
    .mobile-dayeditor-popout-header
    > div:first-child {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Hide the old Done/Hide action only for Add Item Notes. */
  .mobile-dayeditor-popout-panel.is-calendar-add-item
    .mobile-dayeditor-popout-header
    > button:last-child {
    display: none !important;
  }

  .mobile-calendar-add-item-editor-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 20px 16px 16px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }

  /* Timeline Day Notes, TaskRow Notes, bdRow Notes, and ordinary Calendar
     Day Notes use the same content-hugging mobile popout mechanics. */
  .mobile-dayeditor-popout-panel:not(.is-calendar-add-item) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: min(520px, calc(var(--tw-vvh, 100dvh) - 24px)) !important;
  }

  /* de-menus are absolutely positioned. While one is open, temporarily
     give the shared Notes shell the full available footprint; the editor
     body then scrolls only if the menu/content still exceeds that space. */
  .mobile-dayeditor-popout-panel:not(.is-calendar-add-item):has(.de-menu-outer-shell) {
    height: min(520px, calc(var(--tw-vvh, 100dvh) - 24px)) !important;
  }

  .mobile-calendar-add-item-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 12px 16px 16px;
    box-sizing: border-box;
    border-top: 1px solid rgba(15,23,42,.08);
    background: #fff;
  }

  .mobile-calendar-add-item-confirm {
    flex: 1 1 auto;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #7f4ed1;
    color: #fff;
    font: inherit;
    font-weight: 800;
  }

  .mobile-calendar-add-item-cancel {
    flex: 0 0 92px;
    width: 92px;
    height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-weight: 700;
  }
}
/* Consistent cell action button geometry; grid responds to its actual cell width. */
.calendar-day-direct-actions { position:absolute; z-index:5; bottom:4px; left:4px; right:4px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.calendar-day-direct-actions > button { min-width:0; height:23px; border:1px solid #cbd5e1;
  background:#fff; border-radius:5px; color:#475569; cursor:pointer; font-size:14px;
  display:flex; justify-content:center; align-items:center; padding:0 3px; }
.calendar-day-direct-actions .calendar-cell-add:only-child,
.calendar-day-direct-actions:has(.calendar-cell-add):has(.calendar-cell-notes):has(.calendar-cell-scroll) .calendar-cell-add { grid-column:1 / -1; }
.calendar-day-direct-actions .calendar-cell-scroll { grid-column:2; }
@container (min-width:170px) {
 .calendar-day-direct-actions:has(.calendar-cell-add):has(.calendar-cell-notes):has(.calendar-cell-scroll) {
   grid-template-columns:repeat(3,minmax(0,1fr));
 }
 .calendar-day-direct-actions:has(.calendar-cell-add):has(.calendar-cell-notes):has(.calendar-cell-scroll) .calendar-cell-add { grid-column:1; }
 .calendar-day-direct-actions:has(.calendar-cell-add):has(.calendar-cell-notes):has(.calendar-cell-scroll) .calendar-cell-scroll { grid-column:3; }
}
.calendar-ordinary-date-actions { display:grid; position:relative; gap:9px; min-width:185px; font-size:12px; }
.calendar-ordinary-date-title { font-size:15px; text-align:center; margin-bottom:3px; }
.calendar-date-count-summary { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; color:#64748b; }
.calendar-date-action { display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:9px 12px;
  color:#fff; background:linear-gradient(95deg,#6f3ff2,#3374ff); border:0; border-radius:8px; cursor:pointer;
  font-size:13px; font-weight:650; }
.calendar-date-action-icon { display:grid; place-items:center; width:22px; height:22px; background:#ffffff24;
  border:1px solid #ffffff60; border-radius:5px; font-size:16px; }
.calendar-date-action.calendar-date-close { justify-content:center; background:#e8edf5; color:#243047; }
.calendar-blackout-selection-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.calendar-blackout-selection-header strong { font-size:13px; }
.calendar-blackout-help { color:white; background:#ffffff20; border:1px solid #ffffff44; padding:5px 9px;
  border-radius:99px; font-size:11px; cursor:pointer; white-space:nowrap; }
.calendar-blackout-help span { display:inline-grid; place-items:center; width:16px; height:16px;
  border:1px solid #ffffff77; border-radius:50%; margin-right:4px; }
/* Desktop-only EPT local layout, section ordering and header/footer masks. */
.burger-orderable-setting { display:flex; gap:6px; align-items:center; }
.burger-orderable-setting .burger-timeline-mode-options { flex:0 0 88px; }
.burger-orderable-label { flex:1 1 auto; min-width:0; }
.burger-section-order-button { border:1px solid #ffffff2a; border-radius:7px; background:#ffffff13;
  color:white; cursor:pointer; flex:0 0 24px; height:25px; padding:0; font-size:13px; }
.burger-section-order-button:disabled { opacity:.2; cursor:default; }
.burger-layout-setting { display:flex; gap:10px; align-items:center; }
.burger-layout-setting .burger-timeline-mode-options { flex:0 0 145px; }
.burger-layout-setting .burger-timeline-mode-options .burger-timeline-mode-option { font-size:9px; }
@media (max-width:820px) {
  .temporal-dock {
    bottom:clamp(7px,calc(100% - 44px),45px) !important;
    left:8px; right:8px;
  }
  .temporal-dock .timeline-view-switcher {
    /* The same opaque backing keeps DayCard lines out of the faded tab. */
    background: #f1eafb !important;
    background-image: none !important;
    position: absolute;
    left: 0;
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
    height: 35px;
    width: 180px;
  }
  .temporal-dock .temporal-view-segment button {
    height: 45px; /* +8px over the prior 37px mobile height */
  }
  .temporal-dock-left {
    left: 0px!important;
    bottom: 30px!important;
  }

  .temporal-dock .temporal-view-segment { min-width:69px; }
  .temporal-dock .temporal-view-segment button { font-size:11px; padding-left:3px; padding-right:3px; }
  .temporal-feature-pill .temporal-feature-main { font-size:10px !important; }
  .burger-device-layout-settings { display:none !important; }
}
@media (min-width:821px) {
  .burger-drawer { position:relative; isolation:isolate; }
  .burger-drawer::before,.burger-drawer::after { content:""; position:absolute; left:0; right:0;
    z-index:15; pointer-events:none; }
  .burger-drawer::before { top:0; height:80px; background:linear-gradient(180deg,#111627 65%,rgba(17,22,39,0)); }
  .burger-drawer::after { bottom:0; height:80px; background:linear-gradient(0deg,#0a0e1b,rgba(10,14,27,0)); }
  .split-panes.horizontal .split-resizer { background:transparent !important; width:6px !important; }
  .split-panes.horizontal.reverse .split-resizer { margin-left:0 !important; }
  .bdmp-desktop-launcher.is-reverse {
    left:20px !important;
    right:auto !important;
  }
  .edward-productivity-tool .split-panes.horizontal .split-resizer .handle {
    position:absolute !important; top:10px !important; bottom:10px !important;
    height:auto !important; max-height:none !important;
    width:3px !important; min-width:3px !important; max-width:3px !important;
    left:50% !important; transform:translateX(-50%);
    background:linear-gradient(to bottom,#785abf,#785abf,#1d4ed8) !important;
    border-radius:5px; opacity:0; transition:opacity 150ms ease; }
  .edward-productivity-tool .split-panes.horizontal .split-resizer:hover .handle,
  .edward-productivity-tool .split-panes.horizontal .split-resizer:focus-within .handle { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .temporal-choice-indicator,.split-panes.horizontal .split-resizer .handle { transition:none !important; }
}


.bdmp-preference-heading {
  margin: 50px 0 6px!important;
}

.split-panes.horizontal.reverse.has-active-split  
.handle.splitter-drag-handle {
left: 14px;
display: none;
}
.split-panes.horizontal.has-active-split  
.handle.splitter-drag-handle {
left: 4px;
display: none;
}

.split-panes.horizontal.reverse.has-active-split 
.calendarview-surface {
  margin-right: 0px!important;
  margin-left: 15px;
  background: transparent!important;
}
.split-panes.horizontal.reverse.has-active-split 
.calview-months-scroll-parent {
  background: transparent!important;
}

.split-panes.horizontal.reverse.has-active-split 
.calendar-daycard-popup-shaded-background {
  position: absolute!important;
}

.split-panes.horizontal.reverse.has-active-split 
.temporal-dock {
  left: 25px;
}

/* EXTRA-WIDE COLLAPSED HEADER STRIP
   The two headers retain the saved draggable split. Only the expanded body
   visually extends across both columns; the section DOM and DnD targets stay put. */
.timeline-day-sections.is-wide.has-two-open-sections.is-notes-first:is(.is-notes-collapsed, .is-schedule-collapsed) {
  grid-template-columns: minmax(0, var(--tw-day-notes-track, 0.4fr)) 8px minmax(0, var(--tw-day-schedule-track, 0.6fr)) !important;
  grid-template-areas: "dayNotesSection daySectionSplitter dayScheduleSection" !important;
}

.timeline-day-sections.is-wide.has-two-open-sections.is-schedule-first:is(.is-notes-collapsed, .is-schedule-collapsed) {
  grid-template-columns: minmax(0, var(--tw-day-schedule-track, 0.6fr)) 8px minmax(0, var(--tw-day-notes-track, 0.4fr)) !important;
  grid-template-areas: "dayScheduleSection daySectionSplitter dayNotesSection" !important;
}

/* Do not let the empty column cover the other section's full-width content. */
.timeline-day-sections.is-wide.has-two-open-sections:is(.is-notes-collapsed, .is-schedule-collapsed) > .is-collapsed {
  align-self: start;
}

/* The draggable divider belongs only to the common header strip when either
   section is collapsed, rather than extending through the full-width body. */
.timeline-day-sections.is-wide.has-two-open-sections:is(.is-notes-collapsed, .is-schedule-collapsed) > .timeline-day-section-splitter {
  align-self: start;
  height: 38px;
  box-sizing: border-box;
  background: transparent;
}

/* Notes content can extend across the entire DayCard when Schedule is collapsed. */
.timeline-day-sections.is-wide.has-two-open-sections.is-schedule-collapsed:not(.is-notes-collapsed)
  > .timeline-day-notes-parent > .timeline-daycard-top-dayeditor-wrap {
  width: var(--tw-day-sections-width, 100%) !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Notes on the right: shift only the body, never its header. */
.timeline-day-sections.is-wide.has-two-open-sections.is-schedule-first.is-schedule-collapsed:not(.is-notes-collapsed)
  > .timeline-day-notes-parent > .timeline-daycard-top-dayeditor-wrap {
  margin-left: calc(0px - var(--tw-day-schedule-width, 0px) - 8px);
}

/* Schedule content can extend across the entire DayCard when Notes is collapsed. */
.timeline-day-sections.is-wide.has-two-open-sections.is-notes-collapsed:not(.is-schedule-collapsed)
  > .timeline-day-schedule-parent > .stack-4 {
  width: var(--tw-day-sections-width, 100%) !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Schedule on the right: shift only its task/availability content. */
.timeline-day-sections.is-wide.has-two-open-sections.is-notes-first.is-notes-collapsed:not(.is-schedule-collapsed)
  > .timeline-day-schedule-parent > .stack-4 {
  margin-left: calc(0px - var(--tw-day-notes-width, 0px) - 8px);
}

/* A 0.04-alpha (4%) black veil fades from the divider toward the OUTSIDE of
   the collapsed header. A separate 1px gradient in the same pseudo-element
   provides the requested matching bottom divider. No effects if both close. */
.timeline-day-sections.is-wide.has-two-open-sections.is-notes-first.is-notes-collapsed:not(.is-schedule-collapsed)
  > .timeline-day-notes-parent > .day-notes-day-schedule-sticky-bar::after,
.timeline-day-sections.is-wide.has-two-open-sections.is-schedule-first.is-schedule-collapsed:not(.is-notes-collapsed)
  > .timeline-day-schedule-parent > .day-notes-day-schedule-sticky-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -8px;
  background:
    linear-gradient(to left, rgba(110, 118, 128, 0.35), transparent) bottom / 100% 1px no-repeat,
    linear-gradient(to left, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 2;
}

.timeline-day-sections.is-wide.has-two-open-sections.is-schedule-first.is-notes-collapsed:not(.is-schedule-collapsed)
  > .timeline-day-notes-parent > .day-notes-day-schedule-sticky-bar::after,
.timeline-day-sections.is-wide.has-two-open-sections.is-notes-first.is-schedule-collapsed:not(.is-notes-collapsed)
  > .timeline-day-schedule-parent > .day-notes-day-schedule-sticky-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  right: 0;
  background:
    linear-gradient(to right, rgba(110, 118, 128, 0.35), transparent) bottom / 100% 1px no-repeat,
    linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 2;
}/* src/styles/BacklogDrawer.css */



/* timeline>backlog dropzone */

.dropzone-overlay {
	position: absolute;
	z-index: 20; 
	height: 100%;
  	width: 100%;
  	display: flex;
  	flex-direction: column;
	color: white;
	text-align: center;
	align-items: center;
  	justify-content: center;
	font-size: 24px;
	opacity: .5;
	}
.dropzone-overlay.allowed { background: green; }

.dropzone-overlay.disallowed { background: red; }


/* container */
.backlog-drawer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* header */
.bd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0px 16px;
  border-bottom: 1px solid #ededed;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
}

.header-left { display:flex; align-items:center; gap:8px; }
.header-right { display:flex; align-items:center; gap:8px; }

/* autosched */
.autosched-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e6eefc;
  background: linear-gradient(180deg,#fff,#fbfdff);
  font-weight: 600;
}
.autosched-arrow { color: black; font-size: 14px; transform: rotate(0deg); }
@media (max-width: 720px) {
  .autosched-arrow {color: black; transform: rotate(-90deg); } /* mobile: arrow points up */
}
.autosched-label {font-size: 12px; color: #0f172a; }

/* header view toggle */
.view-toggle { display:flex; gap:6px; align-items:center; }
.vt-btn {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}
.vt-btn.active { background: #eef2ff; border-color: #cfe3ff; font-weight: 700; }

/* scroll area */
.bd-scroll {
  flex: 1 1 auto;
  min-height: 0;
  Margin: 0px;
  margin-top: -1px;
  overflow: auto;
  padding: 0px 0px 125px 0px !important;
  padding-bottom: 125px !important;
  transition: padding 170ms ease;
  will-change: padding;
}

.bd-scroll.is-header-gap-open {
  padding: 70px 0px 125px 0px !important;
}


.subcats-group-style {
  padding-right: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  transition: padding-bottom 170ms ease;
  will-change: padding-bottom;
}

.subcats-group-style.is-dropgap-open {
  padding-bottom: 50px;
}

/* group header */
.bd-group-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: block;
  margin-bottom: 0px;
  border-top: 1px solid #00000012;
  background: #fff;
}

.bd-group-row {
  padding-left: 8px;
  Padding-right: 8px;
  display:flex;
  align-items:center;
  gap: 0px;
  background: #fff;
}

.bd-group-header.is-personal { background: #fff; }
.bd-group-header.is-work { background: #fff; }
.bd-group-input,
.bd-group-taskee-prefix {
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 700;
  padding: 0px 0px;
  margin: 3px;
  background: transparent;
  border-radius: 0px;
  box-sizing: border-box;
  font-family: inherit;
  line-height: normal;
}

.bd-group-input {
  width: 100%;
  min-width: 0;
}

.bd-group-taskee-prefix {
  width: auto;
  min-width: 0;
  margin-right: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.bd-group-input:focus {
  border: 1px solid #fff;
  outline: none !important;
  box-shadow: none !important;
}


.close-todo {margin: 0px;}

/* left small button that toggles group cat */
/* base */
.bd-group-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #e6eefc;
  margin-top: 5px;     /* fixed casing */
  margin-bottom: 5px;     /* fixed casing */
  margin-right: 5px;     /* fixed casing */
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  padding: 0 0px;
  white-space: nowrap;
  overflow: hidden;
  transition: background .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* label inside button */
.bd-group-toggle .bd-toggle-letter {
  display: inline-block;
  line-height: 1;
  transition: color .12s ease, transform .12s ease;
}

/* default colors (keep as-is) */
.bd-group-toggle--personal { color: #7F4ED1; }
.bd-group-toggle--work     { color: #2c539e; }

/* hover text (visual) — uses data-hover */
.bd-group-toggle::after {
  white-space: pre-line;   /* preserve newline characters from the data attribute */
  line-height: 1.25;
  text-align: center;
  content: attr(data-hover);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
  border-radius: inherit;
}

/* reveal pseudo label and hide original label on hover/focus for non-locked */
.bd-group-toggle:not(.is-locked):hover .bd-toggle-letter,
.bd-group-toggle:not(.is-locked):focus-visible .bd-toggle-letter {
  color: transparent;
}

.bd-group-toggle:not(.is-locked):hover::after,
.bd-group-toggle:not(.is-locked):focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  font-size: 8.5px;
  Font-weight: 700;
  line-height: 1;
}

/* variant backgrounds on hover */
.bd-group-toggle--personal:not(.is-locked):hover  { background: #2c539e; border-color: #2c539e; }
.bd-group-toggle--work:not(.is-locked):hover      { background: #7F4ED1; border-color: #7F4ED1; }

/* keyboard focus ring (accessible) */
.bd-group-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.14);
}

/* LOCKED state: no hover visuals, default cursor */
.bd-group-toggle.is-locked {
  cursor: default;
}
.bd-group-toggle.is-locked::after {
  display: none;
}
.bd-group-toggle.is-locked:hover .bd-toggle-letter,
.bd-group-toggle.is-locked:focus-visible .bd-toggle-letter {
  color: inherit; /* keep visible label */
}
.bd-group-toggle.is-locked:hover,
.bd-group-toggle.is-locked:focus-visible {
  background: #fff;
  border-color: #e6eefc;
  box-shadow: none;
}

.bd-group-toggle.is-locked {
	background: #f2f2f2;
	Border-color: #f2f2f2;
	pointer-events: none;
	}

.bd-group-toggle:disabled { opacity: 0.6; cursor: default; }

/* small group actions container (autosched btn) */
.bd-group-actions { margin-left: 8px; }

/* items list */
.bd-items {
  padding-left: 8px;
  padding-right: 0px;
  padding-bottom: 20px;
}

/* item card */
.bd-item {
  border-radius: 8px;
  background: transparent;
  padding: 0px;
  margin: 2px 0;
  display:block;
}

.bd-row {
  display:flex;
  Align-items:flex-start;
  gap: 2px;
  min-width: 0;
}

/* W/P circle (left of task) */
.wp-circle {
  cursor: grab;
  display:inline-grid;
  place-items:center;
  width:18px; height:18px;
  Margin-top: -1px;
  border-radius:50%;
  font-weight:500;
  font-size:12px;
  Margin-right: 18px;
  padding: 0.5px;
  text-align: center;
  flex: 0 0 auto;
}
.wp-personal {
  color:#7F4ED1;
  border: 1px solid rgba(127,78,209,0.14);
  background: rgba(127,78,209,0.04);
}
.wp-work {
  color:#2c539e;
  border: 1px solid rgba(44,83,158,0.10);
  background: rgba(44,83,158,0.03);
}

.bd-task-input-holder {
  width: 100%;
  display: block;
  position: relative; 
}


/* hidden mirror used to measure the first line width */
.bd-measure {
  position: absolute;
  left: 0; top: -9999px;   /* off-screen */
  visibility: hidden;
  white-space: pre;         /* preserve spaces; no wrapping */
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  padding: 0;
  border: 0;
}


/* duration input on right */
.bd-dur-input {
  width: 45px;
  font-size: 14px;
  max-width: 65px;
  text-align: right;
  padding: 0px 1px;
  border-radius: 3px;
  border: 0px solid white;
  flex: 0 0 auto;
  background: transparent!important;
  opacity: .2;
}

.bd-dur-input:focus {
  opacity: 1;
}

.bd-dur-input:hover {
    opacity: .4;
}

.bd-task-input:focus {
  border: 0px solid #fff;
  outline: none !important;
  box-shadow: none !important;
}

.bd-dur-input:focus {
  border: 0px solid #fff;
  outline: none !important;
  box-shadow: none !important;
}

/* small meta under flattened rows */
.bd-meta-small { position: relative; font-size: 9px; color: #6b7280; margin-top: -3px; padding: 0px 0 0 91px; }

/* flattened list item style (non-draggable view) */
.bd-flat .bd-item.flat 
    { padding: 8px 8px 6px; 
      border: 1px solid #f1f5f9; 
      border-radius: 8px; 
      margin-bottom:8px; 
      border-bottom: 1px solid #e6e6e6 !important;
    }


/* ghost overlays */

.bd-ghost {
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed #c7d2fe;
  background: #fff;
}

.bd-ghost--item { 
	min-width: 160px; 
	background: #fff; 
	opacity: 0; 
	}

.bd-ghost--group { 
	min-width: 220px; 
	font-weight: 700; 
  height: 100px!important;
	background: #eef2ff; 
	}

.bd-group.ghost .bd-group-header { 
	background: white; 
	display: flex;
	align-items: center;
  position: relative;
  top: -40px!important;
	}

.bd-group.ghost .input.input-ghost.bd-group-input {
	padding-left: 30px;
	}

/* tiny utility */
.input[readonly] { opacity: 0.9; }

/* per-item autoschedule button (left of WP circle) */
.autosched-item-btn {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  max-width: 19px;
  width: 20px;
  height: 18px;
  border-radius: 3px;
  border: 0px solid #e6eefc;
  background: blue;
  padding: 0;
  Padding-top: 0px;
  Padding-bottom: 8px;
  margin-right: 2px;
  margin-bottom: 0px;
  margin-top: 0px;
  cursor: pointer;
  font-weight: 700;
  color: white;
  font-size: 24px;
}

.autosched-item-btn:hover { box-shadow: 0 2px 6px rgba(19,38,73,0.06); }

.autosched-icon { 
	font-size: 22px; 
	transform: rotate(40deg); 
 	 Padding-bottom: 4px;
 	 Padding-right: 4px;
 	 margin-top: -4px;
	}

/*
 * Queue handle proximity:
 *
 * ITEM HANDLES
 *   active = 1.00
 *   +/-1   = 0.45
 *   +/-2   = 0.20
 *   +/-3+  = 0
 *   no active handle = 0
 *
 * GROUP HANDLES
 *   active = 1.00
 *   +/-1   = 0.45
 *   +/-2+  = 0.20
 *   no active handle = 0.20
 */


/* Default/resting state. */
.bd-item-handle-wrap > .bd-native-drag-handle{
  opacity:0;
  transition:opacity 120ms ease;
}

.bd-group-drag-handle-wrap > .bd-group-drag-handle{
  opacity:.15;
  transition:opacity 120ms ease;
}


/* Two positions away. */
.bd-item-handle-wrap.is-queue-handle-second-neighbor > .bd-native-drag-handle{
  opacity:.15;
}

/*
 * Groups already bottom out at .20, so the class does not need to
 * change their appearance. Keeping this explicit documents the scale.
 */
.bd-group-drag-handle-wrap.is-queue-handle-second-neighbor > .bd-group-drag-handle{
  opacity:.15;
}


/* One position away. */
.bd-item-handle-wrap.is-queue-handle-neighbor > .bd-native-drag-handle,
.bd-group-drag-handle-wrap.is-queue-handle-neighbor > .bd-group-drag-handle{
  opacity:.30;
}


/* Active/focused handle. */
.bd-item-handle-wrap.is-queue-handle-active > .bd-native-drag-handle,
.bd-group-drag-handle-wrap.is-queue-handle-active > .bd-group-drag-handle,
.bd-row:focus-within > .bd-item-handle-wrap > .bd-native-drag-handle,
.bd-group-row:focus-within > .bd-group-drag-handle-wrap > .bd-group-drag-handle{
  opacity:1;
}

.bd-native-drag-handle {
	background: transparent;
	display: inline-block;
	border: 0px solid #e6eefc;
	color: #000;
 	border-radius: 3px;
	font-size: 16px; 
	width: 17px; 
	min-width: 17px; 
	height: 18px; 
	margin-right: 0px;
	margin-left: 2px;
	cursor: pointer!important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: element;
  touch-action: none;
	text-align: center;
 	margin-top: 0px;
	}

  .bd-group-drag-handle {
	background: transparent;
	display: inline-block;
	border: 0px solid #e6eefc;
	color: #000;
 	border-radius: 3px;
	font-size: 20px; 
	width: 17px; 
	min-width: 17px; 
	height: 24px; 
	margin-right: 0px;
	margin-left: 2px;
	cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: element;
  touch-action: none;
	text-align: center;
 	margin-top: 0px;
	}

.bd-multi-toolbar 
.bd-ms-btn { 
    font-size: 10px; 
    border-radius: 10px;
    background: #151515;
    padding: 8px 6px!important; 
    margin-left: 3px;
    height: 30px;
    right: 42px!important;
  }

.btn.btn-ghost.btn-small.bd-item-action-with-shortcut.bdrow-action-move-button {
  padding: 4px 9px !important;
}

.bd-multi-toolbar {
  gap: 0px;
}

.bd-ms-btn.ms-autosched { 
    border-radius: 10px 0px 0px 10px;
    height: 30px;
  }

.bd-ms-btn.ms-calendar {
    border-radius: 0px 10px 10px 0px;
    height: 30px;
    width: 10px!important;
    min-width: 30px!important;
    max-width: 10px!important;
    padding: 0px 0px 0px 0px!important;
    margin-left: 1px!important;
}

@media (max-width: 720px) {
  .bd-ms-btn.ms-calendar {
    margin-left: 1px!important;
    }
  .bd-ms-btn.ms-autosched { 
    margin-right: 0px!important; 
    }
  }

@media (min-width: 820px) {

  .bd-row-notes-btn {
    width: 19px!important;
    height: 18.5px!important;
    margin-top: 4px!important;
    padding-top: 2.5px!important;
  }
}



@media (max-width: 820px) {

   .bd-header.h2 {
      min-height: 56px!important;
    }

    .bd-ms-btn { 
       margin: 0px 0px; 
    }

    .ms-num-selected {
      flex-direction: column!important;
      min-width: 0px!important;
      padding-left: 0px;
      padding-right: 0px;
      margin-right: 0px!important;
    }
    
    .ms-amount-text {
      display: block; 
    }

    .ms-selected-text {
      padding: 0px!important; 
      margin: 0px!important; 
      font-size: 9px!important;
      font-weight: 400;
    }

    .the-queue-title{
      margin-top: -3px!important;
    }

    .bd-multi-toolbar {
      top: 18px!important;
      right: 46px!important;
      gap: 0px!important;
    }
}

/* compact select style (small dropdown) */
.vt-select {
  border: 1px solid #e6eefc;
  background: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.bd-collapse { 
	color: #c1c1c1;
	background: transparent;
	font-size: 10px; 
	height: 20px;
	margin: 0px;
	padding: 0px 0px;
	margin-right: 0px;
	width: 70px;
	min-width: 70px;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 4px;
	}
.bd-collapse:hover {color: #111; background: transparent;}
.bd-collapse .show-tasks-sm {font-size: 9px; letter-spacing: 0.05em;}


/* Backlog textarea — single, consolidated rule */
.input.input-ghost.bd-task-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  
  /* Let JS control the height */
  height: auto;              /* ← drop the !important */
  min-height: 24px;

  overflow: hidden;
  resize: none;

  line-height: 1.05;
  font-size: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;

  padding: 7px 5px 6px 5px;
  background: transparent;
  border: 0px solid white;
  border-radius: 3px;
  margin-top: -2px;
  margin-bottom: 0px;
}

.backlog-drawer .bd-task-input-wrap--hanging {
  position: relative;
  display: block !important;
  flex: 1 1 auto;
  min-width: 0;
}

.backlog-drawer .bd-row > .bd-task-input-wrap--hanging {
  order: 1;
}

.backlog-drawer .bd-task-prefix-rail {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}

.backlog-drawer .bd-task-prefix-rail .bd-row-notes-btn {
  pointer-events: auto;
}

.backlog-drawer .bd-task-editor-slot {
  position: relative;
  width: 100%;
  min-width: 0;
}

.backlog-drawer .bd-task-input-wrap--hanging .bd-task-input {
  text-indent: var(--bd-task-prefix-indent, 0px);
}

.input.input-ghost.bd-task-input.bd-task-display {
  margin-top: -2px;
  margin-bottom: 0.25px;
}

.input.input-ghost.bd-task-input.is-multi-selected {
Background: #EED5F0;
}

.bd-row { display: flex; align-items: flex-start; }

.bd-item {
  Margin-bottom: 0px;
}

.bd-group-header.is-personal
.bd-group-input[data-general="true"] {
  color: #7F4ED1; /* mid-gray for the two General groups */
}

.bd-group-header.is-personal
.bd-group-input {
  color: #7F4ED1; /* mid-gray for the two General groups */
}

.bd-group-header.is-work
.bd-group-input {
  color: #2c539e; /* mid-gray for the two General groups */
}

.bd-group-header.is-work
.bd-group-input[data-general="true"] {
  color: #2c539e; /* mid-gray for the two General groups */
}

/*
  Taskee-prefix colors are intentionally separate from the editable
  bd-group label colors, so they can be adjusted independently.
*/
.bd-group-taskee-prefix.is-personal {
  color: #6b3fc0;
}

.bd-group-taskee-prefix.is-work {
  color: #234682;
}

.bd-no-tasks {
  color: #9ca3af;        /* light gray */
  font-style: italic;
  font-size: 10px;
  width: 70px;
  text-align: right;
  user-select: none;
}

.bd-item.ghost .bd-task-ghosttext {
  white-space: pre-wrap;
  Padding-right: 0px;
  Padding-left: 0px;
  overflow: visible;     /* ensure no clipping */
  Border-width: 0px;
  Width: calc( 100% + 10px );
  Margin-left: -5px;
}

/* Ensure subcats can receive hover during drag */
.subcats-group-style {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

/* Only the middle 40% of the bdRow arms notes expansion (1.6s total).
   The visual loader waits 500ms and then fills over the remaining 1100ms. */
.bd-item.planner-dnd-notes-hover > .bd-row {
  position: relative;
  isolation: isolate;
}
.bd-item.planner-dnd-notes-hover > .bd-row::before,
.bd-item.planner-dnd-notes-hover > .bd-row::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 5px;
  pointer-events: none;
  box-sizing: border-box;
}
.bd-item.planner-dnd-notes-hover > .bd-row::before {
  z-index: 3;
  background: linear-gradient(90deg, rgba(37,99,235,.08), rgba(37,99,235,.17));
  transform: scaleX(0);
  transform-origin: left center;
  animation: planner-notes-dwell-fill 1100ms linear 500ms both;
}
.bd-item.planner-dnd-notes-hover > .bd-row::after {
  z-index: 4;
  border: 1px solid rgba(37,99,235,.4);
  animation: planner-notes-dwell-outline 1ms steps(1, end) 400ms both;
}

.bd-group-outside-warning-ghost {
  position: fixed;
  z-index: 1000001;
  width: min(280px, calc(100vw - 16px));
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.17);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  pointer-events: none;
}

/* Queue positional insertion lines: one visible line per exact boundary. */
.bd-queue-insertion-line {
  position: relative;
  z-index: 30;
  height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.bd-queue-insertion-line-hit {
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: none;
}

.bd-queue-insertion-line-hit::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72);
  transition: opacity 90ms ease, height 90ms ease, top 90ms ease, box-shadow 90ms ease;
}

.bd-queue-insertion-line.is-family-visible.is-active {
  opacity: 1;
}

.bd-queue-insertion-line.is-family-visible
.bd-queue-insertion-line-hit {
  pointer-events: auto;
}

.bd-queue-insertion-line.is-active
.bd-queue-insertion-line-hit::before {
  top: 7px;
  height: 3px;
  background: rgba(37, 99, 235, 1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 2px rgba(59, 130, 246, 0.18);
}

.bd-queue-insertion-line--row {
  z-index: 35;
}

.bd-queue-insertion-line--row
.bd-queue-insertion-line-hit {
  left: 0;
  right: 0;
  top: -5px;
  height: 10px;
}
.bd-queue-insertion-line--row
.bd-queue-insertion-line-hit::before {
  top: 4px;
}

.bd-queue-insertion-line--group {
  z-index: 55;
}

.bd-queue-insertion-line--group
.bd-queue-insertion-line-hit {
  left: 8px;
  right: 8px;
  top: -10px;
  height: 20px;
}

.bd-queue-insertion-line--group
.bd-queue-insertion-line-hit::before {
  top: 9px;
}

.bd-queue-insertion-line--group.is-active
.bd-queue-insertion-line-hit::before {
  top: 8px;
}



/* A carried native bdRow remains legible in its original location. */
.bd-item:has(.dragging-native),
.bd-item.is-queue-drag-origin {
  opacity: 0.5 !important;
}
.backlog-drawer .planner-dnd-semantic-zone {
  pointer-events: none;
}

 .bd-group-actionbar{
          position:absolute;
          left:0;
          top:50%;
          transform:translateY(-50%);
          display:flex;
          gap:6px;
          padding:4px 6px;
          background:#fff;
          color:#000;
          border:1px solid rgba(0,0,0,.15);
          border-radius:10px;
          box-shadow:0 6px 18px rgba(0,0,0,.18);
          z-index: 9999;
          align-items:center;
          white-space:nowrap;
        }

        .bd-check-circle {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 2px solid #d1d5db;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
          cursor: pointer;
          flex-shrink: 0;
          transition: all 0.1s ease;
        }

        .bd-check-circle span,
        .bd-check-circle svg {
          width: 12px;
          height: 12px;
          opacity: 0;
          transform: scale(0.8);
          transition: all 0.1s ease;
          color: white;
        }

        .bd-check-circle.selected {
          background-color: #2563eb;
          border-color: #2563eb;
        }

        .bd-check-circle.selected span,
        .bd-check-circle.selected svg {
          opacity: 1;
          transform: scale(1);
        }

        .bd-check-circle:hover {
          border-color: #9ca3af;
        }

        /* --- Row highlight (applies to entire bd-row) --- */
        .bd-group.is-personal  
        .bd-row.is-multi-selected {
          background: linear-gradient(
            90deg,
            rgba(232, 219, 254, 0) 2%,
            rgba(232, 219, 254, 0.6) 20%,
            rgba(232, 219, 254, .6) 80%,
            rgba(232, 219, 254, 0) 98%
          );
          border-radius: 0px;
        }   

        /* --- Row highlight (applies to entire bd-row) --- */
        .bd-group.is-work  
        .bd-row.is-multi-selected {
          background: linear-gradient(
            90deg,
            rgba(219, 234, 254, 0) 2%,
            rgba(219, 234, 254, .65) 20%,
            rgba(219, 234, 254, .65) 80%,
            rgba(219, 234, 254, 0) 98%
          );
          border-radius: 0px;
        }   
      .backlog-drawer.is-processing-drop {
        pointer-events: none;
      }
      .bd-task-input.is-multi-selected {
        background-color: #dbeafe; /* A light blue for highlight */
      }


      /* Ensure the sortable group wrapper can anchor absolute indicators */
.subcats-group-style {
  position: relative;
}

/* Group drag overlay: title-only */
.bd-group-drag-overlay {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.20);
  max-width: calc(100% - 74px);
}

.bd-header.h2 .row.header-right{
  height: 45px;
}

.bd-group-drag-overlay-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-group button.btn.btn-small {
 background: white;
 font-size: 12px;
 color: black;
 padding: 3px 5px!important;
 opacity: 0.6;
}

.bd-group button.btn.btn-small:hover {
 opacity: 1.0;
}


.bd-item-actionbar {
  left: auto !important;
  right: 0 !important;
  top: 13px !important;
  padding: 4px 4px 4px 4px !important;
  margin-right: 7px;

  /*
    The handle is now on the right. Anchor the menu's right edge to it,
    grow the menu toward the left, and visually reverse all actions.
  */
  flex-direction: row-reverse !important;
  max-width: calc(100vw - 16px);
  overflow-x: hidden;
  overflow-y: hidden;
}

.bd-group-actionbar {
  top: 12px;
  height: 22px;
  gap: 0px;
  left: -6px;
  z-index: 2;
}

.bd-item-actionbar
.btn.btn-ghost.btn-small {
  position: relative;
  left: 0 !important;
}

/*
  The Autoschedule pair also needs its joined corners reversed now that
  the entire action bar is displayed in reverse order.
*/
.bd-item-actionbar
.btn.btn-ghost.btn-small.autosched-btn {
  border-radius: 0 50px 50px 0 !important;
}

.bd-item-actionbar
.btn.btn-ghost.btn-small.autosched-calendar-btn.w-autosched-btn {
  border-radius: 50px 0 0 50px !important;
  margin-left: 0 !important;
  margin-right: 1px !important;
}

.bd-group-actionbar 
.btn.btn-ghost.btn-small {
position: relative;
left: -1px;
font-size: 11px;
background: rgb(209, 209, 209)!important;
padding: 5px 9px!important;
height: auto!important;
max-height: none!important;
min-height: 0px!important;
margin: 0px!important;
}

.bd-group-actionbar 
.btn.btn-ghost.btn-small:hover {
position: relative;
left: -1px;
font-size: 11px;
background: rgb(209, 209, 209)!important;
padding: 5px 9px!important;
height: auto!important;
max-height: none!important;
min-height: 0px!important;
margin: 0px!important;
}

.bd-group-actionbar 
.btn.btn-ghost.btn-small.btn-small-close {
  padding: 3px 7px 4px 7px!important;
  border-radius: 100px!important;
  font-size: 15px;
  width: 26px;
}

/* =========================
   Import from image modal
   ========================= */

.bd-import-backdrop {
  z-index: 20000 !important;
  padding: 16px;
}

.bd-import-modal {
  width: min(680px, calc(100vw - 24px));
  max-height: min(88vh, 760px);
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(26, 37, 56, 0.1);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(24, 36, 62, 0.2);
  padding: 16px;
}

.bd-import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bd-import-title-wrap {
  min-width: 0;
}

.bd-import-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.bd-import-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.bd-import-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #5a6272;
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  padding: 0;
}

.bd-import-close:hover {
  background: rgba(49, 64, 92, 0.06);
}

.bd-import-target {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.bd-import-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 37, 56, 0.08);
  background: #f8fafc;
  font-size: 12px;
  color: #334155;
}

.bd-import-chip.is-work {
  color: #2c539e;
}

.bd-import-chip.is-personal {
  color: #7f4ed1;
}

.bd-import-uploader {
  border: 1px dashed rgba(26, 37, 56, 0.16);
  border-radius: 16px;
  background: #fbfdff;
  padding: 14px;
}

.bd-import-file-input {
  width: 100%;
  font-size: 13px;
}

.bd-import-preview-wrap {
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid rgba(26, 37, 56, 0.08);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-import-preview {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  display: block;
}

.bd-import-empty {
  padding: 24px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

.bd-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.bd-import-analyze-btn,
.bd-import-provider-btn {
  appearance: none;
  border-radius: 12px;
  border: 1px solid rgba(26, 37, 56, 0.08);
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: #243041;
  box-shadow: none;
}

.bd-import-analyze-btn:hover,
.bd-import-provider-btn:hover {
  background: rgba(49, 64, 92, 0.06);
}

.bd-import-provider-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bd-import-note {
  margin-top: 10px;
  font-size: 12px;
  color: #64748b;
}

.bd-import-toast {
  margin-top: 12px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  color: #1f2937;
  background: #eef6ff;
  border: 1px solid #d7e8ff;
}

/* =========================
   Spreadsheet group mode
   ========================= */

.bd-sheet {
  display: block;
  min-width: 0;
  padding-right: 0;
}

.bd-sheet-header-row {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 125px 52px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-bottom: 12px;
  padding: 18px 0 4px;
  background: #fff;
  border-bottom: 1px solid rgba(26, 37, 56, 0.08);
}

.bd-sheet-header-spacer {
  grid-column: 3;
  width: 52px;
}

.bd-sheet-header-label,
.bd-sheet-header-amount {
  font-size: 11px;
  font-weight: 700;
  color: #5b6475;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bd-sheet-header-label {
  grid-column: 1;
  min-width: 0;
  margin-left: 0;
  padding-left: 8px;
}

.bd-sheet-header-amount {
  grid-column: 2;
  text-align: right;
  padding-right: 8px;
}

.bd-sheet-row {
  margin: 0;
}

.bd-sheet-row-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 125px 52px;
  align-items: stretch !important;
  min-width: 0;
}

.bd-sheet-row-inner > .bd-sheet-label-wrap {
  grid-column: 1;
  order: initial !important;
  min-width: 0;
}

.bd-sheet-row-inner > .bd-sheet-amount-wrap {
  grid-column: 2;
  order: initial !important;
  align-self: start;
  width: 100%;
  min-width: 0;
}

.bd-sheet-row-inner > .bd-item-handle-wrap,
.bd-sheet-row-inner > .bd-multi-check {
  grid-column: 3;
  order: initial !important;
  align-self: stretch !important;
}

.bd-sheet-amount-input {
  box-sizing: border-box;
  width: 100%;
  text-align: right;
}

.bd-sheet-label-input {
  min-height: 28px;
  margin-top: 0;
}

.bd-sheet-amount-input {
  width: 100%;
  padding: 4px 6px;
  text-align: right;
  border-radius: 8px;
  font-size: 14px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.bd-sheet-amount-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.bd-sheet-empty {
  padding: 8px 0 10px 38px;
  font-size: 12px;
  color: #94a3b8;
}

.bd-sheet-total-row {
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 125px 52px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  margin-top: 16px;
  margin-left: 0;
  padding: 10px 0 10px 10px;
  border-top: 1px solid rgba(26, 37, 56, 0.5);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    #fff 45%
  );
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #243041;
}

.bd-sheet-total-row span:first-child {
  grid-column: 1;
}

.bd-sheet-total-row span:last-child {
  grid-column: 2;
  text-align: right;
  margin-right: 0;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}

.bd-import-primary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
}

.bd-import-primary-left,
.bd-import-primary-right {
  display: flex;
  flex-direction: column;
}

.bd-import-primary-left {
  align-items: flex-start;
}

.bd-import-primary-right {
  align-items: flex-end;
  text-align: right;
}

.bd-import-copy-note {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.15;
  color: #64748b;
}

.btn.btn-ghost.btn-small.autosched-btn {
  border-radius: 50px 0px 0px 50px!important;
  padding-left: 8px!important;
  padding-right: 6px!important;
}

.btn.btn-ghost.btn-small.autosched-btn:hover {
  border-radius: 0px 50px 50px 0px!important;
  padding-left: 8px!important;
  padding-right: 6px!important;
}

.btn.btn-ghost.btn-small.autosched-calendar-btn.w-autosched-btn {
  border-radius: 0px 50px 50px 0px!important;
  padding-left: 7px!important;
  padding-right: 9px!important;
}

.btn.btn-ghost.btn-small.autosched-calendar-btn {
  max-height: 23px !important;
  min-height: 23px !important;
  height: 23px !important;
  padding-bottom: 5px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer!important;
}

.btn.btn-ghost.btn-small.autosched-calendar-btn:hover {
  max-height: 23px !important;
  min-height: 23px !important;
  height: 23px !important;
  padding-bottom: 5px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer!important;
  opacity: 1.0!important;
}

.btn.btn-ghost.btn-small.delete-bd-row-trashcan {
  padding: 0px !important;
  height: 22px !important;
  max-height: 22px !important;
  min-height: 22px !important;
  min-width: 28px !important;
  width: 28px !important;
  max-width: 28px !important;
}

.btn.btn-ghost.btn-small.delete-bd-row-trashcan:hover {
  padding: 0px !important;
  height: 22px !important;
  max-height: 22px !important;
  min-height: 22px !important;
  min-width: 28px !important;
  width: 28px !important;
  max-width: 28px !important;
}

.bd-sheet-row-inner {
  align-items: stretch !important;
}

@media (max-width: 640px) {
  .bd-import-primary-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bd-import-primary-right {
    align-items: flex-start;
    text-align: left;
  }

  .btn.btn-ghost.btn-small.btn-small-close {
    display:none;
  }
}

.backlog-notes-container {
   margin-top: 60px!important;
   margin-bottom: 0px!important;
}

.backlog-notes-container .bd-backlog-notes-editor-wrap {
  height: 250px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.backlog-notes-container .bd-backlog-notes-editor-wrap > .day-editor {
  flex: 1 1 auto;
  height: 90%;
  min-height: 90% !important;
  max-height: 90% !important;
  overflow-y: auto !important;
  padding-top: 15px;
}

.bd-row.bd-row-notes-open.is-multi-selected {
  background: #dbeafe;
}

.bd-item.is-notes-open.is-multi-selected {
  background: #dbeafe;
}

.bd-item.is-notes-open.is-multi-selected 
.bd-inline-notes-shell {
  border-top: 1px solid #c0cade!important;
}

.bd-item.is-notes-open.is-multi-selected 
.de-checklist {
  border: 1px solid #c0cade9c!important;
}

.bd-item.is-notes-open.is-multi-selected 
.de-row--totals .de-colC {
  border-top: 1px solid #c0cade9c!important;
  border-bottom: 1px solid #c0cade9c!important;
}

.bd-item.is-notes-open.is-multi-selected 
.de-row--cols-stacked .de-colC {
  border-bottom: 1px solid #c0cade9c!important;
}

.bd-item.is-notes-open.is-multi-selected 
.de-row--cols-first .de-colC {
  border-top: 1px solid #c0cade9c!important;
  border-bottom: 1px solid #c0cade9c!important;
}

.bd-item.is-notes-open.is-multi-selected 
.de-divider-line {
  background: #c0cade9c!important;
}

.bd-item.is-notes-open.is-multi-selected 
.de-divider-toggle,
.bd-item.is-notes-open.is-multi-selected 
.de-divider-toggle:hover {
  background: transparent!important;
}

@media (max-width: 819px) {
.backlog-notes-container {
    margin-top: 0px!important;
    margin-bottom: 70px!important;
  }
}

/* Queue header cleanup + help popover */
.the-queue-title {
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
}

.bd-queue-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.bd-queue-title-text {
  position: relative;
  z-index: 2;
  font-size: 20px;
  margin-left: -4px;
  font-weight: 700;
  white-space: nowrap;
}

.bd-queue-help-btn,
.bd-queue-help-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  box-shadow: none;
}

.bd-queue-help-btn {
  width: 18px;
  min-width: 18px;
  height: 18px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.bd-queue-help-btn:hover,
.bd-queue-help-btn:focus-visible {
  background: #f1f5f9;
  color: #334155;
}

.bd-header.is-queue-help-open {
  z-index: 20;
}

.bd-queue-help-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(340px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 12px;
  background: #fff;
  color: #5b6577;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.bd-queue-help-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.bd-queue-help-popover-title {
  font-size: 16px;
  font-weight: 700;
  color: #364152;
}

.bd-queue-help-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border: 0;
  background: #f1f5f9;
  color: #64748b;
  font-size: 18px;
  line-height: 0;
  margin: 0px;
  padding: 0px 0px 2px 0px;
}

.bd-queue-help-close:hover,
.bd-queue-help-close:focus-visible {
  background: #e4e8ed;
  color: #111827;
}

.bd-queue-help-popover .bd-queue-hint-list {
  margin-top: 14px;
  font-weight: 450;
  font-size: 14px!important;
  padding: 5px 35px 15px 20px;
  border-top: 1px solid lightgray;
}

.bd-queue-help-popover .bd-queue-hint-list li {
  font-size: 13px;
}

/* Queue sort control */
.bd-sort-control {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 0;
}

.bd-sort-label {
  color: #64748b;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.bd-sort-control .vt-select {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Queue onboarding hint */
.bd-queue-hint-wrap {
  display: flex;
  justify-content: center;
  margin: 25px 50px 50px;
  padding: 18px 16px 0 16px;
  pointer-events: none;
}

.bd-queue-hint-card {
  width: min(520px, 100%);
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px dashed rgba(100, 116, 139, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.96));
  color: #5b6577;
}

.bd-queue-hint-title {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #364152;
}

.bd-queue-hint-list {
  margin: 0;
  padding-left: 18px;
}

.bd-queue-hint-list li {
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.35;
}

.bd-hint-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -1px;
  color: #6b7280;
}

.bd-hint-inline-icon svg {
  display: block;
}

.bd-hint-inline-icon--group {
  font-size: 13px;
  letter-spacing: -0.02em;
}

/* Queue drag ghost */
.bd-item-drag-overlay,
.bd-native-drag-image {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  box-shadow: none;
  padding: 10px 8px;
  overflow: hidden;
}

.bd-native-drag-image {
  position: fixed;
  top: -99999px;
  left: -99999px;
  width: min(420px, calc(100vw - 48px));
  pointer-events: none;
  z-index: -1;
}

.bd-item-drag-overlay-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.bd-item-drag-overlay-handle {
  flex: 0 0 auto;
  color: #a4a4a4;
  line-height: 1;
  padding-top: 2px;
}

.bd-item-drag-overlay-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.05;
  color: #1c2431;
}

.bd-item-drag-overlay-duration {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: 8px;
  color: rgba(28, 36, 49, 0.45);
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
}

/* Queue group taskee assignment */
.bd-group-taskee-star {
  appearance: none;
  border: none;
  background: transparent;
  width: 28px;
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  margin: 0 2px 0 0;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  opacity: 0.32;
  transition: opacity 120ms ease, transform 120ms ease, background 120ms ease;
}

.bd-group-taskee-star:hover {
  opacity: 1;
  background: rgba(15, 23, 42, 0.055);
  transform: scale(1.04);
}

.bd-group-taskee-star.is-work {
  color: #2c539e;
}

.bd-group-taskee-star.is-personal {
  color: #7F4ED1;
}

.bd-group-taskee-star.is-assigned {
  opacity: 1;
}

/* Group popup now opens from the right rail and sits 5px farther left. */
.backlog-drawer .bd-group-actionbar.bd-group-menu-panel {
  left: auto !important;
  right: 0px !important;
}

/* Taskee control on the left; close control on the right. */
.backlog-drawer .bd-group-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding-left: 8px !important;
  padding-right: 6px !important;
}

.backlog-drawer
.bd-group-menu-header
.bd-group-taskee-star {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  flex: 0 0 30px;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.backlog-drawer
.bd-group-menu-header
.bd-group-menu-taskee-label-btn {
  appearance: none;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 60%!important;
  height: 22px;
  margin: 0 0 0 -3px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 40px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: auto !important;
  cursor: pointer;
  font-size: 9px;
}

.backlog-drawer
.bd-group-menu-header
.bd-group-menu-taskee-label-btn:hover {
  background: rgba(15, 23, 42, 0.09);
}

.backlog-drawer .bd-group-menu-title {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
}

.backlog-drawer .bd-group-menu-close {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  margin: 0 !important;
  pointer-events: auto !important;
  margin-right: -2px !important;
}

/* Existing group menu: expanded convert controls */
.bd-group-menu-context-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 8px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  color: rgba(15, 23, 42, 0.42);
}

.bd-group-menu-context-toggle .is-active {
  color: rgba(15, 23, 42, 0.88);
}

.bd-group-menu-wp-switch {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #fff;
  height: 22px;
  min-width: 52px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.bd-group-menu-wp-switch.is-work {
  color: #2c539e;
}

.bd-group-menu-wp-switch.is-personal {
  color: #7F4ED1;
}

.bd-group-menu-wp-switch:disabled {
  opacity: 0.38;
  cursor: default;
}

.bd-group-menu-wp-knob {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
}

.bd-group-menu-divider {
  height: 1px;
  background: rgba(15, 23, 42, 0.09);
  margin: 0 8px 4px;
}

.bd-group-menu-radio-row {
  gap: 7px;
}

.bd-group-menu-radio-row.is-active {
  font-weight: 800;
}

.bd-group-menu-radio {
  width: 14px;
  min-width: 14px;
  text-align: center;
  color: rgba(15, 23, 42, 0.68);
}

/* Queue multiselect: right-side rail + selected-item drag surface. */
.backlog-drawer .bd-item.is-multi-selected,
.backlog-drawer .bd-row {
  position: relative;
}

.backlog-drawer .bd-row > .bd-multi-check {
  order: 3;
  position: relative;
  z-index: 7;
  align-self: stretch;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  margin: 0 0 0 4px !important;
  padding: 0;
}

.backlog-drawer .bd-item.is-multi-selected .bd-flat-action-anchor {
  z-index: 7;
}

.backlog-drawer .bd-flat-action-anchor > .bd-multi-check {
  position: relative;
  z-index: 7;
  align-self: stretch;
  width: 100%;
  min-width: 100%;
  height: 100%;
  margin: 0 !important;
}

.backlog-drawer .bd-ms-selected-row-drag-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: transparent;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.backlog-drawer .bd-ms-selected-row-drag-overlay.is-mobile {
  touch-action: none;
  -webkit-touch-callout: none;
}

.backlog-drawer .bd-ms-selected-row-drag-overlay:active {
  cursor: grabbing;
}

/* Multiselect: large right-side hit rail, small visual circle. */
.bd-multi-check {

  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 48px;
  min-width: 48px;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.bd-multi-check:hover {
  background: transparent;
}

.bd-multi-check-visual {
  box-sizing: border-box;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  background: #fff;
  color: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.bd-multi-check-visual.is-selected {
  border-color: transparent;
  color: #000;
}

.bd-multi-check-visual svg {
  display: block;
}

/* Checklist: large left-side hit rail, smaller visual checkbox. */
.bd-check-toggle {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.bd-check-toggle:hover {
  background: transparent;
}

.bd-check-toggle-visual {
  box-sizing: border-box;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
}

.bd-check-toggle:hover .bd-check-toggle-visual {
  background: #e8e6f1;
}

.bd-check-toggle.is-checked {
  background: transparent;
}

.bd-check-toggle.is-checked .bd-check-toggle-visual {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.28);
}

.bd-row.bd-row-completed .bd-task-input-wrap,
.bd-row.bd-row-completed [contenteditable="true"] {
  opacity: 0.4;
}

.bd-row.bd-row-completed .tw-priority-chip,
.tw-priority-chip.is-completed {
  filter: saturate(0);
}

.bd-item.is-native-drag-hidden {
  /* Keep WebKit's native source mounted without removing it from layout. */
  display: block !important;
  position: relative !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}
.bd-items:has(> .bd-item.is-native-drag-hidden) > .bd-placeholder {
  display: none !important;
}

.bd-placeholder {
  box-sizing: border-box !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 2px 0 !important;
}

.bd-item.is-added-flash,
.bd-row.is-added-flash,
.bd-task-input.is-added-flash {
  border-radius: 8px;
  animation-fill-mode: both;
  will-change: background-color;
}

.bd-item.is-added-flash-work,
.bd-row.is-added-flash-work,
.bd-task-input.is-added-flash-work {
  animation: bd-added-flash-work 2000ms ease-out 1;
}

.bd-item.is-added-flash-personal,
.bd-row.is-added-flash-personal,
.bd-task-input.is-added-flash-personal {
  animation: bd-added-flash-personal 2000ms ease-out 1;
}

html.tw-queue-native-dragging,
html.tw-queue-native-dragging body,
html.tw-queue-native-dragging body *,
html.tw-queue-native-dragging .backlog-drawer,
html.tw-queue-native-dragging .backlog-drawer *,
html.tw-queue-native-dragging .split-pane.backlog,
html.tw-queue-native-dragging .split-pane.backlog *,
body.tw-queue-native-dragging,
body.tw-queue-native-dragging * {
  cursor: pointer !important;
}

html.tw-queue-native-dragging .bd-native-drag-handle,
body.tw-queue-native-dragging .bd-native-drag-handle {
  cursor: pointer !important;
}

/* Floating Queue-wide collapse button */
.backlog-drawer {
  position: relative;
}

.bd-collapse-all-floating {
  position: absolute;
  left: 14px;
  bottom: 18px;
  z-index: 45;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid rgba(120, 90, 191, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #2c539e;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.bd-collapse-all-floating:hover {
  background: #fff;
  color: #1d4ed8;
}

@media (max-width: 819px) {
  .bd-collapse-all-floating {
    left: 14px;
    bottom: calc(env(safe-area-inset-bottom) + 92px);
  }
}

/*
  Keep an open grouped Queue-notes item above the ordinary rows that follow it.
  Flat Queue rendering already applies the same is-notes-open architecture.
*/
.backlog-drawer .bd-items > .bd-item.is-notes-open {
  position: relative;
  z-index: 5;
  overflow: visible;
}

/*
  DayEditor always receives a multi-select portal host, but it is empty during
  ordinary editing. Its mobile padding is intentionally retained as spacing;
  only the empty host's gradient and hit layer are disabled. As soon as a
  toolbar is portalled into it, :empty stops matching and normal toolbar
  styling and interaction return automatically.
*/
.backlog-drawer
.bd-inline-notes-shell
.bd-backlog-notes-ms-host:empty {
  background: transparent !important;
  pointer-events: none !important;
}

.bd-mask-redacted-row {
  margin-left: 5px;
  font-style: italic;
  color: #909090;
}


/* ===== C5 Queue semantic dropzones — match Timeline header drop language ===== */
.backlog-drawer .bd-header,
.backlog-drawer .bd-group-header {
  isolation: isolate;
}

.backlog-drawer .planner-dnd-semantic-zone {
  position: absolute;
  inset: 0;
  z-index: 60;
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 2px solid #10b981;
  background: rgba(16, 185, 129, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  color: #065f46;
  text-align: center;
}

.backlog-drawer .planner-dnd-semantic-zone-copy {
  display: grid;
  gap: 4px;
  justify-items: center;
  max-width: calc(100% - 24px);
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 8px 24px rgba(6, 95, 70, 0.14);
}

.backlog-drawer .planner-dnd-semantic-zone-copy strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.backlog-drawer .bd-item.planner-dnd-notes-hover > .bd-row {
  position: relative;
}

.backlog-drawer .bd-item.planner-dnd-notes-hover > .bd-row::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 60;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid rgba(37, 99, 235, 0.55);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.backlog-drawer .planner-dnd-semantic-zone--queue-header {
  place-items: end center;
  padding: 0 10px 7px;
}

.bd-queue-destination-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100080;
  background: rgba(0, 0, 0, 0.28);
}

.bd-queue-destination-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100081;
  width: min(390px, calc(100vw - 24px));
  max-height: min(80vh, 620px);
  overflow: auto;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  color: #222;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.bd-queue-destination-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bd-queue-destination-title {
  font-size: 15px;
  font-weight: 700;
}

.bd-queue-destination-empty {
  margin-top: 4px;
  color: #777;
  font-size: 12px;
}

.bd-queue-destination-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #777;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px 4px;
}

.bd-queue-destination-create-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.bd-queue-destination-create-row.is-single {
  grid-template-columns: 1fr;
}

.bd-queue-destination-create,
.bd-queue-destination-option {
  appearance: none;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid #d7d7d7;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.bd-queue-destination-option.is-personal {
  color: #7f4ed1;
  background: white;
}

.bd-queue-destination-create.is-personal {
  background: #7f4ed1;
  color: white;
  border: 0px solid transparent;
  font-weight: 400;
}

.bd-queue-destination-create.is-personal:hover {
  background: #6539b0;
}

.bd-queue-destination-create.is-work {
  color: #fff;
  background: #2c539e;
  border: 0px solid transparent;
  font-weight: 400;
}
.bd-queue-destination-create.is-work:hover {
  background: #204383;
}

.bd-queue-destination-option.is-work {
  background: #fff;
  color: #2c539e;
}

.bd-queue-destination-create:hover,
.bd-queue-destination-option:hover,
.bd-queue-destination-create:focus-visible,
.bd-queue-destination-option:focus-visible {
  background: rgba(15, 23, 42, 0.035);
  outline: none;
}

.bd-queue-destination-list {
  display: grid;
  gap: 8px;
}

.bd-queue-destination-option {
  width: 100%;
  text-align: left;
  padding: 8px 11px;
}

.bd-queue-destination-select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
}
/* Queue zero-group creation affordance */
.bd-empty-groups {
  min-height: 120px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 28px 16px 0;
  box-sizing: border-box;
}

.bd-empty-groups-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.bd-empty-group-btn {
  appearance: none;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.bd-empty-group-btn.is-personal {
  color: #7f4ed1;
}

.bd-empty-group-btn.is-work {
  color: #2c539e;
}

.bd-empty-group-btn:hover,
.bd-empty-group-btn:focus-visible {
  background: rgba(255, 255, 255, 0.035);
  outline: none;
}

/* Keep the topmost visible group's popup below the sticky Queue header. */
.backlog-drawer .bd-group-actionbar.bd-group-menu-panel.is-first-visible-group {
  top: 2px !important;
  transform: none !important;
  z-index: 80 !important;
}

/* Phone-only bdRow copy (including editing, display, flat view and measuring
   mirror). The flat-view 16px JSX style is overridden intentionally. */
@media screen and (max-width: 820px) {
  html body .backlog-drawer .bd-task-input,
  html body .backlog-drawer .bd-flat .bd-task-input,
  html body .backlog-drawer .bd-measure {
    font-size: 14px !important;
  }
}


/* === src/components/KronikalMoveMenu.css === */

.kronikal-move-backdrop{position:fixed;inset:0;z-index:1005000;display:flex;align-items:center;justify-content:center;background:rgba(19,23,31,.34);padding:16px;box-sizing:border-box}
.kronikal-move-dialog{width:min(500px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:#fff;color:#242830;border:1px solid rgba(30,35,45,.12);border-radius:18px;box-shadow:0 15px 50px rgba(10,20,35,.2);padding:16px 18px 19px;font-family:inherit;box-sizing:border-box}
.kronikal-move-title{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:17px;margin-bottom:4px}
.kronikal-move-title strong{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word;line-height:1.2}
.kronikal-move-close{border:0;border-radius:50%;width:31px;height:31px;background:#f0f0f2;color:#555;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 1px 0; margin-top: -9px;
  margin-right: -9px;cursor:pointer;flex:0 0 31px}
.kronikal-move-title{border-bottom:1px solid #e5e5e8;padding-bottom:12px;margin-bottom:0}
.kronikal-move-section{padding:14px 0 12px;border-bottom:1px solid #e5e5e8;display:flex;align-items:center;gap:12px}
.kronikal-move-section .kronikal-move-heading{flex:0 0 27%;margin:0}
.kronikal-move-section .kronikal-move-options{flex:1;min-width:0}
.kronikal-move-section:last-child{border-bottom:0;padding-bottom:0}
.kronikal-move-heading{text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:750;color:#83838a;margin-bottom:12px}
/* Shared inline vectors — exact artwork borrowed from EPT/TaskRow and user SVG. */
.kronikal-move-section .kronikal-move-heading{display:flex;align-items:center;gap:8px;white-space:nowrap}
.kronikal-move-destination-icon{display:block;width:17px;height:17px;flex:0 0 17px;color:#81818b}
.kronikal-bulk-move-button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.kronikal-bulk-move-icon{display:inline-block;width:13px;height:13px;flex:0 0 13px;fill:currentColor}
.kronikal-inline-move-icon{display:inline-block;width:13px;height:13px;vertical-align:middle;margin-right:5px;fill:currentColor}
/* Show shared Move SVG in the two native single-item menu styles. */
.de-menu-placement-row .de-menu-btn--move-with-icon{display:inline-flex!important;align-items:center;gap:5px}
.de-menu-placement-row .de-menu-btn--move-with-icon .kronikal-inline-move-icon{
  display:block!important;width:15px!important;height:15px!important;flex:0 0 15px;
  margin-right:0;opacity:1!important;visibility:visible!important;
}
.bd-item-actionbar .kronikal-inline-move-icon{
  display:inline-block!important;width:16px!important;height:16px!important;min-width:16px;
  flex:0 0 16px;margin-right:4px;fill:currentColor;opacity:1!important;
  visibility:visible!important;vertical-align:middle;
}

@media(max-width:820px){.kronikal-move-section .kronikal-move-heading{gap:7px}}

.kronikal-move-options{display:flex;flex-wrap:wrap;gap:8px}
.kronikal-move-option{border:0;border-radius:999px;padding:9px 13px;font:inherit;font-size:12px;font-weight:500;color:#222;background:#ededf0;cursor:pointer;white-space:nowrap}
.kronikal-move-option:hover:not(:disabled){background:#dedee4}
.kronikal-move-option:disabled{opacity:.45;cursor:default}
.kronikal-move-date-picker{padding:17px 0 4px}
.kronikal-move-date-picker input{width:100%;max-width:240px;padding:9px;border:1px solid #ddd;border-radius:8px;font:inherit;display:block;margin-bottom:18px}
@media(max-width:820px){.kronikal-move-dialog{width:min(440px,100%);border-radius:15px;padding:16px}.kronikal-move-section{display:block}.kronikal-move-section .kronikal-move-heading{margin:0 0 12px}.kronikal-move-section .kronikal-move-options{width:100%}}
.kronikal-bulk-toolbar{z-index: 1; padding-bottom: 5px; position:relative;display:flex;align-items:center;justify-content:center;gap:30px;width:100%;min-width:0;box-sizing:border-box;font-family:inherit}
.kronikal-bulk-count{display:inline-flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;white-space:nowrap;line-height:1}
.kronikal-bulk-count-number{display:block;font-size:25px;line-height:1;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.kronikal-bulk-count-descriptor{display:flex;flex-direction:column;gap:1px;color:#777b86;font-size:10px;font-weight:550;line-height:1.03}
.kronikal-bulk-buttons{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.kronikal-bulk-main,.kronikal-bulk-exit{border:1px solid #e0e0e6;border-radius:999px;font:inherit;font-size:11px;font-weight:500;padding:5px 9px;white-space:nowrap;cursor:pointer;background:#f0f0f2;color:#222}
.kronikal-bulk-exit{background:transparent; padding: 6px 9px !important;}
.kronikal-bulk-main{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.kronikal-bulk-chevron{display:block;flex:0 0 10px}

/* TaskRow MS lives on teal in the headnav (desktop) and footer (mobile).
   White alpha levels preserve its visual language without changing Queue / DE MS. */
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-count-number{color:#fff}
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-count-descriptor{color:rgba(255,255,255,.72)}
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-main,
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-exit{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.30);
  color:rgba(255,255,255,.96);
}
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-exit{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.58);
  color:rgba(255,255,255,.88);
}
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-main:hover,
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-main:focus-visible,
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-main[aria-expanded="true"]{
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.44);
  color:#fff;
}
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-exit:hover,
.kronikal-bulk-toolbar--taskrow .kronikal-bulk-exit:focus-visible{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.8);
  color:#fff;
}

.kronikal-bulk-actions-dismiss{position:fixed;inset:0;z-index:2147483000;background:transparent;}
.kronikal-bulk-actions{position:fixed;z-index:2147483001;max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #eaeaea;background:#fff;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.12);padding:8px;min-width:250px;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box}
.kronikal-bulk-actions--dayeditor{width:min(288px,calc(100vw - 24px));padding:8px; right: 520px!important;
  top: 108px!important; left: auto!important;}
.kronikal-bulk-actions--taskrow{display:flex;flex-wrap:wrap;gap:0;padding:9px;min-width:0}
.kronikal-bulk-actions--queue{ right: 74px !important; left: auto !important; display:flex;flex-wrap:wrap;gap:5px;padding:12px;min-width:0}
.kronikal-bulk-actions button{border:0;border-radius:999px;background:rgb(235,235,235);color:#000;font:inherit;font-size:11px;font-weight:400;cursor:pointer;padding:6px 9px;white-space:nowrap}
.kronikal-bulk-actions--dayeditor .de-menu-btn.round-de-menu-btn{width:34px;min-width:34px;height:27px;min-height:27px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-weight:650}
.kronikal-bulk-actions--dayeditor .de-menu-btn{margin:0!important}
.kronikal-bulk-actions--dayeditor .de-menu-btn--current-type{background:#e5e5f4!important;border:1px solid #b5b5e2}
.kronikal-bulk-actions--dayeditor .de-priority-menu-btn{display:inline-flex;align-items:center;gap:5px}
.kronikal-bulk-actions--dayeditor .kronikal-bulk-attributes{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.kronikal-bulk-actions--dayeditor .kronikal-bulk-attributes button{margin:0;padding:5px 7px}
.kronikal-bulk-actions--dayeditor .de-taskee-control-asterisk{color:#8a79e3;margin:0;font-size:15px}
.kronikal-bulk-actions button:hover:not(:disabled){background:#dedee5}
.kronikal-bulk-actions button:disabled{opacity:.45;cursor:default}
.kronikal-bulk-actions--dayeditor .kronikal-bulk-group-label{display:block;text-align:center;text-transform:uppercase;letter-spacing:1px;font-size:9px;color:#6e6e6e;margin:5px 0 7px}
.kronikal-bulk-actions--dayeditor .kronikal-bulk-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-bottom:1px solid #e4e4e4;padding:0 0 6px;margin:0 0 7px}
.kronikal-bulk-actions--dayeditor .kronikal-bulk-group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:2px}
.kronikal-bulk-actions--taskrow button{border-radius:7px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px;background:#fff;min-width:68px}
.kronikal-bulk-actions--taskrow button svg{width:19px;height:19px}
@media(max-width:820px){.kronikal-bulk-toolbar{gap:3px}.kronikal-bulk-count-number{font-size:21px}.kronikal-bulk-count-descriptor{font-size:9px}.kronikal-bulk-main,.kronikal-bulk-exit{padding:5px 7px;font-size:11px}.kronikal-bulk-buttons{gap:3px}}


/* Bulk TaskRow Actions: native TaskRow actionbar controls and type drawer.
   Reuse classes defined in styles.css; isolate popup-specific positioning here. */
.kronikal-bulk-actions--taskrow {
  width:min(334px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:12px;
  padding:14px!important;
  left: 50vw !important;
  right: auto!important;
  margin-left: -150px !important;
  top: 56px !important;
}

.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-actionbar {
  display:flex;
  align-items:stretch;
  width: 300px;
  justify-content:flex-start;
  min-height:62px;
  border:1px solid rgba(17,24,39,.18);
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 14px rgba(15,23,42,.12);
  overflow-x:auto;
  overflow-y:hidden;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-actionbar > .btn.actionbar-btns {
  flex:1 0 auto;
  min-width:40px;
  height:62px;
  padding:4px 6px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#000;
  font-size:9px;
  font-weight:400;
  opacity:.7;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-actionbar > .btn.actionbar-btns:hover,
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-actionbar > .btn.actionbar-btns:focus-visible {
  background:transparent;
  opacity:1;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-actionbar > .vertical-gradient-divider {
  flex:0 0 1px;
  align-self:stretch;
  height:auto;
  min-height:0;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-actionbar .actionbar-svg-icons,
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-actionbar .tw-priority-chip,
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-actionbar svg {
  width:19px;
  height:19px;
  max-width:19px;
  max-height:19px;
  flex:0 0 19px;
}
.tw-taskrow-bulk-types {
  min-width:0;
  border-top:1px solid #ececf1;
  padding:11px 0 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
.tw-taskrow-bulk-types-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
/* Exact TaskRow toggle and chip markup; only reset absolute placement, size
   inheritance and generic popup button rules that otherwise override it. */
.kronikal-bulk-actions--taskrow .twKindDrawer.tw-taskrow-bulk-kind-drawer {
  position:relative;
  inset:auto;
  top:auto;
  left:auto;
  right:auto;
  bottom:auto;
  transform:none;
  z-index:auto;
  width:max-content;
  max-width:100%;
  min-width: 300px;
  min-height:45px;
  padding:0 3px;
  display:inline-flex;
  flex-direction:row;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:0;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:10px;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twKindOption {
  position:relative;
  flex:0 0 auto;
  height:45px;
  min-height:45px;
  min-width:36px;
  margin:0;
  padding:0 22px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#111;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  font-weight:400;
  opacity:.75;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twKindOption:hover,
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twKindOption:focus-visible {
  background:transparent;
  opacity:1;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twKindChip {
  --tw-kind-chip-size:19px;
  --tw-kind-glyph-size:10px;
  width:19px;height:19px;min-width:19px;max-width:19px;
  min-height:19px;max-height:19px;
  padding:0;margin:0;
  border-width:2px;border-style:solid;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 19px;
  line-height:1;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twKindGlyph {
  font-size:10px;font-weight:800;line-height:1;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twKindLabel {
  font-size:8px;font-weight:500;line-height:9px;
  white-space:nowrap;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer button.twContextToggle.twContextToggle--drawer {
  width:50px;min-width:50px;max-width:50px;
  height:44px;min-height:44px;max-height:44px;
  padding:4px 6px 2px;
  border:0;border-radius:0;
  background:#fff;
  display:inline-flex;flex:0 0 50px;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twContextToggle__label {font-size:8px;line-height:1;font-weight:700}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twContextToggle__track {width:40px;min-width:40px;height:10px;min-height:10px}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .twContextToggle__thumb {width:24px;height:12px}
.kronikal-bulk-actions--taskrow .tw-taskrow-bulk-kind-drawer .post-context-divider {align-self:stretch;flex:0 0 15px}
.tw-taskrow-ms-input-backdrop{position:fixed;inset:0;z-index:1006000;background:rgba(14,17,23,.36);display:flex;align-items:center;justify-content:center;padding:18px}
.tw-taskrow-ms-input-dialog{box-sizing:border-box;width:min(440px,100%);border-radius:22px;background:#fff;color:#1c202b;padding:22px;box-shadow:0 18px 70px #0003}
.tw-taskrow-ms-input-head{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:20px}
.tw-taskrow-ms-input-intro{color:#697181;font-size:12px;line-height:1.45;margin:10px 0 16px}
.tw-taskrow-ms-input-choices{display:flex;gap:9px;flex-wrap:wrap}
.tw-taskrow-ms-input-fields{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tw-taskrow-ms-input-fields label{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12px;font-weight:700}
.tw-taskrow-ms-input-fields input[type=date],.tw-taskrow-ms-input-fields input[type=time],.tw-taskrow-ms-input-fields select{font:inherit;padding:8px 10px;border:1px solid #d6dae3;border-radius:8px;color:#171923;background:#fff}
.tw-taskrow-ms-input-fields .tw-taskrow-ms-input-check{flex-direction:row;align-items:center;font-weight:500}

@media (max-width:820px) {
  .kronikal-bulk-actions--taskrow {
    max-height:200px;
    overflow-y:auto;
    max-width: calc(100vw - 24px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:12px;
    padding:14px!important;
    left: 50vw !important;
    right: auto!important;
    margin-left: -160px !important;
    top: auto !important;
    bottom: 55px !important;
  }
}


/* === src/components/quiz-components/Quiz.css === */

.de-row--quiz {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: stretch;
}

.de-row--quiz > .de-colBC {
  min-width: 0;
  width: 100%;
  padding-right: 8px;
}

.quiz-element-shell {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.de-row--quiz.focused {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(109, 79, 194, 0) 15px,
    rgba(109, 79, 194, 0.07) 60px,
    rgba(109, 79, 194, 0)
  );
}

.de-row--quiz.focused .de-colA-handle {
  opacity: 0.66;
  pointer-events: auto;
}

.quiz-element-edge-hit-cell {
  flex: 0 0 24px;
  min-width: 24px;
  height: auto;
  display: flex;
  background: transparent;
  cursor: text;
}

.quiz-element-edge-hit-cell--before {
  align-items: flex-start;
  justify-content: center;
}

.quiz-element-edge-hit-cell--after {
  align-items: flex-end;
  justify-content: center;
}

.quiz-element-edge-input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 5px;
  min-width: 5px;
  max-width: 5px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  color: transparent;
  caret-color: #2563eb;
  cursor: text;
  font-size: 16px;
  line-height: 26px;
}

.quiz-element-edge-input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.quiz-element-link-shell {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 26px;
  display: flex;
  align-items: center;
  overflow: visible;
}

.quiz-element-link {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: calc(100% - 34px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent !important;
  color: #2563eb;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}

.quiz-element-link:hover {
  background: transparent !important;
}

.quiz-element-link:hover .quiz-element-link-label {
  text-decoration: underline;
}

.quiz-element-link:focus-visible,
.quiz-element-link-expand:focus-visible {
  border-radius: 6px;
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

.quiz-element-link-icon-circle {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.quiz-element-link-icon-circle svg {
  display: block;
  width: 14px;
  height: 10px;
}

.quiz-element-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-element-link-expand {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 1px;
  margin: 0 0 0 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 23, 32, 0.66) !important;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.quiz-element-link-expand:hover {
  background: #1d4ed8 !important;
}

.quiz-element-card {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid #dadce2;
  border-radius: 11px;
  background: #fff;
  color: #171717;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.quiz-element-card:hover,
.quiz-element-card:focus-visible {
  border-color: #b8c1d2;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.1);
  outline: none;
}

.quiz-element-thumbnail {
  flex: 0 0 112px;
  min-height: 82px;
  overflow: hidden;
  background: #eef2f7;
}

.quiz-element-thumbnail img {
  width: 100%;
  height: 100%;
  min-height: 82px;
  display: block;
  object-fit: cover;
}

.quiz-element-thumbnail-fallback {
  height: 100%;
  min-height: 82px;
  display: grid;
  place-items: center;
  color: #64748b;
}

.quiz-element-thumbnail-fallback svg {
  width: 46px;
}

.quiz-element-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 13px;
}

.quiz-element-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1.25;
}

.quiz-element-title-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-element-glyph {
  flex: 0 0 auto;
  width: 26px;
  height: 18px;
  color: #475569;
}

.quiz-element-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.quiz-element-edit,
.quiz-text-button,
.quiz-link-button,
.quiz-skip-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #2855b8;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.quiz-element-edit {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 2px;
  font-size: 11px;
}

.quiz-element-subtitle {
  margin: 4px 0 1px 33px;
  overflow: hidden;
  color: #586174;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-element-meta {
  margin-top: 5px;
  color: #687083;
  font-size: 11px;
  line-height: 1.25;
}

.quiz-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000010;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
}

.quiz-modal {
  width: min(1120px, calc(100vw - 48px));
  height: min(850px, calc(100vh - 48px));
  min-height: 500px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: #f8fafc;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.35);
  color: #111827;
}

.quiz-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px 13px;
  background: #fff;
}

.quiz-modal-title-wrap {
  min-width: 0;
}

.quiz-modal-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quiz-modal-title-wrap h1 {
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-modal-close {
  appearance: none;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.quiz-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid #dfe4ec;
  background: #fff;
}

.quiz-modal-tabs button {
  appearance: none;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.quiz-modal-tabs button.is-active {
  border-bottom-color: #2855b8;
  color: #1e3a8a;
}

.quiz-modal-tabs button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.quiz-modal-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
}

.quiz-empty-state {
  padding: 28px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  color: #566176;
  text-align: center;
}

.quiz-empty-play-state {
  max-width: 680px;
  margin: 24px auto 0;
}

.quiz-empty-play-state p {
  margin: 0 0 12px;
  line-height: 1.55;
}

.quiz-empty-play-state small {
  display: block;
  margin-top: 12px;
}

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

.quiz-setting-group {
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid #dce2ea;
  border-radius: 12px;
  background: #fff;
}

.quiz-setting-group:last-child {
  grid-column: 1 / -1;
}

.quiz-setting-group legend {
  padding: 0 5px;
  color: #4b5563;
  font-size: 11px;
  font-weight: 700;
}

.quiz-segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.quiz-segmented-control button {
  appearance: none;
  flex: 1 1 auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #d5dbe5;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.quiz-segmented-control button.is-active {
  border-color: #375fbe;
  background: #e8efff;
  color: #173b8e;
  box-shadow: inset 0 0 0 1px rgba(55, 95, 190, 0.16);
}

.quiz-mode-help {
  margin: 13px 2px 0;
  color: #64748b;
  font-size: 12px;
}

.quiz-start-area {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 24px;
}

.quiz-primary-button {
  appearance: none;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid #173f99;
  border-radius: 9px;
  background: #2855b8;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(30, 64, 175, 0.18);
}

.quiz-primary-button:hover {
  background: #21499f;
}

.quiz-inline-error {
  max-width: 680px;
  padding: 9px 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff1f2;
  color: #9f1239;
  font-size: 12px;
}

.quiz-editor-tab {
  max-width: 1080px;
  margin: 0 auto;
}

.quiz-editor-heading-fields {
  display: grid;
  gap: 9px;
}

.quiz-title-input,
.quiz-subtitle-input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #d9e0e9;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: inherit;
  outline: none;
}

.quiz-title-input {
  padding: 11px 13px;
  font-size: 19px;
  font-weight: 700;
}

.quiz-subtitle-input {
  min-height: 62px;
  padding: 10px 13px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.4;
}

.quiz-title-input:focus,
.quiz-subtitle-input:focus {
  border-color: #6483c9;
  box-shadow: 0 0 0 3px rgba(59, 93, 169, 0.12);
}

.quiz-thumbnail-editor {
  margin: 15px 0 20px;
  padding: 14px;
  border: 1px solid #dce2ea;
  border-radius: 12px;
  background: #fff;
}

.quiz-checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 650;
}

.quiz-checkbox-row input {
  width: 16px;
  height: 16px;
  accent-color: #2855b8;
}

.quiz-thumbnail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.quiz-thumbnail-dropzone {
  appearance: none;
  flex: 1 1 auto;
  min-height: 66px;
  padding: 12px;
  border: 1px dashed #9aa8bc;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.quiz-text-button.is-danger {
  color: #b42318;
}

.quiz-question-list {
  display: grid;
  gap: 10px;
}

.quiz-add-question-button {
  appearance: none;
  width: 100%;
  min-height: 39px;
  border: 1px dashed #a9b4c5;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #35538f;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.quiz-qa-card {
  overflow: visible;
  border: 1px solid #d9e0e9;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.quiz-qa-row-main,
.quiz-hints-row {
  display: grid;
  grid-template-columns:
    34px 34px minmax(0, 1fr)
    minmax(0, 1fr) auto 34px;
  gap: 7px;
  align-items: stretch;
  padding: 10px;
}

.quiz-icon-button,
.quiz-hints-toggle,
.quiz-delete-hints,
.quiz-hide-hints {
  appearance: none;
  min-height: 34px;
  border: 1px solid #d9e0e9;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.quiz-icon-button:disabled {
  opacity: 0.25;
  cursor: default;
}

.quiz-icon-button.is-danger {
  color: #b42318;
}

.quiz-hints-toggle {
  align-self: start;
  padding: 6px 9px;
  white-space: nowrap;
}

.quiz-hints-toggle-spacer {
  min-height: 34px;
}

.quiz-document-editor {
  min-width: 0;
  min-height: 56px;
  border: 1px solid #e2e7ee;
  border-radius: 9px;
  background: #fbfcfe;
}

.quiz-document-editor:focus-within {
  border-color: #7892ca;
  box-shadow: 0 0 0 2px rgba(59, 93, 169, 0.1);
}

.quiz-document-editor .day-editor {
  padding: 6px 6px 7px 3px;
}

.quiz-document-editor .de-row {
  margin: 1px 0;
}

.quiz-document-editor .de-row--line {
  grid-template-columns: 25px 24px minmax(0, 1fr);
}

.quiz-document-editor .de-row--line.de-row--colBC {
  grid-template-columns: 31px minmax(0, 1fr);
}

.quiz-document-editor .de-line-input,
.quiz-document-editor .de-cell {
  font-size: 13px;
}

.quiz-document-editor .de-atip-plus-menu {
  z-index: 1000014;
}

.quiz-hints-row {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.quiz-delete-hints {
  grid-column: 1 / 3;
  color: #b42318;
}

.quiz-hints-row
  .quiz-document-editor:nth-of-type(1) {
  grid-column: 3;
}

.quiz-hints-row
  .quiz-document-editor:nth-of-type(2) {
  grid-column: 4;
}

.quiz-hide-hints {
  grid-column: 5 / 7;
  align-self: start;
}

.quiz-drive-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid #f4c27a;
  border-radius: 10px;
  background: #fff8e8;
  color: #7c4a03;
}

.quiz-drive-gate > div {
  display: grid;
  gap: 2px;
}

.quiz-drive-gate strong {
  font-size: 12px;
}

.quiz-drive-gate span {
  font-size: 11px;
  line-height: 1.35;
}

.quiz-drive-gate button {
  appearance: none;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #bd7b19;
  border-radius: 8px;
  background: #fff;
  color: #7c4a03;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.quiz-drive-gate.is-compact {
  margin: 12px 0 0;
}

.quiz-play-session {
  max-width: 900px;
  margin: 0 auto;
}

.quiz-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
}

.quiz-prompt-card,
.quiz-single-answer-card,
.quiz-rich-choice-card {
  padding: 18px;
  border: 1px solid #d9e0e9;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 13px rgba(15, 23, 42, 0.06);
}

.quiz-document-view .day-editor {
  padding: 0;
}

.quiz-document-view .de-row:first-child {
  margin-top: 0;
}

.quiz-document-view .de-row:last-child {
  margin-bottom: 0;
}

.quiz-hint-area {
  margin: 9px 0;
}

.quiz-link-button {
  padding: 3px 0;
  font-size: 12px;
}

.quiz-shown-hint {
  margin-top: 7px;
  padding: 11px;
  border-top: 1px solid #dbe2ec;
  border-radius: 0 0 9px 9px;
  background: rgba(255, 255, 255, 0.72);
}

.quiz-answer-area,
.quiz-type-answer,
.quiz-single-choice {
  margin-top: 14px;
}

.quiz-simple-choices {
  display: grid;
  gap: 8px;
}

.quiz-simple-choices > button {
  appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 45px;
  padding: 8px 12px;
  border: 1px solid #d6dde8;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.quiz-simple-choices > button:hover {
  border-color: #7892ca;
  background: #f5f8ff;
}

.quiz-choice-letter {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #eef2f8;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.quiz-rich-choices {
  display: grid;
  justify-items: center;
  gap: 11px;
}

.quiz-rich-choice-card {
  box-sizing: border-box;
  width: 100%;
  max-height: 360px;
  overflow: auto;
}

.quiz-choice-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.quiz-choice-dots button {
  appearance: none;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #718096;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.quiz-choice-dots button.is-active {
  border-color: #2855b8;
  background: #2855b8;
  box-shadow: 0 0 0 3px rgba(40, 85, 184, 0.12);
}

.quiz-type-answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.quiz-type-answer label {
  grid-column: 1 / -1;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.quiz-type-answer input {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #cfd8e5;
  border-radius: 9px;
  background: #fff;
  color: #111827;
  font: inherit;
}

.quiz-single-choice {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.quiz-single-answer-card {
  box-sizing: border-box;
  width: 100%;
}

.quiz-self-grade-buttons {
  display: flex;
  gap: 9px;
}

.quiz-self-grade-buttons button {
  appearance: none;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #cfd8e5;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.quiz-skip-button {
  display: block;
  margin: 18px auto 0;
  padding: 5px 8px;
  color: #64748b;
  font-size: 12px;
}

.quiz-result-viewport {
  height: 100%;
  min-height: 410px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 14px;
}

.quiz-wrong-card,
.quiz-correct-card {
  box-sizing: border-box;
  width: min(850px, 100%);
  min-height: 0;
  overflow: hidden;
  border: 1px solid #e1e6ee;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(15, 23, 42, 0.08);
}

.quiz-result-scroll {
  height: 100%;
  max-height: 570px;
  overflow: auto;
}

.quiz-result-center {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
}

.quiz-result-center h2 {
  margin: 0 0 18px;
  text-align: center;
  font-size: 20px;
}

.quiz-wrong-card .quiz-result-center h2 {
  color: #b42318;
}

.quiz-wrong-hint {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #dfe5ed;
}

.quiz-correct-card .quiz-result-center {
  align-items: center;
  color: #166534;
}

.quiz-correct-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #dcfce7;
  font-size: 30px;
  font-weight: 800;
}

.quiz-complete-card {
  max-width: 520px;
  margin: 40px auto;
  padding: 34px;
  border: 1px solid #dce2ea;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
}

.quiz-complete-score {
  color: #2855b8;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}

.quiz-complete-card h2 {
  margin: 13px 0 7px;
}

.quiz-complete-card p {
  margin: 4px 0;
  color: #64748b;
}

.quiz-complete-duration {
  margin-bottom: 20px !important;
  font-size: 12px;
}

.quiz-scores-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;
}

.quiz-scores-toolbar label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.quiz-scores-toolbar select {
  min-height: 34px;
  padding: 5px 28px 5px 9px;
  border: 1px solid #d4dce7;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font: inherit;
}

.quiz-score-list {
  display: grid;
  gap: 9px;
}

.quiz-score-card {
  padding: 13px 14px;
  border: 1px solid #dce2ea;
  border-radius: 11px;
  background: #fff;
}

.quiz-score-card-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #4b5563;
  font-size: 12px;
}

.quiz-score-card-main strong {
  color: #1f2937;
}

.quiz-status-pill,
.quiz-mode-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
}

.quiz-status-pill.is-completed {
  background: #dcfce7;
  color: #166534;
}

.quiz-status-pill.is-unfinished {
  background: #f1f5f9;
  color: #64748b;
}

.quiz-mode-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.quiz-mode-pills span {
  border: 1px solid #e0e5ec;
  background: #f8fafc;
  color: #697386;
}

@media (max-width: 819px) {
  .quiz-element-meta {
    line-height: 1.35;
  }

  .quiz-modal-backdrop {
    padding: 0;
  }

  .quiz-modal,
  .quiz-modal.is-mobile {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .quiz-modal-header {
    padding:
      max(12px, env(safe-area-inset-top))
      14px 10px;
  }

  .quiz-modal-tabs {
    padding: 0 8px;
    overflow-x: auto;
  }

  .quiz-modal-tabs button {
    flex: 0 0 auto;
    padding: 0 11px;
  }

  .quiz-modal-body {
    padding:
      14px 12px
      max(18px, env(safe-area-inset-bottom));
  }

  .quiz-settings-grid {
    grid-template-columns: 1fr;
  }

  .quiz-setting-group:last-child {
    grid-column: auto;
  }

  .quiz-qa-row-main,
  .quiz-hints-row {
    grid-template-columns:
      34px 34px minmax(0, 1fr) 34px;
  }

  .quiz-qa-row-main
    > .quiz-document-editor:nth-of-type(1),
  .quiz-hints-row
    > .quiz-document-editor:nth-of-type(1) {
    grid-column: 1 / -1;
  }

  .quiz-qa-row-main
    > .quiz-document-editor:nth-of-type(2),
  .quiz-hints-row
    > .quiz-document-editor:nth-of-type(2) {
    grid-column: 1 / -1;
  }

  .quiz-qa-row-main .quiz-hints-toggle,
  .quiz-qa-row-main
    .quiz-hints-toggle-spacer {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .quiz-qa-row-main
    > .quiz-icon-button.is-danger {
    grid-column: 4;
    grid-row: 1;
  }

  .quiz-delete-hints {
    grid-column: 1 / 3;
  }

  .quiz-hide-hints {
    grid-column: 3 / 5;
  }

  .quiz-thumbnail-actions,
  .quiz-drive-gate {
    align-items: stretch;
    flex-direction: column;
  }

  .quiz-drive-gate button {
    width: 100%;
  }

  .quiz-type-answer {
    grid-template-columns: 1fr;
  }

  .quiz-type-answer label {
    grid-column: auto;
  }

  .quiz-result-viewport {
    min-height: calc(100dvh - 190px);
  }

  .quiz-result-center {
    padding: 20px 14px;
  }
}

@media (max-width: 520px) {
  .quiz-element-thumbnail {
    flex-basis: 86px;
  }

  .quiz-element-title-line {
    gap: 5px;
  }

  .quiz-element-glyph {
    width: 22px;
  }

  .quiz-progress-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .quiz-prompt-card,
  .quiz-single-answer-card,
  .quiz-rich-choice-card {
    padding: 12px;
  }

  .quiz-score-card-main {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* === src/components/brainDump.css === */

.bdmp-static-line.is-addressed,
.bdmp-static-checklist-title.is-addressed,
.bdmp-static-checkitem.is-addressed{position:relative;color:#a1a1a8}
.bdmp-shell.is-dark .bdmp-static-checkitem.is-addressed{color:#a1a1a8}
.bdmp-static-line.is-addressed::before,
.bdmp-static-checklist-title.is-addressed::before,
.bdmp-static-checkitem.is-addressed::before {
  content:"✓";
  position:absolute;
  left:11px;top:9px;width:15px;height:15px;
  border-radius:50%;display:grid;place-items:center;
  background:#6945eb;color:#fff;
  font:700 9px/1 system-ui,sans-serif;
  pointer-events:none}
.bdmp-static-checklist-title.is-addressed::before,
.bdmp-static-checkitem.is-addressed::before{left:2px;top:3px}

.bdmp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  background: rgba(14, 16, 20, 0.42);
  color: #20242b;
  opacity: 1;
  transition: background-color 220ms ease, opacity 220ms ease;
}

.bdmp-overlay.is-opening,
.bdmp-overlay.is-closing {
  background: rgba(14, 16, 20, 0);
}

.bdmp-scroll 
.de-row--placeholder {
  opacity: .5;
}

.bdmp-shell {
  --bdmp-border: rgba(31, 38, 48, 0.13);
  --bdmp-muted: #7b838f;
  --bdmp-paper: #fff;
  --bdmp-start-x: 0px;
  --bdmp-start-y: 0px;
  --bdmp-start-scale-x: 1;
  --bdmp-start-scale-y: 1;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  border-radius: 26px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--bdmp-paper);
  transform-origin: 0 0;
  transform: translate3d(0, 0, 0) scale(1, 1);
  border-radius: 0;
  box-shadow: 0 20px 70px rgba(14, 16, 20, 0.22);
  transition:
    transform 220ms cubic-bezier(0.2, 0.82, 0.2, 1),
    border-radius 220ms ease,
    box-shadow 220ms ease;
  will-change: transform, border-radius;
}

.bdmp-shell.is-opening,
.bdmp-shell.is-closing {
  transform:
    translate3d(var(--bdmp-start-x), var(--bdmp-start-y), 0)
    scale(var(--bdmp-start-scale-x), var(--bdmp-start-scale-y));
  border-radius: 999px;
  box-shadow: 0 7px 24px rgba(19, 23, 31, 0.14);
}

.bdmp-header,
.bdmp-footer {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: max(20px, env(safe-area-inset-right));
  padding-left: max(20px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bdmp-paper) 94%, transparent);
  backdrop-filter: blur(14px);
}

.bdmp-header {
  min-height: 62px;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--bdmp-border);
  justify-content: space-between;
}

.bdmp-header h1 {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.bdmp-header.is-multiselect {
  justify-content: stretch;
}

.bdmp-multiselect-header {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdmp-ms-host {
  min-width: 0;
}

.bdmp-startup-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #59616d;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.bdmp-startup-toggle input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #6656d9;
}

.bdmp-scroll {
  position: relative;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  background: var(--bdmp-paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bdmp-capture {
  width: min(880px, calc(100% - 32px));
  min-height: 245px;
  margin: 0 auto;
  padding: 28px 0 16px;
}

.bdmp-capture .day-editor {
  min-height: 190px;
}

.bdmp-capture .de-row:first-child textarea::placeholder {
  color: #7a818d;
  opacity: 0.86;
}

.bdmp-history-toggle-wrap {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  padding: 4px 0 18px;
}

.bdmp-history-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #7d8490;
  cursor: pointer;
}

.bdmp-history-toggle:disabled {
  cursor: default;
}

.bdmp-history-toggle span {
  height: 1px;
  background: var(--bdmp-border);
}

.bdmp-history-toggle strong {
  font-size: 10px;
  font-weight: 620;
  letter-spacing: 0.03em;
}

.bdmp-history {
  padding-bottom: 38px;
}

.bdmp-date-group {
  width: 100%;
}

.bdmp-date-header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  margin: 0;
  padding: 11px max(24px, calc((100% - 880px) / 2));
  border-top: 1px solid var(--bdmp-border);
  border-bottom: 1px solid var(--bdmp-border);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--bdmp-paper) 95%, #eef0f4);
  color: #686f7a;
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0.13em;
  backdrop-filter: blur(12px);
}

.bdmp-search-date-toggle {
  flex: 0 0 auto;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #777f8a;
  font-family: inherit;
  font-size: 10px;
  line-height: 1;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.bdmp-search-date-toggle:hover,
.bdmp-search-date-toggle:focus-visible {
  color: #4f5762;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bdmp-date-sessions {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  padding: 4px 0 24px;
}

.bdmp-session + .bdmp-session {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 38, 48, 0.07);
}

.bdmp-session-time {
  padding: 20px 10px 7px;
  color: #969ca5;
  font-size: 10px;
  line-height: 1;
  font-weight: 560;
}

.bdmp-static-session {
  padding: 58px 0 18px 0;
}

.bdmp-static-block {
  border-radius: 8px;
  outline: none;
  transition: background-color 120ms ease;
}

.bdmp-static-block:hover,
.bdmp-static-block:focus-visible,
.bdmp-static-checklist-title:hover,
.bdmp-static-checklist-title:focus-visible,
.bdmp-static-checkitem:hover,
.bdmp-static-checkitem:focus-visible {
  background: rgba(104, 91, 205, 0.055);
}

.bdmp-static-line {
  min-height: 18px;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  align-items: start;
  padding: 6px 11px;
  color: #252a31;
  font-size: 14px;
  line-height: 1.38;
  white-space: pre-wrap;
  cursor: text;
}

.bdmp-static-line.is-checked,
.bdmp-static-checkitem.is-checked {
  color: #9298a1;
}

.bdmp-static-marker.de-marker {
  justify-self: center;
  pointer-events: none;
}

.bdmp-static-block.bdmp-static-line:has(> .bdmp-static-marker.de-marker) {
  margin-left: 22px;
  padding: 5.5px 11px;
}

.bdmp-static-line.is-addressed:has(> .bdmp-static-marker.de-marker)::before {
  left: -11px;
  top: 8px;
}

.bdmp-static-bold {
  font-weight: 700;
}

.bdmp-static-marker.de-marker.number,
.bdmp-static-marker.de-marker.bullet{
  left: -3px;
  position: relative;
}

.bdmp-static-marker.de-marker.check {
  left: -4px;
  position: relative;
}

.bdmp-static-table {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--bdmp-border);
  cursor: text;
}

.bdmp-static-cell {
  min-height: 31px;
  padding: 7px 9px;
  background: rgba(246, 247, 249, 0.68);
  overflow-wrap: anywhere;
}

.bdmp-static-checklist {
  padding: 5px 8px 7px;
}

.bdmp-static-checklist-title,
.bdmp-static-checkitem {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  align-items: start;
  border-radius: 7px;
  outline: none;
  cursor: text;
}

.bdmp-static-checklist-title {
  padding: 5px 2px;
  font-size: 14px;
  line-height: 1.35;
}

.bdmp-static-checklist-items {
  padding-left: 20px;
}

.bdmp-static-checkitem {
  padding: 4px 2px;
  color: #3d424a;
  font-size: 13px;
  line-height: 1.35;
}

.bdmp-static-divider {
  display: grid;
  grid-template-columns: minmax(14px, 1fr) auto minmax(14px, 1fr);
  align-items: center;
  gap: 10px;
  margin: 8px 9px;
  color: #858b95;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: text;
}

.bdmp-static-divider::before,
.bdmp-static-divider::after {
  content: "";
  height: 1px;
  background: var(--bdmp-border);
}

.bdmp-static-media {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 6px;
  padding: 7px 9px;
  border: 1px solid rgba(31, 38, 48, 0.08);
  cursor: pointer;
}

.bdmp-static-media-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #f0eff8;
  color: #6459ae;
  font-size: 12px;
  font-weight: 750;
}

.bdmp-static-media-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.bdmp-static-media-label {
  overflow: hidden;
  color: #353a42;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* History Link view is always compact and borderless for URLs and media.
   Keep ordinary deRows, checkcircles, Item Groups and quiz preview styling. */
.bdmp-static-media.is-bdmp-link {
  min-height: 30px;
  width: fit-content;
  max-width: calc(100% - 12px);
  margin: 3px 6px 3px 24px;
  padding: 5px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  color: #2563eb;
}
.bdmp-static-media.is-bdmp-link .bdmp-static-link-leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  color: #2563eb;
}
.bdmp-static-link-leading .bdmp-static-link-favicon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 0;
  object-fit: contain;
}
/* An image favicon suppresses the chain; missing/failed favicon uses it. */
.bdmp-static-link-leading img.bdmp-static-link-favicon ~ .bdmp-static-link-chain,
.bdmp-static-link-leading .de-hyperlink-favicon-fallback {
  display: none;
}
.bdmp-static-link-media-icon {
  font-size: 16px;
  line-height: 1;
}
.bdmp-static-media.is-bdmp-link .bdmp-static-link-label {
  color: #2563eb;
  min-width: 0;
  max-width: calc(100% - 52px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
}
.bdmp-static-link-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #fff;
  margin-left: 2px;
  pointer-events: none; /* history row retains its existing activate-editor click */
}
.bdmp-static-media.is-bdmp-link .bdmp-static-link-secondary {
  flex-basis: 100%;
  margin-left: 23px;
  color: #818792;
}
.bdmp-shell.is-dark .bdmp-static-media.is-bdmp-link .bdmp-static-link-label,
.bdmp-shell.is-dark .bdmp-static-media.is-bdmp-link .bdmp-static-link-leading {
  color: #86a9ff;
}

.bdmp-static-media-secondary,
.bdmp-static-quiz-details {
  color: #818792;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.bdmp-static-quiz-details {
  margin: -1px 15px 7px 50px;
}

.bdmp-search-highlight {
  padding: 0 2px;
  border-radius: 4px;
  background: rgba(111, 91, 193, 0.14);
  color: inherit;
  font-weight: inherit;
}



.bdmp-active-editor {
  margin: 6px 0 10px;
  padding: 10px;
  border: 1px solid rgba(102, 86, 217, 0.2);
  border-radius: 12px;
  background: rgba(104, 91, 205, 0.025);
}

.bdmp-active-editor .day-editor {
  padding: 8px 20px 0px 15px!important;
}

.bdmp-active-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  color: #818792;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bdmp-active-editor-bar button,
.bdmp-load-older {
  border: 1px solid var(--bdmp-border);
  border-radius: 999px;
  background: #fff;
  color: #5c6370;
  cursor: pointer;
}

.bdmp-active-editor-bar button {
  padding: 5px 10px;
  font-size: 10px;
}

.bdmp-empty-history {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 42px;
  color: #969ca5;
  font-size: 12px;
  text-align: center;
}

.bdmp-load-older {
  display: block;
  margin: 12px auto 4px;
  padding: 8px 14px;
  font-size: 11px;
}

.bdmp-footer {
  min-height: 70px;
  padding-right: max(150px, env(safe-area-inset-right));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--bdmp-border);
  justify-content: space-between;
}

.bdmp-search-area {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdmp-search-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #626a76;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.bdmp-search-button:hover,
.bdmp-search-button:focus-visible {
  background: #f1f2f5;
}

.bdmp-search-input {
  width: min(430px, 100%);
  min-width: 0;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--bdmp-border);
  border-radius: 999px;
  outline: none;
  background: #f7f8fa;
  color: #242931;
  font: inherit;
  font-size: 13px;
  width: 100%;
}

.bdmp-search-input:focus {
  border-color: rgba(102, 86, 217, 0.42);
  box-shadow: 0 0 0 3px rgba(102, 86, 217, 0.08);
}

/* Search and Clear share a single pill; no extra footer width is needed. */
.bdmp-search-pill {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--bdmp-border);
  border-radius: 999px;
  background: #f7f8fa;
  overflow: hidden;
}
.bdmp-search-pill:focus-within {
  border-color: rgba(102, 86, 217, 0.42);
  box-shadow: 0 0 0 3px rgba(102, 86, 217, 0.08);
}
.bdmp-search-pill .bdmp-search-input,
.bdmp-search-pill .bdmp-search-input:focus {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0 4px 0 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bdmp-search-pill .bdmp-search-input::-webkit-search-cancel-button {
  display: none;
}
.bdmp-search-inline-action,
.bdmp-search-inline-global {
  flex: 0 0 auto;
  margin-right: 5px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: #e5e7ec;
  color: #343842;
  font: 600 11px/1.1 system-ui, sans-serif;
}
.bdmp-search-inline-action { cursor: pointer; }
.bdmp-search-inline-action:disabled { opacity: .45; cursor: default; }
.bdmp-search-inline-action:not(:disabled):hover { background: #dedbe9; }
.bdmp-search-inline-global { color: #747781; }
.bdmp-shell.is-dark .bdmp-search-pill { background: #202329; }
.bdmp-shell.is-dark .bdmp-search-pill .bdmp-search-input { background: transparent; }
.bdmp-shell.is-dark .bdmp-search-inline-action,
.bdmp-shell.is-dark .bdmp-search-inline-global { background: #343740; color: #ececf0; }

.bdmp-close {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 25;
  min-width: 112px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #24272d;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(17, 20, 26, 0.18);
  transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
  min-height: 42px;
  top: 14px;
}

.bdmp-shell.is-closing .bdmp-close {
  opacity: 0;
  pointer-events: none;
}

.bdmp-close:hover,
.bdmp-close:focus-visible {
  background: #111318;
  transform: translateY(-1px);
}

.bdmp-desktop-launcher,
.bdmp-mobile-launcher {
  position: fixed;
  z-index: 8800;
  min-height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  border: 1px solid rgba(42, 45, 52, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #333842;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer!important;
  white-space: nowrap;
  box-shadow: 0 7px 24px rgba(19, 23, 31, 0.14);
  backdrop-filter: blur(12px);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.bdmp-desktop-launcher {
  right: 20px;
  bottom: 20px;
  cursor: pointer!important;
}

.bdmp-desktop-launcher:hover {
  color: #804cf9;
}

.bdmp-mobile-launcher {
  left: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  z-index: 9600;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 52px;
  width: 52px;
  bottom: 20px;
  padding-left: 2px;
  border: 0px solid transparent;
  background: linear-gradient( to right, #4a2d9d, #804cf9 95% ) !important;
}

/* Search + TaskRow multiselect: rise with the displaced Search bar. */
body:has(.edward-productivity-tool.search-mode-active.ms-mode) .bdmp-mobile-launcher {
  bottom: 65px;
}

/* Search + TaskRow multiselect: rise with the displaced Search bar. */
body:has(.edward-productivity-tool.ms-mode) .bdmp-mobile-launcher {
  bottom: 65px;
}

.bdmp-mobile-launcher 
.bdmp-desktop-launcher-icon svg {
  width: 30px!important;
  height: 30px!important;
  color: #fff;
}

.bdmp-desktop-launcher-icon {
  margin-right: -2px;
  cursor: pointer!important;
}

.bdmp-desktop-launcher-icon:hover {
  cursor: pointer!important;
}

.bdmp-desktop-launcher:hover,
.bdmp-desktop-launcher:focus-visible,
.bdmp-mobile-launcher:hover,
.bdmp-mobile-launcher:focus-visible {
  border-color: rgba(102, 86, 217, 0.28);
  box-shadow: 0 8px 26px rgba(19, 23, 31, 0.18);
  transform: translateY(-1px);
  cursor: pointer!important;
}

.bdmp-mobile-launcher:active {
  transform: translateY(0);
}

.bdmp-preference-heading {
  margin: 30px 0 6px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bdmp-preference-label {
  font-size: 11px;
  line-height: 1.2;
}

.bdmp-preference-pill-row {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.bdmp-preference-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bdmp-preference-pill {
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 10px;
  font-weight: 620;
  cursor: pointer;
}

.bdmp-preference-pill.is-selected {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.bdmp-preference-note {
  margin: 1px 0 10px;
  font-size: 10px;
  line-height: 1.3;
  opacity: 0.68;
}

.bdmp-splitter-arrows {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bdmp-desktop-launcher.is-dark,
.bdmp-mobile-launcher.is-dark {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(29, 31, 36, 0.92);
  color: #f3f4f6;
}

.bdmp-shell.is-dark {
  --bdmp-border: rgba(255, 255, 255, 0.12);
  --bdmp-muted: #969ca7;
  --bdmp-paper: #17191d;
  color: #f0f1f3;
}

.bdmp-shell.is-dark .bdmp-startup-toggle,
.bdmp-shell.is-dark .bdmp-date-header,
.bdmp-shell.is-dark .bdmp-active-editor-bar,
.bdmp-shell.is-dark .bdmp-static-media-secondary,
.bdmp-shell.is-dark .bdmp-static-quiz-details {
  color: #a2a8b2;
}

.bdmp-shell.is-dark .bdmp-static-line,
.bdmp-shell.is-dark .bdmp-static-media-label,
.bdmp-shell.is-dark .bdmp-static-checkitem {
  color: #e4e6ea;
}

.bdmp-shell.is-dark .bdmp-static-cell,
.bdmp-shell.is-dark .bdmp-search-input,
.bdmp-shell.is-dark .bdmp-active-editor-bar button,
.bdmp-shell.is-dark .bdmp-load-older {
  background: #202329;
  color: #e2e4e8;
}

.bdmp-shell.is-dark .bdmp-static-media-icon {
  background: #282536;
  color: #b9b0ed;
}

.bdmp-shell.is-dark .bdmp-search-button {
  color: #c3c6cc;
}

.bdmp-shell.is-dark .bdmp-search-date-toggle {
  color: #a2a8b2;
}

.bdmp-shell.is-dark .bdmp-search-date-toggle:hover,
.bdmp-shell.is-dark .bdmp-search-date-toggle:focus-visible {
  color: #d0d3d8;
}

.bdmp-shell.is-dark .bdmp-search-button:hover,
.bdmp-shell.is-dark .bdmp-search-button:focus-visible {
  background: #24272d;
}

  .bdmp-shell {
    border-radius: 26px!important;
}

@media (max-width: 819px) {

  .bdmp-shell {
    border-radius: 0px!important;
}

  .bdmp-header {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .bdmp-footer {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(122px, env(safe-area-inset-left));
  }

  .bdmp-header {
    min-height: 55px;
  }

  .bdmp-startup-toggle {
    font-size: 11px;
  }

  .bdmp-capture,
  .bdmp-history-toggle-wrap,
  .bdmp-date-sessions,
  .bdmp-empty-history {
    width: calc(100% - 20px);
  }

  .bdmp-capture {
    min-height: 225px;
    padding-top: 18px;
  }

  .bdmp-date-header {
    padding-right: 12px;
    padding-left: 12px;
  }

  .bdmp-footer {
    min-height: 64px;
    gap: 9px;
  }

  .bdmp-close {
    left: 12px;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    min-width: 96px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 18px;
    background: linear-gradient( to right, #4a2d9d, #804cf9 95% ) !important;
    top: 13px;
  }

  .bdmp-search-input {
    font-size: 16px;
  }

  .splitter-mobile-controls.bdmp-splitter-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px;
  }

  .bdmp-splitter-controls .splitter-drag-handle {
    min-width: 0;
  }

  .bdmp-search-area {
    display: flex;
    flex-direction: row-reverse;
  }

  .bdmp-scroll {
    scroll-behavior: auto;
    display: flex;
    flex-direction: column;
   justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bdmp-overlay,
  .bdmp-shell,
  .bdmp-static-block,
  .bdmp-close,
  .bdmp-desktop-launcher,
  .bdmp-mobile-launcher {
    transition: none;
  }


  .bdmp-scroll {
    scroll-behavior: auto;
  }
}

/* BrainDump addressed visibility and footer filter. */
.bdmp-shell:has(> .bdmp-addressed-filter-row) {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.bdmp-addressed-filter-row {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border-top:1px solid var(--bdmp-border);
  background:var(--bdmp-paper);
}
.bdmp-addressed-filter {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:4px 5px 4px 13px;
  border-radius:999px;
  background:#eceef1;
  color:#666b74;
}
.bdmp-addressed-filter-check {
  display:inline-grid;
  place-items:center;
  flex:0 0 15px;
  width:15px;
  height:15px;
  margin-right:7px;
  border-radius:50%;
  background:#a1a1a8;
  color:white;
  font:700 10px/1 system-ui,sans-serif;
}
.bdmp-addressed-filter-option {
  min-width:53px;
  padding:7px 12px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#60646d;
  font:600 11px/1 system-ui,sans-serif;
  cursor:pointer;
}
.bdmp-addressed-filter-option.is-active {
  background:#fff;
  color:#24272d;
  box-shadow:0 1px 4px #00000018;
}
.bdmp-footer > .bdmp-addressed-filter {
  margin:0 130px 0 12px;
}
@media (max-width:819px) {
  .bdmp-footer > .bdmp-addressed-filter {
    margin:0 0 0 8px;
  }
  .bdmp-addressed-filter-row {min-height:48px;}
  .bdmp-addressed-filter {padding-left:10px;}
  .bdmp-addressed-filter-option {min-width:43px;padding:7px 9px;}
}
.bdmp-shell.is-hiding-addressed .day-editor [data-brain-dump-addressed="true"],
.bdmp-shell.is-hiding-addressed .bdmp-static-line.is-addressed,
.bdmp-shell.is-hiding-addressed .bdmp-static-checkitem.is-addressed,
.bdmp-shell.is-hiding-addressed .bdmp-static-checklist:has(> .bdmp-static-checklist-title.is-addressed) {
  display:none !important;
}
.bdmp-shell .day-editor .de-row--brain-dump-addressed::before,
.bdmp-shell .day-editor .de-brain-dump-addressed-item::before,
.bdmp-shell .bdmp-static-line.is-addressed::before,
.bdmp-shell .bdmp-static-checklist-title.is-addressed::before,
.bdmp-shell .bdmp-static-checkitem.is-addressed::before {
  background:#a1a1a8;
}
.bdmp-shell .bdmp-static-media.is-addressed,
.bdmp-shell .bdmp-static-divider.is-addressed {
  position:relative;
  color:#a1a1a8;
}
.bdmp-shell .bdmp-static-media.is-addressed::before,
.bdmp-shell .bdmp-static-divider.is-addressed::before {
  content:"✓";
  position:absolute;
  left:-15px;
  top:5px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#a1a1a8;
  color:white;
  display:grid;
  place-items:center;
  font:700 10px/1 system-ui,sans-serif;
  pointer-events:none;
}
.bdmp-shell .day-editor .de-brain-dump-addressed-item:not(.de-row--brain-dump-addressed) {
  position:relative;
}
.bdmp-shell .day-editor .de-brain-dump-addressed-item:not(.de-row--brain-dump-addressed)::before {
  content:"✓";
  position:absolute;
  top:3px;
  left:-15px;
  z-index:4;
  display:grid;
  place-items:center;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#a1a1a8;
  color:#fff;
  font:700 10px/1 system-ui,sans-serif;
  pointer-events:none;
}
.bdmp-shell .day-editor .de-brain-dump-addressed-item:not(.de-row--brain-dump-addressed) > :not(.de-menu) {
  opacity:.42;
}

.bdmp-shell .day-editor .de-row-menu-anchor--handle > .de-menu.de-menu-handle {
  top: 26px !important;
  right: 28px !important;
}

/* BrainDump standalone Copy icon between the burger and Move shortcut. */
.bdmp-shell .day-editor .de-row-utility .de-brain-dump-copy-shortcut {
  position:absolute;
  left:calc(100% - 4px);
  top:0;
  z-index:6;
  display:grid;
  place-items:center;
  width:18px;
  height:21px;
  padding:0;
  border:0;
  background:transparent;
  color:#777c85;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms ease;
}

.bdmp-shell .day-editor .de-row--utility-right .de-row-utility .de-row-utility-handle {
    padding-right: 12px;
}

.bdmp-shell .day-editor .de-row--utility-right .de-line-time-slot {
  margin-right: 38px !important;
}

@media (max-width: 820px) {
  .bdmp-shell .day-editor.is-mobile .de-row--utility-right .de-row-utility {
    right: 21px !important;
  }
}

.bdmp-shell .day-editor .de-row-utility .de-brain-dump-move-shortcut {
  left:calc(100% + 23px);
}
.bdmp-shell .day-editor .de-row--utility-right:is(:hover,.focused,.de-row--menu-open) .de-brain-dump-copy-shortcut,
.bdmp-shell .day-editor .de-row-utility .de-brain-dump-copy-shortcut:focus-visible {
  opacity:1;
  pointer-events:auto;
}
.bdmp-shell .day-editor .de-row-utility .de-brain-dump-copy-shortcut:hover {
  color:#353843;
}

/* Addressed action in the burger menu's top tab, next to the X. */
.de-brain-dump-addressed-menu-toggle {
  position:absolute;
  right:calc(100% + 7px);
  top:4px;
  width:max-content;
  border:1px solid #e0e1e5;
  border-radius:999px;
  background:#f1f2f4;
  color:#555a63;
  padding:6px 11px;
  font:600 11px/1.1 system-ui,sans-serif;
  cursor:pointer;
}
.de-brain-dump-addressed-menu-toggle[aria-pressed="true"] {
  background:#e6e7ea;
  color:#454950;
}

/* BrainDump de-menu: Addressed belongs in Editing, not beside the X. */
.de-menu .de-brain-dump-addressed-menu-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px 5px 6px!important;
  border: 1px solid #dddddf;
  border-radius: 999px;
  background: #ededf0;
  color: #444750;
  font: 500 11px/1.2 system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.de-menu .de-brain-dump-addressed-menu-toggle[aria-pressed="true"] {
  background: #ede7ff!important;
  border-color: #d6c9ff!important;
}
.de-brain-dump-addressed-pill-circle {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1.5px solid #a1a1a8;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  font: 700 10px/1 system-ui, sans-serif;
}
.de-brain-dump-addressed-menu-toggle[aria-pressed="true"]
  .de-brain-dump-addressed-pill-circle {
  background: #a1a1a8;
  border-color: #a1a1a8;
  color: #fff;
}

/* Keep the confirmed-copy icon visible for the full second, even when
   hover or text focus has moved away from that row. */
.bdmp-shell .day-editor .de-row-utility
  .de-brain-dump-copy-shortcut.is-copied {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Desktop: search icon, then filter. During search the input expands
   and the filter stays at the right, next to the Close-button space. */
@media (min-width: 820px) {
  .bdmp-footer {
    justify-content: flex-start;
    gap: 10px;
  }
  .bdmp-footer:not(.is-search-open) .bdmp-search-area {
    flex: 0 0 auto;
  }
  .bdmp-footer > .bdmp-addressed-filter {
    margin: 0 !important;
    flex: 0 0 auto;
  }
  .bdmp-footer.is-search-open .bdmp-search-area {
    flex: 1 1 auto;
    min-width: 0;
  }
  .bdmp-footer.is-search-open > .bdmp-addressed-filter {
    margin-left: auto !important;
  }
}

/* Mobile: Close stays at the left; the addressed filter precedes
   the magnifying glass. While searching, only the search input remains
   in this footer; the filter appears in its own row above. */
@media (max-width: 819px) {
  .bdmp-footer {
    justify-content: flex-end;
    gap: 8px;
  }
  .bdmp-footer > .bdmp-addressed-filter {
    order: 1;
    flex: 0 0 auto;
    margin: 0 !important;
  }
  .bdmp-footer > .bdmp-search-area {
    order: 2;
    flex: 0 0 42px;
    min-width: 42px;
    margin: 0;
  }
  .bdmp-footer.is-search-open > .bdmp-search-area {
    flex: 1 1 auto;
    min-width: 0;
  }
  .bdmp-footer.is-search-open > .bdmp-addressed-filter {
    display: none;
  }
}


/* History-only Item Groups: live DayEditor border radius (10px), color
   (#efefef), and marker-gutter geometry. Ordinary deRows are untouched. */
.bdmp-static-checklist.is-preview-collapsed {
  position: relative;
  box-sizing: border-box;
  margin: 12px 8px 10px 30px;
  padding: 0px;
  min-height: 36px;
  border: 1px solid #efefef;
  border-radius: 10px;
}
.bdmp-static-checklist.is-preview-collapsed.is-parent-marked {
  margin-left: 53px;
}
.bdmp-static-checklist-title.is-preview-collapsed {
  display: block;
  min-height: 34px;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 9px;
  color: #252a31;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bdmp-static-checklist.is-parent-checked .bdmp-static-checklist-title {
  opacity: 0.4;
}
.bdmp-static-checklist-parent-marker.de-checklist-marker {
  position: absolute;
  top: 8px;
  left: -23px;
  width: 19px;
  height: 19px;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
}
.bdmp-static-checklist-parent-marker.de-checklist-marker.check {
  border-color: #cfcfcf;
  border-radius: 6px;
  font-size: 11px;
}
.bdmp-static-checklist-parent-marker.de-checklist-marker.check.checked {
  background: #e9e9e9;
}
.bdmp-static-checklist-parent-marker.de-checklist-marker.bullet {
  font-size: 18px;
  line-height: 15px;
}
.bdmp-static-checklist-parent-marker.de-checklist-marker.number {
  width: 20px;
  font-size: 13px;
  border-radius: 0;
}
.bdmp-shell.is-dark .bdmp-static-checklist.is-preview-collapsed {
  border-color: var(--bdmp-border);
}
.bdmp-shell.is-dark .bdmp-static-checklist-title.is-preview-collapsed {
  color: #e4e6ea;
}

/* Remove ONLY hyperlink preview's outer media border. Iconography stays put
   until the separate hyperlink thread changes it. Padding preserves alignment. */
.bdmp-static-media.is-website {
  border: 0;
  padding: 8px 10px;
}
.bdmp-static-divider {
  min-height: 22px;
  margin: 6px 10px;
  gap: 8px;
  color: #858b95;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: none;
}
.bdmp-static-divider::before { max-width: 24px; }
.bdmp-static-divider > span:empty::after { content: "Divider"; opacity: .65; }

/* Share the existing global visual-viewport coordinator with the mobile
   BrainDump portal, rather than measuring the keyboard a second time. */
@media (max-width: 819px) {
  .bdmp-overlay {
    inset: auto 0 auto 0;
    top: var(--tw-vvtop, 0px);
    height: var(--tw-vvh, 100dvh);
    min-height: var(--tw-vvh, 100dvh);
    max-height: var(--tw-vvh, 100dvh);
    overflow: hidden;
    box-sizing: border-box;
  }
  .bdmp-overlay .bdmp-shell {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }
}

/* C5 universal DnD: expose the Planner underneath without unmounting the
   Brain Dump source while an active Brain Dump drag is in flight. */
.bdmp-overlay.is-dnd-detached {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

.bdmp-overlay.is-dnd-detached .bdmp-shell {
  pointer-events: none !important;
}

/* The Queue group picker is portalled to body but normally sits behind
   BrainDump (100080 vs. 1000000). Lift it only while BrainDump is open. */
body:has(.bdmp-overlay) .bd-queue-destination-backdrop {
  z-index: 1005001 !important;
}
body:has(.bdmp-overlay) .bd-queue-destination-dialog {
  z-index: 1005002 !important;
}

.bdmp-move-preview-notice,
.bdmp-move-return-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483001;
  max-width: min(560px, calc(100vw - 28px));
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(36, 30, 54, .94);
  color: white;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .17);
  font: 600 12px/1.4 system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
}
.bdmp-move-preview-notice {
  top: max(20px, env(safe-area-inset-top));
}
.bdmp-move-return-toast {
  bottom: max(28px, env(safe-area-inset-bottom));
  background: #6842ec;
}


/*
src/styles/legacyMigrationGate.css
*/

.legacy-migration-gate {
  position: fixed;
  inset: 0;
  z-index: 9999998;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(28px + env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(111, 63, 242, 0.12),
      transparent 42%
    ),
    rgba(247, 248, 252, 0.68);
  color: #111827;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.legacy-migration-card {
  box-sizing: border-box;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

.legacy-migration-announcement {
  color: #6f3ff2;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legacy-migration-taskwand-logo {
  display: block;
  width: min(130px, 24vw);
  height: auto;
}

.legacy-migration-logo-and-announcement-bar {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

#legacy-migration-step-title h3 {
  letter-spacing: 1.2;
}

.legacy-migration-kronikal-button-and-logo-bar {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.legacy-migration-kronikal-button-and-logo-bar
  .legacy-migration-open-planner {
  margin: 0;
}

.legacy-migration-kronikal-logo {
  display: block;
  width: 120px;
  max-width: 30%;
  height: auto;
  flex: 0 1 auto;
}

.legacy-migration-card h3 {
  margin: 0 0 18px;
  color: #aeb1b8;
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1;
  font-weight: 700!important;
  letter-spacing: -0.035em;
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid rgb(207, 207, 207);
  letter-spacing: .15em;
}

.legacy-migration-step-card h1 {
  margin: 0 0 10px;
  color: #111827;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.kp-wrap-together{
    white-space: nowrap;
}

.legacy-migration-card p {
  margin: 0 0 18px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.4;
}

.legacy-migration-card strong {
  color: #111827;
}

.legacy-migration-card .legacy-migration-sync-button {
  box-sizing: border-box;
  display: flex !important;
  width: min(100%, 430px);
  min-height: 64px;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 26px 0 18px;
  padding: 9px 11px 9px 17px;
  border: 0;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #6f3ff2, #3374ff) !important;
  box-shadow: 0 10px 24px rgba(84, 72, 225, 0.24);
  color: #fff;
  cursor: pointer;
  letter-spacing: normal;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.legacy-migration-sync-identity {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.legacy-migration-google-drive-icon {
  display: block;
  width: 17px;
  height: auto;
  flex: 0 0 17px;
}

.legacy-migration-sync-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.legacy-migration-sync-title {
  color: #fff;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
}

.legacy-migration-sync-subtitle {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.legacy-migration-sync-action {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-left: auto;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.legacy-migration-cloud-sync-icon {
  display: block;
  width: 27px;
  height: auto;
  flex: 0 0 27px;
  color: #fff;
}

.legacy-migration-sync-action-label {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.legacy-migration-card .legacy-migration-open-planner {
  box-sizing: border-box;
  display: flex;
  width: 240px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border: 0;
  border-radius: 999px !important;
  background: #111827 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  color: #fff !important;
  font:
    700 14px/1.2 Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
  text-align: center;
  text-decoration: none !important;
}

.legacy-migration-sync-button:hover,
.legacy-migration-open-planner:hover {
  filter: brightness(1.05);
}

.legacy-migration-sync-button:focus-visible,
.legacy-migration-open-planner:focus-visible {
  outline: 3px solid rgba(51, 116, 255, 0.28);
  outline-offset: 3px;
}

.legacy-migration-sync-button:disabled {
  box-shadow: none;
  cursor: wait;
  opacity: 0.78;
}

.legacy-migration-sync-status {
  margin: 0 0 22px;
  padding: 15px 17px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 14px;
  background: #f0fdf4;
}

.legacy-migration-sync-status-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #166534;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

.legacy-migration-sync-status-main > span:first-child {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
}

.legacy-migration-account {
  margin-top: 7px;
  padding-left: 29px;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.legacy-migration-action-message {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.legacy-migration-action-message.is-success {
  background: #eff6ff;
  color: #1d4ed8;
}

.legacy-migration-action-message.is-error {
  background: #fff1f2;
  color: #be123c;
}

.legacy-migration-card .legacy-migration-device-note {
  margin-top: 6px;
  padding: 17px 18px;
  border-left: 4px solid #8b5cf6;
  border-radius: 0 12px 12px 0;
  background: #e4e1f2;
  color: #4c1d95;
  font-size: 12px;
}

.legacy-migration-card .legacy-migration-device-note strong {
  color: #4c1d95;
}

.legacy-migration-open-planner {
  margin-bottom: 0;
  background: #111827;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

@media (max-width: 600px) {

  .legacy-migration-card .legacy-migration-device-note {
    font-size: 11px;
  }

  .legacy-migration-app-preview {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

  .legacy-migration-gate {
    padding:
      max(20px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }

  .legacy-migration-card {
    padding: 30px 22px 60px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
  }

.legacy-migration-card h1 {
    font-size: 22px;
  }

  .legacy-migration-card p {
    margin: 0 0 12px;
    font-size: 13px;
  }

  .legacy-migration-card .legacy-migration-sync-button {
    width: 100%;
    gap: 8px;
    padding: 9px 9px 9px 12px;
  }

  .legacy-migration-card .legacy-migration-sync-button {
    margin: 12px 0 18px;
    }

  .legacy-migration-google-drive-icon {
    width: 14px;
    flex-basis: 14px;
  }

  .legacy-migration-sync-identity {
    gap: 8px;
  }

  .legacy-migration-sync-title {
    font-size: 14px;
  }

  .legacy-migration-sync-subtitle {
    font-size: 11px;
  }

  .legacy-migration-sync-action {
    min-height: 42px;
    gap: 6px;
    padding: 0 16px;
    border-radius: 999px;
    margin-right: 4px;
  }

  .legacy-migration-cloud-sync-icon {
    width: 23px;
    flex-basis: 23px;
  }

  .legacy-migration-sync-action-label {
    font-size: 12px;
  }
}
/* === src/components/powerupsIncreaseNowModal.css === */

.powerups-increase-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000010;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(23, 35, 52, 0.52);
  backdrop-filter: blur(4px);
}

.powerups-increase-dialog {
  width: min(460px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 26px;
  border: 1px solid #dce3ec;
  border-radius: 24px;
  background: #ffffff;
  color: #26384e;
  box-shadow: 0 24px 80px rgba(26, 43, 66, 0.28);
}

.powerups-increase-kicker {
  margin-bottom: 8px;
  color: #3378f6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.powerups-increase-dialog h2 {
  margin: 0;
  color: #17243a;
  font-size: 28px;
  line-height: 1.05;
}

.powerups-increase-dialog p {
  margin: 14px 0 0;
  color: #52647a;
  font-size: 15px;
  line-height: 1.55;
}

.powerups-increase-demo-note {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f8fb;
  color: #7a8798;
  font-size: 12px;
  line-height: 1.35;
}

.powerups-increase-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.powerups-increase-actions button {
  min-width: 96px;
  min-height: 42px;
  border-radius: 12px;
  padding: 0 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.powerups-increase-cancel {
  border: 1px solid #d4dce7;
  background: #ffffff;
  color: #52647a;
}

.powerups-increase-okay {
  border: 1px solid #3378f6;
  background: #3378f6;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(51, 120, 246, 0.24);
}

.powerups-increase-actions button:focus-visible {
  outline: 3px solid rgba(51, 120, 246, 0.25);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .powerups-increase-backdrop {
    padding: 12px;
  }

  .powerups-increase-dialog {
    width: 100%;
    padding: 22px 18px;
    border-radius: 20px;
  }

  .powerups-increase-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .powerups-increase-actions button {
    min-width: 0;
  }
}
/* === src/components/powerupsIncreaseNowModal.css === */

:root {
  --powerups-blue: #3378f6;
  --powerups-blue-soft: #eaf2ff;
  --powerups-purple: #9665ff;
  --powerups-purple-soft: #faf8ff;
  --powerups-ink: #17243a;
  --powerups-text: #42566d;
  --powerups-muted: #96a5b8;
  --powerups-line: #dce3ec;
}

.powerups-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 22px;
  background: rgba(40, 62, 86, 0.68);
  backdrop-filter: blur(3px);
}

.powerups-modal {
  width: min(1240px, calc(100vw - 44px));
  height: min(860px, calc(100dvh - 44px));
  max-height: min(860px, calc(100dvh - 44px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(214, 222, 232, 0.95);
  border-radius: 30px;
  background: #ffffff;
  color: var(--powerups-text);
  box-shadow: 0 28px 90px rgba(20, 36, 57, 0.28);
}

.powerups-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px 14px;
  position: relative;
}

.powerups-modal-header h1 {
  margin: 0;
  color: var(--powerups-ink);
  font-size: clamp(32px, 3vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.powerups-modal-header p {
  margin: 12px 0 0;
  color: #8492a5;
  font-size: clamp(14px, 1.45vw, 19px);
  line-height: 1.3;
}

.powerups-modal-close {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  border-radius: 50%;
  padding: 0 1px 2px 0;
  background: #2d3f55;
  color: #ffffff;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.powerups-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 4px 30px 22px;
  border-bottom: 7px solid #e1e6ee;
}

.powerups-tabs button {
  position: relative;
  border: 0;
  padding: 14px 12px 16px;
  background: transparent;
  color: #b0bbc9;
  font: inherit;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800;
  cursor: pointer;
}

.powerups-tabs button.is-active {
  color: var(--powerups-blue);
}

.powerups-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 7px;
  background: var(--powerups-blue);
}

.powerups-modal-body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 30px 30px;
  overflow: hidden;
}

.powerups-monthly-grid {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 22px;
  align-items: stretch;
}

.powerups-monthly-left {
  align-self: start;
  min-width: 550px;
  max-width: 650px;
}

.powerups-billing-panel {
  min-width: 0;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--powerups-line);
  border-radius: 24px;
  background: #ffffff;
}

.powerups-slider-stage {
  padding: 4px 10px 2px;
  position: relative;
}

.powerups-slider-track-wrap {
  position: relative;
  height: 125px;
  margin: 0 18px;
  padding-top: 74px;
  box-sizing: border-box;
}

.powerups-next-billing-bubble {
  position: absolute;
  top: 0;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  border-radius: 999px;
  padding: 8px 11px;
  background: var(--powerups-blue);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(51, 120, 246, 0.2);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.powerups-next-billing-bubble:active {
  cursor: grabbing;
}

.powerups-next-billing-bubble::after {
  content: "";
  position: absolute;
  left: var(--powerups-bubble-anchor, 50%);
  top: 100%;
  width: 3px;
  height: 32px;
  transform: translateX(-50%);
  background: var(--powerups-blue);
}

.powerups-next-billing-bubble .billing-bubble-arrow-circles {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.52);
  font-size: 16px;
  line-height: 1;
}

.powerups-next-billing-bubble .date-in-slider-pill {
  position: absolute;
  top: auto;
  right: auto;
  left: auto;
  bottom: 0px;
  z-index: 6;
  width: 100%;
  max-width: calc(100% - 24px);
  margin: -17px auto 2px auto;
  box-sizing: border-box;
  border-radius: 999px;
  z-index: 6;
  padding: 5px 10px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  text-align: center;
  font-size: 11px;
  line-height: 1;
}

.powerups-next-billing-bubble strong {
  font-size: 16px;
  margin-top: -14px;
  white-space: nowrap;
}

.powerups-current-marker {
  position: absolute;
  top: 67px;
}

.powerups-current-label {
  position: absolute;
  left: 0;
  bottom: -3px;
  z-index: 8;
  min-width: 75px;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 3px 2px;
  background: #41566f;
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.powerups-current-dot {
  position: absolute;
  left: 0;
  top: 17px;
  z-index: 4;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #41566f;
}

.powerups-slider-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 82px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe2ea;
}

.powerups-slider-current-fill,
.powerups-slider-change-fill {
  position: absolute;
  top: 0;
  bottom: 0;
}

.powerups-slider-current-fill {
  left: 0;
  background: #41566f;
}

.powerups-slider-change-fill {
  z-index: 2;
  background: var(--powerups-blue);
}

.powerups-slider-change-fill.is-decrease {
  opacity: 0.35;
}

.powerups-price-range {
  position: absolute;
  left: -12px;
  right: auto;
  top: 70px;
  z-index: 5;
  width: calc(100% + 24px);
  height: 30px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.powerups-price-range::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}

.powerups-price-range::-moz-range-track {
  height: 5px;
  background: transparent;
}

.powerups-price-range::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  appearance: none;
  -webkit-appearance: none;
  border: 4px solid var(--powerups-blue);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(51, 120, 246, 0.2);
}

.powerups-price-range::-moz-range-thumb {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 4px solid var(--powerups-blue);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(51, 120, 246, 0.2);
}

.powerups-price-range:focus-visible {
  outline: none;
}

.powerups-price-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(51, 120, 246, 0.18);
}

.powerups-slider-labels {
  position: absolute;
  left: -12px;
  right: 0;
  top: 100px;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc(100% + 24px);
}

.powerups-slider-costlabel {
  font-weight: 400;
}

.powerups-slider-costlabel:nth-child(even) {
  color: rgb(172, 172, 172)!important;
  font-size: 11px;
  margin-top: 3px;
}

.powerups-slider-costlabel.is-current,
.powerups-slider-costlabel.is-next {
  font-weight: 800;
}

.powerups-slider-costlabel.is-next {
  color: var(--powerups-blue)!important;
}

.powerups-slider-costlabel.is-custom {
  font-size: 9px;
  white-space: nowrap;
}

.powerups-custom-support {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 10px 0;
  padding: 12px 14px;
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  background: #f8faff;
}

.powerups-custom-support-label {
  color: #62758d;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.powerups-custom-support-input-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid #ccd7e5;
  border-radius: 10px;
  background: #ffffff;
  color: #344a63;
  font-size: 14px;
  font-weight: 800;
}

.powerups-custom-support-input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #253b54;
  font: inherit;
}

.powerups-custom-support-thanks {
  color: #8c9bae;
  font-size: 10px;
  font-weight: 600;
}

.powerups-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.powerups-summary-card {
  position: relative;
  min-width: 0;
  min-height: 160px;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--powerups-line);
  border-radius: 18px;
  background: #fbfcfe;
}

.powerups-summary-heading {
  display: flex;
  flex-direction: column;
  min-height: 44px;
  color: #4c6077;
  font-size: 13px;
  line-height: 1.2;
}

.powerups-summary-card.has-action .powerups-summary-heading {
  padding-right: 94px;
}

.powerups-summary-heading strong {
  margin-top: 2px;
  color: inherit;
  font-size: 16px;
}

.powerups-summary-grid .powerups-summary-card:last-child .powerups-summary-heading,
.powerups-summary-grid .powerups-summary-card:last-child .powerups-summary-price {
  color: var(--powerups-blue);
}

.powerups-summary-body {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.powerups-summary-price {
  display: flex;
  align-items: flex-start;
  color: #3e536c;
}

.powerups-summary-price span {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
}

.powerups-summary-price strong {
  font-size: 38px;
  line-height: 1;
}

.powerups-summary-divider {
  width: 1px;
  height: 48px;
  background: #d8dfe8;
}

.powerups-summary-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  color: #738195;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.powerups-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  box-sizing: border-box;
  border: 2px solid #e5ddff;
  border-radius: 999px;
  padding: 3px 11px;
  background: #ffffff;
  color: #405168;
  font-size: 13px;
  white-space: nowrap;
}

.powerups-summary-card.has-action 
.powerups-count-pill {
   color: var(--powerups-blue); 
   border-color: var(--powerups-blue);
}  

.powerups-summary-action {
  position: absolute;
  top: 14px;
  right: 14px;
}

.powerups-summary-action button {
  border: 1px solid var(--powerups-blue);
  border-radius: 10px;
  padding: 8px 11px;
  background: var(--powerups-blue);
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.powerups-slider-footnote {
  margin-top: 12px;
  color: #9aa7b7;
  font-size: 11px;
  line-height: 1.35;
}

.powerups-status-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  padding: 10px 18px 18px 30px;
  border: 2px solid #e4dcff;
  border-radius: 24px;
  background: #ffffff;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.powerups-status-pill-small-title {
  position: sticky;
  top: 0px;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: -17px auto 2px auto;
  box-sizing: border-box;
  border-radius: 999px;
  z-index: 6;
  padding: 7px 12px 7px 18px;
  background: var(--powerups-purple);
  color: white;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3em;
  line-height: 1;
  text-transform: uppercase;
}

.powerups-status-pill {
  position: sticky;
  top: 15px;
  z-index: 5;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: -5px auto 18px;
  box-sizing: border-box;
  border: 2px solid #e5ddff;
  border-radius: 999px;
  padding: 10px 21px 8px 21px;
  background: #ffffff;
  color: #394e66;
  text-align: center;
  font-size: 15px;
  line-height: 1.2;
}

.powerups-status-pill strong {
  color: var(--powerups-purple);
  font-size: 15px;
}

.powerups-pending-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 3px 0 30px;
  color: #52647a;
  text-align: left;
  font-size: 12px;
}

.powerups-pending-note > span {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--powerups-purple);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.powerups-list-headings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.powerups-list-headings > div {
  display: flex;
  flex-direction: column;
  color: #506279;
  font-size: 13px;
  line-height: 1.08;
}

.powerups-list-headings > div:last-child {
  align-items: flex-end;
  color: var(--powerups-purple);
  text-align: right;
}

.powerups-list-headings strong {
  margin-top: 2px;
  font-size: 17px;
}

.powerups-selection-message {
  margin: 0 0 10px;
  border: 1px solid #ffdfdf;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff7f7;
  color: #c75959;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.powerups-list {
  display: grid;
  gap: 9px;
}

.powerups-list-item {
  overflow: hidden;
  border: 1px solid #ece8f8;
  border-radius: 12px;
  background: var(--powerups-purple-soft);
}

.powerups-list-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  box-sizing: border-box;
}

.powerups-demo-checkbox {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: 6px;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  padding:0;
}

.powerups-demo-checkbox.is-current {
  border: 2px solid #e5def7;
  background: transparent;
  color: #ffffff;
}

.powerups-demo-checkbox.is-current.is-checked {
  border-color: #696789;
  background: #696789;
}

.powerups-demo-checkbox.is-pending {
  border: 2px solid var(--powerups-purple);
  background: #ffffff;
  color: #ffffff;
  cursor: pointer;
}

.powerups-demo-checkbox.is-pending.is-checked {
  background: var(--powerups-purple);
}

.powerups-expand-button,
.powerups-label-button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.powerups-expand-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #d0c8ef;
  font-size: 30px;
  line-height: 1;
}

.powerups-list-item.is-expanded .powerups-expand-button span {
  transform: rotate(180deg);
}

.powerups-expand-button span {
  display: block;
  transition: transform 160ms ease;
}

.powerups-label-button {
  min-width: 0;
  padding: 0;
  color: #1f2d42;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.powerups-description-panel {
  margin: 0 10px 10px 52px;
  border-top: 1px solid #ebe5f8;
  padding: 10px 2px 2px;
  color: #52647a;
  font-size: 12px;
  line-height: 1.5;
  max-width: 350px;
}

.powerups-lifetime-panel {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 4px 2px 2px;
}

.powerups-lifetime-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 20px;
}

.powerups-lifetime-eyebrow {
  color: var(--powerups-purple);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.powerups-lifetime-intro h2 {
  margin: 6px 0 0;
  color: var(--powerups-ink);
  font-size: 28px;
  line-height: 1.08;
}

.powerups-lifetime-intro p {
  margin: 0;
  color: #7b899b;
  font-size: 13px;
  line-height: 1.5;
}

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

.powerups-lifetime-card {
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 16px;
  box-sizing: border-box;
  border: 2px solid #e6eaf0;
  border-radius: 20px;
  padding: 20px;
  background: #fbfcfe;
}

.powerups-lifetime-card.is-selected {
  border-color: var(--powerups-purple);
  background: #faf7ff;
  box-shadow: 0 10px 28px rgba(150, 101, 255, 0.12);
}

.powerups-lifetime-card h3 {
  margin: 0;
  color: var(--powerups-ink);
  font-size: 19px;
}

.powerups-lifetime-card p {
  margin: 8px 0 0;
  color: #758398;
  font-size: 13px;
  line-height: 1.4;
}

.powerups-lifetime-price {
  color: var(--powerups-purple);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.powerups-lifetime-card button {
  grid-column: 1 / -1;
  min-height: 42px;
  border: 1px solid var(--powerups-purple);
  border-radius: 12px;
  padding: 0 16px;
  background: var(--powerups-purple);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.powerups-lifetime-card.is-selected button {
  background: #7f50e8;
}

.powerups-lifetime-note {
  margin-top: 16px;
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  padding: 13px 15px;
  background: #f7f9fb;
  color: #65768b;
  font-size: 12px;
  line-height: 1.45;
}

.powerups-modal button:focus-visible {
  outline: 3px solid rgba(51, 120, 246, 0.23);
  outline-offset: 2px;
}

@media (max-width: 1040px) and (min-width: 821px) {
  .powerups-monthly-grid {
    grid-template-columns: minmax(390px, 0.9fr) minmax(420px, 1.1fr);
    gap: 16px;
  }

  .powerups-modal-header,
  .powerups-modal-body {
    padding-left: 22px;
    padding-right: 22px;
  }

  .powerups-tabs {
    margin-left: 22px;
    margin-right: 22px;
  }

  .powerups-billing-panel {
    padding: 15px;
  }

  .powerups-summary-card {
    padding: 13px;
  }

  .powerups-summary-body {
    gap: 8px;
  }

  .powerups-summary-price strong {
    font-size: 32px;
  }
}

@media (max-width: 1020px) {
  .powerups-modal-backdrop {
    align-items: stretch;
    padding: 10px;
  }

  .powerups-next-billing-bubble::after {
    height: 32px!important;
  }

  .powerups-modal {
    width: 100%;
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 24px;
  }

  .powerups-modal-header {
    padding: 22px 20px 10px;
  }

  .powerups-modal-header h1 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .powerups-modal-header p {
    margin-top: 9px;
    font-size: 13px;
  }

  .powerups-modal-close {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 20px;
    font-weight: 300;
  }

  .powerups-tabs {
    margin: 6px 20px 18px;
    border-bottom-width: 5px;
  }

  .powerups-tabs button {
    padding: 12px 6px 14px;
    font-size: clamp(18px, 5.2vw, 28px);
  }

  .powerups-tabs button.is-active::after {
    bottom: -5px;
    height: 5px;
  }

  .powerups-modal-body {
    overflow-y: auto;
    padding: 0 20px 24px;
  }

  .powerups-monthly-grid {
    height: auto;
    display: block;
  }

  .powerups-monthly-left {
    margin-bottom: 22px;
    min-width: 0px;
    max-width: none;

  }

  .powerups-status-panel,
  .powerups-lifetime-panel {
    max-height: none;
    overflow: visible;
  }

  .powerups-lifetime-intro {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .powerups-lifetime-grid {
    grid-template-columns: 1fr;
  }

    .powerups-description-panel {
    max-width: 100%;
  }

  .powerups-status-pill {
    margin-bottom: 8px;
  }

}

@media (max-width: 560px) {
  .powerups-modal-backdrop {
    padding: 0;
  }

  .powerups-modal {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .powerups-modal-header {
    padding: 18px 16px 8px;
  }

  .powerups-modal-header h1 {
    font-size: 34px;
  }

  .powerups-modal-close {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 20px;
  }

  .powerups-tabs {
    margin: 4px 16px 16px;
  }

  .powerups-tabs button {
    font-size: 20px;
  }

  .powerups-modal-body {
    padding: 0 16px 22px;
  }

  .powerups-billing-panel {
    padding: 15px 12px;
    border-radius: 20px;
  }

  .powerups-slider-stage {
    padding-left: 0;
    padding-right: 0;
  }

  .powerups-slider-track-wrap {
    margin-left: 8px;
    margin-right: 8px;
  }

  .powerups-next-billing-bubble {
    gap: 5px;
    padding: 7px 8px;
  }

  .powerups-next-billing-bubble span {
    width: 21px;
    height: 21px;
    font-size: 13px;
  }

  .powerups-next-billing-bubble strong {
    font-size: 13px;
  }

  .powerups-summary-grid {
    gap: 8px;
  }

  .powerups-summary-card {
    min-height: 150px;
    padding: 12px 10px;
  }

  .powerups-summary-heading {
    min-height: 42px;
    font-size: 11px;
  }

  .powerups-summary-card.has-action .powerups-summary-heading {
    padding-right: 66px;
  }

  .powerups-summary-heading strong {
    font-size: 14px;
  }

  .powerups-summary-body {
    grid-template-columns: auto 1px minmax(0, 1fr);
    gap: 7px;
  }

  .powerups-summary-price span {
    font-size: 15px;
  }

  .powerups-summary-price strong {
    font-size: 31px;
  }

  .powerups-summary-details {
    gap: 5px;
    font-size: 9px;
  }

  .powerups-count-pill {
    min-height: 25px;
    padding: 2px 7px;
    font-size: 10px;
  }

  .powerups-summary-action {
    top: 9px;
    right: 8px;
    width: 60px;
  }

  .powerups-summary-action button {
    padding: 6px 7px;
    font-size: 9px;
  }

  .powerups-status-panel {
    padding: 28px 10px 12px;
    border-radius: 20px;
  }

  .powerups-status-pill {
    font-size: 13px;
  }

  .powerups-status-pill strong {
    font-size: 16px;
  }

  .powerups-pending-note {
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.35;
  }

  .powerups-list-headings strong {
    font-size: 14px;
  }

  .powerups-list-headings span {
    font-size: 11px;
  }

  .powerups-list-row {
    grid-template-columns: 30px 27px minmax(0, 1fr) 30px;
    gap: 5px;
    padding: 6px 7px;
  }

  .powerups-demo-checkbox {
    width: 27px;
    height: 27px;
    font-size: 16px;
  }

  .powerups-expand-button {
    width: 27px;
    height: 27px;
    font-size: 26px;
  }

  .powerups-label-button {
    font-size: 11px;
  }

  .powerups-description-panel {
    margin-left: 43px;
    font-size: 11px;
    max-width: 100%;
  }
}