/* ============================================================================ Client Brain → Images tab — isolated component stylesheet ---------------------------------------------------------------------------- Loaded via at the very end of in base.html, AFTER editorial-final.css and admin-editorial.css. Owns its own .imt-* class namespace so that: - .cm-info-card h3 (content-map.css:650) can't make my titles eyebrow-y - editorial-overlay's .btn / .btn-primary catch-alls can't reach my buttons - source-order ties always go to this file because it loads last Tokens used: --cm-surface / --cm-text / --cm-border → re-aliased to paper/ink/rule in editorial-overlay.css:2640 --accent / --accent-ink → brand yellow (paper-friendly) --ink-strong / --ink-muted / --ink-faint → opacity-scaled ink in dark theme, paper-aware in editorial ========================================================================== */ html body #cmImages { --imt-radius: 6px; --imt-radius-tight: 4px; --imt-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --imt-serif: "Newsreader", ui-serif, Georgia, serif; font-family: inherit; } html body #cmImages, html body #cmImages * { box-sizing: border-box; } /* ── Top header ────────────────────────────────────────────────────────── */ html body #cmImages .imt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 4px 0 18px; flex-wrap: wrap; } html body #cmImages .imt-eyebrow { font-family: var(--imt-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint, #8a8882); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } html body #cmImages .imt-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; vertical-align: middle; background: var(--ink-faint, #8a8882); } html body #cmImages .imt-title { font-family: var(--imt-serif); font-weight: 400; font-size: 1.65rem; line-height: 1.1; margin: 4px 0 2px; color: var(--ink-strong, #0a0a0a); text-transform: none; letter-spacing: 0; } html body #cmImages .imt-sub { margin: 0; font-size: 0.78rem; color: var(--ink-muted, #5d5d5a); max-width: 56ch; } /* ── Source toggle (AI / Drive) ───────────────────────────────────────── */ html body #cmImages .imt-source-toggle { display: inline-flex; gap: 6px; align-items: center; background: var(--cm-surface2, #f4f1e8); border: 1px solid var(--cm-border, #d9d4c4); padding: 4px; border-radius: 999px; } html body #cmImages button.imt-source-pill { padding: 7px 14px; font-family: var(--imt-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted, #5d5d5a); background: transparent; border: none; cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; transition: background .15s, color .15s; box-shadow: none; } html body #cmImages button.imt-source-pill:hover { color: var(--ink-strong, #0a0a0a); } html body #cmImages button.imt-source-pill.is-active { background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a); } /* ── 2-col top grid (Brand + Generate) ────────────────────────────────── */ html body #cmImages .imt-top-grid { display: grid; gap: 14px; grid-template-columns: minmax(260px, 320px) 1fr; margin-bottom: 14px; } @media (max-width: 880px) { html body #cmImages .imt-top-grid { grid-template-columns: 1fr; } } /* ── Panel — the new card class. Avoids .cm-info-card entirely. ──────── */ html body #cmImages .imt-panel { background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: var(--imt-radius); padding: 18px 20px; box-shadow: none; } html body #cmImages .imt-panel + .imt-panel { margin-top: 14px; } html body #cmImages .imt-panel-title { font-family: var(--imt-serif); font-weight: 500; font-size: 1.1rem; line-height: 1.2; margin: 6px 0 4px; color: var(--ink-strong, #0a0a0a); text-transform: none; letter-spacing: 0; } html body #cmImages .imt-panel-sub { margin: 0 0 12px; font-size: 0.72rem; line-height: 1.45; color: var(--ink-muted, #5d5d5a); } /* ── Brand card ──────────────────────────────────────────────────────── */ html body #cmImages .imt-logo-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } html body #cmImages .imt-logo-preview { width: 84px; height: 84px; border: 1px dashed var(--cm-border, #d9d4c4); background: var(--cm-surface2, #f4f1e8); display: flex; align-items: center; justify-content: center; color: var(--ink-faint, #8a8882); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--imt-radius-tight); overflow: hidden; } html body #cmImages .imt-logo-preview img { width: 100%; height: 100%; object-fit: contain; } html body #cmImages .imt-logo-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; } html body #cmImages .imt-logo-actions { display: flex; flex-wrap: wrap; gap: 6px; } html body #cmImages .imt-logo-source[hidden] { display: none; } html body #cmImages .imt-logo-source { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--cm-surface2, #f4f1e8); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 999px; font-family: var(--imt-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-muted, #5d5d5a); align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body #cmImages .imt-logo-source i { color: #128a3a; font-size: 11px; } html body #cmImages .imt-logo-source a { color: var(--ink-strong, #0a0a0a); text-decoration: underline; text-decoration-color: var(--accent, #f4e14a); text-underline-offset: 2px; } html body #cmImages .imt-logo-source a:hover { color: var(--accent-ink, #0a0a0a); background: var(--accent, #f4e14a); } html body #cmImages .imt-logo-fetching { display: inline-flex; align-items: center; gap: 6px; font-family: var(--imt-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted, #5d5d5a); text-align: center; padding: 4px 8px; } html body #cmImages .imt-logo-fetching i { animation: imt-spin 1s linear infinite; font-size: 13px; } @keyframes imt-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Prompt + suggestion chips ───────────────────────────────────────── */ html body #cmImages textarea.imt-prompt { width: 100%; padding: 10px 13px; border: 1px solid var(--cm-border, #d9d4c4); background: var(--cm-surface, #fbfaf6); color: var(--cm-text, #0a0a0a); font-size: 0.85rem; font-family: inherit; line-height: 1.45; resize: vertical; outline: none; border-radius: var(--imt-radius-tight); } html body #cmImages textarea.imt-prompt:focus { border-color: var(--accent, #f4e14a); box-shadow: 0 0 0 3px rgba(244,225,74,0.22); } html body #cmImages .imt-suggest-row { margin-top: 10px; } html body #cmImages .imt-suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } html body #cmImages button.imt-suggest-refresh { border: 1px solid var(--cm-border, #d9d4c4); background: transparent; color: var(--ink-muted, #5d5d5a); padding: 4px 10px; font-family: var(--imt-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--imt-radius-tight); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; line-height: 1; box-shadow: none; } html body #cmImages button.imt-suggest-refresh:hover { color: var(--ink-strong, #0a0a0a); border-color: var(--ink-muted, #2a2a2a); } html body #cmImages .imt-suggest-chips { display: flex; flex-wrap: wrap; gap: 6px; } html body #cmImages button.imt-suggest-chip { padding: 6px 11px; border: 1px solid var(--cm-border, #d9d4c4); background: var(--cm-surface2, #f4f1e8); color: var(--cm-text, #0a0a0a); font-family: inherit; font-size: 0.72rem; line-height: 1.3; text-align: left; cursor: pointer; border-radius: 999px; transition: background .12s, border-color .12s, color .12s; text-transform: none; letter-spacing: 0; box-shadow: none; } html body #cmImages button.imt-suggest-chip:hover { background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a); border-color: var(--accent, #f4e14a); } html body #cmImages .imt-suggest-empty { font-size: 0.72rem; color: var(--ink-faint, #8a8882); font-family: var(--imt-mono); padding: 4px 0; } /* ── Generate controls (style/size/count/logo + override) ────────────── */ html body #cmImages .imt-controls { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } html body #cmImages .imt-field { display: flex; flex-direction: column; gap: 4px; cursor: default; } html body #cmImages .imt-field-label { font-family: var(--imt-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint, #8a8882); font-weight: 500; } html body #cmImages select.imt-select { padding: 8px 11px; border: 1px solid var(--cm-border, #d9d4c4); background: var(--cm-surface, #fbfaf6); color: var(--cm-text, #0a0a0a); font-size: 0.78rem; font-family: inherit; border-radius: var(--imt-radius-tight); outline: none; cursor: pointer; appearance: auto; } html body #cmImages .imt-toggle .imt-toggle-wrap { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--cm-border, #d9d4c4); background: var(--cm-surface, #fbfaf6); color: var(--cm-text, #0a0a0a); border-radius: var(--imt-radius-tight); font-size: 0.78rem; cursor: pointer; } html body #cmImages .imt-toggle input[type=checkbox] { accent-color: var(--accent, #f4e14a); margin: 0; } html body #cmImages .imt-toggle.is-disabled .imt-toggle-wrap { opacity: 0.55; cursor: not-allowed; } /* ── Per-generation logo override ────────────────────────────────────── */ html body #cmImages .imt-override-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } html body #cmImages .imt-override-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px 6px 10px; border: 1px solid var(--cm-border, #d9d4c4); background: var(--cm-surface, #fbfaf6); color: var(--cm-text, #0a0a0a); border-radius: var(--imt-radius-tight); font-family: var(--imt-mono); font-size: 10.5px; line-height: 1; max-width: 100%; overflow: hidden; } html body #cmImages .imt-override-chip img { width: 22px; height: 22px; object-fit: contain; background: var(--cm-surface2, #f4f1e8); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 2px; } html body #cmImages .imt-override-chip .imt-override-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } html body #cmImages button.imt-override-clear { background: transparent; border: none; color: var(--ink-muted, #5d5d5a); cursor: pointer; padding: 4px 6px; font-size: 0.9rem; line-height: 1; box-shadow: none; } html body #cmImages button.imt-override-clear:hover { color: var(--status-danger, #e06060); } /* ── Status line + generate row ──────────────────────────────────────── */ html body #cmImages .imt-gen-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; } html body #cmImages .imt-status { flex: 1; font-size: 0.72rem; color: var(--ink-muted, #5d5d5a); min-height: 1.2em; font-family: var(--imt-mono); } html body #cmImages .imt-status.is-error { color: var(--status-danger, #e06060); } /* ── Buttons ─────────────────────────────────────────────────────────── */ html body #cmImages button.imt-btn { padding: 8px 16px; font-family: var(--imt-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--cm-border, #d9d4c4); background: var(--cm-surface, #fbfaf6); color: var(--cm-text, #0a0a0a); border-radius: var(--imt-radius-tight); display: inline-flex; align-items: center; gap: 6px; line-height: 1; transition: transform .1s, background .15s, border-color .15s, color .15s; box-shadow: none; } html body #cmImages button.imt-btn:hover { border-color: var(--ink-muted, #2a2a2a); background: var(--cm-surface, #fbfaf6); color: var(--cm-text, #0a0a0a); } html body #cmImages button.imt-btn:active { transform: translateY(1px); } html body #cmImages button.imt-btn-primary { background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a); border-color: var(--accent, #f4e14a); padding: 10px 22px; font-size: 12px; } html body #cmImages button.imt-btn-primary:hover { background: var(--accent-hover, #e4cc00); color: var(--accent-ink, #0a0a0a); border-color: var(--accent-hover, #e4cc00); } html body #cmImages button.imt-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } html body #cmImages button.imt-btn-ghost { background: transparent; } html body #cmImages button.imt-btn-danger { color: var(--status-danger, #e06060); background: transparent; border-color: rgba(224,96,96,0.4); } html body #cmImages button.imt-btn-danger.is-confirm { background: var(--status-danger, #e06060); color: #fff; border-color: var(--status-danger, #e06060); } /* ── Library card + filter pills ─────────────────────────────────────── */ html body #cmImages .imt-library-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } html body #cmImages .imt-count { font-family: var(--imt-serif); font-variant-numeric: tabular-nums; color: var(--ink-muted, #5d5d5a); font-size: 0.95rem; font-weight: 400; margin-left: 6px; text-transform: none; letter-spacing: 0; } html body #cmImages .imt-filter-row { display: inline-flex; gap: 4px; flex-wrap: wrap; background: var(--cm-surface2, #f4f1e8); border: 1px solid var(--cm-border, #d9d4c4); padding: 3px; border-radius: 999px; } html body #cmImages button.imt-filter-pill { padding: 5px 12px; border: none; cursor: pointer; background: transparent; font-family: var(--imt-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-muted, #5d5d5a); border-radius: 999px; line-height: 1; box-shadow: none; } html body #cmImages button.imt-filter-pill:hover { color: var(--ink-strong, #0a0a0a); } html body #cmImages button.imt-filter-pill.is-active { background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a); } html body #cmImages .imt-empty, html body #cmImages .imt-loading { padding: 32px 16px; text-align: center; color: var(--ink-muted, #5d5d5a); font-size: 0.82rem; border: 1px dashed var(--cm-border, #d9d4c4); border-radius: var(--imt-radius-tight); background: var(--cm-surface2, #f4f1e8); font-family: inherit; } /* ── Gallery grid ────────────────────────────────────────────────────── */ html body #cmImages .imt-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } html body #cmImages .imt-card { background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: var(--imt-radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; } html body #cmImages .imt-card:hover { border-color: var(--ink-muted, #2a2a2a); box-shadow: 0 6px 18px rgba(0,0,0,0.08); } html body #cmImages .imt-card.is-rejected { opacity: 0.55; } html body #cmImages .imt-card-img { position: relative; aspect-ratio: 1; background: var(--cm-bg, #ece8da); } html body #cmImages .imt-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } html body #cmImages .imt-card-meta { padding: 10px 11px 11px; } html body #cmImages .imt-card-prompt { font-size: 0.7rem; line-height: 1.4; color: var(--ink-muted, #5d5d5a); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.05em; margin-bottom: 8px; } html body #cmImages .imt-card-actions { display: flex; flex-wrap: wrap; gap: 4px; } html body #cmImages .imt-card-actions button.imt-btn { padding: 5px 9px; font-size: 9.5px; letter-spacing: 0.08em; } /* ── Pending / skeleton cards while gpt-image-2 streams ─────────────────── */ html body #cmImages .imt-card-pending { border-style: dashed; border-color: var(--cm-border, #d9d4c4); background: var(--cm-surface, #fbfaf6); } html body #cmImages .imt-card-pending:hover { border-color: var(--cm-border, #d9d4c4); box-shadow: none; cursor: default; } html body #cmImages .imt-skeleton-img { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--cm-surface2, #f4f1e8) 0%, var(--cm-surface, #fbfaf6) 50%, var(--cm-surface2, #f4f1e8) 100%); } html body #cmImages .imt-skeleton-shimmer { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, transparent 38%, rgba(244, 225, 74, 0.20) 50%, transparent 62%, transparent 100%); background-size: 220% 100%; animation: imt-shimmer 1.6s linear infinite; pointer-events: none; } @keyframes imt-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } html body #cmImages .imt-status-pill.imt-status-pending { background: var(--ink-strong, #0a0a0a); color: #fff; display: inline-flex; align-items: center; gap: 6px; } html body #cmImages .imt-status-pill.imt-status-pending::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #f4e14a); animation: imt-blink 1s ease-in-out infinite; } @keyframes imt-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } html body #cmImages .imt-pending-bar { height: 3px; background: var(--cm-border, #d9d4c4); border-radius: 999px; overflow: hidden; margin-top: 4px; position: relative; } html body #cmImages .imt-pending-bar-fill { position: absolute; top: 0; left: 0; width: 35%; height: 100%; background: var(--accent, #f4e14a); border-radius: 999px; animation: imt-pending-slide 1.4s ease-in-out infinite; } @keyframes imt-pending-slide { 0% { left: -35%; } 100% { left: 100%; } } html body #cmImages .imt-card-pending .imt-card-prompt { opacity: 0.6; font-style: italic; } /* ── Status + tag pills on each card ─────────────────────────────────── */ html body #cmImages .imt-status-pill { position: absolute; top: 8px; left: 8px; padding: 3px 9px; font-family: var(--imt-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; color: #fff; background: var(--status-warning, #e89040); line-height: 1; } html body #cmImages .imt-status-pill.is-accepted { background: var(--status-success, #8bc34a); color: #0a0a0a; } html body #cmImages .imt-status-pill.is-rejected { background: var(--status-danger, #e06060); } html body #cmImages .imt-tag-row { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } html body #cmImages .imt-tag { padding: 3px 8px; font-family: var(--imt-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; background: rgba(0,0,0,0.7); color: #fff; text-decoration: none; line-height: 1; } html body #cmImages .imt-tag.is-logo { background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a); } html body #cmImages .imt-tag.is-drive { background: #4285f4; color: #fff; } html body #cmImages .imt-tag.is-drive-err { background: #b3261e; color: #fff; cursor: help; } /* ── Drive auto-publish status banner ─────────────────────────────── Renders above the AI library grid ONLY when /drive-status reports a problem (no folder, dead auth, last push failed). Stays silent on healthy clients so the operator only sees it when there's something to do. */ html body #cmImages .imt-drive-banner { margin: 12px 0 16px; padding: 12px 16px; border-radius: var(--imt-radius, 8px); border: 1px solid; font-size: 13px; line-height: 1.45; } html body #cmImages .imt-drive-banner.is-warn { background: rgba(244, 225, 74, 0.10); border-color: rgba(244, 225, 74, 0.45); color: var(--ink-body, #2a2a2a); } html body #cmImages .imt-drive-banner.is-err { background: rgba(179, 38, 30, 0.08); border-color: rgba(179, 38, 30, 0.45); color: #7a1f17; } html body #cmImages .imt-drive-banner-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; } html body #cmImages .imt-drive-banner-head .bi { font-size: 16px; } html body #cmImages .imt-drive-banner-list { margin: 0; padding-left: 22px; } html body #cmImages .imt-drive-banner-list li + li { margin-top: 4px; } html body #cmImages .imt-drive-banner-cta { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } html body #cmImages .imt-drive-reconnect-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #4285f4; color: #fff; border: 1px solid #3367d6; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: 0.02em; } html body #cmImages .imt-drive-reconnect-btn:hover { background: #3367d6; color: #fff; } html body #cmImages .imt-drive-banner-note { font-size: 11px; color: var(--ink-muted, #5d5d5a); } html[data-design-mode="editorial"] body #cmImages .imt-drive-reconnect-btn { border-radius: 0 !important; background: var(--ink, #0a0a0a) !important; color: var(--paper, #fbfaf6) !important; border-color: var(--ink, #0a0a0a) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 8px 16px !important; } html[data-design-mode="editorial"] body #cmImages .imt-drive-reconnect-btn:hover { background: var(--accent, #f4e14a) !important; color: var(--ink, #0a0a0a) !important; } /* Editorial mode — same banner, paper-cream surface, flat corners */ html[data-design-mode="editorial"] body #cmImages .imt-drive-banner { border-radius: 0 !important; background: var(--paper-2, #f4f1e8) !important; border-color: var(--ink-3, #5d5d5a) !important; color: var(--ink-strong, #0a0a0a) !important; font-family: 'Inter', system-ui, sans-serif; } html[data-design-mode="editorial"] body #cmImages .imt-drive-banner.is-err { border-color: #b3261e !important; background: #fdecea !important; color: #7a1f17 !important; } html[data-design-mode="editorial"] body #cmImages .imt-tag.is-drive-err { border-radius: 0 !important; background: #b3261e !important; color: #fff !important; } /* ── Editorial mode: square the outer radii, keep pills round ──────── */ html[data-design-mode="editorial"] body #cmImages { --imt-radius: 2px; --imt-radius-tight: 2px; } html[data-design-mode="editorial"] body #cmImages .imt-source-toggle, html[data-design-mode="editorial"] body #cmImages .imt-filter-row, html[data-design-mode="editorial"] body #cmImages button.imt-source-pill, html[data-design-mode="editorial"] body #cmImages button.imt-filter-pill, html[data-design-mode="editorial"] body #cmImages button.imt-suggest-chip, html[data-design-mode="editorial"] body #cmImages .imt-status-pill, html[data-design-mode="editorial"] body #cmImages .imt-tag { border-radius: 999px; } /* ── Size toggle (square / landscape / portrait icons) ──────────────────── */ html body #cmImages .imt-field-size { display: flex; flex-direction: column; gap: 6px; } html body #cmImages .imt-size-toggle { display: inline-flex; gap: 4px; background: var(--cm-surface2, #f4f1e8); border: 1px solid var(--cm-border, #d9d4c4); padding: 4px; border-radius: var(--imt-radius); } /* Icon + label INLINE — single row per pill, not stacked. */ html body #cmImages button.imt-size-pill { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; background: transparent; border: 1px solid transparent; border-radius: var(--imt-radius-tight); cursor: pointer; color: var(--ink-muted, #5d5d5a); font-family: var(--imt-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; } html body #cmImages button.imt-size-pill:hover { color: var(--ink-strong, #0a0a0a); background: var(--cm-surface, #fbfaf6); } html body #cmImages button.imt-size-pill.is-active { background: var(--cm-surface, #fbfaf6); color: var(--ink-strong, #0a0a0a); border-color: var(--ink-strong, #0a0a0a); } html body #cmImages .imt-size-icon { display: inline-block; background: currentColor; border-radius: 2px; opacity: 0.85; flex-shrink: 0; } html body #cmImages .imt-size-icon-sq { width: 14px; height: 14px; } html body #cmImages .imt-size-icon-ls { width: 18px; height: 12px; } html body #cmImages .imt-size-icon-pt { width: 12px; height: 18px; } html body #cmImages button.imt-size-pill.is-active .imt-size-icon { background: var(--accent, #f4e14a); outline: 1px solid var(--ink-strong, #0a0a0a); opacity: 1; } html body #cmImages .imt-size-label { display: inline-block; } /* ── Clickable card image (cursor hint for lightbox trigger) ───────────── */ html body #cmImages .imt-card-img-clickable { cursor: zoom-in; } html body #cmImages .imt-card-img-clickable::after { content: "\F2C2"; /* bi-arrows-fullscreen */ font-family: "bootstrap-icons", sans-serif; position: absolute; bottom: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; background: rgba(0,0,0,0.55); color: #fff; font-size: 13px; border-radius: 999px; opacity: 0; transition: opacity .15s; pointer-events: none; } html body #cmImages .imt-card-img-clickable:hover::after { opacity: 1; } /* ── Lightbox overlay ─────────────────────────────────────────────────── */ /* NOTE: at runtime imgOpenLightbox() re-parents #imgLightbox to so position:fixed escapes any transform/filter ancestor that would trap it inside the main content column. That's why these selectors target the element by id from html level, NOT scoped inside #cmImages. */ html .imt-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 40px 40px 24px; background: rgba(8, 7, 5, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: imt-fade-in 0.16s ease-out; font-family: inherit; } @keyframes imt-fade-in { from { opacity: 0; } to { opacity: 1; } } html .imt-lightbox[hidden] { display: none; } html .imt-lightbox * { box-sizing: border-box; } html .imt-lightbox-close { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 24px; line-height: 1; border-radius: 999px; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .15s; z-index: 2; } html .imt-lightbox-close:hover { background: rgba(255,255,255,0.20); transform: scale(1.05); } html .imt-lightbox-frame { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(96vw, 1400px); max-height: 100%; margin: 0; } html .imt-lightbox-img { max-width: 100%; max-height: calc(100vh - 200px); width: auto; height: auto; display: block; border-radius: 6px; background: #111; box-shadow: 0 24px 64px rgba(0,0,0,0.5); object-fit: contain; } html .imt-lightbox-frame figcaption { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,0.92); } html .imt-lightbox-prompt { font-family: "Newsreader", ui-serif, Georgia, serif; font-size: 0.95rem; line-height: 1.4; text-align: center; color: rgba(255,255,255,0.88); max-height: 4.5em; overflow: auto; } html .imt-lightbox-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } /* All lightbox action buttons get matching glass-on-dark styling AND identical uppercase mono text so 'OPEN IN NEW TAB' doesn't look like the odd one out (the bug Ben caught: anchor tag was inheriting document text-transform and rendering 'Open' lowercase). */ html .imt-lightbox-actions button, html .imt-lightbox-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: 4px; color: #fff !important; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; } html .imt-lightbox-actions button:hover, html .imt-lightbox-actions a:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.42); } html .imt-lightbox-actions button.imt-btn-primary { background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a) !important; border-color: var(--accent, #f4e14a); } html .imt-lightbox-actions button.imt-btn-primary:hover { background: #ffea4a; border-color: #ffea4a; } /* ════════════════════════════════════════════════════════════════════════ RESPONSIVE — Images tab on tablet & phone ──────────────────────────────────────────────────────────────────────── Breakpoints: ≤ 880px : top 2-col grid stacks (already in base rules) ≤ 720px : header stacks (title above source toggle), tighter padding ≤ 560px : controls collapse to 1 column, library head stacks ≤ 420px : size pills hide their text labels (icon-only), source toggle becomes icon-only, card actions wrap Touch (hover: none): always-show the "click to enlarge" hint icon. ════════════════════════════════════════════════════════════════════════ */ /* — Touch: card-image fullscreen hint shouldn't depend on hover — */ @media (hover: none) { html body #cmImages .imt-card-img-clickable::after { opacity: 1; } } /* — ≤ 720px : header stacks, panel padding tightens — */ @media (max-width: 720px) { html body #cmImages .imt-head { flex-direction: column; align-items: flex-start; gap: 12px; } html body #cmImages .imt-title { font-size: 1.4rem; } html body #cmImages .imt-sub { font-size: 0.74rem; } html body #cmImages .imt-panel { padding: 14px 14px; } html body #cmImages .imt-panel-title { font-size: 1.02rem; } /* Source toggle should fill the available width when it wraps below the title so it doesn't look like a stranded floating element. */ html body #cmImages .imt-source-toggle { width: 100%; justify-content: stretch; } html body #cmImages button.imt-source-pill { flex: 1; justify-content: center; } } /* — ≤ 560px : single-col controls, library head stacks — */ @media (max-width: 560px) { html body #cmImages .imt-controls { grid-template-columns: 1fr; } html body #cmImages .imt-library-head { align-items: flex-start; flex-direction: column; } html body #cmImages .imt-library-head > div { width: 100%; } html body #cmImages .imt-filter-row { width: 100%; justify-content: flex-start; } html body #cmImages .imt-gen-actions { flex-direction: column; align-items: stretch; } html body #cmImages .imt-gen-actions .imt-status { text-align: center; } html body #cmImages .imt-gen-actions button.imt-btn-primary { width: 100%; justify-content: center; padding: 12px 22px; /* taller for touch */ } html body #cmImages .imt-logo-row { flex-direction: column; align-items: flex-start; } html body #cmImages .imt-logo-actions { flex-direction: row; width: 100%; } html body #cmImages .imt-logo-actions button.imt-btn { flex: 1; justify-content: center; } /* Tighter card grid + bigger touch targets on action buttons. */ html body #cmImages .imt-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } html body #cmImages .imt-card-actions { gap: 6px; } html body #cmImages .imt-card-actions button.imt-btn { padding: 8px 10px; font-size: 10px; flex: 1; justify-content: center; } } /* — ≤ 420px : phone — icon-only chips, single-col card grid — */ @media (max-width: 420px) { html body #cmImages { /* slight ambient scale-down so labels still fit */ } html body #cmImages .imt-title { font-size: 1.25rem; } html body #cmImages .imt-panel { padding: 12px 12px; } html body #cmImages button.imt-source-pill { padding: 8px 10px; font-size: 10px; } /* Size pills go icon-only at very narrow widths so all three fit. */ html body #cmImages .imt-size-label { display: none; } html body #cmImages button.imt-size-pill { padding: 10px 14px; min-width: 0; } html body #cmImages .imt-size-toggle { width: 100%; justify-content: space-between; } html body #cmImages button.imt-size-pill { flex: 1; justify-content: center; } /* Library cards become single column on phones — image preview gets the full width so they read like a vertical feed. */ html body #cmImages .imt-grid { grid-template-columns: 1fr; gap: 12px; } html body #cmImages .imt-card-actions button.imt-btn { font-size: 10.5px; padding: 9px 8px; } /* Override chip can take more room when stacked. */ html body #cmImages .imt-override-chip .imt-override-name { max-width: 60vw; } } /* — Lightbox responsive: tighter padding, action bar scrolls horizontally if buttons would overflow, image gets more of the viewport — */ @media (max-width: 720px) { html .imt-lightbox { padding: 56px 12px 16px; } html .imt-lightbox-close { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 22px; } html .imt-lightbox-img { max-height: calc(100vh - 240px); border-radius: 4px; } html .imt-lightbox-prompt { font-size: 0.85rem; max-height: 5.5em; } html .imt-lightbox-actions { width: 100%; padding: 4px 0 8px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } html .imt-lightbox-actions::-webkit-scrollbar { height: 4px; } html .imt-lightbox-actions::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 999px; } html .imt-lightbox-actions button, html .imt-lightbox-actions a { flex-shrink: 0; scroll-snap-align: start; padding: 10px 14px; /* taller for touch */ font-size: 10.5px; } } @media (max-width: 420px) { html .imt-lightbox { padding: 52px 8px 12px; } html .imt-lightbox-img { max-height: calc(100vh - 220px); } html .imt-lightbox-prompt { font-size: 0.8rem; padding: 0 4px; } }