/* GrowFleet instance UI - navy command sidebar over a warm light deck. Token-matched to growfleet.ai (light theme values + brand navy/amber/mint). */ /* The `hidden` attribute must ALWAYS hide, even when the element also carries a class that sets `display` (e.g. .bulkbar{display:flex}). Without this, a class selector out-specifies the UA [hidden] rule and the element leaks into view - which is exactly why the bulk-rename bar showed before it was clicked. One global guard beats patching every class by hand. */ [hidden] { display: none !important; } :root { --navy: #070b14; --navy2: #0c1220; --navy-line: #1d2739; --navy-line2: #2a3852; --navy-text: #e9eef8; --navy-muted: #93a1b8; --navy-dim: #5b6880; --bg: #f7f5f0; --card: #ffffff; --card2: #faf8f4; --line: #e4dfd4; --line2: #d2ccbe; /* Text colours. Per request, the two secondary greys that drove the "faded" look - --muted (secondary text) and --dim (labels, meta, chips) - are now the SAME near-black as primary text, so labels and secondary copy read bold and high-contrast instead of grey. --neutral keeps the old label grey ONLY for non-text uses (the "published" status dots), so those stay grey rather than turning into black blobs. (dark theme overrides these separately.) */ --text: #131a2a; --muted: #131a2a; --dim: #131a2a; --neutral: #565f73; /* --amber-bright (#ffad33) is THE brand amber - kept for buttons/logo/large. --amber and --amber-deep are the small-TEXT accents (links, chip text, labels) and were 2.7-3.5:1 on white; darkened just enough to clear WCAG AA 4.5:1 while staying clearly amber. (dark theme overrides these separately.) */ --amber: #e08900; --amber-bright: #ffad33; --amber-deep: #995800; --amber-soft: rgba(224, 137, 0, 0.10); /* Selected-segment fill: a deep amber kept CONSTANT across light + dark (do NOT override in the dark block) so white label text stays AA - white/#995800 = 5.6:1. --amber and --amber-deep both brighten in dark, which drops white below 4.5:1. */ --amber-sel: #995800; /* Post Mix selected fill: the approve GREEN (matches the row approve toggle), kept CONSTANT across light + dark so white label text stays AA - white/#0e7857 = 5.5:1. (--green is exactly this in light but brightens to #2fbd8a in dark, dropping white to 2.4:1, so pin the deep value here rather than reuse --green.) */ --green-sel: #0e7857; /* ONE focus ring, reused by every input/textarea/select focus rule so the amber focus is identical site-wide: a crisp 1px solid amber (flush outside the 1px border = ~2px of continuous solid amber, a genuinely visible WCAG focus area, not a faint glow) plus a soft amber halo. */ --focus-ring: 0 0 0 1px var(--amber), 0 0 0 4px var(--amber-soft); /* Corner-radius scale (fixed px, NOT rem - radius must not grow with the A-/A+ --ui-scale text control). Subtle / more-square: buttons+inputs+pills at 7px, cards at 10px, cap surfaces at 12px; true circles stay 50%. */ --r-1: 3px; --r-2: 5px; --r-3: 7px; --r-4: 10px; --r-5: 12px; --r-pill: var(--r-3); --green: #0e7857; --green-soft: rgba(20, 151, 107, 0.10); /* darkened from #14976b to clear AA as small text on white */ --red: #d64545; --red-soft: rgba(214, 69, 69, 0.08); --scan: #3a63a8; --scan-soft: rgba(58, 99, 168, 0.12); /* "from a scan" provenance - cool, distinct from amber */ --font-display: "Bricolage Grotesque", sans-serif; --font-body: "Instrument Sans", sans-serif; --font-mono: "IBM Plex Mono", monospace; --shadow: 0 4px 18px rgba(19, 26, 42, 0.07); --shadow-lg: 0 18px 44px rgba(19, 26, 42, 0.12); --ui-scale: 1; /* reader text-size multiplier, driven by the A-/A+ control */ /* Type scale. The app had grown ~87 ad-hoc font-sizes; these 8 steps replace them (nearest-snap, so most text moved <0.5px). --fs-1 is the micro tier for genuine UI chrome (badges, corner labels, dense pills) that must stay small; readable text starts at --fs-4/--fs-5. A hard 11px floor was rejected because it overflowed the corner badges. All in rem so the A-/A+ control scales them. */ --fs-1: 0.6rem; /* 9.6px - micro: badges, tiny status chips */ --fs-2: 0.6875rem; /* 11px - small labels, panel headers */ --fs-3: 0.78rem; /* 12.5px - captions, meta */ --fs-4: 0.875rem; /* 14px - secondary text, hints */ --fs-5: 1rem; /* 16px - body */ --fs-6: 1.19rem; /* 19px - leads, sub-headings */ --fs-7: 1.44rem; /* 23px - page titles */ --fs-8: 1.94rem; /* 31px - KPI figures, hero numbers */ } * { margin: 0; padding: 0; box-sizing: border-box; } /* --ui-scale multiplies the browser's OWN default size (100%), so the A-/A+ control respects the user's OS/browser preference and layers on top of it. Every rem on the page keys off this one line, so all text - including the top-right toasts - scales. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: calc(100% * var(--ui-scale, 1)); } /* No sideways scrollbar at any zoom (incl. when the A-/A+ control enlarges the topbar): clip horizontal overflow. clip - not hidden - so it never becomes a scroll container that would break position:sticky (same trick the mobile block already used). At 100% nothing overflows so this is a no-op; wide tables/chip rows have their own inner overflow-x:auto scrollers and are unaffected. */ html, body { overflow-x: clip; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-7); } .mono { font-family: var(--font-mono); letter-spacing: .1em; } a { color: var(--amber-deep); text-decoration: none; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-1); } /* ---------- login (navy backdrop, white card - matches the app shell) ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--navy); } .login-wrap::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(800px 480px at 12% -5%, rgba(255,173,51,.14), transparent 60%), radial-gradient(700px 500px at 95% 12%, rgba(62,207,142,.09), transparent 65%); } .login-card { position: relative; width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5); padding: 40px 36px; box-shadow: var(--shadow-lg); } .login-card .lmark { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .login-card .lmark svg { width: 42px; height: 42px; border-radius: var(--r-3); } .login-card .lmark .wm { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-7); color: var(--text); } .login-card .wm b { color: var(--amber-deep); } .login-sub { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .16em; color: var(--dim); margin-bottom: 26px; } .field { margin-bottom: 14px; } .field label { display: block; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .14em; color: var(--muted); margin-bottom: 6px; } .field .pwrap { position: relative; } .field input { width: 100%; padding: 13px 15px; border-radius: var(--r-3); background: var(--card2); border: 1px solid var(--line2); color: var(--text); font-size: var(--fs-5); font-family: var(--font-body); } .field input:focus { outline: none; border-color: var(--amber); background: var(--card); } .pwshow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--dim); font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; cursor: pointer; padding: 6px; } .pwshow:hover { color: var(--text); } .remember { display: flex; align-items: center; gap: 9px; margin: 4px 0 18px; color: var(--muted); font-size: var(--fs-4); } .remember input { accent-color: var(--amber); width: 16px; height: 16px; } .login-err { display: flex; gap: 8px; align-items: center; background: var(--red-soft); border: 1px solid rgba(214,69,69,.3); color: var(--red); border-radius: var(--r-3); padding: 10px 14px; font-size: var(--fs-4); margin-bottom: 16px; } .login-ok { display: flex; gap: 8px; align-items: center; background: var(--green-soft); border: 1px solid rgba(20,151,107,.32); color: var(--green); border-radius: var(--r-3); padding: 10px 14px; font-size: var(--fs-4); margin-bottom: 16px; } .forgot-link { display: block; margin-top: 14px; text-align: center; font-size: var(--fs-3); color: var(--amber-deep); text-decoration: none; } .forgot-link:hover { color: var(--amber); text-decoration: underline; } .reset-lead { color: var(--neutral); font-size: var(--fs-4); line-height: 1.5; margin: 0 0 18px; } .login-note { margin-top: 20px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); text-align: center; } /* sign-in agreement (clickwrap) + the Terms/Privacy dialog */ .agree { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px; color: var(--muted); font-size: var(--fs-3); line-height: 1.45; } .agree input { accent-color: var(--amber); width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; } /* scope beats the app's generic .linklike (defined later, same specificity) */ .agree .linklike { background: none; border: none; padding: 0; font: inherit; color: var(--amber-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .agree .linklike:hover { color: var(--amber); } .legal-dlg { width: min(460px, 94vw); border: none; border-radius: var(--r-5); padding: 0; color: var(--text); background: var(--card); box-shadow: 0 24px 60px rgba(7,11,20,.4); margin: auto; } /* the app reset zeroes dialog margin, killing modal auto-centering */ .legal-dlg::backdrop { background: rgba(7,11,20,.55); } .legal-dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); } .legal-dlg-head b { font-size: var(--fs-5); } .legal-x { background: none; border: none; font-size: 16px; line-height: 1; color: var(--dim); cursor: pointer; padding: 4px; } .legal-x:hover { color: var(--text); } .legal-dlg-body { padding: 16px 20px; font-size: var(--fs-4); line-height: 1.55; color: var(--muted); } .legal-dlg-body p { margin: 0 0 12px; } .legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; } .legal-links a { color: var(--amber-deep); text-underline-offset: 2px; } .legal-ver { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; } .legal-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid var(--line); } /* ---------- buttons ---------- */ .btn { display: inline-block; padding: 11px 20px; border-radius: var(--r-3); font-weight: 600; font-size: var(--fs-4); border: 1px solid var(--line2); background: var(--card); color: var(--text); cursor: pointer; transition: all .18s ease; white-space: nowrap; } .btn:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); } .btn.amber { background: linear-gradient(180deg, var(--amber-bright), #f29718); color: #1a1206; border-color: transparent; box-shadow: 0 4px 14px rgba(242,151,24,.3); } .btn.amber:hover { box-shadow: 0 8px 20px rgba(242,151,24,.38); } /* Icons on amber-FILLED buttons: the house glyphs carry an amber (#f29718) accent stroke that all but vanishes on an amber background (fails WCAG 1.4.11's 3:1 for non-text). Force every stroke to the button's dark text colour so the WHOLE glyph reads clearly - fixes the copy, check ("I've posted this") and sparkle glyphs. */ .btn.amber .bic svg [stroke] { stroke: #1a1206; } .btn.wide { width: 100%; text-align: center; padding: 14px; } .btn.danger { background: #cc3c3c; border-color: transparent; color: #fff; } /* darker red so white text clears AA 4.5:1 */ .btn.danger:hover { box-shadow: 0 6px 16px rgba(214,69,69,.3); } /* House glyphs carry an amber accent stroke that all but vanishes on the red danger fill (same WCAG 1.4.11 issue the amber button fixes). Force the whole glyph to the button's white text colour so e.g. the trash icon reads clearly. */ .btn.danger .bic svg [stroke] { stroke: #fff; } .btn[disabled] { opacity: .6; cursor: default; transform: none; } /* ---------- shell ---------- */ /* Sidebar is position:FIXED (not sticky) so the menu ALWAYS stays in view - it can never drift off when you scroll the page or open an overlay (Peter). .main is offset by the sidebar width; both reset on mobile (<=900 static row, <=760 hidden). */ .shell { display: block; min-height: 100vh; } .side { background: var(--navy); color: var(--navy-text); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 7px; position: fixed; left: 0; top: 0; width: 248px; height: 100vh; box-sizing: border-box; overflow: hidden; z-index: 40; } .brandmark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-6); color: #fff; } .brandmark svg { width: 34px; height: 34px; border-radius: var(--r-3); flex: none; } /* Brand mark artwork (PNG): same 34px rounded badge as the old inline SVG, on the --navy2 tile so the transparent icon reads as a framed mark on the dark sidebar. */ .brandmark img { width: 34px; height: 34px; border-radius: var(--r-3); flex: none; background: var(--navy2); object-fit: contain; } .brandmark b { color: var(--amber-bright); } .tagline { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .22em; color: var(--navy-dim); margin: -6px 0 2px 44px; } .planchip { font-size: var(--fs-1); color: var(--amber-bright); background: rgba(255,173,51,.12); border-radius: var(--r-pill); padding: 5px 10px; width: fit-content; } .slabel { font-size: var(--fs-1); color: var(--navy-dim); margin-bottom: -10px; } .side select { background: var(--navy2); color: var(--navy-text); border: 1px solid var(--navy-line2); border-radius: var(--r-3); padding: 7px 10px; font-family: var(--font-body); font-size: var(--fs-4); } /* the sidebar select is on navy - its own navy border outranks the global amber border-color, and a 10% ring is invisible on dark. Give it the amber focus with the brighter amber + a stronger ring so it reads (matches the global look on a dark bg). */ .side select:focus { outline: none; border-color: var(--amber-bright); box-shadow: 0 0 0 1px var(--amber-bright), 0 0 0 4px rgba(255, 173, 51, .32); } /* flex: 0 1 auto (NOT flex:1) - the nav takes only its CONTENT height so SIGN OUT sits directly beneath the last item (no stretched-out gap between them); it can still shrink + scroll (min-height:0 + overflow-y) when the items genuinely exceed the sidebar height. Any leftover space falls at the very bottom, which reads as normal unused room rather than a broken mid-sidebar gap. */ #nav { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--navy-line2) transparent; } #nav::-webkit-scrollbar { width: 6px; } #nav::-webkit-scrollbar-thumb { background: var(--navy-line2); border-radius: 999px; } #nav button { text-align: left; background: none; border: none; color: var(--navy-muted); padding: 6px 14px; border-radius: var(--r-3); font-size: var(--fs-4); cursor: pointer; flex: none; font-family: var(--font-body); transition: all .15s; } #nav button:hover { color: #fff; background: rgba(255,255,255,.05); } #nav button.on { color: #fff; background: var(--navy-line); font-weight: 600; box-shadow: inset 2px 0 0 var(--amber-bright); } #nav button[draggable="true"] { cursor: grab; } #nav button.dragging { opacity: .5; cursor: grabbing; background: rgba(255,255,255,.06); outline: 1px dashed var(--navy-line2); } /* nav item = icon + label on one clean row (icons shared with the Quick nav) */ #nav button { display: flex; align-items: center; gap: 10px; } .navico { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--navy-dim); } .navico svg { width: 18px; height: 18px; } .navlbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nav button:hover .navico, #nav button.on .navico { color: var(--amber-bright); } /* collapsible group sections (TikTok-style headers) */ .navsec { display: flex; flex-direction: column; } .navsec-list { display: flex; flex-direction: column; gap: 1px; } .navsec-h { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--navy-dim); font-size: var(--fs-1); letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px 4px; } .navsec-h:hover { color: var(--navy-text); } .navsec-lbl { flex: 1; } .navsec-chev { width: 13px; height: 13px; flex: none; opacity: .55; transition: transform .15s; } .navsec.collapsed .navsec-chev { transform: rotate(-90deg); } .navsec.collapsed .navsec-list { display: none; } .navreset { display: block; margin: 6px 6px 2px; padding: 6px 10px; font-size: var(--fs-3); color: var(--navy-dim); font-family: var(--font-mono, monospace); letter-spacing: .02em; text-decoration: none; border-radius: var(--r-3); cursor: pointer; opacity: .8; } .navreset:hover { color: #fff; background: rgba(255,255,255,.05); opacity: 1; } .logout { font-family: var(--font-body); font-size: var(--fs-4); color: var(--navy-muted); padding: 8px 14px; } .logout:hover { color: #fff; } /* ---------- main + topbar ---------- */ .main { min-width: 0; display: flex; flex-direction: column; margin-left: 248px; } .topbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; padding: 18px 38px; background: var(--card); border-bottom: 1px solid var(--line); } /* Sticky top menu (Quick nav toggle, ON by default) - the topbar has an opaque card background so content scrolls cleanly beneath it. */ body.gfstickon .topbar { position: sticky; top: 0; z-index: 30; } /* Scroll-to-top button: a subtle amber circle, bottom-right, shown once you scroll. */ .scrolltop { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: var(--amber); color: var(--navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .16s ease, box-shadow .16s ease; } .scrolltop svg { width: 22px; height: 22px; } .scrolltop:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(224, 137, 0, .42); } .scrolltop[hidden] { display: none; } .scrolltop:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } /* Sticky-menu toggle in the Quick nav head */ .tnd-mega-head { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; } .tnd-mega-head > span:first-child { flex: 0 0 auto; } /* title is content-width; the search fills the middle */ .qnstick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-transform: none; font-family: var(--font-body); font-size: var(--fs-3); font-weight: 500; color: var(--muted); letter-spacing: 0; } .qnstick svg { width: 14px; height: 14px; flex: none; } .qnstick-cb { position: absolute; opacity: 0; width: 0; height: 0; } .qnstick-sw { width: 30px; height: 17px; border-radius: 9px; background: var(--line2); position: relative; transition: background .16s ease; flex: none; } .qnstick-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .16s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .qnstick-cb:checked + .qnstick-sw { background: var(--amber); } .qnstick-cb:checked + .qnstick-sw::after { transform: translateX(13px); } .qnstick-cb:focus-visible + .qnstick-sw { outline: 2px solid var(--amber); outline-offset: 2px; } /* Theme (dark/light) toggle in the Quick nav head - a compact icon button */ .qntheme { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--muted); display: inline-flex; align-items: center; border-radius: var(--r-3); transition: background .16s ease, color .16s ease; } .qntheme:hover { color: var(--amber-deep); background: var(--amber-soft); } .qntheme:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .tnd-mega-head .qntheme svg { width: 16px; height: 16px; } /* Text-size stepper (A- / A+) at the right end of the megamenu footer: discreet + muted so it sits quietly on the helper line. Small house 'A' glyphs (minus / plus) around a compact % that resets on click; the size gap between the A's reinforces smaller vs bigger. */ .qnfs { display: inline-flex; align-items: center; gap: 1px; flex: none; margin-left: auto; } /* .qnfs .* prefixes beat the `.tnd-menu button { font-size: var(--fs-4); color:--text }` rule (0,0,1,1) that otherwise wins over a bare .qnfs-val and inflates/darkens the %. */ .qnfs .qnfs-btn { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--muted); display: inline-flex; align-items: center; border-radius: var(--r-2); transition: background .16s ease, color .16s ease; } .qnfs .qnfs-btn:hover { color: var(--amber-deep); background: var(--amber-soft); } .qnfs .qnfs-btn:focus-visible, .qnfs .qnfs-val:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .tnd-mega-foot .qnfs-dn svg { width: 16px; height: 16px; } .tnd-mega-foot .qnfs-up svg { width: 19px; height: 19px; } .qnfs .qnfs-val { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-3); font-weight: 600; color: var(--dim); letter-spacing: 0; min-width: 36px; text-align: center; padding: 1px 2px; border-radius: var(--r-2); transition: background .16s ease, color .16s ease; } .qnfs .qnfs-val:hover { color: var(--amber-deep); background: var(--amber-soft); } .qnfs.is-min .qnfs-dn, .qnfs.is-max .qnfs-up { opacity: .3; pointer-events: none; } .qnfs:not(.is-def) .qnfs-val { color: var(--amber-deep); } /* off 100% -> reads as a reset affordance */ /* Support button pinned top-right in the Help page, sticky as you scroll (clears the sticky top menu). Carries the unread-reply highlight the topbar button used to. */ /* the bar takes no layout space; the button itself is fixed top-right, below the header, so it stays put as the help topics scroll (hidden with the tab when it is not open, since a fixed child of a display:none section does not render). */ /* the title block is the ONLY flex-growing element + min-width:0 so its subtitle ellipsis-truncates instead of collapsing the box into a tall word-wide column */ .topbar > .tbtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; } .topbar h1 { font-size: var(--fs-7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .spacer { flex: 1; } /* right cluster: one non-shrinking, right-pinned, single-baseline unit */ .tbright { display: flex; align-items: center; gap: 10px; flex: none; } .tbright > * { flex: none; } .tbright .topnav { margin-right: 0; } /* ---------- site-wide search: sits INLINE on the megamenu head row ---------- Title (left) | search (fills the middle) | Sticky/Tooltips/theme (right). Typing swaps the feature columns for a grouped results list; clearing brings them back. */ .tnd-mega-head .gfsearch { position: relative; flex: 1 1 220px; min-width: 120px; margin: 0; } .tnd-mega-head .gfsearch-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--dim); display: inline-flex; pointer-events: none; } .tnd-mega-head .gfsearch-ic svg { width: 17px; height: 17px; } .tnd-mega-head .gfsearch-in { width: 100%; height: 38px; padding: 0 14px 0 38px; border-radius: var(--r-pill); margin: 0; border: 1px solid var(--line2); background: var(--card); color: var(--text); font-family: var(--font-body); font-size: var(--fs-3); font-weight: 400; letter-spacing: normal; text-transform: none; } .tnd-mega-head .gfsearch-in::placeholder { color: var(--dim); } .tnd-mega-head .gfsearch-in:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } .gfsearch-panel { padding: 2px 2px 4px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; } /* while searching, the results replace the feature columns + the footer note */ .tnd-menu.searching .tnd-cols, .tnd-menu.searching .tnd-mega-foot { display: none; } /* results styled like a modern search suggest: bold group headings, roomy rounded rows, prominent rounded thumbnails (Google-Photos-ish). */ .gfs-group { font: 700 13px/1 var(--font-body); letter-spacing: normal; text-transform: none; color: var(--text); padding: 14px 10px 7px; } .gfs-opt { display: flex; align-items: center; gap: 14px; padding: 8px 11px; border-radius: var(--r-4); cursor: pointer; margin-bottom: 2px; } .gfs-opt:hover { background: var(--card2); } .gfs-opt.active { background: var(--amber-soft); } .gfs-ic { flex: none; width: 46px; height: 46px; border-radius: var(--r-3); display: inline-flex; align-items: center; justify-content: center; background: var(--card2); color: var(--amber-deep); } .gfs-ic svg { width: 22px; height: 22px; } .gfs-thumb { flex: none; width: 46px; height: 46px; border-radius: var(--r-3); object-fit: cover; background: var(--card2); border: 1px solid var(--line2); } video.gfs-thumb { display: block; } .gfs-tx { min-width: 0; flex: 1; } .gfs-tx b { display: block; font-size: var(--fs-4); font-weight: 600; letter-spacing: normal; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gfs-tx span { display: block; font-size: var(--fs-1); color: var(--dim); letter-spacing: normal; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gfs-empty, .gfs-loading { padding: 18px 12px; color: var(--dim); font-size: var(--fs-2); text-align: center; } .gfs-loading { font-family: var(--font-mono); letter-spacing: .1em; font-size: var(--fs-1); } .topsupport { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--card); color: var(--text); font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; } .topsupport svg { width: 19px; height: 19px; color: #1c2740; } /* icon-only variant (Help): square padding so the pill reads as a round icon button */ .topsupport.topico { padding: 9px; } .topsupport:hover { border-color: var(--amber); box-shadow: var(--shadow); transform: translateY(-1px); } .conndot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 2px var(--card); } .conndot.warn { background: var(--amber); } .conndot[hidden] { display: none; } @media (max-width: 640px) { .topsupport span:not(.conndot) { display: none; } .topsupport { padding: 9px 11px; } .tbright { gap: 6px; } } .whoami { flex: none; white-space: nowrap; text-align: right; line-height: 1.3; } .whoami b { display: block; font-size: var(--fs-5); } .whoami span { font-size: var(--fs-3); color: var(--muted); } /* owner/operator: the identity opens the Users section, so it looks and behaves like a button (padding offset by margin so the layout never shifts) */ .whoami[data-go] { cursor: pointer; border-radius: var(--r-3); padding: 3px 8px; margin: -3px -8px; transition: background .15s; } .whoami[data-go]:hover { background: var(--amber-soft); } .whoami[data-go]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } @media (max-width: 900px) { .whoami { display: none; } } /* header storage meter: compact chip in the top bar, shown only on the Media tab (JS toggles [hidden]). Taps through to the plan tab to add storage. */ .headstore { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card2); color: var(--text); cursor: pointer; font-family: inherit; line-height: 1; } .headstore[hidden] { display: none; } .headstore:hover { border-color: var(--amber); background: rgba(255, 173, 51, .07); } .headstore:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 173, 51, .25); } .headstore .hs-lab { font-size: var(--fs-1); letter-spacing: .13em; color: var(--muted); } .headstore .hs-bar { width: 90px; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .headstore .hs-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; } .headstore.warn .hs-bar > i { background: linear-gradient(90deg, var(--amber-bright), #f29718); } .headstore.full .hs-bar > i { background: linear-gradient(90deg, #f07b7b, var(--red)); } .headstore .hs-val { font-size: var(--fs-2); font-weight: 600; white-space: nowrap; } .headstore.warn .hs-val { color: var(--amber-deep); } .headstore.full .hs-val { color: var(--red); } :root[data-theme="dark"] .headstore .hs-bar { background: rgba(255, 255, 255, .10); } /* phone: the top bar sheds its right cluster, so the meter wraps to its own slim full-width row under the title (no pill), never forcing sideways scroll. */ @media (max-width: 760px) { .topbar { flex-wrap: wrap; } .headstore { order: 2; flex: 1 1 100%; justify-content: flex-start; border: 0; background: transparent; padding: 4px 0 0; } .headstore:hover { background: transparent; } .headstore .hs-bar { flex: 1 1 auto; width: auto; max-width: 260px; } } /* desktop: the storage meter sits on the YOUR LIBRARY asset-count row (a compact chip, right-aligned next to the count) instead of the top bar; mobile keeps the top-bar chip. .libstore mirrors .headstore's look. */ .libstatrow { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; } .libstatrow #mediaCount { color: var(--muted); } .libstore { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card2); color: var(--text); cursor: pointer; font-family: inherit; line-height: 1; } .libstore[hidden] { display: none; } .libstore:hover { border-color: var(--amber); background: rgba(255, 173, 51, .07); } .libstore:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 173, 51, .25); } .libstore .hs-lab { font-size: var(--fs-1); letter-spacing: .13em; color: var(--muted); } .libstore .hs-bar { width: 90px; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .libstore .hs-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; } .libstore.warn .hs-bar > i { background: linear-gradient(90deg, var(--amber-bright), #f29718); } .libstore.full .hs-bar > i { background: linear-gradient(90deg, #f07b7b, var(--red)); } .libstore .hs-val { font-size: var(--fs-2); font-weight: 600; white-space: nowrap; } .libstore.warn .hs-val { color: var(--amber-deep); } .libstore.full .hs-val { color: var(--red); } :root[data-theme="dark"] .libstore .hs-bar { background: rgba(255, 255, 255, .10); } /* pick ONE per width: desktop = in-panel chip, mobile = top-bar chip (unchanged) */ @media (min-width: 761px) { .headstore { display: none; } } @media (max-width: 760px) { .libstore { display: none; } .libstatrow { margin-bottom: 10px; } } .content { --content-inset-top: 30px; padding: 30px 38px 48px; max-width: 1200px; width: 100%; } .tab { display: none; } .tab.on { display: block; } .tab > h1 { display: none; } /* page title lives in the topbar */ /* ---------- panels + cards ---------- */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5); overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow); } /* deep-link arrival flash: a brief amber ring on the panel a data-scroll link dropped you at (e.g. the Shoot List from "See what Flo can do"), so it is obvious where you landed. */ .gf-deeplinked { animation: gfDeepLink 1.8s ease-out both; } @keyframes gfDeepLink { 0%, 12% { box-shadow: 0 0 0 3px var(--amber); } 100% { box-shadow: 0 0 0 3px transparent; } } @media (prefers-reduced-motion: reduce) { .gf-deeplinked { animation: none; box-shadow: 0 0 0 3px var(--amber); } } .phead { font-family: var(--font-body); font-size: var(--fs-2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--card2); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 16px; margin-bottom: 22px; } .kcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5); padding: 18px 20px; box-shadow: var(--shadow); position: relative; } .kcard b { display: block; font-family: var(--font-display); font-size: var(--fs-7); padding-right: 22px; } .kcard span { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); } /* the "?" tip sits in the card's top-right corner (not inline with the label) */ .kcard .tipdot { position: absolute; top: 15px; right: 17px; margin: 0; } /* feature glyph - stacked in the right margin directly under the "?" tip, so it can never change the card height or touch the value/label. The value is capped by its padding-right (22px) and the label is a row below, so this right-margin lane is empty on every card regardless of value width or A-/A+ text scale. Subtle + muted. */ .kcard .kico { position: absolute; right: 17px; top: 34px; color: var(--dim); opacity: .55; pointer-events: none; line-height: 0; } .kcard .kico .bic, .kcard .kico svg { width: 16px; height: 16px; display: block; } .kcard .up { color: var(--green); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; } /* Posts toolbar quick-nav: compact shortcuts to the three sources (replaced the flow diagram). Compact so they hold the toolbar's one row; the labels collapse to icon-only on tighter viewports so nothing wraps, and on mobile the toolbar wraps normally (no sideways scroll). */ .qgo-div { align-self: center; flex: none; width: 1px; height: 22px; background: var(--line2); margin: 0 2px; } .btn.qgo { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; font-size: var(--fs-2); } .btn.qgo .bic { display: inline-flex; } .btn.qgo .bic svg { width: 15px; height: 15px; } #qActions { gap: 8px; } /* keep the whole Posts toolbar (incl. Auto-approve) on one row */ @media (max-width: 1300px) { .btn.qgo { padding: 9px 10px; gap: 0; } .btn.qgo .qgolab { display: none; } } /* Post-editor action bar (SPEC_POST_FROM_PHONE feedback). Research-backed hierarchy: the amber primary leads; the destructive Remove stays danger-coded but is OUTLINED, not a filled block that competes with the primary. */ .detail .actions .btn.danger { background: transparent; color: var(--red); border-color: rgba(214, 69, 69, .3); box-shadow: none; } .detail .actions .btn.danger:hover { background: var(--red-soft); border-color: var(--red); transform: translateY(-1px); } /* On a phone the buttons form a clean 2-col grid instead of a ragged flex-wrap: the amber primary + the long publish actions each take a full row; Save + Remove share the last row. Every button is full-bleed within its cell, so nothing wraps ragged. */ @media (max-width: 760px) { .detail .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; } .detail .actions .btn { width: 100%; margin: 0; } .detail .actions .btn.amber, .detail .actions #dPostNow, .detail .actions #dPhonePost, .detail .actions #dRecall, .detail .actions .btn[disabled] { grid-column: 1 / -1; } /* Campaign card actions: the same clean grid, buttons a touch smaller so the longer labels pair 2-across - Approve full-width, then Show-in-calendar | Open-in-Posts and Details | Delete in two tidy rows (3 rows total, not a ragged 4-5). */ .crplan[data-planid] .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .crplan[data-planid] .actions .btn { width: 100%; margin: 0; padding: 10px 10px; font-size: var(--fs-4); } .crplan[data-planid] .actions .btn .bic { width: 14px; height: 14px; margin-right: 5px; } .crplan[data-planid] .actions .btn.amber { grid-column: 1 / -1; } } .hint { color: var(--muted); font-size: var(--fs-4); margin-top: 10px; } .empty { color: var(--dim); font-size: var(--fs-2); padding: 34px; text-align: center; } .statusbars { padding: 18px 20px; display: grid; gap: 11px; } .sbar { display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: var(--fs-1); color: var(--muted); } .sbar .track { height: 10px; border-radius: var(--r-2); background: var(--bg); overflow: hidden; } .sbar .fill { height: 100%; border-radius: var(--r-2); background: linear-gradient(90deg, var(--amber-bright), var(--amber)); } .sbar.g .fill { background: linear-gradient(90deg, #2fbf87, var(--green)); } /* ---------- queue ---------- */ .filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } /* Posts filter row = two zones so the search + sort + view-toggle cluster NEVER drops the toggle to its own line: the status chips wrap in their own zone, the right cluster stays put on the top row. (The old single-row flex let qsearch's margin-left:auto glue itself to the edge, orphaning sort + toggle - they wrapped in a ~950-1100px band.) On mobile the cluster goes full-width and wraps inside. */ #qFilters { flex-wrap: wrap; align-items: center; gap: 12px 14px; } /* status chips NEVER wrap on desktop (strict one row). If the whole thing can't fit, the controls cluster wraps BELOW the chips as a unit - no chip ever drops on its own, and there is no fragile viewport breakpoint (chip widths vary with counts + the A-/A+ text scale). Chips wrap only at mobile so 375px never sideways-scrolls. */ #qFilters .qfilterchips { display: flex; flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; min-width: 0; } #qFilters .qfilterchips button { padding: 8px 12px; } /* a touch tighter so more fits */ #qFilters .qbar-right { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; flex: 0 0 auto; margin-left: auto; } #qFilters .qbar-right .qsearch, #qFilters .qbar-right .viewtoggle { margin-left: 0; } /* Collapsible search: compact by default, expands over the chips on focus (overlaps, never pushes) so the row stays one line. max-width:none defeats the global :where(input){max-width:100%} which would otherwise clamp it to the wrap width. */ .qsearchwrap { position: relative; width: 150px; height: 40px; flex: 0 0 auto; } #qFilters .qbar-right .qsearch { position: absolute; right: 0; top: 0; width: 150px; height: 40px; min-width: 0; max-width: none; margin: 0; transition: width .18s ease, box-shadow .18s ease; } #qFilters .qbar-right .qsearch:focus { width: 300px; z-index: 40; box-shadow: var(--focus-ring), 0 8px 26px rgba(16,24,40,.18); } @media (max-width: 640px) { #qFilters .qfilterchips { flex-wrap: wrap; flex: 1 1 100%; } #qFilters .qbar-right { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; } .qsearchwrap { width: 100%; height: auto; flex: 1 1 auto; } #qFilters .qbar-right .qsearch { position: static; width: 100%; } } .filters button { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; font-weight: 700; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--card); color: var(--muted); cursor: pointer; } .filters button.on { color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; font-weight: 700; } /* minmax(0,1fr) not 1fr: plain 1fr tracks default to min-width:auto, so a wide child (e.g. the ticket form) blows out its track and crushes the other to a sliver - that made the support thread render 2px wide ("nothing happens"). */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .listpane { max-height: 62vh; overflow-y: auto; } .qrow { display: flex; gap: 12px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; } .qrow:last-child { border-bottom: 0; } /* "showing one campaign" banner atop the list */ .qplanbar { display: flex; align-items: center; gap: 9px; margin: 12px 14px; padding: 10px 14px; background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-3); } .qplanbar .bic { color: var(--amber-deep); } .qplanbar-k { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); } .qplanbar-t { font-size: var(--fs-4); color: var(--text); } .qplanbar-n { font-size: var(--fs-2); color: var(--muted); } .qrow:hover { background: var(--card2); } .qrow.sel { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); } /* a post that just landed here (Post now / campaign build): a brief amber pulse so it is unmissable at the top of the list, then it settles to normal */ .qrow.qrow-new { animation: qNewPulse 2.6s ease both; } @keyframes qNewPulse { 0%, 62% { background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber), 0 0 0 1px var(--amber-soft); } 100% { background: none; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .qrow.qrow-new { animation: none; background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber); } } .qrow .t { flex: 1; min-width: 0; } .qrow .t b { display: block; font-size: var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qrow .t span { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--dim); letter-spacing: .08em; } /* The meta line (source/format pills + dates) stays on ONE line: the direct child span is nowrap + ellipsis, so a long date can never grow a second row. Dates are already short (relative "Created", compact scheduled with the year dropped) so it rarely truncates; the full date lives on the .qdate hover tooltip. */ .qrow .t > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The date run switches out of the mono chip font into the proportional body font (no letter-spacing): it reads as a date rather than a code, and takes ~1/3 less width than mono - the width saving that keeps "Created ... for ..." on one line at laptop widths. .qdate = the value (emphasised); .qrel = the muted "(in 4h)" note by a scheduled time. */ .qrow .t .qwhen { font-family: var(--font-body); letter-spacing: normal; } .qrow .t .qdate { color: var(--text); } .qrow .t .qrel { opacity: .6; } /* a due/just-posted scheduled post is going OUT now (not "X ago") - amber to read as in-progress. Same treatment wherever the label appears. */ .qpublishing, .qwhen .qpublishing { color: var(--amber-deep); font-weight: 600; } .pill { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; background: var(--card); } .pill.idea { color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; font-weight: 700; } .pill.approved, .pill.scheduled { color: var(--green); background: var(--green-soft); border-color: transparent; } .pill.published { color: var(--green); border-color: transparent; background: var(--card); } /* ---------- bulk select + delete on the queue ---------- */ /* The contextual toolbar reuses .bulkbar (amber band); it swaps into the actions row's spot, so it sits at the bottom with the same margin as .actions. */ .qbulkbar { margin: 18px 0; animation: qbulkIn .18s ease both; } @keyframes qbulkIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .qbulkbar { animation: none; } } .qbulkbar #qBulkCount { color: var(--amber-deep); } /* ---- Users > Archive view ---- */ .usersub { margin: 0 0 18px; } .usub { display: block; } .archnote { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 16px; padding: 12px 15px; border: 1px solid var(--amber); background: var(--amber-soft); border-radius: var(--r-3); } .archnote .archnote-ic { color: var(--amber-deep); width: 20px; height: 20px; flex: none; margin: 0; } .archnote p { margin: 0; font-size: .9rem; color: var(--text); } .archrow { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); } .archrow:last-child { border-bottom: 0; } .archrow .qthumb.none { display: grid; place-items: center; color: var(--dim); } .archrow .qthumb.none .bic { width: 20px; height: 20px; margin: 0; } .archrow .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .archrow .t b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archrow .t > span { font-size: .6rem; color: var(--dim); letter-spacing: .06em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .archrow.tomb { opacity: .64; } .archrow.tomb .t b { font-style: italic; color: var(--muted); } .archnets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .archnetlink { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--amber-deep); border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 2px 8px; } .archnetlink:hover { border-color: var(--amber); background: var(--amber-soft); } .archnetlink .bic { width: 11px; height: 11px; margin: 0; } .archacts { display: flex; flex-wrap: wrap; gap: 7px; flex: none; align-items: center; } @media (max-width: 640px) { .archrow { flex-wrap: wrap; } .archacts { width: 100%; } } /* Mobile: the mobile layout scrolls the whole page (.qfull drops its desktop fixed-height scroller), so the select-mode action bar would otherwise sit at the very bottom of a long list - you'd scroll past every post to reach Delete/Recall. Stick it to the viewport, just above the .mbar tab bar (same offset .postwrap uses), so the actions are always in thumb reach (research: mobile bulk actions need a reachable/sticky bottom bar). position:sticky keeps it in normal flow so it never hides the last row (no content-padding hacks); a SOLID bg stops scrolled content bleeding through the amber-soft band; full-bleed to the screen edges. */ @media (max-width: 760px) { #qBulkBar.qbulkbar { position: sticky; z-index: 44; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); margin: 12px -12px 0; padding: 10px 12px; border: 0; border-top: 2px solid var(--amber); border-radius: 0; background: var(--card); box-shadow: 0 -4px 16px rgba(19, 26, 42, .14); } } /* row tick-box: 22px rounded square on the left, house look. The hit area is the whole row (in selmode), but the box itself clears the 24px min target with padding. */ .qcheck { flex: none; width: 22px; height: 22px; margin-right: 2px; border-radius: var(--r-3); border: 2px solid var(--line2); background: var(--card); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .14s ease; } .qcheck .qcheck-tick { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: all .14s ease; } .qrow.qselable { cursor: pointer; } .qrow.qselable:hover { background: var(--card2); } .qrow.qselable:hover .qcheck { border-color: var(--amber); } .qrow.qsel { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); } .qrow.qsel .qcheck { background: var(--amber); border-color: var(--amber); } .qrow.qsel .qcheck .qcheck-tick { opacity: 1; transform: none; } /* ineligible rows (scheduled/published/recalled): visible but plainly not-selectable, with a small lock instead of a tick, so Select-all + the count stay honest (NN/g). */ .qrow.qsel-off { cursor: default; opacity: .62; } .qrow.qsel-off .qcheck { border-style: dashed; border-color: var(--line2); background: var(--card2); color: var(--dim); cursor: help; } .qrow.qsel-off .qcheck .bic { width: 13px; height: 13px; margin: 0; color: var(--dim); } /* while selecting, the per-row approve toggle + network icons are muted and inert - the row is about selection now, so those controls don't compete or misfire. */ #qList.selmode .qapp, #qList.selmode .qnets { pointer-events: none; opacity: .3; } .qcheck:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .detail { padding: 18px 20px; } .detail label { display: block; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); margin: 11px 0 4px; } /* compact editor: the first comment is a one-liner most of the time */ .detail textarea.dfc { min-height: 58px; } .detail input[type=text], .detail input[type=email], .detail input[type=url], .detail input[type=number], .detail input[type=password], .detail input[type=datetime-local], .detail textarea, .detail select { width: 100%; background: var(--card2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-3); padding: 10px 12px; font-family: var(--font-body); font-size: var(--fs-4); } .detail input:focus, .detail textarea:focus { outline: none; border-color: var(--amber); background: var(--card); } .detail textarea { min-height: 110px; resize: vertical; } .netchips { display: flex; flex-wrap: wrap; gap: 6px; } .netchip { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em; padding: 6px 11px; border-radius: var(--r-3); border: 1px solid var(--line2); color: var(--dim); cursor: pointer; user-select: none; background: var(--card); } .netchip.sel { color: var(--green); background: var(--green-soft); border-color: transparent; font-weight: 700; } .netchip.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); font-weight: 700; } /* campaign-type pills (Create hub "make a campaign") - bigger + clearer */ #crRecipes { display: flex; gap: 10px; flex-wrap: wrap; } #crRecipes .netchip { font-size: var(--fs-3); letter-spacing: .04em; padding: 11px 16px; border-radius: var(--r-3); display: inline-flex; align-items: center; gap: 8px; } #crRecipes .netchip svg { width: 18px; height: 18px; } /* Choose-step outcome tiles ("What do you want to post?") - big, icon-led, one per card */ .cropts { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-top: 4px; } .cropt { display: flex; align-items: center; gap: 13px; text-align: left; padding: 15px 16px; border: 1.5px solid var(--line2); border-radius: var(--r-4); background: var(--card); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; } .cropt:hover { border-color: var(--amber); box-shadow: var(--shadow); transform: translateY(-2px); } .cropt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .cropt.on { border-color: var(--amber); background: var(--amber-soft); } .cropt .croptic { flex: none; width: 46px; height: 46px; border-radius: var(--r-3); background: var(--amber-soft); display: flex; align-items: center; justify-content: center; color: var(--text); } .cropt .croptic svg { width: 25px; height: 25px; } .cropt .croptx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cropt .croptx b { font-size: var(--fs-5); font-weight: 700; color: var(--text); line-height: 1.15; } .cropt .croptx small { font-size: var(--fs-3); color: var(--muted); line-height: 1.25; } @media (max-width: 560px) { .cropts { grid-template-columns: 1fr; } } /* trade chips carry a house glyph */ #crPacks .netchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: var(--fs-2); } #crPacks .netchip .bic, #crPacks .netchip svg { width: 16px; height: 16px; margin: 0; } /* the create-flow ribbon: the whole journey, ending at the calendar */ .crflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 14px; background: var(--card2); border: 1px dashed var(--line2); border-radius: var(--r-3); font-size: var(--fs-4); color: var(--muted); } .crflow-s { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); } .crflow-s i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--amber); } .crflow-x { color: var(--line2); font-weight: 700; } .crflow-land { color: var(--amber-deep); font-weight: 700; } /* inline "scan first" prompt shown inside Make a campaign before items exist */ .crscanfirst { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 15px 17px; border: 1.5px dashed var(--amber); border-radius: var(--r-4); background: var(--amber-soft); } .crscanfirst .crsfico { flex: none; width: 44px; height: 44px; border-radius: var(--r-3); background: var(--card); display: flex; align-items: center; justify-content: center; } .crscanfirst .crsfico .bic, .crscanfirst .crsfico svg { width: 24px; height: 24px; margin: 0; } .crscanfirst .crsftx { flex: 1 1 220px; min-width: 0; } .crscanfirst .crsftx b { font-size: var(--fs-5); } .crscanfirst [data-cr-goscan] { flex: none; } /* E1 - the campaign calendar (every campaign's posts, in its colour) */ .crcalbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .crcalmonth { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); min-width: 150px; } .crcalnav { padding: 6px 12px; font-size: var(--fs-5); line-height: 1; } .crcalfilter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .crcalfpill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-3); font-weight: 600; background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 999px; padding: 4px 5px 4px 10px; } .crcalfpill .crcalfsw { width: 10px; height: 10px; border-radius: var(--r-1); flex: none; } .crcalfpill button { border: none; background: var(--card); width: 18px; height: 18px; border-radius: 999px; cursor: pointer; color: var(--dim); line-height: 1; font-size: var(--fs-3); } .crcalfclear { border: none; background: none; color: var(--amber-deep); font: inherit; font-weight: 600; font-size: var(--fs-3); text-decoration: underline; cursor: pointer; } #crPlans [data-cr-showcal].incal { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); font-weight: 700; } .crcalnote { margin-bottom: 10px; padding: 9px 13px; background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-3); font-size: var(--fs-3); color: var(--amber-deep); font-weight: 600; } .crcalscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); } .crcaldow, .crcalgrid { display: grid; grid-template-columns: repeat(7, 1fr); min-width: 640px; } .crcaldow { background: var(--card2); border-bottom: 1px solid var(--line); } .crcaldow span { padding: 7px 9px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim); } .crcalcell { min-height: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px 5px 7px; overflow: hidden; } .crcalcell:nth-child(7n) { border-right: none; } .crcalcell.out { background: var(--card2); } .crcaldn { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--dim); display: block; margin-bottom: 4px; } .crcalcell.today .crcaldn { background: var(--amber-bright); color: #231603; font-weight: 700; border-radius: var(--r-2); padding: 1px 6px; display: inline-block; } .crcalchip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: var(--r-2); background: var(--card); border: 1px solid var(--line); margin-bottom: 4px; font-size: var(--fs-2); cursor: pointer; transition: opacity .18s, border-color .12s, box-shadow .12s; } .crcalchip:hover { border-color: var(--amber); box-shadow: 0 2px 8px rgba(19,26,42,.10); } .crcalchip:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; } .crcalchip .crcaldot { width: 6px; height: 6px; border-radius: var(--r-pill); flex: none; } .crcalchip .crcaltm { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--dim); flex: none; } .crcalchip .crcalct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .crcalgrid.filtered .crcalchip.dimd { opacity: .16; } .crcallegend { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .crleg-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .crleg-c { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-3); font-weight: 600; color: var(--text); background: none; border: 1px solid transparent; border-radius: var(--r-pill); padding: 3px 10px 3px 8px; cursor: pointer; font-family: inherit; } .crleg-c:hover { border-color: var(--line2); } .crleg-c.on { border-color: var(--amber); background: var(--amber-soft); } .crleg-c .crleg-sw { width: 12px; height: 12px; border-radius: var(--r-1); flex: none; } .crleg-st { font-size: var(--fs-3); color: var(--muted); } .crleg-s { display: inline-flex; align-items: center; gap: 6px; } .crleg-s i { width: 8px; height: 8px; border-radius: 999px; } .mediarow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .mth { width: 74px; height: 74px; border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card2) center/cover; position: relative; cursor: pointer; } /* smart-fit keep-whole asset: contain the thumbnail so a baked title shows, not a crop */ .mth.mth-fit { background-size: contain; background-repeat: no-repeat; } /* brief highlight when an in-page summary link scrolls you to a control */ .cmflash { animation: cmflash 1.5s ease; border-radius: var(--r-3); } @keyframes cmflash { 0% { box-shadow: 0 0 0 0 rgba(242,151,24,.55); } 100% { box-shadow: 0 0 0 9px rgba(242,151,24,0); } } @media (prefers-reduced-motion: reduce) { .cmflash { animation: none; } } .mth.vid::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); } .mth.sel { outline: 2px solid var(--amber); } .mednorm { flex-basis: 100%; margin-top: 8px; padding: 9px 12px; border-radius: var(--r-3); font-size: var(--fs-3); line-height: 1.4; background: var(--amber-soft); color: var(--amber-deep); } .mednorm.err { background: rgba(190, 40, 40, .1); color: #a33; } /* "Add to a post" hand-off banner: sits at the top of Posts after the media popup sends an asset over, until the user drops it in, starts a new post, or cancels. Wraps on narrow screens so it never forces sideways scroll. */ .pendattach { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-3); background: var(--amber-soft); border: 1px solid var(--amber); box-shadow: var(--shadow); } .pendattach .pathumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-3); overflow: hidden; background: var(--card2); border: 1px solid var(--line); } .pendattach .pathumb img, .pendattach .pathumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .pendattach .patext { flex: 1 1 240px; min-width: 0; font-size: var(--fs-3); line-height: 1.4; color: var(--text); } .pendattach .patext b { color: var(--amber-deep); } .pendattach .paacts { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; } .btn.medpend { font-weight: 600; } .mth .mthx { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer; font-size: var(--fs-3); line-height: 1; background: rgba(7, 11, 20, .72); color: #fff; padding: 0; opacity: 0; transition: opacity .12s; } .mth:hover .mthx, .mth .mthx:focus-visible { opacity: 1; } @media (hover: none) { .mth .mthx { opacity: 1; } } .mth .mthx:hover { background: rgba(200, 40, 40, .92); } .mpkwrap .mpk { position: relative; max-width: min(880px, 92vw); max-height: 88vh; display: flex; flex-direction: column; gap: 10px; align-items: center; } .mpk img, .mpk video { max-width: 100%; max-height: 80vh; border-radius: var(--r-4); box-shadow: var(--shadow-lg); background: #000; } .mpkname { color: #fff; font-size: var(--fs-2); letter-spacing: .1em; text-shadow: 0 1px 4px rgba(0,0,0,.7); } .mpk .mlbclose { position: absolute; top: -14px; right: -14px; } .mth .ord { position: absolute; top: 3px; left: 5px; font-family: var(--font-mono); font-size: var(--fs-1); color: #fff; background: var(--amber); border-radius: var(--r-2); padding: 1px 5px; } /* ---------- media grid ---------- */ .uprow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5); padding: 16px 20px; box-shadow: var(--shadow); } .uprow input[type=file] { color: var(--muted); font-size: var(--fs-4); } .uprow input[type=email], .uprow input[type=password], .uprow select { background: var(--card2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-3); padding: 10px 12px; font-family: var(--font-body); } .mediagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; } .masset { border: 1px solid var(--line); border-radius: var(--r-4); overflow: hidden; background: var(--card); box-shadow: var(--shadow); } .masset .img { height: 112px; background: var(--card2); position: relative; overflow: hidden; } /* slick load: a shimmer holds the tile until the real image decodes, then it fades + gently settles in (scale 1.03 -> 1). Overlays stay above via z-index. */ .masset .img::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, var(--card2) 30%, var(--line2) 50%, var(--card2) 70%); background-size: 200% 100%; animation: shimmer 1.15s linear infinite; } .masset .img.loaded::before { display: none; } .masset .mimg, .masset .img video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; } .masset .mimg { transition: opacity .4s ease, transform .55s ease; transform: scale(1.03); } .masset .img.loaded .mimg, .masset .img.loaded video { opacity: 1; } .masset .img.loaded .mimg { transform: none; } .masset .img .aibadge, .masset .img .mact, .masset .img.vid::after { z-index: 4; } /* non-image library tiles: a PDF (print output, thumbnailed) + an audio track */ .masset .mkbadge { position: absolute; left: 6px; bottom: 6px; z-index: 4; background: rgba(11,18,32,.82); color: #fff; padding: 2px 7px; border-radius: var(--r-2); font-size: var(--fs-1); letter-spacing: .05em; } .masset .maudio { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; color: var(--amber-deep); } .masset .maudio svg { width: 34px; height: 34px; } .masset .maudio .mono { font-size: var(--fs-1); color: var(--muted); letter-spacing: .07em; } @media (prefers-reduced-motion: reduce) { .masset .img::before { animation: none; } .masset .mimg { transition: none; transform: none; } } .masset .img.vid::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-6); text-shadow: 0 1px 6px rgba(0,0,0,.6); } /* library load-in skeleton: shimmering .img tiles + placeholder meta bars */ .masset.mskel { pointer-events: none; } .mskb { display: inline-block; height: 8px; width: 58%; border-radius: var(--r-1); background: linear-gradient(100deg, var(--card2) 30%, var(--line2) 50%, var(--card2) 70%); background-size: 200% 100%; animation: shimmer 1.15s linear infinite; } .mskb.sm { width: 26%; } @media (prefers-reduced-motion: reduce) { .mskb { animation: none; } } .masset .meta { padding: 9px 12px; font-family: var(--font-mono); font-size: var(--fs-1); color: var(--dim); letter-spacing: .06em; display: flex; justify-content: space-between; } /* Growth Tools: Post Agent - full-width brief + the what-happens flow line */ .agflow { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); margin-bottom: 10px; } #agentBox .agbrief, #agentBox #agBody { width: 100%; max-width: 760px; } #agentBox .actions { align-items: center; flex-wrap: wrap; } #agentBox .actions .hint { flex: 1 1 320px; } /* Posts: the how-it-flows strip - bank -> posts -> media -> published */ .qflow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: var(--r-4); background: var(--card2); } .qflow-node { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 150px; min-width: 140px; padding: 10px 14px; border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card); text-align: left; font-family: var(--font-body); color: var(--text); transition: all .18s ease; } button.qflow-node, .qflow-node[role="button"] { cursor: pointer; } button.qflow-node:hover, .qflow-node[role="button"]:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); } .qflow-node.here { border-color: var(--amber); background: var(--amber-soft); } .qflow-node b { font-size: var(--fs-4); } .qflow-node em { font-style: normal; font-size: var(--fs-2); color: var(--dim); line-height: 1.35; } /* the active ("here") node sits on amber-soft, where --dim drops below AA; its caption should be more prominent anyway - lift it to --muted. */ .qflow-node.here em { color: var(--muted); } .qflow-node .qfico { font-size: var(--fs-5); display: inline-flex; } .qflow-node .qfico svg { width: 21px; height: 21px; } .qflow-node .qfn { font-size: var(--fs-1); letter-spacing: .08em; color: var(--amber-deep); } /* stage illustration - grows to fill the tall Posts / Published cards and centres itself in the space below the label (house line-art language) */ .qflow-node .qfart { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 14px 6px 4px; } .qflow-node .qfart svg { width: 100%; max-width: 172px; height: auto; opacity: .8; } @media (max-width: 900px) { .qflow-node .qfart { min-height: 78px; } } .qflow-arrow { align-self: center; color: var(--dim); font-size: var(--fs-6); flex: none; } .qflow-srcs { display: flex; flex-direction: column; gap: 2px; flex: 1 1 170px; min-width: 150px; align-items: stretch; } .qflow-srcs .qflow-node { flex: 1; min-width: 0; } .qflow-bidi { align-self: center; color: var(--amber-deep); font-size: var(--fs-5); line-height: 1; padding: 1px 6px; cursor: help; } .qcarwrap { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); } @media (max-width: 900px) { .qflow-arrow { display: none; } } /* bank: the ideas card grid - three columns of clean, scannable cards */ .bkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 4px 2px 12px; } .bkcard { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-4); background: var(--card); box-shadow: var(--shadow); cursor: pointer; transition: border-color .18s ease; } .bkcard:hover { border-color: var(--amber); } .bkcard b { font-size: var(--fs-4); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bkcard p { font-size: var(--fs-3); color: var(--muted); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .bkc-top { display: flex; align-items: center; gap: 8px; } .bkc-cat { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); background: var(--amber-soft); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; } .bkc-st { font-size: var(--fs-1); letter-spacing: .1em; padding: 3px 9px; border-radius: var(--r-pill); } .bkc-st.ready { color: var(--green); background: var(--green-soft); } .bkc-st.queued { color: var(--amber-deep); background: var(--amber-soft); } .bkc-st.retired { color: var(--dim); background: var(--card2); } .bkc-pin { display: flex; align-items: center; gap: 9px; } .bkc-pin img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-3); border: 2px solid var(--amber); background: var(--card2); flex: none; } .bkc-pin span { font-size: var(--fs-1); letter-spacing: .09em; color: var(--amber-deep); } .bkc-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .bkc-foot .bkc-plat { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); } .bkc-foot .btn { padding: 4px 10px; font-size: var(--fs-2); } .bkc-foot .hlink { font-size: var(--fs-1); letter-spacing: .06em; } /* ---------- Ideas: LIST display mode ---------- The SAME idea cards (#bankList .bkcard), reflowed into compact scannable rows via a single .aslist class - identical DOM, so every card action still works; only the layout changes. Detail (body copy, film brief) is hidden in the list to keep one clean line per idea; the hook stays as the headline, and clicking the row opens the full idea to read/edit everything. Wraps on mobile - never a sideways scroll. */ #bankList.aslist .bkgrid { display: flex; flex-direction: column; gap: 7px; } #bankList.aslist .bkcard { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px 8px 15px; border-radius: var(--r-3); position: relative; } /* status-colour spine down the left edge: ready/queued/retired at a glance */ #bankList.aslist .bkcard::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 var(--r-1) var(--r-1) 0; background: var(--line2); } #bankList.aslist .bkcard:has(.bkc-st.ready)::before { background: var(--green); } #bankList.aslist .bkcard:has(.bkc-st.queued)::before { background: var(--amber); } #bankList.aslist .bkcard:has(.bkc-st.retired)::before { background: var(--line); } /* left cluster (select + topic + status): a fixed width so the status pill and the hook after it line up down the whole list - the eye scans a straight column. The topic ellipsises within; the spacer pushes the status to the cluster's right edge. */ #bankList.aslist .bkc-top { flex: 0 0 202px; gap: 7px; min-width: 0; } #bankList.aslist .bkc-top .spacer { display: block; } #bankList.aslist .bkc-cat { flex: 0 1 auto; min-width: 0; max-width: none; } /* the hook is the row's readable label: one line, fills the middle, ellipsis if long */ #bankList.aslist .bkcard > b { flex: 1 1 240px; min-width: 120px; margin: 0; -webkit-line-clamp: 1; font-size: var(--fs-3); line-height: 1.4; } /* body + film brief are detail - hidden in the scannable list (open the idea to read) */ #bankList.aslist .bkcard > p, #bankList.aslist .bkc-brief { display: none; } #bankList.aslist .bkc-meta { flex: 0 0 auto; margin: 0; white-space: nowrap; font-size: var(--fs-1); } /* pinned photo shrinks to a small thumb; its long label drops in the tight row */ #bankList.aslist .bkc-pin { flex: 0 0 auto; gap: 0; } #bankList.aslist .bkc-pin img { width: 30px; height: 30px; border-width: 1.5px; } #bankList.aslist .bkc-pin span { display: none; } /* right cluster (platform voice + actions) stays together and does not grow */ #bankList.aslist .bkc-foot { flex: 0 0 auto; margin: 0; gap: 6px; } #bankList.aslist .bkc-foot .spacer { display: none; } /* narrow screens: give the hook its own line so nothing clips; drop the voice label */ @media (max-width: 560px) { #bankList.aslist .bkcard > b { flex-basis: 100%; -webkit-line-clamp: 2; } #bankList.aslist .bkc-foot .bkc-plat { display: none; } } /* Overview: YOUR CREATIONS strip */ .crncard { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: var(--r-3); margin-bottom: 10px; background: var(--card2); flex-wrap: wrap; } .crncard.need { border-left: 3px solid var(--amber); } .crnico { flex: none; display: inline-flex; } .crnico .bic { width: 22px; height: 22px; margin-right: 0; } .crnbody { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .crnbody b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crnmeta { font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim); } /* "Type of generation" filter row above the creations grid. Mirrors the house pill look (.filterchips) but WRAPS (never a mobile sideways scroll). */ .crnfilters { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; } .crnfilter { background: none; border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-1); letter-spacing: .04em; color: var(--dim); cursor: pointer; } .crnfilter.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); } .crnfilter .crnfn { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; } .crnfilter.on .crnfn { opacity: .8; } .crnvisuals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 10px; } .crnmore { margin: 2px 0 12px; font-size: var(--fs-2); } .crnvis { position: relative; border: 1px solid var(--line2); border-radius: var(--r-3); overflow: hidden; background: var(--card); display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .crnvis.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); } /* the whole card opens the creation (role=button) - signal it: hand cursor + hover lift */ .crnvis:hover { border-color: var(--amber-bright); box-shadow: 0 4px 14px rgba(0,0,0,.10); } .crnvis img, .crnvis video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; position: relative; z-index: 1; opacity: 0; transition: opacity .4s ease; } .crnvis.loaded img, .crnvis.loaded video { opacity: 1; } /* shimmer covers only the image box (the 4/3 top) until the thumb decodes */ .crnvis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3; z-index: 0; background: linear-gradient(100deg, #1c2740 30%, #2b3a58 50%, #1c2740 70%); background-size: 200% 100%; animation: shimmer 1.15s linear infinite; } .crnvis.loaded::before { display: none; } .crnvis .crnord, .crnvis .crnsrc { z-index: 2; } @media (prefers-reduced-motion: reduce) { .crnvis::before { animation: none; } .crnvis img, .crnvis video { transition: none; } } .crnord { position: absolute; top: 6px; left: 6px; background: var(--amber); color: #1a1206; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .crnsrc { position: absolute; top: 6px; right: 6px; font-size: var(--fs-1); letter-spacing: .08em; background: rgba(7,11,20,.66); color: #fff; border-radius: var(--r-pill); padding: 2px 7px; } .crnname { font-size: var(--fs-2); color: var(--muted); padding: 6px 8px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crnacts { display: flex; gap: 6px; padding: 4px 8px 8px; } .crnbtn { font-size: var(--fs-2); padding: 4px 8px; flex: 1; } .crntpl { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); margin: 2px 0 6px; } /* section dividers inside YOUR CREATIONS - give the panel clear rhythm so each group (campaigns / run-another) reads as its own labelled band */ .crnsec { font-size: var(--fs-1); letter-spacing: .13em; color: var(--dim); text-transform: uppercase; font-weight: 700; margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line2); } .crnsec:first-child { margin-top: 2px; padding-top: 0; border-top: 0; } /* the "this is a campaign" tag that sits above each campaign name */ /* NOTE: .crpkind is the 40px kind-icon SQUARE (see dashboard.html