/* Direction: CalmDesk AI — a calm morning sky: pastel sky blue, blush pink, butter yellow, lavender and mint */
/* 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: #eaf5fd;
  --surface: #ffffff;
  --surface-2: #f2f8fd;
  --border: #d3e5f3;
  --border-strong: #a6b1b9;
  --ink: #27405a;
  --muted: #4f6a85;
  --accent: #2f7fc4;
  --accent-hover: #286ca7;
  --accent-ink: #07121b;
  --accent-text: #1f66a8;
  --accent-strong: #286ca6;
  --accent-soft: #dcedfa;
  --accent-border: #96c0e3;
  --success: #2a8f6a;
  --success-ink: #ffffff;
  --success-soft: #d3e9eb;
  --success-strong: #216f53;
  --warning: #a97b0f;
  --warning-ink: #ffffff;
  --warning-soft: #e2e6e0;
  --warning-strong: #84600c;
  --danger: #b84673;
  --danger-ink: #ffffff;
  --danger-soft: #e4e0ec;
  --danger-strong: #9b3b62;
  --chart-1: #2f7fc4;
  --chart-2: #a678cc;
  --chart-3: #9f3d55;
  --chart-4: #bc7818;
  --chart-5: #4c6d12;
  --chart-6: #1d9a93;

  --font-display: "Quicksand", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --radius-card: 24px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 14px 34px -16px rgba(60, 110, 160, 0.32);
  --x-ink: #27405a;
  --x-cloud: #ffffff;
  --x-pink: #fcdcea;
  --x-pink-s: #f5a9c6;
  --x-yellow: #fff3c4;
  --x-yellow-s: #f6d36a;
  --x-sky: #d6ecfb;
  --x-sky-s: #7fc2ef;
  --x-lav: #e7e0fb;
  --x-lav-s: #b8a7ea;
  --x-mint: #d3f3e4;
  --x-mint-s: #81d4ae;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #050d14;
  --surface: #1e252c;
  --surface-2: #121920;
  --border: #282f35;
  --border-strong: #50565b;
  --ink: #eaf5fd;
  --muted: #8e98a0;
  --accent: #2f7fc4;
  --accent-hover: #4e92cd;
  --accent-ink: #07121b;
  --accent-text: #4f92cd;
  --accent-strong: #4f92cd;
  --accent-soft: #0e263b;
  --accent-border: #184063;
  --success: #2a8f6a;
  --success-ink: #ffffff;
  --success-soft: #0d2a27;
  --success-strong: #4ba081;
  --warning: #a97b0f;
  --warning-ink: #ffffff;
  --warning-soft: #292513;
  --warning-strong: #b08622;
  --danger: #b84673;
  --danger-ink: #ffffff;
  --danger-soft: #2c1a29;
  --danger-strong: #c86f92;
  --chart-1: #2f7fc4;
  --chart-2: #ac7ed3;
  --chart-3: #c05b71;
  --chart-4: #c37e22;
  --chart-5: #688f2f;
  --chart-6: #18a8a0;
}

.sky-body { background: linear-gradient(180deg, var(--x-sky) 0%, var(--canvas) 46%, var(--x-lav) 140%) fixed; color: var(--x-ink); }

/* decoration */
.deco { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.no-decor .deco, .no-decor .deco-in { display: none; }
.deco .abs, .deco-in .abs { position: absolute; }
.deco svg, .deco-in svg, .empty svg { width: 100%; height: auto; display: block; }
.cloud, .cloud * { fill: var(--x-cloud); }
.bird { fill: none; stroke: var(--x-lav-s); }
.leaf path:first-child { fill: var(--x-mint-s); }
.leaf path:last-child { fill: none; stroke: var(--x-mint); stroke-width: 2; }
.flower g circle { fill: var(--x-pink-s); }
.flower > circle { fill: var(--x-yellow-s); }
.f-yellow { fill: var(--x-yellow-s); } .f-lav { fill: var(--x-lav-s); } .f-pink { fill: var(--x-pink-s); }
.f-ink { fill: var(--x-ink); } .f-sky { fill: var(--x-sky-s); } .f-cloud { fill: var(--x-cloud); }
.s-lav { stroke: var(--x-lav-s); } .s-ink { stroke: var(--x-ink); }
.c1 { top: 5%; left: -3%; width: 260px; opacity: .75; animation: drift 42s ease-in-out infinite alternate; }
.c2 { top: 30%; right: -4%; width: 220px; opacity: .6; animation: drift 52s ease-in-out infinite alternate-reverse; }
.c3 { bottom: 18%; left: 12%; width: 180px; opacity: .5; animation: drift 46s ease-in-out infinite alternate; }
.b1 { top: 14%; right: 22%; width: 46px; animation: flap 6s ease-in-out infinite; }
.b2 { top: 20%; right: 17%; width: 30px; animation: flap 7s ease-in-out infinite .8s; }
.b3 { top: 52%; left: 30%; width: 34px; opacity: .7; animation: flap 8s ease-in-out infinite 1.4s; }
.l1 { bottom: -10px; right: 2%; width: 70px; transform: rotate(-20deg); opacity: .7; }
.l2 { bottom: 0; left: 1%; width: 56px; transform: rotate(30deg); opacity: .6; }
.fl1 { bottom: 24px; right: 9%; width: 36px; opacity: .8; animation: floaty 7s ease-in-out infinite; }
.fl2 { bottom: 40px; left: 7%; width: 28px; opacity: .7; animation: floaty 9s ease-in-out infinite 1s; }

/* surfaces */
.panel { background: color-mix(in srgb, var(--x-cloud) 88%, transparent); border: 1px solid color-mix(in srgb, var(--x-sky-s) 30%, transparent); border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--x-ink); }
.tile { border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--x-ink); transition: transform .25s ease, box-shadow .25s ease; position: relative; overflow: hidden; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--x-ink) 40%, transparent); }
.g-sky { background: linear-gradient(145deg, var(--x-sky), var(--x-cloud) 150%); }
.g-yellow { background: linear-gradient(145deg, var(--x-yellow), var(--x-cloud) 150%); }
.g-mint { background: linear-gradient(145deg, var(--x-mint), var(--x-cloud) 150%); }
.g-pink { background: linear-gradient(145deg, var(--x-pink), var(--x-cloud) 150%); }
.g-lav { background: linear-gradient(145deg, var(--x-lav), var(--x-cloud) 150%); }
.hero { position: relative; overflow: hidden; border-radius: 28px; color: var(--x-ink); background: linear-gradient(120deg, var(--x-sky) 0%, var(--x-cloud) 48%, var(--x-pink) 100%); box-shadow: var(--shadow-card); }
.ibub { width: 2.75rem; height: 2.75rem; border-radius: 1rem; display: grid; place-items: center; background: var(--x-cloud); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--x-ink) 45%, transparent); }
.logo { width: 2.5rem; height: 2.5rem; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--x-sky-s), var(--x-pink-s)); font-size: 1.25rem; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 800; color: var(--x-ink); white-space: nowrap; transition: background .4s ease, color .4s ease; }
.t-sky { background: var(--x-sky); } .t-yellow { background: var(--x-yellow); } .t-mint { background: var(--x-mint); } .t-pink { background: var(--x-pink); } .t-lav { background: var(--x-lav); }

/* nav */
.nav a { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: 16px; font-weight: 700; color: var(--x-ink); transition: background .2s, transform .2s; }
.nav a:hover { background: var(--x-sky); transform: translateX(3px); }
.nav a[aria-current="page"] { background: linear-gradient(90deg, var(--x-pink), var(--x-lav)); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--x-ink) 50%, transparent); }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* rows */
.row-card { transition: transform .2s ease, box-shadow .2s ease, background .3s ease; }
.row-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--x-ink) 40%, transparent); }
.row-urgent { background: linear-gradient(90deg, color-mix(in srgb, var(--x-pink) 55%, var(--x-cloud)), var(--x-cloud) 70%); border-left: 5px solid var(--x-pink-s); }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; color: var(--x-ink); background: var(--x-lav); }

/* charts */
.bar-track { height: .8rem; border-radius: 999px; background: color-mix(in srgb, var(--x-sky) 70%, var(--x-cloud)); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transform-origin: left; animation: growx .9s cubic-bezier(.2, .7, .2, 1) both; transition: width .6s ease; }
.stack { display: flex; height: 1.1rem; border-radius: 999px; overflow: hidden; background: var(--x-sky); gap: 2px; }
.stack > span { transform-origin: left; animation: growx .9s ease both; }
.donut { width: 9.5rem; height: 9.5rem; border-radius: 50%; display: grid; place-items: center; animation: pop .8s ease both; flex: none; }
.donut-hole { width: 62%; height: 62%; border-radius: 50%; background: var(--x-cloud); display: grid; place-content: center; text-align: center; color: var(--x-ink); line-height: 1.1; }
.cols { display: flex; gap: .6rem; height: 12rem; align-items: stretch; }
.cols.dense { gap: 3px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; font-size: .75rem; font-weight: 700; }
.col-area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.col-bar { width: 72%; max-width: 3.6rem; border-radius: 12px 12px 4px 4px; transform-origin: bottom; animation: growy .9s cubic-bezier(.2, .7, .2, 1) both; min-height: 6px; transition: height .6s ease; }
.dense .col-bar { width: 80%; border-radius: 6px 6px 2px 2px; }

/* controls */
.step { border: 1px solid var(--border); border-radius: 999px; padding: .45rem .95rem; font-weight: 800; font-size: .85rem; background: var(--x-cloud); color: var(--x-ink); transition: background .3s, transform .2s, border-color .3s; cursor: pointer; }
.step:hover { transform: translateY(-1px); background: var(--x-sky); }
.step.on { border-color: var(--x-ink); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--x-ink) 45%, transparent); }
.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"] { accent-color: var(--accent); width: 1.15rem; height: 1.15rem; }
.timeline li { position: relative; padding-left: 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .45rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--x-sky-s); }
.timeline li::after { content: ""; position: absolute; left: .3rem; top: 1.2rem; bottom: -.9rem; width: 2px; background: var(--x-sky); }
.timeline li:last-child::after { display: none; }
.soft-pulse { animation: softpulse 2.6s ease-in-out infinite; }
.htmx-indicator { transition: opacity .2s; }

/* motion */
.fade-in { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.pop { animation: pop .6s ease both; }
.celebrate { animation: pop .7s ease both; }
.spark { display: inline-block; animation: floaty 2.4s ease-in-out infinite; }
.float { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes drift { from { transform: translateX(-3vw); } to { transform: translateX(5vw); } }
@keyframes flap { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(8px, -9px) rotate(-4deg); } }
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop { 0% { transform: scale(.92); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes softpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--x-pink-s) 60%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }