/* ED28 V2 Stage 2C -- History page composition.
   Same posture as home.css/draw.css: only page-scoped layout, every
   value is a Frontend Foundation token. history-* prefixed. */

.history-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 420px) {
  .history-filter-grid { grid-template-columns: 1fr; }
}
.history-filter-actions {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-3);
}

/* Stage 2F.8: compact top row (期号 + 查询 + 筛选 trigger + 清除) --
   always visible, on every viewport. */
.history-filter-compact {
  display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap;
}
.history-filter-compact .field { min-width: 180px; flex: 1 1 200px; }

/* <=640px: history-filter-sheet is a real Bottom Sheet (base .sheet CSS
   from frontend/components/sheet.css handles the fixed/hidden/open
   states -- nothing to add here). >640px: same markup, same <form>,
   rendered as a plain inline section instead -- no fixed positioning, no
   open/close chrome, no second trigger button (spec 十七: advanced
   filters were never a problem on desktop, only "占据 Mobile 首屏"). */
@media (min-width: 641px) {
  .history-filter-open-sheet { display: none; }
  .history-filter-sheet.sheet {
    position: static; transform: none; max-height: none; box-shadow: none;
    border: none; border-radius: 0; background: transparent;
    margin-top: var(--space-4);
  }
  .history-filter-sheet .sheet-handle,
  .history-filter-sheet .sheet-header,
  .history-filter-sheet .sheet-footer { display: none; }
  .history-filter-sheet .sheet-body { padding: 0; overflow: visible; }
  .history-filter-sheet .history-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.history-keno-cell { max-width: 220px; }
.history-keno-cell details summary { cursor: pointer; list-style: none; }
.history-keno-cell details summary::-webkit-details-marker { display: none; }
.history-keno-cell .keno-pill-row { max-width: 320px; }

/* Stage 2F.18: "未开间隔" summary row (spec 十三) -- 8 fixed dimension
   cells (大/小/单/双/大单/大双/小单/小双), same visual language as the
   badge components used everywhere else on the page. */
.history-omission-row .panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.history-omission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.history-omission-cell {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface-3); border-radius: var(--radius-md);
}
@media (max-width: 640px) {
  .history-omission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stage 2F.18 spec 十一: dimension quick-filter chips -- highlight the
   selected dimension's badges, dim (never hide) the rest so the draw
   sequence stays fully visible (spec explicitly forbids removing
   context). Pure CSS class toggle driven by history.js; degrades to
   "全部" (no-op) with JS disabled. */
.history-dim-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--space-4);
}
.dim-chip {
  padding: 4px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: var(--bg-surface-2);
  color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 600;
  cursor: pointer;
}
.dim-chip.is-active { background: var(--brand-500); border-color: var(--brand-500); color: var(--text-on-brand, #fff); }
/* [data-active-dim="X"] is set by history.js on the shared ancestor
   (.card wrapping both the desktop table and the mobile card list) --
   every [data-dim] element inside dims except the ones whose own
   data-dim matches X (pure attribute-selector matching, no per-dimension
   class duplication needed). */
[data-active-dim] [data-dim] { opacity: 0.35; transition: opacity 0.15s; }
[data-active-dim="size"] [data-dim="size"],
[data-active-dim="parity"] [data-dim="parity"],
[data-active-dim="combination"] [data-dim="combination"],
[data-active-dim="pattern"] [data-dim="pattern"],
[data-active-dim="dragon_tiger"] [data-dim="dragon_tiger"],
[data-active-dim="span"] [data-dim="span"] { opacity: 1; }

/* Stage 2F.18 spec 二十一/二十二: Mobile gets a real card-per-row list,
   never a squeezed 11-column table (hard gate). Both markups render
   server-side; CSS picks one per breakpoint -- same "one <form>, two
   layouts" posture history-filter-sheet already established above. */
.history-mobile-cards { display: none; }
@media (max-width: 640px) {
  .history-desktop-table { display: none; }
  .history-mobile-cards { display: flex; flex-direction: column; gap: var(--space-3); }
  .history-mobile-card { padding: var(--space-4); }
  .history-mobile-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
}