/*
 * Family-only presentation for the private workspace.
 *
 * The Studio keeps its denser operator controls in app.css. Family members
 * get a larger, calmer, one-action-at-a-time surface without weakening the
 * same authentication, attribution, and verified-receipt contracts.
 */

body[data-view-mode="family"] {
  font-size: 1.125rem;
}

body[data-view-mode="family"] .page-shell--reading {
  width: min(100%, 47rem);
}

body[data-view-mode="family"] .route-bar__project span,
body[data-view-mode="family"] .eyebrow,
body[data-view-mode="family"] .fine-print,
body[data-view-mode="family"] .small-copy,
body[data-view-mode="family"] .muted,
body[data-view-mode="family"] .field-hint,
body[data-view-mode="family"] .draft-note,
body[data-view-mode="family"] .notice p,
body[data-view-mode="family"] .work-card p,
body[data-view-mode="family"] .action-card span,
body[data-view-mode="family"] .action-card em,
body[data-view-mode="family"] .submission-status p {
  font-size: 1rem;
}

body[data-view-mode="family"] .field label,
body[data-view-mode="family"] .field legend,
body[data-view-mode="family"] .form-label,
body[data-view-mode="family"] .notice strong,
body[data-view-mode="family"] .identity-row strong,
body[data-view-mode="family"] .step-line {
  font-size: 1.05rem;
}

body[data-view-mode="family"] .button,
body[data-view-mode="family"] .nav-menu a,
body[data-view-mode="family"] .nav-menu button,
body[data-view-mode="family"] .nav-menu summary {
  min-height: 3.35rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

body[data-view-mode="family"] input,
body[data-view-mode="family"] select,
body[data-view-mode="family"] textarea {
  min-height: 3.5rem;
  padding: 0.82rem 0.9rem;
  font-size: 1rem;
}

body[data-view-mode="family"] textarea {
  min-height: 11rem;
}

body[data-view-mode="family"] .check-row,
body[data-view-mode="family"] .radio-row {
  min-height: 3.25rem;
  gap: 0.8rem;
}

body[data-view-mode="family"] .check-row input,
body[data-view-mode="family"] .radio-row input {
  width: 1.45rem;
  min-height: 1.45rem;
}

body[data-view-mode="family"] [data-family-guided-home],
body[data-view-mode="family"] [data-done-for-today] {
  gap: 1.25rem;
}

body[data-view-mode="family"] [data-guided-card] {
  padding: clamp(1.3rem, 5vw, 2rem);
  gap: 1.15rem;
  border-color: #b7a184;
  box-shadow: 0 14px 34px rgba(50, 39, 30, 0.1);
}

body[data-view-mode="family"] [data-guided-card] h2 {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
}

body[data-view-mode="family"] .card-prompt {
  font-size: clamp(1.55rem, 6vw, 2.25rem);
  line-height: 1.32;
}

body[data-view-mode="family"] .response-type label {
  min-height: 4rem;
  padding: 0.9rem;
  font-size: 1rem;
}

body[data-view-mode="family"] .file-zone {
  padding: 1.15rem;
}

body[data-view-mode="family"] [data-photo-preview-wrap] {
  min-width: 0;
}

body[data-view-mode="family"] [data-photo-preview] {
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

body[data-view-mode="family"] audio {
  width: 100%;
  min-height: 3.4rem;
}

body[data-view-mode="family"] [data-audio-recorder],
body[data-view-mode="family"] [data-recording-consent],
body[data-view-mode="family"] [data-source-details],
body[data-view-mode="family"] [data-family-more] {
  padding: 1.15rem;
}

body[data-view-mode="family"] details > summary {
  min-height: 3rem;
  padding: 0.45rem 0;
  cursor: pointer;
  font-size: 1rem;
}

body[data-view-mode="family"] [data-persistent-error] {
  scroll-margin-top: 1rem;
}

body[data-view-mode="family"] .nav-menu__primary {
  flex: 1 1 auto;
  white-space: nowrap;
}

body[data-view-mode="family"] [data-audio-preview]:not([hidden]) {
  width: 100%;
  margin-top: 0.75rem;
  display: block;
}

body[data-view-mode="family"] [data-audio-recorder] .button-row {
  gap: 0.75rem;
}

body[data-view-mode="family"] .nav-menu summary:focus-visible,
body[data-view-mode="family"] [data-audio-recorder] summary:focus-visible {
  outline: 0.19rem solid #2367a0;
  outline-offset: 0.18rem;
}

body[data-view-mode="family"] .nav-menu__more {
  position: relative;
}

body[data-view-mode="family"] .nav-menu__more > summary {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

body[data-view-mode="family"] .nav-menu__more > summary::-webkit-details-marker {
  display: none;
}

body[data-view-mode="family"] .nav-menu__more > summary::after {
  margin-left: 0.45rem;
  content: "▾";
}

body[data-view-mode="family"] .nav-menu__more[open] > summary {
  background: var(--paper-light);
  border-color: var(--line);
  color: var(--ink);
}

body[data-view-mode="family"] .nav-menu__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  right: 0;
  width: min(20rem, calc(100vw - 2rem));
  padding: 0.45rem;
  display: grid;
  gap: 0.2rem;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

body[data-view-mode="family"] .nav-menu__panel a,
body[data-view-mode="family"] .nav-menu__panel button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

body[data-view-mode="family"] .button:active,
body[data-view-mode="family"] .action-card:active,
body[data-view-mode="family"] .response-type label:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

@media (max-width: 28rem) {
  body[data-view-mode="family"] .nav-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: stretch;
  }

  body[data-view-mode="family"] .nav-menu__primary,
  body[data-view-mode="family"] .nav-menu__more > summary {
    width: 100%;
  }

  body[data-view-mode="family"] .nav-menu__panel {
    position: fixed;
    top: auto;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
    max-height: calc(100svh - 2rem);
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view-mode="family"] .button:active,
  body[data-view-mode="family"] .action-card:active,
  body[data-view-mode="family"] .response-type label:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  body[data-view-mode="family"] .nav-menu__panel,
  body[data-view-mode="family"] [data-guided-card] {
    border: 1px solid CanvasText;
  }
}