/* ============================================================
   UTILITIES
   ------------------------------------------------------------
   Thin classes over the token scales, for the cases where a width
   belongs to a layout decision rather than to a component:

       <div class="w-400">…</div>

   `.w-*` sets max-inline-size, not inline-size — a 400px panel that
   cannot shrink below 400px breaks on a phone. Use `.w-*--fixed`
   when you genuinely need a hard width.
   ============================================================ */

.w-60   { max-inline-size: var(--w-60); }
.w-80   { max-inline-size: var(--w-80); }
.w-100  { max-inline-size: var(--w-100); }
.w-120  { max-inline-size: var(--w-120); }
.w-150  { max-inline-size: var(--w-150); }
.w-180  { max-inline-size: var(--w-180); }
.w-240  { max-inline-size: var(--w-240); }
.w-300  { max-inline-size: var(--w-300); }
.w-400  { max-inline-size: var(--w-400); }
.w-500  { max-inline-size: var(--w-500); }
.w-600  { max-inline-size: var(--w-600); }
.w-700  { max-inline-size: var(--w-700); }
.w-800  { max-inline-size: var(--w-800); }
.w-900  { max-inline-size: var(--w-900); }
.w-1000 { max-inline-size: var(--w-1000); }
.w-1100 { max-inline-size: var(--w-1100); }
.w-1200 { max-inline-size: var(--w-1200); }

[class*="w-"] { inline-size: 100%; }

/* Hard width, for the rare element that must not shrink. */
.w-60--fixed   { inline-size: var(--w-60);   max-inline-size: none; }
.w-80--fixed   { inline-size: var(--w-80);   max-inline-size: none; }
.w-100--fixed  { inline-size: var(--w-100);  max-inline-size: none; }
.w-120--fixed  { inline-size: var(--w-120);  max-inline-size: none; }
.w-150--fixed  { inline-size: var(--w-150);  max-inline-size: none; }
.w-180--fixed  { inline-size: var(--w-180);  max-inline-size: none; }
.w-240--fixed  { inline-size: var(--w-240);  max-inline-size: none; }
.w-300--fixed  { inline-size: var(--w-300);  max-inline-size: none; }
.w-400--fixed  { inline-size: var(--w-400);  max-inline-size: none; }

/* Centre a width-capped block in its container. */
.w-center { margin-inline: auto; }