/* Tricks (os/apps/tricks.js): a gallery of cards, filters on top. Tokens from os.css, so it reads in dark and light. */
.tk-app { font: 14px/1.5 var(--font-body); color: var(--text); }
.tk-head { padding: 20px 24px 0; }
.tk-head h2, .tk-head h1 { margin: 0 0 4px; font: 700 24px/1.2 var(--font-display); letter-spacing: -.01em; }
.tk-lead { margin: 0; max-width: 72ch; color: var(--text-2); }
.tk-tools { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 24px; background: var(--win-body); border-bottom: 1px solid var(--border); }
.tk-tools[hidden] { display: none; }
.tk-search { display: flex; align-items: center; gap: 8px; flex: 0 1 260px; min-width: 180px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--btn-line); background: var(--surface); }
.tk-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.tk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--btn-line); background: var(--btn); color: var(--text); font: 500 13px var(--font-ui); cursor: pointer; }
.tk-chip:hover { background: var(--btn-hover); }
.tk-chip small { margin-left: 3px; color: var(--text-3); font-size: 11.5px; }
.tk-chip[aria-pressed="true"] { background: var(--accent-ui); border-color: transparent; color: #0b0f1e; }
.tk-chip[aria-pressed="true"] small { color: rgba(11,15,30,.65); }

.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 16px 24px 8px; }
.tk-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); scroll-margin-top: 110px; }
.tk-card[hidden] { display: none; }
.tk-card.is-lit { animation: tk-lit 1.6s var(--ease); }
@keyframes tk-lit { 0%, 40% { box-shadow: 0 0 0 3px var(--accent-ui); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tk-cat { margin: 0; font: 600 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tk-card h3 { margin: 0; font: 650 17px/1.3 var(--font-display); }
.tk-problem { margin: 0; color: var(--text-2); }
.tk-card:has(.tk-reel) :is(h3, .tk-problem) { padding-right: 64px; }
.tk-old, .tk-new { padding: 8px 10px; border-radius: 7px; }
.tk-old { background: var(--surface-2); }
.tk-new { background: color-mix(in srgb, var(--accent-ui) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent-ui) 30%, transparent); }
.tk-old b, .tk-new b { display: block; font: 600 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.tk-new b { color: var(--link); }
.tk-old p, .tk-new p { margin: 2px 0 0; }
.tk-old p { color: var(--text-2); }
.tk-card kbd { display: inline-block; padding: 0 5px; border-radius: 4px; border: 1px solid var(--btn-line); border-bottom-width: 2px; background: var(--btn); font: 600 12px var(--font-ui); white-space: nowrap; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: auto 0 0; padding-top: 4px; font-size: 13px; }
.tk-meta .tag { vertical-align: 0; }
.tk-try svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.tk-blog { color: var(--link); }
/* The matching reel: a small poster in the corner that opens it in Reels. */
.tk-reel { position: absolute; right: 14px; top: 14px; width: 54px; border-radius: 7px; overflow: hidden; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.tk-reel img { display: block; width: 54px; height: 96px; object-fit: cover; }
.tk-reel span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 2px 3px; font: 600 9.5px var(--font-ui); color: #fff; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.tk-reel:hover img { filter: brightness(1.1); }
.tk-card:has(.tk-reel) { min-height: 140px; }
.tk-none { padding: 24px; text-align: center; color: var(--text-2); }
.tk-foot { margin: 8px 24px 24px; padding: 16px; border-radius: 10px; background: var(--surface-2); }
.tk-foot p { margin: 0 0 10px; max-width: 80ch; }
.tk-foot p:last-child { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tk-foot a.os-btn { text-decoration: none; }
@container (max-width: 560px) { .tk-head, .tk-tools, .tk-grid { padding-left: 14px; padding-right: 14px; } .tk-foot { margin: 8px 14px 18px; } }