/* objects: the index. WORKING page: search and filters stand to the left, the list by tonight to the right. Tone and space,
   no boxes. One live state in the accent: up now. */

html[data-mode='red'] .objs { --accent: var(--ink); }

.objs .page-title { font-size: var(--fs-2); line-height: 1.08; letter-spacing: -.012em; }
.objs-lead { max-width: 46ch; }
.objs-place { display: inline; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--ink-faint); transition: text-decoration-color var(--touch) var(--shutter); }
.objs-place:hover { text-decoration-color: var(--accent); }

.objs-body { margin-top: var(--sp-9); display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); align-items: start; }
.objs-tools { position: sticky; top: calc(var(--bar-h) + var(--sp-5)); display: grid; gap: var(--sp-5); }
.objs-q { font-size: 17px; }
.objs-q::-webkit-search-cancel-button { filter: grayscale(1); }
.objs-kinds { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.objs-kind { min-height: 44px; padding: 0 var(--sp-4); margin-left: calc(-1 * var(--sp-4)); border-radius: 999px; color: var(--ink-soft); text-align: left;
  transition: background var(--touch) var(--shutter), color var(--touch) var(--shutter), transform var(--sheet) var(--hand); }
.objs-kind:hover { color: var(--ink); background: var(--ground-up); }
.objs-kind:active { transform: scale(.96); }
.objs-kind[aria-pressed='true'] { color: var(--ink); background: var(--ground-hi); font-weight: 600; }

.objs-list { min-width: 0; min-height: 60svh; }
.objs-list[aria-busy='true'] .ob-when { visibility: hidden; }
.objs-group + .objs-group { margin-top: var(--sp-8); }
.objs-group-title { font-size: var(--fs-3); font-weight: 470; font-stretch: var(--wide); line-height: 1.15; letter-spacing: -.008em; padding-bottom: var(--sp-3); max-width: 28ch; }
.objs-group-title span, .ob-name span { display: inline-block; transform-origin: left center; }
.objs-note { color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--sp-4); }

.objs-rows { display: grid; }
/* rows out of view skip layout and paint: a page change lays out only what is on screen */
.ob-link { content-visibility: auto; contain-intrinsic-size: auto 132px; }
.ob-link { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; padding: var(--sp-4); margin: 0 calc(-1 * var(--sp-4));
  border-radius: 18px; text-decoration: none; transition: background var(--touch) var(--shutter); }
.ob-link:hover, .ob-link:focus-visible { background: var(--ground-up); }
.ob-text { display: grid; gap: var(--sp-1); min-width: 0; }
.ob-name { font-size: var(--fs-3); font-weight: 500; font-stretch: 116%; line-height: 1.18; }
.ob-name span { transition: transform var(--sheet) var(--shutter); }
.ob-link:hover .ob-name span { transform: scaleX(1.035); }
.ob-what { color: var(--ink-soft); }
.ob-when { color: var(--ink); max-width: 58ch; }
.ob-live { color: var(--accent); font-weight: 600; }

/* the object as a point of light: its size is its brightness */
.ob-pt { justify-self: center; margin-top: calc(var(--fs-3) * .59 - var(--d) / 2); width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 calc(var(--d) * .9) calc(var(--d) * .1) rgb(232 235 242 / 28%); }
.ob-pt--ring { background: none; box-shadow: none; border: 1.5px solid var(--ink-soft); width: calc(var(--d) + 8px); height: calc(var(--d) + 8px); margin-top: calc(var(--fs-3) * .59 - var(--d) / 2 - 4px); }
html[data-mode='red'] .ob-pt { box-shadow: none; }
.is-live .ob-pt:not(.ob-pt--ring) { background: var(--accent); }
.is-live .ob-pt--ring { border-color: var(--accent); }

.objs-empty, .objs-error p { font-size: var(--fs-lead); line-height: 1.32; max-width: 34ch; }
.objs-error .act { margin-top: var(--sp-5); }

/* filtering and search redraw the names: they draw out sideways, like a trail, then rest */
.js .objs-list.is-redrawing [data-draw] { animation: draw var(--sheet) var(--shutter) both; animation-delay: calc(min(var(--i, 0), 9) * 28ms); }
.js .objs-list.is-redrawing .objs-group-title [data-draw] { animation-delay: 0ms; }

@media (max-width: 1023px) {
  .objs-body { grid-template-columns: minmax(0, 1fr); }
  .objs-tools { position: static; margin-bottom: var(--sp-7); }
  .objs-kinds { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
  .objs-kind { margin-left: 0; background: var(--ground-up); }
  .objs-kind[aria-pressed='true'] { background: var(--ground-hi); box-shadow: inset 0 0 0 2px var(--ground-hi); }
}
@media (max-width: 640px) {
  .objs-body { margin-top: var(--sp-8); }
  .objs-kinds { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--edge)); padding-inline: var(--edge); }
  .objs-kinds::-webkit-scrollbar { display: none; }
  .objs-kind { flex: none; }
  .ob-link { grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); margin: 0 calc(-1 * var(--sp-3)); }
}
@media (hover: none) { .ob-link:hover { background: none; } .ob-link:hover .ob-name span { transform: none; } }