/* NeighPal app layout. Colours, type and components come from tokens.css and components.css. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); }
body { min-height: 100dvh; }
a { color: inherit; }
.nb-muted { color: var(--ink-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.np-skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-sm); }
.np-skip:focus { left: 8px; }
h1[tabindex="-1"]:focus { outline: none; }
.np-icon { flex: none; }

/* Top bar */
.np-top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: var(--ground); border-bottom: 1px solid var(--line); }
.np-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 600 18px/24px var(--font-display); }
.np-status { font: 600 13px/18px var(--font-body); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-sunk); }
.np-status.is-ok { background: var(--good-tint); color: var(--good); }
.np-status.is-pending { background: var(--warn-tint); color: var(--warn); }
.np-status.is-offline { background: var(--warn-tint); color: var(--warn); }
.np-demo-banner { background: var(--lilac); color: var(--plum); font: 500 14px/20px var(--font-body); padding: 8px 16px; text-align: center; }
.np-demo-banner a { font-weight: 600; }

/* Page */
.np-main { max-width: 680px; margin: 0 auto; padding: 16px 16px calc(env(safe-area-inset-bottom) + 32px); display: flex; flex-direction: column; gap: 12px;
  scroll-padding-bottom: 120px; }
.has-nav .np-main { padding-bottom: calc(env(safe-area-inset-bottom) + 112px); }
.np-narrow { max-width: 420px; width: 100%; margin: 40px auto; display: flex; flex-direction: column; gap: 12px; }
.np-stack { display: flex; flex-direction: column; gap: 12px; }
.np-pagehead { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.np-pagehead .title, .np-horsehead .title { margin: 0; }
.np-h2 { font: 600 18px/24px var(--font-display); margin: 0; }
.nb-label { margin: 8px 0 0; }
.np-sechead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.np-pagehead.np-sechead { flex-direction: row; }
.np-back { display: inline-flex; align-items: center; gap: 2px; font: 600 15px/20px var(--font-body); color: var(--ink-muted); text-decoration: none; min-height: 44px; margin: -8px 0 -6px -6px; align-self: flex-start; }
.np-back .np-icon { width: 20px; height: 20px; }
.np-link { all: unset; cursor: pointer; font: 600 15px/20px var(--font-body); color: var(--action); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
[data-theme="dark"] .np-link { color: var(--sage); }
.np-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.np-danger { color: var(--alert) !important; }
.np-empty { font: 400 15px/22px var(--font-body); color: var(--ink-muted); margin: 0; }
.np-btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.np-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.np-grow { flex: 1; min-width: 160px; }
.np-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Forms */
.np-field { display: flex; flex-direction: column; gap: 6px; font: 600 14px/20px var(--font-body); color: var(--ink-muted); }
.np-field input, .np-field select, .np-field textarea, .np-inline select, .np-code {
  font: 400 16px/24px var(--font-body); color: var(--ink); background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--radius-sm); min-height: var(--tap-yard); padding: 0 14px; width: 100%; }
.np-field textarea { padding: 12px 14px; resize: vertical; }
.np-inline select { min-height: 44px; width: auto; }
.np-code { font-family: ui-monospace, monospace; font-size: 14px; flex: 1; min-width: 0; }
.np-formerr { color: var(--alert); font: 600 14px/20px var(--font-body); margin: 0; }
.np-formerr:empty { display: none; }
.np-levels { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.np-level { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 15px/20px var(--font-body); }
.np-level select { font: 400 15px/20px var(--font-body); min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-sunk); color: var(--ink); padding: 0 10px; }
.np-search input { min-height: 48px; }

/* Lists and rows */
.np-row { display: flex; flex-direction: column; gap: 2px; text-decoration: none; min-width: 0; }
.np-list { display: flex; flex-direction: column; gap: 8px; }
.np-listrow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; cursor: pointer; }
.np-listrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.np-listrow[hidden] { display: none; }
.nb-card .np-listrow { border: 0; padding: 4px 0; min-height: 52px; background: none; border-radius: 0; }
.np-listrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 400 16px/22px var(--font-body); }
.np-duerow { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 15px/22px var(--font-body); padding: 6px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.np-duerow:first-of-type { border-top: 0; }
.nb-card > .np-h2 + .np-duerow, .nb-card > .np-sechead + .np-duerow, .nb-card > p + .np-duerow { border-top: 0; }
.np-circlerow { display: flex; align-items: center; gap: 4px 12px; padding: 8px 0; flex-wrap: wrap; border-top: 1px solid var(--line); }
.np-circlerow:first-of-type, .nb-card > .np-h2 + .np-circlerow, .nb-card > p + .np-circlerow { border-top: 0; }
.np-circlerow .np-listrow__main { min-width: 160px; }
.np-circlerow .np-inline { flex: 1 0 100%; padding-left: 48px; }
@media (min-width: 560px) { .np-circlerow .np-inline { flex: none; padding-left: 0; } }
.np-dl { margin: 0; display: grid; gap: 6px; }
.np-dl__row { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; font: 400 15px/22px var(--font-body); }
.np-dl dt { color: var(--ink-muted); }
.np-dl dd { margin: 0; }
.np-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.np-horsecard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; }
.np-group { margin-top: 4px; }

/* Home */
.np-yardcard { display: flex; flex-direction: column; gap: 10px; }
.np-yardcard__main { display: flex; align-items: center; gap: 14px; text-decoration: none; min-height: 56px; }
.np-yardcard__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.np-yardcard__more:empty { display: none; }
.np-yardcard__more a.nb-chip { text-decoration: none; }
.np-ring { --p: 0; width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--good) calc(var(--p) * 360deg), var(--surface-sunk) 0); }
.np-ring span { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 600 14px/1 var(--font-body); }
.np-needs { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.np-needs.is-urgent { background: var(--alert-tint); border-color: transparent; }
.np-needs .np-icon { color: var(--alert); margin-top: 2px; }

/* Tabs inside a page */
.np-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-sunk); border-radius: var(--radius-pill); overflow-x: auto; scrollbar-width: none; }
.np-tabs::-webkit-scrollbar { display: none; }
.np-tab { all: unset; box-sizing: border-box; cursor: pointer; flex: none; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px;
  font: 600 14px/20px var(--font-body); color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.np-tab[aria-current="page"], .np-tab[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.np-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.np-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--alert); color: #fff; font: 700 12px/20px var(--font-body); text-align: center; }

/* Horse */
.np-horsehead { display: flex; gap: 14px; align-items: center; }
.np-rx { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.np-rx:first-of-type { border-top: 0; }
.np-rx.is-held { background: var(--alert-tint); margin: 0 -12px; padding: 8px 12px; border-radius: var(--radius-md); }
.np-alert { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--radius-md); background: var(--alert-tint); }
.np-chain { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.np-chain li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; }
.np-chain label { display: flex; align-items: center; gap: 8px; font: 500 15px/20px var(--font-body); }
.np-chain input { width: 20px; height: 20px; }

/* Inbox */
.np-msg { display: flex; flex-direction: column; gap: 6px; }
.np-msg .body { margin: 0; }
.np-msg.is-urgent:not(.is-read) { border-color: var(--alert); }
.np-msg.is-read { opacity: .72; }
.np-msg__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* The round */
.np-roundhead { display: flex; justify-content: space-between; align-items: baseline; }
.np-roundhead .title { margin: 0; }
.np-job { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: center; min-height: 72px; padding: 10px 12px 10px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); cursor: pointer; }
.np-job:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.np-job__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-job__title { font: 600 17px/22px var(--font-body); }
.np-job__box { width: var(--tap-yard); height: var(--tap-yard); flex: none; border-radius: var(--radius-md); border: 2.5px solid var(--line);
  display: grid; place-items: center; color: transparent; font-weight: 700; font-size: 22px; }
.np-job.is-done { background: var(--surface-sunk); }
.np-job.is-done .np-job__title { text-decoration: line-through; color: var(--ink-muted); }
.np-job.is-done .np-job__box { background: var(--good); border-color: var(--good); color: var(--on-action); }
.np-dose { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1.5px solid var(--warn); }
.np-dose.is-given { border-color: var(--good); background: var(--good-tint); }
.np-dose.is-held { border-color: var(--alert); background: var(--alert-tint); }
.np-dose__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.np-hold { color: var(--alert); }
.np-clear { color: var(--good); font-weight: 600; }

/* Demo people */
.np-demo { min-height: 72px; }
.np-demo .nb-person { width: 44px; height: 44px; font-size: 16px; }

/* Bottom sheet */
.np-sheet { border: 0; padding: 0; width: min(560px, 100%); max-height: min(88dvh, 820px); margin: auto auto 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--ground); color: var(--ink); box-shadow: var(--shadow-float); }
.np-sheet::backdrop { background: rgba(15, 38, 32, .45); }
.np-sheet__head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px 20px; background: var(--ground); z-index: 1; }
.np-sheet__body { padding: 4px 20px calc(env(safe-area-inset-bottom) + 24px); display: flex; flex-direction: column; gap: 12px; }
.np-iconbtn { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-muted); font-size: 18px; }
.np-iconbtn:focus-visible { outline: 2px solid var(--focus); }
.np-actions { display: flex; flex-direction: column; gap: 8px; }
.np-action { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.np-action > span { display: flex; flex-direction: column; gap: 2px; font: 400 16px/22px var(--font-body); }
@media (min-width: 720px) { .np-sheet { margin: auto; border-radius: var(--radius-xl); } }

/* Main navigation: a floating tab bar on phones, a side rail on wide screens */
.np-nav:empty { display: none; }
.np-nav__items { position: fixed; z-index: 4; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: 72px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.np-nav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 60px; border-radius: var(--radius-pill);
  text-decoration: none; color: var(--ink-muted); font: 600 12px/16px var(--font-body); }
.np-nav__item[aria-current="page"] { color: var(--ink); }
.np-nav__item[aria-current="page"] .np-icon { stroke-width: 2.4; }
.np-nav__item .np-badge { position: absolute; top: 4px; left: calc(50% + 6px); }
.np-nav__add { all: unset; box-sizing: border-box; cursor: pointer; justify-self: center; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--action); color: var(--on-action); }
.np-nav__add .np-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.np-nav__item:focus-visible, .np-nav__add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.np-nav__yards { display: none; }
.np-toast { position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 96px); z-index: 10; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--forest); color: #fff; font: 500 15px/22px var(--font-body); box-shadow: var(--shadow-float); max-width: 520px; margin: 0 auto; }
[data-theme="dark"] .np-toast { background: var(--action); color: var(--on-action); }
.np-toast.is-urgent { background: var(--alert); color: #fff; }

/* Keyboard open on a short screen: hide the tab bar so the field being typed in stays visible. */
@media (max-height: 560px) and (max-width: 959px) { .np-nav__items { display: none; } .has-nav .np-main { padding-bottom: 32px; } .np-toast { bottom: 16px; } }

@media (min-width: 960px) {
  .has-nav .np-top { padding-left: 252px; }
  .has-nav .np-demo-banner { padding-left: 252px; }
  .np-nav { position: fixed; z-index: 4; top: 0; bottom: 0; left: 0; width: 236px; padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
  .np-nav::before { content: ""; height: 40px; flex: none; }
  .np-nav__items { position: static; margin: 0; display: flex; flex-direction: column; align-items: stretch; height: auto; padding: 0; border: 0; box-shadow: none; background: none; gap: 4px; max-width: none; }
  .np-nav__item { flex-direction: row; justify-content: flex-start; gap: 12px; height: 48px; padding: 0 14px; font-size: 15px; border-radius: var(--radius-md); }
  .np-nav__item[aria-current="page"] { background: var(--mint); }
  .np-nav__item .np-badge { position: static; margin-left: auto; }
  .np-nav__add { order: 9; width: auto; height: 48px; border-radius: var(--radius-md); display: flex; gap: 10px; justify-content: center; margin-top: 8px; font: 600 15px/20px var(--font-body); }
  .np-nav__add .np-nav__label { position: static; width: auto; height: auto; clip: auto; }
  .np-nav__yards { display: flex; flex-direction: column; gap: 2px; }
  .np-nav__yards .nb-label { padding: 0 14px 6px; }
  .np-nav__yard { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-md); text-decoration: none; font: 500 15px/20px var(--font-body); }
  .np-nav__yard[aria-current="page"] { background: var(--mint); }
  .has-nav .np-main { padding-left: 252px; max-width: calc(680px + 252px); padding-bottom: 48px; }
  .np-toast { bottom: 24px; }
}

.np-preview { margin-top: 12px; }