/* css/resources.css — Resources page, built on shared.css tokens */

.resources-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

.resources-generate-panel,
.resources-result-panel,
.my-resources-panel {
  max-width: 720px;
  margin: 0 auto var(--space-7);
}

.resources-heading {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin-bottom: var(--space-2);
}
.resources-subheading {
  color: var(--text-3);
  font-size: var(--text-base);
  margin-bottom: var(--space-5);
}

/* ── Resource type picker ── */
.resource-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}
.resource-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.resource-type-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.resource-type-card i {
  font-size: 1.3rem;
  color: var(--accent);
}
.resource-type-card span {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
}

/* ── Guided form ── */
.resource-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.resource-form-back {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-3);
  font-weight: 500;
}
.resource-form-back:hover { color: var(--text-1); }

.resource-form-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-1);
}

.resource-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.resource-field span {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
}
.resource-field input,
.resource-field textarea,
.resource-field select {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  background: var(--bg-subtle);
  color: var(--text-1);
  outline: none;
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease);
}
.resource-field input:focus,
.resource-field textarea:focus,
.resource-field select:focus { border-color: var(--accent-2); background: var(--bg-elevated); }

/* <select> has no `resize` and needs its own cursor + a themed
   chevron — without this it was falling through to the browser's
   default white-box appearance (this was the "All types" filter on
   Library, and every generation-options dropdown on Resources). */
.resource-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238c8c86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

/* "Include real images" flashcards checkbox — a distinct field shape
   from the text/select fields above, so it gets its own row + hint
   layout rather than reusing .resource-field's label/input stack. */
.resource-field-checkbox {
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.resource-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.resource-checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent-2);
  cursor: pointer;
}
.resource-checkbox-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.resource-field-badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--accent-2);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.resource-field-hint {
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-3);
}

.resource-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--text-1);
  color: var(--bg-base);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: opacity var(--duration-fast) var(--ease);
}
.resource-generate-btn:hover:not(:disabled) { opacity: 0.85; }
.resource-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Result preview ── */
.resources-result-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  /* Intentionally no overflow:hidden here. The download button inside
     .resource-result-actions opens a popover menu (see
     renderDownloadControl in js/resources.js) that's appended straight to
     <body> as a fixed-position element so it can never be clipped by an
     ancestor's overflow. Keeping overflow:hidden on this panel used to
     clip that popover down to nothing, which is why the download menu
     wasn't showing. The rounded corners this used to provide are
     recreated on the header and actions row directly below instead, so
     the panel still looks the same. */
}
.resource-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.resource-result-header h2 { font-size: var(--text-lg); font-weight: 600; }

.resource-result-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.resource-header-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-elevated);
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.resource-header-btn:hover { border-color: var(--border-strong); color: var(--text-1); }

.resource-result-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-3);
}
.resource-result-close:hover { color: var(--text-1); }

.resource-result-body {
  padding: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-1);
  max-height: 60vh;
  overflow-y: auto;
}
.resource-result-body h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-1);
}
.resource-result-body h4:first-child { margin-top: 0; }
.resource-result-body ul { padding-left: 1.3em; margin: var(--space-2) 0; }
.resource-result-body li { margin-bottom: var(--space-1); }
.resource-result-body p { margin-bottom: var(--space-2); }

/* ── Structured content editor (replaces raw JSON textarea) ── */
.resource-edit-wrap {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.resource-edit-hint {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: var(--space-3);
}
.resource-edit-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.resource-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
}
.redit-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.redit-field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
}
.redit-input,
.redit-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  background: var(--bg-subtle);
  color: var(--text-1);
  outline: none;
  font-family: inherit;
}
.redit-input:focus,
.redit-select:focus,
.redit-textarea:focus {
  border-color: var(--accent-2);
  background: var(--bg-elevated);
}
.redit-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238c8c86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
.redit-textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  background: var(--bg-subtle);
  color: var(--text-1);
  outline: none;
  font-family: inherit;
  resize: vertical;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}

/* Tag-style string list rows (bullets/numbered) */
.redit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.redit-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.redit-list-input { flex: 1; }

.redit-drag-handle {
  cursor: grab;
  color: var(--text-4);
  flex-shrink: 0;
  touch-action: none;
}
.redit-icon-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  flex-shrink: 0;
}
.redit-icon-btn:hover { color: var(--danger); background: var(--danger-subtle); }

.redit-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
}
.redit-add-btn:hover { color: var(--text-1); border-color: var(--accent-2); }

/* Term/definition pairs */
.redit-termlist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.redit-term-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--bg-subtle);
}
.redit-term-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.redit-term-input { flex: 1; font-weight: 600; }
.redit-term-explanation { min-height: 40px; }

/* Reorderable sections / object cards (lesson-note sections, slides, etc.) */
.redit-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.redit-section-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.redit-section-card.is-dragging {
  opacity: 0.6;
  border-color: var(--accent-2);
}
.redit-card-flash {
  animation: redit-card-flash-pulse 1.6s ease;
}
@keyframes redit-card-flash-pulse {
  0%, 100% { border-color: var(--border); box-shadow: none; }
  15%, 55% { border-color: var(--warning, #b45309); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning, #b45309) 20%, transparent); }
}
.redit-section-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.redit-section-heading { flex: 1; font-weight: 600; }
.redit-section-card-title-spacer { flex: 1; }
.redit-section-content-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.redit-sectionlist-field .redit-field-label { margin-bottom: var(--space-1); }

/* ── Follow-up regenerate row ── */
.resource-regenerate-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.resource-regenerate-row .resource-field span {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: 600;
}
.resource-regenerate-row input {
  background: var(--bg-elevated);
}

.resource-result-actions {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.resource-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease);
}
.resource-download-btn:hover:not(:disabled) { background: var(--accent-hover); }
.resource-download-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Small round icon variant used by renderDownloadControl in
   js/resources.js and js/library.js, as opposed to the full-width
   .resource-download-btn styled above. */
.resource-download-control { display: inline-block; }
.resource-download-btn.resource-download-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The popover menu itself is appended directly to <body> and positioned
   with JS (position: fixed, coordinates computed from the toggle
   button's bounding rect) rather than nested + absolutely positioned
   inside the result panel. That's deliberate: it's what lets the menu
   escape any ancestor's clipping and z-index/stacking context, so it
   always shows fully on top of everything, on both mobile and desktop,
   regardless of where the download button happens to sit on the page. */
.resource-download-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  max-width: calc(100vw - var(--space-4) * 2);
  z-index: 1000;
  overflow: hidden;
}
.resource-download-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-1);
}
.resource-download-option:hover { background: var(--bg-subtle); }

/* ── My Resources list ── */
.my-resources-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.library-group-heading {
  margin: var(--space-2) 0 var(--space-1);
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.library-group-heading:first-child {
  margin-top: 0;
}
.library-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.my-resources-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-4);
  font-size: var(--text-sm);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.my-resource-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease);
}
.my-resource-row:hover { border-color: var(--border-strong); }
.my-resource-row i.resource-icon { font-size: 1.1rem; color: var(--accent); flex-shrink: 0; }
.my-resource-info { flex: 1; min-width: 0; }
.my-resource-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-resource-meta { font-size: var(--text-xs); color: var(--text-3); }
.my-resource-excerpt {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-3);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.my-resource-status.status-ready { background: var(--accent-subtle); color: var(--accent); }

/* ── Recommended/Featured library cards (resources.html) — each card
   shows an actual truncated preview of the content, not just a title
   row, so a user can see what's inside before opening it. ── */
.library-recommended-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.library-recommended-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.library-recommended-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.library-recommended-card-preview {
  position: relative;
  max-height: 150px;
  overflow: hidden;
  padding: var(--space-3) var(--space-4) 0;
  pointer-events: none;
  font-size: var(--text-xs);
  color: var(--text-3);
  line-height: 1.5;
  white-space: pre-line;
}
.library-recommended-card-preview::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--bg-elevated));
}
.library-recommended-card-foot {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}
.library-recommended-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-recommended-card-meta { font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }
.library-recommended-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-4);
  font-size: var(--text-sm);
}
.my-resource-status.status-generating { background: var(--bg-subtle); color: var(--text-3); }
.my-resource-status.status-failed { background: var(--danger-subtle); color: var(--danger); }

/* ── Design template picker (in the guided form, before Generate) ── */
.design-template-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-1);
}
.design-template-picker-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
}
.design-template-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.design-template-swatch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.design-template-swatch:hover { border-color: var(--border-strong); }
.design-template-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--text-1);
}
.design-template-swatch.is-locked { color: var(--text-4); }
.design-template-swatch-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
}
.design-template-swatch-lock {
  font-size: 10px;
  color: var(--text-4);
}

@media (max-width: 600px) {
  .resource-type-grid { grid-template-columns: repeat(2, 1fr); }

  .resource-regenerate-row {
    flex-direction: column;
    align-items: stretch;
  }
  .resource-regenerate-row #resourceRegenerateBtn {
    width: 100% !important;
  }
}