/* ===========================================================================
   StudyFlow — Liquid UI layer
   Loaded LAST. Refines padding/spacing and swaps the default 0.15–0.25s
   fades for fluid, springy motion. Keeps the Midnight Aurora glass system.

   Motion principles (typeui fundamentals):
     - Easing over speed: curves carry weight; duration stays short (160–360ms)
       so motion feels responsive, never sluggish.
     - Learnable properties only: transform / opacity / background / box-shadow /
       border-color / color. We never transition backdrop-filter or layout
       (overflow, width, top) to avoid jank and layout thrash.
     - Direction: hover is a gentle rise, active is a press, sheets/dialogs
       spring in with a soft overshoot.
     - Reduced motion: all motion collapses to a single frame.
   =========================================================================== */

/* --- Fluid easing tokens --- */
:root {
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);   /* smooth rise / settle */
  --ease-pop:   cubic-bezier(0.34, 1.56, 0.64, 1); /* small spring overshoot */
  --ease-press: cubic-bezier(0.4, 0, 0.2, 1);      /* quick, grounded */
}

/* ===========================================================================
   Spacing & padding refinements
   =========================================================================== */

/* Cards & content surfaces — a touch more breathing room */
.metrics article,
.card,
.ring-card,
.history-card,
.chart-card,
.streak-card,
.weekly-review,
.plan article,
.study-subjects article,
.attention,
.recommend,
.study-intro,
.panel,
.calendar,
.gemini-ask {
  padding: 20px 22px !important;
}

/* Today hero — more generous editorial whitespace */
.hero {
  padding: 34px 36px !important;
}

/* Buttons — tactile, comfortable hit area */
.actions button,
.toolbar > button,
.toolbar > div button,
.section-head button,
.page-head > button,
.recommend button,
.types button,
.features button,
.gemini-ask-row button,
.primary {
  padding-inline: 16px !important;
  padding-block: 9px !important;
}

/* Side nav items — taller, roomier rows */
.side nav button {
  padding-block: 10px !important;
  margin-block: 3px !important;
}

/* Form controls — slightly taller, calmer */
input,
select,
textarea {
  padding-block: 10px !important;
  padding-inline: 13px !important;
}

/* ===========================================================================
   Liquid transitions — unified fluid movement across interactive elements
   =========================================================================== */

/* Base interactive chrome: everything animates on the same rhythm */
.actions button,
.toolbar > button,
.toolbar > div button,
.dialog-head > button,
.page-head > button,
.section-head button,
.recommend button,
.ring-card > button,
.types button,
.features button,
.connection-actions button,
.gemini-ask-row button,
.settings-form button,
.recommend-actions button,
.primary,
.side nav button,
.side-bottom > button,
.event-row button,
.topnav button,
input,
select,
textarea,
.tabs button {
  transition:
    transform 0.32s var(--ease-fluid),
    box-shadow 0.32s var(--ease-fluid),
    border-color 0.28s var(--ease-fluid),
    background-color 0.28s var(--ease-fluid),
    color 0.28s var(--ease-fluid),
    opacity 0.28s var(--ease-fluid) !important;
  will-change: transform;
}

/* Cards & surfaces: rise + shadow settle */
.metrics article,
.card,
.ring-card,
.history-card,
.chart-card,
.streak-card,
.weekly-review,
.plan article,
.study-subjects article,
.attention,
.recommend,
.study-intro,
.panel,
.calendar,
.gemini-dock,
.install-card,
.account-summary {
  transition:
    transform 0.4s var(--ease-fluid),
    box-shadow 0.4s var(--ease-fluid),
    border-color 0.3s var(--ease-fluid),
    background-color 0.3s var(--ease-fluid) !important;
  will-change: transform;
}

/* Hover: a gentle rise with a whisper of overshoot */
.actions button:hover,
.toolbar > button:hover,
.toolbar > div button:hover,
.section-head button:hover,
.page-head > button:hover,
.recommend button:hover,
.ring-card > button:hover,
.types button:hover,
.features button:hover,
.primary:hover,
.event-row button:hover,
.topnav button:hover {
  transform: translateY(-2px) scale(1.02);
  transition:
    transform 0.36s var(--ease-pop),
    box-shadow 0.4s var(--ease-fluid),
    border-color 0.28s var(--ease-fluid),
    background-color 0.28s var(--ease-fluid) !important;
}

.metrics article:hover,
.card:hover,
.ring-card:hover,
.history-card:hover,
.chart-card:hover,
.streak-card:hover,
.recommend:hover {
  transform: translateY(-4px);
  transition:
    transform 0.4s var(--ease-pop),
    box-shadow 0.45s var(--ease-fluid),
    border-color 0.3s var(--ease-fluid) !important;
}

/* Active: press down firmly */
.actions button:active,
.toolbar > button:active,
.toolbar > div button:active,
.section-head button:active,
.page-head > button:active,
.recommend button:active,
.types button:active,
.features button:active,
.primary:active,
.side nav button:active,
.event-row button:active,
.topnav button:active {
  transform: translateY(0) scale(0.97);
  transition:
    transform 0.18s var(--ease-press),
    box-shadow 0.18s var(--ease-press) !important;
}

/* Icon micro-nudge inside interactive rows */
.side nav button .uic,
.recommend .uic,
.features button > i,
.event-row button .event-marker,
.actions button .uic {
  transition: transform 0.32s var(--ease-pop) !important;
}
.side nav button:hover .uic,
.recommend:hover .uic,
.features button:hover > i,
.event-row button:hover .event-marker {
  transform: scale(1.12) translateX(1px);
}
.side nav button.active .uic {
  transform: scale(1.1);
}

/* Side rail active pill — liquid slide feel */
.side nav button {
  position: relative;
}
.side nav button.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 60%;
  border-radius: 99px;
  background: var(--accent-ink);
  transform: translateY(-50%);
  opacity: 0.9;
  transition: transform 0.32s var(--ease-pop), opacity 0.28s var(--ease-fluid) !important;
}

/* Primary buttons get a soft ambient glow following the cursor region */
.primary:hover {
  box-shadow: 0 8px 26px rgba(74, 91, 212, 0.4),
              0 1px 0 rgba(255,255,255,0.5) inset;
}
[data-theme="dark"] .primary:hover {
  box-shadow: 0 10px 30px rgba(124, 140, 255, 0.35),
              0 1px 0 rgba(255,255,255,0.08) inset;
}

/* Smooth theme + glass panes cross-fade (static blur is left untouched) */
body,
.topbar,
.topnav,
.side,
.metric-card,
.panel,
.calendar,
.recommend,
.study-subjects article,
.gemini-dock,
.install-card,
.account-summary {
  transition:
    background-color 0.45s var(--ease-fluid),
    border-color 0.4s var(--ease-fluid),
    color 0.4s var(--ease-fluid) !important;
}

/* ===========================================================================
   Sheets, dialogs & page transitions — glassy spring-in
   =========================================================================== */
dialog,
.modal,
[class$="-modal"],
.sheet {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    opacity 0.32s var(--ease-fluid),
    transform 0.42s var(--ease-pop) !important;
}
dialog[open],
.modal.open,
[class$="-modal"].open,
.sheet.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Gemini dock — rises cleanly into place */
.gemini-dock,
.gemini-dock.gemini-visible {
  transition:
    transform 0.44s var(--ease-pop),
    opacity 0.3s var(--ease-fluid),
    box-shadow 0.4s var(--ease-fluid) !important;
}

/* ===========================================================================
   Reduced motion — collapse all motion to a single frame
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  dialog,
  .modal,
  [class$="-modal"],
  .sheet {
    opacity: 1;
    transform: none;
  }
}