/* =========================================================
   Graphene Live — add-on tools styling (extends tools.css)
   ========================================================= */

/* Social / Open Graph preview card */
.og-card { background: #fff; border: 1px solid #dadde1; border-radius: 10px; overflow: hidden; width: 100%; max-width: 420px; font-family: Helvetica, Arial, sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.og-card__img { background: #e4e6eb; color: #65676b; height: 220px; display: grid; place-items: center; font-size: 14px; background-size: cover; background-position: center; }
.og-card__img.has-img { color: transparent; }
.og-card__body { padding: 10px 14px; border-top: 1px solid #dadde1; }
.og-card__domain { color: #65676b; font-size: 12px; text-transform: uppercase; letter-spacing: .2px; }
.og-card__title { color: #1d2129; font-size: 16px; font-weight: 600; line-height: 1.3; margin: 3px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.og-card__desc { color: #606770; font-size: 14px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Heading analyzer */
.ha-outline { list-style: none; margin: 0; font-size: 14px; }
.ha-outline li { padding: 5px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.ha-tag { display: inline-block; min-width: 34px; font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 12px; }
.ha-issues { margin-bottom: 24px; }
.ha-issues h4 { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--fg); }
.ha-issues ul { margin: 0 0 0 1.1em; color: #ffb4b4; font-size: 15px; line-height: 1.6; }
.ha-issues--ok h4 { color: #8fe388; }
.ha-issues--ok p { color: var(--muted); font-size: 15px; }