/* The new Puzzle Expo list (/puzzleexpo/). Uses assets/lmi.css; classes start with l- (footer x- as the puzzle page). */
:root { --ex: #6B4BB8; --ex-soft: #F0EBFA; }
:root[data-theme="dark"] { --ex: #C3B0F5; --ex-soft: #241C38; }
.x-page { min-height: 100vh; display: flex; flex-direction: column; }
.x-page main { flex: 1; container-type: inline-size; }
.l-loading { padding: 40px 0; }
.l-wrap { max-width: 1100px; }

/* Title */
.l-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 22px 0 6px; }
.l-head h1 { font: 600 30px/1.15 var(--ff-display); margin: 0 0 10px; }
/* The Expo logo (assets/expo-logo.svg, Quasoid outlines, 360 x 94, baseline at 72.5): the text beside it sits on the letters' baseline, the p's tails hang below */
.l-logo { display: block; height: 44px; width: auto; margin-bottom: -10px; }
.l-head .sub { color: var(--fg2); font-size: 14px; }
.l-head .links { margin-left: auto; display: flex; gap: 16px; font-size: 14px; }
.l-head .links a.q { color: var(--fg2); text-decoration: underline; text-underline-offset: 3px; }
.l-intro { max-width: 640px; margin: 2px 0 6px; }
.l-intro b { font: 600 18px var(--ff-display); display: block; }
.l-intro p { color: var(--fg2); font-size: 15px; margin: 0; }

/* Banners */
.l-join, .l-remind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border-radius: 14px; padding: 12px 16px; margin: 8px 0 2px; }
.l-join { background: var(--chip); }
.l-remind { background: var(--me-soft); }
.l-join p, .l-remind p { flex: 1 1 260px; font-weight: 500; margin: 0; }
.l-remind a.q { font-size: 14px; color: var(--fg2); }

/* Strip: shelves of tiles */
.l-strip { padding: 10px 0 4px; display: grid; gap: 18px; }
.l-strip > * { min-width: 0; }
.l-shelf h2 { font: 600 19px var(--ff-display); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.l-shelf h2 .n { font: 600 14px var(--ff); color: var(--acc-ink); background: var(--chip); padding: 1px 9px; border-radius: 999px; }
.l-shelf h2 .r { margin-left: auto; display: flex; gap: 16px; font: 500 14px var(--ff); }
.l-shelf h2 .r .hide { color: var(--fg2); }
.l-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.l-tile { display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; color: var(--fg); min-height: 112px; text-decoration: none; }
.l-tile:hover { text-decoration: none; border-color: var(--acc); }
.l-tile b { font-weight: 700; line-height: 1.25; }
.l-tile .th { font-size: 13px; color: var(--fg2); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-tile .m { font-size: 13px; color: var(--fg2); }
.l-tile .s { margin-top: auto; font-size: 13px; color: var(--fg2); }
.l-tile.go { border-color: var(--acc); background: var(--chip); }
.l-tile .done { color: var(--ok); font-weight: 700; }
.l-none { font-size: 14px; color: var(--fg2); margin: 0; }
.l-hidden { font-size: 13px; color: var(--fg2); margin: 0; }
.pill { height: 38px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); padding: 0 12px; font: 400 14px var(--ff); cursor: pointer; white-space: nowrap; flex: none; }
select.pill { padding-right: 8px; max-width: 190px; }
.pill.on { border-color: var(--acc); background: var(--chip); color: var(--acc-ink); font-weight: 600; }
.pill.pick { display: inline-flex; align-items: center; gap: 8px; max-width: 200px; padding-right: 14px; }
.pill.pick span { overflow: hidden; text-overflow: ellipsis; }
.pill.pick::after { content: ''; flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.l-pop { position: fixed; z-index: 30; width: min(320px, calc(100vw - 16px)); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); overflow: hidden; }
.l-pop input { flex: none; margin: 10px; height: 38px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg); color: var(--fg); padding: 0 14px; font: 400 16px var(--ff); }
.l-pop input:focus { outline: none; border-color: var(--acc); }
.l-pop ul { list-style: none; margin: 0; padding: 0 0 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.l-pop li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.l-pop li.act { background: var(--soft); }
.l-pop li[aria-selected="true"] { color: var(--acc-ink); font-weight: 700; }
.l-pop li.any { color: var(--fg2); }
.l-pop li .c { color: var(--fg2); font-weight: 400; font-variant-numeric: tabular-nums; }
.l-pop mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.l-pop li.none { color: var(--fg2); cursor: default; }
.pill.mini { height: 30px; font-size: 13px; font-weight: 500; padding: 0 6px 0 10px; }

/* 1 or 2 puzzles left: big cards */
.l-last { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
@container (max-width: 700px) { .l-last { grid-template-columns: 1fr; } }
.l-big { background: var(--card); border: 1px solid var(--acc); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.l-big h3 { font: 600 24px/1.15 var(--ff-display); margin: 0; }
.l-big .m { font-size: 14px; color: var(--fg2); }
.l-big .rules { font-size: 15px; overflow-wrap: anywhere; }
.l-big .rules p { margin: 0 0 6px; }
.l-big .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

/* Everything solved */
.l-all { background: var(--ok-soft); border-radius: 16px; padding: 16px 18px; }
.l-all h2 { font: 600 22px var(--ff-display); color: var(--ok); margin: 0; }
.l-nums { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 10px 0 2px; }
.l-nums b { display: block; font: 600 26px var(--ff-display); color: var(--fg); }
.l-nums span { font-size: 13px; color: var(--fg2); }

/* Statistics (bottom of the page): 4 panels, 2 on narrower screens, 1 on small phones */
.l-stats { padding: 4px 0 40px; }
.l-stats h2 { font: 600 22px var(--ff-display); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.l-stats h2 .r { margin-left: auto; font: 500 14px var(--ff); }
.l-stats h2 .hide { color: var(--fg2); }
.l-sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 900px) { .l-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 440px) { .l-sgrid { grid-template-columns: 1fr; } }
.l-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.l-panel h3 { font: 600 17px var(--ff-display); margin: 0; }
.l-panel .cap { font-size: 13px; color: var(--fg2); margin: 0 0 8px; }
ol.l-top { list-style: none; margin: 0; padding: 0; }
ol.l-top li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
ol.l-top a, .l-names a { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
ol.l-top b { font-variant-numeric: tabular-nums; }
.l-names { font-size: 14px; line-height: 1.6; margin: 0; }
.l-sub { font-size: 13px; color: var(--fg2); margin: 8px 0 0; }
.l-sub a { color: var(--fg2); }
.l-stats a.me { color: var(--acc-ink); font-weight: 700; }
.l-month { font-size: 14px; color: var(--fg2); margin: 12px 0 0; }

/* The list */
.l-list-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 28px 0 10px; }
.l-list-h h2 { font: 600 22px var(--ff-display); margin: 0; }
.l-list-h .n { color: var(--fg2); font-size: 14px; }
.l-list-h a { font-size: 14px; color: var(--fg2); text-decoration: underline; text-underline-offset: 3px; }
.l-list-h .sort { margin-left: auto; }
.l-search { width: 100%; max-width: 520px; height: 38px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); padding: 0 14px; font: 400 14px var(--ff); }
.l-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
@container (max-width: 700px) { .l-bar { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px 4px; margin-left: -16px; margin-right: -16px; scrollbar-width: none; } }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; flex: none; background: var(--card); }
.seg button { height: 36px; border: 0; background: none; padding: 0 13px; font: 400 14px var(--ff); cursor: pointer; color: var(--fg2); }
.seg button.on { background: var(--chip); color: var(--acc-ink); font-weight: 700; }
.l-more { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.l-more label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.l-more select { font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line2); border-radius: 8px; padding: 2px 4px; }
.l-rows { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 12px; }
.l-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.l-row:last-child { border-bottom: 0; }
.l-row:hover { text-decoration: none; background: var(--soft); }
.l-row .t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.l-row .t b { font-weight: 700; }
.l-row .t i { color: var(--fg2); font-size: 14px; }
.l-row .m { grid-column: 1; font-size: 13px; color: var(--fg2); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.l-row .nums { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 18px; font-size: 13px; color: var(--fg2); text-align: right; font-variant-numeric: tabular-nums; }
.l-row .nums div { min-width: 54px; }
.l-row .nums b { display: block; font-size: 15px; color: var(--fg); }
@container (max-width: 700px) {
  .l-row { grid-template-columns: 1fr; padding: 11px 14px; }
  .l-row .nums { grid-row: auto; grid-column: 1; text-align: left; gap: 14px; }
  .l-row .nums div { min-width: 0; }
  .l-row .nums b { display: inline; font-size: 13px; margin-right: 3px; }
  .l-head .links { margin-left: 0; }
}
.tag { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.go { background: var(--chip); color: var(--acc-ink); }
.tag.bf { background: var(--me-soft); color: var(--me); }
.tag.ex { background: var(--ex-soft); color: var(--ex); }
.tag.sk { background: var(--soft); color: var(--fg2); }
.rxs { white-space: nowrap; }
.l-showmore { display: flex; justify-content: center; padding: 16px 0 40px; }
.l-empty { padding: 30px 16px; text-align: center; color: var(--fg2); }

/* Footer (as the puzzle page) */
.x-footer { border-top: 1px solid var(--line); padding: 26px 0 36px; font-size: 14px; color: var(--fg2); }
.x-fname { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); font: 600 18px var(--ff-display); text-decoration: none; }
.x-fname img { width: 20px; height: 24px; display: block; }
.x-footer p { margin: 10px 0 0; }
.x-legal { font-size: 13px; }