/* -----------------------------------
 * Summary card
 * ----------------------------------- */

#jw-track-summary-card .jw-home-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#jw-track-summary-card .jw-home-summary-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#jw-track-summary-card .jw-home-summary-label {
  font-size: 12px;
  opacity: 0.7;
}

#jw-track-summary-card .jw-home-summary-value {
  font-size: 16px;
  font-weight: 600;
}

#jw-track-summary-card .jw-home-summary-bottom {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}


.jw-tick {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}
.jw-tick svg {
  width: 14px;
  height: 14px;
}

.jw-plan-meta-row {
  margin-top: 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

.jw-badge-plan-meta {
  font-size: 11px;
}


.jw-track-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 4px;
}

.jw-track-controls-left,
.jw-track-controls-right {
  display: flex;
  align-items: center;
}

#jw-track-range-bar {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}




/* ====================================
   DRAG TO RE-ORDER & SAVE
   ==================================== */

.jw-drag-handle-top {
    width: 25px;           /* smaller, fixed width */
    display: flex;
    justify-content: center;
    margin: -6px auto 8px; /* top margin negative to pull it up a bit, auto centers horizontally, bottom spacing */
    cursor: grab;
    color: var(--jw-card-paused-border);
}

.jw-drag-handle-top:active {
    cursor: grabbing;
}


/* ===========================================
   TRACK SCREEN OVERRIDE OF GLOBAL ELEMENTS
   =========================================== */

/* Only for headers inside Track tabs */
#jw-track-tab-content .jw-section-header {
  display: flex;
  flex-direction: column; /* stack items vertically */
  align-items: flex-start; /* align left */
  gap: 8px; /* spacing between title, subtitle, and pills */
  align-items: center;
  padding: 0px;
}

/* Left wrapper (optional) */
#jw-track-tab-content .jw-section-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Reduce top/bottom padding only for cards inside the track screen lists */
#jw-track-good-list .jw-card,
#jw-track-bad-list  .jw-card
{
	padding-top: var(--jw-space-3);
    padding-bottom: var(--jw-space-3);
    padding-left:  var(--jw-space-3);
    padding-right: var(--jw-space-3);
    margin: 4px 0px !important;
}


#jw-track-sheet-good-list .jw-card,
#jw-track-sheet-bad-list .jw-card
{
	padding-top: var(--jw-space-3);
    padding-bottom: var(--jw-space-3);
    padding-left:  var(--jw-space-3);
    padding-right: var(--jw-space-3);
    margin: 10px 0px !important;
}


#jw-track-sheet-good-list .jw-track-row-left,
#jw-track-sheet-bad-list .jw-track-row-left {
  flex: 0 0 auto; /* fixed width for icons */
  position: relative;
  margin-left: -12px;
}

/* ====================================
   TRACK CARD UNIFIED STYLE
   ==================================== */

/* Grid layout for plan list */
.jw-track-good-list,
.jw-track-bad-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px; /* same as library */
  padding: 0;
}

@media (min-width: 640px) {
  .jw-track-good-list,
  .jw-track-bad-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* -----------------------------------
   Plan row layout
----------------------------------- */
.jw-track-plan-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.jw-track-row-left {
  flex: 0 0 auto; /* fixed width for icons */
  position: relative;
  margin-left: -20px;
}

.jw-track-row-mid {
  flex: 1 1 0;
  min-width: 0;       /* allow truncation */
  max-width: 100%;    /* prevent overflow */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jw-track-row-right {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

/* Title + reference icon wrapper */
.jw-track-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden; 
  min-width: 0;       /* very important */
  max-width: 100%;
}

.jw-track-plan-title {
    font-size: var(--jw-fs-4);
    font-weight: 500;
    line-height: var(--jw-lh-tight);
    
    display: block;          /* remove -webkit-box for single-line truncation */
    white-space: nowrap;     /* force single line */
    overflow: hidden;        /* hide overflow */
    text-overflow: ellipsis; /* add "..." */
    
    word-break: break-all; 
}




/* Optional subtitle / chips below title */
.jw-track-row-sub {
  font-size: 12px;
  opacity: 0.75;
}

.jw-track-row-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* -----------------------------------
   Plan meta / status / actions
----------------------------------- */
.jw-track-plan-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 6px;
}

.jw-track-plan-meta {
  font-size: 11px;
  opacity: 0.7;
  flex: 0 0 auto;
}

.jw-track-plan-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  flex-shrink: 0;
}

.jw-track-plan-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Toggle accordion button */
.jw-plan-toggle-btn {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px 4px;
}

.jw-plan-toggle-btn .jw-icon {
  transition: transform 0.15s ease;
  transform-origin: 50% 50%;
}

.jw-plan-toggle-btn.is-expanded .jw-icon {
  transform: rotate(90deg);
}

/* Plan body / accordion */
.jw-track-plan-body {

}

.jw-plan-body-collapsed {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  display: none;
}

/* Plan summary */
.jw-plan-summary-row {
  font-size: var(--jw-fs-2);
  color: var(--jw-text-muted);
  opacity: 1;
  margin: 2px 0 6px;
}

/* Bulk actions */
.jw-plan-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
  justify-content: center;
}

.jw-plan-bulk-actions .jw-btn {
  font-size: 11px;
  padding: 3px 8px;
}

/* -----------------------------------
   Menus / kebab
----------------------------------- */
.jw-track-kebab {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jw-track-menu {
  position: absolute;
  top: 44px;
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  padding: 6px;
  display: none;
  z-index: 50;
}

.jw-track-menu.is-open { display: block; }

.jw-menu-item {
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
}

.jw-menu-item:hover { background: rgba(0,0,0,0.04); }
.jw-menu-item-danger { color: #AF1F24; }

/* Track open / chevron button */
.jw-track-open-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Allow menus / overlays to escape the card */
.jw-track-good-plan,
.jw-track-bad-plan,
.jw-sheet-plan {
  position: relative;
  overflow: visible;
}

/* Floating menus */
.jw-float-menu {
  position: fixed;
  min-width: 180px;
  max-width: 200px;
  background: var(--jw-card-bg);
  color: var(--jw-text);
  border: 1px solid var(--jw-tab-active-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: 6px;
  z-index: 2147483647;
  transform: translateY(2px);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}

.jw-float-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}




/* -----------------------------------
   Track card: binary done/pending state
   Applies to GOOD and BAD plan cards
----------------------------------- */

/* Make cards a stable overlay container */
.jw-track-good-plan,
.jw-track-bad-plan,
.jw-sheet-plan-good,
.jw-sheet-plan-bad {
  position: relative;
  overflow: hidden; /* keeps overlay inside rounded corners */
}

/* Ensure content sits above overlays */
.jw-track-good-plan > *,
.jw-track-bad-plan > *,
.jw-sheet-plan-good > *,
.jw-sheet-plan-bad > * {
  position: relative;
}

/* Base overlay layers (off by default) */
.jw-track-good-plan::before,
.jw-track-bad-plan::before,
.jw-sheet-plan-good::before,
.jw-sheet-plan-bad::before,
.jw-track-good-plan::after,
.jw-track-bad-plan::after,
.jw-sheet-plan-good::after,
.jw-sheet-plan-bad::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--jw-radius-2);
  opacity: 0;
}

/* ::before = tint overlay */
.jw-track-good-plan::before,
.jw-track-bad-plan::before,
.jw-sheet-plan-good::before,
.jw-sheet-plan-bad::before {
  background: transparent;
}

/* ::after = pattern overlay (used only for paused) */
.jw-track-good-plan::after,
.jw-track-bad-plan::after,
.jw-sheet-plan-good::after,
.jw-sheet-plan-bad::after {
  background: none;
}

/* ---------------------------
   DONE state
   - Soft overlay
   - Neutral inactive left border
--------------------------- */
.jw-track-good-plan.is-done,
.jw-track-bad-plan.is-done,
.jw-sheet-plan-good.is-done,
.jw-sheet-plan-bad.is-done {
  border-inline-start: 3px solid var(--jw-card-paused-overlay);
}

.jw-track-good-plan.is-done::before,
.jw-track-bad-plan.is-done::before,
.jw-sheet-plan-good.is-done::before,
.jw-sheet-plan-bad.is-done::before {
  opacity: 1;
  background: var(--jw-card-done-overlay);
}

/* ---------------------------
   PAUSED state
   - Stronger overlay
   - Diagonal pattern
--------------------------- */
.jw-track-good-plan.is-paused::before,
.jw-track-bad-plan.is-paused::before,
.jw-sheet-plan-good.is-paused::before,
.jw-sheet-plan-bad.is-paused::before {
  opacity: 1;
  background: var(--jw-card-paused-overlay);
}

/* PAUSED state: subtle inactive border */
.jw-track-good-plan.is-paused,
.jw-track-bad-plan.is-paused,
.jw-sheet-plan-good.is-paused,
.jw-sheet-plan-bad.is-paused {
  border-inline-start: 3px solid var(--jw-card-paused-border);
}

.jw-track-good-plan.is-paused.is-done,
.jw-track-bad-plan.is-paused.is-done,
.jw-sheet-plan-good.is-paused.is-done,
.jw-sheet-plan-bad.is-paused.is-done {
  border-inline-start-color: var(--jw-card-paused-border);
}


.jw-track-good-plan.is-paused::after,
.jw-track-bad-plan.is-paused::after,
.jw-sheet-plan-good.is-paused::after,
.jw-sheet-plan-bad.is-paused::after {
  opacity: 1;
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--jw-text) 5%, transparent) 0px,
    color-mix(in srgb, var(--jw-text) 5%, transparent) 2px,
    transparent 2px,
    transparent 8px
    
  );
}

/* If paused + done, paused overlay wins */
.jw-track-good-plan.is-paused.is-done::before,
.jw-track-bad-plan.is-paused.is-done::before,
.jw-sheet-plan-good.is-paused.is-done::before,
.jw-sheet-plan-bad.is-paused.is-done::before {
  background: var(--jw-card-paused-overlay);
}

/* ---------------------------
   Text + content refinements
--------------------------- */

/* Strike-through the title only when fully done */
.jw-track-good-plan.is-done .jw-track-plan-title,
.jw-track-bad-plan.is-done .jw-track-plan-title,
.jw-sheet-plan-good.is-done .jw-track-plan-title,
.jw-sheet-plan-bad.is-done .jw-track-plan-title {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
  opacity: 0.65;
}

/* Optional: reduce intensity of chips when done */
.jw-track-good-plan.is-done .jw-track-row-chips,
.jw-track-bad-plan.is-done .jw-track-row-chips,
.jw-sheet-plan-good.is-done .jw-track-row-chips,
.jw-sheet-plan-bad.is-done .jw-track-row-chips {
  opacity: 0.8;
}

/* Optional: keep reference icon and kebab fully visible */
.jw-track-good-plan.is-done .jw-track-kebab,
.jw-track-bad-plan.is-done .jw-track-kebab,
.jw-track-good-plan.is-done [data-jw-track-ref],
.jw-track-bad-plan.is-done [data-jw-track-ref],
.jw-sheet-plan-good.is-done .jw-track-kebab,
.jw-sheet-plan-bad.is-done .jw-track-kebab,
.jw-sheet-plan-good.is-done [data-jw-track-ref],
.jw-sheet-plan-bad.is-done [data-jw-track-ref] {
  opacity: 1;
}




/* -----------------------------------
 * Filters & Search (Theme + Tokens)
 * ----------------------------------- */
.jw-track-filters {
  padding: var(--jw-space-4) var(--jw-space-4) var(--jw-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--jw-space-1);
}

.jw-track-search-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--jw-border-soft);
  padding: 6px 12px;
  font-size: var(--jw-fs-3);
  line-height: var(--jw-lh);
  outline: none;
  background: var(--jw-control-bg);
  color: var(--jw-control-text);
  box-sizing: border-box;
}

.jw-track-search-input:focus {
  border-color: var(--jw-primary);
  box-shadow: 0 0 0 2px var(--jw-focus-ring);
}

/* Pills wrapper */
.jw-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.25rem 0;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  width: 100%;                     /* full width container */
  box-sizing: border-box;
  justify-content: center;
}

/* Individual pill */
.jw-filter-pill {
  flex: 0 0 auto;                  /* don't shrink */
  border-radius: 999px;
  border: 1px solid var(--jw-border-soft);
  background: var(--jw-control-bg);
  padding: 4px 10px;
  font-size: var(--jw-fs-2);
  line-height: var(--jw-lh-tight);
  cursor: pointer;
  white-space: nowrap;
  color: var(--jw-control-text);
  transition: all 0.2s ease;
}

.jw-filter-pill:hover {
  background: var(--jw-control-bg-hover);
}

/* Active pill */
.jw-filter-pill.is-active {
  border-color: var(--jw-primary);
  background: var(--jw-pill-active-bg);
  color: var(--jw-pill-active-text);
}

/* Optional: subtle horizontal scrollbar on mobile */
.jw-filter-pills::-webkit-scrollbar {
  height: 4px;
}
.jw-filter-pills::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--jw-text) 10%, transparent);
  border-radius: 2px;
}
.jw-filter-pills::-webkit-scrollbar-track {
  background: transparent;
}

/* Pills container for multiple rows (desktop) */
@media (min-width: 640px) {
  .jw-filter-pills {
    flex-wrap: wrap;  /* wrap pills naturally on wide screens */
  }
}


/* -----------------------------------
 * Good instances
 * ----------------------------------- */

.jw-good-instance {
  border-radius: 8px;
  border: 1px solid;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--jw-tab-bg);
  color: var(--jw-tab-active-text);
  border-color: var(--jw-tab-active-border);
}

.jw-good-instance-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.jw-good-instance-label {
  font-size: 12px;
  color: var(--jw-text);
}

.jw-badge-status {
    display: inline-flex;
    align-items: center;
    font-size: var(--jw-fs-1);
    line-height: var(--jw-lh-tight);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--jw-border-soft);
    background: var(--jw-surface-2);
    color: var(--jw-text);
    white-space: nowrap;
}

/* Status color accents (can be tuned) */
.jw-status-done {
    background: var(--jw-surface-2);
    color: var(--jw-text);
}

.jw-status-delayed {
    background: var(--jw-surface-2);
    color: var(--jw-text);
}

.jw-status-missed {
    background: var(--jw-surface-2);
    color: var(--jw-text);
}

.jw-status-pending {
    background: var(--jw-surface-2);
    color: var(--jw-text);
}

.jw-good-instance-count {
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--jw-text-muted);
}

.jw-count-done {
  font-weight: 600;
}

.jw-count-target {
  opacity: 0.8;
}

.jw-good-instance-actions {
    display: inline-flex;
    gap: 16px;
    margin-bottom: 4px;
    background: var(--jw-card-bg);
    border-radius: 999px;
    padding: 4px;
	border: 1px solid var(--jw-tab-active-border);
}



/* Inline feedback */
.jw-inline-status {
  font-size: 11px;
  opacity: 0.75;
}

/* -----------------------------------
 * Bad instances
 * ----------------------------------- */

.jw-bad-instance {
  border-radius: 8px;
  border: 1px solid;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--jw-tab-bg);
  color: var(--jw-tab-active-text);
  border-color: var(--jw-tab-active-border);
}

.jw-bad-instance-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.jw-bad-instance-label {
  font-size: 12px;
  color: var(--jw-text);
}

.jw-bad-instance-progress {
  font-size: 11px;
  opacity: 0.8;
  color: #555;
}

.jw-bad-metric {
    display: inline-flex;
    align-items: center;
    font-size: var(--jw-fs-1);
    line-height: var(--jw-lh-tight);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--jw-border-soft);
    background: var(--jw-surface-2);
    color: var(--jw-text);
    white-space: nowrap;
}

.jw-bad-avoid {
    background: var(--jw-surface-2);
    color: var(--jw-text);
}

.jw-bad-slip {
    background: var(--jw-surface-2);
    color: var(--jw-text);
}

.jw-bad-metric-sep {
  margin: 0 6px;
  opacity: 0.6;
}

.jw-bad-instance-actions {
    display: inline-flex;
    gap: 16px;
    margin-bottom: 4px;
    background: var(--jw-card-bg);
    border-radius: 999px;
    padding: 4px;
	border: 1px solid var(--jw-tab-active-border);
}

.jw-bad-instance-avoided {
  border-style: dashed;
  opacity: 0.9;
}

/* -----------------------------------
 * Week view tiles
 * ----------------------------------- */

.jw-week-days-list {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jw-week-day-tile {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--jw-tab-border);
  background: var(--jw-tab-bg);
  color: var(--jw-tab-text);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  text-align: left;
}

.jw-week-day-tile:active {
  transform: translateY(1px);
}

.jw-week-day-label {
  font-size: var(--jw-fs-5);
  font-weight: 200;
  margin-bottom: 2px;
  color: var(--jw-text);
}

.jw-week-day-metrics {
  font-size: 14px;
  opacity: 0.8;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--jw-text);
}

/* -----------------------------------
 * Month view – calendar heatmap (THEME-AWARE)
 * Uses ONLY: --jw-primary, --jw-surface, --jw-text, --jw-border-soft
 * ----------------------------------- */

.jw-calendar-heatmap {
  padding: 8px 8px 12px;

  --jw-hm-empty: color-mix(in srgb, var(--jw-surface) 95%, var(--jw-text) 5%);

  /* Accent ramp */
  --jw-hm-1: color-mix(in srgb, var(--jw-accent) 22%, var(--jw-surface) 78%);
  --jw-hm-2: color-mix(in srgb, var(--jw-accent) 40%, var(--jw-surface) 60%);
  --jw-hm-3: color-mix(in srgb, var(--jw-accent) 60%, var(--jw-surface) 40%);
  --jw-hm-4: color-mix(in srgb, var(--jw-accent) 82%, var(--jw-surface) 18%);

  --jw-hm-border: color-mix(in srgb, var(--jw-border-soft) 70%, transparent);
  --jw-hm-hover:  color-mix(in srgb, var(--jw-accent) 14%, transparent);
  --jw-hm-focus:  var(--jw-focus-ring);
}

.jw-calendar-cell.jw-heat-3 .jw-calendar-day-number,
.jw-calendar-cell.jw-heat-4 .jw-calendar-day-number {
  color: color-mix(in srgb, var(--jw-primary-contrast) 90%, var(--jw-text) 10%);
}


.jw-calendar-cell:not(.jw-calendar-cell-empty):hover {
  filter: saturate(1.15) contrast(1.05);
}

.jw-calendar-heatmap-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 10px;
  text-align: center;
  color: var(--jw-text-muted);
  opacity: 0.9; /* keep readable across themes */
}

.jw-calendar-weekday {
  padding: 2px 0;
}

.jw-calendar-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* Base cell */
.jw-calendar-cell {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--jw-hm-border);
  padding: 4px;
  min-height: 32px;
  cursor: pointer;

  background: var(--jw-hm-empty);
  color: var(--jw-text);

  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
	
  z-index: 0;          /* baseline */
  overflow: visible; 	
	
}

.jw-calendar-cell:hover {
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transform: translateY(-1px);
  z-index: 50;
}

.jw-calendar-cell:focus-visible {
  outline: 2px solid var(--jw-hm-focus);
  outline-offset: 2px;
  z-index: 50;
}

/* Empty slots */
.jw-calendar-cell-empty {
  cursor: default;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.jw-calendar-day-number {
  font-size: var(--jw-fs-5);
  text-align: right;
  color: var(--jw-text-subtle);
}

/* Heat buckets (0 = none, 4 = strongest) */
.jw-heat-0 { background: var(--jw-hm-empty); }

.jw-heat-1 { background: var(--jw-hm-1); }

.jw-heat-2 { background: var(--jw-hm-2); }

.jw-heat-3 { background: var(--jw-hm-3); }

.jw-heat-4 {
  background: var(--jw-hm-4);
  /* Ensure text is readable on strong primary */
  color: color-mix(in srgb, var(--jw-primary-contrast) 92%, var(--jw-text) 8%);
}

/* Optional: subtle hover overlay so all levels feel interactive */
.jw-calendar-cell:not(.jw-calendar-cell-empty):hover {
  background-image: linear-gradient(0deg, var(--jw-hm-hover), var(--jw-hm-hover));
  background-blend-mode: multiply;
}

/* Tooltip */
.jw-calendar-day-tooltip {
  display: none;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 4px;
  padding: 5px 7px;
  border-radius: 6px;

  background: color-mix(in srgb, var(--jw-surface) 12%, var(--jw-text) 88%);
  color: color-mix(in srgb, var(--jw-surface) 92%, var(--jw-text) 8%);
  border: 1px solid color-mix(in srgb, var(--jw-text) 14%, transparent);

  font-size: 10px;
  white-space: nowrap;
  box-shadow: var(--jw-shadow-2);
	
  z-index: 100;
	
}

.jw-calendar-cell:hover .jw-calendar-day-tooltip {
  display: block;
}


/* =========================================
   TRACK – Bottom Sheet aligned to JW Sheet
   (NO markup changes required)
   ========================================= */

/* container acts like jw-sheet-backdrop */
.jw-bottom-sheet {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.jw-bottom-sheet.is-open {
  pointer-events: auto;
}

.jw-bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--jw-backdrop);
}


/* PANEL: fixed-height container */
.jw-bottom-sheet-panel {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  max-width: 520px;
  margin: 0 auto;

  background: color-mix(in srgb, var(--jw-primary) 3%, var(--jw-surface));
  color: var(--jw-text);
  border-radius: 14px 14px 0 0;
  box-shadow: var(--jw-shadow-2);

  display: flex;
  flex-direction: column;
  max-height: 72vh;
  overflow: hidden;        /* panel never scrolls */

  padding: 12px 14px 10px;
  animation: jwTrackSheetUp 160ms ease-out;
}

/* HEADER: fixed */
.jw-bottom-sheet-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 2px 0 8px;
  border-bottom: 1px solid var(--jw-divider);
}

/* BODY: single scrolling surface */
.jw-bottom-sheet-body {
  min-height: 0;           
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 4px 20px; /* increase left/right padding */
  box-sizing: border-box;  /* ensure padding doesn’t break layout */
}



/* The "Nuclear" Scroll Lock */
html.jw-track-sheet-lock, 
body.jw-track-sheet-lock {
  overflow: hidden !important;
  height: 100% !important;
  /* position: fixed;  <-- Optional: use if mobile Safari still struggles */
  /* width: 100%; */
}



@keyframes jwTrackSheetUp{
  from{ transform: translateY(14px); opacity: .7; }
  to{ transform: translateY(0); opacity: 1; }
}



/* title aligns with .jw-sheet-header-title */
.jw-bottom-sheet-title{
  margin: 0;
  font-size: var(--jw-fs-4);
  line-height: var(--jw-lh-tight);
  font-weight: 500;
}

/* close button aligns with .jw-sheet-close */
.jw-bottom-sheet-close{
  width: var(--jw-hit, 40px);
  height: var(--jw-hit, 40px);
  border-radius: 999px;
  border: 1px solid var(--jw-border-soft);
  background: var(--jw-surface);
  color: var(--jw-text);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  line-height: 1;
  font-size: 18px;

  padding: 0; /* prevent weird sizing */
}

.jw-bottom-sheet-close:hover{ background: var(--jw-control-bg-hover); }
.jw-bottom-sheet-close:active{ transform: translateY(1px); }


/* -----------------------------------------
   Track sheet inner sections (tight rhythm)
   ----------------------------------------- */

.jw-sheet-section{
  margin-bottom: 12px;
  padding: 10px 0px;
}

.jw-sheet-section-title{
  font-size: var(--jw-fs-2);
  font-weight: 500;
  margin: 0 0 6px;
}

/* keep plan cards consistent */
.jw-sheet-plan{
  margin-bottom: 10px!important;
}

.jw-sheet-plan-title{
  font-size: var(--jw-fs-3);
  font-weight: 500;
  margin: 0 0 6px;
}

.jw-sheet-plan-body{
  font-size: var(--jw-fs-2);
}

/* optional: tone colors stay as you had */
.jw-sheet-plan-good .jw-sheet-plan-title{ color: #065f46; }
.jw-sheet-plan-bad  .jw-sheet-plan-title{ color: #b91c1c; }

/* -----------------------------------
 * Legacy / existing classes (kept)
 * ----------------------------------- */

.jw-track-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.jw-track-card {
  margin: 8px 16px;
}

.jw-track-card-title {
  font-size: 14px;
  font-weight: 600;
}

.jw-track-card-meta {
  font-size: 11px;
  opacity: 0.7;
}

.jw-track-card-status {
  margin-top: 4px;
  font-size: 12px;
}

/* Counter sheet uses same backdrop + bottom alignment */
#jw-count-sheet.jw-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 10000;
  padding-bottom: 0px;
}

/* Slide-in */
#jw-count-sheet .jw-sheet {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 14px 16px 16px;
  box-shadow: 0 -8px 20px rgba(0,0,0,0.12);
  max-height: 55vh;

  transform: translateY(110%);
  transition: transform 180ms ease;
}

#jw-count-sheet.is-open .jw-sheet {
  transform: translateY(0);
}

#jw-count-sheet .jw-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#jw-count-sheet .jw-sheet-close {
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.75;
}