/* PIC light appearance. Teal #53BAB9, mint #9BD9CA and cream #FFF8E8
   sampled from web/icon-512.png. Ink retains PIC's existing #0E2A27. */
:root { color-scheme: light dark; --pic-teal:#53bab9; --pic-mint:#9bd9ca; --pic-cream:#fff8e8; --pic-ink:#0e2a27; --pic-line:#cbe6df; }
html body { background:var(--pic-surface) !important; color:var(--pic-ink) !important; }
html body::before { background:var(--pic-surface) !important; }
html body [data-orb] { display:none !important; }
html body #dc-root { color:var(--pic-ink); }
/* The legacy shell sets its dark surfaces and foregrounds inline. Override
   presentation here while leaving data, handlers and geometry intact. */
html body #dc-root [style*="color:"] { color:var(--pic-ink) !important; }
html body #dc-root [style*="background:"] { background-color:var(--pic-surface) !important; background-image:none !important; }
html body #dc-root .card, html body #dc-root .glass,
html body main section, html body main .card {
 background:var(--pic-surface) !important; border:1px solid var(--pic-line) !important;
 box-shadow:0 4px 20px rgba(14,42,39,.06) !important;
 -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html body #dc-root nav.glass { background:var(--pic-nav) !important; border-color:var(--pic-line) !important; box-shadow:0 -2px 16px rgba(14,42,39,.06) !important; }
html body #dc-root button, html body main button { color:var(--pic-ink) !important; }
html body #dc-root button[style*="background:"], html body main button {
 background:var(--pic-teal) !important; border-color:var(--pic-teal) !important;
 box-shadow:none !important;
}
html body #dc-root button.card, html body #dc-root button.glass { background:var(--pic-surface) !important; border-color:var(--pic-line) !important; }
html body #dc-root button[style*="background: transparent"],
html body #dc-root button[style*="background: none"],
html body #dc-root nav button { background:transparent !important; }
html body #dc-root h1,html body #dc-root h2,html body #dc-root h3,
html body main h1,html body main h2,html body main h3 { color:var(--pic-ink) !important; }
html body #dc-root a,html body main a { color:var(--pic-link) !important; }
html body #dc-root input, html body #dc-root textarea, html body #dc-root select,
html body main input, html body main textarea, html body main select {
 background:var(--pic-surface) !important; color:var(--pic-ink) !important; border-color:var(--pic-line) !important;
}
html body input::placeholder,html body textarea::placeholder { color:var(--pic-muted) !important; opacity:1; }
html body .muted { color:var(--pic-muted) !important; }
html body .error,html body [role="alert"] { color:#a32c25 !important; }
html body :where(button,a,input,textarea,select,[tabindex]):focus-visible { outline:3px solid #216765 !important; outline-offset:3px !important; }
html body #dc-root [role="dialog"], html body #dc-root [role="menu"] { background:var(--pic-surface) !important; border:1px solid var(--pic-line) !important; box-shadow:0 16px 60px rgba(14,42,39,.18) !important; }
html body #dc-root [aria-selected="true"],html body #dc-root [aria-current="page"] { background:var(--pic-mint) !important; color:var(--pic-ink) !important; }
html body main fieldset { border-color:var(--pic-line); }
/* Quiet secondary controls and legible monochrome icons on white. */
html body #dc-root button[style*="background: rgba(255"] { background:var(--pic-cream) !important; border-color:var(--pic-line) !important; }
html body #dc-root svg [stroke="#FFFFFF" i],html body #dc-root svg[stroke="#FFFFFF" i],
html body #dc-root svg [stroke="#fff" i],html body #dc-root svg[stroke="#fff" i],
html body #dc-root svg [stroke="rgba(235,235,245,0.5)"] { stroke:var(--pic-ink) !important; }
html body #dc-root button[style*="background: rgba(118, 118, 128"] { background:var(--pic-cream) !important; border-color:var(--pic-line) !important; }
html body #dc-root svg[stroke^="rgba(235"], html body #dc-root svg [stroke^="rgba(235"] { stroke:var(--pic-muted) !important; }
html body #dc-root svg[fill^="rgba(235"], html body #dc-root svg [fill^="rgba(235"] { fill:var(--pic-muted) !important; }

/* Adaptive PIC palette: soft logo colors in daylight, deep green at night. */
:root {
 --pic-surface:#ffffff; --pic-nav:#ffffff; --pic-muted:#526f68;
 --pic-link:#216765; --pic-button-ink:#0e2a27;
 --pic-backdrop:radial-gradient(ellipse at 0% 0%,#d7f1ec 0%,transparent 58%),radial-gradient(ellipse at 100% 85%,#fff3d8 0%,transparent 58%),#f8fcfa;
}
html body,html body::before { background:var(--pic-backdrop) !important; }
html body #dc-root > .sc-host > div[style],html body #dc-root > div[style] { background:transparent !important; }
html body #dc-root button[style*="background: #81D8D0"] { color:var(--pic-button-ink) !important; }
@media (prefers-color-scheme:dark) {
 :root {
  --pic-surface:#172e2b; --pic-nav:#172e2b; --pic-ink:#edf8f4;
  --pic-line:#365650; --pic-muted:#abc7bf; --pic-link:#9bd9ca;
  --pic-cream:#253c34; --pic-mint:#315c52; --pic-teal:#64c8bd;
  --pic-backdrop:radial-gradient(ellipse at 0% 0%,#1c4741 0%,transparent 60%),radial-gradient(ellipse at 100% 90%,#2b3328 0%,transparent 55%),#0d211e;
 }
 html body #dc-root button[style*="background:"],html body main button { color:var(--pic-button-ink) !important; }
 html body #dc-root button.card,html body #dc-root button.glass,
 html body #dc-root button[style*="background: transparent"],html body #dc-root button[style*="background: none"],
 html body #dc-root button[style*="background: rgba(255"],html body #dc-root nav button { color:var(--pic-ink) !important; }
 html body .error,html body [role="alert"] { color:#ffb7ac !important; }
 html body :where(button,a,input,textarea,select,[tabindex]):focus-visible { outline-color:#9bd9ca !important; }
}

@media (prefers-color-scheme:dark) {
 html body #dc-root button[style*="background: rgba(118, 118, 128"] { color:var(--pic-ink) !important; }
}

/* Targeted attention cues and separate notification bubbles. */
html body #dc-root nav[aria-label="Main"] { bottom:calc(8px + env(safe-area-inset-bottom,0px)) !important; }
@keyframes pic-attention { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); box-shadow:0 0 0 5px rgba(83,186,185,.16); } }
html body #dc-root button[data-attention="true"] { animation:pic-attention 2.8s ease-in-out 4; }
html body #dc-root button.notification-bubble {
 border:1px solid var(--pic-line) !important; border-radius:26px;
 background:linear-gradient(145deg,rgba(155,217,202,.20),transparent 65%),var(--pic-surface) !important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 5px 16px rgba(14,42,39,.08) !important;
 color:var(--pic-ink) !important; opacity:1; min-height:72px;
}
html body #dc-root button.notification-bubble:disabled { cursor:default;opacity:1; }
html body #dc-root .notification-action { color:var(--pic-link) !important;font-size:13px;font-weight:600; }
@media(prefers-reduced-motion:reduce) { html body #dc-root button[data-attention] { animation:none !important; } }

/* Give overscroll and the status-bar edge an opaque, appearance-matched base. */
:root { --pic-page-base:#f8fcfa; }
html { background:var(--pic-page-base) !important; min-height:100%; }
html body { min-height:100dvh; background-attachment:fixed !important; }
@media(prefers-color-scheme:dark) {
 :root { --pic-page-base:#0d211e;
 --pic-backdrop:radial-gradient(ellipse at 0% 20%,rgba(36,92,80,.30) 0%,transparent 65%),#0d211e; }
 html body::before { background:var(--pic-backdrop) !important; }
}

html body #dc-root details.profile-clubs { border-radius:26px; padding:0 16px; }
.profile-clubs summary { min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:19px;font-weight:700;cursor:pointer;list-style:none; }
.profile-clubs summary::-webkit-details-marker { display:none; }
.profile-clubs .clubs-chevron { font-size:24px;transition:transform .18s ease; }
.profile-clubs[open] .clubs-chevron { transform:rotate(180deg); }
.profile-clubs-content { display:flex;flex-direction:column;gap:12px;padding:0 0 16px; }
@media(prefers-reduced-motion:reduce) { .profile-clubs .clubs-chevron { transition:none; } }

/* Keep event markers distinct from the theme surface in both appearances. */
html body #dc-root [data-calendar-event-dot] { background-color:var(--pic-event-color) !important; }

/* Keep the selected date unmistakable without obscuring event dots. */
html body #dc-root [data-calendar-day][aria-pressed="true"] [data-calendar-date] {
 background:#216765 !important; color:#ffffff !important; font-weight:800 !important;
 box-shadow:0 0 0 3px #9bd9ca !important;
}
@media(prefers-color-scheme:dark) {
 html body #dc-root [data-calendar-day][aria-pressed="true"] [data-calendar-date] {
  background:#9bd9ca !important; color:#0e2a27 !important; box-shadow:0 0 0 3px #216765 !important;
 }
}

/* Profile placeholders remain visible even without a photo. */
html body #dc-root .pic-profile-avatar, html body #dc-root [data-profile-swatch] {
 background:var(--pic-avatar-color, #9bd9ca) !important;
 border-color:#216765 !important;
}
html body #dc-root .pic-profile-avatar > div { color:#0e2a27 !important; }
html body #dc-root .profile-fields > div { padding:12px 0 !important; gap:6px !important; }
html body #dc-root .profile-fields input { min-height:40px; line-height:1.4; width:100%; box-sizing:border-box; }
.group-profile-photo { display:block;width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid var(--pic-line);margin:4px 0 8px; }
.group-photo-editor { display:flex;align-items:center;flex-wrap:wrap;gap:12px; }
html body #dc-root [role="switch"][aria-checked="false"] { background:#71867f !important; }
html body #dc-root [role="switch"][aria-checked="true"] { background:#216765 !important; }
html body #dc-root [role="switch"] > div { background:#ffffff !important; }

/* Brighter PIC mint-teal for actions, with dark ink for readable labels. */
:root { --pic-teal:#81d8d0; }
@media(prefers-color-scheme:dark) { :root { --pic-teal:#81d8d0; } }
html body #dc-root button[style*="background: rgba(255"] {
 background:var(--pic-teal) !important; border-color:var(--pic-teal) !important; color:#0e2a27 !important;
}
html body #dc-root [data-calendar-day][aria-pressed="true"] [data-calendar-date] {
 background:var(--pic-teal) !important; color:#0e2a27 !important; box-shadow:0 0 0 3px #216765 !important;
}
html body #dc-root [role="switch"][aria-checked="true"] { background:var(--pic-teal) !important; }

/* The group-section highlight follows the selected tab; main navigation stays unchanged. */
html body #dc-root .group-tabs { position:relative;isolation:isolate; }
html body #dc-root .group-tabs .group-tab-highlight {
 position:absolute;z-index:0;pointer-events:none;top:4px;bottom:4px;
 left:calc(4px + (100% - 4px) * var(--pic-group-tab, 0) / 4);
 width:calc((100% - 20px) / 4);border-radius:12px;background:#81d8d0 !important;
 transition:left .24s ease;animation:pic-group-tab-pulse 3s ease-in-out 5;
}
html body #dc-root .group-tabs button {position:relative;z-index:1;min-width:0;padding:0 3px;background:transparent !important;box-shadow:none !important;color:var(--pic-ink) !important;}
html body #dc-root .group-tabs button[aria-selected="true"] {background:transparent !important;color:#0e2a27 !important;font-weight:700 !important;}
@keyframes pic-group-tab-pulse {0%,100% {box-shadow:0 0 0 0 rgba(129,216,208,0)} 50% {box-shadow:0 0 0 3px rgba(129,216,208,.25)}}
@media(prefers-reduced-motion:reduce) {html body #dc-root .group-tabs .group-tab-highlight {animation:none;transition:none;}}

/* Group profile cover and identity */
html body #dc-root .group-profile-header { overflow:hidden;border-radius:24px;background:var(--pic-surface);border:1px solid var(--pic-line); }
html body #dc-root .group-profile-banner { aspect-ratio:8/3;overflow:hidden;background:linear-gradient(125deg,#81d8d0,#b8ebd0 65%,#e9e0c9); }
html body #dc-root .group-profile-banner img, html body #dc-root .group-banner-preview { display:block;width:100%;aspect-ratio:8/3;object-fit:cover; }
html body #dc-root .group-profile-identity { position:relative;padding:0 16px 16px; }
html body #dc-root .group-profile-avatar { position:relative;margin-top:-38px;margin-bottom:10px;width:80px;height:80px;border:4px solid var(--pic-surface);border-radius:50%;background:#81d8d0;box-shadow:0 2px 8px #0e2a2718;display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden; }
html body #dc-root .group-profile-avatar img { width:100%;height:100%;object-fit:cover; }
html body #dc-root .group-profile-identity h1 { margin:0 0 7px;font-size:27px;line-height:1.12;letter-spacing:-.5px;overflow-wrap:anywhere; }
html body #dc-root .group-profile-bio { font-size:14px;line-height:1.4;overflow-wrap:anywhere;white-space:pre-line; }
html body #dc-root .group-profile-meta { margin-top:8px;font-size:12px;font-weight:600;color:var(--pic-muted); }
html body #dc-root .group-banner-preview { border-radius:14px; }
html body #dc-root .group-banner-help { font-size:12px;line-height:1.4; }

html body #dc-root .group-profile-banner { position:relative; }
html body #dc-root button.group-profile-edit { position:absolute;right:10px;bottom:10px;min-height:44px;padding:0 13px;border-radius:14px;border:1px solid #0e2a2733;background:#fff8e8!important;color:#0e2a27!important;font:600 13px system-ui;box-shadow:0 2px 8px #0e2a2722; }

/* Restore PIC's earlier charcoal glass appearance in dark mode.
   Static panel highlights avoid a blur layer on every scrolling card. */
@media (prefers-color-scheme:dark) {
 :root {
  --pic-page-base:#08090b; --pic-backdrop:radial-gradient(ellipse at 8% 12%,rgba(129,216,208,.24) 0%,transparent 48%),radial-gradient(ellipse at 96% 55%,rgba(32,168,179,.27) 0%,transparent 48%),radial-gradient(ellipse at 25% 100%,rgba(155,217,202,.12) 0%,transparent 42%),#08090b;
  --pic-surface:#1c1d22; --pic-nav:rgba(28,29,34,.88); --pic-ink:#f5f5f7;
  --pic-line:rgba(255,255,255,.16); --pic-muted:#b5b5c0; --pic-link:#81d8d0;
  --pic-cream:#292a30; --pic-mint:#303b3e; --pic-teal:#81d8d0;
 }
 html body #dc-root .card, html body #dc-root .glass,
 html body #dc-root button.card, html body #dc-root button.glass,
 html body main section, html body main .card {
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(40,40,46,.72) 38%,rgba(30,30,36,.86)) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.24) !important;
 }
 html body #dc-root nav.glass {
  background:rgba(28,29,34,.88) !important;
  -webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;
 }
 html body #dc-root .group-profile-header { background:var(--pic-surface) !important; }
}

@media (prefers-color-scheme:dark) {
 html body #dc-root button[aria-label="Menu"].glass svg { stroke:var(--pic-ink) !important; }
}

/* Sam 16 Oct: fixes after the charcoal restore.
   1. Search box: the field itself stays clear inside its rounded pill (no square box). */
html body #dc-root input[style*="background: transparent"], html body #dc-root textarea[style*="background: transparent"] { background:transparent !important; }
/* 2. Header bell: light icon on a soft glass circle, like the menu button. */
@media (prefers-color-scheme:dark) {
 html body #dc-root button[aria-label="Notifications"] { background:rgba(255,255,255,.12) !important; border-color:var(--pic-line) !important; color:var(--pic-ink) !important; }
 html body #dc-root button[aria-label="Notifications"] svg { stroke:var(--pic-ink) !important; }
}
/* 3. Profile color choices show their own color (they were all painted mint by the button rule). */
html body #dc-root button[data-profile-swatch] { background:var(--pic-avatar-color,#9bd9ca) !important; border-color:var(--pic-swatch-ring,transparent) !important; }
/* 4. List rows inside a bubble (Calendar "Coming up", Plans…): subtle separators, none under the last row,
      so no line sticks out past the rounded bottom corner. */
html body #dc-root .card > button[style*="border-style: none none solid"] { border-bottom-color:var(--pic-line) !important; }
html body #dc-root .card > button[style*="border-style: none none solid"]:last-child { border-bottom-color:transparent !important; }
/* 5. Notifications: swipe right to reveal Remove (app-extras.js). */
.note-swipe { position:relative; border-radius:26px; overflow:hidden; }
.note-swipe > .notification-bubble { position:relative; z-index:1; touch-action:pan-y; will-change:transform; }
html body #dc-root .note-swipe > button.note-remove {
 position:absolute; z-index:0; left:0; top:0; bottom:0; width:96px; border:0 !important; border-radius:26px 0 0 26px;
 background:#d93b30 !important; color:#ffffff !important; font:600 15px system-ui,-apple-system,sans-serif; box-shadow:none !important;
}
.note-swipe:not(.open) > .note-remove { opacity:0; }
.note-swipe.open > .note-remove, .note-swipe.swiping > .note-remove, .note-remove:focus-visible { opacity:1; }
@media (prefers-reduced-motion:reduce) { .note-swipe > .notification-bubble { transition:none !important; } }
html body #dc-root .note-dot { background:var(--note-dot,#81d8d0) !important; }