/*##############################################################################
# Script:        lookups.css         (stylesheet, loaded by frontend/pages/wisdom.html: its Lookups tab)
# Created by:    Matthew Boucher
# Start date:    2026-10-21
# Location:      <project root>/frontend/css/lookups.css   (main script: <project root>/aiacolyte.py)
# Description:   The Lookups tab of /wisdom (admin class only): its three tabs (My footprint, Organization, Search
#                shortcuts) drawn like the tarot tabs, the forms, and the results as groups of links under gold
#                headings, the organization's records as a list and a table of facts. Stacks on a phone.
# Reads:         the colour tokens of styles.css
# Writes:        nothing
# Arguments:     none (a stylesheet cannot take flags); aiacolyte.py --checkup confirms it is in place
##############################################################################*/

.lookups-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.lookups-tabs__tab {
  appearance: none;
  cursor: pointer;
  margin-bottom: -1px;
  padding: 0.55em 1.1em;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
}

.lookups-tabs__tab:hover {
  color: var(--gold-bright);
}

.lookups-tabs__tab:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.lookups-tabs__tab[aria-selected="true"] {
  color: var(--gold-bright);
  border-color: var(--line);
  border-bottom-color: var(--ink-1);
  background: rgba(227, 176, 75, 0.06);
}

.lookups-panel[hidden] {
  display: none;
}

.lookups-form {
  max-width: 760px;
  margin-bottom: 1.4rem;
}

.lookups-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.lookups-group {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 8, 20, 0.55);
  min-width: 0;
}

.lookups-group h3 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  overflow-wrap: anywhere;
}

.lookups-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lookups-group li {
  padding: 0.3em 0;
  border-top: 1px solid rgba(227, 176, 75, 0.12);
}

.lookups-group li:first-child {
  border-top: 0;
}

.lookups-group a {
  color: var(--text);
  overflow-wrap: anywhere;
}

.lookups-group a:hover,
.lookups-group a:focus-visible {
  color: var(--gold-bright);
}

.lookups-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.lookups-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3em 1em;
  margin: 0;
}

.lookups-facts dt {
  color: var(--text-dim);
}

.lookups-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.lookups-results > .admin-note,
.lookups-results > .admin-error {
  grid-column: 1 / -1;
}

/*##############################################################################
# End of lookups.css
##############################################################################*/