/* DIR-66 concise, honest lesson and practice completion sheet. */

.sessionWrapUp {
  position: fixed;
  z-index: 1250;
  inset: auto max(var(--dirck-space-4), env(safe-area-inset-right)) max(calc(5.5rem + env(safe-area-inset-bottom)), var(--dirck-space-4)) max(var(--dirck-space-4), env(safe-area-inset-left));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--dirck-space-4);
  inline-size: min(42rem, calc(100vw - 2 * var(--dirck-space-4)));
  margin-inline: auto;
  padding: var(--dirck-space-5);
  border: 1px solid var(--dirck-color-border-strong);
  border-radius: var(--dirck-radius-xl);
  background: var(--dirck-color-surface-strong);
  color: var(--dirck-color-text);
  box-shadow: var(--dirck-shadow-lg);
  animation: sessionWrapUpIn var(--dirck-duration-standard) var(--dirck-ease-standard) both;
}

.sessionWrapUp:focus { outline: none; }
.sessionWrapUp:focus-visible { box-shadow: var(--dirck-shadow-lg), 0 0 0 3px var(--dirck-color-focus-ring, var(--dirck-color-accent)); }

.sessionWrapUpIcon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--dirck-radius-pill);
  background: var(--dirck-color-accent);
  color: var(--dirck-color-on-accent);
}

.sessionWrapUpIcon svg {
  inline-size: 1.45rem;
  block-size: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.sessionWrapUp.isError .sessionWrapUpIcon {
  background: var(--dirck-color-text-strong);
  color: var(--dirck-color-surface);
}

.sessionWrapUpCopy { min-inline-size: 0; }
.sessionWrapUpEyebrow {
  margin: 0 0 var(--dirck-space-1);
  color: var(--dirck-color-accent);
  font: 850 var(--dirck-font-size-caption) / 1.2 var(--dirck-font-label);
  letter-spacing: var(--dirck-letter-spacing-label);
  text-transform: uppercase;
}

.sessionWrapUp.isError .sessionWrapUpEyebrow { color: var(--dirck-color-text-strong); }
.sessionWrapUpCopy h2 {
  margin: 0;
  color: var(--dirck-color-text-strong);
  font-size: clamp(1.25rem, 4.6vw, 1.65rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.sessionWrapUpSummary,
.sessionWrapUpDetail {
  margin: var(--dirck-space-2) 0 0;
  color: var(--dirck-color-text-muted);
  font-size: var(--dirck-font-size-caption);
  line-height: var(--dirck-line-height-body);
}

.sessionWrapUpDetail { color: var(--dirck-color-text-strong); font-weight: 700; }
.sessionWrapUp .progressSyncStatus { margin-block-start: var(--dirck-space-2); }

.sessionWrapUpClose {
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--dirck-color-border);
  border-radius: var(--dirck-radius-pill);
  background: transparent;
  color: var(--dirck-color-text-strong);
  cursor: pointer;
  font-size: 1.25rem;
}

.sessionWrapUpActions {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: var(--dirck-space-3);
}

.sessionWrapUpActions .dirckButton { min-block-size: 48px; }
.sessionWrapUpActions .dirckButton--primary { flex: 1 1 14rem; }
.sessionWrapUpActions .dirckButton--ghost { flex: 0 1 auto; }

@keyframes sessionWrapUpIn {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .sessionWrapUp {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--dirck-space-3);
    padding: var(--dirck-space-4);
  }

  .sessionWrapUpIcon { inline-size: 2.65rem; block-size: 2.65rem; }
  .sessionWrapUpActions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
  .sessionWrapUpActions .dirckButton { inline-size: 100%; }
}

@media (max-width: 340px) {
  .sessionWrapUpIcon { display: none; }
  .sessionWrapUp { grid-template-columns: minmax(0, 1fr) auto; }
  .sessionWrapUpActions { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { .sessionWrapUp { animation: none; } }
html.reduce-motion .sessionWrapUp,
html[data-reduce-motion="true"] .sessionWrapUp { animation: none; }