/* Selectors carry html:not(#fv-tile-2026) body: an id inside :not() outranks flowboard_list.css's
   ".flowboard_tile_view #flowboard_list_block ul li" without editing that file.
   FlowTile on the web (flow-family-design-system/components/FlowTile). The Mac tile's design:
   card radius 18, the picture, an action row, the title. Light by default, dark on the dark
   pages (body.creator-dark-mode). !important because flowboard_list.css and modernize-2025.css
   style these lists with !important. */

/* The list: a grid. The scope stays outside :has(), where only the tile's own classes belong. */
html:not(#fv-tile-2026) body ul:has(> li.flowboard.ft-tile) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 32px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 0 32px !important;
  list-style: none !important;
}

html:not(#fv-tile-2026) body li.flowboard.ft-tile {
  --ft-card: #ffffff;
  --ft-well: #f2f2f2;
  --ft-hairline: rgba(0, 0, 0, 0.08);
  --ft-ink: #3a3a3a;
  --ft-muted: #6b6b6b;
  --ft-hover: rgba(0, 0, 0, 0.05);
  --ft-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  --ft-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.16);
  --ft-accent: #0c87d6;
  --ft-live: #21c538;
  --ft-danger: #c0392b;
  --ft-menu: #ffffff;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  left: auto !important;
  top: auto !important;
  background: var(--ft-card) !important;
  border: 1px solid var(--ft-hairline) !important;
  border-radius: 18px !important;
  box-shadow: var(--ft-shadow) !important;
  overflow: visible !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif !important;
  transition: box-shadow 0.15s, transform 0.15s !important;
}
html:not(#fv-tile-2026) body.creator-dark-mode li.flowboard.ft-tile {
  --ft-card: #363638;
  --ft-well: #454648;
  --ft-hairline: #3f4042;
  --ft-ink: #f5f5f5;
  --ft-muted: #c7c7c7;
  --ft-hover: rgba(255, 255, 255, 0.07);
  --ft-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --ft-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.5);
  --ft-danger: #e5675a;
  --ft-menu: #2b2c2e;
}
/* The same dark set when the machine is in dark mode (Brent, 24 October: grey text on black). */
@media (prefers-color-scheme: dark) {
  html:not(#fv-tile-2026) body li.flowboard.ft-tile {
  --ft-card: #363638;
  --ft-well: #454648;
  --ft-hairline: #3f4042;
  --ft-ink: #f5f5f5;
  --ft-muted: #c7c7c7;
  --ft-hover: rgba(255, 255, 255, 0.07);
  --ft-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --ft-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.5);
  --ft-danger: #e5675a;
  --ft-menu: #2b2c2e;
}
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile:hover { box-shadow: var(--ft-shadow-hover) !important; transform: translateY(-2px) !important; }
/* The tile with its menu open sits above its neighbours: a lifted tile is its own layer, so a
   menu inside it was painted under the next tiles (Brent, 24 October). */
html:not(#fv-tile-2026) body li.flowboard.ft-tile.ft-menu-open { z-index: 200 !important; box-shadow: var(--ft-shadow-hover) !important; transform: none !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile:hover { z-index: 2 !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile:focus-within { outline: 2px solid var(--ft-accent) !important; outline-offset: 2px !important; }

/* The picture. */
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-picture {
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 17px 17px 0 0 !important;
  background: var(--ft-well) !important;
  overflow: hidden !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-picture img.preview {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: filter 0.15s !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile:hover .ft-picture img.preview { filter: brightness(1.04) !important; }
/* No preview, or one that failed to load (the img removes itself): a placeholder on the well. */
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-picture { position: relative !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: var(--ft-muted) !important;
  font: 500 12px/16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.06)) !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-picture:not(:has(img)) .ft-placeholder { display: flex !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-placeholder svg { opacity: 0.7 !important; }

/* Meta: the action row, then the title. */
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-meta { position: relative !important; display: flex !important; flex-direction: column !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 48px !important;
  padding: 0 8px !important;
  border-bottom: 1px solid var(--ft-hairline) !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-group { display: inline-flex !important; align-items: center !important; gap: 2px !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-btn,
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: none !important;
  color: var(--ft-muted) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-btn:hover { background: var(--ft-hover) !important; color: var(--ft-ink) !important; }
/* Edit: the player's glyph, the row's button (Brent, 24 October: no box, no blue, like the rest). */
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-btn:focus-visible { outline: 2px solid var(--ft-accent) !important; outline-offset: -2px !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-status { cursor: default !important; color: var(--ft-live) !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-btn svg,
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-status svg { width: 22px !important; height: 22px !important; display: block !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 12px 16px 0 !important;
  padding: 0 !important;
  min-height: 40px !important;
  font: 600 15px/20px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif !important;
  color: var(--ft-ink) !important;
  text-decoration: none !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-title:last-child { margin-bottom: 16px !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-owner {
  margin: 2px 16px 14px !important;
  font: 500 12px/16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif !important;
  color: var(--ft-muted) !important;
  text-decoration: none !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-title:hover { color: var(--ft-accent) !important; }

/* The More menu. */
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu {
  /* A column: flowboard_list.css lays out every list inside the tile list as a row. */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  height: auto !important;
  left: auto;
  position: absolute !important;
  top: 44px;
  right: 8px;
  z-index: 50 !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 6px !important;
  gap: 2px !important;
  list-style: none !important;
  background: var(--ft-menu) !important;
  border: 1px solid var(--ft-hairline) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu[hidden] { display: none !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu li { display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; float: none !important; border: 0 !important; background: none !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu a {
  display: block !important;
  padding: 9px 12px !important; /* room between the items (Brent, 24 October) */
  border-radius: 6px !important;
  font: 500 13px/18px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif !important;
  color: var(--ft-ink) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu a:hover,
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu a:focus { background: var(--ft-accent) !important; color: #fff !important; outline: none !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu a.ft-danger { color: var(--ft-danger) !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu a.ft-danger:hover,
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu a.ft-danger:focus { background: var(--ft-danger) !important; color: #fff !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-menu .ft-sep { height: 1px !important; margin: 6px 4px !important; background: var(--ft-hairline) !important; }

/* The share sheet: a centred sheet over a dimmed page, in the creator sheet's style. The page's
   flowboard_list.js shows it with style="display: block"; the tile lets go of its lift while it
   is open, because a transformed ancestor would pin a fixed element to the tile. */
html:not(#fv-tile-2026) body li.flowboard.ft-tile:has(> .share_pop[style*="block"]) {
  transform: none !important;
  z-index: 400 !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile > .share_pop[style*="block"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-card {
  width: 440px !important;
  max-width: 100% !important;
  padding: 16px 16px 20px !important;
  background: var(--ft-menu) !important;
  border: 1px solid var(--ft-hairline) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  color: var(--ft-ink) !important;
  text-align: left !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; margin: 0 0 16px !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-header h4 { margin: 0 !important; font-weight: 600 !important; font-size: 16px !important; line-height: 22px !important; color: var(--ft-ink) !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-sub { margin: 2px 0 0 !important; padding: 0 !important; font-weight: 500 !important; font-size: 12px !important; line-height: 16px !important; color: var(--ft-muted) !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-close {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important; margin: -6px -6px 0 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 6px !important; background: none !important; color: var(--ft-muted) !important; cursor: pointer !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-close:hover { background: var(--ft-hover) !important; color: var(--ft-ink) !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-social { display: flex !important; gap: 10px !important; margin: 0 0 20px !important; padding: 0 !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-social a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 44px !important; height: 44px !important; border-radius: 50% !important;
  background: var(--ft-well) !important; border: 1px solid var(--ft-hairline) !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-social a:hover { border-color: var(--ft-accent) !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-social img { width: 22px !important; height: 22px !important; max-height: none !important; object-fit: contain !important; margin: 0 !important; }
/* X (formerly Twitter): a black badge with the X mark, the size of the other social badges
   (Brent, 24 October: "replace the twitter logo ... to an x"). */
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-x {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  background: #000 !important; color: #fff !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-x svg { display: block !important; width: 12px !important; height: 12px !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-label { display: block !important; margin: 0 0 6px !important; font-weight: 500 !important; font-size: 11px !important; line-height: 14px !important; color: var(--ft-muted) !important; text-transform: none !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-field { display: flex !important; gap: 8px !important; align-items: stretch !important; margin: 0 0 16px !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-field:last-child { margin-bottom: 0 !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-field input,
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-field textarea {
  flex: 1 1 auto !important; min-width: 0 !important; height: 34px !important; margin: 0 !important; padding: 0 10px !important;
  background: var(--ft-well) !important; border: 1px solid var(--ft-hairline) !important; border-radius: 6px !important;
  color: var(--ft-ink) !important; font: 400 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace !important; box-shadow: none !important; resize: none !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-field textarea { height: 64px !important; padding: 8px 10px !important; }
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-copy {
  flex: 0 0 auto !important; min-width: 72px !important; height: 34px !important; margin: 0 !important; padding: 0 12px !important;
  border: 0 !important; border-radius: 6px !important; background: var(--ft-accent) !important; color: #fff !important;
  font: 600 12px/16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif !important; cursor: pointer !important;
}
html:not(#fv-tile-2026) body li.flowboard.ft-tile .ft-share-copy.copied { background: var(--ft-live) !important; }

html:not(#fv-tile-2026) body li.flowboard.ft-tile .remove_flowboard { position: absolute !important; top: 8px !important; right: 8px !important; z-index: 5 !important; }

/* The tile list is a grid, but flowboard_list.css still gives it and its block overflow:hidden
   (left from the float layout), which cut off the focus ring and hover shadow of the tiles on
   the list's edges (Brent, 29 October). Nothing floats in it now, so let them show. */
html:not(#fv-tile-2026) body .flowboard_tile_view #flowboard_list_block,
html:not(#fv-tile-2026) body .flowboard_tile_view #flowboard_list_block ul.flowboard_list { overflow: visible !important; }