/* Suite layout on top of /ui/shell.css. The kit paints the photo, overlay, header, and tabs. */

html,
body {
  overflow-x: hidden;
}

body.dx {
  --ink: var(--dx-text);
  --text: var(--dx-text);
  --text-dim: var(--dx-muted);
  --text-mute: var(--dx-muted);
  --muted-text: var(--dx-muted);
  --bg-card: var(--dx-card);
  --line: var(--dx-border);
  --font-sans: var(--dx-font);
  color: var(--dx-text);
  font-family: var(--dx-font);
  background: transparent;
  max-width: none;
  margin: 0;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom));
}

body.dx:has(nav.tabs) {
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

#hero,
#main,
#program,
#connect,
.banner,
.demo-banner {
  width: min(720px, calc(100% - 12px));
  margin-left: auto;
  margin-right: auto;
}

.dx-header {
  flex-wrap: wrap;
  row-gap: 4px;
}

.dx-header .dx-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  max-width: 46%;
}

#sync-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--dx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-header .dong-theme-toggle {
  position: static;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin: 0;
}

.dx-header .dong-theme-toggle__knob {
  top: 11px;
}

.dx-header .view-nav {
  flex: 1 0 100%;
  display: flex;
  gap: 4px;
  min-width: 0;
}

.dx-header .view-nav a {
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
}

.card,
.hero,
.sheet,
details.fold,
.dx-card {
  background: var(--dx-card);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius);
  color: var(--dx-text);
  box-shadow: var(--dx-shadow);
  -webkit-backdrop-filter: blur(var(--dx-blur));
  backdrop-filter: blur(var(--dx-blur));
}

.hero details.fold,
.hero-fold {
  background: transparent;
  border: 0;
  margin: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

details.fold {
  padding: 0;
  overflow: hidden;
}

details.fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
  color: var(--dx-text);
}

details.fold > summary::-webkit-details-marker {
  display: none;
}

details.fold > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

details.fold > summary:has(.chev)::after {
  content: none;
}

details.fold[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

details.fold > summary:focus-visible {
  outline: 2px solid var(--dx-accent);
  outline-offset: -2px;
}

.fold-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dx-text);
}

.fold-viz {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--dx-accent);
}

.fold-stat {
  flex: none;
  max-width: 46%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dx-text);
}

details.fold > :not(summary) {
  padding-left: 12px;
  padding-right: 12px;
}

details.fold > :last-child {
  padding-bottom: 12px;
}

details.fold .fold,
details.session {
  margin-top: 8px;
}

.mini-ring {
  --p: 0;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--p) * 1%), var(--dx-border) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}

.mini-ring.over {
  color: hsl(4 72% 36%);
}

html.dark .mini-ring.over {
  color: hsl(4 85% 74%);
}

.mini-bar {
  display: block;
  width: 44px;
  height: 6px;
  flex: none;
  border-radius: 99px;
  background: var(--dx-border);
  overflow: hidden;
}

.mini-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--dx-accent);
}

.mini-bar.over > i {
  background: hsl(4 72% 42%);
}

.spark {
  width: 56px;
  height: 18px;
  display: block;
  flex: none;
  color: var(--dx-accent);
}

.tabs,
footer#connect {
  background: var(--dx-header);
  -webkit-backdrop-filter: blur(var(--dx-blur));
  backdrop-filter: blur(var(--dx-blur));
}

.banner,
.demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin-top: 10px;
  padding: 0.7rem 0.85rem;
  border-radius: var(--dx-radius);
  background: var(--dx-card);
  border: 1px solid var(--dx-border);
  color: var(--dx-text);
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: var(--dx-shadow);
}

.banner[hidden],
.demo-banner[hidden] {
  display: none;
}

#remain-line.fold-stat,
#period-label.fold-title {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0;
}

.toggle button.on,
.view-nav a[aria-current="page"],
.day-strip button.active-day,
.window-toggle button[aria-pressed="true"],
.btn-primary,
button.primary,
#btn-connect {
  background: var(--dx-accent);
  color: var(--dx-accent-fg);
  border-color: transparent;
  box-shadow: none;
}