/* Screen layouts: app frame, header, Today cards, XP bar, tab bar, toast.
   Everything is measured in the pixel unit --u (3px on phones, 4px on tablets, 4-5px on desktop),
   so spacing stays in whole units at every size. Sizes are set in css/tokens.css.
   Phone = the approved design. Tablet centres it. Desktop uses two columns and a side rail. */

/* ---------- App frame: scrolling screen, tab bar at the bottom (a side rail on desktop) ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.screen {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen__inner {
  max-width: calc(var(--u) * 160);   /* phone / landscape phone: 480px */
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--u) * 8) calc(var(--u) * 5) calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

/* ---------- Header: title, level chip, ... button ---------- */
.head { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.head__row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); }
.head__right { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-shrink: 0; }

.chip .px__fill { flex-direction: row; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.chip--lv .px__fill { padding: var(--u) calc(var(--u) * 2); }
.chip--lv .sprite { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.chip--menu .px__fill,
.chip--back .px__fill { padding: calc(var(--u) * 3); font-family: var(--font-ui); font-weight: 700; font-size: calc(18px * var(--s)); line-height: calc(var(--u) * 8); }
.chip--menu { min-width: 44px; }
/* Way back to the title screen: a small link above the title (the header row has no room for another button on a small phone) */
.head__home { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 -8px; padding: 0 var(--u); text-decoration: none; }
.chip--back .px__fill { padding: calc(var(--u) * 3) calc(var(--u) * 4); font-family: var(--font-body); font-weight: 800; font-size: calc(14px * var(--s)); }

/* ---------- Energy row ---------- */
.energy { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.energy__btn { flex: 1 1 0; min-width: 0; width: 0; }   /* equal widths, even inside Safari buttons */
.energy__btn .px__fill { padding: calc(var(--u) * 2) var(--u); font-weight: 800; font-size: calc(14px * var(--s)); line-height: calc(var(--u) * 6); }

/* ---------- Today layout: one column; two columns on desktop (quests left, XP right) ---------- */
.today__grid, .today__main { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }

/* ---------- Quest cards ---------- */
.card .px__fill { padding: calc(var(--u) * 3) calc(var(--u) * 4); }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 3); margin-bottom: var(--u); }
.card__note { font-weight: 700; font-size: calc(13px * var(--s)); line-height: calc(var(--u) * 6); color: var(--muted); margin-top: calc(var(--u) * 2); }
.card__text { font-weight: 700; font-size: calc(15px * var(--s)); line-height: calc(var(--u) * 7); }
.card--body .px__fill { padding: calc(var(--u) * 2) calc(var(--u) * 4); }

/* One quest = one big tap target: tick box + text (+ XP tag) */
.quest {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  width: 100%;
  min-height: calc(var(--u) * 12);
  user-select: none;
}
.quest .sprite { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.quest__text { flex: 1; font-weight: 800; font-size: calc(15px * var(--s)); line-height: calc(var(--u) * 7); overflow-wrap: anywhere; }
.quest--main { min-height: calc(var(--u) * 14); }
.quest--main .quest__text { font-size: calc(18px * var(--s)); line-height: calc(var(--u) * 8); }
.quest--mini .quest__text,
.quest--body .quest__text { font-size: calc(14px * var(--s)); line-height: calc(var(--u) * 6); }
/* Done = tick AND crossed-out text, never colour alone */
.quest.is-done .quest__text { text-decoration: line-through; text-decoration-thickness: 2px; }
.quest__xp { font-weight: 800; font-size: calc(13px * var(--s)); color: var(--muted); }

.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(var(--u) * 3); }

/* ---------- Adding and editing quests ---------- */
.card__tools { display: flex; align-items: center; gap: calc(var(--u) * 3); flex-shrink: 0; }
/* Small text button: Edit, Done, Remove, Close */
.link-btn {
  flex-shrink: 0;
  min-height: calc(var(--u) * 12);
  padding: 0 var(--u);
  font-weight: 800; font-size: calc(13px * var(--s)); line-height: calc(var(--u) * 6);
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* "+ Add a side quest" */
.add-btn {
  width: 100%;
  min-height: calc(var(--u) * 12);
  font-weight: 800; font-size: calc(14px * var(--s)); line-height: calc(var(--u) * 6);
  color: var(--muted);
}
.add-form, .edit-row { display: flex; align-items: center; gap: calc(var(--u) * 3); min-height: calc(var(--u) * 14); }
.add-form { margin-top: var(--u); }
/* Text box: 16px text or more so phones don't zoom in when typing */
.field {
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 3);
  border: var(--u) solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: calc(16px * var(--s));
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: var(--muted); opacity: 1; }
.chip--small .px__fill { padding: calc(var(--u) * 2) calc(var(--u) * 3); font-weight: 800; font-size: calc(14px * var(--s)); line-height: calc(var(--u) * 6); }

/* ---------- Day XP and level ---------- */
.dayxp { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin-top: var(--u); }
.dayxp__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(var(--u) * 2); }
.pips { display: flex; gap: var(--u); }
.pip { flex: 1 1 0; height: calc(var(--u) * 6); border: var(--u) solid var(--ink); background: var(--white); }
.pip.is-full { background: var(--sunshine); }
.lvbar { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.lvbar__track { flex: 1; height: calc(var(--u) * 4); border: var(--u) solid var(--ink); background: var(--white); }
.lvbar__fill { display: block; height: 100%; background: var(--grass); }
.lvbar__togo { flex-shrink: 0; font-weight: 800; font-size: calc(12px * var(--s)); color: var(--muted); }

/* ---------- Tab bar: Royal Purple, 24 units tall ---------- */
.tabbar {
  flex-shrink: 0;
  background: var(--purple);
  border-top: var(--u) solid var(--ink);
  padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 3 + env(safe-area-inset-bottom));
}
.tabbar__inner {
  max-width: calc(var(--u) * 160);
  margin: 0 auto;
  height: calc(var(--u) * 17);   /* border 1 + padding 3 + 17 + padding 3 = 24 units */
  display: flex;
  gap: calc(var(--u) * 2);
}
.tab {
  --frame: var(--frame-soft);
  flex: 1 1 0; min-width: 0; width: 0;   /* equal widths, even inside Safari buttons */
  filter: none;
  user-select: none;
}
.tab .px__fill {
  justify-content: center;
  align-items: center;
  font-weight: 800; font-size: calc(14px * var(--s)); line-height: calc(var(--u) * 6);
  color: var(--ink);
}
/* Selected tab: Title Pink with navy text and the ink shadow */
.tab[aria-current="page"] {
  --frame: var(--ink);
  --fill: var(--title-pink); --hi: var(--pink-light); --shade: var(--pink-shade);
  filter: drop-shadow(var(--u) var(--u) 0 var(--ink));
}
/* Coming-soon tabs: greyed out */
.tab--soon { cursor: default; }
.tab--soon .px__fill { color: var(--muted); }
.tab--soon { --fill: var(--cloud); --hi: var(--cloud); --shade: var(--cloud); }

/* ---------- Toast: one calm line, hides itself ---------- */
.toast {
  position: fixed;
  left: calc(var(--rail) + var(--u) * 5); right: calc(var(--u) * 5);
  bottom: calc(var(--u) * 27 + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.toast[hidden] { display: none; }
.toast .px__fill { padding: calc(var(--u) * 3) calc(var(--u) * 4); font-weight: 800; font-size: calc(14px * var(--s)); line-height: calc(var(--u) * 6); text-align: center; }

/* ---------- Settings ---------- */
/* Settings stays a comfortable reading width on every screen */
.screen__inner.screen__inner--narrow { max-width: calc(var(--u) * 180); }
.row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 4); }
.row__text { flex: 1; min-width: 0; }
.row__title { display: block; font-weight: 800; font-size: calc(18px * var(--s)); line-height: calc(var(--u) * 7); color: var(--ink); }
.row__sub { font-weight: 700; font-size: calc(14px * var(--s)); line-height: calc(var(--u) * 6); color: var(--muted); }
.settings__version { text-align: center; margin-top: calc(var(--u) * 2); }
.field--block { width: 100%; margin-top: calc(var(--u) * 2); }

/* On / off switch: white and knob left = off; green and knob right = on */
.switch {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-start;
  width: calc(var(--u) * 18); height: calc(var(--u) * 10);
  padding: var(--u);
  border: var(--u) solid var(--ink);
  background: var(--white);
  cursor: pointer;
}
.switch[aria-checked="true"] { background: var(--grass); justify-content: flex-end; }
.switch__knob { width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: var(--ink); }

/* Big text buttons (Export, Import, Reset...) */
.btn-row { display: flex; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3); }
.btn { flex: 1 1 0; min-width: 0; width: 0; cursor: pointer; user-select: none; --frame: var(--ink); }
.btn .px__fill { justify-content: center; align-items: center; min-height: calc(var(--u) * 14); padding: 0 calc(var(--u) * 3); text-align: center; font-weight: 800; font-size: calc(16px * var(--s)); line-height: calc(var(--u) * 6); }
.px--ink { --fill: var(--ink); --hi: var(--ink); --shade: var(--ink); color: var(--white); }   /* white on navy passes */
.confirm { margin-top: calc(var(--u) * 3); }
.confirm__q { font-weight: 800; font-size: calc(16px * var(--s)); line-height: calc(var(--u) * 7); }

/* ================= Tablet: content centred in a wider column ================= */
@media (min-width: 600px) and (min-height: 560px) {
  .screen__inner { max-width: calc(var(--u) * 180); }   /* 720px */
  .tabbar__inner { max-width: calc(var(--u) * 180); }
}

/* ================= Desktop: side rail and two columns ================= */
@media (min-width: 1024px) and (min-height: 560px) {
  .app { flex-direction: row; }
  .screen__inner { max-width: 1100px; padding-top: calc(var(--u) * 10); }   /* 1100 is whole units at both 4px and 5px */

  /* Tab bar moves to a purple rail on the left. Tabs stack; selected one stays Title Pink. */
  .tabbar {
    order: -1;
    width: var(--rail);
    border-top: 0;
    border-right: var(--u) solid var(--ink);
    padding: calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 4);
  }
  .tabbar__inner { flex-direction: column; height: auto; max-width: none; margin: 0; gap: calc(var(--u) * 3); }
  .tab { flex: none; width: 100%; min-height: calc(var(--u) * 14); }
  .toast { bottom: calc(var(--u) * 8); }

  /* Quests on the left, XP and level on the right (stays in view while the quests scroll) */
  .today__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: calc(var(--u) * 5); align-items: start; }
  .today__side { position: sticky; top: calc(var(--u) * 5); }
  .today__side .dayxp { margin-top: 0; padding: calc(var(--u) * 4); background: var(--white); border: var(--u) solid var(--ink); }
}