.workspace { display: flex; flex-direction: column; }
body.authed .workspace { padding-top: 20px; }
.workspace:not(.has-detail) .detail-column { display: none; }
.workspace.detail-open #pages { display: none; }
.detail-column { order: -1; max-width: 760px; }
.detail-close {
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0;
  background: none; border: 0; border-radius: 8px; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.detail-close:hover { background: var(--control-fill); color: var(--text); }
.detail-close:active { background: var(--control-fill); color: var(--accent); }
.detail-close:disabled, .detail-close:disabled:hover, .detail-close:disabled:active {
  background: none; color: var(--muted);
}

@media (min-width: 800px) {
  body.authed .workspace.has-detail {
    display: grid; grid-template-columns: 760px 360px;
    justify-content: start; column-gap: 28px; align-items: start;
  }
  .workspace.detail-open #pages { display: block; }
  .workspace.has-detail #pages { grid-column: 1; grid-row: 1; }
  .workspace.has-detail .detail-column {
    grid-column: 2; grid-row: 1; max-width: none;
    position: sticky; top: calc(env(safe-area-inset-top) + var(--head-h) + 20px);
  }
  .detail-column .back-link { display: none; }
  .detail-column .detail-close { display: flex; position: absolute; top: 9px; right: 7px; }
}

@media (min-width: 800px) and (max-width: 1199.98px) {
  body.authed:has(.workspace.has-detail) { min-width: calc(760px + 28px + 360px + 32px); }
}

@media (min-width: 1200px) {
  body.authed .workspace.has-detail { grid-template-columns: minmax(0, 760px) 360px; }
}

.detail-slot.parked > .detail-body { display: none; }
.detail-slot:not(.parked) > .detail-stub { display: none; }
.detail-slot:not(:first-child) { margin-top: 28px; }

.detail-stub {
  display: flex; align-items: center; gap: 8px; position: relative;
  padding: 20px;
  --token-ground: var(--token-open); background-color: var(--token-ground);
  border-radius: 12px;
}
.detail-stub:hover { background-color: color-mix(in srgb, #000 var(--token-hover), var(--token-ground)); }
.detail-stub-open {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  padding: 0; min-height: 0; border-radius: 0;
  background: none; color: var(--text); font-weight: 500; text-align: left;
}
.detail-stub-open:active { background: none; }
.detail-stub-hanzi {
  font-size: 2.2rem; font-weight: 700; line-height: 1;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}
.detail-slot:not([data-pass]) .detail-stub-mark { display: none; }
.detail-stub-mark {
  flex: 0 0 auto; align-self: flex-start;
  display: flex; align-items: flex-start; justify-content: flex-end;
  width: 40px; margin: -20px -20px 0 0; padding: 22px 18px 0 0;
}
.detail-stub-mark::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-radius: 50%; background: currentColor;
}
.detail-slot[data-pass="running"] .detail-stub-mark { color: var(--muted); }
.detail-slot[data-pass="running"] .detail-stub-mark::before {
  animation: stub-pulse 1.4s ease-in-out infinite;
}
.detail-slot[data-pass="kept"] .detail-stub-mark { color: var(--ok); }
.detail-slot[data-pass="changed"] .detail-stub-mark { color: var(--warn); }
.detail-slot[data-pass="failed"] .detail-stub-mark,
.detail-slot[data-pass="lost"] .detail-stub-mark { color: var(--err); }
@media (prefers-reduced-motion: reduce) {
  .detail-slot[data-pass="running"] .detail-stub-mark::before { animation: none; }
}
.detail-stub-status {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}