/* Globe app: you, Find me, choosing in the tree, and Add to my calendar.
   "You" has one treatment everywhere, modelled on the location dot of Apple Maps: a gap of the ground, a ring in the you
   colour (a highlighter chartreuse that no branch, the Salatiga gold or the action blue uses; at least 20 CIEDE2000 from
   each of them in both themes) with a darker hairline that gives it an edge on white, a light tint of the same colour
   behind your tree node, your rows and your date tiles, and a soft pulse where you are placed (the tree, the map). The
   words "You" / "Anda" always stand beside it, so it is never told by colour alone. No glow: the ring and tint carry it.
   --me is the ring and the label's fill, --me-on the label's text (10.8:1), --me-ink text in the you colour on any ground
   or tint (5.8:1 or more), --me-s1 and --me-s2 the tints, --me-edge the hairline. */
:root { --me: #bde600; --me-on: #1d2600; --me-ink: #4b6500; --me-s1: #f6fbe0; --me-s2: #ecf6c4; --me-edge: #7d9a00; }
:root[data-theme="dark"] { --me: #c6ff1a; --me-on: #141a00; --me-ink: #c6ff1a; --me-s1: #22261a; --me-s2: #2b3120; --me-edge: #c6ff1a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --me: #c6ff1a; --me-on: #141a00; --me-ink: #c6ff1a; --me-s1: #22261a; --me-s2: #2b3120; --me-edge: #c6ff1a; }
}

/* ---------- the You label ---------- */
.me-tag { display: inline-flex; align-items: center; flex: none; height: 24px; margin-left: 8px; padding: 0 10px; border-radius: 999px;
  background: var(--me); color: var(--me-on); font-size: var(--s-sub); line-height: 20px; font-weight: 600; letter-spacing: 0.005em;
  vertical-align: 1px; white-space: nowrap; box-shadow: inset 0 0 0 0.5px var(--me-edge); }
.me-tag.in-tree { margin-left: 6px; height: 22px; padding: 0 8px; vertical-align: 0; }
.me-tag.on-portrait { position: relative; z-index: 1; margin: -10px 0 0; height: 28px; padding: 0 12px; box-shadow: 0 0 0 3px var(--bg), inset 0 0 0 0.5px var(--me-edge); }

/* ---------- the you ring on portraits: the ground, the colour, a hairline edge ---------- */
:root[data-scheme] .av.is-me { --me-r0: 5.5px; --me-ring: 0 0 0 2px var(--ring-gap, var(--cell)), 0 0 0 5px var(--me), 0 0 0 5.5px var(--me-edge);
  box-shadow: var(--me-ring); }
:root[data-scheme] .av.av-s.is-me { --me-r0: calc(var(--s) * 0.03 + 5.5px);
  --me-ring: 0 0 0 calc(var(--s) * 0.03 + 1.5px) var(--ring-gap, var(--cell)), 0 0 0 calc(var(--s) * 0.03 + 4.5px) var(--me), 0 0 0 calc(var(--s) * 0.03 + 5.5px) var(--me-edge); }
/* small faces (a pill's faces, a tag chip): a compact ring that stays inside the shape around it */
:root[data-scheme] .tt-faces .av.is-me, :root[data-scheme] .fc .av.is-me { --me-ring: 0 0 0 1.5px var(--cell), 0 0 0 3.5px var(--me), 0 0 0 4px var(--me-edge); }
:root[data-scheme] .me-btn .av.is-me { box-shadow: none; } /* the You button is you already */
:root[data-scheme] .av.is-me:not(.has-photo)::after { box-shadow: none; }
:root[data-scheme] .p-head.is-me .p-photo .av-xl { box-shadow: 0 0 0 3px var(--bg), 0 0 0 8px var(--me), 0 0 0 9px var(--me-edge); }
.p-head.is-me .p-photo + .me-tag + .p-name, .p-head.is-me .me-tag + .p-name { margin-top: 12px; }
/* where you are placed (the tree on the stage and on the phone): two soft pulses of the colour, like the map's location
   dot, then still (under five seconds; none with reduced motion) */
@keyframes me-pulse { 0% { box-shadow: var(--me-ring), 0 0 0 var(--me-r0) color-mix(in srgb, var(--me) 60%, transparent); }
  100% { box-shadow: var(--me-ring), 0 0 0 calc(var(--me-r0) + 16px) color-mix(in srgb, var(--me) 0%, transparent); } }
:root[data-scheme] .tn .av.is-me, :root[data-scheme] .ol-unit .av.is-me { animation: me-pulse 2000ms var(--ease-out) 300ms 2; }
:root[data-scheme] .face.is-found .av.is-me { animation: found 1100ms var(--ease) 1, me-pulse 2000ms var(--ease-out) 2; }

/* ---------- the you tint: your rows, your tree node, your card on the phone ---------- */
.row.is-me, .ol-unit.is-me { background: var(--me-s1); }
a.row.is-me:active, button.row.is-me:active, label.row.is-me:active { background: var(--me-s2); }
@media (hover: hover) { a.row.is-me:hover, button.row.is-me:hover, label.row.is-me:hover { background: var(--me-s2); } }
/* the tree on the stage: a plate of the tint behind your faces and your name (its height is set per node) */
.tn.is-me { z-index: 1; }
.tn.is-me::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -10px; height: calc(var(--plate-h, 160px) + 18px); border-radius: 20px;
  background: var(--me-s1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--me-edge) 40%, transparent); }
.tn.is-me, .ol-unit.is-me { --ring-gap: var(--me-s1); }
.tn.is-me .duo, .ol-unit.is-me .duo { --ground: var(--me-s1); }

/* ---------- Find me ---------- */
.find-me { flex: none; padding: 0 16px 0 12px; }
.find-me .ph { font-size: 20px; }
.head-row > .t-lg { min-width: 0; }
.view-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px var(--gutter) 0; }
.view-actions .btn { padding: 0 16px 0 12px; }
.map-head { padding-top: 12px; }
.view.home .first-section { margin-top: 20px; }
/* a row found by Find me: an inset ring in the you colour over its deeper tint, held a moment, then gone */
@keyframes found-in { 0% { box-shadow: inset 0 0 0 0 transparent; } 18%, 72% { box-shadow: inset 0 0 0 3px var(--me), inset 0 0 0 3.5px var(--me-edge); background: var(--me-s2); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.row.is-found, .ol-unit.is-found, .pp-head.is-found { animation: found-in 1500ms var(--ease) 1; }
.seg.is-many .seg-item { padding: 0 2px; }

/* ---------- choosing in the tree ---------- */
.tn .pick { cursor: pointer; }
@media (hover: hover) { .tn .pick:hover .nm, .tn .tn-n2 .pick:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.tn-n1 .pick { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.tn-n1 .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the person whose profile is open in the panel: their name in the action blue, a ring round their face (tree.css) */
.tn.is-chosen .tn-n1 { color: var(--accent); }

/* ---------- the phone tree: a person's own page, the family line, fold pills ---------- */
.pp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.pp-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pp-crumbs li > .ph { font-size: 15px; color: var(--chev); }
.pp-crumb { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: var(--s-sub); line-height: var(--l-sub); font-weight: 600; }
a.pp-crumb { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
a.pp-crumb:active { opacity: 0.6; }
span.pp-crumb { padding: 0 6px; color: var(--label-2); }
.pp-head .me-tag { vertical-align: 2px; }
.ol-fold { flex: none; display: grid; place-items: center; min-width: 52px; height: 52px; margin: 0 -6px 0 0; border-radius: 22px; color: var(--label); }
.ol-fold .tt-pill { height: 36px; padding: 0 10px 0 12px; background: var(--fill); box-shadow: none; }
.ol-fold[aria-expanded="false"] .tt-pill { background: var(--cell); box-shadow: 0 0 0 0.5px var(--sep), var(--shadow-1); }
.ol-fold:focus-visible { outline: none; }
.ol-fold:focus-visible .tt-pill { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.ol-fold:active .tt-pill { transform: scale(0.95); }
.ol-unit.is-me .ol-m { color: var(--label-2); font-weight: 400; }
.ol-s .me-tag { vertical-align: 0; }
.pg-hint { margin-top: 20px; }

/* ---------- the calendar: your dates, Add to my calendar ---------- */
/* your date tile: the you tint and ink inside the ring (today keeps its solid blue, inside the same ring) */
:root[data-scheme] .date-tile.is-me { box-shadow: 0 0 0 2px var(--cell), 0 0 0 4.5px var(--me), 0 0 0 5px var(--me-edge); }
:root[data-scheme] .date-tile.is-me:not(.is-today) { background: linear-gradient(180deg, var(--me-s1), var(--me-s2)); }
.date-tile.is-me:not(.is-today) b, .date-tile.is-me:not(.is-today) span { color: var(--me-ink); }
.row.is-me .date-tile.is-me { box-shadow: 0 0 0 2px var(--me-s1), 0 0 0 4.5px var(--me), 0 0 0 5px var(--me-edge); }
.mk.is-me { box-shadow: 0 0 0 1.5px var(--cell), 0 0 0 3px var(--me), 0 0 0 3.5px var(--me-edge); }
.mk.is-me:not([class*="hue-"]) { background: var(--me); }
.cal-legend .mk.is-me { margin: 0 2px; }
.modal-dates .modal-body { padding-bottom: 0; }
.sel-view { padding-bottom: 0; }
.sel-quicks { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.sel-quick .ph { font-size: 18px; color: var(--accent); }
/* "Selected": what was added (said here, not in a notice over the sheet's header), a chip per family, the singles */
.sel-sum-body { display: grid; gap: 12px; padding: 14px 16px; }
.sel-said { font-size: var(--s-body); line-height: var(--l-body); font-weight: 600; }
.sel-singles { color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.sel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.sel-batch { gap: 6px; padding: 0 8px 0 12px; background: var(--c-s1, var(--fill)); color: var(--c-ink, var(--label)); font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--label)) 35%, transparent); }
.chip.sel-batch .bdot { margin-right: 2px; }
.chip.sel-batch .ph-x { display: grid; place-items: center; width: 26px; height: 26px; margin-left: 2px; border-radius: 50%; font-size: 15px; color: var(--label-2); background: var(--fill); }
@media (hover: hover) { .chip.sel-batch:hover { background: var(--c-s2, var(--fill-strong)); } .chip.sel-batch:hover .ph-x { color: var(--danger); } }
.sel-sum .switch-row { box-shadow: inset 0 0.5px 0 var(--sep); }
.sel-only-none { margin-top: 20px; }
.sel-row, .sel-radio { cursor: pointer; }
.sel-row { --inset: 108px; }
.sel-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.sel-box { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--label-3); transition: background-color 140ms ease, box-shadow 140ms ease; }
.sel-box .ph { font-size: 16px; }
.sel-input:checked + .sel-box { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.sel-input:focus-visible + .sel-box { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.sel-radio .sel-box { box-shadow: none; width: 30px; }
.sel-radio .sel-box .ph { font-size: 22px; }
.sel-radio .sel-input:checked + .sel-box { background: none; color: var(--accent); }
.sel-row.is-past .row-title { color: var(--label-2); }
.sel-row:has(.sel-input:checked) { background: color-mix(in srgb, var(--accent) 5%, var(--cell)); }
.sel-foot { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 8px; margin-top: 28px; padding: 12px var(--gutter) calc(16px + var(--safe-b));
  background: var(--material-strong); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -0.5px 0 var(--sep); }
.sel-count { text-align: center; color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.sel-download .ph, .sel-help .btn .ph { font-size: 20px; }
.help-done { display: flex; gap: 12px; align-items: flex-start; margin: 12px var(--gutter) 0; padding: 16px; border-radius: var(--rad-cell); background: var(--cell); }
.help-done > .ph { flex: none; font-size: 28px; color: var(--accent); }
.help-done p { font-size: var(--s-body); line-height: var(--l-body); overflow-wrap: anywhere; }
.help-row { align-items: flex-start; --inset: 68px; }
.row.plain.help-row .row-title { font-weight: 600; }
.help-row .row-sub { font-size: var(--s-body); line-height: var(--l-body); margin-top: 2px; }
.sel-help .viewer-actions { margin-top: 24px; }
.fam-list .group:first-child { margin-top: 20px; }
/* Save contacts: a branch's title keeps its colour dot beside the name */
.ct-gt { display: inline-flex; align-items: center; gap: 10px; }
/* short screens (a phone on its side): the download bar is one compact row, so the dates keep most of the sheet */
@media (max-height: 500px) {
  .sel-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 16px; padding-top: 8px; padding-bottom: calc(8px + var(--safe-b)); }
  .sel-count { text-align: left; }
  .sel-foot .btn-block { width: auto; min-height: 44px; }
}