/* presentation.css — full-screen palette view. Depends on tokens.css. */
.pr-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  animation: fadeIn var(--dur-2) var(--ease);
}

.pr-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border-soft);
}
.pr-title {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pr-tabs { display: flex; gap: var(--s-1); margin: 0 auto; }
.pr-tab {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.pr-tab:hover { color: var(--ink); }
.pr-tab[aria-selected="true"] { color: var(--ink); background: var(--surface-2); }
.pr-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.pr-close:hover { color: var(--ink); }

.pr-stage { flex: 1 1 auto; min-height: 0; display: flex; }

/* Palette — full-height columns; hover swells the column (Coolors feel). */
.pr-strip { flex: 1; display: flex; }
.pr-col {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  cursor: copy;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--s-8) var(--s-2);
  transition: flex-grow var(--dur-2) var(--ease);
}
.pr-col:hover { flex-grow: 1.5; }
.pr-info { display: grid; gap: 3px; text-align: center; }
.pr-name { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: var(--w-semi); opacity: 0.96; }
.pr-hex { font-family: var(--font-mono); font-size: var(--t-label); opacity: 0.82; letter-spacing: 0.06em; }

/* Scales / Harmonies — stacked full-height rows. */
.pr-rows { flex: 1; display: flex; flex-direction: column; }
.pr-row { flex: 1 1 0; min-height: 0; display: flex; }
.pr-row-label {
  flex: 0 0 auto;
  width: 168px;
  display: flex;
  align-items: center;
  padding: 0 var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-2);
  border-right: 1px solid var(--border-soft);
}
.pr-row-cells { flex: 1; display: flex; }
.pr-cell {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  cursor: copy;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--s-3);
}
.pr-cell .pr-name { display: none; }
.pr-cell .pr-hex { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.pr-cell:hover .pr-hex { opacity: 0.9; }

.pr-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}

@media (max-width: 640px) {
  .pr-strip { flex-wrap: wrap; }
  .pr-col { flex: 1 0 33%; min-height: 33%; padding: var(--s-4) var(--s-1); }
  .pr-col:hover { flex-grow: 1; }
  .pr-row-label { width: 84px; padding: 0 var(--s-2); font-size: var(--t-micro); }
}