/* DivIQ suite — shared UI primitives (loaded by each app page) */

select option {
  color: var(--text, #f0f2f5) !important;
  background: var(--card, #131a2b) !important;
}
select option:checked,
select option:hover {
  background: var(--accent-muted, rgba(201, 146, 42, 0.22)) !important;
  color: var(--text, #f0f2f5) !important;
}

.diviq-app-header {
  display: none;
}
.diviq-app-header.diviq-app-header-visible {
  display: flex;
  background: var(--card, #131a2b);
  border-bottom: 1px solid var(--border, #2a3548);
  padding: 4px 14px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.diviq-app-header h1,
.diviq-home-link {
  display: none;
}

.diviq-app-nav,
nav.diviq-app-nav {
  display: flex;
  gap: 3px;
  padding: 3px 12px;
  background: var(--card, #131a2b);
  border-bottom: 1px solid var(--border, #2a3548);
  flex-wrap: wrap;
  align-items: center;
  position: sticky;
  top: var(--diviq-shell-height, 32px);
  z-index: 15;
  min-height: var(--diviq-nav-height, 32px);
}
.diviq-app-nav button,
.diviq-app-nav .tab,
.diviq-app-nav a,
nav.diviq-app-nav button,
nav.diviq-app-nav a {
  border: 1px solid var(--border, #2a3548);
  background: var(--surface, #1a2236);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  color: var(--muted-light, #b8c0d0);
  letter-spacing: 0.03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.diviq-app-nav button.active,
.diviq-app-nav .tab.active,
.diviq-app-nav a.active,
nav.diviq-app-nav button.active,
nav.diviq-app-nav a.active {
  color: var(--text, #f0f2f5);
  border-color: var(--accent, #c9922a);
  box-shadow: inset 0 -2px 0 var(--accent, #c9922a);
}

.diviq-sticky-chrome {
  position: sticky;
  top: calc(var(--diviq-shell-height, 32px) + var(--diviq-nav-height, 32px));
  z-index: 12;
  background: var(--bg, #0c1220);
  padding-bottom: 2px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border, #2a3548);
}
.diviq-sticky-chrome .filter-bar {
  margin-bottom: 0;
}

.journal-section > summary,
details[data-section] > summary {
  list-style: none;
}
.journal-section > summary::-webkit-details-marker,
details[data-section] > summary::-webkit-details-marker {
  display: none;
}
.section-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border, #2a3548);
  border-radius: 5px;
  background: var(--surface, #1a2236);
  color: var(--muted-light, #b8c0d0);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  user-select: none;
}
.journal-section[open] > summary .section-toggle,
details[data-section][open] > summary .section-toggle {
  color: var(--text, #f0f2f5);
  border-color: var(--accent, #c9922a);
}
.summary-chevron {
  display: none;
}

.module-overview {
  margin-bottom: 12px;
}
.module-overview-hero {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border, #2a3548);
}
.module-overview-hero h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.module-overview-hero .overview-lead {
  margin: 0;
  font-size: 14px;
  color: var(--muted-light, #b8c0d0);
  line-height: 1.55;
  max-width: 640px;
}
.overview-lead {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted-light, #b8c0d0);
  line-height: 1.5;
}
.overview-section-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #8b94a8);
}
.overview-section-title.overview-section-secondary {
  margin-top: 18px;
}
.overview-section-lead {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted-light, #b8c0d0);
  line-height: 1.55;
  max-width: 720px;
}
.module-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.module-overview-grid .card,
.overview-panel {
  margin: 0;
  background: var(--surface, #1a2236);
  border: 1px solid var(--border, #2a3548);
  border-radius: 8px;
  padding: 12px 14px;
}
.overview-panel-accent {
  border-left: 3px solid var(--accent, #c9922a);
}
.module-overview-grid h3,
.overview-panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.module-overview-grid ul,
.overview-panel ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted-light, #b8c0d0);
}
.module-overview-grid li,
.overview-panel li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 5px;
}
.module-overview-grid li::before,
.overview-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #c9922a);
  opacity: 0.7;
}
.overview-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}
.overview-tag-required {
  background: rgba(201, 146, 42, 0.18);
  color: var(--accent, #c9922a);
  border: 1px solid rgba(201, 146, 42, 0.35);
}
.overview-tag-optional {
  background: rgba(139, 148, 168, 0.12);
  color: var(--muted, #8b94a8);
  border: 1px solid var(--border, #2a3548);
}
.overview-tag-timing {
  background: rgba(34, 197, 94, 0.1);
  color: var(--green-text, #4ade80);
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.overview-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.overview-session-card {
  background: var(--bg, #0c1220);
  border: 1px solid var(--border, #2a3548);
  border-radius: 6px;
  padding: 10px 12px;
}
.overview-session-card h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
}
.overview-session-card p {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted-light, #b8c0d0);
}
.overview-session-card .overview-meta {
  font-size: 10px;
  color: var(--muted, #8b94a8);
  line-height: 1.45;
}
.overview-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.overview-step {
  flex: 1;
  min-width: 140px;
  background: var(--surface, #1a2236);
  border: 1px solid var(--border, #2a3548);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.overview-step-num {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent, #c9922a);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.overview-step-label {
  font-size: 12px;
  font-weight: 600;
}

.day-toolbar {
  display: none;
}