/* Baseline cloned from reward charts app (hard reset) */
/* Gradient background for main chart area */
.custom-bg-main {
  background: linear-gradient(135deg,
    var(--ts-color-decorative-gradient-playful-main-start) 0%,
    var(--ts-color-decorative-gradient-playful-main-mid) 60%,
    var(--ts-color-decorative-gradient-playful-main-end) 100%
  );
}
/* Playful Animations */
@keyframes confetti-fall {
  0% { transform: translateY(-100px) rotate(-15deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(300px) rotate(15deg); opacity: 0; }
}

.confetti {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 100;
  animation: confetti-fall 1.2s ease-in forwards;
}

@keyframes bounce-in {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

.bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.4, 1, 0.7, 1);
}

@keyframes sticker-pop {
  0% { transform: scale(0.2) rotate(-10deg); opacity: 0; }
  70% { transform: scale(1.1) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.sticker-pop {
  animation: sticker-pop 0.5s cubic-bezier(0.4, 1, 0.7, 1);
}
.icon-playful {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-yellow);
  box-shadow: 0 2px 8px var(--color-shadow);
  padding: 6px;
  margin: 0 8px;
  transition: background 0.2s;
}
.icon-playful.chore {
  background: var(--color-blue);
}
.icon-playful.reward {
  background: var(--color-pink);
}

/* Example usage:
<span class="icon-playful chore">
  <!-- SVG for broom, laundry, etc. -->
</span>
<span class="icon-playful reward">
  <!-- SVG for star, trophy, etc. -->
</span>
*/
/* Playful & Colorful Family Theme Palette */
:root {
  /* Playful palette now aliasing tokens */
  --color-yellow: var(--ts-color-state-warn-border);
  --color-blue: var(--ts-color-decorative-gradient-playful-main-start);
  --color-pink: var(--ts-color-decorative-gradient-playful-main-end);
  --color-green: var(--ts-color-state-surface-success-mid);
  --color-purple: var(--ts-color-decorative-gradient-playful-main-mid);
  --color-orange: var(--ts-color-state-warn-bg);
  --color-accent: var(--ts-color-accent-400);
  --color-bg: var(--ts-color-surface-app-bg);
  --color-card: var(--ts-color-surface-card-bg);
  --color-shadow: rgba(0,0,0,0.08);
  --font-family-sitewide: 'Inter', 'Nunito Sans', sans-serif;
}

/* Global styles */
body {
  font-family: var(--font-family-sitewide);
  background: var(--color-bg);
  min-height: 100vh;
}

/* Sticky Action Toolbar */
.ts-action-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40; /* below loading overlay (z-50), above content */
  pointer-events: none; /* allow clicks only on inner container */
}
.ts-action-toolbar__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 12px auto;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 28px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  width: fit-content;
}
.ts-action-group {
  display: inline-flex;
  gap: 10px;
}
.ts-action-separator {
  width: 1px;
  height: 28px;
  background: rgba(0,0,0,0.12);
}
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ts-color-action-primary-bg);
  color: var(--ts-color-action-primary-fg);
  border: none;
  border-radius: var(--ts-radius-interactive, 12px);
  padding: 10px 14px;
  font-weight: 600;
  font-size: var(--ts-font-size-sm, 0.95rem);
  line-height: 1;
  box-shadow: var(--ts-shadow-1, 0 2px 8px rgba(0,0,0,0.10));
  cursor: pointer;
  transition: transform 0.06s var(--ts-ease-standard, ease), box-shadow 0.18s var(--ts-ease-standard, ease), background 0.18s var(--ts-ease-standard, ease);
}
.ts-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-1px); }
.ts-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.ts-btn__icon { font-size: 1.1em; }
.ts-btn__label { letter-spacing: 0.01em; }
.ts-btn[aria-disabled="true"], .ts-btn:disabled {
  filter: grayscale(20%);
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Variant colors for clarity */
.ts-btn--undo { background: var(--ts-color-yellow-500); }
.ts-btn--undo:hover { background: var(--ts-color-yellow-600); }
.ts-btn--share { background: var(--ts-color-accent-500); }
.ts-btn--share:hover { background: var(--ts-color-accent-600); }
.ts-btn--download { background: var(--ts-color-green-500); }
.ts-btn--download:hover { background: var(--ts-color-green-600); }

/* Ensure chart bottom content not hidden behind toolbar */
.has-toolbar-padding { padding-bottom: 84px; }

/* Mobile compaction for toolbar */
@media (max-width: 480px) {
  /* Expand to full width and respect safe-area insets */
  .ts-action-toolbar__inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    /* Base padding with safe-area overrides for iOS */
    padding: 10px 12px 12px 12px;
    padding-left: calc(env(safe-area-inset-left) + 12px);
    padding-right: calc(env(safe-area-inset-right) + 12px);
    gap: 8px;
    justify-content: space-between;
  }
  .ts-action-group { gap: 8px; flex: 1 1 auto; justify-content: space-between; }
  .ts-action-toolbar { overflow-x: visible; }
  .ts-action-separator { display: none; }
  .ts-btn { padding: 10px 12px; border-radius: 12px; flex: 1 1 auto; justify-content: center; }
  .ts-btn__label { display: none; }
  /* Popover positioning handled by JS; no mobile overrides needed. Add comment-only rule avoided. */
  /* (Intentionally no styles here) */
}

/* Phablet: slightly below tablet width still full-width bar */
@media (max-width: 700px) and (min-width: 481px) {
  .ts-action-toolbar__inner {
    width: calc(100% - 24px);
    max-width: 100%;
    margin: 0 12px 12px 12px;
    border-radius: 14px;
    justify-content: space-between;
    gap: 10px;
  }
  .ts-action-group { gap: 10px; }
}

/* Global save indicator */
.ts-global-save { display:flex; align-items:center; justify-content:center; }
.ts-global-save__pill { font-size:12px; line-height:1; padding:6px 12px; border-radius:9999px; font-weight:600; letter-spacing:.25px; border:1px solid transparent; transition:background .25s,color .25s,border-color .25s; }
.ts-global-save__pill--saved { background:var(--ts-color-state-success-bg); color:var(--ts-color-state-success-fg); border-color:var(--ts-color-state-success-border); }
.ts-global-save__pill--saving { background:var(--ts-color-state-info-bg); color:var(--ts-color-state-info-fg); border-color:var(--ts-color-state-info-border); }
.ts-global-save__pill--unsaved { background:var(--ts-color-state-warn-bg); color:var(--ts-color-state-warn-fg); border-color:var(--ts-color-state-warn-border); }
.ts-global-save__pill--error { background:var(--ts-color-state-error-bg); color:var(--ts-color-state-error-fg); border-color:var(--ts-color-state-error-border); }

/* Reward chart elements retained for baseline */
#mainChartContainer {
  max-width: 900px;
  width: 100%;
  padding: 40px 32px;
}
@media (max-width: 700px) {
  #mainChartContainer { max-width: 100%; padding: 24px 8px; }
}

/* Simple footer card styling retained */
.ts-report-card__footer { text-align:center; font-size:0.8rem; opacity:0.75; }
.ts-date-clear-btn { background:var(--ts-color-gray-50); border:1px solid var(--ts-color-gray-200); color:var(--ts-color-gray-600); padding:4px 8px; font-size:0.65rem; line-height:1; border-radius:6px; cursor:pointer; font-weight:600; }
.ts-date-clear-btn:hover { background:var(--ts-color-gray-200); }
@media (max-width:640px){
  .ts-planner-header { padding:1.75rem 1.25rem 2rem; border-radius:1.75rem; }
  .ts-planner-title, .ts-planner-title-edit { font-size:clamp(2.2rem, 8.2vw, 3.2rem); }
}

/* Mobile Hamburger Button styles moved to main.css (global) 2025-09-27 */
@media (max-width:640px){
  /* Retain only planner-specific spacing adjustments */
  .ts-planner-header__inner { gap:0.9rem; }
  .ts-planner-header { padding-top:1.55rem; }
}

.ts-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; border:1px solid transparent; background:var(--ts-color-surface-subtle); color:var(--ts-color-text-secondary); font-size:0.9rem; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.ts-icon-btn:hover { background:var(--ts-color-surface-subtle-alt); }
.ts-icon-btn:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); outline-offset:var(--ts-focus-ring-offset,2px); }
.ts-icon-btn--delete { background:transparent; color:var(--ts-color-text-tertiary); border-color:transparent; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.ts-icon-btn--delete:hover { background:var(--ts-color-surface-subtle); color:var(--ts-color-state-error-strong); border-color:var(--ts-color-state-error-soft-bg); }
.ts-icon-btn--delete:active { background:var(--ts-color-red-50); }

/* Activity Card Swipe */
.ts-activity-card { position:relative; overflow:hidden; }
.ts-activity-card__swipe-track { display:flex; width:100%; transform:translateX(0); transition:transform .32s cubic-bezier(.4,.8,.2,1); }
.ts-activity-card__content { background:var(--ts-color-surface-card-bg); flex:1 0 100%; padding:0.85rem 0.9rem 0.9rem; border:1px solid var(--ts-color-state-surface-success-mid); border-radius:1rem; display:flex; flex-direction:column; gap:0.6rem; box-shadow:0 4px 10px -3px rgba(0,0,0,0.04); }
.ts-activity-card__delete-swipe { flex:0 0 48px; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--ts-color-text-tertiary); font-size:.95rem; border:none; cursor:pointer; transition:background .18s ease, color .18s ease; }
.ts-activity-card__delete-swipe:hover { background:var(--ts-color-surface-subtle); color:var(--ts-color-state-error-strong); }
.ts-activity-card__delete-swipe:active { background:var(--ts-color-surface-subtle-alt); }
.ts-activity-card.is-open-delete .ts-activity-card__swipe-track { transform:translateX(-48px); }
.ts-activity-card__top { display:flex; align-items:center; gap:0.5rem; }
.ts-activity-card__input { flex:1; background:transparent; border:none; border-bottom:1px dashed var(--ts-color-border-subtle-alt); padding:2px 4px; font-size:0.85rem; }
.ts-activity-card__input:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); border-bottom-color:transparent; background:var(--ts-color-state-surface-success-low); }
.ts-activity-card__expand { background:transparent; border:none; cursor:pointer; font-size:0.9rem; color:var(--ts-color-state-surface-success-strong); padding:2px 6px; border-radius:6px; }
.ts-activity-card__expand:hover { background:var(--ts-color-state-surface-success-low); }
.ts-activity-card__drag { cursor:grab; font-size:0.85rem; color:var(--ts-color-text-tertiary); padding:4px 4px; }
.ts-activity-card__notes, .ts-activity-card__location { width:100%; font-size:0.7rem; padding:6px 8px; border:1px solid var(--ts-color-state-surface-success-mid); border-radius:0.65rem; background:var(--ts-color-state-surface-success-low); }
.ts-activity-card__notes:focus, .ts-activity-card__location:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); background:var(--ts-color-surface-card-bg); }

/* Packing overflow fix */
.ts-pack-wrapper, .ts-pack-cat, .ts-pack-cat__header { min-width:0; }

/* Phase A: Hidden shadow Action Card lists (keep extremely lightweight) */
#itineraryShadowRoot[data-shadow="true"] .ts-ac-list { list-style:none; margin:0; padding:0; }
#itineraryShadowRoot[data-shadow="true"] .ts-ac { font-size:0.75rem; }

/* Future (Phase B) visible Action Card list layout (mobile-first placeholder) */
.itinerary-ac-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
@media (min-width:640px){ .itinerary-ac-list { gap:0.65rem; } }

/* Compact spacing for checkbox variant within packing categories on small screens */
@media (max-width:480px){
  .itinerary-ac-list .ts-ac__body { padding:0.5rem 0.65rem; }
  .itinerary-ac-list .ts-ac__input { font-size:0.8rem; }
}
.ts-pack-cat__header { flex-wrap:wrap; }
.ts-pack-cat__title { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:520px){
  .ts-pack-wrapper { padding:1rem 0.85rem 1.1rem; }
  .ts-pack-cat { padding:0.75rem 0.75rem 0.85rem; }
  .ts-pack-cat__header { gap:0.5rem; }
}

/* Date Range Popover */
.ts-date-pop { position:fixed; background:var(--ts-color-surface-card-bg); border:1px solid var(--ts-color-border-subtle); border-radius:1rem; padding:0.9rem 1rem 1rem; box-shadow:0 10px 28px -6px rgba(31,41,55,0.18), 0 4px 12px rgba(0,0,0,0.08); width:auto; min-width:240px; max-width:320px; z-index:160; animation:fadeIn .16s ease; max-height:60vh; overflow:auto; }
.ts-date-pop__row { display:flex; flex-direction:column; gap:0.4rem; }
.ts-date-pop__grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.ts-date-pop label { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--ts-color-text-secondary); }
.ts-date-pop input[type=date] { width:100%; font-size:0.75rem; border:1px solid var(--ts-color-border-default); border-radius:0.6rem; padding:0.4rem 0.55rem; background:var(--ts-color-surface-muted); }
.ts-date-pop input[type=date]:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); outline-offset:var(--ts-focus-ring-offset,2px); background:var(--ts-color-surface-card-bg); }
.ts-date-pop__actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:0.8rem; }
.ts-date-pop__actions button { font-size:0.7rem; padding:6px 10px; border-radius:0.6rem; font-weight:600; cursor:pointer; border:1px solid transparent; }
.ts-date-pop__btn-primary { background:var(--ts-color-brand-violet-500); color:var(--ts-color-text-inverse); }
.ts-date-pop__btn-primary:hover { background:var(--ts-color-brand-violet-600); }
.ts-date-pop__btn-secondary { background:var(--ts-color-surface-subtle); color:var(--ts-color-text-secondary); border-color:var(--ts-color-border-subtle-alt); }
.ts-date-pop__btn-secondary:hover { background:var(--ts-color-surface-subtle-alt); }
.ts-date-pop__presets { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.75rem; }
.ts-date-preset { background:var(--ts-color-surface-muted-alt); color:var(--ts-color-text-primary); border:1px solid var(--ts-color-border-subtle); padding:4px 8px; border-radius:6px; font-size:0.6rem; font-weight:600; letter-spacing:0.03em; cursor:pointer; }
.ts-date-preset:hover { background:var(--ts-color-surface-subtle); }
.ts-date-preset:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); outline-offset:var(--ts-focus-ring-offset,2px); }
.ts-planner-subtitle { cursor:pointer; position:relative; }
.ts-planner-subtitle.is-placeholder { font-style:italic; opacity:0.85; }

/* --- Packing Categories Refined Layout --- */
.ts-pack-wrapper { border:1px solid var(--ts-color-border-subtle-alt); background:var(--ts-color-surface-muted); border-radius:1.5rem; padding:1.25rem 1.25rem 1.5rem; display:flex; flex-direction:column; gap:1.1rem; }
.ts-pack-cat { position:relative; border:1px solid var(--ts-color-border-subtle-alt); background:var(--ts-color-surface-card-bg); border-radius:1rem; padding:0.9rem 1rem 1rem; }
.ts-pack-cat__header { display:flex; align-items:center; gap:0.65rem; padding:0 0.25rem 0.35rem; border-bottom:1px solid var(--ts-color-border-subtle-alt); }
.ts-pack-cat__collapse-btn { background:transparent; border:none; font-size:0.95rem; line-height:1; cursor:pointer; color:var(--ts-color-text-secondary); padding:4px 6px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
.ts-pack-cat__collapse-btn:hover { background:var(--ts-color-surface-subtle); }
.ts-pack-cat__title { font-weight:600; font-size:0.95rem; background:transparent; border:none; padding:4px 4px; border-radius:6px; cursor:text; }
.ts-pack-cat__title:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); background:var(--ts-color-surface-card-bg); }
.ts-pack-cat__spacer { flex:1; }
.ts-pack-cat__count { font-size:0.65rem; font-weight:600; color:var(--ts-color-text-muted); letter-spacing:0.05em; }
/* .ts-pack-cat__badge-slot removed (badge system deprecated) */
.ts-pack-cat__delete { margin-left:0.25rem; font-size:0.65rem; color:var(--ts-color-text-tertiary); background:transparent; border:1px solid transparent; transition:background .18s ease, color .18s ease; }
.ts-pack-cat__delete:hover { color:var(--ts-color-state-error-strong); background:var(--ts-color-surface-subtle); }

/* Alignment refinements */
.ts-pack-cat__header { align-items:flex-start; }
.ts-pack-cat__title { padding-left:2px; }
.ts-pack-cat { padding-left:0.9rem; }
.ts-pack-cat__drag { cursor:grab; font-size:0.85rem; line-height:1; padding:4px 4px; color:var(--ts-color-text-muted); }
.ts-pack-cat__drag:active { cursor:grabbing; }
.ts-pack-item__drag { cursor:grab; font-size:0.7rem; line-height:1; padding:2px 2px; color:var(--ts-color-text-tertiary); }
.ts-pack-item__drag:active { cursor:grabbing; }
.ts-pack-cat.is-dragging, .ts-pack-item.is-dragging { opacity:0.45; }
.ts-pack-drop-indicator { z-index:5; }
.ts-pack-cat--drag-target { outline:2px dashed var(--ts-focus-outline-color); outline-offset:var(--ts-focus-ring-offset,2px); background:var(--ts-color-accent-50); }


/* Category complete state: keep chevron (requirement) but tint button to indicate completion */
.ts-pack-cat[data-complete="true"] > .ts-pack-cat__header .ts-pack-cat__collapse-btn { color:var(--ts-color-state-success-strong); background:var(--ts-color-state-success-bg); border-radius:6px; }
.ts-pack-cat[data-complete="true"] > .ts-pack-cat__header .ts-pack-cat__collapse-btn:hover { background:var(--ts-color-state-success-border); }
.ts-pack-cat[data-collapsed="true"] .ts-pack-cat__body { display:none; }
.ts-pack-cat__body { margin-top:0.55rem; }
.ts-pack-cat__content { padding-left:2rem; padding-right:0.25rem; display:flex; flex-direction:column; gap:0.75rem; }
.ts-pack-cat__quick-add { display:flex; align-items:center; gap:0.5rem; }
.ts-pack-cat__quick-add input { flex:1; background:var(--ts-color-surface-card-bg); border:1px solid var(--ts-color-border-default); border-radius:8px; padding:6px 10px; font-size:0.7rem; }
.ts-pack-cat__quick-add input:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); }
.ts-pack-items { display:flex; flex-direction:column; gap:0; margin-top:0.1rem; }
.ts-pack-item { display:flex; align-items:center; gap:0.5rem; background:transparent; border:none; border-radius:0; padding:5px 2px 5px 0; font-size:0.75rem; position:relative; border-bottom:1px solid var(--ts-color-border-subtle-alt); }
.ts-pack-item:hover { background:var(--ts-color-surface-subtle); cursor:pointer; }
.ts-pack-item[data-packed="true"]:hover { background:var(--ts-color-surface-subtle-alt); }
.ts-pack-item:last-child { border-bottom:1px dashed var(--ts-color-border-default); }
.ts-pack-item[data-packed="true"] { opacity:0.55; text-decoration:line-through; }
.ts-pack-item__check { width:1rem; height:1rem; cursor:pointer; appearance:auto; accent-color:var(--ts-color-accent-500); flex-shrink:0; margin-left:0.1rem; }
.ts-pack-item__check:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); outline-offset:var(--ts-focus-ring-offset,2px); }
.ts-pack-item__name { flex:1; background:transparent; border:none; padding:4px 2px; font-size:0.75rem; }
.ts-pack-item__name:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); background:var(--ts-color-surface-card-bg); border-radius:6px; }
.ts-pack-item__name { flex:1; background:transparent; border:none; padding:4px 4px; font-size:0.72rem; }
.ts-pack-item__name:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); background:var(--ts-color-surface-card-bg); border-radius:6px; }
.ts-pack-item__actions { display:flex; align-items:center; gap:0.4rem; margin-left:0.25rem; }
.ts-pack-item__delete { background:transparent; border:1px solid transparent; padding:2px 4px; font-size:0.55rem; border-radius:6px; color:var(--ts-color-text-tertiary); cursor:pointer; transition:background .18s ease, color .18s ease; }
.ts-pack-item__delete:hover { background:var(--ts-color-surface-subtle); color:var(--ts-color-state-error-strong); border-color:var(--ts-color-state-error-soft-bg); }

/* Unified Item Row System */
.ts-item-row { display:flex; align-items:center; gap:0.65rem; background:var(--ts-color-surface-card-bg); border:1px solid var(--ts-color-border-subtle-alt); border-radius:12px; padding:6px 10px; min-height:46px; position:relative; box-shadow:0 2px 4px rgba(0,0,0,0.04); }
.ts-item-row + .ts-item-row { margin-top:0.5rem; }
.ts-item-row__left { display:flex; align-items:center; gap:0.35rem; min-width:42px; }
.ts-item-row__drag { cursor:grab; font-size:0.9rem; line-height:1; color:var(--ts-color-text-tertiary); padding:2px 4px; }
.ts-item-row__drag:active { cursor:grabbing; }
.ts-item-row.is-dragging { opacity:0.45; }
.ts-item-row__drag:hover { color:var(--ts-color-text-secondary); }
.ts-item-row__check { width:1rem; height:1rem; cursor:pointer; accent-color:var(--ts-color-accent-500); }
.ts-item-row__center { flex:1; display:flex; align-items:center; }
.ts-item-row__input { width:100%; background:transparent; border:none; border-bottom:1px dashed var(--ts-color-border-default); padding:4px 2px; font-size:0.8rem; font-weight:500; }
.ts-item-row__input:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); background:var(--ts-color-surface-muted); border-bottom-color:transparent; border-radius:6px; }
.ts-item-row__right { display:flex; align-items:center; }
.ts-item-row__delete { background:transparent; border:1px solid transparent; color:var(--ts-color-text-tertiary); cursor:pointer; font-size:0.75rem; padding:4px 6px; border-radius:6px; line-height:1; }
.ts-item-row__delete:hover { background:var(--ts-color-surface-subtle); color:var(--ts-color-state-error-strong); border-color:var(--ts-color-state-error-soft-bg); }
.ts-item-row--activity .ts-item-row__input:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); background:var(--ts-color-state-surface-success-low); }
.ts-item-row--pack[data-packed="true"] .ts-item-row__input { text-decoration:line-through; opacity:0.6; }
.ts-item-row--pack[data-packed="true"] { background:var(--ts-color-surface-muted); }

/* Section Headers (Day titles & Packing categories) */
.ts-section-header { display:flex; align-items:center; gap:0.6rem; background:var(--ts-color-surface-card-bg); border:1px solid var(--ts-color-border-subtle-alt); border-radius:14px; padding:0.65rem 0.9rem; box-shadow:0 2px 4px rgba(0,0,0,0.04); }
.ts-section-header--day { background:linear-gradient(90deg,var(--ts-color-state-surface-success-low),var(--ts-color-surface-subtle)); border-color:var(--ts-color-state-surface-success-mid); }
.ts-section-header--pack { background:linear-gradient(90deg,var(--ts-color-accent-100),var(--ts-color-surface-subtle)); border-color:var(--ts-color-accent-200); }
.ts-section-header__drag { cursor:grab; font-size:0.85rem; color:var(--ts-color-text-muted); }
.ts-section-header__collapse { background:transparent; border:none; font-size:0.95rem; cursor:pointer; color:var(--ts-color-text-secondary); }
.ts-section-header__title { flex:1; background:transparent; border:none; font-weight:600; font-size:0.95rem; padding:4px 4px; border-radius:6px; }
.ts-section-header__title:focus { outline:var(--ts-focus-outline-width,2px) solid var(--ts-focus-outline-color); background:var(--ts-color-surface-card-bg); }
.ts-section-header__meta { font-size:0.65rem; font-weight:600; color:var(--ts-color-text-secondary); letter-spacing:0.05em; }
.ts-section-header__delete { background:transparent; border:1px solid transparent; color:var(--ts-color-text-tertiary); cursor:pointer; font-size:0.75rem; padding:4px 6px; border-radius:6px; }
.ts-section-header__delete:hover { background:var(--ts-color-surface-subtle); color:var(--ts-color-state-error-strong); border-color:var(--ts-color-state-error-soft-bg); }

/* Inline Add Link */
.ts-add-inline-link { margin-top:0.6rem; background:transparent; border:none; color:var(--ts-color-brand-indigo-600); font-size:0.7rem; font-weight:600; cursor:pointer; padding:4px 2px; align-self:flex-start; }
.ts-add-inline-link:hover { text-decoration:underline; }

/* Legacy styles overrides removal */
.ts-block__list .ts-activity-card, .ts-activity-card__content, .ts-pack-item { display:none !important; }

/* Progress */
#packingProgressSection { border:1px solid var(--ts-color-border-subtle); background:var(--ts-color-surface-muted); border-radius:1rem; }
#packingProgressCounter { font-weight:600; }
#packingProgressBar { transition:width .3s ease; }


/* Removed keyframes and adjustments related to deprecated badges */

.ts-btn-add-inline { --add-accent:var(--ts-color-state-success-strong); display:inline-flex; align-items:center; gap:4px; padding:4px 10px 5px; font-size:0.65rem; font-weight:600; background:rgba(255,255,255,0.6); color:var(--add-accent); border:1px solid var(--ts-color-state-surface-success-mid); border-radius:999px; cursor:pointer; line-height:1; letter-spacing:.02em; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.ts-btn-add-inline:hover { background:var(--ts-color-state-surface-success-low); }
.ts-btn-add-inline:active { background:var(--ts-color-state-surface-success-low); }
.ts-pack-wrapper .ts-btn-add-inline { --add-accent:var(--ts-color-accent-600); border-color:var(--ts-color-accent-200); }
.ts-pack-wrapper .ts-btn-add-inline:hover { background:var(--ts-color-accent-50); }
.ts-pack-wrapper .ts-btn-add-inline:active { background:var(--ts-color-accent-100); }