/* Desktop model (landing/desktop.js): the Kalender widget on a desktop wallpaper, as a
   still picture. The widget uses the app's own tokens (app/styles.css, the same palette
   as the website), light or dark with the page; calendar colours come from --c (light)
   / --cd (dark). */
.dk {
  --dk-bg: #ffffff;
  --dk-text: #1d2026;
  --dk-text-2: #585f6a;
  --dk-sep: #d8dbe0;
  --dk-fill: rgb(29 32 38 / .06);
  --dk-red: #c4302a;
  --dk-red-fill: #d4352b;
  --dk-orange: #8a4f00;
  --dk-shadow: 0 0 0 1px rgb(29 32 38 / .06), 0 24px 60px -20px rgb(29 32 38 / .35);
  --dk-wall: linear-gradient(172deg, #bcd3ec 0%, #dde7f3 46%, #efe7de 100%);
  --dk-hill-1: #9fb9d6;
  --dk-hill-2: #c7d6e6;
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.dk-w-tick, .dk-w-meta, .dk-w-dots i { --cal: var(--c, #007aff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dk {
    --dk-bg: #1b1e23; --dk-text: #eceef1; --dk-text-2: #a3aab5;
    --dk-sep: #2c3139; --dk-fill: rgb(255 255 255 / .07);
    --dk-red: #ff8a7e; --dk-orange: #f0b35e;
    --dk-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px -20px rgb(0 0 0 / .7);
    --dk-wall: linear-gradient(172deg, #0e1726 0%, #1a2436 50%, #2a2333 100%);
    --dk-hill-1: #1f2c42; --dk-hill-2: #283650;
  }
  :root:not([data-theme="light"]) :is(.dk-w-tick, .dk-w-meta, .dk-w-dots i) { --cal: var(--cd, #0a84ff); }
}
:root[data-theme="dark"] .dk {
  --dk-bg: #1b1e23; --dk-text: #eceef1; --dk-text-2: #a3aab5;
  --dk-sep: #2c3139; --dk-fill: rgb(255 255 255 / .07);
  --dk-red: #ff8a7e; --dk-orange: #f0b35e;
  --dk-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px -20px rgb(0 0 0 / .7);
  --dk-wall: linear-gradient(172deg, #0e1726 0%, #1a2436 50%, #2a2333 100%);
  --dk-hill-1: #1f2c42; --dk-hill-2: #283650;
}
:root[data-theme="dark"] :is(.dk-w-tick, .dk-w-meta, .dk-w-dots i) { --cal: var(--cd, #0a84ff); }

/* ---------- The stage: a piece of desktop wallpaper with the widget in the middle.
   Its height is reserved before the script draws it (landing.css), so keep the two in step. ---------- */
.dk-stage { position: relative; display: grid; place-items: center; min-height: 44.5rem; padding: 3.5rem 1rem; overflow: hidden; overflow: clip; border-radius: 14px; box-shadow: var(--shadow-sheet); isolation: isolate; }
.dk-wallpaper { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 18% 108%, var(--dk-hill-1) 0 60%, transparent 61%),
  radial-gradient(80% 50% at 85% 112%, var(--dk-hill-2) 0 58%, transparent 59%),
  var(--dk-wall); }

/* ---------- The widget, a little larger than on a real desktop ---------- */
.dk-widget { width: 18.5rem; zoom: 1.2; padding: .875rem .875rem .5rem; background: var(--dk-bg); color: var(--dk-text); border-radius: 12px; box-shadow: var(--dk-shadow); }
.dk-w-head { position: relative; margin-bottom: .5rem; }
.dk-w-head p { margin: 0; }
.dk-w-weekday { color: var(--dk-red); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; }
.dk-w-date { font: 300 1.625rem/1.1 var(--display); color: var(--dk-text-2); }
.dk-w-date b { font-weight: 600; color: var(--dk-text); }
.dk-w-sub { font-size: .75rem; color: var(--dk-text-2); }
.dk-w-open, .dk-w-chat { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 7px; background: var(--dk-fill); }
.dk-w-open svg, .dk-w-chat svg { width: .875rem; height: .875rem; }
/* Kalender AI: the red speech bubble left of "open the calendar", as in the widget */
.dk-w-chat { right: 2.125rem; color: var(--dk-red); }

.dk-w-month { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font: .75rem var(--display); }
.dk-w-wd { padding-bottom: .1875rem; font-size: .625rem; font-weight: 600; color: var(--dk-text-2); }
.dk-w-day { display: grid; justify-items: center; height: 1.6875rem; }
.dk-w-num { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-weight: 600; }
.dk-w-weekend .dk-w-num, .dk-out .dk-w-num { font-weight: 400; color: var(--dk-text-2); }
.dk-today .dk-w-num { background: var(--dk-red-fill); color: #fff; font-weight: 700; }
.dk-w-dots { display: flex; gap: 2px; height: 4px; margin-top: -1px; }
.dk-w-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--cal); }

.dk-w-next { display: flex; justify-content: space-between; margin: .5rem 0 .25rem; padding-top: .375rem; border-top: .5px solid var(--dk-sep); font-size: .6875rem; color: var(--dk-text-2); }
.dk-w-next span:first-child { font-weight: 600; color: var(--dk-text); }
.dk-w-list { margin: 0; padding: 0; list-style: none; }
.dk-w-row { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); align-items: start; }
.dk-w-tick { width: 1rem; height: 1rem; margin-top: .5rem; border: 1.5px solid var(--cal); border-radius: 50%; }
.dk-w-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; align-items: center; padding: .375rem .25rem; }
.dk-w-title { font-size: .8125rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-w-meta { grid-row: 2; font-size: .6875rem; line-height: 1.35; color: var(--dk-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-w-meta b { color: color-mix(in srgb, var(--cal) 55%, var(--dk-text)); font-weight: 600; }
.dk-w-count { grid-column: 2; grid-row: 1 / span 2; font: 600 .78rem var(--display); white-space: nowrap; }
.dk-red { color: var(--dk-red); }
.dk-orange { color: var(--dk-orange); }
.dk-grey { color: var(--dk-text-2); font-weight: 400; }

/* ---------- Smaller screens: the widget at its real size ---------- */
@media (max-width: 30rem) {
  .dk-stage { min-height: 35.3125rem; padding: 2rem .75rem; }
  .dk-widget { zoom: 1; }
}

@media (forced-colors: active) {
  .dk-widget { border: 1px solid CanvasText; }
  .dk-today .dk-w-num { forced-color-adjust: none; }
}