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


: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 {
  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;
}

.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 { background-color: #1d4ed8; }

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;
}




.card-day > header {
  position: sticky;
  border-radius: 10px 10px 0px 0px;
  top: -12px;
  width: auto;
  background: #eee;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 0px;
  z-index: 5;
  /* soft shadow divider so it reads as a bar */
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}






/* 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;
  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: 12px;
}
 
.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: 12px;
}

.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% - 26px);
  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: 25px;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  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;
}

.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: 30px 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;
}
  
@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;
  min-height: 180px;
}

.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: 10px!important;
  background-color: transparent!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;
      height: 4px!important;
      margin-top: 0px!important;
    }
  .split-panes.vertical .split-resizer .handle {
      height: 15px!important;
      width: 200px!important;
      background: linear-gradient(to right, #785ABF, #785ABF, #1d4ed8 )!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;
}

.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;
}


/* 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: auto;
      right: 20px; 
      bottom: 45px!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;
}

/* 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 {
      display: none;
    }

   .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: 22px!important;
      width: calc(100% - 30px);
    }

    .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 {
      font-size: 8px!important;
      white-space: nowrap;
      text-align: right!important;
    }

     .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;
                  }

          }


    .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; 
    background-color: #e04444;
    }



        
/* 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%);
}


.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 45px 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;
}

/* 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;
    }

 .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: 10px!important;
        border-bottom-width: 5px;
        border-bottom-color: black;
      }

      .card-header-spacer {
        border-width: 0px;
        border-radius: 0px;
        width: 100%;
        border-top-width: 5px;
        border-top-color: black;
        transition: border-top-color 0.15s ease;
      }

      .card.card-day.card-today {
        transition: border-bottom-color 0.15s ease;
      }
    }

    

.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: 2.5px;
    }

    .edward-productivity-tool.is-footer-visible 
    .ms-actionbar {
      background: transparent;
      position: static;
      height: auto;
      border: 0px;
      margin-bottom: 0px;
      padding: 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% - 70px)!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);
}

.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;
  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: 180px;
    border-radius: 0px!important;
    background: black!important;
  }

  .blackout-header-collapsed {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }

  .blackout-outer-container {
    border-top: 4px solid black!important;
  }

  .timeline-blackout-header-expanded {
    padding: 14px 15px 18px 15px !important;
    width: calc(100% - 70px)!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-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 ===== */
.tw-section-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.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;
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
}

.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;
  opacity: .75;
  border: 1.5px solid #64748b!important;
}

.tw-section-header-icon-btn.tw-section-header-plus-btn:hover {
  opacity: 1.0;
}


.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: 302px!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: 15 !important;
  background: #fff;
  border-radius: 12px;
}

@media (max-width: 820px) {

   .timeline-dayEditor-placeholder-btn {
       padding: 11.75px 5px 23.25px 70.5px!important;
   }

  .tw-focus-view-panel {
    border-radius: 18px;
  }

  .tw-focus-view-body {
    padding: 8px 4px 14px;
  }

  .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: 18px;
  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: 12px;
  bottom: calc(92px + env(safe-area-inset-bottom));
}

.tw-private-motivation-fab,
.tw-private-motivation-panel {
  pointer-events: auto;
}

.tw-private-motivation-fab {
  width: 58px;
  height: 58px;
  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: 23px;
  font-weight: 800;
  line-height: 1;
}

.tw-private-motivation-fab-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  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--2 {
  background: #ffbbe3;
  color: #850d3e;
}

.tw-priority-chip--3 {
  background: #db2777;
  color: #ffffff;
}

.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: #f4f4f5;
  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--taskrow:hover {
  background: white;
}

.tw-priority-chip--bdrow {
  flex: 0 0 auto;
  min-width: 18px;
  max-width: 18px;
  height: 18.5px;
  padding: 0 0px;
  margin: 4px 0px 0 6px;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: -.05em;
}

.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: 59999;
}

.tw-priority-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 60000;
  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: -10px;
  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));
}

.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-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;
}

.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;
}

.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;
}

/* =========================================================
   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;
  z-index: 10;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.08);
  border: 2px solid rgba(99, 102, 241, 0.55);
  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: 4px 12px;
  border-radius: 999px;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}/* 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: 2px;
  background: #fff;
}

.bd-group-header.is-personal { background: #fff; }
.bd-group-header.is-work { background: #fff; }
.bd-group-input {
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 700;
  padding: 0px 0px;
  margin: 3px;
  background: transparent;
  width: 100%;
  min-width: 0;
  Border-radius: 0px;
}

.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: 16px;
  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;
	}

.bd-item-handle-wrap,
.bd-group-drag-handle-wrap {
  opacity: .20;
  transition: opacity 120ms ease;
}

.bd-item-handle-wrap.is-queue-handle-neighbor,
.bd-group-drag-handle-wrap.is-queue-handle-neighbor {
  opacity: .60;
}

.bd-item-handle-wrap.is-queue-handle-active,
.bd-group-drag-handle-wrap.is-queue-handle-active,
.bd-row:focus-within > .bd-item-handle-wrap,
.bd-group-row:focus-within > .bd-group-drag-handle-wrap {
  opacity: 1;
}

.bd-native-drag-handle {
	background: transparent;
	display: inline-block;
	border: 0px solid #e6eefc;
	color: #635f6f;
 	border-radius: 3px;
	font-size: 16px; 
	width: 17px; 
	min-width: 17px; 
	height: 18px; 
	margin-right: 7px;
	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: #635f6f;
 	border-radius: 3px;
	font-size: 20px; 
	width: 17px; 
	min-width: 17px; 
	height: 24px; 
	margin-right: 8px;
	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;
  }

.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: 22px!important;
    height: 22px!important;
    margin-top: 2px!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: gray;
	background: transparent;
	font-size: 10px; 
	height: 20px;
	margin: 0px;
	padding: 0px 2px;
	margin-right: 0px;
	width: 70px;
	min-width: 70px;
	}
.bd-collapse:hover {color: #111; background: transparent;}
.bd-collapse .show-tasks { color: blue; }
.bd-collapse .show-tasks-sm { color: blue;  font-size: 9px;}


/* 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: 16px;
  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;
}

.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 */
}

.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;
}

/* GroupGap: layout-neutral wrapper + floating hitbox */
.bd-group-gap {
  position: relative;
  height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
  transition: height 0.15s ease, opacity 0.15s ease;
}

.bd-group-gap-hit {
  pointer-events: auto;   /* hitbox captures hover */
  position: absolute;
  left: 0;
  right: 0;

  /* “inactive” thin zone */
  top: -6px;
  height: 12px;

  border-radius: 6px;
  box-sizing: border-box;

  background: transparent;
  border: 1px dashed transparent;

  transition: top 150ms ease, height 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.bd-group-gap-hit.is-active {
  /* “active” expanded zone */
  top: -21px;
  height: 42px;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
}


/* Hover-activated (visible) gap */
.bd-group-gap--active {
  height: 42px;
  opacity: 1;
  pointer-events: auto;
}

/* Optional subtle highlight */
.bd-group-gap--active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px dashed rgba(59, 130, 246, 0.35);
}


 .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-row.is-multi-selected {
          background-color: #dbeafe;
          border-radius: 8px;
        }   
      .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;
}

/* Drop indicator line (does NOT affect layout) */
.bd-group-drop-line {
  position: absolute;
  left: 8px;
  right: 8px;
  max-width: calc(100% -30px);

  /* Center a 50px dropzone around the group boundary without shifting layout */
  bottom: 10px;

  height: 0px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 10px;

  transition: height 170ms ease, opacity 170ms ease;
  will-change: height, opacity;
}

.bd-group-drop-line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-sizing: border-box;

  border: 1px dashed rgba(59, 130, 246, 0.95);
  background: rgba(59, 130, 246, 0.12);
}

.bd-group-drop-line.is-active {
  height: 40px;
  opacity: 1;
}

/* Header version: spans full width at bottom of header */
.bd-group-drop-line--header {
  left: 8px;
  right: 8px;
  max-width: calc(100% -80px);
  /* header gap should appear BELOW the header (not half-inside it) */
  bottom: -60px;
}

/* 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: -5px!important;
 top: 10px!important;
 padding: 4px 1px 4px 6px!important;
}

.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: -3px!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;
}

/* =========================
   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;
  padding-right: 15px;
  padding-right: 15px;
}

.bd-sheet-header-row {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 120px;
  align-items: center;
  padding: 18px 0 4px 0;
  margin-bottom: 12px;
  margin-left: 26px;
  width: calc(100% - 16px);
  background: #fff;
  border-bottom: 1px solid rgba(26, 37, 56, 0.08);
}

.bd-sheet-header-spacer {
  width: 30px;
}

.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 {
  margin-left: -18px;
}

.bd-sheet-header-amount {
  text-align: right;
  padding-right: 15px;
}

.bd-sheet-row {
  margin: 0;
}

.bd-sheet-row-inner {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 125px;
  align-items: baseline;
}

.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) 120px;
  align-items: center;
  width: calc(100% - 28px);
  margin-top: 16px;
  margin-left: 24px;
  padding: 10px 6px 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:last-child {
  text-align: right;
  margin-right: 9px;
  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: 50px 0px 0px 50px!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;
}

.bd-sheet-row-inner {
    align-items: baseline!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;
  }
}

.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;
}

@media (max-width: 819px) {
.backlog-notes-container {
    margin-top: 0px!important;
    margin-bottom: 70px!important;
  }
}

/* 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;
}

/* 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);
}

/* Checklist group rows */
.bd-check-toggle {
  appearance: none;
  width: 24px;
  min-width: 24px;
  margin-left: 6px;
  height: 24px;
  margin-top: 0px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #fff;
  color: #111827;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.bd-check-toggle:hover {
   background: #e8e6f1;
}

.bd-check-toggle.is-checked {
  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 {
  /*
    Do not use display:none here.

    Installed/mobile PWAs, especially WebKit PWAs, can cancel native drag
    when the original drag source is removed from the render tree during
    dragstart. Keep the source alive, but remove it from layout so the
    bd-placeholder can take its place.
  */
  display: block !important;
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: 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;
}