/* The constellation picker, gallery, constellation page and list. After demo.css; the family's variables and buttons. */
.picker { display: grid; gap: 6px; margin: 0 0 12px; }
.picker .fam-row { flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.picker input[type="search"] { flex: 1 1 14rem; min-width: 0; max-width: 28rem; }
/* the sky culture: three choices stacked at the left of the strip, as tall as a card (the cards are tall enough for three 48 px buttons) */
.picker-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.picker-row > .picker-strip { flex: 1 1 auto; min-width: 0; }
.culture-stack { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; width: 96px; padding: 4px 0 8px; }
.culture-stack button { flex: 1 1 0; min-height: 48px; min-width: 0; padding: 0 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.culture-stack button:hover { border-color: var(--accent); }
.culture-stack button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.culture-stack button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the same three choices in a row, for the gallery and the list */
.culture-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.culture-row button { min-height: 48px; min-width: 96px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.culture-row button:hover { border-color: var(--accent); }
.culture-row button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.culture-row button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* on a figure's own page the three choices are links, each to the figure of that sky that stands for this one */
.culture-row a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 96px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 600; text-decoration: none; }
.culture-row a:hover { border-color: var(--accent); }
.culture-row a[aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.culture-row a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.picker-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pick-tile { flex: 0 0 auto; width: 132px; display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: center; gap: 3px; padding: 6px 4px 6px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; scroll-snap-align: start; }
.pick-tile[hidden] { display: none; }
.pick-tile img { display: block; width: 120px; height: 120px; border-radius: 6px; background: var(--rule); }
/* every card, in every sky, is the same block: the picture, the name (room for two lines, centred in it) and one small line (one line, cut with an ellipsis, the whole of it in the card's title), so no card is taller than another */
.pick-tile span { max-width: 100%; text-align: center; overflow: hidden; }
.pick-tile span:first-of-type { display: flex; align-items: center; justify-content: center; box-sizing: content-box; height: 2.4em; font-size: .85rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.pick-tile .pick-sub { font-size: .72rem; color: var(--muted); line-height: 1.2; height: 1.2em; white-space: nowrap; text-overflow: ellipsis; }
.pick-tile:hover { border-color: var(--accent); }
.pick-tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pick-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the same cards in a grid, for a list of constellations in a column (the Neighbours of a constellation, the Nearby panel): as many to a row as fit, the pictures as wide as the cell */
.pick-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.pick-grid > li { display: grid; min-width: 0; }
.pick-grid .pick-tile { width: auto; min-width: 0; text-decoration: none; }
.pick-grid .pick-tile img { width: 100%; height: auto; aspect-ratio: 1; }

/* the gallery */
.gl-title { margin: 0 0 4px; font-size: 1.4rem; }
.gallery .fam-row, .cpage .fam-row { flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gallery input[type="search"], .clist input[type="search"] { flex: 1 1 14rem; min-width: 0; max-width: 28rem; }
.clist .fam-row { flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gl-grid { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gl-grid > li { display: grid; min-width: 0; }
.gl-tile { align-content: start; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.gl-tile:hover { border-color: var(--accent); }
.gl-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gl-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: var(--rule); }
/* the same block as the strip's card: the name (room for two lines, centred in it) and one small line */
.gl-name { display: flex; align-items: center; justify-content: center; text-align: center; height: 2.5em; margin-top: 4px; font-weight: 600; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; }
.gl-sub { display: block; text-align: center; color: var(--muted); font-size: .8rem; line-height: 1.2; height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-mix { margin: 4px 0 0; }
.gl-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.gl-pager .fam-button[aria-current="page"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); font-weight: 700; }

/* a constellation's own page */
.cpage h2 { font-size: 1rem; margin: 18px 0 6px; }
.cp-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .cp-grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } }
.cp-picture img { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--rule); }
.cp-files { margin-top: 8px; }
#cp-files { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-side h2:first-child { margin-top: 0; }
.cp-links { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-links a, .cp-files a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--ink); }
.cp-turn { margin-top: 20px; justify-content: space-between; }
/* the same stars in the other two skies, side by side on a desk and one under the other on a phone */
.cp-compare { display: grid; gap: 14px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cp-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-column { min-width: 0; }
.cp-column h3 { margin: 0 0 4px; font-size: .95rem; }
.cp-column .fam-fine { margin: 0 0 8px; }
.cp-column .pick-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.cp-limits { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }

/* the list */
/* the filter bar: a chip for each filter on a desk (a menu of its choices under it), one Filters button and a sheet on a phone */
/* the chips take the room left and wrap inside it, so the count and Clear all stay on the first line whatever the font's width */
.ls-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin: 8px 0; }
.ls-chips { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ls-chip { position: relative; }
.ls-chip-button, .ls-choice { min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 600; }
.ls-chip-button { display: inline-flex; align-items: center; white-space: nowrap; }
.ls-chip-button::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ls-chip-button[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.ls-chip-value { margin-left: 4px; font-weight: 500; color: var(--muted); }
.ls-on > .ls-chip-button, .ls-open.ls-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ls-on .ls-chip-value { color: var(--ink); font-weight: 700; }
.ls-chip-button:hover, .ls-choice:hover { border-color: var(--ink); }
.ls-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 100%; display: grid; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.ls-menu-right { left: auto; right: 0; }
.ls-menu-grid { grid-template-columns: repeat(4, minmax(4.2rem, 1fr)); }
.ls-item { position: relative; min-height: 44px; padding: 0 14px 0 30px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; white-space: nowrap; font-size: .85rem; }
.ls-item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ls-item[aria-checked="true"] { font-weight: 700; }
.ls-item[aria-checked="true"]::before { content: "\2713"; position: absolute; left: 10px; color: var(--accent); }
.ls-chip-button:focus-visible, .ls-item:focus-visible, .ls-choice:focus-visible, .ls-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ls-open { display: none; }
.ls-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .75rem; }
.ls-tally { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .ls-chips { display: none; }
  .ls-open { display: inline-flex; }
}
.ls-sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88vh; padding: 0; border: 1px solid var(--rule); border-radius: 18px 18px 0 0; background: var(--page); color: var(--ink); overflow: hidden; }
.ls-sheet[open] { display: flex; flex-direction: column; }
.ls-sheet::backdrop { background: rgba(0, 0, 0, .5); }
.ls-sheet-head, .ls-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
.ls-sheet-head { border-bottom: 1px solid var(--rule); }
.ls-sheet-foot { border-top: 1px solid var(--rule); }
.ls-sheet-title { margin: 0; font-size: 1.1rem; }
.ls-sheet-body { overflow-y: auto; display: grid; gap: 12px; padding: 12px 16px; }
.ls-sheet-row { display: grid; gap: 4px; }
.ls-sheet-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-choice[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ls-show { flex: 1; background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ls-count { font-weight: 600; }
.ls-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.ls-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ls-table { border-collapse: collapse; width: 100%; min-width: 64rem; font-size: .85rem; }
.ls-table th, .ls-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
/* a row is one height in every sky: its cells do not wrap (the table scrolls sideways instead) */
.ls-table td { white-space: nowrap; }
.ls-table th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.ls-table img { display: block; width: 72px; height: 72px; border-radius: 6px; background: var(--rule); }
.ls-name a { font-weight: 600; color: var(--ink); }
.ls-table .fam-button { text-decoration: none; }

/* Kana readings over the Chinese sky's group and mansion names (readings.ts): small, but never under 10 pixels, and a card's name keeps its height. */
rt { font-size: max(10px, .55em); font-weight: 400; }
.pick-tile ruby, .gl-name ruby { line-height: 1; }