/* Sage usage page and the run view's quiet "Sage: 3 calls" fact (views/sage.js). */

.sage-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .sage-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sage-tiles { grid-template-columns: minmax(0, 1fr); } }
.meter i[data-over] { background: var(--fail); }

.sage-budget { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-4); font-size: 14px; }
.sage-budget--none { font-size: 13px; }

.sage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); }
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-s); background: var(--fill-quiet); }
.seg__btn { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.seg__btn[aria-pressed="true"] { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-1); }
.seg__btn:focus-visible { outline: none; box-shadow: var(--focus); }

.sage-table + .sage-table { margin-top: var(--s-5); }
.sage-table h4 { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 0 0 var(--s-2); }
.sage-table th[scope="row"] { font-weight: 500; text-align: left; position: relative; }
.sage-bar { display: block; height: 3px; border-radius: 2px; background: var(--accent-soft);
  margin-bottom: 6px; width: calc(var(--share, 0) * 100%); min-width: 2px; }
.sage-notes { font-size: 13px; margin-top: var(--s-4); display: grid; gap: var(--s-2); }

/* the run view: one quiet line, the list behind it */
.sage-fact { margin-top: var(--s-4); }
.sage-fact__details > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; color: var(--text-2); list-style: none; }
.sage-fact__details > summary::-webkit-details-marker { display: none; }
.sage-fact__details > summary svg { width: 14px; height: 14px; }
.sage-fact__details[open] > summary { color: var(--text); }
.sage-fact__unknown { font-size: 13px; }
.sage-calls { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.sage-call { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center;
  padding: 7px 10px; border-radius: var(--r-s); background: var(--bg-sunken); }
.sage-call__meta { color: var(--text-2); white-space: nowrap; }
@media (max-width: 640px) {
  .sage-call { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}