:root{
  --sky-top:#FFF1C9;
  --sky-bottom:#FFF8E1;
  --page-bg:#FFF8E1;
  --card:#FFFBF3;
  --ink:#5C4023;
  --ink-soft:#8C6B45;
  --line:#EADFC4;

  --coral:#FF7A59;
  --coral-deep:#E85D3D;
  --gold:#FFC94A;
  --gold-deep:#E8AC1C;
  --teal:#3FB6C9;
  --teal-deep:#2B8B9B;
  --green:#63C77A;
  --green-deep:#3F9E56;
  --violet:#9C86F0;
  --violet-deep:#7A62D6;

  --amber-bg:#FFF0CC;
  --amber-border:#E8AC1C;
  --amber-text:#7A4B06;

  --danger:#E85D3D;

  --shadow: 0 8px 20px rgba(92,64,35,0.12);
  --shadow-lg: 0 16px 40px rgba(92,64,35,0.22);

  --gutter-width: 64px;
  --hour-height: 60px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Nunito', sans-serif;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--page-bg) 40%);
  color:var(--ink);
  min-height:100vh;
}

h1,h2{ font-family:'Fredoka', sans-serif; margin:0; }

/* ---------- Header ---------- */
.app-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-icon-link{ display:inline-flex; line-height:1; border-radius:12px; transition:transform .12s ease; }
.brand-icon-link:hover{ transform:scale(1.08); }
.brand-icon-link:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.brand-icon-img{
  width:44px;
  height:44px;
  border-radius:12px;
  display:block;
  box-shadow:var(--shadow);
  object-fit:cover;
}
.brand-text h1{ font-size:clamp(20px, 3vw, 28px); color:var(--coral-deep); }
.brand-sub{ margin:2px 0 0; font-size:13px; font-weight:700; color:var(--ink-soft); }

.week-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav-btn, .today-btn{
  border:none;
  background:var(--card);
  color:var(--coral-deep);
  font-family:'Nunito', sans-serif;
  font-weight:800;
  border-radius:10px;
  box-shadow:var(--shadow);
  cursor:pointer;
  padding:8px 12px;
  font-size:15px;
}
.nav-btn{ width:38px; }
.nav-btn:hover, .today-btn:hover{ background:#fff; }
.export-btn{
  color:var(--teal-deep, #1F6E6E);
  font-size:13px;
  padding:8px 14px;
  white-space:nowrap;
}
.week-label{
  font-weight:800;
  font-size:15px;
  min-width:190px;
  text-align:center;
}

/* ---------- Auth bar (new: Google Sign-In UI) ---------- */
.auth-bar{ display:flex; align-items:center; }
.user-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--card);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:5px 8px 5px 6px;
}
.user-avatar{
  width:26px; height:26px;
  border-radius:50%;
  background:var(--sky-bottom);
  object-fit:cover;
}
.user-name{
  font-weight:800; font-size:13px; color:var(--ink);
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Small status word next to the user's name — "Saved", "Saving…", or
   "Offline" — driven entirely by app.js watching Firestore's connection
   state, purely cosmetic (Firestore keeps writing to its local cache and
   syncing later regardless of what this says). */
.sync-status{ font-size:11px; font-weight:800; color:var(--ink-soft); }
.sync-status.is-saving{ color:var(--teal-deep); }
.sync-status.is-offline{ color:var(--amber-text); }

/* Shown in place of the calendar while signed out */
.signed-out-notice{
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:28px 24px;
  max-width:460px;
  margin:48px auto;
  text-align:center;
}
.signed-out-notice p{
  margin:0 0 16px;
  font-weight:700;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-soft);
}
.cta-journey{ margin:16px 0 0 !important; }
.cta-journey a{
  color:var(--coral-deep);
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  border-bottom:2px solid var(--coral-deep);
  padding-bottom:2px;
}
.cta-journey a:hover{ color:#d24d30; border-color:#d24d30; }
.cta-journey a:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

.privacy-note{
  margin:14px 0 0 !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:var(--ink-soft) !important;
  opacity:.85;
}

main{ padding:0 20px 40px; max-width:1200px; margin:0 auto; }

/* ---------- Footer (persistent link back to ariazli.com) ---------- */
.app-footer{
  text-align:center;
  padding:18px 20px 28px;
}
.app-footer p{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-soft);
}
.app-footer a{
  color:var(--coral-deep);
  font-weight:800;
  text-decoration:none;
  border-bottom:1.5px solid var(--coral-deep);
  padding-bottom:1px;
}
.app-footer a:hover{ color:#d24d30; border-color:#d24d30; }
.app-footer a:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.hint{
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  margin:0 0 12px;
}

/* ---------- Calendar grid ---------- */
.calendar-scroll{
  overflow:auto;
  max-height: calc(100vh - 210px);
  min-height:320px;
  border-radius:16px;
  box-shadow:var(--shadow);
  background:var(--card);
}

.calendar{
  display:grid;
  grid-template-columns: var(--gutter-width) 1fr;
  grid-template-rows: auto 1fr;
  min-width:680px;
}

.cal-corner{
  grid-column:1; grid-row:1;
  position:sticky; top:0; left:0; z-index:4;
  background:var(--card);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}

.cal-day-headers{
  grid-column:2; grid-row:1;
  position:sticky; top:0; z-index:3;
  background:var(--card);
  display:grid;
  grid-template-columns:repeat(7, minmax(84px, 1fr));
  border-bottom:1px solid var(--line);
}

.day-header{
  padding:10px 4px;
  text-align:center;
  border-left:1px solid var(--line);
}
.day-header:first-child{ border-left:none; }
.day-header .dow{ font-size:11px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.day-header .dom{ font-family:'Fredoka', sans-serif; font-size:19px; font-weight:600; margin-top:2px; }
.day-header.is-today .dom{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--coral-deep); color:#fff;
}

.cal-time-gutter{
  grid-column:1; grid-row:2;
  position:sticky; left:0; z-index:2;
  background:var(--card);
  border-right:1px solid var(--line);
}
.time-label{
  height:var(--hour-height);
  font-size:11px;
  font-weight:800;
  color:var(--ink-soft);
  text-align:right;
  padding-right:8px;
  transform:translateY(-7px);
  box-sizing:border-box;
}
.time-label:first-child{ transform:translateY(0); }

.cal-body{
  grid-column:2; grid-row:2;
  display:grid;
  grid-template-columns:repeat(7, minmax(84px, 1fr));
  position:relative;
}

.day-col{
  position:relative;
  border-left:1px solid var(--line);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--hour-height) - 1px),
    var(--line) calc(var(--hour-height) - 1px),
    var(--line) var(--hour-height)
  );
  cursor:pointer;
}
.day-col:first-child{ border-left:none; }
.day-col.is-today{ background-color: rgba(255,122,89,0.05); }

.now-line{
  position:absolute;
  left:0; right:0;
  height:0;
  border-top:2px solid var(--coral-deep);
  z-index:2;
  pointer-events:none;
}
.now-line::before{
  content:"";
  position:absolute;
  left:-4px; top:-4px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--coral-deep);
}

/* ---------- Task blocks ---------- */
.task-block{
  position:absolute;
  border-radius:8px;
  padding:5px 7px;
  overflow:hidden;
  cursor:grab;
  box-shadow:0 2px 6px rgba(92,64,35,0.18);
  border:1px solid rgba(0,0,0,0.06);
  transition:transform .1s ease, box-shadow .1s ease;
  /* iPhone/touch essentials: without touch-action:none Safari intercepts
     the gesture as a page-scroll before our pointer-drag code ever sees
     it move, and without the user-select/callout resets a press-and-hold
     pops up the text-selection magnifier instead of starting a drag. */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.task-block:hover{
  transform:scale(1.015);
  box-shadow:0 6px 14px rgba(92,64,35,0.28);
  z-index:5;
}
.task-block:active{ cursor:grabbing; }
.task-block.is-dragging{ opacity:.35; }
.task-block:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.task-block .tb-title{
  font-weight:800;
  font-size:12.5px;
  line-height:1.25;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.task-block .tb-meta{
  font-size:11px;
  font-weight:700;
  opacity:.85;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.task-block.over-allocated{
  box-shadow:0 0 0 2px var(--amber-border), 0 2px 6px rgba(92,64,35,0.18);
}

/* palette classes applied per task */
.tb-coral{ background:#FFDDD1; color:var(--coral-deep); }
.tb-gold{ background:#FFF0CC; color:#8a6006; }
.tb-teal{ background:#D8F3F6; color:var(--teal-deep); }
.tb-green{ background:#DEF6E1; color:var(--green-deep); }
.tb-violet{ background:#EAE4FC; color:var(--violet-deep); }

/* ---------- Modals ---------- */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(92,64,35,0.35);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  z-index:50;
}
.modal-backdrop[hidden]{ display:none; }

.modal{
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  width:100%;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  animation:zoomIn .16s ease-out;
}
@keyframes zoomIn{
  from{ transform:scale(.94); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
.task-modal{ max-width:420px; }
.zoom-modal{ max-width:560px; }

.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.modal-head h2{ font-size:20px; color:var(--coral-deep); }

.icon-btn{
  border:none; background:none; cursor:pointer;
  font-size:16px; color:var(--ink-soft);
  width:30px; height:30px; border-radius:8px;
}
.icon-btn:hover{ background:var(--sky-bottom); color:var(--ink); }

.modal-body{ padding:16px 20px; }

.field{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:800; color:var(--ink-soft); margin-bottom:12px; flex:1; }
.field input, .field select{
  font-family:'Nunito', sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  padding:9px 10px;
  border-radius:9px;
  border:1.5px solid var(--line);
  background:#fff;
}
.field input:focus{ outline:2px solid var(--teal); outline-offset:1px; }
.field-row{ display:flex; gap:10px; flex-wrap:wrap; }

.modal-foot{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px;
  border-top:1px solid var(--line);
}
.spacer{ flex:1; }

.btn{
  font-family:'Nunito', sans-serif;
  font-weight:800;
  font-size:14px;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  cursor:pointer;
}
.btn-primary{ background:var(--coral-deep); color:#fff; }
.btn-primary:hover{ background:#d24d30; }
.btn-ghost{ background:var(--sky-bottom); color:var(--ink-soft); }
.btn-ghost:hover{ background:#f3e8c9; }
.btn-danger{ background:#fff; color:var(--danger); border:1.5px solid var(--danger); }
.btn-danger:hover{ background:#FFF1EC; }

/* ---------- Zoom-in breakdown ---------- */
.zoom-parent-info{
  background:var(--sky-bottom);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
}
.zoom-parent-title{ font-family:'Fredoka', sans-serif; font-size:17px; font-weight:600; }
.zoom-parent-when{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.zoom-parent-total{ font-size:12.5px; font-weight:800; color:var(--ink-soft); display:flex; align-items:center; gap:6px; margin-left:auto; }
.zoom-parent-total input{
  width:64px;
  font-family:'Nunito', sans-serif;
  font-weight:800;
  font-size:14px;
  padding:6px 8px;
  border-radius:8px;
  border:1.5px solid var(--line);
  text-align:center;
}

.subtask-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.subtask-row{
  display:grid;
  grid-template-columns:64px 1fr 128px 30px;
  gap:8px;
  align-items:center;
}
.subtask-row .subtask-minutes{
  padding:8px 6px;
  text-align:center;
  border-radius:8px;
  border:1.5px solid var(--line);
  font-weight:800;
  font-family:'Nunito', sans-serif;
}
.subtask-row .subtask-desc{
  padding:8px 10px;
  border-radius:8px;
  border:1.5px solid var(--line);
  font-family:'Nunito', sans-serif;
  font-weight:700;
  width:100%;
}
.subtask-row .subtask-tag{
  padding:8px 8px;
  border-radius:8px;
  border:1.5px solid var(--line);
  font-family:'Nunito', sans-serif;
  font-weight:800;
  font-size:12.5px;
  color:var(--ink-soft);
  background:#fff;
  width:100%;
}
.subtask-row .subtask-tag.tag-coral{ background:#FDEAE4; border-color:#F3B9A6; color:#B44B2C; }
.subtask-row .subtask-tag.tag-teal{ background:#E4F6F6; border-color:#9FD6D6; color:#1F6E6E; }
.subtask-row .subtask-tag.tag-violet{ background:#EFE7F7; border-color:#C9AEE3; color:#6A3FA0; }
.subtask-row .subtask-tag.tag-gold{ background:#FBF1DC; border-color:#E7C77A; color:#8A6A16; }
.subtask-row input:focus, .subtask-row .subtask-tag:focus{ outline:2px solid var(--teal); outline-offset:1px; }

@media(max-width:520px){
  .subtask-row{ grid-template-columns:56px 1fr 30px; grid-template-areas:"min desc remove" "tag tag tag"; }
  .subtask-row .subtask-minutes{ grid-area:min; }
  .subtask-row .subtask-desc{ grid-area:desc; }
  .subtask-row .subtask-remove{ grid-area:remove; }
  .subtask-row .subtask-tag{ grid-area:tag; }
}
.subtask-remove{ color:var(--ink-soft); }
.subtask-remove:hover{ background:#FFF1EC; color:var(--danger); }

.btn-add-step{
  background:transparent;
  color:var(--teal-deep);
  border:1.5px dashed var(--teal);
  width:100%;
  padding:9px;
  border-radius:10px;
  margin-bottom:16px;
}
.btn-add-step:hover{ background:#EAFAFB; }

.allocation-summary{ margin-bottom:4px; }
.allocation-bar-track{
  height:10px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}
.allocation-bar-fill{
  height:100%;
  background:var(--green);
  border-radius:999px;
  transition:width .15s ease, background-color .15s ease;
}
.allocation-bar-fill.is-over{ background:var(--amber-border); }
.allocation-text{
  margin-top:6px;
  font-size:12.5px;
  font-weight:800;
  color:var(--ink-soft);
}
.allocation-text.is-over{ color:var(--amber-text); }

.over-time-banner{
  margin-top:12px;
  background:var(--amber-bg);
  border:1.5px solid var(--amber-border);
  color:var(--amber-text);
  border-radius:12px;
  padding:12px 14px;
}
.over-time-banner[hidden]{ display:none; }
.over-time-banner p{ margin:0 0 10px; font-weight:800; font-size:13.5px; line-height:1.4; }
.over-time-actions{ display:flex; gap:8px; justify-content:flex-end; }
.over-time-actions .btn-primary{ background:var(--amber-border); }
.over-time-actions .btn-primary:hover{ background:#cf9614; }

/* ---------- Practice reminder banner ---------- */
.practice-reminder{
  border-radius:14px;
  padding:13px 16px;
  margin-bottom:16px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.5;
}
.practice-reminder[hidden]{ display:none; }
.practice-reminder.is-needed{
  background:var(--amber-bg);
  border:1.5px solid var(--amber-border);
  color:var(--amber-text);
}
.practice-reminder.is-ontrack{
  background:#DEF6E1;
  border:1.5px solid var(--green-deep);
  color:var(--green-deep);
}

/* ---------- Practice targets (ABRSM marking-criteria tasks) ---------- */
.targets-panel{ margin-bottom:18px; }
.targets-panel[hidden]{ display:none; }
.targets-head{ margin-bottom:10px; }
.targets-head h2{ font-size:18px; color:var(--coral-deep); }
.targets-sub{ margin:4px 0 0; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.targets-summary{
  display:inline-block;
  margin:8px 0 0;
  padding:7px 14px;
  border-radius:999px;
  background:var(--card);
  border:1.5px solid var(--line);
  box-shadow:var(--shadow);
  font-size:13px;
  font-weight:800;
  color:var(--ink);
}

.targets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:12px;
}

.target-card{
  background:var(--card);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:14px 14px 12px;
  border-left:5px solid transparent;
}
.target-card.tc-coral{ border-left-color:var(--coral-deep); }
.target-card.tc-gold{ border-left-color:var(--gold-deep); }
.target-card.tc-teal{ border-left-color:var(--teal-deep); }
.target-card.tc-violet{ border-left-color:var(--violet-deep); }

.target-card h3{ font-size:15px; margin-bottom:4px; }
.target-desc{ margin:0 0 8px; font-size:12px; font-weight:700; color:var(--ink-soft); line-height:1.4; }

.target-total{
  display:inline-block;
  margin:10px 0 0;
  padding:3px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  background:#E3E3E3;
  color:#5A5A5A;
}

.target-tasks{ display:flex; flex-direction:column; gap:6px; }

.target-chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px;
  border-radius:9px;
  font-family:'Nunito', sans-serif;
  font-size:12.5px;
  font-weight:800;
  cursor:grab;
  border:1px solid rgba(0,0,0,0.06);
  /* Same iPhone essentials as .task-block above — these chips are
     draggable too. */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.target-chip:active{ cursor:grabbing; }
.target-chip.is-dragging{ opacity:.4; }
.target-chip .tc-title{ flex:1; }
.target-chip .tc-minutes{ opacity:.8; white-space:nowrap; font-size:11.5px; }
.target-chip:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* ---------- Drag & drop: ghost + drop preview ----------
   The ghost is what visibly follows your finger/cursor while dragging
   (built from a real .task-block/tb-<color> pair so it matches the real
   block's styling exactly); the drop preview is the dashed outline shown
   inside whichever day column is currently under the pointer, previewing
   where the block will land. Both are pointer-events:none so they never
   interfere with the elementFromPoint() hit-testing app.js uses to figure
   out what's under the pointer as it moves. */
.drag-ghost{
  position:fixed;
  left:0; top:0;
  z-index:300;
  pointer-events:none;
  transition:none;
  transform:scale(1.04) rotate(-1deg);
  box-shadow:var(--shadow-lg);
}
.drop-preview{
  position:absolute;
  left:2px; right:2px;
  border-radius:8px;
  border:2px dashed var(--teal-deep);
  background:rgba(63,182,201,0.14);
  pointer-events:none;
  z-index:4;
}
.day-col.is-drop-target{ background-color: rgba(63,182,201,0.09); }

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .app-header{ padding:14px 14px; }
  main{ padding:0 14px 32px; }
  .week-label{ min-width:0; font-size:13px; }
  .field-row{ flex-direction:column; }
  .zoom-parent-total{ margin-left:0; }
  .user-name{ max-width:80px; }
  .targets-grid{ grid-template-columns:1fr; }
}