/* Open Loops — layout & mobile styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* Main shell */
.app-shell,
.app-sidebar,
.main-content,
.main-content-inner {
  min-width: 0;
  max-width: 100%;
}

.main-content-inner {
  width: 100%;
}

/* Mobile collapsible nav (<details>, no JS) */
.mobile-nav > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  font-size: 0.875rem;
  font-weight: 500;
  color: #44403c;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.mobile-nav > summary::after {
  content: "▾";
  font-size: 0.75rem;
  color: #78716c;
}

.mobile-nav[open] > summary::after {
  content: "▴";
}

.mobile-nav-panel {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Forms: full-width inputs on narrow screens */
.main-content input[type="text"],
.main-content input[type="email"],
.main-content input[type="date"],
.main-content input[type="number"],
.main-content input[type="search"],
.main-content select,
.main-content textarea {
  max-width: 100%;
}

@media (max-width: 767px) {
  .main-content input[type="text"],
  .main-content input[type="email"],
  .main-content input[type="date"],
  .main-content input[type="number"],
  .main-content input[type="search"],
  .main-content select,
  .main-content textarea {
    width: 100%;
  }

  .main-content label.block,
  .main-content .form-field {
    display: block;
    width: 100%;
  }

  /* Filter form: vertical stack */
  .filter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .filter-form > label,
  .filter-form > .filter-field {
    width: 100%;
  }

  .filter-form .filter-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .filter-form .filter-actions .btn,
  .filter-form .filter-actions button,
  .filter-form .filter-actions a {
    width: 100%;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
  }

  .filter-form .filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .filter-form .filter-checkboxes label {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Quick capture */
  .capture-form button[type="submit"] {
    width: 100%;
    min-height: 44px;
  }

  /* Loop cards */
  .loop-card-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .loop-card-badges {
    width: 100%;
    justify-content: flex-start;
  }

  .loop-card-meta span {
    overflow-wrap: anywhere;
  }

  .loop-card-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Form action buttons */
  .form-actions {
    flex-direction: column;
    width: 100%;
  }

  .form-actions .btn-primary,
  .form-actions .btn-secondary,
  .form-actions button[type="submit"],
  .form-actions a {
    width: 100%;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Projects page header */
  .projects-header-actions a {
    width: 100%;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .project-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-card-badges {
    flex-wrap: wrap;
    gap: 0.375rem;
    width: 100%;
  }

  /* Weekly review checklist */
  .weekly-checklist label {
    min-height: 44px;
    align-items: flex-start;
    padding: 0.25rem 0;
  }

  .weekly-checklist label span,
  .weekly-project-row span {
    overflow-wrap: anywhere;
  }

  /* Instructions */
  .instructions-page {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .instructions-page ul,
  .instructions-page ol {
    padding-left: 1.25rem;
  }
}

/* Desktop: filters in a row */
@media (min-width: 768px) {
  .filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .filter-form .filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
}

/* Touch-friendly checkboxes */
.main-content input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* Utility */
.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}