/* Shared compact layout for Meter Interoperability pages (especially embed) */
html.embed body { font-size: 14px; }
html.embed .wrap { padding: 0.75rem 1.15rem 1.25rem; max-width: none; }
html.embed h1 { font-size: 18px; margin-bottom: 0.2rem; }
html.embed .sub { font-size: 12px; margin-bottom: 0.65rem; }
html.embed .lead { font-size: 13px; margin-bottom: 0.75rem; line-height: 1.5; }
html.embed h2 { font-size: 14px; margin: 1rem 0 0.5rem; padding-bottom: 0.3rem; }
html.embed h3 { font-size: 13px; margin: 0.75rem 0 0.35rem; }
html.embed p, html.embed li { font-size: 13px; margin-bottom: 0.35rem; }
html.embed .callout { font-size: 12px; padding: 0.6rem 0.8rem; margin-bottom: 0.75rem; }
html.embed details { font-size: 13px; margin-bottom: 0.75rem; }
html.embed details summary { cursor: pointer; font-weight: 500; color: var(--teal); padding: 0.35rem 0; }
html.embed details[open] summary { margin-bottom: 0.5rem; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.85rem; }
.dash-card { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; background: var(--bg-2); font-size: 12px; }
.dash-card h3 { margin: 0 0 0.35rem; font-size: 12px; color: var(--teal); font-weight: 500; }
.dash-card ul { margin: 0; padding-left: 1rem; color: var(--text-2); line-height: 1.4; }
.dash-card li { margin-bottom: 0.2rem; font-size: 12px; }
.dash-card-primary { border-color: var(--green); background: var(--green-50); }
.dash-card-primary h3 { color: var(--green); }

.problem-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; margin-bottom: 0.85rem; font-size: 12px;
}
.problem-grid div { padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); line-height: 1.4; }
.problem-grid strong { display: block; font-size: 11px; margin-bottom: 0.15rem; color: var(--text); }

.meter-footer { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-top: 0.5rem; }
.meter-footer a { font-size: 12px; }

.tag-draft {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 12px;
  background: var(--amber-50); color: var(--amber); font-weight: 500; vertical-align: middle;
}

.tbl-wrap { overflow-x: auto; margin-bottom: 0.85rem; border: 1px solid var(--border); border-radius: 10px; }

@media (max-width: 640px) {
  .dash-grid, .problem-grid { grid-template-columns: 1fr; }
}