/* Get Nagged — built for a phone first.
   Safe areas, thumb-reachable controls, 44px touch targets, no hover-only
   affordances. Anything bigger than a phone is a bonus. */
:root{
  --bg:#fdf8f3; --surface:#fff; --surface-2:#f7f0e8; --surface-3:#efe4d8;
  --border:#ece0d4; --border-strong:#ddcab6;
  --text:#33291f; --text-2:#7a6a5b; --text-3:#a3937f;
  --brand:#e2703a; --brand-2:#f2994a; --brand-soft:#fdeee3;
  --doing:#2d9cdb; --done:#27ae60; --late:#eb5757; --nag:#e2703a; --gold:#f2c94c;
  --r:18px; --r-sm:12px; --r-lg:26px;
  --sh-sm:0 1px 2px rgba(80,55,35,.06),0 2px 5px rgba(80,55,35,.05);
  --sh:0 6px 16px rgba(80,55,35,.09);
  --sh-lg:0 22px 48px rgba(80,55,35,.18);
  --ring:0 0 0 3px rgba(226,112,58,.3);
  --ease:cubic-bezier(.32,.72,0,1);
  --font:"Nunito","Quicksand",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* The notch, the home bar, and the rounded corners. */
  --top-safe:env(safe-area-inset-top,0px);
  --bottom-safe:env(safe-area-inset-bottom,0px);
  /* The floating tab dock. It sits clear of the home bar with an even margin all round,
     so whatever the browser or the OS leaves below it reads as margin, not as a gap. */
  --dock-b:calc(10px + max(0px, var(--bottom-safe) - 18px));
  --dock-h:68px;
}
html[data-theme="dark"]{
  --bg:#17120e; --surface:#211a15; --surface-2:#2b221b; --surface-3:#372b22;
  --border:#35291f; --border-strong:#4a3a2c;
  --text:#f5ece3; --text-2:#bda894; --text-3:#8a7663;
  --brand:#f2994a; --brand-2:#f7b267; --brand-soft:#35251a;
  --sh-sm:0 1px 3px rgba(0,0,0,.45); --sh:0 6px 18px rgba(0,0,0,.5); --sh-lg:0 24px 50px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
html,body{height:100%;overscroll-behavior-y:none}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  /* Stops the grey flash when tapping on Android. */
  -webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
/* Phones and tablets scroll by touch, so the bar is only clutter. Scrolling itself is unchanged. */
@media (max-width:999px){
  *{scrollbar-width:none;-ms-overflow-style:none}
  *::-webkit-scrollbar{display:none;width:0;height:0}
}
/* On a laptop keep a slim, quiet one so mouse users can still see where they are. */
@media (min-width:1000px){
  *{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
}
button{cursor:pointer;border:none;background:none;touch-action:manipulation}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.hidden{display:none!important}

/* -------------------------------------------------------------- offline */
.offline-bar{position:fixed;top:0;left:0;right:0;z-index:200;
  padding:calc(6px + var(--top-safe)) 12px 6px;background:#3d2c1d;color:#fff;
  font-size:12.5px;font-weight:700;text-align:center}

/* -------------------------------------------------------------- welcome */
.welcome{min-height:100dvh;display:grid;place-items:center;
  padding:calc(20px + var(--top-safe)) 20px calc(20px + var(--bottom-safe));
  background:radial-gradient(900px 440px at 15% -10%,rgba(242,153,74,.28),transparent 62%),
             radial-gradient(760px 420px at 88% 108%,rgba(226,112,58,.2),transparent 62%),var(--bg)}
.welcome-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:28px 24px 22px}
.logo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.logo-mark{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-2),var(--brand));font-size:24px;
  box-shadow:0 6px 16px rgba(226,112,58,.45)}
.logo-name{font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo-tag{font-size:12px;color:var(--text-3);font-weight:600}
.welcome h1{font-size:21px;font-weight:800;margin:0 0 16px}
.seg{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:99px;margin-bottom:16px}
.seg button{flex:1;padding:9px 6px;border-radius:99px;font-size:13px;font-weight:700;
  color:var(--text-2);transition:.16s var(--ease)}
.seg button.on{background:var(--surface);color:var(--brand);box-shadow:var(--sh-sm)}
.demo-note{margin-top:16px;padding:12px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px dashed var(--border-strong);font-size:12.5px;color:var(--text-2)}
.who-chip{display:inline-flex;gap:5px;margin:6px 6px 0 0;padding:7px 12px;border-radius:99px;
  background:var(--surface);border:1px solid var(--border);font-size:12.5px;font-weight:700}

/* ------------------------------------------------------------ controls */
.field{margin-bottom:13px}
.label{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.input{width:100%;padding:12px 13px;background:var(--surface);
  border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
  /* 16px stops iOS zooming the whole page when a field is focused. */
  font-size:16px}
.input:focus{border-color:var(--brand);box-shadow:var(--ring);outline:none}
.code-input{text-transform:uppercase;letter-spacing:.28em;font-weight:800;text-align:center}
.hint{font-size:12.5px;color:var(--text-3);margin:6px 0 0}
.sheet .hint{margin:2px 0 16px;line-height:1.5}
.sheet h3+.hint{margin-top:-4px}
.sheet .input+.hint,.sheet .field>.hint{margin:8px 0 0}
/* Two fields side by side. minmax(0,…) lets a column shrink below its content (a date
   control is wide on phones); without it the grid grows past the sheet and fields collide. */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.two>*{min-width:0}
.two>:only-child{grid-column:1/-1}
.two.due-pts{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media (max-width:299px){.two,.two.due-pts{grid-template-columns:minmax(0,1fr)}}
.input{min-width:0;max-width:100%;min-height:48px;box-sizing:border-box}
/* One fixed height for every single-line field. iOS sizes a date field by its inner text box,
   not by padding, so without this "When by" comes out shorter than "Points" and "Repeats". */
input.input,select.input{height:52px;padding-top:0;padding-bottom:0;line-height:1.2}
/* The date shows in our own box so it looks the same, and is centred, in every browser; the real
   date input sits invisibly on top and still opens the native picker when tapped. */
.datefield{position:relative;display:flex;align-items:center;gap:8px;height:52px;padding:0 13px;
  background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
  font-size:16px;line-height:1.2;color:var(--text);min-width:0}
.datefield:focus-within{border-color:var(--brand);box-shadow:var(--ring)}
.datefield .dv{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.datefield .dv.ph{color:var(--text-3)}
.datefield .di{flex:none;color:var(--text-3)}
.datefield .dx{position:relative;z-index:2;flex:none;width:28px;height:28px;margin:0 -4px 0 0;border-radius:99px;
  display:grid;place-items:center;font-size:12px;color:var(--text-2);background:var(--surface-2)}
.datefield .dx[hidden]{display:none}
.datefield input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;
  border:0;font-size:16px;-webkit-appearance:none;appearance:none;cursor:pointer}
.datefield input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;opacity:0;cursor:pointer}
/* Native date and select controls look and size differently on every phone. Flatten them. */
input.input[type=date],input.input[type=number],select.input{-webkit-appearance:none;appearance:none}
input.input[type=date]{display:block;text-align:left;padding-right:10px;overflow:hidden}
input.input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.3em}
input.input[type=date]::-webkit-calendar-picker-indicator{margin:0 0 0 4px;padding:2px;flex:none;opacity:.7}
input.input[type=date]::-webkit-datetime-edit{padding:0;overflow:hidden}
input.input[type=number]{-moz-appearance:textfield}
input.input[type=number]::-webkit-inner-spin-button,input.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
select.input{padding-right:34px;text-overflow:ellipsis;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 13px center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* 44px is the smallest reliably tappable target. */
  min-height:44px;padding:11px 18px;border-radius:99px;font-weight:800;font-size:14px;
  border:1.5px solid transparent;transition:.16s var(--ease)}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;box-shadow:var(--sh-sm)}
.btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.btn-quiet{color:var(--text-2)}
.btn-danger{background:var(--late);color:#fff}
.btn-nag{background:linear-gradient(180deg,#f2994a,#e2703a);color:#fff}
.btn-sm{min-height:36px;padding:7px 13px;font-size:13px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.spin{width:15px;height:15px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:99px;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- app */
.app{display:none;min-height:100dvh}
.app.ready{display:block}
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:calc(8px + var(--top-safe)) 14px 8px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--border)}
.top h1{font-size:17px;font-weight:800;margin:0;letter-spacing:-.02em}
.top h1,.top .mini{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:359px){
  .top{gap:6px;padding-left:10px;padding-right:10px}
  .top .pts{padding:6px 9px;font-size:12.5px}
  .top .ibtn{width:36px;height:36px}
}
.me-btn{padding:0;border-radius:99px}
.ibtn{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  color:var(--text-2);position:relative;font-size:17px;flex:0 0 auto}
.ibtn .dot{position:absolute;top:0;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--late);color:#fff;font-size:10.5px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--surface)}
.pts{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:99px;
  background:color-mix(in srgb,var(--gold) 20%,transparent);color:#8a6d12;
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);font-size:13px;font-weight:800}
html[data-theme="dark"] .pts{color:var(--gold)}

/* Room for the tab bar and the home bar underneath it. */
.view{padding:14px 14px calc(var(--dock-b) + 158px);animation:fade .25s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}

.tabs-bar{position:fixed;left:50%;translate:-50% 0;bottom:var(--dock-b);z-index:50;
  width:min(calc(100% - 24px),440px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:6px;border-radius:26px;
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--border);
  box-shadow:0 12px 32px rgba(80,55,35,.16),0 2px 6px rgba(80,55,35,.08)}
html[data-theme="dark"] .tabs-bar{box-shadow:0 12px 32px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:6px 0 5px;border-radius:20px;color:var(--text-3);font-size:11px;font-weight:800;
  min-height:54px;transition:background .2s var(--ease),color .2s var(--ease)}
.tab .ti{font-size:21px;line-height:1.1;transition:transform .2s var(--ease)}
.tab.on{color:var(--brand);background:var(--brand-soft)}
.tab.on .ti{transform:translateY(-1px) scale(1.08)}
.fab{position:fixed;right:16px;bottom:calc(var(--dock-b) + var(--dock-h) + 14px);z-index:51;
  width:58px;height:58px;border-radius:21px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-2),var(--brand));color:#fff;
  box-shadow:0 12px 28px rgba(226,112,58,.5);font-size:27px;font-weight:300;
  transition:.2s var(--ease)}
.fab:active{transform:scale(.92)}

/* --------------------------------------------------------------- bits */
.av{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;
  flex:0 0 auto;font-size:17px;background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--surface)}
.av.sm{width:26px;height:26px;font-size:13px}
.av.lg{width:46px;height:46px;font-size:23px}
.av-row{display:flex}
.av-row .av+.av{margin-left:-9px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;
  font-size:12px;font-weight:800;background:var(--surface-2);color:var(--text-2);
  border:1px solid var(--border);white-space:nowrap}
.pill.late{color:var(--late);background:color-mix(in srgb,var(--late) 12%,transparent);
  border-color:color-mix(in srgb,var(--late) 30%,transparent)}
.pill.nag{color:var(--nag);background:color-mix(in srgb,var(--nag) 13%,transparent);
  border-color:color-mix(in srgb,var(--nag) 32%,transparent)}
.pill.ask{color:#b8860b;background:color-mix(in srgb,var(--gold) 20%,transparent);
  border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.pill.snz{color:var(--text-3);border-style:dashed}
.pill.gold{color:#8a6d12;background:color-mix(in srgb,var(--gold) 22%,transparent);
  border-color:color-mix(in srgb,var(--gold) 46%,transparent)}
html[data-theme="dark"] .pill.gold,html[data-theme="dark"] .pill.ask{color:var(--gold)}
.mini{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-3);font-weight:700}
.mini.late{color:var(--late)}.mini.soon{color:var(--brand)}.mini.nagging{color:var(--nag)}
.row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh-sm);margin-bottom:10px}
.head{display:flex;align-items:center;gap:10px;margin:18px 0 10px}
.head h3{font-size:15px;font-weight:800;margin:0;flex:1}
.hero{border-radius:var(--r-lg);padding:18px;margin-bottom:14px;
  background:linear-gradient(140deg,var(--brand-soft),var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 25%,transparent)}
.hero h2{margin:0 0 4px;font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.hero p{margin:0;font-size:14px;color:var(--text-2)}

.grp{padding:14px}
.grp .gh{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:15px}
.grp .gn{font-size:12px;font-weight:800;padding:2px 9px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.grp.hot .gn{background:color-mix(in srgb,var(--late) 14%,transparent);color:var(--late)}
.grp.warn .gn{background:color-mix(in srgb,var(--nag) 14%,transparent);color:var(--nag)}
.line{display:flex;align-items:center;gap:10px;padding:11px 8px;border-radius:13px;font-size:14px;
  min-height:44px}
.line:active{background:var(--surface-2)}
.line .le{font-size:19px}
.line .lt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}

.filters{display:flex;gap:7px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{padding:8px 14px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--text-2);white-space:nowrap;min-height:38px}
.chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

.chore{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm);margin-bottom:9px}
.chore:active{transform:scale(.995)}
.chore.is-done{opacity:.6}
.chore.nagged{border-color:color-mix(in srgb,var(--nag) 45%,transparent)}
.chore .cem{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface-2);font-size:22px;flex:0 0 auto}
.cmain{flex:1;min-width:0}
.ctitle{font-size:15px;font-weight:800;line-height:1.25;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.chore.is-done .ctitle{text-decoration:line-through;color:var(--text-3)}
.csub{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.cright{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tick{width:38px;height:38px;border-radius:99px;border:2.5px solid var(--border-strong);
  display:grid;place-items:center;flex:0 0 auto;transition:.18s var(--ease);
  color:transparent;font-size:16px;font-weight:900}
.tick.on{background:var(--done);border-color:var(--done);color:#fff}
.tick:active{transform:scale(1.15)}
.rail{height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:10px 0}
.rail>i{display:block;height:100%;background:var(--brand);border-radius:99px}

.person{padding:14px}
.prow{display:flex;align-items:center;gap:11px}
.pname{font-weight:800;font-size:15px}
.prole{font-size:12px;color:var(--text-3);font-weight:700}
.rank{width:28px;height:28px;border-radius:99px;display:grid;place-items:center;
  font-weight:900;font-size:12px;background:var(--surface-2);color:var(--text-3);flex:0 0 auto}
.rank.r1{background:color-mix(in srgb,var(--gold) 30%,transparent);color:#8a6d12}
.rank.r2{background:#e8e8ea;color:#6b6b70}
.rank.r3{background:#f0dcc8;color:#8a6244}

.nag-item{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface);margin-bottom:8px}
.nag-item .ne{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--nag) 13%,transparent);font-size:18px;flex:0 0 auto}
.nag-msg{font-size:13.5px;font-weight:600;line-height:1.45}
.nag-n{font-size:11px;font-weight:900;padding:2px 8px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.pv{display:flex;align-items:center;gap:10px;padding:11px;margin-bottom:7px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font-size:13px}
.pv.muted{opacity:.6;border-style:dashed}
.device{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface-2);margin-bottom:6px;font-size:13px}

.banner{display:flex;align-items:flex-start;gap:11px;padding:13px;border-radius:var(--r);
  margin-bottom:14px;border:1px solid}
.banner .bn-e{font-size:22px;flex:0 0 auto}
.banner .bn-t{font-weight:800;font-size:14.5px}
.banner .bn-s{font-size:13px;color:var(--text-2);margin-top:3px}
.banner .bn-a{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.banner.warn{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 20%,var(--surface)),var(--surface));
  border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.banner.good{background:linear-gradient(135deg,color-mix(in srgb,var(--done) 12%,var(--surface)),var(--surface));
  border-color:color-mix(in srgb,var(--done) 36%,transparent)}
.banner.info{background:linear-gradient(135deg,var(--brand-soft),var(--surface));
  border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.mail-note{font-size:12.5px;color:var(--text-2);background:var(--surface-2);
  border:1px dashed var(--border-strong);border-radius:var(--r-sm);padding:11px;margin-bottom:12px}

/* ------------------------------------------------- the bottom sheet -- */
/* A sheet rather than a centred modal: it comes from the bottom, where the
   thumb is, and dismisses the way a phone user expects. */
.sheet-wrap{position:fixed;inset:0;z-index:90;display:grid;place-items:end center;
  background:rgba(50,35,22,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-wrap.open{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:520px;max-height:90dvh;overflow-y:auto;background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-lg);
  padding:16px 18px calc(20px + var(--bottom-safe));
  transform:translateY(100%);transition:transform .34s var(--ease);
  /* Keeps a scroll gesture inside the sheet instead of moving the page behind it. */
  overscroll-behavior:contain}
.sheet-wrap.open .sheet{transform:none}
.grab{width:40px;height:5px;border-radius:99px;background:var(--border-strong);margin:0 auto 14px}
.sheet h3{margin:0 0 12px;font-size:18px;font-weight:800}
.sheet-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.m-acts{display:flex;gap:10px;margin-top:18px}
.m-acts .btn{flex:1}
.who{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface-2);margin-bottom:7px;min-height:52px}
.step{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:14px}
.people-pick{max-height:34vh;overflow-y:auto}
.emoji-pick{display:flex;gap:7px;flex-wrap:wrap}
.emoji-pick button{width:46px;height:46px;border-radius:13px;font-size:22px;
  background:var(--surface-2);border:2px solid transparent}
.emoji-pick button.on{border-color:var(--brand);background:var(--brand-soft)}

/* ------------------------------------------------------------ toasts */
.toasts{position:fixed;left:50%;translate:-50% 0;bottom:calc(var(--dock-b) + var(--dock-h) + 14px);
  z-index:120;display:flex;flex-direction:column;gap:9px;align-items:center;
  width:min(430px,calc(100vw - 28px));pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;border-radius:16px;
  font-size:14px;font-weight:700;background:#3d2c1d;color:#fff;box-shadow:var(--sh-lg);
  animation:tin .3s var(--ease) both}
.toast.out{animation:tout .24s var(--ease) forwards}
.toast.err{background:#b23b3b}
.toast-act{margin-left:auto;padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.18);
  color:#fff;font-weight:800;font-size:13px;white-space:nowrap}
.toast-act:active{background:rgba(255,255,255,.3)}
@keyframes tin{from{opacity:0;transform:translateY(18px) scale(.95)}}
@keyframes tout{to{opacity:0;transform:translateY(10px) scale(.96)}}

.skel{border-radius:14px;background:linear-gradient(90deg,var(--surface-2) 25%,
  var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;
  animation:shim 1.3s ease-in-out infinite}
@keyframes shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skel-row{height:66px;margin-bottom:9px}
.empty{text-align:center;padding:40px 20px;color:var(--text-2)}
.empty .big{font-size:44px;margin-bottom:10px}
.empty h3{margin:0 0 6px;font-size:17px;color:var(--text);font-weight:800}
.empty p{margin:0 auto;font-size:14px;max-width:30ch}
.tips{list-style:none;margin:0;padding:0}
.tips li{display:flex;gap:10px;align-items:flex-start;padding:9px 6px;font-size:14px;color:var(--text-2);line-height:1.45}
.tips li+li{border-top:1px solid var(--border)}
#board{cursor:pointer}
#around{display:contents}
.empty-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ---------------------------------------------------- accounts & people */
.linkish{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;min-height:32px}
.center{text-align:center}
.verify-art{font-size:46px;margin-bottom:8px}
.update-bar{position:fixed;left:50%;translate:-50% 0;top:calc(10px + var(--top-safe));z-index:210;
  width:min(430px,calc(100vw - 28px));display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-radius:16px;background:var(--brand);color:#fff;font-weight:800;font-size:13.5px;
  box-shadow:var(--sh-lg);animation:tin .3s var(--ease) both}
.update-bar button{margin-left:auto;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.22);
  color:#fff;font-weight:800;font-size:13px}
.role-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;
  font-size:11px;font-weight:800;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.role-badge.adult{background:var(--brand-soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.person.tappable{cursor:pointer}
.person.tappable:active{transform:scale(.99)}
.codecard{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:14px}
.codecard .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:24px;font-weight:800;
  letter-spacing:.14em;color:var(--brand)}
.codecard .cmeta{flex:1;min-width:0}
.starters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.starters .chip{font-size:13.5px}
.seg.small{margin:0 0 12px}
.mail-note{padding:11px 13px;border-radius:var(--r-sm);background:var(--surface-2);
  font-size:13px;color:var(--text-2);margin-bottom:12px}

/* --------------------------------------------------------- bigger --- */
@media (min-width:640px){
  .view{max-width:620px;margin:0 auto}
  .sheet{border-radius:var(--r-lg);margin-bottom:24px}
  .sheet-wrap{place-items:center}
  .grab{display:none}
}
/* ===================================================== laptops & desktops ==
   Two layouts from one set of screens. Below 1000px nothing here applies, so a
   phone, or a small window, keeps the thumb-first layout above exactly. From
   1000px up the bottom tabs become a sidebar, the single column becomes as many
   columns as fit, and the mouse and keyboard get what a phone never needed. */
@media (hover:hover) and (pointer:fine){
  .chore,.line,.nag-item[data-chore],.person.tappable{cursor:pointer}
  .chore:hover,.person.tappable:hover,.nag-item[data-chore]:hover{
    border-color:var(--border-strong);box-shadow:var(--sh)}
  .line:hover{background:var(--surface-2)}
  .tick:hover{border-color:var(--done)}
  .chip:hover{border-color:var(--brand);color:var(--brand)}
  .ibtn:hover{background:var(--surface-2)}
  .tab:hover{color:var(--brand)}
  .btn:hover{filter:brightness(1.05)}
}

@media (min-width:1000px){
  :root{--side:252px}
  .app{padding-left:var(--side)}

  /* ---- sidebar: the tab bar, turned on its side ---- */
  .tabs-bar{top:0;bottom:0;right:auto;left:0;width:var(--side);translate:none;border-radius:0;
    box-shadow:none;border-width:0 1px 0 0;
    display:flex;flex-direction:column;gap:4px;align-content:flex-start;
    padding:152px 14px 56px;background:var(--surface);backdrop-filter:none;
    border-right:1px solid var(--border)}
  .tabs-bar::before{content:"📣  Get Nagged";position:absolute;top:26px;left:22px;
    font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--text)}
  .tabs-bar::after{content:"Keys:  N new chore  ·  1–4 switch screen";position:absolute;
    left:22px;right:14px;bottom:20px;font-size:12px;font-weight:700;color:var(--text-3)}
  .tab{flex-direction:row;justify-content:flex-start;gap:13px;min-height:46px;
    padding:10px 16px;font-size:15px;border-radius:14px;color:var(--text-2)}
  .tab .ti{font-size:19px;width:24px;text-align:center}
  .tab.on{background:var(--brand-soft);color:var(--brand)}
  .tab.on .ti{transform:none}
  @media (hover:hover){.tab:not(.on):hover{background:var(--surface-2)}}

  /* The round add button becomes a wide one at the top of the sidebar. */
  .fab{top:80px;left:14px;right:auto;bottom:auto;width:calc(var(--side) - 28px);height:48px;
    border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;
    font-size:21px;font-weight:300;box-shadow:0 8px 20px rgba(226,112,58,.35)}
  .fab::after{content:"New chore";font-size:15px;font-weight:800;letter-spacing:0}
  .fab:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(226,112,58,.45)}

  /* ---- the bar across the top of the page ---- */
  .top{padding:16px 36px;gap:14px}
  .top h1{font-size:23px}
  .top .mini{font-size:13px}
  .me-btn{order:9}
  .pts{order:5;font-size:14px;padding:8px 14px}
  #themeBtn{order:6}
  #bellBtn{order:7}
  .ibtn{width:42px;height:42px}

  /* ---- room for the content ---- */
  .view{max-width:1180px;margin:0 auto;padding:28px 36px 64px}

  /* Home: cards of different heights flow into columns, headings span them. */
  #view[data-v="home"]{columns:390px;column-gap:22px}
  #view[data-v="home"]>*{break-inside:avoid}
  #view[data-v="home"] #around>*{break-inside:avoid}
  #view[data-v="home"]>.hero,#view[data-v="home"]>.head,#view[data-v="home"]>.banner,
  #view[data-v="home"]>.empty,#view[data-v="home"]>#installHint,#view[data-v="home"]>#pushHint,
  #view[data-v="home"]>.card[data-invite],#view[data-v="home"]>.card[data-starters]{column-span:all}

  /* Chores, circle and nags: a grid of even cards, headings across the top. */
  #view[data-v="chores"],#view[data-v="circle"],#view[data-v="nags"]{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
    column-gap:22px;align-items:stretch}
  #view[data-v="chores"]>.filters,#view[data-v="chores"]>.head,#view[data-v="chores"]>.empty,
  #view[data-v="chores"]>.card[data-starters],
  #view[data-v="circle"]>.hero,#view[data-v="circle"]>.codecard,#view[data-v="circle"]>.seg,
  #view[data-v="nags"]>.hero,#view[data-v="nags"]>.head,#view[data-v="nags"]>.card,
  #view[data-v="nags"]>.empty{grid-column:1/-1}
  #view[data-v="chores"]>.filters{overflow:visible}
  #view[data-v="circle"]>.seg{max-width:340px}
  #view[data-v="circle"]>.codecard{max-width:560px}
  #view[data-v="circle"]>.person{margin-bottom:14px}

  .hero{padding:24px 28px}
  .hero h2{font-size:26px}
  .hero p{font-size:15px}

  /* ---- dialogs are centred cards, not sheets ---- */
  .sheet{max-width:560px;padding:22px 26px 26px}
  .toasts{left:calc(50% + var(--side) / 2);bottom:28px}
  .update-bar{left:calc(50% + var(--side) / 2)}
}

/* A really wide screen can afford a third column. */
@media (min-width:1500px){
  .view{max-width:1380px}
}

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