/* Benches: the card over a bench, the directory panel, the home page's tiles and the list. */

/* Shared page chrome. Theme colors come from Benchtalk's site.css. */
:root {
  --faint: var(--dim); --teal: #087b70; --amber: #986000; --red: #ba3030; --c: #5e6878; --n: #a95200;
}
:root[data-theme="dark"] {
  --teal: #3fd1c0; --amber: #f2b042; --red: #ff6b6b; --c: #96a3b8; --n: #f7a35c; --accent-ink: #081426;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal: #3fd1c0; --amber: #f2b042; --red: #ff6b6b; --c: #96a3b8; --n: #f7a35c; --accent-ink: #081426;
  }
}
.theme-choice { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; white-space: nowrap; }
.theme-choice select {
  padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font-size: 13px;
}
.beginend .topbar {
  flex-wrap: wrap; gap: 12px 28px; padding-block: 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.beginend .topbar .brand { color: var(--ink); min-width: 0; }
.beginend-brand { flex: none; }
.beginend-brand .brandlogo { height: 30px; max-width: min(220px, 55vw); object-fit: contain; }
.beginend-brand .logo-dark { display: none; }
.beginend-brand .logo-light { display: inline; }
:root[data-theme="dark"] .beginend-brand .logo-dark { display: inline; }
:root[data-theme="dark"] .beginend-brand .logo-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .beginend-brand .logo-dark { display: inline; }
  :root:not([data-theme="light"]) .beginend-brand .logo-light { display: none; }
}
.beginend .topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.beginend .topbar nav a { margin: 0; color: var(--dim); font-size: 14px; }
.beginend .topbar nav a:hover, .beginend .topbar .account a:hover { color: var(--accent); }
.beginend .topbar .account { flex-wrap: wrap; font-size: 14px; }
.beginend .topbar .account a { color: var(--dim); }
.beginend .topbar .account .button { color: var(--accent-ink); }
.beginend .topbar .account .button:hover { color: var(--accent-ink); filter: brightness(1.08); }
.beginend a, .directory a { text-underline-offset: .15em; }
.skip-link {
  position: absolute; top: 8px; left: 16px; z-index: 60; transform: translateY(-160%);
  padding: 10px 16px; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
}
.skip-link:focus { transform: none; }
.beginend :focus-visible, .bench :focus-visible, .bench-edit :focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.beginend input::placeholder, .beginend textarea::placeholder { color: var(--dim); opacity: 1; }
.beginend button:disabled, .bench-edit button:disabled { opacity: .6; cursor: wait; }
.beginend .hero { background: var(--bg); color: var(--dim); border-bottom: 1px solid var(--line); padding-block: 44px; }
.beginend .hero h1 { color: var(--ink); letter-spacing: -.025em; }
.beginend .hero .online { color: var(--dim); }
.beginend .hero .quickjoin input { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
.beginend .chan { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
.beginend .chan b { color: var(--ink); }
.beginend .chan span { color: var(--dim); }
.beginend .chan small { color: var(--teal); }
.beginend:has(.directory) .hero, .beginend:has(.list) .hero { display: none; }
.beginend .band #find { color: var(--ink); }
.beginend .band { padding-block: 32px 56px; }
.beginend .band > h2 { margin-top: 36px; font-size: 23px; letter-spacing: -.015em; }
.beginend .band > h2:first-child { margin-top: 0; }
.beginend .foot { padding: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }

/* The bench card */
.bench { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.bench > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 20px; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--dim); list-style: none;
}
.bench > summary::-webkit-details-marker { display: none; }
.bench > summary .quick { font-weight: 400; color: var(--faint); }
.bench > summary .devhere, .stats .devhere { color: var(--amber); font-weight: 700; }
/* says the card opens and closes */
.bench > summary .chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .15s; }
.bench[open] > summary .chev { transform: rotate(-135deg); }
@media (max-width: 760px) {
  .bench > summary { padding: 8px 12px; }
  .benchbody { padding: 0 12px 10px 12px; max-height: 40vh; overflow-y: auto; }
}
.benchbody { padding: 0 20px 12px 46px; font-size: 14px; }
.benchbody p { margin: 4px 0; }
.benchbody .links a { overflow-wrap: anywhere; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--dim); font-size: 13px; }
.stats .live { color: var(--teal); font-weight: 600; }
.status { color: var(--amber); }
.compat { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.compat td { padding: 2px 12px 2px 0; }
.compat .verdict { font-weight: 700; }
.compat .works .verdict { color: var(--teal); }
.compat .fails .verdict { color: var(--red); }
.compat .disputed .verdict { color: var(--amber); }
.howto { font-size: 12px; color: var(--faint); }
.claim summary { cursor: pointer; color: var(--accent); }
.claim pre { overflow-x: auto; background: var(--code-bg); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; user-select: all; }

.band #find {
  width: 100%; max-width: 440px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); margin-bottom: 14px;
}
.busy {
  display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 10px; padding: 10px 14px; text-decoration: none; color: var(--ink);
}
.busy span { font-size: 12px; color: var(--dim); }
.busy .hotcount { color: var(--amber); font-weight: 700; }
.busyrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; }
.tile {
  display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; text-decoration: none; color: var(--ink); transition: border-color .12s;
}
.tile:hover, .busy:hover { border-color: var(--accent); }
.tile .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.tile, .busy { min-width: 0; overflow-wrap: anywhere; }
.tile .top b { font-size: 16px; }
.tile p { margin: 0; color: var(--dim); font-size: 14px; }
.tile .stats { font-size: 12px; margin-top: auto; }
.band .hint { color: var(--dim); font-size: 14px; margin-top: 20px; }
.list ul { padding-left: 20px; }
.list li { margin: 5px 0; }
.list .talk { font-size: 12px; color: var(--dim); margin-left: 6px; }
.benchlist { flex: 1; overflow-y: auto; padding: 6px 10px; }
.benchitem { display: block; padding: 10px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.benchitem:hover { background: var(--hover); }
.benchitem .top { display: flex; justify-content: space-between; gap: 8px; }
.benchitem p { margin: 2px 0; color: var(--dim); font-size: 13px; }
.benchitem .stats { font-size: 12px; }
@media (max-width: 860px) { .benchbody { padding-left: 20px; } }
p.all { margin: 10px 0 0; font-weight: 600; }
#panel a.all { display: block; padding: 10px 16px; font-size: 13px; border-top: 1px solid var(--line); }
.kind { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }

/* Directory search and editing. */
.directory { max-width: 1120px; margin-inline: auto; }
.directory h1, .list h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.directory > p { max-width: 78ch; color: var(--dim); }
.findform, .bench-edit { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 24px 0; }
.findform { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.findform label, .bench-edit label { display: flex; flex-direction: column; min-width: 0; gap: 6px; font-size: 13px; font-weight: 600; }
.findform label { flex: 1 1 140px; }
.findform input, .findform select, .bench-edit input, .bench-edit select {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 400;
}
.findform input:hover, .findform select:hover, .bench-edit input:hover, .bench-edit select:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.findform input:focus, .findform select:focus, .bench-edit input:focus, .bench-edit select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.findform label:first-child { flex: 2 1 300px; }
.findform > a { align-self: center; font-size: 13px; }
.findform > button { padding: 9px 18px; }
.directory .tile h2 { margin: 0; font-size: 18px; }
.directory .oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.directory .tile { min-width: 0; }
.directory .tile:hover { transform: none; }
.directory .tiles { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.findpages { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.findpages a, .findpages button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 14px; }
.findpages a { text-decoration: none; }
.findpages a:hover, .findpages button:hover { background: var(--hover); }
.directory .hint { margin-block: 16px 24px; font-size: 13px; }
.bench-edit { align-items: start; }
.bench-edit label { flex: 1 1 220px; }
.bench-edit p { flex-basis: 100%; }
.bench-edit p:empty { display: none; }
.bench-edit button, .bench-admin-row > button, .bench-admin-row form button {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px;
  background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600;
}
.bench-edit button, .bench-admin-row .bench-edit button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bench-edit-box { margin: 10px 0; }
.bench-edit-box summary, .bench-admin-row summary { cursor: pointer; }
.bench-admin-row { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 20px; }
.bench-admin-row h2 { font-size: 18px; margin: 4px 0; }
.bench-admin-row h2 a { color: var(--ink); text-decoration: none; }
.bench-admin-row h2 a:hover { color: var(--accent); }
.bench-admin-row > button, .bench-admin-row > details { margin: 8px 12px 8px 0; }
.bench-admin-row p { overflow-wrap: anywhere; color: var(--dim); font-size: 13px; }
.bench-admin-row summary { color: var(--accent); font-size: 14px; }
.bench-admin-row details[open] { padding-top: 10px; border-top: 1px solid var(--line); }
.bench-admin-row form:not(.bench-edit) { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 0; }
.bench-admin-row form:not(.bench-edit) label { display: grid; gap: 6px; min-width: 0; font-size: 14px; }
.bench-admin-row form:not(.bench-edit) input { min-width: 0; max-width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.bench-admin-row form:not(.bench-edit) input { color: var(--ink); }
#bench-admin-notice:not(:empty) { padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }

/* Claims are ordinary forms and tables, including the admin view. */
.nameclaims { max-width: 900px; }
.nameclaim { display: grid; gap: 18px; max-width: 660px; margin: 24px 0; }
.nameclaim label { display: grid; gap: 6px; color: var(--ink); font-weight: 600; }
.nameclaim input, .nameclaim textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-weight: 400;
}
.nameclaim textarea { resize: vertical; }
.nameclaim p { margin: 0; color: var(--dim); }
.nameclaim button { justify-self: start; }
.claimwords { white-space: pre-wrap; }
.claimtable { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: 20px; }
.claimtable th, .claimtable td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.claimtable th { background: var(--bg-soft); }
.claimtable td { background: var(--bg); overflow-wrap: anywhere; }
.admin .tabs { flex-wrap: wrap; }
.admin .tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 700px) {
  .beginend .topbar { padding: 12px 16px; gap: 12px 16px; }
  .beginend .topbar nav { flex-basis: 100%; order: 2; gap: 8px 18px; }
  .beginend .topbar .account { gap: 8px; }
  .beginend .hero { padding: 28px 16px; }
  .beginend .hero .quickjoin { margin-bottom: 20px; }
  .beginend .band { padding: 28px 16px 40px; }
  .beginend .band h2 small { display: block; margin: 6px 0 0; line-height: 1.5; }
  .beginend .chans, .beginend .bestrow { grid-template-columns: minmax(0, 1fr); }
  .findform, .bench-admin-row { padding: 16px; }
  .findform label, .findform label:first-child, .bench-edit label { flex-basis: 100%; }
  .findform input, .findform select, .bench-edit input, .bench-edit select, .beginend .quickjoin input { font-size: 16px; }
  .tile { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .beginend .tile, .beginend .chan { transition: none; transform: none; }
}

/* The notice at the top of the home page */
.wiki-banner { padding: 26px 20px; border-top: 4px solid var(--teal); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.wiki-banner .inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1100px; margin: 0 auto; padding: 0; text-align: start; }
.wiki-banner h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 32px); line-height: 1.2; color: var(--ink); }
.wiki-banner p { margin: 0; max-width: 62ch; color: var(--dim); }
.wiki-banner-go { flex: none; padding: 12px 20px; border-radius: 10px; background: var(--teal); color: #fff; font-weight: 700; text-decoration: none; }
.wiki-banner-go:hover { filter: brightness(1.08); }
html[data-theme="dark"] .wiki-banner-go { color: #06201d; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .wiki-banner-go { color: #06201d; } }
@media (max-width: 760px) { .wiki-banner .inner { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* The same notice as a strip above the chat, where visitors land */
.wiki-strip { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); border-top: 3px solid var(--teal); background: var(--bg-soft); font-size: 14px; }
.wiki-strip[hidden] { display: none; }
.wiki-strip a { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.wiki-strip a span { color: var(--teal); font-weight: 700; white-space: nowrap; }
.wiki-strip a:hover span { text-decoration: underline; }
.wiki-strip-close { flex: none; padding: 2px 8px; border: 0; background: none; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; }

.catalog-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-block: 1.25rem; }
.catalog-form label { display: grid; gap: .3rem; flex: 1 1 10rem; min-inline-size: 0; }
.catalog-form label:first-child { flex-basis: 22rem; }
.catalog-form input, .catalog-form select { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }
.catalog-card { min-inline-size: 0; overflow-wrap: anywhere; }
.catalog-card h2 { margin-block-start: 0; }
.catalog-summary { white-space: pre-wrap; overflow-wrap: anywhere; }
.catalog-card .catalog-summary { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-categories { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.catalog-opm, .catalog-status { display: inline-block; border: 1px solid currentColor; border-radius: .25rem; padding-block: .1rem; padding-inline: .35rem; }
.catalog-opm { font-weight: 600; }
.catalog-facts { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr); gap: .5rem 1rem; }
.catalog-facts dt { font-weight: 600; }
.catalog-facts dd { margin-inline-start: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.catalog-room { border-block-start: 1px solid currentColor; margin-block-start: 1.5rem; padding-block: 1rem; }
@media (max-width: 38rem) {
  .catalog-cards { grid-template-columns: minmax(0, 1fr); }
  .catalog-form label, .catalog-form label:first-child { flex-basis: 100%; }
  .catalog-facts { grid-template-columns: minmax(0, 1fr); }
  .catalog-facts dd { margin-block-end: .6rem; }
}

/* Search and category in plain sight; the other filters one tap away. */
.catalog-more { flex: 1 1 100%; }
.catalog-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.catalog-more-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-block-start: 12px; }
.catalog-more-fields label { flex: 1 1 140px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.catalog-more-fields select { width: 100%; }
.catalog-more-fields > a { align-self: center; font-size: 13px; }

/* Where this comes from: the logo goes to beginend.org, and the chat says so in words. */
.brought-by { display: block; padding: 0 14px 10px; color: var(--side-dim); font-size: 12px; text-decoration: none; }
.brought-by:hover { color: var(--side-ink); text-decoration: underline; }
.wikibrand { display: inline-flex; align-items: center; gap: 10px; }
.wikibrand .brandhome { display: inline-flex; align-items: center; }
.wikibrand .wikihome { color: var(--dim); font-size: 14px; text-decoration: none; }
.wikibrand .wikihome:hover { color: var(--ink); text-decoration: underline; }

/* Member ratings */
.catalog-rating { margin-block: 18px; }
.catalog-rating h2 { margin-block: 0 4px; font-size: 16px; }
.catalog-rating-text { color: var(--dim); font-size: 14px; }
.catalog-rating-line { margin-block: 4px; min-block-size: 1em; }
.rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-block: 6px; }
.rate-star { padding: 2px 3px; border: 0; background: none; color: var(--dim); font-size: 24px; line-height: 1; cursor: pointer; }
.rate-star.on, .rate-star:hover { color: var(--amber, #c27a06); }
.rate-star:focus-visible, .rate-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rate-clear { margin-inline-start: 8px; padding: 2px 6px; border: 0; background: none; color: var(--dim); font-size: 12px; text-decoration: underline; cursor: pointer; }
.rate-clear[hidden] { display: none; }
.catalog-mine { margin-inline-start: 10px; font-weight: 600; }
.catalog-updating { min-block-size: 1em; margin-block: 4px; color: var(--dim); font-size: 13px; }

/* A project's README beside its facts, and its picture on the card */
.catalog-thumb { display: block; margin-block-end: 10px; }
.catalog-thumb img { display: block; inline-size: 100%; max-block-size: 150px; object-fit: contain; border-radius: 8px; background: var(--bg-soft); }
.catalog-random { margin-inline-start: 10px; font-weight: 600; }
.catalog-entry-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 28px; align-items: start; margin-block-start: 16px; }
.catalog-side .catalog-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 13px; }
.catalog-side .catalog-facts dd { margin-block-end: 8px; }
.catalog-readme { min-inline-size: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow-wrap: anywhere; }
.catalog-readme > h2:first-child { margin-block-start: 0; font-size: 14px; color: var(--dim); }
.catalog-readme img { max-inline-size: 100%; block-size: auto; }
.catalog-readme table { display: block; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; }
.catalog-readme th, .catalog-readme td { padding: 5px 10px; border: 1px solid var(--line); }
.catalog-readme pre { max-inline-size: 100%; overflow-x: auto; padding: 10px; background: var(--bg-soft); border-radius: 6px; }
.catalog-readme blockquote { margin-inline: 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--line); color: var(--dim); }
@media (max-width: 860px) { .catalog-entry-grid { grid-template-columns: minmax(0, 1fr); } }

/* A small icon beside each project's name: a letter, with a picture over it when one comes */
.catalog-named { display: flex; align-items: center; gap: 10px; }
.catalog-named > a { min-inline-size: 0; }
.catalog-icon { position: relative; flex: none; display: inline-block; inline-size: 36px; block-size: 36px; overflow: hidden; border-radius: 8px; background: hsl(var(--hue, 200) 45% 42%); }
.catalog-icon > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; font-weight: 700; line-height: 1; }
.catalog-icon > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; background: var(--bg); }
h1.catalog-named .catalog-icon { inline-size: 48px; block-size: 48px; border-radius: 10px; }
h1.catalog-named .catalog-icon > span { font-size: 24px; }

/* All, Components, Applications */
.catalog-types { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 14px 4px; }
.catalog-types a { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.catalog-types a:hover { border-color: var(--accent); }
.catalog-types a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The live bench (live.js): a round button at the bottom right, with who is
   there as a badge, that opens to the page's bench: the latest talk, and a
   box to say something for a member. */
.live-strip[hidden] { display: none; }
.live-bench { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.live-bubble { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px rgba(0, 0, 0, .15); display: grid; place-items: center;
  transition: transform .15s, background-color .15s; }
.live-bubble svg { width: 28px; height: 28px; }
.live-bubble:hover { transform: translateY(-2px); }
.live-bubble.open { background: var(--ink); color: var(--bg); }
.live-bubble.busy::after { content: ""; position: absolute; top: 4px; left: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--teal);
  border: 2px solid var(--bg); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.live-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: #1a1200;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--bg); box-sizing: border-box; }
.live-badge[hidden] { display: none; }
.live-sheet { width: 340px; max-width: calc(100vw - 36px); height: min(520px, calc(100vh - 110px)); display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: var(--shadow); overflow: hidden; font-size: 14px;
  animation: sheet-in .22s ease-out; }
.live-sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.live-sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--accent); color: var(--accent-ink); }
.live-sheet-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.live-sheet-title svg { width: 24px; height: 24px; flex: none; }
.live-sheet-title b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-sheet-here { display: block; font-size: 12px; opacity: .85; }
.live-sheet-open { color: inherit; font-size: 12px; text-decoration: underline; white-space: nowrap; }
.live-sheet-fold { border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.live-sheet-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); }
.live-sheet-empty { margin: auto; color: var(--dim); text-align: center; }
.live-msg { display: grid; gap: 2px; }
.live-msg.same { margin-top: -6px; }
.live-msg-who { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.live-msg-who time { color: var(--faint); font-size: 11px; }
.live-msg-text { padding: 7px 11px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; width: fit-content; max-width: 100%; }
.live-sheet-foot { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.live-say { display: flex; gap: 8px; align-items: flex-end; }
.live-say textarea { flex: 1; min-width: 0; resize: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.4; max-height: 120px; }
.live-send { padding: 8px 14px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; }
.live-send:disabled { opacity: .6; }
.live-say-note { margin: 6px 0 0; font-size: 12px; color: var(--red); min-height: 1em; }
.live-say-note:empty { display: none; }
.live-invite { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--dim); font-size: 13px; }
.live-invite .button { padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; }
@media (max-width: 640px) {
  .live-bench { right: 12px; bottom: 12px; }
  .live-bubble { width: 50px; height: 50px; }
  .live-sheet { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: min(70vh, 560px); border-radius: 16px 16px 0 0; }
  /* the open sheet is the whole bottom of the screen; the bubble would sit on its Send button */
  .live-bench:has(.live-sheet:not([hidden])) .live-bubble { display: none; }
}
@media (prefers-reduced-motion: reduce) { .live-bubble.busy::after { animation: none; } .live-sheet { animation: none; } }

.page-bench, .catalog-room { margin-top: 28px; }
.bench-glimpse { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); padding: 10px 14px; margin: 8px 0 12px; max-width: 760px; }
.bench-glimpse:empty { display: none; }
.glimpse-head { margin: 0 0 6px; color: var(--dim); font-size: 13px; }
.glimpse-empty { margin: 0; color: var(--dim); }
.glimpse-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.glimpse-list li { display: grid; grid-template-columns: minmax(0, auto) auto 1fr; gap: 2px 8px; align-items: baseline; }
.glimpse-list .live-who { min-width: 0; overflow-wrap: anywhere; }
.glimpse-list .live-text { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }

/* Reporting a catalog entry that does not belong (CatalogReports). */
.catalog-report { margin-top: 24px; color: var(--dim); font-size: 14px; }
.catalog-report summary { cursor: pointer; color: var(--accent); }
.catalog-report-form { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; }
.catalog-report-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: grid; gap: 4px; }
.catalog-report-form textarea { width: 100%; box-sizing: border-box; }
.catalog-report-form button { justify-self: start; }

/* Interesting: anyone's "this looks worth a look" (catalog cards and entries). */
.interest-form { display: inline-block; margin: 4px 8px 4px 0; }
.interest-button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--dim); font-size: 13px; cursor: pointer; }
.interest-button:hover { border-color: var(--accent); color: var(--accent); }
.interest-button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.interest-count { font-variant-numeric: tabular-nums; }
.interest-hint { color: var(--dim); font-size: 13px; margin-bottom: 2px; }

/* Discovering: at the top of an entry, another random project, or
   interesting and then another (catalog DiscoverBar); and the catalog's own
   Random project button. */
.discover-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 18px; }
.discover-bar form { margin: 0; }
.discover-no, .discover-yes, .catalog .catalog-random {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; min-height: 44px; box-sizing: border-box;
}
.discover-no, .catalog .catalog-random { border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); }
.discover-no:hover, .catalog .catalog-random:hover { border-color: var(--accent); color: var(--accent); }
.discover-no::before { content: "\2190"; }
.random-dice::before, .catalog .catalog-random::before { content: "\1F3B2"; font-size: 17px; line-height: 1; }
.discover-yes { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.discover-yes:hover { filter: brightness(1.08); }
.discover-yes::after { content: "\2192"; }
.discover-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: auto; font-size: 13px; color: var(--dim); }
.discover-choice label { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.discover-choice select { max-width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 13px; }
.catalog-top-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
@media (max-width: 640px) {
  .discover-bar { gap: 8px; }
  .discover-no, .discover-bar form { flex: 1 1 0; min-width: 0; }
  .discover-no, .discover-yes { justify-content: center; text-align: center; padding: 8px 10px; font-size: 14px; line-height: 1.25; }
  .discover-yes { width: 100%; }
  .discover-bar .discover-choice { flex: 1 1 100%; margin-left: 0; }
}
.catalog-how h2 { margin-top: 28px; }
.catalog-how p { max-width: 720px; }

/* View on GitHub and the rest: the project where it lives, with that
   place's logo drawn in the button's own color (catalog ViewOnButton). */
.view-on { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 8px; font-weight: 600; text-decoration: none;
  background: var(--ink); color: var(--bg); min-height: 42px; box-sizing: border-box; }
.view-on:hover { filter: brightness(1.15); }
.host-logo { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.host-github { -webkit-mask-image: url(/static/hosts/github.svg); mask-image: url(/static/hosts/github.svg); }
.host-gitlab { -webkit-mask-image: url(/static/hosts/gitlab.svg); mask-image: url(/static/hosts/gitlab.svg); }
.host-codeberg { -webkit-mask-image: url(/static/hosts/codeberg.svg); mask-image: url(/static/hosts/codeberg.svg); }
.host-bitbucket { -webkit-mask-image: url(/static/hosts/bitbucket.svg); mask-image: url(/static/hosts/bitbucket.svg); }
.host-sourceforge { -webkit-mask-image: url(/static/hosts/sourceforge.svg); mask-image: url(/static/hosts/sourceforge.svg); }
.host-gitea { -webkit-mask-image: url(/static/hosts/gitea.svg); mask-image: url(/static/hosts/gitea.svg); }
.host-sourcehut { -webkit-mask-image: url(/static/hosts/sourcehut.svg); mask-image: url(/static/hosts/sourcehut.svg); }
.host-launchpad { -webkit-mask-image: url(/static/hosts/launchpad.svg); mask-image: url(/static/hosts/launchpad.svg); }
.host-web { -webkit-mask-image: url(/static/hosts/web.svg); mask-image: url(/static/hosts/web.svg); }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.download-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; font-weight: 600; min-height: 42px;
  box-sizing: border-box; text-decoration: none; border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); }
.download-button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------------------
   The catalog, dressed up (5 Nov 2026): a header with the count, cards whose
   whole face opens the project, facts as small pills, and the reader's own
   marks (rating, Interesting) along the card's foot. */
.catalog-hero {
  position: relative; overflow: hidden; margin: 8px 0 22px; padding: 30px 32px; border-radius: 18px; color: #e9eef7;
  background: radial-gradient(600px 260px at 85% 0%, rgba(63, 209, 192, .28), transparent 70%),
              radial-gradient(500px 240px at 100% 100%, rgba(91, 140, 255, .25), transparent 70%), #0b0f16;
  background-size: cover; background-position: right center;
}
.catalog-hero.has-banner { background-image: linear-gradient(90deg, rgba(11, 15, 22, .94) 0%, rgba(11, 15, 22, .78) 42%, rgba(11, 15, 22, .1) 75%), url(/static/catalog-banner.webp); }
@media (max-width: 760px) { .catalog-hero.has-banner { background-image: linear-gradient(180deg, rgba(11, 15, 22, .55), rgba(11, 15, 22, .92) 55%), url(/static/catalog-banner-900.webp); } }
.catalog-hero-text { position: relative; max-width: 640px; }
.catalog-hero h1 { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.02em; }
.catalog-count { margin: 4px 0 8px; font-size: 18px; font-weight: 700; color: #3fd1c0; }
.catalog-lede { margin: 0 0 16px; color: #b9c4d6; font-size: 15px; line-height: 1.55; }
.catalog-hero .catalog-top-links { margin: 0; }
.catalog-hero .catalog-random { background: #3fd1c0; border-color: #3fd1c0; color: #06201d; }
.catalog-hero .catalog-random:hover { color: #06201d; filter: brightness(1.08); }
.catalog-hero a { color: #cfe0ff; }
.catalog-hero .catalog-mine { color: #cfe0ff; }
@media (max-width: 640px) { .catalog-hero { padding: 22px 18px; border-radius: 14px; margin-top: 0; } }

/* the search box first and large */
.catalog-form input[type=search] {
  padding: 11px 14px; font-size: 16px; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: var(--bg); color: var(--ink); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.catalog-form input[type=search]::placeholder { color: var(--dim); opacity: 1; }
.catalog-form input[type=search]:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.catalog-form input[type=search]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.catalog-form select { padding: 9px 10px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 15px; }
.catalog-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* the card */
.catalog-cards { gap: 18px; }
.catalog-card { position: relative; padding: 16px 18px; border-radius: 14px; gap: 8px;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.catalog-card:hover { border-color: var(--accent); box-shadow: 0 14px 34px -20px rgba(15, 21, 32, .45); transform: translateY(-2px); }
.catalog-card h2 { font-size: 17px; line-height: 1.25; }
.catalog-card .card-link { color: var(--ink); text-decoration: none; }
.catalog-card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.catalog-card .card-link:focus-visible { outline: none; }
.catalog-card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* what a reader presses stays pressable above the card's link */
.catalog-card .catalog-categories a, .catalog-card .card-foot, .catalog-card .catalog-thumb { position: relative; z-index: 1; }
.catalog-card .catalog-summary { color: var(--dim); font-size: 14px; line-height: 1.5; -webkit-line-clamp: 3; }
.catalog-thumb { margin: -4px -6px 4px; }
.catalog-thumb img { max-block-size: 160px; border-radius: 10px; }
.card-facts { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.card-facts li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid var(--line); color: var(--dim); font-size: 12px; line-height: 1.6; white-space: nowrap; }
.card-facts .host-logo { width: 13px; height: 13px; }
.card-facts .fact-host-name { display: none; }
.card-facts .fact-stars { color: var(--amber); font-weight: 600; }
.card-facts .status-active { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
.card-facts .status-quiet { color: var(--dim); }
.card-facts .status-archived { color: var(--faint); text-decoration: line-through; }
.catalog-card .catalog-categories { gap: 6px; font-size: 12px; }
.catalog-card .catalog-categories a { color: var(--accent); text-decoration: none; }
.catalog-card .catalog-categories a:hover { text-decoration: underline; }
.catalog-card .catalog-opm { font-size: 11px; padding: 0 6px; border-radius: 999px; color: var(--teal); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.card-foot .catalog-rating-text { font-size: 13px; color: var(--amber); font-weight: 600; }
.card-foot .catalog-rating-text:not(:empty)::before { content: "\2605 "; }
.card-foot .catalog-rating-text:empty { display: none; }
.card-foot .rate-form { margin: 0; }
.card-foot .rate-star { font-size: 19px; padding: 0 1px; }
.card-foot .interest-form { margin: 0 0 0 auto; }

/* Interesting, pressed: a small lift and a +1 that floats away */
.interest-button { position: relative; transition: transform .12s, background-color .12s; }
.interest-button.pop { animation: interest-pop .45s ease-out; }
.interest-button .plus-one { position: absolute; right: 4px; top: -4px; font-size: 12px; font-weight: 700; color: var(--accent); pointer-events: none;
  animation: plus-one .8s ease-out forwards; }
@keyframes interest-pop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes plus-one { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-18px); } }
@media (prefers-reduced-motion: reduce) {
  .catalog-card, .catalog-card:hover { transition: none; transform: none; }
  .interest-button.pop, .interest-button .plus-one { animation: none; }
}

/* joining, offered once among the cards */
.catalog-join { justify-content: center; gap: 10px; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(160deg, var(--accent-soft), var(--bg) 70%); }
.catalog-join:hover { transform: none; }
.catalog-join-title { margin: 0; font-size: 18px !important; font-weight: 700; color: var(--ink) !important; }
.catalog-join-buttons { display: flex; align-items: center; gap: 14px; }
.catalog-join .button { padding: 9px 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; }

/* the site's header on a phone: one line of links that scrolls, no theme menu */
@media (max-width: 640px) {
  .beginend .topbar { gap: 10px 14px; padding-block: 10px; }
  .beginend .topbar .theme-choice { display: none !important; }
  .beginend .topbar nav { order: 9; flex-wrap: nowrap; width: 100%; overflow-x: auto; gap: 18px; padding-bottom: 2px; scrollbar-width: none; }
  .beginend .topbar nav::-webkit-scrollbar { display: none; }
  .beginend .topbar nav a { white-space: nowrap; }
}
.interest-invite { position: fixed; left: 50%; bottom: 18px; z-index: 50; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 24px)); padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg);
  box-shadow: var(--shadow); font-size: 14px; transition: opacity .5s; }
.interest-invite a { color: var(--bg); font-weight: 700; }
.interest-invite button { border: 0; background: none; color: var(--bg); font-size: 18px; cursor: pointer; }
.interest-invite.gone { opacity: 0; }
.card-facts .fact-license { max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.catalog-badge { margin-top: 8px; font-size: 14px; }
.catalog-badge summary { cursor: pointer; color: var(--accent); }
.catalog-badge pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--bg-soft); padding: 8px 10px; border-radius: 8px; }
.entry-proof { margin: 4px 0 14px; }
.entry-proof li { font-size: 13px; padding: 3px 11px; }
.entry-proof .fact-interest { color: var(--accent); font-weight: 600; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.entry-proof .fact-rating { color: var(--amber); font-weight: 600; }
.catalog-entry .catalog-actions { margin: 4px 0 4px; }
.catalog-entry .catalog-actions .interest-form { margin: 0; }
.catalog-entry .catalog-actions .interest-button { min-height: 42px; padding: 8px 16px; font-size: 14px; border-radius: 8px; }
.catalog-entry .interest-hint { margin-top: 2px; }

/* Discovering, on the way out and in.  Not for me tosses the project off to
   the left, and the next rises from the bottom.  Interesting bursts a star
   from the button, the project shrinks into it, and the next drops in. */
.leaving .catalog-entry { transition: transform .5s cubic-bezier(.4, 0, 1, 1), opacity .5s ease-in; }
.leaving-no .catalog-entry { transform-origin: 10% 100%; transform: translateX(-110%) rotate(-7deg); opacity: 0; }
.leaving-yes .catalog-entry { transition-duration: .7s; transition-timing-function: cubic-bezier(.6, 0, .9, .4); transform: scale(.02); opacity: 0; }
.discover-yes.done { background: var(--teal); border-color: var(--teal); color: #06201d; }
.star-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.fly-star { position: absolute; left: 0; top: 0; display: block; margin: -.5em 0 0 -.5em; font-size: 96px; line-height: 1; color: var(--amber);
  text-shadow: 0 0 28px color-mix(in srgb, var(--amber) 70%, transparent), 0 0 4px #fff; animation: fly-star .95s cubic-bezier(.3, .1, .6, 1) forwards; }
@keyframes fly-star {
  0% { transform: scale(.15) rotate(-30deg); opacity: 0; }
  28% { transform: scale(1.25) rotate(10deg); opacity: 1; }
  45% { transform: scale(1) rotate(25deg); opacity: 1; }
  100% { transform: translate(38vw, -85vh) scale(.35) rotate(220deg); opacity: 0; }
}
.star-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 8px var(--amber); animation: spark .55s ease-out .12s both; }
@keyframes spark {
  0% { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.2); opacity: 0; }
}
.arrive-yes { animation: drop-in .9s cubic-bezier(.2, .9, .3, 1.12) backwards; }
.arrive-no { animation: rise-in .8s cubic-bezier(.2, .7, .3, 1) backwards; }
@keyframes drop-in { from { transform: translateY(-120px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise-in { from { transform: translateY(120px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .leaving .catalog-entry, .arrive-yes, .arrive-no { transition: none; animation: none; transform: none; opacity: 1; }
  .star-burst { display: none; }
}