/* Hallmark · genre: editorial · macrostructure: Community Index / Account Portal
 * design-system: design.md · designed-as-app · enrichment: none · motion: none
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41)
 */
@import url("/tokens.css");

.dpt-member-card {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-lg);
}

.dpt-member-card .hm-shell {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
}

.dpt-member-card h2,
.dpt-member-card a {
  color: var(--color-paper) !important;
  margin: 0;
}

.dpt-member-card h2 {
  font-size: var(--text-lg) !important;
}

.dpt-member-card a,
.dpt-locked a,
.dpt-account a {
  font-weight: 700;
  text-decoration-color: var(--color-accent);
  white-space: nowrap;
}

.dpt-account {
  background: var(--color-paper);
  min-height: 60svh;
  padding-block: var(--space-2xl);
}

.dpt-account h1 {
  margin-block-end: var(--space-xl);
}

.dpt-account h2 {
  font-size: var(--text-xl) !important;
}

.dpt-account__forms {
  display: grid;
  gap: var(--space-xl);
}

.dpt-account__forms > section,
.dpt-account__summary,
.dpt-member-videos,
.dpt-locked {
  border-block-start: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg);
}

.dpt-account form p {
  display: grid;
  gap: var(--space-2xs);
  margin-block-end: var(--space-md);
}

.dpt-account label,
.comment-form-comment label {
  color: var(--color-ink);
  font-weight: 700;
}

.dpt-account :where(input[type="text"], input[type="email"], input[type="password"]),
.comment-form-comment textarea {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  color: var(--color-ink);
  font: inherit;
  min-height: var(--space-xl);
  outline: var(--rule-fine) solid transparent;
  padding: var(--space-xs);
  width: 100%;
}

.comment-form-comment textarea {
  min-height: calc(var(--space-3xl) * 2);
  resize: vertical;
}

.dpt-account :where(input[type="text"], input[type="email"], input[type="password"]):hover,
.comment-form-comment textarea:hover {
  border-color: var(--color-ink-2);
}

.dpt-account :where(input[type="text"], input[type="email"], input[type="password"]):focus-visible,
.comment-form-comment textarea:focus-visible {
  border-color: var(--color-focus);
  outline-color: var(--color-focus);
  outline-offset: var(--space-3xs);
}

.dpt-account :where(input[type="text"], input[type="email"], input[type="password"]):disabled,
.comment-form-comment textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.dpt-account :where(button, input[type="submit"]),
.form-submit input[type="submit"] {
  background: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-input);
  color: var(--color-paper);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: var(--space-xl);
  padding: var(--space-xs) var(--space-md);
}

.dpt-account :where(button, input[type="submit"]):hover,
.dpt-account :where(button, input[type="submit"]):active,
.form-submit input[type="submit"]:hover,
.form-submit input[type="submit"]:active {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.dpt-account :where(button, input[type="submit"]):focus-visible,
.form-submit input[type="submit"]:focus-visible {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}

.dpt-account :where(button, input[type="submit"]):disabled,
.form-submit input[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.dpt-account__notice {
  border-block: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-sm);
}

.dpt-account__trap {
  height: 0;
  inset-inline-start: calc(var(--space-3xl) * -10);
  overflow: clip;
  position: absolute;
  width: 0;
}

.dpt-account__summary p {
  margin-block-end: var(--space-2xs);
}

.dpt-member-videos ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dpt-member-videos li {
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  padding-block: var(--space-sm);
}

.dpt-locked {
  margin-block: var(--space-xl);
}

.dpt-locked h2 {
  font-size: var(--text-xl) !important;
}

.dpt-member-player {
  margin-block: var(--space-lg);
}

.dpt-member-player video {
  background: var(--color-ink);
  display: block;
  max-height: 80svh;
  width: 100%;
}

.comments-area {
  margin-inline: auto;
  max-width: var(--content-prose);
  padding: var(--space-xl) var(--page-gutter);
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-list .comment {
  border-block-start: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-md);
}

@media (min-width: 48rem) {
  .dpt-account__forms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .dpt-member-card .hm-shell {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dpt-account *,
  .dpt-member-card * {
    animation-duration: var(--dur-reduced) !important;
    transition-duration: var(--dur-reduced) !important;
  }
}