/* Direction: Milan — romantic matrimony admin: blush cream paper, rose accent, pastel tints, Fraunces display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fff8f5;
  --surface: #ffffff;
  --surface-2: #fdeef1;
  --border: #f1dce2;
  --border-strong: #bbb0b0;
  --ink: #3a2a33;
  --muted: #7a6670;
  --accent: #c2336a;
  --accent-hover: #a52b5a;
  --accent-ink: #ffffff;
  --accent-text: #a82a5a;
  --accent-strong: #b22f62;
  --accent-soft: #fde4ec;
  --accent-border: #e49fb6;
  --success: #2a7f50;
  --success-ink: #ffffff;
  --success-soft: #e5e9e1;
  --success-strong: #27754a;
  --warning: #a8670f;
  --warning-ink: #ffffff;
  --warning-soft: #f5e7d9;
  --warning-strong: #8f570d;
  --danger: #b83227;
  --danger-ink: #ffffff;
  --danger-soft: #f6e0dc;
  --danger-strong: #b83227;
  --chart-1: #c2336a;
  --chart-2: #c97613;
  --chart-3: #526509;
  --chart-4: #049d8c;
  --chart-5: #135e8d;
  --chart-6: #a069e5;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 8px 28px rgb(194 51 106 / 0.1);
  --x-charcoal: #3a2a33;
  --x-on-photo: #ffffff;
  --x-pink: #fbd5e1;
  --x-lav: #e5dcf8;
  --x-peach: #fddcc6;
  --x-green: #cdeedb;
  --x-blue: #d3e6f8;
  --x-orange: #fee0b5;
  --x-coral: #f9cfc9;
  --x-yellow: #fcefb4;
  --x-gray: #ece6e8;
  --x-wine: #5c1f3d;
  --x-pink-d: #e8719e;
  --x-lav-d: #9a82db;
  --x-peach-d: #f2a074;
  --x-green-d: #5fbf8a;
  --x-blue-d: #6aa8e0;
  --x-orange-d: #f0b05a;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #14050b;
  --surface: #2c1e23;
  --surface-2: #201217;
  --border: #35282d;
  --border-strong: #5b5054;
  --ink: #fff8f5;
  --muted: #a19797;
  --accent: #c2336a;
  --accent-hover: #cb5280;
  --accent-ink: #ffffff;
  --accent-text: #d36d94;
  --accent-strong: #d36d94;
  --accent-soft: #3a0f20;
  --accent-border: #621a36;
  --success: #2a7f50;
  --success-ink: #ffffff;
  --success-soft: #19201a;
  --success-strong: #599b77;
  --warning: #a8670f;
  --warning-ink: #ffffff;
  --warning-soft: #351b0c;
  --warning-strong: #b57e34;
  --danger: #b83227;
  --danger-ink: #ffffff;
  --danger-soft: #380f11;
  --danger-strong: #cc6c64;
  --chart-1: #c2336a;
  --chart-2: #c97613;
  --chart-3: #728d0b;
  --chart-4: #049d8c;
  --chart-5: #0088cd;
  --chart-6: #a069e5;
}

/* Milan — pastel tints, status chips, rings, bars */
.tint-pink { background: var(--x-pink); color: var(--x-charcoal); }
.tint-lav { background: var(--x-lav); color: var(--x-charcoal); }
.tint-peach { background: var(--x-peach); color: var(--x-charcoal); }
.tint-green { background: var(--x-green); color: var(--x-charcoal); }
.tint-blue { background: var(--x-blue); color: var(--x-charcoal); }
.tint-orange { background: var(--x-orange); color: var(--x-charcoal); }
.tint-coral { background: var(--x-coral); color: var(--x-charcoal); }
.lift { transition: transform .18s ease, box-shadow .18s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.lift:active { transform: translateY(0); }
.lift:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.on-tint { color: var(--x-charcoal); }
.on-tint-soft { color: var(--x-charcoal); opacity: .78; }

.av { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; box-shadow: 0 0 0 2px var(--surface); color: var(--x-charcoal); }

.st { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--x-charcoal); }
.st-green { background: var(--x-green); }
.st-yellow { background: var(--x-yellow); }
.st-red { background: var(--x-coral); }
.st-blue { background: var(--x-blue); }
.st-gray { background: var(--x-gray); }
.st-pink { background: var(--x-pink); }
.st-lav { background: var(--x-lav); }
.st-peach { background: var(--x-peach); }

.bar { height: .6rem; border-radius: 999px; background: var(--x-pink); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--x-pink-d), var(--x-lav-d)); }
.bar.ok > i { background: var(--x-green-d); }
.bar.warn > i { background: var(--x-orange-d); }

.ring { --p: 90; width: 11rem; height: 11rem; border-radius: 999px; display: grid; place-items: center; background: conic-gradient(var(--x-pink-d) calc(var(--p) * 1%), var(--x-pink) 0); }
.ring > div { width: 8.6rem; height: 8.6rem; border-radius: 999px; background: var(--surface); display: grid; place-items: center; text-align: center; }

.nav-link { display: flex; align-items: center; gap: .75rem; border-radius: 14px; padding: .6rem .85rem; font-weight: 500; color: var(--ink); transition: background .15s ease; }
.nav-link:hover { background: var(--accent-soft); }
.nav-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.nav-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.nav-link .nbadge { margin-left: auto; border-radius: 999px; padding: 0 .5rem; font-size: .72rem; font-weight: 700; background: var(--x-pink); color: var(--x-charcoal); }

#scrim { display: none; }
@media (max-width: 1023px) {
  #sidebar { transform: translateX(-102%); transition: transform .25s ease; }
  body[data-nav="open"] #sidebar { transform: none; box-shadow: var(--shadow-card); }
  body[data-nav="open"] #scrim { display: block; }
}

.bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .25rem; font-size: .7rem; font-weight: 600; color: var(--muted); border-radius: 14px; min-height: 3.25rem; justify-content: center; }
.bottom-nav a[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }

.petal { background-image: radial-gradient(circle at 12% 18%, var(--x-pink) 0 5px, transparent 6px), radial-gradient(circle at 88% 82%, var(--x-lav) 0 7px, transparent 8px), radial-gradient(circle at 70% 12%, var(--x-peach) 0 4px, transparent 5px); }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }
.floaty-2 { animation: floaty 6.5s ease-in-out infinite .8s; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.beat { animation: beat 2.4s ease-in-out infinite; }
html.reduced-motion .floaty, html.reduced-motion .floaty-2, html.reduced-motion .beat, html.reduced-motion .lift { animation: none !important; transition: none !important; }

.wine-band { background: var(--x-wine); color: var(--x-on-photo); }
.table-soft { width: 100%; border-collapse: collapse; }
.table-soft th { text-align: left; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .6rem .75rem; white-space: nowrap; }
.table-soft td { padding: .75rem; vertical-align: middle; border-top: 1px solid var(--border); }
.table-soft tbody tr:hover { background: var(--accent-soft); }

.switch { position: relative; display: inline-flex; width: 2.75rem; height: 1.6rem; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; width: 100%; height: 100%; margin: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--x-gray); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.2rem; height: 1.2rem; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; }
.switch input:checked + span { background: var(--x-green-d); }
.switch input:checked + span::after { transform: translateX(1.15rem); }
.switch input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }