/* reference-cards.css
   Shared by the reference-card pages: HTML Element Reference, HTML Attribute
   Reference, CSS Property Reference. Loaded after tools.css. Nothing in here
   is specific to any one of the three -- page-specific colors (dot meanings,
   category palettes) are set inline per element by each page's own PHP,
   since the same three CSS classes (.dot-moss, .dot-blue, etc.) carry
   different meanings depending which reference page they appear on. */

/* ---------- toolbar: search, random, CSV, result count ---------- */

.ref-toolbar{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ref-search{
  flex: 1 1 240px;
  min-width: 180px;
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 10px 14px;
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.ref-search:focus{ outline: none; box-shadow: 3px 3px 0 var(--purple); }
.ref-toolbar .text-btn{
  background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: .88rem; font-weight: 700;
  color: var(--orange-dark); padding: 6px 8px; white-space: nowrap;
}
.ref-toolbar .text-btn:hover{ text-decoration: underline; }
.ref-result-count{
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  opacity: .75;
  white-space: nowrap;
  margin-left: auto;
}

.ref-loading{
  display: inline-block;
  width: 16px; height: 16px;
  border: 3px solid var(--soft-grey);
  border-top-color: var(--moss);
  border-radius: 50%;
  animation: ref-spin .7s linear infinite;
  vertical-align: middle;
}
.ref-loading.hidden{ display: none; }
@keyframes ref-spin{ to{ transform: rotate(360deg); } }

/* ---------- key / legend ---------- */

.ref-key{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: var(--white);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
  font-size: .85rem;
}
.ref-key-title{ font-weight: 800; }
.ref-key-row{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ref-key-item{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* ---------- facet chips ---------- */

.ref-facets{ margin-bottom: 20px; }
.filter-facet-group{ margin-bottom: 14px; }
.filter-facet-label{
  display: block;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--orange-dark);
  margin-bottom: 8px;
}
.filter-chip-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip{
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-chip:hover{ background: var(--soft-grey); }
.filter-chip.active{ background: var(--ink); color: var(--white); }
.filter-chip .chip-count{ opacity: .65; font-weight: 600; margin-left: 4px; }
.filter-chip.active .chip-count{ opacity: .85; }

.ref-match-toggle{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: .9rem;
  font-weight: 700;
}
.ref-match-toggle .toggle-label-and,
.ref-match-toggle .toggle-label-or{ opacity: .5; }
.ref-match-toggle:not(.or-mode) .toggle-label-and{ opacity: 1; }
.ref-match-toggle.or-mode .toggle-label-or{ opacity: 1; }

.ref-clear-row{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }

.ref-isolate-badge{
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 18px;
  background: var(--purple-light);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
  font-size: .9rem;
  font-weight: 700;
}
.ref-isolate-badge.show{ display: flex; }
.ref-isolate-badge button{
  background: none; border: none; cursor: pointer; font-weight: 800; color: var(--red-dark); font-size: .9rem;
}

.ref-app [title]:not(button):not(a){ cursor: help; }

/* ---------- card grid ---------- */

.ref-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  align-items: start; /* each card sizes to its own content -- opening one
                          card must not stretch its row-mates to match */
}

.ref-card{
  background: var(--white);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.ref-card[data-flash]{ box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--moss-dark), 0 0 0 3px var(--moss); }
.ref-card.ref-hidden{ display: none; }

.ref-card-summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  position: relative;
}
.ref-card-summary::-webkit-details-marker{ display: none; }
.ref-card-summary::marker{ content: ''; }

.ref-card-expand{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  transition: transform .15s ease;
  background: var(--white);
}
.ref-card[open] .ref-card-expand{ transform: rotate(45deg); }

.ref-card-name{
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
  margin-right: 32px;
  margin-bottom: 8px;
  word-break: break-word;
}
.ref-card-pill{
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
button.ref-card-pill{
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.ref-card-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .96rem;
  margin-bottom: 12px;
}
.ref-card-status{ font-weight: 800; }
.ref-card-year{
  font-family: 'DM Mono', ui-monospace, monospace;
  color: var(--ink);
  opacity: .8;
}
button.ref-card-year{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  color: var(--purple-dark);
  opacity: 1;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.dot-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}
.dot{
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: inline-block;
  flex-shrink: 0;
}
.dot-moss{ background: #4b7a44; }
.dot-blue{ background: #3b82c4; }
.dot-amber{ background: #c1892b; }
.dot-orange{ background: #c1592b; }
.dot-purple{ background: #6c4b91; }
.dot-brown{ background: #6b4a34; }
.dot-red{ background: #a4362c; }
.dot-grey-dark{ background: #6b6558; }
.dot-grey-light{ background: #d8d4c8; }

.ref-card-body{
  border-top: var(--border-width) solid var(--ink);
  padding: 14px 16px 16px;
  background: var(--soft-grey);
}
.ref-field-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(30, 42, 68, .1);
  font-size: .88rem;
}
.ref-field-row:last-of-type{ border-bottom: none; }
.ref-field-label{ font-weight: 800; color: var(--ink); flex-shrink: 0; cursor: help; }
.ref-field-value{ text-align: right; color: var(--ink); }
.ref-card-desc{
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(30, 42, 68, .1);
}
.ref-longer-desc{
  font-size: .84rem;
  color: var(--ink);
  opacity: .85;
  margin: 10px 0 0;
}

.ref-era-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ref-era-chip{
  font-size: .76rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  white-space: nowrap;
}
.ref-era-chip.on{ background: var(--moss); color: #fff; }
.ref-era-chip.off{ background: var(--white); color: var(--ink); opacity: .45; }

.ref-more-info{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(30, 42, 68, .1);
}
.ref-more-info-title{ font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-dark); margin-bottom: 6px; }
.ref-more-info p{ font-size: .9rem; margin: 0 0 8px; }
.ref-doc-links{ display: flex; flex-direction: column; gap: 4px; }
.ref-doc-links a{ font-size: .85rem; font-weight: 700; }

.ref-empty{
  text-align: center;
  padding: 48px 20px;
  font-size: 1.05rem;
  color: var(--ink);
  opacity: .7;
}

.ref-load-more-row{ display: flex; justify-content: center; margin: 24px 0 8px; }

/* ---------- generation popover ---------- */

.gen-popover{
  position: fixed;
  z-index: 40;
  max-width: 320px;
  background: var(--white);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
  padding: 14px 16px;
  font-size: .88rem;
}
.gen-popover.hidden{ display: none; }
.gen-popover-name{ font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; margin: 0 0 6px; }
.gen-popover-desc{ margin: 0 0 8px; color: var(--ink); }
.gen-popover-note{ margin: 0 0 10px; padding-left: 16px; color: var(--ink); opacity: .85; }
.gen-popover-links{ display: flex; flex-direction: column; gap: 4px; }
.gen-popover-links a{ font-size: .85rem; font-weight: 700; }
.gen-popover-close{
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--ink); opacity: .6;
}
.gen-popover-close:hover{ opacity: 1; }

@media (max-width: 760px){
  .ref-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ref-result-count{ margin-left: 0; }
}