/* memory.css
 * Extracted from public/styles.css (Phase 0.3).
 * Lazy-loaded by public/modules/panels/nav.js on openPanel('memory')
 * or relevant tab switch in switchMode().
 */

.memory-card {
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-md);
  padding: 16px;
  margin-bottom: 10px;
}

.memory-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.memory-id {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.memory-type {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  padding: 2px 8px;
  border-radius: var(--md-sys-shape-corner-sm);
}

.memory-tags {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.memory-score {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: 600;
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-primary);
  margin-left: auto;
}

.memory-card-body {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memory-card-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

/* ── Wide layout ──────────────────────────────────────────────────────────────
   Memory was the worst casualty of the old host bug: the panel shrink-to-fit to
   a 385px sliver in a 1440px window because its widest child was the search row.
   The results are independent cards, so the space buys COLUMNS, not a longer
   line. See public/styles/panel-layout.css for the host contract.

   Everything below is prefixed with the host's data-panel stamp. .panel-results,
   .panel-search-row and .panel-actions-row are GENERIC shared classes — the last
   one is also used by the notifications panel — so a bare selector here would be
   the same cross-panel leak this whole change exists to kill. */

@media (min-width: 768px) and (min-height: 500px) {
  #panel-content[data-panel='memory'] .panel-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 12px;
    align-items: start;
  }
  /* The card carried its own vertical rhythm for the old single-column stack.
     In a grid the gap owns spacing, so the margin would double it. */
  #panel-content[data-panel='memory'] .panel-results > .memory-card { margin-bottom: 0; }
  /* Empty/raw states are not cards and should not be squeezed into one track. */
  #panel-content[data-panel='memory'] .panel-results > .panel-empty,
  #panel-content[data-panel='memory'] .panel-results > .panel-raw { grid-column: 1 / -1; }
}

/* The search and action rows are controls, not content. Letting them run to
   1560px would put the type filter a screen away from the query box. */
@media (min-width: 1024px) {
  #panel-content[data-panel='memory'] .panel-search-row,
  #panel-content[data-panel='memory'] .panel-actions-row { max-width: 720px; }
}