/* Demo demo22 "Darkroom" — near-black, safelight red, JetBrains Mono numerals, Space Grotesk, glowing event bars. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  --bg: #0c0c0e; --panel: #141417; --panel-2: #1b1b20; --ink: #ecebe6; --muted: #8b8a92; --line: #26262c; --red: #ff4b36;
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 "Space Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.dk {
  --cal-line: rgba(255,255,255,.035); --cal-line-strong: rgba(255,255,255,.09);
  --c-shoot: #ff4b36; --c-casting: #c98bff; --c-meetup: #4fc3ff; --c-fitting: #ffb547; --c-deadline: #ff3d7f; --c-publish: #7dffb0;
  --mx: 50vw; --my: 40vh;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: relative; isolation: isolate;
}
.dk::before { /* the safelight: a red glow that follows the pointer */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(700px circle at var(--mx) var(--my), rgba(255,75,54,.10), transparent 60%),
              radial-gradient(1200px 500px at 85% -10%, rgba(255,75,54,.14), transparent 70%);
}
button:focus-visible, [tabindex]:focus-visible, a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.mono, .cal-grid__time, .cal-chip__time, .cal-ev__time, .cal-month__num, .cal-mini__day, .cal-grid__num, .cal-legend__count, .cal-up__when, .dk__sub { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* top */
.dk__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; padding: 1.4rem 1.8rem 1rem; flex-wrap: wrap; }
.dk__brand { display: inline-block; font: 700 .8rem/1 "Space Grotesk", sans-serif; letter-spacing: .2em; color: var(--ink); text-decoration: none; margin-bottom: .7rem; }
.dk__brand span { color: var(--red); letter-spacing: .05em; }
.dk__title { margin: 0; font: 500 clamp(2rem, 4vw, 3.4rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.dk__sub { margin: .55rem 0 0; color: var(--muted); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.dk__sub::before { content: "●"; color: var(--red); margin-right: .5em; animation: dk-blink 2.4s infinite; }
@keyframes dk-blink { 50% { opacity: .25; } }
.dk__controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dk__views { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.cal-view { font: 500 .82rem/1 "JetBrains Mono", monospace; color: var(--muted); padding: .62rem .85rem; border-radius: 9px; transition: color .15s, background .15s; }
.cal-view:hover { color: var(--ink); }
.cal-view.is-active { background: var(--red); color: #140504; box-shadow: 0 0 24px -4px rgba(255,75,54,.7); }
.dk__step { display: flex; gap: .35rem; }
.dk__btn { font: 500 .85rem/1 "JetBrains Mono", monospace; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; height: 2.4rem; min-width: 2.4rem; padding: 0 .8rem; cursor: pointer; }
.dk__btn:hover { border-color: #3a3a42; background: var(--panel-2); }
.dk__btn--add { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.dk__btn--add:hover { background: #fff; }

/* legend */
.dk__legend { padding: 0 1.8rem .8rem; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .45rem; }
.cal-legend__item { width: auto; gap: .5rem; padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(20,20,23,.7); font-size: .78rem; }
.cal-legend__swatch { box-shadow: 0 0 10px var(--c); }
.cal-legend__count { margin-left: .2rem; color: var(--muted); font-size: .72rem; }
.cal-legend__item:hover { border-color: var(--c); }
.cal-legend__item.is-off .cal-legend__swatch { box-shadow: inset 0 0 0 1.5px var(--c); }

/* body */
.dk__body { flex: 1; min-height: 0; overflow: auto; margin: 0 1.8rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(16,16,19,.82); backdrop-filter: blur(6px); }
.dk[data-view="week"] .dk__body, .dk[data-view="hours"] .dk__body { overflow: hidden; }

/* month */
.cal-month__head { border-bottom: 1px solid var(--line); }
.cal-month__dow { padding: .7rem .8rem; font: 500 .68rem/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cal-month__grid { --cal-row: 6.4rem; }
.cal-month__cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .5rem .5rem .45rem; transition: background .2s; }
.cal-month__cell:nth-child(7n) { border-right: 0; }
.cal-month__cell:hover { background: rgba(255,255,255,.025); }
.cal-month__cell.is-out { background: rgba(0,0,0,.35); }
.cal-month__cell.is-out .cal-month__num { color: #55545b; }
.cal-month__num { align-self: flex-end; font-size: .82rem; color: var(--muted); }
.cal-month__num:hover { color: var(--ink); }
.cal-month__mon { color: var(--red); }
.cal-month__cell.is-today { background: radial-gradient(120% 90% at 100% 0%, rgba(255,75,54,.22), transparent 70%); box-shadow: inset 0 0 0 1px rgba(255,75,54,.6); }
.cal-month__cell.is-today .cal-month__num { color: var(--red); font-weight: 600; }
.cal-month__next { position: absolute; left: .5rem; top: .55rem; font: 600 .68rem/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
.cal-chip { font-size: .74rem; line-height: 1.2; padding: .2rem .35rem; border-radius: 4px; background: color-mix(in srgb, var(--c) 14%, transparent); border-left: 2px solid var(--c); }
.cal-chip:hover { background: color-mix(in srgb, var(--c) 26%, transparent); box-shadow: 0 0 14px -4px var(--c); }
.cal-chip__time { color: var(--c); font-size: .66rem; }
.cal-month__more { font: 500 .7rem/1.4 "JetBrains Mono", monospace; color: var(--muted); padding-left: .35rem; }
.cal-month__more:hover { color: var(--ink); }

/* quarter & year */
.cal-quarter { padding: 1.6rem; --cal-gap: 1.6rem; }
.cal-quarter__month { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
.cal-mini__name { font: 500 1.6rem/1 "Space Grotesk", sans-serif; letter-spacing: -.03em; margin-bottom: 1rem; }
.cal-mini__name:hover { color: var(--red); }
.cal-mini__year { color: var(--muted); font: 400 .8rem/1 "JetBrains Mono", monospace; }
.cal-mini__dow { font: 500 .62rem/1 "JetBrains Mono", monospace; color: var(--muted); padding-bottom: .5rem; text-transform: uppercase; }
.cal-mini__day { font-size: .82rem; border-radius: 8px; }
.cal-mini__day:hover { background: var(--panel-2); }
.cal-mini__day.is-today { color: var(--red); box-shadow: inset 0 0 0 1px var(--red); font-weight: 600; }
.cal-mini__dots i { box-shadow: 0 0 6px var(--c); }
.cal-quarter__count { margin: .8rem 0 0; font: 400 .72rem/1 "JetBrains Mono", monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.cal-year { padding: 1.6rem; --cal-gap: 1.6rem; }
.cal-year .cal-mini { padding: .9rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.cal-year .cal-mini__name { font-size: 1.05rem; margin-bottom: .6rem; }
.cal-year .cal-mini__day { font-size: .68rem; border-radius: 4px; margin: 1px; }
.cal-year .cal-mini__dots { display: none; }
.cal-year .cal-mini__day[data-load="1"] { background: rgba(255,75,54,.16); }
.cal-year .cal-mini__day[data-load="2"] { background: rgba(255,75,54,.32); }
.cal-year .cal-mini__day[data-load="3"] { background: rgba(255,75,54,.55); color: #fff; }
.cal-year .cal-mini__day[data-load="4"] { background: var(--red); color: #140504; box-shadow: 0 0 12px -2px rgba(255,75,54,.8); }

/* hour grids */
.cal-grid__head { border-bottom: 1px solid var(--line); background: rgba(12,12,14,.6); }
.cal-grid__corner { color: var(--muted); padding: 0 .5rem .7rem; font-family: "JetBrains Mono", monospace; }
.cal-grid__day { padding: .7rem 0 .6rem; gap: .2rem; }
.cal-grid__dow { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cal-grid__num { font-size: 1.35rem; font-weight: 600; }
.cal-grid--hours .cal-grid__day { flex-direction: row; gap: .8rem; align-items: baseline; padding-left: .8rem; }
.cal-grid__day.is-today .cal-grid__num { color: var(--red); text-shadow: 0 0 18px rgba(255,75,54,.7); }
.cal-grid__time { color: #6d6c74; }
.cal-grid__col { border-left: 1px solid var(--line); }
.cal-grid__col.is-today { background-color: rgba(255,75,54,.04); }
.cal-ev { border-radius: 6px; padding: .25rem .45rem; font-size: .74rem; line-height: 1.22;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #111), color-mix(in srgb, var(--c) 16%, #111));
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: #fff; box-shadow: 0 0 22px -10px var(--c); transition: box-shadow .2s; }
.cal-ev:hover { box-shadow: 0 0 26px -4px var(--c); }
.cal-ev__time { color: var(--c); font-size: .66rem; }
.cal-ev__title { font-weight: 500; }
.cal-ev__place { color: rgba(255,255,255,.55); font-size: .68rem; margin-top: .15rem; }
.cal-ev.is-draft { background: rgba(255,75,54,.18); border: 1px dashed var(--red); }
.cal-ev.is-dragging { box-shadow: 0 0 34px -2px var(--c); }
.cal-ev__resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--c); opacity: 0; }
.cal-ev:hover .cal-ev__resize::after { opacity: 1; }
.cal-now { background: var(--red); box-shadow: 0 0 12px var(--red); }
.cal-grid--hours .cal-ev { font-size: .85rem; padding: .4rem .7rem; }

/* day agenda */
.cal-day { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; padding: 1.8rem; }
.cal-day__summary { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem; align-self: start; }
.cal-day__dow { font: 500 .72rem/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .14em; color: var(--red); }
.cal-day__num { font: 700 6.5rem/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; margin: .4rem 0 0; }
.cal-day__month { font-size: 1.05rem; }
.cal-day__stat { margin-top: 1rem; font: 400 .72rem/1.5 "JetBrains Mono", monospace; color: var(--muted); }
.cal-day__list { display: grid; gap: .6rem; }
.cal-day__card { padding: 1rem 1.2rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c); grid-template-columns: 6rem minmax(0, 1fr); transition: border-color .2s, box-shadow .2s; }
.cal-day__card:hover { border-color: var(--c); box-shadow: 0 0 30px -14px var(--c); }
.cal-day__time { font: 600 1.15rem/1.1 "JetBrains Mono", monospace; color: var(--c); }
.cal-day__time span { color: var(--muted); font-size: .8rem; font-weight: 400; }
.cal-day__cat { font: 500 .68rem/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.cal-day__title { font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; margin: .35rem 0 .25rem; }
.cal-day__place, .cal-day__note { color: var(--muted); font-size: .85rem; }
.cal-day__empty { padding: 2rem; color: var(--muted); font-size: 1.1rem; }
.cal-btn { font: 500 .82rem/1 "JetBrains Mono", monospace; padding: .7rem 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); }
.cal-btn:hover { border-color: #44444c; }
.cal-btn--primary { background: var(--red); border-color: var(--red); color: #140504; font-weight: 600; }
.cal-btn--primary:hover { box-shadow: 0 0 22px -4px rgba(255,75,54,.8); }
.cal-btn--danger { color: #ff7c8f; }

/* ticker */
.dk__ticker { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.8rem .9rem; min-width: 0; }
.dk__ticker-label { flex: none; font: 600 .68rem/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .14em; color: var(--red); }
.dk__ticker-track { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.dk__ticker-track::-webkit-scrollbar { display: none; }
.cal-up { display: flex; gap: .5rem; width: max-content; }
.cal-up__btn { flex-direction: row; gap: .6rem; align-items: baseline; white-space: nowrap; padding: .45rem .75rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.cal-up__btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); align-self: center; }
.cal-up__btn:hover { border-color: var(--c); }
.cal-up__when { font-size: .7rem; color: var(--muted); }
.cal-up__title { font-size: .8rem; }
.dk__reset { flex: none; font: 400 .7rem/1 "JetBrains Mono", monospace; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dk__reset:hover { color: var(--ink); }

/* editor */
.cal-editor { background: #151518; color: var(--ink); border: 1px solid #2c2c33; border-radius: 18px; box-shadow: 0 0 80px -20px rgba(255,75,54,.45); }
.cal-editor::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
.cal-editor__form { padding: 1.5rem; }
.cal-editor__title { margin: 0; font: 500 1.6rem/1 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.cal-editor__field span { font: 500 .66rem/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.cal-editor__field input, .cal-editor__field select, .cal-editor__field textarea { background: #0e0e10; color: var(--ink); border: 1px solid #2c2c33; border-radius: 10px; padding: .6rem .7rem; color-scheme: dark; }
.cal-editor__field input:focus, .cal-editor__field select:focus, .cal-editor__field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,75,54,.2); }
.cal-editor__hint { margin: 0; font: 400 .72rem/1.4 "JetBrains Mono", monospace; color: var(--muted); }

@media (max-width: 900px) {
  .dk { height: auto; min-height: 100vh; }
  .dk__top, .dk__legend, .dk__ticker { padding-left: 1rem; padding-right: 1rem; }
  .dk__body { margin: 0 1rem; overflow: visible; }
  .dk[data-view="week"] .dk__body, .dk[data-view="hours"] .dk__body { height: 74vh; }
  .cal-day { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
  .cal-day__num { font-size: 4rem; }
}
@media (max-width: 640px) {
  .dk__controls { width: 100%; }
  .dk__views { width: 100%; justify-content: space-between; }
  .cal-view { padding: .6rem .5rem; font-size: .74rem; }
  .dk__step { width: 100%; }
  .dk__btn--add { margin-left: auto; }
  .cal-month__grid { --cal-row: 4.4rem; }
  .cal-month__cell { padding: .3rem .25rem; }
  .cal-month__dow { padding: .55rem .2rem; font-size: .58rem; letter-spacing: 0; text-align: center; }
  .cal-chip { padding: 0; height: 4px; border: 0; background: var(--c); box-shadow: 0 0 6px var(--c); }
  .cal-chip > span { display: none; }
  .cal-month__events { gap: 3px; }
  .cal-month__more { font-size: .6rem; padding: 0; }
  .cal-month__next { display: none; }
  .cal-quarter, .cal-year { padding: 1rem; }
  .cal-day__card { grid-template-columns: 4.5rem minmax(0, 1fr); padding: .9rem; gap: .7rem; }
  .cal-day__time { font-size: .95rem; }
  .cal-day__title { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) { .dk__sub::before { animation: none; } }