/* 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; }