/* Caregiver app. Same look as the approved mockups: Nunito, the dongle's task colours. */
@font-face { font-family: "Nunito"; font-weight: 600; src: url("fonts/nunito-latin-600-normal.woff") format("woff"); }
@font-face { font-family: "Nunito"; font-weight: 700 800; src: url("fonts/nunito-latin-700-normal.woff") format("woff"); }

:root {
  --bg: #eef1f5; --phone: #ffffff; --fg: #1a2232; --muted: #667185; --card: #f4f6f9; --line: #e3e8ef;
  --accent: #13766D; --accent-soft: #dff3f0; --accent-fg: #ffffff;
  --warn: #b45309; --warn-soft: #fff4e0; --bad: #c2362f; --bad-soft: #fde9e7; --good: #1f8a52; --good-soft: #e3f6ea;
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0b0f15; --phone: #151b25; --fg: #e9eef5; --muted: #97a2b4; --card: #1d2532; --line: #2b3546;
  --accent: #2BB5A8; --accent-soft: #123a37; --accent-fg: #06201d;
  --warn: #f5b24a; --warn-soft: #3a2a10; --bad: #f2776f; --bad-soft: #3d1b19; --good: #4fd08a; --good-soft: #143322;
  color-scheme: dark } }

* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; font-weight: 600 }
button, input, select { font: inherit }
.app { max-width: 520px; height: 100%; margin: 0 auto; background: var(--phone); display: flex; flex-direction: column; position: relative }
.view { flex: 1; overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 16px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0 }
.tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); padding: 6px 4px max(10px, env(safe-area-inset-bottom)); background: var(--phone) }
.tabs button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; color: var(--muted); cursor: pointer; padding: 4px 0 }
.tabs button[aria-current="page"] { color: var(--accent) }
.tabs svg { width: 24px; height: 24px }

.top { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.top h1 { font-size: 24px; font-weight: 800; margin: 0 }
.sub { color: var(--muted); font-size: 13px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px }
.card.list { padding: 2px 12px }
.row { display: flex; align-items: center; gap: 10px; min-width: 0 }
.grow { flex: 1; min-width: 0 }
.btn { font-weight: 800; font-size: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--phone); color: var(--fg); padding: 9px 13px; cursor: pointer; text-align: center; text-decoration: none; display: inline-block }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent) }
.btn.danger { color: var(--bad); border-color: var(--bad); background: var(--phone) }
.btn.wide { width: 100% }
.btn:disabled { opacity: .5; cursor: default }
.pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap }
.p-good { background: var(--good-soft); color: var(--good) } .p-bad { background: var(--bad-soft); color: var(--bad) }
.p-warn { background: var(--warn-soft); color: var(--warn) } .p-acc { background: var(--accent-soft); color: var(--accent) }
.p-mute { background: var(--card); color: var(--muted); border: 1px solid var(--line) }
.banner { border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4 }
.banner b { display: block }
.b-acc { background: var(--accent-soft) } .b-warn { background: var(--warn-soft) } .b-bad { background: var(--bad-soft) }
.banner .links { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap }
.big { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums }
.meter { height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 8px }
.meter i { display: block; height: 100%; border-radius: 6px; background: var(--good) }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 10px; font-size: 13px; color: var(--muted) }
.facts b { color: var(--fg) }
.sect { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 4px 2px -4px }
.hint { font-size: 12px; color: var(--muted) }
.hint.over { color: var(--bad) }
.empty { color: var(--muted); text-align: center; padding: 18px 8px; line-height: 1.5 }

.tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none }
.tile img { width: 36px; height: 36px }
.tline { display: flex; flex-direction: column; gap: 6px }
.item { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: inherit; text-align: left; padding: 4px; margin: 0 -4px; border-radius: 12px; width: calc(100% + 8px) }
button.item, .item.tap { cursor: pointer } button.item:hover, .item.tap:hover { background: var(--card) }
.taskbtn { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 3px 8px 3px 6px; border: 1.5px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 12px; background: var(--card); cursor: pointer }
.taskbtn:hover { border-color: var(--muted) } .taskbtn:active { transform: scale(.99) }
.taskbtn .grow { min-width: 0 } .item .taskbtn .time { width: 54px }
.taskbtn.tinted, .taskbtn.tinted .time { color: #1a2232 } .taskbtn.tinted .meta { color: #4a5568 }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin: -2px 0 8px }
.legend span { display: inline-flex; align-items: center; gap: 5px } .legend i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent) }
.item .edit { padding: 6px 11px; font-size: 13px; flex: none }
.item .time { width: 62px; white-space: nowrap; font-weight: 800; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none }
.item .name { font-weight: 800; font-size: 15px }
.item .meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.now { border: 2px solid var(--accent) }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px }
.week button { border: 0; background: none; text-align: center; padding: 6px 0; border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer }
.week button b { display: block; font-size: 16px; color: var(--fg) }
.week button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg) }
.week button[aria-pressed="true"] b { color: var(--accent-fg) }

.dayhead { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px }
.weekrow { display: flex; align-items: center; gap: 2px }
.weekrow .week { flex: 1 }
.arrow { border: 0; background: none; color: var(--muted); font-size: 24px; font-weight: 800; width: 30px; height: 40px; cursor: pointer; border-radius: 10px; flex: none }
.arrow:hover { background: var(--card) }
.week button.is-today:not([aria-pressed="true"]) b, .mgrid button.is-today:not([aria-pressed="true"]) { color: var(--accent) }
.mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 6px; text-align: center }
.mgrid .dow { font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px 0 }
.mgrid button { border: 0; background: none; color: var(--fg); font-weight: 800; font-size: 14px; padding: 7px 0 9px; border-radius: 10px; cursor: pointer; position: relative }
.mgrid button i { position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent) }
.mgrid button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg) }
.mgrid button[aria-pressed="true"] i { background: var(--accent-fg) }
.wifiadd { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.field label, .flabel { font-size: 12px; font-weight: 800; color: var(--muted) }
.field input, .field select, input.small, select.small { font-weight: 700; font-size: 15px; color: var(--fg); background: var(--phone); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; min-width: 0 }
input.small, select.small { width: auto; padding: 6px 8px; text-align: right }
input[type=color] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--phone) }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { font-size: 13px; font-weight: 800; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--phone); color: var(--muted); cursor: pointer }
.chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent) }
.swatches { display: flex; gap: 7px; flex-wrap: wrap }
.swatches button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0 }
.swatches button[aria-pressed="true"] { border-color: var(--fg) }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px }
.setting:last-child { border-bottom: 0 }
.setting .v { color: var(--muted); font-size: 13px; text-align: right }
.lock { display: block; font-size: 11px; font-weight: 800; color: var(--muted) }
.sw { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: none; border: 0; cursor: pointer; padding: 0 }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s }
.sw[aria-checked="true"] { background: var(--accent) } .sw[aria-checked="true"]::after { left: 21px }

.preview { display: flex; gap: 14px; align-items: center }
.dongle { width: 108px; height: 200px; border-radius: 14px; border: 6px solid #20242c; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 6px; color: #fff; overflow: hidden }
.dongle.land { width: 200px; height: 108px; flex-direction: row }
.dongle .pcard { width: 78px; height: 78px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none }
.dongle .pcard img { width: 68px; height: 68px }
.dongle .dname { font-weight: 800; font-size: 14px; text-align: center; line-height: 1.1; overflow-wrap: anywhere }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.pgrid button { aspect-ratio: 1; border-radius: 14px; border: 3px solid transparent; display: grid; place-items: center; cursor: pointer; padding: 0 }
.pgrid button img { width: 80% }
.pgrid button[aria-pressed="true"] { border-color: var(--fg) }
.pgrid .label { font-size: 11px; color: var(--muted); text-align: center; margin-top: 2px }

.bar { display: grid; grid-template-columns: 110px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; font-weight: 700 }
.bar .track { height: 10px; background: var(--bad-soft); border-radius: 6px; overflow: hidden; display: flex }
.bar .track i { background: var(--good); display: block }
.bar .n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums }
.ev { display: grid; grid-template-columns: 56px 1fr; gap: 3px 10px; font-size: 13px; font-weight: 700; margin: 6px 0 4px 64px }
.ev .t { color: var(--muted); font-variant-numeric: tabular-nums }

.sheet { position: fixed; inset: 0; background: rgba(10,14,20,.45); display: flex; justify-content: center; z-index: 10 }
.sheet > .panel { width: 100%; max-width: 520px; height: 100%; background: var(--phone); overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--fg); color: var(--phone); padding: 10px 16px; border-radius: 12px; font-weight: 800; font-size: 14px; z-index: 20; max-width: 90vw; text-align: center }
[hidden] { display: none !important }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* Printed schedule (Print on Today): only #print goes on paper */
#print { display: none }
@media print {
  @page { margin: 12mm }
  body { background: #fff !important; color: #000 }
  .app, .sheet, .toast { display: none !important }
  #print { display: block; font-family: Nunito, system-ui, sans-serif; color: #000 }
  #print h1 { font-size: 20pt; margin: 0 } #print h2 { font-size: 13pt; font-weight: 600; margin: 2pt 0 10pt }
  #print h3 { font-size: 10pt; margin: 0 0 4pt; border-bottom: 1px solid #999; padding-bottom: 2pt }
  #print p { font-size: 9pt; color: #555; margin: 0 }
  #print .pl { display: flex; align-items: center; gap: 6pt; break-inside: avoid; margin-bottom: 4pt; font-size: 10pt }
  #print .pt { width: 52pt; font-weight: 700; white-space: nowrap } #print .pn { font-weight: 700 }
  #print .pp { width: 20pt; height: 20pt; border-radius: 5pt; display: grid; place-items: center; flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  #print .pp img { width: 16pt; height: 16pt }
  #print .big .pl { height: var(--h); margin: 0; font-size: min(16pt, calc(var(--h) * .42)); border-bottom: 1px solid #ddd }
  #print .big .pt { width: 80pt } #print .big .pp { width: calc(var(--h) * .78); height: calc(var(--h) * .78); border-radius: calc(var(--h) * .2) }
  #print .big .pp img { width: calc(var(--h) * .66); height: calc(var(--h) * .66) }
  #print table.pweek { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9pt }
  #print .pweek th, #print .pweek td { border: 1px solid #bbb; padding: 5pt 4pt; vertical-align: middle; text-align: left }
  #print .pweek th { font-size: 9pt; background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  #print .pweek th.pt, #print .pweek td.pt { width: 46pt; font-weight: 700; white-space: nowrap }
  #print .pweek tr { break-inside: avoid } #print .pweek thead { display: table-header-group }
  #print .pweek .pc { display: flex; align-items: center; gap: 4pt } #print .pweek .pn { font-weight: 600; line-height: 1.15 }
  #print .pmonth .pl { gap: 3pt; font-size: 7.5pt; margin-bottom: 3pt; align-items: flex-start }
  #print .pmonth .pt { width: 32pt; font-weight: 600 } #print .pmonth .pn { font-weight: 600; line-height: 1.15 }
  #print .pweek .pp, #print .pmonth .pp { width: 11pt; height: 11pt; border-radius: 3pt } #print .pweek .pp img, #print .pmonth .pp img { width: 9pt; height: 9pt }
  #print .pmonth { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8pt 10pt } #print .pmonth .pcol { break-inside: avoid }
  #print .pmonth .pl { margin-bottom: 1pt; align-items: center } #print .pmonth .pn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
}

/* Copying a task: its own background, with colours that read on it in light and dark themes */
.sheet > .panel.copying { background: var(--copy-bg); color: var(--fg);
  --bg: #eef1f5; --phone: #ffffff; --fg: #1a2232; --muted: #4a5568; --card: rgba(255,255,255,.55); --line: rgba(26,34,50,.18);
  --accent: #13766D; --accent-soft: #dff3f0; --accent-fg: #ffffff; --warn: #b45309; --warn-soft: #fff4e0; --bad: #c2362f; --bad-soft: #fde9e7; --good: #1f8a52; --good-soft: #e3f6ea }
.setbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; text-align: left; font-size: 17px }