/* ===========================================================================
   StudyFlow — Apple-design widget & material layer
   Loaded LAST. Rounds the chrome, elevates stat/feature cards into
   home-screen-style "widgets", and applies Apple's material + motion craft:
   translucent depth, interruptible springs, press-on-pointer-down feedback,
   size-specific tracking, and graceful reduced-transparency / contrast.

   Apple principles applied (see apple-design skill):
     - Materials & depth: translucent panes, heavier blur on bigger surfaces,
       an inner light-catching edge (inset highlight) on widget chrome.
     - Response: feedback fires on pointer-down (:active), instantly.
     - Behavior over animation: settle is critically-damped & interruptible
       (transform/opacity/box-shadow only — never layout or backdrop-filter).
     - Typography: negative tracking up top, positive tracking on tiny labels.
     - Materials materialize (blur+scale together), not a bare opacity fade.
     - Reduced motion -> cross-fade collapse;
       reduced transparency -> frostier/solid glass;
       high contrast -> defined borders.

   IMPORTANT (layered-cascade contract): this design is built as ordered,
   progressive enhancement. Source of truth for overrides is LOAD ORDER:
   styles.css -> theme-refresh.css -> redesign.css -> glass-morphism.css ->
   liquid-ui.css -> apple-widgets.css (last wins). Keep that order. Later
   layers deliberately use !important where they must beat earlier layers;
   do not reorder the <link> tags without re-testing every surface.

   Note for auditors: `.panel` is a real widget surface, rendered dynamically
   from app.js (e.g. `class="panel"`, `class="panel gemini-panel"`), so it is
   NOT dead even though it never appears verbatim in index.html's static markup.
   =========================================================================== */

/* --- Widget radii & material tokens --- */
:root {
  --radius-widget: 26px;   /* oversized, soft widget corner */
  --radius-widget-sm: 18px;
  --widget-pad: 22px 24px; /* generous rounded breathing room */
  --widget-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --widget-shadow:
    var(--widget-highlight),
    0 2px 4px rgba(22, 26, 43, 0.05),
    0 12px 32px rgba(53, 67, 168, 0.10);
  --ease-apple: cubic-bezier(0.33, 1, 0.68, 1); /* smooth settle, no overshoot */
}
[data-theme="dark"] {
  --widget-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --widget-shadow:
    var(--widget-highlight),
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.42);
}

/* ===========================================================================
   1. Widget cards — rounded, generous, materially elevated
   =========================================================================== */
.metrics article,
.ring-card,
.history-card,
.chart-card,
.streak-card,
.plan article,
.weekly-review,
.calendar,
.panel {
  border-radius: var(--radius-widget) !important;
  padding: var(--widget-pad) !important;
  box-shadow: var(--widget-shadow) !important;
}

/* Feature chips become widget-like rounded tiles */
.features button {
  border-radius: var(--radius-widget-sm) !important;
  padding: 18px 20px !important;
}

/* Inner content stays legible against the glass: put strength on the text */
.metrics strong {
  letter-spacing: -0.04em;              /* tighten display numerals */
  font-optical-sizing: auto;
}
.ring-card > small,
.history-card > small,
.chart-card > small,
.streak-card > small,
.calendar .section-label,
.section-label {
  letter-spacing: 0.09em !important;    /* positive tracking on tiny labels */
  font-weight: 650 !important;
}

/* A subtle "widget" grabber affordance on the primary stat strip */
.metrics article {
  position: relative;
}
.metrics article::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 34px;
  height: 4px;
  border-radius: 99px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  pointer-events: none;
}

/* ===========================================================================
   2. Apple material depth on hover — heavier lift for bigger surfaces
   =========================================================================== */
.metrics article:hover,
.ring-card:hover,
.history-card:hover,
.chart-card:hover,
.streak-card:hover,
.plan article:hover,
.weekly-review:hover {
  box-shadow:
    var(--widget-highlight),
    0 6px 12px rgba(22, 26, 43, 0.08),
    0 24px 52px rgba(53, 67, 168, 0.18) !important;
  transform: translateY(-3px);
}
[data-theme="dark"] .metrics article:hover,
[data-theme="dark"] .ring-card:hover,
[data-theme="dark"] .history-card:hover,
[data-theme="dark"] .chart-card:hover,
[data-theme="dark"] .streak-card:hover,
[data-theme="dark"] .plan article:hover,
[data-theme="dark"] .weekly-review:hover {
  box-shadow:
    var(--widget-highlight),
    0 8px 16px rgba(0, 0, 0, 0.45),
    0 26px 56px rgba(0, 0, 0, 0.5) !important;
}

/* Icon tiles inside feature chips — soft rounded-square like iOS widgets */
.features button > i {
  border-radius: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 4px 12px rgba(74, 91, 212, 0.16) !important;
}

/* ===========================================================================
   3. Press feedback fires on pointer-down — instantly
   =========================================================================== */
.primary:active,
.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,
.event-row button:active,
.topnav button:active,
.side nav button:active,
.metrics article:active,
.ring-card:active,
.history-card:active,
.chart-card:active,
.streak-card:active {
  transform: translateY(0) scale(0.97);
  transition: transform 110ms var(--ease-press),
              box-shadow 110ms var(--ease-press) !important;
}

/* ===========================================================================
   4. Materials materialize — blur + scale arrive together
   =========================================================================== */
dialog[open],
.modal.open,
[class$="-modal"].open,
.sheet.open {
  transform: translateY(0) scale(1);
}
@starting-style {
  dialog[open],
  .modal.open,
  [class$="-modal"].open,
  .sheet.open {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
}

/* ===========================================================================
   5. Translucency & contrast accessibility
   =========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .topnav,
  .side,
  .metrics article,
  .ring-card,
  .history-card,
  .chart-card,
  .streak-card,
  .plan article,
  .weekly-review,
  .panel,
  .calendar,
  .recommend,
  .study-subjects article,
  dialog,
  .modal,
  [class$="-modal"] {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--shadow-paper) !important;
  }
}
@media (prefers-contrast: more) {
  .metrics article,
  .ring-card,
  .history-card,
  .chart-card,
  .streak-card,
  .plan article,
  .weekly-review,
  .panel,
  .calendar,
  .features button {
    border: 1.5px solid var(--line) !important;
    box-shadow: none !important;
  }
  .section-label,
  .metrics article > small,
  .ring-card > small,
  .history-card > small,
  .chart-card > small,
  .streak-card > small {
    color: var(--ink-soft) !important;
  }
}

/* ===========================================================================
   Reduced motion — collapse to a gentle cross-fade
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .metrics article,
  .ring-card,
  .history-card,
  .chart-card,
  .streak-card,
  .plan article,
  .weekly-review,
  .panel,
  .calendar {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }
  .metrics article:hover,
  .ring-card:hover,
  .history-card:hover,
  .chart-card:hover,
  .streak-card:hover,
  .plan article:hover,
  .weekly-review:hover {
    transform: none !important;
  }
}