/* Wrong Answer Journal — plan/pages/wrong-answer-journal.html.

   Everything reused from base.css/components.css (.content-column, .intro-text, .form-box,
   .selector-box, .field-select*, .field-dropdown*, .filter-apply-btn, .col-sort-btn,
   .table-pagination, .bookmark-toggle-btn) is not redeclared here — see item5-planning.md §3.5. */

.waj-filter-box { display: block; width: 100%; padding: 18px 28px; }
.waj-filter-row { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.waj-filter-row .field-select { flex: 1 1 0; min-width: 0; }
.waj-filter-summary { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(241,231,219,0.1);
  font-size: 13px; line-height: 1.6; opacity: 0.8; }
.waj-filter-summary strong { font-weight: 600; opacity: 1; }
.waj-clear-filters-btn { background: none; border: none; color: var(--color-accent);
  font-family: inherit; font-size: 13.5px; cursor: pointer; padding: 0; margin-left: auto; }
.waj-clear-filters-btn:hover { text-decoration: underline; }

.waj-sort-row { display: flex; align-items: center; gap: 22px; margin: -8px 4px 16px; }
.waj-sort-label { font-variant: small-caps; font-size: 12.5px; letter-spacing: 0.03em; opacity: 0.55; }
.sort-arrow { font-size: 10px; }

.bookmark-filter-option { font-weight: 600; }
.field-dropdown-divider { height: 1px; background: rgba(53,67,98,0.18); margin: 6px 0 8px; }

.waj-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.waj-empty-note { font-size: 13.5px; opacity: 0.6; padding: 10px 4px; }
.waj-item { background: rgba(241,231,219,0.04); border: 1px solid rgba(241,231,219,0.12);
  border-radius: 4px; overflow: hidden; }
.waj-item[hidden] { display: none; }
.waj-item-header { display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; }
.waj-item-header:hover { background: rgba(241,231,219,0.03); }
.waj-item-main { flex: 1 1 auto; min-width: 0; }
.waj-item-meta { font-size: 13.5px; font-weight: 600; }
.waj-meta-sep { opacity: 0.35; font-weight: 400; margin: 0 2px; }
.waj-item-title-row { display: flex; align-items: center; gap: 10px; }
.waj-item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.waj-item-tags:empty { display: none; margin-top: 0; }
.waj-tag-pill { display: inline-flex; align-items: center; border: 1px solid var(--color-accent);
  color: var(--color-accent); border-radius: 12px; padding: 2px 9px; font-size: 11px; }
.waj-item-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-action-btn { background: transparent; border: 1px solid rgba(255,128,88,0.5); border-radius: 2px;
  color: var(--color-accent); opacity: 0.85; padding: 6px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.icon-action-btn:hover { opacity: 1; background: rgba(255,128,88,0.12); }
.icon-action-btn svg { width: 13px; height: 13px; display: block; }
.icon-action-btn[aria-disabled] { opacity: 0.3; cursor: default; pointer-events: none; }

.waj-item-body { display: none; flex-direction: column; border-top: 1px solid rgba(241,231,219,0.12); }
.waj-item.expanded .waj-item-body { display: flex; }
.waj-item-body-inner { flex: 1; min-height: 0; overflow-y: hidden; padding: 18px 20px; }

/* Edit/Save/Cancel render only once the entry is open (item5-planning.md §2.2's own note on the
   mockup's comments); the formatting row and the editable divs only while actually editing. */
.waj-item:not(.expanded) .waj-edit-btn,
.waj-item:not(.expanded) .waj-cancel-btn,
.waj-item:not(.expanded) .waj-save-btn { display: none; }
.waj-item:not(.editing) .format-row,
.waj-item:not(.editing) .waj-textarea { display: none; }
.waj-item.editing .waj-field-text { display: none; }
.waj-item.editing .waj-edit-btn { display: none; }
.waj-item:not(.editing) .waj-cancel-btn,
.waj-item:not(.editing) .waj-save-btn { display: none; }

/* The strip of already-attached files stays visible in read mode too — only its own remove
   button is edit-only, the same as the in-question panel's own strip. Found reviewing this item:
   a blanket .attachment-strip { display: none } outside .editing hid a student's own attached
   screenshot from their own read view, reachable only by clicking Edit first. */
.waj-item:not(.editing) .attachment-chip button[data-attachment-remove] { display: none; }

.waj-edit-btn, .waj-save-btn, .waj-cancel-btn { background: transparent;
  border: 1px solid rgba(255,128,88,0.5); color: var(--color-accent); border-radius: 2px;
  font-family: inherit; font-size: 12px; font-variant: small-caps; letter-spacing: 0.02em;
  padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.waj-edit-btn:hover, .waj-save-btn:hover, .waj-cancel-btn:hover { background: rgba(255,128,88,0.12); }
.waj-edit-btn svg { width: 12px; height: 12px; }
.waj-save-btn { background: var(--color-accent); color: var(--color-accent-text);
  border-color: var(--color-accent); font-weight: 700; }
.waj-save-btn:hover { opacity: 0.92; background: var(--color-accent); }
.waj-save-btn:disabled { opacity: 0.5; cursor: default; }

.waj-times-line { font-size: 12.5px; opacity: 0.6; margin: 0 0 12px; }

.waj-fields-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.waj-field-group { min-width: 0; }
.waj-field-label { display: block; font-variant: small-caps; font-size: 11.5px; font-weight: 600;
  opacity: 0.65; letter-spacing: 0.03em; margin-bottom: 6px; }
.waj-field-text { font-size: 13.5px; line-height: 1.55; margin: 0; white-space: pre-wrap;
  overflow-wrap: break-word; min-height: 100px; border: 1px solid rgba(53,67,98,0.25);
  border-radius: 3px; padding: 8px 10px; background: #fffdf9; color: #354362; overflow-y: auto; }
.waj-field-text:empty::before { content: '\2014'; opacity: 0.35; }
.waj-textarea { display: block; width: 100%; min-height: 100px; resize: none;
  border: 1px solid rgba(53,67,98,0.25); border-radius: 3px; padding: 8px 10px;
  font-family: inherit; font-size: 13.5px; line-height: 1.5; background: #fffdf9; color: #354362;
  white-space: pre-wrap; overflow-y: auto; }
.waj-textarea:focus { outline: none; border-color: var(--color-accent); }
.waj-format-icons { display: flex; align-items: center; gap: 2px; padding: 0 0 10px; }

.waj-item-resize-handle { height: 10px; flex-shrink: 0; cursor: row-resize;
  background: rgba(241,231,219,0.03); position: relative; border-top: 1px solid rgba(241,231,219,0.1); }
.waj-item-resize-handle::after { content: ''; position: absolute; top: 3px; left: 50%; width: 36px;
  height: 3px; background: rgba(241,231,219,0.25); border-radius: 2px; transform: translateX(-50%); }

.waj-thread-row { margin-top: 16px; }
.waj-comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.waj-comment-head .waj-field-label { margin-bottom: 0; }
.waj-bell-btn { background: transparent; border: 1px solid rgba(255,128,88,0.5); border-radius: 2px;
  color: var(--color-accent); opacity: 0.8; padding: 5px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; }
.waj-bell-btn:hover { opacity: 1; background: rgba(255,128,88,0.12); }
.waj-bell-btn svg { width: 13px; height: 13px; }
.waj-bell-btn:disabled { opacity: 0.3; cursor: default; }
.waj-bell-btn.notified { background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-accent-text); opacity: 1; }

/* B3: the instructor comment became a two-way thread. Full-size, the same as the lessons
   page's own thread (decision D2) — nothing here competes with it for height. */
.waj-thread-messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
/* Speaker is read from the label and alignment alone, the same convention the notes page's
   own thread uses (notes.css) — no per-speaker colour wash. */
.waj-thread-msg { font-size: 13px; line-height: 1.5; max-width: 82%; }
.waj-thread-msg-from { font-variant: small-caps; font-weight: 600; font-size: 11px; opacity: 0.6; display: block; margin-bottom: 2px; }
.waj-thread-msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.waj-thread-msg.from-instructor { align-self: flex-start; }
.waj-thread-msg.from-student { align-self: flex-end; text-align: right; }
.waj-thread-msg.from-student .waj-thread-msg-from { text-align: right; }
.waj-thread-empty { font-size: 13px; opacity: 0.55; font-style: italic; margin: 0; }

.waj-thread-reply { display: flex; align-items: flex-end; gap: 8px; }
.waj-thread-input { flex: 1; display: block; min-height: 50px; resize: vertical;
  border: 1px solid rgba(53,67,98,0.25); border-radius: 3px; padding: 8px 10px;
  font-family: inherit; font-size: 13px; line-height: 1.5; background: #fffdf9; color: #354362; }
.waj-thread-input:focus { outline: none; border-color: var(--color-accent); }
.waj-thread-post-btn { background: var(--color-accent); color: var(--color-accent-text);
  border: none; border-radius: 2px; padding: 6px 14px; font-family: inherit;
  font-variant: small-caps; font-size: 12.5px; letter-spacing: 0.03em; cursor: pointer; flex-shrink: 0; }
.waj-thread-post-btn:hover { opacity: 0.92; }
.waj-thread-post-btn:disabled { opacity: 0.5; cursor: default; }

.waj-pagination-box { padding: 0; }
.page-size-control { display: flex; align-items: center; gap: 10px; opacity: 0.85; }
.page-size-control select { width: auto; padding: 6px 8px; font-size: 13px; }
.page-nav { display: flex; align-items: center; gap: 14px; }
.page-nav #pageIndicator { opacity: 0.75; white-space: nowrap; }
.info-action-btn { background: transparent; border: 1px solid rgba(255,128,88,0.5);
  color: var(--color-accent); border-radius: 2px; font-family: inherit; font-variant: small-caps;
  font-size: 12.5px; letter-spacing: 0.02em; padding: 7px 16px; cursor: pointer; }
.info-action-btn:hover { opacity: 1; background: rgba(255,128,88,0.12); }
.info-action-btn:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }