atomicuilibrary 0.0.1

package/dist/collection/components/accordion/accordion.css

@@ -0,0 +1,2090 @@
+@charset "UTF-8";
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+/* Accordion Container */
+.accordion-container {
+  width: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--accordion-bg, white);
+  font-family: var(--font-family);
+}
+
+/* Numbered Indicators */
+.accordion-indicators {
+  display: flex;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+  flex-wrap: wrap;
+}
+
+.accordion-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid #d1d5db;
+  border-radius: 50%;
+  background-color: white;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.accordion-indicator:hover:not(.accordion-indicator-disabled) {
+  border-color: var(--selected-header-color, #10b981);
+  color: var(--selected-header-color, #10b981);
+  background-color: var(--selected-header-bg, #eff6ff);
+}
+
+.accordion-indicator:focus {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.accordion-indicator-active {
+  border-color: var(--selected-header-color, #10b981);
+  background-color: var(--selected-header-bg, #eff6ff);
+  color: var(--selected-header-color, #10b981);
+  font-weight: 600;
+}
+
+.accordion-indicator-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Accordion Item */
+.accordion-item {
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.accordion-item:last-child {
+  border-bottom: none;
+}
+
+.accordion-item-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Accordion Header */
+.accordion-header {
+  width: 100%;
+  padding: 16px 20px;
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  font-weight: 500;
+  color: #374151;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.accordion-header:focus {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-radius: 4px;
+}
+
+.accordion-header:hover:not(.accordion-header-disabled) {
+  background-color: transparent;
+}
+
+.accordion-item-open .accordion-header {
+  background-color: var(--selected-header-bg, #f0f9ff);
+  border-left: none;
+}
+.accordion-item-open .accordion-header.accordion-selection-left {
+  border-left: 3px solid var(--selected-header-color, #10b981);
+}
+.accordion-item-open .accordion-header.accordion-selection-top {
+  border-top: 3px solid var(--selected-header-color, #10b981);
+}
+
+.accordion-header:active:not(.accordion-header-disabled) {
+  background-color: #f3f4f6;
+}
+.accordion-header:active:not(.accordion-header-disabled).accordion-physics-bouncy, .accordion-header:active:not(.accordion-header-disabled).accordion-physics-liquid {
+  transform: perspective(500px) rotateX(-2deg) scale(0.985);
+  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.accordion-header:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--selected-header-color, #10b981) !important;
+  border-radius: 4px;
+  z-index: 10;
+}
+
+.accordion-header-disabled {
+  cursor: not-allowed;
+  color: #9ca3af;
+}
+
+.accordion-header-content {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+  flex: 1;
+}
+
+.accordion-header-btn {
+  width: 100% !important;
+  height: auto !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+  transform: none !important;
+}
+.accordion-header-btn::part(button) {
+  padding: 16px 20px !important;
+  width: 100% !important;
+  justify-content: space-between !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.accordion-header-btn:hover::part(button) {
+  background: rgba(0, 0, 0, 0.02) !important;
+}
+
+.accordion-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+}
+
+.accordion-header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.accordion-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 4px;
+}
+
+/* Icon */
+.accordion-icon {
+  font-size: 18px;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+/* Image */
+.accordion-image {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.accordion-header-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  text-align: left;
+}
+
+.accordion-title-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  min-width: 0;
+}
+
+.accordion-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-primary, #111827);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accordion-subtitle {
+  font-size: 13px;
+  color: var(--color-text-muted, #6b7280);
+  margin-top: 2px;
+}
+
+/* Badge */
+.accordion-badge {
+  background-color: #ef4444;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
+  min-width: 20px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+/* Arrow */
+.accordion-arrow {
+  color: var(--color-text-muted, #6b7280);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  pointer-events: none; /* Let the click through to the button */
+}
+
+.accordion-header:hover .accordion-arrow {
+  opacity: 1;
+  color: var(--color-text-primary, #111827);
+  transform: scale(1.1);
+}
+
+.accordion-item-open .accordion-arrow {
+  transform: rotate(180deg);
+}
+
+.accordion-arrow.arrow-start {
+  margin-right: 4px;
+}
+
+/* Accordion Content */
+.accordion-content {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height var(--animation-duration, 300ms) var(--animation-timing, ease), opacity var(--animation-duration, 300ms) var(--animation-timing, ease);
+  background-color: #f9fafb;
+  /* Kinetic Physics Variants */
+}
+.accordion-content.accordion-physics-bouncy {
+  transition: max-height var(--animation-duration, 500ms) cubic-bezier(0.68, -0.6, 0.32, 1.6), opacity var(--animation-duration, 500ms) ease, transform var(--animation-duration, 500ms) cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  transform-origin: top;
+}
+.accordion-content.accordion-physics-bouncy.accordion-content-open {
+  animation: elastic-stretch var(--animation-duration, 500ms) cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+.accordion-content.accordion-physics-liquid {
+  transition: max-height var(--animation-duration, 600ms) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--animation-duration, 600ms) ease, transform var(--animation-duration, 600ms) cubic-bezier(0.2, 0.8, 0.2, 1);
+  transform-origin: top;
+}
+.accordion-content.accordion-physics-liquid.accordion-content-open {
+  animation: liquid-stretch var(--animation-duration, 600ms) cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes elastic-stretch {
+  0% {
+    transform: scaleY(0.9) translateY(-10px);
+  }
+  60% {
+    transform: scaleY(1.05) translateY(0);
+  }
+  100% {
+    transform: scaleY(1) translateY(0);
+  }
+}
+@keyframes liquid-stretch {
+  0% {
+    transform: scaleY(0.8) skewX(-2deg);
+  }
+  50% {
+    transform: scaleY(1.02) skewX(1deg);
+  }
+  100% {
+    transform: scaleY(1) skewX(0);
+  }
+}
+.accordion-content:not(.accordion-content-open) {
+  max-height: 0;
+  opacity: 0;
+}
+
+.accordion-content-open {
+  max-height: 90vh;
+  opacity: 1;
+  overflow-y: auto;
+}
+
+.accordion-content-inner {
+  padding: 16px 20px;
+  color: #4b5563;
+  line-height: 1.6;
+}
+.accordion-content-inner p {
+  margin-top: 0;
+  margin-bottom: 12px;
+}
+.accordion-content-inner p:last-child {
+  margin-bottom: 0;
+}
+
+/* Size Variants */
+.accordion-container.accordion-sm .accordion-header {
+  padding: 10px 16px;
+  font-size: 13px;
+}
+
+.accordion-container.accordion-lg .accordion-header {
+  padding: 20px 24px;
+  font-size: 18px;
+}
+
+/* Semantic Size Mapping */
+.accordion-container.accordion-main .accordion-header {
+  padding: 24px 32px;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.accordion-container.accordion-section .accordion-header {
+  padding: 18px 24px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.accordion-container.accordion-subsection .accordion-header {
+  padding: 14px 20px;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.accordion-container.accordion-popover .accordion-header {
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.accordion-container.accordion-popover .accordion-content-inner {
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+/* Theme Variants */
+.accordion-container.accordion-bordered .accordion-item {
+  border: 1px solid #e5e7eb;
+  margin-bottom: 8px;
+  border-radius: 6px;
+}
+
+.accordion-container.accordion-bordered .accordion-item:last-child {
+  margin-bottom: 0;
+}
+
+.accordion-container.accordion-bordered {
+  border: none;
+  background: transparent;
+}
+
+/* Splitted Variant */
+.accordion-container.accordion-splitted {
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.accordion-container.accordion-splitted .accordion-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.accordion-container.accordion-splitted .accordion-item-open {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  /* More elevation for open items */
+  border-color: var(--selected-header-color, #10b981);
+}
+
+/* Light Variant */
+.accordion-container.accordion-light {
+  border: none;
+  background: transparent;
+}
+
+.accordion-container.accordion-light .accordion-item {
+  border-bottom: 1px solid transparent;
+  /* Minimal separator */
+}
+
+.accordion-container.accordion-light .accordion-header {
+  background: transparent !important;
+  /* Force transparent background */
+}
+
+.accordion-container.accordion-light .accordion-header:hover {
+  background: rgba(0, 0, 0, 0.03) !important;
+}
+
+/* Shadow Variant */
+.accordion-container.accordion-shadow {
+  border: none;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+}
+
+/* ── Card-List Variant ──────────────────────────────────────────────────── */
+/* Inspired by ui-list designs: each item is a standalone rounded card        */
+/* with a coloured icon container on the left and a chevron on the right.      */
+.accordion-container.accordion-card-list,
+.accordion-container.accordion-card {
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  /* gap between cards */
+  overflow: visible;
+  /* allow shadows to breathe */
+}
+
+/* --- Individual card --- */
+.accordion-card-list .accordion-item,
+.accordion-card .accordion-item {
+  border: 1px solid #e8edf2;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
+  overflow: hidden;
+}
+
+.accordion-card-list .accordion-item:hover:not(.accordion-item-disabled),
+.accordion-card .accordion-item:hover:not(.accordion-item-disabled) {
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.accordion-card-list .accordion-item-open,
+.accordion-card .accordion-item-open {
+  border-color: var(--selected-header-color, #10b981);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+  /* Deep open shadow */
+  transform: translateY(-2px);
+}
+
+/* Card items are standalone cards — always keep full border (override base :last-child removal) */
+.accordion-card-list .accordion-item,
+.accordion-card .accordion-item,
+.accordion-card-list .accordion-item:last-child,
+.accordion-card .accordion-item:last-child {
+  border: 1px solid #e8edf2;
+}
+
+/* --- Header --- */
+.accordion-card-list .accordion-header,
+.accordion-card .accordion-header {
+  --button-padding: 18px 0px;
+  background: transparent;
+  border-left: none !important;
+}
+
+.accordion-card-list .accordion-header:hover:not(.accordion-header-disabled),
+.accordion-card .accordion-header:hover:not(.accordion-header-disabled) {
+  background: transparent;
+}
+
+.accordion-card-list .accordion-item-open .accordion-header,
+.accordion-card .accordion-item-open .accordion-header {
+  background: transparent;
+  border-left: none !important;
+}
+
+/* --- Icon container: coloured pill (matches screenshot) --- */
+.accordion-card-list .accordion-icon,
+.accordion-card .accordion-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--selected-header-color, #10b981) 12%, transparent);
+  color: var(--selected-header-color, #10b981);
+  font-size: 20px;
+  flex-shrink: 0;
+  transition: background 0.2s ease;
+}
+
+/* Fallback for browsers without color-mix */
+@supports not (background: color-mix(in srgb, red 10%, transparent)) {
+  .accordion-card-list .accordion-icon,
+  .accordion-card .accordion-icon {
+    background: rgba(16, 185, 129, 0.12);
+  }
+}
+.accordion-card-list .accordion-item:hover .accordion-icon,
+.accordion-card .accordion-item:hover .accordion-icon {
+  background: color-mix(in srgb, var(--selected-header-color, #10b981) 20%, transparent);
+}
+
+/* --- Title: bolder, slightly darker --- */
+.accordion-card-list .accordion-title,
+.accordion-card .accordion-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a202c;
+  white-space: normal;
+  /* allow wrapping */
+}
+
+/* --- Subtitle --- */
+.accordion-card-list .accordion-subtitle,
+.accordion-card .accordion-subtitle {
+  font-size: 13px;
+  color: #8a92a0;
+  font-weight: 400;
+  white-space: normal;
+}
+
+/* --- Header text block: tighter gap --- */
+.accordion-card-list .accordion-header-text,
+.accordion-card .accordion-header-text {
+  gap: 3px;
+}
+
+/* --- Arrow: always a right-pointing chevron, never rotates --- */
+.accordion-card-list .accordion-arrow,
+.accordion-card .accordion-arrow {
+  color: #c0c8d4;
+  font-size: 14px;
+  margin-left: 16px;
+  transition: color 0.2s ease;
+}
+
+.accordion-card-list .accordion-item:hover .accordion-arrow,
+.accordion-card .accordion-item:hover .accordion-arrow {
+  color: var(--selected-header-color, #10b981);
+}
+
+/* Open state: arrow can rotate or change color */
+.accordion-card-list .accordion-item-open .accordion-arrow,
+.accordion-card .accordion-item-open .accordion-arrow {
+  color: var(--selected-header-color, #10b981);
+}
+
+/* --- Content area --- */
+.accordion-card-list .accordion-content,
+.accordion-card .accordion-content {
+  background: #f8fafc;
+  border-top: 1px solid #edf1f6;
+}
+
+.accordion-card-list .accordion-content-inner,
+.accordion-card .accordion-content-inner {
+  padding: 16px 20px 20px;
+  color: #4a5568;
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+/* Size overrides for card-list */
+.accordion-card-list.accordion-sm .accordion-header,
+.accordion-card.accordion-sm .accordion-header {
+  padding: 14px 16px;
+}
+
+.accordion-card-list.accordion-sm .accordion-icon,
+.accordion-card.accordion-sm .accordion-icon {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  border-radius: 10px;
+  font-size: 17px;
+}
+
+.accordion-card-list.accordion-sm .accordion-title,
+.accordion-card.accordion-sm .accordion-title {
+  font-size: 14px;
+}
+
+.accordion-card-list.accordion-lg .accordion-header,
+.accordion-card.accordion-lg .accordion-header {
+  padding: 22px 24px;
+}
+
+.accordion-card-list.accordion-lg .accordion-icon,
+.accordion-card.accordion-lg .accordion-icon {
+  width: 52px;
+  height: 52px;
+  min-width: 52px;
+  border-radius: 14px;
+  font-size: 24px;
+}
+
+.accordion-card-list.accordion-lg .accordion-title,
+.accordion-card.accordion-lg .accordion-title {
+  font-size: 17px;
+}
+
+/* Icon Position Start: Arrow moves to the start instead */
+.accordion-card-list.accordion-icon-start .accordion-arrow.arrow-start,
+.accordion-card.accordion-icon-start .accordion-arrow.arrow-start {
+  margin-right: 16px;
+  margin-left: 0;
+}
+
+/* Icon Position Start */
+/* ── Headline Variant (High Impact Minimalism) ─────────────────────────── */
+.accordion-headline {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.accordion-headline .accordion-item {
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 0;
+  transition: all 0.25s ease;
+}
+.accordion-headline .accordion-item:last-child {
+  border-bottom: none;
+}
+.accordion-headline .accordion-header {
+  padding: var(--hl-padding, 32px 0);
+  font-size: var(--hl-title-size, 28px);
+  font-weight: 700;
+  color: #111827;
+  background: transparent;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  border-left: none !important;
+  text-align: left;
+}
+.accordion-headline .accordion-header:hover {
+  background: transparent;
+  color: var(--selected-header-color, #10b981);
+}
+.accordion-headline .accordion-header-content {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 16px;
+}
+.accordion-headline .accordion-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hl-gap, 12px);
+  flex: 1;
+  text-align: left;
+}
+.accordion-headline .accordion-title {
+  white-space: normal;
+  font-size: var(--hl-title-size, 28px) !important;
+  font-weight: 700;
+  line-height: 1.2;
+  text-align: left;
+  color: #111827;
+}
+.accordion-headline .accordion-subtitle {
+  font-size: var(--hl-subtitle-size, 16px) !important;
+  color: #4b5563;
+  line-height: 1.6;
+  margin-top: 4px;
+  white-space: normal;
+  max-width: 90%;
+  font-weight: 400;
+  text-align: left;
+}
+.accordion-headline {
+  /* Badge as circular marker */
+}
+.accordion-headline .accordion-badge {
+  background: #1f2937;
+  color: white;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 11px;
+  order: 2;
+  margin-top: 6px;
+}
+.accordion-headline .accordion-arrow {
+  font-size: calc(var(--hl-title-size, 28px) * 0.7);
+  color: #111827;
+  margin-top: 6px;
+  opacity: 0.8;
+}
+.accordion-headline .accordion-item-open .accordion-header {
+  background: transparent;
+  border-left: none;
+  color: #111827;
+}
+.accordion-headline .accordion-content {
+  background: transparent;
+}
+.accordion-headline .accordion-content-inner {
+  padding: 0 0 40px 0;
+  font-size: var(--hl-subtitle-size, 16px);
+  color: #4b5563;
+  line-height: 1.6;
+  text-align: left;
+}
+
+/* Icon Position Start */
+.accordion-arrow.arrow-start {
+  margin-left: 0;
+  margin-right: 12px;
+  order: -1;
+  /* Although flex layout handles it via JSX position, CSS ensure proper margin */
+}
+
+/* Animation keyframes for smooth expand/collapse */
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+/* Focus styles for accessibility */
+.accordion-header:focus-visible {
+  outline: 2px solid #10b981;
+  outline-offset: 2px;
+  z-index: 10;
+  /* Ensure focus ring is visible */
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .accordion-header {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+  .accordion-content-inner {
+    padding: 12px 16px;
+  }
+  .accordion-header-content {
+    gap: 8px;
+  }
+  .accordion-badge {
+    font-size: 11px;
+    padding: 1px 6px;
+  }
+}
+/* ===== NEW FEATURES STYLES ===== */
+/* Search Input */
+.accordion-search {
+  position: relative;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+
+.accordion-search-input {
+  width: 100%;
+  padding: 10px 40px 10px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.accordion-search-input:focus {
+  border-color: #10b981;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.accordion-search-clear {
+  position: absolute;
+  right: 28px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.accordion-search-clear:hover {
+  background-color: #e5e7eb;
+  color: #374151;
+}
+
+/* Search Highlighting */
+.search-highlight {
+  background-color: #fef08a;
+  color: #854d0e;
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-weight: 600;
+}
+
+/* Expand/Collapse All Controls */
+.accordion-controls {
+  display: flex;
+  gap: 8px;
+  padding: 12px 20px;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+  flex-wrap: wrap;
+}
+
+.accordion-control-button {
+  padding: 8px 16px;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.accordion-control-button:hover:not(:disabled) {
+  background-color: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.accordion-control-button:active:not(:disabled) {
+  background-color: #e5e7eb;
+}
+
+.accordion-control-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.accordion-control-button:focus {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Subtitle */
+.accordion-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.accordion-subtitle {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Action Buttons */
+.accordion-actions {
+  display: flex;
+  gap: 4px;
+  margin-left: 8px;
+}
+
+.accordion-action-button {
+  padding: 6px 10px;
+  background-color: transparent;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.accordion-action-button:hover:not(:disabled) {
+  background-color: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.accordion-action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.accordion-action-button:focus {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+/* Loading Spinner */
+.accordion-loading-spinner {
+  font-size: 16px;
+  animation: spin 1s linear infinite;
+  margin-left: 8px;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.accordion-item-loading {
+  opacity: 0.7;
+}
+
+/* Drag & Drop */
+.accordion-item-dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+  transform: scale(0.98);
+}
+
+.accordion-item-drag-over {
+  border-top: 3px solid #10b981;
+  background-color: #eff6ff;
+}
+
+/* Veto Rejection Shake */
+@keyframes accordion-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  20%, 60% {
+    transform: translateX(-6px);
+  }
+  40%, 80% {
+    transform: translateX(6px);
+  }
+}
+.accordion-item-shaking {
+  animation: accordion-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  pointer-events: none;
+}
+
+/* Success Radiant Pulse */
+@keyframes accordion-success-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4), 0 0 0 0 rgba(16, 185, 129, 0.2);
+    background-color: rgba(16, 185, 129, 0.05);
+  }
+  50% {
+    background-color: rgba(16, 185, 129, 0.1);
+  }
+  70% {
+    box-shadow: 0 0 0 15px rgba(16, 185, 129, 0), 0 0 0 30px rgba(16, 185, 129, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 0 0 rgba(16, 185, 129, 0);
+    background-color: transparent;
+  }
+}
+.accordion-item-success {
+  border-color: #10b981 !important;
+  animation: accordion-success-pulse 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.accordion-item[draggable=true] {
+  cursor: grab;
+}
+
+.accordion-item[draggable=true]:active {
+  cursor: grabbing;
+}
+
+/* Nested Items */
+.accordion-nested-items {
+  padding-left: 0;
+  background-color: transparent;
+}
+
+.accordion-item-nested {
+  margin-left: 24px;
+  position: relative;
+  border-left: none;
+  /* Vertical hierarchical guide */
+}
+.accordion-item-nested::before {
+  content: "";
+  position: absolute;
+  left: -16px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: linear-gradient(180deg, var(--selected-header-color, #10b981) 0%, rgba(229, 231, 235, 0.4) 100%);
+  opacity: 0.6;
+  transition: all 0.3s ease;
+}
+.accordion-item-nested {
+  /* Horizontal node connector with dot cap */
+}
+.accordion-item-nested::after {
+  content: "";
+  position: absolute;
+  left: -16px;
+  top: 24px;
+  width: 14px;
+  height: 2px;
+  background: var(--selected-header-color, #10b981);
+  opacity: 0.3;
+  border-radius: 0 2px 2px 0;
+}
+.accordion-item-nested {
+  /* Node cap dot */
+}
+.accordion-item-nested .accordion-header::before {
+  content: "";
+  position: absolute;
+  left: -18px;
+  top: 22px;
+  width: 6px;
+  height: 6px;
+  background: var(--selected-header-color, #10b981);
+  border-radius: 50%;
+  opacity: 0.5;
+  z-index: 2;
+}
+
+.accordion-item-nested .accordion-header {
+  padding-left: 16px;
+  font-size: 15px;
+  background-color: rgba(0, 0, 0, 0.015);
+  border-radius: 0 8px 8px 0;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.accordion-item-nested .accordion-header:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+/* Level-based shading for depth awareness */
+.accordion-item-nested .accordion-nested-items .accordion-header {
+  background-color: rgba(0, 0, 0, 0.025);
+  font-size: 14px;
+}
+
+/* Custom Header Slot */
+.accordion-header-custom {
+  padding: 16px 20px;
+  background-color: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+/* No Results */
+.accordion-no-results {
+  padding: 32px 20px;
+  text-align: center;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.accordion-no-results p {
+  margin: 0;
+}
+
+/* RTL Support */
+.accordion-rtl {
+  direction: rtl;
+}
+
+.accordion-rtl .accordion-header {
+  text-align: right;
+}
+
+.accordion-rtl .accordion-arrow {
+  margin-left: 0;
+  margin-right: 12px;
+}
+
+.accordion-rtl .accordion-arrow.arrow-start {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+.accordion-rtl .accordion-item-open .accordion-header {
+  border-left: none;
+  border-right: 3px solid var(--selected-header-color, #10b981);
+}
+
+.accordion-rtl .accordion-actions {
+  margin-left: 0;
+  margin-right: 8px;
+}
+
+/* Dense Mode */
+.accordion-dense .accordion-header {
+  padding: 10px 16px;
+  font-size: 14px;
+}
+
+.accordion-dense .accordion-content-inner {
+  padding: 10px 16px;
+  font-size: 13px;
+}
+
+.accordion-dense .accordion-search {
+  padding: 12px 16px;
+}
+
+.accordion-dense .accordion-controls {
+  padding: 8px 16px;
+}
+
+.accordion-dense .accordion-indicators {
+  padding: 12px 16px;
+}
+
+.accordion-dense .accordion-indicator {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+}
+
+.accordion-dense .accordion-subtitle {
+  font-size: 12px;
+}
+
+/* Print Styles */
+@media print {
+  .accordion-print-expand-all .accordion-content {
+    max-height: none !important;
+    opacity: 1 !important;
+    display: block !important;
+  }
+  .accordion-print-expand-all .accordion-item {
+    page-break-inside: avoid;
+  }
+  .accordion-search,
+  .accordion-controls,
+  .accordion-indicators {
+    display: none !important;
+  }
+  .accordion-arrow,
+  .accordion-actions {
+    display: none !important;
+  }
+  .accordion-header {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+/* Focus Visible Enhancement */
+.accordion-control-button:focus-visible,
+.accordion-action-button:focus-visible,
+.accordion-indicator:focus-visible {
+  outline: 2px solid #10b981;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Smooth transitions for all interactive elements */
+.accordion-item,
+.accordion-header,
+.accordion-content,
+.accordion-action-button,
+.accordion-control-button {
+  transition: all 0.2s ease;
+}
+
+/* Accessibility: Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .accordion-content,
+  .accordion-arrow,
+  .accordion-item,
+  .accordion-header,
+  .accordion-loading-spinner {
+    transition: none;
+    animation: none;
+  }
+}
+/* Skeleton Styles */
+.accordion-item-skeleton {
+  padding: 16px 20px;
+  background: #fff;
+}
+
+.skeleton-box {
+  background: #e5e7eb;
+  border-radius: 4px;
+  animation: skeleton-pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  display: none;
+}
+
+/* ── Apex Themes & Special Layouts ───────────────────────────────────────── */
+/* Status Badges (Wizard Mode) */
+.accordion-status-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+.accordion-status-badge.status-completed {
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+}
+.accordion-status-badge.status-error {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+.accordion-status-badge.status-warning {
+  color: #f59e0b;
+  background: rgba(245, 158, 11, 0.1);
+}
+.accordion-status-badge.status-current {
+  color: #3b82f6;
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.pulse-dot {
+  width: 8px;
+  height: 8px;
+  background-color: #3b82f6;
+  border-radius: 50%;
+  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+  animation: status-pulse 1.5s infinite;
+}
+
+@keyframes status-pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+  }
+}
+/* Glassmorphism Theme */
+.accordion-theme-glass {
+  background: rgba(255, 255, 255, 0.4) !important;
+  backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07) !important;
+}
+.accordion-theme-glass .accordion-item {
+  background: transparent;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.accordion-theme-glass .accordion-header:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Radiant Neon Theme */
+.accordion-theme-radiant {
+  background: #0f172a !important;
+  border: 1px solid #1e293b !important;
+  color: #f8fafc;
+}
+.accordion-theme-radiant .accordion-item {
+  border-bottom: 1px solid #1e293b;
+  background: transparent;
+}
+.accordion-theme-radiant .accordion-header {
+  color: #e2e8f0;
+}
+.accordion-theme-radiant .accordion-header:hover {
+  color: #38bdf8;
+}
+.accordion-theme-radiant .accordion-item-open .accordion-header {
+  background: linear-gradient(90deg, rgba(56, 189, 248, 0.05) 0%, transparent 100%);
+  color: #38bdf8;
+  box-shadow: inset 2px 0 0 #38bdf8;
+}
+.accordion-theme-radiant .accordion-subtitle {
+  color: #94a3b8;
+}
+
+/* Multi-Column Layout (Desktop Grid) */
+@media (min-width: 1024px) {
+  .accordion-columns-2 {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    border: none !important;
+    background: transparent !important;
+  }
+  .accordion-columns-2 .accordion-item {
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    margin-bottom: 0 !important;
+  }
+}
+/* ── End Apex Themes ───────────────────────────────────────────────────── */
+/* ── Zenith Tier: Parallax & Progress Rings ─────────────────────────────── */
+.accordion-item {
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+
+.accordion-header {
+  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0));
+  transition: transform 0.1s ease-out;
+  will-change: transform;
+}
+
+.accordion-header-indicators {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.accordion-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.accordion-progress-ring {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+}
+.accordion-progress-ring svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.accordion-progress-ring .ring-bg {
+  stroke: #e5e7eb;
+}
+.accordion-progress-ring .ring-fg {
+  stroke: #3b82f6;
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.5s ease;
+}
+.accordion-progress-ring .progress-text {
+  position: absolute;
+  font-size: 8px;
+  font-weight: 700;
+  color: #1f2937;
+  letter-spacing: -0.02em;
+}
+
+/* Enhancing Parallax for internal layers */
+.accordion-icon,
+.accordion-badge,
+.accordion-status-badge {
+  transform: translateZ(20px);
+}
+
+.accordion-title {
+  transform: translateZ(10px);
+}
+
+/* ── End Zenith Tier ───────────────────────────────────────────────────── */
+/* ── God-Tier Mastery: Sticky & Peek ─────────────────────────────────── */
+.accordion-header-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: inherit;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+}
+.accordion-header-sticky::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  right: 0;
+  height: 10px;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), transparent);
+  pointer-events: none;
+  opacity: 1;
+}
+
+.accordion-peek-snippet {
+  display: block;
+  font-size: 13px;
+  color: #94a3b8;
+  font-style: italic;
+  margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90%;
+  opacity: 0.8;
+  animation: peek-reveal 0.4s ease-out;
+}
+
+@keyframes peek-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 0.8;
+    transform: translateY(0);
+  }
+}
+/* Enhancing sticky for specific variants */
+.accordion-bordered .accordion-header-sticky,
+.accordion-card .accordion-header-sticky {
+  background: white;
+  z-index: 100;
+}
+
+.accordion-theme-glass .accordion-header-sticky {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(12px);
+}
+
+.accordion-theme-radiant .accordion-header-sticky {
+  background: #0f172a;
+}
+
+/* ── End God-Tier Mastery ───────────────────────────────────────────── */
+/* ── Interstellar Tier: Quick Actions & Heatmap ───────────────────────── */
+.accordion-container {
+  position: relative;
+}
+
+.accordion-quick-actions {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%) translateX(10px);
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  background: rgba(255, 255, 255, 0.9);
+  padding: 4px 8px;
+  border-radius: 20px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 20;
+}
+
+.accordion-item:hover .accordion-quick-actions {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
+  pointer-events: auto;
+}
+
+.quick-action-btn {
+  background: transparent;
+  border: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.quick-action-btn:hover {
+  background: #f1f5f9;
+  color: #3b82f6;
+  transform: scale(1.1);
+}
+
+.accordion-search-heatmap {
+  position: absolute;
+  top: 80px;
+  /* Below search bar */
+  bottom: 0;
+  right: -12px;
+  width: 4px;
+  background: rgba(226, 232, 240, 0.5);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 50;
+}
+
+.heatmap-marker {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  left: -2px;
+  background: #3b82f6;
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
+  pointer-events: auto;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+.heatmap-marker:hover {
+  transform: scale(1.5);
+  background: #2563eb;
+}
+
+/* Adjust themes for Interstellar */
+.accordion-theme-radiant .accordion-quick-actions {
+  background: #1e293b;
+  border-color: #334155;
+  color: white;
+}
+
+.accordion-theme-glass .accordion-quick-actions {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* ── End Interstellar Tier ─────────────────────────────────────────────── */
+/* ── Transcendent Tier: Pattern Vault & Analytics ────────────────────── */
+.accordion-lock-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.95);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 500;
+  border-radius: inherit;
+  backdrop-filter: blur(8px);
+  animation: lock-fade-in 0.3s ease-out;
+}
+.accordion-lock-overlay .lock-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 40px);
+  gap: 20px;
+  margin-bottom: 24px;
+}
+.accordion-lock-overlay .lock-dot {
+  width: 16px;
+  height: 16px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+.accordion-lock-overlay .lock-dot.active {
+  background: #38bdf8;
+  box-shadow: 0 0 15px #38bdf8;
+  transform: scale(1.3);
+}
+.accordion-lock-overlay .lock-hint {
+  color: #94a3b8;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.accordion-lock-overlay .lock-cancel {
+  background: transparent;
+  border: 1px solid #334155;
+  color: #94a3b8;
+  padding: 6px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.accordion-lock-overlay .lock-cancel:hover {
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+@keyframes lock-fade-in {
+  from {
+    opacity: 0;
+    background: rgba(0, 0, 0, 0);
+  }
+  to {
+    opacity: 1;
+    background: rgba(15, 23, 42, 0.95);
+  }
+}
+.accordion-header-sparkline {
+  opacity: 0.7;
+  color: #3b82f6;
+  margin-left: 8px;
+}
+.accordion-header-sparkline polyline {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: spark-draw 1.5s ease-out forwards;
+}
+
+@keyframes spark-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+/* Enhancing for Radiant/Glass Themes */
+.accordion-theme-radiant .accordion-header-sparkline {
+  color: #38bdf8;
+}
+
+.accordion-theme-glass .accordion-header-sparkline {
+  color: #8b5cf6;
+}
+
+/* ── End Transcendent Tier ─────────────────────────────────────────────── */
+/* ── Elite Tier: Breadcrumbs & Print Mastery ─────────────────────────── */
+.accordion-breadcrumbs {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #94a3b8;
+  margin-bottom: 4px;
+  opacity: 0.6;
+  font-weight: 700;
+}
+
+.breadcrumb-node {
+  transition: color 0.2s ease;
+}
+.breadcrumb-node:hover {
+  color: #3b82f6;
+}
+
+/* Print Engine Perfection */
+@media print {
+  .accordion-print-expand-all .accordion-content {
+    display: block !important;
+    max-height: none !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    overflow: visible !important;
+    border-top: 1px solid #e2e8f0;
+  }
+  .accordion-print-expand-all .accordion-item {
+    margin-bottom: 20px !important;
+    break-inside: avoid;
+    border: 1px solid #e2e8f0 !important;
+    box-shadow: none !important;
+    background: white !important;
+  }
+  .accordion-print-expand-all {
+    /* Hide interactive elements not needed on paper */
+  }
+  .accordion-print-expand-all .accordion-arrow,
+  .accordion-print-expand-all .accordion-search,
+  .accordion-print-expand-all .accordion-controls,
+  .accordion-print-expand-all .accordion-quick-actions,
+  .accordion-print-expand-all .accordion-lock-overlay,
+  .accordion-print-expand-all .accordion-search-heatmap,
+  .accordion-print-expand-all .accordion-action-button {
+    display: none !important;
+  }
+  .accordion-print-expand-all .accordion-header {
+    background: #f8fafc !important;
+    color: black !important;
+    padding: 12px !important;
+  }
+  .accordion-print-expand-all .accordion-header-sparkline {
+    display: inline-block !important;
+    opacity: 1 !important;
+  }
+}
+/* Radiant/Glass Print Adjustments */
+@media print {
+  .accordion-theme-radiant.accordion-print-expand-all,
+  .accordion-theme-glass.accordion-print-expand-all {
+    background: white !important;
+    color: black !important;
+  }
+  .accordion-theme-radiant.accordion-print-expand-all .accordion-header,
+  .accordion-theme-glass.accordion-print-expand-all .accordion-header {
+    color: black !important;
+    background: #f1f5f9 !important;
+  }
+  .accordion-theme-radiant.accordion-print-expand-all .accordion-title,
+  .accordion-theme-glass.accordion-print-expand-all .accordion-title {
+    color: black !important;
+  }
+}
+
+/* ── End Elite Tier ────────────────────────────────────────────────────── */
+/* ── Industrial Sovereignty: Collaboration & Focus ──────────────────── */
+/* Fullscreen Portal Reader */
+.accordion-portal-reader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  animation: portal-glide-up 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+  padding: 40px;
+  overflow-y: auto;
+}
+.accordion-portal-reader .portal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e2e8f0;
+  padding-bottom: 24px;
+  margin-bottom: 40px;
+}
+.accordion-portal-reader .portal-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+.accordion-portal-reader .portal-title {
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: #0f172a;
+}
+.accordion-portal-reader .portal-close-toggle::part(button) {
+  min-width: 148px;
+  padding: 0.8rem 1rem;
+  border-radius: 999px;
+  border: 1px solid #cbd5e1;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  color: #0f172a;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+  font-weight: 700;
+}
+.accordion-portal-reader .portal-close {
+  background: #f1f5f9;
+  border: none;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.accordion-portal-reader .portal-close:hover {
+  background: #ef4444;
+  color: white;
+  transform: rotate(90deg);
+}
+.accordion-portal-reader .portal-content {
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+.accordion-portal-reader .portal-meta {
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  color: #64748b;
+  font-weight: 700;
+  margin-bottom: 24px;
+}
+.accordion-portal-reader .portal-body {
+  font-size: 18px;
+  line-height: 1.8;
+  color: #334155;
+}
+.accordion-portal-reader .portal-body p {
+  margin-bottom: 1.5em;
+}
+
+/* Collaborator Avatars */
+.accordion-collaborators {
+  display: flex;
+  margin-right: 12px;
+}
+.accordion-collaborators .presence-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid white;
+  margin-left: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 800;
+  color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+  cursor: pointer;
+}
+.accordion-collaborators .presence-avatar:first-child {
+  margin-left: 0;
+}
+.accordion-collaborators .presence-avatar:hover {
+  transform: translateY(-4px) scale(1.1);
+  z-index: 10;
+}
+.accordion-collaborators .presence-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* AI Briefing Tooltip */
+.accordion-ai-briefing {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 280px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(10px);
+  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.accordion-ai-briefing .briefing-list {
+  margin: 0;
+  padding: 0 0 0 16px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #475569;
+}
+.accordion-ai-briefing .briefing-list li {
+  margin-bottom: 8px;
+}
+
+.accordion-title:hover + .accordion-ai-briefing {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes portal-glide-up {
+  from {
+    transform: translateY(100vh);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+/* Dark/Glass adjustments */
+.accordion-theme-radiant .accordion-portal-reader {
+  background: #0f172a;
+}
+.accordion-theme-radiant .accordion-portal-reader .portal-title,
+.accordion-theme-radiant .accordion-portal-reader .portal-body {
+  color: white;
+}
+.accordion-theme-radiant .accordion-portal-reader .portal-header {
+  border-color: #1e293b;
+}
+.accordion-theme-radiant .accordion-portal-reader .portal-close {
+  background: #1e293b;
+  color: white;
+}
+.accordion-theme-radiant .accordion-portal-reader .portal-close-toggle::part(button) {
+  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
+  border-color: #334155;
+  color: #e2e8f0;
+  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
+}
+
+.accordion-theme-radiant .accordion-ai-briefing {
+  background: #1e293b;
+  border-color: #334155;
+  color: white;
+}
+.accordion-theme-radiant .accordion-ai-briefing .briefing-list {
+  color: #cbd5e1;
+}
+
+/* ── End Industrial Sovereignty ────────────────────────────────────────── */
+/* ── Sovereign Finale: Audio-Visual Intelligence ────────────────────── */
+/* Streaming Log Terminal */
+.accordion-streaming-terminal {
+  background: #020617;
+  border-radius: 8px;
+  border: 1px solid #1e293b;
+  margin-bottom: 20px;
+  overflow: hidden;
+  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
+}
+.accordion-streaming-terminal .terminal-header {
+  background: #1e293b;
+  padding: 6px 16px;
+  font-size: 10px;
+  font-weight: 800;
+  color: #94a3b8;
+  letter-spacing: 0.1em;
+}
+.accordion-streaming-terminal .terminal-body {
+  height: 180px;
+  overflow-y: auto;
+  padding: 12px;
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  scroll-behavior: smooth;
+}
+.accordion-streaming-terminal .terminal-line {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 4px;
+  border-left: 2px solid transparent;
+  transition: all 0.2s ease;
+}
+.accordion-streaming-terminal .terminal-line:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-left-color: #3b82f6;
+}
+.accordion-streaming-terminal .line-timestamp {
+  color: #64748b;
+  white-space: nowrap;
+}
+.accordion-streaming-terminal .line-msg {
+  color: #cbd5e1;
+  word-break: break-all;
+}
+
+/* Voice Visualizer Action */
+.quick-action-btn.voice-btn.active {
+  background: #ef4444 !important;
+  color: white !important;
+  animation: voice-pulse 1.5s infinite ease-in-out;
+  box-shadow: 0 0 15px #ef4444;
+}
+
+@keyframes voice-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.3);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+/* Teleport Link Header */
+.accordion-teleport-link {
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  color: #3b82f6;
+  font-size: 9px;
+  font-weight: 800;
+  padding: 2px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+}
+.accordion-teleport-link:hover {
+  background: #3b82f6;
+  color: white;
+}
+
+/* Holographic Perspective Enhancement */
+.accordion-item {
+  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
+  transform-origin: top center;
+}
+
+/* ── End Sovereign Finale ─────────────────────────────────────────────── */