/* GENERATED by scripts/build-library-css.js from prototype/tokens.css and prototype/styles.css. Edit those, then rebuild. */

/* Fonts: the app's own files in public/site/fonts */
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/work-sans-v16-latin-regular.woff2') format('woff2'), url('../fonts/work-sans-v16-latin-regular.woff') format('woff'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/work-sans-v16-latin-700.woff2') format('woff2'), url('../fonts/work-sans-v16-latin-700.woff') format('woff'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ubuntu-v19-latin-regular.woff2') format('woff2'), url('../fonts/ubuntu-v19-latin-regular.woff') format('woff'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ubuntu-v19-latin-500.woff2') format('woff2'), url('../fonts/ubuntu-v19-latin-500.woff') format('woff'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ubuntu-v19-latin-700.woff2') format('woff2'), url('../fonts/ubuntu-v19-latin-700.woff') format('woff'); }

/*
  CodeStitch Design System tokens used by the library screens.
  Values come from the design system; the comment after each says what the app already calls it
  (public/site/css/core-styles-cgp.css and core-styles.css). Everything is scoped to .lb-app so it
  can't leak into other dashboard pages.

  Fonts: the prototype's @font-face rules (right after this comment) point at its own copies. In the
  app's library.css, scripts/build-library-css.js replaces them with rules for the app's own files
  (/site/fonts/work-sans-v16-*, ubuntu-v19-*), placed at the top of that file.
*/


.lb-app {
  /* Type */
  --lb-font-body: 'Work Sans', Arial, sans-serif;   /* --baseFont */
  --lb-font-display: 'Ubuntu', Arial, sans-serif;   /* --secondFont */

  /* Ink */
  --lb-ink: #14142B;          /* --bodyText (design system); the app uses #14142B in core-styles */
  --lb-body: #4E4B66;         /* --neutralBody */
  /* --neutralLabel is #6E7191, which is 4.42:1 on the page and 4.27:1 on the sunken fill (under AA).
     These screens put muted text on both, so they use a slightly darker grey: 4.81:1 / 5.34:1 on white. */
  --lb-muted: #666987;        /* new; was --neutralLabel #6E7191 */
  --lb-navy: #0C293E;         /* --primary-default (cgp) / --primary (core-styles) */
  --lb-navy-hover: #130F26;   /* app button hover */
  --lb-focus: #3A96D9;        /* --blue-med */

  /* Surfaces and lines */
  --lb-page: #F7F7F7;         /* --neutral-line-bg2 */
  --lb-card: #FFFFFF;         /* --white */
  --lb-sunken: #F3F3F4;       /* --neutral-line-bg */
  --lb-hover: #F7F7F7;        /* row hover fill */
  --lb-line: #E8E9EC;         /* --neutralLine */
  --lb-line-strong: #D5D6DB;  /* new: card border on hover */
  --lb-line-btn-hover: #C9CBD3; /* new: outline button border on hover */
  --lb-soft: rgba(0, 0, 0, 0.1); /* .border-button border */

  /* Elevation */
  --lb-shadow-nav: rgba(149, 157, 165, 0.2) 0 8px 24px; /* header, popovers, card hover */
  --lb-shadow-chip: 0 1px 2px rgba(0, 0, 0, 0.08);      /* white chips on top of previews */
  --lb-shadow-pressed: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px #E8E9EC; /* pressed segment */

  /* Radii */
  --lb-radius-panel: 12px;    /* cards, popovers, empty states; matches the Get code panels */
  --lb-radius-control: 6px;   /* buttons, rows, chips */
  --lb-radius-track: 8px;     /* segmented control track */
  --lb-radius-input: 8px;     /* .5rem, TextField */

  /* Motion */
  --lb-ease: 0.3s ease;
}

/*
  Library, Collections and My Stitches.
  Every class starts with lb- and every rule sits under .lb-app, so nothing leaks into other pages.
  In the app this ships as public/site/css/library.css (node scripts/build-library-css.js).
  Values match the "CodeStitch Browse Redesign" canvas; SPEC.md section 3 lists them.
*/

.lb-app, .lb-app *, .lb-app *::before, .lb-app *::after { box-sizing: border-box; }

body.lb-body { margin: 0; background: var(--lb-page, #F7F7F7); }

.lb-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--lb-page);
  color: var(--lb-ink);
  font-family: var(--lb-font-body);
  font-size: 14px;
  line-height: 1.5;
}
.lb-app button, .lb-app input { font: inherit; color: inherit; }
.lb-app a { color: var(--lb-ink); }
.lb-app img { display: block; }
.lb-app :focus-visible { outline: 2px solid var(--lb-focus); outline-offset: 2px; }
.lb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- header */

.lb-header {
  flex: none;
  position: relative;
  z-index: 2;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--lb-card);
  box-shadow: var(--lb-shadow-nav);
}
.lb-logo { flex: none; display: block; width: 150px; }
.lb-logo img { width: 150px; height: auto; }
.lb-search { position: relative; display: block; width: 440px; min-width: 0; }
.lb-search img { position: absolute; top: 50%; left: 16px; width: 24px; height: 24px; transform: translateY(-50%); pointer-events: none; }
.lb-search input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px 0 52px;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-input);
  background: var(--lb-sunken);
  font-size: 16px;
  color: var(--lb-ink);
  outline: none;
}
.lb-search input::placeholder { color: var(--lb-muted); }
.lb-search input:focus-visible { outline: 2px solid var(--lb-focus); outline-offset: 0; }
.lb-header-spacer { flex: 1; }
.lb-user { flex: none; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--lb-body); text-decoration: none; white-space: nowrap; }
.lb-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

/* ------------------------------------------------------------------ body */

.lb-shell { flex: 1; min-height: 0; display: flex; }

.lb-side {
  width: 264px;
  flex: none;
  overflow-y: auto;
  padding: 4px 16px 28px;
  background: var(--lb-card);
  border-right: 1px solid var(--lb-line);
}

/* Primary nav: the SidebarNav component's values (.main-nav in core-styles) */
.lb-nav { list-style: none; margin: 0; padding: 14px 0 0; }
.lb-nav li { list-style: none; }
.lb-nav a {
  width: 90%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-left: 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 32px;
  color: var(--lb-muted);
  text-decoration: none;
  transition: background-color var(--lb-ease), color var(--lb-ease);
}
.lb-nav a:hover, .lb-nav a[aria-current='page'] { background: var(--lb-hover); color: var(--lb-navy); }
.lb-nav a[aria-current='page'] { font-weight: 700; }
.lb-nav img { width: 16px; height: 16px; }

.lb-divider { height: 1px; margin: 2px 0 18px; background: var(--lb-line); }

.lb-label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.lb-group-label { display: block; margin: 18px 0 6px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-muted); }
.lb-group-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 6px; padding: 0 2px 0 10px; }
.lb-group-head .lb-group-label { margin: 0; padding: 0; }

/* Segmented control: same recipe as Get code's Format picker */
.lb-seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--lb-radius-track); background: var(--lb-sunken); }
.lb-seg button {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: var(--lb-radius-control);
  background: transparent;
  font-size: 13px;
  color: var(--lb-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--lb-ease), color var(--lb-ease);
}
.lb-seg button[aria-pressed='true'] { background: var(--lb-card); color: var(--lb-ink); font-weight: 700; box-shadow: var(--lb-shadow-pressed); }
.lb-seg--small button { flex: none; height: 28px; font-size: 12px; }
.lb-side .lb-seg { margin-bottom: 14px; }

/* Tree rows (replaces CategoryList) */
.lb-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.lb-tree li { list-style: none; }
.lb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: var(--lb-radius-control);
  background: transparent;
  font-size: 13px;
  color: var(--lb-body);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--lb-ease), color var(--lb-ease);
}
.lb-app a.lb-row { color: var(--lb-body); text-decoration: none; }
.lb-row:hover { background: var(--lb-hover); }
.lb-app .lb-row[aria-current='page'] { background: var(--lb-sunken); color: var(--lb-ink); font-weight: 700; }
.lb-row-label { min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-count { flex: none; font-size: 12px; font-weight: 400; color: var(--lb-muted); font-variant-numeric: tabular-nums; }
.lb-new { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; border: none; border-radius: var(--lb-radius-control); background: transparent; font-size: 12px; font-weight: 700; color: var(--lb-muted); cursor: pointer; }
.lb-new:hover { color: var(--lb-ink); background: var(--lb-hover); }

/* ------------------------------------------------------------------ main */

.lb-main { flex: 1; min-width: 0; overflow-y: auto; }
.lb-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 28px 16px;
  background: var(--lb-page);
}
.lb-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lb-title-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lb-title { margin: 0; font-family: var(--lb-font-display); font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--lb-ink); }
.lb-meta { font-size: 14px; color: var(--lb-muted); }

.lb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lb-toolbar-spacer { flex: 1 1 auto; }
.lb-vrule { width: 1px; height: 24px; margin: 0 6px; background: var(--lb-line); }

/* Outline button: filters, sort, Share, Load more (Get code's "Core styles" button) */
.lb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-control);
  background: var(--lb-card);
  font-size: 13px;
  color: var(--lb-ink);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--lb-ease), background-color var(--lb-ease);
}
.lb-btn:hover { border-color: var(--lb-line-btn-hover); }
.lb-btn[aria-expanded='true'] { border-color: var(--lb-navy); }
.lb-btn--active { font-weight: 700; }
.lb-btn--strong { font-weight: 700; padding: 0 16px; }
.lb-btn svg { flex: none; color: var(--lb-muted); }
.lb-btn-muted { color: var(--lb-muted); }

/* Navy count pill: the Badge component, tone="navy" */
.lb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--lb-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
}

.lb-link {
  height: 34px;
  padding: 0 6px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--lb-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lb-link:hover { color: var(--lb-ink); }
.lb-link:disabled { opacity: 0.5; text-decoration: none; cursor: default; }

.lb-check { display: inline-flex; align-items: center; gap: 8px; height: 34px; font-size: 13px; color: var(--lb-body); white-space: nowrap; cursor: pointer; }
.lb-check input, .lb-option input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--lb-navy); cursor: pointer; }

/* App primary button: Button variant="app" */
.lb-primary {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 30px;
  border: none;
  border-radius: 4px;
  background: var(--lb-navy);
  color: #fff;
  font-family: var(--lb-font-display);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lb-ease);
}
.lb-app a.lb-primary { color: #fff; }
.lb-primary:hover { background: var(--lb-navy-hover); }

/* -------------------------------------------------------------- popovers */

.lb-dd { position: relative; }
.lb-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 300px;
  overflow: hidden;
  background: var(--lb-card);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-panel);
  box-shadow: var(--lb-shadow-nav);
}
.lb-pop--right { left: auto; right: 0; width: 200px; padding: 6px; }
.lb-pop-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--lb-line); }
.lb-pop-head .lb-label { margin: 0; }
.lb-pop-hint { min-width: 0; font-size: 12px; color: var(--lb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-pop-list { list-style: none; margin: 0; padding: 6px; max-height: 296px; overflow-y: auto; }
.lb-pop-list li { list-style: none; }
.lb-option { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: var(--lb-radius-control); font-size: 13px; color: var(--lb-ink); cursor: pointer; transition: background-color var(--lb-ease); }
.lb-option:hover { background: var(--lb-hover); }
.lb-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-option--empty .lb-option-name { color: var(--lb-muted); }
.lb-pop-foot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--lb-line); }
.lb-pop-foot .lb-link { height: auto; padding: 0; }
.lb-pop-foot span { margin-left: auto; font-size: 12px; color: var(--lb-muted); }
.lb-sort-option { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: none; border-radius: var(--lb-radius-control); background: transparent; font-size: 13px; color: var(--lb-ink); text-align: left; cursor: pointer; }
.lb-sort-option:hover { background: var(--lb-hover); }
.lb-sort-option[aria-pressed='true'] { font-weight: 700; }
.lb-sort-option svg { margin-left: auto; color: var(--lb-navy); }

/* ------------------------------------------------------------------ grid */

.lb-content { padding: 6px 28px 44px; }
/* 300px minimum (team revision 2026-10-15); min() keeps one column on phones narrower than that.
   dense lets later cards fill the gap a full-width Navigation card would leave at the end of a row. */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); grid-auto-flow: row dense; gap: 28px 20px; margin: 0; padding: 0; list-style: none; }

/* Card (replaces the stitch card component) */
.lb-card { position: relative; min-width: 0; }
.lb-card-link { display: block; color: inherit; text-decoration: none; }
.lb-card-link:focus-visible { outline: none; }
.lb-card-link:focus-visible .lb-thumb { outline: 2px solid var(--lb-focus); outline-offset: 2px; }
.lb-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-panel);
  background: var(--lb-sunken);
  transition: box-shadow var(--lb-ease), border-color var(--lb-ease);
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lb-card:hover .lb-thumb, .lb-card:focus-within .lb-thumb { box-shadow: var(--lb-shadow-nav); border-color: var(--lb-line-strong); }
.lb-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--lb-radius-control);
  background: var(--lb-card);
  box-shadow: var(--lb-shadow-chip), 0 0 0 1px var(--lb-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--lb-ink);
}
.lb-badge img { width: 12px; height: 12px; }
.lb-badge svg { color: var(--lb-muted); }
/* Navigation Stitches take a whole row and show the whole preview, uncropped */
.lb-card--wide { grid-column: 1 / -1; }
.lb-card--wide .lb-thumb { aspect-ratio: auto; min-height: 64px; }
.lb-card--wide .lb-thumb img { height: auto; object-fit: contain; }

/* Card text: section, name + #id, pack + tags. Every row keeps its height when empty so cards line up. */
.lb-card-text { display: flex; flex-direction: column; gap: 4px; padding: 12px 2px 0; min-width: 0; }
.lb-card-section { display: block; min-height: 1.3em; font-size: 11px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.lb-card-title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--lb-font-display); font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--lb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-card-ref { flex: none; font-size: 12px; color: var(--lb-muted); font-variant-numeric: tabular-nums; }
.lb-card-meta { display: flex; align-items: center; gap: 8px; min-width: 0; height: 22px; font-size: 13px; line-height: 1.4; color: var(--lb-muted); white-space: nowrap; }
.lb-pack { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--lb-radius-control); background: var(--lb-card); box-shadow: inset 0 0 0 1px var(--lb-line-strong); font-size: 12px; font-weight: 700; color: var(--lb-ink); }
.lb-card-tags { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* "+2": hovering it lists every tag. Visible overflow on the row above lets the list hang out of the card. */
.lb-more-tags { position: relative; flex: none; margin-left: -4px; cursor: default; }
.lb-tip {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 6px);
  left: -10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-input);
  background: var(--lb-card);
  box-shadow: var(--lb-shadow-nav);
  font-size: 12px;
  line-height: 1.5;
  color: var(--lb-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--lb-ease), visibility var(--lb-ease);
}
.lb-more-tags:hover .lb-tip { opacity: 1; visibility: visible; }

/* Hover actions: white chips holding the .border-button icon buttons */
.lb-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.lb-chip { display: flex; border-radius: 0.3em; background: var(--lb-card); font-size: 22px; box-shadow: var(--lb-shadow-chip); }
.lb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.5em;
  padding: 0;
  border: 1px solid var(--lb-soft);
  border-radius: 0.3em;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--lb-ease);
}
.lb-icon-btn img { width: 0.8em; height: 0.8em; transition: filter var(--lb-ease); }
.lb-icon-btn:hover, .lb-icon-btn[aria-pressed='true'] { background: var(--lb-navy); }
.lb-icon-btn:hover img, .lb-icon-btn[aria-pressed='true'] img { filter: grayscale(1) brightness(1000%); }

.lb-hover-only, .lb-save { opacity: 0; visibility: hidden; transition: opacity var(--lb-ease), visibility var(--lb-ease); }
.lb-card:hover .lb-hover-only, .lb-card:focus-within .lb-hover-only,
.lb-card:hover .lb-save, .lb-card:focus-within .lb-save, .lb-save.is-saved { opacity: 1; visibility: visible; }
/* Touch screens have no hover, so the actions are always there */
@media (hover: none) {
  .lb-hover-only, .lb-save { opacity: 1; visibility: visible; }
}

.lb-more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 40px; font-size: 13px; color: var(--lb-muted); }

.lb-empty { max-width: 520px; margin: 48px auto 0; padding: 32px; text-align: center; background: var(--lb-card); border: 1px solid var(--lb-line); border-radius: var(--lb-radius-panel); }
.lb-empty h2 { margin: 0 0 6px; font-family: var(--lb-font-display); font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--lb-ink); }
.lb-empty p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--lb-body); }

/* Toast (stands in for the app's #user-notif) */
.lb-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--lb-ink);
  color: #fff;
  font-size: 13px;
  box-shadow: var(--lb-shadow-nav);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lb-ease), transform var(--lb-ease);
}
.lb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* -------------------------------------------------------------- < 860px */

@media (max-width: 860px) {
  .lb-app { height: auto; min-height: 100vh; overflow: visible; }
  .lb-shell { flex-direction: column; }
  .lb-side { width: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--lb-line); }
  .lb-tree-wrap { max-height: 240px; overflow-y: auto; }
  .lb-main { overflow: visible; }
  .lb-head { position: static; }
  .lb-search { width: auto; flex: 1 1 auto; }
  .lb-user span { display: none; }
  .lb-header { gap: 16px; padding: 0 16px; }
  .lb-logo, .lb-logo img { width: 120px; }
  .lb-head, .lb-content { padding-left: 16px; padding-right: 16px; }
}

/* ======================================================================
   App additions (not in the prototype)
   The page also loads the app's own stylesheets, for the Save to folder
   modal. These undo the global rules that would change the layout above.
   ====================================================================== */

/* core-styles.css makes body a wrapping flex row and sets 125%+ font sizes. */
body.lb-body { display: block; font-size: 16px; }

/* core-styles-cgp.css removes focus rings with !important; put the library's back. */
.lb-app :focus-visible { outline: 2px solid var(--lb-focus) !important; outline-offset: 2px; }
.lb-app .lb-card-link:focus-visible { outline: none !important; }

/* Dropdowns are rendered by the server and opened by library.js. */
.lb-app .lb-pop[hidden] { display: none; }

/* While the next results load. */
.lb-app.is-loading .lb-content { opacity: 0.6; transition: opacity 0.2s; }

/* Header avatar when the user hasn't uploaded one: their initial. */
.lb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lb-sunken);
  color: var(--lb-navy);
  font-size: 14px;
  font-weight: 700;
}

/* The star opens the app's Save to folder modal; it sits above the library. */
body.lb-body #save-stitches, body.lb-body #unsave-stitches { font-size: 20px; }