import { StyleSheet } from "react-native";
import {
  type ThemeColors,
  fontSize,
  fontWeight,
  radius,
  withOpacity,
} from "@/styles/theme";

export const makeStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    /* ── Root ── */
    container: { flex: 1, backgroundColor: colors.background },
    loadingWrap: { flex: 1, alignItems: "center", justifyContent: "center" },
    scrollContent: { paddingHorizontal: 16, paddingTop: 8, paddingBottom: 40 },

    /* ── Header ── */
    header: {
      alignItems: "center",
      justifyContent: "center",
      paddingHorizontal: 12,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: colors.border,
    },
    headerInner: {
      width: "100%",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      paddingVertical: 10,
    },
    backBtn: {
      width: 36,
      height: 36,
      borderRadius: radius.full,
      alignItems: "center",
      justifyContent: "center",
    },
    headerTitle: {
      fontSize: fontSize.lg,
      fontWeight: fontWeight.semibold,
      color: colors.foreground,
    },

    /* ── Dimension tabs ── */
    dimTabsSticky: {
      backgroundColor: colors.background,
      paddingBottom: 12,
    },
    dimTabs: {
      flexDirection: "row",
      borderRadius: radius.lg,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.5),
      backgroundColor: withOpacity(colors.muted, 0.3),
      padding: 2,
    },
    dimTab: {
      flex: 1,
      paddingVertical: 7,
      borderRadius: radius.md,
      alignItems: "center",
    },
    dimTabActive: {
      backgroundColor: colors.background,
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.04,
      shadowRadius: 1,
      elevation: 1,
    },
    dimTabText: {
      fontSize: 13,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.6),
    },
    dimTabTextActive: { color: colors.foreground },

    /* ── Hero section ── */
    heroCard: {
      backgroundColor: colors.card,
      borderRadius: radius.xxl,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.4),
      padding: 20,
      marginBottom: 16,
    },
    heroPeriodRow: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      marginBottom: 20,
    },
    heroLifetimeHeader: {
      gap: 8,
      marginBottom: 14,
    },
    heroDimLabel: {
      fontSize: 10,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.primary, 0.5),
      textTransform: "uppercase",
      letterSpacing: 1.5,
    },
    heroLifetimeTitle: {
      fontSize: 24,
      lineHeight: 32,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.88),
      letterSpacing: -0.8,
    },
    heroPeriodLabel: {
      fontSize: 15,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.foreground, 0.85),
      marginTop: 2,
    },
    heroNavRow: {
      flexDirection: "row",
      alignItems: "center",
      gap: 2,
    },
    heroNavBtn: {
      width: 30,
      height: 30,
      borderRadius: radius.md,
      alignItems: "center",
      justifyContent: "center",
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.3),
      backgroundColor: withOpacity(colors.background, 0.5),
    },
    heroValue: {
      fontSize: 48,
      fontWeight: fontWeight.bold,
      color: colors.foreground,
      letterSpacing: -2,
      lineHeight: 52,
    },
    heroSubRow: {
      flexDirection: "row",
      alignItems: "center",
      gap: 6,
      marginTop: 6,
    },
    heroSubText: {
      fontSize: 13,
      color: withOpacity(colors.mutedForeground, 0.55),
    },
    heroNarrative: {
      fontSize: 13,
      color: withOpacity(colors.mutedForeground, 0.62),
      lineHeight: 20,
      marginTop: 8,
    },

    /* ── Metrics grid (2x3 or 3x2) ── */
    metricsGrid: {
      flexDirection: "row",
      flexWrap: "wrap",
      marginTop: 20,
      marginHorizontal: -4,
    },
    metricTile: {
      backgroundColor: withOpacity(colors.muted, 0.12),
      borderRadius: radius.lg,
      paddingHorizontal: 10,
      paddingVertical: 10,
    },
    metricTileHalf: {
      width: "48.8%",
    },
    metricLabel: {
      fontSize: 9,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.6),
      textTransform: "uppercase",
      letterSpacing: 1,
    },
    metricValue: {
      fontSize: 18,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.85),
      marginTop: 4,
    },
    metricSub: {
      fontSize: 10,
      color: withOpacity(colors.mutedForeground, 0.55),
      marginTop: 1,
    },

    /* ── Compact stat card ── */
    statCard: {
      backgroundColor: colors.card,
      borderRadius: radius.xl,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.28),
      paddingHorizontal: 14,
      paddingVertical: 12,
      gap: 8,
    },
    statCardHeader: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 8,
    },
    statCardTitle: {
      fontSize: 11,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.66),
    },
    statCardBody: {
      flexDirection: "row",
      alignItems: "baseline",
      gap: 4,
    },
    statCardValue: {
      fontSize: 28,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.9),
      letterSpacing: -0.8,
    },
    statCardUnit: {
      fontSize: 13,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.64),
    },

    /* ── Section cards ── */
    sectionCard: {
      backgroundColor: colors.card,
      borderRadius: radius.xxl,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.3),
      padding: 16,
      marginBottom: 12,
    },
    sectionFeatured: {
      borderColor: withOpacity(colors.primary, 0.1),
    },
    sectionTitle: {
      fontSize: 15,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.foreground, 0.9),
    },
    sectionDesc: {
      fontSize: 13,
      color: withOpacity(colors.mutedForeground, 0.5),
      lineHeight: 18,
      marginTop: 2,
    },
    sectionHeader: { marginBottom: 14 },
    sectionGrid: {
      flexDirection: "row",
      flexWrap: "wrap",
      gap: 12,
      marginBottom: 12,
    },

    /* ── Chart toggle ── */
    toggleRow: {
      flexDirection: "row",
      borderRadius: radius.md,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.5),
      backgroundColor: withOpacity(colors.muted, 0.3),
      padding: 2,
    },
    toggleBtn: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: radius.sm },
    toggleBtnActive: { backgroundColor: colors.background },
    toggleBtnText: { fontSize: 12, fontWeight: fontWeight.medium, color: colors.mutedForeground },
    toggleBtnTextActive: { color: colors.foreground },

    /* ── Period nav ── */
    periodNav: { flexDirection: "row", alignItems: "center", gap: 2 },
    periodNavBtn: { padding: 4, borderRadius: radius.sm },
    periodLabel: {
      fontSize: 12,
      fontWeight: fontWeight.medium,
      color: colors.mutedForeground,
      minWidth: 80,
      textAlign: "center",
    },
    barControlsRow: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      marginBottom: 12,
    },

    /* ── Heatmap ── */
    heatmapLegend: {
      flexDirection: "row",
      alignItems: "center",
      gap: 4,
      marginTop: 0,
    },
    legendText: { fontSize: 9, color: colors.mutedForeground },
    legendCell: { width: 10, height: 10, borderRadius: 2 },

    /* ── Bar chart ── */
    barChartWrap: { height: 180 },
    barChartContent: { flexDirection: "row", alignItems: "flex-end", justifyContent: "space-between", gap: 6, paddingBottom: 4 },
    barCol: { alignItems: "center", justifyContent: "flex-end", width: 28 },
    barTrack: { justifyContent: "flex-end", alignItems: "center" },
    barFill: { borderRadius: 4 },
    barLabel: { fontSize: 8, color: colors.mutedForeground, marginTop: 4 },
    barChartEmpty: { height: 120, alignItems: "center", justifyContent: "center" },
    barChartEmptyText: { fontSize: fontSize.xs, color: colors.mutedForeground },
    singlePointCard: {
      borderRadius: radius.xl,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.24),
      backgroundColor: withOpacity(colors.muted, 0.08),
      paddingHorizontal: 14,
      paddingVertical: 14,
      gap: 6,
      minHeight: 142,
      justifyContent: "center",
    },
    singlePointEyebrow: {
      fontSize: 10,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.primary, 0.52),
      textTransform: "uppercase",
      letterSpacing: 1.2,
    },
    singlePointValue: {
      fontSize: 40,
      lineHeight: 44,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.92),
      letterSpacing: -1.2,
    },
    singlePointLabel: {
      fontSize: 13,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.foreground, 0.72),
    },
    singlePointDesc: {
      fontSize: 12,
      lineHeight: 18,
      color: withOpacity(colors.mutedForeground, 0.58),
      marginTop: 2,
    },
    tooltip: {
      position: "absolute",
      backgroundColor: colors.card,
      paddingHorizontal: 6,
      paddingVertical: 2,
      borderRadius: 4,
      borderWidth: 0.5,
      borderColor: colors.border,
    },
    tooltipText: { fontSize: 9, color: colors.cardForeground, fontWeight: "500" },

    /* ── Top books ── */
    bookItem: {
      flexDirection: "row",
      alignItems: "flex-start",
      gap: 12,
      paddingVertical: 10,
      paddingHorizontal: 8,
      borderRadius: radius.lg,
    },
    bookItemFirst: {
      backgroundColor: withOpacity(colors.primary, 0.03),
    },
    bookRank: {
      width: 22,
      height: 22,
      borderRadius: radius.sm,
      alignItems: "center",
      justifyContent: "center",
      marginTop: 2,
    },
    bookRankFirst: { backgroundColor: withOpacity(colors.primary, 0.08) },
    bookRankDefault: { backgroundColor: withOpacity(colors.muted, 0.25) },
    bookRankText: { fontSize: 11, fontWeight: fontWeight.bold },
    bookRankTextFirst: { color: withOpacity(colors.primary, 0.6) },
    bookRankTextDefault: { color: withOpacity(colors.mutedForeground, 0.5) },
    periodBooksEmpty: {
      fontSize: 13,
      color: withOpacity(colors.mutedForeground, 0.58),
      textAlign: "center",
      paddingVertical: 12,
    },
    bookRow: {
      flexDirection: "row",
      alignItems: "center",
      gap: 10,
      borderRadius: radius.lg,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.22),
      backgroundColor: withOpacity(colors.muted, 0.08),
      paddingHorizontal: 10,
      paddingVertical: 10,
    },
    bookCover: {
      width: 38,
      height: 54,
      borderRadius: 10,
      backgroundColor: withOpacity(colors.muted, 0.26),
    },
    bookCoverPlaceholder: {
      width: 38,
      height: 54,
      borderRadius: 10,
      alignItems: "center",
      justifyContent: "center",
      backgroundColor: withOpacity(colors.muted, 0.28),
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.28),
    },
    bookCoverLetter: {
      fontSize: 14,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.62),
    },
    bookInfo: { flex: 1, paddingTop: 1 },
    bookTitleRow: {
      flexDirection: "row",
      alignItems: "baseline",
      justifyContent: "space-between",
      gap: 8,
    },
    bookLeadBadge: {
      fontSize: 9,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.primary, 0.4),
      textTransform: "uppercase",
      letterSpacing: 1,
      marginBottom: 2,
    },
    bookTitle: { fontSize: 13, fontWeight: fontWeight.semibold, color: withOpacity(colors.foreground, 0.8) },
    bookTitleFirst: { fontSize: 14 },
    bookAuthor: { fontSize: 11, color: withOpacity(colors.mutedForeground, 0.58), marginTop: 2 },
    bookStatsRow: { flexDirection: "row", alignItems: "baseline", gap: 6, marginTop: 6 },
    bookTime: { fontWeight: fontWeight.bold, color: withOpacity(colors.foreground, 0.75) },
    bookTimeFirst: { fontSize: 18 },
    bookTimeDefault: { fontSize: 14 },
    bookMeta: { fontSize: 10, color: withOpacity(colors.mutedForeground, 0.52) },
    progressRow: {
      flexDirection: "row",
      alignItems: "center",
      gap: 8,
      marginTop: 8,
    },
    progressTrack: {
      flex: 1,
      height: 4,
      borderRadius: radius.full,
      backgroundColor: withOpacity(colors.border, 0.35),
      overflow: "hidden",
    },
    progressFill: {
      height: "100%",
      borderRadius: radius.full,
      backgroundColor: withOpacity(colors.primary, 0.78),
    },
    progressPercent: {
      minWidth: 34,
      fontSize: 10,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.mutedForeground, 0.64),
      textAlign: "right",
    },
    expandBtn: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      gap: 4,
      paddingVertical: 8,
      borderRadius: radius.md,
      marginTop: 4,
    },
    expandBtnText: { fontSize: 12, fontWeight: fontWeight.medium, color: withOpacity(colors.mutedForeground, 0.64) },

    /* ── Insights ── */
    insightItem: {
      flexDirection: "row",
      alignItems: "flex-start",
      gap: 10,
      paddingVertical: 10,
      paddingHorizontal: 10,
      borderRadius: radius.lg,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.2),
      marginBottom: 6,
    },
    insightDot: { width: 7, height: 7, borderRadius: 4, marginTop: 5 },
    insightDotCelebration: { backgroundColor: withOpacity(colors.primary, 0.6) },
    insightDotWarning: { backgroundColor: withOpacity(colors.destructive, 0.45) },
    insightDotPositive: { backgroundColor: withOpacity(colors.primary, 0.45) },
    insightDotDefault: { backgroundColor: withOpacity(colors.border, 0.6) },
    insightTitle: { fontSize: 13, fontWeight: fontWeight.semibold, color: withOpacity(colors.foreground, 0.75) },
    insightBody: { fontSize: 13, color: withOpacity(colors.mutedForeground, 0.62), lineHeight: 18, marginTop: 2 },

    /* ── Streak ── */
    streakCard: {
      flexDirection: "row",
      alignItems: "center",
      gap: 10,
      backgroundColor: colors.card,
      borderRadius: radius.xxl,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.3),
      padding: 14,
      marginBottom: 12,
    },
    streakIconWrap: {
      width: 32,
      height: 32,
      borderRadius: radius.lg,
      backgroundColor: withOpacity(colors.amber, 0.1),
      alignItems: "center",
      justifyContent: "center",
    },
    streakInfo: { gap: 2, flex: 1 },
    streakLabel: { fontSize: fontSize.xs, fontWeight: fontWeight.semibold, color: colors.foreground },
    streakDesc: { fontSize: 12, color: colors.mutedForeground },

    /* ── Empty state ── */
    emptyWrap: { alignItems: "center", justifyContent: "center", paddingVertical: 40 },
    emptyIcon: {
      width: 52,
      height: 52,
      borderRadius: radius.xxl,
      backgroundColor: withOpacity(colors.muted, 0.2),
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: withOpacity(colors.border, 0.3),
      alignItems: "center",
      justifyContent: "center",
      marginBottom: 12,
    },
    emptyTitle: { fontSize: 16, fontWeight: fontWeight.semibold, color: withOpacity(colors.foreground, 0.75) },
    emptyDesc: { fontSize: 13, color: withOpacity(colors.mutedForeground, 0.5), textAlign: "center", marginTop: 4, maxWidth: 240, lineHeight: 18 },

    /* ── Day summary ── */
    daySummaryPanel: {
      gap: 14,
    },
    daySummaryHeroRow: {
      flexDirection: "row",
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: withOpacity(colors.border, 0.28),
      paddingBottom: 14,
    },
    daySummaryHeroBlock: {
      flex: 1,
      paddingHorizontal: 4,
    },
    daySummaryHeroBlockDivider: {
      borderRightWidth: StyleSheet.hairlineWidth,
      borderRightColor: withOpacity(colors.border, 0.24),
      paddingRight: 14,
      marginRight: 10,
    },
    daySummaryHeroLabel: {
      fontSize: 11,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.55),
      marginBottom: 8,
    },
    daySummaryHeroValue: {
      fontSize: 30,
      lineHeight: 32,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.9),
      letterSpacing: -0.8,
    },
    daySummaryMetaRow: {
      flexDirection: "row",
      gap: 10,
    },
    daySummaryMetaBlock: {
      flex: 1,
      paddingVertical: 2,
    },
    daySummaryMetaLabel: {
      fontSize: 11,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.55),
      marginBottom: 6,
    },
    daySummaryMetaValue: {
      fontSize: 30,
      lineHeight: 32,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.9),
      letterSpacing: -0.8,
    },
    daySummaryBookRow: {
      flexDirection: "row",
      alignItems: "flex-start",
      justifyContent: "space-between",
      gap: 12,
      paddingTop: 14,
      borderTopWidth: StyleSheet.hairlineWidth,
      borderTopColor: withOpacity(colors.border, 0.24),
    },
    daySummaryBookText: {
      flex: 1,
      gap: 4,
    },
    daySummaryBookLabel: {
      fontSize: 11,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.52),
    },
    daySummaryBookTitle: {
      fontSize: 17,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.foreground, 0.88),
      letterSpacing: -0.2,
      lineHeight: 23,
    },
    daySummaryBookValue: {
      fontSize: 16,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.primary, 0.72),
      paddingTop: 18,
      paddingBottom: 1,
    },

    /* ── Calendar ── */
    calendarRow: {
      flexDirection: "row",
      gap: 3,
    },
    calendarHeaderCell: {
      flex: 1,
      alignItems: "center",
      paddingVertical: 2,
    },
    calendarHeaderText: {
      fontSize: 10,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.52),
    },

    /* Calendar cell — WITH cover (cover fills cell) */
    calCoverCell: {
      flex: 1,
      aspectRatio: 28 / 41,
      borderRadius: radius.sm,
      overflow: "hidden",
      position: "relative",
      // Book shadow
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.15,
      shadowRadius: 4,
      elevation: 3,
    },
    calCoverCellToday: {
      borderWidth: 1.5,
      borderColor: withOpacity(colors.primary, 0.4),
    },
    calCoverImage: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      borderRadius: radius.sm,
    },
    calCoverFallback: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      overflow: "hidden",
      borderRadius: radius.sm,
    },
    calCoverFallbackTop: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      height: "50%",
      backgroundColor: colors.stone100,
    },
    calCoverFallbackBottom: {
      position: "absolute",
      bottom: 0,
      left: 0,
      right: 0,
      height: "50%",
      backgroundColor: colors.stone200,
    },
    calCoverFallbackOverlay: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      alignItems: "center",
      justifyContent: "center",
      paddingHorizontal: 4,
    },
    calCoverFallbackText: {
      fontSize: 8,
      fontWeight: fontWeight.medium,
      color: colors.stone400,
      textAlign: "center",
      lineHeight: 11,
      fontFamily: "serif",
    },
    calSpineOverlay: {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      width: "8%",
      flexDirection: "row",
      zIndex: 2,
    },
    calSpineEdgeRight: {
      position: "absolute",
      top: 0,
      right: 0,
      bottom: 0,
      width: "1.8%",
      backgroundColor: "rgba(30,30,30,0.12)",
      zIndex: 2,
    },
    calSpineTopHighlight: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      height: "3%",
      backgroundColor: "rgba(240,240,240,0.15)",
      zIndex: 3,
    },
    calSpineBottomShadow: {
      position: "absolute",
      bottom: 0,
      left: 0,
      right: 0,
      height: "8%",
      backgroundColor: "rgba(15,15,15,0.15)",
      zIndex: 3,
    },
    calCoverTopScrim: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      height: "44%",
      backgroundColor: "rgba(0,0,0,0.42)",
      zIndex: 3,
    },
    calCoverOverlay: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 4,
      justifyContent: "space-between",
      padding: 3,
    },
    calCoverTopRow: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "flex-start",
    },
    calCoverDay: {
      fontSize: 10,
      fontWeight: fontWeight.bold,
      color: "#fff",
      textShadowColor: "rgba(0,0,0,0.6)",
      textShadowOffset: { width: 0, height: 1 },
      textShadowRadius: 2,
    },
    calCoverTime: {
      fontSize: 7,
      fontWeight: fontWeight.bold,
      color: "rgba(255,255,255,0.85)",
      textShadowColor: "rgba(0,0,0,0.6)",
      textShadowOffset: { width: 0, height: 1 },
      textShadowRadius: 2,
    },
    calCoverPageBadge: {
      alignSelf: "flex-end",
      borderRadius: radius.full,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: "rgba(255,255,255,0.24)",
      backgroundColor: "rgba(0,0,0,0.28)",
      paddingHorizontal: 6,
      paddingVertical: 2,
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.16,
      shadowRadius: 4,
      elevation: 2,
    },
    calCoverPageText: {
      fontSize: 7,
      fontWeight: fontWeight.bold,
      color: "#fff",
      textShadowColor: "rgba(0,0,0,0.6)",
      textShadowOffset: { width: 0, height: 1 },
      textShadowRadius: 2,
      textAlign: "center",
    },

    /* Calendar cell — WITHOUT cover (plain intensity) */
    calPlainCell: {
      flex: 1,
      aspectRatio: 28 / 41,
      borderRadius: radius.sm,
      borderWidth: StyleSheet.hairlineWidth,
      padding: 3,
      alignItems: "center",
      gap: 2,
    },
    calPlainCellToday: {
      borderWidth: 1.5,
      borderColor: withOpacity(colors.primary, 0.25),
    },
    calPlainDay: {
      fontSize: 11,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.foreground, 0.75),
      marginTop: 2,
    },
    calPlainTime: {
      fontSize: 8,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.foreground, 0.62),
    },
    /* ── Rhythm profile ── */
    rhythmSubTitle: {
      fontSize: 14,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.foreground, 0.85),
    },
    rhythmSubDesc: {
      fontSize: 12,
      color: withOpacity(colors.mutedForeground, 0.62),
      lineHeight: 17,
    },
    categoryLabel: {
      fontSize: 13,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.foreground, 0.75),
    },
    categoryValue: {
      fontSize: 13,
      color: withOpacity(colors.mutedForeground, 0.5),
    },
    categoryTrack: {
      height: 5,
      borderRadius: 3,
      backgroundColor: withOpacity(colors.muted, 0.25),
      overflow: "hidden",
    },
    categoryFill: {
      height: "100%",
      borderRadius: 3,
      backgroundColor: withOpacity(colors.primary, 0.4),
    },

    /* ── Yearly snapshots ── */
    snapshotRow: {
      flexDirection: "row",
      alignItems: "center",
      gap: 12,
      paddingVertical: 12,
    },
    snapshotRowBorder: {
      borderTopWidth: StyleSheet.hairlineWidth,
      borderTopColor: withOpacity(colors.border, 0.2),
    },
    snapshotYear: {
      width: 40,
      fontSize: 13,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.7),
    },
    snapshotTime: {
      fontSize: 15,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.85),
    },
    snapshotMeta: {
      fontSize: 11,
      color: withOpacity(colors.mutedForeground, 0.6),
    },
    snapshotTopBookTitle: {
      fontSize: 11,
      color: withOpacity(colors.foreground, 0.66),
    },

    /* ── Journey summary ── */
    journeyBigNumber: {
      fontSize: 42,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.85),
      letterSpacing: -2,
      lineHeight: 44,
    },
    journeyBigSuffix: {
      fontSize: 20,
      fontWeight: fontWeight.semibold,
      color: withOpacity(colors.mutedForeground, 0.64),
    },
    journeyNarrative: {
      fontSize: 13,
      color: withOpacity(colors.mutedForeground, 0.62),
      lineHeight: 18,
    },
    journeyStartDate: {
      fontSize: 12,
      color: withOpacity(colors.mutedForeground, 0.56),
    },
    journeyMetricsRow: {
      flexDirection: "row",
      gap: 24,
      borderTopWidth: StyleSheet.hairlineWidth,
      borderTopColor: withOpacity(colors.border, 0.2),
      paddingTop: 12,
    },
    journeyMetricLabel: {
      fontSize: 9,
      fontWeight: fontWeight.medium,
      color: withOpacity(colors.mutedForeground, 0.52),
      textTransform: "uppercase",
      letterSpacing: 1,
    },
    journeyMetricValue: {
      fontSize: 16,
      fontWeight: fontWeight.bold,
      color: withOpacity(colors.foreground, 0.8),
    },

  });
