/* Navigation bar editor */
.nav-editor { display: grid; gap: var(--space-3); }
.nav-editor-preview {
  display: grid; grid-template-columns: repeat(var(--nav-count, 4), minmax(0, 1fr)); gap: var(--space-1);
  padding: var(--space-3) var(--space-2); border-radius: var(--radius-pill); background: var(--glass-dark); color: var(--ink-on-accent);
  box-shadow: var(--shadow-float);
}
.nav-editor-preview span { display: grid; justify-items: center; gap: var(--space-1); min-width: 0; }
.nav-editor-preview .ui-icon { width: var(--icon-large); height: var(--icon-large); }
.nav-editor-preview small { font-size: var(--text-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-editor-heading { margin: var(--space-3) 0 0; font-size: var(--text-small); color: var(--ink-secondary); font-weight: 700; }
.nav-editor-list { list-style: none; margin: 0; padding: 0 var(--space-4); border-radius: var(--radius-card); background: var(--surface-card); border: 1px solid var(--line-soft); }
.nav-editor-row {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-normal); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft); background: var(--surface-card); color: var(--ink-primary); font-size: var(--text-body);
}
.nav-editor-row:last-child { border-bottom: 0; }
.nav-editor-row.dragging { position: relative; z-index: 1; border-radius: var(--radius-small); box-shadow: var(--shadow-float); border-bottom-color: transparent; }
.nav-editor-icon { display: inline-grid; place-items: center; color: var(--ink-secondary); }
.nav-editor-icon .ui-icon { width: var(--icon-normal); height: var(--icon-normal); }
.nav-editor-label { flex: 1; min-width: 0; font-weight: 600; }
.nav-editor-required { color: var(--ink-quiet); font-size: var(--text-caption); }
.nav-editor-empty { padding: var(--space-4) 0; color: var(--ink-secondary); font-size: var(--text-small); }
.nav-editor-add, .nav-editor-remove, .nav-editor-handle {
  display: inline-grid; place-items: center; width: var(--touch-normal); height: var(--touch-normal); padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-secondary);
}
.nav-editor-add .ui-icon { width: var(--touch-small); height: var(--touch-small); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--feedback-success); color: var(--ink-on-accent); stroke-width: 2.4; }
.nav-editor-add:disabled .ui-icon { background: var(--line-strong); }
.nav-editor-remove span { display: block; width: var(--touch-small); height: var(--touch-small); border-radius: var(--radius-pill); background: var(--action-danger); position: relative; }
.nav-editor-remove span::after { content: ""; position: absolute; left: 30%; right: 30%; top: calc(50% - 1px); height: 2px; border-radius: var(--radius-pill); background: var(--ink-on-accent); } /* ds-allow-hardcode: icon stroke thickness */
.nav-editor-handle { cursor: grab; touch-action: none; }
.nav-editor-handle span, .nav-editor-handle span::before, .nav-editor-handle span::after { display: block; width: var(--icon-large); height: 2px; border-radius: var(--radius-pill); background: var(--line-strong); } /* ds-allow-hardcode: icon stroke thickness */
.nav-editor-handle span { position: relative; }
.nav-editor-handle span::before, .nav-editor-handle span::after { content: ""; position: absolute; left: 0; }
.nav-editor-handle span::before { top: calc(-1 * var(--space-2)); }
.nav-editor-handle span::after { top: var(--space-2); }

/* Nav bar adapts to the number of chosen tabs. */
@media (max-width: 720px) { /* ds-allow-hardcode: existing mobile breakpoint */
  .main-nav { grid-template-columns: repeat(var(--nav-count, 4), minmax(0, 1fr)); }
  .nav-lens { width: calc((100% - var(--space-2)) / var(--nav-count, 4)); }
  .main-nav.no-active-tab .nav-lens { opacity: 0; }
}
.top-actions #topNoticeButton { position: relative; display: inline-grid; place-items: center; width: var(--touch-normal); height: var(--touch-normal); padding: 0; border-radius: var(--radius-pill); }
.top-actions #topNoticeButton[hidden] { display: none; }
#topNoticeButton .ui-icon { width: var(--icon-normal); height: var(--icon-normal); }
#topNoticeButton .badge { position: absolute; top: calc(-1 * var(--space-1)); right: calc(-1 * var(--space-1)); margin: 0; }

/* Wish pool */
.wish-list { display: grid; gap: var(--space-4); }
.wish-section-title { margin: var(--space-4) 0 0; font-size: var(--text-small); color: var(--ink-secondary); font-weight: 700; }
.wish-card { display: grid; gap: var(--space-3); padding: var(--space-5); }
.wish-card.fulfilled { background: var(--surface-soft); }
.wish-head { display: flex; align-items: center; gap: var(--space-3); }
.wish-head .avatar { width: var(--avatar-small); height: var(--avatar-small); border-radius: var(--radius-pill); }
.wish-head > span:not(.avatar, .wish-status) { flex: 1; min-width: 0; display: grid; }
.wish-head strong { font-size: var(--text-small); color: var(--ink-primary); }
.wish-head small { font-size: var(--text-caption); color: var(--ink-secondary); }
.wish-status { flex: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 700; background: var(--surface-accent); color: var(--action-selected); white-space: nowrap; }
.wish-status.claimed { background: var(--feedback-warning-soft); color: var(--feedback-warning); }
.wish-status.done { background: var(--feedback-success-soft); color: var(--feedback-success); }
.wish-card h2 { margin: 0; font-size: var(--text-section); color: var(--ink-primary); overflow-wrap: anywhere; }
.wish-card p { margin: 0; font-size: var(--text-body); line-height: 1.7; color: var(--ink-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.wish-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wish-actions button { min-height: var(--touch-normal); }

/* Admin storage quota */
.quota-list { display: grid; gap: var(--space-3); }
.quota-card { padding: var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--line-soft); background: var(--surface-card); }
.quota-card.warning { border-color: var(--feedback-warning); background: var(--feedback-warning-soft); }
.quota-card h3 { margin: 0; font-size: var(--text-body); color: var(--ink-primary); }
.quota-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.quota-head strong { font-size: var(--text-section); color: var(--ink-primary); }
.quota-card progress {
  display: block; width: 100%; height: var(--space-2); margin: var(--space-3) 0 var(--space-2); border: 0;
  border-radius: var(--radius-pill); overflow: hidden; appearance: none; -webkit-appearance: none; background: var(--surface-soft); accent-color: var(--action-primary);
}
.quota-card progress::-webkit-progress-bar { background: var(--surface-soft); border-radius: var(--radius-pill); }
.quota-card progress::-webkit-progress-value { background: var(--action-primary); border-radius: var(--radius-pill); }
.quota-card progress::-moz-progress-bar { background: var(--action-primary); border-radius: var(--radius-pill); }
.quota-card.warning progress::-webkit-progress-value { background: var(--feedback-warning); }
.quota-card.warning progress::-moz-progress-bar { background: var(--feedback-warning); }
.quota-numbers { margin: 0; font-size: var(--text-small); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.quota-card .form-help { margin: var(--space-1) 0 0; }
.quota-alert { margin: var(--space-2) 0 0; font-size: var(--text-small); font-weight: 700; color: var(--ink-primary); }

/* Theme picker: each option carries its own data-theme so it previews that palette. */
.theme-picker { display: grid; gap: var(--space-2); }
.theme-section-head { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
.theme-section-head h3 { margin: 0; font-size: var(--text-body); color: var(--ink-secondary); }
.theme-reset { min-height: var(--touch-small, 32px); padding: 0 var(--space-2); border: 0; background: none; color: var(--action-primary); font-size: var(--text-body); font-weight: 700; }
.theme-dots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); justify-items: center; }
.theme-dot { position: relative; display: grid; place-items: center; width: 100%; max-width: 52px; aspect-ratio: 1; border-radius: 50%; cursor: pointer; }
.theme-dot input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme-dot span { width: 84%; height: 84%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 14%); pointer-events: none; }
/* Accent dots look glossy; glow dots show their three colours as slices. */
.theme-dot--accent span { background: radial-gradient(circle at 35% 25%, rgb(255 255 255 / 55%), transparent 42%), radial-gradient(circle at 50% 110%, rgb(255 255 255 / 25%), transparent 55%), var(--action-primary); }
.theme-dot--glow span { background: conic-gradient(from 200deg, var(--glow-a) 0 120deg, var(--glow-b) 120deg 240deg, var(--glow-c) 240deg 360deg); }
.theme-dot--glow[data-glow="none"] span { background: var(--surface-card); }
.theme-dot:has(input:checked) { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--ink-primary); }
.theme-dot:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--focus-ring); }

/* Wish come true: a full-screen celebration the wisher sees once on their next visit. */
.wish-celebration {
  position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  overflow: hidden auto; color: var(--ink-primary); box-shadow: none;
  background: radial-gradient(120% 70% at 50% 18%, var(--surface-accent) 0%, var(--surface-page) 62%), var(--surface-page);
  animation: wish-fade-in .45s ease-out both;
}
.wish-celebration::backdrop { background: var(--surface-page); }
.wish-celebration.leaving { animation: wish-fade-out .32s ease-in both; }
.wish-celebration-body {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: var(--space-3);
  min-height: 100%; padding: calc(env(safe-area-inset-top) + var(--space-8)) var(--space-5) calc(env(safe-area-inset-bottom) + var(--space-8)); text-align: center;
}
.wish-burst { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: var(--space-2); }
.wish-burst > .ui-icon {
  position: relative; z-index: 1; width: 92px; height: 92px; color: var(--action-primary); fill: #f6c453; stroke-width: 1.2;
  filter: drop-shadow(0 8px 18px #e0973a55); animation: wish-star-pop .9s .15s cubic-bezier(.25, 1.6, .45, 1) both, wish-star-float 3.2s 1.1s ease-in-out infinite;
}
.wish-ring { position: absolute; inset: 0; border-radius: var(--radius-pill); border: 2px solid #f6c453; opacity: 0; animation: wish-ring 2.4s .4s ease-out infinite; }
.wish-ring + .wish-ring { animation-delay: 1.6s; }
.wish-celebration-eyebrow { margin: 0; color: var(--action-primary); font-size: var(--text-small); font-weight: 800; letter-spacing: .2em; animation: wish-rise .5s .45s ease-out both; }
.wish-celebration h2 { margin: 0; font-size: clamp(2.4rem, 12vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; animation: wish-rise .55s .55s cubic-bezier(.25, 1.4, .45, 1) both; }
.wish-celebration-list { display: grid; gap: var(--space-3); width: min(100%, 420px); margin-top: var(--space-3); }
.wish-celebration-card {
  display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--line-soft); border-radius: var(--radius-card);
  background: var(--surface-card); box-shadow: var(--shadow-float); text-align: left;
  animation: wish-rise .55s calc(.8s + var(--i, 0) * .12s) cubic-bezier(.25, 1.3, .45, 1) both;
}
.wish-celebration-card h3 { margin: 0; font-size: var(--text-section); overflow-wrap: anywhere; }
.wish-celebration-card p { margin: 0; color: var(--ink-secondary); font-size: var(--text-small); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.wish-celebration-by { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-secondary); font-size: var(--text-caption); }
.wish-celebration-by .avatar { width: 28px; height: 28px; border-radius: var(--radius-pill); font-size: 12px; }
.wish-celebration [data-celebration-close] { min-width: 180px; min-height: var(--touch-large, 52px); margin-top: var(--space-4); border-radius: var(--radius-pill); font-size: var(--text-body); animation: wish-rise .5s 1.1s ease-out both; }
.wish-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.wish-confetti span {
  position: absolute; top: -24px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--color); opacity: 0;
  animation: wish-confetti var(--fall) var(--delay) linear infinite;
}
.wish-confetti span:nth-child(3n) { width: 8px; height: 8px; border-radius: var(--radius-pill); }
.wish-confetti span:nth-child(4n) { width: 5px; height: 16px; }
@keyframes wish-fade-in { from { opacity: 0; } }
@keyframes wish-fade-out { to { opacity: 0; scale: 1.04; } }
@keyframes wish-star-pop { 0% { opacity: 0; scale: .2; rotate: -40deg; } 60% { opacity: 1; scale: 1.18; rotate: 8deg; } }
@keyframes wish-star-float { 50% { translate: 0 -8px; rotate: -4deg; } }
@keyframes wish-ring { 0% { opacity: .7; scale: .6; } 100% { opacity: 0; scale: 1.7; } }
@keyframes wish-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes wish-confetti {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; }
  8% { opacity: 1; }
  100% { opacity: .9; translate: var(--drift) 110dvh; rotate: var(--spin); }
}
@media (prefers-reduced-motion: reduce) { .wish-confetti { display: none; } }