/* Globe app: content in the sheet. Inset grouped lists, one registered person row, home, people,
   calendar, memory and place pages. Cells are opaque; only chrome is translucent. */
.view { padding: 4px 0 calc(40px + var(--safe-b)); }
.view-head { padding: 20px var(--gutter) 4px; }
.view-head .t-lg, .view-head .t-1 { text-wrap: balance; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.head-row .view-sub { flex-basis: 100%; margin-top: 0; }
.view-sub { margin-top: 4px; color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.lede { margin: 12px var(--gutter) 0; font-size: var(--s-body); line-height: var(--l-body); color: var(--label-2); max-width: 62ch; }

.group { margin: 32px var(--gutter) 0; }
.view > .group:first-child { margin-top: 16px; }
.group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 10px; }
.group-title .btn-text { margin: -10px -8px; font-size: var(--s-body); }
.group-foot { margin: 8px 16px 0; color: var(--label-2); }
.cells { background: var(--cell); border-radius: var(--rad-cell); overflow: hidden; }

.row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px 10px 16px; text-align: left; color: var(--label); text-decoration: none; --inset: 16px; transition: background-color 120ms ease; }
.row.person { --inset: 68px; }
.row + .row::before, .row + .row-wrap::before, .row-wrap + .row::before { content: ""; position: absolute; top: 0; left: var(--inset); right: 0; height: 1px; background: var(--sep); transform: scaleY(0.5); transform-origin: top; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-size: var(--s-body); line-height: var(--l-body); font-weight: 600; overflow-wrap: anywhere; }
.row.plain .row-title { font-weight: 400; }
.row-sub { font-size: var(--s-sub); line-height: var(--l-sub); color: var(--label-2); overflow-wrap: anywhere; }
.row-label { font-size: var(--s-sub); line-height: var(--l-sub); color: var(--label-2); }
.row.info .row-title { font-weight: 400; }
.row-value { flex: none; color: var(--label-2); font-size: var(--s-body); }
.row-trail { flex: none; display: flex; flex-direction: column; align-items: flex-end; color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); text-align: right; }
.row > .ph-caret-right { flex: none; font-size: 17px; color: var(--chev); margin-left: -2px; }
a.row:active, button.row:active { background: var(--cell-press); }
@media (hover: hover) { a.row:hover, button.row:hover { background: var(--cell-hover); } }
.row:focus-visible { outline-offset: -3px; border-radius: var(--rad-cell); }
.row.is-held { background: var(--cell-press); }
.dagger { font-weight: 400; color: var(--label-2); }
.row-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }

/* avatars: the profile photo, or initials on a tint of the person's branch (palette.css) */
.av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-sm { width: 32px; height: 32px; font-size: 13px; }
.av-lg { width: 64px; height: 64px; font-size: 22px; }
.av-xl { width: 120px; height: 120px; font-size: 40px; letter-spacing: 0; }
.date-tile { flex: none; width: 44px; height: 44px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--fill); line-height: 1; }
.date-tile b { font-size: var(--s-body); line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.date-tile span { font-size: var(--s-foot); line-height: 15px; color: var(--label-2); }
.date-tile.is-today { background: var(--accent); color: var(--accent-ink); }
.date-tile.is-today span { color: var(--accent-ink); }

/* home */
.nav-seg { margin: 0; }
.hscroll { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px var(--gutter) 6px; margin: 0; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.sheet:not(.is-full) .hscroll { touch-action: pan-x; }
.cap { flex: none; scroll-snap-align: start; scroll-margin-left: var(--gutter); display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; min-width: 112px; min-height: 60px; padding: 10px 16px 11px; border-radius: var(--rad-cell); background: var(--cell); color: var(--label); text-decoration: none; font-size: var(--s-body); font-weight: 600; transition: background-color 120ms ease, transform 160ms var(--ease); white-space: nowrap; }
.cap-top { display: flex; align-items: baseline; gap: 8px; line-height: var(--l-body); }
.cap .num { font-weight: 400; color: var(--label-2); }
.cap:active { transform: scale(0.97); background: var(--cell-press); }
.cap[aria-current="true"] { box-shadow: 0 0 0 2px var(--accent) inset; }
@media (hover: hover) { .cap:hover { background: var(--cell-hover); } }
.section-gap { margin-top: 32px; }
.section-gap > .group-title { margin: 0 calc(var(--gutter) + 4px) 10px; }
.founders-foot { display: flex; gap: 10px; align-items: flex-start; }
.prompt { display: flex; gap: 14px; align-items: center; padding: 16px; }
.prompt .row-icon { width: 44px; height: 44px; }
.prompt .ph { font-size: 24px; }
.prompt-text { flex: 1; min-width: 0; }
.row.prompt .row-title { font-weight: 600; }
.prompt-text p { color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); margin-top: 2px; }
.ink { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); margin: 0 15px; box-shadow: 0 0 0 2px var(--cell), 0 0 0 3px var(--ink); }
.setting { padding: 14px 16px; }
.setting + .setting { border-top: 0.5px solid var(--sep); }
.setting-label { display: block; font-size: var(--s-sub); line-height: var(--l-sub); color: var(--label-2); margin-bottom: 8px; }
.footnote { margin: 28px calc(var(--gutter) + 4px) 0; color: var(--label-2); font-size: var(--s-foot); line-height: var(--l-foot); max-width: 60ch; }

/* people */
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gutter) 6px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.sheet:not(.is-full) .filters { touch-action: pan-x; }
.pull { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--fill); color: var(--label); font-size: var(--s-sub); font-weight: 500; white-space: nowrap; transition: background-color 120ms ease, transform 160ms var(--ease); }
.pull .ph { font-size: 16px; color: var(--label-2); }
.pull.is-set { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pull.is-set .ph { color: var(--accent); }
.pull:active { transform: scale(0.97); }
@media (hover: hover) { .pull:hover { background: var(--fill-strong); } }
.filter-field { margin: 12px var(--gutter) 10px; }
.count-line { margin: 4px calc(var(--gutter) + 4px) 0; color: var(--label-2); font-size: var(--s-sub); }
.empty { padding: 28px 20px; text-align: center; color: var(--label-2); }
.empty .btn { margin-top: 14px; }
.empty-ph { font-size: 32px; color: var(--label-3); margin-bottom: 8px; display: block; }

/* calendar */
.cal { margin: 16px var(--gutter) 0; padding: 12px 4px 10px; background: var(--cell); border-radius: var(--rad-cell); touch-action: pan-y; }
.sheet:not(.is-full) .cal { touch-action: none; }
.cal-head { display: flex; align-items: center; gap: 4px; padding: 0 4px 8px; }
.cal-title { flex: 1; padding-left: 8px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); text-decoration: none; transition: background-color 120ms ease; }
.icon-btn .ph { font-size: 22px; }
.icon-btn:active:not(:disabled) { background: var(--fill); }
.icon-btn:disabled { color: var(--label-3); }
@media (hover: hover) { .icon-btn:hover:not(:disabled) { background: var(--fill); } }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-week span { text-align: center; font-size: var(--s-foot); line-height: var(--l-foot); color: var(--label-2); padding-bottom: 6px; }
.cal-day { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 5px; border-radius: 10px; color: var(--label); }
.cal-day .d { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: var(--s-body); font-variant-numeric: tabular-nums; transition: background-color 140ms ease; }
.cal-day.is-out { visibility: hidden; }
.cal-day.is-today .d { color: var(--accent); font-weight: 700; }
.cal-day[aria-pressed="true"] .d { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.cal-day:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .cal-day:hover .d { background: var(--fill); } .cal-day[aria-pressed="true"]:hover .d { background: var(--accent-hover); } }
.marks { display: flex; gap: 3px; height: 7px; }
.mk { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--label-2); }
.mk.ann { background: transparent; box-shadow: 0 0 0 1.5px var(--label-2) inset; }
.mk.past { background: radial-gradient(circle, var(--label-2) 0 1.6px, transparent 2.1px); box-shadow: 0 0 0 1px var(--label-2) inset; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 8px 0; color: var(--label-2); font-size: var(--s-foot); line-height: var(--l-foot); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-grid.slide-l { animation: slideL 320ms var(--ease); }
.cal-grid.slide-r { animation: slideR 320ms var(--ease); }
@keyframes slideL { from { transform: translateX(24px); opacity: 0.2; } }
@keyframes slideR { from { transform: translateX(-24px); opacity: 0.2; } }

/* memory and numbers */
.num-row .row-value { color: var(--label); font-weight: 600; }
.memorial .row-sub { color: var(--label-2); }
.note { display: flex; gap: 10px; margin: 12px calc(var(--gutter) + 4px) 0; color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.note .ph { font-size: 20px; flex: none; margin-top: 0; }
.mix-head { margin: 16px calc(var(--gutter) + 4px) 0; }