/* Institution progress tiles (templates/_institution_progress.html).

   Layout: 5 tiles per row, and a last row with fewer tiles sits CENTERED
   (2 leftovers float in the middle, not at the left). That needs flexbox with
   justify-content: center; a CSS grid always fills rows from the left.

   width: 100% matters. When the page centers its content with a flex column
   (align-items: center), children shrink to their content width, and the
   tiles' percentage widths then have nothing to divide: everything stacks one
   per line. Giving the section the full width (capped at max-width) fixes it. */

.inst-progress { box-sizing: border-box; width: 100%; max-width: 1200px;
                 margin: 1rem auto 1.5rem; padding: 0 1rem; }

.inst-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem;
                margin-bottom: .9rem; color: var(--text-secondary); font-size: .9rem; }
.inst-summary strong { color: var(--accent); }

/* --cols tiles per row; each tile takes 1/--cols of the row minus the gaps. */
.inst-grid { --cols: 5; --gap: 10px;
             display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
@media (max-width: 1000px) { .inst-grid { --cols: 3; } }
@media (max-width: 640px)  { .inst-grid { --cols: 2; } }
@media (max-width: 420px)  { .inst-grid { --cols: 1; } }

.inst-tile { box-sizing: border-box;
             flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
             display: grid; grid-template-columns: 1fr auto;
             grid-template-areas: "name name" "updated updated" "bar pct";
             align-items: center; gap: .45rem .6rem; padding: .6rem .75rem;
             border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface); min-width: 0; }

/* Two lines reserved for every name, so tiles in a row line up even when one
   name is short and the next is long. */
.inst-name { grid-area: name; color: var(--text-strong); font-size: .8rem; line-height: 1.3; min-height: 2.6em;
             text-align: left;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.inst-updated { grid-area: updated; color: var(--text-muted); font-size: .7rem; text-align: left;
                font-variant-numeric: tabular-nums; }

.inst-bar { grid-area: bar; height: 6px; background: var(--track); border-radius: 999px; overflow: hidden; }
.inst-bar > span { display: block; height: 100%; background: var(--accent-mid); border-radius: inherit; }

.inst-pct { grid-area: pct; min-width: 3.4em; text-align: right; color: var(--accent-mid);
            font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.inst-tile.is-complete .inst-bar > span { background: var(--success); }
.inst-tile.is-complete .inst-pct { color: var(--success); }