/*
 * EmlogStudio daylight flat surfaces
 *
 * This is the final daylight-only surface layer. It intentionally flattens
 * ordinary paper cards and work panels, while leaving the WebGL statistic
 * fusion cards, poster/share artwork and configurable deck cards untouched.
 * Load after every other day-*.css file.
 */

html[data-theme="light"] {
  --em-day-flat-paper: #ffffff;
  --em-day-flat-soft: #f4f8fa;
  --em-day-flat-soft-mint: #eef7f5;
  --em-day-flat-line: rgba(36, 102, 128, .18);
  --em-day-flat-line-strong: rgba(8, 124, 113, .36);
  --em-day-flat-shadow: 0 8px 22px rgba(31, 77, 102, .075);
  --em-day-flat-shadow-raised: 0 13px 28px rgba(31, 77, 102, .12);
}

/* --------------------------------------------------------------------------
   Home workspace and list routes. The intentional 3D deck and the four
   .stats-style-fusion cards are not included in these selectors.
   -------------------------------------------------------------------------- */
html[data-theme="light"] :is(
  .sidebar,
  .detail-panel,
  .page-toolbar-card,
  .post-library,
  .tags-hero,
  .tags-panel,
  .workspace-switcher,
  .switcher,
  .home-middle-region.board-card,
  .home-middle-region .task-group,
  .home-middle-region .progress-document,
  .recommendation-card,
  .ai-card,
  .footer-monitor,
  .footer-monitor-item,
  .category-card,
  .moment-item,
  .moment-aside,
  .tag-insights > article,
  .empty-state,
  .deck-settings-drawer,
  .deck-setting-group,
  .deck-fusion-preset
) {
  background: var(--em-day-flat-paper) !important;
  border-color: var(--em-day-flat-line);
  box-shadow: var(--em-day-flat-shadow);
}

html[data-theme="light"] :is(
  .category-card::before,
  .home-middle-region.board-card::before,
  .home-middle-region .progress-document::before,
  .recommendation-card::before,
  .ai-card::before,
  .footer-monitor::before,
  .moment-item::before
) {
  background: none !important;
}

html[data-theme="light"] :is(
  .home-middle-region .group-heading:hover,
  .home-middle-region .group-heading:focus-visible,
  .home-middle-region .task-row:hover,
  .home-middle-region .task-row:focus-visible,
  .home-middle-region .task-row.selected,
  .footer-monitor-link:hover,
  .footer-monitor-link:focus-visible,
  .page-filter-pills :is(button, a):hover,
  .page-filter-pills :is(button, a).active,
  .post-table-row:hover,
  .pagination :is(button.active, a.active, span.current, [aria-current="page"]),
  .pagination > span,
  .category-card:hover,
  .category-card:focus-visible,
  .deck-fusion-preset:hover,
  .deck-fusion-preset.is-selected
) {
  background: var(--em-day-flat-soft-mint) !important;
  border-color: var(--em-day-flat-line-strong);
}

html[data-theme="light"] .post-media,
html[data-theme="light"] .post-table-row:hover .post-media {
  background: #edf5f7 !important;
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   Article reader. Media-backed next/previous cards and poster artwork stay
   outside this scope because their image-overlay treatment is functional.
   -------------------------------------------------------------------------- */
html[data-theme="light"] :is(
  .article-reader .article-hero,
  .article-reader .article-main,
  .article-reader .article-document-bar,
  .article-reader .article-toolbelt,
  .article-reader .article-toc,
  .article-reader .article-recommended,
  .article-reader .comment-form-card,
  .article-reader .comments-section,
  .article-comment-dialog,
  .article-comment-dialog-head,
  .article-comment-upload-empty
) {
  background: var(--em-day-flat-paper) !important;
  border-color: var(--em-day-flat-line);
  box-shadow: var(--em-day-flat-shadow);
}

html[data-theme="light"] :is(
  .article-reader .article-hero::before,
  .article-reader .article-main::before,
  .article-reader .article-recommended::before,
  .article-comment-dialog-head::before
) {
  background: none !important;
}

html[data-theme="light"] :is(
  .article-reader .comment-item:hover,
  .article-reader .comment-item:focus-within
) {
  background: var(--em-day-flat-soft) !important;
}

/* --------------------------------------------------------------------------
   Archive, friend links, traffic, AI report, gallery, about and static pages.
   Charts and photo pixels remain their own content rather than card surfaces.
   -------------------------------------------------------------------------- */
html[data-theme="light"] :is(
  .emstudio-archive-hero,
  .emstudio-archive-years,
  .emstudio-archive-month-card,
  .emstudio-archive-empty,
  .emstudio-friend-entry,
  .emstudio-friend-apply__hero,
  .emstudio-friend-apply__steps li,
  .emstudio-friend-apply__form,
  .emstudio-friend-apply__unavailable,
  .emstudio-traffic-lock,
  .emstudio-traffic-console,
  .emstudio-traffic-hero,
  .emstudio-traffic-metrics article,
  .emstudio-traffic-behavior article,
  .emstudio-traffic-card,
  .emstudio-traffic-total-strip,
  .emstudio-ai-console,
  .emstudio-ai-hero,
  .emstudio-ai-clock,
  .emstudio-ai-toolbar,
  .emstudio-ai-overview,
  .emstudio-ai-panel,
  .emstudio-gallery-toolbar,
  .emstudio-gallery-wall,
  .emstudio-gallery-empty,
  .friend-card,
  .about-hero,
  .about-grid article,
  .site-timeline,
  .link-apply,
  body.emstudio-view-page .page-view .article-hero,
  body.emstudio-view-page .page-view .article-main,
  .error-card
) {
  background: var(--em-day-flat-paper) !important;
  border-color: var(--em-day-flat-line);
  box-shadow: var(--em-day-flat-shadow);
}

html[data-theme="light"] :is(
  .emstudio-archive-hero::before,
  .emstudio-friend-apply__hero::before,
  .emstudio-traffic-hero::before,
  .emstudio-ai-hero::before,
  .about-hero::before,
  body.emstudio-view-page .page-view .article-hero::before,
  .error-card::before
) {
  background: none !important;
}

html[data-theme="light"] :is(
  .emstudio-archive-years a:hover,
  .emstudio-archive-years a:focus-visible,
  .emstudio-archive-years a.is-current,
  .emstudio-archive-month-card:hover,
  .friend-card:hover,
  .emstudio-traffic-tabs button.is-active,
  .emstudio-ai-tabs button[aria-pressed="true"]
) {
  background: var(--em-day-flat-soft-mint) !important;
}

html[data-theme="light"] .emstudio-friend-entry__mark,
html[data-theme="light"] .about-monogram {
  background: #eaf5f4 !important;
}

/* --------------------------------------------------------------------------
   Feedback surfaces. Primary actions deliberately retain their solid accent;
   this only removes the decorative gradients from containers and rows.
   -------------------------------------------------------------------------- */
html[data-theme="light"] :is(
  .feedback-float-nav,
  .feedback-form,
  .feedback-entry,
  .feedback-center,
  .feedback-dialog-surface,
  .feedback-select-menu,
  .feedback-admin-reply-form
) {
  background: var(--em-day-flat-paper) !important;
  border-color: var(--em-day-flat-line);
  box-shadow: var(--em-day-flat-shadow);
}

html[data-theme="light"] :is(
  .feedback-float-nav::before,
  .feedback-center::before,
  .feedback-dialog-surface::before
) {
  background: none !important;
}

html[data-theme="light"] :is(
  .feedback-select-menu button:hover,
  .feedback-select-menu button[aria-selected="true"],
  .feedback-entry:hover
) {
  background: var(--em-day-flat-soft-mint) !important;
}

/* --------------------------------------------------------------------------
   Personal centre: the dashboard itself is a transparent canvas. Only its
   child modules receive paper surfaces, so the former pale outer shell cannot
   show beneath content at the bottom of a panel.
   -------------------------------------------------------------------------- */
html[data-theme="light"] body.emstudio-view-profile :is(.profile-dashboard, .profile-dashboard-content) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.emstudio-view-profile .profile-dashboard::before,
html[data-theme="light"] body.emstudio-view-profile .profile-dashboard::after,
html[data-theme="light"] body.emstudio-view-profile .profile-dashboard-content::before,
html[data-theme="light"] body.emstudio-view-profile .profile-dashboard-content::after {
  background: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.emstudio-view-profile :is(
  .profile-dashboard-hero,
  .profile-dashboard-avatar,
  .profile-dashboard-nav,
  .profile-dashboard-stat-grid > article,
  .profile-recent-card,
  .profile-dashboard-content .user-list,
  .profile-dashboard-content .account-form,
  .profile-dashboard-content .comment-list article,
  .profile-favorite-card,
  .profile-dashboard-content .profile-like-item,
  .profile-dashboard .empty-state,
  .profile-page,
  .profile-page-card,
  .my-posts,
  .my-comments,
  .my-likes,
  .my-favorites,
  .my-feedback,
  .my-announcements,
  .feedback-profile-center,
  .feedback-profile-center > .feedback-form,
  .announcement-composer,
  .announcement-history,
  .profile-admin-users
) {
  background: var(--em-day-flat-paper) !important;
  border-color: var(--em-day-flat-line);
  box-shadow: var(--em-day-flat-shadow);
}

html[data-theme="light"] body.emstudio-view-profile :is(
  .profile-dashboard-hero::before,
  .profile-dashboard-hero .user-cover-lines,
  .profile-hero-glow-one,
  .profile-dashboard-stat-grid > article::after,
  .profile-favorite-card::after
) {
  background: none !important;
}

html[data-theme="light"] body.emstudio-view-profile .profile-dashboard-avatar {
  background: #edf5f5 !important;
}

html[data-theme="light"] body.emstudio-view-profile .profile-recent-card li:not(:last-child)::after {
  background: var(--profile-day-teal, #087c71) !important;
}

html[data-theme="light"] body.emstudio-view-profile .feedback-profile-center::before {
  background: var(--profile-day-teal, #087c71) !important;
}

html[data-theme="light"] body.emstudio-view-profile :is(
  .profile-dashboard-stat-grid > article:hover,
  .profile-dashboard-nav button:hover,
  .profile-dashboard-nav button:focus-visible,
  .profile-dashboard-nav button.active,
  .profile-favorite-card:hover,
  .profile-dashboard-content .comment-list article:hover,
  .profile-dashboard-content .profile-like-item:hover,
  .profile-admin-user-row:hover
) {
  background: var(--em-day-flat-soft-mint) !important;
}

/* Active navigation remains a readable, single solid colour rather than a
   gradient. Its light text/icon treatment is preserved by the existing rules. */
html[data-theme="light"] body.emstudio-view-profile .profile-dashboard-nav button.active {
  color: #ffffff;
  background: var(--profile-day-teal, #087c71) !important;
  border-color: var(--profile-day-teal, #087c71);
}

/* Keep form feedback precise: pointer focus gets a border change, while
   keyboard focus retains a compact, high-contrast ring. */
html[data-theme="light"] :is(
  input,
  textarea,
  select,
  .feedback-select-trigger,
  [data-feedback-select-trigger],
  [role="combobox"]
):focus {
  outline: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] :is(
  input,
  textarea,
  select,
  .feedback-select-trigger,
  [data-feedback-select-trigger],
  [role="combobox"]
):focus-visible {
  outline: 2px solid rgba(8, 124, 113, .72) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(8, 124, 113, .16) !important;
}

@media (forced-colors: active) {
  html[data-theme="light"] :is(
    input,
    textarea,
    select,
    .feedback-select-trigger,
    [data-feedback-select-trigger],
    [role="combobox"]
  ):focus-visible {
    outline-color: Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}