/* stage-72-content-icon-final-polish: unified content icons and semantic markers. */

:root {
  --focus-content-icon-shell: 36px;
  --focus-content-icon-glyph: 18px;
  --focus-content-icon-radius: 14px;
  --focus-content-dot-size: 8px;
  --focus-content-action-glyph: 17px;
  --focus-content-event-rail: 4px;
  --focus-content-icon-ink: color-mix(in srgb, var(--text-primary, #2f2a26) 72%, var(--primary, #5678f5) 18%);
  --focus-content-icon-bg:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, #fff 34%, transparent), transparent 2rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 78%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 82%, transparent));
  --focus-content-summary-icon: var(--icon-calendar);
  --focus-content-tasks-icon: var(--focus-icon-check-balanced);
  --focus-content-interesting-icon: var(--icon-bookmark);
  --focus-content-birthday-icon: var(--icon-birthday);
  --focus-content-events-icon: var(--icon-calendar);
}

.focus-summary-card .panel-title,
.focus-tasks-card .panel-title,
.interesting-today > .panel-title,
.interesting-grid .info-panel .panel-title {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--focus-content-icon-shell) minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 10px !important;
}

.interesting-grid .info-panel .panel-title {
  grid-template-columns: var(--focus-content-icon-shell) minmax(0, 1fr) !important;
}

.focus-summary-card .panel-title::before,
.focus-tasks-card .panel-title::before,
.interesting-today > .panel-title::before,
.interesting-grid .info-panel .panel-title::before {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: var(--focus-content-icon-shell) !important;
  min-width: var(--focus-content-icon-shell) !important;
  height: var(--focus-content-icon-shell) !important;
  min-height: var(--focus-content-icon-shell) !important;
  border: 1px solid color-mix(in srgb, var(--stage49-card-accent, var(--primary, #5678f5)) 16%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  border-radius: var(--focus-content-icon-radius) !important;
  background: var(--focus-content-icon-bg) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 .58rem 1.2rem color-mix(in srgb, var(--stage49-card-accent, var(--primary, #5678f5)) 8%, transparent) !important;
  content: "" !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.focus-summary-card .panel-title :where(h2, h3),
.focus-tasks-card .panel-title :where(h2, h3),
.interesting-today > .panel-title :where(h2, h3),
.interesting-grid .info-panel .panel-title :where(h2, h3) {
  position: relative !important;
  grid-column: 2 !important;
  min-width: 0 !important;
}

.focus-summary-card .panel-title :where(h2, h3)::before,
.focus-tasks-card .panel-title :where(h2, h3)::before,
.interesting-today > .panel-title :where(h2, h3)::before,
.interesting-grid .info-panel .panel-title :where(h2, h3)::before {
  position: absolute !important;
  top: 50% !important;
  left: calc(-1 * (var(--focus-content-icon-shell) + 10px) + ((var(--focus-content-icon-shell) - var(--focus-content-icon-glyph)) / 2)) !important;
  display: block !important;
  width: var(--focus-content-icon-glyph) !important;
  min-width: var(--focus-content-icon-glyph) !important;
  height: var(--focus-content-icon-glyph) !important;
  min-height: var(--focus-content-icon-glyph) !important;
  background: color-mix(in srgb, var(--stage49-card-accent, var(--primary, #5678f5)) 68%, var(--focus-content-icon-ink) 32%) !important;
  content: "" !important;
  transform: translateY(-50%) !important;
}

.focus-summary-card .panel-title :where(h2, h3)::before {
  -webkit-mask: var(--focus-content-summary-icon) center / contain no-repeat !important;
  mask: var(--focus-content-summary-icon) center / contain no-repeat !important;
}

.focus-tasks-card .panel-title :where(h2, h3)::before {
  -webkit-mask: var(--focus-content-tasks-icon) center / contain no-repeat !important;
  mask: var(--focus-content-tasks-icon) center / contain no-repeat !important;
}

.interesting-today > .panel-title :where(h2, h3)::before {
  -webkit-mask: var(--focus-content-interesting-icon) center / contain no-repeat !important;
  mask: var(--focus-content-interesting-icon) center / contain no-repeat !important;
}

.interesting-grid .info-panel:nth-child(1) .panel-title :where(h2, h3)::before {
  -webkit-mask: var(--focus-content-birthday-icon) center / contain no-repeat !important;
  mask: var(--focus-content-birthday-icon) center / contain no-repeat !important;
}

.interesting-grid .info-panel:nth-child(2) .panel-title :where(h2, h3)::before {
  -webkit-mask: var(--focus-content-events-icon) center / contain no-repeat !important;
  mask: var(--focus-content-events-icon) center / contain no-repeat !important;
}

.interesting-today > .panel-title > div {
  grid-column: 2 !important;
  min-width: 0 !important;
}

.interesting-today > .panel-title > button {
  grid-column: 3 !important;
}

:where(.focus-summary-dot, .day-summary .summary-item i, .calendar-sheet .dot, #markerLegend .dot, .focus-label-dot) {
  width: var(--focus-content-dot-size) !important;
  min-width: var(--focus-content-dot-size) !important;
  height: var(--focus-content-dot-size) !important;
  min-height: var(--focus-content-dot-size) !important;
  border: 1px solid color-mix(in srgb, #fff 58%, transparent) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, currentColor 13%, transparent),
    0 0 14px color-mix(in srgb, currentColor 32%, transparent) !important;
}

.calendar-sheet .focus-calendar-marker {
  width: var(--focus-content-dot-size) !important;
  min-width: var(--focus-content-dot-size) !important;
  height: var(--focus-content-dot-size) !important;
  min-height: var(--focus-content-dot-size) !important;
  border: 1px solid color-mix(in srgb, #fff 58%, transparent) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, currentColor 13%, transparent),
    0 0 14px color-mix(in srgb, currentColor 32%, transparent) !important;
}

.calendar-sheet .dot.blue,
.calendar-sheet .focus-calendar-marker.blue,
#markerLegend .dot.blue,
.focus-label-dot.blue {
  color: var(--label-reminder, var(--focus-label-reminder, #5678f5)) !important;
  background: currentColor !important;
}

.calendar-sheet .dot.red,
.calendar-sheet .focus-calendar-marker.red,
#markerLegend .dot.red,
.focus-label-dot.red {
  color: var(--label-birthday, var(--focus-label-birthday, #d96b5f)) !important;
  background: currentColor !important;
}

.calendar-sheet .dot.green,
.calendar-sheet .focus-calendar-marker.green,
#markerLegend .dot.green,
.focus-label-dot.green {
  color: var(--label-study, var(--focus-label-study, #5f9073)) !important;
  background: currentColor !important;
}

.focus-summary-dot,
.day-summary .summary-item i {
  color: var(--summary-color, var(--primary)) !important;
  background: currentColor !important;
}

.day-card-item::before {
  width: var(--focus-content-dot-size) !important;
  min-width: var(--focus-content-dot-size) !important;
  height: var(--focus-content-dot-size) !important;
  min-height: var(--focus-content-dot-size) !important;
  border: 1px solid color-mix(in srgb, #fff 58%, transparent) !important;
  background: var(--day-card-color, var(--primary)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--day-card-color, var(--primary)) 12%, transparent),
    0 0 16px color-mix(in srgb, var(--day-card-color, var(--primary)) 34%, transparent) !important;
}

.day-card-action-button::before {
  width: var(--focus-content-action-glyph) !important;
  min-width: var(--focus-content-action-glyph) !important;
  height: var(--focus-content-action-glyph) !important;
  min-height: var(--focus-content-action-glyph) !important;
  background: currentColor !important;
  -webkit-mask: var(--day-card-action-icon, var(--icon-reminder)) center / contain no-repeat !important;
  mask: var(--day-card-action-icon, var(--icon-reminder)) center / contain no-repeat !important;
  transform: none !important;
}

.event-pill::before {
  width: var(--focus-content-event-rail) !important;
  background: var(--week-event-color, var(--primary)) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--week-event-color, var(--primary)) 28%, transparent) !important;
}

.event-pill {
  --week-event-color: var(--event-color, var(--primary));
}

.week-event-card {
  position: relative !important;
}

.week-event-card::before {
  position: absolute !important;
  top: 14px !important;
  left: 8px !important;
  display: block !important;
  width: var(--focus-content-dot-size) !important;
  min-width: var(--focus-content-dot-size) !important;
  height: var(--focus-content-dot-size) !important;
  min-height: var(--focus-content-dot-size) !important;
  border: 1px solid color-mix(in srgb, #fff 58%, transparent) !important;
  border-radius: 999px !important;
  background: var(--week-event-color, var(--primary)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--week-event-color, var(--primary)) 12%, transparent),
    0 0 14px color-mix(in srgb, var(--week-event-color, var(--primary)) 34%, transparent) !important;
  content: "" !important;
}

.event-pill.week-event-card::before {
  inset: 0 auto 0 0 !important;
  width: var(--focus-content-event-rail) !important;
  min-width: var(--focus-content-event-rail) !important;
  height: auto !important;
  min-height: 100% !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--week-event-color, var(--primary)) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--week-event-color, var(--primary)) 28%, transparent) !important;
}

.quick-action [data-quick-icon] {
  display: inline-grid !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--primary, #5678f5) 16%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  border-radius: 12px !important;
  background: var(--focus-content-icon-bg) !important;
  color: color-mix(in srgb, var(--primary, #5678f5) 64%, var(--text-primary, #2f2a26) 36%) !important;
}

.quick-action [data-quick-icon]::before {
  width: 15px !important;
  height: 15px !important;
  transform: none !important;
}

@media (max-width: 760px) {
  :root {
    --focus-content-icon-shell: 32px;
    --focus-content-icon-glyph: 16px;
    --focus-content-dot-size: 7px;
  }

  .focus-summary-card .panel-title,
  .focus-tasks-card .panel-title,
  .interesting-today > .panel-title,
  .interesting-grid .info-panel .panel-title {
    column-gap: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .focus-summary-card .panel-title::before,
  .focus-tasks-card .panel-title::before,
  .interesting-today > .panel-title::before,
  .interesting-grid .info-panel .panel-title::before,
  .focus-summary-card .panel-title :where(h2, h3)::before,
  .focus-tasks-card .panel-title :where(h2, h3)::before,
  .interesting-today > .panel-title :where(h2, h3)::before,
  .interesting-grid .info-panel .panel-title :where(h2, h3)::before,
  .day-card-action-button::before,
  .week-event-card::before {
    transition: none !important;
    transform: none !important;
  }

  .focus-summary-card .panel-title :where(h2, h3)::before,
  .focus-tasks-card .panel-title :where(h2, h3)::before,
  .interesting-today > .panel-title :where(h2, h3)::before,
  .interesting-grid .info-panel .panel-title :where(h2, h3)::before {
    transform: translateY(-50%) !important;
  }
}