/* The Library (library.html), redesigned 2 Oct 2026 (Spoorthi's answers: "Browse the shelves", files "By kit", tools on
   "Their own shelf", "Nothing is sacred"; her pick, "Shelves as a bento wall"). The home is a wall of eight shelves, each
   tile sized by what it holds; a shelf groups its files by the skill or run they came from, and its tools by lane. A file
   still opens beside the list from 1180px and in a sheet on a phone (layout C, 28 Sep). The world is the app's: cream
   ground, sheet and sand tiles with 1px lines, Instrument Serif shelf names, mono file names; terracotta only for Copy
   and the host's Release. */
.lb-col { max-width: 820px; }
.lb-listcol { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }

/* the head: the title and its line, the search beside them from 1000px */
.lb-head { display: grid; gap: 18px; align-items: end; }
.lb-head h1 { margin: 0; font: 600 40px/1.1 var(--sans); letter-spacing: -.015em; }
.lb-sub { margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.lb-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line-strong); }
.lb-search .ico { width: 18px; height: 18px; color: var(--faint); flex-shrink: 0; }
.lb-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; outline: none; caret-color: var(--accent); }
.lb-search input::placeholder { color: var(--faint); opacity: 1; }
.lb-search:focus-within { box-shadow: 0 0 0 2px var(--accent); }
@media (min-width: 1000px) { .lb-head { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 32px; } .lb-head .lb-search { margin-bottom: 2px; } }
/* / puts you in the search (shown where there's a keyboard) */
.lb-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--faint); font: 500 12px/1 var(--mono); }
.lb-search:focus-within .lb-kbd { visibility: hidden; }
@media (hover: none) { .lb-kbd { display: none; } }
/* a visitor and a free account: what's free here */
.lb-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; padding: 12px 14px 12px 16px; border-radius: 14px; background: var(--peach-soft); font-size: 14.5px; line-height: 1.4; }
.lb-note[hidden] { display: none; }
.lb-note p { display: flex; align-items: flex-start; gap: 8px; margin: 0; flex: 1 1 280px; }
.lb-note p .ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--accent-ink); }
.lb-note .btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- the wall ---------- */
.lb-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.lb-wall[hidden] { display: none; }
.lb-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 148px; padding: 16px 16px 14px; border-radius: 20px;
  background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; overflow: hidden;
  transition: box-shadow .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1); }
.lb-tile:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.lb-tile:has(> .lb-tile-a:active) { transform: scale(.992); }
/* the tile's link covers it; the week line sits above it */
.lb-tile-a { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lb-tile-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lb-tile .wk { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; }
.lb-tile .tt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lb-tile .tn { margin: 0; font: 600 26px/1.1 var(--sans); letter-spacing: -.01em; }
.lb-tile .go { flex-shrink: 0; align-self: center; width: 18px; height: 18px; color: var(--accent-ink); transition: transform .18s cubic-bezier(.16, 1, .3, 1); }
.lb-tile:has(> .lb-tile-a:hover) .go { transform: translateX(3px); }
.lb-tile .tc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.lb-tile .tc .mv { height: 22px; padding: 0 8px; font-size: 11.5px; white-space: nowrap; }
.lb-tile .tc .n { white-space: nowrap; }
.lb-tile .feat { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 10px; min-width: 0; }
.lb-tile .feat li { display: grid; gap: 2px; min-width: 0; }
.lb-tile .feat code { font: 500 13px/1.35 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-tile .feat span { font-size: 13.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-tile[data-tone="code"] .feat span { color: rgba(239, 230, 223, .72); }
.lb-tile[data-tone="code"] .tc .mv.new { background: rgba(242, 183, 158, .16); color: #F2B79E; }
.lb-tile .peek { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 12.5px/1.5 var(--mono); color: var(--muted); max-height: 3em; overflow: hidden; }
.lb-tile .peek li { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-tile[data-tone="peach"] { background: var(--peach-soft); box-shadow: inset 0 0 0 1px rgba(166, 74, 48, .14); }
.lb-tile[data-tone="peach"]:hover { box-shadow: inset 0 0 0 1px rgba(166, 74, 48, .3); }
.lb-tile[data-tone="code"] { background: var(--code-bg); color: var(--code-ink); box-shadow: none; }
.lb-tile[data-tone="code"] .tc, .lb-tile[data-tone="code"] .peek { color: rgba(239, 230, 223, .72); }
.lb-tile[data-tone="code"] .go { color: #F2B79E; }
.lb-tile[data-tone="code"] .lb-tile-a:focus-visible { outline-color: #F2B79E; }
:root[data-theme="dark"] .lb-tile[data-tone="code"] { box-shadow: inset 0 0 0 1px rgba(239, 230, 223, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lb-tile[data-tone="code"] { box-shadow: inset 0 0 0 1px rgba(239, 230, 223, .22); } }

/* the Tools tile: what moved this week, each with its mark */
.lb-tile[data-kind="tool"] .tn { font-size: 30px; }
.lb-tile .wk { font-size: 14px; color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); }
.lb-movers { margin: 0; padding: 14px 0 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lb-movers li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-movers .mk { width: 38px; height: 38px; border-radius: 11px; }
.lb-movers .mk .ico { width: 17px; height: 17px; }
.lb-movers .mn { display: grid; gap: 1px; min-width: 0; }
.lb-movers .mt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-movers b { min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-movers small { font-size: 12.5px; font-weight: 500; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-movers .mv { height: 22px; padding: 0 8px; font-size: 11.5px; flex-shrink: 0; }
/* the Skills tile: the skills' names in two columns */
.lb-tile[data-kind="skill"] .peek { display: flex; flex-wrap: wrap; gap: 4px 16px; max-height: none; margin-top: 14px; }
.lb-tile[data-kind="skill"] .peek li { white-space: nowrap; overflow: visible; }
.lb-tile[data-kind="skill"] .peek li[hidden] { display: none; }
.lb-tile[data-kind="skill"] .peek .more { font-family: var(--sans); font-weight: 500; color: var(--accent-ink); }
.lb-tile[data-kind="code"] .peek { display: grid; gap: 2px; max-height: none; }
.lb-tile[data-kind="code"] .peek li:nth-child(n+5) { display: none; }
.lb-tile[data-kind="tool"], .lb-tile[data-kind="skill"] { grid-column: 1 / -1; }
.lb-tile[data-kind="tool"] .lb-movers li:nth-child(n+5) { display: none; }
.lb-tile .lk { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--faint); }
.lb-tile .lk .ico { width: 14px; height: 14px; }

/* a phone: two small tiles share a row, so each shows one file, right under its count */
@media (max-width: 899px) {
  .lb-tile:not([data-kind="tool"]):not([data-kind="skill"]) .tn { font-size: 22px; text-wrap: balance; }
  .lb-tile .feat { margin-top: 8px; }
  .lb-tile .feat span { -webkit-line-clamp: 3; }
  .lb-tile[data-kind="code"] .feat li:nth-child(n+2) { display: none; }
}
/* from 900px: ten columns, every shelf in view; each tile's size follows what it holds */
@media (min-width: 900px) {
  .lb-wall { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-rows: 66px; gap: 12px;
    grid-template-areas:
      "tool tool tool tool tool tool skill skill skill skill"
      "tool tool tool tool tool tool skill skill skill skill"
      "tool tool tool tool tool tool skill skill skill skill"
      "tool tool tool tool tool tool prompt prompt prompt prompt"
      "tool tool tool tool tool tool prompt prompt prompt prompt"
      "code code code template template template template config config config"
      "code code code template template template template config config config"
      "code code code hook hook hook hook eval eval eval"
      "code code code hook hook hook hook eval eval eval"; }
  .lb-tile { min-height: 0; padding: 18px 20px 16px; }
  .lb-tile[data-kind] { grid-column: auto; }
  .lb-tile[data-kind="tool"] { grid-area: tool; padding: 22px 24px 20px; }
  .lb-tile[data-kind="skill"] { grid-area: skill; }
  .lb-tile[data-kind="prompt"] { grid-area: prompt; }
  .lb-tile[data-kind="code"] { grid-area: code; }
  .lb-tile[data-kind="template"] { grid-area: template; }
  .lb-tile[data-kind="config"] { grid-area: config; }
  .lb-tile[data-kind="hook"] { grid-area: hook; }
  .lb-tile[data-kind="eval"] { grid-area: eval; }
  .lb-tile[data-kind="tool"] .tn { font-size: 36px; }
  .lb-movers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; padding-top: 22px; }
  .lb-tile[data-kind="tool"] .lb-movers li:nth-child(n+5) { display: flex; }
  .lb-tile[data-kind="tool"] .lb-movers li:nth-child(n+7) { display: none; }
  .lb-tile[data-kind="code"] .peek li:nth-child(n+5) { display: block; }
  .lb-tile[data-kind="code"] .peek li:nth-child(n+8) { display: none; }
}
/* the wall while it loads: the same shapes on sand */
.skel-wall i { display: block; min-height: 148px; border-radius: 20px; background: linear-gradient(90deg, var(--sand-2), var(--sand), var(--sand-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel-wall i:nth-child(-n+2) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .skel-wall i { min-height: 0; }
  .skel-wall i:nth-child(1) { grid-area: tool; } .skel-wall i:nth-child(2) { grid-area: skill; } .skel-wall i:nth-child(3) { grid-area: prompt; }
  .skel-wall i:nth-child(4) { grid-area: code; } .skel-wall i:nth-child(5) { grid-area: template; } .skel-wall i:nth-child(6) { grid-area: config; }
  .skel-wall i:nth-child(7) { grid-area: hook; } .skel-wall i:nth-child(8) { grid-area: eval; }
}
@media (prefers-reduced-motion: reduce) { .skel-wall i { animation: none; } }

/* ---------- a shelf ---------- */
.lb-shelf { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; margin-top: 22px; }
.lb-shelf[hidden] { display: none; }
.lb-kinds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.lb-kinds::-webkit-scrollbar { display: none; }
.lb-kinds .chip { flex-shrink: 0; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.lb-kinds .chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.lb-kinds .chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); box-shadow: none; }
.lb-kinds .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-kinds .chip .ico { width: 15px; height: 15px; margin: 0 4px -2px -2px; }
.lb-shelf-h { margin: 26px 0 0; font: 600 36px/1.1 var(--sans); letter-spacing: -.012em; }
.lb-shelf-h:empty { display: none; }
.lb-count { margin: 6px 0 0; font-size: 13.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.lb-count[hidden] { display: none; }
.lb-kinds.lb-lanes { margin-top: 16px; }
.lb-lanes[hidden] { display: none; }
.lb-list { display: grid; gap: 28px; margin-top: 20px; min-width: 0; }
.lb-sec { display: grid; gap: 14px; min-width: 0; }
.lb-sec > h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 24px/1.12 var(--sans); }
.lb-sec > h3 .n { font: 500 13px/1 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.lb-sec > h3 .ln { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--accent-ink); }
.lb-sec > h3 .ln .ico { width: 15px; height: 15px; }
.lb-run { gap: 0; }
.lb-run > h3 { display: block; font-size: 22px; line-height: 1.15; text-wrap: balance; max-width: 34ch; }
.lb-run > h3 a { color: inherit; text-decoration: none; }
.lb-run > h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.lb-run > h3 .ico { width: 16px; height: 16px; margin-left: 6px; vertical-align: 1px; color: var(--accent-ink); }
.lb-sec-meta { margin: 4px 0 14px; font-size: 13.5px; color: var(--faint); }
.lb-kit-dir code { font: 500 14px/1.35 var(--mono); color: var(--muted); }
.lb-kit-path { margin: -2px 0 0; }
.lb-kit-meta .lb-zip { margin-left: auto; }
@media (max-width: 760px) { .lb-zip { width: 36px; padding: 0; justify-content: center; } .lb-zip .zl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.lb-kit-path code { font: 400 12.5px/1.4 var(--mono); color: var(--faint); overflow-wrap: anywhere; }
.lb-zip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 13.5px/1 var(--sans); cursor: pointer; }
.lb-zip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.lb-zip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-zip:disabled { opacity: .5; cursor: progress; }
.lb-zip .ico { width: 15px; height: 15px; color: var(--accent-ink); }
.lb-more { display: flex; align-items: center; width: calc(100% + 40px); min-height: 44px; margin: 0 -20px; padding: 0 20px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 20px 20px; background: none; color: var(--accent-ink); font: 500 13.5px/1 var(--sans); text-align: left; cursor: pointer; }
.lb-more:hover { background: color-mix(in srgb, var(--sand-2) 60%, transparent); }
.lb-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lb-kit:has(> .lb-more) { padding-bottom: 0; }
.lb-files .lb-row[hidden] { display: none; }

/* ---------- a kit: one skill, or one run's files of this shelf ---------- */
.lb-kits { display: block; }
/* runs with one card each share a row on a computer */
.lb-runs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 12px; }
@media (min-width: 900px) { .lb-app:not(.lb-split) .lb-runs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lb-app:not(.lb-split) .lb-runs .lb-kits { columns: 1; } .lb-runs .lb-run > h3 { max-width: none; } }
.lb-runs > .lb-run { align-content: start; }
/* a pair's headings, day lines and cards line up, even when one heading wraps */
@media (min-width: 900px) { .lb-app:not(.lb-split) .lb-runs > .lb-run { display: grid; grid-row: span 3; grid-template-rows: subgrid; } }
@media (min-width: 900px) { .lb-app:not(.lb-split) .lb-kits { columns: 2; column-gap: 12px; } }
.lb-kit { display: grid; min-width: 0; break-inside: avoid; margin-bottom: 12px; padding: 18px 20px 6px; border-radius: 20px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
.lb-kit-hd { display: grid; gap: 4px; padding-bottom: 10px; min-width: 0; }
.lb-kit-t { margin: 0; font: 600 20px/1.15 var(--sans); text-wrap: balance; overflow-wrap: anywhere; }
.lb-kit-t a { color: inherit; text-decoration: none; }
/* a one-line title still gives the finger 32px: the padding grows the link, not the line */
.lb-kit-t a, .lb-run > h3 a { padding-block: 6px; } /* 32px or taller to tap: the sans's line is shorter than the serif's was */
.lb-kit-t a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.lb-kit-t a .ico { width: 15px; height: 15px; margin-left: 4px; vertical-align: 1px; color: var(--accent-ink); }
.lb-skill .lb-kit-t { font: 600 17px/1.3 var(--sans); }
.lb-kit-what { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; }
.lb-kit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 0; font-size: 13px; color: var(--faint); }
.lb-kit-meta .by { font-weight: 500; }
.lb-gh, .lb-from { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; line-height: 1.35; color: var(--accent-ink); text-decoration: none; overflow-wrap: anywhere; }
.lb-gh { font-weight: 600; }
.lb-gh .ico { width: 15px; height: 15px; flex-shrink: 0; }
.lb-gh .ico.ext { width: 12px; height: 12px; margin-left: -2px; }
.lb-gh:hover, .lb-from:hover { text-decoration: underline; text-underline-offset: .18em; }
.lb-from { text-wrap: balance; }
.lb-free { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--peach-soft); color: var(--accent-ink); font-size: 11.5px; font-weight: 600; }
.lb-kit-meta .mv, .lb-sec-meta .mv { height: 22px; padding: 0 8px; font-size: 11.5px; }
.lb-sec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lb-kit-t .mv, .lb-kit-t .lb-free { vertical-align: 3px; margin-left: 8px; }
.lb-why { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.lb-why b { font-weight: 600; }
.lb-kit .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font: 600 12px/1 var(--sans); vertical-align: 3px; margin-left: 8px; }
.lb-files { list-style: none; margin: 0 -20px; padding: 0; display: grid; min-width: 0; }
.lb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; border-top: 1px solid var(--line); }
.lb-copy { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--accent-ink); cursor: pointer; transition: background .15s ease; }
.lb-copy:hover { background: var(--sand-2); }
.lb-copy:active { transform: scale(.94); }
.lb-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lb-copy:disabled { opacity: .5; cursor: progress; }
.lb-copy .ico { width: 17px; height: 17px; }
.lb-open { display: grid; gap: 3px; justify-items: start; min-width: 0; width: 100%; padding: 11px 20px 12px; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.lb-files .lb-row:hover { background: color-mix(in srgb, var(--sand-2) 60%, transparent); }
.lb-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.lb-open .nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; max-width: 100%; }
.lb-open code { font: 500 14px/1.35 var(--mono); overflow-wrap: break-word; }
.lb-open .dir { color: var(--faint); font-weight: 400; }
.lb-open .lk { display: inline-flex; align-self: center; margin-left: -4px; }
.lb-open .lk .ico { width: 14px; height: 14px; color: var(--faint); }
.lb-open .kd { font-size: 12.5px; font-weight: 600; color: var(--faint); }
.lb-open .wt { font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; }
.lb-files .lb-row:has(> .lb-open[aria-current="true"]) { background: var(--sand-2); }
.lb-open[aria-current="true"] code { color: var(--accent-ink); }
.lb-open[aria-busy="true"] { opacity: .6; }
.lb-files .lb-row:last-child { border-radius: 0 0 20px 20px; }
/* a skill from GitHub with no files of ours: the card ends with its link */
.lb-linked { padding-bottom: 16px; }
.lb-linked .lb-kit-hd { padding-bottom: 0; }
/* the host's line on a skill: publish it, change it, take it down */
.lb-hostacts { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; }
.lb-linked .lb-hostacts { padding: 10px 0 0; }

/* ---------- tools: cards by lane ---------- */
.lb-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
@media (min-width: 761px) { .lb-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .lb-app:not(.lb-split) .lb-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lb-tool { display: grid; min-width: 0; border: 0; }
.lb-tlink { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 12px; row-gap: 3px; height: 100%; box-sizing: border-box; min-width: 0;
  padding: 14px 16px 14px 14px; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .18s ease; }
.lb-tlink:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.lb-tlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-tlink .mk { grid-row: 1 / 3; }
.lb-tlink .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.lb-tlink .nm b { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.lb-tlink:hover .nm b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.lb-tlink .kd { grid-column: 2; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.lb-tlink .wt { grid-column: 1 / -1; margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; }
.lb-checked { grid-column: 1 / -1; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--faint); }
.mk { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; box-sizing: border-box; border-radius: 11px; background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--accent-ink); }
.mk .ico { width: 18px; height: 18px; }
.mk .ico.brand { color: var(--ink); }
.mv { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mv.new { background: var(--peach-soft); color: var(--accent-ink); }
.mv.changed { background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.in-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12px; font-weight: 600; }
@media (max-width: 760px) { .lb-tlink { grid-template-columns: 36px minmax(0, 1fr); } .lb-tlink .mk { width: 36px; height: 36px; } }

/* ---------- the host: the Library's switch, and the skills from GitHub ---------- */
.lb-host { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: var(--sand-2); box-shadow: 0 0 0 1px var(--line); font-size: 14px; line-height: 1.4; }
.lb-host > span { display: inline-flex; align-items: center; gap: 8px; }
.lb-host > span:first-child { flex-basis: 100%; }
.lb-host > span .ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.lb-host.live { background: var(--sheet); }
.lb-host.live > span .ico { color: var(--accent-ink); }
.lb-host .ask { flex-basis: 100%; font-weight: 500; }
.lb-skdesk { display: grid; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--sand-2); box-shadow: 0 0 0 1px var(--line); font-size: 14px; }
.lb-skdesk[hidden] { display: none; }
.lb-skdesk > p { display: flex; align-items: center; gap: 8px; margin: 0; }
.lb-skdesk > p .ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.lb-skform { display: grid; gap: 12px; }
.lb-skform[hidden] { display: none; }
.lb-skform label { display: grid; gap: 6px; min-width: 0; font-weight: 600; font-size: 13.5px; }
.lb-skform select { width: 100%; min-width: 0; }
.lb-skform label small { font-weight: 400; color: var(--faint); }
.lb-skform input, .lb-skform select, .lb-skform textarea { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: 400 16px/1.4 var(--sans); }
.lb-skform textarea { min-height: 68px; resize: vertical; }
.lb-skform input:focus, .lb-skform select:focus, .lb-skform textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.lb-skform .two { display: grid; gap: 12px; }
@media (min-width: 640px) { .lb-skform .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lb-skform .err { margin: 0; color: var(--err); font-weight: 500; }
.lb-skform .err:empty { display: none; }
.lb-skform .btns, .lb-skdesk .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-empty-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- one file: a sheet on a phone (workflows.css's .wf-sheet), Copy and the way back above the text ---------- */
.lb-sheet .hd b { white-space: normal; overflow-wrap: anywhere; }
.lb-sheet .what:empty { display: none; }
.lb-acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px 4px; }
.lb-acts[hidden] { display: none; }
.lb-sheet pre { min-height: 120px; }
.lb-sheet pre[hidden] { display: none; }
.lb-sheet pre::selection, .lb-open::selection, .lb-kit ::selection { background: var(--peach-soft); }
.lb-gate { padding: 14px 20px 22px; }
.lb-gate[hidden] { display: none; }

@media (min-width: 1180px) {
  .wf-app .lb-col { max-width: 1080px; }
  .lb-kinds { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  /* a file open: the list keeps its left edge and narrows; the file sits beside it and stays in view */
  .lb-app.lb-split .lb-col { display: grid; grid-template-columns: 440px minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .lb-app.lb-split .lb-head { grid-template-columns: minmax(0, 1fr); }
  .lb-app.lb-split .lb-kinds { gap: 6px; }
  .lb-app.lb-split .lb-kinds .chip { min-height: 32px; padding: 0 11px; font-size: 13px; }
  .lb-app.lb-split .lb-sheet { position: sticky; inset: auto; top: 24px; width: auto; max-width: none; height: auto; max-height: calc(100vh - 48px); margin: 0; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); z-index: 1; }
  .lb-app.lb-split .lb-sheet pre { max-height: none; }
}
@media (max-width: 760px) { .lb-more { width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px; } .lb-app .main { padding-bottom: 110px; } .lb-head h1 { font-size: 34px; } .lb-shelf-h { font-size: 34px; } .lb-kit { padding: 16px 16px 4px; } .lb-files { margin: 0 -16px; } .lb-open { padding-inline: 16px; } }

/* the signature move: a tile's name becomes its shelf's heading (a view transition; none with reduced motion) */
::view-transition-group(*) { animation-duration: .24s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }