/* SqirlBoard app — matches landing (index.html) branding */
/* Variables for theming; dark-mode-ready when .dark is on or body */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700&display=swap');
/* Instant view/page swap: no transitions or animations during grid/tab/page change */
body.ui-swap * {
transition: none !important;
animation: none !important;
}
/* Keep playback modal (and video) unaffected so playback stays smooth and full quality */
body.ui-swap #playbackModal,
body.ui-swap #playbackModal * {
transition: unset !important;
animation: unset !important;
}
/* Edit Modal: subtle skeleton while fetching YouTube metadata (does not change layout). */
.yt-meta-fetching {
background: linear-gradient(90deg, rgba(243,244,246,1) 0%, rgba(229,231,235,1) 50%, rgba(243,244,246,1) 100%) !important;
background-size: 200% 100% !important;
animation: ytMetaSkeleton 1.1s ease-in-out infinite !important;
}
@keyframes ytMetaSkeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Double-buffer grid host: buffer offscreen until swap */
.grid-host { position: relative; }
.grid-layer { width: 100%; }
.grid-layer.buffer {
position: absolute;
inset: 0;
visibility: hidden;
pointer-events: none;
}
.grid-layer.active {
position: static;
visibility: visible;
}
.main-content,
#mainScroll,
.grid-host {
overflow-anchor: none;
}
/* Screen-reader only (accessibility) */
.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;
}
/* Light mode defaults — :root and base selectors stay light */
:root {
--sqirl-bg: #F8F9FA;
--sqirl-card: #FFFFFF;
--sqirl-text: #1F2937;
--sqirl-muted: #6B7280;
--sqirl-border: #E5E7EB;
--sqirl-brand: #FACC15;
--sqirl-brand-hover: #EAB308;
--sqirl-trust: #0F766E;
--sqirl-shadow: 0 2px 10px rgba(0,0,0,0.03);
--sqirl-shadow-hover: 0 10px 25px rgba(0,0,0,0.06);
--vp-blue: #C8E5EE;
}
/* Dark mode: only when .dark is on — scoped strictly */
html.dark {
--sqirl-bg: #111827;
--sqirl-card: #1F2937;
--sqirl-text: #F9FAFB;
--sqirl-muted: #9CA3AF;
--sqirl-border: #374151;
--sqirl-shadow: 0 2px 10px rgba(0,0,0,0.2);
--sqirl-shadow-hover: 0 10px 25px rgba(0,0,0,0.3);
}
html.dark body.sqirlboard-app {
background-color: var(--sqirl-bg);
color: var(--sqirl-text);
}
/* Dark: base cards (with image) use dark surface */
html.dark .spark-card:not(.no-image) {
background: var(--sqirl-card);
border-color: var(--sqirl-border);
box-shadow: var(--sqirl-shadow);
}
html.dark .spark-card:not(.no-image):hover {
box-shadow: var(--sqirl-shadow-hover);
border-color: var(--sqirl-brand);
}
html.dark .sqirlboard-app nav {
background: rgba(17, 24, 39, 0.9);
border-color: #374151;
}
html.dark .sqirlboard-app .text-gray-800,
html.dark .sqirlboard-app .text-gray-900 { color: #F9FAFB; }
html.dark .sqirlboard-app .text-gray-500,
html.dark .sqirlboard-app .text-gray-600 { color: #9CA3AF; }
/* Brand yellow stays visible in dark (slight glow) */
html.dark .btn-primary {
background-color: #FACC15;
color: #422006;
box-shadow: 0 0 20px rgba(250, 204, 21, 0.35);
}
html.dark .btn-primary:hover {
background-color: #FDE047;
box-shadow: 0 0 24px rgba(250, 204, 21, 0.45);
}
html.dark .btn-nav,
html.dark .btn-pill {
color: #9CA3AF;
}
html.dark .btn-nav:hover,
html.dark .btn-pill:hover { color: #F9FAFB; background: rgba(250, 204, 21, 0.15); }
html.dark .btn-nav.active,
html.dark .btn-pill.active {
background: #FACC15;
color: #422006;
}
html.dark .btn-icon {
background: #1F2937;
border-color: #374151;
color: #D1D5DB;
}
html.dark .btn-icon:hover {
border-color: #FACC15;
color: #FACC15;
background: rgba(250, 204, 21, 0.1);
}
/* Card headers: dark-friendly so text-only cards stay readable */
html.dark .spark-card .header-yellow { background: #78350f; color: #FEF08A; }
html.dark .spark-card .header-blue { background: #1e3a5f; color: #93c5fd; }
html.dark .spark-card .header-green { background: #14532d; color: #86efac; }
html.dark .spark-card .header-orange { background: #7c2d12; color: #fed7aa; }
html.dark .spark-card .card-visual .font-bold.text-gray-600 { color: #E5E7EB; }
/* Dark mode: text-only cards use same dark card surface as others — no extra colors */
html.dark .spark-card.no-image {
background: var(--sqirl-card);
border-color: var(--sqirl-border);
}
html.dark .spark-card.no-image .card-visual {
background: var(--sqirl-border);
}
html.dark .spark-card.no-image .card-placeholder-title {
color: var(--sqirl-text);
}
html.dark .spark-card.no-image .p-4 {
background: transparent;
color: var(--sqirl-text);
}
html.dark .spark-card.no-image .card-type-badge {
color: var(--sqirl-muted);
background: rgba(255,255,255,0.08);
}
html.dark .spark-card.no-image .card-title {
color: var(--sqirl-text);
}
html.dark .spark-card.no-image .card-description {
color: var(--sqirl-muted);
}
html.dark .spark-card.no-image:hover {
box-shadow: var(--sqirl-shadow-hover);
}
/* Photo-only view (Raindrop-style): flip container and F/Space to flip */
.spark-card.photo-card .card-visual {
overflow: hidden;
padding: 0;
background: transparent !important;
background-image: none !important;
border: none !important;
}
.card-flip-container {
perspective: 1000px;
height: 100%;
min-height: 9rem;
}
.card-flip-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 9rem;
transition: transform 0.45s ease;
transform-style: preserve-3d;
}
.spark-card.photo-card.card-flipped .card-flip-inner {
transform: rotateY(180deg);
}
/* Placeholder front (no-image items in Photo mode): pastel tile + white title */
.photo-card-placeholder {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 9rem;
padding: 16px;
border-radius: inherit;
color: #fff;
font-weight: 700;
box-sizing: border-box;
}
.photo-card-placeholder .photo-card-title {
text-align: center;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
color: #fff;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
max-width: 100%;
}
.card-flip-front,
.card-flip-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: inherit;
}
.card-flip-front {
z-index: 1;
}
/* Source badge in photo tiles: compact top-left pill (image and placeholder tiles) */
/* Source chip on photo tiles: bottom-left pill, domain-only; visible on hover or when "Source labels" is on */
.source-chip,
.title-chip,
.board-chip {
display: inline-flex;
align-items: center;
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
line-height: 1;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 9999px;
backdrop-filter: blur(4px);
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.source-chip {
position: absolute;
bottom: 8px;
left: 8px;
}
/* Board chip: bottom-right, same style; shown with source labels or on hover */
.board-chip {
position: absolute;
bottom: 8px;
right: 8px;
}
/* Title chip: top-left, same style; only shown when "Source labels" is on; full title in tooltip on hover */
.title-chip {
position: absolute;
top: 8px;
left: 8px;
}
.spark-card.photo-card:hover .source-chip,
.spark-card.photo-card:focus-within .source-chip,
.spark-card.photo-card.show-source-labels .source-chip {
opacity: 1;
transform: translateY(0);
}
.spark-card.photo-card:hover .title-chip,
.spark-card.photo-card:focus-within .title-chip,
.spark-card.photo-card.show-source-labels .title-chip {
opacity: 1;
transform: translateY(0);
}
.spark-card.photo-card:hover .board-chip,
.spark-card.photo-card:focus-within .board-chip,
.spark-card.photo-card.show-source-labels .board-chip {
opacity: 1;
transform: translateY(0);
}
/* Raindrop tiles: same chip visibility when .show-source-labels is on the card */
.spark-card.raindrop-tile:hover .source-chip,
.spark-card.raindrop-tile:hover .title-chip,
.spark-card.raindrop-tile:hover .board-chip,
.spark-card.raindrop-tile:focus-within .source-chip,
.spark-card.raindrop-tile:focus-within .title-chip,
.spark-card.raindrop-tile:focus-within .board-chip,
.spark-card.raindrop-tile.show-source-labels .source-chip,
.spark-card.raindrop-tile.show-source-labels .title-chip,
.spark-card.raindrop-tile.show-source-labels .board-chip {
opacity: 1;
transform: translateY(0);
}
.card-flip-back {
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
text-align: center;
}
.card-flip-front .card-visual-inner,
.card-flip-front .card-visual-inner img {
width: 100%;
height: 100%;
min-height: 9rem;
object-fit: cover;
}
/* Modals & inputs */
html.dark .sqirl-modal-overlay { background: rgba(0,0,0,0.6); }
html.dark .sqirl-modal { background: var(--sqirl-card); border: 1px solid #374151; }
html.dark .sqirl-modal-close { color: #9CA3AF; }
html.dark .sqirl-modal-close:hover { color: #F9FAFB; background: #374151; }
html.dark .sqirl-input {
background: #111827;
border-color: #374151;
color: #F9FAFB;
}
html.dark .sqirl-input::placeholder { color: #6B7280; }
html.dark .sqirl-input:focus {
border-color: #FACC15;
box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25);
}
html.dark .add-type-btn {
background: #1F2937;
border-color: #374151;
color: #9CA3AF;
}
html.dark .add-type-btn:hover { border-color: #FACC15; color: #FACC15; }
html.dark .add-type-btn.active {
background: rgba(250, 204, 21, 0.2);
color: #FACC15;
border-color: #FACC15;
}
html.dark .sqirl-dropzone {
background: #111827;
border-color: #4B5563;
}
html.dark .sqirl-dropzone:hover,
html.dark .sqirl-dropzone.dragover {
border-color: #FACC15;
background: rgba(250, 204, 21, 0.08);
}
html.dark .select-indicator {
background: rgba(31, 41, 55, 0.95);
border-color: #6B7280;
}
html.dark body.selection-mode .spark-card.selected .select-indicator,
html.dark .spark-card.spark-bulk-selected .select-indicator {
background: #FACC15;
border-color: #FACC15;
color: #422006;
}
/* FAB */
html.dark .sqirl-fab {
background: #FACC15;
color: #422006;
box-shadow: 0 0 24px rgba(250, 204, 21, 0.4);
}
/* Filter bar */
html.dark .sqirl-filter-bar {
background: rgba(17, 24, 39, 0.6);
border-color: #374151;
}
html.dark .sqirlboard-app [id="filterContainer"] { color: var(--sqirl-text); }
/* List view table */
html.dark .sqirlboard-app #listContainer,
html.dark .sqirlboard-app #listContainer table { background: var(--sqirl-card); border-color: #374151; }
html.dark .sqirlboard-app #listContainer thead { background: rgba(250, 204, 21, 0.2); color: #422006; }
html.dark .sqirlboard-app #listContainer td { color: var(--sqirl-text); border-color: #374151; }
html.dark .sqirlboard-app #listContainer tr:hover { background: rgba(250, 204, 21, 0.08); }
/* Cookie banner */
html.dark #cookieBanner { background: #1F2937; border-color: #374151; }
body.sqirlboard-app {
font-family: 'Nunito Sans', sans-serif;
background-color: #F8F9FA;
color: #1F2937;
}
.brand-font, h1, h2, h3, h4 {
font-family: 'Quicksand', sans-serif;
}
.bg-brand { background-color: #FACC15; }
.text-brand { color: #EAB308; }
.border-brand { border-color: #FACC15; }
.text-trust { color: #0F766E; }
.bg-trust { background-color: #0F766E; }
.btn-primary {
background-color: #FACC15;
color: #422006;
font-weight: 700;
border-radius: 12px;
transition: all 0.2s;
}
.btn-primary:hover {
background-color: #EAB308;
transform: translateY(-1px);
}
/* RSS tab: ensure Visit Source / Listen Now link is visible and looks like a button */
.rss-card .rss-card-open-link {
display: inline-flex !important;
text-decoration: none;
cursor: pointer;
}
.btn-nav, .btn-pill {
padding: 0.5rem 1rem;
border-radius: 9999px;
font-weight: 600;
font-size: 0.875rem;
color: #6B7280;
background: transparent;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: all 0.2s;
}
.btn-nav:hover, .btn-pill:hover { color: #374151; background: #FEF9C3; }
.btn-nav.active, .btn-pill.active { background: #FACC15; color: #422006; }
.btn-icon {
padding: 0.5rem;
border-radius: 9999px;
border: 1px solid #E5E7EB;
background: white;
color: #374151;
cursor: pointer;
transition: all 0.2s;
}
.btn-icon:hover { border-color: #EAB308; color: #422006; background: #FEF9C3; }
.btn-danger {
color: #B91C1C;
background-color: #FEE2E2;
border: 1px solid #FECACA;
font-weight: 600;
border-radius: 0.5rem;
transition: all 0.2s;
}
.btn-danger:hover {
background-color: #FECACA;
color: #991B1B;
}
/* Spark cards (Pinterest-style) — light mode: white card, soft shadow, no border (avoids line below card) */
.spark-card {
background: #FFFFFF;
border-radius: 1rem;
touch-action: auto;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
border: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.spark-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.spark-card.selected {
box-shadow: 0 0 0 3px #FACC15;
}
/* Board card selection (All Boards select mode): same visual as spark selection */
.ed-card.selected {
box-shadow: 0 0 0 3px #FACC15;
}
/* Ensure selected ring is visible immediately on click (override .boards-grid .ed-card:hover) */
.boards-grid .ed-card.selected,
.boards-grid .ed-card.selected:hover {
box-shadow: 0 0 0 3px #FACC15;
}
/* Bulk-tag selection: "pressed" tactile state (manage mode spark checkboxes) */
.spark-card.spark-bulk-selected {
border: 2px solid #FFCE31;
transform: scale(0.98);
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06);
}
.spark-card.spark-bulk-selected:hover {
transform: scale(0.98);
}
/* Fade out when rating drops below active filter (keyboard 1–5). */
.spark-card-fade-out {
opacity: 0;
transform: scale(0.98);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
/* Importance dots: ghost effect — opacity 0 default, 0.5 when rating set, 1 on card hover. No container. */
.importance-dots {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
display: flex;
gap: 4px;
align-items: center;
z-index: 5;
background: none;
border: none;
}
.importance-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.2);
opacity: 0;
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.15s ease;
}
.importance-dot-filled {
background: #FFCE31;
border-color: #FFCE31;
}
/* When card has a rating, dots stay visible at 0.5 */
.importance-dots-has-rating .importance-dot {
opacity: 0.5;
}
.importance-dots-has-rating .importance-dot-filled {
opacity: 0.5;
}
/* Card hover: all dots full visibility */
.spark-card:hover .importance-dots .importance-dot {
opacity: 1;
}
.spark-card:hover .importance-dots .importance-dot-filled {
opacity: 1;
}
.importance-dot:hover {
opacity: 1 !important;
}
/* Pulse animation for keyboard confirmation */
.importance-dots.importance-dots-pulse .importance-dot {
animation: importance-dot-pulse 0.4s ease;
}
@keyframes importance-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 1; }
}
/* Watcher update indicator: small brand dot in top-left of card */
.spark-watcher-update-dot {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 6;
width: 6px;
height: 6px;
border-radius: 50%;
background: #FFCE31;
pointer-events: none;
}
html.dark .spark-watcher-update-dot {
background: #FACC15;
}
html.dark .importance-dot {
border-color: rgba(255, 255, 255, 0.3);
}
html.dark .importance-dot-filled {
background: #FACC15;
border-color: #FACC15;
}
/* Text-only cards (light): pastel ONLY in picture placeholder; content area same white as image cards */
.spark-card.no-image {
background: #FFFFFF;
}
/* Placeholder color set by JS (4-color rotation). No white/default so theme colors always show. */
.spark-card.no-image .card-visual {
border: none;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
filter: none;
background-image: none;
background-color: var(--vp-blue);
}
.spark-card.no-image .card-visual .card-no-image-visual {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.spark-card.no-image .card-placeholder-title {
font-size: 1.35rem;
font-weight: 700;
color: #fff;
text-align: center;
}
.spark-card.no-image .p-4 {
background: transparent;
color: #1F2937;
}
.spark-card.no-image .card-type-badge {
color: #374151;
background: transparent;
padding: 0.25rem 0;
border-radius: 0;
width: fit-content;
}
.spark-card.no-image .card-type-badge i { color: inherit; }
/* AI chat no-preview uses the same title scale as normal sparks (see .spark-card-ai-chat override below). */
.spark-card.no-image .card-title {
font-size: 1.35rem;
font-weight: 700;
color: #1F2937;
}
.spark-card.no-image:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
/* Shared preview text (link URL + note preview) — secondary metadata-level, title stays dominant */
.spark-card .card-description.card-preview {
font-size: 12px;
line-height: 1.35;
font-weight: 400;
color: #9CA3AF;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.spark-card .card-description.card-preview.card-url {
text-decoration: none;
}
.spark-card .card-description.card-preview.card-url:hover {
color: #6B7280;
text-decoration: underline;
}
/* Spark cards (default grid only): top-rounded image, 16:9 seam, fixed body for Source alignment */
.spark-card:not(.photo-card):not(.raindrop-tile) .card-visual {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 1rem 1rem 0 0;
}
.spark-card:not(.photo-card):not(.raindrop-tile) .card-visual img,
.spark-card:not(.photo-card):not(.raindrop-tile) .card-visual .card-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.spark-card:not(.photo-card):not(.raindrop-tile) .p-4 {
min-height: 5.5rem;
display: flex;
flex-direction: column;
padding-top: 1rem;
padding-bottom: 1rem;
margin: 0;
}
.spark-card:not(.photo-card):not(.raindrop-tile) .p-4 .card-title {
flex: 0 0 auto;
}
.spark-card:not(.photo-card):not(.raindrop-tile) .card-description.card-source-meta {
margin-top: auto;
margin-bottom: 0;
}
.card-visual-inner { position: relative; width: 100%; height: 100%; }
.card-visual-inner.card-img-aspect { overflow: hidden; }
/* ---- AI chat links only (linkKind === ai_chat): normalized thumb + softening; no effect on normal article/YouTube/RSS cards ---- */
.spark-card.spark-card-ai-chat:not(.raindrop-tile):not(.rss-card) .card-visual-inner.ai-chat-thumb.card-thumb-normalized {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
}
.spark-card.spark-card-ai-chat:not(.raindrop-tile):not(.rss-card) .card-visual-inner.ai-chat-thumb.card-thumb-normalized > .card-thumb-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
z-index: 0;
}
.spark-card.photo-card.spark-card-ai-chat .card-flip-front .card-visual-inner.ai-chat-thumb.card-thumb-normalized > .card-thumb-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* Subtle softening for harsh or logo-heavy AI chat OG images (scoped to .ai-chat-thumb only). */
.spark-card.spark-card-ai-chat .card-visual-inner.ai-chat-thumb::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
z-index: 1;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 40%, rgba(15, 23, 42, 0.12) 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* No-preview AI chat: solid note tile — same token as text-card placeholders (--vp-blue); no gradient (fully note-like). */
.spark-card.spark-card-ai-chat.no-image:not(.raindrop-tile):not(.photo-card) .card-visual {
background-color: var(--vp-blue) !important;
background-image: none !important;
}
html.dark .spark-card.spark-card-ai-chat.no-image:not(.raindrop-tile):not(.photo-card) .card-visual {
background-color: #243d4a !important;
background-image: none !important;
}
.spark-card.spark-card-ai-chat.no-image:not(.raindrop-tile) .card-visual .card-no-image-visual.ai-chat-no-preview {
width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 1rem 1rem;
background: transparent;
border-bottom: none;
box-shadow: none;
}
.spark-card.spark-card-ai-chat.no-image:not(.raindrop-tile) .ai-chat-fallback-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: center;
max-width: 100%;
}
.spark-card.spark-card-ai-chat .ai-chat-fallback-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 0.65rem;
background: rgba(255, 255, 255, 0.4);
color: #5c6f82;
}
html.dark .spark-card.spark-card-ai-chat .ai-chat-fallback-icon-wrap {
background: rgba(255, 255, 255, 0.07);
color: #94a3b8;
}
.spark-card.spark-card-ai-chat .ai-chat-fallback-icon {
width: 1.125rem;
height: 1.125rem;
pointer-events: none;
}
.spark-card.spark-card-ai-chat .ai-chat-fallback-label {
font-size: 0.6875rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.015em;
color: #64748b;
max-width: 100%;
opacity: 0.92;
}
html.dark .spark-card.spark-card-ai-chat .ai-chat-fallback-label {
color: #a8b4c4;
opacity: 0.95;
}
/* Photo mode: AI no-preview front — same caption system, pastel tile from flip logic */
.spark-card.photo-card.spark-card-ai-chat .photo-card-front.ai-chat-no-preview.photo-ai-chat-fallback {
display: flex;
align-items: center;
justify-content: center;
min-height: 9rem;
padding: 1.25rem 1rem;
}
.spark-card.photo-card.spark-card-ai-chat .photo-card-front.ai-chat-no-preview .ai-chat-fallback-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: center;
}
/* Raindrop: AI chat image + no-preview softening (masonry only). */
.raindrop-mode .spark-card-ai-chat .masonry-tile-img-wrap.ai-chat-raindrop-thumb {
position: relative;
}
.raindrop-mode .spark-card-ai-chat .masonry-tile-img-wrap.ai-chat-raindrop-thumb::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
z-index: 1;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, transparent 35%, rgba(15, 23, 42, 0.1) 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.raindrop-mode .spark-card-ai-chat .masonry-tile-img-wrap.ai-chat-raindrop-thumb .masonry-tile-img {
position: relative;
z-index: 0;
}
.raindrop-mode .spark-card-ai-chat .masonry-tile-img-wrap.ai-chat-raindrop-thumb .title-chip,
.raindrop-mode .spark-card-ai-chat .masonry-tile-img-wrap.ai-chat-raindrop-thumb .source-chip,
.raindrop-mode .spark-card-ai-chat .masonry-tile-img-wrap.ai-chat-raindrop-thumb .board-chip {
z-index: 2;
}
.raindrop-mode .spark-card-ai-chat .ai-chat-raindrop-no-preview {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 0.65rem;
}
.raindrop-mode .spark-card-ai-chat .ai-chat-raindrop-no-preview .ai-chat-fallback-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
text-align: center;
max-width: 100%;
}
.raindrop-mode .spark-card-ai-chat .ai-chat-raindrop-no-preview .ai-chat-fallback-icon-wrap {
width: 2rem;
height: 2rem;
}
.raindrop-mode .spark-card-ai-chat .ai-chat-raindrop-no-preview .ai-chat-fallback-icon {
width: 1rem;
height: 1rem;
}
.raindrop-mode .spark-card-ai-chat .ai-chat-raindrop-no-preview .ai-chat-fallback-label {
font-size: 0.65rem;
line-height: 1.25;
}
/* Raindrop AI Chat: single soft placeholder tone (matches grid --vp-blue); remove per-id pastel rotation */
.raindrop-mode .spark-card-ai-chat.raindrop-placeholder .masonry-item-inner.ai-chat-raindrop-no-preview {
height: 100%;
background-color: var(--vp-blue) !important;
box-sizing: border-box;
}
html.dark .raindrop-mode .spark-card-ai-chat.raindrop-placeholder .masonry-item-inner.ai-chat-raindrop-no-preview {
background-color: #243d4a !important;
}
/* Photo mode AI Chat: same solid placeholder as grid/list */
.spark-card.photo-card.spark-card-ai-chat .photo-card-front.photo-card-placeholder.ai-chat-photo-placeholder {
background-color: var(--vp-blue) !important;
color: #fff !important;
}
.spark-card.photo-card.spark-card-ai-chat .photo-card-front.ai-chat-photo-placeholder .photo-card-title {
color: #fff !important;
}
html.dark .spark-card.photo-card.spark-card-ai-chat .photo-card-front.photo-card-placeholder.ai-chat-photo-placeholder {
background-color: #243d4a !important;
}
.spark-card.photo-card.spark-card-ai-chat .card-flip-back.ai-chat-photo-placeholder-back {
background-color: var(--vp-blue) !important;
}
html.dark .spark-card.photo-card.spark-card-ai-chat .card-flip-back.ai-chat-photo-placeholder-back {
background-color: #243d4a !important;
}
/* Grid AI Chat no-preview: lock label to white (header tint classes must not brown-out title) */
.spark-card.spark-card-ai-chat.no-image:not(.raindrop-tile):not(.photo-card) .card-visual .card-placeholder-title {
color: #fff !important;
}
.card-source-pill {
position: absolute;
top: 6px;
left: 6px;
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.95);
background: rgba(0,0,0,0.5);
padding: 2px 6px;
border-radius: 4px;
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Board card badge (All Sparks gallery): top-left "B" only */
.board-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
width: 28px;
height: 28px;
background: #FACC15;
color: white;
font-size: 14px;
font-weight: bold;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
z-index: 1;
}
/* Board card: horizontal strip of three thumbnails (All Boards gallery) */
.board-preview-strip {
display: flex;
flex-direction: row;
width: 100%;
height: 12.5rem; /* 200px — clear thumbnails, not cramped */
overflow: hidden;
}
.board-preview-cell {
flex: 1;
min-width: 0;
overflow: hidden;
}
.board-preview-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.board-preview-cell + .board-preview-cell {
border-left: 1px solid rgba(0,0,0,0.06);
}
.board-preview-placeholder { /* empty slot when fewer than 3 images */ }
.board-card-visual { height: auto; min-height: 12.5rem; }
/* V1: Compact Editorial (Balanced) — boards gallery only; no impact on Sparks */
.boards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}
.boards-grid .ed-card {
position: relative;
background: #FFFFFF;
border-radius: 20px;
padding: 16px;
border: 1px solid #E5E7EB;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.boards-grid .ed-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* Editorial: 140px height and zoom-and-crop only inside board cards */
.boards-grid .ed-visual {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 8px;
height: 140px;
min-height: 140px;
margin-bottom: 16px;
}
/* Board preview containers: overflow hidden; dark bg hides any sub-pixel seam */
.boards-grid .ed-visual .img-box,
.boards-grid .board-preview-thumb {
position: relative;
padding: 0 !important;
overflow: hidden !important;
background: #222 !important;
min-height: 0;
}
.boards-grid .board-preview-thumb:empty,
.boards-grid .ed-visual .img-box:empty {
background: #222 !important;
}
/* Empty slot placeholder: neutral gray so missing preview is clearly intentional, not broken */
.boards-grid .board-preview-thumb.board-preview-placeholder,
.boards-grid .board-preview-thumb:empty.board-preview-placeholder {
background: #F3F4F6 !important;
}
html.dark .boards-grid .ed-visual .img-box,
html.dark .boards-grid .board-preview-thumb {
background: #222 !important;
}
html.dark .boards-grid .board-preview-thumb:empty,
html.dark .boards-grid .ed-visual .img-box:empty {
background: #222 !important;
}
html.dark .boards-grid .board-preview-thumb.board-preview-placeholder {
background: #374151 !important;
}
/* Workspace MVP: two-tier layout (shelf + floor) */
.workspace-view-grid {
display: block;
padding: 0;
}
.workspace-view-grid .workspace-shelf,
.workspace-view-grid .workspace-floor {
display: block;
}
.workspace-view-grid .workspace-shelf-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 0;
}
.workspace-view-grid .workspace-floor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
padding: 0;
}
.boards-grid .ed-visual .img-box {
border-radius: 12px;
width: 100%;
height: 100%;
}
.boards-grid .board-preview-thumb {
width: 100%;
height: 100%;
}
/* Unified 1.5x power zoom: 50% extra size buries all letterboxing; translateY(-2%) kills top sliver */
.boards-grid .ed-visual img,
.boards-grid .board-preview-thumb img {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: -2.5% !important;
width: 105% !important;
min-width: 105% !important;
height: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: top !important;
transform: scale(1.5) translateY(-2%) !important;
transform-origin: center center !important;
display: block !important;
border-radius: 12px;
}
.boards-grid .ed-content h3 {
margin: 0 0 4px 0;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
color: #1A1A1B;
}
.boards-grid .ed-content p {
margin: 4px 0 12px;
font-size: 13px;
color: #6B7280;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.boards-grid .ed-visual-wrap {
position: relative;
overflow: hidden !important;
}
.boards-grid .ed-pill {
position: absolute;
top: 8px;
left: 8px;
padding: 4px 10px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
color: #1A1A1B;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1;
}
html.dark .boards-grid .ed-card {
background: var(--sqirl-card, #1f2937);
border-color: #374151;
}
html.dark .boards-grid .ed-content h3,
html.dark .boards-grid .ed-pill { color: #F3F4F6; }
html.dark .boards-grid .ed-content p { color: #9CA3AF; }
html.dark .boards-grid .ed-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
html.dark .boards-grid .ed-card.selected,
html.dark .boards-grid .ed-card.selected:hover {
box-shadow: 0 0 0 3px #FACC15;
}
html.dark .boards-grid .ed-pill { background: rgba(55, 65, 81, 0.85); color: #F3F4F6; }
/* Mobile (under 768px): lock board card visual to 140px so zoomed images don't spill or overlap text */
@media (max-width: 767px) {
.boards-grid .ed-visual-wrap,
.boards-grid .ed-visual {
height: 140px !important;
max-height: 140px !important;
overflow: hidden !important;
}
.boards-grid .ed-visual {
min-height: 140px !important;
}
.boards-grid .ed-visual .img-box {
overflow: hidden !important;
}
.boards-grid .ed-visual img,
.boards-grid .board-preview-thumb img {
position: absolute !important;
top: 0 !important;
height: 100% !important;
}
}
.header-yellow { background-color: #FEF08A; color: #854D0E; }
.header-blue { background-color: #D1E9F6; color: #475569; }
.header-green { background-color: #D1FAE5; color: #065F46; }
.header-orange { background-color: #FFEDD5; color: #9A3412; }
/* Grid layout. No content-visibility/contain-intrinsic-size (causes chunked paint in Edge during swaps). */
.sqirl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
align-items: start;
overflow-anchor: none;
}
.spark-card {
break-inside: avoid;
}
/* Keep min track 240px at lg+ so typical max-w-7xl main columns still fit four cards (260px min drops to three ~1050–1150px). */
@media (min-width: 1024px) {
.sqirl-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
/* Photo mode must NEVER inherit masonry spacing (defensive reset if any class leaks). Do NOT set column-gap here – it would override grid gap and break horizontal spacing. */
.photo-mode {
column-count: initial !important;
column-fill: initial !important;
}
.photo-mode.sqirl-grid {
display: grid !important;
}
.photo-mode .masonry-item,
.photo-mode .masonry-item-inner,
.photo-mode .raindrop-tile {
break-inside: auto !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
.photo-mode.sqirl-grid .spark-card.photo-card {
margin: 0 !important;
}
/* Photo layout baseline – do not change. Isolated so Raindrop/masonry rules cannot affect Photo mode. */
.photo-mode.sqirl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem !important;
align-items: start;
}
@media (min-width: 1024px) {
.photo-mode.sqirl-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
/* Photo mode: fixed tile height and spacing (pre-raindrop baseline). */
.photo-mode.sqirl-grid .spark-card.photo-card .card-visual {
height: 9rem;
min-height: 9rem;
}
.photo-mode.sqirl-grid .spark-card.photo-card .card-flip-container {
height: 100%;
min-height: 9rem;
}
/* Raindrop masonry layout (JS positioning). All rules under .raindrop-mode so they cannot affect Photo/Grid/Table. */
.raindrop-mode.masonry-container {
position: relative;
width: 100%;
}
.raindrop-mode .masonry-item {
position: absolute;
left: 0;
top: 0;
will-change: transform;
transition: none;
cursor: pointer;
}
.raindrop-mode .masonry-item-inner {
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
width: 100%;
min-height: 80px;
}
.raindrop-mode .masonry-tile-img-wrap {
display: block;
width: 100%;
min-height: 80px;
overflow: hidden;
}
.raindrop-mode .masonry-item-inner.raindrop-placeholder-inner {
height: 100%;
min-height: 0;
}
.raindrop-mode .masonry-item:hover .masonry-item-inner {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.raindrop-mode .masonry-tile-img {
display: block;
width: 100%;
height: auto;
vertical-align: middle;
}
/* YouTube Shorts / portrait video in Raindrop: card is tall portrait shape, thumbnail fills it, no blur or letterboxing */
.raindrop-mode .raindrop-tile-vertical.masonry-tile-img-wrap {
aspect-ratio: 9 / 16;
overflow: hidden;
display: block;
}
.raindrop-mode .raindrop-tile-vertical .masonry-tile-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
vertical-align: middle;
}
.raindrop-mode .raindrop-placeholder-inner {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
}
.raindrop-mode .raindrop-placeholder-title {
text-align: center;
color: #fff;
font-weight: 700;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Raindrop: no type/RSS/feed badges or corner icons – image-first, clean. */
.raindrop-mode .card-type-badge,
.raindrop-mode .card-feed-badge,
.raindrop-mode .rss-badge,
.raindrop-mode .tile-corner-icon {
display: none !important;
}
/* Hide ALL icons on raindrop tiles: [data-lucide] (before Lucide replace) and SVG (after), except in .select-indicator */
.raindrop-mode .raindrop-tile [data-lucide] {
display: none !important;
}
.raindrop-mode .raindrop-tile .masonry-item-inner svg {
display: none !important;
}
.raindrop-mode .raindrop-tile .select-indicator [data-lucide],
.raindrop-mode .raindrop-tile .select-indicator svg {
display: flex !important;
}
/* Tab navigation (All Sparks | All Boards) */
.tab-btn {
color: var(--sqirl-muted);
background: transparent;
}
.tab-btn:hover { color: var(--sqirl-text); }
.tab-btn.active {
color: #422006;
background: rgba(250, 204, 21, 0.2);
}
html.dark .tab-btn.active { color: #FEF08A; background: rgba(250, 204, 21, 0.2); }
/* Top toolbar: icon buttons (borderless) + sticky dropdowns */
.topbar-actions { display: flex; align-items: center; flex-wrap: nowrap; }
.topbar-dropdown-wrap { position: relative; }
.topbar-icon-btn {
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
min-height: 2.5rem;
border: none;
background: transparent;
color: #4B5563;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.topbar-icon-btn:hover {
background: rgba(17, 24, 39, 0.05);
color: #111827;
}
.topbar-icon-btn-active { background: rgba(250, 204, 21, 0.25); color: #422006; }
/* Topbar Select: inert until init wires dropdown + selection handlers */
#topbarSelectBtn.topbar-icon-btn--init-pending:disabled,
#topbarSelectBtn:disabled {
opacity: 0.42;
cursor: not-allowed;
}
#topbarSelectBtn:disabled:hover {
background: transparent;
color: #4B5563;
}
html.dark #topbarSelectBtn:disabled:hover {
color: #9CA3AF;
}
.topbar-dropdown {
position: absolute;
right: 0;
top: 100%;
margin-top: 0.25rem;
min-width: 12rem;
max-width: 20rem;
max-height: min(70vh, 420px);
overflow-y: auto;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
z-index: 100;
padding: 0.25rem 0;
}
/* Select dropdown and Bulk Tag popover: fixed positioning and high z-index so they render above all content and are not clipped */
#topbarDropdownSelect {
position: fixed;
z-index: 9999;
margin-top: 0.25rem;
top: 0;
right: auto;
left: auto;
isolation: isolate;
pointer-events: auto;
}
#bulkTagPopover {
position: fixed;
z-index: 10001;
isolation: isolate;
pointer-events: auto;
}
/* Workspace picker: same visual language as topbar menus, separate stacking root from Select menu */
#topbarWorkspacePicker {
position: fixed;
z-index: 10002;
min-width: 12rem;
max-width: 20rem;
max-height: min(70vh, 420px);
overflow-y: auto;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
padding: 0.25rem 0;
isolation: isolate;
pointer-events: auto;
}
html.dark #topbarWorkspacePicker {
background: #1F2937;
border-color: #374151;
}
/* Board diagnostics modal: readable toolbar (buttons are real