/* Public update index: reader-facing article chronology, not an editorial log. */

.hh-page--updates-index .hh-layout-shell {
  width: min(1060px, calc(100% - 2rem));
}

.hh-page--updates-index main {
  padding-bottom: 3rem;
}

.hh-update-hero,
.hh-update-controls,
.hh-update-results,
.hh-update-note {
  border: 1px solid var(--px-line);
  border-radius: .2rem;
  background: var(--px-panel);
}

.hh-update-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
  padding: 1.4rem 1.5rem;
}

.hh-update-hero > div > p:first-child,
.hh-update-controls header p,
.hh-update-results > header p {
  margin: 0 0 .15rem;
  color: var(--px-blue);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.hh-update-hero h1 {
  margin: 0;
  color: var(--px-text);
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  line-height: 1.25;
}

.hh-update-hero > div > p:last-child {
  max-width: 70ch;
  margin: .45rem 0 0;
  color: #59636b;
}

.hh-update-hero dl {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: .55rem;
  margin: 0;
}

.hh-update-hero dl div {
  min-width: 7rem;
  padding: .6rem .75rem;
  border-left: 3px solid var(--px-cyan);
  background: var(--px-panel-soft);
}

.hh-update-hero dt {
  color: var(--px-muted);
  font-size: .62rem;
}

.hh-update-hero dd {
  margin: .1rem 0 0;
  color: var(--px-blue-dark);
  font-size: .86rem;
  font-weight: 700;
}

.hh-update-shortcuts {
  display: flex;
  gap: 0;
  margin: .55rem 0 1rem;
  overflow-x: auto;
  border: 1px solid var(--px-line);
  background: #e9edef;
}

.hh-update-shortcuts a {
  flex: 0 0 auto;
  padding: .55rem .9rem;
  border-right: 1px solid var(--px-line);
  color: #59636b;
  font-size: .7rem;
  font-weight: 700;
}

.hh-update-shortcuts a[aria-current="page"] {
  background: var(--px-panel);
  color: var(--px-blue);
}

.hh-update-controls,
.hh-update-results {
  padding: 1rem 1.15rem;
}

.hh-update-controls header,
.hh-update-results > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.hh-update-controls h2,
.hh-update-results h2 {
  margin: 0;
  font-size: 1.05rem;
}

.hh-update-controls header button {
  padding: .25rem 0;
  border: 0;
  background: transparent;
  color: var(--px-blue);
  cursor: pointer;
  font: inherit;
  font-size: .68rem;
}

.hh-update-controls > div {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(12rem, .8fr) minmax(12rem, .8fr);
  gap: .7rem;
}

.hh-update-controls label {
  display: grid;
  gap: .3rem;
  color: #535c64;
  font-size: .66rem;
  font-weight: 700;
}

.hh-update-controls input,
.hh-update-controls select {
  width: 100%;
  min-height: 2.7rem;
  padding: .55rem .65rem;
  border: 1px solid var(--px-line-strong);
  border-radius: .15rem;
  background: #fff;
  color: var(--px-text);
  font: inherit;
  font-size: .78rem;
}

.hh-update-controls [role="status"] {
  margin: .8rem 0 0;
  color: var(--px-muted);
  font-size: .68rem;
}

.hh-update-results {
  margin-top: 1rem;
}

.hh-update-date-group + .hh-update-date-group {
  margin-top: 1.2rem;
}

.hh-update-date-group h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .55rem .7rem;
  border-left: 4px solid var(--px-cyan);
  background: var(--px-panel-soft);
  color: var(--px-blue-dark);
  font-size: .82rem;
}

.hh-update-date-group h3 span {
  color: var(--px-muted);
  font-size: .65rem;
  font-weight: 600;
}

.hh-update-list,
.hh-update-noscript {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hh-update-card {
  min-width: 0;
  padding: .9rem .75rem;
  border-bottom: 1px solid var(--px-line);
}

.hh-update-card:nth-child(odd) {
  border-right: 1px solid var(--px-line);
}

.hh-update-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin: 0 0 .25rem;
  color: var(--px-muted);
  font-size: .61rem;
}

.hh-update-card__meta span {
  color: var(--px-blue);
  font-weight: 700;
}

.hh-update-card h4 {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
}

.hh-update-card h4 a {
  color: var(--px-blue-dark);
}

.hh-update-card__description {
  display: -webkit-box;
  margin: .35rem 0 0;
  overflow: hidden;
  color: #626b72;
  font-size: .69rem;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hh-update-more {
  display: block;
  min-width: 14rem;
  margin: 1.2rem auto .2rem;
  padding: .7rem 1rem;
  border: 1px solid var(--px-blue);
  border-radius: .2rem;
  background: #fff;
  color: var(--px-blue);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
}

.hh-update-more[hidden] {
  display: none;
}

.hh-update-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--px-muted);
}

.hh-update-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  color: #606a72;
  font-size: .68rem;
}

.hh-update-note strong {
  color: var(--px-blue-dark);
}

.hh-update-note p {
  margin: 0;
}

@media (max-width: 760px) {
  .hh-update-hero {
    grid-template-columns: 1fr;
  }

  .hh-update-hero dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hh-update-controls > div {
    grid-template-columns: 1fr;
  }

  .hh-update-list,
  .hh-update-noscript {
    grid-template-columns: 1fr;
  }

  .hh-update-card:nth-child(odd) {
    border-right: 0;
  }
}

@media (max-width: 460px) {
  .hh-page--updates-index .hh-layout-shell {
    width: min(100% - 1rem, 1060px);
  }

  .hh-update-hero,
  .hh-update-controls,
  .hh-update-results {
    padding: .9rem;
  }

  .hh-update-hero dl {
    gap: .4rem;
  }

  .hh-update-hero dl div {
    min-width: 0;
  }

  .hh-update-note {
    grid-template-columns: 1fr;
  }
}