/* Globe app: the family palette. Each of the ten branches owns one system-like hue, in branch order (red, orange,
   yellow, green, mint, teal, blue, indigo, purple, pink). Opa & Oma, who head no branch, wear the Salatiga gold only as
   a ring and as ink, on the same cool white as everyone else's cells: the gold fills nothing but the origin pin.
   The ten hues sit at least 21 CIEDE2000 apart in each theme, so two branches never read as one at the size of a dot
   (pink leans magenta-rose away from red; mint, teal, blue and indigo are spaced by lightness as well as hue).
   Per hue: --bN is the hue itself (lines, rings, dots, bars), --bN-ink is its text colour (at least 4.6:1 on every
   ground in the app and on its own tints), --bN-s1 and --bN-s2 are the tints behind monograms, tiles and chips. At
   night the tints are near-neutral (a trace of the hue at a fixed OKLCH lightness), so nothing slides toward olive,
   brown or maroon; the hue is carried by rings, ink and light instead.
   A .hue-N class maps one hue onto --c, --c-ink, --c-s1 and --c-s2. Chrome (buttons, controls) never uses these. */
:root {
  --b0: #ff3b30; --b0-ink: #bc100e; --b0-s1: #feebe8; --b0-s2: #ffdbd6;
  --b1: #fe9000; --b1-ink: #9e4902; --b1-s1: #fff1e7; --b1-s2: #ffe7d4;
  --b2: #ffcc00; --b2-ink: #8c5a01; --b2-s1: #fdf8e9; --b2-s2: #fef3d8;
  --b3: #34c759; --b3-ink: #017229; --b3-s1: #e9f7eb; --b3-s2: #d8f2db;
  --b4: #00d4c2; --b4-ink: #027066; --b4-s1: #e9f9f7; --b4-s2: #d8f5f1;
  --b5: #00a8c9; --b5-ink: #03697e; --b5-s1: #e6f3f8; --b5-s2: #d3ebf3;
  --b6: #1a85ff; --b6-ink: #005cba; --b6-s1: #e5f0ff; --b6-s2: #d1e4ff;
  --b7: #4a51bc; --b7-ink: #464cb7; --b7-s1: #e5e8f8; --b7-s2: #d1d7f2;
  --b8: #ba50e6; --b8-ink: #8b2fb0; --b8-s1: #f6eafd; --b8-s2: #efd9fb;
  --b9: #ee2984; --b9-ink: #b50b61; --b9-s1: #ffe8ef; --b9-s2: #ffd6e2;
  --bf: #a2845e; --bf-ink: #7a5a24; --bf-s1: #fdfdfe; --bf-s2: #eef1f5;
}
:root[data-theme="dark"] {
  --b0: #ff453a; --b0-ink: #ff6758; --b0-s1: #2d2624; --b0-s2: #3a2d2b;
  --b1: #ff9c07; --b1-ink: #ff9c07; --b1-s1: #2c2722; --b1-s2: #372e26;
  --b2: #ffd80e; --b2-ink: #ffd80e; --b2-s1: #292821; --b2-s2: #333025;
  --b3: #30d158; --b3-ink: #47cf62; --b3-s1: #242924; --b3-s2: #2a332a;
  --b4: #67f9e5; --b4-ink: #67f9e5; --b4-s1: #212a28; --b4-s2: #253431;
  --b5: #1ec3e3; --b5-ink: #1ec3e3; --b5-s1: #21292b; --b5-s2: #253337;
  --b6: #0790ff; --b6-ink: #3c9cfe; --b6-s1: #23282e; --b6-s2: #29313a;
  --b7: #625de7; --b7-ink: #898fff; --b7-s1: #26272e; --b7-s2: #2e2f3b;
  --b8: #d472ff; --b8-ink: #cf7af5; --b8-s1: #2a262c; --b8-s2: #342d37;
  --b9: #ff5f9b; --b9-ink: #fb649b; --b9-s1: #2d2527; --b9-s2: #392c30;
  --bf: #ac8e68; --bf-ink: #c4a574; --bf-s1: #23272d; --bf-s2: #2b3037;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --b0: #ff453a; --b0-ink: #ff6758; --b0-s1: #2d2624; --b0-s2: #3a2d2b;
    --b1: #ff9c07; --b1-ink: #ff9c07; --b1-s1: #2c2722; --b1-s2: #372e26;
    --b2: #ffd80e; --b2-ink: #ffd80e; --b2-s1: #292821; --b2-s2: #333025;
    --b3: #30d158; --b3-ink: #47cf62; --b3-s1: #242924; --b3-s2: #2a332a;
    --b4: #67f9e5; --b4-ink: #67f9e5; --b4-s1: #212a28; --b4-s2: #253431;
    --b5: #1ec3e3; --b5-ink: #1ec3e3; --b5-s1: #21292b; --b5-s2: #253337;
    --b6: #0790ff; --b6-ink: #3c9cfe; --b6-s1: #23282e; --b6-s2: #29313a;
    --b7: #625de7; --b7-ink: #898fff; --b7-s1: #26272e; --b7-s2: #2e2f3b;
    --b8: #d472ff; --b8-ink: #cf7af5; --b8-s1: #2a262c; --b8-s2: #342d37;
    --b9: #ff5f9b; --b9-ink: #fb649b; --b9-s1: #2d2527; --b9-s2: #392c30;
    --bf: #ac8e68; --bf-ink: #c4a574; --bf-s1: #23272d; --bf-s2: #2b3037;
  }
}
.hue-0 { --c: var(--b0); --c-ink: var(--b0-ink); --c-s1: var(--b0-s1); --c-s2: var(--b0-s2); }
.hue-1 { --c: var(--b1); --c-ink: var(--b1-ink); --c-s1: var(--b1-s1); --c-s2: var(--b1-s2); }
.hue-2 { --c: var(--b2); --c-ink: var(--b2-ink); --c-s1: var(--b2-s1); --c-s2: var(--b2-s2); }
.hue-3 { --c: var(--b3); --c-ink: var(--b3-ink); --c-s1: var(--b3-s1); --c-s2: var(--b3-s2); }
.hue-4 { --c: var(--b4); --c-ink: var(--b4-ink); --c-s1: var(--b4-s1); --c-s2: var(--b4-s2); }
.hue-5 { --c: var(--b5); --c-ink: var(--b5-ink); --c-s1: var(--b5-s1); --c-s2: var(--b5-s2); }
.hue-6 { --c: var(--b6); --c-ink: var(--b6-ink); --c-s1: var(--b6-s1); --c-s2: var(--b6-s2); }
.hue-7 { --c: var(--b7); --c-ink: var(--b7-ink); --c-s1: var(--b7-s1); --c-s2: var(--b7-s2); }
.hue-8 { --c: var(--b8); --c-ink: var(--b8-ink); --c-s1: var(--b8-s1); --c-s2: var(--b8-s2); }
.hue-9 { --c: var(--b9); --c-ink: var(--b9-ink); --c-s1: var(--b9-s1); --c-s2: var(--b9-s2); }
.hue-f { --c: var(--bf); --c-ink: var(--bf-ink); --c-s1: var(--bf-s1); --c-s2: var(--bf-s2); }

/* monograms: by day a soft tint of the person's branch with initials in its ink */
.av { position: relative; background: linear-gradient(180deg, var(--c-s1, var(--r2)), var(--c-s2, var(--r3))); color: var(--c-ink, var(--r7));
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c, #5b6370) 26%, transparent); }
.av.has-photo { background: var(--fill); box-shadow: inset 0 0 0 0.5px rgba(30, 45, 65, 0.12); }
/* Opa & Oma: a cool white disc inside a gold ring, drawn on its own layer so knockout rings and focus rings still apply
   (by night the ring rule below draws it, in the same gold) */
.av.hue-f:not(.has-photo)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bf) 80%, transparent); }
/* by night a raised neutral disc, a full-chroma ring of the branch drawn inside it and initials in the branch ink:
   the colour is light on a dark ground, never a dark tint of it. Where a portrait already wears an outer branch ring
   (the tree, the branch list), --av-rw is 0 and that ring carries the hue. */
:root[data-scheme="dark"] .av:not(.has-photo) { background: linear-gradient(180deg, #30353c, #272b31); color: var(--c-ink, var(--r4)); }
:root[data-scheme="dark"] .av:not(.has-photo)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 var(--av-rw, 2px) var(--c, var(--r6)); }
:root[data-scheme="dark"] .av-xl:not(.has-photo) { --av-rw: 3px; }
:root[data-scheme="dark"] .av-sm:not(.has-photo) { --av-rw: 1.5px; }

/* who is where, by branch: one segment per branch, in branch order, sized by its people. Hairline gaps of the
   ground between segments and a slightly softened fill make it read as a measured bar, not a spectrum. */
.mixbar { display: flex; gap: 1px; height: 6px; border-radius: 3px; overflow: hidden; }
.mixbar > span { flex: 1 1 0; min-width: 4px; background: var(--c); opacity: 0.85; }
.mixbar.is-lg { height: 10px; border-radius: 5px; gap: 1.5px; }
.bdot { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.14); }
.bdot.hue-f { background: transparent; box-shadow: inset 0 0 0 2px var(--bf); }
.row .bdot { margin: 0 14px 0 4px; }
.row.has-dot .row-title .bdot { width: 10px; height: 10px; margin: 0 8px 0 0; vertical-align: 0; }

/* branch chips (People filters) */
.chips { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px var(--gutter) 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.sheet:not(.is-full) .chips { touch-action: pan-x; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--cell); color: var(--label); font-size: var(--s-sub); line-height: var(--l-sub); font-weight: 500; white-space: nowrap;
  box-shadow: inset 0 0 0 0.5px var(--sep); transition: background-color 120ms ease, transform 160ms var(--ease); }
.chip .bdot { width: 10px; height: 10px; }
.chip .ph { font-size: 16px; }
.chip[aria-pressed="true"] { background: var(--c-s2, var(--accent-soft)); color: var(--c-ink, var(--accent)); font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--c, var(--accent)); }
.chip:active { transform: scale(0.97); }
@media (hover: hover) { .chip[aria-pressed="false"]:hover { background: var(--cell-hover); } }

/* rows that scroll sideways end in a soft fade instead of a hard cut */
.fade-x { --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.fade-x.at-l { --fl: 36px; }
.fade-x.at-r { --fr: 48px; }

/* date tiles and calendar marks wear the branch of the person whose day it is */
.date-tile[class*="hue-"] { background: linear-gradient(180deg, var(--c-s1), var(--c-s2)); }
.date-tile[class*="hue-"] b, .date-tile[class*="hue-"] span { color: var(--c-ink); }
:root[data-scheme="dark"] .date-tile[class*="hue-"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 72%, transparent); }
.date-tile.is-today, .date-tile.is-today b, .date-tile.is-today span { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.mk[class*="hue-"] { background: var(--c); }
.mk.ann[class*="hue-"] { background: transparent; box-shadow: 0 0 0 1.5px var(--c) inset; }
/* the legend: birthdays are dots in the colour of each branch, anniversaries rings, remembered days a grey dot in a ring */
.cal-legend .mk-set { display: inline-flex; gap: 2px; }
.cal-legend .mk.ann { background: transparent; box-shadow: 0 0 0 1.5px var(--label-2) inset; }

/* the profile header: a soft bloom of the person's branch behind the portrait, fading out well before the Back row
   above it and the edges of the sheet, so there is no seam anywhere and every line of text keeps its contrast */
.p-head[class*="hue-"] { margin: -4px 0 0; padding-top: 28px;
  background: radial-gradient(ellipse min(46%, 210px) 104px at 50% 104px, color-mix(in oklab, var(--c) 22%, transparent),
    color-mix(in oklab, var(--c) 9%, transparent) 55%, transparent 100%) no-repeat; }
.p-head.hue-f { background: radial-gradient(ellipse min(46%, 210px) 104px at 50% 104px, var(--atmo), transparent 100%) no-repeat; }
.p-head[class*="hue-"] .p-rel { color: var(--c-ink); }
.p-branch { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--c-ink); font-size: var(--s-sub); line-height: var(--l-sub); font-weight: 600; text-decoration: none; min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--c-s1); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c) 30%, transparent); }
.p-branch .bdot { width: 10px; height: 10px; }
@media (hover: hover) { .p-branch:hover { background: var(--c-s2); } }
:root[data-scheme="dark"] .p-branch { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }