/* app.css - Design-Layer ueber daisyui.css. Zwei Aufgaben:
 *
 * 1) THEME "morgans": eigene DaisyUI-Tokens statt Default-Look. v4 erwartet
 *    OKLCH-KOMPONENTEN ohne oklch()-Wrapper (`--p: 58.5% 0.2156 258.3`).
 *    Hex hier hinein macht die UI unsichtbar. Hell/Dunkel haengt an
 *    prefers-color-scheme, darum braucht das Markup nur data-theme="morgans"
 *    und es gibt keinen Theme-Flash beim ersten Paint.
 *
 * 2) UTILITY-LAYER: das vendored daisyui.css ist dist/full.css und enthaelt
 *    ausschliesslich Komponenten + Themes - KEINE Tailwind-Utilities. flex,
 *    grid-cols-7, max-w-3xl, text-sm, mb-4 waren damit wirkungslos. Ohne
 *    npm/CDN laesst sich Tailwind hier nicht bauen, also ist genau die
 *    benutzte Teilmenge handgerollt - Tailwind-Namen, damit das Markup
 *    unveraendert funktioniert. Neue Klasse im Markup = hier ergaenzen.
 */

/* ---------- 1. Theme ---------- */

/* NICHT an :root haengen: :root hat dieselbe Spezifitaet wie
 * [data-theme=nord] und app.css laedt spaeter - die eingebauten Themes
 * waeren sonst wirkungslos, sobald der Waehler eines davon setzt.
 * htmlOpen setzt data-theme immer, :root wird also nicht gebraucht. */
[data-theme=morgans],
[data-theme=light] {
  color-scheme: light;
  --p: 58.5% 0.2156 258.3;   --pc: 100% 0 0;
  --s: 54% 0.19 282;         --sc: 100% 0 0;
  --a: 68% 0.093 213;        --ac: 20% 0.024 213;
  --n: 21% 0.004 286;        --nc: 98% 0 0;
  --b1: 100% 0 0;
  --b2: 96.8% 0.0018 286;
  --b3: 92.4% 0.0035 286;
  --bc: 21% 0.004 286;
  --in: 71% 0.13 233;        --inc: 18% 0.03 233;
  --su: 73% 0.18 145;        --suc: 24% 0.05 145;
  --wa: 77% 0.16 65;         --wac: 26% 0.05 65;
  --er: 63% 0.234 29.2;      --erc: 100% 0 0;
  --rounded-box: 0.875rem;
  --rounded-btn: 0.75rem;
  --rounded-badge: 0.5rem;
  --tab-radius: 0.625rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.97;
  --border-btn: 1px;
  --tab-border: 1px;
}

/* Nur "System" (morgans) folgt der Systemeinstellung. Wer Hell, Dunkel
 * oder ein eingebautes Theme waehlt, hat eine Entscheidung getroffen. */
@media (prefers-color-scheme: dark) {
  [data-theme=morgans] {
    color-scheme: dark;
    --p: 63.2% 0.208 258.3;  --pc: 100% 0 0;
    --s: 62% 0.18 282;       --sc: 100% 0 0;
    --a: 76% 0.1 213;        --ac: 20% 0.024 213;
    --n: 40% 0.005 286;      --nc: 98% 0 0;
    --b1: 21.8% 0.0045 286;
    --b2: 27.6% 0.005 286;
    --b3: 34.2% 0.005 286;
    --bc: 96.8% 0.0018 286;
    --in: 82% 0.11 220;      --inc: 18% 0.03 233;
    --su: 78% 0.19 145;      --suc: 24% 0.05 145;
    --wa: 79% 0.16 68;       --wac: 26% 0.05 65;
    --er: 66% 0.22 29.2;     --erc: 100% 0 0;
  }
}

/* Explizit erzwungenes Dunkel (System-Einstellung uebersteuert). */
[data-theme=dark] {
  color-scheme: dark;
  --p: 63.2% 0.208 258.3;    --pc: 100% 0 0;
  --s: 62% 0.18 282;         --sc: 100% 0 0;
  --a: 76% 0.1 213;          --ac: 20% 0.024 213;
  --n: 40% 0.005 286;        --nc: 98% 0 0;
  --b1: 21.8% 0.0045 286;
  --b2: 27.6% 0.005 286;
  --b3: 34.2% 0.005 286;
  --bc: 96.8% 0.0018 286;
  --in: 82% 0.11 220;        --inc: 18% 0.03 233;
  --su: 78% 0.19 145;        --suc: 24% 0.05 145;
  --wa: 79% 0.16 68;         --wac: 26% 0.05 65;
  --er: 66% 0.22 29.2;       --erc: 100% 0 0;
}

/* ---------- 2. Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

h1, h2, h3, h4, p { margin: 0; }

/* Zahlen in Statistiken duerfen beim Aktualisieren nicht springen. */
.stat-value, .tabular-nums { font-variant-numeric: tabular-nums; }

/* iOS-Feeling: Kopfzeile bleibt stehen, Inhalt scrollt darunter weg. */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: env(safe-area-inset-top);
  background-color: var(--fallback-b1, oklch(var(--b1)));
  border-bottom: 1px solid var(--fallback-b3, oklch(var(--b3)));
}
@supports (backdrop-filter: blur(1px)) {
  .app-bar {
    background-color: transparent;
    backdrop-filter: saturate(180%) blur(20px);
  }
  .app-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--fallback-b1, oklch(var(--b1) / 0.82));
  }
}

.pb-safe { padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem); }
.min-touch { min-height: 48px; }

/* Bottom-Nav (btm-nav) haelt selbst den Home-Indicator frei; der Inhalt
 * braucht darueber hinaus Platz, sonst liegt die Nav auf der letzten Karte. */
.pb-nav { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

/* Ladezustaende: htmx setzt .htmx-request auf das ausloesende Element. */
.htmx-indicator { opacity: 0; transition: opacity .15s ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
#tabbody, #calgrid { transition: opacity .15s ease-out; }
#tabbody.htmx-request, #calgrid.htmx-request { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .htmx-indicator, #tabbody, #calgrid { transition: none; }
}

/* Bottom-Nav wie eine iOS-Tab-Bar: aktiv nur ueber Farbe und Gewicht,
 * kein Indikator-Strich (den setzt DaisyUI per border-top auf .active).
 * Inaktiv ist gedaempft, aber noch gut lesbar. */
.btm-nav > * {
  border-top-width: 0 !important;
  color: var(--fallback-bc, oklch(var(--bc) / 0.55));
  gap: .125rem;
  transition: color .15s ease-out;
}
.btm-nav > .active {
  background-color: transparent;
  font-weight: 600;
}
.btm-nav > *:active { opacity: .6; }

/* radial-progress zeichnet in v4 KEINE Spur: bei --value:0 bleiben nur zwei
 * winzige Punkte stehen und "0/2" sieht kaputt aus. Ein Inset-Ring in
 * Dicke der Fortschrittslinie legt die fehlende Spur darunter. */
.radial-progress {
  box-shadow: inset 0 0 0 var(--thickness) var(--fallback-bc, oklch(var(--bc) / 0.14));
}

/* ---------- Kanal-Status ---------- */
/* Ruhig wenn alles laeuft, laut nur im Problemfall. Der Aufbau der Karte
 * ist in allen Zustaenden gleich, damit ein Zustandswechsel kein Layout
 * verschiebt - es wechseln nur Farbe und Text. */
.chan-dot {
  width: .625rem; height: .625rem;
  border-radius: 9999px;
  background-color: var(--fallback-bc, oklch(var(--bc) / .25));
}
.chan-ok .chan-dot      { background-color: var(--fallback-su, oklch(var(--su))); }
.chan-stale .chan-dot   { background-color: var(--fallback-wa, oklch(var(--wa))); }
.chan-down .chan-dot    { background-color: var(--fallback-er, oklch(var(--er))); }
.chan-unknown .chan-dot { background-color: var(--fallback-bc, oklch(var(--bc) / .25)); }

/* Rahmen statt Flaeche: faellt auf, ohne die Uebersicht einzufaerben.
 * Der Schlagschatten aus .shadow-sm wird mitgefuehrt, sonst verliert die
 * Karte im Problemfall ihre Tiefe. */
.chan-card.chan-stale {
  box-shadow: inset 0 0 0 1px var(--fallback-wa, oklch(var(--wa) / .5)),
              0 1px 2px 0 rgb(0 0 0 / .05);
}
.chan-card.chan-down {
  box-shadow: inset 0 0 0 1px var(--fallback-er, oklch(var(--er) / .5)),
              0 1px 2px 0 rgb(0 0 0 / .05);
}
.chan-reason {
  background-color: var(--fallback-er, oklch(var(--er) / .1));
}

/* "Veraltet" pulsiert leise: es passiert gerade etwas (bzw. eben nicht),
 * das ist ein anderer Zustand als hart getrennt. */
@keyframes chan-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.chan-stale .chan-dot { animation: chan-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .chan-stale .chan-dot { animation: none; }
}

/* 'Das sollten Sie ansehen' ist die einzige Flaeche der Startseite, die
 * auffallen MUSS. Rahmen statt Flaeche: sichtbar, ohne die Seite
 * einzufaerben - und der Schlagschatten aus .shadow-sm bleibt erhalten. */
.home-alert {
  box-shadow: inset 0 0 0 1px var(--fallback-wa, oklch(var(--wa) / .45)),
              0 1px 2px 0 rgb(0 0 0 / .05);
}

/* ---------- Chats ---------- */
/* Ab lg zweispaltig: Personen links, Verlauf rechts. Auf dem Telefon
 * Drill-down - sobald ein Verlauf im Ziel steht, tritt die Liste zurueck.
 * Das macht :has() (Safari 16.4+). Wo :has() fehlt, stehen Liste und
 * Verlauf untereinander: schlichter, aber nie kaputt. */
/* minmax(0,1fr) statt der impliziten auto-Spur: eine auto-Spur waechst mit
 * ihrem Inhalt, und Grid-Items haben min-width:auto - beides zusammen
 * laesst eine lange, umbruchlose Vorschau die ganze Seite breitziehen.
 * Das min-w-0 an den Text-spans allein reicht dafuer nicht, die Kette
 * muss bis zur Spur durchgaengig schrumpfbar sein. */
.chatwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.chatwrap > * { min-width: 0; }
@media (min-width: 1024px) {
  .chatwrap { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; }
  .chat-scroll { max-height: 68vh; overflow-y: auto; }
}
#chatthread:empty { display: none; }

/* Der Verlauf-Skeleton liegt absolut ueber der Spalte und nimmt im
 * Ruhezustand keinen Platz - sonst gaebe es einen Layout-Sprung. Genau
 * deshalb ist er aber unsichtbar, solange die Spalte noch leer ist (erstes
 * Oeffnen auf dem Telefon): kein Inhalt, keine Hoehe, nichts zu sehen.
 * Waehrend der Anfrage bekommt die Spalte darum eine Mindesthoehe. */
.chatwrap section:has(#chatskel.htmx-request) { min-height: 11rem; }
@media (max-width: 1023px) {
  .chatwrap:has(#chatthread:not(:empty)) #chatlist { display: none; }
}

/* Gespraechspartner-Zeile: ganze Zeile ist Ziel, >= 48px hoch. */
.chat-person {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; min-width: 0; min-height: 56px;
  padding: .625rem .75rem;
  border-radius: .625rem;
  text-align: left;
  transition: background-color .15s ease-out;
}
.chat-person:hover { background-color: var(--fallback-b2, oklch(var(--b2))); }
.chat-person:active { background-color: var(--fallback-b3, oklch(var(--b3))); }
.chat-person[aria-current="true"] { background-color: var(--fallback-b2, oklch(var(--b2))); }

/* Sprechblasen duerfen nicht die ganze Breite fressen. Die Freigabe-
 * Nachricht enthaelt eine ~120 Zeichen lange URL ohne Leerzeichen: ohne
 * Umbruchpunkt sprengt sie trotz max-width die Box. overflow-wrap:anywhere
 * (nicht break-word) senkt auch die min-content-Breite - noetig, weil die
 * Blase ein Grid-Item ist und sonst nie unter ihre Inhaltsbreite geht. */
.chat .chat-bubble {
  max-width: 42ch;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* DaisyUI faerbt die Standard-Blase mit --n. In diesem Theme ist --n fast
 * schwarz - eingehende Nachrichten saehen aus wie Balken. Eingehend wird
 * deshalb hellgrau (wie am Telefon), ausgehend bleibt die Variante
 * (chat-bubble-primary). Das :not() haelt die Varianten unangetastet und
 * liegt in der Spezifitaet ueber ihnen nicht - es trifft sie gar nicht. */
.chat-bubble:not([class*="chat-bubble-"]) {
  background-color: var(--fallback-b3, oklch(var(--b3)));
  color: var(--fallback-bc, oklch(var(--bc)));
}

/* Kalenderzelle: feste Hoehe, damit der Monatswechsel nicht springt. */
.cal-day { min-height: 4.5rem; }
@media (min-width: 640px) { .cal-day { min-height: 6rem; } }

/* ---------- 3. Utilities (Tailwind-Namen, handgerollt) ---------- */

.block{display:block}.inline-block{display:inline-block}.inline{display:inline}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}
.hidden{display:none}.contents{display:contents}

.flex-col{flex-direction:column}.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}
.grow{flex-grow:1}.shrink-0{flex-shrink:0}

.items-center{align-items:center}.items-start{align-items:flex-start}
.items-end{align-items:flex-end}.items-baseline{align-items:baseline}
.items-stretch{align-items:stretch}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}
.justify-around{justify-content:space-around}
.self-center{align-self:center}.self-start{align-self:flex-start}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}

.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}

.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}
.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.gap-x-2{column-gap:.5rem}.gap-x-3{column-gap:.75rem}.gap-y-1{row-gap:.25rem}

.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}
.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}
.my-2{margin-top:.5rem;margin-bottom:.5rem}
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
.ms-1{margin-inline-start:.25rem}.ms-2{margin-inline-start:.5rem}
.ms-auto{margin-inline-start:auto}
.-ms-2{margin-inline-start:-.5rem}

.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}
.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}
.pr-8{padding-right:2rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}
.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-16{padding-bottom:4rem}
.pb-24{padding-bottom:6rem}

.w-full{width:100%}.w-auto{width:auto}.w-10{width:2.5rem}.w-16{width:4rem}
.w-20{width:5rem}.w-24{width:6rem}.w-40{width:10rem}.w-48{width:12rem}.w-52{width:13rem}.w-56{width:14rem}
.h-full{height:100%}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-10{height:2.5rem}
.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}
.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}
.min-w-0{min-width:0}.min-h-screen{min-height:100vh}

.text-\[10px\]{font-size:10px;line-height:1.2}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}

.font-normal{font-weight:400}.font-medium{font-weight:500}
.font-semibold{font-weight:600}.font-bold{font-weight:700}
.tracking-tight{letter-spacing:-.015em}.tracking-wide{letter-spacing:.04em}
.leading-tight{line-height:1.2}.leading-none{line-height:1}
.uppercase{text-transform:uppercase}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.align-middle{vertical-align:middle}
.break-all{word-break:break-all}.break-words{overflow-wrap:break-word}
.line-through{text-decoration-line:line-through}

.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}
.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-100{opacity:1}

.text-primary{color:var(--fallback-p,oklch(var(--p)))}
.text-success{color:var(--fallback-su,oklch(var(--su)))}
.text-warning{color:var(--fallback-wa,oklch(var(--wa)))}
.text-error{color:var(--fallback-er,oklch(var(--er)))}
.text-base-content{color:var(--fallback-bc,oklch(var(--bc)))}
.bg-base-100{background-color:var(--fallback-b1,oklch(var(--b1)))}
.bg-base-200{background-color:var(--fallback-b2,oklch(var(--b2)))}
.bg-base-300{background-color:var(--fallback-b3,oklch(var(--b3)))}
.bg-primary{background-color:var(--fallback-p,oklch(var(--p)))}
.text-primary-content{color:var(--fallback-pc,oklch(var(--pc)))}
.bg-transparent{background-color:transparent}

.border{border-width:1px;border-style:solid}
.border-0{border-width:0}
.border-2{border-width:2px;border-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-l{border-left-width:1px;border-left-style:solid}
.border-base-200{border-color:var(--fallback-b2,oklch(var(--b2)))}
.border-base-300{border-color:var(--fallback-b3,oklch(var(--b3)))}
.border-primary{border-color:var(--fallback-p,oklch(var(--p)))}
.border-transparent{border-color:transparent}

.rounded{border-radius:.375rem}.rounded-md{border-radius:.5rem}
.rounded-lg{border-radius:.625rem}.rounded-xl{border-radius:.875rem}
.rounded-2xl{border-radius:1.125rem}.rounded-full{border-radius:9999px}

.shadow-none{box-shadow:none}
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / .08),0 2px 4px -2px rgb(0 0 0 / .06)}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .08)}

.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}
.relative{position:relative}.absolute{position:absolute}
.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.inset-x-0{left:0;right:0}
.top-0{top:0}.bottom-0{bottom:0}.right-0{right:0}.left-0{left:0}
.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}

.cursor-pointer{cursor:pointer}.select-none{user-select:none}
.pointer-events-none{pointer-events:none}
.list-none{list-style:none}
.transition{transition:color .15s,background-color .15s,border-color .15s,opacity .15s,box-shadow .15s,transform .15s}

/* Vertikale Abstaende in Listen ohne Margin-Gefummel am Kind. */
.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}

/* ---------- 4. Responsive Varianten ---------- */

@media (min-width: 640px) {
  .sm\:block{display:block}.sm\:inline{display:inline}.sm\:flex{display:flex}
  .sm\:hidden{display:none}.sm\:grid{display:grid}
  .sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:gap-2{gap:.5rem}
}

@media (min-width: 1024px) {
  .lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}
  .lg\:pb-6{padding-bottom:1.5rem}
}