:root{
  --bg:#ffffff; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --accent:#7c3aed; --accent-2:#a78bfa;
  --lane-gap:16px; --lane-min:260px; --lane-max:420px; --radius:16px;
  /* use shared --avatar-size from shared/styles.css */
  --avatar-size: 140px;
  /* responsive lane width (may be updated by JS) */
  --lane-w: var(--lane-max);
  --lane-count: 0;
  --lanes-total: 100%;
  --topbars-height: 62px;
}

body{overflow:auto}
.routines-app{display:flex;flex-direction:column;min-height:100vh}
.routines-app>*{flex-shrink:0}
.today-label{color:var(--muted)}

.lanes-wrap{flex:1;padding:0 16px 24px 16px;margin:0 auto;display:flex;justify-content:center;box-sizing:border-box;width:100%;overflow:visible;min-height:0}
.lanes{display:flex;gap:var(--lane-gap);padding:20px 0;margin:0 auto;width:min(100%, var(--lanes-total));justify-content:center;flex-wrap:nowrap;align-items:stretch;max-width:100%;position:relative;min-height:0}
.lanes-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding-right:16px;padding-bottom:8px;min-height:0}
.lanes-scroll::-webkit-scrollbar{height:10px;width:10px}
.lanes-scroll::-webkit-scrollbar-thumb{background:#cbd5f5;border-radius:999px}
.lanes-scroll::-webkit-scrollbar-track{background:transparent}

.lane{background:transparent;border:none;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;width:var(--lane-w);max-width:var(--lane-w);flex:0 0 var(--lane-w);min-height:0}
.lane-inner{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:calc(100vh - var(--topbars-height) - 24px)}
.lane-inner{-ms-overflow-style:none;scrollbar-width:none}
/* Hide scrollbars on WebKit (iOS Safari, Chrome) */
.lane-inner::-webkit-scrollbar{width:0!important;height:0!important;background:transparent}
.lane-inner::-webkit-scrollbar-thumb{background:transparent}
.lane-header{padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:sticky;top:0;background:var(--bg);z-index:2;box-shadow:0 6px 12px rgba(15,23,42,0.04);backdrop-filter:blur(6px)}
.lane-body{padding:0 4px 12px 4px;overflow:visible;flex:none}
/* existing lane-header styles adjusted above */
/* .avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;box-shadow:0 2px 10px rgba(0,0,0,.08)} */
.kid-meta{display:flex;flex-direction:column;align-items:center}

/* Avatar badge overlay */
.avatar-wrap{position:relative;display:inline-block}
.avatar-badge{
  position:absolute;right:-6px;bottom:-6px;
  min-width:34px;height:auto;padding:6px 8px;border-radius:999px;
  background:var(--evt-border);
  border:2px solid #ffffff;
  display:flex;align-items:center;gap:4px;justify-content:center;
  font-size:12px;font-weight:700;color:#ffffff;
  box-shadow:0 4px 10px rgba(0,0,0,0.16);
}
.avatar-badge .burst{font-size:13px;line-height:1}

.sections{display:flex;flex-direction:column;gap:20px;padding:0 4px}
.section{border:none;border-radius:12px}
.section-card{display:flex;background:var(--card);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);overflow:hidden}
.section-accent{width:6px;background:var(--evt-border)}
.section-body{flex:1;display:flex;flex-direction:column}
.section-title{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-weight:300;color:#374151;font-family: Inter, ui-sans-serif, system-ui;font-size:18px}
.section-header{position:relative;border:none;border-radius:12px;height:120px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:flex-start}
.section-header-label{margin:0 0 10px 10px;background:transparent;color:#0b1020;border-radius:0;padding:6px 12px;font-weight:600;font-family:Poppins, Inter, ui-sans-serif;font-size:16px}
.section-header--morning{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='240' viewBox='0 0 800 240'><rect width='800' height='240' fill='%23a5f3fc'/><circle cx='720' cy='230' r='160' fill='%23fbbf24'/><g fill='%23ffffff'><circle cx='110' cy='170' r='28'/><circle cx='135' cy='175' r='24'/><circle cx='160' cy='168' r='20'/><circle cx='140' cy='160' r='22'/></g><g fill='%23ffffff' opacity='0.9'><circle cx='300' cy='90' r='20'/><circle cx='320' cy='100' r='18'/><circle cx='340' cy='92' r='16'/></g></svg>")}
.section-header--afternoon{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='240' viewBox='0 0 800 240'><rect width='800' height='240' fill='%23bfdbfe'/><circle cx='680' cy='220' r='150' fill='%23f59e0b'/><g fill='%23ffffff'><circle cx='180' cy='70' r='18'/><circle cx='198' cy='76' r='16'/><circle cx='216' cy='70' r='14'/></g></svg>")}
.section-header--evening{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='240' viewBox='0 0 800 240'><rect width='800' height='240' fill='%236564d9'/><circle cx='650' cy='80' r='26' fill='%23fde68a'/><g fill='%23ffffff' opacity='0.92'><circle cx='120' cy='60' r='2'/><circle cx='180' cy='40' r='2.6'/><circle cx='240' cy='70' r='2.2'/><circle cx='90' cy='110' r='2.4'/><circle cx='210' cy='120' r='2.1'/></g><g fill='%23ffffff' opacity='0.9'><circle cx='140' cy='170' r='20'/><circle cx='160' cy='178' r='18'/><circle cx='180' cy='170' r='16'/></g></svg>")}
.section-gate{padding:8px 8px 14px 8px;display:flex;justify-content:center}
.btn{border:1px solid var(--evt-border);background:var(--evt-border);color:#fff;border-radius:999px;padding:10px 22px;font-weight:600;cursor:pointer;font-family:Poppins, Inter, ui-sans-serif;font-size:15px}
.btn:active{transform:translateY(1px)}
.btn-view{background:var(--evt-border);color:#fff;border:1px solid var(--evt-border)}

/* Celebration emoji to the left of the centered View button */
.celebrate-wrap{position:relative;display:inline-block}
.celebrate-emoji{position:absolute;right:100%;margin-right:8px;top:50%;transform:translateY(-50%);font-size:18px}
.start-pill{background:var(--evt-bg);color:var(--evt-text);border:1px solid var(--evt-border);border-radius:999px;padding:12px 18px;font-weight:300;cursor:pointer;font-family: Inter, ui-sans-serif, system-ui; font-size:18px}
.start-pill:active{transform:translateY(1px)}
.task-list{padding:0 10px 14px 10px;display:flex;flex-direction:column;gap:14px}
.task{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:none;border-radius:14px;padding:18px 18px;box-shadow:0 6px 16px rgba(0,0,0,.08);min-height:78px}
.task-left{display:flex;align-items:center;gap:12px}
.task-emoji{font-size:26px;display:grid;place-items:center;width:42px;height:42px;border-radius:10px}
.task-title{font-weight:300;font-family:Inter;font-size:16px}
.task-right{display:flex;align-items:center;gap:10px}
.done-pill{background:var(--evt-border);color:#fff;border:1px solid var(--evt-border);border-radius:999px;padding:10px 26px;font-weight:600;cursor:pointer;font-family:Poppins, Inter, ui-sans-serif;font-size:15px}
.done-pill:active{transform:translateY(1px)}
.checkmark{width:auto;height:auto;border-radius:0;background:transparent;color:var(--evt-text);display:none;align-items:center;justify-content:center;font-weight:600;font-size:18px;cursor:pointer}
.task.done .checkmark{display:flex}
.task.done .done-pill{display:none}
.task.readonly .checkmark{opacity:.85;cursor:pointer}

.section-complete-card{background:#f9fafb;border:1px solid #eef0f7;border-radius:12px;padding:14px;margin:0 4px 8px 4px;display:flex;align-items:center;justify-content:space-between}
.completed-msg{font-weight:500;font-family:Poppins, Inter, ui-sans-serif;font-size:16px}
.undo-link{background:transparent;border:none;color:var(--accent);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.undo-icon{color:var(--accent);font-size:18px;line-height:1}

/* removed manual section-complete UI; celebration auto-triggers when all tasks done */

/* Celebration overlay */
.celebration{position:fixed;inset:0;background:rgba(255,255,255,.9);display:none;align-items:center;justify-content:center;z-index:9999}
.celebration.show{display:flex}
.celebration-card{background:var(--card);border:1px solid #eef0f7;border-radius:20px;padding:24px 28px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.celebration-emoji{font-size:54px}
.celebration-text{font-size:20px;font-weight:500;text-align:center;margin-bottom:16px}
.celebration-image{width:600px;height:600px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,0.25)}
.celebration-image img{width:100%;height:100%;object-fit:cover}
.confetti{position:absolute;inset:0;pointer-events:none}

/* Progress bar */
.section-progress{padding:10px 12px 6px 12px;display:flex;align-items:center;gap:10px}
.progress-track{flex:1;height:8px;background:var(--evt-bg);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:var(--evt-border);width:0;border-radius:999px}
.progress-meta{font-size:12px;color:var(--muted)}

@media (max-width:1100px){
  :root{
    --lane-max:360px;
  }
}
@media (max-width:680px){
  body{overflow:auto}
  .routines-app{height:auto;min-height:100vh}
  .lanes-wrap{overflow:visible;padding-bottom:48px}
  .lanes-scroll{overflow:visible;height:auto;padding-right:0}
  .lanes{flex-wrap:wrap;width:100%;padding:16px}
  .lane{flex:1 1 100%;width:100%;max-width:100%;height:auto;min-height:0}
  .lane-inner{overflow:visible}
  .lane-header{position:static;box-shadow:none}
  .lane-body{overflow:visible;padding-bottom:24px}
}