/* ============================================ */
/* YESPER UI ILLUSTRATIONS                       */
/* ============================================ */
/* Internal canvas is always 600×600. The wrapper
   is responsive and the inner illustration is
   scaled via JavaScript transform to fit. */

.scale-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.scale-wrapper > .illustration {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  /* scale set via JS */
}

.illustration {
  width: 600px;
  height: 600px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================ */
/* BACKGROUNDS                                   */
/* ============================================ */

.ill-bg-sand {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(255, 242, 226, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(235, 212, 188, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(210, 180, 150, 0.35) 0%, transparent 65%),
    #F4EADF;
}
.ill-bg-warm-grey {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(225, 228, 232, 0.6) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(210, 195, 180, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(165, 155, 145, 0.4) 0%, transparent 65%),
    #D8D4CC;
}
.ill-bg-cream {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(255, 248, 225, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(240, 200, 180, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(205, 170, 120, 0.4) 0%, transparent 65%),
    #EFE8D9;
}
.ill-bg-sage {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(236, 248, 244, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(200, 230, 220, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(170, 210, 200, 0.4) 0%, transparent 65%),
    #E1F0EB;
}
.ill-bg-slate {
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(220, 232, 245, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 50%, rgba(185, 195, 212, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(155, 170, 190, 0.45) 0%, transparent 65%),
    #C8CFD8;
}

/* Grain texture */
.illustration::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* ============================================ */
/* UI CONTENT CONTAINER                          */
/* ============================================ */

.ui-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px;
  box-sizing: border-box;
}

/* ============================================ */
/* CARDS                                         */
/* ============================================ */

.ui-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 8px rgba(255, 255, 255, 0.18),
    0 14px 50px rgba(30, 20, 10, 0.09),
    0 4px 14px rgba(30, 20, 10, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  color: #1A1A1A;
}
.ui-card-stacked {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 255, 255, 0.2),
    0 10px 30px rgba(30, 20, 10, 0.08),
    0 3px 10px rgba(30, 20, 10, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  color: #1A1A1A;
}

/* ============================================ */
/* 1. LIBRARIAN                                  */
/* ============================================ */

.ill-librarian .ui-content {
  padding: 50px;
}
.ill-librarian .librarian-card {
  width: 100%;
  max-width: 460px;
  padding: 30px 32px 28px 32px;
}
.ill-librarian .librarian-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.ill-librarian .librarian-icon {
  width: 42px;
  height: 50px;
  background: #E85D4F;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.ill-librarian .librarian-meta {
  flex: 1;
  min-width: 0;
}
.ill-librarian .librarian-filename {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ill-librarian .librarian-caption {
  font-size: 14px;
  color: #8B8B8B;
}
.ill-librarian .librarian-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 22px 0;
}
.ill-librarian .librarian-body {
  font-size: 18px;
  line-height: 1.6;
  color: #1A1A1A;
  margin-bottom: 0;
}
.ill-librarian .librarian-body .highlight {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 10%,
    #E5D4F0 10%,
    #E5D4F0 95%,
    transparent 95%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Stage wrapper — relative anchor for the breakout button */
.lib-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  justify-content: center;
}
/* Detached "View in document" pill — floats past the bottom-right of the main card */
.ill-librarian .librarian-breakout {
  bottom: -28px;
  right: -10px;
}
.ill-librarian .librarian-btn {
  background: #FFFFFF;
  color: #1A1A1A;
  padding: 15px 24px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 20px 40px rgba(30, 20, 10, 0.14),
    0 4px 10px rgba(30, 20, 10, 0.06);
  white-space: nowrap;
}
.ill-librarian .librarian-btn-icon {
  width: 18px;
  height: 18px;
  color: #8B8B8B;
  flex-shrink: 0;
}

/* ============================================ */
/* 2. ROUTINES                                   */
/* ============================================ */

.ill-routines .routines-ui {
  justify-content: flex-start;
  align-items: center;
  padding: 80px 0 80px 80px;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
.ill-routines .routines-wrapper {
  width: 108%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ill-routines .routines-card {
  padding: 22px 24px;
  width: 100%;
}
.ill-routines .routines-step-label {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 14px;
}
.ill-routines .routines-pills {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}
.ill-routines .routines-pill {
  background: rgba(245, 241, 234, 0.85);
  border: 1px solid rgba(232, 226, 212, 0.8);
  padding: 10px 15px;
  border-radius: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.ill-routines .routines-play-icon {
  width: 22px;
  height: 22px;
  background: #1A1A1A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ill-routines .routines-play-icon::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid white;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-left: 2px;
}
.ill-routines .routines-template-icon {
  width: 22px;
  height: 22px;
  background: #E8A460;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ill-routines .routines-template-icon::before {
  content: '';
  width: 12px;
  height: 11px;
  background:
    linear-gradient(white, white) top/100% 1.5px no-repeat,
    linear-gradient(white, white) bottom/100% 1.5px no-repeat,
    linear-gradient(white, white) left/1.5px 100% no-repeat,
    linear-gradient(white, white) right/1.5px 100% no-repeat,
    linear-gradient(white, white) center/100% 1.5px no-repeat;
}
.ill-routines .routines-text {
  font-size: 16px;
  line-height: 1.6;
  color: #1A1A1A;
}
.ill-routines .routines-step-ref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #E5D4F0;
  color: #6B4A9E;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  margin: 0 2px;
  vertical-align: baseline;
}
.ill-routines .routines-step-ref-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px dashed #6B4A9E;
}

/* ============================================ */
/* 3. ORGANIZATIONAL MEMORY                      */
/* ============================================ */

.ill-memory .memory-card {
  width: 100%;
  max-width: 440px;
  padding: 30px 30px;
}
.ill-memory .memory-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ill-memory .memory-icon {
  width: 26px;
  height: 26px;
  background: #F0EBF8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ill-memory .memory-icon svg {
  width: 15px;
  height: 15px;
}
.ill-memory .memory-label {
  font-size: 15px;
  color: #4A4A4A;
  font-weight: 600;
}
.ill-memory .memory-project {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 22px;
  line-height: 1.25;
}
.ill-memory .memory-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin-bottom: 22px;
}
.ill-memory .memory-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}
.ill-memory .memory-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ill-memory .memory-section-label {
  font-size: 12px;
  color: #8B8B8B;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ill-memory .memory-section-body {
  font-size: 17px;
  color: #1A1A1A;
  font-weight: 500;
  line-height: 1.3;
}
.ill-memory .memory-footer {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  color: #8B8B8B;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ill-memory .memory-footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4A8A5F;
}
/* Org-memory "noted" breakout: a remembered rule from the org level */
.ill-memory .mem-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: center;
}
.ill-memory .mem-noted {
  bottom: -32px;
  right: -30px;
  width: 282px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 22px 44px rgba(30, 20, 10, 0.16);
}
.ill-memory .mem-noted-tag {
  font-size: 14px;
  color: #4A4A4A;
  font-weight: 600;
  margin-bottom: 6px;
}
.ill-memory .mem-noted-body {
  font-size: 16px;
  color: #1A1A1A;
  font-weight: 500;
  line-height: 1.35;
}

/* ============================================ */
/* PLACEHOLDER ILLUSTRATIONS                     */
/* ============================================ */
/* Same 600×600 structure but with no UI inside.
   Used for the 5 features we haven't designed
   yet. They still participate in scaling but
   have no JS animation attached. */

.ill-placeholder .ui-content::after {
  content: 'Coming soon';
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
  letter-spacing: 0.3px;
}

/* ============================================ */
/* ANIMATIONS                                    */
/* ============================================ */

.animate .librarian-card {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.animate .librarian-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .librarian-body .highlight {
  background-size: 0% 100%;
  transition: background-size 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate .librarian-body .highlight.sweep {
  background-size: 100% 100%;
}
.animate .librarian-breakout {
  opacity: 0;
  transform: translate(-18px, -18px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .librarian-breakout.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.animate .routines-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.animate .routines-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate .memory-section {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate .memory-section.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate .memory-footer {
  opacity: 0;
  transition: opacity 0.7s ease-out;
}
.animate .memory-footer.visible {
  opacity: 1;
}
.animate .ill-memory .mem-noted {
  opacity: 0;
  transform: translate(10px, 16px) scale(0.96);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .ill-memory .mem-noted.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.animate .memory-footer-dot {
  animation: memory-pulse 2.4s ease-in-out infinite;
}
@keyframes memory-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}

/* ============================================ */
/* SHARED — query card pattern                   */
/* (used by Multi-source + Domain knowledge)     */
/* ============================================ */
.query-card {
  width: 100%;
  max-width: 430px;
  padding: 28px 28px 24px 28px;
}
.query-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.query-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #8B8B8B;
  margin-top: 1px;
}
.query-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #1A1A1A;
}
.query-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 18px 0;
}
.query-label {
  font-size: 13px;
  color: #8B8B8B;
  font-weight: 500;
  margin-bottom: 14px;
}
.query-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.query-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 241, 234, 0.85);
  border: 1px solid rgba(232, 226, 212, 0.8);
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
  white-space: nowrap;
}
.query-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #8B8B8B;
}
.pill-sgu    .query-pill-dot { background: #B38A5A; }
.pill-files  .query-pill-dot { background: #5A7FB3; }
.pill-smhi   .query-pill-dot { background: #6FA8C7; }
.pill-tv     .query-pill-dot { background: #D19656; }

.query-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.query-btn {
  background: rgba(245, 241, 234, 0.9);
  color: #3A3A3A;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.query-ama-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
  color: #8B8B8B;
  display: flex;
  align-items: center;
  gap: 8px;
}
.query-ama-code {
  font-weight: 600;
  color: #6B4A9E;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* --- Domain knowledge zoom (scoped) --- */
.ill-domain .query-card {
  max-width: 440px;
  padding: 32px 32px 28px 32px;
}
.ill-domain .query-icon {
  width: 24px;
  height: 24px;
}
.ill-domain .query-text {
  font-size: 17px;
}
.ill-domain .query-label {
  font-size: 14px;
  margin-bottom: 16px;
}
.ill-domain .query-pill {
  padding: 9px 15px;
  border-radius: 22px;
  font-size: 15px;
  gap: 9px;
}
.ill-domain .query-pill-dot {
  width: 9px;
  height: 9px;
}
.ill-domain .query-ama-footer {
  margin-top: 22px;
  padding-top: 18px;
  font-size: 14px;
  gap: 10px;
}
.ill-domain .query-ama-code {
  font-size: 14px;
}

/* --- Multi-source research zoom (scoped) --- */
.ill-multisearch .query-card {
  max-width: 440px;
  padding: 32px 32px 28px 32px;
}
.ill-multisearch .query-icon {
  width: 24px;
  height: 24px;
}
.ill-multisearch .query-text {
  font-size: 17px;
}
.ill-multisearch .query-label {
  font-size: 15px;
  margin-bottom: 16px;
}
.ill-multisearch .query-pill {
  padding: 9px 15px;
  border-radius: 22px;
  font-size: 15px;
  gap: 9px;
}
.ill-multisearch .query-pill-dot {
  width: 9px;
  height: 9px;
}
.ill-multisearch .query-action {
  margin-top: 22px;
}
.ill-multisearch .query-btn {
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 14px;
}
/* Stage — anchor for the breakout pill */
.ms-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: center;
}
/* Detached action pills — two next-step suggestions, stacked vertically
   off the bottom-right corner of the card. */
.ill-multisearch .ms-breakout {
  bottom: -14px;
  right: -10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.ill-multisearch .ms-btn {
  background: #FFFFFF;
  color: #1A1A1A;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  width: 240px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 20px 40px rgba(30, 20, 10, 0.16),
    0 4px 10px rgba(30, 20, 10, 0.08);
  white-space: nowrap;
}
.ill-multisearch .ms-btn-icon {
  width: 18px;
  height: 18px;
  color: #8B8B8B;
  flex-shrink: 0;
}

/* Animation — pills slide in from bottom-right, staggered */
.animate .ill-multisearch .ms-btn {
  opacity: 0;
  transform: translate(-18px, -14px) scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-multisearch .ms-btn.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ============================================ */
/* SHARED — status circle (Reviewer + Checklist) */
/* ============================================ */
.status-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.status-circle svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}
.status-pass { background: #D4E8D8; color: #3A7A50; }
.status-warn { background: #F4E4C8; color: #9B6F2B; }
.status-fail { background: #F2D4D2; color: #A84338; }

/* ============================================ */
/* REVIEWER                                      */
/* ============================================ */
.reviewer-card {
  width: 100%;
  max-width: 430px;
  padding: 28px 28px;
}
.reviewer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.reviewer-header-icon {
  width: 22px;
  height: 22px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.reviewer-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
}
.reviewer-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 20px 0;
}
.reviewer-findings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.reviewer-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.reviewer-label {
  color: #1A1A1A;
  font-weight: 500;
}
.reviewer-status {
  font-size: 12px;
  font-weight: 500;
}
.reviewer-row.reviewer-pass .reviewer-status { color: #3A7A50; }
.reviewer-row.reviewer-warn .reviewer-status { color: #9B6F2B; }
.reviewer-row.reviewer-fail .reviewer-status { color: #A84338; }
.reviewer-summary {
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
  color: #8B8B8B;
}

/* Scoped zoom for sandbox Reviewer */
.ill-reviewer .reviewer-card {
  max-width: 460px;
  padding: 30px 30px;
}
.ill-reviewer .reviewer-header { margin-bottom: 22px; gap: 14px; }
.ill-reviewer .reviewer-header-icon { width: 24px; height: 24px; }
.ill-reviewer .reviewer-title { font-size: 17px; }
.ill-reviewer .reviewer-findings { gap: 18px; margin-bottom: 22px; }
.ill-reviewer .reviewer-row { font-size: 16px; grid-template-columns: 24px 1fr auto; gap: 14px; }
.ill-reviewer .reviewer-status { font-size: 14px; }
.ill-reviewer .reviewer-summary { font-size: 13px; padding-top: 18px; }

/* Reviewer stage + source-evidence breakout */
.ill-reviewer .reviewer-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  justify-content: center;
}
/* Breakout anchors to the Pass row (top of the findings area).
   Card is ~460px + centred in 600px = ~70px right margin.
   Offset sits just past card edge, vertically aligned with first row. */
.ill-reviewer .reviewer-sources {
  top: 128px;
  right: -44px;
  width: 248px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 22px 44px rgba(30, 20, 10, 0.16);
}
/* Speech-bubble pointer on top edge, tip points up toward the "Pass" label */
.ill-reviewer .reviewer-sources::before {
  content: '';
  position: absolute;
  top: -9px;
  right: 82px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #FFFFFF;
  filter: drop-shadow(0 -2px 1px rgba(30, 20, 10, 0.05));
}
.ill-reviewer .reviewer-sources-header {
  font-size: 13px;
  color: #8B8B8B;
  font-weight: 500;
  margin-bottom: 14px;
}
.ill-reviewer .reviewer-source-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 15px;
  color: #1A1A1A;
  padding: 8px 0;
}
.ill-reviewer .reviewer-source-row + .reviewer-source-row {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ill-reviewer .reviewer-source-icon {
  width: 20px;
  height: 20px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.ill-reviewer .reviewer-source-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================ */
/* AI AGENTS                                     */
/* ============================================ */
.agents-card {
  width: 100%;
  max-width: 480px;
  padding: 26px 28px;
}
.agents-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.agents-header-icon {
  width: 20px;
  height: 20px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.agents-title {
  font-size: 13px;
  color: #8B8B8B;
  font-weight: 500;
}
.agents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.agent-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 16px 12px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
  transition: background 0.4s, border-color 0.4s;
}
.agent-card.selected {
  background: rgba(255, 246, 224, 0.95);
  border-color: #E8A460;
}
.agent-badge {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: #E8A460;
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.agent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.agent-avatar svg {
  width: 16px;
  height: 16px;
}
.agent-avatar-yesper { background: #F5F1EA; color: #8B8B8B; }
.agent-avatar-design { background: #D4E8D8; color: #3A7A50; }
.agent-avatar-site   { background: #F8DEBF; color: #B8621E; }
.agent-avatar-sus    { background: #D1E7E0; color: #2E7B5F; }
.agent-name {
  font-size: 12px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.2;
}
.agent-role {
  font-size: 10px;
  color: #8B8B8B;
  line-height: 1.3;
}
.agents-more {
  font-size: 11px;
  color: #AAAAAA;
  text-align: center;
  padding-top: 8px;
}

/* ============================================ */
/* ANIMATIONS                                    */
/* ============================================ */

/* --- Shared: query-card pattern --- */
.animate .query-card .query-header,
.animate .query-card .query-label,
.animate .query-card .query-action,
.animate .query-card .query-ama-footer {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .query-card .query-header.visible,
.animate .query-card .query-label.visible,
.animate .query-card .query-action.visible,
.animate .query-card .query-ama-footer.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .query-card .query-pill {
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate .query-card .query-pill.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Reviewer --- */
.animate .reviewer-header,
.animate .reviewer-summary {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .reviewer-header.visible,
.animate .reviewer-summary.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .reviewer-row {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate .reviewer-row.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate .ill-reviewer .reviewer-sources {
  opacity: 0;
  transform: translate(-24px, -24px) scale(0.96);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .ill-reviewer .reviewer-sources.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.animate .ill-reviewer .reviewer-source-row {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .ill-reviewer .reviewer-source-row.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Agents --- */
.animate .agents-header,
.animate .agents-more {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .agents-header.visible,
.animate .agents-more.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .agent-card {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out, background 0.4s, border-color 0.4s;
}
.animate .agent-card.visible {
  opacity: 1;
  transform: scale(1);
}
.animate .agent-card .agent-badge {
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .agent-card.selected.visible .agent-badge {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ============================================ */
/* CO-EDITING                                    */
/* ============================================ */
.ce-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 28px;
  position: relative;
}
.ce-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 20px;
}
.ce-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #1A1A1A;
  padding-bottom: 4px;
}
.ce-selection {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 10%,
    #E5D4F0 10%,
    #E5D4F0 95%,
    transparent 95%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
  margin: 0 -2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ce-actions {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 155px;
  padding: 10px 12px;
}
.ce-actions-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ce-sparkle {
  width: 13px;
  height: 13px;
  color: #6B4A9E;
  flex-shrink: 0;
}
.ce-actions-label {
  font-size: 10px;
  color: #8B8B8B;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ce-actions-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ce-action {
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 12px;
  color: #1A1A1A;
  font-weight: 500;
  cursor: pointer;
}
.ce-action.highlighted {
  background: rgba(229, 212, 240, 0.5);
  color: #6B4A9E;
}

/* ============================================ */
/* INTEGRATIONS                                  */
/* ============================================ */
.integrations-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 28px;
}
.integrations-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.integrations-header-icon {
  width: 22px;
  height: 22px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.integrations-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  flex: 1;
}
.integrations-add {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.04);
  color: #6B6B6B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.integrations-add svg {
  width: 14px;
  height: 14px;
}
.integrations-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 18px 0;
}
.integrations-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.integrations-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.integrations-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.int-sp   { background: #5A7FB3; }
.int-t    { background: #6B5CA3; }
.int-od   { background: #5A9FB3; }
.int-dx   { background: #2E7D8A; }
.int-sgu  { background: #9B7A4F; }
.int-smhi { background: #6FA5C7; }

/* Scoped zoom for sandbox Integrations */
.ill-integrations .integrations-card {
  max-width: 400px;
  padding: 30px 30px;
}
.ill-integrations .integrations-header { margin-bottom: 24px; gap: 14px; }
.ill-integrations .integrations-header-icon { width: 24px; height: 24px; }
.ill-integrations .integrations-title { font-size: 17px; }
.ill-integrations .integrations-add { width: 30px; height: 30px; border-radius: 8px; }
.ill-integrations .integrations-add svg { width: 16px; height: 16px; }
.ill-integrations .integrations-divider { margin-bottom: 20px; }
.ill-integrations .integrations-rows { gap: 18px; }
.ill-integrations .integrations-row {
  font-size: 16px;
  grid-template-columns: 30px 1fr auto;
  gap: 14px;
}
.ill-integrations .integrations-badge {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 10px;
  letter-spacing: 0.35px;
}
.ill-integrations .integrations-status { font-size: 14px; gap: 7px; }
.ill-integrations .integrations-status-dot {
  width: 7px;
  height: 7px;
  position: relative;
}
/* Live ring-pulse so the row reads as a live signal, not a static label */
.ill-integrations .integrations-status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #4A8A5F;
  opacity: 0.5;
  animation: int-dot-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes int-dot-pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Stage + "new file" breakout */
.ill-integrations .int-stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
}
.ill-integrations .int-newfile {
  bottom: -36px;
  right: -20px;
  width: 276px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 22px 44px rgba(30, 20, 10, 0.16);
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
}
.ill-integrations .int-newfile-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ill-integrations .int-newfile-body {
  min-width: 0;
}
.ill-integrations .int-newfile-name {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.ill-integrations .int-newfile-meta {
  font-size: 12px;
  color: #8B8B8B;
  font-weight: 500;
}
.integrations-name {
  color: #1A1A1A;
  font-weight: 500;
}
.integrations-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8B8B8B;
}
.integrations-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4A8A5F;
}

/* ============================================ */
/* BACKGROUND EXECUTION                          */
/* ============================================ */
.bgexec-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 28px;
}
.bgexec-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.bgexec-header-icon {
  width: 22px;
  height: 22px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.bgexec-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
}
.bgexec-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 18px 0;
}
.bgexec-tasks {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bgexec-task-label {
  font-size: 13px;
  color: #1A1A1A;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bgexec-task-percent {
  font-size: 12px;
  color: #8B8B8B;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bgexec-progress {
  width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.bgexec-progress-fill {
  height: 100%;
  background: #B38A5A;
  border-radius: 3px;
  width: 0%;
  transition: width 1.8s cubic-bezier(0.3, 0, 0.2, 1);
}
.bgexec-task-done {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  padding-top: 4px;
}
.bgexec-done-label {
  color: #1A1A1A;
  font-weight: 500;
}
.bgexec-done-status {
  font-size: 12px;
  color: #3A7A50;
  font-weight: 500;
}
.bgexec-done-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #D4E8D8;
  color: #3A7A50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bgexec-done-circle svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* ============================================ */
/* AI APPS                                       */
/* ============================================ */
.aiapps-card {
  width: 100%;
  max-width: 420px;
  padding: 32px 32px;
}
.aiapps-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.aiapps-header-icon {
  width: 26px;
  height: 26px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.aiapps-title {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A1A;
}
.aiapps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aiapps-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.55);
}
.aiapps-name-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.aiapps-name {
  font-size: 15px;
  color: #1A1A1A;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.aiapps-sub {
  font-size: 12px;
  color: #8B8B8B;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiapps-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.avatar-kr { background: #C94F4A; }
.avatar-pe { background: #2F3E5A; }
.avatar-ab { background: #3E6B5A; }
.aiapps-btn {
  background: rgba(245, 241, 234, 0.95);
  color: #3A3A3A;
  padding: 7px 12px 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aiapps-btn-icon {
  width: 10px;
  height: 10px;
  opacity: 0.65;
  flex-shrink: 0;
}
.aiapps-btn-primary {
  background: rgba(74, 138, 95, 0.14);
  color: #2E6A44;
}
.aiapps-btn-primary .aiapps-btn-icon {
  opacity: 0.85;
}

/* ============================================ */
/* TEMPLATES                                     */
/* ============================================ */
.templates-card {
  width: 100%;
  max-width: 460px;
  padding: 32px 32px;
}
.templates-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.templates-header-icon {
  width: 26px;
  height: 26px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.templates-title {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A1A;
}
.templates-subtitle {
  font-size: 14px;
  color: #8B8B8B;
  font-weight: 500;
  margin: 0 0 22px 38px;
}
.templates-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 0 22px 0;
}
.templates-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.templates-field {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: end;
}
.templates-label {
  color: #8B8B8B;
  font-weight: 500;
  font-size: 14px;
  padding-bottom: 5px;
}
.templates-slot {
  display: block;
  min-height: 24px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
  padding-bottom: 4px;
}
.templates-value {
  color: #1A1A1A;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  display: inline-block;
}
.templates-footer {
  padding: 14px 16px;
  background: rgba(212, 232, 216, 0.55);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #2E6540;
  font-weight: 600;
}
.templates-footer-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4A8A5F;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.templates-footer-check svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

/* ============================================ */
/* ANIMATIONS (batch 3)                          */
/* ============================================ */

/* --- Co-editing --- */
.animate .ce-title,
.animate .ce-line {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .ce-title.visible,
.animate .ce-line.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .ce-selection {
  background-size: 0% 100%;
  transition: background-size 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate .ce-selection.sweep {
  background-size: 100% 100%;
}
.animate .ce-actions {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ce-actions.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.animate .ce-action {
  transition: background 0.3s ease-out, color 0.3s ease-out;
}

/* --- Integrations --- */
.animate .integrations-header {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .integrations-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .integrations-row {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .integrations-row.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate .integrations-status-dot {
  animation: int-pulse 2.4s ease-in-out infinite;
}
@keyframes int-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
/* Inside the zoomed sandbox, the ring-pulse (::after) handles the "live" feel;
   kill the dot-scale pulse so they don't compete. */
.animate .ill-integrations .integrations-status-dot {
  animation: none;
  opacity: 1;
  transform: none;
}
.animate .ill-integrations .int-newfile {
  opacity: 0;
  transform: translate(12px, 16px) scale(0.96);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .ill-integrations .int-newfile.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* --- Background execution --- */
.animate .bgexec-header,
.animate .bgexec-task-done {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .bgexec-header.visible,
.animate .bgexec-task-done.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .bgexec-task {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate .bgexec-task.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .bgexec-progress-fill.visible {
  width: var(--progress, 0%);
}

/* --- AI apps --- */
.animate .aiapps-header {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .aiapps-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .aiapps-row {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .aiapps-row.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Templates --- */
.animate .templates-header,
.animate .templates-subtitle,
.animate .templates-footer {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .templates-header.visible,
.animate .templates-subtitle.visible,
.animate .templates-footer.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .templates-field {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .templates-field.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .templates-value {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.animate .templates-value.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate .librarian-card,
  .animate .librarian-breakout,
  .animate .routines-card,
  .animate .memory-section,
  .animate .memory-footer,
  .animate [class*="visible"],
  .animate .query-header, .animate .query-label, .animate .query-pill,
  .animate .query-action, .animate .query-ama-footer,
  .animate .reviewer-header, .animate .reviewer-row, .animate .reviewer-summary,
  .animate .agents-header, .animate .agent-card, .animate .agent-badge, .animate .agents-more,
  .animate .cl2-header, .animate .cl2-content-section, .animate .cl2-cat, .animate .cl2-req,
  .animate .ce-title, .animate .ce-line, .animate .ce-actions,
  .animate .integrations-header, .animate .integrations-row,
  .animate .bgexec-header, .animate .bgexec-task, .animate .bgexec-task-done,
  .animate .aiapps-header, .animate .aiapps-tabs, .animate .aiapps-row,
  .animate .templates-header, .animate .templates-field, .animate .templates-footer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .animate .librarian-body .highlight {
    background-size: 100% 100% !important;
    transition: none !important;
  }
  .animate .memory-footer-dot {
    animation: none !important;
  }
  .animate .ce-selection {
    background-size: 100% 100% !important;
  }
  .animate .bgexec-progress-fill {
    width: var(--progress, 0%) !important;
  }
  .animate .integrations-status-dot {
    animation: none !important;
  }
}

/* ============================================ */
/* SITE INTEGRATION                              */
/* ============================================ */
/* When a .showcase-image card holds an illustration
   scale-wrapper, switch its aspect-ratio from the
   default 3/4 to 1/1 so the square illustration
   fills the tile cleanly. */
.showcase-image:has(.scale-wrapper) {
  aspect-ratio: 1 / 1;
  background-color: transparent;
}

/* ============================================ */
/* CHECKLISTS — browse categories                */
/* ============================================ */
.cl2-card {
  width: 100%;
  max-width: 340px;
  padding: 0;
  overflow: hidden;
}
.cl2-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cl2-header-icon-wrap {
  width: 22px;
  height: 22px;
  color: #8B8B8B;
  flex-shrink: 0;
}
.cl2-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
}
.cl2-body {
  display: grid;
  grid-template-columns: 136px 1fr;
}
.cl2-sidebar {
  padding: 16px 18px 16px 16px;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl2-cat {
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #1A1A1A;
  font-weight: 500;
  white-space: nowrap;
}
.cl2-cat.selected {
  background: rgba(0, 0, 0, 0.06);
}
.cl2-content {
  padding: 16px 18px 18px 16px;
}
.cl2-content-section {
  font-size: 11px;
  color: #8B8B8B;
  font-weight: 500;
  margin-bottom: 12px;
}
.cl2-reqs {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cl2-req {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(245, 241, 234, 0.6);
  font-size: 12px;
  color: #1A1A1A;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl2-req-state {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl2-req.done .cl2-req-state {
  background: #D4E8D8;
  border-color: transparent;
  color: #3A7A50;
}
.cl2-req-state svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.8;
  display: none;
}
.cl2-req.done .cl2-req-state svg {
  display: block;
}

/* --- Animations --- */
.animate .cl2-header {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .cl2-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .cl2-content-section {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .cl2-content-section.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .cl2-cat {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.55s ease-out,
              transform 0.55s ease-out,
              background-color 0.4s ease-out;
}
.animate .cl2-cat.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate .cl2-req {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.animate .cl2-req.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================ */
/* SANDBOX SHARED HELPERS                        */
/* ============================================ */
/* Used for break-the-square redesigns. Scoped
   to the sandbox stylesheet only. */

/* Peel a sub-card out of its parent. Anchor it
   absolutely; combine with parent `position:
   relative` and card-specific offsets. */
.ill-breakout {
  position: absolute;
  z-index: 2;
}

/* Layered-stack primitives for cards where one
   hero card sits on top of a few muted back
   cards (used for AI Agents, Checklists). */
.ill-layer-stack {
  position: relative;
}
.ill-layer-back {
  position: absolute;
  opacity: 0.92;
  z-index: 1;
}
.ill-layer-top {
  position: relative;
  z-index: 3;
}

/* ============================================ */
/* CHECKLISTS (sandbox redesign)                 */
/* ============================================ */

.ill-checklists .ui-content {
  padding: 40px;
  align-items: center;
  justify-content: center;
}
.cl2-stage {
  position: relative;
  width: 500px;
  height: 360px;
}
/* Back card — the requirements list */
.ill-checklists .cl2-reqs-card {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}
.ill-checklists .cl2-header {
  padding: 22px 24px;
  gap: 14px;
}
.ill-checklists .cl2-header-icon-wrap {
  width: 26px;
  height: 26px;
}
.ill-checklists .cl2-title {
  font-size: 18px;
}
.ill-checklists .cl2-content {
  padding: 18px 22px 22px;
}
.ill-checklists .cl2-content-section {
  font-size: 13px;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.ill-checklists .cl2-reqs {
  gap: 9px;
}
.ill-checklists .cl2-req {
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 9px;
}
.ill-checklists .cl2-req-state {
  width: 22px;
  height: 22px;
}
.ill-checklists .cl2-req-state svg {
  width: 12px;
  height: 12px;
}

/* Front card — the category sidebar, layered on
   top of the reqs card's left edge. Lifted with
   stronger shadow and slight offset. */
.ill-checklists .cl2-sidebar-card {
  position: absolute;
  top: 30px;
  left: 0;
  width: 180px;
  padding: 18px 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 24px 44px rgba(30, 20, 10, 0.14),
    0 6px 14px rgba(30, 20, 10, 0.08);
}
.cl2-sidebar-title {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8B8B8B;
  font-weight: 600;
  padding: 0 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 6px;
}
.ill-checklists .cl2-cat {
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 8px;
}
.ill-checklists .cl2-cat.selected {
  background: rgba(232, 164, 96, 0.18);
  color: #6B4A1E;
}

/* Animations — sidebar card appears first (user
   browsing), then the reqs card slides in from
   the right once Bridge is picked. */
.animate .ill-checklists .cl2-sidebar-card {
  opacity: 0;
  transform: translate(-20px, 6px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-checklists .cl2-sidebar-card.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.animate .ill-checklists .cl2-reqs-card {
  opacity: 0;
  transform: translate(28px, 0);
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-checklists .cl2-reqs-card.visible {
  opacity: 1;
  transform: translate(0, 0);
}
/* Selected category highlight fades in smoothly when
   JS toggles the class mid-sequence. */
.ill-checklists .cl2-cat.selected {
  transition: background 0.35s ease, color 0.35s ease;
}

/* ============================================ */
/* BACKGROUND EXECUTION (sandbox redesign)       */
/* ============================================ */

.ill-bgexec .ui-content {
  padding: 40px;
  align-items: center;
  justify-content: center;
}
.ill-bgexec .bgexec-stage {
  position: relative;
  width: 380px;
}
.ill-bgexec .bgexec-card {
  width: 380px;
  max-width: none;
  padding: 28px 30px 30px;
}
.ill-bgexec .bgexec-header {
  gap: 12px;
  margin-bottom: 22px;
}
.ill-bgexec .bgexec-header-icon {
  width: 26px;
  height: 26px;
}
.ill-bgexec .bgexec-title {
  font-size: 18px;
}
.ill-bgexec .bgexec-divider {
  margin-bottom: 22px;
}
.ill-bgexec .bgexec-tasks {
  gap: 22px;
}
.ill-bgexec .bgexec-task-label {
  font-size: 15px;
  margin-bottom: 10px;
}
.ill-bgexec .bgexec-task-percent {
  font-size: 14px;
}
.ill-bgexec .bgexec-progress {
  height: 6px;
}

/* Done task — peeled out bottom-right as its own
   detached card. */
.ill-bgexec .bgexec-task-done {
  position: absolute;
  right: -24px;
  bottom: -34px;
  top: auto;
  left: auto;
  width: 240px;
  padding: 14px 18px;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  z-index: 2;
}
.ill-bgexec .bgexec-done-circle {
  width: 28px;
  height: 28px;
}
.ill-bgexec .bgexec-done-circle svg {
  width: 16px;
  height: 16px;
}
.ill-bgexec .bgexec-done-label {
  font-size: 15px;
}
.ill-bgexec .bgexec-done-status {
  font-size: 13px;
}

/* Animation — peel out from the main card's
   bottom-right corner. */
.animate .ill-bgexec .bgexec-task-done {
  opacity: 0;
  transform: translate(-36px, -36px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-bgexec .bgexec-task-done.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ============================================ */
/* AI AGENTS (sandbox redesign)                  */
/* ============================================ */

.ill-agents .agents-card {
  max-width: 520px;
  padding: 30px 32px 26px;
  transform: scale(0.9);
  transform-origin: center;
}
.ill-agents .agents-header {
  margin-bottom: 24px;
  gap: 12px;
}
.ill-agents .agents-header-icon {
  width: 22px;
  height: 22px;
}
.ill-agents .agents-title {
  font-size: 15px;
}

/* 2x2 grid of agents. Hero (selected) occupies
   top-left but is scaled up and tilted forward
   so it reads as "moved toward the user". */
.ill-agents .agents-grid--lift {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
  position: relative;
}
.ill-agents .agents-grid--lift .agent-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-shadow: 0 10px 26px rgba(30, 20, 10, 0.08);
  position: relative;
  min-height: 156px;
  justify-content: center;
}
.ill-agents .agents-grid--lift .agent-avatar {
  width: 52px;
  height: 52px;
}
.ill-agents .agents-grid--lift .agent-avatar svg {
  width: 26px;
  height: 26px;
}
.ill-agents .agents-grid--lift .agent-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.ill-agents .agents-grid--lift .agent-role {
  font-size: 15px;
  color: #8A8279;
  line-height: 1.35;
}

/* Hero tile — scaled up, tilted, raised shadow. */
.ill-agents .agents-grid--lift .agent-card--hero {
  z-index: 5;
  transform-origin: center;
  transform: translate(-6px, -10px) rotate(-3deg) scale(1.12);
  background: rgba(255, 246, 224, 0.98);
  border-color: #E8A460;
  box-shadow:
    0 28px 50px rgba(30, 20, 10, 0.18),
    0 8px 16px rgba(30, 20, 10, 0.08);
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-avatar {
  width: 58px;
  height: 58px;
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-avatar svg {
  width: 30px;
  height: 30px;
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-name {
  font-size: 20px;
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-role {
  font-size: 15px;
  color: #7A6A52;
}
.ill-agents .agents-grid--lift .agent-card--hero .agent-badge {
  font-size: 11px;
  padding: 3px 10px;
  top: -10px;
  letter-spacing: 0.8px;
}

/* Avatar palettes for specialist agents (sandbox).
   agent-avatar-design / -site / -sus already
   defined above; add -contracts here. */
.agent-avatar-contracts { background: #DDDAF3; color: #5A4FB0; }
/* Hero (Design Manager) keeps the existing green
   `agent-avatar-design` palette. */

.ill-agents .agents-more {
  font-size: 14px;
  color: #6B6156;
  padding-top: 6px;
  font-weight: 500;
}

/* Animations — non-hero tiles fade up in order,
   then the hero lifts into place last. Hero's
   transform must preserve its tilt+scale. */
.animate .ill-agents .agents-grid--lift .agent-card {
  opacity: 0;
  transform: translateY(6px) scale(0.95);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out, background 0.4s, border-color 0.4s;
}
.animate .ill-agents .agents-grid--lift .agent-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.animate .ill-agents .agents-grid--lift .agent-card--hero {
  opacity: 0;
  transform: translate(-6px, -10px) rotate(-3deg) scale(0.96);
  transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.4s, border-color 0.4s;
}
.animate .ill-agents .agents-grid--lift .agent-card--hero.visible {
  opacity: 1;
  transform: translate(-6px, -10px) rotate(-3deg) scale(1.12);
}

/* ============================================ */
/* CO-EDITING (sandbox redesign)                 */
/* ============================================ */

.ill-coedit .ui-content {
  padding: 40px;
  align-items: center;
  justify-content: center;
}
.ill-coedit .ce-stage {
  position: relative;
  width: 360px;
}
.ill-coedit .ce-card {
  width: 360px;
  max-width: none;
  padding: 28px 30px 32px;
  position: relative;
}
.ill-coedit .ce-title {
  font-size: 20px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 3px;
  letter-spacing: -0.2px;
}
.ce-subtitle {
  font-size: 14px;
  color: #8A7E72;
  letter-spacing: 0.2px;
  margin-bottom: 24px;
  font-weight: 500;
}
.ill-coedit .ce-body {
  font-size: 16px;
  line-height: 1.55;
  gap: 14px;
}
/* Detach AI actions into a bottom-right breakout. */
.ill-coedit .ce-actions {
  right: -84px;
  bottom: -56px;
  top: auto;
  left: auto;
  width: 196px;
  padding: 14px 16px;
}
.ill-coedit .ce-sparkle {
  width: 20px;
  height: 20px;
}
.ill-coedit .ce-actions-label {
  font-size: 12px;
}
.ill-coedit .ce-actions-header {
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.ill-coedit .ce-actions-list {
  gap: 4px;
}
.ill-coedit .ce-action {
  padding: 8px 14px;
  font-size: 15px;
  border-radius: 7px;
}

/* Animations — sub-title fades in like the
   title. Actions translate out from the main
   card's bottom-right corner. */
.animate .ill-coedit .ce-subtitle {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate .ill-coedit .ce-subtitle.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate .ill-coedit .ce-actions {
  opacity: 0;
  transform: translate(-48px, -48px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-coedit .ce-actions.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Line fade-in shortened since the typewriter itself reads as the
   entrance — less of a slide, quicker to appear. */
.animate .ill-coedit .ce-line {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  transform: translateY(2px);
}
/* ============================================================
   HOMEPAGE PILL SIGNATURE (`.hp-sig`)
   ------------------------------------------------------------
   Homepage showcase cards render the 600×600 illustration at
   ~290px wide (scale ≈ 0.48), so the full UI-card designs are
   unreadable. For the homepage set we swap the card entirely
   for a "signature" — just a couple of glass pills carrying
   the essence of the card's idea. Scoped to
   `.showcase-grid--4`; leaves the Platform set untouched.
   ============================================================ */

.showcase-grid--4 .ui-content {
  padding: 72px;
}

.hp-sig {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  color: #1A1A1A;
}

.hp-sig--center { align-items: center; }

.hp-pill {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 30px rgba(30, 20, 10, 0.10),
    0 2px 6px rgba(30, 20, 10, 0.04);
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: #1A1A1A;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}

.hp-pill--lg { font-size: 26px; padding: 18px 26px; }
.hp-pill--sm { font-size: 18px; padding: 12px 18px; gap: 10px; }

/* Action pill — clickable-feeling variant with a trailing arrow */
.hp-pill--action {
  font-size: 18px;
  padding: 13px 20px;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 14px 30px rgba(30, 20, 10, 0.12),
    0 3px 8px rgba(30, 20, 10, 0.05);
}
.hp-pill-arrow {
  width: 16px;
  height: 16px;
  color: #8B8B8B;
  flex-shrink: 0;
}

.hp-pill-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #8B8B8B;
}
.hp-pill--lg .hp-pill-icon { width: 26px; height: 26px; }
.hp-pill--sm .hp-pill-icon { width: 18px; height: 18px; }

.hp-pill-label { color: #1A1A1A; }
.hp-pill-muted { color: #8B8B8B; font-weight: 400; }

/* Colored dot for pill variants (source chips, agents, etc.) */
.hp-pill-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status icons — rendered as a circle-chip with a check or cross */
.hp-pill-status {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.hp-pill-status svg { width: 16px; height: 16px; stroke-width: 2.4; fill: none; }
.hp-pill-status--pass { background: #3A7A50; }
.hp-pill-status--fail { background: #A84338; }
.hp-pill-status--open {
  background: transparent;
  border: 1.8px solid rgba(10, 10, 10, 0.28);
}

/* Row of chips (sources / synonyms / agents / requirement ticks) */
.hp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

.hp-chip {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 12px rgba(30, 20, 10, 0.06);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 17px;
  font-weight: 500;
  color: #1A1A1A;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hp-chip--selected {
  background: #1A1A1A;
  color: white;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 6px 18px rgba(30, 20, 10, 0.18),
    0 2px 4px rgba(30, 20, 10, 0.08);
}

/* Highlight (marker-pen style) used inside quote-pills */
.hp-hl {
  background-image: linear-gradient(
    180deg,
    transparent 0%, transparent 10%,
    #E5D4F0 10%, #E5D4F0 95%,
    transparent 95%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ----- Homepage-wide bump — matches Librarian's scale & centering -----
   All homepage pill signatures get a size bump and center alignment
   so they read cleanly at the small ~290px showcase render. Per-card
   blocks below can still override for custom drift/staggering. */
.showcase-grid--4 .hp-sig {
  align-items: center;
  max-width: 500px;
  gap: 16px;
}
.showcase-grid--4 .hp-pill {
  font-size: 25px;
  padding: 17px 26px;
  gap: 14px;
}
.showcase-grid--4 .hp-pill--lg {
  font-size: 28px;
  padding: 19px 28px;
  gap: 16px;
}
.showcase-grid--4 .hp-pill--sm {
  font-size: 20px;
  padding: 13px 20px;
  gap: 10px;
}
.showcase-grid--4 .hp-pill-icon { width: 24px; height: 24px; }
.showcase-grid--4 .hp-pill--lg .hp-pill-icon { width: 28px; height: 28px; }
.showcase-grid--4 .hp-pill--sm .hp-pill-icon { width: 20px; height: 20px; }
.showcase-grid--4 .hp-pill-status { width: 32px; height: 32px; }
.showcase-grid--4 .hp-pill-status svg { width: 18px; height: 18px; }
.showcase-grid--4 .hp-chip {
  font-size: 19px;
  padding: 11px 16px;
  gap: 10px;
}
.showcase-grid--4 .hp-chip-row {
  justify-content: center;
  gap: 12px;
}
.showcase-grid--4 .hp-chip .hp-pill-status {
  width: 22px;
  height: 22px;
}
.showcase-grid--4 .hp-chip .hp-pill-status svg { width: 13px; height: 13px; }
/* Brand marks inside hero pills — keep proportional with bumped text */
.showcase-grid--4 .hp-pill-badge { font-size: 11px; padding: 5px 11px; letter-spacing: 1px; }
.showcase-grid--4 .hp-agent-avatar { width: 34px; height: 34px; }
.showcase-grid--4 .hp-agent-avatar svg { width: 18px; height: 18px; }
.showcase-grid--4 .hp-mem-icon { width: 34px; height: 34px; }
.showcase-grid--4 .hp-mem-icon svg { width: 20px; height: 20px; }
.showcase-grid--4 .hp-step-badge { width: 32px; height: 32px; }
.showcase-grid--4 .hp-step-badge svg { width: 14px; height: 14px; }
.showcase-grid--4 .hp-step-badge--doc svg { width: 16px; height: 16px; }

/* ----- Per-card balance tweaks — subtle Librarian-style drift on the
   two-pill cards (Reviewer, Routines) so they don't sit flat-stacked.
   Chip-row cards (Multi-source, Domain, Agents, Memory, Checklists)
   stay naturally centered — hero pill above, chips below. ----- */

/* Reviewer: pass drifts left, fail drifts right, slight overlap.
   The fail pill is wider than the pass pill, so its right-drift is
   reduced relative to the pass pill's left-drift — this keeps the
   visible bounding box of the pair centered in the illustration. */
.showcase-grid--4 .ill-reviewer .hp-sig {
  gap: 0;
}
.showcase-grid--4 .ill-reviewer .hp-sig > .hp-pill:nth-child(1) {
  margin-left: -42px;
  z-index: 2;
}
.showcase-grid--4 .ill-reviewer .hp-sig > .hp-pill:nth-child(2) {
  margin-top: 14px;
  margin-left: 14px;
  z-index: 1;
}

/* Routines: Step 1 tilts left, Step 2 tilts right */
.showcase-grid--4 .ill-routines .hp-sig {
  gap: 0;
}
.showcase-grid--4 .ill-routines .hp-sig > .hp-pill:nth-child(1) {
  margin-left: -40px;
  z-index: 2;
}
.showcase-grid--4 .ill-routines .hp-sig > .hp-pill:nth-child(2) {
  margin-top: 16px;
  margin-left: 56px;
  z-index: 1;
}

/* Organizational memory homepage signature — 3 rows:
   Row 1: org-level pills (Bolagsmallar / Tidigare projekt)
          — subtle purple tint + small icon; lives ABOVE the project
          name to signal "not project-specific".
   Row 2: project name hero pill with the memory-brain avatar.
   Row 3: project-context pills (AB 04 / Örebro kommun / V17 · 2026)
          — full-size hp-pills matching Librarian's size. */
.showcase-grid--4 .ill-memory .hp-sig {
  gap: 12px;
  max-width: 580px;
  align-items: center;
}
.showcase-grid--4 .ill-memory .hp-mem-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
/* Project-context pills — 21px (matches Librarian's "Open page 27"
   action pill) with a subtle green/teal tint. Signals "project-
   specific" memory, distinct from org-level purple. */
.showcase-grid--4 .ill-memory .hp-mem-pill {
  font-size: 21px;
  padding: 14px 22px;
  white-space: nowrap;
  flex-shrink: 0;
  background-image:
    linear-gradient(135deg,
      rgba(74, 158, 128, 0.14) 0%,
      rgba(74, 158, 128, 0.06) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(74, 158, 128, 0.22);
  color: #24594A;
}
/* Org-level pills — 21px (same size as project-context pills) with
   a purple tint so viewers read the two rows as "two colors, two
   scopes" flanking the neutral white project-name hero. */
.showcase-grid--4 .ill-memory .hp-mem-org-pill {
  font-size: 21px;
  padding: 14px 22px;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  background-image:
    linear-gradient(135deg,
      rgba(107, 74, 158, 0.14) 0%,
      rgba(107, 74, 158, 0.06) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(107, 74, 158, 0.22);
  color: #3A2A5A;
}
.showcase-grid--4 .ill-memory .hp-mem-org-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6B4A9E;
  flex-shrink: 0;
}
.showcase-grid--4 .ill-memory .hp-mem-org-icon svg {
  width: 18px;
  height: 18px;
}

/* Domain knowledge homepage signature — the 3 synonym pills use the
   same sizing as Librarian's filename pill (25px, matches the rest
   of the homepage set). Laid out as 2 rows (Luftbehandling alone,
   then VVS + V-ritning) so each label stays on one line. */
.showcase-grid--4 .ill-domain .hp-sig {
  gap: 12px;
  max-width: 560px;
  align-items: center;
}
.showcase-grid--4 .ill-domain .hp-sig > .hp-pill--lg {
  margin-bottom: 4px;
}
.showcase-grid--4 .ill-domain .hp-synonym-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
.showcase-grid--4 .ill-domain .hp-domain-pill {
  font-size: 25px;
  padding: 17px 26px;
  gap: 12px;
}
.showcase-grid--4 .ill-domain .hp-domain-pill .hp-pill-dot {
  width: 14px;
  height: 14px;
}
/* Regulatory variant — book icon in the domain-accent purple
   instead of a color dot. Signals "regulation match", not synonym. */
.showcase-grid--4 .ill-domain .hp-domain-pill--reg .hp-pill-icon {
  width: 22px;
  height: 22px;
  color: #A86FB8;
}

/* AI Agents homepage signature — hero SELECTED pill on row 1, two
   non-selected agent pills (each with an avatar icon) on row 2,
   and a muted "+29 more" pill on row 3 sized the same as row 2. */
.showcase-grid--4 .ill-agents .hp-sig {
  gap: 14px;
  align-items: center;
}
.showcase-grid--4 .ill-agents .hp-agent-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
/* All three agent pills use default hp-pill sizing (25px, matches
   the "Run Tender Review" routines pill). No size override here. */
.showcase-grid--4 .ill-agents .hp-agent-pill {
  white-space: nowrap;
  flex-shrink: 0;
}
.showcase-grid--4 .ill-agents .hp-agent-pill .hp-agent-avatar {
  width: 32px;
  height: 32px;
}
.showcase-grid--4 .ill-agents .hp-agent-pill .hp-agent-avatar svg {
  width: 17px;
  height: 17px;
}
/* Distinct avatar colors per agent — matches the real product grid
   (Anbudsansvarig = blue, Kalkylator = pink, Platschef = peach). */
.showcase-grid--4 .ill-agents .hp-sig {
  max-width: 560px;
}
.showcase-grid--4 .ill-agents .hp-agent-avatar--bid {
  background: #DDE8F7;
  color: #2A5DB8;
}
.showcase-grid--4 .ill-agents .hp-agent-avatar--estimator {
  background: #FBDDE8;
  color: #C6407A;
}
.showcase-grid--4 .ill-agents .hp-agent-avatar--site {
  background: #F9E2CB;
  color: #C4691C;
}
/* Muted "Show all" — same size as non-selected pills, softer visual */
.showcase-grid--4 .ill-agents .hp-agent-pill--muted {
  color: rgba(10, 10, 10, 0.5);
  background-color: rgba(255, 255, 255, 0.65);
  border-color: rgba(10, 10, 10, 0.06);
}
/* Selected agent pill — warm librarian-accent tint, same treatment
   as Librarian's "Open page 27" action pill and Multi-source's
   magnifying-glass pill. Reads as the active / "chosen" element. */
.showcase-grid--4 .ill-agents .hp-agent-pill--selected {
  background-image:
    linear-gradient(135deg,
      rgba(232, 93, 79, 0.16) 0%,
      rgba(232, 93, 79, 0.08) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.94);
  border-color: rgba(232, 93, 79, 0.22);
}
.showcase-grid--4 .ill-agents .hp-agent-avatar--selected {
  background: rgba(232, 93, 79, 0.12);
  color: #E85D4F;
}

/* Multi-source research homepage signature — sources ARE the point.
   5 source pills (Librarian-sized, 25px) in a 3-row stack so long
   labels always fit on one line. A small circular question-mark pill
   sits inline at the start of row 1, representing the question being
   researched against the sources. Each pill has a small rotate +
   translate scatter so the group feels gathered, not gridded.
   Row 1: [?] · K-ritning A-42
   Row 2: SGU · Trafikverket
   Row 3: Lantmäteriet · SMHI  */
.showcase-grid--4 .ill-multisearch .hp-sig {
  gap: 22px;
  max-width: 560px;
  align-items: center;
}
.showcase-grid--4 .ill-multisearch .hp-source-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
.showcase-grid--4 .ill-multisearch .hp-source-pill {
  font-size: 25px;
  padding: 17px 26px;
  gap: 12px;
}
.showcase-grid--4 .ill-multisearch .hp-source-pill .hp-pill-icon {
  width: 26px;
  height: 26px;
}
/* Circular magnifying-glass pill — icon only, round, same height
   feel as the source pills beside it. Uses the librarian-accent
   warm tint to read as the "query" / active element. */
.showcase-grid--4 .ill-multisearch .hp-pill--mag {
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  background-image:
    linear-gradient(135deg,
      rgba(232, 93, 79, 0.16) 0%,
      rgba(232, 93, 79, 0.08) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.94);
  border-color: rgba(232, 93, 79, 0.22);
}
.showcase-grid--4 .ill-multisearch .hp-pill--mag .hp-pill-icon {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
  color: #E85D4F;
}
/* .hp-scatter wraps each pill; the wrapper carries the static
   rotate + translate so the pill itself is free to use `transform`
   for the fade-in Y animation without clashing. */
.showcase-grid--4 .ill-multisearch .hp-scatter {
  display: inline-block;
}
.showcase-grid--4 .ill-multisearch .hp-scatter--mag {
  transform: translate(-4px, 2px);
  z-index: 3;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--1 > .hp-scatter:nth-child(2) {
  transform: translate(4px, -3px);
  z-index: 2;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--2 > .hp-scatter:nth-child(1) {
  transform: translate(2px, 2px);
  z-index: 2;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--2 > .hp-scatter:nth-child(2) {
  transform: translate(-2px, -2px);
  z-index: 1;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--3 > .hp-scatter:nth-child(1) {
  transform: translate(2px, 3px);
  z-index: 1;
}
.showcase-grid--4 .ill-multisearch .hp-source-row--3 > .hp-scatter:nth-child(2) {
  transform: translate(-2px, -1px);
  z-index: 2;
}

/* Librarian homepage signature — custom staggered layout:
   filename centered, quote pill drifts left, action pill drifts right,
   with a small vertical overlap so they feel connected.             */
.showcase-grid--4 .ill-librarian .hp-sig {
  gap: 0;
}
.showcase-grid--4 .ill-librarian .hp-pill {
  font-size: 25px;
  padding: 17px 26px;
  position: relative;
}
.showcase-grid--4 .ill-librarian .hp-pill--action {
  font-size: 21px;
  padding: 14px 22px;
}
.showcase-grid--4 .ill-librarian .hp-pill-icon { width: 24px; height: 24px; }
.showcase-grid--4 .ill-librarian .hp-pill-arrow {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
  color: #E85D4F;
}
.showcase-grid--4 .ill-librarian .hp-sig > .hp-pill:nth-child(1) {
  z-index: 2;
}
.showcase-grid--4 .ill-librarian .hp-sig > .hp-pill:nth-child(2) {
  margin-top: 16px;
  margin-left: -60px;
  z-index: 1;
}
.showcase-grid--4 .ill-librarian .hp-sig > .hp-pill:nth-child(3) {
  margin-top: -8px;
  margin-left: 120px;
  z-index: 3;
  /* Warm librarian-accent tint so the action reads as "the point" */
  background-image:
    linear-gradient(135deg,
      rgba(232, 93, 79, 0.16) 0%,
      rgba(232, 93, 79, 0.08) 55%,
      rgba(255, 255, 255, 0.0) 100%);
  background-color: rgba(255, 255, 255, 0.94);
  border-color: rgba(232, 93, 79, 0.22);
}

/* Color motifs per card — subtle tint on the first pill only, to
   echo the existing per-card palette (routines-step-ref, etc.) */
.ill-librarian  .hp-pill-dot { background: #E85D4F; }
.ill-multisearch .hp-pill-dot.dot-sgu  { background: #7B9E7A; }
.ill-multisearch .hp-pill-dot.dot-smhi { background: #5D8CB8; }
.ill-multisearch .hp-pill-dot.dot-tv   { background: #D68C3E; }
.ill-domain     .hp-pill-dot { background: #A86FB8; }
.ill-memory     .hp-pill-dot { background: #6B4A9E; }
.ill-agents     .hp-pill-dot { background: #4A6FA8; }

/* Step/play/doc badge used inside Routines pill */
.hp-step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1A1A1A;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-step-badge svg { width: 13px; height: 13px; }
.hp-step-badge--doc {
  background: #E8A460;
  color: white;
}
.hp-step-badge--doc svg { width: 14px; height: 14px; stroke: white; }

/* Agent avatar inside Agents hero pill */
.hp-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F0EBF8;
  color: #6B4A9E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-agent-avatar svg { width: 16px; height: 16px; }

/* SELECTED badge on hero pill */
.hp-pill-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #1A1A1A;
  color: white;
  margin-left: 2px;
}

/* Memory-brain icon inside memory hero pill */
.hp-mem-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F0EBF8;
  color: #6B4A9E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-mem-icon svg { width: 18px; height: 18px; }

/* Checklist chip variants — pass-chip has a soft green tint */
.hp-chip--pass {
  background: rgba(232, 245, 236, 0.85);
  border-color: rgba(175, 210, 186, 0.6);
}
.hp-chip--muted {
  background: rgba(255, 255, 255, 0.55);
  color: #8B8B8B;
}

/* Status circle — smaller when used inside a chip */
.hp-chip .hp-pill-status {
  width: 20px;
  height: 20px;
}
.hp-chip .hp-pill-status svg { width: 12px; height: 12px; }

/* ----- Checklists — single left-aligned list-card (homepage) -----
   Card uses the same "transparent fat outline" as .ui-card (the 8px
   translucent halo via box-shadow). Title pill overlaps the top edge
   slightly, and the last row fades into the bg via a mask so the
   list reads as "continues below". */
.showcase-grid--4 .ill-checklists .hp-sig {
  align-items: stretch;
  gap: 0;
}
.showcase-grid--4 .ill-checklists .hp-sig > .hp-pill {
  align-self: center;
  position: relative;
  z-index: 2;
}
.showcase-grid--4 .ill-checklists .hp-checklist-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 42px 38px 49px 38px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 8px rgba(255, 255, 255, 0.18),
    0 14px 50px rgba(30, 20, 10, 0.09),
    0 4px 14px rgba(30, 20, 10, 0.05);
  max-width: 350px;
  width: 100%;
  margin: -12px auto 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.showcase-grid--4 .ill-checklists .hp-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.showcase-grid--4 .ill-checklists .hp-checklist-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 25px;
  font-weight: 500;
  color: #1A1A1A;
  text-align: left;
  white-space: nowrap;
}
.showcase-grid--4 .ill-checklists .hp-checklist-row--pass .hp-checklist-label {
  color: rgba(10, 10, 10, 0.55);
}
.showcase-grid--4 .ill-checklists .hp-checklist-row .hp-pill-status {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.showcase-grid--4 .ill-checklists .hp-checklist-row .hp-pill-status svg {
  width: 16px;
  height: 16px;
}
.showcase-grid--4 .ill-checklists .hp-pill-status--open {
  border-width: 2px;
}

/* Entry animation: if the illustration wrapper has `.animate`, the
   pills / chip-rows inside `.ill-hp-anim` fade + rise-in with a
   small stagger when the `.visible` class is added by JS. */
.animate .ill-hp-anim .hp-pill,
.animate .ill-hp-anim .hp-chip-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate .ill-hp-anim .hp-pill.visible,
.animate .ill-hp-anim .hp-chip-row.visible {
  opacity: 1;
  transform: translateY(0);
}