/* /hardware browse — family grid + filter bar + featured strip + list view.
   Inherits Platinum theme tokens (--platinum-*); falls back to OS 9 platinum
   palette where the theme hasn't set a var. */

/* Content is wrapped in `.window > .window__body` by the controller.
   `.window__body { overflow: hidden }` clips drawing but does NOT
   shrink the block's min-content. Without containment here, the
   featured strip's inflexible 200px cards (sum ≈ 1656px) propagate
   up as min-content through the .window chrome and force
   `section.content` — a grid item of `.page__main` with the default
   `min-width: auto` — to size its 1fr track to that min-content.
   `contain: inline-size` makes this element's inline-size depend
   only on external constraints; its content no longer feeds back
   into ancestor track sizing. The block axis is unaffected. */
.mac-hardware-browse {
  font-family: var(--platinum-font-ui, "Charcoal", "Chicago", -apple-system, sans-serif);
  color: var(--platinum-text, #1f2a3f);
  contain: inline-size;
}
.mac-hardware-browse img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
.hw-header {
  margin: 0 0 14px 0;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--platinum-bevel-dark, #8a94a6);
}
.hw-header__title {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -0.2px;
}
.hw-header__stat {
  margin: 0;
  font-size: 14px;
}
.hw-header__stat strong {
  font-variant-numeric: tabular-nums;
  color: var(--platinum-link, #1a5fb4);
}
.hw-header__sub {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--platinum-muted, #4a5160);
}

/* ---------- Featured strip ---------- */
.hw-feat {
  margin: 0 0 14px 0;
}
.hw-feat__strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.hw-feat__card { flex: 0 0 200px; }
.hw-feat__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 92px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--platinum-text, #1f2a3f);
  background: linear-gradient(to bottom, #f6f7fa 0%, #dfe4ee 100%);
  border: 1px solid var(--platinum-bevel-dark, #8a94a6);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 100ms ease;
}
.hw-feat__card:hover {
  box-shadow: inset 0 0 0 1px var(--platinum-link, #1a5fb4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.hw-feat__title { font-weight: bold; font-size: 13px; margin-bottom: 2px; }
.hw-feat__cap { font-size: 11px; color: var(--platinum-muted, #4a5160); }

/* ---------- Filter bar ---------- */
.hw-filterbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(to bottom, #ecedf1 0%, #d8dbe3 100%);
  border: 1px solid var(--platinum-bevel-dark, #8a94a6);
  border-radius: 5px;
  padding: 8px 10px;
  margin: 0 0 14px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.hw-filterbar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.hw-filterbar__row:last-child { margin-bottom: 0; }
.hw-filterbar__label {
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--platinum-muted, #4a5160);
  width: 38px;
  flex-shrink: 0;
}
.hw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

/* OS 9 toggle button — bevelled platinum, square corners. */
.hw-pill {
  appearance: none;
  cursor: pointer;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--platinum-text, #1f2a3f);
  background: linear-gradient(to bottom, #fdfdfd 0%, #d6dae3 100%);
  border: 1px solid #6f7787;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.hw-pill:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #c8ccd6 100%);
}
.hw-pill[aria-pressed="true"] {
  background: linear-gradient(to bottom, #6f7e98 0%, #485267 100%);
  color: #fff;
  border-color: #2f3a52;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* View toggle — pushed right, same look as pills but grouped. */
.hw-viewtoggle {
  display: inline-flex;
  margin-left: auto;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #6f7787;
}
.hw-viewbtn {
  appearance: none;
  cursor: pointer;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  background: linear-gradient(to bottom, #fdfdfd 0%, #d6dae3 100%);
  color: var(--platinum-text, #1f2a3f);
  border: none;
  border-right: 1px solid #6f7787;
}
.hw-viewbtn:last-child { border-right: none; }
.hw-viewbtn[aria-checked="true"] {
  background: linear-gradient(to bottom, #6f7e98 0%, #485267 100%);
  color: #fff;
}
.hw-viewbtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Family grid ---------- */
.hw-fam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  min-width: 0;
}

.hw-fam {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--platinum-text, #1f2a3f);
  background: #fff;
  border: 1px solid #c6ccd6;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition: box-shadow 100ms ease, border-color 100ms ease;
}
.hw-fam:hover {
  /* OS 9 inset — no modern lift shadow. */
  border-color: var(--platinum-link, #1a5fb4);
  box-shadow: inset 0 0 0 1px var(--platinum-link, #1a5fb4);
}
.hw-fam.is-hidden { display: none; }

.hw-fam__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(to bottom, #eef1f5 0%, #dbe0e9 100%);
  border-bottom: 1px solid #d8dde6;
  overflow: hidden;
}
.hw-fam__img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 8px; }
.hw-fam__placeholder { opacity: 0.55; }

.hw-fam__meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.hw-fam__name { font-weight: bold; font-size: 13px; }
.hw-fam__sub { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.hw-fam__count {
  font-size: 11px;
  color: var(--platinum-muted, #4a5160);
  font-variant-numeric: tabular-nums;
}
.hw-fam__era {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border: 1px solid #a4bde0;
  border-radius: 3px;
  background: linear-gradient(to bottom, #fff 0%, #d6e4f7 100%);
  color: #0b2a57;
  white-space: nowrap;
}

/* ---------- List view ---------- */
.hw-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  border: 1px solid #c6ccd6;
}
.hw-list thead th {
  position: sticky;
  top: 0;
  cursor: pointer;
  text-align: left;
  padding: 6px 8px;
  background: linear-gradient(to bottom, #ecedf1 0%, #d8dbe3 100%);
  border-bottom: 1px solid var(--platinum-bevel-dark, #8a94a6);
  font-weight: bold;
  user-select: none;
}
.hw-list thead th[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }
.hw-list thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }
.hw-list tbody td { padding: 4px 8px; border-bottom: 1px solid #ececec; }
.hw-list tbody tr.is-hidden { display: none; }
.hw-list tbody tr:hover { background: #f5f8fc; }

/* ---------- Empty / placeholder ---------- */
.hw-view__empty {
  padding: 24px;
  text-align: center;
  color: var(--platinum-muted, #4a5160);
  border: 1px dashed #c6ccd6;
  border-radius: 5px;
  font-size: 13px;
}
.hw-view--icon .hw-view__empty,
.hw-view--list .hw-view__empty { display: none; }

/* ---------- Sidebar Filter Overrides (Task 2) ---------- */
.sidebar .window__body .views-exposed-form {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.sidebar .views-exposed-form .form-item {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.sidebar .views-exposed-form label {
  font-family: var(--platinum-font-ui);
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 4px;
  text-transform: uppercase;
  color: var(--platinum-muted);
}

.sidebar .views-exposed-form select {
  appearance: none;
  background: linear-gradient(to bottom, #ffffff 0%, #e4e4e4 50%, #d1d1d1 100%);
  border: 1px solid #000;
  border-radius: 0;
  padding: 3px 24px 3px 8px;
  font-family: var(--platinum-font-ui);
  font-size: 12px;
  box-shadow: 
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #888,
    1px 1px 0 rgba(0,0,0,0.1);
  cursor: pointer;
  width: 100%;
}

.sidebar .views-exposed-form .form-type-select {
  position: relative;
}

.sidebar .views-exposed-form .form-type-select::after {
  content: "▾";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 10px;
  font-weight: bold;
}

/* ---------- Grouped Grid Layout (Task 3) ---------- */
.hw-group-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  grid-column: 1 / -1;
  width: 100%;
}

.hw-group-title {
  font-family: var(--platinum-font-ui);
  font-size: 13px;
  font-weight: bold;
  background: var(--platinum-window-bg);
  padding: 0 8px;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hw-group-line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(to bottom, #999 0, #999 1px, #fff 1px, #fff 2px);
  border-top: 1px solid #000;
}

/* ---------- Refined Placeholders (Task 5) ---------- */
.hw-card__placeholder {
  width: 56px;
  height: 56px;
  background: #e4e4e4;
  border: 1px solid #888;
  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.1);
  position: relative;
  opacity: 0.5;
}

.hw-card__placeholder::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--platinum-font-ui);
  font-size: 32px;
  color: #999;
  text-shadow: 1px 1px 0 #fff;
}