/* Free Twitter Tools - the X / Twitter skin on top of the shared
 * platform-tools.css shell: a two-across grid of compact cards (icon,
 * name, description, one facts line), the whole card one link. The
 * X-timeline post (handle line, link card, Open tool button) was
 * simplified to this on 2026-09-10 (operator: too much happening); the
 * action-icon row and Saved tab went 2026-09-03. No profile header: the
 * cards sit above the fold. */

:root {
    --x-ink:       #0f1419;
    --x-muted:     #536471;
    --x-border:    #e6ecf0;
    --x-border-hov:#b9d9f2;
    --x-chip:      #eff3f4;
    --x-blue:      #1d9bf0;
    --x-blue-dark: #1a8cd8;
    --x-blue-tint: #e8f4fd;

    --pp-h1:    var(--x-blue-dark);
    --pp-muted: var(--x-muted);
    --pp-link:  var(--x-blue-dark);
    --pp-faq-highlight: #e8f4fd;
}

/* -------------------------------------------------------------------
 * Grid: two cards across on desktop, one on phones
 * ------------------------------------------------------------------- */
.ftt-feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    color: var(--x-ink);
}

/* -------------------------------------------------------------------
 * Card: icon | name + description + facts. The name is the only anchor;
 * its ::after is stretched over the card so the whole card is one click
 * target and screen readers hear one link per tool.
 * ------------------------------------------------------------------- */
.ftt-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--x-border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 24px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ftt-card:hover,
.ftt-card:focus-within {
    background: #f7fbfe;
    border-color: var(--x-border-hov);
    box-shadow: 0 2px 10px rgba(29, 155, 240, 0.10);
}
.ftt-card:focus-within {
    outline: 2px solid var(--x-blue);
    outline-offset: 2px;
}

.ftt-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--x-blue-tint);
    color: var(--x-blue-dark);
    font-size: 24px;
}

.ftt-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ftt-card-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--x-ink);
}
.ftt-card-name a {
    color: inherit;
    text-decoration: none;
    outline: none;
}
.ftt-card-name a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
}
.ftt-card:hover .ftt-card-name a {
    color: var(--x-blue-dark);
}
.ftt-card-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--x-ink);
}
.ftt-card-facts {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--x-muted);
    font-feature-settings: var(--tnum);
}

/* -------------------------------------------------------------------
 * Mobile (project breakpoints: 640px, 420px)
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    .ftt-feed { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ftt-card { padding: 16px; gap: 14px; }
    .ftt-card-icon { width: 42px; height: 42px; font-size: 21px; }
}
@media (max-width: 420px) {
    .ftt-card { padding: 14px; gap: 12px; }
    .ftt-card-text { font-size: 14px; }
}