/* ─────────────────────────────────────────────────────────────
   My Wage — soft neumorphic pastel theme
   Palette: Pink Orchid #CDB4DB · Pastel Pink #FFC8DD · Blush Pop #FFAFCC
            Icy Blue #BDE0FE · Sky Blue #A2D2FF
   ───────────────────────────────────────────────────────────── */
:root {
  --orchid: #CDB4DB;
  --pink: #FFC8DD;
  --blush: #FFAFCC;
  --icy: #BDE0FE;
  --sky: #A2D2FF;

  --bg: #EEF3FC;            /* very pale blue-lilac surface */
  --bg-2: #F4F1FB;
  --surface: #F1F5FD;
  --ink: #414C70;           /* soft deep blue-grey */
  --ink-strong: #343E61;
  --muted: #69739A;         /* ≥ 4.5:1 on --bg */
  --faint: #9AA3C2;
  --sky-deep: #3F6FA3;      /* readable text on sky tint */
  --blush-deep: #B24A78;    /* readable text on pink tint */

  --sd: rgba(150, 166, 205, .42);   /* shadow dark */
  --sl: rgba(255, 255, 255, .95);   /* shadow light */
  --raise: 9px 9px 22px var(--sd), -9px -9px 22px var(--sl);
  --raise-sm: 5px 5px 12px var(--sd), -5px -5px 12px var(--sl);
  --raise-xs: 3px 3px 7px var(--sd), -3px -3px 7px var(--sl);
  --inset: inset 4px 4px 9px var(--sd), inset -4px -4px 9px var(--sl);
  --inset-sm: inset 2px 2px 5px var(--sd), inset -2px -2px 5px var(--sl);

  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 18px;
  --pill: 999px;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tabbar-h: 74px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #F1F4FD 0%, var(--bg) 45%, #F2EFFA 100%) fixed;
  background-color: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
svg { display: block; }
[hidden] { display: none !important; }

/* Dreamy background shapes */
.bg-deco { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; }
.b1 { width: 260px; height: 260px; background: var(--pink); top: -90px; right: -80px; }
.b2 { width: 240px; height: 240px; background: var(--icy); top: 38%; left: -120px; opacity: .6; }
.b3 { width: 220px; height: 220px; background: var(--orchid); bottom: -60px; right: -90px; opacity: .32; }

/* ───────────── Layout ───────────── */
.view {
  position: relative; z-index: 1;
  max-width: 520px; margin: 0 auto;
  padding: calc(var(--safe-t) + 18px) 20px calc(var(--tabbar-h) + var(--safe-b) + 52px);
  outline: none;
}
.view > * { animation: rise .45s var(--ease) both; }
.view > *:nth-child(2) { animation-delay: .04s; }
.view > *:nth-child(3) { animation-delay: .08s; }
.view > *:nth-child(4) { animation-delay: .12s; }
.view > *:nth-child(5) { animation-delay: .16s; }
.view > *:nth-child(n+6) { animation-delay: .2s; }
.view.static > * { animation: none; } /* redraws of the same screen don't replay the entrance */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 22px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { white-space: nowrap; font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--ink-strong); line-height: 1.1; }
.brand p { white-space: nowrap; margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.page-title { font-size: 28px; font-weight: 800; color: var(--ink-strong); margin: 0; letter-spacing: -.015em; line-height: 1.15; }
.page-sub { margin: 2px 0 0; font-size: 14px; color: var(--muted); font-weight: 600; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--pill); font-size: 13px; font-weight: 700;
  background: var(--surface); box-shadow: var(--raise-xs); color: var(--ink);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blush); box-shadow: 0 0 0 3px rgba(255, 175, 204, .3); }

/* ───────────── Cards ───────────── */
.card {
  position: relative; background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--raise); padding: 22px; margin-bottom: 22px;
}
.card.tint-blue { background: linear-gradient(145deg, #F4F8FF, #EAF3FE); }
.card.tint-pink { background: linear-gradient(145deg, #FCF5FA, #F7EEF7); }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.card-title h2 { font-size: 17px; font-weight: 800; margin: 0; color: var(--ink-strong); }
.card-title .muted { font-size: 13px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ───────────── Hero (estimated net pay) ───────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 34px; padding: 26px 24px 24px; margin-bottom: 22px;
  background: linear-gradient(150deg, #FFF5FA 0%, #F6EEFB 42%, #E9F3FF 100%);
  box-shadow: 12px 12px 30px var(--sd), -10px -10px 26px var(--sl), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.hero .eyebrow { color: #7A6B98; }
.hero-amount {
  font-size: clamp(44px, 13vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
  color: var(--ink-strong); margin: 12px 0 2px; font-variant-numeric: tabular-nums;
}
.hero-amount .pence { font-size: .5em; letter-spacing: -.01em; color: var(--muted); }
.hero-label { flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.est-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--pill); background: rgba(255, 255, 255, .75); color: #8A5E86;
  box-shadow: var(--raise-xs);
}
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.hero-cta { margin-top: 16px; }

/* soft 3D spheres + sparkles */
.sphere { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.sp1 { width: 128px; height: 128px; right: -26px; top: -30px;
  background: radial-gradient(circle at 32% 30%, #FFFFFF 0%, #FFE3EE 26%, var(--pink) 58%, var(--blush) 100%);
  box-shadow: 10px 16px 30px rgba(255, 175, 204, .45); animation: float 7s ease-in-out infinite; }
.sp2 { width: 46px; height: 46px; right: 16px; top: 108px;
  background: radial-gradient(circle at 32% 30%, #FFFFFF 0%, #E3F1FF 30%, var(--icy) 62%, var(--sky) 100%);
  box-shadow: 6px 10px 18px rgba(162, 210, 255, .55); animation: float 6s ease-in-out -2s infinite; }
.sp3 { width: 18px; height: 18px; right: 124px; top: 20px;
  background: radial-gradient(circle at 32% 30%, #fff, var(--orchid)); opacity: .85; animation: float 5s ease-in-out -1s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sparkle { position: absolute; width: 14px; height: 14px; color: #fff; z-index: -1; filter: drop-shadow(0 1px 2px rgba(205, 180, 219, .9)); animation: twinkle 3.6s ease-in-out infinite; }
.sparkle svg { width: 100%; height: 100%; fill: currentColor; }
.sk1 { right: 76px; top: 116px; }
.sk2 { right: 150px; top: 24px; width: 10px; height: 10px; animation-delay: -1.4s; }
@keyframes twinkle { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ───────────── Hours meter ───────────── */
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.meter-value { white-space: nowrap; font-size: 26px; font-weight: 800; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.meter-value small { font-size: 15px; color: var(--muted); font-weight: 700; letter-spacing: 0; }
.meter { height: 16px; border-radius: var(--pill); box-shadow: var(--inset); padding: 3px; background: var(--surface); display: flex; gap: 3px; }
.meter-fill { height: 100%; border-radius: var(--pill); background: linear-gradient(90deg, var(--icy), var(--sky)); box-shadow: 0 2px 6px rgba(162, 210, 255, .7); transition: width .8s var(--ease); min-width: 0; }
.meter-extra { height: 100%; border-radius: var(--pill); background: linear-gradient(90deg, var(--pink), var(--blush)); box-shadow: 0 2px 6px rgba(255, 175, 204, .7); transition: width .8s var(--ease); }
.meter-note { margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ───────────── Rows / lists ───────────── */
.rows { display: grid; gap: 4px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; min-height: 44px; }
.row + .row { border-top: 1px solid rgba(150, 166, 205, .16); }
.row-label { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; color: var(--ink); min-width: 0; }
.row-label small { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.row-value { font-weight: 800; font-size: 17px; color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-value.neg { color: #7C6893; }
.row.total { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-md); box-shadow: var(--inset-sm); border-top: 0; background: linear-gradient(135deg, rgba(189, 224, 254, .28), rgba(255, 200, 221, .22)); }
.row.total .row-label { font-weight: 800; color: var(--ink-strong); }
.row.total .row-value { font-size: 21px; }
.ico { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; flex: none; box-shadow: var(--raise-xs); background: var(--surface); }
.ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.blue { color: #5B8FC7; background: linear-gradient(145deg, #F6FAFF, #E6F2FE); }
.ico.pink { color: #D46A98; background: linear-gradient(145deg, #FFF7FA, #FDEAF2); }
.ico.orchid { color: #9A74B3; background: linear-gradient(145deg, #FAF6FD, #F0E8F6); }

.calc { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ───────────── Buttons ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--pill);
  font-weight: 800; font-size: 16px; letter-spacing: .01em;
  background: var(--surface); box-shadow: var(--raise-sm); color: var(--ink-strong);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s;
  user-select: none; -webkit-user-select: none;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.btn:active, .btn.pressed { transform: scale(.975); box-shadow: var(--inset-sm); }
.btn-primary {
  color: #24476F;
  background: linear-gradient(145deg, #D2EAFF 0%, var(--icy) 40%, var(--sky) 100%);
  box-shadow: 7px 7px 18px rgba(128, 170, 225, .5), -6px -6px 16px var(--sl), inset 1px 1px 0 rgba(255, 255, 255, .8);
}
.btn-primary:active { box-shadow: inset 4px 4px 10px rgba(110, 160, 220, .5), inset -3px -3px 8px rgba(255, 255, 255, .6); filter: saturate(1.1); }
.btn-pink {
  color: #8C2F5A;
  background: linear-gradient(145deg, #FFE0EC 0%, var(--pink) 45%, var(--blush) 100%);
  box-shadow: 7px 7px 18px rgba(240, 150, 190, .45), -6px -6px 16px var(--sl), inset 1px 1px 0 rgba(255, 255, 255, .8);
}
.btn-pink:active { box-shadow: inset 4px 4px 10px rgba(230, 140, 180, .5), inset -3px -3px 8px rgba(255, 255, 255, .6); }
.btn-block { width: 100%; }
.btn-lg { min-height: 60px; font-size: 17px; }
.btn-ghost { box-shadow: none; background: transparent; color: var(--muted); min-height: 44px; }
.btn-danger { color: #B03A64; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.plus-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .7); box-shadow: var(--raise-xs); }
.plus-dot svg { width: 16px; height: 16px; }

.icon-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface); box-shadow: var(--raise-sm); color: var(--ink);
  transition: transform .15s var(--ease), box-shadow .2s;
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:active { transform: scale(.95); box-shadow: var(--inset-sm); }
.icon-btn[disabled] { opacity: .4; }

/* ───────────── Bottom navigation ───────────── */
.tabbar {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 12px);
  width: min(calc(100% - 24px), 460px); height: var(--tabbar-h);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px;
  border-radius: 28px;
  isolation: isolate;                       /* the two glass layers below sit behind the tabs, inside the navigation */
}
/* Frosted glass. Both layers belong to the navigation (they move and hide with it; nothing is fixed to the page).
   ::after is the bar itself — heavily blurred and whitened so nothing behind it can be read.
   ::before is a soft shelf just around the bar, blurring and whitening what sits right above and beside it,
   fading out at the top so it has no edge. The bar element itself has no backdrop-filter, so the shelf's
   blur sees the page (a parent backdrop-filter would hide the page from it). */
.tabbar::after, .tabbar::before { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.tabbar::after {
  inset: 0; border-radius: inherit;
  background: rgba(243, 246, 253, .84);
  box-shadow: 10px 10px 26px rgba(150, 166, 205, .45), -8px -8px 22px rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .6); /* the bar's own raised look, above the shelf */
  -webkit-backdrop-filter: blur(30px) saturate(1.25) brightness(1.06); backdrop-filter: blur(30px) saturate(1.25) brightness(1.06);
}
.tabbar::before {
  inset: -40px -24px calc(-12px - var(--safe-b)) -24px;
  background: linear-gradient(to bottom, rgba(242, 245, 252, .3), rgba(242, 245, 252, .88) 20px, rgba(242, 245, 252, .92));
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  /* soft edges: fades in over its top 20px and its outer 12px each side (on a phone the sides are off-screen) */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px), linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 20px), linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-composite: intersect;
}
/* No backdrop blur (older browsers): near-solid whites instead, so text behind still can't be read */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tabbar::after { background: rgba(243, 246, 253, .97); }
  .tabbar::before { background: linear-gradient(to bottom, rgba(242, 245, 252, 0), rgba(242, 245, 252, .92) 22px, rgba(242, 245, 252, .96)); }
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 20px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 0; white-space: nowrap; min-width: 0;
  transition: color .2s, box-shadow .25s var(--ease), background .25s;
}
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.tab:active svg { transform: scale(.9); }
.tab.active {
  color: #3D6A9E;
  background: linear-gradient(145deg, #F6FAFF, #E4F0FE);
  box-shadow: inset 3px 3px 7px rgba(150, 166, 205, .45), inset -3px -3px 7px rgba(255, 255, 255, .95), 0 0 16px rgba(162, 210, 255, .45);
}
.tab.active svg { stroke: #4F86C2; }

/* ───────────── Timesheet ───────────── */
.week-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.week-nav .center { flex: 1; text-align: center; min-width: 0; padding: 10px 12px; border-radius: 22px; box-shadow: var(--inset-sm); }
.week-nav .range { font-size: 17px; font-weight: 800; color: var(--ink-strong); }
.week-nav .paid { font-size: 13px; color: var(--muted); font-weight: 700; }
.today-link { display: block; margin: -10px auto 18px; }

.days { display: grid; gap: 12px; margin-bottom: 22px; }
.day {
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raise-sm);
  padding: 12px 14px 12px 12px; display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center;
}
.day.is-today { background: linear-gradient(145deg, #F7FAFF, #EDF4FE); }
.day-badge { width: 50px; height: 54px; border-radius: 16px; display: grid; place-items: center; align-content: center; box-shadow: var(--inset-sm); line-height: 1.05; }
.day-badge b { font-size: 19px; font-weight: 800; color: var(--ink-strong); }
.day-badge span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.day.is-today .day-badge { background: linear-gradient(145deg, var(--icy), var(--sky)); box-shadow: 0 4px 12px rgba(162, 210, 255, .6), inset 1px 1px 0 rgba(255, 255, 255, .8); }
.day.is-today .day-badge span, .day.is-today .day-badge b { color: #23456C; }
.day-body { display: grid; gap: 6px; min-width: 0; }
.shift {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; width: 100%;
  padding: 8px 10px; border-radius: 14px; transition: background .2s, box-shadow .2s;
}
.shift:active { box-shadow: var(--inset-sm); }
.shift-time { font-weight: 800; font-size: 15px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.shift-meta { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.shift-pay { text-align: right; flex: none; }
.shift-pay b { display: block; font-weight: 800; font-size: 16px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.shift-pay span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.add-day { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--pill); font-size: 14px; font-weight: 800; color: var(--muted); }
.add-day svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.add-day:active { box-shadow: var(--inset-sm); }
.day-empty { font-size: 14px; color: var(--faint); font-weight: 700; padding: 0 10px; }

/* Bonus field */
.money-field { position: relative; }
.money-field .cur { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--muted); font-size: 18px; pointer-events: none; }
.money-field input { padding-left: 40px; font-size: 20px; font-weight: 800; }

/* Details / breakdown */
details.breakdown { margin-top: 4px; }
details.breakdown summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--sky-deep); padding: 10px 2px 4px; display: inline-flex; align-items: center; gap: 6px; }
details.breakdown summary::-webkit-details-marker { display: none; }
details.breakdown summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; transition: transform .25s; }
details.breakdown[open] summary svg { transform: rotate(90deg); }
.bd { font-size: 13.5px; color: var(--muted); font-weight: 600; padding: 8px 14px 4px; border-radius: 16px; box-shadow: var(--inset-sm); margin-top: 6px; }
.bd div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-variant-numeric: tabular-nums; }
.bd b { color: var(--ink); font-weight: 800; }

.note {
  display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); font-weight: 600;
  padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .5); box-shadow: var(--inset-sm); margin-top: 14px;
}
.note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: #9A74B3; stroke-width: 2.2; stroke-linecap: round; }
.note.warn svg { stroke: #D46A98; }

/* ───────────── History ───────────── */
.ytd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ytd .stat { padding: 14px; border-radius: 20px; box-shadow: var(--inset-sm); }
.ytd .stat b { display: block; font-size: 21px; font-weight: 800; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ytd .stat span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.weeks { display: grid; gap: 14px; }
.week-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; text-align: left; width: 100%;
  padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raise-sm);
  transition: transform .15s var(--ease), box-shadow .2s;
}
.week-card:active { transform: scale(.985); box-shadow: var(--inset-sm); }
.week-card .wk-range { font-weight: 800; font-size: 16px; color: var(--ink-strong); }
.week-card .wk-sub { font-size: 13px; color: var(--muted); font-weight: 600; grid-column: 1; }
.week-card .wk-net { font-weight: 800; font-size: 19px; color: var(--ink-strong); text-align: right; font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; }
.week-card .wk-gross { font-size: 12.5px; color: var(--muted); font-weight: 700; text-align: right; grid-column: 2; }
.week-card.current { background: linear-gradient(145deg, #F7F9FF, #EEF4FE); }

.empty { text-align: center; padding: 34px 20px 28px; }
.empty .spheres { position: relative; height: 90px; width: 130px; margin: 0 auto 16px; }
.empty .spheres i { position: absolute; border-radius: 50%; }
.empty .spheres i:nth-child(1) { width: 70px; height: 70px; left: 10px; top: 10px; background: radial-gradient(circle at 32% 30%, #fff, var(--pink) 55%, var(--blush)); box-shadow: 6px 10px 20px rgba(255, 175, 204, .45); }
.empty .spheres i:nth-child(2) { width: 44px; height: 44px; left: 74px; top: 38px; background: radial-gradient(circle at 32% 30%, #fff, var(--icy) 55%, var(--sky)); box-shadow: 5px 8px 16px rgba(162, 210, 255, .5); }
.empty .spheres i:nth-child(3) { width: 16px; height: 16px; left: 94px; top: 6px; background: radial-gradient(circle at 32% 30%, #fff, var(--orchid)); }
.empty h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--ink-strong); }
.empty p { margin: 0 0 18px; color: var(--muted); font-weight: 600; font-size: 14.5px; }

/* ───────────── Forms ───────────── */
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field > label, .label { font-size: 13.5px; font-weight: 800; color: var(--ink); padding-left: 6px; }
.hint { font-size: 12.5px; color: var(--muted); font-weight: 600; padding-left: 6px; line-height: 1.45; }
.hint.ok { color: #3F7FB8; }
.hint.err { color: #B03A64; }
.input, select.input {
  width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: var(--pill);
  background: var(--surface); box-shadow: var(--inset);
  font-size: 17px; font-weight: 700; color: var(--ink-strong); outline: none;
  -webkit-appearance: none; appearance: none;
  caret-color: var(--sky-deep);
  transition: box-shadow .2s;
}
.input:focus { box-shadow: var(--inset), 0 0 0 3px rgba(162, 210, 255, .55); }
.input::placeholder { color: var(--faint); font-weight: 600; }
select.input {
  padding-right: 40px; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369739A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
input[type="time"].input, input[type="date"].input { display: flex; align-items: center; text-align: left; line-height: 52px; }
input[type="time"]::-webkit-date-and-time-value, input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.input.upper { text-transform: uppercase; letter-spacing: .06em; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.field, .input { min-width: 0; }

.static-value { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-radius: var(--pill); box-shadow: var(--inset-sm); font-weight: 800; color: var(--ink-strong); }
.static-value span { font-size: 12.5px; color: var(--muted); font-weight: 700; }

/* Toggle */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 4px 0 6px; }
.toggle-row .label { padding: 0; }
.switch { position: relative; width: 58px; height: 34px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: var(--pill); box-shadow: var(--inset-sm); background: var(--surface); transition: background .25s; }
.switch .knob { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); box-shadow: var(--raise-xs); transition: transform .3s var(--ease), background .3s; }
.switch input:checked ~ .track { background: linear-gradient(145deg, var(--pink), var(--blush)); box-shadow: inset 2px 2px 5px rgba(220, 130, 170, .5); }
.switch input:checked ~ .knob { transform: translateX(24px); background: #fff; }
.switch input:focus-visible ~ .track { outline: 3px solid rgba(162, 210, 255, .7); outline-offset: 2px; }

/* Settings groups */
.set-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.set-head h2 { font-size: 18px; font-weight: 800; margin: 0; color: var(--ink-strong); }
.set-head p { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.divider { height: 1px; background: rgba(150, 166, 205, .18); margin: 20px 4px; border: 0; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Chips (segmented) */
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.chip-btn {
  min-height: 46px; min-width: 0; padding: 0 4px; border-radius: var(--pill);
  font-weight: 800; font-size: 14px; color: var(--ink);
  background: var(--surface); box-shadow: var(--raise-xs);
  transition: box-shadow .2s var(--ease), background .2s, color .2s, transform .15s;
}
.chip-btn:active { transform: scale(.96); }
.chip-btn[aria-pressed="true"] {
  color: #8C2F5A; background: linear-gradient(145deg, #FFE6F0, var(--pink));
  box-shadow: inset 2px 2px 6px rgba(225, 140, 180, .45), inset -2px -2px 6px rgba(255, 255, 255, .8);
}

/* ───────────── Bottom sheet ───────────── */
.backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(90, 100, 140, .22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .25s ease both; }
.sheet {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px;
  max-height: calc(100dvh - var(--safe-t) - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 20px calc(var(--safe-b) + 22px);
  border-radius: 34px 34px 0 0;
  background: linear-gradient(180deg, #F5F8FE, var(--surface) 30%);
  box-shadow: 0 -12px 40px rgba(120, 136, 180, .28);
  /* backwards, not both: once open, no transform stays on the sheet — iOS Safari misplaces or hides the text
     cursor in fields inside a fixed, transformed container */
  animation: sheet-up .38s var(--ease) backwards;
}
.sheet.closing { animation: sheet-down .26s ease-in both; }
.backdrop.closing { animation: fade .26s ease reverse both; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.grabber { width: 44px; height: 5px; border-radius: 5px; background: rgba(150, 166, 205, .45); margin: 2px auto 14px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sheet-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink-strong); }

.daypicker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 12px; }
.dp {
  display: grid; place-items: center; align-content: center; gap: 1px; min-height: 58px; border-radius: 18px;
  background: var(--surface); box-shadow: var(--raise-xs); transition: box-shadow .2s, background .2s, transform .15s;
}
.dp:active { transform: scale(.95); }
.dp span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.dp b { font-size: 17px; font-weight: 800; color: var(--ink-strong); }
.dp[aria-pressed="true"] { background: linear-gradient(145deg, var(--icy), var(--sky)); box-shadow: inset 2px 2px 6px rgba(110, 160, 220, .45), inset -2px -2px 5px rgba(255, 255, 255, .7); }
.dp[aria-pressed="true"] span, .dp[aria-pressed="true"] b { color: #23456C; }
.dp.has { position: relative; }
.dp.has::after { content: ""; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--blush); }

.result {
  position: relative; overflow: hidden; border-radius: 26px; padding: 18px 20px; margin: 22px 0;
  background: linear-gradient(140deg, #FFF3F8, #F3EEFB 50%, #EAF4FF);
  box-shadow: var(--raise-sm);
}
.result .big { font-size: 34px; font-weight: 800; color: var(--ink-strong); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.result .big small { font-size: 17px; color: var(--muted); letter-spacing: 0; }
.result .eq { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.result .eq b { color: var(--ink-strong); font-weight: 800; }
.result .sparkle { right: 22px; top: 18px; width: 16px; height: 16px; }
.result.err .big { font-size: 20px; color: #B03A64; }

/* Self Assessment */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5em), 1fr)); gap: 8px; margin-bottom: 22px; }
.hero-note { margin: 14px 0 0; font-size: 13.5px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.hero-note b { color: var(--ink-strong); font-weight: 800; }
.sa-hero .sp1 { background: radial-gradient(circle at 32% 30%, #FFFFFF 0%, #E3F1FF 26%, var(--icy) 58%, var(--sky) 100%); box-shadow: 10px 16px 30px rgba(162, 210, 255, .5); }
.sa-hero .sp2 { background: radial-gradient(circle at 32% 30%, #FFFFFF 0%, #FFE3EE 30%, var(--pink) 62%, var(--blush) 100%); box-shadow: 6px 10px 18px rgba(255, 175, 204, .5); }
.sa-hero { background: linear-gradient(150deg, #EEF6FF 0%, #F3EEFB 50%, #FFF3F8 100%); }
.pick-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pick {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px 8px 8px; text-align: left;
  border-radius: 20px; background: var(--surface); box-shadow: var(--raise-xs);
  font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.25;
  transition: box-shadow .2s var(--ease), background .2s, transform .15s;
}
.pick .ico { width: 32px; height: 32px; border-radius: 11px; }
.pick:active { transform: scale(.97); }
.pick[aria-pressed="true"] {
  background: linear-gradient(145deg, #F2F8FF, #FDEFF5);
  box-shadow: inset 3px 3px 7px rgba(150, 166, 205, .42), inset -3px -3px 7px rgba(255, 255, 255, .95);
  color: var(--ink-strong);
}
.pick[aria-pressed="true"] .ico { box-shadow: 0 0 0 2px rgba(255, 175, 204, .55), var(--raise-xs); }
.exp-list { display: grid; gap: 8px; margin-bottom: 18px; }
.exp-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 12px; }
.exp-row label { font-size: 14px; font-weight: 700; color: var(--ink); padding-left: 6px; }
.exp-row.total { padding: 10px 14px; border-radius: 16px; box-shadow: var(--inset-sm); font-weight: 800; color: var(--ink-strong); margin-top: 4px; }
.exp-row.total b { text-align: right; font-variant-numeric: tabular-nums; }
.money-field.sm .input { min-height: 44px; font-size: 16px; padding-left: 34px; padding-right: 14px; }
.money-field.sm .cur { left: 16px; font-size: 15px; }
.bd em { font-style: normal; font-weight: 600; color: var(--faint); }

/* Annual Leave (Timesheet: Worked | Annual Leave) */
.mode-seg {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 6px; margin: -6px 0 22px;
  border-radius: var(--pill); background: var(--surface); box-shadow: var(--inset);
}
.mode-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px;
  border-radius: var(--pill); font-weight: 800; font-size: 15px; color: var(--muted); text-align: center;
  transition: background .25s var(--ease), box-shadow .25s var(--ease), color .2s, transform .15s;
}
.mode-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mode-btn:active { transform: scale(.97); }
.mode-btn[aria-selected="true"] { color: #2C5A8C; background: linear-gradient(145deg, #E8F3FF, var(--icy)); box-shadow: var(--raise-xs), inset 1px 1px 0 rgba(255, 255, 255, .8); }
.mode-btn.leave[aria-selected="true"] { color: #8C2F5A; background: linear-gradient(145deg, #FFE6F0, var(--pink)); }

.leave-hero { background: linear-gradient(150deg, #FFF3F8 0%, #F7EEFB 50%, #EEF5FF 100%); }
.leave-hero .hero-amount .pence { font-size: .42em; }
.leave-hero .meter-extra { min-width: 0; }
.leave-entry .shift-pay b { color: #A23E6C; }
.leave-days .dp[aria-pressed="true"] { background: linear-gradient(145deg, #FFE6F0, var(--pink)); box-shadow: inset 2px 2px 6px rgba(225, 140, 180, .45), inset -2px -2px 5px rgba(255, 255, 255, .7); }
.leave-days .dp[aria-pressed="true"] span, .leave-days .dp[aria-pressed="true"] b { color: #7A2650; }
.leave-days .dp.has::after { background: var(--orchid); }
.leave-result { background: linear-gradient(140deg, #FFF0F6, #F6EEFB 55%, #FFF6FA); }

.week-card.has-leave { background: linear-gradient(145deg, #FFF8FB, #F9F1F8); }
.leave-tag {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 5px 12px 5px 9px; border-radius: var(--pill); max-width: 100%;
  font-size: 12.5px; font-weight: 800; color: #8C2F5A;
  background: linear-gradient(145deg, #FFEAF2, var(--pink)); box-shadow: var(--raise-xs);
}
.leave-tag svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Analytics consent, Privacy & Feedback */
.consent-text { margin: -4px 0 16px; font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.55; }
.privacy-list p { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); line-height: 1.55; }
.privacy-list p b { color: var(--ink); font-weight: 800; }
.fb-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* one choice per line, as on Triple C */
.fb-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 14px;
  border-radius: 22px; font-weight: 800; font-size: 15px; color: #2C5A8C; text-align: center;
  background: linear-gradient(145deg, #EEF6FF, var(--icy)); box-shadow: var(--raise-sm), inset 1px 1px 0 rgba(255, 255, 255, .8);
  transition: transform .15s var(--ease), box-shadow .2s;
}
.fb-btn.pink { color: #8C2F5A; background: linear-gradient(145deg, #FFF0F6, var(--pink)); }
.fb-btn span { font-size: 19px; }
/* Feedback card emoji in full colour, as on Triple C (not the text font's outline glyphs) */
.feedback-card .emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; font-style: normal; font-weight: 400; }
.fb-btn:active { transform: scale(.97); box-shadow: var(--inset-sm); }
.fb-thanks { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; box-shadow: var(--inset-sm); background: rgba(255, 255, 255, .45); animation: fb-fade .3s ease both; }
@keyframes fb-fade { from { opacity: 0; } to { opacity: 1; } } /* fade only — no movement */
.fb-thanks p { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.fb-big { font-size: 28px; flex: none; }
.link-btn { font-weight: 800; color: var(--sky-deep); text-decoration: underline; text-decoration-color: rgba(63, 111, 163, .35); text-underline-offset: 3px; padding: 6px 4px; }
.input.textarea { min-height: 116px; padding: 14px 18px; border-radius: 24px; line-height: 1.5; resize: none; font-weight: 600; font-size: 16px; display: block; }

/* Scheduled vs Actual */
.var-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.var-badge {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px 9px; border-radius: var(--pill); font-size: 11.5px; font-weight: 800; line-height: 1.35;
  color: var(--ink); background: var(--surface); box-shadow: var(--raise-xs);
}
.var-badge svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.var-badge.ok { color: #2F6A55; background: linear-gradient(145deg, #F2FBF7, #E2F4EC); }
.var-badge.blue { color: #2C5A8C; background: linear-gradient(145deg, #F1F7FF, var(--icy)); }
.var-badge.pink { color: #8C2F5A; background: linear-gradient(145deg, #FFF1F6, var(--pink)); }
.var-badge.orchid { color: #6A4785; background: linear-gradient(145deg, #F8F3FB, #EADDF2); }
.sched-toggle { margin: -4px 0 12px; }
.sched-label { display: block; margin: 2px 0 8px; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; }
.var-panel { display: grid; gap: 12px; margin: 2px 0 18px; }
.var-panel:empty { display: none; }
.var-row { padding: 12px 14px 6px; border-radius: 20px; box-shadow: var(--inset-sm); background: rgba(255, 255, 255, .45); }
.var-row.ok { padding-bottom: 10px; }
.var-row .hint { margin: 8px 0 0; padding: 0; }
.var-row .var-badge { font-size: 13px; padding: 5px 12px; }
.var-switch { min-height: 48px; padding: 0; }
.var-switch .label { font-size: 14px; }
.sched-tag {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; max-width: 100%;
  padding: 5px 12px 5px 9px; border-radius: var(--pill); font-size: 12.5px; font-weight: 800; color: #2C5A8C;
  background: linear-gradient(145deg, #F1F7FF, var(--icy)); box-shadow: var(--raise-xs);
}
.sched-tag.ok { color: #2F6A55; background: linear-gradient(145deg, #F2FBF7, #E2F4EC); }
.sched-tag svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.leave-tag + .sched-tag, .sched-tag + .leave-tag { margin-top: 6px; }

/* Shift rows: wrap the pay column underneath only when there's no room for the text size */
.day-body { container-type: inline-size; }
@container (max-width: 9.5em) { .shift { flex-wrap: wrap; row-gap: 4px; } .shift-pay { text-align: left; flex: 1 1 100%; min-width: 0; } .shift-pay b, .shift-pay span { display: inline; } .shift-pay span { margin-left: 6px; } }

.calc-lines { margin-top: 10px; display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.calc-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.calc-lines span { flex: 1 1 auto; min-width: 0; }
.calc-lines b { flex: none; color: var(--ink); font-weight: 800; white-space: nowrap; }
.calc-lines .sum { border-top: 1px solid rgba(150, 166, 205, .3); padding-top: 5px; margin-top: 2px; color: var(--ink); font-weight: 800; }
.calc-lines .ref { opacity: .85; font-size: 12px; }

/* About */
.about { text-align: center; padding: 26px 22px 22px; }
.about-logo { display: block; width: 64px; height: 64px; margin: 2px auto 12px; border-radius: 18px; box-shadow: var(--raise-sm); }
.about .about-name { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink-strong); }
.about .set-head { text-align: left; }
.about-tag { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.about .divider { margin: 18px 30px; }
.about-credit { margin: 4px 0; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.about-credit b { font-weight: 800; color: var(--ink); }
.about-credit a { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; color: var(--sky-deep); text-decoration: none; background-image: linear-gradient(90deg, var(--pink), var(--sky)); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; padding: 2px 1px; border-radius: 4px; }
.about-credit a:active { opacity: .7; }
.about-credit a svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.about-version { display: inline-block; margin-top: 16px; padding: 5px 12px; border-radius: var(--pill); font-size: 12px; font-weight: 700; color: var(--muted); box-shadow: var(--inset-sm); letter-spacing: .02em; }

/* Toast */
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 28px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 20px; border-radius: var(--pill); font-weight: 800; font-size: 14.5px; color: var(--ink-strong);
  background: rgba(248, 250, 255, .96); box-shadow: 8px 8px 20px var(--sd), -6px -6px 16px var(--sl);
  transition: opacity .25s, transform .35s var(--ease); white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: "♡"; color: var(--blush); margin-right: 8px; }

.footnote { text-align: center; font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 8px 12px 0; line-height: 1.55; }
.heart { color: var(--blush); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 360px) {
  .topbar { gap: 8px; }
  .brand h1 { font-size: 19px; }
  .chip { font-size: 12px; padding: 7px 11px; }
  .meter-value { font-size: 22px; }
  .tab span { font-size: 10px; }
  .ytd .stat b { font-size: 17px; }
  .card { padding: 18px; }
  .view { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 700px) {
  .view { padding-top: 40px; }
}
/* ─────────────────────────────────────────────────────────────
   Narrow screens & large text
   Intrinsic rules below only take effect when content can't fit,
   so normal phone sizes look exactly the same. Nothing may ever
   cause horizontal page scrolling.
   ───────────────────────────────────────────────────────────── */
.view { container-type: inline-size; }
.topbar { row-gap: 12px; }
@container (max-width: 17em) { .topbar { flex-wrap: wrap; } .topbar > * { min-width: 0; max-width: 100%; } .topbar .chip { white-space: normal; } }

.row { flex-wrap: wrap; row-gap: 2px; }
.row-label { flex: 1 1 5.5rem; }
.row-value { flex: 0 0 auto; max-width: 100%; margin-left: auto; text-align: right; white-space: normal; overflow-wrap: anywhere; }
.hero-amount, .meter-value, .result .big, .wk-net, .ytd .stat b { overflow-wrap: anywhere; }

.pick-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); }

.daypicker { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sheet { width: 100%; container-type: inline-size; }
.sheet * { min-width: 0; }
@container (max-width: 19em) { .dp { overflow: hidden; } .dp span { font-size: .6em; letter-spacing: 0; } .daypicker { gap: 4px; } }

/* Info rows ("Weekly · Every week") wrap instead of pushing wider */
.static-value { flex-wrap: wrap; column-gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.static-value > * { min-width: 0; }

/* Two-button rows stack when the card is too narrow for the text size */
.card { container-type: inline-size; }
@container (max-width: 17em) { .btn-row { grid-template-columns: minmax(0, 1fr); } }

/* Bottom navigation: equal tabs that can never force the bar wider.
   Each tab hides its label (icon only, aria-label kept) when it's too
   narrow for the label at the current text size. */
.tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* 5 tabs, or 4 when Tax return is off — equal widths either way */
.tab { container-type: inline-size; }
@container (max-width: 5.5em) { .tab span { display: none; } .tab svg { width: 25px; height: 25px; } }

.toast { max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
/* Very large text: headings, chips, badges and breakdown lines wrap */
.card-title > *, .set-head > * { min-width: 0; }
.card-title > .btn, .card-title > .est-badge, .card-title > .ico { flex: none; }
.hero-foot .chip, .est-badge { max-width: 100%; white-space: normal; }
.bd div { flex-wrap: wrap; }
.bd div > b { margin-left: auto; overflow-wrap: anywhere; }
@container (max-width: 14em) { .dp span { display: none; } }
.day { grid-template-columns: 50px minmax(0, 1fr); }
.shift > * { min-width: 0; }
.meter-head > * { min-width: 0; }
@container (max-width: 15em) { .meter-head { flex-wrap: wrap; row-gap: 4px; } .meter-value { white-space: normal; } }
.shift-time, .shift-meta { overflow-wrap: anywhere; }
.toggle-row .label { flex: 1 1 auto; min-width: 0; }
.toggle-row .switch { flex: none; }
@container (max-width: 12em) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 14em) { .daypicker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page-title, .card-title h2, .set-head h2, .sheet-head h2, .about h2 { overflow-wrap: break-word; hyphens: auto; }
.page-sub, .hint, .note span, .footnote, .hero-label, .hero-note, .eyebrow { overflow-wrap: break-word; }

@media (max-width: 359px) {
  .tabbar { gap: 2px; padding: 7px; }
  .tab span { font-size: 9.5px; letter-spacing: -.01em; }
}
@media (max-width: 340px) {
  .btn-row { grid-template-columns: minmax(0, 1fr); }
  .daypicker { gap: 5px; }
  .dp span { font-size: 10px; letter-spacing: 0; }
}
@media (max-width: 319px) {
  .hero-amount { font-size: clamp(28px, 13vw, 44px); }
  .row.total .row-value { font-size: 18px; }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exp-row { grid-template-columns: minmax(0, 1fr) 112px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───────────── v1.4: job setup, payments to check, invoices ───────────── */
.setup-pick .pick { text-align: left; }
.pay-check .pc-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pay-check .pc-sum b { font-size: 28px; font-weight: 800; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pay-check .pc-sum span { font-weight: 800; color: var(--blush-deep); }
.pc-list { gap: 6px; }
.pc-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--raise-xs); }
.pc-item span { font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.pc-item small { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.pc-item b { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.xp { margin-top: 12px; }
.xp .label { display: block; margin-bottom: 8px; }
.xp .seg { margin-bottom: 6px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5em), 1fr)); }
.xp .chip-btn { padding: 6px 8px; line-height: 1.2; }
.xp .hint { padding: 0 6px; }

/* Invoices */
.inv-list { display: grid; gap: 8px; }
.inv-item .shift-meta { overflow-wrap: anywhere; }
.inv-back { margin: 0 0 6px -8px; }
.inv-actions { display: grid; gap: 12px; margin-bottom: 8px; }
.inv-edit-lines { display: grid; gap: 14px; }
.inv-edit-line { padding: 14px; border-radius: var(--r-md); box-shadow: var(--inset-sm); }
.inv-edit-line .field { margin-bottom: 12px; }
.inv-desc-input { min-height: 72px; }
.inv-edit-nums { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.inv-edit-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-weight: 700; color: var(--ink); padding: 0 4px; }
.inv-edit-foot b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.inv-edit-line { container-type: inline-size; }
@container (max-width: 15em) { .inv-edit-nums { grid-template-columns: minmax(0, 1fr); } }

.inv-doc { background: #fff; border-radius: var(--r-lg); box-shadow: var(--raise-sm); padding: 22px 20px; margin-bottom: 22px; color: var(--ink-strong); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; container-type: inline-size; }
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.inv-from { display: grid; gap: 2px; min-width: 0; }
.inv-from b { font-size: 16px; }
.inv-lic { font-weight: 800; color: var(--sky-deep); }
/* Settings → Invoicing → Saved clients */
.cl-list { display: grid; gap: 10px; }
.cl-card { display: grid; gap: 2px; padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--raise-xs); overflow-wrap: anywhere; min-width: 0; }
.cl-card b { color: var(--ink-strong); font-weight: 800; }
.cl-card > span { font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.cl-actions { display: flex; gap: 16px; margin-top: 4px; }
.cl-form { padding: 14px; border-radius: 20px; box-shadow: var(--inset-sm); margin-top: 12px; }
.cl-list .cl-form { margin-top: 0; }
.inv-word { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .02em; color: var(--ink-strong); }
.inv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5em), 1fr)); gap: 8px 14px; margin-bottom: 16px; }
.inv-meta div { min-width: 0; }
.inv-meta span, .inv-cap { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.inv-to, .inv-subject, .inv-block { display: grid; gap: 2px; margin: 0 0 14px; }
.inv-table { margin: 6px 0 10px; }
.inv-tr { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em 6em 6.5em; gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(150, 166, 205, .28); align-items: start; }
.inv-th { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.inv-tr > span:not(.inv-desc) { text-align: right; font-variant-numeric: tabular-nums; }
.inv-totals { display: grid; gap: 4px; margin: 12px 0 18px auto; max-width: 20em; }
.inv-totals div { display: flex; justify-content: space-between; gap: 12px; }
.inv-totals b { font-variant-numeric: tabular-nums; text-align: right; }
.inv-due { font-weight: 800; font-size: 17px; border-top: 2px solid var(--ink-strong); padding-top: 6px; margin-top: 2px; }
@container (max-width: 26em) {
  .inv-th { display: none; }
  .inv-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .inv-desc { grid-column: 1 / -1; font-weight: 700; }
  .inv-tr > span.inv-q, .inv-tr > span.inv-p { text-align: left; color: var(--muted); font-size: 13px; grid-column: 1; }
  .inv-tr > span.inv-a { grid-column: 2; grid-row: 2 / 4; align-self: end; font-weight: 800; }
  .inv-q::before { content: 'Qty '; }
  .inv-p::before { content: '@ '; }
}

/* Print / Save as PDF: only the invoice */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  .bg-deco, .tabbar, .toast, #sheet-root, .no-print, .inv-actions { display: none !important; }
  .view { padding: 0 !important; max-width: none !important; }
  .inv-doc { box-shadow: none !important; border-radius: 0; padding: 0; margin: 0; font-size: 12pt; }
}
/* Longer header chips (e.g. "First payday Fri 30 Oct") drop below the title instead of overflowing */
.topbar:has(> .chip-note) { flex-wrap: wrap; }
.topbar > .chip-note { max-width: 100%; white-space: normal; }
/* Saved invoice rows: long IDs wrap; amount moves under the details on very narrow cards */
.inv-list { container-type: inline-size; }
.inv-item .shift-time { overflow-wrap: anywhere; }
.inv-item > div:first-child { min-width: 0; }
@container (max-width: 15em) { .inv-item { flex-wrap: wrap; row-gap: 4px; } .inv-item .shift-pay { text-align: left; flex: 1 1 100%; } .inv-item .shift-pay b, .inv-item .shift-pay span { display: inline; } .inv-item .shift-pay span { margin-left: 6px; } }
/* Money on invoices never breaks inside a number; the label wraps instead */
.inv-totals div { flex-wrap: wrap; }
.inv-totals b, .inv-tr > span.inv-q, .inv-tr > span.inv-p, .inv-tr > span.inv-a { white-space: nowrap; overflow-wrap: normal; }
.inv-totals b { margin-left: auto; }

/* ───────────── v1.4: rota upload + About ───────────── */
.rota-src { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); }
.rota-src .pick { cursor: pointer; text-align: left; }
.rota-preview { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--inset-sm); background: #fff; }
.rota-reading { text-align: center; padding-top: 28px; padding-bottom: 28px; }
.rota-reading .spheres { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.rota-reading .spheres i { width: 12px; height: 12px; border-radius: 50%; background: var(--sky); animation: rota-pulse 1s var(--ease) infinite alternate; }
.rota-reading .spheres i:nth-child(2) { background: var(--blush); animation-delay: .2s; }
.rota-reading .spheres i:nth-child(3) { background: var(--orchid); animation-delay: .4s; }
@keyframes rota-pulse { to { transform: translateY(-6px); opacity: .5; } }
.rota-rows { display: grid; }
.rota-row.needs { box-shadow: var(--raise-sm), inset 0 0 0 2px rgba(255, 175, 204, .7); }
.rota-row .card-title h2 { overflow-wrap: anywhere; }
.rota-dup { padding: 12px; border-radius: var(--r-md); box-shadow: var(--inset-sm); margin-bottom: 12px; }
.rota-dup .seg { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5em), 1fr)); }
.rota-dup .chip-btn { padding: 6px 8px; line-height: 1.2; }
.rota-raw { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
/* Who you are on a rota, and choosing your line */
.rota-me { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.rota-me b { color: var(--ink-strong); font-weight: 800; }
.rota-me span { color: var(--muted); font-weight: 700; }
.rota-people { display: grid; gap: 10px; }
.rota-person { width: 100%; padding: 12px 14px; justify-content: space-between; cursor: pointer; }
.rp-main { display: grid; gap: 3px; min-width: 0; }
.rp-name { font-size: 15px; font-weight: 800; color: var(--ink-strong); overflow-wrap: anywhere; }
.rp-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.rota-person .var-badge { justify-self: start; }
/* Add to calendar */
.cal-list { display: grid; gap: 8px; }
.cal-shift { width: 100%; padding: 10px 14px 10px 10px; cursor: pointer; }
.cal-shift[disabled] { cursor: default; opacity: .78; }
.cal-shift .var-badge { justify-self: start; margin-top: 2px; }
.cal-tick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--surface); box-shadow: var(--inset-sm); color: var(--sky-deep); }
.cal-tick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-shift[aria-pressed="true"] .cal-tick { background: linear-gradient(145deg, #E3F1FF, var(--icy)); }
.cal-scope { margin-bottom: 16px; }
.rota-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 600 12.5px/1.5 var(--font); color: var(--ink); margin: 8px 0 0; max-height: 40vh; overflow: auto; }
.about-info { text-align: left; margin: 14px 0 0; }
.about-info p { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.55; }
.about-info .about-sub { margin-bottom: 4px; font-weight: 800; }
.about-info ul { margin: 0 0 12px; padding-left: 20px; }
.about-info li { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5; margin-bottom: 4px; }
.about-info li::marker { color: var(--blush); }

/* Feedback: Change answer under the thank-you message */
.fb-change { margin: 12px 0 0; text-align: center; }

/* Settings: sections that open and close (one at a time) */
.acc-head { width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-md); -webkit-tap-highlight-color: transparent; }
.acc-head > div { flex: 1 1 auto; }
.acc-head[aria-expanded="true"] { margin-bottom: 18px; }
.acc-head:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 6px; }
.acc-chev { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; box-shadow: var(--raise-xs); color: var(--muted); }
.acc-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .2s var(--ease); }
.acc-head[aria-expanded="true"] .acc-chev { box-shadow: var(--inset-sm); color: var(--sky-deep); }
.acc-head[aria-expanded="true"] .acc-chev svg { transform: rotate(-90deg); }
.acc-head:active .acc-chev { box-shadow: var(--inset-sm); }

/* Settings: About at the top — compact identity, the rest behind "Read more" */
.about { text-align: left; padding: 20px 22px 14px; }
.about-id { display: flex; align-items: center; gap: 14px; }
.about-id .about-logo { flex: none; width: 58px; height: 58px; margin: 0; border-radius: 16px; }
.about-id-text { min-width: 0; }
.about-id .about-version { margin-top: 8px; }
.about-by { margin: 14px 0 0; }
.about-more { margin-top: 4px; }
.about-more .about-credit { margin-top: 2px; }
.about-toggle { display: inline-block; margin: 6px 0 0 -4px; }

/* Annual Leave: the remaining amount in the other units, under the big figure */
.hero-eq { margin: -2px 0 4px; font-size: 14px; font-weight: 700; color: var(--muted); }

/* Settings groups (About · Feedback · Privacy & data · Pay & work) — small caps labels above the cards */
.set-label { margin: 26px 6px 10px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.topbar + .set-label { margin-top: 6px; }
.about-desc { margin-top: 16px; }
.about-desc p { margin-bottom: 4px; }
.about-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 4px 0 0 -4px; }
.about-links > span { color: var(--muted); font-weight: 800; }
.about-links .about-toggle { margin: 0; }
.about .about-by { margin: 12px 0 2px; padding-top: 12px; border-top: 1px solid rgba(105,115,154,.14); text-align: center; }
/* Add to calendar: Share / Download under the main button, one per line so the labels always fit */
.cal-more { grid-template-columns: 1fr; gap: 10px; }
/* Add to calendar → choose your calendar */
.cal-dest { align-items: center; }
.cal-dest-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; box-shadow: var(--raise-sm); color: var(--sky-deep); }
.cal-dest-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cal-dest[disabled] { opacity: .55; }