:root{
  --bg:#F4F3EE; /* cream */
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#C15F3C; /* terracotta */
  --accent-2:#b3532f;
  --text:#1F1E1D; /* dark brown-gray */
  --radius:12px;
  --max-width:660px;
}
*{box-sizing:border-box}
html,body{height:100%}
.body,body{
  margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);display:flex;flex-direction:column;align-items:center;padding:24px;
}
.site-header{width:100%;max-width:var(--max-width);text-align:center;margin-bottom:18px}
.site-header h1{margin:0;font-size:1.6rem}
.muted{color:var(--muted);font-size:0.9rem}
.grid{width:100%;max-width:var(--max-width);display:grid;grid-template-columns:1fr;gap:16px}
.section-header{display:flex;flex-direction: column; justify-content:space-between;align-items:center;margin-bottom:8px}
.section-actions{display:flex;gap:10px;align-items:stretch;justify-content:space-between;margin:12px 0px;}
.section-actions > *{display: block;}
/* size and spacing for controls in the header */
.section-actions > *{margin:0}
.section-actions select{min-width:130px;max-width:220px}
.section-actions input#new-list-name{min-width:120px;max-width:240px}
.section-actions button{padding:8px 10px}
@media(max-width:700px){
  .section-header{align-items:flex-start}
  .section-actions{width:100%;justify-content:flex-start}
  .section-actions select, .section-actions input#new-list-name{flex:1 1 140px}
}
/* header split rows */
.section-top{display:flex;justify-content:space-between;width:100%;}
.section-subheader{margin-top:8px;width: 100%;}
.section-subheader[aria-hidden="true"]{display:none}
.section-body{transition:max-height 220ms ease;overflow:hidden}
.section-body[aria-hidden="true"]{max-height:0;padding:0}
.section-body[aria-hidden="false"]{max-height:1200px}
select,input#new-list-name{padding:8px;border-radius:8px;border:1px solid #e6e9ef;background:#fff}
button#delete-list{background:transparent;border:1px solid #e6e9ef;padding:8px;border-radius:8px;cursor:pointer;color:#1F1E1D}
.collapse-btn{background:var(--accent);border:0;color:#fff;font-size:0.95rem;cursor:pointer;padding:6px 8px;border-radius:8px}
.collapse-btn[aria-expanded="false"]{transform:rotate(-90deg)}
.markdown-preview{width: 100%; padding:12px;border-radius:8px;background:#fbfbff;border:1px solid #eef2ff;overflow:auto;}
.row .markdown-preview{display:block}
@media(max-width:900px){.row .markdown-preview{display:none}}
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
h2{margin:0 0 8px 0;font-size:1.05rem}
.row{display:flex;gap:8px}
.space-between{justify-content:space-between;align-items:center}
.date-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.date-label{font-weight:600}
input,textarea,button{font:inherit}
input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e9ef;background:#fff}
button{background:var(--accent);color:#fff;border:0;padding:10px 12px;border-radius:8px;cursor:pointer}
button[aria-pressed="true"],button.toggle{background:var(--accent-2)}
.list{list-style:none;padding:0;margin:8px 0 0 0;display:block}
.list li{padding:10px;border-radius:8px;display:flex;align-items:center;gap:12px;border:1px solid #f1f3f7;margin-bottom:8px;justify-content:space-between}
/* checkbox small, text dominates */
.list li input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;margin:0}
.todo-text{flex:1;display:flex;flex-direction:column;margin-left:8px}
.list li[draggable="true"]{cursor:grab}
.list li.dragging{opacity:0.6}
.todo-edit-input{width:100%;padding:6px;border-radius:6px;border:1px solid #e6e9ef}
.todo-meta{font-size:0.8rem;color:var(--muted);margin-top:6px}
.small-btn{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px}
.site-footer{width:100%;max-width:var(--max-width);text-align:center;padding:18px}
.habit-days{display:flex;gap:6px;margin-left:8px}
.day-pill{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.8rem;background:#f3f4f6}
.streak{font-size:0.8rem;color:var(--muted);margin-left:8px}
.list li .left{display:flex;gap:8px;align-items:center}
.list li .right{display:flex;gap:12px;align-items:center}

/* habit detail grid (github-style) */
.habit-detail{margin-top:10px;padding:8px;border-radius:8px;background:transparent}
.habit-grid{display:grid;grid-template-columns:repeat(7,18px);gap:6px;align-items:center}
.habit-day{width:18px;height:18px;border-radius:3px;background:#eee;display:inline-block;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.05);cursor:default}
.habit-day:hover{outline:2px solid rgba(0,0,0,0.06);transform:translateY(-1px)}
.habit-day.empty{background:#f2f2f2}
.habit-legend{margin-top:8px;font-size:0.85rem;color:var(--muted)}
.pop { animation: pop 360ms cubic-bezier(.2,.9,.2,1); }
.pulse { animation: pulse 1200ms ease-in-out; }

/* Pomodoro / Focus session styles */
.pomodoro-timer{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px}
#pomodoro-display{font-size:2rem;font-weight:700;color:var(--accent);background:var(--card);padding:10px 18px;border-radius:10px;border:1px solid #f1f3f7;min-width:120px;text-align:center}
#pomodoro-display.running{box-shadow:0 8px 20px rgba(193,95,60,0.06)}
#pomodoro-status,#pomodoro-count{font-size:0.9rem;color:var(--muted)}
#pomodoro-count{margin-top:6px}

@keyframes pop {
  0% { transform: scale(.92); opacity: 0; }
  50% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(193,95,60,0.35); }
  70% { box-shadow: 0 0 0 8px rgba(193,95,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(193,95,60,0); }
}

/* Confetti canvas sits over the app */
#confetti-canvas{position:fixed;left:0;top:0;pointer-events:none;width:100%;height:100%;z-index:9999}

button, input[type="checkbox"]{transition:transform 140ms ease, box-shadow 140ms ease}
button:active{transform:scale(.98)}
.list li{transition:background 240ms ease, transform 200ms ease}
.list li.pop{transform:translateY(-6px)}
.entry-body{white-space:pre-wrap}

/* Inline editor for journal entries */
.entry-edit{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.entry-edit input.entry-edit-title{padding:8px;border-radius:8px;border:1px solid #e6e9ef}
.entry-edit textarea.entry-edit-body{padding:10px;border-radius:8px;border:1px solid #e6e9ef;resize:vertical}
.entry-card[data-id]{position:relative}
.title-row{display:flex;justify-content:space-between;align-items:center;width:100%}
.title-row h3{margin:0;font-size:1rem}
.muted-action{color:var(--muted);font-size:0.85rem}
/* Ensure markdown lists inside journal entries render with normal bullets and spacing */
.entry-body ul{ list-style-type: disc; margin:0.5rem 0 0.5rem 1.25rem; padding:0; color:var(--text); }
.entry-body ol{ list-style-type: decimal; margin:0.5rem 0 0.5rem 1.25rem; padding:0; color:var(--text); }
.entry-body li{ display:list-item; padding:0.125rem 0; border:none; margin:0; }
#entry-title {margin-bottom: 12px;}
.entry-row {margin-bottom: 12px;}
#entry-preview {display:none}
#list-select { align-self: stretch;}
#habit-input { display: block;}
#habit-form { width: 100%;}

/* Entries list: make scrollable with its own scrollbar */
#entries-list{max-height:360px;overflow:auto;padding-right:8px}

/* Collapsed entry: hide body/editor but keep header/meta visible */
.entry-card.collapsed .entry-body{display:none}
.entry-card.collapsed .entry-edit{display:none}
.entry-card .title-row{cursor:default}

/* Toast / feedback styles */
#toast-container{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:10010;max-width:320px}
.toast{background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(15,23,42,0.12);display:flex;gap:10px;align-items:center;font-size:0.95rem;animation:toast-in .28s cubic-bezier(.2,.9,.2,1);border-left:4px solid var(--accent);}
.toast .txt{flex:1}
.toast.small{padding:8px 10px;font-size:0.9rem}
.toast.info{border-left-color: #3b82f6}
.toast.success{border-left-color: var(--accent)}
.toast.warn{border-left-color: #f59e0b}
.toast.error{border-left-color: #ef4444}
.toast .meta{font-size:0.8rem;color:var(--muted);margin-left:6px}
@keyframes toast-in{from{transform:translateY(6px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

/* subtle pulse when toasts appear */
.toast.pulse{animation:toast-in .32s cubic-bezier(.2,.9,.2,1), pulse 900ms ease-in-out}

/* Lists overview grid and drag-handle */
.lists-overview{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.drag-handle{cursor:grab;padding:6px 8px;border-radius:6px;background:transparent;color:var(--muted);font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;margin-right:8px}
.drag-handle:active{cursor:grabbing}
.card.dragging{opacity:0.6;transform:scale(.995)}
.list-overview{padding:10px}
.list-overview .title-row h3{font-size:0.95rem}
.list-overview .list-overview-body{margin-top:8px}
.list-item-row{display:flex;align-items:center;gap:8px; padding:4px 0px;}
.list-item-row > input {width: min-content;}
/* header controls (right side of section header) */
.header-controls{display:flex;align-items:center;gap:8px}